/* ==========================================================
   RESPONSIVE RULES — mobile-first overrides, layered on style.css
   ========================================================== */

@media (max-width: 1080px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .booking-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .mobile-panel { display: block; }
  .nav-cta .btn-ghost { display: none; }
}

@media (max-width: 640px) {
  .scene-title { font-size: clamp(2.3rem, 11vw, 3rem); }
  .scrolly-inner { padding-top: 3.5rem; }
  /* Numbered scene buttons stay visible and tappable on mobile now —
     they used to be hidden here, leaving no way to jump scenes on a
     phone other than scrolling through all 300vh of the pinned hero. */
  .scrolly-dots { right: .7rem; gap: .45rem; }
  .scrolly-dots button { width: 22px; height: 22px; font-size: .66rem; }
  /* The pinned hero was a flat 300vh (3 scenes x 100vh) on every
     screen size. On a phone that's 3 full screens of scrolling where
     the visible content barely appears to move (it's pinned/crossfading,
     not translating), which reads as a huge dead gap before the page
     continues into Dental Services. Shortening it on mobile keeps all
     3 scenes but gets through them noticeably faster. */
  .scrolly { height: 220vh; }
  .form-row { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.2rem; }
  .chat-window { right: .8rem; left: .8rem; width: auto; bottom: 5.6rem; }
  .chat-launcher, .floating-cta, .chat-with-us { right: 1rem; }
  .floating-cta span { display: none; }
  .floating-cta { padding: .9rem; border-radius: 50%; bottom: 5.6rem; }
  .chat-with-us { bottom: 9.6rem; padding: .5rem; }
  .chat-with-us .chat-label { display: none; }
  .chat-with-us-icon { width: 30px; height: 30px; }
  .marquee-track figure { flex: 0 0 92vw; aspect-ratio: 4/3; }
  .booking-card { padding: 1.3rem; }
}

@media (max-width: 420px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* Disable 3D tilt interactions on touch devices — they don't
   have a hover/pointer to drive them, and it keeps things fast. */
@media (hover: none) {
  .service-card { transform: none !important; }
}