/* ============================================================
   Brightstead — design v7 overrides on top of styles.css
   Ports from Claude Design handoff (brightstead-tech):
     · Hero: checked grid + gradient orb + animated 3D "B" beacon
     · Doors: circular checker-grid bleed + SVG-traced card borders
     · Closing: centered B beacon with massive cyan radial glow
     · Footer: 3-col 1:1 match
     · Scroll-fade focus: blocks fade in from below, sit focused in
       the viewport center, fade + stretch out as they leave the top
   Typography unchanged — Avenir Next (sans/headings) + Cardo (serif/body)
   ============================================================ */

:root {
  --tangaroa-2:      #061040;
  --tangaroa-3:      #0a1750;
  --mariner-bright:  #5a8cff;
  --ice:             #cfe0ff;
  --glow-mariner:    rgba(45, 109, 217, 0.55);
  --glow-bright:     rgba(120, 170, 255, 0.6);
  --glow-soft:       rgba(45, 109, 217, 0.18);
}

/* ============================================================
   TYPE — Avenir everywhere on v2. The base styles.css uses Cardo
   for body and a few section accents; we force Avenir (var(--sans))
   on those elements so v2 reads consistently sans-serif.
   ============================================================ */
body,
.hero p.lede,
.hero p.lede strong,
.mission-prose, .mission-prose strong,
.section-lede,
.door .door-sub,
.door .door-body,
.proof-card .s,
.proof .s,
.proof p,
.closing-content > p,
.footer .footer-tag,
.footer .footer-tag strong,
.pillar p {
  font-family: var(--sans) !important;
}

/* ============================================================
   HERO — checked grid + diagonal gradient + B beacon
   ============================================================ */
.hero {
  min-height: 100vh;
  background:
    linear-gradient(135deg,
      #000208   0%,
      #01040f  18%,
      #02061a  34%,
      #050d33  50%,
      #0a1854  64%,
      #133073  78%,
      #1a4ba4  90%,
      #2d6dd9 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 140px var(--gutter) 110px;
}
/* Suppress legacy hero ornaments */
.hero .hero-light-rays,
.hero .hero-scatter,
.hero::before,
.hero::after { display: none !important; }

.hero .grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position: center center;
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.9), transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.9), transparent 75%);
  pointer-events: none;
  z-index: 0;
}
/* Gradient orb removed — was creating a vertical brightness seam in the
   middle of the hero. The diagonal hero background gradient is enough. */
.hero .gradient-orb { display: none !important; }

.hero .hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  width: 100%;
  text-align: left;
  margin: 0 auto;
}
.hero .hero-inner > .hero-pill,
.hero .hero-inner > h1,
.hero .hero-inner > p.lede {
  position: relative;
  z-index: 3;
  max-width: 760px;
}
.hero .hero-inner > .hero-beacon {
  position: absolute;
  top: -40px;
  right: -120px;
  z-index: 1;
}
.hero .hero-inner > .meta-wrap {
  position: relative;
  z-index: 3;
  margin-top: 64px;
  width: 100%;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  /* De-boxed: plain eyebrow-style label — no border, fill, or button padding. */
  padding: 0;
  border: none;
  background: none;
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* Match the site's .section-eyebrow color (--mariner) at full strength,
     rather than the washed-out --rock-blue it used before. */
  color: var(--mariner);
  margin-bottom: 32px;
}
.hero-pill .dot {
  width: 7px;
  height: 7px;
  background: var(--mariner);
  border-radius: 99px;
  box-shadow: 0 0 12px rgba(120, 170, 255, 0.9);
}
.hero-pill .sep { color: var(--mariner); }

/* Trademark mark — small superscript wherever it appears (hero eyebrow, footer
   tagline). letter-spacing reset so it doesn't inherit the eyebrow/tag tracking. */
.tm {
  position: relative;
  top: -0.45em;
  font-size: 0.72em;
  vertical-align: baseline;
  line-height: 0;
  letter-spacing: normal;
}

.hero h1 {
  font-family: var(--sans);
  font-size: clamp(54px, 7.4vw, 100px);
  /* Lighter weight per request — Avenir at 500 reads premium without the
     heavy block-letter feel of 700. */
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.98;
  margin: 0 0 28px;
}
.hero p.lede strong { font-weight: 600; }
.hero h1 .accent {
  display: inline;
  color: var(--mariner-bright);
  font-style: italic;
  font-weight: 400;
}

.hero p.lede {
  font-family: var(--serif);
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  max-width: 680px;
  margin: 0 0 8px;
}
.hero p.lede strong { color: #fff; font-weight: 700; }

/* === Hero meta strip (4 stats) — HOME PAGE ONLY. Scoped to `.hero` so
   it never touches the sovereign page's `.page-hero .hero-meta` (which
   keeps its own mouse-glow hover from styles.css). === */
.hero .meta-wrap { width: 100%; }
.hero .hero-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding-top: 40px;
  margin-top: 56px;
  border-top: 1px solid rgba(120, 170, 255, 0.18);
  width: 100%;
  text-align: center;
  background: transparent;
  border-bottom: none;
  border-left: none;
  border-right: none;
}
.hero .hero-meta .meta-item {
  padding: 0;
  border-right: 1px solid rgba(120, 170, 255, 0.18);
  border-left: none;
  border-top: none;
  border-bottom: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.hero .hero-meta .meta-item:last-child { border-right: none; }
.hero .hero-meta .meta-item .k {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--rock-blue);
  margin-bottom: 10px;
}
.hero .hero-meta .meta-item .v {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
.hero .hero-meta .meta-item .v .ac {
  color: var(--mariner-bright);
  font-style: italic;
  font-weight: 400;
}

/* === HERO BEACON — naked glowing B, 3D depth stack === */
.hero-beacon {
  position: relative;
  width: 540px;
  height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* ============================================================
   HERO BEACON — CLOSING-STYLE VARIANT (toggle via .as-closing).
   Reuses .closing-halo / .closing-rays / .closing-mark exactly as
   they appear in the closing section, sized for the hero container.
   REVERT NOTE: remove this whole block + restore original beacon
   markup from _hero-beacon-ORIGINAL.backup.html.
   ============================================================ */
.hero-beacon.as-closing {
  isolation: isolate;
}
.hero-beacon.as-closing .closing-mark {
  position: relative;
  z-index: 2;
  width: 300px;          /* scaled up for the hero (closing uses 192px block) */
  height: auto;
  /* PERF: the 3D mouse-tilt re-transformed this heavily-shadowed (160px
     blur) B every pointer frame, which was slow + heavy. Removed — the B
     now sits static with only the breathing-halo pulsation behind it,
     exactly like the closing section. */
}
.hero-beacon.as-closing .closing-halo {
  /* Same concentrated mariner halo as the closing section. */
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 1100px;
  height: 1100px;
  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;
  /* PERF: mix-blend-mode:screen forced the compositor to re-read and
     re-blend the hero backdrop on every animation frame — the single
     heaviest thing on the page. On the near-black hero the translucent
     blue radials read as a glow under normal compositing anyway. Promote
     to its own GPU layer so the blurred raster is cached and only the
     transform/opacity changes per frame. */
  filter: blur(4px);
  mix-blend-mode: normal;
  will-change: transform, opacity;
  animation: haloBreathe 6s ease-in-out infinite;
}
.hero-beacon.as-closing .closing-rays {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 900px;
  -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: 1;
  /* PERF: same as the halo — drop the per-frame backdrop blend and cache
     the conic-gradient raster on its own layer so the 42s rotation is a
     pure GPU transform instead of a full recomposite every frame. */
  opacity: 0.9;
  mix-blend-mode: normal;
  will-change: transform;
  animation: raysSpin 42s linear infinite;
}
/* The closing-mark filter (bright B) is already defined globally in this
   file, so the hero B inherits the exact same brightness + glow. */
@keyframes haloBreathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
  50%      { transform: translate(-50%, -50%) scale(1.06); opacity: 0.88; }
}
@keyframes raysSpin {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Pause the hero closing-style beacon when the hero is off-screen. */
.hero.anim-paused .hero-beacon.as-closing .closing-halo,
.hero.anim-paused .hero-beacon.as-closing .closing-rays,
.hero.anim-paused .hero-beacon.as-closing .closing-mark {
  animation-play-state: paused !important;
}
/* Halo removed per request — the blue radial dot behind the B was
   showing through during the wireframe phase. */
.beacon-halo { display: none !important; }

.b-perspective {
  position: relative;
  width: 380px;
  height: 380px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
  transform-style: preserve-3d;
}
.b-tilt {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform:
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg));
  will-change: transform;
}

/* B BEACON — full cycle restored (outline → fill → burst with sparkles →
   reappear as lines), but made lighter than the original design package.
   Key perf changes vs the design's defaults:
     · Cycle is 8s, not 10s (faster cadence, less dwell on every phase).
     · The pale-blue "outline-bright" peak is 4% of the cycle (was ~26%).
     · `.b-layer-front` carries a STATIC drop-shadow — no per-frame
       `glow-pulse` filter morph (that was the single most expensive
       thing on the page).
     · Burst gradient stays cheap (no mix-blend-mode, no filter:blur). */

.b-depth {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  /* 9s cycle: lines ~3s, ~1s empty hold at loop boundary. */
  animation: fill-phase 9s cubic-bezier(.45,.02,.55,1) infinite;
}
/* CYCLE (9s):
   0–7%    empty start (~0.63s, combined with 95–100% = ~1.08s empty hold)
   7–13%   outline + runners fade in (~0.54s)
   13–46%  LINES CIRCLING sustained (~2.97s ≈ 3s)
   46–58%  runners fade out, outline starts brightening (~1.08s)
   58–78%  outline brightens to peak white fill (~1.8s)
   78–82%  CROSSFADE: outline-fill at peak overlaps with b-depth fade-in
   82–92%  Solid white B at scale 1 — brightness ramps 1.2 → 2.6
           (NO scale growth — the B never warps before bursting)
   92–95%  BANG: B dissolves via opacity + blur ONLY (scale stays 1)
   95–100% empty hold + loops to 0–7% for ~1.08s total */
@keyframes fill-phase {
  0%, 78%  { opacity: 0;   filter: none;            transform: scale(1); }
  /* Crossfade-in: b-depth starts coming in WHILE outline-fill is at peak */
  82%      { opacity: 0.5; filter: brightness(1);   transform: scale(1); }
  /* B fully opaque, brightness ramps WITHOUT any size change */
  84%      { opacity: 1;   filter: brightness(1.2); transform: scale(1); }
  88%      { opacity: 1;   filter: brightness(1.8); transform: scale(1); }
  92%      { opacity: 1;   filter: brightness(2.6); transform: scale(1); }
  /* BANG: dissolve outward via blur + opacity (no scale change at all) */
  95%      { opacity: 0;   filter: blur(12px);      transform: scale(1); }
  100%     { opacity: 0;   filter: none;            transform: scale(1); }
}
.b-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%) translateZ(calc(var(--z, 0) * -1.6px));
  backface-visibility: visible;
}
/* Static white-only glow on the front layer. No per-frame filter morph,
   no blue tint — the B reads as pure white when it briefly appears. */
.b-layer-front {
  filter:
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 48px rgba(255, 255, 255, 0.55));
}

.b-outline,
.b-runner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%) translateZ(2px);
  overflow: visible;
}


.beacon-burst {
  position: absolute;
  inset: -120px;
  z-index: 2;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 255, 255, 1)    0%,
    rgba(220, 240, 255, 0.85) 12%,
    rgba(160, 210, 255, 0.50) 28%,
    rgba(120, 170, 255, 0.22) 44%,
    rgba(45, 109, 217, 0.08)  62%,
    transparent               82%);
  opacity: 0;
  transform: scale(0.3);
  pointer-events: none;
  animation: burst 9s ease-out infinite;
}
@keyframes burst {
  0%, 91%  { opacity: 0;    transform: scale(0.3); }
  93%      { opacity: 1;    transform: scale(0.7); }
  95%      { opacity: 0.6;  transform: scale(1.4); }
  97%      { opacity: 0;    transform: scale(2.2); }
  100%     { opacity: 0;    transform: scale(0.3); }
}

/* Outline — visible most of cycle (lines circling). Brightens and fills
   white right before the B becomes solid (the "lines transition to white
   bright fill" moment), then hidden during the brief solid + bang phase,
   reappears for the loop. Stroke color stays in white/ice range — no
   pale-blue moment. */
.b-outline {
  opacity: 0;
  animation: wire-phase 9s ease-in-out infinite;
}
.b-outline path,
.b-outline polygon {
  fill: none;
  stroke: rgba(220, 240, 255, 0.5);
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
  animation: outline-bright 9s ease-in-out infinite;
}
@keyframes wire-phase {
  /* empty start */
  0%, 6%   { opacity: 0; }
  /* outline fades in */
  13%      { opacity: 1; }
  /* lines sustained + fill peak */
  78%      { opacity: 1; }
  /* crossfade out: outline fades while b-depth fades in (no gap) */
  82%      { opacity: 0.6; }
  84%      { opacity: 0; }
  /* empty hold */
  100%     { opacity: 0; }
}
/* Outline-bright: faint hairline through lines phase, brightens 70–78%,
   peaks white-filled at 78–80%, CROSSFADES out 80–84% while b-depth
   simultaneously fades in — eliminates the "hold" the user reported. */
@keyframes outline-bright {
  /* Faint hairline during the lines phase (13–46%) */
  0%, 46% {
    stroke: rgba(220, 240, 255, 0.5);
    stroke-width: 0.8;
    fill: rgba(255, 255, 255, 0);
  }
  /* Stroke begins brightening once runners have faded */
  60% {
    stroke: rgba(220, 240, 255, 0.7);
    stroke-width: 1;
    fill: rgba(255, 255, 255, 0);
  }
  70% {
    stroke: rgba(245, 250, 255, 0.85);
    stroke-width: 1.4;
    fill: rgba(255, 255, 255, 0.3);
  }
  /* Peak white fill */
  78% {
    stroke: #ffffff;
    stroke-width: 2;
    fill: rgba(255, 255, 255, 0.95);
  }
  80% {
    stroke: #ffffff;
    stroke-width: 2;
    fill: rgba(255, 255, 255, 0.95);
  }
  /* Crossfade out — b-depth comes up in parallel (see fill-phase 82%) */
  82% {
    stroke: #ffffff;
    stroke-width: 1.5;
    fill: rgba(255, 255, 255, 0.5);
  }
  84% {
    stroke-width: 0;
    fill: rgba(255, 255, 255, 0);
  }
  100% {
    stroke: rgba(220, 240, 255, 0.5);
    stroke-width: 0.8;
    fill: rgba(255, 255, 255, 0);
  }
}

/* Runner — visible during the lines phase, traveling along each
   outline. Fades out as the outline reaches full-fill peak (so the
   final beat reads as the perimeter lit cleanly). */
.b-runner {
  opacity: 0;
  animation: runner-fade 9s ease-in-out infinite;
}
.b-runner .r {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 55 45;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.85));
  animation: travel 4.6s linear infinite;
}
@keyframes runner-fade {
  /* Runners visible 13–46% — i.e. 33% of cycle = ~3s on the 9s cycle.
     They fade out as the outline starts brightening for the fill peak. */
  0%, 6%  { opacity: 0; }
  13%     { opacity: 1; }
  46%     { opacity: 1; }
  52%     { opacity: 0; }
  100%    { opacity: 0; }
}
.b-runner .r-d0  { animation-delay: 0s;     }
.b-runner .r-d25 { animation-delay: -1.15s; }
.b-runner .r-d50 { animation-delay: -2.30s; }
.b-runner .r-d75 { animation-delay: -3.45s; }
@keyframes travel {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0;   }
}

.beacon-particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.beacon-particles span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #cfe0ff 40%, transparent 75%);
  box-shadow: 0 0 8px rgba(190, 220, 255, 1), 0 0 18px rgba(120, 170, 255, 0.85);
  opacity: 0;
  animation: mote 9s cubic-bezier(.15,.8,.35,1) infinite;
}
@keyframes mote {
  0%, 91%  { transform: translate(0, 0) scale(0.3); opacity: 0; }
  93%      { transform: translate(0, 0) scale(1.4); opacity: 1; }
  96%      { opacity: 1; }
  100%     { transform: translate(var(--tx), var(--ty)) scale(0.45); opacity: 0; }
}

.hero-beacon .sparkle {
  position: absolute;
  width: 14px;
  height: 14px;
  z-index: 5;
  opacity: 0.18;
  animation: twinkle 3.8s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
}
.hero-beacon .sparkle.s1 { top: 14%; right: 8%; }
.hero-beacon .sparkle.s2 { bottom: 22%; left: 6%; animation-delay: 1.4s; }
.hero-beacon .sparkle.s3 { top: 58%; right: 2%; animation-delay: 2.4s; width: 10px; height: 10px; }
@keyframes twinkle {
  0%, 100% { opacity: 0.04; transform: scale(0.55); }
  50%      { opacity: 0.18; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .b-depth, .b-outline, .b-runner, .b-runner .r, .beacon-particles span,
  .beacon-burst, .b-layer-front {
    animation: none !important;
  }
  .b-outline, .b-runner { opacity: 0; }
  .b-depth { opacity: 1; }
}

/* PERF: when JS detects the hero is fully off-screen it adds .anim-paused,
   which freezes every beacon animation so the browser stops compositing
   blurred shadows + transforms on a section the user can't see. */
.hero.anim-paused .b-depth,
.hero.anim-paused .b-outline,
.hero.anim-paused .b-outline path,
.hero.anim-paused .b-outline polygon,
.hero.anim-paused .b-runner,
.hero.anim-paused .b-runner .r,
.hero.anim-paused .beacon-burst,
.hero.anim-paused .beacon-particles span,
.hero.anim-paused .sparkle,
.hero.anim-paused .scroll-cue::after {
  animation-play-state: paused !important;
}
.closing.anim-paused .closing-rays,
.closing.anim-paused .closing-halo,
.closing.anim-paused .closing-mark {
  animation-play-state: paused !important;
}

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

/* ============================================================
   WHY WE EXIST — flip: graphic LEFT, copy RIGHT
   ============================================================ */
.why-grid {
  direction: rtl;
}
.why-grid > * {
  direction: ltr;
}

/* PERF: the funnel SVG markup itself was slimmed from 60 → 30 static
   paths and from 24 → 12 SMIL animations (6 tracers + 6 motion dots).
   CSS display:none on SVG nodes does NOT stop the browser running their
   SMIL clock, so we had to delete the elements outright. When the section
   is off-screen the funnel's SMIL is paused via JS:
   document.querySelector('.funnel-svg').pauseAnimations() */
.why-we-exist.why-paused .funnel-svg,
.why-we-exist.why-paused .funnel-svg * {
  animation-play-state: paused !important;
}

/* ============================================================
   FOUR PILLARS — centered header with bilateral rule lines,
   plus L-bracket corner brackets on each pillar tile.
   ============================================================ */
.four-pillars .pillar-intro {
  text-align: center;
  max-width: 920px;
  margin: 0 auto 56px;
}
.four-pillars .pillar-intro .section-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.four-pillars .pillar-intro .section-eyebrow::before,
.four-pillars .pillar-intro .section-eyebrow::after {
  content: "";
  display: inline-block;
  width: 36px;
  height: 1px;
  background: currentColor;
  opacity: 0.8;
}
.four-pillars .mission-lead-h3,
.four-pillars .pillar-intro h2,
.four-pillars .pillar-intro h3 {
  margin-left: auto;
  margin-right: auto;
}

/* Pillar L-pads — restored to the per-card treatment that matches the
   buyer cards on Sovereign Data: each pillar gets 4 L-brackets at -1px
   sitting ON the card's border line (not inside the padding). */
.pillar {
  position: relative;
  overflow: visible !important;
}
/* Match the DOOR-card treatment exactly: 16px mariner brackets on the
   border line (2px), growing to 24px + mariner-bright on hover — identical
   to the "Three ways in" door cards. */
.pillar .corner-bracket {
  display: block !important;
  position: absolute;
  width: 16px;
  height: 16px;
  border: 0 solid var(--mariner);
  pointer-events: none;
  z-index: 4;
  transition: width .25s ease, height .25s ease, border-color .25s ease;
}
.pillar .corner-bracket.tl { top: -1px;    left: -1px;    border-top-width: 2px;    border-left-width: 2px;  }
.pillar .corner-bracket.tr { top: -1px;    right: -1px;   border-top-width: 2px;    border-right-width: 2px; }
.pillar .corner-bracket.bl { bottom: -1px; left: -1px;    border-bottom-width: 2px; border-left-width: 2px;  }
.pillar .corner-bracket.br { bottom: -1px; right: -1px;   border-bottom-width: 2px; border-right-width: 2px; }
.pillar:hover .corner-bracket {
  width: 24px;
  height: 24px;
  border-color: var(--mariner-bright);
}
/* Hide the grid-level helpers (kept in markup for backward compat) */
.pillar-grid > .grid-corner-bl,
.pillar-grid > .grid-corner-br,
.pillar-grid > .grid-cross { display: none !important; }
.pillar-grid::before,
.pillar-grid::after { content: none !important; }

/* Gaps between cards — identical to the "Who it is for" buyer-grid on the
   Sovereign Data page: drop the connected shared-border table (gap:0 +
   outer border-top/left) and give each pillar its own full border, spaced
   by a 16px gap so they read as discrete framed cards. */
.pillar-grid {
  gap: 16px !important;
  border-top: 0 !important;
  border-left: 0 !important;
}
.pillar {
  border: 1px solid var(--rule-dark) !important;
}

/* ============================================================
   DOORS — circular checker grid + traced borders
   Overrides the legacy bracket/sweep/tick chrome.
   ============================================================ */
.doors {
  background: transparent !important;
  position: relative;
  overflow: visible;
}
/* Kill legacy ::before/::after section ornaments */
.doors::before,
.doors::after { display: none !important; }

.doors .checker-bg {
  position: absolute;
  top: -520px;
  bottom: -520px;
  left: 50%;
  width: 1700px;
  transform: translateX(-50%);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position: center center;
  mask-image: radial-gradient(circle at center,
    black            22%,
    rgba(0,0,0,0.75) 38%,
    rgba(0,0,0,0.35) 55%,
    transparent      72%);
  -webkit-mask-image: radial-gradient(circle at center,
    black            22%,
    rgba(0,0,0,0.75) 38%,
    rgba(0,0,0,0.35) 55%,
    transparent      72%);
  pointer-events: none;
  z-index: 0;
}
.doors .container { position: relative; z-index: 1; text-align: center; }
.doors .container .section-eyebrow { justify-content: center; }
.doors .container .section-title,
.doors .container .section-lede {
  margin-left: auto;
  margin-right: auto;
}

.door-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  margin-top: 60px;
  position: relative;
  text-align: left;
}

/* DOORS — border treatment ported 1:1 from the original page (4749):
   faint 1px mariner border at rest + 4-segment edge-sweep that scales in
   clockwise (top → right → bottom → left) on hover. The SVG traced
   border + full-perimeter edge glow from the design package are hidden;
   everything else about the v2 doors (L-pads, content, hover lift) is
   unchanged. */
.door-border,
.door-border-edge { display: none !important; }

.door {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 2px;
  transition: transform .35s ease, background .35s ease, border-color .35s ease;
  isolation: isolate;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid #1A2E5E;
  overflow: visible;
  padding: 0 !important;
}
.door:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.055);
}

/* Edge sweep — exact rules from the original styles.css for .edge-sweep,
   scoped under .door so they don't bleed into anything else on v2. */
.door .edge-sweep {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  transition: transform 0.45s ease;
}
.door .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;
}
.door .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;
}
.door .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;
}
.door .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 .edge-sweep.e-top    { transform: scaleX(1); transition-delay: 0s;     }
.door:hover .edge-sweep.e-right  { transform: scaleY(1); transition-delay: 0.12s; }
.door:hover .edge-sweep.e-bottom { transform: scaleX(1); transition-delay: 0.24s; }
.door:hover .edge-sweep.e-left   { transform: scaleY(1); transition-delay: 0.36s; }

/* L-pads on each door — sit on top of the SVG borders. They don't replace
   anything; the SVG traced border + edge-glow still run on hover. */
.door .corner-bracket {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 0 solid var(--mariner);
  pointer-events: none;
  z-index: 5;
  transition: width .25s ease, height .25s ease, border-color .25s ease;
  display: block;
}
.door .corner-bracket.tl { top: -1px;    left: -1px;    border-top-width: 2px;    border-left-width: 2px;  }
.door .corner-bracket.tr { top: -1px;    right: -1px;   border-top-width: 2px;    border-right-width: 2px; }
.door .corner-bracket.bl { bottom: -1px; left: -1px;    border-bottom-width: 2px; border-left-width: 2px;  }
.door .corner-bracket.br { bottom: -1px; right: -1px;   border-bottom-width: 2px; border-right-width: 2px; }
.door:hover .corner-bracket {
  width: 24px;
  height: 24px;
  border-color: var(--mariner-bright);
}

.door-inner {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 28px;
  min-height: 480px;
  border-radius: 1px;
  background:
    repeating-linear-gradient(90deg, rgba(160, 200, 255, 0.02) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(8, 18, 52, 0.32) 0%, rgba(2, 8, 30, 0.42) 100%);
  /* Top inset hairline removed per request — was rendering as a bright line
     along the card's top edge. */
  box-shadow: inset 0 -20px 30px rgba(0, 10, 40, 0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: background .35s ease, box-shadow .35s ease;
}
.door:hover .door-inner {
  background:
    repeating-linear-gradient(90deg, rgba(160, 200, 255, 0.025) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(8, 18, 52, 0.97) 0%, rgba(2, 8, 30, 1) 100%);
  box-shadow: inset 0 -20px 30px rgba(0, 10, 40, 0.45);
}
.door.featured .door-inner {
  background:
    repeating-linear-gradient(90deg, rgba(160, 200, 255, 0.025) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(14, 28, 70, 0.38) 0%, rgba(2, 8, 30, 0.48) 100%);
}
.door.featured:hover .door-inner {
  background:
    repeating-linear-gradient(90deg, rgba(160, 200, 255, 0.035) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(14, 28, 70, 0.97) 0%, rgba(2, 8, 30, 1) 100%);
  /* Featured top inset hairline removed to match the rest of the cards. */
  box-shadow: inset 0 -20px 30px rgba(0, 10, 40, 0.45);
}

/* Center radial glow removed — its fade-out on mouseleave produced a
   visible glow flash in the middle of the card. The traced perimeter
   border + edge glow on hover already communicate the focus state. */
.door::before { display: none !important; }

.door-head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 32px;
}
.door .door-num {
  font-family: var(--sans);
  font-size: var(--fs-card-num);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ice);
  line-height: 1.5;
  opacity: 0.9;
  margin: 0;
}
.door-tier {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ice);
  padding: 5px 9px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(190, 220, 255, 0.3);
  border-radius: 2px;
  white-space: nowrap;
  /* PERF: dropped backdrop-filter; tiny element doesn't justify the cost. */
}

.door .door-title {
  position: relative;
  z-index: 1;
  font-family: var(--sans);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.024em;
  line-height: 1;
  color: #fff;
  margin-bottom: 12px;
  /* PERF: blurred text-shadow is repainted any time the card composites.
     Single softer halo instead of two stacked. */
  text-shadow: 0 0 28px rgba(170, 210, 255, 0.45);
}
.door .door-sub {
  position: relative;
  z-index: 1;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: rgba(220, 235, 255, 0.85);
  margin-bottom: 22px;
  line-height: 1.4;
}
.door .door-body {
  position: relative;
  z-index: 1;
  font-family: var(--serif);
  font-size: var(--fs-card-body);
  color: rgba(220, 235, 255, 0.7);
  line-height: 1.6;
  margin-bottom: 24px;
}

.door .door-tags {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  margin-bottom: 24px;
}
.door .door-tag {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ice);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(190, 220, 255, 0.22);
  padding: 4px 9px;
  border-radius: 2px;
}

.door .door-cta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 22px;
  border-top: 1px solid rgba(190, 220, 255, 0.18);
  font-family: var(--sans);
  font-size: var(--fs-cta);
  font-weight: 700;
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  color: #fff;
}
.door .door-cta .arrow {
  width: 34px;
  height: 34px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(190, 220, 255, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: transform .25s, background .25s;
  /* PERF: dropped backdrop-filter. */
}
.door:hover .door-cta .arrow {
  transform: translateX(4px);
  background: rgba(120, 170, 255, 0.35);
}

/* ============================================================
   PROOF — bigger, bolder numbers (20% smaller than the prior pass)
   ============================================================ */
.proof .proof-card .v,
.proof .v {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(52px, 5.8vw, 90px);
  letter-spacing: -0.035em;
  line-height: 0.95;
  color: #fff;
}

/* ============================================================
   CLOSING — uses the original styles.css treatment (halo + rotating
   rays + bright B). We only override the B mark to push it brighter
   than the baseline filter stack.
   ============================================================ */
.closing-mark {
  filter:
    brightness(1.7)
    drop-shadow(0 0 4px  rgba(255, 255, 255, 1))
    drop-shadow(0 0 12px rgba(255, 255, 255, 1))
    drop-shadow(0 0 32px rgba(235, 245, 255, 1))
    drop-shadow(0 0 78px rgba(160, 210, 255, 0.9))
    drop-shadow(0 0 160px rgba( 80, 145, 240, 0.6));
}
/* More breathing room between the closing CTA and the glowing B mark
   (base is 72px). Applies to both the home and Sovereign Data closings. */
.closing-content > .closing-mark-block {
  margin-top: 120px;
}
/* Bigger gap between the B mark and the thin divider line above the footer
   — push the closing's bottom padding out (base is 60px). */
.closing {
  padding-bottom: 150px;
}

/* ============================================================
   FOOTER — 1:1 with design
   ============================================================ */
.footer {
  background: transparent !important;
  border-top: 0 !important;
  padding: 56px var(--gutter) 20px !important;
  position: relative;
  z-index: 2;
}
.footer::after { display: none !important; }
/* Bring back the thin divider line above the footer (sits just below the
   closing B mark) — restores the original styles.css .footer::before rule
   that was previously suppressed. */
.footer::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--divider-fade);
  z-index: 6;
  pointer-events: none;
}
.footer .footer-inner,
.footer .footer-bottom {
  position: relative;
  z-index: 1;
}
.footer .footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 64px;
}
.footer .footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.footer .footer-brand img { width: 224px; height: auto; }
.footer .footer-tag {
  font-family: var(--serif);
  font-size: var(--fs-footer-text);
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.6;
  max-width: 360px;
}
.footer .footer-tag strong {
  color: var(--rock-blue);
  font-weight: 600;
}
/* Tagline product-name highlight — brand Light Blue (secondary-CTA token).
   Covers "The Integrity Layer for AI"; the rest of the tagline stays muted. */
.footer .footer-tag .tag-hl { color: var(--mariner-bright); }
.footer h4 {
  font-family: var(--sans);
  font-size: var(--fs-footer-head);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mariner-bright);
  font-weight: 700;
  margin-bottom: 20px;
}
.footer ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 0;
}
.footer ul a {
  font-family: var(--sans);
  font-size: var(--fs-footer-text);
  color: rgba(255, 255, 255, 0.6);
  transition: color .2s;
  text-decoration: none;
}
.footer ul a:hover { color: var(--mariner-bright); }
/* Connect-email lead-in prompts — plain text sharing the footer link type token. */
.footer .footer-prompt { font-size: var(--fs-footer-text); }
.footer-bottom {
  max-width: var(--container);
  margin: 28px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(120, 170, 255, 0.18);
  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.7;
}

/* ============================================================
   SCROLL-FADE FOCUS — JS adds .sf-init to each tracked block at
   load, then .sf-in when it crosses into focus and .sf-out when
   it exits the top of the viewport. Center = sharp, edges = faded
   + stretched.
   ============================================================ */
/* Entrance / exit transition — "demo 5 combined" picked by the user.
   Fade + slide-up + scale + blur all together. */
.sf-init {
  opacity: 0;
  transform: translateY(36px) scale(0.94);
  filter: blur(6px);
  transition:
    opacity .8s cubic-bezier(.2,.6,.2,1),
    transform .8s cubic-bezier(.2,.6,.2,1),
    filter .7s cubic-bezier(.2,.6,.2,1);
}
.sf-init.sf-in {
  opacity: 1;
  transform: translateY(0) scale(1);
  /* filter:none (not blur(0)) so the element drops its filter context
     entirely once settled — a persistent blur(0) was clipping the
     Stripe-style mouse-glow on .mouse-glow cells (pillars etc). */
  filter: none;
}
.sf-init.sf-out {
  opacity: 0;
  transform: translateY(-26px) scale(0.97);
  filter: blur(6px);
}
@media (prefers-reduced-motion: reduce) {
  .sf-init, .sf-init.sf-in, .sf-init.sf-out {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .door-grid { gap: 16px; }
  .door-inner { padding: 24px 20px; min-height: 460px; }
  .door .door-title { font-size: 32px; }
  .door .door-sub { font-size: 16px; }
}
@media (max-width: 980px) {
  .hero .hero-inner { text-align: center; }
  .hero .hero-inner > .hero-pill,
  .hero .hero-inner > h1,
  .hero .hero-inner > p.lede { max-width: 640px; margin-left: auto; margin-right: auto; }
  .hero .hero-inner > .hero-beacon {
    position: relative;
    right: auto;
    top: auto;
    margin: 40px auto 0;
  }
  .hero p.lede { max-width: 640px; margin: 0 auto; }
  .hero-pill { align-self: center; }
}
@media (max-width: 760px) {
  .door-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero .hero-meta { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
  .hero .hero-meta .meta-item { border-right: none; padding: 0 16px 0 0; }
  .hero .hero-meta .meta-item:nth-child(odd) { border-right: 1px solid rgba(120, 170, 255, 0.18); }
  .footer .footer-inner { grid-template-columns: 1fr; gap: 36px; }
}