rather than links: no tab
stop, no magnetic bubble, no parallax, and the caption is programmatically
tied to the images instead of floating near them as a stray .
Two different phone widths, and they are not interchangeable:
--shot-phone-col is the grid column, a clamp so the two shots keep the same
height relationship at every size. Fixed at 15rem the wide shot collapses on
the way down — at 768px it would be 427px wide against a 496px phone, a 2.4x
height difference that reads as two unrelated images. On the clamp both land
at ~1.3x from 48rem all the way up.
--shot-phone-w is the cap while STACKED, and it is deliberately flat. Reusing
the column clamp here was the first attempt and it was wrong: below 48rem
there is no wide shot to stay in proportion with, and 20vw bottoms out on the
9rem floor, so at 390px the phone rendered 144px wide — a thumbnail of a
screenshot, unreadable and obviously accidental. */
.shots {
--shot-phone-col: clamp(9rem, 20vw, 15rem);
--shot-phone-w: 15rem;
margin: clamp(var(--s-6), 4vw, var(--s-8)) 0 0;
}
/* Full width wherever it lands inside a grid row: the .arow it sits in is a
label/text 2-up from 48rem, and the .wcard is a media/copy 2-up from 64rem.
Ignored while either is still stacked, which is exactly right. */
.arow > .shots,
.wcard > .shots { grid-column: 1 / -1; }
/* Once the .arow is a grid its own row-gap (up to 64px) already separates this
from the paragraph, and the margin stacks on top of it — 112px at 1440,
enough that the figure stopped reading as evidence FOR that paragraph and
started looking like a separate block. Margin-collapsing does not apply
inside a grid, so it has to be removed rather than relied on. */
@media (min-width: 48rem) {
.arow > .shots { margin-top: 0; }
}
/* The .wcard's frame drifts by ±--parallax-max directly above this, and a
transform reserves no space — same hazard .wcard__body clears, same fix. */
.wcard > .shots { margin-top: calc(var(--parallax-max) + var(--s-6)); }
.shots__grid {
display: grid;
gap: clamp(var(--s-5), 3vw, var(--s-7));
justify-items: center; /* centres the capped phone while stacked */
}
@media (min-width: 48rem) {
.shots__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, var(--shot-phone-col));
align-items: center;
justify-items: stretch;
}
}
/* width/height on the element give the intrinsic ratio before the bytes
arrive, and height:auto keeps it, so the box is reserved at parse time and
these cannot shift anything. No aspect-ratio here on purpose: every shot has
its own, and pinning one would crop three of them. */
.shot {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius);
/* Both Stripe captures are white to the edge. On a white page they would
dissolve into it without a boundary of their own, so the hairline is
load-bearing, not decoration. */
border: 1px solid var(--line);
background: var(--surface);
box-shadow: var(--shadow-elevated);
}
.shot--phone { max-width: var(--shot-phone-w); }
.shots__cap {
margin-top: clamp(var(--s-5), 2.5vw, var(--s-6));
max-width: 60ch;
font-family: var(--font-mono);
font-size: 0.8125rem;
line-height: 1.6;
letter-spacing: 0.01em;
color: var(--slate-meta); /* 4.77:1 on --page */
}
/* ---------- 11. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.chip__cursor { animation: none; opacity: 1; }
/* Subpage headings sit at their final position from the first frame. The
global duration override above would already land them there — the
animation ends at translate 0 — but this stops the mask from being animated
at all rather than animated instantly. */
.js .title-line__in {
animation: none !important;
translate: none !important;
}
/* Contact chips: the checked state lands at once, in its final colours. The
duration override above is not enough on its own here — it leaves
transition-delay alone, and the label's colour swap is a 0s transition
held back by the fill's 460ms, so the text would still turn late. */
.lead--airy .chip-opt label,
.lead--airy .chip-opt label::before,
.lead--airy .chip-opt label::after { transition: none !important; }
/* No press pop — the colour and shadow changes still acknowledge the click. */
.btn:active { animation: none !important; }
/* Buttons: the lift stops lifting, the wipe stops travelling and the arrow
stops sliding. The fill and the white label are NOT suppressed — they are
simply already there when the pointer or the focus arrives. Reduced motion
asks for less movement, not for a state you cannot see. */
.btn,
.btn:hover,
.btn:focus-visible,
.btn:active {
transform: none !important;
translate: none !important;
}
.btn > span[aria-hidden],
.btn:hover > span[aria-hidden],
.btn:focus-visible > span[aria-hidden],
.btn:active > span[aria-hidden] { translate: none !important; }
.btn--outline::before { transition: none !important; }
/* Arrow links: same rule, same reason — the underline carries the state. */
.arrow-link:hover .arrow-link__arrow,
.arrow-link:focus-visible .arrow-link__arrow,
.arrow-link:active .arrow-link__arrow,
.slist__link a:hover .slist__arrow,
.slist__link a:focus-visible .slist__arrow,
.slist__link a:active .slist__arrow { translate: none !important; }
/* No nav roll: the duplicate is removed outright and the real label is pinned,
so hovering changes colour and draws the underline and nothing moves. Not
"instant roll" — no roll. */
/* FAQ: the disclosure still opens and closes, it just does so instantly. The
marker jumps from + to − and the answer is simply there. */
.faq__sign::after { transition: none !important; }
.js .faq__item[open] .faq__a { animation: none !important; }
.nav__roll__dup { display: none !important; }
.nav__roll__in { transition: none !important; }
.nav__links a:hover .nav__roll__in,
.nav__links a:focus-visible .nav__roll__in { translate: none !important; }
/* Belt and braces: even if JS never runs, reveal content is fully visible
and never transformed. Applies at first paint — no JS required. */
.js .reveal,
.js .reveal.is-revealed {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
/* the intro never renders under reduced motion, whatever JS does */
.intro,
html.intro-on .intro { display: none !important; }
/* Mobile dropdown: it still opens and closes, it just does not animate doing
it. The panel is at full height on the first frame, its contents are simply
there, and the scrim is already dimmed — no expand, no stagger, no fade.
--menu-exit goes to 0s as well, so the delay that normally holds the panel
visible through its collapse collapses too — it hides on the same frame it
closes, rather than sitting invisible over the page for a third of a
second. */
.menu { --menu-exit: 0s; }
.menu__panel,
.menu.is-open .menu__panel {
grid-template-rows: 1fr !important;
opacity: 1 !important;
transition: none !important;
}
.menu__nav li,
.menu__cta,
.menu.is-open .menu__nav li,
.menu.is-open .menu__cta {
opacity: 1 !important;
transform: none !important;
transition: none !important;
transition-delay: 0ms !important;
}
.menu__scrim,
.menu.is-open .menu__scrim {
opacity: 1 !important;
transition: none !important;
}
/* the hamburger bars snap between the two states rather than sweeping */
.nav__bars i { transition: none !important; }
/* Services page: the mark renders complete and completely still — no fly-in,
no scale, no pulse, no caret blink, and no waiting on the first-scroll gate
either. Every selector here drops .is-built so it holds in both states: the
mark is finished from first paint whether or not JS ever sets the class.
The global duration override above is not enough on its own — it would
still run the build, just instantly, and the caret would be left frozen at
whichever keyframe it landed on. */
.js .brand-panel .brand-panel__br,
.js .brand-panel .brand-panel__a {
opacity: 1 !important;
translate: none !important;
scale: none !important;
transition: none !important;
}
.js .brand-panel .brand-panel__glow {
animation: none !important;
opacity: 0.5 !important;
scale: none !important;
}
/* no flip either — the mark sits at 0deg and never turns */
.js .brand-panel .brand-panel__mark {
animation: none !important;
rotate: none !important;
}
/* the caret exists only to blink, so with the blink gone it goes too */
.brand-panel__caret { display: none !important; }
/* The dividers stay at their authored resting curve. JS bails out of
initRules() before it binds anything, so no path is ever rewritten and the
pull-point dot is never even created — these two are the half that holds
if that ever changed. */
.rule-curve { transition: none !important; }
.rule-curve__dot { display: none !important; }
/* Lead form: the field, chip and status transitions are already reduced to
nothing by the global override above. The one thing left is the sending
spinner — the global rule stops it turning, and a frozen three-quarter arc
reads as a broken icon rather than as progress, so it is dropped and the
"Sending…" text carries the state on its own. */
.lead__status--busy::before { display: none; }
/* Work showcase: hover scale, parallax and the reveal choreography are all
off, and the project images sit completely still. JS bails out before it
writes any of these variables, but the section must also be correct if the
script never runs at all — hence flat overrides rather than trusting it. */
.project__frame {
translate: none !important;
scale: none !important;
transform: none !important;
transition: none !important;
}
.js .project.reveal .project__frame,
.js .project.reveal .device__phone,
.js .project.reveal .tech li {
opacity: 1 !important;
translate: none !important;
transition: none !important;
}
/* The bubble reverts to exactly the static corner button touch devices get:
always visible, never trailing, never eased. JS skips binding it entirely,
so no transform is ever written — this is the CSS half. Same specificity as
the @media (hover: hover) rules it has to undo, so it wins on source order
alone; the transform is the one thing needing !important, because an inline
style would otherwise survive from before a mid-session preference change. */
.js .project__bubble {
inset-block-end: var(--bubble-inset);
inset-inline-end: var(--bubble-inset);
top: auto;
left: auto;
margin: 0;
opacity: 1;
scale: none;
transform: none !important;
transition: none !important;
will-change: auto;
}
}
/* =============================================================
10k. Reveal bands — see initRevealBand() in main.js
A full-bleed near-black band between two light sections, carrying one
paragraph of display type that lights up word by word as the band scrolls
through the viewport. Punctuation, not a section: no heading, no
landmark, one sentence.
The paragraph is authored at full white and the accent words at their
full colour, and that is what the HTML renders: no JS, reduced motion, and
the failsafe stripping .js all show the finished state. Only once the
script has split the paragraph do the .rb__w spans exist, and only they
carry the dim colour. The dim state is 16% white — 1.5:1, deliberately
below any text threshold — which is exactly why the split is JS-only: the
faint state is a moment in an animation, never the resting render.
A lit word inherits: white from the paragraph, or teal/amber from the
accent span it sits in. The snap is a 120ms linear colour transition and
nothing else animates — no opacity, no transform, no layout.
NO PIN. The band is a normal section at the height of its own text and
padding, and scrolls with the page. Progress (initRevealBand) runs 0 when
the band's top reaches 85% of the viewport height to 1 when its bottom
reaches 25%, so the sentence completes while the band is still on screen
and the page never stops moving. The pinned version this replaced is in
_archive/2026-09-13-reveal-band-pin.txt. */
.reveal-band {
background: var(--band-bg);
color: #FFFFFF; /* 19.3:1 on --band-bg */
}
.reveal-band__inner {
padding-block: clamp(var(--s-9), 8vw, var(--s-11));
}
.reveal-band__text {
max-width: 20ch;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.75rem, 4.6vw, 3.875rem); /* 28px – 62px */
line-height: 1.15;
letter-spacing: -0.03em;
text-wrap: pretty;
}
.reveal-band__accent { color: var(--teal); } /* 5.15:1 on --band-bg */
.reveal-band__accent--amber { color: var(--amber); } /* 9.06:1 on --band-bg */
.js .rb__w {
color: var(--band-dim);
transition: color 120ms linear;
}
.js .rb__w.is-lit { color: inherit; }
@media (prefers-reduced-motion: reduce) {
/* JS never splits under reduced motion; this covers a preference that
changes after the spans already exist */
.js .rb__w { color: inherit; transition: none; }
}
/* =============================================================
10k2. Legal pages — /privacy/, /terms/, /cookies/
Long prose at a readable measure on the page ground. The h1 is the
shared .page-intro opener; the "Last updated" line takes its sub slot in
mono. Section headings step down from the display scale so eight of them
read as a document, not eight section titles.
============================================================= */
.legal__updated {
font-family: var(--font-mono);
font-size: 0.875rem;
letter-spacing: 0.02em;
color: var(--text-2);
}
.legal__body {
max-width: 70ch;
margin-inline: auto;
}
.legal__body h2 {
margin-top: clamp(var(--s-7), 5vw, var(--s-9));
font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
line-height: 1.15;
letter-spacing: -0.02em;
scroll-margin-top: calc(var(--nav-h) + var(--s-6));
}
.legal__body h2:first-child { margin-top: 0; }
.legal__body p {
margin-top: var(--s-4);
font-size: clamp(1rem, 0.95rem + 0.3vw, 1.0625rem);
line-height: 1.75;
color: var(--ink);
}
.legal__body a {
color: var(--teal);
text-decoration: underline;
text-underline-offset: 0.2em;
overflow-wrap: anywhere; /* a 34-char email address must not widen a 155px column */
}
/* Lists and definition lists share the paragraph measure and rhythm. The
dl (entity details, retention periods) is a two-column grid from 40em:
term in the mono caption style, value in body ink. Below that it stacks. */
.legal__body ul,
.legal__body dl {
margin-top: var(--s-4);
font-size: clamp(1rem, 0.95rem + 0.3vw, 1.0625rem);
line-height: 1.75;
color: var(--ink);
}
.legal__body ul { padding-left: 1.25em; }
.legal__body li + li { margin-top: 0.5rem; }
.legal__body li::marker { color: var(--teal); }
.legal__body dl {
display: grid;
gap: 0.75rem;
line-height: 1.6;
}
.legal__body dl > div {
display: grid;
gap: 0.25rem;
}
@media (min-width: 40em) {
.legal__body dl > div {
grid-template-columns: minmax(12rem, 15rem) 1fr;
column-gap: var(--s-5);
align-items: baseline;
}
}
.legal__body dt {
font-family: var(--font-mono);
font-size: 0.875rem;
letter-spacing: 0.02em;
color: var(--text-2);
}
.legal__body code {
font-family: var(--font-mono);
font-size: 0.9em;
}
/* Governing-law line: a footnote after the last section, not a section.
Scoped under .legal__body so it outranks the paragraph rule above. */
.legal__body .legal__closing {
margin-top: clamp(var(--s-7), 5vw, var(--s-9));
padding-top: var(--s-5);
border-top: 1px solid var(--line);
font-size: 0.9375rem;
color: var(--text-2);
}
/* =============================================================
10l. Card edges
The gradient borders are background layers, and forced-colors mode (Windows
High Contrast) drops background images. Left alone, the cards would keep a
transparent 1px border and lose their edge entirely; CanvasText gives them
back the system's own foreground as a plain border.
============================================================= */
@media (forced-colors: active) {
.scard,
.js .slist__item,
.compliance__card { border-color: CanvasText; }
}