/* ARCFLOWS home page. Builds on base.css (tokens, type, buttons, and all of the shared chrome: header, menu, marks,
   dock, footer, next-page strip, closing band). No tokens are redefined here and the shared chrome is not restyled here.

   The default rules describe the plain document: what reduced motion, no JavaScript, no WebGL and windows too small
   for the stages get. Classes on <html>, all set by home.js, change that:
     .stage     live scene + a window that holds them: the hero and the capabilities become pinned stages. Wide
                screens get the side-by-side layout; under 901px the same stages are stacked (the last block of this file)
     .substeps  with .stage under 901px: a capability's three paragraphs do not fit under its emblem together, so
                they are read one at a time
     .no-numeral with .stage under 901px: the emblem would be too small with the outlined numeral under it, so it goes
     .dock-away with .stage under 901px: a pinned frame has the window; the booking dock is held away and the header
                carries the booking pill instead (the rules are in base.css, with the rest of the shared chrome)
     .posters   no live scene: the poster stills stand in for the canvas
     .gl-live   the canvas has drawn its first frame (fades it in, hands the closing wash to the layer behind it) */

main { --t-signoff: clamp(3.4rem, min(17vw, 16vh), 11rem); --pad-b: clamp(28px, 6.5vh, 72px); }

/* the scene canvas and the closing wash that sits behind it (both created by home.js) */
.scene { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .8s var(--ease); }
.gl-live .scene { opacity: 1; }
.nointro .scene { transition: none; }
.wash { position: absolute; left: 0; top: 0; width: 100%; height: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 100%, #16236B 0%, #0E1436 45%, rgba(11, 13, 16, 0) 80%); }

/* poster stills: only when there is no live canvas */
.poster { display: none; pointer-events: none; }
.no-js .poster, .posters .poster { display: block; }
.poster img { width: 100%; height: 100%; object-fit: cover; }

/* section headers */
.sec-head { display: grid; gap: 18px; justify-items: start; margin-bottom: clamp(44px, 6vw, 96px); }
.sec-head .h2 { max-width: 17ch; }
.sec-head .lede { margin-top: 6px; color: var(--muted); max-width: 52ch; }
.section + .section { padding-top: calc(var(--section) * .5); }
.sec-head--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 24px calc(var(--gutter) * 2); }
.sec-head--split > div { display: grid; gap: 18px; }
.sec-head--split .lede { justify-self: end; margin: 0 0 .3em; }

/* HUD ticks */
.ticks { display: block; position: relative; width: 190px; height: 9px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 10px) 0 100% / 100% 5px no-repeat; }
.ticks::before, .ticks::after { content: ''; position: absolute; top: 0; width: 1px; height: 9px; background: var(--paper); opacity: .7; }
.ticks::before { left: 0; }
.ticks::after { right: -1px; }

/* ───────────────────────── 6.1 hero ───────────────────────── */
.hero { position: relative; }
.hero__stage { position: relative; }
.hero__screen { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding: calc(var(--header-h) + 28px) 0 var(--pad-b); }
.hero__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.hero__copy { position: relative; isolation: isolate; display: grid; justify-items: start; gap: clamp(16px, 2.4vh, 26px); max-width: min(58%, 900px); }
.hero__copy::before { content: ''; position: absolute; z-index: -1; inset: -22% -26% -40% -40%; background: radial-gradient(closest-side, rgba(11, 13, 16, .8), rgba(11, 13, 16, .5) 55%, rgba(11, 13, 16, 0)); pointer-events: none; }
.hero__label { color: var(--muted); }
.hero__label span { display: inline-block; }
.hero__label .nw { display: inline; white-space: nowrap; }
.hero__copy .lede { max-width: 44ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero__scroll { white-space: nowrap; color: var(--muted); padding-bottom: 22px; }
.hero__poster { position: absolute; z-index: -2; right: 1%; top: 47%; width: min(84vh, 54vw); aspect-ratio: 1; transform: translateY(-50%); -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent 100%); mask-image: radial-gradient(closest-side, #000 50%, transparent 100%); }

.hero__signoff { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; width: 100%; max-width: var(--max); margin-inline: auto; padding: clamp(40px, 8vw, 120px) var(--pad-r) 0 var(--pad-l); font-size: var(--t-signoff); line-height: .9; text-wrap: normal; }
.hero__signoff > * { display: block; }
.hero__signoff em { text-align: right; }

/* ───────────────────────── 6.2 introduction ───────────────────────── */
.intro { --pad: clamp(110px, 17vw, 260px); --gap: clamp(72px, 30vh, 340px); position: relative; isolation: isolate; overflow-x: hidden; overflow-x: clip; padding-block: var(--pad) calc(var(--section) * .55); }
.no-js .intro, .posters .intro { --gap: clamp(220px, 40vh, 440px); }   /* room for the still between the two blocks */
.intro__statement { display: grid; row-gap: var(--gap); }
.intro__a, .intro__b { display: block; }
.intro__a { justify-self: start; }
.intro__a > .reveal-line { display: block; }
.intro__b { justify-self: end; text-align: right; }
.intro__b > .reveal-line { display: block; }
/* the network still: centred on the gap between the two blocks (block A is two lines of .display), sized so the network itself fits the gap */
.intro__poster { position: absolute; z-index: -1; left: 54%; top: calc(var(--pad) + 1.96 * var(--t-display) + var(--gap) / 2); width: calc(var(--gap) * 2.05); aspect-ratio: 1; transform: translate(-50%, -50%); -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent 78%); mask-image: radial-gradient(closest-side, #000 50%, transparent 78%); }
.intro__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px var(--gutter); margin-top: clamp(88px, 15vw, 220px); padding-top: 26px; border-top: 1px solid var(--line); }
.intro__cols h3 { margin-bottom: 16px; }
.intro__cols p { color: var(--muted); font-size: var(--t-lede); line-height: 1.5; max-width: 34ch; }

/* ───────────────────────── 6.3 the workload ───────────────────────── */
.wl { border-top: 1px solid var(--line); }
.wl__row { display: grid; grid-template-columns: 56px 104px minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 8px var(--gutter); padding-block: clamp(24px, 2.9vw, 42px); border-bottom: 1px solid var(--line); }
.wl__n { color: var(--faint); }
.wl__glyph { width: 64px; height: 24px; overflow: visible; }
.wl__glyph path, .wl__glyph circle { fill: none; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.wl__glyph .g-base { stroke: var(--faint); }
.wl__glyph .g-dot { fill: var(--muted); stroke: none; }
.wl__glyph .g-join { stroke: var(--accent); stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .wl__row .g-join { stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--ease-in-out) .35s; }
.js .wl__row.is-in .g-join { stroke-dashoffset: 0; }
.nointro .wl__row .g-join { transition: none; }
.wl__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.45rem, 2.5vw, 2.5rem); line-height: 1.1; letter-spacing: -.014em; text-wrap: balance; }
.wl__text { color: var(--muted); max-width: 44ch; }

.turn { margin-top: clamp(96px, 15vw, 230px); }
.turn > span { display: block; }
.outcomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gutter); margin-top: clamp(44px, 6vw, 96px); }
.outcomes li { padding-top: 20px; border-top: 1px solid var(--line-strong); max-width: none; text-wrap: balance; }

/* ───────────────────────── 6.4 capabilities: the plain list ───────────────────────── */
.caps { position: relative; padding-block: var(--section); }
.caps__stage { width: 100%; max-width: var(--max); margin-inline: auto; padding-left: var(--pad-l); padding-right: var(--pad-r); }
.caps__head { display: grid; gap: 20px; margin-bottom: clamp(40px, 6vw, 88px); }
.caps__counter, .caps__ticks, .caps__foot { display: none; }
.caps__title { font-size: clamp(1.15rem, 4.6vw, 3.4rem); letter-spacing: .34em; margin-right: 0; }
.caps__intro { color: var(--muted); max-width: 48ch; font-size: var(--t-lede); line-height: 1.5; }
.caps__list { border-top: 1px solid var(--line); }
.cap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding-block: clamp(28px, 5vw, 72px); border-bottom: 1px solid var(--line); }
/* the still fades to nothing exactly at its own edge, so its frame never shows against the page */
.cap__poster { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; -webkit-mask-image: radial-gradient(closest-side, #000 68%, transparent 100%); mask-image: radial-gradient(closest-side, #000 68%, transparent 100%); }
.cap__numeral { font-family: var(--font-display); font-weight: 300; font-size: clamp(3.4rem, 9vw, 6rem); line-height: .9; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px var(--line-strong); pointer-events: none; -webkit-user-select: none; user-select: none; }
.cap__name { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.75rem, 3.2vw, 3rem); line-height: 1.05; letter-spacing: -.016em; text-wrap: balance; }
.cap__body dl { display: grid; gap: 18px; margin-top: 4px; }
.cap__body dt { margin-bottom: 7px; }
.cap__body dd { color: var(--muted); max-width: 48ch; }
.cap__body dl > div:last-child dd { color: var(--paper); }
/* label above, link below, on every capability and at every width: a row that fits on one line for some links and not for others would change shape from step to step */
.cap__seen { display: flex; flex-direction: column; align-items: flex-start; margin-top: 14px; }
.cap__seen .link { display: inline-flex; align-items: center; min-height: 44px; }

/* two columns: the still on the left; the numeral, the name and the text on the right. The numeral never shares the still's space. */
@media (min-width: 700px) {
  html:not(.stage) .cap { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-areas: "poster numeral" "poster name" "poster body"; grid-template-rows: auto auto 1fr; gap: 0 calc(var(--gutter) * 2); align-items: start; }
  html:not(.stage) .cap__poster { grid-area: poster; aspect-ratio: 1; }
  html:not(.stage) .cap__numeral { grid-area: numeral; padding-top: 10px; font-size: clamp(3.4rem, 7vw, 5rem); }
  html:not(.stage) .cap__name { grid-area: name; padding-top: 14px; }
  html:not(.stage) .cap__body { grid-area: body; padding-top: 26px; }
}
@media (min-width: 1100px) {
  html:not(.stage) .cap__body dl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
}

/* round controls + dots (only shown on the pinned stage) */
.round { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--paper); border: 1px solid var(--line-strong); background: rgba(11, 13, 16, .4); transition: background-color .25s var(--ease), border-color .25s var(--ease), opacity .25s var(--ease), transform .25s var(--ease); }
.round:hover { border-color: var(--paper); }
.round--fill { background: var(--accent-strong); border-color: transparent; }
.round--fill:hover { background: var(--accent-press); border-color: transparent; }
.round--fill:focus-visible { outline-color: var(--paper); }
.round:focus-visible { border-radius: 50%; }
/* disabled: the arrow, the border and the fill are dimmed, not the button itself, so its focus ring stays at full strength */
.round[aria-disabled="true"], .round[aria-disabled="true"]:hover { cursor: default; border-color: var(--line); }
.round[aria-disabled="true"] svg { opacity: .45; }
.round--fill[aria-disabled="true"], .round--fill[aria-disabled="true"]:hover { background: rgba(54, 83, 230, .45); border-color: transparent; }
.caps__controls { display: flex; align-items: center; gap: 8px; }
.caps__dots { display: flex; margin-left: 6px; }
.caps__dots button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
.caps__dots button::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); transition: background-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); }
.caps__dots button:hover::before { background: var(--paper); }
.caps__dots button[aria-current="true"]::before { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.caps__progress { display: block; position: relative; flex: none; width: clamp(110px, 14vw, 230px); height: 1px; background: var(--line-strong); }
.caps__progress i { position: absolute; left: 0; top: -.5px; width: 100%; height: 2px; background: var(--paper); transform: scaleX(0); transform-origin: 0 50%; }

/* ───────────────────────── 6.5 selected projects ───────────────────────── */
.projects { isolation: isolate; }
.ghost { position: absolute; inset: 0; z-index: -1; overflow: hidden; overflow: clip; pointer-events: none; display: flex; flex-direction: column; justify-content: center; gap: 2vw; }
.ghost span { display: block; white-space: nowrap; font-family: var(--font-display); font-weight: 300; font-size: clamp(7rem, 25vw, 30rem); line-height: .82; letter-spacing: -.02em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgba(236, 238, 241, .085); -webkit-user-select: none; user-select: none; }
.ghost span:nth-child(1) { margin-left: -4vw; }
.ghost span:nth-child(2) { margin-left: 22vw; }

.ptable { display: block; width: 100%; border-collapse: collapse; --pcols: minmax(11rem, .62fr) minmax(0, 1.35fr) minmax(0, 1.7fr) minmax(0, 1.05fr); --go: calc(32px + var(--gutter)); }
.ptable thead, .ptable tbody { display: block; }
.ptable tr { position: relative; display: grid; grid-template-columns: var(--pcols); gap: 10px var(--gutter); align-items: start; padding-right: var(--go); border-top: 1px solid var(--line); }
.ptable th, .ptable td { display: block; padding: 0; text-align: left; font-weight: inherit; }
.ptable thead tr { padding-block: 14px; border-top: 0; }
.ptable thead th { font-weight: 500; }
.prow { --py: clamp(22px, 2.5vw, 36px); padding-block: var(--py); }
.prow::before { content: ''; position: absolute; z-index: -1; inset: 0 calc(var(--gutter) * -.5); background: rgba(236, 238, 241, .045); opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; }
.ptable tbody tr:last-child { border-bottom: 1px solid var(--line); }
.prow__status { padding-top: .45em; }
.prow__status .status { white-space: nowrap; }
.prow__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.3rem, 1.85vw, 1.9rem); line-height: 1.14; letter-spacing: -.012em; text-wrap: balance; }
.prow__title a { transition: color .25s var(--ease); }
.prow__title a::after { content: ''; position: absolute; inset: 0; }
.prow__title a:focus-visible { outline: none; }
.prow__title a:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 0; border-radius: 4px; inset: 0 calc(var(--gutter) * -.5); }
.prow__desc { color: var(--muted); max-width: 52ch; }
.prow__tools { font-family: var(--font-mono); font-size: .78rem; line-height: 1.7; letter-spacing: .02em; color: var(--muted); padding-top: .3em; }
.prow__tools li { display: inline-block; }   /* a line breaks between tools, not inside a name (unless the name alone is wider than the column) */
.prow__tools li:not(:last-child)::after { content: '\00a0·'; content: '\00a0·' / ''; }   /* the separator stays with the word before it */
.prow__go { position: absolute; right: 0; top: calc(var(--py) + 5px); color: var(--muted); transition: transform .35s var(--ease), color .25s var(--ease); }
.prow:hover::before, .prow:focus-within::before { opacity: 1; }
.prow:hover .prow__title a, .prow__title a:focus-visible { color: #fff; }
.prow:hover .prow__go, .prow:focus-within .prow__go { color: var(--accent); transform: translateX(6px); }

.projects__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px var(--gutter); margin-top: clamp(28px, 3.4vw, 52px); }
.projects__note { font-size: var(--t-small); color: var(--muted); max-width: 62ch; }

/* ───────────────────────── 6.6 process ───────────────────────── */
.steps { position: relative; padding-top: 46px; }
.steps__line { position: absolute; left: 0; right: 0; top: 0; height: 11px; overflow: hidden; overflow: clip; }
.steps__line::before { content: ''; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--line-strong); }
.steps__line i { position: absolute; left: 0; top: 0; width: 100%; height: 11px; opacity: 0; }
.steps__line i::before { content: ''; position: absolute; left: -64px; top: 5px; width: 64px; height: 1px; background: linear-gradient(90deg, rgba(95, 130, 255, 0), var(--accent)); }
.steps__line i::after { content: ''; position: absolute; left: -3px; top: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.steps.is-live .steps__line i { animation: step-pulse-x 7s linear infinite; }
@keyframes step-pulse-x { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 4% { opacity: 1; } 94% { opacity: 1; } 100% { transform: translate3d(100%, 0, 0); opacity: 0; } }
@keyframes step-pulse-y { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 4% { opacity: 1; } 94% { opacity: 1; } 100% { transform: translate3d(0, 100%, 0); opacity: 0; } }
.steps__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px var(--gutter); }
.step { position: relative; display: grid; gap: 14px; align-content: start; }
.step::before { content: ''; position: absolute; left: 0; top: -45px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); border: 1px solid var(--paper); }
.step p { color: var(--muted); max-width: 34ch; }
.step__n { color: var(--accent); }

/* ───────────────────────── 6.7 about ───────────────────────── */
.about__top { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px calc(var(--gutter) * 2); align-items: start; }
.about__head { display: grid; gap: 18px; }
.about__head .h2 { max-width: 16ch; }
.about__text { display: grid; gap: 1.25em; padding-top: clamp(0px, 2.2vw, 34px); }
.about__text .lede { max-width: 50ch; }
.about__text .body { max-width: 56ch; }
.principles { margin-top: clamp(64px, 10vw, 150px); border-top: 1px solid var(--line); }
.principle { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px var(--gutter); align-items: baseline; padding-block: clamp(20px, 2.3vw, 32px); border-bottom: 1px solid var(--line); }
.principle__n { color: var(--faint); }
.principle p { color: var(--muted); max-width: 58ch; }

/* ───────────────────────── 6.8 closing ─────────────────────────
   The band itself is the shared component in base.css. Here: once the live canvas draws the lattice, the wash moves
   to the layer behind the canvas (.wash) and the band's own ground goes. The lattice still is a .poster like the others. */
.gl-live .closing { background: none; }

/* ═════════════════════════ the pinned stages (html.stage) ═════════════════════════ */
.stage .hero { height: var(--hero-track, 230vh); }
.stage .hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; overflow: clip; }
.stage .hero__screen { position: absolute; inset: 0; min-height: 0; }
.stage .hero__copy { will-change: transform, opacity; }
.stage .hero__copy.is-gone { pointer-events: none; }
.stage .hero__signoff { position: absolute; left: 0; right: 0; bottom: var(--pad-b); padding-block: 0; font-size: clamp(3.4rem, min(8.6vw, 16vh), 11rem); pointer-events: none; }
.stage .hero__signoff > * { opacity: 0; will-change: transform, opacity; }

/* the statement gets a viewport of its own after the captions, and its gap is the network's slot */
.stage .intro { --pad: 60vh; --gap: clamp(200px, 42vh, 460px); }

.stage .caps { padding-block: 0; height: calc(5 * var(--caps-step, 85vh) + 100vh); scroll-margin-top: calc(-1 * (var(--header-h) + 12px)); }
.stage .caps__stage { position: sticky; top: 0; height: 100vh; height: 100svh; max-width: none; padding: 0; overflow: hidden; overflow: clip; --b: clamp(26px, 6.5vh, 60px); --col: min(31vw, clamp(21rem, 26vw, 28rem)); --top: calc(var(--header-h) + 14px); --title: clamp(1.5rem, 3.4vw, 3.4rem); }
.stage .caps__head { display: block; margin: 0; }
.stage .caps__counter { display: block; position: absolute; left: var(--edge); top: calc(var(--top) + 8px); }
.stage .caps__ticks { display: block; position: absolute; left: 40%; top: calc(var(--top) + 10px); transform: translateX(-50%); }
.stage .caps__ticks--b { top: auto; bottom: 14px; }
.stage .caps__title { position: absolute; right: var(--edge); top: var(--top); font-size: var(--title); letter-spacing: .42em; margin-right: -.42em; white-space: nowrap; }
.stage .caps__intro { position: absolute; right: var(--edge); top: calc(var(--top) + var(--title) + 20px); width: var(--col); max-width: none; font-size: var(--t-small); line-height: 1.55; }
.stage .caps__list { position: absolute; inset: 0; border: 0; }
/* the change between steps is a sequence, not a cross-dissolve: the old text is gone before the new text starts to arrive, so two steps are never printed over each other */
.stage .cap { position: absolute; inset: 0; display: block; padding: 0; border: 0; opacity: 0; pointer-events: none; transition: opacity .15s linear; }
.stage .cap.is-active { opacity: 1; transition: opacity .45s var(--ease) .15s; }
.stage .cap__poster { display: none; }
.stage .cap__name { position: absolute; left: var(--edge); bottom: calc(var(--b) + 84px); max-width: min(11em, 42vw); font-size: clamp(2rem, 3.6vw, 3.6rem); transform: translate3d(0, 14px, 0); transition: transform .7s var(--ease); }
.stage .cap.is-active .cap__name { transform: none; transition-delay: .15s; }
.stage .cap__body { position: absolute; isolation: isolate; right: var(--edge); bottom: var(--b); width: var(--col); }
/* a floor under the text column: whatever the scene does, the copy keeps its contrast */
.stage .cap__body::before { content: ''; position: absolute; z-index: -1; inset: -28px -40px -24px -64px; background: linear-gradient(90deg, rgba(11, 13, 16, 0), rgba(11, 13, 16, .86) 64px); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28px); mask-image: linear-gradient(to bottom, transparent, #000 28px); pointer-events: none; }
.stage .cap.is-active .cap__body { pointer-events: auto; }
.stage .cap__body dd { max-width: none; }
.stage .cap__seen { margin-top: 16px; }
.stage .cap__numeral { position: absolute; right: calc(var(--edge) + var(--col) + clamp(22px, 3vw, 60px)); bottom: calc(var(--b) + 2px); font-size: min(25vh, 15vw); line-height: .74; -webkit-text-stroke-color: rgba(236, 238, 241, .26); }
.stage .caps__foot { display: flex; align-items: center; gap: 22px; position: absolute; z-index: 2; left: var(--edge); bottom: calc(var(--b) + 4px); }
.nointro .cap, .nointro .cap__name { transition: none !important; }

@media (max-width: 1279px) {
  .stage .cap__numeral { bottom: calc(var(--b) + 76px); font-size: min(20vh, 12vw); }
}
@media (max-height: 760px) {
  .stage .caps__stage { --col: min(28rem, 37vw); --title: clamp(1.6rem, 3.1vw, 2.9rem); --top: calc(var(--header-h) + 4px); }
  .stage .caps__intro { top: calc(var(--top) + var(--title) + 12px); }
  .stage .cap__name { font-size: clamp(1.8rem, 3vw, 2.7rem); bottom: calc(var(--b) + 72px); }
  .stage .cap__body dl { gap: 12px; }
  .stage .cap__seen { margin-top: 4px; }
  .stage .cap__numeral { font-size: min(22vh, 11vw); }
  .round { width: 46px; height: 46px; }
}

/* ═════════════════════════ phones and narrow screens ═════════════════════════ */
@media (max-width: 900px) {
  .sec-head--split { grid-template-columns: minmax(0, 1fr); }
  .sec-head--split .lede { justify-self: start; }

  .hero__screen { padding-top: calc(var(--header-h) + 116px); padding-bottom: 26px; }
  .hero__screen::after { content: ''; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 72%; background: linear-gradient(to top, var(--ink) 0, rgba(11, 13, 16, .94) 58%, rgba(11, 13, 16, 0) 100%); pointer-events: none; }
  .hero__inner { display: block; }
  .hero__copy { max-width: 34rem; gap: 14px; }
  .hero__copy::before { display: none; }
  .hero__copy .h1 { font-size: clamp(1.9rem, 8.6vw, 3rem); }
  .hero__copy .lede { font-size: clamp(1rem, 4.3vw, 1.125rem); }
  .hero__scroll { display: none; }
  .hero__actions { width: 100%; gap: 10px; }
  .hero__actions .btn { flex: 1 1 100%; min-width: 0; padding-block: 6px; white-space: normal; text-align: center; }   /* at a very large text size the label wraps instead of running off the screen */
  .hero__label span { display: inline; }
  .hero__actions .btn--ghost { min-height: 52px; }
  /* No live canvas on a phone (no JavaScript, reduced motion, no WebGL): the still gets exactly the room that is left
     above the copy, whatever the phone's height, so it can never sit under the words. On a very short screen that
     room is nothing and the still is simply not there. */
  .no-js .hero__screen, .posters .hero__screen { flex-direction: column; align-items: stretch; justify-content: flex-end; padding-top: var(--header-h); }
  .no-js .hero__screen::after, .posters .hero__screen::after { display: none; }
  .hero__poster { position: relative; z-index: -1; right: auto; top: auto; flex: 1 1 0; min-height: 0; max-height: 62vh; max-height: 62svh; width: auto; aspect-ratio: auto; margin: -8px 0 -16px; transform: none; -webkit-mask-image: radial-gradient(circle closest-side, #000 50%, transparent 100%); mask-image: radial-gradient(circle closest-side, #000 50%, transparent 100%); }
  .hero__poster img { position: absolute; inset: 0; object-fit: contain; }
  .hero__signoff { flex-direction: column; align-items: stretch; gap: .14em; padding-block: clamp(64px, 16vw, 120px) 0; }

  .intro { --pad: clamp(88px, 22vw, 150px); padding-block: var(--pad) var(--section); }
  .no-js .intro, .posters .intro { --gap: clamp(64px, 16vh, 150px); --still: min(92vw, 440px); padding-top: calc(var(--pad) * .5 + var(--still) * .62); }
  .intro__statement { row-gap: clamp(64px, 16vh, 150px); font-size: clamp(2.1rem, 9.4vw, 4rem); }
  .intro__poster { left: 50%; top: calc(var(--pad) * .5 + var(--still) * .31 - 12px); width: var(--still); }
  .intro__cols { grid-template-columns: minmax(0, 1fr); margin-top: clamp(72px, 18vw, 130px); padding-top: 0; border-top: 0; gap: 0; }
  .intro__cols > div { padding-block: 22px; border-top: 1px solid var(--line); }
  .intro__cols h3 { margin-bottom: 10px; }
  .intro__cols p { max-width: 44ch; }

  .wl__row { grid-template-columns: auto minmax(0, 1fr); gap: 12px 16px; align-items: center; }
  .wl__title, .wl__text { grid-column: 1 / -1; }
  .turn { font-size: clamp(2.1rem, 9.4vw, 4rem); }
  .outcomes { grid-template-columns: minmax(0, 1fr); }
  .outcomes li { padding-block: 18px; border-top: 1px solid var(--line); }
  .outcomes li:first-child { border-top-color: var(--line-strong); }


  .ptable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ptable tr { padding-right: 0; }
  .ptable tr.prow { grid-template-columns: minmax(0, 1fr); gap: 12px 16px; }
  .prow::before { display: none; }
  .ptable tbody tr:first-child { border-top-color: var(--line-strong); }
  .prow__status { padding-top: 0; padding-right: 44px; }
  .prow__go { top: calc(var(--py) - 4px); }
  .prow__title { font-size: clamp(1.45rem, 6vw, 1.9rem); }
  .projects__foot { flex-direction: column; align-items: flex-start; }
  .projects__foot .btn { width: 100%; }
  .ghost { justify-content: flex-start; padding-top: 30vw; gap: 60vw; }
  .ghost span { font-size: 44vw; }

  .steps { padding-top: 0; padding-left: 34px; }
  .steps__line { left: 0; right: auto; top: 6px; bottom: 0; width: 11px; height: auto; }
  .steps__line::before { left: 5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .steps__line i { width: 11px; height: 100%; }
  .steps__line i::before { left: 5px; top: -64px; width: 1px; height: 64px; background: linear-gradient(180deg, rgba(95, 130, 255, 0), var(--accent)); }
  .steps__line i::after { left: 3px; top: -3px; }
  .steps.is-live .steps__line i { animation-name: step-pulse-y; }
  .steps__list { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .step::before { left: -33px; top: 3px; }
  .step p { max-width: 46ch; }

  .about__top { grid-template-columns: minmax(0, 1fr); }
  .principle { grid-template-columns: 40px minmax(0, 1fr); }
  .principle p { grid-column: 2; }

}

@media (max-width: 699px) {
  .cap__numeral { grid-row: 2; font-size: 3.4rem; margin-top: -8px; }
  .cap__poster { grid-row: 1; }
}

@media (max-width: 900px) and (min-width: 600px) {
  .hero__actions .btn { flex: 0 1 auto; }
  .hero__label span { display: inline-block; }
  .projects__foot .btn { width: auto; }
}

@media (max-width: 1100px) and (min-width: 901px) {
  .wl__row { grid-template-columns: 44px 84px minmax(0, 1.1fr) minmax(0, 1fr); }
  .ptable { --pcols: minmax(10.5rem, .6fr) minmax(0, 1.3fr) minmax(0, 1.6fr) minmax(0, 1fr); --go: calc(28px + var(--gutter) * .6); }
  .steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }
  .step:nth-child(n+3)::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .steps__line i { display: none; }
  .js .wl__row .g-join { stroke-dashoffset: 0; }
}

/* the smallest phones: both hero buttons stay above the fold */
@media (max-width: 900px) and (max-height: 620px) {
  .hero__screen { padding-top: calc(var(--header-h) + 44px); padding-bottom: 18px; }
  .hero__copy { gap: 10px; }
  .hero__copy .h1 { font-size: clamp(1.75rem, 8.6vw, 2.6rem); }
  .hero__copy .lede { font-size: 1rem; }
  .hero__actions { gap: 8px; margin-top: 2px; }
  .hero__actions .btn--lg { min-height: 52px; }
}
/* a short upright phone that is still tall enough for the pinned stages (540px and up; a very narrow phone wraps the
   headline block into more lines, so it counts as short sooner): the block is set tight, so the scene keeps a share of
   the first screen. Not tied to .stage: the block must not move when home.js switches the stages on. */
@media (max-width: 900px) and (min-height: 540px) and (max-height: 620px), (max-width: 349px) and (min-height: 540px) and (max-height: 720px) {
  .hero__screen { padding-top: calc(var(--header-h) + 44px); padding-bottom: 14px; }
  .hero__copy { gap: 8px; }
  .hero__label { line-height: 1.45; }
  .hero__copy .h1 { font-size: clamp(1.6rem, 7.6vw, 2.6rem); }
  .hero__copy .lede { font-size: 1rem; line-height: 1.45; }
  .hero__actions { gap: 8px; margin-top: 2px; }
  .hero__actions .btn--lg, .hero__actions .btn--ghost { min-height: 48px; }
}

/* a large phone held sideways is just over 900px wide, so it gets the wide layout (the object on the right, the copy in
   its 58% column): the same compaction, with the two buttons side by side */
@media (min-width: 901px) and (max-height: 480px) and (orientation: landscape) {
  .hero__screen { padding-top: calc(var(--header-h) + 8px); padding-bottom: 14px; }
  .hero__copy { gap: 8px; }
  .hero__copy .h1 { font-size: clamp(1.6rem, 8.2vh, 2.2rem); max-width: 24ch; }
  .hero__actions { flex-wrap: nowrap; }
  .hero__actions .btn--lg { min-height: 52px; padding: 0 24px; }
}

/* a phone held sideways: the headline runs wide instead of tall, so the booking button is still on the first screen */
@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) {
  .hero__screen { padding-top: calc(var(--header-h) + 8px); padding-bottom: 14px; }
  .hero__copy { max-width: none; gap: 8px; }
  .hero__copy .h1 { font-size: clamp(1.6rem, 8.2vh, 2.2rem); max-width: 24ch; }
  .hero__copy .lede { max-width: 62ch; }
  .hero__label span { display: inline; }
}

/* Forced colours (Windows High Contrast): the system paints all text solid, so the outlined ghost words and numerals,
   which are decoration, go; the step dots and the progress line, which are drawn with backgrounds, keep a fill. */
@media (forced-colors: active) {
  .ghost, .cap__numeral { display: none; }
  .caps__dots button::before { forced-color-adjust: none; background: ButtonText; box-shadow: none; }
  .caps__dots button[aria-current="true"]::before { background: Highlight; outline: 2px solid Highlight; outline-offset: 2px; }
  .caps__progress, .steps__line::before { forced-color-adjust: none; background: GrayText; }
  .caps__progress i { background: CanvasText; }
  .round, .round--fill, .round--fill[aria-disabled="true"] { border-color: ButtonText; }
  .step::before { border-color: CanvasText; }
}

/* claimed figures above the projects table: three large numerals on a hairline, as on the current site */
.figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 calc(var(--gutter) * 2); border-top: 1px solid var(--line); }
.figs li { display: grid; gap: 10px; align-content: start; padding: clamp(22px, 2.6vw, 38px) 0 clamp(18px, 2.2vw, 30px); }
.figs__n { font-family: var(--font-display); font-weight: 300; font-size: clamp(3.4rem, 7.6vw, 7.8rem); line-height: .9; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.figs__what { font-size: var(--t-lede); line-height: 1.3; color: var(--paper); max-width: 20ch; }
.figs__foot { margin: 6px 0 clamp(44px, 6vw, 96px); }
.figs__est { font-size: var(--t-small); line-height: 1.4; color: var(--muted); max-width: 30ch; }   /* owner decision 2026-10-12: each figure says who estimated it and the build status */
.sec-head:has(+ .figs) { margin-bottom: clamp(28px, 3.6vw, 56px); }
@media (max-width: 900px) {
  .figs { grid-template-columns: minmax(0, 1fr); }
  .figs li { grid-template-columns: minmax(0, auto) minmax(0, 1fr); column-gap: 20px; align-items: end; padding: 20px 0; }
  .figs li + li { border-top: 1px solid var(--line); }
  .figs__n { grid-row: span 2; font-size: clamp(3.2rem, 17vw, 4.6rem); }
  .figs__what { align-self: end; }
  .figs li .label { align-self: start; }
  .figs__est { grid-column: 1 / -1; max-width: none; margin-top: 2px; }
}

/* ═════════════════════════ the pinned stages under 901px (html.stage on phones and narrow windows) ═════════════════════════
   The same two stages as on a wide screen, composed for an upright window: the scene above, the type under it.
   home.js decides by measuring whether they fit (TUNE.phone.stage) and sets the track lengths (--hero-track,
   --caps-step, --caps-lead) in svh: the window with the address bar showing, so a sliding address bar never changes
   a length. The stages themselves are 100svh tall (above). This block comes last so that it also wins over the
   short-window rules for the wide stage. */
@media (max-width: 900px) {
  /* hero: the ink behind the headline block belongs to the block, so it leaves with it and the mark is clear above the
     captions. home.js fades the words first (each child) and the block, with its ink, after them: whatever part of
     the object is parked under the ink is never seen through half-faded words. */
  .stage .hero__screen::after { display: none; }
  .stage .hero__copy::before { --ramp: clamp(40px, 8.5vh, 84px); display: block; inset: calc(var(--ramp) * -1) -100vw -240px; background: linear-gradient(to bottom, rgba(11, 13, 16, 0) 0, rgba(11, 13, 16, .9) var(--ramp), var(--ink) calc(var(--ramp) + 80px)); }
  .stage .hero__signoff { font-size: clamp(3rem, min(16vw, 9.6vh), 11rem); }

  /* the statement: a short breath after the stage, and a gap sized for the network (its box is about 0.74 as tall as it is wide) */
  .stage .intro { --pad: 22vh; --gap: clamp(190px, min(calc((100vw - 2 * var(--gutter)) * .74 + 40px), 44vh), 480px); }
  .stage .intro__statement { row-gap: var(--gap); }

  /* capabilities: one grid, top to bottom: counter and title · the emblem's slot · the text · the controls.
     The introduction, the progress line and the list of capabilities share the text row. */
  .stage .caps { height: calc(var(--caps-lead, 30vh) + 5 * var(--caps-step, 120vh) + 100vh); }
  .stage .caps__stage { --name: clamp(1.5rem, 6.6vw, 2.6rem); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; padding: calc(var(--header-h) + 16px) var(--pad-r) max(14px, env(safe-area-inset-bottom, 0px)) var(--pad-l); }
  .stage .caps__head, .stage .caps__foot { display: contents; }
  .stage .caps__ticks { display: none; }
  .stage .caps__counter { position: static; grid-area: 1 / 1; justify-self: start; align-self: center; }
  .stage .caps__title { position: static; grid-area: 1 / 1; justify-self: end; align-self: center; font-size: clamp(.8rem, 3.4vw, 1.3rem); letter-spacing: .36em; margin-right: -.36em; }

  .stage .caps__list { position: relative; inset: auto; grid-area: 3 / 1; display: grid; grid-template-columns: minmax(0, 1fr); isolation: isolate; }
  /* a floor under the text: whatever the scene does under the emblem, the copy keeps its contrast */
  .stage .caps__list::before { content: ''; position: absolute; z-index: -1; inset: calc(var(--floor, 0px) - 30px) -100vw -50vh; background: linear-gradient(to bottom, rgba(11, 13, 16, 0), rgba(11, 13, 16, .9) 40px); pointer-events: none; }   /* --floor (home.js): a one-line name leaves the upper line of its box to the emblem */
  /* every capability in the same cell, so the row is as tall as the longest one and nothing moves from step to step */
  .stage .cap { position: relative; inset: auto; grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-content: start; }
  /* the outlined numeral takes no room of its own: it stands on the name's top edge, in the corner of the emblem's slot */
  .stage .cap__numeral { position: static; grid-area: 1 / 1; justify-self: end; display: flex; align-items: flex-end; height: 0; margin: 0; font-size: clamp(2.6rem, 12.5vw, 4.6rem); line-height: .8; transform: translate3d(0, -8px, 0); }
  /* the name sits on the bottom of a box two lines tall, so the progress line under it is in the same place for every capability */
  .stage .cap__name { position: static; grid-area: 2 / 1; display: flex; align-items: flex-end; min-height: calc(var(--name) * 2.1); max-width: none; font-size: var(--name); }
  .stage .cap__body { position: relative; right: auto; bottom: auto; width: auto; grid-area: 3 / 1; margin-top: 27px; }
  .stage .cap__body::before { display: none; }
  .stage .cap__body dl { gap: 12px; margin-top: 0; }
  .stage .cap__body dt { margin-bottom: 5px; }
  .stage .cap__body dd { max-width: 60ch; }
  /* the link keeps its 44px target (padding, so a link that wraps keeps it too); the target overlaps the label above it
     and the space below it, so its focus ring is drawn inside the padding, close around the words, clear of the label */
  .stage .cap__seen { margin-top: 10px; }
  .stage .cap__seen .link { display: inline-block; padding: 9px 8px; margin: -5px -8px -10px; }
  .stage .cap__seen .link:focus-visible { outline-offset: -6px; }

  .stage .caps__progress { grid-area: 3 / 1; z-index: 1; align-self: start; width: 100%; height: 2px; margin-top: calc(var(--name) * 2.1 + 12px); background: linear-gradient(var(--line-strong), var(--line-strong)) 0 50% / 100% 1px no-repeat; transition: opacity .3s var(--ease); }
  .stage .caps__progress i { top: 0; }
  .stage .caps__controls { position: relative; z-index: 2; grid-area: 4 / 1; margin-top: 12px; }
  .stage .round { width: 46px; height: 46px; }
  .stage .caps__dots { flex: 1 1 auto; justify-content: flex-end; margin: 0 -14px 0 4px; }
  .stage .caps__dots li { flex: 0 1 44px; min-width: 0; }
  .stage .caps__dots button { width: 100%; }

  /* The lead-in (.is-lead, set by home.js before the first capability is reached): the section's introduction has the
     text area to itself, as a statement. It gives way to the first capability in sequence, like every other step. */
  .stage .caps__intro { position: static; grid-area: 3 / 1; z-index: 1; align-self: start; width: auto; max-width: 27em; padding-top: 6px; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.25rem, 5.4vw, 1.9rem); line-height: 1.24; letter-spacing: -.01em; color: var(--paper); opacity: 0; pointer-events: none; transition: opacity .15s linear; }
  .stage .is-lead .caps__intro { opacity: 1; transition: opacity .45s var(--ease) .15s; }
  .stage .is-lead .cap.is-active { opacity: 0; transition: opacity .15s linear; }
  .stage .is-lead .cap.is-active .cap__body { pointer-events: none; }
  .stage .is-lead .caps__progress { opacity: 0; }

  /* Sub-steps (html.substeps): the three paragraphs of a capability share one place and are read one at a time; the
     Related build link belongs to the third. home.js sets data-sub on the capability. The change is the same sequence
     as between capabilities: the old paragraph is gone before the new one arrives. All of the text stays in the
     document, in order. The progress line is cut in three: one part per paragraph. */
  .substeps .cap__body { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .substeps .cap__body dl { display: contents; }
  /* A paragraph that is not showing is still there, in the same place as the one that is: it must not take the taps
     meant for what is showing (a longer hidden paragraph lies over the Related build link). The link is also raised
     above the paragraphs. */
  .substeps .cap__body dl > div { grid-area: 1 / 1 / 3 / 2; align-self: start; opacity: 0; pointer-events: none; transition: opacity .15s linear; }
  .substeps .cap__body dl > div:nth-child(3) { grid-area: 1 / 1 / 2 / 2; }
  .substeps .cap__seen { position: relative; z-index: 1; grid-area: 2 / 1; align-self: start; opacity: 0; pointer-events: none; transition: opacity .15s linear; }
  .substeps .cap[data-sub="0"] dl > div:nth-child(1), .substeps .cap[data-sub="1"] dl > div:nth-child(2), .substeps .cap[data-sub="2"] dl > div:nth-child(3), .substeps .cap[data-sub="2"] .cap__seen { opacity: 1; transition: opacity .45s var(--ease) .15s; }
  .substeps .caps__stage:not(.is-lead) .cap.is-active[data-sub="0"] dl > div:nth-child(1), .substeps .caps__stage:not(.is-lead) .cap.is-active[data-sub="1"] dl > div:nth-child(2), .substeps .caps__stage:not(.is-lead) .cap.is-active[data-sub="2"] dl > div:nth-child(3), .substeps .caps__stage:not(.is-lead) .cap.is-active[data-sub="2"] .cap__seen { pointer-events: auto; }
  .substeps .caps__progress { --cut: 4px; -webkit-mask-image: linear-gradient(90deg, #000 calc(33.333% - var(--cut)), transparent calc(33.333% - var(--cut)) calc(33.333% + var(--cut)), #000 calc(33.333% + var(--cut)) calc(66.667% - var(--cut)), transparent calc(66.667% - var(--cut)) calc(66.667% + var(--cut)), #000 calc(66.667% + var(--cut))); mask-image: linear-gradient(90deg, #000 calc(33.333% - var(--cut)), transparent calc(33.333% - var(--cut)) calc(33.333% + var(--cut)), #000 calc(33.333% + var(--cut)) calc(66.667% - var(--cut)), transparent calc(66.667% - var(--cut)) calc(66.667% + var(--cut)), #000 calc(66.667% + var(--cut))); }

  .nointro .caps__intro, .nointro .caps__progress, .nointro .cap__body dl > div, .nointro .cap__seen { transition: none !important; }
}
/* where svh exists (every current phone browser), the stage's own lengths follow the small viewport too */
@supports (height: 1svh) {
  @media (max-width: 900px) {
    .stage .hero__copy::before { --ramp: clamp(40px, 8.5svh, 84px); }
    .stage .hero__signoff { font-size: clamp(3rem, min(16vw, 9.6svh), 11rem); }
    .stage .intro { --pad: 22svh; --gap: clamp(190px, min(calc((100vw - 2 * var(--gutter)) * .74 + 40px), 44svh), 480px); }
    .stage .caps { height: calc(var(--caps-lead, 30svh) + 5 * var(--caps-step, 120svh) + 100svh); }
  }
}
/* The outlined numeral stands on the name's box, and the emblem's slot ends above it (home.js, capSlot). A short
   window has no room to give it; and where the emblem would be too small with it, home.js takes it away (html.no-numeral). */
@media (max-width: 900px) and (max-height: 779px) {
  .stage .cap__numeral { display: none; }
}
@media (max-width: 900px) {
  .no-numeral .cap__numeral { display: none; }
}
/* the shortest phones: every pixel the furniture gives up goes to the emblem */
@media (max-width: 900px) and (max-height: 620px) {
  .stage .caps__stage { padding-top: calc(var(--header-h) + 8px); padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); }
  .stage .cap__body { margin-top: 20px; }
  .stage .caps__progress { margin-top: calc(var(--name) * 2.1 + 9px); }
  .stage .caps__controls { margin-top: 8px; }
}
/* and in the hero (the same windows as the tight headline block), the ink starts close above the block, so the scatter reads down to the label */
@media (max-width: 900px) and (max-height: 620px), (max-width: 349px) and (max-height: 720px) {
  .stage .hero__copy::before { --ramp: 26px; }
}
/* the narrowest phones: two arrows and five dots share 280px, so the arrows are the least a tap target may be and the
   dots get everything else, out to the window's edge (about 41px each at 320px wide) */
@media (max-width: 339px) {
  .stage .round { width: 44px; height: 44px; }
  .stage .caps__controls { gap: 4px; }
  .stage .caps__dots { margin: 0 -20px 0 0; }
}
/* a tablet upright: the three paragraphs side by side when they all show */
@media (max-width: 900px) and (min-width: 700px) {
  .stage:not(.substeps) .cap__body dl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
}

/* workload glyphs: once a row is revealed and its path has joined, a short accent dash keeps travelling the path.
   Row 4 sends three (staggered); row 5's dash waits at the gate before it is let through (the step that waits on you).
   Off under reduced motion (base.css stops animations) and without JavaScript (no .js class). */
.wl__glyph .g-run { stroke: var(--paper); stroke-width: 1.6; stroke-dasharray: .16 1; stroke-dashoffset: .16; opacity: 0; }
.js .wl__row.is-in .g-run { animation: wl-run 3.6s linear var(--gd, 1.2s) infinite; }
.js .wl__row.is-in .g-end { animation: wl-end 3.6s linear var(--gd, 1.2s) infinite; transform-box: fill-box; transform-origin: center; }
.js .wl__row.is-in .g-run--stall { animation: wl-stall 4.6s linear 1.2s infinite; }
.js .wl__row.is-in .g-gate { animation: wl-gate 4.6s linear 1.2s infinite; }
.js .wl__row.is-in .g-run--stall ~ .g-end { animation: wl-end-stall 4.6s linear 1.2s infinite; }
@keyframes wl-run { 0% { stroke-dashoffset: .16; opacity: 0; } 5% { opacity: 1; } 55% { stroke-dashoffset: -1; opacity: 1; } 60%, 100% { stroke-dashoffset: -1; opacity: 0; } }
@keyframes wl-end { 0%, 50% { fill: var(--muted); transform: scale(1); } 56% { fill: var(--accent); transform: scale(1.5); } 72%, 100% { fill: var(--muted); transform: scale(1); } }
@keyframes wl-stall { 0% { stroke-dashoffset: .16; opacity: 0; } 4% { opacity: 1; } 22% { stroke-dashoffset: -.34; } 58% { stroke-dashoffset: -.34; opacity: 1; } 84% { stroke-dashoffset: -1; opacity: 1; } 88%, 100% { stroke-dashoffset: -1; opacity: 0; } }
@keyframes wl-gate { 0%, 20% { stroke: var(--faint); } 26%, 54% { stroke: var(--accent); } 62%, 100% { stroke: var(--faint); } }
@keyframes wl-end-stall { 0%, 80% { fill: var(--muted); transform: scale(1); } 85% { fill: var(--accent); transform: scale(1.5); } 96%, 100% { fill: var(--muted); transform: scale(1); } }

/* About, compact: the statement and the three paragraphs on the left, the five principles on the right as a list that
   opens one at a time (home.js turns each title into a button and steps through them; a click takes over). Without
   JavaScript or under reduced motion the list simply shows every principle. */
.about__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px calc(var(--gutter) * 2); align-items: start; }
.about__top { grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 2.6vw, 36px); }
.about__text { padding-top: 0; }
.about__side { display: grid; gap: 14px; padding-top: 4px; }
.about__how { color: var(--faint); }
.principles { margin-top: 0; }
.principle { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 0; padding-block: clamp(14px, 1.5vw, 20px); position: relative; }
.principle .h3 { grid-column: 2; font-size: clamp(1.15rem, 1.45vw, 1.4rem); }
.principle p { grid-column: 2; max-width: 46ch; }
.principles.is-acc .principle { display: block; padding-block: 0; }
.principles.is-acc .principle .h3 { font-size: clamp(1.15rem, 1.45vw, 1.4rem); }
.principle__btn { display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; align-items: baseline; width: 100%; min-height: 52px; padding: 14px 0; text-align: left; color: var(--muted); transition: color .3s var(--ease); }
.principle__btn:hover, .principle.is-open .principle__btn { color: var(--paper); }
.principle__btn::after { content: ''; justify-self: end; align-self: center; width: 11px; height: 11px; background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat; transition: transform .35s var(--ease), opacity .35s; opacity: .7; }
.principle.is-open .principle__btn::after { transform: rotate(45deg); opacity: 1; }
.principle__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); padding-left: 40px; }
.principle.is-open .principle__panel { grid-template-rows: 1fr; }
.principle__panel > p { min-height: 0; overflow: hidden; opacity: 0; transition: opacity .35s var(--ease); }
.principle.is-open .principle__panel > p { opacity: 1; padding-bottom: 18px; transition-delay: .12s; }
.principle__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--paper); transform: scaleX(0); transform-origin: left; }
.principles.is-auto .principle.is-open .principle__bar { animation: principle-bar 5.5s linear forwards; }
.principles.is-auto:hover .principle__bar, .principles.is-auto:focus-within .principle__bar, .principles.is-paused .principle__bar { animation-play-state: paused; }
@keyframes principle-bar { to { transform: scaleX(1); } }
@media (max-width: 900px) {
  .about__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
@media (forced-colors: active) { .principle__bar { background: CanvasText; } }