.hero {
  position: relative;
  display: grid;
  min-height: max(100svh, var(--hero-min-height-mobile));
  overflow: hidden;
  background: var(--color-bg);
  animation: hero-fade-in var(--hero-fade-duration) var(--ease-motion) both;
  isolation: isolate;
}

.hero__media,
.hero__media img,
.hero__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__media {
  z-index: var(--z-base);
}

.hero__media img {
  object-fit: cover;
  object-position: var(--hero-object-position-mobile);
}

.hero__overlay {
  z-index: calc(var(--z-base) + var(--z-base));
  background: linear-gradient(180deg, var(--hero-overlay-mobile-start) 0%, var(--hero-overlay-mobile-middle) 48%, var(--hero-overlay-mobile-end) 78%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: calc(var(--container-max) + var(--container-padding-desktop) * 2);
  min-height: inherit;
  margin-inline: auto;
  padding: calc(var(--header-height-mobile) + var(--space-4)) var(--container-padding-mobile) calc(var(--space-10) + var(--hero-scroll-line-height));
}

.hero__content {
  width: 100%;
  max-width: var(--hero-content-max-width);
  text-align: center;
}

.hero__title {
  max-width: var(--hero-title-max-width);
  margin: 0 auto var(--space-3);
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.hero__statement {
  margin: 0 0 var(--space-4);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-regular);
  line-height: 1.8;
  letter-spacing: 0.02em;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

.hero__actions .text-link {
  align-self: center;
}

.hero__scroll {
  position: absolute;
  inset: auto 50% var(--space-2) auto;
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text);
  transform: translateX(50%);
}

.hero__scroll-label {
  font-family: var(--font-number);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.12em;
}

.hero__scroll-line {
  width: 1px;
  height: var(--hero-scroll-line-height);
  background: currentcolor;
  opacity: var(--opacity-overlay);
}

@keyframes hero-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (min-width: 768px) {
  .hero {
    min-height: max(100svh, var(--hero-min-height-desktop));
  }

  .hero__media img {
    object-position: var(--hero-object-position-tablet);
  }

  .hero__overlay {
    background: linear-gradient(90deg, var(--hero-overlay-desktop-start) 0%, var(--hero-overlay-desktop-middle) 42%, var(--hero-overlay-desktop-end) 70%);
  }

  .hero__inner {
    justify-content: flex-start;
    padding-inline: var(--container-padding-tablet);
  }

  .hero__content {
    max-width: min(62vw, var(--hero-content-max-width));
    text-align: left;
  }

  .hero__title {
    margin-inline: 0;
  }

  .hero__actions {
    flex-direction: row;
    align-items: center;
  }
}

@media (min-width: 992px) {
  .hero__media img {
    object-position: var(--hero-object-position-desktop);
  }

  .hero__inner {
    padding: calc(var(--header-height-desktop) + var(--space-8)) var(--container-padding-desktop) calc(var(--space-10) + var(--hero-scroll-line-height));
  }

  .hero__content {
    max-width: var(--hero-content-max-width);
  }
}

@media (max-height: 740px) {
  .hero__inner {
    align-items: flex-start;
    padding-top: calc(var(--header-height-mobile) + var(--space-6));
    padding-bottom: var(--space-10);
  }

  .hero__scroll {
    display: none;
  }
}

@media (min-width: 992px) and (max-height: 740px) {
  .hero__inner {
    padding-top: calc(var(--header-height-desktop) + var(--space-6));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero {
    animation: none;
  }
}