/* ==========================================================================
FONTS
Poppins is served from this domain rather than from Google. That removes a
third party origin from every page load, keeps visitor IP addresses out of
another company's logs, and lets the Content Security Policy stay strict.
========================================================================== */
@font-face{
font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
src:url('../fonts/poppins-400.woff2') format('woff2');
}
@font-face{
font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
src:url('../fonts/poppins-500.woff2') format('woff2');
}
@font-face{
font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
src:url('../fonts/poppins-600.woff2') format('woff2');
}
@font-face{
font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
src:url('../fonts/poppins-700.woff2') format('woff2');
}
@font-face{
font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;
src:url('../fonts/poppins-800.woff2') format('woff2');
}
/* ==========================================================================
Orca Creative ยท orcacreative.io
White, black, and the red from the mark.
========================================================================== */
:root{
color-scheme:light;
--red:#9E171C;
--red-bright:#C01F27;
--red-deep:#7A1116;
--red-wash:rgba(158,23,28,.055);
--red-line:rgba(158,23,28,.24);
--ink:#0B0C0F;
--ink-2:#141519;
--ink-3:#1D1F24;
--charcoal:#22242A;
--steel:#575B62;
--steel-2:#7C818A;
--steel-3:#A8ADB5;
/* dark surfaces. Lifted off pure black so panels read as a material
rather than a hole, and so white type is not harshly high contrast. */
--dark:#1A1D22;
--dark-2:#23262D;
--dark-3:#2C3038;
--white:#FFFFFF;
--paper:#FAFAF9;
--paper-2:#F1F1EF;
--line:rgba(11,12,15,.10);
--line-2:rgba(11,12,15,.06);
--line-dark:rgba(255,255,255,.14);
--line-dark-2:rgba(255,255,255,.07);
/* Poppins across the whole site. The mono token is kept so component rules
do not need rewriting, it simply resolves to Poppins with wide tracking. */
--font-display:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
--font-body:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
--font-mono:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
/* learning centre spacing. One value for anything that reads as a card, one
for anything that reads as a row inside a card. Nothing else. */
--pad-card:clamp(1.6rem,2.4vw,2.15rem);
--pad-cell:.9rem 1.1rem;
--maxw:1200px;
/* content gutter, and a wider one for the bars that span the full viewport.
The header and the footer both read --gut-full, so their left and right
edges are derived from a single value and cannot drift apart. */
--gut:clamp(22px,5vw,40px);
--gut-full:clamp(22px,3.4vw,64px);
--brand-h:38px;
/* The reversed mark is pure white on near black. Light shapes optically
spread against dark, so at identical dimensions the footer logo reads
larger and heavier than the header one. It is set two pixels smaller and
very slightly held back so the two match by eye rather than by number. */
--brand-h-foot:36px;
--radius:18px;
--radius-sm:11px;
--radius-lg:26px;
--shadow:0 2px 4px rgba(11,12,15,.03),0 18px 44px -24px rgba(11,12,15,.26);
--shadow-lg:0 40px 90px -38px rgba(11,12,15,.44);
--shadow-red:0 12px 26px -12px rgba(158,23,28,.42);
--ease:cubic-bezier(.22,.61,.36,1);
--ease-out:cubic-bezier(.16,1,.3,1);
/* vertical rhythm */
/* One spacing unit governs the whole page: a flat 50px above and below every
block. The hero reserves the same beneath it, and where two blocks share a
background each side of that edge takes half, so every gap on the site
resolves to exactly 50px. */
--sec-y:50px;
--sec-y-sm:34px;
}
/* ---------- reset ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{
margin:0;font-family:var(--font-body);color:var(--charcoal);background:var(--white);
line-height:1.72;font-size:16.5px;font-weight:400;letter-spacing:-.004em;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0}
p{margin:0 0 1.15rem}
h1,h2,h3,h4,h5{
font-family:var(--font-display);margin:0;line-height:1.04;
letter-spacing:-.028em;font-weight:800;color:var(--ink);
/* stops a single short word being orphaned on its own line */
text-wrap:balance;
}
p,li{text-wrap:pretty}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2.5px solid var(--red);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.wrap-wide{max-width:1340px;margin:0 auto;padding:0 var(--gut)}
/* edge to edge, used by the header bar and the footer so they are not capped
at the content width. Keeps a generous left and right gutter at every size. */
.wrap-full{width:100%;max-width:none;margin:0;padding-left:var(--gut-full);padding-right:var(--gut-full)}
/* belt and braces: the two bars are stated together so an edit to one cannot
silently leave the other behind */
.site-head > .wrap-full,
.foot > .wrap-full{padding-left:var(--gut-full);padding-right:var(--gut-full)}
.section{padding:var(--sec-y) 0;position:relative}
.section.tight{padding:var(--sec-y-sm) 0}
.section.pb0{padding-bottom:0}
/* The hero carries a tinted background, so its bottom padding sits inside that
tint and reads as part of the hero rather than as space between blocks. The
block below therefore supplies its own full unit of clear space, exactly like
the unit it carries beneath itself. */
.section.pt0{padding-top:var(--sec-y)}
/* the rule band gets the same clear space above it when it follows a hero */
/* The stat band sits straight under the hero with no gap. After the photo hero
its top border is dropped as well, because that hero ends on a dark edge which
already divides the two. Light heroes keep the line, or the band would merge
into the page above it. */
.hero + .section.stat-band{margin-top:0}
.hero-slides + .section.stat-band{border-top:0}
/* Where two blocks share the same background there is no boundary to read, so
a full unit on each side would stack into a double gap. Each side of that
shared edge takes half a unit, so the space between them resolves to exactly
one unit, the same as every other gap on the page. */
.section.alt + .section.alt,
.section.dark + .section.dark,
.section.pt0 + .section:not(.alt):not(.dark):not(.cta-sec):not(.stat-band):not(.wash):not(.deep):not(.flood),
.section:not(.alt):not(.dark):not(.cta-sec):not(.stat-band):not(.wash):not(.deep):not(.flood):not(.pt0)
+ .section:not(.alt):not(.dark):not(.cta-sec):not(.stat-band):not(.wash):not(.deep):not(.flood){padding-top:calc(var(--sec-y) * .5)}
.section.alt:has(+ .section.alt),
.section.dark:has(+ .section.dark),
.section.pt0:has(+ .section:not(.alt):not(.dark):not(.cta-sec):not(.stat-band):not(.wash):not(.deep):not(.flood)),
.section:not(.alt):not(.dark):not(.cta-sec):not(.stat-band):not(.wash):not(.deep):not(.flood):has(
+ .section:not(.alt):not(.dark):not(.cta-sec):not(.stat-band):not(.wash):not(.deep):not(.flood)){padding-bottom:calc(var(--sec-y) * .5)}
.section.pb0{padding-bottom:0}
/* a hairline between consecutive light sections, so blocks read as separate */
.section + .section:not(.dark):not(.alt):not(.cta-sec)::before{
content:"";position:absolute;top:0;left:var(--gut);right:var(--gut);height:1px;
background:linear-gradient(90deg,var(--line),transparent 62%);
max-width:var(--maxw);margin:0 auto;
}
.section.alt{background:var(--paper);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
/* --------------------------------------------------------------------------
ORCA TEXTURE
The pod photograph sits behind every dark surface. It is attached to the
viewport so it stays continuous across section boundaries instead of each
block cropping its own copy, which would show as a seam at every join.
-------------------------------------------------------------------------- */
:root{ --orca-tex:url("../img/orca-texture.jpg"); }
.section.dark,
.panel.dark,
.cta-sec,
.side-cta,
.foot{
background-repeat:no-repeat, no-repeat;
background-size:cover, cover;
background-position:center, center;
background-attachment:scroll, fixed;
}
/* --------------------------------------------------------------------------
DARK CONTEXT
Any surface that carries a dark background opts in here. Setting the colours
as custom properties means a nested component inherits them automatically,
instead of every rule having to be written twice, once for .section.dark and
again for .panel.dark. That duplication is what caused bold text inside dark
panels to render near black on near black.
-------------------------------------------------------------------------- */
.section.dark,
.section.deep,
.section.flood,
.panel.dark,
.cta-sec,
.side-cta,
.foot{
--d-head:#FFFFFF;
--d-body:#CBD0D7;
--d-muted:#A2A9B2;
--d-faint:#828992;
--d-line:rgba(255,255,255,.15);
--d-line-2:rgba(255,255,255,.08);
--d-surface:var(--dark-2);
--d-accent:#FF858C;
--d-accent-wash:rgba(255,133,140,.13);
--d-accent-line:rgba(255,133,140,.34);
--d-check:url("data:image/svg+xml;utf8,");
}
.section.dark{
background-image:linear-gradient(180deg,rgba(20,22,27,.93),rgba(16,18,23,.95)),var(--orca-tex);
background-color:var(--dark);color:var(--d-body);
}
.section.dark h2,.section.dark h3,.section.dark h4{color:var(--d-head)}
.section.dark p{color:var(--d-body)}
/* dark sections get an ambient red bloom so they do not read as flat blocks */
.section.dark::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(ellipse 52% 62% at 84% 6%, rgba(255,133,140,.11), transparent 64%),
radial-gradient(ellipse 40% 50% at 4% 96%, rgba(255,133,140,.06), transparent 62%);
}
.section.dark > *{position:relative;z-index:1}
/* ---------- type helpers ---------- */
.eyebrow{
font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:var(--red);display:inline-flex;align-items:center;gap:.75em;
margin:0 0 1.5rem;
}
.eyebrow::before{
content:"";width:30px;height:2px;background:var(--red);border-radius:2px;flex:none;
transition:width .5s var(--ease-out);
}
.rv.in .eyebrow::before,.sec-head.rv.in .eyebrow::before{width:44px}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{
content:"";width:30px;height:2px;background:currentColor;border-radius:2px;flex:none;
transition:width .5s var(--ease-out);
}
.rv.in .eyebrow.center::after{width:44px}
.eyebrow.on-dark{color:var(--d-accent,#FF858C)}
.eyebrow.on-dark::before{background:var(--d-accent,#FF858C)}
.lead{font-size:clamp(1.08rem,1.5vw,1.26rem);color:var(--steel);max-width:62ch;line-height:1.66}
.section.dark .lead,.panel.dark .lead,.cta-sec .lead{color:var(--d-body)}
.sec-head{max-width:800px;margin-bottom:clamp(38px,4.4vw,60px);position:relative}
.sec-head h2{font-size:clamp(2rem,4.4vw,3.15rem);margin-bottom:0}
.sec-head p{margin-top:1.5rem}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
/* oversized ghost numeral behind a section head */
.sec-head[data-n]::before{
content:attr(data-n);position:absolute;right:0;top:-.22em;
font-family:var(--font-display);font-weight:900;font-size:clamp(5rem,11vw,9.5rem);
line-height:1;color:var(--ink);opacity:.032;letter-spacing:-.06em;pointer-events:none;z-index:0;
}
.section.dark .sec-head[data-n]::before,.cta-sec .sec-head[data-n]::before{color:#fff;opacity:.05}
.sec-head > *{position:relative;z-index:1}
.hl{color:var(--red)}
/* headline highlight with a hand-drawn feeling underline */
.hl-mark{position:relative;color:var(--ink);white-space:nowrap}
.hl-mark::after{
content:"";position:absolute;left:-.04em;right:-.04em;bottom:.02em;height:.34em;
background:var(--red);opacity:.16;border-radius:3px;z-index:-1;
}
.mono{font-family:var(--font-mono)}
/* ---------- buttons ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.6em;
font-family:var(--font-display);font-weight:700;font-size:.97rem;letter-spacing:-.004em;
padding:.95em 1.6em;border-radius:999px;border:1.5px solid transparent;cursor:pointer;
position:relative;overflow:hidden;
transition:transform .32s var(--ease-out),box-shadow .32s var(--ease-out),
background .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease);
}
.btn svg{width:17px;height:17px;flex:none}
.btn .ar{transition:transform .32s var(--ease-out)}
.btn:hover .ar{transform:translateX(4px)}
.btn-primary{background:var(--red);color:#fff;box-shadow:var(--shadow-red)}
.btn-primary:hover{background:var(--red-bright);transform:translateY(-3px);box-shadow:0 20px 40px -16px rgba(158,23,28,.55)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-3);transform:translateY(-3px)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--red);color:var(--red);background:var(--red-wash);transform:translateY(-3px)}
.btn-ghost.on-dark{border-color:var(--d-line,rgba(255,255,255,.15));color:var(--d-head,#fff)}
.btn-ghost.on-dark:hover{border-color:#fff;background:rgba(255,255,255,.07);color:#fff}
.btn-lg{font-size:1.05rem;padding:1.08em 2em}
.btn-block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.4rem}
.btn-row.center{justify-content:center}
/* small allowance so the primary button's glow does not touch whatever the
block below it begins with */
.hero .btn-row:last-child,
.wrap > .btn-row:last-child{margin-bottom:8px}
.grid + .btn-row,
.chips + .btn-row,
.steps + .btn-row,
.linkcols + .btn-row{margin-top:clamp(2.2rem,3.4vw,3.1rem)}
/* ---------- header ---------- */
/* The sticky context lives on the shell rather than on the bar. That keeps the
mobile panel outside the header's backdrop-filter, which creates both a
stacking context and a containing block and was compositing the panel
unpredictably in some Chromium builds, Brave among them. */
.head-shell{position:sticky;top:0;z-index:90}
.site-head{
background:rgba(255,255,255,.9);
-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
border-bottom:1px solid transparent;
transition:border-color .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease);
}
.site-head.stuck{border-bottom-color:var(--line);box-shadow:0 8px 30px -22px rgba(11,12,15,.6)}
.head-in{
display:flex;align-items:center;justify-content:space-between;gap:1.4rem;
/* padding-block only. A shorthand here would wipe the horizontal gutter
that .wrap provides, pushing the logo and toggle flush to the edges. */
padding-top:1rem;padding-bottom:1rem;
}
.brand{flex:none}
.brand img{height:var(--brand-h);width:auto}
.head-nav{display:flex;align-items:center;gap:1.7rem}
.head-nav a{
font-family:var(--font-display);font-weight:600;font-size:.93rem;color:var(--charcoal);
white-space:nowrap;position:relative;padding:.25rem 0;transition:color .22s var(--ease);
}
.head-nav a::after{
content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--red);
border-radius:2px;transition:right .32s var(--ease-out);
}
.head-nav a:hover{color:var(--red)}
.head-nav a:hover::after,.head-nav a[aria-current="page"]::after{right:0}
.head-nav a[aria-current="page"]{color:var(--red)}
/* ---------- mobile toggle and panel ---------- */
.head-cta{display:flex;align-items:center;gap:.85rem;flex:none}
.mob-toggle{
display:none;align-items:center;justify-content:center;flex-direction:column;gap:4.5px;
width:46px;height:44px;border-radius:12px;border:1.5px solid var(--line);background:#fff;
cursor:pointer;padding:0;flex:none;transition:border-color .25s var(--ease)}
.mob-toggle:hover{border-color:var(--red)}
.mob-toggle span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;
transition:transform .32s var(--ease),opacity .25s var(--ease)}
.mob-check:checked ~ .head-shell .mob-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.mob-check:checked ~ .head-shell .mob-toggle span:nth-child(2){opacity:0}
.mob-check:checked ~ .head-shell .mob-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mob-toggle:focus-visible{outline:2.5px solid var(--red);outline-offset:3px}
/* The panel sits in normal flow directly under the header row and runs the full
width of the viewport. It is not an absolutely positioned dropdown pinned to
one side, so it reads as the page opening rather than a menu hanging off the
corner. */
/* The open state is a checked checkbox, not a JavaScript class. The menu
therefore works with scripting blocked, broken, or still loading, which is
what a browser with aggressive shields can produce. */
.mob-check{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:-1px}
.mob-panel{display:none;border-top:1px solid var(--line);background:#fff;
max-height:calc(100vh - 78px);overflow-y:auto;-webkit-overflow-scrolling:touch;
box-shadow:0 24px 44px -28px rgba(11,12,15,.5)}
.mob-check:checked ~ .head-shell .mob-panel{display:block}
.mob-panel.open{display:block} /* kept so the script can still close it */
.mob-panel > .wrap-full{padding-top:.5rem;padding-bottom:1.5rem}
.mob-panel details{border-bottom:1px solid var(--line-2)}
.mob-panel summary{
list-style:none;cursor:pointer;padding:1rem 0;
font-family:var(--font-display);font-weight:700;font-size:1.04rem;color:var(--ink);
display:flex;align-items:center;justify-content:space-between;gap:1rem}
.mob-panel summary::-webkit-details-marker{display:none}
.mob-panel summary::after{content:"+";color:var(--red);font-size:1.45rem;line-height:1;font-weight:400}
.mob-panel details[open] summary::after{content:"\2013"}
.mob-panel .mob-links{padding:0 0 1rem;display:grid;gap:2px}
.mob-panel .mob-links a{padding:.55rem 0;color:var(--steel);font-size:.96rem}
.mob-panel .mob-links a b{color:var(--ink)}
.mob-panel .mob-links a:active{color:var(--red)}
.mob-panel .mob-top{
display:block;padding:1rem 0;border-bottom:1px solid var(--line-2);
font-family:var(--font-display);font-weight:700;font-size:1.04rem;color:var(--ink)}
.mob-cta{display:grid;gap:.7rem;margin-top:1.4rem}
.mob-cta .btn{width:100%;justify-content:center}
.mob-cta .btn svg{width:16px;height:16px}
.mob-social{display:flex;justify-content:center;gap:.5rem;margin:1.5rem 0 0;padding-top:1.3rem;
border-top:1px solid var(--line-2);list-style:none}
.mob-social a{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
color:var(--steel);border:1px solid var(--line);transition:color .2s,border-color .2s}
.mob-social a svg{width:16px;height:16px;display:block;fill:currentColor}
.mob-social a:active{color:var(--red);border-color:var(--red)}
.head-phone{
display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-display);font-weight:700;
font-size:.95rem;color:var(--ink);white-space:nowrap;transition:color .22s var(--ease);
}
.head-phone:hover{color:var(--red)}
.head-phone svg{width:16px;height:16px}
/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(64px,8.5vw,124px) 0 var(--sec-y);overflow:hidden}
.hero::before{
content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
background:
radial-gradient(ellipse 56% 68% at 88% 6%, rgba(158,23,28,.11), transparent 62%),
/* absolute size, so a short hero cannot clip the falloff and leave a hard
edged block sitting under the header */
radial-gradient(ellipse 620px 520px at 2% 100%, rgba(11,12,15,.05), transparent 68%);
}
/* faint ruled texture so the hero is not a flat white field */
.hero::after{
content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
background-image:linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
background-size:clamp(90px,10vw,140px) 100%;
-webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 40%,#000,transparent 78%);
mask-image:radial-gradient(ellipse 70% 80% at 50% 40%,#000,transparent 78%);
}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2.4rem,5vw,4.4rem);align-items:center}
/* single column hero. Wider measure and a larger headline, since there is no
second column competing for the space. */
.hero-solo{max-width:920px}
.hero-solo h1{font-size:clamp(2.6rem,6.4vw,4.9rem)}
.hero-solo .lead{max-width:60ch}
.hero-solo .hero-trust{max-width:none}
.hero h1{font-size:clamp(2.5rem,5.9vw,4.35rem);letter-spacing:-.036em;line-height:1.01}
.hero .lead{margin-top:1.8rem;font-size:clamp(1.08rem,1.6vw,1.26rem)}
.hero-trust{
display:flex;flex-wrap:wrap;gap:.7rem 1.9rem;margin-top:2.5rem;padding-top:1.8rem;
border-top:1px solid var(--line);
font-family:var(--font-mono);font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--steel-2);
}
.hero-trust span{display:inline-flex;align-items:center;gap:.55em}
.hero-trust span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--red);flex:none}
.hero.slim{padding:clamp(48px,6.5vw,88px) 0 var(--sec-y)}
.hero.slim h1{font-size:clamp(2.15rem,4.9vw,3.35rem)}
.hero.slim .hero-grid{grid-template-columns:1fr;max-width:880px}
/* ---------- breadcrumbs ---------- */
.crumbs{
font-family:var(--font-mono);font-size:.71rem;letter-spacing:.09em;color:var(--steel-2);
margin-bottom:1.5rem;text-transform:uppercase;
}
.crumbs a{color:var(--steel-2);transition:color .2s}
.crumbs a:hover{color:var(--red)}
.crumbs span{margin:0 .55em;opacity:.45}
/* ---------- cards ---------- */
.grid{display:grid;gap:clamp(1.25rem,2.2vw,1.9rem)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:clamp(1.6rem,2.4vw,2.15rem);display:flex;flex-direction:column;position:relative;overflow:hidden;
transition:transform .42s var(--ease-out),box-shadow .42s var(--ease-out),border-color .35s var(--ease);
}
/* accent line that draws across the top on hover */
.card::before{
content:"";position:absolute;top:0;left:0;right:100%;height:3px;
background:linear-gradient(90deg,var(--red),var(--red-bright));
transition:right .5s var(--ease-out);
}
a.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--red-line)}
a.card:hover::before{right:0}
.card .ic{
width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:1.25rem;
background:var(--red-wash);border:1px solid var(--red-line);
transition:background .35s var(--ease),transform .42s var(--ease-out);
}
a.card:hover .ic{background:var(--red);transform:scale(1.06) rotate(-4deg)}
.section.dark a.card:hover .ic{background:var(--d-accent)}
.section.dark a.card:hover .ic svg{stroke:var(--dark)}
.card .ic svg{width:22px;height:22px;stroke:var(--red);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s var(--ease)}
a.card:hover .ic svg{stroke:#fff}
.card h3{font-size:1.18rem;margin-bottom:.6rem;letter-spacing:-.02em}
.card p{color:var(--steel);font-size:.965rem;line-height:1.62;margin-bottom:0}
.card .more{
margin-top:1.35rem;font-family:var(--font-display);font-weight:700;font-size:.9rem;color:var(--red);
display:inline-flex;align-items:center;gap:.45em;
}
.card .more .ar{transition:transform .32s var(--ease-out)}
a.card:hover .more .ar{transform:translateX(5px)}
.section.dark .card,.panel.dark .card{background:var(--d-surface);border-color:var(--d-line)}
.section.dark .card p,.panel.dark .card p{color:var(--d-muted)}
.section.dark .card .ic,.panel.dark .card .ic{background:var(--d-accent-wash);border-color:var(--d-accent-line)}
.section.dark .card .ic svg,.panel.dark .card .ic svg{stroke:var(--d-accent)}
/* ---------- numbered steps ---------- */
.steps{display:grid;gap:clamp(1.6rem,2.6vw,2.2rem)}
.step{position:relative;padding-top:1.6rem;border-top:2px solid var(--line)}
.step::before{
content:"";position:absolute;top:-2px;left:0;right:100%;height:2px;background:var(--red);
transition:right .8s var(--ease-out);
}
.rv.in .step::before,.step.rv.in::before{right:0}
.step .n{
font-family:var(--font-mono);font-size:.74rem;font-weight:600;color:var(--red);letter-spacing:.14em;
display:block;margin-bottom:.85rem;
}
.step h3{font-size:1.14rem;margin-bottom:.55rem}
.step p{color:var(--steel);font-size:.955rem;margin-bottom:0;line-height:1.62}
.section.dark .step,.panel.dark .step{border-top-color:var(--d-line)}
.section.dark .step p,.panel.dark .step p{color:var(--d-muted)}
/* ---------- checklist ---------- */
.checks{list-style:none;display:grid;gap:.9rem}
.checks li{display:flex;gap:.85rem;align-items:flex-start;color:var(--steel);font-size:.99rem;line-height:1.62}
.checks li strong{color:var(--ink);font-weight:700}
.checks li::before{
content:"";width:21px;height:21px;border-radius:50%;flex:none;margin-top:.24rem;
background:var(--red-wash);border:1px solid var(--red-line);
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:center;background-size:12px;
}
.section.dark .checks li,.panel.dark .checks li,.cta-sec .checks li,.side-cta .checks li{color:var(--d-body)}
.section.dark .checks li strong,.panel.dark .checks li strong,.cta-sec .checks li strong{color:var(--d-head)}
.section.dark .checks li::before,.panel.dark .checks li::before,.cta-sec .checks li::before{
background-color:var(--d-accent-wash);border-color:var(--d-accent-line);background-image:var(--d-check);
}
/* ---------- stat band ---------- */
/* A stat band is a rule, not a section. It carries no section padding of its
own, and the block after it gets a reduced top, otherwise a full bottom and
a full top stack up to nearly 300px of dead space on wide screens. */
/* Rules sit on the section so they run the full width of the viewport rather
than stopping at the content container, and both use the same ink weight. */
.section.stat-band,
.section + .section.stat-band{
padding-top:0;padding-bottom:0;
border-top:1px solid var(--line-2);
border-bottom:1px solid var(--line-2);
}
.section.stat-band + .section,
.section.stat-band + .section.pt0,
.section.stat-band + .section.alt,
.section.stat-band + .section.dark{padding-top:var(--sec-y)}
.section.stat-band + .section::before{display:none}
.stats{display:grid;grid-template-columns:repeat(4,1fr)}
.stats .s{padding:clamp(1.8rem,3vw,2.5rem) clamp(1.2rem,2.2vw,2.1rem);border-right:1px solid var(--line-2);position:relative}
/* The outer cells drop their outside padding so the row lines up with the page
gutter. Which cells count as "outer" changes with the column count, so each
breakpoint restates it. */
.stats .s:first-child{padding-left:0}
.stats .s:last-child{padding-right:0;border-right:none}
.stats .n{
font-family:var(--font-display);font-weight:900;font-size:clamp(2.3rem,4.6vw,3.6rem);
line-height:.94;color:var(--ink);letter-spacing:-.05em;
}
.stats .n em{font-style:normal;color:var(--red)}
.stats .l{margin-top:.85rem;color:var(--steel);font-size:.93rem;line-height:1.55;max-width:26ch}
/* ---------- split feature ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.4rem,4.5vw,4rem);align-items:center}
.split.narrow{grid-template-columns:1.12fr .88fr}
.split.top{align-items:start}
.panel{
background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
padding:clamp(1.8rem,3.2vw,2.7rem);
}
.panel.dark{
background-image:linear-gradient(180deg,rgba(22,24,29,.92),rgba(16,18,23,.95)),var(--orca-tex);
background-color:var(--dark);
border-color:var(--d-line);color:var(--d-body);position:relative;overflow:hidden;
}
.panel.dark::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(ellipse 60% 60% at 88% 4%, rgba(255,133,140,.1), transparent 64%);
}
.panel.dark > *{position:relative;z-index:1}
.panel.dark h3,.panel.dark h2,.panel.dark h4{color:var(--d-head)}
.panel.dark p{color:var(--d-body)}
.panel.red{background:var(--red-wash);border-color:var(--red-line)}
/* ---------- pull quote ---------- */
.pull{
border-left:4px solid var(--red);padding:.4rem 0 .4rem clamp(1.4rem,3vw,2.2rem);
margin:clamp(2.2rem,4vw,3.2rem) 0;
}
.pull p{
font-family:var(--font-display);font-weight:700;font-size:clamp(1.2rem,2.3vw,1.7rem);
line-height:1.32;letter-spacing:-.022em;color:var(--ink);margin:0;
}
/* ---------- capability sidebar ---------- */
.with-side{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:clamp(2.6rem,5vw,4.4rem);align-items:start}
.with-side + .btn-row{margin-top:clamp(2.2rem,3.4vw,3rem)}
.side{position:sticky;top:104px;display:flex;flex-direction:column;gap:1.3rem}
.side-widget{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.side-widget h4{
font-family:var(--font-mono);font-size:.69rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
color:var(--steel-2);padding:1.05rem 1.3rem;border-bottom:1px solid var(--line-2);background:var(--paper);margin:0;
}
.side-list{list-style:none}
.side-list li{border-bottom:1px solid var(--line-2)}
.side-list li:last-child{border-bottom:none}
.side-list a{
display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:.82rem 1.3rem;
font-size:.94rem;color:var(--charcoal);
transition:background .25s var(--ease),color .25s var(--ease),padding-left .28s var(--ease-out);
}
.side-list a:hover{background:var(--red-wash);color:var(--red);padding-left:1.55rem}
.side-list a[aria-current="page"]{background:var(--red-wash);color:var(--red);font-weight:700;box-shadow:inset 3px 0 0 var(--red)}
.side-list a .ar{opacity:0;transition:opacity .25s var(--ease)}
.side-list a:hover .ar{opacity:1}
.side-cta{
background-image:linear-gradient(180deg,rgba(20,22,27,.9),rgba(12,13,17,.94)),var(--orca-tex);
background-color:var(--dark);
color:var(--d-body);border-radius:var(--radius);padding:1.75rem 1.5rem;text-align:center;
position:relative;overflow:hidden;
}
.side-cta::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255,133,140,.14), transparent 66%);
}
.side-cta > *{position:relative;z-index:1}
.side-cta h4{
font-family:var(--font-display);font-size:1.1rem;color:var(--d-head);letter-spacing:-.02em;margin-bottom:.6rem;
text-transform:none;background:none;border:none;padding:0;
}
.side-cta p{color:var(--d-muted);font-size:.9rem;line-height:1.58;margin-bottom:1.3rem}
.side-cta .btn{width:100%}
/* ---------- prose ---------- */
/* the sidebar constrains the column, so prose only needs a ceiling for the
pages that run full width */
.prose{max-width:78ch}
.with-side .prose{max-width:none}
.prose h2{font-size:clamp(1.65rem,3.2vw,2.25rem);margin:3.4rem 0 1.1rem;position:relative;padding-top:1.6rem}
.prose h2::before{content:"";position:absolute;top:0;left:0;width:38px;height:3px;background:var(--red);border-radius:2px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.25rem;margin:2.4rem 0 .75rem}
.prose p{color:var(--steel);margin-bottom:1.3rem}
.prose p strong{color:var(--ink);font-weight:700}
.prose ul{list-style:none;margin:0 0 1.6rem}
.prose ul li{display:flex;gap:.85rem;align-items:flex-start;color:var(--steel);margin-bottom:.75rem;line-height:1.62}
.prose ul li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);flex:none;margin-top:.68rem}
.prose .callout{
border-left:4px solid var(--red);background:var(--red-wash);
padding:1.5rem 1.7rem;border-radius:0 var(--radius-sm) var(--radius-sm) 0;
margin:2.2rem 0;
}
.prose .callout p{margin-bottom:0;color:var(--ink-2)}
/* ---------- faq ---------- */
.faq{border-top:2px solid var(--ink)}
.section.dark .faq,.cta-sec .faq{border-top-color:var(--d-line)}
.faq details{border-bottom:1px solid var(--line-2);padding:1.55rem 0}
.section.dark .faq details{border-bottom-color:var(--d-line-2)}
.faq summary{
cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1.6rem;
font-family:var(--font-display);font-weight:700;font-size:1.07rem;color:var(--ink);
letter-spacing:-.018em;transition:color .22s var(--ease);
}
.section.dark .faq summary{color:var(--d-head)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--red)}
.section.dark .faq summary:hover{color:var(--d-accent)}
.faq summary .pm{
width:26px;height:26px;flex:none;position:relative;border-radius:50%;border:1.5px solid var(--line);
transition:border-color .3s var(--ease),transform .4s var(--ease-out),background .3s var(--ease);
}
.section.dark .faq summary .pm{border-color:var(--d-line)}
.faq summary .pm::before,.faq summary .pm::after{
content:"";position:absolute;left:50%;top:50%;background:var(--steel-2);
transition:transform .3s var(--ease),background .3s var(--ease);
}
.faq summary .pm::before{width:10px;height:1.8px;transform:translate(-50%,-50%)}
.faq summary .pm::after{width:1.8px;height:10px;transform:translate(-50%,-50%)}
.faq details[open] summary .pm{border-color:var(--red);background:var(--red-wash);transform:rotate(90deg)}
.faq details[open] summary .pm::after{transform:translate(-50%,-50%) scaleY(0);background:var(--red)}
.faq details[open] summary .pm::before{background:var(--red)}
.faq details p{color:var(--steel);font-size:1rem;line-height:1.72;padding-top:1.05rem;margin-bottom:0;max-width:80ch}
.section.dark .faq details p{color:var(--d-body)}
.section.dark .faq details[open] summary .pm{border-color:var(--d-accent);background:var(--d-accent-wash)}
.section.dark .faq details[open] summary .pm::before,
.section.dark .faq details[open] summary .pm::after{background:var(--d-accent)}
/* ---------- marquee ---------- */
.marq{
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
padding:1.35rem 0;overflow:hidden;position:relative;background:var(--paper);
-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.marq .track{display:flex;gap:2.8rem;width:max-content;animation:slide 42s linear infinite}
.marq:hover .track{animation-play-state:paused}
.marq .track span{
font-family:var(--font-display);font-weight:700;font-size:1rem;letter-spacing:-.015em;
color:var(--steel-2);display:inline-flex;align-items:center;gap:2.8rem;white-space:nowrap;
}
.marq .track span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);display:block;flex:none}
@keyframes slide{to{transform:translateX(-50%)}}
/* ---------- CTA + form ---------- */
/* The CTA is the last block on almost every page, so its base fades down to the
same black the footer starts on. The seam between the two disappears, and a
single red bloom is centred on that seam so the colour reads as continuous. */
/* The CTA and the footer share one identical flat wash over the same viewport
fixed texture. Earlier versions gave each a vertical ramp of its own, and
because the two elements have very different heights their gradients could
never resolve to the same value at the join. A flat wash removes the variable
entirely, so there is nothing left that can differ across the boundary. */
.cta-sec,
.foot{
background-image:linear-gradient(0deg,rgba(8,9,12,.945),rgba(8,9,12,.945)),var(--orca-tex);
background-color:#07080A;
}
.cta-sec,
.section + .section.cta-sec,
.section.stat-band + .section.cta-sec{
color:var(--d-body);position:relative;overflow:hidden;
/* two extra pixels of bottom padding, matched by a negative margin on the
footer, so sub pixel rounding between the two boxes cannot open a hairline */
padding:var(--sec-y) 0 calc(var(--sec-y) + 2px);
}
/* Defensive: if a dark section ever sits directly on top of the CTA, match its
wash so the two do not meet as two different shades of dark. */
.section.dark:has(+ .cta-sec){
background-image:linear-gradient(0deg,rgba(8,9,12,.945),rgba(8,9,12,.945)),var(--orca-tex);
background-color:#07080A;
}
.cta-sec::before{
content:"";position:absolute;inset:0;pointer-events:none;
/* A radial gradient cannot be relied on to match across an element boundary,
because its shape depends on the box it is painted in. A vertical linear
gradient can: its endpoint value is exact. This one ends on rgba(158,23,28,.20)
at the very bottom edge, and the footer picks that same value up at its very
top edge, so the two are identical where they meet. */
background:
radial-gradient(ellipse 900px 460px at 82% 6%, rgba(255,133,140,.11), transparent 68%),
linear-gradient(180deg,
rgba(158,23,28,0) 46%,
rgba(158,23,28,.07) 72%,
rgba(158,23,28,.14) 88%,
rgba(158,23,28,.20) 100%);
}
.cta-sec .wrap{position:relative;z-index:1}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.6rem,5vw,4.4rem);align-items:start}
.cta-copy h2{color:var(--d-head);font-size:clamp(2rem,4vw,2.95rem);margin-bottom:1.6rem}
.cta-copy .lead{margin-top:0}
.cta-copy p{color:var(--d-body)}
.cta-call{
display:inline-flex;align-items:center;gap:.65em;font-family:var(--font-display);font-weight:800;
font-size:clamp(1.35rem,2.6vw,1.75rem);color:var(--d-head);margin-top:1.9rem;letter-spacing:-.03em;
transition:color .22s var(--ease);
}
.cta-call:hover{color:var(--d-accent)}
.cta-call svg{width:24px;height:24px;stroke:var(--d-accent);fill:none;stroke-width:1.7}
.cta-note{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--d-faint);margin-top:.85rem}
.cta-assure{list-style:none;margin-top:2.4rem;display:grid;gap:.85rem}
.cta-assure li{display:flex;gap:.8rem;align-items:flex-start;color:var(--d-body);font-size:.96rem;line-height:1.6}
.cta-assure li::before{
content:"";width:20px;height:20px;border-radius:50%;flex:none;margin-top:.2rem;
border:1px solid var(--d-accent-line);background-color:var(--d-accent-wash);
background-image:var(--d-check);
background-repeat:no-repeat;background-position:center;background-size:11px;
}
.quote-card{
background:#fff;color:var(--charcoal);border-radius:var(--radius-lg);
padding:clamp(1.7rem,3vw,2.4rem);box-shadow:var(--shadow-lg);
}
.quote-card h3{font-size:1.38rem;margin-bottom:.5rem;letter-spacing:-.024em}
.quote-card .fnote{color:var(--steel-2);font-size:.89rem;margin-bottom:1.7rem}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:.95rem}
.field{display:flex;flex-direction:column;gap:.42rem;margin-bottom:.95rem;min-width:0}
.field label{font-family:var(--font-mono);font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-2)}
.field label .opt{text-transform:none;letter-spacing:0;opacity:.7}
.field input,.field select,.field textarea{
width:100%;font-family:var(--font-body);font-size:.98rem;color:var(--ink);background:var(--paper);
border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:.8rem .9rem;outline:none;
transition:border-color .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease);
}
.field textarea{resize:vertical;min-height:98px;line-height:1.58}
.field input::placeholder,.field textarea::placeholder{color:var(--steel-3)}
.field select{
appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.4rem;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right .85rem center;background-size:15px;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red);background:#fff;box-shadow:0 0 0 3.5px rgba(158,23,28,.13)}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--red-bright);box-shadow:0 0 0 3.5px rgba(192,31,39,.14)}
.privacy-note{font-size:.79rem;color:var(--steel-2);line-height:1.55;margin:1.1rem 0 0}
form.busy .btn-primary{opacity:.65;pointer-events:none;cursor:progress}
/* ---------- work / case studies ---------- */
.case{
border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:#fff;
display:flex;flex-direction:column;
transition:transform .42s var(--ease-out),box-shadow .42s var(--ease-out),border-color .35s var(--ease);
}
.case:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--red-line)}
.case .shot{aspect-ratio:16/10;background:var(--paper-2);position:relative;overflow:hidden;display:grid;place-items:center}
.case .shot img{width:100%;height:100%;object-fit:cover}
.case .shot .ph{
font-family:var(--font-mono);font-size:.71rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-3);
text-align:center;padding:1rem;line-height:1.9;
}
.case .body{padding:1.6rem 1.7rem 1.8rem}
.case .tag{font-family:var(--font-mono);font-size:.67rem;letter-spacing:.17em;text-transform:uppercase;color:var(--red);margin-bottom:.7rem;display:block}
.case h3{font-size:1.2rem;margin-bottom:.55rem;letter-spacing:-.022em}
.case p{color:var(--steel);font-size:.955rem;margin-bottom:0;line-height:1.62}
.case .metrics{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:1.35rem;padding-top:1.35rem;border-top:1px solid var(--line-2)}
.case .metrics .mv{font-family:var(--font-display);font-weight:800;font-size:1.3rem;color:var(--red);line-height:1;letter-spacing:-.03em}
.case .metrics .ml{font-size:.79rem;color:var(--steel-2);margin-top:.3rem}
/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.chips a[aria-current="page"]{border-color:var(--red);color:var(--red);background:var(--red-wash)}
.chips a,.chips span{
font-family:var(--font-display);font-weight:600;font-size:.88rem;color:var(--charcoal);
border:1.5px solid var(--line);border-radius:999px;padding:.48rem 1.05rem;background:#fff;
transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease),transform .3s var(--ease-out);
}
.chips a:hover{border-color:var(--red);color:var(--red);background:var(--red-wash);transform:translateY(-2px)}
/* ---------- link columns ---------- */
.linkcols{columns:4;column-gap:2.4rem;list-style:none;margin-top:.4rem}
.linkcols li{break-inside:avoid;margin-bottom:.7rem}
.linkcols a{font-size:.94rem;color:var(--steel);transition:color .2s,padding-left .25s var(--ease-out);display:inline-block}
.linkcols a:hover{color:var(--red);padding-left:5px}
/* ---------- footer ---------- */
/* Footer sits on true black. The only colour in it is the red from the mark. */
.foot{
--d-head:#FFFFFF;
--d-muted:#9BA1A9;
--d-faint:#6E747C;
--d-accent:var(--red-bright);
--d-line-2:rgba(255,255,255,.09);
}
.foot .foot-brand p{color:#8E949C}
.foot h4{color:var(--red-bright)}
.foot-phone{color:#fff}
.foot-phone:hover{color:var(--red-bright)}
.foot-phone svg{stroke:var(--red-bright)}
.foot ul a:hover{color:#fff}
.foot-bar nav a:hover{color:var(--red-bright)}
.foot{
color:var(--d-muted);padding:clamp(62px,7vw,92px) 0 0;position:relative;overflow:hidden;
margin-top:-2px}
.foot::before{
content:"";position:absolute;inset:0;pointer-events:none;
/* Starts on exactly the value the CTA above finishes on. */
background:linear-gradient(180deg,
rgba(158,23,28,.20) 0%,
rgba(158,23,28,.14) 14%,
rgba(158,23,28,.06) 34%,
rgba(158,23,28,0) 58%);
}
.foot .wrap{position:relative;z-index:1}
.foot-top{display:grid;grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr));gap:clamp(2rem,3.4vw,3rem);padding-bottom:clamp(2.6rem,4.5vw,3.6rem)}
.foot-brand img{height:var(--brand-h-foot);width:auto;margin-bottom:1.35rem;opacity:.94}
.foot-brand p{font-size:.94rem;line-height:1.68;max-width:40ch;color:var(--d-muted)}
.foot-phone{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-display);font-weight:700;color:var(--d-head);margin-top:.6rem;font-size:1.05rem;transition:color .2s}
.foot-phone:hover{color:var(--d-accent)}
.foot-phone svg{width:17px;height:17px;stroke:var(--d-accent);fill:none;stroke-width:1.8}
.foot h4{font-family:var(--font-mono);font-size:.69rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--d-head);margin-bottom:1.15rem}
.foot ul{list-style:none}
.foot ul li{margin-bottom:.62rem}
.foot ul a{font-size:.93rem;color:var(--d-muted);transition:color .2s,padding-left .25s var(--ease-out);display:inline-block}
.foot ul a:hover{color:var(--d-head);padding-left:4px}
.foot-bar{border-top:1px solid var(--d-line-2);padding:1.7rem 0;display:flex;flex-wrap:wrap;gap:.9rem 1.8rem;justify-content:space-between;align-items:center}
.foot-bar p{margin:0;font-size:.84rem;color:var(--d-faint)}
.foot-bar p .sep{display:inline-block;margin:0 .85em;opacity:.5;font-weight:300}
.foot-bar nav{display:flex;gap:1.5rem;flex-wrap:wrap}
.foot-bar nav a{font-size:.84rem;color:var(--d-faint);transition:color .2s}
.foot-bar nav a:hover{color:var(--d-head)}
.foot-cities{border-top:1px solid var(--d-line-2);padding:2.2rem 0}
.foot-cities h4{margin-bottom:1.1rem}
/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.07s}.rv.d2{transition-delay:.15s}.rv.d3{transition-delay:.23s}
.rv.d4{transition-delay:.31s}.rv.d5{transition-delay:.39s}.rv.d6{transition-delay:.47s}
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width:1100px){
.head-nav{gap:1.25rem}
.head-nav a{font-size:.89rem}
.linkcols{columns:3}
.with-side{grid-template-columns:minmax(0,1fr) 280px;gap:2.6rem}
}
@media (max-width:1000px){
/* ---- mobile navigation ---- */
.head-in{padding-top:.9rem;padding-bottom:.9rem;gap:.9rem}
/* the desktop nav simply goes away, the panel below the header takes over */
.head-nav{display:none}
.mob-toggle{display:inline-flex}
.head-phone{padding-right:.2rem}
.head-phone span{display:none}
.hero-grid{grid-template-columns:1fr;gap:2.8rem}
.with-side{grid-template-columns:1fr;gap:3rem}
.side{position:static}
.split,.split.narrow{grid-template-columns:1fr}
.cta-grid{grid-template-columns:1fr;gap:2.6rem}
.g4{grid-template-columns:repeat(2,1fr)}
.stats{grid-template-columns:repeat(2,1fr)}
.stats .s:nth-child(2){border-right:none}
.stats .s:nth-child(1),.stats .s:nth-child(2){border-bottom:1px solid var(--line-2)}
/* reset, then reapply for a two column grid */
.stats .s{padding-left:clamp(1.2rem,2.2vw,2.1rem);padding-right:clamp(1.2rem,2.2vw,2.1rem)}
.stats .s:nth-child(odd){padding-left:0}
.stats .s:nth-child(even){padding-right:0}
.foot-top{grid-template-columns:1fr 1fr}
.linkcols{columns:2}
.sec-head[data-n]::before{font-size:clamp(4rem,15vw,6rem);opacity:.028}
}
@media (max-width:680px){
body{font-size:16.5px}
/* the hero is short here, so the ambient washes have no room to resolve
cleanly and read as banding instead of atmosphere */
.hero::before{background:radial-gradient(ellipse 520px 420px at 96% 0%, rgba(158,23,28,.09), transparent 66%)}
.hero::after{opacity:.28}
.g2,.g3,.g4{grid-template-columns:1fr}
.frow{grid-template-columns:1fr}
.stats{grid-template-columns:1fr}
.stats .s{
border-right:none;border-bottom:1px solid var(--line-2);
/* stacked, so every cell sits on both edges and carries no side padding */
padding-left:0;padding-right:0;
}
.stats .s:last-child{border-bottom:none}
.stats .l{max-width:34ch}
.foot-top{grid-template-columns:1fr;gap:2.2rem}
.btn-row{gap:.7rem}
.btn-row .btn{width:100%}
.head-cta .btn{display:none} /* the panel carries the CTA on small screens */
:root{--brand-h:32px;--brand-h-foot:30px}
.hero-trust{gap:.6rem 1.2rem;font-size:.68rem}
.foot-bar{flex-direction:column;align-items:flex-start;gap:1rem}
.sec-head[data-n]::before{display:none}
.case .metrics{gap:1.1rem}
.prose h2{padding-top:1.3rem}
}
@media (max-width:400px){
:root{--gut:20px;--gut-full:20px}
}
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto}
.rv{opacity:1;transform:none}
.card::before,.step::before{right:0}
}
/* ==========================================================================
CONFIRMATION PAGE
========================================================================== */
.confirm{
padding:clamp(64px,8vw,110px) 0 clamp(56px,7vw,92px);position:relative;overflow:hidden;
}
.confirm::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(ellipse 46% 52% at 50% 0%, rgba(158,23,28,.09), transparent 66%);
}
/* Narrow measure for the message itself. The cards below use the full page
container instead, otherwise three columns inside 640px leaves each one about
170px wide and the copy wraps every three words. */
.confirm-in{position:relative;z-index:1;max-width:660px;margin:0 auto;text-align:center;padding:0 var(--gut)}
.confirm-wide{position:relative;z-index:1}
.confirm .tick{
width:84px;height:84px;border-radius:50%;display:grid;place-items:center;margin:0 auto 2.1rem;
background:var(--red);box-shadow:0 20px 46px -16px rgba(158,23,28,.55);
animation:pop .6s var(--ease-out) both;
}
.confirm .tick svg{width:40px;height:40px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@keyframes pop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.confirm h1{font-size:clamp(2rem,4.6vw,3.05rem);margin-bottom:1.5rem}
.confirm .lead{margin:0 auto;max-width:52ch}
.confirm .btn-row{justify-content:center;margin-top:2.4rem}
/* what happens next, three steps under the confirmation */
.next-steps{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,2.2vw,1.8rem);
margin-top:clamp(3.2rem,5.5vw,4.8rem);text-align:left;
}
.next-steps .ns{
border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem 1.8rem;background:#fff;
position:relative;overflow:hidden;
}
.next-steps .ns::before{
content:"";position:absolute;top:0;left:0;width:100%;height:3px;
background:linear-gradient(90deg,var(--red),var(--red-bright));opacity:.9;
}
.next-steps .ns .n{
font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.15em;
text-transform:uppercase;color:var(--red);display:block;margin-bottom:.7rem;
}
.next-steps .ns h3{font-size:1.12rem;margin-bottom:.6rem}
.next-steps .ns p{color:var(--steel);font-size:.95rem;line-height:1.65;margin:0;text-wrap:pretty}
.confirm .aside-note{
margin:clamp(2.6rem,4.5vw,3.6rem) auto 0;padding-top:2rem;border-top:1px solid var(--line);
font-size:.95rem;color:var(--steel-2);text-align:center;max-width:66ch;line-height:1.7;
}
.confirm .aside-note a{color:var(--red);font-weight:600}
.confirm .aside-note a:hover{text-decoration:underline}
@media (max-width:900px){
.next-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
.next-steps .ns:last-child{grid-column:1 / -1}
}
@media (max-width:600px){
.next-steps{grid-template-columns:1fr}
.next-steps .ns:last-child{grid-column:auto}
}
/* ==========================================================================
CASE STUDY PAGE
========================================================================== */
/* meta strip under the hero */
.casemeta{
display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2.4vw,2.4rem);margin:0;
padding:clamp(1.5rem,2.6vw,2.1rem) 0;border-top:1px solid var(--line-2);
border-bottom:1px solid var(--line-2);
}
.casemeta dt{
font-family:var(--font-mono);font-size:.66rem;font-weight:600;letter-spacing:.15em;
text-transform:uppercase;color:var(--steel-2);margin-bottom:.45rem;
}
.casemeta dd{margin:0;font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--ink);line-height:1.4}
/* screenshot figures. Placeholders hold the correct ratio so layout can be
approved before any real imagery exists. */
.shotfig{margin:0;position:relative}
.shotfig > img,
.shotfig > .ph{
width:100%;aspect-ratio:var(--ar,16/10);border-radius:var(--radius-lg);
border:1px solid var(--line);display:block;object-fit:cover;background:var(--paper-2);
}
.shotfig > .ph{
display:grid;place-items:center;align-content:center;gap:.6rem;text-align:center;padding:1.5rem;
background:
linear-gradient(135deg,var(--paper) 25%,transparent 25%) -14px 0/28px 28px,
linear-gradient(225deg,var(--paper) 25%,transparent 25%) -14px 0/28px 28px,
linear-gradient(315deg,var(--paper) 25%,transparent 25%) 0 0/28px 28px,
linear-gradient(45deg,var(--paper) 25%,transparent 25%) 0 0/28px 28px,
var(--paper-2);
border-style:dashed;border-color:var(--line);
}
.ph-l{
font-family:var(--font-display);font-weight:700;font-size:1.02rem;color:var(--steel);letter-spacing:-.02em;
}
.ph-d{
font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-3);
}
.shotfig figcaption{
margin-top:.95rem;font-size:.88rem;color:var(--steel-2);line-height:1.55;max-width:70ch;
}
.shotgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.4rem,2.6vw,2.2rem)}
.shotgrid .shotfig:first-child{grid-column:1 / -1}
/* attribution under a pull quote */
.pull cite{
display:block;margin-top:.9rem;font-style:normal;font-family:var(--font-mono);font-size:.7rem;
letter-spacing:.14em;text-transform:uppercase;color:var(--steel-2);
}
/* at a glance list in the sidebar */
.side-facts{list-style:none;padding:1.1rem 1.3rem;display:grid;gap:.7rem}
.side-facts li{
display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;color:var(--steel);line-height:1.55;
}
.side-facts li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--red);flex:none;margin-top:.6rem}
/* client quote */
.bigquote{
margin:0;max-width:960px;border-left:4px solid var(--red);
padding:.4rem 0 .4rem clamp(1.6rem,3.4vw,2.6rem);
}
.bigquote p{
font-family:var(--font-display);font-weight:700;letter-spacing:-.028em;
font-size:clamp(1.35rem,3vw,2.15rem);line-height:1.28;color:var(--ink);margin:0 0 1.4rem;
}
.bigquote footer{display:flex;flex-direction:column;gap:.15rem}
.bigquote footer strong{font-family:var(--font-display);font-weight:700;font-size:.98rem;color:var(--ink)}
.bigquote footer span{font-size:.9rem;color:var(--steel-2)}
/* result metrics, more detail than the top stat band */
.resultgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.2vw,1.8rem)}
.rm{border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem 1.8rem;background:#fff;position:relative;overflow:hidden}
.rm::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--red),var(--red-bright))}
.rv-n{font-family:var(--font-display);font-weight:900;font-size:clamp(2rem,3.6vw,2.8rem);line-height:1;color:var(--red);letter-spacing:-.05em}
.rv-l{margin-top:.8rem;font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--ink)}
.rv-d{margin-top:.35rem;font-size:.88rem;color:var(--steel-2);line-height:1.5}
/* next case study */
.nextcase{
display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.7rem,3vw,2.4rem);
background:#fff;transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .3s var(--ease);
}
.nextcase:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--red-line)}
.nextcase h2{font-size:clamp(1.4rem,2.6vw,1.95rem);margin-bottom:.4rem}
.nextcase p{margin:0;color:var(--steel);font-size:.96rem}
.nextcase .go{
font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--red);
display:inline-flex;align-items:center;gap:.5em;flex:none;
}
.nextcase .go .ar{transition:transform .3s var(--ease-out)}
.nextcase:hover .go .ar{transform:translateX(5px)}
@media (max-width:1000px){
.casemeta{grid-template-columns:repeat(2,1fr);row-gap:1.5rem}
.resultgrid{grid-template-columns:1fr}
}
@media (max-width:760px){
.casemeta{grid-template-columns:repeat(2,1fr)}
.shotgrid{grid-template-columns:1fr}
.shotgrid .shotfig:first-child{grid-column:auto}
}
/* featured case study band on the work index */
.featcase{
display:grid;grid-template-columns:1.05fr .95fr;gap:0;overflow:hidden;
border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;
transition:transform .42s var(--ease-out),box-shadow .42s var(--ease-out),border-color .3s var(--ease);
}
.featcase:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--red-line)}
.featcase-shot{position:relative;min-height:340px}
.featcase-shot .ph{
position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:.6rem;text-align:center;padding:1.5rem;
background:
linear-gradient(135deg,var(--paper) 25%,transparent 25%) -14px 0/28px 28px,
linear-gradient(225deg,var(--paper) 25%,transparent 25%) -14px 0/28px 28px,
linear-gradient(315deg,var(--paper) 25%,transparent 25%) 0 0/28px 28px,
linear-gradient(45deg,var(--paper) 25%,transparent 25%) 0 0/28px 28px,
var(--paper-2);
border-right:1px dashed var(--line);
}
.featcase-body{padding:clamp(1.8rem,3.2vw,2.8rem);display:flex;flex-direction:column;justify-content:center}
.featcase-body h2{font-size:clamp(1.5rem,2.8vw,2.15rem);margin-bottom:.7rem}
.featcase-body p{color:var(--steel);font-size:1rem;line-height:1.65;margin-bottom:0}
.featcase-metrics{display:flex;flex-wrap:wrap;gap:1.8rem;margin:1.6rem 0 0;padding-top:1.5rem;border-top:1px solid var(--line-2)}
.featcase-metrics .fv{display:block;font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--red);line-height:1;letter-spacing:-.04em}
.featcase-metrics .fl{display:block;margin-top:.35rem;font-size:.82rem;color:var(--steel-2);max-width:18ch;line-height:1.45}
.featcase .go{
margin-top:1.8rem;font-family:var(--font-display);font-weight:700;font-size:.98rem;color:var(--red);
display:inline-flex;align-items:center;gap:.5em;
}
.featcase .go .ar{transition:transform .3s var(--ease-out)}
.featcase:hover .go .ar{transform:translateX(5px)}
@media (max-width:860px){
.featcase{grid-template-columns:1fr}
.featcase-shot{min-height:220px}
.featcase-shot .ph{border-right:none;border-bottom:1px dashed var(--line)}
}
/* Transition band for the two pages that do not close on the CTA block, so the
fade into the footer is consistent across the whole site. */
.pagefade{
height:clamp(72px,7.5vw,118px);pointer-events:none;margin-bottom:-2px;
background:
/* red sits on top so it tints the dark rather than being hidden by it */
linear-gradient(180deg,
rgba(158,23,28,0) 40%,
rgba(158,23,28,.12) 78%,
rgba(158,23,28,.20) 100%),
linear-gradient(180deg,
rgba(255,255,255,0) 0%,
rgba(20,22,27,.45) 46%,
rgba(10,11,14,.86) 74%,
rgba(8,9,12,.945) 92%,
rgba(8,9,12,.945) 100%);
}
/* fixed attachment is unreliable on touch platforms, so scroll it there */
@media (max-width:900px), (hover:none){
.section.dark,.panel.dark,.cta-sec,.side-cta,.foot{background-attachment:scroll,scroll}
}
/* ==========================================================================
ELEMENT RHYTHM
Spacing between adjacent elements inside a section, so nothing sits flush
against its neighbour on any page.
========================================================================== */
/* two colour blocks in a row should not show a doubled divider */
.section.alt + .section.alt{border-top:none}
.section.dark + .section.dark{border-top:none}
/* a block of prose followed by anything structural */
.prose + .grid,
.prose + .steps,
.prose + .chips,
.prose + .faq,
.prose + .panel,
.prose + .stats{margin-top:clamp(2rem,3.4vw,2.9rem)}
/* structural blocks stacked on each other */
.grid + .grid,
.grid + .panel,
.grid + .steps,
.panel + .panel,
.panel + .grid,
.steps + .grid,
.chips + .grid{margin-top:clamp(1.6rem,2.8vw,2.4rem)}
/* a heading that follows a block rather than opening a section */
.grid + .sec-head,
.panel + .sec-head,
.stats + .sec-head{margin-top:clamp(2.4rem,4vw,3.4rem)}
/* lists and note lines under a panel or card */
.checks + p,
.checks + .btn-row{margin-top:1.5rem}
.panel .checks + p{margin-top:1.4rem}
/* the FAQ accordion needs room under its heading and above what follows */
.faq{margin-bottom:.4rem}
.sec-head + .faq{margin-top:0}
/* sidebar widgets */
.side-widget + .side-widget,
.side-widget + .side-cta,
.side-cta + .side-widget{margin-top:0}
/* trailing note lines */
.privacy-note{margin-top:1.2rem}
.cta-note{margin-top:.9rem}
/* callouts and pull quotes need clear air on both sides */
.prose .callout{margin:clamp(1.9rem,3vw,2.6rem) 0}
.pull{margin:clamp(2rem,3.4vw,3rem) 0}
/* a lone paragraph directly after a section heading */
.sec-head p:last-child{margin-bottom:0}
/* stat band cells keep their label off the bottom rule */
.stats .l{margin-bottom:.15rem}
/* ---------- legal pages ---------- */
.legal-date{
font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--steel-2);margin-top:1.6rem;
}
.prose.legal h2{font-size:clamp(1.4rem,2.5vw,1.8rem);scroll-margin-top:110px}
.prose.legal h3{font-size:1.08rem;margin:1.9rem 0 .55rem}
.prose.legal p,.prose.legal li{font-size:.99rem}
.foot-bar nav .sep{color:var(--d-faint);opacity:.55}
@media (max-width:680px){
.foot-bar nav{gap:.7rem 1.1rem}
.foot-bar nav .sep{display:none}
}
/* ---------- social icons ---------- */
.social{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.4rem}
.social a{
width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;
border:1px solid var(--d-line,var(--line));background:rgba(255,255,255,.04);
transition:background .28s var(--ease),border-color .28s var(--ease),transform .3s var(--ease-out);
}
.social a svg{width:16px;height:16px;fill:var(--d-muted,var(--steel));transition:fill .28s var(--ease)}
.social a:hover{background:var(--red);border-color:var(--red);transform:translateY(-2px)}
.social a:hover svg{fill:#fff}
/* on a light surface the row needs the light palette instead */
.social-lg{margin-top:0}
.social-lg a{width:42px;height:42px;border-radius:12px;border-color:var(--line);background:#fff}
.social-lg a svg{width:18px;height:18px;fill:var(--charcoal)}
.social-lg a:hover{background:var(--red);border-color:var(--red)}
.social-lg a:hover svg{fill:#fff}
@media (max-width:520px){
.social a{width:38px;height:38px}
.social-lg a{width:40px;height:40px}
}
/* ---------- case study, unconfirmed content marker ---------- */
.tc{background:rgba(158,23,28,.09);color:var(--red);border-bottom:2px dotted var(--red-line);
padding:.05em .3em;border-radius:3px;font-style:normal;font-weight:600}
.tc-key{display:flex;align-items:center;gap:.6rem;font-size:.84rem;color:var(--steel-2);
background:var(--red-wash);border:1px solid var(--red-line);border-radius:999px;
padding:.5rem 1rem;width:fit-content;margin-top:1.4rem}
.tc-key b{color:var(--red)}
.livelink{display:inline-flex;align-items:center;gap:.45em;font-weight:700;font-size:.92rem;
color:var(--red);margin-top:1.4rem}
.livelink:hover .ar{transform:translateX(4px)}
.livelink .ar{transition:transform .3s var(--ease-out)}
/* ---------- work index ---------- */
.workgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.4rem,2.6vw,2.2rem)}
.workcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
display:flex;flex-direction:column;text-decoration:none;position:relative;
transition:transform .42s var(--ease-out),box-shadow .42s var(--ease-out),border-color .3s}
.workcard::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;
background:linear-gradient(90deg,var(--red),var(--red-bright));transform:scaleX(.16);transform-origin:left;
transition:transform .5s var(--ease-out)}
.workcard:hover::before{transform:scaleX(1)}
.workcard-body{flex:1}
.workcard:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--red-line)}
.workcard-body{padding:clamp(1.4rem,2.2vw,1.9rem);display:flex;flex-direction:column;flex:1}
.wc-kind{font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--red);display:block;margin-bottom:.7rem}
.workcard h3{font-size:clamp(1.1rem,1.9vw,1.4rem);margin-bottom:.55rem;color:var(--ink)}
.workcard p{color:var(--steel);font-size:.94rem;line-height:1.62;margin:0}
.wc-metrics{display:flex;flex-wrap:wrap;gap:1.4rem;margin:1.3rem 0 0;padding-top:1.2rem;
border-top:1px solid var(--line-2)}
.wc-metrics .fv{display:block;font-family:var(--font-display);font-weight:800;font-size:1.25rem;
color:var(--red);line-height:1;letter-spacing:-.04em}
.wc-metrics .fl{display:block;margin-top:.3rem;font-size:.78rem;color:var(--steel-2);max-width:20ch;
line-height:1.4}
.workcard .go{margin-top:1.4rem;font-family:var(--font-display);font-weight:700;font-size:.9rem;
color:var(--red);display:inline-flex;align-items:center;gap:.45em}
.workcard:hover .go .ar{transform:translateX(5px)}
.workcard .go .ar{transition:transform .3s var(--ease-out)}
@media (max-width:1000px){
.workgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){ .workgrid{grid-template-columns:1fr} }
/* ==========================================================================
HERO SLIDER
Every slide is in the DOM and every capability is named in the tab row, so
nothing is hidden behind a timer. A visitor who never waits still sees all
five. The stage reserves its height so rotation cannot shift the layout.
========================================================================== */
.hero-slides .slides{position:relative;min-height:var(--stage,300px)}
.hero-slides .slide{
position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;
transform:translateY(14px);
transition:opacity .5s var(--ease-out),transform .55s var(--ease-out),visibility .5s}
.hero-slides .slide.is-on{opacity:1;visibility:visible;pointer-events:auto;transform:none}
/* Only the first slide carries the h1. The rest are paragraphs styled to match,
so the page has exactly one h1 while every headline stays in the DOM. */
.hero-slides .slide h1,
.hero-slides .slide .sh{margin:0;font-family:var(--font-display);font-weight:800;
line-height:1.04;letter-spacing:-.028em;color:var(--ink);text-wrap:balance;
font-size:clamp(2.6rem,6.4vw,4.9rem)}
.hero-slides .slide .lead{margin-top:1.8rem}
/* no javascript: the first slide simply stays put */
.no-js .hero-slides .slide{position:static;opacity:1;visibility:visible;transform:none}
.no-js .hero-slides .slide:not(.is-on){display:none}
/* ---- the tab row, always showing all five ---- */
.slide-tabs{
display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem;
margin-top:clamp(2rem,3.4vw,2.8rem);padding-top:clamp(1.6rem,2.6vw,2.2rem);
border-top:1px solid var(--line)}
.stab{
position:relative;display:flex;flex-direction:column;gap:.3rem;padding:.85rem .2rem 1rem;
font-family:var(--font-display);font-weight:700;font-size:.92rem;letter-spacing:-.02em;
color:var(--steel-2);text-decoration:none;overflow:hidden;
transition:color .28s var(--ease)}
.stab .sn{
font-size:.66rem;font-weight:600;letter-spacing:.15em;color:var(--steel-3);
transition:color .28s var(--ease)}
.stab:hover{color:var(--ink)}
.stab:hover .sn{color:var(--red)}
.stab.is-on{color:var(--ink)}
.stab.is-on .sn{color:var(--red)}
.stab .prog{
position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--line);border-radius:2px}
.stab .prog::after{
content:"";position:absolute;inset:0 100% 0 0;background:var(--red);border-radius:2px;
transition:right 0s}
.stab.is-on .prog::after{right:0;transition:right var(--dwell,6s) linear}
.hero-slides.is-held .stab.is-on .prog::after{transition:none}
.stab:focus-visible{outline:2.5px solid var(--red);outline-offset:3px;border-radius:6px}
@media (max-width:900px){
.slide-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem .8rem}
}
@media (max-width:560px){
.slide-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
.stab{font-size:.86rem}
}
/* motion preference is respected: no rotation, first slide holds */
@media (prefers-reduced-motion:reduce){
.hero-slides .slide{transition:none}
.stab .prog::after{display:none}
}
/* ==========================================================================
HERO WITH PHOTOGRAPHY
A photo per slide behind the whole hero, with a scrim heavy enough that the
copy holds contrast over any of them. Text flips to light because the field
underneath is now dark.
========================================================================== */
.hero-slides{position:relative;overflow:hidden;background:var(--ink)}
.hero-bgs{position:absolute;inset:0;z-index:0}
.hero-bgs .slide-bg{
position:absolute;inset:0;opacity:0;transition:opacity .85s var(--ease-out);
display:block}
.hero-bgs .slide-bg.is-on{opacity:1}
.hero-bgs img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* the scrim does the contrast work. Stronger on the left where the copy sits,
and a floor across the bottom so the tab row stays legible. */
.hero-scrim{
position:absolute;inset:0;z-index:1;pointer-events:none;
background:
linear-gradient(100deg, rgba(9,10,13,.96) 0%, rgba(9,10,13,.93) 42%,
rgba(9,10,13,.78) 66%, rgba(9,10,13,.62) 100%),
linear-gradient(to top, rgba(9,10,13,.88) 0%, rgba(9,10,13,0) 46%),
rgba(9,10,13,.12)}
.hero-slides > .wrap{position:relative;z-index:2}
/* ---- copy inverts onto the dark field ---- */
.hero-slides .slide h1,
.hero-slides .slide .sh{color:#fff}
.hero-slides .slide .lead{color:#E6E9ED}
.hero-slides .eyebrow{color:#fff}
.hero-slides .eyebrow::before{background:var(--red-bright)}
.hero-slides .hl{color:var(--red-bright)}
.hero-slides .hero-trust{border-top-color:rgba(255,255,255,.16)}
.hero-slides .hero-trust span{color:#D7DBE1}
.hero-slides .hero-trust span::before{background:var(--red-bright)}
.hero-slides .btn-ghost{
color:#fff;border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.04)}
.hero-slides .btn-ghost:hover{
color:var(--ink);background:#fff;border-color:#fff}
.hero-slides .slide-tabs{border-top-color:rgba(255,255,255,.18)}
.hero-slides .stab{color:#AEB4BD}
.hero-slides .stab .sn{color:#7C838D}
.hero-slides .stab:hover,
.hero-slides .stab.is-on{color:#fff}
.hero-slides .stab:hover .sn,
.hero-slides .stab.is-on .sn{color:var(--red-bright)}
.hero-slides .stab .prog{background:rgba(255,255,255,.2)}
.hero-slides .stab .prog::after{background:var(--red-bright)}
.hero-slides .stab:focus-visible{outline-color:var(--red-bright)}
/* no javascript: the first photo holds */
.no-js .hero-bgs .slide-bg:not(.is-on){display:none}
@media (prefers-reduced-motion:reduce){
.hero-bgs .slide-bg{transition:none}
}
/* ==========================================================================
SINGLE PHOTO HERO
One still image behind a slim hero, same contrast logic as the slide hero
above but tuned for a single column of copy. The scrim is doing real work
here: the photograph underneath is bright and busy, so the copy side is
held near solid and only the far edge lets the picture through.
========================================================================== */
.hero-photo{position:relative;overflow:hidden;background:var(--ink);isolation:isolate}
/* the light hero's ambient washes and ruled texture belong to a white field */
.hero-photo::before,
.hero-photo::after{content:none}
.hero-photo .hero-bg{position:absolute;inset:0;z-index:0}
.hero-photo .hero-bg img{
width:100%;height:100%;object-fit:cover;object-position:center;display:block}
/* left to right falloff for the copy, a floor at the bottom so the stat band
meets a dark edge, a lid at the top for the breadcrumb, and a flat tint
under all of it so no highlight in the photo blows past the text. */
.hero-photo .hero-scrim{
position:absolute;inset:0;z-index:1;pointer-events:none;
background:
linear-gradient(100deg, rgba(9,10,13,.88) 0%, rgba(9,10,13,.82) 40%,
rgba(9,10,13,.64) 66%, rgba(9,10,13,.42) 100%),
linear-gradient(to top, rgba(9,10,13,.78) 0%, rgba(9,10,13,0) 54%),
linear-gradient(to bottom, rgba(9,10,13,.48) 0%, rgba(9,10,13,0) 36%),
rgba(9,10,13,.22)}
.hero-photo > .wrap{position:relative;z-index:2}
/* ---- copy inverts onto the dark field ---- */
.hero-photo h1,
.hero-photo .sh{color:#fff}
.hero-photo .lead{color:#E6E9ED}
.hero-photo .eyebrow{color:#fff}
.hero-photo .eyebrow::before{background:var(--red-bright)}
.hero-photo .hl{color:var(--red-bright)}
.hero-photo .crumbs{color:#9AA1AB}
.hero-photo .crumbs a{color:#C6CBD2}
.hero-photo .crumbs a:hover{color:#fff}
.hero-photo .crumbs span{opacity:.55}
.hero-photo .hero-trust{border-top-color:rgba(255,255,255,.16)}
.hero-photo .hero-trust span{color:#D7DBE1}
.hero-photo .hero-trust span::before{background:var(--red-bright)}
.hero-photo .btn-ghost{
color:#fff;border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.04)}
.hero-photo .btn-ghost:hover{
color:var(--ink);background:#fff;border-color:#fff}
/* the hero ends on a dark edge, which already divides it from what follows */
.hero-photo + .section.stat-band{border-top:0}
@media (max-width:760px){
/* narrow screens have no room for a horizontal falloff, so the scrim goes
to a vertical one and sits heavier overall */
.hero-photo .hero-scrim{
background:
linear-gradient(to top, rgba(9,10,13,.93) 0%, rgba(9,10,13,.82) 46%,
rgba(9,10,13,.66) 100%),
rgba(9,10,13,.34)}
}
/* the appointment only line reads as a caution, not as an address */
.appt-note{
border-left:3px solid var(--red);background:var(--red-wash);
padding:.7rem .9rem;border-radius:0 8px 8px 0;font-size:.9rem;line-height:1.6;
color:var(--steel);margin:0}
.appt-note strong{color:var(--ink);display:block}
/* ==========================================================================
RESPONSIVE PAIR
A desktop browser frame with a phone overlaid at the corner. The viewport
wrappers hold their aspect ratio, so the layout is identical whether the
screenshot has loaded, is still loading, or is missing.
========================================================================== */
.rpair{position:relative;margin:0}
.rp-desk{position:relative;border-radius:12px;overflow:hidden;background:#fff;
border:1px solid var(--line);box-shadow:0 30px 62px -32px rgba(16,15,18,.4)}
.rp-bar{display:flex;align-items:center;gap:.45rem;padding:.55rem .8rem;
background:var(--paper);border-bottom:1px solid var(--line-2)}
.rp-bar i{width:9px;height:9px;border-radius:50%;background:var(--line);flex:none}
.rp-bar .u{margin-left:.5rem;flex:1;background:#fff;border:1px solid var(--line-2);
border-radius:999px;padding:.2rem .7rem;font-family:var(--font-mono);font-size:.63rem;
color:var(--steel-2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* The viewport takes the screenshot's own ratio, passed in from the build, so
the whole capture shows with nothing cropped from any edge. */
.rp-vp{position:relative;aspect-ratio:var(--shot-ar, 1400/780);width:100%;
overflow:hidden;background:var(--paper-2)}
.rp-vp .vp,.rp-vp picture{position:absolute;inset:0;width:100%;height:100%;display:block}
img.shot-img{object-fit:contain;object-position:top center;background:#fff}
.rpair figcaption{margin-top:1rem;font-size:.88rem;color:var(--steel-2);line-height:1.55}
/* inside a work card the frame sits flush */
.workcard .rpair{padding:0}
.workcard .rp-desk{border:0;border-radius:0;box-shadow:none}
.workcard-shot{position:relative;border-bottom:1px solid var(--line);overflow:hidden}
.workgrid > a:first-child .workcard-shot{border-bottom:none;border-right:1px solid var(--line)}
.workgrid > a:first-child{grid-column:1 / -1;display:grid;grid-template-columns:1.05fr .95fr}
@media (max-width:1000px){
.workgrid > a:first-child{grid-template-columns:1fr}
.workgrid > a:first-child .workcard-shot{border-right:none;border-bottom:1px solid var(--line)}
}
/* An even three across variant of the work grid, for the homepage. The work
index promotes its first item to a full width feature, which is right there
and wrong on a homepage where the three should read as equals. */
.workgrid.even > a:first-child{grid-column:auto;display:flex}
.workgrid.even > a:first-child .workcard-shot{
border-right:0;border-bottom:1px solid var(--line)}
@media (max-width:1000px){
.workgrid.even{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
.workgrid.even{grid-template-columns:1fr}
}
/* placeholder shown until a screenshot is dropped in, and left visible if a
file is missing or misnamed rather than letting a broken image show */
.vp.vph{display:grid;place-items:center;align-content:center;gap:.35rem;text-align:center;
padding:1rem;
background:
linear-gradient(135deg,var(--paper) 25%,transparent 25%) -12px 0/24px 24px,
linear-gradient(225deg,var(--paper) 25%,transparent 25%) -12px 0/24px 24px,
linear-gradient(315deg,var(--paper) 25%,transparent 25%) 0 0/24px 24px,
linear-gradient(45deg,var(--paper) 25%,transparent 25%) 0 0/24px 24px,
var(--paper-2)}
.vp.vph b{font-family:var(--font-display);font-weight:700;font-size:.9rem;color:var(--steel)}
.vp.vph s{text-decoration:none;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;
text-transform:uppercase;color:var(--steel-3);word-break:break-all}
img.shot-img{z-index:1}
.no-shot img.shot-img,
.no-shot picture{display:none}
/* ==========================================================================
LEARNING CENTER
========================================================================== */
.lg-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:clamp(1.2rem,2.4vw,2rem)}
.lg-group h3{font-size:1.05rem;margin:0 0 .9rem;padding-bottom:.6rem;
border-bottom:2px solid var(--red)}
.lg-list{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.lg-list a{display:block;padding:var(--pad-cell);border:1px solid var(--line);
border-radius:10px;background:#fff;text-decoration:none;
transition:border-color .25s var(--ease),transform .25s var(--ease-out)}
.lg-list a:hover{border-color:var(--red);transform:translateX(3px)}
.lg-list b{display:block;color:var(--ink);font-size:.95rem;margin-bottom:.15rem}
.lg-list span{display:block;color:var(--steel-2);font-size:.82rem;line-height:1.5}
.lg-acro{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-bottom:1.6rem}
.lg-acro b{font-family:var(--font-mono);letter-spacing:.06em;color:var(--red)}
/* acronym cards */
/* Flex rather than grid so the five cards wrap to a centered last row.
A grid leaves the odd card stranded on the left, which reads as a mistake. */
.acro-grid{display:flex;flex-wrap:wrap;justify-content:center;
gap:clamp(1rem,2vw,1.5rem)}
.acro-card{flex:1 1 300px;max-width:380px}
@media (max-width:700px){
.acro-card{flex:1 1 100%;max-width:none}
}
.acro-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
border-radius:var(--radius-lg);padding:var(--pad-card);text-decoration:none;
transition:border-color .3s var(--ease),transform .35s var(--ease-out),box-shadow .35s var(--ease)}
.acro-card:hover{border-color:var(--red);transform:translateY(-4px);
box-shadow:0 24px 46px -26px rgba(16,15,18,.28)}
.acro-abbr{font-family:var(--font-mono);font-size:1.7rem;font-weight:700;color:var(--red);
letter-spacing:.04em;line-height:1}
.acro-card h3{font-size:1rem;margin:.7rem 0 .5rem;color:var(--ink)}
.acro-card p{color:var(--steel);font-size:.92rem;line-height:1.6;flex:1;margin:0 0 .9rem}
.acro-meta{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;
text-transform:uppercase;color:var(--steel-3);display:block;margin-bottom:.9rem}
/* comparison table */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff}
.ctable{width:100%;border-collapse:collapse;min-width:660px}
.ctable th{text-align:left;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.09em;
text-transform:uppercase;color:var(--steel-2);padding:var(--pad-cell);
border-bottom:1px solid var(--line);background:var(--paper);white-space:nowrap}
.ctable td{padding:var(--pad-cell);border-bottom:1px solid var(--line-2);font-size:.92rem;
color:var(--steel);vertical-align:top;line-height:1.55}
.ctable tr:last-child td{border-bottom:0}
.ctable td b{color:var(--red);font-family:var(--font-mono);letter-spacing:.04em}
.ctable td em{color:var(--red);font-style:normal;font-weight:700}
/* what it involves */
.wgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:clamp(1rem,2vw,1.5rem)}
.wcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
padding:var(--pad-card)}
.wcard h3{font-size:1rem;margin:0 0 .5rem}
.wcard p{color:var(--steel);font-size:.92rem;line-height:1.65;margin:0}
/* honest take */
.hon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:clamp(1rem,2vw,1.5rem)}
.hon{border-left:3px solid var(--red);padding-left:1.1rem}
.hon h3{font-size:1.02rem;margin:0 0 .5rem}
.hon p{color:var(--steel);font-size:.93rem;line-height:1.7;margin:0}
/* callout */
.lc-note{border-left:3px solid var(--red);background:var(--red-wash);
padding:var(--pad-card);border-radius:0 10px 10px 0}
.lc-note b{display:block;color:var(--ink);margin-bottom:.3rem;font-size:.95rem}
.lc-note p{margin:0;color:var(--steel);font-size:.92rem;line-height:1.65}
.lc-note.big{padding:var(--pad-card)}
.lc-note.big b{font-size:1.05rem}
/* chips */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.chip{display:inline-flex;align-items:center;padding:.45rem .9rem;border:1px solid var(--line);
border-radius:999px;font-size:.85rem;color:var(--steel);text-decoration:none;background:#fff;
transition:border-color .25s var(--ease),color .25s var(--ease)}
.chip:hover{border-color:var(--red);color:var(--red)}
/* glossary */
.glossary{display:grid;gap:0;margin:0}
.gl{border-bottom:1px solid var(--line-2);display:grid;
grid-template-columns:minmax(150px,220px) 1fr;gap:1.4rem;align-items:start}
.gl:last-child{border-bottom:0}
.gl dt{font-weight:700;color:var(--ink);font-size:.95rem;margin:0}
.gl dd{margin:0;color:var(--steel);font-size:.93rem;line-height:1.7}
@media (max-width:640px){
.gl{grid-template-columns:1fr;gap:.3rem}
}
/* ==========================================================================
LEARNING CENTER, SECTION SURFACES
The site runs one signal color by design, so the variety here comes from
surface and scale rather than from new hues. Five surfaces in rotation:
white, paper, wash, dark and a red flood reserved for one moment per page.
========================================================================== */
.section.wash{background:var(--red-wash);border-top:1px solid var(--red-line);
border-bottom:1px solid var(--red-line)}
.section.flood{background:var(--red);color:#fff}
.section.flood h2,.section.flood h3,.section.flood .eyebrow{color:#fff}
.section.flood .lead,.section.flood p{color:rgba(255,255,255,.88)}
.section.flood .eyebrow::before{background:#fff}
.section.flood .hon{border-left-color:rgba(255,255,255,.5)}
.section.flood .hon h3{color:#fff}
.section.flood .hon p{color:rgba(255,255,255,.85)}
.section.deep{background:var(--ink);color:#fff}
.section.deep h2,.section.deep h3,.section.deep .eyebrow{color:#fff}
.section.deep .lead,.section.deep p,.section.deep li{color:#C6CBD3}
.section.deep .eyebrow{color:var(--d-accent)}
.section.deep .eyebrow::before{background:var(--red-bright)}
.section.deep .ticks li::before{background:var(--red-bright)}
.section.deep .lc-note{background:rgba(255,255,255,.05);border-left-color:var(--red-bright)}
.section.deep .lc-note b{color:#fff}
.section.deep .lc-note p{color:#C6CBD3}
.section.deep .chip{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.18);color:#C6CBD3}
.section.deep .chip:hover{border-color:var(--d-accent);color:#fff}
/* cards sitting on a dark surface */
.section.deep .acro-card,.section.deep .wcard{
background:var(--dark-2);border-color:rgba(255,255,255,.12)}
.section.deep .acro-card h3,.section.deep .wcard h3{color:#fff}
.section.deep .acro-card p,.section.deep .wcard p{color:#B9BFC7}
.section.deep .acro-card:hover{border-color:var(--red-bright);
box-shadow:0 24px 46px -26px rgba(0,0,0,.6)}
.section.deep .acro-abbr{color:#fff}
.section.deep .acro-meta{color:#8A9099}
.section.deep .go{color:var(--d-accent)}
/* a spine of varying weight across the five cards, so they read as a set
rather than five identical boxes */
.acro-card{position:relative;overflow:hidden}
.acro-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
background:var(--red);transform:scaleX(.34);transform-origin:left;
transition:transform .45s var(--ease-out)}
.acro-card:nth-child(2)::before{transform:scaleX(.5)}
.acro-card:nth-child(3)::before{transform:scaleX(.66)}
.acro-card:nth-child(4)::before{background:var(--steel-2);transform:scaleX(.82)}
.acro-card:nth-child(5)::before{transform:scaleX(1)}
.acro-card:hover::before{transform:scaleX(1);background:var(--red-bright)}
/* glossary alternating rows so a long list is scannable */
.gl{padding:var(--pad-cell);border-radius:8px}
.gl:nth-child(odd){background:var(--paper)}
/* the comparison table gets a red header band */
.ctable thead th{background:var(--ink);color:#fff}
.ctable tbody tr:hover td{background:var(--red-wash)}
/* hub group cards get a tinted head */
.lg-group{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
padding:var(--pad-card)}
.lg-group h3{border-bottom-color:var(--red)}
.section.deep .lg-group{background:var(--dark-2);border-color:rgba(255,255,255,.12)}
.section.deep .lg-group h3{color:#fff}
.section.deep .lg-list a{background:var(--dark-3);border-color:rgba(255,255,255,.1)}
.section.deep .lg-list a:hover{border-color:var(--red-bright)}
.section.deep .lg-list b{color:#fff}
.section.deep .lg-list span{color:#9BA2AB}
/* ==========================================================================
HEADER FIT
The desktop header needs roughly 1063px for the logo, six nav links, the
phone and the button. The mobile menu only takes over at 1000px, which left
a band where the header ran past the viewport on every page. Between those
two points the phone number text is dropped, which reclaims the difference
and lets the header fits its own contents at every width.
========================================================================== */
@media (min-width:1001px) and (max-width:1159px){
.head-nav{gap:clamp(.7rem,1.4vw,1.1rem)}
.head-phone span{display:none}
.head-phone{padding-right:.2rem}
}
/* ==========================================================================
LEARNING CENTER SPACING
The site halves the facing padding where two sections share a background so
the gap resolves to one unit rather than two. The wash, deep and flood
surfaces are now named in those selectors above, which keeps a full unit
wherever the color changes. These two rules reinstate the halving for the
case that does occur: a wash section followed by the wash takeaway block.
========================================================================== */
.section.wash + .section.wash,
.section.deep + .section.deep,
.section.flood + .section.flood{padding-top:calc(var(--sec-y) * .5)}
.section.wash:has(+ .section.wash),
.section.deep:has(+ .section.deep),
.section.flood:has(+ .section.flood){padding-bottom:calc(var(--sec-y) * .5)}
/* ---- the numeral ----
It began as a background wash, which either clipped at the top of the block
or sat directly behind the heading and made both harder to read. It now has
its own narrow column, vertically centered against the content, so it reads
as structure rather than as decoration competing with the type. */
.numsec{grid-template-columns:auto 1fr 1fr;gap:clamp(1.2rem,2.6vw,2.2rem)}
.numsec .num{font-size:clamp(2.6rem,4.4vw,3.9rem);font-weight:800;line-height:.9;
color:var(--red);opacity:.26;font-variant-numeric:tabular-nums;
align-self:center;pointer-events:none;user-select:none}
.section.deep .numsec .num{color:#fff;opacity:.3}
.section.flood .numsec .num{color:#fff;opacity:.42}
@media (max-width:900px){
/* one column, so the numeral sits inline above the eyebrow */
.numsec{grid-template-columns:1fr}
.numsec .num{font-size:2.4rem;opacity:.3;margin-bottom:-.4rem}
}
/* ==========================================================================
RESPONSIVE COMPARISON TABLE
Five columns will not fit a phone, and a sideways scrolling table hides two
of them behind a gesture most people never make. Below 760px each row
becomes a labelled card, so every value is visible without scrolling.
========================================================================== */
@media (max-width:760px){
.tbl-wrap{border:0;background:none;overflow:visible;border-radius:0}
.ctable{min-width:0;display:block}
.ctable thead{display:none}
.ctable tbody,.ctable tr,.ctable td{display:block;width:100%}
.ctable tr{background:#fff;border:1px solid var(--line);
border-radius:var(--radius-lg);margin-bottom:.85rem;overflow:hidden}
.ctable tr:last-child{margin-bottom:0}
.ctable td{display:grid;grid-template-columns:minmax(88px,34%) 1fr;
gap:.9rem;align-items:baseline;padding:var(--pad-cell);
border-bottom:1px solid var(--line-2)}
.ctable td:last-child{border-bottom:0}
.ctable td::before{content:attr(data-label);font-family:var(--font-mono);
font-size:.58rem;letter-spacing:.09em;text-transform:uppercase;
color:var(--steel-2);line-height:1.5}
.ctable td:first-child{background:var(--paper)}
.ctable td b{font-size:1.05rem}
.ctable tbody tr:hover td{background:transparent}
.ctable tbody tr:hover td:first-child{background:var(--paper)}
}
/* a little more room at the edges on a phone, the previous 20px sat tight
against the screen bezel on the narrower handsets */
@media (max-width:400px){
:root{--gut:24px;--gut-full:24px}
}
/* ==========================================================================
ACRONYM SHORTCUTS
Five equal cards in one row, so nothing wraps to a stranded second line and
every card is the same height. On the near black surface the card sits well
clear of the background instead of blending into it.
========================================================================== */
.lg-acro{grid-template-columns:repeat(5,minmax(0,1fr));gap:.7rem;margin-bottom:1.8rem}
.lg-acro li{display:flex}
.lg-acro li a{
display:flex;flex-direction:column;width:100%;
background:var(--dark-3);border:1px solid rgba(255,255,255,.16);
border-radius:12px;padding:1.1rem 1.15rem;
transition:background .3s var(--ease),border-color .3s var(--ease),
transform .35s var(--ease-out)}
.lg-acro li a:hover{background:var(--charcoal);border-color:var(--red-bright);
transform:translateY(-3px)}
/* the deep surface rules earlier in the file set these to white and grey and
win on specificity, so these are written to match that weight */
.section.deep .lg-acro li a b, .lg-acro b{
font-family:var(--font-mono);font-size:1.2rem;letter-spacing:.05em;
color:#fff;margin-bottom:.45rem;line-height:1}
.section.deep .lg-acro li a span, .lg-acro span{
color:#CDD2D9;font-size:.85rem;line-height:1.55}
.section.deep .lg-acro li a{background:var(--dark-3);
border-color:rgba(255,255,255,.18)}
.section.deep .lg-acro li a:hover{background:var(--charcoal);
border-color:var(--red-bright)}
.lg-acro li a::after{content:"";display:block;height:2px;width:26px;margin-top:auto;
padding-top:.85rem;border-bottom:2px solid var(--red-bright);opacity:.55;
transition:width .35s var(--ease-out),opacity .3s var(--ease)}
.lg-acro li a:hover::after{width:52px;opacity:1}
@media (max-width:1000px){
.lg-acro{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:660px){
.lg-acro{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:420px){
.lg-acro{grid-template-columns:1fr}
}
/* proudly built in the USA, in the copyright line. It is a link now, so it
needs the same hover treatment as the other footer links. */
.foot-bar .usa{display:inline-flex;align-items:center;gap:.45em;white-space:nowrap;
color:var(--d-body,#CBD0D7);text-decoration:none;transition:color .25s var(--ease)}
.foot-bar a.usa:hover{color:#fff}
.foot-bar a.usa:hover span{text-decoration:underline;text-underline-offset:3px}
.foot-bar .usa .flag{width:1.35em;height:auto;flex:none;border-radius:1.5px;
display:block;box-shadow:0 0 0 1px rgba(255,255,255,.18)}