*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--fog);
  color:var(--text-body);
  font-family:var(--font-body);
}
a{color:var(--link);text-decoration:none;transition:color var(--duration-fast) var(--ease-out);}
a:hover{color:var(--link-hover);}
/* Every <img> carries explicit width and height attributes so the browser can
   reserve the right space before the file arrives. Those attributes are literal
   pixel values, so an image whose width CSS constrains would render at its full
   attribute height and stretch. `height:auto` restores the aspect ratio while
   keeping the reserved-space benefit. Rules that deliberately set a height
   (object-fit covers, the logos) declare it themselves and still win. */
img{max-width:100%;height:auto;display:block;}

/* THE PAGE CONTAINER. Fluid at every width, with no upper stop.
   This used to be `max-width:1440px`, which is what made the site render as a
   narrow column with dead space either side on anything wider. It is not
   replaced with a bigger fixed number, because a bigger fixed number
   reproduces the identical problem one monitor size further along.
   Horizontal breathing room is not applied here: it belongs to the bands, so
   that a band's BACKGROUND still runs edge to edge while its CONTENT sits in
   from the edge by var(--gutter). See the gutter block in tokens.css. */
.wrap{width:100%;max-width:none;margin-inline:auto;box-sizing:border-box;background:var(--white);}

/* browser surfaces: theme what we didn't draw */
::selection{background:var(--infinity-blue);color:var(--white);}
:focus-visible{outline:2px solid var(--accent-primary);outline-offset:3px;border-radius:2px;}
html{scrollbar-color:#c4c4bc var(--fog);scrollbar-width:thin;}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-track{background:var(--fog);}
::-webkit-scrollbar-thumb{background:#c4c4bc;border-radius:8px;border:2px solid var(--fog);}
::-webkit-scrollbar-thumb:hover{background:#a9a99f;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
    scroll-behavior:auto!important;
  }
}

.eyebrow{
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
}

/* image placeholder: swap for a real <img> when photography is ready */
.img-placeholder{
  position:relative;
  width:100%;
  height:100%;
  background:repeating-linear-gradient(135deg,#e2e2dc,#e2e2dc 12px,#ececE7 12px,#ececE7 24px);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-muted);
  font-family:var(--font-body);
  font-size:13px;
  text-align:center;
  padding:24px;
}

/* nav */
.site-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 32px;
  border-bottom:1px solid var(--border-default);
  background:var(--white);
  position:relative;
  z-index:20;
}
.logo-link{display:block;line-height:0;}
.logo-img{height:44px;width:auto;display:block;}
.nav-links{display:flex;gap:32px;align-items:center;}
.nav-link{
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:0.08em;
  color:var(--ink);
  text-transform:uppercase;
  transition:color var(--duration-fast) var(--ease-out);
}
.nav-link:hover{color:var(--infinity-blue);}
.nav-link-active{color:var(--infinity-blue);border-bottom:1px solid var(--infinity-blue);padding-bottom:2px;}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--black);margin:5px 0;transition:transform var(--duration-base) var(--ease-out-expo),opacity var(--duration-fast) var(--ease-out);}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){opacity:0;}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* nav dropdowns (Phase 3)
   Explore and Resources. The trigger is a real <button> carrying .nav-link, so
   everything about its type is already set above and only the button reset and
   the caret belong here.

   TWO WAYS IN, NEVER ONE. With scripting on, assets/nav.js toggles .is-open and
   keeps aria-expanded truthful. With scripting off, .nav-js is never stamped on
   <html> and the :hover and :focus-within rules below take over, so a keyboard
   can still tab into every link. The two are mutually exclusive on purpose: if
   both were live, hover would open a panel that aria-expanded still called
   closed. */
.nav-group{position:relative;display:flex;align-items:center;}
.nav-group-trigger{
  background:none;
  border:none;
  margin:0;
  padding:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.nav-caret{flex:none;transition:transform var(--duration-fast) var(--ease-out);}
.nav-group.is-open .nav-caret{transform:rotate(180deg);}
.nav-group.is-open > .nav-group-trigger{color:var(--infinity-blue);}

.nav-menu{
  display:none;
  flex-direction:column;
  position:absolute;
  /* Clears the header's 20px bottom padding so the panel hangs below the whole
     bar rather than cutting through its border. Both desktop breakpoints use
     that same padding; the drawer below 768px resets this to static. */
  top:calc(100% + 20px);
  left:-20px;
  min-width:252px;
  padding:10px 0;
  background:var(--white);
  border:1px solid var(--border-default);
  box-shadow:var(--shadow-raised);
  z-index:30;
}
/* An invisible bridge across the gap between the trigger and the panel. Without
   it the diagonal path to the third item crosses dead pixels and the menu shuts
   mid-reach. assets/nav.js also holds the panel open for 180ms on the way out;
   both are needed, because the bridge cannot cover a sideways exit. */
.nav-menu::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px;}
.nav-group.is-open > .nav-menu{display:flex;}
/* Resources is the last group before the Contact button, close enough to the
   right edge that a 252px panel opening rightward would run off screen. It
   hangs from its right edge instead. */
.nav-group:last-of-type > .nav-menu{left:auto;right:-20px;}

.nav-menu-link{
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink);
  padding:9px 20px;
  white-space:nowrap;
  transition:color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out);
}
.nav-menu-link:hover{color:var(--infinity-blue);background:var(--fog);}
.nav-menu-link-active{color:var(--infinity-blue);}
.nav-menu-divider{
  border:none;
  border-top:1px solid var(--border-default);
  margin:9px 20px;
}

/* Scripting off: hover and keyboard focus open the panel, since the button
   cannot. Scoped to :not(.nav-js) so it switches itself off the moment
   assets/nav.js loads. */
html:not(.nav-js) .nav-group:hover > .nav-menu,
html:not(.nav-js) .nav-group:focus-within > .nav-menu{display:flex;}
html:not(.nav-js) .nav-group:hover .nav-caret,
html:not(.nav-js) .nav-group:focus-within .nav-caret{transform:rotate(180deg);}

/* hero */
.hero{position:relative;width:100%;height:640px;overflow:hidden;}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.55) 100%);pointer-events:none;}
.hero-content{position:absolute;left:56px;bottom:56px;right:56px;color:var(--white);}
.hero-kicker{font-family:var(--font-body);font-size:12px;letter-spacing:var(--tracking-label);text-transform:uppercase;margin-bottom:14px;opacity:0.9;}
.hero-title{font-family:var(--font-heading);font-size:64px;line-height:var(--leading-tight);margin:0 0 28px;}
/* The tagline lives inside the h1 so the heading carries the location keywords
   rather than the bare brand word, while reading exactly as it did before. */
.hero-title-line{display:block;font-family:var(--font-heading);font-size:24px;font-style:italic;font-weight:400;line-height:var(--leading-heading);margin-top:10px;}
.hero-subtitle{font-family:var(--font-heading);font-size:24px;font-style:italic;margin:0 0 28px;}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;}
.hero-award{
  position:absolute;top:24px;right:24px;
  background:var(--infinity-blue);
  border-radius:8px;
  padding:12px 16px;
  box-shadow:0 4px 16px rgba(0,0,0,0.12);
}
.hero-award-label{font-family:var(--font-body);font-size:10px;letter-spacing:var(--tracking-label);color:var(--white);opacity:0.8;text-transform:uppercase;}
.hero-award-value{font-family:var(--font-heading);font-size:22px;color:var(--white);}

/* focal entrance: the hero image settles from a slight zoom while the copy
   arrives in a short authored stagger. This is the site's one rehearsed
   sequence, so it repeats identically on every hero and page-hero. */
@keyframes heroSettle{from{transform:scale(1.07);}to{transform:scale(1);}}
@keyframes heroFadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@keyframes heroPopIn{from{opacity:0;transform:scale(0.92);}to{opacity:1;transform:scale(1);}}

.hero>img,.page-hero>img{animation:heroSettle 7s var(--ease-out-expo) both;}
.hero-kicker,.page-hero-kicker{animation:heroFadeUp 600ms var(--ease-out-expo) both;}
.hero-title,.page-hero-title{animation:heroFadeUp 700ms var(--ease-out-expo) 110ms both;}
.hero-title-line{animation:heroFadeUp 700ms var(--ease-out-expo) 110ms both;}
.hero-subtitle,.page-hero-subtitle{animation:heroFadeUp 700ms var(--ease-out-expo) 220ms both;}
.hero-actions{animation:heroFadeUp 700ms var(--ease-out-expo) 330ms both;}
.hero-award{animation:heroPopIn 500ms var(--ease-out-expo) 480ms both;}

/* intro */
.intro{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:88px 56px;align-items:center;}
.intro-eyebrow{color:var(--infinity-blue);margin-bottom:16px;}
/* "Headquartered in central Austin ...", the Local Knowledge, Global Reach lead.
   Body face at normal weight, not the heading face: it is a full paragraph of
   prose and it was previously set in a display serif at heading line-height,
   which is what made it hard to read. 18px clears the 17px desktop floor, 1.65
   clears the 1.6 line-height floor, and Ink on white measures 17.40:1. */
.intro-lead{font-family:var(--font-body);font-weight:400;font-size:18px;line-height:1.65;color:var(--text-body);margin:0 0 24px;}
.intro-body{font-family:var(--font-body);font-size:16px;line-height:var(--leading-body);color:var(--text-body);margin:0 0 28px;}
.intro-link{color:var(--infinity-blue);font-family:var(--font-body);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;}
.intro-photo{width:100%;height:420px;border-radius:8px;overflow:hidden;}

/* pillars */
.pillars-wrap{padding:0 56px 88px;}
.pillars{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--border-default);border:1px solid var(--border-default);}
.pillar{display:block;position:relative;background:var(--white);padding:28px 20px;transition:transform var(--duration-base) var(--ease-out-expo),box-shadow var(--duration-base) var(--ease-out-expo);}
.pillar:hover{transform:translateY(-4px);box-shadow:var(--shadow-raised);z-index:1;}
.pillar:hover .pillar-title{color:var(--accent-primary-hover);}
.pillar-title{font-family:var(--font-body);font-size:11px;letter-spacing:var(--tracking-label);color:var(--infinity-blue);text-transform:uppercase;margin-bottom:8px;}
.pillar-body{font-family:var(--font-body);font-size:14px;color:var(--text-body);}

/* testimonials */
/* Compass Black, so the Ink card above reads as lifted off it. Changed from
   Ink on 2026-08-26 with the card treatment; see the note there. */
/* THE INTRO SECTION WITH NO EYEBROW ABOVE ITS LEDE.
   The eyebrow carried its own bottom margin, and the section's top padding was
   set expecting a line of small caps to sit in it. With the line gone that
   padding reads as a hole, so the copy is pulled back up to where the eyebrow
   used to start. This is a homepage-only class: .intro is shared, .intro-noeyebrow
   is not. */
.intro-noeyebrow{padding-top:clamp(28px,3vw,44px);}
.intro-noeyebrow .intro-lead{margin-top:0;}

.testimonials{background:var(--black);padding:88px 56px;}
.testimonials-heading{font-family:var(--font-body);font-size:12px;letter-spacing:var(--tracking-label);color:var(--white);opacity:0.7;text-transform:uppercase;margin-bottom:36px;text-align:center;}
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.testimonial{border-left:2px solid var(--chimichurri-green);padding-left:20px;}
/* Star row above each quote, added in Phase 1. Sits tight to the quote so the
   two read as one unit, and slightly brighter than the attribution below it
   because it is the first thing scanned. */
.testimonial .star-rating{margin-bottom:12px;}
.testimonial-quote{font-family:var(--font-heading);font-size:17px;font-style:italic;color:var(--white);line-height:1.5;margin:0 0 16px;}
.testimonial-name{font-family:var(--font-body);font-size:11px;letter-spacing:0.08em;color:var(--white);opacity:0.6;text-transform:uppercase;}

/* generic slider */
.slider{position:relative;}
.slider-slide{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--duration-deliberate) var(--ease-out);
}
.slider-slide.is-active{position:relative;opacity:1;pointer-events:auto;}
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;line-height:1;z-index:5;background:var(--white);border:1px solid var(--border-default);color:var(--black);padding:0;transition:background-color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out);}
.slider-arrow:hover{background:var(--fog);transform:translateY(-50%) scale(1.08);}
.slider-arrow:active{transform:translateY(-50%) scale(0.96);}
.slider-arrow-prev{left:-4px;}
.slider-arrow-next{right:-4px;}
.slider-dots{display:flex;gap:8px;justify-content:center;margin-top:24px;}
.slider-dot{width:8px;height:8px;border-radius:50%;border:none;padding:0;cursor:pointer;background:var(--border-subtle);transition:background-color var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out-expo);}
.slider-dot.is-active{background:var(--infinity-blue);transform:scale(1.25);}

/* testimonial slider (dark theme) */
/* min-height reserves room for the tallest slide, so the band does not jump
   height as the carousel advances. Raised from 170px in Phase 1: every card
   gained a star row above the quote, and at 170px a long quote overflowed the
   reserved space and bled through the crossfade. */
.testimonial-track{position:relative;max-width:720px;margin:0 auto;min-height:210px;}
.testimonials .slider-arrow{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.25);color:var(--white);}
.testimonials .slider-arrow:hover{background:rgba(255,255,255,0.18);}
.testimonials .slider-arrow-prev{left:-48px;}
.testimonials .slider-arrow-next{right:-48px;}
.testimonials .slider-dot{background:rgba(255,255,255,0.25);}
.testimonials .slider-dot.is-active{background:var(--white);}

/* neighborhoods / resources */
.feature-tiles{display:grid;grid-template-columns:1fr 1fr;}
.feature-tile{display:block;position:relative;height:320px;overflow:hidden;}
.feature-tile img{transition:transform var(--duration-deliberate) var(--ease-out-expo);}
.feature-tile:hover img{transform:scale(1.05);}
.feature-tile-overlay{position:absolute;inset:0;pointer-events:none;}
.feature-tile-overlay.dark{background:rgba(0,0,0,0.45);}
.feature-tile-overlay.blue{background:rgba(27,44,74,0.55);}
.feature-tile-content{position:absolute;left:40px;bottom:36px;right:40px;color:var(--white);}
.feature-tile-title{font-family:var(--font-heading);font-size:26px;margin-bottom:8px;}
.feature-tile-body{font-family:var(--font-body);font-size:14px;opacity:0.9;}

/* neighborhoods: single-row horizontal scroller */
.neighborhoods-heading{padding:56px 56px 0;text-align:center;}
.scroller-wrap{position:relative;padding:24px 56px 56px;}
.scroller{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding:4px 0 4px;
}
.scroller::-webkit-scrollbar{display:none;}
/* The track is focusable so it can be scrolled with the arrow keys. Give it a
   visible ring when it is focused by keyboard, offset inward so the outline is
   not clipped by the overflow container. Cards keep their own default ring. */
.scroller:focus-visible{outline:2px solid var(--accent-primary);outline-offset:-2px;border-radius:4px;}
/* A card focused by keyboard is scrolled into view by the browser. Without a
   scroll margin it lands flush against the edge and reads as cut off. */
.scroller-card{scroll-margin-inline:16px;}
.scroller-card{
  position:relative;
  display:block;
  flex:0 0 auto;
  width:320px;
  height:240px;
  border-radius:var(--radius-md);
  overflow:hidden;
  scroll-snap-align:start;
  text-decoration:none;
  box-shadow:var(--shadow-card);
  transition:box-shadow var(--duration-base) var(--ease-out-expo);
}
.scroller-card:hover{box-shadow:var(--shadow-raised);}
.scroller-card img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform var(--duration-deliberate) var(--ease-out-expo);}
.scroller-card:hover img{transform:scale(1.06);}
.scroller-card-overlay{position:absolute;inset:0;pointer-events:none;}
.scroller-card-overlay.dark{background:rgba(0,0,0,0.42);}
.scroller-card-overlay.blue{background:rgba(27,44,74,0.5);}
.scroller-card-content{position:absolute;left:20px;bottom:18px;right:20px;color:var(--white);}
.scroller-card-title{font-family:var(--font-heading);font-size:20px;margin-bottom:4px;}
.scroller-card-body{font-family:var(--font-body);font-size:13px;line-height:1.4;opacity:0.9;}
.scroller-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  background:var(--white);border:1px solid var(--border-default);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:16px;color:var(--black);z-index:5;padding:0;
  transition:background-color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out);
}
.scroller-arrow:hover{background:var(--fog);transform:translateY(-50%) scale(1.08);}
.scroller-arrow:active{transform:translateY(-50%) scale(0.96);}
.scroller-arrow-prev{left:16px;}
.scroller-arrow-next{right:16px;}

/* statewide / markets served, kept deliberately quiet */
.markets-strip{padding:24px 56px;text-align:center;background:var(--fog);border-top:1px solid var(--border-default);}
.markets-strip p{font-family:var(--font-body);font-size:13px;color:var(--text-muted);margin:0;}
.markets-strip a{color:var(--infinity-blue);}

/* place directory grid (neighborhoods.html, austin-areas.html, communities.html, market lists) */
.place-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.place-card{display:block;text-decoration:none;}
.place-card-photo{position:relative;aspect-ratio:4/3;border-radius:var(--radius-md);overflow:hidden;background:var(--fog);margin-bottom:10px;}
.place-card-photo img{width:100%;height:100%;object-fit:cover;transition:transform var(--duration-deliberate) var(--ease-out-expo);}
.place-card:hover .place-card-photo img{transform:scale(1.06);}
.place-card-name{font-family:var(--font-heading);font-weight:600;font-size:15px;color:var(--black);transition:color var(--duration-fast) var(--ease-out);}
.place-card-tag{font-family:var(--font-body);font-size:10px;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);margin-top:2px;}
.place-card:hover .place-card-name{color:var(--infinity-blue);}
.place-group-title{font-family:var(--font-heading);font-weight:600;font-size:20px;color:var(--black);margin:48px 0 20px;}
.place-group-title:first-child{margin-top:0;}

/* schools / quick facts list on place pages */
.facts-list{list-style:none;padding:0;margin:0;font-family:var(--font-body);font-size:14px;line-height:1.9;color:var(--text-body);}
.facts-list li{padding-left:18px;position:relative;}
.facts-list li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:var(--accent-primary);}

/* footer */
.site-footer{background:var(--black);color:var(--white);padding:64px 56px 32px;}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:36px;margin-bottom:48px;}
.footer-logo{height:40px;width:auto;}
.footer-heading{font-family:var(--font-heading);font-size:20px;margin-bottom:16px;}
.footer-label{font-family:var(--font-body);font-size:11px;letter-spacing:var(--tracking-label);text-transform:uppercase;margin-bottom:14px;opacity:0.6;}
.footer-text{font-family:var(--font-body);font-size:13px;line-height:1.8;opacity:0.85;}

/* THE FOOTER SOCIAL LOGOS.
   White at rest on the footer's Compass Black, which is 21:1. Hover and focus
   go to Chimichurri Green, the palette's spot accent, which is 4.15:1 against
   the same black. That clears the 3:1 required of a graphical object under
   WCAG 1.4.11 and it is a hover state on a control whose resting colour is
   already 21:1, so nothing is only readable on hover.

   THE 44px IS ON THE LINK, NOT THE ICON. The mark itself is 22px because a
   44px logo in a footer looks like a mistake; the touch area around it is the
   full 44x44, set with min-width and min-height rather than padding, so it
   holds whatever the icon does. The 8px gap keeps two adjacent targets from
   sharing an edge on a phone. */
.footer-social{
  list-style:none;
  margin:12px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.footer-social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  color:var(--white);
  border-radius:var(--radius-sm);
  transition:color var(--duration-base) var(--ease-out);
}
.footer-social-link:hover,
.footer-social-link:focus-visible{color:var(--chimichurri-green);}
/* The footer sits on black, so the site's Infinity Blue focus ring would be
   close to invisible here. White, offset, for the same reason the map block's
   CTA uses white. */
.footer-social-link:focus-visible{
  outline:3px solid var(--white);
  outline-offset:2px;
}
.footer-social-icon{display:block;}
@media (prefers-reduced-motion:reduce){
  .footer-social-link{transition:none;}
}
.footer-legal{border-top:1px solid rgba(255,255,255,0.15);padding-top:20px;font-family:var(--font-body);font-size:11px;line-height:1.7;opacity:0.55;}

/* interior page hero (shorter than home hero, used on Buy/Sell/Team/Relocate/Waterfront/Ranch/Contact) */
.page-hero{position:relative;width:100%;height:360px;overflow:hidden;}
.page-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.6) 100%);pointer-events:none;}
.page-hero-content{position:absolute;left:56px;bottom:40px;right:56px;color:var(--white);}
.page-hero-kicker{font-family:var(--font-body);font-size:12px;letter-spacing:var(--tracking-label);text-transform:uppercase;margin-bottom:12px;opacity:0.9;}
.page-hero-title{font-family:var(--font-heading);font-size:44px;line-height:var(--leading-tight);margin:0;}
.page-hero-subtitle{font-family:var(--font-heading);font-size:19px;font-style:italic;margin:10px 0 0;max-width:640px;}

/* generic section wrapper */
.section{padding:72px 56px;}
.section-narrow{max-width:800px;margin:0 auto;}
.section-title{font-family:var(--font-heading);font-size:32px;color:var(--text-heading);margin:0 0 20px;}
/* THE FEATURED PROPERTIES HEADING, one step up the existing scale.
   32px is the standard .section-title. 36px is the next step up and it is not a
   new one: it is --text-h1 in assets/tokens.css and it is already used on the
   page. Scoped to this section because .section-title is sitewide and the brief
   is the homepage only, and .listings-slider-section renders on no other page.
   No new scale step is introduced and no other heading moves. */
.listings-slider-title{font-size:36px;}
.section-eyebrow{color:var(--infinity-blue);margin-bottom:14px;}
.section-body{font-family:var(--font-body);font-size:16px;line-height:var(--leading-body);color:var(--text-body);}
.section-body p{margin:0 0 18px;}
.section-body p:last-child{margin-bottom:0;}

/* numbered step list (buyer/seller journey) */
.steps{display:flex;flex-direction:column;gap:0;max-width:880px;margin:0 auto;}
.step{display:grid;grid-template-columns:64px 1fr;gap:24px;padding:28px 0;border-bottom:1px solid var(--border-default);}
.step:last-child{border-bottom:none;}
.step-num{font-family:var(--font-heading);font-size:28px;color:var(--border-subtle);}
.step-title{font-family:var(--font-heading);font-weight:600;font-size:18px;color:var(--black);margin:0 0 8px;}
.step-body{font-family:var(--font-body);font-size:15px;line-height:1.65;color:var(--text-body);margin:0;}

/* team roster grid (meet the team) */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;}
.team-card{text-align:center;}
.team-card-photo{aspect-ratio:1/1;border-radius:var(--radius-md);overflow:hidden;background:var(--fog);margin-bottom:14px;}
.team-card-photo img{width:100%;height:100%;object-fit:cover;transition:transform var(--duration-deliberate) var(--ease-out-expo);}
.team-card a:hover .team-card-photo img{transform:scale(1.06);}
.team-card-photo-placeholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:var(--fog);
  font-family:var(--font-heading);
  font-size:28px;
  color:var(--text-muted);
}
.agent-bio-photo-placeholder{
  aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  background:var(--fog);
  border-radius:var(--radius-md);
  font-family:var(--font-heading);
  font-size:56px;
  color:var(--text-muted);
}
.bio-coming-soon{
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--text-muted);
  border:1px dashed var(--border-subtle);
  border-radius:var(--radius-sm);
  padding:12px 16px;
  display:inline-block;
}
.team-card-name{font-family:var(--font-heading);font-weight:600;font-size:16px;color:var(--black);transition:color var(--duration-fast) var(--ease-out);}
.team-card-title{font-family:var(--font-body);font-size:11px;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--accent-primary);margin-top:4px;}
.team-card a{display:block;}
.team-card a:hover .team-card-name{color:var(--infinity-blue);}

/* individual agent bio page */
.agent-bio{display:grid;grid-template-columns:320px 1fr;gap:56px;padding:72px 56px;align-items:start;}
.agent-bio-photo{border-radius:var(--radius-md);overflow:hidden;background:var(--fog);}
.agent-bio-photo img{width:100%;display:block;}
.agent-bio-name{font-family:var(--font-heading);font-size:34px;margin:0 0 4px;}
.agent-bio-title{font-family:var(--font-body);font-size:12px;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--accent-primary);margin-bottom:20px;}
.agent-bio-contact{font-family:var(--font-body);font-size:14px;line-height:1.9;color:var(--text-body);margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid var(--border-default);}
.agent-bio-contact a{color:var(--text-body);}
.agent-bio-contact a:hover{color:var(--infinity-blue);}

/* simple link list (waterfront lakes, ranch resources) */
.link-list{display:flex;flex-wrap:wrap;gap:10px 28px;list-style:none;padding:0;margin:0;}
.link-list a{font-family:var(--font-body);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-body);}
.link-list a:hover{color:var(--infinity-blue);}

/* flat-color CTA banner (replaces photo banners the brand system deliberately avoids) */
.cta-banner{background:var(--ink);color:var(--white);padding:40px 56px;text-align:center;}
.cta-banner p{font-family:var(--font-heading);font-size:19px;font-style:italic;margin:0 0 20px;}

/* simple record cards (recently sold, etc.) */
.record-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.record-card{border:1px solid var(--border-default);border-radius:var(--radius-md);padding:20px 24px;}
.record-card-title{font-family:var(--font-heading);font-weight:600;font-size:16px;color:var(--black);margin-bottom:4px;}
.record-card-meta{font-family:var(--font-body);font-size:13px;color:var(--text-muted);}

/* lead form */
.lead-form{max-width:560px;}
.lead-form .field{margin-bottom:18px;}
.lead-form textarea.field-input{min-height:120px;resize:vertical;font-family:var(--font-body);}
.form-honeypot{position:absolute;left:-9999px;}

/* 3-phased marketing strategy (sell page) */
.phase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.phase-card{border:1px solid var(--border-default);border-radius:var(--radius-md);padding:24px;background:var(--white);}
.phase-num{font-family:var(--font-body);font-size:11px;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--accent-primary);margin-bottom:8px;}
.phase-title{font-family:var(--font-heading);font-weight:600;font-size:18px;margin-bottom:10px;color:var(--black);}
.phase-body{font-family:var(--font-body);font-size:14px;line-height:1.6;color:var(--text-body);}

.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;text-align:center;}
.stat-value{font-family:var(--font-heading);font-size:40px;color:var(--infinity-blue);}
.stat-label{font-family:var(--font-body);font-size:11px;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);margin-top:6px;}
.stat-source{font-family:var(--font-body);font-size:12px;color:var(--text-muted);text-align:center;margin-top:20px;}

.placeholder-note{
  background:var(--fog);
  border:1px dashed var(--border-subtle);
  border-radius:var(--radius-md);
  padding:20px 24px;
  font-family:var(--font-body);
  font-size:13px;
  color:var(--text-muted);
  margin-top:16px;
}

/* stagger-reveal: applied by assets/motion.js to genuine repeated-item grids
   (team, place, pillars, phase, stat, record) the first time they scroll into
   view. Elements stay fully visible if JS never runs. */
.stagger-item{opacity:0;transform:translateY(14px);transition:opacity var(--duration-slow) var(--ease-out-expo),transform var(--duration-slow) var(--ease-out-expo);}
.stagger-item.is-visible{opacity:1;transform:translateY(0);}

/* ===========================================================================
   HOMEPAGE SECTIONS
   Added for the expanded homepage. Everything below reuses the existing tokens,
   type families, and spacing scale; no new fonts, colours, or primitives.
   =========================================================================== */

/* stat strip: sits directly under the hero, one row on desktop */
/* Stat strip.
   Five stats since Phase 1, one of which (the rating) is three lines tall. At
   that count a value-beside-label row runs out of width and the labels start
   breaking mid-phrase, so each cell stacks instead: value on top, label under
   it, centred. A grid rather than flex, so every column is exactly equal and
   the cells cannot end up different widths depending on label length.

   The column count steps down 5 -> 3 -> 2 -> 1 rather than letting items wrap
   wherever they land. Explicit steps are what stop a 5-item bar from becoming
   a 4-and-a-lonely-1 at a middling width. */
.statstrip{background:var(--infinity-blue);padding:26px 56px;}
.statstrip-inner{
  margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--space-5) var(--space-4);
  align-items:start;
}
.statstrip-item{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  min-width:0;text-align:center;
}
.statstrip-value{font-family:var(--font-heading);font-size:32px;line-height:1;color:var(--white);}
.statstrip-label{
  font-family:var(--font-body);font-size:12px;line-height:1.35;
  color:var(--white);opacity:0.78;max-width:190px;
}
/* The stars sit between the value and the platform list. Slightly tightened
   margins so the three lines read as one cell rather than three stacked ones. */
.statstrip-stars{display:flex;justify-content:center;margin:-1px 0 1px;}

/* Separators between cells, drawn rather than added as elements. Dropped as
   soon as the grid rewraps, because a rule between two stacked rows is noise. */
@media (min-width:1025px){
  .statstrip-item + .statstrip-item{
    border-left:1px solid rgba(255,255,255,0.16);
  }
}

/* "where are you starting" router cards */
.choice-section{padding-bottom:0;}
.choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px;}
.choice-card{
  display:flex;flex-direction:column;
  background:var(--white);
  border:1px solid var(--border-default);
  border-radius:var(--radius-md);
  padding:32px 28px;
  text-decoration:none;
  transition:border-color var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out-expo),transform var(--duration-base) var(--ease-out-expo);
}
.choice-card:hover{border-color:var(--accent-primary);box-shadow:var(--shadow-raised);transform:translateY(-4px);}
.choice-card-title{font-family:var(--font-heading);font-size:26px;color:var(--black);margin-bottom:12px;}
.choice-card-body{font-family:var(--font-body);font-size:14px;line-height:var(--leading-body);color:var(--text-body);margin:0 0 20px;flex:1;}
.choice-card-cta{
  font-family:var(--font-body);font-size:11px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--accent-primary);
}

/* "what we do": two feature tiles then four compact cards.
   UNUSED as of Phase 1. The homepage section that carried these was removed and
   nothing else on the site uses .service-grid or .service-card. Kept rather than
   deleted in case a later phase wants the pattern back; if nothing has claimed
   it by the end of the build, delete this block. */
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:8px;}
.service-card{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--fog);
  border:1px solid var(--border-default);
  border-radius:var(--radius-md);
  padding:26px 24px;overflow:hidden;text-decoration:none;
  transition:box-shadow var(--duration-base) var(--ease-out-expo),transform var(--duration-base) var(--ease-out-expo);
}
.service-card:hover{box-shadow:var(--shadow-raised);transform:translateY(-4px);}
.service-card-title{font-family:var(--font-heading);font-size:22px;color:var(--black);margin-bottom:8px;}
.service-card-body{font-family:var(--font-body);font-size:13px;line-height:1.55;color:var(--text-body);margin:0;}

/* the two growth categories get double width, a photo, and more room to talk */
.service-card-feature{grid-column:span 2;min-height:320px;padding:0;border:none;}
.service-card-feature img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform var(--duration-deliberate) var(--ease-out-expo);
}
.service-card-feature:hover img{transform:scale(1.05);}
.service-card-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,44,74,0.25) 0%,rgba(27,44,74,0.86) 100%);pointer-events:none;}
.service-card-content{position:relative;padding:28px;color:var(--white);}
.service-card-eyebrow{
  font-family:var(--font-body);font-size:10px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--white);opacity:0.85;margin-bottom:8px;
}
.service-card-feature .service-card-title{color:var(--white);font-size:28px;}
.service-card-feature .service-card-body{color:var(--white);opacity:0.92;font-size:14px;}

/* focus-area spotlights */
.spotlight{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:88px 56px;align-items:center;}
.spotlight-central{background:var(--fog);}
.spotlight-water{background:var(--white);}
.spotlight-reverse .spotlight-media{order:2;}
.spotlight-media{border-radius:var(--radius-md);overflow:hidden;aspect-ratio:5/4;background:var(--fog);}
.spotlight-media img{width:100%;height:100%;object-fit:cover;}
.spotlight-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
.spotlight-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px;}

/* "how we work": the agent autonomy model */
.howwework{background:var(--ink);}
.howwework .section-title,.howwework .section-body{color:var(--white);}
.howwework .section-eyebrow{color:var(--white);opacity:0.7;}
.howwework-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:44px auto 0;}
.howwework-item{border-top:2px solid var(--chimichurri-green);padding-top:20px;}
.howwework-num{font-family:var(--font-body);font-size:11px;letter-spacing:var(--tracking-label);color:var(--accent-spot-on-dark);margin-bottom:10px;}
.howwework-title{font-family:var(--font-heading);font-weight:600;font-size:17px;color:var(--white);margin:0 0 10px;}
.howwework-body{font-family:var(--font-body);font-size:14px;line-height:var(--leading-body);color:var(--white);opacity:0.82;margin:0;}
.experience-band{
  max-width:820px;margin:52px auto 0;padding-top:32px;
  border-top:1px solid rgba(255,255,255,0.18);
  text-align:center;
}
.experience-band p{font-family:var(--font-heading);font-size:19px;line-height:1.5;color:var(--white);margin:0 0 20px;}
.experience-band strong{color:var(--white);}
.experience-band .btn-outline{border-color:rgba(255,255,255,0.6);color:var(--white);}
.experience-band .btn-outline:hover{background:var(--white);color:var(--ink);}

/* homepage team strip */
.teamstrip-section{background:var(--fog);}
.teamstrip{
  display:grid;grid-template-columns:repeat(7,1fr);gap:20px;
  margin:40px auto 0;
}
.teamstrip-card{display:block;text-align:center;text-decoration:none;}
.teamstrip-photo{aspect-ratio:1/1;border-radius:50%;overflow:hidden;background:var(--white);margin-bottom:10px;}
.teamstrip-photo img{width:100%;height:100%;object-fit:cover;transition:transform var(--duration-deliberate) var(--ease-out-expo);}
.teamstrip-card:hover .teamstrip-photo img{transform:scale(1.07);}
.teamstrip-name{font-family:var(--font-body);font-size:12px;line-height:1.35;color:var(--text-body);transition:color var(--duration-fast) var(--ease-out);}
.teamstrip-card:hover .teamstrip-name{color:var(--accent-primary);}

/* free tools */
.tools-section{background:var(--white);}
.tools-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px;}
.tool-card{
  display:block;background:var(--fog);border-radius:var(--radius-md);
  padding:26px 24px;text-decoration:none;
  border-left:3px solid var(--accent-primary);
  transition:transform var(--duration-base) var(--ease-out-expo),box-shadow var(--duration-base) var(--ease-out-expo);
}
.tool-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);}
.tool-card-title{font-family:var(--font-heading);font-weight:600;font-size:17px;color:var(--black);margin-bottom:8px;}
.tool-card-body{font-family:var(--font-body);font-size:13px;line-height:1.55;color:var(--text-body);margin:0;}

/* markets served, as readable prose rather than a wall of links */
/* Vertical rhythm tightened 2026-08-26, about a quarter off the block height.
   Padding and internal gaps only: no font size changed, no content removed,
   nothing inside it scaled. */
.coverage-section{background:var(--fog);padding-block:36px;}
.coverage-block{margin-top:12px;}
.coverage-label{
  font-family:var(--font-body);font-size:11px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--accent-primary);margin-bottom:8px;
}
.coverage-text{font-family:var(--font-body);font-size:16px;line-height:1.75;color:var(--text-body);margin:0;}

/* ===========================================================================
   SHARED CONTACT FORM
   =========================================================================== */
.form-section{background:var(--fog);}
.form-shell{
  display:grid;grid-template-columns:0.85fr 1.15fr;gap:56px;
  margin:0 auto;align-items:start;
}
.form-intro .section-title{margin-bottom:16px;}
.form-direct{margin-top:20px;font-size:15px;line-height:1.8;}
.form-body{position:relative;}
.form-body .lead-form{max-width:none;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.form-row .field{margin-bottom:18px;}
.field-required{
  font-weight:400;letter-spacing:0.04em;color:var(--accent-primary);
  text-transform:none;font-size:10px;margin-left:4px;
}
.lead-form textarea.field-input{min-height:120px;resize:vertical;}
.form-consent{
  font-family:var(--font-body);font-size:12px;line-height:1.6;
  color:var(--text-muted);margin:16px 0 0;max-width:520px;
}
.form-success,.form-error{
  background:var(--white);border:1px solid var(--border-default);
  border-left:3px solid var(--chimichurri-green);
  border-radius:var(--radius-md);padding:28px 32px;
}
.form-error{border-left-color:#8A2E2E;}
.form-success-title{font-family:var(--font-heading);font-size:24px;color:var(--black);margin:0 0 10px;}
.form-success[hidden],.form-error[hidden]{display:none;}

/* compact CTA band: the floor every page meets */
.cta-band{background:var(--infinity-blue);padding:64px 56px;}
.cta-band-title{font-family:var(--font-heading);font-size:30px;color:var(--white);margin:0 0 14px;}
.cta-band-body{font-family:var(--font-body);font-size:16px;line-height:var(--leading-body);color:var(--white);opacity:0.88;margin:0 0 26px;}
.cta-band-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.cta-band-outline{border-color:rgba(255,255,255,0.65);color:var(--white);}
.cta-band-outline:hover{background:var(--white);color:var(--infinity-blue);}

/* ===========================================================================
   AGENT PROFILE ADDITIONS
   =========================================================================== */
.agent-vcard-btn{display:block;text-align:center;margin-top:18px;}
.agent-qr{
  margin-top:22px;padding:18px;text-align:center;
  background:var(--fog);border-radius:var(--radius-md);
}
.agent-qr svg{margin:0 auto;max-width:150px;height:auto;}
.agent-qr-caption{
  font-family:var(--font-body);font-size:11px;line-height:1.5;
  color:var(--text-muted);margin-top:10px;
}
.agent-meta{margin-top:20px;padding-top:16px;border-top:1px solid var(--border-default);}
.agent-meta-label{
  font-family:var(--font-body);font-size:10px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;
}
.agent-meta-value{font-family:var(--font-body);font-size:14px;line-height:1.6;color:var(--text-body);}
.agent-meta-gap{color:var(--text-muted);font-size:13px;}
.agent-links{margin-top:26px;}

/* testimonial grids of one and two, so a single quote does not sit in a
   third-width column with two empty ones beside it */
.testimonial-grid-1{grid-template-columns:minmax(0,720px);justify-content:center;}
.testimonial-grid-2{grid-template-columns:repeat(2,1fr);}

/* ===========================================================================
   TILE GRID: /resources
   =========================================================================== */
.tile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.tile{
  display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--border-default);
  border-radius:var(--radius-md);padding:28px 26px;text-decoration:none;
  transition:border-color var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out-expo),transform var(--duration-base) var(--ease-out-expo);
}
.tile:hover{border-color:var(--accent-primary);box-shadow:var(--shadow-raised);transform:translateY(-3px);}
.tile-title{font-family:var(--font-heading);font-weight:600;font-size:17px;color:var(--black);margin-bottom:10px;}
.tile-body{font-family:var(--font-body);font-size:13px;line-height:1.6;color:var(--text-body);margin:0 0 16px;flex:1;}
.tile-cta{font-family:var(--font-body);font-size:10px;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--accent-primary);}
.tile-highlight{background:var(--fog);border-color:var(--accent-primary);}

/* ===========================================================================
   MORTGAGE CALCULATOR
   =========================================================================== */
.calc{display:grid;grid-template-columns:0.9fr 1.1fr;gap:48px;margin:0 auto;align-items:start;}
.calc-inputs .field{margin-bottom:16px;}
.calc-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.calc-hint{font-family:var(--font-body);font-size:11px;color:var(--text-muted);margin-top:4px;line-height:1.5;}
.calc-results{background:var(--fog);border-radius:var(--radius-md);padding:32px;position:sticky;top:24px;}
.calc-total-label{font-family:var(--font-body);font-size:11px;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);}
.calc-total{font-family:var(--font-heading);font-size:44px;line-height:1.1;color:var(--infinity-blue);margin:6px 0 4px;}
.calc-total-note{font-family:var(--font-body);font-size:12px;color:var(--text-muted);margin-bottom:24px;}
.calc-breakdown{list-style:none;padding:0;margin:0;border-top:1px solid var(--border-default);}
.calc-breakdown li{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--border-default);
  font-family:var(--font-body);font-size:14px;color:var(--text-body);
}
.calc-breakdown .calc-amount{font-weight:600;color:var(--black);font-variant-numeric:tabular-nums;}
.calc-breakdown li[hidden]{display:none;}
.calc-summary{margin-top:24px;padding-top:20px;border-top:1px solid var(--border-default);}
.calc-summary-row{
  display:flex;justify-content:space-between;gap:16px;
  font-family:var(--font-body);font-size:13px;color:var(--text-muted);padding:5px 0;
}
.calc-summary-row span:last-child{color:var(--black);font-weight:600;font-variant-numeric:tabular-nums;}
.calc-disclaimer{
  background:var(--white);border:1px dashed var(--border-subtle);border-radius:var(--radius-md);
  padding:18px 20px;margin-top:24px;
  font-family:var(--font-body);font-size:12px;line-height:1.65;color:var(--text-muted);
}

/* ===========================================================================
   SCHOOL DISTRICTS
   =========================================================================== */
.district-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:0 auto;}
.district-card{background:var(--white);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:24px 26px;}
.district-name{font-family:var(--font-heading);font-weight:600;font-size:17px;color:var(--black);margin:0 0 4px;}
.district-areas{font-family:var(--font-body);font-size:10px;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--accent-primary);margin-bottom:12px;}
.district-body{font-family:var(--font-body);font-size:14px;line-height:1.6;color:var(--text-body);margin:0;}
.notice-box{
  background:var(--fog);border-left:3px solid var(--accent-primary);
  border-radius:var(--radius-sm);padding:20px 24px;margin:28px auto 0;max-width:800px;
  font-family:var(--font-body);font-size:14px;line-height:1.65;color:var(--text-body);
}
.notice-box strong{color:var(--black);}
.notice-box p{margin:0 0 10px;}
.notice-box p:last-child{margin-bottom:0;}

/* ===========================================================================
   FOOTER LEGAL
   =========================================================================== */
.footer-legal p{margin:0 0 12px;}
.footer-legal p:last-child{margin-bottom:0;}
.footer-legal a{color:var(--white);opacity:0.9;text-decoration:underline;}
.footer-legal a:hover{color:var(--white);opacity:1;}
.footer-legal-links{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;}
.footer-legal-licenses{opacity:0.85;}
.footer-eho{font-size:14px;margin-right:2px;}

/* contact page two-column block. A class rather than an inline grid, so the
   responsive rules below can actually collapse it. */
.contact-cols{display:grid;grid-template-columns:1fr 1fr;gap:48px;}

/* directory placeholder tiles for places without photography yet */
.place-card-photo .img-placeholder{position:absolute;inset:0;font-size:12px;}

/* responsive */
@media (max-width:1280px){
  /* Seven nav items since Phase 3, but two of them are the long labels
     "Featured Properties" and "Meet the Team", so the row is no shorter than
     the nine short ones it replaced. Tighten the gap well before it wraps. */
  .nav-links{gap:18px;}
  .teamstrip{grid-template-columns:repeat(5,1fr);}
}

@media (max-width:1024px){
  /* The row still sits on one line between 768px and 1024px, where the
     hamburger has not taken over yet. Tighten again so it cannot overflow into
     the logo at the narrow end of that range. */
  .nav-links{gap:13px;}
  .nav-link{font-size:11px;letter-spacing:0.06em;}
  .site-nav{padding:20px 24px;}

  .statstrip{padding:24px 40px;}
  /* Two by two. Four across at this width would squeeze the labels narrower
     than the words in them, and 2x2 divides evenly where 3 across would leave
     the fourth cell orphaned on its own row. */
  .statstrip-inner{grid-template-columns:repeat(2,1fr);gap:var(--space-5) var(--space-4);}
  .choice-grid{grid-template-columns:1fr;}
  .service-grid{grid-template-columns:repeat(2,1fr);}
  .service-card-feature{grid-column:span 2;}
  .spotlight{grid-template-columns:1fr;gap:36px;padding:64px 40px;}
  .spotlight-reverse .spotlight-media{order:0;}
  .howwework-grid{grid-template-columns:1fr;gap:24px;}
  .teamstrip{grid-template-columns:repeat(4,1fr);}
  .tools-strip{grid-template-columns:1fr;}
  .form-shell{grid-template-columns:1fr;gap:36px;}
  .calc{grid-template-columns:1fr;gap:32px;}
  .calc-results{position:static;}
  .tile-grid{grid-template-columns:repeat(2,1fr);}
  .district-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px;}
}

@media (max-width:1024px){
  .intro{grid-template-columns:1fr;gap:40px;padding:64px 40px;}
  .pillars{grid-template-columns:repeat(2,1fr);}
  .testimonial-grid{grid-template-columns:1fr;gap:28px;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px;}
  .hero{height:560px;}
  .hero-title{font-size:48px;}
  .team-grid{grid-template-columns:repeat(3,1fr);}
  .agent-bio{grid-template-columns:240px 1fr;gap:40px;padding:56px 40px;}
  .record-grid{grid-template-columns:1fr;}
  .place-grid{grid-template-columns:repeat(3,1fr);}
}

@media (max-width:768px){
  .site-nav{padding:16px 20px;}
  .nav-links{
    display:flex;
    position:absolute;
    top:100%;left:0;right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    background:var(--white);
    border-bottom:1px solid var(--border-default);
    padding:8px 20px 20px;
    opacity:0;
    transform:translateY(-6px);
    visibility:hidden;
    pointer-events:none;
    transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out-expo),visibility var(--duration-base);
  }
  .nav-links.open{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto;}
  .nav-links .nav-link{padding:12px 0;width:100%;}
  .nav-links .btn{margin-top:12px;}
  .nav-toggle{display:block;}

  /* In the drawer a dropdown is an expandable section, not a floating panel.
     Same markup, same open and close logic, different box: the panel goes back
     into the flow and pushes the items below it down, which is the behaviour a
     thumb expects. No hover anywhere in here; assets/nav.js does not bind
     pointer opening below 769px. */
  .nav-group{display:block;width:100%;}
  .nav-group-trigger{width:100%;justify-content:space-between;text-align:left;}
  .nav-menu{
    position:static;
    min-width:0;
    padding:0 0 8px 14px;
    margin:0;
    border:none;
    box-shadow:none;
    background:none;
  }
  .nav-menu::before{display:none;}
  .nav-group:last-of-type > .nav-menu{right:auto;}
  .nav-menu-link{padding:10px 0;white-space:normal;}
  .nav-menu-link:hover{background:none;}
  .nav-menu-divider{margin:6px 0;}

  /* Scripting off: the hamburger cannot open anything, so the drawer is not a
     drawer. It renders as a plain column under the header with every group
     expanded, which is the only way the nav is usable at this width without
     JavaScript. */
  html:not(.nav-js) .site-nav{flex-wrap:wrap;}
  html:not(.nav-js) .nav-links{
    position:static;
    width:100%;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
  }
  html:not(.nav-js) .nav-menu{display:flex;}
  html:not(.nav-js) .nav-toggle{display:none;}

  .hero{height:520px;}
  .hero-content{left:20px;right:20px;bottom:32px;}
  .hero-title{font-size:36px;}
  .hero-title-line{font-size:18px;}
  .hero-subtitle{font-size:18px;}
  .hero-award{top:16px;right:16px;padding:8px 12px;}
  .hero-award-value{font-size:16px;}

  .intro{padding:48px 20px;}
  .intro-lead{font-size:19px;}

  .pillars-wrap{padding:0 20px 48px;}
  .pillars{grid-template-columns:1fr;}

  .testimonials{padding:56px 20px;}

  .feature-tiles{grid-template-columns:1fr;}

  .statewide{padding:48px 20px;}
  .statewide p{font-size:17px;}

  .site-footer{padding:48px 20px 24px;}
  .footer-grid{grid-template-columns:1fr;gap:28px;}

  .page-hero{height:280px;}
  .page-hero-content{left:20px;right:20px;bottom:24px;}
  .page-hero-title{font-size:30px;}

  .section{padding:48px 20px;}
  .team-grid{grid-template-columns:repeat(2,1fr);gap:20px;}
  .agent-bio{grid-template-columns:1fr;padding:40px 20px;gap:28px;}
  .agent-bio-photo{max-width:280px;}
  .cta-banner{padding:32px 20px;}

  .phase-grid{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:1fr;gap:20px;}
  .stat-value{font-size:32px;}

  .testimonials .slider-arrow{display:none;}
  .neighborhoods-heading{padding:40px 20px 0;}
  .scroller-wrap{padding:20px 20px 40px;}
  .scroller-card{width:240px;height:190px;}
  .scroller-arrow{display:none;}
  .markets-strip{padding:20px;}

  .place-grid{grid-template-columns:repeat(2,1fr);gap:16px;}
  .place-group-title{margin:32px 0 16px;}

  /* homepage and shared components at phone width */
  .statstrip{padding:22px 20px;}
  .statstrip-inner{grid-template-columns:repeat(2,1fr);gap:20px 16px;}
  /* Four items fill two columns exactly, so the rating no longer needs to span
     the row to avoid being orphaned. Spanning it now would break the 2x2. */
  .statstrip-value{font-size:26px;}
  .statstrip-label{font-size:11px;max-width:none;}

  .choice-card{padding:26px 22px;}
  .choice-card-title{font-size:22px;}

  .service-grid{grid-template-columns:1fr;}
  .service-card-feature{grid-column:span 1;min-height:260px;}
  .service-card-feature .service-card-title{font-size:24px;}
  .service-card-content{padding:22px;}

  .spotlight{padding:48px 20px;gap:28px;}
  .howwework-grid{margin-top:32px;}
  .experience-band p{font-size:17px;}

  .teamstrip{grid-template-columns:repeat(3,1fr);gap:14px;}
  .teamstrip-name{font-size:11px;}

  .tools-strip{gap:14px;}
  .coverage-text{font-size:15px;}

  .contact-cols{grid-template-columns:1fr;gap:32px;}
  .form-row{grid-template-columns:1fr;gap:0;}
  .form-success,.form-error{padding:22px 20px;}
  .form-success-title{font-size:20px;}

  .cta-band{padding:48px 20px;}
  .cta-band-title{font-size:24px;}

  .agent-qr svg{max-width:132px;}

  .testimonial-grid-2{grid-template-columns:1fr;}
  .tile-grid{grid-template-columns:1fr;}

  .calc-row{grid-template-columns:1fr;gap:0;}
  .calc-results{padding:24px 20px;}
  .calc-total{font-size:34px;}

  .footer-legal-links{gap:6px 10px;}
}

/* 320px is the narrowest viewport we support. Nothing may overflow it. */
@media (max-width:380px){
  /* One per row at 380px. Two columns of a 32px display figure plus a
     two-line label does not fit, and half-legible is worse than tall. */
  .statstrip-inner{grid-template-columns:1fr;gap:18px;}
  .teamstrip{grid-template-columns:repeat(2,1fr);}
  .hero-title{font-size:30px;}
  .section-title{font-size:24px;}
  .calc-total{font-size:30px;}
}

/* ===========================================================================
   HOMEPAGE REBUILD
   Every colour below is a token. No hardcoded hex, per CLAUDE.md, and no
   font-family declaration: type comes from --font-heading and --font-body,
   which build/audit.js enforces.
   =========================================================================== */

/* listings slider. Reuses .scroller from the neighborhood strip so the two
   behave identically, including the keyboard-scrollable track. */
.listings-scroller{align-items:stretch;}
.listings-scroller .listing-card{
  flex:0 0 340px;
  scroll-snap-align:start;
  background:var(--white);
  border:1px solid var(--border-default);
}
.listings-scroller .card-image{aspect-ratio:4/3;overflow:hidden;position:relative;}
.listings-scroller .card-image img{width:100%;height:100%;object-fit:cover;display:block;}
@media (max-width:768px){
  .listings-scroller .listing-card{flex:0 0 82vw;}
}

/* the network map
 *
 * Replaced the relocation coverage map on 2026-08-24. The design arrived with
 * its own palette of six blues and greys; none of them is a brand colour and
 * build/audit.js rejects any hex that is not, so every value here is mixed from
 * the palette instead. The map reads the same and the rule holds.
 *
 * Type is Inter and Playfair only. The export set its labels in GT Pressura
 * Mono, which is a paid face that Phase 2 removed; all-caps letter-spaced Inter
 * is what Brand Guidelines v2.1 section 04 asks for in its place.
 */
.netmap-section{
  background:var(--black);
  color:var(--white);
  padding-left:0;
  padding-right:0;
}
.netmap-wrap{
  margin:0 auto;
  padding:0 clamp(20px,5vw,72px);
}
.netmap-eyebrow{
  font-family:var(--font-body);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:color-mix(in oklch,var(--white) 62%,var(--black));
  margin:0 0 18px;
}
.netmap-title{
  font-family:var(--font-heading);
  font-weight:400;
  font-size:clamp(1.9rem,4.2vw,3.25rem);
  line-height:1.08;
  letter-spacing:-.01em;
  margin:0;
  max-width:22ch;
  color:var(--white);
}
.netmap-title em{font-style:italic;}
.netmap-lede{
  font-family:var(--font-body);
  font-size:clamp(1rem,1.15vw,1.1875rem);
  line-height:1.55;
  color:color-mix(in oklch,var(--white) 78%,var(--black));
  max-width:62ch;
  margin:20px 0 0;
  text-wrap:pretty;
}

.netmap-figure{margin:clamp(24px,3.5vw,44px) 0 0;}

/* The viewBox carries the aspect ratio, so the box is the right height before
   the SVG paints and the section never jumps. */
.netmap{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1600/830;
  overflow:hidden;
}

.netmap-graticule{
  fill:none;
  stroke:rgba(255,255,255,.045);
  stroke-width:.7;
}
.netmap-land{
  fill:#0E131D;
  stroke:#1A2231;
  stroke-width:.7;
}
/* The territory the team covers. These five map colours are the export's own
   and are listed as an exception in build/audit.js: a map needs land, water,
   borders and a graticule to read as a map, and the brand palette has one
   blue. Scoped to .netmap and not to be reached for anywhere else. */
.netmap-land-na,
.netmap-land-mx{
  fill:#26406B;
  stroke:#4A6A9C;
}

.netmap-dot{
  fill:var(--white);
  opacity:.34;
  transition:opacity .26s ease,r .26s ease;
}
.netmap-dot-intl{opacity:.26;}
.netmap-dot.is-lit{opacity:1;}

.netmap-arc{
  fill:none;
  stroke:rgba(255,255,255,.42);
  stroke-width:.95;
}
.netmap-arc-live{transition:stroke-dashoffset .9s cubic-bezier(.4,0,.2,1);}

/* The pulse that runs out of Austin every second and a half, from the export.
   Drawn by assets/network-map.js, which cannot know the size the map is being
   shown at until it measures, so the radius is animated there and only the
   look is set here. */
.netmap-pulse{
  fill:none;
  stroke:#6FA35F;
  opacity:.5;
  transition:r 2.2s cubic-bezier(.22,.61,.36,1),opacity 2.2s cubic-bezier(.22,.61,.36,1);
}

.netmap-ring{
  fill:none;
  stroke:var(--white);
  stroke-width:1;
  opacity:.55;
}
.netmap-ring-edge{fill:var(--white);stroke:none;opacity:.9;}

/* Austin. The one green thing on the map, and the only spot use of the accent
   on this page. */
.netmap-base-halo{fill:var(--chimichurri-green);opacity:.22;}
.netmap-base-dot{
  fill:var(--chimichurri-green);
  stroke:#6FA35F;
  stroke-width:1.4;
}

/* Labels carry a black stroke behind the fill via paint-order, so a name stays
   readable wherever it lands on the map. */
.netmap-label{
  font-family:var(--font-body);
  font-weight:600;
  letter-spacing:.12em;
  fill:var(--white);
  stroke:var(--black);
  stroke-width:3.2;
  paint-order:stroke;
}
.netmap-base-label{letter-spacing:.14em;}

.netmap-static{transition:opacity .45s ease;}
/* Set by assets/network-map.js while it is animating, so its labels and the
   ones in the markup do not stack. Removed the moment it stops, and never set
   at all without JavaScript or under reduced motion. */
.netmap-static.is-replaced{opacity:0;}

.netmap-pop{transition:opacity .32s ease;}

/* The legend and the figures share one row, split to the edges, as the export
   has them. */
.netmap-meta{
  margin-top:clamp(20px,2.5vw,32px);
  border-top:1px solid rgba(255,255,255,.14);
  padding-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:14px 40px;
  align-items:center;
  justify-content:space-between;
}
/* THE RELOCATION CTA, INSIDE THE MAP BLOCK.
   Inverse colours against the block's Compass Black: a Pure White surface with
   Compass Black text, hovering to Fog Gray with the same black text. Both pairs
   are straight from the palette and both clear 4.5:1 with room to spare, which
   is measured and printed in the report rather than assumed.

   The 44px minimum is set on the control itself rather than left to line-height
   arithmetic, so it holds whatever the type does. */
.netmap-cta-row{
  margin-top:clamp(18px,2.2vw,28px);
  display:flex;
  justify-content:center;
}
.netmap-cta{
  background:var(--white);
  color:var(--black);
  border:1px solid var(--white);
  min-height:44px;
  min-width:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 28px;
  transition:background-color var(--duration-base) var(--ease-out),
             border-color var(--duration-base) var(--ease-out);
}
.netmap-cta:hover{
  background:var(--fog);
  border-color:var(--fog);
  color:var(--black);
}
/* The focus ring has to be visible against black, so it is the white surface's
   own colour rather than the site's Infinity Blue ring, which would disappear
   into the background here. */
.netmap-cta:focus-visible{
  outline:3px solid var(--white);
  outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){
  .netmap-cta{transition:none;}
}

.netmap-foot{
  margin:0;
  font-family:var(--font-body);
  font-size:.625rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.44);
  text-align:right;
}
@media (max-width:760px){
  .netmap-foot{text-align:left;}
}
.netmap-legend{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px 28px;
  align-items:center;
}
.netmap-key{
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-body);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:color-mix(in oklch,var(--white) 62%,var(--black));
}
.netmap-swatch{
  width:8px;
  height:8px;
  border-radius:50%;
  flex:0 0 auto;
}
.netmap-swatch-base{
  background:var(--chimichurri-green);
  box-shadow:0 0 0 3px rgba(75,122,63,.28);
}
.netmap-swatch-na{background:#4A6A9C;}
.netmap-swatch-intl{background:rgba(255,255,255,.85);}

/* A PHONE CROPS RATHER THAN SHRINKS.
 *
 * The frame is 1600 units wide. Fitted whole into a 350px screen, a 15 unit
 * label lands at about three pixels, which is not a label, it is texture. The
 * SVG carries preserveAspectRatio="slice", so giving the box a taller ratio
 * here crops to the middle of the map the way object-fit:cover would, and what
 * remains is scaled up enough to read.
 *
 * What that costs is the edges, which is where the international names sit.
 * They stay in the HTML for crawlers, and the lede and the caption carry the
 * international story in text on a phone. */
@media (max-width:768px){
  .netmap{aspect-ratio:1/1.05;}
  /* CSS beats the presentation attribute on each label, so this resizes every
     one of them at once. */
  .netmap-label{font-size:30px;stroke-width:5.5;}
  .netmap-base-label{font-size:34px;}
  .netmap-label-minor{display:none;}
  .netmap-dot{r:5;}
  .netmap-legend{gap:8px 18px;}
  .netmap-key{font-size:.625rem;}
}

/* Nothing moves, and the labels in the markup stay put. */
@media (prefers-reduced-motion:reduce){
  .netmap-dot,
  .netmap-static,
  .netmap-pop,
  .netmap-arc-live{transition:none;}
}

/* vertical blocks: waterfront, ranch + land, development marketing */
.vblock-section{padding-left:0;padding-right:0;}
.vblock-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  background:var(--border-default);
}
.vblock{
  position:relative;
  display:block;
  min-height:460px;
  overflow:hidden;
  background:var(--black);
  color:var(--text-inverse);
}
.vblock-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform var(--duration-slow) var(--ease-out-expo);
}
.vblock:hover .vblock-img,
.vblock:focus-visible .vblock-img{transform:scale(1.04);}
.vblock-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.78) 100%);
}
.vblock-content{
  position:relative;
  padding:36px 32px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:460px;
}
.vblock-eyebrow{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--accent-spot-on-dark);
  margin-bottom:10px;
}
.vblock-title{
  font-family:var(--font-heading);
  font-size:1.5rem;
  line-height:var(--leading-heading);
  color:var(--text-inverse);
  margin:0 0 12px;
}
.vblock-body{
  font-family:var(--font-body);
  font-size:0.9375rem;
  line-height:var(--leading-body);
  color:var(--fog);
  margin:0 0 16px;
}
.vblock-cta{
  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-inverse);
}
.vblock:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px;}
@media (max-width:1024px){
  .vblock-grid{grid-template-columns:1fr;}
  .vblock,.vblock-content{min-height:340px;}
}

/* development marketing: selected experience photography */
.devband-chip-media{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  margin-bottom:14px;
  background:var(--surface-inverse);
}
.devband-chip-media img{width:100%;height:100%;object-fit:cover;display:block;}
.devband-chip-media .img-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:12px;
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--fog);
  background:var(--infinity-blue);
}

/* resources banner: one full-width image, real HTML text over it */
.resources-banner-section{padding-left:0;padding-right:0;}
.resources-banner{
  position:relative;
  display:block;
  min-height:380px;
  overflow:hidden;
  background:var(--black);
  color:var(--text-inverse);
}
.resources-banner-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.resources-banner-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,0.78) 0%,rgba(0,0,0,0.45) 100%);
}
.resources-banner-content{
  position:relative;
  max-width:640px;
  padding:64px 56px;
}
.resources-banner-content .eyebrow{
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--accent-spot-on-dark);
  margin-bottom:12px;
}
.resources-banner-title{
  font-family:var(--font-heading);
  font-size:clamp(1.6rem,3vw,2.25rem);
  line-height:var(--leading-heading);
  color:var(--text-inverse);
  margin:0 0 14px;
}
.resources-banner-body{
  font-family:var(--font-body);
  line-height:var(--leading-body);
  color:var(--fog);
  margin:0 0 20px;
}
.resources-banner-cta{
  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-inverse);
}
.resources-banner:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px;}

/* THE SHORT-TERM RENTALS BAND: the resources block, mirrored.
   Text panel right, gradient reversed to match. Same classes, so the type
   treatment is identical by construction rather than by being kept in step.

   IT STAYS THE LIGHTER OF THE TWO. 260px against the resources block's 380px,
   and a shorter panel padding. It is a signpost, not a chapter, and it must not
   grow into the weight of the waterfront, ranch or development blocks. */
/* The section's own 72px band of padding is cut back too. The resources block
   keeps it because it is the heavier of the two by design; this one is the
   signpost, and at full section padding it measured 450px against the feature
   bands' 448px, which is exactly the weight it is not supposed to have. */
.str-banner-section{padding-block:40px;}
.str-banner{min-height:220px;}
.str-banner-overlay{
  background:linear-gradient(270deg,rgba(0,0,0,0.78) 0%,rgba(0,0,0,0.45) 100%);
}
.str-banner-content{
  margin-left:auto;
  text-align:right;
  /* Wider than the resources panel at 640px, which is not a whim: the copy is
     fixed and must not be edited, so the only way to spend fewer vertical
     pixels on it is to let it wrap across fewer lines. */
  max-width:760px;
  padding:26px 56px;
}
/* The CTA is an inline span inside the block link, so it needs no alignment of
   its own; the panel's text-align carries it. */
@media (max-width:768px){
  /* MOBILE STACKS THE SAME WAY THE RESOURCES BLOCK DOES: the photograph is the
     background of the band in both, so both read image-then-text down the page
     and the only thing that changes is that the panel goes full width and back
     to reading left. Right-aligned copy on a narrow screen is harder to read
     and gains nothing. */
  .str-banner-content{padding:32px 24px;text-align:left;margin-left:0;}
  .str-banner-overlay{background:linear-gradient(180deg,rgba(0,0,0,0.45) 0%,rgba(0,0,0,0.78) 100%);}
}
@media (max-width:768px){
  .resources-banner-content{padding:48px 24px;}
}

/* ===========================================================================
   BLOG, TESTIMONIALS, REVIEW LINKS
   Tokens only. No font-family declaration outside the two families.
   =========================================================================== */
.blog-list{list-style:none;margin:0;padding:0;}
.blog-list-item{
  padding:28px 0;
  border-bottom:1px solid var(--border-default);
}
.blog-list-item:last-child{border-bottom:none;}
.blog-list-date{
  display:block;
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:8px;
}
.blog-list-title{
  font-family:var(--font-heading);
  font-size:1.375rem;
  line-height:var(--leading-heading);
  margin:0 0 8px;
}
.blog-list-title a{color:var(--text-heading);text-decoration:none;}
.blog-list-title a:hover{color:var(--accent-primary);}
.blog-list-body{
  font-family:var(--font-body);
  color:var(--text-muted);
  line-height:var(--leading-body);
  margin:0;
}

.blog-post-head{padding-bottom:0;}
.blog-post-title{
  font-family:var(--font-heading);
  font-size:clamp(1.9rem,4vw,2.75rem);
  line-height:var(--leading-heading);
  color:var(--text-heading);
  margin:8px 0 14px;
  text-wrap:balance;
}
.blog-post-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:baseline;
  font-family:var(--font-body);
  font-size:var(--text-caption);
  color:var(--text-muted);
  margin:0;
}
.blog-post-body{padding-top:24px;}
.blog-post-body p{
  font-family:var(--font-body);
  line-height:var(--leading-body);
  margin:0 0 18px;
}
.blog-post-body ul{margin:0 0 18px;padding-left:1.15rem;}
.blog-post-body li{margin-bottom:10px;}

.blog-related{background:var(--fog);}
.blog-related-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.blog-related-list a{
  display:inline-block;
  padding:8px 16px;
  background:var(--white);
  border:1px solid var(--border-default);
  border-radius:var(--radius-pill);
  font-family:var(--font-body);
  font-size:13px;
  color:var(--ink);
  text-decoration:none;
}
.blog-related-list a:hover{border-color:var(--accent-primary);color:var(--accent-primary);}

/* ---------------------------------------------------------------------------
   BLOG INDEX: category nav and the card grid.

   The index groups by category rather than running one long reverse-chronological
   list, so these cards are the primary way into a post. Same photo treatment as
   .place-card (4/3 crop, rounded, scale on hover), because a blog card and a
   place card are the same object doing the same job and should not look like two
   different design systems.

   The whole card is one <a>. The spans inside are spans and not divs because an
   anchor may not contain block-level flow content, and this markup has to stay
   valid for the crawler that reads it.
   --------------------------------------------------------------------------- */
.blog-nav-section{padding-top:40px;padding-bottom:0;}
.blog-catnav{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;}
.blog-catnav a{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-size:11px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-body);text-decoration:none;
  border:1px solid var(--border-default);border-radius:999px;padding:8px 16px;
  transition:border-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out);
}
.blog-catnav a:hover{border-color:var(--accent-primary);color:var(--accent-primary);}
.blog-catnav-count{font-size:11px;color:var(--text-muted);}

.blog-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.blog-card{margin:0;}
.blog-card-link{display:flex;flex-direction:column;height:100%;text-decoration:none;}
.blog-card-media{
  display:block;position:relative;aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--radius-md);background:var(--fog);margin-bottom:14px;
}
.blog-card-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--duration-deliberate) var(--ease-out-expo);
}
.blog-card-link:hover .blog-card-media img{transform:scale(1.06);}
.blog-card-text{display:flex;flex-direction:column;flex:1;}
.blog-card-kicker{
  display:block;font-family:var(--font-body);font-size:10px;
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--accent-primary);margin-bottom:6px;
}
.blog-card-title{
  display:block;font-family:var(--font-heading);font-weight:600;font-size:19px;
  line-height:1.35;color:var(--black);margin-bottom:8px;
  transition:color var(--duration-fast) var(--ease-out);
}
.blog-card-link:hover .blog-card-title{color:var(--accent-primary);}
.blog-card-body{
  display:block;font-family:var(--font-body);font-size:14px;line-height:1.7;
  color:var(--text-body);margin-bottom:14px;
}
.blog-card-meta{
  margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;font-family:var(--font-body);font-size:12px;color:var(--text-muted);
}
.blog-card-cta{color:var(--accent-primary);font-weight:600;white-space:nowrap;}

/* The post hero, held to the same measure as the prose it introduces. A hero
   wider than the column it sits above reads as a banner belonging to the page
   rather than as the article's own image. */
.blog-post-hero{padding:28px 56px 0;}
.blog-post-hero picture,.blog-post-hero img{display:block;max-width:760px;margin:0 auto;}
.blog-post-hero img{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--radius-md);background:var(--fog);
}

@media (max-width:1024px){
  .blog-grid{grid-template-columns:repeat(2,1fr);gap:24px;}
}
@media (max-width:768px){
  .blog-grid{grid-template-columns:1fr;gap:28px;}
  .blog-post-hero{padding:20px 20px 0;}
  .blog-card-title{font-size:18px;}
}

.review-links{
  list-style:none;
  margin:16px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.review-links a{
  display:inline-block;
  padding:9px 18px;
  border:1px solid var(--border-default);
  border-radius:var(--radius-pill);
  background:var(--white);
  font-family:var(--font-body);
  font-size:13px;
  color:var(--ink);
  text-decoration:none;
}
.review-links a:hover{border-color:var(--accent-primary);color:var(--accent-primary);}

.section-subtitle{
  font-family:var(--font-heading);
  font-size:1.125rem;
  line-height:var(--leading-heading);
  color:var(--text-heading);
  margin:28px 0 10px;
}

/* Hero photograph on an authored place page. Absolute and covering, so it never
   contributes to layout: the section owns the 360px and the image fills it. */
.page-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* --- /thank-you: next steps ---
   The conversion page is not a dead end. Four routes out, sized so the grid
   collapses to one column on a phone without the cards becoming letterboxes. */
.thanks-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}
.thanks-card{
  background:var(--white);
  border:1px solid var(--border-default);
  border-radius:var(--radius-md);
  padding:26px 24px;
}
.thanks-card-title{
  font-family:var(--font-heading);
  font-size:20px;
  color:var(--text-heading);
  margin:0 0 10px;
}
.thanks-card-body{
  font-family:var(--font-body);
  font-size:15px;
  line-height:var(--leading-body);
  color:var(--text-body);
  margin:0 0 16px;
}
.thanks-card-link{
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--infinity-blue);
  text-decoration:none;
}
.thanks-card-link:hover{text-decoration:underline;}
@media (max-width:700px){
  .thanks-grid{grid-template-columns:1fr;}
}

/* --- /404: routes back into the site ---
   A plain two-column list rather than cards. Somebody who has just hit a dead
   end wants the shortest path out, not four paragraphs of persuasion. */
.notfound-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px 24px;
  margin-top:20px;
}
.notfound-link{
  display:block;
  font-family:var(--font-body);
  font-size:16px;
  color:var(--infinity-blue);
  text-decoration:none;
  padding:14px 16px;
  border:1px solid var(--border-default);
  border-radius:var(--radius-md);
  min-height:44px;
}
.notfound-link:hover{background:var(--fog);text-decoration:underline;}
@media (max-width:700px){
  .notfound-grid{grid-template-columns:1fr;}
}

/* ASK AN ASSISTANT, homepage section 1c.
   A quiet strip, not a banner. It sits directly under the stat strip and must
   not compete with the three route cards below it, so it uses the fog ground
   and body-size type rather than a section title. */
.assistant-strip{padding-top:0;padding-bottom:0;}
.assistant-strip .section-narrow{
  background:var(--fog);
  border-left:3px solid var(--infinity-blue);
  padding:20px 24px;
  border-radius:2px;
}
.assistant-strip-body{
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.6;
  color:var(--ink);
  margin:0;
}
.assistant-strip-link{
  color:var(--infinity-blue);
  white-space:nowrap;
  border-bottom:1px solid currentColor;
}
.assistant-strip-link:hover{border-bottom-color:transparent;}
@media (max-width:600px){
  .assistant-strip .section-narrow{padding:16px 18px;}
  .assistant-strip-body{font-size:14px;}
}

/* ===========================================================================
   FLUID FULL-WIDTH LAYOUT
   Added 2026-08-26. Tokens live on :root in tokens.css; this is where they get
   applied. Nothing in this file is page-specific and nothing uses !important.
   ===========================================================================
   THE PROBLEM THIS SOLVES. `.wrap` carried max-width:1440px, so the entire
   site was a 1440px card centred on the fog body colour. Below 1440 that cap
   never bound and the page already filled the screen. Above it the page simply
   stopped growing and added dead space to the sides, so a 1920 monitor showed
   a narrow column and a 3440 ultrawide showed a very narrow one. `.wrap` is
   now width:100% with max-width:none, and --gutter is the only horizontal
   breathing room the page gets.

   WHY THIS BLOCK IS SCOPED TO min-width:1025px, AND WHY THAT IS NOT A HEDGE.
   The hardest constraint on this change is that rendering below 1024px stays
   pixel-identical. Every existing mobile rule is written as (max-width:1024px)
   or (max-width:768px), so (min-width:1025px) is their exact complement: not
   one declaration below can reach a viewport of 1024px or narrower. That makes
   "mobile is unchanged" a property of the code rather than a claim somebody
   has to re-measure after every future edit. The tokens themselves are still
   declared once, unscoped, on :root.

   There is no breakpoint INSIDE this block. From 1025px upward --gutter
   interpolates continuously and the grids reflow continuously. 1025 is where
   the new behaviour begins, not a step it jumps at: at 1025px the gutter
   computes to 41px against the 40px the tablet rules already use, so the seam
   is one pixel wide. */
@media (min-width:1025px){

  /* --- BANDS: paint edge to edge, content inset by the gutter --------------
     Each of these is a full-width band whose BACKGROUND must reach both edges
     of the viewport while its CONTENT sits in from the edge. That is why the
     gutter is horizontal padding on the band itself rather than a max-width on
     an inner wrapper: padding keeps the paint full-bleed and moves only the
     content. No negative margins and no 100vw are involved, so there is no
     scrollbar-width overflow on Windows.
     `padding-inline` touches the horizontal component only. Every vertical
     padding value in these rules is left exactly as it was. */
  .section{padding-inline:var(--gutter);}
  .intro{padding-inline:var(--gutter);}
  .testimonials{padding-inline:var(--gutter);}
  .spotlight{padding-inline:var(--gutter);}
  .agent-bio{padding-inline:var(--gutter);}
  .statstrip{padding-inline:var(--gutter);}
  .cta-banner{padding-inline:var(--gutter);}
  .cta-band{padding-inline:var(--gutter);}
  .site-footer{padding-inline:var(--gutter);}
  .site-nav{padding-inline:var(--gutter);}
  .markets-strip{padding-inline:var(--gutter);}
  .pillars-wrap{padding-inline:var(--gutter);}
  .neighborhoods-heading{padding-inline:var(--gutter);}
  .scroller-wrap{padding-inline:var(--gutter);}
  .blog-post-hero{padding-inline:var(--gutter);}
  .devband{padding-inline:var(--gutter);}
  .resources-banner-content{padding-inline:var(--gutter);}

  /* The two heroes position their text absolutely rather than padding it, so
     the gutter goes on the offsets instead. Same result, same reason. */
  .hero-content{left:var(--gutter);right:var(--gutter);}
  .page-hero-content{left:var(--gutter);right:var(--gutter);}


  /* --- CARD GRIDS: ADD COLUMNS, DO NOT STRETCH CARDS ----------------------
     auto-fill, never auto-fit. auto-fit collapses empty tracks, so a grid
     holding fewer items than it has columns stretches those items across the
     whole row. On a 3440 monitor the four listings would each become roughly
     800px wide, which is precisely the failure this is meant to avoid.
     auto-fill keeps the empty tracks and the cards keep their size.

     Each grid carries its OWN measured minimum rather than one shared figure,
     so no card changes size at a width anybody is already using. The reasoning
     is recorded with the tokens in tokens.css. */
  .place-grid{grid-template-columns:repeat(auto-fill,minmax(var(--card-min-place),1fr));}
  .team-grid{grid-template-columns:repeat(auto-fill,minmax(var(--card-min-team),1fr));}
  .testimonial-grid{grid-template-columns:repeat(auto-fill,minmax(var(--card-min-testimonial),1fr));}
  .phase-grid{grid-template-columns:repeat(auto-fill,minmax(var(--card-min-phase),1fr));}
  .stat-grid{grid-template-columns:repeat(auto-fill,minmax(var(--card-min-stat),1fr));}
  .choice-grid{grid-template-columns:repeat(auto-fill,minmax(var(--card-min-choice),1fr));}
  .service-grid{grid-template-columns:repeat(auto-fill,minmax(var(--card-min-service),1fr));}
  .howwework-grid{grid-template-columns:repeat(auto-fill,minmax(var(--card-min-howwework),1fr));}
  .tools-strip{grid-template-columns:repeat(auto-fill,minmax(var(--card-min-tools),1fr));}
  .tile-grid{grid-template-columns:repeat(auto-fill,minmax(var(--card-min-tile),1fr));}
  .listing-grid{grid-template-columns:repeat(auto-fill,minmax(var(--card-min-place),1fr));}
}

/* --- PROSE MEASURE -------------------------------------------------------
   The one place this change deliberately does NOT go full width. At 3440 an
   uncapped paragraph in the homepage intro column runs to 157 characters a
   line, and continuous prose stops being readable long before that.

   THIS LIST IS DELIBERATELY SHORT, and the reason is worth recording: almost
   every run of prose on this site is ALREADY capped. .section-narrow caps at
   800px, and the content fragments additionally carry inline max-width:760px
   on the same wrapper, which is what the About history, the relocation
   answers, the blog bodies and the FAQ answers all sit inside. Those measure
   between 100 and 115 characters at every width and need nothing from this
   token. Applying it to them would NARROW them from 800px to roughly 655px and
   change laptop rendering that has no problem today.

   So the token lands only on the prose that was genuinely uncapped. Headings,
   card grids, listings, navigation, image bands, stat rows and tables are
   excluded by design and go full width. The footer is excluded too, per the
   brief, and its legal lines do exceed 110 characters at 3440; that is
   reported rather than silently fixed. */
@media (min-width:1025px){
  .intro-lead,
  .intro-body,
  .form-intro .section-body{
    max-width:var(--measure-prose);
  }
}

/* --- JEFFREY GRANT HERO, SHOWN WHOLE ------------------------------------
   Added 2026-08-26. The photograph was cropped to a horizontal band: the
   source file is 1024x1024, the markup declared 1600x360, and the image was
   covered into a 440px-tall section with object-position:center 25%. On a
   desktop viewport that left a strip of his face.

   The container now takes the file's REAL aspect ratio, read from the file
   with sharp rather than from the markup that was wrong, and the image is
   contained. Because the container ratio and the image ratio are identical
   there is no letterboxing at all, so there are no bars to colour; the
   background is declared anyway, matching the surrounding section, so a
   future photo of a different ratio degrades to the section colour rather
   than to black.

   height is explicitly auto: .page-hero sets a fixed height and this must
   follow the photograph instead. aspect-ratio then supplies the box before
   the image loads, so there is no layout shift.

   KNOWN CONSEQUENCE, reported rather than quietly cropped away: a 1:1 hero on
   a full-bleed container is as tall as the viewport is wide. See the note in
   the handover. */
.page-hero-uncropped{
  height:auto;
  aspect-ratio:1 / 1;
  background:var(--white);
}
.page-hero-uncropped img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
}


/* --- TESTIMONIAL CARDS ---------------------------------------------------
   Replaced a one-at-a-time carousel on 2026-08-26. The carousel showed a
   single slide in a 720px track, so at 1920 the block used 720 pixels and left
   1200 empty, and four of the five reviews were behind an arrow.

   COLOUR, AND A DEVIATION WORTH READING. The brief specified a card colour and
   a border colour, both one shade off black. Neither is on the brand palette,
   and build/audit.js fails the build on any hex outside it, including one that
   appears only in a comment, which is how this very note first failed.

   Rather than weaken that check, the same effect is built from palette colours
   only: the section drops to Compass Black and the card sits on Ink, so the
   card reads as lifted off the section by one shade, which is exactly what the
   brief was after. The resting border is a white alpha rather than a new hex,
   and it is the same device the devband chips already use.

   The hover colour IS the brief's: Chimichurri Green, which is on the palette.

   Only border-color transitions. No transform, no scale, no shadow. */
.testimonial-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--grid-gap);
  align-items:stretch;
}
/* Columns above the breakpoint only, the same shape and the same scope as
   every other card grid here, so nothing below 1024px is reached. */
@media (min-width:1025px){
  .testimonial-cards{
    grid-template-columns:repeat(auto-fill,minmax(var(--card-min-testimonial),1fr));
  }
}
/* THE TESTIMONIAL SLIDER, homepage only.
   The container is the neighborhoods slider's own .scroller, reused rather than
   rebuilt, so there is one slider mechanism on this site and not two. These
   rules only size the cards inside it; everything about the card treatment
   itself is unchanged below.

   Every selector here is under .testimonials .scroller, which exists on the
   homepage and nowhere else, so the twenty other pages that render testimonial
   cards in a grid are untouched.

   align-items:stretch is what equalises the card heights. No quote is shortened
   or clipped to make the row line up. */
.testimonials .scroller{align-items:stretch;}
.testimonials .scroller .testimonial-card{
  flex:0 0 var(--card-min-testimonial);
  max-width:100%;
  scroll-snap-align:start;
  scroll-margin-inline:16px;
}
/* The arrows sit on a Compass Black section, so they take the same inverse
   treatment the testimonial slider arrows always had. */
.testimonials .scroller-arrow{
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.25);
  color:var(--white);
}
.testimonials .scroller-arrow:hover{background:rgba(255,255,255,0.18);}
.testimonials-slider .scroller-wrap{padding:24px 56px 0;}
@media (max-width:768px){
  .testimonials .scroller .testimonial-card{flex-basis:min(86vw,var(--card-min-testimonial));}
  .testimonials-slider .scroller-wrap{padding:20px 20px 0;}
}

.testimonial-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:0;
  padding:28px 26px;
  background:var(--ink);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--radius-md);
  transition:border-color 150ms var(--ease-out);
}
/* Hover AND keyboard focus get the same treatment, so a tab user sees what a
   mouse user sees. The focus ring is NOT removed: :focus-visible keeps the
   global outline and the border change sits underneath it. */
.testimonial-card:hover,
.testimonial-card:focus-visible{
  border-color:var(--accent-spot);
}
@media (prefers-reduced-motion:reduce){
  .testimonial-card{transition:none;}
}


/* --- SHORT-TERM RENTAL BAND ----------------------------------------------
   Compact by construction. Tighter vertical padding than a full block and no
   image slot, so it cannot accumulate the visual weight of the Waterfront,
   Ranch + Land or Development blocks. Type scale and colours are the page's
   existing ones; nothing new is introduced. */
.str-band{padding-block:36px;}
.str-band-title{
  font-family:var(--font-heading);
  font-size:var(--text-h3);
  line-height:var(--leading-heading);
  color:var(--text-heading);
  margin:0 0 8px;
}
.str-band .section-body{margin:0 0 10px;}
.str-band-link{
  font-family:var(--font-body);
  font-size:15px;
  color:var(--link);
  border-bottom:1px solid currentColor;
  padding-bottom:1px;
}
.str-band-link:hover,
.str-band-link:focus-visible{color:var(--link-hover);}