/* Height is content-driven: 165px above the title, 30px below the
   statistics (135px when there are none). */
.hero-section {
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  border-radius: 0 0 20px 20px;
  background: var(--hero-background-color, #a9c9a5);
}

.hero-background-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Figma, video only: right-pinned at natural aspect (height-matched), never
   stretched across the full bleed — the subject keeps its design scale at
   any width. The mask fades the video's left edge into the background
   color, anchored to the video itself so no seam appears on wide screens.
   Poster/background images keep the plain full-bleed cover above. */
video.hero-background-media {
  inset: 0 0 0 auto;
  width: auto;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%);
  mask-image: linear-gradient(to right, transparent 0%, #000 45%);
}

/* Optional mobile image: swaps in for the video/poster on phones */
.hero-background-media--mobile {
  display: none;
}

/* Opt-in: authored \n breaks survive below the mobile breakpoint, where
   multiline.css normally removes them */
.hero-section--keep-breaks br.multiline-br {
  display: inline;
}

@media (max-width: 1280px) {
  .hero-section--mobile-media .hero-background-media {
    display: none;
  }

  .hero-section--mobile-media .hero-background-media--mobile {
    display: block;
  }
}

.hero-content-layer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* 165px clears the overlaid navbar and sets the title's top position */
  padding: 165px 30px 30px;
  box-sizing: border-box;
}

.hero-content-layer--no-statistics {
  padding-bottom: 135px;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  width: min(1380px, 100%);
  margin-inline: auto;
}

.hero-copy {
  width: 602px;
  max-width: 100%;
  color: #18141e;
  font-family: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
  text-align: left;
}

.hero-title {
  width: 100%;
  margin: 0;
  color: inherit;
  font-size: 54.14px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0;
}

.hero-description {
  width: 398px;
  max-width: 100%;
  margin: 20px 0 0 6px;
  color: inherit;
  font: 400 16px/20px "Mona Sans", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 130px;
  height: 32px;
  margin: 35px 0 0 6px;
  padding: 0 18px;
  border-radius: 100px;
  box-sizing: border-box;
  color: #18141e;
  background: #3dbf7b;
  font: 500 13px/20px "Mona Sans", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.1em;
  text-align: center;
  text-decoration: none;
  transition: transform 160ms ease, filter 160ms ease;
}

.hero-cta:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.hero-cta:focus-visible {
  outline: 2px solid #18141e;
  outline-offset: 3px;
}

/* Statistics follow the copy at a fixed 65px gap; the hero grows to fit. */
.hero-statistics-area {
  margin-top: 65px;
}

/* Mobile-only media band (statistics pages); desktop keeps the full-bleed
   background */
.hero-media-band {
  display: none;
}

/* Title slides in from the left (matches the left-aligned copy), the
   description and CTA follow from below */
@keyframes hero-reveal-left {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hero-reveal-up {
  from {
    opacity: 0;
    transform: translateY(36px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* The statistics area is deliberately NOT animated: fading opacity over the
   panel's backdrop-filter makes the blur re-composite and visibly pop in
   darker once the fade ends */
.hero-reveal .hero-title,
.hero-reveal .hero-description,
.hero-reveal .hero-cta {
  opacity: 0;
}

.hero-reveal.is-revealed .hero-title,
.hero-reveal.is-revealed .hero-description,
.hero-reveal.is-revealed .hero-cta {
  animation: hero-reveal-up 850ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.hero-reveal.is-revealed .hero-title {
  animation-name: hero-reveal-left;
}

.hero-reveal.is-revealed .hero-description {
  animation-delay: 150ms;
}

.hero-reveal.is-revealed .hero-cta {
  animation-delay: 300ms;
}

/* Same breakpoint as the navbar's burger switch; the hero's inner
   statistics stack there too */
@media (max-width: 1280px) {
  .hero-section {
    min-height: 478px;
  }

  .hero-content-layer {
    padding: 112px 15px 15px;
  }

  .hero-title {
    min-height: 0;
    font-size: 32px;
    line-height: 1.1;
  }

  .hero-description {
    width: min(309px, 100%);
    min-height: 0;
    margin: 15px 0 0;
    font-size: 14px;
    line-height: 18px;
  }

  .hero-cta {
    margin: 24px 0 0;
  }

  /* With statistics the media collapses to a band between copy and stats:
     the full-bleed background comes off and the band owns the 224px gap
     (90px overlapping the CTA above, 130px reaching under the first
     statistic, both outside the flow). */
  .hero-section--statistics .hero-background-media {
    display: none;
  }

  .hero-media-band {
    display: block;
    height: 444px;
    margin: -90px -15px -130px;
    /* Fade from the section color into the media at the top, and back out
       at the bottom */
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      #000 22%,
      #000 78%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      #000 22%,
      #000 78%,
      transparent 100%
    );
  }

  .hero-media-band video,
  .hero-media-band img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Copy and stats paint above the band's overlapping edges */
  .hero-copy,
  .hero-statistics-area {
    position: relative;
    z-index: 1;
  }

  .hero-statistics-area {
    margin-top: 0;
  }
}

/* Authored \n breaks are desktop-only; below the site's mobile breakpoint
   (navbar switch, 1280px) the text reflows naturally. */
@media (max-width: 1280px) {
  br.multiline-br {
    display: none;
  }
}