.hero {
  --hero-cta-safe-bottom: clamp(5rem, 9vh, 7.5rem);
  position: relative;
  display: grid;
  align-items: stretch;
  overflow: hidden;
  padding: calc(var(--header-height) + var(--section-top-offset)) var(--page-inline) var(--hero-cta-safe-bottom);
  background:
    radial-gradient(circle at 74% 42%, rgba(191, 221, 242, 0.4), transparent 36rem),
    linear-gradient(180deg, var(--color-white) 0%, var(--color-light-bg) 100%);
}

.hero::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background:
    radial-gradient(ellipse 72% 96% at 20% 58%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.9) 33%, rgba(255, 255, 255, 0.46) 56%, rgba(255, 255, 255, 0) 76%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.44) 42%, rgba(255, 255, 255, 0.08) 72%),
    linear-gradient(0deg, rgba(248, 251, 254, 0.78) 0%, rgba(248, 251, 254, 0) 45%);
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: flex-start;
  max-width: 610px;
}

.hero h1 {
  max-width: 9.5ch;
  margin-top: 0.75rem;
}

.hero__copy {
  display: grid;
  gap: 1rem;
  max-width: 570px;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  font-size: clamp(1.05rem, 2vw, 1.28rem);
}

.hero__cta {
  margin-top: auto;
}

.hero__media {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 0;
  width: 80%;
  margin: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  filter: saturate(1.03);
}

@media (max-width: 980px) {
  .hero h1 {
    max-width: 12ch;
  }
}

@media (min-width: 980px) {
  .hero h1 {
    font-size: 5rem;
  }

  .hero__copy {
    font-size: 1.18rem;
  }
}

@media (max-width: 760px) {
  .hero {
    padding-top: calc(var(--header-height) + var(--section-top-offset));
  }

  .hero::before {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.72) 46%, rgba(248, 251, 254, 0.88) 100%);
  }

  .hero__media {
    inset: 0;
    width: 100%;
  }

  .hero__content {
    max-width: none;
  }

  .hero__cta {
    width: 100%;
  }
}