*,*::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 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
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 */
.testimonials{background:var(--ink);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;}
.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;}
.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{
max-width:1080px;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;max-width:1080px;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;
max-width:1180px;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 */
.coverage-section{background:var(--fog);}
.coverage-block{margin-top:28px;}
.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;
max-width:1040px;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;max-width:1040px;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;max-width:1000px;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;}
}
/* relocation coverage map */
.relomap-lead{
font-family:var(--font-body);
font-size:1.0625rem;
line-height:var(--leading-body);
color:var(--ink);
margin:0 0 16px;
}
.relomap-body{
font-family:var(--font-body);
color:var(--text-muted);
line-height:var(--leading-body);
margin:0 0 32px;
}
.relomap-figure{margin:0;}
.relomap{
display:block;
width:100%;
height:auto;
background:var(--fog);
border:1px solid var(--border-default);
}
.relomap-plate{
fill:var(--white);
stroke:var(--border-default);
stroke-width:1.5;
}
.relomap-link{
stroke:var(--infinity-blue);
stroke-width:1;
opacity:0.28;
}
.relomap-origin circle{fill:var(--infinity-blue);}
.relomap-origin text{
font-family:var(--font-body);
font-size:15px;
font-weight:600;
fill:var(--infinity-blue);
}
.relomap-pin circle{fill:var(--chimichurri-green);}
.relomap-pin text{
font-family:var(--font-body);
font-size:14px;
fill:var(--ink);
}
.relomap-caption{
font-family:var(--font-body);
font-size:var(--text-caption);
color:var(--text-muted);
text-align:center;
margin-top:14px;
}
.relomap-lists{
display:grid;
grid-template-columns:2fr 1fr;
gap:32px;
margin-top:36px;
}
.relomap-list-title{
font-family:var(--font-body);
font-size:11px;
font-weight:600;
letter-spacing:var(--tracking-label);
text-transform:uppercase;
color:var(--text-muted);
margin:0 0 10px;
}
.relomap-list{
list-style:none;
margin:0;
padding:0;
columns:2;
font-family:var(--font-body);
color:var(--ink);
line-height:1.9;
}
.relomap-list li{break-inside:avoid;}
.relomap-actions{text-align:center;margin-top:36px;}
@media (max-width:768px){
.relomap-lists{grid-template-columns:1fr;gap:24px;}
.relomap-list{columns:1;}
.relomap-pin text{font-size:20px;}
.relomap-origin text{font-size:21px;}
}
/* 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;}
@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);}
.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;}
}