/* ============================================================================
   Burton v7 — Hero
   ----------------------------------------------------------------------------
   The homepage hero. Mission-first, editorial-feel — no product pitch.
   Full-bleed container with an oversized faint mark in the background to
   echo the brand without shouting it.
   ========================================================================= */

.hero {
  position: relative;
  padding-block: var(--space-12) var(--space-16);
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}

@media (min-width: 720px) {
  .hero { padding-block: var(--space-20) var(--space-24); }
}

@media (min-width: 900px) {
  .hero { padding-block: var(--space-32) var(--space-32); }
}

/* Backdrop — full-bleed frequency response curve.
   Instantly signals "this site is about measured sound." Subtle enough to
   not fight the headline, bold enough to register as character. */
.hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  color: var(--color-ink);
  overflow: hidden;
}

.hero__backdrop svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__backdrop .hero__grid {
  opacity: 0.08;
}

.hero__backdrop .hero__curve {
  opacity: 0.22;
  stroke-dasharray: 0;
}

.hero__backdrop .hero__curve-fill {
  opacity: 0.05;
}

.hero__backdrop .hero__indicator {
  fill: var(--color-accent);
}

.hero__backdrop .hero__indicator-glow {
  fill: var(--color-accent);
  opacity: 0.25;
}

/* Motion itself is driven by SVG <animateMotion> on the circles — no CSS
   keyframes needed. SMIL doesn't honor prefers-reduced-motion natively;
   worst case, the dot glides gently along the curve which is non-disorienting. */

/* ── Content ─────────────────────────────────────────────────────────────── */

.hero__eyebrow {
  margin-bottom: var(--space-6);
}

.hero__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 18ch;
  margin-inline: auto;
  margin-bottom: var(--space-8);
  color: var(--color-ink);
}

.hero__title em {
  font-style: italic;
  color: var(--color-accent);
}

.hero__subtitle {
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-md), 1.5vw + 1rem, var(--fs-xl));
  line-height: var(--lh-relaxed);
  color: var(--color-ink-muted);
  max-width: 54ch;
  margin-inline: auto;
  margin-bottom: var(--space-10);
}

.hero__actions {
  display: inline-flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: var(--space-12);
}

/* Hero meta (instrument panel) was removed per user feedback — the hero
   now ends after the action buttons. Keeping the CSS file tight. */