/* ============================================
   STORY FILM — Responsive
   Mobile-first breakpoints
   ============================================ */

/* --- Tablet & below (< 1024px) --- */
@media (max-width: 1024px) {
  .container {
    padding: 0 32px;
  }

  h1 {
    font-size: 96px;
  }

  h2 {
    font-size: 38px;
  }

  .hero-row-bottom {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }

  .hero-row-bottom .hero-col-left,
  .hero-row-bottom .hero-col-right {
    text-align: center;
  }
}

/* --- Mobile (< 768px) --- */
@media (max-width: 768px) {
  .container {
    padding: 0 20px;
  }

  h1 {
    font-size: 72px;
  }

  h2 {
    font-size: 32px;
  }

  /* Nav */
  .nav-links {
    display: none;
  }

  .nav-cta-desktop {
    display: none;
  }

  .burger {
    display: flex;
  }

  /* Hero */
  #hero {
    padding-top: 100px;
    min-height: auto;
    padding-bottom: 60px;
  }

  .hero-meta-bar {
    display: none;
  }

  .hero-title .word-carousel {
    min-height: 1.15em;
  }

  .hero-row-bottom {
    padding-top: 32px;
  }

  .hero-row-bottom .hero-col-center .label {
    display: none;
  }
}

/* --- Small mobile (< 480px) --- */
@media (max-width: 480px) {
  h1 {
    font-size: 52px;
  }

  .hero-subtitle {
    font-size: 8px;
    letter-spacing: 0.3em;
  }
}