*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --gold: #B8922A;
      --gold-bg: #f9f4ea;
      --black: #0e0e0e;
      --ink: #1e1e1e;
      --mid: #5e5e5e;
      --muted: #999;
      --border: #e2e2e2;
      --bg: #ffffff;
      --bg2: #f8f7f5;
      --serif: 'Cormorant Garamond', Georgia, serif;
      --sans: 'Inter', sans-serif;
      --r: 3px;
      /* Premium radius tier (M11): the rounded/shadowed treatment
         introduced for the Communities map, named once so every other
         "framed panel" component derives from it instead of picking
         its own one-off pixel value. */
      --r-lg: 16px;
      /* Shared elevation shadows, warm-toned (not neutral grey) to
         match the champagne-gold palette — one shadow language for
         every card, panel, and floating control site-wide. */
      --shadow-card: 0 10px 28px rgba(20,16,8,0.08), 0 1px 4px rgba(20,16,8,0.04);
      --shadow-lift: 0 22px 52px rgba(20,16,8,0.16), 0 3px 10px rgba(20,16,8,0.07);
      --shadow-control: 0 4px 18px rgba(20,16,8,0.13);
      --shadow-control-hover: 0 7px 24px rgba(20,16,8,0.19);
      /* Two transition speeds, not one-off values per component: fast
         for color/background/opacity/border changes, base for
         transform/movement. */
      --dur-fast: 0.15s;
      --dur-base: 0.25s;
    }
    html { scroll-behavior: smooth; }
    body { font-family: var(--sans); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
    a { color: inherit; text-decoration: none; }
    button { font-family: var(--sans); cursor: pointer; border: none; }
    .page { display: none; }
    .page.active { display: block; }

    /* ── NAV ── */
    nav {
      height: 68px; padding: 0 3rem;
      display: flex; align-items: center; justify-content: space-between;
      border-bottom: 1px solid var(--border);
      position: sticky; top: 0; background: var(--bg); z-index: 200;
    }
    /* ── Concept B · final refinement ──
       Monogram quieted to a signature (~12% smaller); wordmark promoted to hero
       (~10% larger, tighter kerning); hairline divider shortened; tagline drawn
       in close beneath the name. One unified object. */
    .nav-logo { display: flex; flex-direction: row; align-items: center; cursor: pointer; gap: 11px; }
    .nav-logo-mark { height: 22px; width: auto; display: block; }
    .nav-logo-div { width: 1px; height: 17px; background: var(--gold); flex-shrink: 0; }
    .nav-logo-text { display: flex; flex-direction: column; gap: 2.7px; }
    .nav-logo-name { font-family: 'Cinzel', var(--serif); font-size: 16.6px; font-weight: 500; letter-spacing: 0.185em; text-transform: uppercase; line-height: 1; }
    .nav-logo-tag { font-size: 8.5px; letter-spacing: 0.114em; color: var(--gold); font-weight: 400; line-height: 1; }
    .nav-links { display: flex; gap: 32px; }
    .nav-links a { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mid); cursor: pointer; transition: color 0.15s; font-weight: 400; }
    .nav-links a:hover { color: var(--ink); }
    /* Keyboard-only focus visibility (a11y). Invisible during mouse use, so the
       approved page visuals are unchanged; satisfies visible-focus requirement. */
    .nav-links a:focus-visible,
    .nav-logo:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 1px; }
    .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
    .nav-right { display: flex; align-items: center; }
    .nav-phone { display: none; }

    /* ── MOBILE NAV (hamburger + slide-in menu, <=1024px) ── */
    .nav-burger {
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      width: 44px;
      height: 44px;
      background: transparent;
      border: none;
      cursor: pointer;
      flex-shrink: 0;
    }
    .nav-burger span {
      display: block;
      width: 22px;
      height: 1.5px;
      background: var(--ink);
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    }
    .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
    .nav-burger:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

    .mobile-menu-overlay {
      position: fixed; inset: 0;
      background: rgba(14, 14, 14, 0.5);
      backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
      opacity: 0; visibility: hidden;
      transition: opacity 0.35s ease, visibility 0.35s ease;
      z-index: 240;
    }
    .mobile-menu-overlay.open { opacity: 1; visibility: visible; }

    .mobile-menu {
      position: fixed; top: 0; right: 0; height: 100%;
      width: min(340px, 86vw);
      background: var(--bg);
      z-index: 250;
      transform: translateX(100%);
      transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex; flex-direction: column;
      box-shadow: -12px 0 40px rgba(0, 0, 0, 0.15);
    }
    .mobile-menu.open { transform: translateX(0); }
    .mobile-menu-head {
      display: flex; justify-content: space-between; align-items: flex-start;
      padding: 2rem 1.75rem 1.5rem;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .mobile-menu-mark { height: 29px; width: auto; display: block; margin-bottom: 12px; }
    .mobile-menu-brand .nav-logo-name { font-size: 18.2px; letter-spacing: 0.185em; }
    .mobile-menu-brand .nav-logo-tag { margin-top: 5.4px; letter-spacing: 0.114em; }
    .mobile-menu-rule { width: 32px; height: 1px; background: var(--gold); margin-top: 13px; }
    .mobile-menu-close {
      width: 40px; height: 40px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      background: transparent; border: none; cursor: pointer;
      font-size: 19px; color: var(--ink); line-height: 1;
      transition: color 0.15s ease;
    }
    .mobile-menu-close:hover { color: var(--gold); }
    .mobile-menu-close:focus-visible { color: var(--gold); outline: 2px solid var(--gold); outline-offset: 2px; }
    .mobile-menu-links {
      display: flex; flex-direction: column; justify-content: flex-start;
      flex: 1; min-height: 0;
      padding: 0.5rem 0;
      overflow-y: auto;
    }
    .mobile-menu-links button {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      width: 100%; min-height: 58px;
      text-align: left;
      background: none; border: none;
      border-bottom: 1px solid var(--border);
      padding: 0 1.75rem;
      font-family: var(--sans); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--ink);
      cursor: pointer;
      transition: color 0.15s ease, box-shadow 0.15s ease;
    }
    .mobile-menu-links button i {
      font-size: 14px; color: var(--gold);
      opacity: 0; transform: translateX(-4px);
      transition: opacity 0.25s ease, transform 0.25s ease;
    }
    .mobile-menu-links button:hover,
    .mobile-menu-links button:focus-visible { color: var(--gold); outline: none; }
    .mobile-menu-links button:hover i,
    .mobile-menu-links button:focus-visible i { opacity: 1; transform: translateX(0); }
    .mobile-menu-links button:focus-visible { box-shadow: inset 3px 0 0 var(--gold); }
    .mobile-menu-cta {
      flex-shrink: 0;
      padding: 1.5rem 1.75rem;
      border-top: 1px solid var(--border);
    }
    .mobile-menu-cta .btn { width: 100%; text-align: center; padding: 15px 26px; }

    .btn { display: inline-block; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; padding: 10px 26px; border-radius: var(--r); cursor: pointer; transition: background var(--dur-fast, 0.15s), color var(--dur-fast, 0.15s), border-color var(--dur-fast, 0.15s), opacity var(--dur-fast, 0.15s); }
    .btn-dark { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
    .btn-dark:hover { opacity: 0.82; }
    .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--border); }
    .btn-ghost:hover { border-color: var(--ink); }
    .btn-gold { background: var(--gold); color: #fff; border: 1px solid var(--gold); }
    .btn-gold:hover { opacity: 0.88; }

    /* ── HERO ── */
    .hero {
      position: relative;
      min-height: 92vh;
      display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
      text-align: center;
      border-bottom: 1px solid var(--border);
      overflow: hidden;
      /* Lower-third placement that holds its optical ratio across screen heights:
         18vh = 9rem at the 800px reference height (no change there); on taller
         screens the group lifts proportionally instead of sinking. */
      padding: 6rem 3rem clamp(9rem, 18vh, 13rem);
    }
    .hero-bg {
      position: absolute; inset: 0;
      background-image: url('../images/photos/home-hero.webp');
      background-size: cover; background-position: center 60%;
      z-index: 0;
    }
    .hero-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.38) 50%, rgba(0,0,0,0.72) 100%);
      z-index: 1;
    }
    .hero > *:not(.hero-bg):not(.hero-overlay) { position: relative; z-index: 2; }
    .hero-eyebrow { font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 2rem; font-weight: 500; }
    .hero-h1 { font-family: var(--serif); font-size: 76px; font-weight: 300; line-height: 1.04; color: #fff; margin-bottom: 1.5rem; max-width: 820px; text-shadow: 0 2px 40px rgba(0,0,0,0.3); }
    .hero-h1 em { font-style: italic; color: var(--gold); }
    .hero-rule { width: 32px; height: 1px; background: var(--gold); margin: 0 auto 1.75rem; }
    .hero-body { font-size: 15px; color: rgba(255,255,255,0.78); line-height: 1.85; max-width: 480px; margin: 0 auto 3rem; }
    .hero-actions { display: flex; gap: 12px; justify-content: center; margin-bottom: 0; }


    /* ── SECTIONS ── */
    .sec { padding: 5rem 3rem; border-bottom: 1px solid var(--border); }
    .sec.bg2 { background: var(--bg2); }
    .sec-top { text-align: center; margin-bottom: 4rem; }
    .sec-eyebrow { font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; font-weight: 500; }
    .sec-title { font-family: var(--serif); font-size: 44px; font-weight: 300; line-height: 1.1; }
    .sec-title em { font-style: italic; }
    .sec-rule { width: 32px; height: 1px; background: var(--gold); margin: 1.25rem auto 0; }
    .sec-lead { font-family: var(--serif); font-weight: 300; font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: var(--mid); max-width: 30ch; margin: 1.5rem auto 0; }

    /* ── COMMUNITIES ── */
    .communities { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
    .cc { background: var(--bg); display: flex; flex-direction: column; cursor: pointer; transition: background 0.15s; }
    .cc:hover { background: var(--bg2); }
    .cc-thumb { height: 110px; display: flex; align-items: center; justify-content: center; font-size: 40px; position: relative; }
    .cc-thumb.amber  { background: #fdf3e3; color: #a87010; }
    .cc-thumb.teal   { background: #e5f4ef; color: #0c7858; }
    .cc-thumb.purple { background: #eeecf8; color: #4840a8; }
    .cc-thumb.slate  { background: #f0efec; color: #888; }
    .cbadge-wrap { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
    .cbadge { font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; font-weight: 600; }
    .cbadge.g { background: #e2f4ed; color: #0a7050; }
    .cbadge.a { background: #fdefd5; color: #9a6005; }
    .cbadge.s { background: #eaeaea; color: #777; }
    .cc-body { padding: 1.1rem 1.2rem 1.4rem; flex: 1; display: flex; flex-direction: column; border-top: 1px solid var(--border); }
    .cc-type { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
    .cc-name { font-family: var(--serif); font-size: 17px; font-weight: 400; margin-bottom: 8px; line-height: 1.2; }
    .cc-meta { font-size: 11px; color: var(--mid); line-height: 1.9; flex: 1; }
    .cc-enter { margin-top: 14px; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 5px; font-weight: 500; }
    .cc-enter i { transition: transform 0.2s; }
    .cc:hover .cc-enter i { transform: translateX(3px); }

    /* ── THE HOMES — stacked luxury presentation (redesigned 2026-07-23, was editorial alternating rows) ── */
    #communities { padding-top: 7rem; } /* the white breath after the hero */
    .homes-editorial { max-width: 900px; margin: 0 auto; }
    .home-row { cursor: pointer; margin-bottom: 4.5rem; }
    .home-row:last-child { margin-bottom: 0; }
    .home-row-img { position: relative; overflow: hidden; margin-bottom: 1.75rem; } /* square corners — architectural, not web */
    .hr-img { aspect-ratio: 16 / 10; background-size: cover; background-position: center; }
    /* M12: honest placeholder for a community with no photography/
       rendering yet — same language as the Communities/destination
       pages' own empty-media states. */
    .hr-img--empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--bg2); color: var(--muted); }
    .hr-img--empty i { font-size: 26px; color: var(--gold); opacity: 0.7; }
    .hr-img--empty span { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; }
    .hr-tag { position: absolute; right: 12px; bottom: 10px; font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
    .home-row-body { text-align: center; }
    .hr-status { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 0.9rem; } /* per-status colour reuses the detail-page status palette; gold still reserved for the action (the button) */
    .hr-status--selling { color: #0a7050; }   /* same green as "Now selling" on the community detail pages */
    .hr-status--soon    { color: #9a6005; }    /* same amber as "Coming soon" on the estate detail page */
    /* --sold intentionally stays muted grey — it is not an available status */
    .hr-name { font-family: var(--serif); font-size: 30px; font-weight: 300; line-height: 1.15; margin-bottom: 0.5rem; }
    .hr-line { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--mid); line-height: 1.65; margin-bottom: 1.5rem; max-width: 46ch; margin-left: auto; margin-right: auto; }
    /* M11: 10px vertical padding — same height as .cty-card-cta and
       .dest-home-btn, so the "secondary CTA in a card" role is one
       consistent size site-wide instead of three near-misses. */
    .hr-cta { padding: 10px 24px; font-size: 10px; }

    /* ── THE PAUSE (Homepage v2.0 §4) — one sentence, centered, vast white ── */
    .pause { padding: clamp(88px, 14vh, 160px) 1.5rem; background: var(--bg); text-align: center; }
    .pause-line { font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 4vw, 46px); line-height: 1.32; color: var(--ink); max-width: 22ch; margin: 0 auto; }

    /* ── MILTON — THE REVEAL (Homepage v2.0 §5) — full-bleed, dusk, copy inset ── */
    /* 🔒 LOCKED & approved 2026-07-19 (commit d925d3e). Do not modify without explicit re-approval. */
    .milton { position: relative; min-height: 78vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--ink); border-bottom: 1px solid var(--border); }
    .milton-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; z-index: 0; filter: brightness(1.08); }
    .milton-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.38) 42%, rgba(0,0,0,0.12) 100%); }
    .milton-inner { position: relative; z-index: 2; width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 3rem 10vh; }
    .milton-title { font-family: var(--serif); font-weight: 300; font-size: clamp(44px, 6vw, 76px); line-height: 1; color: #fff; margin: 0 0 1.25rem; text-shadow: 0 2px 40px rgba(0,0,0,0.3); }
    .milton-passage { font-family: var(--serif); font-weight: 300; font-size: clamp(19px, 2.1vw, 26px); line-height: 1.62; color: rgba(255,255,255,0.92); max-width: 34ch; }

    /* ── LOCATION (M14, restructured as one downward narrative;
       M14 polish pass: rhythm, hierarchy, and framing refined) ──
       Not a text/map split — a single column, one beat after another:
       headline -> lead -> verified highlights -> the map (full width,
       presented as proof of what was just read) -> one closing
       invitation. Each beat gets deliberately generous top margin —
       more than a standard .sec — so the page reads as a sequence of
       considered moments, unhurried, never a dense block. The headline
       is sized between .sec-title (44px, every other homepage section)
       and .milton-title (76px, the page's one hero moment) — this is
       the second most important type moment on the page, not equal to
       every other section header. */
    .loc { padding: clamp(120px, 16vh, 200px) 3rem; background: var(--bg); border-bottom: 1px solid var(--border); }

    .loc-top { max-width: 620px; margin: 0 auto; text-align: center; }
    .loc-eyebrow { font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 1.35rem; }
    .loc-title { font-family: var(--serif); font-weight: 300; font-size: clamp(38px, 5vw, 58px); line-height: 1.06; margin: 0; color: var(--ink); letter-spacing: -0.005em; }
    .loc-title em { font-style: italic; }
    .loc-rule { width: 32px; height: 1px; background: var(--gold); margin: 1.75rem auto 0; }
    .loc-lead { font-family: var(--serif); font-weight: 300; font-size: clamp(18px, 1.9vw, 22px); line-height: 1.78; color: var(--mid); max-width: 52ch; margin: 2rem auto 0; }

    /* Highlights, refined to read as talking points, not a spec grid:
       a wider gutter and a hairline column rule (like a printed page's
       own column division, not a bordered card) do the work of
       separating the six without boxing them. Each label carries a
       short gold mark instead of sitting bare — a quiet "this is worth
       noting" cue, the same restraint as a pull-quote dash. */
    .loc-highlights {
      list-style: none; padding: 0; margin: clamp(4.5rem, 7vw, 7rem) auto 0;
      max-width: 1020px; display: grid; grid-template-columns: repeat(3, 1fr);
      column-gap: 4rem; row-gap: 3.25rem;
    }
    .loc-highlight { margin: 0; text-align: left; position: relative; }
    /* Column rule between the 1st/2nd and 2nd/3rd items in each row —
       a magazine's own column division, never a full grid of borders. */
    .loc-highlight:nth-child(3n+2)::before,
    .loc-highlight:nth-child(3n+3)::before {
      content: ''; position: absolute; top: 0.2em; bottom: 0.2em; left: -2rem;
      width: 1px; background: rgba(184,146,42,0.22);
    }
    .loc-highlight-label { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 0.7rem; display: flex; align-items: baseline; gap: 0.55em; }
    .loc-highlight-label::before { content: '—'; font-size: 0.9em; opacity: 0.75; }
    .loc-highlight-body { font-family: var(--serif); font-weight: 300; font-size: 17px; line-height: 1.65; color: var(--ink); margin: 0; }

    /* ── the map, presented last: a framed plate, not a column ──
       A double frame — a warm mat (.loc-map-wrap's own padding+
       background) around the map's own gold-hairline border — reads as
       a curated print in a gallery, not an embedded widget. */
    .loc-map-wrap {
      max-width: 1180px; margin: clamp(5.5rem, 8vw, 8.5rem) auto 0;
      padding: clamp(14px, 1.6vw, 22px); background: var(--bg2);
      border-radius: calc(var(--r-lg) + 10px);
    }
    /* M16: taller frame. At 460px the plate was a ~2.5:1 letterbox, but
       the actual content (communities north, hospital/Avalon south) is
       taller than it is wide — so fitBounds was bound by height and left
       a third of the frame as empty countryside off to the east. A ~2:1
       plate both matches the content's own proportion and gives the map
       real presence on the page instead of reading as a strip. */
    .loc-map-frame {
      position: relative; height: clamp(360px, 42vw, 580px);
      border: 1px solid rgba(184,146,42,0.35); border-radius: var(--r-lg);
      box-shadow: var(--shadow-lift); background: var(--bg); overflow: hidden;
    }
    .loc-map-frame .home-communities-map,
    .loc-map-frame .cty-map-pane { height: 100%; }
    /* Neutralise the shared pane's own framing — this instance is framed
       by .loc-map-frame above, not by itself. */
    .loc-map-frame .cty-map-pane.cty-map-pane--compact {
      height: 100%; border: none; box-shadow: none; border-radius: 0;
    }
    .loc-map-frame .cty-map-leaflet { border-radius: 0; }
    /* M16: the old override here (saturate .52 / brightness 1.09) existed
       to push raw OSM's loud colour further back on this particular map.
       With Positron as the basemap there is no loud colour left to fight,
       and that rule would have stripped the warm champagne tint the
       shared component now applies — so it is gone deliberately rather
       than lost. This map inherits the shared warm wash unchanged. */
    .loc-map-caption { font-size: 11px; letter-spacing: 0.08em; color: var(--muted); text-align: center; margin-top: 1.35rem; padding-top: 0; }

    /* ── the closing invitation — bookends the opening rule, so the
       section visibly resolves rather than just stopping ── */
    .loc-cta-wrap { text-align: center; margin-top: clamp(4rem, 6vw, 5.5rem); }
    .loc-cta-rule { width: 32px; height: 1px; background: var(--gold); margin: 0 auto 2rem; }
    .loc-cta-lead { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 18px; color: var(--mid); margin: 0 0 1.5rem; }
    .loc-cta { padding: 14px 36px; }

    /* ── communities list, now full width (M14) ── */
    .homes-editorial-cta { max-width: 900px; margin: 4rem auto 0; text-align: center; }

    /* ── tablet ── */
    @media (max-width: 1024px) {
      .loc { padding: clamp(88px, 12vh, 128px) 2rem; }
      .loc-highlights { grid-template-columns: repeat(2, 1fr); max-width: 620px; column-gap: 3rem; }
      .loc-highlight:nth-child(3n+2)::before { display: none; }
      .loc-highlight:nth-child(2n)::before { content: ''; position: absolute; top: 0.2em; bottom: 0.2em; left: -1.5rem; width: 1px; background: rgba(184,146,42,0.22); }
      .loc-map-frame { height: 380px; }
    }

    /* ── mobile — shorter blocks, tighter rhythm, still generous ── */
    @media (max-width: 560px) {
      .loc { padding: 72px 1.5rem; }
      .loc-lead { margin-top: 1.5rem; }
      .loc-highlights { grid-template-columns: 1fr; gap: 2.1rem; margin-top: 3.25rem; }
      .loc-highlight::before { display: none; }
      .loc-map-wrap { margin-top: 3.5rem; padding: 10px; }
      .loc-map-frame { height: 300px; }
      /* M15 legend mobile sizing lives in communities.css (see the mobile
         media block there) — communities.css loads after this file, so a
         same-specificity override here would lose the cascade tie back to
         its unconditional .loc-map-legend rule. Kept together with the
         rest of the legend's rules instead of split across two files. */
      .loc-cta-wrap { margin-top: 2.75rem; }
      .loc-cta { width: 100%; }
      .homes-editorial-cta { margin-top: 3rem; }
      .homes-editorial-cta .btn { width: 100%; }
    }

    /* ── FLOOR PLANS ── */
    /* Level-specific details (features, ceiling height, notes) now live in
       the Floor Plan Viewer's own info panel (css/floor-plan-viewer.css),
       keyed per level — not duplicated here. .plan-btn remains: it's the
       "View Floor Plan" / "Inquire" action button still used on this page. */
    .plan-btn { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: none; border: none; padding: 0; display: flex; align-items: center; gap: 6px; font-weight: 500; cursor: pointer; }
    .plan-btn:hover { color: var(--gold); }

    /* ── NEIGHBOURHOOD ── */
    /* M11: same premium framing as the Communities list pane (16px
       radius, gold-tinted hairline, soft warm shadow) — one card
       language site-wide instead of the flat 3px grid this used to
       share only with .contact-grid and the other hairline lists. */
    .nb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid rgba(184,146,42,0.16); border-radius: var(--r-lg); box-shadow: var(--shadow-card); overflow: hidden; }
    .nb-item { background: var(--bg); padding: 2.5rem 2rem; }
    .nb-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--gold-bg); display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; }
    .nb-icon i { font-size: 20px; color: var(--gold); }
    .nb-title { font-family: var(--serif); font-size: 20px; font-weight: 400; margin-bottom: 0.6rem; }
    .nb-desc { font-size: 13px; color: var(--mid); line-height: 1.75; }

    /* ── CONTACT ── */
    /* M11: same premium framing as .nb-grid above. */
    .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid rgba(184,146,42,0.16); border-radius: var(--r-lg); box-shadow: var(--shadow-card); overflow: hidden; }
    .contact-left { background: var(--bg2); padding: 3.5rem 3rem; }
    .contact-left-title { font-family: var(--serif); font-size: 36px; font-weight: 300; margin-bottom: 0.5rem; }
    .contact-left-title em { font-style: italic; }
    .contact-rule { width: 32px; height: 1px; background: var(--gold); margin: 1.25rem 0; }
    .contact-left p { font-size: 13px; color: var(--mid); line-height: 1.85; margin-bottom: 2.5rem; }
    .cinfo { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--mid); margin-bottom: 14px; }
    .cinfo i { font-size: 15px; color: var(--gold); width: 18px; }
    .contact-form-wrap { background: var(--bg); padding: 3.5rem 3rem; }
    .fg { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
    .fg label { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
    .fg input, .fg select, .fg textarea {
      font-size: 14px; padding: 11px 14px;
      border: 1px solid var(--border); border-radius: var(--r);
      background: var(--bg); color: var(--ink);
      font-family: var(--sans); outline: none; width: 100%;
      transition: border-color 0.15s;
    }
    .fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--gold); }
    .fg textarea { height: 90px; resize: none; }
    /* THE INVITATION (§7) balance — scoped to #contact only */
    #contact .sec-top { margin-top: 42px; }                                   /* lower the title block to anchor it to the section */
    #contact .contact-left { display: flex; flex-direction: column; justify-content: center; }  /* vertically anchor + strengthen the left column vs. the form */
    @media (min-width: 769px) { #contact .contact-grid { grid-template-columns: 1.08fr 0.92fr; } }  /* subtly trim the form's width so it doesn't overpower the left */
    .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

    /* ── DETAIL PAGES ── */
    /* Community hero banners (Pointe, Echelon, Manor, Estate).
       Mobile/tablet (<1024px): identical to the original per-page inline
       values. Desktop (1024-1599px): taller + re-centered on each photo's
       measured subject band (see git history / CHANGELOG for how these
       were derived) so the house dominates the frame instead of sky.
       1600px+: background-size:cover cannot show a photo's full subject
       once the banner is 5-9x wider than tall — it has to crop most of
       the vertical extent away no matter the position. So above 1600px
       the photo is shown whole via background-size:contain, centered on
       a solid ink mat, and the banner grows taller so it still reads as
       a proper hero rather than a sliver. */
    .detail-hero {
      position: relative;
      overflow: hidden;
      background-image: var(--hero-img);
      background-size: cover;
      border-bottom: 1px solid var(--border);
    }
    .detail-hero--pointe   { height: 420px; background-position: center 35%; filter: grayscale(0.55) contrast(1.05) brightness(0.97); }
    .detail-hero--echelon  { height: 380px; background-position: center 30%; }
    .detail-hero--estate   { height: 320px; background-position: center 40%; border-bottom: none; }
    @media (min-width: 1024px) {
      .detail-hero--pointe   { height: 460px; background-position: center 42%; }
      .detail-hero--echelon  { height: 420px; background-position: center 47%; }
      .detail-hero--estate   { height: 600px; background-position: center 56%; }
    }

    /* Manor: no photography exists yet. Rather than a placeholder graphic
       with apologetic text, this is a deliberate, image-free dark surface —
       the same quiet-luxury language as the homepage's Milton section,
       using only existing tokens (no new asset). */
    .detail-hero--manor {
      height: 380px;
      background-image: radial-gradient(ellipse at center, #262626 0%, var(--ink) 75%);
      background-repeat: no-repeat;
      background-color: var(--ink);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .detail-hero--manor::before { content: ''; width: 40px; height: 1px; background: var(--gold); }
    .detail-hero--manor::after  { display: none; content: none; }
    @media (min-width: 1024px) { .detail-hero--manor { height: 420px; } }
    @media (min-width: 1600px) {
      .detail-hero {
        height: clamp(560px, 30vw, 820px);
        background-image: none;
        background-color: var(--ink);
      }
      .detail-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: var(--hero-img);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        z-index: 1;
      }
    }

    /* Estate hero source is square (1600x1600). Fill the banner (cover), framed on the
       house, so it is never cut in half and never letterboxed with side bars. Position
       is tuned to keep the whole facade, chimneys and hedges in view at every width.
       Static cover (no animated/contain layers). Interim until a wide estate photo. */
    .detail-hero--estate {
      background-image: var(--hero-img);
      background-size: cover;
      background-position: center 58%;
      background-color: transparent;
    }
    .detail-hero--estate::before,
    .detail-hero--estate::after { display: none; content: none; }
    .breadcrumb { display: flex; align-items: center; gap: 8px; padding: 0.9rem 3rem; border-bottom: 1px solid var(--border); background: var(--bg); }
    .breadcrumb span { font-size: 12px; color: var(--muted); }
    .breadcrumb a { font-size: 12px; color: var(--mid); cursor: pointer; }
    .breadcrumb a:hover { color: var(--ink); }
    .breadcrumb i { font-size: 11px; color: var(--border); }
    .detail-header {
      display: grid; grid-template-columns: 1fr 1fr 1fr;
      border-bottom: 1px solid var(--border);
    }
    .dh-col { padding: 3.5rem 3rem; border-right: 1px solid var(--border); }
    .dh-col:last-child { border-right: none; background: var(--bg2); }
    .detail-tag { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; font-weight: 500; }
    .detail-h1 { font-family: var(--serif); font-size: 40px; font-weight: 300; line-height: 1.1; margin-bottom: 1.25rem; }
    .detail-desc { font-size: 13px; color: var(--mid); line-height: 1.85; margin-bottom: 2rem; }
    .detail-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 2rem; }
    .dpill { font-size: 10px; padding: 5px 14px; border: 1px solid var(--border); border-radius: 20px; color: var(--mid); }
    .dpill.dark { border-color: var(--ink); color: var(--ink); font-weight: 500; }
    .dq-label { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; font-weight: 500; }
    .dq-rows { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
    .dq-row { display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); font-size: 13px; background: var(--bg); }
    .dq-row:last-child { border-bottom: none; }
    .dq-key { color: var(--muted); }
    .dq-val { font-weight: 500; }
    .dh-actions { margin-top: 2rem; display: flex; flex-direction: column; gap: 10px; }

    /* ── FOOTER ── */
    footer { background: var(--ink); color: #fff; }
    .footer-main { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 0; border-bottom: 1px solid #2a2a2a; }
    .footer-col { padding: 3.5rem 2.5rem; border-right: 1px solid #2a2a2a; }
    .footer-col:last-child { border-right: none; }
    .footer-logo { display: flex; align-items: center; gap: 13px; margin-bottom: 8px; }
    .footer-logo-mark { height: 26px; width: auto; display: block; }
    .footer-logo-div { width: 1px; height: 19px; background: var(--gold); flex-shrink: 0; }
    .footer-logo-name { font-family: 'Cinzel', var(--serif); font-size: 19.3px; font-weight: 500; letter-spacing: 0.185em; text-transform: uppercase; color: #fff; line-height: 1; }
    .footer-tagline { font-family: var(--serif); font-style: italic; color: var(--gold); font-size: 15px; margin-bottom: 1.25rem; }
    .footer-desc { font-size: 12px; color: #666; line-height: 1.8; }
    .footer-col h4 { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: #555; margin-bottom: 1.5rem; font-weight: 600; }
    .footer-col a { display: block; font-size: 13px; color: #999; margin-bottom: 12px; cursor: pointer; transition: color 0.15s; }
    .footer-col a:hover { color: #fff; }
    .footer-bottom { padding: 1.5rem 2.5rem; display: flex; justify-content: space-between; align-items: center; }
    .footer-copy { font-size: 11px; color: #444; }
    .footer-badge { font-size: 11px; color: #444; }

    /* ── RESPONSIVE ── */
    @media (max-width: 1024px) {
      .hero { padding: 4rem 1.5rem 6.5rem; }
      .hero-h1 { font-size: 44px; }
      .detail-header { grid-template-columns: 1fr 1fr; }
      .footer-main { grid-template-columns: 1fr 1fr; }
      .nav-links { display: none; }
      .nav-burger { display: flex; }
    }
    @media (max-width: 768px) {
      nav { padding: 0 1.5rem; }
      .nav-phone { display: none; }
      /* Mobile shows the full lockup beside the monogram; the Book-a-Showing
         button is hidden here (it's available in the slide-out menu) to give
         the wordmark room. */
      .nav-logo-mark { height: 30px; }
      .nav-logo-name { font-size: 15px; }
      .nav-right { display: none; }
      .hero { padding: 3.5rem 1.5rem 5.5rem; }
      .hero-h1 { font-size: 36px; }
      #communities { padding-top: 4.5rem; }
      .home-row { margin-bottom: 3rem; }
      .hr-name { font-size: 26px; }
      .milton { min-height: 72svh; }
      .milton-inner { padding: 0 1.5rem 11vh; }
      .hero-stats { grid-template-columns: repeat(2,1fr); }
      .sec { padding: 3rem 1.5rem; }
      .communities { grid-template-columns: 1fr 1fr; }
      .nb-grid { grid-template-columns: 1fr 1fr; }
      .contact-grid { grid-template-columns: 1fr; }
      .detail-header { grid-template-columns: 1fr; }
      .dh-col { border-right: none; border-bottom: 1px solid var(--border); }
      .breadcrumb { padding: 0.9rem 1.5rem; }
      .footer-main { grid-template-columns: 1fr; }
      .footer-col { border-right: none; border-bottom: 1px solid #2a2a2a; }
      .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
      .frow { grid-template-columns: 1fr; gap: 0; }
    }
    @media (max-width: 480px) {
      .communities { grid-template-columns: 1fr; }
      .nb-grid { grid-template-columns: 1fr; }
      .hero-h1 { font-size: 32px; }
    }

    .gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border); border-bottom: 1px solid var(--border); }
    .gallery-img { height: 220px; background-size: cover; background-position: center; transition: opacity 0.15s; }
    .gallery-img:hover { opacity: 0.9; }

    /* ── DRAWING PANELS ── */
    .drawing-panel { background: #fff; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
    .drawing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
    .drawing-img { background-size: contain; background-repeat: no-repeat; background-position: center; background-color: #fafaf8; height: 280px; border-right: 1px solid var(--border); }
    .drawing-img:last-child { border-right: none; }
    .drawing-label { padding: 0.85rem 1.25rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: #fafaf8; }

    /* ── FORM MESSAGES ── */
    .form-msg { display: none; margin-top: 12px; padding: 12px 14px; border-radius: 4px; font-family: var(--sans); font-size: 13px; line-height: 1.5; }
    .form-msg.success { background: #eaf6f1; color: #0a7050; border: 1px solid #b7e0d1; }
    .form-msg.error { background: #fbebea; color: #b3261e; border: 1px solid #f3c6c2; }
    form.ulomi-form button[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; }
    .drawing-label-left { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
    .drawing-label-right { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); font-style: italic; font-family: var(--serif); font-size: 12px; }