/* The Deploy Shop: the well-kept board. Tokens first; everything below reads them. */
@font-face { font-family: "League Spartan"; src: url(/assets/fonts/league-spartan-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(/assets/fonts/figtree-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(/assets/fonts/figtree-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --bg: #E8EDF3;
  --surface: #F5F7FA;
  --paper: #FFFFFF;
  --ink: #0B1D3A;
  --muted: #4A5A73;
  --accent: #1A6FDB;
  --accent-strong: #1460C4;
  --accent-ink: #FFFFFF;
  --navy: #0B1D3A;
  --navy-2: #13305C;
  --navy-3: #0E2445;
  --ice: #BFD6F6;
  --sky: #8DB9F2;
  --mist: #DCE7F7;
  --brand-blue: #1F7AE6;
  --ink-on-dark: #F2F6FC;
  --muted-on-dark: #B9CCE8;

  --p1: #0B1D3A; --p2: #13305C; --p3: #1D4C8F; --p4: #1A6FDB; --p5: #BFD6F6;

  --font-display: "League Spartan", "Arial Black", system-ui, sans-serif;
  --font-text: "Figtree", system-ui, sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 0.95rem + 1vw, 2.125rem);
  --step-head: clamp(2.25rem, 1.2rem + 3.6vw, 5.5rem);
  --step-name: clamp(6.5rem, 14.4vw, 17rem);

  --gap: 8px;
  --margin: clamp(16px, 1.3vw, 20px);
  --pad: clamp(18px, 1.6vw, 24px);
  --section: clamp(4rem, 7vw, 8.5rem);
  --radius: 6px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
  --t-open: 1200ms;
  --stagger-line: 90ms;
  --stagger-item: 70ms;

  /* the scene's tokens */
  --ground: var(--bg);
}

/* ---------- the scroll-scene stage (was scenes/stage.css) ----------
   Without .is-live (no script, reduced motion) a scene is an ordinary section showing its finished
   composition. With it, the section is (hold + 1) screens tall and the stage sticks for the hold. */
.scene { position: relative; }
.scene > .scene-stage { position: relative; }
html.js .scene.is-live { height: calc((var(--hold, 2) + 1) * 100svh); }
html.js .scene.is-live > .scene-stage { position: sticky; top: 0; height: 100svh; overflow: clip; contain: layout paint; }
.scene.is-live [data-move] { will-change: transform, opacity; }
html.is-smooth { scroll-behavior: auto; }
html.is-smooth body { overscroll-behavior: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .scene.is-live { height: auto; }
  html.js .scene.is-live > .scene-stage { position: relative; height: auto; }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: var(--step-body); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
img, video, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:target, section[id] { scroll-margin-top: 72px; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; line-height: 0.95; text-wrap: balance; }
p { text-wrap: pretty; }
strong { font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { padding-inline: var(--margin); }
.head { font-size: var(--step-head); letter-spacing: -0.04em; line-height: 0.92; }
.skip { position: absolute; left: var(--margin); top: -100px; z-index: 50; background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; border-radius: var(--radius); }
.skip:focus { top: var(--margin); }

/* ---------- controls ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0 1.5rem; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius); font-weight: 600; text-decoration: none; white-space: nowrap; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
.button:active { transform: scale(0.97); }
.button--paper { background: var(--paper); color: var(--ink); }
.button--small { min-height: 2.5rem; padding: 0 1rem; font-size: var(--step-small); }
.link, .link-plain { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; transition: text-decoration-color var(--t-hover) ease; }
.link { text-decoration-color: transparent; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--accent-strong); }
  .button--paper:hover { background: var(--mist); }
  .link:hover { text-decoration-color: currentColor; }
}
.field { width: 100%; min-height: 3.25rem; padding: 0.7rem 1rem; background: var(--paper); color: var(--ink); border: 0; border-radius: var(--radius); font-size: max(1rem, var(--step-body)); }

/* ---------- tiles ---------- */
.tile { background: var(--surface); border-radius: var(--radius); padding: var(--pad); }

/* =========================================================
   HERO: the board, and the box built under it
   ========================================================= */
.hero > .scene-stage { background: var(--bg); }
.board { position: relative; z-index: 1; height: 100svh; min-height: 620px; padding: var(--margin); display: grid; gap: var(--gap); grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 64px minmax(0, 1fr); pointer-events: none; }
.board > *, .board a { pointer-events: auto; }

.tile--name { grid-column: 1 / -1; height: clamp(124px, 12.2vw, 196px); padding: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--paper); }
.name { font-size: var(--step-name); line-height: 0.8; letter-spacing: -0.05em; white-space: nowrap; color: var(--ink); transform: translateY(0.06em); }
.name__deploy { color: var(--brand-blue); }
.name__what { display: none; }

.board__links { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.tile--link { display: block; padding: 18px 20px; font-weight: 600; text-decoration: none; background: var(--surface); transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.tile--link:active, .acc__tab:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .tile--link:hover { background: var(--navy); color: var(--ink-on-dark); } }

.board__left { grid-column: 1 / 3; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--gap); min-height: 0; }
.tile--photo { padding: 0; overflow: hidden; background: var(--navy); min-height: 0; }
.tile--photo img { width: 100%; height: 100%; object-fit: cover; }
.tile--facts { font-size: var(--step-small); line-height: 1.35; display: grid; gap: 0.55rem; background: var(--paper); }
.tile--facts li { font-weight: 600; }

.board__centre { grid-column: 3 / 11; position: relative; min-height: 0; }
.tile--window { position: absolute; inset: 0; padding: 0; overflow: hidden; background: #DCE5F1; }
.window__poster { width: 100%; height: 100%; object-fit: cover; transition: opacity 400ms ease; }
.tile--statement { position: absolute; left: 0; bottom: 0; width: min(62%, 40rem); background: var(--bg); border-radius: 0 var(--radius) 0 var(--radius); padding: 28px 28px 24px 24px; }
.tile--statement p { font-size: var(--step-lead); line-height: 1.18; letter-spacing: -0.01em; font-weight: 600; max-width: 30ch; }

.board__rail { grid-column: 11 / 13; display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: var(--gap); min-height: 0; }
.rail { font-size: var(--step-small); line-height: 1.3; display: flex; flex-direction: column; gap: 0.2rem; }
.rail strong { font-family: var(--font-display); font-size: var(--step-lead); letter-spacing: -0.03em; line-height: 1; }
.rail--1 { background: var(--mist); }
.rail--2 { background: var(--ice); }
.rail--3 { background: var(--sky); }
.rail--4 { background: var(--navy-2); color: var(--ink-on-dark); }
.rail--action { padding: 0; background: var(--accent); transition: background-color var(--t-hover) ease; }
.rail--action .action { display: flex; height: 100%; padding: var(--pad); color: var(--accent-ink); font-family: var(--font-display); font-size: var(--step-lead); line-height: 1; letter-spacing: -0.03em; text-decoration: none; align-items: flex-end; transition: transform var(--t-press) var(--ease-out); }
.rail--action .action:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .rail--action:hover { background: var(--accent-strong); } }

/* the 3D layer: only when the scene is live */
.build { display: none; }
.beats { position: relative; z-index: 2; padding: 0 var(--margin) var(--margin); }
.beats__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap); }
.beat { background: var(--surface); border-radius: var(--radius); padding: var(--pad); }
.beat .beat__name { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; line-height: 0.95; font-size: var(--step-lead); margin-bottom: 0.4rem; }
.beat p { font-size: var(--step-small); line-height: 1.4; }
.beats__meta { display: none; }

html.js .hero.is-live .build { display: block; position: absolute; inset: 0; z-index: 0; clip-path: inset(var(--w-top, 0) var(--w-right, 0) var(--w-bottom, 0) var(--w-left, 0) round var(--radius)); }
html.js .hero.is-live .build__canvas { width: 100%; height: 100%; }
html.js .hero.is-live .tile--window { background: transparent; }
html.js .hero.is-live.is-ready .window__poster { opacity: 0; }
/* with motion on, the 3D fades in over the window's own colour; the finished-scene poster is for reduced motion */
@media (prefers-reduced-motion: no-preference) { html.js .window__poster { opacity: 0; } }
html.js .hero.is-live .build__canvas { opacity: 0; transition: opacity 600ms var(--ease-out); }
html.js .hero.is-live.is-ready .build__canvas { opacity: 1; }
html.js .hero.is-live .board { min-height: 0; }

.build__labels { position: absolute; inset: 0; pointer-events: none; }
.dept-label { position: absolute; left: 0; top: 0; padding: 0.45rem 0.7rem 0.4rem; border-radius: var(--radius); background: var(--paper); color: var(--ink); font-size: var(--step-small); font-weight: 600; line-height: 1; white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.hero.is-dark .dept-label { background: var(--navy-2); color: var(--ink-on-dark); }

html.js .hero.is-live .beats { position: absolute; right: var(--margin); bottom: var(--margin); width: min(34rem, calc(100% - 2 * var(--margin))); padding: 0; opacity: 0; visibility: hidden; transition: opacity 300ms ease, visibility 0s linear 300ms; }
html.js .hero.is-live.is-open .beats { opacity: 1; visibility: visible; transition: opacity 300ms ease; }
html.js .hero.is-live .beats__list { display: grid; grid-template-columns: 1fr; grid-template-areas: "b"; background: var(--paper); border-radius: var(--radius) var(--radius) 0 0; }
html.js .hero.is-live .beat { grid-area: b; background: transparent; padding: 28px 28px 8px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 260ms var(--ease-out), transform 360ms var(--ease-out), visibility 0s linear 260ms; }
html.js .hero.is-live.is-open .beat.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 260ms var(--ease-out), transform 360ms var(--ease-out); }
html.js .hero.is-live .beat .beat__name { font-size: var(--step-head); margin-bottom: 0.6rem; }
html.js .hero.is-live .beat p { font-size: var(--step-body); line-height: 1.4; max-width: 30ch; }
html.js .hero.is-live .beats__meta { display: flex; align-items: center; gap: 1rem; padding: 12px 28px 26px; background: var(--paper); border-radius: 0 0 var(--radius) var(--radius); font-size: var(--step-small); font-weight: 600; font-variant-numeric: tabular-nums; }
.beats__bar { flex: 1; height: 6px; background: var(--mist); border-radius: 3px; overflow: hidden; }
.beats__bar > span { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--bar, 0)); }

/* =========================================================
   INTRO: lead line over four columns
   ========================================================= */
.intro { padding-block: var(--section) calc(var(--section) * 0.6); }
.intro__lead { font-size: var(--step-lead); line-height: 1.2; letter-spacing: -0.015em; max-width: none; font-weight: 400; }
.intro__cols { margin-top: 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: start; }
.intro__cols p { font-size: var(--step-body); line-height: 1.5; }
.intro__cols strong { color: var(--ink); }

/* =========================================================
   PROCESS: accordion of tinted panels
   ========================================================= */
.process { padding-block: calc(var(--section) * 0.5) var(--section); }
.process__intro { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: end; margin-bottom: 40px; }
.process__intro h2 { grid-column: 1 / 6; }
.process__intro p { grid-column: 7 / 12; font-size: var(--step-body); max-width: 48ch; }
.acc { display: flex; height: 560px; border-radius: var(--radius); overflow: hidden; }
.acc__panel { position: relative; flex: 0 0 76px; background: var(--tone); color: var(--tone-ink); overflow: hidden; transition: flex-basis 450ms var(--ease-in-out), flex-grow 450ms var(--ease-in-out); }
.acc__panel.is-open { flex: 1 1 auto; }
.acc__tab { position: absolute; inset: 0; width: 100%; display: flex; align-items: flex-end; justify-content: flex-start; padding: 22px 0 26px; text-align: left; color: inherit; z-index: 1; }
.acc__tab span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-display); font-size: var(--step-lead); letter-spacing: -0.02em; padding-inline: 26px; }
.acc__panel.is-open .acc__tab { pointer-events: none; opacity: 0; visibility: hidden; }
.acc__body { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 40px; opacity: 0; visibility: hidden; transition: opacity 300ms ease, visibility 0s linear 300ms; min-width: 760px; }
.acc__panel.is-open .acc__body { opacity: 1; visibility: visible; transition: opacity 420ms ease 160ms; }
.acc__name { font-size: var(--step-head); grid-column: 1; grid-row: 1; }
.acc__body p { grid-column: 1; grid-row: 2; align-self: end; font-size: var(--step-body); line-height: 1.5; max-width: 36ch; }
.acc__body img { grid-column: 2; grid-row: 1 / 3; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
@media (hover: hover) and (pointer: fine) { .acc__panel:not(.is-open):hover { filter: brightness(1.12); } }
.acc__panel { transition: flex-basis 450ms var(--ease-in-out), flex-grow 450ms var(--ease-in-out), filter var(--t-hover) ease; }

/* =========================================================
   SERVICES: statement cell, dark rows
   ========================================================= */
.services { display: grid; grid-template-columns: 1fr 1fr; min-height: 90svh; }
.services__cell { position: sticky; top: 60px; height: calc(100svh - 60px); align-self: start; background: var(--surface); padding: 56px var(--margin) 56px var(--margin); display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.services__title { font-size: var(--step-head); line-height: 0.9; letter-spacing: -0.045em; display: flex; flex-direction: column; }
.services__title span { display: block; }
.services__mid { align-self: flex-end; }
.services__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.services__foot p { max-width: 30ch; font-size: var(--step-body); }
.services__tools { display: grid; gap: 0.9rem; }
.services__tools p { font-size: var(--step-small); font-weight: 600; color: var(--muted); }
.services__tools ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.services__tools li { background: var(--paper); border-radius: var(--radius); padding: 14px 16px; font-size: var(--step-small); font-weight: 600; }
.services__rows { display: grid; grid-auto-rows: 1fr; background: var(--navy); color: var(--ink-on-dark); }
.srow { display: grid; grid-template-columns: 2fr 3fr; gap: 10px 24px; padding: 28px; align-items: start; }
.srow .srow__terms { grid-column: 2; }
.srow:nth-child(even) { background: var(--navy-3); }
.srow h3 { font-size: var(--step-lead); line-height: 1; letter-spacing: -0.03em; }
.srow p { font-size: var(--step-body); line-height: 1.5; color: var(--ink-on-dark); }
.srow .srow__terms { font-size: var(--step-small); color: var(--muted-on-dark); }

/* =========================================================
   THE DEPLOYMENT SLIP (the live thing)
   ========================================================= */
.slip-section { padding-block: var(--section); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.slip-section__intro { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: end; margin-bottom: 40px; }
.slip-section__intro h2 { grid-column: 1 / 6; }
.slip-section__intro p { grid-column: 7 / 12; font-size: var(--step-body); max-width: 48ch; }
.slip-form { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.slip-form__dept { grid-column: 1 / 8; background: var(--paper); display: flex; flex-direction: column; }
.chips { display: flex; flex-wrap: wrap; gap: var(--gap); }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; min-height: 3rem; padding: 0 1.2rem; border-radius: var(--radius); background: var(--mist); font-weight: 600; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.chips input:checked + span { background: var(--navy); color: var(--ink-on-dark); }
.chips input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 3px; }
.chips label:active span { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .chips input:not(:checked) + span:hover { background: var(--ice); } }
.slip-form__task { font-size: var(--step-head); line-height: 0.95; letter-spacing: -0.04em; max-width: 14ch; margin-bottom: auto; padding-bottom: 2rem; }
.slip-form__dials { grid-column: 1 / 8; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; background: var(--paper); }
.dial { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0.6rem 1rem; }
.dial span { font-size: var(--step-small); color: var(--muted); font-weight: 600; }
.dial output { font-family: var(--font-display); font-size: var(--step-head); line-height: 0.8; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.dial input { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); height: 28px; cursor: pointer; }
.slip { grid-column: 8 / -1; grid-row: 1 / 3; background: var(--navy); color: var(--ink-on-dark); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 22px; }
.slip__head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; background: none; }
.slip__head img { width: 52px; height: auto; background: var(--paper); border-radius: 4px; padding: 6px; }
.slip__title { font-size: var(--step-lead); letter-spacing: -0.03em; }
.slip__lines { display: grid; gap: 4px; }
.slip__lines div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 10px 14px; background: var(--navy-2); border-radius: 4px; }
.slip__lines dt { color: var(--muted-on-dark); font-size: var(--step-small); }
.slip__lines dd { font-weight: 600; }
.slip__hours { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; font-size: var(--step-body); font-weight: 600; }
.slip__big { font-family: var(--font-display); font-size: clamp(4rem, 2rem + 6vw, 8.5rem); line-height: 0.8; letter-spacing: -0.05em; color: var(--paper); font-variant-numeric: tabular-nums; }
.slip__math { font-size: var(--step-small); color: var(--muted-on-dark); }
.slip__flag { font-size: var(--step-small); font-weight: 600; color: var(--ink); background: var(--ice); padding: 8px 12px; border-radius: 4px; }
.slip .button { align-self: flex-start; }
.slip__note { font-size: var(--step-small); color: var(--muted-on-dark); margin-top: auto; }
.slip.is-updated .slip__big { animation: slip-tick 420ms var(--ease-out); }
@keyframes slip-tick { from { opacity: 0.4; transform: translateY(6px); } }

/* =========================================================
   WORK: stacked folders with tabs
   ========================================================= */
.work { padding-block: calc(var(--section) * 0.4) calc(var(--section) * 0.5); }
.work > .head { margin-bottom: 24px; }
.work__lede { max-width: 56ch; font-size: var(--step-body); margin-bottom: 40px; color: var(--muted); }
.folders { padding-inline: var(--margin); }
.folder { --strip: 64px; position: relative; min-height: 0; margin-top: 0; background: var(--band); color: var(--band-ink); border-radius: var(--radius) var(--radius) 0 0; }
.folder + .folder { margin-top: 40px; }
.folder__strip { height: var(--strip); display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 0 24px 0 20px; }
.folder__tab { position: relative; top: -14px; align-self: flex-start; display: inline-flex; align-items: center; height: 52px; padding: 4px 34px 0; margin-top: -10px; background: var(--tab); color: var(--tab-ink); font-size: var(--step-lead); clip-path: polygon(0 100%, 14px 0, calc(100% - 14px) 0, 100% 100%); border-radius: 0; }
.folder__cat { align-self: center; font-size: var(--step-small); font-weight: 600; }
.folder__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding: 24px 24px 40px; }
.folder__shot { grid-column: 1 / 8; align-self: start; }
.folder__text { grid-column: 9 / 13; display: flex; flex-direction: column; gap: 24px; }
.folder__text p { font-size: var(--step-body); line-height: 1.5; }
.folder__fact { font-size: var(--step-lead) !important; line-height: 1.15 !important; letter-spacing: -0.01em; }
.folder__fact strong { display: block; font-family: var(--font-display); font-size: var(--step-head); letter-spacing: -0.04em; line-height: 0.9; }

/* interface fragments (real UI, keeps its own conventions) */
[data-ui] .ui { height: 100%; background: var(--paper); color: var(--ink); border-radius: var(--radius); overflow: hidden; font-size: 14px; line-height: 1.35; display: flex; flex-direction: column; }
.ui__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 14px 18px; background: var(--surface); border-bottom: 1px solid #DDE3EB; } /* taste-skill-ignore: real UI fragment */
.ui__bar span { color: var(--muted); font-size: 13px; }
.ui__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #DDE3EB; border-bottom: 1px solid #DDE3EB; } /* taste-skill-ignore: real UI fragment */
.ui__kpis div { background: var(--paper); padding: 14px 18px; }
.ui__kpis b { display: block; font-size: clamp(1.25rem, 0.8rem + 1vw, 1.75rem); font-family: var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ui__kpis span, .ui__stats dt { color: var(--muted); font-size: 13px; }
.ui__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ui__table th { text-align: left; font-weight: 600; color: var(--muted); font-size: 13px; padding: 10px 18px; border-bottom: 1px solid #DDE3EB; } /* taste-skill-ignore: real table */
.ui__table td { padding: 9px 18px; border-bottom: 1px solid #EEF1F5; /* taste-skill-ignore: real table */ font-variant-numeric: tabular-nums; }
.mood { display: block; width: 120px; height: 8px; border-radius: 4px; background: var(--mist); position: relative; overflow: hidden; }
.mood::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--pos) * 100%); border-radius: 4px; background: #2E9E6A; }
.mood--mid::after { background: #D9A23A; }
.mood--neg::after { background: #D9534F; }
.ui__list { display: grid; }
.ui__list li { display: grid; grid-template-columns: 9rem 1fr auto; gap: 14px; padding: 12px 18px; border-bottom: 1px solid #EEF1F5; align-items: start; } /* taste-skill-ignore: real UI fragment */
.ui__list b { font-weight: 600; }
.ui__list em { font-style: normal; font-size: 13px; padding: 2px 8px; border-radius: 4px; background: var(--mist); }
.ui--chat { padding-bottom: 8px; }
.msg { padding: 12px 18px 4px; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; }
.msg b { font-weight: 600; }
.msg__time { color: var(--muted); font-size: 12px; align-self: center; }
.msg p { grid-column: 1 / -1; }
.msg--reply { margin-left: 28px; border-left: 3px solid var(--ice); }
[data-ui] .ui--cards { background: #10131A; color: #E9EDF5; padding: 16px; gap: 10px; justify-content: center; }
.card { background: #1A1F2B; border-left: 4px solid var(--brand-blue); border-radius: 4px; padding: 14px 16px; display: grid; gap: 4px; }
.card b { font-weight: 600; }
.card span { color: #B8C2D6; }
.ui__meter { margin: 28px 18px 8px; height: 18px; background: var(--mist); border-radius: 9px; overflow: hidden; }
.ui__meter span { display: block; height: 100%; width: var(--w); background: var(--accent); }
.ui__stats { display: grid; grid-template-columns: repeat(3, 1fr); padding: 18px; gap: 12px; }
.ui__stats dd { font-family: var(--font-display); font-size: clamp(1.5rem, 1rem + 1.2vw, 2.25rem); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ui__note { padding: 0 18px 18px; color: var(--muted); }
.tree { padding: 12px 18px; }
.tree ul { padding-left: 22px; }
.tree li { padding: 4px 0; }
.tree__dir::before { content: ""; display: inline-block; width: 14px; height: 11px; margin-right: 8px; border-radius: 2px; background: var(--sky); vertical-align: -1px; }
.tree li:not(.tree__dir)::before { content: ""; display: inline-block; width: 10px; height: 13px; margin-right: 8px; border-radius: 2px; background: var(--mist); vertical-align: -2px; }

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee { overflow: clip; padding-block: clamp(2rem, 4vw, 4rem); background: var(--navy); color: var(--ink-on-dark); }
.marquee__track { display: flex; width: max-content; background: var(--navy); }
.marquee__track span { flex: none; padding-right: 0.6em; font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 1.5rem + 6vw, 9rem); line-height: 1; letter-spacing: -0.045em; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: marquee 60s linear infinite; }
  .marquee:hover .marquee__track, .marquee.is-paused .marquee__track { animation-play-state: paused; }
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* =========================================================
   FIGURES: photograph with figure tiles
   ========================================================= */
.figures { padding-block: var(--section) 0; }
.figures > .head { margin-bottom: 32px; }
.figures__mosaic { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; height: min(66vw, 92svh); }
.figures__photo { grid-row: 1 / 3; position: relative; overflow: clip; background: var(--navy); margin: 0; }
.figures__photo video { width: 100%; height: 100%; object-fit: cover; display: block; }
.figures__photo figcaption { position: absolute; left: var(--margin); bottom: var(--margin); background: var(--paper); color: var(--ink); padding: 10px 14px; border-radius: var(--radius); font-size: var(--step-small); font-weight: 600; }
.figures__tile { padding: 28px; display: flex; flex-direction: column; gap: 0.6rem; }
.figures__tile p:not(.figures__num) { font-size: var(--step-body); line-height: 1.4; }
.figures__tile--a { background: var(--accent); color: var(--accent-ink); }
.figures__tile--b { background: var(--ice); color: var(--ink); }
.figures__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(3.5rem, 1.5rem + 5vw, 7rem); line-height: 0.85; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }

/* =========================================================
   FOUNDERS: portraits on colour tiles
   ========================================================= */
.founders { padding-block: var(--section) calc(var(--section) * 0.75); }
.founders__title { font-size: var(--step-head); margin-bottom: 32px; }
.founders__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.portrait { aspect-ratio: 4 / 5; background: var(--tint); border-radius: var(--radius); overflow: hidden; }
.portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; }
.bio { background: var(--surface); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; }
.bio--b { background: var(--navy); color: var(--ink-on-dark); }
.bio h3 { font-size: var(--step-lead); letter-spacing: -0.03em; }
.bio__role { margin-top: 0.4rem; font-size: var(--step-small); color: var(--muted); }
.bio--b .bio__role { color: var(--muted-on-dark); }
.bio p:last-child { margin-top: auto; padding-top: 2rem; font-size: var(--step-body); line-height: 1.5; }

/* =========================================================
   FAQ: a band per question
   ========================================================= */
.faq__head { background: var(--accent); color: var(--accent-ink); display: flex; align-items: flex-end; padding: clamp(40px, 5vw, 80px) var(--margin) clamp(24px, 3vw, 44px) var(--margin); }
.faq__head h2 { font-size: clamp(3rem, 1rem + 7vw, 8rem); letter-spacing: -0.05em; }
.qa { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding: 40px var(--margin) 40px var(--margin); background: var(--bg); }
.qa:nth-child(odd) { background: var(--surface); }
.qa h3 { grid-column: 1 / 6; font-size: var(--step-lead); line-height: 1.05; letter-spacing: -0.03em; }
.qa p { grid-column: 7 / 13; font-size: var(--step-body); line-height: 1.5; max-width: 54ch; }

/* =========================================================
   CTA: the action tile
   ========================================================= */
.cta { display: grid; grid-template-columns: 1fr 4fr 1fr; gap: 12px; padding-block: var(--section); overflow-x: clip; }
.cta__flank--photo { margin-left: -56px !important; }
.cta__flank--colour { margin-right: -56px; }
.cta__flank, .cta__tile { height: 360px; border-radius: var(--radius); }
.cta__flank--photo { margin: 0; overflow: hidden; background: var(--navy); }
.cta__flank--photo img { width: 100%; height: 100%; object-fit: cover; }
.cta__flank--colour { background: var(--navy); }
.cta__tile { background: var(--accent); color: var(--accent-ink); padding: 40px; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.cta__tile h2 { font-size: var(--step-head); letter-spacing: -0.04em; }
.cta__tile p { font-size: var(--step-body); max-width: 52ch; }
.cta__form { display: flex; gap: var(--gap); max-width: 640px; }
.cta__form .field { flex: 1; }
.cta__status { font-size: var(--step-small); font-weight: 600; min-height: 1.4em; }

/* =========================================================
   FOOTER: the mark, built large
   ========================================================= */
.footer { background: var(--navy); color: var(--ink-on-dark); padding-top: var(--margin); padding-bottom: var(--margin); }
.blocks { display: flex; align-items: flex-end; gap: 4px; height: 34svh; min-height: 220px; }
.block { flex: 1 1 0; height: var(--h); background: var(--c, var(--accent)); border-radius: 4px; display: flex; align-items: flex-end; justify-content: center; overflow: clip; color: var(--navy); font-family: var(--font-display); font-weight: 700; font-size: clamp(2.5rem, 7vw, 8rem); line-height: 0.75; letter-spacing: -0.04em; padding-bottom: 0.08em; }
.block--gap { flex: 0 0 clamp(8px, 1.4vw, 24px); background: none; }
.block[data-l]::after { content: attr(data-l); }
.block--mark { flex: 1.6 1 0; background: var(--navy-2); align-items: center; padding: 10%; }
.block--mark img { width: 100%; height: auto; }
.footer__cols { margin-top: 56px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; font-size: var(--step-small); }
.footer__cols ul { grid-column: span 2; display: grid; gap: 0.5rem; }
.footer__contact { grid-column: 9 / 13; display: grid; gap: 0.5rem; }
.footer__credits { margin-top: 48px; font-size: var(--step-small); color: var(--muted-on-dark); max-width: 90ch; }
.footer__last { margin-top: 32px; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: var(--step-small); }

/* =========================================================
   motion helpers (content stays visible without JavaScript)
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out) calc(var(--i, 0) * var(--stagger-item)), transform 900ms var(--ease-out) calc(var(--i, 0) * var(--stagger-item)); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .shutter[data-reveal] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-in-out); }
  .js .shutter[data-reveal] img { transform: scale(1.12); transition: transform 1500ms var(--ease-soft); }
  .js .shutter[data-reveal].is-in { clip-path: inset(0); }
  .js .shutter[data-reveal].is-in img { transform: none; }
  .js .hero .board [data-out] { transition: none; }
}

/* =========================================================
   TABLET AND PHONE
   ========================================================= */
@media (max-width: 1100px) and (min-width: 768px) {
  .board__left { display: none; }
  .board__centre { grid-column: 1 / 10; }
  .board__rail { grid-column: 10 / 13; }
  .rail { font-size: 14px; }
  .rail strong { font-size: 1.25rem; }
  .rail--action .action { font-size: 1.25rem; }
}
@media (max-width: 1100px) {
  .intro__cols { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .services { grid-template-columns: 1fr; }
  .services__cell { position: relative; top: auto; height: auto; }
  .slip-form__dept, .slip-form__dials { grid-column: 1 / -1; }
  .slip { grid-column: 1 / -1; grid-row: auto; }
  .folder__shot { grid-column: 1 / -1; }
  .folder__text { grid-column: 1 / -1; }
  .founders__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  :root { --gap: 6px; --margin: 18px; }
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto minmax(0, 1fr) auto auto; min-height: 0; }
  .tile--name { height: auto; padding: 14px 0 12px; flex-direction: column; gap: 8px; }
  .name__what { display: block; font-size: 18px; font-weight: 600; color: var(--muted); text-align: center; }
  .name { font-size: 15.5vw; line-height: 0.86; white-space: normal; text-align: center; transform: none; }
  .board__links { grid-template-columns: repeat(2, 1fr); }
  .tile--link { padding: 12px 14px; font-size: var(--step-small); }
  .board__left { display: none; }
  .board__centre { grid-column: 1 / -1; min-height: 200px; }
  .tile--statement { position: relative; width: 100%; border-radius: var(--radius); background: var(--paper); padding: 16px; }
  .board__centre { display: flex; flex-direction: column; justify-content: flex-end; }
  .tile--statement p { font-size: var(--step-body); }
  .board__rail { grid-column: 1 / -1; grid-template-rows: 52px 52px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rail--action { grid-column: 1 / -1; }
  .rail { padding: 8px 6px; font-size: 0; justify-content: center; }
  .rail strong { font-size: 13px; font-family: var(--font-text); letter-spacing: 0; }
  .rail--action .action { font-size: 18px; padding: 0 16px; align-items: center; }
  .beats__list { grid-template-columns: 1fr; }
  html.js .hero.is-live .beat .beat__name { font-size: 2.5rem; }
  html.js .hero.is-live .beat { padding: 20px 20px 6px; }
  html.js .hero.is-live .beats__meta { padding: 10px 20px 18px; }

  .intro__cols { grid-template-columns: 1fr; margin-top: 40px; gap: 32px; }
  .process__intro, .slip-section__intro { grid-template-columns: 1fr; margin-bottom: 32px; }
  .process__intro h2, .process__intro p, .slip-section__intro h2, .slip-section__intro p { grid-column: 1; }
  .acc { flex-direction: column; height: auto; }
  .acc__panel, .acc__panel.is-open { flex: none; }
  .acc__tab { position: relative; height: 64px; padding: 0 20px; align-items: center; }
  .acc__tab span { writing-mode: horizontal-tb; transform: none; padding: 0; font-size: var(--step-body); }
  .acc__panel.is-open .acc__tab { display: none; }
  .acc__body { position: relative; inset: auto; min-width: 0; grid-template-columns: 1fr; padding: 24px 20px; gap: 16px; display: none; }
  .acc__panel.is-open .acc__body { display: grid; }
  .acc__name { font-size: 2.25rem; }
  .acc__body p { grid-row: auto; font-size: var(--step-body); }
  .acc__body img { grid-column: 1; grid-row: auto; aspect-ratio: 4 / 3; height: auto; }
  .services__cell { padding: 40px 20px; gap: 32px; }
  .services__title { font-size: 10vw; }
  .services__foot { flex-direction: column; align-items: flex-start; }
  .srow { grid-template-columns: 1fr; gap: 10px; padding: 24px 20px; }
  .srow .srow__terms { grid-column: 1; }
  .services__tools ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .services__tools li { padding: 10px 12px; }
  .slip-form__dials { grid-template-columns: 1fr; }
  .slip__lines div { grid-template-columns: 7.5rem 1fr; }
  .folder { position: relative; top: auto; min-height: 0; }
  .folder__strip { height: auto; flex-direction: column; align-items: flex-start; padding: 0 16px 8px; }
  .folder__tab { height: 40px; font-size: 20px; padding: 2px 24px 0; top: -10px; }
  .folder__body { padding: 8px 16px 28px; }
  .ui__list li { grid-template-columns: 1fr auto; }
  .ui__list li span { grid-column: 1 / -1; grid-row: 2; }
  .mood { width: 70px; }
  .figures__mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto 50vw; height: auto; }
  .figures__photo { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 4 / 3; }
  .figures__tile { padding: 16px; }
  .figures__num { font-size: 13vw; }
  .figures__tile p:not(.figures__num) { font-size: var(--step-small); }
  .figures__tile br { display: none; }
  .founders__grid { grid-template-columns: 1fr; gap: 8px; }
  .portrait { aspect-ratio: 1 / 1; }
  .portrait img { object-position: 50% 20%; }
  .bio { padding: 22px; margin-bottom: 16px; }
  .faq__head { padding-left: 20px; }
  .faq__head h2 { font-size: 13vw; }
  .qa { grid-template-columns: 1fr; padding: 28px 20px; gap: 10px; }
  .qa h3, .qa p { grid-column: 1; }
  .qa h3 { font-size: 22px; }
  .qa p { font-size: var(--step-body); }
  .cta { grid-template-columns: 1fr 1fr; margin-inline: 0; padding-inline: var(--margin); }
  .cta__tile { grid-column: 1 / -1; grid-row: 1; height: auto; min-height: 300px; padding: 28px 22px; }
  .cta__flank { height: 120px; }
  .cta__form { flex-direction: column; }
  .blocks { flex-wrap: wrap; height: auto; min-height: 0; gap: 4px; }
  .block { flex: 0 0 calc((100% - 20px) / 6); height: calc(var(--h) * 86px); font-size: 15vw; }
  .block--gap { flex: 0 0 100%; height: 0; }
  .block--mark { flex: 0 0 calc((100% - 20px) / 6 * 2 + 4px); height: 86px; padding: 6%; }
  .footer__cols ul { grid-column: span 6; }
  .footer__contact { grid-column: 1 / -1; }
}

/* poster capture (?poster): the finished scene alone, for the no-script and reduced-motion poster */
html.poster-mode .board, html.poster-mode .beats, html.poster-mode main, html.poster-mode footer, html.poster-mode .skip { display: none; }
html.poster-mode { overflow: hidden; }

.only-phone { display: none; }
@media (max-width: 767px) { .only-phone { display: inline; } }

/* the bar: appears once the hero has passed */
.bar { position: fixed; z-index: 40; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 24px; padding: 10px var(--margin); background: var(--paper); transform: translateY(-100%); transition: transform 300ms var(--ease-out); }
.bar.is-shown { transform: none; }
.bar__mark { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.03em; text-decoration: none; }
.bar__mark img { width: 34px; height: auto; }
.bar__links { display: flex; gap: 22px; margin-left: auto; font-size: var(--step-small); font-weight: 600; }
.bar__links a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.25em; transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .bar__links a:hover { text-decoration-color: currentColor; } }
@media (max-width: 1000px) { .bar__links { display: none; } .bar .button { margin-left: auto; } }
@media (max-width: 420px) { .bar__mark span { display: none; } }
@media (prefers-reduced-motion: reduce) { .bar { transition: none; } }
@media (max-width: 767px) {
  .cta__flank { display: none; }
  .rail:not(.rail--action) { display: none; }
  .board__rail { grid-template-rows: 56px; }
}

/* 404 */
.lost { min-height: 100svh; display: grid; place-items: center; padding-block: 96px 40px; }
.lost__tile { width: min(100%, 44rem); background: var(--navy); color: var(--ink-on-dark); border-radius: var(--radius); padding: clamp(28px, 5vw, 56px); display: grid; gap: 18px; justify-items: start; }
.lost__code { font-family: var(--font-display); font-weight: 700; font-size: clamp(4rem, 2rem + 8vw, 9rem); line-height: 0.8; letter-spacing: -0.05em; color: var(--brand-blue); }
.lost h1 { font-size: var(--step-head); }
.lost p:not(.lost__code) { color: var(--muted-on-dark); max-width: 40ch; }
.bar__mark + .button { margin-left: auto; }