.hero {
  position: relative;
  color: #fff;
  background: #080b0a;
  isolation: isolate;
  --hero-copy-opacity: 1;
  --hero-copy-shift: 0px;
  --hero-video-opacity: 0;
  --hero-video-scale: 1;
  --hero-shade-opacity: 1;
}

.hero__sticky {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 100svh;
  overflow: hidden;
}

.hero--animated { height: 280svh; }
.hero--animated .hero__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
}

.hero__poster, .hero__video, .hero__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__poster {
  display: block;
  opacity: calc(1 - var(--hero-video-opacity));
}
.hero__image, .hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__video {
  z-index: 1;
  opacity: var(--hero-video-opacity);
  transform: scale(var(--hero-video-scale));
  transform-origin: center;
}
.hero__shade {
  z-index: 2;
  pointer-events: none;
  opacity: var(--hero-shade-opacity);
  background:
    linear-gradient(90deg, rgba(5, 9, 7, .82), rgba(5, 9, 7, .42) 44%, transparent 78%),
    linear-gradient(0deg, rgba(5, 9, 7, .85), transparent 65%);
}
.hero .hero__content {
  position: relative;
  z-index: 3;
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
  padding: 144px 0 clamp(28px, 6vh, 64px);
  opacity: var(--hero-copy-opacity);
  transform: translateY(var(--hero-copy-shift));
}
.hero h1 {
  max-width: 670px;
  font-size: clamp(3.2rem, 5.5vw, 5.7rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.hero .hero__lede {
  max-width: 530px;
  margin-top: 24px;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
}
.hero .hero-metrics { margin-top: clamp(28px, 5vh, 48px); }
.hero .hero-metric { background: rgba(8, 15, 11, .58); }
.hero .hero-metric:hover, .hero .hero-metric:focus-visible {
  background: rgba(26, 49, 34, .8);
}
section[id] { scroll-margin-top: 88px; }

@media (max-aspect-ratio: 4 / 3) {
  .hero__video { object-fit: contain; }
}
@media (max-width: 700px) {
  .hero .hero__content {
    width: calc(100% - 36px);
    padding: 150px 0 28px;
  }
  .hero h1 { max-width: 520px; font-size: clamp(2.4rem, 10.5vw, 3.5rem); }
  .hero .hero__lede { margin-top: 20px; font-size: 1rem; }
  .hero .hero-metrics { margin-top: 24px; }
  .hero .hero-metric { padding: 12px; }
  .hero .hero-metric span { margin-bottom: 10px; }
  .hero .hero-metric small { font-size: .75rem; }
  .hero__shade {
    background: linear-gradient(0deg, rgba(5, 9, 7, .93), rgba(5, 9, 7, .68) 60%, rgba(5, 9, 7, .2));
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero--animated { height: auto; }
  .hero--animated .hero__sticky { position: relative; height: auto; min-height: 100svh; }
  .hero__video { display: none; }
  .hero .hero-metric { transition: none; }
}