.section--hero {
  --field: var(--field-hero-a);
  padding: 0;
  background: linear-gradient(108deg, var(--field-hero-a) 10%, #eee6f2 50%, var(--field-hero-b) 91%);
}
.hero { position: relative; height: max(720px, 100svh); max-height: 1200px; }
.hero__kicker {
  position: absolute; z-index: 3; top: 9.5%; left: 0; width: 100%;
  margin: 0; text-align: center; font-size: clamp(19px, 1.6vw, 26px);
  font-weight: 650; letter-spacing: -0.025em;
}
.hero__title {
  position: absolute; z-index: 0; top: 21%; left: 0; right: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  font-size: var(--t-mega); line-height: 0.9; letter-spacing: -0.08em; font-weight: 850;
}
.hero__name { display: block; text-align: center; }
.hero__name .vname { font-weight: 850; letter-spacing: -0.085em; }
.hero__stage { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.hero__car { position: absolute; max-width: none; object-fit: contain; user-select: none; will-change: transform; }
.hero__classes { position: absolute; z-index: 2; left: 0; width: 100%; }
.hero__class {
  position: absolute; display: flex; align-items: center; gap: 12px; white-space: nowrap;
  transform: translateX(-50%); font-size: clamp(15px, 1.3vw, 19px); letter-spacing: -0.015em;
}
.hero__class-name { color: var(--c-ink); font-weight: 750; }
.hero__year { font-size: var(--t-small); font-weight: 650; border-left: 1px solid rgb(13 15 28 / 0.22); padding-left: 12px; }
.hero:has(.is-ready) .hero__name { animation: hero-wordmark-settle 850ms var(--ease-spring) both; }
@keyframes hero-wordmark-settle {
  from { opacity: 0.2; transform: translateY(26px) scale(0.95); }
  to { opacity: 1; transform: none; }
}
@media (min-width: 1600px) { .hero__title { top: 19%; } }
@media (max-width: 1000px) {
  .hero__class { gap: 8px; }
  .hero__year { padding-left: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero:has(.is-ready) .hero__name { animation: none; }
  .hero__car { will-change: auto; }
}