/* ============================================================
Bunker v2 — a different page architecture, not v1 with effects.
v1: one left column, every page the same shape, type inside a measure.
v2: a full-viewport opening statement where each headline line is scaled
to fill the column exactly, then a descent through full-bleed bands
that change colour, with content placed off-axis against a visible grid.
============================================================ */
/* ---------- 1. fixed background stack ---------- */
.fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
body > main,body > footer{position:relative;z-index:1}
/* The topbar has to sit ABOVE main, not level with it: the mobile menu is a
child of the topbar, so at the same z-index main simply paints over it and
the open menu appears behind the hero with no background. */
body > .topbar{position:relative;z-index:60}
.fx-glow{
position:absolute;top:0;left:0;width:80vmax;height:80vmax;margin:-40vmax 0 0 -40vmax;
transform:translate3d(var(--gx,50vw),var(--gy,40vh),0);
/* a neutral lift rather than a red spotlight — it should read as ambient
light on the surface, not as a coloured blob chasing the cursor */
background:radial-gradient(circle closest-side,
color-mix(in srgb, var(--fg) 6%, transparent) 0%,
color-mix(in srgb, var(--fg) 2%, transparent) 46%, transparent 72%);
opacity:.85;will-change:transform;
}
.fx-grid{
position:absolute;inset:0;width:100%;max-width:var(--measure);margin:0 auto;
padding-left:var(--gl);padding-right:var(--gr);display:flex;justify-content:space-between;
}
.fx-grid i{display:block;width:1px;height:100%;background:var(--rule);opacity:.45}
.fx-grid i:nth-child(2){opacity:.22}
.fx-grain{
position:absolute;inset:-120%;opacity:.24;
background-image:url("data:image/svg+xml;utf8,\
");
animation:grainshift 7s steps(6) infinite;
}
@keyframes grainshift{
0%{transform:translate(0,0)} 16%{transform:translate(-2%,-3%)}
33%{transform:translate(-4%,2%)} 50%{transform:translate(2%,-4%)}
66%{transform:translate(-1%,3%)} 83%{transform:translate(3%,1%)}
100%{transform:translate(0,0)}
}
.fx-bar{position:fixed;top:0;left:0;height:2px;width:100%;z-index:80;background:var(--accent);
transform:scaleX(var(--p,0));transform-origin:0 50%;pointer-events:none}
main{position:relative;overflow-x:clip}
main[data-ghost]::before{display:none} /* the fitted headline is the statement now */
/* ---------- 2. the opening panel ---------- */
.hero{
/* the topbar sits above this in normal flow, so a full 100svh overhangs the
fold by exactly the bar's height — fx.js measures it into --barh */
min-height:calc(100svh - var(--barh,56px));
display:flex;flex-direction:column;justify-content:center;
padding-block:clamp(84px,11vh,140px) clamp(70px,10vh,120px);
position:relative;
}
.weare{
margin:0 0 clamp(10px,1.4vh,20px);color:var(--accent);
font-weight:800;letter-spacing:.02em;line-height:1;
font-size:clamp(.9375rem,1.5vw,1.25rem);text-transform:uppercase;
display:flex;align-items:center;
}
.weare::after{content:"";flex:none;width:clamp(28px,3vw,60px);height:2px;
background:var(--accent);margin-left:14px}
/* every line of the headline is scaled by fx.js to fill the column exactly */
.hero h1.fit{
margin:0;max-width:none;font-family:var(--display,var(--sans));
font-weight:800;letter-spacing:-.055em;line-height:.92;
}
.hero h1.fit .ln{
display:block;white-space:nowrap;
font-size:var(--fs,6rem); /* fx.js writes --fs per line */
/* tracking has to live on the line, not the h1: inherited, it computes to a
fixed px value from the h1's size and then crushes whichever line fx.js
sets smaller — which is what made "Hello, we are" read as one word */
letter-spacing:-.045em;
}
.hero.home h1.fit .ln{letter-spacing:-.05em}
/* On a phone the headline breaks into three short lines instead of two: each
one then fills the column at a much larger size, which is the whole point
of the treatment. Same words either way. */
/* .hero h1.fit .ln{display:block} outranks a bare class, so these have to
match its weight or every line renders at once */
.hero h1.fit .ln-narrow{display:none}
@media (max-width:760px){
/* "Hello, we are" stays on one line above the name */
/* Contact: one size, stacked, on a phone */
.hero h1.fit.stack-m .ln-wide{display:none}
.hero h1.fit.stack-m .ln-narrow{display:block}
}
/* a sane size before JS has measured anything, and if it never does */
@media (max-width:760px){
.hero h1.fit .ln{font-size:var(--fs,clamp(2.75rem,12.5vw,4.5rem))}
.hero.home h1.fit .ln{font-size:var(--fs,clamp(3rem,14vw,5rem))}
}
.hero h1.fit .hl{color:var(--accent)}
.scrollcue{
position:absolute;left:var(--gl);bottom:clamp(16px,2.6vh,30px);
display:inline-flex;align-items:center;gap:12px;text-decoration:none;
color:var(--dim);font-size:.8125rem;font-weight:800;letter-spacing:.18em;
text-transform:uppercase;
}
.scrollcue::after{content:"";width:46px;height:1px;background:var(--accent);
transform-origin:0 50%;animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleX(.3)}50%{transform:scaleX(1)}}
.scrollcue:hover{color:var(--fg)}
/* ---------- 3. full-bleed bands ---------- */
.band{padding-block:clamp(60px,10vh,140px);position:relative}
.band::before{content:"";position:absolute;inset:0;z-index:-1}
.band-a::before{background:color-mix(in srgb, var(--fg) 4%, transparent)}
.band-b::before{background:var(--accent)}
.band-c::before{background:color-mix(in srgb, var(--fg) 8%, transparent)}
/* a red band flips its own type, whatever the theme */
.band-b{color:var(--paper)}
.band-b .lede,.band-b .intro,.band-b h2.blockhead,.band-b .kicker,
.band-b .row h3,.band-b b,.band-b .aside{color:var(--paper)}
.band-b .row p,.band-b .cols p,.band-b .intro-sub,.band-b .say-sm,
.band-b .wblurb,.band-b .lede{color:color-mix(in srgb,var(--paper) 88%,transparent)}
.band-b .rows,.band-b .row{border-color:rgba(255,255,255,.3)}
/* the highlighted word can't stay accent-coloured on an accent field, and
turning it white would lose the emphasis entirely — so it goes to the
brand's near-black, which reads hard against the red. */
.band-b .hl,body.invert .hl{color:#141516}
.band-b .lk{color:var(--paper);text-decoration-color:rgba(255,255,255,.6)}
.band + .band{border-top:1px solid var(--rule)}
/* ---------- 4. the intro band, set large and off-axis ---------- */
.intro{
margin:0;font-family:var(--display,var(--sans));font-weight:800;
letter-spacing:-.04em;line-height:1.02;
font-size:clamp(1.75rem,5vw,3.75rem);max-width:19ch;color:var(--fg);
}
.intro b{color:var(--accent)}
.band-b .intro b{color:var(--paper);text-decoration:underline;text-underline-offset:.12em}
.intro-sub{
margin:clamp(20px,2.6vw,34px) 0 0;max-width:44ch;
color:var(--dim);font-size:clamp(1.0625rem,1.4vw,1.1875rem);line-height:1.6;
}
@media (min-width:1000px){
.intro-sub{width:46%;margin-left:54%;max-width:none}
}
/* ---------- 5. section numerals ---------- */
.band[data-n] > .wrap{position:relative}
.band[data-n] > .wrap::before{
content:attr(data-n);position:absolute;top:-.46em;right:0;
font-family:var(--display,var(--sans));font-weight:800;font-size:clamp(5rem,16vw,15rem);
line-height:.8;letter-spacing:-.06em;color:transparent;
-webkit-text-stroke:1px var(--rule-hi);opacity:.5;pointer-events:none;z-index:-1;
}
.band-b[data-n] > .wrap::before{-webkit-text-stroke-color:rgba(255,255,255,.4)}
/* ---------- 6. motion ---------- */
.rv{opacity:0;transform:translateY(var(--rv-y,24px))}
.rv.in{opacity:1;transform:none;
transition:opacity .62s cubic-bezier(.22,.61,.36,1) var(--rv-d,0s),
transform .8s cubic-bezier(.19,.74,.3,1) var(--rv-d,0s)}
.hero .weare,.hero h1.fit .ln,.scrollcue{animation:rise .9s cubic-bezier(.19,.74,.3,1) both}
.hero .weare{animation-delay:.05s}
.hero h1.fit .ln:nth-child(1){animation-delay:.12s}
.hero h1.fit .ln:nth-child(2){animation-delay:.2s}
.hero h1.fit .ln:nth-child(3){animation-delay:.28s}
.hero h1.fit .ln:nth-child(4){animation-delay:.36s}
.scrollcue{animation-delay:.5s}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.topbar{transition:transform .34s cubic-bezier(.22,.61,.36,1)}
body.navhide .topbar{transform:translateY(-120%)}
body.navopen .topbar{transform:none}
.wbg{will-change:transform}
/* ---------- 7. moving between pages ----------
Scripted: the native View Transition opt-in stalls inside the artifact
viewer. Leaving lifts and fades; arriving drops back in. The background,
topbar and footer never move, so it reads as one surface changing. */
main{animation:pagein .5s cubic-bezier(.19,.74,.3,1) both;
transition:opacity .19s ease,transform .19s ease}
@keyframes pagein{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
body.leaving main{opacity:0;transform:translateY(-12px)}
/* ---------- 8. louder type inside the bands ---------- */
.lede{font-family:var(--display,var(--sans));font-weight:700;letter-spacing:-.025em;
font-size:clamp(1.25rem,2.4vw,1.875rem);line-height:1.26;max-width:28ch;color:var(--fg)}
.lede b{color:var(--accent);font-weight:700}
h2.blockhead{font-family:var(--display,var(--sans));font-weight:800;letter-spacing:-.045em;
font-size:clamp(2.25rem,7vw,5.5rem);line-height:.94;margin:0 0 clamp(22px,3vw,40px);max-width:16ch}
.cols{columns:auto;column-gap:0;display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));
gap:clamp(18px,2.2vw,30px) clamp(32px,4.5vw,72px)}
.cols p{font-size:clamp(1.0625rem,1.45vw,1.25rem);line-height:1.52;margin:0}
.say-sm{margin:14px 0 0;color:var(--dim);font-size:clamp(1rem,1.3vw,1.125rem);line-height:1.55;max-width:46ch}
.row h3{font-size:clamp(1.125rem,2.1vw,1.5rem);letter-spacing:-.025em}
.row p{font-size:clamp(1rem,1.2vw,1.0625rem)}
.wblurb{font-size:clamp(1.0625rem,1.35vw,1.1875rem);max-width:56ch}
.kicker{font-size:clamp(2rem,6.4vw,4.75rem);max-width:16ch}
.aside{font-size:clamp(1rem,1.3vw,1.125rem);opacity:.9}
section.wrap{padding-block:clamp(50px,8vh,100px)}
@media (max-width:700px){
.hero{min-height:calc(92svh - var(--barh,56px))}
.lede{font-size:clamp(1.25rem,5.4vw,1.75rem);max-width:none}
h2.blockhead{font-size:clamp(2.125rem,9.4vw,3.25rem);max-width:none}
.kicker{font-size:clamp(2.125rem,9.4vw,3.25rem);max-width:none}
.intro{font-size:clamp(1.75rem,8vw,2.5rem);max-width:none}
.intro-sub{width:auto;margin-left:0}
.band[data-n] > .wrap::before{font-size:28vw;top:-.3em}
}
@media (prefers-reduced-motion:reduce){
.rv,.rv.in{opacity:1;transform:none;transition:none}
.hero .weare,.hero h1.fit .ln,.scrollcue{animation:none}
.scrollcue::after{animation:none;transform:none}
.fx-grain{animation:none}
.topbar{transition:none}
main{animation:none;transition:none}
body.leaving main{opacity:1;transform:none}
}
/* ---------- 9. the page always fills the viewport ----------
site.css asks body for min-height:100%, but html has no height, so the
value is ignored and a short page leaves dead space under the footer.
Anchor it to the viewport and let main take up the slack instead. */
html{min-height:100%}
body{min-height:100svh}
main{flex:1 0 auto}
footer{flex:none;margin-top:auto}
footer .wrap{padding-block:clamp(20px,3vh,32px) clamp(22px,3.4vh,36px)}
/* the aside after a kicker — the big claim, then the quiet beat after it */
.kicker-tag{
margin:clamp(14px,1.8vw,22px) 0 0;color:var(--accent);
font-family:var(--display,var(--sans));font-weight:800;letter-spacing:-.02em;
font-size:clamp(1.125rem,2vw,1.625rem);line-height:1;
display:flex;align-items:center;
}
.band-b .kicker-tag{color:var(--paper)}
/* the wink — drawn rather than an emoji glyph, so it sits in the brand
and matches the type beside it. It winks roughly every 12 seconds. */
.wink{display:inline-block;flex:none;width:1.05em;height:1.05em;margin-left:.38em}
.wink svg{display:block;width:100%;height:100%;overflow:visible}
.wink .face,.wink .mouth{fill:none;stroke:currentColor;stroke-width:2.4;
stroke-linecap:round}
.wink .eye{fill:currentColor;stroke:none}
.wink .blink{transform-box:fill-box;transform-origin:center;
animation:wink 12s cubic-bezier(.4,0,.2,1) infinite}
@keyframes wink{
0%,93%,100%{transform:scaleY(1)}
95.5%,97%{transform:scaleY(.1)}
}
@media (prefers-reduced-motion:reduce){ .wink .blink{animation:none} }
/* ---------- the work filter, as an obvious control ----------
It used to be a sentence with a link in it, which reads as prose and gets
skipped. Two buttons, set in display type, with the active one filled. */
.seg{
display:flex;width:max-content;max-width:100%;
border:1px solid var(--rule-hi);
margin:0 0 clamp(28px,3.6vw,46px);
}
.seg-b{
font:inherit;font-family:var(--display,var(--sans));font-weight:800;
letter-spacing:-.03em;line-height:1;
font-size:clamp(1.0625rem,2.2vw,1.625rem);
background:none;border:0;cursor:pointer;color:var(--dim);
padding:clamp(11px,1.3vw,17px) clamp(18px,2.6vw,36px);
transition:color .2s ease,background-color .25s ease;
}
.seg-b + .seg-b{border-left:1px solid var(--rule-hi)}
.seg-b:hover{color:var(--fg)}
.seg-b[aria-pressed="true"]{background:var(--accent);color:var(--paper)}
.seg-b:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:560px){
.seg{width:100%}
.seg-b{flex:1;text-align:center;white-space:nowrap;padding-inline:clamp(8px,2.6vw,16px);font-size:.9375rem}
}
/* ---------- anchor jumps glide ----------
Wheel scrolling stays native — damping it fights the trackpad. Only
jumps to an anchor are eased, and every band is a landing target that
stops clear of the sticky bar. */
@media (prefers-reduced-motion:no-preference){
html{scroll-behavior:smooth}
}
.band,.hero,section.wrap,[id]{scroll-margin-top:clamp(74px,10vh,104px)}
/* ---------- what we do: three modes, stacked ----------
Unwrapped from a tab bar. Tabs made a sequential practice look like three
alternatives, and hid two thirds of the page behind a click. Scrolling the
three bands IS the end-to-end journey the headline promises. */
.mode i{font-style:normal;opacity:.5;margin:0 .25em}
.mode{margin:0 0 clamp(10px,1.2vw,16px);color:var(--accent);
font-weight:800;font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase}
.band-b .mode{color:var(--paper)}
.caps{
list-style:none;margin:clamp(26px,3.2vw,42px) 0 0;padding:clamp(22px,2.6vw,32px) 0 0;
border-top:1px solid var(--rule);
display:flex;flex-wrap:wrap;align-items:baseline;
gap:.2em clamp(8px,.9vw,13px);
font-family:var(--display,var(--sans));font-weight:800;letter-spacing:-.02em;
line-height:1.2;font-size:clamp(.875rem,1.18vw,1.0625rem);
}
.caps li{display:flex;align-items:baseline;color:var(--fg)}
.caps li::after{content:"/";color:var(--accent);font-weight:800;
margin-left:clamp(8px,.9vw,13px)}
.caps li:last-child::after{display:none}
.band-b .caps{border-color:rgba(255,255,255,.3)}
.band-b .caps li{color:var(--paper)}
.band-b .caps li::after{color:#141516}
/* ---------- proof: full-bleed covers, stacked flush ----------
Name and sector sit on the image; the summary arrives on hover. A gradient
scrim carries the type — weighted to the bottom where the name sits, and
deepening on hover so the longer copy stays readable over any cover, light
or dark. Covers butt against each other with no gutter. */
.wcovers{display:block}
.wcover{
/* sticky: each cover pins to the top and the next one slides up over it,
so the thirteen fold into one stack as you scroll. The last card in the
block has nothing to pin against, so the stack releases cleanly. */
position:sticky;top:0;display:block;overflow:hidden;cursor:pointer;
/* full bleed by margin rather than transform: a transform would make this
a containing block for fixed children, and the mobile panel has to be
able to escape the card and take over the viewport. */
width:100vw;margin-left:calc(50% - 50vw);
height:clamp(320px,66vh,780px);background:var(--raise);
transition:height .66s cubic-bezier(.16,1,.3,1);
}
.wcover.open{height:clamp(440px,88vh,1000px)}
.wcover.off{display:none}
/* With one card open the rest fall back, so the open one has the eye.
This is brightness, NOT opacity: opacity composites the cover against
whatever is behind it, which in light mode is the white page — so the
covers washed out instead of going dark. Brightness always drives
toward black, in either mode, and takes the caption down with it. */
.wcovers{transition:none}
.wcovers.hasopen .wcover:not(.open){
filter:brightness(.26) saturate(.35);
}
.wcovers .wcover{transition:height .66s cubic-bezier(.16,1,.3,1),filter .5s ease}
.wcover:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.wcover-img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:center 42%;
transform:scale(1.02);
transition:transform 1.4s cubic-bezier(.22,.61,.36,1);
}
.wcover:hover .wcover-img,.wcover.open .wcover-img{transform:scale(1.06)}
/* The tint is TWO layers, and only opacity is ever animated.
A gradient in the `background` shorthand does not interpolate reliably —
the browser snaps from one to the other, which is the flicker. A constant
base layer plus a second layer fading in on top eases properly every time.
::before paints under ::after, so base goes in ::before. */
.wcover::before,.wcover::after{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
}
.wcover::before{
background:linear-gradient(to top,
rgba(8,9,10,.82) 0%, rgba(8,9,10,.46) 34%,
rgba(8,9,10,.20) 68%, rgba(8,9,10,.12) 100%);
}
/* hover darkens enough to hold the caption and no further: the photograph is
the reason the card exists, so it stays readable underneath */
.wcover::after{
background:linear-gradient(to top,
rgba(8,9,10,.86) 0%, rgba(8,9,10,.54) 44%, rgba(8,9,10,.34) 100%);
opacity:0;
transition:opacity .62s cubic-bezier(.33,1,.68,1);
}
.wcover:hover::after,.wcover:focus-visible::after{opacity:1}
/* open is lighter than hover: the panel already supplies the contrast, so the
cover itself only needs enough tint to carry the name */
.wcover.open::after{opacity:.5}
/* ---------- the caption ----------
Same two-column typographic grid as the rest of the site: the name and its
sector/platform run down the left, the summary sits bottom-aligned in the
right column. At rest only the name shows; the other two are held back. */
.wcover-cap{
position:absolute;left:0;right:0;bottom:0;z-index:3;
/* the caption sits the same distance in from the left edge as it does up
from the bottom, so it reads as one inset block on the image rather than
as page copy that happens to be over a photograph */
width:100%;max-width:none;margin:0;
--cap-in:clamp(26px,4.4vh,60px);
padding:0 var(--cap-in) var(--cap-in);
display:grid;grid-template-columns:minmax(0,1fr);
gap:10px clamp(32px,5vw,80px);align-items:end;
}
@media (min-width:900px){
.wcover-cap{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.wcover .wname{grid-column:1;grid-row:1}
.wcover .wmeta{grid-column:1;grid-row:2}
.wcover .wblurb{grid-column:2;grid-row:1 / span 2;align-self:end}
}
.wcover .wname{
margin:0;font-family:var(--display,var(--sans));font-weight:800;
letter-spacing:-.035em;line-height:.95;color:var(--paper);
font-size:clamp(1.75rem,3.4vw,3rem);
transition:font-size .55s cubic-bezier(.16,1,.3,1),letter-spacing .55s cubic-bezier(.16,1,.3,1);
}
.wcover:hover .wname,.wcover:focus-visible .wname,.wcover.open .wname{
font-size:clamp(2.25rem,5vw,4.25rem);letter-spacing:-.045em;
}
/* everything but the name is held back until hover */
.wcover .wmeta,.wcover .wblurb{
opacity:0;transform:translateY(12px);
transition:opacity .42s ease .06s,transform .55s cubic-bezier(.16,1,.3,1) .06s;
}
.wcover:hover .wmeta,.wcover:focus-visible .wmeta,.wcover.open .wmeta,
.wcover:hover .wblurb,.wcover:focus-visible .wblurb{
opacity:1;transform:none;
}
.wcover .wmeta{
display:flex;flex-wrap:wrap;align-items:baseline;
justify-content:flex-start;text-align:left;
margin:.4em 0 0;gap:.1em clamp(10px,1vw,16px);
font-family:var(--display,var(--sans));font-weight:800;letter-spacing:-.02em;
font-size:clamp(.875rem,1.15vw,1.0625rem);color:var(--paper);
}
.wcover .wmeta span{white-space:nowrap}
.wcover .wmeta span + span::before{content:"/";color:var(--accent);margin-right:clamp(10px,1vw,16px)}
.wcover .wblurb{
margin:0;max-width:44ch;color:color-mix(in srgb,var(--paper) 92%,transparent);
font-size:clamp(1rem,1.25vw,1.125rem);line-height:1.6;
text-wrap:pretty;
}
/* the panel occupies the right column, so the summary steps aside for it */
.wcover.open .wblurb{opacity:0;transform:translateY(12px)}
/* ---------- the arrow ---------- */
.warrow{
position:absolute;z-index:4;top:50%;right:clamp(20px,4.5vw,76px);
width:clamp(84px,9vw,150px);color:var(--paper);pointer-events:none;
opacity:0;transform:translate(-26px,-50%);
transition:opacity .4s ease,transform .62s cubic-bezier(.16,1,.3,1);
}
.warrow svg{display:block;width:100%;height:auto;
}
.wcover:hover .warrow,.wcover:focus-visible .warrow{opacity:1;transform:translate(0,-50%)}
.wcover.open .warrow{opacity:0;transform:translate(26px,-50%)}
/* ---------- the panel: half the cover, slides in from the right ---------- */
.wpanel{
position:fixed;z-index:200;
top:0;bottom:0;right:0;width:50%;
background:rgba(9,10,11,.965);
-webkit-backdrop-filter:blur(26px) saturate(130%);
backdrop-filter:blur(26px) saturate(130%);
/* square edges, flush to the cover; a hairline separates it */
border:0;border-radius:0;
transform:translateX(100%);
opacity:0;visibility:hidden;
transition:transform .72s cubic-bezier(.16,1,.3,1),
opacity .42s ease .04s,
visibility 0s linear .72s;
overflow:hidden;overscroll-behavior:contain;
cursor:default;
/* The frame area takes the height its image asks for (drawer.js writes
--shots); the read takes whatever is left. Falls back to two thirds. */
display:grid;grid-template-rows:minmax(0,var(--shots,62%)) minmax(0,1fr);
}
.wpanel.open{
transform:none;opacity:1;visibility:visible;
transition:transform .72s cubic-bezier(.16,1,.3,1),
opacity .36s ease,
visibility 0s;
}
.wp-close{
position:absolute;top:14px;right:14px;z-index:3;
width:40px;height:40px;border-radius:50%;
display:grid;place-items:center;cursor:pointer;
background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
color:var(--paper);font:inherit;line-height:1;
transition:background .25s ease,transform .25s ease;
}
.wp-close:hover{background:rgba(255,255,255,.2);transform:rotate(90deg)}
.wp-close svg{width:15px;height:15px;display:block}
/* the frames — a mosaic rather than a uniform grid, so a project reads as a
set of different shots instead of a contact sheet. Six columns and six rows
with explicit spans per count: it fills the box exactly at any panel height,
which a real masonry column flow cannot do. drawer.js writes data-n. */
.wp-shots{
grid-row:1;min-height:0;overflow:hidden;
display:grid;gap:2px;padding:0;background:#0a0b0c;
grid-template-columns:repeat(6,minmax(0,1fr));
grid-template-rows:repeat(6,minmax(0,1fr));
}
.wp-shots img{
display:block;width:100%;height:100%;min-height:0;min-width:0;
/* contain, now that the box is cut to the image's own proportions: the
two agree, so there is neither a crop nor a visible letterbox. */
object-fit:contain;background:#0a0b0c;
}
.wp-shots[data-n="1"] img:nth-child(1){grid-area:1/1/7/7}
.wp-shots[data-n="2"] img:nth-child(1){grid-area:1/1/7/5}
.wp-shots[data-n="2"] img:nth-child(2){grid-area:1/5/7/7}
.wp-shots[data-n="3"] img:nth-child(1){grid-area:1/1/5/5}
.wp-shots[data-n="3"] img:nth-child(2){grid-area:1/5/5/7}
.wp-shots[data-n="3"] img:nth-child(3){grid-area:5/1/7/7}
.wp-shots[data-n="4"] img:nth-child(1){grid-area:1/1/4/5}
.wp-shots[data-n="4"] img:nth-child(2){grid-area:1/5/4/7}
.wp-shots[data-n="4"] img:nth-child(3){grid-area:4/1/7/3}
.wp-shots[data-n="4"] img:nth-child(4){grid-area:4/3/7/7}
.wp-shots[data-n="5"] img:nth-child(1){grid-area:1/1/5/4}
.wp-shots[data-n="5"] img:nth-child(2){grid-area:1/4/3/7}
.wp-shots[data-n="5"] img:nth-child(3){grid-area:3/4/5/7}
.wp-shots[data-n="5"] img:nth-child(4){grid-area:5/1/7/3}
.wp-shots[data-n="5"] img:nth-child(5){grid-area:5/3/7/7}
/* summary on the bottom */
.wp-body{
grid-row:2;min-height:0;
overflow:hidden auto;overscroll-behavior:contain;
padding:clamp(20px,2.6vw,30px) clamp(22px,3vw,36px) clamp(24px,3vw,34px);
display:flex;flex-direction:column;gap:clamp(10px,1.2vw,15px);
border-top:1px solid rgba(255,255,255,.12);
-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 34px),transparent 100%);
mask-image:linear-gradient(to bottom,#000 calc(100% - 34px),transparent 100%);
}
.wp-body::-webkit-scrollbar{width:9px}
.wp-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:9px}
.wp-text p{
margin:0 0 .85em;color:color-mix(in srgb,var(--paper) 93%,transparent);
font-family:var(--display,var(--sans));
font-weight:600;letter-spacing:-.018em;
font-size:clamp(.9375rem,1.08vw,1.1875rem);line-height:1.44;
text-wrap:pretty;
}
.wp-text p:last-child{margin-bottom:0}
@media (max-width:899px){
.wcover{height:clamp(300px,54vh,520px)}
/* no hover on touch: show the meta, keep the long read behind the tap */
.wcover .wname{font-size:clamp(2rem,8.5vw,3rem)}
.wcover .wmeta,.wcover .wblurb{opacity:1;transform:none}
.wcover .wblurb{font-size:1rem;max-width:none}
.wcover.open .wblurb{opacity:0}
.warrow{opacity:.85;transform:translate(0,-50%);width:72px;right:18px}
.wpanel{width:100%;border-left:0}
.wp-shots{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* engagement length, top left — the quiet proof that these were
relationships rather than projects */
.wdur{
position:absolute;left:0;right:0;top:0;z-index:3;margin:0 auto;
width:100%;max-width:var(--measure);
padding:clamp(22px,3.6vh,46px) var(--gr) 0 var(--gl);
font-weight:800;font-size:.75rem;letter-spacing:.17em;text-transform:uppercase;
color:var(--paper);pointer-events:none;
transition:opacity .4s ease;
}
.wcover.open .wdur{opacity:0}
.wdur span{display:inline-flex;align-items:center;gap:12px}
.wdur span::before{content:"";width:clamp(18px,2vw,30px);height:2px;background:var(--accent)}
@media (prefers-reduced-motion:reduce){
.wcover-img,.wcover::after,.wcover .wname,.wcover .wmeta,.wcover .wblurb,.warrow,.wpanel,.wcover-cap{
transition-duration:.01ms !important;
}
}
/* ---------- about: the eras ----------
The copy column used to span both grid rows, so its height was distributed
into the rows above and below the era word — which is what pushed the label
away from the word and left the hole underneath. The label and word are now
one block, and the two columns simply sit side by side, top aligned. */
.era{
display:grid;grid-template-columns:minmax(0,1fr);
gap:clamp(16px,2.2vw,30px) clamp(36px,5vw,90px);
align-items:start;
padding:clamp(34px,4.6vw,66px) 0;
}
.era-head{display:block;min-width:0}
.era-when{margin:0 0 .55em}
.era-what{
margin:0;display:block;padding-left:0;
/* pull up the font's internal leading so the cap height lines up with the
first line of copy in the next column */
margin-top:-.07em;
}
.era-say{min-width:0;max-width:52ch}
.era-say p{margin:0 0 1em}
.era-say p:last-child{margin-bottom:0}
@media (min-width:980px){
.era{grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);align-items:start}
.era-head{grid-column:1}
.era-say{grid-column:2}
}
/* the stepped indent read as misalignment at this size */
.era:nth-child(2) .era-what,.era:nth-child(3) .era-what{padding-left:0}
/* with the panel out, the caption has only the left half to live in — the
name settles back a little so it can never slide under the panel edge */
@media (min-width:900px){
.wcover.open .wname{font-size:clamp(1.75rem,3.4vw,2.75rem)}
}
/* the sector and platform runs are supporting material, not a headline —
they were competing with the covers below them */
.industries{
font-size:clamp(.875rem,1.15vw,1.0625rem);
letter-spacing:-.015em;line-height:1.24;
gap:.22em clamp(8px,.85vw,12px);
}
.industries li::after{margin-left:clamp(8px,.85vw,12px)}
@media (max-width:899px){
.industries{font-size:clamp(.9375rem,3.2vw,1.0625rem)}
}
/* #2A2C2E on #1C1E20 is about two levels of grey apart — invisible on the
raised bands. These rules carry real weight: they are the only thing
separating the lede from the run of capabilities underneath it. */
.caps{border-top-color:var(--rule-hi)}
.band-a .caps,.band-c .caps{border-top-color:rgba(255,255,255,.26)}
.band-b .caps{border-top-color:rgba(255,255,255,.45)}
:root[data-theme="light"] .caps{border-top-color:rgba(20,21,22,.22)}
:root[data-theme="light"] .band-b .caps{border-top-color:rgba(20,21,22,.4)}
/* the invitation straight after the wink — big enough to be an obvious next
step without competing with the kicker it answers */
.kicker-cta{margin:clamp(18px,2.4vw,30px) 0 0}
.kicker-cta a{
display:inline-flex;align-items:center;gap:.5em;
font-family:var(--display,var(--sans));font-weight:800;letter-spacing:-.03em;
font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.05;
color:var(--fg);text-decoration:none;
border-bottom:3px solid var(--accent);padding-bottom:.08em;
transition:color .28s ease,gap .35s cubic-bezier(.16,1,.3,1);
}
.kicker-cta a:hover,.kicker-cta a:focus-visible{color:var(--accent);gap:.78em}
.kicker-cta .arw{transition:transform .35s cubic-bezier(.16,1,.3,1)}
.kicker-cta a:hover .arw{transform:translateX(2px)}
.band-b .kicker-cta a{color:var(--paper);border-bottom-color:#141516}
.band-b .kicker-cta a:hover{color:var(--paper);border-bottom-width:3px}
@media (prefers-reduced-motion:reduce){
.kicker-cta a,.kicker-cta .arw{transition:none}
}
/* mobile: the topbar is sticky and owns the stack while the menu is open.
site.css says this too, but fx.css loads after it and `body > .topbar`
outranks a bare `.topbar`, so it has to be restated here. */
@media all{
body > .topbar{position:sticky;top:0;z-index:70}
body.navopen > .topbar{z-index:90}
}
/* the panel's own title: mobile only (see drawer.js) */
.wp-name{
margin:0 0 .5em;font-family:var(--display,var(--sans));font-weight:800;
letter-spacing:-.04em;line-height:1;color:var(--paper);
font-size:clamp(1.5rem,6.4vw,2rem);
}
@media (min-width:900px){ .wp-name{display:none} }
/* ---------- mobile: the panel takes over the screen ----------
Half a card is nothing on a phone, so the panel leaves the card entirely
and becomes a full-screen sheet rising from the bottom. main is lifted
above the topbar for the duration, because a fixed child still paints
inside its own stacking context and main sits below the bar otherwise. */
@media (max-width:899px){
body.coverpanel{overflow:hidden}
/* main carries the page-in animation, and an animation that ENDS on
transform:none still computes to an identity matrix — which is enough to
make main a containing block and trap the fixed sheet inside it. The
animation has long finished by the time anyone taps a card, so dropping
it here costs nothing and frees the sheet to use the viewport. */
body.coverpanel > main{z-index:100;animation:none;transform:none}
/* growing the card underneath only shifts the page behind the sheet */
.wcover.open{height:clamp(300px,54vh,520px)}
.wpanel{
position:fixed;inset:0;width:100%;height:100%;
background:#0a0b0c;
box-shadow:none;
transform:translateY(100%);
transition:transform .5s cubic-bezier(.16,1,.3,1),
opacity .3s ease,
visibility 0s linear .5s;
}
.wpanel.open{
transform:none;
transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .28s ease,visibility 0s;
}
.wp-close{
top:calc(14px + env(safe-area-inset-top,0px));
width:44px;height:44px;
background:rgba(255,255,255,.14);
}
.wp-body{
padding-bottom:calc(28px + env(safe-area-inset-bottom,0px));
}
}
/* a headline line may wrap on a phone now (see the floor in fx.js), so it
needs leading that works for two lines rather than one */
@media (max-width:760px){
.hero h1.fit{line-height:.94}
.hero h1.fit .ln{margin-bottom:.06em}
.hero h1.fit .ln:last-child{margin-bottom:0}
}
/* where an engagement actually ended up — top right, opposite the tenure,
so the pair reads as "how long" and "how far" */
.wstate{
position:absolute;left:0;right:0;top:0;z-index:3;margin:0 auto;
width:100%;max-width:var(--measure);
padding:clamp(22px,3.6vh,46px) var(--gr) 0 var(--gl);
font-weight:800;font-size:.75rem;letter-spacing:.17em;text-transform:uppercase;
color:var(--paper);pointer-events:none;
text-align:right;transition:opacity .4s ease;
}
.wstate span{
display:inline-flex;align-items:center;gap:12px;
color:color-mix(in srgb,var(--paper) 82%,transparent);
}
.wstate span::after{content:"";width:clamp(18px,2vw,30px);height:2px;background:rgba(255,255,255,.4)}
.wcover.open .wstate{opacity:0}
@media (max-width:899px){ .wstate{display:none} }
/* a lede set straight under a kicker had no air between them — the kicker's
tight leading leaves nothing for the paragraph to clear */
.kicker + .lede,.kicker + .intro-sub{margin-top:clamp(24px,3.2vw,44px)}
/* ---------- the opener's ghost ----------
An F1 car sitting a long way back behind the home headline. Far enough
back that it reads as texture rather than a photograph, masked top and
bottom so it never collides with the topbar or the scroll cue, and pulled
back further again in light mode where a dark image has nowhere to hide. */
.hero.home{position:relative}
.herofx{
/* Body level, NOT inside the hero: main carries the page-in animation, and
a transform makes it a stacking context — a blended child inside it has
no backdrop to blend with, so screen did nothing and the image's black
simply composited down, printing a dark rectangle. Out here it sits with
the other background layers and can actually see the page. */
position:absolute;top:0;left:0;right:0;height:100svh;
z-index:0;pointer-events:none;
background-image:url("f1.png"); /* relative to THIS stylesheet, not the page */
background-repeat:no-repeat;
background-position:center 46%;
background-size:cover;
/* screen, not opacity: the photograph is black-on-black, so fading it just
made it disappear. Screen drops its blacks out entirely and lets only the
chrome edges add light — the car arrives as a silhouette of highlights. */
mix-blend-mode:screen;
opacity:.34;
filter:grayscale(.6) contrast(1.02) brightness(.92);
/* a radial fade centred on the car, so it dissolves on every side instead
of stopping at the edge of the photograph */
-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 82%,transparent 100%);
mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 82%,transparent 100%);
}
:root[data-theme="light"] .herofx{
/* The asset feathers to BLACK, which is what screen needs. Multiply wants
the opposite — black edges would darken the whole frame into a grey
rectangle — so invert it first: the edges become white, multiply ignores
them, and the car reads as a dark ghost on the light page. */
mix-blend-mode:multiply;
opacity:.12;
filter:invert(1) grayscale(1) contrast(.88) brightness(1.02);
}
@media (max-width:899px){
.herofx{
background-position:center 44%;
background-size:cover;
opacity:.26;
-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 84%,transparent 100%);
mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 84%,transparent 100%);
}
}
@media (prefers-reduced-motion:reduce){ .herofx{transition:none} }
/* ---------- the top of the home page goes nearly black ----------
Sits at body level between the fixed background stack (z-index 0) and the
content (z-index 1), so it darkens the opening without touching the type,
and scrolls away rather than following the viewport. The topbar is
transparent on desktop, so the dark runs up behind the nav too. */
.topdark{
position:absolute;top:0;left:0;right:0;height:150vh;
z-index:0;pointer-events:none;
background:linear-gradient(to bottom,
#06070899 0%, #07080a 6%, #090a0b 44%, #0d0e0f 72%, transparent 100%);
}
:root[data-theme="light"] .topdark{
background:linear-gradient(to bottom,#E6E6E0 0%,#ECECE6 46%,transparent 100%);
}
/* the positioning line, directly under the opener — big enough to be read as
part of the statement, small enough that it never competes with the name */
.herolede{
margin:clamp(18px,2.2vw,30px) 0 0;
font-family:var(--display,var(--sans));font-weight:800;
letter-spacing:-.035em;line-height:1.04;
font-size:clamp(1.5rem,3.4vw,2.875rem);
color:var(--fg);max-width:22ch;text-wrap:balance;
}
@media (max-width:760px){
.herolede{font-size:clamp(1.375rem,6.4vw,2rem);max-width:none}
}
/* On wide screens the home hero is a two-column grid (site.css) — the lede
belongs in the second column, baseline-aligned with the headline, with a
rule above it so the placement reads as intended rather than as overflow.
Below 1080px the hero is a single flex column and it stacks underneath. */
@media (min-width:1080px){
.hero.home .herolede{
grid-column:2;align-self:end;
margin:0 0 .5em;max-width:none;
border-top:3px solid var(--accent);padding-top:clamp(16px,1.6vw,24px);
font-size:clamp(1.375rem,2.1vw,2rem);
}
}
/* a footnote under a hero statement — set like the engagement tags on Proof,
so a claim and its evidence share one visual language across the site */
.herofoot{
margin:clamp(22px,3vw,40px) 0 0;max-width:46ch;
font-size:clamp(.9375rem,1.15vw,1.0625rem);line-height:1.55;
color:var(--dim);text-wrap:pretty;
}
.herofoot b{color:var(--fg);font-weight:700}
.herofoot .k{
display:inline-flex;align-items:center;gap:12px;margin-right:14px;
font-weight:800;font-size:.75rem;letter-spacing:.17em;text-transform:uppercase;
color:var(--accent);white-space:nowrap;
}
.herofoot .k::after{content:"";width:clamp(18px,2vw,30px);height:2px;background:var(--accent)}
@media (max-width:760px){
.herofoot{max-width:none;font-size:1rem}
.herofoot .k{display:flex;margin:0 0 .5em}
}
/* ---------- the referral figure ----------
Typographic, not a badge: the number is set at display scale beside the
claim, the way a figure is set in print. The stat carries the weight, the
sentence explains it, the line underneath gets the last word. */
.stat{
display:grid;gap:clamp(16px,2vw,34px);align-items:start;
grid-template-columns:1fr;
margin:clamp(24px,3vw,42px) 0 0;
}
.stat-n{
margin:0;line-height:.82;color:var(--accent);
font-family:var(--display,var(--sans));font-weight:800;
letter-spacing:-.06em;font-size:clamp(4.5rem,10vw,9rem);
}
.stat-n span{font-size:.44em;letter-spacing:-.03em;vertical-align:.42em;margin-left:.04em}
.stat-say{min-width:0;max-width:52ch}
.stat-k{
margin:0 0 .7em;color:var(--accent);
font-weight:800;font-size:.75rem;letter-spacing:.17em;text-transform:uppercase;
}
.stat-lede{
margin:0;color:var(--fg);
font-family:var(--display,var(--sans));font-weight:700;letter-spacing:-.02em;
font-size:clamp(1.0625rem,1.45vw,1.375rem);line-height:1.42;text-wrap:pretty;
}
.stat-lede b{color:var(--accent);font-weight:800}
.smallprint{
margin:1em 0 0;color:var(--dim);
font-size:.8125rem;line-height:1.5;
}
.smallprint::before{content:"* "}
@media (min-width:900px){
.stat{grid-template-columns:auto minmax(0,1fr);align-items:center}
.stat-say{border-left:2px solid var(--rule-hi);padding-left:clamp(20px,2.4vw,34px)}
}
/* ---------- capability tiles ----------
Closed, a tile is one square. Open, it grows to two and the description
arrives in the second one. The face is absolutely positioned inside the
tile so it can grow past its own box without reflowing the grid — a real
grid-column change cannot be animated and would shunt every other tile.
Tiles in the last column grow LEFT so the block never leaves the grid;
svc.js works that out from each tile's actual position. */
.tiles{
display:grid;gap:2px;
grid-template-columns:repeat(4,minmax(0,1fr));
/* edge to edge: full bleed by margin rather than transform, so the tiles
stay a clean containing block for the faces that grow inside them */
width:100vw;margin:clamp(26px,3.4vw,46px) 0 0 calc(50% - 50vw);
}
.tile{
position:relative;aspect-ratio:1/1;cursor:pointer;display:block;
background:transparent;
}
.tile:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.tile.open{z-index:5}
.tile-face{
position:absolute;top:0;bottom:0;left:0;width:100%;
background:var(--raise);overflow:hidden;
transition:width .58s cubic-bezier(.16,1,.3,1),
background .42s ease,
filter .45s ease;
}
.tile[data-dir="left"] .tile-face{left:auto;right:0}
.tile.open .tile-face{width:calc(200% + 2px);background:var(--accent)}
.tiles.hasopen .tile:not(.open) .tile-face{filter:brightness(.45) saturate(.5)}
.tile-name{
position:absolute;left:clamp(14px,1.4vw,22px);
bottom:clamp(13px,1.3vw,20px);margin:0;z-index:2;
font-family:var(--display,var(--sans));font-weight:800;
letter-spacing:-.035em;line-height:1.02;
font-size:clamp(1.0625rem,1.5vw,1.5rem);color:var(--fg);
transition:color .4s ease;
}
.tile.open .tile-name{color:#141516}
/* drawn rather than typed, so it turns into a cross instead of swapping */
.tile-mk{
position:absolute;top:clamp(13px,1.3vw,20px);right:clamp(13px,1.3vw,20px);
width:16px;height:16px;z-index:3;
transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.tile-mk i{
position:absolute;top:50%;left:0;width:100%;height:2px;margin-top:-1px;
background:var(--accent);transition:background .4s ease;
}
.tile-mk i:last-child{transform:rotate(90deg)}
.tile.open .tile-mk{transform:rotate(135deg)}
.tile.open .tile-mk i{background:#141516}
.tile-body{
/* bounded at the bottom by the name, and scrollable, so the longest
description can never ride over the title on a narrow tile */
position:absolute;top:0;bottom:clamp(46px,4vw,62px);z-index:2;
left:clamp(16px,1.6vw,24px);right:clamp(16px,1.6vw,24px);
padding-top:clamp(46px,3.6vw,56px);
overflow:hidden auto;overscroll-behavior:contain;
color:var(--paper);
opacity:0;transform:translateY(10px);pointer-events:none;
transition:opacity .3s ease,transform .45s cubic-bezier(.16,1,.3,1);
}
.tile.open .tile-body{
opacity:1;transform:none;pointer-events:auto;
transition:opacity .4s ease .16s,transform .55s cubic-bezier(.16,1,.3,1) .16s;
}
.tile-body p{
margin:0;max-width:30ch;
font-family:var(--display,var(--sans));
font-size:clamp(1.125rem,1.72vw,1.875rem);line-height:1.18;
font-weight:800;letter-spacing:-.034em;text-wrap:pretty;
}
/* lower right of an open tile: what this one actually turns up alongside,
counted off the thirteen engagements on Proof rather than asserted. */
.tile-pair{
position:absolute;right:clamp(14px,1.4vw,22px);
bottom:clamp(13px,1.3vw,20px);margin:0;z-index:2;max-width:42%;
text-align:right;color:#141516;
opacity:0;transform:translateY(6px);pointer-events:none;
transition:opacity .28s ease,transform .4s cubic-bezier(.16,1,.3,1);
}
.tile.open .tile-pair{
opacity:1;transform:none;
transition:opacity .38s ease .26s,transform .5s cubic-bezier(.16,1,.3,1) .26s;
}
.tp-k{
display:block;font-size:.5625rem;letter-spacing:.18em;text-transform:uppercase;
font-weight:800;opacity:.58;margin-bottom:.5em;
}
.tp-v{
display:block;font-family:var(--display,var(--sans));font-weight:800;
letter-spacing:-.022em;font-size:.8125rem;line-height:1.3;
}
@media (max-width:760px){ .tile-pair{display:none} .tile.open .tile-pair{display:block} }
/* ---------- the coffee tile, which turned out to want a spec sheet ----------
Three columns instead of two, because a real process does not fit in the
space a joke needed. Two columns of steps inside, small, so the whole
method is visible at once rather than scrolled. */
.tile-wide.open .tile-face{width:calc(300% + 4px)}
.tile-recipe{
bottom:clamp(44px,3.6vw,56px);
padding-top:clamp(34px,2.6vw,44px);
display:flex;flex-direction:column;gap:clamp(7px,.8vw,11px);
overflow:hidden auto;
}
.tile-recipe .rc-top{
font-size:clamp(.8125rem,1.02vw,1rem);line-height:1.26;max-width:62ch;
font-weight:800;letter-spacing:-.02em;opacity:.84;
}
.rc{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
grid-template-rows:repeat(3,auto);grid-auto-flow:column;
gap:clamp(6px,.7vw,10px) clamp(18px,2vw,30px);
counter-reset:rc;
}
.rc li{
counter-increment:rc;position:relative;
padding-left:clamp(17px,1.5vw,22px);
}
.rc li::before{
content:counter(rc,decimal-leading-zero);
position:absolute;left:0;top:.18em;
font-size:.5rem;font-weight:800;letter-spacing:.06em;opacity:.55;
}
.rc b{
display:block;font-family:var(--display,var(--sans));font-weight:800;
letter-spacing:-.028em;font-size:clamp(.8125rem,1vw,1rem);line-height:1.1;
margin-bottom:.18em;
}
.rc span{
display:block;font-size:clamp(.6875rem,.78vw,.8125rem);line-height:1.3;
opacity:.82;font-weight:600;letter-spacing:-.005em;text-wrap:pretty;
}
.rc span b{font-weight:800;opacity:1}
.rc sub{font-size:.72em;vertical-align:baseline;position:relative;top:.22em}
.tile-recipe .rc-gear{
margin:0;font-size:clamp(.6875rem,.8vw,.84375rem);line-height:1.32;
font-weight:600;letter-spacing:-.005em;opacity:.95;max-width:82ch;
}
.tile-recipe .rc-gear b{font-weight:800}
.tile-recipe .rc-gear a{
color:var(--paper);font-weight:800;text-decoration:underline;
text-decoration-color:rgba(255,255,255,.55);text-underline-offset:.16em;
text-decoration-thickness:.08em;
}
.tile-recipe .rc-gear a:hover,.tile-recipe .rc-gear a:focus-visible{
color:#141516;text-decoration-color:rgba(20,21,22,.8);
}
.tile-recipe .rc-foot{
margin:0;padding-top:clamp(6px,.7vw,10px);
border-top:1px solid rgba(20,21,22,.28);
font-size:clamp(.75rem,.9vw,.9375rem);line-height:1.3;
font-weight:700;letter-spacing:-.015em;max-width:70ch;
}
.tile-recipe .rc-foot b{font-weight:800}
@media (max-width:1180px){ .tile-wide.open .tile-face{width:calc(300% + 4px)} }
@media (max-width:860px){
.tile-wide.open .tile-face{width:calc(200% + 2px)}
.rc{grid-template-columns:1fr}
.tile-recipe .rc-top{display:none}
}
.tile-body b{font-weight:800}
.tile-body a,.tile-body .lk{color:var(--paper);text-decoration-color:rgba(255,255,255,.75)}
@media (max-width:1180px){ .tiles{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:860px){
.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.tile-body p{font-size:1.125rem;line-height:1.22}
}
@media (max-width:460px){
.tile{aspect-ratio:2/3}
.tile-name{font-size:1rem}
.tile-body p{font-size:1rem;line-height:1.22}
}
@media (prefers-reduced-motion:reduce){
.tile-face,.tile-body,.tile-mk{transition-duration:.01ms !important}
}
/* the line under the name on a cover: what we actually did, said quickly */
.wcover .wdid{
margin:.5em 0 0;max-width:58ch;color:color-mix(in srgb,var(--paper) 94%,transparent);
font-family:var(--display,var(--sans));font-weight:700;letter-spacing:-.025em;
font-size:clamp(1rem,1.3vw,1.25rem);line-height:1.3;
text-wrap:pretty;
opacity:0;transform:translateY(12px);
transition:opacity .42s ease .06s,transform .55s cubic-bezier(.16,1,.3,1) .06s;
}
.wcover:hover .wdid,.wcover:focus-visible .wdid,.wcover.open .wdid{opacity:1;transform:none}
@media (min-width:900px){
.wcover-cap .wdid{grid-column:1 / -1;grid-row:2}
}
@media (max-width:899px){
.wcover .wdid{opacity:1;transform:none;font-size:1rem;max-width:none;white-space:normal;overflow:visible;text-wrap:pretty}
}
/* the taxonomy is kept in the markup for the panel to lift, so it has to be
genuinely hidden on the cover — .wcover .wmeta{display:flex} outranks the
plain [hidden] attribute, which is why it was still showing */
.wcover .wmeta[hidden]{display:none !important}
/* sector / platform, now in the panel */
.wp-kicker{
margin:0 0 .25em;display:flex;flex-wrap:wrap;align-items:baseline;gap:.1em 12px;
font-family:var(--display,var(--sans));font-weight:800;letter-spacing:-.015em;
font-size:.8125rem;color:rgba(255,255,255,.66);
}
.wp-kicker span{white-space:nowrap}
.wp-kicker span + span::before{content:"/";color:var(--accent);margin-right:12px}
/* the range gets a title — the lists are the brag, this is the wink */
.sectors-h{
margin:0 0 clamp(22px,2.6vw,38px);
font-family:var(--display,var(--sans));font-weight:800;
letter-spacing:-.045em;line-height:.98;
font-size:clamp(2rem,5.2vw,4rem);color:var(--fg);
}
/* ============================================================
Full pass — design tidy
============================================================ */
/* 1. a inside a lede is accent-coloured — on the red band that is red on
red, and the second half of the On AI lede was simply invisible */
.band-b .lede b,.band-b .row p b,.band-b .say-sm b,.band-b .intro-sub b{color:var(--paper);font-weight:800}
:root[data-theme="light"] .band-b .lede b{color:#141516}
/* 2. the engagement-state tags on Proof are filled for only two of thirteen,
which singles those two out for the wrong reason — hidden until all are in */
.wstate{display:none}
/* 3. the eyebrow is now the page name rather than "We are", so it reads as a
location marker: same size, a touch quieter */
.weare{letter-spacing:.14em}
/* 4. one hover language across the site: every interactive surface uses the
same curve and roughly the same timing */
.lk,.navset a,.next a,.seg-b,.kicker-cta a,.tile,.wp-close,.cform button{
transition-timing-function:cubic-bezier(.16,1,.3,1);
}
/* the capability tiles sit directly under their heading: no band padding
above them, and the heading band gives up most of its bottom padding */
/* #services used to open with the full-bleed tile grid, so it ran flush with
no top padding. It opens with a heading now, which needs the room back. */
#services{padding-top:clamp(58px,9vh,126px)}
#more:has(+ #services){padding-bottom:clamp(44px,7vh,96px)}
/* ============================================================
Project panel — second pass
A film still with a caption, then a clean read. The index and the
taxonomy sit over the foot of the image on a scrim; the read below gets
an eyebrow row with the engagement length set large beside it; and the
pieces arrive in sequence rather than all at once.
============================================================ */
.wpanel{
background:#0b0c0d;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
/* a hairline of accent along the top edge — the one brand mark on the panel */
.wpanel::before{
content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:4;
background:var(--accent);
transform:scaleX(0);transform-origin:left;
transition:transform .7s cubic-bezier(.16,1,.3,1) .25s;
}
.wpanel.open::before{transform:scaleX(1)}
/* the frame */
.wp-shots{position:relative;background:#07080a}
.wp-shots img{
opacity:0;transform:scale(1.03);
transition:opacity .6s ease .18s,transform 1.2s cubic-bezier(.16,1,.3,1) .18s;
}
.wpanel.open .wp-shots img{opacity:1;transform:none}
/* scrim at the foot of the image so the caption reads on any frame */
.wp-shots::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:46%;z-index:1;
pointer-events:none;
background:linear-gradient(to top,rgba(7,8,10,.92) 0%,rgba(7,8,10,.55) 48%,transparent 100%);
}
.wp-over{
position:absolute;left:0;right:0;bottom:0;z-index:2;
padding:0 clamp(22px,3vw,36px) clamp(14px,1.6vw,20px);
display:flex;align-items:baseline;justify-content:space-between;gap:16px;
opacity:0;transform:translateY(8px);
transition:opacity .4s ease .34s,transform .55s cubic-bezier(.16,1,.3,1) .34s;
}
.wpanel.open .wp-over{opacity:1;transform:none}
.wp-idx{
font-weight:800;font-size:.75rem;letter-spacing:.17em;color:rgba(255,255,255,.7);
white-space:nowrap;font-variant-numeric:tabular-nums;
}
.wp-over .wp-kicker{margin:0;color:var(--paper);font-size:.8125rem;justify-content:flex-end;text-align:right}
.wp-over .wp-kicker span + span::before{color:var(--accent)}
/* the read */
.wp-body{
border-top:0;
padding-top:clamp(18px,2.2vw,26px);
gap:clamp(10px,1.2vw,14px);
}
.wp-head{
display:flex;align-items:baseline;justify-content:space-between;gap:16px;
padding-bottom:clamp(10px,1.2vw,14px);
border-bottom:1px solid rgba(255,255,255,.12);
}
.wp-eyebrow{
margin:0;color:var(--accent);
font-weight:800;font-size:.75rem;letter-spacing:.17em;text-transform:uppercase;
}
.wp-dur{
margin:0;color:var(--paper);
font-family:var(--display,var(--sans));font-weight:800;letter-spacing:-.04em;
font-size:clamp(1.25rem,1.9vw,1.75rem);line-height:1;white-space:nowrap;
}
.wp-body .wp-head,.wp-body .wp-text{
opacity:0;transform:translateY(10px);
transition:opacity .4s ease,transform .55s cubic-bezier(.16,1,.3,1);
}
.wpanel.open .wp-body .wp-head{opacity:1;transform:none;transition-delay:.3s}
.wpanel.open .wp-body .wp-text{opacity:1;transform:none;transition-delay:.4s}
@media (max-width:899px){
.wp-over{padding:0 18px 14px}
.wp-over .wp-kicker{font-size:.75rem}
}
@media (prefers-reduced-motion:reduce){
.wpanel::before,.wp-shots img,.wp-over,.wp-body .wp-head,.wp-body .wp-text{transition:none;opacity:1;transform:none}
}
/* ============================================================
ENGAGEMENT PASS
paging in the panel · tile hover · the drawn rule · ruler rails ·
covers that drift with the scroll · the number that counts
============================================================ */
/* ---------- paging inside the panel ---------- */
.wpanel{grid-template-rows:minmax(0,var(--shots,62%)) minmax(0,1fr) auto}
.wp-nav{
grid-row:3;z-index:6;
display:flex;align-items:center;justify-content:flex-end;gap:6px;white-space:nowrap;
padding:7px clamp(14px,1.8vw,24px) 9px;
border-top:1px solid rgba(255,255,255,.1);background:#0b0c0d;
opacity:0;transform:translateY(8px);
transition:opacity .4s ease .4s,transform .55s cubic-bezier(.16,1,.3,1) .4s;
}
.wpanel.open .wp-nav{opacity:1;transform:none}
.wp-over{justify-content:flex-end}
.wp-step{
appearance:none;border:0;background:transparent;color:rgba(255,255,255,.55);
width:30px;height:30px;margin:0 -6px;padding:0;cursor:pointer;display:inline-grid;place-items:center;
border-radius:0;transition:color .25s ease,transform .35s cubic-bezier(.16,1,.3,1);
}
.wp-step svg{width:18px;height:18px;display:block}
.wp-step:hover{color:var(--paper)}
.wp-prev:hover{transform:translateX(-3px)}
.wp-next:hover{transform:translateX(3px)}
.wp-step:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.wp-nav .wp-idx{padding:0 4px}
@media (max-width:899px){
.wp-step{width:36px;height:36px}
.wp-nav{padding-bottom:calc(9px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){ .wp-nav{transition:none;opacity:1;transform:none} }
/* ---------- tiles answer the pointer ---------- */
@media (hover:hover){
.tile:hover .tile-face{background:color-mix(in srgb,var(--raise) 86%,var(--fg))}
.tile:hover .tile-mk{transform:scale(1.25)}
.tile.open:hover .tile-mk{transform:rotate(135deg) scale(1.15)}
.tiles.hasopen .tile:not(.open):hover .tile-face{filter:brightness(.72) saturate(.7)}
.tile.open:hover .tile-face{background:var(--accent)}
}
/* ---------- the drawn rule ----------
One vertical track runs the height of the four moves. It fills as the
reader scrolls, and each move lights the moment the rule reaches it:
a diamond (the mark) and the title come up to full strength. */
.rows.seq{position:relative;padding-left:clamp(34px,3.4vw,52px);border-top:0}
.rows.seq::before,.rows.seq::after{
content:"";position:absolute;top:0;bottom:0;left:7px;width:2px;
}
.rows.seq::before{background:var(--rule-hi)}
.rows.seq::after{
background:var(--accent);transform-origin:top;
transform:scaleY(var(--prog,0));
transition:transform .18s linear;
}
.rows.seq .row{position:relative;border-top:0;transition:border-color .2s,opacity .5s ease}
.rows.seq .row:first-child{padding-top:0}
.rows.seq .row::before{
content:"";position:absolute;top:.62em;width:10px;height:10px;
left:calc(-1 * clamp(34px,3.4vw,52px) + 3px);
transform:rotate(45deg);box-sizing:border-box;
border:2px solid var(--rule-hi);background:var(--bg);z-index:1;
transition:border-color .35s ease,background .35s ease,transform .5s cubic-bezier(.16,1,.3,1);
}
.rows.seq .row:first-child::before{top:.12em}
/* each move is revealed by the rule reaching it: the diamond fills, then the
title and text come up out of the line */
.rows.seq .row h3,.rows.seq .row p{
transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1);
}
.rows.seq .row:not(.lit) h3,.rows.seq .row:not(.lit) p{opacity:0;transform:translateY(16px)}
.rows.seq .row:not(.lit) p{transition-delay:0s}
.rows.seq .row.lit h3{transition-delay:.08s}
.rows.seq .row.lit p{transition-delay:.18s}
.rows.seq .row:not(.lit){border-bottom-color:transparent}
.rows.seq .row.lit::before{border-color:var(--accent);background:var(--accent);transform:rotate(45deg) scale(1.2)}
@media (max-width:720px){ .rows.seq{padding-left:30px} .rows.seq .row::before{left:-27px} }
@media (prefers-reduced-motion:reduce){
.rows.seq::after{transform:scaleY(1);transition:none}
.rows.seq .row:not(.lit) h3,.rows.seq .row:not(.lit) p{opacity:1;transform:none}
.rows.seq .row:not(.lit){border-bottom-color:var(--rule)}
.rows.seq .row::before{border-color:var(--accent);background:var(--accent)}
}
/* ---------- ruler rails ----------
The three background rails pick up tick marks that drift a little slower
than the page, so the content reads as moving over a fixed instrument. */
.fx-grid i{position:relative;overflow:visible}
.fx-grid i::before{
content:"";position:absolute;top:0;bottom:0;left:-4px;width:9px;
background-image:
linear-gradient(to right,var(--rule) 0 100%),
linear-gradient(to right,var(--rule) 0 100%);
background-size:5px 1px,9px 1px;
background-repeat:repeat-y,repeat-y;
background-position:4px calc(var(--sy,0px) * -1),0 calc(var(--sy,0px) * -1);
opacity:.55;
}
.fx-grid i::before{
background-image:
repeating-linear-gradient(to bottom,var(--rule) 0 1px,transparent 1px 36px),
repeating-linear-gradient(to bottom,var(--rule) 0 1px,transparent 1px 180px);
background-size:5px 100%,9px 100%;
background-position:4px calc(var(--sy,0px) * -.38),0 calc(var(--sy,0px) * -.38);
}
@media (prefers-reduced-motion:reduce){ .fx-grid i::before{background-position:4px 0,0 0} }
/* ---------- the number that counts ---------- */
.stat-n{font-variant-numeric:tabular-nums}
/* ---------- launch points (What we do, foot) ---------- */
.launch{list-style:none;margin:clamp(22px,3vw,40px) 0 0;padding:0;border-top:1px solid rgba(255,255,255,.3)}
.launch li{border-bottom:1px solid rgba(255,255,255,.3)}
.launch a{
display:flex;align-items:baseline;justify-content:space-between;gap:24px;
padding:clamp(14px,1.6vw,22px) 0;text-decoration:none;color:var(--paper);
font-family:var(--display,var(--sans));font-weight:800;letter-spacing:-.035em;line-height:1.05;
font-size:clamp(1.375rem,2.8vw,2.5rem);
transition:color .3s ease,padding-left .45s cubic-bezier(.16,1,.3,1);
}
.launch .arw{flex:none;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.launch a:hover,.launch a:focus-visible{color:#141516;padding-left:.25em;outline:0}
.launch a:hover .arw,.launch a:focus-visible .arw{transform:translateX(.25em)}
.launch a:focus-visible{box-shadow:inset 0 -3px 0 #141516}
@media (max-width:720px){ .launch a{font-size:1.375rem;gap:14px} }
@media (prefers-reduced-motion:reduce){ .launch a,.launch .arw{transition:none} }
/* ---------- the three columns of honesty (What we do) ---------- */
.tiers{
display:grid;gap:clamp(22px,3vw,44px);
grid-template-columns:1fr;margin-top:clamp(22px,3vw,40px);
}
.tier h3{
margin:0 0 .5em;font-family:var(--display,var(--sans));font-weight:800;
letter-spacing:-.035em;line-height:1;font-size:clamp(1.75rem,3.2vw,3rem);
}
.tier-x h3{color:var(--accent)}
.tier-no h3{color:var(--dim)}
.tier ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.tier li{
padding:14px 0;border-bottom:1px solid var(--rule);
font-weight:600;font-size:clamp(1.0625rem,1.25vw,1.1875rem);line-height:1.3;
display:flex;gap:14px;align-items:baseline;transition:border-color .2s;
}
.tier li::before{
content:"";flex:none;width:8px;height:8px;transform:rotate(45deg) translateY(-1px);
border:1.5px solid var(--accent);box-sizing:border-box;
}
.tier-x li::before{background:var(--accent)}
.tier-no li{color:var(--dim);font-weight:500}
.tier-no li::before{border-color:var(--rule-hi);transform:rotate(45deg) translateY(-1px)}
.tier li:hover{border-bottom-color:var(--rule-hi)}
@media (min-width:900px){ .tiers{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* ---------- form states ---------- */
.field input.bad,.field textarea.bad{border-color:var(--accent)}
.cform.sent .send{background:var(--fg);color:var(--bg);cursor:default}
#cta .intro-sub{width:auto;margin-left:0;max-width:48ch}
/* ============================================================
THE TAKEOVER
A project opens over the whole screen on every size: the frame on the
left, the read on the right, a big X top right to get back to the stack.
The phone keeps its stacked sheet (frame over read) below 900px.
============================================================ */
body.coverpanel{overflow:hidden}
body.coverpanel > main{z-index:100;animation:none;transform:none}
.wcover.open{height:clamp(320px,66vh,780px)}
.wcover.open .wcover-img{transform:scale(1.02)}
.wcovers.hasopen .wcover:not(.open){filter:none}
.wpanel{
position:fixed;inset:0;width:100%;height:100%;
background:#0a0b0c;box-shadow:none;border:0;
display:grid;
grid-template-columns:minmax(0,57fr) minmax(0,43fr);
grid-template-rows:minmax(0,1fr) auto;
opacity:0;visibility:hidden;
transform:translateY(14px) scale(.992);
transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .36s ease,visibility 0s linear .6s;
}
.wpanel.open{
opacity:1;visibility:visible;transform:none;
transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .34s ease,visibility 0s;
}
.wpanel::before{height:4px}
.wp-shots{
grid-column:1;grid-row:1/3;min-height:0;
padding:clamp(40px,5.5vw,96px) clamp(32px,4vw,72px) clamp(56px,6vw,96px);
background:#0a0b0c;
}
.wp-shots img{object-fit:contain;background:transparent}
.wp-shots::after{height:30%}
.wp-over{padding:0 clamp(32px,4vw,72px) clamp(20px,2.2vw,30px)}
.wp-over .wp-kicker{font-size:.875rem}
.wp-body{
grid-column:2;grid-row:1;min-height:0;
border-top:0;border-left:1px solid rgba(255,255,255,.1);
padding:clamp(72px,8.5vw,120px) clamp(28px,3.6vw,56px) clamp(28px,3vw,44px) clamp(28px,3.6vw,56px);
gap:clamp(10px,1.2vw,16px);
}
.wp-name{
display:block;margin:.12em 0 .3em;
font-size:clamp(2rem,3.8vw,3.75rem);letter-spacing:-.045em;line-height:.96;
}
.wp-did{
margin:0 0 .6em;color:var(--paper);
font-family:var(--display,var(--sans));font-weight:700;letter-spacing:-.025em;
font-size:clamp(1.125rem,1.5vw,1.5rem);line-height:1.2;text-wrap:balance;
}
.wp-did .hl{color:var(--accent)}
.wp-text p{font-size:clamp(1rem,1.18vw,1.3125rem);line-height:1.46}
.wp-nav{grid-column:2;grid-row:2;border-left:1px solid rgba(255,255,255,.1)}
/* the way back */
.wp-close{
top:clamp(18px,2.4vw,32px);right:clamp(18px,2.4vw,32px);
width:clamp(52px,4.8vw,76px);height:clamp(52px,4.8vw,76px);
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.24);
transition:background .25s ease,transform .45s cubic-bezier(.16,1,.3,1),border-color .25s ease;
}
.wp-close svg{width:38%;height:38%}
.wp-close:hover{background:var(--accent);border-color:var(--accent);transform:rotate(90deg)}
@media (max-width:899px){
.wpanel{
grid-template-columns:minmax(0,1fr);
grid-template-rows:minmax(0,var(--shots,62%)) minmax(0,1fr) auto;
}
.wp-shots{grid-column:1;grid-row:1;padding:0}
.wp-shots img{background:#0a0b0c}
.wp-shots::after{height:46%}
.wp-over{padding:0 18px 14px}
.wp-body{
grid-column:1;grid-row:2;border-left:0;border-top:1px solid rgba(255,255,255,.12);
padding:20px 22px calc(24px + env(safe-area-inset-bottom,0px));
}
.wp-name{font-size:clamp(1.5rem,6.4vw,2rem)}
.wp-did{font-size:1.0625rem}
.wp-nav{grid-column:1;grid-row:3;border-left:0}
.wp-close{width:48px;height:48px;top:calc(14px + env(safe-area-inset-top,0px));right:14px}
}
@media (prefers-reduced-motion:reduce){
.wpanel,.wpanel.open{transition:none;transform:none}
}
/* ---------- one panel, swapped content ---------- */
.wp-stage{display:contents}
.wpanel .wp-shots,.wpanel .wp-body{
transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .4s ease;
}
/* leaving: the way you are going */
.wpanel.swap-next .wp-stage.out .wp-shots,.wpanel.swap-next .wp-stage.out .wp-body{transform:translateX(-7%);opacity:0;transition-duration:.34s,.26s}
.wpanel.swap-prev .wp-stage.out .wp-shots,.wpanel.swap-prev .wp-stage.out .wp-body{transform:translateX(7%);opacity:0;transition-duration:.34s,.26s}
/* arriving: from the other side, no transition on the start frame */
.wpanel.swap-next .wp-stage.in .wp-shots,.wpanel.swap-next .wp-stage.in .wp-body{transform:translateX(7%);opacity:0;transition:none}
.wpanel.swap-prev .wp-stage.in .wp-shots,.wpanel.swap-prev .wp-stage.in .wp-body{transform:translateX(-7%);opacity:0;transition:none}
.wpanel .wp-body{transition-delay:.06s}
/* the frame's own entrance only runs on first open, not on every page turn */
.wpanel.swap-next .wp-shots img,.wpanel.swap-prev .wp-shots img,
.wpanel.swap-next .wp-over,.wpanel.swap-prev .wp-over,
.wpanel.swap-next .wp-head,.wpanel.swap-prev .wp-head,
.wpanel.swap-next .wp-text,.wpanel.swap-prev .wp-text{transition:none;opacity:1;transform:none}
/* ---------- paging: square, prominent, with a hover ---------- */
.wp-nav{gap:14px;padding:12px clamp(14px,1.8vw,24px) 14px}
.wp-step{
width:clamp(48px,4vw,60px);height:clamp(48px,4vw,60px);margin:0;border-radius:0;
border:1px solid rgba(255,255,255,.28);color:var(--paper);background:rgba(255,255,255,.05);
transition:background .22s ease,border-color .22s ease,color .22s ease,transform .4s cubic-bezier(.16,1,.3,1);
}
.wp-step svg{width:42%;height:42%}
.wp-step:hover,.wp-step:focus-visible{background:var(--accent);border-color:var(--accent);color:var(--paper);outline:0}
.wp-prev:hover{transform:translateX(-3px)}
.wp-next:hover{transform:translateX(3px)}
.wp-step:active{transform:scale(.94)}
.wp-nav .wp-idx{padding:0 6px;font-size:.8125rem;color:rgba(255,255,255,.75)}
@media (max-width:899px){
.wp-step{width:46px;height:46px}
.wp-nav{gap:10px;padding:10px 14px calc(12px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){
.wpanel .wp-shots,.wpanel .wp-body,.wp-step{transition:none}
}
/* ---------- the frames: hero on top, square tiles under it ---------- */
.wpanel .wp-shots{
display:block;overflow:hidden auto;overscroll-behavior:contain;
grid-template-columns:none;grid-template-rows:none;gap:0;
-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 40px),transparent 100%);
mask-image:linear-gradient(to bottom,#000 calc(100% - 40px),transparent 100%);
}
.wpanel .wp-shots::after{display:none}
.wpanel .wp-shots::-webkit-scrollbar{width:9px}
.wpanel .wp-shots::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:9px}
.wp-hero{
position:relative;width:100%;aspect-ratio:var(--hero-ar,16/10);
max-height:min(50vh,700px);
background:#0a0b0c;
}
.wp-hero img{
position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
transition:opacity .22s ease,transform .5s cubic-bezier(.16,1,.3,1);
}
.wp-hero.swap img{opacity:0;transform:scale(.985)}
.wpanel .wp-shots .wp-kicker{
margin:clamp(12px,1.4vw,18px) 0 0;color:color-mix(in srgb,var(--paper) 85%,transparent);font-size:.8125rem;
justify-content:flex-start;text-align:left;
}
.wp-tiles{
display:grid;gap:clamp(8px,.9vw,14px);margin-top:clamp(14px,1.6vw,22px);
grid-template-columns:repeat(3,minmax(0,1fr));
}
.wp-tile{
appearance:none;margin:0;padding:0;border:1px solid rgba(255,255,255,.1);
background:#0e0f11;aspect-ratio:1/1;overflow:hidden;cursor:pointer;position:relative;
transition:border-color .25s ease;
}
.wp-tile::after{
content:"";position:absolute;inset:0;pointer-events:none;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),inset 0 -40px 60px -30px rgba(0,0,0,.5);
}
.wp-tile img{
display:block;width:100%;height:100%;object-fit:cover;object-position:center top;
transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .25s ease;
}
.wp-tile:hover{border-color:rgba(255,255,255,.4)}
.wp-tile:hover img{transform:scale(1.04)}
.wp-tile:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.wpanel.open .wp-tile img{opacity:1}
@media (max-width:899px){
/* one scrolling column on a phone: frames, then the read */
.wpanel{grid-template-rows:minmax(0,1fr) auto}
.wp-stage{display:block;grid-row:1;min-height:0;overflow:hidden auto;overscroll-behavior:contain}
.wpanel .wp-shots{overflow:visible;-webkit-mask-image:none;mask-image:none;padding:0 0 4px}
.wp-hero{max-height:none}
.wpanel .wp-shots .wp-kicker{margin:10px 18px 0}
.wp-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:12px 18px 0}
.wp-body{overflow:visible;-webkit-mask-image:none;mask-image:none;min-height:0}
.wp-nav{grid-row:2}
}
@media (min-width:900px) and (max-width:1280px){ .wp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (prefers-reduced-motion:reduce){ .wp-hero img,.wp-tile img{transition:none} }
/* ============================================================
THE TWO-MINUTE PASS
a way to reach out wherever a reader stops: the nav, the hero, the foot
============================================================ */
.navset .nav-cta{
color:var(--fg);border:1px solid var(--accent);padding:7px 13px;
text-decoration:none;font-weight:700;line-height:1;
transition:background .22s ease,color .22s ease,border-color .22s ease;
}
.navset .nav-cta:hover,.navset .nav-cta:focus-visible{background:var(--accent);color:var(--paper)}
.navset .nav-cta[aria-current="page"]{background:var(--accent);color:var(--paper);text-decoration:none}
@media (max-width:759px){
.navset .nav-cta{border:0;padding:0;color:var(--accent)}
.navset .nav-cta:hover{background:transparent;color:var(--fg)}
}
/* hero: say hello / see the proof */
.hero-cta{
display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;
margin:clamp(20px,2.6vw,34px) 0 0;
}
.btn{
display:inline-flex;align-items:center;gap:.6em;
background:var(--accent);color:var(--paper);text-decoration:none;
font-family:var(--display,var(--sans));font-weight:800;letter-spacing:-.02em;
font-size:clamp(1rem,1.2vw,1.125rem);line-height:1;
padding:.95em 1.3em;
transition:transform .35s cubic-bezier(.16,1,.3,1),background .22s ease,gap .35s cubic-bezier(.16,1,.3,1);
}
.btn .arw{transition:transform .35s cubic-bezier(.16,1,.3,1)}
.btn:hover,.btn:focus-visible{background:color-mix(in srgb,var(--accent) 86%,#000);gap:.85em;outline:0}
.btn:hover .arw{transform:translateX(2px)}
.btn-q{
color:var(--fg);text-decoration:underline;text-decoration-color:var(--rule-hi);text-underline-offset:.22em;
font-weight:700;font-size:clamp(1rem,1.2vw,1.125rem);transition:text-decoration-color .2s ease,color .2s ease;
}
.btn-q:hover{text-decoration-color:var(--accent);color:var(--accent)}
@media (min-width:1080px){ .hero.home .hero-cta{grid-column:2;align-self:end;margin:0 0 .6em} .hero.home .herolede{margin-bottom:.35em} }
@media (max-width:1079px){ .hero.home{padding-bottom:clamp(64px,10vw,96px)} }
.intro-sub.signpost{margin-top:clamp(12px,1.4vw,18px)}
@media (min-width:1000px){ .intro-sub.signpost{margin-top:14px} }
/* proof, briefly */
/* the three on the front page: full-bleed covers, name and line sitting in
the lower left on a scrim, the same grammar as the Proof page */
.proofs{
display:grid;grid-template-columns:1fr;gap:2px;
width:100vw;margin-left:calc(50% - 50vw);margin-top:clamp(22px,3vw,40px);
}
.proof{
position:relative;display:block;overflow:hidden;text-decoration:none;color:var(--paper);
aspect-ratio:4/3;background:var(--raise);
}
.proof-img{position:absolute;inset:0;display:block}
.proof-img img{
display:block;width:100%;height:100%;object-fit:cover;object-position:center 40%;
filter:saturate(.92);transform:scale(1.02);
transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .5s ease;
}
.proof::after{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(to top,
rgba(8,9,10,.84) 0%, rgba(8,9,10,.48) 36%, rgba(8,9,10,.16) 70%, rgba(8,9,10,.08) 100%);
transition:opacity .4s ease;
}
.proof:hover .proof-img img{transform:scale(1.07);filter:saturate(1)}
.proof-cap{
position:absolute;left:clamp(18px,2vw,32px);right:clamp(18px,2vw,32px);bottom:clamp(16px,1.8vw,28px);
z-index:2;display:flex;flex-direction:column;gap:clamp(8px,.9vw,12px);
}
.proof-name{
display:block;margin:0;
font-family:var(--display,var(--sans));font-weight:800;letter-spacing:-.035em;
font-size:clamp(1.5rem,2.4vw,2.25rem);line-height:1;
transition:color .3s ease;
}
.proof-did{
display:block;margin:0;
color:color-mix(in srgb,var(--paper) 90%,transparent);font-size:clamp(.9375rem,1.05vw,1.0625rem);line-height:1.4;
max-width:36ch;
}
.proof:hover .proof-name{color:var(--accent)}
@media (min-width:700px){ .proofs{grid-template-columns:repeat(3,minmax(0,1fr))} .proof{aspect-ratio:3/4} }
@media (min-width:1100px){ .proof{aspect-ratio:4/5} }
/* the foot */
footer .foot-cta{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px;
padding-block:clamp(36px,5vw,64px) clamp(8px,1vw,12px);color:var(--fg);
}
.foot-k{
margin:0;font-family:var(--display,var(--sans));font-weight:800;letter-spacing:-.04em;line-height:1;
font-size:clamp(1.75rem,3.6vw,3.25rem);
}
.foot-k .hl{color:var(--accent)}
.foot-go{
display:inline-flex;align-items:center;gap:.6em;color:var(--fg);text-decoration:none;
font-family:var(--display,var(--sans));font-weight:800;letter-spacing:-.02em;
font-size:clamp(1.25rem,2vw,1.75rem);line-height:1;
border-bottom:3px solid var(--accent);padding-bottom:.18em;
transition:color .22s ease,gap .35s cubic-bezier(.16,1,.3,1);
}
.foot-go .arw{transition:transform .35s cubic-bezier(.16,1,.3,1)}
.foot-go:hover{color:var(--accent);gap:.9em}
.foot-go:hover .arw{transform:translateX(2px)}
footer .wrap + .wrap{padding-top:18px}
@media (prefers-reduced-motion:reduce){ .btn,.btn .arw,.foot-go,.foot-go .arw,.proof-img img{transition:none} }
/* ---------- the long read: context, the challenge, what shaped it ---------- */
.wp-text h5{
margin:1.1em 0 .4em;color:var(--accent);
font-weight:800;font-size:.75rem;letter-spacing:.17em;text-transform:uppercase;
}
.wp-text h5:first-child{margin-top:0}
.wp-text ul{list-style:none;margin:0 0 .9em;padding:0;border-top:1px solid rgba(255,255,255,.12)}
.wp-text li{
padding:.55em 0 .55em 18px;position:relative;border-bottom:1px solid rgba(255,255,255,.12);
color:color-mix(in srgb,var(--paper) 82%,transparent);font-weight:500;letter-spacing:-.01em;
font-size:clamp(.9375rem,1.05vw,1.125rem);line-height:1.42;
}
.wp-text li::before{
content:"";position:absolute;left:1px;top:1.05em;width:7px;height:7px;
background:var(--accent);transform:rotate(45deg);
}
.wp-text li b{color:var(--paper);font-weight:700}
.wp-text p.wp-last{
margin-top:1em;padding-top:.9em;border-top:1px solid rgba(255,255,255,.12);
color:var(--paper);font-weight:700;
}
@media (max-width:899px){ .wp-text li{font-size:1rem} }
/* ---------- the real mark ---------- */
.brandmark{gap:13px;color:var(--fg)}
.brandmark .bm-m{height:38px;width:auto;display:block;flex:none}
.brandmark .bm-w{height:16px;width:auto;display:block;flex:none;color:currentColor}
@media (max-width:759px){ .brandmark{gap:11px} .brandmark .bm-m{height:32px} .brandmark .bm-w{height:13px} }
footer .foot-id{align-items:center;gap:10px 22px}
footer .foot-m{height:36px;width:auto;display:block;flex:none;margin-right:2px}
.foot-c{white-space:nowrap}
.foot-c .inf{color:var(--accent);font-weight:700;letter-spacing:.04em}
/* ---------- an anecdote, told straight ---------- */
.anec{
margin:clamp(28px,3.6vw,48px) 0 0;padding:0 0 0 clamp(20px,2.4vw,34px);
border-left:3px solid var(--accent);max-width:62ch;
}
.anec p{margin:0 0 .8em;color:var(--dim);font-size:clamp(1rem,1.15vw,1.0625rem);line-height:1.6}
.anec p:last-child{margin-bottom:0}
.anec-k{
color:var(--accent) !important;font-weight:800;font-size:.75rem;
letter-spacing:.17em;text-transform:uppercase;margin-bottom:.9em !important;
}
.anec-q{
color:var(--fg) !important;
font-family:var(--display,var(--sans));font-weight:800;letter-spacing:-.03em;
font-size:clamp(1.25rem,2.1vw,1.875rem) !important;line-height:1.15 !important;
margin:.55em 0 .7em !important;text-wrap:pretty;
}
.band-b .anec p{color:color-mix(in srgb,var(--paper) 88%,transparent)}
.band-b .anec-k{color:#141516 !important}
.band-b .anec-q{color:var(--paper) !important}
/* ---------- the value equation ---------- */
.formula{
display:flex;flex-wrap:wrap;align-items:baseline;gap:.22em .42em;
margin:clamp(30px,4vw,52px) 0 clamp(18px,2.2vw,28px);
font-family:var(--display,var(--sans));font-weight:800;letter-spacing:-.035em;
font-size:clamp(1.375rem,3.1vw,2.75rem);line-height:1.08;color:var(--fg);
}
.formula i{font-style:normal;color:var(--accent);font-weight:700}
.formula i.eq{margin:0 .1em}
.formula b{color:var(--accent);font-weight:800}
.band-b .formula{color:var(--paper)}
.band-b .formula i,.band-b .formula b{color:#141516}
@media (max-width:560px){ .formula{font-size:1.25rem;gap:.2em .34em} }
/* ============================================================
CONNECT THE DOTS
Pick a capability; the ones it travels with appear, and a line is drawn
from where you were to where you went.
============================================================ */
#combos{margin-top:clamp(24px,3.2vw,40px)}
/* the builder sits in the tiles section's own header, so the list below it
needs a hard break — a rule and a second mode label — or the two read as
one undifferentiated pile of capability names. */
.mode-2{
margin-top:clamp(52px,6vw,88px);padding-top:clamp(20px,2.4vw,30px);
border-top:1px solid var(--rule);color:var(--muted)
}
#services .mode-2 + .tiles{margin-top:clamp(14px,1.8vw,22px)}
.cb-chips{
position:relative;display:flex;flex-wrap:wrap;gap:34px 10px;padding-bottom:26px;
}
.cb-wires{position:absolute;left:0;top:0;pointer-events:none;z-index:0;overflow:visible}
.cb-wire{stroke:var(--accent);stroke-width:1.75;fill:none;opacity:.9;stroke-linecap:round}
.cb-dot{fill:var(--accent)}
.cb-dot.now{fill:var(--accent);stroke:var(--bg);stroke-width:2}
.cb-chip{
position:relative;z-index:1;
font:inherit;font-family:var(--display,var(--sans));font-weight:800;
letter-spacing:-.02em;font-size:clamp(.9375rem,1.15vw,1.0625rem);line-height:1;
color:var(--fg);background:var(--raise);border:1px solid var(--rule-hi);
padding:.75em 1em;cursor:pointer;
transition:background .22s ease,border-color .22s ease,color .22s ease,transform .3s cubic-bezier(.16,1,.3,1);
}
.cb-chip:hover{border-color:var(--accent);transform:translateY(-2px)}
.cb-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cb-chip.been{border-color:var(--accent);color:var(--accent)}
.cb-chip.on{background:var(--accent);border-color:var(--accent);color:var(--paper);transform:none}
.cb-chip.cb-sm{padding:.6em .85em;font-size:.9375rem}
.cb-out{margin-top:clamp(20px,2.6vw,32px);opacity:0;transform:translateY(10px)}
.cb-out.in{opacity:1;transform:none;transition:opacity .4s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.cb-out:empty{display:none}
.cb-k{
margin:0 0 .5em;color:var(--accent);font-weight:800;font-size:.6875rem;
letter-spacing:.2em;text-transform:uppercase;
}
.cb-k2{margin-top:1.4em}
.cb-name{
margin:0 0 .35em;font-family:var(--display,var(--sans));font-weight:800;
letter-spacing:-.04em;line-height:1;font-size:clamp(1.625rem,3.2vw,2.75rem);
}
.cb-line{margin:0;max-width:52ch;color:var(--dim);font-size:clamp(1rem,1.2vw,1.125rem);line-height:1.55}
.cb-next{display:flex;flex-wrap:wrap;gap:9px}
.cb-work{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5em;margin:0}
.cb-work b{
font-family:var(--display,var(--sans));font-weight:800;letter-spacing:-.03em;
font-size:clamp(1.0625rem,1.5vw,1.375rem);color:var(--fg);
}
.cb-work i{font-style:normal;color:var(--rule-hi)}
.cb-mode{margin:1.1em 0 0;font-weight:700}
.cb-path{
display:flex;flex-wrap:wrap;align-items:baseline;gap:.45em;
margin:clamp(20px,2.4vw,30px) 0 0;padding-top:clamp(14px,1.8vw,20px);
border-top:1px solid var(--rule);
}
.cb-path .cb-k{margin:0 .4em 0 0}
.cb-path b{font-weight:700;font-size:.9375rem;color:var(--fg)}
.cb-path i{font-style:normal;color:var(--accent)}
.cb-cta{
margin:1em 0 0;font-family:var(--display,var(--sans));font-weight:800;
letter-spacing:-.025em;font-size:clamp(1.0625rem,1.5vw,1.3125rem);color:var(--fg);
}
.cb-cta a{
color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;gap:.4em;
border-bottom:2px solid var(--accent);padding-bottom:.06em;transition:gap .35s cubic-bezier(.16,1,.3,1);
}
.cb-cta a:hover{gap:.7em}
@media (max-width:560px){
.cb-chips{gap:8px}
.cb-chip{font-size:.875rem;padding:.7em .85em}
.cb-chip.cb-sm{font-size:.8125rem}
}
@media (prefers-reduced-motion:reduce){
.cb-chip,.cb-out,.cb-out.in,.cb-cta a{transition:none}
.cb-out{opacity:1;transform:none}
}
/* the generated engagement */
/* The plan runs left to right: it is a sequence, and a stack of four rows
next to a column of white space was hiding that. The rule across the top
with a dot per step is the same connect-the-dots motif as the chips. */
.cb-plan{
list-style:none;counter-reset:cbm;margin:0;padding:0;
display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
gap:0 clamp(18px,2.2vw,34px);
}
.cb-plan li{
counter-increment:cbm;position:relative;
padding:clamp(24px,2.4vw,32px) 0 clamp(10px,1.2vw,16px);
border-top:1px solid var(--rule);
}
.cb-plan li::before{
content:counter(cbm,decimal-leading-zero);position:absolute;left:0;
top:clamp(10px,1.1vw,14px);
color:var(--accent);font-weight:800;font-size:.6875rem;letter-spacing:.14em;
font-variant-numeric:tabular-nums;
}
/* the dot sits on the rule, where the step begins */
.cb-plan li::after{
content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;
background:var(--accent);transform:rotate(45deg);
}
.cb-plan h4{
margin:0 0 .34em;font-family:var(--display,var(--sans));font-weight:800;
letter-spacing:-.032em;font-size:clamp(1.0625rem,1.35vw,1.25rem);line-height:1.08;
}
.cb-plan p{
margin:0;color:var(--dim);
font-size:clamp(.875rem,.98vw,.9375rem);line-height:1.4;max-width:40ch;
}
.cb-in{display:flex;flex-wrap:wrap;gap:6px;margin-top:.75em !important}
.cb-in b{
font-weight:800;font-size:.75rem;letter-spacing:-.01em;color:var(--paper);
background:var(--accent);padding:.42em .62em;line-height:1;
}
@media (max-width:620px){
.cb-plan{grid-template-columns:1fr;gap:0}
.cb-plan p{max-width:60ch}
}
.cb-foot{margin:1em 0 0;color:var(--dim);font-size:.9375rem;font-style:italic}
.cb-send{
margin-top:clamp(22px,2.8vw,34px);padding-top:clamp(18px,2.2vw,26px);
border-top:2px solid var(--accent);
display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;
}
.cb-sent{
flex:1 1 320px;margin:0;color:var(--fg);
font-family:var(--display,var(--sans));font-weight:700;letter-spacing:-.02em;
font-size:clamp(1.0625rem,1.5vw,1.3125rem);line-height:1.25;
}
.cb-go{
display:inline-flex;align-items:center;gap:.6em;flex:none;
background:var(--accent);color:var(--paper);text-decoration:none;
font-family:var(--display,var(--sans));font-weight:800;letter-spacing:-.02em;
font-size:clamp(1rem,1.2vw,1.0625rem);line-height:1;padding:.95em 1.25em;
transition:gap .35s cubic-bezier(.16,1,.3,1),background .22s ease;
}
.cb-go:hover{gap:.9em;background:color-mix(in srgb,var(--accent) 86%,#000)}
.cb-reset{
appearance:none;border:0;background:none;cursor:pointer;flex:none;
font:inherit;font-weight:700;font-size:.875rem;color:var(--dim);
text-decoration:underline;text-underline-offset:.2em;padding:0;
}
.cb-reset:hover{color:var(--accent)}
@media (prefers-reduced-motion:reduce){ .cb-go{transition:none} }
/* ---------- inline links read white, underlined in brand red ----------
The accent was doing two jobs at once: marking a link and marking emphasis.
White text on a red underline keeps the signal and stops sentences from
going pink wherever a link happens to sit. */
.lk{color:var(--fg);font-weight:700;text-decoration-color:var(--accent);text-decoration-thickness:.1em}
.lk:hover,.lk:focus-visible{color:var(--accent);text-decoration-color:var(--accent)}
.band-b .lk{color:var(--paper);text-decoration-color:rgba(20,21,22,.85)}
.band-b .lk:hover,.band-b .lk:focus-visible{color:var(--paper);text-decoration-color:#141516;text-decoration-thickness:3px}
.cb-mode .lk,.cb-line .lk{color:var(--fg)}
/* ============================================================
FIELD NOTES
The interrogation cascade: four narrowing questions, stepped in, each
one a shade quieter, then the one that actually matters at full volume.
============================================================ */
.probe{
margin:clamp(22px,2.8vw,34px) 0 clamp(26px,3vw,38px);
font-family:var(--display,var(--sans));font-weight:800;letter-spacing:-.03em;
line-height:1.12;
}
.probe span,.probe b{display:block}
.probe span{
font-size:clamp(1.0625rem,1.9vw,1.5rem);color:var(--muted);
margin-bottom:.22em;
}
.probe span:nth-child(1){padding-left:0;opacity:.95}
.probe span:nth-child(2){padding-left:.9em;opacity:.8}
.probe span:nth-child(3){padding-left:1.8em;opacity:.65}
.probe span:nth-child(4){padding-left:2.7em;opacity:.5}
.probe b{
margin-top:.34em;font-size:clamp(1.875rem,4.4vw,3.5rem);
letter-spacing:-.045em;color:var(--fg);font-weight:800;
}
.probe b i{font-style:normal;color:var(--accent)}
.band-b .probe span{color:rgba(255,255,255,.72)}
.band-b .probe b{color:var(--paper)}
.band-b .probe b i{color:#141516}
@media (max-width:640px){
.probe span:nth-child(2){padding-left:.6em}
.probe span:nth-child(3){padding-left:1.2em}
.probe span:nth-child(4){padding-left:1.8em}
}
@media (prefers-reduced-motion:no-preference){
.probe span,.probe b{opacity:0;transform:translateY(8px)}
.probe.lit span,.probe.lit b{
opacity:1;transform:none;
transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1);
}
.probe.lit span:nth-child(1){transition-delay:.04s;opacity:.95}
.probe.lit span:nth-child(2){transition-delay:.16s;opacity:.8}
.probe.lit span:nth-child(3){transition-delay:.28s;opacity:.65}
.probe.lit span:nth-child(4){transition-delay:.4s;opacity:.5}
.probe.lit b{transition-delay:.58s}
}
/* The mark ships in its two reds, which is red on red once the page inverts.
On the red pages it goes to ink — same facet break, values inverted, so the
geometry still reads as one solid object. CSS fill beats the attribute. */
body.invert .bm-m path:first-of-type,
body.invert .foot-m path:first-of-type{fill:#45484A}
body.invert .bm-m path:last-of-type,
body.invert .foot-m path:last-of-type{fill:#0A0B0B}
/* ============================================================
WHERE THE WORK HAS BEEN
A list of places set as a run rather than a sentence, so the spread
registers before anyone reads the individual names.
============================================================ */
.places-k{
margin:clamp(26px,3vw,40px) 0 clamp(10px,1.1vw,15px);
font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
font-weight:800;color:var(--accent);
}
body.invert .places-k{color:#141516}
.places{
margin:0;display:flex;flex-wrap:wrap;gap:clamp(16px,1.9vw,26px) 0;
}
.pl{
display:flex;flex-direction:column;flex:none;
padding:0 clamp(15px,1.8vw,26px);
border-left:1px solid var(--rule);
}
.pl:first-child{padding-left:0;border-left:0}
.pl b{
font-family:var(--display,var(--sans));font-weight:800;
letter-spacing:-.035em;line-height:1.02;
font-size:clamp(1.125rem,2.3vw,2rem);
}
.pl i{
font-style:normal;margin-top:.5em;
font-size:.625rem;letter-spacing:.17em;text-transform:uppercase;
font-weight:800;opacity:.62;
}
@media (max-width:640px){
.places{gap:14px 0}
.pl{padding:0 13px}
.pl b{font-size:1.0625rem}
.pl i{font-size:.5625rem;letter-spacing:.14em}
}
/* ============================================================
THE OPEN OFFER
An aside, not a band — it is a favour on offer rather than another
claim, so it sits in the margin of the argument instead of in its line.
============================================================ */
.callout{
margin:clamp(34px,4.2vw,62px) 0 clamp(6px,1vw,14px);
padding:clamp(26px,3vw,44px) clamp(24px,2.8vw,42px);
background:var(--raise);border-left:4px solid var(--accent);
display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
gap:clamp(24px,3.4vw,58px);align-items:start;
}
.co-k{
margin:0 0 clamp(9px,1vw,14px);color:var(--accent);
font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;
}
.co-h{
margin:0 0 clamp(14px,1.5vw,22px);
font-family:var(--display,var(--sans));font-weight:800;
letter-spacing:-.042em;line-height:.98;
font-size:clamp(1.625rem,3.4vw,3rem);color:var(--fg);text-wrap:balance;
}
.co-close{
margin:0;font-family:var(--display,var(--sans));font-weight:800;
letter-spacing:-.025em;line-height:1.18;
font-size:clamp(1rem,1.35vw,1.25rem);color:var(--fg);
}
.co-close b{color:var(--accent)}
.co-cta{margin:clamp(16px,1.8vw,26px) 0 0}
.co-cta a{
display:inline-flex;align-items:center;gap:.55em;
font-family:var(--display,var(--sans));font-weight:800;
font-size:clamp(.9375rem,1.1vw,1.125rem);letter-spacing:-.02em;
color:var(--fg);text-decoration:none;
border-bottom:2px solid var(--accent);padding-bottom:.18em;
}
.co-cta a:hover,.co-cta a:focus-visible{color:var(--accent)}
.co-cta .arw{transition:transform .35s cubic-bezier(.16,1,.3,1)}
.co-cta a:hover .arw{transform:translateX(5px)}
/* the two offers, one under the other, each clearly its own thing */
.co-item + .co-item{
margin-top:clamp(18px,2vw,28px);padding-top:clamp(18px,2vw,28px);
border-top:1px solid var(--rule);
}
.co-lbl{
margin:0 0 .5em;color:var(--accent);
font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;
}
.co-p{
margin:0 0 .7em;max-width:50ch;
font-size:clamp(.9375rem,1.08vw,1.0625rem);line-height:1.42;
font-weight:600;letter-spacing:-.012em;color:var(--dim);text-wrap:pretty;
}
.co-p:last-child{margin-bottom:0}
.co-p b{font-weight:800;color:var(--fg)}
@media (max-width:860px){
.callout{grid-template-columns:1fr;gap:clamp(20px,3vw,30px)}
.co-cta{margin-bottom:4px}
}
@media (max-width:640px){ .callout{border-left-width:3px} }
.cb-foot a{color:var(--fg);font-weight:800;text-decoration:underline;
text-decoration-color:var(--accent);text-decoration-thickness:.09em;text-underline-offset:.16em}
.cb-foot a:hover,.cb-foot a:focus-visible{color:var(--accent)}
.cb-plan sub{font-size:.72em;vertical-align:baseline;position:relative;top:.22em}
/* The nav finishes flush with the right edge of the page content. The theme
switch is one icon just ahead of the button: a circle half filled, which
turns over as the page does. */
.navset{margin-left:auto}
.modeswap{
-webkit-appearance:none;appearance:none;background:none;border:0;padding:3px;
margin:0 2px 0 0;cursor:pointer;color:var(--dim);line-height:0;
display:inline-flex;align-items:center;flex:none;
transition:color .22s ease;
}
.modeswap svg{
width:19px;height:19px;display:block;
transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.modeswap:hover,.modeswap:focus-visible{color:var(--accent)}
.modeswap:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:50%}
.modeswap[aria-pressed="true"] svg{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){ .modeswap svg{transition:none} }
/* ============================================================
THE THREE MODES, SIDE BY SIDE
Three bands stacked made you scroll past two of them to compare. As a row
they are comparable at a glance; hovering one gives it the room to explain
itself and turns it red, the same gesture the capability tiles use.
The body is always laid out and only faded, so nothing reflows on hover.
============================================================ */
.mcards{
display:flex;gap:2px;
width:100vw;margin-left:calc(50% - 50vw);
/* fixed, not min: the header text wraps taller in a narrowed card, so any
content-driven height makes the whole row jump as the cursor crosses it */
height:clamp(580px,42vw,620px);
}
.mcard{
position:relative;flex:1 1 0;min-width:0;
background:var(--raise);
padding:clamp(22px,2.4vw,38px) clamp(20px,2vw,32px);
display:flex;flex-direction:column;overflow:hidden;
cursor:default;outline:none;
transition:flex-grow .55s cubic-bezier(.16,1,.3,1),background .4s ease;
}
.mcards:hover .mcard,.mcards:focus-within .mcard{flex-grow:.82}
/* .mcards:hover .mcard is (0,3,0); this has to match it or the shrink wins */
.mcards:hover .mcard:hover,.mcards:focus-within .mcard:focus-visible{flex-grow:1.9}
.mcard:hover,.mcard:focus-visible{background:var(--accent)}
.mcard:focus-visible{box-shadow:inset 0 0 0 2px var(--fg)}
.mc-n{
position:absolute;left:clamp(14px,1.5vw,24px);bottom:-.3em;
font-family:var(--display,var(--sans));font-weight:800;
font-size:clamp(6.5rem,15vw,15.5rem);line-height:.74;letter-spacing:-.075em;
color:transparent;-webkit-text-stroke:1px var(--rule-hi);
pointer-events:none;z-index:0;opacity:.55;
transition:-webkit-text-stroke-color .4s ease,opacity .4s ease,transform .6s cubic-bezier(.16,1,.3,1);
}
.mcard:hover .mc-n,.mcard:focus-visible .mc-n{
-webkit-text-stroke-color:rgba(20,21,22,.5);opacity:.85;transform:translateY(-6px);
}
.mc-top,.mc-body{position:relative;z-index:1}
.mc-k i{font-style:normal;opacity:.5;margin:0 .25em}
.mc-k{
margin:0 0 clamp(10px,1.1vw,15px);color:var(--accent);
font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;
transition:color .4s ease;
}
.mc-h{
margin:0 0 clamp(10px,1.1vw,16px);
font-family:var(--display,var(--sans));font-weight:800;
letter-spacing:-.04em;line-height:.98;
font-size:clamp(1.75rem,3.4vw,3.25rem);color:var(--fg);
transition:color .4s ease;
}
.mc-lede{
margin:0;font-family:var(--display,var(--sans));font-weight:800;
letter-spacing:-.028em;line-height:1.14;
font-size:clamp(1.125rem,1.6vw,1.5rem);color:var(--dim);
transition:color .4s ease;
}
.mc-body{
/* takes the room left under the header and never adds to it: otherwise the
narrow cards wrap taller and the whole row changes height as the cursor
moves between them. */
flex:1 1 auto;min-height:0;overflow:hidden;
margin-top:clamp(16px,1.8vw,26px);
display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));
gap:clamp(14px,1.8vw,30px);align-content:stretch;
opacity:0;transform:translateY(12px);pointer-events:none;
transition:opacity .35s ease,transform .5s cubic-bezier(.16,1,.3,1);
}
.mcard:hover .mc-body,.mcard:focus-visible .mc-body{
opacity:1;transform:none;pointer-events:auto;
transition:opacity .45s ease .12s,transform .6s cubic-bezier(.16,1,.3,1) .12s;
}
/* the read stays up with the headline; the capability list drops to the floor
of the card, so the slack sits between them rather than under both */
.mc-read{align-self:start;min-width:0}
.mc-caps{align-self:end}
/* when the list carries a label, the wrapper is the grid child instead */
.mc-list{align-self:end;min-width:0}
.mc-list .mc-caps{align-self:auto}
.mc-cap-k{
margin:0 0 .72em;color:rgba(20,21,22,.72);
font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;
opacity:0;transform:translateX(-10px);
}
.mcard:hover .mc-cap-k,.mcard:focus-visible .mc-cap-k{
opacity:1;transform:none;
transition:opacity .34s ease .14s,transform .46s cubic-bezier(.16,1,.3,1) .14s;
}
.mc-body p{
margin:0 0 .72em;font-size:clamp(.8125rem,.95vw,.9375rem);line-height:1.42;
font-weight:600;letter-spacing:-.008em;color:var(--paper);max-width:46ch;
}
.mc-body p b{font-weight:800;color:var(--paper)}
.mc-caps{
list-style:none;margin:0;padding:0;counter-reset:cap;
border-top:1px solid rgba(20,21,22,.34);
}
.mc-caps li{
counter-increment:cap;position:relative;
padding:.5em 0 .5em 2.1em;
border-bottom:1px solid rgba(20,21,22,.18);
font-weight:800;letter-spacing:-.015em;color:var(--paper);
font-size:clamp(.75rem,.88vw,.875rem);line-height:1.2;
opacity:0;transform:translateX(-10px);
}
.mc-caps li::before{
content:counter(cap,decimal-leading-zero);
position:absolute;left:0;top:.72em;
font-size:.5625rem;letter-spacing:.1em;color:rgba(20,21,22,.62);
}
/* the list writes itself in, one line at a time */
.mcard:hover .mc-caps li,.mcard:focus-visible .mc-caps li{
opacity:1;transform:none;
transition:opacity .34s ease,transform .46s cubic-bezier(.16,1,.3,1);
}
.mcard:hover .mc-caps li:nth-child(1),.mcard:focus-visible .mc-caps li:nth-child(1){transition-delay:.20s}
.mcard:hover .mc-caps li:nth-child(2),.mcard:focus-visible .mc-caps li:nth-child(2){transition-delay:.27s}
.mcard:hover .mc-caps li:nth-child(3),.mcard:focus-visible .mc-caps li:nth-child(3){transition-delay:.34s}
.mcard:hover .mc-caps li:nth-child(4),.mcard:focus-visible .mc-caps li:nth-child(4){transition-delay:.41s}
.mcard:hover .mc-caps li:nth-child(5),.mcard:focus-visible .mc-caps li:nth-child(5){transition-delay:.48s}
/* on red everything above the fold flips to ink */
.mcard:hover .mc-k,.mcard:focus-visible .mc-k,
.mcard:hover .mc-h,.mcard:focus-visible .mc-h{color:var(--paper)}
.mcard:hover .mc-lede,.mcard:focus-visible .mc-lede{color:rgba(20,21,22,.86)}
@media (hover:none),(max-width:1200px){
.mcards{flex-direction:column;min-height:0;gap:2px}
.mcard,.mcards:hover .mcard,.mcard:hover{flex:none;background:var(--raise)}
.mc-body{opacity:1;transform:none;pointer-events:auto}
.mc-body p{color:var(--dim)} .mc-body p b{color:var(--fg)}
.mc-caps{border-top-color:var(--rule)}
.mc-caps li{color:var(--fg);border-bottom-color:var(--rule);opacity:1;transform:none}
.mc-cap-k{color:var(--accent);opacity:1;transform:none}
.mc-caps li::before{color:var(--accent)}
.mc-n{font-size:clamp(4.5rem,18vw,8rem);opacity:.4}
.mcards,#models .mcards{height:auto}
}
@media (prefers-reduced-motion:reduce){
.mcard,.mc-body{transition-duration:.01ms !important}
}
/* The filter belongs to the sentence above it, not to a new chapter. Half the
usual band padding on both sides of that seam so they read as one unit. */
.band.pb-tight{padding-bottom:clamp(30px,5vh,70px)}
.band.pt-tight{padding-top:clamp(30px,5vh,70px)}
/* ============================================================
PRICING
The figure is the headline. Putting it above the name of the model is the
whole posture of the page: the number is not the reveal at the end of a
sales call, it is the first thing you read.
============================================================ */
.pr-fig{
margin:0 0 clamp(8px,.9vw,13px);
font-family:var(--display,var(--sans));font-weight:800;
letter-spacing:-.045em;line-height:.92;
font-size:clamp(2rem,4.4vw,3.75rem);color:var(--fg);
transition:color .4s ease;
}
.pr-cur{font-size:.52em;vertical-align:.42em;margin-right:.04em;color:var(--accent);transition:color .4s ease}
.pr-per{
display:block;margin-top:.42em;
font-size:.26em;letter-spacing:.17em;text-transform:uppercase;
font-weight:800;color:var(--dim);transition:color .4s ease;
}
/* the two cards without a dollar figure set their qualifier inline and large,
so it reads as part of the term instead of a label stranded beneath it */
.pr-plus{font-size:1em;letter-spacing:-.045em;margin-left:.08em;color:var(--accent);transition:color .4s ease}
.mcard:hover .pr-plus,.mcard:focus-visible .pr-plus{color:var(--paper)}
.mcard:hover .pr-fig,.mcard:focus-visible .pr-fig{color:var(--paper)}
.mcard:hover .pr-cur,.mcard:focus-visible .pr-cur{color:var(--paper)}
.mcard:hover .pr-per,.mcard:focus-visible .pr-per{color:color-mix(in srgb,var(--paper) 85%,transparent)}
#models .mc-h{font-size:clamp(1.0625rem,1.55vw,1.5rem);margin-bottom:.4em}
@media (hover:hover) and (min-width:1201px){ #models .mcards{height:clamp(736px,50vw,760px)} }
/* the multipliers: the figure carries it, the line just explains */
.mults{list-style:none;margin:clamp(26px,3vw,42px) 0 0;padding:0;border-top:1px solid rgba(20,21,22,.3)}
.mults li{
display:flex;align-items:baseline;gap:clamp(14px,2vw,32px);
padding:clamp(11px,1.2vw,17px) 0;
border-bottom:1px solid rgba(20,21,22,.18);
}
.mu-x{
flex:none;min-width:clamp(72px,7vw,116px);
font-family:var(--display,var(--sans));font-weight:800;
letter-spacing:-.045em;line-height:1;
font-size:clamp(1.375rem,2.9vw,2.5rem);color:#141516;
font-variant-numeric:tabular-nums;
}
.mu-t{
font-weight:700;letter-spacing:-.015em;color:var(--paper);
font-size:clamp(.9375rem,1.15vw,1.125rem);line-height:1.3;text-wrap:pretty;
}
@media (max-width:560px){
.mults li{flex-direction:column;gap:.2em}
.mu-x{min-width:0}
}
/* the fixed-bid line, under the figure */
.pr-note{
margin:0 0 clamp(10px,1.1vw,16px);
font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;
color:var(--accent);transition:color .4s ease;
}
.pr-note i{font-style:normal;opacity:.55;margin:0 .35em}
.mcard:hover .pr-note,.mcard:focus-visible .pr-note{color:rgba(20,21,22,.78)}
/* what a week buys: two columns of real things, diamond-marked */
.week,.signals{
list-style:none;margin:clamp(26px,3vw,42px) 0 0;padding:0;
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:0 clamp(26px,3.2vw,56px);
}
@media (max-width:760px){ .week,.signals{grid-template-columns:1fr} }
.week li,.signals li{
position:relative;padding:clamp(14px,1.5vw,20px) 0 clamp(14px,1.5vw,20px) clamp(22px,2vw,30px);
border-bottom:1px solid var(--rule);
}
.week li::before,.signals li::before{
content:"";position:absolute;left:0;top:clamp(19px,2vw,26px);
width:7px;height:7px;background:var(--accent);transform:rotate(45deg);
}
.week b,.signals b{
display:block;margin-bottom:.3em;
font-family:var(--display,var(--sans));font-weight:800;letter-spacing:-.028em;
font-size:clamp(1rem,1.3vw,1.25rem);line-height:1.1;color:var(--fg);
}
.week span,.signals span{
display:block;color:var(--dim);font-weight:600;letter-spacing:-.008em;
font-size:clamp(.875rem,1vw,.9375rem);line-height:1.38;text-wrap:pretty;
}
.signals span b{font-weight:800;color:var(--fg)}
#already .callout{margin-top:0}
/* the agenda for the free hour: four things, stated so it reads as a meeting
with a purpose rather than a lead-capture call */
.agenda{
list-style:none;margin:clamp(24px,2.8vw,38px) 0 0;padding:0;
display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
gap:clamp(16px,2vw,30px);
}
.agenda li{padding-top:clamp(12px,1.3vw,18px);border-top:2px solid rgba(20,21,22,.5)}
.agenda b{
display:block;margin-bottom:.3em;
font-family:var(--display,var(--sans));font-weight:800;letter-spacing:-.028em;
font-size:clamp(.9375rem,1.2vw,1.125rem);line-height:1.12;color:var(--paper);
}
.agenda span{
display:block;color:rgba(20,21,22,.82);font-weight:700;letter-spacing:-.008em;
font-size:clamp(.8125rem,.95vw,.9375rem);line-height:1.34;text-wrap:pretty;
}
/* The card row is full bleed, so the band's tint and padding only ever showed
as two pale strips above and below it. Drop both and let the cards meet the
sections either side edge to edge. */
#modes{padding-block:0}
#modes::before{display:none}
#modes.band + .band,.band + #modes.band{border-top:0}
/* ============================================================
THE TILES ASSEMBLE
A faint grid at rest, pixels scattered across it and barely there. Hover
and they fly into the middle and resolve into the thing the tile names.
Everything is transform and opacity, so it stays on the compositor.
============================================================ */
/* a length, not a percentage: a % inside the translate() calc makes the
whole transform invalid, and the pixels never scatter at all */
.tile{ --px-size:clamp(104px, 12.5vw, 176px); --px-u:calc(var(--px-size) / 16); }
.tile-face{ --grid-ink:color-mix(in srgb, var(--fg) 7%, transparent); }
/* the grid itself, drawn at exactly the sprite's cell size */
.tile-face::after{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background-image:
linear-gradient(to right, var(--grid-ink) 1px, transparent 1px),
linear-gradient(to bottom, var(--grid-ink) 1px, transparent 1px);
background-size:var(--px-u) var(--px-u);
background-position:center 42%;
opacity:.55;transition:opacity .45s ease;
}
.tile:hover .tile-face::after{opacity:.9}
.tile.open .tile-face::after{opacity:0}
.px-field{
position:absolute;left:50%;top:42%;
width:var(--px-size);height:var(--px-size);
transform:translate(-50%,-50%);
z-index:1;pointer-events:none;
}
.px{
position:absolute;display:block;
width:var(--px-u);height:var(--px-u);
left:calc(var(--x) * var(--px-u));
top:calc(var(--y) * var(--px-u));
background:var(--px-c);
opacity:.16;
transform:translate(calc(var(--sx) * var(--px-u)), calc(var(--sy) * var(--px-u))) scale(.55);
transition:transform .72s cubic-bezier(.16,1,.3,1), opacity .42s ease;
transition-delay:var(--d);
}
.px-o{--px-c:color-mix(in srgb, var(--fg) 62%, transparent)}
.px-f{--px-c:color-mix(in srgb, var(--fg) 28%, transparent)}
.px-r{--px-c:var(--accent)}
.px-h{--px-c:color-mix(in srgb, var(--accent) 55%, transparent)}
/* assembled */
.tile:hover .px,.tile:focus-visible .px{transform:none;opacity:1}
/* ---- open: the sprite stays, small, in the lower left above the name ----
Assembled rather than scattered, redrawn in white and lighter reds so it
sits under the copy instead of competing with it, and breathing slowly so
the card feels alive without asking for attention. */
/* only where the open face is tall enough to give the copy and the sprite
their own rooms; narrower than that, the copy keeps the whole card */
.tile.open .px-field{display:none}
/* the open card shows its sprite at every width that gives it a wide
card; only the one-column phone layout goes without */
@media (min-width:640px){
.tile.open{--px-size:clamp(48px,4.6vw,64px)}
.tile.open .px-field{
display:block;left:clamp(14px,1.4vw,22px);top:auto;bottom:clamp(44px,4.4vw,60px);
transform:none;opacity:1;
}
/* the read stops above the sprite instead of running down into it */
.tile.open .tile-body{bottom:clamp(100px,10.2vw,132px)}
}
.tile.open .px{
transform:none;opacity:1;transition-delay:0s;
animation:px-breathe 3.6s ease-in-out infinite;
animation-delay:calc(var(--d) * 9);
}
.tile.open .px-o{--px-c:rgba(255,255,255,.9)}
.tile.open .px-f{--px-c:rgba(255,255,255,.42)}
.tile.open .px-r{--px-c:color-mix(in srgb, #fff 72%, var(--accent))}
.tile.open .px-h{--px-c:rgba(255,255,255,.55)}
@keyframes px-breathe{
0%,100%{opacity:.5}
50%{opacity:1}
}
/* the coffee card is a full spec sheet; there is no spare corner on it */
.tile-wide.open .px-field{display:none}
@media (prefers-reduced-motion:reduce){ .tile.open .px{animation:none;opacity:.85} }
.px-still .px{transform:none;opacity:.85;transition:none}
@media (prefers-reduced-motion:reduce){ .px{transition:none} }
@media (max-width:759px){ .tile{--px-size:clamp(96px, 30vw, 140px)} }
/* The filter and the admission sit on one line: a buyer scanning thirteen
covers for numbers should be told there aren't any before they look, and
given somewhere to take the objection. */
.segrow{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
gap:14px clamp(20px,3vw,48px);
margin:0 0 clamp(28px,3.6vw,46px);
}
.segrow .seg{margin:0}
.seg-note{
margin:0;color:var(--dim);text-align:right;flex:1 1 auto;min-width:0;
font-size:clamp(.875rem,1.02vw,1rem);line-height:1.35;font-weight:600;
letter-spacing:-.01em;
}
.seg-why{
display:inline-flex;align-items:baseline;gap:.3em;white-space:nowrap;
color:var(--fg);font-weight:800;text-decoration:underline;
text-decoration-color:var(--accent);text-decoration-thickness:.1em;
text-underline-offset:.16em;margin-left:.3em;
transition:color .22s ease;
}
.seg-why:hover,.seg-why:focus-visible{color:var(--accent)}
.seg-why .arw{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.seg-why:hover .arw{transform:translateY(3px)}
@media (max-width:720px){
.segrow{flex-direction:column;align-items:flex-start}
.seg-note{text-align:left}
}
/* "Why?" and its one-line answer share the rows' two columns, so the
question, the answer and the long version below all hang on one grid. */
.why{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:12px 36px;
align-items:end;margin-top:clamp(40px,5vw,72px);padding-bottom:clamp(22px,2.6vw,36px);
}
h2.whyhead{
margin:0;max-width:none;
font-size:clamp(3rem,6.4vw,5.5rem);letter-spacing:-.05em;line-height:.9;
}
h2.whyhead::after{
content:"";display:block;width:clamp(48px,5vw,84px);height:3px;
background:var(--accent);margin-top:clamp(12px,1.3vw,18px);
}
.why-a{
margin:0;max-width:52ch;color:var(--fg);
font-size:clamp(1.125rem,1.5vw,1.375rem);line-height:1.4;font-weight:600;
}
.why-a b{color:var(--accent);font-weight:800}
@media (max-width:720px){ .why{grid-template-columns:1fr;align-items:start} }
/* three signals, three columns */
/* four signals read better two-up than squeezed into four columns */
.signals{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(18px,2vw,28px)}
@media (max-width:980px){ .signals{grid-template-columns:1fr} }
.watch-lede{
margin:0;max-width:60ch;color:var(--dim);
font-size:clamp(1rem,1.2vw,1.125rem);line-height:1.5;font-weight:600;
}
.watch-lede b{color:var(--fg);font-weight:800}
#measure .mode-2{
margin-top:clamp(44px,5vw,76px);padding-top:clamp(20px,2.4vw,30px);
border-top:1px solid var(--rule);color:var(--accent);
}
/* the four signals are a values statement in disguise; this says so */
.watch-close{
margin:clamp(26px,3vw,40px) 0 0;max-width:72ch;
font-family:var(--display,var(--sans));font-weight:700;
letter-spacing:-.022em;line-height:1.26;
font-size:clamp(1.0625rem,1.5vw,1.375rem);color:var(--dim);text-wrap:pretty;
}
.watch-close b{font-weight:800;color:var(--fg)}
/* The equation ends on "success"; this picks the word straight back up. It is
the one plainly sincere line in the section, so it gets room and no irony. */
.hope{
margin:clamp(34px,4vw,60px) 0 0;padding-top:clamp(22px,2.6vw,36px);
border-top:1px solid var(--rule);
}
.hope-k{
margin:0 0 clamp(10px,1.1vw,16px);color:var(--accent);
font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;
}
.hope-h{
margin:0;font-family:var(--display,var(--sans));font-weight:800;
letter-spacing:-.042em;line-height:1;
font-size:clamp(2rem,5.2vw,4.5rem);color:var(--fg);
}
/* ============================================================
THE NUMBER TILES
Three squares beside the pricing headline. Each carries two true numbers:
the first drawn in pixels, the second the one it turns into on hover —
fourteen years into three shapes, ninety-five percent into zero cold
calls, five thousand a week into one senior expert. The caption turns with
it. Same cells, same grid, same gesture as the capability tiles.
============================================================ */
@media (min-width:1100px){
.hero.has-stats{
display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
column-gap:clamp(28px,4vw,72px);align-items:center;
}
.hero.has-stats .weare,.hero.has-stats .scrollcue{grid-column:1 / -1}
.hero.has-stats h1.fit{grid-column:1}
.hero.has-stats .pxstats{grid-column:2;justify-self:end}
}
.pxstats{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;
width:100%;max-width:600px;margin-top:clamp(26px,3vw,40px);
}
@media (min-width:1100px){ .pxstats{margin-top:0} }
.pxstat{
position:relative;aspect-ratio:1/1;min-width:0;
background:var(--raise);overflow:hidden;cursor:default;outline:none;
--u:calc((100% - 2 * clamp(12px,1.2vw,18px)) / 18);
padding:clamp(12px,1.2vw,18px);
transition:background .4s ease;
}
.pxstat:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
/* the same faint grid the capability tiles carry */
.pxstat::after{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background-image:
linear-gradient(to right, color-mix(in srgb, var(--fg) 7%, transparent) 1px, transparent 1px),
linear-gradient(to bottom, color-mix(in srgb, var(--fg) 7%, transparent) 1px, transparent 1px);
background-size:calc(100% / 18) calc(100% / 18);
opacity:.55;transition:opacity .4s ease;
}
.pxstat:hover::after,.pxstat.on::after,.pxstat:focus-visible::after{opacity:.9}
.pxs-fallback{
position:absolute;left:clamp(12px,1.2vw,18px);top:clamp(10px,1vw,16px);
font-family:var(--display,var(--sans));font-weight:800;letter-spacing:-.05em;
font-size:clamp(2rem,3.2vw,3rem);line-height:1;color:var(--fg);
}
.pxs-ready .pxs-fallback{display:none}
.pxs-field{
position:absolute;left:clamp(12px,1.2vw,18px);right:clamp(12px,1.2vw,18px);
top:clamp(14px,1.6vw,24px);z-index:1;pointer-events:none;
/* 18 cells wide, 9 tall */
aspect-ratio:2/1;
}
.pxs-field .px{
position:absolute;display:block;
width:calc(100% / 18);height:calc(100% / 9);
left:calc(var(--x) * 100% / 18);top:calc(var(--y) * 100% / 9);
background:var(--fg);opacity:var(--oa);
transform:none;
transition:transform .62s cubic-bezier(.16,1,.3,1),opacity .4s ease,background-color .5s ease;
transition-delay:var(--d);
}
.pxstat:hover .pxs-field .px,.pxstat.on .pxs-field .px,.pxstat:focus-visible .pxs-field .px{
transform:translate(calc(var(--dx) * 100%), calc(var(--dy) * 100%));
opacity:var(--ob);background:var(--accent);
}
/* the caption: first word at rest, second on hover, crossfading in place */
.pxs-k{
position:absolute;left:clamp(12px,1.2vw,18px);right:clamp(12px,1.2vw,18px);
bottom:clamp(11px,1.1vw,16px);z-index:2;
font-family:var(--display,var(--sans));font-weight:800;letter-spacing:-.03em;
font-size:clamp(.9375rem,1.25vw,1.25rem);line-height:1.05;
}
.pxs-k b,.pxs-k i{
display:block;font-style:normal;font-weight:800;
transition:opacity .32s ease,transform .5s cubic-bezier(.16,1,.3,1);
}
.pxs-k b{color:var(--fg)}
.pxs-k i{position:absolute;left:0;right:0;bottom:0;color:var(--accent);opacity:0;transform:translateY(8px)}
.pxstat:hover .pxs-k b,.pxstat.on .pxs-k b,.pxstat:focus-visible .pxs-k b{opacity:0;transform:translateY(-8px)}
.pxstat:hover .pxs-k i,.pxstat.on .pxs-k i,.pxstat:focus-visible .pxs-k i{opacity:1;transform:none}
@media (max-width:520px){
.pxstats{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.pxs-k{font-size:.8125rem}
}
@media (prefers-reduced-motion:reduce){
.pxs-field .px,.pxs-k b,.pxs-k i{transition:none}
}
/* number tiles beside the Proof intro line */
.intro-stats .intro{margin-bottom:0}
@media (min-width:1100px){
.intro-stats{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:clamp(28px,4vw,72px);align-items:center}
.intro-stats .pxstats,.intro-stats .pxwrap{justify-self:end;margin-top:0}
}
.mcard .in-link{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:.18em}
#models .mode-2{margin-top:clamp(40px,5vw,72px)}
/* heading left, lede right, bottoms aligned: the headline keeps its weight
and the paragraph stops hanging under it like a caption */
@media (min-width:1000px){
.split-head{
display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
column-gap:clamp(40px,5vw,96px);align-items:end;
margin-bottom:clamp(26px,3.4vw,40px);
}
.split-head .blockhead,.split-head .lede{margin-bottom:0}
.split-head .lede{max-width:46ch}
}
/* the deal, as terms: four clauses on a 2x2 grid, each with an outlined
numeral, so the section reads as a contract you can scan, not a list */
.terms{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:0 clamp(32px,4vw,64px);border-top:1px solid var(--rule);
}
.term{
position:relative;padding:clamp(26px,3vw,40px) 0 clamp(30px,3.4vw,48px);
border-bottom:1px solid var(--rule);
}
.term-n{
display:block;font-family:var(--display,var(--sans));font-weight:800;
font-size:clamp(2.75rem,4.6vw,4.25rem);line-height:.8;letter-spacing:-.06em;
color:transparent;-webkit-text-stroke:1px var(--rule-hi);
margin-bottom:clamp(16px,1.8vw,26px);transition:color .35s ease;
}
.term:hover .term-n{color:var(--accent);-webkit-text-stroke-color:var(--accent)}
.term h3{
margin:0 0 .5em;font-family:var(--display,var(--sans));font-weight:800;
font-size:clamp(1.5rem,2.4vw,2.125rem);line-height:1.02;letter-spacing:-.035em;
max-width:14ch;text-wrap:balance;
}
.term p{margin:0;color:var(--dim);font-size:clamp(1rem,1.15vw,1.0625rem);line-height:1.55;max-width:46ch}
@media (max-width:860px){ .terms{grid-template-columns:1fr} .term{padding-block:22px 26px} }
/* the kickoff story: context left, the line right, so the punchline lands */
.anec-wide{max-width:none}
@media (min-width:1000px){
.anec-wide{
display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
column-gap:clamp(40px,5vw,96px);align-items:start;
margin-top:clamp(40px,5vw,72px);
}
.anec-wide .anec-q{margin-top:0 !important;font-size:clamp(1.75rem,2.9vw,2.75rem) !important;line-height:1.08 !important}
.anec-wide .anec-l p:last-child{margin-bottom:0}
}
/* 0 -> 1 as a journey: the pitch stays put on the left while the four
stations run down a line on the right, marked 0, ->, 1 and a red x */
.journey{margin-top:clamp(8px,1vw,14px)}
.j-k{margin-top:0;padding-top:0;border-top:0}
.j-l .lede{margin-bottom:clamp(18px,2vw,28px)}
.stations{list-style:none;margin:clamp(28px,3.4vw,48px) 0 0;padding:0;--mt:clamp(18px,2.2vw,30px);--mh:clamp(2.25rem,4vw,3.75rem)}
/* the line runs between the markers rather than behind them, so it never
needs a background to hide it and works on any band colour */
.st::before{
content:"";position:absolute;left:0;width:1px;background:var(--rule-hi);
top:calc(var(--mt) + var(--mh) + 12px);bottom:-12px;
}
.st:last-child::before{display:none}
.st{
position:relative;padding:clamp(22px,2.6vw,36px) 0 clamp(26px,3vw,42px) clamp(76px,8vw,128px);
border-bottom:1px solid var(--rule);
}
.st:last-child{border-bottom:0}
.st-m{
position:absolute;left:0;top:var(--mt);height:var(--mh);
width:clamp(56px,6vw,96px);text-align:center;transform:translateX(-50%);
font-family:var(--display,var(--sans));font-weight:800;
font-size:clamp(2.25rem,4vw,3.75rem);line-height:1;letter-spacing:-.05em;
color:var(--fg);
}
.st-not .st-m,.st-not .hl{color:var(--accent)}
.st-not{color:var(--dim)}
.st h3{
margin:0 0 .45em;font-family:var(--display,var(--sans));font-weight:800;
font-size:clamp(1.5rem,2.4vw,2.125rem);line-height:1.02;letter-spacing:-.035em;text-wrap:balance;
}
.st p{margin:0;color:var(--dim);font-size:clamp(1rem,1.15vw,1.0625rem);line-height:1.55;max-width:52ch}
@media (min-width:1000px){
.journey{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:clamp(48px,6vw,110px);align-items:start}
.j-l{position:sticky;top:clamp(80px,12vh,140px)}
.stations{margin-top:0}
}
.proofs + .aside{margin-top:clamp(24px,3vw,44px)}
/* the four questions, same clause grid as About's deal */
.terms-q{margin-top:clamp(22px,2.6vw,36px)}
.terms-q h3{max-width:16ch}
.watch-lede + .terms-q{margin-top:clamp(22px,2.6vw,36px)}
/* the eras: alternating shade, full-bleed, and a lift on hover so the three
read as three rooms rather than one long column */
.era{position:relative;isolation:isolate}
.era::before{
content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;
z-index:-1;background:transparent;transition:background .45s ease;
}
.era:nth-child(even)::before{background:rgba(255,255,255,.028)}
:root[data-theme="light"] .era:nth-child(even)::before{background:rgba(0,0,0,.035)}
.era:hover::before{background:var(--raise)}
.era-what{transition:transform .6s cubic-bezier(.16,1,.3,1),color .35s ease;will-change:transform}
.era:hover .era-what{transform:translateX(.06em)}
.era:hover .era-what{color:var(--accent)}
.era:last-child:hover .era-what{color:var(--fg)}
@media (hover:none){ .era:hover .era-what{transform:none} }
/* ============================================================
the Proof stack: a compact bar pins to the top — filter on the left,
the tiles full-size on the right — and the covers pile up under it.
The bar is one fixed size, so the pin line never moves. The big intro
line above it scrolls away like any other copy.
============================================================ */
.proof-head{background:var(--bg);padding:clamp(14px,1.6vw,22px) 0 clamp(12px,1.4vw,18px)}
.proof-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(28px,4vw,72px);align-items:end}
.segcol{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,18px);align-items:flex-start;min-width:0}
.segcol .seg-note{margin:0;text-align:left}
@media (min-width:1100px){
.proof-head{position:sticky;top:0;z-index:6}
.proof-head.stuck{box-shadow:0 1px 0 var(--rule)}
.proof-head .pxwrap{justify-self:end}
.proof-head .pxstats{max-width:none;width:clamp(440px,38vw,580px);margin-top:0}
.proof-head .pxs-k{font-size:clamp(.9375rem,1.1vw,1.125rem)}
#windex .wcover{top:var(--stack-top,0px)}
}
@media (max-width:1099px){
.proof-bar{grid-template-columns:1fr;row-gap:18px}
/* start would shrink the row to its content and squash the tiles */
.proof-head .pxwrap{justify-self:stretch}
.proof-head .pxstats{width:100%;max-width:none}
}
#index.pt-tight{padding-top:0}
/* the pile locks one cover at a time: each scroll gesture brings the next
one up and stops, so a cover is never half-covered before it is read */
html.snap{scroll-snap-type:y mandatory}
html.snap #windex .wcover{scroll-snap-align:start;scroll-snap-stop:always}
/* what the tiles are showing right now */
.pxs-cap{
margin:0 0 8px;font-weight:800;font-size:.75rem;letter-spacing:.17em;text-transform:uppercase;
color:var(--accent);min-height:1.2em;
}
.pxs-cap span{display:inline-block;transition:opacity .25s ease,transform .4s cubic-bezier(.16,1,.3,1)}
.pxs-cap.swap span{opacity:0;transform:translateY(5px)}
/* a tile showing an engagement's capability instead of a number */
.pxs-sprite{
position:absolute;left:clamp(12px,1.2vw,18px);right:clamp(12px,1.2vw,18px);
top:clamp(10px,1vw,14px);aspect-ratio:1/1;z-index:1;pointer-events:none;
display:none;scale:.84;transform-origin:50% 0;
}
.pxs-sprite.live,.pxstat.proj .pxs-sprite{display:block}
.pxs-sprite .px{
position:absolute;display:block;
width:calc(100% / 18);height:calc(100% / 18);
left:calc(var(--x) * 100% / 18);top:calc(var(--y) * 100% / 18);
background:var(--px-c,var(--fg));
opacity:0;transform:translate(calc(var(--sx) * 100%),calc(var(--sy) * 100%)) scale(.4);
transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .35s ease;
transition-delay:var(--d);
}
.pxs-sprite.live .px{opacity:1;transform:none}
/* the number steps aside while a sprite is up */
.pxstat.proj .pxs-field .px{opacity:0 !important;transform:translate(0,-40%) !important;transition-delay:0s}
.pxstat.proj .pxs-k i{display:none}
.pxstat.proj .pxs-k b,.pxstat.proj:hover .pxs-k b{opacity:1;transform:none}
.pxs-k b.swap{opacity:0;transform:translateY(6px)}
@media (prefers-reduced-motion:reduce){
.pxs-sprite .px{transition:none}
}
/* ============================================================
Bunky: the break
============================================================ */
.mode-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.mode-row .mode-2{flex:1 1 auto}
#services .mode-row + .tiles{margin-top:clamp(14px,1.8vw,22px)}
.break-note{
margin:0;padding-top:clamp(20px,2.4vw,30px);color:var(--dim);
font-size:clamp(.9375rem,1.05vw,1.0625rem);font-weight:600;
}
.play-bunky{
appearance:none;background:none;border:0;padding:0;margin-left:.35em;cursor:pointer;
font:inherit;font-weight:800;color:var(--fg);
text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.2em;
}
.play-bunky .arw{display:inline-block;margin-left:.3em;color:var(--accent);transition:transform .3s ease}
.play-bunky:hover .arw,.play-bunky:focus-visible .arw{transform:translateX(.25em)}
.play-bunky:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.bunky{
position:fixed;inset:0;z-index:300;display:grid;place-items:center;
background:rgba(8,9,10,.86);padding:16px;
}
.bunky[hidden]{display:none}
body.bunky-open{overflow:hidden}
.bk-box{
width:min(100%,1180px);background:#141516;color:var(--paper);border:1px solid #2A2C2E;
padding:14px 14px 16px;position:relative;
}
.bk-top{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.bk-name{
margin:0;font-family:var(--display,var(--sans));font-weight:800;letter-spacing:-.04em;
font-size:1.5rem;color:#F54D5E;line-height:1;
}
.bk-hud{margin:0 0 0 auto;font-weight:700;font-size:.875rem;color:#D1CABC;white-space:pre}
.bk-x{
appearance:none;background:none;border:0;color:var(--paper);font-size:1.5rem;line-height:1;cursor:pointer;
padding:4px 6px;margin-right:-6px;
}
.bk-x:focus-visible{outline:2px solid #F54D5E}
.bk-c{display:block;width:100%;height:auto;max-height:calc(100vh - 190px);max-width:100%;object-fit:contain;margin:0 auto;image-rendering:pixelated;background:#141516;touch-action:none}
.bk-box{display:flex;flex-direction:column}
.bk-name{font-size:2rem}
.bk-hud{font-size:1.0625rem}
.bk-help{font-size:.9375rem;text-align:center}
.bk-msg{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(620px,calc(100% - 28px));
margin:0;padding:clamp(22px,2.6vw,36px) clamp(22px,2.8vw,40px) clamp(24px,2.8vw,40px) clamp(26px,3vw,44px);
background:#141516;border-left:3px solid #F54D5E;
font-size:1rem;line-height:1.5;color:#D1CABC;text-align:left;
}
.bk-msg[hidden]{display:none}
.bk-msg b{color:var(--paper);font-weight:800}
.bk-score{color:#F54D5E;font-weight:800}
.bk-again{appearance:none;border:0;cursor:pointer;margin-top:clamp(18px,2vw,26px);--accent:#F54D5E}
.bk-help{margin:12px 0 0;font-size:.8125rem;line-height:1.45;color:#9AA0A6}
.bk-help b{color:#D1CABC;font-weight:700}
.bk-k{display:block;margin-bottom:clamp(10px,1.2vw,16px);font-weight:800;font-size:.75rem;letter-spacing:.17em;text-transform:uppercase;color:#F54D5E}
.bk-moves{display:block;margin:10px 0 12px;color:var(--paper);font-weight:700;line-height:1.7}
.bk-moves b{display:inline-block;width:1.4em}
.bk-moves b{color:#F54D5E}
.bk-link{display:inline-block;margin-top:8px;color:var(--paper);font-weight:700;text-decoration:underline;text-decoration-color:#F54D5E;text-underline-offset:.2em}
.bk-msg{max-height:92%;overflow:auto}
/* a spare tile while an engagement is up: grid only, no number, no label */
.pxstat.idle .pxs-field .px{opacity:0 !important;transform:translate(0,-40%) !important;transition-delay:0s}
.pxstat.idle .pxs-k i{display:none}
.pxstat.idle::after{opacity:.3}
.bk-h{
margin:0 0 .45em;font-family:var(--display,var(--sans));font-weight:800;letter-spacing:-.04em;
font-size:clamp(1.75rem,3.2vw,2.75rem);line-height:.98;color:var(--paper);text-wrap:balance;
}
.bk-p{margin:0;font-size:clamp(1rem,1.15vw,1.125rem);line-height:1.5;color:#D1CABC;max-width:48ch}
.bk-p b{color:var(--paper);font-weight:800}
.bk-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px clamp(16px,2vw,26px);margin-top:clamp(18px,2vw,26px)}
.bk-acts .bk-again{margin-top:0}
.bk-alt{
appearance:none;background:none;border:0;padding:0;cursor:pointer;font:inherit;font-weight:700;
color:#D1CABC;text-decoration:underline;text-decoration-color:#3A3D40;text-underline-offset:.2em;
}
.bk-alt:hover,.bk-alt:focus-visible{color:var(--paper);text-decoration-color:#F54D5E;outline:0}
.bk-exit{margin-left:auto;color:#9AA0A6}
/* the 0 -> 1 arrow: drawn, so it matches the weight of the numerals
instead of the font's long thin glyph */
.arw-big{
display:inline-block;width:.9em;height:.6em;vertical-align:.04em;
margin:0 .14em;color:var(--accent);
}
.zero-one{letter-spacing:-.06em}
.cb-name .arw-big{width:.9em;height:.6em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* every small arrow on the site is the same pixel arrow, in the motif.
The glyph stays in the markup for copy-paste and screen readers; the
mask draws over it. */
.arw{
display:inline-block;width:.95em;height:.63em;vertical-align:-.02em;
overflow:hidden;text-indent:-9999px;
background:currentColor;
-webkit-mask:url("data:image/svg+xml,") no-repeat center / contain;mask:url("data:image/svg+xml,") no-repeat center / contain;
}
.seg-why .arw,.scrollcue .arw{transform:rotate(90deg)}
.seg-why:hover .arw{transform:rotate(90deg) translateX(2px)}
/* front page: three tiles under the hero lede, off the grid — sprite at
rest, number on hover */
.hero-tiles{margin:clamp(22px,2.6vw,36px) 0 clamp(6px,.8vw,12px)}
.hero-tiles .pxstats{width:clamp(300px,34vw,480px);max-width:none;margin:0;gap:clamp(10px,1.2vw,18px)}
.pxstats.bare .pxstat{background:transparent;padding:0}
.pxstats.bare .pxstat::after{display:none}
.pxstats.bare .pxs-field,.pxstats.bare .pxs-sprite{left:0;right:0;top:0}
/* labels centred under their pictures, and held well clear of the bottom
edge (the red rule sits just beneath these in the hero) */
.pxstats.bare .pxs-k{left:0;right:0;bottom:clamp(8px,1vw,14px);text-align:center;font-size:clamp(.9375rem,1.1vw,1.125rem)}
.pxstats.bare .pxs-k i{text-align:center}
.pxstats.bare .pxs-sprite{scale:.8}
.pxs-cap i{font-style:normal;color:var(--dim);margin:0 .3em}
.hx .pxs-sprite{display:block}
/* hover always means "show me the number", whatever the tile is on */
.hx:hover .pxs-k b,.hx:focus-visible .pxs-k b{opacity:0;transform:translateY(-8px)}
.hx:hover .pxs-k i,.hx:focus-visible .pxs-k i{opacity:1;transform:none}
/* at rest: sprite in, number out */
.hx:not(:hover):not(.on):not(:focus-visible) .pxs-field .px{opacity:0;transform:translate(0,-40%)}
/* on hover: sprite scatters off, number lands (A and B are the same, so it lands still) */
.hx:hover .pxs-sprite .px,.hx.on .pxs-sprite .px,.hx:focus-visible .pxs-sprite .px{
opacity:0;transform:translate(calc(var(--sx) * 100%),calc(var(--sy) * 100%)) scale(.4);
}
.hx:hover .pxs-field .px,.hx.on .pxs-field .px,.hx:focus-visible .pxs-field .px{background:var(--fg)}
@media (hover:none){ .pxs-note{display:none} }
@media (min-width:1080px){
/* the tiles sit on the red rule above the lede: h1 spans both rows on
the left, tiles close the first row on the right, the lede opens the
second, so the three are stacked tight against each other */
/* tiles and lede travel together in the right column, bottom-aligned
with the headline exactly as the lede was on its own */
.hero.home .hero-side{grid-column:2;align-self:end;margin:0 0 .5em}
.hero.home .hero-side .herolede{margin:0}
.hero.home .hero-tiles{margin:0 0 clamp(30px,3.2vw,46px)}
}
/* the conviction line and its supporting copy side by side, bottoms
aligned, instead of the copy stepping down and across under it */
.intro-split .intro{margin-bottom:0}
.intro-split .intro-r .intro-sub{width:auto;margin-left:0;max-width:52ch}
.intro-split .intro-r .intro-sub + .intro-sub{margin-top:clamp(14px,1.6vw,22px)}
@media (min-width:1000px){
.intro-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:clamp(40px,5vw,96px);align-items:end}
}
/* a cover whose own image is already dark enough to carry the type */
.wcover.no-tint::before{opacity:.45}
.wcover.no-tint:hover::before,.wcover.no-tint.open::before{opacity:.7}
/* the focused cover drifts, very slowly: enough to feel alive on a still
photograph, not enough to notice as an animation */
@keyframes wpan{
from{transform:scale(1.03) translate3d(0,0,0)}
to{transform:scale(1.09) translate3d(-1.2%,-1%,0)}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
.wcover.live .wcover-img{
animation:wpan 26s ease-in-out infinite alternate;
will-change:transform;
}
/* the hover zoom would fight the animation, so the live card keeps panning
and lets the scrim do the hover work instead */
.wcover.live:hover .wcover-img{animation-play-state:running}
}
/* ============================================================
mobile: an open tile grows to fit its text
On a phone the card is small and the body was being clipped (or hidden
behind an inner scrollbar nobody finds), so an open tile drops the fixed
square, lets the body sit in normal flow, and the name moves under it.
============================================================ */
@media (max-width:860px){
/* an open tile takes the full row: a half-width column of 10-word lines is
not a readable measure on a phone */
/* it opens in the row it was tapped in (svc.js sets --r), so the panel
replaces the tile under the finger instead of dropping below the grid */
.tiles .tile.open{aspect-ratio:auto;grid-column:1 / -1;grid-row:var(--r,auto)}
.tile.open .tile-face{
position:relative;width:100%;height:auto;min-height:100%;
display:flex;flex-direction:column;
padding:clamp(16px,4.5vw,24px);gap:clamp(12px,3.4vw,18px);
}
/* name first (clear of the close mark), then the read, then the pairing */
.tile.open .tile-name{position:static;margin:0;padding-right:34px;order:1}
.tile.open .tile-body{
position:static;opacity:1;transform:none;overflow:visible;
padding:0;pointer-events:auto;order:2;
}
.tile.open .tile-body p{font-size:1rem;line-height:1.35;max-width:none}
.tile.open .tile-pair{
position:static;margin:0;order:3;text-align:left;max-width:none;
opacity:1;transform:none;
}
.tile.open .tile-pair .tp-v{display:inline-block;margin-right:.6em}
/* the brew runs as one column on a phone; two made six-word lines */
.rc{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;gap:clamp(14px,3.6vw,20px)}
/* the sprite would sit on top of flowing text */
.tile.open .px-field{display:none}
}
/* tile titles were 16px on a phone: the only label on the tile, so it leads */
@media (max-width:860px){
.tiles .tile-name{
font-size:clamp(1.375rem,6.4vw,1.75rem);line-height:1;letter-spacing:-.04em;
left:clamp(14px,4vw,20px);bottom:clamp(14px,4vw,20px);right:12px;
}
.tiles .tile.open .tile-name{font-size:clamp(1.5rem,6.8vw,1.875rem);right:auto}
}
/* ============================================================
touch / narrow: the cards are always open, so they are read, not hovered.
A tap leaves :hover stuck on, which turned the lede to ink on a dark card.
Size is raised too: these were desktop-hover sizes (11-14px).
============================================================ */
@media (hover:none),(max-width:1200px){
.mcard:hover .mc-k,.mcard:focus-visible .mc-k{color:var(--accent)}
.mcard:hover .mc-h,.mcard:focus-visible .mc-h{color:var(--fg)}
.mcard:hover .mc-lede,.mcard:focus-visible .mc-lede{color:var(--dim)}
.mcard:hover .mc-n,.mcard:focus-visible .mc-n{-webkit-text-stroke-color:var(--rule-hi);opacity:.4;transform:none}
.mcard:hover .pr-fig,.mcard:focus-visible .pr-fig{color:var(--fg)}
.mcard:hover .pr-cur,.mcard:focus-visible .pr-cur,
.mcard:hover .pr-plus,.mcard:focus-visible .pr-plus{color:var(--accent)}
.mcard:hover .pr-per,.mcard:focus-visible .pr-per{color:var(--dim)}
.mcard:focus-visible{box-shadow:none}
}
@media (max-width:860px){
.mcard .mc-h,#models .mc-h{font-size:clamp(2.25rem,11vw,3.25rem);line-height:.96}
.mc-lede{font-size:clamp(1.25rem,5.6vw,1.5rem);line-height:1.16}
.mc-body p{font-size:1.0625rem;line-height:1.42;max-width:none}
.mc-caps li{font-size:1.0625rem;padding-left:2.4em}
.mc-caps li::before{font-size:.6875rem;top:.95em}
}
/* the nav panel is a stacked list, so the desktop pipe has nothing to divide */
@media all{
body.navopen .nav-sep,.navpanel .nav-sep{display:none}
.topbar .nav-sep{display:none}
}
/* ============================================================
mobile: nothing in a tracked, uppercase label goes under 11px
At phone sizes these eyebrows were landing at 8-10px, which is where
letter-spacing stops helping and starts hurting.
============================================================ */
@media (max-width:860px){
.tp-k,.places-k,.co-k,.co-lbl,.mc-k,.pxs-cap,.mode,.wp-k,.anec-k,.bk-k{font-size:.6875rem}
.pl i{font-size:.6875rem;letter-spacing:.1em}
.pr-per{font-size:.75rem;letter-spacing:.14em}
.pr-note{font-size:.8125rem}
}
/* eyebrows were still 11-12px on a phone and read as noise: 14px, a little
less tracking so the long ones still wrap in two lines, not three */
@media (max-width:860px){
p.mc-k,p.mode,p.mode-2,p.co-k,p.co-lbl,p.places-k,p.lbl-sm,p.stat-k,
.tp-k,.pxs-cap,.wp-k,.anec-k,.bk-k,.mc-cap-k{font-size:.875rem;letter-spacing:.13em;line-height:1.35}
.pl i{font-size:.8125rem}
.pr-per{font-size:.8125rem}
}
@media (max-width:760px){
/* the hero was holding a lot of air above the headline */
.hero.home{padding-top:clamp(28px,7vw,56px)}
}
/* ---------- project frames: a mosaic of close-up cuts under the hero ----------
Twelve columns, two rows, spans set per tile in drawer.js (--c). Flush with
the site's 2px gutter. On a phone: six columns, four rows (--m). */
.wpanel .wp-tiles{
display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
grid-auto-rows:clamp(84px,8.4vw,128px);gap:2px;
margin-top:clamp(10px,1.2vw,16px);
}
.wpanel .wp-tile{
grid-column:span var(--c,3);aspect-ratio:auto;min-width:0;
border:0;background:#0e0f11;
}
.wpanel .wp-tile canvas{
display:block;width:100%;height:100%;object-fit:cover;
opacity:0;transform:scale(1.04);
transition:opacity .5s ease,transform .9s cubic-bezier(.16,1,.3,1);
}
.wpanel .wp-tile canvas.on{opacity:1;transform:none}
.wpanel .wp-tile:hover canvas.on{transform:scale(1.06)}
.wpanel .wp-tile:hover{border:0}
@media (max-width:899px){
.wpanel .wp-tiles{
grid-template-columns:repeat(6,minmax(0,1fr));
grid-auto-rows:clamp(84px,27vw,150px);gap:2px;margin:10px 18px 0;
}
.wpanel .wp-tile{grid-column:span var(--m,3)}
}
@media (min-width:900px) and (max-width:1280px){
.wpanel .wp-tiles{grid-template-columns:repeat(12,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){ .wpanel .wp-tile canvas{transition:none} }
/* ---------- the hero, full screen ---------- */
.wp-hero{cursor:zoom-in}
.wp-expand{
position:absolute;right:10px;top:10px;z-index:2;
width:34px;height:34px;display:grid;place-items:center;cursor:pointer;
background:rgba(9,10,11,.72);border:1px solid rgba(255,255,255,.28);color:var(--paper);
opacity:.85;transition:opacity .25s ease,background .25s ease,transform .25s ease;
}
.wp-expand svg{width:16px;height:16px;display:block}
.wp-hero:hover .wp-expand,.wp-expand:focus-visible{opacity:1;background:var(--accent);border-color:var(--accent)}
.wl{
position:fixed;inset:0;z-index:1000;background:rgba(6,7,8,.975);
opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s;
display:flex;flex-direction:column;
}
.wl.on{opacity:1;visibility:visible;transition:opacity .3s ease}
.wl-stage{
flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;
display:flex;align-items:center;justify-content:center;
padding:clamp(12px,3vw,40px) clamp(12px,3vw,40px) 0;cursor:zoom-in;
}
.wl-stage img{
display:block;max-width:100%;max-height:100%;margin:auto;
object-fit:contain;cursor:zoom-in;
}
.wl-stage.zoom{display:block;cursor:zoom-out}
.wl-stage.zoom img{max-width:none;max-height:none;width:max(190vw,1600px);height:auto;cursor:zoom-out}
.wl-x{
position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:14px;z-index:3;
width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:var(--paper);
}
.wl-x svg{width:15px;height:15px;display:block}
.wl-x:hover{background:var(--accent);border-color:var(--accent)}
.wl-bar{
display:flex;align-items:center;justify-content:center;gap:14px;flex:none;
padding:12px 14px calc(14px + env(safe-area-inset-bottom,0px));
color:color-mix(in srgb,var(--paper) 85%,transparent);font-weight:700;letter-spacing:.06em;font-size:.875rem;
}
.wl-step{
width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
background:transparent;border:1px solid rgba(255,255,255,.28);color:var(--paper);
}
.wl-step svg{width:20px;height:20px;display:block}
.wl-step:hover{background:var(--accent);border-color:var(--accent)}
.wl-hint{margin-left:14px;font-weight:600;letter-spacing:0;color:rgba(255,255,255,.6);font-size:.8125rem}
.wl-bar.one .wl-step,.wl-bar.one .wl-n{display:none}
@media (max-width:640px){ .wl-hint{display:none} .wl-stage.zoom img{width:max(320vw,1400px)} }
@media (prefers-reduced-motion:reduce){ .wl,.wl.on{transition:none} }
/* on a phone the hero runs to the top edge and the panel's close mark sits
in its corner, so the expand mark sits beside it */
@media (max-width:899px){
.wp-expand{top:calc(14px + env(safe-area-inset-top,0px));right:66px;width:44px;height:44px;border-radius:50%;
background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28)}
}
/* ---------- pixel icons under the frames: what the engagement drew on ---------- */
.wpanel .wp-caps{margin-top:clamp(14px,1.8vw,24px);padding-bottom:6px}
.wp-caps-k{
margin:0 0 10px;color:var(--accent);font-size:.875rem;letter-spacing:.13em;
text-transform:uppercase;font-weight:800;line-height:1.35;
}
.wp-caps ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:flex-end;gap:2px}
.wp-caps li{
display:flex;flex-direction:column;align-items:flex-start;gap:10px;
padding:14px 16px 12px;min-width:104px;background:#0e0f11;
background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
background-size:9px 9px;
}
.wp-caps svg{width:clamp(64px,5.4vw,84px);height:auto;display:block}
.wp-caps svg .px-o{fill:rgba(255,255,255,.7)}
.wp-caps svg .px-f{fill:rgba(255,255,255,.3)}
.wp-caps svg .px-r{fill:var(--accent)}
.wp-caps svg .px-h{fill:color-mix(in srgb,var(--accent) 55%,transparent)}
.wp-caps li span{font-family:var(--display,var(--sans));font-weight:800;font-size:.9375rem;letter-spacing:-.02em;color:var(--paper);line-height:1}
@media (max-width:899px){
.wpanel .wp-caps{margin:14px 18px 0}
.wp-caps li{min-width:0;flex:1 1 calc(33.333% - 2px);padding:12px 12px 10px}
.wp-caps svg{width:clamp(56px,16vw,72px)}
}
/* the hero is one fixed shape for every project, so the summaries line up;
the image fills it, and the expand mark opens the whole frame */
.wpanel .wp-hero{aspect-ratio:16/9;max-height:none}
.wpanel .wp-hero img{object-fit:cover;object-position:center}
@media (min-width:900px){ .wpanel .wp-tiles{grid-auto-rows:clamp(72px,6.6vw,104px)} }
@media (min-width:900px){ .wpanel .wp-hero{aspect-ratio:2/1} }
/* ---------- pixel icons, upper right of each home cover ---------- */
.proof .proof-caps{
position:absolute;top:clamp(14px,1.6vw,22px);right:clamp(14px,1.6vw,22px);z-index:3;
display:flex;gap:clamp(8px,.9vw,14px);align-items:flex-start;justify-content:flex-end;
pointer-events:none;
}
.proof .proof-caps svg{width:clamp(34px,3.4vw,50px);height:auto;display:block}
.proof .proof-caps .px-o{fill:rgba(255,255,255,.92)}
.proof .proof-caps .px-f{fill:rgba(255,255,255,.45)}
.proof .proof-caps .px-r{fill:var(--accent)}
.proof .proof-caps .px-h{fill:color-mix(in srgb,var(--accent) 60%,transparent)}
@media (max-width:699px){ .proof .proof-caps svg{width:34px} }
/* home intro copy: a notch smaller */
.intro-split .intro-r .intro-sub{font-size:clamp(.9375rem,1.05vw,1.0625rem);line-height:1.55;max-width:50ch}
/* icon strip: full width, tiles share a bottom edge, icon + label bottom-aligned */
.wpanel .wp-caps{display:flex;flex-direction:column;justify-content:flex-end}
.wp-caps ul{align-items:stretch;flex-wrap:nowrap}
.wp-caps li{flex:1 1 0;min-width:0;justify-content:flex-end}
@media (max-width:899px){ .wp-caps ul{flex-wrap:wrap} .wp-caps li{flex:1 1 calc(33.333% - 2px)} }
/* the room line, first in the home intro copy */
.intro-split .intro-r .intro-sub.riff{color:var(--fg);font-size:clamp(1.0625rem,1.35vw,1.3125rem);line-height:1.4;margin-bottom:clamp(16px,1.8vw,26px)}
.intro-split .intro-r .intro-sub.riff b{color:var(--fg);font-weight:800}
/* about: the era copy, a notch smaller */
.era-say p{font-size:clamp(.9375rem,1.05vw,1.0625rem);line-height:1.58}
/* home cover icons: fade in in turn, lift and name themselves on hover */
.proof .proof-caps .pc{position:relative;display:block;pointer-events:auto;cursor:default;
transition:opacity .5s ease var(--d,0ms),transform .5s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.proof .proof-caps.pc-wait .pc{opacity:0;transform:translateY(-8px)}
.proof .proof-caps.pc-wait.pc-in .pc{opacity:1;transform:none}
.proof .proof-caps .pc svg{transition:transform .18s ease,filter .18s ease}
.proof .proof-caps .pc:hover svg{transform:translateY(-3px) scale(1.12);}
.proof .proof-caps .pc::after{content:attr(data-l);position:absolute;top:calc(100% + 6px);right:0;
padding:5px 8px;background:rgba(10,11,12,.92);color:var(--paper);font-size:.6875rem;font-weight:800;
letter-spacing:.12em;text-transform:uppercase;line-height:1;white-space:nowrap;
opacity:0;transform:translateY(-4px);transition:opacity .15s ease,transform .15s ease;pointer-events:none}
.proof .proof-caps .pc:hover::after{opacity:1;transform:none}
.proof .proof-caps .pc:hover{z-index:2}
@media (prefers-reduced-motion:reduce){
.proof .proof-caps .pc,.proof .proof-caps .pc svg,.proof .proof-caps .pc::after{transition:none}
}
/* resting: faded and slowly breathing; hover: fully lit, label revealed */
@keyframes pcBreath{0%,100%{opacity:.42}50%{opacity:.72}}
.proof .proof-caps .pc svg{opacity:.55;animation:pcBreath 3.6s ease-in-out infinite;animation-delay:var(--d,0ms);
transition:transform .18s ease,filter .18s ease,opacity .2s ease}
.proof .proof-caps .pc:hover svg{animation:none;opacity:1}
@media (prefers-reduced-motion:reduce){ .proof .proof-caps .pc svg{animation:none;opacity:.6} .proof .proof-caps .pc:hover svg{opacity:1} }
/* cover icons, pixel by pixel: cells fly in and assemble, then shimmer;
a hand on an icon lights every cell and names it */
@keyframes pcTw{0%,100%{opacity:.32}50%{opacity:.9}}
.proof .proof-caps.pc-wait .pc{opacity:1;transform:none;transition:none}
.proof .proof-caps .pc svg{opacity:1;animation:none}
.proof .proof-caps .pc rect{transform-box:view-box}
.proof .proof-caps.pc-wait .pc rect{opacity:0;transform:translate(calc(var(--sx)*1px),calc(var(--sy)*1px))}
.proof .proof-caps.pc-wait.pc-in .pc rect{opacity:.7;transform:none;
transition:transform .65s cubic-bezier(.2,.8,.2,1) calc(var(--d,0ms) + var(--rd,0s)),opacity .5s ease calc(var(--d,0ms) + var(--rd,0s))}
.proof .proof-caps.pc-live .pc rect{animation:pcTw 2.8s ease-in-out infinite;animation-delay:var(--tw,0s)}
.proof .proof-caps .pc:hover rect{animation:none;opacity:1;transform:none;transition:opacity .15s ease,transform .15s ease}
@media (prefers-reduced-motion:reduce){ .proof .proof-caps .pc rect{animation:none;opacity:.7} .proof .proof-caps .pc:hover rect{opacity:1} }
/* project summary icons: home-cover size, pinned to the bottom of the frames column */
@media (min-width:900px){
.wpanel .wp-shots{display:flex;flex-direction:column}
.wpanel .wp-shots > *{flex:0 0 auto}
/* the hero takes whatever height the column has left, so the frames sit
right above the capability icons instead of floating over a gap */
.wpanel .wp-shots > .wp-hero{flex:1 1 auto;min-height:0}
.wpanel .wp-caps{margin-top:auto;padding-top:clamp(14px,1.8vw,24px);padding-bottom:6px}
}
.wp-caps-k{margin-bottom:8px;font-size:.75rem}
.wp-caps ul{gap:2px;flex-wrap:wrap}
.wp-caps li{flex:0 0 auto;min-width:0;padding:10px 14px 9px;gap:7px;align-items:center;justify-content:flex-end}
.wp-caps svg{width:clamp(34px,3.4vw,50px)}
.wp-caps li span{font-size:.75rem;letter-spacing:0;font-weight:700}
@media (max-width:899px){
.wp-caps li{flex:0 0 auto;padding:9px 12px 8px}
.wp-caps svg{width:34px}
}
/* hovered icon's name: a line under the row, right-justified to the last icon's edge */
.proof .proof-caps{flex-wrap:wrap;row-gap:6px}
.proof .proof-caps .pc::after{display:none}
.proof .proof-caps .pc-lab{flex:0 0 100%;order:9;display:block;text-align:right;min-height:1em;
color:var(--paper);font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;line-height:1;
opacity:0;transform:translateY(-3px);
transition:opacity .18s ease,transform .18s ease}
.proof .proof-caps .pc-lab.on{opacity:1;transform:none}
/* the icon name uses the site's bold heading style: display face, 800, tight tracking, sentence case */
.proof .proof-caps .pc-lab{font-family:var(--display,var(--sans));font-weight:800;font-size:clamp(1rem,1.15vw,1.1875rem);
letter-spacing:-.03em;text-transform:none;line-height:1.05;min-height:1.05em}
/* front-page tiles: the rotation alone decides what shows. Hover only pauses it;
it no longer flips a service to a number. */
.hx:not(.on):hover .pxs-k b,.hx:not(.on):focus-visible .pxs-k b{opacity:1;transform:none}
.hx:not(.on):hover .pxs-k i,.hx:not(.on):focus-visible .pxs-k i{opacity:0;transform:translateY(8px)}
.hx:not(.on):hover .pxs-sprite.live .px,.hx:not(.on):focus-visible .pxs-sprite.live .px{opacity:1;transform:none}
.hx:not(.on):hover .pxs-field .px,.hx:not(.on):focus-visible .pxs-field .px{opacity:0;transform:translate(0,-40%)}
.hx:not(.on):hover::after,.hx:not(.on):focus-visible::after{opacity:0}
/* home cover icons: hover brings up a dark tile behind the icon, no glow, no lift */
.proof .proof-caps .pc{isolation:isolate}
.proof .proof-caps .pc::before{content:"";position:absolute;inset:-9px;z-index:0;pointer-events:none;
background:rgba(12,13,14,.78);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
opacity:0;transition:opacity .18s ease}
.proof .proof-caps .pc:hover::before{opacity:1}
.proof .proof-caps .pc svg{position:relative;z-index:1}
.proof .proof-caps .pc:hover svg{transform:none;filter:none}
@media (prefers-reduced-motion:reduce){ .proof .proof-caps .pc::before{transition:none} }
/* FIBA: the arena photograph is the point, so almost all of the tint comes off.
A thin base keeps the caption readable; hover adds a little, not a lot. */
.wcover.no-tint::before{opacity:.14}
.wcover.no-tint:hover::before,.wcover.no-tint.open::before,.wcover.no-tint:focus-visible::before{opacity:.14}
.wcover.no-tint::after{background:linear-gradient(to top,rgba(8,9,10,.7) 0%,rgba(8,9,10,.18) 36%,rgba(8,9,10,0) 62%)}
.wcover.no-tint:hover::after,.wcover.no-tint:focus-visible::after{opacity:1}
.wcover.no-tint.open::after{opacity:.4}
/* cover icon label: clear of the hover tile (which reaches 9px past the icon) and a size up */
.proof .proof-caps{row-gap:24px}
.proof .proof-caps .pc-lab{font-size:clamp(1.1875rem,1.5vw,1.5rem);line-height:1.1}
/* hover tile: a little see-through so the cover photo still reads behind it */
.proof .proof-caps .pc::before{background:rgba(12,13,14,.6)}
/* the tile is there for readability: only slightly see-through, with the blur doing the work */
.proof .proof-caps .pc::before{background:rgba(12,13,14,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* pricing: short term / long term toggle (its own classes: the proof-page filter script claims .seg) */
#models:not(.pt-on) .ptoggle,#models:not(.pt-on) .ptoggle-note{display:none}
#models .mcards[hidden]{display:none}
.ptoggle{display:flex;width:max-content;max-width:100%;border:1px solid var(--rule-hi);margin:0}
.pt-b{font:inherit;font-family:var(--display,var(--sans));font-weight:800;letter-spacing:-.03em;line-height:1;
font-size:clamp(1.0625rem,2vw,1.4375rem);background:none;border:0;cursor:pointer;color:var(--dim);
padding:clamp(12px,1.3vw,17px) clamp(20px,2.6vw,36px);transition:color .2s ease,background-color .25s ease}
.pt-b + .pt-b{border-left:1px solid var(--rule-hi)}
.pt-b:hover{color:var(--fg)}
.pt-b[aria-selected="true"]{background:var(--accent);color:var(--paper)}
.pt-b:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#models .ptoggle-note{margin:14px 0 clamp(26px,3vw,40px);color:var(--dim);font-size:1rem;max-width:62ch;text-align:left}
@media (max-width:560px){ .ptoggle{width:100%} .pt-b{flex:1;white-space:nowrap;padding-inline:clamp(8px,2.6vw,16px);font-size:1rem} }
/* pricing card labels (Retainer, Week rate...): a clear size up from the 10px eyebrow */
.mcard .mc-k,p.mc-k{font-size:clamp(.9375rem,1.15vw,1.125rem);letter-spacing:.14em;line-height:1.25}
@media (max-width:860px){ .mcard .mc-k,p.mc-k{font-size:1rem;letter-spacing:.12em} }
/* How we'd run it, on phones: a vertical timeline. The horizontal rule and
dot per step stacked into a column of cramped, ragged rows; a left rail
reads as the sequence it is, and the type gets room to breathe. */
@media (max-width:620px){
.cb-plan{margin-left:4px;border-left:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}
.cb-plan li{border-top:0;padding:0 0 clamp(26px,7vw,34px) 24px}
.cb-plan li:last-child{padding-bottom:6px}
.cb-plan li::before{position:static;display:block;margin:0 0 .5em;font-size:.75rem}
.cb-plan li::after{left:-4.5px;top:.2em}
.cb-plan h4{font-size:1.3125rem;margin-bottom:.4em}
.cb-plan p{font-size:1rem;line-height:1.5;max-width:none}
.cb-in{margin-top:.9em !important}
.cb-in b{font-size:.8125rem;padding:.5em .7em}
}
/* Proof on phones: the one header pins under the top bar and shrinks as it
does (stack.js drives --k from 0 to 1): the filter and caption fold away
and the tiles get smaller, so nothing is duplicated and nothing jumps. */
@media (max-width:1099px){
.proof-head.pm{
position:sticky;top:var(--mini-top,0px);z-index:6;
transition:top .34s cubic-bezier(.22,.61,.36,1);
}
.proof-head.pm.stuck{box-shadow:0 1px 0 var(--rule)}
.proof-head.pm .proof-bar{row-gap:calc(18px * (1 - var(--k,0)))}
.proof-head.pm .segcol{
height:calc(var(--sh,0px) * (1 - var(--k,0)));
opacity:calc(1 - var(--k,0) * 1.6);overflow:hidden;
}
.proof-head.pm .pxs-cap{
height:calc(var(--ch,0px) * (1 - var(--k,0)));margin-bottom:calc(8px * (1 - var(--k,0)));
opacity:calc(1 - var(--k,0) * 1.6);overflow:hidden;min-height:0;
}
.proof-head.pm{padding-block:calc(14px - 8px * var(--k,0)) calc(12px - 6px * var(--k,0))}
.proof-head.pm .pxstats{width:calc(100% - (100% - 214px) * var(--k,0));margin-top:calc(26px * (1 - var(--k,0)))}
.proof-head.pm .pxstat{padding:calc(12px - 7px * var(--k,0))}
.proof-head.pm .pxs-k{font-size:calc(.8125rem - .1875rem * var(--k,0))}
#windex .wcover{top:var(--stack-top,0px)}
}
@media (max-width:1099px) and (prefers-reduced-motion:reduce){ .proof-head.pm{transition:none} }
/* Home hero on phones: "Hello, we are" was fitted to the full width, as big
as the name, which left the screen shouting. It becomes the quiet line
above the name, and the two actions get a row each with room to breathe. */
@media (max-width:760px){
.hero.home h1.fit .ln-wide{margin-bottom:.1em}
.hero.home .hero-cta{flex-direction:column;align-items:stretch;gap:22px;margin-top:clamp(30px,8vw,40px)}
.hero.home .hero-cta .btn{justify-content:center;padding:1.05em 1.3em}
.hero.home .hero-cta .btn-q{align-self:center;padding:.2em 0}
}
/* An open service tile is red: everything on it is white, never ink. */
.tile.open .tile-name,.tile.open .tile-pair{color:var(--paper)}
.tile.open .tile-mk i{background:#fff}
.tile.open .tp-k{opacity:.78}
/* How we'd run it, wider screens: each step is a tile in the site's own
language (raised panel, big pixel-weight number, the tags pinned to the
foot) instead of a hairline with a stray diamond over a half-empty row. */
@media (min-width:621px){
.cb-plan{
grid-template-columns:repeat(auto-fit,minmax(clamp(220px,22vw,300px),1fr));
gap:2px;align-items:stretch;
}
.cb-plan li{
display:flex;flex-direction:column;
background:var(--raise);border-top:0;
padding:clamp(20px,2vw,30px) clamp(18px,1.9vw,28px) clamp(20px,2vw,28px);
}
.cb-plan li::before{
position:static;display:block;margin:0 0 clamp(14px,1.6vw,22px);
font-family:var(--display,var(--sans));font-size:clamp(1.75rem,2.6vw,2.5rem);
font-weight:800;letter-spacing:-.04em;line-height:1;
padding-bottom:clamp(12px,1.3vw,18px);
border-bottom:2px solid var(--accent);width:fit-content;padding-right:.6em;
}
.cb-plan li::after{display:none}
.cb-plan h4{font-size:clamp(1.25rem,1.7vw,1.625rem);margin-bottom:.5em}
.cb-plan p{font-size:clamp(.9375rem,1.06vw,1.0625rem);line-height:1.5;max-width:44ch}
.cb-plan .cb-in{margin-top:auto !important;padding-top:1.3em}
}
/* a nudge under the week card: what would a week actually be? */
.mc-more{margin:.9em 0 0;font-size:.9375rem;font-weight:700}
.mc-more .lk{color:var(--paper);text-decoration-color:var(--accent)}
.mc-more .arw{display:inline-block;margin-left:.4em;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.mc-more .lk:hover .arw,.mc-more .lk:focus-visible .arw{transform:translateY(3px)}
.mcard:hover .mc-more .lk{text-decoration-color:var(--paper)}
/* two-part headings (One number, Bench +10) are wider than a figure, and a
squeezed neighbour of the open card is narrow: size them to fit */
#models .pr-fig:has(.pr-plus){font-size:clamp(1.75rem,3.2vw,2.9rem);white-space:nowrap}
/* Body copy comes down to a 16px baseline (it was growing to 20px on wide
screens). Headings, ledes and display type are untouched. */
.cols p{font-size:clamp(1rem,1.05vw,1.0625rem);line-height:1.6}
.intro-sub{font-size:clamp(1rem,1.1vw,1.0625rem)}
.row p{font-size:clamp(.9375rem,1vw,1rem)}
.intro-split .intro-r .intro-sub{font-size:clamp(.9375rem,1vw,1rem)}
/* ---------- how we do it: photo behind the hero, faded into the left side ---------- */
.hero-ph>*{position:relative;z-index:1}
.hero-ph>.hero-photo{
position:absolute;z-index:0;pointer-events:none;
top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;
background:url(services-hero.jpg) 72% 50%/cover no-repeat;
opacity:.5;
-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 18%,rgba(0,0,0,.55) 46%,#000 80%),linear-gradient(180deg,#000 62%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(90deg,transparent 0,transparent 18%,rgba(0,0,0,.55) 46%,#000 80%),linear-gradient(180deg,#000 62%,transparent 100%);
mask-composite:intersect;
}
[data-theme="light"] .hero-ph>.hero-photo{opacity:.22}
@media (max-width:760px){
.hero-ph>.hero-photo{background-position:78% 50%;opacity:.38;
-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.6) 70%,#000 100%),linear-gradient(180deg,#000 55%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.6) 70%,#000 100%),linear-gradient(180deg,#000 55%,transparent 100%)}
}
/* photo runs up behind the nav, flush with the top of the page */
.hero-ph>.hero-photo{top:calc(-1 * var(--barh,64px))}
@media all{
body.hero-top > .topbar{background:transparent;transition:background .2s}
body.navopen.hero-top > .topbar{background:var(--bg)}
}
/* heroes with a stat: the scroll cue sits in the flow under it, never on top of the number */
.hero:has(.stat) .scrollcue{position:relative;left:auto;bottom:auto;align-self:flex-start;margin-top:clamp(28px,4vh,44px)}
/* per-page photo: set --ph / --ph-pos on the element; falls back to the services image */
.hero-ph>.hero-photo{background-image:var(--ph,url(services-hero.jpg));background-position:var(--ph-pos,72% 50%)}
[data-theme="light"] .hero-ph>.hero-photo{opacity:.2}
.hero-ph .scrollcue{position:relative;left:auto;bottom:auto;align-self:flex-start;margin-top:clamp(28px,4vh,44px)}
/* stronger fade into the left for brighter photos */
@media (min-width:761px){
.hero-ph>.hero-photo.ph-left{
-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 34%,rgba(0,0,0,.5) 58%,#000 88%),linear-gradient(180deg,#000 62%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,transparent 34%,rgba(0,0,0,.5) 58%,#000 88%),linear-gradient(180deg,#000 62%,transparent 100%)}
}
@media (max-width:760px){
.hero-ph>.hero-photo.ph-left{
-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 25%,rgba(0,0,0,.6) 75%,#000 100%),linear-gradient(180deg,#000 55%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,transparent 25%,rgba(0,0,0,.6) 75%,#000 100%),linear-gradient(180deg,#000 55%,transparent 100%)}
}
/* connect the dots: out-of-focus photo behind the opening of the section */
.band-ph{overflow:hidden}
.band-ph>.wrap{position:relative;z-index:1}
.band-ph>.band-photo{
position:absolute;z-index:0;pointer-events:none;
top:-24px;left:-24px;right:-24px;height:min(1100px,100%);
background:url(connect-bg.jpg) 50% 40%/cover no-repeat;
filter:blur(5px);opacity:.33;
-webkit-mask-image:linear-gradient(180deg,#000 0,#000 45%,transparent 100%);
mask-image:linear-gradient(180deg,#000 0,#000 45%,transparent 100%);
}
[data-theme="light"] .band-ph>.band-photo{opacity:.18}
@media (max-width:760px){.band-ph>.band-photo{opacity:.3;height:min(900px,100%)}}
/* connect the dots: fade in from the left so the headline sits on clean ground */
.band-ph>.band-photo{
opacity:.42;
-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 22%,rgba(0,0,0,.55) 52%,#000 85%),linear-gradient(180deg,#000 0,#000 45%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(90deg,transparent 0,transparent 22%,rgba(0,0,0,.55) 52%,#000 85%),linear-gradient(180deg,#000 0,#000 45%,transparent 100%);
mask-composite:intersect;
}
[data-theme="light"] .band-ph>.band-photo{opacity:.2}
@media (max-width:760px){.band-ph>.band-photo{opacity:.34;
-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 15%,rgba(0,0,0,.6) 75%,#000 100%),linear-gradient(180deg,#000 0,#000 45%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,transparent 15%,rgba(0,0,0,.6) 75%,#000 100%),linear-gradient(180deg,#000 0,#000 45%,transparent 100%)}}
/* connect the dots: true black ground in dark mode */
:root:not([data-theme="light"]) #services.band-ph::before{background:#000}
:root:not([data-theme="light"]) .band-ph>.band-photo{opacity:.55}
@media (max-width:760px){:root:not([data-theme="light"]) .band-ph>.band-photo{opacity:.45}}
/* connect the dots: the site's dark grey ground, not black */
:root:not([data-theme="light"]) #services.band-ph::before{background:var(--bg)}
/* medium grey band, a shade darker (dark mode) */
:root:not([data-theme="light"]) .band-c::before{background:color-mix(in srgb, var(--fg) 5.5%, transparent)}
/* red pages: the current-page nav button was white type on a white fill */
body.invert .navset .nav-cta[aria-current="page"]{background:#fff;color:#F54D5E}
body.invert .navset .nav-cta:hover,body.invert .navset .nav-cta:focus-visible{background:transparent;color:var(--paper)}
/* proof: a dark photo can carry more light */
.hero-ph>.hero-photo[style*="proof-hero"]{opacity:.7}
[data-theme="light"] .hero-ph>.hero-photo[style*="proof-hero"]{opacity:.22}
/* photos swapped: table photo in the Proof header, cube photo behind Connect the dots */
.hero-ph>.hero-photo[style*="proof-hero"]{opacity:.5}
[data-theme="light"] .hero-ph>.hero-photo[style*="proof-hero"]{opacity:.2}
:root:not([data-theme="light"]) .band-ph>.band-photo{opacity:.85}
@media (max-width:760px){:root:not([data-theme="light"]) .band-ph>.band-photo{opacity:.7}}
[data-theme="light"] .band-ph>.band-photo{opacity:.3}
/* about: watch photo, dimmed well back */
.hero-ph>.hero-photo[style*="about-hero"]{opacity:.24}
@media (max-width:760px){.hero-ph>.hero-photo[style*="about-hero"]{opacity:.2}}
[data-theme="light"] .hero-ph>.hero-photo[style*="about-hero"]{opacity:.12}
/* about: a main heading that gathers "The deal" and "How we think" under it */
.band-know{padding-block:clamp(60px,10vh,140px) 0}
.band-know .know-head{margin:0;max-width:none;font-size:clamp(2.75rem,8vw,7.5rem);line-height:.95;letter-spacing:-.045em}
#know + #ethos{padding-top:clamp(40px,6vh,80px)}
/* field notes: desk photo, dimmed back */
.hero-ph>.hero-photo[style*="notes-hero"]{opacity:.24}
@media (max-width:760px){.hero-ph>.hero-photo[style*="notes-hero"]{opacity:.2}}
[data-theme="light"] .hero-ph>.hero-photo[style*="notes-hero"]{opacity:.1}
/* =====================================================================
ABOUT: structure and layout
===================================================================== */
#top section[id]{scroll-margin-top:68px}
@media (max-width:880px){#top section[id]{scroll-margin-top:118px}}
/* ---- if you read nothing else ---- */
.glance .glance-grid{display:grid;gap:clamp(28px,4vw,64px);align-items:end}
@media (min-width:1000px){.glance .glance-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
.glance .blockhead{margin-bottom:.35em}
.glance .lede{margin:0;max-width:34ch}
.g-stats{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--rule-hi)}
.g-s{padding:clamp(18px,2vw,28px) clamp(14px,1.6vw,24px) clamp(18px,2vw,28px) 0;border-bottom:1px solid var(--rule)}
.g-s:nth-child(odd){border-right:1px solid var(--rule);margin-right:clamp(14px,1.6vw,24px)}
.g-s dt{font-family:var(--display,var(--sans));font-weight:800;color:var(--accent);
font-size:clamp(2rem,4.2vw,3.75rem);line-height:.9;letter-spacing:-.05em}
.g-s dd{margin:.55em 0 0;color:var(--dim);font-size:.9375rem;line-height:1.35;font-weight:600;max-width:20ch}
/* ---- chapter nav ---- */
.chapnav{position:sticky;top:var(--chap-top,0px);z-index:55;
background:color-mix(in srgb,var(--bg) 88%,transparent);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
border-bottom:1px solid var(--rule);transition:top .34s cubic-bezier(.22,.61,.36,1)}
.chapnav ol{list-style:none;margin:0 auto;padding:0 var(--gl);max-width:var(--measure);
display:flex;gap:clamp(18px,3vw,44px);overflow-x:auto;scrollbar-width:none}
.chapnav ol::-webkit-scrollbar{display:none}
.chapnav a{position:relative;display:block;padding:15px 0 13px;white-space:nowrap;text-decoration:none;
color:var(--dim);font-size:.8125rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.chapnav a::after{content:"";position:absolute;left:0;right:100%;bottom:-1px;height:3px;background:var(--accent);transition:right .3s ease}
.chapnav a:hover{color:var(--fg)}
.chapnav a[aria-current="true"]{color:var(--fg)}
.chapnav a[aria-current="true"]::after{right:0}
/* ---- the shape of it: a timeline whose words grow ---- */
.tl{list-style:none;margin:clamp(44px,6vw,88px) 0 clamp(40px,5vw,72px);padding:0;position:relative;
display:grid;gap:44px}
.tl-i{position:relative;padding-left:34px}
.tl::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:var(--rule-hi)}
.tl-node{position:absolute;left:0;top:6px;width:14px;height:14px;background:var(--accent);outline:5px solid var(--bg)}
.tl-i:nth-child(1) .tl-node{transform:scale(.7);transform-origin:0 0}
.tl-i:nth-child(3) .tl-node{transform:scale(1.35);transform-origin:0 0}
.tl-when{margin:0 0 .5em;color:var(--accent);font-weight:800;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase}
.tl-word{margin:0;font-family:var(--display,var(--sans));font-weight:800;letter-spacing:-.06em;line-height:.88;
font-size:clamp(3.25rem,15vw,5.5rem)}
.tl-i:nth-child(1) .tl-word{font-size:clamp(2.75rem,12.5vw,4.6rem);color:color-mix(in srgb,var(--fg) 72%,var(--bg))}
.tl-i:nth-child(3) .tl-word{font-size:clamp(3.75rem,17.5vw,6.4rem)}
.tl-era{margin:.4em 0 .8em;font-weight:800;font-size:1.0625rem;letter-spacing:-.01em;color:var(--dim);
display:flex;align-items:center;gap:12px}
.tl-era::before{content:"";width:22px;height:2px;background:var(--rule-hi)}
.tl-say p{margin:0 0 1em;color:var(--dim);font-size:1rem;line-height:1.58}
.tl-say p b{color:var(--fg);font-weight:800}
.tl-ai{margin:clamp(14px,2vw,24px) 0 0;max-width:62ch;color:var(--dim);font-size:1rem;line-height:1.6}
@media (min-width:980px){
.tl{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,56px);align-items:end}
.tl::before{left:0;right:0;top:6px;bottom:auto;width:auto;height:2px}
.tl-i{padding:44px 0 0}
.tl-node{left:0;top:0}
.tl-i:nth-child(1) .tl-node,.tl-i:nth-child(3) .tl-node{transform-origin:0 0}
.tl-word{font-size:clamp(3rem,6.6vw,7rem)}
.tl-i:nth-child(1) .tl-word{font-size:clamp(2.5rem,5.2vw,5.4rem)}
.tl-i:nth-child(3) .tl-word{font-size:clamp(3.5rem,8.2vw,9rem)}
.tl-i{align-self:start}
}
/* ---- the deal: four clauses as tiles ---- */
#ethos .terms{border-top:0;gap:16px}
#ethos .term{background:var(--raise);border:1px solid var(--rule);
padding:clamp(24px,2.6vw,40px);transition:border-color .25s,transform .25s}
#ethos .term::before{content:"";position:absolute;left:-1px;top:-1px;width:44px;height:4px;background:var(--accent);transition:width .35s ease}
#ethos .term:hover{border-color:var(--rule-hi)}
#ethos .term:hover::before{width:calc(100% + 2px)}
/* ---- how we think: copy on the left, circles widening as you read ---- */
.mind{display:grid;gap:clamp(36px,5vw,72px)}
@media (min-width:1000px){
.mind{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:"l r" "g r";grid-template-rows:auto 1fr;align-items:start}
.mind-l{grid-area:l} .mind-r{grid-area:r} .mind-g{grid-area:g;position:sticky;top:110px;align-self:start}
}
.mind .blockhead{margin-bottom:.4em}
.rings{display:block;width:min(100%,360px);margin:clamp(24px,3vw,40px) 0 0;overflow:visible}
.rings .rg{fill:none;stroke:var(--rule-hi);stroke-width:1.5;transition:stroke .5s,fill .5s}
.rings .rt{fill:var(--dim);font:800 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-anchor:middle;transition:fill .5s}
.rings[data-step="1"] .r1,.rings[data-step="2"] .r1,.rings[data-step="3"] .r1,.rings[data-step="4"] .r1,
.rings[data-step="2"] .r2,.rings[data-step="3"] .r2,.rings[data-step="4"] .r2,
.rings[data-step="3"] .r3,.rings[data-step="4"] .r3,
.rings[data-step="4"] .r4{stroke:var(--accent);fill:color-mix(in srgb,var(--accent) 12%,transparent)}
.rings[data-step="1"] .t1,.rings[data-step="2"] .t1,.rings[data-step="3"] .t1,.rings[data-step="4"] .t1,
.rings[data-step="2"] .t2,.rings[data-step="3"] .t2,.rings[data-step="4"] .t2,
.rings[data-step="3"] .t3,.rings[data-step="4"] .t3,
.rings[data-step="4"] .t4{fill:var(--fg)}
.mind-r .aside{margin-top:clamp(28px,3vw,44px)}
/* ---- what stayed the same ---- */
#same .cols p:first-child{font-family:var(--display,var(--sans));font-weight:800;letter-spacing:-.03em;color:var(--fg);
font-size:clamp(1.25rem,1.9vw,1.75rem);line-height:1.2}
/* rings: stacked layouts — centred, tighter, framed */
@media (max-width:999px){
.mind{gap:clamp(20px,4vw,36px)}
.mind-g{display:flex;justify-content:center;padding:clamp(20px,5vw,36px) 0;border-block:1px solid var(--rule-hi)}
.rings{margin:0 auto;width:min(80%,320px)}
}
/* multipliers: designed */
@media (min-width:1000px){
.mult-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(48px,6vw,96px);align-items:start}
.mult-head{position:sticky;top:110px}
}
.mult-key{margin:28px 0 0;font:800 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--paper);opacity:.85}
.mult-key span{display:inline-flex;align-items:center;gap:10px}
.mult-key span::before{content:"";width:34px;height:10px;background:repeating-linear-gradient(90deg,#fff 0 6px,transparent 6px 8px)}
#multipliers .mults{margin:0;border-top:0;display:grid;gap:12px}
#multipliers .mults li{display:grid;grid-template-columns:minmax(86px,.22fr) 1fr;grid-template-areas:"x t" "x b";align-items:center;column-gap:20px;row-gap:12px;
padding:18px 22px;border:0;background:rgba(0,0,0,.14);flex-direction:unset}
#multipliers .mu-x{grid-area:x;font-size:clamp(34px,4.4vw,56px);line-height:1;color:var(--paper);font-weight:800;letter-spacing:-.02em}
#multipliers .mu-t{grid-area:t;color:var(--paper);font-weight:600}
#multipliers .mu-bar{grid-area:b;display:block;height:12px;width:calc(max(var(--v),.4) / 20 * 100%);min-width:12px;
background:repeating-linear-gradient(90deg,#fff 0 8px,transparent 8px 11px)}
#multipliers .mults li.mu-big{background:#fff}
#multipliers .mu-big .mu-x,#multipliers .mu-big .mu-t{color:var(--accent)}
#multipliers .mu-big .mu-bar{background:repeating-linear-gradient(90deg,var(--accent) 0 8px,transparent 8px 11px)}
#multipliers .mu-free .mu-bar{background:none;border:2px dashed rgba(255,255,255,.7);height:10px;width:56px}
#multipliers .mults li.mu-free{background:transparent;outline:1px solid rgba(255,255,255,.35);outline-offset:-1px}
#multipliers .mult-body .aside{margin-top:28px}
@media (max-width:640px){#multipliers .mults li{grid-template-columns:1fr;grid-template-areas:"x" "t" "b";padding:16px 18px}}
/* connect the dots: board layout */
.cd{display:grid;gap:clamp(28px,4vw,48px)}
@media (min-width:1000px){
.cd{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(48px,6vw,96px);align-items:start}
.cd-head{position:sticky;top:110px}
}
.cd-board{position:relative;background-color:var(--raise);border:1px solid var(--rule-hi);
background-image:radial-gradient(circle,rgba(255,255,255,.13) 1.3px,transparent 1.6px);background-size:24px 24px;
padding:clamp(18px,2.4vw,30px)}
[data-theme="light"] .cd-board{background-image:radial-gradient(circle,rgba(0,0,0,.14) 1.3px,transparent 1.6px)}
.cd-board::before{content:"";position:absolute;left:-1px;top:-1px;width:56px;height:4px;background:var(--accent)}
.cd-lab{display:flex;justify-content:space-between;align-items:center;margin:0 0 clamp(18px,2vw,26px);
font:800 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.cd-px{display:inline-flex;gap:4px}.cd-px i{width:8px;height:8px;background:var(--accent);opacity:.9}
.cd-px i:nth-child(2){opacity:.55}.cd-px i:nth-child(3){opacity:.25}
.cd-board #combos{margin-top:0}
.cd-board .cb-chip{background:var(--bg);display:inline-flex;align-items:center;gap:.6em}
.cd-board .cb-chip::before{content:"";width:8px;height:8px;background:var(--accent);flex:none}
.cd-board .cb-chip.on::before{background:#fff}
.cd-board .cb-out{border-top:1px solid var(--rule-hi);padding-top:clamp(18px,2vw,26px)}
.cd-board .cb-out .cb-name{font-size:clamp(1.75rem,3.2vw,2.75rem)}
/* home: lineup photo, dimmed back */
.hero-ph>.hero-photo[style*="home-hero"]{opacity:.28}
@media (max-width:760px){.hero-ph>.hero-photo[style*="home-hero"]{opacity:.2}}
[data-theme="light"] .hero-ph>.hero-photo[style*="home-hero"]{opacity:.12}
/* home lineup: show the whole row — lighter left fade, a touch more presence */
.hero-ph>.hero-photo[style*="home-hero"]{opacity:.36}
@media (min-width:761px){
.hero-ph>.hero-photo.ph-left[style*="home-hero"]{
-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.35) 0,rgba(0,0,0,.6) 30%,#000 60%),linear-gradient(180deg,#000 66%,transparent 100%);
mask-image:linear-gradient(90deg,rgba(0,0,0,.35) 0,rgba(0,0,0,.6) 30%,#000 60%),linear-gradient(180deg,#000 66%,transparent 100%)}
}
@media (max-width:760px){
.hero-ph>.hero-photo[style*="home-hero"]{opacity:.28;background-size:auto 100%!important;background-repeat:no-repeat}
.hero-ph>.hero-photo.ph-left[style*="home-hero"]{
-webkit-mask-image:linear-gradient(90deg,#000 0,#000 100%),linear-gradient(180deg,#000 60%,transparent 100%);
mask-image:linear-gradient(90deg,#000 0,#000 100%),linear-gradient(180deg,#000 60%,transparent 100%)}
}
[data-theme="light"] .hero-ph>.hero-photo[style*="home-hero"]{opacity:.16}
/* home lineup: crop past the black ceiling strip so the photo starts at the very top */
@media (min-width:761px){.hero-ph>.hero-photo[style*="home-hero"]{background-size:cover;background-position:50% 100%!important;transform:none}}
@media (max-width:760px){.hero-ph>.hero-photo[style*="home-hero"]{background-size:auto 100%!important;background-position:50% 100%!important}}
/* proof: logo strip sits right under the last project card */
#index.band{padding-bottom:0}
#index .wrap>*:last-child,#index article:last-of-type{margin-bottom:0}
/* about: aside under the glance lede */
.g-note{margin:1.1em 0 0;max-width:52ch;color:var(--dim);font-size:clamp(1rem,1.2vw,1.125rem);line-height:1.55}
.g-note b{color:var(--fg);font-weight:700}
/* Places: a tidy grid instead of a wrapping run */
.places{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(20px,3vw,44px);max-width:min(100%,900px)}
.places .pl{
padding:clamp(14px,1.6vw,22px) 0;border-left:0;
border-top:1px solid var(--rule);
}
.places .pl:first-child{padding-left:0}
.places .pl b{font-size:clamp(1.25rem,2.6vw,2.25rem)}
@media (max-width:640px){
.places{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.places .pl{padding:12px 0}
.places .pl b{font-size:1.25rem}
.places .pl:last-child{grid-column:1 / -1}
}
/* Off-white over red: a touch lighter than on dark so it stays clean on the red */
.band-b,body.invert,.seg-b[aria-pressed="true"],.navset .nav-cta:hover,.navset .nav-cta:focus-visible,.navset .nav-cta[aria-current="page"],.wp-step:hover,.wp-step:focus-visible,.tile.open .tile-face{--paper:#FFF9EE}
.mcard:hover,.mcard:focus-visible,.btn,.tile.open,.send:hover{--paper:#FFF9EE}
.hero .stat{margin-top:clamp(44px,5.4vw,84px)}
@media (max-width:760px){.hero-ph>.hero-photo[style*="home-hero"]{background-position:36% 50%!important;opacity:.34}}
@media (min-width:761px){.hero-ph>.hero-photo[style*="home-hero"]{opacity:.44}}
.herofx{display:none!important}
/* second hero photo (the lineup): its own strength and anchor */
@media (min-width:761px){.hero-ph>.hero-photo.hh-b[style*="home-hero"]{opacity:.52;background-size:cover;background-position:50% 100%!important}}
@media (max-width:760px){.hero-ph>.hero-photo.hh-b[style*="home-hero"]{opacity:.4;background-size:auto 100%!important;background-position:50% 100%!important}}
#proof{padding-bottom:0}
#proof .proofs{margin-bottom:0}
#proof-more{padding-top:clamp(28px,3.4vw,48px)}
/* third hero photo (the boardroom): bright source, so it sits back further */
@media (min-width:761px){.hero-ph>.hero-photo.hh-c[style*="home-hero"]{opacity:.3;background-size:cover;background-position:50% 55%!important}}
@media (max-width:760px){.hero-ph>.hero-photo.hh-c[style*="home-hero"]{opacity:.26;background-size:auto 100%!important;background-position:46% 50%!important}}
[data-theme="light"] .hero-ph>.hero-photo.hh-c[style*="home-hero"]{opacity:.16}
/* fourth hero photo (the street): colourful and bright, so it sits well back */
@media (min-width:761px){.hero-ph>.hero-photo.hh-d[style*="home-hero"]{opacity:.34;background-size:cover;background-position:50% 60%!important}}
@media (max-width:760px){.hero-ph>.hero-photo.hh-d[style*="home-hero"]{opacity:.28;background-size:auto 100%!important;background-position:40% 50%!important}}
[data-theme="light"] .hero-ph>.hero-photo.hh-d[style*="home-hero"]{opacity:.18}
/* how we think: tie the rings to the steps */
#mindset .rows.seq{counter-reset:ring}
#mindset .rows.seq .row{counter-increment:ring}
#mindset .rows.seq .row h3::before{
content:counter(ring);display:inline-grid;place-items:center;
width:1.5em;height:1.5em;margin-right:.6em;border:1.5px solid var(--accent);border-radius:50%;
font:800 .7em/1 var(--sans);color:var(--accent);vertical-align:.12em;
}
.rings-cap{margin:14px 0 0;max-width:30ch;font-size:.8125rem;line-height:1.5;color:var(--dim)}
@media (min-width:1000px){
.mind{row-gap:clamp(20px,2.4vw,32px)}
.mind-g{top:140px}
}
.rings .rt{font-size:9px;letter-spacing:.12em}
@media (min-width:1240px){
.mind{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 240px;grid-template-areas:"l r g";grid-template-rows:auto;column-gap:clamp(32px,3.6vw,64px)}
.mind-g{top:120px;align-self:start}
.mind-g .rings{margin-top:6px;width:100%}
#mindset .rows.seq .row{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
}
/* home hero: content anchored toward the bottom of the first screen */
@media (min-width:1080px){
.hero.home{min-height:calc(100svh - var(--barh,64px));align-content:end;padding-bottom:clamp(36px,5vh,64px)}
}
@media (max-width:1079px){
.hero.home{min-height:calc(100svh - var(--barh,56px));display:flex;flex-direction:column;justify-content:flex-end}
}
/* every page's hero matches the home page: full first screen, headline anchored low */
.hero:not(.home){min-height:calc(100svh - var(--barh,64px));display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(36px,5vh,64px)}
@media (min-width:1100px){
.hero.has-stats:not(.home){display:grid;align-content:end}
}
/* home hero: buttons and the scroll cue share one baseline along the bottom */
@media (min-width:1080px){
.hero.home .hero-cta{grid-row:2;align-self:center;margin:clamp(24px,3.4vh,44px) 0 0}
.hero.home .scrollcue{grid-column:1;grid-row:2;align-self:center;margin:clamp(24px,3.4vh,44px) 0 0}
}
/* fifth hero photo: the studio table */
@media (min-width:761px){.hero-ph>.hero-photo.hh-e[style*="home-hero"]{opacity:.34;background-size:cover;background-position:50% 55%!important}}
@media (max-width:760px){.hero-ph>.hero-photo.hh-e[style*="home-hero"]{opacity:.3;background-size:auto 100%!important;background-position:45% 50%!important}}
[data-theme="light"] .hero-ph>.hero-photo.hh-e[style*="home-hero"]{opacity:.18}
/* pricing toggle: one red block that slides between the two, pixel-notched corners, a small pixel marking the active side */
.ptoggle{--n:6px;position:relative;display:grid;grid-template-columns:1fr 1fr;width:max-content;min-width:min(100%,560px);background:var(--raise);
clip-path:polygon(var(--n) 0,calc(100% - var(--n)) 0,calc(100% - var(--n)) var(--n),100% var(--n),100% calc(100% - var(--n)),calc(100% - var(--n)) calc(100% - var(--n)),calc(100% - var(--n)) 100%,var(--n) 100%,var(--n) calc(100% - var(--n)),0 calc(100% - var(--n)),0 var(--n),var(--n) var(--n))}
.ptoggle::before{content:"";position:absolute;z-index:0;top:0;bottom:0;left:0;width:50%;background:var(--accent);
transition:transform .42s cubic-bezier(.34,1.45,.5,1)}
.ptoggle:has(#t-long[aria-selected="true"])::before{transform:translateX(100%)}
.ptoggle .pt-b{position:relative;z-index:1;background:none!important;border:0!important;display:flex;align-items:center;justify-content:center;gap:.6em;white-space:nowrap}
.ptoggle .pt-b::before{content:"";width:.42em;height:.42em;background:currentColor;opacity:0;transform:scale(0);transition:opacity .2s ease,transform .3s cubic-bezier(.34,1.7,.5,1)}
.ptoggle .pt-b[aria-selected="true"]::before{opacity:1;transform:scale(1)}
.ptoggle .pt-b:not([aria-selected="true"]):hover{color:var(--accent)}
@media (prefers-reduced-motion:reduce){.ptoggle::before,.ptoggle .pt-b::before{transition:none}}
@media (max-width:560px){.ptoggle{width:100%;min-width:0}}
/* pricing toggle, final: centered, no boxes, one underline that slides to the active word */
.ptoggle{clip-path:none;background:none;border:0;margin:0 auto;width:max-content;min-width:0;max-width:100%;grid-template-columns:auto auto;column-gap:clamp(28px,5vw,64px);border-bottom:1px solid var(--rule-hi)}
.ptoggle::before{top:auto;bottom:-1px;height:3px;width:var(--w,50%);left:var(--x,0);transition:left .4s cubic-bezier(.34,1.3,.5,1),width .4s cubic-bezier(.34,1.3,.5,1);transform:none!important}
.ptoggle:has(#t-long[aria-selected="true"])::before{left:var(--x2,50%);width:var(--w2,50%)}
.ptoggle .pt-b{padding:clamp(10px,1.2vw,16px) 2px;color:var(--dim)}
.ptoggle .pt-b::before{display:none}
.ptoggle .pt-b[aria-selected="true"]{color:var(--fg)}
.ptoggle .pt-b:not([aria-selected="true"]):hover{color:var(--fg)}
#models .ptoggle-note{text-align:center;margin-inline:auto}
@media (max-width:560px){.ptoggle{width:100%;column-gap:0;grid-template-columns:1fr 1fr}}
/* home headline: a hair of stroke in the text color to push ExtraBold a little heavier */
.hero.home h1.fit .ln{-webkit-text-stroke:.015em currentColor;paint-order:stroke fill}
/* home hero: tagline leads, icons follow, and a plain "Say hello" text link closes the screen in the lower right */
.hero-hello{display:inline-flex;align-items:center;gap:.55em;color:var(--fg);text-decoration:none;font-family:var(--display,var(--sans));font-weight:800;letter-spacing:-.025em;font-size:clamp(1.25rem,1.8vw,1.625rem);line-height:1;padding-bottom:.28em;border-bottom:2px solid var(--accent);transition:gap .35s cubic-bezier(.16,1,.3,1),color .2s ease}
.hero-hello:hover,.hero-hello:focus-visible{gap:.9em;color:var(--accent);outline:0}
.hero.home .hero-side .herolede{margin:0 0 clamp(18px,2.2vw,30px)}
@media (min-width:1080px){
.hero.home .hero-side{margin-bottom:clamp(8px,1.6vh,20px)}
.hero.home .hero-tiles{margin:0}
.hero.home .hero-hello{grid-column:2;grid-row:2;justify-self:end;align-self:center;margin:clamp(24px,3.4vh,44px) 0 0}
}
@media (max-width:1079px){.hero.home .hero-hello{align-self:flex-start;margin-top:clamp(28px,8vw,40px)}}
/* pricing toggle: bigger words; focus shows as color, not a box */
.ptoggle .pt-b{font-size:clamp(1.5rem,3vw,2.5rem);padding:clamp(12px,1.4vw,20px) 2px}
.ptoggle .pt-b:focus,.ptoggle .pt-b:focus-visible{outline:0}
.ptoggle .pt-b:focus-visible{color:var(--accent)}
.ptoggle{column-gap:clamp(32px,6vw,80px)}
@media (max-width:560px){.ptoggle .pt-b{font-size:clamp(1.0625rem,4.6vw,1.25rem);white-space:nowrap}}
/* home hero on phones: Scroll left, Say hello right, one shared baseline */
@media (max-width:1079px){
.hero.home{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:end;justify-content:stretch}
.hero.home>*{grid-column:1 / -1}
.hero.home .scrollcue{grid-column:1;grid-row:3;align-self:center;margin-top:clamp(28px,8vw,40px)}
.hero.home .hero-hello{grid-column:2;grid-row:3;justify-self:end;align-self:center;margin-top:clamp(28px,8vw,40px)}
}
/* phones: room between the headline and the tagline */
@media (max-width:1079px){ .hero.home .hero-side{margin-top:clamp(28px,7.5vw,44px)} }
/* full-width desktop: icons above the tagline (the original order); phones keep the tagline first */
@media (min-width:1080px){
.hero.home .hero-side{display:flex;flex-direction:column-reverse}
.hero.home .hero-side .herolede{margin:0}
.hero.home .hero-tiles{margin:0 0 clamp(30px,3.2vw,46px)}
}
/* the icon row never outgrows its column, at any width */
.hero-tiles{min-width:0;max-width:100%}
.hero-tiles .pxstats{width:100%;max-width:480px;min-width:0}
.hero.home .hero-side{min-width:0}
/* Bunky runs the break row once and leaves the note behind him */
.break-note.bk-wait{clip-path:inset(-4px 100% -4px 0)}
.bk-run{position:absolute;left:0;top:0;width:18px;height:18px;background:var(--accent);opacity:0;pointer-events:none;
clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.bk-run.bk-open{clip-path:polygon(0 0,100% 0,100% 30%,55% 50%,100% 70%,100% 100%,0 100%)}
/* Proof filter: same treatment as the pricing toggle. Plain words, left aligned, one underline that slides to the active one. */
.seg{position:relative;border:0;margin:0;width:max-content;max-width:100%;gap:clamp(22px,3.4vw,52px);border-bottom:1px solid var(--rule-hi)}
.seg::after{content:"";position:absolute;left:var(--x,0);bottom:-1px;width:var(--w,0);height:3px;background:var(--accent);
transition:left .4s cubic-bezier(.34,1.3,.5,1),width .4s cubic-bezier(.34,1.3,.5,1)}
.seg .seg-b{background:none!important;border:0!important;padding:clamp(8px,1vw,14px) 2px;font-size:clamp(1.25rem,2.4vw,2rem);color:var(--dim);white-space:nowrap}
.seg .seg-b + .seg-b{border-left:0}
.seg .seg-b:hover,.seg .seg-b[aria-pressed="true"]{color:var(--fg)}
.seg .seg-b:focus,.seg .seg-b:focus-visible{outline:0}
.seg .seg-b:focus-visible{color:var(--accent)}
@media (max-width:560px){.seg{width:100%;gap:0;justify-content:space-between}.seg .seg-b{font-size:clamp(1.0625rem,4.8vw,1.25rem);flex:0 1 auto}}
@media (prefers-reduced-motion:reduce){.seg::after{transition:none}}
/* about: faded photo behind "Friends of ours", red restored */
#friends.band{position:relative;isolation:isolate;background:url(friends-room.jpg) center/cover no-repeat,var(--accent)}
#friends.band::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);opacity:.88}
/* theme switch + Say hello stay put in the bar; the pages live in the hamburger */
.navset.topbar-fixed{
position:relative;inset:auto;z-index:70;height:auto;transform:none;overflow:visible;
opacity:1;visibility:visible;pointer-events:auto;background:none;padding:0;
flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-end;
gap:14px;margin-left:auto;font-size:.9375rem}
.navset.topbar-fixed .nav-cta{font-size:.9375rem;font-weight:600;letter-spacing:0;line-height:1.2;
white-space:nowrap;text-decoration:none;margin-left:0;padding:7px 14px;border:1px solid var(--accent);color:var(--fg)}
.navset.topbar-fixed .nav-cta:hover,.navset.topbar-fixed .nav-cta:focus-visible{background:var(--accent);color:var(--paper)}
.navtoggle{margin-left:0}
/* inner-page statements under the headline: breathing room above the scroll cue */
.hero:not(.home) .herolede{margin-bottom:clamp(30px,5vh,52px)}
/* open offer (Field notes): close the gap above and below the box */
#more:has(+ .wrap > .callout){padding-bottom:clamp(14px,2vw,26px)}
.wrap:has(> .callout) > .callout{margin-block:clamp(14px,1.8vw,24px)}
.wrap:has(> .callout) + .band{padding-top:clamp(28px,3.4vw,48px)}
/* How we think: narrower left column, a roomier diagram on the right */
@media (min-width:1240px){
.mind{grid-template-columns:minmax(0,.86fr) minmax(0,1.2fr) minmax(300px,.6fr);column-gap:clamp(28px,3.2vw,56px)}
.mind-g .rings{width:100%;max-width:320px}
.mind-g .rings-cap{max-width:34ch}
}
/* "-ish": the timeline words, a little less sure of themselves */
.tl-word .ish{font-size:.42em;letter-spacing:-.01em;font-weight:800;color:var(--dim);white-space:nowrap;margin-left:.04em}
/* project drawer: one plain line up top saying what the thing is */
.wp-text p.wp-what{margin:0 0 1em;padding-bottom:.9em;border-bottom:1px solid var(--rule-hi);font-weight:600;color:var(--paper)}
.wp-text p.wp-what b{display:block;margin-bottom:.25em;color:var(--accent);font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800}
/* site map page + footer link */
.sitemap{list-style:none;margin:0 0 clamp(24px,3vw,40px);padding:0;border-top:1px solid var(--rule-hi);counter-reset:sm}
.sitemap li{counter-increment:sm;display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(12px,3vw,48px);align-items:baseline;padding:clamp(16px,2vw,24px) 0;border-bottom:1px solid var(--rule-hi)}
.sitemap .lk{font-family:var(--display,var(--sans));font-weight:800;letter-spacing:-.035em;line-height:1.05;font-size:clamp(1.5rem,3.2vw,2.75rem);text-decoration:none}
.sitemap .lk:hover{text-decoration:underline}
.sitemap .sm-d{color:var(--dim);font-size:clamp(.9375rem,1.1vw,1.0625rem);line-height:1.5;max-width:60ch}
@media (max-width:640px){.sitemap li{grid-template-columns:1fr;gap:6px}}
.foot-sm{color:inherit;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.15em;font-weight:600}
.foot-sm:hover,.foot-sm:focus-visible{text-decoration-color:currentColor}
/* footer navigation: small */
footer .foot-nav{display:flex;flex-wrap:wrap;gap:6px clamp(14px,1.8vw,22px);padding-block:clamp(18px,2.6vh,26px) 0}
footer .foot-nav a{font-size:.8125rem;font-weight:600;letter-spacing:0;line-height:1.3;color:var(--dim);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:.09em;text-underline-offset:.16em;transition:text-decoration-color .2s,color .2s}
footer .foot-nav a:hover,footer .foot-nav a:focus-visible{color:var(--fg);text-decoration-color:currentColor}
footer .wrap + .wrap.foot-id{padding-top:clamp(14px,2vh,20px)}
/* accessibility: skip link, screen-reader text, form focus */
.skip{position:fixed;left:16px;top:-80px;z-index:200;padding:12px 18px;background:var(--accent);color:#141516;font-weight:700;font-size:1rem;text-decoration:none;border-radius:2px;transition:top .15s}
.skip:focus,.skip:focus-visible{top:12px;outline:2px solid var(--fg);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
main:focus{outline:none}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--accent)}
/* accessibility: contrast for small text. The coral stays the brand colour;
small coral text on light surfaces and cream-dim text on the red page get
a slightly deeper or fuller value so they read at 4.5:1. */
:root[data-theme="light"] .co-k,
:root[data-theme="light"] .co-lbl,
:root[data-theme="light"] .co-close b,
:root[data-theme="light"] .mc-k,
:root[data-theme="light"] .pxs-cap > span{color:#C4202C}
body.invert .navset .nav-cta[aria-current="page"]{color:#C4202C}
body.invert footer .foot-nav a,
body.invert footer .wrap,
body.invert footer .wrap span,
body.invert footer .foot-sm{color:#FFF9EE}
/* Bunky: say what the player is doing, every level */
.bk-goal{margin:0 0 10px;font-weight:700;font-size:1rem;line-height:1.3;color:var(--paper,#F3EBDA);min-height:1.3em}
.bk-goal:empty{display:none}
.bk-rules{display:grid;gap:10px;margin-top:14px;max-width:52ch}
.bk-rules > span{display:grid;grid-template-columns:4.2em 1fr;gap:0 14px;align-items:baseline;font-size:.9375rem;line-height:1.45;color:#D1CABC}
.bk-rules b.bk-l{font-size:.75rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:#F54D5E}
.bk-rules > span > span b{color:var(--paper);font-weight:800}
.bunky{grid-template-columns:minmax(0,1fr)}
.bk-box{min-width:0}
.bk-top{flex-wrap:wrap;gap:6px 14px}
.bk-hud{white-space:normal;text-align:right}
@media (max-width:640px){
.bk-name{font-size:1.5rem}
.bk-hud{font-size:.875rem}
.bk-goal{font-size:.9375rem}
.bk-rules{gap:8px;margin-top:10px}
.bk-rules > span{grid-template-columns:3.6em 1fr;gap:0 10px;font-size:.875rem;line-height:1.4}
.bk-rules b.bk-l{font-size:.6875rem;letter-spacing:.12em}
.bk-help{font-size:.75rem}
}
@media (max-width:640px){
/* on a phone the card takes the place of the maze instead of sitting on it */
.bk-msg{position:relative;left:auto;top:auto;transform:none;width:auto;max-height:none;overflow:visible;padding:20px 18px 22px 22px}
.bk-box:has(.bk-msg:not([hidden])) .bk-c{display:none}
.bk-h{font-size:1.75rem}
}
/* a small note under a project's story */
.wp-text p.wp-note{margin:1.4em 0 0;font-size:.8125rem;line-height:1.45;font-weight:500;color:var(--dim)}
/* project drawer: one text colour. Paragraphs were pure white, bullets a
dimmer white, and the bold lines cream; now it is all cream, with the
bullets a step quieter than the paragraphs. */
.wp-text p{color:var(--paper)}
.wp-text li{color:color-mix(in srgb,var(--paper) 84%,transparent)}
/* a name with a footnote: "Vernaca (Acquired by SmartPickle.com)" */
.wcover .wname[data-acq]::after{content:attr(data-acq);display:block;margin-top:.35em;font-size:.8125rem;font-weight:600;letter-spacing:0;line-height:1.3;text-transform:none;color:var(--dim)}
.wp-name[data-acq]::after{content:attr(data-acq);display:block;margin-top:.45em;font-size:clamp(.875rem,1vw,1rem);font-weight:600;letter-spacing:0;line-height:1.3;color:var(--dim)}
/* a short note from the CEO at the foot of About */
.ceo-note{padding-block:clamp(28px,4vh,48px) clamp(8px,1.5vh,16px)}
.ceo-note > *{max-width:62ch}
.ceo-note .ceo-k{margin:0 0 .7em;font-weight:800;font-size:.6875rem;letter-spacing:.17em;text-transform:uppercase;color:var(--accent)}
.ceo-note p{margin:0 0 .7em;font-size:clamp(.9375rem,1.05vw,1.0625rem);line-height:1.5;color:var(--dim)}
.ceo-note .ceo-sig{margin:.9em 0 0;font-weight:700;color:var(--fg)}
:root[data-theme="light"] .ceo-note .ceo-k{color:#C4202C}
.ceo-note .ceo-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(20px,3vw,44px);align-items:center}
.ceo-note .ceo-grid > *{max-width:none}
.ceo-note .ceo-txt > *{max-width:62ch}
.ceo-note .ceo-fig{margin:0}
.ceo-note .ceo-fig img{display:block;width:100%;height:auto;border-radius:4px}
@media (max-width:760px){.ceo-note .ceo-grid{grid-template-columns:minmax(0,1fr)}}
.ceo-note .ceo-fig img{border-radius:0;opacity:.42;filter:saturate(.7) contrast(.95);-webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 30%,transparent 100%)}
.ceo-note{position:relative;isolation:isolate;padding-block:clamp(72px,14vh,160px)}
.ceo-note .ceo-grid{display:block}
.ceo-note .ceo-fig{position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);overflow:hidden}
.ceo-note .ceo-fig img{width:100%;height:100%;object-fit:cover;object-position:62% 40%;opacity:.3;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 28%,#000 72%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 28%,#000 72%,transparent)}
.ceo-note .ceo-txt{position:relative}
@media (min-width:761px){
.ceo-note{padding-block:0}
.ceo-note .ceo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;min-height:clamp(380px,56vh,560px)}
.ceo-note .ceo-fig{left:50%;transform:none;margin-left:-50vw;width:50vw;top:0;bottom:0}
.ceo-note .ceo-fig img{opacity:.5;object-position:50% 40%;-webkit-mask-image:linear-gradient(to right,#000 55%,transparent 100%);mask-image:linear-gradient(to right,#000 55%,transparent 100%)}
.ceo-note .ceo-txt{grid-column:2;padding-block:clamp(40px,7vh,88px)}
}
.ceo-note > .ceo-grid{max-width:none;width:100%}
.ceo-note + .wrap .next{margin-top:0}
.ceo-note + .wrap{margin-top:-12px}
.ceo-note .ceo-k{display:flex;align-items:center;gap:.8em;margin-bottom:1.1em}
.ceo-note .ceo-k::before{content:"";width:28px;height:3px;background:currentColor}
.ceo-note .ceo-lead{margin:0 0 .6em;font-weight:800;letter-spacing:-.03em;line-height:1.02;font-size:clamp(1.9rem,3.6vw,3.4rem);color:var(--fg);text-wrap:balance;max-width:16ch}
.ceo-note .ceo-body{max-width:46ch;font-size:clamp(.9375rem,1.05vw,1.0625rem);line-height:1.55;color:var(--dim)}
.ceo-note .ceo-sig{display:flex;align-items:baseline;gap:.7em;flex-wrap:wrap;margin:1.4em 0 0;font-weight:800;font-size:1.25rem;letter-spacing:-.01em;color:var(--fg)}
.ceo-note .ceo-sig .ceo-rule{align-self:center;width:28px;height:3px;background:var(--accent)}
.ceo-note .ceo-sig small{font-weight:700;font-size:.6875rem;letter-spacing:.17em;text-transform:uppercase;color:var(--dim)}
:root[data-theme="light"] .ceo-note .ceo-sig .ceo-rule{background:#C4202C}
.wpanel[aria-label^="Tangent.ai"] .wp-hero img{object-fit:contain;background:#fff}
.wcover .wdid{max-width:36ch;text-wrap:balance}
@media (max-width:899px){.wcover .wdid{max-width:40ch}}
.tl-i:nth-child(3) .tl-word{font-size:clamp(2.5rem,11.5vw,4.6rem)}
@media (min-width:900px){.tl-i:nth-child(3) .tl-word{font-size:clamp(3rem,6.2vw,6.6rem)}}
/* ---- Field notes: indexed rows, card FAQ, big probe, bigger pull-quote ---- */
main[data-ghost="Field notes"] .rows{counter-reset:fnr;border-top:0}
main[data-ghost="Field notes"] .row{
counter-increment:fnr;position:relative;align-items:start;
grid-template-columns:clamp(64px,8.5vw,130px) minmax(0,1fr) minmax(0,1.5fr);
gap:8px clamp(20px,3vw,44px);
padding:clamp(22px,2.8vw,36px) clamp(8px,1.2vw,16px);
border-bottom:1px solid var(--rule);
transition:background .25s ease,border-color .25s ease;
}
main[data-ghost="Field notes"] .row::before{
content:counter(fnr,decimal-leading-zero);grid-column:1;grid-row:1 / span 2;
font-family:var(--display,var(--sans));font-weight:800;letter-spacing:-.05em;line-height:.85;
font-size:clamp(2.25rem,4.6vw,4.25rem);color:transparent;
-webkit-text-stroke:1.5px var(--accent);transition:color .25s ease;
}
main[data-ghost="Field notes"] .row h3{grid-column:2;grid-row:1;font-size:clamp(1.25rem,2.4vw,1.875rem);line-height:1.08;letter-spacing:-.035em;font-weight:800}
main[data-ghost="Field notes"] .row p{grid-column:3}
main[data-ghost="Field notes"] .row:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%);border-bottom-color:var(--accent)}
main[data-ghost="Field notes"] .row:hover::before{color:var(--accent)}
@media (max-width:720px){
main[data-ghost="Field notes"] .row{grid-template-columns:minmax(0,1fr);padding-inline:0}
main[data-ghost="Field notes"] .row::before,main[data-ghost="Field notes"] .row h3,main[data-ghost="Field notes"] .row p{grid-column:1;grid-row:auto}
main[data-ghost="Field notes"] .row::before{font-size:2.25rem;margin-bottom:6px}
}
/* FAQ as a wall of flat tiles */
#faq .rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
#faq .row{
display:flex;flex-direction:column;gap:12px;align-items:stretch;
padding:clamp(22px,2.4vw,32px);border:1px solid var(--rule);border-bottom-width:1px;
background:color-mix(in srgb,var(--fg) 4%,transparent);
}
#faq .row::before{font-size:1.5rem;line-height:1;-webkit-text-stroke-width:1px}
#faq .row h3{font-size:clamp(1.125rem,1.7vw,1.5rem)}
#faq .row:hover{background:color-mix(in srgb,var(--accent) 8%,transparent);border-color:var(--accent)}
#faq .row:last-child:nth-child(odd){grid-column:1 / -1}
@media (max-width:820px){#faq .rows{grid-template-columns:minmax(0,1fr)}}
/* "Beautiful how?" as a proper typographic stack */
main[data-ghost="Field notes"] .probe{margin:clamp(30px,4vw,56px) 0 clamp(34px,4vw,56px)}
main[data-ghost="Field notes"] .probe span{
font-size:clamp(1.75rem,5.4vw,4.75rem);letter-spacing:-.05em;line-height:1;margin-bottom:.12em;
color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--fg) 60%,transparent);
}
main[data-ghost="Field notes"] .probe b{font-size:clamp(2.5rem,9vw,8rem);letter-spacing:-.06em;line-height:.9;margin-top:.12em}
main[data-ghost="Field notes"] .probe b i{color:var(--accent)}
/* the anecdote as a pull-quote */
main[data-ghost="Field notes"] .anec{max-width:84ch;padding:clamp(22px,3vw,40px) clamp(22px,3.4vw,48px);background:color-mix(in srgb,var(--fg) 4%,transparent)}
main[data-ghost="Field notes"] .anec-q{font-size:clamp(1.6rem,3.5vw,3.1rem) !important;line-height:1.05 !important;letter-spacing:-.045em;position:relative}
main[data-ghost="Field notes"] .anec-q::before{content:"\201C";color:var(--accent);margin-right:.06em}
/* Contact: the headline starts where it does on every other page, not at the bottom of the viewport */
body.invert main[data-ghost="Contact"] .hero{justify-content:flex-start;padding-top:clamp(72px,18vh,260px)}
/* ---- Field notes: indexed rows, card FAQ, big probe, bigger pull-quote ---- */
main[data-ghost="On AI"] .rows{counter-reset:fnr;border-top:0}
main[data-ghost="On AI"] .row{
counter-increment:fnr;position:relative;align-items:start;
grid-template-columns:clamp(64px,8.5vw,130px) minmax(0,1fr) minmax(0,1.5fr);
gap:8px clamp(20px,3vw,44px);
padding:clamp(22px,2.8vw,36px) clamp(8px,1.2vw,16px);
border-bottom:1px solid var(--rule);
transition:background .25s ease,border-color .25s ease;
}
main[data-ghost="On AI"] .row::before{
content:counter(fnr,decimal-leading-zero);grid-column:1;grid-row:1 / span 2;
font-family:var(--display,var(--sans));font-weight:800;letter-spacing:-.05em;line-height:.85;
font-size:clamp(2.25rem,4.6vw,4.25rem);color:transparent;
-webkit-text-stroke:1.5px var(--accent);transition:color .25s ease;
}
main[data-ghost="On AI"] .row h3{grid-column:2;grid-row:1;font-size:clamp(1.25rem,2.4vw,1.875rem);line-height:1.08;letter-spacing:-.035em;font-weight:800}
main[data-ghost="On AI"] .row p{grid-column:3}
main[data-ghost="On AI"] .row:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 9%,transparent),transparent 70%);border-bottom-color:var(--accent)}
main[data-ghost="On AI"] .row:hover::before{color:var(--accent)}
@media (max-width:720px){
main[data-ghost="On AI"] .row{grid-template-columns:minmax(0,1fr);padding-inline:0}
main[data-ghost="On AI"] .row::before,main[data-ghost="On AI"] .row h3,main[data-ghost="On AI"] .row p{grid-column:1;grid-row:auto}
main[data-ghost="On AI"] .row::before{font-size:2.25rem;margin-bottom:6px}
}
/* On AI: the red section keeps its numerals in cream */
.band-b[data-n] .row::before{-webkit-text-stroke-color:var(--paper)}
.band-b[data-n] .row:hover{background:linear-gradient(90deg,rgba(255,255,255,.12),transparent 70%);border-bottom-color:var(--paper)}
.band-b[data-n] .row:hover::before{color:var(--paper)}
main[data-ghost="On AI"] .band .wrap{padding-block:clamp(40px,6vh,80px)}
/* On AI: the "we can show you" line is a compact aside, not a second headline */
.ai-show{
display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px clamp(20px,4vw,64px);align-items:center;
margin-top:clamp(32px,4vw,56px);padding:clamp(20px,2.6vw,34px) clamp(20px,3vw,44px);
border:1px solid var(--rule);border-left:3px solid var(--accent);
background:color-mix(in srgb,var(--fg) 4%,transparent);
}
.ai-show .kicker{grid-column:1;grid-row:1;margin:0;max-width:26ch;font-size:clamp(1.375rem,2.6vw,2.25rem);line-height:1.08}
.ai-show .kicker-tag{grid-column:1;grid-row:2;margin:0}
.ai-show .kicker-cta{grid-column:2;grid-row:1 / span 2;margin:0;font-size:clamp(1.0625rem,1.5vw,1.375rem)}
@media (max-width:720px){
.ai-show{grid-template-columns:minmax(0,1fr)}
.ai-show .kicker-cta{grid-column:1;grid-row:3;margin-top:10px}
}
.ai-show .kicker::before,.ai-show .kicker::after{display:none !important}
.ai-show .kicker{border-top:0;padding-top:0}