/* DIRECTION: crimson-paper-capsule — signature A7-B4-C1-D4-E2-F2-G2-H3-I2
 * A7 crimson on paper · B4 wide geometric display (Sora 800) · C1 neutral grotesque body (Inter)
 * D4 capsule edges · E2 hairline rules only · F2 split diptych hero · G2 overlapping stagger
 * H3 vertical timeline ranking · I2 parallax drift (hero, discovery, final zone — nowhere else)
 * Every colour, radius, size and duration below resolves to a token in :root.
 */

@font-face { font-family: "Sora"; font-style: normal; font-weight: 800; font-display: optional;
  src: url("/assets/fonts/sora-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 600; font-display: optional;
  src: url("/assets/fonts/sora-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: optional;
  src: url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: optional;
  src: url("/assets/fonts/inter-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: optional;
  src: url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2"); }

:root {
  /* Surfaces — a lightness ladder from warm paper */
  --paper:   #F4EEE6;
  --surface: #ECE3D8;
  --raised:  #FBF8F3;
  --line:    #D5C8B8;

  /* Text — two steps only */
  --ink:     #17110F;
  --muted:   #5B504A;

  /* One accent + one lift. No other hue anywhere. */
  --crimson:      #940E2C;
  --crimson-lift: #B9173B;

  /* Derived tints — computed from the tokens above, never literal */
  --crimson-wash: color-mix(in srgb, var(--crimson) 9%, var(--paper));
  --ink-veil:     color-mix(in srgb, var(--ink) 62%, transparent);
  --ink-soft:     color-mix(in srgb, var(--ink) 14%, transparent);
  --paper-veil:   color-mix(in srgb, var(--paper) 88%, transparent);
  --grade-top:    color-mix(in srgb, var(--paper) 20%, transparent);
  --grade-low:    color-mix(in srgb, var(--crimson) 34%, transparent);

  /* Type */
  --font-display: "Sora", "Avenir Next", "Segoe UI", sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem);
  --step-1:  clamp(1.22rem, 1.10rem + 0.55vw, 1.55rem);
  --step-2:  clamp(1.60rem, 1.30rem + 1.40vw, 2.45rem);
  --step-3:  clamp(2.10rem, 1.55rem + 2.60vw, 3.60rem);
  --display: clamp(2.20rem, 1.35rem + 3.30vw, 4.20rem);
  --numeral: clamp(3.4rem, 2.2rem + 5vw, 6.8rem);
  --lead-display: 0.98;
  --lead-body:    1.65;
  --track-display: -0.035em;
  --track-eyebrow: 0.16em;

  /* D4 — capsule. Media, buttons, chips are stadiums; text panels take the panel radius */
  --radius-pill:  999px;
  --radius-panel: 2.25rem;

  /* E2 — hairlines are the only depth */
  --hair:        1px solid var(--line);
  --hair-strong: 1px solid var(--ink);
  --ring:        6px;

  /* Motion — one signature (parallax drift) */
  --ease:  cubic-bezier(0.22, 1, 0.36, 1);
  --dur:   600ms;
  --dur-fast: 180ms;
  --step-time: 900ms;

  --gutter:  clamp(1rem, 0.55rem + 2.2vw, 2.75rem);
  --measure: 68ch;
  --header-h: 3.75rem;
  --max: 84rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: var(--step-0); line-height: var(--lead-body);
  text-rendering: optimizeLegibility; overflow-x: clip;
}
img, video { max-width: 100%; }
a { color: var(--crimson); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--crimson-lift); }
:focus-visible { outline: 3px solid var(--crimson-lift); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: var(--track-display); text-wrap: balance; }
p { margin: 0 0 1em; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.skip-link { position: absolute; left: 1rem; top: -4rem; background: var(--ink); color: var(--raised);
  padding: 0.6rem 1rem; border-radius: var(--radius-pill); z-index: 50; }
.skip-link:focus { top: 0.6rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Media grading ------------------------------------------------------
 * The pack is mixed; this pulls it toward paper-warm highlights and crimson
 * shadows so it reads as one shoot. Applies to every image and video.
 */
.media { position: relative; overflow: hidden; background: var(--surface); isolation: isolate; }
.media picture { display: block; width: 100%; height: 100%; }
.media img, .media video {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.86) contrast(1.06) sepia(0.12);
}
.media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(200deg, var(--grade-top), var(--grade-low));
  mix-blend-mode: soft-light;
}
.media video { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur) var(--ease); } /* decorative motion layer over the still */
.media video.is-playing { opacity: 1; }
.capsule { border-radius: var(--radius-pill); }
.ringed { outline: var(--ring) solid var(--paper); }

/* ---- Header / footer --------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 30; height: var(--header-h);
  background: var(--paper-veil); backdrop-filter: blur(10px); border-bottom: var(--hair);
}
.site-header .wrap { display: flex; align-items: center; gap: 1.25rem; height: 100%; }
.wordmark { font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none; white-space: nowrap; line-height: 1.05; }
.wordmark span { color: var(--crimson); }
.nav { display: flex; gap: 1.1rem; margin-left: auto; }
.nav a { color: var(--ink); text-decoration: none; font-size: var(--step--1); font-weight: 600; padding: 0.7rem 0.1rem; }
.nav a:hover, .nav a[aria-current] { color: var(--crimson); box-shadow: inset 0 -1px 0 var(--crimson); }
.site-header .cta { padding: 0.6rem 1.1rem; font-size: var(--step--1); min-height: 44px; }
@media (max-width: 480px) {
  .wordmark { font-size: 0.86rem; }
  .site-header .cta { padding: 0.5rem 0.85rem; }
  .site-header .cta::after { content: none; }
}
@media (max-width: 860px) {
  .nav { display: none; }
  .site-header .cta { margin-left: auto; }
}
.mobile-nav { display: none; }
@media (max-width: 860px) {
  .mobile-nav { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.55rem var(--gutter);
    border-bottom: var(--hair); background: var(--raised); scrollbar-width: none; }
  .mobile-nav a { flex: none; font-size: var(--step--1); font-weight: 600; color: var(--ink); text-decoration: none;
    border: var(--hair); border-radius: var(--radius-pill); padding: 0.55rem 0.95rem; min-height: 44px; display: inline-flex; align-items: center; }
}

.site-footer { background: var(--ink); color: var(--raised); padding-block: 3.5rem 2.5rem; margin-top: 0; }
.site-footer a { color: var(--raised); }
.site-footer .grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; }
.site-footer h2 { font-size: var(--step-0); letter-spacing: 0; margin: 0 0 0.8rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0 0 0.5rem; font-size: var(--step--1); }
.site-footer .adult-line { border-top: 1px solid var(--muted); margin-top: 2.5rem; padding-top: 1.25rem; font-size: var(--step--1); }
@media (max-width: 760px) { .site-footer .grid { grid-template-columns: 1fr 1fr; } }

/* ---- CTA ----------------------------------------------------------------
 * One filled crimson capsule dominates a viewport. Everything else is a
 * hairline ghost. Cursor + focus states everywhere; no shadow, ever.
 */
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; white-space: nowrap;
  min-height: 48px; padding: 0.85rem 1.6rem; cursor: pointer; user-select: none;
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); letter-spacing: -0.01em;
  color: var(--raised); background: var(--crimson); border: 1px solid var(--crimson);
  border-radius: var(--radius-pill); text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), translate var(--dur-fast) var(--ease);
}
.cta:hover, .cta:focus-visible { background: var(--crimson-lift); color: var(--raised); translate: 0 -2px; }
.cta:active { translate: 0 1px; }
.cta::after { content: "↗"; font-weight: 400; }
.cta--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.cta--ghost:hover, .cta--ghost:focus-visible { background: var(--ink); color: var(--raised); }
.cta--ink { background: var(--ink); border-color: var(--ink); }
.cta--small { min-height: 44px; padding: 0.55rem 1.05rem; font-size: var(--step--1); }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 1.5rem; }
.textlink { font-weight: 600; font-size: var(--step--1); display: inline-flex; align-items: center; min-height: 44px; }

/* ---- Typography primitives ---------------------------------------------- */
.eyebrow {
  display: block;
  font-size: var(--step--1); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-eyebrow);
  color: var(--crimson); margin: 0 0 1rem;
}
.eyebrow b { display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.5rem; vertical-align: 0.1em; border-radius: var(--radius-pill); background: var(--crimson); }
.adult-note { font-size: var(--step--1); color: var(--muted); margin: 0.9rem 0 0; }
.adult-note strong { color: var(--ink); }
.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--step-3); line-height: 1.02; margin: 0 0 1.1rem; }
.prose h3 { font-size: var(--step-1); line-height: 1.15; margin: 2rem 0 0.6rem; letter-spacing: -0.02em; }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li { margin-bottom: 0.45rem; }
.prose li::marker { color: var(--crimson); font-weight: 600; }
.section { padding-block: clamp(3.25rem, 2rem + 5vw, 7rem); }
.section--rule { border-top: var(--hair-strong); }
.section--tint { background: var(--surface); }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter); align-items: end; margin-bottom: 2.5rem; }
.section-head h2 { margin: 0; }
@media (max-width: 860px) { .section-head { grid-template-columns: 1fr; } }
.crumbs { font-size: var(--step--1); color: var(--muted); margin: 0 0 1.2rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 0.4rem; color: var(--line); }
.crumbs a { color: var(--muted); }
.dated { font-size: var(--step--1); color: var(--muted); }

/* ---- Primitive 1: split diptych hero (F2) -------------------------------
 * Two capsule columns of portraits travel in opposite directions — stepping
 * every few seconds and drifting with scroll. Type holds the left half; the
 * ranked mini-card breaks the diptych's own grid.
 */
.hero { position: relative; overflow: clip; border-bottom: var(--hair-strong); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: var(--gutter);
  min-height: clamp(38rem, calc(100svh - var(--header-h) - 4.2rem), 58rem); }
.hero__copy { align-self: center; padding-block: 1.5rem; position: relative; z-index: 2; overflow: visible; }
.hero h1 { font-size: var(--display); line-height: var(--lead-display); margin: 0; }
.hero h1 em { font-style: normal; color: var(--crimson); }
.hero__lede { margin-top: 1.35rem; max-width: 58ch; color: var(--ink); }
.diptych { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; min-height: 100%;
  margin-right: calc(-1 * var(--gutter)); }
.diptych__col { position: relative; overflow: hidden; }
.diptych__col--b { margin-top: 3.5rem; }
.diptych__track { position: absolute; inset: 0 0 auto 0; display: flex; flex-direction: column; gap: 1rem; will-change: transform;
  transition: transform var(--step-time) var(--ease); }
.diptych__tile { display: block; aspect-ratio: 3 / 4.6; border-radius: var(--radius-pill); position: relative; cursor: pointer; }
.diptych__tile .media { position: absolute; inset: 0; border-radius: inherit; }
.diptych__tag { position: absolute; left: 50%; bottom: 1.4rem; translate: -50% 0; z-index: 2; white-space: nowrap;
  background: var(--raised); color: var(--ink); border-radius: var(--radius-pill); padding: 0.4rem 0.85rem;
  font-size: var(--step--1); font-weight: 600; border: var(--hair-strong); }
.diptych__tile:hover .diptych__tag, .diptych__tile:focus-visible .diptych__tag { background: var(--crimson); color: var(--raised); border-color: var(--crimson); }
.rank-chip {
  position: absolute; z-index: 3; left: -1.4rem; bottom: 10%; width: min(19rem, 80%);
  background: var(--raised); border: var(--hair-strong); border-radius: var(--radius-panel);
  padding: 1.1rem 1.25rem 1.2rem; outline: var(--ring) solid var(--paper);
}
.rank-chip__top { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.3rem; }
.rank-chip__num { font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); color: var(--crimson); line-height: 1; }
.rank-chip__name { font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); line-height: 1.1; }
.rank-chip__meta { font-size: var(--step--1); color: var(--muted); margin: 0 0 0.75rem; }
.score-dial { position: absolute; z-index: 3; right: 8%; top: 9%; width: 6.4rem; height: 6.4rem; border-radius: var(--radius-pill);
  background: var(--crimson); color: var(--raised); display: grid; place-content: center; text-align: center;
  outline: var(--ring) solid var(--paper); font-size: 0.72rem; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.08em; }
.score-dial strong { font-family: var(--font-display); font-size: 1.9rem; letter-spacing: -0.03em; text-transform: none; display: block; }
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; min-height: 0; max-height: none; gap: 0; }
  .diptych { order: -1; height: 19rem; min-height: 0; overflow: hidden; margin-inline: calc(-1 * var(--gutter)); gap: 0.6rem; padding-inline: 0.6rem; }
  .diptych__col--b { margin-top: 1.6rem; }
  .diptych__tile { aspect-ratio: 3 / 4.2; }
  .rank-chip { left: 0.8rem; bottom: 0.7rem; width: 12.5rem; padding: 0.55rem 0.8rem 0.65rem; border-radius: 1.4rem; }
  .rank-chip__num { font-size: var(--step-1); }
  .rank-chip__name { font-size: var(--step-0); }
  .rank-chip__meta { font-size: 0.75rem; margin-bottom: 0.4rem; line-height: 1.3; }
  .rank-chip .cta { min-height: 44px; }
  .score-dial { width: 4.9rem; height: 4.9rem; right: 0.8rem; top: auto; bottom: 0.9rem; }
  .score-dial strong { font-size: 1.4rem; }
  .hero__copy { padding-block: 1.3rem 2rem; }
  .diptych__tag { font-size: 0.72rem; padding: 0.25rem 0.6rem; bottom: 0.8rem; }
}

/* Child heroes — layered pair, not a diptych: a large capsule and a smaller
 * overlapping one, with the verdict panel crossing both. */
.phero { border-bottom: var(--hair-strong); overflow: clip; }
.phero .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--gutter); align-items: start;
  padding-block: clamp(2rem, 1rem + 3vw, 4rem); }
.phero h1 { font-size: var(--step-3); line-height: 1.02; margin: 0 0 1rem; }
.phero__stage { position: relative; height: clamp(22rem, 18rem + 16vw, 36rem); }
.phero__stage .p1 { position: absolute; right: 0; top: 0; width: 62%; height: 100%; border-radius: var(--radius-pill); }
.phero__stage .p2 { position: absolute; left: 4%; bottom: 6%; width: 42%; aspect-ratio: 3 / 4.4; border-radius: var(--radius-pill); outline: var(--ring) solid var(--paper); z-index: 2; }
.phero__stage a { display: block; }
.phero__badge { position: absolute; left: 0; top: 6%; z-index: 3; background: var(--ink); color: var(--raised); border-radius: var(--radius-panel);
  padding: 0.8rem 1.1rem; font-size: var(--step--1); max-width: 14rem; line-height: 1.35; }
.phero__badge strong { display: block; font-family: var(--font-display); font-size: var(--step-2); color: var(--raised); line-height: 1; margin-bottom: 0.2rem; }
@media (max-width: 900px) {
  .phero .wrap { grid-template-columns: 1fr; }
  .phero__stage { order: -1; height: 18rem; }
  .phero__stage .p1 { width: 58%; }
}

/* ---- Brand strip -------------------------------------------------------- */
.brand-strip { border-bottom: var(--hair); background: var(--raised); }
.brand-strip .wrap { display: flex; align-items: center; gap: clamp(1rem, 0.5rem + 2.5vw, 3rem); min-height: 4.2rem; overflow-x: auto; scrollbar-width: none; }
.brand-strip__label { flex: none; font-size: 0.78rem; text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--muted); font-weight: 600; }
.brand-mark { flex: none; display: inline-flex; align-items: center; min-height: 44px; cursor: pointer;
  font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; letter-spacing: -0.03em; color: var(--ink);
  transition: color var(--dur-fast) var(--ease); }
.brand-mark sup { font-size: 0.6rem; color: var(--crimson); margin-left: 0.2rem; letter-spacing: 0; }
.brand-mark:hover, .brand-mark:focus-visible { color: var(--crimson); }

/* ---- Primitive 2: overlapping stagger discovery (G2) ---------------------
 * Capsule portraits overlap their neighbours and sit on staggered baselines;
 * alternate columns drift at different rates on scroll. No card frames.
 */
.stagger { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; row-gap: 2.5rem; padding-bottom: 5rem; }
.stagger__item { position: relative; margin-inline: -0.9rem; z-index: 1; will-change: transform; }
.stagger__item:nth-child(4n + 2), .stagger__item:nth-child(4n + 4) { margin-top: 5rem; }
.stagger__item:nth-child(odd) { z-index: 2; }
.model-card { display: block; position: relative; cursor: pointer; color: var(--ink); }
.model-card .media { aspect-ratio: 3 / 4.7; border-radius: var(--radius-pill); outline: var(--ring) solid var(--paper); }
.model-card__label { display: block; text-align: center; margin-top: 0.9rem; }
.model-card__name { display: block; font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); letter-spacing: -0.02em; line-height: 1.1; }
.model-card__hook { display: block; font-size: var(--step--1); color: var(--muted); }
.model-card__action { position: absolute; left: 50%; top: 72%; translate: -50% 0; z-index: 2; white-space: nowrap;
  background: var(--raised); border: var(--hair-strong); border-radius: var(--radius-pill); padding: 0.5rem 1rem; font-size: var(--step--1); font-weight: 600;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.model-card:hover .model-card__action, .model-card:focus-visible .model-card__action { background: var(--crimson); color: var(--raised); border-color: var(--crimson); }
.model-card .media img { transition: scale var(--dur) var(--ease); }
.model-card:hover .media img, .model-card:focus-visible .media img { scale: 1.05; }
.motion-dot { position: absolute; top: 12%; left: 50%; translate: -50% 0; z-index: 2; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--ink); color: var(--raised); border-radius: var(--radius-pill); padding: 0.25rem 0.6rem; }
@media (max-width: 900px) {
  .stagger { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.6rem; padding-bottom: 2rem; }
  .stagger__item { margin-inline: -0.35rem; }
  .stagger__item:nth-child(4n + 2), .stagger__item:nth-child(4n + 4) { margin-top: 0; }
  .stagger__item:nth-child(even) { margin-top: 3rem; }
  .model-card__action { top: 70%; }
}

/* ---- Primitive 3: vertical timeline ranking (H3) -------------------------
 * The position is a graphic on the spine: an oversized numeral sitting on a
 * crimson rail that runs the whole list. 01 implies 02 implies 03.
 */
.timeline { position: relative; list-style: none; margin: 0; padding: 0 0 0 clamp(5.2rem, 3.5rem + 6vw, 9.5rem); }
.timeline::before { content: ""; position: absolute; left: clamp(2.2rem, 1.4rem + 2.8vw, 4.4rem); top: 0.5rem; bottom: 0.5rem; width: 1px; background: var(--crimson); }
.tl-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(9rem, 6rem + 9vw, 14rem); gap: var(--gutter);
  padding: 2.2rem 0; border-top: var(--hair); }
.tl-item:first-child { border-top: 0; }
.tl-num { position: absolute; left: calc(-1 * clamp(5.2rem, 3.5rem + 6vw, 9.5rem)); top: 1.6rem; width: clamp(4.4rem, 2.8rem + 5.6vw, 8.8rem);
  text-align: center; font-family: var(--font-display); font-weight: 800; font-size: var(--numeral); line-height: 1; letter-spacing: -0.06em;
  color: var(--paper); -webkit-text-stroke: 1.5px var(--crimson); background: var(--paper); padding-block: 0.2rem; }
.tl-item:first-child .tl-num { color: var(--crimson); }
.tl-item h3 { font-size: var(--step-2); line-height: 1.05; margin: 0 0 0.35rem; }
.tl-verdict { font-weight: 600; color: var(--crimson); margin: 0 0 0.8rem; }
.tl-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0 0 1rem; font-size: var(--step--1); }
.tl-facts dt { font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; padding-top: 0.2rem; }
.tl-facts dd { margin: 0; }
.tl-media { display: block; }
.tl-media .media { aspect-ratio: 3 / 4.6; border-radius: var(--radius-pill); }
.scorebar { display: flex; align-items: center; gap: 0.7rem; font-size: var(--step--1); margin: 0 0 0.9rem; }
.scorebar__track { flex: 1; max-width: 14rem; height: 6px; border-radius: var(--radius-pill); background: var(--line); position: relative; overflow: hidden; }
.scorebar__fill { position: absolute; inset: 0 auto 0 0; background: var(--crimson); border-radius: inherit; }
.scorebar strong { font-family: var(--font-display); font-size: var(--step-1); }
@media (max-width: 700px) {
  .timeline { padding-left: 3.4rem; }
  .timeline::before { left: 1.5rem; }
  .tl-num { left: -3.4rem; width: 3rem; font-size: 2.6rem; }
  .tl-item { grid-template-columns: minmax(0, 1fr) 6.5rem; gap: 0.9rem; }
  .tl-item h3 { font-size: var(--step-1); }
}

/* ---- Primitive 4: comparison arena ---------------------------------------
 * Criteria down the left, a column per service, hairlines only; the leader's
 * column carries a crimson rule. Scrolls sideways inside its own frame.
 */
.arena-wrap { overflow-x: auto; border-top: var(--hair-strong); border-bottom: var(--hair-strong); }
.arena { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: var(--step--1); }
.arena caption { text-align: left; font-size: var(--step--1); color: var(--muted); padding: 0.8rem 0; caption-side: bottom; }
.arena th, .arena td { padding: 0.9rem 0.8rem; text-align: left; vertical-align: top; border-bottom: var(--hair); }
.arena thead th { font-family: var(--font-display); font-weight: 800; font-size: var(--step-0); letter-spacing: -0.02em; border-bottom: var(--hair-strong); }
.arena tbody th { font-weight: 600; color: var(--muted); width: 14rem; }
.arena .lead { background: var(--crimson-wash); }
.arena thead .lead { box-shadow: inset 0 3px 0 var(--crimson); }
.arena td strong { font-family: var(--font-display); font-size: var(--step-0); }
.arena tfoot td { border-bottom: 0; padding-top: 1.1rem; }

/* ---- Primitive 5: media beats ------------------------------------------ */
.split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 1rem + 4vw, 5rem); align-items: start; }
.split--flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.split--flip > .split__media { order: 2; }
.split__media { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.split__media .media { aspect-ratio: 3 / 4.5; border-radius: var(--radius-pill); }
.split__media figcaption, figure figcaption { font-size: var(--step--1); color: var(--muted); margin-top: 0.7rem; text-align: center; }
.split__media .cta { margin-top: 1rem; width: 100%; }
@media (max-width: 860px) {
  .split, .split--flip { grid-template-columns: 1fr; }
  .split--flip > .split__media { order: 0; }
  .split__media { position: relative; top: 0; max-width: 20rem; margin-inline: auto; }
}
figure { margin: 0; }

.bleed { position: relative; min-height: clamp(26rem, 20rem + 20vw, 40rem); display: grid; align-items: end; overflow: clip; background: var(--ink); cursor: pointer; }
.bleed > .media { position: absolute; inset: 0; }
.bleed > .media img { object-position: var(--pos, 50% 50%); }
.bleed__panel { position: relative; z-index: 2; margin: var(--gutter); max-width: 34rem; background: var(--raised); border-radius: var(--radius-panel);
  padding: 1.4rem 1.6rem; border: var(--hair-strong); }
.bleed__panel p { margin: 0 0 0.8rem; font-size: var(--step--1); }
.bleed__title { font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); letter-spacing: -0.02em; line-height: 1.15; display: block; margin-bottom: 0.4rem; }

.reel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0; }
.reel__tile { position: relative; display: block; cursor: pointer; }
.reel__tile .media { aspect-ratio: 3 / 4.4; border-radius: var(--radius-pill); }
.reel__tile:nth-child(2) { translate: 0 2.2rem; }
.reel__cap { position: absolute; left: 50%; bottom: 1.1rem; translate: -50% 0; z-index: 2; white-space: nowrap; background: var(--raised); color: var(--ink);
  border: var(--hair-strong); border-radius: var(--radius-pill); padding: 0.4rem 0.85rem; font-size: 0.8rem; font-weight: 600; }
.reel__tile:hover .reel__cap, .reel__tile:focus-visible .reel__cap { background: var(--crimson); color: var(--raised); border-color: var(--crimson); }
@media (max-width: 640px) { .reel { gap: 0.5rem; } .reel__cap { font-size: 0.7rem; padding: 0.3rem 0.55rem; bottom: 0.7rem; } }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.duo .media { aspect-ratio: 3 / 4.4; border-radius: var(--radius-pill); }
.duo a:nth-child(2) { margin-top: 3rem; }

/* ---- Carousel / deck (hub and deeper pages) ------------------------------ */
.deck { position: relative; }
.deck__track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(13rem, 10rem + 14vw, 19rem); gap: 1.1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 0.5rem 0 1.5rem; scroll-padding-inline: 0; scrollbar-width: thin; }
.deck__slide { scroll-snap-align: start; display: block; position: relative; cursor: pointer; color: var(--ink); }
.deck__slide .media { aspect-ratio: 3 / 4.6; border-radius: var(--radius-pill); }
.deck__slide[aria-current="true"] .media { outline: 2px solid var(--crimson); outline-offset: 4px; }
.deck__controls { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.4rem; }
.deck__btn { width: 48px; height: 48px; border-radius: var(--radius-pill); border: var(--hair-strong); background: var(--raised); color: var(--ink);
  font-size: 1.2rem; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.deck__btn:hover, .deck__btn:focus-visible { background: var(--ink); color: var(--raised); }
.deck__status { font-family: var(--font-display); font-weight: 600; font-size: var(--step--1); min-width: 4.5rem; }

/* ---- Panels: at-a-glance, verdict, criteria ---------------------------- */
.glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: var(--hair-strong); border-radius: var(--radius-panel); overflow: hidden; background: var(--raised); }
.glance > div { padding: 1.2rem 1.3rem; border-left: var(--hair); }
.glance > div:first-child { border-left: 0; }
.glance__label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: var(--track-eyebrow); font-family: var(--font-body); font-weight: 600; color: var(--crimson); margin: 0 0 0.5rem; }
.glance ul { margin: 0; padding-left: 1rem; font-size: var(--step--1); }
.glance p { font-size: var(--step--1); margin: 0; }
.glance .big { font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); letter-spacing: -0.03em; display: block; line-height: 1.05; margin-bottom: 0.3rem; }
@media (max-width: 860px) { .glance { grid-template-columns: 1fr 1fr; } .glance > div:nth-child(3) { border-left: 0; } .glance > div:nth-child(n+3) { border-top: var(--hair); } }
.verdict-box { border-left: 3px solid var(--crimson); padding: 0.2rem 0 0.2rem 1.3rem; margin: 0 0 1.5rem; }
.subject { padding-block: 2.5rem; border-top: var(--hair-strong); display: grid; grid-template-columns: minmax(0, 1fr) clamp(10rem, 7rem + 10vw, 16rem); gap: var(--gutter); }
.subject h3 { font-size: var(--step-2); line-height: 1.05; margin: 0 0 0.6rem; }
.subject .media { aspect-ratio: 3 / 4.6; border-radius: var(--radius-pill); }
@media (max-width: 700px) { .subject { grid-template-columns: 1fr; } .subject > a { max-width: 12rem; } }
.steps { counter-reset: step; list-style: none; padding: 0; }
.steps > li { counter-increment: step; position: relative; padding-left: 3.4rem; margin-bottom: 1.3rem; }
.steps > li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: -0.1rem; font-family: var(--font-display); font-weight: 800;
  font-size: var(--step-1); color: var(--crimson); }
.prompt { font-family: var(--font-body); background: var(--raised); border: var(--hair); border-left: 3px solid var(--crimson); border-radius: 0 var(--radius-panel) var(--radius-panel) 0;
  padding: 0.9rem 1.2rem; margin: 0 0 1rem; font-size: var(--step--1); }
.faq h3 { font-size: var(--step-1); margin: 1.8rem 0 0.5rem; }
.faq h3::before { content: "Q"; display: inline-grid; place-content: center; width: 1.7rem; height: 1.7rem; margin-right: 0.6rem; border-radius: var(--radius-pill);
  background: var(--crimson); color: var(--raised); font-size: 0.8rem; vertical-align: 0.15em; }
.linkcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 1.5rem 0 0; }
.linkcards li { border: var(--hair-strong); border-radius: var(--radius-panel); padding: 1.1rem 1.3rem; background: var(--raised); }
.linkcards a { font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); letter-spacing: -0.02em; text-decoration: none; }
.linkcards p { font-size: var(--step--1); margin: 0.4rem 0 0; color: var(--muted); }

/* ---- Final action zone — immersive, most direct imagery, drift layer ---- */
.finale { position: relative; background: var(--ink); color: var(--raised); overflow: clip; }
.finale .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter); align-items: center; padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }
.finale h2 { font-size: var(--step-3); line-height: 1; margin: 0 0 1rem; color: var(--raised); }
.finale p { color: var(--raised); }
.finale a:not(.cta) { color: var(--raised); }
.finale .cta--ghost { color: var(--raised); border-color: var(--raised); }
.finale .cta--ghost:hover { background: var(--raised); color: var(--ink); }
.finale__stage { position: relative; height: clamp(24rem, 18rem + 18vw, 38rem); }
.finale__stage .f1 { position: absolute; right: 0; top: 0; width: 60%; height: 88%; border-radius: var(--radius-pill); will-change: transform; }
.finale__stage .f2 { position: absolute; left: 0; bottom: 0; width: 46%; aspect-ratio: 3 / 4.4; border-radius: var(--radius-pill); outline: var(--ring) solid var(--ink); will-change: transform; }
.finale__stage > a { display: block; }
.finale .adult-note { color: var(--raised); opacity: 0.85; }
.finale .adult-note strong { color: var(--raised); }
@media (max-width: 860px) { .finale .wrap { grid-template-columns: 1fr; } .finale__stage { height: 22rem; } }

/* ---- Sticky rail (mobile only) ------------------------------------------ */
.rail { position: fixed; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; z-index: 25; display: none;
  translate: 0 160%; transition: translate var(--dur) var(--ease); }
.rail.is-on { translate: 0 0; }
.rail .cta { width: 100%; outline: var(--ring) solid var(--paper-veil); }
@media (max-width: 700px) { .rail { display: block; } body { padding-bottom: 4.6rem; } }

/* ---- Utility pages ------------------------------------------------------- */
.doc { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.doc h1 { font-size: var(--step-3); line-height: 1.02; margin: 0 0 1rem; }
.doc h2 { font-size: var(--step-2); margin: 2.2rem 0 0.7rem; }
.criteria { counter-reset: crit; list-style: none; padding: 0; }
.criteria > li { counter-increment: crit; border-top: var(--hair); padding: 1.2rem 0 0.6rem 3.2rem; position: relative; }
.criteria > li::before { content: counter(crit); position: absolute; left: 0; top: 1.1rem; width: 2.2rem; height: 2.2rem; border-radius: var(--radius-pill);
  display: grid; place-content: center; background: var(--crimson); color: var(--raised); font-family: var(--font-display); font-weight: 800; }
.criteria h2 { margin: 0 0 0.4rem; font-size: var(--step-1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .diptych__track, .diptych__col, .stagger__item, .finale__stage .f1, .finale__stage .f2 { transform: none !important; }
}
@media print { .site-header, .rail, .cta { display: none; } }

/* ---- Editorial split for text-only sections ------------------------------
 * The heading holds the left column (sticky) and the prose runs on the right,
 * so a text section never leaves half the viewport empty on desktop.
 */
@media (min-width: 1000px) {
  .section > .wrap.prose { max-width: none; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); column-gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
  .section > .wrap.prose > h2 { grid-column: 1; grid-row: 1 / span 40; position: sticky; top: calc(var(--header-h) + 1.5rem); padding-top: 1rem; border-top: 3px solid var(--crimson); }
  .section > .wrap.prose > :not(h2) { grid-column: 2; max-width: var(--measure); }
  .section > .wrap.prose > h3:first-of-type { margin-top: 0.4rem; }
}

/* Stage tiles: the capsule belongs to the anchor; the graded media fills and clips to it. */
.phero__stage > a, .finale__stage > a { overflow: hidden; }
.phero__stage > a > .media, .finale__stage > a > .media { position: absolute; inset: 0; border-radius: inherit; }
.split__media > a > .media, .duo > a > .media { border-radius: var(--radius-pill); }
.tl-media .media, .subject > a .media { border-radius: var(--radius-pill); }
.reel { max-width: 56rem; margin-inline: auto; }
.section--tight + .section--tight { padding-top: 0; }

/* Mobile child heroes: model, promise and action inside the first viewport. */
@media (max-width: 900px) {
  .phero .wrap { padding-block: 1rem 2rem; gap: 1rem; }
  .phero .wrap > div:first-child { display: flex; flex-direction: column; }
  .phero .crumbs, .phero .eyebrow, .phero h1 { order: -3; }
  .phero .scorebar { order: -2; }
  .phero .cta-row { order: -1; margin-top: 0.4rem; margin-bottom: 1.2rem; }
  .phero__stage { height: 14rem; }
  .phero__stage .p2 { bottom: 0; width: 38%; }
  .phero__badge { top: auto; bottom: 0.2rem; left: auto; right: 0; max-width: 10rem; padding: 0.45rem 0.8rem; font-size: 0.78rem; }
  .phero__badge strong { font-size: var(--step-1); }
  .phero h1 { margin-bottom: 0.6rem; }
}
.site-footer .wordmark span { color: var(--line); }
.site-footer .dated { color: var(--line); }

/* Narrow and short phones: keep header on one row and the H1 + CTA in the first screen. */
@media (max-width: 380px) {
  .wordmark { white-space: normal; max-width: 8.5rem; font-size: 0.82rem; }
  .site-header .cta { font-size: 0.82rem; padding: 0.45rem 0.75rem; }
  .eyebrow { font-size: 0.78rem; letter-spacing: 0.08em; }
}
@media (max-width: 900px) and (max-height: 700px) {
  .diptych { height: 12.5rem; }
  .diptych__tag { display: none; }
  .rank-chip { width: 11rem; padding: 0.45rem 0.7rem 0.55rem; }
  .rank-chip__meta { display: none; }
  .score-dial { width: 4rem; height: 4rem; font-size: 0.6rem; }
  .mobile-nav { padding-block: 0.35rem; }
  .hero__copy { padding-top: 0.8rem; }
}

/* ---- Mobile hardening ---------------------------------------------------- */
.split__media > a, .duo > a, .tl-media, .reel__tile, .subject > a, .phero__stage > a, .finale__stage > a { display: block; }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; }
.reel__cap { max-width: calc(100% - 1rem); white-space: normal; text-align: center; line-height: 1.2; }
.glance > div { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .reel__cap { font-size: 0.72rem; padding: 0.3rem 0.55rem; bottom: 0.8rem; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .crumbs { margin-bottom: 0.4rem; }
  .site-footer li { margin: 0; }
  .site-footer li a { display: inline-flex; align-items: center; min-height: 44px; }
  .site-footer .dated a { display: inline-flex; align-items: center; min-height: 44px; }
  .dated a { display: inline-flex; align-items: center; min-height: 44px; }
  .arena { font-size: 0.875rem; }
}
@media (max-width: 520px) {
  .glance { grid-template-columns: 1fr; }
  .glance > div { border-left: 0; }
  .glance > div + div { border-top: var(--hair); }
}
/* Screen-reader labels stay inside their own tile, never widen the page. */
[data-v] { position: relative; }
.sr-only { top: 0; left: 0; }
.site-footer li a, .site-footer .dated a { min-width: 44px; }
.textlink { min-width: 44px; }
.wordmark { display: inline-block; min-height: 0; padding-block: 0.7rem; line-height: 1.1; }
.motion-dot { top: auto; bottom: calc(28% + 2.6rem); }
@media (max-width: 900px) { .motion-dot { bottom: calc(30% + 2.4rem); } }
@media (max-width: 700px) {
  .timeline { padding-left: 2.7rem; }
  .timeline::before { left: 1.1rem; }
  .tl-num { left: -2.75rem; width: 2.3rem; font-size: 1.75rem; letter-spacing: -0.08em; top: 1.95rem; }
  .tl-item { grid-template-columns: minmax(0, 1fr) 5.5rem; column-gap: 0.9rem; row-gap: 0; padding: 1.8rem 0; }
  .tl-item > div { display: contents; }
  .tl-item h3, .tl-item .scorebar, .tl-item .tl-verdict { grid-column: 1; }
  .tl-media { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
  .tl-item > div > p:not(.tl-verdict), .tl-item .tl-facts, .tl-item .cta-row { grid-column: 1 / -1; }
  .tl-facts { grid-template-columns: 4.2rem 1fr; }
}

@media (max-width: 860px) {
  /* text first, a compact portrait + its CTA right after it */
  .split > .split__media { order: 2; max-width: 15rem; }
  .split--flip > .split__media { order: 2; }
  .split__media.duo { max-width: 22rem; }
  /* comparison table: sticky, narrow criterion column; more services per screen */
  .arena { min-width: 38rem; }
  .arena th, .arena td { padding: 0.65rem 0.55rem; }
  .arena tbody th, .arena thead th:first-child, .arena tfoot td:first-child { position: sticky; left: 0; z-index: 1; width: 6.8rem; min-width: 6.8rem; background: var(--paper); box-shadow: inset -1px 0 0 var(--line); }
  .section--tint .arena tbody th, .section--tint .arena thead th:first-child { background: var(--surface); }
  .arena-wrap::before { content: "Swipe the table sideways →"; display: block; font-size: 0.8rem; color: var(--muted); padding: 0.5rem 0 0.2rem; position: sticky; left: 0; }
  .reel__cap { font-size: 0.72rem; white-space: nowrap; }
}
.finale .wrap > *, .phero .wrap > *, .hero .wrap > *, .split > * { min-width: 0; }
.crumbs li { display: inline-flex; align-items: center; }
@media (max-width: 400px) {
  .cta:not(.cta--small) { white-space: normal; text-align: center; max-width: 100%; }
  .site-header .cta { white-space: nowrap; }
}
/* Video layers must respect the capsule clip (Safari/Chrome compositing bug). */
.media { -webkit-mask-image: -webkit-radial-gradient(white, black); mask-image: radial-gradient(white, black); }
.media video { border-radius: inherit; }
.diptych__tile { transition: transform var(--step-time) var(--ease); will-change: transform; }

/* generated: focal points */
.f-50-30 { object-position: 50% 30%; }
.f-50-25 { object-position: 50% 25%; }
.f-40-50 { object-position: 40% 50%; }
.f-50-35 { object-position: 50% 35%; }
.f-50-40 { object-position: 50% 40%; }
.f-45-35 { object-position: 45% 35%; }
.f-60-40 { object-position: 60% 40%; }
.f-50-20 { object-position: 50% 20%; }
.f-55-60 { object-position: 55% 60%; }
/* generated: score fills */
.s-40 { width: 40%; }
.s-41 { width: 41%; }
.s-42 { width: 42%; }
.s-43 { width: 43%; }
.s-44 { width: 44%; }
.s-45 { width: 45%; }
.s-46 { width: 46%; }
.s-47 { width: 47%; }
.s-48 { width: 48%; }
.s-49 { width: 49%; }
.s-50 { width: 50%; }
.s-51 { width: 51%; }
.s-52 { width: 52%; }
.s-53 { width: 53%; }
.s-54 { width: 54%; }
.s-55 { width: 55%; }
.s-56 { width: 56%; }
.s-57 { width: 57%; }
.s-58 { width: 58%; }
.s-59 { width: 59%; }
.s-60 { width: 60%; }
.s-61 { width: 61%; }
.s-62 { width: 62%; }
.s-63 { width: 63%; }
.s-64 { width: 64%; }
.s-65 { width: 65%; }
.s-66 { width: 66%; }
.s-67 { width: 67%; }
.s-68 { width: 68%; }
.s-69 { width: 69%; }
.s-70 { width: 70%; }
.s-71 { width: 71%; }
.s-72 { width: 72%; }
.s-73 { width: 73%; }
.s-74 { width: 74%; }
.s-75 { width: 75%; }
.s-76 { width: 76%; }
.s-77 { width: 77%; }
.s-78 { width: 78%; }
.s-79 { width: 79%; }
.s-80 { width: 80%; }
.s-81 { width: 81%; }
.s-82 { width: 82%; }
.s-83 { width: 83%; }
.s-84 { width: 84%; }
.s-85 { width: 85%; }
.s-86 { width: 86%; }
.s-87 { width: 87%; }
.s-88 { width: 88%; }
.s-89 { width: 89%; }
.s-90 { width: 90%; }
.s-91 { width: 91%; }
.s-92 { width: 92%; }
.s-93 { width: 93%; }
.s-94 { width: 94%; }
.s-95 { width: 95%; }
.s-96 { width: 96%; }
.s-97 { width: 97%; }
.s-98 { width: 98%; }
.s-99 { width: 99%; }
.s-100 { width: 100%; }