/* ============================================================================
START HERE -- Grit Blueprint (self-contained page stylesheet)
Assembled from the design export: the design-system homepage CSS the page was
built against (NOT the live gb-home.css, which has drifted), the flow-text
shimmer layer, and the page's own Start Here component styles. Brand tokens +
@font-face come from the globally enqueued colors_and_type.css.
This page is intentionally NOT wrapped in .gb-app: the export styles every
heading with single-class rules (e.g. .display, 0,1,0) and sets its base font
on , so wrapping in .gb-app would let the theme's ".gb-app h1..h4,p"
base rules (0,1,1) override and shrink/recolor every heading. The wrapper here
is .gb-start-here, and the bundled CSS below owns typography exactly as
designed. Loaded only on body.gb-start-here-tpl (conditional enqueue).
============================================================================ */
/* ---- base (no .gb-app: restore what the theme's .gb-app base would give) ---- */
.gb-start-here button,.gb-start-here input,.gb-start-here select,.gb-start-here textarea{font-family:inherit;}
/* ---- header offset: pull hero up under the transparent sticky Elementor header ---- */
body.gb-start-here-tpl{--gb-header-h:130px;}
@media (max-width:920px){body.gb-start-here-tpl{--gb-header-h:120px;}}
@media (max-width:760px){body.gb-start-here-tpl{--gb-header-h:100px;}}
body.gb-start-here-tpl #content,body.gb-start-here-tpl .site-content{padding-top:0!important;margin-top:0!important;}
body.gb-start-here-tpl .gb-start-here{margin-top:calc(-1 * var(--gb-header-h))!important;}
html:has(body.gb-start-here-tpl){scroll-behavior:smooth;}
body.gb-start-here-tpl{scroll-padding-top:var(--gb-header-h);}
/* hero sits under the header: give its content room to clear the overlay */
body.gb-start-here-tpl .hx{min-height:100vh;}
body.gb-start-here-tpl .hx-inner{padding-top:calc(var(--gb-header-h) + 32px);}
@media (max-width:760px){body.gb-start-here-tpl .hx-inner{padding-top:calc(var(--gb-header-h) + 20px);}}
/* ============================== [1] DESIGN-SYSTEM BASE + COMPONENTS ============================== */
/* ===========================================================================
GRIT BLUEPRINT — HOMEPAGE (redesign)
Layers on colors_and_type.css. Zuume display headers, Helvetica body,
navy authority + pink signal. Built for human readers, SEO, and AI search.
=========================================================================== */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
font-family:var(--font-sans);
color:var(--fg1);
background:var(--gb-navy-900);
-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
button{font-family:inherit;}
/* ---------- layout ------------------------------------------------------ */
.wrap{max-width:1240px;margin:0 auto;padding:0 40px;}
.wrap-narrow{max-width:960px;margin:0 auto;padding:0 40px;}
section{position:relative;}
.sec{padding:var(--sec-pad,104px) 0;}
.sec-sm{padding:72px 0;}
.dark{background:var(--gb-navy-900);color:#fff;}
.navy{background:var(--gb-navy-800);color:#fff;}
.paper{background:var(--gb-paper);color:var(--fg1);}
.white{background:#fff;color:var(--fg1);}
/* ---------- type helpers ------------------------------------------------ */
.eyebrow{
font-family:var(--font-sans);font-weight:700;font-size:13.5px;
letter-spacing:.2em;text-transform:uppercase;color:var(--gb-pink);
margin:0 0 20px;display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gb-pink);display:inline-block;}
.eyebrow.center{justify-content:center;}
.display{
font-family:var(--font-display);font-weight:700;text-transform:uppercase;
line-height:.9;letter-spacing:.005em;margin:0;
font-size:clamp(52px,7.2vw,104px);
}
.h2{
font-family:var(--font-display);font-weight:700;text-transform:uppercase;
line-height:.94;letter-spacing:.01em;margin:0;
font-size:clamp(34px,4.4vw,56px);
}
.h3{
font-family:var(--font-display);font-weight:700;text-transform:uppercase;
line-height:1.0;letter-spacing:.015em;margin:0;font-size:clamp(22px,2.4vw,30px);
}
.lead{font-size:clamp(18px,1.5vw,21px);line-height:1.6;color:var(--fg2);}
.dark .display,.navy .display,.hero .display,.cta-band .display{color:#fff;}
.dark h1,.dark h2,.dark h3,.dark h4,.navy h1,.navy h2,.navy h3,.navy h4,
.dark .h2,.dark .h3,.navy .h2,.navy .h3,.cta-band h2{color:#fff;}
.dark .lead,.navy .lead{color:var(--fg-on-dark-2);}
.pink{color:var(--gb-pink);}
.measure{max-width:62ch;}
em.hl{font-style:normal;color:var(--gb-pink);}
/* ---------- buttons ----------------------------------------------------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
font-family:var(--font-sans);font-weight:700;font-size:14px;letter-spacing:.08em;
text-transform:uppercase;border:none;border-radius:var(--radius-pill);
padding:16px 30px;cursor:pointer;white-space:nowrap;
transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),background var(--dur),border-color var(--dur),color var(--dur);
}
.btn svg{width:17px;height:17px;}
.btn:active{transform:translateY(1px);}
.btn-pink{background:var(--gb-pink);color:#fff;box-shadow:var(--shadow-pink-glow);}
.btn-pink:hover{box-shadow:0 16px 40px -10px rgba(255,24,148,.6);transform:translateY(-2px);}
.btn-pink:active{background:var(--gb-pink-600);}
.btn-blue{background:var(--gb-blue-500);color:#fff;box-shadow:var(--shadow-blue-glow);}
.btn-blue:hover{background:var(--gb-blue-700);transform:translateY(-2px);}
.btn-white{background:#fff;color:var(--gb-navy);}
.btn-white:hover{background:#eef2f7;transform:translateY(-2px);}
.btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45);}
.btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.08);}
.btn-outline-navy{background:transparent;color:var(--gb-navy);border:1.5px solid rgba(24,53,94,.3);}
.btn-outline-navy:hover{border-color:var(--gb-navy);background:rgba(24,53,94,.05);}
.btn-lg{padding:19px 38px;font-size:15px;}
.btn-sm{padding:11px 20px;font-size:12.5px;}
.textlink{
font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
color:var(--gb-blue-500);display:inline-flex;align-items:center;gap:7px;cursor:pointer;
transition:gap var(--dur) var(--ease-out),color var(--dur);
}
.textlink svg{width:15px;height:15px;}
.textlink:hover{gap:12px;color:var(--gb-pink);}
.dark .textlink,.navy .textlink{color:var(--gb-blue-300);}
.dark .textlink:hover,.navy .textlink:hover{color:var(--gb-pink);}
/* ---------- motifs ------------------------------------------------------ */
.bp-grid::before{
content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
background:
linear-gradient(rgba(53,108,160,.16) 1px,transparent 1px),
linear-gradient(90deg,rgba(53,108,160,.16) 1px,transparent 1px);
background-size:64px 64px;
-webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 40%,transparent 88%);
mask-image:radial-gradient(120% 90% at 50% 0%,#000 40%,transparent 88%);
}
.bp-grid > *{position:relative;z-index:1;}
.ombre{background:var(--gb-ombre-radial);}
.watermark-mark{position:absolute;pointer-events:none;opacity:.05;z-index:0;}
/* corner markers */
.corners::before,.corners::after{
content:"";position:absolute;width:18px;height:18px;border:2px solid var(--gb-pink);pointer-events:none;
}
.corners::before{top:14px;left:14px;border-right:0;border-bottom:0;}
.corners::after{bottom:14px;right:14px;border-left:0;border-top:0;}
/* slanted dividers */
.slant-top{position:absolute;top:-1px;left:0;right:0;height:70px;z-index:2;}
.slant-bottom{position:absolute;bottom:-1px;left:0;right:0;height:70px;z-index:2;}
/* ---------- top utility bar -------------------------------------------- */
.util{
background:var(--gb-navy-900);color:var(--fg-on-dark-3);
font-size:12px;letter-spacing:.04em;border-bottom:1px solid rgba(255,255,255,.07);
}
.util .wrap{display:flex;align-items:center;justify-content:space-between;height:38px;}
.util b{color:var(--gb-pink);font-weight:700;}
.util .util-right{display:flex;gap:22px;align-items:center;}
.util .util-right a{transition:color var(--dur);}
.util .util-right a:hover{color:#fff;}
/* ---------- nav --------------------------------------------------------- */
.nav{
position:sticky;top:0;z-index:80;background:rgba(14,30,55,.92);
backdrop-filter:blur(10px);border-bottom:1px solid rgba(79,180,230,.16);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:78px;gap:24px;}
.nav-logo-link{display:inline-flex;align-items:center;}
.nav-logo{height:24px;width:auto;cursor:pointer;}
.nav-links{display:flex;align-items:center;align-self:stretch;gap:4px;}
.nav-item{position:relative;display:flex;align-items:center;align-self:stretch;}
.nav-link{
display:flex;align-items:center;gap:5px;padding:10px 14px;cursor:pointer;
font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#C7D2E2;
transition:color var(--dur);
background:transparent;border:none;font-family:var(--font-sans);
}
.nav-link svg{width:13px;height:13px;opacity:.7;transition:transform var(--dur);}
.nav-item:hover .nav-link,.nav-item:focus-within .nav-link,.nav-item.open .nav-link,.nav-link.active{color:#fff;}
.nav-item:hover .nav-link svg,.nav-item:focus-within .nav-link svg,.nav-item.open .nav-link svg{transform:rotate(180deg);}
.nav-cta{display:flex;align-items:center;gap:14px;}
.nav-signal{position:absolute;left:0;right:0;bottom:-1px;height:2px;
background:linear-gradient(90deg,var(--gb-pink),var(--gb-blue-500));}
/* mega menu */
.mega{
position:absolute;top:calc(100% + 9px);left:0;min-width:300px;
max-width:calc(100vw - 32px);z-index:20;
background:#fff;border-radius:12px;box-shadow:0 30px 70px -24px rgba(0,0,0,.55);
padding:14px;opacity:0;visibility:hidden;transform:translateY(8px);
transition:opacity var(--dur),transform var(--dur),visibility var(--dur);
border-top:3px solid var(--gb-pink);
}
.mega.wide{min-width:560px;display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.nav-item:hover .mega,.nav-item:focus-within .mega,.nav-item.open .mega{opacity:1;visibility:visible;transform:translateY(0);}
.mega a{
display:block;padding:11px 14px;border-radius:8px;cursor:pointer;
transition:background var(--dur);
}
.mega a:hover{background:var(--gb-paper);}
.mega .mt{font-family:var(--font-sans);font-weight:700;font-size:13.5px;color:var(--gb-navy);letter-spacing:.01em;}
.mega .md{font-size:12px;color:var(--fg3);margin-top:2px;line-height:1.4;}
.mega .badge{font-size:9px;font-weight:800;letter-spacing:.1em;color:var(--gb-pink);
border:1px solid var(--gb-pink-100);background:var(--gb-pink-100);border-radius:99px;padding:2px 7px;margin-left:8px;}
.mega-foot{grid-column:1/-1;margin-top:6px;padding:14px;border-top:1px solid var(--gb-line);
display:flex;align-items:center;justify-content:space-between;gap:16px;}
.mega-foot .mf-txt{font-size:12.5px;color:var(--fg2);max-width:300px;line-height:1.45;}
/* mobile nav */
.nav-burger{display:none;background:none;border:none;color:#fff;cursor:pointer;padding:8px;}
.mobile-nav{display:none;}
/* ---------- hero -------------------------------------------------------- */
.hero{padding:88px 0 0;overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:1.35fr .9fr;gap:56px;align-items:center;padding-bottom:96px;}
.hero h1{margin:18px 0 26px;}
.hero .lead{max-width:54ch;margin-bottom:14px;}
.hero-frame{
font-family:var(--font-display);text-transform:uppercase;font-weight:700;
display:flex;flex-wrap:wrap;gap:0 14px;font-size:clamp(15px,1.5vw,18px);letter-spacing:.06em;
color:var(--fg-on-dark-3);margin:30px 0 34px;line-height:1.2;
}
.hero-frame b{color:#fff;font-weight:700;}
.hero-frame .sep{color:var(--gb-pink);}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;}
.hero-art{position:relative;}
.hero-stats{
display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.12);border-radius:14px;overflow:hidden;
}
.hero-stat{background:rgba(18,51,99,.6);padding:26px 22px;}
.hero-stat .num{font-family:var(--font-display);font-weight:700;font-size:46px;line-height:.9;color:#fff;}
.hero-stat .num .pink{color:var(--gb-pink);}
.hero-stat .lbl{font-size:12px;letter-spacing:.04em;color:var(--fg-on-dark-2);margin-top:8px;text-transform:uppercase;font-weight:600;}
.hero-mark{position:absolute;right:-160px;top:-80px;width:560px;opacity:.06;pointer-events:none;}
/* ---------- proof bar --------------------------------------------------- */
.proof{background:var(--gb-navy-900);border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);padding:30px 0;overflow:hidden;}
.proof-head{text-align:center;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-on-dark-3);font-weight:700;margin-bottom:24px;}
.marquee{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee-track{display:flex;gap:54px;padding-right:54px;animation:scroll-x 46s linear infinite;white-space:nowrap;flex:none;}
.proof:hover .marquee-track{animation-play-state:paused;}
.marquee-item{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:22px;letter-spacing:.03em;color:rgba(255,255,255,.5);transition:color var(--dur);}
.marquee-item:hover{color:#fff;}
@keyframes scroll-x{to{transform:translateX(-50%);}}
/* ---------- direct answer ----------------------------------------------- */
.answer-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start;}
.qa-card{background:#fff;border:1px solid var(--gb-line);border-left:4px solid var(--gb-pink);border-radius:12px;padding:34px 36px;box-shadow:var(--shadow-card);}
.qa-card .q{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(28px,3vw,38px);color:var(--gb-navy);margin:0 0 16px;letter-spacing:.01em;line-height:1.02;}
.qa-card p{margin:0;font-size:17px;line-height:1.65;color:var(--fg2);}
.audience-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px;}
.chip{font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--gb-ink-2);background:var(--gb-paper);border:1px solid var(--gb-line);border-radius:99px;padding:7px 14px;}
/* ---------- generic cards ---------------------------------------------- */
.card{background:#fff;border:1px solid var(--gb-line);border-radius:var(--radius-card);transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),border-color var(--dur);}
.card.hov:hover{transform:translateY(-5px);box-shadow:var(--shadow-card-hover);border-color:transparent;}
.dark .card,.navy .card{background:var(--gb-navy-700);border-color:rgba(255,255,255,.1);}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.sec-head{max-width:760px;margin-bottom:52px;}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.sec-head .lead{margin-top:18px;}
/* pain cards */
.pain{padding:28px 26px;}
.pain .ptag{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:20px;line-height:1.05;color:#fff;letter-spacing:.01em;}
.pain .pbody{font-size:14px;color:var(--fg-on-dark-2);margin-top:12px;line-height:1.55;}
.pain .pnum{font-family:var(--font-display);font-size:15px;color:var(--gb-pink);font-weight:700;letter-spacing:.1em;}
/* discipline cards */
.disc{padding:32px 28px 30px;position:relative;overflow:hidden;}
.disc .dicon{width:46px;height:46px;border-radius:10px;background:rgba(255,24,148,.12);display:flex;align-items:center;justify-content:center;color:var(--gb-pink);margin-bottom:20px;}
.disc .dicon svg{width:24px;height:24px;}
.disc h4{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:22px;color:#fff;margin:0 0 10px;letter-spacing:.02em;}
.disc p{font-size:14px;color:var(--fg-on-dark-2);line-height:1.55;margin:0;}
.disc .dnum{position:absolute;top:18px;right:22px;font-family:var(--font-display);font-size:34px;color:rgba(255,255,255,.08);font-weight:700;}
/* service rows */
.svc{display:flex;gap:18px;padding:22px 24px;align-items:flex-start;cursor:default;}
.svc .sicon{flex:none;width:40px;height:40px;border-radius:9px;background:var(--gb-paper);display:flex;align-items:center;justify-content:center;color:var(--gb-navy);border:1px solid var(--gb-line);transition:background var(--dur),color var(--dur);}
.svc .sicon svg{width:20px;height:20px;}
.svc.hov:hover .sicon{background:var(--gb-pink);color:#fff;border-color:var(--gb-pink);}
.svc h4{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:18px;color:var(--gb-navy);margin:0 0 5px;letter-spacing:.015em;}
.svc p{font-size:13.5px;color:var(--fg2);margin:0;line-height:1.5;}
/* framework steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid rgba(255,255,255,.14);border-radius:14px;overflow:hidden;}
.step{padding:34px 28px;border-right:1px solid rgba(255,255,255,.14);position:relative;}
.step:last-child{border-right:none;}
.step .snum{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--gb-pink);letter-spacing:.12em;margin-bottom:18px;}
.step h4{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:26px;color:#fff;margin:0 0 12px;letter-spacing:.02em;}
.step p{font-size:13.5px;color:var(--fg-on-dark-2);line-height:1.55;margin:0;}
/* feature split */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.feature.flip .feat-media{order:2;}
.feat-media{position:relative;border-radius:14px;overflow:hidden;min-height:380px;
background:linear-gradient(150deg,#1d4a7e,#0E1E36);border:1px solid rgba(255,255,255,.12);
display:flex;align-items:center;justify-content:center;}
.feat-media .ph-note{position:absolute;bottom:16px;left:0;right:0;text-align:center;font-size:11.5px;color:var(--fg-on-dark-3);font-style:italic;letter-spacing:.02em;}
.feat-media img.ph-mark{width:150px;opacity:.14;}
.before-after{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px;}
.ba{border-radius:12px;padding:22px 22px;border:1px solid var(--gb-line);}
.ba.bad{background:var(--gb-paper);}
.ba.good{background:#fff;border-color:var(--gb-pink);box-shadow:var(--shadow-card);}
.ba .balabel{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;}
.ba.bad .balabel{color:var(--gb-ink-3);}
.ba.good .balabel{color:var(--gb-pink);}
.ba ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.ba li{font-size:13.5px;color:var(--fg2);line-height:1.4;display:flex;gap:9px;align-items:flex-start;}
.ba li svg{flex:none;width:16px;height:16px;margin-top:2px;}
.ba.bad li svg{color:var(--gb-concrete);}
.ba.good li svg{color:var(--gb-pink);}
/* ways-in cards */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);column-gap:22px;row-gap:0;margin-top:24px;grid-template-rows:auto auto auto auto auto auto auto;}
.tier{position:relative;display:grid;grid-row:1 / span 7;grid-template-rows:subgrid;background:#123363;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:32px 28px;box-shadow:0 24px 56px -30px rgba(0,0,0,.6);transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),border-color var(--dur);}
.tier:hover{transform:translateY(-5px);box-shadow:0 32px 70px -28px rgba(0,0,0,.7);}
.tier.featured{border-color:var(--gb-pink);box-shadow:0 28px 64px -26px rgba(255,24,148,.42);}
.tier .of-k{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gb-blue-300);margin-bottom:11px;}
.tier h3{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:25px;line-height:1.02;color:#fff;margin:0 0 10px;letter-spacing:.01em;}
.tier-d{font-size:14px;line-height:1.5;color:var(--fg-on-dark-2);margin:0 0 20px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.14);}
.tier-rows{display:grid;grid-row:4 / span 3;grid-template-rows:subgrid;}
.tr-row{margin-bottom:16px;}
.tr-row:last-child{margin-bottom:0;}
.tr-row .tr-l{display:block;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gb-blue-300);margin-bottom:5px;}
.tr-row p{font-size:13.5px;line-height:1.5;color:var(--fg-on-dark-2);margin:0;}
.tier-cta{grid-row:7;align-self:end;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff;text-decoration:none;cursor:pointer;transition:color var(--dur);}
.tier-cta svg{width:14px;height:14px;color:var(--gb-pink);transition:transform var(--dur);}
.tier-cta:hover{color:var(--gb-pink);}
.tier-cta:hover svg{transform:translateX(3px);}
@media(max-width:920px){.tier-cta{grid-row:auto;align-self:flex-start;}}
@media(max-width:920px){.tiers{grid-template-columns:1fr;grid-template-rows:none;}.tier{grid-row:auto;grid-template-rows:none;display:flex;flex-direction:column;}.tier-rows{grid-row:auto;display:flex;flex-direction:column;}}
@media(max-width:920px){.tiers{grid-template-columns:1fr;}}
.way{padding:30px 26px;display:flex;flex-direction:column;height:100%;}
.way .wtag{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--gb-pink);margin-bottom:14px;}
.way h4{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:23px;color:#fff;margin:0 0 10px;letter-spacing:.015em;}
.way p{font-size:14px;color:var(--fg-on-dark-2);line-height:1.55;margin:0 0 20px;flex:1;}
/* checklist */
.checks{display:flex;flex-direction:column;gap:16px;margin:26px 0 0;}
.check{display:flex;gap:14px;align-items:flex-start;}
.check svg{flex:none;width:22px;height:22px;color:var(--gb-pink);margin-top:1px;}
.check .ct{font-weight:700;color:inherit;font-size:15.5px;}
.check .cd{font-size:14px;color:var(--fg-on-dark-2);margin-top:2px;line-height:1.5;}
.paper .check .cd{color:var(--fg2);}
/* platform / ecosystem cards */
.eco{padding:30px 28px;display:flex;flex-direction:column;gap:14px;position:relative;}
.eco .etag{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--gb-blue-300);}
.eco h4{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:24px;color:#fff;margin:0;letter-spacing:.015em;}
.eco p{font-size:14px;color:var(--fg-on-dark-2);line-height:1.55;margin:0;flex:1;}
.eco .soon{position:absolute;top:24px;right:26px;font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--gb-pink);border:1px solid rgba(255,24,148,.4);border-radius:99px;padding:4px 10px;}
/* team */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.member{}
.member .photo{aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:linear-gradient(160deg,#1d4a7e,#0E1E36);position:relative;display:flex;align-items:flex-end;justify-content:center;border:1px solid rgba(255,255,255,.1);}
.member .photo .ph-note{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);text-align:center;font-size:11px;color:var(--fg-on-dark-3);font-style:italic;padding:0 14px;}
.member .photo .nb{position:absolute;left:14px;bottom:14px;width:34px;opacity:.5;}
.member .mname{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:19px;color:#fff;margin:16px 0 2px;letter-spacing:.02em;}
.member .mrole{font-size:12.5px;color:var(--gb-pink);font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.member .mbio{font-size:13px;color:var(--fg-on-dark-2);margin-top:9px;line-height:1.5;}
/* testimonial */
.tquote{font-family:var(--font-display);text-transform:uppercase;font-weight:700;line-height:1.04;letter-spacing:.01em;
font-size:clamp(26px,3vw,40px);color:var(--gb-navy);margin:0 0 26px;}
.tquote .pink{color:var(--gb-pink);}
.tmeta{display:flex;align-items:center;gap:16px;}
.tmeta .tavatar{width:54px;height:54px;border-radius:50%;background:linear-gradient(150deg,#1d4a7e,#0E1E36);flex:none;}
.tmeta .tn{font-weight:800;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--gb-navy);}
.tmeta .tr{font-size:13px;color:var(--fg3);}
.tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px;}
.tcard{padding:28px 26px;}
.tcard p{font-size:15px;line-height:1.6;color:var(--fg1);margin:0 0 20px;}
.tcard .ta{font-weight:800;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--gb-navy);}
.tcard .tc{font-size:12.5px;color:var(--fg3);margin-top:2px;}
.tstars{display:flex;gap:3px;margin-bottom:16px;color:var(--gb-pink);}
.tstars svg{width:16px;height:16px;}
/* ---------- scorecard --------------------------------------------------- */
.scorecard{background:#fff;border-radius:18px;box-shadow:0 40px 90px -40px rgba(14,30,55,.5);overflow:hidden;border:1px solid var(--gb-line);}
.sc-grid{display:grid;grid-template-columns:.82fr 1.18fr;}
.sc-side{background:var(--gb-navy-900);color:#fff;padding:46px 40px;position:relative;overflow:hidden;display:flex;flex-direction:column;}
.sc-side .eyebrow{margin-bottom:18px;}
.sc-side h3{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:34px;line-height:.96;letter-spacing:.01em;margin:0 0 16px;color:#fff;}
.sc-side p{font-size:14.5px;color:var(--fg-on-dark-2);line-height:1.6;margin:0 0 26px;}
.sc-side .sc-feats{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-direction:column;gap:13px;}
.sc-side .sc-feats li{display:flex;gap:11px;align-items:center;font-size:13.5px;color:var(--fg-on-dark-2);}
.sc-side .sc-feats svg{width:18px;height:18px;color:var(--gb-pink);flex:none;}
.sc-side .scmark{position:absolute;right:-90px;bottom:-70px;width:280px;opacity:.06;}
.sc-main{padding:46px 46px 40px;display:flex;flex-direction:column;min-height:480px;}
.sc-progress{display:flex;align-items:center;gap:14px;margin-bottom:30px;}
.sc-bar{flex:1;height:6px;background:var(--gb-paper-2);border-radius:99px;overflow:hidden;}
.sc-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gb-pink),var(--gb-blue-500));border-radius:99px;transition:width .4s var(--ease-out);}
.sc-step-lbl{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg3);white-space:nowrap;}
.scorecard .sc-q{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(24px,2.6vw,32px);line-height:1.02;color:var(--gb-navy);margin:0 0 28px;letter-spacing:.01em;}
.sc-options{display:flex;flex-direction:column;gap:12px;margin-bottom:auto;}
.sc-opt{display:flex;align-items:center;gap:15px;padding:17px 20px;border:1.5px solid var(--gb-line);border-radius:12px;cursor:pointer;background:#fff;text-align:left;transition:border-color var(--dur),background var(--dur),transform var(--dur);width:100%;}
.sc-opt:hover{border-color:var(--gb-blue-500);background:var(--gb-blue-100);transform:translateX(3px);}
.sc-opt .sc-key{flex:none;width:30px;height:30px;border-radius:8px;background:var(--gb-paper);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:var(--gb-navy);border:1px solid var(--gb-line);}
.sc-opt:hover .sc-key{background:var(--gb-blue-500);color:#fff;border-color:var(--gb-blue-500);}
.sc-opt .sc-txt{font-size:15px;color:var(--gb-ink);font-weight:500;}
.sc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:28px;padding-top:22px;border-top:1px solid var(--gb-line);}
.sc-back{background:none;border:none;color:var(--fg3);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;display:inline-flex;gap:7px;align-items:center;}
.sc-back:hover{color:var(--gb-navy);}
.sc-back svg{width:15px;height:15px;}
.sc-dots{display:flex;gap:7px;}
.sc-dot{width:8px;height:8px;border-radius:50%;background:var(--gb-line);transition:background var(--dur),width var(--dur);}
.sc-dot.on{background:var(--gb-pink);width:22px;border-radius:99px;}
/* scorecard result */
.sc-result{padding:46px 46px 40px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:480px;}
.sc-gauge{position:relative;width:200px;height:200px;margin-bottom:8px;}
.sc-gauge svg{transform:rotate(-90deg);}
.sc-gauge .gscore{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.sc-gauge .gnum{font-family:var(--font-display);font-weight:700;font-size:62px;line-height:.8;color:var(--gb-navy);}
.sc-gauge .gof{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg3);margin-top:6px;}
.sc-tier{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:32px;color:var(--gb-pink);margin:18px 0 12px;letter-spacing:.02em;}
.scorecard .sc-rdesc{font-size:15.5px;color:var(--fg2);line-height:1.6;max-width:48ch;margin:0 0 28px;}
.sc-rcta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
/* ---------- FAQ --------------------------------------------------------- */
.faq-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:56px;align-items:start;}
.faq-list{border-top:1px solid var(--gb-line);}
.faq-item{border-bottom:1px solid var(--gb-line);}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;background:none;border:none;cursor:pointer;padding:24px 4px;text-align:left;}
.faq-q .qtext{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:22px;color:var(--gb-navy);letter-spacing:.03em;line-height:1.12;}
.faq-q .qico{flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--gb-line);display:flex;align-items:center;justify-content:center;color:var(--gb-navy);transition:background var(--dur),color var(--dur),border-color var(--dur),transform var(--dur);}
.faq-q .qico svg{width:16px;height:16px;}
.faq-item.open .qico{background:var(--gb-pink);border-color:var(--gb-pink);color:#fff;transform:rotate(45deg);}
.faq-a{display:none;overflow:hidden;}
.faq-item.open .faq-a{display:block;}
.faq-a p{font-size:15px;line-height:1.65;color:var(--fg2);margin:0;padding:0 4px 26px;max-width:64ch;}
/* ---------- CTA band ---------------------------------------------------- */
.cta-band{position:relative;overflow:hidden;background:
linear-gradient(rgba(14,30,55,.84),rgba(14,30,55,.92)),
repeating-linear-gradient(135deg,#1d4a7e 0 18px,#123363 18px 36px);
text-align:center;padding:120px 0;}
.cta-band .display{font-size:clamp(40px,5.2vw,72px);color:#fff;}
.cta-band .lead{color:var(--fg-on-dark-2);max-width:600px;margin:22px auto 36px;}
.cta-band .hero-cta{justify-content:center;}
.cta-band .watermark-mark{opacity:.05;right:-120px;top:50%;transform:translateY(-50%);width:520px;}
/* ---------- footer ------------------------------------------------------ */
.foot{background:var(--gb-navy-900);color:#fff;}
.foot-news{border-bottom:1px solid rgba(255,255,255,.1);padding:42px 0;}
.foot-news .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;}
.foot-news .fn-t{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:26px;letter-spacing:.02em;color:#fff;margin:0 0 6px;}
.foot-news .fn-s{font-size:13.5px;color:var(--fg-on-dark-2);}
.foot-news form{display:flex;gap:10px;flex-wrap:wrap;}
.foot-news input{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:99px;padding:14px 22px;color:#fff;font-size:14px;min-width:280px;font-family:var(--font-sans);}
.foot-news input::placeholder{color:var(--fg-on-dark-3);}
.foot-news input:focus{outline:none;border-color:var(--gb-blue-500);box-shadow:0 0 0 3px rgba(0,146,214,.25);}
.foot-main{padding:64px 0 48px;display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:36px;}
.foot-brand{max-width:300px;}
.foot-blurb{font-size:13.5px;color:var(--fg-on-dark-2);line-height:1.55;max-width:240px;margin:0 0 16px;}
.foot-logo{width:215px;height:auto;max-width:100%;margin-bottom:20px;}
.foot-blurb{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(22px,2vw,29px);line-height:1.02;letter-spacing:.01em;color:#fff;max-width:320px;margin:4px 0 22px;}
.foot-soc{display:flex;gap:14px;margin-top:22px;}
.foot-soc a{opacity:.8;transition:opacity var(--dur),transform var(--dur);}
.foot-soc a:hover{opacity:1;transform:translateY(-2px);}
.foot-col h5{font-family:var(--font-sans);font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gb-pink);margin:0 0 18px;}
.foot-col a{display:block;font-size:13.5px;color:var(--fg-on-dark-2);padding:6px 0;cursor:pointer;transition:color var(--dur);}
.foot-col a:hover{color:#fff;}
.foot-contact{font-size:13.5px;color:var(--fg-on-dark-2);line-height:1.7;font-style:normal;}
.foot-contact a{color:#fff;transition:color var(--dur);}
.foot-contact a:hover{color:var(--gb-pink);}
.foot-bot{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--fg-on-dark-3);}
.foot-bot .fb-links{display:flex;gap:20px;}
.foot-bot a:hover{color:#fff;}
/* ---------- reveal animation ------------------------------------------- */
/* NOTE: visible end-state is the base style so content always renders even
when CSS transitions are paused (preview capture, print, reduced-motion).
The entrance slide is applied only once JS marks the page interactive. */
.reveal{opacity:1;transform:none;}
html.js-reveal .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);}
html.js-reveal .reveal.in{opacity:1;transform:none;}
/* ---------- responsive -------------------------------------------------- */
@media(max-width:1080px){
.grid-4,.team-grid{grid-template-columns:repeat(2,1fr);}
.steps{grid-template-columns:1fr 1fr;}
.step:nth-child(2){border-right:none;}
.step:nth-child(1),.step:nth-child(2){border-bottom:1px solid rgba(255,255,255,.14);}
}
@media(max-width:920px){
.nav-links{display:none;}
.nav-burger{display:block;}
.hero-grid,.answer-grid,.feature,.faq-grid,.sc-grid{grid-template-columns:1fr;gap:40px;}
.feature.flip .feat-media{order:0;}
.grid-3,.grid-2,.ways,.tcards{grid-template-columns:1fr;}
.hero-mark{display:none;}
.foot-main{grid-template-columns:1fr 1fr;}
.sc-side{display:none;}
.mobile-nav.open{display:block;}
}
@media(max-width:560px){
.wrap,.wrap-narrow{padding:0 22px;}
.sec{padding:72px 0;}
.grid-4,.team-grid,.hero-stats{grid-template-columns:1fr 1fr;}
.steps{grid-template-columns:1fr;}
.step{border-right:none;border-bottom:1px solid rgba(255,255,255,.14);}
.foot-main{grid-template-columns:1fr;}
.sc-main,.sc-result{padding:32px 26px;}
}
/* ===========================================================================
v2 — THE AUTHORITY BLUEPRINT
Architectural-drafting editorial system: registration marks, measurement
ticks, ghost numerals, hard pink marker, asymmetric magazine hero,
services index, framework diagram.
=========================================================================== */
/* registration crosshair (reused motif) */
.reg{display:inline-block;width:13px;height:13px;flex:none;position:relative;}
.reg::before,.reg::after{content:"";position:absolute;background:currentColor;}
.reg::before{left:50%;top:0;bottom:0;width:1.5px;transform:translateX(-50%);}
.reg::after{top:50%;left:0;right:0;height:1.5px;transform:translateY(-50%);}
/* spec label — technical, heavily tracked */
.spec{font-family:var(--font-sans);font-weight:700;font-size:11px;letter-spacing:.26em;
text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;}
/* eyebrow → drafting spec label with registration mark */
.eyebrow{font-size:12px;letter-spacing:.26em;gap:11px;color:var(--gb-pink);}
.eyebrow::before{content:"";width:13px;height:13px;background:
linear-gradient(var(--gb-pink),var(--gb-pink)) center/1.5px 100% no-repeat,
linear-gradient(var(--gb-pink),var(--gb-pink)) center/100% 1.5px no-repeat;}
/* hard pink marker highlight */
.marker{background:var(--gb-pink);color:#fff !important;padding:.02em .16em;
box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.marker-blue{background:var(--gb-blue-500);color:#fff !important;padding:.02em .16em;
box-decoration-break:clone;-webkit-box-decoration-break:clone;}
/* measurement tick ruler */
.ruler{position:absolute;left:0;right:0;height:12px;pointer-events:none;
background:repeating-linear-gradient(90deg,currentColor 0 1.5px,transparent 1.5px 30px);opacity:.22;}
.ruler.top{top:0;}
.ruler.tall{height:18px;background:repeating-linear-gradient(90deg,currentColor 0 1.5px,transparent 1.5px 30px);}
/* numbered editorial section header */
.sechead{position:relative;margin-bottom:54px;}
.sechead .rule{display:flex;align-items:center;gap:18px;margin-bottom:24px;}
.sechead .tag{font-family:var(--font-sans);font-weight:700;font-size:12px;letter-spacing:.26em;
text-transform:uppercase;color:var(--gb-pink);white-space:nowrap;display:flex;align-items:center;gap:11px;}
.sechead .line{height:1.5px;background:currentColor;opacity:.16;flex:1;}
.sechead .ghost{position:absolute;right:0;top:-46px;font-family:var(--font-display);font-weight:700;
font-size:170px;line-height:.7;color:transparent;-webkit-text-stroke:1.5px currentColor;
opacity:.09;pointer-events:none;letter-spacing:-.02em;}
.sechead h2{max-width:20ch;}
.sechead .lead{margin-top:20px;max-width:60ch;}
.sechead.center{text-align:center;}
.sechead.center .rule{justify-content:center;}
.sechead.center .line{display:none;}
.sechead.center .tag::after{content:"";width:46px;height:1.5px;background:currentColor;opacity:.3;}
.sechead.center .tag::before{content:"";width:46px;height:1.5px;background:currentColor;opacity:.3;}
.sechead.center h2{margin-left:auto;margin-right:auto;}
.sechead.center .lead{margin-left:auto;margin-right:auto;}
/* ---------- HERO v2 — asymmetric magazine ------------------------------- */
.hero{padding:0;}
.hero-shell{position:relative;padding:46px 0 92px;}
.hero-rail{position:absolute;left:-6px;top:140px;display:none;}
.hero-rail span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--font-sans);
font-weight:700;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--fg-on-dark-3);}
.hero-mast{display:flex;align-items:center;justify-content:space-between;gap:20px;
padding-bottom:18px;margin-bottom:46px;border-bottom:1.5px solid rgba(255,255,255,.14);flex-wrap:wrap;}
.hero-mast .spec{color:var(--fg-on-dark-2);}
.hero-mast .spec .pk{color:var(--gb-pink);}
.hero-mast .live{display:flex;align-items:center;gap:9px;color:var(--fg-on-dark-2);}
.hero-mast .live .dot{width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 4px rgba(61,220,132,.18);}
.hero-main{display:grid;grid-template-columns:1.55fr .85fr;gap:54px;align-items:end;}
.hero-head{font-family:var(--font-display);font-weight:700;text-transform:uppercase;color:#fff;
font-size:clamp(58px,8.6vw,128px);line-height:.84;letter-spacing:-.005em;margin:0 0 30px;}
.hero-head .ln{display:block;}
.hero-head .dim{color:var(--fg-on-dark-3);}
.hero .lead{max-width:50ch;margin-bottom:30px;color:var(--fg-on-dark-2);}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;}
.hero-foot{margin-top:38px;display:flex;align-items:center;gap:16px;color:var(--fg-on-dark-3);
font-size:12px;letter-spacing:.04em;}
.hero-foot .reg{color:var(--gb-pink);}
/* hero spec datasheet */
.hero-sheet{position:relative;border:1.5px solid rgba(255,255,255,.18);border-radius:4px;
background:linear-gradient(160deg,rgba(18,51,99,.5),rgba(14,30,55,.4));overflow:hidden;}
.hero-sheet .sheet-mark{position:absolute;right:-50px;bottom:-50px;width:230px;opacity:.07;}
.hero-sheet .sheet-h{display:flex;align-items:center;justify-content:space-between;
padding:14px 18px;border-bottom:1.5px solid rgba(255,255,255,.16);}
.hero-sheet .sheet-h .spec{color:var(--gb-pink);}
.hero-sheet .sheet-h .reg{color:var(--fg-on-dark-3);}
.sheet-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
padding:16px 18px;border-bottom:1px dashed rgba(255,255,255,.14);position:relative;}
.sheet-row:last-child{border-bottom:none;}
.sheet-row .sr-num{font-family:var(--font-display);font-weight:700;font-size:38px;line-height:.8;color:#fff;}
.sheet-row .sr-num .pk{color:var(--gb-pink);}
.sheet-row .sr-lbl{font-family:var(--font-sans);font-weight:700;font-size:10.5px;letter-spacing:.16em;
text-transform:uppercase;color:var(--fg-on-dark-2);text-align:right;max-width:46%;}
/* ---------- SERVICES — editorial index ---------------------------------- */
.idx{border-top:1.5px solid var(--gb-navy);}
.idx-row{display:grid;grid-template-columns:74px minmax(0,1.05fr) minmax(0,1.15fr) 36px;gap:22px;
align-items:center;padding:24px 10px;border-bottom:1.5px solid var(--gb-line);cursor:pointer;
position:relative;transition:padding var(--dur) var(--ease-out),background var(--dur);}
.idx-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gb-pink);
transform:scaleY(0);transform-origin:top;transition:transform var(--dur) var(--ease-out);}
.idx-row:hover{padding-left:24px;background:linear-gradient(90deg,rgba(255,24,148,.05),transparent 60%);}
.idx-row:hover::before{transform:scaleY(1);}
.idx-num{font-family:var(--font-display);font-weight:700;font-size:24px;color:var(--gb-ink-3);letter-spacing:.02em;transition:color var(--dur);}
.idx-title{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.012em;
font-size:clamp(19px,1.9vw,28px);color:var(--gb-navy);line-height:.98;}
.idx-pain{font-size:14px;color:var(--fg2);line-height:1.45;}
.idx-arrow{justify-self:end;color:var(--gb-ink-3);display:flex;transition:color var(--dur),transform var(--dur);}
.idx-arrow svg{width:22px;height:22px;}
.idx-row:hover .idx-num{color:var(--gb-pink);}
.idx-row:hover .idx-title{color:var(--gb-pink);}
.idx-row:hover .idx-arrow{color:var(--gb-pink);transform:translateX(5px);}
/* ---------- FRAMEWORK — blueprint diagram ------------------------------- */
.fdiagram{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:64px;}
.fnode{padding:0 30px;position:relative;}
.fnode:first-child{padding-left:0;}
.fnode::before{content:"";position:absolute;top:19px;left:0;right:0;height:1.5px;
background:repeating-linear-gradient(90deg,rgba(255,255,255,.32) 0 8px,transparent 8px 14px);}
.fnode:first-child::before{left:19px;}
.fnode:last-child::before{right:calc(100% - 38px);}
.fdot{position:relative;z-index:1;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--gb-pink);
background:var(--gb-navy-800);display:flex;align-items:center;justify-content:center;color:var(--gb-pink);margin-bottom:24px;}
.fnode .fn-step{font-family:var(--font-sans);font-weight:700;font-size:11px;letter-spacing:.2em;
text-transform:uppercase;color:var(--gb-pink);margin-bottom:10px;}
.fnode h4{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(22px,2.3vw,30px);
color:#fff;margin:0 0 12px;letter-spacing:.015em;line-height:.96;}
.fnode p{font-size:14px;color:var(--fg-on-dark-2);line-height:1.55;margin:0;}
/* ---------- drafting accents on existing pieces ------------------------- */
.disc .dnum{font-size:64px;top:14px;right:18px;-webkit-text-stroke:1.5px rgba(255,255,255,.18);color:transparent;opacity:1;}
.qa-card{border-radius:4px;border-left-width:3px;}
.card{border-radius:4px;}
.feat-media{border-radius:4px;}
.way{border-radius:4px;}
.eco{border-radius:4px;}
.scorecard{border-radius:6px;}
.hero-stats{display:none;}
/* pull-quote spread */
.pq{position:relative;}
.pq .ghost-mark{position:absolute;right:-30px;top:-60px;width:260px;opacity:.05;pointer-events:none;}
.pquote{font-family:var(--font-display);font-weight:700;text-transform:uppercase;line-height:.98;
letter-spacing:.005em;font-size:clamp(30px,4.4vw,58px);color:var(--gb-navy);margin:0;max-width:18ch;}
/* responsive for v2 */
@media(max-width:920px){
.hero-main{grid-template-columns:1fr;gap:40px;align-items:start;}
.sechead .ghost{font-size:120px;top:-30px;opacity:.07;}
.fdiagram{grid-template-columns:1fr 1fr;gap:36px 0;}
.fnode{padding:0 20px;}
.fnode::before{display:none;}
}
@media(max-width:620px){
.idx-row{grid-template-columns:44px 1fr;gap:6px 14px;}
.idx-pain{grid-column:2;}
.idx-arrow{display:none;}
.hero-mast{font-size:10px;}
.fdiagram{grid-template-columns:1fr;}
}
/* ===========================================================================
v3 — PREMIUM BRAND SITE (faithful to the live Grit Blueprint look)
Strips the editorial/drafting motifs. Soft blue glow, glowing GB monogram,
two-tone headlines, generous rounding + shadow. Zuume + Helvetica retained.
=========================================================================== */
/* kill editorial motifs */
.ruler,.reg,.sechead .ghost,.sechead .line,.hero-mast,.hero-sheet,.fnode::before{display:none !important;}
.eyebrow::before{display:none;}
.disc .dnum{display:none;}
/* eyebrow — clean pink label like the live site */
.eyebrow{gap:0;color:var(--gb-pink);font-size:13px;letter-spacing:.22em;font-weight:700;}
/* two-tone accent (replaces the hard marker block) */
.marker,.accent{background:none !important;color:var(--gb-blue-300) !important;padding:0 !important;}
.white .marker,.paper .marker,.white .accent,.paper .accent{color:var(--gb-blue-500) !important;}
/* backgrounds: soft blue glow, no blueprint grid */
.bp-grid::before{
background:
radial-gradient(50% 48% at 16% -8%, rgba(0,146,214,.34), transparent 72%),
radial-gradient(46% 42% at 90% 4%, rgba(255,24,148,.14), transparent 72%) !important;
-webkit-mask:none !important;mask:none !important;background-size:auto !important;opacity:1 !important;
}
.ombre{background:radial-gradient(125% 95% at 50% -18%, #1f568f 0%, #0E1E36 60%) !important;}
/* centered, simple section header */
.sechead{text-align:center;max-width:840px;margin:0 auto 60px;}
.sechead .rule{display:block;margin:0 0 16px;}
.sechead .tag{justify-content:center;color:var(--gb-pink);}
.sechead h2{max-width:none;margin:0 auto;}
.sechead .lead{margin:20px auto 0;max-width:62ch;}
.sechead.left{text-align:left;margin-left:0;margin-right:0;}
.sechead.left .tag{justify-content:flex-start;}
.sechead.left h2,.sechead.left .lead{margin-left:0;margin-right:0;}
/* premium rounding + shadow */
.card,.qa-card,.feat-media,.way,.eco,.scorecard,.sc-side,.member .photo{border-radius:18px;}
.card-shadow,.card.hov{box-shadow:0 24px 60px -28px rgba(14,30,55,.30);}
.dark .card,.navy .card{box-shadow:0 24px 60px -30px rgba(0,0,0,.5);}
.deep .card,.bluewash .card,.deep .way,.bluewash .way{background:var(--gb-navy-700);border-color:rgba(255,255,255,.12);}
/* ---------- HERO v3 — tall, glowing, GB monogram ------------------------ */
.hero{min-height:auto;padding:0;overflow:hidden;}
.hero-wrap{display:grid;grid-template-columns:1.18fr .82fr;gap:44px;align-items:center;
min-height:90vh;padding-top:128px;padding-bottom:96px;}
.hero-copy .eyebrow{margin-bottom:22px;}
.hero-copy .display{font-size:clamp(40px,5vw,70px);line-height:.96;letter-spacing:.004em;margin:0 0 26px;color:#fff;}
.hero-copy .lead{max-width:48ch;color:var(--fg-on-dark-2);font-size:clamp(18px,1.5vw,21px);}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px;}
.hero-fit{margin-top:20px;font-size:13px;letter-spacing:.04em;color:var(--fg-on-dark-3);font-weight:600;}
.hero-trust{margin-top:44px;display:flex;gap:34px;flex-wrap:wrap;align-items:center;}
.hero-trust .ht{display:flex;flex-direction:column;gap:3px;}
.hero-trust .ht b{font-family:var(--font-display);font-weight:700;font-size:30px;line-height:.9;color:#fff;}
.hero-trust .ht span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-on-dark-3);font-weight:700;}
.hero-trust .div{width:1px;height:34px;background:rgba(255,255,255,.16);}
.hero-art{position:relative;display:flex;align-items:center;justify-content:center;min-height:340px;}
.hero-art::before{content:"";position:absolute;width:74%;aspect-ratio:1;border-radius:50%;
background:radial-gradient(circle, rgba(0,146,214,.5), rgba(0,146,214,0) 64%);filter:blur(10px);}
.hero-mono{position:relative;z-index:1;width:min(46vw,520px);aspect-ratio:1;
background:linear-gradient(155deg,#27aef0 0%,#0F5C97 100%);
-webkit-mask:url("img/mark-white.webp") center/contain no-repeat;
mask:url("img/mark-white.webp") center/contain no-repeat;
filter:drop-shadow(0 30px 70px rgba(0,146,214,.5));}
/* proof / client logo strip — clean band */
.proof{background:var(--gb-navy-800);border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);padding:34px 0;}
.marquee-item{font-family:var(--font-display);font-weight:700;text-transform:uppercase;color:rgba(255,255,255,.62);}
/* feature media — premium image placeholder */
.feat-media{background:linear-gradient(150deg,#1f568f,#0E1E36);box-shadow:0 30px 70px -34px rgba(0,0,0,.6);}
/* framework steps — clean cards */
.steps{border:none;gap:22px;background:none;}
.step{border:1px solid rgba(255,255,255,.12);border-radius:18px;background:var(--gb-navy-700);}
.step .snum{color:var(--gb-pink);}
/* service cards — premium */
.svc{border-radius:18px;}
.svc .sicon{border-radius:12px;background:var(--gb-blue-100);color:var(--gb-blue-700);border:none;}
.svc.hov:hover .sicon{background:var(--gb-blue-500);color:#fff;}
/* scorecard side glow */
.sc-side{background:radial-gradient(120% 80% at 20% 0%, #1f568f, #0E1E36 70%);}
@media(max-width:920px){
.hero-wrap{grid-template-columns:1fr;gap:36px;min-height:auto;padding-top:104px;padding-bottom:64px;text-align:center;}
.hero-copy .eyebrow,.hero-trust{justify-content:center;}
.hero-copy .lead{margin-left:auto;margin-right:auto;}
.hero-cta{justify-content:center;}
.hero-art{order:-1;min-height:240px;}
.hero-mono{width:min(60vw,300px);}
}
/* ===========================================================================
v4 — FAITHFUL TO LIVE HOMEPAGE
Blue ombre hero + navy GB monogram, two-tone, exact section flow.
=========================================================================== */
.accent-pink{color:var(--gb-pink) !important;}
.accent-blue{color:var(--gb-blue-300) !important;}
.bluewash .accent-blue{color:#86d3f7 !important;}
/* section backgrounds */
.bluewash{background:linear-gradient(160deg,#0E1E36 0%,#15407a 45%,#0a6fb0 100%);color:#fff;}
.bluewash .lead{color:rgba(255,255,255,.82);}
.deep{background:var(--gb-navy-900);color:#fff;}
/* ---- HERO (blue ombre + navy monogram) ---- */
.hero{background:linear-gradient(112deg,#0E1E36 0%,#163B6E 40%,#0F5C97 72%,#0092D6 100%);}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 78% 42%, rgba(0,146,214,.34), transparent 70%);pointer-events:none;}
.hero-wrap{position:relative;z-index:2;}
.hero-art::before{display:none;}
.hero-mono{width:min(50vw,600px);aspect-ratio:1;background:none;-webkit-mask:none;mask:none;filter:none;}
.hero-mono img{width:100%;filter:drop-shadow(0 30px 60px rgba(0,0,0,.35));opacity:.96;}
.hero-copy .display .accent-pink{color:var(--gb-pink) !important;}
.hero-tag{margin-top:22px;font-family:var(--font-display);text-transform:uppercase;font-weight:700;
font-size:clamp(15px,1.5vw,19px);letter-spacing:.04em;color:#fff;}
.hero-tag .s{color:var(--gb-pink);margin:0 8px;}
/* ---- ethos strip (be seen / known / chosen) ---- */
.ethos{background:var(--gb-navy-800);border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);padding:26px 0;}
.ethos .wrap{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
font-family:var(--font-display);text-transform:uppercase;font-weight:700;
font-size:clamp(20px,2.4vw,30px);letter-spacing:.03em;color:#fff;}
.ethos .s{color:var(--gb-pink);font-style:normal;margin:0 14px;}
/* ---- "If you're not seen" ---- */
.notseen{overflow:hidden;}
.invisible-wm{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);
font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;
font-size:clamp(110px,22vw,340px);color:rgba(150,200,240,.085);white-space:nowrap;pointer-events:none;z-index:0;}
.builtreal > .reveal:nth-child(1){align-self:start;}
.builtreal > .reveal:nth-child(2){align-self:end;}
.notseen .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;}
.play-badge{width:120px;height:120px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);
display:flex;align-items:center;justify-content:center;color:#fff;justify-self:center;position:relative;}
.play-badge::before{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px dashed rgba(255,255,255,.18);}
.play-badge svg{width:34px;height:34px;margin-left:5px;}
/* ---- pink newsletter bar ---- */
.news-bar{background:var(--gb-pink);}
.news-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 40px;flex-wrap:wrap;}
.news-bar .nb-t{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(18px,2vw,26px);color:#fff;letter-spacing:.02em;margin:0;}
.news-bar form{display:flex;gap:10px;flex-wrap:wrap;}
.news-bar input{border:none;border-radius:999px;padding:13px 22px;font-size:14px;min-width:240px;font-family:var(--font-sans);}
.news-bar .btn-white{background:#0E1E36;color:#fff;}
/* ---- built real (checklist + photo) ---- */
.builtreal{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.photo-card{border-radius:18px;overflow:hidden;position:relative;background:linear-gradient(150deg,#1f7fae,#0E1E36);min-height:430px;display:flex;align-items:center;justify-content:center;box-shadow:0 30px 70px -30px rgba(0,0,0,.6);}
.photo-card .ph-note{position:absolute;bottom:16px;left:0;right:0;text-align:center;font-size:11.5px;color:rgba(255,255,255,.6);font-style:italic;}
.photo-card .cap{position:absolute;bottom:14px;right:16px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(14,30,55,.7);padding:6px 12px;border-radius:8px;}
.checklist{display:flex;flex-direction:column;gap:13px;margin:26px 0;}
.checklist .ci{display:flex;gap:13px;align-items:flex-start;font-size:15px;color:var(--fg-on-dark-2);line-height:1.4;}
.checklist .ci svg{flex:none;width:21px;height:21px;color:var(--gb-pink);margin-top:1px;}
/* ---- logo band ---- */
.logoband{background:linear-gradient(120deg,#15407a,#0a6fb0);padding:48px 0;}
.logoband .lb-h{text-align:center;font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:13px;letter-spacing:.2em;color:rgba(255,255,255,.85);margin:0 0 28px;}
.logoband .lb-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px 44px;}
.logoband .lb-row span{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:19px;letter-spacing:.04em;color:rgba(255,255,255,.7);}
/* ---- growth system cards ---- */
.gscard{background:rgba(8,24,46,.55);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:34px 30px;position:relative;backdrop-filter:blur(2px);}
.gscard .gs-ic{width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:#fff;position:absolute;top:28px;right:28px;}
.gscard .gs-ic svg{width:24px;height:24px;}
.gscard h3{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:24px;color:#fff;margin:0 0 14px;letter-spacing:.01em;max-width:70%;}
.gscard .gs-d{font-size:14px;color:rgba(255,255,255,.78);line-height:1.55;margin:0 0 18px;}
.gscard ul{list-style:none;margin:0 0 18px;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;gap:11px;}
.gscard li{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:rgba(255,255,255,.82);line-height:1.4;}
.gscard li svg{flex:none;width:17px;height:17px;color:var(--gb-pink);margin-top:2px;}
.gscard .gs-foot{font-size:13px;color:rgba(255,255,255,.62);line-height:1.5;margin:0;}
/* ---- founder ---- */
.founder{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;}
.founder .photo-card{min-height:460px;}
/* ---- media / video thumb ---- */
.media-split{display:grid;grid-template-columns:0.8fr 1.2fr;gap:44px;align-items:center;}
.media-thumb{border-radius:16px;overflow:hidden;position:relative;aspect-ratio:16/9;background:linear-gradient(150deg,#1f568f,#0E1E36);display:flex;align-items:center;justify-content:center;box-shadow:0 30px 70px -30px rgba(0,0,0,.6);}
.media-thumb .play-badge{width:74px;height:74px;}
.media-thumb .play-badge::before{display:none;}
.media-thumb .play-badge{background:var(--gb-pink);border:none;}
.media-thumb .mt-note{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:11.5px;color:rgba(255,255,255,.6);font-style:italic;}
.yt-proof img{width:100%;border-radius:14px;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 70px -34px rgba(0,0,0,.6);}
.yt-cap{margin:14px 0 0;font-size:13px;color:rgba(255,255,255,.66);text-align:center;letter-spacing:.02em;}
/* ---- problems we solve (over photo) ---- */
.problems{background:linear-gradient(rgba(14,30,55,.86),rgba(14,30,55,.92)),linear-gradient(120deg,#1a3c5c,#0E1E36);color:#fff;position:relative;}
.problems-bg{position:absolute;inset:0;background:linear-gradient(150deg,#243b55,#0E1E36);opacity:.5;z-index:0;}
.problems .wrap{position:relative;z-index:1;}
.prob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:42px;}
.prob-card{border:1.5px solid var(--gb-pink);background:rgba(14,30,55,.45);border-radius:12px;padding:30px 22px;text-align:center;
font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:18px;line-height:1.05;color:#fff;letter-spacing:.01em;min-height:120px;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px);}
/* ---- how to work steps ---- */
.stepgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px;}
.stepcard{background:linear-gradient(160deg,#1f7fae,#125285);border-radius:18px;padding:34px 28px;text-align:center;box-shadow:0 24px 56px -28px rgba(0,0,0,.5);}
.stepcard .sc-n{font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.14em;color:rgba(255,255,255,.7);margin-bottom:14px;}
.stepcard h3{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:23px;color:#fff;margin:0 0 12px;letter-spacing:.015em;line-height:1.0;}
.stepcard p{font-size:14px;color:rgba(255,255,255,.85);line-height:1.55;margin:0;}
/* ---- client testimonials 2x2 ---- */
.testi-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.testi{background:linear-gradient(155deg,#1a4d86 0%,#0E1E36 72%);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:30px 30px;box-shadow:0 24px 50px -28px rgba(14,30,55,.55);}
.testi .stars{display:flex;gap:3px;color:var(--gb-pink);margin-bottom:14px;}
.testi .stars svg{width:16px;height:16px;fill:var(--gb-pink);}
.testi p{font-size:15px;line-height:1.6;color:rgba(255,255,255,.86);margin:0 0 18px;}
.testi .tn{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:16px;color:#fff;letter-spacing:.02em;}
.testi .tr{font-size:12.5px;color:rgba(255,255,255,.6);margin-top:3px;}
/* ---- build-your-authority proof row (executive / personal branding) ---- */
.auth-proof{margin-top:64px;}
.auth-proof-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
@media(max-width:920px){.auth-proof-grid{grid-template-columns:1fr;}}
/* ---- stories (phone mockup) ---- */
.stories{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.phone{position:relative;justify-self:center;width:260px;height:520px;border-radius:36px;background:#0E1E36;border:8px solid #0b1830;box-shadow:0 40px 90px -40px rgba(0,0,0,.7);overflow:hidden;display:flex;align-items:center;justify-content:center;}
.phone .ph-note{font-size:11.5px;color:rgba(255,255,255,.55);font-style:italic;text-align:center;padding:0 20px;}
.stories .bullets{display:flex;flex-direction:column;gap:14px;margin:24px 0;}
.stories .bullets .ci{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:rgba(255,255,255,.85);line-height:1.45;}
.stories .bullets .ci svg{flex:none;width:19px;height:19px;color:var(--gb-pink);margin-top:2px;}
/* ---- responsive ---- */
@media(max-width:920px){
.builtreal,.founder,.media-split,.stories,.notseen .wrap{grid-template-columns:1fr;gap:36px;}
.prob-grid,.stepgrid,.testi-grid{grid-template-columns:1fr;}
.play-badge{display:none;}
}
/* ===========================================================================
v4.1 — COLOR AUDIT FIX
All headings on dark/blue sections must be white. Body/lead must be light.
The base stylesheet sets h2{color:navy}; these sections need explicit white.
=========================================================================== */
.deep, .bluewash, .problems { color:#fff; }
.deep h1, .deep h2, .deep h3, .deep h4, .deep .h2, .deep .h3, .deep .display,
.bluewash h1, .bluewash h2, .bluewash h3, .bluewash h4, .bluewash .h2, .bluewash .h3,
.problems h1, .problems h2, .problems .h2,
.hero h1, .hero .display,
.ctaband h2 { color:#fff; }
/* keep two-tone accents winning over the white rule */
.deep .accent-pink, .bluewash .accent-pink, .problems .accent-pink, .hero .accent-pink, .ctaband .accent-pink { color:var(--gb-pink) !important; }
.deep .accent-blue, .problems .accent-blue, .hero .accent-blue { color:var(--gb-blue-300) !important; }
.bluewash .accent-blue { color:#86d3f7 !important; }
/* body + lead light on dark/blue */
.deep p, .deep .lead { color:rgba(255,255,255,.82); }
.bluewash p, .bluewash .lead, .problems p, .problems .lead { color:rgba(255,255,255,.84); }
/* direct-answer card on dark — readable (was light text on white) */
.deep .qa-card, .bluewash .qa-card { background:#fff; border-color:var(--gb-line); }
.deep .qa-card .q, .bluewash .qa-card .q { color:var(--gb-navy); }
.deep .qa-card p, .bluewash .qa-card p { color:var(--fg2); font-size:17px; }
/* eyebrow stays pink + legible on every section */
.deep .eyebrow, .bluewash .eyebrow, .problems .eyebrow, .hero .eyebrow { color:var(--gb-pink); }
/* card-internal text keeps its intended tone (don't let section rules wash it out) */
.gscard h3, .stepcard h3, .testi .tn { color:#fff; }
.gscard .gs-d, .gscard li, .stepcard p, .testi p { color:rgba(255,255,255,.85); }
.gscard .gs-foot, .testi .tr { color:rgba(255,255,255,.62); }
.prob-card { color:#fff; }
/* real photos filling placeholder frames */
.fillimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.photo-card .fillimg{object-position:center 18%;}
.media-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,30,55,.1),rgba(14,30,55,.45));z-index:1;}
.media-thumb .play-badge{position:relative;z-index:2;}
.media-thumb .fillimg{object-position:center 18%;}
/* what-we-offer cards */
.offergrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.offer{background:rgba(8,24,46,.5);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:30px 26px;cursor:default;transition:transform var(--dur) var(--ease-out),border-color var(--dur),background var(--dur);}
.offer:hover{transform:translateY(-5px);border-color:rgba(255,24,148,.5);background:rgba(8,24,46,.7);}
.offer .of-ic{width:48px;height:48px;border-radius:12px;background:rgba(255,24,148,.14);display:flex;align-items:center;justify-content:center;color:var(--gb-pink);margin-bottom:18px;}
.offer .of-ic svg{width:24px;height:24px;}
.offer h4{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:20px;color:#fff;margin:0 0 10px;letter-spacing:.015em;}
.offer p{font-size:14px;color:rgba(255,255,255,.82);line-height:1.55;margin:0;}
.offer-more{text-align:center;margin:34px auto 0;max-width:60ch;font-size:14.5px;color:var(--fg2);}
/* stories phone video placeholder badge */
.phone .vid-note{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(14,30,55,.7);padding:6px 10px;margin:0 14px;border-radius:8px;z-index:2;}
.phone .play-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;background:var(--gb-pink);border:none;z-index:2;}
.phone .play-badge::before{display:none;}
@media(max-width:920px){
.offergrid{grid-template-columns:1fr;}
}
/* success / payoff wins */
.win-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.win{display:flex;align-items:center;gap:15px;background:rgba(10,26,48,.94);border:1px solid rgba(125,185,235,.30);border-radius:14px;padding:24px 24px;box-shadow:0 16px 34px -22px rgba(0,0,0,.6);}
.win svg{flex:none;width:27px;height:27px;color:var(--gb-pink);}
.win span{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:19.5px;line-height:1.08;color:#fff;letter-spacing:.01em;}
@media(max-width:920px){.win-grid{grid-template-columns:1fr;}}
/* ---- reveal cards (front + detail, crossfade — no fragile 3D) ---- */
.flip{height:374px;cursor:pointer;position:relative;}
.pop-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);z-index:3;
font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;
background:var(--gb-pink);border-radius:99px;padding:5px 14px;white-space:nowrap;
box-shadow:0 8px 20px -6px rgba(255,24,148,.6);}
.flip-hot .flip-front{border:1.5px solid var(--gb-pink);box-shadow:0 0 0 1px var(--gb-pink);}
.flip-inner{position:relative;width:100%;height:100%;}
.flip-face{position:absolute;inset:0;border-radius:18px;padding:30px 28px;flex-direction:column;}
.flip-front{background:var(--gb-navy-800);border:1px solid rgba(255,255,255,.12);display:flex;}
.flip-back{background:linear-gradient(160deg,#1f568f,#0E1E36);border:1px solid rgba(255,24,148,.5);justify-content:flex-start;display:none;}
.flip-back .fb-row{padding:8px 0;}
.flip-cta{margin-top:auto;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff;
background:var(--gb-pink);border-radius:999px;padding:10px 18px;text-decoration:none;cursor:pointer;
transition:background var(--dur),transform var(--dur);box-shadow:0 10px 24px -10px rgba(255,24,148,.7);}
.flip-cta:hover{background:var(--gb-pink-600,#C9166B);transform:translateY(-1px);}
.flip-cta svg{width:14px;height:14px;}
.flip:hover .flip-front{border-color:rgba(255,24,148,.4);}
.flip.flipped .flip-front{display:none;}
.flip.flipped .flip-back{display:flex;}
.flip-front .of-ic{width:46px;height:46px;border-radius:12px;background:rgba(255,24,148,.14);display:flex;align-items:center;justify-content:center;color:var(--gb-pink);margin-bottom:16px;flex:none;}
.flip-front .of-ic svg{width:24px;height:24px;}
.flip-front .of-k{display:block;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gb-pink);margin-bottom:12px;}
.flip-front h3{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:21px;color:#fff;margin:0 0 10px;letter-spacing:.015em;line-height:1.02;}
.flip-front .fd{font-size:15.5px;color:rgba(255,255,255,.86);line-height:1.5;margin:0;}
.flip-hint{margin-top:auto;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;font-weight:700;display:inline-flex;align-items:center;gap:7px;padding-top:16px;}
.flip-hint svg{width:14px;height:14px;color:var(--gb-pink);}
.fb-row{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.2);}
.fb-row:last-child{border-bottom:none;}
.fb-l{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#fff;font-weight:800;margin-bottom:5px;opacity:.7;}
.fb-row p{font-size:13.5px;line-height:1.42;color:#fff !important;margin:0;font-weight:500;}
/* featured (most popular) tier highlight */
.way.featured{border:1.5px solid var(--gb-pink);box-shadow:0 0 0 1px var(--gb-pink),0 26px 60px -30px rgba(255,24,148,.45);}
.way .wtag.hot{color:#fff;background:var(--gb-pink);padding:4px 12px;border-radius:99px;display:inline-block;}
/* ---- ethos strip (redesigned) ---- */
.ethos{background:radial-gradient(95% 140% at 50% 0%, #17407a, #0E1E36 72%) !important;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);padding:50px 0 !important;text-align:center;}
.ethos .wrap{display:block !important;}
.ethos-ey{font-family:var(--font-sans);font-weight:700;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gb-pink);margin:0 0 20px;}
.ethos-row{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.5vw,28px);flex-wrap:wrap;}
.ew{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(30px,4.8vw,60px);line-height:1;color:#fff;letter-spacing:.01em;}
.ethos-row svg{color:var(--gb-pink);flex:none;}
@media(max-width:760px){.flip{height:360px;}}
/* grit guide verbs */
.gg-verbs{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0;}
.gg-verbs span{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:14px;letter-spacing:.06em;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:7px 16px;}
/* problems we solve — flip cards */
.problems .flip{height:300px;}
.prob-h{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(22px,2.4vw,28px);color:#fff;margin:8px 0 0;line-height:1.05;letter-spacing:.01em;}
.prob-fix{font-size:16px;line-height:1.5;color:#fff;margin:10px 0 0;font-weight:500;}
/* dual-path outcome bullets */
.dp-bullets{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;}
.dp-bullets li{display:flex;gap:11px;align-items:flex-start;}
.dp-bullets li svg{flex:none;width:18px;height:18px;color:var(--gb-pink);margin-top:2px;}
.dp-bullets b{display:block;color:#fff;font-size:15px;font-weight:700;line-height:1.25;}
.dp-bullets i{display:block;font-style:normal;color:rgba(255,255,255,.62);font-size:12.5px;margin-top:2px;line-height:1.35;}
/* clickable audience bubbles + detail */
.deep .textlink,.bluewash .textlink,.problems .textlink,.navy .textlink,.dark .textlink{color:#fff;}
.deep .textlink:hover,.bluewash .textlink:hover,.problems .textlink:hover,.navy .textlink:hover,.dark .textlink:hover{color:var(--gb-pink);}
.dualpath .flip{height:440px;}
@media(max-width:920px){.dualpath .flip{height:500px;}}
.audience-chips .chip{cursor:pointer;transition:background .2s,border-color .2s,color .2s;}
.deep .audience-chips .chip:hover{border-color:var(--gb-pink);color:#fff;}
.audience-chips .chip.on{background:var(--gb-pink)!important;border-color:var(--gb-pink)!important;color:#fff!important;}
.aud-detail{margin-top:16px;background:#fff;border:1px solid var(--gb-line);border-left:3px solid var(--gb-pink);border-radius:10px;padding:16px 18px;font-size:15px;color:var(--fg2);line-height:1.5;}
.aud-detail b{color:var(--gb-navy);}
.dual-intro{text-align:center;max-width:48ch;margin:0 auto 30px;font-size:15px;color:rgba(255,255,255,.78);}
.dual-note{text-align:center;max-width:60ch;margin:30px auto 0;font-size:14.5px;color:rgba(255,255,255,.7);line-height:1.5;}
.callout{text-align:center;max-width:720px;margin:0 auto 56px;background:linear-gradient(180deg,rgba(14,30,55,.5),rgba(0,146,214,.1));border:1.5px solid var(--gb-pink);border-radius:16px;padding:34px;box-shadow:0 0 0 1px rgba(255,24,148,.25),0 22px 55px -24px rgba(255,24,148,.4);}
.callout-main{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(22px,2.8vw,36px);line-height:1.12;color:#fff;letter-spacing:.01em;margin:0;text-wrap:balance;}
.callout-sub{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(22px,2.6vw,32px);color:var(--gb-pink);margin:14px 0 0;letter-spacing:.04em;}
.hl-pink{background:var(--gb-pink);color:#fff;padding:.02em .16em;box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.callout-by{font-family:var(--font-sans);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.78);margin:16px 0 0;}
/* ---- nav mega menu (rebuilt) ---- */
.nav-link{white-space:nowrap;}
.mega.services{min-width:640px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;padding:18px;}
.mega.grouped{min-width:540px;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;padding:18px;}
.mega.grouped .mega-foot{grid-column:1/-1;margin-top:4px;}
.mega-col{display:flex;flex-direction:column;}
.mega-h{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gb-pink);padding:6px 14px 8px;}
.mega.services a{padding:8px 14px;}
.mega.services a .mt{font-size:13px;}
.mega-feat{background:var(--gb-navy-900);border-radius:10px;padding:22px;display:flex;flex-direction:column;gap:11px;align-items:flex-start;}
.mega-feat .mf-tag{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gb-pink);}
.mega-feat h5{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:21px;margin:0;color:#fff;letter-spacing:.01em;line-height:1;}
.mega-feat p{font-size:12.5px;color:var(--fg-on-dark-2);line-height:1.5;margin:0;}
.mega .pill-badge{font-size:9px;font-weight:800;letter-spacing:.1em;color:#fff;background:var(--gb-pink);border-radius:99px;padding:2px 8px;margin-left:8px;vertical-align:middle;}
.nav-book{font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#C7D2E2;cursor:pointer;transition:color var(--dur);white-space:nowrap;}
.nav-book:hover{color:#fff;}
@media(max-width:1060px){.nav-book{display:none;}}
/* stat row in proof band */
.stat-row{display:flex;flex-wrap:wrap;justify-content:center;gap:24px 56px;padding-bottom:36px;margin-bottom:34px;border-bottom:1px solid rgba(255,255,255,.14);}
.stat{display:flex;flex-direction:column;align-items:center;gap:4px;}
.stat b{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,4vw,48px);line-height:.85;color:#fff;}
.stat span{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.7);font-weight:600;}
/* what-we-do block */
.qa-kicker{display:block;font-family:var(--font-sans);font-weight:700;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gb-pink);margin-bottom:12px;}
.who-label{font-family:var(--font-sans);font-weight:700;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gb-pink);margin:0 0 16px;}
.deep .audience-chips .chip{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.86);}
.dualpath{display:grid;grid-template-columns:1fr 1fr;column-gap:22px;row-gap:0;margin-top:48px;grid-template-rows:auto auto auto auto auto auto;}
.dualcard{background:var(--gb-navy-800);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:30px 28px;display:grid;grid-row:1 / span 6;grid-template-rows:subgrid;align-content:start;transition:transform var(--dur) var(--ease-out),border-color var(--dur);}
.dualcard:hover{transform:translateY(-4px);border-color:rgba(255,24,148,.42);}
.dualcard .of-k{display:block;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gb-blue-300);margin-bottom:12px;}
.dualcard h3{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:23px;color:#fff;margin:0 0 10px;letter-spacing:.015em;line-height:1.02;}
.dualcard .fd{font-size:14.5px;color:rgba(255,255,255,.84);line-height:1.5;margin:0;}
.dual-why{margin:18px 0 0;padding:16px 0 0;border-top:1px solid rgba(255,255,255,.14);font-size:13.5px;line-height:1.5;color:var(--fg-on-dark-2);}
.dual-why-l{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gb-pink);font-weight:800;margin-bottom:5px;}
.dual-cta{margin-top:20px;display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff;text-decoration:none;cursor:pointer;transition:color var(--dur);}
.dual-cta svg{width:14px;height:14px;color:var(--gb-pink);transition:transform var(--dur);}
.dual-cta:hover{color:var(--gb-pink);}
.dual-cta:hover svg{transform:translateX(3px);}
.dualcard .dp-bullets{margin-top:20px;align-self:start;}
.dualcard .dual-cta{grid-row:6;align-self:end;margin-top:20px;}
.dp{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:30px 28px;border-top:3px solid var(--gb-pink);}
.dp .dp-k{display:block;font-family:var(--font-sans);font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gb-pink);margin-bottom:12px;}
.dp h4{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:24px;color:#fff;margin:0 0 12px;letter-spacing:.015em;}
.dp p{font-size:14.5px;color:rgba(255,255,255,.82);line-height:1.55;margin:0;}
/* dark FAQ */
.faqsec .faq-list{border-top:1px solid rgba(255,255,255,.14);}
.faqsec .faq-item{border-bottom:1px solid rgba(255,255,255,.14);}
.faqsec .faq-q .qtext{color:#fff;}
.faqsec .faq-q .qico{border-color:rgba(255,255,255,.3);color:#fff;}
.faqsec .faq-item.open .qico{background:var(--gb-pink);border-color:var(--gb-pink);color:#fff;}
.faqsec .faq-a p{color:rgba(255,255,255,.9);font-size:16px;}
@media(max-width:920px){
.dualpath{grid-template-columns:1fr;}
.dualpath > .dualcard{grid-row:auto;grid-template-rows:none;display:flex;flex-direction:column;}
.stat-row{gap:18px 34px;}
}
/* pink ombre headline (static stand-in for the live animated pink-ombre effect) */
.gradtext{
background:linear-gradient(90deg,#FF1894 0%,#FF1894 30%,#FF74BC 62%,#FFE3F1 100%);
-webkit-background-clip:text;background-clip:text;
color:transparent !important;-webkit-text-fill-color:transparent;
}
/* ---- partner with grit blueprint ---- */
.partner{background:linear-gradient(160deg,rgba(31,86,143,.4),rgba(14,30,55,.55));border:1px solid rgba(255,255,255,.12);border-top:3px solid var(--gb-pink);border-radius:20px;padding:48px 48px 44px;box-shadow:0 30px 70px -34px rgba(0,0,0,.6);}
.partner-head{display:grid;grid-template-columns:1.5fr .9fr;gap:40px;align-items:center;padding-bottom:40px;margin-bottom:40px;border-bottom:1px solid rgba(255,255,255,.12);}
.partner-cta{display:flex;flex-direction:column;gap:12px;align-items:stretch;justify-self:end;min-width:230px;}
.partner-cta .btn{width:100%;}
.partner-cta .textlink{justify-content:center;}
.partner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;}
.partner-pt .pp-ic{width:44px;height:44px;border-radius:12px;background:rgba(255,24,148,.14);display:flex;align-items:center;justify-content:center;color:var(--gb-pink);margin-bottom:16px;}
.partner-pt .pp-ic svg{width:22px;height:22px;}
.partner-pt h3{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:19px;color:#fff;margin:0 0 8px;letter-spacing:.015em;}
.partner-pt p{font-size:14px;color:var(--fg-on-dark-2);line-height:1.55;margin:0;}
@media(max-width:920px){
.partner{padding:34px 26px 30px;}
.partner-head{grid-template-columns:1fr;gap:24px;}
.partner-cta{justify-self:stretch;}
.partner-grid{grid-template-columns:1fr;gap:26px;}
}
/* ---- blog / insights ---- */
.blog-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:44px;}
.bloggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.post{background:#fff;border:1px solid var(--gb-line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;cursor:pointer;box-shadow:var(--shadow-card);transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);}
.post:hover{transform:translateY(-5px);box-shadow:var(--shadow-card-hover);}
.post-banner{background:var(--gb-pink);padding:24px 24px 22px;}
.post-cat{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--gb-navy);border:1px solid var(--gb-navy);border-radius:99px;padding:5px 12px;margin-bottom:14px;}
.post-banner h3{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:21px;line-height:1.06;color:#fff;margin:0;letter-spacing:.01em;}
.post-body{padding:24px;display:flex;flex-direction:column;flex:1;}
.post-body p{font-size:14.5px;line-height:1.55;color:var(--fg2);margin:0 0 22px;}
.post-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.post-read{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg3);}
.post-more{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--gb-navy);border-radius:99px;padding:9px 16px;transition:background var(--dur);}
.post-more svg{width:14px;height:14px;}
.post:hover .post-more{background:var(--gb-navy-deep);}
@media(max-width:920px){.bloggrid{grid-template-columns:1fr;}.blog-head{margin-bottom:34px;}}
/* ---- Grit Guide preview (magazine mockup in browser chrome) ---- */
.gg-intro{max-width:780px;margin:0 auto 48px;text-align:center;}
.gg-intro .gg-verbs{margin-top:24px;justify-content:center;}
.gg-browser{max-width:1180px;margin:0 auto;border-radius:14px;overflow:hidden;background:#fff;
border:1px solid rgba(255,255,255,.16);box-shadow:0 60px 130px -44px rgba(0,0,0,.75);}
.gg-chrome{display:flex;align-items:center;gap:8px;padding:13px 18px;background:#0E1E36;}
.gg-dot{width:11px;height:11px;border-radius:50%;flex:none;}
.gg-url{margin-left:16px;background:rgba(255,255,255,.1);border-radius:7px;padding:7px 16px;font-size:12.5px;color:rgba(255,255,255,.72);letter-spacing:.02em;min-width:200px;}
.gg-site{background:#fff;color:var(--gb-navy);padding-bottom:32px;text-align:left;}
.gg-util{background:#f1f1f4;text-align:center;padding:9px 8px;font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--gb-navy);}
.gg-util i{color:var(--gb-pink);font-style:normal;margin:0 9px;}
.gg-mast{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:22px 34px 18px;}
.gg-logo{display:flex;flex-direction:column;align-items:center;line-height:1;}
.gg-logo-img{height:54px;width:auto;display:block;}
.gg-logo-row{display:flex;align-items:stretch;}
.gg-l1{font-family:var(--font-display);font-weight:700;font-size:31px;color:var(--gb-navy);letter-spacing:.01em;padding:2px 2px 2px 0;}
.gg-l2{font-family:var(--font-display);font-weight:700;font-size:31px;color:#fff;background:var(--gb-pink);padding:2px 9px;letter-spacing:.01em;}
.gg-by{font-size:8px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--gb-navy);margin-top:5px;}
.gg-acct{justify-self:end;display:flex;gap:12px;}
.gg-sub{border:1.5px solid var(--gb-navy);color:var(--gb-navy);padding:10px 18px;border-radius:3px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;}
.gg-sign{background:var(--gb-navy);color:#fff;padding:10px 18px;border-radius:3px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;}
.gg-nav{display:flex;align-items:center;gap:24px;padding:13px 34px;border-top:1px solid var(--gb-line);border-bottom:1px solid var(--gb-line);}
.gg-navi{font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.02em;color:var(--gb-navy);text-transform:uppercase;display:inline-flex;align-items:center;}
.gg-navi::after{content:"";width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:4px solid var(--gb-navy);margin-left:6px;opacity:.7;}
.gg-search{margin-left:auto;color:var(--gb-navy);display:inline-flex;}
.gg-grid{display:grid;grid-template-columns:.95fr 1.7fr .95fr;gap:30px;padding:26px 34px 0;}
.gg-rail-h{display:flex;align-items:center;justify-content:space-between;border-top:2px solid var(--gb-pink);padding-top:11px;margin-bottom:14px;}
.gg-rail-l{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--gb-navy);}
.gg-rail-r{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gb-ink-3);}
.gg-recent{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--gb-line);}
.gg-recent:first-of-type{padding-top:2px;}
.gg-thumb{width:86px;height:64px;border-radius:4px;flex:none;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85);background:linear-gradient(135deg,#1d4a7e,#0E1E36);}
.gg-t-door-closed{background:linear-gradient(135deg,#2a6aa0,#12345c);}
.gg-t-trending-down{background:linear-gradient(135deg,#c9166b,#7a1247);}
.gg-t-search{background:linear-gradient(135deg,#0f7fb0,#0e2c4a);}
.gg-rbody{display:flex;flex-direction:column;min-width:0;}
.gg-rcat{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gb-blue-700);margin-bottom:5px;}
.gg-rtitle{font-size:14px;font-weight:800;color:var(--gb-navy);line-height:1.18;margin-bottom:6px;}
.gg-rdate{font-size:11px;color:var(--gb-ink-3);font-weight:600;}
.gg-hero{display:flex;flex-direction:column;}
.gg-hero-img{width:100%;aspect-ratio:16/10;border-radius:5px;background:linear-gradient(135deg,#235488,#0E1E36 70%);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.4);margin-bottom:15px;position:relative;overflow:hidden;}
.gg-hero-wm{position:absolute;bottom:12px;right:14px;font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.06em;color:rgba(255,255,255,.32);}
.gg-hero-meta{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gb-ink-3);margin-bottom:12px;}
.gg-hero-h{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(24px,2.6vw,32px);line-height:1.0;color:var(--gb-navy);margin:0;letter-spacing:.01em;}
.gg-site .gg-hero-h{color:var(--gb-navy);}
.gg-pop{display:flex;gap:13px;padding:12px 0;border-bottom:1px solid var(--gb-line);}
.gg-pop:first-of-type{padding-top:2px;}
.gg-pop-n{font-family:var(--font-display);font-weight:700;font-size:30px;color:var(--gb-line);line-height:.85;flex:none;width:26px;}
.gg-pbody{display:flex;flex-direction:column;min-width:0;}
.gg-ptitle{font-size:13px;font-weight:800;color:var(--gb-navy);line-height:1.2;}
.gg-foot{max-width:680px;margin:42px auto 0;text-align:center;}
.gg-foot-links{display:flex;gap:26px;justify-content:center;margin-top:18px;flex-wrap:wrap;}
@media(max-width:920px){
.gg-grid{grid-template-columns:1fr;gap:24px;}
.gg-hero{order:-1;}
.gg-mast{padding:18px 18px 14px;}
.gg-nav{gap:14px;overflow-x:auto;padding:12px 18px;}
.gg-grid{padding:22px 18px 0;}
.gg-acct .gg-sub{display:none;}
}
/* =========================================================================
ACCESSIBILITY LAYER
========================================================================= */
/* skip link */
.skip-link{position:fixed;left:14px;top:-72px;z-index:400;background:var(--gb-pink);color:#fff;
padding:13px 22px;border-radius:10px;font-weight:800;font-size:13px;letter-spacing:.04em;
text-decoration:none;box-shadow:0 14px 36px -10px rgba(0,0,0,.5);transition:top .18s var(--ease-out);}
.skip-link:focus{top:14px;}
/* screen-reader-only utility */
.visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* visible keyboard focus ring (single, consistent, works on light + dark) */
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
outline:3px solid var(--gb-blue-500);outline-offset:3px;border-radius:8px;
}
.nav-link:focus-visible{outline-offset:2px;}
.flip:focus-visible{outline:3px solid var(--gb-blue-500);outline-offset:4px;border-radius:18px;}
/* don't show the ring on mouse click, only keyboard */
:focus:not(:focus-visible){outline:none;}
#main:focus,#main:focus-visible{outline:none;}
/* footer column headings (now real h2 landmarks, styled like the old h5) */
.foot-h{font-family:var(--font-sans);font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gb-pink);margin:0 0 18px;}
/* blog card: one real link, stretched to cover the whole card */
.post{position:relative;}
.post-title-link{color:inherit;text-decoration:none;outline:none;}
.post-title-link::after{content:"";position:absolute;inset:0;z-index:2;}
.post:has(.post-title-link:focus-visible){outline:3px solid var(--gb-blue-500);outline-offset:3px;}
/* respect reduced-motion: no reveal slides, flips, marquee, or lifts */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:.001ms !important;animation-iteration-count:1 !important;
transition-duration:.001ms !important;scroll-behavior:auto !important;
}
.reveal{opacity:1 !important;transform:none !important;}
.flip-inner{transition:none !important;}
.marquee-track{animation:none !important;}
.card.hov:hover,.tier:hover,.offer:hover,.post:hover,.foot-soc a:hover{transform:none !important;}
}
/* ===========================================================================
AUDIT FIXES (post-review pass)
=========================================================================== */
/* kill the page-level horizontal scroll caused by hidden (visibility:hidden)
mega-menus that sit at left:0/width:560px and bleed past the right edge for
the right-side nav items. overflow-x:clip stops the overflow WITHOUT creating
a scroll container, so the sticky nav keeps working. */
html, body { overflow-x: clip; }
/* Payoff section: let the intro line run full width (one line on desktop) */
.payoff .sechead .lead { max-width: none; }
/* --- brand pink on LIGHT sections, sized to 19px so #FF1894 (~3.6:1) clears
WCAG AA large-text contrast (>=18.66px bold). stars sit on dark ombre cards
now, so they revert to full brand pink. --- */
.white .eyebrow, .paper .eyebrow { color: var(--gb-pink-600); }
.white .who-label, .paper .who-label { color: var(--gb-pink-600); }
/* --- hero: founder portrait (pink hat) replaces the flat monogram --- */
.hero-cat{letter-spacing:.14em;margin-bottom:20px;}
.hero-art{position:relative;display:flex;align-items:center;justify-content:center;}
.hero-portrait{position:relative;z-index:1;width:min(40vw,440px);}
.hero-portrait img{width:100%;display:block;border-radius:20px;
border:1px solid rgba(255,255,255,.14);
box-shadow:0 40px 80px -28px rgba(0,0,0,.6), 0 0 0 6px rgba(0,146,214,.08);}
.hero-portrait img.hero-wm{position:absolute;z-index:2;width:120px !important;height:auto !important;
top:-26px;left:-26px;border:none !important;border-radius:0 !important;box-shadow:none !important;
opacity:1;pointer-events:none;filter:drop-shadow(0 10px 22px rgba(0,0,0,.55));}
@media(max-width:920px){
.hero-portrait{width:min(62vw,300px);}
.hero-portrait img.hero-wm{width:84px !important;top:-16px;left:-16px;}
}
.hero-portrait-cap{position:absolute;z-index:2;left:16px;bottom:16px;
display:flex;flex-direction:column;gap:1px;
background:rgba(14,30,55,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:10px 16px;
font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.82);font-weight:600;}
.hero-portrait-cap b{font-family:var(--font-display);font-weight:700;font-size:17px;
letter-spacing:.02em;color:#fff;line-height:1;}
/* keep "best-kept secret" together — never split the hyphen across lines */
.hero-copy .display .accent-pink{white-space:nowrap;}
/* --- merged "cost of being invisible" signs card --- */
.signs-card{background:rgba(8,24,46,.5);border:1px solid rgba(255,255,255,.14);
border-radius:18px;padding:30px 30px 32px;box-shadow:var(--shadow-card);}
.signs-h{font-family:var(--font-sans);font-weight:800;font-size:12px;letter-spacing:.16em;
text-transform:uppercase;color:var(--gb-pink);margin:0 0 18px;}
.signs-card .checklist{margin:0;}
/* --- lead offer card: surface "why it matters" on the front (desktop) --- */
.fd-why{display:none;}
.fd-why-l{display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
color:var(--gb-pink);font-weight:800;margin-bottom:6px;}
@media(min-width:761px){
.offergrid .flip{height:414px;}
.fd-why{display:block;margin:15px 0 0;padding-top:15px;
border-top:1px solid rgba(255,255,255,.14);
font-size:15px;line-height:1.55;color:rgba(255,255,255,.86);}
}
/* --- investment-level signal under the Build Your Authority tiers --- */
.tier-note{max-width:64ch;margin:6px auto 30px;text-align:center;
font-size:14.5px;line-height:1.6;color:var(--fg-on-dark-2);}
/* --- client spotlight (quantified proof) sits on the paper testimonials section --- */
.spotlight{background:
radial-gradient(120% 140% at 100% 0%, rgba(255,24,148,.20), transparent 55%),
linear-gradient(155deg,#16447f 0%,#0E1E36 72%);
border:1.5px solid var(--gb-pink);border-radius:20px;
padding:40px clamp(28px,4vw,56px);margin:0 0 44px;
box-shadow:var(--shadow-pink-glow), 0 30px 70px -34px rgba(14,30,55,.5);}
.sp-tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.16em;
text-transform:uppercase;color:var(--gb-pink);margin-bottom:18px;}
.sp-quote{font-family:var(--font-display);text-transform:uppercase;font-weight:700;
font-size:clamp(22px,2.6vw,34px);line-height:1.12;color:#fff;letter-spacing:.01em;
margin:0;text-wrap:balance;}
.sp-results{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
margin:30px 0 24px;padding:24px 0;border-top:1px solid rgba(255,255,255,.16);
border-bottom:1px solid rgba(255,255,255,.16);}
.sp-results b{display:block;font-family:var(--font-display);text-transform:uppercase;
font-weight:700;font-size:clamp(26px,3vw,34px);color:#fff;line-height:.95;}
.sp-results span{display:block;margin-top:8px;font-size:17.5px;letter-spacing:.005em;
color:#e3edf8;line-height:1.4;}
.sp-by{font-size:13px;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.82);margin:0 0 16px;}
.spotlight .textlink{color:#fff;}
.spotlight .textlink:hover{color:var(--gb-pink);}
@media(max-width:760px){
.sp-results{grid-template-columns:1fr;gap:16px;text-align:left;}
}
/* --- engagement snapshot (timeline) under the How We Work steps --- */
.engage{margin-top:48px;padding-top:36px;border-top:1px solid var(--gb-line);}
.engage-h{text-align:center;font-family:var(--font-sans);font-weight:800;font-size:12px;
letter-spacing:.16em;text-transform:uppercase;color:var(--gb-pink-600);margin:0 0 26px;}
.engage-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:eg;}
.eg{position:relative;padding:22px 24px;background:#fff;border:1px solid var(--gb-line);
border-radius:12px;box-shadow:var(--shadow-card);}
.eg-when{display:block;font-family:var(--font-display);text-transform:uppercase;font-weight:700;
font-size:18px;color:var(--gb-navy);letter-spacing:.01em;margin-bottom:9px;}
.eg p{margin:0;font-size:13.5px;line-height:1.55;color:var(--fg2);}
@media(max-width:760px){.engage-row{grid-template-columns:1fr;gap:14px;}}
/* --- "Invisible" watermark lives in the cost-of-being-invisible section (see .invisible-wm) --- */
/* ============================== [2] FLOW-TEXT SHIMMER ============================== */
/* ============================================================
GRIT FLOW-TEXT — animated white→blue→pink shimmer for headlines
Brand: Grit Blueprint. Drop-in, no dependencies.
USAGE
-----
1. Link this file on any page:
2. Add the class to any heading / span. Works best on a dark or
ombre background (white parts vanish on light backgrounds).
It Should Say Your Name.
3. Optional modifiers:
class="gb-flow gb-flow--pink" pink-led (less white)
class="gb-flow gb-flow--calm" slower, no glow pulse
class="gb-flow gb-flow--static" no animation at all
TUNING: --gb-flow-size and the heroGrad end position are kept in
sync via the same variable, so you only change one number.
============================================================ */
.gb-flow {
--gb-flow-size: 230%; /* gradient width — bigger = longer sweep */
--gb-flow-speed: 8s; /* @kind other */ /* shimmer duration */
--gb-flow-glow-speed: 4.5s; /* @kind other */ /* glow-pulse duration */
--gb-flow-pink: #FF1894; /* Stefanie Pink */
background-image: linear-gradient(
100deg,
var(--gb-flow-pink) 0%,
#ff8fcb 12%,
#ffffff 28%,
#bfe4f7 42%,
var(--gb-flow-pink) 56%,
#ff8fcb 68%,
#ffffff 84%,
var(--gb-flow-pink) 100%
);
background-size: var(--gb-flow-size) auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* Animate only when motion is welcome (covers print + reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
.gb-flow:not(.gb-flow--static) {
animation:
gbFlowSweep var(--gb-flow-speed) linear infinite,
gbFlowGlow var(--gb-flow-glow-speed) ease-in-out infinite;
}
.gb-flow--calm {
animation: gbFlowSweep calc(var(--gb-flow-speed) * 1.8) linear infinite;
}
}
@keyframes gbFlowSweep {
0% { background-position: 0% center; }
100% { background-position: var(--gb-flow-size) center; }
}
@keyframes gbFlowGlow {
0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 24, 148, 0)); }
50% { filter: drop-shadow(0 0 24px rgba(255, 24, 148, .38)); }
}
/* Pink-led variant: pink dominates, white only as highlights */
.gb-flow--pink {
background-image: linear-gradient(
100deg,
var(--gb-flow-pink) 0%,
#ff8fcb 26%,
#ffffff 46%,
var(--gb-flow-pink) 66%,
#ff8fcb 100%
);
}
/* ============================================================
MORE EFFECTS — all reference a shared pink fallback so they
work standalone. Effects marked (hover/scroll) trigger on
:hover OR when you add the class `.is-in` (e.g. via an
IntersectionObserver — snippet at the bottom of this file).
============================================================ */
/* 2 — SHINE: pale-blue text with a white light sweeping across.
Great for calm, premium headlines on dark. */
.gb-shine {
--p: var(--gb-flow-pink, #FF1894);
background-image: linear-gradient(100deg,#d6e8f7 0%,#d6e8f7 40%,#ffffff 50%,#d6e8f7 60%,#d6e8f7 100%);
background-size: 220% auto;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
.gb-shine { animation: gbShine 3.6s linear infinite; }
}
@keyframes gbShine { 0% { background-position: 0% center; } 100% { background-position: 220% center; } }
/* 3 — MARK (hover/scroll): a pink highlighter bar wipes in behind
the text. Put on a word/span inside a heading. */
.gb-mark {
background-image: linear-gradient(var(--gb-flow-pink,#FF1894),var(--gb-flow-pink,#FF1894));
background-repeat: no-repeat;
background-position: 0 86%;
background-size: 0% 44%;
padding: 0 .06em;
transition: background-size .5s cubic-bezier(.22,1,.36,1), color .5s ease;
}
.gb-mark:hover, .gb-mark.is-in { background-size: 100% 44%; color: #fff; }
/* 4 — STROKE (hover/scroll): outlined Zuume text that fills pink.
Ghosted on dark until triggered. */
.gb-stroke {
color: transparent;
-webkit-text-stroke: 2px var(--gb-flow-pink,#FF1894);
text-stroke: 2px var(--gb-flow-pink,#FF1894);
transition: color .35s ease;
}
.gb-stroke:hover, .gb-stroke.is-in { color: var(--gb-flow-pink,#FF1894); }
/* 5 — SPLIT: a subtle pink/blue channel offset, always on, stronger
on hover. Reads as a permanent “print mis-registration.” */
.gb-split {
--p: var(--gb-flow-pink,#FF1894);
text-shadow: -1px 0 var(--p), 1px 0 #0092D6;
transition: text-shadow .16s ease;
}
.gb-split:hover { text-shadow: -2px 0 var(--p), 2px 0 #0092D6; }
/* 6 — UNDERLINE (hover/scroll): a pink→blue rule draws under the
text left-to-right. Inline-friendly. */
.gb-underline {
background-image: linear-gradient(90deg,var(--gb-flow-pink,#FF1894),var(--gb-flow-pink,#FF1894));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0% 3px;
padding-bottom: .1em;
transition: background-size .45s cubic-bezier(.22,1,.36,1);
}
.gb-underline:hover, .gb-underline.is-in { background-size: 100% 3px; }
/* ------------------------------------------------------------
OPTIONAL scroll trigger for the (hover/scroll) effects — adds
`.is-in` as each element scrolls into view. Drop once per page:
------------------------------------------------------------ */
/* ============================================================
EXPANSION PACK — six more, same drop-in rules. Backgrounds:
most want DARK/ombre; gb-gradient is the one built for LIGHT.
============================================================ */
/* 7 — NEON: pink tube-glow, the Grit Studios after-dark look.
Solid white face, layered pink halo, gentle flicker. */
.gb-neon {
--p: var(--gb-flow-pink, #FF1894);
color: #fff;
text-shadow: 0 0 4px #fff, 0 0 12px var(--p), 0 0 26px var(--p), 0 0 46px var(--p);
}
@media (prefers-reduced-motion: no-preference) {
.gb-neon { animation: gbNeon 3.4s ease-in-out infinite; }
}
@keyframes gbNeon {
50% { text-shadow: 0 0 4px #fff, 0 0 8px var(--p), 0 0 16px var(--p), 0 0 28px var(--p); }
}
/* 8 — 3D EXTRUDE: white face stacked over a pink-to-deep-pink
extrusion. Big, confident, poster-grade. */
.gb-3d {
--p: var(--gb-flow-pink, #FF1894);
color: #fff;
text-shadow:
1px 1px 0 var(--p), 2px 2px 0 var(--p), 3px 3px 0 var(--p),
4px 4px 0 #D40D78, 5px 5px 0 #D40D78,
7px 8px 14px rgba(0,0,0,.45);
}
/* 9 — EMBOSS: raised steel lettering on a navy surface. Legible
steel-blue face with a top-light / bottom-shadow bevel. */
.gb-emboss {
color: #7c9cc2;
text-shadow: 0 1px 0 rgba(255,255,255,.28), 0 -1px 1px rgba(0,0,0,.6), 0 2px 4px rgba(0,0,0,.45);
}
/* 10 — SPOTLIGHT: a bright point of light drifts across dim text,
as if a follow-spot is sweeping the wordmark. */
.gb-spotlight {
background: radial-gradient(circle at 50% 50%, #ffffff 0%, #ffffff 8%, rgba(255,255,255,.55) 26%, rgba(255,255,255,.55) 100%);
background-size: 250% 250%;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
.gb-spotlight { animation: gbSpot 5.5s ease-in-out infinite; }
}
@keyframes gbSpot {
0% { background-position: 8% 30%; }
50% { background-position: 92% 70%; }
100% { background-position: 8% 30%; }
}
/* 11 — RISE: the line lifts and unmasks from its baseline. Auto-plays
on load so it never stays blank; reduced-motion shows it static.
(Want it on scroll instead? gate with `.is-in` — see note.) */
.gb-rise { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
.gb-rise { animation: gbRise .8s cubic-bezier(.22,1,.36,1) both; }
}
@keyframes gbRise {
from { clip-path: inset(0 0 108% 0); transform: translateY(.32em); opacity: 0; }
to { clip-path: inset(-12% 0 -12% 0); transform: none; opacity: 1; }
}
/* 12 — GRADIENT (for LIGHT backgrounds): navy→blue→pink fill.
The companion to gb-flow when the section is white/plaster. */
.gb-gradient {
background-image: linear-gradient(100deg, #18355E 0%, #0092D6 50%, var(--gb-flow-pink,#FF1894) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
/* Add `.gb-rise` to the IntersectionObserver list in the snippet
above (querySelectorAll('.gb-mark, .gb-stroke, .gb-underline, .gb-rise')). */
/* ============================================================
LIGHT-BACKGROUND PACK — built for white / plaster (#F9F7F2)
sections. Navy ink with pink + bright-blue accents. Pair these
with the dark effects above (same trigger rules).
============================================================ */
/* L1 — FLOW INK: animated navy→blue→pink shimmer (the gb-flow twin
for light backgrounds). Pink recurs so it's always in view. */
.gb-flow-ink {
--p: var(--gb-flow-pink, #FF1894);
--gb-flow-size: 230%;
background-image: linear-gradient(100deg,
#18355E 0%, #0092D6 16%, var(--p) 32%, #18355E 50%,
#0092D6 66%, var(--p) 82%, #18355E 100%);
background-size: var(--gb-flow-size) auto;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
.gb-flow-ink { animation: gbFlowSweep 8s linear infinite; }
}
/* L2 — SHINE INK: navy text with a bright-blue light sweeping across. */
.gb-shine-ink {
background-image: linear-gradient(100deg,#18355E 0%,#18355E 42%,#0092D6 50%,#18355E 58%,#18355E 100%);
background-size: 220% auto;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
.gb-shine-ink { animation: gbShine 3.6s linear infinite; }
}
/* L3 — 3D INK: navy face over a pink extrusion, for light bg. */
.gb-3d-ink {
--p: var(--gb-flow-pink, #FF1894);
color: #18355E;
text-shadow:
1px 1px 0 var(--p), 2px 2px 0 var(--p), 3px 3px 0 #D40D78,
5px 6px 10px rgba(24,53,94,.22);
}
/* L4 — STROKE INK (hover/scroll): navy outline that fills navy. */
.gb-stroke-ink {
color: transparent;
-webkit-text-stroke: 2px #18355E;
text-stroke: 2px #18355E;
transition: color .35s ease;
}
.gb-stroke-ink:hover, .gb-stroke-ink.is-in { color: #18355E; }
/* L5 — SPOTLIGHT INK: a pink light pool drifts across navy text. */
.gb-spotlight-ink {
--p: var(--gb-flow-pink, #FF1894);
background: radial-gradient(circle at 50% 50%, var(--p) 0%, var(--p) 9%, #18355E 30%, #18355E 100%);
background-size: 250% 250%;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
.gb-spotlight-ink { animation: gbSpot 5.5s ease-in-out infinite; }
}
/* L6 — MARK BLUE: bright-blue highlighter variant of gb-mark.
Use as `class="gb-mark gb-mark--blue"`. */
.gb-mark--blue { background-image: linear-gradient(#0092D6,#0092D6); }
/* ============================================================
MAXIMALIST DARK PACK — 10 statement effects for dark / ombre.
Brand palette only (navy / pink / bright-blue / white).
============================================================ */
/* D1 — CHROME: liquid metallic sweep with a pink hot-band. */
.gb-chrome {
--p: var(--gb-flow-pink,#FF1894);
background-image: linear-gradient(100deg,#cfe6f7 0%,#ffffff 12%,#7fb4d8 24%,#ffffff 38%,var(--p) 50%,#ffffff 62%,#7fb4d8 76%,#ffffff 88%,#cfe6f7 100%);
background-size: 250% auto;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
@media (prefers-reduced-motion: no-preference) { .gb-chrome { animation: gbChrome 6s linear infinite; } }
@keyframes gbChrome { 0% { background-position: 0% center; } 100% { background-position: 250% center; } }
/* D2 — GLITCH: pink/blue channel split that bursts on a timer.
REQUIRES a data-text copy: GO */
.gb-glitch { --p: var(--gb-flow-pink,#FF1894); position: relative; color: #fff; }
.gb-glitch::before, .gb-glitch::after {
content: attr(data-text); position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none;
}
.gb-glitch::before { color: var(--p); }
.gb-glitch::after { color: #0092D6; }
@media (prefers-reduced-motion: no-preference) {
.gb-glitch::before { animation: gbGlitchA 3s steps(1) infinite; }
.gb-glitch::after { animation: gbGlitchB 3.7s steps(1) infinite; }
}
@keyframes gbGlitchA {
0%,92%,100% { opacity: 0; transform: translate(0,0); clip-path: inset(0 0 0 0); }
93% { opacity: .9; transform: translate(-3px,-1px); clip-path: inset(0 0 64% 0); }
95% { opacity: .9; transform: translate(2px,1px); clip-path: inset(56% 0 0 0); }
97% { opacity: .9; transform: translate(-2px,0); clip-path: inset(32% 0 38% 0); }
}
@keyframes gbGlitchB {
0%,90%,100% { opacity: 0; transform: translate(0,0); clip-path: inset(0 0 0 0); }
91% { opacity: .85; transform: translate(3px,1px); clip-path: inset(0 0 58% 0); }
94% { opacity: .85; transform: translate(-2px,-1px); clip-path: inset(60% 0 0 0); }
96% { opacity: .85; transform: translate(2px,0); clip-path: inset(38% 0 30% 0); }
}
/* D3 — SCAN: a bright bar scans vertically down the text. */
.gb-scan {
background-image: linear-gradient(180deg,#bcd9ee 0%,#bcd9ee 44%,#ffffff 50%,#bcd9ee 56%,#bcd9ee 100%);
background-size: auto 250%;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
@media (prefers-reduced-motion: no-preference) { .gb-scan { animation: gbScan 3.4s linear infinite; } }
@keyframes gbScan { 0% { background-position: center 0%; } 100% { background-position: center 250%; } }
/* D4 — FLICKER: a neon sign with an irregular flutter. */
.gb-flicker { --p: var(--gb-flow-pink,#FF1894); color: #fff; text-shadow: 0 0 6px #fff, 0 0 16px var(--p), 0 0 30px var(--p); }
@media (prefers-reduced-motion: no-preference) { .gb-flicker { animation: gbFlicker 4.2s linear infinite; } }
@keyframes gbFlicker {
0%,18%,22%,25%,52%,100% { opacity: 1; }
20% { opacity: .35; } 23% { opacity: .55; } 53% { opacity: .7; } 54% { opacity: 1; }
}
/* D5 — HOLO: iridescent holographic shift (white / blue / pink). */
.gb-holo {
--p: var(--gb-flow-pink,#FF1894);
background-image: linear-gradient(115deg,#ffffff,#9fd4f0 18%,var(--p) 36%,#ffffff 50%,#9fd4f0 66%,var(--p) 84%,#ffffff 100%);
background-size: 280% auto;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
filter: drop-shadow(0 0 9px rgba(0,146,214,.3));
}
@media (prefers-reduced-motion: no-preference) { .gb-holo { animation: gbHolo 7s linear infinite; } }
@keyframes gbHolo { 0% { background-position: 0% center; } 100% { background-position: 280% center; } }
/* D6 — TYPE: typewriter reveal with a blinking pink caret.
Length-independent (clip-based). inline-block. */
.gb-type {
--p: var(--gb-flow-pink,#FF1894);
display: inline-block; color: #fff;
border-right: .07em solid var(--p); padding-right: .06em;
}
@media (prefers-reduced-motion: no-preference) {
.gb-type { animation: gbType 2.6s steps(26,end) both, gbCaret .8s step-end infinite; }
}
@keyframes gbType { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes gbCaret { 50% { border-color: transparent; } }
/* D7 — LONG SHADOW: a flat navy extrusion drops to the lower-right. */
.gb-longshadow {
color: #fff;
text-shadow:
1px 1px 0 #14305a, 2px 2px 0 #14305a, 3px 3px 0 #13294f,
4px 4px 0 #122648, 5px 5px 0 #112341, 6px 6px 0 #0f203b,
7px 7px 0 #0e1d34, 8px 8px 0 #0d1a2e, 11px 12px 20px rgba(0,0,0,.45);
}
/* D8 — SHEEN: a sharp glass gloss line crosses bright white text. */
.gb-sheen {
background-image: linear-gradient(110deg,#ffffff 0%,#ffffff 40%,#bfe4f7 47%,#ffffff 50%,#ffffff 53%,#9fc7e6 60%,#ffffff 100%);
background-size: 300% auto;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
@media (prefers-reduced-motion: no-preference) { .gb-sheen { animation: gbSheen 4.5s linear infinite; } }
@keyframes gbSheen { 0% { background-position: 120% center; } 100% { background-position: -20% center; } }
/* D9 — AURORA: soft pink+blue light drifts behind the words. */
.gb-aurora { position: relative; color: #fff; isolation: isolate; }
.gb-aurora::before {
content: ""; position: absolute; inset: -34% -12%; z-index: -1; pointer-events: none;
background:
radial-gradient(40% 60% at 22% 42%, rgba(255,24,148,.55), transparent 60%),
radial-gradient(46% 56% at 80% 60%, rgba(0,146,214,.55), transparent 62%);
filter: blur(30px);
}
@media (prefers-reduced-motion: no-preference) { .gb-aurora::before { animation: gbAurora 8s ease-in-out infinite; } }
@keyframes gbAurora { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(6%,-8%) scale(1.15); } }
/* D10 — SLAM (hover/scroll): word scales + unblurs into place.
Fires when it enters view (.is-in) so below-the-fold uses
actually animate; no-JS / reduced-motion just shows it. */
.gb-slam { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
.gb-slam.is-in { animation: gbSlam .6s cubic-bezier(.22,1,.36,1) both; }
}
@keyframes gbSlam {
0% { opacity: 0; transform: scale(1.4); filter: blur(8px); }
60% { opacity: 1; }
100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
/* ============================== [3] START HERE PAGE STYLES ============================== */
/* ============ BASE / MOTIF ============ */
.accent{color:var(--gb-blue-500);}
.deep .accent,.navy .accent{color:var(--gb-blue-300);}
.sec{padding:108px 0;position:relative;overflow:hidden;}
.sec.deep{background:var(--gb-navy-900);color:#fff;}
.sec.deep .h2,.sec.deep .display{color:#fff;}
.sec.deep .lead{color:var(--fg-on-dark-2);}
.wrap{position:relative;z-index:2;}
.scroll-prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:600;background:linear-gradient(90deg,var(--gb-pink),var(--gb-blue-500));box-shadow:0 0 14px rgba(255,24,148,.55);pointer-events:none;}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--gb-pink);color:#fff;padding:12px 18px;border-radius:0 0 8px 0;z-index:700;font-weight:700;}
.skip-link:focus{left:0;}
a:focus-visible,button:focus-visible,.bwin:focus-visible,.sc-opt:focus-visible{outline:3px solid var(--gb-blue-300);outline-offset:3px;border-radius:4px;}
.js .reveal-up{opacity:0;transform:translateY(28px);}
.js .reveal-up.in{opacity:1;transform:none;transition:opacity .6s var(--ease-out),transform .72s var(--ease-out);}
@media(prefers-reduced-motion:reduce){.js .reveal-up{opacity:1!important;transform:none!important;}}
/* drafting grid for dark sections */
.draft-grid{position:absolute;inset:0;pointer-events:none;z-index:0;
background:
linear-gradient(rgba(83,140,196,.09) 1px,transparent 1px) 0 0/40px 40px,
linear-gradient(90deg,rgba(83,140,196,.09) 1px,transparent 1px) 0 0/40px 40px,
linear-gradient(rgba(83,140,196,.14) 1px,transparent 1px) 0 0/240px 240px,
linear-gradient(90deg,rgba(83,140,196,.14) 1px,transparent 1px) 0 0/240px 240px;
-webkit-mask-image:radial-gradient(130% 110% at 70% 30%,#000 36%,transparent 86%);
mask-image:radial-gradient(130% 110% at 70% 30%,#000 36%,transparent 86%);}
/* faint blueprint grid for light sections */
.draft-grid.light{background:
linear-gradient(rgba(24,53,94,.05) 1px,transparent 1px) 0 0/40px 40px,
linear-gradient(90deg,rgba(24,53,94,.05) 1px,transparent 1px) 0 0/40px 40px,
linear-gradient(rgba(24,53,94,.08) 1px,transparent 1px) 0 0/240px 240px,
linear-gradient(90deg,rgba(24,53,94,.08) 1px,transparent 1px) 0 0/240px 240px;
-webkit-mask-image:radial-gradient(120% 100% at 20% 0%,#000 30%,transparent 78%);
mask-image:radial-gradient(120% 100% at 20% 0%,#000 30%,transparent 78%);}
.grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.45;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");}
@media(prefers-reduced-motion:reduce){.grain{display:none;}}
.reg{position:absolute;width:20px;height:20px;z-index:3;border:2px solid var(--gb-pink);pointer-events:none;}
.reg.tl{top:24px;left:24px;border-right:0;border-bottom:0;}
.reg.tr{top:24px;right:24px;border-left:0;border-bottom:0;}
.reg.bl{bottom:24px;left:24px;border-right:0;border-top:0;}
.reg.br{bottom:24px;right:24px;border-left:0;border-top:0;}
.reg.navy{border-color:rgba(24,53,94,.4);}
.ghostword{position:absolute;z-index:0;pointer-events:none;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
line-height:.7;letter-spacing:-.02em;user-select:none;white-space:nowrap;color:rgba(120,165,220,.05);}
.ghostword.navy{color:rgba(24,53,94,.04);}
/* section eyebrow without the auto dash; standalone pink label */
.eyebrow{margin:0 0 18px;}
.sec-eyebrow{font-family:var(--font-sans);font-weight:700;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--gb-pink);margin:0 0 18px;display:inline-flex;align-items:center;gap:12px;}
.sec-eyebrow.center{justify-content:center;}
.sh-head{max-width:820px;margin:0 0 50px;}
.sh-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.sh-head .h2{line-height:.96;}
.sh-head .lead{margin-top:18px;}
.pink{color:var(--gb-pink);}
/* ============ NAV + DRAWER ============ */
.nav{position:sticky;top:0;z-index:200;background:rgba(11,23,46,.86);backdrop-filter:blur(12px);border-bottom:1px solid rgba(79,180,230,.16);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px;gap:24px;}
.nav-logo-link{display:inline-flex;align-items:center;}
.nav-logo{height:23px;width:auto;}
.nav-links{display:flex;align-items:center;gap:2px;}
.nav-link{display:flex;align-items:center;padding:10px 15px;font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#C7D2E2;transition:color var(--dur);}
.nav-link:hover{color:#fff;}
.nav-cta{display:flex;align-items:center;gap:12px;}
.nav-burger{display:none;background:none;border:none;color:#fff;cursor:pointer;padding:8px;}
.nav-burger svg{width:26px;height:26px;}
.drawer{position:fixed;inset:0;z-index:300;visibility:hidden;opacity:0;transition:opacity .3s var(--ease-out),visibility .3s;}
.drawer.open{visibility:visible;opacity:1;}
.drawer-scrim{position:absolute;inset:0;background:rgba(8,18,38,.7);backdrop-filter:blur(3px);}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(86vw,360px);background:var(--gb-navy-900);border-left:1px solid rgba(79,180,230,.2);
padding:26px 28px;display:flex;flex-direction:column;gap:6px;transform:translateX(100%);transition:transform .34s var(--ease-out);overflow-y:auto;}
.drawer.open .drawer-panel{transform:none;}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.drawer-head img{height:22px;}
.drawer-close{background:none;border:none;color:#fff;cursor:pointer;padding:6px;}
.drawer-close svg{width:24px;height:24px;}
.drawer a.d-link{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:24px;color:#fff;letter-spacing:.01em;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08);}
.drawer a.d-link:hover{color:var(--gb-pink);}
.drawer .btn{margin-top:22px;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;}
.btn svg{width:16px;height:16px;}
/* ============ HERO ============ */
.hx{position:relative;min-height:calc(100vh - 74px);overflow:hidden;display:flex;align-items:center;
background:radial-gradient(58% 70% at 82% 18%,rgba(0,146,214,.22),transparent 60%),
radial-gradient(50% 60% at 6% 92%,rgba(255,24,148,.16),transparent 60%),
linear-gradient(158deg,#0B1730 0%,#0E1E36 42%,#102a4e 100%);}
.hx-grid{position:absolute;inset:0;pointer-events:none;z-index:0;
background:
linear-gradient(rgba(83,140,196,.10) 1px,transparent 1px) 0 0/40px 40px,
linear-gradient(90deg,rgba(83,140,196,.10) 1px,transparent 1px) 0 0/40px 40px,
linear-gradient(rgba(83,140,196,.16) 1px,transparent 1px) 0 0/240px 240px,
linear-gradient(90deg,rgba(83,140,196,.16) 1px,transparent 1px) 0 0/240px 240px;
-webkit-mask-image:radial-gradient(130% 110% at 70% 30%,#000 38%,transparent 88%);mask-image:radial-gradient(130% 110% at 70% 30%,#000 38%,transparent 88%);}
.hx-ghost{position:absolute;right:1%;bottom:-6%;z-index:1;pointer-events:none;
font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:42vw;line-height:.7;letter-spacing:-.02em;
color:rgba(120,165,220,.058);user-select:none;white-space:nowrap;}
.hx-grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");}
.hx-glow{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s var(--ease-out);
background:radial-gradient(340px circle at var(--mx,50%) var(--my,40%),rgba(255,24,148,.16),transparent 60%);}
.hx-reg{position:absolute;width:22px;height:22px;z-index:3;border:2px solid var(--gb-pink);pointer-events:none;}
.hx-reg.tl{top:26px;left:26px;border-right:0;border-bottom:0;}
.hx-reg.br{bottom:26px;right:26px;border-left:0;border-top:0;}
.hx-rail{position:absolute;left:0;top:0;bottom:0;width:64px;z-index:2;pointer-events:none;border-right:1px solid rgba(83,140,196,.22);
background:repeating-linear-gradient(180deg,transparent 0,transparent 38px,rgba(83,140,196,.3) 38px,rgba(83,140,196,.3) 39px);}
.hx-rail .tag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-90deg);transform-origin:center;white-space:nowrap;
font-family:var(--font-sans);font-weight:800;font-size:10.5px;letter-spacing:.42em;text-transform:uppercase;color:var(--gb-blue-300);}
.hx-inner{position:relative;z-index:4;width:100%;max-width:1240px;margin:0 auto;padding:74px 80px 84px 120px;}
.hx-eyebrow{font-family:var(--font-sans);font-weight:700;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gb-pink);margin:0 0 22px;display:inline-flex;align-items:center;gap:10px;}
.door-ico{display:inline-flex;line-height:0;color:var(--gb-pink);}
.door-ico .d-panel{transform-box:fill-box;transform-origin:left center;}
@media (prefers-reduced-motion: no-preference){.door-ico .d-panel{animation:doorSwing 1.5s .6s cubic-bezier(.22,1,.36,1) both;}}
@keyframes doorSwing{0%{transform:scaleX(1);}62%{transform:scaleX(.1);}100%{transform:scaleX(.12);}}
.hx-stack{font-family:var(--font-display);font-weight:700;text-transform:uppercase;line-height:.92;letter-spacing:.005em;margin:0;display:block;}
.hx-stack .l1{display:block;font-size:clamp(22px,2.9vw,38px);color:#fff;}
.hx-stack .l1 b{color:#fff;font-weight:700;}
.hx-mega{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:10px;}
.hx-mega .we{font-size:clamp(40px,6vw,86px);color:#fff;line-height:.82;}
.hx-word{position:relative;display:inline-block;}
.hx-word .ghost{visibility:hidden;font-size:clamp(46px,8.6vw,128px);line-height:.78;letter-spacing:-.01em;display:block;}
.hx-word .live{position:absolute;left:0;bottom:0;font-size:clamp(46px,8.6vw,128px);line-height:.78;letter-spacing:-.01em;white-space:nowrap;color:#4a607f;transition:color .35s var(--ease-out);}
.hx-word .live.isB{background:linear-gradient(100deg,var(--gb-pink) 8%,#FFC7E6 52%,#fff 96%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 0 34px rgba(255,24,148,.4));}
.hx-word .base{position:absolute;left:0;right:0;bottom:-6px;height:5px;border-radius:2px;background:#4a607f;transition:background .35s var(--ease-out),box-shadow .35s var(--ease-out);}
.hx-word.isB .base{background:linear-gradient(100deg,var(--gb-pink) 8%,#FFC7E6 52%,#fff 96%);box-shadow:0 0 20px rgba(255,24,148,.45);}
.hx-anno{margin-top:14px;font-family:var(--font-sans);font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gb-blue-300);display:inline-flex;align-items:center;gap:9px;opacity:0;transition:opacity .4s var(--ease-out);}
.hx-anno.show{opacity:.85;}
.hx-anno .dot{width:6px;height:6px;border-radius:50%;background:var(--gb-pink);}
.hx-lead{font-family:var(--font-sans);font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:var(--fg-on-dark-2);max-width:64ch;margin:34px 0 30px;}
.hx-lead b{color:#fff;font-weight:700;}
.hx-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.o-sm{padding:12px 22px;font-size:12px;}
.hx-micro{margin-top:18px;font-family:var(--font-sans);font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--fg-on-dark-3);}
.hx-scroll{display:inline-flex;align-items:center;gap:14px;margin-top:32px;font-family:var(--font-sans);font-weight:800;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--gb-pink);text-decoration:none;}
.hx-scroll .sc-arrow{display:inline-flex;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,24,148,.5);align-items:center;justify-content:center;animation:hxBounce 1.8s ease-in-out infinite;}
.hx-scroll .sc-arrow svg{width:22px;height:22px;}
.hx-scroll:hover .sc-arrow{background:var(--gb-pink);border-color:var(--gb-pink);color:#fff;}
@keyframes hxBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}}
.hx-trust{margin-top:22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:var(--font-sans);font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--fg-on-dark-3);}
.hx-trust b{color:#fff;}
.hx-trust .d{width:5px;height:5px;border-radius:50%;background:var(--gb-pink);}
/* ============ QUICK ANSWER ============ */
.sh-qa-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:56px;align-items:start;}
.sh-def{font-family:var(--font-sans);font-weight:400;font-size:clamp(19px,1.9vw,25px);line-height:1.5;color:var(--fg1);}
.sh-def b{color:var(--gb-navy);font-weight:700;}
.sh-qacard{background:var(--gb-paper);border:1px solid var(--gb-line);border-left:4px solid var(--gb-pink);border-radius:14px;padding:34px 36px;box-shadow:var(--shadow-card);}
.sh-qacard .sub{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:21px;color:var(--gb-navy);letter-spacing:.02em;margin:0 0 16px;line-height:1.1;}
.sh-qacard p{font-size:15.5px;line-height:1.7;color:var(--fg2);margin:0;}
.sh-qacard b{color:var(--gb-navy);}
.qa2{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:start;}
.qa2-def .sh-def{margin:0;}
.qa2-def .sh-def mark{background:linear-gradient(180deg,transparent 58%,rgba(255,24,148,.30) 58%);color:var(--gb-navy);font-weight:700;padding:0 1px;}
.qa2-founder{margin:26px 0 0;display:flex;gap:13px;align-items:flex-start;font-size:14px;line-height:1.55;color:var(--fg2);border-top:1px solid var(--gb-line);padding-top:22px;}
.qa2-founder .dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--gb-pink);margin-top:6px;}
.qa2-founder b{color:var(--gb-navy);}
.qa2-spec{position:relative;overflow:hidden;border-radius:18px;padding:34px 34px;background:linear-gradient(155deg,#0E1E36,#16386c 85%);box-shadow:0 30px 64px -34px rgba(14,30,55,.5);}
.qa2-spec .sg{position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/64px 64px,linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/64px 64px;-webkit-mask-image:radial-gradient(120% 100% at 100% 0,#000 40%,transparent 88%);mask-image:radial-gradient(120% 100% at 100% 0,#000 40%,transparent 88%);}
.qa2-spec > *{position:relative;z-index:1;}
.spec-row{padding:20px 0;border-top:1px solid rgba(120,160,210,.22);}
.spec-row:first-child{padding-top:0;border-top:none;}
.spec-k{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gb-blue-300);margin-bottom:13px;}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.01em;color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:99px;padding:7px 13px;}
.chip.pill{border-color:rgba(255,24,148,.4);background:rgba(255,24,148,.12);}
.chip.start{background:var(--gb-pink);border-color:var(--gb-pink);box-shadow:var(--shadow-pink-glow);}
@media(max-width:1000px){.qa2{grid-template-columns:1fr;gap:34px;}}
/* ============ WHO THIS IS FOR ============ */
.sh-who{display:grid;grid-template-columns:1fr 1fr;gap:4px 44px;}
.sh-who-item{display:flex;gap:18px;align-items:flex-start;padding:24px 0;border-top:1px solid var(--gb-line);}
.sh-who-item .mk{flex:none;width:44px;height:44px;border-radius:11px;background:rgba(255,24,148,.10);color:var(--gb-pink);display:flex;align-items:center;justify-content:center;}
.sh-who-item .mk svg{width:21px;height:21px;}
.sh-who-item h3{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:18px;color:var(--gb-navy);letter-spacing:.015em;margin:2px 0 8px;line-height:1.12;}
.sh-who-item p{font-size:14.5px;line-height:1.55;color:var(--fg2);margin:0;}
.sh-who-close{position:relative;overflow:hidden;margin:64px auto 0;max-width:1060px;border-radius:22px;padding:74px 56px;text-align:center;border:2px solid var(--gb-pink);
background:radial-gradient(70% 90% at 50% 0%,rgba(0,146,214,.4),transparent 62%),linear-gradient(150deg,#0E1E36,#14315c 72%,#103a66);}
.sh-who-close .swb-grid{position:absolute;inset:0;pointer-events:none;
background:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/96px 96px,linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/96px 96px;
-webkit-mask-image:radial-gradient(120% 100% at 50% 0,#000 50%,transparent 90%);mask-image:radial-gradient(120% 100% at 50% 0,#000 50%,transparent 90%);}
.sh-who-close .swb-mark{position:absolute;right:-46px;bottom:-66px;width:330px;opacity:.06;pointer-events:none;}
.sh-who-close h3{position:relative;z-index:1;margin:0 auto;max-width:38ch;font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(26px,3.2vw,46px);line-height:1.04;letter-spacing:.01em;color:#fff;}
.sh-who-close .pink{color:var(--gb-pink);}
.who2{display:flex;align-items:flex-start;gap:16px;text-align:left;width:100%;background:#fff;border:1px solid var(--gb-line);border-radius:14px;padding:22px 24px;cursor:pointer;position:relative;overflow:hidden;font-family:inherit;transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),border-color var(--dur);}
.who2::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--gb-pink),var(--gb-blue-500));transform:scaleY(0);transform-origin:top;transition:transform var(--dur) var(--ease-out);}
.who2:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover);border-color:transparent;}
.who2:hover::before,.who2[aria-pressed="true"]::before{transform:scaleY(1);}
.who2[aria-pressed="true"]{border-color:var(--gb-pink);box-shadow:0 22px 50px -30px rgba(255,24,148,.34);}
.who2-n{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--gb-pink);letter-spacing:.06em;flex:none;padding-top:3px;width:22px;}
.who2-ic{flex:none;width:42px;height:42px;border-radius:11px;background:rgba(255,24,148,.10);color:var(--gb-pink);display:flex;align-items:center;justify-content:center;}
.who2-ic svg{width:21px;height:21px;}
.who2-tx{flex:1;}
.who2-h{display:block;font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:17px;color:var(--gb-navy);letter-spacing:.015em;margin:2px 0 7px;line-height:1.12;}
.who2-p{display:block;font-size:14px;line-height:1.55;color:var(--fg2);}
.who2-chk{flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--gb-line);display:flex;align-items:center;justify-content:center;color:transparent;transition:background var(--dur),border-color var(--dur),color var(--dur);}
.who2-chk svg{width:15px;height:15px;}
.who2[aria-pressed="true"] .who2-chk{background:var(--gb-pink);border-color:var(--gb-pink);color:#fff;}
.who-tally{margin:28px auto 0;text-align:center;font-size:14.5px;font-weight:600;color:var(--fg2);}
.who-tally b{color:var(--gb-pink);font-family:var(--font-display);font-size:19px;letter-spacing:.04em;margin:0 2px;}
/* ============ PROBLEM ============ */
.sh-equation{position:relative;z-index:2;margin:60px auto 0;max-width:920px;display:flex;flex-direction:column;align-items:center;text-align:center;}
.sh-equation .eq-term{margin:0;font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(27px,3.7vw,50px);line-height:1.0;letter-spacing:.01em;color:#fff;}
.sh-equation .eq-dim{color:rgba(255,255,255,.6);}
.sh-equation .eq-op{display:flex;align-items:center;justify-content:center;width:46px;height:46px;margin:14px 0;font-family:var(--font-display);font-weight:700;font-size:30px;line-height:0;color:var(--gb-pink);border:2px solid rgba(255,24,148,.5);border-radius:50%;}
.sh-equation .eq-rule{width:min(580px,86%);height:3px;margin:30px 0 24px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--gb-pink) 18%,var(--gb-pink) 82%,transparent);box-shadow:0 0 24px rgba(255,24,148,.45);}
.sh-equation .eq-sub{margin:0 0 8px;font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(19px,2.1vw,30px);letter-spacing:.03em;color:rgba(255,255,255,.72);}
.sh-equation .eq-result{margin:0;font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(44px,7vw,104px);line-height:.92;letter-spacing:.005em;color:var(--gb-pink);text-shadow:0 0 46px rgba(255,24,148,.4);}
.sh-prob-sub{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(17px,1.8vw,22px);color:var(--gb-pink);letter-spacing:.02em;margin:16px 0 0;}
.sh-prob-copy{max-width:68ch;margin-top:30px;}
.sh-prob-copy p{font-size:clamp(16px,1.3vw,18px);line-height:1.72;color:var(--fg-on-dark-2);margin:0 0 18px;}
.sh-prob-copy p b{color:#fff;font-weight:700;}
.sh-plain{margin:48px auto 0;max-width:82ch;text-align:center;font-size:16px;line-height:1.7;color:var(--fg-on-dark-2);}
.sh-plain b{color:#fff;}
/* ============ WHY NOW ============ */
.sh-then-now{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.tn-card{background:#fff;border:1px solid var(--gb-line);border-radius:16px;padding:34px 32px;position:relative;overflow:hidden;box-shadow:var(--shadow-card);}
.tn-card.now{border-color:var(--gb-pink);box-shadow:0 26px 60px -28px rgba(255,24,148,.30);}
.tn-card .tk{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;}
.tn-card .tk svg{width:16px;height:16px;}
.tn-card.old .tk{color:var(--gb-ink-3);}
.tn-card.now .tk{color:var(--gb-pink);}
.tn-card h3{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(21px,2.2vw,27px);color:var(--gb-navy);letter-spacing:.015em;margin:0 0 14px;line-height:1.05;}
.tn-card p{font-size:15px;line-height:1.65;color:var(--fg2);margin:0;}
.sh-bridge{margin:42px auto;max-width:34ch;text-align:center;font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(24px,2.9vw,40px);line-height:1.08;color:var(--gb-navy);letter-spacing:.01em;}
.sh-bridge .pink{color:var(--gb-pink);}
.sh-readers{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.rd-card{background:#fff;border:1px solid var(--gb-line);border-radius:16px;padding:32px 30px;position:relative;overflow:hidden;box-shadow:var(--shadow-card);}
.rd-card::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--gb-pink);}
.rd-card .rk{display:inline-flex;align-items:center;gap:11px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gb-ink-3);margin-bottom:14px;}
.rd-card .rk .ic{width:38px;height:38px;border-radius:10px;background:rgba(255,24,148,.12);color:var(--gb-pink);display:flex;align-items:center;justify-content:center;}
.rd-card .rk .ic svg{width:19px;height:19px;}
.rd-card h3{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:23px;color:var(--gb-navy);letter-spacing:.02em;margin:0 0 12px;}
.rd-card p{font-size:15px;line-height:1.65;color:var(--fg2);margin:0;}
.sh-highlight{margin-top:40px;position:relative;overflow:hidden;border-radius:20px;padding:48px 48px;
background:radial-gradient(60% 80% at 100% 0%,rgba(0,146,214,.4),transparent 60%),linear-gradient(150deg,#0E1E36,#14315c 70%,#103a66);}
.sh-highlight .hg{position:absolute;inset:0;pointer-events:none;
background:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/96px 96px,linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/96px 96px;
-webkit-mask-image:radial-gradient(120% 100% at 50% 0,#000 50%,transparent 90%);mask-image:radial-gradient(120% 100% at 50% 0,#000 50%,transparent 90%);}
.sh-highlight > *{position:relative;z-index:1;}
.sh-highlight h3{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(24px,2.8vw,38px);line-height:1.06;color:#fff;letter-spacing:.01em;margin:0 0 28px;max-width:38ch;}
.sh-hl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.sh-hl-grid .hl{display:flex;flex-direction:column;gap:12px;}
.sh-hl-grid .hl .ic{width:42px;height:42px;border-radius:11px;background:rgba(255,24,148,.16);color:var(--gb-pink);display:flex;align-items:center;justify-content:center;}
.sh-hl-grid .hl .ic svg{width:21px;height:21px;}
.sh-hl-grid .hl p{font-size:14px;line-height:1.6;color:var(--fg-on-dark-2);margin:0;}
.sh-media{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px;}
.sh-media .mcard{position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.16);background:#0b1a30;min-height:250px;box-shadow:0 24px 50px -30px rgba(0,0,0,.6);margin:0;}
.sh-media .mcard.feat{grid-column:1 / -1;min-height:360px;}
.sh-media .mcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease-out);}
.sh-media .mcard:hover img{transform:scale(1.045);}
.sh-media .mcard .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(7,15,30,.95) 6%,rgba(7,15,30,.34) 48%,rgba(7,15,30,.04) 100%);}
.sh-media .mcard figcaption{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:22px 24px;}
.sh-media .mcard .mc-k{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-sans);font-weight:800;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gb-pink);margin-bottom:9px;}
.sh-media .mcard .mc-k svg{width:13px;height:13px;}
.sh-media .mcard figcaption p{margin:0;font-size:14.5px;line-height:1.5;color:#fff;font-weight:500;max-width:48ch;}
.sh-media .mcard .mc-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;width:62px;height:62px;border-radius:50%;background:rgba(255,24,148,.92);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 32px -8px rgba(255,24,148,.85);transition:transform .3s;}
.sh-media .mcard:hover .mc-play{transform:translate(-50%,-50%) scale(1.08);}
.sh-media .mcard .mc-play svg{width:24px;height:24px;color:#fff;margin-left:3px;fill:#fff;}
.sh-flip{margin:36px auto 0;max-width:76ch;font-size:16px;line-height:1.72;color:var(--fg2);}
.sh-flip b{color:var(--gb-navy);}
.sh-flip-em{margin:30px auto 0;max-width:62ch;text-align:center;font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(22px,2.6vw,36px);line-height:1.1;color:var(--gb-navy);letter-spacing:.01em;}
.sh-flip-em .pink{color:var(--gb-pink);}
.sh-position{position:relative;overflow:hidden;margin-top:16px;border-radius:22px;padding:54px 48px;text-align:center;border:2px solid var(--gb-pink);background:radial-gradient(70% 90% at 50% 0%,rgba(0,146,214,.34),transparent 62%),linear-gradient(150deg,#0E1E36,#14315c 72%,#103a66);}
.sh-position .sp-k{display:block;margin:0 0 16px;font-family:var(--font-sans);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gb-pink);}
.sh-position h3{margin:0 auto;max-width:24ch;font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(28px,3.7vw,52px);line-height:1.04;letter-spacing:.01em;color:#fff;}
.sh-position .pink{color:var(--gb-pink);}
.sh-pull{margin:44px auto 0;max-width:62ch;text-align:center;font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(20px,2.3vw,32px);line-height:1.12;color:var(--gb-navy);letter-spacing:.01em;}
.sh-pull .pink{color:var(--gb-pink);}
.sh-footline{margin:30px auto 0;max-width:76ch;text-align:center;font-size:14.5px;line-height:1.6;color:var(--fg3);}
.sh-footline a{color:var(--gb-blue-500);font-weight:700;}
/* ============ WHAT WE DO ============ */
.sh-menu{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.sh-disc{display:flex;gap:18px;background:#fff;border:1px solid var(--gb-line);border-radius:14px;padding:26px 28px;align-items:flex-start;transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),border-color var(--dur);}
.sh-disc:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover);border-color:transparent;}
.sh-disc .ic{flex:none;width:46px;height:46px;border-radius:12px;background:rgba(255,24,148,.10);color:var(--gb-pink);display:flex;align-items:center;justify-content:center;}
.sh-disc .ic svg{width:22px;height:22px;}
.sh-disc h3{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:19px;color:var(--gb-navy);letter-spacing:.015em;margin:0 0 7px;line-height:1.05;}
.sh-disc p{font-size:14px;line-height:1.55;color:var(--fg2);margin:0;}
.sh-disc.pair{border-color:var(--gb-line);}
.sh-disc .tagk{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gb-pink);margin-bottom:6px;}
.sh-build-note{margin:34px auto 0;max-width:80ch;text-align:center;font-size:15px;line-height:1.65;color:var(--fg2);}
.sh-build-note a{color:var(--gb-blue-500);font-weight:700;}
/* ============ TREASURE TRAIL (background, behind content) ============ */
html{scroll-behavior:smooth;}
section[id],div[id]{scroll-margin-top:92px;}
.sec>.wrap,.hx>.hx-inner,.sh-pov>.wrap,.fcta>.wrap{position:relative;z-index:1;}
.trail{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.trail svg{position:absolute;inset:0;width:100%;height:100%;}
.trail path{fill:none;stroke:rgba(255,24,148,.3);stroke-width:2;stroke-dasharray:2 8;stroke-linecap:round;vector-effect:non-scaling-stroke;}
.trail .trail-mark{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;}
.trail .trail-mark img{width:46px;height:auto;opacity:.85;display:block;}
.trail .trail-no,.trail .trail-label{font:800 11px/1 var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gb-pink);white-space:nowrap;}
@media(max-width:1100px){.trail{display:none;}}
.hx .trail path,.sec.deep .trail path,.sh-pov .trail path,.fcta .trail path{stroke:rgba(255,24,148,.5);}
/* ============ WHAT WE BUILD (service rows + modal) ============ */
.wb-list{border-top:1px solid var(--gb-line);margin-top:8px;}
.wb-row{width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;background:transparent;display:grid;grid-template-columns:88px 1fr auto;align-items:center;gap:24px;padding:30px 16px;border:none;border-bottom:1px solid var(--gb-line);transition:background .2s;}
.wb-row:hover{background:var(--gb-paper);}
.wb-num{font-family:var(--font-display);font-weight:700;font-size:56px;line-height:.8;color:var(--gb-pink);}
.wb-row .wb-title{display:block;font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(22px,2.4vw,30px);line-height:1;letter-spacing:.01em;color:var(--gb-navy);}
.wb-row .wb-tag{display:block;font-size:14px;font-weight:600;color:var(--gb-blue-500);margin:7px 0 6px;}
.wb-row .wb-desc{display:block;font-size:14.5px;line-height:1.55;color:var(--fg2);max-width:64ch;}
.wb-detail{display:inline-flex;align-items:center;gap:9px;color:var(--gb-navy);border:1px solid var(--gb-line);border-radius:999px;padding:9px 16px;transition:border-color .2s,color .2s;}
.wb-row:hover .wb-detail{border-color:var(--gb-pink);color:var(--gb-pink);}
.wb-detail span{font:800 11px/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;}
.wb-detail svg{width:20px;height:20px;}
.wb-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(8,18,38,.62);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;}
.wb-modal.open{opacity:1;visibility:visible;}
.wb-modal-card{position:relative;width:min(660px,100%);max-height:88vh;overflow:auto;background:#0E1F3C;border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:46px 42px;box-shadow:0 50px 100px -40px rgba(0,0,0,.7);transform:translateY(14px);transition:transform .25s;}
.wb-modal.open .wb-modal-card{transform:none;}
.wb-x{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.wb-x:hover{border-color:var(--gb-pink);color:var(--gb-pink);}
.wb-x svg{width:18px;height:18px;}
.wb-mnum{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--gb-pink);letter-spacing:.06em;}
.wb-modal-card h3{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(26px,3vw,38px);line-height:1.02;color:#fff;margin:6px 0 4px;}
.wb-mtag{font-size:14px;font-weight:600;color:var(--gb-blue-300);margin-bottom:8px;}
.wb-modal-card h4{font:800 11px/1 var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gb-pink);margin:24px 0 9px;}
.wb-modal-card p{font-size:15px;line-height:1.65;color:rgba(255,255,255,.82);margin:0;}
.wb-incl{list-style:none;margin:11px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;}
.wb-incl li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:#fff;}
.wb-incl li svg{width:16px;height:16px;color:var(--gb-pink);flex:none;}
.wb-mcta{margin-top:28px;}
/* ============ HOW WE WORK — CONSTRAINT ENGINE ============ */
.toc{position:relative;overflow:hidden;margin-top:10px;border-radius:22px;padding:46px 46px 50px;
background:radial-gradient(60% 90% at 100% 0%,rgba(0,146,214,.3),transparent 60%),linear-gradient(150deg,#0E1E36,#14315c 72%,#103a66);}
.toc .swb-grid{position:absolute;inset:0;pointer-events:none;
background:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/96px 96px,linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/96px 96px;
-webkit-mask-image:radial-gradient(120% 100% at 50% 0,#000 50%,transparent 90%);mask-image:radial-gradient(120% 100% at 50% 0,#000 50%,transparent 90%);}
.sh-toc-label{position:relative;z-index:1;display:block;text-align:center;font-family:var(--font-sans);font-weight:700;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gb-pink);}
.toc-head{position:relative;z-index:1;max-width:740px;margin:0 auto 38px;text-align:center;}
.toc-def{margin:16px 0 0;font-size:clamp(15px,1.45vw,18px);line-height:1.65;color:var(--fg-on-dark-2);}
.toc-def b{color:#fff;font-weight:700;}
.toc-body{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;}
.toc-vis{position:relative;}
.toc-meter{display:flex;align-items:baseline;justify-content:space-between;gap:14px;}
.toc-meter .tm-k{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.58);}
.toc-meter .tm-v{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,3.4vw,46px);line-height:1;color:var(--gb-pink);letter-spacing:.02em;transition:color .5s;}
.toc-bars{display:flex;align-items:flex-end;gap:12px;height:208px;margin:36px 0 42px;border-bottom:1px solid rgba(255,255,255,.18);}
.tbar{position:relative;flex:1;height:100%;display:flex;align-items:flex-end;transition:opacity .4s;}
.tbar .tb-fill{position:relative;width:100%;border-radius:8px 8px 0 0;background:rgba(255,255,255,.15);min-height:6px;height:20%;transition:height .8s var(--ease-out),background .45s,box-shadow .45s;}
.tbar.is-constraint .tb-fill{background:var(--gb-pink);box-shadow:0 0 28px rgba(255,24,148,.55);animation:tocPulse 1.5s ease-in-out infinite;}
.tbar.is-fixed .tb-fill{background:linear-gradient(180deg,#3bb6ee,#0092D6);box-shadow:0 0 24px rgba(0,146,214,.45);}
.tbar.is-dim{opacity:.28;}
.tbar .tb-lab{position:absolute;left:0;right:0;bottom:-26px;text-align:center;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6);white-space:nowrap;}
.tbar .tb-flag{position:absolute;left:50%;top:-30px;transform:translateX(-50%) translateY(4px);font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--gb-pink);border-radius:99px;padding:3px 10px;opacity:0;transition:.35s;white-space:nowrap;box-shadow:0 6px 16px -6px rgba(255,24,148,.8);}
.tbar.is-constraint .tb-flag{opacity:1;transform:translateX(-50%);}
.toc-flowline{margin:0;font-size:13px;line-height:1.5;color:rgba(255,255,255,.72);min-height:2.4em;}
.toc-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.tstep{display:flex;gap:15px;align-items:flex-start;padding:15px 17px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);cursor:pointer;transition:border-color .3s,background .3s,box-shadow .3s;}
.tstep:hover{border-color:rgba(255,255,255,.3);}
.tstep.is-active{border-color:var(--gb-pink);background:rgba(255,24,148,.08);box-shadow:inset 0 0 0 1px rgba(255,24,148,.45);}
.tstep .ts-n{flex:none;font-family:var(--font-display);font-weight:700;font-size:24px;line-height:1;color:rgba(255,255,255,.38);letter-spacing:.04em;transition:color .3s;}
.tstep.is-active .ts-n{color:var(--gb-pink);}
.tstep h3{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:16px;color:#fff;letter-spacing:.02em;margin:0 0 4px;line-height:1.05;}
.tstep p{font-size:13px;line-height:1.5;color:var(--fg-on-dark-2);margin:0;}
@keyframes tocPulse{0%,100%{box-shadow:0 0 22px rgba(255,24,148,.4);}50%{box-shadow:0 0 42px rgba(255,24,148,.78);}}
/* ============ POV ============ */
.sh-pov{position:relative;overflow:hidden;padding:108px 0;
background:radial-gradient(64% 80% at 50% 50%,rgba(8,18,38,.78) 0%,rgba(8,18,38,.34) 48%,transparent 78%),
radial-gradient(46% 60% at 0% 100%,rgba(0,146,214,.5),transparent 62%),
radial-gradient(46% 60% at 100% 0%,rgba(79,180,230,.42),transparent 62%),
linear-gradient(150deg,#0E1E36 0%,#14315c 56%,#103a66 100%);}
.sh-pov .wrap{max-width:1000px;text-align:center;}
.sh-pov .big{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(34px,4.8vw,66px);line-height:.98;color:#fff;letter-spacing:.005em;margin:0;}
.sh-pov .big .pink{color:var(--gb-pink);}
.sh-pov p{font-size:clamp(17px,1.5vw,20px);line-height:1.65;color:var(--fg-on-dark-2);max-width:680px;margin:26px auto 0;}
.sh-pov p b{color:#fff;}
.sh-pill{display:inline-flex;flex-wrap:wrap;justify-content:center;margin-top:34px;font-size:13px;font-weight:700;letter-spacing:.04em;color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:99px;padding:13px 26px;line-height:1.4;}
.sh-pill .pink{color:var(--gb-pink);}
.pov-credo{max-width:940px;margin:44px auto 4px;display:flex;flex-direction:column;align-items:center;}
.sh-pov .credo-line{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;column-gap:.22em;margin:0;width:100%;font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(34px,5.2vw,72px);line-height:1.0;letter-spacing:.01em;color:#fff;text-align:center;max-width:none;}
.sh-pov .credo-line .t1{text-align:right;}
.sh-pov .credo-line .t2{text-align:left;}
.sh-pov .credo-line + .credo-line{margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);}
.sh-pov .credo-line em{font-family:var(--font-sans);font-style:italic;font-weight:400;text-transform:lowercase;font-size:.36em;color:var(--gb-pink);letter-spacing:0;align-self:center;}
/* ============ WHERE HEADED ============ */
.sh-feature{display:grid;grid-template-columns:1.15fr .85fr;border-radius:20px;overflow:hidden;border:1px solid var(--gb-line);box-shadow:0 36px 80px -40px rgba(14,30,55,.4);background:#fff;}
.sh-feat-main{padding:48px 46px;background:linear-gradient(155deg,#0E1E36,#16386c 80%);position:relative;overflow:hidden;}
.sh-feat-main .fg{position:absolute;inset:0;pointer-events:none;
background:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/72px 72px,linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/72px 72px;
-webkit-mask-image:radial-gradient(120% 100% at 0 0,#000 40%,transparent 88%);mask-image:radial-gradient(120% 100% at 0 0,#000 40%,transparent 88%);}
.sh-feat-main > *{position:relative;z-index:1;}
.sh-feat-badge{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--gb-pink);border-radius:99px;padding:7px 14px;box-shadow:var(--shadow-pink-glow);margin-bottom:18px;}
.sh-feat-badge svg{width:13px;height:13px;}
.sh-feat-main h3{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(32px,3.6vw,48px);line-height:.96;color:#fff;letter-spacing:.01em;margin:0 0 10px;}
.sh-feat-tag{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gb-blue-300);margin:0 0 20px;}
.sh-feat-main p.body{font-size:15.5px;line-height:1.65;color:var(--fg-on-dark-2);margin:0 0 28px;max-width:52ch;}
.sh-feat-cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
.sh-feat-link{color:#fff;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px;transition:color var(--dur);}
.sh-feat-link:hover{color:var(--gb-pink);}
.sh-feat-side{padding:40px 38px;background:var(--gb-paper);}
.sh-feat-side .st{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gb-pink);margin:0 0 20px;}
.sh-covers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:19px;}
.sh-covers li{display:flex;gap:13px;align-items:flex-start;}
.sh-covers li svg{flex:none;width:20px;height:20px;color:var(--gb-pink);margin-top:1px;}
.sh-covers li b{display:block;font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:17px;color:var(--gb-navy);letter-spacing:.01em;margin-bottom:3px;}
.sh-covers li span{font-size:15px;line-height:1.5;color:var(--fg2);}
.sh-onramp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:74px 0 30px;}
.sh-onramp-head h3{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(24px,2.8vw,36px);line-height:1.02;color:var(--gb-navy);letter-spacing:.01em;margin:0;max-width:26ch;}
.sh-onramp-head p{font-size:14.5px;line-height:1.55;color:var(--fg2);margin:0;max-width:42ch;}
.sh-onramps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.ramp{display:flex;flex-direction:column;background:#fff;border:1px solid var(--gb-line);border-radius:16px;padding:30px 28px;position:relative;overflow:hidden;transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);box-shadow:var(--shadow-card);}
.ramp:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);}
.ramp::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--gb-pink);}
.ramp .rtag{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gb-pink);margin-bottom:12px;}
.ramp h4{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:21px;color:var(--gb-navy);letter-spacing:.015em;margin:0 0 10px;line-height:1.05;}
.ramp p{font-size:14px;line-height:1.6;color:var(--fg2);margin:0 0 22px;flex:1;}
.ramp .ramp-cta{display:flex;flex-direction:column;gap:10px;align-items:flex-start;}
.ramp .ramp-link{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gb-blue-500);border-bottom:1px solid var(--gb-line);padding-bottom:2px;transition:color var(--dur),border-color var(--dur);}
.ramp .ramp-link:hover{color:var(--gb-pink);border-color:var(--gb-pink);}
.sh-closer{margin:40px auto 0;text-align:center;font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(18px,2vw,26px);color:var(--gb-navy);letter-spacing:.01em;}
.sh-closer .pink{color:var(--gb-pink);}
/* ============ PLAN ============ */
.sh-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;position:relative;}
.sh-steps::before{content:"";position:absolute;top:33px;left:16%;right:16%;height:2px;background:linear-gradient(90deg,transparent,rgba(255,24,148,.55) 10%,rgba(255,24,148,.55) 90%,transparent);}
.pstep{position:relative;background:none;border:none;box-shadow:none;padding:0;text-align:center;display:flex;flex-direction:column;align-items:center;}
.pstep .ps-ghost{position:absolute;top:-32px;left:50%;transform:translateX(-50%);font-family:var(--font-display);font-weight:700;font-size:150px;line-height:1;color:rgba(255,255,255,.045);z-index:0;pointer-events:none;}
.pstep .ps-node{position:relative;z-index:1;width:66px;height:66px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:26px;letter-spacing:.02em;color:#fff;background:var(--gb-pink);box-shadow:0 0 0 9px #0E1E36,0 14px 32px -8px rgba(255,24,148,.75);margin-bottom:24px;}
.pstep h3{position:relative;z-index:1;font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(26px,2.9vw,36px);color:#fff;margin:0 0 12px;letter-spacing:.02em;}
.pstep p{position:relative;z-index:1;font-size:15px;line-height:1.65;color:var(--fg-on-dark-2);margin:0;max-width:34ch;}
/* ============ SCORECARD ============ */
.sc-head{text-align:center;margin-bottom:40px;}
.sc-card{position:relative;overflow:hidden;background:#0E1F3C;border:1.5px solid var(--gb-pink);border-radius:22px;padding:38px 34px;box-shadow:0 40px 90px -42px rgba(0,0,0,.6),0 0 0 4px rgba(255,24,148,.10);max-width:760px;margin:0 auto;}
.sc-card .sc-topbar{position:absolute;top:0;left:0;right:0;height:5px;background:var(--gb-pink);}
.sc-qhead{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px;}
.sc-prog-k{font:800 11px/1 var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gb-pink);white-space:nowrap;}
.sc-prog-track{flex:1;height:6px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;}
.sc-prog-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gb-blue-500),var(--gb-pink));width:0%;transition:width .35s var(--ease-out);}
.sc-question{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(24px,3.2vw,34px);line-height:1.02;color:#fff;margin:0 0 22px;}
.sc-opts{display:flex;flex-direction:column;gap:11px;}
.sc-opt{width:100%;text-align:left;cursor:pointer;display:flex;align-items:center;gap:14px;background:rgba(18,51,99,.5);border:1px solid rgba(255,255,255,.2);border-radius:13px;padding:17px 18px;color:#fff;font:500 16px/1.35 var(--font-sans);transition:all .18s var(--ease-out);}
.sc-opt:hover{border-color:var(--gb-pink);background:rgba(255,24,148,.12);}
.sc-opt .sc-let{flex-shrink:0;width:26px;height:26px;border-radius:999px;border:2px solid rgba(255,255,255,.3);display:inline-flex;align-items:center;justify-content:center;font:800 12px var(--font-sans);color:var(--gb-pink);}
.sc-back{background:none;border:none;cursor:pointer;font:600 13px var(--font-sans);color:rgba(255,255,255,.5);letter-spacing:.04em;}
.sc-gate{text-align:center;padding:6px 0 2px;}
.sc-gate .sc-lock{display:inline-flex;width:54px;height:54px;border-radius:999px;background:rgba(255,24,148,.16);color:var(--gb-pink);align-items:center;justify-content:center;margin-bottom:16px;}
.sc-gate .sc-lock svg{width:24px;height:24px;}
.sc-gate h3{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(26px,3.4vw,38px);line-height:1;color:#fff;margin:0 0 10px;}
.sc-gate>p{font:400 16px/1.6 var(--font-sans);color:rgba(255,255,255,.78);max-width:46ch;margin:0 auto 24px;}
.sc-form{max-width:440px;margin:0 auto;text-align:left;display:flex;flex-direction:column;gap:13px;}
.sc-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
.sc-form input{width:100%;box-sizing:border-box;background:rgba(8,18,38,.5);border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:14px 15px;color:#fff;font:500 15px var(--font-sans);outline:none;}
.sc-form input:focus{border-color:var(--gb-blue-500);box-shadow:0 0 0 3px rgba(0,146,214,.3);}
.sc-err{font:600 13px/1.4 var(--font-sans);color:var(--gb-pink);}
.sc-fine{font:400 12px/1.5 var(--font-sans);color:rgba(255,255,255,.5);text-align:center;margin:2px 0 0;}
.sc-res{text-align:center;padding:8px 0 4px;}
.sc-res .sc-res-k{font:800 11px/1 var(--font-sans);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:14px;}
.sc-score{font-family:var(--font-display);font-weight:700;font-size:clamp(72px,11vw,120px);line-height:.8;color:#fff;}
.sc-score .sc-slash{font-size:.4em;color:var(--gb-pink);}
.sc-bar-track{height:10px;border-radius:999px;background:rgba(255,255,255,.12);max-width:460px;margin:22px auto;overflow:hidden;}
.sc-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gb-blue-500),var(--gb-pink));width:0%;transition:width 1s var(--ease-out);}
.sc-tier{font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3vw,34px);color:var(--gb-pink);margin-bottom:10px;}
.sc-advice{font:400 16px/1.6 var(--font-sans);color:rgba(255,255,255,.82);max-width:54ch;margin:0 auto 26px;}
.sc-rescta{display:flex;gap:13px;flex-wrap:wrap;justify-content:center;}
.sc-retake{background:none;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:999px;padding:11px 22px;font:700 12px var(--font-sans);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:border-color .2s,color .2s;}
.sc-retake:hover{border-color:var(--gb-pink);color:var(--gb-pink);}
/* ============ PROOF ============ */
.bwin{border-radius:13px;overflow:hidden;background:#fff;border:1px solid var(--gb-line);box-shadow:0 30px 70px -34px rgba(14,30,55,.45);}
.bwin-bar{display:flex;align-items:center;gap:10px;padding:11px 14px;background:#eef1f6;border-bottom:1px solid #e0e5ec;}
.bwin-dots{display:flex;gap:6px;}
.bwin-dots span{width:11px;height:11px;border-radius:50%;background:#c8d0dc;display:block;}
.bwin-url{flex:1;height:24px;border-radius:7px;background:#fff;border:1px solid #e0e5ec;display:flex;align-items:center;gap:7px;padding:0 11px;font-size:11.5px;color:var(--gb-ink-3);letter-spacing:.01em;}
.bwin-url svg{width:12px;height:12px;color:var(--gb-concrete);}
.bwin .shot{position:relative;overflow:hidden;background:#0E1E36;display:block;}
.bwin .shot img{display:block;width:100%;height:auto;}
.sh-case{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;}
.sh-case-tag{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gb-pink);margin-bottom:10px;}
.sh-case h3{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(26px,3vw,38px);color:var(--gb-navy);letter-spacing:.01em;margin:0 0 22px;line-height:1;}
.sh-ba{display:flex;flex-direction:column;gap:16px;margin-bottom:24px;}
.sh-ba .row{display:flex;gap:14px;align-items:flex-start;}
.sh-ba .row .k{flex:none;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;width:58px;padding-top:2px;}
.sh-ba .row.before .k{color:var(--gb-ink-3);}
.sh-ba .row.after .k{color:var(--gb-pink);}
.sh-ba .row p{font-size:14.5px;line-height:1.55;color:var(--fg2);margin:0;}
.sh-ba .row.after p{color:var(--fg1);}
.sh-case q{quotes:none;display:block;font-size:16px;line-height:1.6;color:var(--gb-navy);font-weight:600;font-style:italic;border-left:3px solid var(--gb-pink);padding-left:18px;margin:0;}
.sh-case .by{margin-top:12px;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gb-ink-3);padding-left:21px;}
.sh-testi{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;}
.tspot{background:#fff;border:1px solid var(--gb-line);border-radius:16px;padding:30px 28px;position:relative;overflow:hidden;box-shadow:var(--shadow-card);display:flex;flex-direction:column;}
.tspot::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--gb-pink);}
.tspot::after{content:"\201C";position:absolute;top:2px;right:20px;font-family:var(--font-display);font-weight:700;font-size:88px;line-height:1;color:rgba(255,24,148,.12);pointer-events:none;}
.tspot q{quotes:none;display:block;font-size:15px;line-height:1.55;color:var(--gb-navy);font-weight:500;margin:0 0 22px;flex:1;position:relative;}
.tspot q .pink{color:var(--gb-pink);}
.tspot .who{display:flex;align-items:center;gap:13px;}
.tspot .who img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--gb-pink-100);}
.tspot .who .nm{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:15px;color:var(--gb-navy);letter-spacing:.01em;line-height:1.05;}
.tspot .who .rl{font-size:12px;color:var(--gb-pink);font-weight:700;margin-top:3px;}
.sh-authority{margin-top:56px;background:var(--gb-paper);border:1px solid var(--gb-line);border-radius:18px;padding:40px 44px;display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;}
.sh-authority img{width:120px;height:120px;border-radius:16px;object-fit:cover;border:1px solid var(--gb-line);}
.sh-authority p{font-size:15.5px;line-height:1.7;color:var(--fg2);margin:0;}
.sh-authority p b{color:var(--gb-navy);}
.sh-auth-link{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gb-blue-500);transition:color var(--dur);}
.sh-auth-link svg{width:15px;height:15px;}
.sh-auth-link:hover{color:var(--gb-pink);}
.sh-proof-cta{margin-top:42px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
/* ============ FAQ ============ */
.faq{max-width:920px;margin:0 auto;border-top:1px solid var(--gb-line);}
.faq-item{border-bottom:1px solid var(--gb-line);}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;background:none;border:none;cursor:pointer;padding:26px 4px;text-align:left;font-family:inherit;}
.faq-q .qt{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:clamp(17px,1.7vw,21px);color:var(--gb-navy);letter-spacing:.02em;line-height:1.15;}
.faq-q .qi{flex:none;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--gb-line);display:flex;align-items:center;justify-content:center;color:var(--gb-navy);transition:background var(--dur),color var(--dur),transform var(--dur),border-color var(--dur);}
.faq-q .qi svg{width:16px;height:16px;}
.faq-item.open .qi{background:var(--gb-pink);border-color:var(--gb-pink);color:#fff;transform:rotate(45deg);}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--ease-out);}
.faq-a > div{overflow:hidden;min-height:0;}
.faq-a p{font-size:15px;line-height:1.7;color:var(--fg2);margin:0;padding:0 4px;max-width:84ch;}
.faq-item.open .faq-a{grid-template-rows:1fr;}
.faq-item.open .faq-a p{padding-bottom:26px;}
/* ============ FINAL CTA ============ */
.fcta{position:relative;overflow:hidden;text-align:center;padding:120px 0;
background:radial-gradient(66% 82% at 50% 50%,rgba(8,18,38,.8) 0%,rgba(8,18,38,.4) 46%,transparent 76%),
radial-gradient(46% 60% at 0% 100%,rgba(0,146,214,.55),transparent 62%),
radial-gradient(46% 60% at 100% 0%,rgba(79,180,230,.45),transparent 62%),
linear-gradient(158deg,#0E1E36 0%,#14315c 55%,#103a66 100%);}
.fcta .wrap{max-width:980px;margin:0 auto;}
.fcta .display{font-family:var(--font-display);text-transform:uppercase;font-weight:700;line-height:.96;font-size:clamp(34px,5vw,72px);color:#fff;margin:0 auto;letter-spacing:.005em;}
.fcta .display .pink{color:var(--gb-pink);}
.fcta .lead{color:var(--fg-on-dark-2);max-width:640px;margin:26px auto 14px;}
.fcta .stakes{font-size:14px;color:var(--fg-on-dark-3);max-width:560px;margin:0 auto 34px;font-weight:600;letter-spacing:.01em;}
.fcta .fcta-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;align-items:center;}
.fcta .tert{display:block;margin-top:22px;color:var(--fg-on-dark-3);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
.fcta .tert a{color:#fff;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px;}
.fcta .fcta-promise{list-style:none;margin:28px auto 0;padding:0;display:flex;gap:10px 26px;justify-content:center;flex-wrap:wrap;max-width:760px;}
.fcta .fcta-promise li{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--fg-on-dark-2);}
.fcta .fcta-promise li svg{width:15px;height:15px;color:var(--gb-pink);flex:none;}
.fcta .tert a:hover{color:var(--gb-pink);}
.glow-cursor{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .4s var(--ease-out);background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(255,24,148,.18),transparent 62%);}
/* ============ FOOTER ============ */
.foot{background:var(--gb-navy-900);color:#fff;position:relative;z-index:1;}
.foot-main{padding:64px 0 42px;display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:36px;}
.foot-logo{width:200px;max-width:100%;margin-bottom:18px;}
.foot-blurb{font-family:var(--font-display);text-transform:uppercase;font-weight:700;font-size:24px;line-height:1.04;color:#fff;max-width:300px;margin:0;}
.foot-blurb .pink{color:var(--gb-pink);}
.foot-slogan{margin-top:18px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gb-blue-300);}
.foot-col .fh{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gb-pink);margin:0 0 16px;}
.foot-col a{display:block;font-size:13.5px;color:var(--fg-on-dark-2);padding:6px 0;transition:color var(--dur);}
.foot-col a:hover{color:#fff;}
.foot-bot{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--fg-on-dark-3);}
.m-br{display:none;}
/* ============ RESPONSIVE ============ */
@media(max-width:1000px){
.sec{padding:78px 0;}
.sh-qa-grid,.sh-then-now,.sh-readers,.sh-score-grid,.sh-case,.sh-feature{grid-template-columns:1fr;gap:34px;}
.sh-who{grid-template-columns:1fr;}
.sh-menu{grid-template-columns:1fr;}
.toc{padding:32px 22px 38px;}
.toc-body{grid-template-columns:1fr;gap:30px;}
.toc-bars{height:172px;gap:8px;}
.sh-hl-grid{grid-template-columns:1fr;gap:18px;}
.sh-media{grid-template-columns:1fr;}
.sh-media .mcard,.sh-media .mcard.feat{min-height:230px;}
.sh-onramps{grid-template-columns:1fr;}
.sh-steps{grid-template-columns:1fr;}
.sh-steps::before{display:none;}
.sh-testi{grid-template-columns:1fr;}
.sh-authority{grid-template-columns:1fr;text-align:center;}
.sh-authority img{margin:0 auto;}
.foot-main{grid-template-columns:1fr 1fr;}
.hx-inner{padding:54px 22px 58px 22px;}
.hx-ghost{font-size:74vw;bottom:-3%;}
.hx-rail{width:48px;}
}
@media(max-width:760px){
.nav-links{display:none;}
.nav-cta .btn:not(.nav-burger){display:none;}
.nav-burger{display:inline-flex;}
.sec{padding:60px 0;}
.hx{min-height:auto;padding:44px 0 56px;}
.sh-head{margin-bottom:32px;}
.sh-highlight{padding:32px 24px;}
.sh-who-close{padding:44px 24px;}
.sh-feat-main,.sh-feat-side{padding:32px 24px;}
.foot-main{grid-template-columns:1fr;}
.js .reveal-up{opacity:1!important;transform:none!important;}
.reg{display:none;}
/* tighter rhythm */
.sec{padding:52px 0;}
.sh-head{margin-bottom:26px;}
main{overflow-x:hidden;}
/* hero fits, single full-width CTA */
.hx-cta{width:auto;}
.hx-cta .btn{width:auto;font-size:13px;padding:13px 24px;}
.hx-lead{margin:24px 0 26px;}
.m-br{display:inline;}
.d-br{display:none;}
.sh-pov .credo-line{display:block;width:100%;text-align:center;font-size:clamp(30px,8.5vw,48px);}
.sh-pov .credo-line .t1,.sh-pov .credo-line .t2{display:inline;text-align:center;}
.sh-pov .credo-line em{font-size:.4em;margin:0 .15em;}
.sh-pov .credo-line+.credo-line{margin-top:18px;padding-top:18px;}
.who2-p{display:none;}
.who2[aria-pressed="true"] .who2-p{display:block;margin-top:8px;}
/* What We Build rows stack instead of cramped 3-col grid */
.wb-list .wb-row{grid-template-columns:1fr;gap:6px;padding:26px 2px;}
.wb-list .wb-num{font-size:40px;}
.wb-list .wb-row .wb-desc{max-width:none;}
.wb-list .wb-detail{justify-self:start;margin-top:12px;}
.wb-modal{padding:14px;}
.wb-modal-card{padding:34px 20px;}
.wb-mcta .btn{width:100%;box-sizing:border-box;justify-content:center;font-size:13px;padding:14px 16px;}
.hx-mega{margin-top:14px;}
.hx-mega .we{font-size:12vw;line-height:.85;}
.hx-word .ghost,.hx-word .live{font-size:15vw;letter-spacing:-.025em;}
/* swipe carousels for card rows */
.sh-media,.sh-readers,.sh-then-now,.sh-testi,.sh-onramps,.sh-steps{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:24px -22px 0;padding:0 22px 18px;-webkit-overflow-scrolling:touch;scrollbar-color:var(--gb-pink) transparent;grid-template-columns:none;}
.sh-media>*,.sh-readers>*,.sh-then-now>*,.sh-testi>*,.sh-onramps>*,.sh-steps>*{flex:0 0 84%;scroll-snap-align:start;min-height:0;}
.sh-media .mcard,.sh-media .mcard.feat{min-height:200px;}
.sh-media::-webkit-scrollbar,.sh-readers::-webkit-scrollbar,.sh-then-now::-webkit-scrollbar,.sh-testi::-webkit-scrollbar,.sh-onramps::-webkit-scrollbar,.sh-steps::-webkit-scrollbar{height:5px;}
.sh-media::-webkit-scrollbar-thumb,.sh-readers::-webkit-scrollbar-thumb,.sh-then-now::-webkit-scrollbar-thumb,.sh-testi::-webkit-scrollbar-thumb,.sh-onramps::-webkit-scrollbar-thumb,.sh-steps::-webkit-scrollbar-thumb{background:var(--gb-pink);border-radius:3px;}
.sh-steps::before{display:none;}
/* the map is desktop-only; it overlaps without margins on phones */
.trail{display:none;}
}
/* ============================================================================
PAGE INTEGRATION OVERRIDES (Grit Blueprint house rules)
============================================================================ */
/* FAQ accordion titles ship a touch small in the export -- bump per house rule. */
.faq-q .qt{font-size:clamp(20px,1.9vw,24px)!important;line-height:1.18;}
.faq-q .qtext{font-size:24px!important;}
@media (max-width:760px){.faq-q .qt,.faq-q .qtext{font-size:22px!important;}}
/* Mobile (<=760px) 15px text floor -- no sub-15px type on phones (house rule). */
@media (max-width:760px){
/* ---------- type helpers ------------------------------------------------ */
.eyebrow,
/* ---------- buttons ----------------------------------------------------- */
.btn,
.btn-sm,
.textlink,
/* ---------- top utility bar -------------------------------------------- */
.util,
.nav-link,
.mega .mt,
.mega .md,
.mega .badge,
.mega-foot .mf-txt,
.hero-stat .lbl,
.proof-head,
.chip,
.pain .pbody,
.disc p,
.svc p,
.step p,
.feat-media .ph-note,
.ba .balabel,
.ba li,
.tier .of-k,
.tier-d,
.tr-row .tr-l,
.tr-row p,
.tier-cta,
.way .wtag,
.way p,
.check .cd,
.eco .etag,
.eco p,
.eco .soon,
.member .photo .ph-note,
.member .mrole,
.member .mbio,
.tmeta .tn,
.tmeta .tr,
.tcard .ta,
.tcard .tc,
.sc-side p,
.sc-side .sc-feats li,
.sc-step-lbl,
.sc-opt .sc-key,
.sc-back,
.sc-gauge .gof,
.foot-news .fn-s,
.foot-news input,
.foot-blurb,
.foot-col h5,
.foot-col a,
.foot-contact,
.foot-bot,
/* spec label — technical, heavily tracked */
.spec,
/* eyebrow → drafting spec label with registration mark */
.eyebrow,
.sechead .tag,
.hero-rail span,
.hero-foot,
.sheet-row .sr-lbl,
.idx-pain,
.fnode .fn-step,
.fnode p,
/* eyebrow — clean pink label like the live site */
.eyebrow,
.hero-fit,
.hero-trust .ht span,
.news-bar input,
.photo-card .ph-note,
.photo-card .cap,
.logoband .lb-h,
.gscard .gs-d,
.gscard li,
.gscard .gs-foot,
.media-thumb .mt-note,
.yt-cap,
.stepcard .sc-n,
.stepcard p,
.testi .tr,
.phone .ph-note,
.offer p,
.offer-more,
/* stories phone video placeholder badge */
.phone .vid-note,
.pop-badge,
.flip-cta,
.flip-front .of-k,
.flip-hint,
.fb-l,
.fb-row p,
.ethos-ey,
.gg-verbs span,
.dp-bullets i,
.dual-note,
.callout-by,
.mega-h,
.mega.services a .mt,
.mega-feat .mf-tag,
.mega-feat p,
.mega .pill-badge,
.nav-book,
.stat span,
/* what-we-do block */
.qa-kicker,
.who-label,
.dualcard .of-k,
.dualcard .fd,
.dual-why,
.dual-why-l,
.dual-cta,
.dp .dp-k,
.dp p,
.partner-pt p,
.post-cat,
.post-body p,
.post-read,
.post-more,
.gg-url,
.gg-util,
.gg-by,
.gg-sub,
.gg-sign,
.gg-navi,
.gg-rail-r,
.gg-rcat,
.gg-rtitle,
.gg-rdate,
.gg-hero-wm,
.gg-hero-meta,
.gg-ptitle,
/* =========================================================================
ACCESSIBILITY LAYER
========================================================================= */
/* skip link */
.skip-link,
/* footer column headings (now real h2 landmarks, styled like the old h5) */
.foot-h,
.hero-portrait-cap,
.signs-h,
.fd-why-l,
/* --- investment-level signal under the Build Your Authority tiers --- */
.tier-note,
.sp-tag,
.sp-by,
.engage-h,
.eg p,
.sec-eyebrow,
.hx-rail .tag,
.hx-eyebrow,
.hx-anno,
.o-sm,
.hx-micro,
.hx-scroll,
.hx-trust,
.qa2-founder,
.spec-k,
.sh-who-item p,
.who2-n,
.who2-p,
.who-tally,
.tn-card .tk,
.rd-card .rk,
.sh-hl-grid .hl p,
.sh-media .mcard .mc-k,
.sh-media .mcard figcaption p,
.sh-position .sp-k,
.sh-footline,
.sh-disc p,
.sh-disc .tagk,
.wb-row .wb-tag,
.wb-row .wb-desc,
.wb-mtag,
.wb-incl li,
.sh-toc-label,
.toc-meter .tm-k,
.tbar .tb-lab,
.tbar .tb-flag,
.toc-flowline,
.tstep p,
.sh-pill,
.sh-feat-badge,
.sh-feat-tag,
.sh-feat-link,
.sh-feat-side .st,
.sh-onramp-head p,
.ramp .rtag,
.ramp p,
.ramp .ramp-link,
.bwin-url,
.sh-case-tag,
.sh-ba .row .k,
.sh-ba .row p,
.sh-case .by,
.tspot .who .rl,
.sh-auth-link,
.fcta .stakes,
.fcta .tert,
.fcta .fcta-promise li,
.foot-slogan,
.foot-col .fh{font-size:15px!important;}
}
/* ============================================================================
MOBILE REVIEW TUNING -- from the review screenshots. Appended last so the
chart-label rules outrank the earlier 15px mobile floor.
============================================================================ */
@media (max-width:760px){
/* A1 -- "Who this is for" card headings: bigger. */
.who2-h{font-size:20px;line-height:1.14;}
/* A2 -- dark closing pull: pink clause on its own line (hide the now-redundant
). */
.sh-who-close h3 .pink{display:block;}
.sh-who-close h3 .pink + br{display:none;}
/* A3 -- "Why Now" headline: pink clause on its own line. */
#why .sh-head .h2 .pink{display:block;}
/* A4 -- "How you are seen..." flip line: bigger. */
.sh-flip-em{font-size:25px;line-height:1.14;}
/* A5 -- Theory-of-Constraints chart: stop the axis labels overlapping.
The 15px mobile floor was inflating these decorative labels; bring them
back down and let them wrap under each bar. */
.toc-bars{gap:7px;height:180px;margin:30px 0 60px;}
.tbar .tb-lab{font-size:9.5px!important;letter-spacing:.02em;white-space:normal;line-height:1.1;bottom:-34px;}
.tbar .tb-flag{font-size:9px!important;letter-spacing:.04em;}
/* B1 -- POV credo: the small pink word ("beats"/"should") bigger. */
.sh-pov .credo-line em{font-size:.55em;}
/* B3 -- more space above the Before/After block (raised again per review). */
.sh-ba{margin-top:42px;}
/* B4 -- center the "About Grit Blueprint" link. */
.sh-auth-link{display:flex;justify-content:center;}
}
@media (max-width:1000px){
/* B2 -- the navy + tan plan card stack at this width; drop the section-colored
gap between them so they read as one continuous card. */
.sh-feature{gap:0;}
}
/* ============================================================================
MOBILE REVIEW TUNING -- round 2. Appended last (overrides the shared swipe
carousel rule for .sh-steps).
============================================================================ */
@media (max-width:760px){
/* "How We Work" 3-step slider: start with the first card centered on the page
(was flush-left). vw basis + matching side padding keeps the next-card peek. */
.sh-steps{padding-inline:8vw;scroll-padding-inline:8vw;}
.sh-steps > *{flex:0 0 84vw;scroll-snap-align:center;}
/* Theory-of-Constraints step list titles ("Find The Constraint" ...): bigger. */
.tstep h3{font-size:20px;line-height:1.1;}
/* "If they cannot find you..." pull line: bigger still. */
.sh-pull{font-size:26px;}
}
@media (max-width:760px){
/* Before/After rows: widen the gap between the BEFORE/AFTER label and its
body text by 10px (14 -> 24px) so the label is not jammed against the copy. */
.sh-ba .row{gap:24px;}
}