/* =========================================================================
Access2Insight — base, layout, components
========================================================================= */
/* ---------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* Clip, not hidden, and on — `overflow-x: hidden` on turns the
body into a scroll container, which breaks sticky, scroll anchoring and
programmatic scrolling. `clip` creates no scroll container at all. */
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
overflow-x: clip;
}
@supports not (overflow: clip) { html { overflow-x: hidden; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
background: var(--ink);
color: var(--paper);
font-family: var(--font-sans);
font-size: var(--t-body);
line-height: var(--lh-body);
letter-spacing: var(--tr-body);
font-synthesis-weight: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
:focus-visible {
outline: 2px solid var(--signal);
outline-offset: 3px;
border-radius: var(--r-sm);
}
::selection { background: var(--coral); color: var(--ink); }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0;
margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
position: fixed; top: var(--s-4); left: var(--s-4); z-index: 200;
padding: var(--s-3) var(--s-5); background: var(--signal); color: var(--ink);
font: 500 var(--t-small)/1 var(--font-mono); border-radius: var(--r-md);
transform: translateY(-160%);
}
.skip-link:focus { transform: none; }
/* ----------------------------------------------------------- atmosphere -- */
/* Soft radial wells that read as light behind the page, plus a fixed grain.
Both are inert to pointer events and sit under all content. */
.atmos {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
background:
/* the concept's mesh, read as light coming from behind the page:
gold high-left, coral through the middle, violet settling low-right */
radial-gradient(54vw 46vw at 16% 20%, rgba(255,181, 0,.12), transparent 66%),
radial-gradient(50vw 42vw at 98% 56%, rgba(150, 44,152,.13), transparent 60%),
radial-gradient(84vw 62vw at 46% 104%, rgba( 34, 21, 62,.80), transparent 72%);
}
/* The warm corner lives on its own layer so it can breathe independently of
the drift below it — two periods that never line up read as weather rather
than as a loop. Two stops: a wide coral wash and a tighter signal-gold core
right in the corner, which is what makes it read as a light source. */
.atmos::after {
content: ''; position: absolute; inset: 0;
background:
/* roughly half the screen: wide enough to pass behind the headline
rather than sitting in the corner beside it */
radial-gradient(150vw 120vw at 82% -8%, rgba(235,110, 96,.26), transparent 62%),
radial-gradient( 72vw 58vw at 93% -14%, rgba(254,196, 81,.19), transparent 58%);
}
/* A slow breathe, not a loop — alternate avoids a seam, and the slight scale
keeps the edges covered while it translates. */
@media (prefers-reduced-motion: no-preference) {
.atmos { will-change: transform; animation: atmos-drift 21s var(--ease) infinite alternate; }
.atmos::after { will-change: transform, opacity; animation: glow-breathe 13.5s var(--ease) infinite alternate; }
}
@keyframes atmos-drift {
from { transform: translate3d(0, 0, 0) scale(1); }
to { transform: translate3d(-2.4%, 1.6%, 0) scale(1.06); }
}
@keyframes glow-breathe {
/* the floor stays above the old flat value, so it is brighter than before
at every point in the cycle, not only at the peak */
from { opacity: .88; transform: translate3d(0, 0, 0) scale(1); }
to { opacity: 1; transform: translate3d(-2%, 2.4%, 0) scale(1.13); }
}
.grain {
position: fixed; inset: -50%; z-index: var(--z-grain); pointer-events: none;
opacity: .035; mix-blend-mode: overlay;
background-image: var(--grain-src);
background-size: 180px 180px;
}
@media (prefers-reduced-motion: no-preference) {
.grain { animation: grain-shift 6s steps(6) infinite; }
}
@keyframes grain-shift {
0%,100% { transform: translate(0,0); } 20% { transform: translate(-2%, 3%); }
40% { transform: translate(3%,-2%); } 60% { transform: translate(-3%,-3%); }
80% { transform: translate(2%, 2%); }
}
/* --------------------------------------------------------------- layout -- */
.wrap {
width: 100%; max-width: var(--max);
margin-inline: auto; padding-inline: var(--gutter);
position: relative; z-index: 2;
}
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--col-gap); }
section { position: relative; }
.section { padding-block: var(--section-y); }
.section-lg { padding-block: var(--section-y-lg); }
.hairline { border-top: 1px solid var(--rule-soft); }
/* ------------------------------------------------------------ typography -- */
.display {
font-size: var(--t-display); line-height: var(--lh-display);
letter-spacing: var(--tr-display); font-weight: 500;
text-wrap: balance;
}
.statement {
font-size: var(--t-statement); line-height: var(--lh-tight);
letter-spacing: var(--tr-display); font-weight: 500;
text-wrap: balance;
}
.section-title {
font-size: var(--t-section); line-height: var(--lh-tight);
letter-spacing: var(--tr-tight); font-weight: 500;
text-wrap: balance;
}
h3, .h3 {
font-size: var(--t-h3); line-height: var(--lh-snug);
letter-spacing: var(--tr-tight); font-weight: 500;
}
/* The editorial voice. Only ever on the turn of a sentence — never a whole
heading. Optically larger than the grotesk it sits beside. */
.em {
font-family: var(--font-serif); font-style: italic; font-weight: 400;
letter-spacing: -.012em; font-size: 1.1em; line-height: .9;
}
.lead {
font-size: var(--t-lead); line-height: 1.45; letter-spacing: var(--tr-body);
color: var(--paper); font-weight: 400; text-wrap: pretty;
}
.body-l { font-size: var(--t-body-l); color: var(--paper-dim); text-wrap: pretty; }
.dim { color: var(--paper-dim); }
.faint { color: var(--paper-faint); }
.measure { max-width: var(--max-text); }
.measure-sm { max-width: 46ch; }
/* Mono labels carry the "instrument" register: section indices, data,
platform names, anything that should read as recorded rather than said. */
.label {
font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500;
letter-spacing: var(--tr-label); text-transform: uppercase;
color: var(--paper-faint);
}
.label--signal { color: var(--signal); }
.label--accent { color: var(--flame); }
.idx {
font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500;
letter-spacing: var(--tr-label); color: var(--flame);
}
.eyebrow {
display: flex; align-items: center; gap: var(--s-3);
margin-bottom: var(--s-5);
}
.eyebrow::before {
content: ''; width: 1.75rem; height: 1px; flex: none;
background: var(--coral); opacity: .8;
}
/* Placeholders. Impossible to ship by accident — see BRAND.md §11. */
.tbd {
font-family: var(--font-mono); font-size: .8em; letter-spacing: .06em;
color: var(--flag); border: 1px dashed rgba(219,82,124,.45);
border-radius: var(--r-sm); padding: .1em .5em;
background: rgba(219,82,124,.07); white-space: nowrap;
}
/* -------------------------------------------------------------- buttons -- */
.btn {
--btn-bg: transparent; --btn-fg: var(--paper); --btn-bd: var(--rule-strong);
display: inline-flex; align-items: center; gap: var(--s-3);
padding: .95rem 1.55rem; border-radius: var(--r-pill);
background: var(--btn-bg); color: var(--btn-fg);
border: 1px solid var(--btn-bd);
font-size: var(--t-small); font-weight: 500; letter-spacing: -.005em;
line-height: 1; white-space: nowrap;
transition: background var(--d-mid) var(--ease), color var(--d-mid) var(--ease),
border-color var(--d-mid) var(--ease), transform var(--d-fast) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { --btn-bg: var(--signal); --btn-fg: var(--ink); --btn-bd: var(--signal); }
.btn__ic { width: 1.05em; height: 1.05em; margin-left: .15em; flex: none;
fill: none; stroke: currentColor; stroke-width: 1.7; }
.btn__ic-dot { fill: currentColor; stroke: none; }
.btn--primary:hover { --btn-bg: var(--signal-hot); --btn-bd: var(--signal-hot); }
.btn--ghost:hover { --btn-bd: var(--paper); background: rgba(255,255,255,.04); }
.btn--lg { padding: 1.15rem 2rem; font-size: var(--t-body); }
/* Text link with a rule that draws in from the left on hover. */
.link {
display: inline-flex; align-items: center; gap: .55rem;
font-size: var(--t-small); font-weight: 500;
padding-bottom: 2px; background-image: linear-gradient(var(--flame), var(--flame));
background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
transition: background-size var(--d-mid) var(--ease-out), color var(--d-mid) var(--ease);
}
.link:hover { background-size: 100% 1px; color: var(--flame); }
.link__arrow { transition: transform var(--d-mid) var(--ease-out); }
.link:hover .link__arrow { transform: translateX(4px); }
/* ------------------------------------------------------------------ nav -- */
.nav {
position: fixed; inset: 0 0 auto; z-index: var(--z-nav);
/* transform belongs in here: without it, is-hidden snapped the bar out of
frame instead of sliding it, which reads as the header clipping away. */
transition: background var(--d-slow) var(--ease), border-color var(--d-slow) var(--ease),
backdrop-filter var(--d-slow) var(--ease),
transform var(--d-mid) var(--ease);
will-change: transform;
border-bottom: 1px solid transparent;
}
.nav.is-stuck {
background: rgba(10,6,22,.74);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border-bottom-color: var(--rule-soft);
}
.nav.is-hidden { transform: translateY(-100%); }
.nav__inner {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s-6); height: 76px;
}
/* The lockup collapses to the mark once the page is scrolled. The container
keeps the full lockup's width so the nav never reflows underneath it — the
two marks cross-fade in place instead. */
.nav__logo { position: relative; display: flex; align-items: center; flex: none; width: 168px; }
.nav__logo img { display: block; transition: opacity var(--d-mid) var(--ease); }
.nav__logo-full { width: 168px; height: auto; }
.nav__logo-mark {
position: absolute; left: 0; top: 50%;
/* 49px, not 42: at a 168px lockup the mark glyph draws 49.1 x 42.3, but a
42px box drew this file's glyph at only 36.3px tall, so the swap visibly
shrank it. 49px lands the glyph on 49.0 x 42.3 — no size change. */
width: 49px; height: 49px; margin-top: -24.5px; opacity: 0;
}
.nav.is-stuck .nav__logo-full { opacity: 0; }
.nav.is-stuck .nav__logo-mark { opacity: 1; }
.nav__links { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.1rem); }
/* Redundant while the hero's own CTA is on screen, so it waits — but only
once the script has confirmed it can manage that, by setting .nav--auto.
Without it the button is simply visible, which is the state a failed or
blocked script should leave behind. */
.nav--auto .nav__cta {
opacity: 0; transform: translateY(-6px) scale(.96); pointer-events: none;
transition: opacity var(--d-mid) var(--ease), transform var(--d-mid) var(--ease);
}
.nav--auto.is-cta .nav__cta { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .nav--auto .nav__cta { transform: none; } }
.nav__link {
position: relative; font-size: var(--t-small); color: var(--paper-dim);
padding-block: .35rem; transition: color var(--d-mid) var(--ease);
}
.nav__link::after {
content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
background: var(--flame); transform: scaleX(0); transform-origin: 0 50%;
transition: transform var(--d-mid) var(--ease-out);
}
.nav__link:hover, .nav__link.is-current { color: var(--paper); }
.nav__link:hover::after, .nav__link.is-current::after { transform: scaleX(1); }
.nav__end { display: flex; align-items: center; gap: var(--s-4); }
.nav__toggle {
display: none; width: 44px; height: 44px; margin-right: -10px;
align-items: center; justify-content: center;
}
.nav__toggle span {
display: block; width: 22px; height: 1.5px; background: var(--paper);
position: relative; transition: background var(--d-fast) var(--ease);
}
.nav__toggle span::before, .nav__toggle span::after {
content: ''; position: absolute; left: 0; width: 22px; height: 1.5px; background: var(--paper);
transition: transform var(--d-mid) var(--ease-out), top var(--d-mid) var(--ease);
}
.nav__toggle span::before { top: -7px; }
.nav__toggle span::after { top: 7px; }
.nav.is-open .nav__toggle span { background: transparent; }
.nav.is-open .nav__toggle span::before { top: 0; transform: rotate(45deg); }
.nav.is-open .nav__toggle span::after { top: 0; transform: rotate(-45deg); }
.menu {
position: fixed; inset: 0; z-index: var(--z-menu);
background: var(--ink); padding: 96px var(--gutter) var(--s-7);
display: flex; flex-direction: column; justify-content: space-between;
opacity: 0; visibility: hidden; transform: translateY(-8px);
transition: opacity var(--d-mid) var(--ease), transform var(--d-mid) var(--ease-out),
visibility var(--d-mid);
}
.menu.is-open { opacity: 1; visibility: visible; transform: none; }
.menu__list { display: flex; flex-direction: column; gap: var(--s-2); }
.menu__list a {
display: flex; align-items: baseline; gap: var(--s-4);
font-size: clamp(2rem, 9vw, 3rem); line-height: 1.14;
letter-spacing: var(--tr-tight); font-weight: 500;
padding-block: .3rem; border-bottom: 1px solid var(--rule-soft);
}
.menu__list a .idx { font-size: var(--t-label); }
.menu__foot { display: grid; gap: var(--s-4); }
/* ----------------------------------------------------------------- hero -- */
.hero {
position: relative; min-height: min(100svh, 980px);
display: flex; align-items: flex-end;
padding-top: clamp(9rem, 20vh, 14rem); padding-bottom: clamp(3rem, 7vh, 6rem);
overflow: hidden;
}
/* The concept's mesh gradient, used as an actual light source rather than a
panel: composited on black and screened, so only the colour survives. */
.hero::before {
content: ''; position: absolute; z-index: 0; pointer-events: none;
top: -34%; right: -19%; width: min(58vw, 880px); aspect-ratio: 1 / 1.03;
background: url(../img/mesh.jpg) center / contain no-repeat;
mix-blend-mode: screen; opacity: .26; filter: blur(46px) saturate(1.05);
/* fade it out before it reaches the copy — light, not a panel */
-webkit-mask-image: radial-gradient(closest-side, #000 44%, transparent 88%);
mask-image: radial-gradient(closest-side, #000 44%, transparent 88%);
}
.hero__canvas {
position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
opacity: .85;
-webkit-mask-image: radial-gradient(88% 96% at 74% 34%, #000 0%, rgba(0,0,0,.9) 34%, transparent 78%);
mask-image: radial-gradient(88% 96% at 74% 34%, #000 0%, rgba(0,0,0,.9) 34%, transparent 78%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; }
.hero__title { max-width: 17ch; }
.hero__title .em { display: inline-block; color: var(--paper); }
.hero__foot {
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-7);
align-items: end; margin-top: clamp(2.5rem, 6vw, 4.5rem);
}
.hero__sub { max-width: 48ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero__meta {
display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
margin-top: var(--s-6); padding-top: var(--s-5);
border-top: 1px solid var(--rule-soft);
}
/* Scroll cue — a 1px rule that fills top-to-bottom on a loop. */
.cue { display: flex; align-items: center; gap: var(--s-3); }
.cue__rail { width: 1px; height: 34px; background: var(--rule); position: relative; overflow: hidden; }
.cue__rail::after {
content: ''; position: absolute; inset: 0; background: var(--flame);
transform-origin: 50% 0;
}
@media (prefers-reduced-motion: no-preference) {
.cue__rail::after { animation: cue 2.6s var(--ease-in-out) infinite; }
}
@keyframes cue {
0% { transform: scaleY(0); transform-origin: 50% 0; }
45% { transform: scaleY(1); transform-origin: 50% 0; }
55% { transform: scaleY(1); transform-origin: 50% 100%; }
100% { transform: scaleY(0); transform-origin: 50% 100%; }
}
/* ------------------------------------------------------------ logo rail -- */
.rail { padding-block: var(--s-7); overflow: hidden; }
.rail__head { display: flex; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-6); }
.marquee { position: relative; display: flex; overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; align-items: center; gap: clamp(2.5rem, 6vw, 5.5rem); padding-right: clamp(2.5rem, 6vw, 5.5rem); flex: none; }
@media (prefers-reduced-motion: no-preference) {
.marquee__track { animation: marquee 46s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
}
@keyframes marquee { to { transform: translateX(-100%); } }
/* Client logos ship as CSS masks: one monochrome system, colour under our
control, hover states possible. Height is tuned per logo optically. */
.clogo {
flex: none; height: var(--h); width: auto;
/* brightness(0) flattens every source colour to black, invert(1) lifts it to
white — one monochrome system from mixed SVG and PNG sources. This used to
be a CSS mask, but mask-image is CORS-restricted and every local file is
its own opaque origin, so the row came up empty when index.html was opened
straight off disk. An ![]()
has no such restriction. */
filter: brightness(0) invert(1);
opacity: .8;
transition: opacity var(--d-mid) var(--ease);
}
.marquee:hover .clogo { opacity: .42; }
.marquee .clogo:hover { opacity: 1; }
/* ------------------------------------------------------- section header -- */
.shead { display: grid; grid-column: 1 / -1; gap: var(--s-5); margin-bottom: clamp(3rem, 7vw, 6rem); }
.shead__rule { height: 1px; background: var(--rule); margin-bottom: var(--s-5); }
/* ------------------------------------------------------------ the gap ---- */
.gap-grid { align-items: start; }
.gap-grid__lede { grid-column: 1 / span 7; }
.gap-grid__aside { grid-column: 9 / -1; align-self: end; }
/* Three-tier diagram: brand → distributor → retailer → customer, with the
receipt travelling back and stopping one tier short. */
.tiers { margin-top: clamp(3rem, 7vw, 5.5rem); }
.tiers__row {
display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4);
position: relative;
}
.tier {
position: relative; padding: var(--s-5) var(--s-4) var(--s-6);
border-top: 1px solid var(--rule); min-height: 148px;
}
.tier::before {
content: ''; position: absolute; top: -3px; left: 0; width: 5px; height: 5px;
border-radius: 50%; background: var(--paper-faint);
transition: background var(--d-slow) var(--ease), box-shadow var(--d-slow) var(--ease);
}
.tier__name { font-size: var(--t-body-l); font-weight: 500; color: var(--paper); margin-top: var(--s-3); }
.tier__note { font-size: var(--t-small); color: var(--paper-dim); margin-top: var(--s-2); }
.tier--you { border-top-color: var(--coral); }
.tier--you::before { background: var(--flame); box-shadow: 0 0 0 4px rgba(235,110,96,.18); }
.tier--you .tier__name { color: var(--flame); }
.tier--end::before { background: var(--signal); box-shadow: 0 0 0 4px rgba(254,196,81,.16); }
.tier--end { border-top-color: rgba(254,196,81,.55); }
/* The receipt: it travels from the customer back toward the brand and stops
at the retailer. The dashed remainder is the part that never arrives. */
.receipt { margin-top: var(--s-6); position: relative; }
.receipt__track { height: 1px; background: var(--rule); position: relative; }
.receipt__solid {
position: absolute; top: 0; left: 62.5%; right: 0; height: 1px;
background: linear-gradient(90deg, var(--signal), rgba(254,196,81,.35));
transform-origin: 100% 50%; transform: scaleX(0);
transition: transform 1.4s var(--ease-out) .25s;
}
.is-in .receipt__solid { transform: scaleX(1); }
.receipt__dash {
position: absolute; top: 0; left: 0; width: 62.5%; height: 1px;
background: repeating-linear-gradient(90deg, var(--rule-strong) 0 4px, transparent 4px 10px);
opacity: 0; transition: opacity var(--d-slow) var(--ease) 1.5s;
}
.is-in .receipt__dash { opacity: 1; }
.receipt__labels { display: grid; grid-template-columns: 5fr 3fr; gap: var(--s-4); margin-top: var(--s-4); }
.receipt__stop {
position: absolute; top: -4px; left: 62.5%; width: 9px; height: 9px; margin-left: -4.5px;
border-radius: 50%; background: var(--ink); border: 1px solid var(--signal);
opacity: 0; transform: scale(.4);
transition: opacity var(--d-slow) var(--ease) 1.35s, transform var(--d-slow) var(--ease-out) 1.35s;
}
.is-in .receipt__stop { opacity: 1; transform: scale(1); }
/* ------------------------------------------------------------- signals --- */
.signals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
background: var(--rule-soft); border: 1px solid var(--rule-soft); border-radius: var(--r-lg); overflow: hidden; }
.signal-cell {
background: var(--ink-raised); padding: var(--s-6) var(--s-6) var(--s-7);
transition: background var(--d-mid) var(--ease);
}
.signal-cell:hover { background: var(--ink-lift); }
.signal-cell__k { display: block; margin-bottom: var(--s-4); }
.signal-cell__t { font-size: var(--t-body-l); font-weight: 500; }
.signal-cell__d { font-size: var(--t-small); color: var(--paper-dim); margin-top: var(--s-2); }
/* -------------------------------------------------------------- method --- */
.method { position: relative; }
.method__list { display: grid; gap: 0; }
/* Each service is a : the disclosure works with no JS, carries its
own keyboard and AT semantics, and needs no aria bookkeeping from us. The
grid lives on the element itself so the summary can span every column while
the body still lands in the third one. */
.step {
--step-cols: 6.5rem minmax(0, 1fr) minmax(0, 1.05fr);
display: grid; grid-template-columns: var(--step-cols);
gap: var(--s-6); align-items: start;
padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
border-top: 1px solid var(--rule-soft); position: relative;
}
.step__row {
grid-column: 1 / -1;
display: grid; grid-template-columns: var(--step-cols); gap: var(--s-6);
align-items: start; cursor: pointer;
list-style: none; /* kills the default triangle */
}
.step__row::-webkit-details-marker { display: none; }
.step__row:focus-visible { outline: 2px solid var(--flame); outline-offset: 6px; border-radius: 2px; }
.step__col { grid-column: 2 / -1; }
/* + that becomes - : the upright bar rotates flat */
.step__mark { position: relative; justify-self: end; width: 17px; height: 17px; margin-top: .55rem; }
.step__mark::before, .step__mark::after {
content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 1px;
background: var(--paper-dim);
transition: transform var(--d-mid) var(--ease), background var(--d-mid) var(--ease);
}
.step__mark::after { transform: rotate(90deg); }
.step[open] .step__mark::after { transform: rotate(0deg); }
.step__row:hover .step__mark::before,
.step__row:hover .step__mark::after { background: var(--paper); }
.step__row:hover .step__t { color: var(--paper); }
/* Height animation only where the content box is addressable; elsewhere the
disclosure simply toggles, which is correct, just not animated. */
@supports selector(::details-content) {
.step::details-content {
grid-column: 2 / -1;
block-size: 0; overflow: hidden;
transition: block-size var(--d-slow) var(--ease), content-visibility var(--d-slow) allow-discrete;
}
.step[open]::details-content { block-size: auto; }
.step::details-content > .step__col { grid-column: auto; }
}
.step::after {
content: ''; position: absolute; top: -1px; left: 0; height: 1px; width: 100%;
background: linear-gradient(90deg, var(--coral), transparent 62%);
transform: scaleX(0); transform-origin: 0 50%;
transition: transform 1.1s var(--ease-out);
}
.step.is-in::after { transform: scaleX(1); }
.step__idx { padding-top: .3rem; }
.step__t { font-size: var(--t-section); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); font-weight: 500; }
/* the open panel is now ~65% of the grid wide, so the prose needs its own
cap; the capability chips are happy to use the whole width */
.step__b { color: var(--paper-dim); font-size: var(--t-body-l); max-width: 56ch; }
.step__tags {
display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3);
list-style: none; padding: 0; margin-inline: 0;
}
.step__kicker {
display: block; margin-top: var(--s-2); color: var(--flame);
font-size: var(--t-small); letter-spacing: var(--tr-wide);
}
.step__caps { margin-top: var(--s-4); }
.tag {
font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .1em;
text-transform: uppercase; color: var(--paper-dim);
border: 1px solid var(--rule); border-radius: var(--r-pill); padding: .3rem .65rem;
}
.method__loop {
display: flex; align-items: center; gap: var(--s-4);
padding-top: var(--s-6); border-top: 1px solid var(--rule-soft);
}
.method__loop svg { flex: none; color: var(--flame); }
/* ------------------------------------------------------------ practice --- */
.disc { border-top: 1px solid var(--rule-soft); }
.disc:last-child { border-bottom: 1px solid var(--rule-soft); }
.disc__btn {
width: 100%; display: grid;
grid-template-columns: 6.5rem minmax(0,1fr) auto; gap: var(--s-6);
align-items: center; text-align: left;
padding-block: clamp(1.5rem, 3vw, 2.25rem);
transition: color var(--d-mid) var(--ease);
}
.disc__t { font-size: var(--t-h3); font-weight: 500; letter-spacing: var(--tr-tight); }
.disc__btn:hover .disc__t { color: var(--flame); }
.disc__sign { position: relative; width: 14px; height: 14px; flex: none; }
.disc__sign::before, .disc__sign::after {
content: ''; position: absolute; inset: 50% 0 auto; height: 1px; background: var(--paper-dim);
transition: transform var(--d-mid) var(--ease-out), background var(--d-mid) var(--ease);
}
.disc__sign::after { transform: rotate(90deg); }
.disc[open] .disc__sign::after { transform: rotate(0deg); }
.disc[open] .disc__sign::before, .disc[open] .disc__sign::after { background: var(--flame); }
.disc__body {
display: grid; grid-template-columns: 6.5rem minmax(0,1fr) minmax(0,1fr);
gap: var(--s-6); padding-bottom: clamp(2rem, 4vw, 3rem);
}
.disc__body > :first-child { grid-column: 2; }
.disc ul { display: grid; gap: var(--s-3); }
.disc li {
display: grid; grid-template-columns: auto 1fr; gap: var(--s-3);
font-size: var(--t-body); color: var(--paper-dim);
}
.disc li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--coral); margin-top: .62em; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
/* ---------------------------------------------------------------- work --- */
.work-rail {
display: flex; gap: var(--s-5); overflow-x: auto;
scroll-snap-type: x proximity; /* mandatory snapped past the gutter on load */
scroll-padding-inline: var(--gutter);
padding-inline: var(--gutter); padding-bottom: var(--s-5);
scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent;
}
.work-rail::-webkit-scrollbar { height: 3px; }
.work-rail::-webkit-scrollbar-thumb { background: var(--rule-strong); }
.case {
flex: none; width: min(86vw, 460px); scroll-snap-align: start;
display: grid; grid-template-rows: auto 1fr;
}
.case__shot {
position: relative; aspect-ratio: 4 / 5; overflow: hidden;
border-radius: var(--r-lg); border: 1px solid var(--rule-soft);
background: var(--ink-raised);
}
.case__shot img {
width: 100%; height: 100%; object-fit: cover; object-position: 50% 0;
filter: saturate(.86) contrast(1.03);
transition: transform 1.1s var(--ease-out), filter var(--d-slow) var(--ease);
}
.case__shot::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(10,6,22,.06) 0%, rgba(10,6,22,.52) 66%, rgba(10,6,22,.90) 100%);
transition: opacity var(--d-slow) var(--ease);
}
.case:hover .case__shot img { transform: scale(1.035); filter: saturate(1) contrast(1); }
.case:hover .case__shot::after { opacity: .78; }
.case__tag {
position: absolute; z-index: 2; left: var(--s-5); top: var(--s-5);
background: rgba(10,6,22,.66); backdrop-filter: blur(8px);
border: 1px solid var(--rule); border-radius: var(--r-pill); padding: .35rem .7rem;
}
.case__body { padding-top: var(--s-5); display: grid; gap: var(--s-3); align-content: start; }
.case__client { font-size: var(--t-h3); font-weight: 500; letter-spacing: var(--tr-tight); }
.case__what { font-size: var(--t-small); color: var(--paper-dim); }
.case__meta { display: grid; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--rule-soft); }
.case__row { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--s-3); font-size: var(--t-micro); }
.case__row dt { color: var(--paper-faint); font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase; font-size: var(--t-label); padding-top: .15em; }
.case__row dd { color: var(--paper-dim); margin: 0; }
.rail-hint { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-5); flex-wrap: wrap; }
.rail-hint__more { margin-left: auto; }
@media (max-width: 600px) {
.rail-hint__more { margin-left: 0; }
.rail-hint > span[aria-hidden] { display: none; }
}
/* 15% more room around the rail than a standard large section */
#work { padding-block: calc(var(--section-y-lg) * 1.15); }
/* ---------------------------------------------------- selected-work rail -- */
/* A horizontal rail of email panels, 4:9 each, measured off the mockup:
286px wide, 32px gaps, 67px down to the label. The motion follows the
Zeus Jones tiles — and their signature is the asymmetry. The image creeps
in over 1.1s but releases in 0.35s, so pointing at a panel feels like it
leans toward you and lets go cleanly. */
.prail-wrap { margin-top: var(--s-7); }
.prail {
/* The rail is full-bleed but has to start where .wrap's content starts, or
it stops lining up with the headline once the viewport passes --max. */
--rail-inset: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
--prail-gap: clamp(1rem, 2.2vw, 2rem);
--prail-speed: 88s;
display: flex; overflow: hidden;
/* Full-bleed, like the logo rail. An inset here would be covered by the
previous track for most of the loop and then empty the instant it wraps,
which pops. A moving strip has no fixed left edge to align to anyway. */
padding: 0 0 var(--s-4);
}
.prail:focus-visible { outline: 2px solid var(--flame); outline-offset: -2px; }
.prail__track {
display: flex; flex: none; gap: var(--prail-gap);
padding-right: var(--prail-gap);
list-style: none; margin: 0;
}
@media (prefers-reduced-motion: no-preference) {
.prail__track { animation: prail var(--prail-speed) linear infinite; }
/* stop it so a panel can actually be looked at */
.prail:hover .prail__track,
.prail:focus-within .prail__track { animation-play-state: paused; }
}
@keyframes prail { to { transform: translateX(-100%); } }
/* No animation means no wrap-around to fill, so the duplicate tracks are just
noise — drop them and hand back an ordinary scroller. */
@media (prefers-reduced-motion: reduce) {
.prail {
overflow-x: auto; overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scroll-padding-inline: var(--rail-inset);
/* static, so there is no wrap to pop — align it with the headline */
padding-inline: var(--rail-inset);
scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent;
}
.prail::-webkit-scrollbar { height: 3px; }
.prail::-webkit-scrollbar-thumb { background: var(--rule-strong); }
.prail__track[aria-hidden] { display: none; }
.pnl { scroll-snap-align: start; }
}
.pnl { flex: none; width: clamp(196px, 20vw, 286px); }
.pnl__media {
position: relative; overflow: hidden;
aspect-ratio: 4 / 9; border-radius: var(--r-sm);
background: var(--ink-2);
/* the email keeps going past the panel — let it fall away rather than cut */
-webkit-mask-image: linear-gradient(#000 72%, transparent 99%);
mask-image: linear-gradient(#000 72%, transparent 99%);
}
.pnl__m {
display: block; width: 100%; height: 100%;
object-fit: cover; object-position: top center;
transform: scale(1); transition: transform .35s var(--ease);
will-change: transform; backface-visibility: hidden;
}
.pnl:hover .pnl__m,
.pnl:focus-within .pnl__m { transform: scale(1.03); transition-duration: 1.1s; }
.pnl__meta {
display: grid; gap: var(--s-3); justify-items: start;
margin-top: clamp(1.75rem, 4.6vw, 4.2rem); /* 67px at 1440, per the mockup */
opacity: .6; transition: opacity .5s var(--ease);
}
.pnl:hover .pnl__meta,
.pnl:focus-within .pnl__meta { opacity: 1; }
/* the treatments are swapped: the brand is now bare type, and the three
disciplines carry the pill that used to sit around the brand */
.pnl__client {
font-size: calc(var(--t-body) * 1.1); letter-spacing: -.01em; color: var(--paper);
}
.pnl__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.prail__foot {
display: flex; align-items: center; gap: var(--s-4);
margin-top: var(--s-5); flex-wrap: wrap;
}
.prail__foot .link { margin-left: auto; }
@media (max-width: 600px) {
.prail__foot .link { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
.pnl__m, .pnl__disc::after { transition: none; }
}
/* ------------------------------------------------------------- outcomes -- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule-soft);
border-block: 1px solid var(--rule-soft); }
.stat { background: var(--ink); padding: clamp(2rem, 4vw, 3.25rem) var(--s-5); }
.stat__n {
font-size: clamp(2.4rem, 4.4vw, 3.8rem); line-height: 1; letter-spacing: -.04em;
font-weight: 500; color: var(--paper);
}
.stat__l { font-size: var(--t-small); color: var(--paper-dim); margin-top: var(--s-4); max-width: 26ch; }
/* ------------------------------------------------------------- platforms -- */
.stack-list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.stack-list li {
font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: .02em;
color: var(--paper-dim); border: 1px solid var(--rule); border-radius: var(--r-md);
padding: .5rem .85rem; transition: border-color var(--d-mid) var(--ease), color var(--d-mid) var(--ease);
}
.stack-list li:hover { border-color: var(--coral); color: var(--paper); }
/* ------------------------------------------------------------------ pov -- */
.pov { display: grid; }
.pov__item {
padding-block: clamp(2rem, 4vw, 3.25rem); border-top: 1px solid var(--rule-soft);
display: grid; grid-template-columns: 6.5rem minmax(0,1fr) minmax(0,1fr);
gap: var(--s-6); align-items: start;
}
.pov__item:last-child { border-bottom: 1px solid var(--rule-soft); }
.pov__t { font-size: var(--t-h3); font-weight: 500; letter-spacing: var(--tr-tight); }
/* ----------------------------------------------------------------- cta --- */
/* the closing paragraph carries the same weight as the statement above it,
so it takes --paper rather than the dimmed body colour used elsewhere */
.cta__inner .body-l { color: var(--paper); }
.cta { position: relative; overflow: hidden; text-align: center; }
.cta::after {
content: ''; position: absolute; z-index: 0; pointer-events: none;
left: 50%; bottom: -40%; width: min(96vw, 1000px); aspect-ratio: 1 / 1.03;
transform: translateX(-50%);
background: url(../img/mesh.jpg) center / contain no-repeat;
mix-blend-mode: screen; opacity: .30; filter: blur(54px) saturate(1.05);
-webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 86%);
mask-image: radial-gradient(closest-side, #000 40%, transparent 86%);
}
.cta::before {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(72% 86% at 50% 104%, rgba(224, 74,104,.46), transparent 68%),
radial-gradient(48% 58% at 30% 100%, rgba(240,117, 80,.30), transparent 70%),
radial-gradient(34% 42% at 66% 96%, rgba(254,196, 81,.18), transparent 72%);
}
.cta__inner { position: relative; z-index: 2; display: grid; justify-items: center; gap: var(--s-7); }
.cta .display { max-width: 15ch; }
/* --------------------------------------------------- careers + roles --- */
/* One row per open role, on the same rhythm as the services list: index at
the left, title and meta in the middle, an arrow that leans on hover. */
.roles { margin-top: var(--s-7); border-top: 1px solid var(--rule-soft); }
.role {
display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto;
gap: var(--s-6); align-items: center;
padding-block: clamp(1.75rem, 3.6vw, 2.75rem);
border-bottom: 1px solid var(--rule-soft);
transition: background var(--d-mid) var(--ease);
}
.role:hover { background: rgba(255,255,255,.022); }
.role:focus-visible { outline: 2px solid var(--flame); outline-offset: -2px; }
.role__idx { padding-top: .25rem; }
.role__body { display: grid; gap: var(--s-3); }
.role__t {
font-size: var(--t-section); line-height: var(--lh-tight);
letter-spacing: var(--tr-tight); font-weight: 500; color: var(--paper);
}
.role__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.role__go {
display: grid; place-items: center; width: 44px; height: 44px; flex: none;
border: 1px solid var(--rule); border-radius: 50%; color: var(--paper-dim);
transition: transform var(--d-mid) var(--ease), border-color var(--d-mid) var(--ease),
color var(--d-mid) var(--ease);
}
.role__go svg { width: 17px; height: 17px; fill: none; stroke: currentColor;
stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.role:hover .role__go { transform: translateX(5px); border-color: var(--flame); color: var(--paper); }
/* --------------------------------------------------------- job posting --- */
.jd { margin-top: var(--s-8); display: grid; gap: var(--s-7); max-width: 74ch; }
.jd__h {
font-size: var(--t-body-l); font-weight: 500; color: var(--paper);
letter-spacing: var(--tr-tight); margin-bottom: var(--s-4);
padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule-soft);
}
.jd__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.jd__list li {
position: relative; padding-left: var(--s-5);
color: var(--paper-dim); font-size: var(--t-body-l); line-height: var(--lh-body);
}
.jd__list li::before {
content: ''; position: absolute; left: 0; top: .62em;
width: 5px; height: 5px; border-radius: 50%; background: var(--flame);
}
@media (max-width: 900px) {
.role { grid-template-columns: 3.25rem minmax(0, 1fr) auto; gap: var(--s-4); }
}
@media (max-width: 600px) {
.role__go { width: 36px; height: 36px; }
}
/* -------------------------------------------------------------- footer --- */
.footer {
position: relative; isolation: isolate;
border-top: 1px solid var(--rule-soft); padding-block: var(--s-8) var(--s-6);
/* the glow below is inset negatively on purpose; clip it here or it widens
the document and the page gains a horizontal scrollbar */
overflow: hidden;
}
/* the same gradient language and the same cadence as the hero's corner */
.footer::before {
content: ''; position: absolute; inset: -30% -10% -60%; z-index: -1; pointer-events: none;
background:
radial-gradient(60vw 40vw at 18% 100%, rgba(235,110, 96,.16), transparent 62%),
radial-gradient(34vw 24vw at 8% 118%, rgba(254,196, 81,.12), transparent 58%);
}
@media (prefers-reduced-motion: no-preference) {
.footer::before { will-change: transform, opacity; animation: glow-breathe 13.5s var(--ease) infinite alternate; }
}
.footer__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--s-7); }
.footer__col { display: grid; gap: var(--s-3); align-content: start; }
.footer__col h4 { margin-bottom: var(--s-2); }
.footer__col a, .footer__col address {
font-size: var(--t-small); color: var(--paper-dim); font-style: normal;
transition: color var(--d-mid) var(--ease);
}
.footer__col a:hover { color: var(--paper); }
.footer__logo { width: 178px; margin-bottom: var(--s-5); }
.footer__bottom {
display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); justify-content: space-between;
margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--rule-soft);
}
/* --------------------------------------------------------------- motion -- */
.js .reveal { opacity: 0; transform: translateY(20px); }
.js .reveal.is-in {
opacity: 1; transform: none;
transition: opacity var(--d-reveal) var(--ease-out), transform var(--d-reveal) var(--ease-out);
transition-delay: var(--delay, 0ms);
}
/* Headline lines rise from behind a clip. Set up by JS; harmless without it. */
/* The clip box has to clear the display face's ascenders and descenders —
Instrument Serif italic overshoots a .94 line-height by a wide margin, and
font metrics vary by renderer. Pad the clip, then pull the same amount back
out of the margin so the layout is unchanged. */
.js .lines .line {
display: block; overflow: hidden;
padding-block: .18em; margin-block: -.18em;
}
.js .lines .line > span { display: block; transform: translateY(105%); }
.js .lines.is-in .line > span {
transform: none;
transition: transform 1s var(--ease-out);
transition-delay: calc(var(--i, 0) * 90ms);
}
/* Reduced motion. The blanket rule catches any duration written literally
rather than from a token; the second rule guarantees the end state, since
several reveals start from opacity 0 or a transform. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
transition-delay: 0ms !important;
}
.js .reveal, .js .lines .line > span { opacity: 1 !important; transform: none !important; }
}
/* ----------------------------------------------------------- responsive -- */
/* Below 1080 the three-column rows fold to two: index, then content stacked
in the second column. Each rule targets a real grid item — a nested
paragraph will silently ignore grid-column and collapse into the gutter. */
@media (max-width: 1080px) {
.gap-grid__lede { grid-column: 1 / span 8; }
.gap-grid__aside { grid-column: 1 / -1; }
.stats { grid-template-columns: repeat(2, 1fr); }
.step, .step__row { --step-cols: 4.5rem minmax(0, 1fr); }
.step__col { grid-column: 2; margin-top: var(--s-4); }
.step__mark { grid-column: 2; justify-self: end; margin-top: -1.9rem; }
.pov__item { grid-template-columns: 4.5rem minmax(0, 1fr); }
.pov__item > :last-child { grid-column: 2; margin-top: var(--s-4); }
.disc__btn { grid-template-columns: 4.5rem minmax(0, 1fr) auto; }
.disc__body { grid-template-columns: 4.5rem minmax(0, 1fr); }
.disc__body > * { grid-column: 2; }
.disc__body > * + * { margin-top: var(--s-5); }
.footer__top { grid-template-columns: 1fr 1fr; gap: var(--s-7) var(--s-6); }
}
@media (max-width: 860px) {
.nav__links, .nav__end .btn { display: none; }
.nav__toggle { display: flex; }
.nav__logo { width: 146px; }
.nav__logo-full { width: 146px; }
/* same correction against the 146px mobile lockup */
.nav__logo-mark { width: 43px; height: 43px; margin-top: -21.5px; }
.hero { min-height: auto; padding-top: clamp(7.5rem, 26vh, 11rem); }
.hero__title { max-width: 14ch; }
.hero__foot { grid-template-columns: 1fr; gap: var(--s-6); }
.hero__canvas { opacity: .6; }
.gap-grid__lede { grid-column: 1 / -1; }
.tiers__row { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-4); }
.tier { min-height: 0; padding-bottom: var(--s-5); }
.receipt { display: none; }
.case { width: min(80vw, 360px); }
}
@media (max-width: 600px) {
:root { --t-display: clamp(2.65rem, 12.5vw, 3.6rem); }
.disc__btn { grid-template-columns: 3.25rem minmax(0, 1fr) auto; }
.step, .step__row { --step-cols: 3.25rem minmax(0, 1fr); }
.pov__item, .disc__body { grid-template-columns: 3.25rem minmax(0, 1fr); }
.stats { grid-template-columns: 1fr; }
.footer__top { grid-template-columns: 1fr; }
.btn { padding: .85rem 1.3rem; }
.hero__actions .btn { flex: 1 1 auto; justify-content: center; }
}
/* Client logo masks. Declared here so the relative paths resolve against
this stylesheet — a url() inside a custom property does not resolve
against the document, which is a trap worth not re-setting. */
/* Height only — width follows each file's intrinsic ratio. Tuned optically,
not by formula: equal area is the starting point, then the heavier wordmarks
(Absolut, Hershey's, Subway) come down a touch so nothing shouts. */
.clogo--absolut { --h: 24px; }
.clogo--dove { --h: 42px; }
.clogo--woodford { --h: 41px; }
.clogo--breyers { --h: 31px; }
.clogo--malibu { --h: 31px; }
.clogo--hershey { --h: 23px; }
.clogo--hellmanns { --h: 30px; }
.clogo--subway { --h: 22px; }
/* The headline is now a single short sentence, so it is set larger than the
display default — at 22ch it broke to one line and left half the hero empty.
At 16ch it lands in two lines on desktop and still clears the fold at 900px. */
.hero__title { font-size: clamp(3rem, 7.8vw, 7.1rem); }
.hero { padding-top: clamp(8rem, 16vh, 11rem); }
.hero__title { max-width: 16ch; }
@media (max-width: 900px) { .signals { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .signals { grid-template-columns: 1fr; } }
/* The receipt diagram is horizontal and can't survive a 2×2 phone grid, so
on small screens its point is carried as a caption instead. Screen readers
get the same sentence at every width. */
.tiers__note {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
@media (max-width: 860px) {
.tiers__note {
position: static; width: auto; height: auto; overflow: visible;
clip-path: none; white-space: normal;
margin-top: var(--s-6); padding-top: var(--s-5);
border-top: 1px solid var(--rule-soft);
font-family: var(--font-mono); font-size: var(--t-label);
letter-spacing: var(--tr-label); text-transform: uppercase;
color: var(--signal); line-height: 1.9;
}
}