.hero-pin{
  position:relative;
  height:420vh; /* scroll distance to scrub the whole clip */
}
.hero-stage{
  position:sticky;top:0;left:0;
  height:100vh;width:100%;
  overflow:hidden;
  background:var(--c-black);
  display:flex;align-items:center;justify-content:center;
}
.hero-media{
  position:absolute;inset:0;width:100%;height:100%;
}
.hero-media video,
.hero-media img.hero-fallback{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
}
.hero-media::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(to bottom, rgba(8,9,10,.55) 0%, rgba(8,9,10,.05) 30%, rgba(8,9,10,.15) 60%, rgba(8,9,10,.85) 100%);
  pointer-events:none;
}
.hero-grain{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px;
}
.hero-copy{
  position:relative;z-index:5;
  width:min(1320px,92vw);margin-inline:auto;
  height:100%;
  display:flex;flex-direction:column;justify-content:center;
  pointer-events:none;
}
.js .hero-copy .eyebrow{opacity:0;transform:translateY(14px)}
.hero-brand{
  font-family:var(--f-serif);
  font-size:clamp(3rem,9vw,7.5rem);
  color:var(--c-ivory);
  line-height:.94;
  mix-blend-mode:normal;
}
.js .hero-brand{opacity:0;transform:translateY(28px)}
.hero-model{
  font-family:var(--f-sans);
  font-size:clamp(.85rem,1.4vw,1.05rem);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--c-amber);
  margin-top:1.1rem;
}
.js .hero-model{opacity:0;transform:translateY(20px)}
.hero-line{
  margin-top:2.2rem;
  font-family:var(--f-serif);
  font-style:italic;
  font-size:clamp(1.15rem,2.4vw,1.9rem);
  color:var(--c-ivory-dim);
  max-width:20ch;
}
.js .hero-line{opacity:0;transform:translateY(20px);
}
.hero-scrollcue{
  position:absolute;bottom:2.6rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--c-ivory-dim);
  opacity:0;z-index:5;
}
.hero-scrollcue::after{
  content:'';width:1px;height:34px;background:linear-gradient(var(--c-amber),transparent);
  animation:scrollcue 2s ease-in-out infinite;
}
@keyframes scrollcue{
  0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  50.01%{transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

.hero-loading-badge{
  position:absolute;bottom:2.4rem;right:clamp(1.2rem,4vw,3rem);z-index:5;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--c-metal);
  display:flex;align-items:center;gap:.5rem;
}
.hero-loading-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--c-amber);animation:pulseDot 1.4s ease-in-out infinite}
@keyframes pulseDot{0%,100%{opacity:.25}50%{opacity:1}}

@media (max-width:720px){
  .hero-pin{height:320vh}
  .hero-line{max-width:16ch}
}

@media (prefers-reduced-motion: reduce){
  .hero-pin{height:auto}
  .hero-stage{position:relative;height:100svh}
  .hero-scrollcue::after{animation:none;height:20px}
}