/* Grid design responsive rules. Mobile-first overrides layered on top of
   site.css's desktop-default layout. Verified down to a 375px viewport:
   every grid collapses to 1-2 columns, the hero stacks, and the mega
   dropdowns become an accordion-style mobile drawer driven by
   assets/js/mobile-header-nav.js (adds/removes .is-open on #headerNav and
   toggles aria-expanded on .nav__dropdown > .nav__link--btn). */

@media (max-width: 1200px) {
  .cardGrid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .svcCards { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
  .aboutGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-grid .footer-col:nth-child(4) { grid-column: 1 / -1; }
}

@media (max-width: 991px) {
  .header__menuToggle { display: flex; }
  .nav, .header__nav {
    position: fixed; inset: 0 0 0 auto; width: min(340px, 86vw); height: 100vh; background: #fff;
    flex-direction: column; align-items: stretch; gap: 2px; padding: 84px 18px 24px; overflow-y: auto;
    transform: translateX(100%); transition: transform .24s ease; box-shadow: -18px 0 40px rgba(16, 23, 40, .18);
    z-index: 250;
  }
  .header__nav.is-open { transform: translateX(0); }
  body.nav-drawer-open { overflow: hidden; }
  .nav__link { width: 100%; justify-content: space-between; }
  .nav__dropdown { width: 100%; }
  .nav__menu {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none;
    background: var(--surface-2); margin-top: 4px; display: none; max-width: none; width: 100%; max-height: none;
  }
  .nav__dropdown.is-open .nav__menu { display: block; }
  .nav__dropdown.is-open > .nav__link--btn .chev { transform: rotate(180deg); }
  .header__queries { display: none; }
  .topbar__center { order: 3; flex-basis: 100%; }
  .topbar__inner { flex-wrap: wrap; row-gap: 4px; }

  .hero__layout { grid-template-columns: 1fr; }
  .hero__col--form { order: -1; }
  .metricsStrip__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .aboutGrid { grid-template-columns: 1fr; }
  .aboutValues__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .serviceIntroRich__points { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid .footer-col:nth-child(4) { grid-column: auto; }
}

@media (max-width: 760px) {
  .container { padding: 0 18px; }
  .hero__inner { padding: 40px 18px 44px; }
  .section, .svcSection, .aboutSection, .landmarkHub, .postalCodesSection, .aeoAnswers, .geoSection, .citiesGridSection, .citiesSection { padding: 40px 0; }
  .metricsStrip__inner { grid-template-columns: 1fr; }
  .header__inner { padding: 12px 18px; gap: 12px; }
  .brand__logo { height: 36px; }
  .cardGrid, .svcCards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .postalCodesGrid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .fabCall { right: 14px; bottom: 14px; }
  .scrollNav { left: 14px; bottom: 14px; }
  .legalCard { padding: 26px 22px; }
  .siteBreadcrumbs__wrap { padding: 10px 18px; }
}

@media (max-width: 480px) {
  .aboutValues__list { grid-template-columns: 1fr; }
  .heroTitleMain__primary, .heroTitle2__main { font-size: clamp(26px, 8vw, 34px); }
  .hero__subtitle { font-size: 15.5px; }
  .trustGrid { flex-direction: column; }
  .trustCard { flex-basis: auto; }
  .landmarkHub__zipTabsWrap { padding: 10px; }
  .landmarkHub__zipPanel { padding: 20px 16px; }
  .landmarkHub__zipPanelInner { gap: 12px; }
}