@media (max-width: 768px) {
  .video-showcase {
    min-height: 500px;
  }
}

@media (max-width: 768px) {
  .hero::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
    will-change: auto;
  }

  .hero::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(3, 3, 6, 0.7) 0%, rgba(3, 3, 6, 1) 100%);
    content: " ";
    z-index: 1;
  }

  .hero-call-to-action .font-thin-small {
    margin-top: 0;
  }



  .container {

    /* padding: 0; */
  }

  .dynamic-heading-container {

    align-items: end;
  }

}

/* =============================================================
   STORY-ARC HERO — mobile adjustments
   ============================================================= */

@media (max-width: 900px) {
  .story-hero {
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-2xl);
  }

  .story-hero .hero-title {
    font-size: clamp(2rem, 7.5vw, 2.75rem);
  }
}

@media (max-width: 600px) {
  .story-hero .container {
    padding: 0 var(--space-md);
  }
}