/* ──────────────────────────────────────────────
   Bigscreen — Ten Years
   Built on the Bigscreen design system tokens.
   Paper-on-ink, hairlines, Fragment Mono numerals,
   single indigo accent (#4D1EF7) used sparingly.
   ────────────────────────────────────────────── */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent-12); color: var(--ink); }

img { display: block; max-width: 100%; }

/* ── Nav ── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  z-index: 100;
  background: rgba(255,255,255,0);
  transition: background var(--dur-std) var(--ease), border-color var(--dur-std) var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(255,255,255,0.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: var(--rule);
}
.nav .wordmark {
  display: inline-flex; align-items: center;
  border-bottom: none;
}
.nav .wordmark img { height: 18px; width: auto; filter: brightness(0) invert(1); }
.nav .nav-meta-removed {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}
.nav .nav-meta .accent { color: var(--accent); }

/* ── Year rail ── */
.year-rail {
  position: fixed;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease);
}
.year-rail.visible { opacity: 1; pointer-events: auto; }
.year-rail a {
  display: flex; align-items: center; gap: 12px;
  justify-content: flex-end;       /* anchor the year to the right edge */
  text-decoration: none; border-bottom: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--mute);
  transition: color var(--dur-std) var(--ease), gap var(--dur-std) var(--ease);
}
.year-rail a::before {
  content: '';
  width: 14px; height: 1px;
  background: currentColor;
  transition: width var(--dur-std) var(--ease), background var(--dur-std) var(--ease);
}
.year-rail a:hover, .year-rail a.active { color: var(--ink); }
.year-rail a.active { color: var(--accent); }
.year-rail a.active::before { width: 28px; background: var(--accent); }

/* Chapter label that doubles the rail as a Table of Contents.
   Rendered via ::after, ordered LEFT of the dash via flex `order`, so
   the row reads: [LABEL] ── [YEAR]. Hidden at rest, slides in on
   rail-hover (reveals every label as a TOC) or on the active row
   (a persistent "you are here" cue). */
.year-rail a::after {
  content: attr(data-label);
  order: -1;                       /* push to the front of the row */
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: currentColor;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease);
  white-space: nowrap;
  pointer-events: none;            /* the year is the click target */
}
.year-rail:hover a::after,
.year-rail a.active::after {
  opacity: 1;
  transform: translateX(0);
}
/* Inactive rows during hover stay slightly muted so the active row
   still leads the eye. */
.year-rail:hover a:not(.active)::after { opacity: 0.62; }

/* ── Eyebrow / step / mono atoms ── */
.eb {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eb::before {
  content: "/";
  color: var(--accent);
  margin-right: 2px;
}
.eb-on-dark { color: rgba(255,255,255,0.65); }
.eb-on-dark::before { color: var(--accent); }

/* ── Hero ── */
.hero {
  position: relative;
  min-height: 100vh;
  background: var(--paper);
  display: flex;
  align-items: center;
  padding: 0 80px;
  overflow: hidden;
}
.hero-grid {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 32px;
  display: flex; align-items: center; gap: 14px;
}
.hero-eyebrow .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 999px; }
.hero-eyebrow .accent { color: var(--accent); }
.hero-headline {
  font-family: var(--font-sans);
  font-weight: 400;
  /* Hero gets its own scale beyond --fs-jumbo since it's the page's
     biggest moment. Floors at jumbo, scales with viewport up to 160px. */
  font-size: clamp(var(--fs-jumbo), 10vw, 160px);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--paper);
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.hero-headline .hh-line { display: block; }
.hero-headline .hh-num { color: var(--accent); }
.hero-headline .hh-line-em { color: rgba(255,255,255,0.45); }
.hero-range {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--mute);
  margin-bottom: 36px;
  max-width: 520px;
}
.hero-range .hr-y { color: var(--ink); }
.hero-range .hr-track {
  flex: 1;
  height: 1px;
  background: var(--rule);
  position: relative;
  overflow: hidden;
}
.hero-range .hr-fill {
  position: absolute;
  inset: 0 100% 0 0;
  background: var(--accent);
  transform-origin: left;
  animation: hrFill 1.6s cubic-bezier(0.2,0.8,0.2,1) 0.4s forwards;
}
@keyframes hrFill {
  to { inset: 0 0 0 0; }
}
.hero-sub {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 1.5;
  color: var(--mute-2);
  max-width: 460px;
  margin-bottom: 48px;
  text-wrap: pretty;
}
.hero-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  max-width: 520px;
}
.hero-meta-cell { padding: 20px 16px 20px 0; }
.hero-meta-cell .v {
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--ink);
  margin-bottom: 6px;
  font-feature-settings: "tnum" 1;
}
.hero-meta-cell .l {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}

/* Right — vertical timeline preview */
.hero-rail {
  position: relative;
  border-left: 1px solid var(--rule);
  padding: 24px 0 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-height: 70vh;
  overflow: hidden;
  mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.hero-rail-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  align-items: baseline;
  position: relative;
}
.hero-rail-row::before {
  content: '';
  position: absolute;
  left: -44px; top: 8px;
  width: 8px; height: 1px; background: var(--rule);
}
.hero-rail-row.on::before { background: var(--accent); width: 18px; }
.hero-rail-row .yr {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
  font-feature-settings: "tnum" 1;
}
.hero-rail-row .ev {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--mute-2);
}
.hero-rail-row.on .ev { color: var(--ink); }

.scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 80px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}
.scroll-cue::after {
  content: '';
  width: 1px; height: 36px;
  background: var(--mute);
  animation: scrollLine 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scrollLine {
  0%, 100% { transform: scaleY(0.3); opacity: 0.3; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* ── Hero tick — live elapsed counter (hidden for now) ── */
.hero-tick {
  display: none;
  margin-top: 40px;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.hero-tick.in { opacity: 1; transform: translateY(0); }
.ht-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.ht-label .accent { color: var(--accent); }
.ht-cells {
  display: flex;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.ht-cell {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px 24px 14px 0;
  border-right: 1px solid rgba(255,255,255,0.08);
  margin-right: 24px;
}
.ht-cell:last-child { border-right: none; margin-right: 0; }
.ht-v {
  font-family: var(--font-mono);
  font-size: 28px;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.95);
  line-height: 1;
  font-feature-settings: "tnum" 1;
}
.ht-l {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

/* ── Photo bands (full-bleed cinema black) ── */
.photo-band {
  position: relative;
  width: 100%;
  height: 86vh;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: var(--ink);
}
.photo-band img {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
}
.photo-band::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 22%, transparent 55%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}
.photo-band-overlay {
  position: relative;
  z-index: 2;
  padding: 0 80px 64px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
}
.photo-band-caption {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  max-width: 560px;
  line-height: 1.6;
}
.photo-band-caption .num {
  color: var(--accent);
  margin-right: 14px;
}
.photo-band-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
}

/* ── Side-by-side photo band (two cells, shared figure structure) ── */
.photo-band-split {
  position: relative;
  width: 100%;
  height: 86vh;
  min-height: 560px;
  background: var(--ink);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 0;
  overflow: hidden;
}
.pbs-cell {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: var(--ink);
  display: flex;
  align-items: flex-end;
}
.pbs-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.pbs-cell.is-screenshot img {
  object-position: center top;
  filter: saturate(0.9) contrast(1.04);
}
.pbs-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 25%, transparent 55%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}
.pbs-cell .photo-band-overlay {
  position: relative;
  z-index: 2;
  padding: 0 48px 48px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
@media (max-width: 768px) {
  .photo-band-split {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }
  .pbs-cell {
    height: 60vh;
    min-height: 360px;
  }
  .pbs-cell .photo-band-overlay { padding: 0 24px 24px; }
}

/* ── Editorial sections (paper) ── */
.editorial {
  padding: var(--s-120) 80px;
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px 64px;
  background: var(--paper);
}
.editorial-warm { background: var(--paper-warm); }
.editorial-meta {
  grid-column: 1;
  position: sticky; top: 96px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--ink);
  padding-top: 12px;
}
.editorial-meta .step {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  font-feature-settings: "tnum" 1;
}
.editorial-meta .step .num { color: inherit; margin-right: 6px; }
.editorial-meta .date {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--mute);
}
.editorial-content { grid-column: 2 / span 2; }
.editorial-content.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.editorial-headline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(36px, 3.6vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 24px;
  text-wrap: balance;
}
.editorial-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin-bottom: 24px;
  max-width: 520px;
  text-wrap: pretty;
}
.editorial-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--mute-2);
  margin-bottom: 24px;
  max-width: 520px;
  text-wrap: pretty;
}

/* ── Spec grid ── */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border-top: 1px solid var(--rule);
  margin-top: 32px;
}
.spec-cell {
  padding: 20px 16px 20px 0;
  border-bottom: 1px solid var(--rule);
}
.spec-cell .value {
  font-family: var(--font-mono);
  font-size: 32px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 12px;
  font-feature-settings: "tnum" 1;
}
.spec-cell .value .unit {
  font-size: 0.5em;
  color: var(--mute);
  margin-left: 4px;
  letter-spacing: 0;
}
.spec-cell .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}

/* ── Funding logos placeholder block ── */
.funding-row {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.funding-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.funding-chip .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 999px; }

.funding-logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.funding-logos img {
  height: 56px;
  width: auto;
  max-width: 45%;
  object-fit: contain;
  opacity: 0.9;
  filter: brightness(0) invert(1);
  transition: opacity 0.3s ease;
}
.funding-logos img:hover { opacity: 1; }

/* ── Mosaic ── */
.mosaic {
  padding: 0 80px var(--s-120);
  max-width: var(--max-w);
  margin: 0 auto;
}
.mosaic-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 280px 280px;
  gap: 8px;
}
.mosaic.mosaic-places .mosaic-grid {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 440px 440px;
  gap: 6px;
}
.mosaic.mosaic-places .mosaic-tile .label {
  font-size: 14px;
  letter-spacing: 0.16em;
  bottom: 26px; left: 26px;
}
.mosaic-tile {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  border-radius: var(--r-12);
}
.mosaic-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.mosaic-tile:hover img { transform: scale(1.04); }
.mosaic-tile::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
}
.mosaic-tile .label {
  position: absolute;
  bottom: 16px; left: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  z-index: 2;
}
.mosaic-tile .label::before {
  content: "/ ";
  color: var(--accent);
}
.mosaic-tile.tall { grid-row: span 2; }

/* ── Collage placeholders ── */
.collage-section {
  padding: 0 80px var(--s-120);
  max-width: var(--max-w);
  margin: 0 auto;
}
.collage-grid {
  display: grid;
  gap: 8px;
}
/* ── Team Polaroids ── */
.team-polaroids {
  background: var(--ink);
  padding: 0 0 80px;
  overflow: hidden;
}
.polaroid-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 40px 60px 20px;
  align-items: flex-start;
  justify-content: center;
}
.polaroid {
  background: #1e1e1e;
  padding: 8px 8px 36px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7), 0 2px 8px rgba(0,0,0,0.5);
  cursor: zoom-in;
  flex-shrink: 0;
  width: 260px;
  margin: -12px -10px;
  position: relative;
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s cubic-bezier(.2,.8,.2,1);
  z-index: 1;
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}
.polaroid:hover {
  transform: rotate(0deg) scale(1.12) !important;
  box-shadow: 0 28px 70px rgba(0,0,0,0.8), 0 4px 16px rgba(0,0,0,0.5);
  z-index: 10;
}
.polaroid img:first-child {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}
.pol-foot {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 9px 4px 0;
}
.pol-logo {
  flex-shrink: 0;
  opacity: 0.45;
  line-height: 0;
}
.polaroid span {
  display: block;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  flex-shrink: 0;
}

/* rotation variants — mixed so no two neighbours match */
.p-rot-l1 { transform: rotate(-4deg)  translateY(8px); }
.p-rot-l2 { transform: rotate(-9deg)  translateY(-4px); }
.p-rot-l3 { transform: rotate(-14deg) translateY(16px); }
.p-rot-r1 { transform: rotate(5deg)   translateY(-8px); }
.p-rot-r2 { transform: rotate(10deg)  translateY(4px); }
.p-rot-r3 { transform: rotate(15deg)  translateY(12px); }

/* Organic scattered layout — kept for non-team collages */
.collage-organic {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px 12px;
  grid-auto-flow: dense;
}
.collage-organic .collage-tile {
  aspect-ratio: 4/5;
}
.collage-organic .collage-tile.rot-1 { transform: rotate(-2.4deg); }
.collage-organic .collage-tile.rot-2 { transform: rotate(1.8deg); }
.collage-organic .collage-tile.rot-3 { transform: rotate(-1.2deg); }
.collage-organic .collage-tile:hover {
  transform: rotate(0deg) scale(1.05);
  box-shadow: 0 24px 60px -12px rgba(0,0,0,0.4);
}


.collage-10 {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 240px;
  gap: 14px;
}
.collage-10 .span-2x2 { grid-column: span 2; grid-row: span 2; }
.collage-10 .span-1x2 { grid-row: span 2; }
.collage-10 .span-2x1 { grid-column: span 2; }
.collage-10 .zoomable { cursor: zoom-in; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.collage-10 .zoomable:hover { transform: translateY(-3px) scale(1.012); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6); }
.collage-10 .zoomable img { transition: transform 0.7s var(--ease); }
.collage-10 .zoomable:hover img { transform: scale(1.05); }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
  cursor: zoom-out;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: 92vw;
  max-height: 90vh;
  object-fit: contain;
  box-shadow: 0 40px 100px -10px rgba(0,0,0,0.8);
  transform: scale(0.96);
  transition: transform 0.4s var(--ease);
}
.lightbox.is-open img { transform: scale(1); }
.lightbox-close {
  position: absolute;
  top: 24px;
  right: 28px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.5);
  color: white;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  font-family: var(--font-mono);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.lightbox-close:hover { background: var(--accent); border-color: var(--accent); }

/* Video lightbox — YouTube embed modal for reviewer cards */
.video-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
  padding: 24px;
}
.video-lightbox.is-open { opacity: 1; pointer-events: auto; }
.vlb-frame {
  width: min(92vw, 1280px);
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--r-12);
  overflow: hidden;
  box-shadow: 0 40px 100px -10px rgba(0,0,0,0.8);
  transform: scale(0.96);
  transition: transform 0.4s var(--ease);
}
.video-lightbox.is-open .vlb-frame { transform: scale(1); }
.vlb-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.vlb-close {
  position: absolute;
  top: 24px;
  right: 28px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.5);
  color: white;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  font-family: var(--font-mono);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.vlb-close:hover { background: var(--accent); border-color: var(--accent); }
@media (max-width: 900px) {
  .collage-10 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .collage-10 .span-2x2, .collage-10 .span-1x2, .collage-10 .span-2x1 { grid-column: span 2; grid-row: auto; }
}
.collage-press {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 200px);
}
.collage-users {
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 160px);
}
.collage-tile {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-12);
}
.collage-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.collage-tile::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 50%;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.collage-tile .collage-caption { color: #fff; z-index: 2; }

/* Big photo separator — full-bleed retreat shot */
.big-photo {
  position: relative;
  width: 100%;
  height: 90vh;
  min-height: 560px;
  overflow: hidden;
  background: var(--ink);
}
.big-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05);
}
.big-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, transparent 30%, transparent 65%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.big-photo-caption {
  position: absolute;
  left: 80px;
  bottom: 48px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  z-index: 2;
}
.big-photo-caption .num {
  color: var(--accent);
  font-size: 14px;
}
.collage-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}
.collage-caption {
  position: absolute;
  bottom: 10px; left: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute-2);
}

/* ──────────────────────────────────────────────
   Era accent — software-blue for 2016–2020, brand
   indigo for 2021+. Hero stays indigo as the brand
   anchor. The era-software class is a wrapper around
   chapters 01–05 that locally redefines the accent
   custom property; everything inside that scope
   resolves var(--accent) to the software blue.
   ────────────────────────────────────────────── */
.era-software {
  --accent:        #1DB8F1;
  --accent-deep:   #0D8FCF;
  --accent-12:     rgba(29, 184, 241, 0.12);
  --accent-08:     rgba(29, 184, 241, 0.08);
  --accent-04:     rgba(29, 184, 241, 0.04);
}

/* Hardcoded purple rgba glows inside software-era sections — override */
.era-software .editorial.cinema-merged::before {
  background: radial-gradient(ellipse 50% 80% at 95% 50%, rgba(29,184,241,0.10) 0%, transparent 60%);
}
.era-software .remote-meta .live-dot {
  animation-name: liveDot-software;
}
@keyframes liveDot-software {
  0%, 100% { box-shadow: 0 0 0 0 rgba(29,184,241,0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(29,184,241,0); }
}

/* Year-rail is fixed (outside section flow) — JS toggles .era-software on it
   based on which section is currently in view. */
.year-rail.era-software a.active { color: #1DB8F1; }
.year-rail.era-software a.active::before { background: #1DB8F1; }

/* ──────────────────────────────────────────────
   Cinema photo-band reveal — center-out clip-path wipe
   Triggered once on entry via IntersectionObserver.
   Reads as "curtains parting" without the sticky-pin gymnastics.
   ────────────────────────────────────────────── */
.photo-band-reveal {
  background: #000;  /* matches the chapter-bridge gradient's bottom */
}
.photo-band-reveal img {
  clip-path: inset(0 50% 0 50%);
  transform: scale(1.08);
  filter: brightness(0.78);
  transition:
    clip-path 1.6s cubic-bezier(.45,0,.2,1),
    transform 1.8s cubic-bezier(.45,0,.2,1),
    filter 2.0s cubic-bezier(.45,0,.2,1);
  will-change: clip-path, transform, filter;
}
.photo-band-reveal.is-on img {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
  filter: brightness(1);
}

/* ── Cinema triptych — three rooms side-by-side, staggered reveal ── */
.cinema-triptych {
  position: relative;
  width: 100%;
  height: 86vh;
  min-height: 560px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  background: #000;
  overflow: hidden;
}
.ct-cell {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: #000;
}
.ct-cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ct-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.30) 0%,
    transparent 22%,
    transparent 60%,
    rgba(0,0,0,0.85) 100%);
  pointer-events: none;
  z-index: 1;
}
.ct-label {
  position: absolute;
  bottom: 28px;
  left: 28px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  gap: 4px;
}
.ct-label .num { color: var(--accent); margin-right: 8px; }

/* Staggered reveal — each cell wipes in 180ms after the previous. */
.cinema-triptych.photo-band-reveal .ct-cell:nth-child(1) img { transition-delay: 0s; }
.cinema-triptych.photo-band-reveal .ct-cell:nth-child(2) img { transition-delay: 0.20s; }
.cinema-triptych.photo-band-reveal .ct-cell:nth-child(3) img { transition-delay: 0.40s; }

/* Section-level caption tucked into the bottom-right gutter.
   Pushed inward from the edge to give the fixed year-rail (with its
   chapter-label TOC expansion) room to live without overlapping. The
   rail is hidden below the 1000px breakpoint so we restore the tighter
   edge spacing there. */
.ct-section-caption {
  position: absolute;
  right: 220px;
  bottom: 56px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
@media (max-width: 1000px) {
  .ct-section-caption { right: 32px; }
}
.ct-section-caption .ct-num { color: var(--accent); margin-right: 12px; }
.ct-section-caption .ct-text { color: rgba(255,255,255,0.85); }
.ct-section-caption .ct-meta { color: rgba(255,255,255,0.5); }
.ct-section-caption .ct-num,
.ct-section-caption .ct-text { display: inline-block; }

@media (max-width: 768px) {
  .cinema-triptych {
    grid-template-columns: 1fr;
    grid-template-rows: 50vh 50vh 50vh;
    height: auto;
    min-height: 0;
  }
  .ct-section-caption {
    right: 24px;
    bottom: 24px;
  }
}

/* ── R&D section — single editorial section with two USP cards
   shown side by side as numbered pillars (01 / 02). ── */
.rd-intro {
  max-width: 720px;
  margin: 0 0 64px;
}
.rd-usp-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.rd-usp {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.rd-usp-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin: 0 0 18px;
  text-transform: uppercase;
}
.rd-usp-img {
  position: relative;
  margin: 0 0 24px;
  cursor: zoom-in;
  overflow: hidden;
  border-radius: var(--r-12);
  background: rgba(255,255,255,0.04);
  aspect-ratio: 4 / 3;          /* default for single-image USPs */
}
.rd-usp-img img,
.rd-usp-img video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transition: transform 0.6s var(--ease), filter 0.6s var(--ease);
}
.rd-usp-img:hover img,
.rd-usp-img:hover video {
  transform: scale(1.02);
  filter: grayscale(0) contrast(1);
}

/* USP 01 image is portrait (3:4) but the landscape container crops it
   harshly. Rotate -90° so its long axis aligns with the container's
   width, letting more of the comparison shot stay in frame. */
.rd-usp-pair .rd-usp:first-child .rd-usp-img {
  position: relative;
}
.rd-usp-pair .rd-usp:first-child .rd-usp-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 75%;
  height: 133.3333%;
  object-fit: cover;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center;
}
.rd-usp-pair .rd-usp:first-child .rd-usp-img:hover img {
  transform: translate(-50%, -50%) rotate(-90deg) scale(1.02);
}
.rd-usp-video { cursor: default; }

/* USP 02 — two media tiles side by side. The row matches USP 01's
   image aspect ratio so both columns' top media areas land at the
   same height, and each tile stretches to fill that height. */
.rd-usp-media-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 24px;
  aspect-ratio: 4 / 3;
}
.rd-usp-media-row .rd-usp-img {
  margin: 0;
  aspect-ratio: auto;
  height: 100%;
}
/* Darshan's face scan stays in full colour — the medical/oddly-personal
   detail is the whole point of the gag. */
.rd-usp-media-row .rd-usp-video video {
  filter: contrast(1.04);
}
.rd-usp-media-row .rd-usp-video:hover video {
  filter: contrast(1);
}
.rd-usp-title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0 0 14px;
  color: #fff;
}
.rd-usp-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  margin: 0 0 14px;
  color: rgba(255,255,255,0.78);
}
.rd-usp-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
  color: rgba(255,255,255,0.62);
}
.rd-face-scan {
  margin-top: 64px;
  max-width: 540px;
}
@media (max-width: 900px) {
  .rd-usp-pair { grid-template-columns: 1fr; gap: 56px; }
  .rd-intro { margin-bottom: 48px; }
  .rd-face-scan { margin-top: 48px; }
}

/* ── Subtle calibration grid behind 07 Prototypes & 08 R&D ──
   A faint blueprint/viewfinder texture. Slow drift + breath so it
   feels alive but never distracting. Sits behind content via z-index. */
.proto-collage,
.editorial-rd {
  position: relative;
  isolation: isolate;
}
.proto-collage::before,
.editorial-rd::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 95% 85% at 50% 50%, #000 0%, rgba(0,0,0,0.65) 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 95% 85% at 50% 50%, #000 0%, rgba(0,0,0,0.65) 55%, transparent 100%);
  pointer-events: none;
  z-index: -1;
  animation: rd-grid-drift 32s linear infinite, rd-grid-breath 11s ease-in-out infinite;
}
@keyframes rd-grid-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 56px 56px, 56px 56px; }
}
@keyframes rd-grid-breath {
  0%, 100% { opacity: 0.78; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .proto-collage::before,
  .editorial-rd::before { animation: none; }
}

/* ════════════════════════════════════════════════════════════
   09 TESTING — chapter framing uses the consistent .editorial pattern
   (meta column + headline + lead/body, just like 01–08). The creative
   element below is a horizontal scrolling reel of photos + tester
   quote cards — distinct from sections 07 (vertical contact-sheet) and
   08 (R&D USP cards) by introducing a NEW interaction (horizontal
   scroll/swipe) that doesn't appear elsewhere on the page.
   ════════════════════════════════════════════════════════════ */

/* Sibling section that holds just the reel — sits directly under the
   editorial chapter intro on the same dark canvas. */
.testing-reel-section {
  position: relative;
  background: var(--ink);
  padding: var(--s-32) 0 var(--s-120);
  overflow: hidden;
}

/* Reel — full-bleed horizontal scroll. */
.tr-reel-wrap {
  position: relative;
}
.tr-reel {
  list-style: none;
  margin: 0;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 var(--gutter-desktop) var(--s-24);
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Avoid the ambient hover transform getting clipped on the bottom edge */
  margin-bottom: -8px;
  padding-bottom: calc(var(--s-24) + 8px);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  scroll-behavior: auto;
  touch-action: pan-y;
}
.tr-reel.is-dragging {
  cursor: grabbing;
  touch-action: none;
}
/* While dragging, kill pointer-events on cards so text doesn't get
   selected and hover styles don't fight the drag. */
.tr-reel.is-dragging .tr-card { pointer-events: none; }
.tr-reel::-webkit-scrollbar { display: none; }

.tr-card {
  flex: 0 0 auto;
  width: 360px;
  height: 480px;
  scroll-snap-align: start;
  border-radius: var(--r-12);
  position: relative;
  transition: transform 0.45s var(--ease), border-color 0.3s var(--ease), box-shadow 0.45s var(--ease);
}
.tr-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -16px rgba(0,0,0,0.7);
}

/* Photo card */
.tr-card-photo {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  /* When the card is an <a> (Reviewer reel) it must not look like a link */
  display: block;
  text-decoration: none;
  color: inherit;
}
a.tr-card-photo { cursor: pointer; }
a.tr-card-photo:hover { border-color: rgba(77,30,247,0.5); }

/* Highlight-timestamp badge shown on Reviewer cards (top-right). */
.rv-stamp {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-label-mono);
  letter-spacing: 0.06em;
  color: var(--paper);
  background: rgba(77,30,247,0.85);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  pointer-events: none;
  transition: background 0.3s var(--ease);
}
a.tr-card-photo:hover .rv-stamp { background: var(--accent); }
.tr-card-photo img,
.tr-card-photo video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) brightness(0.95);
  transition: transform 0.7s var(--ease), filter 0.5s var(--ease);
}
.tr-card-photo:hover img,
.tr-card-photo:hover video {
  transform: scale(1.04);
  filter: saturate(1) brightness(1);
}
.tr-photo-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
  border: 1px dashed rgba(255,255,255,0.10);
  border-radius: inherit;
  pointer-events: none;
}
.tr-card-photo:has(img) .tr-photo-placeholder,
.tr-card-photo:has(video) .tr-photo-placeholder { display: none; }

.tr-card-cap {
  position: absolute;
  left: 16px;
  bottom: 12px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  pointer-events: none;
}

/* Quote card — typographic break in the photo rhythm */
.tr-card-quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px 28px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
}
.tr-quote-text {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: var(--tr-snug);
  color: var(--paper);
  margin: 0;
  text-wrap: balance;
}
.tr-quote-mark {
  display: block;
  font-size: 56px;
  line-height: 0.7;
  color: var(--accent);
  margin-bottom: 18px;
}
.tr-quote-attr {
  font-family: var(--font-mono);
  font-size: var(--fs-label-mono);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin: 0;
}
/* Emphasized quote card — solid accent, white type — punctuates the reel */
.tr-card-quote-em {
  background: var(--accent);
  border-color: var(--accent);
}
.tr-card-quote-em .tr-quote-mark { color: rgba(255,255,255,0.85); }
.tr-card-quote-em .tr-quote-attr { color: rgba(255,255,255,0.7); }

/* Drag-to-scroll hint at the right edge of the reel */
.tr-reel-cue {
  position: absolute;
  right: var(--gutter-desktop);
  bottom: -2px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  pointer-events: none;
}

@media (max-width: 1024px) {
  .testing-reel-section { padding: var(--s-24) 0 var(--s-80); }
  .tr-card { width: 320px; height: 420px; }
  .tr-quote-text { font-size: 22px; }
}
@media (max-width: 768px) {
  .testing-reel-section { padding: var(--s-16) 0 var(--s-48); }
  .tr-reel {
    padding-left: var(--gutter-mobile);
    padding-right: var(--gutter-mobile);
  }
  .tr-card { width: 78vw; max-width: 320px; height: 380px; }
  .tr-quote-text { font-size: 19px; }
  .tr-reel-cue { right: var(--gutter-mobile); }
}

/* ── Scroll progress — thin accent line at the very top of the page,
   width drives off scroll position. Helps the page feel alive without
   adding visual noise. ── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(255,255,255,0.04);
  z-index: 50;
  pointer-events: none;
}
.scroll-progress .sp-bar {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
  transform-origin: left;
  transition: width 0.05s linear;
  will-change: width;
}

/* ════════════════════════════════════════════════════════════
   11 RECEPTION — Press cards mixed into the reviewers reel
   ════════════════════════════════════════════════════════════ */
/* Press card — typographic break between the video thumbnails.
   Same 360x480 footprint as .tr-card so the reel rhythm stays even. */
.tr-card-press {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--s-32) var(--s-32) var(--s-24);
  background: linear-gradient(180deg, rgba(77,30,247,0.10) 0%, rgba(255,255,255,0.025) 60%);
  border: 1px solid rgba(255,255,255,0.10);
  overflow: hidden;
  text-decoration: none;
  color: var(--paper);
  cursor: pointer;
}
a.tr-card-press:hover {
  border-color: rgba(77,30,247,0.5);
  background: linear-gradient(180deg, rgba(77,30,247,0.16) 0%, rgba(255,255,255,0.04) 60%);
}
.tp-logo {
  display: block;
  height: 26px;
  width: auto;
  max-width: 78%;
  object-fit: contain;
  object-position: left center;
  opacity: 0.92;
  flex: 0 0 auto;
}
a.tr-card-press:hover .tp-logo { opacity: 1; }
.tp-headline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: var(--tr-snug);
  color: var(--paper);
  margin: var(--s-32) 0 auto;
  text-wrap: balance;
}
.tp-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--s-24);
  font-family: var(--font-mono);
  font-size: var(--fs-label-mono);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.tp-arrow {
  color: var(--accent);
  transition: transform 0.3s var(--ease);
}
a.tr-card-press:hover .tp-arrow { transform: translateX(4px); }

@media (max-width: 1024px) {
  .tp-headline { font-size: 26px; }
}
@media (max-width: 768px) {
  .tr-card-press { padding: var(--s-24) var(--s-24) var(--s-24); }
  .tp-headline { font-size: 23px; }
}

/* Reviewers reel — horizontal scroll like testing reel but with thumbnails */
.reviewers-reel {
  background: var(--ink);
  padding: var(--s-48) 0 var(--s-120);
}
.rv-head {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter-desktop) var(--s-32);
}
.rv-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label-mono);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  display: inline-flex;
}
.rv-eyebrow .accent { color: var(--accent); }

.rv-reel-wrap { position: relative; }
.rv-reel {
  list-style: none;
  margin: 0;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 var(--gutter-desktop) var(--s-24);
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  scroll-behavior: auto;
}
.rv-reel::-webkit-scrollbar { display: none; }
.rv-reel.is-dragging { cursor: grabbing; }
.rv-reel.is-dragging .rv-card { pointer-events: none; }

.rv-card {
  flex: 0 0 auto;
  width: 360px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rv-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-12);
  overflow: hidden;
  transition: transform 0.5s var(--ease), border-color 0.3s var(--ease);
}
.rv-card:hover .rv-thumb {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.2);
}
.rv-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.95);
  transition: transform 0.7s var(--ease), filter 0.5s var(--ease);
}
.rv-card:hover .rv-thumb img {
  transform: scale(1.03);
  filter: saturate(1);
}
.rv-thumb-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
  border: 1px dashed rgba(255,255,255,0.10);
  border-radius: inherit;
}
.rv-thumb:has(img) .rv-thumb-placeholder { display: none; }
.rv-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  color: var(--paper);
  pointer-events: none;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.rv-card:hover .rv-play {
  background: var(--accent);
  border-color: var(--accent);
}
.rv-duration {
  position: absolute;
  right: 10px; bottom: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-label-mono);
  letter-spacing: 0.06em;
  color: var(--paper);
  background: rgba(0,0,0,0.7);
  padding: 4px 8px;
  border-radius: 4px;
}
.rv-channel {
  font-family: var(--font-mono);
  font-size: var(--fs-label-mono);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.rv-title {
  font-family: var(--font-sans);
  font-size: var(--fs-detail);
  line-height: var(--lh-detail);
  color: var(--paper);
}
.rv-views {
  font-family: var(--font-mono);
  font-size: var(--fs-label-mono);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

@media (max-width: 1024px) {
  .rv-card { width: 320px; }
}
@media (max-width: 768px) {
  .rv-head { padding: 0 var(--gutter-mobile) var(--s-24); }
  .rv-reel { padding-left: var(--gutter-mobile); padding-right: var(--gutter-mobile); }
  .rv-card { width: 78vw; max-width: 300px; }
}

/* ════════════════════════════════════════════════════════════
   12 ITERATION — Beyond vs Beyond 2 side-by-side
   ════════════════════════════════════════════════════════════ */
/* Beyond 2 feature showcase. White/paper slab between the dark
   sections around it. Three big cinematic USP image cards: each
   image runs a slow Ken Burns drift, wipes open on scroll, and the
   index + label rise in after it. */
.b2-features {
  position: relative;
  background: var(--paper);
  box-shadow: 0 0 0 100vmax var(--paper);
  clip-path: inset(0 -100vmax);
  padding: var(--s-120) 0 var(--s-160);
}
.b2-inner {
  max-width: 1760px;
  margin: 0 auto;
  padding: 0 var(--s-48);
}
/* Bento: varied sizes. Next-Gen Optics is a 2x2 hero, Halo Mount a
   wide 3-wide tile, the rest fill in around them. */
.b2-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Rows 1+2 standard; row 3 taller so the halo-mount card has
     extra vertical drama at the bottom of the grid. */
  grid-template-rows:
    clamp(240px, 27vh, 340px)
    clamp(240px, 27vh, 340px)
    clamp(320px, 38vh, 460px);
  grid-auto-rows: clamp(240px, 27vh, 340px);
  gap: var(--s-16);
}
/* Halo-mount card — sits in row 3 with the taller height, so it
   reads as the visual anchor of the grid. Weight card to its
   right shares the row but keeps its smaller footprint via
   align-self. */
.b2-card.b2-card--tall { grid-row: 3 / 4; }
.b2-card:nth-child(6) { align-self: start; height: clamp(240px, 27vh, 340px); }
.b2-card {
  position: relative;
  border-radius: var(--r-12);
  overflow: hidden;
  background: var(--ink);
  /* DS: cards are flat — no drop shadows. */
  isolation: isolate;
}
/* 01 Next-Gen Optics — big hero */
.b2-card:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
/* 02 Adjustable IPD — wide */
.b2-card:nth-child(2) { grid-column: 3 / 5; grid-row: 1 / 2; }
/* 03 Eyetracking */
.b2-card:nth-child(3) { grid-column: 3 / 4; grid-row: 2 / 3; }
/* 04 More Colors */
.b2-card:nth-child(4) { grid-column: 4 / 5; grid-row: 2 / 3; }
/* 05 Halo Mount — wide */
.b2-card:nth-child(5) { grid-column: 1 / 4; grid-row: 3 / 4; }
/* 06 Weight Reduction */
.b2-card:nth-child(6) { grid-column: 4 / 5; grid-row: 3 / 4; }
.b2-shot {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Cinematic wipe: image revealed from the bottom up on scroll-in. */
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.4s var(--ease);
}
.b2-card.in .b2-shot { clip-path: inset(0 0 0 0); }
.b2-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  animation: b2-kenburns 22s var(--ease) infinite alternate;
}
@keyframes b2-kenburns {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(0, -1.6%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .b2-shot { clip-path: inset(0 0 0 0); transition: none; }
  .b2-shot img { animation: none; transform: scale(1.04); }
}
.b2-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  background:
    linear-gradient(135deg, #2a2333 0%, #14101f 100%);
  border-radius: inherit;
}
/* Cinematic scrim: soft top vignette + deep bottom for legibility. */
.b2-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(13,13,13,0.30) 0%, rgba(13,13,13,0) 26%),
    linear-gradient(180deg, rgba(13,13,13,0) 42%, rgba(13,13,13,0.28) 64%, rgba(13,13,13,0.78) 100%);
  transition: opacity var(--dur-cinema) var(--ease);
}
.b2-card:hover .b2-scrim { opacity: 0.82; }
/* Editorial index, top-left. */
.b2-idx {
  position: absolute;
  top: var(--s-24);
  left: var(--s-24);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: var(--fs-label-mono);
  letter-spacing: var(--tr-eyebrow);
  color: rgba(255,255,255,0.72);
  padding-left: 36px;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: 0.5s;
}
.b2-idx::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 24px;
  height: 1px;
  background: rgba(255,255,255,0.55);
}
.b2-card.in .b2-idx { opacity: 1; transform: translateY(0); }
.b2-tag {
  position: absolute;
  left: var(--s-24);
  right: var(--s-24);
  bottom: var(--s-24);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-12);
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: 0.55s;
}
.b2-card.in .b2-tag { opacity: 1; transform: translateY(0); }
.b2-ico {
  display: block;
  width: 28px;
  height: 28px;
  /* Provided icons are dark; render them white over the imagery. */
  filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,0.4));
  flex: 0 0 auto;
}
.b2-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-detail);
  line-height: 1.15;
  letter-spacing: var(--tr-snug);
  color: var(--paper);
  margin: 0;
}

/* "Come to order" — cards cascade in one after another with a longer,
   more cinematic gap. Specificity kept at .b2-card.* so it wins over
   the later generic .reveal shorthand (which resets the delay). */
.b2-card.reveal { transition-duration: 1.3s; }
.b2-card.b2-d1 { transition-delay: 0s; }
.b2-card.b2-d2 { transition-delay: 0.34s; }
.b2-card.b2-d3 { transition-delay: 0.68s; }
/* Stagger the inner reveals to follow each card's own entrance. */
.b2-card.b2-d2.in .b2-shot { transition-delay: 0.34s; }
.b2-card.b2-d3.in .b2-shot { transition-delay: 0.68s; }
.b2-card.b2-d2 .b2-idx, .b2-card.b2-d2 .b2-tag { transition-delay: 0.84s; }
.b2-card.b2-d3 .b2-idx, .b2-card.b2-d3 .b2-tag { transition-delay: 1.18s; }

@media (max-width: 1100px) {
  /* Simplify the bento to a 2-col grid; the two big tiles go full-width. */
  .b2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b2-card:nth-child(n) { grid-column: auto; grid-row: auto; }
  .b2-card:nth-child(1) { grid-column: 1 / 3; grid-row: span 2; }
  .b2-card:nth-child(5) { grid-column: 1 / 3; }
}
@media (max-width: 900px) {
  .b2-features { padding: var(--s-56) 0 var(--s-80); }
}
@media (max-width: 768px) {
  .b2-inner { padding: 0 var(--gutter-mobile); }
  .b2-grid { grid-template-columns: 1fr; grid-auto-rows: clamp(220px, 42vh, 320px); }
  .b2-card:nth-child(n) { grid-column: 1 / -1; grid-row: auto; }
}

/* ── Background fade strips ───────────────────────────────────────
   Drop one of these between two sections that have different
   background colors. Follows bigscreenvr.com's brand pattern:
   black -> deep indigo -> accent purple -> light lavender -> white
   (and reverse) so the bg color always transitions through brand
   color. The white wireframe lines.svg sits over the purple bloom,
   masked to fade out into the dark/light ends of the strip. */
.bg-fade {
  display: block;
  position: relative;
  height: 1200px;
  width: 100%;
  pointer-events: none;
  overflow: hidden;
}
/* The lines SVG is injected as inline DOM so we can animate every
   path's stroke individually (real "drawing" effect, not just an
   image fade). Container handles parallax + opacity + scale via the
   same custom properties as before. */
.bg-fade-lines {
  position: absolute;
  inset: -10% 0;
  pointer-events: none;
  opacity: var(--lines-opacity, 0);
  transform: translate3d(0, var(--lines-y, 0px), 0);
  will-change: transform, opacity;
}
.bg-fade-lines svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* Each path's stroke-dashoffset is driven directly from the
   --lines-progress custom property (set on .bg-fade by the JS scroll
   handler). 0 = fully drawn, 1 = fully hidden. Single fixed dasharray
   for all paths so one CSS calc controls them all. */
.bg-fade-lines path {
  stroke: #fff;
  stroke-width: 0.6px;
  fill: none;
  /* --len is set per-path by JS from getTotalLength so each path
     draws/un-draws relative to its own stroke length. No transition —
     the JS scroll handler updates --lines-progress every rAF, so any
     CSS transition just piles up against the rapid value changes and
     reads as stutter. */
  stroke-dasharray: var(--len, 600px);
  stroke-dashoffset: calc(var(--len, 600px) * var(--lines-progress, 1));
}
@media (prefers-reduced-motion: reduce) {
  .bg-fade-lines {
    transform: none;
    opacity: 0.55;
  }
  .bg-fade-lines path { transition: none; stroke-dashoffset: 0; }
}
/* Mask the lines softly across the whole band, with long fades into
   the dark and light ends so the wireframe never cuts off hard. */
.bg-fade-to-paper::before {
  -webkit-mask-image: linear-gradient(180deg, transparent 5%, #000 25%, #000 75%, transparent 95%);
          mask-image: linear-gradient(180deg, transparent 5%, #000 25%, #000 75%, transparent 95%);
}
.bg-fade-to-ink::before {
  -webkit-mask-image: linear-gradient(180deg, transparent 5%, #000 25%, #000 70%, transparent 88%);
          mask-image: linear-gradient(180deg, transparent 5%, #000 25%, #000 70%, transparent 88%);
}
/* Long, smooth multi-step transitions — ~30% of the strip on each side
   ramps through deep indigo / mid purple / accent for the dark side,
   and accent / soft lavender / near-white on the light side. Solid
   accent plateau in the middle (~30%). */
.bg-fade-to-paper {
  background: linear-gradient(180deg,
    var(--ink)        0%,
    #0d0726          10%,
    #1a0d3a          20%,
    #2d1670          30%,
    var(--accent)    40%,
    var(--accent)    56%,
    #7d56ff          66%,
    #b29eff          78%,
    #e0d6ff          90%,
    var(--paper)    100%
  );
}
.bg-fade-to-ink {
  background: linear-gradient(180deg,
    var(--paper)      0%,
    #e0d6ff          10%,
    #b29eff          22%,
    #7d56ff          34%,
    var(--accent)    44%,
    var(--accent)    58%,
    #2d1670          68%,
    #1a0d3a          78%,
    #0a052a          86%,
    #050214          93%,
    #000            100%
  );
}
/* Long ink → dawn fade for the bright community finale (no wireframe
   lines — this is a warm sunrise, not the indigo product transition). */
.bg-fade-to-sunrise {
  background: linear-gradient(180deg,
    var(--ink)   0%,
    #16100a     12%,
    #361f0f     26%,
    #6f3b1a     39%,
    #b4631d     52%,
    #ec9a44     64%,
    #ffc278     74%,
    #ffd9ac     84%,
    #ffeacf     93%,
    #fff7ed    100%
  );
}
/* Living sunrise: a sun that slowly blooms + rises, and abstract
   drifting light ribbons (warm, with a cool indigo whisper). Pure
   compositor work — only transform/opacity animate. */
.bg-fade-to-sunrise::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -28%;
  width: 150%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 50%,
    rgba(255,201,128,0.55) 0%,
    rgba(255,150,70,0.30) 28%,
    rgba(255,120,50,0.10) 46%,
    transparent 64%);
  filter: blur(22px);
  pointer-events: none;
  will-change: transform, opacity;
  animation: sun-bloom 13s ease-in-out infinite;
}
.bg-fade-to-sunrise::after {
  content: "";
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(38% 30% at 28% 64%, rgba(255,170,90,0.20), transparent 70%),
    radial-gradient(34% 26% at 74% 42%, rgba(120,90,255,0.13), transparent 70%),
    radial-gradient(48% 32% at 52% 82%, rgba(255,214,150,0.18), transparent 72%);
  filter: blur(34px);
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: transform;
  animation: sun-aurora 24s ease-in-out infinite alternate;
}
@keyframes sun-bloom {
  0%, 100% { transform: translateX(-50%) translateY(7%)  scale(0.95); opacity: 0.8; }
  50%      { transform: translateX(-50%) translateY(-3%) scale(1.07); opacity: 1; }
}
@keyframes sun-aurora {
  0%   { transform: translate3d(-3%, 3%, 0) rotate(-3deg) scale(1.05); }
  100% { transform: translate3d(3%, -4%, 0) rotate(4deg)  scale(1.13); }
}
@media (prefers-reduced-motion: reduce) {
  .bg-fade-to-sunrise::before,
  .bg-fade-to-sunrise::after { animation: none; }
}
/* Sunrise transition is shorter — the finale section has its own warm bg */
.bg-fade.bg-fade-to-sunrise { height: 500px; }
@media (max-width: 768px) {
  .bg-fade { height: 720px; }
  .bg-fade.bg-fade-to-sunrise { height: 320px; }
}

/* ════════════════════════════════════════════════════════════
   13 BEYOND 2 LAUNCH — sales pop counter
   ════════════════════════════════════════════════════════════ */
.sales-pop {
  background: linear-gradient(180deg, #000 0%, #000 70%, var(--ink) 100%);
  padding: var(--s-160) 0 var(--s-160);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sp-inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gutter-desktop);
}
.sp-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label-mono);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: var(--s-32);
  display: inline-flex;
}
.sp-eyebrow .accent { color: var(--accent); }

.sp-statement {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-headline-md);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--paper);
  margin: 0 auto;
  max-width: 22ch;
  text-wrap: balance;
}
.sp-em { color: var(--accent); font-style: normal; }

/* Big "Start the vibe" CTA — only shown (by JS) if the browser
   blocks the soundtrack autoplay. */
.sp-vibe {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: var(--s-56) auto 0;
  padding: 18px 36px;
  font-family: var(--font-mono);
  font-size: var(--fs-button);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--paper);
  background: var(--accent);
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease),
              box-shadow var(--dur-std) var(--ease);
  animation: sp-vibe-pulse 2.6s var(--ease) infinite;
}
.sp-vibe.is-on { opacity: 1; transform: none; }
.sp-vibe:hover { box-shadow: 0 0 0 6px rgba(77,30,247,0.22); }
.sp-vibe:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
.sp-vibe-ico {
  width: 0; height: 0;
  border-left: 14px solid var(--paper);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 2px;
}
@keyframes sp-vibe-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(77,30,247,0.45); }
  60%      { box-shadow: 0 0 0 18px rgba(77,30,247,0); }
}
@media (prefers-reduced-motion: reduce) {
  .sp-vibe { animation: none; transition: opacity 0.4s linear; }
  .sp-vibe.is-on { transform: none; }
}

@media (max-width: 900px) {
  .sales-pop { padding: var(--s-120) 0; }
}
@media (max-width: 768px) {
  .sp-inner { padding: 0 var(--gutter-mobile); }
  .sp-statement { max-width: none; }
  .sp-vibe { padding: 16px 28px; margin-top: var(--s-40); }
}

/* ════════════════════════════════════════════════════════════
   14 COMMUNITY — wall of customer headsets
   ════════════════════════════════════════════════════════════ */
.customer-mosaic {
  background: var(--ink);
  padding: var(--s-32) var(--gutter-desktop) var(--s-160);
}
/* Full-bleed: the wall runs edge to edge like the dark header background,
   only the intro line stays aligned to the content column. */
.customer-mosaic.wb {
  padding-left: 0;
  padding-right: 0;
}
.wb-head {
  max-width: var(--max-w);
  margin: 0 auto var(--s-40);
  padding: 0 var(--gutter-desktop);
}
.cm-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label-mono);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  display: block;
}
.cm-eyebrow .accent { color: var(--accent); }

/* Full-bleed masonry — JS distributes cards into balanced columns
   (reliable with dynamically-loaded content, unlike CSS multicol). */
.cm-grid.wb-grid {
  list-style: none;
  margin: 0;
  padding: 0 var(--gutter-desktop);
  max-width: none;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.wb-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cm-cell.wb-card {
  position: relative;
  display: block;
  margin: 0;
  aspect-ratio: auto;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-12);
  background: rgba(255,255,255,0.03);
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), border-color 0.3s var(--ease);
}
.cm-cell.wb-card.in {
  opacity: 1;
  transform: none;
}
.cm-cell.wb-card:hover { border-color: rgba(77,30,247,0.5); }

/* ── Thumb (photo + video) ── */
.wb-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(77,30,247,0.06) 100%);
  overflow: hidden;
  text-decoration: none;
  border-bottom: none;
}
.wb-card--tall .wb-thumb { aspect-ratio: 3 / 4; }
.wb-thumb img,
.wb-thumb iframe,
.wb-thumb video,
video.wb-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  filter: saturate(0.92);
  transition: filter 0.5s var(--ease), transform 0.7s var(--ease);
}
.wb-card:hover .wb-thumb img { filter: saturate(1.05); transform: scale(1.04); }
.wb-thumb-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.30);
}
.wb-thumb:has(img) .wb-thumb-ph,
.wb-thumb:has(iframe) .wb-thumb-ph { display: none; }

/* Play glyph for video cards */
.wb-play {
  position: absolute;
  top: 50%; left: 50%;
  width: 54px; height: 54px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(13,13,13,0.55);
  border: 1px solid rgba(255,255,255,0.5);
  backdrop-filter: blur(2px);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.wb-play::after {
  content: "";
  position: absolute;
  top: 50%; left: 53%;
  transform: translate(-50%, -50%);
  border-left: 15px solid var(--paper);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}
.wb-card--video:hover .wb-play {
  background: var(--accent);
  transform: translate(-50%, -50%) scale(1.06);
}

/* ── Meta row (video) ── */
.wb-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
}
.wb-src {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
}
.wb-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.42);
  white-space: nowrap;
}

/* ── Photo caption ── */
.wb-cap {
  display: block;
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
}

/* ── Review card ── */
.wb-card--review { padding: 24px 22px 22px; }
/* Real customer review with a photo/video: media on top, text below. */
.wb-card--ugc .wb-ugc-body { padding: 20px 22px 22px; }
.wb-card--ugc video.wb-thumb { background: #000; cursor: default; }

/* Anonymous customer photo — image only, natural aspect (no crop).
   Letting each photo set its own height is what gives the wall its
   organic, scrapbook-y feel instead of a uniform 4:3 grid. */
.wb-card--photo .wb-thumb {
  aspect-ratio: auto;
  background: rgba(255,255,255,0.04);
}
.wb-card--photo .wb-thumb img {
  height: auto;
  object-fit: contain;
}
.wb-stars {
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--accent);
  margin-bottom: 14px;
}
.wb-quote {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: var(--tr-snug);
  color: var(--paper);
  margin: 0 0 18px;
}
.wb-by {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.wb-name {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.7);
}
.wb-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(77,30,247,0.45);
  border-radius: var(--r-pill);
  padding: 3px 9px;
}

/* ── Press card ── */
.wb-press {
  display: block;
  padding: 24px 22px;
  text-decoration: none;
  border-bottom: none;
}
.wb-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.wb-headline {
  display: block;
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: var(--tr-snug);
  color: var(--paper);
  margin-bottom: 18px;
}
.wb-press .wb-src {
  display: block;
  color: rgba(255,255,255,0.55);
}
.wb-card--press:hover .wb-headline { color: var(--accent); }

/* Inline-playing video card */
.wb-thumb.is-playing { cursor: default; }
.wb-thumb.is-playing .wb-play { display: none; }

/* Lazy-load footer */
.wb-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-24);
  padding: var(--s-56) var(--gutter-desktop) 0;
}
.wb-more-btn {
  font-family: var(--font-mono);
  font-size: var(--fs-label-mono);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: var(--r-pill);
  padding: 14px 28px;
  cursor: pointer;
  transition: color var(--dur-std) var(--ease),
              border-color var(--dur-std) var(--ease),
              background var(--dur-std) var(--ease);
}
.wb-more-btn:hover {
  color: var(--paper);
  border-color: rgba(77,30,247,0.6);
  background: rgba(77,30,247,0.10);
}
.wb-more-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wb-sentinel { width: 100%; height: 1px; }

@media (max-width: 768px) {
  .customer-mosaic { padding: var(--s-24) 0 var(--s-80); }
  .wb-head { padding: 0 var(--gutter-mobile); }
  .cm-grid.wb-grid {
    padding: 0 var(--gutter-mobile);
    gap: 10px;
  }
  .wb-col { gap: 10px; }
  .wb-quote { font-size: 14px; }
  .wb-headline { font-size: 17px; }
  .wb-more { padding: var(--s-40) var(--gutter-mobile) 0; }
}

/* ════════════════════════════════════════════════════════════
   SUNRISE FINALE — "Bigger than ever" + the wave-of-believers
   wall flip from ink to a bright, dreamy dawn. Scoped to
   .theme-sunrise so every dark base rule elsewhere is untouched.
   ════════════════════════════════════════════════════════════ */
/* Uniformly bright. The whole dark→dawn transition lives in the long
   .bg-fade-to-sunrise band above, so the finale is just one calm warm
   surface. Full-bleed via the same box-shadow trick as .editorial.light
   (the section is a centered max-width box, so a plain background would
   leave dark side-gutters). */
.editorial.theme-sunrise {
  background: #fff7ed;
  box-shadow: 0 0 0 100vmax #fff7ed;
  clip-path: inset(0 -100vmax);
}
.editorial.theme-sunrise .editorial-meta { border-top-color: rgba(13,13,13,0.20); }
.editorial.theme-sunrise .editorial-meta .step { color: #2a1c0e; }
.editorial.theme-sunrise .editorial-meta .date { color: rgba(42,28,14,0.58); }
.editorial.theme-sunrise .editorial-headline { color: #1d1206; }
.editorial.theme-sunrise .editorial-lead { color: rgba(33,22,10,0.82); }
.editorial.theme-sunrise .editorial-body { color: rgba(43,30,16,0.66); }

.customer-mosaic.wb.theme-sunrise { background: #fff7ed; }
.theme-sunrise .cm-eyebrow { color: rgba(43,30,16,0.62); }
.theme-sunrise .cm-eyebrow .accent { color: var(--accent); }

.theme-sunrise .cm-cell.wb-card {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(120,80,30,0.12);
  box-shadow: 0 18px 44px -22px rgba(150,100,40,0.30);
}
.theme-sunrise .cm-cell.wb-card:hover { border-color: rgba(77,30,247,0.45); }
.theme-sunrise .wb-thumb { background: linear-gradient(135deg, #fbeede 0%, #f1e6ff 100%); }
.theme-sunrise .wb-thumb-ph { color: rgba(43,30,16,0.42); }
.theme-sunrise .wb-src { color: rgba(20,14,6,0.90); }
.theme-sunrise .wb-sub { color: rgba(43,30,16,0.50); }
.theme-sunrise .wb-cap { color: rgba(43,30,16,0.55); }
.theme-sunrise .wb-quote { color: #1d1206; }
.theme-sunrise .wb-name { color: rgba(29,18,6,0.70); }
.theme-sunrise .wb-headline { color: #1d1206; }
.theme-sunrise .wb-press .wb-src { color: rgba(43,30,16,0.55); }
.theme-sunrise .wb-card--press:hover .wb-headline { color: var(--accent); }
.theme-sunrise .wb-more-btn {
  color: rgba(29,18,6,0.80);
  border-color: rgba(120,80,30,0.28);
}
.theme-sunrise .wb-more-btn:hover {
  color: #1d1206;
  border-color: rgba(77,30,247,0.55);
  background: rgba(77,30,247,0.08);
}

/* Dreamy float — gentle, slow, staggered; off for reduced-motion */
@keyframes wb-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.theme-sunrise .cm-cell.wb-card.in { animation: wb-float 8s ease-in-out infinite; }
.theme-sunrise .cm-cell.wb-card:nth-child(3n)   { animation-duration: 9.5s;  animation-delay: -1.2s; }
.theme-sunrise .cm-cell.wb-card:nth-child(3n+1) { animation-duration: 7.5s;  animation-delay: -0.4s; }
.theme-sunrise .cm-cell.wb-card:nth-child(4n)   { animation-duration: 10.5s; animation-delay: -2.1s; }
.theme-sunrise .cm-cell.wb-card:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .theme-sunrise .cm-cell.wb-card.in { animation: none; }
}

/* wb-head becomes a row; tap-to-play music control */
.theme-sunrise .wb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
}
.wb-music {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-label-mono);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: rgba(29,18,6,0.80);
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(120,80,30,0.25);
  border-radius: var(--r-pill);
  padding: 9px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-std) var(--ease),
              border-color var(--dur-std) var(--ease),
              background var(--dur-std) var(--ease);
}
.wb-music:hover { border-color: rgba(77,30,247,0.50); color: #1d1206; }
.wb-music:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wb-music.is-playing { color: var(--accent); border-color: rgba(77,30,247,0.50); }
.wb-eq { display: inline-flex; align-items: flex-end; gap: 2px; width: 16px; height: 14px; }
.wb-eq i { flex: 1; background: currentColor; height: 35%; border-radius: 1px; }
.wb-music.is-playing .wb-eq i { animation: wb-eq 0.9s ease-in-out infinite; }
.wb-music.is-playing .wb-eq i:nth-child(2) { animation-delay: 0.15s; }
.wb-music.is-playing .wb-eq i:nth-child(3) { animation-delay: 0.30s; }
.wb-music.is-playing .wb-eq i:nth-child(4) { animation-delay: 0.45s; }
@keyframes wb-eq { 0%,100% { height: 28%; } 50% { height: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .wb-music.is-playing .wb-eq i { animation: none; height: 60%; }
}
@media (max-width: 768px) {
  .theme-sunrise .wb-head { flex-direction: column; align-items: flex-start; }
}

/* ════════════════════════════════════════════════════════════
   FINALE EXPERIENCE — chapter 14 is not a numbered chapter, it's
   a moment. Copy + wall are gated until "Start the vibe" (JS adds
   html.vibe-ready to arm the gate, html.vibe-on to release it),
   then everything reveals in sequence over a vibing emoji sky.
   No JS → no gate, everything just shows.
   ════════════════════════════════════════════════════════════ */
.editorial.finale {
  display: block;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  padding: var(--s-240) var(--gutter-desktop);
}
.emoji-sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.emoji-sky img {
  position: absolute;
  bottom: -16%;
  width: var(--sz, 84px);
  height: auto;
  opacity: 0;
  will-change: transform, opacity;
  animation: emoji-rise var(--t, 16s) linear var(--d, 0s) infinite;
  filter: drop-shadow(0 8px 18px rgba(120,70,20,0.18));
}
@keyframes emoji-rise {
  0%   { transform: translateY(0) rotate(var(--r0, -8deg)); opacity: 0; }
  12%  { opacity: var(--op, 0.9); }
  88%  { opacity: var(--op, 0.9); }
  100% { transform: translateY(calc(-1 * (100vh + 30%))) translateX(var(--sway, 40px)) rotate(var(--r1, 10deg)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .emoji-sky { display: none; }
}

.finale-copy {
  position: relative;
  z-index: 1;
  max-width: 18ch;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-32);
  align-items: center;
}
.finale-h {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-xlarge);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: #1d1206;
  margin: 0;
  text-wrap: balance;
}
.finale-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-subhead);
  line-height: var(--lh-subhead);
  letter-spacing: var(--tr-snug);
  color: rgba(33,22,10,0.78);
  margin: 0;
  max-width: 20ch;
  text-wrap: balance;
}
.finale-smile {
  font-family: var(--font-sans);
  font-size: var(--fs-headline-md);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: #1d1206;
  margin: var(--s-16) 0 0;
  text-wrap: balance;
}

/* ── The gate ── */
html.vibe-ready .finale-copy > *,
html.vibe-ready .finale-wall .wb-head,
html.vibe-ready .finale-wall .cm-grid,
html.vibe-ready .finale-wall .wb-more {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease),
              transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
html.vibe-on .finale-copy > *,
html.vibe-on .finale-wall .wb-head,
html.vibe-on .finale-wall .cm-grid,
html.vibe-on .finale-wall .wb-more {
  opacity: 1;
  transform: none;
}
/* Choreography — copy first, then the wall a beat later */
html.vibe-on .finale-h     { transition-delay: 0.15s; }
html.vibe-on .finale-lead  { transition-delay: 0.60s; }
html.vibe-on .finale-smile { transition-delay: 1.10s; }
html.vibe-on .finale-wall .wb-head { transition-delay: 1.60s; }
html.vibe-on .finale-wall .cm-grid { transition-delay: 1.85s; }
html.vibe-on .finale-wall .wb-more { transition-delay: 2.10s; }
@media (prefers-reduced-motion: reduce) {
  html.vibe-ready .finale-copy > *,
  html.vibe-ready .finale-wall .wb-head,
  html.vibe-ready .finale-wall .cm-grid,
  html.vibe-ready .finale-wall .wb-more { transition: opacity 0.5s linear; transform: none; }
}

@media (max-width: 768px) {
  .editorial.finale { padding: var(--s-160) var(--gutter-mobile); }
  .finale-copy { max-width: none; }
}

/* ── Face-scan side video — sits under the right-column body text ── */
.face-scan-side {
  position: relative;
  margin: 32px 0 32px;
}
.face-scan-side .fs-video-side {
  display: block;
  width: 100%;
  aspect-ratio: 640 / 556;
  background: #050505;
  border-radius: 8px;
  filter: brightness(0.95) contrast(1.04);
}
.face-scan-side .fs-side-caption {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
}
.face-scan-side .fs-side-caption .accent { color: var(--accent); }
.face-scan-side .fs-side-meta {
  display: inline-block;
  margin-top: 4px;
  color: rgba(255,255,255,0.4);
}

/* ── Hardware photo — single full-width Bighouse shot, slow emerge-from-darkness
   reveal: fades in while brightness lifts and a slight zoom-out plays. Different
   visual signature from the cinema triptych's clip-path wipe. ── */
.hardware-photo {
  position: relative;
  width: 100%;
  height: 86vh;
  min-height: 600px;
  background: #000;
  overflow: hidden;
}
.hardware-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  filter: brightness(0.25) contrast(1.05);
  transform: scale(1.06);
  transition:
    opacity 1.8s cubic-bezier(.4,0,.2,1),
    filter 2.6s cubic-bezier(.4,0,.2,1),
    transform 2.8s cubic-bezier(.4,0,.2,1);
  will-change: opacity, filter, transform;
}
.hardware-photo.is-on img {
  opacity: 1;
  filter: brightness(1) contrast(1.02);
  transform: scale(1);
}
.hardware-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.20) 0%,
    transparent 22%,
    transparent 60%,
    rgba(0,0,0,0.85) 100%);
}
.hp-section-caption {
  position: absolute;
  right: 80px;
  bottom: 56px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1.0s var(--ease) 0.8s, transform 1.0s var(--ease) 0.8s;
}
.hardware-photo.is-on .hp-section-caption {
  opacity: 1;
  transform: translateY(0);
}
.hp-section-caption .hp-num { color: var(--accent); margin-right: 12px; }
.hp-section-caption .hp-text { color: rgba(255,255,255,0.85); }
.hp-section-caption .hp-meta { color: rgba(255,255,255,0.5); }

@media (max-width: 768px) {
  .hardware-photo {
    height: 60vh;
    min-height: 380px;
  }
  .hp-section-caption { right: 24px; bottom: 24px; }
}

/* ── Prototype contact sheet — 4×3 grid of build photos ── */
.proto-collage { background: var(--ink); }
.proto-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 240px;
  gap: 8px;
}
.proto-tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-12);
  cursor: zoom-in;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.3s var(--ease);
}
.proto-tile:hover {
  transform: translateY(-4px) scale(1.015);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 24px 48px -16px rgba(0,0,0,0.6);
  z-index: 2;
}
.proto-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease), filter 0.5s var(--ease);
  filter: saturate(0.95);
}
.proto-tile:hover img {
  transform: scale(1.06);
  filter: saturate(1);
}
/* Caption per tile — small mono label at bottom-left, sits on a soft scrim */
.proto-tile .proto-caption {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  padding: 4px 0;
}
.proto-tile::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 50%;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
  z-index: 1;
  opacity: 0.9;
  transition: opacity 0.4s var(--ease);
}
.proto-tile:hover::after { opacity: 1; }
@media (max-width: 900px) {
  .proto-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; }
}
@media (max-width: 600px) {
  .proto-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
}

/* (legacy sticky cinema-reveal styles below — orphaned but harmless,
   kept temporarily in case the variant is reintroduced) */

/* ──────────────────────────────────────────────
   Cinema reveal — sticky scroll-driven curtain-up
   Restrained: solid black panels with a subtle outer-to-inner
   gradient for depth, a soft footlight glow underneath,
   no fake velvet texture.
   ────────────────────────────────────────────── */
.cinema-reveal {
  position: relative;
  height: 160vh;        /* tighter — 60vh of pin runway, no dead air */
  background: #000;
}
.cr-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #000;
}

/* Cinema image — hidden behind the panels until they slide off */
.cr-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.cr-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.78) contrast(1.04);
  transform: scale(1.08);
  transform-origin: center 55%;
  will-change: transform;
}
.cr-glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse 75% 85% at 50% 55%,
    transparent 0%,
    rgba(0,0,0,0.25) 55%,
    rgba(0,0,0,0.70) 100%);
}

/* Footlight — soft warm pool at center-bottom, suggests a real stage,
   visible behind the closed panels and fading out as they part. */
.cr-pin::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10%;
  width: 60%;
  height: 35%;
  z-index: 3;
  background: radial-gradient(ellipse at center bottom,
    rgba(255,200,140,0.18) 0%,
    rgba(255,200,140,0.06) 35%,
    transparent 65%);
  filter: blur(24px);
  transform: translateX(-50%);
  opacity: var(--cr-foot, 1);
  transition: opacity 0.05s linear;
  pointer-events: none;
}

/* Solid panels — outer edge slightly lifted, inner edge deep black for depth */
.cr-curtain {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50.5%;        /* slight overlap so no center seam shows */
  z-index: 5;
  will-change: transform;
}
.cr-curtain-l {
  left: 0;
  background: linear-gradient(90deg,
    #141414 0%,
    #0a0a0a 30%,
    #050505 65%,
    #000 100%);
}
.cr-curtain-r {
  right: 0;
  background: linear-gradient(90deg,
    #000 0%,
    #050505 35%,
    #0a0a0a 70%,
    #141414 100%);
}
/* Inner-edge hairline accent — picks up the era color (software-blue here). */
.cr-curtain::after {
  content: '';
  position: absolute;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--accent) 30%,
    var(--accent) 70%,
    transparent 100%);
  opacity: 0.55;
  pointer-events: none;
}
.cr-curtain-l::after { right: 0; }
.cr-curtain-r::after { left: 0; }

/* Title-card overlay */
.cr-text {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 80px;
  opacity: 1;
  will-change: opacity;
}
.cr-eb {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 36px;
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.cr-eb.in { opacity: 1; transform: translateY(0); }
.cr-eb .accent { color: var(--accent); }
.cr-headline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 112px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--paper);
  text-wrap: balance;
}
.cr-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
}
.cr-line > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1.1s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.cr-line.in > span { transform: translateY(0); }

/* Bottom caption — fades in once curtains are mostly open */
.cr-caption {
  position: absolute;
  left: 80px;
  bottom: 56px;
  z-index: 7;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.cr-caption.in { opacity: 1; transform: translateY(0); }
.cr-caption .num { color: var(--accent); margin-right: 10px; }

@media (max-width: 768px) {
  .cinema-reveal { height: 200vh; }
  .cr-text { padding: 0 24px; }
  .cr-caption { left: 24px; bottom: 32px; }
}

/* Reduced motion: skip the curtain animation, present the cinema image directly */
@media (prefers-reduced-motion: reduce) {
  .cr-curtain { display: none; }
  .cr-text { opacity: 0; }
  .cr-caption { opacity: 1; transform: none; }
  .cr-stage img { transform: scale(1); }
}

/* ── Floating render — transparent PNG vignette on the ink background.
   Sits between the 2019 threshold and the platform editorial, drifting in
   on scroll like the room is settling into view. ── */
.floating-render {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 8px;
  margin-top: -45vh;     /* pull hard into the threshold's tail */
  margin-bottom: -18vh;  /* close the gap with the editorial below */
  background: transparent;
  display: flex;
  justify-content: center;
  /* no overflow:hidden — drop-shadow needs room to render */
}
/* Editorial right after the floating render gets a tighter top so the room
   image sits closer to the "04 The Platform" headline. */
.floating-render + .editorial {
  padding-top: 88px;
}
.floating-render img {
  display: block;
  width: 100%;
  max-width: 2000px;
  height: auto;
  opacity: 0;
  transform: scale(0.97);
  transition:
    opacity 1.4s cubic-bezier(.2,.8,.2,1),
    transform 1.6s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
  filter: drop-shadow(0 40px 80px rgba(0,0,0,0.7));
}
.floating-render.is-on img {
  opacity: 1;
  transform: scale(1);
}
@media (max-width: 768px) {
  .floating-render { padding: 0; margin-top: -20vh; }
}

/* ──────────────────────────────────────────────
   Manifesto — the software→hardware pivot moment.
   Sits right after the era-software wrapper closes, so the indigo
   accent (--accent) is back to the brand purple. Massive type,
   line-by-line clip-mask reveal on scroll.
   ────────────────────────────────────────────── */
/* Manifesto — stacked full-viewport blocks. Each beat gets its own
   ~100vh of scroll, fades in via IntersectionObserver. No sticky pin. */
.manifesto {
  position: relative;
  background: #000;
  overflow: hidden;
}
/* Soft gradient at the bottom — eases the deep #000 of the manifesto
   into the --ink (#0D0D0D) of the next chapter (Hardware threshold). */
.manifesto::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 35vh;
  background: linear-gradient(180deg, transparent 0%, var(--ink) 100%);
  pointer-events: none;
  z-index: 2;
}
.m-block {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px;
  text-align: center;
}
.m-block-but { min-height: 70vh; }
.m-block-text { min-height: 100vh; }
.m-block-popup {
  min-height: 100vh;
  flex-direction: column;
  gap: 18px;
}
@media (max-width: 768px) {
  .m-block { padding: 40px 24px; }
}

/* Eyebrow — matches every other eyebrow on the site. */
.m-eb {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.m-block-eb.in .m-eb { opacity: 1; transform: translateY(0); }
.m-eb .accent { color: var(--accent); }

/* "But…" — typewriter reveal with a subtle blinking cursor */
.m-but {
  margin: 0;
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.4;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  border-right: 2px solid rgba(255,255,255,0.55);
}
.m-block-but.in .m-but {
  animation:
    typeBut 0.7s steps(5, end) 0.3s forwards,
    cursorBlink 0.6s step-end 1s 4,
    cursorHide 0s linear 3.4s forwards;
}
@keyframes typeBut {
  to { width: 4.2ch; }
}
@keyframes cursorBlink {
  50% { border-right-color: transparent; }
}
@keyframes cursorHide {
  to { border-right-color: transparent; }
}
.m-but .m-dots-soft { color: rgba(255,255,255,0.3); }

/* Headline — smaller, more aesthetic, line-by-line clip-mask reveal */
.m-text {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--paper);
  text-wrap: balance;
  max-width: 900px;
}
.m-text .m-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}
.m-text .m-line-inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1.0s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.m-block-text.in .m-text .m-line:nth-child(1) .m-line-inner { transform: translateY(0); transition-delay: 0.10s; }
.m-block-text.in .m-text .m-line:nth-child(2) .m-line-inner { transform: translateY(0); transition-delay: 0.30s; }
.m-block-text.in .m-text .m-line:nth-child(3) .m-line-inner { transform: translateY(0); transition-delay: 0.50s; }
/* Third line ("we needed…") fully indigo for emphasis */
.m-text .m-line:nth-child(3) { color: var(--accent); }
.m-text .m-dots { color: var(--accent); }

/* ── Discord-style notification popup — Darshan's actual joke message ── */
/* ── Discord channel window — recreated chat with two messages ── */
.discord-window {
  position: relative;
  display: block;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  background: #2b2d31;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 32px 64px rgba(0,0,0,0.7);
  text-align: left;
  opacity: 0;
  transform: translateY(28px) scale(0.94);
  transition:
    opacity 0.55s var(--ease),
    transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.m-block-popup.in .discord-window {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.discord-window::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(88,101,242,0);
}
.discord-window.pling::before {
  animation: discordPling 1.6s ease-out 1;
}

.dw-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #1e1f22;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: #f2f3f5;
}
.dw-hash {
  color: #80848e;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
}
.dw-channel { color: #f2f3f5; }

.dw-messages {
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 180px;
}
.dw-msg {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transition:
    opacity 0.45s var(--ease),
    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dw-msg.is-shown {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.dw-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  flex-shrink: 0;
}
.dw-avatar-d { background: linear-gradient(135deg, #5865f2 0%, #404eed 100%); }
.dw-avatar-c { background: linear-gradient(135deg, #f0b232 0%, #c98c1f 100%); }
.dw-avatar-m { background: linear-gradient(135deg, #3ba55d 0%, #248045 100%); }
.dw-avatar-photo { overflow: hidden; padding: 0; }
.dw-avatar-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dw-body {
  flex: 1;
  min-width: 0;
}
.dw-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
  font-family: var(--font-sans);
  flex-wrap: wrap;
}
.dw-name { font-size: 15px; font-weight: 600; color: #f2f3f5; }
.dw-time { font-size: 12px; color: #949ba4; }
.dw-text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.4;
  color: #dbdee1;
}
.dw-emoji {
  font-size: 1.15em;
  display: inline-block;
}
.dw-gif {
  display: block;
  max-width: 320px;
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin-top: 4px;
}

/* System message — "X joined the chat" style: indented, italic, faint */
.dw-msg-system {
  align-items: center;
  gap: 12px;
  padding-left: 52px;       /* line up with where avatars start indenting */
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  color: #949ba4;
  font-style: italic;
}
.dw-msg-system .dw-arrow {
  color: #3ba55d;
  font-style: normal;
  font-size: 14px;
  flex-shrink: 0;
}
.dw-msg-system strong {
  color: #f2f3f5;
  font-weight: 600;
  font-style: normal;
}
.dw-system-text { display: inline-block; }

@media (max-width: 768px) {
  .dw-messages { padding: 14px 12px; }
}

/* Small disclaimer under the chat window — fades in with the popup block */
.dw-disclaimer {
  margin: 0 auto;
  max-width: 540px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.4);
  text-align: center;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.6s var(--ease) 0.5s,
    transform 0.6s var(--ease) 0.5s;
}
.m-block-popup.in .dw-disclaimer {
  opacity: 1;
  transform: translateY(0);
}
.dw-disclaimer .accent { color: var(--accent); }

/* Disclaimer beneath the Discord screenshot */
.discord-disclaimer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 32px auto 0;
  max-width: 540px;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.7s var(--ease) 0.4s,
    transform 0.7s var(--ease) 0.4s;
}
.m-block-disclaimer.in .discord-disclaimer {
  opacity: 1;
  transform: translateY(0);
}
.dd-eb {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.dd-eb .accent { color: var(--accent); }
.dd-body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255,255,255,0.6);
  font-style: italic;
}
@keyframes discordPling {
  0%   { box-shadow: 0 0 0 0 rgba(88,101,242,0); }
  20%  { box-shadow: 0 0 0 0 rgba(88,101,242,0.7); }
  100% { box-shadow: 0 0 0 22px rgba(88,101,242,0); }
}
.dc-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f5660 0%, #36393f 100%);
  color: rgba(255,255,255,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
  font-family: var(--font-sans);
}
.dc-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.dc-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--font-sans);
}
.dc-name {
  font-size: 15px;
  font-weight: 600;
  color: #f2f3f5;
  letter-spacing: 0;
}
.dc-time {
  font-size: 12px;
  color: #949ba4;
}
.dc-message {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.4;
  color: #dbdee1;
  margin: 0;
  letter-spacing: 0;
}

@media (max-width: 768px) {
  .manifesto { padding: 120px 24px 140px; }
  .manifesto-eb { margin-bottom: 36px; }
  .manifesto-text { margin-bottom: 64px; }
  .discord-popup { padding: 14px 16px; max-width: 100%; }
}

/* ──────────────────────────────────────────────
   Work-in-progress lock — everything after .wip-marker stays visible
   but is heavy-blurred and non-interactive. Remove the marker (and these
   rules) to unlock the rest of the page.
   ────────────────────────────────────────────── */
.wip-marker { display: block; height: 0; }
.wip-marker ~ section { display: none; }
/* Year-rail anchors that point to locked content — hide so clicks
   don't jump into the blurred zone. */
/* Year-rail entries for s2024–s2026 are now live with real content
   (chapters 12–14). No display: none here anymore. */

/* ── Chapter bridge — short dark text card between sections ──
   Background grades from --ink at the top (kisses the mosaic above seamlessly)
   down to near-black at the bottom (kisses the cinema photo-band's #000). */
.chapter-bridge {
  background: linear-gradient(180deg,
    var(--ink) 0%,
    var(--ink) 18%,
    #080808 55%,
    #030303 85%,
    #000 100%);
  padding: 160px 80px 200px;
  text-align: center;
  position: relative;
}
.chapter-bridge::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: 56px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.18));
  transform: translateX(-50%);
}
.chapter-bridge-inner {
  max-width: 900px;
  margin: 0 auto;
}
.chapter-bridge-eb {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 36px;
  display: inline-block;
}
.chapter-bridge-eb .accent { color: var(--accent); }
.chapter-bridge-text {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(40px, 5.6vw, 88px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--paper);
  text-wrap: balance;
}
@media (max-width: 768px) {
  .chapter-bridge { padding: 96px 24px; }
}

/* ── Cinematic photo-band variant — softer top fade so chapter-bridge flows
   into the image, deeper bottom fade so it hands off to merged editorial. ── */
.photo-band-cinematic::after {
  background: linear-gradient(180deg,
    rgba(13,13,13,0.85) 0%,
    rgba(0,0,0,0.30) 18%,
    transparent 45%,
    transparent 60%,
    rgba(0,0,0,0.95) 100%);
}

/* ── Inline partners — Paramount + Funimation as a stripe inside the merged
   cinema editorial. No separate band, but still feels like a partner moment. ── */
.inline-partners {
  margin-top: 48px;
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: 32px;
}
/* When the partner row sits as a direct child of the editorial grid,
   span both content columns so the logos have breathing room. */
.editorial.cinema-merged > .inline-partners {
  grid-column: 2 / -1;
}
.ip-eb {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 32px;
  display: block;
}
.ip-eb .accent { color: var(--accent); }
.ip-row {
  display: flex;
  align-items: center;
  gap: 56px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  padding-bottom: 36px;
}
.ip-mark {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.ip-name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -0.01em;
  color: var(--paper);
  line-height: 1;
}
.ip-logo {
  display: block;
  height: 48px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.ip-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.ip-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(255,255,255,0.16);
}
@media (max-width: 768px) {
  .inline-partners { margin-top: 28px; padding-top: 24px; }
  .ip-row { gap: 20px; flex-wrap: wrap; }
  .ip-name { font-size: 20px; }
  /* Drop the desktop col-2/-1 placement so partners stack into the
     single-column flow instead of forcing a phantom second column. */
  .editorial.cinema-merged > .inline-partners { grid-column: 1; }
  .ip-divider { display: none; }
}

/* Cinema-merged section — full black, full bleed, clean alignment. */
.editorial.cinema-merged {
  background: #000;
  box-shadow: 0 0 0 100vmax #000;
  clip-path: inset(0 -100vmax);
}
.editorial.cinema-merged .editorial-meta {
  position: static;       /* drop the sticky so the meta aligns with the headline */
  align-self: start;
}

/* ── Partner band — Paramount + Funimation cinema launch ── */
.partners-band {
  position: relative;
  background: var(--ink);
  padding: 120px 80px;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.partners-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 90% 50%, rgba(77,30,247,0.10) 0%, transparent 60%);
  pointer-events: none;
}
.partners-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
}
.partners-eb {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 28px;
  display: inline-flex;
}
.partners-eb .accent { color: var(--accent); }
.partners-headline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(36px, 4.2vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--paper);
  margin-bottom: 24px;
}
.partners-lead {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255,255,255,0.7);
  max-width: 520px;
}
.partners-marks {
  display: flex;
  align-items: center;
  gap: 48px;
  border-top: 1px solid rgba(255,255,255,0.14);
  border-bottom: 1px solid rgba(255,255,255,0.14);
  padding: 36px 0;
}
.partner-mark {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.pm-name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -0.01em;
  color: var(--paper);
  line-height: 1;
}
.pm-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.partner-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(255,255,255,0.14);
}
@media (max-width: 1024px) {
  .partners-inner { gap: 48px; }
}
@media (max-width: 768px) {
  .partners-band { padding: 80px 24px; }
  .partners-inner { grid-template-columns: 1fr; gap: 32px; }
  .partners-marks { gap: 24px; padding: 24px 0; }
  .pm-name { font-size: 22px; }
}

/* Mobile — 2×2 collapses to single column */
@media (max-width: 768px) {
  .mosaic.mosaic-places .mosaic-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 280px);
    gap: 8px;
  }
}

/* ── Climax (cinema-black product moment) ── */
.climax {
  position: relative;
  padding: 200px 80px;
  text-align: center;
  background: #000;
  color: var(--paper);
  overflow: hidden;
  border-top: 1px solid var(--ink-2);
  border-bottom: 1px solid var(--ink-2);
}
.climax::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(77,30,247,0.16) 0%, transparent 55%);
  pointer-events: none;
}
.climax-caption {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 56px;
  position: relative;
}
.climax-caption .accent { color: var(--accent); }
.climax-headline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(64px, 12vw, 200px);
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: var(--paper);
  margin-bottom: 64px;
  position: relative;
}
.climax-headset { margin-bottom: 80px; position: relative; }
.climax-headset img { width: min(60vw, 760px); margin: 0 auto; opacity: 0.95; }
.climax-headset svg { width: min(60vw, 760px); height: auto; }
.climax-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 800px;
  margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.18);
  position: relative;
}
.climax-stats .spec-cell {
  text-align: center;
  padding: 28px 16px;
  border-bottom: none;
  border-right: 1px solid rgba(255,255,255,0.12);
}
.climax-stats .spec-cell:last-child { border-right: none; }
.climax-stats .spec-cell .value { color: var(--paper); font-size: 40px; }
.climax-stats .spec-cell .value .unit { color: rgba(255,255,255,0.55); }
.climax-stats .spec-cell .label { color: rgba(255,255,255,0.55); }

/* ════════════════════════════════════════════════════════════
   REVEAL CINEMA (#s2023)
   The 2023 Beyond launch moment. Background matches the dark ink
   of the surrounding sections so there's no hard step. Headline is
   left-aligned (white head + muted subhead, same scale family),
   the trailer autoplays muted under it, and a small play pill
   below unmutes/restarts with sound on click.
   ════════════════════════════════════════════════════════════ */
.reveal-cinema {
  position: relative;
  background: #000;
  color: var(--paper);
  padding: var(--s-160) 0 var(--s-120);
  overflow: hidden;
}

/* Fade the threshold above the reveal cinema into deep black so the visual
   transition starts well before the headline appears, leading the eye into
   the trailer's opening dark frames. The sticky stage with the year numerals
   sits above the overlay so the "2023" stays clear. */
.threshold:has(+ .reveal-cinema)::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 60vh;
  background: linear-gradient(180deg, transparent 0%, var(--ink) 30%, #000 100%);
  pointer-events: none;
  z-index: 1;
}
.threshold:has(+ .reveal-cinema) .threshold-stage {
  z-index: 2;
}
.rc-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter-desktop);
}

.reveal-cinema .rc-head {
  margin-bottom: var(--s-56);
  text-align: center;
}
.reveal-cinema .rc-eyebrow {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-label-mono);
  line-height: var(--lh-label-mono);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: var(--s-32);
}
.reveal-cinema .rc-eyebrow .accent { color: var(--accent); }

.reveal-cinema .rc-headline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-headline-md);
  line-height: var(--lh-headline-md);
  letter-spacing: var(--tr-snug);
  color: var(--paper);
  margin: 0 0 var(--s-4);
}
.reveal-cinema .rc-subhead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-headline-md);
  line-height: var(--lh-headline-md);
  letter-spacing: var(--tr-snug);
  color: rgba(255,255,255,0.4);
  margin: 0;
}

/* Video stage — clean, full-content-width frame with cinematic entrance */
.rc-stage {
  position: relative;
  margin: 0 0 var(--s-48);
}
.rc-stage::before {
  content: "";
  position: absolute;
  inset: -8% -4%;
  background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(255,255,255,0.06) 0%, transparent 70%);
  filter: blur(40px);
  opacity: 0;
  transition: opacity 2.4s var(--ease) 1.6s;
  pointer-events: none;
  z-index: -1;
}
.rc-stage.in::before { opacity: 1; }

/* Slow, spaced-out cinematic entrance for the reveal section.
   Override the global .reveal timings so the head, subhead, frame and body
   build in sequence instead of cascading in under a second. */
.reveal-cinema .reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 2.2s var(--ease), transform 2.2s var(--ease);
}
.reveal-cinema .reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal-cinema .reveal.d1 { transition-delay: 0.55s; }
.reveal-cinema .reveal.d2 { transition-delay: 1.10s; }
.reveal-cinema .reveal.d3 { transition-delay: 1.75s; }

.rc-stage.reveal {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 2.6s var(--ease), transform 2.6s var(--ease);
}
.rc-stage.reveal.in {
  opacity: 1;
  transform: scale(1);
}

.rc-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #050505;
  border-radius: var(--r-12);
  overflow: hidden;
  box-shadow: 0 60px 140px -40px rgba(0,0,0,0.85);
}
.rc-video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  background: #050505;
  transition: filter 1.2s var(--ease);
}
.rc-stage[data-state="muted"] .rc-video { filter: brightness(0.9); }
.rc-stage[data-state="playing"] .rc-video { filter: none; }

/* Mute toggle in the top-right of the video frame */
.rc-mute {
  position: absolute;
  top: var(--s-16);
  right: var(--s-16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  padding: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  color: var(--paper);
  cursor: pointer;
  transition: background var(--dur-std) var(--ease), border-color var(--dur-std) var(--ease);
  z-index: 2;
}
.rc-mute:hover {
  background: rgba(0,0,0,0.7);
  border-color: rgba(255,255,255,0.4);
}
.rc-mute:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.rc-mute-icon { display: none; }
.rc-stage[data-state="muted"] .rc-mute-icon-on { display: inline-flex; }
.rc-stage[data-state="playing"] .rc-mute-icon-off { display: inline-flex; }

/* Play / Pause toggle — sits next to the mute pill, same chrome. */
.rc-play {
  position: absolute;
  top: var(--s-16);
  right: calc(var(--s-16) + 52px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  padding: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  color: var(--paper);
  cursor: pointer;
  transition: background var(--dur-std) var(--ease), border-color var(--dur-std) var(--ease);
  z-index: 2;
}
.rc-play:hover {
  background: rgba(0,0,0,0.7);
  border-color: rgba(255,255,255,0.4);
}
.rc-play:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.rc-play-icon { display: none; }
.rc-stage[data-playstate="paused"]  .rc-play-icon-play  { display: inline-flex; }
.rc-stage[data-playstate="playing"] .rc-play-icon-pause { display: inline-flex; }
/* Default (no playstate attr yet) — show Play icon so the control reads. */
.rc-stage:not([data-playstate]) .rc-play-icon-play { display: inline-flex; }

/* Foot — body copy under the video, centered with comfortable measure. */
.rc-foot {
  margin: 0 auto var(--s-80);
  max-width: 70ch;
  text-align: center;
}
.rc-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: rgba(255,255,255,0.78);
  margin: 0;
}

@media (max-width: 900px) {
  .reveal-cinema { padding: var(--s-120) 0 var(--s-80); }
  .rc-inner { padding: 0 var(--gutter-mobile); }
  .reveal-cinema .rc-head { margin-bottom: var(--s-40); }
  .rc-foot { margin-bottom: var(--s-48); }
}

/* ── Beyond 2 launch: faithful YouTube watch page ──
   Sits in the dark reveal-cinema, reads as a real YouTube view.
   Colors here are intentionally YouTube's own UI palette
   (#0f0f0f / #606060 / #f2f2f2 / #f00) — this is a third-party
   UI mock, not design-system surface, so it deliberately departs
   from the editorial tokens to look authentic. */
.yt-card {
  max-width: 1040px;
  margin: 0 auto;
  background: var(--paper);
  border-radius: var(--r-12);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
  text-align: left;
}
.yt-player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  cursor: pointer;
}
.yt-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 88px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.yt-play svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.45)); transition: transform var(--dur-std) var(--ease); }
.yt-play .yt-play-bg { fill: #f00; }
.yt-player:hover .yt-play svg { transform: scale(1.08); }
.yt-player.is-playing { cursor: default; }
.yt-player.is-playing .yt-thumb,
.yt-player.is-playing .yt-play { display: none; }
.yt-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.yt-meta { padding: 20px 24px 24px; }
.yt-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: var(--tr-snug);
  color: #0f0f0f;
  margin: 0 0 16px;
}
.yt-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.yt-owner { display: flex; align-items: center; gap: 12px; }
.yt-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0f0f0f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  flex: 0 0 auto;
}
.yt-ch { display: flex; flex-direction: column; line-height: 1.3; }
.yt-ch-name { font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: #0f0f0f; }
.yt-ch-subs { font-family: var(--font-sans); font-size: 12px; color: #606060; }
.yt-subscribe {
  margin-left: 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  background: #0f0f0f;
  border: 0;
  border-radius: var(--r-pill);
  padding: 9px 16px;
  cursor: pointer;
  white-space: nowrap;
}
.yt-buttons { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.yt-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  color: #0f0f0f;
  background: #f2f2f2;
  border-radius: var(--r-pill);
  padding: 9px 15px;
  cursor: pointer;
  white-space: nowrap;
}
.yt-btn svg {
  width: 21px; height: 21px;
  flex: 0 0 auto;
  fill: none;
  stroke: #0f0f0f;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.yt-likepill {
  display: flex;
  align-items: stretch;
  background: #f2f2f2;
  border-radius: var(--r-pill);
}
.yt-likepill .yt-btn { background: transparent; }
.yt-divider { width: 1px; background: rgba(0,0,0,0.12); margin: 8px 0; }

.yt-desc {
  margin-top: 16px;
  background: #f2f2f2;
  border-radius: 12px;
  padding: 14px 16px;
}
.yt-desc-meta {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  color: #0f0f0f;
  margin-bottom: 6px;
}
.yt-desc-text {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  color: #0f0f0f;
  margin: 0;
}
.yt-more { font-weight: 600; color: #606060; }

@media (max-width: 768px) {
  .yt-meta { padding: 16px 16px 18px; }
  .yt-title { font-size: 17px; margin-bottom: 14px; }
  .yt-actions { gap: 12px; }
  .yt-buttons { width: 100%; }
}

/* ── SVG headset draw ── */
.headset-svg path,
.headset-svg circle,
.headset-svg ellipse,
.headset-svg rect,
.headset-svg line {
  fill: none;
  stroke: var(--paper);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.draw path, .draw circle, .draw ellipse, .draw rect, .draw line {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
}
.draw.in path, .draw.in circle, .draw.in ellipse, .draw.in rect, .draw.in line {
  animation: drawStroke 2.6s var(--ease) forwards;
}
@keyframes drawStroke { to { stroke-dashoffset: 0; } }

/* ── Quote band ── */
.quote-band {
  padding: 160px 80px;
  text-align: left;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-warm);
  max-width: var(--max-w);
  margin: 0 auto;
}
.quote-band-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 40px;
  align-items: start;
}
.quote-band-mark {
  font-family: var(--font-sans);
  font-size: 96px;
  font-weight: 400;
  line-height: 0.7;
  color: var(--accent);
}
.quote-text {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 32px;
  text-wrap: balance;
}
.quote-attr {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}
.quote-attr .name { color: var(--ink); }

/* ── TechCrunch press card ── */
.press-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: var(--r-12);
  overflow: hidden;
  margin-top: 32px;
  background: var(--paper);
}
.press-card .img {
  background: var(--paper-2);
  overflow: hidden;
  max-height: 260px;
  min-height: 240px;
}
.press-card .img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.press-card .body-pad {
  padding: 32px 32px 28px;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 16px;
}
.press-card h4 {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
}
.press-card .src {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}
.press-card .src .accent { color: var(--accent); }

/* ── Outro ── */
.outro {
  padding: 200px 80px;
  text-align: left;
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.outro::before {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(77,30,247,0.4) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
.outro-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
}
.outro-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 48px;
  display: flex; align-items: center; gap: 14px;
}
.outro-mono::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--accent);
}
.outro-headline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(56px, 9vw, 144px);
  letter-spacing: -0.035em;
  line-height: 0.96;
  margin-bottom: 32px;
  max-width: 1100px;
}
.outro-line {
  font-family: var(--font-sans);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.4;
  color: rgba(255,255,255,0.7);
  margin-bottom: 64px;
  max-width: 720px;
}
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Buttons (pills, design system) ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  border-bottom: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-std) var(--ease), color var(--dur-std) var(--ease), transform var(--dur-micro) var(--ease), border-color var(--dur-std) var(--ease);
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-deep); opacity: 1; }
.btn-ghost-on-dark {
  color: var(--paper);
  border-color: rgba(255,255,255,0.3);
}
.btn-ghost-on-dark:hover { border-color: var(--paper); opacity: 1; }
.btn-ghost {
  color: var(--ink);
  border-color: var(--rule);
}
.btn-ghost:hover { border-color: var(--ink); opacity: 1; }

/* ── Reveal animations ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal.d1 { transition-delay: 0.10s; }
.reveal.d2 { transition-delay: 0.20s; }
.reveal.d3 { transition-delay: 0.32s; }
.reveal.d4 { transition-delay: 0.44s; }

/* ── Section divider hairline (between paper sections) ── */
.editorial + .editorial,
.editorial + .quote-band,
.collage-section + .editorial {
  border-top: 1px solid var(--rule);
}

/* ──────────────────────────────────────────────
   DARK-MAJORITY OVERRIDE
   The page lives on ink (#0D0D0D). A handful of
   editorial scenes flip back to paper via .light
   to break the rhythm.
   ────────────────────────────────────────────── */
html, body { background: var(--ink); color: var(--paper); }
::selection { background: var(--accent); color: #fff; }

/* Hero — dark, minimal */
.hero { background: var(--ink); }

/* Threshold — interactive scroll gap between major sections */
.threshold {
  position: relative;
  background: var(--ink);
  height: 130vh; /* 30vh of scroll runway past the pin — enough for the scrub, no dead space */
  color: rgba(255,255,255,0.7);
}
/* The Chapter 03 threshold (before remote-stage) is tighter — no need for full runway */
.threshold[data-year="2018"] {
  height: 40vh;
}
/* The 2025 threshold sits directly under the purple section — go
   straight to pure black here so the gradient resolves cleanly
   into the Beyond 2 launch chapter. */
.threshold[data-year="2025"] {
  background: #000;
}
.threshold + section,
.threshold + .big-photo { border-top: 0; }
.threshold-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  align-items: center;
  justify-items: center;
  padding: 14vh 80px 10vh;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  text-align: center;
}
.threshold-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  display: flex;
  align-items: center;
  gap: 18px;
}
.threshold-mono .threshold-tick {
  font-feature-settings: "tnum" 1;
  color: var(--accent);
  min-width: 3ch;
  text-align: left;
}
.threshold-line {
  width: 1px;
  height: 100%;
  max-height: 44vh;
  background: rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
  margin: 24px 0;
}
.threshold-line-fill {
  position: absolute;
  inset: 0 0 100% 0;
  background: var(--accent);
  transition: inset 0.05s linear;
  will-change: inset;
}
.threshold-year {
  font-family: var(--font-mono);
  font-size: clamp(72px, 14vw, 200px);
  letter-spacing: -0.04em;
  line-height: 0.86;
  color: rgba(255,255,255,0.95);
  font-feature-settings: "tnum" 1;
  display: flex;
  align-items: baseline;
}
.threshold-year .thr-y-pre { color: rgba(255,255,255,0.28); }
.threshold-year .thr-y-1,
.threshold-year .thr-y-2 {
  color: rgba(255,255,255,0.28);
  transition: color 0.5s cubic-bezier(.2,.8,.2,1);
}
.threshold.is-lit .threshold-year .thr-y-1,
.threshold.is-lit .threshold-year .thr-y-2 {
  color: var(--accent);
}
.threshold-cap {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: var(--s-24);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.threshold.is-end .threshold-cap { opacity: 1; }
.threshold-arrow {
  display: inline-block;
  animation: thrArrow 1.6s ease-in-out infinite;
}
@keyframes thrArrow {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(6px); opacity: 1; }
}
.hero-eyebrow { color: rgba(255,255,255,0.65); }
.hero-headline { color: var(--paper); }
.hero-headline .hh-num { color: var(--accent); text-shadow: 0 0 60px rgba(77,30,247,0.25); }
.hero-headline .hh-line-em { color: rgba(255,255,255,0.45); }
.hero-range { color: rgba(255,255,255,0.5); }
.hero-range .hr-y { color: var(--paper); }
.hero-range .hr-track { background: rgba(255,255,255,0.18); }
.hero-sub { color: rgba(255,255,255,0.6); max-width: 520px; }
.scroll-cue { color: rgba(255,255,255,0.5); }
.scroll-cue::after { background: rgba(255,255,255,0.5); }

/* Nav — dark blur on scroll, light wordmark */
.nav.is-scrolled {
  background: rgba(13,13,13,0.72);
  border-bottom-color: rgba(255,255,255,0.08);
}


/* Year-rail */
.year-rail a { color: rgba(255,255,255,0.4); }
.year-rail a:hover { color: var(--paper); }
.year-rail a.active { color: var(--accent); }
.year-rail a.active::before { background: var(--accent); }

/* Light-bg sections (e.g. the 2024 Beyond-2 dev block) put a paper
   background with a purple gradient wash on top — the default white
   rail text becomes invisible and the accent purple loses contrast
   against the lavender. Flip to dark ink so the rail still reads.
   Also flips the top nav: light blur + dark logo so it stops looking
   like a heavy dark band over the lighter section. */
body.is-light-section .year-rail a { color: rgba(13,13,13,0.42); }
body.is-light-section .year-rail a:hover { color: var(--ink); }
body.is-light-section .year-rail a.active { color: var(--ink); }
body.is-light-section .year-rail a.active::before { background: var(--ink); }
body.is-light-section .nav.is-scrolled {
  background: rgba(255,255,255,0.78);
  border-bottom-color: rgba(13,13,13,0.08);
}
body.is-light-section .nav .wordmark img {
  /* SVG is authored white; remove the invert so it renders as ink black */
  filter: brightness(0) invert(0);
}

/* Editorial sections — dark by default */
.editorial { background: var(--ink); }
.editorial .editorial-meta { border-top-color: rgba(255,255,255,0.5); }
.editorial .editorial-meta .step { color: var(--paper); }
.editorial .editorial-meta .date { color: rgba(255,255,255,0.5); }
.editorial .editorial-headline { color: var(--paper); }
.editorial .editorial-lead { color: rgba(255,255,255,0.85); }
.editorial .editorial-body { color: rgba(255,255,255,0.6); }
.editorial .spec-grid { border-top-color: rgba(255,255,255,0.12); }
.editorial .spec-cell { border-bottom-color: rgba(255,255,255,0.12); }
.editorial .spec-cell .value { color: var(--paper); }
.editorial .spec-cell .value .unit { color: rgba(255,255,255,0.5); }
.editorial .spec-cell .label { color: rgba(255,255,255,0.5); }
.editorial .funding-chip {
  color: var(--paper);
  border-color: rgba(255,255,255,0.18);
}

/* Collage on dark */
.collage-section { background: var(--ink); }
.collage-tile {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
.collage-placeholder { color: rgba(255,255,255,0.35); }
.collage-caption { color: rgba(255,255,255,0.5); }

/* Mosaic */
.mosaic { background: var(--ink); }

/* Quote band — dark by default */
.quote-band {
  background: var(--ink);
  border-top-color: rgba(255,255,255,0.10);
  border-bottom-color: rgba(255,255,255,0.10);
}
/* The Carmack quote sits on the deep-black canvas of the reveal cinema —
   match that black and span the full viewport so there's no seam (and no
   light bars at the edges from the body background). */
.reveal-cinema + .quote-band {
  background: linear-gradient(180deg, #000 0%, #000 65%, var(--ink) 100%);
  border-top-color: transparent;
  border-bottom-color: transparent;
  max-width: none;
}
.quote-band .quote-text { color: var(--paper); }
.quote-band .quote-attr { color: rgba(255,255,255,0.55); }
.quote-band .quote-attr .name { color: var(--paper); }
.quote-band-mark { color: var(--accent); }

/* Section dividers between dark editorials */
.editorial + .editorial,
.editorial + .quote-band,
.collage-section + .editorial { border-top: 1px solid rgba(255,255,255,0.06); }

/* ── .light flip-back scenes (paper) ── */
.editorial.light {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 0 0 100vmax var(--paper);
  clip-path: inset(0 -100vmax);
}
.editorial.light .editorial-meta { border-top-color: var(--ink); }
.editorial.light .editorial-meta .step { color: var(--ink); }
.editorial.light .editorial-meta .date { color: var(--mute); }
.editorial.light .editorial-headline { color: var(--ink); }
.editorial.light .editorial-lead { color: var(--ink-soft); }
.editorial.light .editorial-body { color: var(--mute-2); }
.editorial.light .spec-grid { border-top-color: var(--rule); }
.editorial.light .spec-cell { border-bottom-color: var(--rule); }
.editorial.light .spec-cell .value { color: var(--ink); }
.editorial.light .spec-cell .value .unit { color: var(--mute); }
.editorial.light .spec-cell .label { color: var(--mute); }
.editorial.light .funding-chip { color: var(--ink); border-color: var(--rule); }
.editorial.light + .editorial,
.editorial + .editorial.light,
.editorial.light + .collage-section,
.collage-section + .editorial.light { border-top: none; }

.collage-section.light { background: var(--paper); }
.collage-section.light .collage-tile {
  background: var(--paper-2);
  border-color: var(--rule);
}
.collage-section.light .collage-placeholder { color: var(--mute); }
.collage-section.light .collage-caption { color: var(--mute); }

.quote-band.light {
  background: var(--paper-warm);
  border-top-color: var(--rule);
  border-bottom-color: var(--rule);
}
.quote-band.light .quote-text { color: var(--ink); }
.quote-band.light .quote-attr { color: var(--mute); }
.quote-band.light .quote-attr .name { color: var(--ink); }

.press-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
.press-card .img { background: rgba(255,255,255,0.06); }
.press-card h4 { color: var(--paper); }
.press-card .src { color: rgba(255,255,255,0.55); }
.editorial.light .press-card {
  background: var(--paper);
  border-color: var(--rule);
}
.editorial.light .press-card .img { background: var(--paper-2); }
.editorial.light .press-card h4 { color: var(--ink); }
.editorial.light .press-card .src { color: var(--mute); }

/* Buttons on dark */
.btn-ghost { color: var(--paper); border-color: rgba(255,255,255,0.3); }
.btn-ghost:hover { border-color: var(--paper); }

/* ──────────────────────────────────────────────
   Remote-team header — pinned scroll-driven stage
   ────────────────────────────────────────────── */
.remote-stage {
  position: relative;
  height: 110vh;       /* just enough for animations to fire, then move on */
  background: var(--ink);
}
.remote-stage-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #000;
}
.remote-stage-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.remote-stage-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  filter: grayscale(var(--bg-grayscale, 1)) contrast(1.02) brightness(0.85);
  transform: scale(var(--bg-scale, 1.02));
  transform-origin: center center;
  transition: transform 0.1s linear, filter 0.2s linear;
  will-change: transform, filter;
}
.remote-stage-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 60%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.85) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 18%, rgba(0,0,0,0.15) 70%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
  mix-blend-mode: multiply;
}
.remote-stage-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 8.333% 8.333%;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 55%, transparent 0%, transparent 35%, #000 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 55%, transparent 0%, transparent 35%, #000 80%);
  pointer-events: none;
}

/* Top meta corners */
.remote-meta {
  position: absolute;
  top: 96px;
  z-index: 5;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.remote-stage-pin.is-on .remote-meta { opacity: 1; transform: translateY(0); }
.remote-meta.tl { left: 80px; }
.remote-meta.tr { right: 80px; color: rgba(255,255,255,0.62); }
.remote-meta .dash { width: 28px; height: 1px; background: var(--accent); }
.remote-meta .live-dot {
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 999px;
  box-shadow: 0 0 0 0 var(--accent);
  animation: liveDot 1.6s ease-in-out infinite;
}
@keyframes liveDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(77,30,247,0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(77,30,247,0); }
}

/* City pins — sit just outside the photographed table */
.city-pin {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.city-pin[data-side="l"] { left: var(--x); top: var(--y); transform: translate(-12px, 0); }
.city-pin[data-side="r"] { right: var(--x); top: var(--y); flex-direction: row-reverse; transform: translate(12px, 0); }
.city-pin.in { opacity: 1; transform: translate(0,0); }
.city-pin .cp-bar {
  display: inline-block;
  width: 38px; height: 1px;
  background: var(--accent);
  flex-shrink: 0;
}
.city-pin .cp-name {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 500;
}
.city-pin .cp-tz {
  color: rgba(255,255,255,0.5);
  font-feature-settings: "tnum" 1;
}
.city-pin[data-side="r"] .cp-name { order: -1; }

/* Center overlay */
.remote-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  text-align: center;
  width: min(1100px, calc(100% - 160px));
}
.remote-eb {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.remote-eb .accent { color: var(--accent); }
.remote-stage-pin.is-on .remote-eb { opacity: 1; transform: translateY(0); }

.remote-headline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(56px, 9.5vw, 156px);
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: #fff;
  text-wrap: balance;
}
.rh-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.04em;
}
.rh-inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1.1s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.rh-inner.em { color: var(--accent); }
.rh-line.in .rh-inner { transform: translateY(0); }

.remote-counter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 720px;
  margin: 56px auto 0;
  border-top: 1px solid rgba(255,255,255,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.18);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px) saturate(0.9);
  -webkit-backdrop-filter: blur(8px) saturate(0.9);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.9s var(--ease) 0.2s, transform 0.9s var(--ease) 0.2s;
}
.remote-stage-pin.is-on .remote-counter { opacity: 1; transform: translateY(0); }
.rc-cell {
  padding: 18px 8px;
  border-right: 1px solid rgba(255,255,255,0.10);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.rc-cell:last-child { border-right: none; }
.rc-v {
  font-family: var(--font-mono);
  font-size: 36px;
  color: #fff;
  line-height: 1;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}
.rc-l {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

/* Bottom progress bar */
.remote-progress {
  position: absolute;
  left: 80px;
  right: 80px;
  bottom: 56px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.55);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.remote-stage-pin.is-on .remote-progress { opacity: 1; }
.rp-track {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.14);
  position: relative;
  overflow: hidden;
}
.rp-fill {
  position: absolute;
  inset: 0 100% 0 0;
  background: var(--accent);
  transition: inset 0.05s linear;
}
.rp-label {
  white-space: nowrap;
  color: rgba(255,255,255,0.85);
}

@media (max-width: 900px) {
  /* Pins are hidden on mobile, so the long scroll runway is just empty
     black space — collapse the section to the height of the sticky pin. */
  .remote-stage { height: 110vh; }
  .remote-meta.tl { left: 24px; top: 80px; }
  .remote-meta.tr { right: 24px; top: 80px; }
  .city-pin .cp-bar { width: 18px; }
  .city-pin .cp-name { font-size: 11px; }
  .city-pin .cp-tz { display: none; }
  .remote-counter { grid-template-columns: repeat(2, 1fr); margin-top: 32px; }
  .rc-cell:nth-child(2) { border-right: none; }
  .remote-progress { left: 24px; right: 24px; bottom: 32px; }
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .hero { padding: 0 40px; }
  .hero-min { padding-top: 22vh; }
  .scroll-cue { left: 40px; }
}

@media (max-width: 768px) {
  .nav { padding: 0 24px; height: 56px; }

  /* Floating render — scale the room image 2× and crop equal slices off the
     left/right with overflow hidden, so the screen + couch dominate the
     frame on mobile while staying centered. */
  .floating-render {
    padding: 0;
    margin-top: -14vh;
    margin-bottom: -8vh;
    overflow: hidden;
  }
  .floating-render img {
    width: 200%;
    max-width: none;
    flex-shrink: 0;
  }

  /* Polaroids — 2-column grid on mobile so the strip doesn't scroll forever.
     Drop the rotation overlap effect since cards are now in a clean grid. */
  .team-polaroids { padding: 24px 16px 56px; }
  .polaroid-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px 0 0;
  }
  .polaroid {
    width: 100%;
    margin: 0;
    transform: none !important;
    padding: 6px 6px 22px;
  }
  .polaroid img:first-child { height: 140px; }
  .polaroid span { font-size: 8px; }

  /* Remote-stage — fill the viewport with the photo (cover, not contain),
     stack the meta to the top-left only, and hide the dense city pins that
     would otherwise overlap the central headline on a narrow screen. */
  .remote-stage-bg img { object-fit: cover; }
  .remote-meta.tr { display: none; }
  .remote-meta.tl { left: 24px; right: 24px; top: 80px; font-size: 10px; flex-wrap: wrap; }
  .city-pin { display: none; }
  .remote-overlay { width: calc(100% - 48px); }

  /* Editorial — single-column stack on mobile (meta on top, content below).
     The implicit `grid-column: 2 / span 2` on .editorial-content used to
     create phantom columns even when grid-template-columns was 1fr; clamp
     all children to column 1 so the layout actually collapses. */
  .editorial {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 80px 24px;
  }
  .editorial-meta {
    position: static;
    grid-column: 1;
  }
  .editorial-content,
  .editorial-content.split { grid-column: 1; grid-template-columns: 1fr; gap: 32px; }
  .editorial-headline { font-size: clamp(36px, 9vw, 48px); }
  .editorial-lead { font-size: clamp(18px, 4.6vw, 22px); }

  .year-rail { display: none; }
  .climax { padding: 96px 24px; }
  .climax-stats { grid-template-columns: 1fr; }
  .climax-stats .spec-cell {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .climax-stats .spec-cell:last-child { border-bottom: none; }
  .photo-band { height: 60vh; min-height: 400px; }
  .photo-band-overlay {
    padding: 0 24px 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .mosaic { padding: 0 24px var(--s-80); }
  .mosaic-grid { grid-template-columns: 1fr; grid-template-rows: repeat(5, 220px); }
  .mosaic-tile.tall { grid-row: span 1; }
  .outro { padding: 96px 24px; }
  .quote-band { padding: 96px 24px; }
  .quote-band-inner { grid-template-columns: 1fr; gap: 16px; }
  .quote-band-mark { font-size: 64px; }
  .collage-section { padding: 0 24px var(--s-80); }
  .collage-10 { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .collage-press { grid-template-columns: 1fr; grid-template-rows: auto; }
  .collage-users { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .press-card { grid-template-columns: 1fr; }

  /* Hero — anchor content near the top so the headline can't crash into
     the bottom-anchored Scroll cue. Shrink the giant "10" so it fits the
     narrow viewport without stretching the whole hero. */
  .hero {
    align-items: flex-start;
    padding: 96px 24px 140px;
  }
  .hero-min { padding-top: 12vh; }
  .hero-headline { font-size: clamp(48px, 12vw, 72px); }
  .hero-sub { font-size: 18px; line-height: 1.45; max-width: none; }
  .scroll-cue { left: 24px; bottom: 28px; }

  /* R&D section — give the meta column the same single-column treatment. */
  .editorial-rd { padding: 96px 24px; }
  .editorial-rd .rd-intro { margin-bottom: 32px; }
  .rd-usp-num { font-size: 14px; }
  .rd-usp-title { font-size: clamp(22px, 5.8vw, 28px); }

  /* Reveal cinema — bump the headline a touch so "Bigscreen Beyond." has
     proper presence on mobile, and tighten side padding. */
  .reveal-cinema { padding: var(--s-120) 0 var(--s-80); }
  .rc-inner { padding: 0 24px; }
  .reveal-cinema .rc-headline,
  .reveal-cinema .rc-subhead { font-size: clamp(32px, 8.4vw, 40px); line-height: 1.1; }
  .reveal-cinema .rc-sub,
  .rc-foot { margin-bottom: var(--s-48); }
  .rc-body { font-size: 17px; }
  .rc-mute { width: 36px; height: 36px; top: 12px; right: 12px; }
  .rc-play { width: 36px; height: 36px; top: 12px; right: calc(12px + 44px); }

  /* Carmack pull-quote — tighten the giant quote text on phones. */
  .reveal-cinema + .quote-band { padding: 96px 24px; }
  .quote-text { font-size: clamp(22px, 6vw, 32px); }

  /* Threshold cap — keep extra spacing rule from desktop, scale slightly. */
  .threshold-cap { margin-top: 20px; }
}

/* ──────────────────────────────────────────────
   Hero photo collage — animated background grid
   Many small tiles cycle through a pool of greyscale
   archive photos, Oculus-Home style cell wipes.
   Sits behind hero text via z-index.
   ────────────────────────────────────────────── */
.hero-collage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #0a0a0a;
  /* Dissolve the entire collage (grid + grain + veil) into the ink page background
     across the bottom third, so the hero hands off cleanly to the next section. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,0.85) 75%, rgba(0,0,0,0.4) 90%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,0.85) 75%, rgba(0,0,0,0.4) 90%, transparent 100%);
}
.hero-collage-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 1px;
  background: #050505;
}
.hc-tile {
  position: relative;
  overflow: hidden;
  background: #0a0a0a;
}
.hc-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(0.42) contrast(1.06);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.hc-tile .hc-overlay {
  z-index: 2;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}
.hc-tile.swapping .hc-overlay {
  opacity: 1;
  will-change: clip-path;
}
.hc-tile.swapping .hc-overlay {
  animation: hcFade 1.4s cubic-bezier(.4,0,.2,1) forwards;
  clip-path: none;
}
@keyframes hcFade { from { opacity: 0; } to { opacity: 1; } }

/* Film grain over the grid */
.hero-collage-grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  animation: hcGrain 1.2s steps(4) infinite;
}
@keyframes hcGrain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-12px, 8px); }
  50%  { transform: translate(8px, -10px); }
  75%  { transform: translate(-6px, -4px); }
  100% { transform: translate(0, 0); }
}

/* Veil — vignette + center darken so the indigo "10" always pops */
.hero-collage-veil {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 75% at 28% 50%, rgba(13,13,13,0.92) 0%, rgba(13,13,13,0.65) 30%, rgba(13,13,13,0.30) 60%, rgba(13,13,13,0.10) 80%, transparent 100%),
    linear-gradient(180deg, rgba(13,13,13,0.55) 0%, rgba(13,13,13,0.10) 28%, rgba(13,13,13,0.10) 70%, rgba(13,13,13,0.85) 100%);
}

/* Hero content needs to sit above the collage. .scroll-cue keeps its
   own position: absolute (bottom-left anchor) — only bump its z-index. */
.hero .hero-min { position: relative; z-index: 5; }
.hero .scroll-cue { z-index: 5; }

/* On small screens — taller layout, same total cell count */
@media (max-width: 768px) {
  .hero-collage-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
  }
  .hero-collage-grain { opacity: 0.16; }
}

/* Respect reduced-motion preference: still show the grid, just don't animate */
@media (prefers-reduced-motion: reduce) {
  .hero-collage-grain { animation: none; }
  .hc-tile.swapping .hc-overlay { animation-duration: 0.01ms; }
}

/* ════════════════════════════════════════════════════════════
   FINALE — cinematic scroll-locked story (GSAP/ScrollTrigger)
   Black → orange peel → white, rising sun, drifting emojis,
   sentence-by-sentence reveal, then the white review wall.
   ════════════════════════════════════════════════════════════ */

/* No-JS / pre-init: section is normal flow and readable. GSAP adds
   .cine-ready to switch into the pinned, layered, hidden state. */
.cine {
  position: relative;
  background: #000;
  padding: 120px var(--gutter-desktop);
}
.cine-stage { max-width: 900px; margin: 0 auto; text-align: center; }
.cine-bg { display: none; }
.cine .cine-block + .cine-block { margin-top: 80px; }

/* Pinned, cinematic state (JS present) */
.cine.cine-ready {
  height: 100vh;
  overflow: hidden;
  padding: 0;
  background: #000;
  transition: background-color 1.1s var(--ease, ease);
}
.cine.cine-ready .cine-stage {
  position: absolute;
  inset: 0;
  max-width: none;
  display: block;
}

/* ── Background layers — pure black ── */
.cine.cine-ready .cine-bg {
  display: block;
  position: absolute;
  inset: 0;
  background-color: #000;
  z-index: 0;
  transition: background-color 1.1s var(--ease, ease);
}
/* At the wall, the stage goes white so any sliver above the white
   wall is seamless. Reversible (class removed on scroll-up). */
body.cine-white .cine.cine-ready,
body.cine-white .cine.cine-ready .cine-bg { background-color: #fff; }
/* Block 4 stays visible while the stage whitens — its text simply
   darkens so it remains readable on the white background — then
   fades out late so the wall hand-off is seamless. */
body.cine-white .cine .cine-block {
  opacity: 0;
  transition: opacity 0.7s var(--ease, ease) 1.1s;
}
body.cine-white .cine .cine-line,
body.cine-white .cine .cine-eyebrow,
body.cine-white .cine .cine-line em,
body.cine-white .cine .cine-line .accent,
body.cine-white .cine .cine-eyebrow .accent {
  color: #0a0a0a;
  transition: color 1.0s var(--ease, ease);
}
/* Make sure a transition is set in the OFF state too so reversing
   back to white-on-black animates rather than snaps. */
.cine.cine-ready .cine-line,
.cine.cine-ready .cine-eyebrow,
.cine.cine-ready .cine-line em,
.cine.cine-ready .cine-line .accent,
.cine.cine-ready .cine-eyebrow .accent {
  transition: color 0.6s var(--ease, ease);
}
/* Drifting emoji swarm behind the review wall — subtle ambient life.
   A second layer (.wb-emojis-front) pops a few OVER the cards. */
.wb-emojis {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.wb-emojis-front { z-index: 3; }            /* above the cards (z-index 1) */
.wb-emojis-front img { opacity: 0.85; }
.wb-emojis img {
  position: absolute;
  width: var(--sz, 60px);
  height: auto;
  opacity: 0.5;
  will-change: transform;
  filter: drop-shadow(0 10px 22px rgba(60,40,90,0.18));
}

/* ── Text blocks (stacked, GSAP-driven, one at a time) ── */
.cine.cine-ready .cine-block {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 0 var(--gutter-desktop);
  margin: 0;
  opacity: 0;                     /* GSAP reveals one at a time */
  will-change: transform, opacity;
}
.cine-eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.cine-eyebrow .accent { color: var(--accent); }
.cine-line {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(28px, 4.2vw, 56px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}
.cine-lg { font-size: clamp(30px, 4.8vw, 64px); max-width: 16ch; }
.cine-line em {
  font-style: normal;
  color: var(--accent);
}
.cine-h {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(44px, 8vw, 120px);
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--paper);
  margin: 0;
  text-wrap: balance;
}
/* Play CTA — appears on the final block. A round play glyph + "Play".
   On-brand: white on black, violet on hover. GSAP eases it in. */
.cine-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--r-pill);
  padding: 12px 26px 12px 14px;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease),
              transform 0.3s var(--ease);
}
.cine-btn-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--paper);
  color: #000;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
              transform 0.3s var(--ease);
}
.cine-btn-ico svg { transform: translateX(1px); }   /* optically centre */
.cine-btn:hover {
  color: var(--paper);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.cine-btn:hover .cine-btn-ico {
  background: var(--accent);
  color: var(--paper);
  transform: scale(1.06);
}
.cine-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* Once the cine stage has faded to white (handing off to the wall), the
   Play button reads as a lonely glyph on a blank page. Fade it out
   FASTER than the bg whiten so it's gone before any limbo state. */
body.cine-white .cine-btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}

/* ════════════════════════════════════════════════════════════
   Review wall — white background grand finale
   (reuses .cm-grid/.wb-card structure; recolours for white)
   ════════════════════════════════════════════════════════════ */
.wb-wall {
  position: relative;
  background: #fff;
  padding: 120px 0 160px;
  overflow: hidden;            /* clip the drifting emoji layer */
}
/* Wall content rides above the ambient emoji layer (z-index:0). */
.wb-wall > .wb-head,
.wb-wall > .cm-grid,
.wb-wall > .wb-more { position: relative; z-index: 1; }
/* Hidden until the "Show results" button reveals it (GSAP). A scroll
   fallback also reveals it so it's never permanently hidden. */
.wb-wall.wb-armed { opacity: 0; }
.wb-wall.wb-armed.wb-in { opacity: 1; }
.wb-wall .cm-eyebrow { color: rgba(20,20,22,0.55); }
.wb-wall .cm-eyebrow .accent { color: var(--accent); }
.wb-wall .wb-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: var(--s-56, 56px);
}
.wb-title {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #161018;
  margin: 0;
  text-align: center;
}

/* ── Mute toggle — fixed, centred at the bottom ── */
.wb-mute {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(12px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #161018;
  background: rgba(255,255,255,0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(15,15,20,0.16);
  border-radius: var(--r-pill);
  padding: 11px 20px 11px 16px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  z-index: 100000;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease),
              border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.wb-mute[hidden] { display: none; }
.wb-mute.is-shown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.wb-mute:hover { border-color: rgba(77,30,247,0.55); color: var(--accent); }
.wb-mute-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wb-mute-ico .wb-slash { opacity: 0; transition: opacity 0.2s var(--ease); }
.wb-mute-ico .wb-wave  { opacity: 1; transition: opacity 0.2s var(--ease); }
.wb-mute.is-muted .wb-mute-ico .wb-slash { opacity: 1; }
.wb-mute.is-muted .wb-mute-ico .wb-wave  { opacity: 0; }
@media (max-width: 768px) {
  .wb-mute { bottom: 18px; }
}
.wb-wall .cm-cell.wb-card {
  background: #fff;
  border: 1px solid rgba(15,15,20,0.10);
  box-shadow: 0 1px 2px rgba(15,15,20,0.04);
}
.wb-wall .cm-cell.wb-card:hover { border-color: rgba(77,30,247,0.45); }
.wb-wall .wb-thumb {
  background: linear-gradient(135deg, #f3f0ff 0%, #fbe9da 100%);
}
.wb-wall .wb-thumb-ph { color: rgba(20,20,22,0.4); }
.wb-wall .wb-src { color: rgba(15,15,20,0.88); }
.wb-wall .wb-sub { color: rgba(15,15,20,0.45); }
.wb-wall .wb-quote { color: #161018; }
/* Review text is clamped; "Read more" expands it in place. */
.wb-wall .wb-quote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
}
.wb-wall .wb-card.is-expanded .wb-quote,
.wb-wall .wb-card.wb-fits .wb-quote {
  -webkit-line-clamp: unset;
  overflow: visible;
}
.wb-readmore {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.wb-readmore:hover { text-decoration: underline; }
.wb-card.wb-fits .wb-readmore { display: none; }
.wb-wall .wb-name { color: rgba(15,15,20,0.65); }
.wb-wall .wb-headline { color: #161018; }
.wb-wall .wb-press .wb-src { color: rgba(15,15,20,0.5); }
.wb-wall .wb-card--press:hover .wb-headline { color: var(--accent); }
.wb-wall .wb-more-btn {
  color: rgba(15,15,20,0.7);
  border-color: rgba(15,15,20,0.2);
}
.wb-wall .wb-more-btn:hover {
  color: var(--accent);
  border-color: rgba(77,30,247,0.55);
  background: rgba(77,30,247,0.07);
}
/* Music toggle on white */
.wb-wall .wb-music {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(15,15,20,0.7);
  background: transparent;
  border: 1px solid rgba(15,15,20,0.2);
  border-radius: var(--r-pill);
  padding: 10px 18px;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.wb-wall .wb-music:hover { color: var(--accent); border-color: rgba(77,30,247,0.5); }
.wb-wall .wb-music .wb-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.wb-wall .wb-music .wb-eq i {
  width: 3px; height: 4px;
  background: currentColor;
  border-radius: 1px;
}
.wb-wall .wb-music.is-playing .wb-eq i { animation: wb-eq 0.9s ease-in-out infinite; }
.wb-wall .wb-music.is-playing .wb-eq i:nth-child(2) { animation-delay: 0.15s; }
.wb-wall .wb-music.is-playing .wb-eq i:nth-child(3) { animation-delay: 0.3s; }
.wb-wall .wb-music.is-playing .wb-eq i:nth-child(4) { animation-delay: 0.45s; }
@keyframes wb-eq {
  0%, 100% { height: 4px; }
  50%      { height: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .cine-cue::before { animation: none; }
  .wb-wall .wb-music.is-playing .wb-eq i { animation: none; }
}
@media (max-width: 768px) {
  .wb-wall .wb-head { padding: 0 var(--gutter-mobile); }
}

/* ── Beyond 2 YouTube link ── */
.b2l-foot-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.b2l-watch {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  margin-top: var(--s-16);
  transition: color var(--dur-std) var(--ease);
}
.b2l-watch:hover { color: var(--paper); }

/* ── Section 12b · Team grew (editorial + photo strip) ──
   Uses the same .editorial.light pattern as ch.11 Shipping, then a
   refined photo strip below: one tall hero on the left, four smaller
   tiles arranged in a 2×2 grid on the right. Stays on paper. */
.editorial.tg + .tg-photos {
  /* no top border — flows directly from the editorial above */
}

.tg-photos {
  background: var(--paper);
  box-shadow: 0 0 0 100vmax var(--paper);
  clip-path: inset(0 -100vmax);
  padding: var(--s-32) 0 var(--s-120);
}

.tg-photos-grid {
  max-width: 1760px;
  margin: 0 auto;
  padding: 0 var(--s-48);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s-16);
}

.tgp-cell {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: var(--ink);
  aspect-ratio: 4 / 5;
  border-radius: var(--r-12);
}

.tgp-cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1) contrast(1.05) brightness(0.95);
  transition: filter 600ms var(--ease), transform 1.2s var(--ease);
}

.tgp-cell:hover img {
  filter: grayscale(0) contrast(1.05) brightness(1);
  transform: scale(1.02);
}

/* Inky scrim on hover for caption legibility */
.tgp-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 55%, rgba(13,13,13,0.7) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms var(--ease);
}

.tgp-cell:hover::after { opacity: 1; }

.tgp-cap {
  position: absolute;
  bottom: var(--s-16);
  left: var(--s-16);
  display: flex;
  align-items: center;
  gap: var(--s-8);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--paper);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}

.tgp-cell:hover .tgp-cap {
  opacity: 1;
  transform: translateY(0);
}

.tgp-fig {
  color: var(--accent);
  font-weight: 500;
}

@media (max-width: 900px) {
  .tg-photos { padding: var(--s-24) 0 var(--s-80); }
  .tg-photos-grid {
    grid-template-columns: 1fr;
    padding: 0 var(--gutter-mobile);
    gap: var(--s-12);
  }
  .tgp-cell { aspect-ratio: 16 / 10; }
  .tgp-cap { opacity: 1; transform: none; }
  .tgp-cell::after { opacity: 0.4; }
}

/* ── Section 12b END ── */
  background: #000;
  padding: 2px 0 0;
}

.tpb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 55vh 38vh;
  gap: 2px;
  min-height: 560px;
}

/* Top row: first cell spans 2 cols, second spans 1 */
.tpb-cell:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
.tpb-cell:nth-child(2) { grid-column: 3;     grid-row: 1; }
.tpb-cell:nth-child(3) { grid-column: 1;     grid-row: 2; }
.tpb-cell:nth-child(4) { grid-column: 2;     grid-row: 2; }
.tpb-cell:nth-child(5) { grid-column: 3;     grid-row: 2; }

.tpb-cell {
  position: relative;
  overflow: hidden;
  background: #111;
  margin: 0;
  background: var(--rule-2);
}

.tpb-cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.tpb-cap {
  position: absolute;
  bottom: var(--s-16);
  left: var(--s-16);
  display: flex;
  align-items: center;
  gap: var(--s-8);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  z-index: 2;
  pointer-events: none;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.tpb-fig { color: rgba(255,255,255,0.3); }

@media (max-width: 768px) {
  .tpb-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 50vw 50vw 50vw;
    min-height: 0;
  }
  .tpb-cell:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
  .tpb-cell:nth-child(2) { grid-column: 1;     grid-row: 2; }
  .tpb-cell:nth-child(3) { grid-column: 2;     grid-row: 2; }
  .tpb-cell:nth-child(4) { grid-column: 1;     grid-row: 3; }
  .tpb-cell:nth-child(5) { grid-column: 2;     grid-row: 3; }
}

/* ── Beyond 2 YouTube link ── END */
.b2-launch {
  background: #000;
  padding-top: var(--s-120);
}

.b2l-head {
  text-align: center;
  padding: 0 80px;
  margin-bottom: var(--s-56);
}

.b2l-headline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--paper);
  margin: 0 0 var(--s-4);
  display: inline-flex;
  align-items: center;
  gap: 0.32em;
}
/* Purple connector line between "Beyond" and "2" */
.b2l-dash {
  display: inline-block;
  width: 1.05em;
  height: 0.08em;
  min-height: 4px;
  background: var(--accent);
  border-radius: 0;
  flex: 0 0 auto;
  transform: translateY(0.04em);
}

.b2l-subhead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.42);
  margin: 0;
}

/* Triptych override — taller cells for product photography */
.b2l-triptych {
  height: 72vh;
  min-height: 520px;
}

.b2l-foot {
  display: flex;
  justify-content: flex-end;
  padding: var(--s-48) 80px var(--s-80);
}

.b2l-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.65;
  color: rgba(255,255,255,0.5);
  max-width: 58ch;
  margin: 0;
}

/* Smooth the bg-fade-to-ink → b2-launch transition */
.threshold:has(+ .b2-launch)::after { display: none; }

@media (max-width: 768px) {
  .b2l-head { padding: 0 24px; margin-bottom: var(--s-40); }
  .b2l-triptych { height: auto; grid-template-rows: 56vw 56vw 56vw; }
  .b2l-foot { padding: var(--s-40) 24px; }
  .b2l-body { max-width: none; }
  .b2l-foot-inner { align-items: flex-start; }
}

/* ── Beyond 2 launch (2025) ── END */

/* Tall transition between the white review wall and the ink finale.
   Two viewport heights of pure background gradient — the page fades
   slowly from paper to ink as you scroll, then the team photo enters.
   Multi-stop with a slight curve so it doesn't feel mechanical. */
.tf-bridge {
  height: 200vh;
  background: linear-gradient(
    to bottom,
    var(--paper) 0%,
    #e2e2e6 22%,
    #8a8a93 48%,
    #2a2a2e 76%,
    var(--ink) 100%
  );
}

.team-finale {
  background: var(--ink);
  padding-bottom: var(--s-160);
}

.tf-photo {
  margin: 0;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 7;
  position: relative;
}

/* Registered custom property so the mask gradient stop can animate.
   Without @property, --tf-reveal would just snap between states. */
@property --tf-reveal {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}

.tf-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  filter: grayscale(1) contrast(1.1) brightness(0.72);
  /* Gradient mask sweep — the photo emerges from the top down with a
     soft 22% feathered band, matching the bridge's gradient logic.
     The image is fully masked at 0%, fully revealed at 122%. */
  --tf-reveal: 0%;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 calc(var(--tf-reveal) - 22%),
    transparent var(--tf-reveal),
    transparent 100%
  );
          mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 calc(var(--tf-reveal) - 22%),
    transparent var(--tf-reveal),
    transparent 100%
  );
  transition: --tf-reveal 2.4s cubic-bezier(.2,.7,.2,1);
}
.tf-photo.is-shown img {
  --tf-reveal: 122%;
}
@media (prefers-reduced-motion: reduce) {
  .tf-photo img {
    transition: none;
    --tf-reveal: 122%;
  }
}

.tf-photo-fade {
  position: absolute;
  inset: 0;
  /* Soft ink → transparent → ink so the photo blends into the dark
     surrounding space on BOTH edges. The top fade kills the hard
     horizontal line between the headline's ink area and the photo. */
  background: linear-gradient(
    to bottom,
    var(--ink) 0%,
    rgba(13,13,13,0.55) 12%,
    transparent 26%,
    transparent 64%,
    rgba(13,13,13,0.5) 84%,
    var(--ink) 100%
  );
  pointer-events: none;
}

/* Hero block — the headline gets its own moment on pure ink before the
   photo arrives. Generous vertical breathing makes it feel like an
   opening title card. */
.tf-hero {
  text-align: center;
  padding: 26vh 24px 14vh;
}
.tf-hero-headline {
  display: block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(96px, 14vw, 220px);
  line-height: 0.94;
  letter-spacing: -0.045em;
  color: var(--paper);
  margin: 0;
  white-space: nowrap;
  text-align: center;
  /* Film-projection chromatic ghost — barely there, only visible up close.
     Once revealed, the letters carry a soft cyan/magenta halo. */
  text-shadow:
    -0.006em 0 0 rgba(120, 220, 255, 0.22),
     0.006em 0 0 rgba(255, 120, 200, 0.22);
}
/* Letter cascade — each glyph drifts in from blur, staggered via --i.
   Class is .tf-glyph (not .tf-letter — that name belongs to the letter
   block below the photo). */
.tf-glyph {
  display: inline-block;
  opacity: 0;
  filter: blur(14px);
  transform: translateY(28px);
  will-change: opacity, filter, transform;
}
.tf-hero-headline.is-revealed .tf-glyph {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition:
    opacity   1.1s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 90ms),
    filter    1.1s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 90ms),
    transform 1.1s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 90ms);
}
.tf-glyph--period { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .tf-glyph { opacity: 1; filter: none; transform: none; }
  .tf-hero-headline.is-revealed .tf-glyph { transition: none; }
}

.tf-letter {
  display: flex;
  justify-content: center;
  padding: 0 40px;
}

.tf-letter-inner {
  max-width: 58ch;
  width: 100%;
  padding-top: var(--s-80);
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.tf-dateline {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
  margin-bottom: var(--s-40);
}

.tf-para {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.65;
  color: rgba(255,255,255,0.65);
  margin: 0 0 var(--s-24);
  text-wrap: pretty;
}

.tf-para-closer {
  color: rgba(255,255,255,0.88);
  margin-bottom: 0;
}

.tf-rule {
  width: 32px;
  height: 1px;
  background: rgba(255,255,255,0.18);
  margin: var(--s-56) auto 0;
}

.tf-sigs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s-4) var(--s-16);
  margin-top: var(--s-48);
}

.tf-sig-img {
  height: 44px;
  width: auto;
  opacity: 0.6;
  display: block;
}

.tf-team-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: rgba(255,255,255,0.22);
  margin-top: var(--s-32);
}

@media (max-width: 900px) {
  .team-finale { padding-bottom: var(--s-80); }
  .tf-photo { aspect-ratio: 4 / 3; }
  .tf-hero { padding: 18vh 16px 10vh; }
  .tf-hero-headline { font-size: clamp(52px, 13vw, 112px); }
  .tf-letter { padding: 0 var(--gutter-mobile); }
  .tf-letter-inner { max-width: none; padding-top: var(--s-56); }
  .tf-sig-img { height: 36px; }
}

/* ════════════════════════════════════════════════════════════
   Responsive polish — tablet (≤768) + phone (≤640)
   Catches the gaps the existing scattered media queries leave:
   grids that didn't collapse at tablet, font floors that were
   too tall for narrow phones, paddings that ate too much width.
   ════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Mosaic places — desktop grid was 1fr/1fr or 2fr/1fr/1fr;
     awkward on portrait tablets. Collapse to a single column. */
  .mosaic-grid { grid-template-columns: 1fr; }

  /* Prototype contact sheet — at 900 it stays 3 cols, at 600 it
     becomes 2. Switch to 2 columns at the tablet edge so portrait
     iPad doesn't get a cramped 3-col view. */
  .proto-grid { grid-template-columns: repeat(2, 1fr); }

  /* Climax stats — 3 cells in a row gets too cramped at tablet. */
  .climax-stats { grid-template-columns: 1fr; }
  .climax-stats .spec-cell {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .climax-stats .spec-cell:last-child { border-bottom: none; }
}

@media (max-width: 640px) {
  /* Nav — desktop padding (40px each side) eats too much of a
     phone-width viewport. */
  .nav { padding: 0 16px; }

  /* "The future." headline — clamp floor at 52px combined with
     nowrap caused overflow on a 375px viewport. Lower the floor
     and let it wrap if it has to. */
  .tf-hero {
    padding: 14vh 16px 8vh;
  }
  .tf-hero-headline {
    font-size: clamp(40px, 11vw, 84px);
    white-space: normal;
    letter-spacing: -0.035em;
  }

  /* Photo aspect — squarer than 16:7 was for desktop; 4:3 set at
     900 is already in place. Make sure the gradient bridge isn't
     a full 200vh on tiny phones — that's a ridiculous amount of
     blank scroll on a 1700px-tall mobile viewport. */
  .tf-bridge { height: 140vh; }
}