/* ==========================================================
   Brightstead Technologies, Inc. — Brand Design System
   v6 redesign · Avenir Next (headings + italics) + Cardo (body)
   Single dark scheme: blue-charcoal everywhere, tangaroa only on hero
   ========================================================== */

:root {
  --tangaroa:        #020732;
  --chathams-blue:   #153582;
  --mariner:         #2D6DD9;
  --rock-blue:       #A5B5CF;
  --aqua-haze:       #F0F4F7;
  --blue-charcoal:   #010311;

  --tangaroa-2:      #071142;
  --tangaroa-3:      #0A1750;
  --mariner-glow:    rgba(45, 109, 217, 0.16);
  --chathams-glow:   rgba(21, 53, 130, 0.22);
  --rule-dark:       #1A2E5E;
  --rule-light:      #DCE3EC;
  --ink:             #020732;
  --muted:           #5A6A88;
  --muted-on-dark:   rgba(255, 255, 255, 0.68);
  --white:           #FFFFFF;

  --serif: var(--sans); /* Design pass: unified to the structural sans stack — no serif body. */
  --sans:  "Avenir Next", "Avenir", -apple-system, BlinkMacSystemFont,
           "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;

  --tracking-eyebrow: 0.24em;
  --tracking-button:  0.18em;

  --container: 1200px;
  --gutter:    48px;

  /* Section divider — ghostly mariner hairline, fades to edges */
  --divider-fade: linear-gradient(
    90deg,
    transparent 0%,
    rgba(45, 109, 217, 0.15) 25%,
    rgba(45, 109, 217, 0.15) 75%,
    transparent 100%
  );

  /* ── TYPE SCALE ──────────────────────────────────────────────
     Shared font-size tokens. Headings (.hero h1, .page-hero h1,
     .section-title) are intentionally NOT tokenized here. */
  --fs-eyebrow:    17px;
  --fs-pill:       15px;
  --fs-card-num:   16px;
  --fs-scroll:     12px;
  --fs-aside:      15px;
  --fs-body:       clamp(20px, 1.3vw, 25px);
  --fs-lede:       clamp(20px, 1.5vw, 27px);
  --fs-cred:       clamp(20px, 1.3vw, 25px);
  --fs-spec-body:  clamp(19px, 1.2vw, 23px);
  --fs-card-body:  clamp(19px, 1.2vw, 23px);
  --fs-subhead:    clamp(22px, 2vw, 28px);
  --fs-card-title: 26px;
  --fs-cta:        20px;
  --fs-nav-link:   18px;
  --fs-footer-head: 21px;
  --fs-footer-text: 24px;
  --fs-footer-legal: 19px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--serif);
  color: var(--white);
  background: var(--blue-charcoal);
  font-size: clamp(19px, 1.2vw, 23px);
  font-weight: 400;
  line-height: 1.65;
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* The closing-zone allows its glow + rays to overflow upward; rays are
     wider than the viewport, so clip horizontal overflow on the document. */
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
.tabular { font-variant-numeric: tabular-nums; }

/* Headings = Avenir Next sans, REGULAR weight */
h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.05;
  color: var(--white);
}

/* ============ ORPHAN PREVENTION ============
   Modern browsers (Chrome 114+, Safari 17.4+, Firefox 121+) honor these and
   automatically pull the last word up to its preceding word when a line break
   would leave a single-word last line. Verified across responsive breakpoints. */
h1, h2, h3, h4,
.section-title,
.hero h1,
.page-hero h1,
.closing h2,
.mission-lead-h3,
.door-title,
.door-sub,
.spec h4,
.buyer h4,
.proof-live h4,
.pillar h3 {
  text-wrap: balance;
}

p,
.section-lede,
.hero-sub,
.page-hero .lede,
.door-body,
.spec p,
.buyer p,
.pillar p,
.proof-card .s,
.proof-live p,
.closing p,
.footer-tag {
  text-wrap: pretty;
  /* CSS spec: ensures the last line gets at least N characters or the engine
     redistributes the break. 4 = "no single tiny word stranded alone." */
  -webkit-hyphens: manual;
          hyphens: manual;
}

/* Belt-and-braces: explicit anti-orphan helper. Use as
   <span class="nowrap">two words</span> on any heading that must never break. */
.nowrap { white-space: nowrap; }

/* ============ ITALICS — Avenir Next italic, regular weight, mariner blue ============ */
.accent,
.door-sub,
.pillar .num,
.buyer .buyer-num,
.meta-item .v .ac,
.mission-lead-h3 em {
  font-family: var(--sans);
  font-style: italic;
  font-weight: 400;
  color: var(--mariner);
}

/* ============ EDGE ELEMENTS — corner brackets + mono ticks ============ */
.corner-bracket {
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: var(--mariner);
  border-style: solid;
  pointer-events: none;
  z-index: 3;
}
.corner-bracket.tl { top: -1px; left: -1px;  border-width: 2px 0 0 2px; }
.corner-bracket.tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.corner-bracket.bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.corner-bracket.br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

.corner-tick {
  position: absolute;
  top: 36px;
  right: 32px;
  display: flex;
  gap: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--rock-blue);
  opacity: 0.85;
  pointer-events: none;
  z-index: 3;
}
.corner-tick .id { color: var(--mariner); }
.corner-tick .sep { color: rgba(165, 181, 207, 0.4); }
.proof-live .corner-tick { top: 22px; right: 24px; color: var(--rock-blue); }
.proof-live .corner-tick .id { color: var(--mariner); }
.proof-live .corner-tick .sep { color: rgba(165, 181, 207, 0.4); }

/* ============ EDGE SWEEP — 4-edge clockwise outline on hover (DOORS) ============ */
.edge-sweep {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  transition: transform 0.45s ease;
}
.edge-sweep.e-top {
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--mariner) 50%, transparent 100%);
  transform: scaleX(0); transform-origin: left;
}
.edge-sweep.e-right {
  top: 0; right: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent 0%, var(--mariner) 50%, transparent 100%);
  transform: scaleY(0); transform-origin: top;
  transition-delay: 0.12s;
}
.edge-sweep.e-bottom {
  bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--mariner) 50%, transparent 100%);
  transform: scaleX(0); transform-origin: right;
  transition-delay: 0.24s;
}
.edge-sweep.e-left {
  top: 0; left: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent 0%, var(--mariner) 50%, transparent 100%);
  transform: scaleY(0); transform-origin: bottom;
  transition-delay: 0.36s;
}
.door:hover .e-top    { transform: scaleX(1); transition-delay: 0s; }
.door:hover .e-right  { transform: scaleY(1); transition-delay: 0.12s; }
.door:hover .e-bottom { transform: scaleX(1); transition-delay: 0.24s; }
.door:hover .e-left   { transform: scaleY(1); transition-delay: 0.36s; }

/* ============ STRIPE-STYLE MOUSE GLOW — radial fill + edges + copy ============ */
.mouse-glow {
  position: relative;
  --glow-x: 50%;
  --glow-y: 50%;
  --glow-color: rgba(45, 109, 217, 0.22);
}
/* Cells sit above the container's radial-fill glow */
.mouse-glow > * { position: relative; z-index: 1; }
.mouse-glow > * > * { position: relative; z-index: 2; }
/* Decorative children that need absolute positioning (corner brackets, ticks,
   pillar/spec graphics, edge sweeps) must NOT be flipped to position:relative
   by the rule above. Restore explicit positioning + correct stacking. */
.mouse-glow > * > .corner-bracket,
.mouse-glow > * > .corner-tick,
.mouse-glow > * > .spec-graphic,
.mouse-glow > * > .pillar-graphic,
.mouse-glow > * > .edge-sweep {
  position: absolute;
}
.mouse-glow > * > .corner-bracket,
.mouse-glow > * > .corner-tick { z-index: 4; }
.mouse-glow > * > .spec-graphic,
.mouse-glow > * > .pillar-graphic { z-index: 0; }

/* Container-level radial fill that follows the cursor — Stripe "backbone" effect */
.mouse-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    560px circle at var(--glow-x) var(--glow-y),
    var(--glow-color) 0%,
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
  z-index: 0;
}
.mouse-glow:hover::after { opacity: 1; }

/* Per-cell top + bottom edge lines — light up across the whole grid on grid hover */
.mouse-glow > *::before,
.mouse-glow > *::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: radial-gradient(
    320px circle at var(--mx, 50%) 50%,
    var(--mariner) 0%,
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 3;
}
.mouse-glow > *::before { top: -1px; }
.mouse-glow > *::after  { bottom: -1px; }
.mouse-glow:hover > *::before,
.mouse-glow:hover > *::after {
  opacity: 1;
}

/* All copy in the grid goes to full white when the grid is hovered */
.mouse-glow > * p,
.mouse-glow > * .k,
.mouse-glow > * .s {
  transition: color 0.35s ease;
}
.mouse-glow:hover > * p,
.mouse-glow:hover > * .k,
.mouse-glow:hover > * .s {
  color: var(--white);
}

/* ============ NAV ============ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 22px var(--gutter);
  display: flex; justify-content: space-between; align-items: center;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, padding 0.3s ease, border-color 0.3s ease;
}
.nav.scrolled {
  background: rgba(1, 3, 17, 0.94);
  border-bottom-color: var(--rule-dark);
  padding: 14px var(--gutter);
}

.nav-brand { display: flex; align-items: center; gap: 12px; color: var(--white); }
.nav-brand img { display: block; width: auto; }
.nav-brand .logo { height: 72px; }

/* Mobile hamburger menu — hidden on desktop; shown ≤960px where .nav-links hide.
   Bars + dropdown panel use brand colors and the --fs-nav-link token. */
.nav-burger { display: none; }
.nav-mobile { display: none; }

.nav-links { display: flex; gap: 36px; align-items: center; }
.nav-links a {
  font-family: var(--sans);
  font-size: var(--fs-nav-link);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--mariner); }

.nav-cta {
  padding: 11px 22px;
  background: var(--mariner);
  color: var(--white) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: var(--tracking-button) !important;
  border-radius: 2px;
  transition: background 0.2s, transform 0.2s;
}
.nav-cta:hover { background: var(--chathams-blue); transform: translateY(-1px); }

/* ============ TYPOGRAPHY PRIMITIVES ============ */
.eyebrow,
.section-eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mariner);
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 32px;
}
.eyebrow::before,
.section-eyebrow::before {
  content: ""; width: 40px; height: 1px; background: currentColor;
}
/* Centered eyebrows get a symmetric dash on BOTH sides. Triggered automatically
   anywhere the eyebrow is set to justify-content: center (doors, architecture,
   what-you-get, and any future centered section). */
.section-eyebrow.is-centered::after,
.doors > .container > .section-eyebrow::after,
.callout > .container > .section-eyebrow::after,
.sov-capabilities > .container > .section-eyebrow::after,
.proof > .container > .section-eyebrow::after {
  content: ""; width: 40px; height: 1px; background: currentColor;
}

.section-title {
  font-family: var(--sans);
  font-size: clamp(36px, 5.2vw, 64px);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.04;
  margin-bottom: 28px;
  max-width: 960px;
  color: var(--white);
}

.section-lede {
  font-family: var(--serif);
  font-size: var(--fs-lede);
  line-height: 1.6;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  max-width: 720px;
  margin-bottom: 44px;
}
.section-lede strong { color: var(--white); font-weight: 700; }

/* ============ SECTION FRAME + DIVIDERS ============ */
section {
  padding: 76px var(--gutter);
  position: relative;
  overflow: hidden;
}
/* Barely-visible mariner hairline, fades to screen edges */
section::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--divider-fade);
  pointer-events: none;
  z-index: 4;
}
section:first-of-type::after { display: none; }

.container,
.hero-inner,
.page-hero-inner {
  max-width: var(--container);
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

/* ============ HERO ============ */
.hero {
  min-height: 100vh;
  background: var(--tangaroa);
  color: var(--white);
  display: flex; align-items: center;
  padding: 140px var(--gutter) 120px;
}

.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    /* Bright mariner pools — top-left and top-right */
    radial-gradient(ellipse 90% 70% at 20% 40%, var(--mariner-glow) 0%, transparent 70%),
    radial-gradient(ellipse 70% 60% at 80% 25%, var(--chathams-glow) 0%, transparent 70%),
    /* Deep tangaroa pool — lower-left, adds darker depth */
    radial-gradient(ellipse 65% 55% at 15% 88%, rgba(7, 17, 66, 0.85) 0%, transparent 65%),
    /* Deep chathams pool — lower-right */
    radial-gradient(ellipse 70% 60% at 88% 82%, rgba(2, 7, 50, 0.75) 0%, transparent 70%),
    /* Subtle vignette */
    radial-gradient(ellipse 130% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Layered light rays — top spotlight + multi-angle god rays */
.hero-light-rays {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    /* Top-down soft spotlight */
    radial-gradient(ellipse 900px 600px at 55% -15%,
      rgba(165, 181, 207, 0.28) 0%,
      rgba(45, 109, 217, 0.12) 30%,
      transparent 65%),
    /* Wide diagonal beam */
    linear-gradient(160deg,
      transparent 25%,
      rgba(165, 181, 207, 0.14) 38%,
      rgba(45, 109, 217, 0.12) 50%,
      rgba(165, 181, 207, 0.14) 62%,
      transparent 75%),
    /* Narrow beam */
    linear-gradient(168deg,
      transparent 38%,
      rgba(165, 181, 207, 0.08) 50%,
      transparent 62%),
    /* Wide ambient beam */
    linear-gradient(178deg,
      transparent 50%,
      rgba(45, 109, 217, 0.10) 60%,
      transparent 70%);
}

/* Scattered shapes — span the full hero, around all sides */
.hero-scatter {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.scatter {
  position: absolute;
  display: block;
  will-change: transform;
}
/* Shapes scattered around all sides. Filled and outline are interleaved
   across the hero so neither side dominates. */
.scatter-1 {                                      /* filled big — upper LEFT */
  top: 9%; left: 4%;
  width: 200px;
  rotate: -10deg;
  opacity: 0.28;
  filter:
    blur(1px)
    drop-shadow(0 0 40px rgba(45, 109, 217, 0.5))
    drop-shadow(0 18px 50px rgba(0, 0, 0, 0.5));
  animation: floatA 7.2s ease-in-out infinite;
}
.scatter-2 {                                      /* outline square — lower LEFT mid */
  bottom: 22%; left: 18%;
  width: 130px;
  rotate: 14deg;
  opacity: 0.5;
  filter:
    blur(1.5px)
    drop-shadow(0 0 38px rgba(45, 109, 217, 0.4));
  animation: floatB 6.4s ease-in-out infinite -1.2s;
}
.scatter-3 {                                      /* outline curved big — upper RIGHT */
  top: 12%; right: 5%;
  width: 220px;
  rotate: -4deg;
  opacity: 0.48;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.4))
    drop-shadow(0 0 50px rgba(45, 109, 217, 0.5))
    drop-shadow(0 0 110px rgba(45, 109, 217, 0.25));
  animation: floatC 8.6s ease-in-out infinite -2.4s;
}
.scatter-4 {                                      /* filled quarter — mid RIGHT */
  top: 38%; right: 4%;
  width: 110px;
  rotate: 22deg;
  opacity: 0.22;
  filter:
    blur(3px)
    drop-shadow(0 0 30px rgba(45, 109, 217, 0.35));
  animation: floatB 7.8s ease-in-out infinite -0.6s;
}
.scatter-5 {                                      /* outline big — far LEFT mid */
  top: 36%; left: 3%;
  width: 160px;
  rotate: 138deg;
  opacity: 0.35;
  filter:
    blur(2px)
    drop-shadow(0 0 38px rgba(45, 109, 217, 0.4));
  animation: floatA 9.4s ease-in-out infinite -3.1s;
}
.scatter-6 {                                      /* filled curved — bottom RIGHT mid */
  bottom: 18%; right: 14%;
  width: 100px;
  rotate: 175deg;
  opacity: 0.26;
  filter:
    blur(2px)
    drop-shadow(0 0 28px rgba(45, 109, 217, 0.4));
  animation: floatC 6.8s ease-in-out infinite -1.8s;
}
.scatter-7 {                                      /* filled small — top RIGHT corner */
  top: 4%; right: 30%;
  width: 90px;
  rotate: 24deg;
  opacity: 0.4;
  filter:
    blur(2px)
    drop-shadow(0 0 22px rgba(45, 109, 217, 0.4));
  animation: floatB 8.2s ease-in-out infinite -2.6s;
}
.scatter-8 {                                      /* outline quarter — bottom LEFT corner */
  bottom: 6%; left: 6%;
  width: 110px;
  rotate: -18deg;
  opacity: 0.35;
  filter:
    blur(1.5px)
    drop-shadow(0 0 32px rgba(45, 109, 217, 0.4));
  animation: floatA 7.6s ease-in-out infinite -0.9s;
}
.scatter-9 {                                      /* outline square — bottom RIGHT corner */
  bottom: 8%; right: 4%;
  width: 120px;
  rotate: 32deg;
  opacity: 0.35;
  filter:
    blur(1.5px)
    drop-shadow(0 0 32px rgba(45, 109, 217, 0.4));
  animation: floatC 8.1s ease-in-out infinite -2.0s;
}

/* Float keyframes — animate translate only so each shape's rotate stays put */
@keyframes floatA {
  0%, 100% { translate: 0 0;    }
  50%      { translate: 0 -22px; }
}
@keyframes floatB {
  0%, 100% { translate: 0 0;   }
  50%      { translate: 8px -14px; }
}
@keyframes floatC {
  0%, 100% { translate: 0 0;    }
  50%      { translate: -6px -18px; }
}

.hero-inner { width: 100%; text-align: center; }

.hero-label {
  display: inline-flex; align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--rock-blue);
  margin-bottom: 40px;
}
.hero-label .dot {
  width: 6px; height: 6px;
  background: var(--mariner);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(45, 109, 217, 0.18);
}
.hero-label .sep { color: rgba(165, 181, 207, 0.4); }

.hero h1 {
  font-family: var(--sans);
  font-size: clamp(52px, 8.6vw, 116px);
  font-weight: 400;
  letter-spacing: -0.032em;
  line-height: 0.96;
  margin-bottom: 40px;
  color: var(--white);
}

.hero-sub {
  font-family: var(--serif);
  font-size: clamp(18px, 1.5vw, 21px);
  color: rgba(255, 255, 255, 0.78);
  max-width: 660px;
  line-height: 1.55;
  margin: 0 auto 56px;
}
.hero-sub strong { color: var(--white); font-weight: 700; }

.hero-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  max-width: 1250px;
  margin: 0 auto;
  text-align: left;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(6px) saturate(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
}
.meta-item {
  padding: 28px 34px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.meta-item .k {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--rock-blue);
  margin-bottom: 12px;
}
.meta-item .v {
  font-family: var(--sans);
  font-size: 27px;
  font-weight: 400;
  color: var(--white);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.scroll-cue {
  position: absolute;
  bottom: 40px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--rock-blue);
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
  animation: bob 2.8s infinite ease-in-out;
  z-index: 3;
}
.scroll-cue::after {
  content: ""; width: 1px; height: 36px;
  background: linear-gradient(to bottom, var(--mariner), transparent);
}
@keyframes bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(8px); }
}

/* ============ WHY-WE-EXIST ============ */
.why-we-exist { background: var(--blue-charcoal); color: var(--white); }

.why-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(360px, 460px);
  gap: 64px;
  align-items: center;
}
.why-copy { max-width: 720px; }
.why-copy .section-title { max-width: 100%; }
.why-copy .section-lede { max-width: 100%; }
.why-copy .section-lede:last-child { margin-bottom: 0; }

.why-graphic {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.funnel-svg {
  width: 100%;
  height: auto;
  max-width: 460px;
  overflow: visible;
}

/* Dots — bright white core with a mariner halo so they read on dark */
.funnel-svg .fdot {
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, 1))
    drop-shadow(0 0 6px rgba(170, 200, 255, 0.95))
    drop-shadow(0 0 14px rgba(45, 109, 217, 0.7));
  animation: dotPulse 1.6s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

/* Tracers — read as a GLOW, not a solid line. Heavy bloom around each segment. */
.funnel-svg .tracers {
  filter:
    blur(0.9px)
    drop-shadow(0 0 4px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 10px rgba(220, 235, 255, 0.9))
    drop-shadow(0 0 22px rgba(125, 165, 235, 0.8))
    drop-shadow(0 0 40px rgba(45, 109, 217, 0.6));
  mix-blend-mode: screen;
}

/* Hub halo — wide, smooth, breathing. Heavy blur kills any banding. */
.funnel-svg .hub-glow {
  transform-origin: 180px 360px;
  filter: blur(10px);
  animation: hubBreathe 5s ease-in-out infinite;
}
@keyframes hubBreathe {
  0%, 100% { transform: scale(1);    opacity: 0.95; }
  50%      { transform: scale(1.10); opacity: 1; }
}

/* B mark — bright, emitting glow, sitting at the center */
.funnel-svg .hub-mark {
  filter:
    brightness(1.25)
    drop-shadow(0 0 4px rgba(255, 255, 255, 1))
    drop-shadow(0 0 14px rgba(220, 235, 255, 0.95))
    drop-shadow(0 0 34px rgba(45, 109, 217, 0.85))
    drop-shadow(0 0 70px rgba(45, 109, 217, 0.6));
}

/* ============ FOUR PILLARS ============ */
.four-pillars { background: var(--blue-charcoal); color: var(--white); }

.pillar-intro {
  margin-bottom: 36px;
  max-width: 760px;
}
.mission-lead-h3 {
  font-family: var(--sans);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--white);
}

.pillar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--rule-dark);
  border-left: 1px solid var(--rule-dark);
}
.pillar {
  padding: 36px 32px;
  border-right: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
  background: transparent;
  position: relative;
  overflow: hidden;
}
/* Graphic fills the right side of each pillar — decorative behind text. */
.pillar-graphic {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  width: 152px;
  height: 152px;
  opacity: 0.48;
  pointer-events: none;
  z-index: 0;
}

/* ----- Pillar graphic animations ----- */

/* Universal: central bright node breathes (every pillar has one). */
.pillar-graphic > circle[fill="#FFFFFF"] {
  transform-origin: center;
  transform-box: fill-box;
  animation: pgCorePulse 2.8s ease-in-out infinite;
}
@keyframes pgCorePulse {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%      { opacity: 0.55; transform: scale(1.25); }
}

/* Pillar 01 (lattice): grid dots gently breathe */
.pillar:nth-child(1) .pillar-graphic > g:first-of-type {
  animation: pgFade 4s ease-in-out infinite;
  transform-origin: 36px 36px;
  transform-box: view-box;
}
@keyframes pgFade {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

/* Pillar 02 (hash chain): the anchor (filled rect) pulses */
.pillar:nth-child(2) .pillar-graphic > rect {
  transform-origin: 36px 39px;
  transform-box: view-box;
  animation: pgAnchor 2.4s ease-in-out infinite;
}
@keyframes pgAnchor {
  0%, 100% { opacity: 1;   filter: none; }
  50%      { opacity: 0.5; filter: brightness(1.4); }
}

/* Pillar 03 (concentric rings): rings ripple outward */
.pillar:nth-child(3) .pillar-graphic > g {
  transform-origin: 36px 36px;
  transform-box: view-box;
  animation: pgRipple 4.5s ease-out infinite;
}
@keyframes pgRipple {
  0%   { transform: scale(0.55); opacity: 1;   }
  100% { transform: scale(1.08); opacity: 0.15; }
}

/* Pillar 04 (radiating curves): slow continuous rotation */
.pillar:nth-child(4) .pillar-graphic > g {
  transform-origin: 36px 36px;
  transform-box: view-box;
  animation: pgSpin 32s linear infinite;
}
@keyframes pgSpin {
  to { transform: rotate(360deg); }
}
.pillar > .num,
.pillar > h3,
.pillar > p {
  position: relative;
  z-index: 1;
  max-width: 64%;
}
.pillar .num {
  display: block;
  font-size: var(--fs-card-num);
  font-variant-numeric: tabular-nums;
  margin-bottom: 16px;
}
.pillar h3 {
  font-family: var(--sans);
  font-size: var(--fs-card-title);
  font-weight: 400;
  margin-bottom: 12px;
  letter-spacing: -0.014em;
  line-height: 1.18;
  color: var(--white);
}
.pillar p {
  font-family: var(--serif);
  font-size: var(--fs-card-body);
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.6;
}

/* ============ DOORS ============ */
.doors { background: var(--blue-charcoal); color: var(--white); }
.doors::before {
  content: "";
  position: absolute; top: 8%; right: -10%;
  width: 700px; height: 600px;
  background: radial-gradient(circle at center, var(--chathams-glow) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Centered header for "Three ways in" */
.doors > .container > .section-eyebrow {
  justify-content: center;
}
.doors > .container > .section-title,
.doors > .container > .section-lede {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.door-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-top: 56px;
}

.door {
  position: relative;
  /* Semi-transparent + backdrop blur, mirroring the nav at scroll-top */
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--rule-dark);
  padding: 36px 32px 32px;
  display: flex; flex-direction: column;
  min-height: 520px;
  transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.door:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-3px);
}

.door-num {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  color: var(--mariner);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  margin-bottom: 22px;
}
.door-title {
  font-family: var(--sans);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.04;
  margin-bottom: 10px;
  color: var(--white);
}
.door-sub {
  font-size: 18px;
  margin-bottom: 24px;
  line-height: 1.4;
  /* lighter mariner for readable contrast against the door background */
  color: #7BA3EC;
}
.door-body {
  font-family: var(--serif);
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.6;
  margin-bottom: 24px;
}
.door-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: auto;
  padding-bottom: 28px;
}
.door-tag {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 9px;
  background: rgba(45, 109, 217, 0.08);
  color: var(--mariner);
  border: 1px solid rgba(45, 109, 217, 0.28);
}
.door-cta {
  display: inline-flex; align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--white);
  padding-top: 22px;
  border-top: 1px solid var(--rule-dark);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
}
.door-cta .arrow {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--mariner);
  transition: transform 0.25s ease;
}
.door:hover .door-cta .arrow { transform: translateX(6px); }

/* ============ PROOF — dark ============ */
.proof { background: var(--blue-charcoal); color: var(--white); }

/* The radial cursor glow — contained vertically within the grid's top + bottom
   rule lines. Extends laterally past the grid (and past the screen) on left/right.
   Used by the home page "The work, in numbers" AND the sovereign-data "What you
   get" sections so the hover behaves identically across both. */
.proof .mouse-glow::after,
.sov-capabilities .mouse-glow::after {
  left: -40vw;
  right: -40vw;
  background: radial-gradient(
    620px circle at calc(var(--glow-x, 50%) + 40vw) var(--glow-y, 50%),
    rgba(45, 109, 217, 0.18) 0%,
    rgba(45, 109, 217, 0.07) 38%,
    transparent 62%
  );
}

.proof-grid {
  display: grid;
  /* minmax(0, 1fr) prevents a single oversized child (e.g. "Multi‑tenant")
     from inflating its track and shrinking the siblings. Equal-width columns. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 48px;
  border-top: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
}
.proof-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.proof-card {
  background: transparent;
  border: none;
  border-right: 1px solid var(--rule-dark);
  padding: 42px 32px 40px;
}
.proof-card:last-child { border-right: none; }

.proof-card .v {
  font-family: var(--sans);
  /* Scale the headline number so wider strings ("Multi-tenant") fit the
     minmax(0, 1fr) cell at every desktop width without inflating the column. */
  font-size: clamp(36px, 4.2vw, 56px);
  font-weight: 400;
  color: var(--mariner);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.proof-card .k {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.proof-card .s {
  font-family: var(--serif);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.55;
}
.proof-footnote {
  margin-top: 24px;
  font-family: var(--sans);
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.04em;
}

/* ============ CLOSING — copy + CTA above, B-mark with realistic halo below ============ */
/* Closing-zone wrapper — contains proof + closing + footer. overflow:hidden
   here is what keeps document height stable while letting the closing's
   glow + rays paint upward into proof and downward into the footer. */
.closing-zone {
  position: relative;
  /* overflow: hidden contains the closing-rays (130vw wide/tall) so they
     don't inflate the document height. The closing halo still bleeds UP into
     the preceding section because we put .sov-capabilities (or .proof on the
     home page) INSIDE this same .closing-zone — the halo is positioned with
     `top: -32vh`, so it extends over whatever section lives above the closing
     INSIDE this container. */
  overflow: hidden;
}
/* The closing section gets no top hairline divider — the section above flows
   visually into the closing's glow, no separator. */
.closing::after,
.closing-zone .closing::after { display: none !important; }

.closing {
  background: var(--blue-charcoal);
  color: var(--white);
  text-align: center;
  /* Tight bottom padding — the B mark already provides generous breathing room
     to the footer; an extra 170px below the mark just creates dead space. */
  padding: 130px var(--gutter) 60px;
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  position: relative;
}
/* Kill the section divider hairline at the top of this section
   so the glow can bleed seamlessly into the section above. */
.closing::after { display: none; }
/* Section-wide ambient glow — anchored on the mark. Extends ABOVE the section
   into the FAQ section seamlessly. The pseudo ends at the section bottom so it
   doesn't inflate the document height below. */
.closing::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -32vh;
  bottom: -22vh;
  transform: translateX(-50%);
  width: 200vw;
  background:
    radial-gradient(farthest-side at 50% 70%,
      rgba(45, 109, 217, 0.85) 0%,
      rgba(45, 109, 217, 0.55) 18%,
      rgba(45, 109, 217, 0.30) 38%,
      rgba(45, 109, 217, 0.14) 58%,
      rgba(45, 109, 217, 0.05) 78%,
      transparent 96%);
  filter: blur(12px);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}
.closing-content {
  position: relative;
  z-index: 2;
  max-width: 880px;
  width: 100%;
  isolation: isolate;  /* keep copy + CTA + mark cleanly above the pseudo glow */
}
/* Within closing-content, the rays inside .closing-mark-block extend visually
   outward (above the mark) and would otherwise paint on top of copy + CTA
   because they appear later in the DOM. Force the text layers above. */
.closing-content > h2,
.closing-content > p,
.closing-content > .closing-cta {
  position: relative;
  z-index: 3;
}
.closing-content > .closing-mark-block {
  z-index: 1;
}
.closing h2 {
  font-family: var(--sans);
  font-size: clamp(38px, 5.2vw, 60px);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.08;
  margin: 0 auto 24px;
  max-width: 880px;
  color: var(--white);
}
.closing p {
  font-family: var(--serif);
  font-size: 19px;
  color: rgba(255, 255, 255, 0.72);
  max-width: 600px;
  margin: 0 auto 40px;
  line-height: 1.6;
}

/* CTA */
.closing-cta {
  display: inline-flex; align-items: center;
  gap: 12px;
  padding: 18px 42px;
  background: var(--mariner);
  color: var(--white);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  border-radius: 2px;
  position: relative;
  transition: transform 0.25s, background 0.25s, box-shadow 0.25s;
  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.18),
    0 6px 22px rgba(0, 0, 0, 0.10);
}
.closing-cta:hover {
  background: var(--chathams-blue);
  transform: translateY(-2px);
  box-shadow:
    0 26px 80px rgba(0, 0, 0, 0.22),
    0 8px 28px rgba(45, 109, 217, 0.28);
}

/* B-mark — 40% smaller (192px), sitting on dark background BELOW the CTA.
   The .return-link sits between the CTA and the mark, so this margin only
   needs to leave room for that link + breathing room. */
.closing-mark-block {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 72px auto 0;
  width: 192px;
  height: 192px;
  isolation: isolate;
}
/* "Go to Homepage" sits between the main CTA and the B mark. Force block
   so it doesn't render inline next to the inline-flex CTA. */
.closing-content > .return-link {
  display: block;
  width: fit-content;
  margin: 36px auto 0;
  position: relative;
  z-index: 3;
}

/* Concentrated bright halo behind the mark — pure saturated mariner blue.
   No white core. Mark silhouette sits inside this pool of vivid blue. */
.closing-halo {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 1400px;
  height: 1400px;
  background:
    radial-gradient(circle at center, #5a9bff 0%, transparent 4%),
    radial-gradient(circle at center, #3D7DE0 0%, transparent 8%),
    radial-gradient(circle at center, #2D6DD9 0%, transparent 18%),
    radial-gradient(circle at center, rgba(45, 109, 217, 0.70) 0%, transparent 32%),
    radial-gradient(circle at center, rgba(45, 109, 217, 0.40) 0%, transparent 50%),
    radial-gradient(circle at center, rgba(45, 109, 217, 0.18) 0%, transparent 75%);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  filter: blur(4px);
  animation: haloBreathe 6s ease-in-out infinite;
}

@keyframes haloBreathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
  50%      { transform: translate(-50%, -50%) scale(1.06); opacity: 0.88; }
}

/* Rotating conic light rays — fading toward the outer perimeter via radial mask. */
.closing-rays {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 130vw;
  height: 130vw;
  -webkit-mask-image: radial-gradient(closest-side at center, black 18%, transparent 78%);
          mask-image: radial-gradient(closest-side at center, black 18%, transparent 78%);
  background:
    conic-gradient(from 0deg at center,
      transparent       0deg,
      rgba(170, 200, 255, 0.10)  6deg,
      transparent       18deg,
      transparent       60deg,
      rgba(170, 200, 255, 0.08)  66deg,
      transparent       80deg,
      transparent      120deg,
      rgba(170, 200, 255, 0.10) 126deg,
      transparent      140deg,
      transparent      180deg,
      rgba(170, 200, 255, 0.10) 186deg,
      transparent      200deg,
      transparent      240deg,
      rgba(170, 200, 255, 0.08) 246deg,
      transparent      260deg,
      transparent      300deg,
      rgba(170, 200, 255, 0.10) 306deg,
      transparent      320deg,
      transparent      360deg);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  filter: blur(20px);
  opacity: 0.9;
  animation: raysSpin 42s linear infinite;
}
@keyframes raysSpin {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* B mark — bright white, actively emitting light. Layered drop-shadows build a
   wide soft bloom that fades from white at the silhouette to faint mariner halo. */
.closing-mark {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
  filter:
    brightness(1.5)
    drop-shadow(0 0 2px rgba(255, 255, 255, 1))
    drop-shadow(0 0 8px rgba(255, 255, 255, 1))
    drop-shadow(0 0 22px rgba(235, 245, 255, 1))
    drop-shadow(0 0 50px rgba(170, 200, 255, 0.95))
    drop-shadow(0 0 110px rgba(80, 140, 235, 0.85))
    drop-shadow(0 0 200px rgba(45, 109, 217, 0.65))
    drop-shadow(0 0 360px rgba(45, 109, 217, 0.4))
    drop-shadow(0 0 520px rgba(45, 109, 217, 0.22));
}

/* ============ FOOTER ============ */
.footer {
  background: transparent;
  color: var(--white);
  padding: 48px var(--gutter) 18px;
  position: relative;
  z-index: 3;        /* sit ON TOP of the closing's glow that bleeds into here */
  isolation: isolate;
}
/* Same barely-visible divider above the footer */
.footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--divider-fade);
  pointer-events: none;
}
.footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 64px;
  position: relative;
  z-index: 5;
}
.footer-bottom { position: relative; z-index: 5; }
.footer * { position: relative; }
.footer-brand img {
  height: 32px;
  margin-bottom: 18px;
  display: block;
}
.footer-tag {
  font-family: var(--serif);
  font-size: var(--fs-footer-text);
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
  max-width: 360px;
}
.footer-tag strong {
  color: var(--rock-blue);
  font-weight: 700;
}
.footer h4 {
  font-family: var(--sans);
  font-size: var(--fs-footer-head);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mariner);
  font-weight: 700;
  margin-bottom: 18px;
}
.footer ul {
  list-style: none;
  display: flex; flex-direction: column;
  gap: 10px;
}
.footer ul a {
  font-family: var(--sans);
  font-size: var(--fs-footer-text);
  color: rgba(255, 255, 255, 0.62);
  transition: color 0.2s;
}
.footer ul a:hover { color: var(--mariner); }

.footer-bottom {
  max-width: var(--container);
  margin: 36px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--rule-dark);
  display: flex;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: var(--fs-footer-legal);
  color: var(--rock-blue);
  letter-spacing: 0.04em;
  opacity: 0.72;
}

/* ============ SOVEREIGN DATA PAGE ============ */
.page-hero {
  background: var(--blue-charcoal);
  color: var(--white);
  /* Full viewport height so the brief line sits exactly on the bottom edge. */
  min-height: 100vh;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  position: relative;
}
/* Clean diagonal sweep — two stops only, no radial overlays. No bands, no
   pale rays — just a smooth blend from deep blue-charcoal (TL) to a
   saturated mariner (BR). */
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    var(--blue-charcoal) 0%,
    #1A3F94 100%);
  pointer-events: none;
  z-index: 0;
}
/* Pin the scroll cue ("The brief") to the bottom edge of the viewport on
   initial landing — the section is exactly 100vh, the cue is absolutely
   positioned at the section's bottom. */
.page-hero .scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  z-index: 3;
}
.page-hero-inner { width: 100%; }
/* Sovereign hero is a clean diagonal gradient — no light rays, no streaks. */
.page-hero .hero-light-rays { display: none; }
/* Scatter shapes only inhabit the right half of the hero — the text column on
   the left stays uncluttered. */
.page-hero .hero-scatter {
  left: 50%;
  right: 0;
  width: auto;
}
/* Redistribute the 7 shapes inside the right-half container so they feel
   scattered organically rather than stacked in two columns. Percentages are
   relative to the right-half container (= 50% of the viewport width). */
.page-hero .scatter-1 { top: 8%;  left: 14%; right: auto; bottom: auto; }
.page-hero .scatter-3 { top: 18%; right: 6%;  left: auto; bottom: auto; }
.page-hero .scatter-4 { top: 38%; left: 58%; right: auto; bottom: auto; }
.page-hero .scatter-5 { top: 34%; left: 4%;  right: auto; bottom: auto; }
.page-hero .scatter-6 { top: 64%; right: 22%; left: auto; bottom: auto; }
.page-hero .scatter-8 { top: 58%; left: 10%; right: auto; bottom: auto; }
.page-hero .scatter-9 { top: 78%; right: 8%;  left: auto; bottom: auto; }
/* Stat strip on the sovereign hero — same component as hero-meta on home. */
.page-hero .hero-meta { margin-top: 56px; }

.brief-header {
  display: flex; align-items: center;
  gap: 18px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--rock-blue);
  margin-bottom: 44px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rule-dark);
}
.brief-header .brief-id { color: var(--mariner); }
.brief-header .sep { color: rgba(165, 181, 207, 0.4); }
.brief-header .brief-class {
  margin-left: auto;
  font-size: 9.5px;
  letter-spacing: 0.32em;
  color: rgba(165, 181, 207, 0.55);
}

.page-hero h1 {
  font-family: var(--sans);
  font-size: clamp(48px, 7.6vw, 100px);
  font-weight: 400;
  letter-spacing: -0.032em;
  line-height: 0.96;
  margin-bottom: 36px;
  color: var(--white);
}
.page-hero .lede {
  font-family: var(--serif);
  font-size: clamp(20px, 1.7vw, 26px);
  color: rgba(255, 255, 255, 0.78);
  max-width: 740px;
  line-height: 1.6;
}

/* ============ PROBLEM SECTION — left graphic, right-aligned text ============ */
.sov-problem .problem-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
}
/* Graphic on the LEFT, copy on the RIGHT — but copy itself is LEFT-aligned. */
.sov-problem .problem-copy { text-align: left; }
.sov-problem .problem-copy .section-title,
.sov-problem .problem-copy .section-lede {
  max-width: 100%;
}
.sov-problem .problem-graphic {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  position: relative;
  /* No bounding clip — the halo + spokes paint past the cell boundary. */
  overflow: visible;
}
.sov-problem .problem-graphic svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.sov-problem,
.callout,
.sov-buyers,
.sov-capabilities {
  background: var(--blue-charcoal);
  color: var(--white);
}
.callout::before {
  content: "";
  position: absolute; top: 10%; right: -10%;
  width: 600px; height: 500px;
  background: radial-gradient(circle, var(--chathams-glow) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.spec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 56px;
}
/* Architecture cards mirror the door cards on the home page (frosted glass +
   corner brackets + edge sweeps), but they're informational — no clickable
   transform, no translateY on hover, so the user doesn't read them as links. */
.spec {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--rule-dark);
  padding: 52px 30px 130px;
  position: relative;
  isolation: isolate;
  display: flex; flex-direction: column;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.spec:hover { background: rgba(255, 255, 255, 0.055); }
/* Wire edge-sweep animations to the spec cards (door behavior copied) */
.spec:hover .e-top    { transform: scaleX(1); transition-delay: 0s; }
.spec:hover .e-right  { transform: scaleY(1); transition-delay: 0.12s; }
.spec:hover .e-bottom { transform: scaleX(1); transition-delay: 0.24s; }
.spec:hover .e-left   { transform: scaleY(1); transition-delay: 0.36s; }
/* Center-align the eyebrow + title + lede above the architecture cards. */
.callout > .container > .section-eyebrow,
.sov-capabilities > .container > .section-eyebrow {
  justify-content: center;
}
.callout > .container > .section-title,
.callout > .container > .section-lede,
.sov-capabilities > .container > .section-title {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
/* Decorative pillar-style graphic floating bottom-right of each spec card —
   bottom-right avoids colliding with the corner-tick + tag at the top-left. */
.spec .spec-graphic {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 88px;
  height: 88px;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}
.spec .spec-graphic > circle[fill="#FFFFFF"] {
  transform-origin: center;
  transform-box: fill-box;
  animation: pgCorePulse 2.8s ease-in-out infinite;
}
.spec .tag,
.spec h4,
.spec p {
  position: relative;
  z-index: 1;
}
.spec .tag {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  color: var(--mariner);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.spec h4 {
  font-family: var(--sans);
  font-size: var(--fs-card-title);
  font-weight: 400;
  margin-bottom: 14px;
  letter-spacing: -0.014em;
  line-height: 1.15;
  color: var(--white);
}
.spec p {
  font-family: var(--serif);
  font-size: var(--fs-spec-body);
  color: rgba(255, 255, 255, 0.78); /* Design pass: lift spec-card body contrast */
  line-height: 1.6;
}

.buyer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 44px;
}
.buyer {
  background: rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--rule-dark);
  /* Number box on the LEFT, copy on the right. */
  padding: 52px 40px 44px 36px;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 28px;
  align-items: start;
  position: relative;
  isolation: isolate;
}
/* Notched square number box — OUTLINE only (no fill). The notch on the
   bottom-right corner matches the original .icon shape from the for-Team
   build. We use an inline SVG for the stroke because clip-path on a bordered
   div clips the border too and loses the diagonal stroke. */
.buyer .buyer-num {
  width: 56px;
  height: 56px;
  position: relative;
  background: none;
  clip-path: none;
  font-family: var(--sans);
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  padding: 0;
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.buyer .buyer-num::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Notched outline drawn as an SVG path so the diagonal edge is stroked. */
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56' fill='none'><path d='M 1 1 L 55 1 L 55 39 L 39 55 L 1 55 Z' stroke='%232D6DD9' stroke-width='1.5' fill='none' stroke-linejoin='miter'/></svg>")
    center / contain no-repeat;
  pointer-events: none;
}
.buyer .corner-bracket,
.buyer .corner-tick,
.spec .corner-bracket,
.spec .corner-tick {
  z-index: 4;
}
/* Smaller, tighter corner brackets on spec/buyer cards so they don't crowd the
   tag, the buyer-num "01" numeral, or read as oversized framing. */
.spec .corner-bracket,
.buyer .corner-bracket {
  width: 12px;
  height: 12px;
}
.spec .corner-tick  { top: 18px; right: 20px; font-size: 9px; }
.buyer .corner-tick { top: 18px; right: 20px; font-size: 9px; }
.buyer .buyer-num   { padding-top: 0; }
.buyer .buyer-num {
  font-size: 28px;
  line-height: 1;
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}
.buyer h4 {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 10px;
  letter-spacing: -0.014em;
  color: var(--white);
}
.buyer p {
  font-family: var(--serif);
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.6;
}

.proof-live {
  background: var(--tangaroa-2);
  border: 1px solid var(--rule-dark);
  padding: 44px 48px;
  /* Pull Belize up so the gap to the buyer grid matches the buyer-grid gap. */
  margin-top: 16px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 36px;
  align-items: center;
  position: relative;
}
.proof-live .status {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--mariner);
  text-transform: uppercase;
  display: flex; align-items: center;
  gap: 10px;
}
.proof-live .status::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--mariner);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45, 109, 217, 0.6); }
  50%      { box-shadow: 0 0 0 8px rgba(45, 109, 217, 0); }
}
.proof-live h4 {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 10px;
  letter-spacing: -0.014em;
  color: var(--white);
}
.proof-live p {
  font-family: var(--serif);
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.6;
}

.return-link {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--rock-blue);
  transition: color 0.2s;
}
.return-link:hover { color: var(--mariner); }

/* ============ RESPONSIVE ============ */
@media (max-width: 960px) {
  :root { --gutter: 24px; }
  .nav-links { gap: 18px; }
  .nav-links a:not(.nav-cta) { display: none; }

  /* Hamburger button (top-right via the nav's space-between) */
  .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center;
    gap: 5px; width: 44px; height: 44px; padding: 10px;
    background: none; border: none; cursor: pointer; z-index: 60;
  }
  .nav-burger span {
    display: block; width: 100%; height: 2px; border-radius: 2px;
    background: var(--white);
    transition: transform 0.25s ease, opacity 0.2s ease;
  }
  .nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger.is-open span:nth-child(2) { opacity: 0; }
  .nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Dropdown panel below the bar; collapses via max-height */
  .nav-mobile {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(1, 3, 17, 0.97);
    border-bottom: 1px solid var(--rule-dark);
    max-height: 0; overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .nav-mobile.is-open { max-height: 80vh; }
  .nav-mobile a {
    font-family: var(--sans);
    font-size: var(--fs-nav-link);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    padding: 16px var(--gutter);
  }
  .nav-mobile a:hover { color: var(--mariner); }
  section { padding: 80px var(--gutter); }
  .hero { padding: 120px var(--gutter) 100px; }
  .page-hero { padding: 150px var(--gutter) 100px; }
  .hero-scatter { width: 100%; opacity: 0.35; }
  .hero-meta { grid-template-columns: repeat(2, 1fr); }
  .pillar-grid { grid-template-columns: 1fr; }
  .mission-lead-h3 { font-size: 24px; }
  .door-grid { grid-template-columns: 1fr; }
  .door { min-height: 0; }
  .proof-grid, .proof-grid-3 { grid-template-columns: 1fr; }
  .proof-card {
    border-right: none;
    border-bottom: 1px solid var(--rule-dark);
  }
  .proof-card:last-child { border-bottom: none; }
  .spec-grid { grid-template-columns: 1fr; }
  .buyer-grid { grid-template-columns: 1fr; }
  .proof-live {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 32px;
  }
  .footer-inner { grid-template-columns: 1fr; gap: 36px; }
  .brief-header { flex-wrap: wrap; gap: 12px; }
  .brief-header .brief-class { margin-left: 0; flex-basis: 100%; }
  /* Problem section collapses to a single column at tablet size. */
  .sov-problem .problem-grid { grid-template-columns: 1fr; gap: 48px; }
  .sov-problem .problem-graphic { max-width: 380px; margin: 0 auto; }
  .sov-problem .problem-copy { text-align: left; }
  .sov-problem .problem-copy .section-eyebrow { justify-content: flex-start; }
  .sov-problem .problem-copy .section-eyebrow::before { display: inline-block; }
  .sov-problem .problem-copy .section-eyebrow::after { display: none; }
}

/* Phone-sized viewports — kill the per-card overflow caused by the proof-card
   .v large text and tighten the hero-meta to a single column. */
@media (max-width: 600px) {
  .hero-meta { grid-template-columns: 1fr; }
  .meta-item .v { font-size: 22px; }
  .proof-card .v { font-size: 38px; }
  .spec { padding: 48px 22px 110px; }
  /* Mobile buyer: notched number box on left, content on right. */
  .buyer { padding: 48px 28px 28px 28px; grid-template-columns: 48px 1fr; gap: 18px; }
  .buyer .buyer-num { width: 48px; height: 48px; font-size: 18px; }
  .buyer .buyer-num::before {
    background:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'><path d='M 1 1 L 47 1 L 47 33 L 33 47 L 1 47 Z' stroke='%232D6DD9' stroke-width='1.5' fill='none' stroke-linejoin='miter'/></svg>")
      center / contain no-repeat;
  }
  .spec .spec-graphic { width: 72px; height: 72px; right: 14px; bottom: 14px; }
  /* Shrink the pillar decoration on phones so its right-side dot grid never
     overlaps the paragraph copy. Also tighten the copy width so the text
     never reaches the graphic zone. */
  .pillar-graphic { width: 96px; height: 96px; right: 16px; opacity: 0.30; }
  .pillar > .num, .pillar > h3, .pillar > p { max-width: calc(100% - 116px); }
}

/* Sub-400px: the long "Request a sovereign brief" label wraps to two lines
   and pulls its arrow off-center. Drop type-size + spacing slightly so it
   stays single-line through 320px. */
@media (max-width: 400px) {
  .closing-cta { font-size: 12px; letter-spacing: 0.14em; padding: 16px 28px; }
}


/* ==========================================================
   GLOBAL CTA — beamon.ai-style button: semi-transparent mariner fill
   with an animated conic-gradient orbit ring on the border.
   A conic-gradient is painted on a pseudo-element, masked down to
   the border ring via two mask layers (one clipped to content-box,
   one to border-box) composited with `exclude`. The gradient's
   `from` angle is animated via @property + @keyframes, which makes
   the bright section sweep around the perimeter — the ring shape
   itself never rotates, so it stays perfectly aligned to the button.
   Applies to .nav-cta and .closing-cta on both pages.
   ========================================================== */

/* Critical: `inherits: true` is what makes Chromium re-paint the conic
   gradient as --angle animates. inherits: false silently skips the
   gradient update on most engines. */
@property --angle {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0turn;
}
@keyframes sov-cta-spin { to { --angle: 1turn; } }

.nav-cta,
.closing-cta {
  /* Mariner blue fill at 50% opacity — semi-transparent so the orbit ring
     and any background behind the button still read through it. */
  background: rgba(45, 109, 217, 0.5) !important;
  color: var(--white) !important;
  border: 1px solid transparent;
  position: relative;
  isolation: isolate;
  overflow: visible;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
/* Hover restored to the original behaviour: solid chathams-blue, slight lift,
   subtle drop shadow. Sizes match the original .nav-cta and .closing-cta
   hover states from before any orbit/outline changes. */
.nav-cta:hover {
  background: var(--chathams-blue) !important;
  transform: translateY(-1px) !important;
  box-shadow: none !important;
}
.closing-cta {
  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.18),
    0 6px 22px rgba(0, 0, 0, 0.10) !important;
}
.closing-cta:hover {
  background: var(--chathams-blue) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 26px 80px rgba(0, 0, 0, 0.22),
    0 8px 28px rgba(45, 109, 217, 0.28) !important;
}

/* The orbit ring. Conic gradient painted on a pseudo that's inset -2px
   around the button. The two-layer mask carves out everything except
   the border, leaving a glowing animated ring. */
.nav-cta::before,
.closing-cta::before {
  content: " ";
  position: absolute;
  inset: -2px;
  border: inherit;
  border-radius: inherit;
  background-image: conic-gradient(
    from var(--angle),
    #FFFFFF 0%,
    #FFFFFF 10%,
    var(--mariner) 25%,
    var(--mariner) 75%,
    #FFFFFF 90%,
    #FFFFFF 100%
  );
  background-origin: border-box;
  -webkit-mask:
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000);
          mask:
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000);
  -webkit-mask-clip: content-box, border-box;
          mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: sov-cta-spin 3.5s linear infinite;
  z-index: 0;
  pointer-events: none;
}
/* Pause the rotation on hover — beamon does this; it lets users read
   the button without the eye-pull of constant motion. */
.nav-cta:hover::before,
.closing-cta:hover::before {
  animation-play-state: paused;
}

/* ── Mobile email-link containment + one-line fit (≤600px) ───────────────────
   Email addresses are single unbreakable tokens (no spaces). The overflow-wrap
   /max-width below is the SAFETY NET (a longer address wraps rather than runs
   past the card border / screen edge). On top of that, the routing/next-step
   email elements are shrunk to fit ONE line at phone widths: the longest real
   address (INVESTORS@/SOVEREIGN@BRIGHTSTEAD.COM = 25 chars uppercase) is ~17.9em
   incl. 0.06em tracking → 13px ≈ 233px, which fits the ~249px narrowest card
   inner width (15px≈269px and 14px≈251px would still wrap). EMAIL ELEMENTS ONLY:
   the font-size/letter-spacing reductions are scoped to the routing-card email
   label span and the next-step pill (.proof .nav-cta) — NOT the .door-cta arrow,
   the b9daa04 CTA button blocks (v2-home.css:323 / v2-inner.css:406), or the
   footer email links (lowercase, un-tracked, already fine). !important beats the
   v3.css:126 nowrap/flex pin; `.proof .nav-cta` out-specifies v2-inner.css:50's
   `font-size: var(--fs-cta) !important`. */
@media (max-width: 600px) {
  /* Routing-card email label — Portfolio / Mission / Home next-step cards. */
  .door.is-route .door-cta > span:not(.arrow) {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 13px !important;
    letter-spacing: 0.06em !important;
  }
  /* Next-step email pill (How We Operate / Team — email rendered AS .nav-cta):
     shrink to one line. Scoped to .proof so only the next-step pill is affected
     (not hero/ghost CTAs) and so it wins the cascade. */
  .proof .nav-cta {
    font-size: 13px !important;
    letter-spacing: 0.06em !important;
  }
  /* Containment safety net (kept): break + cap width if an address ever exceeds
     the one-line budget. Footer emails/prompts kept at their current size. */
  .nav-cta,
  .footer ul a,
  .footer .footer-prompt {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}