/* Mobile viewport stability and horizontal overflow protection */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

body {
  touch-action: pan-y pinch-zoom;
}

body,
header,
main,
footer,
section,
.site-head,
.inner-head,
.command-hero {
  max-width: 100%;
}

.shell,
.nav,
.hero-grid,
.hero-copy,
.hero-action,
.status-grid,
.status-item,
.section-head,
.service-cards,
.service-card,
.process-grid,
.process-grid article,
.problem-grid,
.coverage-board,
.vehicle-grid,
.guide-grid,
.guide-grid a,
.faq-home-grid,
.content-grid,
.prose,
.side,
.index-grid,
.index-card,
.car-grid,
.gallery-inner,
.call-grid,
.foot-row,
.foot-brand,
.final-actions {
  min-width: 0;
}

h1,
h2,
h3,
p,
li,
a,
span,
b,
strong,
summary {
  overflow-wrap: anywhere;
}

svg,
img,
video,
iframe {
  max-width: 100%;
}

@media (max-width: 900px) {
  .site-head {
    width: 100%;
  }

  .nav-links.open {
    width: auto;
    max-width: calc(100% - 28px);
    overflow: hidden;
  }

  .mobile-bar {
    width: 100%;
    max-width: 100%;
    padding-bottom: max(9px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 560px) {
  .shell {
    width: calc(100% - 28px);
    max-width: calc(100% - 28px);
  }

  .hero-copy h1,
  .page-cover h1,
  .section-title,
  .call-grid h2 {
    letter-spacing: 0;
  }

  .hero-action,
  .hero-action > a,
  .main-call,
  .cta-inner,
  .final-actions,
  .final-actions > a {
    max-width: 100%;
  }

  .call-number {
    font-size: clamp(25px, 10vw, 38px);
    direction: ltr;
  }

  .article-meta {
    flex-wrap: wrap;
  }
}

@media (max-width: 360px) {
  .shell {
    width: calc(100% - 22px);
    max-width: calc(100% - 22px);
  }

  .nav {
    gap: 6px;
  }

  .logo-full {
    width: 160px;
  }
}