/* ============================================
   SPIRE LIGHT — LAYOUT
   Header, footer, sections, containers
   ============================================ */

/* ── Container ── */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.container-wide {
  max-width: var(--container-wide);
}

/* ── Sections ── */

.section {
  padding: var(--space-9) 0;
  position: relative;
  background: transparent;
}



.section-sm {
  padding: var(--space-9) 0;
}

.section-alt {
  background: transparent;
}

.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-7);
}

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

.section-header h2 {
  margin-bottom: var(--space-4);
}

.section-header p {
  margin: 0 auto;
  color: var(--text-body);
}

.section-header-left {
  text-align: left;
  margin-left: 0;
}

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

/* ── Header / Navigation ── */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-height);
  display: flex;
  align-items: center;
  transition: background var(--dur-normal) var(--ease-out),
              border-color var(--dur-normal) var(--ease-out),
              backdrop-filter var(--dur-normal) var(--ease-out);
  border-bottom: 1px solid transparent;
}

.site-header.scrolled {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: var(--glass-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

/* ── Pill header (marketing pages) ──
   At top of page: full-width edge-to-edge band (default look).
   On scroll: outer band goes transparent and the inner element
   becomes a centered floating pill. */

/* Smooth transition on .header-inner for both states. */
.site-header.pill-header .header-inner {
  transition: max-width var(--dur-normal) var(--ease-out),
              height var(--dur-normal) var(--ease-out),
              padding var(--dur-normal) var(--ease-out),
              background var(--dur-normal) var(--ease-out),
              border-color var(--dur-normal) var(--ease-out),
              border-radius var(--dur-normal) var(--ease-out),
              box-shadow var(--dur-normal) var(--ease-out);
}

/* Scrolled state: band goes transparent, header-inner becomes the pill. */
.site-header.pill-header.scrolled {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  height: auto;
  padding: var(--space-4) 0;
  pointer-events: none;
}

.site-header.pill-header.scrolled .header-inner {
  pointer-events: auto;
  max-width: min(calc(100% - 2rem), 880px);
  height: 52px;
  padding: 0 0.5rem 0 1.25rem;
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  gap: var(--space-5);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08),
              0 2px 4px rgba(15, 23, 42, 0.05);
}

.site-header.pill-header.scrolled .header-logo span {
  font-size: 1rem;
}

.site-header.pill-header.scrolled .header-logo img {
  height: 28px;
  width: 28px;
}

.site-header.pill-header.scrolled .nav-links {
  gap: var(--space-5);
}

.site-header.pill-header.scrolled .nav-links a {
  font-size: 0.8125rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--fw-medium);
}

.site-header.pill-header.scrolled .nav-links a::after {
  bottom: -2px;
  height: 1px;
}

.site-header.pill-header.scrolled .header-cta .btn {
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--text-heading);
  font-weight: var(--fw-bold);
  font-size: 1.125rem;
  letter-spacing: var(--ls-tight);
}

.header-logo img {
  height: 36px;
  width: 36px;
  border-radius: var(--radius-sm);
}



.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-7);
}

.nav-links a {
  color: var(--text-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease-out);
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width var(--dur-normal) var(--ease-out);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text-heading);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

.header-cta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: var(--space-2);
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  z-index: 1001;
}

.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-heading);
  transition: transform var(--dur-normal) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}

.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ── Scroll-stages (landing page) ──
   One sticky section that hosts three stages played as a
   horizontal slide-show driven by scroll progress (--p, 0 → 1).
   Each stage is absolutely positioned over the same area; the
   active stage sits at translateX(0), the previous one slides off
   to the left, the next one waits offscreen to the right. The
   background cross-fades from white to a warm cream as --p grows.

   --p timeline:
     0.00 – 0.30  stage 0 (problem → solution) in place — held longer
                  so "Spirelight closes that gap" actually lands.
     0.30 – 0.46  stage 0 slides out left, stage 1 slides in right
     0.46 – 0.64  stage 1 (phone) in place
     0.64 – 0.80  stage 1 slides out left, stage 2 slides in right
     0.80 – 1.00  stage 2 (dashboard) in place
*/

.scroll-stages {
  --p: 0;
  --c: clamp(0, var(--p) * 2.85, 1); /* colour mix factor: 0 white, 1 cream by --p ≈ 0.35 */
  position: relative;
  height: 530vh;
  background: color-mix(in oklab, #ffffff calc((1 - var(--c)) * 100%), #f6f1ea);
  /* Skip layout/paint for the section while it sits far above or
     below the viewport. The intrinsic size matches `height` so the
     scrollbar does not jump. */
  content-visibility: auto;
  contain-intrinsic-size: 1px 530vh;
}

.scroll-stages__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-7);
  will-change: transform, opacity;
  pointer-events: none;
}

/* Stage horizontal positioning */
.stage[data-stage="0"] {
  --slide: clamp(0, (var(--p) - 0.30) * 6.25, 1);
  transform: translateX(calc(var(--slide) * -100%));
  opacity: calc(1 - var(--slide));
}

.stage[data-stage="1"] {
  --in:  clamp(0, (var(--p) - 0.30) * 6.25, 1);
  --out: clamp(0, (var(--p) - 0.64) * 6.25, 1);
  transform: translateX(calc((1 - var(--in) - var(--out)) * 100%));
  opacity: calc(var(--in) - var(--out));
}

.stage[data-stage="2"] {
  --in: clamp(0, (var(--p) - 0.64) * 6.25, 1);
  transform: translateX(calc((1 - var(--in)) * 100%));
  opacity: var(--in);
}

/* Stage 0: text-only (problem → solution) */
.stage--text .stage-text-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: flex-start;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.stage-text-problem,
.stage-text-solution {
  margin: 0;
  font-size: clamp(2.25rem, 4.6vw, 4.25rem);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  max-width: 18ch;
}

.stage-text-problem {
  /* Fades from dark to muted gray during stage 0's in-place phase */
  color: color-mix(in oklab, #0f172a calc((1 - clamp(0, var(--p) * 5.5, 1)) * 100%), #94a3b8);
}

.stage-text-solution {
  --in: clamp(0, (var(--p) - 0.07) * 7.5, 1);
  color: #0f172a;
  opacity: var(--in);
  transform: translateY(calc((1 - var(--in)) * 24px));
}

/* Stage 1 / 2: visual + text grid */
.stage--feature {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-9);
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-7);
}

.stage-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.stage-text-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 460px;
}

.stage-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent-bright, #38b6ff);
}

.stage-text-col h2 {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  letter-spacing: var(--ls-tight);
  color: #0f172a;
}

.stage-text-col p {
  margin: 0;
  color: #475569;
  font-size: 1.0625rem;
  line-height: 1.55;
}

/* Phone mock */
.phone-mock {
  width: 280px;
  height: 560px;
  background: #1a1a1a;
  border-radius: 36px;
  padding: 10px;
  box-shadow: 0 30px 60px rgba(15, 23, 42, 0.15),
              0 8px 16px rgba(15, 23, 42, 0.08);
  position: relative;
}

.phone-mock::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 22px;
  background: #1a1a1a;
  border-radius: 0 0 14px 14px;
  z-index: 2;
}

.phone-mock__screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #cfdfee 0%, #ecf3ec 100%);
  border-radius: 28px;
  padding: 44px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.phone-mock__statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #1a1a1a;
}

.phone-mock__statusbar .phone-mock__signal::before {
  content: "•••";
  letter-spacing: 1px;
}

.phone-mock__notif {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  will-change: opacity, transform;
}

/* Notifications cascade in once stage 1 has settled in place. */
.phone-mock__notif--1 {
  --in: clamp(0, (var(--p) - 0.49) * 7, 1);
  opacity: var(--in);
  transform: translateY(calc((1 - var(--in)) * 14px));
}

.phone-mock__notif--2 {
  --in: clamp(0, (var(--p) - 0.57) * 7, 1);
  opacity: var(--in);
  transform: translateY(calc((1 - var(--in)) * 14px));
}

.phone-mock__notif-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
}

.phone-mock__notif-app {
  display: inline-flex;
}

.phone-mock__notif-app img {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: block;
}

.phone-mock__notif-title {
  font-weight: 600;
  flex: 1;
  color: #1a1a1a;
}

.phone-mock__notif-time {
  color: #888;
}

.phone-mock__notif-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.phone-mock__notif-body strong {
  font-size: 0.85rem;
  color: #1a1a1a;
  font-weight: 600;
}

.phone-mock__notif-body span {
  font-size: 0.78rem;
  color: #555;
}

/* Dashboard mock */
.dashboard-mock {
  width: 100%;
  max-width: 520px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 30px 60px rgba(15, 23, 42, 0.08),
              0 8px 16px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

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

.dashboard-mock__kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-bright, #38b6ff);
}

.dashboard-mock__title {
  display: block;
  font-size: 1.05rem;
  color: #0f172a;
  margin-top: 4px;
  font-weight: 600;
}

.dashboard-mock__status {
  font-size: 0.68rem;
  background: #d1fae5;
  color: #065f46;
  padding: 4px 10px;
  border-radius: 100px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.dashboard-mock__metric {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dashboard-mock__metric-label {
  font-size: 0.72rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dashboard-mock__metric-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.dashboard-mock__metric-current {
  font-size: 2.5rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.dashboard-mock__metric-sep,
.dashboard-mock__metric-target {
  font-size: 1.5rem;
  color: #94a3b8;
}

.dashboard-mock__metric-unit {
  font-size: 0.85rem;
  color: #94a3b8;
  margin-left: 4px;
}

.dashboard-mock__bar {
  height: 8px;
  background: #f1f5f9;
  border-radius: 100px;
  overflow: hidden;
}

.dashboard-mock__bar-fill {
  --fill: clamp(0, (var(--p) - 0.82) * 6.25, 1);
  height: 100%;
  width: calc(var(--fill) * 41.5%);
  background: linear-gradient(90deg, #38b6ff, #6ec8ff);
  border-radius: 100px;
}

.dashboard-mock__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dashboard-mock__chip {
  font-size: 0.75rem;
  padding: 5px 12px;
  background: #f1f5f9;
  color: #334155;
  border-radius: 100px;
  font-weight: 500;
}

.dashboard-mock__batch {
  --in: clamp(0, (var(--p) - 0.88) * 7, 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #fff7ec 0%, #fff1de 100%);
  border: 1px solid rgba(250, 188, 92, 0.35);
  border-radius: 12px;
  opacity: var(--in);
  transform: translateY(calc((1 - var(--in)) * 12px));
}

.dashboard-mock__batch-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dashboard-mock__batch-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #7a4a08;
}

.dashboard-mock__batch-meta {
  font-size: 0.7rem;
  color: #997349;
}

.dashboard-mock__batch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  background: #1f2937;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  white-space: nowrap;
}

.dashboard-mock__batch-btn:hover {
  background: #0f172a;
}

@media (max-width: 960px) {
  .stage--feature {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding: var(--space-7) var(--space-5);
    align-content: center;
    justify-items: center;
    text-align: center;
  }
  .stage-text-col {
    text-align: center;
  }
  .phone-mock {
    width: 240px;
    height: 480px;
  }
  .stage-text-col h2 {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }
  .stage-text-problem,
  .stage-text-solution {
    font-size: clamp(1.75rem, 7vw, 2.75rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-stages {
    height: auto;
    background: #f6f1ea;
  }
  .scroll-stages__sticky {
    position: static;
    height: auto;
    padding: var(--space-11) var(--space-5);
    flex-direction: column;
    gap: var(--space-11);
    overflow: visible;
  }
  .stage {
    position: static;
    opacity: 1;
    transform: none;
  }
  .stage-text-problem { color: #64748b; }
  .stage-text-solution {
    opacity: 1;
    transform: none;
  }
  .phone-mock__notif--1,
  .phone-mock__notif--2 {
    opacity: 1;
    transform: none;
  }
  .dashboard-mock__bar-fill {
    width: 41.5%;
  }
}

/* Mobile fallback: collapse the sticky scroll-pinned carousel into
   a plain vertical stack. The horizontal slide animation needs
   width to read; on a phone we just show all three stages in
   order so the content stays legible. */
@media (max-width: 900px) {
  .scroll-stages {
    height: auto;
    background: #f6f1ea;
    content-visibility: visible;
  }
  .scroll-stages__sticky {
    position: static;
    height: auto;
    padding: var(--space-9) 0;
    flex-direction: column;
    gap: var(--space-9);
    overflow: visible;
  }
  .stage {
    position: static !important;
    inset: auto !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    padding: 0 var(--space-5);
  }
  .stage-text-problem { color: #64748b; }
  .stage-text-solution {
    opacity: 1 !important;
    transform: none !important;
  }
  .phone-mock__notif--1,
  .phone-mock__notif--2 {
    opacity: 1 !important;
    transform: none !important;
  }
  .dashboard-mock__bar-fill { width: 41.5%; }
}

/* ────────────────────────────────────────────────────────────
   CAPABILITY STACK — "What we do" stacked scroll cards.
   Continues the cream theme from .scroll-stages and shifts to
   a slightly warmer tone as you scroll. Three cards stack
   vertically: as scroll-progress (--p) advances, the next card
   slides up from below to overlap the previous, leaving a
   sliver of the older card peeking above. Right-side copy
   crossfades between stages.

   --p timeline:
     0.00 – 0.20  card 0 centered
     0.20 – 0.42  card 1 slides up over card 0
     0.42 – 0.62  card 1 centered
     0.62 – 0.84  card 2 slides up over card 1
     0.84 – 1.00  card 2 centered
   ──────────────────────────────────────────────────────── */

.capability-stack {
  --p: 0;

  /* Per-stage background tint. Each card gets its own vibe; the colours
     crossfade in lock-step with the card transitions. C0 is a clear
     step away from the cream of the previous section so the section
     change is immediately readable.
       C0  cool slate-blue — Speech collection (clean tech vibe)
       C1  warm sand cream — Transcription (paper / text feel)
       C2  honey amber     — Dataset delivery (structured, data) */
  --c0: #dde6ee;
  --c1: #ede4d0;
  --c2: #edd8ad;

  /* Same transition windows as the cards (0.20–0.42 and 0.62–0.84)
     so colour and card shift together. The third stop fades the
     morph back toward white in the last sliver of scroll, so the
     next white section meets cleanly. */
  --bg-t1:  clamp(0, (var(--p) - 0.20) * 4.55, 1);
  --bg-t2:  clamp(0, (var(--p) - 0.62) * 4.55, 1);
  --bg-end: clamp(0, (var(--p) - 0.93) * 14, 1);

  position: relative;
  height: 480vh;
  background: color-mix(
    in oklab,
    color-mix(
      in oklab,
      color-mix(in oklab, var(--c0), var(--c1) calc(var(--bg-t1) * 100%)),
      var(--c2) calc(var(--bg-t2) * 100%)
    ),
    #ffffff calc(var(--bg-end) * 100%)
  );
}

.capability-stack__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--space-5);
  padding: clamp(var(--space-7), 8vh, var(--space-9)) var(--space-7) var(--space-7);
  overflow: hidden;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

.capability-stack__header {
  --in: clamp(0, var(--p) * 8, 1);
  /* fades out slightly as we move into stages */
  --out: clamp(0, (var(--p) - 0.85) * 8, 1);
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  opacity: calc(var(--in) - var(--out) * 0.4);
}

.capability-stack__header .label {
  color: var(--accent-bright, #1da4f5);
}

.capability-stack__header h2 {
  margin: 0;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  letter-spacing: var(--ls-tight);
  line-height: 1.15;
  color: #0f172a;
}

.capability-stack__header p {
  margin: 0;
  color: #475569;
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 60ch;
}

.capability-stack__layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--space-9);
  align-items: center;
  min-height: 0;
}

/* ── Stacked cards (left column) ─────────────────────────── */

.capability-stack__cards {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 540px;
  /* Cap container so the peek gap above the active card stays small.
     Without this, on tall viewports the centering gap becomes huge
     and the previous card peeks far too much. */
  max-height: 640px;
  align-self: center;
}

.cap-card {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(100%, 560px);
  height: min(100%, 600px);
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 18px;
  box-shadow:
    0 30px 60px rgba(15, 23, 42, 0.10),
    0 8px 16px rgba(15, 23, 42, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  will-change: transform;
}

/* Older cards stay put; new cards slide up from below and land on
   top. Higher z-index for newer cards keeps the stacking order
   correct as each one settles. A small tilt during the slide-in
   gives the "pulled up" feel before the card seats flat. */

.cap-card[data-cap-card="0"] {
  z-index: 1;
}

.cap-card[data-cap-card="1"] {
  --in: clamp(0, (var(--p) - 0.20) * 4.55, 1);
  --tilt: calc((1 - var(--in)) * 1deg);
  transform:
    translateY(calc((1 - var(--in)) * 110%))
    rotate(calc(-1 * var(--tilt)));
  z-index: 2;
}

.cap-card[data-cap-card="2"] {
  --in: clamp(0, (var(--p) - 0.62) * 4.55, 1);
  --tilt: calc((1 - var(--in)) * 1deg);
  transform:
    translateY(calc((1 - var(--in)) * 110%))
    rotate(var(--tilt));
  z-index: 3;
}

/* Browser chrome on top of each card, sells the "real screen" feel */
.cap-card__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #f4f1eb;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: #6b7280;
}

.cap-card__chrome-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cap-card__chrome-title {
  margin-left: 8px;
  letter-spacing: 0.02em;
}

.cap-card__body {
  flex: 1;
  padding: clamp(var(--space-5), 3vh, var(--space-7));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Right-side copy (crossfade) ─────────────────────────── */

.capability-stack__copy {
  position: relative;
  height: 100%;
  min-height: 360px;
}

.cap-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-self: center;
  margin: auto 0;
  height: max-content;
  pointer-events: none;
  will-change: opacity, transform;
}

.cap-copy[data-cap-copy="0"] {
  --in:  clamp(0, 1 - (var(--p) - 0.16) * 6, 1);
  opacity: var(--in);
  transform: translateY(calc((1 - var(--in)) * -16px));
}

.cap-copy[data-cap-copy="1"] {
  --in:  clamp(0, (var(--p) - 0.22) * 6, 1);
  --out: clamp(0, (var(--p) - 0.58) * 6, 1);
  opacity: calc(var(--in) - var(--out));
  transform: translateY(calc((1 - var(--in) + var(--out)) * 16px));
}

.cap-copy[data-cap-copy="2"] {
  --in:  clamp(0, (var(--p) - 0.64) * 6, 1);
  opacity: var(--in);
  transform: translateY(calc((1 - var(--in)) * 16px));
}

.cap-copy__num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent-bright, #1da4f5);
  letter-spacing: var(--ls-wide);
}

.cap-copy h3 {
  margin: 0;
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  letter-spacing: var(--ls-tight);
  line-height: 1.15;
  color: #0f172a;
}

.cap-copy p {
  margin: 0;
  color: #475569;
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 46ch;
}

.cap-copy__list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #334155;
  font-size: 0.95rem;
}

.cap-copy__list li {
  position: relative;
  padding-left: 18px;
}

.cap-copy__list li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--accent-bright, #1da4f5);
  font-weight: 600;
}

/* ── Card 1: Speech Collection — session mock ───────────── */

.session-mock {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.session-mock__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.session-mock__kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent-bright, #1da4f5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.session-mock__title {
  margin: 4px 0 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: #0f172a;
}

.session-mock__rec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #b91c1c;
  background: #fee2e2;
  padding: 5px 10px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.session-mock__rec-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  animation: sessionRecPulse 1.4s ease-in-out infinite;
}

@keyframes sessionRecPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

.session-mock__waveform {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 64px;
  padding: 8px 0;
}

.session-mock__waveform span {
  flex: 1;
  height: calc(var(--h) * 100%);
  background: linear-gradient(180deg, #38b6ff, #1da4f5);
  border-radius: 2px;
  min-height: 4px;
  animation: sessionWave 1.6s ease-in-out infinite;
  animation-delay: calc(var(--h) * -1s);
}

@keyframes sessionWave {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.55); }
}

.session-mock__contribs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.session-mock__contribs li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: 10px;
  font-size: 0.82rem;
  color: #334155;
}

.session-mock__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
}

.session-mock__pill {
  font-size: 0.66rem;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 100px;
  background: #e2e8f0;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.session-mock__pill--ok {
  background: #d1fae5;
  color: #065f46;
}

.session-mock__pill--live {
  background: #dbeafe;
  color: #1e40af;
}

.session-mock__meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: #64748b;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
}

/* ── Card 2: Transcription — transcript mock ────────────── */

.transcript-mock {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
}

.transcript-mock__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eef2f7;
}

.transcript-mock__file {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: #334155;
}

.transcript-mock__badge {
  font-size: 0.68rem;
  font-weight: 600;
  color: #065f46;
  background: #d1fae5;
  padding: 4px 10px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.transcript-mock__lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.transcript-mock__lines li {
  display: grid;
  grid-template-columns: 60px 28px 1fr auto;
  align-items: start;
  gap: 10px;
  padding: 8px 10px;
  background: #f8fafc;
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #1f2937;
}

.transcript-mock__time {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #64748b;
  padding-top: 2px;
}

.transcript-mock__speaker {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  padding: 3px 0;
  border-radius: 6px;
  color: #fff;
  letter-spacing: 0.02em;
}

.transcript-mock__speaker--a { background: #38b6ff; }
.transcript-mock__speaker--b { background: #14b8a6; }

.transcript-mock__text em {
  background: rgba(56, 182, 255, 0.18);
  font-style: normal;
  padding: 1px 3px;
  border-radius: 3px;
}

.transcript-mock__flag {
  font-size: 0.62rem;
  font-weight: 700;
  color: #92400e;
  background: #fef3c7;
  padding: 3px 8px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  align-self: center;
}

.transcript-mock__foot {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: #64748b;
  padding-top: 10px;
  border-top: 1px dashed #e2e8f0;
}

/* ── Card 3: Dataset Delivery — JSON manifest mock ──────── */

.manifest-mock {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.7;
  color: #1f2937;
  background: #fbfaf6;
  border-radius: 10px;
  padding: 14px 16px;
  height: 100%;
  overflow-y: auto;
}

.manifest-mock__line {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.manifest-mock__line--indent-1 { padding-left: 18px; }
.manifest-mock__line--indent-2 { padding-left: 36px; }

.manifest-mock__node > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  border-radius: 4px;
  transition: background 150ms;
  display: flex;
  align-items: center;
  gap: 4px;
}
.manifest-mock__node > summary::-webkit-details-marker { display: none; }
.manifest-mock__node > summary:hover { background: rgba(56, 182, 255, 0.08); }

.manifest-mock__caret {
  display: inline-block;
  width: 12px;
  color: var(--accent-bright, #1da4f5);
  font-size: 0.7rem;
  transition: transform 180ms var(--ease-out, cubic-bezier(0.16,1,0.3,1));
  transform: rotate(-90deg);
}

.manifest-mock__node[open] > summary .manifest-mock__caret {
  transform: rotate(0deg);
}

/* Toggle visibility of folded vs unfolded summary fragments */
.manifest-mock__node[open] > summary .manifest-mock__folded { display: none; }
.manifest-mock__node:not([open]) > summary .manifest-mock__unfolded { display: none; }

/* Hide child rows when collapsed */
.manifest-mock__node:not([open]) > .manifest-mock__row {
  display: none;
}

.manifest-mock__key { color: #1da4f5; }
.manifest-mock__str { color: #15803d; }
.manifest-mock__num { color: #b45309; }
.manifest-mock__bool { color: #b91c1c; }

.manifest-mock__hint {
  color: #94a3b8;
  font-style: italic;
  font-size: 0.74rem;
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 1024px) {
  .capability-stack__layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .capability-stack__cards { min-height: 460px; }
  .cap-card { width: min(100%, 520px); height: 460px; }
}

@media (max-width: 720px) {
  .capability-stack { height: 520vh; }
  .capability-stack__sticky { padding: var(--space-6) var(--space-4); }
  .capability-stack__header h2 { font-size: clamp(1.5rem, 5vw, 2rem); }
  .cap-card { height: 420px; border-radius: 14px; }
  .cap-card__body { padding: var(--space-4); }
  .session-mock__contribs li { grid-template-columns: auto 1fr auto; font-size: 0.78rem; }
  .transcript-mock__lines li { grid-template-columns: 50px 24px 1fr; }
  .transcript-mock__flag { display: none; }
  .manifest-mock { font-size: 0.74rem; }
}

@media (prefers-reduced-motion: reduce) {
  .capability-stack {
    height: auto;
    background: #f6f1ea;
  }
  .capability-stack__sticky {
    position: static;
    height: auto;
    overflow: visible;
    grid-template-rows: auto;
  }
  .capability-stack__layout {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
  .capability-stack__cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    height: auto;
    min-height: 0;
  }
  .cap-card {
    position: static;
    width: 100%;
    height: auto;
    transform: none;
  }
  .capability-stack__copy { height: auto; min-height: 0; }
  .cap-copy {
    position: static;
    opacity: 1;
    transform: none;
    margin-top: var(--space-6);
  }
  .session-mock__rec-dot,
  .session-mock__waveform span { animation: none; }
}

/* Mobile fallback: drop the sticky stack-and-crossfade entirely.
   Each capability card sits above its matching copy as a plain
   block; the user reads top-to-bottom instead of fighting a
   horizontal pin. Overrides the 720px rule above with !important
   on the height. */
@media (max-width: 900px) {
  .capability-stack {
    height: auto !important;
    background: #f6f1ea;
    content-visibility: visible;
  }
  .capability-stack__sticky {
    position: static;
    height: auto;
    overflow: visible;
    grid-template-rows: auto;
    padding: var(--space-9) var(--space-5);
    gap: var(--space-7);
  }
  .capability-stack__header { opacity: 1 !important; }
  .capability-stack__layout {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
  .capability-stack__cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .cap-card {
    position: static !important;
    width: 100%;
    max-width: 560px;
    height: auto;
    margin: 0 auto;
    transform: none !important;
  }
  .capability-stack__copy { height: auto; min-height: 0; }
  .cap-copy {
    position: static !important;
    inset: auto !important;
    opacity: 1 !important;
    transform: none !important;
    margin-top: var(--space-6);
  }
  .session-mock__rec-dot,
  .session-mock__waveform span { animation: none; }
}

/* ────────────────────────────────────────────────────────────
   WHY SPIRELIGHT — guided-scroll walkthrough.
   Sticky section, ~640vh tall. Scroll-progress.js sets --p
   (0 → 1) on the section. CSS uses --p to crossfade four
   stage visuals + their right-side copy and to morph the bg
   colour through four hues. JS only handles the indicator
   text + active dot + dot-click smooth-scroll.

   --p timeline:
     0.00 – 0.18  stage 0 (Reach) in place
     0.18 – 0.28  stage 0 → 1 transition
     0.28 – 0.46  stage 1 (On-site) in place
     0.46 – 0.56  stage 1 → 2 transition
     0.56 – 0.74  stage 2 (Agile) in place
     0.74 – 0.84  stage 2 → 3 transition
     0.84 – 1.00  stage 3 (Hard markets) in place
   ──────────────────────────────────────────────────────────── */

.why-spirelight {
  --p: 0;

  /* Per-stage colour tokens (interpolated below by --p). */
  --c0: #dee7f0;   /* cool slate-blue — Reach */
  --c1: #ece1cd;   /* warm sand — On-site */
  --c2: #dee9e4;   /* sage-mint — Agile */
  --c3: #d9d0bf;   /* deeper khaki — Hard markets */

  --t1: clamp(0, (var(--p) - 0.18) * 10, 1);
  --t2: clamp(0, (var(--p) - 0.46) * 10, 1);
  --t3: clamp(0, (var(--p) - 0.74) * 10, 1);

  position: relative;
  height: 640vh;
  background: color-mix(
    in oklab,
    color-mix(
      in oklab,
      color-mix(in oklab, var(--c0), var(--c1) calc(var(--t1) * 100%)),
      var(--c2) calc(var(--t2) * 100%)
    ),
    var(--c3) calc(var(--t3) * 100%)
  );
}

.why-spirelight__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(var(--space-6), 5vh, var(--space-9)) 0;
}

.why-spirelight__inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  height: 100%;
}

.why-spirelight__header {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex-shrink: 0;
}

.why-spirelight__header .label {
  /* Accent crossfades through the 4 stage accents alongside --p. */
  color: color-mix(
    in oklab,
    color-mix(
      in oklab,
      color-mix(in oklab, #2f6388, #8a5a20 calc(var(--t1) * 100%)),
      #2f7a6c calc(var(--t2) * 100%)
    ),
    #4a3d24 calc(var(--t3) * 100%)
  );
}

.why-spirelight__header h2 {
  margin: 0;
  font-size: clamp(1.6rem, 2.8vw, 2.25rem);
  letter-spacing: var(--ls-tight);
  line-height: 1.15;
  color: #0f172a;
}

.why-spirelight__header p {
  margin: 0;
  color: #475569;
  font-size: 1rem;
  max-width: 56ch;
}

.why-spirelight__walkthrough {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: stretch;
  min-height: 0;
}

/* ── Visual area (left) ───────────────────────────────────── */

.why-spirelight__visuals {
  position: relative;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  overflow: hidden;
  min-height: 0;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.why-stage {
  position: absolute;
  inset: 0;
  padding: clamp(var(--space-4), 2.5vh, var(--space-6));
  pointer-events: none;
  will-change: opacity, transform;
}

/* Stage opacity / scale driven by --p. Each stage fades in
   over its transition window and out over the next. */
.why-stage[data-stage-content="0"] {
  --in:  clamp(0, 1 - (var(--p) - 0.18) * 10, 1);
  opacity: var(--in);
  transform: scale(calc(0.985 + 0.015 * var(--in)));
}
.why-stage[data-stage-content="1"] {
  --in:  clamp(0, (var(--p) - 0.18) * 10, 1);
  --out: clamp(0, (var(--p) - 0.46) * 10, 1);
  opacity: calc(var(--in) - var(--out));
  transform: scale(calc(0.985 + 0.015 * (var(--in) - var(--out))));
}
.why-stage[data-stage-content="2"] {
  --in:  clamp(0, (var(--p) - 0.46) * 10, 1);
  --out: clamp(0, (var(--p) - 0.74) * 10, 1);
  opacity: calc(var(--in) - var(--out));
  transform: scale(calc(0.985 + 0.015 * (var(--in) - var(--out))));
}
.why-stage[data-stage-content="3"] {
  --in:  clamp(0, (var(--p) - 0.74) * 10, 1);
  opacity: var(--in);
  transform: scale(calc(0.985 + 0.015 * var(--in)));
}

/* ── Copy area (right) ────────────────────────────────────── */

.why-spirelight__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-self: center;
}

.why-spirelight__indicator {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: var(--ls-wide);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: color-mix(
    in oklab,
    color-mix(
      in oklab,
      color-mix(in oklab, #2f6388, #8a5a20 calc(var(--t1) * 100%)),
      #2f7a6c calc(var(--t2) * 100%)
    ),
    #4a3d24 calc(var(--t3) * 100%)
  );
}

.why-spirelight__indicator-divider { color: #94a3b8; }

.why-copies {
  position: relative;
  min-height: 220px;
}

.why-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;
  will-change: opacity, transform;
}

.why-copy[data-stage-copy="0"] {
  --in: clamp(0, 1 - (var(--p) - 0.18) * 10, 1);
  opacity: var(--in);
  transform: translateY(calc((1 - var(--in)) * -8px));
}
.why-copy[data-stage-copy="1"] {
  --in:  clamp(0, (var(--p) - 0.18) * 10, 1);
  --out: clamp(0, (var(--p) - 0.46) * 10, 1);
  opacity: calc(var(--in) - var(--out));
  transform: translateY(calc((1 - var(--in) + var(--out)) * 8px));
}
.why-copy[data-stage-copy="2"] {
  --in:  clamp(0, (var(--p) - 0.46) * 10, 1);
  --out: clamp(0, (var(--p) - 0.74) * 10, 1);
  opacity: calc(var(--in) - var(--out));
  transform: translateY(calc((1 - var(--in) + var(--out)) * 8px));
}
.why-copy[data-stage-copy="3"] {
  --in: clamp(0, (var(--p) - 0.74) * 10, 1);
  opacity: var(--in);
  transform: translateY(calc((1 - var(--in)) * 8px));
}

.why-copy h3 {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: var(--ls-tight);
  line-height: 1.15;
  color: #0f172a;
}

.why-copy p {
  margin: 0;
  color: #334155;
  font-size: 1.0625rem;
  line-height: 1.55;
  max-width: 42ch;
}

.why-copy__support {
  font-size: 0.95rem !important;
  color: #64748b !important;
}

/* ── Pagination dots (clickable shortcut + progress) ─────── */

.why-spirelight__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
}

.why-dot {
  width: 10px;
  height: 10px;
  border-radius: 100px;
  background: rgba(15, 23, 42, 0.18);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: background 240ms, width 240ms;
}

.why-dot:hover,
.why-dot:focus-visible,
.why-dot:active { background: rgba(15, 23, 42, 0.32); }

.why-dot.active {
  width: 28px;
  background: color-mix(
    in oklab,
    color-mix(
      in oklab,
      color-mix(in oklab, #2f6388, #8a5a20 calc(var(--t1) * 100%)),
      #2f7a6c calc(var(--t2) * 100%)
    ),
    #4a3d24 calc(var(--t3) * 100%)
  );
}

/* ════════════════════════════════════════════════════════════
   Stage 01 — Reach.
   Real interactive world map rendered by D3 + TopoJSON. Each
   <path> is a country: covered markets are tinted brand cyan,
   featured markets sit one step deeper, and the selected one
   pops to a saturated fill. Click to swap the side panel's
   languages / dialects / match count.
   ════════════════════════════════════════════════════════════ */

/* Active stage opens up to clicks; the others stay inert so
   they don't intercept hover/click on whatever is rendered
   behind. The base .why-stage rule already sets pointer-events:
   none. */
.why-stage.is-active { pointer-events: auto; }

.reach-map {
  position: relative;
  width: 100%;
  height: 100%;
  background: #f8fbfe;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
}

.reach-map__grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(to right, rgba(148, 163, 184, 0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 163, 184, 0.18) 1px, transparent 1px);
  background-size: 140px 100px;
  opacity: 0.55;
  mask-image: linear-gradient(
    to bottom,
    transparent 0%, black 14%, black 88%, transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%, black 14%, black 88%, transparent 100%
  );
  pointer-events: none;
}

.reach-map__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: block;
}

.reach-map__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(circle at 48% 42%, rgba(255, 255, 255, 0.06), transparent 50%),
    rgba(248, 251, 254, 0.10);
  pointer-events: none;
}

/* Country fills — three tiers (uncovered / covered / featured)
   plus hover and selected states. Brand cyan throughout. */
.reach-country {
  fill: rgba(148, 163, 184, 0.12);
  stroke: rgba(148, 163, 184, 0.55);
  stroke-width: 0.5;
  stroke-linejoin: round;
  transition: fill 220ms ease, stroke 220ms ease;
}
.reach-country.is-covered  { fill: rgba(56, 182, 255, 0.18); }
.reach-country.is-featured { fill: rgba(56, 182, 255, 0.34); }
.reach-country.is-covered:hover {
  fill: rgba(56, 182, 255, 0.48);
  stroke: rgba(29, 109, 165, 0.7);
  stroke-width: 0.8;
}
.reach-country.is-selected,
.reach-country.is-selected:hover {
  fill: rgba(56, 182, 255, 0.78);
  stroke: #1d6da5;
  stroke-width: 1.2;
}

/* Side panel — replaces the static filter mock. Updates in
   place when a country is clicked; the .is-flash class kicks a
   subtle pulse so the user knows the data swapped. Anchored to
   the top-left, where the world projection has the least
   landmass (Atlantic / Arctic), so it stays out of the way. */
.reach-map__panel {
  position: absolute;
  z-index: 10;
  top: 22px;
  left: 22px;
  width: 230px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.22) 55%, rgba(255, 255, 255, 0.36) 100%);
  backdrop-filter: blur(22px) saturate(1.7) brightness(1.04);
  -webkit-backdrop-filter: blur(22px) saturate(1.7) brightness(1.04);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 16px;
  padding: 13px 15px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 0 0 1px rgba(56, 182, 255, 0.08) inset,
    0 -1px 0 rgba(15, 23, 42, 0.04) inset,
    0 18px 40px -12px rgba(15, 23, 42, 0.22),
    0 6px 14px -4px rgba(15, 23, 42, 0.10);
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  isolation: isolate;
}
.reach-map__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(80% 60% at 100% 100%, rgba(56, 182, 255, 0.10) 0%, rgba(56, 182, 255, 0) 60%);
  pointer-events: none;
  z-index: -1;
}
.reach-map__panel::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

.reach-map__panel-kicker,
.reach-map__panel-sub {
  display: block;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
}
.reach-map__panel-sub { letter-spacing: 0.16em; font-size: 9px; margin-top: 0; }

.reach-map__panel-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.reach-map__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.reach-map__chip {
  background: #f1f5f9;
  color: #334155;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.reach-map__chips--accent .reach-map__chip {
  background: rgba(56, 182, 255, 0.14);
  color: #1769a6;
}

/* Bottom-left hint with pulsing dot — gentle nudge that the
   map is interactive. */
.reach-map__hint,
.nordic-map__hint {
  position: absolute;
  z-index: 10;
  bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}
.reach-map__hint  { right: 22px; }
.nordic-map__hint { left: 24px; }
.reach-map__hint-dot,
.nordic-map__hint-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #38b6ff;
  position: relative;
}
.reach-map__hint-dot::after,
.nordic-map__hint-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(56, 182, 255, 0.5);
  animation: reach-pulse 1.6s ease-out infinite;
}
@keyframes reach-pulse {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Tiny breath when the panel content swaps — confirms the
   click landed without the user having to track everything
   that changed. */
.reach-map__panel.is-flash,
.nordic-map__panel.is-flash {
  animation: panel-flash 360ms ease-out;
}
@keyframes panel-flash {
  0%   { transform: scale(0.985); box-shadow: 0 12px 30px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 0 0 rgba(56, 182, 255, 0.35); }
  60%  { box-shadow: 0 12px 30px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 0 6px rgba(56, 182, 255, 0); }
  100% { transform: scale(1); box-shadow: 0 12px 30px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
}

/* ════════════════════════════════════════════════════════════
   Stage 02 — On-site
   Booking-style session card: brand bar at top, session info
   on the left (tags, info card, checklist), location picker
   and calendar on the right. Mirrors the look of our real
   contributor booking screen.
   ════════════════════════════════════════════════════════════ */

.onsite-mock {
  position: relative;
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.onsite-mock__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  font-weight: 600;
  font-size: 0.82rem;
  color: #0f172a;
}

.onsite-mock__logo {
  width: 28px;
  height: 28px;
  display: block;
  border-radius: 6px;
  object-fit: contain;
}

.onsite-mock__layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--space-5);
  padding: var(--space-5);
  min-height: 0;
}

.onsite-mock__title {
  margin: 0 0 12px;
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.onsite-mock__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.onsite-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 100px;
  font-size: 0.74rem;
  font-weight: 600;
  background: #f1f5f9;
  color: #334155;
}

.onsite-tag--blue {
  background: rgba(56, 182, 255, 0.12);
  color: #1d6da5;
}

.onsite-tag--green {
  background: rgba(20, 184, 166, 0.14);
  color: #0f766e;
}

.onsite-tag--violet {
  background: rgba(139, 92, 246, 0.14);
  color: #6d28d9;
}

.onsite-mock__info {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
}

.onsite-mock__info strong {
  display: block;
  font-size: 0.85rem;
  color: #92400e;
  margin-bottom: 2px;
}

.onsite-mock__info p {
  margin: 0;
  font-size: 0.78rem;
  color: #78533c;
  line-height: 1.45;
}

.onsite-mock__sub {
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #0f172a;
}

.onsite-mock__checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.78rem;
  color: #334155;
}

.onsite-mock__checklist li {
  position: relative;
  padding-left: 20px;
  line-height: 1.4;
}

.onsite-mock__checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 45%, #fff 46%, #fff 54%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, #fff 46%, #fff 54%, transparent 55%),
    #14b8a6;
}

.onsite-mock__step {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}

.onsite-mock__tabs {
  display: flex;
  gap: 4px;
  background: #f1f5f9;
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 10px;
}

.onsite-tab {
  flex: 1;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
}

.onsite-tab--active {
  background: #ffffff;
  color: #38b6ff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.onsite-mock__location {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  background: #f0f9ff;
  border-radius: 10px;
  margin-bottom: 14px;
  color: #1d6da5;
}

.onsite-mock__location > svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.onsite-mock__location strong {
  display: block;
  color: #0f172a;
  font-size: 0.85rem;
  margin-bottom: 2px;
}

.onsite-mock__location-link {
  font-size: 0.74rem;
  color: #1d6da5;
  text-decoration: underline;
  cursor: pointer;
}

.onsite-mock__cal {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  padding: 10px 12px;
}

.onsite-mock__cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.onsite-mock__cal-head strong {
  font-size: 0.85rem;
  color: #0f172a;
}

.onsite-mock__cal-arrows {
  display: inline-flex;
  gap: 4px;
}

.onsite-mock__cal-arrows button {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
}

.onsite-mock__cal-arrows button:hover { background: #f1f5f9; }

.onsite-mock__cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  font-family: var(--font-sans);
  font-size: 0.7rem;
}

.onsite-mock__cal-grid .day-name {
  text-align: center;
  font-weight: 600;
  font-size: 0.62rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 0;
}

.onsite-mock__cal-grid .day {
  text-align: center;
  padding: 5px 0;
  color: #0f172a;
  border-radius: 6px;
  cursor: pointer;
}

.onsite-mock__cal-grid .day:hover { background: #f1f5f9; }

.onsite-mock__cal-grid .day--muted { color: #cbd5e1; }

.onsite-mock__cal-grid .day--active {
  background: #38b6ff;
  color: #ffffff;
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════════
   Stage 03 — Agile (live ops dashboard).
   Two metrics, an accuracy line chart with an "adjustment"
   marker, and a feed of recent adjustments. Reads like a
   real operator-side console.
   ════════════════════════════════════════════════════════════ */

.agile-mock {
  position: relative;
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.agile-mock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.agile-mock__head > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.agile-mock__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #fee2e2;
  color: #b91c1c;
  border-radius: 100px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.agile-mock__live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  animation: agileLivePulse 1.2s ease-in-out infinite;
}

@keyframes agileLivePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.7); }
}

.agile-mock__title {
  font-size: 0.95rem;
  color: #0f172a;
  font-weight: 600;
}

.agile-mock__pill {
  font-size: 0.7rem;
  font-weight: 600;
  color: #2f7a6c;
  background: rgba(47, 122, 108, 0.12);
  padding: 4px 10px;
  border-radius: 100px;
}

.agile-mock__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.agile-metric {
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.agile-metric--accent {
  background: rgba(47, 122, 108, 0.08);
  border-color: rgba(47, 122, 108, 0.18);
}

.agile-metric__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.agile-metric__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.agile-metric__value small {
  font-size: 0.85rem;
  color: #94a3b8;
  font-weight: 500;
  margin-left: 2px;
}

.agile-metric__bar {
  height: 6px;
  background: #e2e8f0;
  border-radius: 100px;
  overflow: hidden;
  margin-top: 4px;
}

.agile-metric__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #38b6ff, #1da4f5);
  border-radius: 100px;
}

.agile-metric__delta {
  font-size: 0.74rem;
  font-weight: 600;
  color: #0f766e;
}

.agile-mock__chart {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}

.agile-mock__chart-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.agile-mock__chart svg {
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 90px;
}

.agile-mock__chart-grid line {
  stroke: #eef2f7;
  stroke-width: 1;
}

.agile-mock__chart-area { fill: url(#agileChartFill); }

.agile-mock__chart-line {
  fill: none;
  stroke: #2f7a6c;
  stroke-width: 2.2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.agile-mock__chart-marker {
  stroke: #ef4444;
  stroke-width: 1.4;
  stroke-dasharray: 4 4;
}

.agile-mock__chart-flag rect {
  fill: #ef4444;
}

.agile-mock__chart-flag text {
  fill: #ffffff;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
}

.agile-mock__chart-points circle {
  fill: #ffffff;
  stroke: #2f7a6c;
  stroke-width: 2;
}

.agile-mock__chart-points circle.active {
  fill: #2f7a6c;
}

.agile-mock__events {
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: 10px;
  padding: 10px 12px;
}

.agile-mock__events-head {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.agile-mock__events ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.agile-mock__events li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 0.78rem;
  color: #334155;
}

.agile-event__time {
  flex: 0 0 88px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: #94a3b8;
}

.agile-event__msg strong {
  color: #b91c1c;
  font-weight: 700;
  margin-right: 2px;
}

/* ════════════════════════════════════════════════════════════
   Stage 04 — Hard markets.
   Same image-map treatment as the Reach stage but scoped to
   Northern Europe. Wikimedia blank Europe SVG, scaled and
   positioned so Nordics + Baltics + UK fill the visible card,
   then blue-tinted via mix-blend-mode + filter so it lands in
   the same palette family. A small "Where we live" legend
   sits in the top-right.
   ════════════════════════════════════════════════════════════ */

.nordic-map {
  position: relative;
  width: 100%;
  height: 100%;
  background: #f8fbfe;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
}

.nordic-map__grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(to right, rgba(148, 163, 184, 0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 163, 184, 0.18) 1px, transparent 1px);
  background-size: 140px 100px;
  opacity: 0.55;
  mask-image: linear-gradient(
    to bottom,
    transparent 0%, black 14%, black 88%, transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%, black 14%, black 88%, transparent 100%
  );
  pointer-events: none;
}

.nordic-map__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: block;
}

.nordic-map__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(circle at 32% 42%, rgba(255, 255, 255, 0.06), transparent 50%),
    rgba(248, 251, 254, 0.10);
  pointer-events: none;
}

/* Country fills — neighbours stay quiet so the Nordics are the
   obvious focus. Only Nordic paths take pointer events. */
.nordic-country {
  stroke-linejoin: round;
  transition: fill 220ms ease, stroke 220ms ease;
}
.nordic-country.is-other {
  fill: rgba(148, 163, 184, 0.10);
  stroke: rgba(148, 163, 184, 0.4);
  stroke-width: 0.5;
  pointer-events: none;
}
.nordic-country.is-nordic {
  fill: rgba(56, 182, 255, 0.32);
  stroke: rgba(29, 109, 165, 0.55);
  stroke-width: 0.9;
}
.nordic-country.is-nordic:hover {
  fill: rgba(56, 182, 255, 0.55);
  stroke: rgba(29, 109, 165, 0.85);
  stroke-width: 1.1;
}
.nordic-country.is-selected,
.nordic-country.is-selected:hover {
  fill: rgba(56, 182, 255, 0.82);
  stroke: #1d6da5;
  stroke-width: 1.4;
}

.nordic-map__panel {
  position: absolute;
  z-index: 10;
  top: 24px;
  right: 24px;
  width: 260px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.22) 55%, rgba(255, 255, 255, 0.36) 100%);
  backdrop-filter: blur(22px) saturate(1.7) brightness(1.04);
  -webkit-backdrop-filter: blur(22px) saturate(1.7) brightness(1.04);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 18px;
  padding: 18px 20px 16px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 0 0 1px rgba(56, 182, 255, 0.08) inset,
    0 -1px 0 rgba(15, 23, 42, 0.04) inset,
    0 22px 48px -14px rgba(15, 23, 42, 0.24),
    0 8px 18px -6px rgba(15, 23, 42, 0.10);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  isolation: isolate;
}
.nordic-map__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(80% 60% at 100% 100%, rgba(56, 182, 255, 0.10) 0%, rgba(56, 182, 255, 0) 60%);
  pointer-events: none;
  z-index: -1;
}
.nordic-map__panel::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

.nordic-map__panel-kicker,
.nordic-map__panel-sub {
  display: block;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}
.nordic-map__panel-sub { letter-spacing: 0.18em; font-size: 10px; margin-top: 2px; }

.nordic-map__panel-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.nordic-map__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.nordic-map__tag {
  background: rgba(56, 182, 255, 0.14);
  color: #1769a6;
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 1100px) {
  .why-spirelight__walkthrough { gap: var(--space-5); }
  .onsite-mock__layout { grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-4); }
  .reach-map__panel,
  .nordic-map__panel { width: 240px; padding: 14px 14px 12px; }
}

@media (max-width: 900px) {
  /* Mobile fallback: drop the sticky walkthrough — show the
     header and all four differentiators stacked as plain text.
     The custom visuals are desktop-only since they need width
     to read properly. */
  .why-spirelight {
    height: auto;
    content-visibility: visible;
  }
  .why-spirelight__sticky {
    position: static;
    height: auto;
    overflow: visible;
    padding: var(--space-9) 0;
  }
  .why-spirelight__walkthrough {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .why-spirelight__visuals { display: none; }
  .why-copies {
    position: static;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }
  .why-copy {
    position: static !important;
    inset: auto !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto;
  }
  .why-spirelight__indicator,
  .why-spirelight__dots { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reach-mock__dots circle.pulse,
  .agile-mock__live-dot { animation: none; }
}

/* ════════════════════════════════════════════════════════════
   PARTNER STORY — sticky scroll-pinned section. A code-drawn
   cloud SVG sits behind serif copy; as the user scrolls, the
   sky transitions from black-and-white to full colour while
   each line of copy fades in with smoothstep easing.

   All reveal timings use the smoothstep curve t² × (3 − 2t),
   computed on top of a clamped linear progress, so motion
   accelerates and decelerates smoothly instead of clipping in
   and out linearly. This is what makes the lines feel like
   they "settle" into place rather than slide robotically.
   ════════════════════════════════════════════════════════════ */

.partner-story {
  --p: 0;

  /* ── Phase 1: sky clears (p = 0 → ~0.45) ────────────────
     Three cloud bands dissipate at staggered timings while
     the sun emerges and the sky gains colour. All finish
     before any copy appears. */
  --cover-t:   clamp(0, (var(--p) - 0.02) * 3.5, 1);
  --mid-t:     clamp(0, (var(--p) - 0.10) * 3.2, 1);
  --front-t:   clamp(0, (var(--p) - 0.16) * 3.0, 1);
  --sun-t:     clamp(0, (var(--p) - 0.05) * 2.5, 1);
  --c-t:       clamp(0, (var(--p) - 0.03) * 2.2, 1);

  --cover-out: calc(var(--cover-t) * var(--cover-t) * (3 - 2 * var(--cover-t)));
  --mid-out:   calc(var(--mid-t)   * var(--mid-t)   * (3 - 2 * var(--mid-t)));
  --front-out: calc(var(--front-t) * var(--front-t) * (3 - 2 * var(--front-t)));
  --sun:       calc(var(--sun-t)   * var(--sun-t)   * (3 - 2 * var(--sun-t)));
  --colour:    calc(var(--c-t)     * var(--c-t)     * (3 - 2 * var(--c-t)));
  --veil-fade: clamp(0, (var(--p) - 0.03) * 2.2, 1);

  /* ── Phase 2: copy reveals (p = 0.52 → ~0.90) ─────────
     Line 1 is present from the start. Line 2 and the body
     fade in only after the sky is open, with smoothstep
     easing so they settle instead of clipping. */
  --l2-t:    clamp(0, (var(--p) - 0.52) * 3.5, 1);
  --l1d-t:   clamp(0, (var(--p) - 0.56) * 3.2, 1);
  --body-t:  clamp(0, (var(--p) - 0.64) * 3.5, 1);

  --line2-in:  calc(var(--l2-t)   * var(--l2-t)   * (3 - 2 * var(--l2-t)));
  --line1-dim: calc(var(--l1d-t)  * var(--l1d-t)  * (3 - 2 * var(--l1d-t)));
  --body-in:   calc(var(--body-t) * var(--body-t) * (3 - 2 * var(--body-t)));

  /* Bottom-of-sticky bleed: as the scroll approaches the end
     of the pin, the bottom of the sky fades to the exact
     use-cases top colour, so when the user crosses the
     section boundary it's literally the same colour above
     and below. No separate bridge element. */
  --bleed-t: clamp(0, (var(--p) - 0.62) * 2.9, 1);
  --bleed:   calc(var(--bleed-t) * var(--bleed-t) * (3 - 2 * var(--bleed-t)));

  position: relative;
  height: 480vh;
  background: #d9d0bf;
  content-visibility: auto;
  contain-intrinsic-size: 1px 480vh;
}

.partner-story__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-7);
}

/* ── Background: code-drawn sky SVG + warm veil ──────────── */

.partner-story__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.partner-story__sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Start fully grayscale + dim; colour blooms as scroll
     progresses, in step with the clouds clearing. */
  filter:
    grayscale(calc((1 - var(--colour)) * 0.96))
    saturate(calc(0.22 + var(--colour) * 0.95))
    brightness(calc(0.92 + var(--colour) * 0.10))
    contrast(calc(1 + var(--colour) * 0.06));
  /* Subtle Ken-Burns: starts a bit more zoomed and settles
     as the sky opens up. */
  transform: scale(calc(1.05 - var(--colour) * 0.04))
             translateY(calc((1 - var(--colour)) * -1.2%));
  transform-origin: 50% 55%;
  will-change: filter, transform;
}

/* Cloud bands dissipate at staggered timings, with a light
   left-and-up drift to suggest wind clearing the sky. SVG
   transforms here are in user-space units (the viewBox is
   1920×1080), so the px values translate cloud groups across
   the illustration. */
.partner-story__sky .ps-clouds--cover {
  opacity: calc(1 - var(--cover-out));
  transform: translate(
    calc(var(--cover-out) * -120px),
    calc(var(--cover-out) * -40px)
  );
  will-change: opacity, transform;
}
.partner-story__sky .ps-clouds--mid {
  opacity: calc(1 - var(--mid-out) * 0.92);
  transform: translate(
    calc(var(--mid-out) * -90px),
    calc(var(--mid-out) * -10px)
  );
  will-change: opacity, transform;
}
.partner-story__sky .ps-clouds--front {
  /* Foreground clouds thin out but never vanish completely —
     a few wisps hold structure even after the sun is up. */
  opacity: calc(1 - var(--front-out) * 0.78);
  transform: translate(
    calc(var(--front-out) * -70px),
    calc(var(--front-out) * 20px)
  );
  will-change: opacity, transform;
}

/* The sun emerges as the cloud cover thins. transform-origin
   is in viewBox user-units (default transform-box for SVG is
   view-box) so the scale anchors at the sun's visual center. */
.partner-story__sky .ps-sun {
  opacity: var(--sun);
  transform: scale(calc(0.86 + var(--sun) * 0.18));
  transform-origin: 1380px 380px;
  will-change: opacity, transform;
}

/* Bottom bleed: at the end of the scroll pin, fades the
   bottom of the sky to the use-cases top colour so the
   boundary between the section and the use-cases section
   is invisible. Slightly warm-cream at the very bottom to
   approximate the use-cases' sun-glow tint at the boundary
   line, so the right side doesn't suddenly get warmer. */
.partner-story__bleed {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      1100px 760px at 78% calc(100% - 200px),
      rgba(255, 215, 130, 0.55) 0%,
      rgba(255, 215, 130, 0.18) 32%,
      rgba(255, 215, 130, 0) 62%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 45%,
      rgba(251, 242, 207, 0.55) 75%,
      rgba(251, 242, 207, 0.96) 100%
    );
  opacity: var(--bleed);
  will-change: opacity;
}

/* Khaki veil that fades out as colour returns — bridges the
   handoff from Why Spirelight's deeper-khaki end. */
.partner-story__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 110%, rgba(217, 208, 191, 0.55) 0%, rgba(217, 208, 191, 0) 60%),
    linear-gradient(180deg, rgba(217, 208, 191, 0.55) 0%, rgba(217, 208, 191, 0.16) 40%, rgba(217, 208, 191, 0) 72%);
  opacity: calc(1 - var(--veil-fade));
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* ── Foreground copy ─────────────────────────────────────── */

.partner-story__copy {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(var(--space-6), 5vw, var(--space-9));
}

.partner-story__line {
  margin: 0;
  font-family: var(--font-display, 'Inter', serif);
  font-weight: var(--fw-semibold);
  font-size: clamp(2rem, 5.4vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  color: #0f172a;
  text-shadow: 0 1px 30px rgba(255, 255, 255, 0.35);
  will-change: opacity, transform, color;
}

.partner-story__line--1 {
  grid-column: 1;
  font-style: italic;
  font-weight: var(--fw-medium);
  font-size: clamp(1.6rem, 4.2vw, 3.4rem);
  /* Already present when the user lands on the section.
     Softens toward gray as line 2 lands — the same hand-off
     the reference uses between its two lines. */
  color: color-mix(
    in oklab,
    #0f172a calc((1 - var(--line1-dim)) * 100%),
    #6f7886
  );
}

.partner-story__line--2 {
  grid-column: 1;
  margin-top: clamp(var(--space-1), 0.6vw, var(--space-2));
  opacity: var(--line2-in);
  transform: translateY(calc((1 - var(--line2-in)) * 30px));
}

.partner-story__body {
  grid-column: 2;
  align-self: end;
  margin: 0;
  max-width: 38ch;
  font-size: clamp(1rem, 1.18vw, 1.18rem);
  line-height: 1.55;
  color: #1f2937;
  opacity: var(--body-in);
  transform: translateY(calc((1 - var(--body-in)) * 28px));
  text-shadow: 0 1px 20px rgba(255, 255, 255, 0.5);
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 900px) {
  /* Mobile fallback: drop the sky animation entirely and show the
     copy as a plain serif vignette. The cloud SVG and bleed are
     hidden because they need landscape width and depth to read,
     and the sticky pin is removed so the section flows naturally. */
  .partner-story {
    height: auto;
    content-visibility: visible;
    background: #fbf2cf;
  }
  .partner-story__sticky {
    position: static;
    height: auto;
    overflow: visible;
    padding: var(--space-10) var(--space-5);
  }
  .partner-story__bg,
  .partner-story__bleed,
  .partner-story__veil { display: none; }
  .partner-story__copy {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    align-items: start;
  }
  .partner-story__line,
  .partner-story__line--1,
  .partner-story__line--2,
  .partner-story__body {
    opacity: 1 !important;
    transform: none !important;
    color: #0f172a !important;
  }
  .partner-story__body {
    grid-column: 1;
    align-self: start;
    color: #1f2937 !important;
  }
  .partner-story__line {
    font-size: clamp(1.875rem, 7vw, 2.75rem);
  }
  .partner-story__line--1 {
    font-size: clamp(1.375rem, 5.4vw, 2rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .partner-story__sky {
    transform: none;
    filter: none;
  }
  .partner-story__line,
  .partner-story__body {
    opacity: 1;
    transform: none;
  }
}

/* ════════════════════════════════════════════════════════════
   USE CASES — three flagship cards. Soft white cards on a
   neutral background, each with a coloured kicker, headline,
   visual mockup, and Learn-more pill that opens a modal.

   The section's top colour matches the partner-story bottom
   bleed exactly (#fbf2cf) so when the user crosses the
   boundary, both sides are the same colour. A radial
   sun-glow continues the warmth from where the sun sits in
   the sky illustration, fading down through the section.
   ════════════════════════════════════════════════════════════ */

.use-flag {
  position: relative;
  /* Sun shines from above-right (mirroring the sun position in the
     partner-story sky) and fades down through warm cream into a
     neutral page tone, so the cloud/sun mood "sticks" past the
     section boundary instead of cutting off. */
  background:
    radial-gradient(
      1100px 760px at 78% -200px,
      rgba(255, 215, 130, 0.55) 0%,
      rgba(255, 215, 130, 0.18) 32%,
      rgba(255, 215, 130, 0) 62%
    ),
    linear-gradient(
      180deg,
      #fbf2cf 0%,
      #faf3da 22%,
      #fbf6e8 55%,
      #fbf8f2 100%
    );
  padding: clamp(var(--space-7), 5vh, var(--space-9)) 0 clamp(var(--space-9), 8vh, var(--space-10));
  z-index: 0;
}

.use-flag__container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(var(--space-5), 5vw, var(--space-7));
}

.use-flag__header {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(var(--space-5), 4vw, var(--space-8));
  align-items: end;
  margin-bottom: clamp(var(--space-6), 5vw, var(--space-8));
}

.use-flag__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.use-flag__heading h2 {
  margin: 0;
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  color: var(--text-heading);
}

.use-flag__intro {
  margin: 0;
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  line-height: 1.55;
  color: var(--text-body);
  max-width: 36ch;
  padding-bottom: 0.6rem;
}

.use-flag__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--space-4), 1.6vw, var(--space-5));
}

/* ── Card ────────────────────────────────────────────────── */

.uc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-3), 1.4vw, var(--space-4));
  padding: clamp(var(--space-5), 2.4vw, var(--space-6));
  min-height: 480px;
  background: #fdfbf6;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 18px 40px -28px rgba(15, 23, 42, 0.18);
  overflow: hidden;
  transition: transform 280ms ease, box-shadow 280ms ease;
}

.uc-card:hover,
.uc-card:focus-within,
.uc-card:active {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 26px 50px -28px rgba(15, 23, 42, 0.24);
}

/* Per-card vibe — kicker bg + accent for highlights and CTA. */
.uc-card--wake    { --uc-bg: #f0eef6; --uc-fg: #2c2c3a; --uc-hl: #ddd9eb; }
.uc-card--ml      { --uc-bg: #e3e8ff; --uc-fg: #2c34a0; --uc-hl: #d4dbff; }
.uc-card--emotion { --uc-bg: #dee9d8; --uc-fg: #2e6d3a; --uc-hl: #d0e0c8; }

.uc-card__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  align-self: flex-start;
  padding: 0.35rem 0.75rem;
  background: var(--uc-bg);
  color: var(--uc-fg);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  border-radius: 6px;
}

.uc-card__kicker-glyph {
  font-size: 0.95em;
  line-height: 1;
  opacity: 0.85;
}

.uc-card__title {
  margin: 0;
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  line-height: 1.18;
  letter-spacing: var(--ls-tight);
  color: var(--text-heading);
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}

.uc-card__hl {
  align-self: flex-start;
  background: var(--uc-hl);
  padding: 0.05em 0.4em;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.uc-card__lead {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-body);
}

.uc-card__visual {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) 0;
  margin: 0 calc(-1 * clamp(var(--space-2), 1vw, var(--space-3)));
  min-height: 180px;
}

.uc-card__visual svg {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
}

.uc-card__cta {
  align-self: flex-start;
  padding: 0.55rem 1.1rem;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 100px;
  font-size: 0.92rem;
  font-weight: var(--fw-medium);
  color: var(--text-heading);
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.uc-card__cta:hover,
.uc-card__cta:focus-visible {
  background: rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.16);
}

.uc-card__cta:active {
  transform: scale(0.97);
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 980px) {
  .use-flag__header {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--space-3);
  }
  .use-flag__intro { padding-bottom: 0; }
  .use-flag__grid { grid-template-columns: 1fr; }
  .uc-card { min-height: 0; }
}

/* ════════════════════════════════════════════════════════════
   USE-CASE LEARN-MORE MODAL
   ════════════════════════════════════════════════════════════ */

.uc-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(var(--space-3), 4vw, var(--space-6));
  opacity: 0;
  /* Don't intercept clicks while the modal is closed — without
     this the invisible backdrop would eat clicks on the cards. */
  pointer-events: none;
  transition: opacity 220ms ease;
}

/* Match the [hidden] HTML attribute. The UA `[hidden]` rule has
   the same specificity as `.uc-modal`, so my display:flex would
   otherwise win and keep the modal mounted across the viewport. */
.uc-modal[hidden] { display: none; }

.uc-modal--visible {
  opacity: 1;
  pointer-events: auto;
}

.uc-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.uc-modal__panel {
  position: relative;
  width: min(640px, 100%);
  max-height: calc(100vh - var(--space-6));
  max-height: calc(100dvh - var(--space-6));
  overflow: auto;
  background: #fdfbf6;
  border-radius: 20px;
  padding: clamp(var(--space-5), 3vw, var(--space-7));
  box-shadow: 0 30px 80px -20px rgba(15, 23, 42, 0.4);
  transform: translateY(12px) scale(0.98);
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
  outline: none;
}

.uc-modal--visible .uc-modal__panel {
  transform: translateY(0) scale(1);
}

/* Per-modal vibe driven by data-kind. */
.uc-modal[data-kind="wake"]    { --uc-bg: #f0eef6; --uc-fg: #2c2c3a; --uc-hl: #ddd9eb; }
.uc-modal[data-kind="ml"]      { --uc-bg: #e3e8ff; --uc-fg: #2c34a0; --uc-hl: #d4dbff; }
.uc-modal[data-kind="emotion"] { --uc-bg: #dee9d8; --uc-fg: #2e6d3a; --uc-hl: #d0e0c8; }

.uc-modal__close {
  position: absolute;
  top: clamp(var(--space-3), 1.5vw, var(--space-4));
  right: clamp(var(--space-3), 1.5vw, var(--space-4));
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 100px;
  cursor: pointer;
  color: var(--text-heading);
  transition: background 180ms ease;
}

.uc-modal__close:hover { background: rgba(15, 23, 42, 0.10); }

.uc-modal__kicker {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  background: var(--uc-bg, #eef0f4);
  color: var(--uc-fg, var(--text-heading));
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  border-radius: 6px;
  margin-bottom: var(--space-3);
}

.uc-modal__title {
  margin: 0 0 var(--space-3);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: var(--ls-tight);
  color: var(--text-heading);
}

.uc-modal__lead {
  margin: 0 0 var(--space-4);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--text-body);
}

.uc-modal__detail p {
  margin: 0 0 var(--space-3);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text-body);
}

.uc-modal__detail ul {
  margin: 0 0 var(--space-4);
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.uc-modal__detail li {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-body);
}

.uc-modal__industries {
  padding: var(--space-3);
  background: var(--uc-bg, #f1f3f6);
  border-radius: 10px;
  font-size: 0.92rem;
  color: var(--uc-fg, var(--text-heading)) !important;
}

.uc-modal__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

body.uc-modal-open {
  overflow: hidden;
}

/* ── Hero ── */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: var(--header-height);
  overflow: hidden;
  /* Explicit white so we never see anything stacked behind the
     hero (e.g. the global ambient-canvas) bleeding through. */
  background: #ffffff;
}

.hero-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  /* Fade the waveform out toward the bottom so the dots don't end
     in a hard horizontal line where the hero meets the next
     section. */
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}

.section-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

.hero-headline {
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-heading);
  margin-bottom: var(--space-5);
}

.hero-subheadline {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: var(--text-body);
  line-height: var(--lh-body);
  margin-bottom: var(--space-7);
  max-width: 600px;
}

.hero-ctas {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ── Footer ── */

.site-footer {
  background: var(--bg-deepest);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-9) 0 var(--space-6);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-brand p {
  color: var(--text-muted);
  font-size: var(--fs-small);
  max-width: 300px;
}

.footer-links {
  display: flex;
  gap: var(--space-9);
}

.footer-col h4 {
  color: var(--text-heading);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.footer-col a {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-small);
  padding: var(--space-1) 0;
  transition: color var(--dur-fast) var(--ease-out);
}

.footer-col a:hover {
  color: var(--text-heading);
}

.footer-bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-xs);
  color: var(--text-dim);
}

.footer-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-7);
  margin-bottom: var(--space-8);
  background: var(--accent-subtle);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
}

.footer-cta-text h3 {
  margin: 0 0 var(--space-1) 0;
  font-size: var(--fs-h4);
  color: var(--text-heading);
}

.footer-cta-text p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-small);
}

.footer-cta-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.footer-contact a,
.footer-contact span {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-small);
  padding: var(--space-1) 0;
  line-height: 1.5;
}

.footer-contact a:hover {
  color: var(--text-heading);
}

.footer-contact svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.footer-contact .footer-address,
.footer-contact .footer-cvr {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  padding-left: calc(16px + var(--space-2));
}

@media (max-width: 768px) {
  .footer-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-5);
  }

  .footer-cta-actions {
    width: 100%;
  }

  .footer-cta-actions .btn {
    flex: 1;
    justify-content: center;
  }
}

/* ── Grid Utilities ── */

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

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

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

/* ── Responsive ── */

@media (max-width: 1024px) {
  .nav-links {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-deepest);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-6);
    z-index: 999;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    font-size: var(--fs-h3);
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
  }

  .menu-toggle {
    display: flex;
  }

  .header-cta .btn {
    display: none;
  }

  /* Pill header on mobile: keep tap-friendly height and readable text. */
  .site-header.pill-header.scrolled .header-inner {
    height: 56px;
    padding: 0 var(--space-3) 0 var(--space-4);
  }

  .site-header.pill-header.scrolled .header-logo span {
    font-size: 0.9375rem;
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .section {
    padding: var(--space-7) 0;
  }

  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }

  .grid-4 {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    flex-direction: column;
  }

  .footer-links {
    flex-direction: column;
    gap: var(--space-6);
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 var(--space-4);
  }
  
  .hero-ctas {
    flex-direction: column;
  }

  .hero-ctas .btn {
    width: 100%;
    justify-content: center;
  }

  /* Fix mobile overlap */
  .hero {
    padding-top: calc(var(--header-height) + var(--space-6));
    align-items: flex-start;
    min-height: auto;
  }
}

/* ── Prevent horizontal scroll ── */
html, body {
  overflow-x: clip;
  position: relative;
  width: 100%;
}

/* ── Global Ambient Background ── */
.ambient-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  z-index: -1;
  pointer-events: none;
  opacity: 0.8;
}



/* ── Segmented Scrolling (Native CSS) ── */
html {
  scroll-behavior: smooth;
}




.section {
  padding: var(--space-12) 0;
  position: relative;
}

@media (max-width: 768px) {
  .section {
    padding: var(--space-8) 0;
  }
}

/* ── Section Background Demarcations ── */
.bg-glass-white {
  background-color: rgba(255, 255, 255, 0.6);
  background-image: url('data:image/svg+xml;utf8,<svg width="240" height="120" viewBox="0 0 240 120" xmlns="http://www.w3.org/2000/svg"><path d="M0,60 Q60,120 120,60 T240,60" fill="none" stroke="%2338b6ff" stroke-opacity="0.15" stroke-width="1.5"/><path d="M0,40 Q60,80 120,40 T240,40" fill="none" stroke="%2338b6ff" stroke-opacity="0.1" stroke-width="1"/><path d="M0,80 Q60,100 120,80 T240,80" fill="none" stroke="%2338b6ff" stroke-opacity="0.05" stroke-width="1"/></svg>');
  background-size: 300px 150px;
  background-attachment: fixed;
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1;
}

.bg-glass-tint {
  background-color: rgba(240, 247, 255, 0.7);
  background-image: url('data:image/svg+xml;utf8,<svg width="240" height="120" viewBox="0 0 240 120" xmlns="http://www.w3.org/2000/svg"><path d="M0,60 Q60,120 120,60 T240,60" fill="none" stroke="%2314b8a6" stroke-opacity="0.15" stroke-width="1.5"/><path d="M0,40 Q60,80 120,40 T240,40" fill="none" stroke="%2314b8a6" stroke-opacity="0.1" stroke-width="1"/><path d="M0,80 Q60,100 120,80 T240,80" fill="none" stroke="%2314b8a6" stroke-opacity="0.05" stroke-width="1"/></svg>');
  background-size: 300px 150px;
  background-attachment: fixed;
  border-top: 1px solid rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1;
}

.cta-section {
  padding: var(--space-12) 0;
}

.site-footer {
  padding: var(--space-8) 0;
}

/* ════════════════════════════════════════════════════════════
   Use-case spotlight (use-cases.html)
   Sticky 4-stage walkthrough modelled on .why-spirelight, with
   horizontal swipe between stages so the visuals slide left as
   --p advances. Keeps the home-page premium feel without
   inventing a new system. */

.uc-spotlight {
  --p: 0;

  --c0: #e6eef8;
  --c1: #ece1cd;
  --c2: #dee9e4;
  --c3: #e7dfd1;

  --t1: clamp(0, (var(--p) - 0.18) * 10, 1);
  --t2: clamp(0, (var(--p) - 0.46) * 10, 1);
  --t3: clamp(0, (var(--p) - 0.74) * 10, 1);

  position: relative;
  height: 520vh;
  background: color-mix(
    in oklab,
    color-mix(
      in oklab,
      color-mix(in oklab, var(--c0), var(--c1) calc(var(--t1) * 100%)),
      var(--c2) calc(var(--t2) * 100%)
    ),
    var(--c3) calc(var(--t3) * 100%)
  );
}

.uc-spotlight__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(var(--space-6), 5vh, var(--space-9)) 0;
}

.uc-spotlight__inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  height: 100%;
}

.uc-spotlight__header {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex-shrink: 0;
}

.uc-spotlight__header .label {
  color: color-mix(
    in oklab,
    color-mix(
      in oklab,
      color-mix(in oklab, #2f6388, #8a5a20 calc(var(--t1) * 100%)),
      #2f7a6c calc(var(--t2) * 100%)
    ),
    #6b5a35 calc(var(--t3) * 100%)
  );
}

.uc-spotlight__header h2 {
  margin: 0;
  font-size: clamp(1.6rem, 2.8vw, 2.25rem);
  letter-spacing: var(--ls-tight);
  line-height: 1.15;
  color: #0f172a;
}

.uc-spotlight__header p {
  margin: 0;
  color: #475569;
  font-size: 1rem;
  max-width: 56ch;
}

.uc-spotlight__layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: stretch;
  min-height: 0;
}

/* ── Visual area (left) — horizontal swipe panel ───────────── */

.uc-spotlight__visuals {
  position: relative;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  overflow: hidden;
  min-height: 0;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

/* Each stage occupies the full panel; we slide horizontally based
   on --p so adjacent stages enter from the right and exit to the
   left. Same dwell windows as .why-spirelight (centres at 0.09 /
   0.37 / 0.65 / 0.92, transitions at 0.18 / 0.46 / 0.74). */
.uc-stage {
  position: absolute;
  inset: 0;
  padding: clamp(var(--space-5), 3vh, var(--space-7));
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;
  will-change: opacity, transform;
}

.uc-stage[data-uc-content="0"] {
  --in:  clamp(0, 1 - (var(--p) - 0.18) * 10, 1);
  opacity: var(--in);
  transform: translateX(calc((1 - var(--in)) * -8%));
}
.uc-stage[data-uc-content="1"] {
  --in:  clamp(0, (var(--p) - 0.18) * 10, 1);
  --out: clamp(0, (var(--p) - 0.46) * 10, 1);
  opacity: calc(var(--in) - var(--out));
  transform: translateX(calc(((1 - var(--in)) * 8%) + (var(--out) * -8%)));
}
.uc-stage[data-uc-content="2"] {
  --in:  clamp(0, (var(--p) - 0.46) * 10, 1);
  --out: clamp(0, (var(--p) - 0.74) * 10, 1);
  opacity: calc(var(--in) - var(--out));
  transform: translateX(calc(((1 - var(--in)) * 8%) + (var(--out) * -8%)));
}
.uc-stage[data-uc-content="3"] {
  --in:  clamp(0, (var(--p) - 0.74) * 10, 1);
  opacity: var(--in);
  transform: translateX(calc((1 - var(--in)) * 8%));
}

.uc-stage.is-active { pointer-events: auto; }

.uc-stage__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: #64748b;
}

.uc-stage__title {
  margin: 0;
  font-size: clamp(1.4rem, 2.1vw, 1.75rem);
  letter-spacing: var(--ls-tight);
  line-height: 1.2;
  color: #0f172a;
}

.uc-stage__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-3);
}

.uc-stage__chip {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 5px 10px;
  border-radius: 100px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.10);
  color: #1f2937;
  white-space: nowrap;
}

.uc-stage__chip--accent {
  background: rgba(56, 182, 255, 0.10);
  border-color: rgba(56, 182, 255, 0.32);
  color: #1f6da4;
}

.uc-stage__lines {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.uc-stage__line {
  font-size: 0.95rem;
  line-height: 1.55;
  color: #334155;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.uc-stage__line::before {
  content: "›";
  color: #94a3b8;
  font-weight: 600;
  flex: 0 0 auto;
}

/* ── Copy area (right) ────────────────────────────────────── */

.uc-spotlight__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-self: center;
}

.uc-spotlight__indicator {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: var(--ls-wide);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: color-mix(
    in oklab,
    color-mix(
      in oklab,
      color-mix(in oklab, #2f6388, #8a5a20 calc(var(--t1) * 100%)),
      #2f7a6c calc(var(--t2) * 100%)
    ),
    #6b5a35 calc(var(--t3) * 100%)
  );
}

.uc-spotlight__indicator-divider { color: #94a3b8; }

.uc-copies {
  position: relative;
  min-height: 240px;
}

.uc-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;
  will-change: opacity, transform;
}

.uc-copy[data-uc-copy="0"] {
  --in: clamp(0, 1 - (var(--p) - 0.18) * 10, 1);
  opacity: var(--in);
  transform: translateY(calc((1 - var(--in)) * -8px));
}
.uc-copy[data-uc-copy="1"] {
  --in:  clamp(0, (var(--p) - 0.18) * 10, 1);
  --out: clamp(0, (var(--p) - 0.46) * 10, 1);
  opacity: calc(var(--in) - var(--out));
  transform: translateY(calc((1 - var(--in) + var(--out)) * 8px));
}
.uc-copy[data-uc-copy="2"] {
  --in:  clamp(0, (var(--p) - 0.46) * 10, 1);
  --out: clamp(0, (var(--p) - 0.74) * 10, 1);
  opacity: calc(var(--in) - var(--out));
  transform: translateY(calc((1 - var(--in) + var(--out)) * 8px));
}
.uc-copy[data-uc-copy="3"] {
  --in: clamp(0, (var(--p) - 0.74) * 10, 1);
  opacity: var(--in);
  transform: translateY(calc((1 - var(--in)) * 8px));
}

.uc-copy h3 {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: var(--ls-tight);
  line-height: 1.15;
  color: #0f172a;
}

.uc-copy p {
  margin: 0;
  color: #334155;
  font-size: 1.0625rem;
  line-height: 1.55;
  max-width: 42ch;
}

.uc-copy__support {
  font-size: 0.95rem !important;
  color: #64748b !important;
}

/* ── Dots (clickable, with stage labels for orientation) ──── */

.uc-spotlight__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.uc-dot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 100px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.10);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: #475569;
  transition: background 240ms, border-color 240ms, color 240ms;
}

.uc-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.30);
  transition: background 240ms, transform 240ms;
}

.uc-dot:hover,
.uc-dot:focus-visible,
.uc-dot:active {
  background: rgba(15, 23, 42, 0.07);
  color: #0f172a;
}

.uc-dot.active {
  background: rgba(56, 182, 255, 0.10);
  border-color: rgba(56, 182, 255, 0.45);
  color: #1f6da4;
}
.uc-dot.active::before {
  background: var(--accent);
  transform: scale(1.2);
}

/* Mobile fallback (≤900px): drop the sticky 4-stage walkthrough.
   Each stage and its matching copy are stacked vertically as plain
   blocks; the horizontal swipe + copy crossfade need width to read,
   and pinning a 520vh section on a phone is brutal. */
@media (max-width: 900px) {
  .uc-spotlight {
    height: auto;
    content-visibility: visible;
  }
  .uc-spotlight__sticky {
    position: static;
    height: auto;
    overflow: visible;
    padding: var(--space-9) 0;
  }
  .uc-spotlight__inner { height: auto; gap: var(--space-7); }
  .uc-spotlight__layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .uc-spotlight__visuals {
    position: static;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    min-height: 0;
    overflow: visible;
  }
  .uc-stage {
    position: static !important;
    inset: auto !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    padding: var(--space-5);
  }
  .uc-spotlight__copy { align-self: stretch; }
  .uc-copies {
    position: static;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }
  .uc-copy {
    position: static !important;
    inset: auto !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  .uc-spotlight__indicator,
  .uc-spotlight__dots { display: none; }
}

/* ════════════════════════════════════════════════════════════
   Use-cases methodology panel (single glass card, 3-step). */

.uc-method {
  padding: var(--space-10) 0;
}

.uc-method__panel {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-7);
  align-items: start;
}

.uc-method__heading h2 {
  margin: var(--space-2) 0 var(--space-3);
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  letter-spacing: var(--ls-tight);
  line-height: 1.2;
}

.uc-method__heading p {
  margin: 0;
  color: #475569;
  line-height: 1.55;
  max-width: 36ch;
}

.uc-method__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.uc-method__step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--space-4);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 14px;
}

.uc-method__step-num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: var(--ls-wide);
  color: var(--accent);
}

.uc-method__step h3 {
  margin: 0;
  font-size: 1.0625rem;
  letter-spacing: var(--ls-tight);
  line-height: 1.25;
  color: #0f172a;
}

.uc-method__step p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #475569;
}

@media (max-width: 860px) {
  .uc-method__panel { grid-template-columns: 1fr; }
  .uc-method__steps { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   ABOUT PAGE — Why we exist + Operational philosophy
   Mirrors the premium glass + accent-tinted vocabulary used on
   home and use-cases. Sharp corners (radius 0) per design system.
   ════════════════════════════════════════════════════════════ */

.about-why {
  padding: var(--space-12) 0;
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .about-why { padding: var(--space-9) 0; }
}

.about-why__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(var(--space-7), 5vw, var(--space-10));
  align-items: start;
}

@media (max-width: 900px) {
  .about-why__layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

.about-why__copy .label {
  display: inline-block;
  margin-bottom: var(--space-4);
}

.about-why__headline {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  color: var(--text-heading);
  margin: 0 0 var(--space-6);
  max-width: 22ch;
}

.about-why__lead {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text-body);
  margin: 0 0 var(--space-5);
  max-width: 56ch;
}

.about-why__body {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-body);
  margin: 0 0 var(--space-5);
  max-width: 56ch;
}

.about-why__body:last-child { margin-bottom: 0; }

/* Stagger paragraph reveals so they cascade in like the home cascade. */
.about-why__copy .reveal:nth-child(1) { transition-delay: 0ms; }
.about-why__copy .reveal:nth-child(2) { transition-delay: 80ms; }
.about-why__copy .reveal:nth-child(3) { transition-delay: 160ms; }
.about-why__copy .reveal:nth-child(4) { transition-delay: 240ms; }
.about-why__copy .reveal:nth-child(5) { transition-delay: 320ms; }

/* Glass panel on the right — subtle accent halo, hairline border. */
.about-why__panel {
  position: relative;
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 12px 40px rgba(15, 23, 42, 0.06),
    0 0 0 1px rgba(56, 182, 255, 0.04);
  overflow: hidden;
  isolation: isolate;
}

.about-why__panel-glow {
  position: absolute;
  inset: -40% -30% auto auto;
  width: 70%;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle at 50% 50%, var(--accent-glow), transparent 65%);
  filter: blur(18px);
  pointer-events: none;
  z-index: -1;
}

.about-why__panel-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: var(--space-4);
}

.about-why__panel-glyph {
  font-size: 1rem;
  line-height: 1;
  color: var(--accent-bright);
}

.about-why__panel-title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
  color: var(--text-heading);
  margin: 0 0 var(--space-3);
}

.about-why__panel-lead {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-body);
  margin: 0 0 var(--space-5);
}

.about-why__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.about-why__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-heading);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(226, 232, 240, 0.7);
}

.about-why__list li:first-child { border-top: 0; padding-top: 0; }

.about-why__list-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 0.55em;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(56, 182, 255, 0.12);
}


/* ── Operational Philosophy ── */

.about-philosophy {
  padding: var(--space-12) 0;
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .about-philosophy { padding: var(--space-9) 0; }
}

.about-philosophy__header {
  max-width: 720px;
  margin: 0 auto var(--space-9);
  text-align: center;
}

.about-philosophy__header .label { margin-bottom: var(--space-3); }

.about-philosophy__header h2 {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  color: var(--text-heading);
  margin: 0 0 var(--space-4);
}

.about-philosophy__header p {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-body);
  margin: 0;
}

.about-philosophy__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

@media (max-width: 960px) {
  .about-philosophy__grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

.about-pillar {
  --pillar-tint: var(--accent);
  --pillar-tint-soft: rgba(56, 182, 255, 0.10);
  --pillar-tint-glow: rgba(56, 182, 255, 0.18);
  position: relative;
  padding: clamp(var(--space-6), 3vw, var(--space-7));
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-top: 3px solid var(--pillar-tint);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 8px 28px rgba(15, 23, 42, 0.05);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-normal) var(--ease-out),
              box-shadow var(--dur-normal) var(--ease-out);
}

.about-pillar::before {
  content: "";
  position: absolute;
  inset: -30% -20% auto auto;
  width: 60%;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle at 50% 50%, var(--pillar-tint-glow), transparent 65%);
  filter: blur(14px);
  opacity: 0.55;
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--dur-slow) var(--ease-out);
}

.about-pillar:hover,
.about-pillar:focus-within,
.about-pillar:active {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 14px 40px rgba(15, 23, 42, 0.08);
}

.about-pillar:hover::before,
.about-pillar:focus-within::before,
.about-pillar:active::before { opacity: 0.95; }

.about-pillar--accent { --pillar-tint: var(--accent);    --pillar-tint-soft: rgba(56,182,255,0.10);  --pillar-tint-glow: rgba(56,182,255,0.18); }
.about-pillar--teal   { --pillar-tint: var(--teal);      --pillar-tint-soft: rgba(20,184,166,0.10);  --pillar-tint-glow: rgba(20,184,166,0.18); }
.about-pillar--amber  { --pillar-tint: #f59e0b;          --pillar-tint-soft: rgba(245,158,11,0.10);  --pillar-tint-glow: rgba(245,158,11,0.20); }

.about-pillar__index {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-wide);
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

.about-pillar__glyph {
  position: absolute;
  top: clamp(var(--space-5), 3vw, var(--space-6));
  right: clamp(var(--space-5), 3vw, var(--space-6));
  font-size: 1.25rem;
  line-height: 1;
  color: var(--pillar-tint);
}

.about-pillar__title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: var(--ls-tight);
  color: var(--text-heading);
  margin: 0 0 var(--space-3);
}

.about-pillar p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-body);
  margin: 0;
}