/* tinyFIRES — shared stylesheet (round 4)
Rebuilt after reviewing Concio, Dragonfish, Humbleteam, Clique.
The three things doing the heavy lifting:
1. Display type at 300-400 weight, huge, tight tracking, line-height ~1.
(Both of Katherine's reference sites do this; bold reads as landing page.)
2. A warm-tinted near-black ground + film grain over everything, so gradients
read as material rather than flat CSS.
3. Orange as atmosphere (blooms, washes) rather than flat rectangles.
tokens / grain / base / type / buttons / header + menu / hero /
reveal / scroll-expand / curved loop / scroll stack / flowing list /
gradual blur / orange block / equation / imagine / rows / marks / words /
table / form / footer / wand / a11y / capture
*/
/* ---------- fonts — Figtree, self-hosted (variable, 300–800) ---------- */
@font-face{
font-family:'Figtree'; font-style:normal; font-weight:300 800; font-display:swap;
src:url(../fonts/figtree-latin.woff2) format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:'Figtree'; font-style:normal; font-weight:300 800; font-display:swap;
src:url(../fonts/figtree-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ---------- tokens ---------- */
:root{
/* warm near-black, not neutral — the ground carries a trace of the brand */
--ink: #0B0908;
--ink-2: #14100E;
--ink-3: #1D1815;
--line: rgba(247,243,238,.12);
--line-2: rgba(247,243,238,.24);
--paper: #F7F3EE;
--muted: rgba(247,243,238,.56);
--muted-2: rgba(247,243,238,.34);
--orange: #E8410F;
--orange-l: #FF8A3D;
--red: #C21F0F; /* secondary — accents, hovers, gradient end */
--grad: linear-gradient(100deg, #FF8A3D 0%, #E8410F 50%, #C21F0F 100%);
--on-orange:#FFFFFF;
/* the one light surface on an otherwise dark site — the "Katherine" panel */
--cream: #EBEBE7;
--ink-on-cream: #171310;
--muted-on-cream: rgba(23,19,16,.62);
--line-on-cream: rgba(23,19,16,.14);
--font: "Figtree", "Helvetica Neue", Arial, sans-serif;
--wrap: 1200px;
--gut: clamp(20px, 5vw, 68px);
--sect: clamp(88px, 11vw, 168px);
/* iPhone notch / dynamic island: viewport-fit=cover lets the page run
under the status bar, so the header grows by the safe-area inset and
every offset built on --head-h follows automatically */
--safe-top: env(safe-area-inset-top, 0px);
--head-h: calc(76px + var(--safe-top));
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--ink); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
margin:0;
background:var(--ink);
color:var(--paper);
font-family:var(--font);
font-size:17px;
line-height:1.6;
font-weight:400;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
body.menu-open{ overflow:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
/* ---------- grain ----------
One static SVG turbulence tile over the whole page. This is what stops the
gradients reading as flat CSS. Costs nothing — no JS, no network. */
body::after{
content:"";
position:fixed; inset:-50%; z-index:400; pointer-events:none;
opacity:.42; mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
background-size:220px 220px;
}
@media (prefers-reduced-motion: no-preference){
body::after{ animation:grainshift 8s steps(6) infinite; }
}
@keyframes grainshift{
0%{transform:translate(0,0)} 16%{transform:translate(-1.5%,1%)}
33%{transform:translate(1%,-1.5%)} 50%{transform:translate(-1%,-1%)}
66%{transform:translate(1.5%,1.5%)} 83%{transform:translate(-1.5%,.5%)}
100%{transform:translate(0,0)}
}
/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:var(--sect); position:relative; }
.section--tight{ padding-block:clamp(52px,7vw,96px); }
.section--line{ border-top:1px solid var(--line); }
/* asymmetric editorial split — statement left, support right and dropped */
.split{ display:grid; gap:clamp(26px,4vw,52px); }
@media (min-width:900px){
.split{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(48px,7vw,110px); align-items:start; }
.split__aside{ padding-top:clamp(10px,3vw,44px); }
}
/* ---------- type ----------
Light weights at large sizes. This is the single biggest change from r3. */
h1,h2,h3,h4{
font-family:var(--font);
margin:0 0 .5em;
text-wrap:balance;
}
h1{
font-size:clamp(2.7rem, 7.2vw, 5.7rem);
font-weight:400; letter-spacing:-.042em; line-height:.98;
}
h2{
font-size:clamp(1.95rem, 4.4vw, 3.4rem);
font-weight:400; letter-spacing:-.036em; line-height:1.03;
}
h3{ font-size:clamp(1.2rem, 1.9vw, 1.45rem); font-weight:500; letter-spacing:-.022em; line-height:1.18; }
h4{ font-size:1rem; font-weight:500; letter-spacing:-.012em; }
p{ margin:0 0 1.05em; max-width:60ch; }
p:last-child{ margin-bottom:0; }
.lead{ font-size:clamp(1.06rem,1.5vw,1.24rem); line-height:1.52; max-width:50ch; color:var(--muted); }
.muted{ color:var(--muted); }
.small{ font-size:.88rem; }
.mid{ text-align:center; }
.mid p{ margin-inline:auto; }
.mid .btn-row{ justify-content:center; }
.grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.o{ color:var(--orange); }
/* the big offset statement that opens most sections */
.statement{
font-size:clamp(1.75rem,3.9vw,3.1rem);
font-weight:400; letter-spacing:-.038em; line-height:1.06;
max-width:17ch; margin:0; text-wrap:balance;
}
.kicker{
font-size:.95rem; font-weight:500; color:var(--orange);
margin:0 0 1.3em; letter-spacing:-.01em;
}
/* ---------- buttons — geometric, hard corners ---------- */
.btn{
position:relative; overflow:hidden;
display:inline-flex; align-items:center; gap:.8em;
font-size:.88rem; font-weight:500; letter-spacing:-.008em;
padding:1.1em 1.9em;
border:1px solid transparent; border-radius:0;
text-decoration:none; cursor:pointer; color:var(--paper);
transition:color .28s ease, border-color .28s ease, background-color .28s ease;
}
.btn span{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:.8em; }
.btn svg{ width:16px; height:11px; flex:none; transition:transform .28s cubic-bezier(.2,.8,.3,1); }
.btn:hover svg{ transform:translateX(5px); }
.btn--primary{ background:var(--orange); color:var(--on-orange); }
.btn--primary::before{
content:""; position:absolute; inset:0; z-index:0;
background:var(--grad); opacity:0; transition:opacity .3s ease;
}
.btn--primary:hover::before{ opacity:1; }
/* ghost: a thin orange field wipes up from the baseline on hover */
.btn--ghost{ border-color:var(--line-2); background:transparent; }
button.btn{ font-family:inherit; }
.btn--ghost::before{
content:""; position:absolute; left:0; right:0; bottom:0; height:100%; z-index:0;
background:var(--orange); transform:scaleY(0); transform-origin:bottom;
transition:transform .34s cubic-bezier(.76,0,.24,1);
}
.btn--ghost:hover{ color:var(--on-orange); border-color:var(--orange); }
.btn--ghost:hover::before{ transform:scaleY(1); }
.btn--onorange{ background:var(--ink); color:var(--paper); }
.btn--onorange::before{
content:""; position:absolute; inset:0; z-index:0; background:#000;
opacity:0; transition:opacity .28s ease;
}
.btn--onorange:hover::before{ opacity:1; }
/* gradient: the brand grad sits live at rest (not just on ::before hover
like .btn--primary) — a darker version of the same grad fades in on
hover instead, so it stays lit rather than flattening to flat orange */
.btn--gradient{ background:var(--grad); color:var(--on-orange); }
.btn--gradient::before{
content:""; position:absolute; inset:0; z-index:0;
background:linear-gradient(100deg, #C21F0F 0%, #8f1a0c 100%);
opacity:0; transition:opacity .3s ease;
}
.btn--gradient:hover::before{ opacity:1; }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:2.3em; }
/* ---------- header ---------- */
.header{
position:fixed; inset:0 0 auto 0; z-index:130; padding-top:var(--safe-top);
transition:background .3s, border-color .3s, transform .35s cubic-bezier(.4,0,.2,1);
border-bottom:1px solid transparent;
}
.header.is-stuck{
background:rgba(11,9,8,.78);
backdrop-filter:blur(14px) saturate(1.2);
-webkit-backdrop-filter:blur(14px) saturate(1.2);
border-bottom-color:var(--line);
}
/* past the hero: hidden on the way down, pops back in the instant you scroll
up, anywhere on the page. Never hides while the menu itself is open. */
.header.is-hidden{ transform:translateY(-100%); }
.header__inner{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.wordmark{
text-decoration:none; display:inline-flex; align-items:baseline; gap:.1em;
line-height:1; white-space:nowrap; font-size:1.4rem; position:relative; z-index:2;
}
.wordmark__tiny{ font-weight:300; letter-spacing:.1em; text-transform:lowercase; color:var(--paper); font-size:.74em; }
.wordmark__fires{
font-weight:800; letter-spacing:-.035em; text-transform:uppercase;
background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.menu-btn{
position:relative; z-index:2;
display:inline-flex; align-items:center; gap:.75em;
font-size:.86rem; font-weight:500; letter-spacing:-.008em;
background:none; border:0; padding:.5em 0; color:var(--paper); cursor:pointer;
}
.menu-btn__word{ min-width:3.2em; text-align:right; }
.menu-btn__bars{ display:block; width:22px; height:11px; position:relative; }
.menu-btn__bars i{
position:absolute; left:0; right:0; height:1.5px; background:currentColor;
transition:transform .36s cubic-bezier(.7,0,.2,1);
}
.menu-btn__bars i:nth-child(1){ top:0; }
.menu-btn__bars i:nth-child(2){ bottom:0; }
.menu-open .menu-btn__bars i:nth-child(1){ transform:translateY(4.75px) rotate(45deg); }
.menu-open .menu-btn__bars i:nth-child(2){ transform:translateY(-4.75px) rotate(-45deg); }
/* ---------- staggered menu ---------- */
.menu{ position:fixed; inset:0; z-index:120; pointer-events:none; }
.menu-open .menu{ pointer-events:auto; }
.menu__layer{
position:absolute; inset:0; left:auto; width:100%;
transform:translateX(102%);
transition:transform .58s cubic-bezier(.76,0,.24,1);
}
@media (min-width:820px){ .menu__layer{ width:min(560px,46vw); } }
.menu__layer--1{ background:#FF8A3D; }
.menu__layer--2{ background:var(--orange); }
.menu__layer--3{ background:var(--red); }
.menu__panel{
position:absolute; inset:0; left:auto; width:100%;
background:var(--ink-2); border-left:1px solid var(--line);
transform:translateX(102%);
transition:transform .62s cubic-bezier(.76,0,.24,1);
display:flex; flex-direction:column; justify-content:center;
padding:calc(var(--head-h) + 44px) var(--gut) 44px;
}
@media (min-width:820px){ .menu__panel{ width:min(560px,46vw); } }
.menu-open .menu__layer--1{ transform:translateX(0); transition-delay:0s; }
.menu-open .menu__layer--2{ transform:translateX(0); transition-delay:.06s; }
.menu-open .menu__layer--3{ transform:translateX(0); transition-delay:.12s; }
.menu-open .menu__panel { transform:translateX(0); transition-delay:.2s; }
.menu__layer--1{ transition-delay:.2s; }
.menu__layer--2{ transition-delay:.13s; }
.menu__layer--3{ transition-delay:.06s; }
.menu__panel { transition-delay:0s; }
.menu__nav{ list-style:none; margin:0 0 auto; padding:0; display:flex; flex-direction:column; }
.menu__nav li{ overflow:hidden; }
.menu__nav a{
display:flex; align-items:baseline; gap:.5em;
font-size:clamp(1.3rem,4.5vw,2.2rem); font-weight:400;
letter-spacing:-.04em; line-height:1.16;
text-decoration:none; color:var(--paper); padding:.1em 0;
transform:translateY(140%); transform-origin:0 100%;
transition:transform .66s cubic-bezier(.16,1,.3,1), color .2s;
}
/* above 820px the menu panel stops tracking the full viewport width (it
caps at min(560px,46vw) - see .menu__panel), so the mobile rule's vw
scaling would overshoot the panel and get clipped by .menu__nav li's
overflow:hidden. Sized against the panel's own width instead, checked
against the longest label ("How to work with tinyFIRES") at each
breakpoint so it never wraps or clips. */
@media (min-width:820px){
.menu__nav a{ font-size:clamp(1.4rem, calc(10px + 1.6vw), 2rem); }
}
.menu__nav a:hover{ color:var(--orange); }
.menu__nav a small{ font-size:.28em; font-weight:500; color:var(--orange); font-variant-numeric:tabular-nums; }
.menu-open .menu__nav a{ transform:translateY(0); }
.menu-open .menu__nav li:nth-child(1) a{ transition-delay:.32s; }
.menu-open .menu__nav li:nth-child(2) a{ transition-delay:.4s; }
.menu-open .menu__nav li:nth-child(3) a{ transition-delay:.48s; }
.menu-open .menu__nav li:nth-child(4) a{ transition-delay:.56s; }
.menu-open .menu__nav li:nth-child(5) a{ transition-delay:.64s; }
.menu__foot{
margin-top:38px; padding-top:20px; border-top:1px solid var(--line);
font-size:.88rem; color:var(--muted);
opacity:0; transform:translateY(10px);
transition:opacity .45s .64s, transform .45s .64s;
}
.menu-open .menu__foot{ opacity:1; transform:none; }
.menu__foot a:not(.btn){ color:var(--orange); text-decoration:none; }
.menu__foot .btn{ margin-top:16px; }
/* ---------- hero ----------
The bloom replaces the old canvas waves: same atmosphere, zero JS, and with
the grain over it, it reads as a lit surface rather than a CSS gradient. */
.hero{
position:relative; overflow:hidden;
padding-block:calc(var(--head-h) + clamp(72px,10vw,124px)) clamp(72px,9vw,116px);
text-align:center;
}
.hero__bloom{
position:absolute; inset:0; z-index:0; pointer-events:none;
background:
radial-gradient(58% 34% at 50% 96%, rgba(232,65,15,.42), transparent 62%),
radial-gradient(38% 26% at 10% 88%, rgba(194,31,15,.3), transparent 66%),
radial-gradient(34% 24% at 92% 80%, rgba(255,138,61,.16), transparent 64%);
animation:bloomdrift 26s ease-in-out infinite alternate;
}
@keyframes bloomdrift{
from{ transform:translate3d(0,0,0) scale(1); }
to { transform:translate3d(-2%,-2.5%,0) scale(1.1); }
}
@media (prefers-reduced-motion: reduce){ .hero__bloom{ animation:none; } }
.hero__inner{ position:relative; z-index:2; }
/* flex + align-items:baseline (not inline vertical-align) so the smaller/
outline words — a different font-size on the same line — share a proper
reading baseline with the full-size ones. Wraps freely on mobile; the
desktop rule below pins it to one line. See the words-rise .w--small
comment for why plain vertical-align can't do this. */
.hero h1{
margin-bottom:.42em;
display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center;
gap:.15em .28em;
}
/* reusable version of the same baseline-row fix for any other heading that
mixes data-small words with full-size ones — e.g. the Impact page's H1,
split into one .words-row per line so each sentence gets its own line
instead of wrapping wherever it runs out of width.
Compound selector (.words-rise.words-row, not just .words-row) is
load-bearing: plain .words-row has the same specificity as the later
`.words-rise{ display:block; }` rule below, which was winning on source
order and silently killing the flex row (making every word fall back to
inline-block vertical-align:top — the exact top-aligned bug this class
exists to fix). */
.words-rise.words-row{
display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center;
gap:.15em .28em;
}
.hero__sub{ max-width:44ch; margin-inline:auto; font-size:clamp(1.04rem,1.4vw,1.2rem); color:var(--muted); }
/* the hero's outline words are solid-filled with the brand gradient
instead of staying hollow — same treatment on the inner pages' .phero
headline so the whole site reads as one language. -webkit-text-stroke:0
is load-bearing: the base .words-rise .w--outline rule below draws a
hollow orange stroke, and without cancelling it here that stroke still
rings the gradient fill, reading as an unwanted outline around solid
text rather than a clean gradient word. */
.hero h1 .w--outline i, .phero h1 .w--outline i{
background:var(--grad); -webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent;
-webkit-text-stroke:0; text-stroke:0;
}
/* the animation placeholder, designed as a real panel rather than an empty box */
.stage{
position:relative; z-index:2;
width:100%; max-width:880px;
margin:clamp(48px,6vw,84px) auto 0;
aspect-ratio:16 / 9;
border:1px solid var(--line);
background:
radial-gradient(120% 130% at 50% 118%, rgba(232,65,15,.42), transparent 60%),
radial-gradient(80% 90% at 14% -18%, rgba(255,138,61,.14), transparent 58%),
linear-gradient(172deg, rgba(247,243,238,.06), rgba(247,243,238,0) 44%),
var(--ink-2);
display:grid; place-items:center;
}
/* ---------- hero — desktop: the whole section fills one screen ----------
H1 on one line, sub on two, the stage panel flexes to take whatever
vertical space is left. No scrolling needed to see the gradient's edge. */
@media (min-width:900px){
/* .hero-stack gives the sticky hero exactly one extra viewport of "room"
to stay pinned in — the intro section (pulled up by that same amount,
see .intro below) slides over it during that scroll distance, then the
hero releases and scrolls away normally, already fully covered. Without
this the hero would stay pinned for the rest of the page (its
containing block never runs out of room) and bleed through every gap
after the intro section. */
.hero-stack{ height:200svh; position:relative; }
.hero{
height:100svh; min-height:660px; max-height:1180px;
padding-block:0;
display:flex;
position:sticky; top:0; z-index:1;
}
.hero__inner{
width:100%; height:100%;
display:flex; flex-direction:column; align-items:center; justify-content:center;
padding:calc(var(--head-h) + clamp(14px,3vh,36px)) var(--gut) clamp(16px,3vh,32px);
}
.hero h1{
flex-wrap:nowrap; /* pinned to one line at desktop widths */
font-size:clamp(2rem, 1.2rem + 3vw, 4.3rem);
}
.hero__sub{ max-width:62ch; }
.hero .btn-row{ margin-top:1.05em; }
.btn-row, .hero h1, .hero__sub{ flex:none; }
.stage{
flex:1 1 auto; min-height:0; max-height:420px;
aspect-ratio:auto;
margin:clamp(18px,3vh,32px) auto 0;
}
}
.stage__label{
display:flex; align-items:center; gap:.7em;
font-size:.84rem; font-weight:500; color:var(--muted-2);
}
.stage__label::before{
content:""; width:7px; height:7px; background:var(--orange);
animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:.35} 50%{opacity:1} }
@media (prefers-reduced-motion: reduce){ .stage__label::before{ animation:none; } }
.stage i{ position:absolute; width:14px; height:14px; border:1.5px solid var(--orange); }
.stage i:nth-child(1){ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.stage i:nth-child(2){ top:-1px; right:-1px; border-left:0; border-bottom:0; }
.stage i:nth-child(3){ bottom:-1px; left:-1px; border-right:0; border-top:0; }
.stage i:nth-child(4){ bottom:-1px; right:-1px; border-left:0; border-top:0; }
/* interior-page hero */
.phero{ position:relative; overflow:hidden; padding-block:calc(var(--head-h) + clamp(80px,11vw,146px)) clamp(40px,6vw,74px); }
.phero__bloom{
position:absolute; inset:0; z-index:0; pointer-events:none;
background:radial-gradient(52vw 44vw at 96% -14%, rgba(232,65,15,.2), transparent 62%);
}
.phero .wrap{ position:relative; z-index:1; }
/* breadcrumbs — small muted trail above each inner-page H1 */
.crumbs{ margin-bottom:clamp(18px,2.4vw,28px); }
.crumbs ol{ display:flex; flex-wrap:wrap; gap:.5em; list-style:none; padding:0; margin:0; font-size:.86rem; color:var(--muted); }
.crumbs li + li::before{ content:"/"; margin-right:.5em; opacity:.6; }
.crumbs a{ color:var(--paper); text-decoration:none; border-bottom:1px solid var(--line-2); }
.crumbs a:hover{ color:var(--orange-l); border-color:var(--orange-l); }
.phero--tight .crumbs ol{ justify-content:center; }
/* ---------- legal pages (privacy policy) ---------- */
.phero--legal h1{ font-size:clamp(2.4rem,6vw,4.4rem); margin:0; }
.legal-updated{ margin:1em 0 0; }
.legal > *{ max-width:76ch; }
.legal h2{ font-size:clamp(1.3rem,2.4vw,1.7rem); margin:2.2em 0 .6em; }
.legal h2:first-child{ margin-top:0; }
.legal p, .legal li{ color:var(--muted); line-height:1.75; }
.legal strong{ color:var(--paper); font-weight:600; }
.legal ul{ padding-left:1.2em; margin:0 0 1em; }
.legal a{ color:var(--paper); }
.legal a:hover{ color:var(--orange-l); }
.legal-table-wrap{ margin:1em 0 1.5em; }
.legal-table{ min-width:0; }
@media (max-width:600px){
.legal-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.legal-table, .legal-table tbody, .legal-table tr, .legal-table td{ display:block; width:100%; }
.legal-table td:first-child{ color:var(--paper); border-bottom:0; padding-bottom:0; }
}
/* ---------- 404 ---------- */
.nf{ min-height:78vh; display:flex; align-items:center; text-align:center; }
.nf .wrap{ width:100%; }
.nf__code{ margin:0; font-size:clamp(5rem,18vw,10rem); font-weight:800; line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nf h1{ margin:.2em 0 0; font-size:clamp(2rem,5vw,3.4rem); }
.nf__lead{ max-width:46ch; margin:1em auto 1.8em; }
.nf__links{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; list-style:none; padding:0; margin:0; }
.phero--tight{ padding-top:calc(var(--head-h) + clamp(28px,4vw,56px)); }
/* ---------- intro — the "Katherine" panel ----------
The one light surface on the site. Full-bleed two-up: cream text column,
photo column. Opaque + a higher z-index than the sticky hero, so as the
page scrolls this rises up and covers it rather than the hero scrolling
away underneath. */
.intro{
position:relative; z-index:5;
display:grid; grid-template-columns:1fr;
background:#fff;
}
@media (min-width:900px){
.intro{ grid-template-columns:1.2fr 1fr; min-height:100svh; margin-top:-100svh; }
}
.intro__text{
background:var(--cream);
display:flex; flex-direction:column; justify-content:center;
padding:clamp(64px,10vw,120px) var(--gut);
}
.intro__headline{
font-weight:400; letter-spacing:-.03em; line-height:1.1;
font-size:clamp(1.95rem,3.6vw,2.9rem);
max-width:15ch;
color:var(--ink-on-cream);
margin:0;
}
.intro__headline .w--key i{ color:var(--orange); }
.intro__body{
margin-top:clamp(20px,2.6vw,32px);
max-width:44ch;
font-size:1.05rem; line-height:1.62;
color:var(--muted-on-cream);
}
.intro__cta{
display:inline-flex; align-items:center; gap:.5em;
margin-top:clamp(22px,3vw,34px);
font-size:.92rem; font-weight:500; letter-spacing:-.005em;
color:#B42A0C; text-decoration:none; /* deeper orange: 4.5:1 on cream */
border-bottom:1px solid currentColor; padding-bottom:.2em;
transition:opacity .2s ease;
}
.intro__cta:hover{ opacity:.7; }
/* the photo — a stock placeholder standing in for Katherine's own portrait */
.intro__media{ position:relative; overflow:hidden; background:#F4F4F1; min-height:340px; }
.intro__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 4%; display:block; }
.intro__badge{
position:absolute; left:clamp(18px,2.4vw,32px); bottom:clamp(18px,2.4vw,32px); z-index:1;
display:flex; align-items:center; gap:.55em;
background:rgba(255,255,255,.92); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
border:1px solid var(--line-on-cream);
padding:.5em .85em;
font-size:.76rem; font-weight:500; color:var(--ink-on-cream);
}
.intro__badge i{ width:6px; height:6px; border-radius:50%; background:var(--orange); flex:none; }
/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
.reveal--blur{ filter:blur(12px); transition:opacity .85s, transform .85s, filter .85s; }
.reveal--blur.in{ filter:blur(0); }
.words-rise{ display:block; }
/* line-height here is deliberately looser than the heading's own — it's sized
to clear descenders (g/y/p) inside the overflow:hidden mask, not for leading */
.words-rise .w{ display:inline-block; overflow:hidden; vertical-align:top; line-height:1.18; }
.words-rise .w i{ display:inline-block; font-style:inherit; transform:translateY(108%); transition:transform .8s cubic-bezier(.16,1,.3,1); }
/* words flagged via data-outline: capitalised, hollowed out to the brand colour */
.words-rise .w--outline i{
color:transparent;
-webkit-text-fill-color:transparent;
-webkit-text-stroke:.016em var(--orange);
text-stroke:.016em var(--orange);
}
/* words flagged via data-small: knocked down a step. Stays vertical-align:top
like every other word (overflow:hidden inline-blocks use their bottom
margin edge as the vertical-align:baseline reference, not the text
baseline, so mixing alignments here misaligns badly); the intrinsic
top-align offset between the two sizes is corrected below empirically. */
.words-rise .w--small{ font-size:.62em; }
.words-rise.in .w i{ transform:translateY(0); }
/* words flagged via data-spark: the outline word flickers like an ember
once risen, instead of sitting static — reuses the wand-cursor's ember
opacity language (see shared/site.js "4. wand cursor") rather than
inventing a new colour treatment */
.words-rise .w--spark i{ animation:spark-flicker 2.6s ease-in-out .9s infinite; }
@keyframes spark-flicker{
0%,100%{ opacity:1; }
6% { opacity:.5; }
13%{ opacity:1; }
27%{ opacity:.65; }
35%{ opacity:1; }
52%{ opacity:.8; }
61%{ opacity:1; }
80%{ opacity:.55; }
88%{ opacity:1; }
}
@media (prefers-reduced-motion: reduce){
.reveal, .reveal--blur{ opacity:1; transform:none; filter:none; transition:none; }
.words-rise .w i{ transform:none; transition:none; }
.words-rise .w--spark i{ animation:none; }
}
/* ---------- scroll expand ----------
Three phases sharing one pinned frame — see the phase constants + comment
at the top of the scroll-expand handler in site.js for the full timeline.
--p drives the frame opening (set on .expand__frame); --p-img and --p-txt
drive the corner photos and the four Imagine lines respectively (set on
.expand__stage, the shared ancestor, so every descendant can read them). */
.expand{ position:relative; }
.expand__track{ position:relative; height:460vh; }
.expand__stage{
--p-img:0; --p-txt:0;
position:sticky; top:0; height:100svh; display:grid; place-items:center; overflow:hidden;
}
.expand__frame{
--p:0;
position:absolute; inset:0;
clip-path:inset(
calc(23% - 23% * var(--p)) calc(32% - 32% * var(--p))
calc(23% - 23% * var(--p)) calc(32% - 32% * var(--p))
);
will-change:clip-path;
}
.expand__media{
position:absolute; inset:0; width:100%; height:100%;
background:
radial-gradient(120% 130% at 12% 0%, rgba(255,138,61,.85), transparent 52%),
radial-gradient(110% 120% at 92% 100%, rgba(194,31,15,.95), transparent 56%),
linear-gradient(122deg, #E8410F, #C21F0F);
transform:scale(calc(1.28 - .28 * var(--p)));
transform-origin:center;
}
.expand__scrim{
position:absolute; inset:0; pointer-events:none;
background:linear-gradient(to top, rgba(11,9,8,.6), rgba(11,9,8,.06) 48%, rgba(11,9,8,.26));
opacity:calc(.2 + .4 * var(--p));
}
.expand__title{
position:absolute; inset:0; z-index:5;
display:grid; place-items:center;
margin:0; padding:0 6%; text-align:center;
font-size:clamp(2rem,5.2vw,3.8rem); font-weight:400;
letter-spacing:-.02em; line-height:1;
color:var(--on-orange); text-shadow:0 4px 40px rgba(11,9,8,.35);
pointer-events:none;
}
.expand__title .swap{ display:grid; }
.expand__title .swap b{ grid-area:1 / 1; font-weight:inherit; transition:opacity .4s ease; }
.expand__hint{
position:absolute; left:0; right:0; bottom:1.1rem; z-index:4; text-align:center;
font-size:.78rem; font-weight:500; color:rgba(255,255,255,.46);
opacity:calc(1 - var(--p) * 3);
}
/* the four corner photos — scale in from nothing once the frame is fully
open, each pinned at a fixed tilt so they land like scattered polaroids.
No border: they sit inside the ember panel rather than framed against it,
pulled in from the edge rather than sitting right on the corner. */
.expand__imgs{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.expand__img{
position:absolute;
width:clamp(148px,15vw,236px);
aspect-ratio:5 / 4;
overflow:hidden;
box-shadow:0 20px 44px -14px rgba(11,9,8,.55);
opacity:var(--p-img);
transform:scale(var(--p-img)) rotate(var(--tilt));
will-change:transform,opacity;
}
.expand__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.expand__img--tl{ top:clamp(44px,9vw,110px); left:clamp(44px,9vw,110px); --tilt:-7deg; transform-origin:0% 0%; }
.expand__img--tr{ top:clamp(44px,9vw,110px); right:clamp(44px,9vw,110px); --tilt:6deg; transform-origin:100% 0%; }
.expand__img--bl{ bottom:clamp(44px,9vw,110px); left:clamp(44px,9vw,110px); --tilt:5deg; transform-origin:0% 100%; }
.expand__img--br{ bottom:clamp(44px,9vw,110px); right:clamp(44px,9vw,110px); --tilt:-6deg; transform-origin:100% 100%; }
/* the four Imagine lines — sit at the 12 / 3 / 6 / 9 o'clock positions, each
word rising into place exactly like the hero H1 does (.words-rise, reused
verbatim via the words-rise class + data-outline="imagine" below), except
continuously driven by scroll progress (--p-txt + each word's own --wi
index) instead of a single viewport-triggered class — see site.js. */
.expand__imagines{ position:absolute; inset:0; z-index:4; pointer-events:none; }
.expand__imagine{
position:absolute; margin:0;
background:var(--cream);
padding:clamp(14px,2vw,20px) clamp(16px,2.2vw,22px);
font-size:clamp(1.02rem,1.42vw,1.3rem);
line-height:1.42;
text-align:center;
/* fades in with the same --p-txt progress that drives the words, so
the backing arrives alongside the text rather than sitting there
empty before the reveal starts */
opacity:var(--p-txt);
}
/* positioned on the same line that runs through the middle of the two
corner images on that side — clamp(103px,15vw,204px) is the images'
own edge-offset (clamp(44px,9vw,110px)) plus half their own size
(clamp(59px,6vw,94px)), so the text sits centred on the image row/column
rather than floating further out toward the edge */
.expand__imagine--12{ top:clamp(103px,15vw,204px); left:50%; width:min(30ch,52%); transform:translate(-50%,-50%) rotate(-2.2deg); }
/* --6 carries the longest of the four lines (the "...driving performance"
one, swapped in from --9 per Katherine's feedback) - given extra width
and a smaller font than the other three so it still fits in ~5 lines
instead of running to 7-8 */
.expand__imagine--6 { bottom:clamp(103px,15vw,204px); left:50%; width:min(42ch,64%); font-size:clamp(.86rem,1.18vw,1.06rem); transform:translate(-50%,50%) rotate(1.6deg); }
.expand__imagine--3 { top:50%; right:calc(clamp(103px,15vw,204px) + 22px); width:min(35ch,36%); font-size:clamp(.86rem,1.15vw,1.02rem); transform:translate(50%,-50%) rotate(2.6deg); }
.expand__imagine--9 { top:50%; left:calc(clamp(103px,15vw,204px) + 22px); width:min(31ch,33%); transform:translate(-50%,-50%) rotate(-1.4deg); }
/* colour pairing: 12 & 6 o'clock get an orange IMAGINE over black body
copy; 3 & 9 o'clock flip it — black IMAGINE over orange body copy */
.expand__imagine--12, .expand__imagine--6{ color:var(--ink-on-cream); }
.expand__imagine--3, .expand__imagine--9{ color:var(--orange); }
/* sized and spaced like the hero H1 so it reads as a proper lead-in word.
vertical-align:bottom (overriding the shared .words-rise .w top-align)
so its larger box lines up on the same baseline as the second word,
instead of pushing the line up from the top. line-height is tightened
on the word itself: at 1.55x the body copy's font-size, its inline box
is naturally taller than a normal line's (line-height scales with
font-size), so left alone the gap under line 1 — the only line it's
on — reads bigger than every other line gap. Matching its own
line-height to a normal line's height in px keeps every gap equal. */
.expand__imagine .w--outline{ font-size:1.55em; line-height:.916; letter-spacing:-.03em; vertical-align:bottom; transform:translateY(-.155em); }
.expand__imagine .w--outline i{ color:transparent; -webkit-text-fill-color:transparent; }
.expand__imagine--12 .w--outline i, .expand__imagine--6 .w--outline i{
-webkit-text-stroke:.038em var(--orange); text-stroke:.038em var(--orange);
}
.expand__imagine--3 .w--outline i, .expand__imagine--9 .w--outline i{
-webkit-text-stroke:.038em var(--ink-on-cream); text-stroke:.038em var(--ink-on-cream);
}
.expand__imagine .w{
--lp:clamp(0, calc((var(--p-txt) - (var(--wi, 0) * .035)) * 6), 1);
}
/* --6 has 26 words (the longest of the four, since the round-7 swap moved
the "...driving performance" line here) — at the shared .035 stagger,
the last word's reveal threshold is wi(25)*.035 + 1/6 ≈ 1.04, past 1,
the max --p-txt ever reaches. That word could never fully resolve no
matter how far the section was scrolled, not just a slow-reveal quirk.
A smaller, scoped stagger brings the last word's threshold down to a
comfortable ~0.72 so it finishes with room to spare. */
.expand__imagine--6 .w{
--lp:clamp(0, calc((var(--p-txt) - (var(--wi, 0) * .022)) * 6), 1);
}
.expand__imagine .w i{
transform:translateY(calc((1 - var(--lp)) * 108%)) !important;
transition:none;
}
/* below 900px: the compass layout has nowhere to go — 12/3/6/9 o'clock and
four corners all assume a wide, roughly-landscape canvas, and the scroll
math that drives --p-img/--p-txt never reaches 1 once the track is no
longer taller than the viewport. Rather than force the pinned/scroll-
jacked treatment onto a tall narrow screen, mobile gets the plain-flow
version every other pinned effect on this site already falls back to:
a static panel, a simple photo grid, the four lines stacked underneath. */
@media (max-width:899px){
.expand__track{ height:auto; }
.expand__stage{
position:relative; height:auto; overflow:visible;
display:block; padding-block:clamp(48px,10vw,72px) 0;
}
.expand__frame{ position:relative; inset:auto; width:100%; height:clamp(220px,58vw,320px); clip-path:none; }
.expand__title{ position:relative; inset:auto; width:100%; height:clamp(220px,58vw,320px); margin-top:calc(clamp(220px,58vw,320px) * -1); }
/* !important: the scroll-linked JS still runs on mobile (it doesn't check
viewport width) and sets this opacity inline every frame — the pinned
track just never reaches its flip point once it's no taller than the
viewport, so without this override it would get stuck unflipped */
.expand__title .swap b:first-child{ opacity:0 !important; }
.expand__title .swap b:last-child{ opacity:1 !important; }
.expand__hint{ display:none; }
.expand__imgs{
position:relative; inset:auto; z-index:auto;
display:grid; grid-template-columns:1fr 1fr; gap:14px;
padding:clamp(28px,6vw,44px) var(--gut) 0;
}
.expand__img{
position:relative; inset:auto; top:auto; left:auto; right:auto; bottom:auto;
width:100%; opacity:1; transform:none; transform-origin:center;
}
.expand__imagines{
position:relative; inset:auto; z-index:auto;
display:flex; flex-direction:column; gap:clamp(20px,4vw,28px);
padding:clamp(28px,6vw,40px) var(--gut) clamp(48px,8vw,64px);
}
.expand__imagine{
position:relative; inset:auto; top:auto; left:auto; right:auto; bottom:auto;
width:auto; max-width:none; text-align:left; opacity:1; transform:none;
}
/* the per-word --lp reveal is driven by --p-txt, which never moves off 0
here (see the .expand__track note above) — show every word immediately
rather than have them stuck in their hidden, slid-out position */
.expand__imagine .w i{ transform:none !important; }
}
/* ---------- curved text loop ---------- */
.loop{ position:relative; padding-block:clamp(18px,3.5vw,40px); overflow:hidden; margin-top:clamp(-40px,-4vw,-10px); }
.loop svg{ display:block; width:100%; height:auto; overflow:visible; }
.loop__band{ fill:none; stroke:var(--orange); stroke-width:72; }
.loop text{
font-size:27px; font-weight:600; letter-spacing:0;
fill:var(--on-orange); user-select:none;
dominant-baseline:middle;
}
/* ---------- scroll stack ----------
Rebuilt on the same track/stage pattern as .expand (the one other
scroll-pinned section on this site, and the only one that's never had
a positioning bug): .stack__track is a tall spacer, .stack__stage is
the ONE sticky element pinned inside it — not four. The four cards
are absolutely positioned inside at fixed, increasing offsets (pure
layout, no JS math needed for "where"), and site.js only drives each
card's reveal (opacity + a small rise) as scroll progress through the
track crosses that card's own threshold — see "7. scroll stack".
Earlier versions made each card itself position:sticky; with four of
them sharing one containing block, browsers capped them all against
the same release ceiling, so once two ran out of that shared budget
they rendered at the identical pixel position and visually merged.
Giving every card its own JS-computed sticky-equivalent transform
then fixed that but reading layout every scroll frame made scrolling
janky, and because the cards were still in normal document flow the
section's actual scroll-height didn't match its visual (compact,
transformed) height, so the next section would scroll in underneath
before the cards had visually finished. Pinning ONE element and
absolutely-positioning the cards inside it solves both at once: the
track's height is the section's real, honest scroll-height, and
per-frame work is a single cheap read plus direct style writes. */
.stack__track{ position:relative; height:260vh; }
.stack__stage{ position:sticky; top:var(--head-h); padding-top:clamp(18px,3vw,32px); }
/* shared card look, used both by the homepage's scroll-pinned peek-stack
(inside .stack__track — see below) and by plain, non-animated card
lists elsewhere on the site (e.g. About) */
.stack{ position:relative; }
.stack__card{
--card-pad:clamp(28px,3.6vw,48px);
--peek:84px;
border-radius:0; overflow:hidden;
padding:var(--card-pad);
border:1px solid var(--line);
background:var(--ink-2);
display:grid; gap:14px;
}
.stack__card + .stack__card{ margin-top:clamp(14px,2vw,24px); }
@media (min-width:820px){
.stack__card{ grid-template-columns:12.5rem minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:start; }
}
.stack__no{
font-size:.86rem; font-weight:500; color:var(--orange);
font-variant-numeric:tabular-nums; white-space:nowrap;
}
.stack__card h3{ margin:0 0 .55em; font-size:clamp(1.5rem,2.8vw,2.2rem); font-weight:400; letter-spacing:-.032em; }
.stack__card p{ margin:0; color:var(--muted); max-width:54ch; }
.stack__card--orange{
border-color:transparent; color:var(--on-orange);
background:
radial-gradient(110% 160% at 8% 0%, rgba(255,138,61,.7), transparent 56%),
linear-gradient(118deg, #E8410F, #E8410F);
}
/* the peek-stack mechanics (absolute positioning, entrance transform,
the label's own peek-height zone) only kick in when a .stack sits
inside the scroll-pinned .stack__track — a standalone .stack (no
track ancestor) stays a plain, always-visible stacked card list. */
.stack__track .stack{ height:clamp(420px,46vw,480px); margin-top:clamp(28px,4vw,44px); }
.stack__track .stack__card{
position:absolute; left:0; right:0; margin-top:0;
/* solid slide, no fade — a translucent card fading in at a position
that already overlaps the one before it just reads as a ghost
smeared over that card's text. Starting fully opaque and clearly
below (not yet overlapping) and sliding up to settle reads as one
card landing on the stack, not two cards bleeding into each other */
transform:translateY(140px);
will-change:transform;
}
.stack__track .stack__card:nth-child(1){ top:0; }
.stack__track .stack__card:nth-child(2){ top:var(--peek); }
.stack__track .stack__card:nth-child(3){ top:calc(var(--peek) * 2); }
.stack__track .stack__card:nth-child(4){ top:calc(var(--peek) * 3); }
@media (max-width:899px){
.stack__track .stack__card{ --peek:96px; }
.stack__track .stack{ height:clamp(560px,66vw,640px); }
}
/* pulled up by its own top padding so its box starts flush with the
card's top edge, then given a fixed height equal to --peek and
vertically centred — that height is exactly the sliver of card left
visible once the next card stacks on top, so the label always lands
dead-centre in that visible strip rather than hugging its top edge */
.stack__track .stack__no{
grid-row:1; grid-column:1;
height:var(--peek); margin-top:calc(var(--card-pad) * -1);
display:flex; align-items:center;
}
.stack__card--orange p{ color:rgba(255,255,255,.84); }
.stack__card--orange .stack__no{ color:rgba(255,255,255,.7); }
/* the section's own heading reuses the COMPOUND lockup — a big outline "4"
sitting behind "Four areas..." (left-aligned, matching this section's
own layout, rather than the compound section's centred version) */
/* justify-self:start is load-bearing here, not decorative: as a grid item
inside .split, this inline-grid gets blockified and (default
justify-items:stretch) stretches to fill the whole 7fr column, so its
internally-centred outline+title drift away from the column's true left
edge even though the box itself starts flush with it. Pin the box to
its own content width instead of letting it stretch. */
.stack__intro-heading{ display:inline-grid; max-width:100%; justify-self:start; }
.stack__intro-heading .heading-stack__outline{
grid-area:1 / 1; align-self:center; justify-self:center;
margin:0; font-size:clamp(2.8rem,6.4vw,4.4rem);
}
.stack__intro-heading .heading-stack__title{
grid-area:1 / 1; align-self:center; justify-self:center;
font-size:clamp(1.5rem,3vw,2.3rem); font-weight:700;
letter-spacing:-.036em; line-height:1.03; white-space:nowrap; margin:0;
}
/* the outline pushes the heading's own visual top down inside its grid
cell (the cell is sized to the taller outline, not the title line) —
nudge the aside copy down by the same difference so it still lines up
with the title's actual cap-height instead of the cell's top edge */
.stack__intro .split__aside{ padding-top:clamp(4px,1vw,12px); }
/* What we do: title + aside sit under the four cards instead of above */
.stack__track .stack:first-child{ margin-top:0; }
.stack__intro--below{ margin-top:clamp(28px,4vw,44px); }
/* ---------- canonical hollow-heading reference ----------
THE reference pattern for this lockup, going forward — two variants only:
1. CENTRED (e.g. "Three things..."/STRATEGY on About): wrap the
.heading-stack in .compound__heading (display:flex;justify-content:
center) so outline+title sit centred as one block, then centre the
body copy underneath it too (text-align:center;margin-inline:auto).
Nothing left-aligned anywhere in that block.
2. LEFT, WITH A SMALL ASIDE (e.g. "What we do", "Four areas" on home):
reuse .stack__intro-heading — outline+title stay centred ON EACH
OTHER inside their own shared grid cell (both align-self/justify-
self:center — never :start, or the two words collide instead of
one sitting centred behind the other) — the block as a whole then
sits at the start of a .split because .wrap.split's own grid puts
its first child in the left column, NOT because anything inside
the heading is left-aligned. The small aside paragraph goes in
.split__aside beside it, nudged down to the title's cap-height via
the section's own ` .split__aside{ padding-top:... }`
rule (copy the .stack__intro one above, don't reinvent it). */
/* ---------- method — "What we do", icon/rule/heading/body columns ----------
Left/aside intro row: reuses .stack__intro-heading verbatim (see the
canonical-pattern note above) inside a .method-intro wrap so the aside
gets its own padding-top nudge, exactly like .stack__intro. */
.method-intro .split__aside{ padding-top:clamp(4px,1vw,12px); }
/* ---------- flowing list ---------- */
.flow__item:first-child{ border-top:1px solid var(--line); }
.flow__item{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.flow__link{
display:flex; align-items:baseline; gap:1.1rem;
padding:clamp(22px,3vw,36px) 0;
text-decoration:none; color:var(--paper); position:relative; z-index:1;
}
.flow__link h3{ margin:0; }
.flow__link p{ margin:.42em 0 0; color:var(--muted); max-width:56ch; font-size:.96rem; }
.flow__no{ font-size:.84rem; font-weight:500; color:var(--orange); flex:none; padding-top:.4em; font-variant-numeric:tabular-nums; }
.flow__marquee{
position:absolute; inset:0; z-index:2; pointer-events:none;
background:linear-gradient(110deg, #E8410F, #E8410F); color:var(--on-orange);
transform:translate3d(0,101%,0);
display:flex; align-items:center; overflow:hidden;
}
.flow__marquee-inner{ display:flex; white-space:nowrap; will-change:transform; }
.flow__marquee span{
font-size:clamp(1.5rem,3vw,2.2rem); font-weight:400; letter-spacing:-.032em;
padding:0 1.1rem; display:inline-flex; align-items:center; gap:1.1rem;
}
.flow__marquee span::after{ content:"—"; opacity:.5; }
/* ---------- gradual blur edge ---------- */
.gblur{ position:absolute; left:0; right:0; height:140px; z-index:6; pointer-events:none; }
.gblur--bottom{ bottom:0; }
.gblur i{ position:absolute; inset:0; display:block; }
.gblur--bottom i:nth-child(1){ backdrop-filter:blur(.5px); -webkit-backdrop-filter:blur(.5px);
-webkit-mask-image:linear-gradient(to top,#000 0%,#000 12.5%,transparent 25%); mask-image:linear-gradient(to top,#000 0%,#000 12.5%,transparent 25%); }
.gblur--bottom i:nth-child(2){ backdrop-filter:blur(1.5px); -webkit-backdrop-filter:blur(1.5px);
-webkit-mask-image:linear-gradient(to top,transparent 12.5%,#000 25%,#000 37.5%,transparent 50%); mask-image:linear-gradient(to top,transparent 12.5%,#000 25%,#000 37.5%,transparent 50%); }
.gblur--bottom i:nth-child(3){ backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
-webkit-mask-image:linear-gradient(to top,transparent 25%,#000 37.5%,#000 62.5%,transparent 75%); mask-image:linear-gradient(to top,transparent 25%,#000 37.5%,#000 62.5%,transparent 75%); }
.gblur--bottom i:nth-child(4){ backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
-webkit-mask-image:linear-gradient(to top,transparent 50%,#000 62.5%,#000 100%); mask-image:linear-gradient(to top,transparent 50%,#000 62.5%,#000 100%); }
.gblur--bottom i:nth-child(5){ background:linear-gradient(to top, var(--ink) 6%, transparent 82%); }
/* ---------- the orange block ----------
A lit gradient field, not a flat fill — with the page grain over it. */
.block{
position:relative; overflow:hidden;
color:var(--on-orange);
padding-block:clamp(72px,9vw,124px);
background:
radial-gradient(80% 120% at 10% -10%, rgba(255,138,61,.72), transparent 58%),
radial-gradient(70% 110% at 96% 110%, rgba(160,25,10,.6), transparent 60%),
linear-gradient(112deg, #E8410F, #E8410F);
}
.block h2, .block h3{ color:var(--on-orange); }
.block p{ color:rgba(255,255,255,.86); }
.block .lead{ color:#fff; }
.block .statement{ color:var(--on-orange); }
/* ---------- 1.01^365 — the compound-growth panel ----------
The site's second cream surface (after .intro): equation left, the tiny
fires connection right, plain fade-up reveals only — no scroll-jacking —
then the curved "tiny fires" loop runs on within the same cream ground
rather than dropping back to a separate dark section underneath it. */
.compound{ background:var(--cream); color:var(--ink-on-cream); padding-top:clamp(34px,4.6vw,64px); padding-bottom:clamp(48px,6vw,80px); }
.compound h2{ color:var(--ink-on-cream); }
.compound .lead{ color:var(--muted-on-cream); }
/* dialled back from the shared heading-stack sizing — at full size this
heading read as overpowering next to the equation it's introducing */
.compound .heading-stack__outline{ font-size:clamp(2.5rem,6.4vw,5rem); }
.compound .heading-stack__title{ font-size:clamp(1.8rem,4vw,3rem); }
/* ---------- stacked heading trial — large outline word behind, regular
title on top, both left-aligned and centred on the same line so they
read as one lockup (see the FAQ reference), the whole lockup then
centred as a single banner line above the equation/copy row */
.compound__heading{ display:flex; justify-content:center; margin-bottom:clamp(32px,5vw,56px); }
.heading-stack{ display:inline-grid; }
.heading-stack__outline{
grid-area:1 / 1; align-self:center; justify-self:center;
margin:0; font-size:clamp(3.6rem,9.6vw,7.6rem); font-weight:800;
letter-spacing:-.03em; line-height:.9; text-transform:uppercase;
color:transparent; -webkit-text-fill-color:transparent;
-webkit-text-stroke:1.5px var(--orange); text-stroke:1.5px var(--orange);
white-space:nowrap; pointer-events:none; user-select:none;
}
.heading-stack__title{
grid-area:1 / 1; align-self:center; justify-self:center;
margin:0; font-size:clamp(2.6rem,6.2vw,4.7rem); font-weight:700; white-space:nowrap;
}
.compound__row{ align-items:start; }
.compound__eq{
display:flex; align-items:flex-start; flex-wrap:wrap;
gap:.18em; margin:0;
font-size:clamp(2.4rem,5.4vw,4.4rem); font-weight:300; line-height:1;
letter-spacing:-.03em; color:var(--ink-on-cream);
}
.compound__eq sup{ font-size:.36em; font-weight:600; line-height:1; position:relative; top:-.1em; color:var(--red); }
.compound__eq .op{ align-self:center; margin-inline:.1em; color:var(--muted-on-cream); font-weight:300; font-size:.46em; }
/* ---------- imagine ---------- */
.imagine{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.imagine li{
border-bottom:1px solid var(--line);
padding:clamp(20px,2.8vw,32px) 0;
font-size:clamp(1.1rem,2vw,1.6rem); font-weight:400;
letter-spacing:-.028em; line-height:1.3;
display:flex; gap:.55em; align-items:flex-start; text-wrap:pretty;
transition:padding-left .4s cubic-bezier(.16,1,.3,1), color .3s;
color:var(--muted);
}
.imagine li:hover{ padding-left:14px; color:var(--paper); }
.imagine b{ font-weight:500; flex:none; color:var(--orange); }
.sum{
margin-top:clamp(32px,5vw,54px);
font-size:clamp(1.15rem,2.2vw,1.8rem); font-weight:400;
letter-spacing:-.032em; line-height:1.24; max-width:32ch;
}
.sum em{ font-style:normal; color:var(--orange); }
/* ---------- rows ---------- */
.rows{ border-top:1px solid var(--line); }
.row{ border-bottom:1px solid var(--line); padding:clamp(24px,3vw,38px) 0; display:grid; gap:8px 44px; }
@media (min-width:860px){ .row{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); } }
.row h3{ margin:0; }
.row p{ color:var(--muted); margin:0; }
/* ---------- experience ----------
Cream panel (third on the site, after .intro and .compound). Same
split-heading lockup as the "Four areas" section but mirrored — body
copy in the wide left column, the outline title in the narrower right
one — then a row of client logos below, each with an orange case-study
teaser that swaps in on hover/focus. */
.experience{ background:var(--cream); color:var(--ink-on-cream); padding-block:clamp(56px,8vw,104px); }
.experience .experience__body,
.experience .muted{ color:var(--muted-on-cream); }
.experience__body{ padding-top:8px; }
.experience__intro{ align-items:start; }
@media (min-width:900px){
/* title needs more room than the default 7fr/5fr split gives it now
it's the dominant element — flip the ratio in its favour */
.experience__intro{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
}
.experience__heading{ display:inline-grid; max-width:100%; justify-self:end; }
.experience__heading .heading-stack__outline{
grid-area:1 / 1; align-self:center; justify-self:center;
margin:0; font-size:clamp(3.8rem,9vw,6.6rem);
}
.experience__heading .heading-stack__title{
grid-area:1 / 1; align-self:center; justify-self:center;
color:var(--ink-on-cream); font-size:clamp(2.3rem,5vw,3.8rem); font-weight:700;
letter-spacing:-.036em; line-height:1.05; white-space:normal; margin:0; text-align:center;
}
.experience__hint{ margin:0 0 clamp(18px,2.6vw,28px); text-align:left; }
.experience__logos{
list-style:none; margin:0; padding:0;
display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,2vw,20px);
}
@media (min-width:700px){ .experience__logos{ grid-template-columns:repeat(4,1fr); } }
.experience__logo{
position:relative; overflow:hidden; isolation:isolate;
height:clamp(120px,13vw,168px);
border:1px solid var(--line-on-cream); background:#fff;
display:flex; align-items:center; justify-content:center; padding:clamp(20px,3vw,32px);
}
.experience__logo img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.experience__card{
position:absolute; inset:0; z-index:1;
display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
gap:.6em; padding:clamp(16px,2.4vw,22px) clamp(14px,2vw,20px);
text-align:center; color:var(--on-orange);
background:
radial-gradient(110% 160% at 8% 0%, rgba(255,138,61,.7), transparent 56%),
linear-gradient(118deg, #E8410F, #E8410F);
opacity:0; transform:translateY(6px);
transition:opacity .28s ease, transform .28s ease;
pointer-events:none;
}
.experience__logo:hover .experience__card,
.experience__logo:focus-within .experience__card{ opacity:1; transform:translateY(0); }
.experience__card-label{ margin:0; color:#fff; }
.experience__card p{ margin:0; color:rgba(255,255,255,.9); }
@media (max-width:699px){
.experience__intro{ grid-template-columns:1fr; }
.experience__heading{ justify-self:start; margin-top:clamp(16px,4vw,24px); }
.experience__heading .heading-stack__title{ white-space:normal; }
}
/* ---------- method — "What we do", icon/rule/heading/body columns ----------
Fourth cream panel on the site. Left-aligned hollow-outline heading above
a row of columns, each divided by a vertical rule with an icon, a title
and body copy underneath — all in the cream palette's ink, not orange,
so the section reads as calm reference material rather than a CTA. */
.method{ background:var(--cream); color:var(--ink-on-cream); }
.method .muted{ color:var(--muted-on-cream); }
.method .lead{ color:var(--muted-on-cream); }
/* ---------- service-detail — "Each service, in more detail" (Services) ----------
Five cards, 3 then 2: a plain 3-column grid left to fill naturally rather
than forced/centred, so row two just runs out after two cards — the
same "leave the gap" approach as the peek-stack and method grids. */
.service-detail{ background:var(--cream); color:var(--ink-on-cream); }
.service-detail__grid{
display:grid; gap:clamp(20px,2.6vw,28px);
margin-top:clamp(32px,4.4vw,52px);
}
@media (min-width:700px){
/* six columns, each card spanning two, purely so the leftover row of
two can be RE-centred (grid-column:2/span 2 + 4/span 2) — plain
repeat(3,1fr) has no way to centre an incomplete row, it just left-
aligns whatever's left over */
.service-detail__grid{ grid-template-columns:repeat(6,1fr); }
.service-card{ grid-column:span 2; }
.service-detail__grid .service-card:nth-child(4){ grid-column:2 / span 2; }
.service-detail__grid .service-card:nth-child(5){ grid-column:4 / span 2; }
}
.service-card{
background:#fff; border:1px solid var(--line-on-cream);
padding:clamp(26px,3.2vw,34px);
}
.service-card h3{
margin:0 0 .6em;
background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.service-card p{ margin:0; color:var(--muted-on-cream); }
.method__grid{
display:grid; gap:clamp(32px,5vw,48px);
margin-top:clamp(36px,5vw,56px);
}
@media (min-width:800px){
.method__grid{ grid-template-columns:repeat(3,1fr); }
}
.method__item{
border-left:1px solid var(--line-on-cream);
padding-left:clamp(24px,3vw,36px);
}
.method__icon{
display:inline-flex; align-items:center; justify-content:center;
width:clamp(52px,6vw,64px); height:clamp(52px,6vw,64px); border-radius:50%;
border:1px solid var(--line-on-cream); color:var(--ink-on-cream);
margin-bottom:clamp(22px,3vw,32px);
}
.method__icon svg{ width:clamp(24px,2.8vw,28px); height:clamp(24px,2.8vw,28px); }
.method__item h3{
margin-bottom:.6em;
background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.method__item p{ color:var(--muted-on-cream); margin:0; }
/* ---------- insight — centred one-line statement, photo + right-set copy ---------- */
.insight__heading{
text-align:center; margin-inline:auto; max-width:none;
white-space:nowrap; font-size:clamp(.92rem,3.7vw,3.1rem);
}
.insight__row{
display:grid; gap:clamp(24px,4vw,48px); align-items:stretch;
margin-top:clamp(36px,5vw,60px);
}
@media (min-width:760px){
.insight__row{ grid-template-columns:1fr 1fr; }
}
.insight__media{
min-height:220px; background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.28);
overflow:hidden;
}
.insight__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.insight__body{ text-align:right; }
.insight__body .lead,
.insight__body p{ margin-left:auto; margin-right:0; }
/* ---------- word loop — the "5 words" carousel rows ----------
Pure-CSS infinite marquee: each row's word list is written twice in the
markup back-to-back, then translated exactly -50% on a linear loop, so
the seam between the repeats is never visible. No JS needed, unlike the
hover-driven .flow__marquee — this one runs constantly and passively. */
.wordloop-list{ border-top:1px solid var(--line); margin-top:clamp(36px,5vw,56px); }
.wordloop{ overflow:hidden; border-bottom:1px solid var(--line); }
.wordloop__track{
display:flex; align-items:center; width:max-content;
padding:clamp(12px,1.8vw,20px) 0;
will-change:transform;
}
.wordloop__track span{
display:inline-flex; align-items:center; gap:clamp(1.4rem,2.6vw,2.4rem);
font-size:clamp(1.25rem,2.6vw,2rem); font-weight:400; letter-spacing:-.022em;
white-space:nowrap; padding-right:clamp(1.4rem,2.6vw,2.4rem);
}
.wordloop__track span::after{ content:"\2022"; opacity:.4; font-size:.6em; }
.wordloop--paper .wordloop__track{ color:var(--paper); }
.wordloop--orange .wordloop__track{ color:var(--orange); }
.wordloop--left .wordloop__track{ animation:wordloop-left 30s linear infinite; }
.wordloop--right .wordloop__track{ animation:wordloop-right 30s linear infinite; }
@keyframes wordloop-left{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes wordloop-right{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@media (prefers-reduced-motion: reduce){ .wordloop__track{ animation:none !important; } }
html.cap .wordloop__track{ animation:none !important; }
/* ---------- founder — "What's it like to work with me?" ----------
Fifth cream panel. Left-aligned hollow heading (single line) with the
body copy left-aligned underneath it — not beside it, unlike the
.stack__intro-heading pattern — and a portrait placeholder to the right. */
.founder{ background:var(--cream); color:var(--ink-on-cream); }
.founder .muted{ color:var(--muted-on-cream); }
.founder .split{ align-items:start; }
.founder__title{ display:flex; justify-content:center; text-align:center; margin-bottom:clamp(28px,4vw,48px); }
@media (min-width:900px){ .founder .split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.founder__rest{ margin-top:clamp(8px,1.6vw,20px); }
.founder__rest p{ max-width:none; }
.founder__rest p:first-child{ margin-top:0; }
.founder .split__aside{ padding-top:0; align-self:start; }
.founder__body{ margin-top:0; }
.founder__body .lead,
.founder__body p{ color:var(--muted-on-cream); }
.founder__media{
aspect-ratio:3/2;
background:linear-gradient(155deg,#3c3c3c 0%,#161616 45%,#000 100%);
border-radius:3px;
padding:clamp(10px,1.6vw,16px);
display:flex;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.08),
inset 0 1px 2px rgba(255,255,255,.18),
inset 0 -2px 6px rgba(0,0,0,.7),
0 16px 36px rgba(0,0,0,.32);
}
.founder__mat{
flex:1; display:flex;
background:#fbfbf9;
padding:clamp(10px,1.6vw,16px);
box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);
}
.founder__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.founder__media-note{ margin-top:.9em; }
/* round 14: copy runs straight through, photo sits last, centred */
.founder__copy p{ max-width:72ch; margin-inline:auto; }
.founder__copy p:first-child{ margin-top:0; }
.founder__photo{ max-width:640px; margin-top:clamp(28px,4vw,48px); text-align:center; }
/* ---------- spark term — the four areas called out inline in running copy
(About's phero paragraph) ---------- */
.spark-term{
color:var(--orange); font-weight:500;
text-decoration:underline; text-decoration-color:rgba(232,65,15,.45);
text-underline-offset:.15em;
animation:spark-flicker 2.6s ease-in-out infinite;
}
.spark-term:nth-of-type(2){ animation-delay:.5s; }
.spark-term:nth-of-type(3){ animation-delay:1s; }
.spark-term:nth-of-type(4){ animation-delay:1.5s; }
@media (prefers-reduced-motion: reduce){ .spark-term{ animation:none; } }
/* ---------- words ---------- */
.words{ display:flex; flex-wrap:wrap; gap:7px; margin:0; padding:0; list-style:none; }
.words li{
border:1px solid var(--line); padding:.45em 1em;
font-size:.9rem; color:var(--muted);
transition:color .22s, border-color .22s, background-color .22s;
}
.words li:hover{ color:var(--on-orange); border-color:var(--orange); background:var(--orange); }
/* ---------- contact list — email/LinkedIn/location rows (Contact) ----------
Same icon-badge language as .method__icon, just on the dark ground —
colour picks up the brand orange instead of ink-on-cream. */
.contact-list{ display:grid; gap:20px; margin-top:2.2em; }
.contact-list__item{ display:flex; align-items:flex-start; gap:1em; }
.contact-list__icon{
flex:none; display:inline-flex; align-items:center; justify-content:center;
width:40px; height:40px; border-radius:50%;
border:1px solid var(--line); color:var(--orange);
}
.contact-list__icon svg{ width:18px; height:18px; }
.contact-list__value a{ color:inherit; text-decoration:none; border-bottom:0; }
.contact-list__value a:hover{ color:var(--orange); }
.contact-list__value{ display:block; overflow-wrap:anywhere; color:var(--paper); font-size:1rem; margin-top:.15em; }
/* ---------- table ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); }
table{ width:100%; border-collapse:collapse; min-width:640px; }
th,td{ text-align:left; padding:17px 22px; border-bottom:1px solid var(--line); vertical-align:top; font-size:.95rem; }
thead th{ font-size:.86rem; font-weight:500; color:var(--orange); background:rgba(247,243,238,.02); }
tbody td{ color:var(--muted); }
tbody tr:last-child td{ border-bottom:0; }
td.empty{ color:var(--muted-2); }
/* bigger, more colour-led variant — thicker padding and type, an orange
top rule on the header instead of a flat tint, a subtle left rail on
each row picking up the brand gradient, and a warm hover state so the
table reads less like a spreadsheet and more like the rest of the site */
.table-wrap--big table{ min-width:720px; }
.table-wrap--big th,
.table-wrap--big td{ padding:26px 28px; font-size:1.05rem; }
.table-wrap--big thead tr{ border-left:3px solid transparent; }
.table-wrap--big thead th{
font-size:.92rem; letter-spacing:.01em;
background:rgba(232,65,15,.07);
border-bottom:2px solid var(--orange);
}
/* a hover rail via border, not an absolutely-positioned ::before — giving
a