/* Responsive rules — Desktop first. Breakpoints: 1200 / 1000 / 768 / 480 */
@media (max-width:1200px){.g5{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:1000px){
  .hero-grid,.split{grid-template-columns:1fr}
  .hero-art{max-width:460px;margin-inline:auto;width:100%}
  .foot-grid{grid-template-columns:1fr 1fr}
  .banner .arch{margin:2rem auto 0}
}
@media (max-width:768px){
  .section{padding:3.5rem 0}
  .g3,.g2,.g5{grid-template-columns:1fr 1fr}
  .form-card{padding:1.3rem}
  .nav-cta{display:none}
}
@media (max-width:480px){
  body{font-size:1rem}
  .g3,.g2,.g4,.g5{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .btn{width:100%;justify-content:center}
  .btn-row{flex-direction:column}
  .logo b{font-size:1.1rem}.logo svg{width:40px;height:40px}
  .lb-prev,.lb-next{top:auto;bottom:20px}
  .tiles{grid-template-columns:1fr}
}
@media (max-width:360px){.logo small{display:none}}

/* Prevent any horizontal overflow / horizontal scrollbar on mobile screens */
html, body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  position: relative !important;
}

img, video, iframe, picture {
  max-width: 100%;
}

/* Remove quotes and speech bubbles over ZUZU's images on mobile view */
@media (max-width: 991px) {
  .banner-zuzu-speech,
  .zuzu-companion-bubble,
  .zuzu-char-tooltip {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Facilities Slider Mobile Responsiveness — Prevent cut-off / partial cards on phone view */
@media (max-width: 768px) {
  .facilities-carousel-container {
    margin-top: 1.2rem;
    margin-left: -1rem;
    margin-right: -1rem;
  }
  .facilities-track-wrap {
    padding: 0.8rem 0 1.6rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .facilities-track {
    gap: 1rem;
    padding: 0 1.25rem;
  }
  .facility-card {
    /* Responsive card width so exactly 1 full card is centered without getting cut off */
    width: min(320px, calc(100vw - 3.5rem));
    max-width: 86vw;
    border-radius: 20px;
    box-shadow: 4px 5px 0 var(--ink);
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  .facility-thumb {
    height: 195px;
  }
  .facility-info {
    padding: 1.2rem 1.1rem 1.1rem;
  }
  .facility-info h3 {
    font-size: 1.15rem;
    margin-bottom: 0.35rem;
    line-height: 1.3;
  }
  .facility-info p {
    font-size: 0.88rem;
    line-height: 1.48;
  }
  .slider-nav-btns {
    margin-top: 1.1rem;
    gap: 1rem;
  }
  .slider-arrow-btn {
    width: 48px;
    height: 48px;
    font-size: 1.3rem;
  }
}

@media (max-width: 380px) {
  .facilities-track {
    padding: 0 0.8rem;
  }
  .facility-card {
    width: calc(100vw - 2.5rem);
    max-width: 295px;
  }
  .facility-thumb {
    height: 175px;
  }
  .facility-info {
    padding: 1rem 0.9rem;
  }
}