/* ════════════════════════════════════════════════════════════
   Literal Humans — the shots
   One idea per screen. Almost no boxes. The 3D world behind
   carries the atmosphere, so the type can stay quiet.
   ════════════════════════════════════════════════════════════ */

/* ═══════════ BOOT ═══════════ */
.boot{
  position:fixed; inset:0; z-index:900;
  display:grid; place-items:center; background:var(--cream);
  transition:opacity .9s var(--ease);
}
.boot.is-done{ opacity:0; pointer-events:none; }
.boot__in{ position:relative; z-index:3; width:min(520px,80vw); }
.boot__mark{ position:relative; overflow:hidden; }
.boot__mark svg{
  width:100%; height:auto; color:var(--ink); display:block;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.5s var(--exp);
}
.boot.is-armed .boot__mark svg{ clip-path:inset(0 0 0 0); }
.boot__mark i{
  position:absolute; top:-8%; bottom:-8%; width:2px; left:0;
  background:var(--coral); box-shadow:0 0 22px var(--coral);
  transition:left 1.5s var(--exp),opacity .4s .9s;
}
.boot.is-armed .boot__mark i{ left:100%; opacity:0; }
.boot__meta{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:22px; padding-top:14px; border-top:1px solid var(--line);
  font-size:10px; font-weight:800; letter-spacing:.34em; text-transform:uppercase;
  color:var(--muted);
}
.boot__meta b{ color:var(--coral); font-variant-numeric:tabular-nums; }
.boot__cut{
  position:absolute; left:0; right:0; height:50%; z-index:1; background:var(--cream);
  transition:transform 1.1s var(--exp);
}
.boot__cut--t{ top:0; } .boot__cut--b{ bottom:0; }
.boot.is-done .boot__cut--t{ transform:translateY(-100%); }
.boot.is-done .boot__cut--b{ transform:translateY(100%); }

/* ═══════════ 01 · HERO ═══════════ */
.hero__band{ will-change:transform,opacity; }
.hero .eyebrow{ margin-bottom:clamp(18px,3vh,32px); }
.hero__h1{
  font-size:clamp(37px,6.6vw,98px);
  font-weight:900; line-height:.94; letter-spacing:-.052em; color:var(--ink);
  margin:0 0 clamp(20px,3.4vh,38px);
}
.mline{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.02em; }
.mline > i{
  display:block; font-style:normal;
  transform:translateY(105%) rotate(2.5deg);
  transition:transform 1.25s var(--exp);
  transition-delay:calc(var(--ml,0) * 110ms);
}
.is-ready .mline > i,.mline > i.is-in{ transform:none; }
.hero__sub{
  font-size:clamp(15px,.9vw + 12px,19px); color:var(--muted);
  max-width:40ch; margin-bottom:clamp(22px,3.4vh,38px);
}
.hero__cue{
  position:absolute; left:var(--gut); bottom:clamp(22px,4vh,44px);
  display:flex; align-items:center; gap:12px;
  font-size:9.5px; font-weight:800; letter-spacing:.36em; text-transform:uppercase; color:var(--muted);
}
.hero__cue i{ display:block; width:52px; height:1px; background:var(--line-3); position:relative; overflow:hidden; }
.hero__cue i::after{
  content:''; position:absolute; inset:0 auto 0 0; width:40%;
  background:var(--coral); animation:sweep 2.1s var(--ease) infinite;
}

/* ═══════════ 02 · MANIFESTO ═══════════ */
.mani__l{
  font-size:clamp(33px,6.9vw,100px);
  font-weight:900; letter-spacing:-.048em; line-height:1.02; color:var(--ink);
  margin:0 0 clamp(22px,4vh,44px); max-width:20ch;
  display:flex; flex-wrap:wrap; gap:0 .26em;
}
.mani__l .w{
  display:inline-block; opacity:.1; filter:blur(7px); transform:translateY(.16em);
  transition:opacity .55s var(--ease),filter .55s var(--ease),transform .6s var(--out);
}
.mani__l .w.is-lit{ opacity:1; filter:none; transform:none; }
.mani__l .w.dim.is-lit{ opacity:.24; }
.swap{ position:relative; display:inline-grid !important; }
.swap__o,.swap__n{ grid-area:1/1; display:block; font-weight:inherit; }
.swap__o{ color:var(--muted); position:relative; transition:opacity .45s var(--ease),transform .5s var(--out); }
.swap__o::after{
  content:''; position:absolute; left:-.05em; right:100%; top:52%; height:.08em;
  background:var(--coral); border-radius:99px; transition:right .6s var(--exp);
}
.swap__n{
  color:var(--coral); opacity:0;
  transform:translateY(.45em) rotateX(-65deg); transform-origin:50% 0;
  transition:opacity .5s var(--ease),transform .65s var(--out);
}
.mani.is-swapped .swap__o::after{ right:-.05em; }
.mani.is-swapped .swap__o{ opacity:0; transform:translateY(-.36em); }
.mani.is-swapped .swap__n{ opacity:1; transform:none; }
.mani__s{
  max-width:52ch; font-size:clamp(15px,.85vw + 12px,19px); color:var(--muted);
  opacity:0; transform:translateY(18px);
  transition:opacity .8s var(--ease),transform .8s var(--out);
}
.mani.is-swapped .mani__s{ opacity:1; transform:none; }

/* ═══════════ 03 · SIGNAL ═══════════ */
.sig3__top{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; }
.sig3__top .cue{ margin:0; }
.sig3__states{ display:flex; gap:7px; margin-left:auto; }
.st{
  display:inline-flex; align-items:center; gap:8px; padding:6px 15px; border-radius:100px;
  border:1px solid var(--line); background:rgba(251,248,241,.42);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-size:10px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  transition:color .45s var(--ease),border-color .45s,background .45s;
}
.st i{ width:5px; height:5px; border-radius:50%; background:var(--muted); transition:background .45s,box-shadow .45s; }
.st.is-on{ color:var(--ink); border-color:rgba(255,104,91,.48); background:rgba(255,104,91,.09); }
.st.is-on i{ background:var(--coral); box-shadow:0 0 0 4px rgba(255,104,91,.18); }

.sig3__copy{ position:relative; margin-top:auto; margin-bottom:22px; min-height:clamp(160px,22vh,220px); max-width:46ch; }
.beat{
  position:absolute; left:0; right:0; bottom:0;
  opacity:0; transform:translateY(26px) scale(.97); filter:blur(8px);
  transition:opacity .65s var(--ease),transform .8s var(--out),filter .65s;
  pointer-events:none;
}
.beat.is-on{ opacity:1; transform:none; filter:none; pointer-events:auto; }
.beat h2{
  font-size:clamp(27px,3.4vw,58px); color:var(--ink); margin-bottom:.34em; letter-spacing:-.045em;
}
.beat p{ font-size:clamp(15px,.9vw + 12px,19px); color:var(--muted); margin:0; }
.sig3__copy::before{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  inset:-70px -160px -90px calc(var(--gut) * -1);
  background:radial-gradient(88% 108% at 20% 64%,rgba(251,248,241,.95) 0%,rgba(251,248,241,.8) 46%,rgba(251,248,241,0) 78%);
}
.meter{
  display:flex; align-items:center; gap:13px;
  font-size:9.5px; font-weight:800; letter-spacing:.32em; text-transform:uppercase; color:var(--muted);
}
.meter div{ flex:1; height:1.5px; background:rgba(46,47,55,.12); overflow:hidden; }
.meter i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--slate),var(--coral)); }

/* ═══════════ 04 · TRIPTYCH ═══════════ */
.trip{ padding:clamp(70px,13vh,150px) 0; }
.trip__in{
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,50px);
  perspective:1400px;
}
.tri{
  border-top:1px solid var(--line); padding-top:24px;
  transform-style:preserve-3d; will-change:transform,opacity;
}
.tri span{ display:block; font-size:10.5px; font-weight:800; letter-spacing:.3em; color:var(--coral); margin-bottom:18px; }
.tri h3{ font-size:clamp(20px,1.7vw + 12px,32px); color:var(--ink); margin-bottom:.6em; letter-spacing:-.038em; line-height:1.06; }
.tri p{ font-size:14.5px; color:var(--muted); margin:0; }

/* ═══════════ 05 · SERVICES REEL ═══════════ */
.reel__stage{
  position:relative; flex:1; min-height:0;
  display:flex; align-items:center;
  perspective:1200px;
}
.sv{
  position:absolute; left:0; right:0; top:50%;
  transform-origin:50% 50%;
  opacity:0; pointer-events:none;
  will-change:transform,opacity;
}
.sv.is-on{ opacity:1; pointer-events:auto; }
.sv__n{
  display:block; font-size:10.5px; font-weight:800; letter-spacing:.34em;
  color:var(--coral); margin-bottom:clamp(10px,1.6vh,20px);
}
.sv h2{
  font-size:clamp(42px,8.6vw,140px);
  line-height:.86; letter-spacing:-.056em; color:var(--ink);
  margin:0 0 clamp(14px,2.4vh,30px);
}
.sv p{ max-width:44ch; font-size:clamp(14.5px,.8vw + 12px,18px); color:var(--muted); margin:0; }

.reel__ticks{ display:flex; gap:6px; margin-top:auto; }
.reel__ticks li{
  flex:1; height:2px; background:rgba(46,47,55,.13); overflow:hidden; border-radius:2px;
}
.reel__ticks li i{ display:block; height:100%; width:0; background:var(--coral); }

/* ═══════════ 06 · WORK ═══════════ */
/* the deck is deliberately wider than the viewport, so the clip lives here */
.work .shot__in{ padding-inline:0; max-width:none; overflow:hidden; }
.work__hd{
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);
  display:flex; align-items:center; gap:26px;
}
.work__hd .cue{ margin:0; }
.work__prog{ flex:1; max-width:280px; height:1.5px; background:rgba(46,47,55,.12); overflow:hidden; }
.work__prog i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--coral),var(--coral-hi)); }

.work__deck{
  flex:1; min-height:0; margin-top:clamp(16px,3vh,34px);
  display:flex; align-items:center; gap:clamp(16px,2vw,34px);
  padding-inline:var(--gut);
  perspective:1500px; perspective-origin:50% 50%;
  will-change:transform;
}
.cs{
  flex:0 0 auto; width:clamp(264px,30vw,400px);
  display:flex; flex-direction:column;
  padding:clamp(22px,2.2vw,34px);
  border:1px solid var(--line); border-radius:20px;
  background:linear-gradient(160deg,rgba(255,255,255,.82),rgba(10,13,22,.72));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transform-style:preserve-3d; will-change:transform,opacity;
}
.cs b{
  font-size:clamp(34px,4.2vw,62px); font-weight:900; letter-spacing:-.05em;
  color:var(--ink); line-height:.9; font-variant-numeric:tabular-nums;
}
.cs small{
  display:block; margin:8px 0 clamp(18px,3vh,34px);
  font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--coral);
}
.cs h3{
  font-size:clamp(15.5px,.9vw + 11px,19px); line-height:1.26; letter-spacing:-.024em;
  color:var(--ink); margin-bottom:.6em; font-weight:800;
}
.cs p{ font-size:13.5px; color:var(--muted); margin-bottom:auto; padding-bottom:20px; }
.cs img{ height:28px; width:auto; max-width:130px; object-fit:contain; opacity:.72; }
.cs em{ font-style:normal; font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }

/* ═══════════ THE HANDSHAKE ═══════════ */
.shake__top{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; }
.shake__top .cue{ margin:0; }
.shake__tags{ display:flex; gap:8px; margin-left:auto; }
.sd{
  display:inline-flex; align-items:center; gap:8px; padding:6px 16px; border-radius:100px;
  border:1px solid var(--line); background:rgba(251,248,241,.42);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-size:10px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  transition:color .5s var(--ease),border-color .5s,background .5s;
}
.sd i{ width:5px; height:5px; border-radius:50%; background:currentColor; }
.sd--h.is-on{ color:var(--coral-hi); border-color:rgba(255,104,91,.5); background:rgba(255,104,91,.09); }
.sd--m.is-on{ color:var(--teal-hi); border-color:rgba(102,226,209,.42); background:rgba(0,173,150,.09); }
.sd--h.is-met,.sd--m.is-met{ color:#FFCE6B; border-color:rgba(255,206,107,.5); background:rgba(255,206,107,.1); }

/* ── the beat cards ──
   The chapter holds one shot for six screens and hands the copy from card to
   card around the clasp, alternating sides so the centre of frame is never
   covered. Cards sit on warm paper rather than glass: the point cloud behind
   them is pale, and a transparent card over pale points reads as a smudge. */
.shake__beats{ position:absolute; inset:0; pointer-events:none; }
.bcard{
  position:absolute; top:50%; width:min(390px,34vw);
  padding:30px 30px 28px; margin:0;
  border-radius:22px; border:1px solid rgba(46,47,55,.10);
  /* Nearly opaque on purpose. At 88% the rabbit's incoming lattice sprays
     straight through the card and the copy becomes unreadable exactly when
     the copy is explaining what the lattice is. */
  background:linear-gradient(180deg,rgba(255,253,249,.975),rgba(252,249,243,.955));
  backdrop-filter:blur(18px) saturate(1.05);
  -webkit-backdrop-filter:blur(18px) saturate(1.05);
  box-shadow:0 24px 60px -34px rgba(46,47,55,.42),0 2px 0 rgba(255,255,255,.7) inset;
  /* --yb is the card's resting offset. It is a variable because the cards are
     centre-anchored on wide screens and foot-anchored on narrow ones, and the
     director writes one transform for both. */
  --yb:-50%;
  opacity:0; transform:translateY(var(--yb)); will-change:transform,opacity;
  transition:opacity .5s var(--ease);
}
.bcard--l{ left:clamp(20px,7vw,110px); }
.bcard--r{ right:clamp(20px,7vw,110px); }
.bcard__no{
  display:flex; align-items:center; gap:9px; margin:0 0 14px;
  font-size:10px; font-weight:800; letter-spacing:.24em; text-transform:uppercase;
  color:var(--coral-lo);
}
.bcard__no i{
  width:7px; height:7px; border-radius:50%; background:var(--coral);
  box-shadow:0 0 0 4px rgba(255,104,91,.16);
}
.bcard h2{
  font-size:clamp(23px,2.5vw,38px); font-weight:900; letter-spacing:-.042em;
  line-height:1.06; color:var(--ink); margin:0 0 .55em;
}
.bcard h2 b{ color:var(--coral-lo); font-weight:900; }
.bcard__p{ margin:0; font-size:14px; line-height:1.72; color:var(--muted); }

/* progress rail — four beats, one dot each */
.shake__rail{
  position:absolute; right:clamp(14px,2.2vw,30px); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:13px; pointer-events:none;
}
.shake__rail li{ display:block; }
.shake__rail i{
  display:block; width:7px; height:7px; border-radius:50%;
  background:rgba(46,47,55,.18); transition:all .45s var(--ease);
}
.shake__rail li.is-on i{
  background:var(--coral); transform:scale(1.45);
  box-shadow:0 0 0 5px rgba(255,104,91,.15);
}

/* letterbox — the frame closing in for the chapter. Solid bars would be
   invisible on cream, so these are soft cream fades instead. */
.lbox{
  position:absolute; left:0; right:0; height:0; z-index:6; pointer-events:none;
  will-change:height;
}
.lbox--t{ top:0;    background:linear-gradient(180deg,var(--cream) 12%,rgba(251,248,241,0)); }
.lbox--b{ bottom:0; background:linear-gradient(0deg,  var(--cream) 12%,rgba(251,248,241,0)); }

/* Their own drawing of the same idea, tucked into the corner as a reference
   rather than sat in the middle competing with the particles. */
.shake__art{
  position:absolute; right:var(--gut); bottom:clamp(52px,9vh,96px);
  width:clamp(150px,19vw,268px); margin:0; pointer-events:none;
  opacity:0; transform:translateY(14px);
  transition:opacity 1s var(--ease),transform 1s var(--out);
}
.shake__art img{ width:100%; height:auto; filter:invert(1) brightness(1.9); opacity:.42; }
.shake.is-met .shake__art{ opacity:1; transform:none; }
.shake__cap{
  margin:auto 0 0; max-width:42ch; font-size:11.5px; letter-spacing:.02em; color:var(--muted);
}

/* Below the width that fits a card either side of the clasp, the cards stop
   alternating and sit in one column at the foot of the frame, so the
   centrepiece keeps the whole upper half of the screen to itself. */
@media (max-width:1080px){
  .bcard,.bcard--l,.bcard--r{
    --yb:0px;
    left:var(--gut); right:var(--gut); width:auto; max-width:none;
    top:auto; bottom:clamp(64px,11vh,120px);
    padding:22px 24px 20px;
  }
  .bcard h2{ font-size:clamp(21px,3.4vw,30px); }
  .bcard__p{ font-size:13px; }
  .shake__art{ display:none; }
  .shake__rail{ right:10px; }
}
@media (max-width:560px){
  .bcard__p{ display:none; }
  .shake__rail{ display:none; }
}

/* ═══════════ THE CREW — peeking over the hill ═══════════
   Literal Humans draw their team as heads popping up over a coral curve.
   This is that illustration, rebuilt with the real faces. */
.crew .shot__in{ padding-bottom:0; overflow:hidden; }
.crew__hd{ max-width:56ch; }
.crew__h{
  font-size:clamp(30px,5.2vw,78px); font-weight:900; letter-spacing:-.048em;
  line-height:.94; color:var(--ink); margin:0 0 .5em;
}
.crew__note{ max-width:46ch; margin:0; font-size:14.5px; color:var(--muted); }
.crew__stage{ position:relative; flex:1; min-height:0; margin-top:clamp(16px,3vh,34px); }
.crew__hill{
  position:absolute; left:-10%; right:-10%; bottom:0; height:38%;
  background:linear-gradient(178deg,var(--coral) 0%,var(--coral-lo) 100%);
  border-radius:50% 50% 0 0 / 34% 34% 0 0;
  box-shadow:0 -40px 90px -50px rgba(255,104,91,.85);
}
.peek{
  position:absolute; bottom:calc(24% + var(--rise,0%));
  width:clamp(56px,6.2vw,90px); margin:0;
  transform:translate(-50%,150%); opacity:0;
  transition:transform 1.05s var(--out),opacity .55s var(--ease);
}
.peek.is-up{ transform:translate(-50%,0); opacity:1; }
.peek img{
  width:100%; aspect-ratio:1; object-fit:cover; object-position:50% 16%;
  border-radius:50%; border:3px solid var(--paper);
  box-shadow:0 14px 26px -12px rgba(46,47,55,.45);
  background:var(--paper);
  transition:transform .5s var(--spring);
}
.peek:hover img{ transform:translateY(-8px) scale(1.07); }

/* Thirteen labels side by side collide into mush, so only the head that has
   just arrived is named — plus whichever one is hovered. The name rides in a
   bubble, the way their illustrations speak. */
.peek figcaption{
  position:absolute; left:50%; top:calc(100% + 12px); transform:translate(calc(-50% + var(--bx,0px)),6px);
  width:max-content; max-width:16ch; text-align:center;
  padding:7px 13px; border-radius:14px;
  background:var(--paper); color:var(--ink);
  box-shadow:0 12px 26px -12px rgba(0,0,0,.6);
  opacity:0; pointer-events:none; z-index:5;
  transition:opacity .4s var(--ease),transform .5s var(--out);
}
/* --bx is set by the director to keep the bubble on screen at the ends of
   the row; the arrow shifts back the other way so it still points at the head. */
.peek figcaption::before{
  content:''; position:absolute; left:50%; top:-5px; width:11px; height:11px;
  margin-left:calc(-5.5px - var(--bx,0px)); background:var(--paper);
  transform:rotate(45deg); border-radius:2px;
}
.peek.is-named figcaption,.peek:hover figcaption{ opacity:1; transform:translate(calc(-50% + var(--bx,0px)),0); }
.peek b{ display:block; font-size:12.5px; font-weight:900; letter-spacing:-.02em; color:var(--ink); }
.peek i{ display:block; font-style:normal; font-size:10px; font-weight:700; color:var(--muted); line-height:1.3; }
.peek em{ display:block; font-style:normal; margin-top:2px; font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--coral-lo); }
.peek--mascot{ width:clamp(74px,8.4vw,124px); }
.peek--mascot img{
  border-radius:0; border:0; background:none; box-shadow:none;
  aspect-ratio:auto; object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.5));
}

/* ═══════════ 08 · BIOS ═══════════ */
.bios{ padding:clamp(70px,13vh,150px) 0; }
.bios__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,48px); }
.bios__grid,.bios__grid>*{ min-width:0; }
.bios blockquote{ margin:0; border-left:1px solid rgba(255,104,91,.4); padding-left:clamp(16px,1.6vw,26px); }
.bios blockquote p{ font-size:14.5px; color:var(--muted); }
.bios cite{
  font-style:normal; font-size:10.5px; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink);
}
.prev{ margin-top:clamp(44px,7vh,84px); }
.prev__win{ position:relative; overflow:hidden; }
.prev .cue{ color:var(--muted); }
/* The edge fade is two overlays rather than a mask on the row: a mask creates
   an isolated group, which would trap the row's own transform work. */
.prev__fade{ position:absolute; top:0; bottom:0; width:9%; pointer-events:none; z-index:2; }
/* the fades live in .prev__win, not .prev — over the row only, never the label */
.prev__fade--l{ left:0; background:linear-gradient(90deg,var(--cream),transparent); }
.prev__fade--r{ right:0; background:linear-gradient(270deg,var(--cream),transparent); }
.prev__row{ display:flex; width:max-content; will-change:transform; }
.prev__set{ display:flex; align-items:center; gap:clamp(30px,5vw,72px); padding-right:clamp(30px,5vw,72px); }
/* Baked to white-on-transparent by prepare-logos.py, so no filter or blend is
   needed here — which also means no stacking context can break them. */
.prev__set img{
  height:clamp(22px,2.2vw,34px); width:auto; max-width:150px; object-fit:contain;
  opacity:.55; transition:opacity .4s;
}
.prev__set img:hover{ opacity:.95; }

/* ═══════════ 09 · CLIENTS (light) ═══════════
   This section was left half-migrated from the first, dark art direction: the
   section itself was overridden to paper further down the file, but every tile
   kept `background:var(--ink)` and the logos are baked charcoal-on-transparent
   — so twelve near-black boxes with invisible logos in them sat on a white
   page. It also referenced `--char`, which is not a token this build defines,
   so the body copy silently fell back to inherit. */
.cl{
  background:var(--paper); color:var(--ink);
  padding:clamp(70px,13vh,150px) 0; position:relative; z-index:3;
}
.cl__wall{
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  border-top:1px solid var(--line-2); border-left:1px solid var(--line-2);
}
.cl__wall,.cl__wall>*{ min-width:0; }
.cl__wall figure{
  margin:0; display:grid; place-items:center; aspect-ratio:16/10;
  padding:clamp(12px,1.8vw,28px); position:relative;
  background:var(--paper);
  border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
  transition:background .45s var(--ease); will-change:transform,opacity;
}
/* a warm tile rather than a whiter white — the ground is already paper */
.cl__wall figure:hover{ background:var(--coral-wash); }
/* Baked to charcoal-on-transparent, so the paper shows through cleanly. */
.cl__wall img{
  max-height:62%; width:auto; object-fit:contain;
  opacity:.5; transition:opacity .5s var(--ease),transform .55s var(--out);
}
.cl__wall figure:hover img{ opacity:1; transform:scale(1.08); }
.cl__line{
  margin:clamp(30px,5vh,56px) 0 0; max-width:56ch;
  font-size:clamp(16px,1.1vw + 12px,22px); color:var(--muted); letter-spacing:-.02em;
}
.cl__line b{ color:var(--ink); font-weight:900; }

/* ═══════════ 10 · CULTURE ═══════════ */
.cult .shot__in{ padding:0; max-width:none; justify-content:flex-end; overflow:hidden; }
.cult__plate{
  position:absolute; inset:0; margin:0; overflow:hidden;
  clip-path:inset(var(--clip,22%) var(--clipx,14%) var(--clip,22%) var(--clipx,14%) round 20px);
  will-change:clip-path;
}
.cult__plate img{ width:100%; height:100%; object-fit:cover; will-change:transform; }
.cult__plate::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(251,248,241,.28) 0%, rgba(251,248,241,0) 26%,
    rgba(251,248,241,.72) 58%, rgba(251,248,241,.97) 82%, var(--cream) 100%);
}
.cult__over{
  position:relative; z-index:2;
  padding:0 var(--gut) clamp(20px,3.4vh,40px);
  width:100%; max-width:var(--maxw); margin-inline:auto;
}
.cult__p{ max-width:44ch; color:var(--ink-2); font-size:clamp(14.5px,.8vw + 12px,17.5px); }
.perks{ display:flex; flex-wrap:wrap; gap:8px; margin:clamp(16px,2.6vh,28px) 0; }
.perks li{
  padding:8px 16px; border-radius:100px;
  border:1px solid rgba(251,248,241,.22); background:rgba(251,248,241,.4);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-size:12.5px; font-weight:600; color:var(--ink);
  will-change:transform,opacity;
}
.cult__badge{ display:flex; align-items:center; gap:14px; }
.cult__badge img{ height:42px; width:auto; }
.cult__badge span{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* ═══════════ 11 · VALUES ═══════════ */
.val{ padding:clamp(70px,13vh,150px) 0; }
.val__list{ border-top:1px solid var(--line); }
.v{ border-bottom:1px solid var(--line); will-change:transform,opacity; }
.v summary{
  display:flex; align-items:center; gap:clamp(14px,2.4vw,34px);
  padding:clamp(18px,2.4vw,30px) 2px; cursor:pointer; list-style:none;
  font-size:clamp(21px,3vw,44px); font-weight:900; letter-spacing:-.042em; color:var(--ink);
  transition:padding-left .5s var(--out),color .35s;
}
.v summary::-webkit-details-marker{ display:none; }
.v:hover summary{ padding-left:clamp(10px,1.6vw,22px); color:var(--coral-hi); }
.v summary span{ font-size:10.5px; font-weight:800; letter-spacing:.2em; color:var(--coral); }
.v summary i{
  position:relative; flex:0 0 auto; margin-left:auto; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); transition:background .4s,border-color .4s,transform .5s var(--spring);
}
.v summary i::before,.v summary i::after{
  content:''; position:absolute; left:50%; top:50%; background:var(--ink);
  transform:translate(-50%,-50%); transition:transform .45s var(--out);
}
.v summary i::before{ width:12px; height:1.5px; }
.v summary i::after{ width:1.5px; height:12px; }
.v[open] summary i{ background:var(--coral); border-color:var(--coral); transform:rotate(180deg); }
.v[open] summary i::after{ transform:translate(-50%,-50%) scaleY(0); }
.v p{ margin:0; padding:0 2px clamp(20px,3vw,32px) clamp(30px,5vw,80px); max-width:76ch; color:var(--muted); font-size:15px; }
.netw{
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(24px,4vw,58px);
  margin-top:clamp(40px,7vh,80px);
}
.netw img{
  height:clamp(26px,2.8vw,42px); width:auto; max-width:160px; object-fit:contain;
  opacity:.55; transition:opacity .4s var(--ease),transform .5s var(--out);
}
.netw img:hover{ opacity:.95; transform:translateY(-3px); }

/* ═══════════ 12 · PODCAST + JOURNAL ═══════════ */
.pod{ padding:clamp(70px,13vh,150px) 0; }
.pod__in{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px);
  align-items:center; margin-bottom:clamp(56px,9vh,110px);
}
.pod__in,.pod__in>*{ min-width:0; }
.pod__copy p{ color:var(--muted); max-width:38ch; }
.pod__copy p b{ color:var(--coral); font-weight:800; font-style:italic; }
.pod__art{
  position:relative; border-radius:22px; overflow:hidden; border:1px solid var(--line);
  box-shadow:0 44px 110px -50px rgba(0,0,0,.95); will-change:transform;
}
.pod__art img{ width:100%; height:auto; display:block; }
.pod__wave{ position:absolute; left:0; right:0; bottom:0; height:32%; width:100%; pointer-events:none; }

.journal{ border-top:1px solid var(--line); }
.journal li{ border-bottom:1px solid var(--line); will-change:transform,opacity; }
.journal a{
  display:flex; align-items:baseline; gap:20px;
  padding:clamp(15px,1.9vw,24px) 2px;
  transition:padding-left .5s var(--out),color .35s;
}
.journal a:hover{ padding-left:clamp(10px,1.6vw,22px); }
.journal h3{
  flex:1; font-size:clamp(15px,1vw + 11px,21px); font-weight:800;
  line-height:1.28; letter-spacing:-.026em; color:var(--ink);
  transition:color .35s;
}
.journal a:hover h3{ color:var(--coral-hi); }
.journal span{ flex:0 0 auto; font-size:10px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--coral); }

/* ═══════════ 13 · END ═══════════ */
.end .shot__in{ align-items:center; text-align:center; }
.end__h{
  font-size:clamp(38px,8vw,120px); font-weight:900; letter-spacing:-.052em;
  line-height:.94; color:var(--ink); margin:0 0 clamp(26px,4.6vh,50px);
}
.end__note{ margin-top:16px; font-size:13px; color:var(--muted); }
.news{
  display:flex; gap:9px; flex-wrap:wrap; justify-content:center;
  width:min(600px,100%); margin-top:clamp(34px,6vh,66px);
  padding-top:clamp(26px,4.4vh,46px); border-top:1px solid var(--line);
}
.news input{
  flex:1 1 220px; min-width:0; padding:15px 22px; border-radius:100px;
  background:rgba(251,248,241,.55); border:1px solid var(--line-3); color:var(--ink);
  font-size:14px; outline:none; transition:border-color .35s,box-shadow .35s;
}
.news input::placeholder{ color:var(--muted); }
.news input:focus{ border-color:var(--coral); box-shadow:0 0 0 4px rgba(255,104,91,.15); }
.news button{
  flex:0 0 auto; padding:15px 28px; border-radius:100px;
  background:var(--coral); border:1px solid var(--coral); color:#FFF;
  font-size:13.5px; font-weight:700; cursor:pointer;
  transition:background .35s,color .35s,transform .35s var(--out);
}
.news button:hover{ background:var(--ink); color:var(--coral-lo); transform:translateY(-2px); }
.news__msg{ margin:14px 0 0; min-height:1.3em; font-size:12.5px; color:var(--teal-hi); }
.news__msg.is-err{ color:var(--coral-hi); }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1000px){
  .trip__in,.bios__grid{ grid-template-columns:1fr; gap:30px; }
  .cl__wall{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .pod__in{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .sig3__states{ margin-left:0; width:100%; }
  .st{ flex:1; justify-content:center; padding-inline:6px; letter-spacing:.08em; }
  .sig3__copy::before{
    inset:-40px calc(var(--gut) * -1) -90px calc(var(--gut) * -1);
    background:linear-gradient(0deg,rgba(251,248,241,.96) 0%,rgba(251,248,241,.86) 56%,rgba(251,248,241,0) 100%);
  }
  .cl__wall{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cult__plate{ clip-path:inset(var(--clip,12%) var(--clipx,4%) var(--clip,12%) var(--clipx,4%) round 16px); }

  /* Thirteen heads along an arc needs width this screen does not have. On a
     phone the crew stops being a pinned shot altogether and becomes an
     ordinary scrolling grid on the coral — pinning a five-row grid inside one
     viewport just pushes it up over the heading. */
  .crew{ height:auto !important; }
  .crew .shot__in{ height:auto; min-height:0; transform:none !important; padding-bottom:0; }
  .crew__stage{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px 8px; margin-top:30px; padding:34px 0 30px;
  }
  .crew__hill{ top:14%; height:86%; border-radius:40% 40% 0 0 / 9% 9% 0 0; }
  .peek{
    position:relative; left:auto !important; bottom:auto; width:auto;
    justify-self:center; max-width:100px;
    opacity:0; transform:translateY(24px);
  }
  .peek.is-in{
    opacity:1; transform:none;
    transition:opacity .7s var(--ease),transform .8s var(--exp);
    transition-delay:calc(var(--i,0) * 55ms);
  }
  .peek figcaption{
    position:relative; left:auto; top:auto; transform:none; opacity:1;
    margin-top:8px; max-width:118px; padding:4px 2px;
    background:transparent; box-shadow:none;
  }
  .peek figcaption::before{ display:none; }
  .peek b{ color:#FFF; font-size:11.5px; }
  .peek i{ color:rgba(255,255,255,.86); font-size:9.5px; }
  .peek em{ color:rgba(255,255,255,.64); }
  .peek--mascot{ max-width:116px; }
  .work__deck{ perspective:900px; }
  .who{ width:clamp(160px,52vw,240px); }
}
@media (max-width:480px){
  .cl__wall{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .journal a{ flex-direction:column; gap:8px; }
}


/* ═══════════ THEIR CAST ═══════════
   The animals Literal Humans draw in place of people. In the hero they sit
   along the bottom edge exactly as they do in the original illustration. */
/* Sat on the right so the cast shares the desk line without crowding the
   left-aligned headline and its button. */
.cast{
  position:absolute; right:0; bottom:0; width:min(74%,1000px); margin:0;
  pointer-events:none; z-index:1;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 96%,transparent);
}
.cast img{
  width:100%; height:auto; display:block;
  filter:invert(1) brightness(1.75); opacity:.26;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 2.4s var(--exp) .5s;
}
.is-ready .cast img{ clip-path:inset(0 0 0 0); }

.h2h{
  margin:clamp(18px,3vh,34px) 0 0; max-width:min(560px,64vw);
  opacity:0; transform:translateY(20px);
  transition:opacity .9s var(--ease),transform 1s var(--out);
}
.h2h img{ width:100%; height:auto; filter:invert(1) brightness(1.8); opacity:.62; }
.mani.is-swapped .h2h{ opacity:1; transform:none; }

@media (max-width:760px){
  .cast{ display:none; }
  .h2h{ max-width:100%; }
  .shake__art{ position:relative; right:auto; bottom:auto; width:min(280px,70%); margin-top:18px; }
}

/* ═══════════ THE JOURNEY ═══════════
   Literal Humans' own two-year client roadmap, travelled sideways. Milestones
   are coral and process highlights teal, exactly as on their diagram. */
.jr .shot__in{ padding-inline:0; max-width:none; overflow:hidden; }
/* The rail travels sideways behind a hard-clipped frame, which is right for
   the big cards but turns the small uppercase captions into stray two-letter
   fragments floating at the edge — it reads as a rendering fault rather than
   as something leaving the frame. These fade the roadmap out at both edges so
   everything dissolves off instead of being guillotined. Painted in the
   section's own navy rather than done with mask-image, because the rail is the
   element being transformed and a mask on it would travel with it. */
.jr .shot__in::before,.jr .shot__in::after{
  content:''; position:absolute; top:0; bottom:0; z-index:4;
  width:clamp(30px,4.5vw,72px); pointer-events:none;
}
.jr .shot__in::before{ left:0;  background:linear-gradient(90deg,var(--night),rgba(27,35,56,0)); }
.jr .shot__in::after{ right:0; background:linear-gradient(270deg,var(--night),rgba(27,35,56,0)); }
.jr__hd{
  position:relative; z-index:5;   /* the heading clears the edge fades */
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 26px;
}
.jr__hd .cue{ margin:0; }
.jr__key{ display:flex; gap:16px; margin-left:auto; }
.k{
  display:inline-flex; align-items:center; gap:7px;
  font-size:10px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.k i{ width:8px; height:8px; border-radius:50%; }
.k--m i{ background:var(--coral); }
.k--p i{ background:var(--teal); }

.jr__rail{
  position:relative; flex:1; min-height:0;
  display:flex; align-items:stretch; gap:clamp(10px,1.4vw,22px);
  padding-inline:var(--gut); padding-block:clamp(10px,2vh,26px);
  will-change:transform;
}
.jr__line{
  position:absolute; left:0; right:0; top:50%; height:2px;
  background:rgba(46,47,55,.13);
}
.jr__line i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--coral),var(--coral-hi));
  box-shadow:0 0 18px rgba(255,104,91,.55);
}

.stop{
  position:relative; flex:0 0 auto;
  display:grid; grid-template-rows:1fr auto 1fr; align-items:center;
  width:clamp(210px,20vw,282px);
}
.stop--mile,.stop--proc{ width:clamp(160px,15vw,210px); }
.stop--year{ width:clamp(74px,7vw,104px); }
.stop--cap{ width:clamp(96px,9vw,132px); }

.stop__up{ align-self:end; padding-bottom:20px; }
.stop__dn{ align-self:start; padding-top:20px; }
.stop__dot{
  justify-self:center; width:12px; height:12px; border-radius:50%;
  background:var(--muted); border:2px solid var(--cream);
  transform:scale(0); transition:transform .5s var(--spring);
}
.stop.is-on .stop__dot{ transform:scale(1); }
.stop--mile .stop__dot{ background:var(--coral); box-shadow:0 0 0 5px rgba(255,104,91,.16); }
.stop--proc .stop__dot{ background:var(--teal); box-shadow:0 0 0 5px rgba(0,173,150,.18); }
.stop--cap .stop__dot{ background:transparent; border:2px solid var(--muted); width:14px; height:14px; }
.stop--year .stop__dot{ background:var(--ink); width:16px; height:16px; }

.stop__up > *,.stop__dn > *{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--ease),transform .7s var(--out);
}
.stop.is-on .stop__up > *,.stop.is-on .stop__dn > *{ opacity:1; transform:none; }
.stop.is-on .stop__dn > *{ transition-delay:.08s; }

.stop__card{
  padding:clamp(14px,1.4vw,20px); border-radius:14px;
  border:1px solid var(--line); background:rgba(255,255,255,.7);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.stop__card span{
  display:block; font-size:10px; font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; color:var(--coral); margin-bottom:8px;
}
.stop__card h3{ font-size:clamp(15px,1vw + 10px,20px); color:var(--ink); margin-bottom:.55em; letter-spacing:-.03em; line-height:1.12; }
.stop__card p{ margin:0; font-size:12.5px; line-height:1.5; color:var(--muted); }

.stop__goal{ padding:clamp(12px,1.2vw,18px); border-radius:14px; background:rgba(46,47,55,.05); border:1px solid var(--line-2); }
.stop__goal span{ display:block; font-size:9.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.stop__goal b{ display:block; font-size:13.5px; font-weight:900; letter-spacing:-.02em; color:var(--ink); margin-bottom:9px; }
.stop__goal li{ font-size:11.5px; line-height:1.5; color:var(--muted); padding-left:13px; position:relative; }
.stop__goal li::before{ content:''; position:absolute; left:0; top:.62em; width:5px; height:1px; background:var(--coral); }

.stop__note{ padding-left:14px; border-left:2px solid var(--coral); }
.stop--proc .stop__note{ border-left-color:var(--teal); }
.stop__note span{ display:block; font-size:9.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--coral); margin-bottom:6px; }
.stop--proc .stop__note span{ color:var(--teal-hi); }
.stop__note p{ margin:0; font-size:12.5px; line-height:1.5; color:var(--muted); }
.stop__year{ font-size:clamp(18px,1.6vw,26px); font-weight:900; letter-spacing:-.03em; color:var(--ink); text-align:center; }
.stop__cap{ font-size:10px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); text-align:center; }

/* ═══════════ VALUES (no accordion) ═══════════ */
.val__grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2.4vw,40px); margin-top:clamp(26px,4vh,50px);
}
.val__grid,.val__grid>*{ min-width:0; }
.val__grid article{ border-top:1px solid var(--line); padding-top:20px; }
.val__grid span{ display:block; font-size:10px; font-weight:800; letter-spacing:.28em; color:var(--coral); margin-bottom:14px; }
.val__grid h3{ font-size:clamp(17px,1.2vw + 10px,24px); color:var(--ink); margin-bottom:.6em; letter-spacing:-.032em; line-height:1.1; }
.val__grid p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--muted); }

@media (max-width:1000px){ .val__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .val__grid{ grid-template-columns:1fr; } }


/* ════════════════════════════════════════════════════════════
   GROUNDS
   Literal Humans' site is cream and coral, so cream is the default
   and coral carries whole screens. The only dark moments are the
   roadmap and the footer, used for contrast rather than by habit.
   ════════════════════════════════════════════════════════════ */
/* The sections that host the spine carry NO ground of their own: the cream
   comes from <body> and the particle canvas sits between the two. Giving them
   a background here is what blanked the entire 3D layer. */
.hero,.mani,.sig3,.shake,.work,.crew,.val{ background:transparent; }
.trip,.bios{ background:var(--sand); }
.cl{ background:var(--paper); }

/* The ambient wash lives BEHIND the canvas (z-index 0 vs the canvas at 1) so
   it warms the stage without hiding a single point. The director tints it. */
.wash{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  transition:background 1.6s var(--ease);
  background:radial-gradient(122% 92% at 58% 44%,var(--coral-wash) 0%,var(--cream) 66%);
}

/* ── the services reel: a full coral screen ──
   Cream type on coral, not ink. Ink on coral measures as acceptable contrast
   at full strength, but the panels cross-fade through each other, so for most
   of the scroll the headline is ink at 60-80% over coral — a muddy maroon that
   reads as a printing fault. Cream only gets brighter as it fades in. */
.reel{ background:linear-gradient(168deg,var(--coral) 0%,var(--coral-lo) 100%); }
.reel .cue{ color:rgba(255,255,255,.74); }
.reel .sv__n{ color:rgba(255,255,255,.74); }
.reel .sv h2{ color:var(--cream); }
.reel .sv p{ color:rgba(255,255,255,.88); }
.reel__ticks li{ background:rgba(255,255,255,.26); }
.reel__ticks li i{ background:var(--cream); }

/* ── the roadmap: the deliberate dark one ── */
.jr{ background:var(--night); }
.jr .cue{ color:var(--coral-hi); }
.jr .k{ color:rgba(210,211,227,.7); }
.jr__line{ background:rgba(210,211,227,.16); }
.stop__dot{ border-color:var(--night); }
.stop__card{ background:rgba(255,255,255,.055); border-color:rgba(210,211,227,.16); }
.stop__card h3{ color:var(--cream); }
.stop__card p{ color:rgba(210,211,227,.78); }
.stop__card span{ color:var(--coral-hi); }
.stop__goal{ background:rgba(210,211,227,.06); border-color:rgba(210,211,227,.12); }
.stop__goal span{ color:rgba(210,211,227,.6); }
.stop__goal b{ color:var(--cream); }
.stop__goal li{ color:rgba(210,211,227,.76); }
.stop__note p{ color:rgba(210,211,227,.8); }
.stop__year{ color:var(--cream); }
.stop__cap{ color:rgba(210,211,227,.6); }

/* ── podcast: an amber screen ── */
.pod{ background:var(--amber); }
.pod .cue{ color:var(--ink); opacity:.62; }
.pod .big{ color:var(--ink); }
.pod .accent{ background-image:linear-gradient(150deg,#FFF 0%,#FFF 100%); }
.pod__copy p{ color:rgba(46,47,55,.78); }
.pod__copy p b{ color:var(--coral-lo); }
.pod .btn--ghost{ color:var(--ink); border-color:rgba(46,47,55,.3); }
.pod .btn--ghost::before{ background:var(--ink); }
.pod .btn--ghost:hover{ color:var(--amber); border-color:var(--ink); }
.journal{ border-top-color:rgba(46,47,55,.2); }
.journal li{ border-bottom-color:rgba(46,47,55,.2); }
.journal h3{ color:var(--ink); }
.journal a:hover h3{ color:var(--coral-lo); }
.journal span{ color:rgba(46,47,55,.6); }

/* ── the close: coral again, so the page ends on the brand ── */
.end{ background:var(--coral); }
.end .cue{ color:rgba(255,255,255,.75); }
.end__h{ color:#FFF; }
.end__h .accent{ background-image:linear-gradient(150deg,var(--ink) 0%,var(--ink) 100%); }
.end__note{ color:rgba(255,255,255,.86); }
.end .btn--coral{ background:#FFF; border-color:#FFF; color:var(--coral-lo); box-shadow:0 18px 44px -18px rgba(46,47,55,.5); }
.end .btn--coral::before{ background:var(--ink); }
.end .btn--coral:hover{ color:#FFF; border-color:var(--ink); }
.news{ border-top-color:rgba(255,255,255,.3); }
.news input{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4); color:#FFF; }
.news input::placeholder{ color:rgba(255,255,255,.7); }
.news input:focus{ border-color:#FFF; box-shadow:0 0 0 4px rgba(255,255,255,.2); }
.news button{ background:var(--ink); border-color:var(--ink); color:#FFF; }
.news button:hover{ background:#FFF; color:var(--coral-lo); }
.news__msg{ color:#FFF; }

/* ── logos: ink cut-outs on light grounds, white ones on dark ── */
.netw img,.prev__set img{ opacity:.55; }
.prev__fade--l{ background:linear-gradient(90deg,var(--sand),transparent); }
.prev__fade--r{ background:linear-gradient(270deg,var(--sand),transparent); }

/* ── case-study cards on cream ── */
.cs{
  background:var(--paper);
  border-color:rgba(46,47,55,.12);
  box-shadow:0 26px 60px -34px rgba(46,47,55,.35);
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.cs b{ color:var(--ink); }
.cs small{ color:var(--coral-lo); }
.cs h3{ color:var(--ink); }
.cs p{ color:var(--muted); }
.cs em{ color:var(--muted); }

/* ── signal + arm chips ── */
.st,.sd{ background:rgba(255,255,255,.7); border-color:rgba(46,47,55,.14); color:var(--muted); }
.st.is-on{ color:var(--ink); border-color:var(--coral); background:var(--coral-wash); }
.sd--h.is-on{ color:var(--coral-lo); border-color:var(--coral); background:var(--coral-wash); }
.sd--m.is-on{ color:var(--slate); border-color:var(--slate); background:rgba(69,85,119,.09); }
/* both chips warm when the hands actually meet — the same move the shader
   makes on the points, so the label agrees with the picture */
.sd--h.is-met,.sd--m.is-met{ color:var(--coral-lo); border-color:var(--coral); background:var(--coral-wash); }
.sig3__copy::before{
  background:radial-gradient(88% 108% at 20% 64%,var(--cream) 0%,rgba(251,248,241,.82) 46%,rgba(251,248,241,0) 78%);
}
.meter div{ background:rgba(46,47,55,.14); }

/* ── the clasp's own copy ── */
.bcard h2{ color:var(--ink); }
.bcard h2 b{ color:var(--coral-lo); }
.shake__art img{ filter:none; opacity:.5; }
.shake.is-met .shake__art img{ opacity:.9; }

/* ── the drawn cast reads as ink now, not a knocked-out white ──
   A touch of sepia keeps their pencil warm rather than letting it grey out
   against the cream; at opacity .5 it was reading as a watermark. */
.cast img{ filter:sepia(.20) saturate(1.1); opacity:.62; }
.h2h img{ filter:sepia(.16) saturate(1.08); opacity:.88; }

/* ── boot ── */
.boot{ background:var(--cream); }
.boot__mark svg{ color:var(--ink); }
.boot__cut{ background:var(--cream); }
.boot__meta{ color:var(--muted); border-top-color:var(--line); }

/* ── crew captions sit on coral, so they stay white ── */
.peek b{ color:var(--ink); }
.peek i{ color:var(--muted); }
.peek em{ color:var(--coral-lo); }
.crew__h{ color:var(--ink); }
.crew__note{ color:var(--muted); }


/* The culture overlay has to clear a single pinned viewport: heading, copy,
   seven perks and the accreditation badge. Sized down from the shared .big. */
.cult .big{ font-size:clamp(32px,5.4vw,80px); margin-bottom:.3em; }
.cult__p{ margin-bottom:clamp(10px,1.8vh,20px); }
.cult .perks{ margin:0 0 clamp(12px,2vh,20px); gap:7px; }
.cult .perks li{ padding:6px 13px; font-size:12px; }
.cult__badge img{ height:36px; }