/* Hide large background polygons & stop related animations in portrait mobile */
@media (orientation: portrait) and (max-width: 768px) {
  .hero-bg,
  .hero-bg.active,
  .main-bg,
  .main-bg.active,
  .main-bg-alt,
  .contact-bg {
    display: none !important;
    opacity: 0 !important;
    transform: none !important;
    clip-path: none !important;
    animation: none !important;
    transition: none !important;
    pointer-events: none !important;
  }

  /* If header::before is used for a full-bleed gradient that relies on size/positioning,
     ensure it doesn't create layout issues in narrow portrait viewports */
  body header::before {
    background-size: cover !important;
  }
}