@layer components {
  @scope (.hero) {
    :scope {
      position: relative;
      overflow: hidden;
      min-block-size: 88vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-block: clamp(3.5rem, 9vw, 8rem) clamp(3rem, 7vw, 6rem);
    }

    .hero__pitch {
      position: absolute;
      inset-block-start: clamp(84px, 13vh, 170px);
      inset-inline-end: clamp(1.25rem, 4vw, 3.5rem);
      inline-size: min(44vw, 520px);
      opacity: 0.95;
      pointer-events: none;
    }
    .hero__pitch svg {
      inline-size: 100%;
      block-size: auto;
    }

    .hero__content {
      position: relative;
    }

    .hero__pullquote {
      font-family: var(--font-display);
      font-weight: normal;
      font-size: clamp(2.5rem, 7vw, 6rem);
      line-height: 1;
      letter-spacing: -0.03em;
      text-transform: uppercase;
      margin: 0;
      max-inline-size: 16ch;
      text-wrap: balance;
    }
    .hero__pullquote--accent { color: var(--gold); }

    .hero__foot {
      display: grid;
      gap: clamp(1.25rem, 2.5vw, 2rem);
      margin-block-start: clamp(1rem, 2vw, 1.5rem);
      max-inline-size: 640px;
    }

    .hero__thesis {
      font-size: clamp(1.05rem, 1.6vw, 1.4rem);
      line-height: 1.5;
      color: rgba(244, 239, 227, 0.82);
      font-weight: 500;
      margin: 0;
    }

    .hero__foot .btn { justify-self: start; }
  }
}