*{box-sizing:border-box}
html,body{margin:0}
body{
background:var(--band-a);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
-webkit-font-smoothing:antialiased;
color:var(--body);
}
:root{
--mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
/* =================================================================
THEME TOKENS — every color the page uses routes through these.
Switching data-theme swaps the whole visual system.
================================================================== */
/* 1 · Ink & Amber (dark, default) */
:root,
:root[data-theme="ink-amber"]{
--band-a:#0B0F14; --band-b:#10161D; --card:#151E28; --card-2:#1B2734;
--ink:#F2F6F8; --body:#C3CCD4; --muted:#8C9BAA; --line:#243240;
--accent:#D3922E; --on-accent:#150F06; --accent-soft:rgba(211,146,46,.14);
/* a focus ring has to be seen against what sits next to it, which on a
dark ground the accent already manages. Same value, named apart so the
light theme can move one without dragging the other. */
--focus:#D3922E;
--sig-green:#4C9E82; --sig-amber:#D3922E; --sig-red:#C0503C;
--shadow:rgba(0,0,0,.5);
color-scheme:dark;
}
/* 2 · Paper & Amber (light) */
:root[data-theme="paper-amber"]{
/* band-a is true white and band-b is warm paper, so the section rotation
alternates white / beige instead of beige / beige. Cards stay white and
are read by their border on white grounds, as a lifted panel on beige. */
--band-a:#FFFFFF; --band-b:#EBE8E1; --card:#FFFFFF; --card-2:#F5F2EA;
--ink:#16191D; --body:#3E454C; --muted:#626972; --line:#DCD7CD;
/* One yellow, the logo's, on everything the eye reads as accent - fills,
chips, rules, diagram strokes AND type. An earlier pass held type at a
darker gold for contrast; it measured better and looked brown, which is
not what this brand's yellow is. Brand wins, deliberately: accent type
runs about 1.5:1 on band-b, so it is a highlight, never load-bearing -
anything a reader must not miss belongs in --ink. */
--accent:#FAAF40; --on-accent:#150F06; --accent-soft:rgba(250,175,64,.18);
/* the one exception. A focus ring is a keyboard user's only cue to where
they are, so it keeps a value that clears 3:1 against white. */
--focus:#A8690C;
--sig-green:#2E7D5B; --sig-amber:#FAAF40; --sig-red:#B4472F;
--shadow:rgba(40,34,22,.14);
color-scheme:light;
}
/* ===================== PAGE SCAFFOLD ===================== */
.wrap{max-width:1120px; margin:0 auto; padding:0 clamp(20px,4vw,44px)}
section{background:var(--band-a); scroll-margin-top:76px}
.band-b{background:var(--band-b)}
html{scroll-behavior:smooth}
/* scroll-reveal — only hides content when JS is present (progressive enhancement) */
.js .reveal{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1; transform:none}
h1,h2,h3{color:var(--ink); text-wrap:balance; margin:0; letter-spacing:-.02em; line-height:1.06}
h1{font-size:clamp(34px,5.4vw,60px); font-weight:680}
h2{font-size:clamp(25px,3.6vw,40px); font-weight:660}
h3{font-size:19px; font-weight:640; letter-spacing:-.01em}
p{margin:0; line-height:1.6}
.eyebrow{
font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
color:var(--accent); display:inline-flex; align-items:center; gap:9px;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--accent); opacity:.7}
/* .eyebrow uppercases, which turned the brand into EWELLBORE. This lets a
single character opt out so it reads eWELLBORE. */
/* A lowercase glyph in a monospace cell leaves most of the cell empty, which
opened a 9px hole between the e and the W where every other letter pair sits
at 0. The negative margin takes that cell back. */
.lower{text-transform:lowercase; margin-right:-.82em}
.lede{font-size:clamp(15px,1.7vw,17.5px); color:var(--body); max-width:56ch}
.lede strong{color:var(--ink); font-weight:600}
/* buttons */
.btn{
font:inherit; font-size:14px; font-weight:560; cursor:pointer; border-radius:8px;
padding:12px 20px; border:1px solid transparent; display:inline-flex; align-items:center; gap:8px;
text-decoration:none; transition:transform .12s, background .15s, border-color .15s, color .15s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent)}
.btn:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.arrow{transition:transform .15s}
.btn:hover .arrow{transform:translateX(3px)}
/* Keyboard users otherwise tab the whole nav on every page before reaching
content. Off-screen until focused, then it lands in the corner. */
.skip{position:absolute; left:-9999px; top:0; z-index:60;
font-family:var(--mono); font-size:12px; letter-spacing:.06em;
background:var(--card); color:var(--ink); border:1px solid var(--accent);
border-radius:0 0 8px 0; padding:10px 16px; text-decoration:none}
.skip:focus{left:0}
/* ===================== ANNOUNCEMENT ===================== */
.announce{background:var(--card); border-bottom:1px solid var(--line)}
.announce summary{
list-style:none; cursor:pointer;
max-width:1120px; margin:0 auto; padding:10px clamp(20px,4vw,44px);
display:flex; align-items:center; gap:12px;
}
.announce summary::-webkit-details-marker{display:none}
.announce summary:hover .announce-lead{color:var(--ink)}
.announce summary:focus-visible{outline:2px solid var(--focus); outline-offset:-2px}
.announce-tag{
font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
color:var(--accent); background:var(--accent-soft);
border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
border-radius:99px; padding:3px 9px; flex:none;
}
.announce-lead{font-size:13.5px; color:var(--body); transition:color .15s; text-wrap:pretty}
.announce-chev{width:16px; height:16px; flex:none; margin-left:auto; color:var(--muted);
transition:transform .22s ease}
.announce[open] .announce-chev{transform:rotate(180deg)}
.announce-body{
max-width:1120px; margin:0 auto; padding:0 clamp(20px,4vw,44px) 14px;
font-size:14px; line-height:1.6; color:var(--body); max-width:min(1120px,78ch);
}
@media (max-width:860px){
.announce summary{align-items:flex-start; gap:10px}
.announce-chev{margin-top:2px}
}
/* ===================== NAV ===================== */
.nav{position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--band-a) 86%, transparent);
backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:inline-flex; align-items:center; gap:12px; text-decoration:none; transition:opacity .15s}
.brand .logo{display:block; height:34px; width:auto}
/* the supplied artwork ships in two fixed colourways, so swap the file per theme
rather than trying to recolour it */
.brand .logo-on-light{display:none}
:root[data-theme="paper-amber"] .brand .logo-on-dark{display:none}
:root[data-theme="paper-amber"] .brand .logo-on-light{display:block}
a.brand:hover{opacity:.78}
a.brand:focus-visible{outline:2px solid var(--focus); outline-offset:4px; border-radius:4px}
/* back-to-top — appears once the first screen is behind you */
.to-top{
position:fixed; right:clamp(16px,3vw,32px); bottom:clamp(16px,3vw,32px); z-index:40;
width:44px; height:44px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
background:color-mix(in srgb, var(--card) 88%, transparent); color:var(--ink);
border:1px solid var(--line); box-shadow:0 12px 30px -14px var(--shadow); backdrop-filter:blur(8px);
opacity:0; visibility:hidden; transform:translateY(8px);
transition:opacity .25s ease, transform .25s ease, visibility .25s, color .15s, border-color .15s;
}
.to-top.show{opacity:1; visibility:visible; transform:none}
.to-top:hover{color:var(--accent); border-color:var(--accent)}
.to-top:focus-visible{outline:2px solid var(--focus); outline-offset:3px}
.to-top svg{width:19px; height:19px}
.navlinks{display:flex; gap:28px}
.navlinks a{color:var(--muted); text-decoration:none; font-size:13.5px; transition:color .15s}
.navlinks a:hover{color:var(--ink)}
.nav .btn{padding:9px 16px; font-size:13px}
.nav-actions{display:flex; align-items:center; gap:clamp(8px,1.4vw,14px)}
.theme-toggle{
width:36px; height:36px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
background:transparent; border:1px solid var(--line); color:var(--muted); padding:0;
transition:color .15s, border-color .15s, background .15s;
}
.theme-toggle:hover{color:var(--accent); border-color:var(--accent)}
.theme-toggle:focus-visible{outline:2px solid var(--focus); outline-offset:3px}
.theme-toggle svg{width:17px; height:17px}
/* the icon shows the theme you'd get, not the one you're in */
.theme-toggle .i-moon{display:none}
:root[data-theme="paper-amber"] .theme-toggle .i-sun{display:none}
:root[data-theme="paper-amber"] .theme-toggle .i-moon{display:block}
/* ===================== HERO ===================== */
.hero .wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,4vw,60px);
align-items:center; padding-top:clamp(46px,6vw,84px); padding-bottom:clamp(46px,6vw,84px)}
.hero-copy{display:flex; flex-direction:column; gap:22px}
.hero h2{margin-top:4px}
/* three-beat lede: gap sits tighter than .hero-copy's so it reads as one block */
/* the positioning line - gold and a step up in size from the copy around it */
/* 19px+ at 700 is the largest the type system goes, and on paper that size
is doing the work the yellow cannot - see the palette note. Treat it as a
highlight; the sentence still has to parse without the colour. */
.who{
font-size:clamp(19px,2.1vw,22px); font-weight:700; line-height:1.45;
color:var(--accent); max-width:52ch; letter-spacing:-.005em;
}
/* the highlight sits in accent, so its emphasis has to break the other way -
ink is the only colour that stands out against it */
.who strong{color:var(--ink)}
/* a .who line that carries the statement on its own, in ink rather than accent */
.who-ink{color:var(--ink)}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:2px}
.trust{font-size:12.5px; color:var(--muted); border-top:1px solid var(--line); padding-top:16px; max-width:46ch; line-height:1.55}
/* signature diagram — casing ovality under unequal earth stress */
.diagram{
background:var(--card); border:1px solid var(--line); border-radius:16px; margin:0;
padding:22px 22px 18px; box-shadow:0 24px 60px -30px var(--shadow); position:relative; overflow:hidden;
}
.diagram::before{content:""; position:absolute; inset:0; background:
radial-gradient(120% 80% at 50% -10%, var(--accent-soft), transparent 60%); pointer-events:none}
.dgm-head{display:flex; flex-direction:column; gap:4px; margin-bottom:6px; position:relative; text-align:center}
/* no text-transform: the title is deliberately mixed case ("WellBore"), and
uppercasing it would flatten that back to WELLBORE */
.dgm-title{font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.03em; color:var(--ink); text-wrap:balance}
/* Both lines below the title are meant to hold one line. The caption column
is only ~368px at 1440 and narrows to ~283px on a small laptop, so the size
tracks the viewport rather than being fixed. No white-space:nowrap - if the
column gets narrower than the floor allows, wrapping is better than
overflowing. */
.dgm-sub{font-family:var(--mono); font-size:clamp(7px,0.6vw,8.4px); color:var(--muted);
font-variant-numeric:tabular-nums; letter-spacing:-.005em}
/* the readout is illustrative, and the chart has to say so */
/* tracking cut from .08em and the padding tightened: that recovers about 24px
of width, which is most of what this line needed to fit, so it barely has to
shrink at all */
.dgm-tag{
font-family:var(--mono); font-size:clamp(7px,0.62vw,8.8px); letter-spacing:.04em;
text-transform:uppercase; color:var(--muted); border:1px solid var(--line);
border-radius:99px; padding:3px 8px; margin-top:5px; align-self:center; opacity:.9;
}
.dgm-stage{position:relative; width:100%; margin:2px auto 0; cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none}
.dgm-stage:active{cursor:grabbing}
.dgm-stage svg{width:100%; height:auto; display:block; overflow:visible}
/* rings */
/* was --line, the faintest token in the palette (~1.4:1), which is why the
hole/cement boundary was hard to make out. --body reads in both themes. */
/* the cement sheath reads as a band of a different value, not a texture -
grey rather than accent so steel stays the only amber material */
.cement{fill:var(--muted); opacity:.18}
.ring-hole{fill:none; stroke:var(--body); stroke-width:1.6; stroke-dasharray:4 5; opacity:.9}
.ring-assumed{fill:none; stroke:var(--muted); stroke-width:1.4; stroke-dasharray:5 5; opacity:.85}
.oval-fill{fill:var(--accent-soft)}
.oval-out{fill:none; stroke:var(--accent); stroke-width:2.4}
.oval-in{fill:none; stroke:var(--accent); stroke-width:2; opacity:.5}
.diagram{--state:var(--sig-amber)} /* live integrity zone colour */
#ovalOut{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--state) 45%, transparent))}
.cross{stroke:var(--muted); stroke-width:1}
.arrow{stroke:var(--body); stroke-width:1.8; fill:none; stroke-linecap:round}
.arrow-h{fill:var(--body)}
.s-label{fill:var(--muted); font-family:var(--mono); font-size:12px; letter-spacing:.05em}
@keyframes press-v{from{opacity:0}to{opacity:1}}
.arrows{animation:press-v .7s ease .2s both}
.actual{transform-box:fill-box; transform-origin:center}
@keyframes settle{from{transform:scaleY(1.14)}to{transform:scaleY(1)}}
.diagram.intro .actual{animation:settle .8s cubic-bezier(.4,0,.2,1)}
/* critical-state alarm pulse */
@keyframes breach{0%,100%{opacity:1}50%{opacity:.45}}
.diagram.is-critical #ovalOut{animation:breach 1.1s ease-in-out infinite}
.diagram.is-critical::after{content:""; position:absolute; inset:0; pointer-events:none; border-radius:16px;
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sig-red) 55%,transparent),
inset 0 0 40px -8px color-mix(in srgb,var(--sig-red) 40%,transparent);
animation:breach 1.1s ease-in-out infinite}
/* interactive controls */
.dgm-controls{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:14px}
.ctrl{display:flex; flex-direction:column; gap:7px}
.ctrl-top{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.ctrl-top label{font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:none; color:var(--muted)}
.ctrl-top .val{font-family:var(--mono); font-size:11px; color:var(--ink); font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:4px; padding:0; margin:6px 0;
background:var(--line); border:none; border-radius:99px; accent-color:var(--accent); cursor:pointer}
input[type=range]:focus{outline:none}
input[type=range]:focus-visible{outline:2px solid var(--focus); outline-offset:4px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%;
background:var(--accent); border:2px solid var(--card); box-shadow:0 1px 5px -1px var(--shadow); cursor:grab}
input[type=range]::-webkit-slider-thumb:active{cursor:grabbing; transform:scale(1.12)}
input[type=range]::-moz-range-thumb{width:15px; height:15px; border-radius:50%; background:var(--accent); border:2px solid var(--card); cursor:grab}
.dgm-hint{position:absolute; left:12px; bottom:10px; pointer-events:none;
font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
background:color-mix(in srgb,var(--card) 82%,transparent); border:1px solid var(--line); border-radius:99px;
padding:5px 12px; display:inline-flex; align-items:center; gap:7px; transition:opacity .4s, transform .4s; backdrop-filter:blur(3px)}
.dgm-hint::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}
.dgm-hint.hidden{opacity:0; transform:translateY(6px)}
.dgm-reset{margin-left:auto; font:inherit; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
color:var(--muted); background:transparent; border:1px solid var(--line); border-radius:99px; padding:5px 12px; cursor:pointer; transition:color .15s, border-color .15s}
.dgm-reset:hover{color:var(--ink); border-color:var(--accent)}
.dgm-reset:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
/* ISF readout badge */
.isf{position:absolute; right:8px; bottom:6px; background:var(--card-2); border:1px solid var(--line);
border-radius:10px; padding:11px 14px 12px; min-width:132px; box-shadow:0 10px 24px -16px var(--shadow)}
.isf-l{font-family:var(--mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.isf-n{display:block; font-family:var(--mono); font-size:34px; font-weight:600; color:var(--state);
font-variant-numeric:tabular-nums; letter-spacing:-.02em; line-height:1; margin:3px 0 9px; transition:color .25s}
.ramp{display:flex; gap:3px; margin-bottom:7px}
.ramp i{height:5px; flex:1; border-radius:2px; transition:opacity .2s, transform .2s}
.ramp .r1{background:var(--sig-green)}
.ramp .r2{background:var(--sig-amber)}
.ramp .r3{background:var(--sig-red)}
.ramp i.dim{opacity:.22}
.ramp i.on{transform:scaleY(1.5); box-shadow:0 0 0 1.5px color-mix(in srgb,var(--state) 35%,transparent)}
.isf-note{font-family:var(--mono); font-size:10px; letter-spacing:.05em; color:var(--state); transition:color .25s}
.legend{display:flex; gap:20px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); position:relative}
/* ===================== STAT BAND ===================== */
.stats{padding:clamp(34px,4vw,50px) 0}
/* 40ch suited a headline alone; the block now carries body copy, so the
wrapper widens and the headline keeps its own measure to hold its break */
.stats-head{max-width:62ch; margin-bottom:clamp(26px,3vw,36px); display:flex; flex-direction:column; gap:14px}
.stats-head h2{font-size:clamp(22px,2.8vw,31px); max-width:22ch}
.stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,40px)}
.stat b{display:block; font-family:var(--mono); font-size:clamp(30px,4vw,46px); font-weight:600; color:var(--accent);
font-variant-numeric:tabular-nums; letter-spacing:-.02em; line-height:1}
.stat p{margin-top:10px; font-size:13.5px; color:var(--muted); max-width:30ch; line-height:1.5}
/* emphasis reads by colour on this page, not weight alone: at 13.5px a bold
run in --muted is nearly indistinguishable from the text around it. Same
treatment as .lede strong and .twins-pull b. */
.stat p strong{color:var(--ink); font-weight:600}
.stats-note{margin-top:26px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); opacity:.8}
/* ===================== SECTION SHELL ===================== */
.sec{padding:clamp(56px,7vw,96px) 0}
/* separates two same-band sections that would otherwise run together */
.ruled{border-top:1px solid var(--line)}
.sec-head{max-width:60ch; display:flex; flex-direction:column; gap:16px; margin-bottom:40px}
/* opening panel: copy holds a left column so the photo owns the right */
.sec-head.lead{max-width:600px}
/* the twins intro runs four sentences; 56ch left it pinched beside the
full-width card grid it introduces */
.sec-head.wide{max-width:none}
.sec-head.wide .lede{max-width:820px}
.lead-panel h1{font-size:clamp(30px,4.2vw,46px)}
/* The photo panel keeps the warm paper ground. Its scrim is mixed from
--band-a, so the white band-a used by the rest of the rotation would veil
the photo in white and wash it out. Overriding the token here moves both
the panel's background and its ::after scrim together. */
:root[data-theme="paper-amber"] .lead-panel{--band-a:#F4F2ED}
/* ===================== LEAD PANEL BACKDROP =====================
Photo runs the full height of the opening panel, ending at the
hairline above the KPI panel. The scrim is mixed from the theme's
own background token, so it veils dark in dark themes and light in
light ones — the text keeps its contrast in all seven palettes. */
.lead-panel{position:relative; isolation:isolate; overflow:hidden}
/* the photo's own feathered alpha does the blending, so it is placed
rather than tiled across the panel — anchored right, off the copy */
.lead-panel::before{
content:""; position:absolute; inset:0; z-index:0;
/* cover + right top: the photo stays full-bleed against the top and right
edges at every viewport width. Neither axis is sized off a percentage,
so it can never scale down out of frame the way the earlier width-based
96% did - at 900px that rendered 569px tall inside a 1062px panel. */
background:url("../img/offshore-wellsite.webp") right top/cover no-repeat;
}
/* only guards the copy column where it meets the photo's soft edge */
.lead-panel::after{
content:""; position:absolute; inset:0; z-index:1;
background:
/* guards the copy column */
linear-gradient(to right,
color-mix(in srgb, var(--band-a) 86%, transparent) 0%,
color-mix(in srgb, var(--band-a) 76%, transparent) 44%,
color-mix(in srgb, var(--band-a) 40%, transparent) 62%,
transparent 76%),
/* guards the transition line, which runs wider than that column */
linear-gradient(to top,
color-mix(in srgb, var(--band-a) 88%, transparent) 0%,
color-mix(in srgb, var(--band-a) 70%, transparent) 18%,
transparent 32%);
}
.lead-panel > .wrap{position:relative; z-index:2}
/* cards go frosted so the photo carries through the middle of the panel */
.lead-panel .loop{
background:color-mix(in srgb, var(--card) 76%, transparent);
backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
/* light palette needs a more solid card: its body text is mid-tone, so the
photo showing through the right-hand cards drops it under AA */
:root[data-theme="paper-amber"] .lead-panel .loop{
background:color-mix(in srgb, var(--card) 92%, transparent);
}
.lead-panel .lstep:hover{background:color-mix(in srgb, var(--card-2) 80%, transparent)}
/* the reactive loop — how integrity is handled today */
.loop{
list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr);
border:1px solid var(--line); border-radius:14px; background:var(--card); overflow:hidden;
}
.lstep{
padding:24px 22px 26px; border-right:1px solid var(--line); position:relative;
display:flex; flex-direction:column; gap:9px; transition:background .24s ease;
}
.lstep:last-child{border-right:0}
.lstep:hover{background:var(--card-2)}
/* chevron sitting on the divider — the loop advancing, step to step */
.lstep:not(:last-child)::after{
content:""; position:absolute; right:-5px; top:50%; margin-top:-5px; width:9px; height:9px;
border-top:1px solid var(--line); border-right:1px solid var(--line); transform:rotate(45deg);
}
.ln{font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--muted); font-variant-numeric:tabular-nums}
/* h1,h2,h3 share line-height 1.06 — right for a 60px display heading, far too
tight for a 16px card title that wraps. Leading is set locally instead.
min-height reserves two lines and must track that leading: 2 x 1.3 = 2.6em */
.lstep h3{font-size:17px; line-height:1.3; min-height:2.6em; transition:color .24s ease}
.lstep:hover h3{color:var(--accent)}
.lstep p{font-size:14.5px; color:var(--muted); line-height:1.55}
/* keep both the scroll-reveal transition and the hover background fade */
.js .reveal.lstep{transition:opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1), background .24s ease}
.loop-back{
display:flex; align-items:center; gap:10px; margin-top:14px;
font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.loop-back i{font-style:normal; font-size:14px; color:var(--accent); line-height:1}
.loop-back u{text-decoration:none; flex:1; height:1px; background:var(--line)}
/* the pivot — question in ink, answer in accent */
.turn{margin-top:34px; border-left:3px solid var(--accent); padding-left:22px;
display:flex; flex-direction:column; gap:10px}
.turn .q{font-size:clamp(19px,2.4vw,26px); font-weight:560; color:var(--ink);
letter-spacing:-.01em; line-height:1.28; text-wrap:balance; max-width:60ch}
.turn .a{font-size:clamp(16px,1.9vw,20px); font-weight:620; color:var(--accent);
letter-spacing:-.01em; line-height:1.3}
/* opt a closing statement into the accent. 700 and a 19px clamp keep it as
large as the type system allows, which is what carries it on paper where
the yellow itself cannot. */
.turn .q.accent{color:var(--accent); font-weight:700}
/* the light palette puts mid-tone body text over a dark photo,
so it needs a heavier veil than the dark one to hold contrast */
:root[data-theme="paper-amber"] .lead-panel::after{
background:
linear-gradient(to right,
color-mix(in srgb, var(--band-a) 95%, transparent) 0%,
color-mix(in srgb, var(--band-a) 90%, transparent) 46%,
color-mix(in srgb, var(--band-a) 58%, transparent) 66%,
transparent 82%),
linear-gradient(to top,
color-mix(in srgb, var(--band-a) 99%, transparent) 0%,
color-mix(in srgb, var(--band-a) 95%, transparent) 22%,
transparent 42%);
}
/* failure-mode table */
.table{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--card)}
.trow{display:grid; grid-template-columns:1.1fr 1.3fr 1.5fr .9fr; align-items:center; gap:16px;
padding:17px 22px; border-bottom:1px solid var(--line)}
.trow:last-child{border-bottom:0}
.thead{background:var(--card-2)}
.thead span{font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.trow .mode{color:var(--ink); font-weight:600; font-size:15px}
.trow .metric{font-family:var(--mono); font-size:13px; color:var(--body); font-variant-numeric:tabular-nums}
.trow .method{font-size:13px; color:var(--muted)}
.status{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--sig-green)}
.status i{width:7px;height:7px;border-radius:50%; background:var(--sig-green)}
.trow.hot{background:var(--accent-soft); border-top:1px solid var(--accent); border-bottom:1px solid var(--accent)}
.trow.hot .mode{color:var(--accent)}
.trow.hot .status{color:var(--accent)}
.trow.hot .status i{background:var(--accent); border-radius:0; transform:rotate(45deg)}
/* twins */
.twins{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.twin{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:26px; display:flex; flex-direction:column; gap:16px;
position:relative; transition:transform .28s cubic-bezier(.2,.7,.2,1), border-color .28s ease, box-shadow .28s ease}
.twin::before{content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none; opacity:0;
background:radial-gradient(120% 90% at 50% 0%, var(--accent-soft), transparent 55%); transition:opacity .28s ease}
/* higher specificity so hover lift beats the reveal's transform:none */
.js .twins .twin:hover{transform:translateY(-5px); border-color:color-mix(in srgb,var(--accent) 50%, var(--line)); box-shadow:0 22px 44px -26px var(--shadow)}
.twins .twin:hover::before{opacity:1}
.twins .twin:hover h3{color:var(--accent)}
.twins .twin:hover .badge{background:color-mix(in srgb,var(--accent) 20%, transparent); border-color:var(--accent)}
.twin h3,.badge{transition:color .25s ease, background .25s ease, border-color .25s ease}
.twin li svg{transition:transform .25s ease}
.twins .twin:hover li svg{transform:scale(1.15)}
.badge{align-self:flex-start; font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
color:var(--accent); background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
padding:5px 10px; border-radius:6px}
.twin p{font-size:14px; color:var(--body)}
.twin ul{list-style:none; margin:2px 0 0; padding:0; display:flex; flex-direction:column; gap:10px}
.jip-list{list-style:none; margin:0 0 34px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px 24px}
.callout + .hero-cta,
.turn + .hero-cta{margin-top:24px}
.twin li,
.jip-list li{display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--muted)}
.twin li svg,
.jip-list li svg{width:15px;height:15px;color:var(--accent); flex:none; margin-top:1px}
/* the section's closing statement. mono at 13px read as a caption under two
large cards, so it takes the accent anchor the .turn pivots use and steps
up a size. 820px still matches the widened section intro above the cards */
.twins-pull{
margin-top:38px; max-width:820px;
border-left:3px solid var(--accent); padding-left:22px;
font-size:clamp(15.5px,1.8vw,19px); line-height:1.55;
color:var(--body); letter-spacing:-.005em; text-wrap:pretty;
}
.twins-pull b{color:var(--ink); font-weight:600}
/* ===================== NAVIGATION-ANALOGY TABLE (JIP) =====================
A real so the row/column relationships survive a screen reader.
The columns cannot compress below ~700px without the values wrapping to
unreadable slivers, so under that width the table scrolls sideways and the
"Compare" column stays pinned to keep every value labelled.
Borders are one uniform grid: the table draws the outer box and every cell
draws only its right and bottom edge, so no two adjacent cells can stack
their borders into a double-thick line. */
.evo{margin:0 0 42px}
.evo-title{font-size:clamp(21px,2.6vw,28px); font-weight:660; letter-spacing:-.018em; margin-bottom:11px}
.evo-copy{font-size:clamp(15px,1.7vw,17.5px); color:var(--body); line-height:1.6; max-width:66ch; text-wrap:pretty}
.evo-hint{display:none; font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
color:var(--muted); margin-top:20px}
.evo-hint span{color:var(--accent)}
.evo-scroll{margin-top:26px; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch}
.evo-scroll:focus-visible{outline:2px solid var(--focus); outline-offset:4px; border-radius:12px}
/* The outer boundary is deliberately stronger than the internal grid. At plain
--line it measured 1.43:1 on white and 1.47:1 on ink - drawn, but far under
the 3:1 a boundary needs to read, so the left edge in particular looked
absent. Mixing toward --muted puts it at 3.2:1 / 4.1:1 while the internal
dividers stay quiet. */
.evo-table{width:100%; min-width:700px; table-layout:fixed; border-collapse:separate; border-spacing:0;
border:1px solid color-mix(in srgb, var(--line) 35%, var(--muted));
border-radius:12px}
/* wide enough for the longest label, "3rd of 3 Ms: Maintain", on one line */
.evo-c-label{width:236px}
.evo-table th,.evo-table td{padding:13px 16px; text-align:center; vertical-align:middle;
border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
/* the table's own border supplies the outer right and bottom edges */
.evo-table tr > :last-child{border-right:0}
.evo-table tbody tr:last-child > *{border-bottom:0}
/* corner cells are rounded too, or their backgrounds square off the table's
rounded corners. 11px = the table's 12px less its 1px border. */
.evo-table thead th:first-child{border-top-left-radius:11px}
.evo-table thead th:last-child{border-top-right-radius:11px}
.evo-table tbody tr:last-child th{border-bottom-left-radius:11px}
.evo-table tbody tr:last-child td:last-child{border-bottom-right-radius:11px}
/* column headers — the three cards that sit above the rules */
.evo-table .evo-h{padding:16px; background:var(--card-2)}
.evo-hrow{display:flex; align-items:center; justify-content:center; gap:11px}
.evo-ico{width:26px; height:26px; flex:none; color:var(--muted)}
.evo-name{font-size:clamp(14.5px,1.5vw,17px); font-weight:640; letter-spacing:-.01em;
color:var(--ink); line-height:1.25; text-wrap:balance}
/* WellGrit is the end state the section argues for, so it carries the accent
rather than the blue of the source deck — the page has no blue to borrow */
.evo-table .evo-h.is-live{background:var(--accent-soft)}
.evo-table .evo-h.is-live .evo-ico,
.evo-table .evo-h.is-live .evo-name{color:var(--accent)}
/* pinned label column */
.evo-table .evo-corner{position:sticky; left:0; z-index:3; text-align:center; vertical-align:middle;
padding:16px; background:var(--card)}
/* the corner label is a peer of the column headers, so it takes their
treatment rather than the mono eyebrow it used to carry */
.evo-table .evo-corner span{font-size:clamp(14.5px,1.5vw,17px); font-weight:640;
letter-spacing:-.01em; color:var(--ink); line-height:1.25}
.evo-table tbody th{position:sticky; left:0; z-index:3; text-align:left; background:var(--band-a);
font-size:13.5px; font-weight:580; color:var(--ink)}
.evo-table tbody th > span{display:flex; align-items:center; gap:10px}
.evo-rico{width:16px; height:16px; flex:none; color:var(--accent)}
/* body rules — a single horizontal grid, faint verticals between the values */
.evo-table tbody td{font-size:13.5px; color:var(--body); line-height:1.45; text-wrap:pretty;
transition:background .2s ease}
.evo-table tbody th{transition:background .2s ease}
/* WellGrit reads as one continuous highlighted band running from its header
card down through every row — the tint carries the emphasis, so the values
stay in ink and remain as legible as the two columns beside them */
.evo-table tbody td.is-live{color:var(--ink); font-weight:580; background:var(--accent-soft)}
/* row hover mirrors the timeline steps */
.evo-table tbody tr:hover td{background:var(--accent-soft)}
.evo-table tbody tr:hover th{background:color-mix(in srgb,var(--accent) 12%,var(--band-a))}
/* the band is already tinted, so its hover has to step up rather than match */
.evo-table tbody tr:hover td.is-live{background:color-mix(in srgb,var(--accent) 22%,transparent)}
/* closes the analogy the chart itself no longer carries, now that WellDone
is not one of its columns */
.evo-foot{display:flex; align-items:center; gap:13px; margin-top:16px;
padding:14px 18px; background:var(--card); border:1px solid var(--line);
border-left:2px solid var(--accent); border-radius:12px;
font-size:14.5px; color:var(--body)}
.evo-foot svg{width:21px; height:21px; flex:none; color:var(--accent)}
.evo-foot b{color:var(--accent); font-weight:640}
.evo-foot b.alt{color:var(--ink); font-weight:640}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
/* timeline */
.timeline{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-bottom:52px; border-top:1px solid var(--line)}
.tstep{padding:22px 20px 14px; border-right:1px solid var(--line); position:relative; cursor:default;
transition:background .22s ease}
.tstep:last-child{border-right:0}
.tstep::before{content:""; position:absolute; top:-5px; left:20px; width:9px;height:9px;border-radius:50%; background:var(--muted);
transition:background .22s ease, box-shadow .22s ease, transform .22s ease}
/* accent bar that grows along the top rule on hover */
.tstep::after{content:""; position:absolute; top:-1px; left:0; height:2px; width:0; background:var(--accent);
transition:width .28s cubic-bezier(.3,.7,.2,1)}
/* The current milestone is marked by its dot alone. Colouring its year and
label amber as well pre-empted the hover state - every other step answers a
hover by going white to amber, while this one was already there and looked
inert. The dot carries the marker without spending the hover colour. */
.tstep.now::before{background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
/* era label above the year. min-height still holds two lines' worth of space
so a label that wraps at a narrow width cannot drop its year out of line
with the other three. */
.tstep .tlabel{font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:.16em;
text-transform:uppercase; color:var(--muted); margin-bottom:7px;
min-height:1.4em; line-height:1.4; text-wrap:balance; transition:color .22s ease}
.tstep .yr{font-family:var(--mono); font-size:14px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; transition:color .22s ease}
.tstep p{margin-top:8px; font-size:13px; color:var(--muted); line-height:1.5; transition:color .22s ease}
.tstep:hover{background:var(--accent-soft)}
.tstep:hover::after{width:100%}
.tstep:hover::before{background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); transform:scale(1.15)}
.tstep:hover .yr{color:var(--accent)}
.tstep:hover p{color:var(--body)}
/* keep both the scroll-reveal transition and the hover background fade */
.js .reveal.tstep{transition:opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1), background .22s ease}
.feats{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; border-top:1px solid var(--line); padding-top:32px}
.feat h3{margin-bottom:8px}
.feat p{font-size:13.5px; color:var(--muted); max-width:34ch}
/* emphasis reads by colour on this page, not weight alone */
.feat p strong{color:var(--ink); font-weight:600}
.feats + .hero-cta{margin-top:32px}
/* the service titles run to different line counts, which started each card's
body at a different height. Reserving two lines lines the bodies up.
Scoped to #services so the single-line titles in Company are unaffected. */
#services .feat h3{min-height:2.12em}
/* DESIGN, INTEGRITY and TRAINING are the three words a scanner should catch,
so they carry the accent while the rest of the title stays in ink */
#services .feat h3 .hl{color:var(--accent)}
/* contact */
.contact .wrap{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,64px); align-items:start}
.contact-meta{display:flex; flex-direction:column; gap:22px}
.jip,
.callout{
background:var(--card); border:1px solid var(--line); border-left:2px solid var(--accent);
border-radius:12px; padding:18px 20px 20px; display:flex; flex-direction:column; gap:10px;
}
.jip p,
.callout p{font-size:13.5px; color:var(--body); line-height:1.6}
/* inside a twin card the aside sits on the card, so lift it off card-2 */
.twin .callout{background:var(--card-2)}
.jip .jip-note{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--muted)}
form{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:clamp(22px,3vw,32px);
margin-top:clamp(16px,3vw,36px); display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field{display:flex; flex-direction:column; gap:7px}
.field.full{grid-column:1/-1}
label{font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
input,select,textarea{
font:inherit; font-size:14px; color:var(--ink); background:var(--band-a);
border:1px solid var(--line); border-radius:8px; padding:11px 13px; width:100%;
transition:border-color .15s, box-shadow .15s;
}
textarea{resize:vertical; min-height:92px}
input::placeholder,textarea::placeholder{color:var(--muted); opacity:.7}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--focus); box-shadow:0 0 0 3px var(--accent-soft)}
form .btn-primary{grid-column:1/-1; justify-content:center; padding:13px}
.form-note{grid-column:1/-1; font-size:12px; color:var(--muted); text-align:center; margin-top:-4px}
/* honeypot. Off-screen rather than display:none, because some bots skip
hidden inputs but will happily fill anything they can parse. */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
/* submit result. Both sit in the form grid; the attribute wins over the
display:flex below, so the scoped [hidden] rule has to come after it. */
.form-ok,.form-err{grid-column:1/-1; display:flex; align-items:flex-start; gap:9px;
margin:0; font-size:14.5px; line-height:1.5}
.form-ok{color:var(--sig-green); font-weight:600}
.form-err{color:var(--sig-red)}
.form-ok svg,.form-err svg{width:18px; height:18px; flex:none; margin-top:2px}
.form-ok:focus-visible{outline:2px solid var(--focus); outline-offset:4px; border-radius:6px}
.form-err a{color:inherit; text-decoration:underline}
.form-ok[hidden],.form-err[hidden]{display:none}
/* on success the fields have done their job - swap them for the thanks so
the confirmation is the only thing left, and a second submit is impossible */
form.sent .field,form.sent .btn-primary,form.sent .form-note,form.sent .hp{display:none}
/* ===================== LEGAL / CONTENT PAGES ===================== */
.doc{padding:clamp(44px,6vw,76px) 0 clamp(56px,7vw,88px)}
.doc .wrap{max-width:760px}
.doc-head{margin-bottom:clamp(26px,3vw,38px)}
.doc-head h1{font-size:clamp(30px,4.2vw,44px); margin-bottom:14px}
.doc-meta{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.doc h2{font-size:clamp(18px,2.1vw,22px); margin:34px 0 10px}
.doc h3{font-size:15.5px; margin:22px 0 6px}
.doc p{color:var(--body); font-size:15px; line-height:1.65; margin:0 0 12px; max-width:70ch}
.doc ul{color:var(--body); font-size:15px; line-height:1.65; margin:0 0 14px; padding-left:20px; max-width:70ch}
.doc li{margin:0 0 7px}
.doc a{color:var(--accent)}
.doc strong{color:var(--ink); font-weight:600}
/* The three contexts that still had no emphasis rule. Their markup asked for
emphasis and the stylesheet never delivered it, so a bold run sat in the
container's own muted or body colour and read as unemphasised. .twins-pull
was the clearest case: its lifted to ink while a beside it in
the same sentence did not. */
.lstep p strong,
.callout p strong,
.twins-pull strong{color:var(--ink); font-weight:600}
.doc-note{
border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:10px;
background:var(--card); padding:16px 18px; margin:0 0 28px;
}
.doc-note p{margin:0; font-size:14px}
.doc-note p + p{margin-top:8px}
/* footer */
.foot{border-top:1px solid var(--line); padding:34px 0}
.foot .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.foot .brand .logo{height:28px}
.foot-brand{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.foot .tag{color:var(--muted); font-weight:400; font-size:13px}
.foot-links{display:flex; gap:14px 22px; flex-wrap:wrap}
.foot-links a{color:var(--muted); text-decoration:none; font-size:13px}
.foot-links a:hover{color:var(--ink)}
.foot .cr{font-family:var(--mono); font-size:10.5px; color:var(--muted); letter-spacing:.04em}
/* ===================== RESPONSIVE ===================== */
/* narrow desktop: the copy column takes a far larger share of the width,
so the photo reaches under it — hold the scrim much further right */
@media (min-width:861px) and (max-width:1180px){
/* the theme selector is restated for the same reason as the mobile block:
:root[data-theme=...] outranks a bare .lead-panel::after, media query or not */
.lead-panel::after,
:root[data-theme="paper-amber"] .lead-panel::after{
background:
linear-gradient(to right,
color-mix(in srgb, var(--band-a) 93%, transparent) 0%,
color-mix(in srgb, var(--band-a) 89%, transparent) 58%,
color-mix(in srgb, var(--band-a) 60%, transparent) 80%,
transparent 97%),
/* both layers, or the transition question loses the bottom guard */
linear-gradient(to top,
color-mix(in srgb, var(--band-a) 97%, transparent) 0%,
color-mix(in srgb, var(--band-a) 90%, transparent) 22%,
transparent 40%);
}
}
@media (max-width:860px){
.hero .wrap,.contact .wrap{grid-template-columns:1fr}
/* Single column: the photo becomes a deliberate banner across the top
rather than covering the panel, because the panel is several screens
tall here and `cover` would scale it into an unreadable zoomed crop.
The banner is a sized box - not the full panel - and `cover` fills that
box exactly, so the photo can never run out partway down and leave a
hard edge over flat ground. That edge was invisible against the dark
palette and obvious against the light one. The scrim is the same box and
finishes fully opaque, so the photo dissolves into the panel colour
instead of stopping. */
.lead-panel::before{
inset:0 0 auto; height:56vh; min-height:300px; max-height:560px;
background-size:cover; background-position:right top;
}
.lead-panel::after{
inset:0 0 auto; height:56vh; min-height:300px; max-height:560px;
background:linear-gradient(to bottom,
color-mix(in srgb, var(--band-a) 55%, transparent) 0%,
color-mix(in srgb, var(--band-a) 86%, transparent) 55%,
var(--band-a) 100%);
}
/* must restate the theme selectors: they outrank the rule above, so without
this the light palettes keep the desktop gradient on a phone */
:root[data-theme="paper-amber"] .lead-panel::after{
inset:0 0 auto; height:56vh; min-height:300px; max-height:560px;
background:linear-gradient(to bottom,
color-mix(in srgb, var(--band-a) 74%, transparent) 0%,
color-mix(in srgb, var(--band-a) 94%, transparent) 55%,
var(--band-a) 100%);
}
/* badge owns the bottom-right corner at this width — move the hint clear of it */
.dgm-hint{top:6px; bottom:auto; left:6px; font-size:9px; padding:4px 10px}
.dgm-controls{grid-template-columns:1fr; gap:10px}
.legend{flex-wrap:wrap; gap:12px}
.loop-back{display:block; line-height:1.6}
.loop-back i{margin-right:8px}
.loop-back u{display:none}
.stat-grid{grid-template-columns:1fr}
.twins{grid-template-columns:1fr}
.jip-list{grid-template-columns:1fr}
.evo-hint{display:block}
.evo-scroll{margin-top:14px}
.evo-table{min-width:600px}
.evo-c-label{width:172px}
.evo-table th,.evo-table td{padding:11px 12px}
.evo-table tbody th,
.evo-table tbody td{font-size:12.5px}
.evo-table tbody th > span{gap:8px}
.evo-table .evo-h{padding:13px 10px}
.evo-hrow{gap:8px}
.evo-ico{width:22px; height:22px}
.evo-table .evo-corner{padding:13px 10px}
.evo-foot{font-size:13.5px; padding:12px 14px; gap:11px}
.timeline{grid-template-columns:1fr 1fr}
.tstep{border-bottom:1px solid var(--line)}
.loop{grid-template-columns:1fr}
.lstep{border-right:0; border-bottom:1px solid var(--line)}
.lstep:last-child{border-bottom:0}
.lstep:not(:last-child)::after{right:auto; left:24px; top:auto; bottom:-5px; margin-top:0; transform:rotate(135deg)}
.lstep h3{min-height:0}
.brand .logo{height:20px}
.foot .brand .logo{height:18px}
.feats{grid-template-columns:1fr}
.trow{grid-template-columns:1fr 1fr; row-gap:6px}
.trow .method{grid-column:1/-1}
/* The links used to be hidden outright, which left a phone with no way into
any section. They move to a second row and scroll sideways if they ever
outgrow it. */
.nav .wrap{flex-wrap:wrap; height:auto; padding-top:11px; padding-bottom:9px; row-gap:9px}
.brand{order:1}
.nav-actions{order:2}
.navlinks{display:flex; order:3; width:100%; gap:20px;
overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none}
.navlinks::-webkit-scrollbar{display:none}
.navlinks a{white-space:nowrap}
/* the nav is two rows here, so an anchor needs more clearance or it lands
underneath it */
section{scroll-margin-top:93px}
form{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*{animation:none !important; transition:none !important}
.js .reveal{opacity:1; transform:none}
}
/* ===================== COOKIE CONSENT =====================
Injected by site.js. Sits above everything, scrolls with nothing, and
uses the card tokens so it re-themes with the rest of the page. */
.consent{
position:fixed; left:0; right:0; bottom:0; z-index:60;
background:var(--card); border-top:1px solid var(--line);
box-shadow:0 -16px 44px -30px var(--shadow);
padding:14px clamp(16px,4vw,30px);
}
.consent-in{max-width:1120px; margin:0 auto; display:flex; align-items:center;
gap:20px; flex-wrap:wrap}
.consent p{margin:0; flex:1 1 340px; font-size:13.5px; line-height:1.55; color:var(--body)}
.consent p a{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
.consent-btns{display:flex; gap:10px; flex:none}
.consent .btn{padding:9px 18px; font-size:14px}
/* on a phone the buttons get their own row and split it evenly, so neither
is a small target at the edge of the screen */
@media (max-width:560px){
.consent-in{gap:13px}
.consent-btns{width:100%}
.consent .btn{flex:1; justify-content:center}
}