.page-hero {
  background: var(--color-surface-muted);
  border-bottom: 1px solid var(--color-border);
}

.page-hero h1 {
  margin: 0 0 var(--space-sm);
  font-size: clamp(2rem, 4vw, 3rem);
}

.section-hero {
  position: relative;
  min-height: 32rem;
  padding: 0;
}

.section-hero__media {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 28%, rgba(1, 18, 43, 0.58) 100%);
}

.section-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  min-height: 32rem;
  padding-top: 12rem;
  padding-bottom: 2.15rem;
}

.section-hero__copy {
  max-width: 44rem;
}

.section-hero h1 {
  margin: 0;
  color: #ffffff;
  font-size: var(--font-size-page-hero-title);
  line-height: 0.98;
  font-weight: 400;
}

.section-banner {
  position: relative;
  z-index: 1;
}

.section-banner__inner {
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}

.section-banner__copy,
.section-banner__copy p {
  margin: 0;
  color: #ffffff;
  font-size: var(--font-size-page-copy);
  line-height: 1.28;
}

@media (max-width: 760px) {
  .section-hero,
  .section-hero__inner {
    min-height: 27rem;
  }

  .section-hero__inner {
    padding-top: 9rem;
    padding-bottom: 1.5rem;
  }
}

@media (max-width: 520px) {
  .section-hero,
  .section-hero__inner {
    min-height: 22rem;
  }

  .section-hero__inner {
    padding-top: 7.5rem;
    padding-bottom: 1.2rem;
  }

  .section-banner__inner {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}