/* ============================================================
   8X CONDO BUILDING DOSSIER — PRODUCTION STYLESHEET
   Per-building SSR page. 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 building-a.html's inline <style> block.

   DROPPED from the mockup CSS: the listings-grid component styles
   (.bl-tabs, .bl-controls, .bl-stats, .bl-grid, .bcard, .ph-track,
   .ph-nav, .ph-dots, .spill, etc.) — production mounts the real
   8X condo-building-grid, which ships its own /ld/condo-building-grid.css.
     KEPT: .blk-head heading scaffolding the listings section reuses.
   Logo refs → /ld/condo/logo.svg.
   ============================================================ */

/* ============================================================
   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 — production bundle ships a single Latin woff2 (variable
   weight collapsed to one file in /ld/fonts/). Italics synthesize obliques;
   true italic display moments use Instrument Serif. */
@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 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 -------- */
  --brand-red:        #BE1E2D;
  --brand-red-600:    #9E1925;
  --brand-red-100:    #FBE9EB;

  --ink:              #181A22;
  --graphite:         #22242D;
  --graphite-2:       #2E3038;
  --slate:            #5A5A5A;
  --slate-2:          #8A8A8A;
  --mist:             #BFBFBF;
  --fog:              #E5E5E5;
  --cloud:            #F1F1F1;
  --paper:            #F4F5F8;
  --white:            #FFFFFF;

  --vermillion:       #D93A2C;
  --jade:             #2F6B5E;
  --jade-bright:      #0FA968;
  --jade-bright-tint: #E4F6EE;
  --amber:            #E07B17;
  --amber-tint:       #FCEBD7;
  --ivory:            #F5EFE6;
  --gold:             #B89653;

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

  --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;

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

  --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);
}

.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 building-a.html inline <style>
   (listings-grid component CSS intentionally omitted; mounted
    component ships its own /ld/condo-building-grid.css)
   ============================================================ */

/* ============ base / resets ============ */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; padding-bottom: 84px; } /* room for sticky action bar */
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; }
.wrap-narrow { max-width: var(--container-narrow); }

/* lowercase eyebrow — signature (overrides token uppercase) */
.eb {
  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: 10px;
}
.eb::before { content: ""; width: 8px; height: 8px; border: 2px solid var(--brand-red); flex: 0 0 auto; }
.eb .cjk { font-family: var(--font-cjk); color: var(--mist); font-size: 13px; letter-spacing: 0; margin-left: auto; }

.mono-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.hairline { border: 0; border-top: 1px solid var(--fog); margin: 0; }

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

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-weight: 600; font-size: 15px;
  text-transform: lowercase; letter-spacing: 0.01em;
  text-decoration: none; border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn-red { background: var(--brand-red); color: var(--white); }
.btn-red:hover { background: var(--brand-red-600); }
.btn-ghost { background: var(--white); color: var(--ink); border-color: var(--border-strong); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-ink { background: var(--ink); color: var(--white); }
.btn-ink:hover { background: var(--graphite-2); }
.btn svg { flex: 0 0 auto; }

/* ============ header ============ */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: rgba(244,245,248,0.88);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--fog);
}
.hdr-in { display: flex; align-items: center; justify-content: space-between; height: 58px; }
.hdr-logo img { height: 36px; width: auto; }
.hdr .btn { min-height: 38px; padding: 6px 14px; font-size: 14px; }
.hdr-nav { display: none; }

.crumbs {
  border-bottom: 1px solid var(--fog);
  background: var(--paper);
}
.crumbs-in {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 0; overflow-x: auto; white-space: nowrap;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em;
  color: var(--fg-3); scrollbar-width: none;
}
.crumbs-in::-webkit-scrollbar { display: none; }
.crumbs-in a { color: var(--fg-2); text-decoration: none; }
.crumbs-in a:hover { color: var(--brand-red); text-decoration: underline; }
.crumbs-in .sep { color: var(--mist); }
.crumbs-in .cur { color: var(--ink); font-weight: 500; }

/* ============ hero ============ */
.hero-photo { position: relative; }
.hero-photo img { width: 100%; height: 56vh; min-height: 320px; max-height: 560px; object-fit: cover; }
.hero-photo .ph-tag {
  position: absolute; left: 16px; bottom: 16px;
  background: rgba(24,26,34,0.78); color: var(--white);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 10px; border-radius: var(--radius-sm);
  display: flex; gap: 8px; align-items: center;
}
.hero-photo .ph-tag i { width: 6px; height: 6px; background: var(--brand-red); display: inline-block; }
/* corner dots — blueprint accent */
.corner-dots { position: absolute; inset: 12px; pointer-events: none; }
.corner-dots span { position: absolute; width: 5px; height: 5px; background: var(--white); opacity: 0.9; }
.corner-dots span:nth-child(1){ top:0; left:0; } .corner-dots span:nth-child(2){ top:0; right:0; }
.corner-dots span:nth-child(3){ bottom:0; left:0; } .corner-dots span:nth-child(4){ bottom:0; right:0; }

.hero-card {
  background: var(--white);
  border: 1px solid var(--fog);
  border-radius: var(--radius-md);
  margin-top: -56px; position: relative; z-index: 2;
  padding: 24px 20px 26px;
  box-shadow: var(--shadow-md);
}
.hero-card h1 {
  margin: 12px 0 6px;
  font-size: clamp(30px, 8vw, 52px);
}
.hero-addr { font-family: var(--font-mono); font-size: 13px; color: var(--fg-2); margin: 0 0 18px; letter-spacing: 0.01em; }
.hero-addr .pin { color: var(--brand-red); }

.keystats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--fog); border-bottom: 1px solid var(--fog);
  margin: 0 0 18px;
}
.keystats > div { padding: 12px 4px; text-align: center; position: relative; }
.keystats > div + div::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; border-left: 1px dashed var(--fog); }
.keystats b { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 20px; color: var(--ink); }
.keystats span { display: block; margin-top: 3px; }

.hero-sum { margin: 0; font-size: 16.5px; }
.hero-ctas { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.hero-ctas .btn { flex: 1 1 auto; }

/* ============ gallery ============ */
/* MOBILE: horizontal swipe strip (touch users understand swipe).
   DESKTOP (≥760px): becomes an editorial mosaic grid — see media query below.
   Clicking any figure opens the lightbox (wired in condo-building.js). */
.gal { margin-top: 28px; }
.gal-strip {
  display: flex; gap: 10px; overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 20px 8px; margin: 14px -20px 0;
  scrollbar-width: none;
}
.gal-strip::-webkit-scrollbar { display: none; }
.gal-strip figure {
  flex: 0 0 82%; margin: 0; scroll-snap-align: center; position: relative;
  border: 1px solid var(--fog); border-radius: var(--radius-md); overflow: hidden; background: var(--white);
  cursor: zoom-in;
}
.gal-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.gal-strip figcaption {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-3); padding: 8px 12px; display: flex; justify-content: space-between;
}
.gal-count {
  display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px;
}
.gal-count .mono { font-size: 11px; color: var(--fg-3); }

/* ============ gallery lightbox ============ */
.glb {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  background: rgba(24,26,34,0.94);
  padding: clamp(16px, 4vw, 56px);
}
.glb.open { display: flex; }
.glb-stage {
  position: relative; max-width: min(1100px, 100%); max-height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.glb-fig { margin: 0; max-width: 100%; max-height: calc(100vh - 150px); display: flex; align-items: center; justify-content: center; }
.glb-fig img {
  max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto;
  object-fit: contain; border-radius: var(--radius-md); background: var(--graphite);
  box-shadow: var(--shadow-lg);
}
.glb-cap {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mist); display: flex; gap: 14px; align-items: center; justify-content: center;
}
.glb-cap .glb-idx { color: var(--white); }
.glb-cap .glb-sep { width: 4px; height: 4px; background: var(--brand-red); }
/* controls — close, prev, next */
.glb-btn {
  position: absolute; z-index: 2;
  width: 48px; height: 48px; min-height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.10); color: var(--white);
  border: 1px solid rgba(255,255,255,0.22); border-radius: var(--radius-pill);
  cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.glb-btn:hover { background: rgba(255,255,255,0.20); border-color: var(--white); }
.glb-btn:active { transform: scale(0.94); }
.glb-btn svg { width: 22px; height: 22px; }
.glb-close { top: 0; right: 0; }
.glb-prev { left: 0; top: 50%; transform: translateY(-50%); }
.glb-next { right: 0; top: 50%; transform: translateY(-50%); }
.glb-prev:active, .glb-next:active { transform: translateY(-50%) scale(0.94); }
.glb-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,0.55); }
@media (prefers-reduced-motion: no-preference) {
  .glb-fig img { animation: glbIn 280ms var(--ease-out, cubic-bezier(0.22,1,0.36,1)) both; }
  @keyframes glbIn { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }
}

/* ============ section scaffolding ============ */
section.blk { padding-top: 44px; }
.blk-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.blk-head h2 { margin: 0; font-size: clamp(24px, 6vw, 36px); }
.blk-head .sub { margin: 0; color: var(--fg-2); font-size: 15px; }

/* ============ ZONE B — full-width "what's for sale" payoff ============ */
/* The listings section is the lead of the full-width zone — give it a touch
   more presence: a hairline top rule + a short red accent above the header. */
#listings.zoneb-lead { padding-top: 40px; margin-top: 8px; }
#listings .blk-head { position: relative; }

/* ============ data moat ============ */
.moat {
  margin-top: 44px;
  background: var(--white);
  border-top: 1px solid var(--fog); border-bottom: 1px solid var(--fog);
  padding: 44px 0 48px;
  position: relative;
}
.moat::before {
  content: ""; position: absolute; top: -1px; left: 20px; width: 64px; height: 3px; background: var(--brand-red);
}
.statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 28px; }
.stat {
  border: 1px solid var(--fog); border-radius: var(--radius-md);
  background: var(--paper); padding: 14px 14px 12px; position: relative;
}
.stat::after { content: ""; position: absolute; top: 6px; right: 6px; width: 4px; height: 4px; background: var(--mist); }
.stat b { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 22px; letter-spacing: -0.01em; color: var(--ink); margin-top: 6px; }
.stat .up { color: var(--jade-bright); }
.stat .note { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); margin-top: 2px; display: block; }

/* chart */
.chart-card { border: 1px solid var(--fog); border-radius: var(--radius-md); background: var(--paper); padding: 16px 14px 10px; margin-bottom: 28px; position: relative; /* tooltip positioning context */ }
.chart-card .ch-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; gap: 8px; }
.chart-card .ch-top b { font-family: var(--font-mono); font-weight: 500; font-size: 13px; color: var(--jade-bright); }
.chart-svg { width: 100%; height: auto; display: block; }

/* chart — Economist-style dual chart (JS-built: bars = sales/yr · line = median price) */
.chart-svg .ch-grid line { stroke: var(--fog); stroke-width: 1; }
.chart-svg line.ch-base, .chart-svg .ch-grid line.ch-base { stroke: var(--mist); }
.chart-svg .ch-tick, .chart-svg .ch-years text, .chart-svg .ch-count { font-family: var(--font-mono); letter-spacing: 0.02em; }
.chart-svg .ch-years text { font-size: 9px; fill: var(--slate-2); }
.chart-svg .ch-tick { font-size: 8.5px; fill: var(--slate-2); }
.chart-svg .ch-count { font-size: 8px; fill: var(--fg-3); }
.chart-svg .ch-bar { fill: var(--mist); opacity: 0.45; }
.chart-svg .ch-bar.is-hot { fill: var(--slate-2); opacity: 0.75; }
.chart-svg .ch-line { fill: none; stroke: var(--brand-red); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .ch-dot { fill: var(--white); stroke: var(--brand-red); stroke-width: 2; }
.chart-svg .ch-dot.ch-end, .chart-svg .ch-dot.is-hot { fill: var(--brand-red); }
.chart-svg .ch-term { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; fill: var(--ink); }
.chart-svg .ch-empty { font-family: var(--font-mono); font-size: 10.5px; fill: var(--fg-3); letter-spacing: 0.04em; }
.chart-svg .ch-guide { stroke: var(--mist); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.chart-svg .ch-guide.on { opacity: 1; }
.chart-svg .ch-hit { fill: transparent; cursor: crosshair; }
/* only the hover bands take pointer events — everything else passes through */
.chart-svg .ch-grid, .chart-svg .ch-bars, .chart-svg .ch-dots, .chart-svg .ch-line,
.chart-svg .ch-guide, .chart-svg text { pointer-events: none; }

/* chart tooltip — paper card, hairline border, mono numbers */
.chart-tip {
  position: absolute; z-index: 5; pointer-events: none;
  display: flex; flex-direction: column; gap: 1px; min-width: 92px;
  background: var(--white); border: 1px solid var(--fog); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); padding: 7px 10px 8px;
}
.chart-tip[hidden] { display: none; }
.chart-tip .ct-y { font-family: var(--font-mono); font-size: 9px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
.chart-tip .ct-p { font-family: var(--font-mono); font-weight: 500; font-size: 14px; color: var(--ink); letter-spacing: -0.01em; }
.chart-tip .ct-n { font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); }

/* sold table */
.sold-card { border: 1px solid var(--fog); border-radius: var(--radius-md); background: var(--paper); overflow: hidden; }
.sold-card .sc-head {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 14px 14px 12px; border-bottom: 1px solid var(--fog);
}
.sold-card .sc-head .vtag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--jade); background: var(--jade-bright-tint);
  padding: 4px 8px; border-radius: var(--radius-sm);
}
table.sold { width: 100%; border-collapse: collapse; }
table.sold th {
  text-align: left; padding: 10px 14px 8px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3);
  border-bottom: 1px solid var(--fog);
}
table.sold td { padding: 12px 14px; border-bottom: 1px solid var(--fog); vertical-align: top; }
table.sold tr:last-child td { border-bottom: 0; }
table.sold .unit { font-family: var(--font-mono); font-weight: 500; font-size: 14px; color: var(--ink); white-space: nowrap; }
table.sold .specs { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); margin-top: 3px; white-space: nowrap; }
table.sold .price { font-family: var(--font-mono); font-weight: 500; font-size: 15px; color: var(--ink); text-align: right; white-space: nowrap; }
table.sold .date { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); text-align: right; margin-top: 3px; white-space: nowrap; }
table.sold td:last-child { text-align: right; }

/* building street on the unit line — secondary mono/muted, price stays anchor */
table.sold .unit-addr { font-family: var(--font-mono); font-weight: 400; font-size: 11.5px; color: var(--fg-3); white-space: nowrap; }

/* PENDING rows — amber pill instead of the green BC-Assessment check/date */
.pend-pill {
  display: inline-block; font-family: var(--font-mono); font-weight: 600;
  font-size: 9.5px; letter-spacing: 0.06em; line-height: 1;
  padding: 3px 6px; border-radius: 4px; color: var(--amber);
  background: var(--amber-tint); border: 1px solid rgba(224,123,23,0.28);
  margin-bottom: 4px; vertical-align: middle;
}
table.sold .date.pend-ask { color: var(--amber); }
/* "Pending" subhead row above the pending block */
table.sold tr.sold-subhead td { padding: 9px 14px 5px; border-bottom: 0; }
.sold-subhead-lbl {
  font-family: var(--font-mono); font-weight: 600; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber);
}

.gate-zone { position: relative; }
.gate-zone.locked .gated-rows { filter: blur(7px); user-select: none; pointer-events: none; }
.gated-rows { transition: filter var(--dur-slow) var(--ease-out); }

.gate {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.gate-card {
  background: var(--white); border: 1px solid var(--fog); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 22px 20px; max-width: 360px; width: 100%;
  text-align: center; position: relative;
}
.gate-card::before, .gate-card::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--brand-red); }
.gate-card::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.gate-card::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }
.gate-card .glock {
  width: 40px; height: 40px; margin: 0 auto 10px;
  border: 1px solid var(--fog); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; background: var(--paper);
}
.gate-card h3 { font-size: 19px; margin: 0 0 6px; }
.gate-card p { font-size: 13.5px; margin: 0 0 14px; color: var(--fg-2); line-height: 1.5; }
.gate-form { display: flex; flex-direction: column; gap: 8px; }
.gate-form input {
  min-height: 44px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 13px; background: var(--white); color: var(--ink); width: 100%;
}
.gate-form input:focus { outline: none; border-color: var(--brand-red); box-shadow: var(--ring); }
.gate-fine { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); margin-top: 10px; display: block; letter-spacing: 0.03em; }

.unlocked-note {
  display: none; align-items: center; gap: 8px;
  background: var(--jade-bright-tint); color: var(--jade);
  border-top: 1px solid var(--fog);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  padding: 10px 14px;
}
.gate-zone.unlocked .unlocked-note { display: flex; }

.src-note { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3); padding: 12px 14px; border-top: 1px solid var(--fog); letter-spacing: 0.03em; }
.src-note b { color: var(--fg-2); font-weight: 500; }

/* ============ building-alert control (logged-in member states) ============ */
.alert-ctl { padding: 14px; border-top: 1px solid var(--fog); display: flex; flex-direction: column; gap: 6px; }
.alert-ctl[hidden] { display: none; }
.alert-ctl .alert-get { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.alert-ctl .alert-get svg { flex: 0 0 auto; }
.alert-ctl .alert-get[disabled] { opacity: 0.6; pointer-events: none; }
.alert-ctl .alert-fine { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3); letter-spacing: 0.03em; text-align: center; }
.alert-on {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border: 1px solid var(--brand-red-100); border-radius: var(--radius-md);
  background: var(--brand-red-100); color: var(--ink); font-size: 13.5px;
}
.alert-on .ao-tick {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-red); color: var(--white);
}
.alert-on .ao-txt { flex: 1 1 auto; line-height: 1.3; }
.alert-on .ao-txt b { font-weight: 600; }
.alert-on .ao-manage {
  flex: 0 0 auto; background: none; border: 0; padding: 4px 6px; cursor: pointer;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--brand-red); text-decoration: underline; text-underline-offset: 2px;
}
.alert-on .ao-manage:hover { color: var(--brand-red-600); }
.alert-on .ao-manage[disabled] { opacity: 0.5; pointer-events: none; }

/* ============ about — editorial prose ============ */
.pull {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(24px, 5.6vw, 34px); line-height: 1.25; color: var(--ink);
  border-left: 3px solid var(--brand-red); padding-left: 18px; margin: 26px 0;
}

/* Single readable prose column, comfortable measure. The CMS description's
   own sub-heads sit ABOVE their paragraphs with tight heading-to-body spacing
   and generous space between topic groups. No grid = no orphaned headings. */
.about-grid.prose { max-width: 68ch; }
.about-grid p { font-size: 16.5px; line-height: 1.62; color: var(--fg-1); margin: 0 0 16px; max-width: 68ch; }
/* About = prose + a compact "at a glance" facts panel, so the width is used
   purposefully instead of a lone half-empty column. Left edge stays aligned. */
.about-facts { margin-top: 28px; border: 1px solid var(--fog); border-radius: var(--radius-md); background: var(--white); padding: 18px 18px 20px; }
.about-facts .mono-label { display: block; margin-bottom: 12px; color: var(--fg-3); }
.fact-dl { margin: 0; }
.fact-dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--fog); }
.fact-dl > div:last-child { border-bottom: 0; }
.fact-dl dt { color: var(--fg-2); font-size: 13.5px; }
.fact-dl dd { margin: 0; font-family: var(--font-mono); font-weight: 600; color: var(--ink); font-size: 15px; text-align: right; }
.about-facts-cta { width: 100%; margin-top: 16px; }
@media (min-width: 1024px) {
  .about-2col { display: grid; grid-template-columns: minmax(0, 640px) 290px; gap: 48px; align-items: start; }
  .about-2col .about-grid.prose, .about-2col .about-grid p, .about-2col .about-grid ul { max-width: none; }
  .about-facts { margin-top: 4px; }
}
.about-grid > :last-child { margin-bottom: 0; }
/* Demote the CMS description's own headings so they read as subordinate prose
   sub-heads, not section titles (they otherwise inherit the global h2 size). */
.about-grid h2 {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 19px; line-height: 1.3; letter-spacing: -0.01em;
  color: var(--ink); margin: 34px 0 8px; max-width: 68ch;
}
.about-grid h2:first-child, .about-grid > :first-child { margin-top: 0; }
.about-grid h3 {
  font-family: var(--font-sans); font-weight: 600;
  font-size: 16px; line-height: 1.35; color: var(--ink); margin: 26px 0 6px; max-width: 68ch;
}
.about-grid ul { margin: 8px 0 18px; padding-left: 20px; max-width: 68ch; }
.about-grid li { font-size: 15.5px; line-height: 1.6; color: var(--fg-1); margin: 4px 0; }
.facty {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
  padding: 16px; margin-top: 22px; background: var(--white);
}
.facty .mono-label { margin-bottom: 4px; display: block; }
.facty p { margin: 0; font-size: 14px; }

/* ============ amenities & policies ============ */
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--white); border: 1px solid var(--fog); border-radius: var(--radius-pill);
  padding: 9px 16px 9px 11px; font-size: 14px; font-weight: 500; color: var(--fg-1);
  min-height: 44px;
}
.pill svg { width: 24px; height: 24px; }
.pol { margin-top: 26px; border: 1px solid var(--fog); border-radius: var(--radius-md); background: var(--white); overflow: hidden; }
.pol-row { display: flex; gap: 14px; padding: 15px 16px; align-items: flex-start; }
.pol-row + .pol-row { border-top: 1px solid var(--fog); }
.pol-row .ic { flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid var(--fog); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; background: var(--paper); }
.pol-row b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.pol-row p { margin: 2px 0 0; font-size: 13.5px; color: var(--fg-2); }

/* ============ walkability ============ */
.walk-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.walk {
  border: 1px solid var(--fog); border-radius: var(--radius-md); background: var(--white);
  padding: 16px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
}
.walk .score { font-family: var(--font-mono); font-weight: 500; font-size: 28px; color: var(--ink); min-width: 52px; }
.walk .bar { height: 4px; background: var(--cloud); border-radius: 2px; position: relative; overflow: hidden; }
.walk .bar i { position: absolute; inset: 0 auto 0 0; background: var(--brand-red); border-radius: 2px; }
.walk .lbl { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; }
.walk .lbl em { font-style: normal; font-size: 12px; color: var(--fg-3); }

/* ============ location — ALWAYS-ON Mapbox GL map ============ */
.map-pane { display: block; margin-top: 0; border: 1px solid var(--fog); border-radius: var(--radius-md); overflow: hidden; background: var(--cloud); }
.map-pane iframe { display: block; width: 100%; height: 320px; border: 0; }
/* the GL canvas host — always rendered (no toggle). A subtle paper tile shows
   until the tiles paint. mapbox-gl positions its own .mapboxgl-canvas inside. */
.map-canvas {
  width: 100%; height: 320px; background: var(--cloud);
  background-image: radial-gradient(var(--mist) 1px, transparent 1px);
  background-size: 14px 14px;
  position: relative;
}
.map-canvas .mapboxgl-canvas { outline: none; }
/* red 8X-brand marker pin */
.cb-map-marker {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 11px;
  white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
  background: var(--brand-red); color: var(--white);
  font-family: var(--font-mono); font-weight: 600; font-size: 11px; letter-spacing: 0.04em;
  border: 2px solid var(--white); border-radius: var(--radius-pill);
  box-shadow: 0 3px 10px rgba(24,26,34,0.28);
  cursor: default;
}
.map-coords { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3); padding: 9px 14px; border-top: 1px solid var(--fog); background: var(--white); letter-spacing: 0.05em; }
.loc-copy { margin-top: 22px; }
.loc-copy p { font-size: 15.5px; }
.loc-copy a { color: var(--brand-red); text-decoration: none; border-bottom: 1px solid var(--brand-red-100); }
.loc-copy a:hover { border-bottom-color: var(--brand-red); }

/* ============ comparables ============ */
.comp-row { display: grid; grid-template-columns: 1fr; gap: 10px; }
.comp {
  display: block; text-decoration: none;
  border: 1px solid var(--fog); border-radius: var(--radius-md); background: var(--white);
  padding: 0; position: relative; overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.comp:hover { border-color: var(--ink); }
.comp .ph img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.comp .bd { padding: 16px 16px 18px; position: relative; }
.comp .bd::after {
  content: ""; position: absolute; top: 20px; right: 16px; width: 9px; height: 9px;
  border-top: 2px solid var(--brand-red); border-right: 2px solid var(--brand-red);
  transform: rotate(45deg);
}
.comp h3 { font-size: 18px; margin: 0 0 2px; }
.comp .addr { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }
.comp .meta { display: flex; gap: 18px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--fog); }
.comp .meta div b { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 15px; color: var(--ink); margin-top: 2px; }

/* ============ viewing band — full-bleed waterfront photo + dark scrim ============
   A Victoria waterfront sunset sits behind this CTA. A layered dark gradient
   scrim keeps the white headline / grey body / buttons WCAG-legible over any
   photo. Solid --ink fallback paints first (and stays if the image 404s), so
   the band reads correctly even before /ld/condo/cta-waterfront.jpg exists. */
.view-band {
  margin-top: 48px;
  background-color: var(--ink); color: var(--white);
  /* scrim (stronger at the bottom-left where the copy sits) + the photo */
  background-image:
    linear-gradient(180deg, rgba(18,20,28,0.28) 0%, rgba(18,20,28,0.36) 55%, rgba(18,20,28,0.56) 100%),
    linear-gradient(90deg, rgba(18,20,28,0.58) 0%, rgba(18,20,28,0.12) 60%, rgba(18,20,28,0) 100%),
    url('/ld/condo/cta-waterfront.jpg');
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
  padding: 44px 0 48px; position: relative; overflow: hidden;
}
.view-band .dg { position: absolute; top: 18px; right: 18px; width: 110px; height: 110px; opacity: 0.22; z-index: 1;
  background-image: radial-gradient(var(--white) 1px, transparent 1px); background-size: 12px 12px; }
.view-band .wrap { position: relative; z-index: 2; }
.view-band .eb { color: var(--mist); }
.view-band .eb::before { border-color: var(--brand-red); }
.view-band h2 { color: var(--white); margin: 12px 0 8px; font-size: clamp(26px, 6.4vw, 40px); }
.view-band p { color: var(--mist); margin: 0 0 22px; font-size: 15.5px; max-width: 52ch; }
.view-band .vc { display: flex; flex-direction: column; gap: 10px; }
.view-band .contact-line { font-family: var(--font-mono); font-size: 12px; color: var(--slate-2); margin-top: 18px; letter-spacing: 0.03em; }
.view-band .contact-line a { color: var(--white); text-decoration: none; }
.view-band .contact-line a:hover { color: var(--brand-red); }

/* ============ faq ============ */
.faq details {
  border: 1px solid var(--fog); border-radius: var(--radius-md); background: var(--white);
  margin-bottom: 10px;
}
.faq summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 16px; font-weight: 600; font-size: 15px; color: var(--ink); cursor: pointer; min-height: 56px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { flex: 0 0 auto; width: 22px; height: 22px; position: relative; }
.faq summary .pm::before, .faq summary .pm::after { content: ""; position: absolute; background: var(--brand-red); transition: transform var(--dur-base) var(--ease-out); }
.faq summary .pm::before { top: 10px; left: 4px; width: 14px; height: 2px; }
.faq summary .pm::after { top: 4px; left: 10px; width: 2px; height: 14px; }
.faq details[open] summary .pm::after { transform: scaleY(0); }
.faq .ans { padding: 0 16px 16px; font-size: 14.5px; color: var(--fg-1); line-height: 1.6; }
.faq .ans p { margin: 0; }

/* ============ cross-links + footer ============ */
.xlinks { padding-top: 44px; padding-bottom: 8px; }
.xlinks-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
.xl {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  text-decoration: none; background: var(--white); border: 1px solid var(--fog); border-radius: var(--radius-md);
  padding: 16px; min-height: 56px; font-weight: 600; font-size: 15px; color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.xl:hover { border-color: var(--ink); }
.xl small { display: block; font-weight: 400; font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3); margin-top: 3px; letter-spacing: 0.04em; }
.xl .arr { color: var(--brand-red); font-family: var(--font-mono); }

footer.site {
  margin-top: 44px; border-top: 1px solid var(--fog); padding: 28px 0 36px;
}
footer.site .f-in { display: flex; flex-direction: column; gap: 14px; }
footer.site img { height: 40px; width: auto; }
footer.site .tag { font-family: var(--font-serif); font-style: italic; font-size: 17px; color: var(--fg-2); }
footer.site .fine { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); letter-spacing: 0.04em; line-height: 1.7; }
footer.site .fine .cjk { font-family: var(--font-cjk); color: var(--mist); }

/* ============ sticky action bar ============ */
.abar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-top: 1px solid var(--fog);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  display: flex; gap: 10px;
}
.abar .btn { flex: 1; min-height: 48px; font-size: 14.5px; padding: 10px 8px; }
.abar .btn-bell { flex: 0 0 48px; padding: 0; }

/* toast */
.toast {
  position: fixed; left: 14px; right: 14px; bottom: 84px; z-index: 80;
  background: var(--ink); color: var(--white);
  border-radius: var(--radius-md); padding: 13px 16px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em;
  display: flex; align-items: center; gap: 10px;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast .dot { width: 8px; height: 8px; background: var(--jade-bright); border-radius: 50%; flex: 0 0 auto; }

/* alerts confirmation — warm paper card · single red accent bar · jade check.
   Used by the CTA "get building alerts" button + member subscribe paths. */
.ba-confirm {
  position: fixed; left: 14px; right: 14px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 90;
  display: flex; align-items: center; gap: 12px;
  background: var(--ivory); color: var(--ink);
  border: 1px solid var(--fog); border-left: 4px solid var(--brand-red);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: 13px 16px 13px 14px;
  font-family: var(--font-sans); font-size: 13.5px; line-height: 1.4;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.ba-confirm.show { opacity: 1; transform: translateY(0); }
.ba-confirm .bac-tick {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--jade-bright); color: var(--white);
}
.ba-confirm .bac-tick svg { width: 14px; height: 14px; }
.ba-confirm .bac-txt { flex: 1 1 auto; }
@media (min-width: 760px) {
  .ba-confirm { left: auto; right: 24px; bottom: 24px; max-width: 380px; }
}
@media (prefers-reduced-motion: reduce) {
  .ba-confirm { transition: opacity var(--dur-base) var(--ease-out); transform: none; }
  .ba-confirm.show { transform: none; }
}

/* ============ data-moat isolation chips (bed-type segments) ============ */
.iso-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -4px 0 24px; }
.iso-row .mono-label { margin-right: 2px; }
.iso-chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px; padding: 7px 15px;
  background: var(--white); border: 1px solid var(--fog); border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0.04em;
  text-transform: lowercase; color: var(--fg-2); white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.iso-chip:hover { border-color: var(--ink); }
.iso-chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--white); }
.iso-chip .sq { width: 6px; height: 6px; border: 1.5px solid var(--brand-red); flex: 0 0 auto; }

/* ============ faq wrapper ============ */
.rail-wrap { display: flex; flex-direction: column; gap: 44px; }

/* ============ conversion module — Schedule a Viewing + Dustin ============ */
.conv { display: flex; flex-direction: column; gap: 14px; }
.conv-card {
  background: var(--white); border: 1px solid var(--fog); border-radius: var(--radius-md);
  padding: 22px 20px 20px; position: relative;
}
.conv-card h2 { margin: 8px 0 3px; font-size: 22px; }
.conv-sub { margin: 0 0 16px; font-size: 13.5px; color: var(--fg-2); }
.conv-sched::before { content: ""; position: absolute; top: -1px; left: 18px; width: 56px; height: 3px; background: var(--brand-red); }

/* date picker */
.sch-row { display: grid; grid-template-columns: 26px 1fr 26px; gap: 7px; align-items: stretch; margin-bottom: 8px; }
.sch-arrow {
  border: 1px solid var(--fog); border-radius: var(--radius-sm); background: var(--white);
  display: flex; align-items: center; justify-content: center; color: var(--fg-2); padding: 0;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.sch-arrow:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.sch-arrow:disabled { opacity: 0.35; cursor: default; }
.sch-days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.sch-day {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 9px 4px 7px; min-height: 64px;
  background: var(--white); border: 1px solid var(--fog); border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.sch-day:hover { border-color: var(--ink); }
.sch-day .d-dow, .sch-day .d-mon {
  font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3);
}
.sch-day .d-dow.d-today { color: var(--brand-red); }
.sch-day b { font-family: var(--font-mono); font-weight: 500; font-size: 19px; color: var(--ink); line-height: 1.25; }
.sch-day.is-on { background: var(--ink); border-color: var(--ink); }
.sch-day.is-on b { color: var(--white); }
.sch-day.is-on .d-dow, .sch-day.is-on .d-mon, .sch-day.is-on .d-dow.d-today { color: var(--mist); }

/* time of day */
.sch-times { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.sch-time {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 4px 8px;
  background: var(--white); border: 1px solid var(--fog); border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.sch-time:hover { border-color: var(--ink); }
.sch-time b { font-size: 12.5px; font-weight: 600; text-transform: lowercase; color: var(--ink); }
.sch-time span { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.sch-time.is-on { background: var(--ink); border-color: var(--ink); }
.sch-time.is-on b { color: var(--white); }
.sch-time.is-on span { color: var(--mist); }
.sch-cta { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.sch-cta .btn { width: 100%; }
.sch-note { display: block; margin-top: 10px; text-align: center; font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); letter-spacing: 0.03em; }

/* ============ agent card — Dustin (ported from listing-detail .sb-cta) ============
   Faithful port of the real listing-detail agent CTA, re-tokenised to this page's
   brand vars and capped to the 8px max radius. Logo header with drifting X-pattern,
   ringed headshot, live status dot, experience tile, creds, two buttons, Sell/Buy. */
@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 } }

/* card shell — paper-white panel, hairline border, 8px radius (brand cap) */
.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);
}
.sb-cta:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* 8X pattern header with gradient fade to paper */
.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;
}

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

/* agent row */
.sb-cta-agent { display: flex; align-items: center; gap: 15px; position: relative; z-index: 1; }

/* photo — ringed circle with red arc draw-in */
.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);
}

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

/* card body */
.sb-cta-body { padding: 4px 22px 22px; }

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

/* credentials — jade dots */
.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; }

/* divider */
.sb-cta-sep { height: 1px; background: var(--fog); margin-bottom: 16px; }

/* actions */
.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: 13px 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-btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--fog); }
.sb-cta-btn-outline:hover { border-color: var(--ink); transform: translateY(-1px); }

/* services — Sell / Buy */
.sb-cta-services { border-top: 1px solid var(--fog); padding-top: 14px; display: flex; gap: 10px; }
.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; }

/* reduced motion: kill the pulse + pattern drift + arc spin */
@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; }
}

/* supporting services list */
.conv-svc h2 { font-size: 18px; margin: 6px 0 2px; }
.conv-svc .conv-sub { margin-bottom: 4px; }
.svc-items { margin-top: 4px; }
.svc-item { display: flex; gap: 14px; align-items: flex-start; padding: 12px 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-size: 14.5px; font-weight: 600; color: var(--ink); }
.svc-item p { margin: 2px 0 0; font-size: 13px; color: var(--fg-2); line-height: 1.5; }

/* inline slot (mobile/tablet home for the module) — hidden when empty */
#convSlotInline:empty { display: none; }

/* ============================================================
   DESKTOP — scale up from the 390px base
   ============================================================ */
@media (min-width: 760px) {
  .statgrid { grid-template-columns: repeat(3, 1fr); }
  .walk-grid { grid-template-columns: repeat(3, 1fr); }
  .comp-row { grid-template-columns: repeat(3, 1fr); }
  .xlinks-grid { grid-template-columns: repeat(3, 1fr); }
  /* gallery → editorial mosaic grid (no horizontal scroll on desktop) */
  .gal-strip {
    display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr;
    gap: 10px; overflow: visible; scroll-snap-type: none;
    margin: 16px 0 0; padding: 0;
  }
  .gal-strip figure { margin: 0; }
  .gal-strip img { aspect-ratio: 4 / 3; height: 100%; }
  /* hero + supporting: first photo spans 2×2, the rest fill around it */
  .gal-strip figure:first-child { grid-column: span 2; grid-row: span 2; }
  .gal-strip figure:first-child img { aspect-ratio: auto; }
  .hero-card { padding: 32px 32px 34px; }
  .view-band .vc { flex-direction: row; }
  .view-band .vc .btn { flex: 0 0 auto; min-width: 200px; }
  .map-pane iframe { height: 380px; }
}
/* tablet (760–1023): inline module pairs scheduler + agent side by side */
@media (min-width: 760px) and (max-width: 1023.98px) {
  #convSlotInline .conv { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
  #convSlotInline .conv-svc { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  body { padding-bottom: 0; }
  .abar { display: none; }
  .toast { left: auto; right: 24px; bottom: 24px; max-width: 380px; }
  .hdr-in { height: 66px; }
  .hdr-nav { display: flex; gap: 26px; margin-right: auto; margin-left: 40px; }
  .hdr-nav a { font-size: 14px; font-weight: 500; color: var(--fg-2); text-decoration: none; text-transform: lowercase; letter-spacing: 0.02em; }
  .hdr-nav a:hover { color: var(--ink); }
  .hdr-cta2 { display: inline-flex !important; margin-right: 10px; }
  .hdr .wrap, .crumbs .wrap, footer.site .wrap { padding-left: 32px; padding-right: 32px; }
  /* ZONE B: every full-width section shares ONE container + ONE left edge
     (1240 --container, centered, matching the .page-cols 32px inset above).
     #about/#amenities/#walkability/#location dropped .wrap-narrow so they
     line up with #listings/#comparables/#faq/.xlinks. Reading sections cap
     their own TEXT block measure (.about-grid/.loc-copy) left-aligned. */
  .blk.wrap, .xlinks.wrap, .view-band .wrap { padding-left: 32px; padding-right: 32px; }

  .hero-wrap { display: grid; grid-template-columns: 7fr 5fr; gap: 0; align-items: stretch; }
  .hero-photo img { height: 100%; min-height: 520px; max-height: none; }
  .hero-card {
    margin-top: 0; border-radius: 0; border-top: 0; border-bottom: 0; border-right: 0;
    box-shadow: none; display: flex; flex-direction: column; justify-content: center;
    padding: 56px 56px;
  }
  .hero-frame { border-top: 1px solid var(--fog); border-bottom: 1px solid var(--fog); background: var(--white); }

  /* ===== 2-col shell: content column + sticky conversion sidebar ===== */
  .page-cols {
    display: grid; grid-template-columns: minmax(0, 1fr) 356px; gap: 44px; align-items: start;
    max-width: var(--container); margin: 0 auto; padding: 0 32px;
  }
  .page-main { min-width: 0; }
  .page-main .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  .page-side {
    position: sticky; top: 82px; margin-top: 36px;
    align-self: start;   /* size to content, stick to top — no inner scrollbar */
  }
  #convSlotInline { display: none; }

  section.blk { padding-top: 64px; }
  .gal { margin-top: 36px; }
  /* gallery mosaic keeps the 3-col grid from ≥760; just a touch more air */
  .gal-strip { gap: 12px; margin: 18px 0 0; }

  /* full-bleed bands become framed panels inside the column */
  .moat { margin-top: 44px; border: 1px solid var(--fog); border-radius: var(--radius-md); padding: 44px 32px 48px; }
  .moat::before { left: 32px; }
  /* stacked + breathable: 3×2 stat tiles → full-width chart → full-width sold list */
  .moat-grid { display: flex; flex-direction: column; gap: 24px; align-items: stretch; }
  .moat-grid .chart-card, .moat-grid .statgrid { margin-bottom: 0; }
  .moat-left { display: flex; flex-direction: column; gap: 24px; }
  .moat .statgrid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  /* dark CTA band: vertical padding only — inner .wrap carries the shared
     32px Zone B inset so its eyebrow/heading line up with every other section */
  .view-band { margin-top: 64px; border-radius: var(--radius-md); padding: 56px 0; }

  /* about: clean single prose column, comfortable measure. */
  .about-grid.prose { max-width: 72ch; }
  .loc-copy p { max-width: 68ch; }
  .xlinks { padding-top: 64px; }
}

/* wide desktop refinements */
@media (min-width: 1280px) {
  .hdr .wrap, .crumbs .wrap, footer.site .wrap { padding-left: 40px; padding-right: 40px; }
  .blk.wrap, .xlinks.wrap, .view-band .wrap { padding-left: 40px; padding-right: 40px; }
  .page-cols { grid-template-columns: minmax(0, 1fr) 384px; gap: 56px; padding: 0 40px; }
  section.blk { padding-top: 76px; }
  .hero-card { padding: 64px; }
  .moat { margin-top: 56px; padding: 52px 40px 56px; }
  .moat::before { left: 40px; }
  .view-band { margin-top: 76px; padding: 64px 0; }
  .xlinks { padding-top: 76px; }
}

/* ============================================================
   MOTION LAYER — additive only · transform/opacity/clip-safe
   gated to html.motion (JS on + no prefers-reduced-motion)
   ============================================================ */
:root {
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* focus ring — always on, motion-independent */
.btn:focus-visible, .iso-chip:focus-visible,
.map-toggle:focus-visible,
.faq summary:focus-visible, .xl:focus-visible, .comp:focus-visible {
  outline: none; box-shadow: var(--ring);
}
.faq .ans { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {

  @keyframes mRise   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes mFade   { from { opacity: 0; } to { opacity: 1; } }
  @keyframes mSettle { from { transform: scale(1.06); } to { transform: scale(1); } }
  @keyframes mDrawX  { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  /* --- 1 · hero entrance (signature, plays once) --- */
  html.motion .hero-photo { overflow: hidden; }
  html.motion .hero-photo img { animation: mSettle 600ms var(--ease-out-expo) both; }
  html.motion .hero-photo .ph-tag { animation: mFade 420ms var(--ease-out-quint) 460ms both; }
  html.motion .hero-card .eb        { animation: mRise 420ms var(--ease-out-quint) 0ms both; }
  html.motion .hero-card h1         { animation: mRise 600ms var(--ease-out-expo) 80ms both; }
  html.motion .hero-card .hero-addr { animation: mRise 420ms var(--ease-out-quint) 160ms both; }
  html.motion .hero-card .keystats  { animation: mRise 420ms var(--ease-out-quint) 240ms both; }
  html.motion .hero-card .hero-sum  { animation: mRise 420ms var(--ease-out-quint) 320ms both; }
  html.motion .hero-card .hero-ctas { animation: mRise 420ms var(--ease-out-quint) 390ms both; }
  /* signature hairlines draw in (scaleX) over the key-stats rules */
  html.motion .keystats { position: relative; border-top-color: transparent; border-bottom-color: transparent; }
  html.motion .keystats::before, html.motion .keystats::after {
    content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--fog);
    transform-origin: left center; animation: mDrawX 600ms var(--ease-out-quint) 380ms both;
  }
  html.motion .keystats::before { top: -1px; }
  html.motion .keystats::after  { bottom: -1px; }

  /* --- 6 · scroll reveals (shared IO adds .in once) --- */
  html.motion .rv { opacity: 0; transform: translateY(14px); transition: opacity 420ms var(--ease-out-quint), transform 420ms var(--ease-out-quint); }
  html.motion .rv.in { opacity: 1; transform: none; }
  /* signature red accent bars draw on reveal */
  html.motion .moat::before, html.motion .conv-sched::before { transform: scaleX(0); transform-origin: left center; transition: transform 600ms var(--ease-out-quint) 120ms; }
  html.motion .moat.bar-in::before, html.motion .conv-sched.bar-in::before { transform: scaleX(1); }
  /* agent "available now" dot — quiet jade pulse */
  @keyframes mPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(15,169,104,0.4); } 60% { box-shadow: 0 0 0 6px rgba(15,169,104,0); } }
  html.motion .avail i { animation: mPulse 2.6s ease-out infinite; }
  /* walk-score bars fill after their card reveals */
  html.motion .walk .bar i { transform: scaleX(0); transform-origin: left center; transition: transform 700ms var(--ease-out-quint) 150ms; }
  html.motion .walk.in .bar i { transform: scaleX(1); }

  /* --- 4 · gated sold rows: blur + settle clears together --- */
  .gated-rows { transition: filter var(--dur-slow) var(--ease-out-quint), opacity var(--dur-slow) var(--ease-out-quint); }
  .gate-zone.locked .gated-rows { opacity: 0.88; }

  /* --- 5 · comp card hover image scale --- */
  .comp .ph { overflow: hidden; }
  .comp .ph img { transition: transform var(--dur-base) var(--ease-out-quint); }
  .comp:hover .ph img { transform: scale(1.03); }

  /* --- 7 · sticky action bar slides in after hero scrolls out --- */
  html.motion .abar { transform: translateY(110%); transition: transform var(--dur-slow) var(--ease-out-quint); }
  html.motion .abar.show { transform: none; }

  /* --- 8 · chips press feedback --- */
  .iso-chip { 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); }
  .iso-chip:active { transform: scale(0.96); }

  /* --- 9 · trend chart hover layer (guide fades, tooltip glides between years) --- */
  html.motion .chart-svg .ch-guide { transition: opacity 140ms var(--ease-out-quint); }
  html.motion .chart-svg .ch-bar { transition: fill 140ms var(--ease-out-quint), opacity 140ms var(--ease-out-quint); }
  html.motion .chart-tip { transition: left 160ms var(--ease-out-quint), top 160ms var(--ease-out-quint); }
}

/* reduced motion: everything lands in final state instantly */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}