@media (max-width: 800px) {
  .hero {
    min-height: max(100svh, 920px);
    height: auto;
  }

  .hero-media img {
    object-position: center top;
  }

  .hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(12, 22, 15, .04) 12%,
      rgba(12, 22, 15, .2) 38%,
      rgba(12, 22, 15, .88) 66%,
      rgba(12, 22, 15, .99) 100%
    );
  }

  .hero-content {
    align-self: end;
    width: 100%;
    padding: 6.5rem 1.2rem 2.5rem;
  }

  .hero .eyebrow {
    width: auto;
    margin-bottom: 1rem;
    padding: .45rem .6rem;
    font-size: .64rem;
    line-height: 1.4;
    letter-spacing: .12em;
  }

  .hero h1 {
    margin-bottom: 1.2rem;
    font-size: clamp(3rem, 13vw, 5rem);
    line-height: .93;
  }

  .hero-lead {
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 1.48;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: .65rem;
    margin-top: 1.35rem;
  }

  .hero-actions .button {
    width: 100%;
    min-height: 3rem;
    padding: .7rem 1rem;
    text-align: center;
  }

  .trust-line {
    margin-top: 1rem;
    font-size: .68rem;
    line-height: 1.45;
  }
}

@media (max-width: 430px) {
  .hero {
    min-height: max(100svh, 960px);
  }

  .hero-content {
    padding-right: 1rem;
    padding-bottom: 2rem;
    padding-left: 1rem;
  }

  .hero h1 {
    font-size: clamp(2.85rem, 13vw, 3.75rem);
  }
}

@media (max-width: 370px) {
  .hero {
    min-height: 990px;
  }

  .hero h1 {
    font-size: 2.75rem;
  }

  .hero-lead {
    font-size: .94rem;
  }
}

@media (max-width: 800px) and (orientation: landscape) {
  .hero {
    min-height: 780px;
  }

  .hero h1 {
    font-size: clamp(3rem, 9vw, 4.5rem);
  }
}