/* hero: headline over a full-width wire stage drawn on canvas */
.hero { position: relative; overflow: hidden; padding-top: clamp(2.5rem, 5vw, 4.5rem); }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-in { position: relative; z-index: 2; }
.hero h1 {
  font-size: clamp(2.5rem, 0.9rem + 6.4vw, 5.4rem);
  line-height: 1.02; letter-spacing: -0.035em; font-weight: 600; max-width: 15ch;
  animation: rise .9s cubic-bezier(.2, .7, .2, 1) .9s both;
}
.lede { margin-top: 1.6rem; max-width: 44ch; font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); color: var(--muted-ink); animation: rise .9s cubic-bezier(.2, .7, .2, 1) 1.1s both; }
.hero .btn-row { margin-top: 2rem; animation: rise .9s cubic-bezier(.2, .7, .2, 1) 1.3s both; }
.stage { position: relative; height: clamp(250px, 28vw, 330px); pointer-events: none; }
.page-hero .stage { height: clamp(200px, 22vw, 270px); }
@media (min-width: 1000px) { .hero h1 { max-width: 21ch; } .lede { max-width: 58ch; } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero h1, .lede, .hero .btn-row { animation: none; } }