/* ————————————————————————————————————————————————
   Finding Future Perfect · Mission 2071
   Tokens taken from the MOTF design system (motf-design-system.vercel.app):
   F2 grey canvas · white panels at 32px · black ink · pill buttons
   4px spacing grid · radii 8/24/32/pill · 300ms motion
   Type: MOTF's licensed faces, Obibok for titles and Untitled Sans for text
   ———————————————————————————————————————————————— */

:root{
  /* core palette */
  --canvas:#F2F2F2;           /* the page */
  --panel:#FFFFFF;            /* content panels */
  --card-bg:#FAFAFA;
  --ink:#000000;
  --grey-30:#262626;          /* dark hover */
  --grey-57:#6E6E6E;          /* secondary text, 4.55:1 on canvas */
  --grey-42:#949494;
  --grey-15:#D9D9D9;          /* field borders */
  --grey-10:#E6E6E6;          /* hairlines */

  /* aliases kept so existing rules resolve */
  --paper:#FFFFFF;
  --ink-55:var(--grey-57);
  --ink-35:var(--grey-42);
  --fill:#F2F2F2;
  --fill-hi:var(--grey-10);
  --line:var(--grey-10);

  /* radii */
  --r-sm:8px;                 /* small controls */
  --r-field:12px;
  --card:24px;                /* cards */
  --card-lg:32px;             /* panels */
  --pill:999px;

  /* 4px spacing grid */
  --s-1:4px;  --s-2:8px;  --s-4:16px; --s-8:32px;
  --s-10:40px; --s-20:80px; --s-30:120px; --s-40:160px;

  /* motion */
  --dur:300ms; --dur-hover:150ms;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-fade:cubic-bezier(0,0,.58,1);
  --ease-transform:cubic-bezier(.22,1,.36,1);

  /* MOTF design system (motf-design-system-one.vercel.app): brand blues for actions and grounds, never solid black */
  --cobalt-900:#142CA3; --cobalt-700:#3E47D4; --cobalt-500:#686DF5; --lavender-200:#BAB7FD;
  --violet-700:#6704A3; --plum-800:#380B64; --midnight-900:#0C0840;
  --cv-purple:#1A0B55;                                   /* night: the foot of the last wheel card's zoom = the top of Section 4 */
  --accent:var(--cobalt-700); --accent-hover:var(--cobalt-900);
  --gradient-cobalt:linear-gradient(120deg, #8F80FD 0%, #686DF5 30%, #3E47D4 65%, #142CA3 100%);
  --gradient-mist:linear-gradient(160deg, #FFFFFF 0%, #F6E3F4 35%, #BAB7FD 70%, #686DF5 100%);
  --gradient-night:linear-gradient(180deg, #0C0840 0%, #1A0B55 38%, #380B64 72%, #6704A3 100%);

  --font:'Untitled Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;          /* MOTF body face */
  --font-title:'Obibok', 'Untitled Sans', Arial, sans-serif;                        /* MOTF title face */

  --page:40px;                /* xl outer gutter */
  --gap:clamp(18px, 3vh, 26px);
  color-scheme:light;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;
  padding:var(--page);
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px; line-height:1.5; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:var(--font);}
/* titles: Obibok (museumofthefuture.ae: --title for headings, --body for everything else) */
.hero-head, .reveal-head, .card-head, .cta-head, .finale-head, .sec-head, .role-head, .role-statement, .role-panel-line,
.skill-t, .sc-n, .sc-title, .sc-day, .strip-head, .display, .ftr-head{font-family:var(--font-title);}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* buttons take a soft halo; fields just deepen their own border (their spec) */
:is(button, a):focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(0,0,0,.12);
}
input:focus-visible{outline:none;}
[tabindex="-1"]:focus{outline:none;}

/* ————— Shell — white panel on the grey canvas ————— */
.shell{
  min-height:calc(100dvh - var(--page) * 2);
  min-height:calc(100vh - var(--page) * 2);
  display:flex; flex-direction:column;
  background:var(--panel);
  border-radius:var(--card-lg);
  padding:0 var(--s-10);
  max-width:1600px; margin-inline:auto;
}
.shell > *{width:100%; max-width:1200px; margin-inline:auto;}

/* top bar — their header sits 110px tall; inside the panel that reads as 32px in */
.bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-block:var(--s-8) 0;
  min-height:78px;
}
.brand{display:block; line-height:0; border-radius:var(--r-sm);}
.brand img{height:48px; width:auto; display:block;}
.progress{display:flex; align-items:center; gap:14px; font-size:14px; font-weight:500; color:var(--ink-55);}
.progress-label{font-variant-numeric:tabular-nums; white-space:nowrap;}
.progress-bar{display:flex; gap:4px;}
.progress-bar i{width:28px; height:4px; border-radius:var(--pill); background:var(--grey-10); transition:background var(--dur) var(--ease);}
.progress-bar i.on{background:var(--accent);}


/* ————— Stage ————— */
.stage{
  display:flex; flex-direction:column; justify-content:center; gap:var(--s-8);
  min-height:calc(100svh - var(--page) - 118px);   /* header ≈118px; footer starts below the fold */
  padding-block:var(--s-10) var(--s-20);
}
.state{display:flex; flex-direction:column; gap:var(--gap);}

/* statement screens sit centred; record screens run two-up */
:is(#s-locked, #s-wait){align-items:center; text-align:center;}
:is(#s-locked, #s-wait) :is(.lede, .b4-lead, .b4-ask){margin-inline:auto;}

/* ————— Type ————— */
.ghost{
  margin:0 0 calc(var(--gap) * -.55);
  font-size:clamp(16px, 1.8vw, 19px); font-weight:400; line-height:1.35;
  color:var(--ink-35);
}
h1{
  margin:0; text-wrap:balance;
  font-size:clamp(34px, 4vw, 56px); font-weight:500; line-height:1.06; letter-spacing:-.035em;
}
h2{
  margin:0; text-wrap:balance;
  font-size:clamp(24px, 3.2vw, 34px); font-weight:500; line-height:1.18; letter-spacing:-.022em;
}
.eyebrow{margin:0; font-size:14px; font-weight:500; color:var(--ink-55);}
.lede{margin:0; max-width:52ch; font-size:17px; line-height:1.55; color:var(--ink-55);}
.lede.small{font-size:15px;}

/* ————— Locked: notify ————— */
.notify{display:flex; gap:8px; width:100%; max-width:460px; margin-inline:auto;}
.notify input{
  flex:1; min-width:0;
  background:var(--panel); border:1px solid var(--grey-15); border-radius:var(--pill);
  color:var(--ink); padding:15px 22px; font-size:15px; font-family:inherit;
  transition:border-color var(--dur-hover) var(--ease);
}
.notify input::placeholder{color:var(--grey-42);}
.notify input:focus{border-color:var(--grey-42); outline:none;}
.notify button{
  background:var(--accent); color:#fff; border:0; border-radius:var(--pill);
  font-family:inherit; font-size:14px; font-weight:500;
  padding:14px 28px; cursor:pointer; white-space:nowrap;
  transition:background var(--dur-hover) var(--ease);
}
.notify button:hover{background:var(--grey-30);}
.notify-ok{margin:0; font-size:15px; color:var(--ink-55);}


/* ————— Image reel — edge-to-edge inside the panel, loops forever ————— */
.reel{
  align-self:stretch;
  margin-top:var(--s-4);
  margin-inline:calc(var(--s-10) * -1);      /* bleed to the panel edges */
  width:calc(100% + var(--s-10) * 2);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.reel-track{
  --reel-gap:12px;
  --reel-w:240px;              /* integer width keeps the wrap exact */
  --reel-n:4;                  /* images per set */
  display:flex; gap:var(--reel-gap); width:max-content;
  animation:reel 46s linear infinite;
  will-change:transform;
  backface-visibility:hidden;
}
.reel img{
  width:var(--reel-w); height:auto; aspect-ratio:4/3;  /* size known before load — no reflow mid-loop */
  flex:none; display:block;
  border-radius:var(--card); object-fit:cover;
  background:var(--canvas);
}
/* Travel exactly one set: n images plus the gap that follows each.
   Pixel maths, not a percentage — percentages drift on subpixel widths and the
   loop then jumps a pixel or two every cycle. */
@keyframes reel{
  to{ transform:translateX(calc((var(--reel-w) + var(--reel-gap)) * var(--reel-n) * -1)); }
}
.reel:hover .reel-track{animation-play-state:paused;}

@media (max-width:880px){
  .reel{ margin-inline:calc(var(--s-8) * -1); width:calc(100% + var(--s-8) * 2); }
  .reel-track{--reel-w:200px;}
}
@media (max-width:560px){
  .reel{ margin-inline:-20px; width:calc(100% + 40px); }
  .reel img{border-radius:16px;}
  .reel-track{--reel-w:168px; --reel-gap:10px; animation-duration:34s;}
}
@media (prefers-reduced-motion: reduce){
  .reel-track{animation:none;}
  .reel{overflow-x:auto;}
}


/* ————— Countdown to the pods opening ————— */
.countdown{
  /* needs a real width: the parent centres its children, so without this the
     flex:1 cells on mobile collapse to their minimum */
  width:100%; max-width:424px; margin-inline:auto;
  display:flex; gap:8px; justify-content:center;
  margin-top:calc(var(--gap) * -.25);
}
.cd-cell{
  /* fixed square so the four cells match — otherwise each sizes to its label
     and "Seconds" comes out wider than "Days" */
  width:92px; height:92px; flex:none;
  background:var(--canvas); border-radius:var(--card);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.cd-num{
  font-size:30px; font-weight:500; line-height:1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.cd-lab{font-size:13px; line-height:1; color:var(--grey-57);}
@media (max-width:560px){
  .countdown{gap:6px;}
  .cd-cell{width:auto; height:78px; flex:1 1 0; min-width:0;}
  .cd-num{font-size:24px;}
  .cd-lab{font-size:12px;}
}

/* ————— Ready: their pill chip row ————— */
.brief{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
}
.brief li{
  background:var(--canvas); color:var(--grey-57);
  font-size:14px; font-weight:500; line-height:1;
  padding:11px 17px; border-radius:var(--pill);
}

/* ————— Viewfinder: their media card ————— */
.state-record{gap:calc(var(--gap) * .9);}
.q-col{display:flex; flex-direction:column; gap:14px;}
.view{
  position:relative; width:100%; aspect-ratio:4/3;
  background:var(--midnight-900);
  border-radius:var(--card); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.view video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scaleX(-1); display:none;
}
.view.has-cam video{display:block;}
.corner{position:absolute; width:22px; height:22px; border:2px solid rgba(255,255,255,.35); z-index:2;}
.corner.tl{top:18px; inset-inline-start:18px; border-inline-end:0; border-bottom:0;}
.corner.br{bottom:18px; inset-inline-end:18px; border-inline-start:0; border-top:0;}
.view-idle,.view-live{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.hint{font-size:15px; color:rgba(255,255,255,.65);}
.clock{font-variant-numeric:tabular-nums; font-size:clamp(46px,9vw,68px); font-weight:500; letter-spacing:-.02em; color:#fff;}
.view.low .clock{animation:pulse 1s steps(2,end) infinite;}
.recline{
  display:flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.14); border-radius:var(--pill); padding:8px 16px;
  font-size:14px; font-weight:500; color:#fff;
}
.dot{width:8px; height:8px; border-radius:50%; background:#fff; animation:pulse 1.1s steps(2,end) infinite;}
@keyframes pulse{50%{opacity:.25}}

.fuse{
  position:absolute; bottom:0; inset-inline-start:0; z-index:3;
  height:3px; width:100%; background:#fff;
  transform-origin:0 50%; transform:scaleX(0);
}
.view.armed .fuse{transform:scaleX(1);}
.view.running .fuse{transition:transform 45s linear; transform:scaleX(0);}
.view.low .fuse{height:5px;}

/* ————— B3 · First question ————— */
.b3 .q-col{gap:var(--gap);}
.b3 .question{
  font-size:clamp(30px, 3.5vw, 48px); line-height:1.1; letter-spacing:-.03em; max-width:22ch;
}
.b3 .q-col .lede.large{max-width:36ch;}
.q-note{
  margin:calc(var(--gap) * -.35) 0 0; max-width:36ch;
  font-size:clamp(19px, 1.9vw, 24px); font-weight:400; line-height:1.35; letter-spacing:-.01em;
  color:var(--ink);
}
.b3 .v-col{display:flex; flex-direction:column; gap:var(--s-4);}
.b3 .view.has-cam .view-idle{display:none;}          /* the live picture is the message */
.rec-status{
  margin:0; display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:14px; font-weight:500; color:var(--ink);
}
.rec-status::before{content:''; width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none;}
.rec-status[data-s="off"]{color:var(--ink-55); font-weight:400;}
.rec-status[data-s="off"]::before{background:none; border:1.5px solid var(--grey-42);}
.q-col .actions .fineprint{color:var(--ink-55);}

/* ————— B4 · Surprise + second question ————— */
.b4-wait{
  font-size:clamp(72px, 11vw, 150px); font-weight:500; line-height:.95; letter-spacing:-.045em;
  text-transform:uppercase;
}
.b3 .b4-lead{margin-bottom:calc(var(--gap) * -.5);}
.b4-lead{margin:0; max-width:36ch; font-size:clamp(17px, 1.6vw, 20px); line-height:1.4; color:var(--ink-55);}
.b4-ask{
  max-width:24ch;
  font-size:clamp(28px, 3.2vw, 42px); font-weight:400; line-height:1.15; letter-spacing:-.025em;
  color:var(--ink);
}
/* the surprise lands: WAIT. first, then the new brief */
#s-wait:not([hidden]) .b4-wait{animation:b4-in 520ms var(--ease-transform) both;}
#s-wait:not([hidden]) :is(.b4-lead, .b4-ask){animation:b4-up 420ms var(--ease-transform) 380ms both;}
@keyframes b4-in{from{opacity:0; transform:scale(1.08);}}
@keyframes b4-up{from{opacity:0; transform:translateY(10px);}}
@media (prefers-reduced-motion: reduce){
  #s-wait :is(.b4-wait, .b4-lead, .b4-ask){animation:none !important;}
}

/* ————— Form ————— */
#form{display:flex; flex-direction:column; width:100%;}
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:14px;}
.field label{font-size:14px; font-weight:500; color:var(--ink);}
.field input{
  background:var(--panel); border:1px solid var(--grey-15); border-radius:var(--r-field);
  color:var(--ink); padding:15px 18px; font-size:16px; font-family:inherit;
  transition:border-color var(--dur-hover) var(--ease);
}
.field input:focus{border-color:var(--grey-42); outline:none;}
.field input.invalid{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink);}

/* ————— HOME · opening portrait → persona wheel —————
   Fully scroll-driven (no scroll lock, no timers): one portrait layer closes onto its outline, then shrinks into the
   first card of the wheel. Geometry and per-frame values come from app.js (measure / layout / paint). */
body[data-state="ready"]{padding:0;}
body[data-state="ready"] .shell{border-radius:0; max-width:none; padding:0;}
body[data-state="ready"] .shell > :is(.bar, .stage){max-width:none;}
body[data-state="ready"] .bar{position:absolute; inset:0 0 auto; z-index:8; padding:var(--s-8) var(--s-10); min-height:0;}
body[data-state="ready"] .brand img{filter:brightness(0) invert(1); transition:filter .6s cubic-bezier(.35,0,0,1);}
body[data-state="ready"]:has(.scene:not(.is-sky)) .brand img{filter:none;}
/* "Apply now" in the hero's top bar (landing only) */
.nav-apply{display:none;}
body[data-state="ready"] .nav-apply{display:block; flex:none; height:52px; padding:0 26px; font-size:17px;}
/* menu buttons are white; over a light backdrop the pill flips them to midnight (.is-light, set from app.js) */
body[data-state="ready"] :is(.nav-apply, .navpill-apply){background:#fff; color:var(--midnight-900);}
body[data-state="ready"] :is(.nav-apply, .navpill-apply):is(:hover, :focus-visible){background:#E9E8F5;}

/* compact sticky menu: a liquid-glass pill that slides down when the visitor scrolls back up and away while they scroll
   down, so it never sits over the scroll-driven scenes. Only transform/opacity move. */
.navpill{display:none;}
body[data-state="ready"] .navpill{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  position:fixed; top:12px; left:50%; z-index:60; width:min(720px, calc(100% - 24px));
  padding:8px 8px 8px 24px; border-radius:var(--pill);
  background:linear-gradient(135deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 45%, rgba(255,255,255,.10) 100%);
  backdrop-filter:blur(14px) saturate(1.9) brightness(1.06); -webkit-backdrop-filter:blur(14px) saturate(1.9) brightness(1.06);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),          /* top rim catching the light */
    inset 0 -1px 0 rgba(255,255,255,.12),         /* lower rim */
    inset 0 0 18px rgba(255,255,255,.08),         /* glow inside the glass */
    0 12px 32px -14px rgba(0,0,0,.35);
  transform:translate(-50%, calc(-100% - 24px)); opacity:0; visibility:hidden;
  transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .3s ease, visibility 0s linear .5s,
    background-color .4s ease, border-color .4s ease;
}
body[data-state="ready"] .navpill.is-shown{transform:translate(-50%, 0); opacity:1; visibility:visible;
  transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .3s ease, visibility 0s, background-color .4s ease, border-color .4s ease;}
/* over white sections: a touch of frost so the glass still reads, dark logo, midnight button */
body[data-state="ready"] .navpill.is-light{background-color:rgba(255,255,255,.35); border-color:rgba(12,8,64,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 18px rgba(255,255,255,.25), 0 12px 32px -14px rgba(12,8,64,.28);}
.tone-probe body *{pointer-events:auto !important;}
.navpill-logo{display:block; line-height:0; border-radius:var(--r-sm);}
.navpill-logo img{height:34px; width:auto; filter:brightness(0) invert(1); transition:filter .4s ease;}
.navpill.is-light .navpill-logo img{filter:none;}
.navpill-apply{flex:none; height:44px; padding:0 22px; font-size:16px; transition:background-color .4s ease, color .4s ease;}
body[data-state="ready"] .navpill.is-light .navpill-apply{background:var(--midnight-900); color:#fff;}
body[data-state="ready"] .navpill.is-light .navpill-apply:is(:hover, :focus-visible){background:var(--cobalt-900);}
body[data-state="ready"] .stage{padding:0; min-height:0; display:block;}
body[data-state="ready"] .ftr{width:calc(100% - var(--s-10) * 2); max-width:1520px; margin:0 auto var(--s-10);}

.state.home{display:block; max-width:none; width:100%; margin:0;}
.scene{
  --ink:#1f1f1f;
  position:relative; height:600vh;                  /* set exactly by JS: transition + settle + wheel + black card */
  background:#fff;
}
.scene-pin{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; touch-action:pan-y pinch-zoom;}   /* sideways swipes turn the wheel (app.js wheelSwipe) */

/* landing intro: the page paints with only the sky (the veil, a copy of it over the whole scene); intro() fades the veil
   off in one piece once the photo has decoded, then the copy rises */
.intro-veil{position:absolute; inset:0; z-index:5; background:url(assets/img/sky.webp) 0 0 / 100% 100% no-repeat; pointer-events:none;}
html.intro .hero-copy > *{opacity:0;}

/* ——— the opening: one full-bleed group photo. On scroll, paint() closes it onto a square around the three faces, carries
   that square into card 1's slot on the wheel and dissolves it into the card ——— */
.hero-shot{
  position:absolute; inset:0; z-index:3;
  background:url(assets/img/sky.webp) 0 0 / 100% 100% no-repeat;
  transform-origin:0 0; will-change:transform, clip-path, opacity;
}
.hero-photo{position:absolute; inset:0;}
.hero-photo img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 50%; transform-origin:0 0;}
/* a soft midnight wash in the open sky behind the copy, so white type holds on the pale lilac */
.hero-shot::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:var(--scrim, 1);
  background:radial-gradient(ellipse 34% 46% at 50% 50%, rgba(23,22,74,.30), rgba(23,22,74,0) 100%);}
.scene:not(.is-hero) .hero-shot{visibility:hidden;}
/* card 1's chrome on the travelling photo: laid out at card size, placed on the photo's square by app.js */
.hero-chrome{position:absolute; left:0; top:0; transform-origin:0 0; opacity:0; pointer-events:none;
  display:flex; flex-direction:column; justify-content:space-between; --pad:calc(var(--card-h) * .0495); will-change:opacity, transform;}

/* the copy sits centred in the open sky between the three of them, the moon just above the button */
.hero-copy{
  position:absolute; z-index:6; left:0; right:0; top:50%;
  margin-inline:auto; padding:0 var(--s-4); max-width:640px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  color:#fff; will-change:transform, opacity;
  text-shadow:0 1px 24px rgba(23,22,74,.25);
}
/* eyebrow → headline → one line → action, on a 4px rhythm (20 / 24 / 36) */
.hero-eyebrow{margin:0 0 20px; font-size:17px; font-weight:500; letter-spacing:0; opacity:.92;}
.hero-head{
  margin:0;
  font-size:clamp(44px, 5.2vw, 84px); font-weight:500; line-height:1; letter-spacing:.005em; text-wrap:balance;
}
.hero-sub{margin:24px auto 0; max-width:34ch; font-size:19px; line-height:1.45; opacity:.92;}
.hero-kicker{display:block; margin-top:14px; font-weight:600;}
.hero-kicker:first-child{margin-top:0;}
/* the headline's lines rise out of their own masks on load (app.js intro) */
.hl{display:block; overflow:hidden; padding-bottom:.12em; margin-bottom:-.12em;}
.hl-i{display:block; will-change:transform;}
.hero-scroll{
  margin-top:56px; text-shadow:none;
  display:inline-flex; align-items:center; gap:10px;
  height:52px; padding:0 24px; border-radius:var(--pill);
  background:#fff; color:var(--midnight-900);
  font-size:16px; font-weight:500; letter-spacing:-.005em; text-decoration:none; white-space:nowrap;
  transition:background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
.hero-scroll:hover{background:var(--midnight-900); color:#fff;}

/* ——— the wheel screen ——— */
.screen2{position:absolute; inset:0; z-index:2; pointer-events:none;}
.screen2 > *{pointer-events:auto;}
.reveal-copy{
  position:absolute; left:0; right:0; bottom:var(--title-bottom, 60vh); z-index:3;
  padding-inline:var(--s-4); text-align:center; color:var(--ink); will-change:transform, opacity;
}
.reveal-head{font-size:clamp(40px, 4vw, 64px); font-weight:500; line-height:1; letter-spacing:.005em;}
.reveal-sub{margin:16px auto 0; max-width:44ch; font-size:18px; line-height:1.45; color:#5E5E5E;}

/* the wheel, drawn at card size (after hugeinc.com's radial-cards-marquee) */
.deck-wrap{position:absolute; z-index:2; --enter:1; --settle:1;}
.deck{position:absolute; inset:0;}
.deck:focus-visible{outline:none;}
.deck-track{list-style:none; margin:0; padding:0; position:absolute; inset:0; will-change:transform;}
.card{position:absolute; inset:0; cursor:pointer; will-change:transform, opacity;}   /* own layer: fades never repaint the wheel */
.card.is-active{cursor:default;}
/* hugeinc.com card, measured: 485px square (315px on phones), 16px radius, flex column — a mark top-left (24px in),
   the statement bottom-left (24px in): 43px semibold, line-height .9, tracking −.04em, warm white #f7f4ee.
   Everything is set in card-relative units (--card-h) so it holds at every card size. */
.card-inner{position:absolute; inset:0; overflow:hidden; background:var(--lavender-200); border-radius:var(--rad, 16px);
  display:flex; flex-direction:column; justify-content:space-between; --pad:calc(var(--card-h) * .0495);}
/* during the opening the cards ease in as the photo fades: card 1 rises in place, its neighbours slide in from the side */
.card:not([data-k="0"]) .card-inner{opacity:var(--enter); transform:translateX(calc((1 - var(--enter)) * var(--side, 1) * 18%));}
/* card 1 waits under the travelling photo and only shows once it has landed on it */
.scene.is-hero:not(.is-landed) .card[data-k="0"]{visibility:hidden !important;}   /* !important: drawWheel writes an inline visibility */

.card-media{position:absolute; inset:0; background:url(assets/img/sky.webp) center / cover no-repeat;}
.card-photo{position:absolute; inset:0; display:block; object-fit:cover;}
.card-photo{width:100%; height:100%;}
/* the one simple overlay: a midnight wash rising from the foot, just enough for the warm-white statement */
.card-shade{position:absolute; inset:38% 0 0; pointer-events:none;
  background:linear-gradient(to top, rgba(12,8,64,.62) 0%, rgba(12,8,64,.28) 45%, rgba(12,8,64,0) 100%);}
.card-top{position:relative; padding:var(--pad); display:flex; align-items:flex-start;}
.card-mark{display:block; width:calc(var(--card-h) * .11); height:auto;}
.card-body{position:relative; padding:0 var(--pad) var(--pad); color:#f7f4ee;}
/* the wheel cards and the travelling photo's chrome share the card statement style */
:is(.card, .hero-chrome) .card-head{
  margin:0; font-family:var(--font); font-weight:500; font-size:calc(var(--card-h) * .0892);
  line-height:.9; letter-spacing:-.04em; text-wrap:pretty;
}

/* ——— shared reveals ——— */
[data-reveal]{opacity:0; transform:translateY(40px); transition:opacity .9s cubic-bezier(.35,0,0,1), transform 1.1s cubic-bezier(.35,0,0,1);}
[data-reveal].is-in{opacity:1; transform:none;}
.ln{display:block; padding-bottom:.24em; margin-bottom:-.24em;
  /* the line mask only needs to hide the line BELOW it (it slides up into view): clip top and bottom, never the sides,
     so wide glyphs and overhangs ("?", "j", tracking) are never cut */
  clip-path:inset(-.25em -100vw 0 -100vw);}
.ln-i{display:block; transform:translateY(140%); transition:transform 1.1s cubic-bezier(.35,0,0,1) calc(var(--i) * 90ms);}
.is-in > .ln > .ln-i{transform:none;}

/* ——— shared section type: one display size, one rhythm (after hugeinc.com: display-l, tracking −.05em) ——— */
.sec-head, .role-head{margin:0; font-size:clamp(56px, 9vw, 146px); font-weight:400; line-height:.9; letter-spacing:-.05em;}
.pill-light, .pill-dark{
  height:56px; padding:0 30px; border:0; border-radius:var(--pill); cursor:pointer;
  font-family:inherit; font-size:16px; font-weight:500; letter-spacing:-.005em;
  transition:background .35s cubic-bezier(.35,0,0,1), transform .35s cubic-bezier(.35,0,0,1);
}
.pill-light{background:#fff; color:#000;}
.pill-light:hover{background:#e9e9e9;}
.pill-dark{background:var(--accent); color:#fff;}
.pill-dark:hover{background:var(--accent-hover);}
.pill-light:active, .pill-dark:active{transform:scale(.97);}

/* ——— Section 4 · Make this your job (black) ——— */
.role{
  --sheet-r:clamp(28px, 3.6vw, 56px);
  position:relative; z-index:5; color:#fff; padding:16vh 0 0;
  /* it opens in the purple card's colour, so the zoomed card hands over without a seam, then runs into the night */
  background:var(--gradient-night);   /* opens in midnight, the colour the bridge ends on */
  margin-top:calc(-1 * var(--rise, 100vh));          /* rides up over the pinned wheel while its last cards turn away */
}
.role-intro{
  padding:0 max(40px, 6vw);
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); column-gap:6vw; align-items:end;
}
.role-statement{
  margin:0; padding-bottom:.35em; max-width:17em;
  font-size:clamp(28px, 2.9vw, 48px); font-weight:400; line-height:1.12; letter-spacing:-.03em;
}
[data-words] .w{color:rgba(255,255,255,.2); transition:color .35s linear;}
[data-words] .w.on{color:#fff;}


/* the photo panel: rounded card → full bleed (clip-path driven by scroll), image drifts inside (parallax) */
.role-panel{position:relative; margin-top:16vh; height:100vh; height:100svh;}
.role-media{
  position:absolute; inset:0; margin:0; overflow:hidden;
  clip-path:inset(var(--ci-y, 12vh) var(--ci-x, 12vw) round var(--ci-r, 20px));
  will-change:clip-path;
}
.role-media img{position:absolute; left:0; top:-10%; width:100%; height:120%; object-fit:cover; transform:translate3d(0, var(--py, 0px), 0) scale(var(--ps, 1.12)); will-change:transform;}
.role-media::after{content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.74) 0%, rgba(0,0,0,.5) 28%, rgba(0,0,0,.12) 50%, rgba(0,0,0,0) 62%);}
.role-panel-line{
  position:absolute; left:0; right:0; bottom:12vh; z-index:1; margin:0; padding:0 24px; text-align:center;
  font-size:clamp(30px, 3.6vw, 52px); font-weight:500; line-height:1.05; letter-spacing:-.025em; text-wrap:balance;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}

.role-skills-wrap{padding:14vh max(40px, 6vw) 18vh;}
.role-skills{list-style:none; margin:0; padding:0;}
.role-skills li{
  display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr); column-gap:6vw; align-items:baseline;
  padding:clamp(20px, 3.4vh, 40px) 0;
}
.skill-t{
  margin:0; font-size:clamp(52px, 7.6vw, 128px); font-weight:400; line-height:.95; letter-spacing:-.05em;
  color:rgba(255,255,255,.16); transition:color .6s cubic-bezier(.35,0,0,1);
}
.skill-d{
  margin:0; max-width:24ch; font-size:clamp(18px, 1.5vw, 24px); line-height:1.35; letter-spacing:-.01em;
  color:#fff; opacity:.18; transform:translateY(10px);
  transition:opacity .6s cubic-bezier(.35,0,0,1), transform .8s cubic-bezier(.35,0,0,1);
}
.role-skills li.is-on .skill-t{color:#fff;}
.role-skills li.is-on .skill-d{opacity:.72; transform:none;}
/* the role, from the job description: an eyebrow over the headline, a label over the four tasks, the principle line,
   then the facts a job seeker scans for (where, contract, start, languages) just above the call to action */
.role-eyebrow, .role-label{margin:0 0 20px; font-size:15px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.62);}
.role-label{margin-bottom:8px;}
/* What you'll do (after hugeinc.com/careers' cards-stack, measured at 1440×900): the headline is pinned mid-screen;
   each card is a sticky item that rises from below and, as it arrives, slides sideways into a fan of four
   (0.65 card-widths apart, tilted ±1–2°). The fan holds, then leaves with the list. Every item keeps the same bottom
   margin, or the ones with a margin would let go of their sticky spot earlier than the last. app.js writes each
   card's transform, --lift and --dim. */
.role-stack{position:relative; --cw:min(26vw, 400px, 62vh * .725); --ch:calc(var(--cw) / .725);}
.fan-head{
  position:sticky; top:50%; transform:translateY(-50%); margin:0 0 30vh; text-align:center;
  font-family:var(--font-title); font-size:clamp(56px, 9vw, 150px); font-weight:500; line-height:.95; letter-spacing:0;
}
.fan-list{list-style:none; margin:0; padding:0; position:relative; z-index:1;}
.fan-list::after{content:''; display:block; height:55vh;}   /* the hold: sticky items are bound by the content box, so padding wouldn't do */
.fan-item{position:sticky; top:calc(50vh - var(--ch) / 2); height:var(--ch); margin:0 0 calc(var(--ch) * .18);}
.fan-card{
  position:absolute; left:50%; top:0; width:var(--cw); height:var(--ch); margin-left:calc(var(--cw) / -2);
  display:flex; flex-direction:column; justify-content:space-between; box-sizing:border-box;
  padding:calc(var(--cw) * .085); border-radius:20px; overflow:hidden; container-type:inline-size;
  will-change:transform; backface-visibility:hidden;
  box-shadow:0 30px 60px -30px rgba(10,6,40,.55), 0 calc(var(--lift, 0) * 50px) calc(var(--lift, 0) * 90px) calc(var(--lift, 0) * -20px) rgba(10,6,40,.5);
}
/* cards underneath dim a touch as each new one lands on top (app.js writes --dim) */
.fan-card::after{content:''; position:absolute; inset:0; border-radius:inherit; background:#0d0a33; opacity:var(--dim, 0); pointer-events:none;}
.fan-card.is-cream{background:#f7f4ee; color:var(--midnight-900);}
.fan-card.is-sky{background:linear-gradient(to top, rgba(23,22,74,.55), rgba(23,22,74,0) 55%), url(assets/img/sky.webp) center / cover no-repeat; color:#fff;}
.fan-t{margin:0; font-family:var(--font-title); font-size:18cqw; font-weight:700; line-height:.95; letter-spacing:0;}
.fan-d{margin:0; font-size:clamp(16px, 6.2cqw, 22px); line-height:1.3; font-weight:500;}

.role-principle{margin:12vh 0 0; font-family:var(--font-title); font-size:clamp(28px, 3vw, 48px); font-weight:400; line-height:1.1; letter-spacing:.005em;}
.role-facts{margin:8vh 0 0; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); border-top:1px solid rgba(255,255,255,.2);}
.role-facts > div{padding:20px 24px 0 0;}
.role-facts dt{margin:0 0 8px; font-size:14px; color:rgba(255,255,255,.55);}
.role-facts dd{margin:0; font-size:19px; line-height:1.35;}
/* the four hats, as one editorial line in the section's statement voice: the roles in white, the rest dimmed */
.role-hats{margin:10vh 0 0; max-width:20em; font-family:var(--font-title); font-size:clamp(28px, 3vw, 48px); font-weight:400; line-height:1.15; letter-spacing:.005em; color:rgba(255,255,255,.42); text-wrap:pretty;}
.role-hats b{font-weight:inherit; color:#fff;}
.role-facts-note{margin:28px 0 0; font-size:15px; color:rgba(255,255,255,.55);}
.role-cta-row{margin-top:8vh; display:flex; align-items:center; gap:28px; flex-wrap:wrap;}
.role-cta-note{margin:0; font-size:17px; color:rgba(255,255,255,.62);}

/* ——— Section 5 · How to get the job — hugeinc.com "projects-stack" (sticky cards, 20px stagger, covered cards dim) ——— */
.steps{
  --dock:96px; --stagger:20px;
  --card-h:clamp(28rem, calc(100svh - var(--dock) - 2 * var(--stagger) - 40px), 46rem);
  background:#fff; color:#1f1f1f; padding:18vh max(24px, 3vw) 16vh;
}
.steps-intro{
  max-width:1360px; margin:0 auto 10vh; padding:0 max(16px, 3vw);
  display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap;
}
.steps-count{
  margin:0 0 .6em; display:inline-flex; align-items:center; gap:10px;
  font-size:18px; font-weight:500; letter-spacing:-.01em; color:#1f1f1f;
}
.live-dot{position:relative; width:10px; height:10px; border-radius:50%; background:#2D3AC1; flex:none;}
.live-dot::after{content:''; position:absolute; inset:0; border-radius:50%; background:#2D3AC1; animation:live 1.8s cubic-bezier(.2,0,.2,1) infinite;}
@keyframes live{from{transform:scale(1); opacity:.6;} to{transform:scale(3.2); opacity:0;}}

.stack{list-style:none; margin:0 auto; padding:0; max-width:1360px; display:flex; flex-direction:column; gap:5em;}
.stack-item{position:sticky; top:calc(var(--dock) + var(--i) * var(--stagger));}
.stack-card{
  --fg:#fff; --fg-2:rgba(255,255,255,.72); --line:rgba(255,255,255,.28);
  position:relative; height:var(--card-h); border-radius:20px; overflow:hidden;
  padding:clamp(28px, 4.2vw, 60px);
  display:flex; flex-direction:column; justify-content:space-between;
  background:var(--bg); color:var(--fg);
  transform:scale(var(--stack-scale, 1)); transform-origin:50% 0; will-change:transform;
}
.stack-card::after{content:''; position:absolute; inset:0; border-radius:inherit; background:#fff; opacity:var(--stack-dim, 0); pointer-events:none;}
.stack-card[data-tone="blue"]{--bg:#2D3AC1;}
.stack-card[data-tone="lilac"]{--bg:#9889FE; --fg:#120f3a; --fg-2:rgba(18,15,58,.72); --line:rgba(18,15,58,.25);}
.stack-card[data-tone="ink"]{--bg:#141414;}

.sc-top{display:flex; justify-content:space-between; align-items:center; gap:16px;}
.sc-n{font-size:clamp(40px, 4.4vw, 78px); font-weight:500; line-height:.9; letter-spacing:-.05em;}
.sc-status{
  display:inline-flex; align-items:center; gap:10px; height:40px; padding:0 18px; border-radius:var(--pill);
  border:1px solid var(--line); font-size:15px; font-weight:500; white-space:nowrap;
}
.sc-status:empty{display:none;}
.sc-status .live-dot{background:#fff;} .sc-status .live-dot::after{background:#fff;}
.sc-main{display:flex; justify-content:space-between; align-items:flex-end; gap:32px;}
.sc-copy{max-width:36rem;}
.sc-title{margin:0; font-size:clamp(34px, 4vw, 68px); font-weight:500; line-height:.98; letter-spacing:-.04em; text-wrap:balance;}
.sc-body{margin:22px 0 0; max-width:32ch; font-size:clamp(17px, 1.3vw, 20px); line-height:1.45; color:var(--fg-2);}
.sc-date{margin:0; display:grid; justify-items:end; text-align:right; line-height:.8;}
.sc-pre, .sc-mon{font-size:clamp(18px, 1.5vw, 24px); font-weight:500; letter-spacing:-.01em; line-height:1.2;}
.sc-day{font-size:clamp(120px, 17vw, 260px); font-weight:400; letter-spacing:-.07em; font-variant-numeric:tabular-nums; margin-right:-.04em;}
.sc-progress{
  position:relative; height:2px; margin-top:clamp(24px, 3vw, 40px); background:var(--line); border-radius:2px;
  display:flex; justify-content:space-between;
}
.sc-progress i{position:absolute; left:0; top:0; bottom:0; width:calc(var(--p, 0) * 100%); background:var(--fg); border-radius:2px; transform-origin:0 50%; transform:scaleX(var(--grow, 0)); transition:transform 1.6s cubic-bezier(.35,0,0,1);}
.sc-progress.is-in i{--grow:1;}
.sc-progress span{position:relative; top:14px; font-size:13px; font-weight:500; color:var(--fg-2);}

/* ——— Section 6 · Good questions ——— */
.faq{
  --motf-blue:#142CA3;                                   /* MOTF blue: FAQ hover and open state */
  background:#fff; color:#1f1f1f;
  display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.25fr); gap:6vw; align-items:start;
  padding:18vh max(40px, 6vw);
}
.faq-side{position:sticky; top:16vh;}
.faq .sec-head{font-size:clamp(48px, 6vw, 104px);}
.faq-note{margin:36px 0 0; max-width:24ch; font-size:20px; line-height:1.4; letter-spacing:-.01em; color:#6e6e73;}
.faq-list{position:relative;}
.qa{position:relative;}
.qa::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:#d6d6db;
  transform:scaleX(0); transform-origin:0 50%; transition:transform 1.2s cubic-bezier(.35,0,0,1);
}
.qa.is-in::after{transform:none;}
.qa:first-child::before{content:''; position:absolute; left:0; right:0; top:0; height:1px; background:#d6d6db;}
.qa summary{
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:clamp(24px, 2.4vw, 36px) 0;
}
.qa summary::-webkit-details-marker{display:none;}
.qa summary:focus-visible{outline:2px solid var(--motf-blue); outline-offset:4px; border-radius:4px;}
.qa-q{
  font-size:clamp(22px, 2.1vw, 34px); font-weight:400; line-height:1.15; letter-spacing:-.025em;
  transition:transform .6s cubic-bezier(.35,0,0,1), color .3s ease;
}
.qa summary:hover .qa-q{transform:translateX(10px); color:var(--motf-blue);}
.qa summary:hover .qa-i{color:var(--motf-blue);}
.qa[open]:not(.is-closing) .qa-q{color:var(--motf-blue);}
.qa-i{position:relative; flex:none; width:22px; height:22px; transition:transform .6s cubic-bezier(.35,0,0,1);}
.qa-i::before, .qa-i::after{content:''; position:absolute; left:0; right:0; top:50%; height:1.5px; margin-top:-.75px; background:currentColor; transition:transform .6s cubic-bezier(.35,0,0,1);}
.qa-i::after{transform:rotate(90deg);}
.qa[open]:not(.is-closing) .qa-i{transform:rotate(180deg); color:var(--motf-blue);}
.qa[open]:not(.is-closing) .qa-i::after{transform:rotate(0deg);}
.qa-a{overflow:hidden;}
.qa-body{padding:0 48px clamp(28px, 2.6vw, 40px) 0; max-width:54ch; font-size:clamp(17px, 1.3vw, 20px); line-height:1.5; color:#55555a;}
.qa-body p{margin:0;}
/* audition pods: date · venue · map link */
.pods{list-style:none; margin:20px 0 0; padding:0; border-top:1px solid #d6d6db;}
.pods li{display:grid; grid-template-columns:9.5em minmax(0, 1fr) auto; gap:4px 20px; align-items:baseline; padding:14px 0; border-bottom:1px solid #d6d6db;}
.pod-when{font-weight:500; color:#1f1f1f; white-space:nowrap;}
.pod-where{color:#55555a;}
.pod-map{display:inline-flex; align-items:center; gap:6px; color:#1f1f1f; font-weight:500; font-size:.9em; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; white-space:nowrap; transition:color .25s ease;}
.pod-map:hover, .pod-map:focus-visible{color:var(--motf-blue);}

/* ——— "blocks" (after awesomic.com): each section below the role is a sheet with big rounded top corners that rides
   up over the one before it, so the page reads as stacked cards rather than stripes ——— */
.sheet{--sheet-r:clamp(28px, 3.6vw, 56px); position:relative; border-radius:var(--sheet-r) var(--sheet-r) 0 0; margin-top:calc(-1 * var(--sheet-r));}
.steps.sheet{z-index:6; background:#efeff1;}
.closing.sheet{z-index:7;}
.faq.sheet{z-index:8;}

/* ——— Section 6 · Are you the Future Perfect? (white sheet, museum photo rising from below and dissolving into it) ——— */
.closing{
  background:#fff; color:#1f1f1f; overflow:hidden;
  min-height:clamp(640px, 88vh, 920px); padding:clamp(140px, 24vh, 260px) 24px 0;
  display:flex; flex-direction:column; align-items:center;
}
.cta-inner{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center;}
.cta-title{margin:0; font-size:clamp(32px, 3.3vw, 56px); line-height:1.16;}
/* the phrase that matters carries the weight: Obibok's heavier cut, the rest stays in its regular */
.cta-em{font-weight:700; letter-spacing:0;}
.cta-title .ln-i{white-space:nowrap;}
/* three campaign faces set inside the line (awesomic.com: "a top creative [faces] team"), cropped from the persona
   portraits in CSS: --s = crop size as a share of the photo's width, --cx/--cy = face centre, --a = photo height ÷ width */
.faces{display:inline-flex; vertical-align:-.12em; margin:0 .14em; height:.9em;}
.face{--d:.9em; position:relative; width:var(--d); height:var(--d); border-radius:50%; overflow:hidden; flex:none;
  background:url(assets/img/sky.webp) 30% 40% / 400% auto; box-shadow:0 0 0 .055em #fff, 0 .04em .14em rgba(0,0,0,.18);
  transform:scale(.4); opacity:0; transition:transform .9s cubic-bezier(.34,1.4,.5,1), opacity .5s ease;}
.face + .face{margin-left:-.2em;}
.face img{position:absolute; width:calc(var(--d) / var(--s)); height:auto; max-width:none;
  left:calc(var(--d) / 2 - var(--cx) * var(--d) / var(--s)); top:calc(var(--d) / 2 - var(--cy) * var(--a) * var(--d) / var(--s));}
.is-in .face{transform:none; opacity:1;}
.is-in .f1{transition-delay:.45s;} .is-in .f2{transition-delay:.55s;} .is-in .f3{transition-delay:.65s;}

/* the action: one white capsule holding the deadline and the button (awesomic: email field + "Book a call") */
.cta-capsule{
  margin-top:clamp(40px, 5.5vh, 60px); display:inline-flex; align-items:center; gap:8px; padding:6px;
  background:#fff; border:1px solid #e7e7ea; border-radius:var(--pill);
  box-shadow:0 1px 2px rgba(16,16,24,.04), 0 18px 40px -24px rgba(16,16,24,.28);
}
.cta-close{padding:0 18px 0 24px; font-size:clamp(15px, 1.15vw, 17px); color:#6e6e73; white-space:nowrap;}
.cta-close strong{font-weight:500; color:#1f1f1f;}
.cta-apply{
  position:relative; overflow:hidden; height:54px; padding:0 26px; border:0; border-radius:var(--pill); cursor:pointer;
  background:var(--accent); color:#fff; font-family:inherit; font-size:17px; font-weight:500;
  transition:background-color .4s cubic-bezier(.35,0,0,1), transform .25s cubic-bezier(.35,0,0,1);
}
.cta-roll{display:block; height:1.3em; overflow:hidden; line-height:1.3em;}
.cta-label{display:flex; align-items:center; gap:10px; height:1.3em; transition:transform .55s cubic-bezier(.65,0,.15,1);}
.cta-arrow{display:inline-block; transition:transform .55s cubic-bezier(.65,0,.15,1);}
.cta-apply:hover, .cta-apply:focus-visible{background:#142CA3;}
.cta-apply:hover .cta-label, .cta-apply:focus-visible .cta-label{transform:translateY(-100%);}
.cta-apply:hover .cta-label:last-child .cta-arrow{transform:translateX(3px);}
.cta-apply:active{transform:scale(.96);}
.cta-apply:focus-visible{outline:2px solid #142CA3; outline-offset:3px;}
@media (prefers-reduced-motion: reduce){ .face, .cta-label, .cta-arrow{transition:none;} }

/* the photo: anchored to the foot of the sheet, its top dissolving into the white */
.cta-art{position:absolute; inset:0; pointer-events:none;
  /* the whole sheet is the ceiling: a faint texture behind the words, building to full strength at the foot */
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.14) 0%, rgba(0,0,0,.3) 30%, rgba(0,0,0,.85) 56%, #000 72%);
          mask-image:linear-gradient(to bottom, rgba(0,0,0,.14) 0%, rgba(0,0,0,.3) 30%, rgba(0,0,0,.85) 56%, #000 72%);}
/* the lobby ceiling drifting: an eased boomerang (glides to rest, then back), so the loop never fades or cuts */
.cta-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; display:block; background:#e4e5e6;}



@media (max-width:880px){
  .role{padding-top:96px;}
  .role-intro{padding:0 20px; grid-template-columns:1fr; row-gap:40px;}
  .role-panel{margin-top:72px; height:80svh;}
  .role-skills-wrap{padding:88px 20px 96px;}
  .role-facts{grid-template-columns:1fr 1fr; row-gap:24px;}
  .role-stack{--cw:min(78vw, 340px, 64vh * .725);}
  .fan-head{font-size:clamp(44px, 13vw, 64px); margin-bottom:20vh;}
  .role-facts dd{font-size:17px;}
  .role-skills li{grid-template-columns:1fr; row-gap:12px; padding:22px 0;}
  .skill-t{font-size:clamp(44px, 13vw, 64px);}
  .steps{--dock:76px; --stagger:14px; --card-h:clamp(26rem, calc(100svh - var(--dock) - 2 * var(--stagger) - 24px), 34rem); padding:96px 12px 88px;}
  .steps-intro{padding:0 8px; margin-bottom:56px;}
  .stack{gap:3em;}
  .sc-main{flex-direction:column-reverse; align-items:flex-start; gap:24px;}
  .sc-date{justify-items:start; text-align:left; grid-auto-flow:column; align-items:baseline; gap:10px; line-height:1;}
  .sc-day{font-size:clamp(84px, 25vw, 120px); line-height:.82;}
  .faq{grid-template-columns:1fr; gap:48px; padding:96px 20px;}
  .faq-side{position:relative; top:0;}
  .qa-body{padding-right:0;}
  .pods li{grid-template-columns:1fr auto; }
  .pod-where{grid-column:1 / -1; grid-row:2;}
  .closing{padding:104px 20px 0;}
  .cta-title{font-size:clamp(32px, 9vw, 44px);}
  .cta-title .ln-i{white-space:normal; text-wrap:balance;}
  .cta-capsule{flex-direction:column; align-items:stretch; border-radius:28px; padding:6px; gap:6px; width:min(100%, 360px);}
  .cta-close{padding:12px 16px 6px; text-align:center;}
  .cta-apply{width:100%;}
  .cta-label{justify-content:center;}
  .closing{min-height:600px;}
  body[data-state="ready"] .bar{padding:20px;}
  body[data-state="ready"] .nav-apply, .navpill-apply{width:auto; height:42px; padding:0 18px; font-size:15px;}
  body[data-state="ready"] .navpill{top:8px; width:calc(100% - 16px); padding:6px 6px 6px 18px;}
  .navpill-logo img{height:28px;}
  /* phones: the photo is cropped to her; headline in the sky above, the rest at the foot of the screen, each on a wash */
  .hero-photo img{object-position:27% 50%;}
  .hero-shot::after{background:linear-gradient(180deg, rgba(23,22,74,.38) 0%, rgba(23,22,74,0) 34%, rgba(23,22,74,0) 55%, rgba(23,22,74,.55) 100%);}
  .hero-copy{top:0 !important; padding:96px 20px 28px; height:100%; right:0; max-width:none;}
  .hero-eyebrow{margin-bottom:14px; font-size:15px;}
  .hero-sub{margin-top:auto; font-size:17px;}
  .hero-scroll{margin-top:24px;}
}
/* tall phones: the photo opens turned (app.js), her upside down at the top and the two of them upright below; the
   headline sits in the open sky between the three, on a soft wash, the line and button over their shoulders */
@media (max-width:700px) and (max-aspect-ratio:5/6){
  .hero-copy{padding-top:calc(43svh - 44px);}
  .hero-shot::after{background:
    radial-gradient(ellipse 80% 16% at 50% 43%, rgba(23,22,74,.34), rgba(23,22,74,0) 100%),
    linear-gradient(180deg, rgba(23,22,74,.30) 0%, rgba(23,22,74,0) 18%, rgba(23,22,74,0) 62%, rgba(23,22,74,.6) 100%);}
}
@media (prefers-reduced-motion: reduce){
  .scene *, .scene *::before, .scene *::after{transition-duration:0s !important; transition-delay:0s !important;}
}

/* ————— B1 · Before you begin — intro left, checklist card right ————— */
.kicker{
  margin:0; font-size:14px; font-weight:500; line-height:1.4;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink-55);
}
.display{
  font-size:clamp(56px, 8.4vw, 112px); font-weight:500; line-height:1; letter-spacing:-.045em;
}
.lede.large{font-size:clamp(18px, 1.7vw, 21px); line-height:1.5; max-width:30ch;}
.b1-intro{display:flex; flex-direction:column; gap:var(--gap);}
.b1-card{
  display:flex; flex-direction:column; gap:var(--s-4);
  background:var(--card-bg); border:1px solid var(--grey-10); border-radius:var(--card-lg);
  padding:var(--s-10);
}
.card-title{font-size:20px; line-height:1.3; letter-spacing:-.01em;}
.b1-card .lede{max-width:none;}
.b1-consent{
  display:flex; gap:12px; align-items:flex-start; cursor:pointer;
  margin-top:var(--s-4);
}
.b1-consent input{margin-top:2px; accent-color:var(--ink); width:18px; height:18px; flex:none; cursor:pointer;}
.b1-consent span{font-size:14px; line-height:1.5; color:var(--ink);}
.b1-link{
  align-self:flex-start;
  font-size:14px; font-weight:500; color:var(--ink);
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
  border-radius:var(--r-sm);
  transition:opacity var(--dur-hover) var(--ease);
}
.b1-link:hover{opacity:.6;}
.b1-consent + .b1-link{margin-left:30px; margin-top:calc(var(--s-2) * -1);}   /* aligns under the consent text */
.btn-block{width:100%; margin-top:var(--s-4);}
.b1-alt{align-self:center;}

/* ————— B2 · Camera and microphone check ————— */
.btn.btn-outline{
  background:var(--panel); color:var(--ink); border:1px solid var(--grey-15);
}
.btn.btn-outline:hover{background:var(--panel); border-color:var(--ink);}
.btn.btn-outline[disabled]:hover{border-color:var(--grey-15);}
.b2-media, .b2-side{display:flex; flex-direction:column; gap:var(--s-4);}
.b2-preview{
  position:relative; width:100%; aspect-ratio:4/3;
  background:var(--card-bg); border:1px dashed var(--grey-42); border-radius:var(--card);
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  transition:background var(--dur) var(--ease-fade), border-color var(--dur) var(--ease-fade);
}
.b2-preview.has-cam{background:var(--midnight-900); border-color:transparent; border-style:solid;}
.b2-preview video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none;}
.b2-preview.has-cam video:not([hidden]){display:block;}
#b2-cam{transform:scaleX(-1);}                     /* mirror, like a selfie camera */
#b2-playback{background:var(--midnight-900);}                   /* unmirrored: flipping it would flip the player controls too */
.b2-empty{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:var(--s-4);
  padding:var(--s-8); text-align:center; color:var(--ink-55);
}
.b2-empty p{margin:0; font-size:16px;}
.b2-icon{color:var(--ink);}
.b2-test{
  display:flex; flex-direction:column; gap:var(--s-2);
  border-top:1px solid var(--line); padding-top:var(--s-8); margin-top:var(--s-4);
}
.b2-test .lede{max-width:none; font-size:15px;}
.b2-test-row{display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap; margin-top:var(--s-2);}
.btn.is-rec{font-variant-numeric:tabular-nums; border-color:var(--ink);}
.btn.is-rec::before{
  content:''; display:inline-block; width:8px; height:8px; margin-inline-end:9px; vertical-align:1px;
  border-radius:50%; background:var(--accent); animation:pulse 1.1s steps(2,end) infinite;
}
button.b1-link{background:none; border:0; padding:0; font-family:inherit; cursor:pointer;}

.b2-side .lede.large{max-width:36ch;}
.b2-status{margin:var(--s-4) 0 0;}
.b2-row{
  display:flex; justify-content:space-between; align-items:center; gap:var(--s-4);
  padding-block:var(--s-4); border-bottom:1px solid var(--line);
}
.b2-row dt{font-size:16px; font-weight:500;}
.b2-row dd{
  margin:0; display:flex; align-items:center; gap:8px;
  font-size:15px; color:var(--ink-55); text-align:end;
}
.b2-row dd::before{
  content:''; width:8px; height:8px; border-radius:50%; flex:none;
  border:1.5px solid var(--grey-42);
}
.b2-row dd[data-s="asking"]::before{animation:pulse 1.1s steps(2,end) infinite;}
.b2-row dd:is([data-s="on"],[data-s="heard"]){color:var(--ink);}
.b2-row dd:is([data-s="on"],[data-s="heard"])::before{background:var(--accent); border-color:var(--ink);}
.b2-row dd:is([data-s="blocked"],[data-s="missing"]){color:var(--ink); font-weight:500;}
.b2-row dd:is([data-s="blocked"],[data-s="missing"])::before{border-color:var(--ink); border-radius:2px; transform:rotate(45deg);}
#t-b2-say{margin-top:var(--s-4);}
.b2-meter-note{margin:0; font-size:14px; color:var(--ink-35);}
.b2-meter{display:flex; gap:3px; height:22px; align-items:center;}
.b2-meter i{
  flex:1; height:100%; border-radius:var(--pill); background:var(--grey-10);
  transition:background 80ms linear;
}
.b2-meter i.on{background:var(--accent);}
.b2-links{display:flex; gap:var(--s-8); margin-top:var(--s-2);}

/* below the two-up width the columns dissolve so the heading leads the screen */
@media (max-width:879px){
  .b2-media, .b2-side{display:contents;}
  .b2-side h1{order:1;} .b2-side > .lede.large{order:2;} .b2-preview{order:3;}
  .b2-status{order:4; margin-top:0;} #t-b2-say{order:5; margin-top:0;}
  .b2-meter-note, .b2-meter{order:6;} .b2-test{order:7; margin-top:0;}
  #b2-go{order:8;} .b2-links{order:9;}
}

/* ————— B5 · Details ————— */
.b5-intro{display:flex; flex-direction:column; gap:var(--gap);}
.b5-saved{list-style:none; margin:var(--s-4) 0 0; padding:0; border-top:1px solid var(--line);}
.b5-saved li{
  display:flex; align-items:center; gap:12px;
  padding-block:var(--s-4); border-bottom:1px solid var(--line);
  font-size:16px; font-weight:500;
}
.b5-saved svg{
  flex:none; width:22px; height:22px; padding:3px; border-radius:50%;
  background:var(--accent); color:#fff;
}
.b5 #form{gap:0;}
.field-hint{margin:0; font-size:14px; color:var(--ink-55);}
.field-error{margin:0; font-size:14px; font-weight:500; color:var(--ink);}
.field-error::before{content:'! '; }
.b5-privacy{margin:var(--s-2) 0 var(--s-2);}
.b5 .b1-consent{margin-top:var(--s-2);}
.b1-consent input.invalid{outline:2px solid var(--ink); outline-offset:2px;}
.b5-consent-error{margin:var(--s-2) 0 0 30px;}
.b5 .btn-block{margin-top:var(--s-8);}

/* ————— B6 · Application received ————— */
.b6-intro{display:flex; flex-direction:column; gap:var(--gap);}
.b6-ref{
  display:flex; flex-direction:column; gap:6px;
  border-block:1px solid var(--line); padding-block:var(--s-4) calc(var(--s-4) + 4px); margin-top:var(--s-2);
}
.b6-ref-num{margin:0; font-size:28px; font-weight:500; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.b6-next{display:flex; flex-direction:column; gap:var(--s-2);}
.b6-next .lede{max-width:44ch;}
.b6-dates{margin:var(--s-2) 0 0; display:flex; flex-direction:column; gap:2px; font-size:14px; color:var(--ink-55);}

.b6-file-col{display:flex; flex-direction:column; gap:var(--s-4);}
.b6-file{
  display:flex; flex-direction:column; gap:var(--s-4);
  background:var(--card-bg); border:1px solid var(--grey-10); border-radius:var(--card-lg);
  padding:var(--s-8);
}
.b6-media{
  position:relative; aspect-ratio:16/10; border-radius:var(--card); overflow:hidden;
  background:var(--midnight-900); margin-block:var(--s-2);
}
.b6-media video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--midnight-900);}
.b6-play{
  position:absolute; inset:0; width:100%;
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:none; border:0; color:#fff; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:500;
  transition:background var(--dur-hover) var(--ease);
}
.b6-play:hover:not([disabled]){background:rgba(255,255,255,.06);}
.b6-play[disabled]{cursor:default; color:rgba(255,255,255,.55);}
.b6-play svg{width:44px; height:44px; padding:11px; border-radius:50%; background:rgba(255,255,255,.16);}
.b6-name{margin:0; font-size:clamp(26px, 2.6vw, 34px); font-weight:500; line-height:1.15; letter-spacing:-.025em;}
.b6-file .lede{max-width:none;}
.b6-actions{display:flex; gap:var(--s-2); flex-wrap:wrap;}
.b6-actions .btn{min-width:140px;}
.b6-note{margin:0; min-height:1.5em; font-size:14px; color:var(--ink-55);}

/* ————— Actions: their pill buttons ————— */
.actions{
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.btn{
  border:0; border-radius:var(--pill); cursor:pointer;
  background:var(--accent); color:#fff;
  font-family:var(--font); font-weight:500; font-size:14px; line-height:1;
  padding:14px 28px; min-height:50px;
  transition:background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
.btn:hover{background:var(--accent-hover);}
.btn.rec{background:var(--accent);}
.btn[disabled]{opacity:.25; cursor:not-allowed;}
.btn.ghost-btn{
  background:none; border:1px solid var(--accent); color:var(--accent);
}
.btn.ghost-btn:hover{background:var(--accent); color:#fff;}
.fineprint{margin:0; text-align:center; max-width:460px; font-size:14px; color:var(--ink-35);}

/* ————— Footer — the museum's own footer pattern: grey panel inside the white page —————
   Full on the landing and confirmation screens; during the application it shrinks to
   legal + social so nothing competes with the task. */
.ftr{
  margin-top:auto; margin-bottom:var(--s-10);
  background:var(--canvas); border-radius:var(--card-lg);
  padding:var(--s-10);
  display:flex; flex-direction:column; gap:var(--s-8);
}
.ftr-top{display:flex; justify-content:space-between; align-items:center; gap:var(--s-8); flex-wrap:wrap;}
.ftr-intro{display:flex; flex-direction:column; gap:var(--s-2);}
.ftr-head{
  font-size:clamp(28px, 3vw, 40px); font-weight:400; line-height:1.15; letter-spacing:-.02em;
}
.ftr-sub{margin:0; font-size:17px; line-height:1.45; color:var(--ink-55);}
.ftr-actions{margin:0; display:flex; gap:var(--s-2); flex-wrap:wrap;}
.ftr-actions .btn{display:inline-flex; align-items:center; text-decoration:none;}

.ftr-bottom{
  border-top:1px solid var(--grey-15); padding-top:var(--s-8);
  display:flex; justify-content:space-between; align-items:center; gap:var(--s-4) var(--s-8); flex-wrap:wrap;
}
.ftr-legal{margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-8); font-size:14px;}
.ftr-legal .b1-link{font-size:14px; font-weight:400;}
.ftr-copy{color:var(--grey-57);}
.ftr-social{list-style:none; margin:0; padding:0; display:flex; gap:8px;}
.ftr-social a{
  width:44px; height:44px; border-radius:var(--pill);
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.05); color:var(--ink);
  transition:background var(--dur-hover) var(--ease);
}
.ftr-social a:hover{background:rgba(0,0,0,.1);}
body:is([data-state="b1"],[data-state="b2"],[data-state="q1"],[data-state="wait"],[data-state="q2"],[data-state="details"]) .ftr-logo{display:none;}
body:is([data-state="b1"],[data-state="b2"],[data-state="q1"],[data-state="wait"],[data-state="q2"],[data-state="details"]) .ftr{padding-block:var(--s-8);}
body:is([data-state="b1"],[data-state="b2"],[data-state="q1"],[data-state="wait"],[data-state="q2"],[data-state="details"]) .ftr-bottom{border-top:0; padding-top:0;}


/* ————— Desktop ————— */
@media (min-width:880px){
  .state{max-width:680px; margin-inline:auto;}
  #s-wait{max-width:820px;}
  /* locked screen runs full container so the card row is full width.
     width+margin:0 are required: an auto inline margin makes a flex item shrink-to-fit */
  #s-locked{max-width:none; width:100%; margin-inline:0;}
  #s-locked :is(.ghost, h1, .lede, .notify, .notify-ok){max-width:760px; margin-inline:auto;}
  .state-record{
    /* width+margin:0 stop the auto inline margin shrinking the grid to its
       content — without them Q1 and Q2 render at different widths */
    max-width:none; width:100%; margin-inline:0;
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    gap:clamp(40px, 5vw, 72px); align-items:center;
  }
  .q-col{gap:16px;}
  .q-col .lede{max-width:40ch;}
  .view{aspect-ratio:16/10; max-height:60vh;}
  /* app.js moves the action into the question column at this width */
  .q-col .actions{align-items:flex-start; padding-block:12px 0;}
  .q-col .actions .fineprint{text-align:start;}
  .state-split{
    max-width:none; width:100%; margin-inline:0;
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(40px, 5vw, 72px); align-items:center;
  }
  .state-split.b5, .state-split.b6{align-items:start;}
  .b5-intro{position:sticky; top:var(--s-10);}
  .state-split.b2{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:start;}
}

/* ————— Phones ————— */
@media (max-width:1024px){ :root{--page:24px;} .shell{padding-inline:var(--s-8);} }
@media (max-width:560px){
  :root{--page:12px; --card:20px; --card-lg:24px;}
  .shell{padding-inline:20px;}

  /* explicit type ladder so the hierarchy holds at phone width:
     14 label · 34 title · 16 body */
  .ghost{font-size:14px; line-height:1.4; margin-bottom:calc(var(--gap) * -.75);}
  h1{font-size:34px; line-height:1.12; letter-spacing:-.025em;}
  h2{font-size:24px; line-height:1.2;}
  .lede{font-size:16px; line-height:1.5; max-width:34ch;}
  .lede.small{font-size:15px;}
  .eyebrow{font-size:14px;}
  .brand img{height:36px;}
  .progress-bar i{width:14px;}
  .progress{gap:10px; font-size:13px;}
  .stage{min-height:0; justify-content:flex-start;}
  .bar{padding-block:20px 0; min-height:0;}
  .stage{padding-block:28px 24px;}
  .ftr{padding:var(--s-8) 20px; gap:var(--s-8); margin-bottom:20px; margin-inline:-8px; width:calc(100% + 16px);}
  .ftr-actions{width:100%; flex-direction:column;}
  .ftr-actions .btn{width:100%; justify-content:center; white-space:nowrap;}
  .ftr-bottom{flex-direction:column-reverse; align-items:flex-start;}
  .ftr-legal{flex-direction:column; align-items:flex-start; gap:var(--s-2);}
  .ftr-legal .ftr-copy{order:3;}
  .notify{flex-direction:column;}
  .notify button{padding:16px 28px;}
  .btn{width:100%; padding:17px 28px;}
  .actions > *{width:100%;}
  .b6-file{padding:var(--s-6, 24px) 20px;}
  .b6-actions .btn{flex:1; min-width:0;}
  .b4-wait{font-size:72px;}
  .display{font-size:56px;}
  .b1-card{padding:var(--s-8) 20px;}
  .state-split{gap:var(--s-8);}
}

/* every touch device gets a 44px minimum target, regardless of width */


@media (prefers-reduced-motion: reduce){
  .view.running .fuse{transition:none;}
  .dot, .view.low .clock{animation:none;}
}

/* ————— MOTF type: Obibok titles —————
   As on museumofthefuture.ae: titles in Obibok at 500 (its Regular cut; 400 "Normal" is a hairline) with slightly
   open tracking. Placed last so it overrides the tight negative tracking that was tuned for the old face. */
.hero-head, .reveal-head, .card-head, .cta-head, .finale-head, .sec-head, .role-head, .role-statement, .role-panel-line,
.skill-t, .sc-n, .sc-title, .sc-day, .strip-head, .display, .ftr-head, body[data-state="ready"] .ftr-head,
.state h1, .question, .b4-wait, .b4-ask, .cta-title{font-family:var(--font-title); font-weight:500; letter-spacing:.01em;}
/* the very large display lines sit a touch tighter, and need a little more line height than the old face */
.sec-head, .role-head, .skill-t, .sc-day, .ftr-head, body[data-state="ready"] .ftr-head, .display{letter-spacing:0; line-height:.98;}
.role-statement, .question, .b4-ask{letter-spacing:.005em; line-height:1.15;}
/* Obibok runs wider than the previous face: keep "Make this" on one line */
.role-head{font-size:clamp(50px, 7.2vw, 120px);}
.hero-head{font-size:clamp(38px, 4.3vw, 66px);}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

/* white type on the persona photos and the black card: Obibok's heavier "Medium" cut (500 reads too thin at card size) */
.card-head, .cta-head, .finale-head, .role-panel-line{font-weight:700;}
.card-tag{font-weight:500;}

.cta-em{white-space:nowrap;}

/* ————— Footer: the simple grey MOTF footer —————
   Logo + social icons on top, legal below. On the landing it is the last sheet, riding over the FAQ. */
.ftr{background:var(--canvas); color:var(--ink); gap:var(--s-10);}
.ftr-top{align-items:center;}
.ftr-logo{display:block; color:var(--ink); line-height:0;}
.ftr-logo img{width:auto; height:56px;}
.ftr-bottom{border-top-color:var(--grey-15);}
.ftr .b1-link{color:var(--ink);}
.ftr-copy{color:var(--grey-57);}
.ftr-social a{background:rgba(0,0,0,.05); color:var(--ink);}
.ftr-social a:hover{background:rgba(0,0,0,.1);}
body[data-state="ready"] .ftr{
  --sheet-r:clamp(28px, 3.6vw, 56px);
  position:relative; z-index:9; width:100%; max-width:none;
  margin:calc(-1 * var(--sheet-r)) 0 0; border-radius:var(--sheet-r) var(--sheet-r) 0 0;
  padding:clamp(48px, 6vw, 80px) max(40px, 6vw) 32px;
}
@media (max-width:560px){
  .ftr-top{flex-direction:column; gap:var(--s-8);}
  .ftr-logo img{height:44px;}
  body[data-state="ready"] .ftr{padding:48px 20px 28px; margin-inline:0; width:100%;}
}


.faq .sec-head{font-size:clamp(40px, 4.4vw, 68px);}
/* ——— Type-scale cleanup (2026-10-16): the section type was set for a poster, not a page ———
   One scale below the hero: section heads 40–68, statements 22–32, step dates 34–52, step titles 19–23, body 16–17. */
.role-head{font-size:clamp(40px, 4.6vw, 72px);}
.role-statement{font-size:clamp(22px, 2vw, 32px); max-width:22em; line-height:1.2;}
.role-panel-line{font-size:clamp(22px, 2.2vw, 34px);}
.role-skills li{padding:clamp(16px, 2.4vh, 28px) 0;}
.skill-t{font-size:clamp(36px, 4vw, 64px);}
.skill-d{font-size:17px; line-height:1.45;}
.role-skills-wrap{padding:10vh max(40px, 6vw) 14vh;}


/* the lobby photo, graded into the night gradient: a little less saturation, then a cobalt→violet multiply */
.role-media img{filter:saturate(.78) contrast(1.05) brightness(.96);}
.role-media::after{content:''; position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply;
  background:linear-gradient(160deg, rgba(186,183,253,.10) 0%, rgba(104,109,245,.30) 55%, rgba(103,4,163,.42) 100%);}

/* skills rows: the description centres on its word (baseline alignment left it hanging below "Welcome.") and no
   longer drops 10px while dim, so the pair always reads as one line */
.role-skills li{align-items:center;}
.skill-d{transform:none;}

/* skills, rebalanced: big enough to carry the light-up, with enough air that only one row is in the light at a time */
.skill-t{font-size:clamp(48px, 6.2vw, 100px);}
.role-skills li{padding:clamp(32px, 8vh, 80px) 0;}
.skill-d{font-size:clamp(17px, 1.3vw, 20px);}
.role-skills-wrap{padding:14vh max(40px, 6vw) 16vh;}

/* ——— Loader (from the Mission 2071 stunt page): the year counts 2026 → 2071 on the blurred campaign sky ——— */
.loader{position:fixed; inset:0; z-index:100; display:grid; place-items:center; overflow:hidden; color:#fff;
  background:#7392d1; transition:opacity .9s cubic-bezier(.6,0,.2,1), visibility .9s, transform 1.1s cubic-bezier(.2,.8,.2,1);
  will-change:opacity, transform;}
.loader::before{content:""; position:absolute; inset:-40px; background:url(assets/img/sky.webp) center / cover no-repeat;
  filter:blur(28px) saturate(1.1); transform:scale(1.08);}
.loader.off{opacity:0; visibility:hidden; transform:scale(1.03); pointer-events:none;}
.ld{position:relative; display:grid; justify-items:center; gap:14px; text-align:center;}
.ld-y{display:flex; font:500 clamp(72px, 14vw, 168px)/.9 var(--font-title); letter-spacing:0;}
.ld-y span{display:inline-block;}
.ld-c{font:500 15px/1 var(--font); opacity:.85;}
.loader i{display:block; width:180px; height:1px; margin-top:10px; background:rgba(255,255,255,.3); overflow:hidden;}
.loader i::after{content:""; display:block; height:100%; width:var(--p, 0%); background:#fff;}

/* ——— Role panel, back to the expanding photo (2026-10-16) ———
   The rounded card opens to full bleed as it crosses the screen (clip-path from app.js, --ci-*), now in the campaign
   language: the host stands against the brand sky, the photo drifting inside; a midnight wash carries the line. */
.role-panel{height:100vh; height:100svh; margin:16vh 0 0; padding:0; max-width:none;}
.role-media{position:absolute; inset:0; aspect-ratio:auto; border-radius:0;
  clip-path:inset(var(--ci-y, 12vh) var(--ci-x, 12vw) round var(--ci-r, 20px)); will-change:clip-path;
  background:url(assets/img/sky.webp) center / cover no-repeat;}
.role-media img.role-person{left:58%; top:auto; bottom:-14%; width:auto; height:102%; object-fit:contain; filter:none;
  transform:translate3d(-50%, var(--py, 0px), 0) scale(var(--ps, 1.12)); transform-origin:50% 100%;}
.role-media::after{content:''; mix-blend-mode:normal;
  background:linear-gradient(to top, rgba(12,8,64,.62) 0%, rgba(12,8,64,.3) 24%, rgba(12,8,64,0) 48%);}
.role-panel-line{position:absolute; left:0; right:0; bottom:12vh; z-index:1; margin:0; padding:0 24px; max-width:none;
  font-size:clamp(28px, 3.2vw, 50px); text-shadow:0 2px 24px rgba(12,8,64,.35);}
@media (max-width:880px){
  .role-panel{height:82svh; margin-top:72px; padding:0;}
  .role-media{aspect-ratio:auto;}
  .role-media img.role-person{left:50%; height:100%;}
  .role-panel-line{bottom:8vh; font-size:26px;}
}

/* ——— Section 5 · How to get the job — the timeline wheel (after storia.osi.swiss/storia) ———
   A tall section with a pinned stage, scrubbed by scroll from app.js (the "timeline" block). On the way in the headline
   docks to the top as a caption, a great white arc draws out from its apex and the wheel spins its first date into
   place; each scroll stop then turns the wheel one step, the dates riding the circle while the copy cross-fades beneath;
   on the way out the wheel spins on and dims as the white closing sheet rises over the pinned stage.
   app.js writes only custom properties: --R / --apex / --theta (geometry, on resize) and the per-frame values below. */
.steps.tl{padding:0; height:565vh; height:565svh; background:#efeff1; color:#141414;}
.steps.tl + .closing{margin-top:-100vh; margin-top:-100svh;}     /* the closing sheet rises over the pinned stage */
.closing[hidden]{display:none;}
.steps.tl + .closing[hidden] + .faq{margin-top:-100vh; margin-top:-100svh;}   /* with the closing sheet hidden, the FAQ rises instead */
.tl-stage{
  --R:1600px; --apex:200px; --theta:14deg;
  position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; isolation:isolate;
  transform:scale(var(--ss, 1)); transform-origin:50% 0;
}
.tl-stage::after{content:''; position:absolute; inset:0; z-index:9; background:var(--midnight-900); opacity:var(--dim, 0); pointer-events:none;}

/* the sky: soft columns (osi's light bands) and three drifting glows in the campaign's blue and lilacs */
.tl-sky{position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:var(--in, 0);}
.tl-sky::before{content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,.16) calc(10vw - 2px), rgba(255,255,255,.42) calc(10vw - 1px), rgba(255,255,255,0) 10vw);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 22%, #000 64%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 22%, #000 64%, transparent 100%);}
.tl-glow{position:absolute; bottom:-34vh; width:72vw; height:72vh; border-radius:50%;
  background:radial-gradient(closest-side, var(--c), transparent); opacity:var(--o, 0);
  animation:tl-drift 18s ease-in-out infinite alternate; will-change:transform, opacity;}
.tl-glow.g1{--c:rgba(45,58,193,.34); left:-20vw;}
.tl-glow.g2{--c:rgba(152,137,254,.42); left:14vw; animation-duration:23s; animation-delay:-7s;}
.tl-glow.g3{--c:rgba(212,206,255,.95); right:-18vw; animation-duration:27s; animation-delay:-13s;}
@keyframes tl-drift{from{transform:translate3d(-4vw, 2vh, 0) scale(1);} to{transform:translate3d(5vw, -4vh, 0) scale(1.14);}}

/* the headline: centred while the sheet rises, then docked to the top as the section's caption */
.tl-intro{position:absolute; left:50%; top:50%; z-index:2; width:min(92vw, 1360px);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px;
  transform:translate(-50%, -50%) translateY(var(--iy, 0px)) scale(var(--is, 1)); will-change:transform;}
.tl .sec-head{font-size:clamp(36px, 4.4vw, 72px); line-height:1.04; text-wrap:balance;}
.tl .steps-count{margin:0; display:block; font-size:18px; font-weight:400; color:#5c5c63; opacity:var(--co, 1);}

/* the wheel: centre at (50%, apex + R); each node is rotated about it, so its label always lies along the curve */
.tl-wheel{position:absolute; inset:0; pointer-events:none;}
.tl-arc{position:absolute; left:calc(50% - var(--R)); top:var(--apex); width:calc(var(--R) * 2); height:calc(var(--R) * 2);
  overflow:visible; transform:rotate(-90deg);}           /* the circle's path starts at the apex */
.tl-arc circle{fill:none; stroke:#fff; stroke-width:1.5; vector-effect:non-scaling-stroke;
  stroke-dasharray:var(--dash, 0 1000); stroke-dashoffset:var(--dash-off, 0);}
.tl-ring{position:absolute; left:50%; top:calc(var(--apex) + var(--R)); width:0; height:0;
  transform:rotate(var(--rot, 0deg)); will-change:transform;}
.tl-tick{position:absolute; left:-.5px; top:0; width:1px; height:7px; background:rgba(20,20,40,.18);
  transform:rotate(var(--a)) translateY(calc(6px - var(--R))); opacity:var(--to, 0);}
.tl-tick.is-major{height:12px; background:rgba(20,20,40,.3);}
.tl-node{position:absolute; left:0; top:0; opacity:var(--no, 0);
  transform:rotate(calc(var(--i) * var(--theta))) translateY(calc(-1 * var(--R)));}
.tl-dot{position:absolute; left:-5px; top:-5px; width:10px; height:10px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 5px rgba(255,255,255,.4), 0 1px 4px rgba(20,20,40,.14);
  transition:background-color .5s cubic-bezier(.35,0,0,1), transform .6s cubic-bezier(.34,1.4,.5,1);}
.tl-node.is-on .tl-dot{background:var(--midnight-900); transform:scale(1.2);}
.tl-node.is-live .tl-dot{background:#2D3AC1;}
.tl-node.is-live .tl-dot::after{content:''; position:absolute; inset:0; border-radius:50%; background:#2D3AC1; animation:live 1.8s cubic-bezier(.2,0,.2,1) infinite;}
.tl-label{position:absolute; left:0; top:22px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; white-space:nowrap;}
.tl-date{font-family:var(--font-title); font-weight:500; font-size:clamp(22px, 1.9vw, 32px); line-height:1; color:#8e8e95;
  transition:color .6s cubic-bezier(.35,0,0,1), transform .6s cubic-bezier(.35,0,0,1);}
.tl-node.is-on .tl-date{color:#141414; transform:scale(1.08);}
.tl-node.is-ghost .tl-date{color:#a6a6ad;}
.tl-sub{font-size:14px; line-height:1.2; color:#8e8e95; opacity:var(--so, 1);}
.tl-stem{position:absolute; left:50%; top:calc(var(--apex) + 70px); width:1px; height:clamp(28px, 5vh, 52px); margin-left:-.5px;
  background:linear-gradient(to bottom, rgba(20,20,40,.28), rgba(20,20,40,0)); transform-origin:50% 0; transform:scaleY(var(--stem, 0));}

/* the copy: the four steps share one cell and cross-fade as the wheel turns (opacity / lift / blur from app.js) */
.tl-steps{list-style:none; margin:0; padding:0 24px; position:absolute; left:0; right:0; z-index:3;
  top:calc(var(--apex) + 70px + clamp(44px, 7vh, 76px)); display:grid; justify-items:center;}
.tl-step{grid-area:1 / 1; width:min(100%, 900px); display:flex; flex-direction:column; align-items:center; text-align:center;
  opacity:var(--o, 0); transform:translateY(var(--y, 0px)); filter:blur(var(--b, 0px)); will-change:transform, opacity;}
.tl-step:not(.is-on){pointer-events:none;}
.tl-chips{margin:0 0 clamp(14px, 2.2vh, 22px); display:flex; gap:6px; justify-content:center; flex-wrap:wrap;}
.tl-chip{display:inline-flex; align-items:center; height:30px; padding:0 12px; border-radius:var(--pill);
  background:rgba(255,255,255,.6); box-shadow:inset 0 0 0 1px rgba(20,20,20,.12); font-size:14px; font-weight:500; white-space:nowrap;}
.tl-chip:empty{display:none;}
.tl-status{background:var(--midnight-900); color:#fff; box-shadow:none;}
.tl-step:first-child .tl-status{background:#2D3AC1;}
.tl-when{margin:0; font-family:var(--font-title); font-weight:500; font-size:clamp(18px, 1.7vw, 28px); line-height:1.1; color:#8e8e95;}
.tl-title{margin:clamp(6px, 1.2vh, 12px) 0 0; font-family:var(--font-title); font-weight:400; font-size:min(5.4vw, 8.2vh, 92px);
  line-height:1.02; letter-spacing:-.01em; color:#1f1f1f; text-wrap:balance;}
.tl-body{margin:clamp(12px, 2vh, 20px) 0 0; max-width:36ch; font-size:clamp(16px, 1.15vw, 18px); line-height:1.45; color:#5c5c63;}
/* the faces thin out step by step, every row ending in "+ you"; they pop in when their step arrives */
.tl-faces{margin:clamp(18px, 3vh, 28px) 0 0; display:flex; align-items:center; justify-content:center; padding-left:11px;}
.tl-faces .face{--d:clamp(36px, 3vw, 46px); margin-left:-11px; background:#d9d9de; box-shadow:0 0 0 2px #efeff1;}
.tl-step.is-on .tl-faces .face{transform:none; opacity:1; transition-delay:calc(.08s + var(--k) * .045s);}
.tl-you{display:flex; align-items:center; justify-content:center; background:#fff !important; color:#141414;
  font-size:13px; font-weight:500; white-space:nowrap;}
.tl-step:first-child .tl-you{background:#2D3AC1 !important; color:#fff;}
/* the last step: the museum's ring, its window opening on a pair of eyes, beside the button */
.tl-foot{margin-top:clamp(18px, 3vh, 28px); display:flex; align-items:center; gap:18px;}
.tl-eye{width:clamp(80px, 7vw, 104px); height:auto; color:#141414; overflow:visible;}
.tl-lid{transform-box:fill-box; transform-origin:50% 50%; transform:scaleY(.06); transition:transform .9s cubic-bezier(.34,1.3,.5,1) .3s;}
.tl-step.is-on .tl-lid{transform:none;}
.tl-cta{height:56px; padding:0 28px; border:0; border-radius:var(--pill); cursor:pointer; background:var(--accent); color:#fff;
  font:500 16px/1 var(--font); display:inline-flex; align-items:center; gap:10px;
  transition:background var(--dur-hover) var(--ease), transform .15s var(--ease);}
.tl-cta span{transition:transform .25s var(--ease);}
.tl-cta:hover{background:var(--accent-hover);} .tl-cta:hover span{transform:translateX(3px);}
.tl-cta:active{transform:scale(.97);}
.tl-cta:focus-visible{outline:2px solid #142CA3; outline-offset:3px;}

/* the scrubber (osi's "Backwards · ticks · After you"): a frosted capsule; the white pill marks where the wheel is */
.tl-scrub{position:absolute; left:50%; bottom:calc(var(--edge-h, 96px) + 12px);   /* raised clear of the bottom of the screen */ z-index:4; width:min(660px, calc(100vw - 32px));
  display:flex; align-items:center; gap:6px; padding:5px; border-radius:var(--pill);
  background:rgba(255,255,255,.5); box-shadow:inset 0 0 0 1px rgba(255,255,255,.8), 0 18px 40px -24px rgba(16,16,24,.3);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  opacity:var(--sop, 0); transform:translate(-50%, var(--sy, 120%));}
.tl-nav{height:40px; padding:0 16px; border:0; border-radius:var(--pill); background:#fff; color:#141414; cursor:pointer;
  font:500 14px/1 var(--font); display:inline-flex; align-items:center; gap:8px; white-space:nowrap; flex:none;
  transition:background-color .25s cubic-bezier(.35,0,0,1), color .25s, opacity .3s;}
.tl-nav:hover:not(:disabled){background:var(--accent); color:#fff;}
.tl-nav:disabled{opacity:.42; cursor:default;}
.tl-nav:focus-visible{outline:2px solid #142CA3; outline-offset:2px;}
.tl-track{position:relative; flex:1; height:40px; cursor:pointer; min-width:0;
  background:repeating-linear-gradient(90deg, rgba(20,20,40,.2) 0 1px, transparent 1px 8px) center / calc(100% - 28px) 12px no-repeat;}
.tl-mark{position:absolute; top:50%; width:1px; height:20px; margin:-10px 0 0 -.5px; background:rgba(20,20,40,.45);
  left:calc(14px + (100% - 28px) * var(--m));}
.tl-now{position:absolute; top:50%; z-index:1; left:calc(14px + (100% - 28px) * var(--p, 0)); transform:translate(-50%, -50%);
  height:32px; padding:0 14px; display:inline-flex; align-items:center; border-radius:var(--pill); background:#fff; color:#141414;
  font-family:var(--font-title); font-weight:500; font-size:14px; white-space:nowrap; box-shadow:0 2px 12px rgba(20,20,40,.14);}

@media (max-width:640px){
  .tl .sec-head{font-size:clamp(32px, 9vw, 44px);}
  .tl .steps-count{font-size:16px;}
  .tl-date{font-size:20px;}
  .tl-sub{font-size:12px;}
  .tl-title{font-size:min(10vw, 6.6vh);}
  .tl-body{font-size:15px;}
  .tl-faces .face{--d:36px;}
  .tl-foot{flex-direction:column; gap:14px;}
  .tl-nav{padding:0 13px;}
  .tl-scrub{bottom:max(76px, calc(var(--edge-h, 64px) + 12px));}              /* clear of the fixed Demo badge in the corner */
}
@media (prefers-reduced-motion: reduce){
  .tl-glow{animation:none;}
  .tl-dot, .tl-date, .tl-lid, .tl-faces .face{transition:none;}
}

/* the original host photo is back in the expanding panel, graded into the brand (midnight shadows, cobalt→lilac ramp,
   warm tones muted: assets/img/role-host-graded.jpg); it covers the panel and drifts inside as before */
.role-media img.role-photo{left:0; top:-10%; width:100%; height:120%; object-fit:cover; object-position:50% 40%;
  transform:translate3d(0, var(--py, 0px), 0) scale(var(--ps, 1.12)); filter:none; object-position:55% 50%;}
/* the atrium photo is bright at the foot: a deeper midnight wash under the line */
.role-media::after{background:linear-gradient(to top, rgba(12,8,64,.78) 0%, rgba(12,8,64,.5) 26%, rgba(12,8,64,.14) 46%, rgba(12,8,64,0) 60%);}

/* short laptop screens: the open sky between the three faces is shallower, so the hero copy tightens up */
@media (min-width:880px) and (max-height:820px){
  .hero-eyebrow{margin-bottom:12px; font-size:15px;}
  .hero-head{font-size:min(clamp(38px, 4.3vw, 66px), 7vh);}
  .hero-sub{margin-top:14px; font-size:17px;}
  .hero-kicker{margin-top:8px;}
  .hero-scroll{margin-top:44px; height:48px;}
}

/* footer: links to the museum's About us / The building / Press / Partnership pages. They sit with the social icons on
   the right, centred on the icons' 44px row, in the same regular weight as the legal links */
.ftr-nav{display:flex; flex-wrap:wrap; align-items:center; gap:0 32px; margin-left:auto; margin-right:clamp(24px, 3vw, 48px);}
.ftr-nav a{display:flex; align-items:center; height:44px; font-size:16px; font-weight:400; color:var(--ink); text-decoration:underline; text-decoration-color:transparent; text-underline-offset:4px; transition:text-decoration-color var(--dur-hover) var(--ease);}
.ftr-nav a:hover{text-decoration-color:currentColor;}
@media (max-width:760px){ .ftr-nav{margin:0; width:100%; gap:0 24px;} }

/* the last wheel card and its zoom share one surface, in the brand's night palette: midnight at the top into night
   (#1A0B55) at the foot, which is the colour Section 4 opens with, so the hand-over has no seam */
:root{--cv-dusk:linear-gradient(var(--midnight-900), var(--midnight-900));}   /* step 1: midnight */
.card.is-purple .card-inner{background:var(--cv-dusk); opacity:calc(var(--enter) * var(--hide, 1)); transform:none;}
.card.is-purple .card-body{color:#fff;}
.cv-zoom{position:absolute; inset:0; z-index:4; visibility:hidden; background-color:var(--midnight-900); color:#fff;
  will-change:clip-path; pointer-events:none; transition:background-color .9s cubic-bezier(.65,0,.35,1);}
/* every line sits in its own mask; the current step's lines rise in (staggered), past steps' lift out above */
.cv-zoom .sl{display:block; overflow:hidden; padding-bottom:.12em; margin-bottom:-.12em;}
.cv-zoom .sl-i{display:block; transition:transform 1s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--i, 0) * 70ms + 120ms);}
.cv-zoom .st[data-at="next"] .sl-i{transform:translateY(130%);}
.cv-zoom .st[data-at="past"] .sl-i{transform:translateY(-130%); transition-duration:.7s; transition-timing-function:cubic-bezier(.7,0,.84,0); transition-delay:calc(var(--i, 0) * 40ms);}
.cv-zoom .st[data-st="1"][data-at="past"] .cv-sub .cw{transform:translateY(-140%); opacity:0; transition:transform .7s cubic-bezier(.7,0,.84,0), opacity .4s .3s;}
.cv-zoom .st[data-at="on"] .cv-sub .cw{transition:transform .7s cubic-bezier(.16,1,.3,1), opacity .5s;}
/* one headline size (--hl, on .cv-copy) drives the headline, the line under it and the gap between them, so the pair
   keeps the same proportion at every screen size */
.st-head{margin:0; font-size:var(--hl); line-height:1.1; white-space:nowrap;}
.st-sub{margin:max(16px, calc(var(--hl) * .3)) 0 0; font-size:max(16px, calc(var(--hl) * .33)); line-height:1.25; color:rgba(255,255,255,.82);}
.cv-mark{position:absolute; left:0; top:0; margin:calc(var(--card-h) * .0495); width:calc(var(--card-h) * .11); height:auto; transform-origin:0 0;}
/* the three statements share one on-screen size: the size they have inside a box (84% of the old full-screen size, 88% on
   phones), and while the screen shrinks into a box and grows back the copy counter-scales (--bx-inv, app.js boxes), so
   the type never changes size on screen, only the box around it */
.cv-copy{position:absolute; left:max(24px, 6vw); right:max(24px, 6vw); bottom:max(48px, 12vh); --hl:clamp(44px, 6.2vw, 108px);}
.cv-zoom .cv-copy, .bx .cv-copy{scale:var(--bx-inv, 1) var(--bx-inv-y, var(--bx-inv, 1)); transform-origin:0 100%;}
/* the mark keeps its shape when a phone box shrinks more in height than in width */
.cv-zoom .bx-top img, .bx .bx-top img{scale:var(--bx-inv, 1) var(--bx-inv-y, var(--bx-inv, 1)); transform-origin:0 50%;}
.cv-head{margin:0; font-size:var(--hl); line-height:1.1; white-space:nowrap; transform-origin:0 100%; will-change:transform;}
.cv-sub{margin:max(16px, calc(var(--hl) * .3)) 0 0; font-size:max(16px, calc(var(--hl) * .33)); line-height:1.25; color:rgba(255,255,255,.78);}
.cv-sub .cw{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.14em; margin-bottom:-.14em;}
.cv-sub .cw-i{display:inline-block; transform:translateY(105%); will-change:transform;}
@media (max-width:760px){ .cv-copy{--hl:clamp(30px, 7.9vw, 49px);} .st-head{white-space:normal;} }

/* ——— Type system (2026-10-20): Obibok for titles, Untitled Sans for body ———
   Every headline, statement and card caption is Obibok Medium (the bold cut, weight 600), so titles keep one strong
   voice; every supporting line and body text is Untitled Sans. The :is() list carries the specificity of its strongest
   member, so it overrides the older, scattered rules in one place. */
:is(.hero-head, .reveal-head, .fan-head, .beat-line, .role-head, .sec-head, .tl-title, .ftr-head, .cta-title, .cta-head,
    .finale-head, .state h1, .question, .b4-ask, .b4-wait, .display, .strip-head, .skill-t, .sc-title, .sc-day,
    .role-principle, .role-hats, .role-statement, .role-panel-line, .fan-t, .cv-head, .card .card-head, .ld-y,
    .tl-date, .tl-when, .qa-q){
  font-family:var(--font-title); font-weight:600; letter-spacing:-.015em;
}
:is(.hero-head, .reveal-head, .fan-head, .beat-line.is-xl, .role-head, .sec-head, .tl-title, .cta-title){line-height:.98;}
.hero-copy .hero-head{line-height:1.1;}
/* the loader's year: Obibok Medium with the font's own tabular figures (every digit 0.57em, spaced by the designer), so the
   count never shifts and 2071 sets evenly; equal-width boxes round proportional digits left the 1 adrift. (Here, after
   the :is() title list, so its tracking doesn't apply.) */
.loader .ld-y{font-weight:600; letter-spacing:0; font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1;}   /* (beats the :is() list above) the opening headline: room between "you" and "Perfect", as in the statements */
:is(.beat-line, .role-principle, .role-hats, .role-statement, .role-panel-line){line-height:1.1;}
/* supporting lines and body: Untitled Sans */
:is(.hero-sub, .reveal-sub, .beat-sub, .cv-sub, .role-cta-note, .role-facts-note, .fan-d, .stack-d){
  font-family:var(--font); font-weight:400; letter-spacing:-.01em;
}
.hero-kicker{font-weight:500;}
/* every wheel card (the photo cards, the travelling photo's caption, the purple card) and the purple card's zoom headline
   set their statement in Obibok Medium, Obibok's heaviest file */
:is(.card, .hero-chrome) .card-head, .cv-zoom .cv-head{font-family:var(--font-title); font-weight:600; letter-spacing:.01em;
  line-height:1.1;}
/* app.js cvMeasure copies the purple card's tracking and line-height onto the zoom headline */
/* Obibok's lowercase stands 11% taller than Untitled Sans's at the same size (x-height 0.565 vs 0.508 em); the cards'
   statements are set at 90% so they keep the size they had in Untitled Sans (the zoom headline keeps --hl) */
:is(.card, .hero-chrome) .card-head{font-size:calc(var(--card-h) * .0892 * .9);}

/* ——— The boxes: the card's screen zooms out into a rounded box, two more slide in from the right, the last zooms back
   in (app.js boxes). Each is a full-screen layer, so a box is simply that screen scaled down with rounded corners. ——— */
.cv-zoom, .bx{transform-origin:50% 50%; overflow:hidden; will-change:transform;}
.cv-zoom .cv-sub{color:inherit; opacity:.78;}
.bx{position:absolute; inset:0; z-index:4; visibility:hidden; pointer-events:none;}
.bx.is-lav{background:var(--lavender-200); color:var(--midnight-900);}
.bx.is-night{background:var(--midnight-900); color:#fff;}
#bx3{pointer-events:auto;}
.bx .st-head{font-family:var(--font-title); font-weight:600; letter-spacing:.01em;}   /* the same Obibok as the cards and the zoom headline */
.bx .st-sub{color:inherit; opacity:.78; max-width:22em;}
/* box chrome: the mark top-left; shown only while the screens are boxes (--bx-chrome) */
.bx-top{position:absolute; left:max(24px, 6vw); right:max(24px, 6vw); top:max(28px, 7vh); display:flex; justify-content:space-between; align-items:center;
  opacity:var(--bx-chrome, 0); font:500 15px/1 var(--font); letter-spacing:.04em; color:inherit; pointer-events:none;}
.bx-top img{width:clamp(44px, 4vw, 64px); height:auto;}
.bx.is-lav .bx-top img{filter:brightness(0) saturate(100%) invert(6%) sepia(60%) saturate(4000%) hue-rotate(240deg);}
/* box 2: one big trait at a time, rolling through all ten like a split-flap board (app.js bxWords), top-left above the
   headline, at the headline's size and weight */
.bx-roll{position:absolute; left:max(24px, 6vw); top:max(112px, 15vh); font:600 clamp(44px, 6.2vw, 108px)/1.1 var(--font-title);
  scale:var(--bx-inv, 1) var(--bx-inv-y, var(--bx-inv, 1)); transform-origin:0 0;
  letter-spacing:.01em; white-space:nowrap; pointer-events:none;}
.bx-slot{display:inline-block; height:1.3em; overflow:hidden; vertical-align:bottom;}   /* room for Obibok's deep descenders */
.bx-slot i{display:block; font-style:normal; transition:transform .65s cubic-bezier(.7,0,.2,1);}
.bx-slot i span{display:block; width:max-content; height:1.3em; line-height:1.3em;}
@media (prefers-reduced-motion:reduce){ .bx-slot i{transition:none;} }
@media (max-width:760px){
  .bx-roll{left:max(16px, 5vw); top:max(88px, 13vh); font-size:clamp(30px, 7.9vw, 49px);}
  .bx .st-head br{display:none;}
}


/* Section 4 · the role scene, on a white sheet: the night fades to white as the sheet rises (--lt, scrubbed from app.js),
   the statement fills in black in the middle and scrolls up and away, the line follows, settles in the middle, and as it
   fills the museum gathers around it in a loose scatter (after telescope.fyi). "What you'll do" then rises over it as a dark sheet with
   the same rounded top. Opacity and drift of every piece come from app.js. */
.role::before{content:''; position:absolute; inset:0; z-index:-1; background:#fff; opacity:var(--lt, 0); pointer-events:none;
  border-radius:var(--sheet-r) var(--sheet-r) 0 0; will-change:opacity;}
.role-scene{position:relative; height:450vh; height:450svh;}
.role-stage{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;}
.role-copy{position:absolute; left:50%; top:50%; z-index:1; width:min(90vw, 22em); translate:-50% -50%;
  font-size:clamp(30px, 3.1vw, 52px); display:grid; align-items:center;}
.role-copy > p{grid-area:1 / 1;}   /* both lines in the same spot, one after the other */
.role-statement{position:static; translate:none; width:auto; max-width:none; margin:0; padding:0; font-size:1em; line-height:1.12;
  text-align:center; color:#0a0a0a; text-shadow:none; text-wrap:balance;}
.role-statement{will-change:transform, opacity;}
.role-statement .w{color:rgba(10,10,10,.14); transition:color .5s cubic-bezier(.4, 0, .2, 1);}
.role-statement .w.on{color:#0a0a0a;}
/* two layers of photos, both under the words: the small ones at the back, the four big ones over them; .role-copy on top */
.role-scatter{position:absolute; inset:0; pointer-events:none;}
.role-scatter img{z-index:0;}
.role-scatter img:nth-child(-n+4){z-index:1;}
.role-copy{z-index:3;}
.role-scatter img{position:absolute; left:var(--x); top:var(--y); width:var(--w); height:auto; border-radius:10px; opacity:0;
  box-shadow:0 30px 60px -36px rgba(12,8,64,.45); will-change:transform, opacity, filter;}
/* desktop scatter: the big, sharp photos further out, the small archive ones as accents; the middle stays clear */
.role-scatter img:nth-child(1){--x:5vw;  --y:9vh;  --w:21vw;}
.role-scatter img:nth-child(2){--x:76vw; --y:6vh;  --w:17vw;}
.role-scatter img:nth-child(3){--x:73vw; --y:68vh; --w:19vw;}
.role-scatter img:nth-child(4){--x:7vw;  --y:66vh; --w:19vw;}
.role-scatter img:nth-child(5){--x:42vw; --y:4vh;  --w:13vw;}
.role-scatter img:nth-child(6){--x:33vw; --y:80vh; --w:10vw;}
.role-scatter img:nth-child(7){--x:88vw; --y:38vh; --w:9vw;}
.role-scatter img:nth-child(8){--x:2vw;  --y:42vh; --w:8vw;}
.role-scatter img:nth-child(9){--x:56vw; --y:84vh; --w:9vw;}
.role-skills-wrap{position:relative; z-index:1; margin-top:-100vh; margin-top:-100svh; background:var(--gradient-night);
  border-radius:var(--sheet-r) var(--sheet-r) 0 0;}
@media (max-width:880px){
  .role-copy{font-size:26px;}
  /* phones: six photos in a band above and below the line */
  .role-scatter img:nth-child(n+7){display:none;}
  .role-scatter img:nth-child(1){--x:4vw;  --y:7svh;  --w:52vw;}
  .role-scatter img:nth-child(2){--x:62vw; --y:13svh; --w:34vw;}
  .role-scatter img:nth-child(3){--x:50vw; --y:72svh; --w:46vw;}
  .role-scatter img:nth-child(4){--x:4vw;  --y:76svh; --w:40vw;}
  .role-scatter img:nth-child(5){--x:58vw; --y:2svh;  --w:24vw;}
  .role-scatter img:nth-child(6){--x:20vw; --y:89svh; --w:26vw;}
}

/* What you'll do, on a solid midnight sheet: the cards fan out overlapping as before; on phones the deck sits lower so
   each earlier card's word shows above the newer ones. Then the role on the left and the job as a staff-pass card on the right, with the call to apply on it. */
.role-skills-wrap{background:var(--midnight-900);}
.role-offer{margin-top:10vh; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 420px); column-gap:8vw; align-items:center;}
.role-offer .role-hats{margin:0; max-width:22em; font-size:clamp(22px, 2vw, 32px);}
.job-card{position:relative; justify-self:end; width:100%; background:#f7f4ee; color:var(--midnight-900); border-radius:22px;
  padding:52px clamp(24px, 2.4vw, 36px) clamp(24px, 2.4vw, 36px); transform:rotate(1.5deg);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.65);}
.job-card.is-in{transform:rotate(1.5deg);}
.job-card-slot{position:absolute; left:50%; top:18px; width:54px; height:10px; margin-left:-27px; border-radius:6px;
  background:var(--midnight-900); box-shadow:inset 0 2px 3px rgba(0,0,0,.4);}
.job-card-logo{display:block; width:92px; height:auto;
  filter:brightness(0) saturate(100%) invert(6%) sepia(60%) saturate(4000%) hue-rotate(240deg);}
.job-card-title{margin:28px 0 0; font-family:var(--font-title); font-size:clamp(32px, 2.8vw, 44px); font-weight:500; line-height:1;}
.job-card-sub{margin:6px 0 0; font-size:17px; color:rgba(12,8,64,.6);}
.job-card-facts{margin:28px 0 0; padding-top:22px; border-top:1px dashed rgba(12,8,64,.25);
  display:grid; grid-template-columns:1fr 1fr; gap:18px 20px;}
.job-card-facts .is-wide{grid-column:1 / -1;}
.job-card-facts dt{margin:0 0 3px; font-size:13px; color:rgba(12,8,64,.5);}
.job-card-facts dd{margin:0; font-size:16px; line-height:1.35;}
.job-card-cta{margin-top:30px; width:100%;}
@media (max-width:880px){
  .role-offer{grid-template-columns:1fr; row-gap:48px;}
  .job-card{justify-self:center; max-width:420px; transform:none;}
  .job-card.is-in{transform:none;}
}
/* phones: a column of whole cards (app.js rises each one in), title above its line, so every line can be read */
@media (max-width:700px){
  .role-stack{--cw:min(86vw, 380px); padding-top:14vh;}
  .fan-head{position:static; transform:none; margin:0 0 40px;}
  .fan-list::after{display:none;}
  .fan-item{position:static; height:auto; width:var(--cw); margin:0 auto 14px;}
  .fan-card{position:relative; left:auto; margin-left:0; width:100%; height:auto; min-height:calc(var(--cw) * .6);
    padding:26px 24px; gap:28px;}
  .fan-t{font-size:13cqw;}
  .fan-list{padding-bottom:12vh;}
}

/* the role line lights up word by word as it crosses the screen, like the opening sentences: the plain words to a soft
   grey, the roles in bold to full white */
.role-hats .w{color:rgba(255,255,255,.12); transition:color .5s cubic-bezier(.4, 0, .2, 1);}
.role-hats .w.on{color:rgba(255,255,255,.42);}
.role-hats .w.b.on{color:#fff;}

/* wide screens: the role line and the job card hold the screen until every word of the line has lit (app.js lights it by
   the pin's progress); phones stack them taller than a screen, so they scroll normally */
.role-offer-pin{height:220vh; margin-top:4vh;}
.role-offer-pin .role-offer{position:sticky; top:0; height:100vh; margin-top:0;}
@media (max-width:880px){
  .role-offer-pin{height:auto; margin-top:10vh;}
  .role-offer-pin .role-offer{position:static; height:auto;}
}

/* the job card sits straight, on one type scale: title 2.25x the values, sub and labels a step below them */
.job-card, .job-card.is-in{transform:none;}
.job-card-title{margin-top:26px; font-size:clamp(30px, 2.5vw, 38px); letter-spacing:-.005em;}
.job-card-sub{margin-top:8px; font-size:15px;}
.job-card-facts{margin-top:24px; padding-top:20px; gap:20px 24px;}
.job-card-facts dt{margin-bottom:4px; font-size:12.5px; letter-spacing:.01em;}
.job-card-facts dd{font-size:16px; line-height:1.4;}
.job-card-cta{margin-top:28px; font-size:16px;}

/* phones: the card stack (app.js) — a segmented bar the width of the card (past and current filled; the six personas,
   not the purple card), "Swipe →" under it until the first swipe, and a soft shadow between the cards */
.deck-dots, .deck-hint{display:none; position:absolute; z-index:3; pointer-events:none; opacity:0;}
.scene.is-stack .deck-dots{display:flex; gap:5px;}
.deck-dots i{flex:1; height:3px; border-radius:2px; background:var(--midnight-900); opacity:.15; transition:opacity .3s;}
.deck-dots i.on, .deck-dots i.past{opacity:.85;}
.deck-dots i:last-child{display:none;}
.scene.is-stack .card-inner{box-shadow:0 12px 32px -8px rgba(12,8,64,.28);}
.deck-hint{left:0; right:0; margin:0; text-align:center; font-size:13px; letter-spacing:.01em; color:var(--ink-55); transition:opacity .4s;}
.scene.is-stack .deck-hint{display:block;}
.deck-hint span{display:inline-block; animation:hint-nudge 1.6s cubic-bezier(.35,0,0,1) infinite;}
@keyframes hint-nudge{0%, 100%{transform:none;} 50%{transform:translateX(5px);}}
@media (prefers-reduced-motion: reduce){ .deck-hint span{animation:none;} }

/* "We're hiring": the box asks the question, so the answer is a button */
.bx-cta{margin-top:24px;}