/* Mobile responsive overrides — !important needed to beat inline styles */
html, body { max-width: 100% !important; overflow-x: hidden !important; }
@media (max-width: 768px) {
  /* Header: hide secondary nav + phone text, keep logo + CTA */
  header nav { display: none !important; }
  header > div {
    padding: 0 12px !important;
    height: 60px !important;
    gap: 8px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  header a[href="/"] { flex-shrink: 1 !important; min-width: 0 !important; }
  header a[href="/"] span { font-size: 15px !important; white-space: nowrap !important; }
  /* Hide phone text on mobile — CTA button is enough; user can tap tel: via footer */
  header a[href^="tel:"] { display: none !important; }
  header div[style*="gap:16px"],
  header div[style*="gap: 16px"] {
    gap: 8px !important;
    flex-shrink: 0 !important;
  }
  header a[href*="bod-form"], header a[href*="#bod"] {
    padding: 10px 14px !important;
    font-size: 13px !important;
    min-height: 40px !important;
    white-space: nowrap !important;
  }

  /* Sections: kill horizontal overflow, stack grids */
  section { padding: 32px 16px !important; overflow-x: hidden !important; }
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  section div { max-width: 100% !important; box-sizing: border-box !important; }
  /* Generic 2/3/4-column inline grids */
  [style*="grid-template-columns: repeat"],
  [style*="grid-template-columns:repeat"] {
    grid-template-columns: 1fr !important;
  }

  /* Hero text */
  h1 { font-size: 28px !important; line-height: 1.2 !important; }
  h2 { font-size: 22px !important; }
  h3 { font-size: 18px !important; }

  /* Tap targets */
  a, button { min-height: 44px; }
  a[role="button"], button { padding: 12px 16px !important; }

  /* Tables: wrap in scroll container */
  table {
    display: block !important;
    overflow-x: auto !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Footer/cookie banner */
  #cookie-banner > div {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
    max-width: 100% !important;
  }
  #cookie-banner > div > div { min-width: 0 !important; max-width: 100% !important; }
  #cookie-banner { padding: 16px !important; box-sizing: border-box !important; }

  /* Forms */
  input, textarea, select {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important; /* prevents iOS zoom */
  }

  /* Generic flex rows → wrap */
  div[style*="display:flex"], div[style*="display: flex"] {
    flex-wrap: wrap !important;
  }

  /* Images max-width */
  img { max-width: 100% !important; height: auto !important; }
}