/* ═══════════════════════════════════════════════════════════════════════════
   LAUNCHPAD TECHNOLOGY — MOTION + COMPONENTS LAYER

   Cinematic motion + new section components, layered ON TOP OF the existing
   tokens.css / base.css / components.css / layout.css cascade. Loaded last.

   Sections covered:
     1. Cinematic keyframes (parallax, halo drift, trace draw, pulse)
     2. Hero starfield overlay (3 deterministic SVG layers)
     3. Hero halo upgrade (dual drifting halos)
     4. Headline accent underline (animated brand-blue stroke)
     5. Divisions strip (3-up cards on dark)
     6. Products portfolio (8-up cards on dark with status badges)
     7. Outcomes / case-study cards (problem / solution / metric trio)
     8. Trust strip with monogram chips
     9. Reveal staggered children
    10. Reduced-motion overrides
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── 1. CINEMATIC KEYFRAMES ───────────────────────────────────────────── */

@keyframes lp-halo-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-2%, 1.5%, 0) scale(1.05); }
}

@keyframes lp-star-drift-slow {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-12%, -6%, 0); }
}

@keyframes lp-star-drift-fast {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-22%, -11%, 0); }
}

@keyframes lp-trace-draw {
  0%   { stroke-dashoffset: 600; }
  100% { stroke-dashoffset: 0; }
}

@keyframes lp-pulse-soft {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

@keyframes lp-fade-up {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}


/* ── 2. HERO STARFIELD OVERLAY ────────────────────────────────────────── */
/* Three SVG layers laid over the existing .hero-photo / .hero-overlay /
   .hero-halo stack. Each layer drifts at a different speed → parallax. */

.hero-starfield {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-starfield .star-layer {
  position: absolute;
  inset: -10% -10% -10% -10%;
  width: 120%;
  height: 120%;
  will-change: transform;
}

.hero-starfield .star-layer--slow {
  /* Big dust layer — barely moves. Sells "depth" without drawing the eye. */
  animation: lp-star-drift-slow 180s linear infinite alternate;
}

.hero-starfield .star-layer--mid {
  /* Mid layer drifts at a moderate pace — counter-direction for parallax depth. */
  animation: lp-star-drift-fast 110s linear infinite alternate-reverse;
}

.hero-starfield .star-layer--bright {
  /* Bright anchor stars with glow halos. Gentle drift — they're the "fixed" */
  /* foreground reference points. */
  animation: lp-star-drift-fast 70s linear infinite alternate;
}

/* Legacy --fast class still works (anything that hasn't been re-tagged). */
.hero-starfield .star-layer--fast {
  animation: lp-star-drift-fast 70s linear infinite alternate;
}


/* ── 3. HERO HALO UPGRADE ─────────────────────────────────────────────── */
/* The existing .hero-halo (top-right) gets a slow drift. A second halo is
   added in the bottom-left for depth, with a different drift phase. */

.hero-halo {
  animation: lp-halo-drift 18s ease-in-out infinite;
  will-change: transform;
}

/* When the hero is starfield-only (no photo) we boost the halos a touch — */
/* otherwise the navy reads flat. */
.hero--starfield .hero-halo {
  background: radial-gradient(circle at 78% 22%,
              rgba(68, 144, 226, 0.28), transparent 55%);
}

.hero-halo--soft {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 18% 78%,
              rgba(96, 165, 250, 0.10), transparent 60%);
  mix-blend-mode: screen;
  animation: lp-halo-drift 18s ease-in-out infinite;
  animation-delay: -9s;
  will-change: transform;
}

.hero--starfield .hero-halo--soft {
  background: radial-gradient(circle at 18% 78%,
              rgba(96, 165, 250, 0.16), transparent 60%);
}

/* Subtle bottom fade so the next section transitions cleanly. */
.hero--starfield::after,
.hero--photo::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 9rem;
  background: linear-gradient(to bottom, transparent, var(--color-bg-dark));
  pointer-events: none;
  z-index: 1;
}


/* ── 3.5. PHOTO-HERO TREATMENT ────────────────────────────────────────── */
/*
   When the hero variant is .hero--photo, we have a JPEG underneath. The
   default .hero-overlay (in layout.css) wasn't dense enough for the new
   plexus image — the headline column on the bottom-left needs more
   darkening to keep the H1 at WCAG AA. We override:
     - The overlay: layered gradients that are heavier in the bottom-left
       corner where the H1 sits, and lighter top-right so the cyan plexus
       still glows through.
     - Halos: keep the brand-blue accent halo but at lower opacity since
       the photo already provides cyan tones.
     - Starfield: drop opacity so the SVG dust doesn't fight the photo's
       network nodes.
*/

.hero--photo .hero-photo img {
  /* Slight desaturation + cool tint so the photo sits inside the brand
     palette rather than competing with it. */
  filter: saturate(0.92) brightness(0.85);
}

.hero--photo .hero-overlay {
  background:
    /* Bottom-left dense pool — protects the H1 contrast */
    radial-gradient(ellipse 80% 70% at 15% 80%,
                    rgba(11, 17, 32, 0.85) 0%,
                    rgba(11, 17, 32, 0.45) 60%,
                    rgba(11, 17, 32, 0.20) 100%),
    /* Diagonal navy wash — biases the whole composition cool */
    linear-gradient(135deg,
                    rgba(11, 17, 32, 0.65) 0%,
                    rgba(11, 17, 32, 0.30) 55%,
                    rgba(11, 17, 32, 0.55) 100%),
    /* Bottom fade-to-navy for section transition */
    linear-gradient(to bottom,
                    rgba(11, 17, 32, 0) 40%,
                    rgba(11, 17, 32, 0.45) 100%);
}

/* Halos at lower opacity — the photo already provides colour cues. */
.hero--photo .hero-halo {
  background: radial-gradient(circle at 78% 22%,
              rgba(68, 144, 226, 0.16), transparent 55%);
  mix-blend-mode: screen;
}

.hero--photo .hero-halo--soft {
  background: radial-gradient(circle at 18% 78%,
              rgba(96, 165, 250, 0.06), transparent 60%);
}

/* Starfield is now decorative-only — keep it subtle on top of the photo. */
.hero--photo .hero-starfield {
  opacity: 0.55;
  mix-blend-mode: screen;
}

/* Mobile: the smaller variant doesn't need as heavy an overlay (text already
   stacks larger relative to image), and we kill the side-vignette to give
   the lockup its full impact. */
@media (max-width: 768px) {
  .hero--photo .hero-overlay {
    background:
      linear-gradient(180deg,
                      rgba(11, 17, 32, 0.55) 0%,
                      rgba(11, 17, 32, 0.85) 100%);
  }
}

/* Reduced motion — kill the photo's Ken-Burns animation defined in
   layout.css. The starfield + halos are already handled by the global rule
   in tokens.css. */
@media (prefers-reduced-motion: reduce) {
  .hero--photo .hero-photo img { animation: none !important; transform: none; }
}


/* ── 4. HEADLINE ACCENT UNDERLINE ─────────────────────────────────────── */
/* Wraps a span in the H1 — gradient-text fill + a thin pulsing underline. */

.hero h1 .accent {
  position: relative;
  display: inline-block;
  background: linear-gradient(90deg, #93C5FD 0%, var(--lp-brand-blue) 50%, #93C5FD 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.hero h1 .accent::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.7), transparent);
  animation: lp-pulse-soft 4s ease-in-out infinite;
}


/* ── 5. DIVISIONS STRIP ───────────────────────────────────────────────── */
/*
   Refined three-up division card layout:
     - Each card carries its own brand-coloured accent token (defined via
       the --d-accent custom property on the card root).
     - A 1px gradient rule along the top edge in --d-accent — hover extends it.
     - Numbered division marker (01/02/03) sits top-right as a fine display
       cue, not a decorative arrow.
     - Icon in a tinted tile that picks up --d-accent at low alpha.
     - Hover combines a subtle lift, a brightening of the accent rule, and
       an "Explore →" affordance fading in below the description.
*/

.divisions-strip {
  position: relative;
  padding-block: var(--space-20);
  background-color: var(--color-bg-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.divisions-strip::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  pointer-events: none;
}

@media (min-width: 1024px) {
  .divisions-strip { padding-block: var(--space-24); }
}

.divisions-strip .section-header {
  text-align: left;
  max-width: 720px;
  margin-inline: 0;
}

.divisions-strip .section-header h2 { color: var(--color-text-on-dark); }
.divisions-strip .section-header p {
  color: var(--color-text-on-dark-secondary);
  margin-inline: 0;
}

.division-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .division-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}

/* Default accent — overridden per card via --d-accent. */
.division-card {
  --d-accent: var(--lp-brand-blue);
  --d-accent-soft: rgba(68, 144, 226, 0.10);
  --d-accent-glow: rgba(68, 144, 226, 0.18);

  display: flex;
  flex-direction: column;
  position: relative;
  padding: var(--space-10) var(--space-8) var(--space-8);
  border-radius: var(--radius-lg);
  background-color: rgba(19, 24, 48, 0.55);                   /* slightly translucent slab over the navy bg */
  border: 1px solid rgba(255, 255, 255, 0.07);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  isolation: isolate;
  transition: transform 280ms var(--ease-default),
              border-color 280ms var(--ease-default),
              background-color 280ms var(--ease-default);
}

/* Per-card accent assignments. */
.division-card--launchpad {
  --d-accent: var(--lp-brand-blue);
  --d-accent-soft: rgba(68, 144, 226, 0.10);
  --d-accent-glow: rgba(68, 144, 226, 0.22);
}
.division-card--gov {
  --d-accent: #34D399;
  --d-accent-soft: rgba(52, 211, 153, 0.10);
  --d-accent-glow: rgba(52, 211, 153, 0.20);
}
.division-card--robo {
  --d-accent: #F59E0B;
  --d-accent-soft: rgba(245, 158, 11, 0.10);
  --d-accent-glow: rgba(245, 158, 11, 0.20);
}

/* Top accent rule — fine line in the division's colour, brightens on hover. */
.division-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg,
              transparent 0%,
              var(--d-accent) 20%,
              var(--d-accent) 80%,
              transparent 100%);
  opacity: 0.55;
  transition: opacity 280ms var(--ease-default);
}

/* Soft accent halo top-right, only visible on hover. */
.division-card::after {
  content: "";
  position: absolute;
  top: -4rem;
  right: -4rem;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  background: var(--d-accent-glow);
  filter: blur(48px);
  opacity: 0;
  transition: opacity 320ms var(--ease-default);
  pointer-events: none;
  z-index: -1;
}

.division-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.14);
  background-color: rgba(30, 36, 64, 0.75);
}

.division-card:hover::before { opacity: 1; }
.division-card:hover::after  { opacity: 1; }

.division-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

/* Icon tile — picks up the division accent in a tinted square. */
.division-card-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  background-color: var(--d-accent-soft);
  border: 1px solid rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

.division-card-icon-tile svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--d-accent);
  stroke-width: 1.5;
}

/* Numbered marker — fine display cue top-right. */
.division-card-number {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.30);
  line-height: 1;
  font-feature-settings: "tnum";
  transition: color 280ms var(--ease-default);
}

.division-card:hover .division-card-number {
  color: rgba(255, 255, 255, 0.55);
}

.division-card-name {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  color: var(--color-text-on-dark);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.division-card-tagline {
  margin-top: var(--space-2);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--d-accent);
  letter-spacing: var(--tracking-wide);
}

.division-card-desc {
  margin-top: var(--space-5);
  font-size: 0.9375rem;            /* 15px — slightly smaller than body for hierarchy */
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
  max-width: none;
}

/* Explore affordance — sits at the bottom of the card and reveals on hover. */
.division-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: var(--space-6);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--d-accent);
  opacity: 0.75;
  transition: opacity 280ms var(--ease-default),
              transform 280ms var(--ease-default);
}

.division-card-cta svg {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 280ms var(--ease-default);
}

.division-card:hover .division-card-cta {
  opacity: 1;
}

.division-card:hover .division-card-cta svg {
  transform: translateX(2px);
}


/* ── 6. PRODUCTS PORTFOLIO ────────────────────────────────────────────── */

.products-section {
  position: relative;
  background-color: var(--color-bg-dark);
  padding-block: var(--space-24);
}

.products-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 18% 78%,
              rgba(96, 165, 250, 0.06), transparent 60%);
  mix-blend-mode: screen;
}

.products-section > .container { position: relative; }

.products-section .section-header h2 { color: var(--color-text-on-dark); }
.products-section .section-header p  { color: var(--color-text-on-dark-secondary); }

.product-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 640px)  { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

.product-card {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-dark-surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform var(--duration-normal) var(--ease-default),
              border-color var(--duration-normal) var(--ease-default);
  overflow: hidden;
}

.product-card:hover {
  transform: translateY(-3px);
  border-color: rgba(96, 165, 250, 0.30);
}

.product-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.product-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background-color: rgba(255, 255, 255, 0.04);
  color: #93C5FD;
  flex-shrink: 0;
}

.product-card-icon svg { width: 1.25rem; height: 1.25rem; }

.product-card h3 {
  margin-top: var(--space-5);
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  color: var(--color-text-on-dark);
  line-height: var(--leading-snug);
}

.product-card-meta {
  margin-top: var(--space-1);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: #93C5FD;
}

.product-card-desc {
  margin-top: var(--space-3);
  font-size: var(--text-small);
  line-height: var(--leading-relaxed);
  color: var(--color-text-on-dark-secondary);
  max-width: none;
}


/* Status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  border: 1px solid;
  white-space: nowrap;
}

.status-badge--live  { color: var(--color-success); border-color: rgba(5, 150, 105, 0.30); background: rgba(5, 150, 105, 0.10); }
.status-badge--pilot { color: #93C5FD;             border-color: rgba(96, 165, 250, 0.30); background: rgba(96, 165, 250, 0.10); }
.status-badge--build { color: var(--color-warning); border-color: rgba(217, 119, 6, 0.30); background: rgba(217, 119, 6, 0.10); }
.status-badge--draft { color: var(--color-text-on-dark-secondary); border-color: rgba(148, 163, 184, 0.30); background: rgba(148, 163, 184, 0.10); }


/* ── 7. OUTCOMES / CASE STUDY CARDS ───────────────────────────────────── */

.outcomes-section {
  position: relative;
  background-color: #070A14; /* navy.1000 — one step deeper than hero */
  padding-block: var(--space-24);
}

.outcomes-section::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10), transparent);
  pointer-events: none;
}

.outcomes-section .section-header h2 { color: var(--color-text-on-dark); }
.outcomes-section .section-header p  { color: var(--color-text-on-dark-secondary); }

.outcome-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  /* Single-card variant — centres comfortably without filling the gutter */
  max-width: 760px;
  margin-inline: auto;
}

/* Outcomes is currently 1-up (Gibbs only) — drop the 2-up breakpoint until
   we have a second confirmed case study to add back in. */

.outcome-card {
  position: relative;
  padding: var(--space-10);
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-dark-surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform var(--duration-normal) var(--ease-default),
              border-color var(--duration-normal) var(--ease-default);
}

.outcome-card:hover {
  transform: translateY(-3px);
  border-color: rgba(96, 165, 250, 0.30);
}

.outcome-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.outcome-card h3 {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  color: var(--color-text-on-dark);
}

.outcome-card-sector {
  margin-top: var(--space-1);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: #93C5FD;
}

.outcome-card-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background-color: rgba(68, 144, 226, 0.10);
  color: #93C5FD;
}

.outcome-card-pill svg { width: 1.25rem; height: 1.25rem; }

.outcome-card dl {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-4);
}

.outcome-card dt {
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-tertiary);
}

.outcome-card dd {
  margin-top: 0.25rem;
  font-size: var(--text-small);
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.85);
  max-width: none;
}

.outcome-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.outcome-metric-value {
  font-size: var(--text-h2);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--color-text-on-dark);
}

.outcome-metric-label {
  margin-top: var(--space-2);
  font-size: var(--text-caption);
  line-height: var(--leading-snug);
  color: var(--color-text-on-dark-secondary);
}

.outcome-pull {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid rgba(96, 165, 250, 0.15);
  background: rgba(68, 144, 226, 0.04);
  font-size: var(--text-small);
  font-style: italic;
  color: #BFD7F1;
}

.outcome-pull svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: 0.15rem; }


/* ── 8. TRUST STRIP — MONOGRAM CHIPS ──────────────────────────────────── */

.trust-strip {
  border-block: 1px solid var(--color-border);
  padding-block: var(--space-12);
}

.trust-strip-label {
  text-align: center;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-accent-text);
  margin-bottom: var(--space-8);
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8) var(--space-6);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 640px)  { .trust-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .trust-grid { grid-template-columns: repeat(6, 1fr); } }

.trust-grid li { text-align: center; }

.trust-mono {
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  line-height: 2.4rem;
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  transition: border-color var(--duration-normal) var(--ease-default),
              color var(--duration-normal) var(--ease-default),
              background-color var(--duration-normal) var(--ease-default);
}

.trust-grid li:hover .trust-mono {
  border-color: var(--lp-brand-blue);
  color: var(--lp-brand-blue);
  background-color: var(--color-bg-primary);
}

.trust-name {
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

.trust-sector {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
}


/* ── 9. REVEAL STAGGER (compatibility note) ───────────────────────────── */
/*
   The existing `.reveal-stagger` rules in layout.css expect each *child* to
   carry the `.reveal` class itself (e.g. `.reveal-stagger > .reveal`). When
   adding new sections, mark each child with both classes:

     <div class="division-grid reveal reveal-stagger">
       <a class="division-card reveal">…</a>
       <a class="division-card reveal">…</a>
       <a class="division-card reveal">…</a>
     </div>

   The IntersectionObserver in main.js will then observe each child
   independently and the existing nth-child transition-delay rules will
   stagger them. No new CSS needed here — this comment is a reminder.
*/


/* ── 10. SECTION HEADER LEFT VARIANT ──────────────────────────────────── */
/* Used by the dark sections (divisions, products) where left-aligned reads
   like a magazine spread rather than a centred ad layout. */

.section-header--left {
  text-align: left;
  max-width: 720px;
  margin-inline: 0;
  margin-bottom: var(--space-12);
}

.section-header--left p { margin-inline: 0; }


/* ── 11. CTA EYEBROW CHIP ─────────────────────────────────────────────── */
/* Rounded pill above hero headline — small caps inside a thin border. */

.eyebrow-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.15);
  background-color: rgba(255, 255, 255, 0.04);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: #93C5FD;
}

.eyebrow-chip svg { width: 0.875rem; height: 0.875rem; }


/* ── 12. CONTACT — DIVISION SELECT ────────────────────────────────────── */

.form-select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  padding-right: var(--space-10); /* room for the chevron */
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-body);
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  transition: border-color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
}

.form-select:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(68, 144, 226, 0.15);
}


/* ── 12.5. ABOUT — NUMBERS BAND ───────────────────────────────────────── */

.about-numbers {
  margin-top: var(--space-12);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-primary);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .about-numbers {
    grid-template-columns: repeat(4, 1fr);
    padding: var(--space-10);
  }
}

.about-numbers .num-value {
  display: block;
  font-size: var(--text-h2);
  font-weight: var(--weight-extrabold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.about-numbers .num-label {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-text-tertiary);
}


/* ── 13. LOGO SIZE OVERRIDES ──────────────────────────────────────────── */
/* The logo was reading too small at 32–36px in the nav and 40px in the */
/* footer. Bump it without editing components.css so the change is */
/* localised to this file. */

/* Bigger nav lockup. The Adobe-exported landscape SVG has roughly 15% empty
   space around the artwork (clear-space baked into the asset for print use),
   so visually the wordmark reads ~85% of the declared height. We size the
   img element generously to compensate. !important is used because some
   inline width="220" height="40" attributes still ship in the existing
   markup. Homepage gets a small extra nudge so the brand reads as the
   strongest signal on the front door. */
.site-logo img,
header .site-logo img {
  height: 60px !important;
  max-height: 60px;
  width: auto !important;
}

@media (min-width: 768px) {
  .site-logo img,
  header .site-logo img {
    height: 68px !important;
    max-height: 68px;
  }
}

/* Homepage-only extra emphasis. The body of index.html doesn't have a
   marker class today, but the hero variant does — so we hook off the
   presence of `.hero--photo` (homepage) or `.hero--starfield` (404,
   thank-you) on the same page as the header. This selector targets the
   header that sits above one of those heroes. */
body:has(.hero--photo) .site-logo img,
body:has(.hero--photo) header .site-logo img {
  height: 68px !important;
  max-height: 68px;
}

@media (min-width: 768px) {
  body:has(.hero--photo) .site-logo img,
  body:has(.hero--photo) header .site-logo img {
    height: 76px !important;
    max-height: 76px;
  }
}

/* Header padding scales with the bigger logo so the lockup has breathing room */
/* without the nav looking top-heavy or clipping the lockup. */
.site-header { padding-block: var(--space-3); }
@media (min-width: 768px) {
  .site-header { padding-block: var(--space-4); }
}
.site-header.scrolled { padding-block: var(--space-2); }

/* Footer logo — visibly larger than the nav. */
.footer-logo {
  height: 96px !important;
  max-height: 96px;
  width: auto !important;
}

/* Mobile menu — match the nav size so the open menu doesn't reveal a smaller
   logo than the user clicked from. */
.mobile-menu .site-logo img {
  height: 56px !important;
  max-height: 56px;
}


/* ── 14. REDUCED MOTION ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .hero-halo,
  .hero-halo--soft,
  .hero-starfield .star-layer,
  .hero h1 .accent::after {
    animation: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM CARD SYSTEM — site-wide
   Reusable card mixins that mirror the divisions card treatment so every grid
   reads with the same premium signal: top accent rule, icon tile, refined
   hover, optional 'Learn more →' affordance.

   Conventions:
     - .lp-card-dark       — base card on a dark surface (translucent slab)
     - .lp-card-light      — base card on a light surface
     - .lp-card-rule       — top brand-coloured rule (uses --d-accent)
     - .lp-card-tile       — icon tile, picks up --d-accent
     - .lp-card-cta        — bottom 'Learn more →' affordance
     - --d-accent          — per-card brand-coloured accent (custom property)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Default accent token — sections override per division. */
.lp-card-dark,
.lp-card-light {
  --d-accent: var(--lp-brand-blue);
  --d-accent-soft: rgba(68, 144, 226, 0.10);
  --d-accent-glow: rgba(68, 144, 226, 0.20);
}

/* Status-coloured accents for product cards. */
.lp-accent--live  { --d-accent: #34D399; --d-accent-soft: rgba(52, 211, 153, 0.10); --d-accent-glow: rgba(52, 211, 153, 0.20); }
.lp-accent--pilot { --d-accent: #60A5FA; --d-accent-soft: rgba(96, 165, 250, 0.12); --d-accent-glow: rgba(96, 165, 250, 0.22); }
.lp-accent--build { --d-accent: #F59E0B; --d-accent-soft: rgba(245, 158, 11, 0.10); --d-accent-glow: rgba(245, 158, 11, 0.20); }
.lp-accent--draft { --d-accent: #94A3B8; --d-accent-soft: rgba(148, 163, 184, 0.10); --d-accent-glow: rgba(148, 163, 184, 0.18); }

/* Dark-surface card — used inside .dark-section or with explicit dark bg. */
.lp-card-dark {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-10) var(--space-8) var(--space-8);
  border-radius: var(--radius-lg);
  background-color: rgba(19, 24, 48, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.07);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  isolation: isolate;
  transition: transform 280ms var(--ease-default),
              border-color 280ms var(--ease-default),
              background-color 280ms var(--ease-default);
}

.lp-card-dark::before,
.lp-card-light::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg,
              transparent 0%,
              var(--d-accent) 20%,
              var(--d-accent) 80%,
              transparent 100%);
  opacity: 0.55;
  transition: opacity 280ms var(--ease-default);
}

.lp-card-dark::after,
.lp-card-light::after {
  content: "";
  position: absolute;
  top: -4rem;
  right: -4rem;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  background: var(--d-accent-glow);
  filter: blur(48px);
  opacity: 0;
  transition: opacity 320ms var(--ease-default);
  pointer-events: none;
  z-index: -1;
}

.lp-card-dark:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.14);
  background-color: rgba(30, 36, 64, 0.75);
}
.lp-card-dark:hover::before,
.lp-card-light:hover::before { opacity: 1; }
.lp-card-dark:hover::after,
.lp-card-light:hover::after  { opacity: 1; }

/* Light-surface card — same anatomy, different palette. */
.lp-card-light {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-10) var(--space-8) var(--space-8);
  border-radius: var(--radius-lg);
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-sm);
  transition: transform 280ms var(--ease-default),
              border-color 280ms var(--ease-default),
              box-shadow 280ms var(--ease-default);
}

.lp-card-light:hover {
  transform: translateY(-3px);
  border-color: rgba(68, 144, 226, 0.30);
  box-shadow: var(--shadow-lg);
}

/* Card head — icon tile + optional number/badge */
.lp-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}

.lp-card-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  background-color: var(--d-accent-soft);
  border: 1px solid rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

.lp-card-light .lp-card-tile {
  border-color: var(--color-border);
}

.lp-card-tile svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--d-accent);
  stroke-width: 1.5;
}

/* Numbered marker */
.lp-card-number {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.30);
  line-height: 1;
  font-feature-settings: "tnum";
  transition: color 280ms var(--ease-default);
}

.lp-card-light .lp-card-number {
  color: var(--color-text-tertiary);
}

.lp-card-dark:hover .lp-card-number   { color: rgba(255, 255, 255, 0.55); }
.lp-card-light:hover .lp-card-number  { color: var(--color-text-secondary); }

/* Title / tagline / description — consistent across cards */
.lp-card-title {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  color: inherit;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.lp-card-dark .lp-card-title  { color: var(--color-text-on-dark); }
.lp-card-light .lp-card-title { color: var(--color-text-primary); }

.lp-card-tagline {
  margin-top: var(--space-2);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--d-accent);
  letter-spacing: var(--tracking-wide);
}

.lp-card-desc {
  margin-top: var(--space-5);
  font-size: 0.9375rem;
  line-height: 1.65;
  max-width: none;
}

.lp-card-dark .lp-card-desc  { color: rgba(255, 255, 255, 0.72); }
.lp-card-light .lp-card-desc { color: var(--color-text-secondary); }

/* Bullets inside a card — refined dot + consistent indent */
.lp-card-list {
  margin-top: var(--space-5);
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.lp-card-list li {
  position: relative;
  padding-left: var(--space-5);
}

.lp-card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 1px;
  background-color: var(--d-accent);
}

.lp-card-dark .lp-card-list  { color: rgba(255, 255, 255, 0.72); }
.lp-card-light .lp-card-list { color: var(--color-text-secondary); }

/* Bottom CTA */
.lp-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: var(--space-6);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--d-accent);
  opacity: 0.78;
  transition: opacity 280ms var(--ease-default);
}

.lp-card-cta svg {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 280ms var(--ease-default);
}

.lp-card-dark:hover .lp-card-cta,
.lp-card-light:hover .lp-card-cta { opacity: 1; }
.lp-card-dark:hover .lp-card-cta svg,
.lp-card-light:hover .lp-card-cta svg { transform: translateX(2px); }


/* ── Eyebrow chip used above section headers (inline svg + small caps) ── */
.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background-color: rgba(255, 255, 255, 0.04);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-accent);
}

.lp-eyebrow svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* On light sections */
.lp-section-light .lp-eyebrow {
  border-color: var(--color-border);
  background-color: var(--color-bg-primary);
  color: var(--color-accent-text);
}


/* ── Section divider — thin gradient hairline between dark sections ──── */
.lp-divider-dark {
  height: 1px;
  background: linear-gradient(90deg,
              transparent 0%,
              rgba(255, 255, 255, 0.10) 50%,
              transparent 100%);
}


/* ── Numbered step (used in How-It-Works and similar lists) ──────────── */
.lp-step {
  position: relative;
  padding-top: var(--space-3);
}

.lp-step-num {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: var(--weight-medium);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--lp-brand-blue);
  font-feature-settings: "tnum";
  display: block;
  margin-bottom: var(--space-3);
}

.lp-step-title {
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--space-2);
}

.lp-step-desc {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
  max-width: none;
}


/* ── Refined form inputs (Contact section) ───────────────────────────── */
.lp-input,
.lp-textarea,
.lp-select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-md);
  background-color: rgba(255, 255, 255, 0.03);
  color: var(--color-text-on-dark);
  font-family: inherit;
  font-size: var(--text-body);
  transition: border-color 200ms var(--ease-default),
              background-color 200ms var(--ease-default),
              box-shadow 200ms var(--ease-default);
}

.lp-input::placeholder,
.lp-textarea::placeholder {
  color: rgba(255, 255, 255, 0.30);
}

.lp-input:focus,
.lp-textarea:focus,
.lp-select:focus {
  outline: none;
  border-color: var(--lp-brand-blue);
  background-color: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 3px rgba(68, 144, 226, 0.15);
}

.lp-textarea {
  min-height: 8rem;
  resize: vertical;
}

.lp-select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}


/* ── Premium contact info column ─────────────────────────────────────── */
.lp-contact-list {
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.lp-contact-list li {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.lp-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background-color: rgba(68, 144, 226, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--lp-brand-blue);
  flex-shrink: 0;
}

.lp-contact-icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

.lp-contact-text a {
  color: var(--color-text-on-dark);
  text-decoration: none;
}
.lp-contact-text a:hover { color: var(--lp-brand-blue); }
.lp-contact-text-meta {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--text-small);
  color: var(--color-text-on-dark-secondary);
}


/* ── Testimonial card refinement ─────────────────────────────────────── */
.lp-testimonial {
  position: relative;
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background-color: var(--color-card-bg);
  overflow: hidden;
  isolation: isolate;
  transition: transform 280ms var(--ease-default),
              border-color 280ms var(--ease-default),
              box-shadow 280ms var(--ease-default);
}

.lp-testimonial::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg,
              transparent 0%,
              var(--lp-brand-blue) 20%,
              var(--lp-brand-blue) 80%,
              transparent 100%);
  opacity: 0.55;
  transition: opacity 280ms var(--ease-default);
}

.lp-testimonial:hover {
  transform: translateY(-3px);
  border-color: rgba(68, 144, 226, 0.30);
  box-shadow: var(--shadow-lg);
}
.lp-testimonial:hover::before { opacity: 1; }

.lp-testimonial-mark {
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: var(--weight-bold);
  line-height: 0.6;
  color: var(--lp-brand-blue);
  opacity: 0.45;
  margin-bottom: var(--space-3);
}

.lp-testimonial-text {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: var(--weight-regular);
  color: var(--color-text-primary);
  margin-bottom: var(--space-5);
  font-style: italic;
}

.lp-testimonial-author {
  display: flex;
  flex-direction: column;
  font-size: var(--text-small);
}

.lp-testimonial-author strong {
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
}

.lp-testimonial-author span {
  color: var(--color-text-tertiary);
}


/* ── Premium CTA band (replaces both the assessment + duplicate bands) ── */
.lp-cta-band {
  position: relative;
  padding-block: var(--space-20);
  background-color: var(--color-bg-dark);
  overflow: hidden;
  isolation: isolate;
}

.lp-cta-band::before {
  /* Soft brand halo — sits behind the content */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60rem;
  height: 60rem;
  background: radial-gradient(circle, rgba(68, 144, 226, 0.10), transparent 60%);
  pointer-events: none;
  z-index: -1;
}

.lp-cta-band-inner {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}

.lp-cta-band h2 {
  color: var(--color-text-on-dark);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-4);
}

.lp-cta-band p {
  color: var(--color-text-on-dark-secondary);
  font-size: var(--text-body);
  margin-bottom: var(--space-8);
  margin-inline: auto;
}

.lp-cta-band-actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}


/* ── Outcomes — premium accent rule + numbered marker ─────────────────── */

.outcome-card--premium {
  position: relative;
}

.outcome-card--premium::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg,
              transparent 0%,
              var(--lp-brand-blue) 20%,
              var(--lp-brand-blue) 80%,
              transparent 100%);
  opacity: 0.55;
  transition: opacity 280ms var(--ease-default);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.outcome-card--premium:hover::before { opacity: 1; }

.outcome-card-number {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.30);
  line-height: 1;
  font-feature-settings: "tnum";
  flex-shrink: 0;
  transition: color 280ms var(--ease-default);
}

.outcome-card--premium:hover .outcome-card-number {
  color: var(--lp-brand-blue);
}


/* ── How-It-Works steps grid ──────────────────────────────────────────── */

.lp-steps {
  position: relative;
}

/* Subtle connector between steps on desktop. A thin gradient rule that sits
   behind the numerals at their vertical centre. */
@media (min-width: 1025px) {
  .lp-steps::before {
    content: "";
    position: absolute;
    top: calc(0.75rem + 1.25rem);   /* aligns to roughly the numeral mid-height */
    inset-inline: 8%;
    height: 1px;
    background: linear-gradient(90deg,
                rgba(68, 144, 226, 0) 0%,
                rgba(68, 144, 226, 0.30) 10%,
                rgba(68, 144, 226, 0.30) 90%,
                rgba(68, 144, 226, 0) 100%);
    pointer-events: none;
  }
}

.lp-steps .lp-step {
  position: relative;
  padding-right: var(--space-4);
}


/* ── About — refined prose + numbers band ─────────────────────────────── */

.lp-about-prose {
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin-top: var(--space-4);
  max-width: 720px;
}

.lp-about-prose strong {
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
}

.lp-about-emph {
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
}

.lp-about-meta {
  margin-top: var(--space-6);
  font-size: var(--text-small);
  color: var(--color-text-tertiary);
  letter-spacing: var(--tracking-wide);
}

/* Premium numbers band — brand-blue accent on values, finer label type */
.about-numbers--premium {
  margin-top: var(--space-12);
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-card-bg);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8) var(--space-4);
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .about-numbers--premium {
    grid-template-columns: repeat(4, 1fr);
    padding: var(--space-10) var(--space-8);
    gap: var(--space-4);
  }
}

/* Top accent rule on the numbers band */
.about-numbers--premium::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg,
              transparent 0%,
              var(--lp-brand-blue) 20%,
              var(--lp-brand-blue) 80%,
              transparent 100%);
  opacity: 0.55;
}

.about-numbers--premium > div {
  text-align: left;
  border-left: 1px solid var(--color-border);
  padding-left: var(--space-5);
}

.about-numbers--premium > div:first-child {
  border-left: none;
  padding-left: 0;
}

@media (max-width: 767px) {
  .about-numbers--premium > div {
    border-left: none;
    padding-left: 0;
  }
  .about-numbers--premium > div:nth-child(odd) {
    border-right: 1px solid var(--color-border);
    padding-right: var(--space-4);
  }
}

.about-numbers--premium .num-value {
  display: block;
  font-size: 2.75rem;
  font-weight: var(--weight-extrabold);
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
  color: var(--lp-brand-navy);
  font-feature-settings: "tnum";
}

.about-numbers--premium .num-suffix {
  font-size: 1.5rem;
  font-weight: var(--weight-bold);
  color: var(--lp-brand-blue);
  margin-left: 2px;
}

.about-numbers--premium .num-label {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-small);
  line-height: var(--leading-snug);
  color: var(--color-text-tertiary);
  letter-spacing: var(--tracking-wide);
}


/* ── CTA band — light variant (used for the second CTA before Contact) ── */

.lp-cta-band--light {
  background-color: var(--color-bg-secondary);
  border-block: 1px solid var(--color-border);
}

.lp-cta-band--light::before {
  background: radial-gradient(circle, rgba(68, 144, 226, 0.06), transparent 60%);
}

.lp-cta-band--light h2 { color: var(--color-text-primary); }
.lp-cta-band--light p  { color: var(--color-text-secondary); }
.lp-cta-band--light .overline { color: var(--color-accent-text); }


/* ── Contact section — dark, refined form ─────────────────────────────── */

.lp-contact-section {
  background-color: var(--color-bg-dark);
  position: relative;
  overflow: hidden;
}

.lp-contact-section::before {
  content: "";
  position: absolute;
  top: -10%;
  right: -10%;
  width: 40rem;
  height: 40rem;
  background: radial-gradient(circle, rgba(68, 144, 226, 0.08), transparent 60%);
  pointer-events: none;
}

.lp-contact-section .contact-grid {
  position: relative;
  display: grid;
  gap: var(--space-12);
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .lp-contact-section .contact-grid {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-16);
  }
}

.lp-contact-section .overline {
  margin-bottom: var(--space-3);
}

.lp-contact-section h2 {
  color: var(--color-text-on-dark);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-5);
}

.lp-contact-section .contact-info > p {
  color: var(--color-text-on-dark-secondary);
  font-size: var(--text-body);
  max-width: 520px;
}

.lp-contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background-color: rgba(19, 24, 48, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.07);
  position: relative;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .lp-contact-form { padding: var(--space-10); }
}

.lp-contact-form::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg,
              transparent 0%,
              var(--lp-brand-blue) 20%,
              var(--lp-brand-blue) 80%,
              transparent 100%);
  opacity: 0.55;
}

.lp-form-row {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .lp-form-row { grid-template-columns: 1fr 1fr; }
}

.lp-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.lp-form-label {
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--color-text-on-dark);
  letter-spacing: var(--tracking-wide);
}

.lp-form-meta {
  font-size: var(--text-small);
  color: var(--color-text-on-dark-secondary);
  font-weight: var(--weight-regular);
}

.lp-form-fineprint {
  margin-top: var(--space-4);
  font-size: var(--text-caption);
  color: var(--color-text-on-dark-secondary);
  letter-spacing: var(--tracking-wide);
  line-height: 1.5;
  max-width: none;
}

.lp-form-submit {
  align-self: flex-start;
  margin-top: var(--space-2);
}


/* ── Consistent section-header rhythm ─────────────────────────────────── */
/* The new sections all use .section-header--left for editorial-spread feel.
   This block standardises the overline/h2/lead vertical rhythm so every
   section reads at the same cadence. */

.section-header--left {
  text-align: left;
  max-width: 720px;
  margin-inline: 0;
  margin-bottom: var(--space-12);
}

.section-header--left .overline {
  display: inline-block;
  margin-bottom: var(--space-3);
}

.section-header--left h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
}

.section-header--left p {
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  max-width: 640px;
  margin-inline: 0;
}


/* ── Dark-section seam — a hairline between dark sections that touch ─── */
/* The Outcomes block sits between Testimonials (light) and Assessment CTA
   (dark) — that's clean. The Assessment CTA → CTA Band (light) join is
   also clean. The only run of touching dark sections is Hero → Divisions
   and Outcomes → Assessment CTA. We add a hairline gradient at the top of
   the second dark section so they don't bleed into one continuous slab. */

.divisions-strip + * { /* unused but kept for clarity */ }

.lp-cta-band {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}


/* ── Divisions strip + Outcomes — tighten transitions ─────────────────── */

.divisions-strip,
.outcomes-section,
.products-section,
.lp-cta-band,
.lp-contact-section {
  position: relative;
}

/* Subtle section seam — a thin gradient hairline at the top of any dark
   section that follows another dark section. Achieved via a top
   pseudo-element only on these surfaces. */
.divisions-strip::after,
.outcomes-section::after,
.products-section::after,
.lp-contact-section::after {
  /* Reserved — currently no-op since each section has its own treatment.
     Hook here if a future seam adjustment is needed without touching markup. */
}


/* ── Secondary button on dark CTA bands ───────────────────────────────── */
/* The components.css .btn-secondary uses dark text on transparent — fine on
   light backgrounds, unreadable on the dark .lp-cta-band. Override scoped
   to the dark CTA band so the light variant (.lp-cta-band--light) keeps
   the original treatment. */

.lp-cta-band:not(.lp-cta-band--light) .btn-secondary {
  background-color: transparent;
  color: var(--color-text-on-dark);
  border-color: rgba(255, 255, 255, 0.20);
}

.lp-cta-band:not(.lp-cta-band--light) .btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--color-text-on-dark);
}


/* ── Numbers band — 3-up variant (5,000+ tile removed) ────────────────── */

@media (min-width: 768px) {
  .about-numbers--3up {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ── Page-header hero treatment for inner pages ───────────────────────── */
/*
   The homepage hero uses .hero--photo with the network/plexus image,
   parallax stars, and dual halos. Inner pages use .page-header — a small
   dark band with a centred title. To get visual consistency without the
   page-header overpowering the content below, we layer the same image at
   reduced height, a denser overlay (so the title reads cleanly at any
   width), and a single brand halo. No starfield on inner pages — keeps
   the load light and the visual signal calmer.
*/

.page-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Background photo — same network/plexus image as the homepage hero, sized
   for inner-page use. Mobile gets the smaller variant. */
.page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("../assets/images/hero-network.jpg");
  background-size: cover;
  background-position: center;
  filter: saturate(0.92) brightness(0.7);
}

@media (max-width: 768px) {
  .page-header::before {
    background-image: url("../assets/images/hero-network-mobile.jpg");
  }
}

/* Dark gradient overlay — heavier than the homepage so the centred title
   stays at WCAG AA at all viewport widths. */
.page-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%,
                    rgba(11, 17, 32, 0.55) 0%,
                    rgba(11, 17, 32, 0.85) 90%),
    linear-gradient(180deg,
                    rgba(11, 17, 32, 0.55) 0%,
                    rgba(11, 17, 32, 0.85) 100%);
}

/* Brand-blue halo, top-right — matches the homepage hero's accent. */
.page-header {
  background-color: var(--color-bg-dark);   /* fallback while image loads */
  background-image: radial-gradient(circle at 78% 22%,
                    rgba(68, 144, 226, 0.18), transparent 55%);
  background-size: cover;
  background-position: center;
  background-blend-mode: screen;
}

/* Reduced motion users see exactly the same composition (no animation
   to disable here — the photo is static). */


/* ── Inner-page <section class="hero dark-section"> — same photo treatment ─
   ─────────────────────────────────────────────────────────────────────────
   Several inner pages (services, case-studies, blog) use a small <section
   class="hero dark-section"> as their page banner, NOT the .page-header
   class that about/pricing/assessment use. To get the same network photo
   visual on those pages, mirror the .page-header rules but scoped to a
   .hero that is NOT one of the homepage cinematic variants.
   ────────────────────────────────────────────────────────────────────── */

.hero.dark-section:not(.hero--photo):not(.hero--starfield) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--color-bg-dark);
  background-image: radial-gradient(circle at 78% 22%,
                    rgba(68, 144, 226, 0.18), transparent 55%);
  background-size: cover;
  background-position: center;
  background-blend-mode: screen;
  /* Reduce huge default min-height on these "lite" inner heroes — they
     should read more as a banner than a full-bleed hero. */
  min-height: 0 !important;
  padding-block: var(--space-24) var(--space-20);
}

.hero.dark-section:not(.hero--photo):not(.hero--starfield)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("../assets/images/hero-network.jpg");
  background-size: cover;
  background-position: center;
  filter: saturate(0.92) brightness(0.7);
}

@media (max-width: 768px) {
  .hero.dark-section:not(.hero--photo):not(.hero--starfield)::before {
    background-image: url("../assets/images/hero-network-mobile.jpg");
  }
}

.hero.dark-section:not(.hero--photo):not(.hero--starfield)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%,
                    rgba(11, 17, 32, 0.55) 0%,
                    rgba(11, 17, 32, 0.85) 90%),
    linear-gradient(180deg,
                    rgba(11, 17, 32, 0.55) 0%,
                    rgba(11, 17, 32, 0.85) 100%);
}

/* The hero-inner / hero-content blocks need to sit above the ::before/::after */
.hero.dark-section:not(.hero--photo):not(.hero--starfield) .hero-inner,
.hero.dark-section:not(.hero--photo):not(.hero--starfield) .hero-content {
  position: relative;
  z-index: 1;
}