/* Single committed theme: light ivory page with the flyer's black & metallic gold */
  :root {
    --ground: #FFFFFF;
    --surface: #FAF8F3;
    --ink: #171410;
    --ink-soft: #4E463A;
    --ink-faint: #7D7361;
    --black: #0A0906;
    --black-band: #060606;
    /* The exact black inside logo.png / logo-old.jpg (sampled: pure #000).
       Any surface the logo sits directly on must use this, or the image's
       own background shows as a visible rectangle behind the crest. */
    --logo-black: #000000;
    --gold-text: #8A6B21;
    --gold: #CD9838;
    --gold-hi: #DDB459;
    --gold-pale: #EAD9AC;
    --line: #ECE7DB;
    --card-shadow: 0 1px 2px rgba(23,20,16,.06), 0 8px 28px rgba(23,20,16,.08);
    --photo-a: #211C10;
    --photo-b: #5C4B24;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 84px; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }
  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
  }
  h1, h2, h3, .serif {
    font-family: Didot, "Bodoni MT", "Bodoni 72", "Playfair Display", Georgia, serif;
    font-weight: 500;
    line-height: 1.15;
    text-wrap: balance;
    margin: 0;
  }
  a { color: inherit; }
  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
  .eyebrow {
    font-size: 12.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-text);
    font-weight: 700;
    margin: 0 0 14px;
    display: inline-flex; align-items: center; gap: 12px;
  }
  .eyebrow::before {
    content: ""; width: 36px; height: 1px; flex: none;
    background: linear-gradient(90deg, var(--gold), rgba(205,152,56,.15));
  }
  .script-accent {
    font-family: "Snell Roundhand", "Segoe Script", "Lucida Handwriting", "Brush Script MT", cursive;
    font-size: 23px; color: var(--gold-text); margin: 18px 0 0;
  }
  section { padding: 88px 0; }
  .section-head { max-width: 640px; margin-bottom: 48px; }
  .section-head h2 { font-size: clamp(30px, 4.5vw, 46px); letter-spacing: -0.01em; }
  .section-head p { color: var(--ink-soft); margin: 14px 0 0; }
  :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
  /* Scroll-reveal: content slides/fades in as it enters the viewport (JS adds .reveal; no-JS = visible) */
  /* Scroll-reveal now speaks the same motion language as the hero load-in
     below — same easing, same travel, same --i stagger, same drawing rule.
     Transitions rather than animations, because the trigger is a class the
     observer toggles on arrival, not page load: an on-load animation would
     play while these sections are still off screen and be over before you
     scrolled to them. */
  .reveal {
    opacity: 0; transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.25,0,.35,1), transform .7s cubic-bezier(.25,0,.35,1);
    transition-delay: calc(var(--i, 0) * .09s);
  }
  .reveal.from-left { transform: translateX(-44px); }
  .reveal.from-right { transform: translateX(56px); }
  .reveal.in { opacity: 1; transform: none; }
  /* The heading rule, drawn as the heading arrives. */
  .reveal-rule { position: relative; display: inline-block; }
  .reveal-rule::after {
    content: ""; position: absolute; left: 0; bottom: -10px; height: 2px; width: 100%;
    background: var(--gold); transform: scaleX(0); transform-origin: left center;
    transition: transform .5s ease-out;
    transition-delay: calc(var(--i, 0) * .09s + .3s);
  }
  .reveal-rule.in::after { transform: scaleX(1); }

  /* ─── Load-in ───
     Above-the-fold text rises into place on first paint, one line after the
     next, with a rule that draws itself left-to-right underneath. Ported from
     wrappdbeauty.com's hero intro: fade-up over .7s on cubic-bezier(.25,0,.35,1),
     lines ~.14s apart, rule drawn over .5s landing just after the last line.
     Pure CSS — no JS, so it cannot flash-then-animate on a slow connection.
     The stagger reads from --i, so any number of lines share one class.
     prefers-reduced-motion is already killed globally at the top of this sheet. */
  @keyframes load-fade-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
  @keyframes load-fly-left { from { opacity: 0; transform: translateX(-44px); } to { opacity: 1; transform: none; } }
  @keyframes load-fly-right { from { opacity: 0; transform: translateX(56px); } to { opacity: 1; transform: none; } }
  @keyframes load-draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  /* Same family, used by the mobile menu (see the nav block below). */
  @keyframes menu-panel-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  @keyframes menu-row-in { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
  .load-in {
    animation: load-fade-up .7s cubic-bezier(.25,0,.35,1) both;
    animation-delay: calc(.05s + var(--i, 0) * .14s);
  }
  /* Direction variants. Horizontal travel is longer than the vertical default
     because a sideways entrance needs the extra distance to read as flight
     rather than a nudge; the logo gets more still, being the larger object. */
  .load-in.from-left { animation-name: load-fly-left; }
  .load-in.from-right { animation-name: load-fly-right; }
  /* inline-block so the rule is as wide as the words, not the whole column. */
  .draw-rule { position: relative; display: inline-block; }
  .draw-rule::after {
    content: ""; position: absolute; left: 0; bottom: -8px; height: 2px; width: 100%;
    background: var(--gold); transform-origin: left center;
    animation: load-draw-x .5s ease-out both;
    animation-delay: calc(.05s + var(--i, 0) * .14s + .35s);
  }
  .hero.has-bg .draw-rule::after { background: var(--gold-hi); }

  /* ─── Nav: black masthead like the flyer ─── */
  nav {
    position: sticky; top: 0; z-index: 50;
    /* Opaque, not rgba(6,6,6,.94): the translucency let page content tint the
       bar as you scrolled, so the logo's black never matched what sat behind it. */
    background: var(--logo-black);
    border-bottom: 2px solid var(--gold);
  }
  .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
  .wordmark { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #F3ECD9; }
  .crest { width: 38px; height: 38px; flex: none; }
  .wordmark .mark {
    font-family: Didot, "Bodoni MT", Georgia, serif;
    font-size: 20px; letter-spacing: .1em; color: #F3ECD9; line-height: 1.1;
  }
  .wordmark .mark b { color: var(--gold); font-weight: 500; }
  .wordmark .tag { display: block; font-size: 9.5px; letter-spacing: .42em; text-transform: uppercase; color: var(--gold); }
  .nav-links { display: flex; gap: 30px; align-items: center; }
  .nav-links a {
    text-decoration: none; font-size: 14.5px; font-weight: 500; color: #CFC7B0;
    transition: color .2s; white-space: nowrap;
  }
  .nav-links a:hover { color: var(--gold-hi); }
  .nav-dropdown { position: relative; display: flex; align-items: center; }
  .nav-menu {
    position: absolute; top: calc(100% + 8px); left: 0; min-width: 172px;
    background: rgba(6,6,6,.98); border: 1px solid rgba(205,152,56,.4);
    border-radius: 5px; padding: 6px; flex-direction: column; gap: 2px;
    box-shadow: 0 14px 34px rgba(0,0,0,.45); display: none; z-index: 60;
  }
  .nav-dropdown:hover .nav-menu, .nav-dropdown:focus-within .nav-menu { display: flex; }
  .nav-menu a { padding: 9px 14px; border-radius: 3px; white-space: nowrap; font-size: 14px; }
  .nav-menu a:hover { background: rgba(205,152,56,.14); color: var(--gold-hi); }
  .nav-cta {
    background: var(--gold); color: #060606 !important;
    padding: 11px 22px; border-radius: 2px; font-weight: 700 !important; transition: background .2s;
    text-transform: uppercase; letter-spacing: .1em; font-size: 12.5px !important;
  }
  .nav-cta:hover { background: var(--gold-hi); }

  /* ─── Mobile nav ───
     Below the breakpoint the links used to be flatly display:none — the phone
     had no navigation at all, just the language chips and the CTA. They now
     fold into a hamburger panel instead: links, then languages, then the CTA
     last. The breakpoint is 860px, not the more usual 720px, because the full
     row (wordmark + 5 links + Team dropdown + 4 language chips + CTA) needs
     ~960px to lay out on one line; below 721 it used to overflow the page into
     a horizontal scroll, and squeezing it to fit only made the labels wrap onto
     two lines. Keep this number in step with the matchMedia guard in the
     hamburger script. */
  .nav-toggle { display: none; }
  @media (max-width: 960px) {
    .nav-toggle {
      display: inline-flex; flex: none; flex-direction: column; justify-content: center;
      gap: 5px; width: 46px; height: 44px; padding: 0 9px;
      background: transparent; border: 1px solid rgba(205,152,56,.45);
      border-radius: 4px; cursor: pointer;
    }
    .nav-toggle span {
      display: block; height: 2px; background: var(--gold); border-radius: 2px;
      transition: transform .22s ease, opacity .16s ease;
    }
    .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Hangs off <nav> — sticky is a positioned element, so it is the containing
       block, and the panel spans full width instead of being inset by .wrap. */
    .nav-links {
      display: none;
      position: absolute; top: 100%; left: 0; right: 0;
      flex-direction: column; align-items: stretch; gap: 0;
      background: var(--logo-black); border-bottom: 2px solid var(--gold);
      box-shadow: 0 18px 40px rgba(0,0,0,.5);
      padding: 4px 0 18px;
      max-height: calc(100dvh - 100%); overflow-y: auto;
    }
    .nav-links.is-open { display: flex; animation: menu-panel-in .22s ease-out both; }

    /* Rows slide in from the left, top to bottom, the way wrappdbeauty.com's
       mobile menu does. Tight stagger — the last row lands at ~.34s, so the
       menu still feels instant. Delays are listed rather than computed
       because nth-child cannot be fed into calc(). */
    .nav-links.is-open > * { animation: menu-row-in .32s cubic-bezier(.25,0,.35,1) both; }
    .nav-links.is-open > *:nth-child(1) { animation-delay: .03s; }
    .nav-links.is-open > *:nth-child(2) { animation-delay: .075s; }
    .nav-links.is-open > *:nth-child(3) { animation-delay: .12s; }
    .nav-links.is-open > *:nth-child(4) { animation-delay: .165s; }
    .nav-links.is-open > *:nth-child(5) { animation-delay: .21s; }
    .nav-links.is-open > *:nth-child(6) { animation-delay: .255s; }
    .nav-links.is-open > *:nth-child(7) { animation-delay: .3s; }
    /* Two-class selectors deliberately: the touch-target block further down
       sets display:inline-flex on .nav-team and .nav-cta, which would otherwise
       win on source order and shrink these rows to their text width. */
    .nav-links > a:not(.nav-cta), .nav-links .nav-team {
      padding: 14px 24px; font-size: 16px; min-height: 44px; white-space: normal;
      display: flex; align-items: center;
      border-bottom: 1px solid rgba(205,152,56,.14);
    }
    .nav-dropdown { display: block; }
    /* Touch has no hover, so Team's sub-links are always shown, just indented. */
    .nav-menu {
      position: static; display: flex; min-width: 0;
      background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0;
    }
    .nav-menu a {
      padding: 13px 24px 13px 44px; font-size: 15px; min-height: 44px;
      display: flex; align-items: center; border-radius: 0; color: #B5AC96;
      border-bottom: 1px solid rgba(205,152,56,.14);
    }
    .lang { gap: 8px; padding: 18px 24px 0; }
    .lang button { flex: 1; min-height: 44px; font-size: 13px; }
    .nav-links .nav-cta {
      display: flex; margin: 16px 24px 0; justify-content: center;
      padding: 15px 22px !important; font-size: 13.5px !important;
    }
  }

  /* ─── Hero: light ivory with gold warmth ─── */
  header.hero {
    background:
      radial-gradient(ellipse 75% 60% at 85% 0%, rgba(205,152,56,.13) 0%, transparent 55%),
      radial-gradient(ellipse 55% 45% at 5% 100%, rgba(205,152,56,.10) 0%, transparent 60%),
      linear-gradient(165deg, #FFFFFF 0%, #FBF7EC 60%, #FFFFFF 100%);
    padding: 96px 0 84px;
    border-bottom: 3px solid var(--gold);
    position: relative; overflow: hidden;
  }
  /* Ken Burns photo hero — activates only once a real hero.jpg exists (JS adds .has-bg) */
  .hero-bg { position: absolute; inset: 0; z-index: 0; background: #0A0906 72% center/cover no-repeat; opacity: 0; transition: opacity .8s ease; will-change: transform; }
  .hero.has-bg .hero-bg { opacity: 1; }
  .hero.has-bg::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(6,6,6,.86) 0%, rgba(6,6,6,.6) 42%, rgba(6,6,6,.2) 100%), linear-gradient(0deg, rgba(6,6,6,.55), rgba(6,6,6,.08) 60%); }
  .hero .wrap { position: relative; z-index: 2; }
  @keyframes kenburns { 0% { transform: scale(1.08) translate(0, 0); } 100% { transform: scale(1.2) translate(-2.5%, -2%); } }
  @media (prefers-reduced-motion: reduce) { .hero.has-bg .hero-bg { animation: none; } }
  /* Light text once the photo is behind it */
  .hero.has-bg .eyebrow { color: var(--gold-hi); }
  .hero.has-bg .eyebrow::before { background: linear-gradient(90deg, var(--gold-hi), rgba(221,180,89,.15)); }
  .hero.has-bg h1 { color: #FFFFFF; }
  .hero.has-bg h1 em { color: var(--gold-hi); }
  .hero.has-bg .lede { color: #ECE6D8; }
  .hero.has-bg .script-accent { color: var(--gold-hi); }
  .hero.has-bg .search-note { color: #D8CFB8; }
  .hero.has-bg .hero-stats .stat b { color: #FFFFFF; }
  .hero.has-bg .hero-stats .stat span { color: #CFC7B0; }
  .hero-top { display: flex; gap: 56px; align-items: center; justify-content: space-between; }
  .hero-copy { min-width: 0; }
  .hero-brand {
    flex: none; background: var(--logo-black); border: 1px solid rgba(205,152,56,.55);
    border-radius: 3px; padding: 30px 36px;
    box-shadow: 0 18px 50px rgba(23,20,16,.22), inset 0 0 0 5px var(--logo-black), inset 0 0 0 6px rgba(205,152,56,.4);
  }
  .hero-brand img { display: block; height: 190px; width: auto; }
  @media (max-width: 880px) { .hero-brand { display: none; } }
  /* Hero search — the centerpiece */
  .hero-search { margin-top: 44px; max-width: 720px; }
  .search-tabs { display: inline-flex; gap: 6px; margin-bottom: 12px; }
  .search-tab { border: 1px solid var(--gold-pale); background: #fff; font-family: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); padding: 9px 22px; border-radius: 99px; cursor: pointer; transition: background .18s, color .18s, border-color .18s; }
  .search-tab:hover { border-color: var(--gold); color: var(--ink); }
  .search-tab.is-active { background: var(--black); color: var(--gold-hi); border-color: var(--black); }
  .search-note { font-size: 12.5px; color: var(--ink-faint); margin: 12px 0 0; }
  .hero h1 { font-size: clamp(40px, 6.5vw, 74px); max-width: 15ch; color: var(--ink); letter-spacing: -0.02em; }
  .hero h1 em { font-style: italic; color: var(--gold-text); }
  .hero .lede { max-width: 54ch; margin: 22px 0 0; font-size: 18.5px; color: var(--ink-soft); }
  .search {
    margin-top: 38px; display: flex; max-width: 620px;
    background: #FFFFFF; border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
    box-shadow: 0 10px 34px rgba(23,20,16,.12);
  }
  .search input {
    flex: 1; min-width: 0; border: 0; padding: 17px 20px; font-size: 16px;
    font-family: inherit; color: var(--ink); background: transparent;
  }
  .search input::placeholder { color: #8F866F; }
  .search input:focus { outline: none; }
  .search button {
    border: 0; background: var(--black); color: var(--gold-hi); font-family: inherit;
    font-size: 15px; font-weight: 700; letter-spacing: .04em;
    padding: 0 30px; cursor: pointer; display: flex; align-items: center; gap: 9px;
    text-transform: uppercase; letter-spacing: .1em;
    transition: background .2s, color .2s;
  }
  .search button:hover { background: #1E1A10; color: #EAD9AC; }
  .area-wrap { display: flex; gap: 18px; margin-top: 26px; max-width: 880px; align-items: stretch; }
  .areas { display: flex; flex-direction: column; gap: 9px; width: 220px; flex: none; }
  .area-wrap:not(:has(#area-map.ready)) .areas { flex-direction: row; flex-wrap: wrap; width: 100%; }
  @media (max-width: 800px) {
    .area-wrap { flex-direction: column; }
    .areas { flex-direction: row; flex-wrap: wrap; width: 100%; }
  }
  .area {
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 600; letter-spacing: .04em;
    color: var(--ink-soft); background: #FFFFFF; border: 1px solid var(--gold-pale);
    padding: 6px 14px; border-radius: 99px;
  }
  .area svg { width: 13px; height: 13px; stroke: var(--gold-text); }
  #area-map {
    display: none; flex: 1; min-width: 0; height: 340px;
    border: 1px solid var(--gold-pale); border-radius: 3px;
    box-shadow: var(--card-shadow); position: relative; z-index: 0;
  }
  #area-map.ready { display: block; }
  @media (max-width: 640px) { #area-map { height: 280px; } }
  #valuation .area-wrap { flex-direction: column-reverse; margin-top: 26px; max-width: none; }
  #valuation .areas { flex-direction: row; flex-wrap: wrap; width: 100%; }
  .hero-stats { display: flex; gap: 0 44px; margin-top: 48px; flex-wrap: wrap; }
  .hero-stats .stat + .stat { border-left: 1px solid var(--gold-pale); padding-left: 44px; }
  .hero-stats .stat b {
    display: block; font-family: Didot, "Bodoni MT", Georgia, serif;
    font-size: 48px; font-weight: 500; color: var(--gold-text);
    font-variant-numeric: tabular-nums; line-height: 1.05;
  }
  .hero-stats .stat span { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }

  /* ─── Market stats band (Find great homes in Florida) ─── */
  #market-stats { background: var(--black-band); color: #F3ECD9; text-align: center; border-block: 1px solid rgba(205,152,56,.35); }
  #market-stats h2 { font-size: clamp(28px, 4vw, 44px); color: #FFFFFF; }
  #market-stats .market-boxes { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; margin-top: 40px; }
  #market-stats .market-box { flex: 1 1 180px; max-width: 220px; background: rgba(255,255,255,.04); border: 1px solid rgba(205,152,56,.4); border-radius: 6px; padding: 30px 20px; }
  #market-stats .market-box b { display: block; font-family: Didot, "Bodoni MT", Georgia, serif; font-weight: 500; font-size: 46px; color: var(--gold); line-height: 1; }
  #market-stats .market-box span { display: block; margin-top: 10px; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: #CFC7B0; }

  /* ─── Listings ─── */
  .carousel { position: relative; }
  .carousel-btn {
    position: absolute; top: 42%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--gold-pale);
    background: #fff; color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--card-shadow); z-index: 5; transition: background .18s, color .18s, border-color .18s;
  }
  .carousel-btn:hover { background: var(--black); color: var(--gold-hi); border-color: var(--black); }
  .carousel-btn.prev { left: -18px; }
  .carousel-btn.next { right: -18px; }
  .grid-listings {
    display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-behavior: smooth; padding: 8px 4px 16px; scrollbar-width: none;
  }
  .grid-listings::-webkit-scrollbar { display: none; }
  /* While the row is gliding under its own power, snapping would drag it back
     to card boundaries and smooth-scrolling would fight each frame's nudge.
     Both come back as soon as the visitor touches it. */
  .grid-listings.rolling { scroll-snap-type: none; scroll-behavior: auto; }
  .grid-listings > .listing { flex: 0 0 clamp(280px, 78vw, 330px); scroll-snap-align: start; }
  @media (max-width: 720px) { .carousel-btn { display: none; } }
  .listing {
    background: var(--surface); border: 1px solid var(--line); border-radius: 3px;
    overflow: hidden; box-shadow: var(--card-shadow); cursor: pointer;
    transition: box-shadow .25s, border-color .25s, transform .25s;
  }
  .listing:hover { box-shadow: 0 4px 8px rgba(23,20,16,.1), 0 18px 44px rgba(23,20,16,.16); border-color: var(--gold); transform: translateY(-3px); }
  .photo {
    aspect-ratio: 16 / 10; position: relative; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--photo-a), var(--photo-b));
  }
  .photo::after {
    content: ""; position: absolute; inset: 10px;
    border: 1px solid rgba(205,152,56,.35); pointer-events: none;
  }
  .photo svg { width: 72px; height: 72px; opacity: .55; }
  .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .photo .badge {
    position: absolute; top: 14px; left: 14px;
    background: var(--gold); color: #060606;
    font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    padding: 5px 11px; border-radius: 3px;
  }
  .listing .body { padding: 20px 22px 22px; }
  .photo .badge.badge-pending { background: #5A5346; color: #F3ECD9; }
  .mls-num { font-size: 11.5px; color: var(--ink-faint); letter-spacing: .05em; margin-top: 10px; }
  .county { font-size: 12.5px; color: var(--gold-text); margin-top: 3px; font-weight: 600; }
  .filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 30px; }
  .filter-bar select { font-family: inherit; font-size: 14px; padding: 9px 12px; border: 1px solid var(--gold-pale); border-radius: 4px; background: #fff; color: var(--ink); cursor: pointer; }
  .filter-bar select:focus-visible { outline: 2px solid var(--gold); }
  .f-reset { font-family: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 9px 16px; border: 1px solid var(--black); background: var(--black); color: var(--gold-hi); border-radius: 4px; cursor: pointer; }
  .f-reset:hover { background: #1E1A10; }
  .f-count { font-size: 13px; color: var(--ink-faint); margin-left: auto; }
  /* ─── Intake quiz ───
     A qualifying flow, not a discount popup. Two deliberate differences from the
     usual entry modal: it opens on *intent* (scroll depth, dwell, or exit) rather
     than on load, and it asks for contact details last, after the visitor has
     already answered four cheap questions. Asking for the email first is what
     kills completion on these.

     Desktop only, per Robertson. That also keeps us clear of Google's intrusive-
     interstitial penalty, which only applies to small screens — see the hard
     display:none below 900px at the end of this block, which backs up the JS gate. */
  .quiz { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; padding: 28px; }
  .quiz.open { display: flex; }
  .quiz-overlay { position: absolute; inset: 0; background: rgba(10, 9, 6, .58); backdrop-filter: blur(2px); animation: quiz-fade .32s cubic-bezier(.25,0,.35,1) both; }
  .quiz-card {
    position: relative; width: min(560px, 100%); max-height: calc(100vh - 56px); overflow-y: auto;
    background: var(--ground); border-radius: 4px; border-top: 3px solid var(--gold);
    box-shadow: 0 24px 70px rgba(10,9,6,.34); padding: 38px 40px 34px;
    animation: quiz-rise .46s cubic-bezier(.25,0,.35,1) both;
  }
  @keyframes quiz-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes quiz-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
  .quiz-close {
    position: absolute; top: 12px; right: 14px; background: none; border: 0; cursor: pointer;
    font-size: 26px; line-height: 1; color: var(--ink-faint); padding: 6px 10px; border-radius: 2px;
  }
  .quiz-close:hover { color: var(--ink); }
  .quiz-eyebrow { font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-text); font-weight: 700; margin: 0 0 12px; }
  .quiz-q { font-size: clamp(23px, 2.4vw, 29px); margin: 0 0 6px; }
  .quiz-sub { color: var(--ink-soft); font-size: 15px; margin: 0 0 24px; }
  .quiz-options { display: grid; gap: 10px; margin: 0 0 8px; }
  .quiz-options.two { grid-template-columns: 1fr 1fr; }
  .quiz-opt {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
    background: var(--surface); border: 1px solid var(--line); border-radius: 3px;
    padding: 15px 18px; font: inherit; font-size: 15.5px; color: var(--ink);
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
  }
  .quiz-opt:hover { border-color: var(--gold); background: #FFF; transform: translateX(3px); }
  .quiz-opt[aria-pressed="true"] { border-color: var(--gold); background: #FFF; box-shadow: inset 3px 0 0 var(--gold); }
  .quiz-progress { display: flex; gap: 6px; margin: 0 0 22px; }
  .quiz-progress span { height: 3px; flex: 1; background: var(--line); border-radius: 2px; transition: background .3s ease; }
  .quiz-progress span.done { background: var(--gold); }
  .quiz-back {
    background: none; border: 0; cursor: pointer; font: inherit; font-size: 14px;
    color: var(--ink-faint); padding: 10px 0 0; text-decoration: underline; text-underline-offset: 3px;
  }
  .quiz-back:hover { color: var(--ink); }
  .quiz-field { margin: 0 0 14px; }
  .quiz-field label { display: block; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 6px; font-weight: 600; }
  .quiz-field input {
    width: 100%; padding: 12px 14px; font: inherit; font-size: 15.5px; color: var(--ink);
    background: var(--surface); border: 1px solid var(--line); border-radius: 3px;
  }
  .quiz-field input:focus { outline: none; border-color: var(--gold); background: #FFF; }
  .quiz-consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 18px; }
  /* width:auto is load-bearing. The global `form input { width: 100% }` above
     also matches this checkbox, stretching it across the card and squeezing
     the consent sentence into an unreadable ~80px column with the submit
     button pushed off the bottom. flex:none cannot override an explicit
     width, so it has to be reset here. */
  .quiz-consent input { margin-top: 3px; flex: none; width: auto; }
  .quiz-consent label { font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); }
  .quiz-submit {
    width: 100%; padding: 15px 20px; font: inherit; font-size: 15px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
    background: var(--black); color: var(--gold-hi); border: 1px solid var(--black); border-radius: 3px;
    transition: background .2s ease, color .2s ease;
  }
  .quiz-submit:hover { background: var(--gold); color: #060606; border-color: var(--gold); }
  .quiz-submit[disabled] { opacity: .6; cursor: default; }
  .quiz-recap { font-size: 13.5px; color: var(--ink-faint); margin: 0 0 20px; padding: 12px 14px; background: var(--surface); border-left: 2px solid var(--gold-pale); }
  .quiz-done { text-align: center; padding: 14px 0 6px; }
  .quiz-done .quiz-tick { font-size: 42px; color: var(--gold); line-height: 1; }
  .quiz-done h3 { font-size: 27px; margin: 14px 0 10px; }
  .quiz-done p { color: var(--ink-soft); margin: 0 0 8px; }
  .quiz-fallback a { display: inline-block; margin-top: 10px; color: var(--gold-text); font-weight: 700; }
  /* Hover belongs to pointers. On touch, :hover sticks after a tap and the
     option a visitor just chose stays nudged sideways looking half-pressed. */
  @media (hover: none) {
    .quiz-opt:hover { border-color: var(--line); background: var(--surface); transform: none; }
    .quiz-close:hover { color: var(--ink-faint); }
    .quiz-submit:hover { background: var(--black); color: var(--gold-hi); border-color: var(--black); }
  }

  /* Phones. The quiz used to be hidden outright below 900px; it now runs
     everywhere, so the card has to earn its place on a small screen. */
  @media (max-width: 899px) {
    /* Lifted clear of the very bottom edge — flush against it read as part
       of the browser chrome rather than as a card. */
    .quiz { padding: 12px 12px 34px; align-items: flex-end; }
    .quiz-card {
      width: 100%;
      /* dvh, not vh: mobile browser chrome slides away and vh does not
         follow it, which leaves the submit button under the address bar. */
      max-height: calc(100dvh - 46px);
      padding: 22px 18px 20px;
      border-radius: 10px;
    }
    /* Four options side by side leaves ~150px each — the labels wrap to
       three lines. One column, full width, comfortable to hit. */
    .quiz-options.two { grid-template-columns: 1fr; }
    .quiz-q { font-size: 20px; }
    .quiz-sub { font-size: 14px; margin-bottom: 17px; }
    .quiz-eyebrow { font-size: 11.5px; margin-bottom: 9px; }
    .quiz-progress { margin-bottom: 17px; }
    .quiz-opt { padding: 13px 16px; font-size: 15px; }
    .quiz-options { gap: 8px; }
    /* iOS zooms the whole page in when a focused input is under 16px. */
    .quiz-field input { font-size: 16px; }
    /* 26px glyph in 6px padding is a ~38px target; 44px is the floor. */
    .quiz-close { top: 6px; right: 6px; padding: 10px 14px; }
  }

  /* Listing detail modal */
  .listing-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
  .listing-modal[hidden] { display: none; }
  .lm-overlay { position: absolute; inset: 0; background: rgba(6,6,6,.72); backdrop-filter: blur(3px); }
  .lm-card { position: relative; z-index: 1; background: var(--ground); border: 1px solid var(--gold); border-radius: 6px; max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 70px rgba(0,0,0,.5); }
  .lm-close { position: absolute; top: 10px; right: 12px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(6,6,6,.5); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
  .lm-close:hover { background: var(--black); color: var(--gold-hi); }
  .lm-photo { aspect-ratio: 16/10; background: linear-gradient(135deg, var(--photo-a), var(--photo-b)); display: grid; place-items: center; }
  .lm-photo svg { width: 84px; height: 84px; opacity: .5; }
  .lm-photo img { width: 100%; height: 100%; object-fit: cover; }
  .lm-body { padding: 24px 28px 28px; }
  .lm-status { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 4px 11px; border-radius: 3px; background: var(--gold); color: #060606; margin-bottom: 12px; }
  .lm-status.pending { background: #5A5346; color: #F3ECD9; }
  .lm-price { font-family: Didot, "Bodoni MT", Georgia, serif; font-size: 34px; color: var(--ink); }
  .lm-addr { font-size: 16px; color: var(--ink-soft); margin-top: 4px; }
  .lm-county { font-size: 13px; color: var(--gold-text); font-weight: 600; margin-top: 4px; }
  .lm-specs { list-style: none; padding: 16px 0; margin: 18px 0; display: flex; flex-wrap: wrap; gap: 10px 26px; border-block: 1px solid var(--line); }
  .lm-specs li { font-size: 15px; color: var(--ink); }
  .lm-specs li b { display: block; font-size: 11.5px; color: var(--ink-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
  .lm-mls { font-size: 12.5px; color: var(--ink-faint); margin-bottom: 20px; }
  .lm-actions { display: flex; flex-wrap: wrap; gap: 10px; }
  .lm-btn { font-family: inherit; font-size: 13.5px; font-weight: 600; padding: 11px 16px; border-radius: 4px; border: 1px solid var(--gold); color: var(--ink); text-decoration: none; transition: background .18s, color .18s; }
  .lm-btn:hover { background: var(--gold); color: #060606; }
  .lm-btn-primary { background: var(--black); color: var(--gold-hi); border-color: var(--black); }
  .lm-btn-primary:hover { background: #1E1A10; color: #EAD9AC; }
  .price {
    font-family: Didot, "Bodoni MT", Georgia, serif; font-size: 26px; color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .addr { color: var(--ink-soft); font-size: 15px; margin: 4px 0 14px; }
  .specs { display: flex; gap: 18px; color: var(--ink-faint); font-size: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
  .specs span { display: flex; align-items: center; gap: 6px; }
  .specs svg { width: 16px; height: 16px; stroke: var(--gold-text); }

  /* ─── Agents ─── */
  #agents { background: var(--surface); border-block: 1px solid var(--line); }
  .grid-agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
  /* Leadership (Staff) + Agents sections centered */
  #staff .section-head, #agents .section-head { margin-left: auto; margin-right: auto; text-align: center; }
  #staff-grid, #agent-grid { display: flex; flex-wrap: wrap; justify-content: center; }
  #staff-grid > .agent, #agent-grid > .agent { flex: 1 1 200px; max-width: 240px; }
  #staff-grid > .agent-detail, #agent-grid > .agent-detail { flex-basis: 100%; }
  .agent-picker { display: none; }
  @media (max-width: 640px) {
    .agent-picker { display: block; width: 100%; font-family: inherit; font-size: 15px; padding: 12px 14px; border: 1px solid var(--gold-pale); border-radius: 6px; background: #fff; color: var(--ink); margin-bottom: 20px; cursor: pointer; }
    #agent-grid { display: block; }
    #agent-grid > .agent { display: none; max-width: none; }
    #agent-grid > .agent.picked { display: block; }
  }
  .agent {
    background: var(--ground); border: 1px solid var(--line); border-radius: 3px;
    padding: 26px 18px 22px; text-align: center; cursor: pointer; width: 100%;
    font-family: inherit; font-size: inherit; color: inherit;
    transition: border-color .2s, box-shadow .2s, transform .2s;
  }
  .agent:hover { border-color: var(--gold); box-shadow: var(--card-shadow); transform: translateY(-3px); }
  .agent[aria-expanded="true"] { border-color: var(--gold); background: var(--surface); box-shadow: var(--card-shadow); }
  .avatar {
    /* 104px to match the home-page strip, which is the crop Robertson wants:
       at 76px the media-day headshots needed a 1.34x zoom to stop the head
       looking tiny, and that zoom is what made these read differently from
       the strip. Bigger circle, no zoom, same 22% object-position. */
    width: 104px; height: 104px; margin: 0 auto 14px; border-radius: 50%;
    display: grid; place-items: center; overflow: hidden;
    background: linear-gradient(140deg, var(--black), var(--photo-b));
    color: var(--gold-pale); font-family: Didot, "Bodoni MT", Georgia, serif;
    font-size: 25px; letter-spacing: .04em;
    border: 2px solid var(--gold);
  }
  .avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
  /* No zoom on the grid circles any more — see the .avatar note above. The
     open profile plate and the phone detail circle still set their own. */
  .avatar img.md { transform: none; }
  .agent h3 { font-size: 18.5px; }
  .agent .role { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); margin: 5px 0 0; font-weight: 700; }
  .agent .hint { font-size: 12.5px; color: var(--ink-faint); margin: 10px 0 0; }
  .agent-detail {
    grid-column: 1 / -1; background: var(--ground); border: 1px solid var(--gold);
    border-radius: 3px; padding: 34px 36px; display: none;
  }
  .agent-detail.open { display: grid; grid-template-columns: auto 1fr; gap: 34px; align-items: start; }
  /* Open profile: the headshot becomes a framed portrait plate, with the bio,
     contact row and message form filling the column beside it. The small circle
     is kept for the cards — and for mobile, where a portrait this size would
     push the form below the fold. */
  .agent-detail .avatar {
    width: 232px; height: 290px; margin: 0;
    border-radius: 2px; border: 1px solid var(--gold);
    box-shadow: 0 0 0 1px var(--ground) inset, var(--card-shadow);
    font-size: 54px;
  }
  .agent-detail .avatar img { object-position: 50% 18%; }
  .agent-detail .avatar img.md { transform: none; }
  .agent-detail h3 { font-size: 27px; }
  .agent-detail .role { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); font-weight: 700; margin: 4px 0 12px; }
  .agent-detail p.bio { color: var(--ink-soft); max-width: 62ch; margin: 0 0 18px; }
  .contact-row { display: flex; gap: 26px; flex-wrap: wrap; font-size: 14.5px; }
  .contact-row a { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink-soft); transition: color .2s; }
  .contact-row a:hover { color: var(--gold-text); }
  .contact-row svg { width: 16px; height: 16px; stroke: var(--gold-text); }
  .chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
  .chip {
    font-size: 12px; font-weight: 600; letter-spacing: .06em;
    background: rgba(205,152,56,.12);
    color: var(--gold-text); border: 1px solid rgba(205,152,56,.4);
    padding: 4px 12px; border-radius: 99px;
  }
  /* Phones drop the grid entirely: block layout lets the avatar float, so the
     name sits beside the face and the bio flows on underneath it. As a
     single-column grid the two were simply stacked. */
  @media (max-width: 640px) { .agent-detail.open { display: block; } }

  /* ─── Brokerage film ───
     preload="none" on the element: this is a 5½-minute 1080p file, so nothing
     is fetched until the visitor presses play — the poster is all the page
     pays for. */
  .film { margin: 56px 0 0; }
  .film-frame {
    position: relative; border: 1px solid var(--gold); border-radius: 3px;
    overflow: hidden; background: var(--logo-black); box-shadow: var(--card-shadow);
  }
  .film-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--logo-black); }
  .film[hidden] { display: none; }
  /* Waiting on the YouTube id: the poster holds the space, without a play
     button to press or a pointer that suggests one. */
  .film-pending .film-play { cursor: default; }
  .film-pending .film-btn { display: none; }
  .film-pending .film-play:hover img { transform: none; opacity: 1; }
  /* Click-to-load facade: the page carries a poster and a play button, and the
     YouTube iframe (with its cookies and its ~600KB of player) is only fetched
     if someone actually wants to watch. */
  .film-play {
    display: block; position: relative; width: 100%; padding: 0; border: 0; cursor: pointer;
    background: var(--logo-black); aspect-ratio: 16 / 9; overflow: hidden;
  }
  .film-play img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.25,0,.35,1), opacity .3s; }
  .film-play:hover img { transform: scale(1.03); opacity: .92; }
  .film-play::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(6,6,6,.15), rgba(6,6,6,.55));
  }
  .film-btn {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 76px; height: 76px; border-radius: 50%; z-index: 1;
    background: rgba(6,6,6,.62); border: 2px solid var(--gold);
    display: grid; place-items: center;
    transition: background .2s, transform .2s;
  }
  .film-play:hover .film-btn { background: var(--gold); transform: translate(-50%, -50%) scale(1.06); }
  .film-btn svg { width: 26px; height: 26px; fill: var(--gold-hi); margin-left: 4px; transition: fill .2s; }
  .film-play:hover .film-btn svg { fill: #060606; }
  .film-frame iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
  @media (max-width: 640px) { .film-btn { width: 60px; height: 60px; } .film-btn svg { width: 21px; height: 21px; } }
  .film-cap {
    margin: 12px 0 0; text-align: center; font-size: 13.5px; color: var(--ink-faint);
    letter-spacing: .04em;
  }
  @media (max-width: 640px) { .film { margin-top: 40px; } }

  /* ─── Pillars ─── */
  .values { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px; counter-reset: pillar; }
  .value { counter-increment: pillar; position: relative; padding-top: 6px; border-top: 1px solid var(--gold-pale); }
  .value::after {
    content: counter(pillar, upper-roman);
    position: absolute; top: 2px; right: 0;
    font-family: Didot, "Bodoni MT", Georgia, serif;
    font-size: 54px; line-height: 1; color: var(--gold-pale); opacity: .55;
    pointer-events: none;
  }
  .value svg, .value h3, .value p { position: relative; z-index: 1; }
  .value h3 { font-size: 20px; margin-bottom: 10px; }
  .value p { color: var(--ink-soft); font-size: 15.5px; margin: 0; }
  .value svg { width: 30px; height: 30px; stroke: var(--gold-text); margin: 14px 0; }

  /* ─── Contact: black band, mirroring the flyer's bottom banner ─── */
  #contact {
    background:
      radial-gradient(ellipse 70% 60% at 85% 10%, rgba(205,152,56,.16) 0%, transparent 55%),
      linear-gradient(165deg, #060606, #14110A);
    color: #F3ECD9;
    border-top: 3px solid var(--gold);
  }
  #contact .eyebrow { color: var(--gold); }
  #contact h2 { font-size: clamp(28px, 4vw, 40px); }
  #contact p { color: #CFC7B0; max-width: 54ch; }
  .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
  @media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }
  form .field { margin-bottom: 16px; }
  form label { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #B5AB8E; margin-bottom: 6px; font-weight: 700; }
  form input, form textarea {
    width: 100%; border: 1px solid rgba(234,217,172,.3); border-radius: 4px;
    background: rgba(255,253,247,.07); color: #F3ECD9;
    padding: 13px 15px; font-family: inherit; font-size: 15.5px;
  }
  form input::placeholder, form textarea::placeholder { color: #8F866F; }
  form input:focus, form textarea:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: transparent; }
  form button {
    border: 0; background: var(--gold); color: #060606; font-family: inherit; cursor: pointer;
    font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 15px 34px; border-radius: 2px;
    transition: background .2s;
  }
  form button:hover { background: var(--gold-hi); }
  .office-block { font-size: 15.5px; line-height: 1.9; color: #CFC7B0; }
  .office-block b { color: #F3ECD9; }

  /* ─── Footer ─── */
  /* --logo-black, not --black-band: the footer carries logo.png, so its field
     has to be the logo's own black or the image reads as a rectangle. */
  footer { background: var(--logo-black); color: #9C927A; padding: 56px 0 30px; font-size: 13.5px; border-top: 1px solid rgba(205,152,56,.35); }
  /* Explore carries three columns of links now, so it takes the width that
     used to sit in the brand block. */
  /* ── Meet the broker (home) ───────────────────────────────────────── */
  #broker { background: var(--surface); padding: 84px 0; }
  .broker-inner { display: grid; grid-template-columns: 300px 1fr; gap: 52px; align-items: center; }
  /* Antique frame: a gold rule, a white mount, and a second hairline set in
     from it. The inner fillet is what makes it read as a frame rather than a
     photo with a border — it is the detail a real mount has. */
  .broker-frame {
    position: relative; display: block; padding: 11px;
    background: #FFFDF8; border: 1px solid var(--gold);
    box-shadow: 0 16px 38px rgba(10, 9, 6, .16);
  }
  .broker-frame::after {
    content: ""; position: absolute; inset: 5px;
    border: 1px solid var(--gold-pale); pointer-events: none;
  }
  .broker-photo {
    display: block; width: 100%; height: auto;
    aspect-ratio: 4/5; object-fit: cover;
  }
  #broker .eyebrow { margin-bottom: 22px; }
  .broker-quote {
    font-family: Didot, "Bodoni MT", Georgia, serif; font-style: italic;
    font-size: clamp(23px, 2.5vw, 33px); line-height: 1.25; color: var(--ink);
    margin: 0 0 18px; padding: 0; border: 0;
  }
  .broker-body { color: var(--ink-soft); font-size: 16.5px; margin: 0 0 22px; max-width: 60ch; }
  .broker-name { margin: 0 0 20px; }
  .broker-name b { display: block; font-size: 16px; color: var(--ink); }
  .broker-name span { display: block; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); font-weight: 700; margin-top: 3px; }
  .broker-cta { color: var(--gold-text); font-weight: 700; text-decoration: none; font-size: 15px; }
  .broker-cta:hover { text-decoration: underline; text-underline-offset: 4px; }
  @media (max-width: 899px) {
    #broker { padding: 52px 0; }
    /* Photo above the words on a phone — side by side would leave the quote
       in a column too narrow to read. */
    .broker-inner { grid-template-columns: 1fr; gap: 26px; }
    /* Phones: the photo floats rather than taking a grid column. The quote
       sits beside it as asked, and the bio then flows on under the photo
       instead of being squeezed into a 194px gutter — in a fixed column it
       wrapped to seventeen short lines with dead space below the frame. */
    .broker-inner { display: block; }
    .broker-frame { float: left; width: 136px; margin: 4px 16px 10px 0; padding: 6px; }
    .broker-frame::after { inset: 3px; }
    #broker .eyebrow { margin-bottom: 14px; }
    .broker-quote { font-size: 20px; margin-bottom: 14px; }
    /* Keep the sign-off clear of the float so it never sits beside the frame. */
    .broker-name { clear: both; padding-top: 4px; }
    .broker-quote { font-size: 22px; }
    .broker-body { font-size: 15.5px; }
  }

  .mini-fallback { font-size: 13px; line-height: 1.5; color: var(--ink-faint); margin: 10px 0 0; }
  .mini-fallback a { color: var(--gold-text); font-weight: 700; }

  /* ── Home agent strip ─────────────────────────────────────────────── */
  #team-strip { padding: 74px 0 78px; }
  .strip-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
  .strip-head h2 { margin: 0; font-size: clamp(24px, 2.7vw, 34px); }
  .strip-all { color: var(--gold-text); font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; }
  .strip-all:hover { text-decoration: underline; text-underline-offset: 4px; }
  .strip-row { display: grid; grid-template-columns: repeat(9, 1fr); gap: 18px; list-style: none; margin: 0; padding: 0; }
  .strip-card a { display: block; text-decoration: none; color: inherit; }
  .strip-card img, .strip-initials {
    /* height:auto is required — the width/height attributes on the img (kept
       for CLS) otherwise set a 600px height that aspect-ratio cannot override,
       and the circles render as tall ellipses. */
    display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: center 22%;
    border-radius: 50%; border: 1px solid var(--gold-pale);
    transition: border-color .18s ease, transform .18s ease;
  }
  .strip-initials {
    display: grid; place-items: center; background: var(--surface);
    font-family: Didot, "Bodoni MT", Georgia, serif; font-size: 26px; color: var(--gold-text);
  }
  .strip-card a:hover img, .strip-card a:hover .strip-initials { border-color: var(--gold); transform: translateY(-3px); }
  .strip-name { display: block; margin-top: 10px; font-size: 13px; line-height: 1.35; color: var(--ink-soft); text-align: center; }
  .strip-card a:hover .strip-name { color: var(--ink); }

  @media (max-width: 899px) {
    #team-strip { padding: 46px 0 50px; }
    .strip-head { margin-bottom: 20px; }
    /* Scrolls sideways rather than wrapping into three ragged rows. Cards are
       sized so the next one is part-visible, which is what says "scrollable". */
    .strip-row {
      display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch; padding-bottom: 6px;
      margin-inline: -20px; padding-inline: 20px;   /* bleed to the screen edge */
    }
    .strip-row::-webkit-scrollbar { display: none; }
    .strip-row { scrollbar-width: none; }
    .strip-card { flex: 0 0 104px; scroll-snap-align: start; }
    .strip-name { font-size: 12.5px; }
  }

  /* ── Sub-page header ────────────────────────────────────────────────
     Team, Buying and Selling have no hero, so this stands in: it gives each
     page its single h1 and keeps the nav from sitting straight on a section
     heading. Deliberately short — the point of the split was less to scroll
     past before the content starts. */
  /* Home opens on three reviews on a phone; the button reveals the rest.
     Collapsing in CSS rather than inline style keeps it clear of the filter
     buttons, which set .style.display on each card. */
  .test-expand {
    display: none; width: 100%; margin: 4px 0 6px; padding: 13px 18px;
    background: none; border: 1px solid var(--gold); border-radius: 3px;
    color: var(--gold); font: inherit; font-size: 14px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  }
  @media (max-width: 899px) {
    #testimonials.is-collapsed .testimonial-grid .testimonial:nth-child(n+4) { display: none; }
    #testimonials.is-collapsed .test-expand { display: block; }
  }

  .page-head { background: var(--black-band); padding: 74px 0 46px; border-bottom: 1px solid rgba(234,217,172,.14); }
  .page-head h1 { font-size: clamp(30px, 4.2vw, 50px); margin: 0 0 12px; color: #F3ECD9; }
  .page-head .page-sub { margin: 0; color: #B7AD95; font-size: 17px; max-width: 54ch; }
  @media (max-width: 899px) {
    .page-head { padding: 44px 0 30px; }
    .page-head .page-sub { font-size: 15.5px; }
  }

  .foot-grid { display: grid; grid-template-columns: 1.2fr 2fr 0.8fr; gap: 44px; align-items: start; }
  /* Six links as 2 rows of 3. Row-major order, so reading across matches the
     source order rather than running down the columns. */
  .foot-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
  .foot-brand .foot-logo { height: 81px; width: auto; display: block; margin-bottom: 16px; }
  .foot-brand .motto { font-family: Didot, "Bodoni MT", Georgia, serif; font-style: italic; color: var(--gold); font-size: 17px; margin: 0; max-width: 32ch; }
  .foot-col h4 { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 2px 0 15px; font-weight: 700; }
  .foot-col a { display: block; color: #B7AD95; text-decoration: none; padding: 5px 0; font-size: 14px; transition: color .18s; }
  .foot-col a:hover { color: var(--gold-hi); }
  /* Named rows rather than a line of unlabelled gold circles: the mark
     identifies the network at a glance, the name confirms it before the
     click, and the two stack into the same column rhythm as Explore. */
  .socials { display: flex; flex-direction: column; gap: 4px; }
  .social {
    display: flex; align-items: center; gap: 11px; padding: 5px 0;
    color: #B7AD95; text-decoration: none; font-size: 14px;
    transition: color .18s;
  }
  .social-mark {
    width: 30px; height: 30px; flex: none; border-radius: 50%;
    background: var(--gold); color: #0A0906;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .18s;
  }
  .social svg { width: 15px; height: 15px; }
  .social:hover { color: var(--gold-hi); }
  .social:hover .social-mark { background: var(--gold-hi); }
  .foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(205,152,56,.16); color: #8C836C; }
  .eho { display: flex; align-items: center; gap: 10px; }
  .eho svg { width: 26px; height: 26px; fill: #8C836C; flex: none; }
  .demo-note { font-size: 12px; color: #6B6350; margin-top: 18px; }

  /* ─── Per-agent contact box ─── */
  .mini-form { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 10px; max-width: 460px; }
  .mini-form .mini-title { margin: 0 0 2px; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text); }
  .mini-form input, .mini-form textarea {
    width: 100%; border: 1px solid var(--line); border-radius: 4px; background: #FFFFFF;
    color: var(--ink); padding: 11px 13px; font-family: inherit; font-size: 14.5px;
  }
  .mini-form input:focus, .mini-form textarea:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: transparent; }
  .mini-form button {
    border: 0; background: var(--black); color: var(--gold-hi); font-weight: 700; padding: 12px 20px;
    border-radius: 2px; text-transform: uppercase; letter-spacing: .1em; font-size: 12.5px; cursor: pointer; justify-self: start; font-family: inherit; font-size: 14px; transition: background .2s;
  }
  .mini-form button:hover { background: #1E1A10; }

  /* ─── Logo & language switcher ─── */
  .logo-img { height: 56px; width: auto; display: block; }
  .lang { display: flex; gap: 4px; }
  .lang button {
    background: transparent; border: 1px solid rgba(205,152,56,.45); color: #CFC7B0;
    font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: .06em;
    padding: 6px 8px; border-radius: 3px; cursor: pointer; transition: color .2s, background .2s, border-color .2s;
  }
  .lang button:hover { color: var(--gold-hi); border-color: var(--gold-hi); }
  .lang button[aria-pressed="true"] { background: var(--gold); color: #060606; border-color: var(--gold); }
  @media (max-width: 480px) {
    .logo-img { height: 38px; }
  }

  /* The two-row phone nav that used to live here (wordmark above, languages and
     CTA below) is gone — the hamburger panel above gives the language buttons
     their own full-width row, so they no longer have to share space with the
     CTA to stay at 44px. */

  /* ─── Brand load screen ───
     The crest animation from the brokerage's media kit, held over a black field
     while the page assembles behind it. Two rules matter here: it is capped in
     time so a slow network can never strand a visitor on it, and it only runs
     once per browser session — a splash on every anchor return would wear out
     fast. The same markup is reused as the busy indicator (.busy) for work that
     takes a moment, so there is one loading language across the site. */
  .splash {
    position: fixed; inset: 0; z-index: 500; background: var(--logo-black);
    display: grid; place-items: center; cursor: pointer;
    transition: opacity .55s ease;
  }
  .splash video {
    width: min(420px, 88vw); height: auto; display: block;
    /* The poster carries the crest when the video cannot play — sized like the
       video itself so the curtain looks identical either way. */
    aspect-ratio: 720 / 1080; object-fit: contain; background: var(--logo-black);
  }
  /* Still mode — the crest as a plain image, same size as the video it stands
     in for. A paused <video> shows its first frame (black), not its poster, so
     the poster attribute alone cannot carry this. */
  .splash-still-wrap { display: none; position: relative; width: min(420px, 88vw); overflow: hidden; }
  .splash-still { display: block; width: 100%; height: auto; }
  .splash.still video { display: none; }
  .splash.still .splash-still-wrap { display: block; animation: splash-still-in .5s ease-out both; }
  @keyframes splash-still-in { from { opacity: 0; } to { opacity: 1; } }

  /* A phone that refuses autoplay (Low Power Mode) still deserves motion, and
     CSS is not governed by the autoplay policy. The crest brightens up out of
     the dark rather than being swept by a light band — a band drawn over this
     much black field reads as a grey rectangle, while brightness only shows
     where the gold is, which is much closer to the video's own reveal. Only on
     the .shimmer variant: the reduced-motion fallback stays deliberately still. */
  .splash.still.shimmer .splash-still {
    animation: crest-kindle 1.5s cubic-bezier(.25,0,.35,1) both;
  }
  @keyframes crest-kindle {
    from { opacity: .15; transform: scale(.97); filter: brightness(.4); }
    55%  { opacity: 1; filter: brightness(1.22); }
    to   { opacity: 1; transform: none; filter: brightness(1); }
  }
  @media (prefers-reduced-motion: reduce) and (min-width: 861px) {
    .splash.still .splash-still-wrap,
    .splash.still.shimmer .splash-still { animation: none; }
  }
  /* Phones play the load screen even with Reduce Motion on — Robertson's call,
     made knowing it overrides a stated accessibility preference. Scoped to the
     splash alone: the hero fly-ins, scroll reveals and transition crest all
     still honour the setting, on every screen size. The re-declarations carry
     !important because the global reduce-motion rule at the top of this sheet
     switches every animation off the same way. */
  @media (prefers-reduced-motion: reduce) and (max-width: 860px) {
    .splash { transition: opacity .55s ease !important; }
    .splash.still .splash-still-wrap { animation: splash-still-in .5s ease-out both !important; }
    .splash.still.shimmer .splash-still { animation: crest-kindle 1.5s cubic-bezier(.25,0,.35,1) both !important; }
  }
  /* ── Phone load screen: the logo, faded in and out ──────────────────
     Replaces the film below 860px. The video needed muted autoplay, which
     iOS refuses in Low Power Mode and Android defers on a slow connection,
     so the curtain people actually got was black. A CSS opacity animation
     is not subject to any of that. */
  .splash-logo {
    display: none;
    width: min(340px, 78vw); height: auto;
    /* The mark is the only lit thing on a black field; a soft warm bloom
       keeps its edges from looking cut out. */
    filter: drop-shadow(0 0 26px rgba(212, 175, 87, .28));
  }
  .splash.logo video,
  .splash.logo .splash-still-wrap { display: none; }
  .splash.logo .splash-logo {
    display: block;
    animation: splash-logo-cycle 2.4s cubic-bezier(.33, 0, .28, 1) both;
  }
  /* In, hold, out. The hold is the middle 45% so the logo is legible rather
     than merely glimpsed, and the tail fade meets the curtain's own .55s
     opacity transition so the two read as a single exit. */
  @keyframes splash-logo-cycle {
    0%   { opacity: 0; transform: scale(.94); }
    28%  { opacity: 1; transform: scale(1); }
    72%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.03); }
  }
  /* Reduce Motion on a phone: Robertson's call is that the load screen still
     plays, so keep the fade but drop the scale — opacity alone is the part
     that carries no vestibular risk. */
  @media (prefers-reduced-motion: reduce) and (max-width: 860px) {
    .splash.logo .splash-logo {
      animation: splash-logo-fade 2.4s ease both !important;
    }
    @keyframes splash-logo-fade {
      0% { opacity: 0; } 28% { opacity: 1; } 72% { opacity: 1; } 100% { opacity: 0; }
    }
  }

  .splash .skip {
    position: absolute; bottom: 34px; left: 0; right: 0; text-align: center;
    font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
    color: rgba(243,236,217,.34);
  }
  .splash.done { opacity: 0; pointer-events: none; }
  html.is-splashing, html.is-splashing body { overflow: hidden; }
  /* Hold the hero's entrance until the curtain is up — otherwise it plays out
     behind the splash and the page is already settled when it lifts. */
  html.is-splashing .load-in,
  html.is-splashing .draw-rule::after { animation-play-state: paused; }

  .busy {
    position: fixed; inset: 0; z-index: 480; display: none; place-items: center;
    background: rgba(6,6,6,.76); backdrop-filter: blur(3px);
  }
  .busy.on { display: grid; }
  .busy-card { background: #000; border: 1px solid var(--gold); border-radius: 3px; padding: 20px 24px 16px; }
  /* The clip is what keeps the portrait video from reading as a black slab on
     the scrim: it crops to the band the crest actually occupies. */
  .busy-clip { width: min(260px, 62vw); aspect-ratio: 720 / 330; overflow: hidden; }
  .busy video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .busy p {
    margin: 14px 0 0; text-align: center; font-size: 12px; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hi);
  }

  /* ─── Top promo banner ─── */
  .promo-bar { background: var(--black); border-bottom: 2px solid var(--gold); }
  .promo-inner { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 10px 24px; position: relative; }
  .promo-msg { margin: 0; text-align: center; font-size: 14px; }
  .promo-link { text-decoration: none; }
  .promo-strong { color: var(--gold-hi); font-weight: 700; }
  .promo-rest { color: #CFC7B0; }
  .promo-link:hover .promo-rest { color: #F3ECD9; }
  .promo-close {
    position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
    background: transparent; border: 0; color: #CFC7B0; font-size: 20px; line-height: 1;
    cursor: pointer; padding: 4px 8px; transition: color .2s;
  }
  .promo-close:hover { color: var(--gold-hi); }

  /* ─── Mortgage calculator ─── */
  .calc-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; align-items: start; }
  .calc-inputs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 28px;
  }
  .calc-inputs .field { margin: 0; }
  .calc-inputs .field.calc-down-field { grid-column: 1 / -1; }
  .calc-inputs label { display: block; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-text); font-weight: 700; margin-bottom: 6px; }
  .calc-inputs input, .calc-inputs select {
    width: 100%; border: 1px solid var(--line); border-radius: 4px; background: #FFFFFF; color: var(--ink);
    padding: 11px 13px; font-family: inherit; font-size: 15px;
  }
  .calc-inputs input:focus, .calc-inputs select:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: transparent; }
  .calc-down-row { display: flex; align-items: center; gap: 8px; }
  .calc-down-row input { flex: 1; min-width: 0; }
  .calc-suffix { color: var(--ink-faint); font-size: 13.5px; flex: none; }
  .calc-output { background: var(--black); color: #F3ECD9; border-radius: 4px; padding: 30px 32px; border: 1px solid rgba(205,152,56,.4); }
  .calc-out-title { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-hi); font-weight: 700; margin: 0 0 8px; }
  .calc-total { font-family: Didot, "Bodoni MT", Georgia, serif; font-size: 42px; color: #F3ECD9; margin: 0 0 20px; font-variant-numeric: tabular-nums; }
  .calc-bar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: rgba(255,253,247,.1); margin-bottom: 22px; }
  .calc-seg { height: 100%; transition: width .2s; }
  .calc-seg-pi { background: var(--gold); }
  .calc-seg-tax { background: var(--gold-hi); }
  .calc-seg-ins { background: var(--gold-pale); }
  .calc-seg-hoa { background: #7D7361; }
  .calc-breakdown { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
  .calc-breakdown li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: #CFC7B0; }
  .calc-breakdown li b { margin-left: auto; color: #F3ECD9; font-variant-numeric: tabular-nums; }
  .calc-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
  .calc-dot-pi { background: var(--gold); }
  .calc-dot-tax { background: var(--gold-hi); }
  .calc-dot-ins { background: var(--gold-pale); }
  .calc-dot-hoa { background: #7D7361; }
  .calc-disclaimer { margin-top: 20px; font-size: 12.5px; color: var(--ink-faint); }

  /* ─── Home valuation ─── */
  #valuation { background: var(--surface); border-block: 1px solid var(--line); }
  .valuation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
  .valuation-form .field { margin-bottom: 16px; }
  .valuation-form label { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 6px; font-weight: 700; }
  .valuation-form input, .valuation-form textarea {
    width: 100%; border: 1px solid var(--line); border-radius: 4px; background: #FFFFFF; color: var(--ink);
    padding: 13px 15px; font-family: inherit; font-size: 15.5px;
  }
  .valuation-form input::placeholder, .valuation-form textarea::placeholder { color: #8F866F; }
  .valuation-form input:focus, .valuation-form textarea:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: transparent; }
  .valuation-form button {
    border: 0; background: var(--black); color: var(--gold-hi); font-family: inherit; cursor: pointer;
    font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 15px 34px; border-radius: 2px;
    transition: background .2s;
  }
  .valuation-form button:hover { background: #1E1A10; }

  /* ─── Selling process ─── */
  .steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 36px; }
  .step { position: relative; padding-top: 6px; border-top: 1px solid var(--gold-pale); flex: 1 1 260px; max-width: 320px; }
  #selling .section-head { margin-left: auto; margin-right: auto; text-align: center; }
  .step-num {
    display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin: 14px 0 10px;
    border-radius: 50%; background: var(--black); color: var(--gold-hi); font-family: Didot, "Bodoni MT", Georgia, serif; font-size: 16px;
  }
  .step h3 { font-size: 19px; margin-bottom: 10px; }
  .step p { color: var(--ink-soft); font-size: 15px; margin: 0; }

  /* ─── Testimonials ─── */
  #testimonials { background: var(--surface); border-block: 1px solid var(--line); }
  .testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }
  .testimonial { margin: 0; background: var(--ground); border: 1px solid var(--line); border-radius: 3px; padding: 28px 26px; box-shadow: var(--card-shadow); }
  .testimonial::before { content: "\201C"; display: block; font-family: Didot, "Bodoni MT", Georgia, serif; font-size: 52px; color: var(--gold-pale); line-height: 1; margin-bottom: -6px; }
  .test-tag { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); margin: 0 0 10px; }
  .test-quote { margin: 0 0 14px; font-style: italic; color: var(--ink-soft); font-size: 15.5px; }
  .test-cite { font-size: 13px; color: var(--ink-faint); }
  .zillow-badge { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 8px 16px; background: #fff; border: 1px solid var(--gold-pale); border-radius: 99px; text-decoration: none; box-shadow: var(--card-shadow); transition: border-color .18s; }
  .zillow-badge:hover { border-color: var(--gold); }
  .zb-stars { color: #F5A623; font-size: 16px; letter-spacing: 1px; }
  .zb-text { font-size: 14px; color: var(--ink); }
  .test-more { margin: 30px 0 0; }
  .test-more a { color: var(--gold-text); font-weight: 600; font-size: 14.5px; text-decoration: none; }
  .test-more a:hover { color: var(--gold); }
  .test-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
  .tf-btn { font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 8px 18px; border: 1px solid var(--gold-pale); background: #fff; color: var(--ink-soft); border-radius: 99px; cursor: pointer; transition: background .18s, color .18s, border-color .18s; }
  .tf-btn:hover { border-color: var(--gold); }
  .tf-btn.is-active { background: var(--black); color: var(--gold-hi); border-color: var(--black); }

  /* ─── Mobile polish ─── */
  @media (max-width: 640px) {
    section { padding: 60px 0; }
    header.hero { padding: 64px 0 56px; }
    .hero-stats { gap: 22px 0; margin-top: 38px; flex-direction: column; }
    .hero-stats .stat + .stat { border-left: 0; padding-left: 0; border-top: 1px solid var(--gold-pale); padding-top: 18px; }
    .hero-stats .stat b { font-size: 34px; }
    .script-accent { font-size: 20px; }
    .search { flex-direction: column; }
    .search input { padding: 15px 18px; border-bottom: 1px solid var(--line); }
    .search button { justify-content: center; padding: 15px; }
    .grid-agents { grid-template-columns: 1fr 1fr; gap: 12px; }
    .agent { padding: 20px 12px 18px; }
    .agent h3 { font-size: 16px; }
    .avatar { width: 104px; height: 104px; font-size: 30px; }
    .agent-detail { padding: 24px 20px; }
    .agent-detail.open { gap: 20px; }
    /* Mobile keeps the circle head — the portrait plate is a desktop-only
       treatment. It floats rather than centring, so the name sits to its
       right instead of underneath, and the bio flows on below it. 104px and
       unzoomed, matching the grid circles and the home strip. */
    .agent-detail .avatar {
      width: 104px; height: 104px; font-size: 32px;
      border-radius: 50%; border: 2px solid var(--gold); box-shadow: none;
      float: left; margin: 0 15px 10px 0;
    }
    .agent-detail .avatar img { object-position: 50% 22%; }
    .agent-detail .avatar img.md { transform: none; }
    /* Name and role are what sit beside the face; everything from the
       language chips down starts again at full width. */
    .agent-detail h3 { margin-top: 0; font-size: 21px; line-height: 1.2; }
    .agent-detail .role { font-size: 11.5px; margin: 5px 0 0; }
    .agent-detail .chips { clear: both; padding-top: 4px; }
    .section-head { margin-bottom: 34px; }
    .contact-grid { gap: 40px; }
    .foot-grid { grid-template-columns: 1fr; gap: 32px; }
    /* Three across leaves ~110px a cell on a phone, which splits
       "Mortgage Calculator" over three lines. Two columns holds. */
    .foot-links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
    /* Phone only: the brand block and Connect sit centred, with the
       two-column Explore list left-aligned between them. The stack reads
       as centre / left / centre rather than one ragged left edge. */
    .foot-brand { text-align: center; }
    .foot-brand .foot-logo { margin-left: auto; margin-right: auto; }
    .foot-brand .motto { max-width: none; }
    .foot-col-connect { text-align: center; }
    /* Centre the cluster, not each row. Centring the rows individually put
       every gold mark at a different x, since the three names differ in
       width; shrinking the list to its content and centring that keeps the
       marks in one column under a centred heading. */
    .foot-col-connect .socials {
      width: fit-content; margin-left: auto; margin-right: auto;
      /* Undo the column's centring inside the list itself — inherited
         text-align was centring each row's contents, so the three gold
         marks landed at three different x positions. */
      text-align: left;
    }
    .foot-bottom { flex-direction: column; align-items: flex-start; }
    .promo-inner { padding: 10px 56px 10px 16px; }
    .promo-msg { font-size: 13px; text-align: left; }
    .promo-close { right: 12px; }
    .calc-grid { grid-template-columns: 1fr; }
    .calc-inputs { grid-template-columns: 1fr; }
    .valuation-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 860px) { .calc-grid { grid-template-columns: 1fr; } }
  @media (max-width: 800px) { .valuation-grid { grid-template-columns: 1fr; } }

  /* ─── Touch targets ───────────────────────────────────────────────────────
     Keyed on pointer type rather than width: a touch tablet at 1024px needs
     these as much as a phone does, and a 1440px mouse user does not — 36-41px
     controls are perfectly usable with a cursor. Placed last so nothing above
     outranks it. Measured before: language buttons 30x27, Buy/Rent/Sold 36px,
     listing filters 41px, footer links 32px, banner close 28px. */
  @media (hover: none) {
    .lang button {
      min-width: 44px;
      min-height: 44px;
      padding: 6px 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .nav-cta,
    .nav-team,
    .wordmark { min-height: 44px; display: inline-flex; align-items: center; }
    .search-tab,
    .search-form button,
    .agent-picker,
    .filter-bar select,
    .filter-bar button,
    .filter-bar input,
    .tf-btn,
    .promo-link { min-height: 44px; }
    .promo-link { display: inline-flex; align-items: center; }
    .promo-close {
      min-width: 44px; min-height: 44px; padding: 0;
      display: inline-flex; align-items: center; justify-content: center;
    }
    /* Row is the tap target now; keep it at the 44px floor. */
    .social { padding: 8px 0; }
    .social-mark { width: 36px; height: 36px; }
    /* Padding rather than height, so the list keeps its rhythm. */
    .foot-col a { padding: 11px 0; }
  }
  /* Deliberately not touched: Leaflet's own 30px zoom controls and its
     attribution link — the map supports pinch-zoom and the attribution is a
     legal notice that convention keeps small — and inline links inside
     sentences, which are legitimately line-height tall. */