.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--color-white);
  background: #000;
}

.hero__background,
.hero::before { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__background { object-fit: cover; z-index: -2; }
.hero::before { content: ""; background: rgb(0 0 0 / 50%); z-index: -1; }
.hero__stage { position: relative; max-width: var(--page-width); margin-inline: auto; }
.hero__picture { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__image { position: absolute; z-index: 1; left: 30%; bottom: 0; width: auto; height: calc(100% - 24px); max-width: none; object-fit: contain; pointer-events: none; }
.hero[data-slide-kind="reach"] .hero__image { left: 40%; }
.hero__content { position: relative; display: flex; flex-direction: column; gap: 40px; padding-block: 64px; }
.hero__top { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 32px; }
.hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; width: 570px; max-width: 100%; }
.hero__text { display: flex; flex-direction: column; gap: 16px; }
.hero__description { max-width: 440px; white-space: pre-line; }
.hero__cta { display: inline-flex; justify-content: center; align-items: center; height: 90px; padding-inline: 48px; border-radius: 6px; text-decoration: none; background: var(--color-accent); transition: background-color 150ms ease; }
.hero__cta:hover { background: var(--color-accent-dark); }
.hero__cta { color: var(--color-white); }
.hero__cta span { text-box: trim-both cap alphabetic; }
.hero__stats { display: flex; flex-direction: column; gap: 48px; align-items: flex-end; flex-shrink: 0; }
.hero__stat { text-align: right; }
.hero__value { display: flex; align-items: baseline; justify-content: flex-end; gap: 3px; font-family: var(--font-heading); font-weight: 900; font-size: 44px; line-height: 1.2; }
.hero__slashes { font-size: 26px; letter-spacing: -0.1em; color: var(--color-accent); }
.hero__stat-label { opacity: 0.4; }
.hero__nav { position: relative; z-index: 3; display: flex; align-items: center; gap: 16px; margin-top: 40px; }
.hero__line { flex: 0 0 64px; height: 1px; background: rgb(239 239 239 / 20%); }
.hero__arrow { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; flex: 0 0 16px; width: 16px; height: 16px; border: 0; padding: 0; color: var(--color-white); background: transparent; }
.hero__arrow::after { content: ""; position: absolute; inset: -10px -6px; }
.hero__arrow img { width: 16px; height: 16px; }
.hero__arrow--next img { transform: rotate(180deg); }
.hero__arrow:hover { opacity: 0.65; }
.hero__counter { position: relative; z-index: 2; display: flex; align-items: baseline; gap: 2px; font-family: var(--font-heading); font-weight: 400; line-height: 1.2; font-variant-numeric: tabular-nums; }
.hero__current { font-size: 30px; text-box: trim-both cap alphabetic; }
.hero__total { font-size: 20px; opacity: 0.4; text-box: trim-both cap alphabetic; }
.hero__progress { position: relative; flex: 1; height: 1px; background: rgb(239 239 239 / 20%); }
.hero__progress-fill { position: absolute; inset: 0; background: var(--color-background); transform: scaleX(0); transform-origin: left; }
.hero.is-changing .hero__stats, .hero.is-changing .hero__image { animation: hero-reveal 300ms ease; }
@keyframes hero-reveal { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 1024px) {
  .hero__content { padding-block: 48px; }
  .hero__copy { width: 340px; gap: 24px; }
  .hero__text { gap: 8px; }
  .hero__description { max-width: 300px; }
  .hero__cta { height: 60px; padding-inline: 32px; }
  .hero__stats { gap: 24px; }
  .hero__value { font-size: 30px; }
  .hero__slashes { font-size: 16px; }
  .hero__nav { margin-top: 8px; }
  .hero__line { flex-basis: 24px; }
  .hero__current { font-size: 23px; }
  .hero__total { font-size: 16px; }
  .hero__image { left: 32%; height: calc(100% - 36px); }
  .hero[data-slide-kind="reach"] .hero__image { left: 38%; }
}

@media (max-width: 900px) {
  .hero__content { gap: 24px; }
  .hero__top { flex-direction: column; gap: 32px; }
  .hero__stats { flex-direction: row; align-items: flex-start; gap: 16px; }
  .hero__stat { flex: 1; min-width: 0; text-align: left; }
  .hero__stat-label { overflow-wrap: anywhere; }
  .hero__value { justify-content: flex-start; }
  .hero__nav { gap: 8px; margin-top: 0; }
  .hero__line { display: none; }
  .hero__picture { position: relative; inset: auto; align-self: stretch; width: 100%; }
  .hero__image { position: relative; left: auto; bottom: auto; display: block; width: 100%; height: clamp(270px, 55vw, 450px); max-width: 100%; margin: 0; object-fit: contain; object-position: center; }
  .hero[data-slide-kind="reach"] .hero__image { left: auto; }
}

@media (max-width: 380px) {
  .hero h1 { font-size: clamp(32px, 10vw, 38px); }
}