/* =====================================================================
   Laura Neal — Broker Associate, Compass
   Modern Editorial: deep navy + gold, warm cream, airy whitespace.
   Single-page stylesheet. Organized by: tokens / base / layout /
   components / sections / responsive.
   ===================================================================== */

/* ---------- TOKENS ---------- */
:root {
  --navy:#14213d; --navy-2:#2d4263; --gold:#c9a45c; --cream:#f4f1ea;
  --ink:#1c1c1c; --muted:#6b6b6b; --white:#ffffff;
  --font-head:'Helvetica Neue',Arial,sans-serif; /* headings: uppercase, light/medium */
  --font-body:Georgia,'Times New Roman',serif;    /* body + serif accents */
  --h1:clamp(2.4rem,6vw,4rem); --h2:clamp(1.8rem,4vw,2.6rem); --h3:1.25rem; --body:1.0625rem;
  --space-section:clamp(4rem,9vw,7rem); --maxw:1140px; --radius:6px;
  --header-h:72px;
  --shadow-sm:0 2px 10px rgba(20,33,61,.06);
  --shadow-md:0 18px 50px -18px rgba(20,33,61,.35);
}

/* ---------- RESET / BASE ---------- */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior:smooth; }
}
html { scroll-padding-top:calc(var(--header-h) + 12px); }
body {
  font-family:var(--font-body);
  font-size:var(--body);
  line-height:1.7;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img { display:block; max-width:100%; height:auto; }
a { color:inherit; }
button { font:inherit; cursor:pointer; }

/* ---------- ACCESSIBILITY: skip link + focus ---------- */
/* Skip link: visually hidden until focused, then pinned top-left. */
.skip-link {
  position:absolute; top:.5rem; left:.5rem; z-index:1000;
  background:var(--navy); color:var(--cream);
  font-family:var(--font-head); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:600; text-decoration:none;
  padding:.7rem 1.1rem; border-radius:var(--radius);
  border:2px solid var(--gold);
  transform:translateY(-150%); transition:transform .2s ease;
}
.skip-link:focus { transform:translateY(0); }

/* Clear, consistent focus ring on all interactive elements. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
  outline:3px solid var(--gold);
  outline-offset:3px;
  border-radius:var(--radius);
}
/* On the navy hero/bands a gold ring can be low-contrast against gold buttons;
   keep the gold ring but add a navy inner edge for separation on light controls. */
.band input:focus-visible,
.band textarea:focus-visible { outline-offset:2px; box-shadow:0 0 0 2px var(--navy); }

/* ---------- LAYOUT HELPERS ---------- */
.container { max-width:var(--maxw); margin-inline:auto; padding-inline:1.25rem; }
.section { padding-block:var(--space-section); }
.band { background:var(--navy); color:var(--cream); }

/* ---------- TYPOGRAPHY ---------- */
.eyebrow {
  font-family:var(--font-head);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin-bottom:1rem;
}
.section-title {
  font-family:var(--font-head);
  font-weight:300; line-height:1.1;
  font-size:var(--h2); letter-spacing:.04em; text-transform:uppercase;
  color:var(--navy);
}
.band .section-title { color:var(--cream); }
.section-head { max-width:46ch; margin-bottom:clamp(2rem,4vw,3rem); }

.text-link {
  font-family:var(--font-head);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; color:var(--navy); text-decoration:none;
  display:inline-flex; align-items:center; gap:.5rem;
  border-bottom:1px solid var(--gold); padding-bottom:3px;
  transition:gap .25s ease, color .25s ease;
}
.text-link:hover { gap:.85rem; color:var(--gold); }
.band .text-link { color:var(--cream); border-bottom-color:var(--cream); }

/* ---------- BUTTONS ---------- */
.btn {
  display:inline-block;
  font-family:var(--font-head);
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  background:var(--gold); color:var(--navy);
  padding:.95rem 1.8rem; border:1px solid var(--gold);
  border-radius:var(--radius); text-decoration:none;
  transition:transform .2s ease, box-shadow .25s ease, background .25s ease;
}
.btn:hover { transform:translateY(-2px); box-shadow:0 12px 28px -10px rgba(201,164,92,.6); }
.btn-sm { padding:.6rem 1.15rem; font-size:11px; }
.btn-ghost {
  background:transparent; color:var(--navy); border:1px solid var(--navy);
}
.btn-ghost:hover { background:var(--navy); color:var(--cream); box-shadow:none; }
.btn-ghost-light { color:var(--cream); border-color:rgba(244,241,234,.55); }
.btn-ghost-light:hover { background:var(--cream); color:var(--navy); border-color:var(--cream); }

/* ---------- MEDIA PLACEHOLDERS ---------- */
/* Tasteful navy/gold gradient blocks with a label; swap for real <img>.
   Containers below carry explicit aspect-ratio (hero is inset:0; portrait 4/5;
   listing 3/2) so swapped-in images inherit dimensions and cause no layout shift.
   When adding real below-the-fold imgs (headshot, listing photos), include
   loading="lazy" decoding="async" plus width/height (or rely on these ratios).
   The hero image is above the fold — leave it eager (no lazy). */
.media-label {
  font-family:var(--font-head);
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(244,241,234,.65);
}
.hero-media, .portrait-placeholder, .listing-media {
  background:
    radial-gradient(120% 120% at 80% 0%, rgba(201,164,92,.28), transparent 55%),
    linear-gradient(150deg, var(--navy) 0%, var(--navy-2) 100%);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
/* subtle grid texture on placeholders */
.hero-media::after, .portrait-placeholder::after, .listing-media::after {
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(rgba(244,241,234,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,241,234,.045) 1px, transparent 1px);
  background-size:42px 42px;
  pointer-events:none;
}

/* =====================================================================
   HEADER / NAV
   ===================================================================== */
.site-header {
  position:sticky; top:0; z-index:100;
  background:rgba(244,241,234,.88);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(20,33,61,.08);
}
.header-inner {
  display:flex; align-items:center; justify-content:space-between;
  min-height:var(--header-h);
}
.wordmark { text-decoration:none; display:flex; flex-direction:column; line-height:1; }
.wordmark-main {
  font-family:var(--font-head); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--navy);
  font-size:1.05rem;
}
.wordmark-sub {
  font-family:var(--font-head); font-size:9.5px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--gold); margin-top:5px; font-weight:600;
}
.nav { display:flex; align-items:center; gap:2.2rem; }
.nav-list { list-style:none; display:flex; gap:1.9rem; padding:0; }
.nav-list a {
  font-family:var(--font-head);
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:500;
  color:var(--navy); text-decoration:none; position:relative; padding-bottom:4px;
}
.nav-list a::after {
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0;
  background:var(--gold); transition:width .28s ease;
}
.nav-list a:hover::after { width:100%; }

.nav-toggle {
  display:none; background:none; border:0; padding:8px;
  width:42px; height:42px; flex-direction:column; gap:5px;
  align-items:center; justify-content:center;
}
.nav-toggle-bar {
  display:block; width:24px; height:2px; background:var(--navy);
  transition:transform .3s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  position:relative; min-height:80vh;
  display:grid; grid-template-columns:minmax(0,1fr); align-items:center; /* full-width column → copy aligns to the site gutter */
  background:var(--navy); color:var(--cream); overflow:hidden;
}
.hero-media { position:absolute; inset:0; }
.hero-media .media-label { position:absolute; bottom:1.25rem; right:1.5rem; }
.hero-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero::before { /* readability overlay: dark band on the left behind the text, fading
                   to clear on the right so the photo shows; subtle base for the scroll cue. */
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(0deg, rgba(20,33,61,.40) 0%, rgba(20,33,61,0) 26%),
    linear-gradient(90deg, rgba(20,33,61,.84) 0%, rgba(20,33,61,.56) 30%, rgba(20,33,61,.20) 58%, rgba(20,33,61,0) 86%);
}
/* Full-width centered container (aligns hero copy to the same left gutter as the
   rest of the site); the copy itself is capped and left-aligned. */
.hero-inner { position:relative; z-index:2; width:100%; padding-block:clamp(5rem,12vh,8rem); }
.hero-inner > * { max-width:600px; }
.hero-title {
  font-family:var(--font-head); font-weight:300;
  font-size:var(--h1); letter-spacing:.05em; text-transform:uppercase;
  line-height:1; margin:.4rem 0 1.4rem;
}
.hero-tagline {
  font-family:var(--font-body); font-style:italic;
  font-size:clamp(1.25rem,2.6vw,1.7rem); color:var(--gold);
  line-height:1.35; max-width:30ch; position:relative; padding-top:1.4rem;
}
.hero-tagline::before {
  content:""; position:absolute; top:0; left:0; width:56px; height:2px; background:var(--gold);
}
.hero-sub { margin:1.5rem 0 2.4rem; max-width:48ch; color:rgba(244,241,234,.86); }
.hero-actions { display:flex; flex-wrap:wrap; gap:1rem; }

/* =====================================================================
   ABOUT
   ===================================================================== */
.about-grid {
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(2rem,6vw,5rem);
  align-items:center;
}
.about-portrait { position:relative; }
.portrait-placeholder {
  aspect-ratio:4/5; width:100%; border-radius:var(--radius);
}
.portrait-placeholder .media-label { position:relative; z-index:1; }
.portrait-photo { display:block; aspect-ratio:4/5; width:100%; object-fit:cover; object-position:center top; border-radius:var(--radius); }
/* gold frame accent */
.about-portrait::before {
  content:""; position:absolute; inset:auto -14px -14px auto;
  width:60%; height:60%; border:1px solid var(--gold); border-radius:var(--radius);
  z-index:-1;
}
.about-text p:not(.eyebrow) { color:var(--ink); max-width:60ch; margin-top:1.2rem; }
.about-text .section-title { margin-bottom:.6rem; }

/* =====================================================================
   HOW I HELP
   ===================================================================== */
.help-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem;
}
.help-card {
  background:var(--white); border:1px solid rgba(20,33,61,.08);
  border-radius:var(--radius); padding:clamp(2rem,4vw,3rem);
  position:relative; box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .3s ease;
  border-top:3px solid var(--gold);
}
.help-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.help-num {
  font-family:var(--font-head); font-size:13px; letter-spacing:.2em;
  color:var(--gold); font-weight:700;
}
.help-card-title {
  font-family:var(--font-head); font-weight:400; font-size:1.4rem;
  letter-spacing:.05em; text-transform:uppercase; color:var(--navy);
  margin:.6rem 0 .9rem;
}
.help-card p { color:var(--muted); margin-bottom:1.6rem; }

/* =====================================================================
   FEATURED LISTINGS
   ===================================================================== */
.listing-card {
  background:var(--white); border-radius:var(--radius); overflow:hidden;
  border:1px solid rgba(20,33,61,.08); box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .3s ease;
}
.listing-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); }
.listing-media { aspect-ratio:3/2; width:100%; }
.listing-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.listing-media .listing-tag {
  position:absolute; top:1rem; left:1rem; z-index:1;
  font-family:var(--font-head); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:600;
  background:var(--gold); color:var(--navy);
  padding:.35rem .7rem; border-radius:3px;
}
.listing-body { padding:1.6rem 1.6rem 1.9rem; }
.listing-price {
  font-family:var(--font-head); font-weight:500; font-size:1.5rem;
  color:var(--navy); letter-spacing:.02em;
}
.listing-address { color:var(--muted); margin:.3rem 0 .55rem; }
.listing-specs {
  font-family:var(--font-head); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--navy); font-weight:500; margin-bottom:.55rem;
}
.listing-note { color:var(--muted); font-size:.95rem; margin-bottom:1.3rem; }
.listings-cta { text-align:center; margin-top:3rem; }

/* =====================================================================
   MARKET INSIGHTS
   ===================================================================== */
/* Frame holding the live Infosparks iframe. Native chart is 800x600 (4:3);
   it caps at that on desktop and scales down proportionally on smaller screens. */
.market-embed {
  max-width:820px; margin-inline:auto; padding:8px;
  border:1px solid rgba(20,33,61,.12); border-radius:var(--radius);
  background:var(--white); box-shadow:var(--shadow-sm);
}
/* Holds the fixed-size chart and reserves a 4:3 box; JS scales the iframe to fit. */
.market-frame {
  position:relative; width:100%; max-width:800px; margin-inline:auto;
  aspect-ratio:4 / 3; overflow:hidden;
}
.market-frame iframe {
  position:absolute; top:0; left:0; width:800px; height:600px; border:0;
  transform-origin:top left;
}
.market-source {
  text-align:center; color:var(--muted); font-size:.82rem; margin-top:.9rem;
}
.market-cta { text-align:center; margin-top:2rem; }

/* =====================================================================
   VALUATION BAND
   ===================================================================== */
.valuation-inner {
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5rem);
  align-items:start;
}
.valuation-head { max-width:42ch; }
.valuation-lead { color:rgba(244,241,234,.85); margin-top:1.2rem; }

/* ---------- FORMS (shared) ---------- */
.form { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.2rem; }
.field { display:flex; flex-direction:column; gap:.45rem; }
.field-full { grid-column:1 / -1; }
.field label {
  font-family:var(--font-head); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:600; color:inherit; opacity:.92;
}
.field .req { color:var(--gold); }
.field input, .field textarea {
  font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:var(--cream); border:1px solid rgba(20,33,61,.18);
  border-radius:4px; padding:.75rem .85rem; width:100%;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.band .field input, .band .field textarea {
  background:rgba(244,241,234,.96);
}
.field input:focus, .field textarea:focus {
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,164,92,.25);
}
.field textarea { resize:vertical; }
.form-foot { display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; } /* spam honeypot — keep off-screen */
.footer-credit { font-size:.72rem; margin-top:.5rem; }
.footer-credit a { color:var(--gold); text-decoration:underline; }
.form-status { font-style:italic; color:inherit; opacity:.9; }
.form-fallback { font-size:.95rem; opacity:.85; margin-top:.2rem; }
.form-fallback a { color:var(--gold); }
.contact-form .form-fallback a { color:var(--navy); border-bottom:1px solid var(--gold); text-decoration:none; }

/* =====================================================================
   REVIEWS
   ===================================================================== */
.reviews { background:var(--white); }
.reviews-list { list-style:none; padding:0; display:grid; gap:1.5rem;
  grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); }
.review-card {
  background:var(--cream); border-radius:var(--radius);
  padding:clamp(2rem,4vw,3rem); border-left:3px solid var(--gold);
  position:relative;
}
.review-card::before {
  content:"\201C"; position:absolute; top:-.1em; right:.4rem;
  font-family:Georgia,serif; font-size:6rem; color:rgba(201,164,92,.25); line-height:1;
}
.stars { color:var(--gold); font-size:1.05rem; letter-spacing:.18em; margin-bottom:1.2rem; }
.review-quote {
  font-family:var(--font-body); font-style:italic; font-size:1.2rem;
  line-height:1.6; color:var(--navy); max-width:54ch;
}
.review-author {
  font-family:var(--font-head); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:600; color:var(--ink); margin-top:1.4rem;
}
.review-role { color:var(--muted); font-weight:400; letter-spacing:.08em; }
.reviews-cta { margin-top:2.5rem; }

/* =====================================================================
   CONTACT
   ===================================================================== */
.contact { background:var(--cream); }
.contact-grid {
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(2.5rem,6vw,5rem);
  align-items:start;
}
.contact-blurb { color:var(--muted); margin:1.2rem 0 2rem; max-width:40ch; }
.contact-list { list-style:none; padding:0; display:grid; gap:1.4rem; }
.contact-label {
  display:block; font-family:var(--font-head); font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
  font-weight:600; margin-bottom:.35rem;
}
.contact-value {
  font-family:var(--font-head); font-size:1.25rem; letter-spacing:.02em;
  color:var(--navy); text-decoration:none; font-weight:400;
  border-bottom:1px solid var(--gold);
}
.contact-value:hover { color:var(--gold); }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer { background:var(--navy); color:var(--cream); padding-block:3rem; }
.footer-inner {
  display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap;
  align-items:flex-start;
}
.footer-name {
  display:block; font-family:var(--font-head); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; font-size:1.1rem;
}
.footer-title {
  font-family:var(--font-head); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); font-weight:600;
}
.footer-meta { max-width:46ch; text-align:right; }
.eho {
  display:inline-flex; align-items:center; gap:.5rem; color:var(--cream);
  font-family:var(--font-head); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:600;
}
/* Opacity bumped to .88 so cream-on-navy fine print clears WCAG AA at this size. */
.footer-fine { font-size:.82rem; color:rgba(244,241,234,.88); line-height:1.6; margin-top:.8rem; }
.footer-copy { font-size:.82rem; color:rgba(244,241,234,.88); margin-top:.6rem; }

/* =====================================================================
   AREA PAGES (niwot.html, boulder.html, lyons.html, longmont.html)
   ===================================================================== */
.area-hero {
  position:relative; min-height:46vh; display:grid; align-items:end;
  background:var(--navy); color:var(--cream); overflow:hidden;
}
.area-hero-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.area-hero::before {
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(20,33,61,.85) 0%, rgba(20,33,61,.32) 55%, rgba(20,33,61,.15) 100%);
}
.area-hero-inner { position:relative; z-index:2; width:100%; padding-block:clamp(2.5rem,6vw,4rem); }
.area-back {
  display:inline-block; margin-bottom:1.1rem; text-decoration:none;
  font-family:var(--font-head); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; color:rgba(244,241,234,.85);
}
.area-back:hover { color:var(--gold); }
.area-title {
  font-family:var(--font-head); font-weight:300; line-height:1;
  font-size:clamp(2.6rem,7vw,4.5rem); letter-spacing:.04em; text-transform:uppercase;
  margin:.2rem 0 .5rem;
}
.area-tagline { font-family:var(--font-body); font-style:italic; font-size:clamp(1.1rem,2.4vw,1.5rem); color:var(--gold); }

.area-about-inner { max-width:70ch; }
.area-about-inner p { margin-bottom:1.2rem; }
.area-about-inner p:last-child { margin-bottom:0; }

.area-stats-section { padding-top:clamp(2.5rem,6vw,4rem); }
.area-stats {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.25rem;
}
.stat-tile {
  background:var(--white); border:1px solid rgba(20,33,61,.10); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:clamp(1.5rem,3vw,2.2rem); text-align:center;
}
.stat-num {
  display:block; font-family:var(--font-head); font-weight:500; color:var(--navy);
  font-size:clamp(1.9rem,4vw,2.6rem); letter-spacing:.01em; line-height:1;
}
.stat-label {
  display:block; margin-top:.7rem; color:var(--muted);
  font-family:var(--font-head); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
}
.area-source { margin-top:1.4rem; text-align:center; color:var(--muted); font-size:.8rem; }
.area-market { padding-top:0; }

/* Per-area market chart placeholder (until the Infosparks iframe is added) */
.chart-placeholder {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:.4rem; padding:clamp(2.5rem,6vw,4rem) 1.5rem;
}
.chart-placeholder .market-chart { width:min(380px,75%); height:auto; opacity:.9; margin-bottom:.6rem; }
.chart-placeholder-label {
  font-family:var(--font-head); text-transform:uppercase; letter-spacing:.12em;
  font-size:12.5px; font-weight:600; color:var(--navy);
}
.chart-placeholder-note { color:var(--muted); font-size:.92rem; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:900px) {
  .about-grid, .contact-grid { grid-template-columns:1fr; }
  .valuation-inner { grid-template-columns:1fr; }
  .about-portrait { max-width:420px; }
}

@media (max-width:800px) {
  .nav {
    position:absolute; top:var(--header-h); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--cream); border-bottom:1px solid rgba(20,33,61,.1);
    box-shadow:var(--shadow-md);
    max-height:0; overflow:hidden; opacity:0; visibility:hidden;
    transition:max-height .35s ease, opacity .25s ease, visibility .25s;
  }
  .nav.open { max-height:80vh; opacity:1; visibility:visible; }
  .nav-list { flex-direction:column; gap:0; }
  .nav-list li { border-top:1px solid rgba(20,33,61,.08); }
  .nav-list a { display:block; padding:1.05rem 1.25rem; }
  .nav-list a::after { display:none; }
  .nav-cta { margin:1rem 1.25rem 1.4rem; text-align:center; }
  .nav-toggle { display:flex; }
}

@media (max-width:640px) {
  .help-grid { grid-template-columns:1fr; }
  .form { grid-template-columns:1fr; }
  .footer-inner { flex-direction:column; }
  .footer-meta { text-align:left; }
  .hero-actions .btn { flex:1 1 auto; text-align:center; }
  .area-stats { grid-template-columns:1fr; }
}

/* =====================================================================
   AREAS I SERVE  (static layout — motion lives in the MOTION block below)
   ===================================================================== */
.areas-grid {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1.25rem;
}
.area-card {
  position:relative; display:block; aspect-ratio:3/4;
  border-radius:var(--radius); overflow:hidden; text-decoration:none;
  /* navy/gold gradient placeholder, consistent with .hero-media etc. */
  background:
    radial-gradient(120% 120% at 80% 0%, rgba(201,164,92,.30), transparent 55%),
    linear-gradient(150deg, var(--navy) 0%, var(--navy-2) 100%);
  box-shadow:var(--shadow-sm);
}
/* photo fills the card; gradient above shows through only if it fails to load */
.area-photo {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; transition:transform .5s ease;
}
.area-card:hover .area-photo,
.area-card:focus-visible .area-photo { transform:scale(1.05); }
/* permanent bottom scrim so the area name stays readable over any photo */
.area-card::after {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,33,61,0) 42%, rgba(20,33,61,.78) 100%);
}
.area-name {
  position:absolute; left:1.1rem; bottom:1.1rem; z-index:3;
  font-family:var(--font-head); font-weight:400; font-size:1.35rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--cream);
}
.area-overlay {
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, rgba(20,33,61,.10) 0%, rgba(20,33,61,.78) 100%);
  opacity:0; transition:opacity .35s ease;
}
.area-explore {
  font-family:var(--font-head); font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; font-weight:600; color:var(--gold);
  border:1px solid var(--gold); padding:.6rem 1.1rem; border-radius:var(--radius);
  transform:translateY(8px); transition:transform .35s ease;
}
.area-card:hover .area-overlay,
.area-card:focus-visible .area-overlay { opacity:1; }
.area-card:hover .area-explore,
.area-card:focus-visible .area-explore { transform:translateY(0); }

/* =====================================================================
   FEATURED LISTINGS — CAROUSEL
   Base styles (no motion). .is-carousel is added by JS only when 2+ slides.
   With a single slide the track behaves like the original single card.
   ===================================================================== */
.carousel { position:relative; }
.carousel-viewport { overflow:hidden; }
.carousel-track {
  display:grid; grid-auto-flow:column;
  grid-auto-columns:minmax(320px, 1fr);
  gap:1.75rem;
}
/* Single-slide / no-JS fallback: one centered card, capped width like a grid cell */
.carousel:not(.is-carousel) .carousel-track {
  grid-auto-columns:minmax(0, 1fr);
}
/* When carousel is active, each slide fills the viewport and we slide via transform */
.carousel.is-carousel .carousel-track {
  grid-auto-columns:100%;
  gap:0;
  transform:translateX(calc(var(--slide-index, 0) * -100%));
}
.carousel.is-carousel .listing-card { margin-inline:auto; max-width:520px; }

.carousel-arrow {
  position:absolute; top:38%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:50%;
  background:var(--cream); border:1px solid rgba(20,33,61,.18);
  color:var(--navy); font-size:1.6rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm);
}
.carousel-arrow:hover { background:var(--navy); color:var(--cream); border-color:var(--navy); }
.carousel-prev { left:6px; }
.carousel-next { right:6px; }
.carousel-arrow[hidden] { display:none; }

.carousel-dots {
  display:flex; justify-content:center; gap:.6rem; margin-top:1.6rem;
}
.carousel-dots[hidden] { display:none; }
.carousel-dot {
  width:9px; height:9px; padding:0; border-radius:50%;
  background:rgba(20,33,61,.22); border:0;
}
.carousel-dot[aria-selected="true"] { background:var(--gold); }

/* ---------- Listing card hover overlay + image zoom ---------- */
.listing-overlay {
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, rgba(20,33,61,.05) 0%, rgba(20,33,61,.55) 100%);
  opacity:0; transition:opacity .35s ease;
}
.listing-overlay-btn {
  font-family:var(--font-head); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:600; color:var(--navy);
  background:var(--gold); padding:.7rem 1.3rem; border-radius:var(--radius);
}
/* Overlay is enhancement only; the real .listing-link below remains keyboard-reachable */
.listing-card:hover .listing-overlay,
.listing-card:focus-within .listing-overlay { opacity:1; }

/* =====================================================================
   MOTION — ALL gated under prefers-reduced-motion: no-preference.
   When reduced motion is set, NONE of this applies, so .reveal / hero
   text / scroll cue stay fully visible & static.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* ---------- Hero: Ken-Burns drift ---------- */
  .hero-media {
    animation:kenburns 22s ease-in-out alternate infinite;
    transform-origin:60% 40%;
    will-change:transform;
  }
  @keyframes kenburns {
    from { transform:scale(1) translate3d(0,0,0); }
    to   { transform:scale(1.08) translate3d(-1.5%, -1%, 0); }
  }

  /* ---------- Hero: staggered text load-in ---------- */
  .hero-anim {
    opacity:0; transform:translateY(14px);
    transition:opacity .7s ease, transform .7s ease;
  }
  body.loaded .hero-anim { opacity:1; transform:none; }
  body.loaded .hero-anim:nth-child(1) { transition-delay:.05s; }
  body.loaded .hero-anim:nth-child(2) { transition-delay:.18s; }
  body.loaded .hero-anim:nth-child(3) { transition-delay:.31s; }
  body.loaded .hero-anim:nth-child(4) { transition-delay:.44s; }
  body.loaded .hero-anim:nth-child(5) { transition-delay:.57s; }

  /* ---------- Scroll cue ---------- */
  .scroll-cue { animation:cue-bob 2.2s ease-in-out infinite; }
  @keyframes cue-bob {
    0%,100% { transform:translate(-50%, 0); }
    50%     { transform:translate(-50%, 8px); }
  }
  /* hidden once user scrolls (body.scrolled-cue set in JS) */
  body.scrolled-cue .scroll-cue { opacity:0; pointer-events:none; }

  /* ---------- Scroll-reveal ---------- */
  .reveal {
    opacity:0; transform:translateY(18px);
    transition:opacity .6s ease, transform .6s ease;
    transition-delay:var(--reveal-delay, 0s);
  }
  .reveal.in-view { opacity:1; transform:none; }

  /* ---------- Listing image zoom on hover ---------- */
  .listing-media { transition:transform .5s ease; }
  .listing-card:hover .listing-media,
  .listing-card:focus-within .listing-media { transform:scale(1.04); }

  /* ---------- Carousel slide transition ---------- */
  .carousel.is-carousel .carousel-track { transition:transform .5s ease; }
}

/* =====================================================================
   SCROLL CUE (static layout — visible & usable with motion off)
   ===================================================================== */
.scroll-cue {
  position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%);
  z-index:3; display:flex; flex-direction:column; align-items:center; gap:.5rem;
  text-decoration:none; color:var(--cream); opacity:.85;
  transition:opacity .4s ease;
}
.scroll-cue:hover { opacity:1; }
.scroll-cue-label {
  font-family:var(--font-head); font-size:9.5px; letter-spacing:.28em;
  text-transform:uppercase; font-weight:600; color:var(--gold);
}
.scroll-cue-chevron {
  width:14px; height:14px; border-right:2px solid var(--cream);
  border-bottom:2px solid var(--cream); transform:rotate(45deg);
}

/* =====================================================================
   STICKY HEADER — scrolled state
   ===================================================================== */
.site-header { transition:background .3s ease, box-shadow .3s ease, border-color .3s ease; }
.header-inner { transition:min-height .3s ease; }
.site-header.scrolled {
  background:rgba(244,241,234,.97);
  box-shadow:0 6px 24px -14px rgba(20,33,61,.45);
  border-bottom-color:rgba(20,33,61,.06);
}
.site-header.scrolled .header-inner { min-height:60px; }

/* =====================================================================
   AREAS — responsive
   ===================================================================== */
@media (max-width:780px) {
  .areas-grid { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:420px) {
  .areas-grid { grid-template-columns:1fr; }
  .area-card { aspect-ratio:16/9; }
}