/* ====================================================================
   settr — homepage 2026 · "The Unbroken Line" (v3 — calibrated)
   --------------------------------------------------------------------
   One voice, two inks:
     Display — Schibsted Grotesk, medium weight, sentence case. Authority
               from scale, rhythm and precision — never from maximum weight.
               The "turn" in a statement is carried by laurel colour, not
               by a second typeface.
     Notes   — Fraunces italic survives ONLY as hand-written margin notes
               inside the drawn artifacts (a person annotating a document).
     Data    — IBM Plex Mono, small, for operational metadata: artifact
               values, statuses, the reading layer over creator content.
   Surfaces: warm paper, one ink section, one laurel band, ink footer.
   Hairline rules; spacing does the structural work.
   ==================================================================== */

/* ----- tokens -------------------------------------------------------- */
:root{
  --paper:      #FAF8F4;
  --paper-deep: #F2EFE8;
  --ink:        #17150F;
  --ink-70:     #454039;
  --ink-50:     #6E685E;   /* 5.0:1 on paper — AA for the small layer */
  --ink-35:     #A9A296;   /* decorative only */
  --hair:       rgba(23,21,15,.16);
  --hair-soft:  rgba(23,21,15,.08);
  --laurel:     #17150F;   /* green retired below the hero — pure B&W; colour lives only inside creator content */
  --laurel-deep:#17150F;
  --laurel-soft:rgba(243,240,233,.66); /* was green-on-dark → now light neutral */
  --dark:       #191712;
  --flash:      #921B16;   /* hover accent + announcement bar (test) */
  --paper-on-dark: #F3F0E9;
  --hair-on-dark:  rgba(243,240,233,.16);
  --faint-on-dark: rgba(243,240,233,.62);

  --disp:  "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Fraunces", "Georgia", serif;
  --sans:  "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --shell: 1320px;
  --gut: clamp(20px, 4vw, 52px);
  --rail: 64px;

  --r: 8px;
  --ease: cubic-bezier(.22,.61,.25,1);
  --snap: cubic-bezier(.5,.05,.2,1);
}

/* ----- base ----------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body.home2{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.shell{ max-width:var(--shell); margin:0 auto; padding-left:var(--gut); padding-right:var(--gut); }

img,video{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,p,ul,ol,dl,dd,dt,figure{ margin:0; padding:0; }
ul,ol{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }

::selection{ background:var(--laurel); color:var(--paper); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper); padding:10px 18px; font-size:14px;
  border-radius:0 0 var(--r) 0;
}
.skip-link:focus{ left:12px; top:12px; }

:focus-visible{ outline:2px solid var(--laurel); outline-offset:3px; }

[id]{ scroll-margin-top:88px; }

/* ----- shared type ---------------------------------------------------- */
.label{
  font-family:var(--disp);
  font-size:11.5px; font-weight:560;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-50);
}
.label .tick{ color:var(--laurel); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--disp); font-size:14.5px; font-weight:530;
  letter-spacing:.002em;
  padding:14px 24px; border-radius:var(--r);
  text-decoration:none;
  transition:background-color .2s var(--snap), color .2s var(--snap),
             border-color .2s var(--snap), transform .2s var(--snap);
}
.btn:active{ transform:scale(.985); }
.btn .arr{ transition:transform .2s var(--snap); }
.btn:hover .arr{ transform:translateX(3px); }
.btn-ink{ background:var(--ink); color:var(--paper); }
.btn-ink:hover{ background:var(--laurel-deep); }
.btn-ghost{ border:1px solid var(--hair); color:var(--ink); background:transparent; }
.btn-ghost:hover{ border-color:var(--ink); }

/* ====================================================================
   FLASH BAR — announcement strip above the nav
   ==================================================================== */
.flashbar{
  display:flex; align-items:center; justify-content:center; gap:14px;
  background:#921B16; color:#fff;
  font-family:var(--disp); font-size:12px; font-weight:500;
  letter-spacing:.012em; line-height:1.3;
  padding:8px clamp(16px, 3vw, 24px);
  text-decoration:none; text-align:center;
}
.flashbar .fb-more{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:400; opacity:.85; white-space:nowrap;
}
.flashbar .fb-arr{ transition:transform .2s var(--snap); }
.flashbar:hover{ background:#7A130E; }
.flashbar:hover .fb-arr{ transform:translateX(3px); }
.menu-open .flashbar{ display:none; } /* fixed mobile menu assumes masthead at top:0 */
@media (max-width: 640px){
  .flashbar{ font-size:11.5px; gap:10px; }
}

/* ====================================================================
   MASTHEAD
   ==================================================================== */
.masthead{
  position:sticky; top:0; z-index:100;
  background:rgba(250,248,244,.9);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .18s var(--ease);
}
.masthead.is-scrolled{ border-bottom-color:var(--hair-soft); }
.mast-in{
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:24px;
  height:68px;
}
.mast-in .mast-nav{ grid-column:1; justify-self:start; margin-left:-12px; /* align link TEXT (not hover pill) with the shell edge */ }
.mast-in .brand{ grid-column:2; justify-self:center; }
.mast-in .mast-end{ grid-column:3; justify-self:end; }
.brand{ display:flex; align-items:center; text-decoration:none; }
.brand img{ height:22px; width:auto; }

.mast-nav{ display:flex; gap:6px; }
.mast-nav a{
  font-family:var(--disp);
  font-size:14.5px; font-weight:470;
  color:var(--ink-70);
  text-decoration:none;
  padding:7px 12px; border-radius:6px;
  transition:color .18s var(--ease), background-color .18s var(--ease);
}
.mast-nav a:hover{ color:var(--flash); background:rgba(146,27,22,.06); }

.mast-end{ display:flex; align-items:center; gap:18px; }
.mast-login{
  font-family:var(--disp); font-size:14px; font-weight:470;
  color:var(--ink-50); text-decoration:none;
  transition:color .18s var(--ease);
}
.mast-login:hover{ color:var(--flash); }
.mast-cta{ padding:10px 18px; font-size:14px; }

/* burger — mobile only */
.mast-burger{ display:none; width:44px; height:44px; position:relative; border-radius:6px; }
.mast-burger span{
  position:absolute; left:11px; right:11px; height:1.8px; background:var(--ink);
  border-radius:2px;
  transition:transform .3s var(--snap), opacity .2s var(--snap);
}
.mast-burger span:nth-child(1){ top:16px; }
.mast-burger span:nth-child(2){ top:21.5px; }
.mast-burger span:nth-child(3){ top:27px; }
.mast-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.mast-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.mast-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

/* mobile menu */
.mobile-menu{
  display:none;
  position:fixed; inset:68px 0 0 0; z-index:99;
  background:var(--paper);
  padding:12px var(--gut) 40px;
  overflow-y:auto;
}
.mobile-menu.open{ display:block; }
.mobile-menu a{
  display:block; text-decoration:none;
  font-family:var(--disp); font-weight:510;
  font-size:27px; line-height:1.15; letter-spacing:-0.015em;
  padding:17px 0; border-bottom:1px solid var(--hair-soft);
}
.mobile-menu a:hover{ color:var(--flash); }
.mobile-menu .mm-meta{
  margin-top:28px; display:flex; flex-direction:column; gap:16px;
}
.mobile-menu .mm-meta a{
  font-size:15px; font-weight:450; border:0; padding:0; letter-spacing:0;
}
.mobile-menu .btn{ margin-top:10px; }

/* ====================================================================
   HERO
   ==================================================================== */
.hero{ position:relative; overflow:hidden; }
.hero-head{
  padding-top:clamp(48px, 7vh, 92px);
}
.hero-in{
  display:grid;
  grid-template-columns: minmax(0, 6.4fr) minmax(0, 5.6fr);
  gap:clamp(28px, 4vw, 76px);
  align-items:start;
  padding-top:clamp(28px, 4vh, 48px);
  padding-bottom:clamp(52px, 7.5vh, 92px);
}

.hero-eyebrow{
  display:flex; align-items:center; gap:12px;
  margin-bottom:clamp(22px, 3.5vh, 38px);
}
.hero-eyebrow .bar{ width:9px; height:9px; border-radius:2px; background:var(--laurel); flex:none; }

/* the statement — composed, not shouted */
.hero-h{
  font-family:var(--disp);
  font-weight:520;
  font-size:clamp(40px, 5.7vw, 84px);
  line-height:1.02;
  letter-spacing:-0.032em;
}
.hero-h em{
  display:block;
  font-style:normal;
  color:var(--laurel);
  margin-top:.02em;
}
/* staggered line reveal */
.lm{ display:block; overflow:hidden; }
.js .lm .li{ display:block; transform:translateY(108%); transition:transform .8s var(--snap); }
.js .hero-ready .lm .li{ transform:none; }
.js .hero-ready .lm:nth-child(2) .li{ transition-delay:.09s; }

.hero-sub{
  margin-top:6px;
  max-width:50ch;
  font-size:clamp(16px, 1.25vw, 17.5px);
  font-weight:400;
  line-height:1.62;
  color:var(--ink-70);
}
.hero-sub strong{ font-weight:600; color:var(--ink); }

.hero-cta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:clamp(24px, 3.5vh, 36px); }

.hero-clients{
  margin-top:clamp(30px, 4.5vh, 46px);
  padding-top:20px;
  border-top:1px solid var(--hair-soft);
  font-family:var(--disp);
  font-size:13.5px; font-weight:470;
  color:var(--ink-70);
  line-height:2;
}
.hero-clients .k{
  font-size:11px; font-weight:560; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-50); margin-right:12px;
}
.hero-clients .n{ white-space:nowrap; }
.hero-clients .n:not(:last-child)::after{ content:"\00a0·"; color:var(--laurel); margin-right:8px; }

/* plates — creator content with the reading layer over it */
.hero-plates{ position:relative; min-height:min(470px, 54vh); margin-top:-6px; }
.plate{
  position:absolute;
  overflow:hidden;
  border-radius:10px;
  background:var(--paper-deep);
  outline:1px solid var(--hair-soft);
  outline-offset:-1px;
}
.plate video, .plate img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.plate:hover video{ transform:scale(1.025); }
.plate-a{ top:14px; right:170px; width:min(50%, 254px); aspect-ratio:9/15; z-index:2; }
.plate-b{ bottom:0; right:0; width:min(38%, 192px); aspect-ratio:9/13; z-index:3; }
.plate-frame{ display:none; }

/* reading brackets — the system sees more than the image */
.scan{ position:absolute; inset:10px; pointer-events:none; z-index:4; }
.scan i{
  position:absolute; width:15px; height:15px;
  border:1.5px solid var(--laurel-soft);
  opacity:.95;
}
.scan .tl{ top:0; left:0; border-right:0; border-bottom:0; }
.scan .tr{ top:0; right:0; border-left:0; border-bottom:0; }
.scan .bl{ bottom:0; left:0; border-right:0; border-top:0; }
.scan .br{ bottom:0; right:0; border-left:0; border-top:0; }

.plate-read{
  position:absolute; top:-13px; left:-14px; z-index:5;
  font-family:var(--mono); font-size:10.5px; font-weight:450;
  letter-spacing:.02em; color:var(--ink-70);
  background:var(--paper);
  border:1px solid var(--hair); border-radius:6px;
  padding:6px 10px;
  display:inline-flex; align-items:center; gap:8px;
  white-space:nowrap;
}
.plate-read .dot{ width:5px; height:5px; border-radius:50%; background:var(--laurel); }

.plate-verdict{
  position:absolute; left:12px; bottom:12px; z-index:4;
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(250,248,244,.95); color:var(--ink);
  font-family:var(--mono);
  font-size:10.5px; font-weight:450; letter-spacing:.02em;
  padding:6px 11px; border-radius:999px;
  border:1px solid var(--hair-soft);
}
.plate-verdict .dot{ width:5px; height:5px; border-radius:50%; background:var(--laurel); }

.hero-plates figcaption{
  position:absolute; left:0; bottom:-40px;
  font-size:12.5px; color:var(--ink-50); font-weight:400;
}
.hero-plates figcaption em{ font-style:italic; font-family:var(--serif); color:var(--ink-70); }

/* stage strip — the six stages as a quiet operational ticker */
.stage-ticker{
  overflow:hidden;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  padding:13px 0 12px;
  background:var(--paper);
}
.ticker-track{
  display:flex; width:max-content;
  animation:tick 56s linear infinite;
}
.stage-ticker:hover .ticker-track{ animation-play-state:paused; }
@keyframes tick{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.tk{
  display:inline-flex; align-items:baseline; gap:10px;
  font-family:var(--disp);
  font-weight:540; font-size:12.5px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-70);
  line-height:1;
  white-space:nowrap;
  padding-right:18px;
}
.tk .tk-n{
  font-family:var(--mono); font-size:10.5px; font-weight:450;
  color:var(--laurel); letter-spacing:0;
}
.tk .tk-arr{ color:var(--ink-35); font-weight:400; padding-left:18px; }
@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation:none; }
}

/* ====================================================================
   CLIENT BAND — quiet marquee roster under the hero film
   ==================================================================== */
.logoband{
  background:var(--paper);
  padding-top:clamp(44px, 6.5vh, 68px);
  padding-bottom:clamp(8px, 1.5vh, 16px); /* thesis carries the big gap below */
}
.logoband-clip{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,
    transparent, #000 clamp(48px, 9vw, 130px),
    #000 calc(100% - clamp(48px, 9vw, 130px)), transparent);
  mask-image:linear-gradient(90deg,
    transparent, #000 clamp(48px, 9vw, 130px),
    #000 calc(100% - clamp(48px, 9vw, 130px)), transparent);
}
.logoband-track{
  display:flex; width:max-content;
  animation:lb-drift 48s linear infinite;
}
.logoband-clip:hover .logoband-track{ animation-play-state:paused; }
.logoband-in{
  display:flex; align-items:baseline;
  column-gap:clamp(34px, 4vw, 56px);
  padding-right:clamp(34px, 4vw, 56px); /* seam gap — keeps the loop even */
}
.logoband-in li{
  font-family:var(--disp);
  font-weight:530; font-size:13.5px;
  letter-spacing:.07em; line-height:1;
  text-transform:uppercase;
  color:var(--ink-50);
  white-space:nowrap;
}
@keyframes lb-drift{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .logoband-track{ animation:none; width:auto; }
  .logoband-in{ flex-wrap:wrap; justify-content:center; row-gap:14px; padding-right:0; }
  .logoband-in[aria-hidden="true"]{ display:none; }
  .logoband-clip{ -webkit-mask-image:none; mask-image:none; }
}
@media (max-width: 640px){
  .logoband-in li{ font-size:12px; }
}

/* ====================================================================
   THESIS
   ==================================================================== */
.thesis{ background:var(--paper); }
.thesis-in{
  padding-top:clamp(72px, 11vh, 128px);
  padding-bottom:clamp(72px, 11vh, 128px);
  display:grid; grid-template-columns:minmax(0,8fr) minmax(0,4fr); gap:clamp(32px,5vw,88px);
}
.thesis-display{
  font-family:var(--disp);
  font-weight:510;
  font-size:clamp(25px, 2.7vw, 39px);
  line-height:1.14;
  letter-spacing:-0.024em;
  text-wrap:balance;
}
.thesis-display span{ display:block; }
.thesis-display em{
  display:block;
  font-style:normal;
  color:var(--laurel);
  margin-top:.1em;
}
.thesis-side{ align-self:end; }
.thesis-body{
  font-size:15.5px; font-weight:400; line-height:1.68; color:var(--ink-70);
  max-width:38ch;
}
.thesis-side .label{ display:block; margin-bottom:14px; padding-top:12px; border-top:1px solid var(--hair); }

/* ====================================================================
   SETTR OS — the stack
   --------------------------------------------------------------------
   Pinned section. Plates start scattered (per-plate pose from home2.js)
   and assemble into an aligned stack with scroll; a branded cap plate
   lands last. --osp (0 = scattered, 1 = assembled) drives the copy
   crossfade and label fades. Without JS / with reduced motion the
   section is static and shows the assembled state (--osp defaults 1).
   ==================================================================== */
@property --lift{ syntax:"<length>"; inherits:false; initial-value:0px; }

.os{ --osp:1; position:relative; }
.js .os{ height:380vh; --osp:0; }
.os-pin{
  position:sticky; top:0; min-height:100vh;
  display:flex; align-items:center;
  overflow:hidden;
}
.os-in{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  grid-template-areas:"copy stage" "key stage";
  column-gap:clamp(28px, 4vw, 72px);
  row-gap:34px;
  align-items:center;
}
.os-copy{ grid-area:copy; align-self:end; }
.os-key{ grid-area:key; align-self:start; }
.os-stage{ grid-area:stage; }

.os-copy .label{ display:block; margin-bottom:22px; }
.os-heads{ display:grid; }
.os-head{ grid-area:1/1; }
.os-head-a{
  opacity:clamp(0, calc(1 - var(--osp) * 2.2), 1);
  transform:translateY(calc(var(--osp) * -12px));
}
.os-head-b{
  opacity:clamp(0, calc(var(--osp) * 2.2 - 1.2), 1);
  transform:translateY(calc((1 - var(--osp)) * 12px));
}
.os-head[aria-hidden="true"], .os-head-a, .os-head-b{ pointer-events:none; }
.os-h{
  font-family:var(--disp);
  font-weight:510;
  font-size:clamp(26px, 2.7vw, 41px);
  line-height:1.08; letter-spacing:-0.024em;
  text-wrap:balance;
}
.os-h em{ display:block; font-style:normal; margin-top:.08em; }
.os-sub{
  margin-top:16px;
  font-size:15.5px; line-height:1.68; color:var(--ink-70);
  max-width:44ch;
}

/* ----- the key -------------------------------------------------------- */
.os-key{ display:flex; flex-direction:column; gap:8px; pointer-events:auto; }
.os-key-btn{
  display:inline-flex; align-items:center; gap:11px;
  padding:8px 13px 8px 15px;
  border:1px solid var(--hair); border-radius:999px;
  font-family:var(--disp); font-size:14px; font-weight:500;
  color:var(--ink-70); text-align:left;
  transition:border-color .2s var(--snap), color .2s var(--snap),
             background-color .2s var(--snap);
}
.os-key-btn:hover{ border-color:var(--flash); color:var(--flash); }
.os-key li.on .os-key-btn{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.os-key-btn .n{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.04em;
  color:var(--ink-35);
}
.os-key li.on .os-key-btn .n{ color:rgba(243,240,233,.55); }
.os-key-btn .pl{
  width:17px; height:17px; border-radius:50%;
  border:1px solid currentColor; opacity:.55;
  display:inline-flex; align-items:center; justify-content:center;
  position:relative;
}
.os-key-btn .pl::before{
  content:"+";
  font-family:var(--mono); font-size:12px; line-height:1;
  transition:transform .25s var(--snap);
}
.os-key li.on .pl::before{ transform:rotate(45deg); }
.os-key-d{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .35s var(--snap);
}
.os-key-d p{
  overflow:hidden; min-height:0;
  font-size:14px; line-height:1.6; color:var(--ink-70);
  max-width:46ch; padding:0 15px;
  transition:margin .35s var(--snap);
}
.os-key li.on .os-key-d{ grid-template-rows:1fr; }
.os-key li.on .os-key-d p{ margin:10px 0 6px; }

/* ----- the stack ------------------------------------------------------ */
.os-stage{
  --os-plate:min(350px, 27vw);
  position:relative;
  height:min(76vh, 740px);
  perspective:1600px;
  perspective-origin:50% 36%;
}
.os-ground{
  position:absolute; left:50%; bottom:4%;
  width:min(560px, 84%); height:110px;
  transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(23,21,15,.13), transparent 72%);
  opacity:calc(.12 + var(--osp) * .72);
}
.os-stack{
  position:absolute; left:46%; bottom:10%;
  width:var(--os-plate); height:var(--os-plate);
  margin-left:calc(var(--os-plate) / -2);
  transform-style:preserve-3d;
}
.os-plate{
  position:absolute; inset:0;
  border-radius:16px;
  background:linear-gradient(145deg,
    rgba(255,255,255,.92) 0%,
    rgba(246,243,236,.55) 46%,
    rgba(233,229,220,.44) 100%);
  border:1px solid rgba(23,21,15,.13);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px rgba(255,255,255,.28),
    0 30px 44px -32px rgba(23,21,15,.42);
  display:flex; align-items:center; justify-content:center;
  /* no-JS / pre-JS fallback: the assembled stack */
  transform:rotateX(56deg) rotateZ(-42deg)
            translateZ(calc(var(--i) * 15px + var(--lift, 0px)));
  transition:opacity .35s var(--snap), filter .35s var(--snap), --lift .5s var(--snap);
}
.os-plate-art{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none;
}
.os-plate-art .pa-a{ stroke:rgba(23,21,15,.16); fill:none; stroke-width:1.5; }
.os-plate-art .pa-m{ stroke:rgba(23,21,15,.36); fill:none; stroke-width:1.5; }
.os-plate-art .pa-f{ fill:rgba(23,21,15,.4); stroke:none; }
.os-cap-art{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.os-cap-art .ca-a{ stroke:rgba(243,240,233,.24); fill:none; stroke-width:1.4; }
.os-cap-art .ca-m{ stroke:rgba(243,240,233,.55); fill:none; stroke-width:1.5; }
.os-cap-art .ca-f{ fill:rgba(243,240,233,.55); stroke:none; }
.os-plate::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background:linear-gradient(145deg, #29261F 0%, #1C1A14 46%, #17150F 100%);
  opacity:var(--pu, 0);
  z-index:2; pointer-events:none;
}
.os-cap::after{ content:none; }
.os-stack.unified .os-plate{ border-color:rgba(243,240,233,.14); }
.os-stack.unified .os-plate-t{ color:rgba(243,240,233,.85); }
.os-plate-t{
  position:relative; z-index:3;
  font-family:var(--disp); font-weight:530;
  font-size:19px; letter-spacing:.005em;
  color:var(--ink-70);
  padding:0 24px; text-align:center;
  opacity:calc(1 - var(--osp));
  transition:opacity .25s linear;
}
.os-plate.focus .os-plate-t{ opacity:1; }
.os-cap{
  background:linear-gradient(145deg,
    rgba(41,38,31,.98) 0%,
    rgba(28,26,20,.97) 46%,
    rgba(23,21,15,.96) 100%);
  border-color:rgba(243,240,233,.16);
  box-shadow:
    inset 0 1.5px 0 rgba(243,240,233,.22),
    inset 0 0 0 1px rgba(243,240,233,.06),
    0 30px 44px -30px rgba(23,21,15,.6);
}
.os-cap-in{
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.os-cap-in img{ width:75px; height:auto; display:block; }
.os-stack.has-focus .os-plate:not(.focus){ opacity:.5; filter:blur(1.4px); }
.os-stack.has-focus .os-plate:not(.focus) .os-plate-t{ opacity:0; }

@media (prefers-reduced-motion: reduce){
  .js .os{ height:auto; --osp:1; }
  .os-plate, .os-key-d, .os-key-d p{ transition:none; }
}
@media (max-width: 1080px){
  .os-in{ column-gap:28px; }
  .os-stage{ --os-plate:min(330px, 34vw); }
}
@media (max-width: 900px){
  .js .os{ height:auto; }
  .os-pin{ position:static; min-height:0; padding:clamp(56px,9vh,92px) 0 64px; overflow:hidden; }
  .os-in{
    grid-template-columns:1fr;
    grid-template-areas:"copy" "stage" "key";
    row-gap:8px;
  }
  .os-stage{
    --os-plate:min(250px, 62vw);
    height:clamp(380px, 100vw, 470px);
    perspective:1100px;
  }
  .os-stack{ left:50%; bottom:8%; }
  .os-plate-t{ font-size:15px; }
  .os-cap-in img{ width:62px; }
  .os-key{ margin-top:10px; }
}

/* ====================================================================
   WORLDS — real-content interlude between the stack and the journey
   ==================================================================== */
.worlds{
  padding:clamp(64px, 9vh, 104px) 0 clamp(72px, 10vh, 116px);
}
.worlds-head{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(24px, 4vw, 72px); align-items:end;
  margin-bottom:clamp(40px, 5.5vh, 60px);
}
.worlds-h{
  font-family:var(--disp); font-weight:510;
  font-size:clamp(26px, 2.7vw, 41px);
  line-height:1.08; letter-spacing:-0.024em;
  margin-top:14px; text-wrap:balance;
}
.worlds-sub{
  font-size:15.5px; line-height:1.68; color:var(--ink-70);
  max-width:44ch;
}

.worlds-row{ display:flex; align-items:flex-start; gap:clamp(18px, 2.2vw, 30px); }
.world{ position:relative; flex:1; min-width:0; margin:0; }
.world:nth-child(1){ z-index:4; }
.world:nth-child(2){ z-index:3; }
.world:nth-child(3){ z-index:2; }
.world:nth-child(4){ z-index:1; }
.world-clip{
  aspect-ratio:9/16;
  border-radius:14px; overflow:hidden;
  background:var(--paper-deep);
  outline:1px solid var(--hair-soft); outline-offset:-1px;
  box-shadow:0 28px 48px -32px rgba(23,21,15,.4);
}
.world-clip video{ width:100%; height:100%; object-fit:cover; display:block; }

/* deal-out entrance — the row arrives as one pile and spreads into place */
@media (min-width: 901px){
  .js .worlds-row .world{ transition:transform 1s var(--snap); }
  .js .worlds-row:not(.in) .world:nth-child(1){ transform:translateX(calc(150% + 45px)) rotate(-2.2deg); }
  .js .worlds-row:not(.in) .world:nth-child(2){ transform:translateX(calc(50% + 15px)) rotate(1.6deg); }
  .js .worlds-row:not(.in) .world:nth-child(3){ transform:translateX(calc(-50% - 15px)) rotate(-1.2deg); }
  .js .worlds-row:not(.in) .world:nth-child(4){ transform:translateX(calc(-150% - 45px)) rotate(2.4deg); }
  .js .worlds-row.in .world:nth-child(2){ transition-delay:0s; }
  .js .worlds-row.in .world:nth-child(1){ transition-delay:.12s; }
  .js .worlds-row.in .world:nth-child(3){ transition-delay:.2s; }
  .js .worlds-row.in .world:nth-child(4){ transition-delay:.32s; }
  .js .worlds-row .world-cap{ opacity:0; transition:opacity .5s var(--snap); }
  .js .worlds-row.in .world-cap{ opacity:1; transition-delay:.6s; }
  /* rest state: a quiet lift on hover */
  .world-clip{ transition:transform .35s var(--snap), box-shadow .35s var(--snap); }
  .worlds-row.in .world:hover .world-clip{
    transform:translateY(-6px);
    box-shadow:0 36px 54px -30px rgba(23,21,15,.46);
  }
}
@media (prefers-reduced-motion: reduce){
  .js .worlds-row .world{ transition:none; transform:none; }
  .js .worlds-row .world-cap{ opacity:1; transition:none; }
}
.world-cap{
  display:flex; align-items:baseline; gap:10px;
  margin-top:15px; padding-left:4px;
  font-family:var(--disp); font-size:13.5px; font-weight:500;
  color:var(--ink-70);
}
.world-cap .n{ font-family:var(--mono); font-size:10.5px; color:var(--ink-35); }

@media (max-width: 900px){
  .worlds-head{ grid-template-columns:1fr; align-items:start; }
  .worlds-row{
    overflow-x:auto; scroll-snap-type:x mandatory;
    gap:16px; padding:4px 4px 10px;
    scrollbar-width:none;
  }
  .worlds-row::-webkit-scrollbar{ display:none; }
  .world{ flex:0 0 auto; width:62vw; min-width:216px; scroll-snap-align:center; }
}
@media (max-width: 640px){
  .world{ width:70vw; }
}

/* ====================================================================
   INNOVATIONS — code-drawn product cards, image-quiet
   ==================================================================== */
.inno{
  padding:clamp(64px, 9vh, 104px) 0 clamp(72px, 10vh, 116px);
}
.inno-head{ max-width:54ch; margin-bottom:clamp(40px, 5.5vh, 60px); }
.inno-h{
  font-family:var(--disp); font-weight:510;
  font-size:clamp(26px, 2.7vw, 41px);
  line-height:1.08; letter-spacing:-0.024em;
  margin-top:14px;
}
.inno-lede{
  margin-top:16px;
  font-size:15.5px; line-height:1.68; color:var(--ink-70);
  max-width:46ch;
}
.inno-grid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(40px, 5vh, 56px) 22px;
}
.inno-card{
  display:flex; flex-direction:column; align-items:flex-start;
  text-decoration:none; color:inherit;
}
.inno-art{
  display:block; width:100%; aspect-ratio:1/1;
  background:var(--paper-deep);
  border-radius:12px; overflow:hidden;
  outline:1px solid var(--hair-soft); outline-offset:-1px;
  transition:outline-color .25s var(--snap);
}
.inno-card:hover .inno-art{ outline-color:rgba(146,27,22,.55); }
.inno-art svg{ width:100%; height:100%; display:block; }
.inno-art-dark{ background:var(--dark); }
.inno-t{
  margin-top:18px;
  font-family:var(--disp); font-weight:530;
  font-size:16.5px; letter-spacing:-0.005em;
}
.inno-p{
  margin-top:9px;
  font-size:14px; line-height:1.62; color:var(--ink-70);
}
.inno-more{
  margin-top:auto; padding-top:14px; /* pins to the card foot — links align per row */
  display:inline-flex; align-items:baseline; gap:7px;
  font-family:var(--disp); font-size:13.5px; font-weight:500;
  color:var(--ink-50);
  transition:color .2s var(--snap);
}
.inno-card:hover .inno-more{ color:var(--flash); }

/* svg vocabulary for the card art */
.iv-h{ stroke:rgba(23,21,15,.22); fill:none; stroke-width:1.4; }
.iv-l{ stroke:var(--ink-70); fill:none; stroke-width:1.6; }
.iv-d{ fill:none; stroke:rgba(23,21,15,.38); stroke-width:1.4; }
.iv-f{ fill:var(--ink); stroke:none; }
.iv-m{ font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; fill:var(--ink-50); }
.iv-hd{ stroke:rgba(243,240,233,.18); fill:none; stroke-width:1.4; }
.iv-ld{ stroke:rgba(243,240,233,.8); fill:none; stroke-width:2.4; }
.iv-md{ font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; fill:rgba(243,240,233,.55); }
.iv-fd{ fill:#F3F0E9; stroke:none; }
.iv-dk{ font-family:var(--mono); font-size:12px; letter-spacing:.03em; fill:var(--dark); }
.iv-pd{ stroke:var(--paper); fill:none; stroke-width:1.6; stroke-linecap:square; }

@media (max-width: 1080px){
  .inno-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:44px 20px; }
}
@media (max-width: 900px){
  .inno-grid{
    display:flex; overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:16px; padding:4px 4px 10px;
    scrollbar-width:none;
  }
  .inno-grid::-webkit-scrollbar{ display:none; }
  .inno-card{ flex:0 0 auto; width:62vw; min-width:216px; scroll-snap-align:center; }
}
@media (max-width: 640px){
  .inno-card{ width:70vw; }
}

/* ====================================================================
   JOURNEY — the unbroken line
   ==================================================================== */
.journey{ border-top:1px solid var(--hair-soft); position:relative; }
.jny-head{
  padding-top:clamp(56px, 8vh, 92px);
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(24px,4vw,72px); align-items:end;
  margin-bottom:clamp(44px, 6vh, 72px);
}
.jny-title{
  font-family:var(--disp);
  font-weight:510;
  font-size:clamp(30px, 3.8vw, 56px);
  line-height:1.04; letter-spacing:-0.028em;
  margin-top:18px;
  text-wrap:balance;
}
.jny-title em{
  display:block; font-style:normal;
  color:var(--laurel);
  margin-top:.06em;
}
.jny-lede{
  font-size:15.5px; font-weight:400; line-height:1.68; color:var(--ink-70); max-width:42ch;
}

/* rail + stations */
.jny-body{ position:relative; padding-bottom:clamp(56px, 8vh, 92px); }
.rail{
  position:absolute; top:0; bottom:0;
  left:calc(var(--gut) + 5px);
  width:1.25px; background:var(--hair);
}
.rail-thread{
  position:absolute; top:0; left:0; width:1.25px; height:100%;
  background:var(--laurel);
  transform-origin:top;
  transform:scaleY(0);
}
.rail-start{
  position:absolute; top:-5px; left:-4.5px;
  width:10px; height:10px; border-radius:50%;
  background:var(--paper); border:1.5px solid var(--ink);
}
.rail-end{
  position:absolute; bottom:-7px; left:-6px;
  width:13px; height:13px;
  background:var(--laurel);
  border-radius:50%;
  box-shadow:0 0 0 4px var(--paper), 0 0 0 5.25px var(--laurel);
}

.stations{
  display:flex; flex-direction:column; gap:clamp(64px, 10vh, 124px);
  padding-top:clamp(36px, 5vh, 64px);
  position:relative; z-index:1;
}

.station{
  display:grid;
  grid-template-columns: var(--rail) minmax(0, 5fr) minmax(0, 6fr);
  gap:0 clamp(24px, 4vw, 64px);
  align-items:center;
}
.station.flip{ grid-template-columns: var(--rail) minmax(0, 6fr) minmax(0, 5fr); }
.station.flip .st-copy{ order:3; }
.station.flip .st-art{ order:2; }

.st-node{ align-self:stretch; position:relative; }
.st-node .dot{
  position:absolute; left:0; top:50%; margin-top:-5px;
  width:10px; height:10px; border-radius:50%;
  background:var(--paper); border:1.5px solid var(--ink-50);
  transition:background-color .3s var(--ease), border-color .3s var(--ease);
}
.station.lit .st-node .dot{ background:var(--laurel); border-color:var(--laurel); }

.st-label{ display:flex; align-items:baseline; gap:10px; margin-bottom:16px; }
.st-label .n{
  font-family:var(--mono); font-weight:450;
  font-size:12px; color:var(--laurel);
}
.st-claim{
  font-family:var(--disp);
  font-weight:520;
  font-size:clamp(22px, 2.15vw, 30px);
  line-height:1.12; letter-spacing:-0.018em;
  text-wrap:balance;
}
.st-claim em{ font-style:normal; color:var(--laurel); }
.st-body{
  margin-top:14px;
  font-size:15.5px; font-weight:400; line-height:1.66;
  color:var(--ink-70); max-width:46ch;
}

/* team / system split — what people execute vs what the system holds */
.st-split{
  margin-top:20px;
  border-top:1px solid var(--hair-soft);
  padding-top:14px;
  display:flex; flex-direction:column; gap:8px;
  max-width:46ch;
}
.st-split > div{ display:grid; grid-template-columns:64px 1fr; gap:14px; align-items:baseline; }
.st-split dt{
  font-family:var(--disp);
  font-size:10.5px; font-weight:580; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-35);
}
.st-split .sys dt{ color:var(--laurel); }
.st-split dd{
  font-size:13.5px; font-weight:400; line-height:1.5; color:var(--ink-70);
}

/* legacy single-foot (no longer emitted, kept harmless) */
.st-foot{
  margin-top:16px; font-size:13px; color:var(--ink-50);
  display:flex; align-items:center; gap:8px;
}
.st-foot .dot{ width:5px; height:5px; border-radius:50%; background:var(--laurel); flex:none; }

/* artifacts */
.st-art{ position:relative; }
.art-svg{ width:100%; height:auto; display:block; }
.art-cap{
  margin-top:12px; font-size:12.5px; color:var(--ink-50); font-weight:400;
}
.art-cap em{ font-style:normal; }

/* content plates inside station 03 */
.st-plates{ display:flex; gap:12px; align-items:flex-start; }
.st-plate{ flex:1; overflow:hidden; border-radius:10px; background:var(--paper-deep); outline:1px solid var(--hair-soft); outline-offset:-1px; }
.st-plate video{ width:100%; aspect-ratio:9/15; object-fit:cover; transition:transform .7s var(--ease); }
.st-plate:hover video{ transform:scale(1.025); }
.st-plate:nth-child(2){ margin-top:34px; }
.st-plate:nth-child(3){ margin-top:10px; }

/* station density */
.st-compact .st-claim{ font-size:clamp(21px, 2vw, 27px); }
.st-compact .st-art{ max-width:560px; }
@media (min-width: 1081px){
  .station.st-wide{ grid-template-columns: var(--rail) minmax(0,4fr) minmax(0,7fr); }
  .station.st-wide.flip{ grid-template-columns: var(--rail) minmax(0,7fr) minmax(0,4fr); }
}
.st-still{ padding-top:clamp(12px, 2.5vh, 32px); }
.st-still .st-art{ max-width:560px; }

/* ====================================================================
   ARTIFACTS — documents drawn in ink, annotated by hand and by machine
   ==================================================================== */
.art-svg text{ font-family:var(--sans); }
.a-label{ font-family:var(--mono); font-size:10.5px; font-weight:450; letter-spacing:.05em; text-transform:uppercase; fill:var(--ink-50); }
.a-label-d{ font-family:var(--mono); font-size:10.5px; font-weight:450; letter-spacing:.05em; text-transform:uppercase; fill:rgba(243,240,233,.72); }
.a-val{ font-family:var(--disp); font-size:13px; font-weight:500; fill:var(--ink); }
.a-serif{ font-family:var(--serif); font-style:italic; font-size:14.5px; font-weight:380; font-variation-settings:"SOFT" 0,"WONK" 0; fill:var(--ink-70); }
.a-serif-d{ font-family:var(--serif); font-style:italic; font-size:14.5px; font-weight:380; font-variation-settings:"SOFT" 0,"WONK" 0; fill:rgba(243,240,233,.85); }
.a-line{ stroke:rgba(23,21,15,.62); stroke-width:1.4; fill:none; }
.a-line-d{ stroke:rgba(243,240,233,.62); stroke-width:1.3; fill:none; }
.a-hair{ stroke:rgba(23,21,15,.28); stroke-width:1; fill:none; }
.a-hair-d{ stroke:rgba(243,240,233,.3); stroke-width:1; fill:none; }
.a-heavy{ stroke:rgba(23,21,15,.72); stroke-width:2; fill:none; }
.a-dash{ stroke:rgba(23,21,15,.42); stroke-width:1.2; stroke-dasharray:2 5; stroke-linecap:round; fill:none; }
.a-strike{ stroke:rgba(23,21,15,.3); stroke-width:1.1; }
.a-laurel{ stroke:var(--laurel); stroke-width:1.7; fill:none; }
.a-laurel-fill{ fill:var(--laurel); stroke:none; }
.a-fill{ fill:rgba(23,21,15,.62); stroke:none; }
.a-ink{ fill:var(--dark); stroke:none; }
.a-dot-lead{ stroke:rgba(23,21,15,.32); stroke-width:1.4; stroke-dasharray:.1 7; stroke-linecap:round; }
.a-redact rect{ fill:rgba(23,21,15,.82); stroke:none; }
.a-redact-laurel rect{ fill:var(--laurel); stroke:none; }
.art-dark{ border-radius:10px; }
.art-dark .a-laurel{ stroke:var(--laurel-soft); }
.art-dark .a-laurel-fill{ fill:var(--laurel-soft); }

/* ====================================================================
   THE LINE — JS-built SVG spine with grammar
   ==================================================================== */
.rail-svg{ position:absolute; top:0; left:0; pointer-events:none; z-index:0; }
.rail.has-svg{ background:none; }
.rail.has-svg .rail-thread{ display:none; }
.seg{ fill:none; stroke:var(--hair); stroke-width:1.25; }
.seg-dashed{ stroke:rgba(23,21,15,.4); stroke-width:1.4; stroke-dasharray:1.5 8; stroke-linecap:round; }
.seg-solid{ stroke:rgba(23,21,15,.4); stroke-width:1.4; }
.seg-heavy{ stroke:rgba(23,21,15,.58); stroke-width:2; }
.seg-strand{ stroke:var(--laurel); opacity:.45; stroke-width:1.4; }
.seg-thread{ stroke:var(--laurel); stroke-width:1.8; }

/* ====================================================================
   GO BAND — the one laurel moment (mid CTA)
   ==================================================================== */
.go-band{
  background:var(--laurel-deep);
  color:var(--paper);
}
.go-band ::selection{ background:var(--paper); color:var(--laurel-deep); }
.go-band-in{
  padding-top:clamp(36px, 5.5vh, 56px);
  padding-bottom:clamp(36px, 5.5vh, 56px);
  display:flex; align-items:baseline; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.go-band .label{ color:rgba(250,248,244,.85); }
.go-band-link{
  flex-wrap:wrap;
  font-family:var(--disp);
  font-weight:510;
  font-size:clamp(21px, 2.2vw, 31px);
  line-height:1.1; letter-spacing:-0.02em;
  color:var(--paper);
  display:inline-flex; align-items:center; gap:14px;
}
.go-band-link svg{ width:.62em; height:.62em; }
.go-band-link .arr{ transition:transform .25s var(--snap); }
.go-band-link:hover .arr{ transform:translateX(6px); }
.go-band-link:hover{ color:var(--flash); }

/* quiet link style (clients posture) */
.mid-cta-link{
  font-family:var(--disp); font-weight:500;
  font-size:15px;
  display:inline-flex; align-items:center; gap:9px;
  border-bottom:1px solid var(--hair); padding-bottom:3px;
  transition:border-color .2s var(--snap), color .2s var(--snap);
}
.mid-cta-link:hover{ border-color:currentColor; }

/* ====================================================================
   HALVES — the ink section
   ==================================================================== */
.halves{ background:var(--dark); color:var(--paper-on-dark); }
.halves ::selection{ background:var(--paper-on-dark); color:var(--dark); }
.halves-in{
  padding-top:clamp(72px, 10.5vh, 124px);
  padding-bottom:clamp(72px, 10.5vh, 124px);
}
.halves .label{ color:var(--faint-on-dark); border-top:1px solid var(--hair-on-dark); padding-top:12px; display:inline-block; }
.halves-title{
  font-family:var(--disp);
  font-weight:500;
  font-size:clamp(30px, 3.7vw, 54px);
  line-height:1.06; letter-spacing:-0.026em;
  max-width:24ch;
  margin-top:20px;
  color:#fff;
  text-wrap:balance;
}
.halves-title em{
  display:block; font-style:normal;
  color:var(--laurel-soft);
  margin-top:.06em;
}
.halves-grid{
  margin-top:clamp(40px, 6vh, 72px);
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(32px, 5vw, 96px);
}
.half{ border-top:1px solid var(--hair-on-dark); padding-top:22px; }
.half-k{
  font-family:var(--disp); font-weight:560;
  font-size:11.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--faint-on-dark);
}
.half-list{ margin-top:20px; display:flex; flex-direction:column; }
.half-list li{
  display:flex; gap:16px; align-items:baseline;
  padding:13px 0; border-bottom:1px solid rgba(243,240,233,.1);
  font-weight:400; font-size:15px; line-height:1.55; color:rgba(243,240,233,.85);
}
.half-list li:last-child{ border-bottom:0; }
.half-list .hn{
  font-family:var(--mono); font-weight:450;
  font-size:10.5px; color:rgba(243,240,233,.45); flex:none; width:24px;
}
.half-list strong{ font-weight:560; color:#fff; }
.half-list .num{
  font-family:var(--disp); font-weight:560;
  font-size:16.5px; color:#fff; margin-right:2px;
}
.halves-foot{
  margin-top:clamp(36px, 5.5vh, 60px);
  font-family:var(--disp); font-weight:480;
  font-size:clamp(19px, 1.9vw, 26px); line-height:1.4; letter-spacing:-0.015em;
  color:rgba(243,240,233,.8);
  max-width:42ch;
}
.halves-foot .plain{ color:#fff; font-weight:540; }

/* ====================================================================
   INDEX — what settr manages
   ==================================================================== */
/* ====================================================================
   INNOVATION SUBPAGES — shared template (.ipg-*)
   Large title, alternating explainer rows, animated iv-diagrams.
   Page-specific keyframes live inline on each page.
   ==================================================================== */
.ipg-hero{ padding:clamp(56px, 9vh, 110px) 0 clamp(40px, 6vh, 72px); }
.ipg-crumb{
  display:inline-flex; align-items:baseline; gap:8px;
  font-family:var(--disp); font-size:13px; font-weight:500;
  color:var(--ink-50); text-decoration:none;
  margin-bottom:26px;
}
.ipg-crumb:hover{ color:var(--flash); }
.ipg-h1{
  font-family:var(--disp); font-weight:510;
  font-size:clamp(52px, 7.4vw, 108px);
  line-height:.98; letter-spacing:-0.035em;
  text-wrap:balance;
}
.ipg-dek{
  margin-top:22px;
  font-family:var(--disp); font-weight:460;
  font-size:clamp(17px, 1.6vw, 22px); line-height:1.45;
  color:var(--ink-70); max-width:44ch;
}
.ipg-intro{
  padding-bottom:clamp(40px, 6vh, 72px);
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
}
.ipg-intro p{
  font-size:16.5px; line-height:1.7; color:var(--ink-70);
  max-width:58ch;
}

.ipg-problem{ padding-bottom:clamp(28px, 4vh, 48px); }
.ipg-prob-in{
  background:var(--paper-deep);
  border-radius:14px;
  outline:1px solid var(--hair-soft); outline-offset:-1px;
  padding:clamp(28px, 4vw, 52px);
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(28px, 4vw, 64px);
}
.ipg-prob-col .label{ display:block; margin-bottom:14px; }
.ipg-prob-t{
  font-family:var(--disp); font-weight:480;
  font-size:clamp(17px, 1.8vw, 25px);
  line-height:1.4; letter-spacing:-0.012em;
  color:var(--ink-70); text-wrap:pretty;
}
.ipg-prob-col.solve{ border-left:1px solid var(--hair); padding-left:clamp(28px, 4vw, 64px); }
.ipg-prob-col.solve .ipg-prob-t{ color:var(--ink); }
@media (max-width: 900px){
  .ipg-prob-in{ grid-template-columns:1fr; gap:24px; }
  .ipg-prob-col.solve{ border-left:0; padding-left:0; border-top:1px solid var(--hair); padding-top:24px; }
}

.ipg-row{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(32px, 5vw, 88px); align-items:center;
  padding-top:clamp(44px, 7vh, 84px);
  padding-bottom:clamp(44px, 7vh, 84px); /* block-only — .shell owns the gut */
}
.ipg-row.flip{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
.ipg-row.flip .ipg-copy{ order:2; }
.ipg-row.flip .ipg-fig{ order:1; }
.ipg-copy .label{ display:block; margin-bottom:16px; }
.ipg-h2{
  font-family:var(--disp); font-weight:510;
  font-size:clamp(24px, 2.4vw, 36px);
  line-height:1.1; letter-spacing:-0.022em;
  margin-bottom:16px; text-wrap:balance;
}
.ipg-p{ font-size:15.5px; line-height:1.7; color:var(--ink-70); max-width:48ch; }
.ipg-fig{
  background:var(--paper-deep);
  border-radius:14px;
  outline:1px solid var(--hair-soft); outline-offset:-1px;
  overflow:hidden;
}
.ipg-fig svg{ width:100%; height:auto; display:block; }

.ipg-cta{ padding:clamp(56px, 9vh, 100px) 0; text-align:left; }

/* reduced motion: land on final states */
@media (prefers-reduced-motion: reduce){
  .ipg-fig *{ animation:none !important; }
}
@media (max-width: 900px){
  .ipg-intro{ grid-template-columns:1fr; }
  .ipg-row, .ipg-row.flip{ grid-template-columns:1fr; gap:22px; padding-top:36px; padding-bottom:36px; }
  .ipg-row.flip .ipg-copy{ order:1; }
  .ipg-row.flip .ipg-fig{ order:2; }
}

/* ====================================================================
   KPI BAND — copy left, oversized numbers stacked right
   ==================================================================== */

.kpi-in{
  padding-top:clamp(56px, 8vh, 92px);
  padding-bottom:clamp(64px, 9vh, 104px);
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(32px, 5vw, 96px);
  align-items:start;
}
.kpi-copy p{
  font-size:15.5px; line-height:1.68; color:var(--ink-70);
  max-width:44ch;
}
.kpi-copy p + p{ margin-top:18px; }
.kpi-list{ display:flex; flex-direction:column; }
.kpi-item{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(180px, 236px);
  gap:24px; align-items:start;
  border-top:1px solid var(--hair-soft);
  padding:clamp(26px, 4vh, 40px) 0 clamp(30px, 4.5vh, 48px);
}
.kpi-v{
  font-family:var(--disp); font-weight:460;
  font-size:clamp(56px, 7.2vw, 112px);
  line-height:.94; letter-spacing:-0.035em;
  color:var(--ink);
}
.kpi-t{
  padding-top:4px;
  font-size:13px; line-height:1.55; color:var(--ink-50);
}
@media (max-width: 900px){
  .kpi-in{ grid-template-columns:1fr; gap:36px; }
  .kpi-item{ grid-template-columns:1fr; gap:8px; padding:22px 0 26px; }
  .kpi-v{ font-size:clamp(48px, 13vw, 64px); }
}


.svc-in{ padding-top:clamp(60px, 8.5vh, 104px); padding-bottom:clamp(60px, 8.5vh, 104px); }
.svc-head{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(24px,4vw,72px); align-items:end; margin-bottom:clamp(32px,5vh,56px); }
.svc-head .label{ padding-top:12px; border-top:1px solid var(--hair); display:inline-block; }
.svc-title{
  font-family:var(--disp);
  font-weight:510;
  font-size:clamp(28px, 3.2vw, 46px); line-height:1.05; letter-spacing:-0.025em;
  margin-top:18px;
}
.svc-lede{ font-size:15.5px; font-weight:400; line-height:1.68; color:var(--ink-70); max-width:44ch; }

.svc-index{
  columns:2; column-gap:clamp(40px, 6vw, 110px);
}
.svc-row{
  break-inside:avoid;
  display:flex; align-items:baseline; gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--hair-soft);
}
.svc-n{
  font-family:var(--mono); font-weight:450;
  font-size:11px; color:var(--laurel); flex:none; width:24px;
}
.svc-name{
  font-family:var(--disp); font-weight:510;
  font-size:clamp(16.5px, 1.4vw, 19px); letter-spacing:-0.01em;
  flex:none;
}
.svc-note{ font-size:13px; font-weight:400; color:var(--ink-50); text-align:right; flex:1; }

/* ====================================================================
   CLIENTS — calm warm band
   ==================================================================== */
.clients{ background:var(--paper-deep); }
.clients-in{ padding-top:clamp(56px, 8vh, 92px); padding-bottom:clamp(56px, 8vh, 92px); }
.clients .label{ border-top:1px solid var(--hair); padding-top:12px; display:inline-block; }
.client-names{
  margin-top:clamp(24px, 3.5vh, 38px);
  display:flex; flex-wrap:wrap;
  column-gap:.55em; row-gap:.15em;
  line-height:1.3;
}
.client-names li{
  font-family:var(--disp);
  font-weight:510;
  font-size:clamp(21px, 2.5vw, 34px);
  letter-spacing:-0.02em;
  color:var(--ink);
  white-space:nowrap;
}
.client-names li + li::before{
  content:"·\00a0";
  color:var(--laurel);
  font-weight:400;
}
.clients-posture{
  margin-top:clamp(32px, 4.5vh, 48px);
  padding-top:24px;
  border-top:1px solid var(--hair);
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(24px,4vw,72px); align-items:center;
}
.clients-posture p{
  font-size:15.5px; font-weight:400; line-height:1.66; color:var(--ink-70);
  max-width:52ch;
}
.clients-posture p em{
  display:block;
  font-family:var(--disp); font-style:normal; font-weight:530;
  font-size:1.22em; letter-spacing:-0.015em; color:var(--ink);
  margin-bottom:6px;
}
.clients .cp-cta{ justify-self:end; color:var(--ink); }

/* ====================================================================
   CLOSE — final CTA
   ==================================================================== */

.close-in{
  padding-top:clamp(80px, 12vh, 150px);
  padding-bottom:clamp(80px, 12vh, 150px);
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.close-h{
  font-family:var(--disp);
  font-weight:510;
  font-size:clamp(36px, 4.6vw, 68px); line-height:1.04; letter-spacing:-0.03em;
  max-width:18ch; text-wrap:balance;
}
.close-h em{ font-style:normal; color:var(--laurel); }
.close-sub{
  margin-top:22px; font-size:16px; font-weight:400; line-height:1.66;
  color:var(--ink-70); max-width:52ch;
}
.close .btn{ margin-top:34px; padding:16px 30px; font-size:15px; }
.close-note{ margin-top:18px; font-size:13px; color:var(--ink-50); }

/* ====================================================================
   FOOTER — ink
   ==================================================================== */
.foot{ background:var(--dark); color:var(--paper-on-dark); }
.foot ::selection{ background:var(--paper-on-dark); color:var(--dark); }
.foot-in{ padding-top:clamp(52px, 7.5vh, 80px); padding-bottom:36px; }
.foot-top{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(24px,4vw,72px);
  padding-bottom:clamp(32px, 5vh, 52px);
  border-bottom:1px solid var(--hair-on-dark);
}
.foot-tag{
  font-family:var(--disp);
  font-weight:500;
  font-size:clamp(24px, 2.7vw, 38px); line-height:1.08; letter-spacing:-0.024em;
  max-width:18ch;
  color:#fff;
}
.foot-tag em{ display:block; font-style:normal; color:var(--laurel-soft); margin-top:.05em; }
.foot-top .btn{ align-self:center; justify-self:end; background:var(--paper); color:var(--ink); }
.foot-top .btn:hover{ background:var(--laurel-soft); color:var(--dark); }

.foot-cols{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:clamp(24px, 3vw, 56px);
  padding:clamp(32px, 4.5vh, 48px) 0;
}
.foot-col .k{ display:block; margin-bottom:16px; color:var(--faint-on-dark); }
.foot-col ul{ display:flex; flex-direction:column; gap:11px; }
.foot-col a{ font-size:14px; font-weight:400; color:rgba(243,240,233,.82); text-decoration:none; }
.foot-col a:hover{ color:var(--flash); text-decoration:underline; text-underline-offset:3px; }
.foot-brand p{ font-size:14px; font-weight:400; color:rgba(243,240,233,.72); max-width:30ch; line-height:1.65; }
.foot-brand img{ height:19px; margin-bottom:16px; filter:invert(1) brightness(1.6); }

.foot-meta{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding-top:24px;
  border-top:1px solid var(--hair-on-dark);
  font-size:12.5px; color:var(--faint-on-dark);
}
.foot-cities{ display:flex; gap:18px; flex-wrap:wrap; }
.foot-cities .c strong{ font-weight:530; color:var(--paper-on-dark); }
.foot-social{ display:flex; gap:16px; }
.foot-social a{ color:var(--faint-on-dark); text-decoration:none; }
.foot-social a:hover{ color:var(--flash); }
.foot-lang a{ text-decoration:none; color:var(--faint-on-dark); margin-left:8px; }
.foot-lang a[aria-current="page"]{ color:#fff; font-weight:530; }
.foot-copy{ margin-top:18px; font-size:12px; color:var(--faint-on-dark); }

/* ====================================================================
   MOTION — reveals
   ==================================================================== */
.js .rv{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--snap), transform .6s var(--snap); }
.js .rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.06s; }
.rv-d2{ transition-delay:.12s; }
.rv-d3{ transition-delay:.18s; }

@media (prefers-reduced-motion: reduce){
  .js .rv{ opacity:1; transform:none; transition:none; }
  .rail-thread{ transform:scaleY(1) !important; }
  .station .st-node .dot{ background:var(--laurel); border-color:var(--laurel); }
  .btn .arr, .go-band-link .arr{ transition:none; }
  .mast-nav a{ transition:none; }
  .js .lm .li{ transform:none; transition:none; }
  .plate video, .st-plate video{ transition:none; }
  .plate:hover video, .st-plate:hover video{ transform:none; }
}

/* ====================================================================
   RESPONSIVE
   ==================================================================== */
@media (max-width: 1180px){
  .mast-nav{ gap:2px; }
  .mast-nav a{ font-size:13.5px; padding:7px 9px; }
}

@media (max-width: 1080px){
  .hero-in{ grid-template-columns:1fr; gap:56px; }
  .hero-plates{ min-height:430px; max-width:520px; }
  .thesis-in{ grid-template-columns:1fr; gap:36px; }
  .thesis-body{ max-width:60ch; }
  .station, .station.flip{
    grid-template-columns: var(--rail) minmax(0,1fr);
    row-gap:26px;
  }
  .station .st-copy{ order:2; grid-column:2; }
  .station .st-art, .station.flip .st-art{ order:3; grid-column:2; max-width:640px; }
  .jny-head{ grid-template-columns:1fr; gap:18px; }
  .svc-head{ grid-template-columns:1fr; gap:18px; }
}

@media (max-width: 900px){
  .mast-nav{ display:none; }
  .mast-login{ display:none; }
  .mast-burger{ display:block; }
  .mast-cta{ display:none; }
  .halves-grid{ grid-template-columns:1fr; gap:36px; }
  .svc-index{ columns:1; }
  .svc-row{ flex-wrap:wrap; }
  .svc-note{ flex-basis:100%; text-align:left; padding-left:40px; margin-top:1px; }
  .clients-posture{ grid-template-columns:1fr; }
  .clients .cp-cta{ justify-self:start; }
  .foot-top{ grid-template-columns:1fr; gap:26px; }
  .foot-top .btn{ justify-self:start; }
  .foot-cols{ grid-template-columns:1fr 1fr; row-gap:32px; }
  .go-band-in{ flex-direction:column; align-items:flex-start; gap:14px; }
}

@media (max-width: 640px){
  /* artifact SVGs scale ~0.65 here — bump in-viewBox type, drop tertiary notes */
  .art-svg .a-label, .art-svg .a-label-d{ font-size:14px; }
  .art-svg .a-val{ font-size:15px; }
  .art-svg .a-serif, .art-svg .a-serif-d{ font-size:17.5px; }
  .art-svg .a-m-hide{ display:none; }
  .art-svg .a-track{ transform:translate(388px, 58px); }

  :root{ --rail: 30px; }
  body.home2{ font-size:15px; }
  .rail{ left:calc(var(--gut) + 4px); }
  .hero-head{ padding-top:36px; }
  .hero-h{ font-size:clamp(34px, 9.6vw, 42px); letter-spacing:-0.026em; }
  .hero-plates{ min-height:380px; }
  .plate-a{ right:32%; width:60%; z-index:4; }
  .plate-b{ width:48%; right:0; bottom:-14px; }
  .plate-read{ left:0; }
  .hero-plates figcaption{ bottom:-40px; }
  .tk{ font-size:11.5px; }
  .st-plates{ gap:8px; }
  .st-plate:nth-child(2){ margin-top:20px; }
  .st-plate:nth-child(3){ margin-top:8px; }
  .client-names li{ font-size:clamp(19px, 5.6vw, 24px); }
  .foot-cols{ grid-template-columns:1fr; }
  .foot-meta{ flex-direction:column; align-items:flex-start; }
  .close .btn{ width:100%; }
  .hero-cta .btn{ width:100%; }
  .st-split > div{ grid-template-columns:56px 1fr; gap:10px; }
}

/* ====================================================================
   HERO v4 — THE OPERATING CANVAS
   A single living system: brand → casting → gifting → content →
   read → media → attributed return, running on a loop.
   The hero carries no green; --live (precise ultramarine) marks live
   system states only.
   ==================================================================== */
:root{ --live:#2439C9; --live-soft:rgba(36,57,201,.14); }

.hero-op .hero-top{ padding-top:clamp(40px, 5.5vh, 72px); }
.hero-op .hero-eyebrow .bar{ background:var(--ink); }
.hero-op .hero-h{
  font-size:clamp(34px, 3.8vw, 58px);
  line-height:1.04;
  letter-spacing:-0.028em;
  max-width:22ch;
}
.hero-op .hero-h em{ color:var(--ink); display:inline; margin:0; }
.hero-op .hero-h .lm{ display:inline; }
.hero-op .hero-h .lm:first-child::after{ content:" "; }
.hero-op .hero-h .li{ display:inline-block; }
/* the moderate headline reveals as a block, not via line masks */
.js .hero-op .lm .li{ transform:none; transition:none; }
.cv-seg-dash{ stroke-dasharray:2 6; stroke-opacity:0; transition:stroke-opacity .8s var(--ease); }
.cv-seg-dash.on{ stroke-opacity:1; }

.hero-row{
  margin-top:clamp(18px, 2.5vh, 28px);
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(24px, 4vw, 72px); flex-wrap:wrap;
}
.hero-op .hero-sub{ margin-top:0; max-width:52ch; font-size:15.5px; }
.hero-op .hero-cta{ margin-top:0; align-items:center; gap:20px; }

/* ----- canvas shell ----- */
.canvas{
  margin-top:clamp(28px, 4vh, 44px);
  border-top:1px solid var(--hair-soft);
  padding-bottom:clamp(36px, 5vh, 56px);
}
.cv-head{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:14px 0 18px;
}
.cv-k{
  font-family:var(--mono); font-size:11px; font-weight:450;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-50);
}
.cv-phase{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; color:var(--ink-70);
  letter-spacing:.03em;
}
.cv-live{
  width:6px; height:6px; border-radius:50%; background:var(--live);
  animation:cvlive 2.2s ease-in-out infinite;
}
@keyframes cvlive{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.cv-field{
  position:relative;
  aspect-ratio:1200/430;
  min-height:300px;
}
.cv-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }

/* line segments — drawn as the campaign reaches them */
.cv-seg{
  fill:none; stroke:rgba(23,21,15,.34); stroke-width:1.4;
  transition:stroke-dashoffset 1.1s var(--ease);
}
.cv-seg-dash{ stroke-dasharray:2 6 !important; stroke:rgba(23,21,15,.4); }
.cv-seg-return{ stroke:var(--live); stroke-opacity:.5; }

.cv-parcel{ color:var(--ink-70); opacity:0; transition:opacity .4s var(--ease); }
.cv-parcel.on{ opacity:1; }
.cv-pulse{ fill:var(--live); opacity:0; }
.cv-pulse.on{ opacity:1; }

/* elements choreography */
.cvE{ opacity:0; transform:translateY(10px); transition:opacity .6s var(--snap), transform .6s var(--snap); }
.cvE.on{ opacity:1; transform:none; }

.cv-tag{
  font-family:var(--mono); font-size:10.5px; font-weight:450;
  letter-spacing:.02em; color:var(--ink-50);
  white-space:nowrap;
}

/* brand node */
.cv-brand{
  position:absolute; left:1.8%; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:7px;
  width:8%; min-width:76px;
}
.cvE.cv-brand{ transform:translateY(calc(-50% + 10px)); }
.cvE.cv-brand.on{ transform:translateY(-50%); }
.cv-brand img{
  width:100%; aspect-ratio:44/56; object-fit:cover;
  border-radius:8px; outline:1px solid var(--hair); outline-offset:-1px;
}
.cv-tag-sub{ color:var(--ink-35); }

/* casting thumbs */
.cv-th{
  position:absolute; width:4.4%; min-width:42px;
  border-radius:7px; overflow:hidden;
  outline:1px solid var(--hair-soft); outline-offset:-1px;
}
.cv-th img{ width:100%; aspect-ratio:9/12; object-fit:cover; display:block; }
.cv-th1{ left:19.3%; top:25%; transform:translate(-50%,-50%); }
.cv-th2{ left:21.8%; top:50%; transform:translate(-50%,-50%); }
.cv-th3{ left:19.3%; top:75%; transform:translate(-50%,-50%); }
.cvE.cv-th{ transform:translate(-50%, calc(-50% + 10px)); }
.cvE.cv-th.on{ transform:translate(-50%,-50%); }
.cv-th1, .cv-th3{ opacity:0; }
.cv-th1.on, .cv-th3.on{ opacity:.45; }
.cv-pick{ outline:1.5px solid var(--live); outline-offset:2px; }
.cv-fit{
  position:absolute; right:-6px; top:-9px;
  font-family:var(--mono); font-size:9.5px; color:#fff;
  background:var(--live); border-radius:999px; padding:2px 7px;
}

/* the posted content */
.cv-post{
  position:absolute; left:46.8%; top:50%;
  width:10.4%; min-width:100px;
  transform:translate(-50%,-50%);
}
.cvE.cv-post{ transform:translate(-50%, calc(-50% + 12px)); }
.cvE.cv-post.on{ transform:translate(-50%,-50%); }
.cv-post video{
  width:100%; aspect-ratio:9/15; object-fit:cover;
  border-radius:10px; outline:1px solid var(--hair); outline-offset:-1px;
  display:block;
}
.cv-post-tag{ position:absolute; left:0; bottom:-24px; }
.cv-scan{ position:absolute; inset:7px; pointer-events:none; }
.cv-scan i{ position:absolute; width:12px; height:12px; border:1.5px solid var(--live); opacity:.9; }
.cv-scan .tl{ top:0; left:0; border-right:0; border-bottom:0; }
.cv-scan .tr{ top:0; right:0; border-left:0; border-bottom:0; }
.cv-scan .bl{ bottom:0; left:0; border-right:0; border-top:0; }
.cv-scan .br{ bottom:0; right:0; border-left:0; border-top:0; }

/* the read */
.cv-read{
  position:absolute; left:55.4%; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:9px;
  width:15%; min-width:150px;
}
.cvE.cv-read{ transform:translateY(calc(-50% + 10px)); }
.cvE.cv-read.on{ transform:translateY(-50%); }
.cv-sig{
  font-family:var(--mono); font-size:11px; color:var(--ink-70);
  letter-spacing:.02em;
  padding-bottom:8px; border-bottom:1px solid var(--hair-soft);
  white-space:nowrap;
}
.cv-verdict{
  margin-top:4px;
  align-self:flex-start;
  font-family:var(--mono); font-size:10.5px; color:#fff;
  background:var(--live); border-radius:999px; padding:5px 12px;
  transition-delay:.5s;
}

/* media chips */
.cv-chip{
  position:absolute;
  font-family:var(--disp); font-size:13px; font-weight:530;
  color:var(--ink);
  border:1px solid var(--hair); border-radius:999px;
  padding:8px 16px; background:var(--paper);
  white-space:nowrap;
}
.cv-chip1{ left:79.2%; top:35.3%; transform:translateY(-50%); }
.cv-chip2{ left:79.2%; top:65.1%; transform:translateY(-50%); }
.cvE.cv-chip{ transform:translateY(calc(-50% + 8px)); }
.cvE.cv-chip.on{ transform:translateY(-50%); }

/* the return */
.cv-return-tag{
  position:absolute; left:50%; top:96%; transform:translate(-50%,-50%);
  color:var(--live);
}
.cvE.cv-return-tag{ transform:translate(-50%, calc(-50% + 8px)); }
.cvE.cv-return-tag.on{ transform:translate(-50%,-50%); }

/* cycle fade */
.cv-field.cv-fade .cvE,
.cv-field.cv-fade .cv-parcel,
.cv-field.cv-fade .cv-pulse{ opacity:0 !important; transition-duration:.45s; }

/* static mode (no JS timeline / reduced motion): full state, no theatre */
.cv-field.cv-static .cvE,
.cv-field.cv-static .cv-parcel{ opacity:1; transform:none; }
.cv-field.cv-static .cvE.cv-th1, .cv-field.cv-static .cvE.cv-th3{ opacity:.45; }
.cv-field.cv-static .cvE.cv-th{ transform:translate(-50%,-50%); }
.cv-field.cv-static .cvE.cv-brand{ transform:translateY(-50%); }
.cv-field.cv-static .cvE.cv-post{ transform:translate(-50%,-50%); }
.cv-field.cv-static .cvE.cv-read{ transform:translateY(-50%); }
.cv-field.cv-static .cvE.cv-chip{ transform:translateY(-50%); }
.cv-field.cv-static .cvE.cv-return-tag{ transform:translate(-50%,-50%); }
.cv-field.cv-static .cv-seg{ stroke-dashoffset:0 !important; }

@media (prefers-reduced-motion: reduce){
  .cv-live{ animation:none; }
}

/* ----- canvas responsive ----- */
@media (max-width: 900px){
  .hero-row{ flex-direction:column; align-items:flex-start; gap:20px; }
}
@media (max-width: 720px){
  .cv-field{
    aspect-ratio:auto; height:552px;
  }
  .cv-svg{ display:none; }

  /* band 1 — brand + casting */
  .cv-field .cvE.cv-brand{
    left:0; top:1.5%; transform:translateY(8px);
    flex-direction:column; width:76px; min-width:0;
  }
  .cv-field .cvE.cv-brand.on, .cv-field.cv-static .cvE.cv-brand{ transform:none; }
  .cv-field .cv-brand img{ width:76px; }
  .cv-field .cv-tag{ white-space:normal; }
  .cv-field .cvE.cv-th{ width:52px; min-width:0; }
  .cv-field .cvE.cv-th1{ left:40%; top:11%; }
  .cv-field .cvE.cv-th2{ left:60%; top:11%; }
  .cv-field .cvE.cv-th3{ left:80%; top:11%; }

  /* band 2 — content + the read */
  .cv-field .cvE.cv-post{
    left:0; top:36%; transform:translateY(10px);
    width:37%; min-width:118px;
  }
  .cv-field .cvE.cv-post.on, .cv-field.cv-static .cvE.cv-post{ transform:none; }
  .cv-field .cvE.cv-read{
    left:44%; top:37.5%; transform:translateY(8px);
    width:56%; min-width:0;
  }
  .cv-field .cvE.cv-read.on, .cv-field.cv-static .cvE.cv-read{ transform:none; }
  .cv-field .cv-sig{ white-space:normal; font-size:10.5px; }

  /* band 3 — media + the return */
  .cv-field .cvE.cv-chip{ transform:translateY(8px); font-size:12px; padding:7px 13px; }
  .cv-field .cvE.cv-chip.on, .cv-field.cv-static .cvE.cv-chip{ transform:none; }
  .cv-field .cvE.cv-chip1{ left:0; top:83%; }
  .cv-field .cvE.cv-chip2{ left:31%; top:83%; }
  .cv-field .cvE.cv-return-tag{
    left:0; top:94%; transform:translateY(6px);
    white-space:normal; width:96%;
  }
  .cv-field .cvE.cv-return-tag.on, .cv-field.cv-static .cvE.cv-return-tag{ transform:none; }
}

/* ====================================================================
   HERO v5 — THE FILM
   Full-bleed campaign footage, inset like a print. The headline sits
   in the film; the six stages wait lower-right. Runway-calibre
   immersion, Settr identity.
   ==================================================================== */
.hero-film{ padding:0 14px; }
.film-wrap{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  height:min(88vh, 920px);
  min-height:540px;
  background:#111;
  /* the opening sits IN the page, not on it */
  box-shadow:
    0 2px 6px rgba(23,21,15,.14),
    0 48px 96px -52px rgba(23,21,15,.55);
}
.film-wrap::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; z-index:1;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.09),        /* glass lip on the cut edge */
    inset 0 1px 0 rgba(255,255,255,.16),          /* catch-light on the top bevel */
    inset 0 30px 52px -28px rgba(8,7,5,.52),      /* page shadow falling into the opening */
    inset 0 -18px 44px -30px rgba(8,7,5,.4),
    inset 0 0 90px rgba(8,7,5,.3);                /* edge vignette — the world curves away */
}
.film-eyebrow, .film-copy, .film-stages{ z-index:2; }
.film-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.film-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(12,11,9,.62) 0%, rgba(12,11,9,.22) 34%, rgba(12,11,9,0) 56%),
    linear-gradient(to bottom, rgba(12,11,9,.28) 0%, rgba(12,11,9,0) 18%);
  pointer-events:none;
}

.film-eyebrow{
  position:absolute; top:26px; left:clamp(22px, 3vw, 44px);
  font-family:var(--disp);
  font-size:11.5px; font-weight:560;
  letter-spacing:.11em; text-transform:uppercase;
  color:rgba(250,248,244,.85);
}

.film-copy{
  position:absolute; left:clamp(22px, 3vw, 44px); right:clamp(22px, 3vw, 44px);
  bottom:clamp(24px, 4.5vh, 44px);
  max-width:640px;
  color:var(--paper);
}
.hero-film .hero-h{
  font-family:"Geist", var(--disp);
  font-weight:560;
  font-size:clamp(34px, 3.9vw, 60px);
  line-height:1.04;
  letter-spacing:-0.03em;
  color:var(--paper);
}
.hero-film .hero-h em{ font-style:normal; color:var(--paper); display:inline; }
.hero-film .hero-h .lm{ display:inline; }
.hero-film .hero-h .lm:first-child::after{ content:" "; }
.hero-film .hero-h .li{ display:inline; }
.js .hero-film .lm .li{ transform:none; transition:none; }

.film-sub{
  margin-top:14px;
  font-size:15px; font-weight:400; line-height:1.6;
  color:rgba(250,248,244,.82);
  max-width:46ch;
}
.hero-film .hero-cta{ margin-top:22px; }
.film-btn{
  background:var(--paper); color:var(--ink);
}
.film-btn:hover{ background:#fff; color:var(--ink); }

.film-stages{
  position:absolute; right:clamp(22px, 3vw, 44px); bottom:clamp(24px, 4.5vh, 44px);
  display:flex; flex-direction:column; gap:9px;
  width:max-content;          /* shrink to the widest row, anchored right */
  align-items:stretch;        /* every row fills that width */
}
.film-stages a{
  font-family:var(--disp);
  font-size:14px; font-weight:500; letter-spacing:.005em;
  color:rgba(250,248,244,.8);
  text-decoration:none;
  display:grid;
  grid-template-columns:18px 1fr; /* numbers share one aligned column */
  align-items:baseline; gap:11px;
  transition:color .18s var(--ease), transform .18s var(--ease);
}
.film-stages a:hover{ color:var(--flash); transform:translateX(3px); }
.film-stages .fs-n{
  font-family:var(--mono); font-size:10px; font-weight:450;
  color:rgba(250,248,244,.5);
}

@media (max-width: 900px){
  .film-stages{ display:none; }
}
@media (max-width: 640px){
  .hero-film{ padding:0 10px; }
  .film-wrap{ height:min(78vh, 700px); min-height:480px; border-radius:14px; }
  .film-copy{ max-width:none; }
  .hero-film .hero-h{ font-size:clamp(31px, 8.6vw, 40px); }
  .hero-film .hero-cta .btn{ width:auto; }
}

/* ====================================================================
   BELOW-HERO v7 — BOLD · the page is half black
   True full-bleed halves (no containers/cards). Colour lives only in
   creator content. Geist/Schibsted = the people, IBM Plex Mono = machine.
   ==================================================================== */
.b2-intro .label{ padding-top:12px; border-top:1px solid var(--hair); display:inline-block; }
.cr-title{
  font-family:var(--disp); font-weight:510;
  font-size:clamp(28px,3.6vw,52px); line-height:1.04; letter-spacing:-0.028em;
  margin-top:16px; max-width:24ch;
}
.cr-title .b{ color:var(--ink-50); }
.cr-sub{ margin-top:16px; font-size:15.5px; line-height:1.66; color:var(--ink-70); max-width:58ch; }

/* ---- CONTENT INTELLIGENCE — full-bleed crossing ---- */
.cross2{ background:var(--paper); border-top:1px solid var(--hair-soft); }
.cross2-intro{ padding-top:clamp(60px,8.5vh,104px); padding-bottom:clamp(30px,4vh,48px); }
.cross2-split{
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
  min-height:clamp(520px,64vh,720px);
}
.cx-half{ display:flex; align-items:center; padding:clamp(40px,6vh,76px) clamp(28px,4.5vw,80px); }
.cx-human{ background:var(--paper); justify-content:flex-end; }
.cx-machine{ background:var(--ink); color:var(--paper-on-dark); justify-content:flex-start; }
.cx-content{ width:min(100%,300px); display:flex; flex-direction:column; gap:15px; }
.cx-clip{ position:relative; border-radius:10px; overflow:hidden; background:var(--paper-deep); }
.cx-clip video{ width:100%; aspect-ratio:9/13; object-fit:cover; display:block; }
.cx-scan{ position:absolute; inset:12px; pointer-events:none; }
.cx-scan i{ position:absolute; width:15px; height:15px; border:1.5px solid rgba(250,248,244,.92); }
.cx-scan .tl{ top:0; left:0; border-right:0; border-bottom:0; }
.cx-scan .tr{ top:0; right:0; border-left:0; border-bottom:0; }
.cx-scan .bl{ bottom:0; left:0; border-right:0; border-top:0; }
.cx-scan .br{ bottom:0; right:0; border-left:0; border-top:0; }
.cx-cap{ font-family:var(--mono); font-size:11px; color:var(--ink-50); line-height:1.5; }
.cx-cap b{ color:var(--ink); font-weight:400; }
.cx-extract{ display:flex; flex-direction:column; gap:9px; margin-top:2px; padding-top:14px; border-top:1px solid var(--hair-soft); }
.cx-extract li{ font-family:var(--mono); font-size:11px; color:var(--ink-70); display:flex; align-items:center; gap:10px; }
.cx-extract .dot{ width:5px; height:5px; border-radius:50%; background:var(--ink); flex:none; }
.cx-read{ width:min(100%,430px); }
.cr-mk{ font-family:var(--mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--faint-on-dark); margin-bottom:16px; }
.cr-dims{ display:flex; flex-direction:column; gap:14px; }
.cr-dim{ display:grid; grid-template-columns:1fr 76px 30px; align-items:center; gap:14px; }
.cr-dim .d-n{ font-size:14px; color:rgba(243,240,233,.92); }
.cr-dim .d-bar{ height:2px; background:rgba(243,240,233,.16); position:relative; }
.cr-dim .d-bar i{ position:absolute; inset:0 auto 0 0; background:var(--paper-on-dark); }
.cr-dim .d-v{ font-family:var(--mono); font-size:11px; color:var(--faint-on-dark); text-align:right; }
.cr-rule{ height:1px; background:rgba(243,240,233,.14); margin:20px 0 16px; }
.cr-decision{ display:flex; gap:8px; flex-wrap:wrap; }
.cr-chip{ font-family:var(--mono); font-size:11px; padding:7px 14px; border-radius:999px; border:1px solid rgba(243,240,233,.28); color:rgba(243,240,233,.66); }
.cr-chip.on{ background:var(--paper-on-dark); color:var(--ink); border-color:var(--paper-on-dark); font-weight:500; }
.cr-loop{ margin-top:18px; font-family:var(--mono); font-size:11px; color:var(--faint-on-dark); line-height:1.55; max-width:44ch; }

/* ---- THE SYMBIOSIS — full-bleed half / half ---- */
.pivot{ background:var(--paper); border-top:1px solid var(--hair-soft); }
.pivot-intro{ padding-top:clamp(60px,8.5vh,104px); padding-bottom:clamp(30px,4vh,48px); text-align:center; }
.pivot-intro .label{ color:var(--ink-50); }
.pivot-h{ font-family:var(--disp); font-weight:510; font-size:clamp(32px,4.6vw,66px); line-height:1.0; letter-spacing:-0.03em; margin-top:14px; }
.pivot-split{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
  min-height:clamp(440px,52vh,600px);
}
.pv-half{ display:flex; align-items:center; padding:clamp(44px,6.5vh,80px) clamp(28px,4.5vw,80px); }
.pv-human{ background:var(--paper); justify-content:flex-start; }
.pv-machine{ background:var(--ink); color:var(--paper-on-dark); justify-content:flex-end; }
.pv-inner{ width:min(100%,360px); display:flex; flex-direction:column; gap:13px; }
.pv-k{ font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase; }
.pv-human .pv-k{ color:var(--ink-50); }
.pv-machine .pv-k{ color:var(--faint-on-dark); }
.pv-h2{ font-family:var(--disp); font-weight:520; font-size:clamp(22px,2.3vw,31px); line-height:1.1; letter-spacing:-0.02em; }
.pv-machine .pv-h2{ color:#fff; }
.pv-p{ font-size:15px; line-height:1.6; color:var(--ink-70); max-width:32ch; }
.pv-machine .pv-p{ color:rgba(243,240,233,.82); }
.pv-list{ margin-top:6px; display:flex; flex-direction:column; }
.pv-list li{ font-family:var(--mono); font-size:12px; letter-spacing:.01em; padding:9px 0; border-bottom:1px solid var(--hair-soft); }
.pv-human .pv-list li{ color:var(--ink-70); }
.pv-machine .pv-list li{ color:rgba(243,240,233,.72); border-bottom-color:rgba(243,240,233,.12); }
.pv-list li:last-child{ border-bottom:0; }

/* the loop — a ring on the seam, in the clear gutter between the columns */
.pv-loop{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3;
  width:clamp(104px,10vw,132px); aspect-ratio:1; border-radius:50%;
  background:var(--paper);
  box-shadow:0 0 0 1px var(--hair);
  overflow:hidden;
}
.pv-loop::before{ content:""; position:absolute; top:0; bottom:0; right:0; width:50%; background:var(--ink); }
.pv-loop svg{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.pv-loop .pv-ring{ fill:none; stroke:rgba(140,138,130,.55); stroke-width:1; }
.pv-loop .pv-arc{ fill:none; stroke-width:1.4; }

.pivot-foot{ padding-top:clamp(40px,6vh,72px); padding-bottom:clamp(60px,8.5vh,104px); text-align:center; }
.pv-loopcap{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-50); display:block; margin-bottom:12px; }
.pv-loopcap .arw{ color:var(--ink-35); }
.pv-foot{ font-family:var(--disp); font-weight:510; font-size:clamp(21px,2.3vw,33px); letter-spacing:-0.02em; color:var(--ink); }

/* ---- responsive ---- */
@media (max-width: 860px){
  .cross2-split, .pivot-split{ grid-template-columns:1fr; min-height:0; }
  .cx-human, .pv-human{ justify-content:flex-start; }
  .cx-machine, .pv-machine{ justify-content:flex-start; }
  .cx-content{ width:min(64%,240px); }
  .cx-read, .pv-inner{ width:100%; max-width:none; }
  .pv-machine .pv-inner{ align-items:flex-start; }
  /* stack: glove → loop → spine; relative (not static) so the loop still
     contains its absolute SVG instead of it escaping to .pivot-split */
  .pv-loop{
    position:relative; transform:none; left:auto; top:auto;
    width:54px; height:54px; margin:0 auto;
    order:2;
  }
  .pv-human{ order:1; }
  .pv-machine{ order:3; }
}

/* ====================================================================
   01 CASTING — visual discovery composer (dark, cinematic, hero-aligned)
   The artifact IS the product: a prompt is typed, the system reads a
   reference creator, classifies it, searches the index, and returns a
   ranked grid of creators — match %, ER, followers, tier.
   ==================================================================== */
.station--discover .st-art{ max-width:none; }
.discover{
  background:var(--dark);
  color:var(--paper-on-dark);
  border-radius:14px;
  padding:clamp(20px,2.3vw,30px);
  overflow:hidden;
}
.dsc-eyebrow{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--faint-on-dark);
}
.dsc-composer{ padding-bottom:16px; border-bottom:1px solid var(--hair-on-dark); }
.dsc-prompt{
  margin-top:11px; font-family:var(--mono); font-size:13.5px; line-height:1.5;
  color:rgba(243,240,233,.9); min-height:1.5em;
}
.dsc-prompt .h{ color:#fff; }
.dsc-caret{
  display:inline-block; width:7px; height:1.02em; background:var(--paper-on-dark);
  vertical-align:-2px; margin-left:1px; animation:dsc-blink 1.05s steps(1) infinite;
}
@keyframes dsc-blink{ 50%{ opacity:0; } }

/* work area: fixed footprint so the log → list compose doesn't grow the panel */
.dsc-work{ position:relative; margin-top:18px; min-height:326px; }
.dsc-log{ display:flex; flex-direction:column; gap:11px; }
.discover.composed .dsc-log{ opacity:0; pointer-events:none; transition:opacity .35s var(--ease); }
.dsc-line{
  font-family:var(--mono); font-size:12px; line-height:1.4; color:rgba(243,240,233,.68);
  display:flex; gap:11px; align-items:baseline;
  opacity:0; transform:translateY(4px);
}
.js .dsc-line{ opacity:0; }
.dsc-line.on{ opacity:1; transform:none; transition:opacity .4s var(--ease), transform .4s var(--ease); }
.dsc-line b{ color:#fff; font-weight:400; }
.dsc-tick{ width:12px; height:12px; flex:none; position:relative; align-self:center; }
.dsc-tick::before{ content:""; position:absolute; inset:0; border:1px solid rgba(243,240,233,.3); border-radius:50%; }
.dsc-tick::after{
  content:""; position:absolute; left:3.5px; top:2.5px; width:3px; height:6px;
  border:1.4px solid var(--paper-on-dark); border-top:0; border-left:0;
  transform:rotate(45deg); opacity:0; transition:opacity .3s var(--ease);
}
.dsc-line.done .dsc-tick::before{ border-color:rgba(243,240,233,.5); }
.dsc-line.done .dsc-tick::after{ opacity:1; }

/* result composes into the same space (absolute over the log), fading in */
.dsc-result{ position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .5s var(--ease); }
.discover.composed .dsc-result{ opacity:1; pointer-events:auto; }
.dsc-seed{ display:flex; align-items:center; gap:12px; padding-bottom:13px; border-bottom:1px solid var(--hair-on-dark); }
.dsc-seed-av{ width:34px; height:34px; background:linear-gradient(135deg, rgba(243,240,233,.6), rgba(243,240,233,.34)); }
.dsc-seed-t{ font-family:var(--mono); font-size:12px; color:rgba(243,240,233,.7); line-height:1.4; }
.dsc-seed-t b{ color:#fff; font-weight:400; }
.dsc-seed-c{ display:block; color:rgba(243,240,233,.5); }
.dsc-result-head{
  margin-top:14px;
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--faint-on-dark); padding-bottom:13px; border-bottom:1px solid var(--hair-on-dark);
}
.dsc-result-head .lead{ color:#fff; }
.dsc-mut{ color:rgba(243,240,233,.42); }

.dsc-grid{
  margin-top:14px;
  display:grid; grid-template-columns:repeat(2, 1fr); gap:14px 18px;
}
.dsc-chip{ display:flex; gap:10px; align-items:center; opacity:0; transform:translateY(6px); }
.dsc-chip.on{ opacity:1; transform:none; transition:opacity .45s var(--snap), transform .45s var(--snap); }
.dsc-av{ width:30px; height:30px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1px rgba(243,240,233,.22); }
.dsc-chip-d{ min-width:0; }
.dsc-m{ display:block; font-family:var(--disp); font-size:15px; font-weight:540; color:#fff; line-height:1.15; }
.dsc-m .pct{ font-size:.7em; color:rgba(243,240,233,.5); margin-left:1px; }
.dsc-tier{ font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:rgba(243,240,233,.42); margin-left:7px; }
.dsc-meta{ display:block; font-family:var(--mono); font-size:10px; color:rgba(243,240,233,.55); margin-top:3px; white-space:nowrap; }
.discover + .art-cap{ margin-top:14px; }

@media (prefers-reduced-motion: reduce){
  .dsc-caret{ animation:none; }
  .dsc-line{ opacity:1; transform:none; }
}
@media (max-width: 640px){
  /* on mobile the panel can grow (page scrolls); swap log ⇄ result by display */
  .dsc-work{ min-height:0; }
  .dsc-result{ position:static; opacity:1; display:none; }
  .discover.composed .dsc-result{ display:block; }
  .discover.composed .dsc-log{ display:none; }
  .dsc-grid{ grid-template-columns:1fr; gap:12px; }
  .dsc-prompt{ font-size:12.5px; }
}