/* ============================================================
   xivic.com shared stylesheet
   Built from consolidated per-page <style> blocks.
   Phase 1 goal: visual parity with the pre-refactor site.
   Only intentional change: --silver is tinted darker for WCAG
   contrast (per design review feedback).
   ============================================================ */

/* ============================================================
   1. TOKENS + RESET + BASE
   ============================================================ */
:root {
  --ink: #090E22;
  --ink2: #0E1630;
  --white: #FFFFFF;
  --bgf: #F5F6FA;
  --bgs: #EEF0F7;
  --body: #3A3F5C;
  /* Secondary text: bumped from #7A82A8 for WCAG AA contrast */
  --silver: #5B618A;
  --silver-soft: #7A82A8; /* retained for decorative uses (card rules, overlays) */
  --rule: #DDE0EE;
  --pale: #E8EAF4;
  --f: 'Montserrat', sans-serif;
  --r: 8px;
  --rl: 12px;
  --max: 1120px;
  --pad: 48px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body { font-family: var(--f); color: var(--body); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: hidden; font-size: 14px; line-height: 1.6 }
a { text-decoration: none; color: inherit }
img { max-width: 100% }

/* Section utilities (used by homepage + industry + pillar + problem pages) */
.sec { padding: 80px var(--pad) }
.sec-inner { max-width: var(--max); margin: 0 auto }
.over { font-size: 12px; font-weight: 700; color: var(--silver); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px }
.sec-title { font-size: 34px; font-weight: 900; color: var(--ink); letter-spacing: -.8px; line-height: 1.08; margin-bottom: 14px }
.sec-sub { font-size: 16px; color: var(--body); max-width: 540px; line-height: 1.65; margin-bottom: 44px }

/* Scroll-reveal animations (wired up by site.js) */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1) }
.reveal.visible { opacity: 1; transform: translateY(0) }

/* Utility: hide filtered-out elements (work, insights, etc.) */
.hidden { display: none !important }
.reveal-child { opacity: 0; transform: translateY(20px); transition: opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1) }
.reveal-child.visible { opacity: 1; transform: translateY(0) }

/* ============================================================
   2. BUTTONS
   ============================================================ */
.btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--f); font-weight: 700; font-size: 14px; border: none; cursor: pointer; border-radius: 8px; text-decoration: none; padding: 13px 28px; transition: all .2s; white-space: nowrap }
.btn-primary { background: var(--ink); color: var(--white) !important; box-shadow: 0 2px 8px rgba(9,14,34,.12) }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(9,14,34,.2); color: var(--white) !important }
.btn-primary:visited { color: var(--white) !important }
.btn-white { background: var(--white); color: var(--ink) !important; box-shadow: 0 2px 8px rgba(9,14,34,.12) }
.btn-white:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(255,255,255,.2) }
.btn-outline { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,.25) }
.btn-outline:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4) }
.btn-ghost { background: transparent; color: var(--ink); border: 2px solid var(--ink); font-weight: 700 }
.btn-ghost:hover { background: var(--ink); color: var(--white) }

/* Legacy CTA aliases retained for backwards compat */
.cta { display: inline-flex; align-items: center; font-weight: 700; text-decoration: none; transition: all .2s }
.cta-primary { background: var(--white); color: var(--ink) !important; padding: 14px 30px; border-radius: 8px; font-weight: 700; font-size: 14px; font-family: var(--f); transition: all .2s; border: none; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; box-shadow: 0 4px 16px rgba(0,0,0,.18) }
.cta-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.22) }
.cta-secondary { background: transparent; color: var(--white) !important; padding: 14px 30px; border-radius: 8px; font-weight: 700; font-size: 14px; font-family: var(--f); transition: all .2s; border: 1px solid rgba(255,255,255,.5); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center }
.cta-secondary:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.85) }
.link-arrow { color: rgba(255,255,255,.8); font-size: 14px; font-weight: 600; text-decoration: none; transition: color .2s }
.link-arrow:hover { color: #fff }

/* ============================================================
   3. NAVIGATION
   Default .nav is transparent-over-hero, turns white on scroll.
   Use class .nav--solid for pages without a dark-image hero.
   ============================================================ */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; background: transparent; transition: background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease }
.nav-util { display: flex; justify-content: flex-end; gap: 24px; padding: 6px var(--pad, 48px) 6px; max-width: var(--max, 1120px); margin: 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); border-bottom: 1px solid rgba(255,255,255,.08) }
.nav-util a { color: inherit; text-decoration: none; transition: color .35s }
.nav-util a:hover { color: #fff }
.nav-main { display: flex; align-items: center; justify-content: space-between; padding: 16px var(--pad, 48px); max-width: var(--max, 1120px); margin: 0 auto; position: relative }
.nav-main .logo { display: flex; align-items: center; text-decoration: none; position: relative }
.nav-main .logo img { height: 56px; width: auto; transition: opacity .35s, filter .35s }
.logo-dark { opacity: 0 }
.logo-white { position: absolute; top: 0; left: 0; opacity: 1 }
.nav-links { display: flex; gap: 28px; align-items: center }
.nav-links > a { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.9); transition: color .35s; cursor: pointer; text-decoration: none; white-space: nowrap }
.nav-links > a:hover { color: #fff }
.nav-links .btn-primary, .nav-links a.btn-primary, .nav-links a.btn-primary:hover, .nav-links a.btn-primary:visited { display: inline-flex; align-items: center; justify-content: center; font-family: var(--f, 'Montserrat', sans-serif); font-weight: 700; border: none; cursor: pointer; transition: all .2s; border-radius: 8px; text-decoration: none; font-size: 14px; background: var(--white, #FFFFFF); color: var(--ink, #090E22) !important; padding: 13px 28px; box-shadow: 0 2px 8px rgba(9,14,34,.12); white-space: nowrap }
.nav-links .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(255,255,255,.2) }
.nav.scrolled { background: rgba(255,255,255,.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 24px rgba(9,14,34,.06) }
.nav.scrolled .nav-util { color: var(--silver-soft); border-bottom-color: rgba(122,130,168,.08) }
.nav.scrolled .nav-util a:hover { color: var(--ink) }
.nav.scrolled .logo-dark { opacity: 1 }
.nav.scrolled .logo-white { opacity: 0 }
.nav.scrolled .nav-links > a { color: var(--body) }
.nav.scrolled .nav-links > a:hover { color: var(--ink) }
.nav.scrolled .nav-links a.btn-primary, .nav.scrolled .nav-links a.btn-primary:hover, .nav.scrolled .nav-links a.btn-primary:visited { color: var(--white) !important; background: var(--ink) !important }
.nav.scrolled .mega-menu-trigger { color: var(--body) !important }
.nav.scrolled .mega-menu-trigger:hover { color: var(--ink) !important }
.nav.scrolled .nav-toggle { color: var(--ink) }
.nav-links-util { display: none }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: #fff }
.nav-toggle svg { width: 28px; height: 28px }

/* .nav--solid: permanent white nav (for pages without dark image hero) */
.nav--solid { position: sticky; background: rgba(255,255,255,.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.nav--solid.scrolled { background: rgba(255,255,255,.88); box-shadow: 0 1px 24px rgba(9,14,34,.06) }
.nav--solid .nav-util { color: var(--silver-soft); border-bottom-color: rgba(122,130,168,.08) }
.nav--solid .nav-util a:hover { color: var(--ink) }
.nav--solid .logo-dark { opacity: 1 }
.nav--solid .logo-white { opacity: 0 }
.nav--solid .nav-links > a { color: var(--body) }
.nav--solid .nav-links > a:hover { color: var(--ink) }
.nav--solid .nav-links a.btn-primary { color: var(--white) !important; background: var(--ink) !important }
.nav--solid .mega-menu-trigger { color: var(--body) }
.nav--solid .mega-menu-trigger:hover { color: var(--ink) }
.nav--solid .nav-toggle { color: var(--ink) }

/* Mega menu */
.mega-menu-wrapper { position: static; display: inline-block }
.mega-menu-trigger { background: none; border: none; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.9); cursor: pointer; transition: color .2s; padding: 0; font-family: var(--f); display: flex; align-items: center; gap: 6px; white-space: nowrap }
.mega-menu-trigger:hover { color: #fff }
.mega-menu-trigger[aria-expanded="true"] { color: var(--ink) }
.mega-menu-caret { transition: transform .3s ease; display: inline-block }
.mega-menu-trigger[aria-expanded="true"] .mega-menu-caret { transform: rotate(180deg) }
.mega-menu-panel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 32px; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 95vw; max-width: 1080px; background: rgba(255,255,255,.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(221,224,238,.5); border-radius: 12px; box-shadow: 0 20px 60px rgba(9,14,34,.12); padding: 32px 36px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s, visibility .25s; z-index: 300 }
.mega-menu-panel a { color: var(--body) !important }
.mega-menu-panel a:hover { color: var(--ink) !important }
.mega-menu-panel .mega-menu-pillar { color: var(--silver) !important }
.mega-menu-panel .mega-menu-pillar:hover { color: var(--silver) !important }
.mega-menu-pillar { display: block; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--silver); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(221,224,238,.8); text-decoration: none; transition: color .2s; line-height: 1.3; min-height: 46px; box-sizing: border-box }
.mega-menu-pillar:hover { color: var(--silver) }
.mega-menu-problems { list-style: none; padding: 0; margin: 0 }
.mega-menu-problems li { margin-bottom: 10px }
.mega-menu-problems a { font-size: 14px; color: var(--body); text-decoration: none; transition: color .2s; display: inline-block; line-height: 1.35 }
.mega-menu-problems a:hover { color: var(--ink); text-decoration: underline }
@media(hover:hover) {
  .mega-menu-wrapper:hover .mega-menu-panel,
  .mega-menu-wrapper:focus-within .mega-menu-panel,
  .mega-menu-trigger[aria-expanded="true"] + .mega-menu-panel { opacity: 1; visibility: visible; pointer-events: auto }
  .mega-menu-panel::before { content: ''; position: absolute; top: -20px; left: 0; right: 0; height: 20px; background: transparent }
}
.nav.scrolled .mega-menu-trigger, .nav--solid .mega-menu-trigger { color: var(--body) }
.nav.scrolled .mega-menu-trigger:hover, .nav--solid .mega-menu-trigger:hover { color: var(--ink) }

/* ============================================================
   4. HERO VARIANTS
   ============================================================ */

/* Base hero scaffold — per-page CSS sets background / content */
.hero { position: relative; overflow: hidden }
.hero-inner { max-width: var(--max); margin: 0 auto; position: relative; z-index: 2; width: 100% }
.hero-content { max-width: 680px }
.hero-over { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 20px }
.hero-sub { font-size: 17px; font-weight: 500; line-height: 1.65; margin-bottom: 36px }
.hero-actions { display: flex; align-items: center; gap: 16px }

/* .hero--dark: full-bleed image background, white text, min-height viewport */
.hero--dark { padding: 0; min-height: 100vh; display: flex; align-items: center }
.hero--dark .hero-inner { padding: 140px var(--pad) 80px }
.hero--dark .hero-bg { position: absolute; inset: 0; z-index: 0 }
.hero--dark .hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block }
.hero--dark .hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,14,34,.55) 0%, rgba(9,14,34,.7) 100%); z-index: 1 }
.hero--dark .hero-over { color: rgba(255,255,255,.6) }
.hero--dark h1 { font-size: 48px; font-weight: 900; color: #fff; line-height: 1.08; letter-spacing: -1.5px; margin-bottom: 24px }
.hero--dark h1 em { font-style: normal; color: rgba(255,255,255,.5) }
.hero--dark .hero-sub { color: rgba(255,255,255,.8) }
.hero--dark .hero-actions .btn-primary { background: var(--white); color: var(--ink) !important; box-shadow: 0 4px 16px rgba(0,0,0,.18) }
.hero--dark .hero-actions .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.22) }

/* .hero--light-gradient: subtle bgf→bgs diagonal, compact padding (problem pages, service pages) */
.hero--light-gradient { padding: 190px 0 60px; background: linear-gradient(135deg, var(--bgf) 0%, var(--bgs) 100%) }
.hero--light-gradient .hero-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) }
.hero--light-gradient .hero-over { color: var(--silver) }
.hero--light-gradient h1 { font-size: 42px; font-weight: 900; color: var(--ink); line-height: 1.12; letter-spacing: -1px; margin-bottom: 20px; max-width: 720px }
.hero--light-gradient .hero-sub { color: var(--body); max-width: 640px }

/* .hero--light-solid: single bgf background, centered (industries listing) */
.hero--light-solid { padding: 190px 0 80px; background: var(--bgf); text-align: center }
.hero--light-solid .hero-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); text-align: center }
.hero--light-solid h1 { font-size: 2.8rem; color: var(--ink); margin-bottom: 1.5rem; font-weight: 700; line-height: 1.2 }
.hero--light-solid p { font-size: 1.05rem; color: var(--body); max-width: 750px; margin: 0 auto 2rem; line-height: 1.8 }

/* .hero--dark-gradient: dark ink gradient, centered text (PE methodology) */
.hero--dark-gradient { background: linear-gradient(160deg, var(--ink) 0%, #111A3A 50%, var(--ink2) 100%); padding: 100px var(--pad) 80px; text-align: center; position: relative; overflow: hidden }
.hero--dark-gradient h1 { font-size: 48px; font-weight: 900; color: #fff; line-height: 1.08; letter-spacing: -1.5px; margin-bottom: 24px }
.hero--dark-gradient .hero-sub { color: rgba(255,255,255,.8); margin-left: auto; margin-right: auto; max-width: 720px }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .hero--dark { min-height: 80vh; padding: 0 }
  .hero--dark .hero-inner { padding: 120px var(--pad) 60px }
  .hero--dark h1 { font-size: 40px }
  .hero--dark .hero-sub { font-size: 16px }
  .hero--light-gradient { padding: 170px 0 60px }
  .hero--light-solid { padding: 170px 0 60px }
}
@media (max-width: 600px) {
  .hero--dark { min-height: 70vh }
  .hero--dark .hero-inner { padding: 100px var(--pad) 48px }
  .hero--dark h1 { font-size: 32px; letter-spacing: -1px; line-height: 1.1 }
  .hero--dark .hero-over { font-size: 11px }
  .hero--dark .hero-sub { font-size: 15px }
  .hero--dark .hero-actions { flex-direction: column; align-items: stretch; gap: 12px }
  .hero--dark .hero-actions .btn-primary { width: 100%; justify-content: center; text-align: center }
  .hero--light-gradient { padding: 160px 0 40px }
  .hero--light-solid { padding: 160px 0 40px }
}

/* ============================================================
   5. HOMEPAGE & SHARED COMPONENTS
   (router, problems, proof-bar, levers, case-grid, verticals,
    growth-stage, frameworks, logo-strip, final-cta)
   ============================================================ */

/* Audience router (homepage) */
.router { padding: 72px var(--pad); background: var(--white); border-top: 1px solid rgba(122,130,168,.08) }
.router-inner { max-width: var(--max); margin: 0 auto }
.router-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px }
.router-card { background: rgba(255,255,255,.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(122,130,168,.12); border-radius: var(--rl); padding: 32px 28px; position: relative; overflow: hidden; transition: all .3s; cursor: pointer; box-shadow: 0 2px 12px rgba(9,14,34,.03) }
.router-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--silver-soft); transform: scaleX(0); transition: transform .3s }
.router-card:hover { border-color: rgba(122,130,168,.25); box-shadow: 0 12px 40px rgba(9,14,34,.08); background: rgba(255,255,255,.8) }
.router-card:hover::before { transform: scaleX(1) }
.router-icon { width: 44px; height: 44px; background: rgba(122,130,168,.06); border: 1px solid rgba(122,130,168,.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; font-size: 16px; font-weight: 900; color: var(--silver) }
.router-card h3 { font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 8px; letter-spacing: -.2px }
.router-card p { font-size: 14px; color: var(--body); line-height: 1.6; margin-bottom: 16px }
.router-card .link-arrow { font-size: 13px }

/* Problems grid (homepage + problem page) */
.problems { background: linear-gradient(180deg, #F8F9FC 0%, var(--white) 100%) }
.prob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.prob { border: 1px solid rgba(122,130,168,.1); border-radius: var(--rl); padding: 30px 28px; background: rgba(255,255,255,.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; transition: all .3s; position: relative; overflow: hidden; box-shadow: 0 2px 12px rgba(9,14,34,.03) }
.prob::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--silver-soft); opacity: 0; transition: opacity .3s }
.prob:hover { border-color: rgba(122,130,168,.25); box-shadow: 0 12px 40px rgba(9,14,34,.08); background: rgba(255,255,255,.85) }
.prob:hover::before { opacity: 1 }
.prob-q { font-size: 17px; font-weight: 800; color: var(--ink); line-height: 1.2; margin-bottom: 8px; letter-spacing: -.2px }
.prob-d { font-size: 14px; color: var(--body); line-height: 1.65; margin-bottom: 14px }
.prob-link { font-size: 13px; font-weight: 700; color: var(--silver); letter-spacing: .02em; transition: color .2s }
.prob:hover .prob-link { color: var(--ink) }
.prob-pillar { font-size: 11px; font-weight: 600; color: var(--silver); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px }

/* Proof bar (stats on dark background) */
.proof-bar { padding: 56px var(--pad); background: var(--ink); position: relative; overflow: hidden }
.proof-bar::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 40%, rgba(122,130,168,.1) 0%, transparent 50%), radial-gradient(ellipse at 70% 60%, rgba(122,130,168,.06) 0%, transparent 50%) }
.proof-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; position: relative; z-index: 2 }
.proof-stat .n { font-size: 36px; font-weight: 900; color: var(--white); letter-spacing: -1px; line-height: 1 }
.proof-stat .l { font-size: 13px; color: var(--silver-soft); margin-top: 8px; line-height: 1.45; font-weight: 500 }

/* Value levers (icon cards) */
.levers { background: var(--white) }
.lever-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px }
.lever { padding: 32px 24px; border-radius: var(--rl); background: rgba(255,255,255,.65); backdrop-filter: blur(12px); border: 1px solid rgba(122,130,168,.1); text-align: left; transition: all .3s; box-shadow: 0 2px 12px rgba(9,14,34,.03) }
.lever:hover { border-color: rgba(122,130,168,.25); box-shadow: 0 12px 40px rgba(9,14,34,.08); background: rgba(255,255,255,.85); transform: translateY(-3px) }
.lever-icon { width: 52px; height: 52px; border-radius: 12px; background: linear-gradient(135deg, rgba(9,14,34,.06) 0%, rgba(122,130,168,.1) 100%); display: flex; align-items: center; justify-content: center; margin-bottom: 18px }
.lever-icon svg { width: 22px; height: 22px; stroke: var(--ink) }
.lever h4 { font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 10px; letter-spacing: -.2px; line-height: 1.2 }
.lever p { font-size: 14px; color: var(--body); line-height: 1.65 }

/* Case studies grid */
.cases { background: linear-gradient(180deg, var(--white) 0%, #F8F9FC 100%) }
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px }
.case-card { background: rgba(255,255,255,.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(122,130,168,.1); border-radius: var(--rl); padding: 28px; transition: all .3s; cursor: pointer; box-shadow: 0 2px 12px rgba(9,14,34,.03) }
.case-card:hover { border-color: rgba(122,130,168,.22); transform: translateY(-3px); box-shadow: 0 16px 48px rgba(9,14,34,.08); background: rgba(255,255,255,.85) }
.case-badge { font-size: 11px; font-weight: 700; color: var(--silver); background: rgba(122,130,168,.08); padding: 5px 10px; border-radius: 6px; display: inline-block; margin-bottom: 12px; letter-spacing: .04em; text-transform: uppercase }
.case-card h3 { font-size: 18px; font-weight: 800; color: var(--ink); margin-bottom: 6px }
.case-card p { font-size: 14px; color: var(--body); line-height: 1.55; margin-bottom: 16px }
.case-metric { font-size: 32px; font-weight: 900; color: var(--ink); letter-spacing: -.8px; line-height: 1 }
.case-label { font-size: 13px; color: var(--silver); margin-top: 4px; font-weight: 500 }

/* Verticals */
.verticals { background: var(--white) }
.vert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px }
.vert-card { background: rgba(255,255,255,.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(122,130,168,.1); border-radius: var(--rl); padding: 32px 28px; transition: all .3s; cursor: pointer; position: relative; overflow: hidden; box-shadow: 0 2px 12px rgba(9,14,34,.03) }
.vert-card:hover { border-color: rgba(122,130,168,.22); box-shadow: 0 12px 40px rgba(9,14,34,.08); background: rgba(255,255,255,.85) }
.vert-card h3 { font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 8px }
.vert-card p { font-size: 14px; color: var(--body); line-height: 1.6; margin-bottom: 14px }
.vert-proof { font-size: 13px; font-weight: 600; color: var(--silver); padding-top: 12px; border-top: 1px solid rgba(122,130,168,.1) }

/* Growth stage cards */
.growth-stage { background: var(--bgf) }
.stage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px }
.stage-card { background: rgba(255,255,255,.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(122,130,168,.1); border-radius: var(--rl); padding: 32px 28px; transition: all .3s; cursor: pointer; position: relative; overflow: hidden; box-shadow: 0 2px 12px rgba(9,14,34,.03); display: flex; flex-direction: column }
.stage-card:hover { border-color: rgba(122,130,168,.22); box-shadow: 0 12px 40px rgba(9,14,34,.08); background: rgba(255,255,255,.88); transform: translateY(-4px) }
.stage-card h3 { font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 12px; letter-spacing: -.2px }
.stage-card p { font-size: 14px; color: var(--body); line-height: 1.6; margin-bottom: 16px; flex-grow: 1 }
.card-arrow { font-size: 13px; font-weight: 600; color: var(--silver); transition: color .2s }
.stage-card:hover .card-arrow { color: var(--ink) }

/* Frameworks (three-step) */
.frameworks { background: linear-gradient(180deg, #F8F9FC 0%, var(--white) 100%) }
.fw-header { text-align: center; margin-bottom: 56px }
.fw-header .sec-title { margin-bottom: 14px }
.fw-header .sec-sub { margin: 0 auto; max-width: 540px; text-align: center }
.fw-hook { font-size: 17px; font-weight: 700; color: var(--silver); text-align: center; margin-bottom: 48px; font-style: italic }
.fw-grid { display: grid; grid-template-columns: 1fr 40px 1fr 40px 1fr; align-items: start; max-width: 960px; margin: 0 auto }
.fw-step { background: rgba(255,255,255,.7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(122,130,168,.1); border-radius: var(--rl); padding: 32px 28px; position: relative; transition: all .3s; box-shadow: 0 2px 12px rgba(9,14,34,.03) }
.fw-step:hover { box-shadow: 0 12px 40px rgba(9,14,34,.08); background: rgba(255,255,255,.88) }
.fw-badge { font-size: 11px; font-weight: 700; color: var(--white); padding: 4px 10px; border-radius: 4px; display: inline-block; margin-bottom: 14px; letter-spacing: .06em; text-transform: uppercase }
.fw-badge.diag { background: var(--ink) }
.fw-badge.exec { background: var(--ink) }
.fw-badge.econ { background: var(--ink) }
.fw-num { font-size: 48px; font-weight: 900; color: rgba(122,130,168,.15); line-height: 1; margin-bottom: 8px }
.fw-step h3 { font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 8px; letter-spacing: -.2px; min-height: 2.6em }
.fw-step p { font-size: 14px; color: var(--body); line-height: 1.6 }
.fw-arrow { display: flex; align-items: center; justify-content: center; padding-top: 60px }
.fw-arrow svg { width: 24px; height: 24px; color: var(--silver) }
.fw-cta { text-align: center; margin-top: 44px }

/* Logo strip */
.logos { padding: 32px var(--pad); border-top: 1px solid rgba(122,130,168,.08); border-bottom: 1px solid rgba(122,130,168,.08) }
.logos-inner { max-width: var(--max); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px }
.logos-label { font-size: 11px; font-weight: 600; color: var(--silver); letter-spacing: .1em; text-transform: uppercase; text-align: center }
.cl-row { display: flex; align-items: center; justify-content: center; gap: 28px 40px; flex-wrap: wrap }
.cl { font-weight: 800; color: var(--ink); letter-spacing: .02em; white-space: nowrap; opacity: .45; transition: opacity .2s }
.cl:hover { opacity: .85 }
.cl-row img { height: 28px; width: auto; filter: grayscale(1); opacity: .55; transition: opacity .2s, filter .2s }
.cl-row img:hover { filter: grayscale(1); opacity: .9 }
.logos-subserving { max-width: 720px; margin: 10px auto 0; text-align: center; font-size: 12px; color: var(--silver); letter-spacing: .04em; line-height: 1.6 }
.logos-subserving strong { color: var(--ink); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; display: block; margin-bottom: 4px }

/* Final CTA block */
.final-cta { border-radius: var(--rl); padding: 72px 48px; position: relative; overflow: hidden; background: var(--ink); text-align: center }
.final-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(122,130,168,.1) 0%, transparent 50%); z-index: 0 }
.final-cta h2 { font-size: 34px; font-weight: 900; color: var(--white); letter-spacing: -.5px; margin-bottom: 12px; position: relative; z-index: 2 }
.final-cta p { font-size: 16px; color: var(--silver-soft); margin-bottom: 10px; max-width: 480px; margin-left: auto; margin-right: auto; line-height: 1.6; position: relative; z-index: 2 }
.cta-dual { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; position: relative; z-index: 2 }

/* ============================================================
   6. INSIGHT ARTICLE TEMPLATE
   Scoped under body.page-insight to avoid collision with .prob / .case
   ============================================================ */
body.page-insight .article-hero { max-width: var(--max, 1120px); margin: 0 auto; padding: 210px var(--pad, 48px) 60px; background: linear-gradient(180deg, rgba(245,246,250,.5) 0%, rgba(255,255,255,0) 100%); position: relative }
body.page-insight .article-hero-inner { max-width: 820px; margin: 0 auto }
body.page-insight .article-category { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--silver); margin-bottom: 16px }
body.page-insight .article-h1 { font-size: 48px; font-weight: 900; letter-spacing: -1px; line-height: 1.2; color: var(--ink); margin-bottom: 20px }
body.page-insight .article-subhead { font-size: 18px; font-weight: 500; line-height: 1.6; color: var(--body); margin-bottom: 24px }
body.page-insight .article-byline { font-size: 13px; color: var(--silver); font-weight: 600; letter-spacing: .3px; margin-top: 24px }
body.page-insight .article-readtime { display: none }
body.page-insight .article-body { max-width: 780px; margin: 0 auto; padding: 0 var(--pad, 48px) 80px; font-size: 16px; line-height: 1.8; color: var(--body) }
body.page-insight .article-body em { font-style: italic; color: inherit; font-weight: inherit }
body.page-insight .article-body .pullquote { color: var(--ink); font-style: italic; font-weight: 500; display: block; margin: 32px 0; padding: 20px 24px; background: rgba(245,246,250,.8); border-left: 4px solid var(--silver-soft); border-radius: 6px }
body.page-insight .article-body h2 { font-size: 28px; font-weight: 800; letter-spacing: -.5px; color: var(--ink); margin: 48px 0 24px; line-height: 1.3 }
body.page-insight .article-body h3 { font-size: 20px; font-weight: 800; letter-spacing: -.3px; color: var(--ink); margin: 32px 0 16px; line-height: 1.3 }
body.page-insight .article-body h4 { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--silver); margin: 24px 0 6px; line-height: 1.3 }
body.page-insight .article-body p { margin-bottom: 20px }
body.page-insight .article-body strong { color: var(--ink); font-weight: 700 }
body.page-insight .article-body ul, body.page-insight .article-body ol { margin: 0 0 20px 24px }
body.page-insight .article-body li { margin-bottom: 8px }
body.page-insight .article-footer { max-width: 1120px; margin: 0 auto; padding: 60px var(--pad, 48px) 0; border-top: 1px solid var(--rule); padding-top: 60px }
body.page-insight .article-cta { max-width: 780px; margin: 0 auto 72px; padding: 48px 40px; background: rgba(255,255,255,.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(122,130,168,.14); border-radius: 14px; text-align: center; box-shadow: 0 2px 14px rgba(9,14,34,.04) }
body.page-insight .article-cta h3 { font-size: 24px; font-weight: 800; color: var(--ink); margin-bottom: 8px }
body.page-insight .article-cta p { font-size: 15px; color: var(--body); margin-bottom: 24px }
body.page-insight .related-section { margin-top: 60px }
body.page-insight .related-title { font-size: 20px; font-weight: 800; color: var(--ink); margin-bottom: 32px; max-width: 780px; margin-left: auto; margin-right: auto }
body.page-insight .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1120px; margin: 0 auto }
body.page-insight .related-card { padding: 28px 24px; background: rgba(255,255,255,.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(122,130,168,.14); border-radius: 14px; box-shadow: 0 2px 14px rgba(9,14,34,.04); transition: all .3s ease; cursor: pointer; display: flex; flex-direction: column; text-decoration: none; color: inherit }
body.page-insight .related-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(9,14,34,.12); border-color: rgba(122,130,168,.28) }
body.page-insight .related-card-category { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--silver); margin-bottom: 12px }
body.page-insight .related-card-title { font-size: 18px; font-weight: 800; letter-spacing: -.3px; color: var(--ink); margin-bottom: 12px; line-height: 1.3 }
body.page-insight .related-card-excerpt { font-size: 14px; color: var(--body); line-height: 1.6; margin-bottom: 16px; flex-grow: 1 }
body.page-insight .related-card-link { font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: none; transition: color .2s ease; display: inline-block }
body.page-insight .related-card:hover .related-card-link { color: var(--silver) }
body.page-insight .author-bio { max-width: 780px; margin: 48px auto 40px; padding: 28px; background: rgba(255,255,255,.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(122,130,168,.14); border-radius: 14px; display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: start; box-shadow: 0 2px 14px rgba(9,14,34,.04) }
body.page-insight .author-bio .avatar { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #0E1630 0%, #090E22 100%); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--f); font-weight: 800; font-size: 18px; letter-spacing: .5px; box-shadow: 0 6px 16px rgba(9,14,34,.25); flex-shrink: 0 }
body.page-insight .author-bio .meta { font-size: 11px; font-weight: 700; color: var(--silver); letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 4px }
body.page-insight .author-bio .name { font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 2px; letter-spacing: -.1px }
body.page-insight .author-bio .role { font-size: 13px; font-weight: 500; color: var(--silver); margin-bottom: 10px }
body.page-insight .author-bio .bio-text { font-size: 14px; color: var(--body); line-height: 1.65 }

/* Insight newsletter capture block (dark) */
body.page-insight .insight-capture { max-width: 920px; margin: 64px auto 40px; padding: 40px 36px; background: linear-gradient(135deg, #090E22 0%, #0E1630 100%); color: #fff; border-radius: 18px; position: relative; overflow: hidden }
body.page-insight .insight-capture::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 85% 30%, rgba(122,130,168,.18) 0%, transparent 55%); pointer-events: none }
body.page-insight .insight-capture > * { position: relative; z-index: 1 }
body.page-insight .insight-capture .ic-over { font-size: 11px; font-weight: 700; color: #9aa3c8; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px }
body.page-insight .insight-capture h3 { font-size: 26px; font-weight: 900; color: #fff; letter-spacing: -.6px; line-height: 1.15; margin-bottom: 10px }
body.page-insight .insight-capture .ic-sub { font-size: 14.5px; color: #C7CDE2; line-height: 1.6; margin-bottom: 24px; max-width: 640px }
body.page-insight .insight-capture .ic-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px }
body.page-insight .insight-capture .ic-tag { position: relative; cursor: pointer; user-select: none }
body.page-insight .insight-capture .ic-tag input { position: absolute; opacity: 0; pointer-events: none }
body.page-insight .insight-capture .ic-tag span { display: inline-block; padding: 8px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #C7CDE2; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); transition: all .2s }
body.page-insight .insight-capture .ic-tag:hover span { background: rgba(255,255,255,.1); color: #fff }
body.page-insight .insight-capture .ic-tag input:checked + span { background: #fff; color: #090E22; border-color: #fff }
body.page-insight .insight-capture .ic-form { display: flex; gap: 10px; flex-wrap: wrap }
body.page-insight .insight-capture input[type="email"] { flex: 1 1 280px; min-width: 0; padding: 13px 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: rgba(255,255,255,.06); color: #fff; font-family: var(--f); font-size: 14px; outline: none; transition: border-color .2s, background .2s }
body.page-insight .insight-capture input[type="email"]::placeholder { color: var(--silver-soft) }
body.page-insight .insight-capture input[type="email"]:focus { border-color: #fff; background: rgba(255,255,255,.1) }
body.page-insight .insight-capture button.ic-submit { padding: 13px 22px; border-radius: 10px; border: none; background: #fff; color: #090E22; font-family: var(--f); font-size: 14px; font-weight: 700; cursor: pointer; transition: all .2s }
body.page-insight .insight-capture button.ic-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(255,255,255,.25) }

/* ============================================================
   7. PILLAR PAGE TEMPLATE
   ============================================================ */
body.page-pillar .ai-section { padding: 80px var(--pad); background: linear-gradient(180deg, var(--bgf) 0%, var(--white) 100%) }
body.page-pillar .ai-text { max-width: var(--max); margin: 0 auto; text-align: center }
body.page-pillar .ai-title { font-size: 32px; font-weight: 900; color: var(--ink); letter-spacing: -.6px; margin-bottom: 20px }
body.page-pillar .capabilities-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: var(--max); margin: 0 auto }
body.page-pillar .capability-item { padding: 28px; background: rgba(255,255,255,.7); backdrop-filter: blur(12px); border: 1px solid rgba(122,130,168,.12); border-radius: var(--rl); transition: all .3s }
body.page-pillar .capability-item:hover { border-color: rgba(122,130,168,.25); box-shadow: 0 12px 40px rgba(9,14,34,.08); transform: translateY(-2px) }
body.page-pillar .capability-title { font-size: 18px; font-weight: 800; color: var(--ink); margin-bottom: 10px; letter-spacing: -.2px }
body.page-pillar .capability-description { font-size: 14px; color: var(--body); line-height: 1.65 }
body.page-pillar .engagement-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: var(--max); margin: 0 auto }
body.page-pillar .engagement-step { padding: 28px; background: rgba(255,255,255,.65); backdrop-filter: blur(12px); border: 1px solid rgba(122,130,168,.12); border-radius: var(--rl); transition: all .3s }
body.page-pillar .engagement-step:hover { border-color: rgba(122,130,168,.25); box-shadow: 0 12px 40px rgba(9,14,34,.08) }
body.page-pillar .es-num { font-size: 40px; font-weight: 900; color: rgba(122,130,168,.2); line-height: 1; margin-bottom: 12px }
body.page-pillar .es-title { font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 8px; letter-spacing: -.2px }
body.page-pillar .es-time { font-size: 12px; font-weight: 600; color: var(--silver); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px }
body.page-pillar .case-studies-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: var(--max); margin: 0 auto }
body.page-pillar .case-study { padding: 28px; background: rgba(255,255,255,.65); backdrop-filter: blur(12px); border: 1px solid rgba(122,130,168,.12); border-radius: var(--rl); transition: all .3s }
body.page-pillar .case-study:hover { border-color: rgba(122,130,168,.25); box-shadow: 0 12px 40px rgba(9,14,34,.08); transform: translateY(-3px) }
body.page-pillar .case-study-title { font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 10px; letter-spacing: -.2px }
body.page-pillar .case-study-problem { font-size: 13px; color: var(--silver); font-weight: 600; margin-bottom: 12px; text-transform: uppercase; letter-spacing: .06em }
body.page-pillar .case-study-outcome { font-size: 14px; color: var(--body); line-height: 1.65 }
body.page-pillar .levers-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: var(--max); margin: 0 auto }

/* ============================================================
   8. CASE STUDY PAGE TEMPLATE
   ============================================================ */
body.page-case .hero-logo { max-height: 48px; margin-bottom: 24px; filter: brightness(0) invert(1); opacity: .9 }
body.page-case .hero-eyebrow { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.6); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px }
body.page-case .hero-title { font-size: 44px; font-weight: 900; color: #fff; line-height: 1.1; letter-spacing: -1px; margin-bottom: 20px; max-width: 760px }
body.page-case .hero-subtitle { font-size: 17px; color: rgba(255,255,255,.8); line-height: 1.65; margin-bottom: 32px; max-width: 620px }
body.page-case .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 40px; max-width: 680px }
body.page-case .hero-stats .stat-num { font-size: 36px; font-weight: 900; color: #fff; line-height: 1; letter-spacing: -.8px; margin-bottom: 6px }
body.page-case .hero-stats .stat-label { font-size: 12px; color: rgba(255,255,255,.65); font-weight: 600; letter-spacing: .04em; text-transform: uppercase }

/* ============================================================
   9. PROBLEM PAGE TEMPLATE
   ============================================================ */
body.page-problem .hero-ctas { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap }
body.page-problem .stat-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px }
body.page-problem .stat { text-align: left }
body.page-problem .stat-num { font-size: 40px; font-weight: 900; color: var(--ink); letter-spacing: -.8px; line-height: 1; margin-bottom: 8px }
body.page-problem .stat-label { font-size: 13px; color: var(--body); font-weight: 500; line-height: 1.5 }
body.page-problem .card { background: #fff; border: 1px solid rgba(122,130,168,.12); border-radius: var(--rl); padding: 28px; transition: all .3s; box-shadow: 0 2px 12px rgba(9,14,34,.04) }
body.page-problem .card:hover { border-color: rgba(122,130,168,.25); box-shadow: 0 12px 40px rgba(9,14,34,.08); transform: translateY(-2px) }
body.page-problem .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px }
body.page-problem .bullets { list-style: none; padding: 0; margin: 0 }
body.page-problem .bullets li { padding-left: 22px; position: relative; margin-bottom: 10px; color: var(--body); line-height: 1.6 }
body.page-problem .bullets li::before { content: ''; position: absolute; left: 0; top: 9px; width: 10px; height: 2px; background: var(--silver-soft) }
body.page-problem .article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px }
body.page-problem .article-card { background: #fff; border: 1px solid rgba(122,130,168,.12); border-radius: var(--rl); padding: 28px; transition: all .3s; cursor: pointer; box-shadow: 0 2px 12px rgba(9,14,34,.04) }
body.page-problem .article-card:hover { border-color: rgba(122,130,168,.25); box-shadow: 0 12px 40px rgba(9,14,34,.08); transform: translateY(-2px) }
body.page-problem .article-badge { font-size: 11px; font-weight: 700; color: var(--silver); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px }
body.page-problem .article-card h3 { font-size: 16px; font-weight: 800; color: var(--ink); margin-bottom: 8px; line-height: 1.3 }
body.page-problem .article-card p { font-size: 13px; color: var(--body); line-height: 1.55; margin-bottom: 12px }
body.page-problem .article-link { font-size: 13px; font-weight: 700; color: var(--ink); transition: color .2s }
body.page-problem .article-card:hover .article-link { color: var(--silver) }
body.page-problem .case-ref { background: #fff; border: 1px solid rgba(122,130,168,.12); border-radius: var(--rl); padding: 28px; transition: all .3s; box-shadow: 0 2px 12px rgba(9,14,34,.04) }
body.page-problem .case-ref:hover { border-color: rgba(122,130,168,.25); box-shadow: 0 12px 40px rgba(9,14,34,.08) }
body.page-problem .case-badge { font-size: 10px; font-weight: 600; color: var(--silver); letter-spacing: .12em; text-transform: uppercase; display: inline-block; margin-bottom: 10px }
body.page-problem .case-title { font-size: 16px; font-weight: 800; color: var(--ink); margin-bottom: 6px }
body.page-problem .case-outcome { font-size: 14px; color: var(--body); line-height: 1.55 }
body.page-problem .final-cta-inner { max-width: var(--max); margin: 0 auto }

/* ============================================================
   10. FOOTER
   ============================================================ */
footer { padding: 44px var(--pad) 0; background: var(--ink); border-top: 1px solid rgba(255,255,255,.04) }
.f-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px }
.f-brand p { font-size: 13px; color: var(--silver-soft); line-height: 1.55; margin-top: 12px }
.f-col h5 { font-size: 11px; font-weight: 700; color: var(--silver-soft); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px }
.f-col a { display: block; font-size: 13px; color: rgba(255,255,255,.3); margin-bottom: 7px; font-weight: 500; transition: color .2s; cursor: pointer; text-decoration: none }
.f-col a:hover { color: #fff }
.f-col a:visited { text-decoration: none }
.f-brand a, .f-brand a:hover, .f-brand a:visited { text-decoration: none }
.f-bottom { max-width: var(--max); margin: 20px auto 0; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.04); font-size: 12px; color: rgba(255,255,255,.45); display: flex; justify-content: flex-start }

/* ============================================================
   11. STICKY MOBILE CTA
   ============================================================ */
.sticky-mcta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998; display: none; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.82); backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1); border-top: 1px solid rgba(122,130,168,.22); box-shadow: 0 -8px 24px rgba(9,14,34,.08); transform: translateY(110%); transition: transform .35s cubic-bezier(.2,.7,.2,1) }
.sticky-mcta.is-visible { transform: translateY(0) }
.sticky-mcta a.sticky-mcta-btn { display: block; width: 100%; text-align: center; background: var(--ink); color: #fff; font-family: var(--f); font-size: 15px; font-weight: 700; letter-spacing: .2px; text-decoration: none; padding: 14px 18px; border-radius: 12px; box-shadow: 0 6px 18px rgba(9,14,34,.25); transition: transform .2s ease }
.sticky-mcta a.sticky-mcta-btn:active { transform: translateY(1px) }
.sticky-mcta a.sticky-mcta-btn::after { content: " \2192"; opacity: .85 }

/* ============================================================
   12. RESPONSIVE — TABLET (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  :root { --pad: 32px }

  /* Nav collapses to hamburger */
  .nav-util { display: none }
  .nav-toggle { display: block }
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; background: rgba(255,255,255,.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); flex-direction: column; padding: 24px var(--pad); gap: 14px; border-bottom: 1px solid rgba(122,130,168,.1); box-shadow: 0 12px 32px rgba(9,14,34,.08); align-items: stretch; max-height: calc(100vh - 88px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain }
  .nav-links.open { display: flex }
  .nav-links > a { font-size: 16px; padding: 12px 0; color: var(--body) !important }
  .nav-links .btn-primary, .nav-links a.btn-primary, .nav-links a.btn-primary:hover, .nav-links a.btn-primary:visited { width: 100%; justify-content: center; margin-top: 8px; padding: 14px 28px; color: var(--white) !important; background: var(--ink) !important }
  .nav-links-util { display: flex; flex-direction: column; gap: 10px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid rgba(122,130,168,.14) }
  .nav-links-util a { font-size: 12px; font-weight: 700; color: var(--silver); letter-spacing: .08em; text-transform: uppercase; padding: 8px 0; text-decoration: none }
  .nav-links-util a:hover { color: var(--ink) }

  /* Mega menu collapses to accordion */
  .mega-menu-trigger { width: 100%; text-align: left; padding: 12px 0; font-size: 16px; justify-content: space-between; color: var(--body) !important }
  .mega-menu-panel { position: static; opacity: 0; visibility: hidden; transform: none; backdrop-filter: none; background: transparent; border: none; box-shadow: none; padding: 0; margin: 0; max-width: none; width: 100%; display: block; grid-template-columns: none; gap: 0; max-height: 0; overflow: hidden; transition: max-height .35s ease, opacity .3s, visibility .3s }
  .mega-menu-trigger[aria-expanded="true"] + .mega-menu-panel { opacity: 1; visibility: visible; max-height: 1600px; pointer-events: auto }
  .mega-menu-column { padding: 14px 0 10px 14px; border-left: 2px solid rgba(122,130,168,.22); margin-bottom: 8px }
  .mega-menu-pillar { font-size: 14px; margin-bottom: 10px }
  .mega-menu-problems { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px }
  .mega-menu-problems li { margin-bottom: 0 }
  .mega-menu-problems a { font-size: 13px; padding: 8px 0 }

  /* Section + hero compaction */
  .sec { padding: 60px var(--pad) }
  .sec-title { font-size: 28px }

  /* Router / grids → single column or halved */
  .router { padding: 56px var(--pad) }
  .router-grid { grid-template-columns: 1fr; gap: 14px }
  .prob-grid { grid-template-columns: 1fr; gap: 14px }
  .proof-inner { grid-template-columns: repeat(3, 1fr); gap: 20px }
  .proof-stat .n { font-size: 30px }
  .lever-grid { grid-template-columns: repeat(3, 1fr) }
  .case-grid { grid-template-columns: 1fr 1fr; gap: 14px }
  .vert-grid { grid-template-columns: 1fr; gap: 14px }
  .stage-grid { grid-template-columns: 1fr; gap: 14px }
  .fw-grid { grid-template-columns: 1fr; gap: 16px; max-width: 480px }
  .fw-arrow { display: none }
  .fw-num { font-size: 40px }

  /* Footer stacks */
  .f-inner { grid-template-columns: 1fr 1fr; gap: 24px }

  /* CTA */
  .final-cta { padding: 64px var(--pad) }
  .final-cta h2 { font-size: 28px }
  .cta-dual { flex-direction: column; align-items: center }

  /* Template-scoped mobile */
  body.page-insight .related-grid { grid-template-columns: repeat(2, 1fr); gap: 16px }
  body.page-insight .article-h1 { font-size: 32px }
  body.page-insight .article-subhead { font-size: 16px }
  body.page-pillar .capabilities-list { grid-template-columns: 1fr; gap: 16px }
  body.page-pillar .engagement-grid { grid-template-columns: 1fr; gap: 16px }
  body.page-pillar .case-studies-grid { grid-template-columns: 1fr; gap: 16px }
  body.page-pillar .levers-list { grid-template-columns: repeat(2, 1fr) }
  body.page-case .hero-title { font-size: 36px }
  body.page-case .hero-stats { grid-template-columns: repeat(3, 1fr); gap: 20px }
  body.page-problem .stat-band { grid-template-columns: repeat(2, 1fr); gap: 20px }
  body.page-problem .card-grid, body.page-problem .article-grid { grid-template-columns: 1fr; gap: 14px }
}

/* ============================================================
   13. RESPONSIVE — MOBILE (≤ 600px)
   ============================================================ */
@media (max-width: 600px) {
  :root { --pad: 20px }

  /* Section + hero */
  .sec { padding: 48px var(--pad) }
  .sec-title { font-size: 24px; letter-spacing: -.5px }
  .sec-sub { font-size: 14px; margin-bottom: 32px }
  .over { font-size: 11px; margin-bottom: 8px }

  /* Router */
  .router { padding: 40px var(--pad) }
  .router-card { padding: 24px 20px }
  .router-card h3 { font-size: 16px }

  /* Problems */
  .prob { padding: 24px 20px }
  .prob-q { font-size: 16px }
  .prob-d { font-size: 13px }

  /* Proof bar */
  .proof-bar { padding: 40px var(--pad) }
  .proof-inner { grid-template-columns: repeat(2, 1fr); gap: 20px 16px }
  .proof-stat .n { font-size: 28px }
  .proof-stat .l { font-size: 12px }
  .proof-stat:last-child { grid-column: span 2; text-align: center }

  /* Levers */
  .lever-grid { grid-template-columns: repeat(2, 1fr) }
  .lever { padding: 20px 16px; border-right: none; border-bottom: 1px solid rgba(122,130,168,.08) }
  .lever:last-child { grid-column: span 2; border-right: none }
  .lever h4 { font-size: 13px }
  .lever p { font-size: 12px }

  /* Cases */
  .case-grid { grid-template-columns: 1fr; gap: 14px }
  .case-card { padding: 24px 20px }
  .case-metric { font-size: 28px }

  /* Verticals */
  .vert-card { padding: 24px 20px }
  .vert-card h3 { font-size: 16px }

  /* Growth Stage */
  .stage-grid { grid-template-columns: 1fr; gap: 14px }
  .stage-card { padding: 24px 20px }
  .stage-card h3 { font-size: 16px }

  /* Frameworks */
  .fw-grid { max-width: 100% }
  .fw-step { padding: 24px 20px }
  .fw-step h3 { font-size: 16px }
  .fw-num { font-size: 36px }
  .fw-hook { font-size: 15px; padding: 0 8px }

  /* Logo strip */
  .logos { padding: 24px var(--pad) }
  .cl-row { gap: 16px 24px }
  .cl { font-size: 12px !important }

  /* Final CTA */
  .final-cta { padding: 48px 24px }
  .final-cta h2 { font-size: 24px }
  .final-cta p { font-size: 14px }
  .cta-dual { flex-direction: column; align-items: center }
  .cta-dual > a { width: 100%; justify-content: center }

  /* Footer */
  .f-inner { grid-template-columns: 1fr; gap: 20px; text-align: center }
  .f-brand { text-align: center }
  .f-col a { display: block; margin: 0 0 8px }
  .f-bottom { flex-direction: column; align-items: center; gap: 4px; text-align: center }

  /* Sticky CTA only on <600px */
  .sticky-mcta { display: block }
  body.sticky-mcta-on { padding-bottom: 76px }

  /* Logo */
  .logo { font-size: 22px }

  /* Mega menu — single column of problem links on <480px */
  .mega-menu-problems { grid-template-columns: 1fr }
  .mega-menu-panel { gap: 12px }

  /* Templates */
  body.page-insight .article-hero { padding: 170px var(--pad) 40px }
  body.page-insight .article-h1 { font-size: 28px; margin-bottom: 16px }
  body.page-insight .article-subhead { font-size: 14px }
  body.page-insight .article-body h2 { font-size: 22px; margin: 40px 0 20px }
  body.page-insight .article-body h3 { font-size: 16px; margin: 28px 0 14px }
  body.page-insight .article-body p { font-size: 14px; margin-bottom: 20px }
  body.page-insight .article-footer { padding: 40px var(--pad) 0; margin-top: 60px }
  body.page-insight .article-cta { padding: 32px 24px }
  body.page-insight .related-grid { grid-template-columns: 1fr; gap: 16px }
  body.page-case .hero-title { font-size: 28px }
  body.page-case .hero-stats { grid-template-columns: 1fr; gap: 16px }
  body.page-problem .stat-band { grid-template-columns: 1fr; gap: 20px }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-mcta { transition: none }
  .reveal, .reveal-child { transition: none }
}