/* ============================================================
   HERO BAND CINEMA — full-bleed cinematic hero
   ============================================================ */
.hero {
  position: relative;
  background: var(--color-canvas);
  color: var(--color-ink);
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  padding: 0;
  display: flex; flex-direction: column;
}
/* Photographic depth via pure-CSS cinematic light streak (no external image) */
.hero__photo {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 80% at 72% 18%, rgba(218, 41, 28, 0.22) 0%, rgba(218, 41, 28, 0) 42%),
    radial-gradient(90% 60% at 20% 85%, rgba(60, 60, 60, 0.55) 0%, rgba(24, 24, 24, 0) 55%),
    linear-gradient(115deg, #050505 0%, #1a1a1a 38%, #2a2a2a 55%, #0d0d0d 100%);
}
/* Motion streak — car light trail across the canvas */
.hero__streak {
  position: absolute; top: 0; bottom: 0; width: 60%; z-index: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg) translateX(-10%);
  animation: streak 9s ease-in-out infinite;
}
@keyframes streak {
  0% { transform: skewX(-18deg) translateX(-40%); opacity: .4; }
  50% { opacity: .8; }
  100% { transform: skewX(-18deg) translateX(120%); opacity: .2; }
}
.hero__vignette {
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(120% 90% at 50% 60%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}
.hero__grid-line { position: absolute; z-index: 1; background: rgba(255, 255, 255, 0.04); }

.hero__topbar {
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--sp-lg);
  height: 64px;
}
.hero__content {
  position: relative; z-index: 4;
  margin-top: auto;
  padding: 0 var(--sp-lg) var(--sp-xxl);
  display: flex; flex-direction: column; gap: var(--sp-sm);
}
.hero__eyebrow { color: var(--color-muted-soft); display: flex; align-items: center; gap: var(--sp-xxs); }
.hero__eyebrow .dot { width: 6px; height: 6px; background: var(--color-primary); display: inline-block; }
.hero__title {
  color: var(--color-ink);
  font-family: var(--font-ferrari);
  font-size: clamp(48px, 11vw, 80px);
  font-weight: 500; line-height: 1.05; letter-spacing: -1.6px;
  max-width: 18ch;
}
.hero__title .accent { color: var(--color-primary); }
.hero__sub {
  color: var(--color-body);
  font-family: var(--font-ferrari);
  font-size: 20px; font-weight: 400; line-height: 1.4; letter-spacing: 0;
  max-width: 52ch;
  margin-top: var(--sp-xs);
}
.hero__ctas { display: flex; gap: var(--sp-sm); margin-top: var(--sp-md); flex-wrap: wrap; }

.hero__meta {
  position: relative; z-index: 4;
  display: flex; gap: var(--sp-xxl);
  padding: var(--sp-lg) var(--sp-lg) var(--sp-sm);
  border-top: 1px solid var(--color-hairline);
  margin-top: var(--sp-xl);
}
.hero__meta-item { display: flex; flex-direction: column; gap: 4px; }
.hero__meta-label {
  color: var(--color-muted);
  font-family: var(--font-ferrari);
  font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 1.1px;
  text-transform: uppercase;
}
.hero__meta-value {
  color: var(--color-ink);
  font-family: var(--font-ferrari);
  font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: 0.08px;
}
.hero__scroll {
  position: absolute; right: var(--sp-lg); bottom: var(--sp-lg); z-index: 4;
  color: var(--color-muted);
  writing-mode: vertical-rl;
  font-family: var(--font-ferrari);
  font-size: 11px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase;
  display: flex; align-items: center; gap: var(--sp-xxs);
}