/* =============================================================
   UNREAL SITE — shared foundations
   One source of truth for chrome that was previously duplicated
   inline across all page files. Imports assume DS tokens are
   already linked (colors, typography, spacing, effects, motion).
   ============================================================= */

/* ---- Data accent: the ONE non-monochrome token.
   Licensed for data + state only: chart strokes/markers, live-test
   progress fills, range-slider thumb, prediction-outcome rail.
   Forbidden on chrome (nav, buttons, links, borders, focus, selection). */
:root {
  /* layout tokens (spec B.1.4) */
  --container-shell: 90rem;
  --container-content: 75rem;
  --container-narrative: 52rem;
  --measure-body: 65ch;
  --measure-aside: 45ch;
  /* breakpoints (reference — media queries repeat the raw px):
     sm 480 · md 768 · lg 1024 · xl 1280 · 2xl 1440 */
}

/* ---- Base ---- */
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--surface-canvas); color: var(--text-primary); font-family: var(--font-body); }
a { color: var(--text-primary); text-decoration: none; transition: color var(--dur-base, .2s) var(--ease-out, ease); }
a:hover { color: var(--ink-999); }
[data-theme="light"] a:hover { color: var(--ink-000); }
::selection { background: var(--ink-999); color: var(--ink-000); }
[data-theme="light"] ::selection { background: var(--ink-000); color: var(--ink-999); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 2px; }

/* ---- Containers ---- */
.u-container { max-width: var(--container-shell, 90rem); margin-inline: auto; padding-inline: clamp(20px, 4vw, 56px); }
.u-container--content { max-width: var(--container-content, 75rem); margin-inline: auto; padding-inline: clamp(20px, 4vw, 56px); }
.u-container--md { max-width: var(--container-narrative, 52rem); margin-inline: auto; padding-inline: clamp(20px, 4vw, 56px); }
.u-measure { max-width: var(--measure-body, 65ch); }
.u-measure-sm { max-width: var(--measure-aside, 45ch); }

/* ---- Numerals ---- */
.u-tabular, .u-mono { font-variant-numeric: tabular-nums; }

/* =============================================================
   TYPE SCALE — §B.2. 17 roles. No px font sizes outside this block.
   Casing law: display = uppercase; headings/card titles = sentence
   case; eyebrows/buttons/mono labels = uppercase.
   ============================================================= */
/* Display — Saira, uppercase */
.u-display-1 { font-family: var(--font-display); font-size: clamp(2.75rem, 6.4vw, 6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 0.94; text-transform: uppercase; text-wrap: balance; margin: 0; }
.u-display-2 { font-family: var(--font-display); font-size: clamp(2rem, 4.2vw, 3.5rem); font-weight: 800; letter-spacing: -0.02em; line-height: 0.98; text-transform: uppercase; text-wrap: balance; margin: 0; }
.u-display-3 { font-family: var(--font-display); font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.02; text-transform: uppercase; text-wrap: balance; margin: 0; }
/* Headings — Saira, sentence case */
.u-h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; margin: 0; }
.u-h4 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; margin: 0; }
.u-title { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; line-height: 1.3; margin: 0; }
/* Body — Hanken Grotesk */
.u-body-lg { font-family: var(--font-body); font-size: 1.125rem; font-weight: 400; line-height: 1.6; }
.u-body { font-family: var(--font-body); font-size: 1rem; font-weight: 400; line-height: 1.6; }
.u-body-sm { font-family: var(--font-body); font-size: 0.875rem; font-weight: 400; line-height: 1.6; }
.u-caption { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 400; line-height: 1.45; }
/* Labels — two systems, never crossed */
.u-eyebrow { font-family: var(--font-eyebrow); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.20em; text-transform: uppercase; }
.u-btn-label { font-family: var(--font-eyebrow); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; }
.u-mono-label { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.u-mono-micro { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
/* Metrics — tabular always */
.u-metric-lg { font-family: var(--font-display); font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.u-metric-md { font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.u-metric-sm { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1; }
/* Hero outline word — solid fallback, outline only when strokes paint (§B.2.7) */
.u-outline-word { color: var(--text-primary); }
@supports (-webkit-text-stroke: 1px black) {
  .u-outline-word { color: transparent; -webkit-text-stroke: 2px var(--text-primary); }
}

/* =============================================================
   BUTTONS — one primitive, three variants, three sizes
   ============================================================= */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  -webkit-appearance: none; appearance: none; background: transparent; color: var(--text-primary);
  font-family: var(--font-eyebrow); letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer;
  white-space: nowrap; text-decoration: none; position: relative;
  transition: transform .2s var(--ease-out, ease), background .25s ease, border-color .25s ease, color .25s ease; }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn--lg { height: 56px; padding: 0 32px; font-size: 13px; }
.btn--md { height: 48px; padding: 0 26px; font-size: 12px; }
.btn--sm { height: 40px; padding: 0 20px; font-size: 12px; }
.btn--sm::after { content: ""; position: absolute; inset: -4px 0; } /* 44px hit area */
.btn--primary { background: var(--action-fill); color: var(--action-fill-text); }
.btn--primary:hover { background: var(--action-fill-hover); color: var(--action-fill-text); }
.btn--secondary { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.btn--secondary:hover { border-color: var(--border-focus); background: var(--fill-ghost); color: var(--text-primary); }
.btn--quiet { background: none; color: var(--text-secondary); padding-inline: 4px; }
.btn--quiet:hover { color: var(--text-primary); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn .fx-blade { display: inline-block; width: 18px; height: 2px; background: currentColor; transform: skewX(-24deg); transition: width .25s var(--ease-out, ease); }
.btn:hover .fx-blade { width: 34px; }

/* =============================================================
   FX — grain, image treatment, marquee, reveals
   ============================================================= */
.fx-grain { position: relative; }
.fx-grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAiIGhlaWdodD0iMTYwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC45IiBudW1PY3RhdmVzPSIyIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI24pIi8+PC9zdmc+');
  background-size: 160px 160px; }
.fx-img { transition: transform .5s ease; }
.fx-img:hover { transform: scale(1.02); }
.fx-cta { transition: transform .2s ease, background .25s ease, border-color .25s ease, color .25s ease; }
.fx-cta:active { transform: scale(0.98); }
.fx-cta .fx-blade { display: inline-block; width: 18px; height: 2px; background: currentColor; transform: skewX(-24deg); transition: width .25s ease; }
.fx-cta:hover .fx-blade { width: 34px; }
@keyframes heroIn { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } }
/* -50% lands one gap short of a clean seam: .fx-track's gap applies between the
   duplicate copies too, so the loop must travel half the width PLUS half a gap. */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 7px)); } }
.fx-marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.fx-marquee:hover .fx-track { animation-play-state: paused; }

/* Reveals: gated — invisible ONLY when JS has confirmed it will run */
html.js-enabled [data-reveal] { opacity: 0; transform: translateY(22px);
  transition: opacity .8s var(--ease-out, ease), transform .8s var(--ease-out, ease); }
html.js-enabled [data-reveal].is-in { opacity: 1; transform: none; }
html.js-enabled [data-reveal].is-in > * { }
@media (prefers-reduced-motion: reduce) {
  html.js-enabled [data-reveal] { opacity: 1; transform: none; transition: none; }
  .fx-track { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* =============================================================
   CARDS — three kinds only (§C.2)
   ============================================================= */
.card { border-radius: var(--radius-md); box-sizing: border-box; }
.card--surface, .card--data { background: var(--surface-card); border: 1px solid var(--border-default); }
.card--feature { background: var(--surface-inverse); color: var(--text-inverse); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); }
.card--hover { transition: transform var(--dur-base, .2s) var(--ease-out, ease), border-color var(--dur-base, .2s) var(--ease-out, ease); }
.card--hover:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.card--hover:hover .fx-img { transform: scale(1.04); }
.card-data-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--border-default); }
.card-data-body { padding: 24px; }
.card-data-foot { padding: 16px 24px; border-top: 1px solid var(--border-default); }


/* =============================================================
   FORMS
   ============================================================= */
input[type="text"], input[type="email"], input[type="url"], input[type="number"], textarea, select {
  width: 100%; box-sizing: border-box; height: 48px; padding: 0 16px;
  background: var(--surface-inset); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); color: var(--text-primary);
  font-family: var(--font-body); font-size: 15px; outline: none;
  transition: border-color .2s ease; }
textarea { height: auto; padding: 12px 16px; }
input:focus, textarea:focus, select:focus { border-color: var(--border-focus); }
input:focus-visible, textarea:focus-visible, select:focus-visible { box-shadow: var(--focus-ring); }
input[aria-invalid="true"] { border-color: var(--border-focus); }
.field-error { font-size: 13px; color: var(--text-primary); font-weight: 600; margin-top: 6px; }

/* Range slider — 24px thumb, thick hit area, real focus */
input[type="range"] { -webkit-appearance: none; appearance: none; height: 24px; background: transparent; outline: none; padding: 0; border: none; }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--border-default); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -11px; background: var(--data-accent); border-radius: 0; transform: skewX(-12deg); cursor: pointer; }
input[type="range"]::-moz-range-track { height: 2px; background: var(--border-default); }
input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; background: var(--data-accent); border: none; border-radius: 0; cursor: pointer; }
input[type="range"]:focus-visible { box-shadow: var(--focus-ring); }

/* Choice chips as real inputs */
.chip { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px;
  -webkit-appearance: none; appearance: none; background: transparent;
  font-family: var(--font-eyebrow); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--border-default); border-radius: var(--radius-sm); color: var(--text-primary);
  cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease; min-height: 44px; box-sizing: border-box; white-space: nowrap; }
.chip:hover { border-color: var(--border-strong); background: var(--wash-up-1); color: var(--text-primary); }
[data-theme="light"] .chip:hover { background: var(--wash-dn-1); }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.chip .chip-mark { display: none; font-family: var(--font-mono); font-size: 12px; }
.chip:has(input:checked) { background: var(--action-fill); border-color: var(--action-fill); color: var(--action-fill-text); }
.chip:has(input:checked) .chip-mark { display: inline; }
.chip:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.chip[data-on="true"],
.chip[data-on="true"]:hover { background: var(--action-fill); border-color: var(--action-fill); color: var(--action-fill-text); }
.field { width: 100%; box-sizing: border-box; padding: 13px 15px; min-height: 46px;
  -webkit-appearance: none; appearance: none;
  font-family: var(--font-body); font-size: 15px; color: var(--text-primary);
  background: var(--wash-up-1); border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  transition: border-color .2s ease, background .2s ease; }
.field::placeholder { color: var(--text-tertiary); }
.field:hover { border-color: var(--border-strong); }
.field:focus { outline: none; border-color: var(--accent); background: var(--wash-up-2); }
/* Light-surface texture — fine hairline stripes, brand-monochrome, very subtle */
.tex-stripes { position: relative; }
.tex-stripes::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,0.028) 0 1px, transparent 1px 8px);
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); }
.tex-stripes > * { position: relative; }
.tex-stripes--diag::before { background-image: repeating-linear-gradient(-24deg, rgba(0,0,0,0.024) 0 1px, transparent 1px 11px); }
[data-theme="light"] .tex-stripes::before { background-image: repeating-linear-gradient(90deg, rgba(0,0,0,0.028) 0 1px, transparent 1px 8px); }

/* Dark-surface texture — the mirror of .tex-stripes for black bands, so an
   all-black section reads as a material rather than a void. Grain alone was too
   fine to register at section scale; the hairline rule gives it structure. */
.tex-dark { position: relative; }
.tex-dark::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(-24deg, rgba(255,255,255,0.016) 0 1px, transparent 1px 13px);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); }
.tex-dark > * { position: relative; }

/* U-mark field — the closing section only. The mark is the one brand glyph, so it
   tiles at 2% as a watermark and fades from the centre out, keeping the headline
   on clean black. Scoped tight on purpose: everywhere else it would be noise. */
.tex-mark { position: relative; }
.tex-mark::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url('assets/u-mark-white.png');
  background-repeat: repeat; background-size: 88px auto; opacity: 0.075;
  mask-image: radial-gradient(115% 88% at 50% 50%, transparent 16%, #000 68%);
  -webkit-mask-image: radial-gradient(115% 88% at 50% 50%, transparent 16%, #000 68%); }
.tex-mark > * { position: relative; }
@media (prefers-reduced-motion: no-preference) { }

/* Footer nav links: the 46px rule lives in the touch query, so mouse users were left
   with bare line-height (18.6px) — under WCAG 2.5.8 AA's 24px pointer minimum, on
   every page, since the footer is shared. This is the desktop floor; touch still gets 46. */
footer nav a { min-height: 26px; display: inline-flex; align-items: center; }
/* Same cause: mono-label links (BOOK A 15-MIN CALL, the contact address) measured
   22.4px with a mouse because their 44px rule is touch-gated too. */
a.u-mono-label, main a[href^="mailto"]:not(p a) { min-height: 26px; display: inline-flex; align-items: center; }

/* The DS Eyebrow renders an inline-flex box (rule + label). inline-flex sizes to
   max-content and does NOT shrink to its parent, so any eyebrow whose label is long
   enough overflows the container at narrow widths — Work's "Against a traditional
   shoot" measured 312px inside 280px, pushing the document 12px wide at 320. Every
   eyebrow is wrapped in `.eb`, so constraining its inner box fixes the whole class
   at once rather than per-page. */
.eb div { max-width: 100%; flex-wrap: wrap; }

/* Mono type floor — the DS scale bottoms out at 10–11px, which is under the readable
   floor on every device, not just under a thumb. Set globally so no viewport can
   render brand-critical labels at 11px. */
.u-mono-micro, .u-mono-label, .fmt-spec, .step-when { font-size: 12px; }

/* Focus-only, so not strictly a touch target — but it landed 1.4px short, and that is
   true at every width, so it belongs here rather than in a device query. */
.skip-link { min-height: 44px; display: inline-flex; align-items: center; }

/* Press citations — set in Unreal's own type as honest credits, NOT imitation logo
   lockups. The previous version typeset "BUSINESS INSIDER" and a red "AP" in Saira,
   which is a hand-drawn approximation of a third-party trademark. If the outlets'
   official logo files are supplied, swap these for real <img> assets. */
.press-cite { display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.005em;
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem); color: var(--ink-900);
  border-bottom: 1px solid var(--border-strong); padding-bottom: 2px;
  transition: color .2s var(--ease-out, ease), border-color .2s var(--ease-out, ease); }
.press-cite:hover { color: var(--ink-999); border-bottom-color: var(--ink-999); }
.press-cite:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.press-arrow { font-family: var(--font-mono); font-size: 0.75em; opacity: 0.6;
  transition: transform .2s var(--ease-out, ease), opacity .2s ease; }
.press-cite:hover .press-arrow { transform: translate(1px, -1px); opacity: 1; }
.press-row { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(18px, 3vw, 44px); }

/* Stills gallery — masonry columns: native ratios, no cropping, no orphan cells */
.stills-strip { columns: 4; column-gap: 14px; margin-top: 14px; }
.stills-strip > figure { break-inside: avoid; margin: 0 0 14px; overflow: hidden;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.stills-strip img { width: 100%; height: auto; display: block; }
@media (max-width: 1100px) { .stills-strip { columns: 3; } }
@media (max-width: 700px) { .stills-strip { columns: 2; } }


/* HERO split — editorial left, form right */
.hero-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 4vw, 72px); align-items: start; }
@media (max-width: 1023px) { .hero-split { grid-template-columns: 1fr; gap: 36px; } }


/* Cinematic breathing on hero stills — transform only, GPU-cheap */
@keyframes slowzoom { from { transform: scale(1); } to { transform: scale(1.07); } }
.fx-slowzoom { animation: slowzoom 34s var(--ease-out, ease-out) both alternate infinite; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .fx-slowzoom { animation: none; } }

@keyframes recpulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { [style*="recpulse"] { animation: none !important; } }

.chip--mono { font-family: var(--font-mono); letter-spacing: 0.02em; text-transform: none; font-size: 13px; }
fieldset.chips { border: none; margin: 0; padding: 0; }
fieldset.chips legend { font-size: 13px; color: var(--text-secondary); padding: 0; margin-bottom: 10px; font-family: var(--font-body); }
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* Switch — real checkbox with visible knob */
input[type="checkbox"].switch { width: 40px; height: 22px; appearance: none; -webkit-appearance: none; background: var(--surface-inset); border: 1px solid var(--border-strong); border-radius: 2px; position: relative; cursor: pointer; margin: 0; transition: background .2s ease; }
input[type="checkbox"].switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--text-tertiary); transform: skewX(-8deg); transition: left .2s var(--ease-out, ease), background .2s ease; }
input[type="checkbox"].switch:checked { background: var(--data-accent-quiet); }
input[type="checkbox"].switch:checked::before { left: 20px; background: var(--data-accent); }
input[type="checkbox"].switch:disabled { opacity: 0.45; cursor: not-allowed; }
input[type="checkbox"].switch:focus-visible { box-shadow: var(--focus-ring); }

/* =============================================================
   TABLES — semantic, mobile-stacked below 768px
   ============================================================= */
.u-table { width: 100%; border-collapse: collapse; border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.u-table caption { text-align: left; font-family: var(--font-eyebrow); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-secondary); padding: 18px 26px; border: 1px solid var(--border-default); border-bottom: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.u-table thead th { font-family: var(--font-eyebrow); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-tertiary); text-align: left; padding: 14px 26px; border-bottom: 1px solid var(--border-default); font-weight: 600; }
.u-table tbody th { font-family: var(--font-display); font-weight: 700; font-size: 16px; text-align: left; padding: 15px 26px; }
.u-table tbody td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 14px; padding: 15px 26px; color: var(--text-secondary); }
.u-table tbody tr { border-bottom: 1px solid var(--border-subtle); }
.u-table tbody tr:last-child { border-bottom: none; }
.u-table tbody tr[data-featured] { background: var(--surface-card); }

/* =============================================================
   RESPONSIVE GRIDS — §D.3. Declared spans, no nested auto-fit.
   ============================================================= */
.grid { display: grid; gap: var(--grid-gap, 24px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }
.grid--split { grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
@media (max-width: 1023px) {
  .grid--4, .grid--5 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  /* Odd stragglers span the full row — no empty cells */
  .grid--3 > *:nth-child(odd):last-child,
  .grid--5 > *:nth-child(odd):last-child { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .grid--2, .grid--3, .grid--4, .grid--5, .grid--split { grid-template-columns: 1fr; }
}
/* Stagger on grid children (§E) — replaces inline transition-delay */
html.js-enabled [data-reveal].is-in > .grid > * { }
.grid > * { min-width: 0; }

/* =============================================================
   NAV / drawer
   ============================================================= */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--ink-999); color: var(--ink-000); padding: 12px 20px; font-family: var(--font-eyebrow); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.skip-link:focus { left: 12px; top: 12px; }
.nav-desktop { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 34px); }
.nav-burger { display: none; }
@media (max-width: 1023px) {
  .nav-desktop { display: none; }
  .nav-burger { display: inline-flex; }
}
.nav-link { font-family: var(--font-eyebrow); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary); white-space: nowrap; padding: 4px 0; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; }
.nav-link:hover { color: var(--text-primary); border-color: var(--ink-999); }
.nav-link[aria-current="page"] { color: var(--text-primary); border-color: var(--ink-999); }

/* Legal section nav. Was four anchors carrying identical inline styles and no class,
   which put them outside every touch-target rule in the mobile block — they computed
   exactly 40px (10px padding on a 12px label), 4px short, on the page's only navigation.
   Styling lives here now so the same sweep reaches them next time. */
.legal-nav { margin-top: 36px; display: flex; gap: 10px; flex-wrap: wrap; }
.legal-nav a { display: inline-flex; align-items: center;
  padding: 10px 18px; font-family: var(--font-eyebrow); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  color: var(--text-secondary); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); transition: border-color .2s ease, color .2s ease; }
.legal-nav a:hover { border-color: var(--ink-999); color: var(--text-primary); }

/* Sticky qualify bar: compact on mobile */
@media (max-width: 767px) {
  .qbar-meta { display: none !important; }
}

/* Eyebrow / kicker labels never wrap mid-word (DS spans carry 0.24em tracking inline) */
span[style*="0.24em"] { white-space: nowrap; }

/* Details / FAQ */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-x { transform: rotate(45deg); }

/* Footer wordmark: clips horizontally only. `overflow:hidden` also clips vertically,
   and the display face renders ~1.28x its font-size, so the line box must allow for
   that or the glyph bottoms shear off. */
/* Social row — kept ready for the client's real profile URLs. Brand glyphs are inline
   SVG because Lucide dropped its brand set and no icon asset was supplied. */
.social-row { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.social-btn { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  color: var(--text-secondary); background: transparent;
  transition: color .2s var(--ease-out, ease), border-color .2s var(--ease-out, ease),
    background .2s var(--ease-out, ease), transform .2s var(--ease-out, ease); }
.social-btn:hover { color: var(--ink-999); border-color: var(--ink-999);
  background: var(--wash-up-1, rgba(255,255,255,0.05)); transform: translateY(-2px); }
.social-btn:active { transform: translateY(0) scale(0.96); }
.social-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.footer-wordmark { white-space: nowrap; overflow-x: hidden; max-width: 100%; line-height: 1.35; padding-bottom: 0.14em; }
@media (max-width: 1279px) { .footer-wordmark-tail { display: none; } }

/* Hero: the form IS the primary CTA, so the left column points at it.
   Below the split breakpoint the form sits underneath, and the arrow would lie. */
.hero-formhint::after { content: ''; }
@media (max-width: 1023px) { .hero-formhint { display: none; } }

/* Hero stat ledger — hairline-separated, no orphan padding on the last cell */
.hero-stats { display: flex; flex-wrap: wrap; border-top: 1px solid var(--border-strong); }
.hero-stat { flex: 1 1 140px; padding: 22px 24px 0 0; }
.hero-stat + .hero-stat { padding-left: 24px; border-left: 1px solid var(--border-subtle); }
@media (max-width: 520px) {
  .hero-stat { flex: 1 1 100%; padding: 18px 0 0; }
  .hero-stat + .hero-stat { padding-left: 0; border-left: 0; border-top: 1px solid var(--border-subtle); margin-top: 14px; padding-top: 14px; }
}

/* Format index — raised cards, not hairline cells. The previous version painted each
   cell in --surface-canvas on a near-black section, so the boxes were black on black
   and disappeared. Now each is a lit graphite card that can actually be seen. */
.fmt-index { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px,1.2vw,14px);
  margin: 0; padding: 0; list-style: none; }
.fmt-cell { display: flex; flex-direction: column; height: 100%; box-sizing: border-box;
  padding: 24px 24px 26px; text-decoration: none; border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--ink-200), var(--ink-150));
  border: 1px solid rgba(255,255,255,0.13); color: var(--text-primary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 12px 30px -18px rgba(0,0,0,0.8);
  transition: background .25s ease, transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.fmt-cell:hover { transform: translateY(-3px); border-color: rgba(111,166,228,0.5);
  background: linear-gradient(180deg, var(--ink-300), var(--ink-200));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 20px 42px -20px rgba(0,0,0,0.9); }
/* Fallback (no subgrid): a flex column. Titles that wrap will push their own body copy
   down, which is what the @supports block below actually fixes. */
.fmt-cell > .u-h3 { min-height: 2.1em; }
.fmt-cell:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* The index number is the one spot of colour per card — it also numbers the sequence. */
.fmt-num { color: var(--data-accent); }
@media (max-width: 900px) { .fmt-index { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .fmt-index { grid-template-columns: 1fr; } }

/* Align the four cards' rows STRUCTURALLY rather than reserving a guessed title height.
   An em-based min-height can't fit an unknown number of wrapped lines — at mid widths
   "PRODUCT FILMS" wraps to two lines and overflowed the reservation, dropping that card's
   body copy ~7px below its neighbours. Subgrid makes every card share one row track set,
   so index / title / body / meta line up however any title wraps. `grid-auto-rows` cycles
   the pattern so it still holds when the grid drops to 2 or 1 column. The <li> between
   grid and card has to opt in too, hence the two levels. */
@supports (grid-template-rows: subgrid) {
  .fmt-index { grid-auto-rows: auto auto 1fr auto; }
  .fmt-index > li,
  .fmt-cell { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
  .fmt-cell > .u-h3 { min-height: 0; }
  .fmt-meta { margin-top: 0; align-self: end; }
}
/* Two mono lines in identical tertiary read as one mushy block — divide them,
   and let the audience line outrank the technical spec. */
.fmt-meta { display: block; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border-subtle);
  color: var(--text-tertiary); }
/* Differentiate the technical spec from the audience line with tracking, NOT alpha —
   opacity on top of --text-tertiary drops below the 4.5:1 floor. */
/* Split section header: heading left, meta right. The meta holds its own column
   down to 760px instead of wrapping under the display heading at odd widths. */
.sec-head--split { display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 20px clamp(24px, 4vw, 56px); margin-bottom: 28px; }
.sec-head--split > :first-child { flex: 1 1 380px; min-width: 0; }
.sec-head--split > .sec-meta { flex: 0 1 280px; margin: 0; }
@media (max-width: 760px) {
  .sec-head--split > .sec-meta { flex: 1 1 100%; padding-top: 16px;
    border-top: 1px solid var(--border-subtle); }
}
/* Team cards — portrait over a name/role/bio block with a mailto footer */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid > :nth-child(odd):last-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } }
.team-card { display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--surface-card); transition: border-color .25s ease, transform .25s ease; }
.team-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.team-mail { margin-top: auto; padding-top: 18px; color: var(--text-tertiary);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; text-transform: none;
  overflow-wrap: anywhere; text-decoration: none; transition: color .2s ease; }
.team-mail:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }

/* Comparison table v3 — a labelled row per dimension. The old two-column layout
   had no row anchor and set the "traditional" side in tertiary grey on white,
   which is what made it hard to read. */
/* Sector chips — dark-grey stamps on the light band: present but not shouting,
   and a tonal match for the comparison slab beside them. */
.sector-chip { padding: 7px 13px; border-radius: 100px; white-space: nowrap;
  background: var(--ink-300); color: var(--ink-999); border: 1px solid var(--ink-400); }
.sector-chip:hover { background: var(--ink-400); border-color: var(--ink-500); }

/* ---- Colour, used deliberately ----
   The system is monochrome by mandate, with one functional accent. These are the places
   that accent is spent: the label that opens every section, the figure that settles the
   comparison, the index number on each format card, and interactive text. Everything
   else stays ink — which is what keeps these reads as signal rather than decoration. */
/* The DS Eyebrow renders as an unclassed div whose colour AND rule both read
   `var(--text-secondary)` from inline styles — no class rule can outrank that. So each
   eyebrow gets a wrapper of ours and the token is rescoped there: the component keeps
   its own styling contract, and the mark + label pick up the accent together. */
.eb { --text-secondary: var(--data-accent); display: block; }
/* The DS scopes --data-accent and --text-primary per theme, but declares the DARK set on
   :root with no [data-theme="dark"] block — so a dark island inside a light section has no
   way to re-enter dark scope. Aliasing them here does it: var() in a custom property is
   substituted at the DECLARING element, so these capture the :root (dark) values and keep
   them when inherited into a [data-theme="light"] subtree. Beats hardcoding the hexes,
   which would silently stop tracking if the DS accent ever changes. */
:root {
  --accent-on-dark: var(--data-accent);
  --text-primary-on-dark: var(--text-primary);
}

/* `--data-accent` is already theme-scoped by the DS — it resolves to the light-band
   counterpart automatically, so no per-theme override belongs here. */
/* Sitewide fallback for eyebrows written as a plain class rather than the component. */
.u-eyebrow { --text-secondary: var(--data-accent); }
.sector-chip { transition: background .2s ease, border-color .2s ease; }
.sector-chip:hover { border-color: var(--data-accent); }

/* The chart is the section's argument, so it breaks the content measure and runs to the
   full shell width — at content width it read as a footnote and was easy to scroll past. */
.cmp-panel--wide { width: min(var(--container-shell), 100vw - 2 * var(--gutter, 24px));
  margin-left: 50%; transform: translateX(-50%); }

/* Comparison panel — a dark slab floating on the light band. The chart carries the
   argument of the section, so it gets to be the loudest object on the page. The dark
   tokens are re-declared locally because the parent section is light. */
.cmp-panel {
  --surface-card: var(--ink-300);
  --surface-inset: var(--ink-200);
  --text-secondary: var(--ink-850);
  --text-tertiary: var(--ink-700);
  --border-subtle: rgba(255,255,255,0.09);
  --border-default: rgba(255,255,255,0.16);
  --border-strong: rgba(255,255,255,0.28);
  --wash-dn-1: rgba(255,255,255,0.05);
  --data-accent: var(--accent-on-dark);
  --text-primary: var(--text-primary-on-dark);
  color: var(--text-primary-on-dark);
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(255,255,255,0.07), transparent 58%),
    var(--ink-100);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg);
  padding: clamp(24px,3vw,42px) clamp(22px,3vw,42px) clamp(24px,3vw,38px);
  box-shadow: 0 56px 120px -40px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,255,255,0.08);
}
/* Ledger — replaces the three-column table. That version read as a spreadsheet: both
   sides carried equal visual weight, so nothing won, and a dead label column ate a
   quarter of the width. Here the dimension label spans the row as an overline, the two
   sides are separate SURFACES (recessed vs raised) rather than columns, and each side
   leads with a mono figure — the quantified claim is what makes a comparison land. */
.cmp-ledger { display: flex; flex-direction: column; gap: clamp(10px,1.2vw,14px); }

.cmp-lrow { display: grid; gap: 8px; }
.cmp-loverline { display: flex; align-items: center; gap: 14px; }
.cmp-loverline span { color: var(--text-tertiary); white-space: nowrap; }
.cmp-loverline::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }

.cmp-lpair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px,1vw,12px); align-items: stretch; }

.cmp-side { position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: clamp(20px,2.4vw,30px) clamp(18px,2.4vw,28px);
  border-radius: var(--radius-sm); min-width: 0; }

/* Losing side: recessed into the slab, dimmed, figure struck through. */
.cmp-side--them { background: var(--ink-000); border: 1px solid rgba(255,255,255,0.05);
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.45); }
/* Winning side: raised off it, lit top edge, full-white figure. */
.cmp-side--us { background: var(--ink-300); border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 10px 26px -14px rgba(0,0,0,0.6); }

.cmp-fig { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
  line-height: 0.92; font-size: clamp(1.9rem,3.9vw,3rem); white-space: nowrap; }
.cmp-side--them .cmp-fig { color: var(--ink-600); text-decoration: line-through;
  text-decoration-thickness: 2px; text-decoration-color: rgba(255,255,255,0.24); }
/* The winning figure carries the accent — the single loudest use of colour on the page,
   spent on the number that settles the argument. */
.cmp-side--us .cmp-fig { color: var(--data-accent); }
.cmp-side p { margin: 0; font-size: clamp(0.875rem,1.05vw,0.9375rem); line-height: 1.6; }
.cmp-side--them p { color: var(--ink-700); }
.cmp-side--us p { color: var(--ink-850); }

/* Column captions sit above the ledger, aligned to the two fields. */
.cmp-lhead { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px,1vw,12px);
  padding: 0 clamp(18px,2.4vw,28px) clamp(14px,1.6vw,18px); }
.cmp-lhead span { color: var(--text-tertiary); }
.cmp-lhead span:last-child { color: var(--text-primary); display: inline-flex; align-items: center; gap: 9px; }
.cmp-lhead span:last-child::before { content: ""; width: 16px; height: 2px; flex: none;
  background: var(--data-accent); transform: skewX(-24deg); }

@media (max-width: 620px) {
  .cmp-lpair { grid-template-columns: 1fr; }
  .cmp-lhead { display: none; }
  .cmp-side--them::after { content: "A TRADITIONAL SHOOT"; font-family: var(--font-mono);
    font-size: 10px; letter-spacing: 0.08em; color: var(--ink-600); }
  .cmp-side--us::after { content: "UNREAL"; font-family: var(--font-mono);
    font-size: 10px; letter-spacing: 0.08em; color: var(--data-accent); }
}

.cmp-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 20px; padding-bottom: clamp(16px,2vw,24px); }
@media (max-width: 560px) { .cmp-panel { padding-inline: 16px; } }

/* Case-study fact grid — pinned to counts that divide the 4 cells exactly.
   auto-fit produced a 3+1 row at mid widths, and because the 1px gaps are the
   parent's background showing through, the empty track rendered as a grey box
   that looked like a missing image. */
.case-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-subtle); }
@media (max-width: 1100px) { .case-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .case-grid { grid-template-columns: 1fr; } }
.case-cell { background: var(--surface-card); padding: 22px 26px; }
.case-cell--full { grid-column: 1 / -1; border-left: 2px solid var(--data-accent); }

/* LEAD FORM — the conversion surface, so it is the one card allowed real elevation.
   A lit top edge + deep drop separates it from the hero photograph behind it. */
.leadform { position: relative; overflow: hidden;
  padding: clamp(22px,2.6vw,34px);
  background:
    radial-gradient(130% 100% at 8% 0%, rgba(255,255,255,0.055), transparent 62%),
    var(--ink-150);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: 0 44px 90px -36px rgba(0,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.08);
}
.leadform-rule { position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--ink-999) 0%, var(--ink-999) 22%, rgba(255,255,255,0.14) 22%, rgba(255,255,255,0.06)); }
/* The hero mounts the SAME full form as the page foot, so the compaction is scoped
   to the hero section rather than a variant — tighter there, roomy at the close. */
#top .leadform { padding: clamp(18px,1.9vw,26px); }
#top .leadform .field { min-height: 42px; padding: 10px 13px; }
#top .leadform .chip { min-height: 38px; padding: 8px 12px; font-size: 12px; }
#top .leadform .btn--lg { height: 50px; padding-inline: 24px; }
@media (max-width: 1023px) { #top .leadform .chip { min-height: 44px; } }
/* Light bands invert the card so it still reads as a raised object, not a hole. */
[data-theme="light"] .leadform { background: var(--ink-999); border-color: var(--border-default);
  box-shadow: 0 34px 70px -34px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.9); }
[data-theme="light"] .leadform-rule { background: linear-gradient(90deg, var(--ink-000) 0%, var(--ink-000) 22%, rgba(0,0,0,0.14) 22%, rgba(0,0,0,0.05)); }
[data-theme="light"] .leadform img[alt=""] { filter: invert(1); }

.lf-heading { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.018em;
  line-height: 1.02; font-size: clamp(1.5rem, 2vw, 1.875rem); }
.leadform .grid--2 { margin-top: 22px; }
#top .leadform .grid--2 { margin-top: 18px; gap: 12px; }
#top .leadform .lf-heading { font-size: clamp(1.375rem, 1.7vw, 1.625rem); }
#top .leadform fieldset { margin-top: 18px; }

/* Signature — closes the studio's point of view like a signed letter */
.sig { margin-top: clamp(36px,5vh,56px); display: flex; align-items: center; gap: 16px; }
.sig-rule { flex: 1 1 auto; height: 1px; background: var(--border-default); }
.sig-mark { height: 28px; width: auto; flex: none; opacity: 0.9; }
[data-theme="light"] .sig-mark { filter: invert(1); }
.sig-name { flex: none; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.0625rem,1.5vw,1.375rem); letter-spacing: -0.01em;
  text-transform: uppercase; white-space: nowrap; }

/* Operating rules — a numbered editorial list. The previous auto-fit card grid
   produced ragged trailing columns and read as six unrelated tiles. */
.rules { list-style: none; margin: clamp(32px,5vh,52px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(28px,4vw,64px);
  border-top: 1px solid var(--border-default); }
@media (max-width: 820px) { .rules { grid-template-columns: 1fr; } }
.rule { display: grid; grid-template-columns: auto 1fr; gap: clamp(16px,2vw,26px);
  padding: clamp(22px,2.6vw,30px) 0; border-bottom: 1px solid var(--border-subtle);
  transition: background .25s var(--ease-out, ease); }
.rule-num { font-family: var(--font-display); font-weight: 800; line-height: 0.86;
  font-size: clamp(1.75rem,3vw,2.5rem); color: transparent;
  -webkit-text-stroke: 1.5px var(--border-strong); }
@supports not (-webkit-text-stroke: 1px black) { .rule-num { color: var(--text-tertiary); } }
.rule:hover .rule-num { -webkit-text-stroke-color: var(--text-primary); }
.rule-name { margin: 2px 0 0; font-family: var(--font-display); font-weight: 700;
  font-size: 1.0625rem; letter-spacing: -0.01em; text-transform: uppercase; }
.rule-body { margin: 10px 0 0; font-size: 14px; line-height: 1.65; color: var(--text-secondary); }


/* UGC feed — a filmstrip of six vertical clips. The hook name rides ON the frame
   (it is what the ad does, so it earns its place); the old second caption line
   was editorialising and is gone, along with the block under each video. */
.ugc-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(8px,1vw,12px); }
@media (max-width: 1100px) { .ugc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .ugc-grid { grid-template-columns: repeat(2, 1fr); } }
.ugc-card { margin: 0; display: flex; flex-direction: column; }
.ugc-media { position: relative; aspect-ratio: 9/16; overflow: hidden;
  border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-inset);
  transition: transform .3s var(--ease-out, ease), border-color .3s ease; }
.ugc-card:hover .ugc-media { transform: translateY(-3px); border-color: var(--border-strong); }
.ugc-badge { position: absolute; top: 10px; left: 10px; padding: 4px 8px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--ink-999);
  background: rgba(0,0,0,0.62); backdrop-filter: blur(6px); border-radius: var(--radius-xs); }
.ugc-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 12px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.8125rem; line-height: 1.2;
  letter-spacing: -0.005em; color: var(--ink-999);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.86)); }

/* Section rhythm, tightened. The DS default (144px top AND bottom) is tuned for
   sparse editorial pages; this page runs 13 sections, most of them media-dense,
   so the default adds ~1,000px of pure padding. 104px still reads as generous
   whitespace between two full-bleed media blocks. */
:root {
  --section-y: clamp(3.5rem, 2rem + 6vw, 6.5rem);
  --section-y-lg: clamp(4.5rem, 2.5rem + 8vw, 8.5rem);
}

/* Product films — one row of six clips over a compact spec bar. Six divides every
   breakpoint's column count (6 / 3 / 2), so no row ever orphans a cell. */
.pf-reel { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(10px,1.2vw,14px); }
@media (max-width: 1000px) { .pf-reel { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .pf-reel { grid-template-columns: repeat(2, 1fr); } }
.pf-specbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 clamp(20px,2.6vw,36px);
  margin-top: clamp(22px,3vh,32px); padding-top: 20px; border-top: 1px solid var(--border-default); }
@media (max-width: 860px) { .pf-specbar { grid-template-columns: repeat(2, 1fr); gap: 22px clamp(20px,2.6vw,36px); } }
@media (max-width: 460px) { .pf-specbar { grid-template-columns: 1fr; } }
/* Column count divides the clip count exactly — no orphan cell. */
.pf-thumb { margin: 0; overflow: hidden; aspect-ratio: 9/16;
  border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-inset);
  transition: transform .3s var(--ease-out, ease), border-color .3s ease; }
.pf-thumb:hover { transform: translateY(-3px); border-color: var(--border-strong); }

/* Process — horizontal: four steps read left-to-right as a sequence, in a quarter
   of the vertical space the stacked timeline took. The rail runs along the top. */
.steps-h { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px,2.4vw,32px); }
.step-h { position: relative; padding-top: 26px; }
.step-h-rail { position: absolute; top: 5px; left: 0; right: calc(-1 * clamp(18px,2.4vw,32px)); height: 1px; background: var(--border-default); }
.step-h:last-child .step-h-rail { right: 0; }
.step-h-rail .step-dot { position: absolute; left: 0; top: -5px; margin: 0; }
.step-h-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.step-h .step-out { display: block; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-subtle); color: var(--text-tertiary); }
@media (max-width: 900px) { .steps-h { grid-template-columns: repeat(2, 1fr); row-gap: clamp(26px,4vh,38px); }
  .step-h:nth-child(2) .step-h-rail { right: 0; } }
@media (max-width: 560px) { .steps-h { grid-template-columns: 1fr; }
  .step-h .step-h-rail { right: 0; } }

/* ============================================================
   TOUCH LAYOUT (≤1023px) — matches where .hero-split stacks and the
   burger appears. Tap targets, input zoom and the mono floor belong
   at the SAME breakpoint as the layout they serve; scoping them to
   640 left the 641–1023 band (iPad portrait) with the stacked layout
   and none of the fixes.
   ============================================================ */
.hero-cta-mobile { display: none; }
@media (max-width: 1023px) {
  /* The hero's full 5-field form pushes the page's first proof past a screen.
     On touch the hero sells and routes; the form lives at #start. */
  .hero-split > div:last-child { display: none; }
  .hero-cta-mobile { display: inline-flex; }

  /* iOS/iPadOS auto-zooms any focused input under 16px — on the one conversion
     surface that costs the user their place. Needs the element qualifier: the base
     `input[type="text"]` rule outranks a bare `.field`. */
  input.field, textarea.field, input[type="text"], input[type="email"], input[type="url"], textarea, select { font-size: 16px; }
}

/* ---- Touch ergonomics: gated on INPUT CAPABILITY, not width.
   These were previously inside `max-width: 1023px`, which meant an iPad Pro in
   landscape (1024px, touch-primary) got the desktop nav and none of the 44px
   targets — nav links computed 27.3px. Layout stays width-gated above; only the
   ergonomics follow the pointer. ---- */
@media (max-width: 1023px), (hover: none) and (pointer: coarse) {
  /* 44px minimum on everything tappable */
  .nav-burger { min-height: 44px; min-width: 44px; }
  .btn--sm { min-height: 44px; }
  .nav-logo { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 0; }
  footer nav a { padding: 13px 0; min-height: 46px; display: flex; align-items: center; }
  .press-cite { padding: 14px 0 15px; }
  details > summary { min-height: 52px; }
  /* `:not(p a)` derives the WCAG 2.5.8 exemption structurally: a mailto inside a
     paragraph IS "in a sentence" and is exempt, one that isn't is a discrete control
     and needs the target. Without the qualifier the 44px box inflated the line box of
     any paragraph containing an address (25.5px line-height → 36.5px line spacing). */
  a.u-mono-label, main a[href^="mailto"]:not(p a) { padding: 11px 0; display: inline-flex; align-items: center; min-height: 44px; }
  /* Legal's section pills are 40px by design on desktop; only the touch target grows. */
  .legal-nav a { min-height: 44px; }
  /* The drawer's secondary row (Contact / Client Login) computed 20px tall — under half
     the minimum, on the primary mobile navigation. The drawer only exists below this
     breakpoint, so there is no desktop counterpart to protect. */
  .drawer-sub a { min-height: 44px; display: inline-flex; align-items: center; }
  /* Focus-only, so not strictly a touch target — but it landed 1.4px short. */
  .skip-link { min-height: 44px; display: inline-flex; align-items: center; }
  /* The desktop nav is visible at ≥1024px, which INCLUDES touch tablets in landscape
     (iPad Pro). Those links compute 27.3px from line-height alone — below 1024 the
     drawer replaces them, so this rule never had a reason to exist until the query
     stopped being width-only. Mouse users keep the tighter header. */
  .nav-desktop .nav-link, .nav-desktop .btn { min-height: 44px; display: inline-flex; align-items: center; }

  .ugc-badge { font-size: 12px; letter-spacing: 0.1em; padding: 5px 8px; }
  /* The brand-film meta line is nowrap by design (it sits in a one-line overlay row).
     Below ~400px the full string exceeds the viewport, so the qualifier drops rather
     than the label wrapping into the headline beneath it. */
  .film-meta-tail { display: none; }}

/* Phone-only density (≤640px) */
@media (max-width: 640px) {
  /* Six 9:16 clips at full width = 4,000px of scroll. Two-up shows the range instead. */
  .ugc-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .ugc-label { padding: 20px 10px 10px; font-size: 12px; }

  /* Page-level CTAs go full-width. At 320–430px an auto-width button lands wherever
     its label ends (measured 225px / 206px), so a row of two reads as two ragged
     fragments rather than a decision. Full-width is the native phone pattern, puts the
     primary action under the thumb, and makes the hierarchy unambiguous. Only .btn--lg
     is affected — that class is used exclusively for page CTAs, so .btn--sm/--md inline
     actions keep their intrinsic width. */
  .btn--lg { width: 100%; }

  /* The decorative still band was 240px tall — a fifth of a phone screen spent on
     texture before any argument. 150px still reads as a moving wall of work. */
  .strip-cell { height: 150px; }

  /* nowrap keeps each figure on one line, but the 1.9rem floor put "FULL RESHOOT" at
     ~211px inside a ~256px cell at 320px — no margin for a longer label later. */
  .cmp-fig { font-size: 1.55rem; }
}

@media (max-width: 1023px) {
  /* Inline width:40px on the dismiss control loses to nothing but !important. */
  .qbar-x { width: 44px !important; min-height: 44px; }
}

/* .step-dot and .step-when are shared by the horizontal steps; the rest of the
   vertical-timeline rules were removed with that markup. */
.step-dot { position: relative; margin-top: 8px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--surface-canvas); border: 1px solid var(--border-strong); transition: border-color .25s ease, box-shadow .25s ease; }
.step-h:hover .step-dot { border-color: var(--data-accent); box-shadow: 0 0 0 4px var(--data-accent-quiet); }
.step-when { padding: 4px 9px; border: 1px solid var(--border-default); border-radius: 100px;
  color: var(--text-tertiary); white-space: nowrap; }

.fmt-spec { color: var(--text-tertiary); letter-spacing: 0.16em; }




/* Horizontal clip rail — for long 9:16 reels where row math would always orphan a cell */
.reel-rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 10px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.reel-rail > * { flex: 0 0 clamp(190px, 21vw, 250px); scroll-snap-align: start; }
.reel-rail:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Fixed-height rail: each card's width follows its own native ratio, so mixed
   aspect ratios sit side by side without a single cropped frame. */
.reel-rail--tall > * { flex: 0 0 auto; height: clamp(340px, 38vw, 460px); aspect-ratio: 9 / 16; }
.reel-rail--native > * { flex: 0 0 auto; height: clamp(300px, 34vw, 420px); width: auto; }
.reel-rail--native > * > video { height: 100%; width: auto; }