/* Shared desktop and mobile layout safeguards. */
html { -webkit-text-size-adjust: 100%; }
body { min-width: 0; overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; }
img { height: auto; }
main, section, .container, .nav, .card, .footer-column, .contact-row, .team-profile { min-width: 0; }
p, li, a, td, th, h1, h2, h3 { overflow-wrap: anywhere; }

@media (max-width: 860px) {
  header, header.main-header { position: sticky; top: 0; }
  header .nav, .main-header .nav {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 12px;
  }
  header .logo, .main-header .logo { min-width: 0; max-width: 100%; }
  header .logo img, .main-header .logo img { flex: 0 0 auto; height: 40px; }
  header .logo span, .main-header .logo span {
    display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font-size: 13px;
  }
  header nav, .main-header nav {
    display: flex !important; order: 2; width: 100%; max-width: 100%; margin: 0;
    padding: 4px; gap: 2px; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; white-space: nowrap; border-radius: 999px;
  }
  header nav::-webkit-scrollbar, .main-header nav::-webkit-scrollbar { display: none; }
  header nav a, .main-header nav a, .main-header nav a.support-link {
    flex: 0 0 auto; margin: 0; padding: 8px 10px; font-size: 12px;
  }
  main { width: 100%; padding-inline: 14px; }
  section { min-height: auto; scroll-snap-align: none; }
  .grid, .team-grid, .contact-details { grid-template-columns: minmax(0, 1fr); }
  .footer-container, .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .footer-column, .footer-grid > div { min-width: 0; transform: none !important; }
  .phone-row, .footer-phone-line { white-space: normal; }
  .modal-overlay { padding: 12px; }
  .modal-card { width: 100%; max-height: calc(100dvh - 24px); border-radius: 18px; }
  .modal-header { padding: 16px; }
  .modal-header h2 { font-size: 1.25rem; }
  .modal-body { padding: 22px 16px; }
  .legal-content h1 { font-size: clamp(1.7rem, 9vw, 2.2rem); }
  .legal-content h2 { font-size: 1.2rem; }
}

@media (max-width: 560px) {
  .ais-popup { padding: 16px; }
  .ais-popup-content { width: 100%; }
  .ais-popup-close { top: 8px; right: 8px; }
  .hero { padding-top: 30px; }
  .hero h1, h1 { font-size: clamp(32px, 11vw, 46px); }
  .card, .ticket-card, .contact-card { padding: 16px; }
  .form-grid { display: block; }
  .field { margin-bottom: 18px; }
  input, select, textarea, button, .btn { max-width: 100%; font-size: 16px; }
  .toolbar { padding: 7px; }
  .preview-button { width: 100%; justify-content: center; }
  .contact-directory-wrap, .table-wrap { max-width: 100%; overflow-x: auto; }
  .contact-directory { min-width: 560px; }
  .techca-footer { padding-inline: 14px; }
}