/* v5 · C · Proof · round 2. Mobile first (390), then 768 / 1000 / 1280.
   Reuses ../../css/tokens-c.css + components-c.css (read-only). Collage assets: ../img/collage/.
   Modes (set in <head>): .motion = animated · no class / .is-reduced / .is-static = final state, fully legible. */

/* ─────────────────────────── base ─────────────────────────── */
/* perf (round 7): Lenis's own rules (lenis@1.3.11/dist/lenis.css, MIT), kept here instead of a stylesheet from the CDN:
   that was a request to another host that had to finish before the first paint. Lenis only runs with a fine pointer. */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
[data-lenis-prevent], [data-lenis-prevent-wheel], [data-lenis-prevent-touch] { overscroll-behavior: contain; } /* without the .lenis scope: the light table keeps its scroll to itself on touch too, where Lenis no longer runs */
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }
html { scroll-behavior: auto; }
body { overflow-x: clip; }
/* collage pieces tilt, drop and slap: keep every section's paint inside the page width */
main > section, .foot { overflow-x: clip; }
::selection { background: var(--film); color: var(--paper); }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
strong { font-weight: 500; color: var(--film); }
:root { --gutter: clamp(18px, 4.6vw, 56px); }

/* the design system pairs pathLength with non-scaling-stroke, which draws only part of a stretched ring.
   Here a stroke is solid by default; in motion the script sets the dash in real pixel length. */
.draw path { stroke-dasharray: none; }
.js .draw path { stroke-dashoffset: 0; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; z-index: 100; left: 16px; top: -80px; padding: 14px 18px; border-radius: var(--r-pill); background: var(--film); color: var(--paper); text-decoration: none; font: 500 14px/1 var(--f-sans); }
.skip:focus { top: 16px; }
.tlink { color: var(--film); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: color-mix(in srgb, var(--film) 40%, transparent); transition: text-decoration-color var(--d-fast); }
.tlink:hover { text-decoration-color: var(--film); }
.btn { min-height: 48px; }
.btn--sm { min-height: 44px; }

/* round 8: no lone word on the last line of a paragraph, a caption or a list item (headings already balance) */
p, li, blockquote, figcaption, dd, small { text-wrap: pretty; }
.fr { display: flex; align-items: center; gap: 10px; font: 400 var(--t-meta)/1.3 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--graphite); }
.fr b { font-weight: 400; color: var(--film); padding: 3px 6px 2px; box-shadow: inset 0 0 0 1px var(--film); border-radius: 2px; }
.fr--plain { gap: 0; }
.fr--dark { color: color-mix(in srgb, var(--paper) 62%, var(--film)); }
.fr--dark b { color: var(--paper); box-shadow: inset 0 0 0 1px var(--paper); }

.h-sec { font-weight: 500; font-size: clamp(40px, 11.4vw, 104px); line-height: .92; letter-spacing: -.055em; color: var(--film); text-wrap: balance; }
.h-sec .focus { letter-spacing: -.035em; }

/* ─────────────────────────── collage library ─────────────────────────── */
/* hand strokes (img/collage/*.svg, inlined so they draw, boil and scrub) */
.scrib { display: block; overflow: visible; color: var(--marker); }
.scrib path { fill: none; stroke: currentColor; stroke-width: var(--sw, 2.6px); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: url(#wax-l); }
.motion .scrib path, .motion .hero .draw path, .motion .plan__mark path { opacity: 0; }

/* translucent tape with torn ends */
.tape { position: absolute; z-index: 7; width: var(--tw, 104px); height: auto; pointer-events: none; rotate: var(--r, -5deg); filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--film) 16%, transparent)); }
.tape--2 { --tw: 82px; }
.tape--3 { --tw: 126px; }

/* torn paper label */
.torn { display: inline-block; position: relative; rotate: -2.5deg; }
.torn > span { display: inline-block; padding: 10px 18px 9px; background: var(--film); color: var(--paper); font: 400 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; -webkit-mask: url(../img/collage/torn-1.svg) 0 0 / 100% 100%; mask: url(../img/collage/torn-1.svg) 0 0 / 100% 100%; }

/* note / card: the shadow follows the torn paper; the tape sits outside the mask */
.slip { position: relative; isolation: isolate; width: var(--nw, 210px); rotate: var(--r, 3deg); filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--film) 12%, transparent)) drop-shadow(0 14px 16px color-mix(in srgb, var(--film) 22%, transparent)); }
.slip::after { /* the lifted corner: a darker shadow under one corner, like a curled sheet */
  content: ""; position: absolute; z-index: -1; right: 6%; bottom: 4px; width: 46%; height: 18px; border-radius: 50%; opacity: var(--shadow-o, 1);
  background: color-mix(in srgb, var(--film) 55%, transparent); filter: blur(9px); rotate: 3deg; translate: 0 6px; }
.slip__paper { position: relative; padding: 28px 22px 22px; background: linear-gradient(172deg, var(--print), color-mix(in srgb, var(--print) 86%, var(--silver))); -webkit-mask: url(../img/collage/torn-2.svg) 0 0 / 100% 100%; mask: url(../img/collage/torn-2.svg) 0 0 / 100% 100%; }
.slip__t { font: 400 30px/1.02 var(--f-hand); color: var(--film); rotate: -1deg; }
.slip__tape { top: -12px; left: 50%; translate: -50% 0; --r: -3deg; }
.slip--card { --nw: auto; --r: 0deg; }

/* circular stamps with a worn edge (#ink filter) */
.stamp { position: relative; z-index: 4; display: inline-block; flex: none; width: var(--ss, 124px); aspect-ratio: 1; rotate: var(--r, 0deg); color: var(--film); mix-blend-mode: multiply; }
.stamp svg { display: block; width: 100%; height: 100%; overflow: visible; }
.stamp__o { fill: none; stroke: currentColor; stroke-width: 4.5; }
.stamp__i { fill: none; stroke: currentColor; stroke-width: 2; }
.stamp__ring { fill: currentColor; font: 400 15px var(--f-mono); letter-spacing: .04em; }
.stamp__c { fill: currentColor; font-family: var(--f-sans); font-weight: 600; letter-spacing: -.04em; }
.stamp__ast { fill: none; stroke: currentColor; stroke-width: 2.6px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.stamp--marker { color: var(--marker); }
.stamp--paper { color: var(--paper); mix-blend-mode: normal; }
.darkroom .stamp--marker { mix-blend-mode: normal; }

/* stickers on hover: 3 frames of stop-motion, then rest */
@keyframes stopmo {
  0% { translate: 1px -2px; rotate: calc(var(--r, 0deg) + 2.5deg); }
  33% { translate: -2px 1px; rotate: calc(var(--r, 0deg) - 1.5deg); }
  66% { translate: 1px 1px; rotate: calc(var(--r, 0deg) + 1deg); }
  100% { translate: 0 0; rotate: var(--r, 0deg); }
}
@media (hover: hover) {
  .stamp:hover, .torn:hover, .slip:hover, .wk__label:hover { animation: stopmo .36s steps(1, end) 1; }
}

/* prints lift off the table on hover, the shadow opens (from v5/b) */
.lift { position: relative; transition: translate .45s var(--ease-out); }
.lift::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: 0 44px 70px -24px color-mix(in srgb, var(--film) 55%, transparent); opacity: 0; transition: opacity .45s var(--ease-out); pointer-events: none; }
@media (hover: hover) {
  .cp:hover, .me__photo:hover .film, .plan--main:hover { translate: 0 -8px; }
  .cp:hover::before, .me__photo:hover .film::before { opacity: 1; }
}
.cp { transition: translate .45s var(--ease-out); }
.cp::before { content: ""; position: absolute; inset: 0; z-index: -1; box-shadow: 0 40px 60px -22px color-mix(in srgb, var(--film) 55%, transparent); opacity: 0; transition: opacity .45s var(--ease-out); pointer-events: none; }
.me__film { transition: translate .45s var(--ease-out); }
.plan--main { transition: translate .45s var(--ease-out); }

/* the china marker: desktop cursor, and the hand that draws in the leaks scene */
.pen { position: fixed; left: 0; top: 0; z-index: 130; width: 60px; height: 60px; pointer-events: none; opacity: 0; transition: opacity .25s; will-change: transform; }
.pen svg, .leaks__pen svg { display: block; width: 100%; height: 100%; }
.pen svg { transform-origin: 3.75px 56.25px; transition: transform .28s var(--ease-out); }
.pen.is-on { opacity: 1; }
.pen.is-link svg { transform: rotate(-14deg) scale(1.06); }
.pen.is-down svg { transform: translate(1px, -1px) scale(.92); }
.pen.is-away { opacity: 0; }
.has-pen body, .has-pen a, .has-pen button, .has-pen label, .has-pen summary { cursor: none; }
.leaks__pen { display: none; position: absolute; z-index: 8; left: 0; top: 0; width: 64px; height: 64px; pointer-events: none; opacity: 0; }
.leaks-pin .leaks__pen { display: block; }

/* ─────────────────────────── top bar ─────────────────────────── */
.top { position: absolute; z-index: 30; inset: 0 0 auto 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px var(--gutter); }
.top__nav { display: none; }
.top__cta .long { display: none; }
.top__cta .short { display: inline; }
.wordmark { min-height: 44px; }

/* ─────────────────────────── 01 · hero ─────────────────────────── */
.hero { --fh: clamp(80px, 23vw, 130px); position: relative; overflow: clip; padding: 96px var(--gutter) 0; }
.hero__edge { display: none; }
.hero__h { position: relative; z-index: 4; font-size: clamp(48px, 15.2vw, 96px); line-height: .86; letter-spacing: -.064em; font-weight: 500; color: var(--film); }
.hl { display: block; }
.hl--2 { text-indent: .86em; }
.hero__h .mark { text-indent: 0; }
.hero__mark .draw path { stroke-width: 4; }
.hero__mark > svg { left: -6%; top: -24%; width: 112%; height: 156%; }

.hero__sub { position: relative; z-index: 5; margin-top: 30px; }
.hero__label { margin: 0 0 18px 4px; }
.hero__label-tape { top: -13px; right: -26px; --r: 14deg; }
.hero__lead { max-width: 30em; font-size: 18px; line-height: 1.45; letter-spacing: -.012em; color: var(--graphite); }
.hero__lead strong { color: var(--film); }
.hero__act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin-top: 24px; }
.hero__note { position: relative; display: flex; align-items: flex-end; gap: 4px; padding: 0 0 4px; }
.hero__note .hand { font-size: 25px; rotate: -3deg; white-space: nowrap; }
.hero__note-arrow { width: 44px; height: 34px; translate: 0 -6px; rotate: -12deg; }
.motion .hero__note .hand { clip-path: inset(-60% 100% -60% 0); }
/* motion pre-states (the safety net removes .motion if the script never runs) */
.motion .hero__h { visibility: hidden; }
.motion .hero__lead, .motion .hero__act > .btn, .motion .hero__link, .motion .hero__label, .motion .hero__bill { opacity: 0; }
.hero__h .wd { white-space: nowrap; }
.hero__h .wd, .hero__h .ch { text-indent: 0; }
.hero__link { display: inline-block; margin-top: 8px; padding: 12px 0; font-size: 15px; }

.hero__reel-wrap { position: relative; z-index: 1; margin: 18px calc(var(--gutter) * -1) 0; height: calc(var(--fh) + 128px); pointer-events: none; }
.reel { position: absolute; left: -10vw; top: 50%; width: max-content; padding: 26px 8px; pointer-events: auto; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; background: var(--film); border-radius: 2px; translate: 0 -50%; rotate: -4.2deg; transform-origin: 900px 50%; box-shadow: 0 30px 50px -30px color-mix(in srgb, var(--film) 75%, transparent); }
.reel.is-grab { cursor: grabbing; }
.reel__run { display: flex; gap: 8px; width: max-content; will-change: transform; }
.motion .reel__run { transform: translateX(46vw); }
.reel::before, .reel::after { content: ""; position: absolute; left: 8px; right: 8px; height: 9px; background: color-mix(in srgb, var(--paper) 24%, transparent); -webkit-mask: var(--sprocket) repeat-x left center / 22px 9px; mask: var(--sprocket) repeat-x left center / 22px 9px; }
.reel::before { top: 8px; } .reel::after { bottom: 8px; }
.reel__f { position: relative; flex: none; height: var(--fh); aspect-ratio: 16 / 10; background: var(--night); }
.reel__f img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; -webkit-user-drag: none; pointer-events: none; }
.reel__f::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); background-size: 180px; opacity: .2; mix-blend-mode: overlay; }
.reel__n { position: absolute; left: 2px; top: -17px; font: 400 8px/1 var(--f-mono); letter-spacing: .18em; color: color-mix(in srgb, var(--marker) 85%, var(--ember)); }

.hero__bill { position: absolute; z-index: 6; right: 12px; bottom: 22px; --nw: 180px; --r: 4deg; }
.hero__bill .slip__t { font-size: 25px; line-height: 1.04; }
.slip__t2 { display: block; margin-top: 8px; font-size: .8em; color: var(--graphite); }

/* ─────────────────────────── 02 · manifesto ─────────────────────────── */
.manifesto { position: relative; z-index: 2; padding: 84px var(--gutter) 92px; }
.manifesto .fr { margin-bottom: 26px; }
.manifesto__text { max-width: 18.5em; font-size: clamp(29px, 7.6vw, 72px); line-height: 1.04; letter-spacing: -.042em; font-weight: 500; text-indent: 1em; color: var(--film); }
.manifesto__text .focus { font-weight: 400; }
.manifesto__text .w { text-indent: 0; }
.u { position: relative; white-space: nowrap; }
.u__line { position: absolute; left: -2%; bottom: -.14em; width: 104%; height: .3em; --sw: 3.2px; }

/* ─────────────────────────── 03 · leaks ─────────────────────────── */
/* phone (< 768): the sketch sticks to the top of the screen as a window; the three leak cards scroll up under it and
   the card on the reading line is the one the marker circles (js: .leaks-cam moves a camera over the sketch).
   No JS / reduced motion: the same sticky window, the whole sketch in it, every ring drawn. */
.leaks { --win: clamp(222px, 43svh, 400px); position: relative; padding: 72px var(--gutter) 48px; border-top: 1px solid var(--line-2); }
.leaks__stage { display: flex; flex-direction: column; }
.leaks__side { display: contents; }
.leaks__head { order: 1; }
.leaks__sheet { order: 2; position: sticky; top: 0; z-index: 3; margin-top: 28px; padding-top: 12px; }
.leaks__sheet::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1); background: var(--paper); }
.leaks__sheet::after { content: ""; position: absolute; z-index: 2; left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1); bottom: -28px; height: 40px; pointer-events: none; background: linear-gradient(180deg, var(--paper) 30%, transparent); }
.leaks__win { position: relative; height: var(--win); overflow: clip; }
.leaks__count { display: none; }
.leaks__list { order: 3; }
.leaks__head .h-sec { margin-top: 18px; }
.leaks__free { margin-top: 18px; max-width: 30em; color: var(--graphite); }
.leaks__cap { position: relative; z-index: 3; margin: 8px 0 0; padding-bottom: 8px; font: 400 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); }

.sk { position: relative; height: calc(var(--win) - 22px); aspect-ratio: 9 / 16; container-type: inline-size; rotate: -1.4deg; margin: 12px 0 0 max(4px, calc(50% - (var(--win) - 22px) * .34)); }
.leaks-cam .sk { position: absolute; left: 0; top: 0; height: auto; width: min(300px, 77vw); margin: 0; transform-origin: 0 0; will-change: transform; }
.leaks-cam .leaks__count { position: absolute; z-index: 3; right: 0; bottom: 8px; display: flex; align-items: baseline; gap: 6px; font: 400 11px/1 var(--f-mono); letter-spacing: .1em; color: var(--graphite); }
.leaks__count b { display: inline-block; font-weight: 400; color: var(--film); }
.leaks-cam .leaks__pen { display: block; width: 54px; height: 54px; }
/* the window's edges are soft: the sketch slides out of view under paper, never against a cut */
.leaks-cam .leaks__win::before, .leaks-cam .leaks__win::after { content: ""; position: absolute; z-index: 4; left: 0; right: 0; pointer-events: none; }
.leaks-cam .leaks__win::before { top: 0; height: 18px; background: linear-gradient(var(--paper), transparent); }
.leaks-cam .leaks__win::after { bottom: 0; height: 34px; background: linear-gradient(transparent, var(--paper)); }
.sk__page { position: absolute; inset: 0; background: var(--print); border-radius: 5.5cqw; overflow: hidden; box-shadow: inset 0 0 0 1.5px var(--film), 0 30px 60px -38px color-mix(in srgb, var(--film) 60%, transparent); }
.sk__bar { position: absolute; left: 7%; right: 7%; top: 3%; height: 4.2%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-2); }
.sk__logo { font: 600 4cqw/1 var(--f-sans); letter-spacing: .02em; text-transform: uppercase; color: var(--graphite); }
.sk__menu i { display: block; width: 5.4cqw; height: .55cqw; margin: 1cqw 0; border-radius: 1px; background: var(--graphite); }
.sk__photo { position: absolute; left: 7%; right: 7%; top: 10%; height: 25%; border-radius: 2.4cqw; overflow: hidden; color: var(--graphite); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--film) 10%, transparent) 0 1px, transparent 1px 7px), var(--silver); }
.sk__photo svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 82%; }
.sk__lab { position: absolute; left: 3.6cqw; top: 3.4cqw; padding: 1.2cqw 2cqw; border-radius: 99px; background: var(--print); font: 400 3cqw/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); }
.sk__h { position: absolute; left: 7%; right: 8%; top: 41.4%; font: 600 7.5cqw/1.03 var(--f-sans); letter-spacing: -.03em; color: var(--film); }
.sk__p { position: absolute; left: 7%; right: 7%; top: 59%; }
.sk__p i { display: block; height: 1.5cqw; margin-bottom: 2.3cqw; border-radius: 1cqw; background: color-mix(in srgb, var(--film) 12%, transparent); }
.sk__p i:nth-child(2) { width: 93%; } .sk__p i:nth-child(3) { width: 97%; } .sk__p i:nth-child(4) { width: 61%; }
.sk__btn { position: absolute; left: 7%; top: 71.5%; width: 58%; height: 6.4%; display: flex; align-items: center; justify-content: center; border-radius: 99px; background: var(--film); color: var(--paper); font: 500 4cqw/1 var(--f-sans); }
.sk__u { position: absolute; left: 9%; top: 82%; font: 700 5.5cqw/1 var(--f-sans); letter-spacing: .01em; text-transform: uppercase; color: var(--film); }
.sk__p--2 { top: 90%; }
.sk__tape--a { top: -2.5%; left: -9%; --r: -32deg; --tw: 34cqw; }
.sk__tape--b { top: -2%; right: -7%; --r: 28deg; --tw: 24cqw; }
.sk__ring { position: absolute; z-index: 3; --sw: 3.6px; }
.sk__ring--0 { left: 1%; top: 7.8%; width: 98%; height: 29.4%; }
.sk__ring--1 { left: 0%; top: 39.4%; width: 100%; height: 14.8%; }
.sk__ring--2 { left: 2%; top: 79.6%; width: 66%; height: 8.6%; }
.sk__num { position: absolute; z-index: 3; width: 20cqw; --sw: 2.8px; }
.sk__num--0 { right: -21cqw; top: 17%; rotate: 8deg; }
.sk__num--1 { right: -21cqw; top: 42%; rotate: -6deg; }
.sk__num--2 { right: 4cqw; top: 80%; rotate: 5deg; }

.lens { display: none; position: absolute; z-index: 5; left: 0; top: 0; width: 50%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--print); box-shadow: 0 0 0 9px var(--film), 0 0 0 10.5px color-mix(in srgb, var(--paper) 40%, var(--film)), 0 26px 44px -12px color-mix(in srgb, var(--film) 70%, transparent); }
.lens::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(60% 50% at 30% 22%, color-mix(in srgb, var(--print) 55%, transparent), transparent 70%); mix-blend-mode: screen; }
.lens__in { position: absolute; inset: 0; }
.lens__page { position: absolute; left: 0; top: 0; transform-origin: 0 0; container-type: inline-size; }
.lens__z { position: absolute; z-index: 2; left: 50%; bottom: 9%; translate: -50% 0; padding: 4px 7px 3px; border-radius: 99px; background: var(--film); color: var(--paper); font: 400 9px/1 var(--f-mono); letter-spacing: .12em; }

.leaks__list { margin-top: 52px; display: grid; gap: 40px; }
.leak { position: relative; max-width: 560px; padding-top: 18px; border-top: 1.5px solid var(--film); }
.leak__t { font-size: clamp(25px, 6.6vw, 38px); line-height: 1.04; letter-spacing: -.035em; font-weight: 500; display: flex; gap: 12px; align-items: baseline; }
.leak__n { flex: none; font: 400 12px/1 var(--f-mono); letter-spacing: .08em; color: var(--film); padding: 4px 6px 3px; box-shadow: inset 0 0 0 1px var(--film); border-radius: 2px; translate: 0 -.45em; transition: background-color .3s, color .3s, scale .66s var(--sp-snap, var(--ease-out)); }
.leak__fix { margin-top: 12px; font-size: 17px; line-height: 1.45; color: var(--film); }
.leak__fix b { font: 400 12px/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--graphite); margin-right: 4px; }
/* phone + tablet: each leak is a print on the table; the one being read settles flat and its number inverts */
@media (max-width: 999px) {
  .leaks__list { margin-top: 30px; gap: 18px; }
  .leak { z-index: 1; padding: 20px 18px 0; border-top: 0; border-radius: 4px; background: var(--print); box-shadow: inset 0 0 0 1px var(--line-2), 0 2px 0 var(--line), 0 28px 44px -34px color-mix(in srgb, var(--film) 75%, transparent); rotate: var(--lr, 0deg); translate: var(--lx, 0) 0; transition: rotate .73s var(--sp-soft, var(--ease-out)), translate .57s var(--sp-quick, var(--ease-out)); touch-action: pan-y; }
  .leak:nth-child(1) { --lr: -.8deg; } .leak:nth-child(2) { --lr: .9deg; } .leak:nth-child(3) { --lr: -.5deg; }
  .leak.is-on { --lr: 0deg; }
  .leak.is-on .leak__n { background: var(--film); color: var(--paper); scale: 1.08; }
  .leak.is-drag { transition: none; }
  .leak__t { font-size: clamp(24px, 6.4vw, 34px); }
  .leak__fix { font-size: 16.5px; }
  .leak .disc { margin: 14px -18px 0; border-top: 1px dashed var(--line-2); }
  .leak .disc__btn { width: 100%; justify-content: space-between; min-height: 50px; padding: 13px 18px; }
  .leak .disc__in p { padding: 0 18px 16px; }
  .leaks-cam .leaks__list { gap: max(64px, calc(var(--zone, 300px) * .3)); padding-bottom: 8px; }
}

/* disclosure (the detail that opens). In motion the script opens it: the lines rise one by one and whatever sits
   below slides down on a spring (transforms only); here it only switches */
.disc { margin-top: 6px; }
.disc__btn { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 0; border: 0; background: none; color: var(--film); cursor: pointer; font: 400 12px/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; }
.disc__ico { position: relative; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; flex: none; }
.disc__ico::before, .disc__ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.5px; margin: -.75px 0 0 -4.5px; background: currentColor; transition: rotate .45s var(--ease-out), opacity .3s; }
.disc__ico::after { rotate: 90deg; }
.disc__btn[aria-expanded="true"] .disc__ico::after { rotate: 0deg; opacity: 0; }
/* the leak's icon: the whole disc turns over on a spring while the upright folds away */
.leak .disc__ico { transition: rotate .66s var(--sp-snap, var(--ease-out)), scale 1.06s var(--sp-bouncy, var(--ease-out)); }
.leak .disc__ico::after { transition: scale .5s var(--sp-firm, var(--ease-out)), opacity .3s; }
.leak .disc__btn[aria-expanded="true"] .disc__ico { rotate: 180deg; }
.leak .disc__btn[aria-expanded="true"] .disc__ico::after { rotate: 90deg; scale: 0 1; }
@media (hover: hover) { .disc__btn:hover { text-decoration: underline; text-underline-offset: .3em; } }
.disc__panel { display: grid; grid-template-rows: 1fr; }
.disc__in { overflow: hidden; min-height: 0; }
.disc__in p { padding: 2px 0 8px; max-width: 34em; color: var(--graphite); }
.disc.is-closed .disc__panel { grid-template-rows: 0fr; }

/* ─────────────────────────── 04 · how it works ─────────────────────────── */
/* round 5: section 04 is the clock (.hw) in css/r5-p.css + js/r5-p.js; only .how and .how__head below still match */
.how { padding: 76px var(--gutter) 72px; border-top: 1px solid var(--line-2); }
.how__head .h-sec { margin-top: 18px; }
.steps { margin-top: 52px; display: grid; gap: 0; }
.step { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 14px; align-items: start; padding-bottom: 50px; }
.step:last-child { padding-bottom: 0; }
.step__num { grid-row: 1 / span 2; }
.step__digits { width: 78px; height: auto; color: var(--film); --sw: 3px; }
.step__t { padding-top: 12px; font-size: clamp(21px, 5.6vw, 30px); line-height: 1.12; letter-spacing: -.03em; font-weight: 500; }
.step__k { font: 400 13px/1 var(--f-mono); letter-spacing: .06em; color: var(--graphite); vertical-align: .2em; }
.step__arrow { position: absolute; color: var(--film); --sw: 2.2px; }
.step__arrow--h { display: none; }
.step__arrow--v { left: 22px; top: 70px; width: 26px; height: 66px; }
.how__stamps { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; margin-top: 60px; }
.how__st { --ss: 116px; }
.how__st--2 { margin-top: 26px; margin-left: -8px; }
.how__st--3 { margin-left: -6px; }
/* phone: the three stamps get a table of their own, scattered, big enough to read the ring text */
@media (max-width: 767px) {
  .step { padding-bottom: 44px; }
  .step__num { will-change: rotate; } /* the numbers lean with the scroll on their own layer (no repaint of the wax filter) */
  .how__stamps { display: block; height: 282px; margin-top: 48px; }
  .how__st { position: absolute; --ss: min(134px, 36vw); will-change: transform; } /* own layer: the ink filter rasters once, the thud and the drift only move it */
  .how__st--1 { left: 0; top: 0; }
  .how__st--2 { right: 2%; top: 38px; margin: 0; }
  .how__st--3 { left: 27%; top: 138px; margin: 0; }
}

/* 05 · audiences: round 5, css/r5-q.css */

/* ─────────────────────────── 06 · work ─────────────────────────── */
.work { position: relative; padding: 84px 0 80px; }
.work__pin { display: flex; flex-direction: column; gap: 34px; }
.work__intro { padding: 0 var(--gutter); max-width: 980px; }
.work__stage { position: relative; }
.work__h { margin-top: 18px; }
.work__lead { margin-top: 20px; max-width: 30em; font-size: 17px; line-height: 1.45; color: var(--graphite); }
.work__swipe { width: 70px; height: 32px; margin-top: 18px; color: var(--film); --sw: 2px; }

/* phone: a contained swipe strip, never a page scroll */
.work__reel { display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: 16px var(--gutter) 22px; align-items: flex-start; scrollbar-width: thin; scrollbar-color: var(--graphite) transparent; -webkit-overflow-scrolling: touch; }
.work__reel:focus-visible { outline-offset: -4px; }
.wk { position: relative; flex: 0 0 min(86vw, 420px); scroll-snap-align: start; min-width: 0; }
.wk__band { position: relative; padding: 28px 8px; background: var(--film); border-radius: 2px; }
.wk__band::before, .wk__band::after { content: ""; position: absolute; left: 8px; right: 8px; height: 9px; background: color-mix(in srgb, var(--paper) 22%, transparent); -webkit-mask: var(--sprocket) repeat-x left center / 22px 9px; mask: var(--sprocket) repeat-x left center / 22px 9px; }
.wk__band::before { top: 7px; } .wk__band::after { bottom: 7px; }
.wk__code { position: absolute; top: 17px; left: 12px; right: 12px; display: flex; justify-content: space-between; gap: 8px; font: 400 8px/1 var(--f-mono); letter-spacing: .16em; color: color-mix(in srgb, var(--marker) 85%, var(--ember)); white-space: nowrap; overflow: hidden; }
.wk__f { position: relative; display: none; overflow: hidden; aspect-ratio: var(--ar, 16 / 10); background: var(--night); }
.wk__f--m { display: block; }
.wk__f img, .wk__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wk__f::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: var(--grain); background-size: 200px; opacity: .14; mix-blend-mode: overlay; }
.wk__f--video { background: #0f2a1f; }
@media (max-width: 767px) { .wk__f--video { --ar: 9 / 16 !important; width: 64%; margin: 0 auto; } }
.wk__n { font: 400 var(--t-meta)/1 var(--f-mono); letter-spacing: .12em; color: var(--graphite); margin-bottom: 10px; }
.wk--main .wk__band { background: color-mix(in srgb, var(--film) 94%, var(--night)); }
.vid__btn { position: absolute; z-index: 3; right: 8px; bottom: 8px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--film) 72%, transparent); color: var(--paper); cursor: pointer; }
.vid__btn::before { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 14px; translate: -40% -50%; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.vid__btn[aria-pressed="true"]::before { width: 12px; translate: -50% -50%; clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0); }
.wk__more { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.wk__more .wk__f { display: block; aspect-ratio: 16 / 10; }
.wk__more .wk__f--tall { aspect-ratio: 390 / 844; }
.wk__more[hidden] { display: none; }

.wk__cap { padding: 18px 2px 0; }
.wk__name { font-size: clamp(25px, 6.4vw, 40px); line-height: 1; letter-spacing: -.04em; font-weight: 500; }
.wk__who { margin-top: 6px; font-size: 14px; color: var(--graphite); }
.wk__label { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 7px 11px 6px; border-radius: 99px; background: var(--film); color: var(--paper); font: 400 10px/1.2 var(--f-mono); letter-spacing: .08em; }
.wk__label::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--marker); flex: none; }
.wk__label--line { background: transparent; color: var(--film); box-shadow: inset 0 0 0 1.5px var(--film); }
.wk__label--line::before { background: var(--film); }
.wk__line { margin-top: 12px; font-size: 16px; line-height: 1.45; color: var(--film); }
.wk__meta { margin-top: 6px; font-size: 14px; color: var(--graphite); }
.wk__links { margin-top: 6px; font-size: 15px; }
.wk__links .tlink { display: inline-block; padding: 12px 0; }
.wk__open { margin-top: 4px; }
.wk__tape { top: -12px; left: var(--x, 12%); }

/* concepts: four prints taped on paper */
.wk__band--paper { background: color-mix(in srgb, var(--silver) 70%, var(--print)); }
.wk__band--paper::before, .wk__band--paper::after { display: none; }
.wk__band--paper .wk__code { color: var(--graphite); }
.wk__f--sheet { background: transparent; overflow: visible; }
.wk__f--sheet::after { display: none; }
.collage { position: absolute; inset: 4% 3%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 9% 6%; }
.cp__img { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--night); }
.cp__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp { position: relative; align-self: center; margin: 0; rotate: var(--r, 0deg); background: var(--print); padding: 4px; box-shadow: 0 10px 18px -12px color-mix(in srgb, var(--film) 60%, transparent); }
.cp--1 { --r: -3deg; } .cp--2 { --r: 2.5deg; } .cp--3 { --r: 1.5deg; } .cp--4 { --r: -2deg; }
.cp__tape, .wk__f img.cp__tape { position: absolute; inset: auto; top: -8px; left: 30%; width: var(--tw); height: auto; object-fit: fill; --tw: 44px; --r: -8deg; }
.cp--2 .cp__tape, .cp--2 img.cp__tape { left: 50%; --r: 10deg; }

.work__group { flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; padding: 0 2px; font: 400 var(--t-meta)/1 var(--f-mono); letter-spacing: .18em; color: var(--graphite); writing-mode: vertical-rl; rotate: 180deg; }
.work__nav { display: flex; align-items: center; gap: 12px; padding: 0 var(--gutter); margin-top: 6px; }
.work__navb { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--print); color: var(--film); box-shadow: inset 0 0 0 1.5px var(--film); font: 500 18px/1 var(--f-sans); cursor: pointer; }
.work__navb:hover { background: var(--film); color: var(--paper); }
.work__count { font: 400 12px/1 var(--f-mono); letter-spacing: .1em; color: var(--graphite); }
.work__count b { font-weight: 400; color: var(--film); }
.work__sheet { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 70px var(--gutter) 30px; background: color-mix(in srgb, var(--film) 92%, transparent); }
.work__sheet[hidden] { display: none; }
.work__sheet-x { position: absolute; top: 18px; right: var(--gutter); }
.work__sheet-in { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; max-width: 1200px; max-height: 100%; overflow: auto; }
.work__sheet-in .wk__f { display: block; flex: none; width: min(34vw, 420px); aspect-ratio: 16 / 10; border: 6px solid var(--print); }
.work__sheet-in .wk__f--tall { width: auto; height: min(56vh, 460px); aspect-ratio: 390 / 844; }
.work__end { padding: 0 var(--gutter); }
.work__end-code { margin-bottom: 16px; font: 400 var(--t-meta)/1 var(--f-mono); letter-spacing: .18em; color: var(--graphite); }

/* the photographer's loupe (desktop cursor over the strip) */
.loupe { position: fixed; z-index: 70; left: 0; top: 0; width: 230px; height: 230px; margin: -115px 0 0 -115px; border-radius: 50%; overflow: hidden; pointer-events: none; opacity: 0; scale: .55; background: var(--night); transition: opacity .28s var(--ease-out), scale .45s var(--ease-out); box-shadow: 0 0 0 10px var(--film), 0 0 0 11.5px color-mix(in srgb, var(--paper) 75%, var(--film)), 0 30px 60px -16px rgba(0, 0, 0, .55); }
.loupe.is-on { opacity: 1; scale: 1; }
.loupe__img { position: absolute; inset: 0; background-repeat: no-repeat; }
.loupe::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(55% 45% at 30% 24%, rgba(255, 255, 255, .22), transparent 70%); }
.loupe__z { position: absolute; z-index: 2; left: 50%; bottom: 12px; translate: -50% 0; padding: 4px 7px 3px; border-radius: 99px; background: var(--film); color: var(--paper); font: 400 9px/1 var(--f-mono); letter-spacing: .12em; }

/* ─────────────────────────── 07 · show-first (the only darkroom) ─────────────────────────── */
.show { padding: 84px var(--gutter); }
.show__burn { top: -10%; right: -40%; height: 120%; }
.show__pin { position: relative; z-index: 2; display: grid; gap: 30px; }
.show__h { position: relative; z-index: 3; font-size: clamp(44px, 12.4vw, 128px); line-height: .9; letter-spacing: -.058em; font-weight: 500; color: var(--paper); }
.show__a, .show__b { display: block; }
.show__b { padding-left: .8em; }
.show__stage { position: relative; margin: 26px 8px; }
.show__chrome { position: absolute; inset: -26px -8px; z-index: 0; background: var(--film); border-radius: 3px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--paper) 10%, transparent); }
.show__chrome::before, .show__chrome::after { content: ""; position: absolute; left: 8px; right: 8px; height: 9px; background: color-mix(in srgb, var(--paper) 26%, transparent); -webkit-mask: var(--sprocket) repeat-x left center / 22px 9px; mask: var(--sprocket) repeat-x left center / 22px 9px; }
.show__chrome::before { top: 7px; } .show__chrome::after { bottom: 7px; }
.show__code { position: absolute; top: 17px; left: 12px; right: 12px; display: flex; justify-content: space-between; font: 400 8px/1 var(--f-mono); letter-spacing: .18em; color: color-mix(in srgb, var(--marker) 85%, var(--ember)); }
.show__win { position: relative; z-index: 1; aspect-ratio: 16 / 10; overflow: hidden; background: var(--night); }
.show__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.show__win::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: var(--grain); background-size: 220px; opacity: .14; mix-blend-mode: overlay; }
.show__dev { position: absolute; inset: 0; z-index: 3; background: var(--print); opacity: 0; }
.show__foot { position: relative; z-index: 4; display: grid; gap: 22px; }
.show__text { max-width: 30em; font-size: 18px; line-height: 1.45; color: color-mix(in srgb, var(--paper) 82%, var(--film)); }
.show__stamps { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; }
.show__st { --ss: 104px; }

/* ─────────────────────────── 08 · me ─────────────────────────── */
.me { padding: 88px var(--gutter) 96px; }
.me__h { margin-top: 18px; }
.me__p { margin-top: 24px; max-width: 30em; font-size: 18px; line-height: 1.5; color: var(--graphite); }
.strike { position: relative; white-space: nowrap; color: var(--film); }
.strike__line { position: absolute; left: -4%; top: 18%; width: 108%; height: 62%; --sw: 2px; }

.me__board { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 10px; align-items: start; margin-top: 50px; }
.me__photo { grid-column: 1 / -1; position: relative; justify-self: center; width: min(72vw, 330px); }
.me__film { --tilt: -2.2deg; padding: 28px 10px; }
.me__film::before { top: 7px; } .me__film::after { bottom: 7px; }
.me__film .film__code { top: 17px; left: 12px; right: 12px; font-size: 8px; }
.me__film .film__img { --ar: 3 / 4; }
.me__img { filter: contrast(1.06) brightness(.98); object-position: 50% 30%; }
.me__film .burn { --burn-o: .42; }
.dev { position: absolute; inset: 0; z-index: 4; background: var(--print); opacity: 0; pointer-events: none; }
.me__cap { position: absolute; right: -6px; bottom: -34px; font-size: 30px; rotate: -4deg; }
.me__tape { top: -12px; right: 18%; --r: 9deg; }
.me__card { grid-column: 1 / -1; margin: 26px 6px 0; --r: -1.5deg; }
.me__card .slip__paper { padding: 30px 20px 18px; }
.me__facts li { position: relative; padding: 10px 0 10px 38px; font-size: 16px; line-height: 1.35; color: var(--film); }
.me__facts li + li { border-top: 1px dashed var(--line-2); }
.me__tick { position: absolute; left: 2px; top: 12px; width: 24px; height: 19px; --sw: 2.4px; }
.me__clock { position: relative; justify-self: center; }
.me__st { --ss: 132px; }
.me__st--2 { justify-self: center; margin-top: 18px; }
.me__st--3 { grid-column: 1 / -1; justify-self: center; margin-top: -14px; }
.clock { position: absolute; left: 25%; top: 25%; width: 50%; height: 50%; overflow: visible; }
.clock__face { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--film); --sw: 1.8px; }
.clock__hand path { fill: none; stroke: var(--film); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.clock__hand--m path { stroke: var(--marker); stroke-width: 1.8; }
.clock__hand { transform-box: view-box; transform-origin: 60px 62px; transition: rotate .8s var(--ease-out); }
.clock__pin { fill: var(--film); }

/* ─────────────────────────── 09 · price ─────────────────────────── */
/* round 4: the blueline proof lives in css/r4-close.css */

/* ─────────────────────────── 10 · faq ─────────────────────────── */
.faq { padding: 88px var(--gutter) 90px; border-top: 1px solid var(--line-2); }
.faq__h { margin-top: 18px; font-size: clamp(36px, 9.6vw, 74px); }
.faq__list { margin-top: 44px; border-top: 1.5px solid var(--film); }
.qa { border-bottom: 1px solid var(--line-2); }
.qa__h { font: inherit; }
.qa__btn { width: 100%; min-height: 64px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 26px; gap: 10px; align-items: start; padding: 20px 0; border: 0; background: none; color: var(--film); text-align: left; cursor: pointer; font: 500 clamp(18px, 4.8vw, 23px)/1.25 var(--f-sans); letter-spacing: -.02em; }
.qa__n { padding-top: .45em; font: 400 11px/1 var(--f-mono); letter-spacing: .08em; color: var(--graphite); }
.qa__ico { position: relative; isolation: isolate; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--film); transition: rotate .66s var(--sp-snap, var(--ease-out)), scale 1.06s var(--sp-bouncy, var(--ease-out)); }
.qa__ico::before, .qa__ico::after { content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -.75px 0 0 -5px; background: var(--film); transition: scale .5s var(--sp-firm, var(--ease-out)), opacity .3s, background-color .25s; }
.qa__ico::after { rotate: 90deg; }
.qa.is-on .qa__ico { rotate: 180deg; }
.qa.is-on .qa__ico::after { scale: 0 1; opacity: 0; }
.qa__dot { position: absolute; inset: 0; z-index: 0; border-radius: 50%; background: var(--film); scale: 0; transition: scale .57s var(--sp-quick, var(--ease-out)); }
.qa.is-on .qa__dot { scale: 1; }
.qa.is-on .qa__ico::before { background: var(--paper); }
@media (hover: hover) { .qa__btn:hover .qa__q { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; } }
.qa__a { display: grid; grid-template-rows: 1fr; }
.qa__in { overflow: hidden; min-height: 0; }
.qa__in p { padding: 0 0 22px 54px; max-width: 40em; color: var(--graphite); }
.faq-js .qa:not(.is-open) .qa__a { grid-template-rows: 0fr; }
/* the open question is a print lifted off the list: a card, its number circled in marker, the others step back */
.faq-js .qa { position: relative; background: var(--paper); box-shadow: -12px 0 0 var(--paper), 12px 0 0 var(--paper); }
.faq-js .qa::before { content: ""; position: absolute; z-index: 0; inset: -1px -12px 0; border-radius: 4px; background: var(--print); box-shadow: inset 0 0 0 1px var(--line-2), 0 26px 42px -32px color-mix(in srgb, var(--film) 70%, transparent); opacity: 0; scale: 1 .9; transition: opacity .3s var(--ease-out), scale .73s var(--sp-soft, var(--ease-out)); pointer-events: none; }
.faq-js .qa.is-on::before { opacity: 1; scale: 1 1; }
.faq-js .qa > * { position: relative; z-index: 1; }
.faq-js .qa__q { transition: opacity .4s var(--ease-out); }
.faq-js.has-open .qa:not(.is-open) .qa__q { opacity: .62; }
.qa__n { position: relative; }
.qa__ring { position: absolute; left: -9px; top: calc(.45em - 8px); width: 50px; height: 27px; overflow: visible; pointer-events: none; color: var(--marker); opacity: 0; transition: opacity .2s; }
.qa.is-on .qa__ring { opacity: 1; }
/* touch: the press is felt on the icon, not as a grey flash */
.qa__btn, .disc__btn { -webkit-tap-highlight-color: transparent; }
.qa__btn:active .qa__ico, .leak .disc__btn:active .disc__ico { scale: .84; transition: rotate .66s var(--sp-snap, var(--ease-out)), scale .12s ease-out; }
.qa__ring path { fill: none; stroke: currentColor; stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: url(#wax-l); }
.qa.is-on .qa__n { color: var(--film); }

/* ─────────────────────────── 11 · send ─────────────────────────── */
/* round 4: the lab envelope and the film-strip timeline live in css/r4-close.css */

/* ─────────────────────────── footer ─────────────────────────── */
/* round 4: the pixel wordmark on the band of cold light lives in css/r4-close.css */

/* ─────────────────────────── fixed chrome ─────────────────────────── */
.counter { display: none; }
.dock { position: fixed; z-index: 55; right: 12px; top: 12px; opacity: 0; translate: 0 -18px; pointer-events: none; transition: opacity .5s var(--ease-out), translate .6s var(--ease-out), box-shadow var(--d-fast); }
.dock.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }
@media (max-width: 999px) { .dock { top: auto; bottom: 14px; right: 14px; translate: 0 18px; } }
.is-static .counter, .is-static .dock { display: none; }

/* ═════════════════════════ ≥ 430 ═════════════════════════ */
@media (min-width: 430px) {
  .top__cta .long { display: inline; }
  .top__cta .short { display: none; }
}

/* ═════════════════════════ ≥ 768 · tablet ═════════════════════════ */
@media (min-width: 768px) {
  .hero { padding-top: 110px; --fh: clamp(100px, 16vw, 150px); }
  .hero__sub { max-width: 560px; margin-left: 30%; margin-top: 36px; }
  .hero__bill { right: 5vw; --nw: 200px; }
  .manifesto { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; }
  .manifesto .fr { grid-column: 1 / span 3; margin: .9em 0 0; }
  .manifesto__text { grid-column: 3 / -1; text-indent: 1.5em; }

  /* tablet: the sketch sticks in the left column, the leak cards scroll past in the right one */
  .leaks { --skw: min(300px, calc((100vw - 2 * var(--gutter) - 32px) / 2.5)); --win: calc(var(--skw) * 16 / 9 + 56px); }
  .leaks__stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .leaks__head { grid-column: 1 / -1; grid-row: 1; }
  .leaks__sheet { grid-column: 1; grid-row: 2; top: 10svh; margin-top: 44px; padding-top: 0; }
  .leaks__sheet::before, .leaks__sheet::after { display: none; }
  .leaks__list { grid-column: 2; grid-row: 2; margin-top: 44px; gap: 26px; }
  .leaks-cam .sk { width: var(--skw); }
  .leaks-cam .leaks__list { gap: 30svh; padding-bottom: 22svh; }
  .leak__t { font-size: 28px; }

  .steps { grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .step { padding-bottom: 44px; }
  .step__arrow--v { display: none; }
  .how__stamps { justify-content: flex-start; margin-left: 30%; }


  .wk { flex-basis: min(62vw, 520px); }

  .show__h { font-size: clamp(56px, 9vw, 128px); }
  .show__b { text-align: right; padding-left: 0; }
  .show__foot { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }

  .me__board { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .me__photo { grid-column: 1 / span 6; justify-self: start; width: 100%; max-width: 340px; grid-row: 1 / span 2; }
  .me__card { grid-column: 7 / -1; margin-top: 30px; }
  .me__clock { grid-column: 7 / span 3; }
  .me__st--2 { grid-column: 10 / span 3; }
  .me__st--3 { grid-column: 7 / -1; }

  .faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; }
  .faq__side { grid-column: 1 / -1; }
  .faq__list { grid-column: 3 / -1; }

}

/* ═════════════════════════ ≥ 861 · nav ═════════════════════════ */
@media (min-width: 861px) {
  .top { padding-top: 22px; padding-bottom: 22px; }
  .top__nav { display: flex; gap: clamp(18px, 2.2vw, 34px); font: 400 var(--t-meta)/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; }
  .top__nav a { color: var(--graphite); text-decoration: none; padding: 14px 0; }
  .top__nav a:hover { color: var(--film); }
}

/* ═════════════════════════ ≥ 1000 · desktop ═════════════════════════ */
@media (min-width: 1000px) {
  .counter { position: fixed; z-index: 50; left: 14px; bottom: 18px; display: flex; align-items: center; gap: 10px; writing-mode: vertical-rl; rotate: 180deg; pointer-events: none; color: #fff; mix-blend-mode: difference; font: 400 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; opacity: 0; transition: opacity .5s var(--ease-out); }
  .counter.is-on { opacity: 1; }
  .counter__n { padding: 6px 4px 5px; box-shadow: inset 0 0 0 1px currentColor; border-radius: 2px; }
  .dock { right: 16px; top: 16px; }

  /* hero: the composition Fernando approved */
  .hero { --hs: clamp(56px, 10.2vw, 186px); --fh: clamp(88px, 12.4vw, 184px); min-height: max(100svh, 860px); padding: clamp(104px, 12vh, 140px) var(--gutter) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto; column-gap: 16px; }
  .is-static .hero, .is-reduced .hero { min-height: 0; }
  .hero__edge { position: absolute; left: 12px; top: 50%; translate: 0 -50%; writing-mode: vertical-rl; rotate: 180deg; display: flex; gap: 28px; font: 400 9.5px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--graphite); white-space: nowrap; }
  .hero__edge span:first-child { color: var(--film); }
  .hero__h { grid-column: 1 / -1; grid-row: 1; font-size: var(--hs); line-height: .84; }
  .hl--2 { text-indent: 1.02em; }
  .hero__mark .draw path { stroke-width: 5.5; }
  .hero__sub { grid-column: 1 / -1; grid-row: 2; max-width: min(470px, 33vw); margin: calc(var(--hs) * -.62) 0 0 calc(var(--hs) * 2.92); }
  .hero__label { margin-bottom: 16px; }
  .hero__lead { font-size: var(--t-lead); }
  .hero__reel-wrap { grid-column: 1 / -1; grid-row: 4; height: calc(var(--fh) + 170px); margin-top: 0; }
  .reel { left: -8vw; padding: 30px 10px; }
  .reel__run { gap: 10px; }
  .reel::before, .reel::after { height: 10px; -webkit-mask-size: 24px 10px; mask-size: 24px 10px; }
  .reel__n { top: -19px; font-size: 8.5px; }
  .hero__bill { position: relative; right: auto; bottom: auto; grid-column: 10 / span 3; grid-row: 2 / 4; align-self: end; justify-self: end; margin: 0 2vw calc(var(--fh) * -.35) 0; --nw: min(290px, 21vw); --r: 5deg; }
  .hero__bill .slip__t { font-size: clamp(26px, 2.1vw, 32px); }

  /* leaks: sheet left, text right */
  .leaks__stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; align-items: start; }
  .leaks__side { display: block; grid-column: 7 / -1; }
  .leaks__sheet { grid-column: 2 / span 4; grid-row: 1; margin-top: 0; position: sticky; top: 8vh; }
  .leaks__win { display: contents; }
  .leaks__cap { margin: 22px 0 0 6px; }
  .sk { width: 100%; height: auto; margin: 0 0 0 2px; }
  .leaks__list { grid-template-columns: 1fr; gap: 36px; margin-top: 44px; }
  .leak__t { font-size: clamp(26px, 2.5vw, 38px); }

  .how__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; }
  .how__head .fr { grid-column: 1 / -1; }
  .how__h { grid-column: 1 / span 9; }
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); margin-top: 90px; }
  .step { display: block; padding-bottom: 0; }
  .step:nth-child(2) { margin-top: 56px; } .step:nth-child(3) { margin-top: 20px; } .step:nth-child(4) { margin-top: 76px; }
  .step__digits { width: 104px; }
  .step__t { padding-top: 18px; max-width: 12em; font-size: clamp(22px, 2vw, 30px); }
  .step__arrow--h { display: block; left: 58%; top: 4px; width: clamp(90px, 9vw, 150px); height: auto; }
  .step:nth-child(2) .step__arrow--h { top: -24px; }
  .step:nth-child(3) .step__arrow--h { top: 30px; }
  .how__stamps { margin: 80px 0 0 auto; width: max-content; }
  .how__st { --ss: 138px; }

  .work { padding: 110px 0; }
  .wk { flex-basis: min(46vw, 560px); }

  .show { padding: 130px var(--gutter); }

  .me { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; align-items: start; padding: 130px var(--gutter); }
  .me__body { grid-column: 7 / -1; grid-row: 1; padding-top: 40px; }
  .me__board { grid-column: 1 / span 6; grid-row: 1; margin-top: 0; min-height: 720px; display: block; }
  .me__photo { position: absolute; z-index: 6; left: 4%; top: 0; width: min(360px, 26vw); max-width: none; }
  .me__card { position: absolute; left: max(34%, 172px); top: calc((min(360px, 26vw) - 20px) * 1.333 + 112px); width: min(330px, 24vw); margin: 0; --r: -2deg; z-index: 5; }
  .me__clock { position: absolute; left: 60%; top: 30px; }
  .me__st--2 { position: absolute; left: 66%; top: 250px; margin: 0; }
  .me__st--3 { position: absolute; left: 0; top: calc((min(360px, 26vw) - 20px) * 1.333 + 128px); margin: 0; }
  .me__st { --ss: 150px; }
  .me__h { font-size: clamp(48px, 5.4vw, 92px); }
  .me__p { font-size: var(--t-lead); }

  .faq { padding: 130px var(--gutter); align-items: start; }
  .faq__side { grid-column: 1 / span 5; position: sticky; top: 10vh; }
  .faq__list { grid-column: 7 / -1; margin-top: 0; }
  .qa__btn { grid-template-columns: 58px minmax(0, 1fr) 26px; gap: 12px; padding: 22px 0; }
  .qa__in p { padding-left: 70px; }

}

/* ─────── desktop · pinned scenes (added by JS: .leaks-pin, .show-pin) ─────── */
.leaks-pin.leaks { padding: 0 var(--gutter); }
.leaks-pin .leaks__stage { height: 100vh; align-items: center; }
.leaks-pin .leaks__sheet { position: relative; top: 0; display: flex; flex-direction: column; align-items: flex-start; }
.leaks-pin .sk { width: auto; }
.leaks-pin .leaks__sheet { display: block; padding-left: 64px; grid-column: 1 / span 6; }
.leaks-pin .sk { height: var(--skh, min(72vh, 720px)); }
.leaks-pin .sk__num { width: 50px; right: auto; left: -62px; }
.leaks-pin .sk__num--0 { top: 16%; } .leaks-pin .sk__num--1 { top: 42%; } .leaks-pin .sk__num--2 { top: 79%; }
.leaks-pin .lens { display: block; width: var(--lw, 190px); left: 0; top: 0; }
.lens__lead { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 4; }
.leaks-pin .lens__lead { display: block; }
.lens__lead path { fill: none; stroke: var(--film); stroke-width: 1.2; stroke-dasharray: 3 5; stroke-linecap: round; }
.leaks-pin .leaks__side { padding-left: 12px; }
.leaks-pin .leaks__head .h-sec { font-size: clamp(40px, 4.5vw, 76px); }
.leaks-pin .leaks__count { display: flex; align-items: baseline; gap: 8px; margin-top: 34px; font: 400 12px/1 var(--f-mono); letter-spacing: .1em; color: var(--graphite); }
.leaks-pin .leaks__count b { font-weight: 400; color: var(--film); }
.leaks-pin .leaks__list { margin-top: 16px; display: grid; gap: 0; }
.leaks-pin .leak { grid-area: 1 / 1; border-top: 0; padding-top: 0; }
@media (max-height: 820px) {
  .leaks-pin .leaks__head .h-sec { font-size: clamp(36px, 3.9vw, 60px); }
  .leaks-pin .leaks__count { margin-top: 20px; }
}

.work.is-looking .wk__f { cursor: none; }

.show-pin.show { padding: 0; }
.show-pin .show__pin { display: block; height: 100vh; }
.show-pin .show__fr { position: absolute; z-index: 5; top: 28px; left: var(--gutter); }
.show-pin .show__stage { position: absolute; inset: 0; margin: 0; }
.show-pin .show__win { position: absolute; inset: 0; aspect-ratio: auto; will-change: clip-path; }
.show-pin .show__chrome { inset: auto; left: 50%; top: 50%; translate: -50% -50%; }
.show-pin .show__h { position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); top: 50%; translate: 0 -50%; pointer-events: none; mix-blend-mode: difference; font-size: clamp(56px, 7.4vw, 136px); }
.show-pin .show__a { margin-bottom: calc(var(--fh, 300px) + 40px); translate: 0 18%; }
.show-pin .show__b { translate: 0 -18%; }
.show-pin .show__foot { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; padding: 140px var(--gutter) 30px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--film) 90%, transparent) 55%); }

/* ─────── desktop · the roll of film (added by JS: .work-drum) ─────── */
.work-drum.work { padding: 0; }
.work-drum .work__pin { display: block; position: relative; height: 100vh; overflow: hidden; }
.work-drum .work__intro { position: absolute; z-index: 20; left: var(--gutter); top: 9vh; max-width: min(1100px, 76vw); padding: 0; }
.work-drum .work__intro .h-sec { font-size: clamp(38px, 3.9vw, 70px); }
.work-drum .work__lead { margin-top: 12px; }
.work-drum .work__swipe { display: none; }
.work-drum .work__stage { position: absolute; inset: 0; }
.work-drum .work__reel { position: absolute; inset: 0; display: block; overflow: visible; padding: 0; scroll-snap-type: none; }
.work-drum .wk { position: static; }
.work-drum .wk__band { position: absolute; left: var(--dx); top: var(--dy); width: var(--bw); height: var(--bh); padding: 30px 14px; border-radius: 2px; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-origin: 50% 50%; will-change: transform; }
.work-drum .wk__band > .wk__f--m { display: block; width: 100%; height: 100%; aspect-ratio: auto; margin: 0; }
.work-drum .wk__band > .wk__f:not(.wk__f--m), .work-drum .wk__band > .wk__more, .work-drum .work__group { display: none; }
.work-drum .wk__cap { position: absolute; left: calc(var(--dx) + var(--bw)); top: var(--dy); width: var(--cw); min-height: var(--bh); padding: 30px 28px 26px; display: flex; flex-direction: column; align-items: flex-start; background: var(--print); box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 60px -34px color-mix(in srgb, var(--film) 60%, transparent); transform-origin: 0 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; visibility: hidden; z-index: 300; }
.work-drum .wk__cap.is-front { visibility: visible; }
.work-drum .wk__cap .wk__open { margin-top: auto; }
.work-drum .wk__name { font-size: clamp(26px, 2.3vw, 38px); }
.work-drum .wk__line { font-size: 15.5px; }
.work-drum .work__nav { position: absolute; z-index: 310; left: var(--dx); top: calc(var(--dy) + var(--bh) + 22px); padding: 0; margin: 0; }
.work-drum .work__end { position: absolute; z-index: 20; right: var(--gutter); bottom: 5vh; display: flex; align-items: center; gap: 18px; }
.work-drum .work__end-code { margin: 0; }
.work-drum .loupe { z-index: 400; }

/* ─────── nothing stands still: slow drift, breathing, orbit (runs only while its section is on screen) ─────── */
@keyframes drift {
  0% { translate: 0 0; rotate: var(--r, 0deg); }
  33% { translate: var(--dxa, 2px) var(--dya, -3px); rotate: calc(var(--r, 0deg) + var(--dra, .6deg)); }
  66% { translate: calc(var(--dxa, 2px) * -.6) var(--dyb, 2px); rotate: calc(var(--r, 0deg) - var(--drb, .45deg)); }
  100% { translate: 0 0; rotate: var(--r, 0deg); }
}
.motion-ready [data-drift] { animation: drift var(--dd, 7s) ease-in-out var(--ddl, 0s) infinite; animation-play-state: paused; }
.motion-ready .is-live [data-drift] { animation-play-state: running; }
@media (hover: hover) { .motion-ready .stamp[data-drift]:hover, .motion-ready .slip[data-drift]:hover { animation: stopmo .36s steps(1, end) 1; } }

/* ─────── reduced motion / static: nothing moves ─────── */
@media (prefers-reduced-motion: reduce) {
  .stamp:hover, .torn:hover, .slip:hover, .wk__label:hover, [data-drift] { animation: none !important; }
}