/* ==========================================================================
   Hero & page-header treatments
   ========================================================================== */
.hero {
  padding: var(--sp-8) 0 var(--sp-7);
  position: relative;
  overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-7); align-items: center; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } }

.hero-copy .eyebrow { display: flex; align-items: center; gap: 8px; }
.hero-copy .eyebrow::before { content: ''; width: 6px; height: 6px; background: var(--c-cyan); border-radius: 50%; }
.hero-copy h1 { margin-bottom: var(--sp-4); }
.hero-copy .lede { margin-bottom: var(--sp-3); max-width: 52ch; }
.hero-copy .body-lg { margin-bottom: var(--sp-5); }
.hero-ctas { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

.hero-visual { position: relative; max-width: 640px; margin: 0 auto; width: 100%; }
.hero-visual svg { width: 100%; height: 100%; }
@media (min-width: 1400px) { .hero-visual { max-width: 720px; } }

.hero-stages { display: flex; justify-content: space-between; margin-top: var(--sp-4); }
.hero-stages span { font-family: var(--f-mono); font-size: var(--fs-000); color: var(--c-ink-faint); position: relative; padding-top: var(--sp-2); }
.hero-stages span::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--c-line); }
.hero-stages span.is-active { color: var(--c-blue); }
.hero-stages span.is-active::before { background: var(--c-blue); }

/* Page header (non-home pages) */
.page-header { padding: var(--sp-7) 0 var(--sp-6); border-bottom: var(--border); position: relative; overflow: hidden; }
.page-header .eyebrow { display: flex; align-items: center; gap: 8px; }
.page-header .eyebrow::before { content: ''; width: 6px; height: 6px; background: var(--c-cyan); border-radius: 50%; }
.page-header h1 { max-width: 18ch; }
.page-header .lede { margin-top: var(--sp-4); }

/* Animated route line used in hero SVG */
.route-line { stroke-dasharray: 6 4; animation: dash 22s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -400; } }
.pulse-node { animation: pulse 2.6s ease-in-out infinite; transform-origin: center; }
@keyframes pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .route-line { animation: none; }
  .pulse-node { animation: none; }
}