/* Home hero. Ported verbatim from HeroVideo.astro's scoped styles. */
.hero {
    position: relative;
    background: var(--msc-green-dark);
    color: var(--msc-white);
    isolation: isolate;
    min-height: clamp(30rem, 74vh, 44rem);
    display: flex;
    align-items: flex-end;
  }

  .hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
  }

  .hero__poster,
  .hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hero__video {
    opacity: 0;
    transition: opacity 600ms ease;
  }

  .hero__video[data-playing='true'] {
    opacity: 1;
  }

  /* Dark Green scrim over the footage, never a text shadow (brief section 3).
     Weighted to the bottom left where the copy sits. */
  .hero__scrim {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        to top,
        rgba(28, 44, 31, 0.94) 0%,
        rgba(28, 44, 31, 0.72) 38%,
        rgba(28, 44, 31, 0.34) 70%,
        rgba(28, 44, 31, 0.22) 100%
      );
  }

  .hero__content {
    width: 100%;
    padding-block: var(--msc-space-4xl) var(--msc-space-3xl);
  }

  .hero__copy {
    max-width: 42rem;
  }

  .hero__heading {
    font-size: var(--msc-size-h1);
  }

  .hero__lede {
    margin-block-start: var(--msc-space-lg);
    font-size: var(--msc-size-body-lg);
    max-width: 44ch;
    opacity: 0.94;
  }

  .hero__actions {
    margin-block-start: var(--msc-space-xl);
  }

  @media (max-width: 40rem) {
    .hero {
      min-height: 0;
    }

    .hero__content {
      padding-block: var(--msc-space-3xl) var(--msc-space-2xl);
    }
  }