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

/* Kill iOS/Android text auto-inflation — without this, mobile Safari/Chrome
   "helpfully" scales up small mono text (fact-box source line, sold table,
   breadcrumb) ~2-3x, blowing the layout past the viewport. Authored sizes win. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* 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); }
/* white-outline button for use over the photo band (high contrast on imagery) */
.btn-outline-light {
  background: rgba(255,255,255,0.04); color: var(--white); border-color: rgba(255,255,255,0.55);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  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);
}
.btn-outline-light:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn-outline-light:active { background: rgba(255,255,255,0.88); color: var(--ink); transform: translateY(1px); }
.btn-outline-light[aria-pressed="true"] { background: var(--white); color: var(--ink); border-color: var(--white); }
.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; overflow: hidden; }
.hero-photo img {
  width: 100%; height: 56vh; min-height: 320px; max-height: 560px; object-fit: cover;
  transform: scale(var(--wm-trim)); transform-origin: center top; /* MLS watermark trim */
}
.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; }

/* ============ MLS watermark trim ============
   Every CMS building photo is an MLS download with an "MLS®<number>"
   watermark burned into the bottom-right corner. Measured across the
   library it occupies rows 3-11px up from the bottom edge of a
   1024-wide source (~1.7% of image height at the worst case).
   Scaling a photo up from its top edge pushes that band out of the
   frame, and the wrapper (which already clips) eats it. Percentage,
   not pixels, so it holds at every render size and breakpoint.
   3% = ~19px trimmed on a 640px-tall source. Costs 1.5% off each
   side, which is invisible on a landscape building shot.
   One knob for the hero, the gallery, the lightbox and comp cards. */
:root { --wm-trim: 1.03; }

/* ============ 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;
  transform: scale(var(--wm-trim)); transform-origin: center top; /* MLS watermark trim */
}
.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;
  /* clips the watermark trim below — radius + shadow live here now so the
     rounded corners survive the clip and the shadow isn't cut off */
  overflow: hidden; border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
}
.glb-fig img {
  max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto;
  object-fit: contain; background: var(--graphite);
  transform: scale(var(--wm-trim)); transform-origin: center top; /* MLS watermark trim */
}
.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(calc(var(--wm-trim) * 0.985)); } to { opacity: 1; transform: scale(var(--wm-trim)); } }
}

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

/* ── Row → listing detail. Each cell's contents are a block-level anchor, so
   the whole row is a click target with no JS. ─────────────────────────────── */
table.sold a.row-a,
table.sold span.row-a { display: block; color: inherit; text-decoration: none; }
table.sold tbody tr:not(.pend-head):hover td { background: var(--paper); }
table.sold tbody tr td { transition: background var(--dur-fast) var(--ease-out); }
table.sold a.row-a:focus-visible {
  outline: 2px solid var(--brand-red); outline-offset: -3px; border-radius: var(--radius-sm);
}
/* nudge the unit on hover so the row reads as interactive */
table.sold tbody tr:hover .unit { color: var(--brand-red); }

/* ── Aligned sub-columns. The spec fields and the $/sf value are fixed-width
   inline-blocks so they stack into scannable columns down the table: comparing
   sqft, parking and $/sf row-to-row is the whole reason they're shown, and a
   dot-separated run-on defeats that. Widths are shared by the open and gated
   tables (two separate <table> elements) so the columns line up across the
   seam between them. ───────────────────────────────────────────────────────── */
table.sold .specs > span { display: inline-block; vertical-align: baseline; }
table.sold .s-bb   { width: 82px; }
table.sold .s-sqft { width: 74px; }
table.sold .s-park { width: 46px; color: var(--fg-2); }
/* separators drawn, not typed, so an empty field doesn't leave a dangling dot */
table.sold .s-sqft::before,
table.sold .s-park::before { content: "· "; color: var(--mist); }

table.sold .date { display: flex; justify-content: flex-end; gap: 8px; }
table.sold .d-psf  { width: 66px; text-align: right; color: var(--fg-2); font-weight: 500; }
table.sold .d-when { width: 82px; text-align: right; }
/* the pending trailing label ("$29K under asking") needs the room */
table.sold tr.pend-row .d-when { width: auto; }

/* ── PENDING group — closes the table as its own band, never interleaved
   between sold rows. ──────────────────────────────────────────────────────── */
table.sold tr.pend-head td {
  /* colspan cell would otherwise inherit td:last-child{text-align:right} and
     shove the label to the far edge */
  text-align: left;
  padding: 18px 14px 8px; border-bottom: 0;
  border-top: 1px solid var(--fog);
}
/* projected close — the pending row's unique fact: when this deal becomes a comp */
table.sold .pend-close {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--amber);
  opacity: 0.75; text-align: right; margin-top: 3px;
}
table.sold tr.pend-row td { background: rgba(252,235,215,0.34); }
table.sold tr.pend-row:hover td { background: rgba(252,235,215,0.62); }
table.sold tr.pend-row:hover .unit { color: var(--amber); }

/* ── FOR SALE group (active listings — public Reciprocity Data; each row
   carries the listing brokerage + MLS(R) number per VREB 16.4.1.2(a)).
   Sits in the OPEN table above the gated sold/pending rows. ──────────────── */
table.sold tr.act-head td,
table.sold tr.sold-head td {
  text-align: left; padding: 12px 14px 6px; border-bottom: 0;
}
table.sold tr.sold-head td { border-top: 1px solid var(--fog); padding-top: 16px; }
.sold-subhead-lbl.act-lbl { color: var(--jade); }
.sold-subhead-lbl.sold-lbl { color: var(--fg-3); }
.act-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(--jade);
  background: var(--jade-bright-tint); border: 1px solid rgba(15,169,104,0.28);
  margin-bottom: 4px; vertical-align: middle;
}
table.sold .lst-by {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3); margin-top: 3px;
  max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* the MLS number replaces the sale date on for-sale rows — give it the room */
table.sold tr.act-row .d-when { width: auto; color: var(--fg-3); }
table.sold tr.act-row:hover .unit { color: var(--jade); }
table.sold tr.more-row td { text-align: center; padding: 10px 14px 12px; border-bottom: 0; }
table.sold tr.more-row a {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em;
  color: var(--brand-red); text-decoration: none;
}
table.sold tr.more-row a:hover { text-decoration: underline; }

/* ── Masked placeholder rows (anonymous). Asterisk runs generated server-side
   from NOTHING sit in the row shape so the blurred table reads as "rows you
   are missing"; there is no real value under the filter. ─────────────────── */
table.sold .mask { color: var(--mist); letter-spacing: 0.06em; }
table.sold tr.mask-row td { cursor: default; }
/* the gate card must always fit over the zone, even with 1-2 placeholder rows */
.gate-zone.locked { min-height: 320px; }
.gate-zone[hidden] { display: none; }

.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 { overflow: hidden; }
.comp .ph img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  transform: scale(var(--wm-trim)); transform-origin: center top; /* MLS watermark trim */
}
.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 10px; margin: 0 -10px; border-radius: var(--radius-sm); text-decoration: none; color: inherit; transition: background var(--dur-fast) var(--ease-out); }
.svc-item + .svc-item { border-top: 1px dashed var(--fog); }
a.svc-item:hover { background: var(--bg-2); }
a.svc-item:hover b { color: var(--brand-red); }
a.svc-item b { transition: color var(--dur-fast) var(--ease-out); }
a.svc-item:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; }
.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; }
  /* right column butts flush against the photo — no white moat / seam.
     The card's own padding is the only inset; it stretches to full photo height. */
  .hero-wrap > .wrap { padding: 0; display: flex; flex-direction: column; }
  .hero-wrap > .wrap > .hero-card { flex: 1 1 auto; }
  .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(calc(var(--wm-trim) * 1.06)); } to { transform: scale(var(--wm-trim)); } }
  @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(calc(var(--wm-trim) * 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); }
}

/* ============ phone fit fixes (<760px) ============
   The base sheet is mobile-first but a few mono/nowrap pieces were authored
   against wider frames; tighten them so nothing overflows a 393px viewport. */
@media (max-width: 759.98px) {
  /* breadcrumb — compact mono trail that ends at the current building name.
     The "· 1916 Oak Bay Ave" address tail (last two children: the '·' sep +
     the address span) is dropped on phones: the hero immediately below shows
     the full address, so the tail is pure duplication that forced overflow.
     overflow-x:auto on .crumbs-in stays as a safety net for long names. */
  .crumbs-in { font-size: 10px; gap: 7px; padding: 8px 0; }
  .crumbs-in > *:nth-last-child(-n+2) { display: none; }

  /* sold table — tighter cell padding; let the spec + date sublines wrap
     (unit + price stay nowrap as the row anchors); hide the per-row street
     (the whole table is one building — the address is in the H1) and the
     per-row "· BC Assessment" suffix (the header already shows the badge). */
  table.sold th { padding: 10px 10px 8px; }
  table.sold td { padding: 11px 10px; }
  table.sold .unit-addr { display: none; }
  table.sold .specs, table.sold .date { white-space: normal; }
  table.sold .date-src { display: none; }
  table.sold tr.pend-head td { padding: 15px 10px 6px; }
  table.sold tr.act-head td, table.sold tr.sold-head td { padding: 12px 10px 6px; }
  table.sold .lst-by { max-width: 100%; white-space: normal; }
  /* Reflow the sub-columns instead of overflowing the narrow cell. Fixed widths
     and the drawn "·" separators both go: a wrapped field would otherwise open
     its line with a dangling dot. Gap carries the separation instead. */
  table.sold .specs { display: flex; flex-wrap: wrap; gap: 1px 10px; }
  table.sold .s-bb, table.sold .s-sqft, table.sold .s-park { width: auto; }
  table.sold .s-sqft::before, table.sold .s-park::before { content: none; }
  table.sold .date { flex-wrap: wrap; gap: 1px 8px; }
  table.sold .d-psf, table.sold .d-when { width: auto; }
}

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