/* July functional upgrade on top of the stable April visual foundation. */
html, body { margin: 0; padding: 0; width: 100%; }
body { overflow-x: hidden; }
main { display: block; width: 100%; margin: 0; padding: 0; }
body > .main-nav { position: fixed; }
body > .mobile-menu { position: fixed; margin: 0; }
#hero-container, #about-container, #services-container, #gallery-container, #contact-container { display: block; width: 100%; margin: 0; padding: 0; }
#hero-container > .hero-section, #about-container > section, #services-container > section, #gallery-container > section, #contact-container > section { margin-top: 0; }
img, video, canvas, svg { max-width: 100%; }
[hidden] { display: none !important; }
.mobile-menu-open { overflow: hidden; }
.mobile-auth-controls { width: min(100%, 360px); margin: 18px auto 0; padding-top: 18px; border-top: 1px solid rgba(0,212,255,.18); display: grid; gap: 12px; }
.mobile-auth-button, .mobile-logout-button, .mobile-dashboard-link { width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid rgba(0,212,255,.35); border-radius: 10px; background: rgba(0,212,255,.08); color: #00d4ff; text-decoration: none; font: 600 .86rem var(--font-heading); cursor: pointer; }
.mobile-user-menu { display: grid; gap: 10px; }
@media (max-width: 1024px) {
  .main-nav { min-height: 72px; }
  .hero-section { padding-top: 104px !important; }
}
@media (max-width: 640px) {
  .main-nav { min-height: 68px; }
  .hero-section { padding-top: 92px !important; }
  .contact-section, .about-section, .services-section, .gallery-section { padding-top: 92px !important; }
  .quote-fab { right: 16px !important; bottom: 18px !important; }
  .jcd-support-launch { right: 16px !important; bottom: 84px !important; }
}