/* ============================================================================
   NataliyaSells.com — site.css
   Brand tokens are BUILD-SPEC §4 verbatim. Motion grammar: everything eases on
   cubic-bezier(.2,.7,.3,1); reveals rise and fade; nothing scales from zero,
   nothing rotates, nothing bounces.
   ========================================================================= */

:root{
  --ink:        #0E141C;
  --ink-2:      #141C26;
  --navy:       #1B2A3B;
  --charcoal:   #1C1C1C;
  --gold:       #C9A84C;
  --gold-dark:  #A07830;
  --cream:      #F7EFDA;
  --warm-gray:  #F2F0EC;

  --dim:        rgba(247,239,218,.55);   /* 5.49:1 on ink — AA */
  /* .30 measured 2.50:1 and is used for real text (utility nav, footer legal),
     so it fails AA outright. .50 measures 4.78:1. See review/_contrast.py. */
  --dimmer:     rgba(247,239,218,.50);
  --hair:       rgba(201,168,76,.26);

  --serif: Georgia, "Times New Roman", serif;
  --sans:  "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.2,.7,.3,1);
  --lb: 4.3vh;               /* letterbox height (66% of the previous 6.5vh) */
}

*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
/* No smooth scroll: the manifesto is scrubbed by scroll position, and an
   animated jump fights the scrub and lands the visitor mid-sequence. */
html{ background:var(--ink); height:100% }
/* Single page. Everything is reachable without scrolling, so the page does not
   scroll -- overlays scroll inside themselves. Phones still scroll (see below). */
html,body{ overflow:hidden }

body{
  background:var(--ink);
  color:var(--cream);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.locked{ overflow:hidden }

h1,h2,h3,b,strong{ font-weight:400 }
a{ color:inherit; text-decoration:none }
img,video{ max-width:100%; height:auto; display:block }
ul,ol{ margin:0; padding:0; list-style:none }

.eyebrow{
  font-size:10.5px; letter-spacing:.19em; text-transform:uppercase;
  color:var(--gold); font-weight:500; margin:0;
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--gold); color:var(--ink); padding:10px 16px; font-size:13px;
}
.skip:focus{ left:8px; top:8px }

/* Keyboard focus — 2px gold, offset, on everything interactive. */
a:focus-visible, button:focus-visible, video:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:2px;
}

.hairline{ height:1px; background:var(--hair); width:100% }
.diamond{
  width:7px; height:7px; background:var(--gold); transform:rotate(45deg);
  margin:0 auto; position:relative; top:-4px;
}

/* ── brand mark: her face, from the first frame ──────────────────────────── */
.brandmark{
  position:fixed; top:calc(var(--lb) + 7px); right:4vw; z-index:70;
  width:236px; text-align:center;
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
/* the hub's full portrait is the reveal — two portraits at once is one too many */
.brandmark.stand-down{ opacity:0; transform:translateY(-10px); pointer-events:none }

.bm-por{
  display:block; width:208px; height:208px; margin:0 auto;
  border-radius:50%; overflow:hidden; position:relative;
  border:1px solid var(--gold);
  background:linear-gradient(165deg,#31485E,#0D131B);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  /* Own compositing layer, permanently. Paired with the border-radius on
     .bm-loop below: when the parent is already a layer, its rounded clip is a
     compositor clip and survives a composited child being torn down and rebuilt
     (which is what the Back button out of an overlay does). Without it the clip
     is paint-time only and a promoted <video> can escape it and paint square. */
  transform:translateZ(0);
}
.bm-por .bm-loop{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  /* The circle is rounded HERE as well as on the parent, and that is a fix, not
     a belt-and-braces flourish. A playing <video> gets promoted to its own
     compositing layer, and a composited layer is not reliably clipped by an
     ancestor's `border-radius` + `overflow:hidden` — the clip is a paint-time
     property and the layer is composited after paint. The visible symptom was
     her portrait snapping from a circle to a square after opening About and
     pressing the browser Back button, which is exactly the sort of layer
     teardown that loses the parent clip.
     Rounding the video itself means the layer is round whatever the parent
     does. NOTE it cannot be fixed with `contain:paint` or a `-webkit-mask` on
     .bm-por: both clip to that element's own box, and the outer gold ring in
     .bm-por::after is drawn at inset:-5px, OUTSIDE it — either would delete the
     ring. This does not reproduce in headless Chrome, which runs --disable-gpu
     and therefore never composites the video separately. */
  border-radius:50%;
}

.bm-por::after{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  border:1px solid rgba(201,168,76,.34);
}
.bm-por:hover{ transform:translateY(-2px); box-shadow:0 6px 26px rgba(0,0,0,.5) }

.bm-name{
  margin:9px 0 0; font-family:var(--serif); font-size:15px; color:var(--cream);
  text-shadow:0 1px 8px rgba(6,10,15,.9);
}
.bm-title{
  margin:4px 0 0; font-size:8.5px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--gold); text-shadow:0 1px 8px rgba(6,10,15,.9);
}
.bm-nav{
  display:flex; justify-content:center; gap:13px; margin-top:8px;
  padding-top:7px; border-top:1px solid var(--hair);
}
.bm-nav a{
  font-size:9.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--dimmer); transition:color .3s var(--ease); white-space:nowrap;
  text-shadow:0 1px 8px rgba(6,10,15,.9);
}
.bm-nav a:hover{ color:var(--gold) }

/* The fourth door. Same card language as the three site cards — image plate,
   scrim, overlaid type — just smaller, because it opens an overlay on this page
   rather than leaving for another property. */
.tm-card{
  display:block; position:relative; margin-top:10px; height:104px;
  overflow:hidden; text-align:left;
  border:1px solid rgba(201,168,76,.45);
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.tm-plate{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transition:filter .4s var(--ease);
}
.tm-plate::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,10,15,.95) 6%, rgba(6,10,15,.55) 52%, rgba(6,10,15,.2) 100%);
}
.tm-body{ position:absolute; left:9%; right:9%; bottom:9%; z-index:2; display:block }
.tm-card:hover{ border-color:var(--gold); transform:translateY(-3px) }
.tm-card:hover .tm-plate{ filter:brightness(1.1) }
.tm-k{
  display:block; font-size:7.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold);
}
.tm-card b{ display:block; font-family:var(--serif); font-size:13.5px; margin-top:4px; line-height:1.22 }
.tm-go{ display:block; font-size:8.5px; color:var(--dim); margin-top:5px; line-height:1.4 }

/* ═══════════════════════════════════════════ SCREEN 01 — COLD OPEN ════════ */
.screen{ position:relative; width:100%; }
.cold{ min-height:calc(100vh - 46px); overflow:hidden; display:flex; flex-direction:column }

.cold-sky{
  position:absolute; inset:0;
  background:linear-gradient(180deg,#070B10 0%,#0E141C 34%,var(--navy) 68%,#26405A 100%);
}
.cold-glow{
  position:absolute; left:50%; bottom:var(--lb); width:86%; height:52%;
  transform:translateX(-50%);
  background:radial-gradient(58% 100% at 50% 100%, rgba(201,168,76,.40) 0%,
                             rgba(201,168,76,.14) 42%, transparent 74%);
}
/* Sits ON the lower letterbox bar so the silhouette has a horizon to stand on. */
.cold-city{
  position:absolute; left:0; right:0; bottom:var(--lb); width:100%; height:auto;
  opacity:.98;
}
.lb{ position:absolute; left:0; right:0; height:var(--lb); background:#060A0F; z-index:20 }
.lb-t{ top:0 } .lb-b{ bottom:0 }

.manifesto{
  position:relative; z-index:25;
  margin:0; padding:calc(var(--lb) + 1.05vh) 0 0 3.5vw;
  max-width:min(62ch, 74vw);
  font-family:var(--serif);
  font-size:clamp(24px,4.1vw,52px);
  line-height:1.16; letter-spacing:-.015em;
}
.m-line{ display:block; margin-bottom:.22em }
.m-accent{ font-style:italic; color:var(--gold) }

/* Scroll-scrubbed manifesto. JS keeps a rolling window of TWO lines on screen —
   the current one and its predecessor — so the sequence never goes blank and a
   line is still readable while the next arrives. */
.seq .m-line{
  opacity:0; transform:translateY(9px);
  transition:opacity .42s var(--ease), transform .42s var(--ease);
}
.seq .m-line.is-on{ opacity:1; transform:none }
/* the older of the two recedes so the newest line stays the focus */
.seq .m-line.is-prev{ opacity:.40 }
.seq .m-line.is-past{ opacity:0; transform:translateY(-6px) }
/* Once the last line lands, everything fades back in so a visitor who sat on
   the page — or looked away — can read the whole thing. */
.seq.resolved .m-line{
  opacity:1 !important; transform:none !important;
  transition:opacity 1.5s var(--ease), transform 1.5s var(--ease);
}


/* ═══════════════════════════════════════════════ THE THREE CARDS ═════════ */
/* One set of DOM nodes. Fixed layer so the same elements travel from the cold
   open into the hub orbit. State is set on #cards by js/site.js.            */
.cards{
  position:fixed; inset:0; z-index:40; pointer-events:none;
  transition:opacity .5s var(--ease);
}
.card{
  position:absolute; pointer-events:auto; overflow:hidden; display:block;
  border:1px solid rgba(201,168,76,.45);
  background:var(--ink-2);
  transition:left .95s var(--ease), top .95s var(--ease), width .95s var(--ease),
             height .95s var(--ease), transform .4s var(--ease),
             border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.card-plate{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transition:filter .4s var(--ease);
}
.card-plate::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,10,15,.94) 4%, rgba(6,10,15,.35) 46%, transparent 78%);
}
.card-sheen{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(112deg,transparent 40%,rgba(247,239,218,.13) 50%,transparent 60%);
  animation:sheen 6s var(--ease) infinite;
}
.card:nth-child(2) .card-sheen{ animation-delay:2s }
.card:nth-child(3) .card-sheen{ animation-delay:4s }
@keyframes sheen{ 0%{transform:translateX(-135%)} 55%,100%{transform:translateX(135%)} }

.card-cap{ position:absolute; left:9%; right:9%; bottom:8%; z-index:3; display:block }
.card-cap b{ display:block; font-family:var(--serif); font-size:clamp(14px,1.35vw,20px) }
.card-dom{
  display:block; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); margin-top:5px;
}
.card-cap i{
  display:block; font-style:normal; font-size:11.5px; color:var(--dim);
  margin-top:7px; line-height:1.5;
}
.card:hover{ transform:translateY(-6px); border-color:var(--gold) }
.card:hover .card-plate{ filter:brightness(1.08) }

/* state: cold open — a row across the lower third */
.cards[data-state="cold"] .card[data-slot="0"]{ left:7vw;    top:56vh; width:25vw; height:30vh }
.cards[data-state="cold"] .card[data-slot="1"]{ left:34.5vw; top:56vh; width:25vw; height:30vh }
.cards[data-state="cold"] .card[data-slot="2"]{ left:62vw;   top:56vh; width:25vw; height:30vh }

/* state: hub — asymmetric orbit around the portrait */
@keyframes float{ 0%,100%{ margin-top:0 } 50%{ margin-top:-8px } }

body.locked .cards{ opacity:0; pointer-events:none }

/* ═══════════════════════════════════════════════════════ OVERLAYS ═══════ */
.overlay{
  /* stops short of the footer bar rather than covering it, so the contact
     details stay on screen on every overlay */
  position:fixed; top:0; left:0; right:0; bottom:46px; z-index:80;
  /* near-solid: at .97 the hub ghosted through and the portrait and chips
     were legible behind the overlay content */
  background:#080C12;
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; transform:translateY(12px); visibility:hidden;
  transition:opacity .32s var(--ease), transform .32s var(--ease), visibility 0s .32s;
}
.overlay.open{
  opacity:1; transform:none; visibility:visible;
  transition:opacity .32s var(--ease), transform .32s var(--ease), visibility 0s 0s;
}
.overlay.closing{ transition-duration:.2s }

.x{
  font-family:var(--sans); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cream); background:rgba(8,12,18,.9); border:1px solid var(--gold);
  padding:7px 13px; cursor:pointer;
  transition:color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.x:hover{ color:var(--ink); background:var(--gold); border-color:var(--gold) }

/* ── Screen 03 — TrueMatch, styled as a page from her printed system ────── */
.sheet-inner{
  max-width:1120px; margin:0 auto; padding:5vh 4vw 8vh;
}
.sheet-hd{
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  border-bottom:1px solid var(--hair); padding-bottom:16px;
}
.sheet-hd h2{ font-family:var(--serif); font-size:clamp(22px,3vw,36px); margin:6px 0 0 }
.sheet-lead{ color:var(--dim); font-size:15px; max-width:62ch; margin:26px 0 0 }

.tm-instrument{
  display:grid; grid-template-columns:1fr .8fr 1fr; gap:30px; align-items:center;
  margin:42px 0 0;
}
.tm-in li{ margin-bottom:17px; position:relative }
.tm-in b{ display:block; font-family:var(--serif); font-size:16px }
.tm-in i{ display:block; font-style:normal; font-size:12px; color:var(--dim); margin-top:2px }
.bar{
  display:block; height:2px; margin-top:7px; background:rgba(247,239,218,.14);
  position:relative; overflow:hidden;
}
.bar::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:36%;
  background:var(--gold); animation:feed 4.4s var(--ease) infinite;
}
.tm-in li:nth-child(2) .bar::after{ animation-delay:.5s }
.tm-in li:nth-child(3) .bar::after{ animation-delay:1s }
.tm-in li:nth-child(4) .bar::after{ animation-delay:1.5s }
.tm-in li:nth-child(5) .bar::after{ animation-delay:2s }
@keyframes feed{ 0%,100%{ width:30% } 50%{ width:100% } }

.in-note{
  display:block; margin-top:7px; font-size:11px; color:var(--gold-dark);
  border-left:2px solid var(--gold); padding-left:9px; line-height:1.5;
}
.in-note:hover{ color:var(--gold) }

.tm-core{
  position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center;
}
.ring-outer,.ring-inner{ position:absolute; border-radius:50%; }
.ring-outer{ inset:0; border:1px solid rgba(201,168,76,.14) }
.ring-inner{
  inset:14%; border:1px dashed rgba(201,168,76,.42);
  animation:spin 24s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
.core-label{
  position:relative; z-index:2; text-align:center; font-family:var(--serif);
  font-size:clamp(12px,1.3vw,17px); line-height:1.35;
  width:56%; padding:14% 0; border-radius:50%;
  border:1px solid var(--gold); background:rgba(201,168,76,.09);
  display:flex; align-items:center; justify-content:center;
}

.tm-out{ border:1px solid rgba(201,168,76,.5); background:rgba(9,14,20,.96); padding:20px }
.tm-out-title{ font-family:var(--serif); font-size:21px; margin:7px 0 0 }
.tm-gate{
  display:flex; align-items:center; gap:9px; margin:15px 0 18px;
  padding:9px 11px; background:rgba(201,168,76,.08);
  border-left:2px solid var(--gold); font-size:12px; color:var(--cream);
}
.gate-mark{ width:7px; height:7px; background:var(--gold); transform:rotate(45deg); flex:none }
.tm-bars li{ margin-bottom:13px; font-size:12px; color:var(--dim) }
.sbar{
  display:block; height:3px; margin-top:6px; background:rgba(247,239,218,.12); position:relative;
}
.sbar::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:var(--v);
  background:var(--gold); opacity:.85;
  animation:settle 1.1s var(--ease) both;
}
@keyframes settle{ from{ width:0 } }

/* cream callout with a coloured left stripe — from her print system */
.callout{
  margin:42px 0 0; padding:20px 24px;
  background:var(--warm-gray); color:var(--charcoal);
  border-left:4px solid var(--gold);
  font-family:var(--serif); font-size:15.5px; line-height:1.62;
}

.tm-video{ margin:38px 0 0 }
.tm-video video{ width:100%; border:1px solid var(--hair); background:#000 }
.tm-video figcaption{
  margin-top:13px; font-family:var(--serif); font-style:italic;
  font-size:15px; color:var(--dim); max-width:64ch;
}

.sheet-cta{ margin:40px 0 0; border-top:1px solid var(--hair); padding-top:22px }
.sheet-cta a{
  font-family:var(--serif); font-size:19px; color:var(--gold);
  border-bottom:1px solid var(--hair); padding-bottom:3px;
}
.sheet-cta a:hover{ border-color:var(--gold) }
.sheet-cta span{ display:block; font-size:11.5px; color:var(--dimmer); margin-top:9px }
.sheet-foot{
  margin:30px 0 0; font-size:10px; letter-spacing:.19em;
  text-transform:uppercase; color:var(--dimmer);
}

/* ── Screen 04 — the wall ───────────────────────────────────────────────── */
.wall-hd{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; gap:20px;
  padding:20px 4vw; background:rgba(8,12,18,.97);
  border-bottom:1px solid var(--hair);
}
.wall-hd h2{ font-family:var(--serif); font-size:clamp(19px,2.2vw,28px); margin:0; flex:1 }
.wall-brokerage{
  margin:0; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--dimmer);
}
.grid{
  display:grid; grid-template-columns:repeat(6,1fr);
  grid-auto-rows:19.5vh; gap:8px; padding:14px 4vw 6vh;
}
/* the <li> is the grid item; the button fills it */
.tile-cell{ position:relative; min-height:0 }
.tile-cell.w2{ grid-column:span 2 } .tile-cell.h2{ grid-row:span 2 }
.tile{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:hidden; border:1px solid rgba(201,168,76,.15);
  background:var(--ink-2); cursor:pointer; padding:0;
  animation:breathe 6.5s var(--ease) infinite;
}
.tile-cell:nth-child(3n) .tile{ animation-delay:1.4s }
.tile-cell:nth-child(3n+1) .tile{ animation-delay:2.9s }
@keyframes breathe{ 0%,100%{ filter:brightness(.76) } 50%{ filter:brightness(1.05) } }
.tile video,.tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.tile::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(247,239,218,.13) 50%,transparent 58%);
  animation:sheen 5.5s var(--ease) infinite;
}
/* Most tiles are captures of real documents and web tools, so the lower edge
   is often white paper. Without a scrim the label is unreadable. */
.tile::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:52%; z-index:2;
  background:linear-gradient(to top, rgba(6,10,15,.94) 0%, rgba(6,10,15,.62) 38%, transparent 100%);
  pointer-events:none;
}
.tile-label{
  position:absolute; left:11px; right:11px; bottom:9px; z-index:3;
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; line-height:1.4;
  color:rgba(247,239,218,.92);
}
.tile-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3;
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(247,239,218,.55);
}
.tile-play::after{
  content:""; position:absolute; left:13px; top:10px;
  border-left:11px solid rgba(247,239,218,.8);
  border-top:7px solid transparent; border-bottom:7px solid transparent;
}
.tile.is-placeholder{ background:linear-gradient(150deg,#22303F,#0C121A) }
.tile.is-placeholder .tile-label::before{ content:"Coming soon · "; color:var(--gold-dark) }
.tile:hover{ filter:brightness(1.12); border-color:rgba(201,168,76,.6) }
.wall-noscript{ padding:0 4vw 6vh; color:var(--dim) }

/* ── Screen 05 — tile expanded ──────────────────────────────────────────── */
.viewer{ position:fixed; inset:0; z-index:95; display:flex; align-items:center; justify-content:center }
.viewer[hidden]{ display:none }
.viewer-scrim{ position:absolute; inset:0; background:rgba(6,10,15,.72); backdrop-filter:blur(2px) }
.viewer-box{
  position:relative; z-index:2; width:72vw; max-width:1280px;
  border:1px solid var(--gold); background:#0C121A;
}
.viewer-box video{ width:100%; aspect-ratio:16/9; background:#000; display:block }
.viewer-meta{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:16px 22px; border-top:1px solid var(--hair);
}
.viewer-meta b{ display:block; font-family:var(--serif); font-size:18px }
.viewer-meta span{
  display:block; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); margin-top:4px;
}
.cta{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--cream);
  border:1px solid rgba(201,168,76,.6); padding:11px 17px; white-space:nowrap;
  transition:background .3s var(--ease);
}
.cta:hover{ background:rgba(201,168,76,.16) }
.viewer-x{ position:absolute; right:-1px; top:-42px }
.viewer-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(8,12,18,.8); border:1px solid var(--hair); color:var(--cream);
  font-size:17px; padding:13px 16px; cursor:pointer;
}
.viewer-nav.prev{ left:-56px } .viewer-nav.next{ right:-56px }
.viewer-nav:hover{ border-color:var(--gold) }

/* ── Screen 06 — about ──────────────────────────────────────────────────── */
.about{ display:flex; align-items:stretch }
.about-l{
  position:relative; width:41%; flex:none; overflow:hidden;
  background:linear-gradient(160deg,#2A4056,#0A0F16);
}
/* the video fills the panel; its own poster is the fallback frame */
.about-l .about-loop{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 12%;
}
/* scrim so her name stays legible over the light suit */
.about-l::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:34%; z-index:2;
  background:linear-gradient(to top, rgba(6,10,15,.88) 6%, rgba(6,10,15,.42) 48%, transparent 100%);
  pointer-events:none;
}

.about-nm{ position:absolute; left:9%; bottom:6%; z-index:3; margin:0 }
.about-nm b{ display:block; font-family:var(--serif); font-size:clamp(18px,2vw,26px) }
.about-nm span{
  display:block; font-size:10px; letter-spacing:.19em; text-transform:uppercase;
  color:var(--gold); margin-top:6px;
}
.about-r{
  width:59%; padding:5vh 5vw; border-left:1px solid var(--hair);
  background:#0A0F16; position:relative;
}
.about-r .x{ position:absolute; top:0; right:0; margin:0; z-index:5 }
.about-lead{ font-family:var(--serif); font-size:17px; line-height:1.7; color:var(--dim); max-width:56ch; margin:0 }
.about-lead .unverified{ color:var(--cream) }
.pull{
  margin:26px 0; padding:0 0 0 18px; border-left:2px solid var(--gold);
  font-family:var(--serif); font-style:italic; font-size:19px; color:var(--cream); max-width:52ch;
}
.about-list li{ border-left:1px solid var(--gold); padding:4px 0 4px 17px; margin-bottom:22px }
.about-list b{ display:block; font-family:var(--serif); font-size:18px }
.about-list p{ margin:5px 0 0; font-size:13.5px; color:var(--dim); line-height:1.65; max-width:54ch }
.about-list a{ color:var(--gold) }
.about-list a:hover{ border-bottom:1px solid var(--gold) }
.about-edu{
  margin:30px 0 0; padding-top:18px; border-top:1px solid var(--hair);
  font-size:12.5px; color:var(--dimmer);
}

/* ═══════════════════════════════════════════════════════════ FOOTER ═════ */
/* A persistent bar, with the full footer folded behind an expander. It was
   taking most of a viewport, and because the card layer is fixed the two fought
   for the same screen. */
/* the cold panel is sized to stop above the bar, so no body padding is needed */

footer.foot{
  /* above the overlays (80): expanded, the drawer was rendering underneath the
     About panel. Still below the tile viewer (95) and cert lightbox (96). */
  position:fixed; left:0; right:0; bottom:0; z-index:85;
  background:rgba(8,12,18,.985); border-top:1px solid var(--hair);
  padding:0;
}
.foot-bar{
  display:flex; align-items:center; gap:18px; min-height:46px;
  padding:0 8px 0 8px; max-width:1500px; margin:0 auto;
}
.foot-bar p{ margin:0; font-size:11px; color:var(--dim); white-space:nowrap }
.fb-id{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis }
.fb-id b{ color:var(--cream); font-family:var(--serif); font-size:13px }
.fb-reach{ display:flex; gap:14px }
.fb-reach a:hover{ color:var(--gold) }
.fb-eho{ display:flex; align-items:center; gap:7px; color:var(--dimmer) }

.foot-toggle{
  flex:none; width:34px; height:34px; cursor:pointer;
  background:none; border:1px solid var(--hair); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.foot-toggle:hover{ border-color:var(--gold); background:rgba(201,168,76,.1) }
.foot-toggle .chev{ font-size:10px; line-height:1; transition:transform .35s var(--ease) }
.foot[data-open="true"] .foot-toggle .chev{ transform:rotate(180deg) }

.foot-panel{
  max-height:0; overflow:hidden;
  transition:max-height .45s var(--ease);
  border-top:1px solid transparent;
}
.foot[data-open="true"] .foot-panel{ max-height:62vh; overflow-y:auto; border-top-color:var(--hair) }
.foot-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:10px 30px; padding:20px 5vw 0; max-width:1400px; margin:0 auto;
  align-items:start;
}
.foot-grid p{ margin:0 0 3px; font-size:12px; line-height:1.45; color:var(--dim) }
.foot-grid a:hover{ color:var(--gold) }
.foot-name{ font-family:var(--serif); font-size:16px; color:var(--cream) !important }
.foot-title{ font-size:9.5px !important; letter-spacing:.18em; text-transform:uppercase;
             color:var(--gold) !important; margin-bottom:5px !important }
.foot-grid .eyebrow{ margin-bottom:5px }
.foot-legal{
  max-width:1400px; margin:14px auto 0; padding:10px 5vw 18px;
  border-top:1px solid var(--hair);
  font-size:10.5px; color:var(--dimmer);
}
.eho{
  width:15px; height:15px; flex:none; border:1.4px solid var(--dimmer);
  position:relative; border-radius:1px;
}
.eho::after{
  content:""; position:absolute; left:2px; top:5px; right:2px; bottom:2px;
  border-top:1.4px solid var(--dimmer);
}

/* ═══════════════════════════════════════════════════════ RESPONSIVE ═════ */
@media (max-width:1100px){
  .tm-instrument{ grid-template-columns:1fr; gap:34px }
  .tm-core{ max-width:240px; margin:0 auto }
  .grid{ grid-template-columns:repeat(3,1fr); grid-auto-rows:17vh }
}
@media (max-width:1100px){
  /* the core reads as a squashed oval with the text overflowing when the
     instrument goes single-column */
  .tm-core{ max-width:260px; width:100% }
  .core-label{ width:80%; padding:20% 0; font-size:14px }
}
@media (max-width:860px){
  .about{ flex-direction:column }
  .about-l{ width:100%; height:52vh }
  .about-r{ width:100%; border-left:0; border-top:1px solid var(--hair) }
  /* stays in the corner; the panel reserves room so nothing sits under it */
  .about-r{ padding-top:52px }
}
@media (max-width:900px){
  :root{ --lb:5vh }
  /* phones cannot fit it all in one viewport -- they scroll */
  html,body{ overflow:auto; height:auto }
  .manifesto{ max-width:90vw; padding-left:6vw; font-size:clamp(22px,7vw,34px) }
  /* orbit collapses to a vertical stack — cards leave the fixed layer entirely */
  /* clear of the skyline at the top (a hovered card lifts 6px and its border
     was disappearing behind it) and clear of the fixed footer bar at the bottom */
  .cards{ position:static; display:flex; flex-direction:column; gap:14px;
          padding:5vh 6vw 78px; opacity:1 !important; pointer-events:auto !important;
          background:var(--ink) }
  /* The grow-out-of-the-type effect is a desktop composition. Here the cards
     are in normal flow, so staging them just leaves a tall empty gap for the
     seven seconds the manifesto takes -- show them straight away. */
  .cards.staged .card{ transform:none !important; opacity:1 !important; pointer-events:auto !important }
  .cards .card{ position:relative; left:auto !important; top:auto !important;
                width:100% !important; height:44vw !important; animation:none !important }
  .grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:20vh }
  .viewer-box{ width:92vw }
  .viewer-nav.prev{ left:2px } .viewer-nav.next{ right:2px }
  /* brand mark shrinks to a portrait + nav row and the manifesto starts below
     it, rather than running underneath */
  /* in flow at the top, not floating over the type */
  .brandmark{ position:static; width:auto; margin:calc(var(--lb) + 14px) 0 0;
              display:grid; grid-template-columns:96px 1fr; gap:0 14px;
              align-items:center; padding:0 6vw; text-align:left }
  .bm-por{ grid-row:1 / span 3; margin:0 }
  .bm-name{ margin:0 } .bm-title{ margin:3px 0 0 }
  .bm-nav{ justify-content:flex-start; margin-top:7px }
  .tm-card{ grid-column:1 / -1; margin-top:12px }
  .cold{ min-height:auto; padding-bottom:6vh }

  .bm-por{ width:96px; height:96px }
  .tm-card{ height:84px; margin-top:10px }
  .tm-card b{ font-size:11px }
  .tm-go{ display:none }
  .bm-name{ font-size:12px; margin-top:8px }
  .bm-title{ font-size:7px }
  .bm-nav{ gap:9px; margin-top:8px; padding-top:7px }
  .bm-nav a{ font-size:8px; letter-spacing:.12em }
  .manifesto{ padding-top:2.5vh; max-width:88vw }
}

/* ═══════════════════════════════════ NO JAVASCRIPT ══════════════════════ */
/* Overlays become ordinary stacked, anchor-linked sections. */
.no-js .overlay{
  position:static; bottom:auto; opacity:1; transform:none; visibility:visible;
  overflow:visible; border-top:1px solid var(--hair); background:var(--ink);
}
.no-js .overlay .x{ display:none }
.no-js .cards{ position:static; display:flex; gap:16px; padding:0 6vw 50px; background:var(--ink) }
.no-js .cards .card{
  position:relative; left:auto; top:auto; width:auto; flex:1; height:34vw; animation:none;
}
.no-js .viewer{ display:none }
.no-js .about{ min-height:auto }

/* ═══════════════════════════════ REDUCED MOTION ═════════════════════════ */
/* Fully static and fully readable. Every sequence resolves to its end state. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
  }
  .seq .m-line,.m-line{ opacity:1 !important; transform:none !important }
  .cards{ position:static; display:flex; gap:16px; padding:0 6vw 50px; background:var(--ink) }
  .cards .card{ position:relative; left:auto !important; top:auto !important;
                width:auto !important; flex:1; height:34vw !important }
  .bar::after{ width:100% }
  .ring-inner{ animation:none }
}


/* A short desktop window cannot fit the single-page layout either. Rather than
   clip the cards, let it scroll. */
@media (max-height:760px){
  html,body{ overflow:auto; height:auto }
}
/* Footer links read as links without needing a hover: gold and underlined.
   .lic is the license numbers, .foot-grid .also-link the three sites. */
.lic, .foot-grid a[target="_blank"]{
  color:var(--gold);
  border-bottom:1px solid rgba(201,168,76,.45);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.lic{ white-space:nowrap }
.lic:hover, .foot-grid a[target="_blank"]:hover{
  color:var(--cream); border-bottom-color:var(--cream);
}
.ext{
  display:inline-block; margin-left:4px; font-size:9px; color:var(--gold);
  transform:translateY(-1px);
}
.lic:hover .ext{ color:var(--cream) }
/* ── the cards arrive after the manifesto resolves ───────────────────────── */
/* They start small and displaced toward the type, then settle into place, so
   they read as growing out of the words rather than simply appearing.
   Scale starts at .74, never 0 -- the motion grammar forbids scale-from-zero. */
.cards.staged .card{
  opacity:0; pointer-events:none;
  transition:opacity .85s var(--ease), transform .95s var(--ease);
}
.cards.staged .card[data-slot="0"]{ transform:translate(1vw,-23vh) scale(.74) }
.cards.staged .card[data-slot="1"]{ transform:translate(-10vw,-23vh) scale(.74) }
.cards.staged .card[data-slot="2"]{ transform:translate(-21vw,-23vh) scale(.74) }

.cards.staged.grown .card{ opacity:1; transform:none; pointer-events:auto }
.cards.staged.grown .card[data-slot="1"]{ transition-delay:.09s }
.cards.staged.grown .card[data-slot="2"]{ transition-delay:.18s }

/* hover must still work once they have landed */
.cards.staged.grown .card:hover{ transform:translateY(-6px) }

@media (prefers-reduced-motion: reduce){
  .cards.staged .card{ opacity:1 !important; transform:none !important; pointer-events:auto !important }
}
/* ── contact form ────────────────────────────────────────────────────────── */
.contact-inner{ max-width:880px }
.cform{ margin-top:34px }
.cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
.cf-field{ display:block; margin-bottom:18px }
.cf-field > span{
  display:block; font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); margin-bottom:7px;
}
.cf-field > span i{ font-style:normal; color:var(--dimmer); letter-spacing:.12em }
.cf-field input,.cf-field textarea{
  width:100%; padding:11px 13px; font-family:var(--sans); font-size:14px;
  color:var(--cream); background:rgba(20,28,38,.9);
  border:1px solid var(--hair); border-radius:0; resize:vertical;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.cf-field input:focus,.cf-field textarea:focus{
  outline:none; border-color:var(--gold); background:rgba(20,28,38,1);
}
.cf-field input:user-invalid,.cf-field textarea:user-invalid{ border-color:#b4553f }

/* honeypot: off-screen, never shown, never announced */
.cf-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

.cf-actions{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  margin-top:8px; padding-top:20px; border-top:1px solid var(--hair);
}
.cf-send{
  font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); background:var(--gold); border:1px solid var(--gold);
  padding:13px 24px; cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.cf-send:hover{ background:transparent; color:var(--gold) }
.cf-send[disabled]{ opacity:.5; cursor:default }
.cf-note{ margin:0; font-size:11.5px; color:var(--dimmer); flex:1 1 240px }

.cf-status{ margin:18px 0 0; font-size:13.5px; min-height:1.2em }
.cf-status.ok{ color:var(--gold) }
.cf-status.bad{ color:#e0a08c }
.cf-status a{ color:var(--gold); border-bottom:1px solid var(--hair) }

@media (max-width:720px){
  .cf-row{ grid-template-columns:1fr; gap:0 }
}
/* ── scroll cue: only where the page actually scrolls ────────────────────── */
.scroll-cue{ display:none }
@media (max-width:900px){
  .scroll-cue{
    display:flex; flex-direction:column; align-items:center; gap:2px;
    position:absolute; left:0; right:0; bottom:calc(var(--lb) + 6px); z-index:26;
    margin:0; color:var(--gold); pointer-events:none;
    animation:cueBreathe 2.6s var(--ease) infinite;
  }
  .scroll-cue span{
    font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
    padding:4px 10px; border-radius:2px;
    background:rgba(6,10,15,.72);
    text-shadow:0 1px 6px rgba(6,10,15,1);
  }
  .scroll-cue em{
    font-style:normal; font-size:20px; line-height:.7;
    text-shadow:0 1px 8px rgba(6,10,15,.95);
  }
}
/* subtle: it grows and softens, it does not bounce */
@keyframes cueBreathe{
  0%,100%{ opacity:.6; transform:scale(.95) }
  50%    { opacity:1;   transform:scale(1.06) }
}
@media (prefers-reduced-motion: reduce){
  .scroll-cue{ animation:none; opacity:.85 }
}
/* ── certificate lightbox ────────────────────────────────────────────────── */
.cert{ position:fixed; inset:0; z-index:96; display:flex; align-items:center; justify-content:center }
.cert[hidden]{ display:none }
.cert-scrim{ position:absolute; inset:0; background:rgba(6,10,15,.86) }
.cert-box{
  position:relative; z-index:2; margin:0; max-width:min(880px,92vw); max-height:88vh;
  background:var(--ink-2); border:1px solid var(--gold); padding:14px;
  display:flex; flex-direction:column; gap:12px;
}
.cert-box img{
  max-width:100%; max-height:70vh; object-fit:contain; background:#fff;
  border:1px solid var(--hair);
}
.cert-box figcaption{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.cert-box figcaption b{ font-family:var(--serif); font-size:16px }
.cert-box figcaption a{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold) }
.cert-box figcaption a:hover{ color:var(--cream) }
.cert-x{ position:absolute; top:-1px; right:-1px; padding:8px 12px }
/* ── TrueMatch: the consumer landing sections ────────────────────────────── */
.tm-hero{
  font-family:var(--serif); font-size:clamp(20px,2.6vw,32px); line-height:1.25;
  margin:26px 0 0; max-width:24ch; color:var(--cream);
}
.tm-sec{ margin:0 0 18px }
.tm-rule{ height:1px; background:var(--hair); margin:44px 0 34px }

.tm-pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:30px 0 0 }
.tm-pillars li{ border-top:1px solid var(--gold); padding-top:14px }
.tm-pillars b{ display:block; font-family:var(--serif); font-size:17px }
.tm-pillars span{ display:block; font-size:12.5px; color:var(--dim); margin-top:6px; line-height:1.55 }

.tm-benefits{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px 30px }
.tm-benefits li{
  position:relative; padding-left:24px; font-size:14.5px; color:var(--cream); line-height:1.5;
}
.tm-benefits li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:9px; height:9px; border:1px solid var(--gold); border-radius:50%;
}
.tm-benefits li::after{
  content:""; position:absolute; left:3px; top:calc(.5em + 3px);
  width:3px; height:3px; border-radius:50%; background:var(--gold);
}

.tm-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px }
.tm-steps li{
  border-left:1px solid var(--hair); padding:4px 0 4px 13px;
  transition:border-color .3s var(--ease);
}
.tm-steps li:hover{ border-left-color:var(--gold) }
.tm-steps i{
  display:block; font-style:normal; font-size:10px; letter-spacing:.2em; color:var(--gold-dark);
}
.tm-steps b{ display:block; font-family:var(--serif); font-size:14.5px; margin-top:5px; line-height:1.25 }

.tm-tiles,.tm-foundation{ display:grid; gap:22px }
.tm-tiles{ grid-template-columns:repeat(4,1fr) }
.tm-foundation{ grid-template-columns:repeat(3,1fr) }
.tm-tiles li,.tm-foundation li{
  border:1px solid var(--hair); padding:18px 16px;
  background:linear-gradient(160deg, rgba(20,28,38,.75), rgba(11,17,25,.75));
}
.tm-tiles b,.tm-foundation b{ display:block; font-family:var(--serif); font-size:16px; color:var(--gold) }
.tm-tiles span,.tm-foundation span{
  display:block; font-size:12.5px; color:var(--dim); margin-top:7px; line-height:1.55;
}

@media (max-width:1100px){
  .tm-steps{ grid-template-columns:repeat(2,1fr) }
  .tm-tiles{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:720px){
  .tm-pillars,.tm-benefits,.tm-steps,.tm-tiles,.tm-foundation{ grid-template-columns:1fr }
  .tm-rule{ margin:32px 0 26px }
}
/* ── phone-width footer bar ──────────────────────────────────────────────── */
/* `white-space:nowrap` on the bar's three lines set a hard minimum width that
   the whole page could not shrink below — the layout simply refused to go
   narrow. On a phone the bar carries the two things worth having: how to call
   and how to write. */
@media (max-width:720px){
  .foot-bar{ gap:10px; padding:0 6px; min-height:44px }
  .foot-bar p{ white-space:normal; font-size:10.5px }
  .fb-id{ display:none }                 /* name and brokerage are on the page itself */
  .fb-eho-t{ display:none }              /* the mark alone says it */
  .fb-eho{ order:-1; flex:none; gap:0 }
  .fb-reach{
    flex:1 1 auto; justify-content:flex-end; gap:10px;
    min-width:0; overflow:hidden;
  }
  .fb-reach a{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  .foot-toggle{ width:30px; height:30px }
}

/* Nothing may set a floor the viewport cannot go under. */
@media (max-width:480px){
  .foot-bar{ gap:8px }
  .fb-reach{ gap:8px; font-size:10px }
  .cf-actions{ gap:12px }
  .sheet-inner,.contact-inner{ padding-left:5vw; padding-right:5vw }
}
/* the university reads as a link in running text, same treatment as the
   license numbers in the footer */
.about-edu .uni{ white-space:normal }
.about-edu{ color:var(--dim) }
/* Staged in the MARKUP, not by script: adding the class from JS meant the cards
   painted once at full opacity and then visibly fled upward on first load. */
.no-js .cards.staged .card{ opacity:1 !important; transform:none !important; pointer-events:auto !important }
/* the university trigger is a button, so it needs the link treatment explicitly */
button.uni{
  font:inherit; background:none; border:0; padding:0; cursor:pointer;
  color:var(--gold); border-bottom:1px solid rgba(201,168,76,.45);
}
button.uni:hover{ color:var(--cream); border-bottom-color:var(--cream) }
/* ── cards: the plate animates on hover ──────────────────────────────────── */
/* The video sits over its own plate and fades in on hover, so the still is
   always what loads and nothing downloads until the visitor reaches for it. */
.card-vid{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .55s var(--ease); pointer-events:none; z-index:1;
}
.card-vid.on{ opacity:1 }
.card-plate::after{ z-index:2 }        /* the scrim stays above the motion */
.card-cap{ z-index:3 }

@media (hover:none), (prefers-reduced-motion: reduce){
  .card-vid{ display:none }            /* no hover to trigger it, so do not ship it */
}
/* ── phone and tablet refinements ────────────────────────────────────────── */
@media (max-width:900px){
  /* Her name leads the phone view: double size, and the whole block pulled up
     to the top of the page. On a phone the brand mark is in normal flow above
     the cold open, so there is no letterbox to clear here — the old
     `var(--lb)` offset was buying a gap for nothing. */
  /* Photo hard to the top-left: `align-items:start` lifts it out of the vertical
     centring it inherited (it spans all three text rows, so centring pushed it
     down as the name grew), and the left padding is cut from 6vw to 3vw. The
     right padding stays wider — that is the edge the brokerage line runs at. */
  .brandmark{ margin-top:10px; align-items:start; padding:0 5vw 0 3vw }
  .bm-por{ margin-top:2px }
  /* readable on a phone, not desktop micro-type.
     `white-space:nowrap` is the guarantee: her name is never allowed to break
     across two lines, whatever the font or the width. The sizes below were found
     by stepping down 1px at a time and counting line boxes — see
     scratchpad fit-name.js in review notes — and each is paired with a fluid cap
     so a narrower viewport shrinks the type instead of overflowing it. */
  .bm-name{ font-size:34px; line-height:1.08; white-space:nowrap }
  .bm-title{ font-size:11.5px; letter-spacing:.15em }
  .bm-nav a{ font-size:13px; letter-spacing:.13em }
  .bm-nav{ gap:14px }
  /* the cue belongs on the skyline's lower edge, not floating above it */
  .scroll-cue{ bottom:calc(var(--lb) + 2px) }
}
@media (max-width:720px){
  /* 6vw of side padding was affordable at a 16px name. At 32px it is not: the
     text column drops to ~234px and "REALTOR® · RE/MAX INNOVATIONS" breaks
     between RE/MAX and INNOVATIONS. 5vw plus slightly tighter tracking holds the
     brokerage line whole. The name itself is allowed to wrap to two lines — at
     double size it reads as a deliberate stacked lockup, and forcing it onto one
     line would mean shrinking either the name or her photograph. */
  .brandmark{ margin-top:8px; padding:0 5vw 0 3vw }
  /* 32px wrapped; stepped down to 29px, which is the largest that holds one
     line (239px of text in a 241px column at 381px wide). That is only 2px of
     slack, and Georgia is absent on most Android devices — the serif fallback is
     wider — so the fluid cap trims the size on narrow viewports rather than
     betting the layout on one font's metrics. */
  .bm-name{ font-size:min(29px, calc((92vw - 112px) * 0.115)); line-height:1.08 }
  .bm-title{ font-size:11px; letter-spacing:.11em } /* +2 from 9 */
  .bm-nav a{ font-size:12.5px; letter-spacing:.11em } /* +2 from 10.5 */
  .manifesto{ padding-top:2vh }
}

/* Small phones: the doubled name still leads, but 320px cannot carry the full
   +2pt header at a 96px portrait — the brokerage line and the nav both ran off
   the right edge. Measured at 320: 5vw padding leaves 288px, the portrait and
   gap take 110, and "REALTOR® · RE/MAX INNOVATIONS" needs ~220 in the 178 that
   remain. A smaller portrait and one point back on the two small lines fixes it
   while staying above the sizes this started from.

   ORDER MATTERS: this block must stay AFTER the max-width:720px block above it.
   Both set .bm-name at the same specificity, so whichever comes last in the file
   wins — and with it placed earlier, a 320px phone was picking up the 720px
   rule's fluid formula and rendering the name at 21px instead of the ~25px it
   can actually carry on one line. */
@media (max-width:380px){
  .brandmark{ grid-template-columns:74px 1fr; gap:0 11px; padding:0 3vw 0 2.5vw }
  .bm-por{ width:74px; height:74px }
  /* 28px wrapped here too; 26px is the largest single-line size at 320px. */
  .bm-name{ font-size:min(26px, calc((94.5vw - 87px) * 0.115)) }
  .bm-title{ font-size:9.5px; letter-spacing:.04em }
  .bm-nav{ gap:9px }
  .bm-nav a{ font-size:10.5px; letter-spacing:.04em }
}


/* attribution sits beside the picture it belongs to */
#cert-credit{
  font-size:10px; letter-spacing:.06em; color:var(--dimmer);
  flex:1 1 100%; order:3;
}
/* ── TrueMatch marks ─────────────────────────────────────────────────────── */
/* Authored here rather than imported: one weight, one colour, so the set reads
   as a system instead of a pile of borrowed icons. */
.tm-ico{
  width:26px; height:26px; color:var(--gold); display:block; margin-bottom:11px;
  opacity:.92;
}
.tm-pillars li{ border-top:1px solid var(--gold); padding-top:16px }
.tm-tiles li,.tm-foundation li{ padding:20px 18px }

/* the seven steps read as one run, not seven boxes */
.tm-steps[data-rail]{ position:relative }
.tm-steps[data-rail] li{
  position:relative; border-left:2px solid rgba(201,168,76,.22);
  padding:6px 0 6px 15px; transition:border-color .3s var(--ease);
}
.tm-steps[data-rail] li::before{
  content:""; position:absolute; left:-5px; top:12px;
  width:8px; height:8px; border-radius:50%;
  background:var(--ink); border:1.5px solid var(--gold);
}
.tm-steps[data-rail] li:hover{ border-left-color:var(--gold) }
.tm-steps[data-rail] li:hover::before{ background:var(--gold) }
/* ── TrueMatch: her product's own graphics ───────────────────────────────── */
/* Ported from truematchhome.com (same owner, Obscure LLC) rather than authored,
   so this sheet and the product site read as one brand. The icons are raster
   WebP at 112px and every one is lazy — the overlay is closed on load, so none
   of this touches the initial payload. `.tm-ico` was a stroked <svg> and is now
   an <img>: the sizing rules stay, `color` no longer does anything, and the two
   drop-shadows are truematchhome.com's own treatment. */
/* The gold glow is legibility, not decoration. These are hairline-stroke marks
   on an almost-black ground; the halo is what separates the stroke from the
   background at 34-44px. Lifted from .32 to .55 with the artwork itself
   brightened in tools/tm-assets.py — the two work together, neither alone was
   enough. */
.tm-ico{
  width:44px; height:44px; display:block; margin-bottom:12px; opacity:1;
  filter:drop-shadow(0 0 7px rgba(238,198,92,.55)) drop-shadow(0 2px 3px rgba(0,0,0,.45));
}

/* the banner — her hero composition: headline left, lockup right, dusk plate */
.tm-banner{
  position:relative; overflow:hidden; margin:26px 0 0;
  border:1px solid var(--hair);
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:24px;
  padding:34px 32px; min-height:250px;
}
.tm-banner-plate{
  position:absolute; inset:0; background-size:cover; background-position:50% 62%;
  z-index:0;
}
/* the plate is photography under text, so the scrim is not optional — it is
   what holds the lead paragraph above AA. Measured in review/_contrast.py. */
/* Measured, not judged by eye. At .88 over the copy zone the lead paragraph
   came back 3.36:1 against the lit windows — an AA failure at 15px. The scrim
   is now .97/.95 across the text and the lead runs at .78 rather than --dim's
   .55. review/_banner-contrast.py re-measures it from a text-free render. */
.tm-banner-plate::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(8,12,18,.97) 0%, rgba(8,12,18,.95) 46%, rgba(8,12,18,.74) 74%, rgba(8,12,18,.5) 100%);
}
.tm-banner-copy{ position:relative; z-index:2; max-width:60ch }
.tm-banner .tm-hero{ margin:0 }
.tm-banner .sheet-lead{ margin:16px 0 0; color:rgba(247,239,218,.78) }
.tm-banner-logo{
  position:relative; z-index:2; width:clamp(120px,15vw,186px); height:auto;
  justify-self:end; opacity:.96;
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.5));
}

/* the seven steps: icon beside the number, rail unchanged */
.tm-steps[data-rail] li{ display:flex; align-items:flex-start; gap:11px }
.tm-step-ico{
  width:36px; height:36px; flex:none; margin:1px 0 0;
  filter:drop-shadow(0 0 6px rgba(238,198,92,.52)) drop-shadow(0 2px 3px rgba(0,0,0,.42));
}
.tm-step-t{ display:block; min-width:0 }

/* outcome tiles get her circle-medallion idiom */
/* The icons are tight-cropped and centred by tools/tm-assets.py, so these sizes
   are the glyph itself — not a glyph plus whatever padding the source happened
   to carry. Before that fix a 32px box held roughly 22px of mark sitting high,
   under a stray divider rule. */
/* Selector scoped to `.tm-tiles` ON PURPOSE, and it is the whole bug.
   `.tm-tiles span` at line 865 styles each tile's description — and `.tm-med` is
   a <span> inside `.tm-tiles`, so that rule matched it too. At (0,1,1) it
   outranks a bare `.tm-med` at (0,1,0) whatever the source order, so the
   medallion was never a flex or grid container at all: it stayed `display:block`
   and also picked up `margin-top:7px`. The mark sat at the top of the circle,
   measured at -22% to -27% of its diameter.
   `.tm-tiles .tm-med` is (0,2,1) and wins. margin-top is reset explicitly
   because that rule set it and nothing else was going to. */
.tm-tiles .tm-med{
  width:60px; height:60px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(201,168,76,.45); background:rgba(201,168,76,.07);
  margin:0 0 14px; font-size:0;
}
.tm-tiles .tm-med .tm-ico{ width:38px; height:38px; margin:0; flex:none }

/* her check-list idiom, replacing the ring-and-dot bullet */
.tm-benefits li::before{
  content:"✓"; left:0; top:0;
  width:auto; height:auto; border:0; border-radius:0;
  color:var(--gold); font-size:13px; line-height:1.62;
}
.tm-benefits li::after{ content:none }

/* the foundation triangle */
.tm-found-intro{ color:var(--dim); font-size:14px; max-width:58ch; margin:16px 0 0 }
/* A lighter ground so the gold triangle and the node rings are actually
   legible — on flat ink they all but disappeared. */
.tm-triad-panel{
  max-width:600px; margin:32px auto 36px; padding:30px 40px 52px;
  border:1px solid rgba(201,168,76,.24); border-radius:16px;
  background:
    radial-gradient(80% 70% at 50% 42%, rgba(201,168,76,.07), transparent 70%),
    linear-gradient(158deg, rgba(31,46,64,.62), rgba(18,26,36,.58));
}
.tm-triad{
  position:relative; width:min(420px,100%); margin:0 auto;
  aspect-ratio:420 / 360;
}
.tm-triad-tri{ position:absolute; inset:0; width:100%; height:100%; overflow:visible }
.tm-triad-logo{
  position:absolute; left:50%; top:54%; transform:translate(-50%,-50%);
  width:40%; height:auto; opacity:.92;
}
.tm-node{
  position:absolute; width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;   /* see .tm-med */
  border:1px solid rgba(201,168,76,.8); background:#0C131C;
  /* the ring reads as the panel's own ground, so the node punches a clean hole
     in the triangle stroke instead of sitting on top of it */
  box-shadow:0 0 0 5px rgba(24,35,49,.92);
}
.tm-node img{
  width:36px; height:36px;
  filter:drop-shadow(0 0 7px rgba(238,198,92,.55));
}
/* each node is named, matching the three cards below word for word */
.tm-node i{
  position:absolute; left:50%; transform:translateX(-50%);
  font-style:normal; white-space:nowrap;
  font-family:var(--serif); font-size:12.5px; line-height:1;
  color:var(--cream); text-shadow:0 1px 7px rgba(8,12,18,.95);
}
.n-top i   { bottom:calc(100% + 10px) }
.n-left i,
.n-right i { top:calc(100% + 11px) }
/* percentages are the triangle's own vertices in the 420x360 viewBox */
.n-top  { left:50%;   top:15%;   transform:translate(-50%,-50%) }
.n-left { left:15.2%; top:82.8%; transform:translate(-50%,-50%) }
.n-right{ left:84.8%; top:82.8%; transform:translate(-50%,-50%) }

@media (max-width:900px){
  .tm-banner{ grid-template-columns:1fr; padding:26px 22px; min-height:0 }
  .tm-banner-logo{ justify-self:start; width:clamp(96px,22vw,140px) }
  .tm-banner-plate{ background-position:50% 28%; }
  .tm-banner-plate::after{
    background:linear-gradient(180deg, rgba(8,12,18,.9) 0%, rgba(8,12,18,.86) 60%, rgba(8,12,18,.7) 100%);
  }
}
@media (max-width:720px){
  .tm-ico{ width:34px; height:34px }
  .tm-triad-panel{ padding:22px 14px 44px; margin:26px auto 30px; border-radius:13px }
  .tm-triad{ width:min(300px,100%) }
  .tm-node{ width:48px; height:48px }
  .tm-node img{ width:29px; height:29px }
  /* the two lower names would collide at this width, so they stack under their
     own node and wrap instead of running as one line */
  .tm-node i{ font-size:11px; white-space:normal; width:96px; text-align:center }
  .n-left i,
  .n-right i{ top:calc(100% + 8px) }
}

/* ── closed overlays must not download their own images ──────────────────── */
/* Measured, and it was a surprise: `visibility:hidden` does NOT stop a lazy
   image from loading. The closed overlay is position:fixed with its box still
   filling the viewport, so Chrome's lazy heuristic considers every image in it
   "near the viewport" and fetches the lot — 221 KB of TrueMatch graphics
   downloaded on the HOME page, where the sheet is shut. Total cold load went
   1267 -> 1488 KB against a 1536 KB budget.
   `content-visibility:hidden` skips the whole subtree, so nothing inside is
   laid out, painted or fetched until the overlay opens. The .open fade is
   unaffected — it animates the overlay element, not its contents.
   Older Safari ignores the property and simply behaves as it did before. */
.overlay:not(.open){ content-visibility:hidden }
/* Without JS the overlays ARE the page — they must render and load normally. */
.no-js .overlay{ content-visibility:visible }