/* ============================================================================
   Latent · homepage + platform page
   Built from Figma "website-for-claude" (P3TpoHqKoiynhdfppu43N2, 9 Sep 2026)
   and the Basement explorations build (mined in brand/mine-2026-09-09/).
   Loads after brand-v2/assets/fonts.css and consumes the shared brand-v2 tokens.
   No em dashes anywhere. Values are px at the 1920 design frame unless noted.
   ========================================================================= */

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: dark; }
.ltv2-drawer { color-scheme: light; }
html, body { margin: 0; }
body {
  font-family: var(--v2-font-body);
  font-weight: var(--v2-weight);
  color: var(--v2-off-white);
  background: var(--v2-onyx);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  font-synthesis-weight: none;
}
h1, h2, h3, h4, p, ul, figure, blockquote { margin: 0; }
h1, h2, h3, h4, h5, h6, b, strong { font-weight: var(--v2-weight); }
ul { padding: 0; list-style: none; }
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--v2-mauve); outline-offset: 3px; }
::selection { background: var(--v2-mauve); color: var(--v2-onyx); }
.ltv2-btn:active, .ltv2-cta:active { transform: translateY(1px); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------------------------------------------------------------- reveal */
/* One-shot, gated by data-reveal (IntersectionObserver adds .is-in on the host). */
[data-reveal] { --rp: paused; }
[data-reveal].is-in { --rp: running; }
.rv {
  animation: reveal-blur var(--rd, .5s) var(--v2-ease-out) var(--rdl, 0s) both;
  animation-play-state: var(--rp, running);
}
@keyframes reveal-blur {
  0% { filter: blur(var(--rb, .25em)); opacity: 0; transform: translateY(var(--ry, 0)); }
  100% { filter: blur(0); opacity: var(--rto, 1); transform: translateY(0); }
}
/* ink bleed line (goo) */
@property --goo-blur { syntax: "<length>"; inherits: false; initial-value: 50px; }
@keyframes goo-in { 0% { --goo-blur: var(--goo-from, .78em); } 100% { --goo-blur: 0px; } }
@keyframes goo-settle { 100% { filter: none; } }
.goo {
  display: block;
  opacity: 0;
  animation: goo-in 1.2s var(--v2-ease-out) var(--gd, 0s) both, goo-settle 0s linear calc(var(--gd, 0s) + 1.2s) forwards;
  animation-play-state: var(--rp, running);
}
/* The filter is applied only once the host reveals: WebKit paints a paused
   blur() + url() filter as a blank rectangle at the top of the page. */
[data-reveal].is-in .goo {
  opacity: 1;
  filter: blur(var(--goo-blur)) url(#goo);
}
/* phones: the headline rises like the copy instead of the 1.2s ink bleed, so it is readable before the lede under it */
@media (max-width: 640px) {
  @keyframes goo-rise {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  .goo, [data-reveal].is-in .goo { filter: none; animation: goo-rise .5s var(--v2-ease-out) var(--gd, 0s) both; animation-play-state: var(--rp, running); }
}
@media (prefers-reduced-motion: reduce) {
  .rv { animation: reveal-fade .3s ease both; }
  @keyframes reveal-fade { from { opacity: 0; } to { opacity: var(--rto, 1); } }
  .goo, [data-reveal].is-in .goo { filter: none; animation: none; }
}

/* ============================================================== SECTIONS */
.section { position: relative; width: 100%; overflow: clip; }
.ltv2-field { position: relative; }

/* ============================================================== TYPE */
.hero__copy {
  position: absolute;
  left: 0;
  top: 130px;
  width: min(906px, 52vw);
  display: flex;
  flex-direction: column;
  gap: 24px;
  z-index: 5;
}
.hero__h1 {
  font-size: var(--v2-h1);
  line-height: var(--v2-h1-lh);
  letter-spacing: var(--v2-tracking-h1);
  color: var(--v2-off-white);
}
.hero__line { display: block; }
.hero__h1 .grad { display: inline-block; }
.hero__sub {
  font-size: var(--v2-p1);
  line-height: var(--v2-p1-lh);
  letter-spacing: var(--v2-tracking-display);
  color: var(--v2-dusk);
  max-width: 594px;
}
.h2 {
  font-size: var(--v2-s1);
  line-height: var(--v2-s1-lh);
  letter-spacing: var(--v2-tracking-display);
  color: var(--v2-onyx);
}
.on-dark .h2,
.outcomes .h2,
.prefooter .h2 { color: var(--v2-off-white); }
.grad { color: var(--v2-mauve); }
.mission .grad,
.manifesto .grad,
.quote .grad { color: var(--v2-slate-blue); }
.ltv2-eyebrow--paper { color: var(--v2-white-smoke); }
.ltv2-eyebrow--grey,
.ltv2-eyebrow--taupe { color: var(--v2-taupe); }
.ltv2-eyebrow--warm { color: var(--v2-taupe); }

/* ============================================================== HERO */
.ltv2-nav.ltv2-nav--on-dark { border-bottom: var(--v2-rule-dark); }
.hero { background: var(--v2-onyx); color: var(--v2-off-white); min-height: 1000px; height: max(100vh, 800px); max-height: 1100px; }
.hero .ltv2-field { height: 100%; }
/* bokeh discs: absolute, sized from Figma, slowly orbiting */
.hero__disc { position: absolute; pointer-events: none; will-change: transform; opacity: .225; }
.hero__disc img { width: 100%; height: 100%; }

/* the viewfinder stage: 4:5 frame at (50% + 12px, 121px), sized to clear the marquee */
.hero__stage {
  --hw: min(600px, 36vw, calc((100% - 12px) / 2 - var(--v2-grid-margin)));
  position: absolute; left: calc(50% + 12px + var(--hw) * .1); top: 121px;
  width: calc(var(--hw) * .9);
  z-index: 4;
}

/* partner marquee: every logo sits the same distance from its neighbours, whatever its shape.
   The track holds four copies of the set and slides one set per cycle; --marquee-start
   (set by page.js) places the lead logo at the centre on land. */
.marquee {
  position: absolute; left: 0; right: 0; bottom: 13px; height: 70px; z-index: 3;
  overflow: hidden; opacity: .5; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--v2-onyx) 12%, var(--v2-onyx) 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, var(--v2-onyx) 12%, var(--v2-onyx) 88%, transparent 100%);
}
.marquee__track { display: flex; height: 100%; width: max-content; transform: translate3d(var(--marquee-start, 0px), 0, 0); animation: marquee 48s linear infinite; }
.marquee__set { display: flex; align-items: center; height: 100%; }
.marquee__set > * { flex: none; padding-inline: 30px; height: 53.79px; display: grid; place-items: center; }
.marquee__track img { width: auto; }
.marquee__track img.marquee__raster { filter: brightness(0) invert(1); }
@keyframes marquee { to { transform: translate3d(calc(var(--marquee-start, 0px) - 25%), 0, 0); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ============================================================== MISSION */
/* The section pins for four spans of scroll, one per chapter; the reader's scroll is the clock. */
.mission { background: var(--v2-off-white); color: var(--v2-onyx); --mission-travel: 90vh; --mission-pad: clamp(48px, 7vh, 96px); }
.mission__scroll { position: relative; height: calc(100vh + 4 * var(--mission-travel)); height: calc(100svh + 4 * var(--mission-travel)); }
.mission__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }
.mission__frame {
  height: 100%; max-width: var(--v2-field-max); margin-inline: auto; padding: var(--mission-pad) var(--v2-grid-margin);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 5vw, 96px); align-items: center;
}
.mission__copy { display: flex; flex-direction: column; gap: 24px; max-width: 520px; }
.mission__copy .h2 { font-size: var(--v2-s1); line-height: var(--v2-s1-lh); letter-spacing: var(--v2-tracking-display); }
.mission__lede { font-size: var(--v2-p1); line-height: var(--v2-p1-lh); letter-spacing: var(--v2-tracking-display); color: var(--v2-taupe); opacity: .7; max-width: 520px; }

/* the step index: four rows in the platform's order, a mono brow naming the step and the verb line carrying it, the open one inked, a hairline that fills with the chapter */
.steps { list-style: none; margin: clamp(24px, 4vh, 48px) 0 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--v2-platinum); }
.step__btn {
  position: relative; display: grid; grid-template-columns: 2.4em minmax(0, 1fr); grid-template-areas: "n name" "n line"; column-gap: 8px; row-gap: 4px;
  width: 100%; padding: 14px 0 16px; border: 0; border-bottom: 1px solid var(--v2-platinum); background: none; text-align: left; cursor: pointer;
  font: inherit; letter-spacing: var(--v2-tracking-display); color: var(--v2-dusk); transition: color .4s var(--v2-ease-out);
}
.step__btn:hover { color: var(--v2-taupe); }
.step__btn:focus-visible { outline: 2px solid var(--v2-slate-blue); outline-offset: 2px; }
.step__n { grid-area: n; align-self: start; font-family: var(--v2-font-mono); font-size: var(--v2-mono-l2); line-height: var(--v2-mono-l2-lh); letter-spacing: var(--v2-tracking-mono); }
.step__name { grid-area: name; font-family: var(--v2-font-mono); font-size: var(--v2-mono-l2); line-height: var(--v2-mono-l2-lh); letter-spacing: var(--v2-tracking-mono); text-transform: uppercase; }
.step__line { grid-area: line; font-size: var(--v2-s3); line-height: var(--v2-s3-lh); }
.step__prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--v2-slate-blue); transform-origin: left; transform: scaleX(var(--p, 0)); }
.step.on .step__btn, .step.on .step__btn:hover { color: var(--v2-onyx); }

/* the stage: one container, sized to the column or the viewport height, whichever binds */
.mission__right {
  position: relative; isolation: isolate;
  justify-self: end; width: min(100%, calc((100vh - 2 * var(--mission-pad)) * 908 / 795)); width: min(100%, calc((100svh - 2 * var(--mission-pad)) * 908 / 795));
  aspect-ratio: 908 / 795; container-type: inline-size;
}
/* two sheets of trace paper under the stage, fanned to the bottom right; translucent grey so each one back reads a shade darker */
.mission__right::before, .mission__right::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 1.888px; pointer-events: none;
  box-shadow: 0 0 0 .5px rgba(19,18,21,.07), 0 .5px 1px rgba(0,0,0,.05);
}
.mission__right::before { background: rgba(19,18,21,.055); transform: translate(1cqw, .7cqw) rotate(.45deg); }
.mission__right::after { background: rgba(19,18,21,.085); transform: translate(2cqw, 1.5cqw) rotate(.95deg); }
.mission__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 908 / 795;
  container-type: inline-size;
  isolation: isolate;
  overflow: clip;
  background: #ebebeb;
  border-radius: 1.888px;
  box-shadow: 0 .796px 3.183px rgba(0,0,0,.25), inset 0 0 1.592px .796px rgba(255,255,255,.2);
  --backing-paper: #ebebeb;
  --backing-ink: #131215;
  --backing-muted: #808080;
}
.plate {
  position: absolute;
  left: 2.79cqw;
  right: 2.79cqw;
  top: 2.79cqw;
  height: 75.3cqw;
  z-index: 1;
}
.plate__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  transition: opacity .8s cubic-bezier(.22, 1, .36, 1);
}
.mission__stage[data-chapter="0"] .plate__canvas[data-canvas="0"],
.mission__stage[data-chapter="1"] .plate__canvas[data-canvas="1"],
.mission__stage[data-chapter="2"] .plate__canvas[data-canvas="2"],
.mission__stage[data-chapter="3"] .plate__canvas[data-canvas="3"] {
  opacity: 1;
  z-index: 0;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .mission .plate__canvas { transition: none; }
}

.mission .backing {
  position: absolute;
  inset: 0;
  --u: calc(100cqw / 908);
  pointer-events: none;
  overflow: clip;
  border-radius: inherit;
  color: var(--backing-ink);
  font-family: var(--v2-font-mono);
  z-index: 0;
}

.mission .backing__grid {
  position: absolute;
  left: calc(var(--u) * 25.32);
  top: calc(var(--u) * 25.32);
  width: calc(var(--u) * 857.36);
  height: calc(var(--u) * 683.77);
  opacity: var(--grid-static, 1);
  transition: none;
}

.mission .backing__axes {
  position: absolute;
  color: var(--backing-muted);
  font-size: calc(var(--u) * 13.761);
  line-height: 1.2;
  letter-spacing: calc(var(--u) * -.2752);
  text-transform: uppercase;
}

.mission .backing__axis-title {
  position: absolute;
  top: calc(var(--u) * 340.35);
  color: var(--backing-muted);
  font-size: calc(var(--u) * 13.761);
  line-height: 1.2;
  letter-spacing: calc(var(--u) * -.2752);
  text-transform: uppercase;
  white-space: nowrap;
}

.mission .backing__axis-title--left {
  left: calc(var(--u) * 45);
  transform: translate(-50%, -50%) rotate(-90deg);
}

.mission .backing__axis-title--right {
  left: calc(var(--u) * 879);
  transform: translate(-50%, -50%) rotate(90deg);
}

.mission .backing__x-axis {
  left: calc(var(--u) * 25.32);
  top: calc(var(--u) * 658.43);
  width: calc(var(--u) * 770);
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  text-align: center;
}

.mission .backing__y-axis {
  left: calc(var(--u) * 73.32);
  top: calc(var(--u) * 46.12);
  height: calc(var(--u) * 465.6);
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  justify-items: end;
  align-items: center;
  text-align: right;
}

.mission .backing__readout {
  position: absolute;
  left: calc(var(--u) * 205.05);
  top: calc(var(--u) * 91.31);
  display: flex;
  flex-direction: column;
  color: #aeaeae;
  font-size: calc(var(--u) * 8);
  line-height: 1.3;
  gap: calc(var(--u) * 2.37);
  white-space: pre;
}

.mission .backing__readout span {
  white-space: pre;
}

.mission .backing__footer {
  position: absolute;
  left: calc(var(--u) * 25.32);
  top: calc(var(--u) * 741.09);
  width: calc(var(--u) * 857);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.mission .backing__mark {
  width: calc(var(--u) * 26.5137);
  height: calc(var(--u) * 29.0249);
  overflow: visible;
}

.mission .backing__dot {
  fill: #000;
}

.mission .backing__grain {
  position: absolute;
  inset: 0;
  opacity: .05;
  mix-blend-mode: difference;
  background: url("assets/mission/grain.jpg") center / cover no-repeat;
  z-index: 2;
}
/* Grain lifts a touch where the pointer is; --lift / --lift-x / --lift-y come from mission.js. */
.mission .backing::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/mission/grain.jpg") center / cover no-repeat;
  mix-blend-mode: screen;
  opacity: calc(var(--lift, 0) * .08);
  z-index: 2;
  -webkit-mask-image: radial-gradient(circle 22cqw at var(--lift-x, -100cqw) var(--lift-y, -100cqw), #000, transparent);
  mask-image: radial-gradient(circle 22cqw at var(--lift-x, -100cqw) var(--lift-y, -100cqw), #000, transparent);
}


@media (max-height: 760px) and (min-width: 1101px) {
  .mission__copy { gap: 16px; }
  .mission__copy .h2 { font-size: var(--v2-s2); line-height: var(--v2-s2-lh); }
  .steps { margin-top: 16px; }
  .step__btn { padding: 10px 0 12px; }
}

/* below 1100 the frame stacks: eyebrow, title, lede, plate, step row, button; still pinned, still scroll-clocked */
@media (max-width: 1100px) {
  .mission { --mission-pad: 20px; }
  .mission__frame { grid-template-columns: minmax(0, 1fr); align-content: center; row-gap: 16px; padding-block: max(20px, calc(var(--v2-nav-height, 64px) + 8px)) 20px; }
  .mission__copy { display: contents; }
  .mission__eyebrow { order: 1; }
  .mission__copy .h2 { order: 2; font-size: var(--v2-s2); line-height: var(--v2-s2-lh); }
  .mission__lede { order: 3; font-size: var(--v2-p2); line-height: var(--v2-p2-lh); max-width: none; }
  .mission__right { order: 4; justify-self: center; width: min(100%, calc((100svh - 390px) * 908 / 795)); }
  .steps { order: 5; margin: 0; flex-direction: row; gap: 8px; border-top: 0; }
  .step { flex: 1 1 0; min-width: 0; }
  .step__btn { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name"; padding: 10px 0 10px; }
  .step__n, .step__line { display: none; }
  .step__name { font-family: inherit; font-size: 15px; line-height: inherit; letter-spacing: inherit; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mission__cta { order: 6; }
}
@media (prefers-reduced-motion: reduce) {
  .mission__scroll { height: auto; }
  .mission__sticky { position: relative; height: auto; }
  .mission__frame { min-height: 100vh; min-height: 100svh; }
}

@media (max-width: 1100px) {
  .hero__copy { position: relative; left: auto; top: auto; width: auto; padding-top: 120px; }
  .hero { height: auto; min-height: 0; padding-bottom: 120px; }
  .hero__stage { position: relative; left: auto; top: auto; width: min(100%, 440px); margin: 40px auto 0; }
}

/* ============================================================== OUTCOMES */
.outcomes { background: var(--v2-onyx); color: var(--v2-off-white); padding: 60px 0 100px; }
.outcomes .ltv2-field { display: grid; grid-template-columns: minmax(0, 754fr) minmax(0, 940fr); gap: 153px; align-items: start; }
.outcomes__lead { display: flex; flex-direction: column; gap: 24px; }
.outcomes__lead .h2 { max-width: 754px; }
.outcomes__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; padding-left: 26px; }
.ocard {
  display: block; position: relative; container-type: inline-size; aspect-ratio: 442.01 / 500; border-radius: var(--v2-radius-xs); overflow: hidden;
  background: var(--v2-onyx); transition: background-color .5s cubic-bezier(0,0,.2,1);
}
.ocard::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: var(--grain-160); background-size: 160px; mix-blend-mode: screen; opacity: 0; transition: opacity .5s cubic-bezier(0,0,.2,1); pointer-events: none; }
.ocard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px #333333; pointer-events: none; }
.ocard__in { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 5.43cqw; gap: 5.43cqw; }
.ocard__top { display: flex; flex-direction: column; gap: 16.289cqw; }
.ocard .ltv2-eyebrow { font-size: 3.62cqw; line-height: 1.1875; color: var(--v2-white-smoke); gap: 2.715cqw; }
.ocard .ltv2-eyebrow::before { width: 1.584cqw; height: 1.584cqw; }
.ocard__num { font-size: var(--v2-h1); line-height: var(--v2-h1-lh); letter-spacing: var(--v2-tracking-h1); color: var(--v2-mauve); white-space: nowrap; }
.ocard__bottom { display: flex; flex: 1; flex-direction: column; justify-content: space-between; }
.ocard__copy { font-size: var(--v2-p1); line-height: var(--v2-p1-lh); letter-spacing: var(--v2-tracking-display); color: var(--v2-white-smoke); opacity: .8; }
.ocard__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 3.62cqw; }
.ocard__logo { height: 11.764cqw; width: auto; }
.ocard__arrow { width: 3.62cqw; height: 3.62cqw; opacity: 0; transform: translateX(-8%); transition: opacity .5s cubic-bezier(0,0,.2,1), transform .5s cubic-bezier(0,0,.2,1); }
@media (hover: hover) and (pointer: fine) {
  .ocard:hover { background: #191919; }
  .ocard:hover::before { opacity: .16; }
  .ocard:hover .ocard__arrow { opacity: 1; transform: none; }
}
.ocard:focus-visible .ocard__arrow { opacity: 1; transform: none; }
/* the violet halftone eye, hue-mapped, radially masked, drifting under the pointer */
/* the dither veil: a WebGL halftone plate over the black, uncovered by the cursor's wake (veil.js) */
.dveil { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.dveil canvas { display: block; width: 100%; height: 100%; }
.dveil--off { display: none; }
.outcomes .ltv2-field, .prefooter__in { position: relative; z-index: 2; }
@media (max-width: 1100px) {
  .outcomes .ltv2-field { grid-template-columns: 1fr; gap: 48px; }
  .outcomes__grid { padding-left: 0; }
}
@media (max-width: 640px) { .outcomes__grid { grid-template-columns: 1fr; } }

/* odometer */
.odo { display: inline-flex; align-items: flex-start; filter: blur(0); }
.odo .w { display: inline-block; height: 1em; overflow: hidden; line-height: 1; white-space: pre;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, var(--v2-onyx) var(--rf, 0%), var(--v2-onyx) calc(100% - var(--rf, 0%)), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, var(--v2-onyx) var(--rf, 0%), var(--v2-onyx) calc(100% - var(--rf, 0%)), transparent 100%); }
.odo .strip { display: block; font-variant-numeric: tabular-nums; will-change: transform; }
.odo .strip span { display: block; height: 1em; line-height: 1; text-align: center; }

/* ============================================================== VIDEO */
.videosec { background: var(--v2-onyx); padding: 0; }
.film { position: relative; width: 100%; aspect-ratio: 1840 / 1035; max-height: 100vh; max-height: 100svh; overflow: hidden; background: var(--v2-deep-black); cursor: pointer; }
.film__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--v2-ease-out); }
.film__bg { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--v2-ease-out); pointer-events: none; }
.film__bg mux-player { position: absolute; inset: 0; width: 100%; height: 100%; --media-object-fit: cover; --controls: none; pointer-events: none; }
.film.is-live .film__bg { opacity: 1; }
.film__h { position: absolute; left: 0; right: 0; margin-inline: auto; top: 38.6%; width: min(1130px, 80%); text-align: center; z-index: 3; font-size: var(--v2-s1); line-height: var(--v2-s1-lh); letter-spacing: var(--v2-tracking-display); color: var(--v2-off-white); }
/* the whole film is the invitation: click anywhere to enter with sound */
.film__watch { position: absolute; inset: 0; z-index: 4; cursor: pointer; background: none; border: 0; padding: 0; }
.film__watch:focus-visible { outline: 2px solid var(--v2-mauve); outline-offset: -4px; }
/* cursor viewfinder, the ChangeMakers hero watch tag verbatim: corner brackets with a play glyph, label riding above */
.film__tag { position: fixed; z-index: 9100; left: var(--x, 50vw); top: var(--y, 50vh); display: none; pointer-events: none; }
.film__tagframe {
  --wc: color-mix(in srgb, var(--v2-off-white) 92%, transparent);
  position: absolute; left: 0; top: 0; width: 84px; aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(.82); opacity: 0;
  transition: transform 340ms var(--v2-ease-out), opacity 260ms ease;
  background:
    linear-gradient(var(--wc), var(--wc)) left 0 top 0 / 16px 1px,
    linear-gradient(var(--wc), var(--wc)) left 0 top 0 / 1px 16px,
    linear-gradient(var(--wc), var(--wc)) right 0 top 0 / 16px 1px,
    linear-gradient(var(--wc), var(--wc)) right 0 top 0 / 1px 16px,
    linear-gradient(var(--wc), var(--wc)) left 0 bottom 0 / 16px 1px,
    linear-gradient(var(--wc), var(--wc)) left 0 bottom 0 / 1px 16px,
    linear-gradient(var(--wc), var(--wc)) right 0 bottom 0 / 16px 1px,
    linear-gradient(var(--wc), var(--wc)) right 0 bottom 0 / 1px 16px;
  background-repeat: no-repeat;
}
.film__tagframe::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-40%, -50%); width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid var(--wc); }
.film .film__taglabel { position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-42px - 100% - 1px)); background: var(--v2-off-white); color: var(--v2-onyx); padding: 3px 9px; white-space: nowrap; font-family: var(--v2-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: 0; transition: opacity 260ms ease 80ms; }
@media (hover: hover) and (pointer: fine) {
  .film:hover .film__still { transform: scale(1.0); }
  .film__tag { display: block; }
  .film:hover .film__tagframe { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .film:active .film__tagframe { transform: translate(-50%, -50%) scale(.9); transition-duration: 140ms; }
  .film:hover .film__taglabel { opacity: 1; }
  .film:hover { cursor: none; }
}
@media (prefers-reduced-motion: reduce) { .film__tagframe, .film .film__taglabel { transition: opacity 200ms ease; } }

/* ============================================================== QUOTE */
.quote { background: var(--v2-platinum); color: var(--v2-onyx); padding: 60px 0; }
.quote .ltv2-field { touch-action: pan-y; }
/* slides share one grid cell so the section holds the height of the longest quote */
.quote__slides { display: grid; }
.quote__text { grid-area: 1 / 1; padding: 40px 40px 0; display: flex; flex-direction: column; gap: 56px; opacity: 0; visibility: hidden; transform: translateY(10px); filter: blur(.08em); transition: opacity .3s var(--v2-ease-out), transform .3s var(--v2-ease-out), filter .3s var(--v2-ease-out), visibility 0s .3s; }
.quote__text.is-active { opacity: 1; visibility: visible; transform: none; filter: none; transition-delay: .1s, .1s, .1s, 0s; }
.quote__nav { display: flex; align-items: center; padding: 0 30px; margin-top: 32px; }
.quote__dot { width: 28px; height: 44px; display: grid; place-items: center; }
.quote__dot .ltv2-dot { background: var(--v2-taupe); opacity: .28; transition: width .4s var(--v2-ease-out), height .4s var(--v2-ease-out), opacity .4s var(--v2-ease-out), background-color .4s var(--v2-ease-out); }
.quote__dot:hover .ltv2-dot { opacity: .6; }
.quote__dot[aria-selected="true"] .ltv2-dot { width: var(--v2-dot-size-lg); height: var(--v2-dot-size-lg); background: var(--v2-slate-blue); opacity: 1; }
.quote__dot:focus-visible { outline: none; }
.quote__dot:focus-visible .ltv2-dot { outline: 2px solid var(--v2-mauve); outline-offset: 3px; }
.quote__q { font-size: var(--v2-s1); line-height: var(--v2-s1-lh); letter-spacing: var(--v2-tracking-display); max-width: 1100px; }
.quote__attr { display: flex; align-items: center; gap: 20px; font-size: var(--v2-attrib); line-height: var(--v2-attrib-lh); letter-spacing: var(--v2-tracking-display); color: var(--v2-taupe); opacity: .8; white-space: pre-line; }
.quote__pic { flex: none; width: 72px; height: 90px; border-radius: var(--v2-radius-xs); overflow: hidden; background: linear-gradient(180deg, var(--v2-white-smoke) 0%, var(--v2-light-lavender) 55%, var(--v2-pale) 100%); box-shadow: inset 0 0 0 1px rgba(114, 98, 183, .16); }
.quote__pic img { display: block; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .quote__text, .quote__dot .ltv2-dot { transition: none; } }
@media (max-width: 1100px) {
  .quote__text { padding: 0; gap: 40px; }
  .quote__nav { padding: 0; margin-top: 24px; }
}

/* ============================================================== NETWORK */
/* pinned frame; network.js draws the field on the canvas and keeps .is-on on the line for the current beat.
   --vp is the viewport height; network.js pins it to a pixel value so the track keeps its length
   while a phone browser's toolbars hide and show (a live vh would shift everything below the section) */
.network { background: var(--v2-onyx); color: var(--v2-off-white); --vp: 100vh; --network-travel: calc(2.5 * var(--vp)); }
@supports (height: 100svh) { .network { --vp: 100svh; } }
.network__scroll { position: relative; height: calc(var(--vp) + var(--network-travel)); }
.network__sticky { position: sticky; top: 0; height: var(--vp); overflow: clip; }
.network__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.network__frame { position: relative; height: 100%; display: flex; align-items: center; pointer-events: none; }
.network__copy { display: grid; width: 11em; max-width: 30%; font-size: var(--v2-s1); line-height: var(--v2-s1-lh); letter-spacing: var(--v2-tracking-display); }
.network__line { grid-area: 1 / 1; margin: 0; font: inherit; opacity: 0; transform: translateY(.3em); filter: blur(.12em); transition: opacity .7s var(--v2-ease-out), transform .7s var(--v2-ease-out), filter .7s var(--v2-ease-out); }
.network__line.is-on { opacity: 1; transform: none; filter: none; }
@media (max-width: 1100px) {
  .network { --network-travel: calc(2.2 * var(--vp)); }
  .network__frame { display: block; padding-top: calc(var(--v2-nav-height) + clamp(40px, .07 * var(--vp), 80px)); }
  .network__copy { width: auto; max-width: none; font-size: clamp(22px, 6vw, 34px); }
}
@media (prefers-reduced-motion: reduce) {
  .network__scroll { height: auto; }
  .network__sticky { position: relative; height: auto; min-height: var(--vp); }
  .network__frame { min-height: var(--vp); }
  .network__copy { gap: .6em; }
  .network__line { grid-area: auto; transition: none; }
  .network__line + .network__line { color: var(--v2-dusk); }
}

/* ============================================================== MANIFESTO */
.manifesto { background: linear-gradient(180deg, var(--v2-off-white) 48.535%, var(--v2-platinum) 100%); color: var(--v2-onyx); }
.manifesto__stage { position: relative; max-width: var(--v2-field-max); margin-inline: auto; height: clamp(520px, 42.76vw, 821px); container-type: inline-size; overflow: clip; isolation: isolate; }
.manifesto__head { position: absolute; left: var(--v2-grid-margin); top: 5.85cqw; width: 41.7cqw; display: flex; flex-direction: column; gap: 24px; z-index: 12; }
.manifesto__fan { position: absolute; inset: 0; container-type: inline-size; }
.fan { position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h); will-change: transform; transform-origin: 50% 50%; }
.fan__in { position: absolute; inset: 0; transform: rotate(var(--rot)); }
.fan__cap, .manifesto__pos { display: none; }
.paper { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--stock, var(--v2-off-white)); border-radius: var(--v2-radius-xs); container-type: inline-size;
  box-shadow: inset 0 0 1.454px .727px rgba(255,255,255,.2), inset 0 0 29px rgba(0,0,0,.15); }
.paper::before { content: ""; position: absolute; inset: 0; background-image: none; background-size: cover; mix-blend-mode: multiply; opacity: .45; pointer-events: none; }
.paper::after { content: ""; position: absolute; inset: 0; background-image: var(--grain-160); background-size: 140px; mix-blend-mode: multiply; opacity: .3; pointer-events: none; }
.paper > * { position: absolute; }
.paper--v2-border-on-lighted { border: 1px solid var(--v2-platinum); }
a.fan:focus-visible { outline: none; }
a.fan:focus-visible .paper { outline: 1px solid var(--v2-mauve); outline-offset: -1px; }
.fan__in { transition: transform var(--v2-dur-base) var(--v2-ease-out); }
@media (hover: hover) { a.fan:hover .fan__in { transform: rotate(var(--rot)) translateY(-4px); } }
.paper__title { color: var(--v2-onyx); line-height: 1; letter-spacing: -.03em; white-space: pre-line; }
.paper__sub { color: var(--v2-taupe); line-height: 1.1; text-transform: capitalize; }
.paper__lbl { font-family: var(--v2-font-mono); line-height: 1.1; text-transform: uppercase; white-space: nowrap; }
.paper__chart { max-width: none; }
.fan--sticker .paper { background: rgba(188,191,211,.8); -webkit-backdrop-filter: blur(1.1px); backdrop-filter: blur(1.1px); box-shadow: 0 1.4px 4.2px rgba(0,0,0,.2); }
.fan--sticker .paper::before, .fan--sticker .paper::after { display: none; }
.fan--sticker2 .paper { background: rgba(188,191,211,.51); -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); box-shadow: 0 1.28px 3.85px rgba(0,0,0,.2); }
.fan--sticker2 .paper::before, .fan--sticker2 .paper::after { display: none; }
.fan--v2-taupe .paper { box-shadow: 4px 1.28px 5.84px rgba(0,0,0,.24); }
.fan--clip img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.fan.rise { animation: fan-rise .85s var(--v2-ease-out) var(--fd, .1s) both; animation-play-state: var(--rp, running); }
@keyframes fan-rise { 0% { opacity: 0; transform: translateY(26px); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fan.rise { animation: fan-fade .3s ease both; } @keyframes fan-fade { from { opacity: 0; } to { opacity: 1; } } }

/* ============================================================== PREFOOTER */
/* the black rides up over the lower third of the manifesto fan, so the papers tuck behind it */
.prefooter { position: relative; z-index: 3; margin-top: calc(-1 * clamp(170px, 13.9vw, 267px)); background: var(--v2-onyx); color: var(--v2-off-white); min-height: 628px; display: grid; place-items: center; padding: 120px 0; }
.prefooter__in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; }
.prefooter__mark { width: 77.3px; height: 84.8px; }
.prefooter__mark svg { width: 100%; height: 100%; overflow: visible; fill: var(--v2-slate-blue); }
.prefooter__copy { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.prefooter .h2 { max-width: 702px; color: var(--v2-off-white); }

/* ============================================================== ADDENDA */
/* hero discs: centred on their Figma point, rotation carried as --r */
.hero__discs { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.hero__disc { left: var(--x); top: var(--y); transform: translate(-50%, -50%) rotate(var(--r, 123.86deg)); }
.hero__disc img { width: 100%; height: auto; }
.scan__label, .scan__axis, .rec__name, .dots__url, .film__taglabel,
.paper__lbl {
  font-family: var(--v2-font-mono);
  font-size: var(--v2-mono-l2);
  letter-spacing: var(--v2-tracking-mono);
}

/* odometer mask fade, registered so WAAPI can interpolate it */
@property --rf { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

/* ============================================================== HERO VIEWFINDER (Ben's cut, 2026-09-08-home-hero-brandv2) */
.hero { --vf-ink: rgba(250, 250, 250, 0.92); --vf-ink-2: rgba(250, 250, 250, 0.55); --vf-line: rgba(250, 250, 250, 0.22); }
.cine { --vf-ink: rgba(250, 250, 250, 0.92); --vf-ink-2: rgba(250, 250, 250, 0.55); --vf-line: rgba(250, 250, 250, 0.22); }
/* Viewfinder ---------------------------------------------------------------- */
.hero__figure { position: relative; display: flex; justify-content: flex-end; }
.vf {
  --cx: 0px;
  --cy: 0px;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--v2-onyx);
  color: var(--v2-off-white);
  cursor: pointer;
  overflow: clip;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.vf:focus-visible { outline: 1px solid var(--v2-accent); outline-offset: 6px; }
.vf__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--v2-onyx);
}
.vf__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vf__still[hidden] { display: none; }
.vf__chrome { position: absolute; inset: 0; pointer-events: none; }

/* Corner brackets, 1px, 18px legs. --push moves them outward when the frame lets go. */
.vf__reg, .cine__reg {
  --push: 0px;
  --inset: 12px;
  position: absolute;
  width: 18px;
  height: 18px;
  opacity: 0.54;
  transition: transform var(--v2-dur-slow) var(--v2-ease-out), opacity var(--v2-dur-slow) var(--v2-ease-out);
}
.vf__reg::before, .vf__reg::after, .cine__reg::before, .cine__reg::after {
  content: "";
  position: absolute;
  background: var(--vf-ink);
}
.vf__reg::before, .cine__reg::before { top: 0; left: 0; width: 100%; height: 1px; }
.vf__reg::after, .cine__reg::after { top: 0; left: 0; width: 1px; height: 100%; }
.vf__reg--tl { top: var(--inset); left: var(--inset); transform: translate(calc(-1 * var(--push)), calc(-1 * var(--push))); }
.vf__reg--tr { top: var(--inset); right: var(--inset); transform: scaleX(-1) translate(calc(-1 * var(--push)), calc(-1 * var(--push))); }
.vf__reg--bl { bottom: var(--inset); left: var(--inset); transform: scaleY(-1) translate(calc(-1 * var(--push)), calc(-1 * var(--push))); }
.vf__reg--br { bottom: var(--inset); right: var(--inset); transform: scale(-1) translate(calc(-1 * var(--push)), calc(-1 * var(--push))); }
.vf.is-dark .vf__reg { --push: 0px; opacity: 0.54; }

/* A held frame (reduced motion, data saver, autoplay refused) reads as a film still, not a target:
   the crosshair goes, the brackets and the timecode of the held frame stay, and the poster pushes in very slowly. */
.vf.is-still .vf__cross { opacity: 0; transition: opacity var(--v2-dur-base) var(--v2-ease-out); }
@media (prefers-reduced-motion: no-preference) {
  .vf.is-still .vf__video { animation: vf-drift 14s var(--v2-ease-inout) infinite alternate; }
}
@keyframes vf-drift { from { transform: scale(1); } to { transform: scale(1.06); } }

/* Dashed crosshair through the frame with a small register square at the centre.
   It re-seats on every cut while the instrument is searching and stays on screen while the loop
   plays; with a mouse over the frame it follows the pointer instead. */
.vf__cross {
  position: absolute;
  inset: 0;
  transform: translate(var(--cx), var(--cy));
  transition: transform var(--v2-dur-fast) var(--v2-ease-out);
}
.vf.is-aim .vf__cross { transition: none; }
.vf__coord {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1.9em 0 0 14px;
  color: var(--vf-ink);
  font-variant-numeric: tabular-nums;
  white-space: pre;
  opacity: 0;
  transition: opacity var(--v2-dur-base) var(--v2-ease-out);
}
.vf.is-aim .vf__coord { opacity: .85; }
.vf__cross i, .vf__cross b { position: absolute; display: block; }
/* lines overshoot the frame so they still meet all four edges wherever the crosshair travels (.vf clips) */
.vf__cross i:first-child { top: 50%; left: -100%; right: -100%; height: 0; border-top: 1px dashed var(--vf-line); }
.vf__cross i:nth-child(2) { left: 50%; top: -100%; bottom: -100%; width: 0; border-left: 1px dashed var(--vf-line); }
.vf__cross b {
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 1px solid var(--vf-ink-2);
  background: var(--v2-onyx);
  transition: width var(--v2-dur-base) var(--v2-ease-out), height var(--v2-dur-base) var(--v2-ease-out), margin var(--v2-dur-base) var(--v2-ease-out);
}
/* the register square is where the cursor lands, so under a pointer it grows and shows the play glyph */
.vf__cross b::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 5px solid var(--vf-ink);
  transform: translate(-35%, -50%) scale(0);
  opacity: 0;
  transition: transform var(--v2-dur-base) var(--v2-ease-out), opacity var(--v2-dur-base) var(--v2-ease-out);
}
.vf.is-on .vf__cross b { width: 18px; height: 18px; margin: -9px 0 0 -9px; border-color: var(--vf-ink); }
.vf.is-on .vf__cross b::after { transform: translate(-35%, -50%) scale(1); opacity: 1; }

/* Source timecode of the cut on screen. */
.vf__read {
  position: absolute;
  top: 14px;
  left: 40px;
  color: var(--vf-ink);
  font-variant-numeric: tabular-nums;
  opacity: .6;
  transition: opacity var(--v2-dur-base) var(--v2-ease-out);
}
.vf.is-dark .vf__read { opacity: 0; }

/* Audio state, top-right, the same weight as the timecode. Idle it reads MUTE over a flat meter;
   under a pointer the meter comes alive and the label rolls to SOUND ON CLICK. */
.vf__snd {
  position: absolute;
  top: 14px;
  right: 40px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--vf-ink);
  opacity: .6;
  transition: opacity var(--v2-dur-base) var(--v2-ease-out);
}
.vf.is-on .vf__snd { opacity: .92; }
.vf__meter, .cine__meter { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.vf__meter b, .cine__meter b {
  display: block;
  width: 2px;
  height: 100%;
  background: currentColor;
  transform: scaleY(var(--l, .12));
  transform-origin: bottom;
  transition: transform 90ms linear;
}
.vf__sndlbl { display: inline-grid; height: 1.3em; line-height: 1.3em; overflow: hidden; }
.vf__sndlbl span {
  grid-area: 1 / 1;
  transition: transform var(--v2-dur-base) var(--v2-ease-out), opacity var(--v2-dur-base) var(--v2-ease-out);
}
.vf__sndlbl span:nth-child(2) { transform: translateY(100%); opacity: 0; }
.vf.is-on .vf__sndlbl span:first-child { transform: translateY(-100%); opacity: 0; }
.vf.is-on .vf__sndlbl span:nth-child(2) { transform: none; opacity: 1; }

/* Touch devices get a quiet mark low in the frame; pointer devices get the cursor tag. */
.vf__cue {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  color: var(--vf-ink);
  background: rgba(19, 18, 21, 0.55);
  white-space: nowrap;
}
.vf__cue i {
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid currentColor;
}
@media (hover: none) { .vf__cue { display: inline-flex; } }

.vf__tag {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9100;
  display: none;
  padding: 5px 9px;
  background: var(--v2-off-white);
  color: var(--v2-onyx);
  white-space: nowrap;
  pointer-events: none;
  transform: translate(calc(var(--x) + 18px), calc(var(--y) + 18px));
  opacity: 0;
  transition: opacity var(--v2-dur-fast) var(--v2-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .vf__tag { display: block; }
  .vf__tag.is-on { opacity: 1; }
  .vf:hover { cursor: none; }
}

/* Full film ------------------------------------------------------------------ */
/* Above the page grain so the film itself stays clean. */
.cine {
  position: fixed;
  inset: 0;
  z-index: 9600;
  color: var(--v2-off-white);
  --edge-x: calc(20px + env(safe-area-inset-left));
  --edge-y: calc(20px + env(safe-area-inset-top));
}
.cine[hidden] { display: none; }
.cine__back {
  position: absolute;
  inset: 0;
  background: var(--v2-deep-black);
  opacity: 0;
  transition: opacity var(--v2-dur-slow) var(--v2-ease-out);
}
.cine.is-in .cine__back { opacity: 1; }
/* --tx/--ty carry a bracket back to its corner of the hero frame; at rest they are unset. */
.cine__reg { z-index: 3; opacity: 0.9; transform: translate(var(--tx, 0px), var(--ty, 0px)) var(--flip, scale(1)); }
.cine__reg--tl { top: var(--edge-y); left: var(--edge-x); }
.cine__reg--tr { top: var(--edge-y); right: var(--edge-x); --flip: scaleX(-1); }
.cine__reg--bl { bottom: var(--edge-y); left: var(--edge-x); --flip: scaleY(-1); }
.cine__reg--br { bottom: var(--edge-y); right: var(--edge-x); --flip: scale(-1); }
.cine__reg.is-travel { transition: none; }
.cine__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  opacity: 0;
  transition: opacity var(--v2-dur-base) var(--v2-ease-out);
}
.cine.is-in .cine__video { opacity: 1; transition-delay: 480ms; }
/* the streamed film borrows the same frame; its own control bar stays off, the chrome above is the UI */
mux-player.cine__video { --media-object-fit: contain; --controls: none; }
.cine__tc, .cine__snd, .cine__close, .cine__paused {
  position: absolute;
  z-index: 4;
  opacity: 0;
  transition: opacity var(--v2-dur-base) var(--v2-ease-out) 560ms;
  color: var(--vf-ink);
  font-variant-numeric: tabular-nums;
}
.cine.is-in .cine__tc, .cine.is-in .cine__snd, .cine.is-in .cine__close, .cine.is-in .cine__paused { opacity: 1; }
.cine__tc { top: calc(var(--edge-y) + 2px); left: calc(var(--edge-x) + 30px); }
/* the meter follows the timecode (13 mono characters) with a gap */
.cine__snd { top: calc(var(--edge-y) + 2px); left: calc(var(--edge-x) + 30px + 13ch + 28px); display: inline-flex; align-items: center; gap: 10px; }
.cine__close {
  top: calc(var(--edge-y) - 12px);
  right: calc(var(--edge-x) + 30px);
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  cursor: pointer;
}
.cine__close span { margin-left: 8px; font-size: 1.1rem; line-height: 1; vertical-align: -1px; }
.cine__close:hover { color: var(--v2-off-white); }
.cine__close:focus-visible { outline: 1px solid var(--v2-accent); outline-offset: 4px; }
.cine__paused {
  left: 50%;
  bottom: calc(var(--edge-y) + 12px);
  transform: translateX(-50%);
  color: var(--vf-ink-2);
}
.cine__paused[hidden] { display: none; }
.cine__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--vf-ink);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  z-index: 4;
}
html.is-cine { overflow: hidden; }

/* Reduced motion: the frame holds the final frame as a still, the film cross-fades. */
@media (prefers-reduced-motion: reduce) {
  .vf__reg, .vf__cross, .vf__read, .vf__tag, .cine__back, .cine__video, .cine__tc, .cine__snd, .cine__close, .cine__paused {
    transition-duration: 200ms;
    transition-delay: 0ms;
  }
  .cine__reg { transition: none; }
}

/* ============================================================== PHONE */
/* Below 980 the manifesto stacks: head first, then the four documents as a swipe row that bleeds to the viewport
   edges. Each card reuses the desktop paper markup (cqw geometry scales with the card), sits upright, and carries
   a caption that is part of the same link. The decorative duplicates, stickers and paperclip stay desktop-only.
   Cards snap to the left margin; the row's end padding is the viewport minus one card so the last card can reach
   that margin too instead of the scroller stopping short with the previous card's edge showing. The row stops
   being a container so the card width resolves against the stage whether read on the row or on a card. */
@media (max-width: 980px) {
  .manifesto__stage { height: auto; overflow: visible; }
  .manifesto__head { position: static; width: auto; padding: 64px 0 40px; }
  .manifesto__fan {
    --doc-w: clamp(220px, 64cqw, 300px);
    position: relative; inset: auto; container-type: normal;
    display: flex; gap: 12px; align-items: flex-start;
    margin: 0 calc(-1 * var(--v2-grid-margin));
    padding: 4px calc(100cqw + var(--v2-grid-margin) - var(--doc-w)) 28px var(--v2-grid-margin);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--v2-grid-margin);
    scrollbar-width: none;
  }
  .manifesto__fan::-webkit-scrollbar { display: none; }
  .fan:not(.fan--doc) { display: none; }
  .fan--doc {
    position: relative; left: auto; top: auto; flex: none;
    width: var(--doc-w); height: auto;
    display: flex; flex-direction: column; gap: 18px;
    scroll-snap-align: start; --fd: .25s;
  }
  .fan--doc:last-child { order: -1; --fd: .1s; }
  .fan--doc .fan__in { position: relative; inset: auto; aspect-ratio: 26.73 / 40.33; transform: none; box-shadow: 0 32px 64px -40px rgba(19,18,21,.45); border-radius: var(--v2-radius-xs); }
  .fan--doc .paper__sub { translate: 0 1.6cqw; }
  .fan--doc:active .fan__in { transform: scale(.985); }
  .fan__cap { display: grid; gap: 8px; padding-inline: 2px; }
  .fan__kind { font-family: var(--v2-font-mono); font-size: var(--v2-text-xs); letter-spacing: var(--v2-tracking-mono); text-transform: uppercase; color: var(--v2-taupe); display: flex; justify-content: space-between; }
  .fan__kind::after { content: "Read \2192"; color: var(--v2-slate-blue); }
  .fan__name { font-size: 17px; line-height: 1.25; letter-spacing: var(--v2-tracking-display); color: var(--v2-onyx); }
  .manifesto__pos {
    display: flex; align-items: center; gap: 16px;
    margin: 0; padding-bottom: 72px;
    font-family: var(--v2-font-mono); font-size: var(--v2-text-xs); letter-spacing: var(--v2-tracking-mono);
    color: var(--v2-taupe); font-variant-numeric: tabular-nums;
  }
  .manifesto__pos-n { color: var(--v2-onyx); }
  .manifesto__pos-bar { position: relative; flex: 1; height: 1px; background: color-mix(in srgb, var(--v2-onyx) 14%, transparent); overflow: hidden; }
  .manifesto__pos-bar::after {
    content: ""; position: absolute; inset: 0; width: 25%;
    background: var(--v2-onyx);
    translate: calc(var(--p, 0) * 300%) 0;
  }
  .prefooter { margin-top: 0; }
}

/* Below 640 one focus per screen: headline first, the viewfinder on its phone cut of the loop, the support line
   under it (the copy wrapper dissolves so it can be ordered around the stage), the mission unpinned and clocked (mission.js), the film a tall still, the manifesto fan below its head. */
@media (max-width: 640px) {
  .hero { padding-bottom: 100px; }
  .hero .ltv2-field { display: flex; flex-direction: column; }
  .hero__copy { display: contents; }
  .hero__h1 { order: 1; position: relative; z-index: 5; padding-top: 40px; text-wrap: balance; }
  .hero__line, .hero__h1 .grad { display: inline; }
  .hero__stage { order: 2; margin-top: 32px; }
  .hero__sub { order: 3; position: relative; z-index: 5; margin-top: 24px; font-size: var(--v2-p2); line-height: var(--v2-p2-lh); }
  .hero__actions, .hero .marquee { display: none; }
  .vf.is-still .vf__snd { display: none; }
  /* the phone frame is a third the size of the desktop one, so the chrome sits further in and reads brighter */
  .vf__reg { --inset: 18px; opacity: .8; }
  .vf__read { top: 20px; left: 46px; opacity: .8; }

  .mission__scroll { height: auto; }
  .mission__sticky { position: relative; height: auto; overflow: visible; }
  .mission__frame { height: auto; padding-block: 72px 64px; row-gap: 20px; }
  .step__btn { min-height: 44px; padding: 12px 0; }
  .step__line { font-size: 16px; }

  .outcomes { padding-bottom: 80px; }
  .outcomes .ltv2-field { gap: 40px; }
  /* cards take their natural height so the copy and the logo sit together rather than at opposite ends of a square */
  .ocard { aspect-ratio: auto; }
  .ocard__in { position: relative; padding: 24px 20px; gap: 28px; }
  .ocard__top { gap: 28px; }
  .ocard .ltv2-eyebrow { font-size: 12px; gap: 8px; }
  .ocard .ltv2-eyebrow::before { width: 5px; height: 5px; }
  .ocard__bottom { gap: 28px; }
  .ocard__copy { font-size: var(--v2-p2); line-height: var(--v2-p2-lh); }
  .ocard__row { gap: 16px; }
  .ocard__logo { height: 36px; }
  .ocard__arrow { width: 16px; height: 16px; }

  .quote { padding: 56px 0; }
  .quote__q { font-size: var(--v2-s2); line-height: var(--v2-s2-lh); }
  .quote__text { gap: 32px; }
  .quote__attr { font-size: var(--v2-p2); line-height: var(--v2-p2-lh); gap: 16px; }
  .quote__pic { width: 56px; height: 70px; }
  .quote__dot { width: 44px; }

  /* A close frame with the face in the top third; the headline sits low over a fade so it never covers the face. */
  .film { aspect-ratio: 4 / 5; max-height: none; }
  .film__still { object-position: 62% 22%; }
  .film::after { content: ""; position: absolute; inset: auto 0 0 0; height: 62%; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--v2-onyx) 75%, transparent)); }
  .film__h { inset: auto 0 84px 0; margin: 0 auto; width: calc(100% - 2 * var(--v2-grid-margin)); text-align: left; font-size: var(--v2-s2); line-height: var(--v2-s2-lh); }

  .prefooter { min-height: 0; padding: 96px 0; }
}

.mission--choice .mission__scroll { height: auto; }.mission--choice .mission__sticky { position: relative; height: 100vh; height: 100svh; }.mission--choice .mission__eyebrow {
  display: flex; align-items: center; gap: 8px;
  color: var(--v2-mauve);
}.mission--choice .mission__eyebrow::before {
  content: ""; width: 6px; height: 6px; flex: 0 0 6px;
  border-radius: 50%; background: currentColor;
}.mission--choice .mission__cta .ltv2-btn {
  background: var(--v2-mauve); color: var(--v2-onyx);
  font: 400 12px / 1.4 var(--v2-font-mono);
  letter-spacing: var(--v2-tracking-mono); text-transform: uppercase;
}.mission--choice .step:not(.on) .step__btn { color: #C6C4C8; }.mission--choice .step:not(.on) .step__line { opacity: 1; }.mission--choice .step__line { transition: opacity .4s var(--v2-ease-out); }.mission--choice .mission__copy .h2 { container-type: inline-size; width: 100%; }.mission--choice .mission__copy .h2 .goo {
  display: block; white-space: nowrap;
  font-size: min(1em, 8.8cqw); letter-spacing: var(--v2-tracking-display);
}.mission--choice .mission__chapter-caption { display: none; }.mission--choice button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
@media (max-width: 1100px) {.mission--choice { overflow: visible; }.mission--choice .mission__sticky { height: auto; min-height: 0; overflow: visible; }.mission--choice .mission__frame {
    height: auto; min-height: 0; max-width: 760px;
    padding: 40px max(24px, env(safe-area-inset-right)) 48px max(24px, env(safe-area-inset-left));
    align-content: start; row-gap: 18px;
  }.mission--choice .mission__copy .h2 { font-size: clamp(30px, 4.8vw, 40px); line-height: 1.08; }.mission--choice .mission__lede { font-size: 16px; line-height: 1.45; opacity: .85; }.mission--choice .mission__right { width: min(100%, 600px); margin-block: 8px 0; }.mission--choice .steps {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px; width: 100%; max-width: 600px; justify-self: center;
    margin: 0; border-top: 0;
  }.mission--choice .step__btn {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "n" "name";
    justify-items: start; row-gap: 6px; padding: 10px 4px 13px;
    min-height: 66px; border-bottom-width: 2px;
  }.mission--choice .step__n { display: block; padding-top: 0; font-size: 11px; line-height: 1.2; }.mission--choice .step__name {
    font-family: var(--v2-font-mono); font-size: 11px; line-height: 1.2; letter-spacing: var(--v2-tracking-mono); text-transform: uppercase;
  }.mission--choice .step__prog { height: 2px; bottom: -2px; background: var(--v2-mauve); }.mission--choice .mission__chapter-caption {
    display: block; order: 5; width: 100%; max-width: 600px; justify-self: center;
    margin-top: 2px; --rd: .5s; --ry: 6px;
    font-size: clamp(26px, 7vw, 30px); line-height: 1.15; letter-spacing: var(--v2-tracking-display); color: var(--v2-onyx); text-wrap: balance;
  }.mission--choice .mission__cta { width: 100%; max-width: 600px; justify-self: center; padding-top: 6px; }.mission--choice .mission__cta .ltv2-btn { min-height: 48px; }
}
@media (max-width: 640px) {.mission--choice .mission__frame { padding: 28px max(16px, env(safe-area-inset-right)) 40px max(16px, env(safe-area-inset-left)); row-gap: 16px; }.mission--choice .mission__eyebrow { font-size: 12px; }.mission--choice .mission__right { margin-top: 10px; }.mission--choice .mission__cta .ltv2-btn { width: 100%; justify-content: center; background: transparent; color: var(--v2-onyx); border-color: var(--v2-taupe); }.mission--choice .mission__copy .h2 .goo { white-space: normal; font-size: 1em; text-wrap: balance; }
}
@media (prefers-reduced-motion: reduce) {.mission--choice .step__btn,
.mission--choice .step__line { transition: none; }
}
@media (max-width: 1100px) and (max-height: 540px) {.mission--choice .mission__right,
.mission--choice .steps,
.mission--choice .mission__chapter-caption,
.mission--choice .mission__cta {
    max-width: clamp(320px, calc((100svh - 80px) * 908 / 795), 600px);
  }
}
.mission--choice .mission__scroll { height: auto; }
.mission--choice .mission__sticky { position: relative; height: auto; overflow: visible; }
.mission--choice .mission__frame { height: auto; min-height: 100svh; }

/* ============================================================== PHONE PASS */
/* The demo dock: a fixed bar at the thumb on phones. page.js shows it once the hero's demo button has scrolled off
   and hides it again while the case-study row (whose cards are the links there) or the prefooter's button is on
   screen. It sits under the nav drawer (z 20) and the demo drawer (z 30). */
.mdock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  display: none;
  padding: 10px var(--v2-grid-margin) max(10px, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--v2-onyx) 90%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--v2-border-on-dark);
  transform: translateY(110%); visibility: hidden;
  transition: transform .5s var(--v2-ease-out), visibility 0s .5s;
}
.mdock.is-visible { transform: none; visibility: visible; transition: transform .5s var(--v2-ease-out), visibility 0s; }
.mdock .ltv2-btn { width: 100%; justify-content: center; min-height: 48px; }
@media (prefers-reduced-motion: reduce) { .mdock { transition: none; } }

/* Pointer-only affordances get a visible stand-in on touch: the film's watch cue and the outcome card arrows. */
@media (hover: none) {
  .film__watch::after {
    content: "Watch with sound";
    position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
    padding: 10px 14px;
    font: 400 11px / 1 var(--v2-font-mono); letter-spacing: var(--v2-tracking-mono); text-transform: uppercase;
    color: var(--vf-ink); background: rgba(19, 18, 21, .55); border: 1px solid var(--vf-line);
    white-space: nowrap;
  }
  .ocard__arrow { opacity: .7; transform: none; }
}

/* The press banner (z 2000) stays above the demo drawer, so the drawer starts below it and keeps its close button clear. */
html.bnr-on .ltv2-drawer { top: var(--bnr-h); }

@media (max-width: 640px) {
  .mdock { display: block; }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .film__watch::after { left: var(--v2-grid-margin); bottom: 28px; transform: none; }
}

/* ============================================================== THE BARRIER (barrier.js) */
/* The Access chapter's wall, playable. Same chrome as the film: onyx plate, registration marks, mono readouts. */
html.is-barrier { overflow: hidden; }
.bar {
  position: fixed;
  inset: 0;
  z-index: 9600;
  color: var(--vf-ink, rgba(250, 250, 250, 0.92));
  --vf-ink: rgba(250, 250, 250, 0.92); --vf-ink-2: rgba(250, 250, 250, 0.55); --vf-line: rgba(250, 250, 250, 0.22);
  --edge-x: calc(20px + env(safe-area-inset-left));
  --edge-y: calc(20px + env(safe-area-inset-top));
  background: var(--v2-onyx);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  opacity: 0;
  transition: opacity 900ms var(--v2-ease-out);
  outline: none;
}
.bar.is-in { opacity: 1; }
.bar[hidden] { display: none; }
.bar__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bar.is-run { cursor: none; }
.bar__reg { position: absolute; width: 18px; height: 18px; opacity: 0.9; z-index: 3; pointer-events: none; }
.bar__reg::before, .bar__reg::after { content: ""; position: absolute; background: var(--vf-ink); }
.bar__reg::before { top: 0; left: 0; width: 100%; height: 1px; }
.bar__reg::after { top: 0; left: 0; width: 1px; height: 100%; }
.bar__reg--tl { top: var(--edge-y); left: var(--edge-x); }
.bar__reg--tr { top: var(--edge-y); right: var(--edge-x); transform: scaleX(-1); }
.bar__reg--bl { bottom: var(--edge-y); left: var(--edge-x); transform: scaleY(-1); }
.bar__reg--br { bottom: var(--edge-y); right: var(--edge-x); transform: scale(-1); }
.bar__hud, .bar__read, .bar__sound, .bar__close {
  position: absolute;
  z-index: 4;
  color: var(--vf-ink);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.bar__hud { top: calc(var(--edge-y) + 2px); left: calc(var(--edge-x) + 30px); display: flex; gap: 28px; align-items: center; }
.bar__lives { display: inline-flex; gap: 6px; align-items: center; }
.bar__lives i { width: 8px; height: 8px; border-radius: 50%; background: var(--v2-mauve); transition: transform var(--v2-dur-base) var(--v2-ease-out), opacity var(--v2-dur-base) var(--v2-ease-out); }
.bar__lives i.is-lost { background: var(--vf-ink-2); opacity: .35; transform: translateY(6px) scale(.7); }
.bar__read {
  left: 50%; bottom: calc(var(--edge-y) + 14px);
  margin: 0; transform: translateX(-50%);
  color: var(--v2-mauve);
  opacity: 0;
  transition: opacity 240ms var(--v2-ease-out);
  white-space: nowrap;
}
.bar__read.is-on { opacity: 1; }
.bar__sound, .bar__close {
  pointer-events: auto;
  top: calc(var(--edge-y) - 12px);
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--vf-ink-2);
}
.bar__close { right: calc(var(--edge-x) + 30px); }
.bar__close span { margin-left: 8px; font-size: 1.1rem; line-height: 1; vertical-align: -1px; }
.bar__sound { right: calc(var(--edge-x) + 30px + 9ch + 28px); }
.bar__sound:hover, .bar__close:hover { color: var(--v2-off-white); }
.bar__sound:focus-visible, .bar__close:focus-visible { outline: 1px solid var(--v2-accent); outline-offset: 4px; }
.bar__card {
  position: absolute;
  z-index: 5;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 2 * var(--edge-x) - 48px));
  padding: 28px 28px 24px;
  border: 1px solid var(--vf-line);
  background: rgba(19, 18, 21, .94);
  text-align: left;
  animation: bar-card 700ms var(--v2-ease-out) both;
}
.bar__card[hidden] { display: none; }
@keyframes bar-card { from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
.bar__eyebrow { margin: 0 0 18px; color: var(--v2-mauve); }
.bar__h { margin: 0 0 14px; font: 500 clamp(24px, 3vw, 32px) / 1.1 var(--v2-font-display); letter-spacing: -.01em; color: var(--v2-off-white); }
.bar__p { margin: 0 0 22px; font: 400 15px / 1.5 var(--v2-font-body); color: var(--vf-ink-2); max-width: 44ch; }
.bar__hint { margin: 0; color: var(--vf-ink-2); }
.bar__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 0 24px; }
.bar__stats dt { color: var(--vf-ink-2); margin-bottom: 8px; }
.bar__stats dd { margin: 0; }
.bar__num { font: 500 clamp(28px, 3.4vw, 40px) / 1 var(--v2-font-display); letter-spacing: -.02em; color: var(--v2-off-white); font-variant-numeric: tabular-nums; }
.bar__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.bar__actions .ltv2-btn--secondary { border-color: var(--vf-line); color: var(--vf-ink); }
.bar__actions .ltv2-btn--secondary:hover { background: rgba(245, 245, 245, .08); color: var(--v2-off-white); }


@media (max-width: 640px) {
  .bar__hud { gap: 16px; }
  .bar__sound { display: none; }
  .bar__stats { grid-template-columns: repeat(2, 1fr); }
  .bar__card { padding: 22px 20px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .bar { transition-duration: 200ms; }
  .bar__card { animation: none; }
  .ltv2-nav__logo .ltv2-lockup__mark circle { transition: none; }
}