/* =========================================================
   Pleiad website design Mk. 6
   The structure and the three grounds (ink, paper, blue) come
   from Mark 1. The design file language (selection frames,
   handles, layer tabs, dimension chips, ruler, cursors) comes
   from Mark 2. One rule joins them: the ground chooses the
   colour of the tool chrome. White on ink and blue, brand blue
   on paper. Handles are always white with a blue edge.
   ========================================================= */

/* RL Madena (Roughlines Type, SIL OFL 1.1, licence beside the file) */
@font-face { font-family: 'RL Madena'; src: url('../assets/fonts/RL-Madena.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
/* Mk. 7.6: Instrument Serif italic again (the same Google Fonts files the page already loads), with its line metrics
   pulled in to the letters. The font keeps .99em above the baseline and .31em below it, but the letters only reach
   .75em up and .22em down, so a background on it stood .12em proud of the line box and covered the descenders of
   the line above. Only the menu highlight uses it (15b). */
@font-face { font-family: 'Instrument Serif Mark'; font-style: italic; font-weight: 400; font-display: swap; ascent-override: 83%; descent-override: 28%; line-gap-override: 0%; src: url(https://fonts.gstatic.com/s/instrumentserif/v5/jizHRFtNs2ka5fXjeivQ4LroWlx-6zAjjH7Motmp5g.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Serif Mark'; font-style: italic; font-weight: 400; font-display: swap; ascent-override: 83%; descent-override: 28%; line-gap-override: 0%; src: url(https://fonts.gstatic.com/s/instrumentserif/v5/jizHRFtNs2ka5fXjeivQ4LroWlx-6zAjgn7Motmp5r61.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- 1. TOKENS ---------- */
:root {
  --blue: #0748FE;
  --blue-700: #01227F;
  --blue-600: #012FB2;
  --blue-500: #013DE5;
  --blue-300: #4D7CFE;
  --blue-200: #80A1FE;
  --blue-100: #B3C7FF;
  /* 0.08 the AI cursor characters, see AI-CURSORS.md */
  --ai-truman: #0748FE; --ai-truman-ink: #FFFFFF;
  --ai-estella: #B3C7FF; --ai-estella-ink: #090D1A;
  --dark: #1F2937;

  --ink: #090D1A;
  --ink-2: #0F1526;
  --ink-3: #171F36;
  --paper: #F7F7F4;
  --paper-2: #EFEFEA;
  --soft: #EEF3FF;
  --line: rgba(31, 41, 55, 0.14);
  --line-2: rgba(31, 41, 55, 0.08);
  --line-ink: rgba(247, 247, 244, 0.14);

  --text: var(--dark);
  --text-muted: rgba(31, 41, 55, 0.68); /* Mk. 7 (4.1): .62 measured 4.2:1 on paper; .68 clears 4.5 */
  --text-on-ink: #F2F3F7;
  --text-on-ink-muted: rgba(242, 243, 247, 0.58);
  --ink-soft: #4A5568;
  --ink-faint: #5B6675;
  --ghost: #8A94A6;
  --grn: #22C55E;
  /* Mk. 7 (3.3, checklist 0.02): the secondary accent, the boulder's orange. --accent holds 4.4:1 on paper and
     4.1:1 on ink (white on it 4.7:1); --accent-200 is the light one for ink and blue grounds (9.5:1 on ink,
     3.1:1 on blue, so large type only there). Never a near duplicate: every orange on the site reads these two. */
  --accent: #C64D15;
  --accent-200: #F5A35C;
  --pink: var(--accent-200); /* 2.27: the old pink callout colour now points at the accent */
  /* Mk. 7 (3.4, revised again 16 Sep): every handwritten note is a Pleiad blue. The red pen is gone, including on
     the notes that ask for an interaction and on the warning by the boulder. `.hand--do` in the markup still marks
     those notes and --pen-alert still feeds them, so giving them their own colour later is one value. */
  --pen: var(--blue);
  --pen-alert: var(--blue);

  --serif: 'Instrument Serif', 'Iowan Old Style', 'Times New Roman', serif;
  --madena: 'RL Madena', 'Instrument Serif', 'Times New Roman', serif;
  --times: 'Times New Roman', 'Tinos', Times, serif; /* set italic; Tinos only loads where Times is missing */
  --sans: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --hand: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-strong: cubic-bezier(0.76, 0, 0.24, 1);
  --e-soft: cubic-bezier(.2, .7, .2, 1);
  --e-ui: cubic-bezier(.2, .8, .2, 1);
  --e-lift: cubic-bezier(.2, .85, .25, 1);
  --e-pop: cubic-bezier(.3, 1.5, .5, 1);
  --e-pop-hi: cubic-bezier(.3, 1.7, .5, 1);
  --e-wipe: cubic-bezier(.6, .1, .2, 1);
  --e-ink: cubic-bezier(.65, 0, .35, 1);
  --e-accord: cubic-bezier(.5, 0, .15, 1);

  --pad: clamp(20px, 4vw, 56px);
  --max: 1560px;
  --grid-cell: 32px;
  --grid-line: rgba(7, 72, 254, 0.09);
  --grid-major: rgba(7, 72, 254, 0.16);

  /* tool chrome on the dark grounds */
  --tool: #FFFFFF;
  --tool-ink: #1F2937;
  --tool-line: rgba(255, 255, 255, 0.95);
}
[data-ground="paper"] { --tool: #0748FE; --tool-ink: #FFFFFF; --tool-line: #0748FE; }
[data-ground="ink"] { --pen: var(--blue-100); --pen-alert: var(--blue-100); }
[data-ground="blue"] { --pen: var(--blue-100); --pen-alert: var(--blue-100); }
/* the note that asks for the interaction, and the red pen warning that is one */
.hand--do, .egg.hand { --pen: var(--pen-alert); }

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; } /* 3.14, 3.15: links jump, they do not glide */
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
img { max-width: 100%; display: block; }
svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, dl, dd, figure, blockquote { margin: 0; }
strong { font-weight: 600; }
::selection { background: var(--blue); color: #fff; }
/* Keyboard focus (A4): a blue ring inside a white one, so it reads on
   every ground, ink, paper and brand blue alike. */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; box-shadow: 0 0 0 7px #fff; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 9999; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; font: 600 13px var(--sans); }
.skip:focus { left: 0; }

/* Film grain over everything: fixed, blended, tiling SVG noise. */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 61; pointer-events: none;
  opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.lab { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; line-height: 1.5; }
/* Section titles: the mono label that names each section, sized up so it
   reads as a title rather than a caption. Mk. 6: 50% larger (was 14/1.15vw/17), then 30% smaller (was 21/1.725vw/25.5), then 10% bigger (was 14.7/1.2075vw/17.85). */
.sect-head .lab, .studio__head .lab, .results__head .lab, .stars__statement .lab, .contact__lead .lab, .clients__label { font-size: clamp(16.17px, 1.32825vw, 19.635px); letter-spacing: .14em; }
.mono-nums { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--pad); position: relative; z-index: 2; }

/* ---------- 3. GROUNDS ---------- */
/* Paper: a drafting sheet with a major line every fifth cell. */
.paper {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:
    calc(var(--grid-cell) * 5) calc(var(--grid-cell) * 5),
    calc(var(--grid-cell) * 5) calc(var(--grid-cell) * 5),
    var(--grid-cell) var(--grid-cell),
    var(--grid-cell) var(--grid-cell);
  background-position: center top;
}
/* Blue: the brand canvas, with the kit's fine white grid, halftone corners
   and the three star mark drifting through where a sky would have clouds. */
.canvas {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(120% 80% at 10% 118%, rgba(1,34,127,.55) 0%, rgba(1,34,127,0) 55%),
    radial-gradient(90% 70% at 88% -10%, rgba(179,199,255,.22) 0%, rgba(179,199,255,0) 50%),
    var(--blue);
}
.canvas__ground { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.canvas__grid { position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px;
  background-position: center top; }
.canvas__dots { position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.55) 1.2px, transparent 1.6px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(60% 55% at 100% 100%, #000 0%, transparent 70%), radial-gradient(45% 40% at 0% 0%, #000 0%, transparent 70%);
          mask-image: radial-gradient(60% 55% at 100% 100%, #000 0%, transparent 70%), radial-gradient(45% 40% at 0% 0%, #000 0%, transparent 70%);
  opacity: .5; }
.canvas__star { position: absolute; left: 0; aspect-ratio: 1; height: auto; fill: #fff; will-change: transform; animation: drift linear infinite; }
@keyframes drift { from { transform: translateX(-30vw) rotate(0); } to { transform: translateX(130vw) rotate(24deg); } }
.canvas > *:not(.canvas__ground) { position: relative; z-index: 1; }

/* ---------- 4. TOOL CHROME PRIMITIVES ---------- */
.h { position: absolute; width: 9px; height: 9px; background: #fff; border: 1.5px solid var(--blue); border-radius: 2px; z-index: 4; }
.h.tl { left: -5px; top: -5px; } .h.tr { right: -5px; top: -5px; }
.h.bl { left: -5px; bottom: -5px; } .h.br { right: -5px; bottom: -5px; }
.sel { position: absolute; inset: -6px; border: 1.5px solid var(--tool-line); border-radius: 4px; pointer-events: none; }
.dim {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; line-height: 1.4;
  background: var(--tool); color: var(--tool-ink); padding: 3px 8px; border-radius: 5px; white-space: nowrap;
  box-shadow: 0 6px 16px -8px rgba(1,34,127,.6);
}
.chrome { position: relative; }
@keyframes selDraw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hpop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes dimIn { from { opacity: 0; transform: translate(-50%, 5px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* ---------- 5. BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 22px 15px 24px; border-radius: 999px;
  font-weight: 500; font-size: 15px; line-height: 1;
  border: 1px solid transparent; position: relative; isolation: isolate; overflow: hidden;
  transition: transform .5s var(--ease-out), background-color .35s, color .35s, border-color .35s, box-shadow .35s;
}
.btn::before {
  content: ''; position: absolute; right: 18px; top: 50%; width: 36px; height: 36px; border-radius: 50%;
  transform: translateY(-50%) scale(0); z-index: -1; transition: transform .6s var(--e-ink);
}
.btn:hover::before { transform: translateY(-50%) scale(28); }
.btn:hover { transform: translateY(-2px); }
.btn--paper { background: var(--paper); color: var(--ink); }
.btn--paper::before { background: var(--blue); }
.btn--paper:hover { color: #fff; }
.btn--ghost { border-color: rgba(247,247,244,.35); color: var(--text-on-ink); }
.btn--ghost::before { background: #fff; }
.btn--ghost:hover { border-color: #fff; color: var(--blue); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink::before { background: var(--blue); }
.btn--blue { background: var(--blue); color: #fff; box-shadow: 0 12px 26px -12px rgba(1,34,127,.8); }
.btn--blue::before { background: var(--ink); }
/* a secondary button on paper: Pleiad blue stays for the primary call to action */
.btn--soft { background: var(--blue-100); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(1,34,127,.14); }
.btn--soft::before { background: var(--ink); }
.btn--soft:hover { color: #fff; }
.btn__arrows { position: relative; width: 1em; height: 1em; overflow: hidden; display: inline-block; }
.btn__arrows i { position: absolute; inset: 0; font-style: normal; line-height: 1; transition: transform .45s var(--ease-out); }
.btn__arrows i:nth-child(2) { transform: translateX(-140%); }
.btn:hover .btn__arrows i:nth-child(1) { transform: translateX(140%); }
.btn:hover .btn__arrows i:nth-child(2) { transform: translateX(0); }

/* ---------- 6. HAND DRAWN ----------
   Sketches draw once (A3). JS adds .is-in the first time a sketch is
   scrolled to and never takes it away. A note's words write in over
   --write (set per note from its length), then its arrow draws.
   --lead holds a note back while its section runs its own entrance.
   New sketch: a .hand note, or wrap any .mark in .sketch. */
.mark { position: absolute; overflow: visible; pointer-events: none; }
.mark path {
  fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease-out) var(--draw-delay, 0s);
}
.hand.is-in .mark path, .circled.is-in .mark path, .sketch.is-in .mark path, .mark.is-in path { stroke-dashoffset: 0; }
.mark--circle { left: -8%; top: -18%; width: 116%; height: 140%; }
.mark--circle path { stroke-width: 2.4; }
.mark--arrow { width: 74px; height: 38px; }
.mark--arrow path { stroke-width: 2; }
.circled { position: relative; display: inline-block; white-space: nowrap; }
.hand {
  font-family: var(--hand); font-weight: 600; font-size: clamp(23px, 1.95vw, 29px); line-height: 1.1;
  color: var(--pen); position: relative; display: inline-block; transform: rotate(-4deg);
  --draw-delay: calc(var(--lead, 0s) + var(--write, .9s) - .15s);
}
.hand .mark--arrow { position: absolute; }
/* The pen: a soft edged mask slides off the words left to right. The
   padding keeps Caveat's loops inside the mask; the margin cancels it. */
.hand__ink {
  display: inline-block; padding: .25em .2em; margin: -.25em -.2em;
  -webkit-mask-image: linear-gradient(90deg, #000 48%, transparent 52%); mask-image: linear-gradient(90deg, #000 48%, transparent 52%);
  -webkit-mask-size: 208% 100%; mask-size: 208% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  transition: -webkit-mask-position var(--write, .9s) cubic-bezier(.45,.05,.4,1) var(--lead, 0s), mask-position var(--write, .9s) cubic-bezier(.45,.05,.4,1) var(--lead, 0s);
}
.hand.is-in .hand__ink { -webkit-mask-position: 0 0; mask-position: 0 0; }
.hand--inline { margin-left: 18px; text-transform: none; letter-spacing: 0; vertical-align: middle; color: var(--pen); font-size: clamp(24px, 2vw, 30px); }

/* =========================================================
   7. LOADER: the wordmark strokes on, then gets selected
   ========================================================= */
.loader {
  position: fixed; inset: 0; z-index: 100; background: var(--ink);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  transition: transform .85s var(--ease-strong);
}
.loader.is-done { transform: translateY(-101%); }
.loader.is-gone { display: none; }
.loader__grid { position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, #000 38%, transparent 80%);
          mask-image: radial-gradient(120% 90% at 50% 50%, #000 38%, transparent 80%); }
.loader__mark { position: relative; display: flex; align-items: center; gap: 22px; transform: translateY(-2vh); }
.loader__star path, .loader__word path { fill: transparent; stroke: var(--blue-300); stroke-width: .6; stroke-dasharray: 1; stroke-dashoffset: 1; }
.loader__star path { stroke-width: 1.2; stroke: var(--blue); }
.loader.is-drawing .loader__star path { animation: draw .9s var(--ease-out) forwards, fillBlue .5s ease 1.2s forwards; }
.loader.is-drawing .loader__word path {
  animation: draw .7s var(--ease-out) forwards, fillPaper .45s ease forwards;
  animation-delay: calc(.25s + var(--i) * .13s), calc(1.15s + var(--i) * .05s);
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fillPaper { to { fill: var(--paper); stroke: var(--paper); } }
@keyframes fillBlue { to { fill: var(--blue); } }
.loader__sel { inset: -18px -22px; opacity: 0; clip-path: inset(0 100% 0 0); }
.loader.is-drawing .loader__sel { opacity: 1; animation: selDraw .6s var(--e-wipe) 1.45s forwards; }
.loader__sel .h { opacity: 0; }
.loader.is-drawing .loader__sel .h { animation: hpop .25s var(--e-pop) forwards; }
.loader.is-drawing .loader__sel .h.tl { animation-delay: 2s; }
.loader.is-drawing .loader__sel .h.tr { animation-delay: 2.07s; }
.loader.is-drawing .loader__sel .h.bl { animation-delay: 2.14s; }
.loader.is-drawing .loader__sel .h.br { animation-delay: 2.21s; }
.loader__dim { position: absolute; left: 50%; bottom: -50px; transform: translateX(-50%); opacity: 0; }
.loader.is-drawing .loader__dim { animation: dimIn .3s ease 2.25s forwards; }
.loader__meta { position: absolute; left: var(--pad); right: var(--pad); bottom: 28px; display: flex; justify-content: space-between; align-items: baseline; color: var(--text-on-ink-muted); }
.loader__count { font-family: var(--mono); font-size: clamp(28px, 4vw, 44px); color: var(--text-on-ink); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.loader__status { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
@media (max-width: 600px) { .loader__word { width: 200px; height: 84px; } .loader__star { width: 44px; height: 44px; } }

/* =========================================================
   7b. PAGE CHANGES (Mk. 7.5 Sandbox, 20 Sep)
   Every move between pages is one pass of the same plate: it
   sweeps in over the page being left, and the page arrived at
   slides it the rest of the way off. Two documents, one
   gesture. Forward runs right to left, back runs the other way,
   so a step back reads as a step back. The plate is the
   loader's material, ink and the drafting grid and the mark,
   because that is already what this site puts between one view
   and the next. It sits under the cursor layer on purpose, so
   the arrow stays on the table while the sheet passes beneath
   it. The about sheet in module 27 keeps its own drag.
   ========================================================= */
/* before the first paint of the page being arrived at, from the head script */
html.is-transit .pgx { visibility: visible; }
html.is-transit .pgx__plate { transform: none; }
html.is-transit .loader { display: none !important; }

.pgx { position: fixed; inset: 0; z-index: 89; overflow: hidden; pointer-events: none; visibility: hidden; }
.pgx[data-x] { visibility: visible; }
/* while the plate is over the page, nothing under it can be clicked twice */
.pgx[data-x="cover"], .pgx[data-x="held"] { pointer-events: auto; }
.pgx__plate {
  position: absolute; inset: 0; display: grid; place-items: center; will-change: transform;
  background: var(--ink); color: var(--text-on-ink);
  transform: translate3d(101%, 0, 0);
  box-shadow: -34px 0 90px -30px rgba(9, 13, 26, .55);
}
.pgx[data-dir="back"] .pgx__plate { transform: translate3d(-101%, 0, 0); box-shadow: 34px 0 90px -30px rgba(9, 13, 26, .55); }
.pgx[data-x="cover"] .pgx__plate, .pgx[data-x="held"] .pgx__plate { transform: none; }
.pgx[data-x="cover"] .pgx__plate { transition: transform .38s var(--ease-strong); }
.pgx[data-x="uncover"] .pgx__plate { transform: translate3d(-101%, 0, 0); transition: transform .52s var(--ease-strong); }
.pgx[data-dir="back"][data-x="uncover"] .pgx__plate { transform: translate3d(101%, 0, 0); }
.pgx__grid { position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, #000 38%, transparent 80%);
          mask-image: radial-gradient(120% 90% at 50% 50%, #000 38%, transparent 80%); }
/* the name of where you are going arrives a beat after the plate does, and
   leaves the moment it starts to slide off */
.pgx__mark { position: relative; display: flex; align-items: center; gap: 13px; opacity: 0; transform: translateY(6px); transition: opacity .16s, transform .16s; }
.pgx[data-x="cover"] .pgx__mark, .pgx[data-x="held"] .pgx__mark { opacity: 1; transform: none; transition: opacity .3s .1s var(--ease-out), transform .3s .1s var(--ease-out); }
.pgx__star { fill: var(--blue-200); animation: pgxTurn 3.4s linear infinite; }
.pgx__to { color: var(--text-on-ink); }
.pgx__sel { inset: -13px -17px; border-color: rgba(179, 199, 255, .45); }
@keyframes pgxTurn { to { transform: rotate(360deg); } }
@media (max-width: 600px) { .pgx__sel { inset: -10px -13px; } }
/* asked for less movement: no plate, and the jump is the plain one */
@media (prefers-reduced-motion: reduce) {
  .pgx, html.is-transit .pgx { visibility: hidden !important; }
  .pgx__star { animation: none; }
}

/* =========================================================
   8. MULTIPLAYER CURSORS
   ========================================================= */
.cursor-layer { position: fixed; inset: 0; pointer-events: none; z-index: 90; display: none; }
body.has-cursor .cursor-layer { display: block; }
/* One cursor (A4). The real pointer stays hidden everywhere, even where a
   rule asks for cursor: pointer, except the fields and sliders that hand
   it back. There the drawn arrow steps aside, so two never show at once. */
body.has-cursor, body.has-cursor * { cursor: none !important; }
body.has-cursor.native-cursor, body.has-cursor.native-cursor * { cursor: auto !important; }
body.native-cursor:not(.omw-dragging) #curYou { opacity: 0 !important; }
.fcursor { position: absolute; top: 0; left: 0; will-change: transform; }
/* the arrow's tip sits exactly on the pointer's hotspot */
.fcursor svg { width: 22px; height: 22px; margin: -3px 0 0 -5px; filter: drop-shadow(0 2px 3px rgba(9,13,26,.35)); }
.fcursor .name {
  position: absolute; left: 16px; top: 16px; font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--dark); background: #fff; padding: 2px 8px; border-radius: 5px; border-top-left-radius: 0; white-space: nowrap;
  transition: background .15s, color .15s; box-shadow: 0 6px 16px -8px rgba(1,34,127,.7);
}
.fcursor .omw-drag {
  position: absolute; margin: -15px 0 0 -47px; padding: 8px 14px; border-radius: 30px;
  background: rgba(9,13,26,.86); backdrop-filter: blur(10px); color: #fff;
  font: 600 9px var(--mono); letter-spacing: .13em; white-space: nowrap;
  transform: scale(0); transition: transform .34s cubic-bezier(.2,1.25,.4,1);
}
body.omw-dragging #curYou .omw-drag { transform: scale(1); }
body.omw-grabbing #curYou .omw-drag { transform: scale(.9); background: rgba(9,13,26,.96); }
body.omw-dragging #curYou svg, body.omw-dragging #curYou .name { opacity: 0; transition: opacity .2s; }
.omw-drag i { display: inline-block; font-style: normal; }
.omw-drag i:first-child { animation: chevL 1.7s ease-in-out infinite; }
.omw-drag i:last-child { animation: chevR 1.7s ease-in-out infinite; }
@keyframes chevL { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-2px); } }
@keyframes chevR { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
/* 1.10: never two cursors in the menu. The AI cursors step out while it is
   open and come back when it closes; yours stays. */
body.menu-open #phGhost, body.menu-open #reelCur { opacity: 0 !important; }

/* =========================================================
   9. RULER + HEADER + MENU
   ========================================================= */
.ruler {
  position: fixed; top: 0; left: 0; right: 0; height: 30px; z-index: 82;
  background: rgba(255,255,255,.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line); display: flex; align-items: stretch; font-family: var(--mono);
}
.ticks { flex: 1; position: relative; overflow: hidden; }
.ticks canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.r-fill { position: absolute; inset: 0 auto 0 0; width: 0; z-index: 2; background: linear-gradient(90deg, rgba(7,72,254,.09), rgba(7,72,254,.19)); box-shadow: inset -2px 0 0 var(--blue); transition: width .08s linear, background .45s ease, box-shadow .45s ease; }
.r-fill.done { background: linear-gradient(90deg, rgba(34,197,94,.10), rgba(34,197,94,.22)); box-shadow: inset -2px 0 0 var(--grn); }
.r-pct { position: absolute; top: 50%; left: 4px; transform: translateY(-50%); z-index: 3; font: 600 9px var(--mono); color: #fff; background: var(--blue); padding: 2px 6px; border-radius: 5px; box-shadow: 0 3px 8px -3px rgba(7,72,254,.6); white-space: nowrap; transition: background .45s ease, left .08s linear; }
.r-pct.done { background: var(--grn); animation: rpop .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes rpop { 0% { transform: translateY(-50%) scale(1); } 45% { transform: translateY(-50%) scale(1.16); } 100% { transform: translateY(-50%) scale(1); } }
.r-zoom { display: flex; align-items: center; gap: 7px; padding: 0 14px; border-left: 1px solid var(--line); font-size: 11px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.r-since { color: var(--ink); letter-spacing: .06em; }
#sinceClock { letter-spacing: .04em; }
.r-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grn); box-shadow: 0 0 0 3px rgba(34,197,94,.13); flex: none; }
@media (max-width: 600px) { .r-zoom { display: none; } }
/* the ruler as navigation: click or drag anywhere along it; each section is a hand drawn star, the current one filled */
.ticks { cursor: pointer; touch-action: none; }
.r-marks { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.r-pct { z-index: 6; pointer-events: none; }
.r-star { position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; padding: 3px; border: 0; background: none; color: var(--blue); pointer-events: auto; cursor: pointer; transition: transform .35s var(--e-pop); }
.r-star svg { display: block; width: 100%; height: 100%; overflow: visible; fill: rgba(255,255,255,.94); stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 1.5px #fff); transition: fill .3s; }
.r-star.is-past svg { fill: var(--blue-100); }
.r-star.is-on svg { fill: var(--blue); }
.r-star:hover, .r-star:focus-visible { transform: scale(1.3) rotate(-10deg); }
.r-star:focus-visible { outline: none; }
.r-star:focus-visible svg { stroke-width: 2.8; }
.r-tip { position: absolute; top: 37px; left: 0; z-index: 5; transform: translate(-50%, -4px); background: var(--ink); color: #fff; font: 600 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 5px 9px; border-radius: 6px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .18s, transform .25s var(--e-ui); }
.r-tip.is-on { opacity: 1; transform: translate(-50%, 0); }

.bar {
  position: fixed; left: 0; right: 0; top: 30px; z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--pad); color: var(--text-on-ink); transition: color .4s;
}
.bar.on-paper { color: var(--text); }
.bar.on-blue { color: #fff; }
.bar__brand { display: inline-flex; align-items: center; gap: 15px; }
.bar__star { fill: var(--blue); transition: fill .4s; }
/* 2.14, 2.15: on hover the star winds back, then lets go for a full turn that overshoots and settles */
.bar__star.is-spinning { animation: starWind 1.25s forwards; }
@keyframes starWind {
  0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  26% { transform: rotate(-38deg); animation-timing-function: cubic-bezier(.2,.7,.25,1); }
  80% { transform: rotate(374deg); animation-timing-function: cubic-bezier(.35,0,.35,1); }
  100% { transform: rotate(360deg); }
}
.bar.on-blue .bar__star { fill: #fff; }
.bar__word { font-family: var(--serif); font-size: 39px; line-height: 1; letter-spacing: -.02em; transform: translateY(-1.5px); }
/* 3.13: a soft blurred band behind the bar, tinted to the ground below, so the mark, the section names
   and Menu read over anything; it fades out downward instead of ending in a hard edge */
.bar { --bar-tint: rgba(9,13,26,.62); --nav-on: #FFFFFF; --nav-off: rgba(255,255,255,.58); }
.bar.on-paper { --bar-tint: rgba(247,247,244,.92); --nav-on: #012FB2; --nav-off: rgba(31,41,55,.7); }
.bar.on-blue { --bar-tint: rgba(2,34,130,.84); --nav-on: #FFFFFF; --nav-off: rgba(255,255,255,.72); } /* deeper than the canvas blue: white section names measured 3.5:1 at .6 */
.bar::before {
  content: ''; position: absolute; inset: 0 0 -34px 0; z-index: -1; pointer-events: none;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  background: linear-gradient(180deg, var(--bar-tint), var(--bar-tint) 55%, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent); mask-image: linear-gradient(180deg, #000 58%, transparent);
  transition: background .4s, opacity .3s;
}
/* 3.12: over the open menu the bar is always white, whatever section sits behind the menu */
body.menu-open .bar { color: #fff; }
body.menu-open .bar::before { opacity: 0; }
/* at the very top of the home page the hero shows clean, no blurred band; it fades in once the page scrolls */
.bar.at-top::before { opacity: 0; }
.bar__menu { display: inline-flex; align-items: center; gap: 12px; padding: 8px 0; }
/* Menu toggle (after the MenuToggle component). One path is the top bar, runs round a loop,
   down the stem and round a second loop into the bottom bar. Closed, its dash shows only the top
   bar; open, the dash slides along to the stem while the icon turns -45deg, so stem and middle bar
   cross into an X. Timing and dash numbers match the component: 600ms ease out. */
.bar__menu-icon { width: 28px; height: 28px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .6s ease-out; }
.bar__menu-loop { stroke-dasharray: 12 63; stroke-dashoffset: 0; transition: stroke-dasharray .6s ease-out, stroke-dashoffset .6s ease-out; }
.bar__menu[aria-expanded="true"] .bar__menu-icon { transform: rotate(-45deg); }
.bar__menu[aria-expanded="true"] .bar__menu-loop { stroke-dasharray: 20 300; stroke-dashoffset: -32.42px; }
@media (prefers-reduced-motion: reduce) { .bar__menu-icon, .bar__menu-loop { transition: none; } }

.menu { position: fixed; inset: 0; z-index: 75; background: var(--ink); color: var(--text-on-ink); clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease-strong); overflow: auto; }
.menu[hidden] { display: block; visibility: hidden; }
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
.menu__bgs { position: absolute; inset: 0; pointer-events: none; }
.menu__bg { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: 0; transition: opacity .35s ease; }
.menu__bg.is-on { opacity: .16; }
.menu__inner { position: relative; min-height: 100%; display: grid; grid-template-columns: 1fr; gap: 40px; padding: 130px var(--pad) 40px; }
@media (min-width: 900px) {
  .menu__inner { grid-template-columns: 1.4fr 1fr; align-items: end; align-content: end; }
  /* 21 Sep: four links since How it goes and Scope left. The list now runs the full height of the right hand
     column, top rule level with Elsewhere, bottom rule level with the copyright, and the four rows share it
     evenly, so there is no empty patch above the list. The words go up a size to hold the taller rows */
  .menu__list { align-self: stretch; display: grid; grid-auto-rows: 1fr; }
  .menu__list li { display: flex; align-items: center; }
  .menu__list a { flex: 1; align-items: center; font-size: clamp(44px, 6.6vw, 96px); }
}
.menu__list li { border-top: 1px solid var(--line-ink); }
.menu__list li:last-child { border-bottom: 1px solid var(--line-ink); }
.menu__list a {
  display: flex; align-items: baseline; gap: 22px; padding: 16px 0;
  font-family: var(--serif); font-size: clamp(34px, 6vw, 76px); line-height: 1; letter-spacing: -.02em;
  transform: translateY(24px); opacity: 0;
  transition: transform .7s var(--ease-out), opacity .7s, color .15s, padding-left .25s var(--ease-out);
}
.menu.is-open .menu__list a { transform: none; opacity: 1; }
/* the stagger delays the entrance (transform, opacity) only; hover colour and slide start at once */
.menu.is-open .menu__list li:nth-child(1) a { transition-delay: .25s, .25s, 0s, 0s; }
.menu.is-open .menu__list li:nth-child(2) a { transition-delay: .3s, .3s, 0s, 0s; }
.menu.is-open .menu__list li:nth-child(3) a { transition-delay: .35s, .35s, 0s, 0s; }
.menu.is-open .menu__list li:nth-child(4) a { transition-delay: .4s, .4s, 0s, 0s; }
.menu.is-open .menu__list li:nth-child(5) a { transition-delay: .45s, .45s, 0s, 0s; }
.menu.is-open .menu__list li:nth-child(6) a { transition-delay: .5s, .5s, 0s, 0s; }
.menu.is-open .menu__list li:nth-child(7) a { transition-delay: .55s, .55s, 0s, 0s; }
.menu__list a .lab { color: var(--blue-300); font-size: clamp(16px, 1.45vw, 22px); letter-spacing: .08em; min-width: 2.4ch; }
.menu__list a:hover { color: var(--blue-200); padding-left: 14px; }
.menu__side { display: grid; gap: 34px; color: var(--text-on-ink-muted); }
.menu__label { display: block; margin-bottom: 10px; color: var(--blue-300); font-size: 12.65px; } /* 11px + 15% */
.menu__socials li a { font-size: 21px; color: var(--text-on-ink); line-height: 1.7; } /* 20px + 5% */
.menu__socials li a:hover { color: var(--blue-200); }
/* 21 Sep: the four ways to reach the studio carry an icon, in the menu and in the footer's Elsewhere column */
.ico-s { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico-s__dot { fill: currentColor; stroke: none; }
.menu__socials li a { display: inline-flex; align-items: center; gap: 12px; }
.menu__socials .ico-s { width: 20px; height: 20px; color: var(--blue-200); transition: color .2s; }
.menu__socials li a:hover .ico-s { color: currentColor; }
.foot__col.foot__col--else li a { display: inline-flex; align-items: center; gap: 10px; }
.foot__col--else .ico-s { width: 17px; height: 17px; color: var(--blue-300); transition: color .3s; }
.foot__col--else li a:hover .ico-s { color: currentColor; }
.menu__clock { display: block; font-size: clamp(30px, 4vw, 48px); color: var(--text-on-ink); margin-bottom: 6px; }
.menu__foot { margin-top: 10px; }
/* Menu call to action: a line that answers the studio clock above it, and the way to the contact page */
.menu__cta { margin-top: 12px; display: grid; gap: 24px; justify-items: start; }
/* The loudest thing in the open menu: big serif, and the back half of each line in italic on a solid
   Pleiad blue highlight, which outshines the white menu words on the ink ground */
.menu__cta-line { font-family: var(--serif); font-size: clamp(36px, 3.7vw, 56px); line-height: 1.12; letter-spacing: -.015em; color: #fff; max-width: 16ch; }
/* Mk. 7.6: the highlight hugs the letters (.08em over the ascenders, .06em under the descenders) and the lines open
   from 1.06 to 1.12, so the blue sits in the gap between lines and never covers a letter above or below it */
.menu__cta-line em { font-family: 'Instrument Serif Mark', var(--serif); font-style: italic; color: #fff; background: var(--blue); padding: 0 .16em; border-radius: 5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; box-shadow: 0 14px 34px -14px rgba(7,72,254,.9); }
.menu__cta .btn { font-size: 18px; padding: 19px 34px; gap: 14px; }
/* Mk. 7 (1.4): the call to action has to be on screen when the menu opens. On a short window the links and the
   line size down and the padding tightens (it sat at 776px on a 720px laptop); on a phone the studio time block
   comes before the Elsewhere links, so the button lands inside the first screen. */
@media (max-height: 820px) {
  .menu__inner { padding-top: 92px; padding-bottom: 28px; gap: 24px; }
  .menu__list a { font-size: clamp(30px, 5.6vh, 60px); padding: 11px 0; gap: 16px; }
  .menu__side { gap: 20px; }
  .menu__clock { font-size: clamp(26px, 3.6vh, 40px); margin-bottom: 2px; }
  .menu__cta { margin-top: 8px; gap: 16px; }
  .menu__cta-line { font-size: clamp(26px, 3.8vh, 44px); }
  .menu__cta .btn { font-size: 16px; padding: 15px 26px; }
  .menu__socials li a { font-size: 18px; line-height: 1.55; }
}
/* four links leave room on a short laptop too, so the words size up from the six link sizes above */
@media (min-width: 900px) and (max-height: 820px) { .menu__list a { font-size: clamp(38px, 7vh, 64px); } }
@media (max-width: 899px) {
  .menu__inner { padding-top: 104px; gap: 28px; }
  .menu__list a { padding: 12px 0; }
  .menu__side > div:nth-child(2) { order: -1; }
  .menu__cta-line { font-size: clamp(28px, 7.4vw, 40px); }
}
/* Blank contact page (menu CTA target until 20.10): same ink ground and brand mark, nothing else yet */
.page-blank { min-height: 100vh; background: var(--ink); color: var(--text-on-ink); }
.page-blank .bar { top: 0; }
/* Mk. 7 (1.2): the standalone pages (offers, work, contact, and the built out about page). No ruler, so the bar
   sits at the very top; each page opens with a head that clears the bar. */
.page-sub { min-height: 100vh; color: var(--text); }
.page-sub .bar { top: 0; }
.bar__right { display: inline-flex; align-items: center; gap: 18px; }
.page-head { padding-top: clamp(120px, 16vh, 170px); }
.page-head h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 5.4vw, 82px); line-height: .98; letter-spacing: -.025em; }
.page-head h1 .o { color: var(--blue); font-style: italic; }
.sect-head--ink.page-head h1 .o { color: var(--blue-200); }
.sect-head--canvas.page-head h1 .o { color: var(--blue-100); }
.page-sub .disc { padding-top: 0; }
.page-sub .contact { padding-top: clamp(130px, 18vh, 190px); }
.page-sub .contact__lead h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 6vw, 96px); line-height: .96; letter-spacing: -.025em; margin: 22px 0 26px; }
.page-sub .contact__lead h1 .o { color: var(--blue-100); font-style: italic; }
/* the full list of projects on work.html: the reel popup's copy, laid out as cards */
.wk { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.wk__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 30px; padding: 28px 0 30px; margin-top: 60px; }
.wk__head .lab { color: var(--blue); }
.wk__grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 800px) { .wk__grid { grid-template-columns: 1fr 1fr; } }
.wk-card { display: grid; grid-template-rows: auto 1fr; background: #fff; border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px -32px rgba(1,34,127,.35); }
.wk-card__media { position: relative; height: clamp(160px, 24vw, 260px); background: var(--blue); }
.wk-card__media img { width: 100%; height: 100%; object-fit: cover; }
.wk-card__body { padding: 24px 26px 26px; display: grid; gap: 12px; align-content: start; }
.wk-card .rpop__text { margin-bottom: 8px; }
.wk-card .rpop__bento { margin-top: 4px; }
/* the about page, built from what the home page already says: the statement, the pillars, the founders, the belief */
.about-block { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.about-mission { padding: clamp(40px, 8vh, 90px) 0 clamp(60px, 10vh, 120px); }
.about-mission .mission__foot { margin-top: 22px; }
.about-grid { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 10px; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 1.4fr 1fr; align-items: stretch; } }
.about-grid .cell { grid-area: auto; justify-content: flex-start; } /* the bento names its areas; here the boxes flow */
.about-belief { background: var(--ink); color: var(--text-on-ink); padding-top: clamp(40px, 6vh, 80px); padding-bottom: clamp(80px, 12vh, 150px); }
.about-belief .stars__statement { position: static; opacity: 1; transform: none; padding: clamp(80px, 12vh, 150px) var(--pad) 0; }
.about-belief .stars__statement h2 { font-size: clamp(34px, 5.4vw, 82px); }
.about-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; max-width: var(--max); margin: clamp(50px, 8vh, 90px) auto 0; padding: 0 var(--pad); }
.about-cta .lab { color: var(--text-on-ink-muted); }
/* 21 Sep: the about close. A paper note pinned to the ink, tilted like the process notes, that squares up when
   the pointer reaches it. The faces, the open dot and the three steps answer "who, when, what happens next" */
.acta { max-width: var(--max); margin: clamp(60px, 9vh, 110px) auto 0; padding: 0 var(--pad); display: grid; justify-items: center; }
.acta__card { position: relative; width: min(760px, 100%); background: var(--paper); color: var(--ink); border-radius: 26px;
  padding: clamp(30px, 4vw, 54px) clamp(24px, 4vw, 58px) clamp(28px, 3.4vw, 44px); rotate: -1.4deg;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06);
  transition: rotate .6s var(--e-ui), translate .6s var(--e-ui), box-shadow .6s var(--e-ui); }
.acta__card:hover, .acta__card:focus-within { rotate: 0deg; translate: 0 -6px; box-shadow: 0 54px 100px -44px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.08); }
.acta__pin { position: absolute; left: 50%; top: 14px; width: 30px; height: 30px; margin-left: -15px; fill: var(--blue); }
.acta__top { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.acta__faces { display: flex; flex: none; }
.acta__faces img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 3px solid var(--paper); box-shadow: 0 0 0 1.5px var(--blue); transition: translate .5s var(--e-ui); }
.acta__faces img + img { margin-left: -14px; }
.acta__card:hover .acta__faces img:first-child { translate: -4px 0; }
.acta__card:hover .acta__faces img + img { translate: 4px 0; }
.acta__who { display: grid; gap: 4px; min-width: 0; }
.acta__who b { font: 600 16px/1.2 var(--sans); }
.acta__open { display: inline-flex; align-items: center; gap: 8px; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.acta__open i { width: 8px; height: 8px; border-radius: 50%; background: var(--grn); box-shadow: 0 0 0 3px rgba(34,197,94,.18); animation: footdot 2.4s infinite; }
.acta__hand { margin-left: auto; color: var(--blue); font-size: clamp(22px, 2vw, 28px); rotate: -6deg; }
.acta__card h2 { margin: clamp(22px, 3vw, 34px) 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 5.4vw, 80px); line-height: .98; letter-spacing: -.025em; text-wrap: balance; }
.acta__card h2 .o { font-style: italic; color: var(--blue); }
.acta__body { margin: 18px 0 0; max-width: 54ch; color: var(--ink-soft); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; }
.acta__steps { list-style: none; margin: 26px 0 0; padding: 18px 0 0; border-top: 1px dashed rgba(31,41,55,.22); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.acta__steps li { display: grid; gap: 6px; font: 500 15px/1.35 var(--sans); }
.acta__n { font: 600 12px var(--mono); letter-spacing: .1em; color: var(--blue); }
.acta__go { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 30px; }
.acta__btn { font-size: 17px; padding-block: 18px; padding-inline: 28px; }
.acta__mail { color: var(--ink-soft); font-size: 15px; }
.acta__mail u { text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .25s; }
.acta__mail:hover u { color: var(--blue); }
.acta__fine { margin: 22px 0 0; color: var(--ink-faint); }
@media (max-width: 620px) {
  .acta__steps { grid-template-columns: 1fr; }
  .acta__hand { display: none; }
  .acta__card { rotate: -.6deg; }
}
@media (prefers-reduced-motion: reduce) { .acta__card, .acta__faces img { transition: none; } .acta__open i { animation: none; } }

/* 5.05 to 5.08: the about page (eyebrow and headline until it is built out) and the sheet on the home page that
   is dragged in before it loads. Both use .about-hero, so the last frame of the drag is the page that loads. */
.page-about { min-height: 100vh; color: var(--text); }
.page-about .bar, .pgdrag__sheet .bar { top: 0; }
.about-hero { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 120px var(--pad) 90px; }
.about-hero__eyebrow { color: var(--blue); font-size: clamp(16.17px, 1.32825vw, 19.635px); letter-spacing: .14em; margin: 0 0 26px; }
.about-hero__title { font-family: var(--madena); font-weight: 400; font-size: clamp(46px, 8vw, 124px); line-height: .94; letter-spacing: -.004em; word-spacing: -.044em; color: var(--ink); margin: 0; max-width: 11ch; text-wrap: balance; }
.about-hero__title em { font-family: var(--times); font-style: italic; font-size: 1.08em; color: var(--blue); }
/* 21 Sep: Truman and Estella as scrapbook cutouts either side of the title, set down a little off square. On load
   the AI cursors carry them in (module 37): while held a photo lifts (a touch larger, a longer shadow), and it
   settles when let go. Script hides them until it has placed them; without script, or with motion reduced, they
   are simply there. The shadow is drawn here, not baked into the cutout, so it can lift. */
.page-about .about-hero { position: relative; overflow-x: clip; }
.scrap { position: absolute; z-index: 2; width: clamp(150px, 17vw, 262px); height: auto; rotate: var(--rot); pointer-events: none; user-select: none;
  filter: drop-shadow(0 14px 18px rgba(9,13,26,.2)) drop-shadow(0 2px 3px rgba(9,13,26,.16)); transition: filter .4s var(--e-ui), scale .4s var(--e-pop); }
.scrap--t { --rot: -6.5deg; left: max(2vw, calc(50% - 610px)); top: 22%; }
.scrap--e { --rot: 4deg; right: max(2.4vw, calc(50% - 598px)); top: 30%; }
.scrap.is-carried { scale: 1.05; filter: drop-shadow(0 34px 34px rgba(9,13,26,.26)) drop-shadow(0 5px 7px rgba(9,13,26,.18)); }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) { .scrap:not(.is-set) { visibility: hidden; } }
@media (max-width: 760px) {
  .scrap { width: 34vw; top: auto; }
  .scrap--t { left: 5vw; bottom: 5%; }
  .scrap--e { right: 6vw; bottom: 3%; }
}
/* the way home from the about page: top right, always in view */
/* Mk. 7.6: every page but the home page carries this, in the bar beside Menu. The about page had it first
   (`.about-back`), so both names style the same button. Module 29 decides where it goes and what it says. */
.about-back, .page-back { font-size: 15px; font-weight: 600; gap: 10px; padding: 13px 20px 13px 16px; }
.about-back svg, .page-back svg { flex: none; transition: transform .4s var(--ease-out); }
.about-back:hover svg, .page-back:hover svg { transform: translateX(-4px); }
.about-back:focus-visible, .page-back:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (max-width: 480px) {
  .about-back, .page-back { font-size: 13.5px; padding: 11px 15px 11px 12px; gap: 7px; }
  /* on a phone the bar holds a brand, this and Menu, so the button says "Back" and keeps the arrow and the words
     that matter; screen readers still hear the whole label through aria-label */
  .page-back__rest { display: none; }
}
.pgdrag { position: fixed; inset: 0; z-index: 86; overflow: hidden; }
.pgdrag[hidden] { display: none; }
.pgdrag__shade { position: absolute; inset: 0; background: var(--ink); opacity: 0; }
.pgdrag__sheet { position: absolute; inset: 0; transform: translate3d(-100%, 0, 0); box-shadow: 34px 0 90px -30px rgba(9,13,26,.55); will-change: transform; }
.pgdrag__edge { position: absolute; top: 0; bottom: 0; right: 0; width: 1.5px; background: var(--blue); transition: opacity .2s; }
.pgdrag__h { position: absolute; right: -5px; width: 9px; height: 9px; background: #fff; border: 1.5px solid var(--blue); border-radius: 2px; transition: opacity .2s; }
.pgdrag.is-done .pgdrag__edge, .pgdrag.is-done .pgdrag__h { opacity: 0; }
/* coming home from the about page: the sheet already covers the page on the first paint, then module 27 slides it off */
html.is-returning .loader { display: none !important; }
html.is-returning .pgdrag[hidden] { display: block; }
html.is-returning .pgdrag__sheet { transform: none; }
html.is-returning .pgdrag__shade { opacity: .5; }
html.is-returning .pgdrag__edge, html.is-returning .pgdrag__h { opacity: 0; }
.pgcur { position: fixed; left: 0; top: 0; z-index: 88; pointer-events: none; opacity: 0; display: flex; align-items: flex-start; will-change: transform, opacity; }
.pgcur svg { transition: transform .12s; transform-origin: 20% 12%; }
.pgcur.is-grab svg { transform: scale(.86); }

/* 0.04 decode: [data-scramble] text cycles letters and numbers and settles left to right.
   Letters are split only while it plays, each locked to its real width; words never break apart. */
.scr__w { white-space: nowrap; }
.scr__ch { display: inline-block; text-align: center; transition: color .15s, transform .15s; }
.scr__ch.is-noise { color: var(--scr-tint, var(--blue-100)); transform: scale(1.1); }
.paper [data-scramble], [data-ground="paper"] [data-scramble] { --scr-tint: var(--blue); }
.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; }

/* =========================================================
   10. HERO
   ========================================================= */
.hero { position: relative; min-height: 100svh; color: var(--text-on-ink); overflow: hidden; display: flex; flex-direction: column; }
.hero__plate { position: absolute; inset: -3%; z-index: 0; will-change: transform; }
.hero__canvas, .hero__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__canvas { display: none; }
.hero.has-canvas .hero__canvas { display: block; }
.hero.has-canvas .hero__fallback { visibility: hidden; }
.hero__scrim { position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(9,13,26,.7) 0%, rgba(9,13,26,.25) 35%, rgba(9,13,26,.4) 70%, var(--ink) 100%),
    radial-gradient(60% 50% at 50% 55%, rgba(9,13,26,.4), transparent 70%); }
.hero__body { position: relative; z-index: 2; flex: 1; display: grid; grid-template-rows: auto 1fr; padding: 120px var(--pad) 56px; gap: 24px; }
.hero__top { display: flex; justify-content: center; }
.badge {
  position: relative; display: inline-flex; align-items: center; gap: 11px; padding: 11px 20px;
  background: rgba(255,255,255,.9); backdrop-filter: blur(12px); border-radius: 7px;
  font-size: clamp(13px, 1.3vw, 15px); font-weight: 600; color: var(--ink);
  box-shadow: 0 16px 34px -20px rgba(1,34,127,.8);
  opacity: 0; transition: transform .3s var(--e-ui), box-shadow .3s;
}
.is-ready .badge { animation: ycfade .45s ease .12s forwards; }
@keyframes ycfade { to { opacity: 1; } }
.badge::before { content: ''; position: absolute; inset: 0; border: 1.5px solid rgba(255,255,255,0); border-radius: 7px; clip-path: inset(0 100% 0 0); transition: border-color .25s; }
.is-ready .badge::before { animation: selDraw .55s var(--e-wipe) .5s forwards; }
.badge:hover::before { border-color: rgba(255,255,255,.95); }
.badge .h { width: 8px; height: 8px; opacity: 0; }
.is-ready .badge .h { animation: hpop .3s var(--e-pop-hi) forwards; }
.is-ready .badge .h.tl { animation-delay: 1s; } .is-ready .badge .h.bl { animation-delay: 1.07s; }
.is-ready .badge .h.tr { animation-delay: 1.14s; } .is-ready .badge .h.br { animation-delay: 1.21s; }
.badge:hover { transform: translateY(-2px); }
/* 2.25: one marketing fact at a time; the text fades between facts. The box is one fixed width, and
   module 5b sets the body to the tallest fact's height, so the badge never changes size between facts */
#factBadge { width: min(92vw, 560px); max-width: none; transition: transform .3s var(--e-ui), box-shadow .3s; }
.badge__body { position: relative; flex: 1; min-width: 0; text-align: left; line-height: 1.35; transition: opacity .28s ease, transform .28s ease; }
#factBadge.is-swapping .badge__body { opacity: 0; transform: translateY(3px); }
.badge__fact { display: block; }
.badge__src { display: block; margin-top: 1px; color: var(--ink-soft); font-weight: 500; white-space: nowrap; }
.badge__mark { width: 22px; height: 22px; border-radius: 5px; background: var(--blue); display: grid; place-items: center; flex: none; }
.badge__mark svg { width: 14px; height: 14px; fill: #fff; }

.hero__center { align-self: center; justify-self: center; width: 100%; max-width: 1180px; text-align: center; will-change: transform; display: flex; flex-direction: column; align-items: center; }
.hero__pc { width: min(1100px, 90vw); height: min(42vh, 440px); display: none; margin: 0 auto; }
.hero.has-pc .hero__pc { display: block; }
/* 0.03: think, build, last in RL Madena; together in Times New Roman italic, 11% up to meet
   Madena's x height. Tracking and the word gap are solved so the letters sit as close as the old
   Instrument Serif headline did. Module 7 draws the particles with the same four numbers. */
.hero__title { font-family: var(--madena); font-weight: 400; font-size: clamp(32px, 6.58vw, 90px); line-height: .94; letter-spacing: -.004em; word-spacing: -.044em; margin: 12px 0 18px; }
.hero__title .ht-tog { font-family: var(--times); font-style: italic; font-size: 1.111em; letter-spacing: -.0105em; line-height: .846; }
.hero.has-pc .hero__title { display: none; }
.hero__title .ht-last { color: var(--blue-100); }
/* 12px larger than the 11px label it was, then 15% larger again (26.45px on desktop), easing down on smaller screens */
.hero__hint { font-size: clamp(17.25px, 1.84vw, 26.45px); color: var(--blue-100); margin: 4px 0 18px; opacity: 0; transition: opacity .9s .4s; }
.is-ready .hero__hint { opacity: 1; }
.hero__sub {
  position: relative; display: inline-block; max-width: 52ch; margin: 0 auto 30px;
  font-size: clamp(16px, 1.35vw, 19px); line-height: 1.5; color: rgba(255,255,255,.88);
  opacity: 0; transform: translateY(14px); transition: opacity .9s .5s, transform .9s .5s var(--ease-out);
}
.is-ready .hero__sub { opacity: 1; transform: none; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 16px; position: relative; opacity: 0; transition: opacity .9s .7s; }
.is-ready .hero__cta { opacity: 1; }
/* 2.32: the do not drag note sits in the dark open space right of the paragraph (the climbers
   stand to the left), its arrow stopping short of the words */
.hero__subwrap { position: relative; display: inline-block; }
/* The paragraph wears a selection frame: dashed box, a handle on each corner (put back 13 Sep, without the old tag) */
.hero__sel { position: absolute; inset: -8px -14px; border: 1.5px dashed rgba(255,255,255,.85); border-radius: 7px; pointer-events: none; }
.hero__sel b { position: absolute; width: 9px; height: 9px; background: #fff; border: 1.6px solid var(--blue); border-radius: 2px; }
.hero__sel b:nth-child(1) { left: -5px; top: -5px; } .hero__sel b:nth-child(2) { right: -5px; top: -5px; }
.hero__sel b:nth-child(3) { left: -5px; bottom: -5px; } .hero__sel b:nth-child(4) { right: -5px; bottom: -5px; }
@media (max-width: 760px) { .hero__sel { display: none; } }
.hand--drag { position: absolute; left: calc(100% + 80px); top: 6px; white-space: nowrap; --lead: 1.6s; }
.hand--drag .mark--arrow { left: -62px; top: 16px; width: 58px; height: 30px; transform: scaleX(-1) rotate(20deg); }
@media (max-width: 1100px), (hover: none), (pointer: coarse) { .hand--drag { display: none; } }
/* 2.35: the note sits past the end of the button row, so its arrow reaches the button without crossing it */
.hand--hero { position: absolute; left: calc(100% + 72px); top: 40px; white-space: nowrap; --lead: 1.4s; }
.hand--hero .mark--arrow { left: -68px; top: -30px; width: 60px; height: 32px; transform: scaleX(-1) rotate(-6deg); }
@media (max-width: 1100px) { .hand--hero { position: static; margin-top: 6px; } .hand--hero .mark--arrow { display: none; } }

/* drag measurement overlay + the escort */
#phMeas { position: fixed; inset: 0; z-index: 85; pointer-events: none; opacity: 0; transition: opacity .14s; width: 100%; height: 100%; }
#phMeas line { stroke: var(--blue); stroke-width: 1.7; stroke-dasharray: 6 6; animation: phdash .6s linear infinite; }
@keyframes phdash { to { stroke-dashoffset: -12; } }
#phMeasLbl { position: fixed; z-index: 86; pointer-events: none; opacity: 0; transition: opacity .14s; background: var(--blue); color: #fff; font: 600 12px var(--mono); padding: 4px 9px; border-radius: 6px; transform: translate(-50%, -150%); white-space: nowrap; }
#phGhost { position: fixed; z-index: 87; pointer-events: none; opacity: 0; display: flex; align-items: flex-start; will-change: left, top, opacity; }
#phGhost svg, #reelCur svg, .pgcur svg { width: 22px; height: 22px; filter: drop-shadow(0 3px 6px rgba(9,13,26,.45)); }
#phGhost .phg-stack, #reelCur .phg-stack, .pgcur .phg-stack { margin: 14px 0 0 -6px; }
#phGhost .phg-name, #reelCur .phg-name, .pgcur .phg-name { display: inline-block; background: var(--ai-estella); color: var(--ai-estella-ink); font: 600 11px var(--mono); letter-spacing: .03em; padding: 2px 8px; border-radius: 6px; border-top-left-radius: 0; box-shadow: 0 6px 16px -6px rgba(1,34,127,.7); }
#phGhost.is-truman .phg-name, #reelCur.is-truman .phg-name, .pgcur.is-truman .phg-name { background: var(--ai-truman); color: var(--ai-truman-ink); }
#phGhost .phg-cmt { margin-top: 5px; background: #fff; color: var(--ink); font: 600 12.5px var(--sans); padding: 5px 11px; border-radius: 11px 11px 11px 3px; white-space: nowrap; box-shadow: 0 14px 30px -14px rgba(9,13,26,.5); }

/* =========================================================
   11. CLIENT MARQUEE
   ========================================================= */
.clients { position: relative; background: var(--ink); color: var(--text-on-ink); padding: 44px 0 50px; border-top: 1px solid var(--line-ink); border-bottom: 1px solid var(--line-ink); overflow: hidden; }
/* Mk. 7 (3.1): the dot field sits under everything in the section; module 26b draws it */
.clients__dots { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.clients > *:not(.clients__dots) { position: relative; z-index: 1; }
/* 4.01 to 4.03: "Partnered with", bigger, set in one of three faces (?reelfont=mono|times|madena to compare) */
.clients__label { text-align: center; color: var(--blue-300); margin-bottom: 20px; font-size: clamp(16.17px, 1.32825vw, 19.635px); letter-spacing: .14em; } /* Mk. 7 (3.2): the site's eyebrow, no longer the Times italic compare face */
/* Mk. 7 (2.7): the label and, beside it, the handwritten invitation to click a name; its arrow drops toward the names */
.clients__head { position: relative; display: flex; justify-content: center; align-items: center; gap: 30px; margin-bottom: 18px; }
.clients__head .clients__label { margin-bottom: 0; }
.hand--reel { color: var(--pen); font-size: clamp(19px, 1.5vw, 24px); white-space: nowrap; padding-right: 64px; }
.hand--reel .mark--arrow { right: 4px; top: 16px; width: 56px; height: 30px; transform: rotate(38deg); }
@media (max-width: 760px) { .clients__head { flex-direction: column; gap: 4px; } .hand--reel { padding-right: 0; font-size: 19px; } .hand--reel .mark--arrow { display: none; } }
.clients__label[data-font="times"] { font-family: var(--times); font-style: italic; font-size: clamp(23px, 1.95vw, 28px); letter-spacing: 0; text-transform: none; color: var(--text-on-ink); }
.clients__label[data-font="madena"] { font-family: var(--madena); font-size: clamp(22px, 1.85vw, 27px); letter-spacing: .01em; text-transform: none; color: var(--text-on-ink); }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
/* 4.04: 64s a lap, three quarters of the old 48s pace. Module 26 eases playbackRate instead of pausing (4.05, 4.09). */
.marquee__track { display: flex; width: max-content; animation: marquee 64s linear infinite; }
.marquee__list { display: flex; align-items: center; }
.marquee__list > li { display: flex; align-items: center; font-family: var(--serif); font-size: clamp(26px, 3vw, 40px); letter-spacing: -.02em; white-space: nowrap; color: rgba(242,243,247,.55); }
.marquee__list > li:not(.reel__sep) { padding: 0 34px; }
/* 4.07, 4.08: the names are buttons; they only brighten, the stars do the moving */
.reel__name { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 6px 0; margin: 0; cursor: pointer; line-height: 1.15; transition: color .35s var(--e-soft); }
.marquee__list > li:has(.reel__name) { padding: 0 28px; }
.reel__name:hover, .reel__name.is-on, .reel__name:focus-visible { color: var(--text-on-ink); }
.reel__name:focus-visible { outline: 1.5px solid #fff; outline-offset: 4px; border-radius: 4px; }
/* 4.06: the stars either side of the hovered name grow and spin (module 26 runs the turn) */
.reel__sep { width: 12px; height: 12px; flex: none; transition: transform .45s var(--e-pop); }
.reel__sep.is-hot { transform: scale(1.6); }
.reel__star { display: block; width: 12px; height: 12px; background: var(--blue); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); transition: background-color .35s; }
.reel__sep.is-hot .reel__star { background: var(--accent-200); } /* 3.3 */
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

/* 4.10: the hook under a hovered name */
.reel-tease { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; display: flex; align-items: center; gap: 8px; background: #fff; color: var(--ink); font: 600 14px/1.2 var(--sans); padding: 8px 13px 8px 10px; border-radius: 9px; white-space: nowrap; box-shadow: 0 16px 34px -14px rgba(0,0,0,.7); opacity: 0; transform: translate(-50%, 6px); transition: opacity .22s, transform .38s var(--e-ui); }
.reel-tease::before { content: ''; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; background: #fff; transform: translateX(-50%) rotate(45deg); border-radius: 2px 0 0 0; }
.reel-tease svg { width: 14px; height: 14px; fill: var(--blue); flex: none; }
.reel-tease.is-on { opacity: 1; transform: translate(-50%, 0); }
body.menu-open .reel-tease, body.rpop-open .reel-tease { opacity: 0 !important; }

/* 4.12 to 4.22: one project popup, centred, dragged out by an AI cursor, closed by clicking off it */
.rpop { position: fixed; inset: 0; z-index: 84; display: grid; place-items: center; padding: 24px; }
.rpop[hidden] { display: none; }
.rpop::before { content: ''; position: absolute; inset: 0; background: rgba(9,13,26,.66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .35s var(--e-soft); }
.rpop.is-open::before { opacity: 1; }
.rpop.is-closing { pointer-events: none; }
.rpop__panel { position: relative; width: min(940px, 100%); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: auto; overscroll-behavior: contain; background: var(--paper); color: var(--text); border-radius: 16px; box-shadow: 0 50px 100px -40px rgba(0,0,0,.8); outline: none; transition: opacity .24s var(--e-soft), transform .3s var(--e-ui); }
.rpop.is-plain .rpop__panel { opacity: 0; transform: scale(.97); }
.rpop.is-plain.is-open .rpop__panel { opacity: 1; transform: none; }
.rpop.is-closing .rpop__panel { opacity: 0; transform: scale(.985); }
.rpop__media { position: relative; height: clamp(160px, 29vh, 250px); background: var(--blue); border-radius: 16px 16px 0 0; overflow: hidden; }
.rpop__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rpop__plate { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 14px; padding: 22px 28px; color: #fff; font-family: var(--serif); font-size: clamp(30px, 3.4vw, 46px); line-height: 1; letter-spacing: -.02em; background-color: var(--blue); background-image: linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px); background-size: 32px 32px; background-position: -1px -1px; }
.rpop__plate[hidden] { display: none; }
.rpop__plate svg { width: 30px; height: 30px; fill: #fff; flex: none; margin-bottom: 4px; }
/* 4.20 */
.rpop__off { position: absolute; top: 14px; right: 14px; background: rgba(9,13,26,.74); color: #fff; font-size: 10.5px; padding: 5px 10px; border-radius: 6px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.rpop__body { display: grid; grid-template-columns: 1.08fr 1fr; gap: 30px; padding: 26px 28px 28px; align-items: start; }
.rpop__who { color: var(--blue); margin: 0 0 10px; }
.rpop__title { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.02; letter-spacing: -.02em; color: var(--ink); margin: 0 0 12px; text-wrap: balance; }
.rpop__text { font: 400 15px/1.55 var(--sans); color: var(--ink-soft); margin: 0 0 22px; }
.rpop__cta { display: inline-flex; align-items: center; gap: 10px; background: var(--blue); color: #fff; font: 600 15px var(--sans); padding: 12px 18px 12px 20px; border-radius: 999px; text-decoration: none; transition: background-color .25s; }
.rpop__cta[hidden] { display: none; }
.rpop__cta svg { transition: transform .35s var(--e-ui); }
.rpop__cta:hover { background: var(--blue-600); }
.rpop__cta:hover svg { transform: translateX(3px); }
.rpop__cta:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
/* 4.18: the result on top, the four touch points under it */
.rpop__bento { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rpop__bento li { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 70px; padding: 11px 13px 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; font: 600 14px/1.25 var(--sans); color: var(--ink); }
.rpop__bento li .lab { color: var(--blue); font-size: 10px; letter-spacing: .12em; }
.rpop__bento li.rpop__stat { grid-column: 1 / -1; flex-direction: row; align-items: flex-end; min-height: 96px; background: var(--blue); border-color: var(--blue); color: #fff; }
.rpop__stat strong { font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 4.2vw, 58px); line-height: .85; letter-spacing: -.02em; }
.rpop__stat span { font: 600 10.5px/1.45 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-align: right; max-width: 17ch; color: #fff; }
/* 4.13: the selection frame the cursor drags; white tool chrome over the dark scrim */
.rpop__frame { position: fixed; left: 0; top: 0; width: 0; height: 0; border: 1.5px solid #fff; border-radius: 16px; pointer-events: none; opacity: 0; transition: opacity .2s; }
.rpop__frame b { position: absolute; width: 9px; height: 9px; background: #fff; border: 1.5px solid var(--blue); border-radius: 2px; }
.rpop__frame b:nth-child(1) { left: -5px; top: -5px; } .rpop__frame b:nth-child(2) { right: -5px; top: -5px; }
.rpop__frame b:nth-child(3) { left: -5px; bottom: -5px; } .rpop__frame b:nth-child(4) { right: -5px; bottom: -5px; }
#reelCur { position: fixed; left: 0; top: 0; z-index: 88; pointer-events: none; opacity: 0; display: flex; align-items: flex-start; will-change: transform, opacity; }
#reelCur svg { transition: transform .12s; transform-origin: 20% 12%; }
#reelCur.is-grab svg { transform: scale(.86); }
@media (max-width: 760px) {
  /* a bottom sheet that always leaves a band of page above it to tap off on */
  .rpop { padding: 96px 10px 10px; align-items: end; }
  .rpop__panel { max-height: calc(100vh - 106px); max-height: calc(100dvh - 106px); }
  .rpop__media { height: 170px; }
  .rpop__body { grid-template-columns: 1fr; gap: 22px; padding: 20px 18px 20px; }
  .rpop__title { font-size: 30px; }
}

/* =========================================================
   12. THE STUDIO: statement, then the bento
   ========================================================= */
/* clip sideways only: the red pen ring and a thrown box may reach past the window edge, and must never scroll the page */
.studio { position: relative; padding: clamp(90px, 13vh, 160px) 0 clamp(80px, 12vh, 150px); overflow-x: clip; }
/* Mk. 7 (16 Sep): the bento and the work carousel are both on paper and now sit next to each other, so two full
   section paddings met in the middle and read as a hole. Where they touch, each side gives up about half. */
.studio:has(+ .work) { padding-bottom: clamp(28px, 4vh, 52px); }
.studio + .work .sect-head { padding-top: clamp(28px, 4vh, 52px); }
.studio__inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.studio__head { display: flex; align-items: center; gap: 22px; margin-bottom: 30px; }
.studio__head .lab { color: var(--blue); }
.hand--studio { color: var(--pen); margin-left: 50px; }
/* tail level with the note's first letter, head dropping toward the statement */
.hand--studio .mark--arrow { left: -77px; top: 16px; transform: scaleX(-1) rotate(14deg); }
/* two lines on anything wider than a phone: the break sits after "simple bet:" and the size scales with the window */
.mission__text { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 6.5vw, 100px); line-height: 1.12; letter-spacing: -.02em; }
.mission__text .w { color: rgba(31,41,55,.16); transition: color .35s; }
.mission__text .w.is-lit { color: var(--text); }
.mission__text .circled .w.is-lit { color: var(--blue); }
/* at this size the standard circle reached into the foot row: keep it tighter to the words */
/* the circle rides outside the letters: a little room either side of the words and a flatter bottom, so the stroke
   clears the neighbouring "a", the colon and the line below */
.mission__text .circled:not(.circled--scribble) { margin: 0 .28em 0 .16em; }
.mission__text .mark--circle { left: -7%; width: 114%; top: -15%; height: 125%; }
/* "human stuff wins." gets a scribbled underline, several passes over itself, instead of a circle */
.mark--scribble { left: -1%; width: 102%; top: 86%; height: 26%; }
.mark--scribble path { stroke-width: 2.6; transition-duration: 1.7s; }
.mission__foot { margin: 0; color: var(--text-muted); }
/* 5.05, 5.07: the foot line and the about button in one row; the note's arrow points at the button and leans in on hover */
.studio__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 40px; margin-top: 22px; }
@media (min-width: 901px) { .studio__foot { flex-wrap: nowrap; } .mission__foot { min-width: 0; } .studio__more { flex: none; } }
.studio__more { display: flex; align-items: center; justify-content: flex-end; gap: 0; margin-left: auto; }
.studio__cta { position: relative; flex: none; white-space: nowrap; }
.hand--about { color: var(--pen); margin-right: 94px; white-space: nowrap; }
.hand--about .mark--arrow { right: -86px; top: 10px; transform: rotate(-14deg); transition: translate .5s var(--e-ui); }
.studio__more:hover .hand--about .mark--arrow, .studio__more:has(.studio__cta:focus-visible) .hand--about .mark--arrow { translate: 7px 0; }
@media (max-width: 600px) {
  /* the note sits above the button and its arrow drops onto it */
  .studio__more { width: 100%; flex-direction: column; align-items: flex-end; gap: 6px; }
  .hand--about { font-size: 21px; margin: 0 62px 0 0; }
  .hand--about .mark--arrow { width: 50px; height: 26px; right: -58px; top: 10px; transform: rotate(24deg); }
  .studio__cta { font-size: 14.5px; gap: 10px; padding: 14px 18px 14px 20px; }
}
@media (max-width: 329px) { .hand--about { display: none; } }

/* Phase 6 (6.03, 6.14): six boxes of mixed sizes, with room between them so a lifted, leaning box never meets its
   neighbour. Areas: m metrics, o things we offer, p pillars, f founders, r reply time, c Designed Live, which runs
   down the right of the pillars and the founders and reply boxes. */
.bento { margin-top: clamp(60px, 8vh, 100px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: auto; gap: 28px;
  grid-template-areas: "m m m m m m m m o o o o" "p p p p p p p c c c c c" "f f f f r r r c c c c c"; }
.cell--stats { grid-area: m; } .cell--offers { grid-area: o; } .cell--pillars { grid-area: p; } .cell--founders { grid-area: f; }
.cell--reply { grid-area: r; } .cell--craft { grid-area: c; }
@media (max-width: 1199px) { .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas: "m m m m m m" "o o o c c c" "p p f f r r"; } }
@media (max-width: 620px) { .bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "m" "o" "p" "f" "r" "c"; gap: 22px; } }
.cell { position: relative; min-width: 0; background: #fff; border: 1px solid var(--line-2); border-radius: 18px; padding: 24px; box-shadow: 0 20px 50px -32px rgba(1,34,127,.35); transition: box-shadow .3s var(--e-ui); display: flex; flex-direction: column; justify-content: center; gap: 12px; }
/* 6.21: a deeper shadow while hovered; module 28 adds the lift and the lean (6.22) */
.cell:hover { box-shadow: 0 46px 80px -34px rgba(1,34,127,.5), 0 16px 30px -18px rgba(1,34,127,.3); }
/* Mk. 7 (15 Sep): every box is its own card again. The 2.3 hairline grid, where the six sat on one line with a
   single pixel between them, is gone: real gaps so the lift and the lean have room to move, the same radius on all
   four corners of every box at every width, and a soft shadow at rest that deepens on hover. The ink metrics box,
   the blue pillars and Designed Live keep their own grounds (2.5). A hovered box lifts over its neighbours. */
.bento { gap: clamp(16px, 1.35vw, 22px); background: none; border: 0; }
.cell { background: var(--paper); border: 1px solid var(--line-2); border-radius: 22px; box-shadow: 0 18px 44px -30px rgba(1,34,127,.4); padding: 52px 26px 26px; }
.cell:hover { z-index: 3; }
.cell--stats, .cell--pillars, .cell--craft { border-color: transparent; }
/* 2.4: a handwritten note in the top left of every box (drafts, see PROGRESS.md), a way onward at the bottom */
.cell__note { position: absolute; left: 22px; top: 11px; z-index: 2; font-size: clamp(18px, 1.35vw, 22px); color: var(--pen); transform: rotate(-3deg); pointer-events: none; white-space: nowrap; max-width: calc(100% - 170px); overflow: hidden; text-overflow: ellipsis; }
/* the three dark boxes sit inside a paper section, so they carry the dark ground's pens themselves */
.cell--stats, .cell--pillars, .cell--craft { --pen: var(--blue-100); --pen-alert: var(--blue-100); }
.cell__go, .reply__go { display: inline-flex; gap: 6px; font: 600 14.5px var(--sans); color: var(--blue); margin-top: auto; padding-top: 12px; }
.cell__go span, .reply__go span { transition: translate .3s var(--e-ui); }
.cell__go:hover span, .cell__go:focus-visible span, .reply__go:hover span, .reply__go:focus-visible span { translate: 4px 0; }
.cell--pillars .cell__go { color: #fff; }
.cell--stats .cell__go { color: var(--blue-100); }
/* 2.5: the metrics box and the pillars carry the brand canvas ground (grid, halftone corners, drifting marks) */
.cell--stats, .cell--pillars { overflow: hidden; }
.cell--stats > .canvas__ground, .cell--pillars > .canvas__ground { z-index: 0; }
.cell--stats > *:not(.canvas__ground):not(.clbl):not(.cell__note), .cell--pillars > *:not(.canvas__ground):not(.clbl):not(.cell__note) { position: relative; z-index: 1; }
.cell--stats .clbl, .cell--pillars .clbl { z-index: 2; }
.cell--stats .canvas__grid { background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); }
.cell--stats .canvas__dots { opacity: .3; }
.cell--stats .canvas__star { fill: var(--blue-300); }
/* Mk. 7.6: the drifting stars used to be white, so wherever one passed behind the pillar lines it lifted the
   blue and the letters over it went thin (the "her" of "together" read as a different font). Filling them with
   the deep blue keeps the decoration and lifts white text from 4.9:1 to 6.2:1 instead of dropping it. */
.cell--pillars .canvas__star { fill: var(--blue-700); }
.cell--stats .canvas__star, .cell--pillars .canvas__star { animation-name: driftBox; }
@keyframes driftBox { from { transform: translateX(-40%) rotate(0); } to { transform: translateX(900px) rotate(24deg); } }
/* the entrance moves on translate, so module 28's transform (lean, scatter) never fights the stagger */
#bento.stagger > .cell { transform: none; translate: 0 20px; transition: opacity .55s var(--e-soft), translate .55s var(--e-soft), box-shadow .3s var(--e-ui); }
#bento.stagger.is-in > .cell { translate: 0 0; transition-delay: calc(var(--i, 0) * 85ms); }
#bento.stagger.is-in > .cell:hover { transition-delay: 0s; }
.cell.is-flying { z-index: 6; }
/* 6.02: corner labels at 12px in a grey that holds 5.9:1 on white */
.cell .clbl { position: absolute; top: 15px; right: 18px; font: 600 12px var(--mono); letter-spacing: .12em; color: var(--ink-faint); }
.cell__foot { font-size: 14px; line-height: 1.4; color: var(--ink-soft); }

/* 6.05 to 6.07: six numbers. Module 28 gives the grid a fixed height measured to fit the longest story in a widened
   column and the tallest number in a narrowed one, so hovering only trades space between the stats: the box itself
   never changes size, and type never scales. */
.cell--stats { background: var(--ink); border-color: transparent; color: #fff; justify-content: flex-start; gap: 14px; padding: 50px 20px 20px; }
.cell--stats .clbl { color: rgba(255,255,255,.66); }
.stat-grid { flex: 1 0 auto; display: grid; gap: 8px;
  grid-template-columns: minmax(0, var(--c0, 1fr)) minmax(0, var(--c1, 1fr)) minmax(0, var(--c2, 1fr));
  grid-template-rows: minmax(0, var(--r0, 1fr)) minmax(0, var(--r1, 1fr));
  transition: grid-template-columns .5s var(--ease-out), grid-template-rows .5s var(--ease-out); }
.stat { position: relative; overflow: hidden; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 15px 13px; border-radius: 12px; text-align: left; color: #fff; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); transition: background .3s, border-color .3s, opacity .3s; }
.stat-grid.has-open .stat:not(.is-open) { opacity: .6; }
.stat.is-open { background: rgba(7,72,254,.22); border-color: rgba(128,161,254,.45); }
.stat .num { font-family: var(--serif); font-size: clamp(40px, 3.3vw, 54px); letter-spacing: -.02em; line-height: .95; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat .cap { font: 500 12px/1.35 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--blue-100); }
.stat__more { position: absolute; left: 15px; right: 15px; bottom: 13px; display: grid; gap: 5px; opacity: 0; translate: 0 10px; transition: opacity .2s, translate .35s var(--ease-out); pointer-events: none; }
.stat.is-open .stat__more { opacity: 1; translate: 0 0; transition-delay: .2s; }
/* the measuring copy (module 28) lays the story out in the flow */
.stat.is-measure .stat__more { position: static; opacity: 1; translate: none; margin-top: 8px; }
.stat__who { font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.stat__why { font-size: 15px; line-height: 1.42; color: rgba(255,255,255,.88); max-width: 48ch; }
.stat-story { display: none; }
@media (max-width: 620px) {
  .stat-grid { flex: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; }
  .stat__more { display: none; }
  .stat-story { display: grid; align-content: start; gap: 5px; padding: 12px 2px 0; border-top: 1px solid rgba(255,255,255,.12); font-size: 15px; line-height: 1.42; color: rgba(255,255,255,.88); }
  .stat-story b { font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
}

/* 6.08 to 6.13: the things we offer, two to a row. Nothing opens; services on the way are taped off. */
.cell--offers { justify-content: flex-start; gap: 12px; padding: 50px 20px 20px; }
.offers__title { font-family: var(--serif); font-weight: 400; font-size: clamp(27px, 2.1vw, 32px); line-height: 1; letter-spacing: -.015em; color: var(--ink); }
.offer-list { flex: 1 0 auto; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(42px, auto); gap: 10px; }
.offer-list > li { display: grid; min-width: 0; }
/* a little extra room above the taped rows, for the tape */
.offer-list > li:has(.offer--soon) { margin-top: 4px; }
.offer { position: relative; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 6px 11px; border: 1.5px solid var(--line); border-radius: 11px; font-size: 14.5px; font-weight: 600; line-height: 1.15; color: var(--ink); transition: border-color .2s, background .2s, color .2s; }
.offer svg { width: 17px; height: 17px; flex: none; stroke: currentColor; fill: none; }
.offer .ico-6 rect { fill: currentColor; stroke: none; }
.offer__name { min-width: 0; }
a.offer:hover, a.offer:focus-visible { border-color: var(--blue); background: var(--soft); color: var(--blue); }
a.offer:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.offer--soon { border-style: dashed; color: #5F6977; background: repeating-linear-gradient(-45deg, rgba(31,41,55,.02) 0 8px, rgba(31,41,55,.06) 8px 16px); padding-top: 17px; cursor: default; }
.offer--soon svg { opacity: .75; }
.offer__tape { position: absolute; left: 12px; right: 12px; top: -10px; height: 20px; display: grid; place-items: center; rotate: -2deg; background: repeating-linear-gradient(-45deg, #F5C518 0 7px, #090D1A 7px 14px); box-shadow: 0 3px 8px -3px rgba(9,13,26,.45); pointer-events: none; }
.offer-list > li:nth-child(even) .offer__tape { rotate: 2.5deg; left: 16px; right: 8px; }
.offer__tape span { background: #F5C518; color: #090D1A; font: 700 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px; white-space: nowrap; }
/* 6.04: outlines draw in from one end and out from the other at an even pace, so every loop meets its start */
.ico-1 *, .ico-2 *, .ico-3 *, .ico-7 circle, .ico-7 .ico-7__arm { stroke-dasharray: 1; stroke-dashoffset: 1; animation: icoLoop 3.6s linear infinite; }
.ico-1 path { animation-delay: -.6s; }
.ico-2 * { animation-duration: 3.2s; animation-delay: -1.1s; }
.ico-3 * { animation-duration: 4.2s; animation-delay: -2.2s; }
.ico-3 path { animation-delay: -2.9s; }
/* SEO & AEO: the glass draws itself round like its neighbours and the spark beside it twinkles, the pulse Motion and Data use */
.ico-7 circle, .ico-7 .ico-7__arm { animation-duration: 3.8s; animation-delay: -.4s; }
.ico-7 .ico-7__arm { animation-delay: -1.5s; }
.offer .ico-7 .ico-7__spark { fill: currentColor; stroke: none; animation: icoPulse 1.8s ease-in-out infinite; }
.ico-4 path { animation: icoPulse 2.4s ease-in-out infinite; }
.ico-6 rect { animation: icoPulse 1.6s ease-in-out infinite; }
.ico-6 rect:nth-child(2) { animation-delay: -1.2s; } .ico-6 rect:nth-child(3) { animation-delay: -.8s; } .ico-6 rect:nth-child(4) { animation-delay: -.4s; }
@keyframes icoLoop { 0% { stroke-dashoffset: 1; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes icoPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* the craft card: a scripted design session on loop (module 13) */
.cell--craft { padding: 0; overflow: hidden; background: var(--ink); border-color: transparent; min-height: 240px; }
.cell--craft .cell__note { z-index: 6; }
.cell--craft::after { border-radius: 22px; }
.fd-stage { position: relative; width: 100%; height: 100%; min-height: 240px; overflow: hidden; background-image: radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 24px 24px; }
.fd-art { position: absolute; left: 8%; top: 12%; width: 0; height: 0; background: #111a33; border: 1px solid rgba(255,255,255,.1); border-radius: 6px; overflow: hidden; transition: width 1s cubic-bezier(.45,0,.12,1), height 1s cubic-bezier(.45,0,.12,1); }
.fd-art.sel { outline: 1.5px solid #fff; outline-offset: 2px; }
.fd-art .h { opacity: 0; width: 8px; height: 8px; }
.fd-art.sel .h { opacity: 1; animation: hpop .3s var(--e-pop) forwards; }
.fd-art .h.tl { left: -4px; top: -4px; } .fd-art .h.tr { right: -4px; top: -4px; } .fd-art .h.bl { left: -4px; bottom: -4px; } .fd-art .h.br { right: -4px; bottom: -4px; }
.fd-inner { padding: 14px 16px; }
.fd-et { font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--blue-100); opacity: 0; transform: translateY(6px); transition: opacity .55s, transform .55s cubic-bezier(.34,1.5,.5,1); }
.fd-et.on { opacity: 1; transform: none; }
.fd-hl { font-family: var(--serif); font-size: clamp(19px, 1.8vw, 25px); line-height: 1; letter-spacing: -.01em; color: #fff; margin-top: 8px; }
.fd-hl span { display: block; clip-path: inset(0 100% -14% 0); transition: clip-path .6s cubic-bezier(.62,0,.14,1); }
.fd-hl span.on { clip-path: inset(0 0 -14% 0); }
.fd-o { color: var(--blue-200); font-style: italic; }
.fd-cta { display: inline-flex; align-items: center; margin-top: 14px; background: var(--blue); color: #fff; font: 600 12px var(--sans); padding: 7px 13px; border-radius: 7px; opacity: 0; transform: scale(.6); transition: opacity .45s, transform .5s cubic-bezier(.34,1.7,.5,1), box-shadow .4s; }
.fd-cta.on { opacity: 1; transform: none; box-shadow: 0 13px 28px -10px rgba(7,72,254,.9); }
.fd-guide { position: absolute; left: 16px; right: 16px; border-top: 1.5px dashed var(--pink); opacity: 0; transition: opacity .3s; }
.fd-guide.on { opacity: 1; }
.fd-gap { position: absolute; font: 600 10.5px var(--mono); background: var(--pink); color: #fff; padding: 1px 5px; border-radius: 3px; opacity: 0; transition: opacity .3s; }
.fd-gap.on { opacity: 1; }
.fd-cur { position: absolute; left: 11%; top: 16%; z-index: 5; transition: left .55s var(--e-ui), top .55s var(--e-ui), transform .18s; }
.fd-cur svg { width: 17px; height: 17px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.fd-cur.press { transform: scale(.8); }
.fd-cur .fdname { position: absolute; left: 12px; top: 12px; background: var(--ai-truman); color: var(--ai-truman-ink); font: 600 10.5px var(--mono); padding: 1px 6px; border-radius: 4px; border-top-left-radius: 0; white-space: nowrap; }
.fd-cur.flip .fdname { left: auto; right: 11px; border-top-left-radius: 4px; border-top-right-radius: 0; }
.fd-dim { position: absolute; font: 600 10.5px var(--mono); background: #fff; color: var(--ink); padding: 2px 6px; border-radius: 4px; opacity: 0; transition: opacity .3s; white-space: nowrap; }
.fd-dim.on { opacity: 1; }
.fd-rip { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: rgba(7,72,254,.55); transform: translate(-50%, -50%) scale(.4); opacity: 0; pointer-events: none; }
.fd-rip.go { animation: fdrip .55s ease-out forwards; }
@keyframes fdrip { 0% { opacity: .8; transform: translate(-50%, -50%) scale(.4); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(3.6); } }
.fd-cap { position: absolute; left: 16px; bottom: 14px; font: 600 12px var(--mono); letter-spacing: .14em; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.55); z-index: 4; }

/* 6.11: the three pillars, on Pleiad blue */
.cell--pillars { background: var(--blue); border-color: transparent; color: #fff; justify-content: flex-start; padding: 50px 24px 22px; }
.cell--pillars .clbl { color: #fff; }
.pillars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pillar { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; row-gap: 3px; }
.pillar svg { width: 19px; height: 19px; fill: #fff; grid-row: span 2; margin-top: 3px; animation: pillarWink 4.5s ease-in-out infinite; animation-delay: calc(var(--p) * -1.5s); transition: rotate .7s var(--e-pop); }
.pillar:hover svg { rotate: 144deg; }
.pillar b { font-family: var(--serif); font-weight: 400; font-size: clamp(25px, 1.9vw, 29px); line-height: 1; letter-spacing: -.01em; }
.pillar b em { color: var(--blue-100); }
.pillar span { font-size: 14.5px; line-height: 1.35; color: rgba(255,255,255,.9); }
/* on the wide desktop row the three pillars stand side by side */
@media (min-width: 1200px) { .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
@keyframes pillarWink { 0%, 100% { transform: scale(.82); opacity: .7; } 50% { transform: scale(1.12); opacity: 1; } }

/* 6.19: founders, names that go to the about page */
.cell--founders { justify-content: flex-start; gap: 14px; padding: 50px 24px 22px; }
.founder { display: flex; align-items: center; gap: 14px; }
.founder__av { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: none; background: var(--blue-100); }
.founder__av img { width: 100%; height: 100%; object-fit: cover; }
.founder__av--e { background: var(--blue-200); display: grid; place-items: center; }
.founder__av--e .ini { font: 600 18px var(--mono); color: var(--ink); }
.founder__name { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 17px; line-height: 1.25; color: var(--ink); background: linear-gradient(var(--blue), var(--blue)) 0 100% / 0 1.5px no-repeat; transition: background-size .35s var(--e-ui), color .2s; }
.founder__name:hover, .founder__name:focus-visible { color: var(--blue); background-size: 100% 1.5px; }
.founder__go { display: inline-block; transition: translate .3s var(--e-ui); }
.founder__name:hover .founder__go, .founder__name:focus-visible .founder__go { translate: 4px 0; }
.founder .lab { display: block; margin-top: 3px; color: var(--ink-faint); font-size: 12px; letter-spacing: .08em; }
.avail { display: inline-flex; align-items: center; gap: 8px; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #15803D; margin-top: 2px; }
.avail i { width: 8px; height: 8px; border-radius: 50%; background: var(--grn); animation: footdot 2.4s infinite; }
@keyframes footdot { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); } 100% { box-shadow: 0 0 0 6px rgba(34,197,94,0); } }

/* reply time: the ring sweeps round at an even pace, drawing in and out with no reset */
/* Mk. 7 (15 Sep): the ring used to run icoLoop, drawing in and back out forever, so at any given moment it was a
   broken arc beside a number. It draws once now and stays closed, the number and its unit read as one line under
   it, and the stack is centred so the box is not two thirds air. */
.cell--reply { justify-content: center; gap: 18px; padding: 50px 24px 24px; }
.reply__top { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.reply__ring { position: relative; width: 92px; height: 92px; flex: none; }
.reply__ring svg { width: 100%; height: 100%; rotate: -90deg; }
.reply__ring circle { fill: none; stroke-width: 5; }
.reply__track { stroke: var(--soft); }
.reply__sweep { stroke: var(--blue); stroke-dasharray: 1; stroke-dashoffset: 1; animation: replyDraw 1.7s var(--ease-out) .5s forwards; }
@keyframes replyDraw { to { stroke-dashoffset: 0; } }
.reply__ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-weight: 400; font-size: 38px; color: var(--ink); }
.reply__big { font-family: var(--serif); font-size: clamp(23px, 1.75vw, 29px); line-height: 1.05; color: var(--ink); max-width: 15ch; }
.reply__go { margin-top: 6px; }

/* 6.26 to 6.28: the warning, in red pen at the bottom right corner. Not Pleiad blue: it is not a call to action.
   The words write in when scrolled to and give a small shake now and then. Under the pointer a pen circles them once
   and the ring stays while the pointer does; it goes the moment the pointer leaves (6.27, after icebergdoc.org). */
.egg-row { display: flex; justify-content: flex-end; margin-top: 44px; padding-right: 14px; }
.egg.hand { color: var(--pen); font-size: clamp(26px, 2.3vw, 35px); background: none; border: 0; padding: 12px 26px; cursor: pointer; transform: rotate(-5deg); text-align: right; }
.egg.is-in { animation: eggShake 7s ease-in-out 3s infinite; }
@keyframes eggShake { 0%, 88%, 100% { rotate: 0deg; } 90% { rotate: -4deg; } 92% { rotate: 4deg; } 94% { rotate: -3deg; } 96% { rotate: 2deg; } }
.egg:hover, .egg:focus-visible { animation-play-state: paused; }
.egg:focus-visible { outline: 2px dashed var(--pen); outline-offset: 4px; border-radius: 10px; }
.egg__loop { position: absolute; left: -9%; top: -26%; width: 118%; height: 150%; overflow: visible; pointer-events: none; }
.egg__loop path { fill: none; stroke: var(--pen); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: opacity .15s, stroke-dashoffset 0s linear .15s; }
.egg:hover .egg__loop path, .egg:focus-visible .egg__loop path { opacity: 1; stroke-dashoffset: 0; transition: opacity 0s, stroke-dashoffset 1.7s cubic-bezier(.4,.1,.3,1); }
.egg__sub { position: absolute; right: 40px; top: calc(100% + 14px); font-size: .6em; white-space: nowrap; opacity: 0; translate: 0 -5px; transition: opacity .25s, translate .3s var(--e-ui); pointer-events: none; }
.egg:hover .egg__sub, .egg:focus-visible .egg__sub { opacity: 1; translate: 0 0; }
.egg.is-busy { pointer-events: none; }
@media (max-width: 620px) { .egg-row { padding-right: 14px; } .egg.hand { padding: 12px 10px; } .egg__loop { left: -5%; width: 110%; } }

/* 6.29: the boulder */
.boulder { position: fixed; left: 0; top: 0; width: 180px; height: 180px; z-index: 86; pointer-events: none; opacity: 0; will-change: transform; filter: drop-shadow(0 24px 26px rgba(9,13,26,.4)); }
.boulder svg { width: 100%; height: 100%; display: block; }

/* 6.23 to 6.25, 6.30: the tour cursors speak in a bubble under their tag */
.bncur .phg-stack { display: flex; flex-direction: column; align-items: flex-start; }
.bncur .phg-cmt { margin-top: 5px; background: #fff; color: var(--ink); font: 600 14px var(--sans); padding: 6px 12px; border-radius: 11px 11px 11px 3px; white-space: nowrap; box-shadow: 0 14px 30px -14px rgba(9,13,26,.5), 0 0 0 1px rgba(9,13,26,.06); opacity: 0; translate: 0 -4px; transition: opacity .2s, translate .25s var(--e-ui); }
.bncur.is-talking .phg-cmt { opacity: 1; translate: 0 0; }
.bncur.is-flip .phg-stack { position: absolute; right: calc(100% - 10px); top: 14px; margin: 0; align-items: flex-end; }
.bncur.is-flip .phg-name { border-top-left-radius: 6px; border-top-right-radius: 0; }
.bncur.is-flip .phg-cmt { border-radius: 11px 3px 11px 11px; }
/* Truman's blue tag gets a white edge on the blue box (AI-CURSORS.md trap) */
.bncur.on-blue .phg-name { box-shadow: 0 0 0 1.5px #fff, 0 6px 16px -6px rgba(1,34,127,.7); }
body.menu-open .bncur, body.menu-open .boulder { opacity: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  #bento.stagger > .cell { translate: none !important; }
  .ico-1 *, .ico-2 *, .ico-3 *, .ico-7 *, .reply__sweep { animation: none; stroke-dashoffset: 0; }
  /* the SEO & AEO glass is picked out by name, not by *, so it needs names here to be drawn in full rather than left dashed off */
  .ico-7 circle, .ico-7 .ico-7__arm, .offer .ico-7 .ico-7__spark { animation: none; stroke-dashoffset: 0; }
  .egg.is-in, .pillar svg { animation: none; }
  .stat-grid { transition: none; }
}

/* =========================================================
   13. STARS
   ========================================================= */
/* Mk. 7 (2.6): taller, so the last 22% of the travel is the hand off into the CTA: the mark bursts back through the
   statement, the two lines push off to the sides, a Pleiad blue wash fills the window and the blue CTA follows */
.stars { position: relative; height: 230vh; background: var(--ink); color: var(--text-on-ink); }
.stars__sticky::after { content: ''; position: absolute; inset: 0; z-index: 3; background: var(--blue); opacity: var(--wash, 0); pointer-events: none; }
.stars.is-handing .stars__mark { filter: none; }
.stars__l1, .stars__l2 { display: block; transform: translateX(calc(var(--push, 0) * -70vw)); }
.stars__l2 { transform: translateX(calc(var(--push, 0) * 70vw)); }
.stars__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.stars__field { position: absolute; inset: 0; width: 100%; height: 100%; }
.stars__mark { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; transform: translate(-50%, -50%) scale(.3); fill: var(--blue); filter: drop-shadow(0 0 30px rgba(7,72,254,.55)); will-change: transform, opacity; z-index: 1; }
.stars__statement { z-index: 2; }
.stars__statement { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 var(--pad); opacity: 0; transform: translateY(30px) scale(.96); will-change: opacity, transform; }
.stars__statement .lab { color: var(--blue-300); margin-bottom: 26px; }
.stars__statement h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 6.4vw, 94px); line-height: .98; letter-spacing: -.025em; max-width: 1100px; }
.stars__statement s { text-decoration-color: var(--blue); text-decoration-thickness: .045em; white-space: nowrap; }
.stars__statement em { font-style: italic; color: var(--blue-200); }
.stars__sub { margin-top: 30px; max-width: 560px; color: var(--text-on-ink-muted); font-size: clamp(15px, 1.2vw, 18px); }

/* =========================================================
   14. SECTION HEADS
   ========================================================= */
.sect-head { padding: clamp(80px, 12vh, 150px) var(--pad) 0; max-width: var(--max); margin: 0 auto; display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .sect-head { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; column-gap: 60px; } .sect-head .lab { grid-column: 1 / -1; } .sect-head__body { align-self: end; } }
.sect-head .lab { color: var(--blue); }
.sect-head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 5.4vw, 82px); line-height: .98; letter-spacing: -.025em; }
.sect-head h2 .o { color: var(--blue); font-style: italic; }
h2 .ltr { display: inline-block; transition: transform .26s var(--e-ui); will-change: transform; }
h2 .word { display: inline-block; white-space: nowrap; }
.sect-head__body { color: var(--text-muted); max-width: 520px; font-size: clamp(16px, 1.2vw, 18px); }
.sect-head--ink { color: var(--text-on-ink); }
.sect-head--ink .sect-head__body { color: var(--text-on-ink-muted); }
.sect-head--ink .lab { color: var(--blue-300); }
.sect-head--ink h2 .o { color: var(--blue-200); }
.sect-head--canvas { color: #fff; padding-left: 0; padding-right: 0; }
/* 2.37: white, not light blue, so the eyebrow clears 4.5:1 on the blue canvas (light blue measured 3.7) */
.sect-head--canvas .lab { color: #fff; }
.sect-head--canvas h2 .o { color: var(--blue-100); }
.sect-head--canvas .sect-head__body { color: rgba(255,255,255,.82); }

/* =========================================================
   15. DISCIPLINES
   ========================================================= */
/* Mk. 7 (15 Sep): the dark run. How it goes and What Pleiad does for you sit on one ground with the mountain
   plate behind both, fixed to the viewport so the photograph holds still while the two sections scroll over it and
   nothing marks where one ends and the next starts. Neither section paints a background of its own any more. */
.darkrun { position: relative; background: var(--ink); color: var(--text-on-ink); }
.darkrun::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: url('../assets/plates/rocket-plume.jpg') center/cover no-repeat fixed; opacity: .1;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
.darkrun > * { position: relative; z-index: 1; }
@media (hover: none), (pointer: coarse) { .darkrun::before { background-attachment: scroll; } }
.disc { background: none; color: var(--text-on-ink); padding-bottom: clamp(80px, 12vh, 150px); position: relative; }
/* Mk. 7 (16 Sep): inside the dark run the two sections are one stretch, so What we bring does not need a section's
   worth of air above it. The head keeps a third of the padding it carries when a section stands on its own. */
.darkrun .disc .sect-head { padding-top: clamp(26px, 3.4vh, 46px); }
.disc__grid { position: relative; max-width: var(--max); margin: 60px auto 0; padding: 0 var(--pad); display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 700px) { .disc__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .disc__grid { grid-template-columns: repeat(3, 1fr); } }
.disc__panel {
  --mx: 50%; --my: 50%; --spot: 0;
  position: relative; background: var(--ink-2); border: 1px solid var(--line-ink); border-radius: 14px;
  padding: 34px 30px 30px; min-height: 300px; display: flex; flex-direction: column; gap: 16px; transition: border-color .4s;
}
.disc__panel::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(380px circle at var(--mx) var(--my), rgba(7,72,254,.34), rgba(7,72,254,.06) 40%, transparent 70%), radial-gradient(240px circle at var(--mx) var(--my), rgba(255,255,255,.1), transparent 60%);
  opacity: var(--spot); transition: opacity .3s;
}
.disc__panel:hover { border-color: rgba(128,161,254,.35); }
.disc__panel > * { position: relative; z-index: 1; }
.disc__panel > .lab { color: var(--blue-300); }
.disc__panel h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 2.6vw, 40px); line-height: 1; letter-spacing: -.02em; }
.disc__panel p { color: var(--text-on-ink-muted); font-size: 16px; }
.disc__panel .tags { margin-top: auto; padding-top: 10px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tags li { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-muted); }
.tags--ink li { border-color: var(--line-ink); color: var(--text-on-ink-muted); }

/* =========================================================
   OFFER CARDS: 3D hover icons (.oicon)
   A plain CSS port of IconHover3D for the "What we bring to
   the table" panels. One .oicon block goes inside each
   li.disc__panel, straight after the .lab number.

   Tokens it reads: --ink-2, --text-on-ink, --blue, --blue-300.

   Hover state = pointer hover on mouse devices, or keyboard
   focus on the card or anything inside it. Touch screens keep
   the resting state. Reduced motion keeps colour and the title
   fill but drops every rotation and movement.

   3D rule: inside .oicon__obj use SOLID background-color only.
   No gradients, opacity, filter or blend modes in that tree,
   they blank or flatten it in Chrome. clip-path is safe.
   ========================================================= */

/* ---------- 1. Card layout: icon top right, number and heading beside it ---------- */
.disc__panel:has(> .oicon) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto 1fr;
  container: oicon-card / inline-size;
}
.disc__panel:has(> .oicon) > .lab { grid-area: 1 / 1; align-self: start; }
.disc__panel:has(> .oicon) > .oicon { grid-area: 1 / 2 / 3 / 3; }
.disc__panel:has(> .oicon) > h3 { grid-area: 2 / 1; align-self: end; justify-self: start; }
.disc__panel:has(> .oicon) > p { grid-area: 3 / 1 / 4 / 3; }
.disc__panel:has(> .oicon) > .tags { grid-area: 4 / 1 / 5 / 3; }
/* Narrow cards: once the heading and the icon cannot share a row, the icon
   keeps the number's row and the heading takes the full width under it.
   240px of card content fits the longest name at 30px beside the 100px icon; it was sized for
   "Development", which "SEO & AEO" replaced, so every name now has room to spare. */
@container oicon-card (max-width: 240px) {
  .disc__panel:has(> .oicon) > .oicon { grid-area: 1 / 2 / 2 / 3; }
  .disc__panel:has(> .oicon) > h3 { grid-area: 2 / 1 / 3 / 3; align-self: start; }
}

/* ---------- 2. Icon frame and corner brackets ---------- */
.oicon {
  --oi-line: var(--text-on-ink);      /* object lines at rest */
  --oi-accent: var(--blue-300);       /* object lines on hover */
  --oi-fill: var(--ink-2);            /* quad fill, matches the card */
  --oi-lw: 3px;                       /* line weight in object space */
  --oi-dur: .45s;
  --oi-ease: cubic-bezier(.22, 1, .36, 1);
  display: block; position: relative; box-sizing: border-box;
  width: 100px; height: 100px;
  border: 1px solid rgba(247, 247, 244, .2);
}
.oicon__corner {
  position: absolute; width: 24px; height: 24px; box-sizing: border-box;
  border: 0 solid var(--text-on-ink);
  transform: translate(calc(var(--sx) * 5px), calc(var(--sy) * 5px)) scale(.3);
  transition: transform var(--oi-dur) var(--oi-ease);
}
.oicon__corner--tl { --sx: 1;  --sy: 1;  top: -1px;    left: -1px;  border-top-width: 4px;    border-left-width: 4px;  transform-origin: 0 0; }
.oicon__corner--tr { --sx: -1; --sy: 1;  top: -1px;    right: -1px; border-top-width: 4px;    border-right-width: 4px; transform-origin: 100% 0; }
.oicon__corner--bl { --sx: 1;  --sy: -1; bottom: -1px; left: -1px;  border-bottom-width: 4px; border-left-width: 4px;  transform-origin: 0 100%; }
.oicon__corner--br { --sx: -1; --sy: -1; bottom: -1px; right: -1px; border-bottom-width: 4px; border-right-width: 4px; transform-origin: 100% 100%; }

/* ---------- 3. The 3D engine: stage, object, boxes of six quads ---------- */
.oicon__stage { position: absolute; inset: 0; perspective: 1200px; }
.oicon__obj, .oicon__orient, .oicon__part, .oicon__box {
  display: block; position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform-style: preserve-3d;
  transition: transform var(--oi-dur) var(--oi-ease);
}
/* the shared turn, same numbers as the reference */
.oicon__obj { transform: scale(.7) rotate(49deg) rotateX(23deg) rotateY(33deg); }

.oicon__box > i, .oicon__quad {
  display: block; position: absolute; left: 0; top: 0; box-sizing: border-box;
  border: var(--oi-lw) solid var(--oi-line);
  background-color: var(--oi-fill);
  transition: border-color .4s ease, transform var(--oi-dur) var(--oi-ease), clip-path var(--oi-dur) var(--oi-ease);
}
/* a box is --w wide (x), --h tall (y), --d deep (z), centred on its origin.
   Faces in order: front, back, right, left, top, bottom. */
.oicon__box > i { width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2); }
.oicon__box > i:nth-child(1) { transform: translateZ(calc(var(--d) / 2)); }
.oicon__box > i:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.oicon__box > i:nth-child(3),
.oicon__box > i:nth-child(4) { width: var(--d); margin-left: calc(var(--d) / -2); }
.oicon__box > i:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.oicon__box > i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.oicon__box > i:nth-child(5),
.oicon__box > i:nth-child(6) { height: var(--d); margin-top: calc(var(--d) / -2); }
.oicon__box > i:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
.oicon__box > i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); }

/* Inner orientation for every object except Brand. rotate(-60deg) under the
   shared turn keeps the object's own "up" within 1deg of screen up at rest
   and within 11deg through the whole hover turn, so plates, bars, panes,
   brackets and frames all stand upright. */
.oicon__orient { transform: rotate(-60deg); }

/* ---------- 4. The six objects at rest ---------- */

/* 01 Strategy: three plan plates with a marker block on the top one */
.oicon--strategy .oicon__plate { --w: 48px; --h: 6px; --d: 48px; }
.oicon--strategy .oicon__layer--1 { transform: translateY(-13px) rotateY(0deg); }
.oicon--strategy .oicon__layer--2 { transform: translateY(0) rotateY(0deg); }
.oicon--strategy .oicon__layer--3 { transform: translateY(13px) rotateY(0deg); }
.oicon--strategy .oicon__pin { --w: 12px; --h: 12px; --d: 12px; transform: translate3d(11px, -9px, -11px); }
.oicon--strategy .oicon__pin > i:nth-child(6) { display: none; }

/* 02 Brand: the reference cube in three slices */
.oicon--brand .oicon__box { --w: 46px; --h: 13px; --d: 46px; }
.oicon--brand .oicon__slice--a { transform: translateY(-16px); }
.oicon--brand .oicon__slice--b { transform: translateY(0) rotateY(0deg); }
.oicon--brand .oicon__slice--c { transform: translateY(16px); }

/* 03 Websites: three browser panes, each with a header bar and three dots */
.oicon--web .oicon__win { width: 54px; height: 42px; margin: -21px 0 0 -27px; }
.oicon--web .oicon__win::before,
.oicon--web .oicon__win::after { content: ''; position: absolute; background-color: var(--oi-line); transition: background-color .4s ease, box-shadow .4s ease; }
.oicon--web .oicon__win::before { left: 0; right: 0; top: 8px; height: var(--oi-lw); }
.oicon--web .oicon__win::after { left: 3px; top: 2px; width: 4px; height: 4px; box-shadow: 7px 0 0 var(--oi-line), 14px 0 0 var(--oi-line); }
.oicon--web .oicon__win--1 { transform: translate3d(-8px, -6px, -8px); }
.oicon--web .oicon__win--2 { transform: translate3d(0, 0, 0); }
.oicon--web .oicon__win--3 { transform: translate3d(8px, 6px, 8px); }

/* 04 SEO & AEO (Mk. 7.5 Sandbox, 21 Sep): a magnifying glass with the answer in its lens. The rim is four
   bars round a square lens, the handle leaves the bottom right corner at 45deg, and the answer is a small cube
   turned to a diamond, sitting in the lens like the thing the search found. The glass is shifted up and left
   so the whole object, handle included, sits in the middle of the frame. */
.oicon--seo .oicon__box { --h: 8px; --d: 8px; }
.oicon--seo .oicon__glass { transform: translate(-10px, -10px); }
.oicon--seo .oicon__rim--t, .oicon--seo .oicon__rim--b { --w: 44px; }
.oicon--seo .oicon__rim--l, .oicon--seo .oicon__rim--r { --w: 8px; --h: 28px; }
.oicon--seo .oicon__rim--t { transform: translateY(-18px); }
.oicon--seo .oicon__rim--b { transform: translateY(18px); }
.oicon--seo .oicon__rim--l { transform: translateX(-18px); }
.oicon--seo .oicon__rim--r { transform: translateX(18px); }
.oicon--seo .oicon__handle { --w: 30px; transform: translate(32.6px, 32.6px) rotate(45deg); }
.oicon--seo .oicon__answer { --w: 12px; --h: 12px; --d: 12px; transform: translate(-10px, -10px) rotate(45deg); }

/* 05 Motion: four portrait frames pinned at the bottom left corner, a play mark on the front one */
.oicon--motion .oicon__frame { width: 36px; height: 48px; margin: -24px 0 0 -18px; transform-origin: 0 100%; }
.oicon--motion .oicon__frame--4::before { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 16px; margin: -8px 0 0 -5px; clip-path: polygon(0 0, 100% 50%, 0 100%); background-color: var(--oi-line); transition: background-color .4s ease; }
.oicon--motion .oicon__frame--1 { transform: translate3d(-6px, -3px, -9px) rotate(0deg); }
.oicon--motion .oicon__frame--2 { transform: translate3d(-2px, -1px, -3px) rotate(0deg); }
.oicon--motion .oicon__frame--3 { transform: translate3d(2px, 1px, 3px) rotate(0deg); }
.oicon--motion .oicon__frame--4 { transform: translate3d(6px, 3px, 9px) rotate(0deg); }

/* 06 Data: three bars on a base plate. A bar's sides are --H tall and
   clipped down to --h, and its cap rides at --h, so it grows without
   stretching the line weight. */
.oicon--data .oicon__chart { transform: translateY(24px); }
.oicon--data .oicon__base { --w: 62px; --h: 4px; --d: 26px; transform: translateY(2px); }
.oicon--data .oicon__bar { --w: 12px; --d: 12px; --H: 58px; }
.oicon--data .oicon__bar > i:nth-child(-n+4) { height: var(--H); margin-top: calc(var(--H) * -1); clip-path: inset(calc(var(--H) - var(--h)) 0 0 0); }
.oicon--data .oicon__bar > i:nth-child(5) { transform: translateY(calc(var(--h) * -1)) rotateX(90deg); }
.oicon--data .oicon__bar > i:nth-child(6) { display: none; }
.oicon--data .oicon__bar--1 { --h: 18px; --hh: 32px; transform: translateX(-20px); }
.oicon--data .oicon__bar--2 { --h: 30px; --hh: 46px; }
.oicon--data .oicon__bar--3 { --h: 42px; --hh: 58px; transform: translateX(20px); }

/* ---------- 5. Title wipe (the overlay copy is added by offer-cards.js) ---------- */
.disc__panel h3 .oicon-wipe {
  position: absolute; inset: -.08em -.16em -.12em; padding: .08em .16em .12em;
  background-color: var(--blue); color: #fff;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .3s cubic-bezier(.25, .46, .45, .94);
  pointer-events: none;
}

/* ---------- 6. Hover state: colour and title fill ---------- */
@media (hover: hover) and (pointer: fine) {
  .disc__panel:is(:hover, :focus-visible, :has(:focus-visible)) .oicon { --oi-line: var(--oi-accent); }
  .disc__panel:is(:hover, :focus-visible, :has(:focus-visible)) h3 .oicon-wipe { clip-path: inset(0 0 0 0); }
}

/* ---------- 7. Hover state: movement ---------- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .disc__panel:is(:hover, :focus-visible, :has(:focus-visible)) .oicon__obj { transform: scale(1.1) rotate(49deg) rotateX(-28deg) rotateY(-43deg); }
  .disc__panel:is(:hover, :focus-visible, :has(:focus-visible)) .oicon__corner { transform: translate(calc(var(--sx) * -10px), calc(var(--sy) * -10px)) scale(.66); }

  /* Strategy: plates fan apart, the marker lifts off the top plate */
  .disc__panel:is(:hover, :focus-visible, :has(:focus-visible)) .oicon--strategy .oicon__layer--1 { transform: translateY(-19px) rotateY(-20deg); }
  .disc__panel:is(:hover, :focus-visible, :has(:focus-visible)) .oicon--strategy .oicon__layer--3 { transform: translateY(19px) rotateY(20deg); }
  .disc__panel:is(:hover, :focus-visible, :has(:focus-visible)) .oicon--strategy .oicon__pin { transform: translate3d(11px, -13px, -11px); }

  /* Brand: slices part and the middle one turns a quarter */
  .disc__panel:is(:hover, :focus-visible, :has(:focus-visible)) .oicon--brand .oicon__slice--a { transform: translateY(-19px); }
  .disc__panel:is(:hover, :focus-visible, :has(:focus-visible)) .oicon--brand .oicon__slice--b { transform: translateY(0) rotateY(-90deg); }
  .disc__panel:is(:hover, :focus-visible, :has(:focus-visible)) .oicon--brand .oicon__slice--c { transform: translateY(19px); }

  /* Websites: panes separate in depth */
  .disc__panel:is(:hover, :focus-visible, :has(:focus-visible)) .oicon--web .oicon__win--1 { transform: translate3d(-22px, 4px, -14px); }
  .disc__panel:is(:hover, :focus-visible, :has(:focus-visible)) .oicon--web .oicon__win--3 { transform: translate3d(22px, -4px, 14px); }

  /* SEO & AEO: the glass slides across as if searching, and the answer lifts up out of the lens and turns */
  .disc__panel:is(:hover, :focus-visible, :has(:focus-visible)) .oicon--seo .oicon__glass { transform: translate(-17px, -17px); }
  .disc__panel:is(:hover, :focus-visible, :has(:focus-visible)) .oicon--seo .oicon__answer { transform: translate(-10px, -10px) translateZ(30px) rotate(135deg) scale(1.2); }

  /* Motion: frames fan out like a flip book */
  .disc__panel:is(:hover, :focus-visible, :has(:focus-visible)) .oicon--motion .oicon__frame--1 { transform: translate3d(-6px, -3px, -14px) rotate(0deg); }
  .disc__panel:is(:hover, :focus-visible, :has(:focus-visible)) .oicon--motion .oicon__frame--2 { transform: translate3d(-2px, -1px, -5px) rotate(-11deg); }
  .disc__panel:is(:hover, :focus-visible, :has(:focus-visible)) .oicon--motion .oicon__frame--3 { transform: translate3d(2px, 1px, 5px) rotate(-22deg); }
  .disc__panel:is(:hover, :focus-visible, :has(:focus-visible)) .oicon--motion .oicon__frame--4 { transform: translate3d(6px, 3px, 14px) rotate(-33deg); }

  /* Data: every bar grows */
  .disc__panel:is(:hover, :focus-visible, :has(:focus-visible)) .oicon--data .oicon__bar { --h: var(--hh); }
}

/* ---------- 8. Reduced motion: no tweening at all ---------- */
@media (prefers-reduced-motion: reduce) {
  .disc__panel .oicon *,
  .disc__panel .oicon *::before,
  .disc__panel .oicon *::after,
  .disc__panel h3 .oicon-wipe { transition: none; }
}
/* ========== end OFFER CARDS ========== */

/* Mk. 7 (1.3, redrawn 15 Sep): the compact home page version reads as a table of contents rather than six boxes.
   Two columns of three rows: the number, the name in serif, a dotted leader across the gap and the object at the
   end of the row. It stands about 200px shorter than the six card version and it suits the section's own name.
   The hover is untouched, which was the one thing to keep: the spotlight still follows the pointer along the row
   and the object still turns over. offers.html keeps the full cards. */
/* Mk. 7 (15 Sep): the sheet. A rounded box of grid paper hung a little off kilter on the mountain ground and held
   up by two pieces of black tape, after the reference Truman sent. The paper class fills it with the drafting
   grid, data-ground="paper" in the markup flips the chrome tokens inside it, and the rows turn ink side up. */
.taped {
  position: relative; width: min(1040px, calc(100% - var(--pad) * 2)); margin: clamp(30px, 4.5vh, 54px) auto 0;
  padding: clamp(30px, 3.4vw, 52px) clamp(22px, 2.8vw, 44px) clamp(22px, 2.4vw, 34px);
  border-radius: clamp(18px, 1.8vw, 28px); color: var(--ink);
  /* module 29 drives these three while the two of them hang it; at rest they are the off kilter pose */
  rotate: none; transform: translate3d(var(--tp-x, 0px), var(--tp-y, 0px), 0) rotate(var(--tp-r, -1.1deg));
  box-shadow: 0 50px 100px -46px rgba(0,0,0,.75), 0 10px 30px -18px rgba(0,0,0,.5);
}
.disc--compact .taped .disc__grid { padding: 0; margin: 0; max-width: none; }
/* the reference taped a white sheet to a light grey wall, so its tape was black. Here the wall is a night
   mountain, where black tape reads as a bite taken out of the paper, so the tape is the light one: a strip of
   masking tape laid over the photograph, slightly see through with a lifted edge */
.taped__tape {
  position: absolute; width: clamp(78px, 8.5vw, 124px); height: clamp(26px, 2.6vw, 36px);
  background: linear-gradient(180deg, rgba(247,246,242,.78), rgba(226,226,220,.7));
  border-top: 1px solid rgba(255,255,255,.5); border-bottom: 1px solid rgba(0,0,0,.18);
  box-shadow: 0 14px 22px -14px rgba(0,0,0,.85);
  /* torn ends, so it reads as a piece of tape and not a rectangle */
  clip-path: polygon(0 13%, 7% 0, 93% 7%, 100% 19%, 100% 87%, 93% 100%, 7% 93%, 0 81%);
}
.taped__tape--tl { left: clamp(-26px, -1.4vw, -14px); top: clamp(-20px, -1.2vw, -12px); rotate: -24deg; }
.taped__tape--tr { right: clamp(-26px, -1.4vw, -14px); top: clamp(-20px, -1.2vw, -12px); rotate: 21deg; }
/* the rows, ink side up on the paper */
.disc--compact .taped .disc__panel { border-bottom: 1px solid rgba(31,41,55,.12); }
.disc--compact .taped .disc__panel > .lab { color: var(--blue); }
.disc--compact .taped .disc__panel > h3 { color: var(--ink); }
/* the leader has to read against the paper's own grid, so it is drawn in ink rather than the hairline blue */
.disc--compact .taped .disc__panel::after { background: repeating-linear-gradient(90deg, rgba(31,41,55,.26) 0 3px, transparent 3px 9px); }
/* the objects are drawn for a dark card: on the sheet the lines go ink and the faces take the paper, or
   every one of them reads as a solid black blob */
.taped .oicon { --oi-line: var(--ink); --oi-accent: var(--blue); --oi-fill: var(--paper); }
/* the spotlight still follows the pointer along the row, softer now that it lands on paper */
.disc--compact .taped .disc__panel::before { background: radial-gradient(340px circle at var(--mx) var(--my), rgba(7,72,254,.18), rgba(7,72,254,.05) 42%, transparent 72%); }
.disc--compact .taped .disc__panel:last-child { border-bottom: 0; }
@media (min-width: 900px) { .disc--compact .taped .disc__panel:nth-last-child(2) { border-bottom: 0; } }
@media (prefers-reduced-motion: reduce) { .taped { --tp-r: 0deg; } }

/* the props for the hanging (module 29). The sheet waits off the bottom of the frame, so the section clips; the
   strip is the piece Truman carries in from past the right edge */
.disc--compact { overflow: clip; }
.tpcur { position: absolute; z-index: 6; }
.tp-strip {
  position: absolute; z-index: 7; width: clamp(78px, 8.5vw, 124px); height: clamp(26px, 2.6vw, 36px); opacity: 0;
  background: linear-gradient(180deg, rgba(247,246,242,.78), rgba(226,226,220,.7));
  border-top: 1px solid rgba(255,255,255,.5); border-bottom: 1px solid rgba(0,0,0,.18);
  box-shadow: 0 14px 22px -14px rgba(0,0,0,.85);
  clip-path: polygon(0 13%, 7% 0, 93% 7%, 100% 19%, 100% 87%, 93% 100%, 7% 93%, 0 81%);
}
/* both corner pieces stay off until Truman presses them on */
.disc--compact.is-hanging .taped__tape { opacity: 0; }
.disc--compact.is-hanging .taped__tape.is-on { animation: tapePress .34s var(--e-pop) forwards; }
@keyframes tapePress {
  0% { opacity: 0; scale: 1.18 1.3; }
  55% { opacity: 1; scale: .96 .92; }
  100% { opacity: 1; scale: 1 1; }
}

.disc--compact .disc__grid { margin-top: clamp(24px, 3vh, 36px); gap: 0 clamp(28px, 4vw, 70px); grid-template-columns: 1fr; }
@media (min-width: 900px) { .disc--compact .disc__grid { grid-template-columns: 1fr 1fr; } }
.disc--compact .disc__panel,
.disc--compact .disc__panel:has(> .oicon) {
  display: grid; grid-template-columns: auto auto minmax(20px, 1fr) auto; grid-template-rows: auto;
  align-items: center; gap: 0 clamp(12px, 1.1vw, 18px); min-height: 0;
  padding: clamp(10px, 1.1vh, 16px) 10px; background: none; border: 0; border-bottom: 1px solid var(--line-ink); border-radius: 0;
}
/* every part of the row sits on one line: with only a column set, auto placement pushed the name to a second row */
.disc--compact .disc__panel > .lab { grid-area: auto; grid-column: 1; grid-row: 1; align-self: center; }
.disc--compact .disc__panel > h3 { grid-area: auto; grid-column: 2; grid-row: 1; justify-self: start; align-self: center; margin: 0; font-size: clamp(22px, 1.85vw, 30px); }
/* the leader, the way a menu runs dots from the dish to its price */
.disc--compact .disc__panel::after { content: ''; grid-column: 3; grid-row: 1; height: 1px; align-self: center; background: repeating-linear-gradient(90deg, var(--line-ink) 0 3px, transparent 3px 9px); opacity: .9; }
.disc--compact .disc__panel > .oicon { grid-area: auto; grid-column: 4; grid-row: 1; width: 58px; height: 58px; }
.disc--compact .disc__panel::before { border-radius: 0; }
.disc--compact .oicon__obj { transform: scale(.52) rotate(49deg) rotateX(23deg) rotateY(33deg); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .disc--compact .disc__panel:is(:hover, :focus-visible, :has(:focus-visible)) .oicon__obj { transform: scale(.8) rotate(49deg) rotateX(-28deg) rotateY(-43deg); }
}
@media (max-width: 480px) { .disc--compact .disc__panel > .oicon { width: 46px; height: 46px; } }
.disc--compact { padding-bottom: clamp(50px, 8vh, 100px); }
/* Mk. 7 (16 Sep): the head reads as a caption over the sheet rather than a section opener. The eyebrow and its
   note run across the top, then the title and the paragraph share one baseline, so the whole head is three lines
   deep instead of six and the sheet starts right under it. Below 1000px they stack. */
.disc--compact .sect-head { grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 14px clamp(28px, 3.6vw, 64px); }
.disc--compact .sect-head .lab { grid-column: 1 / -1; align-self: center; }
.disc--compact .sect-head h2 { font-size: clamp(30px, 3vw, 46px); }
.disc--compact .sect-head__body { align-self: end; max-width: 52ch; margin-bottom: 3px; }
@media (max-width: 1000px) { .disc--compact .sect-head { grid-template-columns: minmax(0, 1fr); align-items: start; } .disc--compact .sect-head__body { margin-bottom: 0; } }
.disc--compact .disc__more { margin-top: clamp(24px, 3vh, 34px); }
.disc__more { position: relative; display: flex; justify-content: center; margin-top: 34px; padding: 0 var(--pad); }


/* =========================================================
   15b. THE FILM (Mk. 7.5, 17 Sep)
   The studio reel sits on the drafting sheet as a selected
   layer: blue selection frame, four handles, a dimension chip,
   a handwritten note. The frame draws and the handles pop when
   the stage reveals, the way the loader and the badge do.
   ========================================================= */
.film { position: relative; padding-bottom: clamp(56px, 8vh, 96px); overflow-x: clip; }
.studio:has(+ .film) { padding-bottom: clamp(28px, 4vh, 52px); }
.film .sect-head { padding-top: clamp(40px, 6vh, 80px); }
.film + .work .sect-head { padding-top: clamp(40px, 6vh, 80px); }
.film__wrap { position: relative; max-width: var(--max); margin: clamp(34px, 4.5vh, 56px) auto 0; padding: 0 var(--pad); }
/* the whole frame fits under the bar on a short window: the width follows the height, 1240px at most */
.film__stage { position: relative; margin: 0 auto; max-width: min(1240px, max(760px, calc((100svh - 250px) * 16 / 9))); }
.film__box { position: relative; aspect-ratio: 16 / 9; background: var(--ink); border-radius: 6px; overflow: hidden; isolation: isolate; cursor: pointer; }
.film__video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--ink); }
.film__box:fullscreen { border-radius: 0; background: #000; }
.film__box:fullscreen .film__video { object-fit: contain; }
/* the frame: the selection border draws left to right, then the handles pop in one after another */
.film__sel { opacity: 0; }
.film__stage .h { opacity: 0; }
.film__stage.is-in .film__sel { opacity: 1; animation: selDraw .6s var(--e-wipe) .35s forwards; }
.film__stage.is-in .h { animation: hpop .3s var(--e-pop) forwards; }
.film__stage.is-in .h.tl { animation-delay: .95s; } .film__stage.is-in .h.tr { animation-delay: 1.02s; }
.film__stage.is-in .h.br { animation-delay: 1.09s; } .film__stage.is-in .h.bl { animation-delay: 1.16s; }
.film__dim { position: absolute; left: 50%; bottom: -14px; transform: translate(-50%, 100%); opacity: 0; }
.film__stage.is-in .film__dim { animation: dimIn .4s var(--e-ui) 1.25s forwards; }
/* controls: play bottom left, the timecode beside it, full screen bottom right, a two pixel timeline along the foot.
   On a mouse screen the controls step back while the film plays and return under the pointer, on focus, or paused */
.film__ctl { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 14px 16px 16px; z-index: 2; transition: opacity .35s var(--e-ui); background: linear-gradient(to top, rgba(9,13,26,.55), rgba(9,13,26,0)); pointer-events: none; }
.film__ctl > * { pointer-events: auto; }
@media (hover: hover) and (pointer: fine) { .film__box:not(:hover):not(:focus-within):not(.is-paused) .film__ctl { opacity: 0; } }
.film__play, .film__full { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; border: 0; background: var(--paper); color: var(--ink); cursor: pointer; transition: background .25s var(--e-ui), color .25s var(--e-ui), transform .25s var(--e-pop); }
.film__play svg, .film__full svg { width: 20px; height: 20px; }
.film__play:hover, .film__full:hover { background: var(--blue); color: #fff; }
.film__play:active, .film__full:active { transform: scale(.94); }
.film__play:focus-visible, .film__full:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.film__play .i-play { display: none; } .film__play .i-pause { display: block; }
.is-paused .film__play .i-play { display: block; margin-left: 2px; } .is-paused .film__play .i-pause { display: none; }
.film__full { width: 36px; height: 36px; margin-left: auto; background: rgba(247,247,244,.16); color: #fff; }
.film__full svg { width: 17px; height: 17px; }
.film__full:hover { background: var(--paper); color: var(--ink); }
.film__time { font-size: 12px; font-weight: 500; letter-spacing: .04em; color: #fff; text-shadow: 0 1px 8px rgba(9,13,26,.7); }
.film__line { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; z-index: 3; cursor: pointer; touch-action: none; }
.film__line::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(247,247,244,.28); transition: height .2s var(--e-ui); }
.film__fill { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #fff; transform-origin: 0 50%; transform: scaleX(0); transition: height .2s var(--e-ui); }
.film__line:hover::before, .film__line:hover .film__fill { height: 4px; }
/* the handwritten note, top right of the frame, its arrow pointing at the film */
.hand--film { position: absolute; right: calc(var(--pad) + 26px); top: -54px; white-space: nowrap; padding-right: 66px; color: var(--pen); font-size: clamp(22px, 1.7vw, 28px); }
.hand--film .mark--arrow { right: 2px; top: 14px; width: 60px; height: 32px; transform: rotate(42deg); }
@media (max-width: 1320px) { .hand--film { right: var(--pad); } }
@media (max-width: 760px) {
  .film__wrap { margin-top: 22px; }
  .hand--film { position: static; display: block; padding: 16px 0 0; text-align: right; font-size: 21px; }
  .hand--film .mark--arrow { display: none; }
  .film__ctl { gap: 10px; padding: 10px 12px 14px; }
  .film__play { width: 38px; height: 38px; } .film__full { width: 32px; height: 32px; }
  .film__dim { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .film__sel, .film__stage .h, .film__dim { opacity: 1 !important; animation: none !important; clip-path: none !important; }
  .film__ctl { opacity: 1 !important; }
}
/* ---- the works reel (Mk. 7.5 Sandbox, 21 Sep): the work page's hero. No label (Truman took "The reel" off),
   just the selected layer as the first thing under the bar, with the clearance a case page's board film has
   (22c). Its width follows the window height so the whole film and its chip fill the first screen, and the page
   head that follows drops to the gap a case page's title has under its film. ---- */
.film--top { --reel-top: clamp(92px, 12vh, 118px); padding-bottom: clamp(38px, 5vh, 56px); }
.film--top .film__wrap { margin-top: 0; padding-top: var(--reel-top); }
.film--top .film__stage { max-width: min(1328px, max(620px, calc((100vh - var(--reel-top) - 50px) * 16 / 9))); }
@supports (height: 100svh) { .film--top .film__stage { max-width: min(1328px, max(620px, calc((100svh - var(--reel-top) - 50px) * 16 / 9))); } }
.film--top + .dx .page-head { padding-top: clamp(44px, 7vh, 76px); }
@media (max-width: 760px) { .film--top { --reel-top: 84px; } }
/* touch has no hover, so the shared player keeps its controls up, and on a phone they cover a third of this film.
   Here they step back while it plays; a tap on the film pauses it and they return. The progress line stays. */
@media (hover: none), (pointer: coarse) {
  .film--top .film__box:not(.is-paused):not(:has(:focus-visible)) .film__ctl { opacity: 0; }
  .film--top .film__box:not(.is-paused):not(:has(:focus-visible)) .film__ctl > * { pointer-events: none; }
}

/* =========================================================
   16. WORK: carousel + results
   ========================================================= */
.work { padding-bottom: clamp(80px, 12vh, 150px); overflow: hidden; }
.omw-slider { position: relative; width: 100%; overflow: hidden; padding: 56px 0 44px; margin-top: 30px; touch-action: pan-y; }
.omw-track { display: flex; align-items: center; will-change: transform; }
.omw-slide { flex: 0 0 auto; width: 53vw; margin-right: 20px; position: relative; transition: transform .72s cubic-bezier(.22,.9,.24,1), opacity .5s, filter .5s; }
.omw-slide.side { transform: scale(.86); opacity: .92; filter: saturate(.85); }
/* Mk. 7 (3.5): a side slide answers the pointer (it is a click away), the active card lifts like the bento boxes */
@media (hover: hover) and (pointer: fine) {
  .omw-slide.side:hover { transform: scale(.9); opacity: 1; filter: none; }
  .omw-slide.side:hover .omw-shell { background: #fff; box-shadow: 0 32px 58px -30px rgba(1,34,127,.5); }
  .omw-slide.side:hover .omw-veil { opacity: .4; }
  .omw-slide.active .omw-shell:hover { transform: translateY(-4px); box-shadow: 0 44px 70px -30px rgba(1,34,127,.55); }
}
.omw-shell { transition: background .5s, box-shadow .5s, transform .5s var(--e-lift); }
.omw-slide.active { transform: scale(1); }
.omw-shell { position: relative; padding: 1.38%; border-radius: 20px; background: rgba(255,255,255,.55); border: 1px solid var(--line-2); box-shadow: 0 26px 48px -30px rgba(1,34,127,.35); transition: background .5s, box-shadow .5s; }
.omw-slide.active .omw-shell { background: #fff; box-shadow: 0 32px 58px -32px rgba(1,34,127,.45); }
.omw-shell::after { content: ''; position: absolute; inset: -2px; border: 2px solid var(--tool-line); border-radius: 22px; opacity: 0; transition: opacity .35s; pointer-events: none; }
.omw-slide.active .omw-shell::after { opacity: 1; }
.omw-shell .h { width: 9px; height: 9px; border-width: 2px; opacity: 0; transition: opacity .35s; }
.omw-slide.active .omw-shell .h { opacity: 1; }
.omw-shell .h.tl { left: -6px; top: -6px; } .omw-shell .h.tr { right: -6px; top: -6px; } .omw-shell .h.bl { left: -6px; bottom: -6px; } .omw-shell .h.br { right: -6px; bottom: -6px; }
.omw-lab { position: absolute; top: 0; left: 16px; transform: translateY(2px); opacity: 0; border-radius: 7px 7px 0 0; transition: opacity .35s, transform .35s var(--e-pop); z-index: 5; }
.omw-slide.active .omw-lab { opacity: 1; transform: translateY(-100%); }
.omw-card { background: #fff; border-radius: 14px; padding: 1.38%; }
.omw-frame { position: relative; aspect-ratio: 23 / 16; border-radius: 9px; overflow: hidden; background: var(--paper-2); }
.omw-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.omw-pix { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.omw-veil { position: absolute; inset: 0; background: rgba(11,18,26,.18); transition: opacity .5s; }
.omw-slide.active .omw-veil { opacity: 0; }
.omw-cs { position: absolute; top: 4.6%; right: 3.4%; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.5); backdrop-filter: blur(12px); opacity: 0; transform: translateY(-6px) scale(.9); transition: opacity .4s, transform .4s cubic-bezier(.2,1.2,.4,1), background .22s, border-color .22s; }
.omw-slide.active .omw-cs { opacity: 1; transform: none; }
.omw-cs:hover { background: var(--blue); border-color: var(--blue); }
.omw-cs svg { width: 15px; height: 15px; }
.omw-cin { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 14px 8px 6px; flex-wrap: wrap; }
.omw-nm { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: clamp(21px, 1.9vw, 30px); letter-spacing: -.01em; color: var(--ink); line-height: 1; }
.omw-nm i { width: 7px; height: 7px; border-radius: 2px; background: var(--ac, var(--blue)); flex: none; }
.omw-res { display: block; margin-top: 8px; color: var(--blue); }
.omw-mt { display: flex; gap: 7px; flex-wrap: wrap; }
.omw-mt .omw-tag { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); padding: 5px 9px; border-radius: 20px; background: rgba(31,41,55,.045); border: 1px solid rgba(31,41,55,.08); }
.omw-slide.active .omw-mt .omw-tag:first-child { background: rgba(7,72,254,.08); border-color: rgba(7,72,254,.25); color: var(--blue); }
/* Mk. 7.6: the tags answer the pointer in the client reel's family, in their own key. The reel brightens a name
   and spins the two stars flanking it, a turn a second, and lets a leaving star finish the turn it is on. A tag
   fills with its own project colour instead, and one star opens out of its left edge and turns the other way,
   slower (1.4s) and breathing as it goes; on leave it finishes its turn before the chip settles (js module 16).
   Only the front slide answers, since a tag on a side slide is part of the click that brings that slide in. */
.omw-mt .omw-tag { display: inline-flex; align-items: center; transition: background-color .3s var(--e-ui), border-color .3s var(--e-ui), color .3s var(--e-ui), transform .3s var(--e-pop), box-shadow .3s var(--e-ui); }
.omw-tag__st { width: 0; height: 9px; flex: none; background: currentColor; opacity: 0; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); transition: width .3s var(--e-pop), margin-right .3s var(--e-pop), opacity .22s var(--e-ui); }
.omw-slide.active .omw-mt .omw-tag.is-hot { background: var(--ac, var(--blue)); border-color: var(--ac, var(--blue)); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 16px -10px rgba(9,13,26,.75); }
.omw-slide.active .omw-mt .omw-tag.is-hot .omw-tag__st { width: 9px; margin-right: 6px; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .omw-slide.active .omw-mt .omw-tag.is-hot { transform: none; } }
/* Mk. 7.5 Sandbox (21 Sep): the tags are links to their project's case page */
a.omw-tag { text-decoration: none; cursor: pointer; }
a.omw-tag:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.omw-ctl { display: flex; align-items: center; justify-content: center; gap: 24px; }
/* Mk. 7.6: the carousel turns itself, and the active marker is the clock. It fills left to right over the dwell,
   and the fill's own animationend is what moves the carousel on, so the bar and the slide can never drift apart.
   Hover, drag, an open project, a hidden tab or scrolling away pauses the fill where it stands (is-held). With
   no animation (reduced motion, or before the carousel is ever seen) the marker is simply solid, as it was. */
.omw-dots { display: flex; gap: 7px; --omw-dwell: 10s; }
.omw-dots i { position: relative; overflow: hidden; width: 30px; height: 7px; border-radius: 4px; background: rgba(31,41,55,.14); cursor: pointer; transition: .32s var(--e-ui); }
.omw-dots i.on { background: rgba(7,72,254,.22); width: 36px; }
.omw-dots i.on::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--blue); transform-origin: left center; transform: scaleX(1); }
.omw-dots.is-playing i.on::after { animation: omwFill var(--omw-dwell) linear forwards; }
.omw-dots.is-playing.is-held i.on::after { animation-play-state: paused; }
@keyframes omwFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .omw-dots.is-playing i.on::after { animation: none; } }
.omw-arrows { display: flex; gap: 9px; }
.omw-arrows button { width: 37px; height: 37px; border-radius: 12px; background: #fff; color: var(--ink); border: 1px solid var(--line-2); display: grid; place-items: center; box-shadow: 0 8px 18px -12px rgba(1,34,127,.5); transition: .22s; }
.omw-arrows button:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }

.results { max-width: var(--max); margin: 90px auto 0; padding: 0 var(--pad); }
.results__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 30px; overflow: hidden; padding: 28px 0 30px; margin: -28px 0 -8px; }
.results__head .lab { color: var(--blue); }
.hand--results { color: var(--pen); margin-right: 84px; }
.hand--results .mark--arrow { right: -78px; top: 60%; transform: rotate(35deg); }
.results__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
@media (min-width: 900px) { .results__grid { grid-template-columns: repeat(4, 1fr); } }
.results__grid li { background: var(--paper); padding: 30px 26px 26px; display: grid; gap: 14px; align-content: start; }
.results__grid li .lab { color: var(--text-muted); }
.count { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 4.4vw, 68px); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.results__who { font-size: 14px; color: var(--text-muted); }
.vfy { display: inline-flex; align-items: center; gap: 6px; justify-self: start; background: rgba(47,191,113,.08); border: 1px solid rgba(47,191,113,.3); border-radius: 20px; padding: 4px 10px; font: 600 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #0F6B34; } /* 4.1: #15803D measured 4.4:1 on its tint */
.vfy svg { width: 11px; height: 11px; }

/* =========================================================
   17. PROCESS: the dial drives the thread
   ========================================================= */
/* Mk. 7 (16 Sep): the dial is now the process roll, built first as ~/Desktop/Pleiad/Web Elements/process-roll.
   Two wheels turned by the scrollbar: the move titles ride the left one, the project channel cards the right one,
   and the page snaps move to move so it never rests between two. The section keeps its id and class for the nav. */
/* on the dark run now: the wheel, its titles, the ticks and the nav all take the light side of the palette. The
   thread cards were already white cards, so they read on the dark the way the fig window reads on the blue. */
.process { padding-bottom: 0; height: 320vh; position: relative; background: none; }
.process .proll__title h3 { color: #fff; }
.process .proll__move { color: var(--text-on-ink-muted); }
.process .proll__title.is-active .proll__move { color: var(--blue-100); }
.process .ring__circle { stroke: rgba(255,255,255,.16); }
.process .ring__tick { stroke: rgba(255,255,255,.2); }
.process .ring__tick--major { stroke: rgba(255,255,255,.42); }
.process .ring__needle { stroke: var(--blue-100); }
.process .ring__dot { fill: var(--blue-100); }
.process .ring__deg { fill: rgba(255,255,255,.55); }
.process .proll__nav { color: var(--text-on-ink-muted); }
.process .proll__deg { color: var(--blue-100); }
.process .proll__prog { background: rgba(255,255,255,.18); }
.process .proll__prog i { background: var(--blue-100); }
.process .proll__btns button { border-color: rgba(255,255,255,.22); color: #fff; }
.process .proll__btns button.is-active, .process .proll__btns button:hover { background: #fff; color: var(--ink); border-color: #fff; }
.proll__pin {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(8px, 1.8vh, 22px);
  padding: clamp(112px, 13vh, 140px) 0 clamp(18px, 3vh, 28px); /* clears the fixed bar */
}
.proll__pin .sect-head { padding-top: 0; padding-bottom: 0; }
.proll__stage { position: relative; width: 100%; max-width: var(--max); margin: 0 auto; overflow: hidden; min-height: 0; }
.proll__rings { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring { will-change: transform; }
.ring__circle { fill: none; stroke: var(--line); stroke-width: 1.5; }
.ring__tick { stroke: rgba(31, 41, 55, .28); stroke-width: 1; }
.ring__tick--major { stroke: rgba(31, 41, 55, .6); stroke-width: 1.5; }
.ring__needle { stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 3 5; }
.ring__dot { fill: var(--blue); }
.ring__deg { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; fill: var(--text-muted); }

.proll__col { position: absolute; inset: 0; pointer-events: none; }

/* left wheel: the move titles, anchored at their left edge on the ring */
.proll__title {
  position: absolute; left: 0; top: 0; padding-left: 26px;
  transform-origin: 0 50%; will-change: transform, opacity; opacity: 0;
  white-space: nowrap; display: grid; gap: 9px;
}
.proll__move { font: 600 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); transition: color .4s; }
.proll__title.is-active .proll__move { color: var(--blue); }
.proll__title h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.3vw, 52px); line-height: 1; letter-spacing: -.02em; color: var(--ink); }

/* the project channel card */
.thread { position: relative; border-radius: 18px; background: linear-gradient(180deg, #fff 0%, #F5F9FF 100%); border: 1px solid rgba(31,41,55,.1); box-shadow: 0 46px 100px -52px rgba(1,34,127,.7), 0 18px 64px -36px rgba(31,41,55,.18), inset 0 1px 0 rgba(255,255,255,.9); }
.thread__tab { position: absolute; top: -29px; left: 0; background: var(--ink); color: #fff; font: 600 11px var(--mono); letter-spacing: .14em; padding: 6px 13px; border-radius: 9px 9px 0 0; }
.thread__head { display: flex; align-items: center; gap: 12px; padding: 13px 20px; background: linear-gradient(180deg, #F3F8FE, #E9F1FB); border-bottom: 1px solid var(--line); border-radius: 18px 18px 0 0; flex-wrap: wrap; }
.thread__head .ch { font-size: 15px; font-weight: 600; color: var(--ink); }
.thread__head .ch em { font-family: var(--mono); font-style: normal; color: var(--ink-faint); }
.t-avs { display: flex; margin-left: 4px; }
.t-avs span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 10px var(--mono); color: #fff; border: 2px solid #fff; margin-left: -8px; }
.t-avs span:first-child { margin-left: 0; }
.thread__head .on { margin-left: auto; display: flex; align-items: center; gap: 7px; font: 600 11px var(--mono); color: var(--ink-soft); }
.thread__head .on i { width: 8px; height: 8px; border-radius: 50%; background: var(--grn); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.thread__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 14px; background-image: radial-gradient(circle, rgba(31,41,55,.045) 1px, transparent 1px); background-size: 22px 22px; background-position: -1px -1px; border-radius: 0 0 18px 18px; }
.msg { display: flex; gap: 12px; align-items: flex-start; }
.is-focus .msg { animation: msgIn .45s var(--ease-out) both; }
.is-focus .msg:nth-of-type(1) { animation-delay: .1s; } .is-focus .msg:nth-of-type(2) { animation-delay: .3s; } .is-focus .msg:nth-of-type(3) { animation-delay: .5s; }
@keyframes msgIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.msg .av { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; color: #fff; font: 600 13px var(--mono); }
.msg--p .av { background: var(--blue); }
.msg--y .av { background: var(--accent-200); color: var(--ink); }
/* the Pleiad avatars wear the logo star instead of a letter */
.av__star { width: 62%; height: 62%; fill: currentColor; }
.t-avs span .av__star { width: 74%; height: 74%; }   /* the 22px chips need the star a touch larger to read */
.msg .meta { display: flex; align-items: baseline; gap: 9px; margin-bottom: 3px; }
.msg .meta .nm { font-size: 14px; font-weight: 600; color: var(--ink); }
.msg .meta .tm { font: 400 11px var(--mono); color: var(--ink-faint); }
.msg .tx { font-size: 15px; line-height: 1.5; color: var(--ink); }
.msg .file { display: inline-flex; align-items: center; gap: 8px; margin-top: 9px; padding: 7px 11px; background: var(--soft); border: 1px solid var(--line-2); border-radius: 9px; font: 600 12px var(--mono); color: var(--ink); }
.msg .file svg { width: 15px; height: 15px; color: var(--blue); }
.msg .react { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; padding: 4px 10px; background: #fff; border: 1px solid var(--line); border-radius: 20px; font-size: 12px; font-weight: 600; color: var(--ink); }
.msg .react b { color: var(--ink-soft); font-weight: 400; }
/* the join call chip: a live invitation inside the thread, pulsing slowly until someone takes it */
.msg .call { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 15px 8px 12px; background: var(--grn); border-radius: 999px; font-size: 14px; font-weight: 600; color: #fff; animation: callPulse 2.8s ease-out infinite; }
.msg .call svg { width: 17px; height: 17px; }
@keyframes callPulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); } 70% { box-shadow: 0 0 0 13px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
@media (prefers-reduced-motion: reduce) { .msg .call { animation: none; } }
.typing { display: flex; gap: 5px; align-items: center; padding-top: 10px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ghost); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* right wheel: the project channel cards, anchored at their right edge on the ring.
   Sits after .thread on purpose: that rule's position: relative must lose. */
.proll__card {
  position: absolute; left: 0; top: 0; width: clamp(320px, 30vw, 420px);
  transform-origin: 100% 50%; will-change: transform, opacity; opacity: 0; pointer-events: none;
}
.proll__card.is-focus { pointer-events: auto; }

/* the nav strip under the stage */
.proll__nav { max-width: var(--max); margin: 0 auto; width: 100%; padding: 0 var(--pad); display: flex; align-items: center; gap: clamp(12px, 1.6vw, 20px); color: var(--text-muted); }
.proll__nav .lab { font-variant-numeric: tabular-nums; }
.proll__deg { color: var(--blue); }
.proll__prog { display: block; flex: 1; max-width: 140px; height: 2px; background: var(--line); overflow: hidden; }
.proll__prog i { display: block; width: 100%; height: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left center; }
.proll__btns { display: flex; gap: 8px; margin-left: auto; }
.proll__btns button { width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--line); font-family: var(--mono); font-size: 11px; transition: background .3s, color .3s, border-color .3s; }
.proll__btns button.is-active, .proll__btns button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* short windows: lose the body copy so the wheel keeps its room */
@media (max-height: 720px) {
  .proll__pin { padding-top: 96px; }
  .process .sect-head__body { display: none; }
  .process .sect-head h2 { font-size: clamp(32px, 4.4vw, 60px); }
}

/* ---------- the flat version: narrow screens and reduced motion ----------
   The same content stacked, one move after the other. No pin, no wheel. */
@media (max-width: 999px), (prefers-reduced-motion: reduce) {
  .process { height: auto; padding-bottom: clamp(80px, 12vh, 150px); }
  .proll__pin { position: static; height: auto; overflow: visible; display: block; padding: 0; }
  .proll__pin .sect-head { padding-top: clamp(80px, 12vh, 150px); }
  .process .sect-head__body { display: block; }
  .proll__stage { overflow: visible; margin-top: 36px; padding: 0 var(--pad); display: grid; gap: 22px; justify-items: start; }
  .proll__title, .proll__card { max-width: 760px; }   /* the stack sits under the head's left edge, not centred */
  .proll__rings, .proll__nav { display: none; }
  .proll__col { display: contents; }
  .proll__title, .proll__card { position: static; transform: none !important; opacity: 1 !important; width: 100%; white-space: normal; pointer-events: auto; }
  .proll__title { padding-left: 0; padding-top: 12px; border-top: 1px solid var(--line); }
  .proll__title .proll__move { color: var(--blue); }
  .proll__card { margin-bottom: 26px; }
  .thread__tab { display: none; }
  .msg { animation: none !important; }
  .proll__col--l > :nth-child(1) { order: 1; } .proll__col--r > :nth-child(1) { order: 2; }
  .proll__col--l > :nth-child(2) { order: 3; } .proll__col--r > :nth-child(2) { order: 4; }
  .proll__col--l > :nth-child(3) { order: 5; } .proll__col--r > :nth-child(3) { order: 6; }
  .proll__col--l > :nth-child(4) { order: 7; } .proll__col--r > :nth-child(4) { order: 8; }
}

/* =========================================================
   18. THE BLUE BAND: the difference, the scope lever
   ========================================================= */
.band { padding: 0 0 clamp(80px, 12vh, 140px); }
.diff { padding: 0 0 20px; }
.diff .sect-head, .pricing .sect-head { padding-left: 0; padding-right: 0; margin-bottom: 56px; }
.pricing { padding: clamp(40px, 8vh, 90px) 0 0; }
.diff-win { position: relative; }
.figbar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: #fff; border-radius: 14px; box-shadow: 0 22px 44px -30px rgba(1,34,127,.9); margin-bottom: 20px; color: var(--ink); }
.figbar .lights { display: flex; gap: 7px; }
.figbar .lights i { width: 11px; height: 11px; border-radius: 50%; }
.figbar .lights i:nth-child(1) { background: #FF6159; } .figbar .lights i:nth-child(2) { background: #FEBC2E; } .figbar .lights i:nth-child(3) { background: #28C840; }
.fname { font: 600 13px var(--mono); color: var(--ink-soft); }
.zoom { font: 600 12px var(--mono); color: var(--ink-faint); }
.figbar .avs { margin-left: auto; display: flex; }
.figbar .avs span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 600 10px var(--mono); border: 2px solid #fff; margin-left: -8px; }
.figbar .avs span:first-child { margin-left: 0; }
.diff-body { display: grid; grid-template-columns: 1fr 72px 1fr; align-items: stretch; background-color: #FBFCFE; background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 22px 22px; padding: 36px; border-radius: 16px; color: var(--ink); }
.diff-frame { position: relative; padding: 24px 26px; border-radius: 14px; }
.diff-them { background: #F2F4F6; border: 1.5px dashed rgba(31,41,55,.13); transform: rotate(-1.1deg); filter: grayscale(1); opacity: .85; }
.diff-us { background: #fff; border: 1.5px solid rgba(31,41,55,.13); box-shadow: 0 34px 80px -44px rgba(31,41,55,.6); }
.diff-fhead { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.diff-ftile { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.diff-them .diff-ftile { background: #E6E9EC; color: var(--ink-faint); }
.diff-us .diff-ftile { background: var(--blue); }
.diff-us .diff-ftile svg { width: 18px; height: 18px; fill: #fff; }
.diff-fname { font-family: var(--serif); font-size: 20px; }
.diff-them .diff-fname { color: var(--ink-soft); }
.diff-fmeta { margin-left: auto; font: 600 10px var(--mono); letter-spacing: .12em; }
.diff-them .diff-fmeta { color: var(--ink-faint); }
.diff-us .diff-fmeta { color: var(--blue); }
.diff-list li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; font-size: 15px; transition: transform .18s ease; }
.diff-them .diff-list li { color: var(--ink-soft); }
.diff-mark { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 12px; font-weight: 700; transition: transform .18s, background .18s, color .18s; }
.diff-mark.x { background: #E6E9EC; color: var(--ink-faint); } /* 4.1: was 2.0:1 */
.diff-mark.c { background: rgba(7,72,254,.12); color: var(--blue); }
.diff-them li b { font-weight: 400; }
.diff-them li.struck b { text-decoration: line-through; text-decoration-color: var(--blue); text-decoration-thickness: 2px; color: var(--ink-faint); }
.diff-them li.struck { transform: translateX(-3px); }
.diff-us li.hot { transform: translateX(4px); }
.diff-us li.hot .diff-mark.c { background: var(--blue); color: #fff; transform: scale(1.1); }
.diff-spine { display: grid; place-items: center; position: relative; }
.diff-spine::before { content: ''; position: absolute; top: 0; bottom: 0; width: 1.5px; background: repeating-linear-gradient(var(--line) 0 6px, transparent 6px 13px); }
.diff-vs { position: relative; background: var(--ink); color: #fff; font: 700 14px var(--sans); letter-spacing: .04em; padding: 7px 12px; border-radius: 999px; opacity: 0; transform: scale(.3); }
.diff-win.is-in .diff-vs { animation: diffPop .42s var(--e-pop) .8s forwards; }
@keyframes diffPop { to { opacity: 1; transform: scale(1); } }
.diff-sel { position: absolute; inset: -7px; border: 1.5px solid var(--blue); border-radius: 17px; clip-path: inset(0 100% 0 0); pointer-events: none; }
.diff-win.is-in .diff-sel { animation: selDraw .7s cubic-bezier(.5,0,.2,1) .55s forwards; }
.diff-sel .h { width: 11px; height: 11px; border-width: 1.6px; opacity: 0; transform: scale(.3); }
.diff-win.is-in .diff-sel .h { animation: diffPop .32s var(--e-pop) 1s forwards; }
.diff-sel .h.tl { left: -12px; top: -12px; } .diff-sel .h.tr { right: -12px; top: -12px; } .diff-sel .h.bl { left: -12px; bottom: -12px; } .diff-sel .h.br { right: -12px; bottom: -12px; }
.diff-dim { position: absolute; right: -6px; bottom: -30px; opacity: 0; background: var(--blue); color: #fff; }
.diff-win.is-in .diff-dim { animation: fadeUp .35s ease 1.15s forwards; }
.diff-win .diff-list li { opacity: 0; }
.diff-win.is-in .diff-list li { animation: fadeUp .55s var(--e-soft) forwards; }
.diff-win.is-in .diff-them li:nth-child(1) { animation-delay: .3s; } .diff-win.is-in .diff-them li:nth-child(2) { animation-delay: .37s; } .diff-win.is-in .diff-them li:nth-child(3) { animation-delay: .44s; } .diff-win.is-in .diff-them li:nth-child(4) { animation-delay: .51s; } .diff-win.is-in .diff-them li:nth-child(5) { animation-delay: .58s; }
.diff-win.is-in .diff-us li:nth-child(1) { animation-delay: .6s; } .diff-win.is-in .diff-us li:nth-child(2) { animation-delay: .68s; } .diff-win.is-in .diff-us li:nth-child(3) { animation-delay: .76s; } .diff-win.is-in .diff-us li:nth-child(4) { animation-delay: .84s; } .diff-win.is-in .diff-us li:nth-child(5) { animation-delay: .92s; }
.diff-pin { position: absolute; right: -14px; top: -22px; z-index: 5; display: flex; align-items: center; gap: 8px; animation: diffFloat 5.5s ease-in-out infinite; }
@keyframes diffFloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(-3deg); } }
.diff-pin .pin { width: 36px; height: 36px; background: #fff; border: 2.5px solid var(--accent); border-radius: 50% 50% 50% 5px; display: grid; place-items: center; color: var(--accent); font-size: 16px; font-weight: 700; } /* 3.3 */
.diff-pin .tag { font: 600 11px var(--sans); background: var(--accent); color: #fff; padding: 4px 9px; border-radius: 6px; white-space: nowrap; }
.diff-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: #fff; border-top: 1px solid var(--line-2); border-radius: 0 0 16px 16px; padding: 22px 28px; color: var(--ink); }
/* Mk. 7.5 (19 Sep): with the line gone, the chip holds the right hand end of the row on its own */
.diff-foot:not(:has(p)) { justify-content: flex-end; }
.diff-foot p { font-family: var(--serif); font-size: clamp(20px, 2.3vw, 27px); }
.diff-foot p .o { color: var(--blue); font-style: italic; }
.diff-foot .chip2 { font-size: 14px; font-weight: 500; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px; transition: .15s; } /* 4.1: inherited the contact chips' white, so it was white on white */
.diff-foot .chip2:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
/* Mk. 7 (2.2, revised 15 Sep): the comparison and the scope lever are ONE panel. The lever sits inside the fig
   window, on the same dotted canvas as the two frames, under a dashed rule: title bar, most agencies vs pleiad,
   then pick your scope, then the foot line. The lever's own white card dissolves into the canvas and its heading
   is hidden, because the head above the window already says what this is.
   On a touch screen the comparison is hidden (it never worked at that width), so the window chrome goes with it
   and the lever stands on the blue on its own, heading and card back. */
.band__one { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.band__one .wrap { padding: 0; max-width: none; }
.scope-in { grid-column: 1 / -1; }

@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  .band__one .diff { padding-bottom: 0; }
  .band__one .figbar { margin-bottom: 0; border-radius: 16px 16px 0 0; box-shadow: none; border-bottom: 1px solid var(--line-2); }
  .band__one .diff-body { border-radius: 0; }

  .scope-in { margin-top: 36px; padding-top: 32px; border-top: 1px dashed var(--line); }
  .scope-in .scope-head { display: none; }
  .scope-in #lp-root { max-width: none; }
  /* the lever rides the window's reveal in here; on its own it would fade in while the panel around it sat still */
  .scope-in #lp-root.reveal { opacity: 1; transform: none; }
  .scope-in #lp-root .card { border: 0; border-radius: 0; background: none; box-shadow: none; padding: 0; }
}

@media (hover: none), (pointer: coarse), (max-width: 760px) {
  #why > .wrap > .sect-head,
  #why .figbar, #why .diff-frame, #why .diff-spine, #why .diff-foot { display: none !important; }
  #why { padding-top: clamp(40px, 8vh, 90px); }
  #why .diff-win, #why .diff-body { display: block; background: none; padding: 0; border-radius: 0; }
  #why .scope-in { margin: 0; }
}

#lp-root { position: relative; max-width: 1197px; margin: 0 auto; color: var(--ink); }
#lp-root .card { position: relative; border: 1px solid rgba(255,255,255,.9); border-radius: 30px; padding: 30px; background: #fff; overflow: hidden; box-shadow: 0 14px 26px -14px rgba(1,34,127,.4), 0 78px 132px -54px rgba(1,34,127,.9); }
#lp-root .disp { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; background: var(--soft); border-radius: 20px; padding: 26px 32px; z-index: 1; }
#lp-root .gauge { display: flex; align-items: flex-end; gap: 10px; }
#lp-root .gauge .cur { font-family: var(--serif); font-size: clamp(40px, 4.8vw, 60px); color: var(--blue); margin-top: 6px; line-height: .9; }
#lp-root .gauge .amt { font-family: var(--serif); font-size: clamp(64px, 8vw, 104px); letter-spacing: -.03em; line-height: .8; color: var(--ink); transition: opacity .2s; }
#lp-root .gauge .per { font-size: 15px; font-weight: 600; color: var(--ink-soft); padding-bottom: 6px; }
#lp-root .pname { margin-top: 12px; font: 600 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
#lp-root .pname b { color: var(--ink); }
#lp-root .dright { display: flex; flex-direction: column; align-items: flex-end; gap: 11px; text-align: right; }
#lp-root .badge2 { display: inline-flex; align-items: center; gap: 8px; background: rgba(7,72,254,.09); color: var(--blue); font-size: 12.5px; font-weight: 500; padding: 6px 13px; border-radius: 30px; }
#lp-root .badge2 .ld { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); animation: pulse 2.4s ease-in-out infinite; }
#lp-root .hrow { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-soft); }
#lp-root .hrow b { color: var(--ink); font-weight: 600; }
#lp-root .hrow .mk { width: 19px; height: 19px; border-radius: 50%; background: rgba(7,72,254,.12); color: var(--blue); display: grid; place-items: center; font-size: 10px; flex: none; }
#lp-root .proof { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
#lp-root .proof .avs { display: flex; }
#lp-root .proof .av { width: 26px; height: 26px; border-radius: 50%; background: #fff; display: grid; place-items: center; font: 600 9px var(--mono); color: var(--ink); margin-left: -9px; box-shadow: 0 2px 8px -3px rgba(31,41,55,.5); }
#lp-root .proof .av:first-child { margin-left: 0; }
#lp-root .proof:hover .av { animation: lpkavwave .7s ease; }
#lp-root .proof:hover .av:nth-child(2) { animation-delay: .09s; } #lp-root .proof:hover .av:nth-child(3) { animation-delay: .18s; }
@keyframes lpkavwave { 0% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(-10deg); } 100% { transform: translateY(0) rotate(8deg); } }
#lp-root .ptext { font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
#lp-root .ptext b { color: var(--ink); }
#lp-root .lower { position: relative; padding: 36px 6px 6px; }
#lp-root .ends { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
#lp-root .ends .a { opacity: 1; transition: opacity .3s; text-align: left; } /* 4.1; accessibility pass (21 Sep 2026): no longer dimmed, .78 took the labels to 3.6:1 and the Most picked tag to 3.3:1. The colour change alone marks the stop */
#lp-root .ends .a.on { opacity: 1; }
#lp-root .ends .a:nth-child(2) { text-align: center; } /* Mk. 7: three stops, so the middle one centres over its notch */
#lp-root .ends .a:last-child { text-align: right; }
#lp-root .ends .pl { display: block; font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); transition: color .3s; }
#lp-root .ends .a.on .pl { color: var(--ink); }
#lp-root .ends .pr { display: block; margin-top: 5px; font-family: var(--serif); font-size: 20px; color: var(--ink-faint); transition: color .3s; } /* 4.1: #B8C2CC was 1.8:1 */
#lp-root .ends .a.on .pr { color: var(--blue); }
#lp-root .poptag { display: inline-block; margin-bottom: 6px; background: var(--accent); color: #fff; /* 3.3 */ font: 600 9px var(--mono); letter-spacing: .09em; padding: 3px 9px; border-radius: 20px; }
#lp-root .track { position: relative; height: 64px; border-radius: 40px; cursor: pointer; background: linear-gradient(180deg, #E2E7EE, #EEF2F6); box-shadow: inset 0 3px 8px rgba(30,50,80,.2), inset 0 -1px 0 rgba(255,255,255,.85); }
/* Mk. 7: two notches instead of one, so the three stops are visible in the track itself */
#lp-root .track::before, #lp-root .track::after { content: ''; position: absolute; top: 14px; bottom: 14px; width: 2px; transform: translateX(-50%); background: repeating-linear-gradient(#0000 0 3px, rgba(120,140,160,.35) 3px 7px); }
#lp-root .track::before { left: 36%; }
#lp-root .track::after { left: 69%; }
#lp-root .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 52%; border-radius: 40px; background: linear-gradient(90deg, var(--blue-300), var(--blue)); transition: width .55s cubic-bezier(.3,1.4,.5,1); }
#lp-root .handle { position: absolute; left: 5px; top: 5px; width: 120px; height: 54px; border-radius: 34px; background: linear-gradient(180deg, #fff, #E7EDF3); display: flex; align-items: center; justify-content: center; gap: 14px; touch-action: none; z-index: 3; box-shadow: 0 9px 18px -4px rgba(30,50,80,.4), inset 0 1px 0 #fff; transition: transform .55s cubic-bezier(.3,1.4,.5,1); }
#lp-root .handle svg { width: 12px; height: 12px; color: #9AA8B6; }
#lp-root .handle svg:first-child { animation: lpkndl 1.6s ease-in-out infinite; }
#lp-root .handle svg:last-child { animation: lpkndr 1.6s ease-in-out infinite; }
@keyframes lpkndl { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-2.5px); } }
@keyframes lpkndr { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2.5px); } }
#lp-root .hint { display: block; text-align: center; margin-top: 12px; font: 500 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
#lp-root .feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 30px; margin-top: 30px; }
#lp-root .feats li { display: flex; align-items: center; gap: 11px; font-size: 15px; color: var(--ink); transition: transform .25s ease; }
#lp-root .feats li .mk { width: 22px; height: 22px; border-radius: 50%; background: rgba(7,72,254,.12); color: var(--blue); display: grid; place-items: center; flex: none; transition: transform .25s, background .25s, color .25s; }
#lp-root .feats li .mk svg { width: 12px; height: 12px; }
#lp-root .feats-dev li { color: var(--ink-faint); opacity: .9; /* accessibility pass: .5 read 2.1:1, .9 reads 4.6:1 */ transition: color .45s, opacity .45s, transform .25s; }
#lp-root .feats-dev li .mk { background: #EEF1F4; color: #B8C2CC; }
/* Mk. 7: the middle stop lights four of the six. The two it holds back, brand film and the third workstream,
   are the ones the last stop is sold on */
#lp-root.mid .feats-dev li:nth-child(1), #lp-root.mid .feats-dev li:nth-child(2),
#lp-root.mid .feats-dev li:nth-child(4), #lp-root.mid .feats-dev li:nth-child(5),
#lp-root.dev .feats-dev li { color: var(--ink); opacity: 1; }
#lp-root.mid .feats-dev li:nth-child(1) .mk, #lp-root.mid .feats-dev li:nth-child(2) .mk,
#lp-root.mid .feats-dev li:nth-child(4) .mk, #lp-root.mid .feats-dev li:nth-child(5) .mk,
#lp-root.dev .feats-dev li .mk { background: rgba(7,72,254,.12); color: var(--blue); animation: lpknoderip .6s ease-out; }
@keyframes lpknoderip { from { box-shadow: 0 0 0 0 rgba(7,72,254,.45); } to { box-shadow: 0 0 0 9px rgba(7,72,254,0); } }
#lp-root .feats li:hover, #lp-root .feats li.hot { transform: translateX(4px); }
#lp-root .feats li:hover .mk, #lp-root .feats li.hot .mk { background: var(--blue); color: #fff; transform: scale(1.12); }
#lp-root .feats li:hover .mk svg path { animation: lpTick .45s ease; }
@keyframes lpTick { from { stroke-dashoffset: 26; } to { stroke-dashoffset: 0; } }
#lp-root .unlock { display: flex; justify-content: center; margin-top: 26px; }
#lp-root .ul-chip { display: inline-flex; align-items: center; gap: 10px; background: #F4F6FA; border: 1px solid var(--line-2); border-radius: 30px; padding: 8px 16px; font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); transition: .45s cubic-bezier(.3,1.2,.5,1); }
/* Mk. 7: at the decoy stop the lock stays shut and the chip turns accent, so the nudge to the last stop is the
   warmest thing on the panel */
#lp-root.mid .ul-chip { background: rgba(198,77,21,.07); border-color: rgba(198,77,21,.38); color: var(--accent); }
#lp-root.dev .ul-chip { background: rgba(7,72,254,.09); border-color: rgba(7,72,254,.4); color: var(--blue); }
#lp-root .ul-chip .lk { width: 22px; height: 22px; border-radius: 50%; background: #E6EAF1; display: grid; place-items: center; color: var(--ink-faint); transition: .45s; }
#lp-root.dev .ul-chip .lk { background: var(--blue); color: #fff; transform: rotate(-8deg); }
#lp-root .ul-chip .lk svg { width: 12px; height: 12px; }
#lp-root .lk .open-i { display: none; }
#lp-root.dev .lk .shut-i { display: none; }
#lp-root.dev .lk .open-i { display: block; }
#lp-root .lp-foot { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 30px; }
#lp-root .reassure { font-size: 13px; color: var(--ink-faint); }
@media (max-width: 860px) {
  #lp-root .disp { grid-template-columns: 1fr; }
  #lp-root .dright { align-items: flex-start; text-align: left; }
  #lp-root .feats { grid-template-columns: 1fr; }
}

/* =========================================================
   19. QUESTIONS
   ========================================================= */
.faq { padding-bottom: clamp(80px, 12vh, 150px); }
.faq__list { max-width: 1120px; margin: 50px auto 0; padding: 0 var(--pad); display: flex; flex-direction: column; gap: 22px; }
.faq__item { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 0 clamp(18px, 2.6vw, 36px); transition: box-shadow .4s; }
.faq__item[open] { box-shadow: 0 26px 54px -34px rgba(1,34,127,.35); }
.faq__item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; cursor: pointer; font-family: var(--serif); font-size: clamp(23px, 2.3vw, 34px); line-height: 1.15; letter-spacing: -.015em; transition: color .3s; }
.faq__item[open] summary, .faq__item summary:hover { color: var(--blue); }
.faq__item summary::-webkit-details-marker { display: none; }
/* The marker is the Pleiad star (#star symbol): closed it sits in a ring, open it fills blue and turns half a turn,
   which lands the three point mark back on itself */
.faq__plus { position: relative; display: grid; place-items: center; width: 26px; height: 26px; flex: none; border: 1px solid var(--line); border-radius: 999px; color: var(--blue); transition: background .3s, border-color .3s, color .3s; }
.faq__plus svg { width: 18px; height: 18px; fill: currentColor; transition: transform .5s var(--ease-out); }
.faq__item:not([open]) summary:hover .faq__plus svg { transform: rotate(30deg); }
.faq__item[open] .faq__plus { background: var(--blue); border-color: var(--blue); color: #fff; }
.faq__item[open] .faq__plus svg { transform: rotate(180deg); }
.faq__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-out); }
.faq__body > div { overflow: hidden; }
.faq__inspect { display: flex; gap: 18px; border-top: 1px solid var(--line-2); }
.faq__k { min-width: 74px; padding-top: 22px; color: var(--ink-faint); flex: none; }
.faq__inspect p { padding: 18px 0 34px; color: var(--text); max-width: 66ch; font-size: clamp(17px, 1.2vw, 19px); line-height: 1.7; }
.faq__inspect p b { font-weight: 600; color: var(--ink); }
.faq__item[open] .faq__body { grid-template-rows: 1fr; }
.faq__tab { position: absolute; left: -1px; top: -24px; border-radius: 7px 7px 0 0; opacity: 0; transition: opacity .25s; padding: 4px 10px; }
.faq__tab::before { content: attr(data-frame); }
.faq__item[open] .faq__tab { opacity: 1; }
.faq__frame { position: absolute; inset: -7px; border: 1.5px solid var(--blue); border-radius: 12px; clip-path: inset(0 100% 0 0); opacity: 0; pointer-events: none; }
.faq__item[open] .faq__frame { opacity: 1; animation: selDraw .5s var(--e-wipe) forwards; }
.faq__frame .h { opacity: 0; }
.faq__item[open] .faq__frame .h { animation: hpop .26s var(--e-pop) forwards; }
.faq__item[open] .faq__frame .h.tl { animation-delay: .46s; } .faq__item[open] .faq__frame .h.tr { animation-delay: .52s; }
.faq__item[open] .faq__frame .h.bl { animation-delay: .58s; } .faq__item[open] .faq__frame .h.br { animation-delay: .64s; }
.faq__dim { position: absolute; right: -7px; bottom: -30px; opacity: 0; transition: opacity .2s .58s; }
.faq__item[open] .faq__dim { opacity: 1; }
@media (max-width: 620px) { .faq__k { display: none; } }

/* =========================================================
   20. CONTACT
   ========================================================= */
/* Mk. 7 (2.1): shorter. Less padding above and below, a tighter lead column and tighter bubbles; no copy cut (proposals in PROGRESS.md) */
.contact { padding: clamp(56px, 8vh, 100px) var(--pad); }
.contact__grid { max-width: var(--max); margin: 0 auto; display: grid; gap: 36px; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .contact__grid { grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; } }
.contact__lead .lab { color: #fff; } /* 2.37: light blue measured 3.3:1 here */
.contact__lead h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5.2vw, 82px); line-height: .96; letter-spacing: -.025em; margin: 16px 0 20px; }
.contact__lead h2 .o { color: var(--blue-100); font-style: italic; }
.contact__body { max-width: 480px; font-size: clamp(16px, 1.2vw, 19px); color: rgba(255,255,255,.86); }
.contact__body b { font-weight: 600; color: #fff; }
.contact__list { margin: 22px 0 18px; display: grid; gap: 6px; color: rgba(255,255,255,.9); }
.contact__list li { position: relative; padding-left: 26px; }
.contact__list li::before { content: ''; position: absolute; left: 0; top: .5em; width: 12px; height: 12px; background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
.contact__alt { font-size: 15px; color: rgba(255,255,255,.9); margin-bottom: 16px; max-width: 480px; } /* 4.1: .78 was 4.3:1 on blue */
.contact__alt a { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.5); }
.contact__alt a:hover { text-decoration-color: #fff; }
.hand--contact { --pen: #fff; color: var(--pen); }

.convo { display: grid; gap: 10px; position: relative; }
.convo.is-armed .convo__bubble, .convo.is-armed .convo__send { opacity: 0; transform: translateY(14px); }
.convo.is-live .convo__bubble, .convo.is-live .convo__send { opacity: 1; transform: none; transition: opacity .6s var(--ease-out) var(--d, 0s), transform .6s var(--ease-out) var(--d, 0s); }
.convo__typing { position: absolute; left: 0; top: 0; display: none; gap: 5px; align-items: center; padding: 16px 18px; border-radius: 18px 18px 18px 6px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); }
.convo__typing i { width: 7px; height: 7px; border-radius: 999px; background: #fff; opacity: .5; animation: dot 1s ease-in-out infinite; }
.convo__typing i:nth-child(2) { animation-delay: .15s; } .convo__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-4px); opacity: 1; } }
.convo.is-live .convo__typing { display: flex; animation: typingOut .3s ease .85s forwards; }
@keyframes typingOut { to { opacity: 0; visibility: hidden; } }
.convo__bubble--you { position: relative; }
.convo.is-live textarea:placeholder-shown:not(:focus) { animation: askForReply 2.2s ease-in-out .5s infinite; }
@keyframes askForReply { 0%, 100% { border-bottom-color: var(--line); } 50% { border-bottom-color: var(--blue); box-shadow: 0 1px 0 0 var(--blue); } }
/* The hint writes itself in once the chat bubbles have arrived (A3). */
/* this one sits on the white bubble, not on the blue ground it lives in, so it takes the deep blue */
.hand--type { --pen-alert: var(--blue); position: absolute; right: 20px; top: 12px; color: var(--pen); font-size: clamp(21px, 1.7vw, 26px); transform: rotate(-3deg); padding-right: 64px; opacity: 0; transition: opacity .3s; --lead: 2.4s; }
.hand--type .mark--arrow { right: -6px; top: 12px; width: 60px; height: 32px; transform: rotate(40deg); }
.convo.is-live .hand--type { opacity: 1; }
.convo.is-live .hand--type .hand__ink { -webkit-mask-position: 0 0; mask-position: 0 0; }
.convo.is-live .hand--type .mark path { stroke-dashoffset: 0; }
.convo.is-touched .hand--type { opacity: 0; }
.convo.is-touched textarea { animation: none; }
.convo__bubble { padding: 14px 18px; border-radius: 18px; max-width: 92%; }
.convo__bubble--them { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom-left-radius: 6px; justify-self: start; }
.convo__bubble--you { background: var(--paper); color: var(--text); border-bottom-right-radius: 6px; justify-self: end; width: 92%; display: grid; gap: 8px; }
.convo__who { display: block; margin-bottom: 8px; color: #fff; } /* 4.1: light blue on the glass bubble measured under 4.5 */
.convo__bubble--them p { font-size: 17px; }
.convo textarea, .convo input { width: 100%; border: 0; background: transparent; font: inherit; color: var(--text); resize: vertical; outline: none; padding: 2px 0; border-bottom: 1px solid var(--line); border-radius: 0; }
/* Accessibility pass (21 Sep 2026): the fields keep a real focus ring; the white halo of the global ring vanished on the white card */
.convo textarea:focus-visible, .convo input:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 2px; box-shadow: none; }
.convo textarea { min-height: 62px; }
.convo textarea:focus, .convo input:focus { border-bottom-color: var(--blue); }
.convo textarea::placeholder, .convo input::placeholder { color: rgba(31,41,55,.42); }
.convo__ident { grid-template-columns: auto 1fr; align-items: center; column-gap: 16px; }
.convo__ident .lab { color: var(--text-muted); }
.chips2 { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip2 { padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.45); font-size: 14px; color: #fff; transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease-out); }
.chip2:hover { border-color: #fff; transform: translateY(-1px); }
.chip2.is-on { background: #fff; color: var(--blue); border-color: #fff; }
.convo__error { color: #FFD1D1; }
.convo .hp { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; } /* 4.3 honeypot, off screen */
.convo__send { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 4px; color: rgba(255,255,255,.9); } /* 4.1 */
.convo__done[hidden] { display: none; } /* Mk. 7: display: grid below beat the hidden attribute, so the thanks box showed before anything was sent */
.convo__done { background: var(--paper); color: var(--text); border-radius: 18px; padding: 26px; display: grid; gap: 14px; }
.convo__done svg { fill: var(--blue); }
.convo__done a { color: var(--blue); text-decoration: underline; }
.convo.is-sent .convo__bubble, .convo.is-sent .convo__send { display: none; }

/* ---------- Contact page, reworked (21 Sep 2026): .cpg ----------
   One clear page for the conversation. The clock heading stays, the chat becomes a single paper window with a
   title bar, a step count and a progress rule, and the side column answers the three questions that stop people
   sending: who reads it, can I just call, and what happens after. Bubbles and chips are re-inked for paper. */
.cpg { position: relative; padding: clamp(104px, 13vh, 132px) var(--pad) clamp(80px, 12vh, 140px); color: #fff; }
/* .canvas clips with overflow: hidden, which makes the section a scroll box and throws the sticky side column off by
   its top offset; clip crops the same way without that */
.cpg.canvas { overflow: clip; }
.cpg__in { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; }
.cpg__head { max-width: 900px; }
.cpg__kick { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; color: #fff; margin: 0; }
.cpg__dot { opacity: .6; }
/* 21 Sep: the heading was the size of a home hero; it now introduces the form rather than competing with it */
.cpg__head h1 { margin: 14px 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 4.6vw, 72px); line-height: .95; letter-spacing: -.025em; }
.cpg__head h1 .o { font-style: italic; color: var(--blue-100); }
.cpg__sub { margin: 14px 0 0; max-width: 560px; font-size: clamp(16px, 1.15vw, 18px); color: rgba(255,255,255,.9); }
.cpg__sub b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.cpg__grid { display: grid; gap: 28px; margin-top: clamp(28px, 4vh, 44px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) {
  .cpg__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 32px; }
  /* the form runs longer than the side, so the side keeps pace with it */
  .cpg__side { position: sticky; top: 96px; }
}

/* the window */
.cpg__win { background: var(--paper); color: var(--text); border-radius: 22px; overflow: hidden; gap: 0;
  box-shadow: 0 50px 100px -50px rgba(1,15,60,.9), 0 0 0 1px rgba(255,255,255,.2); }
.cpg__bar { display: flex; align-items: center; gap: 14px; padding: 14px 20px; background: #EEF1F6; border-bottom: 1px solid var(--line); }
.cpg__lights { display: flex; gap: 7px; }
.cpg__lights i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.cpg__lights i:nth-child(2) { background: #FEBC2E; } .cpg__lights i:nth-child(3) { background: #28C840; }
.cpg__title { display: inline-flex; align-items: center; gap: 8px; font: 500 14px var(--sans); color: var(--ink); }
.cpg__title svg { width: 16px; height: 16px; fill: var(--blue); }
.cpg__step { margin-left: auto; color: var(--blue); }
.cpg__progress { height: 3px; background: rgba(7,72,254,.1); }
.cpg__progress i { display: block; height: 100%; width: 25%; background: var(--blue); transition: width .5s var(--e-ui); }
.cpg__thread { position: relative; display: grid; gap: 12px; padding: clamp(20px, 2.6vw, 34px); }
.cpg__win .convo__typing { left: clamp(20px, 2.6vw, 34px); top: clamp(20px, 2.6vw, 34px); background: #EAF0FF; border-color: rgba(7,72,254,.18); }
.cpg__win .convo__typing i { background: var(--blue); }
.cpg__win .convo__bubble--them { background: #EAF0FF; border: 1px solid rgba(7,72,254,.14); backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--ink); }
.cpg__win .convo__bubble--them p { font-size: 17px; }
.cpg__win .convo__who { color: var(--blue); display: flex; gap: 8px; align-items: center; }
.cpg__win .convo__who b { font-weight: 600; padding: 2px 6px; border-radius: 5px; background: var(--blue); color: #fff; }
.cpg__win .convo__bubble--you { background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 24px -18px rgba(1,34,127,.45); }
.cpg__win .convo__bubble--you:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(7,72,254,.12), 0 10px 24px -18px rgba(1,34,127,.45); }
.cpg__win .chip2 { border-color: rgba(7,72,254,.35); color: var(--blue); background: #fff; }
.cpg__win .chip2:hover { border-color: var(--blue); }
.cpg__win .chip2.is-on { background: var(--blue); color: #fff; border-color: var(--blue); }
.cpg__win .convo__error { color: #C62828; }
.cpg__win .convo__send { color: var(--text-muted); margin-top: 10px; padding-top: 18px; border-top: 1px dashed rgba(31,41,55,.2); }
.cpg__win .convo__send .btn { font-size: 17px; padding-block: 17px; padding-inline: 28px; }
.cpg__fine { font-size: 14px; max-width: 34ch; line-height: 1.45; }
.cpg__fine a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.cpg__win .convo__done { background: #EAF0FF; }

/* the side */
.cpg__side { display: grid; gap: 14px; }
.cpg__card { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.26); border-radius: 18px; padding: 22px 22px 20px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cpg__lab { color: #fff; margin: 0 0 14px; }
.cpg__people { display: grid; gap: 12px; }
.cpg__people li { display: flex; align-items: center; gap: 14px; }
.cpg__people img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid #fff; }
.cpg__people span { display: grid; gap: 2px; min-width: 0; }
.cpg__people b { font: 600 17px/1.2 var(--sans); }
.cpg__people small { font-size: 13.5px; color: rgba(255,255,255,.82); }
.cpg__open { display: flex; align-items: center; gap: 9px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.2); font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.cpg__open i { width: 8px; height: 8px; border-radius: 50%; background: var(--grn); box-shadow: 0 0 0 3px rgba(34,197,94,.25); animation: footdot 2.4s infinite; }
.cpg__ways { display: grid; gap: 8px; }
.cpg__ways a, .cpg__ways li > div { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.08); color: #fff; }
.cpg__ways a { transition: background .25s, color .25s; }
.cpg__ways a:hover, .cpg__ways a:focus-visible { background: #fff; color: var(--blue); }
.cpg__ways span:not(.cpg__ico) { display: grid; gap: 1px; min-width: 0; font: 500 16px/1.3 var(--sans); overflow-wrap: anywhere; }
.cpg__ways small { font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .78; }
.cpg__ways a > i { margin-left: auto; font-style: normal; transition: translate .25s; }
.cpg__ways a:hover > i { translate: 4px 0; }
.cpg__ico { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.16); }
.cpg__ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cpg__ways a:hover .cpg__ico { background: rgba(7,72,254,.1); }
.cpg__next { display: grid; gap: 12px; }
.cpg__next li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: baseline; font-size: 15.5px; line-height: 1.45; }
.cpg__next b { font: 600 12px var(--mono); letter-spacing: .08em; color: var(--blue-100); }
.cpg__hand { justify-self: end; margin-top: 4px; rotate: -3deg; font-size: clamp(21px, 1.7vw, 26px); }
@media (max-width: 620px) {
  .cpg__bar .cpg__lights { display: none; }
  .cpg__win .convo__bubble { max-width: 100%; }
  .cpg__win .convo__bubble--you { width: 100%; }
  .cpg__win .hand--type { display: none; }
}

/* ---------- Home: the contact band (21 Sep 2026). The conversation moved to contact.html; this points there ---------- */
.hcta { position: relative; padding: clamp(90px, 13vh, 150px) var(--pad); color: #fff; }
.hcta__in { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; display: grid; gap: 34px; align-items: end; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .hcta__in { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 60px; } }
.hcta .lab { color: #fff; margin: 0; }
.hcta h2 { margin: 16px 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(46px, 6.6vw, 104px); line-height: .92; letter-spacing: -.028em; }
.hcta h2 .o { font-style: italic; color: var(--blue-100); }
.hcta__sub { margin: 22px 0 0; max-width: 520px; font-size: clamp(16px, 1.25vw, 19px); color: rgba(255,255,255,.9); }
.hcta__go { display: grid; gap: 18px; justify-items: start; }
.hcta__faces { display: flex; align-items: center; gap: 14px; font: 500 15px var(--sans); }
.hcta__faces span { display: flex; }
.hcta__faces img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; }
.hcta__faces img + img { margin-left: -12px; }
.hcta__go .btn { font-size: 18px; padding: 20px 32px; }
.hcta__go .lab { color: rgba(255,255,255,.85); }

/* =========================================================
   21. FOOTER
   ========================================================= */
.foot { background: var(--ink); color: var(--text-on-ink); padding: 60px var(--pad) 30px; position: relative; overflow: hidden; }
#footDots { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.foot > *:not(#footDots) { position: relative; z-index: 1; }
.foot__horizon { position: absolute !important; top: 0; left: 0; right: 0; height: 1px; z-index: 3; background: linear-gradient(90deg, transparent, rgba(179,199,255,.6), transparent); }
.foot__flabel { position: absolute !important; top: 20px; left: var(--pad); z-index: 5; display: flex; align-items: center; gap: 8px; color: var(--blue-100); font-weight: 600; }
.ff-mark { width: 18px; height: 18px; fill: var(--blue-200); transform-origin: 50% 50%; animation: starwink 5.4s ease-in-out infinite; }
@keyframes starwink { 0%, 88%, 100% { transform: scale(1) rotate(0); } 94% { transform: scale(1.3) rotate(15deg); } }
.foot__reveal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .18em; line-height: .85; overflow: hidden; padding: .3em 0 .1em; margin-top: -.3em; }
.foot__word { display: block; font-family: var(--serif); font-size: clamp(88px, 21vw, 340px); letter-spacing: -.04em; color: var(--text-on-ink); white-space: nowrap; }
.foot__word span { display: inline-block; transform: translateY(110%); transition: transform 1.1s var(--ease-out); will-change: transform; }
.foot__word--italic { font-style: italic; color: var(--blue); font-size: clamp(60px, 14vw, 230px); }
.foot.is-in .foot__word span { transform: none; }
/* Mk. 7 (2.9, checklist 18.02): the questions, scaled down for the footer: two columns of dark cards on ink, the same
   details and copy, without the paper page's frame chrome */
.foot__faq { border-top: 1px solid var(--line-ink); margin-top: 34px; padding-top: 34px; }
.foot__faq > .lab { display: flex; align-items: center; gap: 0; color: var(--blue-300); margin-bottom: 18px; font-size: clamp(16.17px, 1.32825vw, 19.635px); letter-spacing: .14em; }
.foot__faq .hand--inline { color: var(--pen); font-size: clamp(21px, 1.6vw, 25px); }
.faq__list--foot { max-width: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 900px) { .faq__list--foot { grid-template-columns: 1fr 1fr; gap: 10px 22px; align-items: start; } }
.faq__list--foot .faq__item { background: var(--ink-2); border-color: var(--line-ink); color: var(--text-on-ink); padding: 0 20px; }
.faq__list--foot .faq__item[open] { box-shadow: none; }
.faq__list--foot .faq__item summary { font-size: clamp(18px, 1.4vw, 22px); padding: 15px 0; }
.faq__list--foot .faq__item[open] summary, .faq__list--foot .faq__item summary:hover { color: var(--blue-200); }
.faq__list--foot .faq__plus { border-color: var(--line-ink); color: var(--blue-200); }
.faq__list--foot .faq__item[open] .faq__plus { color: #fff; }
.faq__list--foot .faq__inspect { border-top-color: var(--line-ink); }
.faq__list--foot .faq__inspect p { color: var(--text-on-ink-muted); font-size: 15px; line-height: 1.6; padding: 14px 0 20px; }
.faq__list--foot .faq__inspect p b { color: var(--text-on-ink); }
.faq__list--foot .faq__k, .faq__list--foot .faq__tab, .faq__list--foot .faq__dim, .faq__list--foot .faq__frame { display: none; }
.foot__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 30px; border-top: 1px solid var(--line-ink); margin-top: 40px; padding-top: 40px; }
@media (min-width: 900px) { .foot__cols { grid-template-columns: 1.6fr 1fr 1fr; } }
.foot__brand { grid-column: 1 / -1; display: grid; gap: 18px; justify-items: start; }
@media (min-width: 900px) { .foot__brand { grid-column: auto; } }
.foot__brand svg { fill: var(--blue); }
.foot__brand p:not(.lab) { font-family: var(--serif); font-size: 26px; line-height: 1.1; letter-spacing: -.01em; }
.foot__brand .lab { color: var(--text-on-ink-muted); }
.foot__mail { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -.01em; color: var(--blue-100); border-bottom: 1px solid rgba(179,199,255,.35); transition: color .3s, border-color .3s; }
.foot__mail:hover { color: #fff; border-color: #fff; }
.foot__live { display: inline-flex; align-items: center; gap: 8px; }
.foot__live i { width: 8px; height: 8px; border-radius: 50%; background: var(--grn); animation: footdot 2.4s infinite; }
.foot__col > .lab { display: block; color: var(--blue-300); margin-bottom: 14px; }
.foot__col li a { display: inline-block; padding: 4px 0; color: var(--text-on-ink-muted); transition: color .3s, transform .4s var(--ease-out); }
.foot__col li a:hover { color: var(--text-on-ink); transform: translateX(6px); }

/* ---------- Mk. 7 (2.9): the footer game ----------
   A bot plays tetris on the line above the legal block until somebody clicks
   it, then the same board takes the keyboard. Every colour on it is an existing
   site token, one per piece, so the board never introduces a shade the rest of
   the site does not already use. Hidden until main.js mounts it, so a page with
   no JavaScript shows no empty frame. */
.foot__play {
  --pg-cell: 7px; --pg-gap: 1px;
  --pg-empty: rgba(242, 243, 247, .07);
  --pg-ghost: rgba(179, 199, 255, .2);
  --pg-flash: var(--soft);
  --pg-dead: rgba(242, 243, 247, .24);
  --pg-1: var(--blue-100);   /* I */
  --pg-2: var(--accent-200); /* O */
  --pg-3: var(--blue-300);   /* T */
  --pg-4: var(--grn);        /* S */
  --pg-5: #F2705C;           /* Z: its own value now that the pen is blue, or it would match the I piece */
  --pg-6: var(--blue);       /* J */
  --pg-7: var(--soft);       /* L */
  display: none; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 30px 40px;
  border-top: 1px solid var(--line-ink); margin-top: 40px; padding-top: 34px;
}
.foot__play.is-on { display: flex; }
.play__say { display: grid; gap: 12px; max-width: 46ch; }
.play__say > .lab { display: flex; align-items: center; color: var(--blue-300); }
.play__line { color: var(--text-on-ink-muted); font-size: 15px; line-height: 1.5; max-width: 42ch; }
/* The keys only matter once you are holding the board, so they wait until then.
   The row keeps its space in every mode, or turning it on shifts the footer. */
.play__keys { color: var(--text-on-ink-muted); opacity: 0; transition: opacity .3s; }
.foot__play[data-mode="playing"] .play__keys { opacity: .75; }
.play__keys b { display: inline-block; min-width: 1.2em; margin: 0 .15em; padding: 2px 5px; border-radius: 3px; font-weight: 600; background: rgba(242, 243, 247, .12); }

.play__rig { position: relative; display: flex; align-items: flex-end; gap: 18px; }
.play__board { position: relative; padding: calc(var(--pg-gap) * 3); border-radius: 4px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-ink); }
.play__grid { display: grid; grid-template-columns: repeat(var(--pg-cols, 10), var(--pg-cell)); grid-auto-rows: var(--pg-cell); gap: var(--pg-gap); }
.play__cell { display: block; border-radius: 1px; background: var(--pg-empty); }
.play__board .h { opacity: 0; transition: opacity .35s; }
.foot__play[data-mode="playing"] .play__board .h { opacity: 1; }

.play__start { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 4px; cursor: pointer; background: rgba(9, 13, 26, .34); transition: background .25s, opacity .25s; }
.play__start:hover, .play__start:focus-visible { background: rgba(9, 13, 26, .58); outline: none; }
/* The board is only ten cells wide, so the chip has to wrap inside it rather
   than reach across the readout beside it. */
.play__invite { max-width: calc(var(--pg-cols, 10) * (var(--pg-cell) + var(--pg-gap))); font-size: 10px; line-height: 1.35; letter-spacing: .04em; text-align: center; text-wrap: balance; white-space: normal; animation: playBreathe 2.6s ease-in-out infinite; }
.play__start:hover .play__invite, .play__start:focus-visible .play__invite { animation: none; transform: scale(1.06); }
.foot__play[data-mode="playing"] .play__start { opacity: 0; pointer-events: none; }
@keyframes playBreathe { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }

/* Mk. 7.5 Sandbox (20 Sep): the readout holds its own width. Every figure sits
   in a column seven digits wide, in tabular numerals, so the block measures the
   same at 0 as it does at 999,999 and the board beside it never steps sideways
   when a score gains a digit. Nothing here is sized by its content. */
.play__meta { display: grid; gap: 6px; padding-bottom: 2px; }
.play__stat { display: flex; align-items: baseline; justify-content: space-between; gap: .6em; color: var(--blue-300); }
.play__stat b { min-width: 7ch; text-align: right; font-size: 13px; font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--text-on-ink); }
/* The best is the visitor's own game, never the bot's, so it only lights up on
   the frame they pass a score they set themselves. */
.play__stat b[data-play="best"] { transition: color .45s; }
.foot__play.is-best .play__stat b[data-play="best"] { color: var(--grn); animation: playBest .52s var(--ease-out); }
@keyframes playBest { 0% { transform: none; } 34% { transform: translateY(-3px) scale(1.14); } 100% { transform: none; } }
.play__next { display: grid; grid-template-columns: repeat(4, 4px); grid-auto-rows: 4px; gap: 1px; margin-top: 4px; }
.play__next i { display: block; background: transparent; }
.play__dim { position: absolute; top: -9px; right: -10px; opacity: 0; transition: opacity .35s; }
.foot__play[data-mode="playing"] .play__dim { opacity: 1; }

@media (max-width: 620px) { .play__rig { gap: 14px; } .play__say { max-width: none; } }

/* ---------- Mk. 7.5 Sandbox (21 Sep): the last line of the footer is two halves ----------
   Ask an AI on the left, the game on the right, a hairline between them. The rule and the space above now belong
   to the pair, not to the game. The ask half is after the ask ai component Truman sent (React, Radix, Tailwind),
   rebuilt with a native popover: the browser opens and closes it, Esc and a click outside included. */
.foot__duo { display: grid; gap: 44px 64px; align-items: start; border-top: 1px solid var(--line-ink); margin-top: 40px; padding-top: 34px; }
.foot__duo > .foot__play { border-top: 0; margin-top: 0; padding-top: 0; justify-content: flex-start; gap: 26px 40px; }
.foot__duo .play__say { max-width: 34ch; }
@media (min-width: 900px) {
  .foot__duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot__duo > .foot__play { border-left: 1px solid var(--line-ink); padding-left: clamp(28px, 3.4vw, 56px); align-self: stretch; align-items: flex-start; }
}
.foot__ask { display: grid; gap: 12px; justify-items: start; align-content: start; }
.foot__ask > .lab { display: flex; align-items: center; margin: 0; color: var(--blue-300); }
.ask__line { margin: 0; max-width: 42ch; color: var(--text-on-ink-muted); font-size: 15px; line-height: 1.5; }
.ask__trigger { margin-top: 10px; display: inline-flex; align-items: center; gap: 16px; height: 56px; padding: 0 9px 0 22px; border-radius: 999px; border: 1px solid var(--line-ink); background: rgba(242,243,247,.06); color: var(--text-on-ink); font: 500 16px var(--sans); letter-spacing: -.01em; cursor: pointer; transition: transform .2s var(--e-ui), background .2s, border-color .2s; }
.ask__trigger:hover { transform: translateY(-2px); background: rgba(242,243,247,.1); border-color: rgba(179,199,255,.45); }
.ask__trigger:active { transform: scale(.97); }
.ask__trigger:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 3px; }
/* the mascot: a blue blob with two eyes that blinks, and looks up at the panel while it is open */
.ask__blob { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 40px; height: 40px; flex: none; background: var(--blue); color: #fff; rotate: -7deg; animation: askBlob 9s ease-in-out infinite; transition: rotate .44s cubic-bezier(.22,1.5,.5,1), scale .44s cubic-bezier(.22,1.5,.5,1), translate .2s var(--e-ui); }
/* the eyes follow the pointer (module 35 writes --ex and --ey, in px, already turned into the blob's own tilt) */
.ask__blob i { display: block; width: 4px; height: 10px; border-radius: 5px; background: currentColor; translate: calc(1px + var(--ex, 0px)) calc(-1px + var(--ey, 0px)); transition: translate .14s var(--e-ui); animation: askBlink 6.5s infinite; }
.ask__trigger:hover .ask__blob { translate: 0 -2px; }
.ask__trigger.is-open .ask__blob { rotate: 6deg; scale: 1.05; }
.ask__trigger.is-open .ask__blob i { translate: 1px -4px; }
@keyframes askBlob { 0%, 100% { border-radius: 58% 42% 55% 45% / 52% 58% 42% 48%; } 33% { border-radius: 45% 55% 48% 52% / 58% 44% 56% 42%; } 66% { border-radius: 52% 48% 42% 58% / 45% 52% 48% 55%; } }
@keyframes askBlink { 0%, 42%, 46%, 100% { transform: scaleY(1); } 44% { transform: scaleY(.12); } }
/* the panel: placed over the button by module 35, centred by the browser if the script never runs */
.ask__pop { position: fixed; width: min(384px, calc(100vw - 24px)); padding: 20px 20px 14px; border: 0; border-radius: 25px; color: var(--ink);
  background: rgba(247,246,242,.93); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: 0 34px 70px -24px rgba(0,0,0,.6), inset 0 0 0 1px rgba(9,13,26,.08); }
.ask__pop.is-placed { inset: auto; margin: 0; }
.ask__pop:popover-open { animation: askIn .18s var(--e-ui); }
@keyframes askIn { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.ask__title { margin: 0; font: 600 16px/1.3 var(--sans); letter-spacing: -.01em; }
.ask__desc { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.ask__tiles { display: flex; gap: 6px; margin-top: 22px; }
.ask__tile { position: relative; flex: 1 1 0; min-width: 0; height: 77px; display: grid; place-items: center; border-radius: 15px; background: rgba(9,13,26,.05); color: rgba(9,13,26,.5); text-decoration: none; transition: transform .2s var(--e-ui), background-color .2s, color .2s, box-shadow .2s; }
.ask__tile:first-child { border-radius: 21px 15px 15px 21px; }
.ask__tile:last-child { border-radius: 15px 21px 21px 15px; }
.ask__tile > svg:first-child { width: 27px; height: 27px; transition: transform .2s var(--e-ui); }
.ask__tile > span { position: absolute; bottom: 8px; font: 500 10px var(--sans); color: var(--ink); opacity: 0; translate: 0 4px; transition: opacity .18s, translate .18s; }
.ask__go { position: absolute; top: 7px; right: 7px; width: 11px; height: 11px; color: var(--blue); opacity: 0; transition: opacity .18s; }
.ask__tile:hover, .ask__tile:focus-visible { transform: translateY(-4px); background: #fff; color: var(--brand); outline: none; box-shadow: 0 8px 14px -8px rgba(7,72,254,.3); }
.ask__tile:focus-visible, .ask__copy:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.ask__tile:hover > svg:first-child, .ask__tile:focus-visible > svg:first-child { transform: translateY(-7px) scale(.92); }
.ask__tile:hover > span, .ask__tile:focus-visible > span { opacity: 1; translate: 0 0; }
.ask__tile:hover .ask__go, .ask__tile:focus-visible .ask__go { opacity: 1; }
.ask__copy { margin-top: 12px; width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 16px; background: none; font: 500 12.5px var(--sans); color: var(--ink-soft); cursor: pointer; transition: background-color .2s, color .2s; }
.ask__copy:hover, .ask__copy:focus-visible { background: rgba(9,13,26,.05); color: var(--ink); }
.ask__copy svg { width: 14px; height: 14px; }
.ask__i-done, .ask__copy.is-done .ask__i-copy { display: none; }
.ask__copy.is-done .ask__i-done { display: block; color: var(--grn); }
.ask__fallback { display: block; margin-top: 10px; width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: 13px/1.45 var(--sans); color: var(--ink); resize: none; }
.ask__fallback[hidden] { display: none; }
/* the panel sits in the browser's top layer, above the drawn cursor, so the real one comes back over it */
body.has-cursor .ask__pop, body.has-cursor .ask__pop * { cursor: auto !important; }
body.has-cursor .ask__pop a, body.has-cursor .ask__pop button { cursor: pointer !important; }
@media (max-width: 480px) { .ask__tile { height: 64px; } .ask__tile > svg:first-child { width: 22px; height: 22px; } }
@media (prefers-reduced-motion: reduce) { .ask__blob, .ask__blob i, .ask__pop:popover-open { animation: none; } }
@media (prefers-reduced-motion: reduce) { .play__invite, .foot__play.is-best .play__stat b[data-play="best"] { animation: none; } }

.foot__base { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; border-top: 1px solid var(--line-ink); margin-top: 50px; padding-top: 22px; color: var(--text-on-ink-muted); }
.foot__base > span { display: inline-flex; align-items: center; gap: 8px; }
.foot__base .foot__copy { display: inline; }
.foot__base .sq { width: 11px; height: 11px; border-radius: 3px; background: var(--blue-200); }
.foot__base .gd { width: 8px; height: 8px; border-radius: 50%; background: var(--grn); }
.foot__poke { display: inline-flex; align-items: center; gap: 8px; color: var(--blue-200); margin-left: auto; padding: 6px 12px; border: 1px solid rgba(128,161,254,.35); border-radius: 999px; transition: background .3s, color .3s; }
.foot__poke svg { fill: currentColor; }
.foot__poke:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.foot__legal { display: inline-flex; gap: 14px; }
.foot__legal a { color: var(--text-on-ink-muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(242,243,247,.3); }
.foot__legal a:hover { color: var(--text-on-ink); }
/* Mk. 7 (4.2): the legal pages, unpublished until the text arrives */
.legal { max-width: 760px; margin: 0 auto; padding: clamp(130px, 18vh, 190px) var(--pad) clamp(80px, 12vh, 150px); }
.legal h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 5vw, 70px); line-height: 1; letter-spacing: -.02em; margin: 14px 0 26px; }
.legal .lab { color: var(--blue); }
.legal__pending { border: 1.5px dashed var(--blue); border-radius: 12px; padding: 22px 24px; color: var(--text); font-size: 17px; line-height: 1.6; background: #fff; }
.legal__pending b { color: var(--blue); }
/* 21 Sep 2026: the privacy policy is written; its body */
.legal__body { color: var(--text); font-size: 17px; line-height: 1.65; }
.legal__body h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; margin: 44px 0 12px; scroll-margin-top: 110px; }
.legal__body p, .legal__body ul { margin: 0 0 14px; }
.legal__body ul { padding-left: 1.2em; }
.legal__body li { margin: 0 0 8px; }
.legal__body b { font-weight: 600; }
.legal__body a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.legal__body a:hover { text-decoration-thickness: 2px; }
.legal__lede { font-size: 20px; line-height: 1.55; padding: 20px 24px; border: 1.5px solid var(--blue); border-radius: 12px; background: #fff; }
.foot__top { color: var(--text-on-ink); display: inline-flex; gap: 8px; align-items: center; }
.foot__top span { display: inline-block; transition: transform .6s var(--ease-out); }
.foot__top:hover span { transform: rotate(-360deg); }
@media (max-width: 760px) { .foot__poke { margin-left: 0; } }

/* the stars that get let out */
#dropStage { position: fixed; inset: 0; z-index: 55; pointer-events: none; overflow: hidden; }
.capy { position: absolute; pointer-events: auto; cursor: pointer; user-select: none; line-height: 1; transition: opacity .55s; }
.capy svg { width: 1em; height: 1em; display: block; filter: drop-shadow(0 6px 14px rgba(1,34,127,.5)); }
.bump-mk { position: absolute; left: 50%; top: -6px; transform: translate(-50%, 0); pointer-events: none; font-family: var(--hand); font-weight: 700; font-size: 26px; color: #fff; white-space: nowrap; text-shadow: 0 2px 12px rgba(1,34,127,.8); animation: bumpPop .62s ease-out forwards; }
@keyframes bumpPop { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.6); } 30% { opacity: 1; transform: translate(-50%, -8px) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -22px) scale(1); } }
@keyframes capyBump { 0% { transform: scaleX(.84) scaleY(1.12); } 45% { transform: scaleX(1.1) scaleY(.9); } 100% { transform: scaleX(1) scaleY(1); } }

/* Whoosh back to the start. */
#main, .foot { transition: none; }
body.is-whoosh #main, body.is-whoosh .foot { transition: transform .5s var(--ease-strong), filter .5s var(--ease-strong), opacity .5s; transform: scale(1.18) translateY(-2vh); filter: blur(14px); opacity: .25; }
body.is-whoosh-settle #main, body.is-whoosh-settle .foot { transition: transform .7s var(--ease-out), filter .7s var(--ease-out), opacity .7s; }

/* =========================================================
   22b. DETAIL PAGES (Mk. 7.5, 18 Sep)
   The offers, work and about pages in full. Prefix dx. Paper
   sections sit on the drafting sheet, ink on the dark ground,
   blue on the brand canvas, like the home page.
   ========================================================= */
.dx { position: relative; padding-bottom: clamp(80px, 12vh, 150px); }
.dx.paper { color: var(--text); }
.dx--ink { background: var(--ink); color: var(--text-on-ink); }
.dx.canvas .sect-head--canvas { padding-left: var(--pad); padding-right: var(--pad); }
.dx .sect-head h2 { text-wrap: balance; }
.disc__more--two { gap: 14px; flex-wrap: wrap; }

/* ---- questions, shared ---- */
.dxqa { border-top: 1px solid var(--line); }
.dxqa details { border-bottom: 1px solid var(--line); }
.dxqa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 18px 0; font: 500 17px/1.35 var(--sans); color: var(--ink); transition: color .25s var(--e-ui); }
.dxqa summary::-webkit-details-marker { display: none; }
.dxqa summary::after { content: ''; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--blue);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%230748FE'%3E%3Cpath d='m39.105 54.324s-7.7812-2.7305-9.3945-2.0859c-1.6133 0.64453-2.7734 2.0859-3.0586 3.8008l-2.6641 15.988-2.6641-15.988c-0.28906-1.7148-1.4492-3.1562-3.0586-3.8008l-11.41-2.0859 11.41-2.0859c1.6094-0.64453 2.7695-2.0859 3.0586-3.8008l2.6641-15.988 2.6641 15.988c0.28516 1.7148 1.4453 3.1562 3.0586 3.8008 1.6133 0.64453 9.3945-2.0859 9.3945-2.0859 3.2266-1.2891 5.543-4.1719 6.1133-7.5977l5.332-31.98 5.3281 31.98c0.57422 3.4258 2.8906 6.3086 6.1172 7.5977 0 0 7.7812 2.7305 9.3906 2.0859 1.6172-0.64453 2.7734-2.0859 3.0625-3.8008l2.6641-15.988 2.6641 15.988c0.28516 1.7148 1.4453 3.1562 3.0586 3.8008l11.52 2.0859-11.52 2.0859c-1.6133 0.64453-2.7734 2.0859-3.0586 3.8008l-2.6641 15.988-2.6641-15.988c-0.28906-1.7148-1.4453-3.1562-3.0625-3.8008-1.6094-0.64453-9.3906 2.0859-9.3906 2.0859-3.2266 1.2891-5.543 4.168-6.1172 7.5977l-5.3281 31.98-5.332-31.98c-0.57031-3.4297-2.8867-6.3086-6.1133-7.5977z'/%3E%3C/svg%3E") center / 18px no-repeat;
  transition: transform .5s var(--e-ui), background-color .25s; }
.dxqa details:not([open]) summary:hover::after { transform: rotate(30deg); }
.dxqa details[open] summary::after { transform: rotate(180deg); background-color: var(--blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%23ffffff'%3E%3Cpath d='m39.105 54.324s-7.7812-2.7305-9.3945-2.0859c-1.6133 0.64453-2.7734 2.0859-3.0586 3.8008l-2.6641 15.988-2.6641-15.988c-0.28906-1.7148-1.4492-3.1562-3.0586-3.8008l-11.41-2.0859 11.41-2.0859c1.6094-0.64453 2.7695-2.0859 3.0586-3.8008l2.6641-15.988 2.6641 15.988c0.28516 1.7148 1.4453 3.1562 3.0586 3.8008 1.6133 0.64453 9.3945-2.0859 9.3945-2.0859 3.2266-1.2891 5.543-4.1719 6.1133-7.5977l5.332-31.98 5.3281 31.98c0.57422 3.4258 2.8906 6.3086 6.1172 7.5977 0 0 7.7812 2.7305 9.3906 2.0859 1.6172-0.64453 2.7734-2.0859 3.0625-3.8008l2.6641-15.988 2.6641 15.988c0.28516 1.7148 1.4453 3.1562 3.0586 3.8008l11.52 2.0859-11.52 2.0859c-1.6133 0.64453-2.7734 2.0859-3.0586 3.8008l-2.6641 15.988-2.6641-15.988c-0.28906-1.7148-1.4453-3.1562-3.0625-3.8008-1.6094-0.64453-9.3906 2.0859-9.3906 2.0859-3.2266 1.2891-5.543 4.168-6.1172 7.5977l-5.3281 31.98-5.332-31.98c-0.57031-3.4297-2.8867-6.3086-6.1133-7.5977z'/%3E%3C/svg%3E"); }
.dxqa summary:hover { color: var(--blue); }
.dxqa summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; }
.dxqa p { padding: 0 48px 22px 0; margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.6; max-width: 70ch; }
.dxqa details[open] p { animation: fadeUp .35s var(--e-ui); }
.dxqa--big summary { font-size: clamp(18px, 1.5vw, 22px); padding: 22px 0; }

/* ---- OFFERS: the six in detail ---- */
.dxo { max-width: var(--max); margin: clamp(40px, 6vh, 70px) auto 0; padding: 0 var(--pad); display: grid; gap: 34px; }
@media (min-width: 1100px) { .dxo { grid-template-columns: 230px minmax(0, 1fr); gap: 60px; align-items: start; } .dxo__nav { position: sticky; top: 120px; } }
.dxo__nav ol { list-style: none; margin: 0; padding: 0; display: grid; border-left: 1px solid var(--line); }
.dxo__nav a { display: flex; align-items: baseline; gap: 14px; padding: 11px 18px; margin-left: -1px; border-left: 2px solid transparent; font: 500 17px var(--sans); color: var(--text-muted); text-decoration: none; transition: color .25s var(--e-ui), border-color .25s var(--e-ui); }
.dxo__nav a .lab { color: var(--blue); font-size: 11px; }
.dxo__nav a:hover, .dxo__nav a[aria-current="true"] { color: var(--ink); border-left-color: var(--blue); }
.dxo__nav a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.dxo__navcta { display: inline-flex; gap: 8px; margin: 26px 0 0 20px; font: 600 15px var(--sans); color: var(--blue); text-decoration: none; }
.dxo__navcta:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1099px) {
  .dxo__nav ol { display: flex; flex-wrap: wrap; gap: 8px; border: 0; }
  .dxo__nav a { margin: 0; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; background: #fff; }
  .dxo__nav a:hover { border-color: var(--blue); }
  .dxo__navcta { display: none; }
}
.dxo__list { display: grid; gap: clamp(26px, 3.6vw, 44px); min-width: 0; }
.dxo__svc { scroll-margin-top: 110px; display: grid; gap: 30px; background: #fff; border: 1px solid var(--line-2); border-radius: 22px; padding: clamp(24px, 3.4vw, 48px); box-shadow: 0 20px 50px -32px rgba(1,34,127,.35); }
.dxo__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 22px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.dxo__n { align-self: flex-start; padding-top: 10px; font: 500 13px var(--mono); letter-spacing: .14em; color: var(--blue); }
.dxo__head h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(46px, 5.2vw, 78px); line-height: .9; letter-spacing: -.025em; color: var(--ink); margin: 0; }
.dxo__head .tags { margin: 0 0 6px auto; }
.dxo__lede { margin: 0; font: 400 clamp(19px, 1.55vw, 23px)/1.48 var(--sans); color: var(--ink); max-width: 64ch; }
.dxo__cols { display: grid; gap: 30px; }
@media (min-width: 820px) { .dxo__cols { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 44px; } }
.dxo__block > .lab, .dxo__qa > .lab { color: var(--blue); margin: 0 0 14px; }
.dxo__checks { list-style: none; margin: 0; padding: 0; }
.dxo__checks li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-2); font-size: 16px; line-height: 1.45; color: var(--ink); }
.dxo__checks li::before { content: ''; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px;
  background: rgba(7,72,254,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230748FE' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center / 12px no-repeat; }
.dxo__for { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.dxo__fact { margin-top: 22px; padding: 18px 20px 16px; background: var(--soft); border: 1px dashed rgba(7,72,254,.35); border-radius: 14px; }
.dxo__fact .lab { color: var(--blue); }
.dxo__fact p { margin: 8px 0 10px; font: 500 16px/1.45 var(--sans); color: var(--ink); }
.dxo__fact a { font: 500 11.5px/1.4 var(--mono); color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(31,41,55,.3); }
.dxo__fact a:hover { color: var(--blue); }
.dxo__proof { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 18px 30px; padding: 26px 30px; background: var(--blue); color: #fff; border-radius: 16px; text-decoration: none; overflow: hidden; transition: background-color .3s var(--e-ui), transform .35s var(--e-ui); }
.dxo__proof::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 120% at 100% 0%, rgba(179,199,255,.3), transparent 60%); pointer-events: none; }
.dxo__proof:hover { background: var(--blue-600); transform: translateY(-2px); }
.dxo__proof:focus-visible { outline: 3px solid var(--blue-200); outline-offset: 3px; }
.dxo__proof strong { font-family: var(--serif); font-weight: 400; font-size: clamp(60px, 6.4vw, 96px); line-height: .8; letter-spacing: -.03em; }
.dxo__pbody { display: grid; gap: 8px; }
.dxo__pbody .lab { color: #fff; font-weight: 600; }
.dxo__pline { font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.88); max-width: 52ch; }
.dxo__pwho { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; font: 600 14px var(--sans); color: rgba(255,255,255,.8); }
.dxo__pgo { color: #fff; }
@media (max-width: 620px) { .dxo__proof { grid-template-columns: 1fr; padding: 22px; } }

/* ---- OFFERS: the four moves ---- */
.dxm { list-style: none; max-width: var(--max); margin: clamp(50px, 7vh, 80px) auto 0; padding: 0 var(--pad); display: grid; gap: 16px; }
@media (min-width: 1000px) { .dxm { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } }
.dxm__step { position: relative; display: flex; flex-direction: column; padding: 32px 28px 30px; background: var(--ink-2); border: 1px solid var(--line-ink); border-radius: 18px; }
@media (min-width: 1000px) {
  .dxm__step { border-radius: 0; border-right-width: 0; }
  .dxm__step:first-child { border-radius: 18px 0 0 18px; }
  .dxm__step:last-child { border-radius: 0 18px 18px 0; border-right-width: 1px; }
}
/* from four across, the steps share their rows (subgrid), so every title, body and list starts on one line */
@supports (grid-template-rows: subgrid) { @media (min-width: 1000px) { .dxm { grid-template-rows: auto auto auto 1fr auto auto; } .dxm__step { display: grid; grid-row: span 6; grid-template-rows: subgrid; align-content: start; } .dxm__getlab { margin-top: 0; } } }
.dxm__star { position: absolute; top: 26px; right: 24px; width: 26px; height: 26px; fill: var(--blue); filter: drop-shadow(0 0 12px rgba(7,72,254,.7)); }
.dxm__n { display: block; font-family: var(--serif); font-size: 76px; line-height: .8; letter-spacing: -.03em; color: var(--blue-300); margin-bottom: 28px; }
.dxm__when { color: var(--blue-200); }
.dxm__step h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.3vw, 34px); line-height: 1.02; letter-spacing: -.02em; margin: 8px 0 14px; }
.dxm__step > p:not(.lab) { margin: 0 0 26px; color: var(--text-on-ink-muted); font-size: 16px; line-height: 1.55; }
.dxm__getlab { margin: auto 0 10px; padding-top: 18px; border-top: 1px solid var(--line-ink); color: var(--blue-200); }
.dxm__get { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dxm__get li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.45; color: var(--text-on-ink); }
.dxm__get li::before { content: ''; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 2px; background: var(--blue-300); transform: rotate(45deg); }

/* ---- OFFERS: the three scopes ---- */
.dxp { max-width: 1320px; margin: clamp(46px, 6vh, 70px) auto 0; padding: 0 var(--pad); display: grid; gap: 18px; }
@media (min-width: 980px) { .dxp { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } }
.dxp__card { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 30px 28px 28px; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.24); border-radius: 22px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dxp__card--pick { background: var(--paper); color: var(--ink); border-color: var(--paper); box-shadow: 0 50px 90px -40px rgba(1,20,80,.95); }
@media (min-width: 980px) { .dxp__card--pick { transform: translateY(-14px); } }
.dxp__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.dxp__name { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 2.7vw, 42px); line-height: 1; letter-spacing: -.02em; margin: 0 0 8px; }
.dxp__sub { margin: 0; color: rgba(255,255,255,.8); }
.dxp__card--pick .dxp__sub { color: var(--text-muted); }
.dxp__badge { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; background: #fff; color: var(--ink); font: 600 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.dxp__badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--grn); box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
.dxp__badge--pick { background: var(--accent); color: #fff; }
.dxp__count { display: flex; align-items: baseline; gap: 12px; margin: 6px 0 0; }
.dxp__count strong { font-family: var(--serif); font-weight: 400; font-size: 92px; line-height: .8; letter-spacing: -.03em; }
.dxp__count .lab { color: inherit; opacity: .8; }
.dxp__ws { margin: 0; font: 600 15px var(--sans); }
.dxp__list { list-style: none; margin: 4px 0 0; padding: 0; }
.dxp__list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.16); font-size: 15px; line-height: 1.4; }
.dxp__card--pick .dxp__list li { border-top-color: var(--line-2); }
.dxp__list li::before { content: ''; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; }
.dxp__list li.is-on::before { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230748FE' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center / 11px no-repeat; }
.dxp__card--pick .dxp__list li.is-on::before { background-color: rgba(7,72,254,.12); }
.dxp__list li.is-off { opacity: .5; }
.dxp__list li.is-off::before { border: 1.5px solid currentColor; opacity: .7; width: 15px; height: 15px; margin: 2px 0 0 1.5px; }
.dxp__foot { max-width: 1320px; margin: clamp(34px, 5vh, 50px) auto 0; padding: 0 var(--pad); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; }
.dxp__promises { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.dxp__promises li { display: inline-flex; align-items: center; gap: 10px; font: 500 15px var(--sans); color: #fff; }
.dxp__promises li::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: #fff; transform: rotate(45deg); }

/* ---- OFFERS: questions and what is on the way ---- */
.dxq { max-width: var(--max); margin: clamp(40px, 6vh, 64px) auto 0; padding: 0 var(--pad); display: grid; gap: 44px; }
@media (min-width: 1000px) { .dxq { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 70px; align-items: start; } }
.dxs { position: relative; padding: 30px 28px; background: #fff; border: 1px solid var(--line-2); border-radius: 22px; box-shadow: 0 20px 50px -32px rgba(1,34,127,.35); }
.dxs > .lab { color: var(--blue); margin: 0; }
.dxs__title { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 2.6vw, 40px); line-height: 1; letter-spacing: -.02em; margin: 12px 0 22px; color: var(--ink); }
.dxs__title em { color: var(--blue); }
.dxs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dxs__list li { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 12px; background: var(--paper); overflow: hidden; }
.dxs__name { font: 600 15px var(--sans); color: var(--ink-faint); }
.dxs__tape { flex: none; padding: 4px 10px; font: 600 9.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  background: repeating-linear-gradient(135deg, var(--accent-200) 0 8px, #F8B97A 8px 16px); transform: rotate(-3deg); box-shadow: 0 2px 6px -2px rgba(0,0,0,.25); }
.dxs__note { margin: 18px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }

/* ---- WORK: filter and the ten cases ---- */
.dxw { max-width: var(--max); margin: clamp(36px, 5vh, 56px) auto 0; padding: 0 var(--pad); }
.dxf { display: flex; flex-wrap: wrap; gap: 8px; }
.dxf__chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-soft); font: 500 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background-color .25s var(--e-ui), color .25s var(--e-ui), border-color .25s var(--e-ui); }
.dxf__chip span { color: var(--blue); font-weight: 600; }
.dxf__chip:hover { border-color: var(--blue); color: var(--ink); }
.dxf__chip[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.dxf__chip[aria-pressed="true"] span { color: rgba(255,255,255,.88); } /* accessibility pass: .75 read 4.1:1 */
.dxf__chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.dxf__count { margin: 16px 0 0; color: var(--text-muted); }
.dxc__list { display: grid; gap: clamp(22px, 3vw, 34px); margin-top: 26px; }
.dxc { scroll-margin-top: 100px; display: grid; background: #fff; border: 1px solid var(--line-2); border-radius: 22px; overflow: hidden; box-shadow: 0 20px 50px -32px rgba(1,34,127,.35); }
.dxc[hidden] { display: none; }
.dxc.is-shown { animation: fadeUp .45s var(--e-ui); }
@media (min-width: 980px) { .dxc { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } .dxc--flip .dxc__media { order: 2; } }
.dxc__media { position: relative; min-height: 280px; background: var(--blue); overflow: hidden; }
.dxc__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.dxc:hover .dxc__media img { transform: scale(1.03); }
.dxc__idx { position: absolute; left: 18px; top: 16px; z-index: 2; padding: 5px 10px; border-radius: 6px; background: rgba(9,13,26,.74); color: #fff; font: 600 10.5px var(--mono); letter-spacing: .12em; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dxc__body { display: grid; gap: 22px; align-content: start; padding: clamp(24px, 3vw, 44px); min-width: 0; }
.dxc__who { margin: 0; color: var(--blue); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.dxc__place { color: var(--text-muted); }
.dxc__place::before { content: '\25CF'; margin-right: 10px; font-size: 7px; vertical-align: middle; color: var(--line); }
.dxc__title { margin: -8px 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3vw, 46px); line-height: 1.02; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.dxc__brief .lab, .dxc__made .lab { color: var(--blue); margin: 0 0 10px; }
.dxc__brief p:not(.lab) { margin: 0; font-size: 16.5px; line-height: 1.62; color: var(--ink-soft); max-width: 66ch; }
.dxc__row { display: grid; gap: 18px; }
@media (min-width: 620px) { .dxc__row { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.dxc__stat { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 160px; padding: 22px; background: var(--blue); color: #fff; border-radius: 14px; }
.dxc__stat strong { font-family: var(--serif); font-weight: 400; font-size: clamp(54px, 5vw, 72px); line-height: .82; letter-spacing: -.03em; }
.dxc__stat span { font: 600 10.5px/1.45 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.dxc__made ol { list-style: none; margin: 0; padding: 0; }
.dxc__made li { display: grid; grid-template-columns: 30px 1fr; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line-2); font: 600 15px/1.35 var(--sans); color: var(--ink); }
.dxc__made li .lab { color: var(--blue); font-size: 10px; padding-top: 3px; }
.dxc__tags { margin-top: 0; }

/* ---- CTA band ---- */
.dxcta { padding: clamp(90px, 13vh, 150px) var(--pad); }
.dxcta__in { max-width: 980px; margin: 0 auto; text-align: center; display: grid; justify-items: center; gap: 22px; }
.dxcta__in > .lab { color: #fff; margin: 0; }
.dxcta h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5.6vw, 86px); line-height: .98; letter-spacing: -.025em; text-wrap: balance; }
.dxcta h2 .o { font-style: italic; color: var(--blue-100); }
.dxcta__list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; }
.dxcta__list li { display: inline-flex; align-items: center; gap: 10px; font: 500 16px var(--sans); }
.dxcta__list li::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230748FE' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center / 11px no-repeat; }
.dxcta__go { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 24px; margin-top: 12px; }
.dxcta__go .lab { color: rgba(255,255,255,.82); }

/* ---- ABOUT: at a glance ---- */
.dxg { margin: clamp(40px, 6vh, 64px) 0 0; display: grid; grid-template-columns: 1fr; grid-auto-flow: dense; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
@media (min-width: 560px) { .dxg { grid-template-columns: 1fr 1fr; } .dxg > div:last-child { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .dxg { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dxg > div:nth-child(4) { grid-column: span 2; } .dxg > div:last-child { grid-column: auto; } }
.dxg > div { background: var(--paper); padding: 26px 26px 28px; display: grid; gap: 12px; align-content: start; }
.dxg dt { color: var(--blue); }
.dxg dd { margin: 0; font-family: var(--serif); font-size: clamp(24px, 2vw, 30px); line-height: 1.1; letter-spacing: -.015em; color: var(--ink); }
.dxg__small { display: block; margin-top: 8px; font: 500 12px var(--mono); letter-spacing: .06em; color: var(--text-muted); }
.dxg__day { display: inline-flex; align-items: center; gap: 7px; margin-left: 12px; padding: 4px 10px; border-radius: 999px; vertical-align: middle; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.35); font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #15803D; }
.dxg__day[hidden] { display: none; }
.dxg__day i { width: 7px; height: 7px; border-radius: 50%; background: var(--grn); animation: dxPulse 2s ease-in-out infinite; }
@keyframes dxPulse { 50% { box-shadow: 0 0 0 5px rgba(34,197,94,0); } 0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.45); } }

/* ---- ABOUT: the founders ---- */
.dxt { margin-top: clamp(40px, 6vh, 64px); display: grid; gap: 22px; }
@media (min-width: 900px) { .dxt { grid-template-columns: 1fr 1fr; } }
.dxt__card { position: relative; display: grid; gap: 14px; align-content: start; padding: clamp(28px, 3vw, 44px); background: #fff; border: 1px solid var(--line-2); border-radius: 22px; box-shadow: 0 20px 50px -32px rgba(1,34,127,.35); }
.dxt__note { position: absolute; top: 26px; right: 28px; color: var(--pen); font-size: clamp(20px, 1.6vw, 25px); transform: rotate(-4deg); }
.dxt__face { width: 132px; height: 132px; border-radius: 26px; overflow: hidden; background: var(--blue-100); margin-bottom: 10px; box-shadow: 0 0 0 1.5px var(--blue), 0 0 0 7px var(--paper), 0 0 0 8.5px var(--line); }
.dxt__face img { width: 100%; height: 100%; object-fit: cover; }
.dxt__ini { display: grid; place-items: center; width: 100%; height: 100%; font-family: var(--serif); font-size: 58px; letter-spacing: -.04em; color: var(--ink); }
.dxt__name { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 3.4vw, 52px); line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.dxt__role { margin: 0; color: var(--blue); }
.dxt__body { margin: 6px 0 0; font-size: 18px; line-height: 1.55; color: var(--ink-soft); max-width: 46ch; }
/* Mk. 7.6: four chips, one line. "The first call / The schedule / The invoice / The follow up" wanted 524px of a
   511px row at 1330, so on the founder cards only the chips run a little tighter (the page's other chips are
   untouched). Narrow windows still wrap, which is what they should do. */
.dxt__card .tags { margin-top: 8px; gap: 6px; }
.dxt__card .tags li { padding: 7px 10px; letter-spacing: .08em; }
@media (max-width: 520px) { .dxt__note { position: static; transform: none; } }

/* ---- ABOUT: the name (21 Sep): the Pleiades, the sevens of Scripture, the promise and the faith ---- */
.dxn { padding-top: clamp(64px, 9vh, 110px); overflow: hidden; }
.dxn__in { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); display: grid; gap: 50px; align-items: center; }
@media (min-width: 960px) { .dxn__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 70px; } }
.dxn__copy > .lab { color: var(--blue-300); margin: 0 0 20px; }
.dxn__copy h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(46px, 6vw, 96px); line-height: .95; letter-spacing: -.025em; }
.dxn__copy h2 .o { font-style: italic; color: var(--blue-200); }
.dxn__lead { margin: 28px 0 0; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; color: var(--text-on-ink); max-width: 36ch; }
.dxn__sub { margin: 14px 0 30px; font-size: 17px; color: var(--text-on-ink-muted); }
.dxn__sky { position: relative; margin: 0 auto; width: min(100%, 560px); aspect-ratio: 1; container-type: inline-size;
  background: radial-gradient(circle at 50% 50%, rgba(7,72,254,.2), transparent 62%); border-radius: 50%; }
.dxn__sky.reveal { opacity: 1; transform: none; }
.dxn__glow { position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(.4);
  background: radial-gradient(circle, #fff 0%, rgba(179,199,255,.85) 22%, rgba(7,72,254,.4) 50%, transparent 72%); opacity: 0; transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); pointer-events: none; }
.dxn__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dxn__lines line { stroke: rgba(128,161,254,.4); stroke-width: .25; stroke-dasharray: 1 1.2; opacity: 0; transition: opacity .8s var(--ease-out) .5s; vector-effect: non-scaling-stroke; }
.dxn__star { position: absolute; left: calc(50% + var(--x) * 1%); top: calc(50% + var(--y) * 1%); width: 0; height: 0; text-decoration: none; color: #fff;
  transform: translate(calc(var(--x) * -1cqw), calc(var(--y) * -1cqw)); transition: transform 1.1s var(--ease-strong) calc(var(--i) * 60ms); }
.dxn__star svg { position: absolute; left: calc(-22px * var(--s, 1)); top: calc(-22px * var(--s, 1)); width: calc(44px * var(--s, 1)); height: calc(44px * var(--s, 1)); fill: #fff; filter: drop-shadow(0 0 10px rgba(128,161,254,.9)); transition: transform .35s var(--e-pop), fill .25s; }
.dxn__label { position: absolute; left: 50%; top: 28px; transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; white-space: nowrap; font: 500 15px var(--sans); color: var(--text-on-ink); opacity: 0; transition: opacity .5s var(--ease-out) calc(.6s + var(--i) * 70ms); }
.dxn__label .lab { color: var(--blue-300); font-size: 10px; }
.dxn__star:hover svg, .dxn__star:focus-visible svg { transform: scale(1.25) rotate(12deg); fill: var(--blue-100); }
.dxn__star:focus-visible { outline: none; }
.dxn__star:focus-visible .dxn__label { text-decoration: underline; text-underline-offset: 4px; }
.dxn__cap { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); color: var(--text-on-ink-muted); white-space: nowrap; }
.dxn__sky.is-in .dxn__star { transform: none; }
.dxn__sky.is-in .dxn__label { opacity: 1; }
.dxn__sky.is-in .dxn__lines line { opacity: 1; }
.dxn__sky:not(.is-in) .dxn__glow, .dxn__sky.is-far .dxn__glow { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.dxn__sky.is-far .dxn__star { transform: translate(calc(var(--x) * -1cqw), calc(var(--y) * -1cqw)) scale(.5); pointer-events: none; }
.dxn__sky.is-far .dxn__label, .dxn__sky.is-far .dxn__lines line { opacity: 0; transition-delay: 0s; }
@media (max-width: 520px) { .dxn__star svg { left: calc(-16px * var(--s, 1)); top: calc(-16px * var(--s, 1)); width: calc(32px * var(--s, 1)); height: calc(32px * var(--s, 1)); } }

.dxn__lead em { font-style: italic; }
.dxn__cap { bottom: -10px; }
.dxn__seven { margin: 34px 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.8vw, 42px); line-height: 1.02; letter-spacing: -.02em; color: #fff; }
.dxn__seven .o { font-style: italic; color: var(--blue-200); }
.dxn__hint { margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: var(--text-on-ink-muted); max-width: 40ch; }
/* 21 Sep, second pass: each star holds one of the sevens. A star is a button; its card shows beside it on hover,
   keyboard focus or a tap (module 36), on the side of the star that faces the middle of the sky */
button.dxn__star { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; z-index: 1; }
button.dxn__star::before { content: ''; position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; }
.dxn__star:hover, .dxn__star:focus-visible, .dxn__star.is-on { z-index: 5; }
.dxn__star.is-on svg { transform: scale(1.25) rotate(12deg); fill: var(--blue-100); }
.dxn__star:focus-visible::before { box-shadow: 0 0 0 2px var(--blue-300); }
/* the other six step back while one speaks */
.dxn__sky:has(.dxn__star:hover, .dxn__star:focus-visible, .dxn__star.is-on) .dxn__star:not(:hover):not(:focus-visible):not(.is-on) svg { opacity: .4; }
.dxn__star svg { transition: transform .35s var(--e-pop), fill .25s, opacity .25s; }
.dxn__tip { position: absolute; width: min(270px, 56cqw); display: grid; gap: 8px; padding: 14px 16px 16px; border-radius: 16px; text-align: left;
  background: rgba(15,21,38,.94); border: 1px solid rgba(128,161,254,.35); box-shadow: 0 24px 48px -20px rgba(0,0,0,.75);
  opacity: 0; visibility: hidden; translate: 0 6px; pointer-events: none; transition: opacity .2s var(--e-ui), visibility .2s, translate .25s var(--e-ui); }
.dxn__tip .lab { margin: 0; color: var(--blue-300); }
.dxn__tip-text { font-family: var(--serif); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.25; letter-spacing: -.005em; color: #fff; }
.dxn__star--r .dxn__tip { left: 28px; }
.dxn__star--l .dxn__tip { right: 28px; }
.dxn__star--up .dxn__tip { bottom: 14px; }
.dxn__star--dn .dxn__tip { top: 14px; }
.dxn__star:hover .dxn__tip, .dxn__star:focus-visible .dxn__tip, .dxn__star.is-on .dxn__tip { opacity: 1; visibility: visible; translate: 0 0; }
/* a phone: the sky is too small for cards beside the stars, so the tapped one reads out under it */
.dxn__readout { display: none; }
@media (max-width: 700px) {
  .dxn__tip { display: none; }
  /* the stars are all absolute, so the readout is placed under the sky rather than left to flow into its top */
  .dxn__sky { margin-bottom: 150px; }
  .dxn__readout { display: block; position: absolute; left: 0; right: 0; top: calc(100% + 40px); margin: 0; text-align: center; font-family: var(--serif); font-size: 20px; line-height: 1.3; color: #fff; }
  .dxn__readout .lab { display: block; margin-bottom: 8px; font-family: var(--mono); color: var(--blue-300); }
}
/* 21 Sep: the faith line opens the section, on the right, above the name */
.dxn__faith { max-width: var(--max); margin: 0 auto clamp(48px, 7vh, 84px); padding: 0 var(--pad); display: grid; justify-items: end; gap: 12px; text-align: right; }
.dxn__faith > svg { width: 38px; height: 38px; fill: #fff; filter: drop-shadow(0 0 14px rgba(128,161,254,.9)); }
.dxn__faith .lab { margin: 0; color: var(--blue-300); }
.dxn__faith-line { margin: 0; max-width: 30ch; font-family: var(--serif); font-size: clamp(24px, 2.4vw, 36px); line-height: 1.18; letter-spacing: -.015em; color: #fff; text-wrap: balance; }

/* ---- ABOUT: the three pillars (21 Sep), three cards that stack ----
   Laid out one after another by default. Module 34 adds .is-stack on a wide window with room for the whole deck:
   the track grows to 300vh, the deck holds still in the middle of the window, Think together pops up, Build
   together and Last together slide up over it (inline transforms), and each covered card keeps its top strip
   showing, dimmed a little (--cover). The pop uses the scale property so it never fights the inline transform. */
.dxr { --off: 64px; --h: 460px; max-width: var(--max); margin: clamp(40px, 6vh, 64px) auto 0; padding: 0 var(--pad); }
.dxr__deck { display: grid; gap: 22px; }
.dxr__card { position: relative; overflow: hidden; border-radius: 26px; background: #fff; border: 1px solid var(--line-2); box-shadow: 0 30px 60px -36px rgba(1,34,127,.45); transform-origin: 50% 0; }
.dxr__card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(9,13,26,.16); opacity: var(--cover, 0); pointer-events: none; }
.dxr__card--2 { background: #E9EFFF; border-color: rgba(7,72,254,.16); }
.dxr__card--3 { background: var(--blue); border-color: var(--blue); }
.dxr__bar { display: flex; align-items: center; gap: 16px; height: var(--off); padding: 0 clamp(24px, 3vw, 44px); border-bottom: 1px solid var(--line-2); }
.dxr__bar .lab { margin: 0; }
.dxr__num { color: var(--blue); }
.dxr__tag { color: var(--ink); }
.dxr__of { margin-left: auto !important; color: var(--text-muted); }
.dxr__main { display: grid; gap: 18px 60px; padding: clamp(26px, 4vh, 44px) clamp(24px, 3vw, 44px) clamp(28px, 4.5vh, 48px); }
@media (min-width: 900px) { .dxr__main { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.dxr__verb { margin: 0; font-family: var(--serif); font-size: clamp(42px, 4.8vw, 76px); line-height: .94; letter-spacing: -.026em; color: var(--ink); }
.dxr__verb em { color: var(--blue); }
.dxr__body { display: grid; align-content: start; justify-items: start; }
.dxr__body h3 { margin: 0 0 14px; font: 600 clamp(21px, 1.7vw, 25px)/1.25 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.dxr__body p { margin: 0; font-size: 18px; line-height: 1.62; color: var(--ink-soft); max-width: 60ch; }
.dxr__note { margin-top: 18px; }
/* the third card is the brand blue */
.dxr__card--3 .dxr__bar { border-color: rgba(255,255,255,.22); }
.dxr__card--3 .dxr__num, .dxr__card--3 .dxr__tag, .dxr__card--3 .dxr__verb, .dxr__card--3 .dxr__body h3, .dxr__card--3 .dxr__note { color: #fff; }
.dxr__card--3 .dxr__of { color: rgba(255,255,255,.88); } /* accessibility pass: .7 read 3.8:1 on the blue */
.dxr__card--3 .dxr__verb em { color: var(--blue-100); }
.dxr__card--3 .dxr__body p { color: rgba(255,255,255,.86); }
/* the stack */
.dxr.is-stack { height: 300vh; }
/* the pillars section drops its own bottom padding while it stacks: the track already ends just under the deck */
#pillars:has(.dxr.is-stack) { padding-bottom: 0; }
.dxr.is-stack .dxr__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-items: center; padding-top: 40px; }
.dxr.is-stack .dxr__deck { display: block; position: relative; height: calc(var(--h) + 2 * var(--off)); }
.dxr.is-stack .dxr__card { position: absolute; left: 0; right: 0; top: calc(var(--i) * var(--off)); height: var(--h); will-change: transform; }
.dxr.is-stack .dxr__card--2, .dxr.is-stack .dxr__card--3 { transform: translateY(100vh); }
.dxr.is-stack .dxr__card--1 { opacity: 0; scale: .86; transition: opacity .45s var(--e-ui), scale .8s var(--e-pop); }
.dxr.is-stack.is-popped .dxr__card--1 { opacity: 1; scale: 1; }

/* ---- ABOUT: how we work (21 Sep), pinned notes on a dashed path, after the component Truman sent ----
   Laid out with everything showing by default. Module 34 adds .is-pinned on a wide window where the whole first
   screen fits: the section grows to 280vh, the header and the stage hold still, the dashed path grows from the
   first pin to the last (the clip rect's width) and each note is pinned as the path reaches it (.is-on). Once the
   path is full the page moves on. The dashes march, as in the reference. Prefix dxh: .dxs is the offers card. */
#process { overflow: clip; }
.dxh { max-width: var(--max); margin: clamp(30px, 4.5vh, 56px) auto 0; padding: 0 var(--pad); }
.dxh__stage { position: relative; height: 400px; }
.dxh__path { position: absolute; left: 0; top: 0; width: 100%; height: 360px; overflow: visible; }
.dxh__line { fill: none; stroke: rgba(255,255,255,.8); stroke-width: 2; stroke-dasharray: 8 6; stroke-linecap: round; vector-effect: non-scaling-stroke; animation: dxhMarch 3s linear infinite; }
@keyframes dxhMarch { to { stroke-dashoffset: -140; } }
.dxh__cards { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.dxh__card { position: absolute; left: calc(10% + var(--i) * 20%); top: 7px; width: min(224px, 17.5%); translate: -50% 0; rotate: -3deg; }
.dxh__card:nth-child(even) { top: 127px; rotate: 3deg; }
.dxh__card:hover { z-index: 3; }
.dxh__note { background: #fff; border: 1px solid rgba(255,255,255,.7); border-radius: 22px; padding: 8px; box-shadow: 0 22px 40px -22px rgba(1,22,90,.7); transition: scale .3s var(--e-pop); }
.dxh__card:hover .dxh__note { scale: 1.05; }
.dxh__pin-icon { display: block; width: 30px; height: 30px; margin: 0 auto 8px; fill: var(--blue); }
.dxh__inner { display: grid; align-content: start; gap: 6px; min-height: 124px; padding: 14px 15px 16px; border-radius: 15px; background: #EEF3FF; border: 1px solid rgba(7,72,254,.14); }
.dxh__n { font-family: var(--hand); font-weight: 600; font-size: 34px; line-height: 1; color: var(--blue); }
.dxh__inner b { font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 1.6vw, 25px); line-height: 1.05; letter-spacing: -.01em; color: var(--ink); }
.dxh__sub { font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); }
/* the bracket under planning, building and implementation */
.dxh__comm { position: absolute; left: 3%; width: 94%; top: 356px; margin: 0; padding-top: 16px; text-align: center; color: #fff; }
.dxh__comm::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px; border: 1.5px solid rgba(255,255,255,.6); border-top: 0; border-radius: 0 0 6px 6px; }
/* pinned */
#process.is-pinned { height: 280vh; padding-bottom: 0; }
#process.is-pinned .dxh__hold { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; }
#process.is-pinned .dxh__hold > .sect-head { padding-top: 70px; }
/* a flex column shrinks a child with auto side margins to its content, and the stage's content is all absolute */
#process.is-pinned .dxh__hold > * { width: 100%; }
#process.is-pinned .dxh__card { opacity: 0; transition: opacity .3s var(--e-ui); }
#process.is-pinned .dxh__note { scale: .55; translate: 0 -34px; transition: scale .6s var(--e-pop), translate .6s var(--e-pop); }
#process.is-pinned .dxh__card.is-on { opacity: 1; }
#process.is-pinned .dxh__card.is-on .dxh__note { scale: 1; translate: 0 0; }
#process.is-pinned .dxh__card.is-on:hover .dxh__note { scale: 1.05; }
#process.is-pinned .dxh__comm { opacity: 0; translate: 0 10px; transition: opacity .4s var(--e-ui), translate .4s var(--e-ui); }
#process.is-pinned .dxh__comm.is-on { opacity: 1; translate: 0 0; }
/* narrow windows: the notes run down the page, the path steps aside */
@media (max-width: 899px) {
  .dxh__stage { height: auto; }
  .dxh__path { display: none; }
  .dxh__cards { position: static; display: grid; gap: 22px; }
  .dxh__card, .dxh__card:nth-child(even) { position: static; width: min(300px, 84%); translate: none; justify-self: start; }
  .dxh__card:nth-child(even) { justify-self: end; }
  .dxh__comm { position: static; width: auto; margin: 26px 0 0; padding: 0 0 0 16px; text-align: left; border-left: 1.5px solid rgba(255,255,255,.6); }
  .dxh__comm::before { display: none; }
}

/* ---- ABOUT: founded in Alabama (21 Sep), the state drawn on the sheet ---- */
.dxa { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 12vh, 150px) var(--pad) 0; display: grid; gap: 44px; align-items: center; }
@media (min-width: 960px) { .dxa { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 80px; } }
.dxa .sect-head { padding: 0; max-width: none; margin: 0; grid-template-columns: minmax(0, 1fr); }
.dxa .sect-head__body { max-width: 60ch; }
.dxa__map { margin: 0 auto; width: min(100%, 300px); display: grid; gap: 18px; justify-items: center; }
.dxa__map svg { width: 100%; height: auto; overflow: visible; }
.dxa__state { fill: rgba(7,72,254,.05); stroke: var(--blue); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease-out) .2s; }
.dxa__map.is-in .dxa__state { stroke-dashoffset: 0; }
.dxa__ring { fill: none; stroke: rgba(7,72,254,.35); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.dxa__pin { fill: var(--blue); }
.dxa__map figcaption { display: grid; justify-items: center; gap: 4px; text-align: center; }
.dxa__map figcaption .lab { color: var(--blue); }
.dxa__coord { font: 500 12px var(--mono); letter-spacing: .06em; color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  .dxn__star, .dxn__label, .dxn__lines line, .dxn__glow, .dxc__media img, .dxo__proof, .dxa__state { transition: none !important; }
  .dxa__state { stroke-dashoffset: 0; }
  .dxh__line { animation: none; }
  .dxh__note, .dxr__card { transition: none !important; }
  .dxg__day i, .dxc.is-shown, .dxqa details[open] p { animation: none !important; }
}

/* =========================================================
   22c. WORK CARDS AND CASE PAGES (Mk. 7.5 Sandbox, 20 Sep)
   The work page lists every project the way tegan.io/work
   does: one photograph each, the client, one sentence, and a
   way in. Rows alternate a wide card with a narrow one, and the
   filter keeps that rhythm for whatever is left showing. Each
   card opens a case page in the shape of Truman's portfolio:
   a hero, five sections, five photographs in a fixed rhythm,
   and the next case. Both are generated by tools/cases.py.
   Since 21 Sep a board film opens every case page, above the
   title; tools/case_media.py makes the films and photographs.
   ========================================================= */
/* ---- work page: the cards ---- */
.wcards { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(40px, 5.5vw, 72px) clamp(18px, 2.4vw, 32px); margin-top: 30px; align-items: start; }
.wcard { grid-column: span 5; position: relative; scroll-margin-top: 110px; }
.wcard--lg { grid-column: span 7; }
.wcard[hidden] { display: none; }
.wcard.is-shown { animation: fadeUp .45s var(--e-ui); }
.wcard__media { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--paper-2); }
.wcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.wcard:hover .wcard__media img { transform: scale(1.035); }
.wcard__media .rpop__plate { font-size: clamp(20px, 1.9vw, 28px); padding: 18px 22px; transition: background-color .4s; }
.wcard:hover .wcard__media .rpop__plate { background-color: var(--blue-700, #0539C9); }
.wcard__fig { position: absolute; left: 14px; top: 14px; z-index: 2; padding: 5px 10px; border-radius: 6px; background: rgba(9,13,26,.74); color: #fff; font-size: 10.5px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.wcard__body { display: grid; gap: 8px; padding-top: 18px; }
.wcard__name { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.3vw, 36px); line-height: 1.04; letter-spacing: -.015em; }
.wcard__name a { color: var(--ink); text-decoration: none; }
/* the whole card is the link; the name is what a screen reader hears */
.wcard__name a::after { content: ''; position: absolute; inset: 0; z-index: 3; }
.wcard__name a:focus-visible { outline: none; }
.wcard:focus-within .wcard__media { outline: 2px solid var(--blue); outline-offset: 4px; }
.wcard__line { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-soft); max-width: 54ch; }
.wcard__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font: 600 14px var(--sans); color: var(--blue); }
.wcard__go svg { transition: transform .35s var(--ease-out); }
.wcard:hover .wcard__go svg { transform: translateX(4px); }
@media (max-width: 820px) { .wcard, .wcard--lg { grid-column: 1 / -1; } }

/* ---- case pages ---- */
.cs { padding-bottom: clamp(80px, 11vh, 140px); }
.cs__head { max-width: var(--max); margin: 0 auto; padding: clamp(130px, 17vh, 180px) var(--pad) 0; display: grid; gap: 18px; }
.cs__who { margin: 0; color: var(--blue); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.cs__place { color: var(--text-muted); }
.cs__place::before { content: '\25CF'; margin-right: 10px; font-size: 7px; vertical-align: middle; color: var(--line); }
.cs__title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(46px, 6.6vw, 100px); line-height: .98; letter-spacing: -.025em; color: var(--ink); max-width: 15ch; text-wrap: balance; }
.cs__title .o { color: var(--blue); font-style: italic; }
.cs__desc { margin: 4px 0 0; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--ink-soft); max-width: 54ch; }
.cs__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px 32px; margin: 26px 0 0; padding: 24px 0 0; border-top: 1px solid var(--line); }
.cs__meta > div { min-width: 0; }
.cs__meta dt { color: var(--blue); margin: 0 0 10px; }
.cs__meta dd { margin: 0; font: 500 15.5px/1.5 var(--sans); color: var(--ink); }
.cs__fig strong { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(46px, 4.6vw, 66px); line-height: .88; letter-spacing: -.03em; color: var(--ink); }
.cs__fig dd span { display: block; margin-top: 10px; font: 600 10.5px/1.45 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.cs__made { list-style: none; margin: 0; padding: 0; }
.cs__made li { display: grid; grid-template-columns: 28px 1fr; gap: 6px; padding: 7px 0; border-top: 1px solid var(--line-2); }
.cs__made li:first-child { border-top: 0; padding-top: 0; }
.cs__made .lab { color: var(--blue); }
/* said plainly where the work was someone else's campaign */
.cs__role { grid-column: 1 / -1; padding: 14px 18px; border: 1.5px dashed var(--blue); border-radius: 12px; background: #fff; }
.cs__role dd { color: var(--ink-soft); }

.cs__wrap { max-width: var(--max); margin: clamp(40px, 6vh, 64px) auto 0; padding: 0 var(--pad); }
.cs__img { position: relative; margin: 0; border-radius: 14px; background: var(--paper-2); }
.cs__img > img, .cs__img > .rpop__plate { border-radius: 14px; }
.cs__img > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs__img--hero, .cs__img--wide { aspect-ratio: 2 / 1; }
.cs__img--mid { aspect-ratio: 3 / 2; }
.cs__plate { font-size: clamp(22px, 2.6vw, 38px); }
/* the site's selection chrome: hover a photograph and it is selected, with its size */
.cs__img .sel { inset: -5px; border-color: var(--blue); border-radius: 17px; opacity: 0; transition: opacity .25s var(--e-ui); }
.cs__img:hover .sel { opacity: 1; }
.cs__dim { position: absolute; right: 12px; bottom: 12px; z-index: 5; opacity: 0; transition: opacity .25s var(--e-ui); }
.cs__img:hover .cs__dim, .cs__dim--wait { opacity: 1; }

.cs__sec { max-width: var(--max); margin: clamp(72px, 10vh, 130px) auto 0; padding: 0 var(--pad); display: grid; gap: 30px clamp(30px, 4.5vw, 72px); align-items: center; }
.cs__sec--split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.cs__sec--img-l { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.cs__sec--img-r { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.cs__txt .lab { color: var(--blue); margin: 0 0 14px; }
.cs__txt h2 { margin: 0 0 18px; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.1vw, 46px); line-height: 1.04; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.cs__txt p:not(.lab) { margin: 0; font-size: 17px; line-height: 1.68; color: var(--ink-soft); max-width: 62ch; }
.cs__sec--split .cs__txt h2 { margin: 0; }
.cs__txt--body { padding-top: 32px; }

.cs__next { position: relative; max-width: var(--max); margin: clamp(96px, 13vh, 160px) auto 0; padding: clamp(44px, 6vh, 70px) var(--pad) 0; border-top: 1px solid var(--line); display: grid; justify-items: center; gap: 16px; text-align: center; }
.cs__next > .lab { margin: 0; color: var(--blue); }
.cs__next-media { position: relative; width: min(576px, 100%); aspect-ratio: 2 / 1; border-radius: 14px; overflow: hidden; background: var(--paper-2); }
.cs__next-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.cs__next:hover .cs__next-media img { transform: scale(1.035); }
.cs__next-name { margin: 6px 0 0; font-family: var(--serif); font-size: clamp(34px, 3.6vw, 54px); line-height: 1; letter-spacing: -.02em; }
.cs__next-name a { color: var(--ink); text-decoration: none; }
.cs__next-name a::after { content: ''; position: absolute; inset: 0; }
.cs__next-go { display: inline-flex; align-items: center; gap: 8px; font: 600 14px var(--sans); color: var(--blue); }
.cs__next-go svg { transition: transform .35s var(--ease-out); }
.cs__next:hover .cs__next-go svg { transform: translateX(4px); }

@media (max-width: 900px) {
  .cs__sec--split, .cs__sec--img-l, .cs__sec--img-r { grid-template-columns: 1fr; }
  /* photograph first on a phone, whichever side it sat on */
  .cs__sec--img-r .cs__img { order: -1; }
  .cs__txt--body { padding-top: 0; }
}

/* ---- case pages: the client board film (Mk. 7.5 Sandbox, 21 Sep) ----
   The first thing on every case page: the client's board wiping from The ask
   to The result, an 8.4 second silent loop from Films/pleiad-client-boards.
   Its width follows the window height, so the whole frame sits under the bar
   on the first screen; the title follows below it. Module 33 plays it. */
.cs__top { --cs-top: clamp(92px, 12vh, 118px); max-width: var(--max); margin: 0 auto; padding: var(--cs-top) var(--pad) 0; }
.cs__film { aspect-ratio: 16 / 9; margin: 0 auto; max-width: calc((100vh - var(--cs-top) - 36px) * 16 / 9); }
@supports (height: 100svh) { .cs__film { max-width: calc((100svh - var(--cs-top) - 36px) * 16 / 9); } }
.cs__video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; background: var(--paper-2); cursor: pointer; }
.cs__top + .cs__head { padding-top: clamp(44px, 7vh, 76px); }
.cs__play { position: absolute; left: 14px; bottom: 14px; z-index: 5; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px; background: rgba(9,13,26,.74); color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); cursor: pointer; opacity: 0; transition: opacity .25s var(--e-ui), background .25s var(--e-ui), transform .25s var(--e-pop); }
.cs__play svg { width: 18px; height: 18px; }
.cs__play .i-play { display: none; }
.cs__film.is-paused .cs__play .i-play { display: block; margin-left: 2px; }
.cs__film.is-paused .cs__play .i-pause { display: none; }
.cs__film:hover .cs__play, .cs__film.is-paused .cs__play, .cs__play:focus-visible { opacity: 1; }
.cs__play:hover { background: var(--blue); }
.cs__play:active { transform: scale(.94); }
.cs__play:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (hover: none) { .cs__play { opacity: 1; } }
@media (max-width: 620px) { .cs__top { --cs-top: 84px; } .cs__play { left: 10px; bottom: 10px; width: 36px; height: 36px; } }

/* =========================================================
   22. REVEALS, MOBILE, REDUCED MOTION
   ========================================================= */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .55s var(--e-soft), transform .55s var(--e-soft), box-shadow .25s; }
.stagger.is-in > * { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 85ms); }
.stagger.is-in > *:hover { transition-delay: 0s; }

@media (max-width: 620px) {
  .badge { flex-wrap: wrap; justify-content: center; text-align: center; gap: 7px; padding: 11px 16px; font-size: 13px; max-width: 92vw; }
  .badge__mark { order: -1; }
}
@media (max-width: 799px) {
  /* the process is stacked at this width (the roll's own fallback rule), so only the thread tightens */
  .thread__body { padding: 14px 16px 14px; gap: 12px; }
  .thread__head { padding: 10px 16px; }
  .msg .tx { font-size: 14px; line-height: 1.45; }
  .msg .av { width: 30px; height: 30px; font-size: 11px; }
}
@media (max-width: 760px) {
  .omw-slide { width: 82vw; }
  .hero__body { padding-top: 110px; }
  .hand--inline { display: block; margin: 8px 0 0; }
  .studio__head { flex-wrap: wrap; }
  .hand--studio { margin-left: 0; }
  .hand--studio .mark--arrow { display: none; }
  .results__head { padding-bottom: 60px; }
}
@media (hover: none), (pointer: coarse) { .cursor-layer { display: none !important; } body, body * { cursor: auto !important; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .marquee__track, .canvas__star { animation: none; }
  .hero__title, .hero__sub, .hero__cta, .hero__hint, .badge { transform: none; opacity: 1; }
  .badge::before, .badge .h { opacity: 1; clip-path: none; }
  .mission__text .w { color: var(--text); }
  .stars { height: auto; } .stars__sticky { position: static; height: auto; padding: 120px 0; }
  .stars__mark { display: none; } .stars__statement { position: static; opacity: 1; transform: none; }
  .foot__word span { transform: none; }
  /* the process roll stacks itself under reduced motion (its own media query list) */
  .convo.is-armed .convo__bubble, .convo.is-armed .convo__send { opacity: 1; transform: none; }
  .convo__typing { display: none !important; }
  .convo textarea { animation: none !important; }
  .mark path { stroke-dashoffset: 0; }
  .hand__ink { -webkit-mask: none; mask: none; }
  .cursor-layer { display: none !important; }
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; }
  .diff-win .diff-list li, .diff-vs, .diff-sel, .diff-sel .h, .diff-dim { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .faq__frame, .faq__frame .h, .faq__dim, .faq__tab { opacity: 1 !important; clip-path: none !important; }
  .loader__sel, .loader__sel .h, .loader__dim { opacity: 1 !important; clip-path: none !important; }
  .loader { transition: opacity .4s; } .loader.is-done { transform: none; opacity: 0; pointer-events: none; }
}

/* ---------- 23. THE LANDING (Mk. 8): the Jet Wash element as the last section of the home page ----------
   The ground has to be the flat ink that js/landing.js clears its capture to (CONFIG.background), or the heat
   would paint a patch of a different colour. So no grid, no dots, no gradient here; the stars are drawn into
   the WebGL copy texture instead, which also lets the heat bend them. The canvas sits under the bar (80), the
   ruler (82) and the menu (75). */
.landing { position: relative; min-height: 205svh; display: flex; overflow: hidden; background: #090D1A; color: var(--text-on-ink); }
.landing__source { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; padding: 58svh var(--pad) 26px; }
.landing__sky { position: absolute; inset: 0; pointer-events: none; }
.landing__lab { color: var(--blue-300); text-align: center; margin-bottom: 26px; }
.landing__statement { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.4vw, 68px); line-height: 1.02; letter-spacing: -.025em; text-align: center; max-width: 16em; text-wrap: balance; }
.landing__statement em { font-style: italic; color: var(--blue-200); }
.landing__sub { margin-top: 28px; max-width: 34em; text-align: center; color: var(--text-on-ink-muted); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.5; text-wrap: pretty; }
.landing__facts { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px; color: var(--text-on-ink-muted); }
.landing__rule { margin-top: auto; width: 100%; height: 1px; background-color: rgba(179, 199, 255, .22); }
.landing__word { margin: 14px 0 0; width: 100%; text-align: center; font-family: var(--serif); font-style: italic; font-size: 21vw; line-height: .86; letter-spacing: -.04em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(128, 161, 254, .5); -webkit-mask-image: linear-gradient(#000 10%, transparent 96%); mask-image: linear-gradient(#000 10%, transparent 96%); user-select: none; }
.landing__foot { margin-top: 22px; width: 100%; display: flex; justify-content: space-between; gap: 24px; color: var(--text-on-ink-muted); }
/* once WebGL has the copy, the canvas is what people see; the DOM keeps the layout and the reading order */
.landing.is-gl .landing__source { opacity: 0; }
.landing__canvas { position: fixed; inset: 0; z-index: 70; width: 100%; height: 100%; display: block; pointer-events: none; visibility: hidden; }
.landing__canvas.is-live { visibility: visible; }
/* no rocket (reduced motion, no WebGL): a short closing statement, not two empty screens */
.landing.is-flat { min-height: 0; }
.landing.is-flat .landing__source { padding-top: clamp(90px, 14vh, 160px); }
.landing.is-flat .landing__rule { margin-top: clamp(60px, 9vh, 110px); }
@media (prefers-reduced-motion: reduce) {
  .landing { min-height: 0; }
  .landing__source { padding-top: clamp(90px, 14vh, 160px); }
  .landing__rule { margin-top: clamp(60px, 9vh, 110px); }
}
@media (max-width: 700px) { .landing__foot { font-size: 10px; } .landing__facts { gap: 10px 22px; } }

/* ---------- 24. FLIGHT DETAILS (Mk. 8): small aeronautic pieces laid over the design file language ---------- */
/* 24.1 the ruler's progress chip is a rocket: a nose on the leading edge and a flame behind it */
.r-pct { border-radius: 4px 10px 10px 4px / 4px 50% 50% 4px; padding-right: 9px; }
.r-pct::before { content: ''; position: absolute; right: calc(100% - 1px); top: 50%; width: 13px; height: 7px; transform: translateY(-50%); transform-origin: 100% 50%; background: linear-gradient(270deg, #FFD9A8, #F5A35C 45%, rgba(245,163,92,0)); clip-path: polygon(100% 0, 100% 100%, 0 50%); animation: rflame .16s steps(2, end) infinite alternate; }
.r-pct.done::before { display: none; } /* landed */
@keyframes rflame { from { transform: translateY(-50%) scaleX(1); opacity: 1; } to { transform: translateY(-50%) scaleX(.62); opacity: .8; } }
/* 24.2 hero telemetry */
.hero__telem { position: absolute; left: var(--pad); bottom: 26px; z-index: 3; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; color: rgba(242,243,247,.62); pointer-events: none; font-size: 10.5px; }
.hero__telem span { display: inline-flex; align-items: baseline; gap: 7px; }
.hero__telem i { font-style: normal; color: var(--blue-100); }
.hero__telem b { font-weight: 600; color: #fff; letter-spacing: .08em; }
.hero__telem u { text-decoration: none; opacity: .7; }
.hero__telem-ok em { width: 6px; height: 6px; border-radius: 50%; background: var(--grn); align-self: center; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: telemPulse 2.4s ease-out infinite; }
@keyframes telemPulse { to { box-shadow: 0 0 0 7px rgba(34,197,94,0); } }
@media (max-width: 760px) { .hero__telem { bottom: 14px; gap: 4px 14px; font-size: 9.5px; } .hero__telem-ok { display: none !important; } }
/* 24.3 each move names its flight phase */
.proll__phase { font-weight: 600; color: var(--blue-300); margin-left: .5em; padding-left: .9em; border-left: 1px solid currentColor; }
@media (prefers-reduced-motion: reduce) { .r-pct::before, .hero__telem-ok em { animation: none; } }
/* 24.4 every project is a numbered flight (tools/cases.py writes the numbers) */
.wcard__flt { position: absolute; right: 14px; top: 14px; z-index: 2; padding: 5px 10px; border-radius: 6px; background: rgba(7,72,254,.86); color: #fff; font-size: 10.5px; }
.cs__flt { color: var(--blue); margin-right: 1.4em; padding-right: 1.4em; border-right: 1px solid var(--line); }
/* 24.5 about: Huntsville, and the way out of the state. The arc draws after the outline does */
.dxa__arc { fill: none; stroke: var(--blue); stroke-width: 1.3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-out) 1.5s; }
.dxa__map.is-in .dxa__arc { stroke-dashoffset: 0; }
.dxa__hsv { fill: var(--blue); opacity: 0; transition: opacity .6s ease 1.4s; }
.dxa__hsv use { transition: opacity .5s ease 2.8s; opacity: 0; }
.dxa__map.is-in .dxa__hsv, .dxa__map.is-in .dxa__hsv use { opacity: 1; }
.dxa__hsv text { font: 600 17px var(--hand); fill: var(--pen); letter-spacing: .01em; }
.dxa__map { margin-top: 70px; } /* room for the arc above the state line */
/* 24.6 contact: the count before the work starts */
.cpg__next--count li { grid-template-columns: 78px 1fr; }
.cpg__next--count b { white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.cpg__next--count b svg { width: 13px; height: 13px; fill: currentColor; }
.cpg__next--count .is-go b { color: #fff; }
/* 24.7 offers: the three scopes as lift classes */
.dxp__lift { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; color: rgba(255,255,255,.72); font-size: 10px; }
.dxp__lift svg { width: 13px; height: 13px; fill: currentColor; }
.dxp__card--pick .dxp__lift { color: var(--blue); }
@media (prefers-reduced-motion: reduce) { .dxa__arc { stroke-dashoffset: 0; transition: none; } .dxa__hsv, .dxa__hsv use { opacity: 1; transition: none; } }
/* 24.8 star fields behind ink sections (module 40) */
[data-stars] { isolation: isolate; }
.starfield { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.starfield canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.starfield i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px rgba(179,199,255,.7); animation: twinkle 5s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .15; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.25); } }
/* 24.9 back to the start is a launch (module 41) */
.liftoff { position: fixed; bottom: 18px; z-index: 88; width: 34px; pointer-events: none; color: #fff; filter: drop-shadow(0 0 10px rgba(128,161,254,.7)); }
.liftoff svg { display: block; width: 34px; height: 34px; fill: currentColor; }
.liftoff i { display: block; width: 8px; height: 46vh; margin: -4px auto 0; border-radius: 0 0 8px 8px; background: linear-gradient(180deg, #FFD9A8, #F5A35C 12%, rgba(245,163,92,.35) 40%, rgba(245,163,92,0)); }
@media (prefers-reduced-motion: reduce) { .starfield i { animation: none; opacity: .6; } }