/* =====================================================================
   NH Real Estate — "TERRA" design system  (v3, 2026)
   Warm land premium: forest ink, sand paper, gold light, big photography.
   Every colour, radius, shadow and motion curve is declared once here.
   ===================================================================== */

/* ----------------------------- 01 · Tokens ---------------------------- */
/*  "SIGNAL" — NH Real Estate visual identity.
 *
 *  Cool graphite and off-white, cut with one acid chartreuse. The rule that
 *  makes it work: chartreuse is a SURFACE, never body text on light. It
 *  appears as a button fill with near-black type on it, or as type on
 *  graphite. Where an accent is needed on a pale background we use
 *  --lime-ink (deep olive) or --steel. Steel blue is the calm second voice.
 *
 *  Type is two families only: Space Grotesk carries headlines and every
 *  figure (tabular numerals switched on), Inter carries prose and UI.
 */
:root {
  /* ---- Graphite (the base) ---- */
  --graphite-900: #0B1013;
  --graphite-800: #101619;
  --graphite-700: #172127;
  --graphite-600: #202E35;
  --graphite-500: #2C3D45;
  --graphite-400: #415660;

  /* ---- Surface (off-white) ---- */
  --surface-0:    #FFFFFF;
  --surface-1:    #F3F5F2;
  --surface-2:    #E8EBE6;
  --surface-3:    #D6DBD3;

  /* ---- Chartreuse (the signal) ---- */
  --lime:         #C6F04B;
  --lime-600:     #A9D62F;
  --lime-800:     #5C760E;   /* AA on #FFF and #F3F5F2: lime text on light cards */
  --lime-ink:     #2E4A73;   /* text accent on pale surfaces — steel, never olive.
                                 Chartreuse is a FILL only; as text it lives on graphite. */
  --lime-100:     #EDF9CE;

  /* ---- Steel blue (the second voice) ---- */
  --steel-700:    #2E4A73;
  --steel:        #4A6FA5;
  --steel-300:    #9DB6D8;
  --steel-100:    #E4EBF5;

  /* ---- Ink ---- */
  --ink:          #101619;
  --ink-2:        #4C5A60;
  --ink-3:        #525F65;   /* AA on #FFF, #F3F5F2, #E8EBE6 and #D6DBD3 */

  /* ---- Status ---- */
  --ok:           #2E6F8E;
  --err:          #B23A2C;

  /* ---- Lines ---- */
  --line:         rgba(16,22,25,.16);
  --line-soft:    rgba(16,22,25,.10);
  --line-hair:    rgba(16,22,25,.055);
  --line-light:   rgba(255,255,255,.18);

  /* ---- Type: two families, each with one job ---- */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "Space Grotesk", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Motion ---- */
  --ease:        cubic-bezier(.22,1,.36,1);
  --ease-soft:   cubic-bezier(.4,0,.2,1);
  --ease-back:   cubic-bezier(.34,1.56,.64,1);

  /* ---- Layout ---- */
  --maxw:   1320px;
  --gutter: clamp(20px, 5vw, 64px);

  /* ---- Geometry: data is square, photography is round ---- */
  --r-data: 3px;
  --r-sm:   6px;
  --r:      10px;
  --r-lg:   16px;
  --r-xl:   26px;
  --cut:    14px;

  /* ---- Shadows ---- */
  --sh-1: 0 1px 0 rgba(16,22,25,.04), 0 10px 22px -18px rgba(11,16,19,.5);
  --sh-2: 0 1px 0 rgba(16,22,25,.05), 0 26px 52px -32px rgba(11,16,19,.55);
  --sh-3: 0 40px 84px -44px rgba(11,16,19,.62);
  --sh-lime:  0 16px 38px -14px rgba(198,240,75,.6);
  --sh-steel: 0 16px 38px -16px rgba(74,111,165,.55);

  --header-h: 102px;

  /* ---- Aliases, so older markup and inline styles keep resolving ---- */
  --forest-900: var(--graphite-900);
  --forest-800: var(--graphite-800);
  --forest-700: var(--graphite-700);
  --forest-600: var(--graphite-600);
  --moss:       var(--steel);
  --clay-700:   var(--steel-700);
  --clay-600:   var(--steel-700);
  --clay:       var(--steel);
  --clay-300:   var(--steel-300);
  --clay-100:   var(--steel-100);
  --river-700:  var(--graphite-600);
  --river:      var(--steel-700);
  --river-300:  var(--steel-300);
  --river-100:  var(--steel-100);
  --ochre-700:  var(--steel-700);
  --ochre:      var(--lime);
  --ochre-300:  var(--lime);
  --ochre-100:  var(--lime-100);
  --paper-0:    var(--surface-0);
  --paper-1:    var(--surface-1);
  --paper-2:    var(--surface-2);
  --paper-3:    var(--surface-3);
  --sand:       var(--surface-1);
  --sand-2:     var(--surface-2);
  --sand-3:     var(--surface-3);
  --white:      var(--surface-0);
  --gold:       var(--lime);
  --gold-2:     var(--lime);
  --gold-3:     var(--lime-100);
  --ember:      var(--steel);
  --paper:      var(--surface-1);
  --ink-soft:   var(--graphite-800);
  --silver:     rgba(243,245,242,.58);
  --mist:       var(--surface-3);
  --radius:     var(--r);
  --shadow-card: var(--sh-1);
  --shadow-hi:   var(--sh-2);
  --ease-out:    var(--ease);
  --ease-in-out: var(--ease-soft);
  --ease-drawer: var(--ease);
  --sh-gold:     var(--sh-lime);
  --sh-clay:     var(--sh-steel);
  --sh-ochre:    var(--sh-lime);
}

/* ----------------------------- 02 · Reset ----------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  background: var(--sand);
  color: var(--ink);
  line-height: 1.62;
  font-size: 17px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }
::selection { background: var(--lime); color: var(--graphite-900); }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--steel); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--forest-800); color: var(--sand);
  padding: 14px 22px; border-radius: 0 0 var(--r-sm) 0; font-weight: 700;
}
.skip:focus { left: 0; }

/* Custom scrollbar (desktop only) */
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: var(--sand-2); }
  ::-webkit-scrollbar-thumb { background: var(--sand-3); border-radius: 99px; border: 3px solid var(--sand-2); }
  ::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
}

/* ----------------------------- 03 · Typography ------------------------ */
/*  Fraunces sets voice, Manrope carries prose, Space Mono carries data.
 *  Every figure on this site — price, APN, acreage, coordinate, section
 *  number — is monospaced, because "every total printed" is the promise. */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.032em;
  color: var(--graphite-900);
  text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.75rem); }
h2 { font-size: clamp(1.78rem, 3.5vw, 2.75rem); }
h3 { font-size: clamp(1.14rem, 1.9vw, 1.42rem); line-height: 1.22; letter-spacing: -.022em; }
h4 { font-size: 1rem; line-height: 1.3; letter-spacing: -.015em; }

.display {
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.045em;
}

/* Section index: "01 / LAND FOR SALE" — the plat-sheet marker. */
.eyebrow {
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--steel-700);
  display: inline-flex; align-items: center; gap: .75em;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px; background: currentColor; opacity: .7; flex: none;
}
.eyebrow--light { color: var(--lime); }
.eyebrow--river { color: var(--steel-700); }
.eyebrow--num::before { display: none; }
.eyebrow--num { gap: .6em; }
.eyebrow--num i { font-style: normal; color: var(--ink-3); }

.lede {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  color: var(--ink-2);
  max-width: 60ch;
  line-height: 1.65;
}
.lede--light { color: rgba(243,245,242,.8); }
.small { font-size: .85rem; line-height: 1.55; }
.muted { color: var(--ink-2); }
p + p { margin-top: 1em; }
.prose-block p + p, .letter p + p, .prose p + p { margin-top: clamp(14px, 1.4vw, 18px); }

/* Monospaced figure — used anywhere a number is a fact, not decoration. */
.fig, .figure-mono {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
/* Every figure on the site uses the display face with tabular numerals, so
   columns of prices and terms line up exactly. */
.lot-price strong, .lot-terms, .plan-monthly, .receipt-row span:last-child,
.receipt-total strong, .hero__stat .n, table.compare tbody td, [data-count] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Hand-drawn emphasis: a clay underline that sits behind the words. */
.hl { position: relative; white-space: nowrap; }
.hl::after {
  content: ""; position: absolute; left: -.06em; right: -.06em; bottom: .04em; height: .34em;
  background: var(--ochre-300); opacity: .5; z-index: -1;
  border-radius: 2px 6px 3px 8px;
}

/* ----------------------------- 04 · Layout ---------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(58px, 8.5vw, 128px); position: relative; }
.section--tight { padding-block: clamp(34px, 5vw, 62px); }
.center { text-align: center; }
.mt-2 { margin-top: 16px; } .mt-3 { margin-top: 26px; } .mt-4 { margin-top: 44px; }
.grid { display: grid; gap: clamp(24px, 4vw, 56px); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }

/* An uneven two-column split (text beside a form or image) that becomes one
   column once there is no longer room for both.

   These live here rather than in a style="" attribute on the page for a
   reason worth remembering: an inline style beats every rule in this file,
   media queries included. The contact page used to set its columns inline,
   so on a phone it stayed two columns and squeezed the form down to about
   119px wide -- the labels wrapped one word per line and the inputs were
   unusable. Layout belongs in here, where a breakpoint can reach it. */
.grid-2--split { grid-template-columns: 1fr 1.2fr; align-items: start; }

/* Two form fields side by side, stacking before either gets too narrow to
   type in comfortably. */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

@media (max-width: 880px) { .grid-2--split { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .field-row    { grid-template-columns: 1fr; } }

.full { grid-column: 1 / -1; }
.span2 { grid-column: span 2; }
.hp { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; width: 0; }

/* ---- Section colour blocking: the page has a rhythm, not one flat tone --- */
.section--paper  { background: var(--paper-1); }
.section--stone,
.section--sand   { background: var(--paper-2); }
.section--forest { background: var(--forest-900); color: rgba(243,245,242,.78); }
.section--forest h2, .section--forest h3, .section--forest h4 { color: #fff; }
.section--forest .lede { color: rgba(243,245,242,.74); }
.section--clay   { background: var(--clay-700); color: rgba(240,245,250,.82); }
.section--clay h2, .section--clay h3 { color: #fff; }
.section--clay .lede { color: rgba(240,245,250,.78); }
.section--river  { background: var(--river-700); color: rgba(238,243,249,.8); }
.section--river h2 { color: #fff; }

/* Hairline plat grid, laid over a coloured band. Purely decorative. */
.section--grid::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(to right, var(--line-hair) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-hair) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
}
.section--forest.section--grid::before, .section--clay.section--grid::before, .section--river.section--grid::before {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
}
.section > .wrap { position: relative; z-index: 1; }

/* Contour lines — a topographic drawing that sits behind a section. */
.contour {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .5; overflow: hidden;
}
.contour svg { position: absolute; width: 140%; height: auto; left: -20%; }
.contour--tr svg { top: -10%; }
.contour--bl svg { bottom: -18%; transform: scaleY(-1); }

/* Corner ticks — the survey crosshair that marks an important block. */
.ticked { position: relative; }
.ticked::before, .ticked::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
  border-color: var(--clay); opacity: .8;
}
.ticked::before { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
.ticked::after  { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }

/* Section heading */
.s-head {
  display: flex; flex-wrap: wrap; gap: 20px 40px;
  align-items: flex-end; justify-content: space-between;
  margin-bottom: clamp(30px, 4vw, 54px);
}
.s-head > :first-child { max-width: 44ch; }
.s-head .lede { max-width: 46ch; }
.s-head h2 + .lede { margin-top: 14px; }
.s-head .eyebrow + h2 { margin-top: 16px; }

.rule { height: 1px; background: var(--line); border: 0; }

/* A dashed plat divider between major blocks. */
.divider-plat {
  height: 1px; border: 0; margin: 0;
  background: repeating-linear-gradient(90deg, var(--paper-3) 0 10px, transparent 10px 20px);
}

/* ----------------------------- 05 · Buttons --------------------------- */
/*  Not a pill. A survey-marker: square, with one corner cut away and a
 *  rule drawn under the label. The cut corner is the brand's signature
 *  shape and repeats on badges, plates and the guarantee stamp. */
.btn {
  --bg: var(--ochre); --fg: #0E1316; --bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .65em;
  padding: 1em 1.75em; min-height: 54px;
  background: var(--bg); color: var(--fg);
  border: 1.5px solid var(--bd);
  border-radius: 2px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
  font-family: var(--font-body);
  font-weight: 800; font-size: .9rem; letter-spacing: .015em;
  position: relative; overflow: hidden; isolation: isolate;
  text-align: center;
  transition: transform .25s var(--ease), box-shadow .3s var(--ease),
              background-color .25s var(--ease-soft), color .25s var(--ease-soft), border-color .25s var(--ease-soft);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 22%, rgba(255,255,255,.5) 48%, transparent 74%);
  transform: translateX(-120%);
  transition: transform .75s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-3px); box-shadow: var(--sh-ochre); }
  .btn:hover::before { transform: translateX(120%); }
  .btn:hover .arrow { transform: translateX(4px); }
}
.btn:active { transform: translateY(-1px) scale(.99); }
.btn .arrow { transition: transform .28s var(--ease); display: inline-block; }

.btn--clay  { --bg: var(--clay); --fg: #F2F6FA; }
.btn--clay:hover { box-shadow: var(--sh-clay); }
.btn--dark  { --bg: var(--forest-800); --fg: var(--paper-0); }
.btn--dark:hover { box-shadow: 0 16px 38px -16px rgba(11,16,19,.75); }
.btn--ghost { --bg: transparent; --fg: var(--forest-900); --bd: var(--line); }
.btn--ghost:hover { --bg: var(--forest-800); --fg: var(--paper-0); --bd: var(--forest-800); box-shadow: 0 16px 38px -18px rgba(11,16,19,.6); }
.btn--light { --bg: var(--paper-0); --fg: var(--forest-900); }
.btn--outline-light { --bg: transparent; --fg: #fff; --bd: var(--line-light); }
.btn--outline-light:hover { --bg: rgba(255,255,255,.12); --bd: rgba(255,255,255,.42); box-shadow: none; }
.btn--danger { --bg: var(--err); --fg: #fff; }
.btn--block { display: flex; width: 100%; }
.btn--sm { min-height: 42px; padding: .6em 1.1em; font-size: .82rem; --cut: 9px; }
.btn--lg { min-height: 64px; padding: 1.15em 2.3em; font-size: 1.02rem; --cut: 18px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
/* the one hero CTA gets the full treatment */
.btn--hero {
  --bg: var(--ochre); --fg: #0E1316; --cut: 20px;
  min-height: 68px; padding: 1.15em 2.6em; font-size: 1.06rem; letter-spacing: .01em;
  box-shadow: 0 20px 44px -18px rgba(198,240,75,.75), inset 0 0 0 1px rgba(255,255,255,.28);
}
.btn--hero:hover { box-shadow: 0 26px 56px -18px rgba(198,240,75,.9), inset 0 0 0 1px rgba(255,255,255,.4); }

.link {
  color: var(--forest-700); font-weight: 700;
  background-image: linear-gradient(var(--steel), var(--steel));
  background-size: 100% 1.5px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .3s var(--ease), color .2s;
  padding-bottom: 1px; cursor: pointer;
}
.link:hover { color: var(--steel-700); }

/* ----------------------------- 06 · Motion ---------------------------- */
.reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay: calc(var(--d, 0) * 95ms);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
.reveal--left  { transform: translate3d(-34px, 0, 0); }
.reveal--right { transform: translate3d(34px, 0, 0); }
.reveal--zoom  { transform: scale(.94); }

/* image mask wipe */
.wipe { clip-path: inset(0 0 100% 0); transition: clip-path 1.05s var(--ease); }
.wipe.in { clip-path: inset(0 0 0 0); }

@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes pulseRing { 0% { transform: scale(.8); opacity: .8; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes shimmer { to { background-position: 200% 0; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ----------------------------- 07 · Header ---------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 120;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background-color .45s var(--ease-soft), box-shadow .45s var(--ease-soft), height .35s var(--ease-soft), backdrop-filter .4s;
}
.site-header .wrap { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 36px); }
.site-header::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(16,22,25,.62), rgba(16,22,25,0));
  opacity: 1; transition: opacity .4s var(--ease-soft);
}
body.is-scrolled .site-header {
  height: 82px;
  background: rgba(243,245,242,.9);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  box-shadow: 0 1px 0 var(--line), 0 14px 34px -26px rgba(16,22,25,.6);
}
body.is-scrolled .site-header::after { opacity: 0; }

.brand { flex: none; display: flex; align-items: center; }
.brand img {
  height: 80px; width: auto; max-width: 220px; object-fit: contain;
  transition: height .35s var(--ease-soft), filter .45s var(--ease-soft), transform .45s var(--ease);
}
@media (hover: hover) { .brand:hover img { transform: scale(1.04); } }
/* The mark is white artwork, so on the light scrolled header we recolour it to forest green. */
body.is-scrolled .brand img {
  height: 66px;
  /* the mark is white artwork; knock it back to graphite on the pale header */
  filter: brightness(0) saturate(100%) opacity(.9);
}
@media (max-width: 1240px) { .brand img { height: 68px; } body.is-scrolled .brand img { height: 58px; } }
@media (max-width: 720px)  { .brand img { height: 56px; } body.is-scrolled .brand img { height: 50px; } }

/* Nav */
.nav { display: flex; align-items: center; gap: clamp(4px, 1.1vw, 14px); margin-left: auto; }
.nav > a, .has-sub > a {
  position: relative;
  padding: 10px 12px; border-radius: 999px;
  font-size: .93rem; font-weight: 600; color: rgba(255,255,255,.9);
  white-space: nowrap;
  transition: color .25s, background-color .25s;
}
body.is-scrolled .nav > a, body.is-scrolled .has-sub > a { color: var(--forest-900); }
.nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px;
  background: var(--gold-2); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); }
.nav a.active { color: #fff; }
body.is-scrolled .nav a.active { color: var(--forest-700); }

/* Submenu */
.has-sub { position: relative; }
.has-sub > a { padding-right: 26px; }
.has-sub > a .caret {
  position: absolute; right: 10px; top: 50%; margin-top: -3px;
  width: 9px; height: 6px; opacity: .55; pointer-events: none;
  transition: transform .35s var(--ease), opacity .25s;
}
.has-sub:hover > a .caret, .has-sub:focus-within > a .caret { transform: rotate(180deg); opacity: 1; }
/* the underline animation must not run under the caret */
.has-sub > a::after { right: 26px; }
.submenu {
  position: absolute; top: calc(100% + 10px); left: 50%;
  min-width: 260px; padding: 12px;
  background: var(--white); border: 1px solid var(--line-soft);
  border-radius: var(--r); box-shadow: var(--sh-2);
  display: grid; gap: 2px;
  opacity: 0; visibility: hidden;
  transform: translate(-50%, 10px) scale(.98);
  transform-origin: top center;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.has-sub:hover .submenu, .has-sub:focus-within .submenu { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); }
.submenu a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 14px; border-radius: 12px;
  font-size: .92rem; font-weight: 600; color: var(--forest-900);
  transition: background-color .2s, color .2s, padding-left .25s var(--ease);
}
.submenu a:hover { background: var(--sand-2); padding-left: 20px; color: var(--forest-700); }
.submenu a small {
  font-size: .74rem; font-weight: 700; color: var(--lime-ink);
  background: var(--gold-3); padding: 3px 9px; border-radius: 999px;
}

/* Header CTA */
.header-cta { display: flex; align-items: center; gap: 12px; flex: none; }
.header-phone {
  font-weight: 700; font-size: .92rem; color: #fff; white-space: nowrap;
  padding: 8px 4px; transition: color .25s;
}
body.is-scrolled .header-phone { color: var(--forest-900); }
.header-phone:hover { color: var(--gold-2); }
body.is-scrolled .header-phone:hover { color: var(--steel-700); }
.header-cta .btn { min-height: 46px; padding: .7em 1.4em; font-size: .88rem; }
.header-cta .btn--head { --bg: var(--gold); --fg: #0E1316; }
body.is-scrolled .header-cta .btn--head { --bg: var(--forest-800); --fg: var(--sand); }
body.is-scrolled .header-cta .btn--head:hover { box-shadow: 0 16px 38px -18px rgba(16,22,25,.75); }

/* Burger */
.nav-toggle {
  display: none; width: 46px; height: 46px; border-radius: 999px;
  border: 1.5px solid var(--line-light);
  position: relative; flex: none;
  transition: background-color .3s, border-color .3s;
}
.nav-toggle span {
  position: absolute; left: 13px; width: 20px; height: 1.8px; border-radius: 2px;
  background: #fff; transition: transform .38s var(--ease), opacity .2s, background-color .3s;
}
.nav-toggle span:nth-child(1) { top: 17px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 27px; }
body.is-scrolled .nav-toggle { border-color: var(--line); }
body.is-scrolled .nav-toggle span { background: var(--forest-900); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  position: fixed; inset: 0 0 0 auto; width: min(420px, 100%); z-index: 115;
  background: var(--forest-900); color: var(--sand);
  padding: calc(var(--header-h) + 26px) clamp(24px, 7vw, 44px) 40px;
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .55s var(--ease);
  box-shadow: -30px 0 80px -40px rgba(0,0,0,.8);
}
.mobile-nav::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(900px 420px at 110% 0%, rgba(198,240,75,.28), transparent 60%);
}
.mobile-nav.open { transform: none; }
.mobile-nav a {
  position: relative; z-index: 1;
  padding: 15px 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 400;
  color: rgba(243,245,242,.9);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: color .25s, padding-left .3s var(--ease);
  opacity: 0; transform: translateX(22px);
}
.mobile-nav.open a { animation: fadeUp .5s var(--ease) forwards; }
.mobile-nav.open a:nth-child(1) { animation-delay: .06s } .mobile-nav.open a:nth-child(2) { animation-delay: .1s }
.mobile-nav.open a:nth-child(3) { animation-delay: .14s } .mobile-nav.open a:nth-child(4) { animation-delay: .18s }
.mobile-nav.open a:nth-child(5) { animation-delay: .22s } .mobile-nav.open a:nth-child(6) { animation-delay: .26s }
.mobile-nav.open a:nth-child(7) { animation-delay: .3s }  .mobile-nav.open a:nth-child(8) { animation-delay: .34s }
.mobile-nav.open a:nth-child(9) { animation-delay: .38s } .mobile-nav.open a:nth-child(10){ animation-delay: .42s }
.mobile-nav a:hover { color: var(--gold-2); padding-left: 10px; }
.nav-scrim {
  position: fixed; inset: 0; z-index: 110; background: rgba(16,22,25,.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s;
}
.nav-scrim.on { opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }

/* ----------------------------- 08 · Home hero ------------------------- */
/*  Deep, warm and high-contrast. The video sits under a forest-to-black
 *  wash with a clay light-leak from the left and an ochre one top-right,
 *  so white type clears 12:1 anywhere on the plate. One CTA only. */
.hero {
  position: relative; isolation: isolate;
  min-height: min(106svh, 980px);
  display: flex; align-items: center;
  padding-block: calc(var(--header-h) + 64px) 104px;
  color: #fff;
  overflow: hidden;
  background: var(--forest-900);
}
.hero__media {
  position: absolute; inset: 0; z-index: -4;
  /* A 24px-wide copy of the first frame, inlined so it costs no request and
     paints with the stylesheet. It sits under the poster, which sits under the
     video, so the hero is never an empty box while either is still arriving. */
  background: var(--forest-900) url('data:image/webp;base64,UklGRoYAAABXRUJQVlA4IHoAAAAQBACdASoYAA4APrVInkmnJCKhMAgA4BaJQBYdhDe+Wol2SLYKnNQCAAD+7d9rqpbisqhdHwD238zJHGfOlIhF9uTZmVm4+I8vqlV7TRtL0/1M7iqLwVGs/Du32bTalrgSF06CNGN6JCTHkxrAH1MkB7T5oiruJswAAA==') center / cover no-repeat;
}
.hero__media video, .hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
  filter: saturate(.82) contrast(1.06);
}
/* 1 · the readability wash */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -3;
  background:
    linear-gradient(180deg, rgba(11,16,19,.86) 0%, rgba(11,16,19,.52) 34%, rgba(11,16,19,.94) 100%),
    linear-gradient(100deg, rgba(11,16,19,.94) 0%, rgba(11,16,19,.62) 42%, rgba(11,16,19,.12) 78%);
}
/* 2 · the colour — clay from the lower left, ochre from the upper right */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(70% 90% at 4% 96%, rgba(74,111,165,.52), transparent 62%),
    radial-gradient(56% 64% at 92% 4%, rgba(198,240,75,.36), transparent 64%),
    radial-gradient(70% 70% at 78% 92%, rgba(46,74,115,.28), transparent 66%);
  mix-blend-mode: screen;
}
.hero__grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .3; mix-blend-mode: overlay;
}
.hero__inner { position: relative; z-index: 2; max-width: 62rem; }
.hero h1 { color: #fff; max-width: 15ch; text-shadow: 0 2px 30px rgba(11,16,19,.5); }
.hero h1 em {
  font-style: normal; color: var(--ochre-300);
  display: inline-block; position: relative;
}
.hero .lede { color: rgba(255,255,255,.88); margin-top: 24px; max-width: 46ch; font-size: clamp(1.05rem,1.6vw,1.25rem); }
.hero .eyebrow { color: var(--ochre-300); }

/* Hero CTA row: ONE primary button, one quiet text link beside it. */
.hero-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px;
  margin-top: 34px;
}
.hero-cta__note {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-size: .76rem; letter-spacing: .04em;
  color: rgba(255,255,255,.66);
}
.hero-cta__note b { color: var(--ochre-300); font-weight: 700; }
.hero-cta .link-light {
  color: rgba(255,255,255,.82); font-weight: 700; font-size: .92rem;
  border-bottom: 1.5px solid rgba(255,255,255,.32); padding-bottom: 3px;
  transition: color .25s, border-color .25s;
}
.hero-cta .link-light:hover { color: var(--ochre-300); border-color: var(--ochre-300); }

/* Secondary: the quick filter. Deliberately quieter than the CTA. */
.hero-search {
  margin-top: 30px;
  display: grid; gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  padding: 8px;
  background: rgba(11,16,19,.44);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-sm);
  max-width: 880px;
}
.hero-search::before {
  content: "Or narrow it down first";
  position: absolute; margin-top: -30px;
  font-family: var(--font-display); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
}
.hero-search { position: relative; }
.hero-search select {
  -webkit-appearance: none; appearance: none;
  min-height: 48px; padding: 0 38px 0 16px;
  background: rgba(255,255,255,.07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 15px center;
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-data);
  color: #fff; font-weight: 700; font-size: .88rem;
  transition: background-color .25s, border-color .25s;
  cursor: pointer;
}
.hero-search select:hover { background-color: rgba(255,255,255,.16); border-color: rgba(255,255,255,.32); }
.hero-search select option { color: var(--ink); background: var(--paper-0); }
.hero-search .btn {
  white-space: nowrap; min-height: 48px; padding: .7em 1.3em; font-size: .85rem;
  --bg: rgba(255,255,255,.14); --fg: #fff; --bd: rgba(255,255,255,.28); --cut: 8px;
}
.hero-search .btn:hover { --bg: rgba(255,255,255,.26); box-shadow: none; }

/* The proof strip — a survey data row, not five identical boxes. */
.hero__stats {
  margin-top: 40px;
  display: flex; flex-wrap: wrap; align-items: stretch;
  gap: 0; max-width: 940px;
  border-top: 1px solid rgba(255,255,255,.2);
  border-bottom: 1px solid rgba(255,255,255,.2);
}
.hero__stat {
  flex: 1 1 130px; padding: 18px 22px 18px 0;
  position: relative;
}
.hero__stat + .hero__stat { padding-left: 22px; }
.hero__stat + .hero__stat::before {
  content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 1px;
  background: rgba(255,255,255,.18);
}
.hero__stat .n {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.32rem, 2.2vw, 1.85rem);
  line-height: 1; color: var(--ochre-300); letter-spacing: -.03em;
}
.hero__stat .l {
  margin-top: 9px; font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 700; color: rgba(255,255,255,.72); font-family: var(--font-body);
}

.scroll-hint {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
  color: rgba(255,255,255,.52);
}
.scroll-hint .line {
  width: 1px; height: 44px; background: rgba(255,255,255,.2);
  position: relative; overflow: hidden;
}
.scroll-hint .line::after {
  content: ""; position: absolute; inset: 0; background: var(--ochre);
  animation: scrollLine 2.2s var(--ease) infinite;
}
@keyframes scrollLine { 0% { transform: translateY(-100%); } 60%,100% { transform: translateY(100%); } }

/* ----------------------------- 09 · Page banner (interior) ------------ */
.page-hero {
  position: relative; isolation: isolate;
  display: flex; align-items: flex-end;
  min-height: clamp(360px, 46vw, 560px);
  padding: calc(var(--header-h) + 64px) 0 clamp(40px, 5vw, 76px);
  color: #fff;
  overflow: hidden;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  background: var(--forest-900);
}
.page-hero__media { position: absolute; inset: -8% 0 0; z-index: -3; }
.page-hero__media img {
  width: 100%; height: 116%; object-fit: cover;
  will-change: transform;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(11,16,19,.82) 0%, rgba(11,16,19,.34) 44%, rgba(11,16,19,.94) 100%),
    linear-gradient(96deg, rgba(11,16,19,.86) 0%, rgba(11,16,19,.3) 58%, transparent 82%);
}
.page-hero .wrap::before {
  content: ""; position: absolute; inset: -40% -30% -40% -40%; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 80% at 0% 100%, rgba(74,111,165,.42), transparent 62%);
  mix-blend-mode: screen;
}
.page-hero .hero__grain { z-index: -1; opacity: .3; }
.page-hero h1 { color: #fff; max-width: 18ch; }
.page-hero .lede { margin-top: 16px; max-width: 52ch; }
.page-hero .eyebrow { color: var(--gold-2); margin-bottom: 16px; }
.page-hero--slim { min-height: clamp(240px, 30vw, 360px); }
.page-hero--listing { min-height: clamp(280px, 34vw, 420px); }

/* Breadcrumbs */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 600; margin-bottom: 20px;
  color: rgba(255,255,255,.66);
}
.crumbs li { display: flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: "/"; opacity: .4; }
.crumbs a { transition: color .2s; }
.crumbs a:hover { color: var(--gold-2); }
.crumbs span { color: #fff; }

/* Banner stat strip that can sit under the title */
.banner-facts {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px;
}
.banner-facts span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: .84rem; font-weight: 700; color: #fff;
}
.banner-facts span b { color: var(--gold-2); font-weight: 800; }

/* ----------------------------- 10 · Listed on ------------------------- */
/*  Real platform logo files only (see /uploads/logos/README.txt).
 *  Until they are supplied this renders as plainly-labelled text — it must
 *  never imitate a logo it is not. */
.seen { display: grid; gap: 22px; justify-items: center; text-align: center; }
.seen > p {
  font-family: var(--font-display);
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
  color: rgba(243,245,242,.55);
}
.seen .logos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(22px, 4vw, 54px);
}
/* real logo files */
.logos--img img {
  height: 34px; width: auto; max-width: 156px; object-fit: contain; display: block;
  filter: brightness(0) invert(1); opacity: .7;
  transition: opacity .35s var(--ease), filter .35s var(--ease), transform .35s var(--ease);
}
.logos--img a:hover img, .logos--img span:hover img { opacity: 1; filter: none; transform: translateY(-2px); }
/* honest text fallback — no plate, no box, no fake mark */
.logos--text {
  font-family: var(--font-display); font-size: .86rem; font-weight: 700; letter-spacing: .02em;
}
.logos--text a, .logos--text span {
  color: rgba(243,245,242,.82);
  border-bottom: 1px solid rgba(243,245,242,.22); padding-bottom: 3px;
  transition: color .25s, border-color .25s;
}
.logos--text a:hover { color: var(--ochre-300); border-color: var(--ochre-300); }
.seen__note {
  font-family: var(--font-display); font-size: .66rem; letter-spacing: .1em;
  color: rgba(243,245,242,.38); text-transform: uppercase;
}

/* ----------------------------- 11 · Marquee band ---------------------- */
.band {
  background: var(--clay-700); color: #fff;
  padding-block: clamp(18px, 2.4vw, 26px);
  overflow: hidden; position: relative;
  border-block: 1px solid rgba(255,255,255,.12);
}
.band::before, .band::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 2; pointer-events: none;
}
.band::before { left: 0;  background: linear-gradient(90deg, var(--clay-700), transparent); }
.band::after  { right: 0; background: linear-gradient(270deg, var(--clay-700), transparent); }
.marquee { overflow: hidden; }
.marquee__track {
  display: flex; align-items: center; gap: clamp(24px, 3.6vw, 50px);
  width: max-content;
  animation: marquee 36s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span {
  display: inline-flex; align-items: center; gap: clamp(24px, 3.6vw, 50px);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(.86rem, 1.4vw, 1.06rem);
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  color: rgba(240,245,250,.94);
}
.marquee__track span::after {
  content: ""; width: 6px; height: 6px; background: var(--lime); flex: none;
  transform: rotate(45deg);
}

/* ----------------------------- 12 · Lot cards ------------------------- */
/*  A parcel card is a small document: photograph on top, then a squared
 *  data plate with the figures set in mono. Not a generic white card. */
.lots {
  display: grid; gap: clamp(18px, 2.2vw, 28px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
}
.lot {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper-0);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg) var(--r-lg) var(--r-data) var(--r-data);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .35s;
}
.lot::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 4;
  background: linear-gradient(90deg, var(--steel), var(--lime));
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
@media (hover: hover) {
  .lot:hover { transform: translateY(-6px); box-shadow: var(--sh-2); border-color: rgba(74,111,165,.36); }
  .lot:hover::after { transform: scaleX(1); }
  .lot:hover .lot-img { transform: scale(1.06); }
}
.lot > a:first-of-type { display: block; overflow: hidden; position: relative; }
.lot > a:first-of-type::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 54%, rgba(11,16,19,.5));
}
.lot-img {
  width: 100%; aspect-ratio: 16 / 10.5; object-fit: cover;
  transition: transform .8s var(--ease);
  background: var(--paper-3);
}
.badge {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  padding: 6px 12px;
  background: var(--clay); color: #fff;
  border-radius: 2px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
  font-family: var(--font-display);
  font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.badge--sold { background: var(--forest-900); color: var(--ochre-300); }
.lot-body { padding: clamp(18px, 2vw, 22px); display: flex; flex-direction: column; gap: 9px; flex: 1; }
.lot-body h3 { font-size: 1.18rem; letter-spacing: -.02em; }
.lot-body h3 a { transition: color .25s; }
.lot-body h3 a:hover { color: var(--clay); }
.lot-place { font-size: .88rem; color: var(--ink-2); line-height: 1.45; }
/* the figures plate */
.lot-price {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 6px; padding: 12px 14px;
  background: var(--paper-2); border-radius: var(--r-data);
  border-left: 3px solid var(--ochre);
}
.lot-price strong {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  color: var(--graphite-900); letter-spacing: -.05em; line-height: 1;
}
.lot-price strong span { font-size: .72rem; font-weight: 700; color: var(--ink-3); letter-spacing: 0; }
.lot-price > span {
  font-family: var(--font-display); font-size: .8rem; font-weight: 700;
  color: var(--steel-700); white-space: nowrap;
}
.lot-terms {
  font-family: var(--font-display); font-size: .78rem; font-weight: 500; color: var(--ink-3);
  letter-spacing: -.01em; padding-left: 14px;
}
.lot-tag {
  display: inline-flex; align-self: flex-start; gap: 8px;
  padding: 5px 10px; border-radius: var(--r-data);
  background: var(--river-100); color: var(--river-700);
  font-size: .72rem; font-weight: 800; letter-spacing: .03em;
}
.lot-body .btn { margin-top: auto; }
.lot--sold { opacity: .78; }
.lot--sold .lot-img { filter: grayscale(.85); }

/* ----------------------------- 13 · County / state cards -------------- */
.counties, .states {
  display: grid; gap: clamp(16px, 2vw, 26px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 272px), 1fr));
}
.county-card, .state-card {
  position: relative; display: block; isolation: isolate;
  aspect-ratio: 4 / 3.4;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--forest-800);
  box-shadow: var(--sh-1);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.county-card img, .state-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease), filter .5s;
  z-index: -2;
}
.county-card::after, .state-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(16,22,25,.1) 0%, rgba(16,22,25,.34) 46%, rgba(16,22,25,.92) 100%);
  transition: background .5s;
}
@media (hover: hover) {
  .county-card:hover, .state-card:hover { transform: translateY(-8px); box-shadow: var(--sh-3); }
  .county-card:hover img, .state-card:hover img { transform: scale(1.09); }
  .county-card:hover::after, .state-card:hover::after {
    background: linear-gradient(180deg, rgba(16,22,25,.18) 0%, rgba(44,61,69,.5) 46%, rgba(16,22,25,.95) 100%);
  }
}
.county-card .meta, .state-card .meta {
  position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(18px, 2vw, 26px);
  color: #fff;
}
.county-card .name, .state-card .name {
  font-family: var(--font-display); font-size: clamp(1.3rem, 2.1vw, 1.75rem);
  line-height: 1.08; letter-spacing: -.02em; color: #fff;
}
.county-card .sub, .state-card .sub {
  margin-top: 6px; font-size: .85rem; color: rgba(255,255,255,.74); line-height: 1.45;
}
.section--river .state-card, .section--forest .state-card { box-shadow: 0 20px 44px -26px rgba(0,0,0,.7); }
.county-card .count, .state-card .count {
  position: absolute; top: 16px; right: 16px;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; font-size: .74rem; font-weight: 800; letter-spacing: .04em;
}
.county-card .from {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  font-size: .82rem; font-weight: 800; color: var(--gold-2);
}
.county-card .go {
  position: absolute; right: 20px; bottom: 22px;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--gold); color: #0E1316;
  display: grid; place-items: center; font-size: 1.1rem; font-weight: 800;
  opacity: 0; transform: translateX(-8px) scale(.8);
  transition: opacity .4s var(--ease), transform .4s var(--ease-back);
}
@media (hover: hover) { .county-card:hover .go { opacity: 1; transform: none; } }

/* ----------------------------- 14 · Tiles ----------------------------- */
/*  Colour-coded by what the land is for, so the row reads as a palette
 *  rather than six identical white boxes. */
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 216px), 1fr)); }
.tile {
  --tint: var(--forest-700);
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
  min-height: 152px; padding: 20px;
  background: var(--tint); color: #fff;
  border-radius: var(--r-data) var(--r-lg) var(--r-data) var(--r-data);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.22), transparent 62%);
}
.tile::after {
  content: ""; position: absolute; right: -28px; bottom: -28px; width: 108px; height: 108px;
  border: 1.5px solid rgba(255,255,255,.26); border-radius: 50%;
  transition: transform .6s var(--ease);
}
.tile strong { font-family: var(--font-display); font-size: 1.16rem; font-weight: 500; letter-spacing: -.02em; color: #fff; }
.tile span {
  font-family: var(--font-display); font-size: .72rem; font-weight: 700;
  color: rgba(255,255,255,.76); letter-spacing: .04em;
}
@media (hover: hover) {
  .tile:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }
  .tile:hover::after { transform: scale(1.35) translate(-8px, -8px); }
}
/* the rotation of tints, applied in source order */
.tiles .tile:nth-child(6n+1) { --tint: var(--graphite-700); }
.tiles .tile:nth-child(6n+2) { --tint: var(--steel); }
.tiles .tile:nth-child(6n+3) { --tint: var(--graphite-600); }
/* one chartreuse tile per row of six — the accent earns its place by being rare */
.tiles .tile:nth-child(6n+4) { --tint: var(--lime); color: var(--graphite-900); }
.tiles .tile:nth-child(6n+4) strong { color: var(--graphite-900); }
.tiles .tile:nth-child(6n+4) span { color: rgba(11,16,19,.66); }
.tiles .tile:nth-child(6n+4)::before { background: radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.5), transparent 62%); }
.tiles .tile:nth-child(6n+4)::after { border-color: rgba(11,16,19,.22); }
.tiles .tile:nth-child(6n+5) { --tint: var(--steel-700); }
.tiles .tile:nth-child(6n+6) { --tint: var(--graphite-500); }

/* ----------------------------- 15 · Steps / timeline ------------------ */
/*  On the dark band the steps are plates with a big stamped mono numeral
 *  and a rule that runs between them, like stations on a survey line. */
.steps { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 238px), 1fr)); }
.step {
  position: relative; padding: clamp(22px, 2.4vw, 30px);
  background: var(--paper-0); border: 1px solid var(--line-soft);
  border-radius: var(--r-data) var(--r-lg) var(--r-data) var(--r-data);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
  overflow: hidden;
}
.step::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(var(--steel), var(--lime));
  transform: scaleY(0); transform-origin: top; transition: transform .6s var(--ease);
}
@media (hover: hover) { .step:hover { transform: translateY(-5px); box-shadow: var(--sh-2); } .step:hover::after { transform: scaleY(1); } }
.step .num {
  font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; line-height: 1;
  color: var(--steel-700); letter-spacing: -.05em; margin-bottom: 16px;
  display: inline-block; padding-bottom: 12px;
  border-bottom: 3px solid var(--lime);
}
.step h3 { margin-bottom: 10px; }
.step p { font-size: .92rem; color: var(--ink-2); }

/* steps sitting on a dark band */
.section--forest .step, .section--clay .step, .section--river .step {
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.section--forest .step h3, .section--clay .step h3, .section--river .step h3 { color: #fff; }
.section--forest .step p, .section--clay .step p, .section--river .step p { color: rgba(255,255,255,.74); }
.section--forest .step .num, .section--clay .step .num, .section--river .step .num { color: var(--ochre-300); border-bottom-color: rgba(198,240,75,.5); }

.timeline { display: grid; gap: 0; counter-reset: tl; }
.timeline li {
  position: relative; display: flex; gap: clamp(18px, 2.4vw, 32px);
  padding: 0 0 clamp(26px, 3vw, 40px) clamp(48px, 5vw, 66px);
}
.timeline li::before {
  counter-increment: tl; content: counter(tl, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  width: 42px; height: 42px; border-radius: var(--r-data);
  background: var(--forest-800); color: var(--ochre-300);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: .88rem; font-weight: 700;
  box-shadow: 0 0 0 5px var(--surface-1);
  z-index: 2;
}
.timeline li::after {
  content: ""; position: absolute; left: 20.5px; top: 42px; bottom: 0; width: 1px;
  background: repeating-linear-gradient(var(--paper-3) 0 5px, transparent 5px 10px);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::after { display: none; }
.timeline h3 { margin-bottom: 8px; }
.timeline p { color: var(--ink-2); font-size: .94rem; }
.section--stone .timeline li::before, .section--sand .timeline li::before { box-shadow: 0 0 0 5px var(--paper-2); }
.section--forest .timeline li::before { background: var(--ochre); color: var(--forest-900); box-shadow: 0 0 0 5px var(--forest-900); }
.section--forest .timeline h3 { color: #fff; }
.section--forest .timeline p { color: rgba(255,255,255,.74); }
.section--forest .timeline li::after { background: repeating-linear-gradient(rgba(255,255,255,.22) 0 5px, transparent 5px 10px); }

/* ----------------------------- 16 · Split / letter -------------------- */
.split { display: grid; gap: clamp(28px, 4vw, 64px); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: center; }
.split__media {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  aspect-ratio: 4 / 4.1;
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(198,240,75,.16), transparent 62%),
    linear-gradient(165deg, var(--forest-700), var(--forest-900));
  box-shadow: var(--sh-2);
}
.split__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }

/* The founder shot is a cut-out portrait. `contain` plus generous padding
   shows the whole frame — noticeably wider than the old `cover` crop —
   without stretching or altering the subject. */
.portrait--founder {
  object-fit: contain !important;
  object-position: center bottom;
  padding: clamp(22px, 3.2vw, 46px) clamp(26px, 4vw, 58px) 0;
  width: 100%; height: 100%;
}
.split__stamp {
  position: absolute; right: 18px; top: 18px; z-index: 2;
  padding: 10px 14px; border-radius: var(--r-data);
  background: rgba(11,16,19,.55); border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--font-display); font-size: .66rem; line-height: 1.35;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ochre-300);
  text-align: right;
}
.letter p { color: var(--ink-2); }
.letter h2 { color: var(--forest-900); }
.signature {
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; letter-spacing: -.02em; color: var(--steel-700);
  display: inline-block; margin-top: 8px;
}
.portrait { border-radius: var(--r-xl); overflow: hidden; }
.portrait--contain { object-fit: contain; }

/* ----------------------------- 17 · Callout / prose ------------------- */
.callout {
  padding: clamp(24px, 3vw, 36px);
  background: linear-gradient(150deg, var(--forest-800), var(--forest-900));
  color: var(--sand); border-radius: var(--r-lg);
  display: grid; gap: 18px;
  position: relative; overflow: hidden;
}
.callout::before {
  content: ""; position: absolute; inset: -40% -20% auto auto; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(198,240,75,.32), transparent 66%);
}
.callout strong { color: var(--gold-2); }
.callout p { position: relative; }
/* Long-form copy: headings need air above and a clear gap to the text that
   follows. Applies to the About letter, the policy pages, and any HTML the
   admin types into a listing description. */
.prose-block, .letter, .prose { color: var(--ink-2); }
.prose-block h2, .prose-block h3, .prose-block h4,
.letter h1, .letter h2, .letter h3, .letter h4,
.prose h2, .prose h3, .prose h4 {
  color: var(--forest-900);
  margin-top: clamp(38px, 4.4vw, 62px);
  margin-bottom: clamp(14px, 1.5vw, 20px);
  position: relative;
}
.prose-block h1, .letter h1, .prose h1 { margin-bottom: clamp(16px, 1.8vw, 22px); }
/* a short gold rule so each heading reads as a new chapter */
.letter h2::before, .prose-block h2::before, .prose h2::before {
  content: ""; position: absolute; left: 0; top: -22px;
  width: 54px; height: 2px; background: linear-gradient(90deg, var(--lime-600), transparent);
}
.prose-block > :first-child, .letter > :first-child, .prose > :first-child { margin-top: 0; }
.prose-block > :first-child::before, .letter > :first-child::before, .prose > :first-child::before { display: none; }
.prose-block p, .letter p, .prose p { margin-top: clamp(14px, 1.4vw, 18px); }
.prose-block p:first-of-type, .letter p:first-of-type { margin-top: clamp(12px, 1.2vw, 16px); }
.letter .signature { margin-top: 26px; }
.letter .btn, .prose-block .btn { margin-top: 6px; }
.prose-block ul { display: grid; gap: 10px; margin: 14px 0; }
.prose-block ul li { position: relative; padding-left: 26px; }
.prose-block ul li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
}
.prose-block a { color: var(--forest-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--steel); }
.ps {
  padding: clamp(24px, 3vw, 34px);
  background: var(--sand-2); border-left: 3px solid var(--gold); border-radius: 0 var(--r) var(--r) 0;
  display: grid; gap: 14px;
}

/* ----------------------------- 18 · Quotes / reviews ------------------ */
.quotes {
  --card-h: 410px;
  display: grid; gap: clamp(16px, 2vw, 26px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  /* Every row is exactly one card tall, so no review can stretch its row.
     A fixed track beats `1fr` here: `1fr` still measures the tallest item. */
  grid-auto-rows: var(--card-h);
  align-items: stretch;
}
.quotes--home { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
/* the filter wrappers on the reviews page must not break the stretch */
.quotes > div { display: flex; height: 100%; min-height: 0; }
.quotes > div > .quote { width: 100%; }
@media (max-width: 720px) { .quotes { --card-h: 380px; } }
.quote {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 14px;
  height: 100%; min-height: 0;
  padding: clamp(22px, 2.4vw, 30px);
  background: var(--paper-0);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-data) var(--r-lg) var(--r-lg) var(--r-data);
  border-left: 3px solid var(--ochre);
  box-shadow: var(--sh-1);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
  height: 100%;
}
/* a corner tick, not a serif quote mark — it belongs to this type system */
.quote::before {
  content: ""; position: absolute; top: 16px; right: 16px;
  width: 18px; height: 18px; pointer-events: none;
  border-top: 2px solid var(--lime-600); border-right: 2px solid var(--lime-600);
  opacity: .9;
}
@media (hover: hover) { .quote:hover { transform: translateY(-6px); box-shadow: var(--sh-2); border-color: rgba(198,240,75,.38); } }
.quote .stars { color: var(--lime-800); letter-spacing: .16em; font-size: 1rem; }
/* The quote takes the free space and clips at a fixed number of lines, so a
   500-word review and a four-word one produce the same card. */
.quote blockquote {
  font-size: .98rem; color: var(--ink-2); line-height: 1.66;
  flex: 1 1 auto; min-height: 0; position: relative;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--clamp, 6);
  overflow: hidden;
}
.quote.is-clipped blockquote::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3.4em;
  background: linear-gradient(to bottom, rgba(243,245,242,0) 0%, var(--paper-0) 62%, var(--paper-0) 100%);
  pointer-events: none;
}
.quote .more {
  align-self: flex-start; position: relative; z-index: 2;
  margin-top: -2px; padding: 4px 0;
  background: var(--paper-0);
  font-family: var(--font-display); font-size: .76rem; font-weight: 700; letter-spacing: .02em;
  color: var(--steel-700);
  display: none;
}
.quote.is-clipped .more { display: inline-flex; align-items: center; gap: 6px; }
.quote .more::after { content: "→"; transition: transform .25s var(--ease); }
.quote .more:hover::after { transform: translateX(3px); }
.quote--featured.is-clipped blockquote::after { background: linear-gradient(to bottom, rgba(243,245,242,0) 0%, var(--paper-0) 62%, var(--paper-0) 100%); }
.quote footer { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-soft); flex: none; }
.quote .stars, .quote .meta-line { flex: none; }
.quote footer strong { display: block; font-size: .95rem; color: var(--forest-900); font-weight: 700; }
.quote footer span { display: block; font-size: .78rem; color: var(--ink-3); margin-top: 2px; }
.avatar, .initials {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 600;
  background: linear-gradient(145deg, var(--graphite-600), var(--graphite-900));
  color: var(--lime);
  box-shadow: 0 0 0 2px var(--surface-0), 0 0 0 3.5px var(--lime-100);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.quote .meta-line {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: .76rem; font-weight: 700;
}
.quote .meta-line .pill-date {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--r-data); background: var(--paper-2); color: var(--ink-2);
  font-family: var(--font-display); font-weight: 400;
}
.quote .meta-line .pill-county {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--r-data); background: var(--clay-100); color: var(--clay-700);
  font-family: var(--font-display); font-weight: 700;
}
.quote .verified {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .72rem; font-weight: 800; color: var(--ok); letter-spacing: .04em;
}
.quote .verified svg { width: 14px; height: 14px; }
.quote--featured { border-color: rgba(198,240,75,.42); box-shadow: var(--sh-2); }

/* ----------------------------- 19 · Forms ----------------------------- */
.form { display: grid; gap: 18px; max-width: 34rem; }
.form--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
.form-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.field { display: grid; gap: 7px; position: relative; }
.field label, .form label {
  font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--ink-2);
}
.field input, .field select, .field textarea,
.form input, .form select, .form textarea {
  width: 100%; min-height: 52px; padding: 13px 18px;
  background: var(--white);
  border: 1.5px solid var(--sand-3); border-radius: 14px;
  color: var(--ink); font-size: .96rem;
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.field textarea, .form textarea { min-height: 128px; resize: vertical; line-height: 1.6; }
.field select, .form select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2346554D' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; background-size: 12px 8px;
}
.field input:focus, .field select:focus, .field textarea:focus,
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--steel); box-shadow: 0 0 0 4px rgba(74,111,165,.18);
}
.field input::placeholder, .form textarea::placeholder { color: var(--ink-3); }
.field .error, .form .error {
  display: none; font-size: .8rem; font-weight: 600; color: var(--err);
}
.field.is-error input, .field.is-error select, .field.is-error textarea { border-color: var(--err); }
.field.is-error .error { display: block; }
.form-ok {
  display: none; align-items: center; gap: 10px;
  padding: 15px 18px; border-radius: 14px;
  background: rgba(46,111,142,.1); border: 1.5px solid rgba(46,111,142,.35);
  color: var(--ok); font-weight: 700; font-size: .92rem;
}
.form.is-sent .form-ok { display: flex; animation: fadeUp .5s var(--ease); }
.form.is-sent .field, .form.is-sent button, .form.is-sent .consent { display: none; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.consent { display: flex; gap: 11px; align-items: flex-start; font-size: .78rem; color: var(--ink-3); line-height: 1.5; cursor: pointer; }
.consent input { width: 20px; height: 20px; min-height: 0; flex: none; margin-top: 2px; accent-color: var(--steel); border-radius: 6px; padding: 0; }
.consent a { text-decoration: underline; }
.form-card {
  padding: clamp(24px, 3vw, 38px);
  background: var(--white); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); box-shadow: var(--sh-2);
}

/* Dark variant */
.form--dark label { color: rgba(243,245,242,.7); }
.form--dark input, .form--dark select, .form--dark textarea {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); color: #fff;
}
.form--dark input::placeholder { color: rgba(255,255,255,.4); }
.form--dark select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F8F4EC' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 12px 8px;
}
.form--dark select option { color: var(--ink); background: var(--white); }
.form--dark input:focus, .form--dark select:focus, .form--dark textarea:focus {
  border-color: var(--gold-2); box-shadow: 0 0 0 4px rgba(198,240,75,.2);
}
.form--dark .consent { color: rgba(243,245,242,.55); }
.form--dark .form-ok { background: rgba(198,240,75,.12); border-color: rgba(198,240,75,.4); color: var(--gold-2); }

/* ----------------------------- 20 · Capture block --------------------- */
.capture {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(32px, 5vw, 70px);
  background: linear-gradient(145deg, var(--forest-700) 0%, var(--forest-900) 68%);
  color: var(--sand); border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
}
.capture .glow {
  position: absolute; inset: auto auto -40% -10%; width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(74,111,165,.55), transparent 64%);
  z-index: -1; animation: floaty 9s var(--ease-soft) infinite;
}
.capture::after {
  content: ""; position: absolute; inset: -30% -10% auto auto; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(198,240,75,.38), transparent 66%);
  z-index: -1;
}
.capture h2 { color: #fff; margin-top: 14px; max-width: 18ch; }
.capture .lede { color: rgba(243,245,242,.76); margin-top: 16px; }
.capture .form { margin-top: 30px; max-width: 760px; }
.capture--box { border-radius: var(--r-lg); }
.capture { border-radius: var(--r-data) var(--r-xl) var(--r-xl) var(--r-data); }

/* ----------------------------- 21 · FAQ ------------------------------- */
.faq { display: grid; gap: 12px; }

/* One heading + its questions. Generous air above each group, and a clear
   gap between the heading and the first question. */
.faq-group { margin-top: clamp(54px, 6.5vw, 92px); }
.faq-group:first-child { margin-top: 0; }
.faq-group > h2 {
  margin-bottom: clamp(24px, 3vw, 36px);
  position: relative; padding-bottom: 16px;
}
.faq-group > h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--lime-600), transparent);
  transition: width .9s var(--ease) .15s;
}
.faq-group.in > h2::after, .faq-group > h2.in::after { width: 86px; }
/* the inline FAQ block on a listing page */
section.faq > h2 { margin-bottom: clamp(20px, 2.4vw, 30px); }
/* a heading that directly precedes a question list anywhere else */
h2 + .faq, h3 + .faq { margin-top: clamp(20px, 2.4vw, 30px); }
.faq details {
  background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--r);
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s, background-color .3s;
}
.faq details[open] { border-color: rgba(198,240,75,.4); box-shadow: var(--sh-1); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 19px clamp(18px, 2vw, 26px);
  font-family: var(--font-display); font-size: clamp(1.02rem, 1.5vw, 1.18rem); font-weight: 500;
  color: var(--forest-900);
  transition: color .25s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--steel-700); }
.faq summary::after {
  content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--sand-2);
  position: relative;
  transition: background-color .3s, transform .4s var(--ease);
  background-image:
    linear-gradient(var(--forest-900), var(--forest-900)),
    linear-gradient(var(--forest-900), var(--forest-900));
  background-size: 11px 1.6px, 1.6px 11px;
  background-position: center, center;
  background-repeat: no-repeat;
}
.faq details[open] summary::after {
  background-size: 11px 1.6px, 1.6px 0;
  transform: rotate(180deg);
  background-color: var(--gold-3);
}
.faq .a {
  padding: 0 clamp(18px, 2vw, 26px) 22px;
  color: var(--ink-2); font-size: .95rem;
  animation: fadeUp .38s var(--ease);
}
.faq .a a { text-decoration: underline; text-underline-offset: 3px; }

/* ----------------------------- 22 · Guarantee band -------------------- */
/*  A ticket: perforated left edge, stamped seal, squared corners. */
.guarantee {
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(20px, 3vw, 40px);
  padding: clamp(26px, 3.4vw, 44px) clamp(26px, 3.4vw, 44px) clamp(26px, 3.4vw, 44px) clamp(38px, 4.4vw, 58px);
  background: var(--paper-0);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-data) var(--r-lg) var(--r-lg) var(--r-data);
  box-shadow: var(--sh-1);
  position: relative; overflow: hidden;
}
/* the perforation */
.guarantee::before {
  content: ""; position: absolute; left: 18px; top: 14px; bottom: 14px; width: 2px;
  background: repeating-linear-gradient(var(--paper-3) 0 5px, transparent 5px 11px);
}
.guarantee::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: linear-gradient(var(--steel), var(--lime));
}
.guarantee > svg { width: clamp(52px, 6vw, 74px); height: auto; color: var(--clay); flex: none; }
.guarantee > div { flex: 1 1 320px; }
.guarantee h2 { font-size: clamp(1.4rem, 2.4vw, 2rem); }
.guarantee p { color: var(--ink-2); margin-top: 10px; font-size: .95rem; max-width: 62ch; }
.guarantee .btn { flex: none; }

/* ----------------------------- 23 · Trust rows ------------------------ */
.trust-line, .trust-bar {
  display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center;
  font-size: .85rem; font-weight: 700; color: var(--ink-2);
}
.trust-line span, .trust-bar span { display: inline-flex; align-items: center; gap: 8px; }
.trust-line span::before, .trust-bar span::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}
.trust-bar--2 { justify-content: center; }

/* ----------------------------- 24 · Filters / chips ------------------- */
.filters-shell {
  position: sticky; top: calc(var(--header-h) - 10px); z-index: 40;
  padding-block: 14px;
  background: linear-gradient(180deg, var(--sand) 72%, rgba(243,245,242,0));
}
.filters-bar {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  padding: 12px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
.filters-bar select, .filter-select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  min-height: 50px; padding: 0 42px 0 44px;
  background-color: var(--sand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2346554D' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px;
  border: 1.5px solid transparent; border-radius: var(--r-data);
  font-size: .9rem; font-weight: 700; color: var(--forest-900);
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  transition: background-color .25s, border-color .25s, box-shadow .25s, transform .2s var(--ease);
}
.filters-bar select:hover { background-color: var(--sand-2); transform: translateY(-1px); }
.filters-bar select:focus { outline: none; border-color: var(--steel); box-shadow: 0 0 0 4px rgba(74,111,165,.18); }
.filters-bar select.is-set { background-color: var(--gold-3); border-color: rgba(198,240,75,.5); color: #3E4F0C; }

/* icon wells rendered behind each select */
.filters-bar .fw { position: relative; }
.filters-bar .fw > svg {
  position: absolute; left: 16px; top: 50%; translate: 0 -50%;
  width: 18px; height: 18px; color: var(--steel); pointer-events: none; z-index: 2;
}
.filters-bar .fw select { width: 100%; }

.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 17px; border-radius: var(--r-data);
  background: var(--paper-0); border: 1.5px solid var(--line-soft);
  font-size: .85rem; font-weight: 700; color: var(--ink-2);
  transition: all .28s var(--ease);
}
.chip::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--sand-3); transition: background-color .28s, transform .35s var(--ease-back);
}
.chip:hover { border-color: rgba(198,240,75,.5); color: var(--forest-900); transform: translateY(-2px); }
.chip[aria-pressed="true"] {
  background: var(--clay); border-color: var(--clay); color: #fff;
  box-shadow: 0 12px 26px -16px rgba(16,22,25,.8);
}
.chip[aria-pressed="true"]::before { background: var(--ochre-300); transform: scale(1.35); }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--r-data); font-family: var(--font-display); font-size: .72rem; font-weight: 700; background: var(--paper-2); color: var(--ink-2); }
.pill--on  { background: rgba(46,111,142,.14); color: var(--ok); }
.pill--off { background: rgba(194,72,58,.12); color: var(--err); }

.results-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--line-soft);
}
.results-bar strong { font-family: var(--font-display); font-size: 1.24rem; font-weight: 500; }
.results-bar strong b { color: var(--lime-ink); font-weight: 700; }

.empty, .empty-state {
  grid-column: 1 / -1;
  display: grid; gap: 14px; justify-items: center; text-align: center;
  padding: clamp(40px, 6vw, 76px) 24px;
  background: var(--sand-2); border: 1.5px dashed var(--sand-3); border-radius: var(--r-lg);
}
.empty h3 { font-size: 1.4rem; }
.empty p { color: var(--ink-2); max-width: 46ch; }

/* ----------------------------- 25 · Listing page ---------------------- */
.listing-top {
  display: grid; gap: clamp(20px, 3vw, 34px);
  padding-top: calc(var(--header-h) + clamp(18px, 3vw, 34px));
}
.gallery { display: grid; gap: 12px; }
.gallery__main {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  background: var(--sand-3); box-shadow: var(--sh-2);
  aspect-ratio: 16 / 9;
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform .8s var(--ease); }
@media (hover: hover) { .gallery__main:hover img { transform: scale(1.03); } }
.gallery__main::after {
  content: "Click to enlarge";
  position: absolute; right: 16px; bottom: 16px;
  padding: 8px 15px; border-radius: 999px;
  background: rgba(16,22,25,.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  pointer-events: none; opacity: 0; transition: opacity .3s;
}
@media (hover: hover) { .gallery__main:hover::after { opacity: 1; } }
.gallery__thumbs {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr);
  gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin;
}
.gallery__thumbs button {
  border-radius: 14px; overflow: hidden; aspect-ratio: 4/3;
  border: 2px solid transparent; opacity: .66;
  transition: opacity .3s, border-color .3s, transform .3s var(--ease);
}
.gallery__thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs button:hover { opacity: 1; transform: translateY(-2px); }
.gallery__thumbs button.active { opacity: 1; border-color: var(--gold); }

/* Title block that sits AFTER the picture */
.listing-head { display: grid; gap: 14px; }
.listing-head .crumbs { color: var(--ink-3); margin-bottom: 0; }
.listing-head .crumbs span { color: var(--forest-900); }
.listing-head .crumbs a:hover { color: var(--steel-700); }
.listing-head h1 { font-size: clamp(1.9rem, 4vw, 3.1rem); max-width: 20ch; }
.listing-head .hook { font-size: clamp(1rem, 1.6vw, 1.18rem); color: var(--ink-2); max-width: 58ch; }
.listing-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.listing-meta .tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line-soft);
  font-size: .82rem; font-weight: 700; color: var(--ink-2);
  box-shadow: var(--sh-1);
}
.listing-meta .tag b { color: var(--forest-900); font-weight: 800; }
.listing-meta .tag--apn { background: var(--forest-800); border-color: var(--forest-800); color: rgba(243,245,242,.66); }
.listing-meta .tag--apn b { color: var(--gold-2); letter-spacing: .04em; }
.listing-meta .tag--new { background: var(--gold); border-color: var(--gold); color: #0E1316; }
.listing-meta .tag--sold { background: var(--forest-900); border-color: var(--forest-900); color: var(--sand); }
.listing-meta .copy-apn {
  border: 0; background: rgba(255,255,255,.14); color: var(--gold-2);
  padding: 4px 9px; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .06em;
  transition: background-color .25s, color .25s;
}
.listing-meta .copy-apn:hover { background: var(--gold); color: #0E1316; }

.listing-grid {
  display: grid; gap: clamp(28px, 3.4vw, 54px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  align-items: start;
  margin-top: clamp(30px, 4vw, 54px);
}
.listing-main { display: grid; gap: clamp(34px, 4vw, 58px); min-width: 0; }
.listing-main > section > h2 { margin-bottom: 18px; }
.listing-aside {
  position: sticky; top: calc(var(--header-h) + 16px);
  max-height: calc(100svh - var(--header-h) - 32px);
  overflow-y: auto; overscroll-behavior: contain;
  padding-right: 6px; margin-right: -6px;
  scrollbar-width: thin; scrollbar-color: var(--sand-3) transparent;
}
.listing-aside::-webkit-scrollbar { width: 8px; }
.listing-aside::-webkit-scrollbar-track { background: transparent; }
.listing-aside::-webkit-scrollbar-thumb { background: var(--sand-3); border-radius: 99px; }
.listing-aside::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
/* fade the top and bottom edge so the cut-off reads as scrollable */
.listing-aside::after {
  content: ""; position: sticky; bottom: -1px; display: block; height: 26px; margin-top: -26px;
  background: linear-gradient(transparent, var(--sand));
  pointer-events: none;
}

.specs { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r); overflow: hidden; }
.specs li {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: baseline;
  padding: 15px 20px; background: var(--white);
  transition: background-color .25s;
}
.specs li:hover { background: var(--sand-2); }
.specs li span:first-child { font-size: .84rem; font-weight: 700; color: var(--ink-3); letter-spacing: .03em; }
.specs li span:last-child { font-weight: 700; color: var(--forest-900); text-align: right; }

.nearby { display: grid; gap: 10px; }
.nearby li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 15px 20px; background: var(--white);
  border: 1px solid var(--line-soft); border-radius: var(--r);
  transition: transform .3s var(--ease), border-color .3s;
}
.nearby li::before {
  content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; margin-top: 8px;
  background: var(--gold); box-shadow: 0 0 0 4px var(--gold-3);
}
.nearby li:hover { transform: translateX(4px); border-color: rgba(198,240,75,.4); }
.nearby strong { display: block; color: var(--forest-900); }
.nearby span { font-size: .87rem; color: var(--ink-2); }

.facts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-top: 18px; }
.facts > div {
  padding: 16px 18px; background: var(--white);
  border: 1px solid var(--line-soft); border-radius: var(--r);
  display: grid; gap: 5px;
}
.facts span { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--ink-3); }
.facts strong { font-weight: 700; color: var(--forest-900); word-break: break-word; }
.facts .link { justify-self: start; font-size: .8rem; }

.map-box {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 16/10; background: var(--sand-3); box-shadow: var(--sh-1);
}
.map-box > img { width: 100%; height: 100%; object-fit: cover; }
.map-box > img { position: absolute; inset: 0; z-index: 1; }
.map-box #listingMap, .map-box .leaflet-container { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
.map-box .btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; }
.map-box .btn:hover { transform: translate(-50%, calc(-50% - 3px)); }
.map-box.is-live .btn { display: none; }
.map-box.is-live > img { display: none; }
.map-box .map-fallback {
  position: absolute; inset: auto 12px 12px; z-index: 6;
  padding: 12px 16px; border-radius: var(--r-sm);
  background: rgba(16,22,25,.9); color: var(--sand); font-size: .84rem;
}
.map-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.map-layers { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.map-layers button {
  padding: 8px 16px; border-radius: 999px; background: var(--white);
  border: 1.5px solid var(--line-soft); font-size: .8rem; font-weight: 700; color: var(--ink-2);
  transition: all .25s var(--ease);
}
.map-layers button[aria-pressed="true"] { background: var(--forest-800); border-color: var(--forest-800); color: var(--sand); }
.map-static { border-radius: var(--r-lg); overflow: hidden; }

/* ----------------------------- 26 · Offer box ------------------------- */
.offer {
  background: var(--paper-0);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-data) var(--r-lg) var(--r-lg) var(--r-data);
  box-shadow: var(--sh-3);
  padding: clamp(20px, 2.4vw, 28px);
  display: grid; gap: 18px;
  position: relative; overflow: hidden;
}
.offer::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--steel-700), var(--steel), var(--lime));
}
.offer--sold { text-align: center; }
/* Each pane lays its own children out, so the receipt, the form, the
   buttons and the small print never touch. */
.offer [data-pane] { display: grid; gap: 20px; }
.offer [data-pane] > .btn { margin-top: 2px; }
.offer [data-pane] > .small { margin: 0; }
.offer .form { gap: 14px; }
.offer [data-planpane] { margin: 0; }
.offer-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  padding: 3px; background: var(--paper-2); border-radius: var(--r-data);
}
.offer-tabs button {
  padding: 12px 10px; border-radius: 2px; font-family: var(--font-body);
  font-size: .88rem; font-weight: 700; color: var(--ink-2);
  transition: background-color .3s var(--ease), color .3s, box-shadow .3s;
}
.offer-tabs button[aria-selected="true"] { background: var(--white); color: var(--forest-900); box-shadow: var(--sh-1); }

.plan-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plan-cols--single { grid-template-columns: 1fr; }
.plan {
  text-align: left; padding: 16px; border-radius: var(--r-data);
  background: var(--paper-2); border: 1.5px solid transparent;
  transition: all .3s var(--ease);
}
.plan:hover { border-color: rgba(198,240,75,.4); transform: translateY(-2px); }
.plan[aria-pressed="true"] { background: var(--ochre-100); border-color: var(--ochre); }
.plan-badge { display: block; font-family: var(--font-display); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--steel-700); }
.plan-monthly { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -.045em; margin-top: 6px; color: var(--forest-900); }
.plan-monthly small { font-size: .78rem; font-family: var(--font-body); font-weight: 700; color: var(--ink-3); }
.plan-total { font-family: var(--font-display); font-size: .76rem; color: var(--ink-2); font-weight: 500; margin-top: 4px; }

.receipt {
  padding: 18px; border-radius: var(--r-data);
  background: var(--paper-2);
  border: 1px dashed var(--paper-3);
  display: grid; gap: 10px;
}
.receipt-row { display: flex; justify-content: space-between; gap: 16px; font-size: .9rem; }
.receipt-row span:first-child { color: var(--ink-2); }
.receipt-row span:last-child { font-family: var(--font-display); font-weight: 700; color: var(--forest-900); font-variant-numeric: tabular-nums; }
.receipt-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding-top: 14px; margin-top: 4px; border-top: 1.5px solid var(--sand-3);
}
.receipt-total span { font-size: .84rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.receipt-total strong { font-family: var(--font-display); font-size: 1.62rem; font-weight: 700; letter-spacing: -.04em; color: var(--graphite-800); }
.receipt-note { font-size: .82rem; color: var(--ink-2); line-height: 1.55; }
.receipt-note .saving { color: var(--ok); font-weight: 800; }
.offer-guarantee {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 15px 16px; border-radius: var(--r);
  background: rgba(46,111,142,.08); color: var(--ink-2); font-size: .82rem; line-height: 1.5;
}
.offer-guarantee svg { flex: none; color: var(--ok); }
.offer-guarantee strong { color: var(--forest-900); }

.table-wrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--line-soft); }
table.compare { font-size: .86rem; min-width: 420px; }
table.compare th, table.compare td { padding: 12px 14px; text-align: right; border-bottom: 1px solid var(--line-soft); }
table.compare th:first-child, table.compare td:first-child { text-align: left; color: var(--ink-2); font-weight: 600; }
table.compare thead th { background: var(--sand-2); font-weight: 800; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
table.compare tbody td { font-family: var(--font-display); font-weight: 700; color: var(--forest-900); font-variant-numeric: tabular-nums; }
table.compare tr.is-total td { background: var(--ochre-100); font-size: .98rem; }
table.compare tr:last-child td { border-bottom: 0; }

/* ----------------------------- 27 · Popups ---------------------------- */
.slidein {
  position: fixed; left: 24px; bottom: 24px; z-index: 95;
  width: min(380px, calc(100vw - 32px));
  padding: 26px 26px 24px;
  background: var(--white); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); box-shadow: var(--sh-3);
  transform: translateY(140%); opacity: 0; visibility: hidden;
  transition: transform .6s var(--ease), opacity .4s, visibility .4s;
}
.slidein.is-open { transform: none; opacity: 1; visibility: visible; }
.slidein h3 { font-size: 1.28rem; margin-bottom: 10px; padding-right: 22px; }
.slidein .small { color: var(--ink-2); margin-bottom: 18px; }
.close-x {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.1rem; line-height: 1;
  background: var(--sand-2); color: var(--ink-2);
  transition: background-color .25s, transform .25s, color .25s;
}
.close-x:hover { background: var(--forest-800); color: var(--sand); transform: rotate(90deg); }

.modal {
  position: fixed; inset: 0; z-index: 130;
  display: grid; place-items: center; padding: 20px;
  background: rgba(16,22,25,.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s;
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal-card {
  position: relative; width: min(560px, 100%);
  padding: clamp(28px, 4vw, 44px);
  background: var(--white); border-radius: var(--r-xl); box-shadow: var(--sh-3);
  transform: translateY(24px) scale(.97); transition: transform .5s var(--ease);
}
.modal.is-open .modal-card { transform: none; }
.modal-card h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 14px; }
.modal-card p { color: var(--ink-2); margin-bottom: 20px; }

.two-step .step-2 { display: none; }
.two-step.is-step-2 .step-1 { display: none; }
.two-step.is-step-2 .step-2 { display: block; animation: fadeUp .4s var(--ease); }

.mobile-bar {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 92;
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 12px 12px 20px;
  background: var(--forest-900); color: var(--sand);
  border-radius: 999px; box-shadow: var(--sh-3);
  transform: translateY(150%); transition: transform .5s var(--ease);
}
.mobile-bar span { font-size: .88rem; font-weight: 700; }
.mobile-bar.is-open { transform: none; }
.mobile-bar .close-x { position: static; width: 28px; height: 28px; background: rgba(255,255,255,.12); color: var(--sand); }
@media (max-width: 760px) { .mobile-bar { display: flex; } .slidein { display: none; } }

/* ----------------------------- 28 · Lightbox -------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 140;
  display: grid; place-items: center; padding: 4vw;
  background: rgba(8,12,14,.94);
  opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
}
.lightbox.open, .lightbox[aria-hidden="false"] { opacity: 1; visibility: visible; }
.lightbox img { max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: var(--r); }
.lightbox__close, .lightbox__nav {
  position: absolute; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; font-size: 1.5rem; line-height: 1;
  display: grid; place-items: center;
  transition: background-color .25s, transform .25s;
}
.lightbox__close { top: 22px; right: 22px; }
.lightbox__nav.prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lightbox__nav.next { right: 22px; top: 50%; transform: translateY(-50%); }
.lightbox__close:hover, .lightbox__nav:hover { background: var(--gold); color: #0E1316; }

/* ----------------------------- 29 · Flash / misc ---------------------- */
.flash { padding: 14px 18px; border-radius: var(--r); font-weight: 700; margin-bottom: 18px; }
.flash--ok, .flash--success { background: rgba(46,111,142,.12); color: var(--ok); }
.flash--err, .flash--error { background: rgba(194,72,58,.12); color: var(--err); }
.hint { font-size: .8rem; color: var(--ink-3); }
.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--sand-2); padding: 3px 8px; border-radius: 6px; font-size: .9em; font-weight: 700;
}
.check { color: var(--ok); font-weight: 800; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.panel { background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: clamp(20px, 2.6vw, 30px); }
.panel__head { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.big { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 500; letter-spacing: -.03em; }
.fr { text-align: right; }
.sub { font-size: .86rem; color: var(--ink-2); }
.name { font-weight: 700; }
.meta { color: var(--ink-2); font-size: .86rem; }

/* ----------------------------- 30 · About page: the team -------------- */
.team {
  display: grid; gap: clamp(14px, 1.6vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  align-items: stretch;
}
.person {
  position: relative; isolation: isolate;
  display: flex; align-items: flex-start; gap: 18px;
  min-height: 208px; height: 100%;
  padding: clamp(20px, 2.2vw, 26px);
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  text-align: left;
  box-shadow: var(--sh-1);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
/* gold spine that draws in on hover */
.person::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(var(--lime), var(--lime-600));
  transform: scaleY(0); transform-origin: top;
  transition: transform .5s var(--ease);
}
@media (hover: hover) {
  .person:hover { transform: translateY(-5px); box-shadow: var(--sh-2); border-color: rgba(198,240,75,.38); }
  .person:hover::before { transform: scaleY(1); }
  .person:hover .person__media img { transform: scale(1.06); }
}

.person__media {
  flex: none; width: 76px; height: 76px; border-radius: 50%;
  overflow: hidden; position: relative;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--forest-700), var(--forest-900));
  box-shadow: 0 0 0 2px var(--surface-0), 0 0 0 3.5px var(--lime-100);
}
.person__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.person__mono {
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; line-height: 1;
  color: var(--lime); letter-spacing: -.03em;
}
/* faint ring inside the monogram so it does not read as an empty circle */
.person__media::after {
  content: ""; position: absolute; inset: 9px; border-radius: 50%;
  border: 1px solid rgba(198,240,75,.28); pointer-events: none;
}
.person__media:has(img)::after { display: none; }

.person__body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.person__role {
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 800; color: var(--lime-ink);
}
.person__title {
  font-family: var(--font-display); font-size: clamp(1.06rem, 1.5vw, 1.22rem);
  font-weight: 500; line-height: 1.2; color: var(--forest-900);
  text-wrap: balance;
}
/* clamped so every card lands on the same height, row after row */
.person__detail {
  font-size: .88rem; line-height: 1.6; color: var(--ink-2); margin-top: 4px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.person__no {
  position: absolute; right: 18px; top: 16px;
  font-family: var(--font-display); font-size: .84rem; font-weight: 500;
  color: var(--ink-3); letter-spacing: .04em;
}
@media (max-width: 560px) {
  .person { gap: 14px; padding: 18px; min-height: 0; }
  .person__media { width: 60px; height: 60px; }
  .person__mono { font-size: 1.5rem; }
}
/* legacy name, kept so an older template still renders */
.person-tile { display: grid; place-items: center; background: var(--surface-2); border-radius: var(--r); aspect-ratio: 1; font-family: var(--font-display); font-size: 1.6rem; color: var(--steel-700); }

/* ----------------------------- 31 · Map page -------------------------- */
.mastermap {
  position: relative; isolation: isolate;
  height: clamp(520px, 74vh, 820px);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-2); background: var(--sand-2);
}
.mastermap #map { position: absolute; inset: 0; z-index: 1; }
.mastermap .leaflet-container { width: 100%; height: 100%; font: inherit; }
.map-static {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center;
  background-size: cover; background-position: center; background-color: var(--sand-3);
}
.map-static::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,22,25,.28), rgba(16,22,25,.5));
}
.map-static .btn { position: relative; z-index: 2; }

/* Side panel on desktop, bottom sheet on phones */
.sheet {
  position: absolute; left: 14px; top: 14px; bottom: 14px; z-index: 500;
  width: min(360px, 40%);
  display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 18px;
  background: rgba(255,255,255,.93);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); box-shadow: var(--sh-2);
  scrollbar-width: thin;
}
.sheet .filters-bar { grid-template-columns: 1fr 1fr; box-shadow: none; border: 0; padding: 0; background: transparent; gap: 8px; }
.sheet .filters-bar select { padding: 0 30px 0 16px; background-position: right 12px center; min-height: 44px; font-size: .82rem; }
.sheet h2 { font-size: 1.25rem; }
#sheetList { display: grid; gap: 8px; }
.pin-card {
  display: flex; gap: 12px; align-items: center;
  padding: 8px; border-radius: 14px;
  background: var(--white); border: 1px solid var(--line-soft);
  transition: transform .3s var(--ease), border-color .25s, box-shadow .3s;
}
.pin-card:hover, .pin-card.is-active { transform: translateX(4px); border-color: rgba(198,240,75,.5); box-shadow: var(--sh-1); }
.pin-card img { width: 78px; height: 58px; object-fit: cover; border-radius: 10px; flex: none; background: var(--sand-3); }
.pin-card strong { display: block; font-size: .88rem; color: var(--forest-900); line-height: 1.25; }
.pin-card span { display: block; font-size: .76rem; color: var(--ink-2); margin-top: 3px; }
.leaflet-popup-content-wrapper { border-radius: 14px; }
.leaflet-popup-content { font-family: var(--font-body); font-size: .86rem; }
.leaflet-popup-content a { color: var(--forest-700); font-weight: 700; text-decoration: underline; }

@media (max-width: 860px) {
  .mastermap { height: 78vh; }
  .sheet {
    left: 10px; right: 10px; bottom: 10px; top: auto;
    width: auto; max-height: 52%;
  }
}

/* ----------------------------- 32 · Footer ---------------------------- */
.site-footer {
  background: var(--forest-900); color: rgba(243,245,242,.7);
  padding-block: clamp(50px, 6vw, 86px) 30px;
  position: relative; overflow: hidden;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  margin-top: clamp(30px, 5vw, 60px);
}
.site-footer::before {
  content: ""; position: absolute; inset: auto auto -50% -8%; width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(46,111,142,.28), transparent 66%);
}
.site-footer .wrap { position: relative; z-index: 1; }
.footer-grid {
  display: grid; gap: clamp(30px, 4vw, 56px);
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
}
.flogo { height: 76px; width: auto; margin-bottom: 20px; }
.tagline { font-family: var(--font-display); font-size: 1.3rem; color: var(--sand); margin-bottom: 14px; letter-spacing: -.01em; }
.site-footer h4 {
  color: var(--gold-2); font-family: var(--font-body);
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 800;
  margin-bottom: 16px;
}
.flink {
  display: block; padding: 6px 0; font-size: .92rem; color: rgba(243,245,242,.66);
  transition: color .25s, transform .3s var(--ease);
}
.flink:hover { color: var(--gold-2); transform: translateX(5px); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 14px 26px; justify-content: space-between; align-items: center;
  margin-top: clamp(34px, 4vw, 54px); padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: .82rem; color: rgba(243,245,242,.5);
}
.footer-bottom a { transition: color .25s; }
.footer-bottom a:hover { color: var(--gold-2); }

/* ----------------------------- 33 · Responsive ------------------------ */
@media (max-width: 1080px) {
  .listing-grid { grid-template-columns: 1fr; }
  .listing-aside { position: static; max-height: none; overflow: visible; padding-right: 0; margin-right: 0; }
  .listing-aside::after { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .nav, .header-phone { display: none; }
  .nav-toggle { display: block; }
  .hero-search { grid-template-columns: 1fr 1fr; border-radius: var(--r-lg); }
  .hero-search .btn { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  :root { --header-h: 82px; --r-xl: 26px; --r-lg: 20px; }
  body { font-size: 16px; }
  .hero { min-height: auto; padding-block: calc(var(--header-h) + 48px) 70px; }
  .hero-search { grid-template-columns: 1fr; border-radius: var(--r-lg); }
  .hero__stats { grid-template-columns: 1fr 1fr; }
  .s-head { flex-direction: column; align-items: flex-start; }
  .form--grid { grid-template-columns: 1fr; }
  .span2 { grid-column: auto; }
  .footer-grid { grid-template-columns: 1fr; }
  .plan-cols { grid-template-columns: 1fr; }
  .guarantee { flex-direction: column; align-items: flex-start; }
  .filters-shell { position: static; }
  .filters-bar { grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
  .filters-bar select { padding: 0 32px 0 38px; font-size: .82rem; }
  .filters-bar .fw > svg { left: 13px; width: 16px; height: 16px; }
  .timeline li { padding-left: 52px; }

}
@media (max-width: 480px) {
  .hero__stats { grid-template-columns: 1fr 1fr; }
  .lots, .counties, .states { grid-template-columns: 1fr; }
  .quotes { grid-template-columns: 1fr; }
}

/* ----------------------------- 34 · Reduced motion -------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .reveal, .wipe { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .marquee__track { animation: none; }
}

/* ----------------------------- 35 · Print ----------------------------- */
@media print {
  .site-header, .mobile-nav, .site-footer, .slidein, .modal, .mobile-bar, .scroll-hint { display: none !important; }
  body { background: #fff; }
  .page-hero, .hero { min-height: auto; color: #000; padding: 20px 0; }
  .page-hero::before, .hero::before { display: none; }
}

/* =====================================================================
   36 · MOTION PACK  (added September 2026)
   Extra entrance, hover and pointer effects. Everything here is opt-in
   through a class or a data attribute, and everything is switched off by
   prefers-reduced-motion at the bottom of this file.
   ===================================================================== */

/* --- 36.1 Scroll progress bar (top of the window) --------------------- */
.scroll-progress {
  position: fixed; inset: 0 0 auto 0; z-index: 130;
  height: 3px; pointer-events: none;
  background: transparent;
}
.scroll-progress span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--lime), var(--steel), var(--steel-700));
  box-shadow: 0 0 12px rgba(198,240,75,.7);
  transform-origin: left;
  transition: width .12s linear;
}

/* --- 36.2 Headline word reveal --------------------------------------- */
.word-rise { display: inline-block; overflow: hidden; vertical-align: bottom; }
.word-rise > i {
  display: inline-block; font-style: inherit;
  transform: translateY(105%); opacity: 0;
  transition: transform .9s var(--ease), opacity .7s var(--ease);
  transition-delay: calc(var(--w, 0) * 55ms);
}
.in .word-rise > i, .word-rise.in > i { transform: none; opacity: 1; }

/* --- 36.3 Magnetic buttons ------------------------------------------- */
.btn { --mx: 0px; --my: 0px; }
@media (hover: hover) and (pointer: fine) {
  .btn.is-magnetic:not(.map-box .btn) { transform: translate3d(var(--mx), var(--my), 0); }
  .btn.is-magnetic:not(.map-box .btn):hover { transform: translate3d(var(--mx), calc(var(--my) - 3px), 0); }
  .map-box .btn.is-magnetic, .map-box .btn.is-magnetic:hover { transform: translate(-50%, -50%); }
}

/* --- 36.4 Pointer glow on dark panels -------------------------------- */
.capture, .callout, .hero, .page-hero { --px: 50%; --py: 50%; }
.capture::after {
  inset: 0; width: auto; height: auto; border-radius: inherit;
  background: radial-gradient(420px circle at var(--px) var(--py), rgba(198,240,75,.22), transparent 62%);
  transition: opacity .4s var(--ease-soft);
}

/* --- 36.5 Card hover: photo pan + gold corner ------------------------ */
.lot, .county-card, .state-card, .quote, .step, .tile { --tx: 0deg; --ty: 0deg; }
@media (hover: hover) and (pointer: fine) {
  .lot.is-tilt, .county-card.is-tilt, .state-card.is-tilt {
    transform: perspective(1000px) rotateX(var(--tx)) rotateY(var(--ty)) translateY(-7px);
  }
}
.lot::after, .quote::after {
  content: ""; position: absolute; top: 0; right: 0; width: 56px; height: 56px;
  background: linear-gradient(225deg, var(--gold-2) 0%, transparent 52%);
  opacity: 0; transition: opacity .45s var(--ease);
  pointer-events: none; border-radius: 0 var(--r-lg) 0 0;
}
@media (hover: hover) { .lot:hover::after, .quote:hover::after { opacity: .35; } }

/* --- 36.6 Underline sweep for text links ----------------------------- */
.link, .prose-block a, .faq .a a {
  background-image: linear-gradient(var(--steel), var(--steel));
  background-size: 0% 1.5px; background-repeat: no-repeat; background-position: 0 100%;
  text-decoration: none;
  transition: background-size .38s var(--ease), color .25s;
}
.link:hover, .prose-block a:hover, .faq .a a:hover { background-size: 100% 1.5px; color: var(--steel-700); }

/* --- 36.7 Section heading rule draw ---------------------------------- */
.s-head h2 { position: relative; }
.s-head h2::after {
  content: ""; position: absolute; left: 0; bottom: -14px; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--lime-600), transparent);
  transition: width 1s var(--ease) .2s;
}
.s-head .reveal.in h2::after, .s-head h2.in::after, .reveal.in > h2::after { width: 92px; }

/* --- 36.8 Guarantee shield draws itself ------------------------------ */
.guarantee > svg path { stroke-dasharray: 260; stroke-dashoffset: 260; }
.guarantee.in > svg path { animation: drawIn 1.6s var(--ease) forwards; }
.guarantee.in > svg path:nth-child(2) { animation-delay: .55s; }
@keyframes drawIn { to { stroke-dashoffset: 0; } }

/* --- 36.9 Marquee gets a slow colour sweep --------------------------- */
.marquee__track span {
  background: linear-gradient(90deg, rgba(243,245,242,.92) 0%, var(--gold-2) 45%, rgba(243,245,242,.92) 90%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 9s linear infinite;
}

/* --- 36.10 Sticky header hides going down, returns coming up --------- */
.site-header { transform: translateY(0); }
body.is-scrolled.is-down .site-header { transform: translateY(-104%); }
body.is-scrolled.is-up .site-header { transform: translateY(0); }
.site-header { transition: background-color .45s var(--ease-soft), box-shadow .45s var(--ease-soft), height .35s var(--ease-soft), transform .45s var(--ease); }

/* --- 36.11 Page load: banner and hero settle ------------------------- */
@keyframes heroIn { from { transform: scale(1.14); opacity: .4; } to { transform: scale(1.06); opacity: 1; } }
.hero__media video, .hero__media img, .page-hero__media img { animation: heroIn 1.6s var(--ease) both; }

/* --- 36.12 Ripple on chips and plan cards ---------------------------- */
.chip, .plan, .offer-tabs button, .map-layers button { position: relative; overflow: hidden; }
.chip .ripple, .plan .ripple, .offer-tabs button .ripple, .map-layers button .ripple {
  position: absolute; border-radius: 50%; transform: scale(0); opacity: .35;
  background: currentColor; pointer-events: none;
  animation: ripple .6s var(--ease-soft) forwards;
}
@keyframes ripple { to { transform: scale(2.4); opacity: 0; } }

/* --- 36.13 Gallery thumb + lightbox polish --------------------------- */
.gallery__thumbs button.active { transform: translateY(-3px); box-shadow: 0 10px 22px -12px rgba(16,22,25,.7); }
.lightbox img { animation: fadeUp .4s var(--ease); }

/* --- 36.14 Form fields lift on focus --------------------------------- */
.field:focus-within label { color: var(--steel-700); }
.field input, .field select, .field textarea { transition: border-color .25s, box-shadow .25s, background-color .25s, transform .25s var(--ease); }
.field:focus-within input, .field:focus-within select, .field:focus-within textarea { transform: translateY(-1px); }

/* --- 36.15 Back-to-top button ---------------------------------------- */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 88;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--forest-800); color: var(--gold-2);
  box-shadow: var(--sh-2);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9);
  transition: opacity .35s var(--ease), transform .45s var(--ease-back), visibility .35s, background-color .25s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--gold); color: #0E1316; }

@media (max-width: 720px) { .to-top { right: 12px; bottom: 76px; width: 44px; height: 44px; } }

/* --- 36.16 Count-up numbers keep their width ------------------------- */
[data-count] { font-variant-numeric: tabular-nums; }

/* --- 36.17 Reduced motion switches the pack off ---------------------- */
@media (prefers-reduced-motion: reduce) {
  .word-rise > i { transform: none !important; opacity: 1 !important; }
  .marquee__track span { animation: none; -webkit-text-fill-color: currentColor; background: none; }
  .hero__media video, .hero__media img, .page-hero__media img { animation: none; }
  .scroll-progress, .to-top { transition: none; }
  body.is-scrolled.is-down .site-header { transform: none; }
  .guarantee > svg path { stroke-dasharray: none; stroke-dashoffset: 0; }
}

/* --- 36.18 "As seen on" strip when real logo files are uploaded ------- */
.logos--img { gap: clamp(8px, 1.8vw, 18px); }
.logos--img a, .logos--img span {
  padding: 12px 20px; min-height: 62px;
}
.logos--img img {
  height: 34px; width: auto; max-width: 150px; object-fit: contain;
  display: block;
}
@media (max-width: 720px) {
  .logos--img a, .logos--img span { padding: 10px 14px; min-height: 54px; }
  .logos--img img { height: 26px; max-width: 110px; }
}

/* --- 36.19 Leaflet chrome, restyled to match --------------------------- */
.leaflet-control-zoom a {
  width: 34px !important; height: 34px !important; line-height: 34px !important;
  background: rgba(255,255,255,.94) !important; color: var(--forest-900) !important;
  border: 0 !important; font-weight: 700;
}
.leaflet-control-zoom a:hover { background: var(--gold) !important; color: #0E1316 !important; }
.leaflet-bar { border: 0 !important; border-radius: 12px !important; overflow: hidden; box-shadow: var(--sh-1) !important; }
.leaflet-control-attribution {
  background: rgba(255,255,255,.82) !important; font-size: .68rem !important; border-radius: 8px 0 0 0;
}
.leaflet-container a.leaflet-popup-close-button { color: var(--ink-2); }


/* --- 36.20 Full review dialog ----------------------------------------- */
.review-modal {
  position: fixed; inset: 0; z-index: 135;
  display: grid; place-items: center; padding: 20px;
  background: rgba(16,22,25,.66);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s;
}
.review-modal.is-open { opacity: 1; visibility: visible; }
.review-modal__card {
  position: relative; width: min(620px, 100%); max-height: 84svh; overflow-y: auto;
  padding: clamp(26px, 4vw, 42px);
  background: var(--white); border-radius: var(--r-xl); box-shadow: var(--sh-3);
  transform: translateY(20px) scale(.97); transition: transform .45s var(--ease);
}
.review-modal.is-open .review-modal__card { transform: none; }
.review-modal__card .stars { color: var(--lime-800); letter-spacing: .16em; font-size: 1.1rem; }
.review-modal__card .meta-line { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; font-size: .78rem; font-weight: 700; }
.review-modal__card blockquote { font-size: 1.04rem; line-height: 1.7; color: var(--ink-2); }
.review-modal__card footer { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line-soft); }

/* --- 36.21 Video tour on a listing ------------------------------------ */
.video-tour { display: grid; gap: 18px; margin-top: clamp(28px, 4vw, 46px); }
.video-tour__head h2 { margin-top: 10px; font-size: clamp(1.5rem, 3vw, 2.3rem); }
.video-frame {
  position: relative; isolation: isolate;
  aspect-ratio: 16 / 9; width: 100%;
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--forest-900); box-shadow: var(--sh-2);
  cursor: pointer;
}
.video-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ease), filter .5s var(--ease);
}
.video-frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,22,25,.15), rgba(16,22,25,.55));
  transition: opacity .4s; pointer-events: none;
}
.video-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(72px, 8vw, 96px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; z-index: 3;
  background: var(--gold); color: #0E1316;
  box-shadow: 0 20px 50px -18px rgba(198,240,75,.9);
  transition: transform .35s var(--ease-back), background-color .3s;
}
.video-play::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--gold-2);
  animation: pulseRing 2.4s var(--ease-soft) infinite;
}
@media (hover: hover) {
  .video-frame:hover img { transform: scale(1.05); filter: brightness(1.05); }
  .video-frame:hover .video-play { transform: translate(-50%, -50%) scale(1.08); }
}
.video-note {
  position: absolute; left: 16px; bottom: 16px; z-index: 3;
  padding: 8px 15px; border-radius: 999px;
  background: rgba(16,22,25,.66); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: rgba(255,255,255,.88); font-size: .74rem; font-weight: 700;
}
.video-frame.is-playing { cursor: default; }
.video-frame.is-playing img, .video-frame.is-playing .video-play,
.video-frame.is-playing .video-note, .video-frame.is-playing::after { display: none; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 4; }
@media (prefers-reduced-motion: reduce) { .video-play::before { animation: none; } }


/* --- 37 · Video testimonials ------------------------------------------
   The plumbing is always here; the rail only renders when a review
   actually has a video URL, so nothing is ever faked. Populate it in
   Admin → Reviews → "Video URL". ------------------------------------- */
.video-rail {
  display: grid; gap: clamp(14px, 1.8vw, 22px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.video-quote {
  background: var(--paper-0); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg) var(--r-lg) var(--r-data) var(--r-data);
  overflow: hidden; box-shadow: var(--sh-1);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
@media (hover: hover) { .video-quote:hover { transform: translateY(-5px); box-shadow: var(--sh-2); } }
.video-frame--quote { aspect-ratio: 16 / 9; border-radius: 0; box-shadow: none; }
.video-frame--quote .video-play { width: 58px; }
.video-quote__body { padding: 14px 18px 16px; }
.video-quote__body strong { display: block; font-weight: 800; color: var(--forest-900); font-size: .95rem; }
.video-quote__body span { display: block; font-family: var(--font-display); font-size: .72rem; color: var(--ink-3); margin-top: 3px; }

/* An honest empty state, shown only inside the admin-facing note. */
.video-empty {
  display: grid; gap: 10px; justify-items: start;
  padding: clamp(20px, 2.6vw, 30px);
  background: var(--paper-2); border: 1px dashed var(--paper-3); border-radius: var(--r);
}
.video-empty p { color: var(--ink-2); font-size: .92rem; max-width: 60ch; }

/* --- 37.1 "Video" marker on a written review that also has one --------- */
.quote .stars { display: flex; align-items: center; gap: 10px; }
.has-video {
  font-family: var(--font-display); font-size: .62rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--steel-700); background: var(--steel-100);
  padding: 3px 8px; border-radius: var(--r-data);
  display: inline-flex; align-items: center; gap: 5px;
}
.has-video::before {
  content: ""; width: 0; height: 0; border-style: solid;
  border-width: 4px 0 4px 6px; border-color: transparent transparent transparent currentColor;
}

/* --- 38 · Responsive corrections for the new hero --------------------- */
@media (max-width: 1080px) {
  .hero-search { grid-template-columns: 1fr 1fr; }
  .hero-search .btn { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .hero { min-height: auto; padding-block: calc(var(--header-h) + 44px) 76px; }
  .hero h1 { max-width: 100%; }
  .hero-cta { gap: 14px 18px; margin-top: 28px; }
  .hero-cta .btn--hero { width: 100%; min-height: 62px; }
  .hero-search { grid-template-columns: 1fr; margin-top: 46px; }
  .hero-search::before { margin-top: -26px; }
  .hero__stats { margin-top: 32px; }
  .hero__stat { flex: 1 1 42%; padding: 14px 14px 14px 0; }
  .hero__stat + .hero__stat { padding-left: 16px; }
  .scroll-hint { display: none; }
  .s-head { flex-direction: column; align-items: flex-start; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .split__media { aspect-ratio: 4 / 3.6; }
  .guarantee { padding-left: 30px; }
  .guarantee::before { left: 13px; }
}
@media (max-width: 460px) {
  .tiles { grid-template-columns: 1fr; }
  .hero__stat { flex: 1 1 100%; padding-left: 0 !important; }
  .hero__stat + .hero__stat::before { display: none; }
  .hero__stats { gap: 0; }
  .hero__stat + .hero__stat { border-top: 1px solid rgba(255,255,255,.14); }
}

/* =====================================================================
   Animated down payment  —  $37 ⌫ $47 ⌫ $97 … on a loop
   The figure types itself out, holds, backspaces and moves to the next
   real down payment. min-width is set in JS from the longest value so
   the headline never reflows. Falls back to a plain number when
   JavaScript is off or the visitor asked for reduced motion.
   ===================================================================== */
.down-cycle {
  display: inline-block;
  text-align: left;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.down-cycle__v { display: inline; }

/* the caret only exists while the script is actually cycling */
.down-cycle.is-typing::after {
  content: "";
  display: inline-block;
  width: .07em;
  min-width: 2px;
  height: .82em;
  margin-left: .06em;
  vertical-align: -.06em;
  background: currentColor;
  opacity: .85;
  animation: downCaret 1s steps(1, end) infinite;
}
@keyframes downCaret { 0%, 55% { opacity: .85; } 56%, 100% { opacity: 0; } }

/* in the hero stat row the caret is lighter so it reads as a cursor */
.down-cycle--stat.is-typing::after { height: .72em; opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  .down-cycle.is-typing::after { display: none; }
}


/* "We sell land every week on the marketplaces..." — two lines of real copy
   now, not a three-word label, so give it room and keep it readable. */
.seen > p.seen__lede {
  max-width: 54ch;
  margin: 0 auto 10px;
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 1.7vw, 1.18rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(243,245,242,.9);
}

/* =====================================================================
   Dark panels inside long-form copy
   .callout is a near-black card, but it lives inside .prose-block, whose
   link colour is the dark graphite meant for light backgrounds. The result
   on the Kit page was black links on a black box. Anything dark that sits
   inside prose needs its own link and list colours.
   ===================================================================== */
.callout { color: var(--surface-1); }
.prose-block .callout a:not(.btn) {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(198,240,75,.45);
  background-image: none;
}
.prose-block .callout a:not(.btn):hover { color: #fff; text-decoration-color: #fff; }
.callout p, .callout li, .callout ol, .callout ul, .callout h2, .callout h3 { color: var(--surface-1); }
.callout li::marker { color: rgba(198,240,75,.75); }
.callout ol, .callout ul { padding-left: 1.3em; margin: 0; }
.callout li + li { margin-top: .45em; }
.callout strong { color: var(--lime); }

/* =====================================================================
   ONE RULE FOR EVERY DARK PANEL
   Headings default to near-black and prose links to dark graphite, which is
   right on the pale surfaces but invisible on the dark cards. Any element
   that paints itself dark gets its text, headings, links and labels reset
   here, so a new dark panel can never ship unreadable again.
   ===================================================================== */
.capture,
.callout,
.section--forest,
.map-static,
.offer--dark {
  color: var(--surface-1);
}
.capture h1, .capture h2, .capture h3, .capture h4, .capture h5,
.callout h1, .callout h2, .callout h3, .callout h4, .callout h5,
.section--forest h1, .section--forest h2, .section--forest h3,
.section--forest h4, .section--forest h5,
.map-static h1, .map-static h2, .map-static h3, .map-static h4 {
  color: var(--surface-0);
}
.capture p, .capture li, .capture label, .capture dt, .capture dd,
.callout p, .callout li,
.map-static p, .map-static li {
  color: rgba(243, 245, 242, .88);
}
.capture .small, .capture .muted, .capture .eyebrow,
.callout .small, .callout .muted,
.map-static .small, .map-static .muted {
  color: rgba(243, 245, 242, .68);
}
.capture a:not(.btn), .callout a:not(.btn), .map-static a:not(.btn),
.section--forest a:not(.btn):not(.logos a) {
  color: var(--lime);
  text-decoration-color: rgba(198, 240, 75, .45);
  background-image: none;
}
.capture a:not(.btn):hover, .callout a:not(.btn):hover,
.map-static a:not(.btn):hover { color: #fff; text-decoration-color: #fff; }

/* A `.link` button or anchor sitting on a steel or dark panel was inheriting
   the dark-on-light treatment too. */
.capture .link, .callout .link, .map-static .link,
.section--forest .link, .section--steel .link {
  color: var(--lime);
}
.capture .link:hover, .callout .link:hover, .map-static .link:hover,
.section--forest .link:hover, .section--steel .link:hover { color: #fff; }

/* The map fallback sits on a pale static image, so its message needs its own
   dark plate rather than light text straight onto the picture. */
.map-static { position: relative; }
.map-static > div {
  position: relative;
  display: inline-block;
  max-width: 46ch;
  padding: 18px 22px;
  border-radius: var(--r);
  background: rgba(11, 16, 19, .86);
  backdrop-filter: blur(2px);
}
.map-static p { color: rgba(243, 245, 242, .92); }
.map-static .link, .map-static button.link { color: var(--lime); }

/* A team card with a name and a role but no description should not reserve
   three lines of empty space for text that is not there. */
.person--brief { min-height: 0; }
.person--brief .person__body { padding-bottom: clamp(16px, 2vw, 22px); }

/* --- 40 · Chat widget -------------------------------------------------- */
/*  Sits above everything, bottom right. Uses the brand tokens so it reads as
 *  part of the site rather than a bolted-on third-party box. */
.nhchat { position: fixed; right: 20px; bottom: 20px; z-index: 150; font-family: var(--font-body); }

.nhchat__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.nhchat__bubble {
  position: relative; display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--graphite-900); color: var(--lime-600);
  box-shadow: var(--sh-2);
  transition: transform .3s var(--ease), background-color .25s;
}
.nhchat__bubble:hover { transform: translateY(-2px); }
.nhchat__bubble:focus-visible { outline: 3px solid var(--lime-600); outline-offset: 3px; }
.nhchat__bubble-icon, .nhchat__bubble-close {
  grid-area: 1 / 1; display: grid; place-items: center;
  transition: opacity .2s, transform .25s var(--ease);
}
.nhchat__bubble-close { opacity: 0; transform: rotate(-45deg); }
.nhchat.is-open .nhchat__bubble-icon { opacity: 0; transform: rotate(45deg); }
.nhchat.is-open .nhchat__bubble-close { opacity: 1; transform: none; }

.nhchat__panel {
  position: absolute; right: 0; bottom: 74px;
  width: min(380px, calc(100vw - 40px));
  height: min(560px, calc(100svh - 140px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); color: var(--ink-2);
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  opacity: 0; transform: translateY(12px) scale(.98);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.nhchat.is-open .nhchat__panel { opacity: 1; transform: none; }

.nhchat__head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 16px 14px; background: var(--graphite-900); color: #fff;
}
.nhchat__head strong { display: block; font-family: var(--font-display); font-size: 1rem; }
.nhchat__sub { display: block; margin-top: 3px; font-size: .74rem; line-height: 1.45; color: rgba(255,255,255,.72); }
.nhchat__x {
  margin-left: auto; flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; border: 0; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.10); color: #fff;
}
.nhchat__x:hover { background: rgba(255,255,255,.2); }
.nhchat__x:focus-visible { outline: 2px solid var(--lime-600); outline-offset: 2px; }

.nhchat__log {
  flex: 1; overflow-y: auto; padding: 16px; display: flex;
  flex-direction: column; gap: 10px; scrollbar-width: thin;
  background: var(--paper-3);
}
.nhchat__msg { display: flex; }
.nhchat__msg--user { justify-content: flex-end; }
.nhchat__bubble-text {
  max-width: 85%; padding: 10px 13px; border-radius: 14px;
  font-size: .88rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;
}
.nhchat__msg--assistant .nhchat__bubble-text {
  background: var(--white); border: 1px solid var(--line-soft); border-bottom-left-radius: 5px;
}
.nhchat__msg--user .nhchat__bubble-text {
  background: var(--graphite-900); color: #fff; border-bottom-right-radius: 5px;
}
.nhchat__msg--error .nhchat__bubble-text { background: #FBE3E0; border-color: #F0C9C3; color: #8A2B20; }
.nhchat__bubble-text a { color: var(--lime-800); text-decoration: underline; }
.nhchat__msg--user .nhchat__bubble-text a { color: var(--lime-600); }

.nhchat__dot {
  display: inline-block; width: 6px; height: 6px; margin-right: 4px;
  border-radius: 50%; background: var(--ink-3); opacity: .35;
  animation: nhchatDot 1.1s infinite;
}
.nhchat__dot:nth-child(2) { animation-delay: .18s; }
.nhchat__dot:nth-child(3) { animation-delay: .36s; margin-right: 0; }
@keyframes nhchatDot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: .9; transform: translateY(-3px); } }

.nhchat__form {
  display: flex; align-items: flex-end; gap: 8px; padding: 10px;
  background: var(--white); border-top: 1px solid var(--line-soft);
}
.nhchat__form textarea {
  flex: 1; resize: none; max-height: 120px; padding: 10px 12px;
  font: inherit; font-size: .88rem; line-height: 1.45; color: var(--ink-2);
  background: var(--paper-3); border: 1px solid var(--line-soft); border-radius: 10px;
}
.nhchat__form textarea:focus-visible { outline: 2px solid var(--lime-600); outline-offset: 1px; }
.nhchat__send {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  border: 0; border-radius: 10px; cursor: pointer;
  background: var(--lime-600); color: var(--graphite-900);
  transition: filter .2s;
}
.nhchat__send:hover { filter: brightness(1.06); }
.nhchat__send:focus-visible { outline: 2px solid var(--graphite-900); outline-offset: 2px; }
.nhchat.is-busy .nhchat__send { opacity: .45; pointer-events: none; }

@media (max-width: 560px) {
  .nhchat { right: 14px; bottom: 14px; }
  .nhchat__panel { width: calc(100vw - 28px); height: min(70svh, calc(100svh - 110px)); }
}
/* The sticky mobile CTA bar already owns the bottom of the screen. */
@media (max-width: 760px) {
  .nhchat { bottom: 86px; }
}
@media (prefers-reduced-motion: reduce) {
  .nhchat__bubble, .nhchat__panel, .nhchat__bubble-icon, .nhchat__bubble-close { transition: none; }
  .nhchat__dot { animation: none; }
}