/* Approved mobile homepage hero: video, description and contact in the first viewport. */
@media (max-width: 61.99rem) {
  .home-mobile-cta .hero--home {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(5rem, 1fr) auto;
    min-height: calc(100svh - 4.5rem);
    min-height: calc(100dvh - 4.5rem);
    min-height: calc(var(--hero-visible-height, 100dvh) - var(--hero-header-height, 4.5rem));
    /* The measured visual viewport already ends above the browser controls.
       A second bottom safe-area reserve can swallow spacing adjustments. */
    padding: 1.25rem max(1.5rem, env(safe-area-inset-left)) 8px;
    gap: 0;
    overflow: hidden;
  }

  .home-mobile-cta .hero--home .hero__media {
    position: absolute;
    inset: 0;
    grid-area: auto;
    z-index: -1;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
  }

  .home-mobile-cta .hero--home .hero__media .frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .home-mobile-cta .hero--home .hero__media picture {
    display: block;
    position: absolute;
    inset: 0;
  }

  .home-mobile-cta .hero--home .hero__media .frame img,
  .home-mobile-cta .hero--home .hero__media .frame__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    filter: none;
  }

  .home-mobile-cta .hero--home .hero__media .frame::before {
    opacity: 0;
  }

  .home-mobile-cta .hero--home .hero__media .frame::after {
    background: linear-gradient(180deg,
      rgba(8, 8, 7, 0.96) 0%,
      rgba(8, 8, 7, 0.76) 22%,
      rgba(8, 8, 7, 0.08) 42%,
      rgba(8, 8, 7, 0.32) 54%,
      rgba(8, 8, 7, 0.94) 73%,
      rgba(8, 8, 7, 0.98) 100%);
  }

  .home-mobile-cta .hero--home .hero__intro {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 1;
    padding: 0;
    margin: 0;
    max-width: 38rem;
  }

  .home-mobile-cta .hero--home h1 {
    margin: 0;
    font-size: clamp(2rem, 7.9vw, 3.6rem);
    line-height: 1.04;
  }

  .home-mobile-cta .hero--home h1 > .eyebrow {
    margin-bottom: 0.8rem;
  }

  .home-mobile-cta .hero--home .hero__body {
    grid-column: 1;
    grid-row: 3;
    position: relative;
    z-index: 1;
    align-self: end;
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 35rem;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
  }

  .home-mobile-cta .hero--home .hero__lead {
    order: 0;
    margin: 0;
    max-width: 38ch;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--cream);
    text-wrap: pretty;
  }

  .home-mobile-cta .hero--home .hero__actions {
    order: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
    width: 100%;
    max-width: 24rem;
    margin: 0;
    text-shadow: none;
  }

  .home-mobile-cta .hero--home .hero__actions .btn--gold {
    width: 100%;
    min-height: 3rem;
    font-size: 1.1rem;
  }

  .home-mobile-cta .hero--home .hero__actions .btn--ghost {
    min-height: 2.75rem;
    padding: 0.4rem 1rem;
    border-color: transparent;
    box-shadow: none;
    background: transparent;
    color: var(--cream-dim);
    font-size: 0.9rem;
  }

  .home-mobile-cta .hero--home .hero__actions .btn--ghost:hover {
    color: var(--cream);
    text-decoration: underline;
  }

  .home-mobile-cta .hero--home .hero__cue { display: none; }
}

@media (max-width: 22rem) {
  .home-mobile-cta .hero--home {
    padding-inline: 1.1rem;
    padding-top: 1rem;
    padding-bottom: 8px;
    grid-template-rows: auto minmax(3.5rem, 1fr) auto;
  }
  .home-mobile-cta .hero--home .hero__body { gap: 0.75rem; }
}

@media (max-width: 61.99rem) and (max-height: 34rem) and (orientation: landscape) {
  .home-mobile-cta .hero--home {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 2rem;
  }
  .home-mobile-cta .hero--home .hero__body { grid-column: 2; grid-row: 1; }
  .home-mobile-cta .hero--home .hero__media .frame::after { background: rgba(8, 8, 7, 0.82); }
}