/* =============================================================
UNREAL SITE — shared foundations
─────────────────────────────────────────────────────────────
THE SYSTEM CONTRACT (documented here because this file ships
with the bundle; the DS tokens it consumes live in _ds/tokens).
TYPE ROLES display-1/2/3 · h2/h3 (u-h*) · body-lg/body/
body-sm (u-body*) · caption 13 · eyebrow 12 ·
micro 11 · note 14 — every size is a token
below; no literal font-size may be added.
SPACING the 14-step --space-* scale; section rhythm
--section-y / --section-y-lg; component gaps
in steps, never invented values.
CONTAINERS shell 1440 (heroes, full-bleed media) ·
content 1200 (everything argued) ·
narrative 832 (prose) — settled in Phase 3.
GRID declared spans on the documented ladder:
479 / 767 / 1023 / 1279 (+ lg–xl band).
LINES the 4-step --line-* scale only; no ad-hoc
border alphas.
RADIUS xs 2 · sm 4 · md 6 · lg 10 · pill · circle —
from tokens, and sparingly: this brand is
hairlines and skews, not rounded cards.
ELEVATION exactly three: --elev-card (raised card),
--elev-doc (the physical-document artifacts),
--elev-float (badges/overlays). Nothing else
casts a shadow.
ICONS stroke icons: 24 viewBox, 1.6 stroke, in a
19px box (see .social-btn). Glyph icons (↗ +)
come from the type system at label size.
Never mix a third style.
MOTION durations/easings from --dur-* / --ease-*;
choreography delays are literal by design.
Feedback (progress, form swap) runs under
reduced-motion; decoration never does.
STATES every interactive surface defines default /
hover / focus-visible / active / disabled;
buttons add is-loading; fields add
aria-invalid + .field-error.
ACCENT --data-accent marks DATA AND STATE ONLY —
never chrome. One accent, everywhere.
============================================================= */
/* ---- Token bridge: UMGFINAL's deliberate divergences from the DS defaults are
expressed AS the tokens, so there is one source of truth. (site.css previously
re-declared the display classes with literal clamps, which silently made
token-level responsive overrides inert — the Phase-1 320px fix hit exactly that.) */
:root {
--fs-display-1: clamp(2.75rem, 6.4vw, 6rem);
/* Section headings keep the type they had before the 2 Sep refinement
pass (Dan, 2 Sep 2026): the pre-pass display-2/3 scale. */
--fs-display-2: clamp(2rem, 4.2vw, 3.5rem);
--fs-display-3: clamp(1.75rem, 3.2vw, 2.5rem);
/* two sizes the DS scale lacks, named so they stop being "random numbers" */
--fs-note: 0.875rem; /* 14px — footer blurb, dense annotations, u-body-sm */
--fs-h3: 1.5rem; /* site fixes the DS's fluid h3 at its midpoint */
--fs-metric-md: 1.75rem; /* the metric scale is its own family, not headings */
--fs-metric-sm: 1.25rem;
--fs-lf-heading: clamp(1.375rem, 1.8vw, 1.75rem); /* lead-form heading */
/* the three elevations — the only shadows on the site */
--elev-card: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 12px 30px -18px rgba(0, 0, 0, 0.8);
--elev-doc: 0 32px 64px -44px rgba(0, 0, 0, 0.55), 0 2px 0 var(--line-1);
--elev-float: 0 20px 42px -20px rgba(0, 0, 0, 0.9);
}
/* ---- 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, var(--dur-base)) 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: var(--radius-xs);
}
/* ---- 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: var(--fs-display-1);
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: var(--fs-display-2);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 0.98;
text-transform: uppercase;
text-wrap: balance;
margin: 0;
}
.u-display-3 {
/* Section headings keep the type they had before the 2 Sep refinement
pass (Dan, 2 Sep 2026): uppercase Saira 700 at the tight track. The
rest of that pass (labels, accent, frames, textures, rhythm) stands. */
font-family: var(--font-display);
font-size: var(--fs-display-3);
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: var(--fs-h3);
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.2;
margin: 0;
}
.u-title {
font-family: var(--font-display);
font-size: var(--fs-title);
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: var(--fs-body-lg);
font-weight: 400;
line-height: 1.6;
}
.u-body {
font-family: var(--font-body);
font-size: var(--fs-body);
font-weight: 400;
line-height: 1.6;
}
.u-body-sm {
font-family: var(--font-body);
font-size: var(--fs-note);
font-weight: 400;
line-height: 1.6;
}
/* Labels — two systems, never crossed */
.u-eyebrow {
font-family: var(--font-eyebrow);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.u-mono-label {
/* Refinement pass (2 Sep 2026): the label voice moves off the monospace.
Space Mono at 0.14em on every label read as dev-tool chrome; labels are
now the body face at 13px with a light track, and monospace is reserved
for data (.u-data): durations, ratios, file names, counters. */
font-family: var(--font-sans);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
font-variant-numeric: tabular-nums;
}
.u-data {
font-family: var(--font-mono);
font-weight: 400;
letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
}
.u-mono-micro {
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
font-variant-numeric: tabular-nums;
}
/* Metrics — tabular always */
.u-metric-md {
font-family: var(--font-display);
font-size: var(--fs-metric-md);
font-weight: 800;
font-variant-numeric: tabular-nums;
line-height: 1;
}
/* Hero outline word — solid fallback, outline only when strokes paint (§B.2.7) */
/* =============================================================
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 var(--dur-base) var(--ease-out, ease),
background var(--dur-base) var(--ease-out, ease),
border-color var(--dur-base) var(--ease-out, ease),
color var(--dur-base) var(--ease-out, 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: var(--fs-caption);
}
.btn--md {
height: 48px;
padding: 0 26px;
font-size: var(--fs-eyebrow);
}
.btn--sm {
height: 40px;
padding: 0 20px;
font-size: var(--fs-eyebrow);
}
.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 is nowrap because a filled button that wraps loses its shape. A quiet button has
no fill — it is a text link with a blade — so on narrow screens it wraps instead of
pushing the page into a horizontal scroll. `height` becomes a floor for the same
reason: two lines need the box to grow. */
@media (max-width: 767px) {
.btn--quiet {
white-space: normal;
height: auto;
min-height: 48px;
padding-block: 12px;
text-align: left;
line-height: 1.5;
}
}
.btn[disabled],
.btn[aria-disabled="true"] {
opacity: 0.45;
cursor: not-allowed;
}
/* The blade grows on hover by scaling, not by width: a width change made the
button 16px wider and shoved its neighbour sideways on every hover. */
.btn .fx-blade {
display: inline-block;
width: 34px;
height: 2px;
background: currentColor;
transform: skewX(-24deg) scaleX(0.53);
transform-origin: left center;
transition: transform var(--dur-base) var(--ease-out, ease);
}
.btn:hover .fx-blade {
transform: skewX(-24deg) scaleX(1);
}
/* =============================================================
FX — grain, image treatment, marquee, reveals
============================================================= */
.fx-grain {
position: relative;
}
.fx-grain::after,
.cta-close::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.05;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjAiIGhlaWdodD0iMTYwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC45IiBudW1PY3RhdmVzPSIyIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI24pIi8+PC9zdmc+");
background-size: 160px 160px;
}
.fx-img {
transition: transform var(--dur-slower) var(--ease-out, ease);
}
.fx-img:hover {
transform: scale(1.02);
}
.fx-cta {
transition:
transform var(--dur-base) var(--ease-out, ease),
background var(--dur-base) var(--ease-out, ease),
border-color var(--dur-base) var(--ease-out, ease),
color var(--dur-base) var(--ease-out, 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 var(--dur-base) var(--ease-out, 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);
}
/* The track carried these four declarations inline, and an inline `animation`
shorthand sets animation-play-state to `running` at a specificity no
stylesheet rule can reach. Both pause selectors below were therefore dead:
the WCAG 2.2.2 button toggled .is-paused and the strip kept scrolling, and
hover-pause never worked either. The reduced-motion rule further down only
works because it reaches for !important. Held in the class instead, so the
cascade decides and no rule needs to shout. */
.fx-track {
display: flex;
gap: 14px;
width: max-content;
animation: marquee 96s linear infinite;
}
.fx-marquee:hover .fx-track {
animation-play-state: paused;
}
.fx-marquee.is-paused .fx-track {
animation-play-state: paused;
}
/* WCAG 2.2.2 pause control, injected by site-fx.js. Hover-pause alone leaves touch and
keyboard users with no way to stop the motion. The brand film shares the control's
look but sits top-right, clear of the headline block and the film meta line. */
.marquee-toggle,
.film-toggle {
position: absolute;
right: clamp(16px, 3vw, 40px);
bottom: 10px;
z-index: 3;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.62);
color: rgba(255, 255, 255, 0.86);
border: 1px solid var(--border-default);
border-radius: var(--radius-circle);
cursor: pointer;
font-size: var(--fs-micro);
letter-spacing: 0.06em;
padding: 0;
-webkit-backdrop-filter: blur(var(--blur-sm));
backdrop-filter: blur(var(--blur-sm));
transition:
color var(--dur-base) var(--ease-out, ease),
border-color var(--dur-base) var(--ease-out, ease);
}
.marquee-toggle:hover,
.film-toggle:hover {
color: var(--ink-999);
border-color: var(--border-strong);
}
.marquee-toggle:focus-visible,
.film-toggle:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
footer .marquee-toggle {
display: none;
} /* the footer ticker is decorative and tiny */
/* Declared after the shared block so these win — the film control anchors to the top. */
.film-toggle {
top: clamp(70px, 10vh, 104px);
bottom: auto;
}
/* Reveals: gated — invisible ONLY when JS has confirmed it will run */
html.js-enabled [data-reveal] {
opacity: 0;
transform: translateY(22px);
transition:
opacity var(--dur-reveal) var(--ease-out, ease),
transform var(--dur-reveal) 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--hover {
transition:
transform var(--dur-base, var(--dur-base)) var(--ease-out, ease),
border-color var(--dur-base, var(--dur-base)) var(--ease-out, ease);
}
.card--hover:hover {
transform: translateY(-2px);
border-color: var(--border-strong);
}
.card--hover:hover .fx-img {
transform: scale(1.04);
}
/* =============================================================
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: var(--fs-body-sm);
outline: none;
transition: border-color var(--dur-base) var(--ease-out, 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: var(--fs-caption);
color: var(--text-primary);
font-weight: 600;
margin-top: 6px;
}
/* The lead form's alert region is always mounted (an aria-describedby target that
only exists after a failure resolves to nothing while the form is being filled
in), so it needs a weightless resting state and a visible one. This was a
130-character style string rebuilt in JS on every render; the two states are
what CSS is for. Not .field-error above: that styles a message under a single
field, and this is one form-level alert — reusing it would change the design
rather than consolidate it. */
.form-alert {
margin: 0;
}
.form-alert.is-shown {
margin: 18px 0 0;
padding: 12px 14px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
color: var(--text-primary);
}
/* 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: var(--fs-caption);
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 var(--dur-base) var(--ease-out, ease),
background var(--dur-base) var(--ease-out, ease),
color var(--dur-base) var(--ease-out, 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: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: var(--fs-body-sm);
color: var(--text-primary);
background: var(--wash-up-1);
border: 1px solid var(--border-default);
border-radius: var(--radius-sm);
transition:
border-color var(--dur-base) var(--ease-out, ease),
background var(--dur-base) var(--ease-out, 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 7.5% 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,
.cta-close::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("assets/u-mark-white-176.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;
}
/* The closing call to action — the section every page ends on, and the site's
most repeated moment. It shipped three ways: branded on the homepage, a plain
dark band on four pages, and Contact on a padding value of its own. One class
now carries the grain, the U-mark field the note above already scoped to "the
closing section", the section rhythm and the centring. Page-level borders stay
inline: they separate whatever happens to sit above. */
.cta-close {
position: relative;
padding: var(--section-y) 0 var(--section-y-lg);
text-align: center;
}
.cta-close > * {
position: relative;
}
/* The U-mark is the one brand glyph and it was landing at seven hand-set heights
(44 / 35 / 30 / 30 / 28 / 17 / 16 / 14px), so the same object read as a slightly
different size on almost every page. Three steps, chosen as the value already
most used in each cluster. Opacity and spacing stay per-instance — those are
context, not scale. */
.u-mark {
width: auto;
}
.u-mark--lg {
height: 44px;
}
.u-mark--md {
height: 30px;
}
.u-mark--sm {
height: 16px;
}
/* Four identical inline font sizes drove the drawer's destinations. */
.nav-drawer-link {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2rem, 9vw, 3.2rem);
text-transform: uppercase;
letter-spacing: -0.02em;
line-height: 1.15;
}
/* The one number style that sat outside the type roles. Mono on purpose — these
values are not all numeric ("SET"), which is why they are not a metric role. */
.fact-value {
font-size: clamp(1.4rem, 2.4vw, 2rem);
font-weight: 700;
color: var(--text-primary);
}
@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;
}
/* <=374px: .u-display-1's 2.75rem floor outgrows the viewport. The headline is
uppercase 800-weight, so its longest word ("EVERYWHERE.") runs ~7.7x the font-size
— 339px at the floor, wider than the 280px content column. A single word cannot
wrap, so it forced its grid track 39px past the viewport and the hero's
overflow:hidden severed the column mid-letter. 11vw keeps that word inside the
column at every width down to 320. (The class, not the token: site.css's own
.u-display-1 clamp overrides --fs-display-1, so a token step here is inert.) */
@media (max-width: 479px) {
:root {
/* 9.4vw, not 11: at 393 the second line "SEEN EVERYWHERE." measured 405px
in a 353px column and broke into a third line, splitting the solid and
outline pair the headline is built on. 346px now; 277px at 320. */
--fs-display-1: clamp(1.85rem, 9.4vw, 2.75rem);
}
}
/* 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-label,
.fmt-spec,
.step-when {
font-size: 0.8125rem;
}
.u-mono-micro {
font-size: 0.75rem;
}
/* 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 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 var(--dur-base) var(--ease-out, ease),
border-color var(--dur-base) 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 var(--dur-base) var(--ease-out, ease),
opacity var(--dur-base) var(--ease-out, ease);
}
.press-cite:hover .press-arrow {
transform: translate(1px, -1px);
opacity: 1;
}
/* Stills gallery — masonry columns: native ratios, no cropping, no orphan cells */
/* A rectangular grid: three 4:5 frames, then the landscape portrait across
two columns beside the fifth. The masonry it replaces ended ragged at every
width (column bottoms 318px apart at 1440) with the centred link floating
in the void. The wide frame has no intrinsic height of its own, so it takes
the row height its 4:5 neighbour sets, exactly. */
/* Four 4:5 frames across (2 x 2 on a phone); one shape, so the row always
closes flush. The wide-cell variant below is kept for any page that still
spans a landscape frame across two columns. */
.stills-strip {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin-top: 14px;
}
.stills-strip > figure {
position: relative;
margin: 0;
overflow: hidden;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
aspect-ratio: 4 / 5;
}
/* The picture is pinned to the cell, so a landscape source fills the 4:5
frame the same way a portrait one does: an inline let the image
size itself to its own ratio and left the cell half empty. */
.stills-strip > figure picture {
position: absolute;
inset: 0;
display: block;
}
.stills-strip img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.stills-strip > .stills-strip__wide {
grid-column: span 2;
aspect-ratio: auto;
position: relative;
}
.stills-strip > .stills-strip__wide picture {
position: absolute;
inset: 0;
}
@media (max-width: 767px) {
.stills-strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
/* Alone on its row on a phone, the wide frame keeps its own 3:2. */
.stills-strip > .stills-strip__wide {
aspect-ratio: 3 / 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;
}
/* minmax(0,1fr), not 1fr: a bare 1fr track's min size is min-content, so one long
headline word can push the track past the viewport and the hero clips it. */
@media (max-width: 1023px) {
.hero-split {
grid-template-columns: minmax(0, 1fr);
gap: 36px;
}
}
/* The wizard split: copy carries slightly more track than the card, and the
card never grows past a readable form width when the column is generous. */
.hero-split--wizard {
align-items: center;
}
.hero-split--wizard > div:last-child {
max-width: 560px;
width: 100%;
justify-self: end;
}
@media (max-width: 1023px) {
.hero-split--wizard > div:last-child {
justify-self: stretch;
max-width: 640px;
}
}
/* Stats + the partnership door, as one baseline band under both hero columns. */
.hero-under {
margin-top: clamp(32px, 5vh, 48px);
padding-top: clamp(20px, 3vh, 28px);
border-top: 1px solid var(--border-strong);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px 32px;
}
/* The band draws the rule once; the stats block inside it loses its own. */
.hero-under .hero-stats {
border-top: 0;
flex: 0 1 auto;
}
.hero-under .hero-stat {
padding-top: 0;
flex: 0 0 auto;
}
.hero-under .hero-alt {
display: inline-block;
}
@media (max-width: 479px) {
.hero-under .hero-stat {
flex: 1 1 100%;
}
.hero-under .hero-stat:first-child {
padding-top: 0;
}
.hero-under .hero-stat + .hero-stat {
padding-top: 14px;
}
}
/* The split hero's headline is measured by its column, not by the viewport.
--fs-display-1 is 6.4vw, calibrated for the full-width heroes every other
page uses; dropped into a 1.1fr track it outgrows its own authored line
breaks, so "Shot nowhere. / Seen everywhere." set as four ragged lines at
every width from 1024 up — 308px of the first screen at 1280 — and the
solid-line/outline-line pairing the type is built around never resolved.
Container units size it against the column it actually occupies; min()
keeps the token as the ceiling so nothing here can enlarge a headline. */
@media (min-width: 1024px) {
.hero-split > div:first-child {
container-type: inline-size;
}
/* The vw fallback is not redundant, it is the fix for a visible flash.
This page mounts client-side, and on the first paint after the mount the
container's inline-size is not registered yet. A cqw length with no
container resolves against the viewport, so `min(8.8cqw, …)` computed
81.92px at 1280 — measured — and the headline painted 50% too large for a
frame before snapping to 54.56px. The column runs about 48% of the shell,
so 4.2vw lands within a pixel of the container answer and the swap is
invisible. The @container block below takes over the moment the container
is live, and stays the authority at every width. */
.hero-split > div:first-child .u-display-1 {
font-size: min(4.2vw, var(--fs-display-1));
}
@container (min-width: 1px) {
.hero-split > div:first-child .u-display-1 {
font-size: min(8.8cqw, var(--fs-display-1));
}
}
}
@keyframes recpulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.35;
}
}
@media (prefers-reduced-motion: reduce) {
[style*="recpulse"] {
animation: none !important;
}
}
/* The hero stagger is declared inline per element, so the keyframe-level
reduced-motion blocks never reached it — a visitor who asked the OS for less
motion still got the full ten-element sequence. Same attribute-selector guard
recpulse uses. `animation: none` also cancels the "both" fill, so content that
would have faded in simply renders in place. */
@media (prefers-reduced-motion: reduce) {
[style*="heroIn"] {
animation: none !important;
}
}
fieldset.chips {
border: none;
margin: 0;
padding: 0;
}
fieldset.chips legend {
font-size: var(--fs-caption);
color: var(--text-secondary);
padding: 0;
margin-bottom: 10px;
font-family: var(--font-body);
}
/* 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: var(--radius-xs);
position: relative;
cursor: pointer;
margin: 0;
transition: background var(--dur-base) var(--ease-out, 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 var(--dur-base) var(--ease-out, ease),
background var(--dur-base) var(--ease-out, 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
============================================================= */
/* =============================================================
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;
}
/* Paid-traffic landing heroes (/start, /contact): when the split stacks, the
form comes first — the h1 plus the form's own header is the pitch, and the
supporting bullets answer objections below it. Measured before this: the
first input sat ~1200px down at 390×844, 1.4 viewports from the promise. */
.hero-lp > :first-child {
order: 2;
}
}
/* Grid-child stagger stayed deliberately unimplemented: the reveal system tags
only section openers and the duel (site-fx.js), and the duel's own row cascade
below is the one place a cascade tells a story. Blanket card stagger is
motion without information. */
.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: var(--fs-eyebrow);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.skip-link:focus {
left: 12px;
top: 12px;
}
/* The desktop nav switches on at the documented lg boundary (1024) but at 2.2vw
its last item ran to 1040px — iPad landscape clipped the START A PROJECT
button. 1.7vw fits 1024 with 20px to spare and is within a pixel of the old
gap at 1920, so the wide-desktop rhythm is unchanged. Measured, not guessed. */
.nav-desktop {
display: flex;
align-items: center;
gap: clamp(16px, 1.7vw, 34px);
}
.nav-burger {
display: none;
}
/* The drawer mounts only while open, so a mount animation is its entrance:
a short fade-drop for the surface, then the destinations land top to bottom.
Close unmounts instantly — dismissal never waits. Compositor properties only. */
@media (prefers-reduced-motion: no-preference) {
#nav-drawer {
animation: drawer-in var(--dur-base) var(--ease-out, ease);
}
#nav-drawer nav > a {
animation: drawer-link-in var(--dur-slow) var(--ease-out, ease) both;
}
#nav-drawer nav > a:nth-child(1) {
animation-delay: 40ms;
}
#nav-drawer nav > a:nth-child(2) {
animation-delay: 80ms;
}
#nav-drawer nav > a:nth-child(3) {
animation-delay: 120ms;
}
#nav-drawer nav > a:nth-child(4) {
animation-delay: 160ms;
}
#nav-drawer .drawer-sub {
animation: drawer-link-in var(--dur-slow) var(--ease-out, ease) 200ms both;
}
}
@keyframes drawer-in {
from {
opacity: 0;
transform: translateY(-8px);
}
}
@keyframes drawer-link-in {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (max-width: 1023px) {
.nav-desktop {
display: none;
}
.nav-burger {
display: inline-flex;
}
}
.nav-link {
font-family: var(--font-eyebrow);
font-size: var(--fs-eyebrow);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-secondary);
white-space: nowrap;
padding: 4px 0;
border-bottom: 1px solid transparent;
transition:
color var(--dur-base) var(--ease-out, ease),
border-color var(--dur-base) var(--ease-out, 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: var(--fs-eyebrow);
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 var(--dur-base) var(--ease-out, ease),
color var(--dur-base) var(--ease-out, ease);
}
.legal-nav a:hover {
border-color: var(--ink-999);
color: var(--text-primary);
}
/* Sticky qualify bar. Measured at 390x844: /work runs 5.4 screens, /about 5.0 and
/how-it-works 4.4 with no actionable element anywhere on screen — the homepage
solved that with this bar and the other long pages never got one. The shell now
lives here once; site-fx.js injects the same markup into any page carrying a
[data-cta-bar] marker, and the homepage's own React copy uses the same class. */
.qbar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 60;
background: var(--glass-dark, rgba(0, 0, 0, 0.7));
-webkit-backdrop-filter: blur(var(--blur-md));
backdrop-filter: blur(var(--blur-md));
border-top: 1px solid var(--border-strong);
animation: heroIn var(--dur-slow) var(--ease-out, ease) both;
}
.qbar-row {
padding-top: 12px;
padding-bottom: max(12px, env(safe-area-inset-bottom));
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.qbar-lede {
display: flex;
align-items: baseline;
gap: 16px;
min-width: 0;
}
.qbar-title {
font-size: var(--fs-body-sm);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.qbar-acts {
display: flex;
align-items: center;
gap: 10px;
flex: none;
}
/* Two bars pinned to the same edge means the consent notice (z-index 2147483646)
sits on top of the action bar (60) and buries its controls — measured on a
phone with the notice up. Consent is a one-time, front-loaded decision, so the
action bar waits for it. site-fx.js sets the flag, which also covers the
homepage's own React-rendered bar. */
html.has-consent-notice .qbar {
display: none !important;
}
/* The persistent cookie-preferences control is pinned bottom-left at a maximal
z-index, so it sat squarely on top of the action bar's primary button —
measured at 390px, and true on the homepage before this pass too. Privacy
controls do not get hidden, so it steps up above the bar for as long as the
bar is showing. site-fx.js publishes the bar's measured height. */
html.has-cta-bar #umg-cookie-preferences {
bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--qbar-h, 69px) + 10px) !important;
}
@media (max-width: 767px) {
/* At 390px the three controls take the whole row, leaving the lede squeezed to a
truncated sliver that reads as a rendering fault. On a phone the two actions
say it themselves, so the sentence goes and they get the width. */
.qbar-meta,
.qbar-title {
display: none !important;
}
.qbar-lede {
display: none;
}
.qbar-row {
gap: 10px;
}
.qbar-acts {
flex: 1 1 auto;
}
.qbar-acts .btn {
padding-inline: 12px;
}
.qbar-acts .btn:not(.qbar-x) {
flex: 1 1 0;
justify-content: center;
}
}
/* Eyebrow labels wrap between words when the width runs out. A nowrap rule sat here
("never wrap mid-word") — but normal white-space already never breaks mid-word, and
nowrap made the label's min-content the full line, so inside the hero's
overflow:hidden the 320px viewport SEVERED the eyebrow mid-letter instead of
wrapping it. Sitewide, since every section opens with this component. */
span[style*="0.24em"] {
white-space: normal;
}
/* Details / FAQ */
details > summary {
list-style: none;
}
details > summary::-webkit-details-marker {
display: none;
}
details[open] .faq-x {
transform: rotate(45deg);
}
/* The + already rotates; the answer itself snapped into place. A 4px settle in
the direction the panel expands gives the open action a body. Close stays
instant — dismissal should never wait on choreography. */
@media (prefers-reduced-motion: no-preference) {
details[open] > :not(summary) {
animation: faq-in var(--dur-base) var(--ease-out, ease) both;
}
}
@keyframes faq-in {
from {
opacity: 0;
transform: translateY(-4px);
}
}
/* 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 var(--dur-base) var(--ease-out, ease),
border-color var(--dur-base) var(--ease-out, ease),
background 0.2s var(--ease-out, ease),
transform 0.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;
font-size: clamp(3.4rem, 12.5vw, 11.5rem);
}
@media (max-width: 1279px) {
.footer-wordmark-tail {
display: none;
}
}
/* Wide viewports show the full name — sized to end at the shell edge, not to be
guillotined mid-letter. "UNREAL MEDI|" read as a mistake, not a bleed. */
@media (min-width: 1280px) {
.footer-wordmark {
font-size: clamp(5.8rem, 7.35vw, 6.55rem);
}
}
/* Hero monitor — the form's old column shows the work now, one form remains at
#start. Hidden below the split breakpoint: the frames marquee directly under
the hero already puts media above the fold on a phone, and a stacked 9:16
panel would add ~700px to a page already fighting its height. The clip is
preload="none" with a data-src the reel observer assigns on intersection, so
a hidden monitor never intersects and never downloads a byte. */
/* =============================================================
HOMEPAGE HERO (2 Sep 2026) — the work full-bleed, one line, one action
============================================================= */
/* The hero is one screen: a reel of published pieces behind a headline at
the full display scale, one action, a meta line naming the piece playing,
and the frames ticker as the section's own floor. Three grid rows: the
copy (which centres in whatever the ticker leaves), the meta line, the
ticker. 100svh where the browser has it, so the phone's URL bar never
pushes the ticker under the fold. */
.hero {
position: relative;
overflow: hidden;
min-height: 100vh;
min-height: 100svh;
display: grid;
/* One explicit column at the section's own width. Left implicit, the
column sized itself to the ticker's max-content track (about 3900px of
cells) and every .u-container in the hero centred inside that, 1200px
off the right edge of the screen. */
grid-template-columns: minmax(0, 100%);
grid-template-rows: minmax(0, 1fr) auto auto;
background: var(--surface-canvas);
color: var(--text-primary);
}
.hero-media,
.hero-scrim {
position: absolute;
inset: 0;
}
.hero-media {
z-index: 0;
background: #000;
transform-origin: 50% 40%;
}
.hero-poster,
.hero-poster img,
.hero-film {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* The two reel elements crossfade on opacity alone. Nothing else about them
moves, so the cut is one compositor fade and the poster under both never
shows through mid-transition (the outgoing clip keeps painting until the
fade completes; the script pauses it a beat later). */
.hero-film {
opacity: 0;
transition: opacity 900ms var(--ease-out, ease);
}
.hero-film.is-live {
opacity: 1;
}
/* One scrim, shaped rather than blanket: the reading column on the left and
the ticker's floor take the ink, the centre and right of the frame keep
the clip's own light. A phone holds the copy lower in a taller frame, so
the weight moves to the bottom third. */
.hero-scrim {
z-index: 1;
pointer-events: none;
background: linear-gradient(
90deg,
rgba(10, 10, 11, 0.82) 0%,
rgba(10, 10, 11, 0.5) 34%,
rgba(10, 10, 11, 0.06) 66%,
rgba(10, 10, 11, 0.18) 100%
),
linear-gradient(
180deg,
rgba(10, 10, 11, 0.55) 0%,
rgba(10, 10, 11, 0) 28%,
rgba(10, 10, 11, 0) 52%,
rgba(10, 10, 11, 0.9) 100%
);
}
@media (orientation: portrait) {
.hero-scrim {
background: linear-gradient(
180deg,
rgba(10, 10, 11, 0.62) 0%,
rgba(10, 10, 11, 0.18) 24%,
rgba(10, 10, 11, 0.42) 56%,
rgba(10, 10, 11, 0.94) 100%
);
}
}
.hero-copy {
position: relative;
z-index: 2;
align-self: center;
width: 100%;
padding-top: calc(68px + clamp(32px, 7vh, 88px));
padding-bottom: clamp(20px, 4vh, 44px);
}
/* The full display scale, sized against the viewport rather than a column.
min() keeps the token as the ceiling; the vw term keeps the longest line
("SEEN EVERYWHERE.", 16 characters of uppercase Saira at 800) inside the
shell at every width from 480 up. Under 480 the token itself is the 9.4vw
phone step declared above, which was measured for exactly that line. */
.hero-title {
margin: clamp(18px, 3vh, 28px) 0 0;
font-size: min(var(--fs-display-1), 8.6vw);
line-height: 0.92;
}
@media (max-width: 479px) {
.hero-title {
font-size: var(--fs-display-1);
}
}
/* Masked line reveal: each line is a clipped box and its text rises into it.
Transform only, no overshoot, and the box reserves the line height, so the
headline never reflows as it lands. The small padding/negative margin pair
keeps descenders from clipping at the mask edge. */
.hero-line {
display: block;
overflow: hidden;
padding-bottom: 0.08em;
margin-bottom: -0.08em;
}
.hero-line > span {
display: block;
transform: translateY(112%);
animation: heroLine var(--dur-cinematic) var(--ease-out, ease) both;
}
@keyframes heroLine {
to {
transform: none;
}
}
.hero-in {
animation: heroIn var(--dur-cinematic) var(--ease-out, ease) both;
}
[data-i="1"] {
animation-delay: 0.1s;
}
[data-i="2"] {
animation-delay: 0.2s;
}
[data-i="3"] {
animation-delay: 0.36s;
}
[data-i="4"] {
animation-delay: 0.46s;
}
[data-i="5"] {
animation-delay: 0.7s;
}
.hero-lede {
margin: clamp(20px, 3vh, 30px) 0 0;
max-width: 38ch;
color: rgba(255, 255, 255, 0.84);
text-wrap: pretty;
}
.hero-cta {
margin-top: clamp(24px, 4vh, 36px);
}
/* The meta line: which piece is playing, its provenance, its page, and the
one control that stops it. Right-aligned under the copy, over the clip's
dark floor, in the film-meta ink the brand film already uses. */
.hero-meta {
position: relative;
z-index: 2;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 10px 22px;
padding-bottom: clamp(14px, 2.2vh, 24px);
color: rgba(255, 255, 255, 0.64);
}
.hero-meta-now {
display: inline-flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.hero-meta-text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* A phone has no room for the prefix or for one line: the piece's name
takes the first line whole (truncating before it can wrap), the link and
the control share the second. */
@media (max-width: 767px) {
.hero-meta {
justify-content: flex-start;
gap: 12px 16px;
}
.hero-meta-now {
flex: 1 1 100%;
}
.hero-meta-prefix {
display: none;
}
.hero-meta-link {
margin-right: auto;
}
}
.hero-meta-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.85);
flex: none;
animation: recpulse 2.4s ease-in-out infinite;
}
.hero-meta-link {
color: rgba(255, 255, 255, 0.84);
text-decoration: none;
white-space: nowrap;
transition: color var(--dur-base) var(--ease-out, ease);
}
.hero-meta-link:hover,
.hero-meta-link:focus-visible {
color: #fff;
text-decoration: underline;
text-underline-offset: 4px;
}
.hero-toggle {
-webkit-appearance: none;
appearance: none;
width: 40px;
height: 40px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.28);
background: rgba(10, 10, 11, 0.55);
color: #fff;
font-size: 11px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: border-color var(--dur-base) var(--ease-out, ease);
}
.hero-toggle:hover {
border-color: rgba(255, 255, 255, 0.6);
}
.hero-toggle:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
/* The ticker as the hero's floor. A hairline above, the clip's dark floor
behind, and cells shorter than the standalone strip ran, because here they
share the screen with the headline. The marquee's own pause control still
lands bottom-right (site-fx positions it against this box). */
.hero-strip {
position: relative;
z-index: 2;
min-width: 0;
overflow: hidden;
padding: clamp(12px, 2vh, 18px) 0 clamp(16px, 3vh, 28px);
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.hero-strip-label {
margin-bottom: 12px;
color: rgba(255, 255, 255, 0.56);
}
.hero-strip .strip-cell {
height: clamp(112px, 12vw, 164px);
}
@media (max-width: 767px) {
.hero-strip .strip-cell {
height: 124px;
}
}
/* Scroll handoff, where the browser has scroll-driven animations: the copy
lifts and fades as the reader leaves, the reel settles back. Pure
functions of scroll position, no listeners; browsers without the feature
simply scroll past. Off under reduced motion. */
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
.hero-copy {
animation: heroDrift linear both;
animation-timeline: scroll(root);
animation-range: 0 80vh;
}
.hero-media {
animation: heroSink linear both;
animation-timeline: scroll(root);
animation-range: 0 100vh;
}
}
}
@keyframes heroDrift {
to {
transform: translateY(-12vh);
opacity: 0;
}
}
@keyframes heroSink {
to {
transform: scale(1.08);
}
}
@media (prefers-reduced-motion: reduce) {
.hero-line > span,
.hero-in {
animation: none !important;
transform: none;
}
.hero-meta-dot {
animation: none;
}
.hero-toggle {
display: none;
}
}
/* The header floats over the hero. The page opts in (html.nav-overlay, set
by the homepage on mount) and site-fx flags the resting position
(html.nav-at-top while scrollY < 24). The header's glass is authored
inline in SiteNav, so this is the one place !important is the right tool:
the rule must beat an inline declaration, and only while both flags hold. */
html.nav-overlay .site-header {
transition:
background-color var(--dur-base) var(--ease-out, ease),
border-color var(--dur-base) var(--ease-out, ease);
}
html.nav-overlay.nav-at-top .site-header {
background: transparent !important;
border-bottom-color: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* The proof band under the hero: the press citations on the left, the
partnership door on the right, one quiet line. */
.proof-band {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 14px 32px;
padding-top: clamp(18px, 2.6vh, 26px);
padding-bottom: clamp(18px, 2.6vh, 26px);
}
.proof-band .hero-alt {
display: inline-block;
}
/* 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);
}
.hero-stat-value {
margin: 0;
line-height: 1;
}
.hero-stat-label {
margin-top: 8px;
color: var(--text-tertiary);
}
/* Boxed fact bands (How It Works hero and kin) share the phone ledger treatment:
value left, label right, one row per fact. */
.fact-label {
margin-top: 8px;
color: var(--text-tertiary);
}
@media (max-width: 479px) {
.fact-cell {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.fact-cell .fact-label {
margin-top: 0;
text-align: right;
}
}
@media (max-width: 479px) {
/* Phones get ledger rows, not a tall stack: value left, label right on one
baseline — the callsheet language the duel section already speaks. Three
rows read in one glance instead of six stacked lines. */
.hero-stat {
flex: 1 1 100%;
padding: 14px 0 0;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.hero-stat + .hero-stat {
padding-left: 0;
border-left: 0;
border-top: 1px solid var(--border-subtle);
margin-top: 14px;
}
.hero-stat-label {
margin-top: 0;
text-align: right;
}
}
/* 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 {
position: relative;
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 var(--line-3);
color: var(--text-primary);
box-shadow: var(--elev-card);
transition:
background var(--dur-base) var(--ease-out, ease),
transform var(--dur-base) var(--ease-out, ease),
border-color var(--dur-base) var(--ease-out, ease),
box-shadow var(--dur-base) var(--ease-out, ease);
}
/* Scoped to the anchor: /partnership's eligibility row is three