/* =============================================================
ROCKET GROUP — v3
Three accents, each with a fixed job:
BLUE structure — section numerals, labels, the ledger, links
ORANGE result — every figure, every call to action
YELLOW craft — the rule under a title, the seal, active marks
Never decorative. If a colour appears, it is carrying meaning.
Whitespace has temperature: three paper tones instead of one
white, so sections gain identity without needing hero imagery.
============================================================= */
:root{
/* ---- paper ---- */
--paper:#FFFFFF;
--warm:#FFFFFF; /* retired: orange only appears at full strength now */
--cool:#E8EEF7; /* Thủy — water-tinted stock */
--ink:#0B0B0B;
--navy:#061A4A; /* every dark surface — Thủy */
--flame:#F2601A; /* the one full-strength orange block */
/* ---- text ---- */
--text:#2E2E2E;
--ash:#84848A;
--faint:#B2B2B8;
--line:#E2E2DF;
--hair:#EFEFEC;
/* The deep end of the orange, for a figure sitting on the lit row.
The resting orange is 3.10:1 on white — right at the limit — so
ANY tint behind it drops it under. Rather than lighten the tint
until it stops being a highlight, the figure goes darker when the
row lights up: 4.62:1 on --cool, which clears the body-text
threshold rather than the large-text one. A hover state that
costs legibility is the wrong way round. */
--orange-deep:#B34A00;
/* ---- the three ---- */
--blue:#0057FF;
/* #FF6A00 measured 2.87:1 against white, just under the 3:1 that
large text needs — and this colour carries every figure on the
site, which is the one thing that has to be legible to everyone.
Down 4% to #F56600: 3.10:1, and indistinguishable side by side.
One orange, not two. */
--orange:#F56600;
--yellow:#FFC400;
/* ---- measure ---- */
--stage:min(84vw,1520px);
--gut:clamp(14px,1.5vw,28px);
/* ---- vertical scale, 8pt derived ---- */
--s1:8px; --s2:16px; --s3:24px; --s4:40px;
--s5:clamp(48px,5vw,80px);
--s6:clamp(72px,8vw,128px);
--s7:clamp(104px,12vw,200px);
--ease:cubic-bezier(.16,1,.3,1);
--t-fast:.34s; --t-mid:.62s; --t-slow:1.05s;
--font:"Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
margin:0;background:var(--paper);color:var(--text);
font-family:var(--font);font-weight:400;line-height:1.6;
font-feature-settings:"kern" 1,"liga" 1;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--blue);color:#fff}
/* =============================================================
TYPE — tracking tightens as size grows; display is pulled
optically left so its cap aligns with the text below it.
============================================================= */
:root{
/* Two weights, and only two. Every headline on the site now takes
one of them, which is the whole point: the inconsistency was not
a styling slip, it was that four headline classes — .culture-claim,
.head2 .t, .hw, .off-t — set no weight at all, so the browser
applied its own default of 700 to the h1/h2 they sit on, while
.h1/.h2/.h3 asked for 400. Two different authorities deciding the
same thing on the same page.
The reset below removes the browser from that argument. */
--w-display:500; /* every large headline */
--w-sub:500; /* section sub-heads and card titles */
}
h1,h2,h3,h4,h5,h6{font-weight:var(--w-display)}
.h1,.h2,.h3,.h4{margin:0;color:var(--ink);font-weight:var(--w-display)}
.h1{font-size:clamp(46px,8vw,140px);line-height:.95;letter-spacing:-.042em;margin-left:-.045em}
.h2{font-size:clamp(30px,3.8vw,66px);line-height:1.0;letter-spacing:-.032em;margin-left:-.03em}
.h3{font-size:clamp(23px,2.5vw,44px);line-height:1.05;letter-spacing:-.028em;margin-left:-.025em}
.h4{font-size:clamp(18px,1.5vw,26px);line-height:1.16;letter-spacing:-.02em}
.lead{
font-size:clamp(19px,1.5vw,27px);line-height:1.34;letter-spacing:-.02em;
color:var(--ink);margin:0;
}
.p{font-size:clamp(16px,1.12vw,19px);line-height:1.66;letter-spacing:-.006em;color:var(--text);margin:0}
.p-s{font-size:clamp(14.5px,1vw,17px);line-height:1.64;letter-spacing:-.005em;color:var(--text);margin:0}
/* the only uppercase — structural labels, always blue */
.label{
font-size:12px;font-weight:600;text-transform:uppercase;
letter-spacing:.13em;color:var(--blue);margin:0;
}
.label-q{color:var(--faint)}
.note{font-size:12.5px;line-height:1.5;color:var(--ash);margin:0}
/* figures are always orange — the result colour */
.fig{
font-size:clamp(32px,3.5vw,62px);line-height:.9;letter-spacing:-.046em;
color:var(--orange);font-weight:400;font-variant-numeric:lining-nums tabular-nums;
margin-left:-.03em;
}
.fig-s{font-size:clamp(24px,2.2vw,40px);letter-spacing:-.04em}
.fig-k{font-size:14px;font-weight:500;letter-spacing:-.008em;color:var(--ink);margin-top:11px}
hr{border:0;height:1px;background:var(--line);margin:0}
.hr-ink{background:var(--ink)}
/* yellow is craft: it marks where a section begins */
.seal{width:34px;height:3px;background:var(--yellow);border:0;margin:0 0 var(--s3)}
/* =============================================================
GRID — twelve columns. Asymmetric placement is where the
elegance comes from; nothing here is full-width by default.
============================================================= */
.stage{width:var(--stage);margin:0 auto}
.g{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut)}
.c1-2{grid-column:1/3} .c1-4{grid-column:1/5} .c1-5{grid-column:1/6}
.c1-6{grid-column:1/7} .c1-7{grid-column:1/8} .c1-8{grid-column:1/9}
.c1-9{grid-column:1/10} .c1-12{grid-column:1/13}
.c2-7{grid-column:2/8} .c2-8{grid-column:2/9} .c2-9{grid-column:2/10}
.c2-12{grid-column:2/13}
.c3-8{grid-column:3/9} .c3-9{grid-column:3/10} .c3-12{grid-column:3/13}
.c4-9{grid-column:4/10} .c5-9{grid-column:5/10}
.c6-11{grid-column:6/12} .c6-12{grid-column:6/13} .c7-9{grid-column:7/10} .c7-12{grid-column:7/13}
.c8-12{grid-column:8/13} .c9-12{grid-column:9/13} .c10-12{grid-column:10/13}
.c11-12{grid-column:11/13} .c12-13{grid-column:12/13}
.baseline{align-items:baseline}
.end{align-items:end}
.sec{padding:var(--s7) 0}
.sec-s{padding:var(--s6) 0}
/* paper tones give sections identity without imagery */
.warm{background:var(--warm)}
.cool{background:var(--cool)}
.dark{background:var(--ink);color:#fff}
.dark .h2,.dark .h3,.dark .lead{color:#fff}
.dark .p,.dark .p-s{color:rgba(255,255,255,.62)}
.dark .label{color:var(--yellow)}
.dark .note{color:rgba(255,255,255,.38)}
.dark hr{background:rgba(255,255,255,.16)}
.dark .fig-k{color:rgba(255,255,255,.9)}
.dark .seal{background:var(--yellow)}
/* section header: hanging numeral, title, quiet aside */
.head{margin-bottom:var(--s5)}
.head .num{font-size:12px;font-weight:600;letter-spacing:.13em;color:var(--blue);padding-top:.55em}
.head .aside{font-size:clamp(15px,1.15vw,19px);line-height:1.45;color:var(--ash);letter-spacing:-.008em}
/* =============================================================
LINKS
============================================================= */
.u{position:relative;display:inline-block}
.u::after{
content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;
background:currentColor;transform:scaleX(0);transform-origin:0 50%;
transition:transform var(--t-mid) var(--ease);
}
.u:hover::after{transform:scaleX(1)}
.u:hover{color:var(--blue)}
.arrow{display:inline-flex;align-items:baseline;gap:.55em;transition:color var(--t-fast) var(--ease)}
.arrow i{font-style:normal;display:inline-block;transition:transform var(--t-mid) var(--ease)}
.arrow:hover{color:var(--orange)}
.arrow:hover i{transform:translateX(.35em)}
/* =============================================================
NAV
============================================================= */
.nav{
position:fixed;inset:0 0 auto 0;z-index:80;background:transparent;
border-bottom:1px solid transparent;
transition:background var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease),transform var(--t-mid) var(--ease);
}
/* Scrolled, the bar leaves the edge of the window and becomes an
object floating over the page. The surface moves off .nav and onto
.nav-in, because the thing that should look like a bar is the row
of links — not the full width of the viewport.
Square, with no radius at all. Every reference for this pattern is
a pill, and a pill is the one shape this brand does not own: the
wedge, the frames and the logo's R are all straight cuts.
Translucent rather than solid, so the work keeps moving underneath
it — which is the point of floating it in the first place. */
.nav.pinned{background:transparent;border-bottom-color:transparent}
.nav-in{
width:var(--stage);margin:0 auto;padding:22px 0;
display:flex;align-items:center;gap:clamp(16px,2.2vw,34px);
--lg:clamp(28px,2.5vw,40px); /* logo height */
border:1px solid transparent;
transition:width .55s var(--ease),padding .55s var(--ease),
margin .55s var(--ease),background .38s var(--ease),
border-color .38s var(--ease),box-shadow .38s var(--ease),
backdrop-filter .38s var(--ease);
}
.nav.pinned .nav-in{
width:min(var(--stage),1180px);
margin:clamp(10px,1vw,16px) auto 0;
padding:clamp(9px,0.85vw,14px) clamp(14px,1.5vw,24px);
background:rgba(255,255,255,.70);
backdrop-filter:blur(20px) saturate(1.35);
-webkit-backdrop-filter:blur(20px) saturate(1.35);
border-color:var(--hair);
box-shadow:0 12px 38px rgba(11,11,11,.08);
}
/* A browser without backdrop-filter would show the links over moving
artwork with nothing between them, so it gets an opaque panel. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.nav.pinned .nav-in{background:rgba(255,255,255,.96)}
}
/* full wordmark at rest; collapses to the R once you leave the hero */
.nav-mark{
position:relative;display:block;flex:none;height:var(--lg);
width:calc(var(--lg) * 5.876); /* wordmark is 1998×340 */
transition:width .55s var(--ease);
}
.nav-mark img{
position:absolute;left:0;top:50%;transform:translateY(-50%);
height:var(--lg);width:auto;transition:opacity .34s var(--ease);
}
.nav-mark .nm-r{opacity:0}
.nav.pinned .nav-mark{width:calc(var(--lg) * 0.93)}
.nav.pinned .nm-full{opacity:0}
.nav.pinned .nm-r{opacity:1}
/* the positioning line, set on the logo's own baseline */
.nav-tag{
margin:0;flex:none;white-space:nowrap;
font-size:12px;font-weight:600;text-transform:uppercase;
letter-spacing:.13em;color:var(--blue);
padding-left:clamp(16px,2.2vw,34px);border-left:1px solid var(--line);
transition:opacity .38s var(--ease),transform .38s var(--ease);
}
.nav-tag i{font-style:normal;color:var(--yellow);padding:0 .18em}
.nav.pinned .nav-tag{opacity:0;transform:translateX(-10px);pointer-events:none}
.nav-links{display:flex;gap:clamp(20px,2.4vw,46px);margin-left:auto;align-items:center}
.nav-links a{font-size:clamp(15px,1.12vw,17px);font-weight:500;letter-spacing:-.014em;color:var(--ink);transition:color var(--t-fast) var(--ease)}
.nav-links a:hover{color:var(--blue)}
.burger{display:none;margin-left:auto;width:26px;height:16px;position:relative;flex:none}
.burger i{position:absolute;left:0;right:0;height:1.5px;background:var(--ink);transition:var(--t-mid) var(--ease)}
.burger i:nth-child(1){top:0}.burger i:nth-child(2){bottom:0}
body.menu .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu .burger i:nth-child(2){transform:translateY(-7px) rotate(-45deg)}
/* =============================================================
HERO — one screen, one frame at a time.
The image gets its own reserved band, so type never crosses
it. Words sit left / right / indented-right around that band.
============================================================= */
.hero{
min-height:100vh;min-height:100svh;
display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,2.4vw,40px);
padding:clamp(96px,10vw,140px) 0 clamp(24px,3vw,44px);
position:relative;overflow:hidden;
}
.hero > .stage{width:var(--stage);margin:0 auto}
/* ---- orbs ---- */
.orbs{position:absolute;inset:0;z-index:0;pointer-events:none}
.orb{
position:absolute;border-radius:50%;will-change:transform;
transform:translate3d(calc(var(--ox,0px) + var(--fx,0px)),calc(var(--oy,0px) + var(--fy,0px)),0);
}
.orb.o1{width:34vw;max-width:470px;aspect-ratio:1;right:6%;top:0;
background:radial-gradient(circle at 38% 34%,rgba(255,196,0,.50),rgba(255,196,0,.08) 62%,transparent 72%);
filter:blur(48px);opacity:.85}
.orb.o2{width:12vw;max-width:170px;aspect-ratio:1;left:16%;top:22%;
background:radial-gradient(circle at 40% 36%,rgba(255,106,0,.36),rgba(255,106,0,0) 68%);filter:blur(28px)}
.orb.o3{width:23vw;max-width:310px;aspect-ratio:1;right:2%;bottom:0;
background:radial-gradient(circle at 40% 36%,rgba(0,87,255,.24),rgba(0,87,255,0) 68%);filter:blur(62px)}
.orb.o4{width:6.5vw;max-width:92px;aspect-ratio:1;right:22%;top:10%;
background:radial-gradient(circle at 40% 36%,rgba(255,196,0,.60),rgba(255,196,0,0) 70%);filter:blur(12px)}
.orb.o5{width:25vw;max-width:330px;aspect-ratio:1;left:-8%;bottom:-6%;
background:radial-gradient(circle at 40% 36%,rgba(0,87,255,.14),rgba(0,87,255,0) 70%);filter:blur(74px)}
/* ---- three rows: word / frame + word / word. Nothing overlaps ---- */
.canvas{
display:grid;grid-template-columns:repeat(12,1fr);
column-gap:var(--gut);row-gap:clamp(10px,1.6vw,26px);align-items:center;
}
.hw{line-height:.84;margin:0}
/* one size for all three words — the air between them does the work,
not the scale of the type */
.hw > i{
display:block;font-style:normal;white-space:nowrap;font-weight:var(--w-display);
font-size:clamp(38px,6vw,118px);
letter-spacing:-.042em;color:var(--ink);
perspective:1100px; /* one vanishing point per word */
}
/* each letter lifts on its own beat — the stagger reads as a launch */
.hw .ch{
display:inline-block;transform-origin:50% 100%;backface-visibility:hidden;
animation:liftch 1.05s cubic-bezier(.18,.86,.24,1) both;
animation-delay:calc(var(--d,0s) + var(--n,0) * .042s);
will-change:transform,opacity;
}
@keyframes liftch{
0% {opacity:0;transform:translateY(88%) rotateX(-84deg) scale(.9)}
58% {opacity:1}
100%{opacity:1;transform:none}
}
/* The frame is the anchor: dead centre, nothing beside it.
Transform and Convert open the top line left and right; Automate
closes underneath on the frame's own axis. */
.hw1{grid-column:1/6; grid-row:1;justify-self:start;align-self:start}
.hw2{grid-column:7/13; grid-row:1;justify-self:end;align-self:start;
padding-top:clamp(8px,2.4vh,38px)} /* a step, not a baseline */
.hw3{grid-column:1/13; grid-row:3;justify-self:center}
.hw1 > i{--d:.16s}
.hw2 > i{--d:.46s;color:var(--blue)}
.hw3 > i{--d:.76s;color:var(--orange)}
.hero-drift .hw1{transform:translateX(calc(var(--d,0px) * -.30))}
.hero-drift .hw2{transform:translateX(calc(var(--d,0px) * .34))}
.hero-drift .hw3{transform:translateX(calc(var(--d,0px) * -.16))}
/* ---- the single frame: its own band, columns 1–8, row 2 ---- */
.shot{
grid-column:1/13;grid-row:2;perspective:1500px;
display:flex;flex-direction:column;align-items:center; /* centred anchor */
--sh:clamp(190px,40vh,440px); /* tallest the frame may be */
}
/* 16:9 always — 1920×1080 scaled down. The frame takes the smaller of
its column width or that height, so the hero stays one screen. */
.shot-in{
position:relative;width:min(100%,calc(var(--sh) * 16 / 9));aspect-ratio:16/9;
transform-style:preserve-3d;transition:transform .55s var(--ease);
}
/* Two stacked layers. The rule that keeps the paper from ever showing:
only the ARRIVING layer fades. The one it replaces stays fully
opaque underneath until it is completely covered, then hides.
Nothing is ever half-transparent over nothing. */
.shot-frame{
position:absolute;inset:0;display:block;overflow:hidden;background:#EFEFED;
box-shadow:0 24px 60px rgba(11,11,11,.14),0 4px 12px rgba(11,11,11,.06);
opacity:0;animation:shotin 1.1s var(--ease) .5s both;
transition:box-shadow var(--t-mid) var(--ease);
}
@keyframes shotin{from{opacity:0;translate:0 26px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
.face{position:absolute;inset:0;overflow:hidden;visibility:hidden}
.face.under{visibility:visible;z-index:1} /* the outgoing shot */
.face.over{visibility:visible;z-index:2} /* the arriving shot */
.face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* The arriving image rises and settles. The offset and the scale are
tied to each other — at every step, translateY(10%·k) is cancelled by
scale(1+0.20·k) growing 10%·k past the top edge. So the frame is
always fully covered and no paper can appear, whatever the timing.
The tail of the same animation is the slow Ken Burns. */
@keyframes shotenter{
0% {opacity:0;transform:translateY(10%) scale(1.20);
animation-timing-function:cubic-bezier(.16,1,.3,1)}
19% {opacity:1;transform:translateY(0) scale(1.05);
animation-timing-function:linear}
100%{opacity:1;transform:translateY(0) scale(1.00)}
}
.face img.go{animation:shotenter 4.5s linear both}
/* slow sheen on hover */
.shot-frame::after{
content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
background:linear-gradient(112deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.30) 50%,rgba(255,255,255,0) 66%);
transform:translateX(-130%);transition:transform 1.6s cubic-bezier(.22,.9,.28,1);
}
.shot-frame:hover::after{transform:translateX(130%)}
.shot-frame:hover{box-shadow:0 32px 76px rgba(11,11,11,.19),0 6px 16px rgba(11,11,11,.09)}
/* caption + the timing line, set to the frame's own width */
.shot-cap{
width:min(100%,calc(var(--sh) * 16 / 9));margin-top:14px;
display:flex;align-items:baseline;gap:12px;
}
.shot-cap b{font-size:14px;font-weight:500;letter-spacing:-.012em;color:var(--ink)}
.shot-cap span{font-size:12.5px;color:var(--ash)}
.shot-cap .bar{
margin-left:auto;width:clamp(48px,7vw,96px);height:1px;background:var(--line);
position:relative;overflow:hidden;align-self:center;
}
.shot-cap .bar i{
position:absolute;inset:0;background:var(--orange);
transform:scaleX(0);transform-origin:0 50%;
}
.shot-cap .bar i.run{transition:transform 4.5s linear;transform:scaleX(1)}
/* ---- foot ---- */
.hero-foot .p{max-width:52ch;font-size:clamp(15px,1.02vw,17.5px)}
.credit{margin-top:var(--s2);font-size:13px;line-height:1.45;color:var(--ash)}
.credit b{display:block;font-weight:500;color:var(--ink)}
.credit span{display:block;color:var(--faint)}
.scroll-cue{display:flex;align-items:center;gap:12px;white-space:nowrap;justify-self:end}
.scroll-cue span{display:inline-block;width:1px;height:30px;background:var(--line);position:relative;overflow:hidden}
.scroll-cue span::after{content:"";position:absolute;inset:0;background:var(--blue);animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}
/* =============================================================
WORK
============================================================= */
.case{padding:var(--s7) 0}
.case + .case{border-top:1px solid var(--line)}
.case.warm + .case,.case.cool + .case,.case.warm,.case.cool{border-top:0}
.slug{margin-bottom:var(--s4)}
.slug .meta{justify-self:end;text-align:right}
.frame{overflow:hidden;background:rgba(0,0,0,.03)}
.frame img{width:100%;transform:scale(1.05);opacity:0;transition:transform var(--t-slow) var(--ease),opacity var(--t-slow) var(--ease)}
.frame.in img{transform:none;opacity:1}
.kpi{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--ink)}
.pair{margin-top:var(--s5);display:grid;grid-template-columns:1fr 1fr;gap:var(--gut)}
.under{margin-top:var(--s4)}
.under > div{border-top:1px solid var(--ink);padding-top:var(--s3)}
.quote{
font-size:clamp(23px,2.7vw,44px);line-height:1.22;letter-spacing:-.028em;
color:var(--ink);margin:var(--s4) 0 0;
}
.quote em{font-style:normal;color:var(--blue)}
.scope{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s2)}
.scope span{
font-size:12.5px;font-weight:500;color:#575757;border:1px solid var(--line);
border-radius:0;padding:6px 12px;transition:var(--t-fast) var(--ease);
}
.scope span:hover{border-color:var(--blue);color:var(--blue)}
/* ---- ledger of everything else ---- */
.index{border-top:1px solid var(--ink)}
.idx{
display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);align-items:baseline;
padding:clamp(14px,1.4vw,22px) 0;border-bottom:1px solid var(--hair);
cursor:pointer;position:relative;transition:padding-left var(--t-mid) var(--ease);
}
.idx::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--yellow);
transform:scaleY(0);transform-origin:50% 0;transition:transform var(--t-mid) var(--ease);
}
/* The row the cursor is on carries a tint, bled past the column on
both sides so it reads as a band across the page rather than as a
box drawn round three cells. The tint sits in ::after and the cells
are lifted above it — a background on .idx itself would stop at the
grid's edge, which is narrower than the eye expects a highlight to
be, and the row would look like a mistake rather than a state. */
.idx::after{
content:"";position:absolute;z-index:0;
inset:0 calc(-1 * clamp(12px,1.4vw,26px));
background:var(--cool);opacity:0;
transition:opacity var(--t-fast) var(--ease);
}
.idx > *{position:relative;z-index:1}
.idx::before{z-index:2}
.idx:hover{padding-left:clamp(10px,1.1vw,20px)}
.idx:hover::before{transform:scaleY(1)}
.idx:hover::after,.idx:focus-visible::after{opacity:1}
.idx:hover .idx-f,.idx:focus-visible .idx-f{color:var(--orange-deep)}
.idx-n{grid-column:1/6;font-size:clamp(16px,1.35vw,23px);letter-spacing:-.02em;color:var(--ink);transition:color var(--t-fast) var(--ease)}
.idx:hover .idx-n{color:var(--blue)}
.idx-m{grid-column:6/9;font-size:14px;color:var(--ash)}
/* The ledger's own figure was 15px, which on a 1600px row put the one
piece of evidence in the least-looked-at spot on the page at the
smallest size on it. Up to match the brand name on the left, so the
row reads as a pair — who, and what moved — rather than as a name
with a footnote. */
.idx-f{grid-column:9/13;font-size:clamp(16px,1.35vw,23px);letter-spacing:-.02em;
color:var(--orange);font-variant-numeric:tabular-nums;text-align:right}
.idx-f small{color:var(--ash);font-size:13px;letter-spacing:0}
.peek{
/* 20% wider than it was, and the aspect ratio moves down onto the
picture — the card is now a picture with a figure under it, so
the card itself has to be free to be as tall as the two need. */
position:fixed;top:0;left:0;width:min(720px,50vw);
z-index:70;pointer-events:none;
opacity:0;overflow:hidden;background:#fff;
box-shadow:0 30px 80px rgba(11,11,11,.22);
transform:translate3d(-50%,-50%,0) scale(.94);
transition:opacity var(--t-fast) var(--ease),transform var(--t-mid) var(--ease);
}
.peek.on{opacity:1;transform:translate3d(-50%,-50%,0) scale(1)}
.peek-im{position:relative;aspect-ratio:16/10;overflow:hidden;background:#F2F2F2}
.peek img{display:block;width:100%;height:100%;object-fit:cover}
/* The result, at the size a result deserves. In the ledger this same
number is 15px at the far right of a wide row, which is where the
eye goes last; here it is the largest thing on the card and it sits
on the work it came from.
On white, and centred under the picture. One note on the colour:
the brand yellow measures 1.60:1 against white, which is not a
contrast so much as an absence of one — at that ratio a figure is
decoration, and this figure is the argument. The orange manages
2.87:1 at full strength, so --orange itself was taken down 4% to
#F56600, which clears it at 3.10:1 across the whole site. The
number is the one thing here that must be legible to everyone. */
.peek-f{
text-align:center;background:#fff;
padding:clamp(14px,1.3vw,22px) clamp(16px,1.4vw,26px) clamp(16px,1.5vw,26px);
}
.peek-f .v{
display:block;
font-size:clamp(30px,3.4vw,60px);line-height:.94;letter-spacing:-.032em;
color:var(--orange);font-variant-numeric:tabular-nums;
}
.peek-f .k{
display:block;margin-top:.62em;
font-size:11.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
color:var(--ash);
}
.peek-f .k.solo{margin-top:0;font-size:12.5px;color:#575757;padding:.6em 0}
.peek-f .n{display:block;margin-top:.5em;font-size:12px;color:var(--ash)}
/* =============================================================
CAPABILITIES
============================================================= */
.cap{
display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);align-items:baseline;
padding:clamp(20px,2.2vw,34px) 0;border-bottom:1px solid var(--line);
}
.cap:first-child{border-top:1px solid var(--ink)}
.cap .n{grid-column:1/2;font-size:11px;color:var(--blue);letter-spacing:.12em;font-weight:600}
.cap .t{grid-column:2/6;font-size:clamp(19px,1.85vw,32px);letter-spacing:-.024em;color:var(--ink);line-height:1.1}
.cap .d{grid-column:6/12}
/* =============================================================
CLIENTS
============================================================= */
.logos{display:grid;grid-template-columns:repeat(8,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.logos .t{
border-right:1px solid var(--line);border-bottom:1px solid var(--line);
aspect-ratio:16/9;display:grid;place-items:center;padding:clamp(14px,1.8vw,28px);
transition:background var(--t-mid) var(--ease);
}
.logos .t:hover{background:rgba(0,87,255,.04)}
.logos img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1);opacity:.42;transition:opacity var(--t-mid) var(--ease),filter var(--t-mid) var(--ease)}
.logos .t:hover img{opacity:1;filter:none}
/* =============================================================
STUDIO
============================================================= */
.people{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut) var(--gut);row-gap:var(--s5)}
.person .ph{aspect-ratio:4/5;overflow:hidden;background:rgba(0,0,0,.04)}
.person .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:transform var(--t-slow) var(--ease),filter var(--t-mid) var(--ease)}
.person:hover .ph img{transform:scale(1.03);filter:grayscale(0)}
.person .nm{margin-top:14px;font-size:clamp(15px,1.15vw,19px);letter-spacing:-.02em;color:var(--ink)}
.person .rl{margin-top:6px;font-size:13px;color:var(--ash);line-height:1.45}
.crew{display:grid;grid-template-columns:repeat(9,1fr);gap:clamp(8px,.9vw,15px);margin-top:var(--s5)}
.crew figure{margin:0}
.crew .ph{aspect-ratio:1;overflow:hidden;background:rgba(0,0,0,.04)}
.crew img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter var(--t-mid) var(--ease)}
.crew figure:hover img{filter:none}
.crew figcaption{margin-top:8px;font-size:12px;color:var(--ash)}
/* =============================================================
PROOF — dark, figures in yellow so they read on ink
============================================================= */
.proof > div{border-top:1px solid rgba(255,255,255,.34);padding-top:var(--s3)}
.proof .fig{color:var(--yellow)}
/* =============================================================
CONTACT
============================================================= */
.cta-line{
display:flex;align-items:baseline;justify-content:space-between;gap:24px;width:100%;text-align:left;
border-top:1px solid var(--ink);border-bottom:1px solid var(--line);
padding:clamp(22px,2.5vw,38px) 0;margin-top:var(--s4);
transition:padding-left var(--t-mid) var(--ease),color var(--t-fast) var(--ease);
}
.cta-line:hover{padding-left:clamp(10px,1.1vw,20px);color:var(--orange)}
.cta-line i{font-style:normal;transition:transform var(--t-mid) var(--ease)}
.cta-line:hover i{transform:translateX(.4em)}
.details > div{border-top:1px solid var(--ink);padding-top:var(--s2)}
.details a{display:block;font-size:clamp(15px,1.15vw,19px);letter-spacing:-.02em;color:var(--ink);margin-top:6px}
.details a:hover{color:var(--orange)}
.social{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.social a{font-size:11px;font-weight:500;border:1px solid var(--line);border-radius:0;padding:7px 14px;margin:0;transition:var(--t-fast) var(--ease)}
.social a:hover{border-color:var(--blue);color:var(--blue)}
.launch-stage{position:relative;width:100%;height:clamp(320px,36vw,540px);pointer-events:none}
.launch-stage canvas{width:100%;height:100%;display:block}
.launch-stage .fb{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:88%;width:auto}
.launch-stage.live .fb{display:none}
/* =============================================================
FOOT
============================================================= */
.foot{border-top:1px solid var(--ink);padding:var(--s5) 0 var(--s4)}
.foot img{height:22px;width:auto;opacity:.85}
.stevenson{font-size:clamp(15px,1.2vw,21px);letter-spacing:-.018em;color:var(--ink);line-height:1.3}
.stevenson b{font-weight:400;color:var(--orange)}
/* =============================================================
CONTACT SHEET
============================================================= */
.sheet{position:fixed;inset:0;z-index:120;display:none}
.sheet.on{display:block}
.sheet-bg{position:absolute;inset:0;background:rgba(11,11,11,.45);backdrop-filter:blur(5px);opacity:0;transition:opacity var(--t-mid)}
.sheet.on .sheet-bg{opacity:1}
.sheet-panel{
position:absolute;inset:0 0 0 auto;width:min(720px,100%);background:var(--paper);
overflow-y:auto;transform:translateX(4%);opacity:0;
transition:transform var(--t-slow) var(--ease),opacity var(--t-mid) var(--ease);
}
.sheet.on .sheet-panel{transform:none;opacity:1}
.sheet-top{position:sticky;top:0;background:var(--paper);z-index:3;display:flex;justify-content:space-between;align-items:center;padding:20px clamp(24px,4vw,56px);border-bottom:1px solid var(--hair)}
.sheet-in{padding:var(--s5) clamp(24px,4vw,56px) var(--s6)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,24px)}
.fld{display:block;margin-bottom:var(--s3);border:0;padding:0}
.fld > span{display:block;font-size:11px;font-weight:500;color:var(--ash);margin-bottom:7px}
.fld input,.fld select,.fld textarea{
width:100%;font:inherit;font-size:15.5px;color:var(--ink);background:transparent;
border:0;border-bottom:1px solid var(--line);border-radius:0;padding:9px 0;
transition:border-color var(--t-fast) var(--ease);
}
.fld textarea{resize:vertical;min-height:88px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-bottom-color:var(--blue)}
.fld .err{border-bottom-color:var(--orange)}
.picks{display:flex;flex-wrap:wrap;gap:7px}
.picks input{position:absolute;width:0;height:0;opacity:0;clip-path:inset(50%)}
.picks label{font-size:11.5px;font-weight:500;border:1px solid var(--line);border-radius:0;padding:8px 14px;cursor:pointer;color:#575757;transition:var(--t-fast) var(--ease);user-select:none}
.picks label:hover{border-color:var(--blue);color:var(--blue)}
.picks input:checked + label{background:var(--blue);border-color:var(--blue);color:#fff}
.send{width:100%;border:1px solid var(--ink);border-radius:0;padding:16px;margin-top:8px;font-size:12.5px;font-weight:500;transition:var(--t-fast) var(--ease)}
.send:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.done{padding:var(--s6) 0;text-align:center}
/* dock */
.dock{position:fixed;right:22px;bottom:22px;z-index:75;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.dock a,.dock button{
display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);
border:1px solid var(--line);border-radius:0;padding:8px 16px 8px 8px;
font-size:11.5px;font-weight:500;box-shadow:0 8px 26px rgba(11,11,11,.07);
transition:transform var(--t-mid) var(--ease),border-color var(--t-fast) var(--ease);
}
.dock a:hover,.dock button:hover{transform:translateY(-2px)}
.dock button:hover{border-color:var(--blue)}
.dock a:hover{border-color:var(--orange)}
.dock .ic{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;background:#F3F5F8}
.dock .ic svg{width:15px;height:15px}
.dock button .ic{background:rgba(0,87,255,.08)}
.dock a .ic{background:rgba(255,106,0,.08)}
/* =============================================================
MOTION — one rule
============================================================= */
.rv{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0) * 60ms);justify-content: center;}
.rv.in{opacity:1;transform:none}
/* =============================================================
ADDITIONS after the Clay reading
============================================================= */
/* ---- trusted band: proof placed early, kept quiet ---- */
/* ---- capability blocks: statement left, square right ---- */
.capblk{
display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);
align-items:center;padding:var(--s6) 0;border-top:1px solid var(--line);
}
.capblk:first-child{border-top:1px solid var(--ink)}
.capblk .n{grid-column:1/2;font-size:11px;font-weight:600;letter-spacing:.15em;color:var(--blue);align-self:start;padding-top:.6em}
.capblk .copy{grid-column:2/7}
.capblk .t{font-size:clamp(26px,2.8vw,48px);letter-spacing:-.028em;line-height:1.02;color:var(--ink);margin:0}
.capblk .d{margin-top:var(--s3)}
.capblk .sq{grid-column:8/13;aspect-ratio:1;overflow:hidden;background:rgba(0,0,0,.03)}
.capblk .sq img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform var(--t-slow) var(--ease)}
.capblk:hover .sq img{transform:none}
/* alternate the side so the eye keeps moving */
.capblk:nth-child(even) .copy{grid-column:8/13}
.capblk:nth-child(even) .sq{grid-column:2/7;grid-row:1}
.capblk:nth-child(even) .n{grid-column:1/2}
/* ---- spotlight ---- */
.sp-brands{display:flex;flex-wrap:wrap;gap:8px;justify-content: start;}
.sp-brands span{
font-size:clamp(13px,1.05vw,17px);letter-spacing:-.014em;color:var(--ink);
border:1px solid var(--line);border-radius:0;padding:9px 17px;
transition:var(--t-fast) var(--ease);
}
.sp-brands span:hover{border-color:var(--orange);color:var(--orange)}
.sp-figs > div{border-top:1px solid var(--ink);padding-top:var(--s2)}
/* ---- FAQ ---- */
.faq{border-top:1px solid var(--ink)}
.fq{border-bottom:1px solid var(--line)}
.fq-q{
display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);
align-items:baseline;width:100%;text-align:left;padding:clamp(20px,2.2vw,34px) 0;
transition:padding-left var(--t-mid) var(--ease);
}
.fq-q:hover{padding-left:clamp(8px,1vw,18px)}
.fq-q .i{grid-column:1/2;font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--blue)}
.fq-q .q{grid-column:2/10;font-size:clamp(17px,1.55vw,26px);letter-spacing:-.022em;line-height:1.2;color:var(--ink);transition:color var(--t-fast) var(--ease)}
.fq-q:hover .q,.fq.open .q{color:var(--orange)}
.fq-q .pm{grid-column:12/13;justify-self:end;width:16px;height:16px;position:relative;align-self:center}
.fq-q .pm::before,.fq-q .pm::after{content:"";position:absolute;background:var(--ink);transition:transform var(--t-mid) var(--ease),opacity var(--t-mid) var(--ease)}
.fq-q .pm::before{left:0;right:0;top:7.5px;height:1.5px}
.fq-q .pm::after{top:0;bottom:0;left:7.5px;width:1.5px}
.fq.open .pm::after{transform:rotate(90deg);opacity:0}
.fq-a{max-height:0;overflow:hidden;transition:max-height var(--t-slow) var(--ease)}
.fq-a .in{
display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);
padding-bottom:clamp(24px,2.8vw,42px);
}
.fq-a .in p{grid-column:2/9}
/* =============================================================
AFTER READING basicagency / instrument
============================================================= */
/* ---- method: the mechanism behind the number ---- */
.method{border-top:1px solid var(--ink)}
.mrow{
display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);
padding:clamp(24px,2.8vw,44px) 0;border-bottom:1px solid var(--line);
position:relative;transition:background var(--t-mid) var(--ease);
}
.mrow::before{
content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--orange);
transition:width var(--t-slow) var(--ease);
}
.mrow:hover::before{width:100%}
.mrow .n{grid-column:1/2;font-size:11px;font-weight:600;letter-spacing:.15em;color:var(--blue);padding-top:.5em}
.mrow .t{grid-column:2/5;font-size:clamp(21px,2.1vw,36px);letter-spacing:-.026em;line-height:1.06;color:var(--ink);margin:0}
.mrow .d{grid-column:5/10}
.mrow .own{
grid-column:10/13;align-self:start;font-size:13px;line-height:1.5;color:var(--ink);
border-left:2px solid var(--yellow);padding-left:14px;
}
/* the connecting spine — reads as a process, not a list */
.mrow .n::after{
content:"";position:absolute;left:5px;top:calc(.5em + 22px);bottom:-1px;width:1px;
background:var(--line);
}
.mrow:last-child .n::after{display:none}
/* ---- retention ---- */
.pships{border-top:1px solid var(--ink)}
.psh{
display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);align-items:center;
padding:clamp(22px,2.4vw,38px) 0;border-bottom:1px solid var(--line);
}
.psh .lg{grid-column:1/3;display:flex;align-items:center;height:38px}
.psh .lg img{max-width:100%;max-height:34px;object-fit:contain;object-position:left center;filter:grayscale(1);opacity:.55;transition:var(--t-mid) var(--ease)}
.psh:hover .lg img{filter:none;opacity:1}
.psh .yr{grid-column:3/6}
.psh .yr b{display:block;font-size:clamp(16px,1.35vw,23px);font-weight:400;letter-spacing:-.02em;color:var(--ink)}
.psh .yr em{display:block;font-style:normal;font-size:13px;color:var(--orange);margin-top:6px}
.psh .d{grid-column:6/13}
/* ---- ledger filters (Instrument) ---- */
.filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:var(--s3)}
.filters button{
font-size:13px;font-weight:500;border:1px solid var(--line);border-radius:0;
padding:8px 15px;color:#575757;transition:var(--t-fast) var(--ease);
}
.filters button:hover{border-color:var(--blue);color:var(--blue)}
.filters button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.idx.hide{display:none}
/* ---- plain-text roster (Instrument) ---- */
.roster{
margin-top:var(--s4);font-size:clamp(14px,1.05vw,17.5px);line-height:1.75;
letter-spacing:-.008em;color:var(--ash);max-width:78ch;
}
.roster b{font-weight:400;color:var(--ink)}
/* =============================================================
v4 — three borrowed treatments
HANZO two-tone section header, enormous air
CLAY project = name + one line, then a large quiet frame
BASIC a statement set over full-bleed imagery
============================================================= */
/* ---------- HANZO: the two-tone header ----------
A statement in ink, its explanation directly beneath in grey,
both at the same size. Reads as one thought said twice. */
.head2{padding-bottom:var(--s6)}
.head2 .t{
font-size:clamp(26px,3.1vw,52px);line-height:1.1;letter-spacing:-.03em;
color:var(--ink);margin:0;
}
.head2 .t em{display:block;font-style:normal;color:var(--faint)}
.head2 .body{align-self:start}
.head2 .body p + p{margin-top:var(--s3)}
.head2 .more{
display:inline-flex;align-items:baseline;gap:.5em;margin-top:var(--s4);
font-size:13px;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:3px;
transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.head2 .more:hover{color:var(--orange);border-color:var(--orange)}
.head2 .more i{font-style:normal;transition:transform var(--t-mid) var(--ease)}
.head2 .more:hover i{transform:translateX(.35em)}
/* ---------- CLAY: project layout ----------
Name and one line sit high with a lot of room above; the frame
drops well below them. Hovering the frame raises a small tag. */
.case{padding:var(--s7) 0}
.claycase{padding:clamp(120px,15vw,260px) 0 var(--s7)}
.claycase .nm{font-size:clamp(24px,2.4vw,42px);letter-spacing:-.028em;line-height:1.06;color:var(--ink);margin:0}
.claycase .one{margin-top:var(--s2);font-size:clamp(14.5px,1.05vw,18px);line-height:1.45;color:var(--ash);letter-spacing:-.008em}
.claycase .stack{margin-top:clamp(56px,6.5vw,120px)}
.viewtag{
position:fixed;top:0;left:0;z-index:72;pointer-events:none;
background:var(--ink);color:#fff;font-size:12px;letter-spacing:-.005em;
padding:9px 16px;border-radius:0;opacity:0;
transform:translate3d(-50%,-50%,0) scale(.9);
transition:opacity var(--t-fast) var(--ease),transform var(--t-mid) var(--ease);
}
.viewtag.on{opacity:1;transform:translate3d(-50%,-50%,0) scale(1)}
/* Clay's logo-tile + photo pairing */
.tile-logo{
background:#F3F4F6;display:grid;place-items:center;aspect-ratio:1;padding:18%;
}
.tile-logo img{max-width:100%;max-height:100%;object-fit:contain}
/* ---------- BASIC: statement over full-bleed imagery ---------- */
.culture{
position:relative;min-height:min(92vh,900px);display:grid;align-items:center;
overflow:hidden;background:var(--ink);
}
.culture-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;filter:grayscale(1) contrast(1.05)}
.culture::after{
content:"";position:absolute;inset:0;
background:linear-gradient(100deg,rgba(11,11,11,.86) 0%,rgba(11,11,11,.62) 46%,rgba(11,11,11,.34) 100%);
}
.culture .stage{position:relative;z-index:2;padding:var(--s7) 0}
.culture-claim{
font-size:clamp(34px,5.6vw,96px);line-height:1.0;letter-spacing:-.04em;color:#fff;margin:0;
}
.culture-claim .dot{
display:inline-block;width:.42em;height:.42em;border-radius:50%;
background:var(--yellow);vertical-align:.06em;margin:0 .12em;
}
.culture-claim em{font-style:normal;color:var(--orange)}
.culture-sub{margin-top:var(--s4);color:rgba(255,255,255,.62)}
.culture-meta{margin-top:var(--s5);display:flex;flex-wrap:wrap;gap:var(--s4) var(--s5);justify-content: start;}
.culture-meta div .v{font-size:clamp(22px,2vw,34px);letter-spacing:-.03em;color:var(--yellow);line-height:1}
.culture-meta div .k{font-size:11.5px;color:rgba(255,255,255,.55);margin-top:8px}
/* the BASIC circular mark */
.reel{
position:absolute;right:clamp(24px,6vw,120px);bottom:clamp(24px,6vw,110px);z-index:3;
width:clamp(96px,9vw,140px);aspect-ratio:1;border-radius:50%;
background:#fff;color:var(--ink);display:grid;place-items:center;text-align:center;
font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.3;
transition:transform var(--t-mid) var(--ease),background var(--t-fast) var(--ease);
}
.reel:hover{transform:scale(1.06);background:var(--yellow)}
/* ---------- BASIC: image-left, headline-right rows ---------- */
.thinking{border-top:1px solid var(--ink)}
.trow{
display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);align-items:center;
padding:var(--s4) 0;border-bottom:1px solid var(--line);
transition:padding-left var(--t-mid) var(--ease);
}
.trow:hover{padding-left:clamp(8px,1vw,18px)}
.trow .im{grid-column:1/4;aspect-ratio:16/10;overflow:hidden;background:rgba(0,0,0,.04)}
.trow .im img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter var(--t-mid) var(--ease),transform var(--t-slow) var(--ease)}
.trow:hover .im img{filter:none;transform:scale(1.04)}
.trow .tx{grid-column:5/12}
.trow .tx h4{font-size:clamp(19px,1.9vw,32px);letter-spacing:-.026em;line-height:1.12;color:var(--ink);margin:0;transition:color var(--t-fast) var(--ease)}
.trow:hover .tx h4{color:var(--orange)}
.trow .tx .m{margin-top:10px;font-size:13px;color:var(--ash)}
.trow .ar{grid-column:12/13;justify-self:end;font-size:20px;color:var(--ink);transition:transform var(--t-mid) var(--ease)}
.trow:hover .ar{transform:translateX(6px);color:var(--orange)}
/* =============================================================
v5 — the remaining treatments from the reference set
============================================================= */
/* ---- BASIC: press credit under the hero ---- */
.credit{
margin-top:var(--s4);font-size:13px;line-height:1.5;letter-spacing:-.004em;color:var(--ash);
white-space:nowrap;
}
.credit b{font-weight:500;color:var(--ink)}
/* ---- CLAY: pill contact in the nav ---- */
.nav-pill{
align-self:center;background:var(--ink);color:#fff;border-radius:0;
padding:13px 26px;font-size:15px;font-weight:500;letter-spacing:-.012em;white-space:nowrap;
transition:background var(--t-fast) var(--ease);
}
.nav-pill:hover{background:var(--orange)}
/* ---- BASIC: drag carousel for featured engagements ---- */
.carousel{position:relative;margin-top:var(--s4)}
.car-top{
display:flex;align-items:baseline;justify-content:space-between;
padding-bottom:var(--s3);border-top:1px solid var(--ink);padding-top:var(--s2);
}
.car-count{font-size:11.5px;letter-spacing:.06em;color:var(--ink);font-variant-numeric:tabular-nums}
.car-count b{font-weight:400}
.car-count span{color:var(--faint)}
.car-dot{width:7px;height:7px;border-radius:50%;background:var(--orange);align-self:center}
.car-view{
display:flex;gap:clamp(24px,3.4vw,72px);overflow-x:auto;scroll-snap-type:x proximity;
cursor:grab;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:var(--s4);
}
.car-view::-webkit-scrollbar{display:none}
.car-view.dragging{cursor:grabbing;scroll-snap-type:none}
.car-item{flex:0 0 clamp(260px,26vw,400px);scroll-snap-align:start;user-select:none}
.car-item .lg{height:46px;display:flex;align-items:center;margin-bottom:var(--s3)}
.car-item .lg img{max-height:42px;max-width:180px;object-fit:contain;object-position:left center;filter:grayscale(1);opacity:.75;transition:var(--t-mid) var(--ease)}
.car-item:hover .lg img{filter:none;opacity:1}
.car-item .rule{width:26px;height:1px;background:var(--ink);margin-bottom:var(--s3)}
.car-item h4{font-size:clamp(15px,1.15vw,19px);letter-spacing:-.018em;color:var(--ink);margin:0}
.car-item .yrs{font-size:11.5px;color:var(--orange);margin-top:6px}
.car-item p.p-s{margin-top:var(--s2)}
.car-item .yrs{font-size:13px}
.car-bar{height:1px;background:var(--line);position:relative;overflow:hidden}
.car-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--ink);width:20%;transition:transform .1s linear;transform-origin:0 50%}
.dragcue{
position:fixed;top:0;left:0;z-index:72;pointer-events:none;
width:82px;height:82px;border-radius:50%;background:var(--yellow);color:var(--ink);
display:grid;place-items:center;font-size:10.5px;font-weight:600;letter-spacing:.13em;
opacity:0;transform:translate3d(-50%,-50%,0) scale(.85);
transition:opacity var(--t-fast) var(--ease),transform var(--t-mid) var(--ease);
}
.dragcue.on{opacity:1;transform:translate3d(-50%,-50%,0) scale(1)}
/* ---- CLAY: airy borderless client wall ---- */
.wall{
display:grid;grid-template-columns:repeat(6,1fr);
gap:clamp(34px,4.4vw,80px) var(--gut);align-items:center;margin-top:var(--s5);
}
.wall span{display:grid;place-items:center;height:44px}
.wall img{max-width:100%;max-height:40px;object-fit:contain;filter:grayscale(1);opacity:.3;transition:opacity var(--t-mid) var(--ease),filter var(--t-mid) var(--ease)}
.wall span:hover img{opacity:1;filter:none}
.wall-more{display:flex;justify-content:center;margin-top:var(--s5)}
/* =============================================================
RESULTS — the one deep block. Everything else on this page is
paper; this is the moment the tone changes to something that
expects to be taken at its word.
============================================================= */
.deep{
position:relative;overflow:hidden;padding:var(--s7) 0;
background:
radial-gradient(130% 100% at 8% -10%, #1B2650 0%, rgba(27,38,80,0) 58%),
radial-gradient(90% 80% at 96% 108%, #10203F 0%, rgba(16,32,63,0) 62%),
linear-gradient(168deg, #0C1330 0%, #080C1D 62%, #06090F 100%);
}
.deep-in{position:relative;z-index:2}
.deep .orbs{z-index:0}
.orb.do1{width:40vw;max-width:560px;aspect-ratio:1;left:-6%;top:-8%;
background:radial-gradient(circle at 40% 36%,rgba(0,87,255,.50),rgba(0,87,255,0) 68%);filter:blur(80px)}
.orb.do2{width:26vw;max-width:360px;aspect-ratio:1;right:4%;top:8%;
background:radial-gradient(circle at 40% 36%,rgba(255,106,0,.34),rgba(255,106,0,0) 68%);filter:blur(74px)}
.orb.do3{width:34vw;max-width:470px;aspect-ratio:1;right:16%;bottom:-14%;
background:radial-gradient(circle at 40% 36%,rgba(255,196,0,.22),rgba(255,196,0,0) 68%);filter:blur(90px)}
.orb.do4{width:11vw;max-width:150px;aspect-ratio:1;left:34%;top:44%;
background:radial-gradient(circle at 40% 36%,rgba(0,87,255,.44),rgba(0,87,255,0) 70%);filter:blur(34px)}
.deep-rule{background:rgba(255,255,255,.14);margin:var(--s7) 0 var(--s5)}
.deep .fig{color:#fff}
.deep .proof .fig{
background:linear-gradient(96deg,#FFC400 0%,#FF6A00 52%,#FF8A3D 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* ---- what we do, as a collapse-and-expand list ---- */
.acc{border-top:1px solid rgba(255,255,255,.16)}
.ac{border-bottom:1px solid rgba(255,255,255,.16)}
.ac-q{
width:100%;display:grid;grid-template-columns:56px 1fr 26px;align-items:baseline;
column-gap:var(--gut);text-align:left;padding:clamp(20px,2.2vw,32px) 0;
}
.ac-q .i{font-size:12px;font-weight:600;letter-spacing:.13em;color:var(--yellow)}
.ac-q .t{font-size:clamp(20px,2.1vw,34px);letter-spacing:-.026em;color:#fff;line-height:1.1}
.ac-q .s{display:block;font-size:14.5px;letter-spacing:-.006em;color:rgba(255,255,255,.5);
margin-top:8px;max-width:56ch}
.ac-q .pm{position:relative;width:18px;height:18px;justify-self:end;align-self:center}
.ac-q .pm::before,.ac-q .pm::after{
content:"";position:absolute;background:rgba(255,255,255,.7);
transition:transform var(--t-mid) var(--ease),opacity var(--t-fast) var(--ease);
}
.ac-q .pm::before{left:0;right:0;top:50%;height:1px;margin-top:-.5px}
.ac-q .pm::after{top:0;bottom:0;left:50%;width:1px;margin-left:-.5px}
.ac.open .ac-q .pm::after{transform:scaleY(0)}
.ac.open .ac-q .t{color:var(--yellow)}
.ac-a{max-height:0;overflow:hidden;transition:max-height .62s var(--ease)}
.ac-a .in{padding:0 0 clamp(24px,2.6vw,40px);display:grid;
grid-template-columns:56px 1fr;column-gap:var(--gut)}
.ac-a .in p{grid-column:2;color:rgba(255,255,255,.68);max-width:70ch}
.ac:hover .ac-q .t{color:var(--yellow)}
@media (max-width: 600px) {
.ac-a .in{
grid-template-columns:40px ;
}
}
/* =============================================================
SELECTED WORK — Clay's offset two-column grid. The right column
starts a full step lower, so the eye zig-zags instead of
scanning rows.
============================================================= */
.cases{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,4vw,96px)}
.cases .col{display:flex;flex-direction:column;gap:var(--s7)}
.cases .col:last-child{margin-top:var(--s7)}
.cs{display:block}
.cs-im{overflow:hidden;background:rgba(0,0,0,.04)}
.cs-im img{width:100%;height:100%;object-fit:cover;
transform:scale(1.04);opacity:0;
transition:transform 1.3s var(--ease),opacity 1.1s var(--ease)}
.cs-im.in img{transform:none;opacity:1}
.cs:hover .cs-im img{transform:scale(1.035)}
.cs-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--gut);
margin-top:var(--s3);padding-bottom:14px;border-bottom:1px solid var(--line)}
.cs-h h3{margin:0;font-weight:var(--w-sub);color:var(--ink);
font-size:clamp(21px,2vw,34px);line-height:1.06;letter-spacing:-.028em}
.cs-h .label{flex:none;white-space:nowrap}
.cs .one{margin:16px 0 0;font-size:clamp(15px,1.06vw,18px);line-height:1.55;
letter-spacing:-.008em;color:var(--text);max-width:46ch}
.cs-f{display:flex;align-items:baseline;gap:14px;margin-top:var(--s3)}
.cs-f .fig{font-size:clamp(26px,2.4vw,44px)}
.cs-f .fig-k{margin-top:0;font-size:13.5px;color:var(--ash);line-height:1.35;max-width:24ch}
.cs .note{margin-top:8px}
/* =============================================================
METHOD — cards that turn over. The front is the claim, the
back is the evidence.
============================================================= */
.mcards{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut)}
.mc{grid-column:span 4;perspective:1400px;height:clamp(280px,26vw,360px)}
.mc:nth-child(4),.mc:nth-child(5){grid-column:span 6}
.mc-in{
position:relative;width:100%;height:100%;transform-style:preserve-3d;
transition:transform .82s cubic-bezier(.5,.02,.2,1);
}
.mc.flip .mc-in{transform:rotateY(180deg)}
/* a card is a control, so it should not select as if it were text */
.mc{-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.mc-f,.mc-b{
position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
display:flex;flex-direction:column;padding:clamp(22px,2.2vw,34px);
border:1px solid var(--line);
}
.mc-f{background:var(--paper)}
.mc-b{transform:rotateY(180deg);background:var(--ink);border-color:var(--ink);color:#fff}
.mc .n{font-size:12px;font-weight:600;letter-spacing:.13em;color:var(--blue)}
.mc-b .n{color:var(--yellow)}
.mc .t{margin:auto 0 0;font-weight:var(--w-sub);color:var(--ink);
font-size:clamp(26px,2.6vw,42px);line-height:1;letter-spacing:-.03em}
.mc-f .d{margin:14px 0 0;font-size:15px;line-height:1.5;color:var(--ash);max-width:30ch}
.mc-b .d{margin:auto 0 0;font-size:15px;line-height:1.55;color:rgba(255,255,255,.72)}
.mc-b .own{margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.18);
font-size:12.5px;letter-spacing:.02em;color:var(--yellow)}
.mc-f .turn{margin-top:16px;font-size:12px;font-weight:600;letter-spacing:.13em;
text-transform:uppercase;color:var(--faint)}
/* "Hover for detail" on a phone is an instruction nobody can follow.
Both strings are in the markup and the device picks one, so the
label is right without asking JavaScript what kind of screen it is. */
.mc-f .turn .t-t{display:none}
/* =============================================================
TEAM — four faces, then a panel for everyone else
============================================================= */
.team-more{margin-top:var(--s5);display:flex;justify-content:center}
.pill-btn{
display:inline-flex;align-items:center;gap:14px;
border:1px solid var(--ink);border-radius:0;
padding:16px 26px;font-size:15px;font-weight:500;letter-spacing:-.012em;
transition:background var(--t-mid) var(--ease),color var(--t-mid) var(--ease);
}
.pill-btn b{font-weight:400;color:var(--ash);font-variant-numeric:tabular-nums}
.pill-btn:hover{background:var(--ink);color:#fff}
.pill-btn:hover b{color:var(--yellow)}
.panel{position:fixed;inset:0;z-index:95;visibility:hidden}
.panel.on{visibility:visible}
.panel-bg{position:absolute;inset:0;background:rgba(11,11,11,.5);
opacity:0;transition:opacity var(--t-mid) var(--ease)}
.panel.on .panel-bg{opacity:1}
.panel-in{
position:absolute;right:0;top:0;bottom:0;width:min(560px,94vw);
background:var(--paper);display:flex;flex-direction:column;
transform:translateX(100%);transition:transform .62s var(--ease);
box-shadow:-30px 0 90px rgba(11,11,11,.2);
}
.panel.on .panel-in{transform:none}
.panel-top{display:flex;align-items:center;justify-content:space-between;
padding:26px clamp(22px,3vw,40px);border-bottom:1px solid var(--line)}
.panel-top .x{position:relative;width:22px;height:22px;flex:none}
.panel-top .x i{position:absolute;left:0;right:0;top:50%;height:1.5px;background:var(--ink)}
.panel-top .x i:nth-child(1){transform:rotate(45deg)}
.panel-top .x i:nth-child(2){transform:rotate(-45deg)}
.panel-body{overflow-y:auto;padding:var(--s4) clamp(22px,3vw,40px) var(--s6)}
.panel-leads{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4) var(--gut);margin-top:var(--s3)}
.panel-leads .ph{aspect-ratio:4/5;overflow:hidden;background:rgba(0,0,0,.04)}
.panel-leads img{width:100%;height:100%;object-fit:cover}
.panel-leads .nm{margin-top:12px;font-size:16px;letter-spacing:-.014em;color:var(--ink)}
.panel-leads .rl{margin:5px 0 0;font-size:12.5px;line-height:1.4;color:var(--ash)}
.panel-crew{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut);margin-top:var(--s3)}
.panel-crew .ph{aspect-ratio:1;overflow:hidden;background:rgba(0,0,0,.04)}
.panel-crew img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);
transition:filter var(--t-mid) var(--ease)}
.panel-crew figure:hover img{filter:none}
.panel-crew figure{margin:0}
.panel-crew figcaption{margin-top:8px;font-size:12px;color:var(--ash);line-height:1.3}
/* =============================================================
MOMENTS — a marquee that never stops. Mixed heights and
vertical offsets, so it reads as a contact sheet in motion.
============================================================= */
.moments{padding:var(--s6) 0 var(--s7);overflow:hidden;background:var(--warm)}
.mq{margin-top:var(--s4);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.mq-track{display:flex;align-items:center;gap:clamp(18px,2.4vw,44px);width:max-content;
animation:marquee 64s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ONE height for every frame, width from the photograph's own shape.
This used to be three fixed frame sizes — tall, standard, wide —
each nudged up or down by a few percent to make a scatter. That is
a reasonable thing to do with pictures of mixed proportions, and
the wrong thing to do with a set that has been shot and cropped to
a common height: the nudges and the three heights were fighting the
alignment the pictures already had.
So the row has a single height and each frame is as wide as its
picture wants to be. Equal-height originals land on one clean
line, with the variety coming from their widths — which is what
variety in a marquee should come from anyway. */
.mq figure{
margin:0;flex:none;overflow:hidden;background:rgba(0,0,0,.05);
height:clamp(200px,22vw,360px);width:auto;transform:none;
/* a panorama would otherwise run for half a screen */
max-width:clamp(340px,48vw,820px);
}
.mq img{display:block;height:100%;width:auto;object-fit:cover}
/* ---- corrections after the restructure ---- */
.dark .aside,.deep .aside{color:rgba(255,255,255,.55)}
.dark .head .num,.deep .head .num{color:var(--yellow)}
.ac-q .t{display:block}
.moments{background:var(--cool)}
/* the ledger preview is large now, so keep it clear of the cursor */
.peek{transform:translate3d(-50%,-56%,0) scale(.94)}
.peek.on{transform:translate3d(-50%,-56%,0) scale(1)}
/* =============================================================
ONE SECTION HEADER, EVERYWHERE
The numeral, the title and the intro were sitting on three
different axes and two different type sizes. Now: numeral on
the left axis, title directly under it at a single size, intro
locked to the right columns and set with enough weight to
count as copy rather than a caption.
============================================================= */
.head{margin-bottom:var(--s6)}
.head .num{
grid-column:1/9;grid-row:1;padding-top:0;margin-bottom:var(--s3);
font-size:12px;font-weight:600;letter-spacing:.13em;
}
.head .h2,.head .h3{
grid-column:1/9;grid-row:2;
font-size:clamp(30px,3.8vw,66px);line-height:1.0;letter-spacing:-.032em;
margin-left:-.03em;color:var(--ink);font-weight:400;
}
.head .aside{
grid-column:9/13;grid-row:2;align-self:end;
font-size:clamp(15.5px,1.15vw,19px);font-weight:500;line-height:1.5;
letter-spacing:-.01em;color:var(--text);
}
.dark .head .h2,.dark .head .h3,.deep .head .h2,.deep .head .h3{color:#fff}
.dark .head .aside,.deep .head .aside{color:rgba(255,255,255,.72)}
/* =============================================================
DARK IS BLUE AGAIN — Thủy, not soot. Every dark surface on the
page now comes from the same navy, so they read as one family.
============================================================= */
.dark{background:var(--navy)}
.deep{
background:
radial-gradient(128% 100% at 6% -12%, #1747C4 0%, rgba(23,71,196,0) 56%),
radial-gradient(92% 82% at 97% 110%, #0E3096 0%, rgba(14,48,150,0) 60%),
linear-gradient(166deg, #082472 0%, #05154A 58%, #030C28 100%);
}
.orb.do1{background:radial-gradient(circle at 40% 36%,rgba(64,132,255,.55),rgba(64,132,255,0) 68%)}
.orb.do2{background:radial-gradient(circle at 40% 36%,rgba(255,106,0,.30),rgba(255,106,0,0) 68%)}
.orb.do3{background:radial-gradient(circle at 40% 36%,rgba(255,196,0,.20),rgba(255,196,0,0) 68%)}
.orb.do4{background:radial-gradient(circle at 40% 36%,rgba(90,150,255,.50),rgba(90,150,255,0) 70%)}
.mc-b{background:var(--navy);border-color:var(--navy)}
/* ---- flip cards: both faces start from the top, same rhythm ---- */
.mc-f .t,.mc-b .t{margin:var(--s3) 0 0}
.mc-f .d{margin:14px 0 0;max-width:32ch}
.mc-b .d{margin:var(--s3) 0 0;color:rgba(255,255,255,.74)}
.mc-f .turn{margin-top:auto}
.mc-b .own{margin-top:auto}
.mc-b .n{color:var(--yellow)}
/* ---- intro copy carries weight, everywhere it introduces ---- */
.hero-foot .p{font-weight:500;color:var(--ink);font-size:clamp(16px,1.1vw,18.5px)}
.head2 .lead{font-weight:500}
/* =============================================================
HERO — the mark as a performance curve, behind everything
============================================================= */
.tri-stage{
position:absolute;inset:0;z-index:1;pointer-events:none;
opacity:0;animation:triIn 2.2s var(--ease) .35s both;
}
.tri-stage canvas{display:block;width:100%;height:100%}
@keyframes triIn{from{opacity:0}to{opacity:1}}
/* the orbs step back so the facets read as the structure */
.hero .orb{opacity:.6}
.hero .orb.o1{opacity:.62}
/* the hero has more to carry now, so the type gives a little back */
.hw > i{font-size:clamp(34px,5.2vw,104px)}
.shot{--sh:clamp(180px,34vh,390px)}
/* ---- claim, copy, ways in ---- */
.hero-line{
margin:0 0 14px;font-size:clamp(17px,1.35vw,23px);line-height:1.28;
letter-spacing:-.018em;font-weight:500;color:var(--ink);max-width:24ch;
}
.hero-foot .p{max-width:48ch;font-weight:400;color:var(--text);
font-size:clamp(14.5px,1vw,16.5px);line-height:1.58}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s3);justify-content: start;}
.btn-a,.btn-b{
display:inline-flex;align-items:center;gap:9px;border-radius:0;
padding:14px 26px;font-size:14.5px;font-weight:500;letter-spacing:-.01em;
transition:background var(--t-mid) var(--ease),color var(--t-mid) var(--ease),
border-color var(--t-mid) var(--ease),transform var(--t-fast) var(--ease);
}
.btn-a{background:var(--ink);color:#fff}
.btn-a:hover{background:var(--blue);transform:translateY(-1px)}
.btn-b{border:1px solid var(--line);color:var(--ink)}
.btn-b:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn-b i{font-style:normal;transition:transform var(--t-mid) var(--ease)}
.btn-b:hover i{transform:translateX(.3em)}
/* ---- four facts, borrowed from the option-A hero ---- */
.hstats{
display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut);
align-self:end;padding-top:var(--s3);border-top:1px solid var(--ink);
}
.hstats .v{
font-size:clamp(22px,2.1vw,38px);line-height:.9;letter-spacing:-.045em;
color:var(--orange);font-variant-numeric:lining-nums tabular-nums;margin-left:-.03em;
}
.hstats .k{
margin:10px 0 0;font-size:11px;font-weight:600;letter-spacing:.12em;
text-transform:uppercase;color:var(--blue);line-height:1.35;
}
/* =============================================================
HERO HEADLINE — the positioning line, broken over three steps
around the frame. Line 1 on the left axis, line 2 stepped to
the right, the frame between them, and the date closing the
composition on the frame's own centre line.
============================================================= */
.hw > i{font-size:clamp(25px,4.4vw,88px);line-height:.9;letter-spacing:-.036em}
.hw .ch.hot{color:var(--orange)} /* "performance" — the result word */
.hw1{grid-column:1/10; grid-row:1;justify-self:start;align-self:end;padding-top:0}
.hw2{grid-column:3/13; grid-row:2;justify-self:end;align-self:start;padding-top:0}
.hw3{grid-column:1/13; grid-row:4;justify-self:center}
.hw2 > i{color:var(--ink)} /* only the hot word is coloured */
.hw3 > i{color:var(--blue)} /* the date is a fact, so it is blue */
.hw1 > i{--d:.16s}
.hw2 > i{--d:.40s}
.hw3 > i{--d:.72s}
.shot{grid-column:1/13;grid-row:3;--sh:clamp(165px,30vh,360px)}
.canvas{row-gap:clamp(8px,1.1vw,18px)}
/* ---- the three verbs step down to a supporting line ---- */
.hero-line{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.13em;
text-transform:uppercase;color:var(--ink);max-width:none;justify-content: start;
}
.hero-line i{font-style:normal;color:var(--yellow);font-size:16px;line-height:0}
/* four lines of type plus a frame plus the stat bar is a lot for
one screen — buy the last few pixels back at the top */
.hero{padding:clamp(88px,9vw,124px) 0 clamp(18px,2.4vw,32px)}
/* final fit: four type rows + frame + stat bar inside one screen.
On short windows the stat bar sits just past the fold, which is
the scroll cue. */
.hero{padding:clamp(84px,8.4vw,118px) 0 clamp(16px,2vw,28px)}
.hw > i{font-size:clamp(24px,4vw,80px)}
.shot{--sh:clamp(150px,27vh,330px)}
.hero-foot .p{max-width:44ch}
.hero-cta{margin-top:18px}
.hero-cta .btn-a,.hero-cta .btn-b{padding:13px 24px}
/* =============================================================
HERO, CORRECTED
The previous version scattered the sentence around the frame.
That worked when the three words were independent verbs; it
fails for one continuous clause, because a clause has to be
read. So: the sentence is a single staircase block on the left
axis, the frame is evidence beside it, and nothing interrupts
the reading order.
============================================================= */
.canvas{
display:grid;grid-template-columns:repeat(12,1fr);
column-gap:var(--gut);row-gap:0;align-items:center;
}
.hcopy{grid-column:1/8}
.shot{grid-column:8/13;grid-row:auto;--sh:clamp(200px,40vh,420px);
display:flex;flex-direction:column;align-items:stretch}
.shot-in,.shot-cap{width:min(100%,calc(var(--sh) * 16 / 9))}
.hw{margin:0;line-height:.9}
.hw > i{font-size:clamp(26px,4.4vw,86px);letter-spacing:-.036em;color:var(--ink)}
.hw1{padding:0}
.hw2{padding:0 0 0 4.5%} /* the staircase */
.hw3{padding:0 0 0 9.5%}
.hw .ch.hot{color:var(--orange)} /* "performance" — the result word */
.hw3 > i{color:var(--blue)} /* the date is a fact */
.hw1 > i{--d:.14s}
.hw2 > i{--d:.34s}
.hw3 > i{--d:.56s}
/* a sentence should not drift apart on scroll */
.hero-drift .hw1,.hero-drift .hw2,.hero-drift .hw3{transform:none}
/* ---- headline, final ----------------------------------------
The staircase was a decoration on top of a sentence. A clause
does not need help being read; it needs a single left axis and
room. Flush left, three lines, one size, half the stage — the
frame takes the other half. */
.hcopy{grid-column:1/7}
.shot{grid-column:7/13}
.hw1,.hw2,.hw3{padding:0}
.hw > i{font-size:clamp(25px,3.9vw,70px);line-height:.92}
.hcopy .hw + .hw{margin-top:.04em}
/* ---- hero, with the 3D as the right-hand subject ---- */
.hcopy{grid-column:1/8}
.hw > i{font-size:clamp(30px,5vw,92px);line-height:.92}
.tri-stage{opacity:0;animation:triIn 1.8s var(--ease) .3s both}
.hero .orb{opacity:.5}
/* =============================================================
SHOWREEL — the film sits directly under the claim, the way
Clay does it: state the position, then show the work moving.
============================================================= */
.filmsec{padding:0 0 var(--s7)}
.film-head{
display:flex;align-items:baseline;gap:clamp(14px,2vw,34px);flex-wrap:wrap;
padding-bottom:var(--s3);border-bottom:1px solid var(--line);margin-bottom:var(--s4);
}
.film-sub{margin:0;font-size:clamp(15px,1.15vw,19px);font-weight:500;color:var(--text)}
/* The frame opens as it comes into view. It starts at 80% and reaches
full stage width at the moment it is centred — a 25% growth that can
never overflow, because the end state is the layout's real width. */
.film{
position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink);
box-shadow:0 40px 100px rgba(11,11,11,.22);
transform:scale(var(--k,.8));transform-origin:50% 50%;will-change:transform;
}
.film video{width:100%;height:100%;object-fit:cover;display:block}
.film::after{ /* a scrim, so the control stays legible */
content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
background:linear-gradient(180deg,rgba(11,11,11,.26) 0%,rgba(11,11,11,.04) 42%,rgba(11,11,11,.52) 100%);
transition:opacity var(--t-slow) var(--ease);
}
.film.playing::after{opacity:0}
/* the whole frame is the button — hover blacks it out and says so */
.film-play{
position:absolute;inset:0;z-index:2;display:grid;place-items:center;
color:#fff;cursor:pointer;background:rgba(11,11,11,0);
transition:background .5s var(--ease);
}
.film:hover .film-play{background:rgba(11,11,11,.74)}
.film-play .disc{
grid-area:1/1;width:clamp(74px,7vw,108px);aspect-ratio:1;border-radius:50%;
display:grid;place-items:center;background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.42);backdrop-filter:blur(8px);
transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease);
}
.film-play .disc svg{width:34%;margin-left:8%;color:#fff}
.film:hover .film-play .disc{opacity:0;transform:scale(.86)}
.film-play .cue{
grid-area:1/1;display:inline-flex;align-items:center;gap:12px;
padding:15px 30px;border-radius:0;
background:var(--yellow);color:var(--ink);
font-size:14px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
opacity:0;transform:translateY(10px) scale(.96);
transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease);
}
.film-play .cue svg{width:13px;color:var(--ink)}
.film:hover .film-play .cue{opacity:1;transform:none}
.film.playing .film-play{opacity:0;pointer-events:none}
.film.playing:hover .film-play{opacity:1;pointer-events:auto}
.film.playing .film-play .disc svg,.film.playing .film-play .cue svg{display:none}
.film.playing .film-play .cue::before{
content:"";width:11px;aspect-ratio:1/1.2;
border-left:3px solid var(--ink);border-right:3px solid var(--ink);
}
.film-foot{
position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none;
display:flex;align-items:center;gap:18px;
padding:clamp(14px,1.8vw,26px) clamp(16px,2vw,30px);
font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#fff;
}
.film-bar{flex:1;height:1px;background:rgba(255,255,255,.3);position:relative;overflow:hidden}
.film-bar i{position:absolute;inset:0;background:var(--orange);
transform:scaleX(0);transform-origin:0 50%}
/* =============================================================
TRUSTED BAND — two rows of five, twice the size.
Ten marks read; sixteen small ones are wallpaper.
============================================================= */
/* =============================================================
RESULTS — one figure at a time.
============================================================= */
.pcycle{margin-top:var(--s2)}
.pc-stage{position:relative;min-height:clamp(200px,20vw,290px)}
.pc{
position:absolute;inset:0;opacity:0;transform:translateY(18px);
pointer-events:none;
transition:opacity .62s var(--ease),transform .72s var(--ease);
}
.pc.on{opacity:1;transform:none;pointer-events:auto}
.pc .fig{
font-size:clamp(46px,8.4vw,158px);line-height:.86;letter-spacing:-.05em;
background:linear-gradient(96deg,#FFC400 0%,#FF6A00 54%,#FF9A4D 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.pc .fig-k{
margin-top:var(--s3);font-size:clamp(17px,1.5vw,26px);font-weight:400;
letter-spacing:-.018em;color:#fff;
}
.pc .note{margin-top:10px;color:rgba(255,255,255,.5)}
.pc-nav{
display:flex;align-items:center;justify-content:space-between;gap:var(--gut);
margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.16);
}
.pc-dots{display:flex;gap:10px}
.pc-dots button{padding:8px 4px}
.pc-dots i{
display:block;width:34px;height:2px;background:rgba(255,255,255,.24);
transition:background var(--t-mid) var(--ease),width var(--t-mid) var(--ease);
}
.pc-dots button:hover i{background:rgba(255,255,255,.55)}
.pc-dots button.on i{background:var(--yellow);width:52px}
.pc-count{
margin:0;font-size:12px;font-weight:600;letter-spacing:.13em;
color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums;
}
.pc-count b{font-weight:600;color:var(--yellow)}
/* ---- Ready to launch: the mark assembling ---- */
.launch-stage{
position:relative;width:100%;
height:clamp(300px,32vw,480px);pointer-events:none;
}
.launch-stage canvas{width:100%;height:100%;display:block}
/* ---- Ready to launch: the mark centred over the way in ---- */
.launch-stage{
position:relative;width:100%;
height:clamp(280px,30vw,460px);pointer-events:none;
margin:var(--s3) 0 var(--s4);
}
.launch-stage canvas{width:100%;height:100%;display:block}
.launch-cta{max-width:56ch;margin:0 auto;text-align:center}
.launch-cta .p{margin:0 auto;max-width:44ch}
.launch-cta .cta-line{margin-top:var(--s4);justify-content:center}
/* ---- project detail panel ---- */
/* The project panel carries a gallery now, so 720px was making the
pictures the smallest thing in the room. Three quarters of the
window, which on a 1920 screen is 1440 and on a laptop is about
1100 — wide enough for the photographs to be the subject. */
.panel-in.wide{width:min(75vw,1560px)}
/* ── project gallery ──────────────────────────────────────────────
The window keeps the 16:10 the cover was already cropped to, and the
track slides inside it. Square, like everything else here: a rounded
photo frame would be the only round corner left on the site.
The bar only appears once there is more than one slide — a counter
reading 1/1 with two dead arrows is worse than no counter. */
.pj-gal{margin-bottom:var(--s4)}
.pj-win{aspect-ratio:16/10;overflow:hidden;background:rgba(0,0,0,.04)}
.pj-track{
display:flex;height:100%;
transition:transform .5s cubic-bezier(.45,.05,.2,1);
will-change:transform;
}
.pj-slide{flex:0 0 100%;margin:0;height:100%}
.pj-slide img{display:block;width:100%;height:100%;object-fit:cover;
user-select:none;-webkit-user-drag:none}
.pj-bar{display:none}
.pj-gal.has .pj-bar{
display:flex;align-items:center;gap:14px;
margin-top:12px;
}
.pj-bar button{
width:42px;height:34px;flex:none;
border:1.5px solid var(--line);background:transparent;border-radius:0;
font-size:15px;line-height:1;color:var(--ink);cursor:pointer;
transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
background var(--t-fast) var(--ease);
}
.pj-bar button:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:#fff}
.pj-bar button:disabled{opacity:.3;cursor:default}
.pj-count{
margin:0 auto 0 0;order:-1;
font-size:12px;font-weight:600;letter-spacing:.14em;
color:var(--ash);font-variant-numeric:tabular-nums;
}
.pj-count .pj-now{color:var(--ink)}
.pj-name{margin:0;font-weight:var(--w-sub);color:var(--ink);
font-size:clamp(26px,2.6vw,42px);line-height:1.02;letter-spacing:-.03em}
.pj-line{margin:14px 0 0;font-size:clamp(17px,1.35vw,22px);line-height:1.34;
letter-spacing:-.018em;color:var(--ink);font-weight:500}
.pj-body{margin-top:var(--s3)}
.pj-lab{margin-top:var(--s5);padding-bottom:12px;border-bottom:1px solid var(--line)}
.pj-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4) var(--gut);margin-top:var(--s3)}
.pj-kpis .fig-k{font-size:13px;margin-top:8px}
.pj-kpis .note{margin-top:5px}
.pj-cta{margin-top:var(--s5);width:100%;justify-content:center}
/* the cards and ledger rows are openable, so say so */
.cs{cursor:pointer}
.idx{cursor:pointer}
.idx:focus-visible,.cs:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
/* the reel is 1614x690 — give the frame the film's own ratio so nothing
is cropped off the top and bottom */
.film{aspect-ratio:1614/690}
/* =============================================================
READY TO LAUNCH — one horizontal axis: the way in on the left,
the mark on the right, the two halves centred against each other.
============================================================= */
.g.launch{align-items:center;row-gap:var(--s5)}
.launch-cta{max-width:none;margin:0;text-align:left}
.launch-cta .p{margin:0;max-width:36ch}
.launch-cta .cta-line{margin-top:var(--s4);justify-content:flex-start}
.launch-stage{
position:relative;width:100%;margin:0;
height:clamp(280px,26vw,420px);pointer-events:none;
}
.launch-stage canvas{width:100%;height:100%;display:block}
/* ---- the brief sheet carries the mark ---- */
.sheet-mark{
position:absolute;right:clamp(18px,3vw,44px);top:clamp(74px,8vw,104px);
width:clamp(58px,6vw,92px);aspect-ratio:1;z-index:3;pointer-events:none;
}
.sheet-mark canvas{width:100%;height:100%;display:block}
/* =============================================================
TRUSTED BY — logos balanced by AREA, not by height.
Height alone is the usual approach and it is why the row looked
wrong: a 6:1 wordmark and a square mark at the same height carry
six times the visual weight. A fixed box fixes the weight but
needs overflow clipping, which crops tall lockups.
So: no box, no clipping. Each mark keeps its natural proportions
and JS sets its height so every mark covers roughly the same
area. Caps at both ends stop the extremes running away.
============================================================= */
.band{padding:var(--s6) 0;border-bottom:1px solid var(--hair)}
.band-row{
display:grid;grid-template-columns:repeat(5,1fr);
gap:clamp(24px,3vw,50px) clamp(16px,2vw,36px);
margin-top:var(--s4);align-items:center;justify-items:center;
}
.band-row .bslot{
display:grid;place-items:center;
height:clamp(34px,3.4vw,48px); /* the row's rhythm, not the logo's cap */
width:100%;
}
.band-row .bslot img{
width:auto;height:auto; /* JS sets the height per mark */
max-width:100%;max-height:100%;
filter:grayscale(1);opacity:.5;
transition:opacity .55s var(--ease),filter var(--t-mid) var(--ease),
transform .55s var(--ease);
}
.band-row .bslot.out img{opacity:0;transform:translateY(-7px)}
.band-row .bslot:hover img{opacity:1;filter:none}
/* ---- the rail: a drag, not a text selection ---- */
.car-view{cursor:grab;-webkit-user-select:none;user-select:none;touch-action:pan-y}
.car-view.dragging{cursor:grabbing;scroll-behavior:auto}
.car-view img{-webkit-user-drag:none;user-drag:none;pointer-events:none}
body.nosel,body.nosel *{-webkit-user-select:none !important;user-select:none !important}
/* =============================================================
METHOD — the coin.
Five steps set on a ring around the mark, so the process reads
as belonging to the R rather than sitting beside it. Node N
lights when card N is hovered, which ties the two together.
============================================================= */
#method{position:relative;overflow:hidden}
#method > .stage{position:relative;z-index:2}
.dial{
position:absolute;z-index:0;pointer-events:none;
right:clamp(-140px,-6vw,-40px);top:50%;
width:clamp(420px,44vw,760px);aspect-ratio:1;transform:translateY(-46%);
opacity:.5;
}
.dial svg{width:100%;height:100%;display:block;overflow:visible}
.dial .rim{fill:none;stroke:var(--line);stroke-width:1}
.dial .rim2{fill:none;stroke:var(--hair);stroke-width:1;stroke-dasharray:2 9}
.dial .nodes circle{fill:var(--line);transition:fill .5s var(--ease),r .5s var(--ease)}
.dial .tick{
font-family:var(--font);font-size:15px;font-weight:600;letter-spacing:.13em;
fill:var(--faint);text-anchor:middle;transition:fill .5s var(--ease);
}
.dial-mark{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:30%;aspect-ratio:1;
}
/* the ring answers the cards */
#method.h1 .nodes circle:nth-child(1),
#method.h2 .nodes circle:nth-child(2),
#method.h3 .nodes circle:nth-child(3),
#method.h4 .nodes circle:nth-child(4),
#method.h5 .nodes circle:nth-child(5){fill:var(--orange);r:13}
#method.h1 .tick:nth-of-type(1),
#method.h2 .tick:nth-of-type(2),
#method.h3 .tick:nth-of-type(3),
#method.h4 .tick:nth-of-type(4),
#method.h5 .tick:nth-of-type(5){fill:var(--orange)}
/* =============================================================
GRID OVERFLOW — the trimmed logos are wider than they were, and
a `1fr` track has an automatic minimum of min-content. One wide
image therefore pushed the whole partner wall past the stage.
minmax(0,1fr) is the fix: the track may shrink below its content.
============================================================= */
.logos{grid-template-columns:repeat(6,minmax(0,1fr))}
.logos .t{min-width:0}
.logos img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.band-row{grid-template-columns:repeat(5,minmax(0,1fr))}
.band-row .bslot{min-width:0}
.wall,.crew,.panel-crew,.pj-kpis,.hstats,.pc-dots{min-width:0}
.crew,.panel-crew{grid-template-columns:repeat(4,minmax(0,1fr))}
/* =============================================================
METHOD CARDS — a flip that does not stutter.
The jitter came from rewriting the section's className on every
hover, which forced a style recalculation of the whole subtree
mid-transition. That is gone. The squashed type was too flat a
perspective: at 1400px the turn reads as a horizontal squeeze
rather than a rotation, so the letters look condensed.
============================================================= */
.mc{perspective:900px;perspective-origin:50% 45%}
.mc-in{
transition:transform .62s cubic-bezier(.45,.05,.2,1);
will-change:transform;transform-style:preserve-3d;
}
.mc-f,.mc-b{
backface-visibility:hidden;-webkit-backface-visibility:hidden;
transform-style:flat; /* the face itself is a plane */
-webkit-font-smoothing:antialiased;
}
.mc-b{transform:rotateY(180deg) translateZ(0.1px)}
/* the ring is decoration, not a control — nothing here reacts to hover */
.dial{opacity:.42}
.dial .nodes circle{fill:var(--line)}
.dial .tick{fill:var(--faint)}
.dial-mark{width:30%;aspect-ratio:1}
.dial-mark canvas{width:100%;height:100%;display:block}
/* =============================================================
WE GIVE FIRST — the source photo is 1800px wide and the block
is full bleed, so at any large window it is being upscaled and
the JPEG noise shows. A slight blur turns that from a defect
into depth of field, and the type gains contrast for free.
============================================================= */
.culture-bg{
opacity:.42;filter:grayscale(1) blur(3px) brightness(.92);
transform:scale(1.06); /* hide the blurred edges */
}
.culture::after{
background:linear-gradient(100deg,rgba(11,11,11,.90) 0%,
rgba(11,11,11,.70) 46%,rgba(11,11,11,.44) 100%);
}
/* =============================================================
PARTNER WALL — proper rows.
aspect-ratio only states a *preferred* size: a tall logo raised
its own tile past it, so every row ended a different height and
the ruled grid stopped lining up. A fixed tile height cannot be
argued with, and the marks inside are area-balanced the same way
the trusted band is.
============================================================= */
.logos{
display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.logos .t{
aspect-ratio:auto; /* the height below wins */
height:clamp(92px,8.6vw,128px);min-width:0;
border-right:1px solid var(--line);border-bottom:1px solid var(--line);
display:grid;place-items:center;padding:clamp(16px,2vw,30px);
transition:background var(--t-mid) var(--ease);
}
.logos .t img{
width:auto;height:auto;max-width:100%;max-height:100%;
object-fit:contain;filter:grayscale(1);opacity:.44;
transition:opacity var(--t-mid) var(--ease),filter var(--t-mid) var(--ease);
}
.logos .t:hover{background:rgba(0,87,255,.04)}
.logos .t:hover img{opacity:1;filter:none}
/* =============================================================
THE ORANGE BLOCK
One section at full strength, placed two thirds down where the
page needs a second heavy beat after the navy. Retention earns
it: repeat business is the proof that cannot be edited.
============================================================= */
.flame{background:var(--flame);color:#fff}
.flame .h2,.flame .h3,.flame .lead,.flame .car-item h4{color:#fff}
.flame .p,.flame .p-s{color:rgba(255,255,255,.82)}
.flame .head .num{color:#fff}
.flame .head .aside{color:rgba(255,255,255,.86)}
.flame .note{color:rgba(255,255,255,.6)}
.flame hr{background:rgba(255,255,255,.28)}
.flame .car-top{border-color:rgba(255,255,255,.3)}
.flame .car-count{color:#fff}
.flame .car-count span{color:rgba(255,255,255,.55)}
.flame .car-item .rule{background:rgba(255,255,255,.55)}
.flame .car-item .yrs{color:var(--yellow)}
.flame .car-bar{background:rgba(255,255,255,.28)}
.flame .car-bar i{background:#fff}
/* the client marks are dark art, so knock them to white on this ground */
.flame .car-item .lg img{
filter:brightness(0) invert(1);opacity:.88;
transition:opacity var(--t-mid) var(--ease);
}
.flame .car-item:hover .lg img{filter:brightness(0) invert(1);opacity:1}
.flame .dragcue{background:#fff;color:var(--flame)}
/* the warm stock is orange now, so the moments band picks it up too */
.moments{background:var(--paper)}
/* the second line of the positioning statement was `--faint`, which is
a hairline grey meant for rules and captions. At 52px it just read as
washed out. It is a second voice, not a whisper. */
.head2 .t em{color:var(--ash)}
/* The tinted orange paper is retired. Orange now appears in exactly two
places: on figures, where it means a result, and on the one full
block below. A colour used at half strength on a background is a
colour with no job. */
.warm{background:var(--paper)}
.moments{background:var(--paper);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
/* =============================================================
SERVICES DROPDOWN
A panel, not a list of links: five services need a line each or
the visitor has to guess which one they want. Opens on hover on
a pointer, on click or Enter on anything else, and closes on
Escape or on leaving the whole header.
============================================================= */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop-t{
display:inline-flex;align-items:center;gap:7px;
font-size:clamp(15px,1.12vw,17px);font-weight:500;letter-spacing:-.014em;
color:var(--ink);transition:color var(--t-fast) var(--ease);
}
.nav-drop-t i{
width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
transform:translateY(-2px) rotate(45deg);transition:transform var(--t-mid) var(--ease);
}
.nav-drop-t:hover,.nav-drop.on .nav-drop-t{color:var(--blue)}
.nav-drop.on .nav-drop-t i{transform:translateY(1px) rotate(-135deg)}
.nav-menu{
position:absolute;left:50%;top:calc(100% + 18px);transform:translateX(-50%) translateY(-8px);
width:min(680px,86vw);background:var(--paper);
border:1px solid var(--hair);box-shadow:0 34px 80px rgba(11,11,11,.14);
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease),
visibility 0s linear var(--t-mid);
}
.nav-drop.on .nav-menu{
opacity:1;visibility:visible;pointer-events:auto;
transform:translateX(-50%) translateY(0);transition-delay:0s;
}
.nav-menu-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:10px}
.nav-menu a{
display:block;padding:15px 17px;border-radius:0;
transition:background var(--t-fast) var(--ease);
}
.nav-menu a:hover{background:rgba(0,87,255,.05)}
.nav-menu a b{
display:block;font-size:16px;font-weight:500;letter-spacing:-.016em;color:var(--ink);
}
.nav-menu a span{
display:block;margin-top:4px;font-size:13px;line-height:1.42;color:var(--ash);
}
.nav-menu a.on b{color:var(--blue)}
.nav-menu a.on b::after{content:" ·";color:var(--yellow)}
/* the current page is marked in the bar too */
.nav-links a.here{color:var(--blue)}
/* =============================================================
INNER PAGES
The homepage hero is a one-screen composition with a 3D field.
An inner page does not need to prove anything before you read
it, so its hero is quieter: kicker, statement, one paragraph.
============================================================= */
.phero{
position:relative;overflow:hidden;
padding:clamp(150px,15vw,230px) 0 clamp(56px,7vw,110px);
}
.phero{position:relative;overflow:hidden}
.phero > .stage{position:relative;z-index:2}
.phero .orb{opacity:.55}
.phead{
margin:var(--s3) 0 0;font-weight:var(--w-display);color:var(--ink);
font-size:clamp(30px,4.6vw,84px);line-height:.98;
letter-spacing:-.036em;margin-left:-.035em;
/* every inner-page headline carries its own
. An 18ch cap on top
of those re-wrapped the lines and produced orphans, so the author's
breaks are the only ones now. */
max-width:none;
}
.phead em{font-style:normal;color:var(--orange)}
.phero .p{font-weight:500;color:var(--ink);max-width:52ch;
font-size:clamp(16px,1.15vw,19px);line-height:1.6}
/* ---- pillars: a claim, then the body, ruled apart ---- */
.pillars{border-top:1px solid var(--ink)}
.pil{
display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);
align-items:start;padding:clamp(28px,3.4vw,52px) 0;
border-bottom:1px solid var(--line);position:relative;
}
.pil .label{grid-column:1/3;padding-top:.5em}
.pil-h{
grid-column:3/8;margin:0;font-weight:var(--w-sub);color:var(--ink);
font-size:clamp(21px,2.3vw,38px);line-height:1.05;letter-spacing:-.028em;
}
.pil-b{grid-column:8/12;max-width:46ch}
.pil-n{
grid-column:12/13;justify-self:end;padding-top:.6em;
font-size:12px;font-weight:600;letter-spacing:.13em;color:var(--faint);
}
/* ---- offers: a plain card grid, ruled not boxed ---- */
.offers{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.off{
border-right:1px solid var(--line);border-bottom:1px solid var(--line);
padding:clamp(24px,2.6vw,40px);min-width:0;
transition:background var(--t-mid) var(--ease);
}
.off:hover{background:rgba(0,87,255,.035)}
.off-n{font-size:12px;font-weight:600;letter-spacing:.13em;color:var(--blue)}
.off-t{
margin:var(--s3) 0 0;font-weight:var(--w-sub);color:var(--ink);
font-size:clamp(19px,1.9vw,30px);line-height:1.06;letter-spacing:-.026em;
}
.off-d{margin-top:12px;max-width:40ch}
.cool .off:hover{background:rgba(0,87,255,.05)}
/* ---- sites we built ---- */
.sites{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6) var(--gut)}
.site{display:block;min-width:0}
.site-im{aspect-ratio:16/10;overflow:hidden;background:rgba(0,0,0,.04)}
.site-im img{width:100%;height:100%;object-fit:cover;
transform:scale(1.04);opacity:0;transition:transform 1.2s var(--ease),opacity 1s var(--ease)}
.site-im.in img{transform:none;opacity:1}
.site:hover .site-im img{transform:scale(1.035)}
.site-b h3{
margin:var(--s3) 0 0;font-weight:400;color:var(--ink);
font-size:clamp(18px,1.6vw,26px);letter-spacing:-.022em;
}
.site-b .p-s{margin-top:10px;max-width:38ch}
.site-b .arrow{margin-top:14px;display:inline-flex;font-size:12.5px}
/* =============================================================
THE TEXT MARQUEE
A section divider that behaves like a title card. It is set at
display scale and moves, so it separates two blocks the way a
chapter break does rather than the way a heading does.
aria-hidden: the real heading follows it in the markup.
============================================================= */
.tmq{
overflow:hidden;padding:clamp(46px,6vw,96px) 0;
border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
}
.tmq-track{
display:flex;width:max-content;white-space:nowrap;
animation:tmqrun 26s linear infinite;
}
.tmq:hover .tmq-track{animation-play-state:paused}
@keyframes tmqrun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tmq span{
display:inline-block;padding-right:.32em;
font-size:clamp(52px,11vw,190px);line-height:.86;
letter-spacing:-.045em;color:var(--ink);font-weight:400;
}
.tmq em{font-style:normal;color:var(--yellow)}
.tmq .out{
color:transparent;-webkit-text-stroke:1.4px var(--line);
}
/* ---- the sphere in the About hero ---- */
.orbit-stage{
position:relative;width:100%;pointer-events:none;
height:clamp(300px,32vw,520px);
}
.orbit-stage canvas{width:100%;height:100%;display:block}
/* ---- the crew, all of them ---- */
.crewgrid{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:var(--s5) var(--gut);margin-top:var(--s3);
}
.crewgrid figure{margin:0;min-width:0}
.crewgrid .ph{aspect-ratio:4/5;overflow:hidden;background:rgba(0,0,0,.04)}
.crewgrid img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);
transition:filter var(--t-mid) var(--ease),transform 1s var(--ease)}
.crewgrid figure:hover img{filter:none;transform:scale(1.03)}
.crewgrid .nm{margin-top:14px;font-size:15.5px;letter-spacing:-.014em;color:var(--ink)}
.crewgrid .rl{margin:4px 0 0;font-size:12.5px;line-height:1.4;color:var(--ash)}
/* the About hero splits: statement left, the collective on the right */
.phero .c8-13{grid-column:8/13}
.phero .g{align-items:center;row-gap:var(--s5)}
/* ---- the About hero: one centre axis ---- */
.phero.centre{text-align:center;padding-bottom:clamp(64px,8vw,120px)}
.phero.centre .phead{
margin:var(--s3) auto 0;
margin-left:auto;margin-right:auto;
}
.phero.centre .p{margin:var(--s4) auto 0;max-width:56ch}
.phero.centre .hero-cta{margin-top:var(--s4)}
/* half again as tall as it was, and it now carries the mark inside it */
.phero.centre .orbit-stage{
height:clamp(400px,44vw,720px);margin:clamp(-20px,-1vw,0px) auto 0;
max-width:min(100%,880px);
}
/* ---- Rocket moments: twice the size, and on one line ---- */
.moments{padding:var(--s7) 0}
.mq{margin-top:var(--s5)}
.mq-track{gap:clamp(36px,5vw,92px);align-items:center}
.mq figure{height:clamp(260px,27vw,440px);max-width:clamp(420px,52vw,900px)}
/* the About headline is a whole sentence, not a slogan: give it a
comfortable measure and a size that suits reading rather than shouting */
.phero.centre .phead{
font-size:clamp(26px,3.5vw,64px);line-height:1.04;
letter-spacing:-.03em;max-width:26ch;
}
/* ═══════════════════════════════════════════════════════════════
IMCE — four object panels.
One canvas is pinned over the whole viewport and scissored to
each panel's rect, so four scenes cost one WebGL context. The
panel and its colour bleed underneath are plain CSS: a blurred
radial blob costs nothing and does most of the work.
═══════════════════════════════════════════════════════════════ */
.imce-canvas{
position:fixed;inset:0;z-index:1;pointer-events:none;
opacity:1;transition:opacity .18s linear;
}
.p3d{padding:var(--s7) 0}
/* The 3D is no longer a picture beside the copy — it is the ground the
copy stands on. Each stage is lifted out of the flow and bled to the
viewport edge, and the row holds its own height instead. */
.p3drow{
position:relative;
display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
gap:var(--gap);align-items:center;
min-height:clamp(460px,52vw,880px);
padding:clamp(28px,3vw,64px) 0;
}
/* Auto-placement was the whole bug behind "text above, graphic below".
On the mirrored rows the copy asks for column 8 and the stage for
column 1; the placement cursor has already passed column 1 by then,
so the stage was pushed onto a second row. Pinning both to row 1
makes the mirror a mirror rather than a stack. */
.p3drow > *{grid-row:1}
.p3drow .p3d-copy{grid-column:2 / span 4;position:relative;z-index:2}
.p3drow.flip .p3d-copy{grid-column:8 / span 4}
.p3d-stage{position:absolute;top:0;bottom:0;pointer-events:none}
.p3drow .p3d-stage{left:42%;right:calc(50% - 50vw)}
.p3drow.flip .p3d-stage{right:42%;left:calc(50% - 50vw)}
.p3d-copy .num{margin:0 0 var(--s2)}
.p3d-h{
font-size:clamp(24px,2.5vw,42px);line-height:1.06;letter-spacing:-.03em;
font-weight:var(--w-sub);margin:0;color:var(--ink);
}
.p3d-k{
font-size:clamp(15px,1.25vw,21px);line-height:1.28;letter-spacing:-.01em;
font-weight:500;color:var(--ink);margin:var(--s3) 0 0;max-width:26ch;
}
.p3d-b{margin-top:var(--s3);max-width:44ch}
.p3d-panel{
position:absolute;inset:0;
background:none; /* open space, no card, no border */
}
/* the bleed sits at z-index 0 so the canvas (1) floats over it and the
copy (2) over both — a glow in front of the metal would wash it out */
.p3d-glow{
position:absolute;border-radius:50%;pointer-events:none;z-index:0;
width:46%;aspect-ratio:1;
filter:blur(clamp(38px,5vw,86px));
background:radial-gradient(circle, #FFD400 0%, #FFC400 30%, rgba(255,196,0,0) 66%);
opacity:.24;
}
.p3d-glow.b{width:22%;opacity:.14;filter:blur(clamp(26px,3.4vw,58px))}
.p3drow .p3d-glow{right:2%;bottom:-6%}
.p3drow .p3d-glow.b{left:6%;top:-2%;right:auto;bottom:auto}
.p3drow.flip .p3d-glow{left:2%;top:-4%}
.p3drow.flip .p3d-glow.b{right:6%;bottom:-6%;left:auto;top:auto}
/* The coin is a small object sitting beside the headline, not a
background wash — three attempts at cropping a giant letter all read
as a mistake, and the fix was to stop making it huge. */
.sec.hasmark{position:relative}
/* the only place a scene sits UNDER copy, so the only place the copy
has to be lifted above the canvas */
.sec.hasmark > .stage{position:relative;z-index:2}
/* headline and coin as one unit, so they share a centre line whatever
the headline wraps to */
.headmark{display:flex;align-items:center;gap:clamp(20px,2.6vw,52px)}
.headmark .h2{margin:0}
.sec-mark{
position:relative;z-index:0;pointer-events:none;flex:0 0 auto;
width:clamp(118px,12vw,186px);height:clamp(118px,12vw,186px);
}
.sec-mark .p3d-glow{width:64%;left:18%;top:16%;opacity:.26}
/* the hero object sits in the empty right-hand half, on the same
baseline block as the intro copy */
/* Full-bleed, behind everything, and allowed to run under the type.
It sits at z-index 0 so the shared canvas (1) draws over it and the
copy (2) over that. */
.hero3d{
position:absolute;z-index:0;pointer-events:none;
top:9%;bottom:5%;
left:46%;right:calc(50% - 50vw);
}
.hero3d .p3d-glow{width:46%;right:10%;top:12%;opacity:.20}
.hero3d .p3d-glow.b{width:28%;left:8%;bottom:8%;right:auto;top:auto;opacity:.13}
/* the IMCE hero object: one thing, on the same centre axis as the copy */
.orbit-stage.hero-solo{
position:relative;
/* Both remaining heroes in this frame are wide: the braid runs end to
end, the play button is a landscape rectangle. A tall box would put
air above and below and shrink both. */
height:clamp(280px,29vw,480px);
max-width:min(100%,1080px);margin:clamp(-8px,-0.5vw,0px) auto 0;
}
.orbit-stage.hero-solo .p3d-glow{
width:34%;left:33%;top:8%;opacity:.24;
}
/* a headline the writer already broke into two lines must not be
re-broken by a character cap */
.phero.centre .phead.wide{max-width:none}
/* ═══════════════════════════════════════════════════════════════
CREATIVE PRODUCTION — the studio's own films do the arguing.
Everywhere else a claim is paired with a 3D scene. On a page
about film that would be perverse, so these rows carry video
instead. A poster on the