/* ============================================================================
   WISEMAN RESIDENTIAL — DIRECTION "STREET LEVEL"
   Architecture from Morgan Group; the opening and the manners from Studio D
   (studiod.nu); every token from the Motor Tides estate system.

   The page in one line: feel the life first, then meet the company that
   builds and runs it. The film fills the screen with the mark and the main
   title on it; as you scroll it shrinks and travels to the right column,
   still playing, the light ground unfolds behind it and the brand story rises
   on the left — one continuous move on a pinned stage. Then: what we do,
   history & culture, capability, communities, contact.

   Kept from the reference: the film opening and its shrink-to-column move,
   the very large light display line with an italic serif whisper above it,
   numbered moves in a staggered grid, images drifting at their own speeds,
   full-bleed blocks with the title low-left, a deep block, a line said three
   times, the left-edge chapter label, the Menu word beside a dark dot.
   Not kept: its white ground, its grotesk, its pill buttons, its scroll
   hijacking. `html[data-type="sans"]` swaps the display face for review.
   ========================================================================== */

:root{
  --paper:#FFFFFF; --paper-2:#FFFFFF; --raised:#FFFFFF;   /* white, per the client: the reference's ground */
  --ink:#144952; --ink-2:#42585B; --ink-3:#5D6C6F;
  --deep:#092D34;
  --accent:#C8784D; --accent-ink:#9A5533;
  --brand:#1C6775;
  --line:rgba(20,73,82,.14); --line-2:rgba(20,73,82,.07);
  --focus:var(--accent);
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Montserrat","Avenir Next",system-ui,-apple-system,sans-serif;
  --display:var(--serif);
  --display-weight:400;      /* was 300: the client wants presence, not hairlines */
  --display-track:-.022em;
  --pad:clamp(22px,4vw,96px);
  --maxw:1580px;
  --hd-h:84px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-ui:cubic-bezier(.22,1,.36,1);
  --t-ui:.3s; --t-nav:.45s; --t-rv:1s; --t-img:1.6s;
  --beat:clamp(64px,9vh,140px);
  /* the opening: how much scroll the move takes, and where the film lands */
  --runway:280svh;
}
html[data-type="sans"]{ --display:var(--sans); --display-weight:400; --display-track:-.03em; }

html{ scrollbar-color:rgba(20,73,82,.3) var(--paper); }
body{ background:var(--paper); color:var(--ink-2); font-family:var(--sans); font-size:1rem; line-height:1.7; }
.wrap{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
.grid-12{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(16px,2vw,32px); }

/* ---- type roles ---------------------------------------------------------- */
.display{
  font-family:var(--display); font-weight:var(--display-weight); color:var(--ink);
  font-size:clamp(2.9rem,8.2vw,8.2rem); line-height:.98; letter-spacing:var(--display-track);
  text-wrap:balance; margin:0; font-variation-settings:"opsz" 72;
}
html[data-type="sans"] .display{ line-height:1.02; }
.display-sm{ font-size:clamp(2.4rem,5.4vw,5.4rem); line-height:1.04; }
.eyebrow{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(1.15rem,1.5vw,1.4rem); color:var(--ink-2); margin:0 0 clamp(18px,2.4vw,34px); }
.body{ max-width:48ch; font-size:1.08rem; line-height:1.72; color:var(--ink-2); margin:0; }
.fine{ font-size:.9rem; color:var(--ink-3); line-height:1.7; }
h1,h2,h3{ margin:0; }
em{ font-family:var(--serif); font-style:italic; }
.tnum{ font-variant-numeric:tabular-nums; }
.chip{ display:inline-block; font:600 .62rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink); border:1px solid currentColor; padding:4px 7px; vertical-align:middle; margin-left:6px; }
.beat-culture .chip{ color:rgba(243,240,231,.8); }

/* ---- buttons: the estate's squared 48px, two kinds -------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:14px 24px; border:1px solid var(--ink);
  background:var(--ink); color:var(--paper);
  font:500 .9375rem/1.2 var(--sans); letter-spacing:.02em; white-space:nowrap;
  transition:background-color var(--t-ui) var(--ease-ui),color var(--t-ui) var(--ease-ui),border-color var(--t-ui) var(--ease-ui);
}
.btn .ar{ display:inline-block; transition:transform .38s var(--ease); }
.btn:hover .ar,.btn:focus-visible .ar{ transform:translateX(4px); }
.btn:hover,.btn:focus-visible{ background:var(--deep); border-color:var(--deep); }
.btn-line{ background:transparent; color:var(--ink); }
.btn-line:hover,.btn-line:focus-visible{ background:var(--ink); color:var(--paper); }
.btn-sm{ min-height:40px; padding:9px 16px; font-size:.875rem; }
.btn-paper{ background:var(--paper); border-color:var(--paper); color:var(--deep); }
.btn-paper:hover,.btn-paper:focus-visible{ background:#fff; border-color:#fff; color:var(--deep); }
.btn-line-paper{ background:transparent; border-color:rgba(243,240,231,.55); color:var(--paper); }
.btn-line-paper:hover,.btn-line-paper:focus-visible{ background:var(--paper); color:var(--deep); border-color:var(--paper); }
.actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(24px,3vw,36px); }

/* ---- header: Morgan's structure, Studio D's manners ---------------------- */
.hd{ padding-top:0; padding-bottom:0; height:var(--hd-h); color:var(--ink); }
.hd-in{ display:flex; align-items:center; justify-content:space-between; gap:clamp(14px,2vw,32px); height:100%; min-width:0; }
.hd.inv{ color:var(--paper); }
.hd.frost{ background:rgba(255,255,255,.86); backdrop-filter:blur(14px) saturate(1.1); box-shadow:0 1px 0 var(--line); color:var(--ink); }
.hd .brand svg{ width:26px; height:26px; }
.hd .brand b{ font-weight:600; font-size:.8rem; letter-spacing:.3em; }
/* primary nav, visible from 1100px (Morgan keeps every item in the bar) */
.hd .hnav{ display:none; align-items:center; gap:clamp(18px,2.2vw,36px); margin-left:auto; min-width:0; }
/* the social icons are the first thing to go when the bar gets tight */
@media (max-width:1600px){ .hd-ico{ display:none !important; } }
.hd .hnav > a,.hd .hn-item > a{ font-size:.86rem; letter-spacing:.09em; text-transform:uppercase; font-weight:600; position:relative; padding:10px 0; white-space:nowrap; }
.hd .hnav > a::after,.hd .hn-item > a::after{ content:""; position:absolute; left:0; right:0; bottom:2px; height:2px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.hd .hnav > a:hover::after,.hd .hnav > a:focus-visible::after,.hd .hn-item:hover > a::after,.hd .hn-item:focus-within > a::after,.hd .hnav > a[aria-current]::after,.hd .hn-item > a[aria-current]::after{ transform:scaleX(1); }
.hn-item{ position:relative; display:flex; align-items:center; gap:6px; }
.hn-more{ width:22px; height:22px; display:grid; place-items:center; font:300 1.1rem/1 var(--sans); color:inherit; transition:transform .3s var(--ease); }
.hn-item:hover .hn-more,.hn-item:focus-within .hn-more,.hn-more[aria-expanded="true"]{ transform:rotate(45deg); }
.hn-sub{ position:absolute; left:-18px; top:calc(100% + 10px); min-width:230px; display:grid; gap:2px; padding:14px 18px 16px; background:var(--raised); color:var(--ink); box-shadow:0 1px 0 var(--line), 0 18px 40px rgba(9,45,52,.14);
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s; }
.hn-sub::before{ content:""; position:absolute; left:0; right:0; top:-12px; height:12px; }
.hn-item:hover .hn-sub,.hn-item:focus-within .hn-sub,.hn-item.open .hn-sub{ opacity:1; visibility:visible; transform:none; }
.hn-sub a{ font-size:.92rem; padding:7px 0; border-bottom:1px solid var(--line-2); transition:color .3s,padding-left .3s var(--ease); }
.hn-sub a:last-child{ border-bottom:0; }
.hn-sub a:hover,.hn-sub a:focus-visible{ color:var(--accent-ink); padding-left:6px; }
.hd-right{ display:flex; align-items:center; gap:clamp(12px,1.6vw,22px); }
.hd-ico{ display:none; width:34px; height:34px; place-items:center; opacity:.85; transition:opacity .3s; }
.hd-ico:hover{ opacity:1; }
.hd-ico svg{ width:18px; height:18px; }
/* the portal button: Morgan's block at the right end, the estate's square button */
.hd-portal{ display:none; align-items:center; min-height:48px; padding:0 24px; border:1px solid currentColor; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; white-space:nowrap; transition:background-color var(--t-ui) var(--ease-ui),color var(--t-ui) var(--ease-ui); }
.hd-portal:hover,.hd-portal:focus-visible{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.hd.inv .hd-portal:hover,.hd.inv .hd-portal:focus-visible{ background:var(--paper); border-color:var(--paper); color:var(--deep); }
@media (min-width:1200px){ .hd .hnav{ display:flex; } .hd-ico{ display:grid; } .hd-portal{ display:inline-flex; } .hd .mbtn{ display:none !important; } }
/* the Menu control below 1100px: a word and a dark dot. base.css styles `.mbtn span`
   as burger bars, so everything here out-specifies that rule. */
.hd .mbtn{ display:inline-flex !important; width:auto; height:auto; align-items:center; gap:12px; color:inherit; }
.hd .mbtn span{ width:auto; height:auto; background:none; }
.hd .mbtn span::before,.hd .mbtn span::after{ content:none; }
.hd .mbtn .mbtn-word{ font-size:.86rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500; }
.hd .mbtn .mbtn-dot{ position:relative; width:44px; height:44px; border-radius:50%; background:var(--ink); color:var(--paper); display:grid; place-items:center; transition:background-color var(--t-ui) var(--ease-ui),transform var(--t-ui) var(--ease-ui); }
.hd.inv .mbtn .mbtn-dot{ background:var(--paper); color:var(--deep); }
.hd .mbtn:hover .mbtn-dot{ transform:scale(1.06); }
.hd .mbtn .mbtn-dot i{ display:block; width:16px; height:1px; background:currentColor; position:relative; transition:background-color .2s; }
.hd .mbtn .mbtn-dot i::before,.hd .mbtn .mbtn-dot i::after{ content:""; position:absolute; left:0; width:16px; height:1px; background:currentColor; transition:transform .38s var(--ease); }
.hd .mbtn .mbtn-dot i::before{ top:-5px; } .hd .mbtn .mbtn-dot i::after{ top:5px; }
.hd .mbtn[aria-expanded="true"] .mbtn-dot{ background:var(--paper); color:var(--deep); }
.hd .mbtn[aria-expanded="true"] .mbtn-dot i{ background:transparent; }
.hd .mbtn[aria-expanded="true"] .mbtn-dot i::before{ transform:translateY(5px) rotate(45deg); }
.hd .mbtn[aria-expanded="true"] .mbtn-dot i::after{ transform:translateY(-5px) rotate(-45deg); }
body.menu-open .hd{ color:var(--paper); background:transparent; box-shadow:none; backdrop-filter:none; }
@media (max-width:640px){ .hd .mbtn .mbtn-word{ display:none; } }
/* wide screens carry the full bar, so the dot menu goes (declared last: both rules are !important) */
@media (min-width:1200px){ .hd .hd-right .mbtn{ display:none !important; } }
/* over the film the bar is the reference's: the wordmark and a Menu dot, nothing else.
   The full Morgan bar fades in as the film leaves the top of the page. */
.hd .hnav,.hd .hd-ico,.hd .hd-portal{ transition:opacity .5s var(--ease),visibility .5s; }
.hd.film .hnav,.hd.film .hd-ico,.hd.film .hd-portal{ opacity:0; visibility:hidden; pointer-events:none; }
.hd.film .hd-right .mbtn{ display:inline-flex !important; }
.hd.film .brand b{ opacity:.92; }
/* over the film the bar is cream on whatever the frame gives it; a hairline shadow keeps it readable on a bright sky or a white wall */
.hd.inv .brand,.hd.inv .hnav,.hd.inv .hd-right{ text-shadow:0 1px 2px rgba(9,45,52,.35); }
.hd.inv .hd-ico svg{ filter:drop-shadow(0 1px 1px rgba(9,45,52,.45)); }

/* ---- chapter rail (left edge) -------------------------------------------- */
.chapter-rail{
  position:fixed; left:clamp(10px,1.6vw,26px); bottom:clamp(28px,5vh,56px); z-index:800;
  display:flex; align-items:center; gap:12px; transform:rotate(-90deg); transform-origin:left bottom;
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; font-weight:500; color:var(--ink-3);
  transition:color .5s var(--ease); pointer-events:none; white-space:nowrap;
}
.chapter-line{ width:32px; height:1px; background:currentColor; opacity:.5; }
.chapter-name{ transition:opacity .35s var(--ease); }
.chapter-rail.dark{ color:#F3F0E7; background:rgba(16,42,46,.85); padding:5px 12px; border-radius:2px; } /* a near-solid backing: over a dark hero the label read fine, but the element is FIXED and axe resolves its backdrop to the white body (color-contrast 1.11). The backing makes the contrast real on ANY background instead of assuming the photo behind it. */
.chapter-rail.off{ opacity:0; }
.chapter-rail{ transition:color .5s var(--ease),opacity .5s var(--ease); }
@media (max-width:900px){ .chapter-rail{ display:none; } }

/* ==== 00 → 01 · THE OPENING ================================================
   .open is the runway (tall); .open-stage is pinned for its whole height.
   .open-frame is a full-viewport box that JS scales, moves and clips into
   the column reserved by .open-target. The story sits on the stage from the
   start at opacity 0 and rises once the film has made room.               */
/* section.open, NOT bare .open — core.js toggles an `open` CLASS on the
   full-screen menu (.mnav.open), and a bare .open matched it too: the menu
   lost position:fixed to this rule and gained the film section's
   height:var(--runway), which grew a runway-tall block at the bottom of the
   page every time the menu was opened (ZenTao #572, third report). */
section.open{ position:relative; height:var(--runway); z-index:1; }
.open-stage{ position:sticky; top:0; height:100svh; height:var(--vh100); overflow:hidden; background:var(--raised); isolation:isolate; }
.open-frame{ position:absolute; inset:0; z-index:2; overflow:hidden; transform-origin:0 0; will-change:transform,clip-path; background:var(--deep); }
/* the montage: the client's own frames, each drifting and crossfading. Seven
   frames × 5s = a 35s loop. Bright by design: the scrim is only what the type
   needs, and the frames are lifted a touch rather than darkened. */
.montage{ position:absolute; inset:0; z-index:0; background:var(--deep); }
/* seven frames × 5s = a 35s loop; each frame 1.2s in, hold, 1.2s out. The
   camera never sits still: odd frames push in and drift left, even frames push
   in and drift right, the way a slow dolly reads in the reference reel. */
.montage img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%);
  opacity:0; transition:opacity 1.7s var(--ease); filter:brightness(1.05) saturate(1.06); will-change:opacity,transform; transform:scale(1.03); }
.montage img.on{ opacity:1; animation:pushL 10.5s linear forwards; }
.montage img:nth-child(even).on{ animation-name:pushR; }
.montage img.top{ z-index:2; }
.montage.hold img{ animation-play-state:paused; }
@keyframes pushL{ from{ transform:scale(1.03) translate3d(1%,0,0) } to{ transform:scale(1.12) translate3d(-1.1%,-.6%,0) } }
@keyframes pushR{ from{ transform:scale(1.03) translate3d(-1%,0,0) } to{ transform:scale(1.12) translate3d(1.1%,-.6%,0) } }
/* the film: two video layers crossfading through a playlist, over the montage */
.reel{ position:absolute; inset:0; z-index:1; }
.reel video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; opacity:0; transition:opacity 1.4s var(--ease); background:transparent; }
.reel video.on{ opacity:1; }
.reel video.top{ z-index:2; }   /* the incoming clip fades in OVER the outgoing one, so the stills never show through */
/* almost no scrim: a breath at the top for the wordmark, a foot for the title */
.open-scrim{ position:absolute; inset:0; z-index:2; background:
  linear-gradient(to bottom,rgba(9,45,52,.40) 0%,rgba(9,45,52,.12) 10%,rgba(9,45,52,0) 20%),
  linear-gradient(to top,rgba(9,45,52,.44) 0%,rgba(9,45,52,.10) 34%,rgba(9,45,52,0) 60%); }
/* the wordmark and Menu over the film: white, with a shadow that carries them over trees and white walls alike */
.hd.film.inv .brand,.hd.film.inv .hd-right{ color:#fff; text-shadow:0 1px 3px rgba(9,45,52,.55); }
.hd.film.inv .brand b{ font-weight:600; opacity:1; }
.open-title{ text-shadow:0 1px 3px rgba(9,45,52,.3); }
/* the mark and the main title, on the film */
.open-title{ position:absolute; left:0; right:0; bottom:clamp(32px,6vh,64px); z-index:3; color:#fff; display:grid; gap:10px; will-change:transform,opacity; }
.open-mark{ width:clamp(28px,2.6vw,36px); height:auto; color:#fff; margin-bottom:4px; }
.open-kicker{ margin:0; font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; font-weight:500; color:rgba(255,255,255,.85); }
.open-h1{ color:#fff; max-width:16ch; font-size:clamp(2.2rem,4.6vw,4.8rem); line-height:1.04; letter-spacing:-.02em; font-weight:400; }
.open-roll{ margin:6px 0 0; font-family:var(--serif); font-style:italic; font-size:clamp(1.05rem,1.4vw,1.35rem); color:rgba(255,255,255,.92); min-height:1.6em; }
.open-roll em{ display:inline-block; transition:opacity .5s var(--ease),transform .5s var(--ease); }
.open-roll em.out{ opacity:0; transform:translateY(8px); }
.js .open-roll{ animation-delay:.5s }
.open-cue{ position:absolute; right:0; bottom:0; width:1px; height:56px; background:rgba(255,255,255,.28); overflow:hidden; }
.open-cue i{ position:absolute; inset:0; background:#fff; animation:cue 2.6s var(--ease) infinite; }
@keyframes cue{ 0%{ transform:translateY(-100%) } 55%,100%{ transform:translateY(100%) } }
/* the story layer: the grid the film lands into */
/* The story must fit the viewport it is pinned in: the headline is sized by
   the smaller of width and height, its three lines never wrap, and the block
   sits below the header with room to spare (this used to overflow on tall
   windows and push the eyebrow up under the bar). */
.open-story{ position:absolute; inset:0; z-index:1; align-content:center; padding-top:calc(var(--hd-h) + 2vh); padding-bottom:2vh; }
.open-copy{ grid-column:1/8; align-self:center; opacity:0; will-change:transform,opacity; }
.open-copy .story-h{ font-size:clamp(2.2rem,min(4.6vw,8.2vh),6.2rem); line-height:1.02; white-space:normal; max-width:12ch; }
.open-copy .eyebrow{ margin-bottom:clamp(12px,2vh,28px); }
.open-copy .body{ margin-top:clamp(14px,2.4vh,28px); max-width:44ch; }
.open-copy .actions{ margin-top:clamp(16px,2.6vh,30px); }
@media (max-height:760px){ .open-copy .body{ max-width:52ch; font-size:1rem; } }
.open-target{ grid-column:9/13; align-self:center; aspect-ratio:4/5; max-height:min(72svh,760px); width:100%; }
.open-caption{ grid-column:9/13; margin:12px 0 0; font-size:.9rem; color:var(--ink-3); opacity:0; }
@media (min-width:901px){ .open-story{ align-items:center; } .open-caption{ position:relative; top:calc(-1 * clamp(0px,1vh,10px)); } }
/* staged entrance on load — the title on the film arrives in order */
.js .open-title > *{ animation:openIn 1s var(--ease) both; }
.js .open-mark{ animation-delay:.1s } .js .open-kicker{ animation-delay:.22s } .js .open-h1{ animation-delay:.34s } .js .open-sub{ animation-delay:.5s } .js .open-cue{ animation-delay:.9s }
@keyframes openIn{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }
/* ---- the static version: phones and reduced motion. The film is a full
   screen, then the story follows as an ordinary block. ---- */
section.open.is-static{ height:auto; }
section.open.is-static .open-stage{ position:relative; height:auto; overflow:visible; }
section.open.is-static .open-frame{ position:relative; height:100svh; height:var(--vh100); transform:none !important; clip-path:none !important; }
section.open.is-static .open-story{ position:relative; inset:auto; padding-top:clamp(56px,9vh,96px); padding-bottom:var(--beat); row-gap:28px; }
.open.is-static .open-copy{ grid-column:1/13; opacity:1 !important; transform:none !important; }
.open.is-static .open-target,.open.is-static .open-caption{ display:none; }
.open.is-static .open-title{ opacity:1 !important; transform:none !important; }

/* ---- shared beat rhythm ------------------------------------------------------ */
.beat{ position:relative; z-index:2; background:var(--paper); }
.beat-moves{ background:var(--paper); }

/* ==== 02 · find a home (the renter's door) ================================ */
.beat-find{ padding-top:clamp(56px,8vh,110px); padding-bottom:clamp(56px,8vh,110px); }
.find{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr auto; gap:18px 22px; align-items:end; padding:clamp(24px,3vw,40px); border:1px solid var(--line); background:var(--paper); }
.find-head{ grid-column:1/-1; }
.find-h{ font-family:var(--display); font-weight:var(--display-weight); font-size:clamp(1.8rem,3vw,2.8rem); line-height:1.05; color:var(--ink); letter-spacing:-.018em; }
.find-field{ display:grid; gap:8px; }
.find-field span{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--ink-3); }
.find-field select{ font:500 1rem var(--sans); color:var(--ink); background:var(--paper); border:0; border-bottom:1px solid var(--ink); padding:12px 0; border-radius:0; -webkit-appearance:none; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%); background-position:calc(100% - 14px) 55%,calc(100% - 8px) 55%; background-size:6px 6px,6px 6px; background-repeat:no-repeat; }
.find-go{ grid-column:5; }
.find-foot{ grid-column:1/-1; margin:0; }
@media (max-width:1000px){ .find{ grid-template-columns:1fr 1fr; } .find-go{ grid-column:1/-1; justify-self:start; } }
@media (max-width:560px){ .find{ grid-template-columns:1fr; } }

/* ==== 02 · purpose (Morgan's mission line) ============================== */
.beat-purpose{ padding-top:var(--beat); padding-bottom:var(--beat); }
.purpose{ grid-column:1/11; margin:0; font-family:var(--serif); font-weight:400; font-size:clamp(1.7rem,3.4vw,3.3rem); line-height:1.22; letter-spacing:-.012em; color:var(--ink); text-wrap:balance; }
.purpose em{ color:var(--accent-ink); }
.purpose-more{ grid-column:1/11; margin-top:clamp(22px,3vw,36px); }
@media (max-width:900px){ .purpose,.purpose-more{ grid-column:1/13; } }

/* ==== 02 · what we do ====================================================== */
.beat-moves{ padding-top:var(--beat); padding-bottom:var(--beat); }
.beat-moves .grid-12{ row-gap:clamp(40px,7vh,110px); align-items:start; }
.moves-head{ grid-column:1/8; }
.moves-head .body{ margin-top:clamp(18px,2.4vw,30px); }
.mv{ display:grid; gap:14px; align-content:start; }
.mv-no{ font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--ink-3); margin:0; }
.mv-title{ font-family:var(--display); font-weight:var(--display-weight); font-size:clamp(2rem,3.4vw,3.3rem); line-height:1.05; letter-spacing:-.018em; color:var(--ink); }
.mv-body{ max-width:36ch; margin:0 0 6px; color:var(--ink-2); font-size:1.04rem; }
.mv .btn{ justify-self:start; }
.mv-1{ grid-column:7/12; }
.mv-2{ grid-column:2/6; }
.mv-3{ grid-column:8/12; }
.mv-4{ grid-column:2/6; }
.moves{ list-style:none; margin:clamp(28px,4vw,52px) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2vw,28px); }
.moves .mv{ display:grid; gap:8px; align-content:start; }
.moves figure{ margin:0 0 10px; overflow:hidden; aspect-ratio:3/4; }
.moves figure img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); transition:transform var(--t-img) var(--ease); }
.moves .mv:hover figure img{ transform:scale(1.04); }
.moves .mv-title{ font-size:clamp(1.5rem,2vw,2rem); }
.moves .mv-body{ max-width:30ch; }
@media (max-width:900px){ .moves{ grid-template-columns:1fr 1fr; } }
.mv-fig{ margin:0; overflow:hidden; }
.mv-fig img{ width:100%; height:100%; object-fit:cover; }
.mv-fig-a{ grid-column:1/5; aspect-ratio:4/5; margin-top:clamp(20px,6vh,80px); }
.mv-fig-b{ grid-column:7/13; aspect-ratio:16/10; }
.mv-fig-c{ grid-column:7/11; aspect-ratio:4/5; }
@media (max-width:900px){
  .moves-head,.mv-1,.mv-2,.mv-3,.mv-4{ grid-column:1/13; }
  .mv-fig-a{ grid-column:1/8; } .mv-fig-b{ grid-column:4/13; } .mv-fig-c{ grid-column:1/8; }
}

/* ==== 03 · history & culture (deep) ========================================= */
.beat-culture{ background:var(--deep); color:var(--paper); padding-top:var(--beat); padding-bottom:var(--beat); }
.beat-culture .grid-12{ row-gap:clamp(36px,6vh,72px); align-items:start; }
.culture-head{ grid-column:1/8; }
.beat-culture .eyebrow{ color:rgba(243,240,231,.86); }
.beat-culture .display{ color:var(--paper); }
.culture-fig{ grid-column:8/13; grid-row:1/3; margin:0; overflow:hidden; aspect-ratio:4/5; align-self:start; }
.culture-fig img{ width:100%; height:100%; object-fit:cover; }
.culture-list{ grid-column:1/8; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:28px 32px; border-top:1px solid rgba(243,240,231,.18); padding-top:28px; }
.culture-list dt{ font-family:var(--serif); font-size:1.35rem; color:var(--paper); margin-bottom:8px; }
.culture-list dd{ margin:0; color:rgba(243,240,231,.86); font-size:1rem; line-height:1.72; }
.culture-list dd em{ color:var(--paper); }
.record{ grid-column:1/8; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px 24px; border-top:1px solid rgba(243,240,231,.18); padding-top:24px; }
.record li{ display:grid; gap:6px; }
.record b{ font-family:var(--display); font-weight:var(--display-weight); font-size:clamp(1.8rem,3vw,2.8rem); line-height:1; color:var(--paper); }
.record span{ font-size:.86rem; line-height:1.55; color:rgba(243,240,231,.82); }
.record i{ display:block; font-style:italic; font-family:var(--serif); color:rgba(243,240,231,.6); margin-top:2px; }
.record i.chip{ display:inline-block; font-style:normal; }
@media (max-width:760px){ .record{ grid-template-columns:1fr 1fr; } }
.culture-more{ grid-column:1/8; display:flex; flex-wrap:wrap; gap:12px; }
@media (max-width:900px){ .culture-head,.culture-list,.culture-more,.record{ grid-column:1/13; } .culture-fig{ grid-column:3/13; grid-row:auto; } .culture-list{ grid-template-columns:1fr; } }

/* ==== 04 · now leasing: the flagship ======================================== */
.beat-flag{ position:relative; min-height:92svh; display:grid; align-items:end; overflow:hidden; color:var(--paper); background:var(--deep); isolation:isolate; padding-top:var(--beat); padding-bottom:clamp(56px,9vh,110px); }
.flag-frame{ position:absolute; inset:-10% 0; z-index:0; }
.flag-frame img{ width:100%; height:100%; object-fit:cover; object-position:50% 40%; will-change:transform; }
.flag-scrim{ position:absolute; inset:0; background:linear-gradient(to top,rgba(9,45,52,.82) 0%,rgba(9,45,52,.34) 48%,rgba(9,45,52,.08) 100%); }
.flag-in{ position:relative; z-index:1; align-items:end; row-gap:32px; }
.flag-copy{ grid-column:1/8; }
.beat-flag .eyebrow{ color:rgba(255,255,255,.9); }
.beat-flag .display{ color:#fff; }
.beat-flag .body{ color:rgba(255,255,255,.9); max-width:50ch; }
.flag-facts{ grid-column:9/13; margin:0; display:grid; gap:14px; border-top:1px solid rgba(255,255,255,.28); padding-top:18px; }
.flag-facts dt{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:rgba(255,255,255,.68); margin-bottom:3px; }
.flag-facts dd{ margin:0; color:#fff; font-size:1rem; }
.flag-facts a{ border-bottom:1px solid rgba(255,255,255,.5); }
@media (max-width:900px){ .flag-copy,.flag-facts{ grid-column:1/13; } }

/* ==== 04 · capability ======================================================= */
.beat-cap{ padding-top:var(--beat); padding-bottom:var(--beat); }
.beat-stats{ padding-top:clamp(40px,6vh,80px); padding-bottom:clamp(40px,6vh,80px); background:var(--raised); }
.beat-stats .fine{ margin-top:16px; }
.stats{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px 32px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-top:32px; padding-bottom:32px; }
.stats b{ display:block; font-family:var(--display); font-weight:var(--display-weight); font-size:clamp(3rem,6.4vw,6rem); line-height:1; color:var(--ink); letter-spacing:-.02em; }
.stats span{ display:block; margin-top:10px; font-size:.9rem; color:var(--ink-3); max-width:24ch; }
@media (max-width:760px){ .stats{ grid-template-columns:1fr 1fr; } }
.cap-grid{ align-items:start; }
.cap-head{ grid-column:1/6; }
.cap-head .body{ margin-top:clamp(18px,2.4vw,30px); }
.track-list{ grid-column:7/13; list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.track-list li{ display:grid; grid-template-columns:1.4fr 1fr .7fr .8fr; gap:10px 20px; padding:18px 0; border-bottom:1px solid var(--line); align-items:baseline; font-size:.95rem; }
.tl-where{ font-family:var(--serif); font-size:1.2rem; color:var(--ink); }
.tl-what{ color:var(--ink-2); }
.tl-status{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--accent-ink); }
.tl-src{ color:var(--ink-3); font-size:.9rem; text-align:right; }
@media (max-width:900px){ .cap-head,.track-list{ grid-column:1/13; } .track-list{ margin-top:32px; } .track-list li{ grid-template-columns:1fr 1fr; } .tl-src{ text-align:left; } }

/* ==== 06 · areas as cards, the selected rail, the map ======================= */
.area-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2vw,24px); margin-top:clamp(32px,4vw,48px); }
.area{ position:relative; display:block; overflow:hidden; aspect-ratio:4/5; background:var(--paper-2); color:#fff; }
.area img{ width:100%; height:100%; object-fit:cover; transition:transform var(--t-img) var(--ease); }
.area:hover img,.area:focus-visible img{ transform:scale(1.04); }
.area-copy{ position:absolute; left:0; right:0; bottom:0; padding:20px; display:grid; gap:6px; background:linear-gradient(to top,rgba(9,45,52,.82),rgba(9,45,52,0)); }
.area-copy b{ font-family:var(--display); font-weight:var(--display-weight); font-size:clamp(1.3rem,1.7vw,1.7rem); line-height:1.1; }
.area-copy i{ font-style:normal; font-size:.8rem; color:rgba(255,255,255,.82); line-height:1.5; }
.area-copy em{ font-style:normal; font-family:var(--sans); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:#fff; margin-top:4px; }
.area-all{ background:var(--ink); }
.area-all .area-copy{ background:none; top:0; align-content:end; }
@media (max-width:1100px){ .area-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .area{ aspect-ratio:4/3; } }
@media (max-width:520px){ .area-grid{ grid-template-columns:1fr; } }
.selected{ padding-top:var(--beat); }
.sel-head .body{ margin-top:clamp(16px,2.4vw,28px); }
.sel-rail{ list-style:none; margin:clamp(28px,4vw,44px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,28px) clamp(16px,2vw,28px); }
.sel-rail li{ display:grid; gap:10px; }
.sel-rail a{ display:grid; gap:10px; }
.sel-fig{ aspect-ratio:3/2; overflow:hidden; background:var(--paper-2); }
.sel-fig img{ width:100%; height:100%; object-fit:cover; transition:transform var(--t-img) var(--ease); }
.sel-rail a:hover .sel-fig img{ transform:scale(1.04); }
.sel-area{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--ink-3); }
.sel-name{ font-family:var(--display); font-weight:var(--display-weight); font-size:1.5rem; color:var(--ink); line-height:1.15; }
.sel-meta{ font-size:.95rem; color:var(--ink-2); }
.sel-meta b{ color:var(--ink); font-weight:600; }
.sel-loading{ grid-column:1/-1; color:var(--ink-3); }
.selected .fine{ margin-top:22px; }
@media (max-width:900px){ .sel-rail{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .sel-rail{ grid-template-columns:1fr; } }
.homemap{ padding-top:var(--beat); padding-bottom:var(--beat); }
.mapbox{ height:clamp(420px,60vh,640px); background:var(--paper-2); margin-top:clamp(24px,3vw,40px); --map-tint:var(--paper); }
.map-foot{ display:flex; justify-content:space-between; gap:12px 28px; flex-wrap:wrap; margin:14px 0 0; }

/* ==== 05 · communities ====================================================== */
.beat-comm{ background:var(--raised); padding-top:var(--beat); padding-bottom:0; }
.beat-comm > .grid-12{ align-items:start; row-gap:clamp(28px,4vh,48px); }
.comm-head{ grid-column:1/7; }
.comm-head .body{ margin-top:clamp(18px,2.4vw,30px); }
.area-list{ grid-column:1/7; list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.area-list a{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; column-gap:20px; padding:16px 0; border-bottom:1px solid var(--line); font-family:var(--serif); font-size:clamp(1.4rem,2.1vw,1.9rem); color:var(--ink); transition:padding-left .4s var(--ease),color .3s; }
/* explicit cells: an item with a definite row is auto-placed BEFORE the others,
   so without a column the count grabbed column 1 and pushed the name right */
.area-list a > span{ grid-column:1; grid-row:1; }
.area-list a b{ grid-column:2; grid-row:1/3; align-self:center; font-family:var(--sans); font-weight:500; font-size:.95rem; color:var(--ink-3); }
.area-list a i{ grid-column:1; grid-row:2; font-family:var(--sans); font-style:normal; font-size:.8rem; color:var(--ink-3); letter-spacing:.02em; }
.area-list a:hover,.area-list a:focus-visible{ padding-left:14px; color:var(--accent-ink); }
.area-fig{ grid-column:8/13; grid-row:1/3; margin:0; overflow:hidden; aspect-ratio:4/5; align-self:start; background:var(--paper-2); }
.area-fig img{ width:100%; height:100%; object-fit:cover; }
.area-fig img.swap{ animation:swap .6s var(--ease); }
@keyframes swap{ from{ opacity:.35; transform:scale(1.02) } to{ opacity:1; transform:none } }
@media (max-width:900px){ .comm-head,.area-list{ grid-column:1/13; } .area-fig{ grid-column:1/13; grid-row:auto; aspect-ratio:16/10; } }
.featured{ padding-top:var(--beat); padding-bottom:var(--beat); }
.feat-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2vw,26px); margin-top:8px; }
.feat{ display:block; position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--paper-2); color:var(--paper); }
.feat img{ width:100%; height:100%; object-fit:cover; transition:transform var(--t-img) var(--ease); }
.feat:hover img,.feat:focus-visible img{ transform:scale(1.04); }
.feat-copy{ position:absolute; left:0; right:0; bottom:0; padding:18px; display:grid; gap:4px; background:linear-gradient(to top,rgba(9,45,52,.72),rgba(9,45,52,0)); }
.feat-copy b{ font-family:var(--serif); font-weight:400; font-size:1.35rem; }
.feat-copy span{ font-size:.78rem; color:rgba(243,240,231,.86); }
.feat-more{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; margin-top:26px; }
.feat-more .fine{ margin:0; }
@media (max-width:900px){ .feat-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .feat-grid{ grid-template-columns:1fr; } .feat{ aspect-ratio:4/3; } }
/* the one door */
.door{ position:relative; display:block; height:78svh; min-height:520px; overflow:hidden; color:var(--paper); isolation:isolate; background:var(--deep); }
.door img{ position:absolute; inset:-8% 0; width:100%; height:116%; object-fit:cover; transition:transform var(--t-img) var(--ease); will-change:transform; }
.door:hover img,.door:focus-visible img{ transform:scale(1.035); }
.door-scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(to top,rgba(9,45,52,.72) 0%,rgba(9,45,52,.16) 50%,transparent 100%); }
.door-copy{ position:absolute; left:0; right:0; bottom:clamp(36px,6vh,72px); z-index:2; display:grid; gap:12px; }
.door-label{ font-size:clamp(1rem,1.3vw,1.2rem); color:rgba(243,240,231,.88); }
.door-title{ color:var(--paper); display:block; }
.door-title::after{ content:"→"; font-family:var(--sans); font-weight:300; margin-left:.35em; display:inline-block; transition:transform .5s var(--ease); font-size:.6em; vertical-align:.12em; }
.door:hover .door-title::after,.door:focus-visible .door-title::after{ transform:translateX(.3em); }
.door:focus-visible{ outline:2px solid var(--paper); outline-offset:-6px; }

/* ==== 07 · the on-site model + the residents' doors (deep) ================== */
.beat-office .grid-12{ align-items:start; }
.office-points{ list-style:none; margin:clamp(20px,3vw,30px) 0 0; padding:0; display:grid; gap:12px; max-width:48ch; color:rgba(255,255,255,.86); }
.office-points b{ color:#fff; font-weight:600; }
.doors{ grid-column:8/13; display:grid; gap:2px; align-self:center; }
.door-card{ display:grid; gap:4px; padding:22px 24px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#fff; transition:background-color var(--t-ui) var(--ease-ui),border-color var(--t-ui) var(--ease-ui); }
.door-card:hover,.door-card:focus-visible{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.4); }
.door-card b{ font-family:var(--display); font-weight:var(--display-weight); font-size:1.4rem; }
.door-card span{ font-size:.9rem; color:rgba(255,255,255,.76); }
@media (max-width:900px){ .doors{ grid-column:1/13; margin-top:32px; } }
.press{ margin-top:clamp(28px,4vw,44px); border-top:1px solid var(--line); padding-top:22px; }
.press .eyebrow{ margin-bottom:10px; font-size:1.05rem; }
.press ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:.92rem; color:var(--ink-2); max-width:52ch; }
.press b{ color:var(--ink); font-weight:600; }

/* ==== 08 · work at wiseman ================================================== */
.beat-work{ padding-top:var(--beat); padding-bottom:var(--beat); }
.beat-work .grid-12{ align-items:center; }
.work-fig{ grid-column:1/6; margin:0; overflow:hidden; aspect-ratio:4/5; }
.work-fig img{ width:100%; height:100%; object-fit:cover; }
.work-copy{ grid-column:7/13; }
.work-copy .body{ margin-top:clamp(18px,2.4vw,30px); }
@media (max-width:900px){ .work-fig{ grid-column:3/13; } .work-copy{ grid-column:1/13; margin-top:32px; } }

/* ==== 09 · contact ======================================================== */
.beat-contact{ padding-top:var(--beat); padding-bottom:var(--beat); overflow:hidden; }
.contact-stack{ display:grid; gap:0; margin-bottom:clamp(40px,7vh,90px); }
.contact-stack .display{ display:block; line-height:1.02; white-space:nowrap; }
.contact-stack .display:nth-child(1){ color:var(--ink); }
.contact-stack .display:nth-child(2){ color:transparent; -webkit-text-stroke:1px var(--ink); opacity:.55; }
.contact-stack .display:nth-child(3){ color:transparent; -webkit-text-stroke:1px var(--ink); opacity:.22; }
@supports not (-webkit-text-stroke:1px currentColor){ .contact-stack .display:nth-child(n+2){ color:var(--ink); opacity:.25; } }
.contact-row{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(16px,2vw,32px); }
.contact-who{ grid-column:1/6; }
.contact-do{ grid-column:7/13; display:grid; gap:20px; align-content:start; }
.contact-tel{ font-family:var(--display); font-weight:var(--display-weight); font-size:clamp(2rem,3.6vw,3.4rem); color:var(--ink); letter-spacing:-.02em; line-height:1; }
.contact-do .actions{ margin-top:6px; }
@media (max-width:900px){ .contact-who,.contact-do{ grid-column:1/13; } .contact-do{ margin-top:32px; } }

/* ---- footer -------------------------------------------------------------- */
.ft{ background:var(--deep); color:var(--paper); position:relative; z-index:2; padding-top:clamp(56px,8vh,96px); padding-bottom:32px; }
.ft-in{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px 28px; padding-bottom:clamp(36px,5vh,56px); border-bottom:1px solid rgba(243,240,231,.16); }
.ft-brand svg{ width:34px; height:34px; color:var(--paper); margin-bottom:16px; }
.ft-brand b{ font-weight:500; letter-spacing:.26em; text-transform:uppercase; font-size:.76rem; }
.ft-brand em{ color:rgba(243,240,231,.8); font-size:1.05rem; }
.ft-social{ margin-top:12px; font-size:.86rem; color:rgba(243,240,231,.72); }
.ft-social a:hover{ color:var(--paper); }
.ft-addr{ margin-top:18px; font-size:.9rem; line-height:1.8; color:rgba(243,240,231,.72); }
.ft-col{ display:grid; gap:9px; align-content:start; font-size:.92rem; }
.ft-col h3{ font-family:var(--sans); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600; color:rgba(243,240,231,.6); margin-bottom:8px; }
.ft-col a{ position:relative; width:max-content; opacity:.88; }
.ft-col a::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.ft-col a:hover::after,.ft-col a:focus-visible::after{ transform:scaleX(1); }
.ft-bottom{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 28px; padding-top:24px; font-size:.78rem; color:rgba(243,240,231,.7); }
.ft-bottom nav{ display:flex; gap:22px; }
.ft-bottom nav a{ text-decoration:underline; text-underline-offset:2px; } /* axe link-in-text-block: don't rely on color alone */
.eho svg{ width:26px; }
@media (max-width:900px){ .ft-in{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .ft-in{ grid-template-columns:1fr; } }

/* ---- menu overlay ---------------------------------------------------------- */
/* The curtain must survive a SHORT viewport (an in-app browser chews ~150px):
   base.css centres with justify-content, and a flex column taller than its
   container overflows EQUALLY both ways — the first item climbed under the
   header's brand line and the top was unscrollable (ZenTao #572, phone
   report). margin-block:auto on the inner grid gives the same centring when
   there is room and collapses to 0 when there is not, with the pane
   scrollable and padded clear of the fixed header. */
.mnav{ background:var(--deep); justify-content:flex-start; overflow-y:auto;
  padding-top:calc(74px + 16px); padding-bottom:28px; }
.mnav-in{ margin-block:auto; }
.mnav-in{ display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:end; }
.mnav-list{ list-style:none; margin:0; padding:0; }
.mnav-list li a{ display:flex; align-items:baseline; gap:22px; font-family:var(--display); font-weight:var(--display-weight); font-size:clamp(2.2rem,6vw,5.2rem); line-height:1.12; letter-spacing:-.02em; padding:2px 0; }
.mnav-list li a .tnum{ font-family:var(--serif); font-style:italic; font-size:1rem; color:rgba(243,240,231,.6); letter-spacing:0; }
.mnav-list li a:hover,.mnav-list li a:focus-visible{ color:#fff; }
.mnav-side{ display:grid; gap:8px; align-content:end; font-size:1rem; }
.mnav-side a{ opacity:0; transform:translateY(16px); width:max-content; }
.mnav.open .mnav-side a{ opacity:1; transform:none; transition:opacity .5s var(--ease),transform .5s var(--ease); }
.mnav-h{ margin:14px 0 6px; color:rgba(243,240,231,.6); font-size:1.05rem; }
.mnav .mfoot{ margin-top:28px; opacity:.72; font-size:.9rem; }
@media (max-width:900px){ .mnav-in{ grid-template-columns:1fr; align-items:start; } }

/* ---- page curtain --------------------------------------------------------- */
.pt .ptmark svg{ width:34px; height:34px; }
.pt-name{ font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; }

/* ---- motion floor ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .open-cue i{ animation:none; }
  .reel{ display:none; }
  .montage img{ animation:none !important; transition:none; }
  .js .open-title > *{ animation:none; }
  [data-px],[data-px-img] img{ transform:none !important; }
}


/* ==== the chapters: full screen, the title in white, an inset, a plus ========
   The reference's project pages: one photograph fills the screen, the title
   sits low-left in white, a second photograph is inset top-right, and a white
   circle with a plus is the way in. Alternates with the white sections so the
   page never runs flat. ========================================================= */
.bleed{ position:relative; display:grid; align-items:end; min-height:100svh; min-height:var(--vh100); overflow:hidden; color:#fff; background:var(--deep); isolation:isolate; padding-top:calc(var(--hd-h) + 4vh); padding-bottom:clamp(36px,6vh,72px); z-index:2; }
.bleed-frame{ position:absolute; inset:-10% 0; z-index:0; display:block; }
.bleed-frame img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); will-change:transform; }
.bleed-scrim{ position:absolute; inset:0; background:linear-gradient(to top,rgba(9,45,52,.80) 0%,rgba(9,45,52,.46) 34%,rgba(9,45,52,.10) 62%,rgba(9,45,52,.22) 100%); }
.bleed-in{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); column-gap:clamp(24px,4vw,64px); align-items:end; width:100%; }
.bleed-plus{ grid-column:1; justify-self:start; width:56px; height:56px; border-radius:50%; background:#fff; color:var(--deep); display:grid; place-items:center; font:300 2rem/1 var(--sans); margin-bottom:clamp(20px,4vh,40px); transition:transform var(--t-ui) var(--ease-ui),background-color var(--t-ui) var(--ease-ui); text-shadow:none; }
.bleed-plus:hover,.bleed-plus:focus-visible,.bleed-link:hover .bleed-plus{ transform:scale(1.08) rotate(90deg); }
.bleed-label{ grid-column:1; margin:0 0 10px; font-size:clamp(.9rem,1.1vw,1.05rem); color:rgba(255,255,255,.9); text-shadow:0 1px 2px rgba(9,45,52,.4); }
.bleed-title{ grid-column:1; margin:0; font-family:var(--display); font-weight:var(--display-weight); font-size:clamp(2.6rem,min(5.6vw,9.5vh),6rem); line-height:1.02; letter-spacing:-.02em; color:#fff; text-shadow:0 2px 12px rgba(9,45,52,.3); text-wrap:balance; max-width:13ch; display:block; }
.bleed-sub{ grid-column:1; margin:clamp(12px,2vh,22px) 0 0; max-width:50ch; font-size:clamp(.95rem,1.15vw,1.08rem); line-height:1.6; color:rgba(255,255,255,.92); text-shadow:0 1px 2px rgba(9,45,52,.4); }
.bleed-sub a{ border-bottom:1px solid rgba(255,255,255,.55); }
.bleed-inset{ grid-column:2; grid-row:1/-1; align-self:start; justify-self:end; width:min(100%,460px); max-height:40vh; margin:0; display:grid; gap:10px; }
.bleed-inset img{ width:100%; aspect-ratio:4/3; max-height:34vh; object-fit:cover; display:block; box-shadow:0 30px 80px rgba(9,45,52,.35); }
.bleed-inset figcaption{ font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.85); text-shadow:0 1px 2px rgba(9,45,52,.4); }
.bleed-link{ display:grid; text-decoration:none; }
.bleed-link .bleed-in{ grid-template-columns:1fr; }
.bleed-link:focus-visible{ outline:2px solid #fff; outline-offset:-6px; }
@media (max-width:900px){ .bleed-in{ grid-template-columns:1fr; } .bleed-inset{ grid-column:1; grid-row:auto; width:min(100%,360px); justify-self:start; margin-bottom:24px; } .bleed-title{ font-size:clamp(2.6rem,11vw,5rem); } }

/* residents' doors on white */
.beat-res{ padding-top:var(--beat); padding-bottom:var(--beat); }
.beat-res .grid-12{ align-items:center; }
.res-head{ grid-column:1/6; }
.res-head .body{ margin-top:clamp(16px,2.4vw,28px); }
.beat-res .doors{ grid-column:7/13; }
.beat-res .door-card{ background:var(--paper); border:1px solid var(--line); color:var(--ink); }
.beat-res .door-card:hover,.beat-res .door-card:focus-visible{ background:var(--paper-2); border-color:var(--ink); }
.beat-res .door-card span{ color:var(--ink-3); }
/* ZenTao #576 final root cause: .door-card is authored for DARK sections
   (white text on white-alpha fills) but about's sub-nav and work's openings
   sit on the paper background — white-on-white, an invisible block that read
   as "a big blank under About Wiseman". Same light treatment .beat-res uses. */
.beat-subnav .door-card{ background:var(--paper); border:1px solid var(--line); color:var(--ink); }
.beat-subnav .door-card:hover,.beat-subnav .door-card:focus-visible{ background:var(--paper-2); border-color:var(--ink); }
.beat-subnav .door-card span{ color:var(--ink-3); }
@media (max-width:900px){ .res-head,.beat-res .doors{ grid-column:1/13; } }

/* history & culture now sits on white between two chapters */
.beat-culture{ background:var(--paper); color:var(--ink-2); }
.beat-culture .eyebrow{ color:var(--ink-2); }
.beat-culture .display{ color:var(--ink); }
.beat-culture .chip{ color:var(--accent-ink); }
.culture-list{ border-top:1px solid var(--line); }
.culture-list dt{ color:var(--ink); }
.culture-list dd{ color:var(--ink-2); }
.culture-list dd em{ color:var(--ink); }
.record{ border-top:1px solid var(--line); }
.record b{ color:var(--ink); }
.record span{ color:var(--ink-2); }
.record i{ color:var(--ink-3); }
.beat-culture .btn-line-paper{ border-color:var(--ink); color:var(--ink); }

/* the portfolio section: the stats band leads it */
.beat-comm{ padding-top:clamp(40px,6vh,80px); background:var(--paper); }
.beat-comm .stats{ margin-bottom:var(--beat); }


/* ==== one grade for everything: the photographs read like frames of the film ==
   Warm, a touch desaturated, slight contrast; a faint amber wash on top. */
.grade img{ filter:saturate(.84) contrast(1.06) brightness(.98) sepia(.16); }
.sel-fig.grade,.person-fig.grade,.who-fig.grade{ position:relative; }
.grade::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(232,192,143,.10),rgba(154,85,51,.08)); mix-blend-mode:multiply; }
.montage.grade::after{ z-index:3; }
.bleed-frame.grade::after{ z-index:0; }
figure.grade{ position:relative; }
figure.grade::after{ z-index:1; }
figure.grade figcaption{ position:relative; z-index:2; }

/* the still the film lands as */
.open-land{ position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); opacity:0; transition:opacity 1.2s var(--ease); }
.open-land.on{ opacity:1; }
.open.is-static .open-land{ display:none; }

/* ==== who we are ============================================================ */
.beat-who{ padding-top:var(--beat); padding-bottom:var(--beat); }
.who-grid{ row-gap:clamp(36px,5vh,64px); align-items:start; }
.who-head{ grid-column:1/8; }
.who-head .body{ margin-top:clamp(16px,2.4vw,28px); max-width:56ch; }
.who-fig{ margin:0; overflow:hidden; display:grid; gap:10px; }
.who-fig img{ width:100%; height:100%; object-fit:cover; }
.who-fig figcaption{ font-size:.85rem; color:var(--ink-3); font-family:var(--serif); font-style:italic; }
.who-fig-a{ grid-column:9/13; grid-row:1; aspect-ratio:4/5; align-self:start; margin-top:clamp(20px,5vh,64px); }
.who-fig-a img{ aspect-ratio:4/5; }
.beat-who .culture-list{ grid-column:1/8; grid-row:2; }
.who-fig-b{ grid-column:9/13; grid-row:2; aspect-ratio:4/3; align-self:start; }
.record-wide{ grid-column:1/13; grid-row:2; align-self:start; margin-top:clamp(28px,4vh,56px); }
.beat-who .who-fig-a{ aspect-ratio:4/3; margin-top:0; }
.beat-who .who-fig-a img{ aspect-ratio:4/3; }
.beat-who .who-grid{ row-gap:0; align-items:start; }
.work-fig{ aspect-ratio:4/3; }
.who-fig-b img{ aspect-ratio:4/3; }
.beat-who .record{ grid-column:1/13; grid-row:3; grid-template-columns:repeat(5,minmax(0,1fr)); }
@media (max-width:900px){ .who-head,.beat-who .culture-list,.who-fig-a,.who-fig-b,.beat-who .record{ grid-column:1/13; grid-row:auto; } .beat-who .record{ grid-template-columns:1fr 1fr; } }

/* what we do: a photograph beside the head */
.moves-hero{ grid-column:9/13; grid-row:1; margin:0; overflow:hidden; display:grid; gap:10px; align-self:end; }
.moves-hero img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.moves-hero figcaption{ font-size:.85rem; color:var(--ink-3); font-family:var(--serif); font-style:italic; }
.moves-head{ grid-row:1; }
.beat-moves .grid-12{ row-gap:clamp(32px,5vh,72px); }
@media (max-width:900px){ .moves-hero{ grid-column:3/13; grid-row:auto; } }


/* ==== sub pages ============================================================== */
/* the bar reads white over the hero (subHeader in app.js), ink on white, frosted when scrolling back up */
.phero{ position:relative; display:grid; align-items:end; min-height:min(88svh,820px); overflow:hidden; color:#fff; background:var(--deep); isolation:isolate; padding-top:calc(var(--hd-h) + 6vh); padding-bottom:clamp(40px,7vh,80px); }
.phero-in{ position:relative; z-index:1; display:grid; gap:0; }
.phero .bleed-title{ max-width:14ch; }
.phero .bleed-sub{ max-width:56ch; }
body.sub .beat{ padding-top:var(--beat); padding-bottom:var(--beat); }
.people{ grid-column:1/13; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2vw,28px); margin-top:clamp(24px,3vw,40px); }
.person{ display:grid; gap:6px; }
.person-fig{ display:block; aspect-ratio:4/5; overflow:hidden; background:var(--paper-2); position:relative; }
.person-fig img{ width:100%; height:100%; object-fit:cover; }
.person-empty .person-fig{ background:repeating-linear-gradient(135deg,rgba(20,73,82,.06) 0 10px,transparent 10px 20px); border:1px solid var(--line); }
.person b{ font-family:var(--display); font-weight:var(--display-weight); font-size:1.4rem; color:var(--ink); margin-top:8px; }
.person span{ font-size:.92rem; color:var(--ink-3); }
@media (max-width:900px){ .people{ grid-template-columns:1fr 1fr; } }
.values{ grid-column:1/13; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2vw,28px); margin-top:clamp(24px,3vw,40px); }
.value{ margin:0; padding:clamp(24px,3vw,40px); border:1px solid var(--line); display:grid; gap:14px; align-content:space-between; min-height:200px; }
.value p{ font-family:var(--display); font-weight:var(--display-weight); font-size:clamp(1.5rem,2.4vw,2.2rem); line-height:1.15; color:var(--ink); letter-spacing:-.015em; }
.value cite{ font-style:normal; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.value-empty{ border-style:dashed; }
@media (max-width:760px){ .values{ grid-template-columns:1fr; } }
/* live: filters + the grid of every building */
.beat-live{ padding-top:clamp(40px,6vh,72px) !important; }
.filters{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)) auto; gap:18px 22px; align-items:end; padding-bottom:22px; border-bottom:1px solid var(--line); }
.filters-count{ margin:0; align-self:end; white-space:nowrap; }
.filters-count b{ color:var(--ink); }
@media (max-width:1000px){ .filters{ grid-template-columns:1fr 1fr; } }
.live-grid{ list-style:none; margin:clamp(24px,3vw,36px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.4vw,32px) clamp(16px,2vw,28px); }
.live-grid li{ display:grid; }
.live-grid a{ display:grid; gap:10px; color:inherit; }
.live-grid .sel-fig{ aspect-ratio:3/2; }
.live-grid .sel-fig img{ width:100%; height:100%; object-fit:cover; }
.live-grid .sel-desc{ font-size:.92rem; color:var(--ink-2); }
.live-grid .sel-avail{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--accent-ink); }
@media (max-width:900px){ .live-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .live-grid{ grid-template-columns:1fr; } }
/* track table */
.track-table{ width:100%; border-collapse:collapse; margin-top:clamp(24px,3vw,36px); font-size:.98rem; }
.track-table th{ text-align:left; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--ink-3); padding:10px 16px 12px 0; border-bottom:1px solid var(--ink); }
.track-table td{ vertical-align:top; padding:16px 16px 16px 0; border-bottom:1px solid var(--line); color:var(--ink-2); }
.track-table .tr-where{ font-family:var(--serif); font-size:1.2rem; color:var(--ink); }
.track-table .tr-src{ color:var(--ink-3); font-size:.9rem; }
/* contact */
.contact-grid{ align-items:start; }
.contact-left{ grid-column:1/7; }
.contact-left .track-list{ margin-top:clamp(20px,3vw,32px); }
.contact-left .track-list li,body.sub .track-list li{ grid-template-columns:1fr 1.6fr .9fr; }
body.sub .track-list .tl-src:empty{ display:none; }
.office{ margin-top:clamp(28px,4vw,44px); }
.office .eyebrow{ margin-bottom:10px; }
.cform{ grid-column:8/13; display:grid; gap:18px; padding:clamp(24px,3vw,40px); border:1px solid var(--line); }
.cform .eyebrow{ margin-bottom:4px; }
.cform-two{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
/* width+min-width are load-bearing (ZenTao #579): without them a long value
   lets the input's intrinsic width blow the grid track open — the text and
   its underline drew past the card edge and long input was clipped. */
.find-field{ min-width:0; }
.find-field input,.find-field textarea{ width:100%; min-width:0; font:400 1rem var(--sans); color:var(--ink); background:var(--paper); border:0; border-bottom:1px solid var(--ink); padding:12px 0; border-radius:0; }
.find-field textarea{ resize:vertical; }
.find-field input:focus,.find-field textarea:focus,.find-field select:focus{ outline:none; border-bottom:2px solid var(--accent-ink); }
.cform .btn{ justify-self:start; }
@media (max-width:900px){ .contact-left,.cform{ grid-column:1/13; } .cform{ margin-top:32px; } }


/* ==== v8 ==================================================================== */
/* the monogram: the Motor Tides signature — the number and the street set huge,
   the photograph showing through the letters, the same photograph washed to
   white around them */
.mono{ position:relative; min-height:100svh; min-height:var(--vh100); display:grid; align-content:end; overflow:hidden; background:#fff; isolation:isolate; padding-bottom:clamp(28px,5vh,56px); }
.mono-bg,.mono-type{ position:absolute; inset:0; background-image:url(../assets/img/wr11.jpg); background-size:cover; background-position:50% 50%; }
.mono-bg{ z-index:0; opacity:.22; filter:saturate(.7); }
.mono-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom,rgba(255,255,255,.1),rgba(255,255,255,.55)); }
.mono-type{ z-index:1; display:grid; align-content:center; justify-items:center; text-align:center; -webkit-background-clip:text; background-clip:text; color:transparent; font-family:var(--display); font-weight:var(--display-weight); line-height:.86; letter-spacing:-.03em; padding:0 var(--pad); }
.mono-type b{ font-weight:var(--display-weight); font-size:min(36vw,58vh); }
.mono-type span{ display:block; font-size:min(9.2vw,15vh); letter-spacing:.06em; text-transform:uppercase; line-height:1; margin-top:-.02em; }
.mono-foot{ position:relative; z-index:2; margin:0; font-family:var(--serif); font-style:italic; font-size:clamp(1.05rem,1.5vw,1.4rem); color:var(--ink); }
/* the map chapter: the portfolio as a place. The map fills the screen; the
   seven areas sit on a white panel over it; hover lights that area's dots. */
.mapch{ position:relative; min-height:100svh; min-height:var(--vh100); background:var(--paper-2); isolation:isolate; display:grid; align-items:center; padding:calc(var(--hd-h) + 3vh) var(--pad) 6vh; }
.mapch .mapbox{ position:absolute; inset:0; height:auto; margin:0; --map-tint:#F2F3F1; }
.map-panel{ position:relative; z-index:2; width:min(100%,460px); background:rgba(255,255,255,.94); backdrop-filter:blur(10px); padding:clamp(24px,3vw,40px); box-shadow:0 30px 80px rgba(9,45,52,.16); display:grid; gap:0; }
.map-panel .display{ margin-top:10px; font-size:clamp(1.8rem,2.6vw,2.6rem); }
.area-rows{ list-style:none; margin:clamp(16px,2vw,26px) 0 0; padding:0; border-top:1px solid var(--line); }
.area-rows a{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:16px; padding:12px 0; border-bottom:1px solid var(--line); color:var(--ink); transition:padding-left .35s var(--ease),color .3s; }
.area-rows a span{ grid-column:1; font-family:var(--serif); font-size:clamp(1.15rem,1.5vw,1.4rem); line-height:1.15; }
.area-rows a i{ grid-column:1; font-style:normal; font-size:.78rem; color:var(--ink-3); margin-top:2px; }
.area-rows a b{ grid-column:2; grid-row:1/3; align-self:center; font-family:var(--display); font-weight:var(--display-weight); font-size:clamp(1.6rem,2.2vw,2.2rem); color:var(--ink); }
.area-rows a:hover,.area-rows a:focus-visible,.area-rows a.lit{ padding-left:10px; color:var(--accent-ink); }
.map-panel .actions{ margin-top:clamp(18px,2vw,26px); }
.wr-map.dim .wr-pin.dot{ opacity:.22; transform:scale(.8); }
.wr-map.dim .wr-pin.dot.lit{ opacity:1; transform:scale(1.35); background:var(--accent-ink); }
.wr-map .wr-pin.dot{ transition:opacity .35s var(--ease),transform .35s var(--ease),background-color .35s; }
.mapch .wr-map .leaflet-control-zoom{ margin:0 22px 22px 0; }
@media (max-width:900px){ .mapch{ display:block; padding:0; min-height:0; } .mapch .mapbox{ position:relative; height:60svh; } .map-panel{ width:auto; box-shadow:none; } }
/* the closing block is dark, and the footer continues it */
.beat-contact{ background:var(--deep); color:var(--paper); }
.beat-contact .contact-stack .display:nth-child(1){ color:var(--paper); }
.beat-contact .contact-stack .display:nth-child(2),.beat-contact .contact-stack .display:nth-child(3){ -webkit-text-stroke:1px var(--paper); }
.beat-contact .eyebrow em,.beat-contact .body,.beat-contact .contact-tel{ color:var(--paper); }
.beat-contact .body{ color:rgba(243,240,231,.82); }
.beat-contact .btn-line{ color:var(--paper); border-color:rgba(243,240,231,.6); }
.beat-contact .btn-line:hover{ background:var(--paper); color:var(--deep); }
.btn-paper{ background:var(--paper); color:var(--deep); border-color:var(--paper); }
.btn-paper:hover{ background:#fff; }
.ft{ border-top:1px solid rgba(243,240,231,.14); }
/* the story: one line only */
.open-copy .body{ max-width:34ch; font-size:clamp(1.05rem,1.3vw,1.25rem); }
/* the chapters: one line of copy, wider */
.bleed-sub{ max-width:40ch; }
.bleed-in{ grid-template-columns:1fr; }
/* the work-place strip on work.html */
.places{ list-style:none; margin:clamp(24px,3vw,40px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,24px); }
.places li{ display:grid; gap:8px; }
.places figure{ margin:0; overflow:hidden; aspect-ratio:4/3; background:var(--paper-2); }
.places figure img{ width:100%; height:100%; object-fit:cover; }
.places b{ font-family:var(--serif); font-weight:400; font-size:1.25rem; color:var(--ink); }
.places span{ font-size:.9rem; color:var(--ink-3); }
.places .place-need figure{ display:grid; place-items:center; border:1px dashed var(--line); background:repeating-linear-gradient(135deg,rgba(20,73,82,.05) 0 10px,transparent 10px 20px); color:var(--ink-3); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; }
.places .place-need figure i{ font-style:normal; }
@media (max-width:760px){ .places{ grid-template-columns:1fr 1fr; } }
/* the map panel must fit a short viewport */
.map-panel{ max-height:calc(100svh - var(--hd-h) - 8vh); overflow:auto; }
@media (max-height:820px){ .map-panel{ padding:20px 24px; } .map-panel .display{ font-size:clamp(1.5rem,2.2vw,2rem); } .area-rows a{ padding:7px 0; } .area-rows a span{ font-size:1.05rem; } .area-rows a i{ font-size:.72rem; } .area-rows a b{ font-size:1.4rem; } .map-panel .actions{ margin-top:14px; } }


/* ==== v9 ==================================================================== */
/* the story headline: three lines, never four */
.open-copy .story-h{ font-size:clamp(2.2rem,min(4.1vw,7.4vh),5.6rem); max-width:none; }
/* what we do: drawings on blueprint paper */
.moves-draw{ background:
  linear-gradient(rgba(20,73,82,.05) 1px,transparent 1px) 0 0/24px 24px,
  linear-gradient(90deg,rgba(20,73,82,.05) 1px,transparent 1px) 0 0/24px 24px, #FBFBF9;
  padding:clamp(22px,2.6vw,36px); border:1px solid var(--line); gap:clamp(22px,2.6vw,40px); }
.moves-draw .mv{ position:relative; }
.moves-draw .draw{ margin:0 0 12px; aspect-ratio:4/3; display:grid; place-items:center; color:var(--ink); background:#fff; border:1px solid var(--line); padding:14px; overflow:hidden; }
.moves-draw .draw svg{ width:100%; height:100%; }
.moves-draw .draw-img{ position:relative; padding:12px 12px 32px; }
.moves-draw .draw-img img{ width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; opacity:.9; }
.moves-draw .draw-img figcaption{ position:absolute; left:0; right:0; bottom:8px; text-align:center; font-size:.5rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); font-weight:600; }
.moves-draw .mv-no{ font-family:var(--serif); font-style:italic; color:var(--ink-3); }
.moves-draw .mv + .mv::before{ content:""; position:absolute; left:calc(-1 * clamp(11px,1.3vw,20px)); top:0; bottom:0; border-left:1px dashed rgba(20,73,82,.22); }
@media (max-width:900px){ .moves-draw .mv + .mv::before{ display:none; } }
/* the bright chapter: less scrim, the number as the title */
.bleed-bright .bleed-scrim{ background:linear-gradient(to top,rgba(9,45,52,.62) 0%,rgba(9,45,52,.28) 36%,rgba(9,45,52,.02) 62%,rgba(9,45,52,.10) 100%); }
.bleed-title-num{ display:grid; max-width:none; }
.bleed-title-num b{ font-weight:var(--display-weight); font-size:clamp(5rem,min(16vw,26vh),15rem); line-height:.86; letter-spacing:-.03em; }
.bleed-title-num span{ display:block; font-size:clamp(2rem,min(4.2vw,7vh),4.4rem); line-height:1.04; margin-top:.2em; max-width:16ch; }
/* the timeline */
.beat-time{ padding-top:var(--beat); padding-bottom:var(--beat); }
.timeline{ list-style:none; margin:clamp(32px,5vw,64px) 0 0; padding:clamp(28px,3vw,40px) 0 0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:24px; position:relative; }
.timeline::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--ink); }
.timeline li{ position:relative; display:grid; gap:8px; align-content:start; padding-right:16px; }
.timeline li::before{ content:""; position:absolute; left:0; top:calc(-1 * clamp(28px,3vw,40px) - 6px); width:11px; height:11px; border-radius:50%; background:var(--ink); box-shadow:0 0 0 3px #fff; }
.timeline li.tl-open::before{ background:#fff; border:1px solid var(--ink); }
.timeline b{ font-family:var(--display); font-weight:var(--display-weight); font-size:clamp(2.2rem,4vw,3.6rem); line-height:1; color:var(--ink); letter-spacing:-.02em; }
.timeline span{ font-size:.95rem; color:var(--ink-2); max-width:24ch; }
.timeline i{ font-style:italic; font-family:var(--serif); color:var(--ink-3); }
.timeline i.chip{ font-style:normal; font-family:var(--sans); }
@media (max-width:900px){ .timeline{ grid-template-columns:1fr 1fr; } }
.bleed-title-num b{ line-height:.98; }
.bleed-bright .bleed-label{ margin-bottom:0; }
.timeline i.chip{ justify-self:start; }

/* the fourth tile is the one photograph: the real sign, zoomed to the phone number */
.moves-draw .draw-sign{ padding:0; position:relative; }
.moves-draw .draw-sign img{ width:100%; height:100%; object-fit:cover; }
.moves-draw .draw-sign figcaption{ position:absolute; left:0; right:0; bottom:0; padding:8px; text-align:center; font-size:.5rem; letter-spacing:.1em; text-transform:uppercase; color:#fff; font-weight:600; background:linear-gradient(to top,rgba(9,45,52,.7),rgba(9,45,52,0)); z-index:2; }
.moves-draw .draw-sign.grade::after{ z-index:1; }

/* ==== v10: the 72 and the map are one screen. The map is the background,
   washed to white on the left where the number and the seven areas sit. ==== */
.mapch{ background:#F4F5F3; }
.mapch .mapbox{ --map-tint:#F4F5F3; }
.mapch::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.9) 30%,rgba(255,255,255,.55) 46%,rgba(255,255,255,0) 62%); }
.map-panel{ background:none; backdrop-filter:none; box-shadow:none; padding:0; width:min(100%,520px); max-height:none; overflow:visible; }
.map-h{ margin:6px 0 0; font-family:var(--display); font-weight:var(--display-weight); color:var(--ink); letter-spacing:-.02em; display:grid; }
.map-h b{ font-weight:var(--display-weight); font-size:clamp(5.5rem,min(15vw,24vh),13rem); line-height:.9; letter-spacing:-.04em; }
.map-h span{ display:block; font-size:clamp(1.4rem,min(2.2vw,3.6vh),2.2rem); line-height:1.15; margin-top:.35em; max-width:22ch; }
.area-rows{ margin-top:clamp(18px,2.6vh,30px); border-top-color:rgba(20,73,82,.3); }
.area-rows a{ padding:8px 0; }
.area-rows a span{ font-size:clamp(1.05rem,1.3vw,1.25rem); }
.area-rows a i{ font-size:.74rem; }
.area-rows a b{ font-size:clamp(1.4rem,1.9vw,1.9rem); }
.map-panel .actions{ margin-top:clamp(14px,2vh,22px); }
@media (max-height:820px){ .map-h b{ font-size:min(15vw,20vh); } .area-rows a{ padding:5px 0; } .area-rows a i{ display:none; } }
@media (max-width:900px){ .mapch::before{ display:none; } .map-panel{ padding:24px var(--pad); } }

/* ==== v10: the timeline, to scale ============================================ */
.timeline-wrap{ position:relative; margin-top:clamp(40px,6vw,80px); height:clamp(300px,36vh,380px); }
.tl-ticks{ position:absolute; left:0; right:0; top:50%; height:1px; background:var(--ink); }
.tl-ticks i{ position:absolute; left:var(--x); top:-5px; width:1px; height:11px; background:rgba(20,73,82,.5); }
.tl-ticks i em{ position:absolute; left:6px; top:14px; font-style:normal; font-family:var(--sans); font-size:.62rem; letter-spacing:.14em; color:var(--ink-3); }
.timeline{ position:static; margin:0; padding:0; display:block; border:0; height:100%; }
.timeline::before{ display:none; }
.timeline li{ position:absolute; left:var(--x); width:min(220px,22vw); display:grid; gap:4px; padding:0; }
.timeline li::before{ content:""; position:absolute; left:0; width:11px; height:11px; border-radius:50%; background:var(--ink); box-shadow:0 0 0 3px #fff; top:auto; }
.timeline li::after{ content:""; position:absolute; left:5px; width:1px; background:rgba(20,73,82,.5); }
.timeline li.above{ bottom:calc(50% + 34px); }
.timeline li.above::before{ bottom:-40px; }
.timeline li.above::after{ bottom:-30px; height:26px; }
.timeline li.below{ top:calc(50% + 34px); }
.timeline li.below::before{ top:-40px; }
.timeline li.below::after{ top:-30px; height:26px; }
.timeline li.open::before{ background:#fff; border:1px solid var(--ink); }
.timeline b{ font-size:clamp(2rem,3.4vw,3rem); }
.timeline span{ font-size:.9rem; line-height:1.45; }
.timeline i.chip{ justify-self:start; margin-top:2px; }
@media (max-width:900px){ .timeline-wrap{ height:auto; margin-top:32px; } .tl-ticks{ display:none; } .timeline{ display:grid; gap:20px; } .timeline li{ position:static; width:auto; padding-left:22px; } .timeline li::before{ top:8px !important; bottom:auto !important; } .timeline li::after{ display:none; } }

/* ==== v11 ================================================================= */
.timeline li[data-end]{ transform:translateX(-100%); text-align:right; justify-items:end; }
.timeline li[data-end]::before{ left:auto; right:0; }
.timeline li[data-end]::after{ left:auto; right:5px; }
.contact-h{ margin-bottom:clamp(32px,6vh,72px); }
.beat-contact .contact-h{ color:var(--paper); }
.beat-com{ padding-top:clamp(40px,6vh,72px); padding-bottom:clamp(40px,6vh,72px); border-top:1px solid var(--line); }
.com-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.com-head .display b{ font-weight:var(--display-weight); }
.com-card{ display:grid; gap:8px; color:inherit; }
.com-go{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--accent-ink); margin-top:2px; }

/* ==== v12 · THE ATLAS ======================================================
   A vector map of the company (no tiles, no lag): paper, a faint street grid,
   the coast, three freeways, 72 dots. It is the still the film lands as, and
   the sticky right half of the atlas section, where scrolling draws the dots,
   lights the areas, and flies to Motor Avenue and to the office. ============ */
.atlas-still{ display:block; background:#F6F7F5; object-fit:unset; }
.atlas-still svg{ width:100%; height:100%; display:block; }
.atlas{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:clamp(24px,4vw,64px); padding:0 var(--pad); background:#fff; }
.atlas-steps{ grid-column:1; }
.atlas-step{ min-height:100svh; min-height:var(--vh100); display:grid; align-content:center; gap:clamp(12px,1.6vh,20px); padding:calc(var(--hd-h) + 2vh) 0 6vh; }
.atlas-step .body{ max-width:38ch; }
.atlas-step .area-rows{ margin-top:6px; }
.atlas-map{ grid-column:2; grid-row:1; position:sticky; top:0; height:100svh; height:var(--vh100); background:#F6F7F5; overflow:hidden; }
.atlas-map > svg.atlas-svg{ width:100%; height:100%; display:block; }
/* the drawing */
.atlas-svg{ font-family:var(--sans); }
.atlas-svg .grid line{ stroke:rgba(20,73,82,.07); stroke-width:.5; }
.atlas-svg .sea{ fill:#EDF1F0; }
.atlas-svg .coast{ fill:none; stroke:rgba(20,73,82,.35); stroke-width:1.2; }
.atlas-svg .fwy{ fill:none; stroke:rgba(20,73,82,.16); stroke-width:1.6; }
.atlas-svg .fwy-l{ font-size:4.5px; fill:rgba(20,73,82,.45); letter-spacing:.08em; }
.atlas-svg .place{ font-size:5.5px; fill:rgba(20,73,82,.55); letter-spacing:.14em; text-transform:uppercase; }
.atlas-svg .area-l{ font-family:var(--serif); font-style:italic; font-size:7.5px; fill:var(--ink); opacity:0; transition:opacity .5s var(--ease); }
.atlas-svg .dot{ fill:var(--ink); stroke:#fff; stroke-width:.9; opacity:0; transform:scale(.2); transform-box:fill-box; transform-origin:center; transition:opacity .45s var(--ease),transform .45s var(--ease),fill .3s; cursor:pointer; }
.atlas-svg .dot.in{ opacity:1; transform:scale(1); }
.atlas-svg.dim .dot.in{ opacity:.22; }
.atlas-svg.dim .dot.in.lit,.atlas-svg .dot.in.lit{ opacity:1; fill:var(--accent-ink); transform:scale(1.5); }
.atlas-svg .dot.in:hover{ fill:var(--accent-ink); transform:scale(1.6); }
.atlas-svg.areas .area-l{ opacity:1; }
.atlas-svg .proj{ opacity:0; transition:opacity .5s var(--ease); }
.atlas-svg.corridor .proj{ opacity:1; }
.atlas-svg .proj rect{ fill:none; stroke:var(--accent-ink); stroke-width:.25; }
.atlas-svg .proj rect.built{ fill:var(--accent-ink); fill-opacity:.9; }
.atlas-svg .proj rect.leasing{ fill:var(--accent-ink); fill-opacity:.45; }
.atlas-svg .proj rect.filed{ stroke-dasharray:.4 .4; }
.atlas-svg .proj text{ font-size:1.1px; fill:var(--ink); letter-spacing:.08em; }
.atlas-svg .office{ opacity:0; transition:opacity .5s var(--ease); }
.atlas-svg.office .office{ opacity:1; }
.atlas-svg .office circle{ fill:#fff; stroke:var(--ink); stroke-width:.6; }
.atlas-svg .office text{ font-size:2.4px; fill:var(--ink); letter-spacing:.1em; }
.atlas-svg.office .dot.in{ opacity:.9; }
.atlas-svg .ring{ fill:none; stroke:var(--ink); stroke-width:.5; stroke-dasharray:2 2; opacity:0; transition:opacity .5s; }
.atlas-svg.office .ring{ opacity:.6; }
/* the head-up count in the corner of the map, and the tooltip */
.atlas-hud{ position:absolute; left:clamp(16px,2vw,28px); bottom:clamp(16px,2vw,28px); z-index:2; display:grid; gap:0; pointer-events:none; }
.atlas-hud b{ font-family:var(--display); font-weight:var(--display-weight); font-size:clamp(3rem,6vw,5.5rem); line-height:.9; color:var(--ink); letter-spacing:-.03em; }
.atlas-hud span{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--ink-3); margin-top:6px; }
.atlas-tip{ position:absolute; z-index:3; background:#fff; color:var(--ink); padding:10px 14px; box-shadow:0 14px 40px rgba(9,45,52,.18); font-size:.86rem; pointer-events:none; transform:translate(-50%,calc(-100% - 14px)); white-space:nowrap; }
.atlas-tip b{ display:block; font-family:var(--serif); font-size:1.05rem; font-weight:400; }
.atlas-tip i{ font-style:normal; color:var(--ink-3); font-size:.78rem; }
.open-land.atlas-still{ position:absolute; inset:0; }
@media (max-width:900px){ .atlas{ grid-template-columns:1fr; } .atlas-map{ grid-column:1; grid-row:1; position:relative; height:60svh; } .atlas-steps{ grid-column:1; grid-row:2; } .atlas-step{ min-height:0; padding:40px 0; } }
.atlas-svg.corridor .dot.in,.atlas-svg.office .dot.in{ stroke-width:.5; }
.atlas-svg.corridor .dot.in{ r:1.1; }
.atlas-svg.office .dot.in{ r:1.6; }
.atlas-svg.corridor .grid line{ stroke-width:.15; }
.atlas-svg.corridor .fwy{ stroke-width:.6; }
.atlas-svg.corridor .place,.atlas-svg.corridor .fwy-l,.atlas-svg.corridor .area-l{ display:none; }
.atlas-svg.office .place,.atlas-svg.office .fwy-l{ display:none; }
.atlas-svg.office .grid line{ stroke-width:.25; }
.atlas-svg.office .fwy{ stroke-width:.9; }

/* strokes stay hairline at every zoom */
.atlas-svg .grid line,.atlas-svg .coast,.atlas-svg .fwy,.atlas-svg .ring,.atlas-svg .proj rect,.atlas-svg .dot,.atlas-svg .office circle{ vector-effect:non-scaling-stroke; }
.atlas-svg .grid line{ stroke-width:.7px; }
.atlas-svg .coast{ stroke-width:1.2px; }
.atlas-svg .fwy{ stroke-width:2px; }
.atlas-svg .ring{ stroke-width:1px; stroke-dasharray:4 4; }
.atlas-svg .proj rect{ stroke-width:1.2px; }
.atlas-svg .proj rect.filed{ stroke-dasharray:3 3; }
.atlas-svg .dot,.atlas-svg.corridor .dot.in,.atlas-svg.office .dot.in{ stroke-width:1.5px; }
.atlas-svg .office circle{ stroke-width:1.2px; }
.atlas-svg.corridor .grid line,.atlas-svg.office .grid line{ stroke-width:.7px; }
.atlas-svg.corridor .fwy,.atlas-svg.office .fwy{ stroke-width:2px; }
.atlas-svg.corridor .dot.in{ r:.7; }
.atlas-svg.office .dot.in{ r:.9; }
.atlas-svg .office text{ font-size:1.7px; }
.atlas-svg .proj text{ font-size:1.05px; }
.atlas-svg.areas .place,.atlas-svg.areas .fwy-l{ display:none; }
.atlas-svg .area-l{ paint-order:stroke; stroke:#F6F7F5; stroke-width:2.5px; stroke-linejoin:round; }
.atlas-svg.dim .area-l{ opacity:.25; }
.atlas-svg.dim .area-l.lit{ opacity:1; fill:var(--accent-ink); }
.atlas-still .dot{ r:1.3; }
.atlas-svg .area-l{ font-size:6.5px; }

/* who we are: the mission line and the four notes sit under the headline, the photo on the right */
.beat-who .who-head{ grid-column:1/8; }
.beat-who .who-head .body{ max-width:54ch; }
.beat-who .who-fig-a{ grid-column:9/13; grid-row:1; align-self:start; margin-top:clamp(20px,5vh,64px); }
.mission{ grid-column:1/8; grid-row:2; margin-top:clamp(28px,4vh,56px); display:grid; gap:12px; }
.mission-q{ margin:0; }
.mission-q p{ font-family:var(--display); font-weight:var(--display-weight); font-size:clamp(1.9rem,3vw,3rem); line-height:1.08; color:var(--ink); letter-spacing:-.02em; }
.mission .body{ max-width:54ch; }
.beat-who .culture-list{ grid-column:9/13; grid-row:2; margin-top:clamp(28px,4vh,56px); }
@media (max-width:900px){ .beat-who .who-head,.beat-who .who-fig-a,.mission,.beat-who .culture-list{ grid-column:1/13; grid-row:auto; } }
.atlas-svg .street{ fill:none; stroke:rgba(20,73,82,.4); stroke-width:1.4px; vector-effect:non-scaling-stroke; }
.atlas-svg .street-l{ font-size:1px; fill:rgba(20,73,82,.6); letter-spacing:.14em; }

/* what we do, in words */
.beat-what{ padding-top:var(--beat); padding-bottom:var(--beat); }
.moves-words{ list-style:none; margin:clamp(32px,4vw,56px) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(20px,2.4vw,36px); border-top:1px solid var(--ink); }
.moves-words li{ padding-top:22px; display:grid; gap:10px; align-content:start; }
.moves-words b{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--ink-3); font-size:1rem; }
.moves-words h3{ margin:0; font-family:var(--display); font-weight:var(--display-weight); font-size:clamp(1.6rem,2.2vw,2.2rem); color:var(--ink); letter-spacing:-.015em; }
.moves-words p{ margin:0; font-size:.98rem; line-height:1.65; color:var(--ink-2); }
@media (max-width:900px){ .moves-words{ grid-template-columns:1fr 1fr; } }

/* what we do: four rows on the left, one picture on the right that follows */
.what-grid{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr); column-gap:clamp(24px,4vw,64px); margin-top:clamp(28px,4vw,52px); align-items:start; }
.what-rows{ list-style:none; margin:0; padding:0; border-top:1px solid var(--ink); }
.what-rows li{ display:grid; grid-template-columns:auto 1fr; column-gap:22px; row-gap:8px; padding:clamp(22px,3.4vh,40px) 0; border-bottom:1px solid var(--line); cursor:default; transition:padding-left .4s var(--ease); min-height:clamp(120px,22vh,200px); align-content:center; }
.what-rows li b{ grid-row:1/3; font-family:var(--serif); font-style:italic; font-weight:400; color:var(--ink-3); font-size:1rem; padding-top:.5em; }
.what-rows li h3{ margin:0; font-family:var(--display); font-weight:var(--display-weight); font-size:clamp(1.7rem,2.6vw,2.6rem); color:var(--ink); letter-spacing:-.015em; transition:color .3s; }
.what-rows li p{ margin:0; max-width:40ch; font-size:.98rem; line-height:1.65; color:var(--ink-2); }
.what-rows li.on{ padding-left:12px; }
.what-rows li.on h3{ color:var(--accent-ink); }
.what-fig{ position:sticky; top:calc(var(--hd-h) + 3vh); aspect-ratio:4/5; max-height:calc(100svh - var(--hd-h) - 6vh); overflow:hidden; background:var(--paper-2); }
.what-fig figure{ position:absolute; inset:0; margin:0; opacity:0; transition:opacity .7s var(--ease); }
.what-fig figure.on{ opacity:1; }
.what-fig figure img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); display:block; }
.what-fig figure.draw-paper{ background:linear-gradient(rgba(20,73,82,.06) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(20,73,82,.06) 1px,transparent 1px) 0 0/24px 24px,#FBFBF9; display:grid; place-items:center; padding:8%; }
.what-fig figure.draw-paper img{ object-fit:contain; mix-blend-mode:multiply; opacity:.92; }
.what-fig figcaption{ position:absolute; left:0; right:0; bottom:0; padding:14px 18px; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:#fff; background:linear-gradient(to top,rgba(9,45,52,.6),rgba(9,45,52,0)); z-index:2; }
.what-fig figure.draw-paper figcaption{ color:var(--ink); background:none; }
.what-fig figure.grade::after{ z-index:1; }
@media (max-width:900px){ .what-grid{ grid-template-columns:1fr; } .what-fig{ position:relative; top:auto; aspect-ratio:4/3; margin-top:24px; } }

/* ==== v13 · OUR COMMUNITIES, pinned ======================================
   The runway is eight steps tall (all + seven areas). The stage is sticky:
   left column fixed, the real map on the right flies area by area. ========= */
.atlas{ display:block; height:calc(100svh + 8 * 62svh); padding:0; background:#fff; }
.atlas-stage{ position:sticky; top:0; height:100svh; height:var(--vh100); display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:clamp(24px,4vw,64px); padding:0 0 0 var(--pad); overflow:hidden; }
.atlas-left{ align-self:center; padding:calc(var(--hd-h) + 2vh) 0 4vh; display:grid; gap:0; max-width:520px; }
.atlas-map{ position:relative; height:100%; margin:0; --map-tint:#F2F3F1; }
.atlas .map-h{ margin-top:8px; }
.atlas .map-h b{ font-size:clamp(5rem,min(13vw,22vh),11rem); line-height:.9; transition:opacity .3s; }
.atlas .map-h b.swap{ opacity:0; }
.atlas .map-h span{ font-size:clamp(1.25rem,min(1.9vw,3.2vh),1.9rem); max-width:24ch; min-height:2.3em; }
.atlas .area-rows{ margin-top:clamp(14px,2.2vh,26px); }
.atlas .area-rows a{ padding:7px 0; }
.atlas .area-rows a span{ font-size:clamp(1rem,1.25vw,1.2rem); }
.atlas .area-rows a i{ font-size:.72rem; }
.atlas .area-rows a b{ font-size:clamp(1.3rem,1.8vw,1.8rem); }
.atlas .area-rows a.lit{ padding-left:12px; color:var(--accent-ink); }
.atlas .area-rows a.lit b{ color:var(--accent-ink); }
.atlas .actions{ margin-top:clamp(14px,2vh,22px); }
.atlas-map .wr-pin.dot{ transition:opacity .35s var(--ease),transform .35s var(--ease),background-color .35s; }
.atlas-map.dim .wr-pin.dot{ opacity:.25; transform:scale(.8); }
.atlas-map.dim .wr-pin.dot.lit{ opacity:1; transform:scale(1.35); background:var(--accent-ink); }
.atlas-map .leaflet-control-zoom{ display:none; }
.atlas-map .wr-map-loading{ position:absolute; left:24px; top:24px; }
@media (max-height:760px){ .atlas .area-rows a i{ display:none; } .atlas .area-rows a{ padding:5px 0; } .atlas .map-h b{ font-size:min(13vw,18vh); } }
@media (max-width:900px){ .atlas{ height:auto; } .atlas-stage{ position:relative; height:auto; grid-template-columns:1fr; padding:0 var(--pad); } .atlas-map{ height:60svh; } .atlas-left{ padding:40px 0 24px; } }

/* ==== v13 · type up a notch everywhere (user: too small) ==================== */
body{ font-size:1.0625rem; }
.body{ font-size:1.18rem; line-height:1.7; max-width:52ch; }
.fine{ font-size:.98rem; }
.eyebrow{ font-size:clamp(1.25rem,1.6vw,1.5rem); }
.culture-list dt{ font-size:1.6rem; }
.culture-list dd{ font-size:1.12rem; line-height:1.7; }
.what-rows li p{ font-size:1.12rem; }
.what-rows li h3{ font-size:clamp(1.9rem,2.8vw,2.8rem); }
.track-list li{ font-size:1.08rem; }
.timeline span{ font-size:1.05rem; }
.timeline i{ font-size:1.02rem; }
.area-rows a span{ font-size:clamp(1.15rem,1.4vw,1.35rem); }
.area-rows a i{ font-size:.86rem; }
.mv-body,.person span,.value cite,.door-card span,.press li{ font-size:1.05rem; }
.sel-meta,.sel-desc,.live-grid .sel-desc{ font-size:1.02rem; }
.mission-q p{ font-size:clamp(2.1rem,3.2vw,3.2rem); }
.bleed-sub{ font-size:clamp(1.1rem,1.3vw,1.3rem); }
.open-copy .body{ font-size:clamp(1.15rem,1.4vw,1.35rem); }
/* the full Morgan bar stays on the film: white, with a shadow; the Menu dot only below 1200px */
.hd.film .hnav,.hd.film .hd-ico,.hd.film .hd-portal{ opacity:1; visibility:visible; pointer-events:auto; }
.hd.film.inv .hnav,.hd.film.inv .hd-ico,.hd.film.inv .hd-portal{ color:#fff; text-shadow:0 1px 3px rgba(9,45,52,.55); }
.hd.film.inv .hd-portal{ border-color:rgba(255,255,255,.85); }
.hd.film.inv .hn-sub{ color:var(--ink); text-shadow:none; }
@media (min-width:1200px){ .hd.film .hd-right .mbtn{ display:none !important; } }
/* about pages: the photo spans both rows so the notes sit under the headline with no gap */
body.sub .beat-who .who-fig-a{ grid-row:1/3; margin-top:0; }
body.sub .beat-who .culture-list{ grid-column:1/8; grid-row:2; margin-top:clamp(24px,3vh,40px); }
/* the live page: list left, map right, sticky */
.live-layout{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr); column-gap:clamp(24px,3vw,48px); align-items:start; padding:0 var(--pad); }
.live-layout[hidden],.live-status[hidden],.live-status [hidden],[data-ls-summary][hidden]{ display:none !important; }
.live-status{ margin:24px 0; padding:24px; background:var(--paper); border:1px solid var(--line); }
.live-status p{ margin:0 0 14px; }
.live-status p:only-child{ margin-bottom:0; }
.live-search{ scroll-margin-top:104px; }
.live-list{ min-width:0; }
.live-list .wrap{ padding:0; }
.live-list .beat-com{ padding-top:clamp(28px,4vh,48px); padding-bottom:clamp(28px,4vh,48px); }
.live-list .live-grid{ grid-template-columns:1fr 1fr; }
.live-map{ position:sticky; top:var(--hd-h); height:calc(100svh - var(--hd-h)); margin:0; --map-tint:#F2F3F1; }
.live-map.dim .wr-pin.dot{ opacity:.3; transform:scale(.85); }
.live-map.dim .wr-pin.dot.lit{ opacity:1; transform:scale(1.5); background:var(--accent-ink); }
.live-map .wr-pin.dot{ transition:opacity .3s var(--ease),transform .3s var(--ease),background-color .3s; }
.com-card.lit .sel-name{ color:var(--accent-ink); }
.com-card{ transition:padding-left .35s var(--ease); }
.com-card.lit{ padding-left:6px; }
@media (max-width:900px){ .live-layout{ grid-template-columns:1fr; } .live-map{ position:relative; top:auto; height:60svh; order:-1; } .live-list .live-grid{ grid-template-columns:1fr; } }
.timeline-wrap{ height:clamp(360px,42vh,440px); }
.beat-time .fine{ margin-top:28px !important; }
.timeline i{ max-width:22ch; }
.atlas-map .leaflet-control-attribution,.live-map .leaflet-control-attribution{ font-size:10px; opacity:.7; }

/* ==== v14 ================================================================== */
/* who we are: one line of mission under the paragraph */
.mission-line{ margin:clamp(14px,2vh,22px) 0 0; font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,1.8vw,1.7rem); line-height:1.3; color:var(--ink); max-width:30ch; }
.beat-who .who-fig-a{ grid-row:1/3; margin-top:0; aspect-ratio:4/5; }
.beat-who .who-fig-a img{ aspect-ratio:4/5; }
/* what we do: four photo columns */
.moves-photo{ list-style:none; margin:clamp(28px,4vw,52px) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2vw,28px); }
.moves-photo .mv{ display:grid; gap:8px; align-content:start; }
.moves-photo figure{ margin:0 0 10px; overflow:hidden; aspect-ratio:3/4; background:var(--paper-2); }
.moves-photo figure img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); transition:transform var(--t-img) var(--ease); }
.moves-photo .mv:hover figure img{ transform:scale(1.04); }
.moves-photo figure.draw-paper{ background:linear-gradient(rgba(20,73,82,.06) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(20,73,82,.06) 1px,transparent 1px) 0 0/24px 24px,#FBFBF9; padding:10%; }
.moves-photo figure.draw-paper img{ object-fit:contain; mix-blend-mode:multiply; opacity:.92; }
.moves-photo .mv-title{ font-size:clamp(1.6rem,2.1vw,2.1rem); }
.moves-photo .mv-body{ font-size:1.08rem; max-width:26ch; }
@media (max-width:900px){ .moves-photo{ grid-template-columns:1fr 1fr; } }
/* history: milestone cards on one line */
.miles{ list-style:none; margin:clamp(32px,4vw,56px) 0 0; padding:clamp(22px,3vw,34px) 0 0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(16px,2vw,28px); position:relative; }
.miles::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--ink); }
.miles li{ position:relative; display:grid; gap:6px; align-content:start; }
.miles li::before{ content:""; position:absolute; left:0; top:calc(-1 * clamp(22px,3vw,34px) - 5px); width:11px; height:11px; border-radius:50%; background:var(--ink); box-shadow:0 0 0 3px #fff; }
.miles li.mile-open::before{ background:#fff; border:1px solid var(--ink); }
.miles figure{ margin:0 0 10px; aspect-ratio:4/3; overflow:hidden; background:var(--paper-2); }
.miles figure img{ width:100%; height:100%; object-fit:cover; }
.miles li.mile-open figure{ display:grid; place-items:center; border:1px dashed var(--line); background:repeating-linear-gradient(135deg,rgba(20,73,82,.05) 0 10px,transparent 10px 20px); }
.miles li.mile-open figure i{ font-style:normal; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.miles b{ font-family:var(--display); font-weight:var(--display-weight); font-size:clamp(2rem,3vw,2.8rem); line-height:1; color:var(--ink); letter-spacing:-.02em; }
.miles span{ font-size:1.02rem; line-height:1.5; color:var(--ink-2); }
.miles i{ font-style:italic; font-family:var(--serif); color:var(--ink-3); }
.miles i.chip{ font-style:normal; font-family:var(--sans); justify-self:start; }
@media (max-width:900px){ .miles{ grid-template-columns:1fr 1fr; } }
/* work: three pictures, uneven */
.work-head{ display:flex; align-items:end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.work-strip{ display:grid; grid-template-columns:5fr 4fr 3fr; grid-template-rows:auto; gap:clamp(14px,2vw,24px); margin-top:clamp(28px,4vw,52px); align-items:end; }
.work-strip figure{ margin:0; overflow:hidden; position:relative; }
.work-strip figure img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); display:block; }
.work-strip .ws-a{ aspect-ratio:4/3; }
.work-strip .ws-b{ aspect-ratio:3/4; }
.work-strip .ws-c{ aspect-ratio:4/5; margin-bottom:12%; }
.work-strip figcaption{ position:absolute; left:0; right:0; bottom:0; padding:12px 16px; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:#fff; background:linear-gradient(to top,rgba(9,45,52,.6),rgba(9,45,52,0)); z-index:2; }
.work-strip figure.grade::after{ z-index:1; }
@media (max-width:760px){ .work-strip{ grid-template-columns:1fr 1fr; } }
/* the closing block: light, not the deep ink */
.beat-contact{ background:#F2F3F1; color:var(--ink-2); }
.beat-contact .contact-h,.beat-contact .eyebrow em,.beat-contact .contact-tel{ color:var(--ink); }
.beat-contact .body{ color:var(--ink-2); }
.beat-contact .btn-line{ color:var(--ink); border-color:var(--ink); }
.beat-contact .btn-line:hover{ background:var(--ink); color:#fff; }
.beat-contact .btn-paper{ background:var(--ink); color:#fff; border-color:var(--ink); }
/* the communities runway: shorter, so it never feels stuck */
.atlas{ height:calc(100svh + 8 * 42svh); }
/* sub pages: the bar goes solid white as soon as the hero scrolls under it */
.hd.page.solid{ background:rgba(255,255,255,.96); color:var(--ink); box-shadow:0 1px 0 var(--line); }
.hd.page.solid .brand,.hd.page.solid .hnav,.hd.page.solid .hd-right{ text-shadow:none; color:var(--ink); }
/* the film: slower, brighter */
.montage img{ filter:brightness(1.08) saturate(1.04); }
.montage img.on{ animation-duration:8.5s; }
.grade img{ filter:saturate(.9) contrast(1.04) brightness(1.01) sepia(.1); }
/* live: the map zooms to the card */
.live-map .wr-pin.dot.lit{ transform:scale(1.7); }

/* about / values: three pillars with pictures */
.pillars{ list-style:none; margin:clamp(28px,4vw,52px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.4vw,36px); }
.pillars li{ display:grid; gap:10px; align-content:start; }
.pillars figure{ margin:0 0 8px; aspect-ratio:4/3; overflow:hidden; background:var(--paper-2); }
.pillars-tall figure{ aspect-ratio:3/4; }
.pillars figure img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); }
.pillars h3{ margin:0; font-family:var(--display); font-weight:var(--display-weight); font-size:clamp(1.7rem,2.4vw,2.4rem); color:var(--ink); letter-spacing:-.015em; }
.pillars p{ margin:0; font-size:1.08rem; line-height:1.65; color:var(--ink-2); }
@media (max-width:760px){ .pillars{ grid-template-columns:1fr; } }
/* leadership: founder + org chart */
.founder{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(24px,4vw,56px); align-items:start; margin-top:18px; }
.founder .person-fig{ margin:0; aspect-ratio:4/5; position:relative; }
.founder .person-fig img{ width:100%; height:100%; object-fit:cover; }
.founder .person-fig figcaption{ position:absolute; left:12px; bottom:12px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:rgba(9,45,52,.55); padding:6px 10px; }
.founder .role{ margin:6px 0 18px; font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--ink-3); }
.org{ margin-top:clamp(28px,4vw,48px); display:grid; gap:0; justify-items:center; }
.org-top,.org-bottom{ display:grid; gap:4px; justify-items:center; text-align:center; padding:18px 28px; border:1px solid var(--ink); max-width:56ch; }
.org-top b,.org-bottom b{ font-family:var(--serif); font-weight:400; font-size:1.5rem; color:var(--ink); }
.org-top span,.org-bottom span{ font-size:.98rem; color:var(--ink-3); }
.org-row{ position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2vw,28px); width:100%; padding:36px 0; }
.org-row::before{ content:""; position:absolute; left:12.5%; right:12.5%; top:18px; height:1px; background:var(--ink); }
.org-row::after{ content:""; position:absolute; left:50%; top:0; height:18px; width:1px; background:var(--ink); }
.org-card{ position:relative; display:grid; gap:6px; padding-top:18px; }
.org-card::before{ content:""; position:absolute; left:50%; top:-18px; height:36px; width:1px; background:var(--ink); }
.org-card .person-fig{ margin:0 0 6px; aspect-ratio:4/5; display:grid; place-items:center; border:1px dashed var(--line); background:repeating-linear-gradient(135deg,rgba(20,73,82,.05) 0 10px,transparent 10px 20px); }
.org-card .person-fig i{ font-style:normal; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.org-card b{ font-family:var(--serif); font-weight:400; font-size:1.35rem; color:var(--ink); }
.org-card span{ font-size:.92rem; color:var(--ink-3); }
.org-card p{ margin:4px 0 0; font-size:.98rem; color:var(--ink-2); }
.org-bottom{ position:relative; }
.org-bottom::before{ content:""; position:absolute; left:50%; top:-36px; height:36px; width:1px; background:var(--ink); }
@media (max-width:900px){ .founder{ grid-template-columns:1fr; } .org-row{ grid-template-columns:1fr 1fr; } .org-row::before,.org-row::after,.org-card::before,.org-bottom::before{ display:none; } }
/* work: pictures, not a grid */
.places-loose{ grid-template-columns:repeat(6,minmax(0,1fr)); grid-auto-rows:auto; align-items:start; }
.places-loose li:nth-child(1){ grid-column:1/4; }
.places-loose li:nth-child(2){ grid-column:4/6; margin-top:12%; }
.places-loose li:nth-child(3){ grid-column:6/7; margin-top:24%; }
.places-loose li:nth-child(4){ grid-column:1/3; margin-top:-8%; }
.places-loose li:nth-child(5){ grid-column:3/6; }
.places-loose li:nth-child(6){ grid-column:6/7; margin-top:10%; }
.places-loose li:nth-child(1) figure{ aspect-ratio:3/2; }
.places-loose li:nth-child(2) figure{ aspect-ratio:4/5; }
.places-loose li:nth-child(3) figure,.places-loose li:nth-child(6) figure{ aspect-ratio:3/4; }
.places-loose li:nth-child(4) figure{ aspect-ratio:4/3; }
.places-loose li:nth-child(5) figure{ aspect-ratio:16/9; }
@media (max-width:900px){ .places-loose{ grid-template-columns:1fr 1fr; } .places-loose li{ grid-column:auto !important; margin-top:0 !important; } }
.founder .person-need{ display:grid; place-items:center; border:1px dashed var(--line); background:repeating-linear-gradient(135deg,rgba(20,73,82,.05) 0 10px,transparent 10px 20px); }
.founder .person-need i{ font-style:normal; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.phero{ padding-top:calc(var(--hd-h) + 10vh); }
/* the bar: tighter, so the words read as one line, not scattered */
.hd .hnav{ gap:clamp(14px,1.5vw,26px); margin-left:clamp(20px,3vw,48px); }
.hd .hnav > a,.hd .hn-item > a{ font-size:.8rem; letter-spacing:.07em; }
.hd-in{ justify-content:flex-start; }
.hd-right{ margin-left:auto; gap:clamp(10px,1.2vw,18px); }
.hd .brand b{ letter-spacing:.24em; font-size:.78rem; }
.leaders{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,3vw,48px); margin-top:clamp(24px,3vw,40px); max-width:900px; }
.leader{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:20px; align-items:start; }
.leader .person-fig{ margin:0; aspect-ratio:4/5; display:grid; place-items:center; border:1px dashed var(--line); background:repeating-linear-gradient(135deg,rgba(20,73,82,.05) 0 10px,transparent 10px 20px); }
.leader .person-fig i{ font-style:normal; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); text-align:center; }
.leader b{ display:block; font-family:var(--display); font-weight:var(--display-weight); font-size:clamp(1.6rem,2.2vw,2.2rem); color:var(--ink); letter-spacing:-.015em; }
.leader span{ display:block; margin-top:4px; font-family:var(--serif); font-style:italic; font-size:1.1rem; color:var(--ink-3); }
.leader p{ margin:12px 0 0; font-size:1.02rem; color:var(--ink-2); }
@media (max-width:760px){ .leaders{ grid-template-columns:1fr; } }
.leaders-main{ max-width:none; }
.leaders-main .leader{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(18px,2vw,32px); }
.leaders-main .leader b{ font-size:clamp(2rem,3vw,3rem); }
.beat-founder{ background:#F2F3F1; }
.founder-row{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,7fr); gap:clamp(24px,4vw,56px); align-items:center; }
.founder-row .person-fig{ margin:0; aspect-ratio:4/5; display:grid; place-items:center; border:1px dashed var(--line); background:repeating-linear-gradient(135deg,rgba(20,73,82,.05) 0 10px,transparent 10px 20px); }
.founder-row .person-fig i{ font-style:normal; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); text-align:center; }
.founder-row .display-sm{ font-size:clamp(2rem,3.4vw,3.4rem); margin:6px 0 14px; }
@media (max-width:760px){ .founder-row{ grid-template-columns:1fr; } }
.leader span .chip,.leader p .chip{ display:inline-block; font-family:var(--sans); font-style:normal; font-size:.66rem; margin-left:6px; vertical-align:middle; }

/* ==== v15 ================================================================== */
/* what we do: the drawing that builds — pinned, four steps */
.beat-build{ height:calc(100svh + 4 * 70svh); background:#fff; }
.build-stage{ position:sticky; top:0; height:100svh; height:var(--vh100); display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:clamp(24px,4vw,64px); padding:0 var(--pad); align-items:center; overflow:hidden; }
.build-left{ display:grid; gap:0; max-width:520px; }
.build-steps{ list-style:none; margin:clamp(20px,3vh,36px) 0 0; padding:0; border-top:1px solid var(--ink); }
.build-steps li{ display:grid; grid-template-columns:auto 1fr; column-gap:18px; padding:clamp(12px,1.8vh,20px) 0; border-bottom:1px solid var(--line); transition:padding-left .4s var(--ease); } /* was opacity:.42 for the inactive state — that composites the text to ~1.8:1 on white (axe color-contrast, serious). The .on state still reads: the row slides right and the h3 turns accent. Mobile already ran at opacity:1 (see the 900px block). */
.build-steps li.on{ opacity:1; padding-left:10px; }
.build-steps li b{ grid-row:1/3; font-family:var(--serif); font-style:italic; font-weight:400; color:var(--ink-3); padding-top:.4em; }
.build-steps li h3{ margin:0; font-family:var(--display); font-weight:var(--display-weight); font-size:clamp(1.5rem,2.2vw,2.2rem); color:var(--ink); letter-spacing:-.015em; }
.build-steps li.on h3{ color:var(--accent-ink); }
.build-steps li p{ margin:2px 0 0; font-size:1.02rem; color:var(--ink-2); }
.build-fig{ aspect-ratio:600/460; max-height:calc(100svh - var(--hd-h) - 6vh); width:100%; justify-self:center; background:linear-gradient(rgba(20,73,82,.05) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(20,73,82,.05) 1px,transparent 1px) 0 0/24px 24px,#FBFBF9; border:1px solid var(--line); }
.bld{ width:100%; height:100%; display:block; }
.bld .dr{ fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--p,0)); vector-effect:non-scaling-stroke; }
.bld .dr.thin{ stroke-width:1; stroke:rgba(20,73,82,.55); }
.bld .dr.dash{ stroke-dasharray:.02 .015; stroke-dashoffset:0; opacity:var(--p,0); }
.bld .tx{ font-family:var(--sans); font-size:9px; letter-spacing:.14em; fill:var(--ink); font-weight:600; opacity:var(--p,0); transition:opacity .3s; }
.bld .tx.sm{ font-size:6px; letter-spacing:.08em; }
.bld .fl{ fill:#fff; fill-opacity:calc(var(--p,0) * .96); stroke:none; }
.bld .win rect{ fill:var(--ink); fill-opacity:calc(var(--p,0) * .16); stroke:var(--ink); stroke-width:1; stroke-opacity:var(--p,0); }
.bld .fl.entry{ fill:var(--accent-ink); fill-opacity:calc(var(--p,0) * .85); }
.bld .fl.sign{ fill:#fff; fill-opacity:var(--p,0); }
.bld .bar{ fill:var(--logo,#1C6775); fill-opacity:var(--p,0); }
.bld .stg-build.done .dr{ stroke:rgba(20,73,82,.18); }
@media (max-width:900px){ .beat-build{ height:auto; } .build-stage{ position:relative; height:auto; grid-template-columns:1fr; padding:40px var(--pad); } .build-fig{ max-height:none; margin-top:24px; } .build-steps li{ opacity:1; } .bld .stg{ --p:1 !important; } }
/* work on the home: two equal photographs */
.work-two{ grid-template-columns:1fr 1fr; align-items:stretch; }
.work-two figure{ aspect-ratio:4/3; margin:0; }
/* the closing: one row */
.contact-row2{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(24px,4vw,64px); align-items:end; }
.contact-row2 .contact-h{ margin:0 0 14px; font-size:clamp(2.6rem,5vw,5rem); }
.contact-row2 .body{ max-width:44ch; }
.contact-row2 .contact-do{ justify-items:end; text-align:right; }
.contact-row2 .contact-do .actions{ justify-content:flex-end; }
@media (max-width:900px){ .contact-row2{ grid-template-columns:1fr; } .contact-row2 .contact-do{ justify-items:start; text-align:left; } }
/* sub pages: the bar is white over the hero, no matter what */
.hd.page:not(.solid):not(.frost){ color:#fff; }
.hd.page:not(.solid):not(.frost) .brand,.hd.page:not(.solid):not(.frost) .hnav,.hd.page:not(.solid):not(.frost) .hd-right{ color:#fff; text-shadow:0 1px 3px rgba(9,45,52,.5); }
.hd.page:not(.solid):not(.frost) .hd-portal{ border-color:rgba(255,255,255,.85); }
.hd.page .hn-sub{ color:var(--ink); text-shadow:none; }
/* live page map: calmer */
.live-map .wr-pin.dot{ transition:opacity .3s var(--ease),transform .3s var(--ease),background-color .3s; }
.live-map .wr-pin.dot.hot{ opacity:1 !important; transform:scale(1.9) !important; background:var(--accent-ink) !important; z-index:5; }
.bld .stg .ephem{ opacity:calc(1 - var(--gone,0)); transition:opacity .3s; }
.bld .stg-build{ opacity:calc(1 - .82 * var(--gone,0)); }
.bld .stg-develop .dr,.bld .stg-develop .tx{ transition:opacity .3s; }
.beat-who .who-fig-a{ aspect-ratio:4/5; }
.beat-who .who-fig-a img{ aspect-ratio:4/5; object-position:var(--pos,50% 50%); }

/* ==== v16 ================================================================== */
/* the closing is the footer: one deep block, the call to action on top */
.ft{ padding-top:clamp(64px,10vh,120px); }
.ft-top{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(24px,4vw,64px); align-items:end; padding-bottom:clamp(40px,6vh,72px); margin-bottom:clamp(40px,6vh,72px); border-bottom:1px solid rgba(243,240,231,.16); }
.ft-eyebrow{ margin-bottom:12px; }
.ft-eyebrow em{ color:rgba(243,240,231,.7); }
.ft-h{ margin:0; color:var(--paper); font-size:clamp(2.8rem,6vw,6rem); line-height:1; letter-spacing:-.02em; white-space:nowrap; }
.ft-cta{ display:grid; gap:18px; justify-items:end; text-align:right; }
.ft-tel{ font-family:var(--display); font-weight:var(--display-weight); font-size:clamp(1.9rem,3.4vw,3.2rem); color:var(--paper); letter-spacing:-.02em; line-height:1; }
.ft-cta .actions{ justify-content:flex-end; margin:0; }
.ft-cta .btn-line{ color:var(--paper); border-color:rgba(243,240,231,.6); }
.ft-cta .btn-line:hover{ background:var(--paper); color:var(--deep); }
.ft-cta .btn-paper{ background:var(--paper); color:var(--deep); border-color:var(--paper); }
@media (max-width:900px){ .ft-top{ grid-template-columns:1fr; } .ft-cta{ justify-items:start; text-align:left; } .ft-cta .actions{ justify-content:flex-start; } .ft-h{ white-space:normal; } }
/* the bar never clips: the brand and every item keep their width; when the bar cannot fit, it folds to the Menu dot */
.hd .brand{ flex-shrink:0; }
.hd .hnav > a,.hd .hn-item{ flex-shrink:0; }
.hd-right{ flex-shrink:0; }
.hd.fold .hnav,.hd.fold .hd-ico,.hd.fold .hd-portal{ display:none !important; }
.hd.fold .hd-right .mbtn{ display:inline-flex !important; }
/* ==== v17 · the brief: upscale, grand, BRIGHT and sunny. No sepia, no dimming. ==== */
.grade img{ filter:saturate(1.06) contrast(1.03) brightness(1.04); }
.grade::after{ background:linear-gradient(180deg,rgba(255,236,200,.06),rgba(255,255,255,0)); mix-blend-mode:soft-light; }
.montage img{ filter:brightness(1.1) saturate(1.08) contrast(1.02); }
.open-scrim{ background:linear-gradient(to bottom,rgba(9,45,52,.30) 0%,rgba(9,45,52,.08) 10%,rgba(9,45,52,0) 20%),linear-gradient(to top,rgba(9,45,52,.36) 0%,rgba(9,45,52,.08) 30%,rgba(9,45,52,0) 52%); }
.bleed-scrim{ background:linear-gradient(to top,rgba(9,45,52,.66) 0%,rgba(9,45,52,.30) 34%,rgba(9,45,52,.04) 60%,rgba(9,45,52,.14) 100%); }
.phero .bleed-scrim{ background:linear-gradient(to top,rgba(9,45,52,.62) 0%,rgba(9,45,52,.26) 40%,rgba(9,45,52,.04) 66%,rgba(9,45,52,.18) 100%); }

/* who we are: the missing photograph, named */
.who-need{ aspect-ratio:4/5; }
.need-tile{ width:100%; height:100%; display:grid; align-content:center; gap:12px; padding:clamp(24px,3vw,40px); border:1px dashed var(--line); background:repeating-linear-gradient(135deg,rgba(20,73,82,.05) 0 10px,transparent 10px 20px); text-align:center; }
.need-tile i{ font-style:normal; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.need-tile b{ font-family:var(--display); font-weight:var(--display-weight); font-size:clamp(1.4rem,2vw,2rem); line-height:1.15; color:var(--ink); }
.need-tile span{ font-size:.98rem; color:var(--ink-2); max-width:30ch; margin:0 auto; }
.beat-tight{ padding-bottom:0 !important; }
body.sub .beat-build .build-left > .eyebrow,body.sub .beat-build .build-left > .display{ display:none; }
body.sub .beat-build .build-steps{ margin-top:0; }

/* ==== v19 · header rhythm: even gaps, the + tight to About, the two icons as a pair ==== */
.hn-item{ gap:2px; }
.hn-more{ width:16px; height:16px; font-size:1rem; margin-left:4px; }
.hd .hnav{ gap:clamp(18px,2vw,30px); }
.hd-right{ gap:0; }
.hd-ico{ width:28px; height:28px; }
.hd-ico + .hd-ico{ margin-left:2px; }
.hd-portal{ margin-left:clamp(14px,1.6vw,24px); }
.beat-totals{ padding-top:clamp(40px,6vh,72px); padding-bottom:clamp(32px,5vh,56px); }
.area-jump{ list-style:none; margin:clamp(24px,3vw,40px) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 12px; }
.area-jump a{ display:inline-flex; align-items:baseline; gap:10px; padding:10px 16px; border:1px solid var(--line); color:var(--ink); font-family:var(--serif); font-size:1.1rem; transition:border-color .3s,background-color .3s; }
.area-jump a b{ font-family:var(--sans); font-weight:600; font-size:.8rem; color:var(--ink-3); }
.area-jump a:hover{ border-color:var(--ink); background:var(--paper-2); }
.com-head{ display:block; }
.com-head .eyebrow{ margin-bottom:8px; }
.com-head .display-sm{ font-size:clamp(2rem,3.6vw,3.4rem); }
.live-list .wrap{ padding:0; overflow:visible; }
.chip-stock{ font-size:.58rem; letter-spacing:.12em; margin-left:6px; vertical-align:middle; opacity:.8; }
.work-strip figcaption .chip-stock{ color:#fff; border-color:rgba(255,255,255,.6); }

/* who we are: the whole portfolio as one picture — 72 doors, 8 across */
.who-mosaic{ aspect-ratio:auto; }
.mosaic{ display:grid; grid-template-columns:repeat(8,1fr); gap:3px; background:#fff; }
.mosaic a{ display:block; aspect-ratio:1; overflow:hidden; background:var(--paper-2); }
.mosaic img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.04) brightness(1.02); transition:transform .5s var(--ease); }
.mosaic a:hover img{ transform:scale(1.12); }
.who-mosaic figcaption{ margin-top:12px; }

/* the map popup: the community photograph is the point of it */
.wr-map .wr-pop-img{ aspect-ratio:3/2; }
.wr-map .wr-pop-nm{ font-family:var(--serif); font-size:1.35rem; }
.wr-map .wr-pop-b{ padding:14px 16px 16px; }
.stats b i{ font-style:normal; font-size:.5em; vertical-align:super; }

/* ==== values page ========================================================= */
.value-index{ grid-column:7/13; list-style:none; margin:0; padding:0; border-top:1px solid var(--ink); align-self:start; }
.value-index a{ display:grid; grid-template-columns:auto 1fr; column-gap:18px; padding:18px 0; border-bottom:1px solid var(--line); color:var(--ink); transition:padding-left .35s var(--ease); }
.value-index a:hover{ padding-left:10px; color:var(--accent-ink); }
.value-index b{ grid-row:1/3; font-family:var(--serif); font-style:italic; font-weight:400; color:var(--ink-3); padding-top:.35em; }
.value-index span{ font-family:var(--display); font-weight:var(--display-weight); font-size:clamp(1.5rem,2.2vw,2.2rem); line-height:1.1; }
.value-index i{ font-style:normal; font-size:.98rem; color:var(--ink-3); margin-top:4px; }
@media (max-width:900px){ .value-index{ grid-column:1/13; margin-top:28px; } }
.beat-value{ padding-top:var(--beat); padding-bottom:var(--beat); }
.value-grid{ align-items:start; }
.value-copy{ grid-column:1/7; }
.proofs{ grid-column:8/13; list-style:none; margin:0; padding:0; border-top:1px solid var(--ink); }
.proofs li{ display:grid; gap:4px; padding:18px 0; border-bottom:1px solid var(--line); }
.proofs b{ font-family:var(--serif); font-weight:400; font-size:1.4rem; color:var(--ink); }
.proofs span{ font-size:1.02rem; color:var(--ink-2); }
@media (max-width:900px){ .value-copy,.proofs{ grid-column:1/13; } .proofs{ margin-top:28px; } }
.value-close{ margin:0; max-width:30ch; }
.value-close p{ font-family:var(--display); font-weight:var(--display-weight); font-size:clamp(1.9rem,3.4vw,3.4rem); line-height:1.12; color:var(--ink); letter-spacing:-.02em; margin:0 0 18px; }
.value-close cite{ font-style:normal; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
/* live: the search bar */
.live-search{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr auto; gap:18px 22px; align-items:end; margin-top:clamp(22px,3vw,36px); padding-top:clamp(22px,3vw,36px); border-top:1px solid var(--line); }
.live-search .find-field input[type=search]{ font:400 1.05rem var(--sans); color:var(--ink); background:var(--paper); border:0; border-bottom:1px solid var(--ink); padding:12px 0; border-radius:0; -webkit-appearance:none; appearance:none; width:100%; }
.ls-count{ margin:0 0 12px; white-space:nowrap; }
.ls-count b{ color:var(--ink); }
.ls-count a{ color:var(--accent-ink); border-bottom:1px solid currentColor; }
.live-list li[hidden]{ display:none; }
.beat-com[hidden]{ display:none; }
@media (max-width:900px){ .live-search{ grid-template-columns:1fr 1fr; } .live-search .ls-q{ grid-column:1/-1; } }
@media (max-width:1100px) and (min-width:901px){ .live-search{ grid-template-columns:1.4fr 1fr 1fr 1fr; } .live-search .ls-count{ grid-column:1/-1; } }
/* list rows: the label reads as a heading */
.track-list .tl-where{ font-family:var(--display); font-weight:var(--display-weight); font-size:clamp(1.5rem,2vw,2rem); line-height:1.1; color:var(--ink); letter-spacing:-.015em; }
.track-list li{ padding:22px 0; align-items:start; }
.track-list .tl-what{ font-size:1.08rem; padding-top:.25em; }
.track-list .tl-status{ padding-top:.5em; }

/* who we are: the mark, not a photograph */
.who-card{ aspect-ratio:4/5; }
.brand-card{ width:100%; height:100%; display:grid; align-content:center; justify-items:center; text-align:center; gap:0; padding:clamp(28px,4vw,56px); background:var(--deep); color:var(--paper); }
.brand-card svg{ width:clamp(64px,8vw,110px); height:auto; color:var(--logo,#1C6775); filter:brightness(1.35); margin-bottom:clamp(20px,3vh,32px); }
.bc-name{ margin:0; font-size:.78rem; letter-spacing:.3em; text-transform:uppercase; font-weight:600; }
.bc-line{ margin:10px 0 0; font-family:var(--serif); font-style:italic; font-size:1.15rem; color:rgba(243,240,231,.75); }
.bc-roles{ list-style:none; margin:clamp(24px,4vh,40px) 0 0; padding:clamp(20px,3vh,30px) 0; border-top:1px solid rgba(243,240,231,.2); border-bottom:1px solid rgba(243,240,231,.2); width:100%; display:grid; gap:6px; }
.bc-roles li{ font-family:var(--display); font-weight:var(--display-weight); font-size:clamp(2rem,3.2vw,3.2rem); line-height:1.05; letter-spacing:-.02em; }
.bc-foot{ margin:0; font-size:.95rem; color:rgba(243,240,231,.8); }
.bc-foot b{ color:var(--paper); font-family:var(--serif); font-weight:400; font-size:1.3rem; }
/* who we are: the whole photograph, uncropped */
.beat-who .who-fig-a{ aspect-ratio:auto; margin-top:0; align-self:center; }
.beat-who .who-fig-a img{ aspect-ratio:auto; height:auto; width:100%; object-fit:contain; }
.beat-who .who-grid{ align-items:center; }

/* ==== the opening: the green, the name in gold, then the green opens ======= */
.intro{ position:fixed; inset:0; z-index:1000; display:grid; place-items:center; color:#D9BC7A; pointer-events:none; background:transparent; }
.intro::before,.intro::after{ content:""; position:absolute; left:0; right:0; height:50%; background:var(--deep); }
.intro::before{ top:0; } .intro::after{ bottom:0; }
.intro-word{ position:relative; z-index:2; text-align:center; display:grid; gap:18px; }
.intro-word span{ display:block; font-family:var(--sans); font-weight:500; font-size:clamp(2.4rem,7.5vw,7.5rem); line-height:1; letter-spacing:.32em; text-transform:uppercase; padding-left:.32em;
  background:linear-gradient(100deg,#B8944C 0%,#E7CC8C 38%,#C9A55C 62%,#F0DCA4 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.intro-word i{ font-style:normal; font-family:var(--sans); font-weight:500; letter-spacing:.22em; text-transform:uppercase; font-size:clamp(.7rem,.9vw,.85rem); font-size:clamp(1rem,1.6vw,1.4rem); letter-spacing:.06em; color:rgba(233,209,150,.85); }
/* the sequence: the name arrives and holds; the halves part slowly while the whole field dissolves */
.js .intro-word{ animation:introWord 3.0s cubic-bezier(.4,0,.2,1) both; will-change:transform,opacity,filter; }
.js .intro::before{ animation:introTop 2.0s cubic-bezier(.65,0,.15,1) 1.4s both; }
.js .intro::after{ animation:introBot 2.0s cubic-bezier(.65,0,.15,1) 1.4s both; }
.js .intro{ animation:introFade 1.4s ease-in 2.0s both; }
@keyframes introWord{ 0%{ opacity:0; letter-spacing:.5em; transform:translateY(10px) scale(.96) } 20%{ opacity:1; letter-spacing:.32em; transform:none } 46%{ opacity:1; transform:scale(1.01); filter:blur(0) } 100%{ opacity:0; transform:scale(1.22); filter:blur(2px) } }
@keyframes introTop{ from{ transform:none } to{ transform:translateY(-100%) } }
@keyframes introBot{ from{ transform:none } to{ transform:translateY(100%) } }
@keyframes introFade{ from{ opacity:1 } to{ opacity:0; visibility:hidden } }
.intro.off{ display:none; }
@media (prefers-reduced-motion:reduce){ .intro{ display:none; } }
/* who we are: the whole photograph, wider */
.beat-who .who-fig-a{ grid-column:7/13; }
.intro-on .open-title > *{ animation-delay:2.4s !important; }
.intro-on .open-title .open-kicker{ animation-delay:2.55s !important; } .intro-on .open-title .open-h1{ animation-delay:2.7s !important; } .intro-on .open-title .open-roll{ animation-delay:2.9s !important; } .intro-on .open-title .open-cue{ animation-delay:3.3s !important; }
html.intro-on{ overflow:hidden; }

/* who we are: a portrait crop, pinned to the top of the row, no drift */
.beat-who .who-grid{ align-items:start; }
.beat-who .who-fig-a{ grid-column:8/13; grid-row:1; aspect-ratio:4/5; align-self:start; margin-top:0; transform:none !important; }
.beat-who .who-fig-a img{ aspect-ratio:4/5; width:100%; height:auto; object-fit:cover; object-position:var(--pos,50% 50%); }

/* ==== work page, Morgan's shape: the team strip, the people, the video ==== */
.beat-team{ padding-top:clamp(28px,4vh,48px); padding-bottom:var(--beat); }
.team-strip{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(8px,1vw,14px); padding:0 var(--pad); margin-bottom:clamp(40px,6vh,80px); }
.team-slot{ margin:0; aspect-ratio:4/5; display:grid; align-content:end; gap:8px; padding:clamp(14px,1.6vw,22px); background:var(--deep); color:var(--paper); position:relative; overflow:hidden; }
.team-slot::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(135deg,rgba(243,240,231,.05) 0 10px,transparent 10px 20px); }
.team-slot span{ position:relative; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:#D9BC7A; }
.team-slot b{ position:relative; font-family:var(--serif); font-weight:400; font-size:clamp(1rem,1.3vw,1.3rem); line-height:1.2; }
/* ZenTao #575: the slots carry licensed stock photos until the client's own
   arrive (Pexels License, see docs/MEDIA-SOURCES.md) — the caption stays, the
   "Photo · Client" placeholder tag goes: these are NOT the client's photos. */
.team-slot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.team-slot.has-photo::before{ background:linear-gradient(180deg,rgba(9,45,52,0) 45%,rgba(9,45,52,.85)); z-index:1; }
.team-slot.has-photo b{ z-index:2; text-shadow:0 1px 2px rgba(9,45,52,.5); }
.team-grid{ align-items:center; }
.team-copy{ grid-column:1/6; }
.team-video{ grid-column:7/13; margin:0; }
.video-slot{ aspect-ratio:16/9; background:var(--deep); display:grid; place-items:center; align-content:center; gap:14px; color:var(--paper); }
.video-slot i{ font-style:normal; width:64px; height:64px; border-radius:50%; background:#fff; color:var(--deep); display:grid; place-items:center; font-size:1.3rem; padding-left:4px; }
.video-slot span{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(243,240,231,.75); }
@media (max-width:900px){ .team-strip{ grid-template-columns:repeat(2,1fr); } .team-copy,.team-video{ grid-column:1/13; } .team-video{ margin-top:28px; } }
.offers{ list-style:none; margin:clamp(28px,4vw,48px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 clamp(24px,3vw,48px); border-top:1px solid var(--ink); }
.offers li{ display:grid; gap:4px; padding:20px 0; border-bottom:1px solid var(--line); }
.offers b{ font-family:var(--serif); font-weight:400; font-size:1.4rem; color:var(--ink); }
.offers span{ font-size:1.02rem; color:var(--ink-2); }
@media (max-width:760px){ .offers{ grid-template-columns:1fr; } }

/* the curtain: the small mark, as before; the gold opening belongs to the home only */
/* on the home the full opening takes over from the curtain */
.intro-on .pt{ display:none; }

.beat-who .who-fig-a{ grid-column:9/13; }

/* the About dropdown is a solid white card, whatever the bar is doing behind it */
.hn-sub{ background:#fff !important; color:var(--ink) !important; opacity:0; text-shadow:none !important; backdrop-filter:none; }
.hn-item:hover .hn-sub,.hn-item:focus-within .hn-sub,.hn-item.open .hn-sub{ opacity:1 !important; }
.hn-sub a{ color:var(--ink) !important; text-shadow:none !important; }
.hn-sub a:hover{ color:var(--accent-ink) !important; }
/* the curtain is retired */
.pt{ display:none !important; }

/* the drawing becomes the building: the client's film sits under the blueprint and comes through at the last step */
.build-fig{ position:relative; overflow:hidden; }
.build-film{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:var(--film,0); transition:opacity .6s var(--ease); z-index:0; filter:saturate(1.06) brightness(1.04); }
.build-fig .bld{ position:relative; z-index:1; opacity:calc(1 - var(--film,0)); transition:opacity .6s var(--ease); }
.beat-build{ height:calc(100svh + 5 * 70svh); }

/* ==== what we do: the client's film, scrubbed by the scroll ================ */
.beat-build{ height:calc(100svh + 4 * 80svh); }
.build-video{ aspect-ratio:16/9; max-height:calc(100svh - var(--hd-h) - 6vh); background:var(--deep); border:0; padding:0; }
.build-video .build-film{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1; filter:none; transition:none; }
.build-cap{ position:absolute; left:18px; bottom:16px; z-index:2; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:#fff; background:rgba(9,45,52,.55); padding:6px 12px; transition:opacity .3s; }

/* the opening film: the construction sequence plays once as the first frame, then the photographs continue */
.montage video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--pos,50% 50%); opacity:0; transition:opacity 1.7s var(--ease); filter:brightness(1.04) saturate(1.04); }
.montage video.on{ opacity:1; animation:none; transform:none; }
.montage video.top{ z-index:2; }
/* the construction film, graded to the site: lighter, less orange, a cool sky */
/* the light changes with the work: golden on the empty lot, clear and bright by the time the lights come on (--g 0→1 from the scroll) */
.build-video .build-film{ filter:brightness(calc(1.02 + .12 * var(--g,0))) saturate(calc(.96 - .3 * var(--g,0))) contrast(calc(1 - .06 * var(--g,0))) hue-rotate(calc(-5deg * var(--g,0))); }
.build-video::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(140,195,240,.7),rgba(180,215,245,.25) 45%,rgba(255,255,255,0) 70%); mix-blend-mode:screen; opacity:calc(.28 * var(--g,0)); }
.build-video::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(120,180,230,.5),rgba(120,180,230,.06) 55%); mix-blend-mode:soft-light; opacity:calc(.35 + .65 * var(--g,0)); }
.build-video .build-cap{ z-index:2; }
/* Visible fallback when mobile autoplay is refused (ZenTao-adjacent client
   report): the poster holds the frame, this control hands playback to a tap. */
.build-play{ position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; border:1px solid rgba(255,255,255,.8);
  background:rgba(9,45,52,.72); color:#fff; font-size:22px; display:grid; place-items:center; cursor:pointer; }
.build-play:focus-visible{ outline:3px solid #fff; outline-offset:2px; }

/* ==== mobile: collapse the scroll-scrub runways (ZenTao follow-up, 2026-09-17) ====
   .beat-build and .atlas are scroll-driven on desktop: the section is a tall
   "runway" (100svh + N*70-80svh) and a sticky stage plays the film / flies the
   map as you travel it. The ≤900px blocks at :1202 and :993 already collapse
   both to height:auto — but later desktop tuning re-declared the runway heights
   BELOW those blocks (.beat-build at :1416/:1419, .atlas at :1092), and at equal
   specificity the later declaration wins, so phones got 2.5 screens of blank
   runway after each section's one screen of content. Declared LAST, on purpose:
   any future runway tuning added above still loses to this on mobile. */
@media (max-width:900px){
  .beat-build{ height:auto; }
  .atlas{ height:auto; }
  /* Single column: the map keeps its desktop grid-row:1 and would jump ABOVE
     the "72 buildings" copy — read the number first, then the map. */
  .atlas-map{ grid-column:1; grid-row:auto; }
  /* ZenTao #575: .who-fig-a is authored for the 12-column stage (columns
     9–13, a 4/5 portrait). On a collapsed grid those column lines do not
     exist — the figure shrank into a corner and the other 8 columns read as
     a blank band. Full-bleed landscape on phones. */
  /* (0,2,0) selectors: the sheet retunes `.beat-who .who-fig-a` many times
     (lines ~618…1414) — a bare .who-fig-a here loses every one of them. */
  .beat-who .who-grid{ grid-template-columns:1fr; }
  .beat-who .who-fig-a{ grid-column:1; grid-row:auto; aspect-ratio:3/2; margin-top:8px; }
  .beat-who .who-fig-a img{ aspect-ratio:auto; }
  .beat-who .culture-list{ grid-column:1; grid-row:auto; }
  .beat-who .who-head{ grid-column:1; grid-row:auto; }
  /* ZenTao #578: stacked hero buttons align full-width; the double section
     gap under them halves; the bleed section stops being a full-viewport
     wall on phones — inset like the cards above it, height to its content. */
  .open-story .actions{ display:grid; gap:10px; }
  .open-story .actions .btn{ width:100%; justify-content:center; text-align:center; }
  section.open.is-static .open-story{ padding-bottom:calc(var(--beat) * 0.5); }
  .bleed{ min-height:62svh; width:calc(100% - 40px); margin-left:20px; margin-right:20px; }
  /* ZenTao #579: the milestones grid hangs its dots on a horizontal axis
     (.miles::before) that collapses with the stacked mobile layout — orphan
     dots floated mid-text on the history page. No axis, no dots. The
     .timeline variant (track page) shares the pattern. */
  .miles::before, .miles li::before,
  .timeline li::before{ display:none; }
  .miles{ grid-template-columns:1fr 1fr; padding-top:0; }
}
.cform-sent{ padding:34px 0 8px; }
.cform-sent h3{ font:400 clamp(1.5rem,2.4vw,2rem)/1.2 var(--display); margin:10px 0 12px; outline:none; }
.cform-sent p{ color:var(--ink-2); margin:0 0 20px; }
.bfield{ position:relative; }
.bcombo{ width:100%; border:0; border-bottom:1px solid var(--line); padding:8px 0; font:inherit; color:var(--ink); background:transparent; }
.bcombo:focus-visible{ outline:none; border-bottom-color:var(--ink); }
.blist{ position:absolute; left:0; right:0; top:100%; z-index:30; margin:0; padding:4px 0; list-style:none;
  background:var(--paper); border:1px solid var(--line); box-shadow:0 14px 40px rgba(9,45,52,.16);
  max-height:min(300px,42svh); overflow-y:auto; }
.blist li{ padding:9px 14px; cursor:pointer; font-size:.95rem; }
.blist li:hover,.blist li.hot{ background:var(--deep); color:var(--paper); }
.blist li[aria-selected="true"]{ font-weight:600; }
/* ZenTao #575: two 1fr columns still overflow when an input's intrinsic
   min-width (browser default ~20ch) exceeds its track — minmax(0,1fr) lets
   the track win. Below 640px the pairs stack. */
.cform-two{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
@media (max-width:640px){
  .cform-two{ grid-template-columns:1fr; }
}

/* ZenTao #586 (2026-09-18): prefers-reduced-motion desktops hit the same
   runway trap the ≤900px block above fixes — isStatic() never scrubs, so the
   sticky stage repeats one still frame while the visitor scrolls 3–4 screens
   of blank runway (reporter's 1802px window: red-boxed voids beside the
   steps). Collapse both runways under reduce as well; declared last so any
   future desktop runway tuning above still loses here (same reasoning as the
   mobile block). */
@media (prefers-reduced-motion: reduce){
  .beat-build{ height:auto; }
  .atlas{ height:auto; }
}

/* ZenTao #586: with the film at readyState 0 (slow network, refused
   autoplay) the video element paints nothing and the visitor saw the bare
   grid backdrop with a lone floating play control. Paint the poster on the
   container itself — the frame never goes blank regardless of media state. */
.build-fig.build-video{ background:url('../assets/img/build-poster.jpg') center/cover no-repeat; }