/* ═══════════════════════════════════════════
   GLOBAL CONTENT CONTAINER
   All inner content containers share this max-width and padding so every
   section's text/grid aligns with the outer edges of the stat card grid.
   --content-pad is derived: stat grid = 1119px; max 1440px viewport →
   (1440 − 1119) / 2 = 160.5px → 160px (sub-pixel diff is imperceptible).
═══════════════════════════════════════════ */
:root {
  --content-max: 1440px;
  --content-pad: 160px;
  --color-dark-bg: #0d1b2e;   /* shared by .section-overlay endpoint and .contact */
  --section-gap-outer: 90px;  /* outer padding forming the gap between content sections */
}

/* ═══════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* overflow-x:hidden on html (not body) so position:sticky on .hero works
   in Safari — body as scroll container blocks sticky; html does not. */
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  background: #b8c8d8;
  color: #fff;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ═══════════════════════════════════════════
   PRIMARY BUTTON  (.btn-primary)
   Single source of truth for all gold CTAs.
   Size variants add only structural props —
   no shadow overrides, no gradient duplication.
═══════════════════════════════════════════ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  font-style: normal;
  color: #fff;
  white-space: nowrap;
  text-decoration: none;
  border: none;
  background: linear-gradient(195.66deg, #EBC16D 16.456%, #B78232 110.38%);
  box-shadow:
    0 6px 32px 0 rgba(7, 32, 61, 0.18),
    inset 0 3px 10px 4px rgba(255,255,255,0.22),
    inset 0 0 0 1.5px rgba(241,197,92,0.88);
  transition:
    transform  280ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter     280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.btn-primary--nav {
  height: 40px;
  padding: 0 28px;
  font-size: 13px;
  letter-spacing: 1.43px;
  border-radius: 6px;
}

.btn-primary--hero {
  padding: 0 34px;
  height: 54px;
  font-size: 15px;
  letter-spacing: 1.65px;
  border-radius: 5px;
}

.btn-primary--submit {
  width: 100%;
  height: 68px;
  font-size: 18px;
  letter-spacing: 2.16px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  margin-top: 9px;
}

.form-microcopy {
  font-family: 'DM Mono', monospace;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(51, 51, 50, 0.45);
  margin-top: 14px;
  text-align: center;
  white-space: nowrap;
}

/* ── Primary button hover ────────────────────────────────────────────────── */

/* Reflective light sweep — barely perceptible shimmer on hover entry.
   Parked off-screen left at rest; swept to off-screen right on :hover. */
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    108deg,
    rgba(255, 230, 140, 0)    28%,
    rgba(255, 235, 150, 0.10) 46%,
    rgba(255, 248, 185, 0.07) 50%,
    rgba(255, 235, 150, 0.10) 54%,
    rgba(255, 230, 140, 0)    72%
  );
  transform: translateX(-160%);
  pointer-events: none;
}

.btn-primary:hover::before {
  animation: btn-light-sweep 0.65s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes btn-light-sweep {
  to { transform: translateX(260%); }
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.08);
  box-shadow:
    0 12px 48px 6px rgba(7, 32, 61, 0.24),
    inset 0 3px 10px 4px rgba(255, 255, 255, 0.22),
    inset 0 0 0 1.5px rgba(241, 222, 125, 1);
}

/* ═══════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════ */
.nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

.nav-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 25px var(--content-pad) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-logo-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}

.nav-logo-text {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 25px;
  color: #07203D;
  line-height: 1;
}

.sticky-nav .nav-logo-text { color: #07203D; }

/* ═══════════════════════════════════════════
   STICKY NAV
═══════════════════════════════════════════ */
.sticky-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(223, 229, 236, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(13, 27, 46, 0.10);
  box-shadow: 0 1px 24px rgba(13, 27, 46, 0.08);
  opacity: 0;
  pointer-events: none;
}

.sticky-nav.is-visible {
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .sticky-nav {
    transform: translateY(-10px);
    transition:
      opacity   300ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .sticky-nav.is-visible {
    transform: translateY(0);
  }
}

.sticky-nav-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--content-pad);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.hero {
  position: sticky;
  top: 0;
  z-index: 2;
  width: 100%;
  min-height: 560px;
  overflow: hidden;
  background-color: #b8c8d8;
  background-image: url('hero-bg-light.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Softens the radar's bottom edge into the hero background.
   z-index 2 = above radar-container (also z-index 2, but earlier in DOM so
   the pseudo-element paints on top) and below hero-content (z-index 3).
   The mobile block overrides both z-index and height for its own treatment. */
.hero::after {
  content: none;
}

/* ── RADAR (SVG asset) ──────────────────────────
   SVG is 964×964 with center at (481.205, 481.205).
   We render it at 960px so the center maps to hero
   coordinates (1309, 584) — matching the Figma.
   left  = 1309 − 481.205×(960/964) = 830
   top   = 584  − 481.205×(960/964) = 105
   The hero's overflow:hidden clips the right/bottom.
────────────────────────────────────────────── */
.hero-radar-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  display: none;
}

/* SVG width=800 → scale=0.830
   Center maps to hero (1309, 600):
     left = 1309 − 481.205×0.830 = 910
     top  = 600  − 481.205×0.830 = 201
   Outer ring left edge: 910 + 5.5×0.830 = 915px at 1512px
   Hero overflow:hidden clips right + bottom. */
@keyframes radar-rotate {
  to { transform: rotate(360deg); }
}

/* Mobile: bake translateX(-50%) into the keyframe so centering never
   conflicts with the rotation transform on .radar-svg-img. */
@keyframes radar-rotate-mobile {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg); }
}

.radar-svg-img {
  position: absolute;
  width: 720px;
  height: 720px;
  left: 819px;
  top: 181px;
  display: block;
  transform-origin: center center;
  animation: radar-rotate 52s linear infinite;
}

/* ── Threat dots & scan bar overlay ─────────── */

.radar-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

@keyframes threat-pulse {
  0%, 100% {
    box-shadow:
      0 0 5px 2px rgba(208, 56, 56, 0.40),
      0 0 10px 4px rgba(208, 56, 56, 0.15);
  }
  50% {
    box-shadow:
      0 0 9px 4px rgba(208, 56, 56, 0.62),
      0 0 18px 7px rgba(208, 56, 56, 0.22);
  }
}

.radar-threat {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #D03838;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  transition: opacity 0.5s ease;
  box-shadow:
    0 0 5px 2px rgba(208, 56, 56, 0.40),
    0 0 10px 4px rgba(208, 56, 56, 0.15);
}

.radar-threat.active {
  opacity: 1;
  animation: threat-pulse 3.2s ease-in-out infinite;
}

.radar-scan-bar {
  position: absolute;
  left: 739px;
  width: 880px;
  height: 4px;
  background: linear-gradient(
    90deg,
    rgba(212, 169, 72, 0)    0%,
    rgba(212, 169, 72, 0.25) 8%,
    rgba(246, 202, 91, 0.95) 20%,
    rgba(246, 202, 91, 1)    50%,
    rgba(246, 202, 91, 0.95) 80%,
    rgba(212, 169, 72, 0.25) 92%,
    rgba(212, 169, 72, 0)   100%
  );
  /* drop-shadow instead of box-shadow: composites against actual visible pixels
     so the glow follows the gradient's alpha and tapers to nothing at the ends.
     box-shadow paints around the bounding box regardless of gradient alpha,
     which caused the dark cap by illuminating the transparent ends of the bar. */
  filter:
    drop-shadow(0 0  5px rgba(246, 202, 91, 0.85))
    drop-shadow(0 0 14px rgba(201, 168, 76, 0.55))
    drop-shadow(0 0 32px rgba(201, 168, 76, 0.28));
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  transition: opacity 0.55s ease;
}

/* hero text */
.hero-content {
  position: relative;
  z-index: 3;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 120px var(--content-pad) 159px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-headline {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 77px;
  line-height: 1.09;
  letter-spacing: -1.5px;
  color: #07203D;
  width: auto;
  max-width: 720px;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-line1 {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  margin-bottom: -1.77em;
}

@keyframes hero-lock-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-4px); }
}

.hero-lock {
  height: 4.725em;
  width: auto;
  vertical-align: middle;
  display: inline-block;
  /* Margins cancel PNG transparent padding at 4.725em scale.
     Flush values (text just touches visible lock edge) derived from original 4.0em design:
       left flush = 1.20em × (4.725/4.0) = 1.417em
       right flush = 1.50em × (4.725/4.0) = 1.772em
     0.10em breathing room kept each side → ~8px desktop, ~5px mobile. */
  margin: 0 -1.67em 0 -1.32em;
  transform-origin: center center;
  transform: translateY(0px);
  animation: hero-lock-float 5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hero-lock { animation: none; }
}

.hero-sub {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #07203D;
  width: auto;
  max-width: 460px;
  margin-top: 28px;
  margin-bottom: 36px;
}

/* Mobile-only line break after "digital" — hidden everywhere else */
.br-mobile { display: none; }

/* ═══════════════════════════════════════════
   TRUSTED BY LOGO STRIP
   Sits between hero and the dark stats wrapper.
   z-index: 2 matches the hero's stacking level;
   DOM order ensures this paints above the sticky
   hero as it scrolls. The transition-wrapper
   (z-index: 3) then paints over this section.
═══════════════════════════════════════════ */
.trusted-by {
  position: relative;
  z-index: 3;
  margin-top: -10px;
  padding: 0 0 65px;
}

.trusted-by-inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 0 var(--content-pad);
  display: flex;
  align-items: center;
  gap: 56px;
}

.trusted-label {
  white-space: nowrap;
  margin: 0;
  flex-shrink: 0;
  position: relative;
  top: 13px;
}

.trusted-logos {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  gap: 92px;
}

.trusted-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.trusted-logo img {
  display: block;
  width: auto;
  opacity: 0.55;
  transition: opacity 250ms ease, filter 250ms ease, transform 250ms ease;
}

/* Per-logo height calibrated for visual weight, not identical dimensions */
.trusted-logo:nth-child(1) img { height: 20px; } /* UMBRA  — wordmark only  */
.trusted-logo:nth-child(2) img { height: 58px; } /* Vanish — icon + text    */
.trusted-logo:nth-child(3) img { height: 32px; } /* SQUADS — icon + text    */
.trusted-logo:nth-child(4) img { height: 32px; } /* KINETIQ — icon + text   */

.trusted-logo:hover img {
  opacity: 1;
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════
   SHARED BACKGROUND CANVAS
   .section-overlay is a single dark panel positioned absolutely to span
   the full height of stats + zone + proof inside .transition-wrapper.
   section-transition.js drives its opacity from 1 → 0 as the user scrolls
   through the stats section and zone, revealing the wrapper's light-blue
   texture underneath. Stats and proof are both transparent — neither owns
   a background. The canvas is the only background actor in this region.
═══════════════════════════════════════════ */
.section-overlay {
  position: absolute;
  inset: 0;
  background: var(--color-dark-bg);
  opacity: 0;           /* starts transparent; JS darkens it as .stats enters */
  z-index: 0;           /* below services (z-index 2), proof (z-index 2), stats */
  pointer-events: none;
  will-change: opacity;
}

/* ═══════════════════════════════════════════
   SECTION LABELS (editorial chapter markers)
   DM Mono, ALL CAPS, sit 28px above each major section heading.
═══════════════════════════════════════════ */
.section-label {
  font-family: 'DM Mono', monospace;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.28em;
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 28px 0;
  color: #8BACC7;
}

/* Sections with a light background need a darker label */
.services-label,
.proof-label,
.footer-label {
  color: rgba(13, 27, 46, 0.38);
}

.footer-label-row {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 0 var(--content-pad) 0;
}

/* ═══════════════════════════════════════════
   STATS SECTION
   Transparent so the canvas behind it is visible. The content sits above
   the canvas via z-index: 2. Heading (white) is fully legible on the dark
   canvas at the start; it scrolls away before the canvas starts to fade.
═══════════════════════════════════════════ */
.stats {
  position: relative;
  padding: 80px var(--content-pad) 81px;
  overflow-x: clip;
  overflow-y: visible;
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

/* ── Scroll-travel zone ────────────────────────────────────────────────
   Empty strip that provides scroll distance for the canvas fade to
   complete. Contains no visible content and no background of its own.
   The canvas behind it is what the user sees evolving as they scroll.
   ─────────────────────────────────────────────────────────────────── */
.transition-zone {
  position: relative;
  height: 2vh;
}

@media (max-width: 768px) {
  .transition-zone { height: 2vh; }
}


.stats-heading {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 43px;
  letter-spacing: -0.86px;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 72px;
  margin-left: 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 357px);
  gap: 24px;
  justify-content: center;
}

.stat-card {
  position: relative;
  height: 445px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stat-bg {
  position: absolute;
  top: -18.13%;
  left: -33.83%;
  right: -33.83%;
  bottom: -36.24%;
  pointer-events: none;
}

.stat-bg img {
  width: 100%;
  height: 100%;
  display: block;
}

.stat-content {
  position: relative;
  z-index: 1;
  padding: 20px 36px 29px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.stat-number {
  font-family: 'DM Mono', monospace;
  font-weight: 400;
  font-style: normal;
  font-size: 76px;
  line-height: normal;
  color: #fff;
  margin-bottom: 0;
  white-space: nowrap;
}

.stat-number--tight {
  word-spacing: -0.3em;
}

.stat-number--long {
  font-size: 34px;
  white-space: normal;
  line-height: 1.25;
  letter-spacing: normal;
}

/* Pushes the text block to the card's bottom edge regardless of text length,
   so body copy and source lines align across all three cards. */
.stat-bottom {
  margin-top: auto;
}

.stat-desc {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
  margin-bottom: 20px;
}

.stat-source {
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  font-style: normal;
  font-size: 16.8px;
  line-height: 1.6;
  color: #fff;
}

/* ── Stat card hover ──────────────────────────────────────────────────────
   Background lift and glow applied in all motion contexts; transform and
   transitions are gated inside prefers-reduced-motion: no-preference below.
────────────────────────────────────────────────────────────────────────── */
a.stat-card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.stat-card:focus-visible {
  outline: 2px solid rgba(235, 193, 109, 0.75);
  outline-offset: 8px;
  border-radius: 4px;
}

.stat-card:hover .stat-bg {
  filter: brightness(1.1) drop-shadow(0 22px 44px rgba(0, 0, 0, 0.42));
}
.stat-card:hover .stat-number {
  text-shadow: 0 0 32px rgba(255, 255, 255, 0.09);
}

/* ── Stat card entrance animation ──────────────────────────────────────────
   JS adds .stats-animate-ready to the grid before observing, so the hidden
   state only applies when the script has run — cards stay visible if JS fails.
   JS then adds .is-visible to each card when the grid enters the viewport.
────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {

  @keyframes stat-card-in {
    from { opacity: 0; transform: translateY(28px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
  }

  @keyframes stat-content-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
  }

  /* Hidden until JS fires */
  .stats-animate-ready .stat-card   { opacity: 0; }
  .stats-animate-ready .stat-number,
  .stats-animate-ready .stat-bottom { opacity: 0; transform: translateY(10px); }

  /* ── Card entrance — stagger via nth-child ── */
  .stat-card.is-visible {
    animation: stat-card-in 960ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .stat-card:nth-child(2).is-visible { animation-delay: 180ms; }
  .stat-card:nth-child(3).is-visible { animation-delay: 360ms; }

  /* ── Stat number: 180ms after its card starts ── */
  .stat-card.is-visible .stat-number {
    animation: stat-content-in 780ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 180ms;
  }
  .stat-card:nth-child(2).is-visible .stat-number { animation-delay: 360ms; }
  .stat-card:nth-child(3).is-visible .stat-number { animation-delay: 540ms; }

  /* ── Body + source block: 430ms after its card starts ── */
  .stat-card.is-visible .stat-bottom {
    animation: stat-content-in 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 430ms;
  }
  .stat-card:nth-child(2).is-visible .stat-bottom { animation-delay: 610ms; }
  .stat-card:nth-child(3).is-visible .stat-bottom { animation-delay: 790ms; }

  /* ── Team card entrance animation ──────────────────────────────────────────
     Mirrors the stat card pattern: JS adds .team-card-animate-ready before
     observing (progressive enhancement — card stays visible if JS fails),
     then adds .is-visible when the card enters the viewport.
  ────────────────────────────────────────────────────────────────────────── */
  .team-card-animate-ready { opacity: 0; }
  .team-card-animate-ready .team-card-heading { opacity: 0; transform: translateY(10px); }
  .team-card-animate-ready .team-list li      { opacity: 0; transform: translateY(10px); }

  /* Card box */
  .team-card.is-visible {
    animation: stat-card-in 960ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  /* Heading — 180ms after box starts */
  .team-card.is-visible .team-card-heading {
    animation: stat-content-in 780ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 180ms;
  }

  /* List items — stagger from 340ms, 80ms apart */
  .team-card.is-visible .team-list li {
    animation: stat-content-in 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 340ms;
  }
  .team-card.is-visible .team-list li:nth-child(2) { animation-delay: 420ms; }
  .team-card.is-visible .team-list li:nth-child(3) { animation-delay: 500ms; }
  .team-card.is-visible .team-list li:nth-child(4) { animation-delay: 580ms; }
  .team-card.is-visible .team-list li:nth-child(5) { animation-delay: 660ms; }

  /* ── Stat card hover transitions ── */
  .stat-card {
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .stat-bg {
    transition: filter 300ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .stat-number {
    transition: text-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .stat-card:hover {
    transform: translateY(-3px);
  }

  /* ── Testimonial entrance ──────────────────────────────────────────────── */
  @keyframes testimonial-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0);    }
  }

  @keyframes testimonial-border-in {
    from { opacity: 0; transform: scaleY(0); }
    to   { opacity: 1; transform: scaleY(1); }
  }

  /* Hidden until JS fires */
  .testimonial-animate-ready {
    opacity: 0;
  }

  .testimonial-animate-ready .testimonial-border {
    transform: scaleY(0);
    transform-origin: top center;
  }

  /* Quote body */
  .testimonial.is-visible {
    animation: testimonial-in 960ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  /* Gold border line — grows from the top, 100ms after its quote starts */
  .testimonial.is-visible .testimonial-border {
    animation: testimonial-border-in 860ms cubic-bezier(0.16, 1, 0.3, 1) both;
    transform-origin: top center;
    animation-delay: 100ms;
  }

  /* Second quote stagger */
  .testimonial:nth-child(2).is-visible              { animation-delay: 220ms; }
  .testimonial:nth-child(2).is-visible .testimonial-border { animation-delay: 320ms; }

}


/* ═══════════════════════════════════════════
   STATS + PROOF WRAPPER
   z-index: 3 keeps this above the sticky hero (z-index: 2).
   Without a stacking context here, the transparent proof section
   would reveal the sticky hero content behind it. z-index: 3 creates
   one stacking context that sits above the hero as a unit.
   The wrapper's light-blue texture is what shows through transparent
   proof — the hero never bleeds through.
═══════════════════════════════════════════ */
.transition-wrapper {
  position: relative;
  z-index: 3;
  background: #DFE5EC;
  /* Shadow cast upward onto the sticky hero — mirrors the contact-to-footer
     shadow below, giving both transitions the same depth and weight.
     Offset magnitude matches blur radius so the shadow ends exactly at the
     element's bottom edge — no downward bleed onto the contact section. */
  box-shadow: 0 -40px 40px rgba(0, 0, 0, 0.10);
}

/* ═══════════════════════════════════════════
   PROOF SECTION
═══════════════════════════════════════════ */
.proof {
  position: relative;
  z-index: 2;
  background: transparent;
  padding: 72px var(--content-pad) 74px;
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

.proof-left {
  max-width: none;
}

.proof-heading {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 43px;
  letter-spacing: -0.86px;
  line-height: 1.2;
  color: #183557;
  margin: 0;
}

.testimonials {
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin-top: auto;
}

.testimonial {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.testimonial-border {
  width: 3.2px;
  min-height: 90px;
  background: #CD8F2E;
  border-radius: 2px;
  flex-shrink: 0;
}

.testimonial-body {
  padding-left: 20px;
}

.testimonial-body p {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.62;
  color: #F9FAF9;
  margin-bottom: 9px;
  max-width: 459px;
}

.testimonial-body cite {
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 1.6px;
  color: #CD8F2E;
  display: block;
}

/* team card */
.proof-right {
  align-self: start;
  padding-top: 0;
}

.team-card {
  background: #F4F5F7;
  border-radius: 8px;
  box-shadow: 0 40px 120px rgba(7,32,61,0.33);
  padding: 34px 29px 34px 40px;
  position: relative;
}

.team-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  padding: 2px;
  background: linear-gradient(
    to bottom left,
    #AEC1DA 0%,
    #F4F5F7 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.team-card-heading {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 23px;
  letter-spacing: -0.23px;
  color: #0d1b2e;
  line-height: normal;
  margin-bottom: 23px;
}

.team-list {
  display: flex;
  flex-direction: column;
}

.team-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 7px 0;
}

.team-bullet {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-bullet::before {
  content: '';
  width: 9.5px;
  height: 9.5px;
  background: #CD8F2E;
  transform: rotate(-45deg);
  display: block;
}

.team-list li > span:last-child {
  font-family: 'DM Mono', monospace;
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  letter-spacing: 1.6px;
  line-height: 1.55;
  color: #0d1b2e;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════
   SERVICES SECTION
═══════════════════════════════════════════ */
.services {
  position: relative;
  z-index: 2;
  background: transparent;
  padding: 96px 0 var(--section-gap-outer);
}

.services-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--content-pad);
}

.services-header {
  margin-bottom: 88px;
}

.services-heading {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 49px;
  letter-spacing: -0.98px;
  line-height: 1.18;
  color: #0d1b2e;
}


/* ── Four-column open services grid ─────────────────────────────────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 56px;
}

.service-tile {
  width: 88px;
  height: 88px;
  border-radius: 4px;
  background: linear-gradient(195.66deg, #EBC16D 16.456%, #B78232 110.38%);
  box-shadow:
    0 4px 20px 0 rgba(7, 32, 61, 0.18),
    inset 0 3.35px 8.7px 4.19px rgba(255, 255, 255, 0.22),
    inset 0 0 0 1.5px rgba(241, 197, 92, 0.88);
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.service-tile svg { display: block; }

.service-item-name {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  color: #0d1b2e;
  margin-bottom: 14px;
}

.service-item-desc {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(13, 27, 46, 0.65);
  max-width: 240px;
}

/* ── Service tile hover ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .service-tile {
    transition:
      transform  280ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
      box-shadow 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
      filter     280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .service-item:hover .service-tile {
    transform: translateY(-2px) scale(1.02);
    filter: brightness(1.08);
    box-shadow:
      0 8px 30px 3px rgba(7, 32, 61, 0.24),
      inset 0 3.35px 8.7px 4.19px rgba(255, 255, 255, 0.22),
      inset 0 0 0 1.5px rgba(241, 222, 125, 1);
  }

  /* Shine sweep — parked off-screen left at rest, same as .btn-gold */
  .service-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
      108deg,
      rgba(255, 230, 140, 0)    28%,
      rgba(255, 235, 150, 0.10) 46%,
      rgba(255, 248, 185, 0.07) 50%,
      rgba(255, 235, 150, 0.10) 54%,
      rgba(255, 230, 140, 0)    72%
    );
    transform: translateX(-160%);
    pointer-events: none;
  }

  .service-item:hover .service-tile::before {
    animation: btn-light-sweep 0.65s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  /* ── Services entrance animation ─────────────────────────────────────────── */
  @keyframes svc-item-in {
    from { opacity: 0; transform: translateY(24px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
  }

  @keyframes svc-tile-brighten {
    from { filter: brightness(0.72); }
    to   { filter: brightness(1); }
  }

  /* Initial hidden states — JS adds .services-animate-ready before observing */
  .services-animate-ready .service-item  { opacity: 0; }

  /* Service items stagger in left to right */
  .services.is-visible .service-item {
    animation: svc-item-in 960ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .services.is-visible .service-item:nth-child(1) { animation-delay: 240ms; }
  .services.is-visible .service-item:nth-child(2) { animation-delay: 420ms; }
  .services.is-visible .service-item:nth-child(3) { animation-delay: 600ms; }
  .services.is-visible .service-item:nth-child(4) { animation-delay: 780ms; }

  /* Icon tiles brighten as each item appears */
  .services.is-visible .service-item:nth-child(1) .service-tile { animation: svc-tile-brighten 860ms cubic-bezier(0.16, 1, 0.3, 1) 300ms both; }
  .services.is-visible .service-item:nth-child(2) .service-tile { animation: svc-tile-brighten 860ms cubic-bezier(0.16, 1, 0.3, 1) 480ms both; }
  .services.is-visible .service-item:nth-child(3) .service-tile { animation: svc-tile-brighten 860ms cubic-bezier(0.16, 1, 0.3, 1) 660ms both; }
  .services.is-visible .service-item:nth-child(4) .service-tile { animation: svc-tile-brighten 860ms cubic-bezier(0.16, 1, 0.3, 1) 840ms both; }
}

/* ═══════════════════════════════════════════
   CONTACT SECTION
═══════════════════════════════════════════ */
.contact {
  position: relative;
  z-index: 2;
  background: var(--color-dark-bg);
  padding: 90px 0 99px;
  overflow: visible;
  /* Shadow cast onto footer, reinforcing the floating-panel depth */
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.contact-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--content-pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
}

.contact-heading {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 43px;
  line-height: 1.18;
  letter-spacing: -0.86px;
  color: #fff;
  margin-bottom: 32px;
}

.contact-desc {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
  max-width: 420px;
}

.contact-form-wrap {
  display: flex;
  justify-content: flex-end;
  position: relative; /* anchors the absolutely-positioned success card */
}

.contact-form {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 29px 108px rgba(0,0,0,0.18);
  width: 100%;
  padding: 43px 47px 47px;
  margin-top: 0;
}

.form-field {
  margin-bottom: 31px;
}

.form-label {
  display: block;
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  font-style: normal;
  font-size: 14px;
  letter-spacing: 1.73px;
  color: #e7b16b;
  margin-bottom: 9px;
}

.form-label--dark {
  color: #0e2340;
}

.form-input {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.21;
  color: rgba(51,51,50,0.5);
  padding: 0 0 9px;
  appearance: none;
  -webkit-appearance: none;
}

.form-input::placeholder {
  color: rgba(51,51,50,0.5);
}

.form-select {
  cursor: pointer;
  background-image: none;
}

.form-line {
  height: 1px;
  background: rgba(51,51,50,0.75);
  margin-top: 0;
}

/* checkboxes grid */
.form-checkboxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;
  margin-top: 13px;
}

.form-check {
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
}

/* Hide native input while keeping it accessible for keyboard and screen readers */
.form-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.check-box {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 2px solid #e7b16b;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 180ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Checkmark drawn with CSS borders */
.check-box::after {
  content: '';
  width: 5px;
  height: 9px;
  border-right: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: 0;
  transition: opacity 140ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Checked state */
.form-check input[type="checkbox"]:checked + .check-box {
  background: linear-gradient(195.66deg, #f1c55c 16.456%, #855e20 110.38%);
  border-color: #f1c55c;
}

.form-check input[type="checkbox"]:checked + .check-box::after {
  opacity: 1;
}

/* Keyboard focus ring */
.form-check input[type="checkbox"]:focus-visible + .check-box {
  outline: 2px solid #e7b16b;
  outline-offset: 3px;
}

.check-label {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.21;
  color: rgba(51,51,50,0.5);
  white-space: nowrap;
}

/* ── Honeypot (visually removed but in DOM for bots) ── */
.form-honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Submit button loading state ── */
.btn-primary--submit.is-loading {
  pointer-events: none;
  opacity: 0.72;
  cursor: default;
}
.btn-primary--submit.is-loading::before {
  display: none;
}

/* ── Form error messages ── */
.form-error {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #b94040;
  margin-top: 14px;
  line-height: 1.5;
}
.form-field-error {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #b94040;
  margin-top: 6px;
  line-height: 1.4;
}

/* ── Temporary unavailability notice ── */
.form-notice {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.09em;
  color: rgba(51, 51, 50, 0.65);
  margin-top: 16px;
  margin-bottom: 0;
  line-height: 1.65;
  text-align: center;
}
.form-notice-link {
  color: #e7b16b;
  text-decoration: none;
}
.form-notice-link:hover {
  text-decoration: underline;
}

/* ── Success panel (replaces the form after submission) ── */
.form-success {
  /* Stretches to match the form card exactly: same four edges, same height.
     bottom: 0 is the key — without it the card shrinks to content height. */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 29px 108px rgba(0,0,0,0.18);
  padding: 43px 47px 47px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.form-success[hidden] { display: none; }

/* Floating card illustration */
.success-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding-bottom: 8px;
  padding-left: 44px;
  margin-top: 105px;
  margin-bottom: 16px;
  transform: scale(1.3);
  transform-origin: center bottom;
}

.success-card-float {
  position: relative;
  z-index: 1;
  animation: gl-float-card 7s ease-in-out infinite;
  will-change: transform;
}

/* ── Card hover layer ───────────────────────────────────────────────────────
   Sits between .success-card-float (which owns the rotation/float animation)
   and the card contents. Applying hover transforms here avoids clobbering the
   animation's transform on the parent element. Reuses the same shimmer sweep,
   timing, easing, and brightness values as .btn-primary and .service-tile. */
.success-card-inner {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  clip-path: inset(0 round 14px);
  cursor: default;
}

/* Shimmer — parked off-screen left; swept right on hover via btn-light-sweep */
.success-card-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    108deg,
    rgba(255, 230, 140, 0)    28%,
    rgba(255, 235, 150, 0.10) 46%,
    rgba(255, 248, 185, 0.07) 50%,
    rgba(255, 235, 150, 0.10) 54%,
    rgba(255, 230, 140, 0)    72%
  );
  transform: translateX(-160%);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .success-card-inner {
    transition: transform 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .success-card-inner:hover {
    transform: translateY(-2px) scale(1.02);
  }

  .success-card-inner:hover::before {
    animation: btn-light-sweep 0.65s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
}

.success-membership-card {
  display: block;
  width: 402px;
  max-width: 92%;
  height: auto;
  border-radius: 14px;
  transition: filter 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.success-card-inner:hover .success-membership-card {
  filter: brightness(1.08);
}

/* ── Card personalisation overlay ──
   Sits inside .success-card-float (position: relative) so it rotates and
   scales identically with the card animation and the parent scale(1.3).
   All % values are relative to the SVG viewBox (643 × 464), which equals
   the img's rendered dimensions at every breakpoint. */
.success-card-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  --card-text-left:   16%;
  --card-text-right:  24%;
  --card-text-bottom: 29%;
}

.success-card-text {
  position: absolute;
  bottom: var(--card-text-bottom);
  font-family: 'DM Mono', monospace;
  font-weight: 400;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.08em;
  color: #FFE5B7;
  text-transform: uppercase;
  white-space: nowrap;
}

.success-card-name {
  left: var(--card-text-left);
  max-width: 34%;
  overflow: hidden;
}

.success-card-since {
  right: var(--card-text-right);
}

.success-card-shadow {
  position: absolute;
  bottom: 4px;
  left: calc(50% + 26px);
  width: 282px;
  height: 18px;
  border-radius: 50%;
  background: rgba(7, 32, 61, 0.32);
  filter: blur(12px);
  transform-origin: center;
  animation: gl-float-shadow 7s ease-in-out infinite;
}

@keyframes gl-float-card {
  0%, 100% { transform: rotate(-3deg) translateY(0px); }
  50%       { transform: rotate(-2deg) translateY(-8px); }
}

@keyframes gl-float-shadow {
  0%, 100% { transform: translateX(-50%) scaleX(1);    opacity: 0.28; }
  50%       { transform: translateX(-50%) scaleX(0.78); opacity: 0.14; }
}

@media (prefers-reduced-motion: reduce) {
  .success-card-float  { animation: none; transform: rotate(-3deg); }
  .success-card-shadow { animation: none; opacity: 0.22; transform: translateX(-50%) scaleX(0.9); }
}

.success-heading {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: #07203D;
  margin: 25px 0 16px;
  position: relative;
  top: -55px;
}

.success-body {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(7, 32, 61, 0.52);
  margin: 0;
  max-width: 600px;
  position: relative;
  top: -43px;
}

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
.footer {
  background-color: #b8c8d8;
  background-image: url('hero-bg-light.png');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  padding: 40px 0 0;
  overflow: hidden;
}

.footer-inner {
  display: flex;
  gap: 84px;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 0 var(--content-pad) 36px;
}

.footer-col h4.footer-heading {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.21;
  color: #0d1b2e;
  margin-bottom: 10px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.footer-col ul li a {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.21;
  color: rgba(13,27,46,0.6);
  transition: color 0.2s;
}

.footer-col ul li a:hover {
  color: #0d1b2e;
}

/* GOLDILOCKS watermark */
.footer-watermark {
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  font-style: normal;
  font-size: 160px;
  letter-spacing: 17.6px;
  line-height: 1;
  white-space: nowrap;
  padding-left: 0;
  text-align: center;
  overflow: hidden;
  /* gold gradient text + cursor-tracked metallic highlight (JS sets --mx / --my) */
  background:
    radial-gradient(
      circle 300px at var(--mx, -200%) var(--my, -200%),
      rgba(255, 248, 195, 0.52)  0%,
      rgba(255, 235, 150, 0.22) 40%,
      transparent               68%
    ),
    linear-gradient(195.66deg, #EBC16D 16.456%, #B78232 110.38%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  padding-top: 56px;
  padding-bottom: 14px;
}

.footer-source {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: normal;
  line-height: 1.6;
  color: rgba(24, 53, 87, 0.45);
  text-align: center;
  max-width: 380px;
  margin: 0 auto 12px;
}

.footer-legal {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: normal;
  color: rgba(24, 53, 87, 0.65);
  text-align: center;
  margin-top: 8px;
  padding-bottom: 28px;
}

/* ── Footer sticky reveal ────────────────────────────────────────────────────
   The footer is fixed to the bottom of the viewport (z-index: 1), sitting
   behind all page content (hero, stats, proof, services, contact: z-index: 2).
   As the contact section scrolls upward the footer is uncovered underneath —
   exactly the effect of a panel sliding away to reveal what was always there.
   Using z-index: 1 (not -1) keeps the footer in the interactive layer so
   hover events reach the GOLDILOCKS watermark when it is visible.
   JS sets --footer-height on <html> and adds the classes below so the body
   has enough scroll travel to fully expose the footer.
   Progressive enhancement: without JS the footer renders in normal document
   flow with no reveal effect.
──────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {

  .footer.footer-sticky-reveal {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
  }

  body.footer-sticky-reveal-active {
    padding-bottom: var(--footer-height, 0px);
  }

}

/* ═══════════════════════════════════════════
   TEXT REVEAL ANIMATION
   Managed by text-reveal.js.
   Hero elements reveal on page load (staggered).
   Section headings reveal on scroll entry.
   All states gated inside no-preference so
   reduced-motion users always see text.
═══════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {

  @keyframes text-reveal-in {
    from { opacity: 0; transform: translateY(14px); filter: blur(8px); }
    to   { opacity: 1; transform: translateY(0);    filter: blur(0px); }
  }

  /* JS adds text-reveal-ready to set the initial hidden state */
  .text-reveal-ready {
    opacity: 0;
    will-change: transform, opacity, filter;
  }

  /* JS adds is-revealed to trigger the reveal */
  .text-reveal-ready.is-revealed {
    animation: text-reveal-in 1050ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  /* ── Why Goldilocks word reveal ─────────────────────────────────────────
     JS splits .proof-heading into .proof-word spans and toggles
     .proof-word--lit as each word scrolls into the reveal front. */
  .proof-word {
    opacity: 0.18;
    transition: opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: inline;
  }

  .proof-word--lit {
    opacity: 1;
  }

  /* Credential phrases glow into the button gold gradient when activated.
     The gradient is applied only at the lit state; at opacity 0.18 the
     swap from text colour to gradient is invisible, so the opacity
     transition alone creates the "glow in" effect. */
  .proof-word--gold.proof-word--lit {
    background: linear-gradient(195.66deg, #EBC16D 16.456%, #B78232 110.38%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* One-shot soft-light catch as each gold phrase first activates.
     JS staggers each word 110 ms left-to-right so the effect reads as
     light moving across the phrase rather than a uniform flash.
     Brightness barely lifts — the effect should feel almost subconscious. */
  @keyframes gold-shimmer {
    0%   { filter: brightness(1); }
    45%  { filter: brightness(1.13); }
    100% { filter: brightness(1); }
  }

  .proof-word--gold.proof-word--shimmer {
    animation: gold-shimmer 950ms ease-in-out forwards;
  }

}

/* ═══════════════════════════════════════════
   RESPONSIVE — TABLET (≤ 1240px)
═══════════════════════════════════════════ */
@media (max-width: 1240px) {
  .hero-headline { font-size: 64px; width: auto; max-width: 560px; color: #07203D; }
  /* Lock inherits height: 4.0em from base — em units scale correctly with 64px font */
  .hero-sub { width: auto; max-width: 440px; color: #07203D; }
  .hero-content { padding: 100px 60px 136px; }
  .hero-radar-container { display: none; }

  .nav-inner        { padding: 30px 60px 0; }
  .sticky-nav-inner { padding: 0 60px; }

  .stats { padding: 68px 60px 80px; }
  .stats-heading { font-size: 40px; }
  .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .stat-number { font-size: 64px; }
  .stat-number--long { font-size: 28px; }

  .proof { padding: 72px 60px 80px; }
  .proof-heading { font-size: 40px; color: #183557; }
  .testimonials { margin-top: 0; }
  .testimonial-body p { max-width: 100%; }

  .services { padding: 80px 0 88px; }
  .services-inner { padding: 0 60px; }
  .services-heading { font-size: 42px; color: #0d1b2e; }

  .services-grid { column-gap: 30px; }

  .contact { padding: 80px 0 80px; }
  .contact-desc { font-size: 18px; max-width: 360px; }
  .success-body { font-size: 18px; }
  .contact-inner { grid-template-columns: 1fr; padding-inline: 60px; }
  .contact-form-wrap { justify-content: flex-start; }
  .contact-form { margin-top: 48px; width: 100%; }
  .success-stage { transform: none; }
  .success-membership-card { width: 366px; }
  .success-heading { font-size: 26px; }

  .footer { padding: 32px 0 0; }
  .footer-inner { gap: 42px; padding-inline: 60px; }
  .footer-watermark { font-size: 100px; letter-spacing: 12px; padding-top: 40px; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 768px)
═══════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── Navigation ── */
  .nav-inner        { padding: 20px 24px 0; }
  .sticky-nav-inner { padding: 0 24px; }
  .nav-logo { gap: 8px; }
  .nav-logo-text { font-size: 21px; }
  .nav-logo-icon { width: 31px; height: 31px; }
  .btn-primary--nav { display: none; }

  /* ── Hero — centered content, radar below ── */
  /* 100svh = small viewport height (excludes browser chrome on iOS).
     Fallback 100vh for older browsers. */
  /* min-height: 0 lets padding drive the hero height so above/below whitespace
     is symmetrical — the fixed min-height added ~9px of unmatched bottom space. */
  .hero { min-height: 0; }

  /* Radar removed in V2 */
  .hero-radar-container { display: none; }

  /* Equal top and bottom padding makes the section geometrically symmetric.
     The status bar + nav (~98px on Face ID iPhones) creates the perceived
     above-headline gap; 120px bottom matches that total padding. */
  .hero-content {
    padding: 120px 24px 103px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 5;
  }
  /* Flex column (same as desktop) so margin-bottom on hero-line1 controls the
     inter-line gap explicitly — avoids the large block line-box that the lock
     creates when the headline is display:block with display:inline children. */
  .hero-headline { font-size: 46px; line-height: 1.10; letter-spacing: -0.8px; width: auto; max-width: 360px; color: #07203D; display: flex; flex-direction: column; align-items: center; }
  /* margin-bottom controls the actual visual gap between the two headline lines
     (line-height on the flex container doesn't move flex items apart — only
     margin does). -1.60em gives ~1.10 baseline-to-baseline spacing at 4.4em lock,
     adding ~5px of breathing room vs the previous -1.65em. */
  .hero-line1 { display: flex; justify-content: center; align-items: center; white-space: nowrap; margin-bottom: -1.77em; }
  .hero-lock { height: 4.725em; margin: 0 -1.67em 0 -1.32em; transform: translateY(0px); transform-origin: center center; animation: none; }
  .hero-sub { font-size: 16px; width: auto; max-width: none; margin-top: 20px; margin-bottom: 20px; color: #07203D; }
  .br-mobile { display: block; }
  .br-desktop { display: none; }
  .btn-gold--hero { width: 100%; max-width: 280px; font-size: 15px; height: 56px; }

  /* Radar — 135vw so it spans past both viewport edges (cinematic crop).
     Centered via radar-rotate-mobile keyframe which bakes translateX(-50%)
     into the rotation — avoids transform conflict with the CSS animation. */
  .radar-svg-img {
    width: 135vw;
    height: 135vw;
    left: 50%;
    margin-left: 0;
    top: 388px;
    animation: radar-rotate-mobile 52s linear infinite;
  }

  /* Wider scan bar on mobile: 120vw centered over the 135vw radar.
     left: -10vw places the gradient's 8% stop (first visible gold) at the
     viewport left edge and the 92% stop at the right edge — the gradient
     starts and ends at natural transparency with no hard clip.
     Outer glow expanded from 32px to 44px for a more atmospheric feel. */
  .radar-scan-bar {
    left: -10vw;
    width: 120vw;
    filter:
      drop-shadow(0 0  5px rgba(246, 202, 91, 0.85))
      drop-shadow(0 0 18px rgba(201, 168, 76, 0.55))
      drop-shadow(0 0 44px rgba(201, 168, 76, 0.28));
  }

  /* Fade the radar/background image into the dark at the hero bottom so
     overflow:hidden on .hero doesn't produce a hard horizontal cutoff.
     z-index 3 puts this above the radar container (2) but below the
     hero text (5), so content is never obscured. */
  .hero::after {
    content: none;
  }

  /* ── Section labels ── */
  .section-label { font-size: 12px; letter-spacing: 0.22em; margin-bottom: 20px; }

  /* ── Trusted By — 2×2 grid on mobile ── */
  .trusted-by { padding: 28px 0 14px; }
  .trusted-by-inner {
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 0 28px;
  }
  .trusted-label { margin: 0; text-align: center; }
  /* Switch from horizontal flex to a 2×2 grid.
     Logos are sized by width so all four share the same
     visual footprint; justify-items: center keeps each
     logo centered in its cell regardless of intrinsic width. */
  .trusted-logos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    align-items: center;
    gap: 14px;
    width: 100%;
    overflow-x: visible;
    -webkit-overflow-scrolling: auto;
    padding-bottom: 25px;
  }
  /* Per-logo mobile sizing accounts for each SVG's intrinsic whitespace.
     Vanish (177×71 viewBox) has ~45% vertical padding built in — setting it
     by width causes the element to be 51px tall while the visible mark is
     only ~28px, inflating the top row. Using height: 52px gives the same
     ~28px of visible content at a controlled element height.
     UMBRA (6.1:1 aspect) is constrained by width so it doesn't overflow
     its ~158px grid cell. Squads and Kinetiq fill their viewBox height, so
     width-based sizing gives the right visual weight. */
  .trusted-logo:nth-child(1) img { width: 131px; height: auto; }   /* UMBRA — wide wordmark */
  .trusted-logo:nth-child(2) img { width: auto;  height: 60px; transform: translateX(11px); }   /* Vanish — compensates SVG whitespace; translateX corrects 10-unit left bias in viewBox */
  .trusted-logo:nth-child(3) img { width: 135px; height: auto; }   /* SQUADS */
  .trusted-logo:nth-child(4) img { width: 134px; height: auto; }   /* KINETIQ */

  /* ── Stats ── */
  .stats { padding: 46px 24px 62px; overflow-x: clip; overflow-y: visible; }
  .stats-heading { font-size: 34px; line-height: 1.2; letter-spacing: -0.98px; margin-bottom: 52px; margin-left: 0; }
  .stats-grid { grid-template-columns: 1fr; gap: 28px; }
  .stat-number { font-size: 60px; }
  /* Mobile stat card: uses stat-card-bg-mobile.svg as the card shape.
     aspect-ratio: 399/324 matches the SVG viewBox exactly so the card and SVG
     share the same proportions — no stretching, chamfer angle preserved.
     filter: drop-shadow() follows the SVG's alpha (the pentagon is opaque;
     outside is transparent) to cast the shadow at the true card boundary. */
  .stat-bg { display: none; }
  .stat-card {
    height: auto;
    aspect-ratio: 399 / 324;
    background: url('stat-card-bg-mobile.svg') no-repeat center / 100% 100%;
    filter: drop-shadow(0 16px 44px rgba(0, 0, 0, 0.20));
  }
  .stat-card:hover { filter: brightness(1.08) drop-shadow(0 22px 44px rgba(0, 0, 0, 0.42)); }
  .stat-bottom { margin-top: auto; }
  .stat-desc { font-size: 16px; line-height: 1.5; }

  /* ── Proof ── */
  .proof { padding: 48px 24px 56px; }
  .proof-heading { font-size: 34px; line-height: 1.2; letter-spacing: -0.98px; }
  .testimonials { margin-top: 0; gap: 28px; }
  .testimonial-body p { font-size: 15px; line-height: 1.62; }
  .testimonial-body cite { font-size: 11px; letter-spacing: 1.4px; }
  .team-card { padding: 32px 24px 36px; margin-top: 24px; }
  .team-card-heading { font-size: 22px; margin-bottom: 20px; padding-left: 10px; }
  .team-list { padding-left: 10px; }
  .team-list li { padding: 9px 0; }
  .team-list li > span:last-child { font-size: 12px; letter-spacing: 1.2px; line-height: 1.6; }

  /* ── Services — single column, icon-left horizontal layout ── */
  .services { padding: 48px 0 70px; }
  .services-inner { padding: 0 24px; }
  .services-heading { font-size: 34px; line-height: 1.2; }

  .services-header { margin-bottom: 48px; }
  .services-grid { grid-template-columns: 1fr; column-gap: 0; row-gap: 36px; }

  /* Horizontal two-column layout: icon tile left, name + desc right */
  .service-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-template-rows: auto auto;
    column-gap: 20px;
    align-items: start;
  }
  .service-tile {
    grid-row: 1 / 3;
    width: 80px;
    height: 80px;
    margin-bottom: 0;
  }
  .service-item-name { font-size: 18px; margin-bottom: 6px; align-self: end; }
  .service-item-desc { max-width: 100%; font-size: 14px; }

  /* ── Contact ── */
  .contact { padding: 52px 0 52px; }
  .contact-inner { padding-inline: 24px; }
  .contact-heading { font-size: 34px; line-height: 1.2; letter-spacing: -0.98px; }
  .contact-desc { font-size: 16px; }
  .contact-form { padding: 24px 20px 32px; margin-top: 32px; }
  .form-success { padding: 24px 20px 32px; }
  .success-stage { padding-bottom: 4px; padding-left: 28px; margin-top: 12px; margin-bottom: 10px; transform: none; }
  .success-membership-card { width: 315px; max-width: 90%; }
  .success-heading { font-size: 24px; margin-top: 12px; top: -26px; }
  .success-body { max-width: 100%; top: -18px; }
  .success-card-shadow { width: 222px; left: calc(50% + 14px); }
  .success-card-text { font-size: 8px; }
  .form-microcopy { white-space: normal; letter-spacing: 0.07em; }
  .btn-gold--submit { font-size: 16px; height: 60px; margin-top: 8px; }
  .form-input { font-size: 18px; }
  .form-checkboxes { grid-template-columns: 1fr; }

  /* ── Footer ── */
  .footer { padding: 22px 0 0; }
  /* Desktop uses var(--content-pad) = 160px which collapses to ~55px on mobile.
     Override to standard 24px gutters and center the label. */
  .footer-label-row { padding: 0 24px; text-align: center; }
  .footer-label { white-space: nowrap; }
  /* Hide link columns on mobile — simplified footer shows wordmark only. */
  .footer-inner { display: none; }
  /* Reset desktop padding-left: var(--content-pad) that clips GOLDILOCKS on mobile.
     font-size is derived for n=10 chars (GOLDILOCKS), R=0.6 em advance width,
     letter-spacing=2px, targeting ~96% of content width (100vw − 48px gutters):
       10 × 0.6 × fontSize + 10 × 2 = 100vw − 48  →  fontSize = 16.67vw − 11.33px
     Rounded to calc(16vw − 11px) for a small safety margin (≈96% fill at R=0.6).
     overflow:visible overrides the desktop overflow:hidden so no character is ever
     clipped; html { overflow-x: hidden } prevents any lateral scroll. */
  .footer-watermark {
    font-size: calc(16vw - 11px);
    letter-spacing: 2px;
    /* text-align:center symmetrically distributes the ~4% gap on each side.
       text-indent compensates the 2px trailing letter-spacing (LS/2 = 1px)
       that CSS adds after the final "S", which would otherwise shift the
       glyph optical center 1px left of the container center. */
    text-align: center;
    text-indent: 1px;
    overflow: visible;
    padding-top: 36px;
    padding-left: 0;
    padding-bottom: 40px;
  }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (≤ 480px)
═══════════════════════════════════════════ */
@media (max-width: 480px) {
  .hero-headline { font-size: 38px; }
}

/* ═══════════════════════════════════════════
   SHORT VIEWPORT — hero rhythm adjustments
   Scoped to desktop (min-width: 769px). Rules cascade largest→smallest;
   each tier overrides the one above it for shorter viewports.
     ≤ 850px — shift content up via transform (trusted-by unaffected)
     ≤ 820px — padding swap keeps content high, resets transform
     ≤ 800px — compress overall hero height so logos stay visible
     ≤ 720px — heavier compression for small / split windows
═══════════════════════════════════════════ */

/* Tier 1 — translate content up ~32px. Transform doesn't affect layout flow
   so the Trusted By row stays exactly in place. */
@media (min-width: 769px) and (max-height: 850px) {
  .hero-content { transform: translateY(-20px); }
}

/* Tier 2 — at shorter heights use a padding swap instead (keeps total
   .hero-content height constant → trusted-by still doesn't move).
   Reset the transform so tiers don't compound. */
@media (min-width: 769px) and (max-height: 820px) {
  .hero-content { padding-top: 80px; padding-bottom: 200px; transform: none; }
}

/* Tier 3 — compress total hero height so logos are visible. */
@media (max-height: 800px) and (min-width: 769px) {
  .hero-content { padding-top: 88px; padding-bottom: 100px; transform: none; }
}

/* Tier 4 — heavier compression for small / split windows. */
@media (max-height: 720px) and (min-width: 769px) {
  .hero-content { padding-top: 64px; padding-bottom: 64px; transform: none; }
  .hero-sub { margin-top: 18px; margin-bottom: 22px; }
  .trusted-by { margin-top: -28px; }
}

/* ── Mobile stat card: filter transition (motion-gated) ────────────────────
   On mobile the stat card uses filter: drop-shadow() for its shadow and
   filter: brightness() + drop-shadow() on hover. This block adds filter to
   the existing transform transition so both animate smoothly on hover.
   It must appear after the main @media (max-width: 768px) block so the
   combined transition declaration takes precedence.
────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .stat-card {
    transition:
      transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
      filter  300ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  @keyframes hero-lock-float-mobile {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-3px); }
  }
  .hero-lock { animation: hero-lock-float-mobile 5s ease-in-out infinite; }
}