/* =====================================================================
TSA — Figma theme layer (loads AFTER base.css; overrides win)
Design tokens extracted from Figma file MPfiBJCxfTODxWNn0hsYpm
Fonts are loaded via a in (non-blocking), not @import.
===================================================================== */
:root{
/* Core palette (Figma) */
--ink:#1a1a1a; /* text, buttons, CTA */
--ink2:#2a2a2a; /* dark sections + footer */
--mid:#555555; /* body secondary */
--soft:#888888; /* muted */
--line:#d9d9d9; /* light borders */
--bg:#ffffff;
--panel:#f5f5f4; /* tint sections */
--panel2:#ececec;
--brand:#e7212a; /* TSA brand red (logo) */
--brand-ink:#c0303a; /* deeper red for small accents on light */
--brand-2:#e50019;
/* RAG (kept from base) */
--rag-r:#c42b1c; --rag-a:#e8a33d; --rag-g:#4e9a5e;
/* type */
--font-sans:"42dot Sans","Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
--font-mono:"Consolas","SFMono-Regular","Courier New",monospace;
--maxw:1080px;
--gutter:48px;
}
/* ---------- reset / base ---------- */
html{scroll-behavior:smooth;}
body{
font-family:var(--font-sans);
color:var(--ink);
background:#e9e9e9; /* canvas behind the 1080 column */
line-height:1.55;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
.frame{
max-width:var(--maxw);
margin:0 auto;
background:var(--bg);
min-height:100vh;
box-shadow:0 0 40px rgba(0,0,0,.07);
overflow-x:clip;
}
img{max-width:100%;display:block;}
a{color:inherit;}
/* hide wireframe scaffolding if any survived */
.toolbar,.note{display:none !important;}
body.hide-notes .note{display:none !important;}
/* ---------- thin top accent bar (Figma) ---------- */
.topbar{
height:8px;
background:var(--ink);
width:100%;
}
/* ============================================================
HEADER / NAV — real logo + links + CTA + hamburger
============================================================ */
.site-header{
position:sticky; top:0; z-index:60;
background:#fff;
border-bottom:1px solid var(--line);
}
.nav{
max-width:var(--maxw); margin:0 auto;
display:flex; align-items:center; gap:6px;
padding:12px 28px; min-height:67px;
}
.nav .brand{display:flex; align-items:center; margin-right:auto; text-decoration:none;}
.nav .brand img{height:40px; width:auto; display:block;}
.nav-links{display:flex; align-items:center; gap:2px;}
.nav-links a{
color:var(--ink); text-decoration:none; font-size:13px; font-weight:400;
padding:8px 11px; border-radius:4px; white-space:nowrap;
transition:background .15s,color .15s;
}
.nav-links a:hover{background:var(--panel);}
.nav-links a.active{font-weight:700;}
.nav-cta{
background:var(--ink); color:#fff !important; text-decoration:none;
font-size:13px; font-weight:600; padding:10px 18px; border-radius:4px;
margin-left:14px; white-space:nowrap; transition:background .2s,transform .05s;
}
.nav-cta:hover{background:#000;}
.nav-cta:active{transform:translateY(1px);}
.hamburger{
display:none; margin-left:auto; background:none; border:0; cursor:pointer;
padding:8px; width:42px; height:42px;
}
.hamburger span{display:block; width:22px; height:2px; background:var(--ink); margin:4px auto; transition:.25s;}
.hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
/* ============================================================
TYPOGRAPHY refinements (Figma scale)
============================================================ */
.eyebrow{
font-size:11px; letter-spacing:.18em; text-transform:uppercase;
color:var(--brand); font-weight:700; margin-bottom:12px;
}
h1{font-size:36px; line-height:1.14; font-weight:800; letter-spacing:-.01em; margin-bottom:16px;}
h2{font-size:25px; line-height:1.2; font-weight:800; letter-spacing:-.005em; margin-bottom:12px;}
h3{font-size:16px; font-weight:700; margin-bottom:8px;}
.sub{font-size:16px; color:var(--mid); max-width:700px; margin-bottom:22px; line-height:1.6;}
.crumb{font-size:12px; letter-spacing:.02em; color:var(--soft); margin-bottom:16px; text-transform:none;}
/* ---------- sections ---------- */
.sec{padding:52px var(--gutter); border-bottom:1px solid var(--line);}
.sec.tint{background:var(--panel);}
.sec.dark{background:var(--ink2); color:#fff;}
.sec.dark .sub,.sec.dark p{color:#c9c9c9;}
.sec.dark .eyebrow{color:#8a8a8a;}
.sec.dark h1,.sec.dark h2,.sec.dark h3,.sec.dark h4{color:#fff;}
/* ---------- buttons ---------- */
.btn{
display:inline-flex; align-items:center; gap:8px;
background:var(--ink); color:#fff; padding:13px 24px; text-decoration:none;
font-size:14px; font-weight:600; border-radius:4px; margin-right:10px;
cursor:pointer; border:0; transition:background .2s,transform .05s;
}
.btn:hover{background:#000;}
.btn:active{transform:translateY(1px);}
.btn.ghost{background:#fff; color:var(--ink); border:1.5px solid var(--ink);}
.btn.ghost:hover{background:var(--ink); color:#fff;}
/* ---------- persona chips (hero) ---------- */
.chip{
border:1.5px solid var(--ink); border-radius:30px; padding:11px 20px;
font-size:13.5px; font-weight:700; transition:.18s;
}
.chip:hover{background:var(--ink); color:#fff;}
.chip span{font-weight:400; color:var(--soft);}
.chip:hover span{color:#bbb;}
/* ---------- cards ---------- */
.card{border:1px solid var(--line); background:#fff; padding:22px; border-radius:6px; transition:border-color .15s, box-shadow .15s;}
.card:hover{box-shadow:0 4px 20px rgba(0,0,0,.05);}
.sec.dark .card{background:#333; border-color:#454545;}
.sec.dark .card p{color:#c2c2c2;}
.card .link{color:var(--brand-ink);}
/* ---------- eyebrow inside cards keeps brand red already ---------- */
/* ---------- logo strip (trusted-by) ---------- */
.logo-strip{gap:34px; align-items:center; opacity:.9;}
.logo-strip .ph{
background:none; border:0; color:#9a9a9a; width:auto; height:auto;
font-weight:700; font-size:15px; letter-spacing:.02em; filter:grayscale(1);
}
/* ---------- team photos ---------- */
.team-photo{
width:104px; height:104px; border-radius:50%; object-fit:cover; object-position:top center;
margin:0 0 14px; filter:grayscale(1); border:1px solid var(--line); background:#eee;
}
/* ---------- insight cards ---------- */
.insight-card{padding:0; overflow:hidden;}
.insight-card .insight-thumb{width:100%; height:190px; object-fit:cover; display:block; border-bottom:1px solid var(--line);}
.insight-card .eyebrow{margin:18px 22px 8px;}
.insight-card h3{margin:0 22px 20px; line-height:1.35;}
/* ---------- stat band ---------- */
.stat b{font-family:var(--font-mono); font-weight:800;}
.stat .bar{background:var(--brand);}
/* ---------- steps ---------- */
.steps div b{color:var(--brand);}
/* ---------- quote ---------- */
.quote{border-left:3px solid var(--brand);}
/* ============================================================
HERO image visuals
============================================================ */
.hero-visual{margin-top:26px; border-radius:8px; overflow:hidden; border:1px solid var(--line);}
.hero-visual img{width:100%; height:auto; display:block;}
.hero-split{display:grid; grid-template-columns:1.05fr .95fr; gap:36px; align-items:center;}
.hero-split .hero-visual{margin-top:0;}
.hero-dark{
position:relative; background:var(--ink2); color:#fff; overflow:hidden;
border-bottom:1px solid var(--line);
}
.hero-dark .hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.28;}
.hero-dark .sec{position:relative; border-bottom:0; background:transparent;}
.hero-dark h1,.hero-dark .sub{color:#fff;}
.hero-dark .sub{color:#cfcfcf;}
/* ============================================================
BOXED LOGO (used in dark CTA bands, Figma)
============================================================ */
.brand-box{
display:inline-flex; flex-direction:column; align-items:flex-start;
border:2px solid #fff; padding:10px 14px; line-height:1.05;
}
.brand-box .mono{font-family:var(--font-mono); font-weight:700; font-size:20px; color:#fff; letter-spacing:.02em;}
.brand-box .mono .r{color:var(--brand);}
.brand-box .name{font-family:var(--font-sans); font-weight:700; font-size:15px; color:#fff; margin-top:4px; letter-spacing:.02em;}
.brand-box .name .r{color:var(--brand);}
.cta-band{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.cta-band .cta-actions{display:flex; gap:12px; flex-wrap:wrap;}
/* ============================================================
FOOTER (Figma-exact)
============================================================ */
.site-footer{background:var(--ink2); color:#bbb; padding:48px var(--gutter) 40px;}
.site-footer .tagline{font-size:18px; font-weight:700; color:#fff; margin-bottom:10px;}
.footer-news{font-size:12.5px; color:#999; margin-bottom:28px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.footer-news input{
background:#fff; border:1px solid #bbb; border-radius:3px; height:34px;
padding:0 12px; font-size:12.5px; width:210px; font-family:var(--font-sans);
}
.footer-news button{
background:transparent; color:#fff; border:1.5px solid #777; border-radius:3px;
height:34px; padding:0 16px; font-size:12px; cursor:pointer; font-family:var(--font-sans);
}
.footer-news button:hover{border-color:#fff;}
.foot-grid{
display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:24px;
font-size:12.5px; color:#bbb; border-top:1px solid #3a3a3a; padding-top:26px;
}
.foot-grid h4{color:#fff; font-size:12px; margin-bottom:10px; letter-spacing:.06em; font-weight:700;}
.foot-grid a{display:block; color:#bbb; text-decoration:none; padding:3px 0;}
.foot-grid a:hover{color:#fff;}
.foot-grid .addr{color:#bbb; line-height:1.7;}
.foot-copy{font-size:11.5px; color:#777; margin-top:26px;}
/* ============================================================
Component color alignment (reuse base rules, brand red)
============================================================ */
.tabr-h .n{color:var(--brand-ink);}
.tabr-b .lbl,.tabr-b .q:before{color:var(--brand-ink);}
.stepnum .tabno,.risk .rn,.tabrow-h .n,.flagcard{--brand:var(--brand-ink);}
.pill:hover{border-color:var(--ink);}
/* red-bordered technical card accent uses brand */
.card[style*="c0303a"]{border-color:var(--brand) !important;}
/* ============================================================
RESPONSIVE
============================================================ */
@media(max-width:1080px){
.frame{box-shadow:none;}
}
@media(max-width:900px){
.hero-split{grid-template-columns:1fr; gap:22px;}
.foot-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:760px){
:root{--gutter:22px;}
.nav{padding:10px 20px; min-height:60px;}
.nav .brand img{height:30px;}
.hamburger{display:block;}
.nav-links{
position:fixed; top:0; right:0; bottom:0; width:min(82vw,340px);
background:#fff; flex-direction:column; align-items:stretch; gap:2px;
padding:80px 20px 24px; transform:translateX(100%); transition:transform .28s ease;
box-shadow:-8px 0 30px rgba(0,0,0,.15); z-index:70; overflow-y:auto;
}
.nav-links.open{transform:translateX(0);}
.nav-links a{font-size:15px; padding:13px 14px; border-radius:6px;}
.nav-links a:hover{background:var(--panel);}
.nav-cta{margin:12px 0 0; text-align:center; justify-content:center; font-size:15px; padding:14px;}
.nav-backdrop{
position:fixed; inset:0; background:rgba(0,0,0,.4); opacity:0; visibility:hidden;
transition:.28s; z-index:65;
}
.nav-backdrop.open{opacity:1; visibility:visible;}
h1{font-size:27px;}
h2{font-size:21px;}
.sub{font-size:15px;}
.sec{padding:36px var(--gutter);}
.site-footer{padding:36px var(--gutter) 32px;}
.foot-grid{grid-template-columns:1fr 1fr; gap:20px;}
.cta-band{flex-direction:column; align-items:flex-start;}
.footer-news input{width:100%;}
.footer-news{flex-direction:column; align-items:flex-start;}
}
@media(max-width:460px){
.foot-grid{grid-template-columns:1fr;}
.chip{width:100%; justify-content:space-between;}
.btn{width:100%; justify-content:center; margin-right:0; margin-bottom:10px;}
.cta-band .btn{width:auto;}
}
/* =====================================================================
ELEVATION LAYER v2 — full-bleed responsive, depth, color, motion
(loads last → wins). Content untouched; visual/layout only.
===================================================================== */
:root{
--content:1240px; /* inner content max */
--gutter:clamp(20px, 5vw, 64px); /* fluid side gutter, never 0 dead-space */
--pad-x:max(var(--gutter), calc((100% - var(--content)) / 2));
--sec-y:clamp(52px, 7vw, 96px);
--ink3:#111111; /* true-black hero/dark */
--paper:#fbfbfa; /* warm off-white */
--red-tint:#fdecec; /* red highlight surface */
--shadow-sm:0 2px 8px rgba(20,20,20,.05);
--shadow-md:0 10px 30px rgba(20,20,20,.08);
--shadow-lg:0 24px 60px rgba(20,20,20,.12);
--ease:cubic-bezier(.22,.61,.36,1);
}
/* ---- FULL-BLEED: kill the 1080 frame + gray canvas ---- */
html,body{max-width:100%; overflow-x:clip;}
body{background:var(--bg);}
.frame{
max-width:none; width:100%; margin:0; box-shadow:none; background:var(--bg);
}
/* thin top bar → red→black gradient accent */
.topbar{height:4px; background:linear-gradient(90deg, var(--brand) 0%, #b3161d 22%, var(--ink) 60%);}
/* scroll progress bar */
.scroll-progress{position:fixed; top:0; left:0; height:3px; width:0; z-index:200;
background:linear-gradient(90deg, var(--brand), #ff5a61); box-shadow:0 0 10px rgba(231,33,42,.5);
transition:width .1s linear;}
/* ---- header / nav aligned to content, full-bleed bar ---- */
.site-header{transition:box-shadow .3s, background .3s;}
.site-header.scrolled{box-shadow:0 6px 24px rgba(20,20,20,.08); backdrop-filter:saturate(1.1) blur(6px); background:rgba(255,255,255,.92);}
.nav{max-width:none; margin:0; padding-left:var(--pad-x); padding-right:var(--pad-x); gap:8px;}
.nav-links a{position:relative; transition:color .2s;}
.nav-links a:not(.nav-cta)::after{content:""; position:absolute; left:11px; right:11px; bottom:4px; height:2px;
background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease);}
.nav-links a:not(.nav-cta):hover{background:transparent; color:var(--ink);}
.nav-links a:not(.nav-cta):hover::after,
.nav-links a.active:not(.nav-cta)::after{transform:scaleX(1);}
/* CTA → brand red for color */
.nav-cta{background:var(--brand); box-shadow:0 6px 18px rgba(231,33,42,.28);}
.nav-cta:hover{background:#c81620;}
/* ---- sections: full-bleed background, centered content, fluid rhythm ---- */
.sec{padding:var(--sec-y) var(--pad-x); border-bottom:1px solid var(--line);}
.sec.tint{background:var(--paper);}
.sec.dark{background:var(--ink3);}
.hero-dark .sec, .cta-band{padding-left:0; padding-right:0;}
.hero-dark{padding-left:var(--pad-x); padding-right:var(--pad-x);}
/* ---- fluid typography ---- */
h1{font-size:clamp(31px, 4.6vw, 54px); line-height:1.08; letter-spacing:-.02em;}
h2{font-size:clamp(23px, 3vw, 36px); line-height:1.15; letter-spacing:-.015em;}
.sub{font-size:clamp(15px, 1.25vw, 18px); max-width:64ch;}
.eyebrow{display:inline-flex; align-items:center; gap:9px;}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--brand); display:inline-block;}
.sec.dark .eyebrow{color:#ff5a61;}
.sec.dark .eyebrow::before{background:#ff5a61;}
/* accent underline under section H2s */
.sec > h2:first-child, .sec > .eyebrow + h2{position:relative;}
/* ---- buttons: more presence ---- */
.btn{border-radius:6px; padding:14px 26px; box-shadow:var(--shadow-sm); transition:transform .15s var(--ease), box-shadow .25s, background .2s;}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-md);}
.btn:active{transform:translateY(0);}
.btn.ghost{box-shadow:none;}
/* ---- cards: depth + lift ---- */
.card{border-radius:12px; border-color:#e6e6e4; box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s, border-color .3s;}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:#dcdcda;}
.sec.dark .card{background:#1c1c1c; border-color:#2e2e2e;}
.sec.dark .card:hover{border-color:#3a3a3a;}
/* persona chips: red life on hover */
.chip{transition:transform .18s var(--ease), border-color .2s, color .2s, background .2s, box-shadow .2s;}
.chip:hover{background:#fff; color:var(--brand); border-color:var(--brand); transform:translateY(-2px); box-shadow:0 8px 22px rgba(231,33,42,.16);}
.chip:hover span{color:var(--brand);}
/* stat numbers a touch bigger + red bar glow */
.statgrid{gap:clamp(20px,3vw,40px);}
.stat .bar{height:4px; box-shadow:0 0 10px rgba(231,33,42,.4);}
/* links get red on hover */
.card .link, .quote b{transition:color .2s;}
/* ---- ANIMATED MESH HERO (home) ---- */
.hero-home{position:relative; overflow:hidden; isolation:isolate;
padding-top:clamp(56px,9vw,120px); padding-bottom:clamp(48px,7vw,90px);}
.hero-home > *:not(.hero-mesh){position:relative; z-index:1;}
.hero-mesh{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.hero-mesh::before{content:""; position:absolute; inset:-25%;
background:
radial-gradient(38% 38% at 18% 28%, rgba(231,33,42,.16), transparent 62%),
radial-gradient(34% 34% at 82% 18%, rgba(26,26,26,.10), transparent 60%),
radial-gradient(42% 42% at 72% 82%, rgba(231,33,42,.10), transparent 62%),
radial-gradient(30% 30% at 40% 70%, rgba(26,26,26,.06), transparent 60%);
animation:meshDrift 22s ease-in-out infinite alternate;}
.hero-mesh::after{content:""; position:absolute; inset:0;
background-image:linear-gradient(rgba(26,26,26,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(26,26,26,.05) 1px, transparent 1px);
background-size:44px 44px;
-webkit-mask-image:radial-gradient(70% 70% at 50% 40%, #000, transparent 78%);
mask-image:radial-gradient(70% 70% at 50% 40%, #000, transparent 78%);
animation:gridPan 40s linear infinite;}
@keyframes meshDrift{
0%{transform:translate3d(0,0,0) scale(1);}
100%{transform:translate3d(3%, -3%, 0) scale(1.08);}
}
@keyframes gridPan{ from{background-position:0 0,0 0;} to{background-position:44px 44px, 44px 44px;} }
/* ---- founder avatars: ring accent ---- */
.team-photo{width:clamp(96px,10vw,120px); height:clamp(96px,10vw,120px); transition:filter .4s, box-shadow .3s, transform .3s;
box-shadow:0 0 0 4px #fff, 0 0 0 5px var(--line);}
.card:hover .team-photo{filter:grayscale(0); box-shadow:0 0 0 4px #fff, 0 0 0 5px var(--brand); transform:scale(1.03);}
/* ---- hero photos: framing + subtle grade ---- */
.hero-visual{border-radius:14px; box-shadow:var(--shadow-lg); border:1px solid rgba(0,0,0,.06);}
.hero-visual img{transition:transform .6s var(--ease);}
.hero-visual:hover img{transform:scale(1.02);}
/* ---- dark band backgrounds (generated red-gauge texture) ---- */
.sec.dark{position:relative; overflow:hidden; isolation:isolate;}
.sec.dark > *{position:relative; z-index:1;}
.sec.dark::before{content:""; position:absolute; inset:0; z-index:0;
background-image:url("../img/band-b.jpg"); background-size:cover; background-position:right center;
opacity:.85; transform:scale(1.01);}
.sec.dark::after{content:""; position:absolute; inset:0; z-index:0;
background:linear-gradient(90deg, var(--ink3) 6%, rgba(17,17,17,.78) 46%, rgba(17,17,17,.42) 100%);}
/* darker sections holding right-side content keep card legibility (cards are opaque) */
/* ---- SCROLL REVEAL primitives ---- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1; transform:none;}
.reveal-stagger > *{opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease);}
.reveal-stagger.in > *{opacity:1; transform:none;}
.reveal-stagger.in > *:nth-child(2){transition-delay:.07s;}
.reveal-stagger.in > *:nth-child(3){transition-delay:.14s;}
.reveal-stagger.in > *:nth-child(4){transition-delay:.21s;}
.reveal-stagger.in > *:nth-child(5){transition-delay:.28s;}
.reveal-stagger.in > *:nth-child(6){transition-delay:.35s;}
@media(prefers-reduced-motion:reduce){
*{animation:none !important; scroll-behavior:auto !important;}
.reveal,.reveal-stagger > *{opacity:1 !important; transform:none !important;}
.hero-mesh{display:none;}
}
/* ---- responsive grid reflow (full-bleed friendly) ---- */
@media(max-width:1200px){ .g4{grid-template-columns:repeat(2,1fr);} }
@media(max-width:992px){
.hero-split{grid-template-columns:1fr; gap:24px;}
.g3{grid-template-columns:repeat(2,1fr);}
.foot-grid{grid-template-columns:1.6fr 1fr 1fr;}
}
@media(max-width:760px){
.nav{padding-left:20px; padding-right:20px;}
.site-header.scrolled{background:#fff;}
.g2,.g3,.g4{grid-template-columns:1fr;}
.statgrid{grid-template-columns:1fr 1fr;}
.foot-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:460px){
.statgrid{grid-template-columns:1fr 1fr;}
.foot-grid{grid-template-columns:1fr;}
}
/* =====================================================================
ELEVATION LAYER v3 — council-driven push to perfection (loads last)
===================================================================== */
:root{
--brand-bright:#ff3b43;
--brand-deep:#c81620;
--red-tint:#fdecec;
--sec-y-lg:clamp(84px, 11vw, 156px);
--sec-y-sm:clamp(34px, 4.5vw, 60px);
--content-narrow:820px;
--spring:cubic-bezier(.34,1.56,.64,1);
}
/* ---- mono brand system ---- */
.eyebrow{font-family:var(--font-mono); font-weight:700; letter-spacing:.16em;}
.mono-tag{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--brand);}
.datum{font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em;}
.topbar{height:5px; background:linear-gradient(90deg, var(--brand) 0%, var(--brand) 28%, var(--brand-deep) 44%, var(--ink) 80%);}
/* ---- HERO: bolder mesh, red bloom, ghost wordmark, red word, load arc ---- */
.hero-home{isolation:isolate;}
.hero-home::before{content:"TSA"; position:absolute; z-index:0; top:-.24em; right:-.03em;
font-family:var(--font-mono); font-weight:700; font-size:clamp(150px, 25vw, 440px);
line-height:.8; letter-spacing:-.05em; color:rgba(26,26,26,.035); pointer-events:none; user-select:none;}
.hero-mesh::before{
background:
radial-gradient(38% 40% at 16% 26%, rgba(231,33,42,.30), transparent 60%),
radial-gradient(50% 60% at 100% 0%, rgba(231,33,42,.20), transparent 58%),
radial-gradient(34% 34% at 84% 22%, rgba(26,26,26,.10), transparent 60%),
radial-gradient(42% 42% at 72% 84%, rgba(231,33,42,.14), transparent 62%);}
.hero-accent{color:var(--brand);}
.hero-home > *:not(.hero-mesh){opacity:0; transform:translateY(22px);}
.hero-home.loaded > *:not(.hero-mesh){opacity:1; transform:none;
transition:opacity .75s var(--ease), transform .75s var(--ease);}
.hero-home.loaded > *:nth-child(2){transition-delay:.04s;}
.hero-home.loaded > *:nth-child(3){transition-delay:.14s;}
.hero-home.loaded > *:nth-child(4){transition-delay:.26s;}
.hero-home.loaded > *:nth-child(5){transition-delay:.40s;}
/* ---- DARK SECTIONS: lit, rich, red ---- */
.sec.dark{border-top:1px solid rgba(255,255,255,.06);}
.sec.dark::after{
background:
radial-gradient(95% 130% at 18% -12%, rgba(231,33,42,.16), transparent 46%),
linear-gradient(160deg, #191919 0%, #0c0c0c 100%);}
.sec.dark .card{background:linear-gradient(180deg,#202020,#171717); border-color:#2e2e2e;
box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 30px rgba(0,0,0,.42);}
.sec.dark .card:hover{border-color:#3d3d3d;}
.sec.dark .btn:not(.ghost){background:var(--brand); color:#fff; box-shadow:0 10px 26px rgba(231,33,42,.35);}
.sec.dark .btn:not(.ghost):hover{background:var(--brand-deep);}
.wall-card{background:linear-gradient(180deg,#202020,#171717) !important; border-color:#2e2e2e !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 10px 30px rgba(0,0,0,.4);}
/* ---- CARDS: depth, red rail wipe, link arrow ---- */
.card{position:relative; background:linear-gradient(180deg,#ffffff,#fcfcfb);
box-shadow:0 1px 2px rgba(20,20,20,.04), 0 8px 22px rgba(20,20,20,.06);}
.card::after{content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:3px;
background:var(--brand); transform:scaleY(0); transform-origin:top; transition:transform .3s var(--ease);}
.card:hover::after{transform:scaleY(1);}
.card .link{display:inline-flex; align-items:center; gap:6px; color:var(--brand); font-weight:700;}
.card .link:hover{color:var(--brand-deep); text-decoration:none;}
.card .link::after{content:"\2192"; transition:transform .25s var(--ease);}
.card:hover .link::after{transform:translateX(4px);}
.card[style*="c0303a"]{background:linear-gradient(180deg,#fff, var(--red-tint)) !important; border:1.5px solid var(--brand) !important;}
.g3,.g4{grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));}
/* ---- STAT BAND ---- */
.stat b{font-size:clamp(42px, 5vw, 68px); line-height:.92; letter-spacing:-.03em; font-variant-numeric:tabular-nums;}
.stat .bar{width:40px; height:4px; margin:12px 0; background:linear-gradient(90deg,var(--brand),var(--brand-bright)); box-shadow:0 0 12px rgba(231,33,42,.45);}
.stat h5{font-family:var(--font-mono); letter-spacing:.12em;}
.statgrid{gap:0;}
.statgrid > .stat{padding:6px clamp(18px,2.4vw,34px); transition:background .25s;}
.statgrid > .stat + .stat{border-left:1px solid var(--line);}
.stat:hover{background:var(--red-tint);}
@media(max-width:760px){ .statgrid > .stat + .stat{border-left:0;} }
/* ---- RED AS STRUCTURE ---- */
.link{color:var(--brand);}
.btn.ghost:hover{background:var(--red-tint); color:var(--brand); border-color:var(--brand);}
.quote{border-left-width:5px; background:linear-gradient(90deg, var(--red-tint), transparent 62%); padding:12px 0 12px 22px; border-radius:0 6px 6px 0;}
.quote b{color:var(--brand-deep);}
.sec h2{position:relative;}
.sec h2::after{content:""; display:block; width:52px; height:4px; margin-top:16px; border-radius:2px;
background:linear-gradient(90deg, var(--brand), var(--brand-bright)); transform-origin:left; transition:transform .5s var(--ease) .1s;}
.reveal h2::after{transform:scaleX(0);} .reveal.in h2::after{transform:scaleX(1);}
.sec.dark h2::after{background:linear-gradient(90deg, var(--brand-bright), transparent);}
.site-footer{background:linear-gradient(160deg,#171717,#0c0c0c); border-top:3px solid var(--brand);}
.site-footer .tagline{font-size:20px;}
.foot-grid h4{font-family:var(--font-mono); color:#fff;}
.foot-grid h4::before{content:"// "; color:var(--brand-bright);}
.footer-news button{background:var(--brand); border-color:var(--brand); color:#fff;}
.footer-news button:hover{background:var(--brand-deep); border-color:var(--brand-deep);}
.brand-box .mono .r, .brand-box .name .r{color:var(--brand-bright);}
/* ---- VERTICAL RHYTHM tiers ---- */
.sec--statement{padding-top:var(--sec-y-lg); padding-bottom:var(--sec-y-lg);}
.sec--statement h2{font-size:clamp(26px,4vw,44px);}
.sec--tight{padding-top:var(--sec-y-sm); padding-bottom:var(--sec-y-sm);}
.eyebrow::before{transition:width .5s var(--ease) .12s;}
.reveal .eyebrow::before{width:0;} .reveal.in .eyebrow::before{width:22px;}
/* ---- PAGE-SCOPED UPGRADES ---- */
#insights .insight-card{position:relative;}
#insights .insight-thumb{filter:contrast(1.04) saturate(1.02); background:#141414;}
#cases .grid{counter-reset:cs;}
#cases .card{counter-increment:cs; padding-top:52px; overflow:hidden;}
#cases .card::before{content:"CS-0" counter(cs); position:absolute; top:16px; right:18px; z-index:1;
font-family:var(--font-mono); font-weight:700; font-size:26px; letter-spacing:-.02em; color:#eceae7; transition:color .3s;}
#cases .card:hover::before{color:var(--brand);}
#cases .card p b{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--brand);}
#cases .card h3{font-size:19px; letter-spacing:-.01em; padding-right:60px;}
#report .card{padding:0; overflow:hidden;}
#report .card .ph{background:linear-gradient(160deg,#1c1c1c,#0d0d0d); border:0; height:120px; position:relative; font-size:0; color:transparent;}
#report .card .ph::before{content:""; position:absolute; top:16px; left:16px; right:42%; height:6px; background:rgba(255,255,255,.14); box-shadow:0 12px 0 rgba(255,255,255,.09), 0 24px 0 rgba(255,255,255,.06);}
#report .card .ph::after{content:""; position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%;
background:conic-gradient(var(--rag-g) 0 33%, var(--rag-a) 0 66%, var(--rag-r) 0);}
#report .card p{padding:14px 16px 18px;}
#report .card p b{font-size:14px;}
#contact input, #contact textarea, #contact select{
width:100%; border:1px solid var(--line); border-radius:8px; background:#fff; padding:13px 15px;
font:15px/1.4 var(--font-sans); color:var(--ink); transition:border-color .2s, box-shadow .2s;}
#contact input:focus, #contact textarea:focus, #contact select:focus{
border-color:var(--brand); box-shadow:0 0 0 3px rgba(231,33,42,.12); outline:0;}
#contact ::placeholder{font-family:var(--font-mono); color:var(--soft); font-size:13px;}
#contact .scheduler{border:1px solid var(--line); border-radius:10px; background:linear-gradient(160deg,#fafafa,#f2f2f0);
min-height:200px; display:flex; align-items:center; justify-content:center; color:var(--soft); font-family:var(--font-mono); font-size:12px; letter-spacing:.08em;}
/* ---- MOTION: directional + indexed stagger, will-change, a11y ---- */
.reveal-left{transform:translateX(-30px);} .reveal-left.in{transform:none;}
.reveal-right{transform:translateX(30px);} .reveal-right.in{transform:none;}
.reveal-scale{transform:scale(.965) translateY(16px);} .reveal-scale.in{transform:none;}
.reveal-stagger.in > *{transition-delay:calc(var(--i,0) * 65ms);}
.reveal:not(.in), .reveal-stagger:not(.in) > *{will-change:opacity, transform;}
.reveal.in, .reveal-stagger.in > *{will-change:auto;}
.nav-cta:hover{box-shadow:0 10px 26px rgba(231,33,42,.4);}
.site-header.scrolled .brand img{transform:scale(.92); transition:transform .3s var(--ease);}
.btn:focus-visible, .chip:focus-visible, .nav-cta:focus-visible{outline:2px solid var(--brand); outline-offset:3px;}
.nav-links a:focus-visible::after{transform:scaleX(1);}
@media(prefers-reduced-motion:reduce){
.hero-mesh{display:block !important;}
.hero-home > *:not(.hero-mesh){opacity:1 !important; transform:none !important;}
.sec h2::after, .reveal.in .eyebrow::before{transform:none !important; width:22px !important;}
}
/* =====================================================================
ELEVATION LAYER v4 — real logos, expanded hero/cases/insights
===================================================================== */
/* ---- client logo wall ---- */
.logo-wall{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px; margin-top:18px;
border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--line);}
.logo-cell{display:flex; align-items:center; justify-content:center; background:#fff; padding:22px 20px; min-height:92px;}
.logo-cell img{max-height:34px; max-width:100%; width:auto; object-fit:contain;
filter:grayscale(1) contrast(1.05); opacity:.62; transition:opacity .25s, filter .25s, transform .25s;}
.logo-cell:hover img{opacity:1; transform:scale(1.05);}
@media(max-width:640px){ .logo-wall{grid-template-columns:repeat(2,1fr);} .logo-cell{padding:16px; min-height:76px;} }
/* ---- expanded asymmetric home hero ---- */
.hero-home.hero-xl{padding-top:clamp(12px,2.2vw,40px); padding-bottom:clamp(40px,6vw,90px);}
.hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(28px,5vw,72px); align-items:center;}
.hero-grid .hero-copy h1{font-size:clamp(34px,5.4vw,68px);}
.hero-art{position:relative; border-radius:18px; overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid rgba(0,0,0,.06);}
.hero-art img{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:4/5;}
@media(max-width:900px){ .hero-grid{grid-template-columns:1fr;} .hero-art{max-width:440px;} }
@media(max-width:600px){ .hero-art{display:none;} }
/* ---- case studies expanded ---- */
.cs-hero-img{aspect-ratio:16/6; object-fit:cover; width:100%; border-radius:14px; box-shadow:var(--shadow-lg);}
.case-card{position:relative; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s;}
.case-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg);}
.case-card .cs-strip{width:100%; height:118px; object-fit:cover; display:block; filter:grayscale(.2);}
.case-card .cs-body{padding:20px 22px 22px; display:flex; flex-direction:column; gap:10px; flex:1;}
.case-card .cs-tag{display:flex; justify-content:space-between; align-items:center;}
.case-card .cs-tag .sector{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--brand); font-weight:700;}
.case-card .cs-tag .idx{font-family:var(--font-mono); font-size:12px; color:var(--soft);}
.case-card h3{font-size:19px; letter-spacing:-.01em; margin:0;}
.case-card .sao{display:grid; gap:8px; margin-top:2px;}
.case-card .sao div{font-size:13.5px; color:var(--mid); line-height:1.5;}
.case-card .sao b{font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); display:block; margin-bottom:1px;}
.case-card .outcome{margin-top:auto; display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
background:var(--red-tint); color:var(--brand-deep); font-weight:700; font-size:13px; padding:8px 14px; border-radius:20px;}
.case-card .outcome::before{content:"\2713"; font-weight:700;}
.cases-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:20px; margin-top:22px;}
/* ---- insights expanded ---- */
.feat-article{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,4vw,56px); align-items:center; margin-top:8px;}
.feat-article .feat-img{border-radius:16px; overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:16/10;}
.feat-article .feat-img img{width:100%; height:100%; object-fit:cover; display:block;}
.feat-article .feat-cat{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); font-weight:700;}
.feat-article h2{font-size:clamp(24px,3.2vw,38px); margin:12px 0 12px;}
.feat-article .feat-meta{font-family:var(--font-mono); font-size:12px; color:var(--soft); letter-spacing:.04em; margin-top:14px;}
@media(max-width:820px){ .feat-article{grid-template-columns:1fr;} }
.art-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:20px; margin-top:22px;}
.art-card{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s; cursor:pointer;}
.art-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg);}
.art-card .art-img{aspect-ratio:3/2; overflow:hidden; background:#141414;}
.art-card .art-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease);}
.art-card:hover .art-img img{transform:scale(1.04);}
.art-card .art-body{padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px; flex:1;}
.art-card .art-cat{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--brand); font-weight:700;}
.art-card h3{font-size:17px; line-height:1.32; letter-spacing:-.005em; margin:0;}
.art-card .art-meta{margin-top:auto; font-family:var(--font-mono); font-size:11.5px; color:var(--soft);}
/* =====================================================================
ELEVATION LAYER v5 — council round-1 fixes (a11y, contrast, brand, perf)
===================================================================== */
:root{
--font-mono:"JetBrains Mono","Consolas","SFMono-Regular","Courier New",monospace;
--soft:#6e6e6e; /* was #888 — now AA on white (~4.9:1) */
}
/* skip link */
.skip-link{position:absolute; left:-9999px; top:auto;}
.skip-link:focus{position:fixed; left:12px; top:12px; z-index:300; background:#fff; color:var(--ink);
padding:10px 16px; border-radius:6px; border:2px solid var(--brand); font-weight:700; box-shadow:var(--shadow-md);}
main:focus{outline:none;}
/* global focus-visible (keyboard) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.chip:focus-visible, [role="link"]:focus-visible, [role="button"]:focus-visible{
outline:2px solid var(--brand); outline-offset:2px; border-radius:3px;}
/* brand: stronger hero red + heavier accents */
.hero-mesh::before{
background:
radial-gradient(40% 42% at 15% 24%, rgba(231,33,42,.40), transparent 60%),
radial-gradient(52% 62% at 100% 0%, rgba(231,33,42,.24), transparent 58%),
radial-gradient(34% 34% at 85% 22%, rgba(26,26,26,.10), transparent 60%),
radial-gradient(44% 44% at 72% 86%, rgba(231,33,42,.16), transparent 62%);}
.stat .bar{width:52px; height:5px;}
.cta-band{border-left:4px solid var(--brand); padding-left:clamp(16px,2vw,24px);}
.sec.dark .cta-band{border-left-color:var(--brand);}
/* logo wall: more presence, lighter seams */
.logo-wall{background:#ededed;}
.logo-cell img{opacity:.8; filter:grayscale(1) contrast(1.1);}
.logo-cell:hover img{opacity:1;}
/* thumbnails: brighter, distinct, red top edge */
.art-card{border-top:3px solid var(--brand);}
.art-card .art-img img, .case-card .cs-strip{filter:contrast(1.12) brightness(1.08);}
.feat-article .feat-img img{filter:contrast(1.08) brightness(1.05);}
/* grids: fixed columns to avoid stranded orphans */
.art-grid{grid-template-columns:repeat(3,1fr);}
.cases-grid{grid-template-columns:repeat(3,1fr);}
@media(max-width:900px){ .art-grid,.cases-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:620px){ .art-grid,.cases-grid{grid-template-columns:1fr;} }
/* mobile: keep hero art (reflow, don't delete brand presence) */
@media(max-width:600px){
.hero-art{display:block; max-width:100%; margin-top:22px; box-shadow:var(--shadow-md);}
.hero-art img{aspect-ratio:16/10;}
.stat b{font-size:34px;}
}
/* contact: real form spacing */
#contact form{display:grid; gap:10px;}
#contact label.field-label{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--soft); margin-top:4px;}
#contact .form-note{font-size:12.5px; color:var(--mid); margin-top:6px;}
#contact .form-ok{display:none; margin-top:12px; padding:12px 16px; border-radius:8px; background:var(--red-tint); color:var(--brand-deep); font-weight:600; font-size:14px;}
#contact .form-ok.show{display:block;}
.trust-strip{display:flex; gap:10px 22px; flex-wrap:wrap; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; color:var(--soft); margin-top:16px;}
.trust-strip span::before{content:"// "; color:var(--brand);}
/* stat labels (was , now
for correct heading order) */
.stat-h5{font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px; font-weight:700; color:var(--ink);}
/* design round-2 polish */
:root{ --meta:#5a5a5a; }
.art-card .art-meta, .case-card .cs-tag .idx, .trust-strip, .feat-meta{ color:var(--meta); }
.eyebrow + h2::after{ display:none; } /* avoid double red mark when eyebrow precedes */
.sec.dark::after{
background:
radial-gradient(95% 130% at 18% -12%, rgba(231,33,42,.13), transparent 46%),
linear-gradient(160deg, rgba(20,20,20,.92) 0%, #0c0c0c 100%);}
@media(max-width:900px){ .statgrid{grid-template-columns:1fr 1fr;} .statgrid > .stat:nth-child(odd){border-left:0;} }
@media(max-width:460px){ .hero-chips,.chip-row{gap:8px;} }
/* insight cards become real links */
a.art-card{text-decoration:none; color:inherit;}
a.art-card:hover h3{color:var(--brand-deep);}
/* ---- rotating client logo marquee (replaces the grid) ---- */
.logo-marquee{position:relative; overflow:hidden; margin-top:18px; padding:26px 0;
border-top:1px solid var(--line); border-bottom:1px solid var(--line);
-webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);}
.logo-track{display:flex; align-items:center; gap:clamp(40px,6vw,80px); width:max-content;
animation:logoScroll 55s linear infinite; will-change:transform;}
.logo-marquee:hover .logo-track{animation-play-state:paused;}
.logo-item{flex:0 0 auto; display:flex; align-items:center; justify-content:center;}
.logo-item img{height:30px; width:auto; max-width:none; display:block;
filter:grayscale(1) contrast(1.1); opacity:.6; transition:opacity .25s, filter .25s;}
.logo-item:hover img{opacity:1;}
@keyframes logoScroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media(prefers-reduced-motion:reduce){
.logo-track{animation:none; flex-wrap:wrap; justify-content:center; width:auto; gap:34px 52px;}
.logo-item.is-dup{display:none;}
}
/* nav CTA hover fix: stay red with white text (was inheriting a light bg) */
.site-header .nav-cta{background:var(--brand); color:#fff;}
.site-header .nav-cta:hover, .site-header .nav-cta:focus-visible{background:var(--brand-deep); color:#fff;}
/* hero crystal video */
.hero-art .hero-vid{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:4/5; background:#f2f2f2;}
@media(max-width:600px){ .hero-art .hero-vid{aspect-ratio:16/10;} }
/* "See the work" image: crop to a short aspect so it doesn't elongate the section */
.see-work img{aspect-ratio:21/9; height:auto; object-fit:cover; object-position:center;}
@media(max-width:760px){ .see-work img{aspect-ratio:16/9;} }
/* "See the work" — quote column matches the image height */
.see-work-grid{align-items:center;}
.see-work-grid > div:first-child{display:flex; flex-direction:column;}
.see-work-grid > .quote{margin:0;}
@media(max-width:760px){ .see-work-grid > .quote{height:auto;} }
/* ---- Sample report: expandable extract cards ---- */
.report-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:22px;}
@media(max-width:760px){ .report-grid{grid-template-columns:1fr;} }
.rpt-card{border:1px solid var(--line); border-radius:12px; background:#fff; overflow:hidden;
box-shadow:0 1px 2px rgba(20,20,20,.04); transition:box-shadow .3s, border-color .3s, transform .3s;}
.rpt-card:hover{transform:translateY(-2px);}
.rpt-card.open{box-shadow:var(--shadow-md); border-color:#dcdcda;}
.rpt-head{display:flex; align-items:center; gap:14px; width:100%; text-align:left; background:none;
border:0; cursor:pointer; padding:16px 18px; font:inherit; color:inherit;}
.rpt-doc{flex:0 0 auto; width:38px; height:46px; border-radius:4px; position:relative;
background:linear-gradient(160deg,#1f1f1f,#0c0c0c); box-shadow:0 2px 6px rgba(0,0,0,.25);}
.rpt-doc::before{content:""; position:absolute; top:8px; left:7px; right:16px; height:3px;
background:rgba(255,255,255,.18); box-shadow:0 7px 0 rgba(255,255,255,.11), 0 14px 0 rgba(255,255,255,.07);}
.rpt-doc::after{content:""; position:absolute; bottom:7px; right:7px; width:12px; height:12px; border-radius:50%;
background:conic-gradient(var(--rag-g) 0 33%, var(--rag-a) 0 66%, var(--rag-r) 0);}
.rpt-main{flex:1; display:flex; flex-direction:column; gap:3px; min-width:0;}
.rpt-title{font-weight:700; font-size:14.5px; line-height:1.25; letter-spacing:-.005em;}
.rpt-score{font-family:var(--font-mono); font-size:11px; color:var(--brand); letter-spacing:.04em;}
.rpt-pm{flex:0 0 auto; font-family:var(--font-mono); font-size:20px; line-height:1; color:var(--soft);
transition:transform .3s var(--ease), color .3s;}
.rpt-card.open .rpt-pm{transform:rotate(45deg); color:var(--brand);}
.rpt-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .38s var(--ease);}
.rpt-body > div{overflow:hidden;}
.rpt-card.open .rpt-body{grid-template-rows:1fr;}
.rpt-body p{font-size:13.5px; color:var(--mid); line-height:1.62; margin:0; padding:0 18px 18px 70px;}
@media(max-width:760px){ .rpt-body p{padding-left:18px;} }
/* form success states + calendly frame */
.news-ok{display:none;}
.news-ok.show{display:inline-block; color:#7bdc8f; font-weight:600; margin-left:8px; font-size:12.5px;}
.calendly-inline-widget{border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff;}
/* self-assessment checkboxes/radios → brand red */
input[type="checkbox"], input[type="radio"]{accent-color:var(--brand);}
.chk input{width:17px; height:17px;}
/* gated sample-report success message */
.dl-ok{display:none;}
.dl-ok.show{display:inline-block; color:#7bdc8f; font-weight:600; font-size:13px; max-width:360px; line-height:1.4;}
/* =====================================================================
HERO reveal — blend the car into the page + end-of-loop caption
===================================================================== */
.hero-reveal{position:relative; border:0; border-radius:0; box-shadow:none; overflow:hidden; background:transparent;}
.hero-reveal .hero-vid{mix-blend-mode:normal; aspect-ratio:4/5; width:100%; height:100%; object-fit:contain; background:transparent;}
.hero-caption{position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:12%;
opacity:0; transition:opacity .7s var(--ease); pointer-events:none;
background:rgba(251,251,250,.92);}
.hero-caption.show{opacity:1;}
.hero-caption .cap-inner{display:flex; flex-direction:column; align-items:center; gap:clamp(16px,2vw,26px); text-align:center; max-width:94%;}
.cap-l1{font-family:var(--font-mono); font-size:clamp(11px,1.15vw,15px); letter-spacing:.2em; text-transform:uppercase; color:var(--soft);}
.cap-l2{font-family:var(--font-sans); font-weight:800; font-size:clamp(28px,3.8vw,52px); line-height:1.5; letter-spacing:-.02em; color:var(--ink);}
.cap-l2 mark{background:var(--brand); color:#fff; padding:.08em .22em; border-radius:8px; box-shadow:0 12px 30px rgba(231,33,42,.36);
-webkit-box-decoration-break:clone; box-decoration-break:clone;}
.cap-l3{position:relative; font-family:var(--font-sans); font-weight:700; font-size:clamp(17px,2vw,26px); letter-spacing:-.01em; color:var(--ink);}
.cap-red{color:var(--brand);}
/* dramatic, staggered, parts-based entrance (plays when .show is added at loop end) */
.cap-l1{opacity:0; transform:translateY(-16px);}
.cap-l2{opacity:0; transform:scale(1.5); filter:blur(8px);}
.cap-l3{opacity:0; transform:translateY(22px);}
.hero-caption.show .cap-l1{animation:capDrop .55s var(--ease) .05s forwards;}
.hero-caption.show .cap-l2{animation:capStamp .6s cubic-bezier(.2,.9,.2,1) .28s forwards;}
.hero-caption.show .cap-l3{animation:capRise .55s var(--ease) .62s forwards;}
.cap-l3::after{content:""; position:absolute; left:50%; bottom:-10px; width:0; height:3px; background:var(--brand); border-radius:2px; transform:translateX(-50%);}
.hero-caption.show .cap-l3::after{animation:capUnderline .5s var(--ease) .9s forwards;}
@keyframes capDrop{to{opacity:1; transform:none;}}
@keyframes capRise{to{opacity:1; transform:none;}}
@keyframes capStamp{0%{opacity:0; transform:scale(1.5); filter:blur(8px);} 60%{opacity:1; transform:scale(.94); filter:blur(0);} 80%{transform:scale(1.03);} 100%{opacity:1; transform:none; filter:blur(0);}}
@keyframes capUnderline{to{width:64px;}}
@media(prefers-reduced-motion:reduce){ .cap-l1,.cap-l2,.cap-l3{opacity:1 !important; transform:none !important; filter:none !important;} }
@media(max-width:600px){ .hero-reveal .hero-vid{aspect-ratio:16/10;} }
@media(prefers-reduced-motion:reduce){ .hero-caption{opacity:1;} }
/* caption elevation: one-line highlight, shine sweep + glow (site fonts) */
.cap-l2{white-space:nowrap;}
.cap-l2 mark{position:relative; overflow:hidden;}
.cap-l2 mark::after{content:""; position:absolute; top:0; left:-70%; width:55%; height:100%;
background:linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent); transform:skewX(-18deg); pointer-events:none;}
.hero-caption.show .cap-l2 mark::after{animation:capShine .75s ease .9s forwards;}
.hero-caption.show .cap-l2 mark{animation:capGlow 1.9s ease-in-out 1.1s;}
@keyframes capShine{from{left:-70%;} to{left:140%;}}
@keyframes capGlow{0%,100%{box-shadow:0 12px 30px rgba(231,33,42,.36);} 50%{box-shadow:0 14px 46px rgba(231,33,42,.62), 0 0 0 5px rgba(231,33,42,.12);}}
@media(max-width:760px){ .cap-l2{white-space:normal;} }
/* caption: NO background box — text sits on the video with shadows (keeps the blend) */
.hero-caption{background:transparent !important; backdrop-filter:none !important;}
.cap-l1{color:#efefef; text-shadow:0 2px 12px rgba(0,0,0,.65), 0 0 3px rgba(0,0,0,.5);}
.cap-l2{color:#fff;}
.cap-l3{color:#fff; text-shadow:0 3px 16px rgba(0,0,0,.7), 0 0 3px rgba(0,0,0,.55);}
.cap-red{color:#ff5a61; text-shadow:0 3px 16px rgba(0,0,0,.6);}
/* caption v2: white highlight on line 3 (black "of your" + red "tech investment"), halo kicker */
.cap-l1{color:var(--ink); text-shadow:0 0 10px rgba(255,255,255,.95), 0 0 4px rgba(255,255,255,.9);}
.cap-l2{color:#fff;}
.cap-hl{background:#fff; color:var(--ink); padding:.1em .26em; border-radius:8px; box-shadow:0 12px 30px rgba(20,20,20,.18);
-webkit-box-decoration-break:clone; box-decoration-break:clone; white-space:nowrap;}
.cap-hl .cap-blk{color:var(--ink);}
.cap-hl .cap-red{color:var(--brand); text-shadow:none;}
.cap-l3{text-shadow:none;}
@media(max-width:760px){ .cap-hl{white-space:normal;} }
/* kicker stays white (shows over the dark open hood at the end) */
.cap-l1{color:#fff !important; text-shadow:0 2px 12px rgba(0,0,0,.6), 0 0 3px rgba(0,0,0,.55) !important;}