/* ============================================================
   8X CONDO DIRECTORY — PRODUCTION STYLESHEET
   Concatenation of:
     1) Design tokens (from colors_and_type.css) — :root vars,
        @font-face, base type classes. Font @font-face src URLs
        remapped to the brand's production R2 paths at /ld/fonts/
        (woff2). Google-Fonts @import for the companion faces
        (Instrument Serif / JetBrains Mono / Noto Serif SC) kept.
     2) All page CSS from directory-a.html's inline <style> block.
   ============================================================ */

/* ============================================================
   8X REAL ESTATE — Design Tokens
   Colors + Typography foundation.
   ============================================================ */

/* Primary brand typefaces — served locally from /ld/fonts/.
   - Hanken Grotesk:  body, UI, nav (clean neo-grotesque)
   - Poppins (static weights):   display headlines, CTAs (geometric character)
   Companions (Instrument Serif, JetBrains Mono, Noto Serif SC) via Google Fonts. */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&family=Noto+Serif+SC:wght@400;500;600;700&display=swap');

/* Hanken Grotesk — the production bundle ships a single Latin woff2 (variable
   weight is collapsed to one file in /ld/fonts/). Italics fall back to synthesized
   obliques; the directory page uses Instrument Serif for italic display moments. */
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/ld/fonts/hanken-grotesk-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Poppins — static weights mapped to the production woff2 set
   (/ld/fonts/poppins-{400,600,700,800}-latin.woff2). The mockup only uses
   400/600/700/800; lighter/heavier weights map to the nearest shipped file. */
@font-face { font-family: 'Poppins'; src: url('/ld/fonts/poppins-400-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/ld/fonts/poppins-600-latin.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/ld/fonts/poppins-700-latin.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/ld/fonts/poppins-800-latin.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  /* -------- BRAND COLORS -------- */
  /* Signature red — pulled from the logo's square frame. */
  --brand-red:        #BE1E2D;  /* primary brand accent */
  --brand-red-600:    #9E1925;  /* hover / pressed */
  --brand-red-100:    #FBE9EB;  /* tint background */

  /* Core neutrals — Graphite/Paper-style scale (Firecrawl-inspired). */
  --ink:              #181A22;  /* near-black, logo color */
  --graphite:         #22242D;
  --graphite-2:       #2E3038;
  --slate:            #5A5A5A;
  --slate-2:          #8A8A8A;
  --mist:             #BFBFBF;
  --fog:              #E5E5E5;
  --cloud:            #F1F1F1;
  --paper:            #F4F5F8;  /* warm off-white bg */
  --white:            #FFFFFF;

  /* Accent — restrained asian-influenced tones. */
  --vermillion:       #D93A2C;  /* softer red, for illustration/warm accent */
  --jade:             #2F6B5E;  /* deep, quiet green — editorial */
  --jade-bright:      #0FA968;  /* vibrant jade — status badges, "active", "new" */
  --jade-bright-tint: #E4F6EE;  /* soft jade bg */
  --amber:            #E07B17;  /* pending / in-progress orange */
  --amber-tint:       #FCEBD7;  /* soft amber bg */
  --ivory:            #F5EFE6;  /* warm paper, for section breaks */
  --gold:             #B89653;  /* brushed gold, used sparingly */

  /* -------- SEMANTIC TOKENS -------- */
  --fg:               var(--ink);
  --fg-1:             var(--graphite);
  --fg-2:             var(--slate);
  --fg-3:             var(--slate-2);
  --fg-inverse:       var(--white);

  --bg:               var(--paper);
  --bg-1:             var(--white);
  --bg-2:             var(--cloud);
  --bg-3:             var(--fog);
  --bg-inverse:       var(--ink);

  --border:           var(--fog);
  --border-strong:    var(--mist);
  --border-ink:       var(--ink);

  --accent:           var(--brand-red);
  --accent-hover:     var(--brand-red-600);
  --accent-soft:      var(--brand-red-100);

  --success:          var(--jade);
  --warning:          #B8860B;
  --danger:           var(--brand-red);

  /* -------- TYPOGRAPHY -------- */
  --font-sans:        'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display:     'Poppins', 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-serif:       'Instrument Serif', 'Noto Serif SC', ui-serif, Georgia, serif;
  --font-cjk:         'Noto Serif SC', 'Instrument Serif', ui-serif, serif;
  --font-mono:        'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — tuned for editorial real-estate feel. */
  --text-xs:          12px;
  --text-sm:          14px;
  --text-base:        16px;
  --text-md:          18px;
  --text-lg:          22px;
  --text-xl:          28px;
  --text-2xl:         36px;
  --text-3xl:         48px;
  --text-4xl:         64px;
  --text-5xl:         84px;
  --text-6xl:         112px;

  --leading-tight:    1.05;
  --leading-snug:     1.2;
  --leading-normal:   1.45;
  --leading-relaxed:  1.6;

  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.12em;   /* for eyebrow labels */

  /* -------- SPACING -------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* -------- RADII -------- */
  --radius-none:  0;
  --radius-sm:    4px;   /* default, snappy */
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    20px;
  --radius-pill:  999px;

  /* -------- ELEVATION / SHADOWS -------- */
  --shadow-xs:    0 1px 0 rgba(24,26,34,0.04);
  --shadow-sm:    0 1px 2px rgba(24,26,34,0.06), 0 1px 1px rgba(24,26,34,0.04);
  --shadow-md:    0 6px 14px -4px rgba(24,26,34,0.10), 0 2px 4px rgba(24,26,34,0.05);
  --shadow-lg:    0 18px 36px -12px rgba(24,26,34,0.16), 0 6px 12px -4px rgba(24,26,34,0.06);
  --shadow-inset: inset 0 0 0 1px var(--border);

  /* Brand-red glow — for focus / selected CTA. */
  --ring:         0 0 0 3px rgba(190, 30, 45, 0.22);

  /* -------- MOTION -------- */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:     120ms;
  --dur-base:     200ms;
  --dur-slow:     420ms;

  /* -------- LAYOUT -------- */
  --container:    1240px;
  --container-narrow: 920px;
  --gutter:       24px;
}

/* ============================================================
   SEMANTIC TYPE ELEMENTS
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h-display,
.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 7vw, var(--text-6xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--fg);
}

.h1, h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.h2, h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.h3, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.h4, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}

.serif-display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(48px, 6vw, var(--text-5xl));
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-2);
}

.eyebrow-red { color: var(--accent); }

.lede,
.lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--fg-1);
  letter-spacing: -0.005em;
}

p, .p {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-1);
}

.small, small {
  font-size: var(--text-sm);
  color: var(--fg-2);
}

.mono, code, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.cjk-accent {
  font-family: var(--font-cjk);
  font-weight: 500;
  color: var(--accent);
}

/* Utility: red square frame — the signature 8X motif. */
.brand-frame {
  position: relative;
  display: inline-block;
  padding: 18px 22px;
  border: 3px solid var(--accent);
  border-right: 0;
  border-bottom: 0;
}
.brand-frame::after {
  content: "";
  position: absolute;
  inset: auto 0 0 auto;
  width: 60%;
  height: 3px;
  background: var(--accent);
}
.brand-frame::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 3px;
  height: 60%;
  background: var(--accent);
}

/* ============================================================
   PAGE STYLES — from directory-a.html inline <style>
   ============================================================ */

  /* ============ base / reset ============ */
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; background: var(--paper); }
  img { display: block; max-width: 100%; }
  a { color: inherit; }
  button { font: inherit; cursor: pointer; }

  .wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }

  /* mono stat label — ALL CAPS mono is reserved for these */
  .stat-label {
    font-family: var(--font-mono); font-size: 10px; font-weight: 500;
    letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--fg-3);
  }
  .mono-val { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--fg); }

  /* hairline section frame */
  .rule { border: 0; border-top: 1px solid var(--fog); margin: 0; }

  /* blueprint dot grid */
  .dotgrid {
    background-image: radial-gradient(var(--mist) 1px, transparent 1px);
    background-size: 22px 22px;
  }

  /* corner dots ornament */
  .corner-dots { position: relative; }
  .corner-dots::before, .corner-dots::after {
    content: ""; position: absolute; width: 5px; height: 5px; background: var(--ink);
  }
  .corner-dots::before { top: -3px; left: -3px; }
  .corner-dots::after  { bottom: -3px; right: -3px; }

  /* ============ 1 · header ============ */
  .hdr {
    position: sticky; top: 0; z-index: 60;
    background: rgba(244,245,248,0.92); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--fog);
  }
  .hdr-in {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 56px; gap: var(--space-3);
  }
  .hdr-logo img { height: 26px; width: auto; }
  .hdr-cta {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 18px;
    background: var(--brand-red); color: var(--white);
    font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
    border: 0; border-radius: var(--radius-sm); text-decoration: none;
    transition: background var(--dur-base) var(--ease-out);
  }
  .hdr-cta:hover { background: var(--brand-red-600); }
  .hdr-cta svg { width: 14px; height: 14px; }

  /* ============ 2 · hero ============
     Full-bleed brand condo hero photo (Legato, 989 Johnson St) with an ink scrim;
     all hero content knocks out to paper/white. Scrim is left- and bottom-weighted
     ink — per brand: solid/scrim over photography, never decorative gradients. */
  .hero { position: relative; padding: var(--space-7) 0 var(--space-6); overflow: hidden; background: var(--ink); }
  .hero-bg {
    position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 60% 42%; pointer-events: none; user-select: none;
  }
  .hero-scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      linear-gradient(90deg,  rgba(24,26,34,.88) 0%, rgba(24,26,34,.64) 46%, rgba(24,26,34,.26) 100%),
      linear-gradient(180deg, rgba(24,26,34,.34) 0%, rgba(24,26,34,.16) 52%, rgba(24,26,34,.62) 100%);
  }
  /* <768px: stronger, flatter scrim — small-screen legibility over the photo */
  @media (max-width: 767.98px) {
    .hero-scrim {
      background:
        linear-gradient(180deg, rgba(24,26,34,.80) 0%, rgba(24,26,34,.68) 50%, rgba(24,26,34,.84) 100%);
    }
  }
  .hero .wrap { position: relative; z-index: 2; }
  .hero .dotfield {
    position: absolute; top: 24px; right: -40px; width: 300px; height: 220px;
    opacity: .4; pointer-events: none; z-index: 1;
    background-image: radial-gradient(rgba(255,255,255,.55) 1px, transparent 1px);
  }
  .hero-eyebrow {
    font-family: var(--font-sans); font-weight: 600; font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider); text-transform: lowercase; color: rgba(255,255,255,.82);
    display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-4);
  }
  .hero-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--brand-red); }
  .hero h1 {
    margin: 0 0 var(--space-4);
    font-size: clamp(38px, 9vw, 72px);
    letter-spacing: var(--tracking-tighter);
    color: var(--white);
  }
  .hero h1 .serif-line {
    display: block; font-family: var(--font-serif); font-style: italic; font-weight: 400;
    font-size: 0.62em; letter-spacing: -0.01em; color: rgba(255,255,255,.84); margin-top: 4px;
  }
  .hero .cjk-mark {
    position: absolute; top: 38px; right: 22px; z-index: 1;
    font-family: var(--font-cjk); font-size: 20px; color: rgba(255,255,255,.34);
    writing-mode: vertical-rl; letter-spacing: 0.6em; user-select: none;
  }
  .hero .lede { max-width: 560px; margin: 0 0 var(--space-6); font-size: var(--text-base); color: rgba(255,255,255,.88); }
  .hero .lede strong { color: var(--white); font-weight: 700; }

  /* mono stat plate: dark glass knockout over the photo */
  .statrow {
    display: grid; grid-template-columns: repeat(2, 1fr);
    border: 1px solid rgba(255,255,255,.28); background: rgba(24,26,34,.58);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-radius: var(--radius-md); overflow: hidden;
  }
  .statrow .cell {
    padding: var(--space-4); border-bottom: 1px solid rgba(255,255,255,.18);
    position: relative;
  }
  .statrow .cell:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.18); }
  .statrow .cell:nth-child(n+3) { border-bottom: 0; }
  .statrow .num {
    font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 500;
    color: var(--white); line-height: 1.1; margin-bottom: 4px;
  }
  .statrow .num .accent { color: var(--brand-red); }
  .statrow .stat-label { color: rgba(255,255,255,.72); }
  .hero .corner-dots::before, .hero .corner-dots::after { background: var(--white); }

  /* ============ 2b · condo market snapshot ============ */
  .snap { padding: var(--space-6) 0 var(--space-3); border-top: 1px solid var(--fog); }
  .snap-head {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: var(--space-3); margin-bottom: var(--space-4);
  }
  .snap-eyebrow {
    font-family: var(--font-sans); font-weight: 600; font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider); text-transform: lowercase; color: var(--fg-2);
    display: flex; align-items: center; gap: 12px; margin: 0 0 10px;
  }
  .snap-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--brand-red); flex: none; }
  .snap-head h2 { margin: 0; font-size: var(--text-xl); letter-spacing: var(--tracking-tight); }
  .snap-cta {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 18px;
    background: var(--brand-red); color: var(--white);
    font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
    border: 0; border-radius: var(--radius-sm); text-decoration: none;
    transition: background var(--dur-base) var(--ease-out);
  }
  .snap-cta:hover { background: var(--brand-red-600); }
  .snap-cta svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-out); }
  .snap-cta:hover svg { transform: translateX(3px); }

  .snap-card { background: var(--white); border: 1px solid var(--fog); border-radius: var(--radius-md); }
  .snap-controls {
    display: flex; flex-direction: column; gap: 8px;
    padding: var(--space-4); border-bottom: 1px dashed var(--fog);
  }
  .snap-sel { width: 100%; }
  .snap-figs { display: grid; grid-template-columns: 1fr; }
  .snap-fig { padding: var(--space-4); display: flex; flex-direction: column; gap: 3px; }
  .snap-fig + .snap-fig { border-top: 1px solid var(--fog); } /* stacked: horizontal hairline */
  .snap-price {
    font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums;
    font-size: clamp(26px, 6vw, 34px); line-height: 1;
    letter-spacing: var(--tracking-tight); color: var(--accent);
  }
  .snap-sub { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); letter-spacing: 0.02em; }
  .snap-sub b { font-weight: 500; color: var(--fg); }

  /* — custom municipality dropdown (replaces the native <select>) —
     A styled trigger + a custom listbox popover. The native <select id="snapMuni">
     is visually hidden but kept in sync (forms / a11y / JS reads it). On-brand:
     paper trigger, hairline border, red focus ring; selected option in red with a
     red check (never the OS blue highlight). */
  .snap-sel { position: relative; }
  .snap-native {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .snap-trigger {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; min-height: 48px; padding: 0 14px;
    background: var(--white); border: 1px solid var(--fog); border-radius: var(--radius-sm);
    font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; color: var(--fg);
    cursor: pointer; text-align: left;
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  }
  .snap-trigger:hover { border-color: var(--mist); }
  .snap-trigger[aria-expanded="true"] { border-color: var(--ink); box-shadow: var(--ring); }
  .snap-trigger-val { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .snap-trigger-chev {
    flex: none; width: 16px; height: 16px; color: var(--fg-2);
    transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .snap-trigger[aria-expanded="true"] .snap-trigger-chev { transform: rotate(180deg); color: var(--brand-red); }

  .snap-menu {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 58;
    margin: 0; padding: 4px; list-style: none;
    max-height: 264px; overflow-y: auto; overscroll-behavior: contain;
    background: var(--white); border: 1px solid var(--fog); border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
  }
  html.motion .snap-menu { animation: popIn 160ms var(--ease-out-quint); }
  .snap-opt {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    min-height: 44px; padding: 0 12px; border-radius: var(--radius-sm); cursor: pointer;
    font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; color: var(--fg-1);
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .snap-opt:hover, .snap-opt.is-active { background: var(--paper); color: var(--fg); }
  .snap-opt[aria-selected="true"] { color: var(--brand-red); }
  .snap-opt .snap-opt-check {
    flex: none; width: 15px; height: 15px; color: var(--brand-red);
    opacity: 0; transition: opacity var(--dur-fast) var(--ease-out);
  }
  .snap-opt[aria-selected="true"] .snap-opt-check { opacity: 1; }

  @media (min-width: 700px) {
    .snap-controls { flex-direction: row; align-items: center; justify-content: space-between; }
    .snap-sel { width: auto; min-width: 260px; }
    .snap-figs { grid-template-columns: 1fr 1fr; }
    .snap-fig { padding: var(--space-4) var(--space-5); }
    .snap-fig + .snap-fig { border-top: 0; border-left: 1px solid var(--fog); } /* side-by-side: vertical hairline */
  }

  /* ============ 3 · filter bar (desktop) + chips ============ */
  .toolbar { padding: var(--space-5) 0 0; }
  .toolbar-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
    padding-bottom: var(--space-3); border-bottom: 1px solid var(--fog); margin-bottom: var(--space-4);
  }
  .sec-no { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--fg-3); }

  .searchrow { display: flex; gap: var(--space-3); position: relative; }
  .searchbox { position: relative; flex: 1; }
  /* <768px the suggest dropdown anchors to the full .searchrow (more room for names) */
  @media (max-width: 767.98px) { .searchbox { position: static; } }
  .searchbox svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--fg-3); }
  .searchbox input {
    width: 100%; min-height: 48px; padding: 0 14px 0 40px;
    font-family: var(--font-sans); font-size: var(--text-base); color: var(--fg);
    background: var(--white); border: 1px solid var(--fog); border-radius: var(--radius-sm);
    outline: none; transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  }
  .searchbox input:hover { border-color: var(--mist); }
  .searchbox input:focus { border-color: var(--brand-red); box-shadow: var(--ring); }
  .searchbox input::placeholder { color: var(--fg-3); }

  /* — predictive autocomplete (sits under the search input, all widths) — */
  .suggest {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 55;
    background: var(--white); border: 1px solid var(--fog); border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg); overflow: hidden;
  }
  .suggest .srow {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 44px; padding: 9px 14px; text-decoration: none;
    border-bottom: 1px solid var(--fog);
  }
  .suggest .srow:last-child { border-bottom: 0; }
  .suggest .srow.is-active { background: var(--paper); box-shadow: inset 2px 0 0 var(--brand-red); }
  .srow .smain { min-width: 0; }
  .srow .sname {
    display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
    letter-spacing: var(--tracking-tight); color: var(--fg);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .srow .saddr {
    display: block; margin-top: 1px; font-size: 12px; color: var(--fg-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .srow .saddr .smuni {
    font-style: normal; font-family: var(--font-mono); font-size: 10px;
    letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-3); margin-left: 7px;
  }
  .srow mark { background: var(--brand-red-100); color: inherit; border-radius: 2px; padding: 0 1px; }
  .srow .sactive { flex: none; font-family: var(--font-mono); font-size: 11px; color: var(--jade-bright); white-space: nowrap; }
  .srow .sactive.none { color: var(--fg-3); }
  .suggest .snone { padding: 14px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); }

  .filters-btn {
    display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px;
    background: var(--ink); color: var(--white); border: 0; border-radius: var(--radius-sm);
    font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
  }
  .filters-btn .count {
    font-family: var(--font-mono); font-size: 11px; background: var(--brand-red);
    border-radius: var(--radius-pill); min-width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
  }

  /* — inline facet popovers (triggers hidden <768px; the bottom sheet owns filters there) — */
  .deskfacets { display: none; }
  .facetwrap { position: relative; }
  .deskfacets .facet {
    display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px;
    background: var(--white); border: 1px solid var(--fog); border-radius: var(--radius-sm);
    font-size: var(--text-sm); font-weight: 600; color: var(--fg-1); white-space: nowrap;
    transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .deskfacets .facet:hover { border-color: var(--brand-red); color: var(--brand-red); }
  .deskfacets .facet::after {
    content: ""; width: 7px; height: 7px; margin-top: -3px; transform: rotate(45deg);
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transition: transform var(--dur-fast) var(--ease-out), margin-top var(--dur-fast) var(--ease-out);
  }
  .deskfacets .facet[aria-expanded="true"] { border-color: var(--ink); color: var(--fg); background: var(--cloud); }
  .deskfacets .facet[aria-expanded="true"]::after { transform: rotate(225deg); margin-top: 4px; }
  .facetpop {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 55;
    width: min(420px, calc(100vw - 48px));
    background: var(--white); border: 1px solid var(--fog); border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg); padding: 2px var(--space-4);
  }
  .facetwrap:last-child .facetpop { left: auto; right: 0; }
  .facetpop .fgroup:last-child { border-bottom: 0; }
  html.motion .suggest, html.motion .facetpop { animation: popIn 160ms var(--ease-out-quint); }
  @keyframes popIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
  .sortslot { display: none; }

  .chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-3); align-items: center; }
  .chiprow[hidden] { display: none; }
  .chip {
    display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 6px 0 12px;
    background: var(--white); border: 1px dashed var(--mist); border-radius: var(--radius-pill);
    font-family: var(--font-mono); font-size: 12px; color: var(--fg-1);
  }
  .chip b { font-weight: 500; color: var(--fg); }
  .chip button {
    width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; color: var(--fg-3); border-radius: var(--radius-pill);
  }
  .chip button:hover { color: var(--brand-red); background: var(--brand-red-100); }
  .chip-clear {
    background: transparent; border: 0; min-height: 36px; padding: 0 8px;
    font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; color: var(--brand-red);
    text-decoration: underline; text-underline-offset: 3px;
  }

  /* ============ 4 · results bar ============ */
  .resultsbar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-5) 0 var(--space-4);
  }
  .resultsbar .showing { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); letter-spacing: 0.02em; }
  .resultsbar .showing b { color: var(--fg); font-weight: 500; }
  .sortsel { position: relative; }
  .sortsel select {
    appearance: none; -webkit-appearance: none;
    min-height: 44px; padding: 0 34px 0 14px;
    font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; color: var(--fg);
    background: var(--white); border: 1px solid var(--fog); border-radius: var(--radius-sm);
    cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out);
  }
  .sortsel select:hover { border-color: var(--mist); }
  .sortsel::after {
    content: ""; position: absolute; right: 14px; top: 50%; transform: translateY(-35%) rotate(45deg);
    width: 7px; height: 7px; border-right: 1.5px solid var(--fg-2); border-bottom: 1.5px solid var(--fg-2);
    pointer-events: none;
  }

  /* — results bar tools: grid/map toggle + sort sit together on the right — */
  .resultsbar-tools { display: flex; align-items: center; gap: var(--space-3); }

  /* — grid / map segmented view toggle — */
  .viewtoggle {
    display: inline-flex; align-items: center; gap: 2px; padding: 3px;
    background: var(--white); border: 1px solid var(--fog); border-radius: var(--radius-sm);
  }
  .viewtoggle .view-btn {
    display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 12px;
    background: transparent; border: 0; border-radius: 3px;
    font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--fg-2);
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .viewtoggle .view-btn svg { width: 15px; height: 15px; }
  .viewtoggle .view-btn:hover { color: var(--fg); }
  .viewtoggle .view-btn.is-active { background: var(--ink); color: var(--white); }
  /* hide the icon label text below 380px to keep the bar tidy */
  @media (max-width: 379.98px) { .viewtoggle .view-btn { padding: 0 10px; font-size: 0; gap: 0; } }

  /* — inline Mapbox map (lives in the entries section; full-width above the grid) — */
  .dirmap {
    position: relative; width: 100%; height: 360px;
    border: 1px solid var(--fog); border-radius: var(--radius-md);
    overflow: hidden; background: var(--cloud); margin-bottom: var(--space-6);
  }
  .dirmap .mapboxgl-ctrl-group { box-shadow: var(--shadow-sm); border-radius: var(--radius-sm); }
  /* custom building marker — truncated name plate, mirrors the brokerage map look */
  .building-marker {
    display: inline-flex; align-items: center; max-width: 150px;
    padding: 4px 9px; cursor: pointer; white-space: nowrap;
    font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: -0.01em;
    color: var(--white); background: var(--ink); border: 1px solid rgba(255,255,255,.85);
    border-radius: var(--radius-pill); box-shadow: var(--shadow-sm);
    transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }
  .building-marker:hover { background: var(--graphite-2); transform: translateY(-1px); }
  .building-marker.active { background: var(--brand-red); border-color: var(--white); }
  /* popup card — image + meta + CTA */
  .dirmap .mapboxgl-popup-content { padding: 0; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-lg); }
  .dirmap .mapboxgl-popup-close-button { font-size: 18px; color: var(--white); right: 2px; top: 2px; z-index: 2; }
  .popup-card { width: 240px; font-family: var(--font-sans); }
  .popup-image-container { position: relative; aspect-ratio: 3 / 2; background: var(--cloud); }
  .popup-image { width: 100%; height: 100%; object-fit: cover; }
  .popup-accent { position: absolute; left: 0; bottom: 0; width: 46%; height: 4px; background: var(--brand-red); }
  .popup-content { padding: 12px 14px 14px; }
  .popup-title {
    margin: 0 0 2px; font-family: var(--font-display); font-weight: 600; font-size: var(--text-base);
    letter-spacing: var(--tracking-tight); color: var(--fg); line-height: var(--leading-snug);
  }
  .popup-address { margin: 0 0 8px; font-size: 12px; color: var(--fg-2); }
  .popup-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); }
  .popup-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--brand-red); text-decoration: none;
  }
  .popup-link:hover { color: var(--brand-red-600); }
  @media (min-width: 1024px) { .dirmap { height: 480px; } }

  /* — load more (pagination) — */
  .load-more {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 56px; margin-bottom: var(--space-5);
    background: var(--white); border: 1px solid var(--ink); border-radius: var(--radius-sm);
    font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--fg);
    transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
  }
  .load-more:hover { background: var(--ink); color: var(--white); }
  .load-more .n { font-family: var(--font-mono); font-size: 12px; color: var(--brand-red); }
  .load-more:hover .n { color: var(--white); }

  /* cards hidden by pagination stay in the DOM (crawlable) — only display toggles */
  .entry.is-paged-hidden { display: none !important; }

  /* ============ 5 · building entries (the almanac) ============ */
  .entries { display: grid; grid-template-columns: 1fr; gap: var(--space-5); padding-bottom: var(--space-7); }

  .entry {
    background: var(--white); border: 1px solid var(--fog); border-radius: var(--radius-md);
    overflow: hidden; text-decoration: none; display: flex; flex-direction: column;
    transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  }
  .entry:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--ink); }
  .entry.is-featured { border-top: 4px solid var(--brand-red); }
  .entry.is-featured:hover { border-top-color: var(--brand-red); }

  .entry-media { position: relative; aspect-ratio: 3 / 2; background: var(--cloud); overflow: hidden; }
  .entry-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-base) var(--ease-out); }
  .entry:hover .entry-media img { transform: scale(1.03); }
  /* active-listings badge (replaces the old No.0X index badge) */
  .entry-active {
    position: absolute; top: 12px; left: 12px;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em;
    background: var(--jade-bright); color: var(--white);
    padding: 5px 10px; border-radius: var(--radius-pill);
  }
  .entry-active .ld { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--white); }
  .entry-active b { font-weight: 500; }
  .entry-active.none {
    background: rgba(244,245,248,0.88); color: var(--fg-3); font-weight: 400;
  }
  .entry-flag {
    position: absolute; top: 12px; right: 12px;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wider); text-transform: uppercase;
    background: var(--ink); color: var(--white); padding: 6px 10px; border-radius: var(--radius-sm);
  }
  .entry-flag.new { background: var(--jade-bright); }

  /* — per-building alert bell (subscribe to this building's listing alerts) —
     A hairline circle pinned to the photo's lower-right. It is a real <button>
     inside the card <a>; the script preventDefault/stopPropagation so it never
     hijacks the card link. Subtle by default; fills solid red when active. */
  .entry-alert {
    position: absolute; right: 12px; bottom: 12px; z-index: 3;
    width: 38px; height: 38px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(244,245,248,0.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: 1px solid var(--mist); border-radius: var(--radius-pill);
    color: var(--fg-1); box-shadow: var(--shadow-sm);
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
      color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  }
  .entry-alert svg { width: 16px; height: 16px; display: block; transition: transform var(--dur-fast) var(--ease-out); }
  .entry-alert:hover { border-color: var(--brand-red); color: var(--brand-red); transform: translateY(-1px); }
  .entry-alert:focus-visible { outline: none; border-color: var(--ink); box-shadow: var(--ring); }
  .entry-alert.is-busy { opacity: .6; pointer-events: none; }
  /* active / subscribed: solid red, white bell */
  .entry-alert[aria-pressed="true"] {
    background: var(--brand-red); border-color: var(--brand-red); color: var(--white);
    box-shadow: 0 2px 8px -2px rgba(190,30,45,0.5);
  }
  .entry-alert[aria-pressed="true"]:hover { background: var(--brand-red-600); border-color: var(--brand-red-600); color: var(--white); }
  .entry-alert[aria-pressed="true"] svg { fill: rgba(255,255,255,0.18); }
  /* a brief "ring" pulse the moment it goes active (reduced-motion safe) */
  html.motion .entry-alert.just-on svg { animation: bellRing 560ms var(--ease-spring); transform-origin: 50% 4px; }
  @keyframes bellRing {
    0% { transform: rotate(0); } 20% { transform: rotate(13deg); } 40% { transform: rotate(-11deg); }
    60% { transform: rotate(7deg); } 80% { transform: rotate(-4deg); } 100% { transform: rotate(0); }
  }

  /* — on-brand alert toast (one utility, reused for every card) —
     Paper card, red accent rail, jade check; bottom-center on mobile,
     bottom-right on wider screens. role=status; auto-dismiss in JS. */
  .ba-toast {
    position: fixed; left: 14px; right: 14px; bottom: 18px; z-index: 90;
    display: flex; align-items: center; gap: 12px;
    padding: 13px 16px 13px 15px; max-width: none;
    background: var(--white); color: var(--fg);
    border: 1px solid var(--fog); border-left: 3px solid var(--brand-red);
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
    opacity: 0; transform: translateY(10px); pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  }
  .ba-toast.show { opacity: 1; transform: translateY(0); }
  .ba-toast.is-err { border-left-color: var(--amber); }
  .ba-toast .ba-tick {
    flex: none; width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--jade-bright-tint); color: var(--jade-bright);
  }
  .ba-toast.is-err .ba-tick { background: var(--amber-tint); color: var(--amber); }
  .ba-toast .ba-tick svg { width: 15px; height: 15px; display: block; }
  .ba-toast .ba-msg { font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.35; color: var(--fg-1); }
  .ba-toast .ba-msg b { font-weight: 700; color: var(--fg); }
  @media (min-width: 600px) {
    .ba-toast { left: auto; right: 24px; bottom: 24px; max-width: 400px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ba-toast { transition: opacity 120ms linear; transform: none; }
    .ba-toast.show { transform: none; }
  }

  .entry-body { padding: var(--space-4) var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: 10px; flex: 1; }
  .entry-loc { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--fg-3); }
  .entry-loc .dot { color: var(--brand-red); }
  .entry-name {
    margin: 0; font-family: var(--font-display); font-weight: 600;
    font-size: var(--text-lg); letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); color: var(--fg);
  }
  .entry-addr { font-size: var(--text-sm); color: var(--fg-2); }

  .entry-meta {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 0; border-top: 1px solid var(--fog); border-bottom: 1px solid var(--fog);
  }
  .entry-meta .m { display: flex; flex-direction: column; gap: 2px; }
  .entry-meta .m i { font-style: normal; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; color: var(--fg); }
  .entry-meta .sep { width: 1px; height: 26px; background: var(--fog); }

  .pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
  .pill {
    display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px;
    font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--fg-1);
    background: var(--cloud); border-radius: var(--radius-pill);
  }
  .pill.more { background: transparent; border: 1px dashed var(--mist); color: var(--fg-2); font-weight: 500; }

  .entry-cta {
    margin-top: auto; padding-top: 12px;
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--brand-red);
  }
  .entry-cta svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-out); }
  .entry:hover .entry-cta svg { transform: translateX(3px); }

  .view-all {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 56px; border: 1px solid var(--ink); border-radius: var(--radius-sm);
    background: var(--white); font-family: var(--font-display); font-weight: 600; font-size: var(--text-base);
    color: var(--fg); text-decoration: none;
    transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
  }
  .view-all:hover { background: var(--ink); color: var(--white); }
  .view-all .n { font-family: var(--font-mono); font-size: 12px; color: var(--brand-red); }
  .view-all:hover .n { color: var(--white); }

  /* ============ 6 · map (secondary, collapsible) ============ */
  .mapsec { padding: var(--space-6) 0; border-top: 1px solid var(--fog); }
  .map-toggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    min-height: 56px; padding: 0 var(--space-4);
    background: var(--white); border: 1px solid var(--fog); border-radius: var(--radius-md);
  }
  .map-toggle .lab { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--fg); }
  .map-toggle .lab svg { width: 18px; height: 18px; color: var(--brand-red); }
  .map-toggle .hint { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--fg-3); }
  .map-panel { display: none; margin-top: var(--space-3); }
  .map-panel.open { display: block; }
  .map-canvas {
    position: relative; height: 320px; border: 1px solid var(--fog); border-radius: var(--radius-md);
    background: var(--white); overflow: hidden;
  }
  .map-canvas .grid-bg { position: absolute; inset: 0; opacity: .6; }
  .map-canvas .crosshair-h, .map-canvas .crosshair-v { position: absolute; background: var(--fog); }
  .map-canvas .crosshair-h { left: 0; right: 0; top: 50%; height: 1px; }
  .map-canvas .crosshair-v { top: 0; bottom: 0; left: 50%; width: 1px; }
  .pin {
    position: absolute; transform: translate(-50%, -50%);
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--brand-red); border: 2px solid var(--white); box-shadow: var(--shadow-sm);
  }
  .pin.cluster {
    width: auto; height: auto; border-radius: var(--radius-pill);
    padding: 4px 9px; background: var(--ink);
    font-family: var(--font-mono); font-size: 11px; color: var(--white);
  }
  .map-note {
    position: absolute; left: 12px; bottom: 12px;
    font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wider); text-transform: uppercase;
    color: var(--fg-3); background: rgba(255,255,255,.85); padding: 5px 8px; border-radius: var(--radius-sm);
  }

  /* ============ 7 · link hub ============ */
  .hub { padding: var(--space-7) 0; border-top: 1px solid var(--fog); }
  .hub-head { margin-bottom: var(--space-5); }
  .hub-head h2 { margin: 8px 0 0; font-size: var(--text-xl); }
  .hub-groups { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
  .hub-group {
    background: var(--white); border: 1px solid var(--fog); border-radius: var(--radius-md);
    padding: var(--space-5);
  }
  .hub-group h3 {
    margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 600;
    font-size: var(--text-base); letter-spacing: var(--tracking-tight);
    display: flex; align-items: center; gap: 10px;
  }
  .hub-group h3 .tick { width: 14px; height: 1px; background: var(--brand-red); flex: none; }
  .hub-links { display: flex; flex-wrap: wrap; gap: 8px; }
  .hub-links a {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
    font-size: var(--text-sm); font-weight: 600; color: var(--fg-1); text-decoration: none;
    background: var(--paper); border: 1px solid var(--fog); border-radius: var(--radius-pill);
    transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .hub-links a:hover { border-color: var(--brand-red); color: var(--brand-red); }
  .hub-links a .n { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); margin-left: 7px; font-weight: 400; }

  /* ============ 8 · FAQ ============ */
  .faq { padding: var(--space-7) 0; border-top: 1px solid var(--fog); }
  .faq-head { margin-bottom: var(--space-5); max-width: 560px; }
  .faq-head h2 { margin: 8px 0 10px; font-size: var(--text-xl); }
  .faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--fog); }
  .faq details { border-bottom: 1px solid var(--fog); }
  .faq summary {
    list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    min-height: 56px; padding: var(--space-4) 4px; cursor: pointer;
    font-family: var(--font-display); font-weight: 600; font-size: var(--text-base);
    letter-spacing: var(--tracking-tight); color: var(--fg);
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary .ind {
    flex: none; width: 28px; height: 28px; border: 1px solid var(--mist); border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; justify-content: center; position: relative;
  }
  .faq summary .ind::before, .faq summary .ind::after {
    content: ""; position: absolute; background: var(--fg-1);
  }
  .faq summary .ind::before { width: 10px; height: 1.5px; }
  .faq summary .ind::after { width: 1.5px; height: 10px; transition: transform var(--dur-base) var(--ease-out); }
  .faq details[open] summary .ind::after { transform: rotate(90deg); opacity: 0; }
  .faq details[open] summary .ind { border-color: var(--brand-red); }
  .faq .a { padding: 0 4px var(--space-5); max-width: 640px; }
  .faq .a p { margin: 0 0 10px; font-size: var(--text-sm); line-height: var(--leading-relaxed); }
  .faq .a p:last-child { margin-bottom: 0; }
  .faq .a a { color: var(--brand-red); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

  /* ============ 8b · main services CTA ============ */
  .svc { padding: var(--space-7) 0; border-top: 1px solid var(--fog); }
  .svc-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
  .svc-card {
    background: var(--white); border: 1px solid var(--fog); border-radius: var(--radius-md);
    padding: var(--space-5);
    display: flex; flex-direction: column;
  }
  .svc-eyebrow {
    font-family: var(--font-sans); font-weight: 600; font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider); text-transform: lowercase; color: var(--fg-2);
    display: flex; align-items: center; gap: 12px; margin: 0 0 12px;
  }
  .svc-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--brand-red); flex: none; }
  .svc-card h2 { margin: 0 0 8px; font-size: var(--text-xl); letter-spacing: var(--tracking-tight); }
  .svc-sub { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--fg-2); max-width: 46ch; }
  .svc-items { border-top: 1px dashed var(--fog); }
  .svc-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; }
  .svc-item + .svc-item { border-top: 1px dashed var(--fog); }
  .svc-item svg, .svc-item img { width: 40px; height: 40px; flex: 0 0 auto; object-fit: contain; }
  .svc-item b {
    display: block; font-family: var(--font-display); font-weight: 600;
    font-size: var(--text-base); letter-spacing: var(--tracking-tight); color: var(--fg);
  }
  .svc-item p { margin: 2px 0 0; font-size: var(--text-sm); color: var(--fg-2); line-height: var(--leading-relaxed); }

  /* left card footer CTA — pinned to the bottom so the card matches the agent
     card's height and the two columns read as an intentional pair */
  .svc-card-cta {
    margin-top: auto; padding-top: var(--space-5);
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--brand-red);
    text-decoration: none;
  }
  .svc-card-cta svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-out); }
  .svc-card-cta:hover svg { transform: translateX(3px); }

  /* ============ agent card — Dustin (ported from listing-detail / building .sb-cta) ============
     Faithful port of the real agent CTA: logo header with drifting X-pattern,
     ringed headshot, live status dot, experience tile, creds, Message button,
     Sell/Buy. Re-tokenised to this page's brand vars, 8px max radius. */
  @keyframes sbCtaPulseGreen  { 0%, 100% { box-shadow: 0 0 0 0 rgba(15,169,104,.45) } 50% { box-shadow: 0 0 0 5px rgba(15,169,104,0) } }
  @keyframes sbCtaPulseYellow { 0%, 100% { box-shadow: 0 0 0 0 rgba(224,123,23,.45) } 50% { box-shadow: 0 0 0 5px rgba(224,123,23,0) } }
  @keyframes sbCtaPatternDrift { 0% { background-position: 50% 50% } 50% { background-position: 52% 48% } 100% { background-position: 50% 50% } }
  @keyframes sbCtaArcSpin { 0% { transform: rotate(0deg); opacity: .6 } 60% { transform: rotate(1080deg); opacity: .6 } 80% { transform: rotate(1080deg); opacity: .25 } 100% { transform: rotate(1080deg); opacity: .25 } }

  .sb-cta {
    background: var(--white); border: 1px solid var(--fog); border-radius: var(--radius-md);
    overflow: hidden; box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
    font-family: var(--font-sans);
    display: flex; flex-direction: column;
  }
  .sb-cta:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

  .sb-cta-header {
    position: relative; padding: 20px 22px 30px;
    background-color: var(--white);
    background-image: url("https://cdn.prod.website-files.com/64cad38500506adf7341422e/6509f72807ff82a438814baf_8x-pattern.png");
    background-position: 50% 50%; background-size: cover;
    animation: sbCtaPatternDrift 12s ease-in-out infinite; overflow: hidden;
  }
  .sb-cta-header::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 48px;
    background: linear-gradient(to top, var(--white), transparent); pointer-events: none;
  }
  .sb-cta-logo { display: flex; justify-content: center; margin-bottom: 18px; position: relative; z-index: 1; text-decoration: none; }
  .sb-cta-logo img { height: 40px; width: auto; }
  .sb-cta-agent { display: flex; align-items: center; gap: 15px; position: relative; z-index: 1; }
  .sb-cta-photo-wrap { position: relative; width: 110px; height: 110px; flex-shrink: 0; }
  .sb-cta-clip {
    position: relative; z-index: 1; width: 110px; height: 110px;
    border-radius: 50%; overflow: hidden;
    border: 3.5px solid var(--white); box-shadow: 0 4px 16px rgba(24,26,34,.12);
  }
  .sb-cta-ring { position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(190,30,45,.08); }
  .sb-cta-ring::after {
    content: ''; position: absolute; inset: -2px; border-radius: 50%;
    border: 2.5px solid transparent;
    border-top-color: var(--brand-red); border-right-color: rgba(190,30,45,.3);
    filter: drop-shadow(0 0 4px rgba(190,30,45,.3));
    animation: sbCtaArcSpin 4s cubic-bezier(.4,0,.2,1) forwards;
  }
  .sb-cta-photo {
    width: 100%; height: 100%; object-fit: cover;
    object-position: 58% 8%; transform: scale(1.38); transform-origin: 58% 8%;
    filter: brightness(1.12);
  }
  .sb-cta-info { min-width: 0; flex: 1; }
  .sb-cta-name { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--ink); line-height: 1.2; margin-bottom: 3px; letter-spacing: -0.01em; }
  .sb-cta-role { font-size: 13px; color: var(--fg-2); line-height: 1.3; margin-bottom: 7px; }
  .sb-cta-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
  .sb-cta-status.sb-cta-pulse-green { color: var(--jade); }
  .sb-cta-status.sb-cta-pulse-yellow { color: #B45309; }
  .sb-cta-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  .sb-cta-pulse-green .sb-cta-dot  { background: var(--jade-bright); animation: sbCtaPulseGreen 2s ease-in-out infinite; }
  .sb-cta-pulse-yellow .sb-cta-dot { background: var(--amber);       animation: sbCtaPulseYellow 2.5s ease-in-out infinite; }
  .sb-cta-body { padding: 4px 22px 22px; display: flex; flex-direction: column; flex: 1; }
  .sb-cta-exp {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px;
    background: var(--paper); border: 1px solid var(--fog); border-radius: var(--radius-md);
  }
  .sb-cta-exp-num { font-family: var(--font-mono); font-size: 26px; font-weight: 500; color: var(--brand-red); line-height: 1; letter-spacing: -1px; flex-shrink: 0; }
  .sb-cta-exp-sep { width: 1px; height: 28px; background: var(--fog); flex-shrink: 0; }
  .sb-cta-exp-detail { font-size: 13px; font-weight: 500; color: var(--fg-2); line-height: 1.35; }
  .sb-cta-exp-detail span { color: var(--fg-3); font-size: 11px; display: block; margin-top: 1px; }
  .sb-cta-creds { display: flex; gap: 16px; margin-bottom: 16px; padding: 0 2px; }
  .sb-cta-cred { font-size: 12px; font-weight: 500; color: var(--fg-2); display: flex; align-items: center; gap: 5px; }
  .sb-cta-cred::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--jade-bright); flex-shrink: 0; }
  .sb-cta-sep { height: 1px; background: var(--fog); margin-bottom: 16px; }
  .sb-cta-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
  .sb-cta-btn {
    display: flex; align-items: center; justify-content: center;
    padding: 14px 16px; border-radius: var(--radius-sm);
    font-family: var(--font-sans); font-size: 14px; font-weight: 700; letter-spacing: -.1px;
    text-decoration: none; cursor: pointer; line-height: 1; border: none;
    transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  }
  .sb-cta-btn-primary { background: var(--ink); color: var(--white); }
  .sb-cta-btn-primary:hover { background: var(--brand-red); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(190,30,45,.25); }
  .sb-cta-services { border-top: 1px solid var(--fog); padding-top: 14px; display: flex; gap: 10px; margin-top: auto; }
  .sb-cta-svc { flex: 1; display: flex; flex-direction: column; padding: 12px; border-radius: var(--radius-md); background: var(--paper); text-decoration: none; transition: background var(--dur-base) var(--ease-out); cursor: pointer; }
  .sb-cta-svc:hover { background: var(--cloud); }
  .sb-cta-svc-title { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.2; display: flex; align-items: center; justify-content: space-between; }
  .sb-cta-svc-arrow { font-size: 14px; color: var(--mist); transition: color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
  .sb-cta-svc:hover .sb-cta-svc-title { color: var(--brand-red); }
  .sb-cta-svc:hover .sb-cta-svc-arrow { color: var(--brand-red); transform: translateX(2px); }
  .sb-cta-svc-sub { font-size: 11px; font-weight: 500; color: var(--fg-3); line-height: 1.35; margin-top: 6px; }
  @media (prefers-reduced-motion: reduce) {
    .sb-cta-header, .sb-cta-ring::after, .sb-cta-pulse-green .sb-cta-dot, .sb-cta-pulse-yellow .sb-cta-dot { animation: none !important; }
  }

  /* ============ 9 · footer ============ */
  .foot { background: var(--ink); color: var(--white); padding: var(--space-7) 0 calc(var(--space-7) + 76px); margin-top: var(--space-6); }
  .foot .top { display: flex; flex-direction: column; gap: var(--space-5); padding-bottom: var(--space-6); border-bottom: 1px solid var(--graphite-2); }
  .foot img { height: 26px; width: auto; }
  .foot .tag { font-family: var(--font-serif); font-style: italic; font-size: var(--text-lg); color: var(--mist); }
  .foot .cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); padding: var(--space-6) 0; }
  .foot .col h4 { margin: 0 0 12px; font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--slate-2); }
  .foot .col a { display: block; padding: 7px 0; font-size: var(--text-sm); color: var(--fog); text-decoration: none; }
  .foot .col a:hover { color: var(--white); }
  .foot .legal { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--slate-2); line-height: 1.7; border-top: 1px solid var(--graphite-2); padding-top: var(--space-5); }
  .foot .legal .cjk { font-family: var(--font-cjk); color: var(--slate); }

  /* ============ mobile sticky action bar ============ */
  .actionbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: flex; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,0.94); backdrop-filter: blur(10px);
    border-top: 1px solid var(--fog);
  }
  .actionbar button, .actionbar a {
    flex: 1; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
    border-radius: var(--radius-sm); text-decoration: none;
  }
  .actionbar .ab-filters { background: var(--white); color: var(--fg); border: 1px solid var(--ink); }
  .actionbar .ab-filters .count {
    font-family: var(--font-mono); font-size: 11px; color: var(--white); background: var(--brand-red);
    border-radius: var(--radius-pill); min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
  }
  .actionbar .ab-alerts { background: var(--brand-red); color: var(--white); border: 0; }
  .actionbar svg { width: 15px; height: 15px; }

  /* ============ filter bottom sheet ============ */
  .sheet-backdrop {
    position: fixed; inset: 0; z-index: 80; background: rgba(24,26,34,0.45);
    opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out);
  }
  .sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: var(--white); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 84dvh; display: flex; flex-direction: column;
    transform: translateY(105%); transition: transform var(--dur-slow) var(--ease-out);
    box-shadow: var(--shadow-lg);
  }
  body.sheet-open { overflow: hidden; }
  body.sheet-open .sheet-backdrop { opacity: 1; pointer-events: auto; }
  body.sheet-open .sheet { transform: translateY(0); }
  .sheet-grab { display: flex; justify-content: center; padding: 10px 0 0; }
  .sheet-grab i { width: 40px; height: 4px; border-radius: var(--radius-pill); background: var(--fog); }
  .sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-3) var(--space-5) var(--space-3); border-bottom: 1px solid var(--fog);
  }
  .sheet-head h2 { margin: 0; font-size: var(--text-md); font-weight: 600; }
  .sheet-close {
    width: 44px; height: 44px; margin-right: -10px; border: 0; background: transparent; color: var(--fg-2);
    display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm);
  }
  .sheet-close:hover { color: var(--brand-red); }
  .sheet-body { overflow-y: auto; padding: var(--space-4) var(--space-5) var(--space-5); }
  .fgroup { padding: var(--space-4) 0; border-bottom: 1px dashed var(--fog); }
  .fgroup:last-child { border-bottom: 0; }
  .fgroup .glab { margin-bottom: 12px; }
  .fopts { display: flex; flex-wrap: wrap; gap: 8px; }
  .fopt {
    display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px;
    background: var(--paper); border: 1px solid var(--fog); border-radius: var(--radius-pill);
    font-size: var(--text-sm); font-weight: 600; color: var(--fg-1);
    user-select: none; transition: border-color var(--dur-fast) var(--ease-out);
  }
  .fopt .n { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--fg-3); }
  .fopt.on { border-color: var(--brand-red); color: var(--brand-red); background: var(--brand-red-100); }
  .fopt.on .n { color: var(--brand-red); }
  .sheet-foot {
    display: flex; gap: 10px; padding: var(--space-3) var(--space-5) calc(var(--space-3) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--fog); background: var(--white);
  }
  .sheet-foot .reset { flex: 0 0 auto; min-height: 48px; padding: 0 18px; background: transparent; border: 1px solid var(--fog); border-radius: var(--radius-sm); font-weight: 600; font-size: var(--text-sm); color: var(--fg-1); }
  .sheet-foot .apply { flex: 1; min-height: 48px; background: var(--brand-red); color: var(--white); border: 0; border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); }
  .sheet-foot .apply:hover { background: var(--brand-red-600); }

  /* ============ motion layer ============
     All entrance/scroll motion is gated behind html.motion, which JS adds
     only when prefers-reduced-motion is NOT set. No JS / reduced motion
     ⇒ the page renders fully static. Transform/opacity/clip-path only. */
  :root {
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); /* most motion */
    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);  /* confident hero moves */
    --dur-hero: 600ms;
  }

  /* — 1 · hero entrance (one rehearsed moment, plays once on load) — */
  html.motion .hero-eyebrow,
  html.motion .hero h1,
  html.motion .hero h1 .serif-line,
  html.motion .hero .lede,
  html.motion .hero .statrow { opacity: 0; }
  html.motion .hero-eyebrow {
    transition: opacity var(--dur-slow) var(--ease-out-quint);
  }
  html.motion .hero-eyebrow::before {
    transform: scaleX(0); transform-origin: 0 50%;
    transition: transform var(--dur-slow) var(--ease-out-quint) 100ms;
  }
  html.motion .hero h1 {
    transform: translateY(16px);
    transition: opacity var(--dur-hero) var(--ease-out-expo) 80ms,
                transform var(--dur-hero) var(--ease-out-expo) 80ms;
  }
  html.motion .hero h1 .serif-line {
    transform: translateY(10px);
    transition: opacity var(--dur-slow) var(--ease-out-quint) 160ms,
                transform var(--dur-slow) var(--ease-out-quint) 160ms;
  }
  html.motion .hero .lede {
    transform: translateY(12px);
    transition: opacity var(--dur-slow) var(--ease-out-quint) 220ms,
                transform var(--dur-slow) var(--ease-out-quint) 220ms;
  }
  /* stat plate: frame draws open left → right (clip-path, never width) */
  html.motion .hero .statrow {
    clip-path: inset(-2% 100% -2% -2%);
    transition: opacity var(--dur-hero) var(--ease-out-expo) 240ms,
                clip-path var(--dur-hero) var(--ease-out-expo) 240ms;
  }
  html.motion body.hero-in .hero-eyebrow,
  html.motion body.hero-in .hero h1,
  html.motion body.hero-in .hero h1 .serif-line,
  html.motion body.hero-in .hero .lede,
  html.motion body.hero-in .hero .statrow { opacity: 1; transform: none; }
  html.motion body.hero-in .hero-eyebrow::before { transform: scaleX(1); }
  html.motion body.hero-in .hero .statrow { clip-path: inset(-2% -2% -2% -2%); }
  /* hero photo: gentle settle-in scale riding the same entrance (transform-only) */
  html.motion .hero-bg { transform: scale(1.05); transition: transform 1400ms var(--ease-out-expo); }
  html.motion body.hero-in .hero-bg { transform: none; }

  /* — 3 · scroll reveals (shared IO adds .in once, then classes are cleaned up) — */
  html.motion .rv {
    opacity: 0; transform: translateY(14px);
    transition: opacity var(--dur-slow) var(--ease-out-quint) var(--rv-d, 0ms),
                transform var(--dur-slow) var(--ease-out-quint) var(--rv-d, 0ms);
    will-change: transform, opacity;
  }
  html.motion .rv.in { opacity: 1; transform: translateY(0); }

  /* — 4 · hairline draws: section top rules + toolbar-head bottom rules — */
  html.motion .hl { border-top-color: transparent; position: relative; }
  html.motion .hl::before {
    content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
    background: var(--fog); transform: scaleX(0); transform-origin: 0 50%;
    transition: transform var(--dur-hero) var(--ease-out-expo);
  }
  html.motion .hl-b { border-bottom-color: transparent; position: relative; }
  html.motion .hl-b::after {
    content: ""; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px;
    background: var(--fog); transform: scaleX(0); transform-origin: 0 50%;
    transition: transform var(--dur-hero) var(--ease-out-expo) 120ms;
  }
  html.motion .hl.hl-in::before,
  html.motion .hl-b.hl-in::after { transform: scaleX(1); }

  /* — 6 · filter sheet: exit ≈75% of enter; chip press feedback — */
  html.motion .sheet { transition: transform 315ms var(--ease-out-quint); }
  html.motion body.sheet-open .sheet { transition-duration: var(--dur-slow); }
  html.motion .sheet-backdrop { transition: opacity 150ms var(--ease-out-quint); }
  html.motion body.sheet-open .sheet-backdrop { transition-duration: var(--dur-base); }
  html.motion .fopt {
    transition: border-color var(--dur-fast) var(--ease-out-quint),
                background var(--dur-fast) var(--ease-out-quint),
                color var(--dur-fast) var(--ease-out-quint),
                transform var(--dur-fast) var(--ease-out-quint);
  }
  html.motion .fopt:active { transform: scale(0.96); }

  /* — live-listings dot: soft pulse, only under html.motion (never with reduced motion) — */
  html.motion .entry-active .ld { animation: liveDot 2200ms var(--ease-out-quint) infinite; }
  @keyframes liveDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .4; transform: scale(.72); }
  }

  /* — 7 · map panel: fade + rise on open (animation fires across display toggle) — */
  html.motion .map-panel.open { animation: mapPanelIn var(--dur-slow) var(--ease-out-quint); }
  @keyframes mapPanelIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }

  /* — 8 · buttons & CTAs: 120ms hover darken, 1px press, red focus ring — */
  html.motion .hdr-cta, html.motion .filters-btn, html.motion .view-all,
  html.motion .map-toggle, html.motion .actionbar .ab-filters, html.motion .actionbar .ab-alerts,
  html.motion .sheet-foot .reset, html.motion .sheet-foot .apply, html.motion .chip-clear,
  html.motion .svc-cta {
    transition: background var(--dur-fast) var(--ease-out-quint),
                color var(--dur-fast) var(--ease-out-quint),
                border-color var(--dur-fast) var(--ease-out-quint),
                transform var(--dur-fast) var(--ease-out-quint);
  }
  .actionbar .ab-alerts:hover, .hdr-cta:hover, .sheet-foot .apply:hover, .svc-cta:hover { background: var(--brand-red-600); }
  .actionbar .ab-filters:hover, .sheet-foot .reset:hover { background: var(--cloud); }
  .filters-btn:hover { background: var(--graphite-2, #2b2e3a); }
  html.motion .hdr-cta:active, html.motion .filters-btn:active, html.motion .view-all:active,
  html.motion .map-toggle:active, html.motion .actionbar .ab-filters:active, html.motion .actionbar .ab-alerts:active,
  html.motion .sheet-foot .reset:active, html.motion .sheet-foot .apply:active, html.motion .chip-clear:active,
  html.motion .svc-cta:active {
    transform: translateY(1px);
  }
  a:focus-visible, button:focus-visible, select:focus-visible,
  summary:focus-visible, input:focus-visible {
    outline: none; box-shadow: var(--ring);
  }

  /* — reduced motion: kill everything, show final state immediately — */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      transition-delay: 0ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* ============ responsive ≥ 700px ============ */
  @media (min-width: 700px) {
    .statrow { grid-template-columns: repeat(4, 1fr); }
    .statrow .cell { border-bottom: 0; border-right: 1px solid rgba(255,255,255,.18); }
    .statrow .cell:last-child { border-right: 0; }
    .hub-groups { grid-template-columns: repeat(3, 1fr); }
    .svc-grid { grid-template-columns: 1.1fr 1fr; align-items: stretch; }
    .foot .cols { grid-template-columns: repeat(4, 1fr); }
  }

  /* ============ responsive ≥ 768px — the bottom-sheet pattern retires here:
     filters become an inline bar (search · facet popovers · sort), the sticky
     action bar hides, and the almanac grid runs two columns. ============ */
  @media (min-width: 768px) {
    .entries { grid-template-columns: repeat(2, 1fr); }
    .actionbar, .filters-btn { display: none; }
    .sheet, .sheet-backdrop { display: none; }  /* sheet is fully inert ≥768px */
    .foot { padding-bottom: var(--space-7); }
    .deskfacets { display: flex; gap: 10px; }
    .searchrow { align-items: center; }
    .searchbox { flex: 0 1 420px; min-width: 220px; }
    .sortslot { display: block; margin-left: auto; }
    .chiprow { margin-top: var(--space-4); }

    /* — snapshot overlaps the hero photo (echoes the live 8x.realestate hero) —
       the section pulls up by --snap-pull: its mono head rows sit on the photo
       (knocked out light) and the white card lands half on photo, half on paper. */
    :root { --snap-pull: 250px; }
    .hero { padding-bottom: calc(var(--space-7) + var(--snap-pull)); }
    .snap { position: relative; z-index: 5; margin-top: calc(-1 * var(--snap-pull)); border-top: 0; padding-top: 0; }
    html.motion .snap.hl::before { display: none; } /* no hairline draw mid-photo */
    .snap .toolbar-head { border-bottom-color: rgba(255,255,255,.32); }
    html.motion .snap .toolbar-head.hl-b::after { background: rgba(255,255,255,.32); }
    .snap .toolbar-head .sec-no,
    .snap .toolbar-head .stat-label { color: rgba(255,255,255,.74); }
    .snap-eyebrow { color: rgba(255,255,255,.8); }
    .snap-head h2 { color: var(--white); }
    .snap .corner-dots::before { background: var(--white); } /* top-left dot sits on the photo */

    /* — premium editorial card, landing half over the hero photo and half
       over the paper. CRISP, fully-defined silhouette: a near-solid high-key
       frosted-white fill (never gray), a hairline border all the way around,
       and a strong contained shadow that defines a clean bottom edge. A subtle
       backdrop blur (enhancement only) gives a tasteful frosted quality without
       letting the dark photo muddy the fill. Fallback below is a clean solid
       white card. */
    .snap-card {
      /* SOLID crisp white card — no muddy translucency. Defined silhouette on
         all four sides via a hairline border + a layered shadow (close ambient
         + deep contained drop) so the bottom edge is clean and never bleeds. */
      background: #FFFFFF;
      border: 1px solid rgba(24,26,34,0.08);
      border-radius: var(--radius-lg, 12px);
      box-shadow:
        0 1px 0 rgba(255,255,255,0.9) inset,
        0 1px 2px rgba(24,26,34,0.06),
        0 4px 10px rgba(24,26,34,0.08),
        0 28px 56px -20px rgba(24,26,34,0.45);
    }
    @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
      .snap-card {
        /* enhancement only: a whisper of frost behind a near-opaque white fill,
           so the dark photo can never grey it out. Reads as crisp white. */
        background: rgba(255,255,255,0.97);
        -webkit-backdrop-filter: blur(18px) saturate(120%) brightness(1.02);
        backdrop-filter: blur(18px) saturate(120%) brightness(1.02);
      }
    }
    /* dividers + figures read cleanly on the crisp white fill */
    .snap-card .snap-controls { border-bottom-color: rgba(24,26,34,0.10); }
    .snap-card .snap-fig + .snap-fig { border-left-color: rgba(24,26,34,0.10); }
    /* strong, legible red medians + ink labels on the high-key card */
    .snap-card .snap-price { color: var(--brand-red); text-shadow: none; }
    .snap-card .snap-sub b { color: var(--ink); }
    /* trigger stays crisp solid white so the control is unmistakable */
    .snap-card .snap-trigger { background: var(--white); border-color: var(--fog); }
    .snap-card .snap-trigger:hover { border-color: var(--mist); }
  }

  /* ============ responsive ≥ 1024px ============ */
  @media (min-width: 1024px) {
    /* tall, confident hero — bottom padding keeps room for the overlapping snapshot */
    .hero { padding: var(--space-9) 0 calc(var(--space-8, 72px) + var(--snap-pull, 250px)); min-height: 560px; }
    .hero .lede { font-size: var(--text-md); max-width: 640px; }
    .map-canvas { height: 440px; }
    .faq-list { max-width: 760px; }
    .foot .top { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  }

  /* ============ responsive ≥ 1100px — three-column almanac grid ============ */
  @media (min-width: 1100px) {
    .entries { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
  }

  /* ============ responsive ≥ 1280px — wide-canvas refinements ============ */
  @media (min-width: 1280px) {
    .wrap { padding: 0 32px; }
    .searchbox { flex-basis: 460px; }
    .snap-fig { padding: var(--space-4) var(--space-6); }
    .map-canvas { height: 500px; }
    .hero .dotfield { right: 40px; width: 360px; height: 260px; }
  }