/* ============================================================
   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');

/* Kill iOS/Android text auto-inflation — without this, mobile Safari/Chrome
   scales up small mono text ~2-3x past authored sizes. Authored sizes win. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* 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; } }

  /* — mobile: the count takes its own line —
     .resultsbar is a single row with the view toggle and the sort select pushed
     right, which on a 390px phone leaves the count roughly 100px. "SHOWING 110
     OF 110 BUILDINGS" then broke across four lines and dragged the whole bar's
     height with it, so the label read as damage rather than as a label.
     Stacking is the honest fix: the count sits above its own controls, where a
     28-character mono string fits on one line at any phone width, and the
     toggle and sort get the full row they were already competing for. */
  @media (max-width: 599.98px) {
    .resultsbar { flex-direction: column; align-items: stretch; gap: var(--space-3); }
    .resultsbar .showing { margin: 0; white-space: nowrap; }
    .resultsbar-tools { justify-content: space-between; gap: var(--space-2); }
    .resultsbar-tools .sortsel { flex: 1 1 auto; min-width: 0; }
    .resultsbar-tools .sortsel select { width: 100%; }
    .resultsbar-tools .viewtoggle { flex: 0 0 auto; }
  }

  /* — 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; }
  }