/* Mobile-only fixes (desktop unaffected) */
@media (max-width: 768px) {
  /* Stop sideways scrolling */
  html, body { overflow-x: hidden; }

  /* Prevent media overflow */
  img, video, canvas, svg { max-width: 100%; height: auto; }

  /* ========== INDEX HERO (from your ZIP: .home-hero-title is 915px wide) ========== */
  .home-hero-title{
    width: auto !important;
    height: auto !important;
    max-width: 92vw !important;
  }

  .home-hero-subtitle{
    max-width: 92vw !important;
  }

  .hero-title{
    font-size: clamp(32px, 8.5vw, 44px);
    line-height: 1.05;
    margin: 0;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .hero-subtitle{
    font-size: 16px;
    line-height: 1.45;
    margin: 0;
  }

  /* Your ZIP uses: <div class="hero-parallax-background"><img class="home-image1" ...> */
  .hero-parallax-background { height: 100%; }

  .hero-parallax-background .home-image1{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
  }

  /* Padding so text isn’t jammed under the navbar on iPhone */
  .hero-parallax-content{
    padding-top: calc(56px + env(safe-area-inset-top));
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 28px;
  }
}