@media (max-width: 600px) {
  .opening .hero-content {
    top: clamp(82px, 14svh, 112px);
    left: clamp(16px, 5vw, 28px);
    right: clamp(16px, 5vw, 28px);
  }

  .opening .hero-index {
    gap: 8px;
    margin-bottom: 14px;
    font-size: 9px;
    letter-spacing: .12em;
  }

  .opening .hero-index .index-line {
    width: 22px;
    flex-shrink: 0;
  }

  .opening .hero-index span:nth-child(2),
  .opening .media-label,
  .opening .scroll-prompt {
    display: none;
  }

  .opening .hero-index span:last-child {
    max-width: none;
    margin: 0;
  }

  .opening .hero-content h1 {
    font-size: clamp(32px, 9.3vw, 52px);
    line-height: .99;
  }

  .opening .hero-content h1 .weight-light {
    margin-top: 8px;
    font-size: .83em;
    letter-spacing: -.055em;
  }

  .opening .hero-description {
    max-width: 35ch;
    margin: 16px 0 18px;
    font-size: 15px;
    line-height: 1.4;
  }

  .opening .hero-actions {
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  .opening .hero-actions .pill-button,
  .opening .hero-actions .reel-button {
    min-height: 44px;
  }

  .opening .hero-actions .reel-button {
    padding: 0;
    color: var(--ink);
    font: inherit;
    font-size: 10px;
    font-weight: 750;
  }

  .opening .reel-button .play-circle {
    width: 36px;
    height: 36px;
  }

  .jlv-call-link,
  .jlv-whatsapp-link {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    height: 48px;
    min-height: 48px;
  }

  .jlv-call-link {
    left: 12px;
    min-width: 0;
    padding-inline: 12px;
    font-size: 11px;
  }

  .jlv-whatsapp-link {
    right: 12px;
    width: 48px;
  }
}

@media (max-width: 600px) and (max-height: 620px) {
  .opening .hero-content { top: 76px; }
  .opening .hero-content h1 { font-size: clamp(30px, 8.8vw, 44px); }
  .opening .hero-description { margin-block: 12px; }
}

/* Balance the opening copy against the portrait on taller phones. */
@media (min-width: 361px) and (max-width: 600px) and (min-height: 650px) {
  .opening .hero-content {
    top: clamp(136px, calc(36svh - 95px), 176px);
  }
}

@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  .opening {
    height: 185svh;
  }
}