.hero {
  min-height: min(620px, 74vh);
  padding: var(--space-2xl) 0;
  display: flex;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(248, 251, 255, 0.98) 0%, rgba(248, 251, 255, 0.92) 48%, rgba(248, 251, 255, 0.7) 100%),
    url("/assets/brand/logo-mark.svg?v=20260509") no-repeat right 12vw center;
  background-size: min(360px, 36vw) auto;
}

.hero-shell {
  display: block;
}

.hero-eyebrow {
  color: var(--ink-700);
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: 0.75rem;
  font-weight: 700;
}

.hero h1 {
  font-size: clamp(3rem, 6vw, 5.6rem);
  max-width: 12ch;
}

.hero-copy {
  max-width: 720px;
}

.hero-lead {
  max-width: 680px;
  font-size: 1.16rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: var(--space-md);
}

.hero-signal-strip {
  width: min(760px, 100%);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--space-xl);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--border-soft);
  box-shadow: var(--shadow-soft);
}

.hero-signal-strip span {
  min-height: 64px;
  display: grid;
  place-items: center;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink-900);
  font-weight: 700;
  text-align: center;
}

@media (max-width: 760px) {
  .hero {
    min-height: auto;
    background:
      linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(248, 251, 255, 0.9)),
      url("/assets/brand/logo-mark.svg?v=20260509") no-repeat right 1rem top 1rem;
    background-size: 132px auto;
  }

  .hero-signal-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}