/* ═════════════════════════════════════════════════════════
   CysecIn — Sovereign Architect Brand System
   Aligned to Business Plan v5.0 §13 (Master Brand Identity)
   Cormorant Garamond (gravity) · Montserrat (engineering)
   ═════════════════════════════════════════════════════════ */

:root {
  /* ── Parent Palette (Brand Plan §13.4.1) ─────────────── */
  /* v4.2: founder correction — actual brand orange is #FF7900 (not the
     #F7941D in the prior CLAUDE.md spec). Re-derived --orange-deep and
     --orange-soft to stay in-hue with the new primary. */
  --orange:        #FF7900;   /* CysecIn Orange — the company color */
  --orange-deep:   #CC6100;   /* hover / darker state */
  --orange-soft:   #FFAA59;   /* inverse contexts (text on dark) */
  --peach-canvas:  #FFDDBF;   /* hero base canvas (when gradients fade) */

  /* v7: Silver palette for the Recognition band — visual rhetoric to
     match the Silver-tier prizes (Globee Silver 2024, CSEA Silver). */
  --silver:        #C0C5CD;   /* platinum mid */
  --silver-light:  #E8EBEF;   /* light highlight */
  --silver-deep:   #8A9099;   /* deep border / typography accent */

  --navy:          #002868;   /* Old Glory Navy — SECURE pillar */
  --navy-2:        #001E50;
  --navy-3:        #0A3877;

  --crimson:       #BF0A30;   /* Old Glory Crimson — TRAIN pillar */
  --crimson-2:     #960823;
  --crimson-3:     #D11F45;

  --ink:           #000000;   /* EDUCATE pillar */
  --paper:         #FAFAFA;   /* Paper White — never pure #FFF */
  --paper-2:       #F4F5F7;
  --paper-3:       #EDEEF2;

  --charcoal:      #1A1D24;   /* Architect Charcoal — body text on light */
  --slate:         #4A5160;   /* Atlas Slate — secondary body, captions */
  --slate-2:       #6B7280;
  --line:          #E4E7EB;   /* Discipline Gray 200 — borders, dividers */
  --line-2:        #D1D5DB;

  /* ── Type ──────────────────────────────────────────── */
  --serif:  "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --sans:   "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:   "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ── Spacing (8pt grid) ────────────────────────────── */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --s-11: 160px;

  /* ── Motion ────────────────────────────────────────── */
  --ease:  cubic-bezier(0.22, 1, 0.36, 1);
  --easel: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 180ms;
  --t-mid:  320ms;
  --t-slow: 600ms;

  /* ─── v18 · Three-gradient hero register system ──────────
     UNIFIED BASE: every register uses --peach-canvas (#FFDDBF).
     Only the radial overlays change the emotional contract per
     page. CALM = home brand canvas. DRAMA = defense/Aegis
     register (crimson + intense orange). SYSTEM = three-pillar
     brand wash (orange + crimson + navy + paper). */
  --hero-calm-recipe:
    radial-gradient(ellipse 42% 38% at 20% 12%,
      rgba(255, 255, 255, 0.13) 0%,
      rgba(255, 255, 255, 0.10) 45%,
      rgba(255, 255, 255, 0.05) 75%,
      rgba(255, 255, 255, 0) 100%),
    radial-gradient(ellipse 130% 110% at 5% 15%,
      #FF7900 0%,
      #FF7900 28%,
      rgba(255, 137, 30, 0.88) 42%,
      rgba(255, 156, 65, 0.65) 56%,
      rgba(255, 180, 110, 0.40) 70%,
      rgba(255, 210, 160, 0.18) 84%,
      rgba(255, 221, 191, 0) 100%);
  --hero-drama-recipe:
    radial-gradient(ellipse 60% 55% at 78% 82%,
      rgba(179, 25, 66, 0.62) 0%,
      rgba(179, 25, 66, 0.32) 45%,
      rgba(179, 25, 66, 0) 100%),
    radial-gradient(ellipse 130% 115% at 10% 20%,
      #FF5500 0%,
      #FF7900 26%,
      rgba(255, 121, 0, 0.92) 42%,
      rgba(255, 137, 30, 0.62) 60%,
      rgba(255, 180, 110, 0.28) 80%,
      rgba(255, 221, 191, 0) 100%);
  --hero-system-recipe:
    radial-gradient(ellipse 70% 60% at 20% 25%,
      rgba(255, 121, 0, 0.75) 0%,
      rgba(255, 121, 0, 0.40) 50%,
      rgba(255, 121, 0, 0) 100%),
    radial-gradient(ellipse 55% 50% at 50% 95%,
      rgba(179, 25, 66, 0.50) 0%,
      rgba(179, 25, 66, 0.22) 50%,
      rgba(179, 25, 66, 0) 100%),
    radial-gradient(ellipse 110% 105% at 90% 30%,
      rgba(10, 49, 97, 0.50) 0%,
      rgba(10, 49, 97, 0.28) 40%,
      rgba(10, 49, 97, 0.10) 70%,
      rgba(10, 49, 97, 0) 100%),
    radial-gradient(ellipse 38% 35% at 90% 92%,
      rgba(255, 255, 255, 0.25) 0%,
      rgba(255, 255, 255, 0.12) 50%,
      rgba(255, 255, 255, 0) 100%);
}

/* v18 · Hero register classes — unified peach base, swap overlay. */
.hero-calm,
.hero-drama,
.hero-system { background-color: var(--peach-canvas); }
.hero-calm   { background-image: var(--hero-calm-recipe); }
.hero-drama  { background-image: var(--hero-drama-recipe); color: var(--paper); }
.hero-system { background-image: var(--hero-system-recipe); }

/* ── Reset & base ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* P23 fix (v29): prevent any single element from creating horizontal
     overflow. When even one element overflows horizontally on a page,
     Safari (mobile + desktop) auto-zooms-to-fit on subsequent navigations,
     producing the "crazy zoom on page change" behavior the founder flagged.
     Locking max-width to the viewport and clipping any overflow stops
     Safari from re-scaling between page loads. */
  max-width: 100vw;
  overflow-x: hidden;
}
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--charcoal);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
  max-width: 100vw;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: 0; color: inherit; }
::selection { background: var(--orange); color: var(--paper); }

/* Cormorant carries the gravity load — every headline element */
h1, h2, h3, h4, h5, h6, .serif {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.08;
  color: var(--charcoal);
}
h1 { font-weight: 400; }
h2 { font-weight: 500; }
h3 { font-weight: 500; }

/* ── Editorial primitives ─────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange-deep);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}
.eyebrow.inv { color: var(--orange-soft); }
.eyebrow.muted { color: var(--slate); }

.kicker {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--slate);
}

.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s-7) 0;
}

.measure { max-width: 64ch; }

/* ── Layout ───────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--s-7);
}
.container.tight { max-width: 1080px; }

@media (max-width: 900px) {
  .container { padding: 0 var(--s-5); }
}

/* v21: every major section locks to one viewport per founder directive
   2026-05-14. Apex-prime register — Anduril/Palantir scroll-tapping
   cadence. Content centers vertically inside the tall canvas; section
   grows naturally if content exceeds viewport (e.g., at extreme zoom),
   matching the accessibility-friendly zoom policy already established
   on .provenance.provenance-dark and .hero. Pillar-side-scroll sections
   opt out — their height is managed by GSAP ScrollTrigger pin. */
.section {
  padding: var(--s-10) 0;
  min-height: 100svh;
  display: flex;
  align-items: center;
  position: relative;
}
.section.tight { padding: var(--s-9) 0; }
.section.ink { background: var(--ink); color: var(--paper); }
.section.ink h1, .section.ink h2, .section.ink h3, .section.ink h4 { color: var(--paper); }
.section.navy { background: var(--navy); color: var(--paper); }
.section.navy h1, .section.navy h2, .section.navy h3, .section.navy h4 { color: var(--paper); }
.section.crimson { background: var(--crimson); color: var(--paper); }
.section.crimson h1, .section.crimson h2, .section.crimson h3, .section.crimson h4 { color: var(--paper); }
.section.paper { background: var(--paper); }
.section.paper-2 { background: var(--paper-2); }

/* Reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"] { transition-delay: 60ms; }
.reveal[data-delay="2"] { transition-delay: 120ms; }
.reveal[data-delay="3"] { transition-delay: 180ms; }
.reveal[data-delay="4"] { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ═════════════════════════════════════════════════════════
   UTILITY BAR — v6: white + narrow (founder instruction)
   ═════════════════════════════════════════════════════════ */
/* v18e — util-bar is FIXED at the very top; header sits directly below
   it (also fixed). When util-bar slides up via transform, the header
   slides up via top:22→0 in the same 180ms tick — no transient gap,
   no second sticky-collapse step. transform-based animations only
   trigger composite (no layout/paint), so the chrome is smooth. */
/* v18f — header system: fixed stack, ONE 200ms ease-out timing across
   every animated property, no gap between bars when scrolled. */
.util-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 28px;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  font-size: 11px;
  color: var(--charcoal);
  transform: translateY(0);
  transition: transform 200ms ease-out;
  will-change: transform;
}
.util-bar.hidden { transform: translateY(-100%); }
.util-inner {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 clamp(20px, 3vw, 48px);
  /* Old-P7 recurrence fix (v29): without nowrap, the util-bar contents wrap
     into 2–3 lines at moderate zoom (e.g. 200% on 1920px = 960px viewport)
     which pushes the site-header down INTO the page content and looks like
     the menu has "scrolled off." Force a single row at all times; if the
     content is wider than the viewport, it clips cleanly at the edge. */
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
}
.util-left, .util-right {
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* v18f: reserve fixed-header space (util 28 + header 76 = 104). */
body { padding-top: 104px; }

/* CRITICAL menu fix (v30): bumped collapse breakpoint 1100 → 1300px. Earlier
   1100 still let the desktop nav render at 150% zoom on a 1920px screen
   (effective viewport 1280px), where 7-item nav + logo + Sign In bled past
   the right edge and looked "eaten." Triggering the sandwich earlier means
   moderate-zoom users get the clean mobile nav before clipping happens.
   Also brings the `.nav.open` fullscreen-overlay rule out of its old
   @media 720px scope so the hamburger menu actually works at 720–1300px. */
@media (max-width: 1300px) {
  body { padding-top: 76px; }
  .util-bar { display: none; }
  .site-header { top: 0; }
  .header-signin { display: none; }
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .header-inner { padding: 0 clamp(16px, 4vw, 28px); }
  .nav.open {
    position: fixed;
    inset: 76px 0 0 0;
    background: var(--paper);
    flex-direction: column;
    align-items: stretch;
    padding: var(--s-5);
    gap: 0;
    overflow-y: auto;
    border-top: 1px solid var(--line);
    z-index: 50;
    display: flex;
  }
  .nav.open .nav-item { display: block; }
  .nav.open .nav-link { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
}
.util-left, .util-right { display: flex; align-items: center; gap: var(--s-5); }
.util-bar a { color: var(--charcoal); transition: color var(--t-fast); }
.util-bar a:hover { color: var(--orange); }
/* v25: SOF Week 2026 campaign CTA — orange accent + bold; removable week of May 25 */
.util-bar a.util-sof { color: var(--orange); font-weight: 600; }
.util-bar a.util-sof:hover { color: var(--orange-deep); }
.util-sep { opacity: 0.32; color: var(--slate); }
.util-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border: 1px solid var(--line);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.util-dot {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: #6BE89A;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.5; } }
.util-search {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  letter-spacing: inherit;
  padding: 0;
}
.util-search:hover { color: var(--orange-soft); }

/* ═════════════════════════════════════════════════════════
   SITE HEADER — Paper White, sovereign discipline
   ═════════════════════════════════════════════════════════ */
/* v18e — site-header also fixed; top:22 (under util-bar) at rest,
   top:0 (filling vacated util-bar space) when scrolled. Same 180ms
   ease-out as util-bar so the two animate as one motion. */
.site-header {
  position: fixed;
  top: 28px;
  left: 0; right: 0;
  height: 76px;
  z-index: 99;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: top 200ms ease-out, height 200ms ease-out;
  will-change: top, height;
}
.site-header.scrolled {
  top: 0;
  height: 60px;
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  padding: 0 clamp(20px, 3vw, 48px);
}

/* Brand mark + wordmark — header only (footer .brand stays unchanged) */
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  flex-shrink: 0;
}
.brand-mark {
  width: 52px;
  height: 60px;
  object-fit: contain;
  display: block;
  transform: scale(1);
  transform-origin: left center;
  transition: transform 200ms ease-out;
  will-change: transform;
}
.site-header.scrolled .brand-mark { transform: scale(0.78); }

.brand-word {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--orange);
  transform: scale(1);
  transform-origin: left center;
  transition: transform 200ms ease-out;
  will-change: transform;
}
.site-header.scrolled .brand-word { transform: scale(0.85); }

/* Footer .brand-tag retained — header instance was removed in markup. */

/* Main nav */
.nav {
  display: flex;
  align-items: center;
  /* v17: cluster nav immediately after the brand instead of centering. */
  gap: clamp(20px, 2vw, 36px);
  margin: 0;
}
.nav-item { display: flex; }
.nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--s-5);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--charcoal);
  position: relative;
  transition: color var(--t-fast);
  cursor: pointer;
}
.nav-link:hover, .nav-link.open, .nav-link.active { color: var(--orange-deep); }
.nav-link[aria-haspopup="true"]::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  transition: transform var(--t-fast);
}
.nav-link.open[aria-haspopup="true"]::after { transform: rotate(-135deg); margin-top: 3px; }
.nav-link::before {
  content: "";
  position: absolute;
  left: var(--s-5);
  right: var(--s-5);
  bottom: -1px;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-mid) var(--ease);
}
.nav-link.active::before, .nav-link.open::before { transform: scaleX(1); }

/* v14: .header-cta obliterated. Engage-pill (bottom-right) handles
   the floating CTA; hero buttons handle the in-page CTA. Header has
   no business duplicating either. */

/* v17: Sign-In anchored to the far right of the header. Margin-left:
   auto pushes it past the nav cluster (which sits next to the brand).
   Charcoal outline → inverts on hover for the apex-prime register.
   Hidden below 1024px — the hamburger menu carries it on mobile. */
.header-signin {
  margin-left: auto;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--charcoal);
  text-decoration: none;
  padding: 9px 18px;
  border: 1px solid var(--charcoal);
  border-radius: 0;
  transition: background var(--t-fast), color var(--t-fast);
  white-space: nowrap;
}
.header-signin:hover {
  background: var(--charcoal);
  color: var(--paper);
}
@media (max-width: 1023px) {
  .header-signin { display: none; }
}

.menu-toggle {
  display: none;
  padding: 12px 16px;
  border: 1px solid var(--line);
}

/* ── Mega-menu ────────────────────────────────────────── */
.mega {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: 0 32px 64px -32px rgba(0, 0, 0, 0.16);
  display: none;
  z-index: 70;
}
.mega.open { display: block; animation: megaFade 260ms var(--ease); }
@keyframes megaFade {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mega-grid {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--s-7) var(--s-7) var(--s-8);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.05fr;
  gap: var(--s-7);
}
.mega-col h5 {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--orange-deep);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-4);
}
.mega-link {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--charcoal);
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.mega-link small {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--slate);
  letter-spacing: 0;
  margin-top: 3px;
  line-height: 1.5;
}
.mega-link:hover { color: var(--orange-deep); padding-left: 6px; }
.mega-link:last-of-type { border-bottom: 0; }

.mega-feature {
  background: var(--charcoal);
  color: var(--paper);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 280px;
  border: 1px solid var(--charcoal);
  transition: background var(--t-fast);
}
.mega-feature:hover { background: var(--ink); }
.mega-feature .eyebrow { color: var(--orange-soft); margin-bottom: var(--s-4); }
.mega-feature .eyebrow::before { background: var(--orange-soft); }
.mega-feature h4 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--paper);
  margin-bottom: var(--s-4);
}
.mega-feature p {
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(250, 250, 250, 0.72);
  line-height: 1.6;
  margin-bottom: var(--s-5);
}
.mega-feature .mega-cta {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--orange-soft);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mega-feature .mega-cta::after { content: "→"; transition: transform var(--t-fast); }
.mega-feature:hover .mega-cta::after { transform: translateX(4px); }

/* ═════════════════════════════════════════════════════════
   HERO — Sovereign Architect display
   ═════════════════════════════════════════════════════════ */
.hero {
  /* ─── REBUILD v5 — Wix two-point fluid-gradient, exact ────────
     Wix Strip Background uses a two-point radial fluid-gradient system
     over a base canvas. Each "point" has color, opacity, size %, spread %.
     Founder-supplied settings:
       BASE canvas:    #FFDDBF  (peach — not white; what shows when both
                                  points fully feather out)
       ORANGE point:   #FF7900  at 100% intensity
                       size 80%, spread 50%, positioned upper-left
       WHITE point:    #FFFFFF  at 13% intensity
                       size 35%, spread 71%, positioned upper-left
     Translation:
       - "size N%" = the radial reaches N% of the container (in CSS the
         ellipse N% N% sets the gradient's max radius)
       - "spread N%" = N% of that size stays at solid color before feathering
         (in CSS the second color-stop at N% of the gradient extent)
     Both points layered as background-image (white on top), peach base
     as background-color underneath.
     Brand-spec §13.3 forbids orange-as-bg — this is explicit founder
     override per the Wix-editor screenshots. */
  position: relative;
  overflow: hidden !important;
  isolation: isolate;
  /* v16: HARD-enforced single-viewport bound. !important on all three
     height constraints + overflow:hidden so no descendant or future
     CSS regression can elongate the section. If hero ever extends past
     one screen-height again, something is overriding these — find it. */
  /* v18i — account for the fixed util-bar + site-header stack (104px total:
     28 util + 76 header). Hero now fills exactly the viewport BELOW the
     chrome, so total chrome + hero = one viewport. One scroll-tick reveals
     the next section. Applies to home AND about (both use .hero). */
  height: calc(100svh - 104px) !important;
  min-height: calc(100svh - 104px) !important;
  max-height: calc(100svh - 104px) !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(88px, 13vh, 132px) 0 clamp(28px, 4.5vh, 64px);
  background-color: var(--peach-canvas);  /* #FFDDBF base */
  background-image:
    /* White wash point — softened with extra mid stops so the white halo
       blends gradually into the orange canvas (no visible boundary). */
    radial-gradient(ellipse 42% 38% at 20% 12%,
      rgba(255, 255, 255, 0.13) 0%,
      rgba(255, 255, 255, 0.10) 45%,
      rgba(255, 255, 255, 0.05) 75%,
      rgba(255, 255, 255, 0) 100%
    ),
    /* Orange wash — v5.1 fix for the visible ring. The prior CSS used
       a hard 50%-solid → 100%-transparent feather which produced a
       circular boundary line PJ called out. Replaced with many graded
       opacity stops so the orange dissolves smoothly into the peach
       canvas. Center pushed further upper-left (5%, 15%) and ellipse
       scaled to 130%/110% so the gradient origin sits OFF the canvas,
       which hides any residual hard edge. */
    radial-gradient(ellipse 130% 110% at 5% 15%,
      #FF7900 0%,
      #FF7900 28%,
      rgba(255, 137, 30, 0.88) 42%,
      rgba(255, 156, 65, 0.65) 56%,
      rgba(255, 180, 110, 0.40) 70%,
      rgba(255, 210, 160, 0.18) 84%,
      rgba(255, 221, 191, 0) 100%
    );
  /* v15: border-bottom removed — the .hero::after gradient (180px ramp
     terminating at rgb(243, 239, 232)) handles the seam into Recognition
     with byte-identical endpoints, zero visible line. */
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  /* v4 — Wix benchmark exact: 5% opacity, NO filter (no blur, no
     grayscale, no contrast tweak). The video reads as a watermark
     texture on top of the orange canvas. */
  opacity: 0.05;
  filter: none;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* v14: bottom-fade migrated to .hero::after (longer ramp, stronger
     warm-cream landing into the Recognition canvas). This overlay is
     now a no-op layer — kept in markup for any future hero treatment. */
  background: transparent;
}

/* v17: .hero::after deleted. The 180px white-cream band was sitting
   INSIDE the hero, washing out the bottom half and reading as a "bald"
   zone. Transition logic now lives in .recognition's top gradient
   (peach-into-cream), so the hero stays solid orange/peach corner-to-
   corner and the dissolve only manifests as the user scrolls into
   Recognition. Scroll-driven, no static overlay inside the hero. */

.hero > .container {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url('assets/media/hero/hero-wordcloud-poster.jpg');
    background-size: cover;
    background-position: center;
    /* matches v4 motion-layer: 5% opacity, no filter */
    opacity: 0.05;
    filter: none;
  }
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--s-9);
  align-items: end;
}
.hero-display {
  font-family: var(--serif);
  /* v7: Cormorant Light 300 was reading wispy at viewport-display size
     (the §3.3 failure mode in v5.5 — Cormorant Light loses authority
     above 60px). Bumped to Medium 500 so the headline carries the
     "Defense-buyer pre-cognitive read." Light is retained ONLY on the
     italic subtitle below so the weight hierarchy still differentiates. */
  font-weight: 500;
  /* v16: trimmed clamp upper + margin so the headline doesn't push
     content past the hard 100svh hero cap. Line-height 1.04 keeps the
     two-line title tight without crowding the italic subtitle below. */
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin-bottom: clamp(16px, 2vh, 28px);
}
.hero-display em {
  font-style: italic;
  font-weight: 400;
  /* v5.1: --orange-deep was nearly invisible on the orange canvas. White
     for visual unity with the rest of the headline — the italic style
     itself carries the emphasis distinction. */
  color: #ffffff;
}
.hero-display .accent { color: #ffffff; }
.hero-sub {
  font-family: var(--serif);
  font-style: italic;
  /* v7: Light 300 retained here so the headline (500) → subtitle (300)
     weight hierarchy is legible. Italic carries the equity-line voice. */
  font-weight: 300;
  /* v7: subtitle was reading too small. Per founder spec: clamp(22, 2.2vw, 32) */
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.92);
  max-width: 42ch;
  /* v16: tightened so hero CTAs sit comfortably within the 100svh cap. */
  margin-bottom: clamp(20px, 3vh, 36px);
}

/* Hero eyebrow scoped white — global .eyebrow stays orange for other sections */
.hero .eyebrow {
  color: rgba(255, 255, 255, 0.82);
}
.hero .eyebrow::before { background: rgba(255, 255, 255, 0.55); }
.hero-lead {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--charcoal);
  max-width: 60ch;
  margin-bottom: var(--s-6);
}
.hero-actions {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
}

/* v14 — hero-scoped CTA inversion for high contrast on peach.
   Global .btn-primary / .btn-ghost stay as-is for other pages;
   inside .hero we flip them so neither button melts into the
   peach canvas. Primary now reads white-bg/orange-fg (the inverse
   of the global); ghost reads orange-bg/paper-border (the cousin).
   Hover states swap into stronger contrast. */
.hero .btn-primary {
  background: var(--paper);
  color: var(--orange);
  border-color: var(--orange);
}
.hero .btn-primary:hover {
  background: var(--orange);
  color: var(--paper);
  border-color: var(--orange);
}
.hero .btn-ghost {
  background: var(--orange);
  color: var(--paper);
  border-color: var(--paper);
}
.hero .btn-ghost:hover {
  background: var(--orange-deep);
  color: var(--paper);
  border-color: var(--paper);
}

/* ═════ RECOGNITION — Laurel-watermark canvas (v10) ═════════
   v10: founder rejected both prior treatments. v7 silver-tile
   read bathroom-floor; v8 ink-charcoal read law-firm. Legacy
   Wix production carries the Globee Silver Winner laurel-
   wreath tiled at low opacity across a warm cream canvas with
   the actual badges at hero scale flanking the narrative —
   that's the target. Brand-continuous with cysecin.com. */
.recognition {
  position: relative;
  /* v21: viewport-fill per founder directive 2026-05-14 (Anduril-style
     scroll-tapping cadence across the whole home). */
  min-height: 100svh;
  display: flex;
  align-items: center;
  /* v18f — top gradient COMPRESSED from 28% → 10% so the laurel band
     and Globee/CSEA badges start showing one scroll-tick from the
     hero. Top padding cut roughly in half. Resolves the "extra space"
     founder kept flagging — was ~250px of empty cream before content. */
  background:
    linear-gradient(180deg,
      var(--peach-canvas)       0%,
      rgba(255, 221, 191, 0.85) 4%,
      rgba(248, 240, 226, 0.55) 7%,
      transparent               10%),
    radial-gradient(ellipse 70% 50% at 50% 50%,
      var(--paper) 0%,
      #F3EFE8 70%,
      #ECE5D8 100%);
  padding: clamp(48px, 6vh, 88px) 0 clamp(64px, 8vh, 112px);
  border-top: none;
  border-bottom: 1px solid rgba(138, 144, 153, 0.18);
  overflow: hidden;
}

/* Repeating Globee laurel watermark — sits between the cream
   canvas and the content layer. Sub-15% opacity so it reads as
   institutional gravity, not noise. */
.recognition-watermark {
  position: absolute;
  inset: 0;
  background-image: url('assets/media/insights/awards/globee-silver.png');
  background-repeat: repeat;
  background-size: 220px auto;
  background-position: 0 0;
  /* v15: dimmed from 0.10 — was competing with the narrative copy. */
  opacity: 0.06;
  filter: grayscale(0.4) contrast(1.05);
  pointer-events: none;
  z-index: 1;
}

.recognition > .container { position: relative; z-index: 2; }

.recognition-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2.4fr minmax(180px, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.award-slot {
  margin: 0;
  text-align: center;
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(138, 144, 153, 0.30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 4px 18px rgba(26, 29, 36, 0.06);
  padding: 14px;
}
.award-slot img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.award-placeholder {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  color: var(--silver-deep);
  letter-spacing: 0.04em;
  display: none;
  padding: 0 12px;
  text-align: center;
}
.award-placeholder.placeholder-visible { display: block; }

.recognition-narrative { text-align: center; }
.recognition-eyebrow { color: var(--silver-deep); }
.recognition-eyebrow::before { background: var(--silver-deep); }

.recognition-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--charcoal);
  margin: 12px 0 18px;
}
.recognition-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--silver-deep);
}
.recognition-lead {
  font-family: var(--sans);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65;
  color: var(--charcoal);
  max-width: 56ch;
  margin: 0 auto var(--s-5);
}
.recognition-lead strong { font-weight: 600; }

.recognition-awards {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 64ch;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.recognition-awards li {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--charcoal);
  padding-left: 18px;
  position: relative;
}
.recognition-awards li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--silver-deep);
  background: rgba(192, 197, 205, 0.30);
  transform: rotate(45deg);
}
.recognition-awards strong { font-weight: 600; }

@media (max-width: 900px) {
  .recognition-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .award-slot { max-width: 180px; margin: 0 auto; }
  .recognition-watermark { background-size: 160px auto; opacity: 0.08; }
}

/* ═════ ENGAGEMENT PROVENANCE — dark charcoal register (v18) ═════
   v18: paper-white narrative replaced with charcoal/federal register.
   Two-column grid: Cormorant italic headline + prose on the left, 4
   credential cards on the right with orange small-caps eyebrows and
   monospace meta lines. Defense-buyer gravity, not consulting-paper. */
.container-narrow { max-width: 880px; }

.provenance.provenance-dark {
  background: linear-gradient(180deg, #1A1D24 0%, #14171D 100%);
  min-height: 100svh;                                     /* v20: fill viewport like hero — authoritative dark filler */
  padding: clamp(96px, 12vh, 160px) 0;
  color: var(--paper);
  border-top: 1px solid rgba(247, 148, 29, 0.12);
  border-bottom: 1px solid rgba(247, 148, 29, 0.12);
  position: relative;                                     /* anchor for brain ornament */
  display: flex;
  align-items: center;                                    /* center content vertically inside the tall canvas */
  overflow: hidden;                                       /* crop brain ornament on the left edge */
}

/* v23: brain ornament — REAL canonical CysecIn shield-and-brain mark
   (assets/icons/cysecin-mark-canonical.svg, 16 paths, mixed stroke +
   fill), clip-path-wiped on scroll via ScrollTrigger. Mounted oversized
   and aggressively cropped left so only the right portion of the mark
   peeks into the section. NO opacity fade, NO blur per founder
   directive — discipline by mix-blend-mode (screen on dark canvas
   produces a warm amber outline that's in evidence, not harsh) plus
   color tempering via blend math. The clip-path inset animates from
   100% (bottom) to 0% as the section scrolls into view — the mark
   "builds itself" top-to-bottom on scroll. */
.provenance-brain {
  position: absolute;
  top: 50%;
  /* P22 fix (v30): inlined the SVG (was <img>), made it bigger so it bleeds
     off the section's top/bottom frame, and scroll-drives a stroke-draw on
     all 16 paths as the section enters the viewport. The result: outer
     top-down clip reveal + inner intricate pattern draw + ambient breathe
     pulse all running together. The brain is forming itself as you scroll. */
  left: clamp(-180px, -9vw, -60px);
  height: clamp(620px, 110vh, 1100px);
  width: auto;
  aspect-ratio: 1 / 1;
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  mix-blend-mode: normal;
  opacity: 0.42;
  /* SVG element now — drop the filter, color the paths from CSS instead.
     Keeps the strokes crisp instead of blurring through a grayscale matrix. */
  clip-path: inset(0 0 100% 0);
  animation: brain-breathe 6s ease-in-out 2s infinite;
}
/* All 16 paths inside the brain — grey, semi-transparent, stroke-draw on scroll.
   pathLength="1" on every <path> normalizes the draw so the longest curl and
   the shortest segment finish at the same scroll progress. */
.provenance-brain path {
  fill: none;
  stroke: #8B95A3;
  stroke-opacity: 0.85;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: brain-draw 3.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  /* Modern browsers: tie the draw to scroll position so the brain assembles
     as the user scrolls through the section. Older browsers (no scroll-driven
     animation support) gracefully fall back to time-based draw via the
     duration above. */
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}
/* Stagger the 16 paths so the brain assembles in waves instead of all at
   once — gives the "intricate inner pattern forming" feel the founder asked
   for. The major outer arcs draw first, then the inner curls fill in. */
.provenance-brain path:nth-child(1)  { animation-delay: 0s;     }
.provenance-brain path:nth-child(2)  { animation-delay: 0.08s; }
.provenance-brain path:nth-child(3)  { animation-delay: 0.16s; }
.provenance-brain path:nth-child(4)  { animation-delay: 0.22s; }
.provenance-brain path:nth-child(5)  { animation-delay: 0.30s; }
.provenance-brain path:nth-child(6)  { animation-delay: 0.38s; }
.provenance-brain path:nth-child(7)  { animation-delay: 0.46s; }
.provenance-brain path:nth-child(8)  { animation-delay: 0.54s; }
.provenance-brain path:nth-child(9)  { animation-delay: 0.62s; }
.provenance-brain path:nth-child(10) { animation-delay: 0.70s; }
.provenance-brain path:nth-child(11) { animation-delay: 0.78s; }
.provenance-brain path:nth-child(12) { animation-delay: 0.86s; }
.provenance-brain path:nth-child(13) { animation-delay: 0.94s; }
.provenance-brain path:nth-child(14) { animation-delay: 1.02s; }
.provenance-brain path:nth-child(15) { animation-delay: 1.10s; }
.provenance-brain path:nth-child(16) { animation-delay: 1.18s; }
@keyframes brain-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes brain-breathe {
  /* Subtle living-ornament pulse: opacity + scale breathe together after the
     scroll-draw completes. Slow enough to feel ambient, not distracting. */
  0%, 100% { opacity: 0.32; transform: translateY(-50%) scale(1);     }
  50%      { opacity: 0.48; transform: translateY(-50%) scale(1.015); }
}
@media (prefers-reduced-motion: reduce) {
  /* Reduced-motion: skip the scroll-wipe, the breathe, AND the path stroke-
     draw. Show the brain fully assembled + static. script.js also bails out
     of the ScrollTrigger setup when this media query matches. */
  .provenance-brain {
    clip-path: inset(0 0 0 0) !important;
    animation: none !important;
  }
  .provenance-brain path {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }
}
.provenance.provenance-dark > .container {
  position: relative;
  z-index: 1;
  width: 100%;                                            /* span full container inside flex parent */
}

.provenance-dark .provenance-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}
.provenance-dark .provenance-eyebrow {
  color: var(--orange);
  margin-bottom: 24px;
}
.provenance-dark .provenance-eyebrow::before { background: var(--orange); }
.provenance-dark .provenance-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5.4vw, 86px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--paper);
  margin: 0 0 36px;
}
.provenance-dark .provenance-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--orange-soft);
}
.provenance-dark .provenance-prose p {
  font-family: var(--sans);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.7;
  color: rgba(250, 250, 250, 0.72);
  max-width: 56ch;
  margin: 0;
}
.provenance-dark .provenance-credentials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(247, 148, 29, 0.18);
  border: 1px solid rgba(247, 148, 29, 0.18);
}
.provenance-dark .cred-card {
  background: #1A1D24;
  padding: clamp(24px, 2.5vw, 40px);
  transition: background var(--t-fast);
}
.provenance-dark .cred-card:hover {
  background: #20242C;
}
.provenance-dark .cred-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--orange-soft);
  margin: 0 0 14px;
}
.provenance-dark .cred-value {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.15;
  color: var(--paper);
  margin: 0 0 12px;
}
.provenance-dark .cred-meta {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--orange-soft);
  margin: 0;
}
@media (max-width: 900px) {
  .provenance-dark .provenance-grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .provenance-dark .provenance-credentials { grid-template-columns: 1fr; }
}

/* Recognition + Provenance responsive */
@media (max-width: 900px) {
  .recognition-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .award-slot { max-width: 160px; margin: 0 auto; }
}

/* ═════ POSTURE STRIP — v6: relocated from old hero-meta ═════
   Four-up horizontal credibility strip sitting directly under the hero.
   Each item: orange accent border-left, eyebrow label, Cormorant value,
   slate-gray meta line. Matches the proof-bar typographic register. */
.posture-strip {
  background: var(--paper);
  padding: var(--s-7) 0 var(--s-7);
  border-bottom: 1px solid var(--line);
}
.posture-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
  align-items: start;
}
.posture-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-left: 2px solid var(--orange);
  padding-left: var(--s-5);
}
.posture-item .p-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate);
}
.posture-item .p-value {
  font-family: var(--serif);
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.22;
}
.posture-item .p-meta {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--slate);
  line-height: 1.55;
  margin-top: 2px;
}

/* ═════ HERO LEDE — v6: relocated differentiator paragraph ═════
   Tight intro section between the posture strip and the proof bar.
   Holds the "Most vendors sell tools..." differentiator. */
.hero-lede {
  background: var(--paper-2);
  padding: var(--s-8) 0;
  border-bottom: 1px solid var(--line);
}
.hero-lede .lede-text {
  font-family: var(--sans);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
  color: var(--charcoal);
  max-width: 78ch;
  margin: 0 auto;
  text-align: left;
}
.hero-lede .lede-text strong {
  font-weight: 600;
  color: var(--charcoal);
}

/* Hero metadata column (legacy — kept for back-compat with other pages) */
.hero-meta {
  border-left: 1px solid var(--line);
  padding-left: var(--s-7);
  padding-top: var(--s-4);
}
.hero-meta dl { display: grid; grid-template-columns: 1fr; gap: var(--s-5); }
.hero-meta dt {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 4px;
}
.hero-meta dd {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.3;
}
.hero-meta dd small {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--slate);
  font-weight: 400;
  letter-spacing: 0;
  margin-top: 2px;
}

/* ── Buttons (sovereign discipline) ───────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 16px 28px;
  border: 1px solid currentColor;
  transition: all var(--t-mid) var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
/* Scroll-down anchor buttons get a vertical arrow instead of the default →,
   so a CTA like "Firm Posture ↓" reads as "this scrolls down on this page"
   rather than "this navigates somewhere else". */
.btn.btn-scroll-down::after { content: "↓"; }
.btn.btn-scroll-down:hover::after { transform: translateY(3px); }

.btn::after {
  content: "→";
  transition: transform var(--t-mid) var(--ease);
}
.btn:hover::after { transform: translateX(5px); }
.btn-primary { background: var(--orange); color: var(--paper); border-color: var(--orange); }
.btn-primary:hover { background: var(--orange-deep); border-color: var(--orange-deep); }
.btn-ink { background: var(--charcoal); color: var(--paper); border-color: var(--charcoal); }
.btn-ink:hover { background: var(--ink); border-color: var(--ink); }
.btn-ghost { background: transparent; color: var(--charcoal); border-color: var(--charcoal); }
.btn-ghost:hover { background: var(--charcoal); color: var(--paper); }
.btn-ghost-inv { background: transparent; color: var(--paper); border-color: rgba(250, 250, 250, 0.5); }
.btn-ghost-inv:hover { background: var(--paper); color: var(--charcoal); border-color: var(--paper); }

/* ═════════════════════════════════════════════════════════
   PROOF BAR — credential strip
   ═════════════════════════════════════════════════════════ */
.proof-bar {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s-6) 0;
}
.proof-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-5);
  align-items: center;
}
.proof-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 0 var(--s-3);
  border-left: 1px solid var(--line-2);
}
.proof-item:first-child { padding-left: 0; border-left: 0; }
.proof-item .p-label {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate);
}
.proof-item .p-value {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--charcoal);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.proof-item .p-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--slate);
  letter-spacing: 0.05em;
}

/* ═════════════════════════════════════════════════════════
   CRUCIBLE BLOCK — the anchor narrative
   ═════════════════════════════════════════════════════════ */
.crucible {
  background: var(--charcoal);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.crucible::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 30%, rgba(247, 148, 29, 0.06), transparent 50%);
  pointer-events: none;
}
.crucible-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--s-9);
  align-items: start;
  padding: var(--s-10) 0;
  position: relative;
}
.crucible h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin-bottom: var(--s-5);
}
.crucible h2 em { font-style: italic; color: var(--orange-soft); }
.crucible-lead {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: rgba(250, 250, 250, 0.72);
  max-width: 38ch;
}
.crucible-evidence {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #2A2D33;
  border: 1px solid #2A2D33;
}
.crucible-evidence > div {
  background: var(--charcoal);
  padding: var(--s-6);
}
.crucible-evidence dt {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(250, 250, 250, 0.55);
  margin-bottom: 6px;
}
.crucible-evidence dd {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--paper);
  line-height: 1.2;
  margin-bottom: 4px;
}
.crucible-evidence dd .small {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--orange-soft);
  font-weight: 400;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

/* ═════════════════════════════════════════════════════════
   PILLARS — SECURE / TRAIN / EDUCATE
   ═════════════════════════════════════════════════════════ */
.pillar-section { padding: var(--s-11) 0; position: relative; overflow: hidden; }
.pillar-section.secure { background: var(--navy); color: var(--paper); }
.pillar-section.train { background: var(--crimson); color: var(--paper); }
.pillar-section.educate { background: var(--paper); color: var(--charcoal); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.pillar-section h2, .pillar-section h3 { color: inherit; }
.pillar-section.secure h2, .pillar-section.train h2 { color: var(--paper); }
.pillar-section.educate h2 { color: var(--charcoal); }

.pillar-grid {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: var(--s-9);
  align-items: start;
}
.pillar-head .eyebrow {
  color: var(--orange-soft);
  margin-bottom: var(--s-5);
}
.pillar-section.educate .pillar-head .eyebrow { color: var(--orange-deep); }
.pillar-head .eyebrow::before { background: currentColor; }
.pillar-head h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(48px, 6.5vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  margin-bottom: var(--s-5);
}
.pillar-head .pillar-lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  opacity: 0.85;
  max-width: 30ch;
}
.pillar-section.educate .pillar-head .pillar-lead { color: var(--slate); opacity: 1; }

.pillar-body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: var(--s-6);
  max-width: 58ch;
  opacity: 0.88;
}
.pillar-section.educate .pillar-body { color: var(--charcoal); opacity: 1; }

.pillar-capabilities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(250, 250, 250, 0.15);
  margin-bottom: var(--s-6);
}
.pillar-section.educate .pillar-capabilities { background: var(--line); }
.pillar-cap {
  padding: var(--s-5) var(--s-6);
}
.pillar-section.secure .pillar-cap { background: var(--navy); }
.pillar-section.train .pillar-cap { background: var(--crimson); }
.pillar-section.educate .pillar-cap { background: var(--paper); }
.pillar-cap .cap-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--orange-soft);
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.pillar-section.educate .pillar-cap .cap-num { color: var(--orange-deep); }
.pillar-cap .cap-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 8px;
  line-height: 1.25;
}
.pillar-cap .cap-desc {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.78;
}
.pillar-section.educate .pillar-cap .cap-desc { opacity: 1; color: var(--slate); }

.pillar-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--orange-soft);
}
.pillar-section.educate .pillar-cta { color: var(--orange-deep); }
.pillar-cta::after { content: "→"; transition: transform var(--t-fast); }
.pillar-cta:hover::after { transform: translateX(5px); }

/* ═════════════════════════════════════════════════════════
   DOCTRINE — six load-bearing values
   ═════════════════════════════════════════════════════════ */
.doctrine-section {
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.doctrine-head {
  max-width: 800px;
  margin-bottom: var(--s-9);
}
.doctrine-head h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-4);
  color: var(--charcoal);
}
.doctrine-head h2 em { font-style: italic; color: var(--orange-deep); }
.doctrine-head p {
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.65;
  color: var(--slate);
  max-width: 60ch;
}

.doctrine-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.doctrine-item {
  background: var(--paper);
  padding: var(--s-7) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.doctrine-item .d-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--orange-deep);
  margin-bottom: 6px;
}
.doctrine-item h3 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.2;
  margin-bottom: var(--s-3);
}
.doctrine-item p {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--slate);
}

/* ═════════════════════════════════════════════════════════
   AEGIS PRODUCT FAMILY
   ═════════════════════════════════════════════════════════ */
.aegis-section {
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.aegis-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 20%, rgba(247, 148, 29, 0.04), transparent 60%);
}
.aegis-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-9);
  align-items: end;
  margin-bottom: var(--s-8);
  position: relative;
}
.aegis-head h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(48px, 6.5vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--paper);
}
.aegis-head h2 em { font-style: italic; color: var(--orange-soft); }
.aegis-head .aegis-lead {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  color: rgba(250, 250, 250, 0.65);
  max-width: 48ch;
}

.aegis-list {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid rgba(250, 250, 250, 0.16);
}
.aegis-row {
  display: grid;
  grid-template-columns: 80px 1fr 1.5fr 160px 120px;
  gap: var(--s-6);
  padding: var(--s-6) 0;
  align-items: baseline;
  border-bottom: 1px solid rgba(250, 250, 250, 0.16);
  transition: background var(--t-fast);
}
.aegis-row:hover { background: rgba(247, 148, 29, 0.04); }
.aegis-row .a-id {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--orange-soft);
  letter-spacing: 0.08em;
}
.aegis-row .a-name {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  color: var(--paper);
  line-height: 1.2;
}
.aegis-row .a-name small {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--orange-soft);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.aegis-row .a-desc {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.65;
  color: rgba(250, 250, 250, 0.7);
}
.aegis-row .a-trl {
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(250, 250, 250, 0.6);
  letter-spacing: 0.08em;
}
.aegis-row .a-status {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid currentColor;
  text-align: center;
  display: inline-block;
  align-self: start;
  justify-self: end;
}
.aegis-row .a-status.now { color: #6BE89A; border-color: rgba(107, 232, 154, 0.5); }
.aegis-row .a-status.near { color: var(--orange-soft); border-color: rgba(251, 176, 90, 0.5); }
.aegis-row .a-status.r-d { color: rgba(250, 250, 250, 0.5); border-color: rgba(250, 250, 250, 0.25); }

/* ═════════════════════════════════════════════════════════
   INDUSTRIES — sector grid
   ═════════════════════════════════════════════════════════ */
.industries-section {
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.industries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ind-tile {
  background: var(--paper);
  padding: var(--s-7) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-height: 280px;
  transition: background var(--t-mid);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.ind-tile:hover { background: var(--paper-2); }
.ind-tile::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 0;
  height: 2px;
  background: var(--orange);
  transition: width var(--t-mid) var(--ease);
}
.ind-tile:hover::after { width: 100%; }
.ind-tile .ind-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--orange-deep);
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.ind-tile .ind-cat {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate);
}
.ind-tile h3 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.15;
  margin-bottom: var(--s-3);
}
.ind-tile p {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.65;
  color: var(--slate);
  flex: 1;
}
.ind-tile .ind-cta {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--orange-deep);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--s-4);
}
.ind-tile .ind-cta::after { content: "→"; transition: transform var(--t-fast); }
.ind-tile:hover .ind-cta::after { transform: translateX(4px); }

/* ═════════════════════════════════════════════════════════
   BUYER READ — per-class positioning
   ═════════════════════════════════════════════════════════ */
.buyer-section { background: var(--paper-2); }
.buyer-head { margin-bottom: var(--s-8); max-width: 800px; }
.buyer-head h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--charcoal);
  margin-bottom: var(--s-4);
}
.buyer-head h2 em { font-style: italic; color: var(--orange-deep); }
.buyer-head p {
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.65;
  color: var(--slate);
}
.buyer-table {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}
.buyer-row {
  display: grid;
  grid-template-columns: 320px 1fr 32px;
  gap: var(--s-7);
  padding: var(--s-6) 0;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  transition: padding-left var(--t-fast);
}
.buyer-row:hover { padding-left: 8px; }
.buyer-row .b-class {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.25;
}
.buyer-row .b-class small {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--orange-deep);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.buyer-row .b-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--charcoal);
  max-width: 60ch;
}
.buyer-row .b-arrow {
  color: var(--orange-deep);
  font-size: 22px;
  text-align: right;
}

/* ═════════════════════════════════════════════════════════
   INSIGHTS — editorial cards
   ═════════════════════════════════════════════════════════ */
.insights-section {
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.insights-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-7);
  flex-wrap: wrap;
  margin-bottom: var(--s-8);
}
.insights-head h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--charcoal);
  max-width: 16ch;
}
.insights-head h2 em { font-style: italic; color: var(--orange-deep); }
.insights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}
.insight-card {
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: border-color var(--t-fast), transform var(--t-mid);
  cursor: pointer;
}
.insight-card:hover { border-color: var(--charcoal); transform: translateY(-4px); }
.insight-card .ic-img {
  height: 200px;
  background: var(--charcoal);
  position: relative;
  overflow: hidden;
}
.insight-card.navy .ic-img { background: var(--navy); }
.insight-card.crimson .ic-img { background: var(--crimson); }
.insight-card.ink .ic-img { background: var(--ink); }
.insight-card .ic-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(247, 148, 29, 0.15), transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(250, 250, 250, 0.1), transparent 50%);
}
.insight-card .ic-cat {
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(0, 0, 0, 0.4);
  padding: 6px 10px;
  z-index: 1;
}
.insight-card .ic-body {
  padding: var(--s-5) var(--s-5) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
}
.insight-card .ic-date {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--orange-deep);
  letter-spacing: 0.06em;
}
.insight-card h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.22;
}
.insight-card p {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.65;
  color: var(--slate);
  flex: 1;
}
.insight-card .ic-foot {
  display: flex;
  justify-content: space-between;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
}
.insight-card .ic-foot .ic-read { color: var(--charcoal); display: inline-flex; align-items: center; gap: 6px; }
.insight-card .ic-foot .ic-read::after { content: "→"; transition: transform var(--t-fast); }
.insight-card:hover .ic-foot .ic-read::after { transform: translateX(4px); }

/* ═════════════════════════════════════════════════════════
   FINAL CTA BAND
   ═════════════════════════════════════════════════════════ */
.final-cta {
  background: var(--ink);
  color: var(--paper);
  /* v21: viewport-fill per founder directive 2026-05-14. */
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: var(--s-11) 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
}
.final-cta > .container {
  position: relative;
  z-index: 1;
  width: 100%;
}
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 30%, rgba(247, 148, 29, 0.12), transparent 60%);
}
.final-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-9);
  align-items: end;
  position: relative;
}
.final-cta h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(48px, 6.5vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--paper);
}
.final-cta h2 em { font-style: italic; color: var(--orange-soft); }
.final-cta .final-cta-body p {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: rgba(250, 250, 250, 0.72);
  margin-bottom: var(--s-6);
  max-width: 52ch;
}
.final-cta .final-cta-actions {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
}

/* ═════════════════════════════════════════════════════════
   PAGE HERO (sub-pages)
   ═════════════════════════════════════════════════════════ */
.page-hero {
  background: var(--paper);
  padding: var(--s-10) 0 var(--s-9);
  border-bottom: 1px solid var(--line);
}
.page-hero .eyebrow { margin-bottom: var(--s-6); }
.page-hero h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(48px, 7vw, 112px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--charcoal);
  margin-bottom: var(--s-5);
  max-width: 14ch;
}
.page-hero h1 em { font-style: italic; color: var(--orange-deep); }
.page-hero p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--slate);
  max-width: 60ch;
  line-height: 1.4;
}

/* ═════════════════════════════════════════════════════════
   ARTICLE / LONG-FORM
   ═════════════════════════════════════════════════════════ */
.article {
  max-width: 720px;
  margin: 0 auto;
}
.article h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 36px;
  margin-top: var(--s-8);
  margin-bottom: var(--s-5);
  color: var(--charcoal);
}
.article h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  margin-top: var(--s-6);
  margin-bottom: var(--s-3);
  color: var(--charcoal);
}
.article p {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
  margin-bottom: var(--s-4);
  color: var(--charcoal);
}
.article p:first-of-type::first-letter {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 72px;
  line-height: 0.85;
  float: left;
  padding-right: 8px;
  padding-top: 6px;
  color: var(--orange-deep);
}
.article blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1.45;
  color: var(--charcoal);
  border-left: 3px solid var(--orange);
  padding-left: var(--s-5);
  margin: var(--s-6) 0;
  max-width: 56ch;
}

/* ═════════════════════════════════════════════════════════
   CONTACT FORM
   ═════════════════════════════════════════════════════════ */
.contact-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--s-9);
  align-items: start;
}
.contact-form {
  display: grid;
  gap: var(--s-4);
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: var(--s-7);
}
.contact-form label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate);
  display: block;
  margin-bottom: 6px;
}
.contact-form input, .contact-form textarea, .contact-form select {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--charcoal);
  background: var(--paper);
  border: 1px solid var(--line-2);
  transition: border-color var(--t-fast);
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
  outline: 0;
  border-color: var(--orange);
}
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.contact-form button[type="submit"] {
  background: var(--charcoal);
  color: var(--paper);
  padding: 14px 28px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  width: max-content;
  transition: background var(--t-fast);
  border: 0;
}
.contact-form button[type="submit"]:hover { background: var(--ink); }
.contact-info {
  border-left: 1px solid var(--line);
  padding-left: var(--s-7);
}
.contact-info h3 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 500;
  margin-bottom: var(--s-5);
  color: var(--charcoal);
}
.contact-info dl { display: grid; gap: var(--s-5); }
.contact-info dt {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 4px;
}
.contact-info dd {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--charcoal);
  line-height: 1.4;
}
.contact-info dd a { color: var(--orange-deep); }

/* ═════════════════════════════════════════════════════════
   MEGA FOOTER
   ═════════════════════════════════════════════════════════ */
.mega-footer {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-10) 0 var(--s-5);
  position: relative;
  border-top: 4px solid var(--orange);
}
.mega-footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: var(--s-7);
  padding-bottom: var(--s-8);
  border-bottom: 1px solid rgba(250, 250, 250, 0.12);
}
.mf-brand .brand-word { color: var(--paper); }
.mf-brand .brand-tag { color: rgba(250, 250, 250, 0.55); }
.mf-mission {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(250, 250, 250, 0.7);
  margin-top: var(--s-4);
  max-width: 38ch;
}
.mf-news {
  margin-top: var(--s-5);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mf-news input {
  flex: 1;
  min-width: 140px;
  padding: 11px 14px;
  border: 1px solid rgba(250, 250, 250, 0.16);
  background: transparent;
  color: var(--paper);
  font-family: var(--sans);
  font-size: 13px;
}
.mf-news input::placeholder { color: rgba(250, 250, 250, 0.4); }
.mf-news button {
  padding: 11px 18px;
  background: var(--orange);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.mf-news button:hover { background: var(--orange-deep); }

.mf-col h5 {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange-soft);
  margin-bottom: var(--s-4);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(250, 250, 250, 0.12);
}
.mf-col ul { list-style: none; }
.mf-col li { margin-bottom: 10px; }
.mf-col a {
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(250, 250, 250, 0.72);
  transition: color var(--t-fast);
}
.mf-col a:hover { color: var(--orange-soft); }
.mf-col .mf-addr {
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(250, 250, 250, 0.72);
  line-height: 1.7;
  margin-top: var(--s-4);
}

.mega-footer-mid {
  padding: var(--s-5) 0;
  border-bottom: 1px solid rgba(250, 250, 250, 0.12);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-7);
  align-items: center;
}
.mf-badges {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.mf-badge {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(250, 250, 250, 0.65);
  padding: 6px 12px;
  border: 1px solid rgba(250, 250, 250, 0.18);
}
.mf-social { display: flex; gap: 12px; justify-content: center; }
.mf-social a {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(250, 250, 250, 0.18);
  color: var(--paper);
  transition: background var(--t-fast), color var(--t-fast);
}
.mf-social a:hover { background: var(--orange); color: var(--paper); border-color: var(--orange); }
.mf-region {
  font-family: var(--sans);
  font-size: 12px;
  color: rgba(250, 250, 250, 0.72);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mf-region select {
  background: transparent;
  border: 1px solid rgba(250, 250, 250, 0.18);
  color: var(--paper);
  font: inherit;
  padding: 6px 10px;
  cursor: pointer;
}

.mega-footer-bottom {
  padding-top: var(--s-5);
  display: flex;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: 11px;
  color: rgba(250, 250, 250, 0.4);
  letter-spacing: 0.04em;
}
.mf-legal { display: flex; gap: var(--s-5); flex-wrap: wrap; }
.mf-legal a { color: rgba(250, 250, 250, 0.55); }
.mf-legal a:hover { color: var(--orange-soft); }

/* ═════════════════════════════════════════════════════════
   RESPONSIVE
   ═════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .hero-grid, .crucible-grid, .pillar-grid, .aegis-head, .final-cta-grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .hero-meta { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: var(--s-6); }
  .proof-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-5) var(--s-4); }
  .crucible-evidence { grid-template-columns: 1fr; }
  .pillar-capabilities, .doctrine-grid, .industries-grid, .insights-grid { grid-template-columns: 1fr 1fr; }
  .mega-footer-top { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .mf-brand { grid-column: span 2; }
  .mega-footer-mid { grid-template-columns: 1fr; text-align: center; gap: var(--s-4); }
  .mf-social, .mf-badges, .mf-region { justify-content: center; }
  .aegis-row { grid-template-columns: 60px 1fr; gap: var(--s-3); }
  .aegis-row .a-desc, .aegis-row .a-trl, .aegis-row .a-status { grid-column: 2; }
  .buyer-row { grid-template-columns: 1fr; gap: var(--s-3); }
  .buyer-row .b-arrow { display: none; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-info { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: var(--s-7); }
}

@media (max-width: 720px) {
  .nav { display: none; }
  .nav.open {
    position: fixed;
    inset: 80px 0 0 0;
    background: var(--paper);
    flex-direction: column;
    align-items: stretch;
    padding: var(--s-5);
    gap: 0;
    overflow-y: auto;
    border-top: 1px solid var(--line);
    z-index: 50;
    display: flex;
  }
  .nav.open .nav-item { display: block; }
  .nav.open .nav-link { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
  .menu-toggle { display: inline-flex; }
  .util-left { display: none; }
  .pillar-capabilities, .doctrine-grid, .industries-grid, .insights-grid { grid-template-columns: 1fr; }
  .proof-grid { grid-template-columns: 1fr 1fr; }
  .proof-item { border-left: 0; padding-left: 0; }
  .mega-footer-top { grid-template-columns: 1fr; }
  .mf-brand { grid-column: span 1; }
  .hero-display, .crucible h2, .pillar-head h2, .aegis-head h2, .doctrine-head h2, .buyer-head h2, .insights-head h2, .final-cta h2, .page-hero h1 { font-size: clamp(40px, 12vw, 64px); }
}

/* ═════════════════════════════════════════════════════════
   SCROLL PROGRESS BAR — top of viewport
   ═════════════════════════════════════════════════════════ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--orange) 0%, var(--orange-deep) 100%);
  z-index: 90;
  transition: width 80ms linear;
  pointer-events: none;
}

/* ═════════════════════════════════════════════════════════
   SCROLL-SPY · in-page section navigation
   ═════════════════════════════════════════════════════════ */
.scroll-spy {
  /* v3.2: switched from position:sticky to fixed. Sticky still occupied
     layout space when invisible (opacity:0), which produced a paper-white
     gap between the site-header and the hero. Fixed removes the element
     from document flow entirely — bar appears only when JS adds .active,
     no gap in the chrome-to-hero transition. */
  position: fixed;
  top: 104px; /* v18h: util 28 + header 76 (exact) — flush with header bottom, no gap */
  left: 0;
  right: 0;
  z-index: 55;
  background: rgba(250, 250, 250, 0.92);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), top var(--t-mid) var(--ease);
}
.scroll-spy.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* v18h — scrolled state: util-bar hidden (transform: translateY(-100%)) +
   header.scrolled (height: 60, top: 0) → header bottom sits at exactly 60px.
   Scroll-spy flushes there. JS toggles util.hidden + header.scrolled together
   at y > 80, so the single combined selector covers all scrolled cases. */
.util-bar.hidden ~ .site-header.scrolled ~ .scroll-spy,
.site-header.scrolled ~ .scroll-spy {
  top: 60px;
}

.spy-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: 0 var(--s-7);
  height: 52px;
  overflow-x: auto;
  scrollbar-width: none;
}
.spy-inner::-webkit-scrollbar { display: none; }
.spy-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--orange-deep);
  white-space: nowrap;
  padding-right: var(--s-4);
  border-right: 1px solid var(--line);
}
.spy-link {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--charcoal);
  white-space: nowrap;
  padding: 6px 0;
  position: relative;
  cursor: pointer;
  transition: color var(--t-fast);
}
.spy-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-mid) var(--ease);
}
.spy-link:hover, .spy-link.active { color: var(--orange-deep); }
.spy-link.active::after { transform: scaleX(1); }

/* v15: .spy-cta obliterated — scroll-spy is for in-page navigation
   only; the engage-pill (bottom-right) covers floating CTA needs. */

/* ═════════════════════════════════════════════════════════
   BACK-TO-TOP · floating circular pill
   ═════════════════════════════════════════════════════════ */
.back-to-top {
  position: fixed;
  /* v14: stacked above .engage-pill (which now sits at bottom-right) */
  bottom: 100px;
  right: 32px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--charcoal);
  color: var(--paper);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), background var(--t-fast);
  z-index: 80;
  cursor: pointer;
  border: 0;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.25);
}
.back-to-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover { background: var(--orange); }
.back-to-top svg { width: 18px; height: 18px; }

/* ═════════════════════════════════════════════════════════
   FLOATING ENGAGEMENT HELPER · contextual pill bottom-left
   ═════════════════════════════════════════════════════════ */
.engage-pill {
  position: fixed;
  /* v14: moved bottom-left → bottom-right per founder review. The
     back-to-top stacks above this at bottom: 100px. */
  bottom: 32px;
  right: 32px;
  left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--orange);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 12px 22px;
  border-radius: 999px;
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), background var(--t-fast);
  box-shadow: 0 12px 32px -8px rgba(216, 125, 16, 0.5);
}
.engage-pill.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.engage-pill:hover { background: var(--orange-deep); color: var(--paper); }
.engage-pill::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--paper);
  animation: pulse 2.4s ease-in-out infinite;
}

/* Hide scroll-spy + floating helpers on mobile */
@media (max-width: 900px) {
  .scroll-spy { display: none; }
  .back-to-top, .engage-pill { width: 44px; height: 44px; }
  /* v14: stacked on the right edge — pill (primary) at bottom, back-to-top above */
  .engage-pill { right: 18px; left: auto; bottom: 18px; padding: 10px 16px; font-size: 11px; }
  .back-to-top { right: 18px; bottom: 78px; }
  .engage-pill span.engage-text { display: none; }
  /* Posture strip — collapse to 2 columns on tablet, 1 on mobile */
  .posture-grid { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
}
@media (max-width: 600px) {
  .posture-grid { grid-template-columns: 1fr; }
}

/* ═════════════════════════════════════════════════════════
   CARD HOVER POLISH — refined apex-tier interaction
   ═════════════════════════════════════════════════════════ */
.ind-tile { transition: background var(--t-mid), padding-left var(--t-mid); }
.ind-tile:hover { padding-left: calc(var(--s-6) + 4px); }
.insight-card { transition: transform var(--t-mid) var(--ease), border-color var(--t-fast), box-shadow var(--t-mid); }
.insight-card:hover { box-shadow: 0 18px 42px -12px rgba(26, 29, 36, 0.18); }
.doctrine-item { transition: background var(--t-fast); }
.doctrine-item:hover { background: var(--paper-2); }
.proof-item { transition: padding-left var(--t-fast); }
.proof-item:hover { padding-left: calc(var(--s-3) + 4px); }
.aegis-row { transition: background var(--t-fast), padding-left var(--t-fast); }
.aegis-row:hover { padding-left: 8px; }

/* Section anchor scroll-offset (so sticky bars don't hide section heads) */
.hero, [id] { scroll-margin-top: 180px; }

/* ═════════════════════════════════════════════════════════
   v18 · ABOUT PAGE — Phase B
   Brand Origin (SVG morph) · Six Values rail (.value-card)
   Three Pillars summary tiles · Drama-gradient Final CTA
   ═════════════════════════════════════════════════════════ */

/* ── Values rail · re-uses .pillar-side-scroll with .value-card ── */
.values-rail.pillar-section { background: var(--paper); color: var(--charcoal); }
.values-rail .pillar-head h2 { color: var(--charcoal); }
.values-rail .pillar-head h2 em { color: var(--orange-deep); font-style: italic; font-weight: 400; }
.values-rail .pillar-head .eyebrow { color: var(--orange-deep); }
.values-rail .pillar-head .eyebrow::before { background: var(--orange-deep); }

.value-card {
  background: var(--paper-2);
  border-left: 3px solid var(--orange);
  padding: clamp(28px, 2.5vw, 40px);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.value-card .value-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(38px, 3.4vw, 56px);
  line-height: 1;
  color: var(--orange);
}
.value-card h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 1.8vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--charcoal);
  margin: 0;
}
.value-card p {
  font-family: var(--sans);
  font-size: clamp(13px, 0.95vw, 15px);
  line-height: 1.6;
  color: var(--charcoal);
  opacity: 0.86;
  margin: 0;
}
/* Sizing in horizontal mode — bigger than .pillar-cap to carry the
   value statement weight without crowding the descriptive paragraph. */
html.js-scroll-active .pillar-track .value-card { width: clamp(320px, 30vw, 420px); }

/* ── Three Pillars summary · tile grid ── */
.pillars-summary {
  padding: clamp(96px, 12vh, 160px) 0;
  background: var(--paper);
}
.pillars-summary .pillars-head { margin-bottom: var(--s-8); }
.pillars-summary .pillars-head h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--charcoal);
  margin: var(--s-4) 0 0;
}
.pillars-summary .pillars-head h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--orange-deep);
}
.pillars-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
}
.pillar-tile {
  display: block;
  padding: clamp(32px, 3vw, 48px);
  text-decoration: none;
  color: var(--charcoal);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left-width: 4px;
  transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.pillar-tile-secure  { border-left-color: var(--navy); }
.pillar-tile-train   { border-left-color: var(--crimson); }
.pillar-tile-educate { border-left-color: var(--charcoal); }
.pillar-tile:hover {
  transform: translateY(-4px);
  background: var(--paper-2);
  border-color: var(--orange);
}
.pillar-tile .tile-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--orange);
}
.pillar-tile h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 3vw, 52px);
  letter-spacing: 0.04em;
  margin: 12px 0 16px;
}
.pillar-tile .tile-tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--orange-deep);
  margin: 0 0 16px;
}
.pillar-tile .tile-body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--charcoal);
  margin: 0 0 24px;
}
.pillar-tile .tile-cta {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
}
@media (max-width: 900px) {
  .pillars-summary-grid { grid-template-columns: 1fr; }
}

/* ── Final CTA · Drama gradient demonstration (home) ──
   Phase B applies the Drama register to the home Final CTA band so
   all three gradient registers (Calm hero · System about-hero · Drama
   final-cta) are visible on the live site. */
.final-cta.hero-drama {
  padding: clamp(96px, 14vh, 180px) 0;
}
.final-cta.hero-drama h2 { color: var(--paper); }
.final-cta.hero-drama h2 em { color: var(--orange-soft); }
.final-cta.hero-drama p { color: rgba(250, 250, 250, 0.85); }
.final-cta.hero-drama .eyebrow.inv { color: var(--orange-soft); }
.final-cta.hero-drama .eyebrow.inv::before { background: var(--orange-soft); }

/* ═════════════════════════════════════════════════════════
   v12 hotfix · PILLAR HORIZONTAL SIDE-SCROLL (safe-default)
   ─────────────────────────────────────────────────────────
   The default state of .pillar-pin / .pillar-track is a VERTICAL
   stack — exactly what mobile and reduce-motion users should see,
   and exactly what desktop should see if GSAP fails to load.
   Horizontal pin-and-slide engages ONLY when JS adds
   html.js-scroll-active (after gsap.matchMedia confirms desktop
   ≥1024px and prefers-reduced-motion: no-preference, AND that
   GSAP itself is actually loaded). Any failure → vertical stack.
   ═════════════════════════════════════════════════════════ */

.pillar-side-scroll {
  position: relative;
}

.pillar-pin {
  position: static;
  height: auto;
  overflow: visible;
  display: block;
}

.pillar-track {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-6);
  padding: clamp(48px, 8vh, 96px) clamp(20px, 6vw, 60px);
  width: 100%;
}

.pillar-track > * { width: 100%; }

/* OPT-IN: horizontal pin-and-slide, engaged by JS via
   html.js-scroll-active. Until that class lands, the vertical
   defaults above keep the page safe. */
html.js-scroll-active .pillar-side-scroll {
  /* Outer min-height keeps layout stable pre-pin; ScrollTrigger
     pinSpacing handles the actual scroll-distance extension. */
  min-height: 100vh;
}
html.js-scroll-active .pillar-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  /* v16: restored center alignment — the BIG H2 (Fix 2 below) sits in
     the visual center of the viewport for the apex-prime register. The
     v15 flex-start+padding hack was breaking the magic. */
  align-items: center;
  padding-top: 0;
}
html.js-scroll-active .pillar-track {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: clamp(48px, 6vw, 120px);
  /* v14: split padding so the right side carries a 60vw travel
     buffer — last item (CTA) reaches viewport center before the
     pin releases instead of right-aligning at the very edge. */
  padding: clamp(60px, 8vh, 120px) 0 clamp(60px, 8vh, 120px) clamp(48px, 8vw, 120px);
  padding-right: 60vw;
  width: max-content;
  will-change: transform;
}
html.js-scroll-active .pillar-track > * {
  flex-shrink: 0;
  width: auto;
  align-self: center;
}
html.js-scroll-active .pillar-track .pillar-head      { width: clamp(440px, 44vw, 680px); }
html.js-scroll-active .pillar-track .pillar-body-wrap { width: clamp(380px, 38vw, 560px); }
html.js-scroll-active .pillar-track .pillar-cap       { width: clamp(280px, 26vw, 360px); }
html.js-scroll-active .pillar-track .pillar-cta-wrap  { width: auto; padding: 0 clamp(24px, 4vw, 48px); }

/* v15 — pillar typography rescaled for horizontal-scroll mode.
   The v8 .pillar-head h2 / .pillar-lead sizes are tuned for full-page
   vertical layout. In horizontal mode they overflow the 100svh fold;
   founder can't read the lead. Scope down inside .js-scroll-active so
   the entire head column + body + caps fit cleanly inside one viewport. */
/* v16 — BIG pillar titles restored. The v15 scale-down (clamp 32-54px)
   killed the apex-prime register; H2 is back to clamp(56-110px) so
   "The commercial engine." reads as a HUGE Cormorant statement. Lead +
   body + caps stay smaller so the column still fits inside the
   centered viewport. */
html.js-scroll-active .pillar-track .pillar-head .eyebrow {
  margin-bottom: 14px;
  font-size: 12px;
  letter-spacing: 0.24em;
}
html.js-scroll-active .pillar-track .pillar-head h2 {
  font-size: clamp(56px, 6.8vw, 110px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin: 16px 0 24px;
  font-weight: 500;
}
/* v17: .pillar-lead relocated from .pillar-head to .pillar-body-wrap.
   Now sits ABOVE .pillar-body as the opener of the body card, separated
   by a thin hairline. The head column is left purely apex-statement:
   eyebrow + BIG Cormorant H2, nothing else. */
html.js-scroll-active .pillar-track .pillar-body-wrap .pillar-lead {
  font-size: clamp(16px, 1.25vw, 21px);
  line-height: 1.4;
  font-style: italic;
  font-weight: 300;
  margin-bottom: clamp(20px, 2.5vh, 32px);
  padding-bottom: clamp(16px, 2vh, 24px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  opacity: 0.95;
}
/* EDUCATE pillar — paper canvas, darker separator */
.pillar-section.educate.pillar-side-scroll .pillar-body-wrap .pillar-lead {
  border-bottom-color: rgba(26, 29, 36, 0.18);
}
html.js-scroll-active .pillar-track .pillar-body-wrap .pillar-body {
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.55;
}
html.js-scroll-active .pillar-track .pillar-cap {
  padding: clamp(20px, 2vw, 28px);
}
html.js-scroll-active .pillar-track .pillar-cap .cap-num {
  font-size: 11px;
  letter-spacing: 0.18em;
  margin-bottom: 10px;
}
html.js-scroll-active .pillar-track .pillar-cap .cap-title {
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.18;
  margin-bottom: 10px;
}
html.js-scroll-active .pillar-track .pillar-cap .cap-desc {
  font-size: clamp(13px, 0.95vw, 15px);
  line-height: 1.55;
}