/* ============ EDITORIAL MONOLITH ============ */
:root{
--paper:#faf7f2;
--paper-deep:#f3eee5;
--ink:#16130e;
--ink-soft:#5c554a;
--hair:rgba(22,19,14,.18);
--hair-strong:rgba(22,19,14,.85);
--burn:#ff3600; /* electric orange-red */
--burn-soft:rgba(255,54,0,.08);
--grotesk:"Helvetica Neue","Neue Haas Grotesk Display","SF Pro Display","Segoe UI Variable Display","Segoe UI",Inter,Arial,sans-serif;
--serif:"Times New Roman",Georgia,"Iowan Old Style",serif;
--mono:"SFMono-Regular",ui-monospace,"Cascadia Mono",Consolas,monospace;
--pad:clamp(1.25rem,4vw,4rem);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* the nav is sticky and 64px tall, so anything scrolled to needs to clear it */
:target,main h2,main h3,[id]{scroll-margin-top:5rem}
html,body{overflow-x:clip}
body{
background:var(--paper);
color:var(--ink);
font-family:var(--grotesk);
font-size:1rem;
line-height:1.5;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
/* faint paper grain */
body::before{
content:"";position:fixed;inset:0;pointer-events:none;z-index:2000;opacity:.5;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 .04'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--burn);color:var(--paper)}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img,svg{max-width:100%;display:block}
.wrap{max-width:1440px;margin-inline:auto;padding-inline:var(--pad)}
/* micro label */
.micro{
font-size:.6875rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
color:var(--ink-soft);
}
.micro .tick{color:var(--burn)}
.serif-i{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
/* ============ REVEAL ============ */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.6,.2,1),transform .8s cubic-bezier(.2,.6,.2,1)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
.rv{opacity:1;transform:none;transition:none}
*{animation-duration:.01ms !important;animation-iteration-count:1 !important}
}
/* ============ SKIP LINK ============ */
/* Off-screen until focused, then it lands as a real element in the top-left
rather than as an outline around nothing. First tab stop on every page. */
.skip-link{
position:absolute;left:-9999px;top:0;z-index:200;
background:var(--ink);color:var(--paper);
font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
padding:.85rem 1.25rem;border-bottom-right-radius:4px;
}
.skip-link:focus{left:0}
.skip-link:focus-visible{outline:2px solid var(--burn);outline-offset:2px}
/* ============ NAV ============ */
.nav{
position:sticky;top:0;z-index:100;
background:rgba(250,247,242,.92);backdrop-filter:blur(10px);
border-bottom:1px solid var(--hair);
}
.nav-in{
display:flex;align-items:center;justify-content:space-between;
height:64px;
}
.wordmark{
font-weight:700;font-size:1.125rem;letter-spacing:.14em;text-transform:uppercase;
display:flex;align-items:center;gap:.5rem;
}
/* The Screen: a three by three halftone grid, one cell in burn. The eight
structural cells take currentColor, so the mark reverses on ink without a
second drawing being needed. Sized in em, so it tracks the wordmark down
at the 420px breakpoint without a second rule. */
.wordmark .mark{width:1.1em;height:1.1em;flex:none;display:block}
/* six links now, not five: the gap tightens on smaller desktops so the row
cannot collide with the wordmark and the CTA just above the 1024px cutover */
.nav-links{display:flex;gap:clamp(1.25rem,2.2vw,2.25rem);align-items:center}
.nav-links a{
font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
position:relative;padding:.25rem 0;
}
.nav-links a::after{
content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
background:var(--ink);transform:scaleX(0);transform-origin:right;
transition:transform .35s cubic-bezier(.2,.6,.2,1);
}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-cta{
font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
border:1px solid var(--hair-strong);padding:.65rem 1.15rem;border-radius:999px;
transition:background .25s,color .25s,border-color .25s;
white-space:nowrap;
}
.nav-cta:hover{background:var(--ink);color:var(--paper)}
@media (max-width:820px){.nav-links{display:none}}
/* under ~354px the wordmark + CTA overflowed the bar; shrink both on small phones */
@media (max-width:420px){
.wordmark{font-size:1rem;letter-spacing:.1em}
.nav-cta{font-size:.625rem;letter-spacing:.08em;padding:.55rem .8rem}
}
/* ============ HERO ============ */
/* The home hero stays the tallest block on the site. Interior pages share a
shorter fixed height of their own, in .page-head. */
.hero{
position:relative;
display:flex;align-items:center;
min-height:30rem;
padding-block:clamp(3.5rem,5vw,6rem);
border-bottom:1px solid var(--hair);
overflow:clip;
}
.hero > .wrap{width:100%}
@media (min-width:1024px){.hero{min-height:45rem}}
.hero h1{
font-size:clamp(2.1rem,7vw,5.75rem);
line-height:.98;
font-weight:700;
letter-spacing:-.03em;
text-transform:uppercase;
/* no ch-based max-width: it fought the explicit
and forced ragged wraps */
max-width:20em;
text-wrap:balance;
}
.hero h1 .rev{
font-family:var(--serif);font-style:italic;font-weight:400;
text-transform:none;letter-spacing:-.02em;
color:var(--burn);
padding-right:.06em;
}
.hero h1 .strike{
position:relative;white-space:nowrap;
}
.hero h1 .strike::after{
content:"";position:absolute;left:-.03em;right:-.03em;top:52%;
height:.055em;background:var(--burn);
transform:rotate(-1.2deg) scaleX(0);transform-origin:left center;
animation:strike .7s cubic-bezier(.7,0,.2,1) 1s forwards;
}
@keyframes strike{to{transform:rotate(-1.2deg) scaleX(1)}}
.hero-foot{
margin-top:clamp(2.25rem,5vw,4rem);
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:2.5rem;align-items:end;
}
.hero-sub{
font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.55;color:var(--ink-soft);
max-width:46ch;
}
.hero-sub strong{color:var(--ink);font-weight:600}
.hero-lead{display:grid;gap:clamp(1.75rem,3.5vw,2.75rem);align-content:end}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;justify-content:flex-start}
/* Fig. 01: the positioning argument, drawn */
.hero-fig{
justify-self:end;width:min(100%,26rem);
border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
padding-block:1rem;
}
.hero-fig figcaption{margin-bottom:.9rem}
.fig-svg{width:100%;height:auto}
.fig-label{
font-family:var(--mono);font-size:11px;letter-spacing:.06em;
fill:var(--ink-soft);text-anchor:end;
}
.fig-brace,.fig-stem{fill:none;stroke-width:1}
.fig-brace{stroke:var(--hair-strong)}
.fig-stem{stroke:var(--burn)}
.fig-head{fill:var(--burn)}
.fig-out{
font-family:var(--mono);font-size:12px;font-weight:700;
letter-spacing:.08em;fill:var(--burn);
}
.btn{
display:inline-flex;align-items:center;gap:.65rem;
font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
padding:1.05rem 1.7rem;border-radius:999px;
transition:transform .25s cubic-bezier(.2,.6,.2,1),background .25s,color .25s,border-color .25s;
}
.btn:active{transform:scale(.97)}
button.btn{font-family:inherit;cursor:pointer}
.btn-primary{background:var(--ink);color:var(--paper);border:1px solid var(--ink)}
.btn-primary:hover{background:var(--burn);border-color:var(--burn)}
.btn-primary .arr{transition:transform .25s}
.btn-primary:hover .arr{transform:translateX(4px)}
.btn-ghost{border:1px solid var(--hair-strong);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
@media (max-width:820px){
.hero-foot{grid-template-columns:1fr}
.hero-fig{justify-self:start}
}
/* ============ MARQUEE ============ */
.marquee-band{
border-bottom:1px solid var(--hair);
padding-block:2.25rem;
/* clip the scrolling row horizontally only. Plain `overflow:clip`
also cut off the label that straddles the band's top edge */
overflow-x:clip;
overflow-y:visible;
position:relative;
}
.marquee-label{
position:absolute;top:0;left:var(--pad);transform:translateY(-50%);
background:var(--paper);padding-inline:.75rem;margin-left:-.75rem;
}
.marquee{display:flex;width:max-content;animation:scroll 34s linear infinite}
.marquee-band:hover .marquee{animation-play-state:paused}
.marquee ul{display:flex;align-items:center;gap:0;padding-right:0}
.marquee li{
display:flex;align-items:center;gap:3.2rem;padding-right:3.2rem;
font-size:clamp(1.15rem,2vw,1.6rem);font-weight:700;letter-spacing:-.01em;
color:var(--ink);white-space:nowrap;
}
.marquee li::after{content:"";width:6px;height:6px;background:var(--burn);border-radius:50%;flex:none}
.marquee .sc{font-family:var(--serif);font-style:italic;font-weight:400}
/* Client and experience logos. Normalised on height with a width cap,
because the set runs from a 1:1 mark to a 16:1 wordmark and nothing else
reconciles those. Desaturated at rest so fourteen brand palettes do not
fight the page; full colour when the band is hovered, which is also when
the scroll pauses. Same treatment as the team portraits, deliberately. */
.marquee img{
height:2.1rem;width:auto;max-width:13rem;object-fit:contain;
filter:grayscale(1) contrast(1.05) opacity(.62);
transition:filter .4s;
}
/* Height alone does not balance this set optically: a 1:1 mark at the
wordmark height reads as a third the size of its neighbours, and a 16:1
lockup hits the width cap and goes thin. Compact marks get height, very
wide ones are left to the width cap, which object-fit then letterboxes.
Never height:auto here: these SVGs carry only a viewBox, so before the
file loads there is no ratio to compute a height from and the row jumps. */
.marquee .lg-c{height:2.9rem;max-width:7rem}
.marquee-band:hover .marquee img{filter:none}
@keyframes scroll{to{transform:translateX(-50%)}}
/* ============ SECTION SHELL ============ */
/* The rhythm was set at 9vw of vertical padding and a 5vw gap under every
heading. On a 1440 canvas that stacked 128px + 128px + 72px of nothing
between one argument and the next, and the page read as mostly air.
Both were cut on 2026-09-10. */
.sec{border-bottom:1px solid var(--hair);padding-block:clamp(3rem,5.5vw,5.5rem)}
.sec-head{
display:grid;grid-template-columns:minmax(0,1fr);
align-items:end;gap:clamp(1.25rem,2.5vw,2.25rem);
margin-bottom:clamp(1.75rem,3vw,2.75rem);
}
.sec-head h2{
font-size:clamp(2rem,4.5vw,4rem);font-weight:700;letter-spacing:-.03em;
text-transform:uppercase;line-height:1;
}
.sec-head h2 em{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none}
/* The standfirst. A heading with one paragraph under it left the heading row
empty and stranded the paragraph in the left third of the page; beside the
heading the same sentence composes the row instead. */
.sec-lede{
font-size:clamp(1rem,1.15vw,1.0625rem);line-height:1.65;
color:var(--ink-soft);max-width:54ch;padding-bottom:.4rem;
}
.sec-lede strong{color:var(--ink);font-weight:600}
@media (min-width:1000px){
.sec-head:has(.sec-lede){grid-template-columns:minmax(0,1.02fr) minmax(0,1fr)}
/* A figure inside a .split column: capped so the column it sits in does
not run far past the argument beside it. Tried in the page head and in
the heading row first; the head broke the shared hero height and the
heading row forced the h2 onto two lines. */
.split .hero-fig{justify-self:start;width:min(100%,24rem)}
}
/* ============ SERVICES ============ */
/* The row filled a hairline from left to right on hover. It read as a
progress bar loading and it is gone as of 2026-09-10; the indent and the
arrow are the whole hover state now. Do not put the bar back. */
.svc-row{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) 3rem;
gap:2rem;align-items:baseline;
padding-block:2rem;
border-top:1px solid var(--hair);
position:relative;
transition:padding-left .35s cubic-bezier(.2,.6,.2,1);
cursor:pointer;
}
.svc-row:last-child{border-bottom:1px solid var(--hair)}
.svc-row:hover{padding-left:1rem}
.svc-name{
font-size:clamp(1.5rem,3.2vw,2.6rem);font-weight:700;letter-spacing:-.025em;
text-transform:uppercase;line-height:1.05;
}
.svc-desc{color:var(--ink-soft);font-size:.975rem;line-height:1.6;max-width:70ch}
.svc-arr{
font-size:1.4rem;justify-self:end;
transform:translateX(-6px);opacity:0;transition:transform .35s,opacity .35s;
color:var(--burn);
}
.svc-row:hover .svc-arr{transform:none;opacity:1}
@media (max-width:820px){
.svc-row{grid-template-columns:1fr;grid-template-rows:auto auto;gap:.6rem 1rem;padding-block:1.7rem}
.svc-desc{grid-column:1}
.svc-arr{display:none}
}
/* ============ STATS ============ */
.stats{
background:var(--ink);color:var(--paper);
border-bottom:1px solid var(--hair);
}
.stats .grid{
display:grid;grid-template-columns:repeat(4,1fr);
}
.stat{
padding:clamp(2.5rem,4vw,4rem) clamp(1.25rem,2.5vw,2.5rem);
border-left:1px solid rgba(250,247,242,.14);
}
.stat:first-child{border-left:none}
.stat .val{
font-size:clamp(2.4rem,4.5vw,4.2rem);font-weight:700;letter-spacing:-.03em;line-height:1;
margin:.75rem 0 .9rem;font-variant-numeric:tabular-nums;
}
.stat .val sup{font-size:.45em;color:var(--burn);font-family:var(--serif);font-style:italic;font-weight:400;vertical-align:.55em;margin-left:.05em}
.stat .micro{color:rgba(250,247,242,.55)}
.stat .cap{font-size:.85rem;color:rgba(250,247,242,.65);line-height:1.5}
@media (max-width:820px){
.stats .grid{grid-template-columns:1fr 1fr}
.stat:nth-child(3){border-left:none}
.stat{border-top:1px solid rgba(250,247,242,.14)}
.stat:nth-child(-n+2){border-top:none}
}
@media (max-width:480px){
.stats .grid{grid-template-columns:1fr}
.stat{border-left:none;border-top:1px solid rgba(250,247,242,.14)}
.stat:first-child{border-top:none}
}
/* ============ PROCESS ============ */
/* Same growing hairline as .svc-row, removed for the same reason. These rows
are not even links, so there is nothing for a hover state to promise. */
.step-row{
display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);
gap:2rem;align-items:baseline;
padding-block:2rem;
border-top:1px solid var(--hair);
position:relative;
}
.step-row:last-child{border-bottom:1px solid var(--hair)}
.step-name{
font-size:clamp(1.35rem,2.8vw,2.2rem);font-weight:700;letter-spacing:-.02em;
text-transform:uppercase;line-height:1.05;
}
.step-name em{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none}
.step-desc{color:var(--ink-soft);font-size:.975rem;line-height:1.6;max-width:74ch}
@media (max-width:820px){
.step-row{grid-template-columns:1fr;gap:.6rem 1rem;padding-block:1.7rem}
.step-desc{grid-column:1}
}
/* ============ CASE STUDIES ============ */
.cases{display:grid;gap:clamp(2rem,4vw,3.5rem)}
.case{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
border:1px solid var(--hair);
background:var(--paper);
transition:border-color .3s;
}
.case:hover{border-color:var(--hair-strong)}
.case-visual{
position:relative;min-height:300px;
display:flex;align-items:flex-end;
padding:clamp(1.5rem,3vw,2.5rem);
background:
linear-gradient(135deg,var(--paper-deep) 0%,transparent 60%),
repeating-linear-gradient(0deg,transparent 0 47px,var(--hair) 47px 48px),
repeating-linear-gradient(90deg,transparent 0 47px,var(--hair) 47px 48px);
border-right:1px solid var(--hair);
overflow:hidden;
}
.case:nth-child(even) .case-visual{order:2;border-right:none;border-left:1px solid var(--hair)}
.case-big{
font-size:clamp(4rem,9vw,9rem);font-weight:700;letter-spacing:-.045em;line-height:.85;
color:var(--burn);font-variant-numeric:tabular-nums;
transition:transform .5s cubic-bezier(.2,.6,.2,1);
}
.case:hover .case-big{transform:translateY(-8px)}
.case-big .unit{font-family:var(--serif);font-style:italic;font-weight:400;font-size:.32em;letter-spacing:0;color:var(--ink);display:block;margin-top:.7em}
.case-body{
padding:clamp(1.75rem,3.5vw,3rem);
display:flex;flex-direction:column;gap:1.25rem;justify-content:space-between;
}
.case-client{display:flex;align-items:baseline;gap:1rem;justify-content:space-between}
.case-client h3{font-size:1.35rem;font-weight:700;letter-spacing:-.01em;text-transform:uppercase}
.case-quote{
font-family:var(--serif);font-style:italic;
font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.3;letter-spacing:-.01em;
}
.case-meta{display:flex;gap:.6rem;flex-wrap:wrap}
.case-meta span{
font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
border:1px solid var(--hair);border-radius:999px;padding:.4rem .8rem;color:var(--ink-soft);
}
.case-link{
align-self:flex-start;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
border-bottom:1px solid var(--ink);padding-bottom:.2rem;
display:inline-flex;gap:.5rem;align-items:center;
transition:color .25s,border-color .25s;
}
.case-link:hover{color:var(--burn);border-color:var(--burn)}
@media (max-width:820px){
.case{grid-template-columns:1fr}
.case-visual{min-height:220px;border-right:none;border-bottom:1px solid var(--hair)}
.case:nth-child(even) .case-visual{order:0;border-left:none}
}
/* ============ TESTIMONIAL ============ */
/* Entries ride a circle whose centre sits off canvas to the left, so only its
right edge shows. The entry at the rightmost point is active and its quote
shows on the right. Keyframes below are GENERATED: edit
design/testimonial/build.py and re-run emit_site.py, never by hand. */
.testi{position:relative}
.testi-grid{
display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);
gap:clamp(2rem,5vw,5rem);align-items:center;
}
.t-stage{position:relative;height:470px}
.t-arc{position:absolute;left:0;top:0;color:var(--ink);pointer-events:none}
.t-orb{
position:absolute;left:0;top:0;transform-origin:left center;
display:flex;align-items:center;gap:1.15rem;white-space:nowrap;
animation-duration:30s;animation-iteration-count:infinite;
will-change:transform,opacity;
}
.t-o0{animation-name:t-orbit0} .t-o1{animation-name:t-orbit1}
.t-o2{animation-name:t-orbit2} .t-o3{animation-name:t-orbit3}
.t-o4{animation-name:t-orbit4}
.t-av{
width:68px;height:68px;border-radius:50%;flex:none;
display:flex;align-items:center;justify-content:center;overflow:hidden;
animation-duration:30s;animation-iteration-count:infinite;
will-change:border-color,box-shadow;
}
.t-av svg{width:42%;height:42%}
.t-ini{font-size:1.4rem;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.t-who{display:flex;flex-direction:column;gap:.34rem}
.t-nm{
font-size:1.0625rem;font-weight:700;letter-spacing:-.01em;text-transform:uppercase;
animation-duration:30s;animation-iteration-count:infinite;
}
.t-mt{font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
/* Sized to the tallest quote plus headroom, not guessed. Quotes cross-fade
in place so the panel has to reserve room, but 250 reserved 44px that no
quote ever used. Re-measure here if the quotes change. */
.t-panel{position:relative;min-height:225px}
.t-qt{
position:absolute;left:0;top:0;width:100%;opacity:0;
animation-duration:30s;animation-iteration-count:infinite;
will-change:opacity,transform;
}
/* serif italic, matching .case-quote, which is how the theme sets a quote */
.t-qq{
font-family:var(--serif);font-style:italic;font-weight:400;
font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.3;letter-spacing:-.01em;
max-width:30ch;
}
.t-qq em{color:var(--burn)}
.t-qc{margin-top:1.75rem;font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.t-qc span{color:var(--ink-soft);font-weight:500;margin-left:.6rem}
.testi .mark{
font-family:var(--serif);font-size:5rem;line-height:0;color:var(--burn);
display:block;height:.34em;
}
@media (max-width:820px){
.testi-grid{grid-template-columns:1fr;gap:1.5rem}
.t-stage{height:auto;display:flex;align-items:center;gap:.7rem}
.t-arc{display:none}
.t-who{display:none}
.t-orb{position:static;transform:none;opacity:1;transform-origin:center}
.t-o0{animation-name:t-hi0} .t-o1{animation-name:t-hi1}
.t-o2{animation-name:t-hi2} .t-o3{animation-name:t-hi3}
.t-o4{animation-name:t-hi4}
.t-av{width:52px;height:52px}
.t-ini{font-size:1.1rem}
.t-panel{min-height:175px}
/* stacked, the quote has the whole row: the 30ch cap left it filling
barely a third of an 820px tablet */
.t-qq{font-size:1.25rem;line-height:1.35;max-width:44ch}
.testi .mark{font-size:3.5rem}
}
@media (prefers-reduced-motion:reduce){
.t-orb,.t-av,.t-nm,.t-qt{animation:none}
.t-qt{opacity:0}
.t-qt:first-of-type{opacity:1;transform:none}
}
@keyframes t-orbit0{0.000%{transform:translate(34.42px,536.11px) translateY(-50%) scale(0.520);opacity:0.000}17.000%{transform:translate(34.42px,536.11px) translateY(-50%) scale(0.520);opacity:0.000}17.500%{transform:translate(36.45px,533.83px) translateY(-50%) scale(0.524);opacity:0.008}18.000%{transform:translate(50.26px,517.52px) translateY(-50%) scale(0.553);opacity:0.067}18.500%{transform:translate(83.69px,470.12px) translateY(-50%) scale(0.630);opacity:0.225}19.000%{transform:translate(110.74px,418.83px) translateY(-50%) scale(0.707);opacity:0.383}19.500%{transform:translate(119.01px,399.11px) translateY(-50%) scale(0.736);opacity:0.442}20.000%{transform:translate(120.11px,396.27px) translateY(-50%) scale(0.740);opacity:0.450}37.000%{transform:translate(120.11px,396.27px) translateY(-50%) scale(0.740);opacity:0.450}37.500%{transform:translate(121.20px,393.41px) translateY(-50%) scale(0.745);opacity:0.460}38.000%{transform:translate(128.24px,373.23px) translateY(-50%) scale(0.779);opacity:0.531}38.500%{transform:translate(142.46px,317.01px) translateY(-50%) scale(0.870);opacity:0.725}39.000%{transform:translate(149.34px,259.42px) translateY(-50%) scale(0.961);opacity:0.919}39.500%{transform:translate(149.99px,238.05px) translateY(-50%) scale(0.995);opacity:0.990}40.000%{transform:translate(150.00px,235.00px) translateY(-50%) scale(1.000);opacity:1.000}57.000%{transform:translate(150.00px,235.00px) translateY(-50%) scale(1.000);opacity:1.000}57.500%{transform:translate(149.99px,231.95px) translateY(-50%) scale(0.995);opacity:0.990}58.000%{transform:translate(149.34px,210.58px) translateY(-50%) scale(0.961);opacity:0.919}58.500%{transform:translate(142.46px,152.99px) translateY(-50%) scale(0.870);opacity:0.725}59.000%{transform:translate(128.24px,96.77px) translateY(-50%) scale(0.779);opacity:0.531}59.500%{transform:translate(121.20px,76.59px) translateY(-50%) scale(0.745);opacity:0.460}60.000%{transform:translate(120.11px,73.73px) translateY(-50%) scale(0.740);opacity:0.450}77.000%{transform:translate(120.11px,73.73px) translateY(-50%) scale(0.740);opacity:0.450}77.500%{transform:translate(119.01px,70.89px) translateY(-50%) scale(0.736);opacity:0.442}78.000%{transform:translate(110.74px,51.17px) translateY(-50%) scale(0.707);opacity:0.383}78.500%{transform:translate(83.69px,-0.12px) translateY(-50%) scale(0.630);opacity:0.225}79.000%{transform:translate(50.26px,-47.52px) translateY(-50%) scale(0.553);opacity:0.067}79.500%{transform:translate(36.45px,-63.83px) translateY(-50%) scale(0.524);opacity:0.008}80.000%{transform:translate(34.42px,-66.11px) translateY(-50%) scale(0.520);opacity:0.000}97.000%{transform:translate(34.42px,-66.11px) translateY(-50%) scale(0.520);opacity:0.000}97.010%{transform:translate(34.42px,536.11px) translateY(-50%) scale(0.520);opacity:0.000}100.000%{transform:translate(34.42px,536.11px) translateY(-50%) scale(0.520);opacity:0.000}}
@keyframes t-lit0{0.00%{opacity:0;transform:translateY(12px)}38.00%{opacity:0;transform:translateY(12px)}40.00%{opacity:1;transform:translateY(0)}57.00%{opacity:1;transform:translateY(0)}59.00%{opacity:0;transform:translateY(-12px)}100.00%{opacity:0;transform:translateY(12px)}}
@keyframes t-ring0{0.00%{border-color:var(--hair);box-shadow:0 0 0 0 var(--burn-soft)}37.00%{border-color:var(--hair);box-shadow:0 0 0 0 var(--burn-soft)}40.00%{border-color:var(--burn);box-shadow:0 0 0 6px var(--burn-soft)}57.00%{border-color:var(--burn);box-shadow:0 0 0 6px var(--burn-soft)}60.00%{border-color:var(--hair);box-shadow:0 0 0 0 var(--burn-soft)}100.00%{border-color:var(--hair);box-shadow:0 0 0 0 var(--burn-soft)}}
@keyframes t-nm0{0.00%{color:var(--ink-soft)}37.00%{color:var(--ink-soft)}40.00%{color:var(--ink)}57.00%{color:var(--ink)}60.00%{color:var(--ink-soft)}100.00%{color:var(--ink-soft)}}
@keyframes t-hi0{0.00%{opacity:.32;transform:scale(.84)}37.00%{opacity:.32;transform:scale(.84)}40.00%{opacity:1;transform:scale(1)}57.00%{opacity:1;transform:scale(1)}60.00%{opacity:.32;transform:scale(.84)}100.00%{opacity:.32;transform:scale(.84)}}
@keyframes t-orbit1{0.000%{transform:translate(120.11px,396.27px) translateY(-50%) scale(0.740);opacity:0.450}17.000%{transform:translate(120.11px,396.27px) translateY(-50%) scale(0.740);opacity:0.450}17.500%{transform:translate(121.20px,393.41px) translateY(-50%) scale(0.745);opacity:0.460}18.000%{transform:translate(128.24px,373.23px) translateY(-50%) scale(0.779);opacity:0.531}18.500%{transform:translate(142.46px,317.01px) translateY(-50%) scale(0.870);opacity:0.725}19.000%{transform:translate(149.34px,259.42px) translateY(-50%) scale(0.961);opacity:0.919}19.500%{transform:translate(149.99px,238.05px) translateY(-50%) scale(0.995);opacity:0.990}20.000%{transform:translate(150.00px,235.00px) translateY(-50%) scale(1.000);opacity:1.000}37.000%{transform:translate(150.00px,235.00px) translateY(-50%) scale(1.000);opacity:1.000}37.500%{transform:translate(149.99px,231.95px) translateY(-50%) scale(0.995);opacity:0.990}38.000%{transform:translate(149.34px,210.58px) translateY(-50%) scale(0.961);opacity:0.919}38.500%{transform:translate(142.46px,152.99px) translateY(-50%) scale(0.870);opacity:0.725}39.000%{transform:translate(128.24px,96.77px) translateY(-50%) scale(0.779);opacity:0.531}39.500%{transform:translate(121.20px,76.59px) translateY(-50%) scale(0.745);opacity:0.460}40.000%{transform:translate(120.11px,73.73px) translateY(-50%) scale(0.740);opacity:0.450}57.000%{transform:translate(120.11px,73.73px) translateY(-50%) scale(0.740);opacity:0.450}57.500%{transform:translate(119.01px,70.89px) translateY(-50%) scale(0.736);opacity:0.442}58.000%{transform:translate(110.74px,51.17px) translateY(-50%) scale(0.707);opacity:0.383}58.500%{transform:translate(83.69px,-0.12px) translateY(-50%) scale(0.630);opacity:0.225}59.000%{transform:translate(50.26px,-47.52px) translateY(-50%) scale(0.553);opacity:0.067}59.500%{transform:translate(36.45px,-63.83px) translateY(-50%) scale(0.524);opacity:0.008}60.000%{transform:translate(34.42px,-66.11px) translateY(-50%) scale(0.520);opacity:0.000}77.000%{transform:translate(34.42px,-66.11px) translateY(-50%) scale(0.520);opacity:0.000}77.010%{transform:translate(34.42px,536.11px) translateY(-50%) scale(0.520);opacity:0.000}80.000%{transform:translate(34.42px,536.11px) translateY(-50%) scale(0.520);opacity:0.000}97.000%{transform:translate(34.42px,536.11px) translateY(-50%) scale(0.520);opacity:0.000}97.500%{transform:translate(36.45px,533.83px) translateY(-50%) scale(0.524);opacity:0.008}98.000%{transform:translate(50.26px,517.52px) translateY(-50%) scale(0.553);opacity:0.067}98.500%{transform:translate(83.69px,470.12px) translateY(-50%) scale(0.630);opacity:0.225}99.000%{transform:translate(110.74px,418.83px) translateY(-50%) scale(0.707);opacity:0.383}99.500%{transform:translate(119.01px,399.11px) translateY(-50%) scale(0.736);opacity:0.442}100.000%{transform:translate(120.11px,396.27px) translateY(-50%) scale(0.740);opacity:0.450}}
@keyframes t-lit1{0.00%{opacity:0;transform:translateY(12px)}18.00%{opacity:0;transform:translateY(12px)}20.00%{opacity:1;transform:translateY(0)}37.00%{opacity:1;transform:translateY(0)}39.00%{opacity:0;transform:translateY(-12px)}100.00%{opacity:0;transform:translateY(12px)}}
@keyframes t-ring1{0.00%{border-color:var(--hair);box-shadow:0 0 0 0 var(--burn-soft)}17.00%{border-color:var(--hair);box-shadow:0 0 0 0 var(--burn-soft)}20.00%{border-color:var(--burn);box-shadow:0 0 0 6px var(--burn-soft)}37.00%{border-color:var(--burn);box-shadow:0 0 0 6px var(--burn-soft)}40.00%{border-color:var(--hair);box-shadow:0 0 0 0 var(--burn-soft)}100.00%{border-color:var(--hair);box-shadow:0 0 0 0 var(--burn-soft)}}
@keyframes t-nm1{0.00%{color:var(--ink-soft)}17.00%{color:var(--ink-soft)}20.00%{color:var(--ink)}37.00%{color:var(--ink)}40.00%{color:var(--ink-soft)}100.00%{color:var(--ink-soft)}}
@keyframes t-hi1{0.00%{opacity:.32;transform:scale(.84)}17.00%{opacity:.32;transform:scale(.84)}20.00%{opacity:1;transform:scale(1)}37.00%{opacity:1;transform:scale(1)}40.00%{opacity:.32;transform:scale(.84)}100.00%{opacity:.32;transform:scale(.84)}}
@keyframes t-orbit2{0.000%{transform:translate(150.00px,235.00px) translateY(-50%) scale(1.000);opacity:1.000}17.000%{transform:translate(150.00px,235.00px) translateY(-50%) scale(1.000);opacity:1.000}17.500%{transform:translate(149.99px,231.95px) translateY(-50%) scale(0.995);opacity:0.990}18.000%{transform:translate(149.34px,210.58px) translateY(-50%) scale(0.961);opacity:0.919}18.500%{transform:translate(142.46px,152.99px) translateY(-50%) scale(0.870);opacity:0.725}19.000%{transform:translate(128.24px,96.77px) translateY(-50%) scale(0.779);opacity:0.531}19.500%{transform:translate(121.20px,76.59px) translateY(-50%) scale(0.745);opacity:0.460}20.000%{transform:translate(120.11px,73.73px) translateY(-50%) scale(0.740);opacity:0.450}37.000%{transform:translate(120.11px,73.73px) translateY(-50%) scale(0.740);opacity:0.450}37.500%{transform:translate(119.01px,70.89px) translateY(-50%) scale(0.736);opacity:0.442}38.000%{transform:translate(110.74px,51.17px) translateY(-50%) scale(0.707);opacity:0.383}38.500%{transform:translate(83.69px,-0.12px) translateY(-50%) scale(0.630);opacity:0.225}39.000%{transform:translate(50.26px,-47.52px) translateY(-50%) scale(0.553);opacity:0.067}39.500%{transform:translate(36.45px,-63.83px) translateY(-50%) scale(0.524);opacity:0.008}40.000%{transform:translate(34.42px,-66.11px) translateY(-50%) scale(0.520);opacity:0.000}57.000%{transform:translate(34.42px,-66.11px) translateY(-50%) scale(0.520);opacity:0.000}57.010%{transform:translate(34.42px,536.11px) translateY(-50%) scale(0.520);opacity:0.000}60.000%{transform:translate(34.42px,536.11px) translateY(-50%) scale(0.520);opacity:0.000}77.000%{transform:translate(34.42px,536.11px) translateY(-50%) scale(0.520);opacity:0.000}77.500%{transform:translate(36.45px,533.83px) translateY(-50%) scale(0.524);opacity:0.008}78.000%{transform:translate(50.26px,517.52px) translateY(-50%) scale(0.553);opacity:0.067}78.500%{transform:translate(83.69px,470.12px) translateY(-50%) scale(0.630);opacity:0.225}79.000%{transform:translate(110.74px,418.83px) translateY(-50%) scale(0.707);opacity:0.383}79.500%{transform:translate(119.01px,399.11px) translateY(-50%) scale(0.736);opacity:0.442}80.000%{transform:translate(120.11px,396.27px) translateY(-50%) scale(0.740);opacity:0.450}97.000%{transform:translate(120.11px,396.27px) translateY(-50%) scale(0.740);opacity:0.450}97.500%{transform:translate(121.20px,393.41px) translateY(-50%) scale(0.745);opacity:0.460}98.000%{transform:translate(128.24px,373.23px) translateY(-50%) scale(0.779);opacity:0.531}98.500%{transform:translate(142.46px,317.01px) translateY(-50%) scale(0.870);opacity:0.725}99.000%{transform:translate(149.34px,259.42px) translateY(-50%) scale(0.961);opacity:0.919}99.500%{transform:translate(149.99px,238.05px) translateY(-50%) scale(0.995);opacity:0.990}100.000%{transform:translate(150.00px,235.00px) translateY(-50%) scale(1.000);opacity:1.000}}
@keyframes t-lit2{0.00%{opacity:1;transform:translateY(0)}17.00%{opacity:1;transform:translateY(0)}19.00%{opacity:0;transform:translateY(-12px)}98.00%{opacity:0;transform:translateY(12px)}100.00%{opacity:0;transform:translateY(12px)}}
@keyframes t-ring2{0.00%{border-color:var(--burn);box-shadow:0 0 0 6px var(--burn-soft)}17.00%{border-color:var(--burn);box-shadow:0 0 0 6px var(--burn-soft)}20.00%{border-color:var(--hair);box-shadow:0 0 0 0 var(--burn-soft)}97.00%{border-color:var(--hair);box-shadow:0 0 0 0 var(--burn-soft)}100.00%{border-color:var(--hair);box-shadow:0 0 0 0 var(--burn-soft)}}
@keyframes t-nm2{0.00%{color:var(--ink)}17.00%{color:var(--ink)}20.00%{color:var(--ink-soft)}97.00%{color:var(--ink-soft)}100.00%{color:var(--ink-soft)}}
@keyframes t-hi2{0.00%{opacity:1;transform:scale(1)}17.00%{opacity:1;transform:scale(1)}20.00%{opacity:.32;transform:scale(.84)}97.00%{opacity:.32;transform:scale(.84)}100.00%{opacity:.32;transform:scale(.84)}}
@keyframes t-orbit3{0.000%{transform:translate(120.11px,73.73px) translateY(-50%) scale(0.740);opacity:0.450}17.000%{transform:translate(120.11px,73.73px) translateY(-50%) scale(0.740);opacity:0.450}17.500%{transform:translate(119.01px,70.89px) translateY(-50%) scale(0.736);opacity:0.442}18.000%{transform:translate(110.74px,51.17px) translateY(-50%) scale(0.707);opacity:0.383}18.500%{transform:translate(83.69px,-0.12px) translateY(-50%) scale(0.630);opacity:0.225}19.000%{transform:translate(50.26px,-47.52px) translateY(-50%) scale(0.553);opacity:0.067}19.500%{transform:translate(36.45px,-63.83px) translateY(-50%) scale(0.524);opacity:0.008}20.000%{transform:translate(34.42px,-66.11px) translateY(-50%) scale(0.520);opacity:0.000}37.000%{transform:translate(34.42px,-66.11px) translateY(-50%) scale(0.520);opacity:0.000}37.010%{transform:translate(34.42px,536.11px) translateY(-50%) scale(0.520);opacity:0.000}40.000%{transform:translate(34.42px,536.11px) translateY(-50%) scale(0.520);opacity:0.000}57.000%{transform:translate(34.42px,536.11px) translateY(-50%) scale(0.520);opacity:0.000}57.500%{transform:translate(36.45px,533.83px) translateY(-50%) scale(0.524);opacity:0.008}58.000%{transform:translate(50.26px,517.52px) translateY(-50%) scale(0.553);opacity:0.067}58.500%{transform:translate(83.69px,470.12px) translateY(-50%) scale(0.630);opacity:0.225}59.000%{transform:translate(110.74px,418.83px) translateY(-50%) scale(0.707);opacity:0.383}59.500%{transform:translate(119.01px,399.11px) translateY(-50%) scale(0.736);opacity:0.442}60.000%{transform:translate(120.11px,396.27px) translateY(-50%) scale(0.740);opacity:0.450}77.000%{transform:translate(120.11px,396.27px) translateY(-50%) scale(0.740);opacity:0.450}77.500%{transform:translate(121.20px,393.41px) translateY(-50%) scale(0.745);opacity:0.460}78.000%{transform:translate(128.24px,373.23px) translateY(-50%) scale(0.779);opacity:0.531}78.500%{transform:translate(142.46px,317.01px) translateY(-50%) scale(0.870);opacity:0.725}79.000%{transform:translate(149.34px,259.42px) translateY(-50%) scale(0.961);opacity:0.919}79.500%{transform:translate(149.99px,238.05px) translateY(-50%) scale(0.995);opacity:0.990}80.000%{transform:translate(150.00px,235.00px) translateY(-50%) scale(1.000);opacity:1.000}97.000%{transform:translate(150.00px,235.00px) translateY(-50%) scale(1.000);opacity:1.000}97.500%{transform:translate(149.99px,231.95px) translateY(-50%) scale(0.995);opacity:0.990}98.000%{transform:translate(149.34px,210.58px) translateY(-50%) scale(0.961);opacity:0.919}98.500%{transform:translate(142.46px,152.99px) translateY(-50%) scale(0.870);opacity:0.725}99.000%{transform:translate(128.24px,96.77px) translateY(-50%) scale(0.779);opacity:0.531}99.500%{transform:translate(121.20px,76.59px) translateY(-50%) scale(0.745);opacity:0.460}100.000%{transform:translate(120.11px,73.73px) translateY(-50%) scale(0.740);opacity:0.450}}
@keyframes t-lit3{0.00%{opacity:0;transform:translateY(12px)}78.00%{opacity:0;transform:translateY(12px)}80.00%{opacity:1;transform:translateY(0)}97.00%{opacity:1;transform:translateY(0)}99.00%{opacity:0;transform:translateY(-12px)}100.00%{opacity:0;transform:translateY(12px)}}
@keyframes t-ring3{0.00%{border-color:var(--hair);box-shadow:0 0 0 0 var(--burn-soft)}77.00%{border-color:var(--hair);box-shadow:0 0 0 0 var(--burn-soft)}80.00%{border-color:var(--burn);box-shadow:0 0 0 6px var(--burn-soft)}97.00%{border-color:var(--burn);box-shadow:0 0 0 6px var(--burn-soft)}100.00%{border-color:var(--hair);box-shadow:0 0 0 0 var(--burn-soft)}}
@keyframes t-nm3{0.00%{color:var(--ink-soft)}77.00%{color:var(--ink-soft)}80.00%{color:var(--ink)}97.00%{color:var(--ink)}100.00%{color:var(--ink-soft)}}
@keyframes t-hi3{0.00%{opacity:.32;transform:scale(.84)}77.00%{opacity:.32;transform:scale(.84)}80.00%{opacity:1;transform:scale(1)}97.00%{opacity:1;transform:scale(1)}100.00%{opacity:.32;transform:scale(.84)}}
@keyframes t-orbit4{0.000%{transform:translate(34.42px,-66.11px) translateY(-50%) scale(0.520);opacity:0.000}17.000%{transform:translate(34.42px,-66.11px) translateY(-50%) scale(0.520);opacity:0.000}17.010%{transform:translate(34.42px,536.11px) translateY(-50%) scale(0.520);opacity:0.000}20.000%{transform:translate(34.42px,536.11px) translateY(-50%) scale(0.520);opacity:0.000}37.000%{transform:translate(34.42px,536.11px) translateY(-50%) scale(0.520);opacity:0.000}37.500%{transform:translate(36.45px,533.83px) translateY(-50%) scale(0.524);opacity:0.008}38.000%{transform:translate(50.26px,517.52px) translateY(-50%) scale(0.553);opacity:0.067}38.500%{transform:translate(83.69px,470.12px) translateY(-50%) scale(0.630);opacity:0.225}39.000%{transform:translate(110.74px,418.83px) translateY(-50%) scale(0.707);opacity:0.383}39.500%{transform:translate(119.01px,399.11px) translateY(-50%) scale(0.736);opacity:0.442}40.000%{transform:translate(120.11px,396.27px) translateY(-50%) scale(0.740);opacity:0.450}57.000%{transform:translate(120.11px,396.27px) translateY(-50%) scale(0.740);opacity:0.450}57.500%{transform:translate(121.20px,393.41px) translateY(-50%) scale(0.745);opacity:0.460}58.000%{transform:translate(128.24px,373.23px) translateY(-50%) scale(0.779);opacity:0.531}58.500%{transform:translate(142.46px,317.01px) translateY(-50%) scale(0.870);opacity:0.725}59.000%{transform:translate(149.34px,259.42px) translateY(-50%) scale(0.961);opacity:0.919}59.500%{transform:translate(149.99px,238.05px) translateY(-50%) scale(0.995);opacity:0.990}60.000%{transform:translate(150.00px,235.00px) translateY(-50%) scale(1.000);opacity:1.000}77.000%{transform:translate(150.00px,235.00px) translateY(-50%) scale(1.000);opacity:1.000}77.500%{transform:translate(149.99px,231.95px) translateY(-50%) scale(0.995);opacity:0.990}78.000%{transform:translate(149.34px,210.58px) translateY(-50%) scale(0.961);opacity:0.919}78.500%{transform:translate(142.46px,152.99px) translateY(-50%) scale(0.870);opacity:0.725}79.000%{transform:translate(128.24px,96.77px) translateY(-50%) scale(0.779);opacity:0.531}79.500%{transform:translate(121.20px,76.59px) translateY(-50%) scale(0.745);opacity:0.460}80.000%{transform:translate(120.11px,73.73px) translateY(-50%) scale(0.740);opacity:0.450}97.000%{transform:translate(120.11px,73.73px) translateY(-50%) scale(0.740);opacity:0.450}97.500%{transform:translate(119.01px,70.89px) translateY(-50%) scale(0.736);opacity:0.442}98.000%{transform:translate(110.74px,51.17px) translateY(-50%) scale(0.707);opacity:0.383}98.500%{transform:translate(83.69px,-0.12px) translateY(-50%) scale(0.630);opacity:0.225}99.000%{transform:translate(50.26px,-47.52px) translateY(-50%) scale(0.553);opacity:0.067}99.500%{transform:translate(36.45px,-63.83px) translateY(-50%) scale(0.524);opacity:0.008}100.000%{transform:translate(34.42px,-66.11px) translateY(-50%) scale(0.520);opacity:0.000}}
@keyframes t-lit4{0.00%{opacity:0;transform:translateY(12px)}58.00%{opacity:0;transform:translateY(12px)}60.00%{opacity:1;transform:translateY(0)}77.00%{opacity:1;transform:translateY(0)}79.00%{opacity:0;transform:translateY(-12px)}100.00%{opacity:0;transform:translateY(12px)}}
@keyframes t-ring4{0.00%{border-color:var(--hair);box-shadow:0 0 0 0 var(--burn-soft)}57.00%{border-color:var(--hair);box-shadow:0 0 0 0 var(--burn-soft)}60.00%{border-color:var(--burn);box-shadow:0 0 0 6px var(--burn-soft)}77.00%{border-color:var(--burn);box-shadow:0 0 0 6px var(--burn-soft)}80.00%{border-color:var(--hair);box-shadow:0 0 0 0 var(--burn-soft)}100.00%{border-color:var(--hair);box-shadow:0 0 0 0 var(--burn-soft)}}
@keyframes t-nm4{0.00%{color:var(--ink-soft)}57.00%{color:var(--ink-soft)}60.00%{color:var(--ink)}77.00%{color:var(--ink)}80.00%{color:var(--ink-soft)}100.00%{color:var(--ink-soft)}}
@keyframes t-hi4{0.00%{opacity:.32;transform:scale(.84)}57.00%{opacity:.32;transform:scale(.84)}60.00%{opacity:1;transform:scale(1)}77.00%{opacity:1;transform:scale(1)}80.00%{opacity:.32;transform:scale(.84)}100.00%{opacity:.32;transform:scale(.84)}}
/* ============ ENGAGEMENT / PRICING ============ */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--hair)}
.tier{
padding:clamp(1.75rem,3vw,2.75rem);
border-left:1px solid var(--hair);
display:flex;flex-direction:column;gap:1.5rem;
position:relative;
transition:background .3s;
}
.tier:first-child{border-left:none}
.tier:hover{background:var(--burn-soft)}
.tier-flag{
position:absolute;top:0;right:clamp(1.75rem,3vw,2.75rem);transform:translateY(-50%);
background:var(--burn);color:var(--paper);
font-size:.625rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
padding:.4rem .8rem;border-radius:999px;
}
.tier h3{
font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:700;letter-spacing:-.02em;text-transform:uppercase;
display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
}
.tier-price{font-family:var(--serif);font-style:italic;font-size:1.35rem}
.tier-price span{font-family:var(--grotesk);font-style:normal;font-size:.75rem;color:var(--ink-soft);letter-spacing:.08em}
.tier p.blurb{color:var(--ink-soft);font-size:.925rem;line-height:1.6}
.tier ul{display:grid;gap:.65rem;margin-top:auto}
.tier li{
font-size:.875rem;padding-left:1.4rem;position:relative;line-height:1.45;
}
.tier li::before{content:"→";position:absolute;left:0;color:var(--burn);font-size:.8rem;top:.1em}
.tier .btn{justify-content:center}
@media (max-width:900px){
.tiers{grid-template-columns:1fr}
.tier{border-left:none;border-top:1px solid var(--hair)}
.tier:first-child{border-top:none}
/* straddling the top border works when the tiers sit side by side. Stacked,
that seam belongs to the card above, so the flag comes inside instead. */
.tier-flag{top:1rem;bottom:auto;right:auto;left:clamp(1.75rem,3vw,2.75rem);transform:none}
.tier{padding-top:clamp(3.25rem,6vw,4.25rem)}
}
/* ============ TEAM ============ */
.team{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--hair)}
.member{
padding:clamp(1.75rem,3vw,2.5rem);
border-left:1px solid var(--hair);
display:flex;flex-direction:column;gap:1.1rem;
transition:background .3s;
}
.member:first-child{border-left:none}
.member:hover{background:var(--burn-soft)}
/* The portrait. A photo is set as a background image on the element itself
rather than an ![]()
, so a member with no file yet falls back to their
initials instead of a broken-image icon. Greyscale at rest, full colour on
hover, so headshots taken in four different rooms still read as one set. */
.member-photo{
width:8rem;height:8rem;border-radius:50%;flex:none;
border:1px solid var(--hair-strong);
background:var(--paper-deep) center/cover no-repeat;
display:flex;align-items:center;justify-content:center;
filter:grayscale(1) contrast(1.03);
transition:filter .4s,border-color .3s;
}
.member:hover .member-photo{filter:none;border-color:var(--burn)}
.member-photo span{
font-family:var(--serif);font-style:italic;font-size:2.25rem;letter-spacing:.02em;
color:var(--ink-soft);transition:color .3s;
}
.member:hover .member-photo span{color:var(--burn)}
.member h3{
font-size:clamp(1.2rem,1.8vw,1.5rem);font-weight:700;letter-spacing:-.015em;
text-transform:uppercase;line-height:1.1;
}
.member .role{
font-size:.6875rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
color:var(--burn);
}
.member .bio{color:var(--ink-soft);font-size:.9rem;line-height:1.6;margin-top:auto}
@media (max-width:900px){
.team{grid-template-columns:1fr 1fr}
.member{border-left:none;border-top:1px solid var(--hair)}
.member:nth-child(even){border-left:1px solid var(--hair)}
.member:nth-child(-n+2){border-top:none}
}
@media (max-width:560px){
.team{grid-template-columns:1fr}
.member:nth-child(even){border-left:none}
.member{border-top:1px solid var(--hair)}
.member:first-child{border-top:none}
.member:nth-child(2){border-top:1px solid var(--hair)}
}
/* ============ FAQ ============ */
.faq-list{border-top:1px solid var(--hair)}
.faq-item{border-bottom:1px solid var(--hair)}
.faq-item summary{
display:grid;grid-template-columns:minmax(0,1fr) 3rem;
gap:2rem;align-items:baseline;
padding-block:1.8rem;cursor:pointer;list-style:none;
transition:padding-left .35s cubic-bezier(.2,.6,.2,1);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{padding-left:1rem}
.faq-q{
font-size:clamp(1.15rem,2.2vw,1.7rem);font-weight:700;letter-spacing:-.015em;
text-transform:uppercase;line-height:1.15;
}
.faq-mark{
justify-self:end;align-self:center;
font-family:var(--serif);font-style:italic;font-size:1.6rem;line-height:1;
color:var(--burn);
transition:transform .35s cubic-bezier(.2,.6,.2,1);
}
.faq-item[open] .faq-mark{transform:rotate(45deg)}
.faq-a{
padding:0 0 2rem;color:var(--ink-soft);font-size:.975rem;line-height:1.65;max-width:60ch;
}
.faq-a strong{color:var(--ink);font-weight:600}
@media (max-width:820px){
.faq-item summary{grid-template-columns:1fr 2rem;gap:1rem}
}
/* ============ FOOTER CTA ============ */
.footer{
background:var(--ink);color:var(--paper);overflow:clip;
}
.footer-cta{
padding-block:clamp(5rem,11vw,9rem) clamp(4rem,8vw,7rem);
text-align:left;position:relative;
}
.footer-cta h2{
font-size:clamp(2.6rem,7vw,7rem);font-weight:700;letter-spacing:-.035em;line-height:.95;
text-transform:uppercase;max-width:16ch;
}
.footer-cta h2 em{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;color:var(--burn)}
.footer-cta .btn-row{margin-top:clamp(2rem,4vw,3.5rem);display:flex;gap:1rem;flex-wrap:wrap}
.footer .btn-primary{background:var(--burn);border-color:var(--burn);color:var(--paper)}
.footer .btn-primary:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.footer .btn-ghost{border-color:rgba(250,247,242,.4);color:var(--paper)}
.footer .btn-ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.footer-cols{
display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:2rem;
padding-block:2.5rem;border-top:1px solid rgba(250,247,242,.14);
}
.footer-cols .micro{color:rgba(250,247,242,.45);margin-bottom:1rem;display:block}
.footer-cols a{
display:block;font-size:.9rem;color:rgba(250,247,242,.75);padding-block:.3rem;
transition:color .2s,transform .25s;
}
.footer-cols a:hover{color:var(--burn);transform:translateX(4px)}
.footer-note{font-size:.85rem;color:rgba(250,247,242,.5);max-width:30ch;line-height:1.6}
.footer-social{display:flex;flex-wrap:wrap;gap:1.1rem;margin-top:1.1rem}
.footer-social a{padding-block:0}
.footer-social a:hover{transform:none;color:var(--burn)}
.giant-mark{
font-size:clamp(4.5rem,17.5vw,17rem);
font-weight:700;letter-spacing:-.02em;line-height:.78;text-transform:uppercase;
text-align:center;
color:transparent;
-webkit-text-stroke:1px rgba(250,247,242,.28);
user-select:none;
padding-top:2rem;
transform:translateY(.12em);
transition:color .6s,-webkit-text-stroke-color .6s;
cursor:default;
}
.giant-mark:hover{color:var(--burn);-webkit-text-stroke-color:var(--burn)}
.footer-legal{
display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
padding-block:1.5rem;border-top:1px solid rgba(250,247,242,.14);
font-size:.75rem;color:rgba(250,247,242,.45);letter-spacing:.08em;
}
@media (max-width:1024px){.footer-cols{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:820px){.footer-cols{grid-template-columns:1fr 1fr}}
/* ============ MOBILE NAV ============ */
/* The one-pager could hide its nav below 820px because every link was an
in-page anchor. On a multi-page site that leaves phones with no way to
navigate, so the links collapse into a details panel instead. */
.menu{display:none;position:relative}
.menu>summary{
list-style:none;cursor:pointer;
font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
border:1px solid var(--hair-strong);padding:.85rem 1.15rem;border-radius:999px;
min-height:44px;display:flex;align-items:center;
}
.menu>summary::-webkit-details-marker{display:none}
.menu[open]>summary{background:var(--ink);color:var(--paper)}
.menu-panel{
position:absolute;right:0;top:calc(100% + .9rem);z-index:120;
min-width:15rem;background:var(--paper);
border:1px solid var(--hair-strong);
padding:.5rem 0;
max-height:calc(100dvh - 6rem);overflow-y:auto;
}
.menu-panel a{
display:flex;align-items:center;min-height:44px;padding:.55rem 1.25rem;
font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
transition:background .2s,color .2s;
}
.menu-panel a:hover{background:var(--burn-soft);color:var(--burn)}
/* The panel carries the whole map, so the two category pages need to read as
parents. Done on the href rather than a class, because the menu is copied
into twenty-two files and this way none of them had to change. */
.menu-panel a[href^="/online-marketing/"]:not([href="/online-marketing/"]),
.menu-panel a[href^="/lead-generation/"]:not([href="/lead-generation/"]){
padding-left:2.4rem;color:var(--ink-soft);
}
.menu-panel a[href^="/online-marketing/"]:not([href="/online-marketing/"]):hover,
.menu-panel a[href^="/lead-generation/"]:not([href="/lead-generation/"]):hover{color:var(--burn)}
@media (max-width:1024px){
.nav-links{display:none}
.menu{display:block}
.nav-cta{display:none}
}
/* ============ BREADCRUMBS ============ */
.crumbs{display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline;margin-bottom:1.75rem}
.crumbs a,.crumbs span{
font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;color:var(--ink-soft);
}
.crumbs a:hover{color:var(--burn)}
.crumbs .sep{color:var(--hair-strong);opacity:.5}
.crumbs [aria-current]{color:var(--ink)}
/* ============ PAGE HEAD ============ */
/* The interior-page counterpart to .hero. Same voice, less altitude, so the
home page keeps the biggest type on the site.
Every interior page is the SAME HEIGHT from 660px up, on purpose: a fixed
min-height with the block centred inside it, so moving between service
pages does not shift the fold. It is a min-height in rem rather than vh
because a viewport-relative value stops equalising the moment one page's
copy outgrows it. Below 660px the heads are content-driven, because that is
where /online-marketing/'s figure stacks under its copy.
If a head ever exceeds this, shorten the copy or raise the number here for
all twenty pages, never for one. Longest head today is /brand-messaging/,
at three lines of H1. */
.page-head{
display:flex;align-items:center;
min-height:39rem;
/* vw, not vh: a viewport-height unit here makes the head grow on a tall
window and the one page whose copy is longest stops matching the rest. */
padding-block:clamp(2.5rem,4vw,4rem);
border-bottom:1px solid var(--hair);
}
.page-head > .wrap{width:100%}
@media (min-width:660px){.page-head{min-height:31rem}}
@media (min-width:1024px){.page-head{min-height:36rem}}
/* The H1 was capped at 18ch, which on a 1440 canvas set it in the left third
and left the rest of the head empty. It now runs to the measure the home
hero uses, so the headline is the hero rather than a label above one. */
.page-head h1{
font-size:clamp(2rem,5.9vw,5.25rem);line-height:.98;font-weight:700;
letter-spacing:-.03em;text-transform:uppercase;max-width:15em;
/* deliberately not text-wrap:balance. Balance evens the lines out, which
on a headline this size pulls it back into the left half of the page,
which is the thing this measure exists to stop. */
}
.page-head h1 em{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.02em}
.page-head .lede{
margin-top:clamp(1.5rem,3vw,2.25rem);
font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.55;color:var(--ink-soft);max-width:64ch;
}
.page-head .lede strong{color:var(--ink);font-weight:600}
.page-head .btn-row{margin-top:clamp(1.75rem,3.5vw,2.75rem);display:flex;gap:1rem;flex-wrap:wrap}
/* Wide screens only: the lede keeps a reading measure and the CTAs move out
to the right edge on the same line, so the head is a composed row rather
than a left-hand stack with half the canvas empty beside it. */
@media (min-width:1024px){
.page-head > .wrap{
display:grid;grid-template-columns:minmax(0,1fr) auto;
column-gap:clamp(2rem,4vw,4rem);align-items:end;
}
.page-head > .wrap > *{grid-column:1 / -1}
.page-head > .wrap > .lede{grid-column:1}
.page-head > .wrap > .lede ~ .btn-row{grid-column:2;justify-self:end;margin-top:0}
}
/* No page head carries a figure any more. /online-marketing/ was the last
one, and it made that head 140px taller than the other twenty, which is
the whole reason the shared height had to be set so tall. Its funnel moved
into the section it argues for. If a head ever wants a figure again, it
has to fit the shared height or the set breaks. */
/* ============ ANSWER BLOCK ============ */
/* The first thing an answer engine can lift: question restated, answered
plainly, inside 60 words. One per page, directly under .page-head. */
/* The definitional passage, the one written to be lifted by an answer engine.
It takes the ink band so it reads as the page's statement of record. The
tinted panel it replaced stretched the full wrap while its text stopped at
64ch, leaving a large empty tint to the right. */
.answer-band{
background:var(--ink);color:var(--paper);
padding-block:clamp(3rem,6vw,5rem);
}
.answer-band .micro{color:rgba(250,247,242,.5);display:block}
.answer-band .micro .tick{color:var(--burn)}
.answer{
display:grid;grid-template-columns:minmax(0,12rem) minmax(0,1fr);
gap:clamp(1.5rem,4vw,3.5rem);align-items:start;
margin-top:clamp(1.75rem,3vw,2.5rem);padding-top:clamp(1.75rem,3vw,2.5rem);
border-top:1px solid rgba(250,247,242,.14);
}
.answer-body{max-width:64rem;display:grid;gap:1rem}
.answer-lead{
font-size:clamp(1.35rem,2.1vw,1.9rem);line-height:1.32;
letter-spacing:-.018em;font-weight:500;
}
.answer-lead em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--burn)}
.answer-rest{font-size:clamp(1rem,1.2vw,1.0625rem);line-height:1.65;color:rgba(250,247,242,.7)}
@media (max-width:820px){.answer{grid-template-columns:1fr;gap:1.1rem}}
/* ============ ENQUIRY FORM ============ */
/* Fields are cells in one bordered grid, the same hairline language as the
comparison tables. The previous pass gave every input its own filled box
and the form read as a generic contact widget bolted onto the page. */
.enq{
display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
gap:clamp(2rem,5vw,4.5rem);align-items:start;
}
.enq h2{
font-size:clamp(2rem,4.5vw,4rem);font-weight:700;letter-spacing:-.03em;
text-transform:uppercase;line-height:1;
}
.enq h2 em{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none}
.enq-lede{font-size:clamp(1rem,1.3vw,1.1rem);line-height:1.65;color:var(--ink-soft);max-width:42ch;margin-top:1.25rem}
.enq-small{font-size:.8125rem;line-height:1.6;color:var(--ink-soft);max-width:40ch;margin-top:1.75rem}
.enq-grid{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
border:1px solid var(--hair);background:var(--paper);
}
.cell{
display:flex;flex-direction:column;gap:.5rem;
padding:1.05rem 1.15rem 1.1rem;
border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
transition:background .2s;min-width:0;
}
.cell:nth-of-type(2n){border-right:none}
.cell-wide{grid-column:1 / -1;border-right:none}
.cell:focus-within{background:var(--paper-deep)}
.cell > label,.cell > legend{
font-size:.6875rem;font-weight:600;letter-spacing:.22em;
text-transform:uppercase;color:var(--ink-soft);padding:0;
}
.cell:focus-within > label,.cell:focus-within > legend{color:var(--burn)}
.cell input,.cell textarea{
font-family:inherit;font-size:1rem;line-height:1.5;color:var(--ink);
background:transparent;border:none;padding:0;width:100%;
}
.cell input:focus,.cell textarea:focus{outline:none}
.cell input::placeholder,.cell textarea::placeholder{color:var(--ink-soft);opacity:.55}
.cell textarea{resize:vertical;min-height:5.5rem}
.cell:last-child{border-bottom:none}
fieldset.cell{border-top:none;border-left:none;margin:0}
/* Custom dropdown. A native select's open list is drawn by the browser and
cannot be styled, so the select stays in the DOM for form data and for the
no-JavaScript case, and app.js builds this on top of it. */
.sel{position:relative}
.sel-native{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.sel-btn{
display:flex;align-items:center;justify-content:space-between;gap:1rem;
width:100%;padding:0;background:transparent;border:none;cursor:pointer;
font-family:inherit;font-size:1rem;line-height:1.5;color:var(--ink);text-align:left;
/* the value row is the tap target on a phone, and 24px was not one */
min-height:2.75rem;
}
.sel-btn:focus-visible{outline:2px solid var(--burn);outline-offset:5px}
.sel-arrow{
flex:none;width:9px;height:9px;margin-bottom:3px;
border-right:1.5px solid var(--ink-soft);border-bottom:1.5px solid var(--ink-soft);
transform:rotate(45deg);transition:transform .2s,border-color .2s;
}
.sel[data-open="true"] .sel-arrow{transform:rotate(-135deg);margin-bottom:-3px;border-color:var(--burn)}
.sel-list{
position:absolute;left:-1.15rem;right:-1.15rem;top:calc(100% + 1.1rem);z-index:30;
background:var(--paper);border:1px solid var(--ink);
max-height:15rem;overflow-y:auto;display:none;
}
.sel[data-open="true"] .sel-list{display:block}
.sel-opt{
display:block;width:100%;text-align:left;cursor:pointer;
font-family:inherit;font-size:.95rem;line-height:1.4;color:var(--ink);
background:transparent;border:none;border-bottom:1px solid var(--hair);
padding:.72rem 1.15rem;
}
.sel-opt:last-child{border-bottom:none}
.sel-opt:hover,.sel-opt[data-active="true"]{background:var(--ink);color:var(--paper)}
.enq-foot{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;margin-top:1.5rem}
/* off-screen, not display:none, so bots still find and fill it */
.enq-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.enq-status{font-size:.875rem;line-height:1.6}
.enq-status:empty{display:none}
.enq-status[data-state="error"]{color:var(--burn)}
.enq-status[data-state="sent"]{color:var(--ink);font-weight:600}
@media (max-width:900px){.enq{grid-template-columns:1fr;gap:2rem}}
@media (max-width:560px){
.enq-grid{grid-template-columns:1fr}
.cell{border-right:none}
}
/* ============ ENQUIRY MODAL ============ */
/* Home page only. The same .enq-form, .enq-grid and .cell components as the
inline form on the other nineteen pages, lifted into a native