/*
 * MVP Mobile Tire Shop — Responsive breakpoints
 * Ported verbatim from the live site. Loaded last so it can safely
 * override base/layout/components at each breakpoint.
 * Verified against: 320px, 375px, 430px, tablet portrait/landscape,
 * laptop, and large desktop during QA (see testing checklist).
 */
@media (max-width:1024px) {
    .steps-row { grid-template-columns:repeat(2,1fr);gap:32px; }
    .steps-row::before { display:none; }
    .footer-grid { grid-template-columns:1fr 1fr; }
    .contact-grid { grid-template-columns:1fr; }
    .content-sidebar { grid-template-columns:1fr; }
    .location-cards { grid-template-columns:1fr; }
    .cta-dual-grid { grid-template-columns:1fr; }
    .office-cards { grid-template-columns:1fr; }
}
@media (max-width:768px) {
    .section { padding:56px 0; }
    #site-navigation { display:none; }
    .hamburger { display:flex; }
    .topbar-left { display:none; }
    .nav-phone { display:none; }
    .sticky-cta { display:block; }
    .sticky-cta-dual { display:block; }
    body { padding-bottom:60px; }
    .steps-row { grid-template-columns:1fr; }
    .footer-grid { grid-template-columns:1fr; }
    .city-hero-inner { grid-template-columns:1fr; }
    .city-cta-box { display:none; }
    .hero { min-height:auto; }
    .hero-inner { padding:180px 20px 48px; }
    .hero-stats { gap:20px 16px; }
    .hero-stat { flex:0 1 calc(50% - 8px); text-align:center; }
    .cta-band-btns { flex-direction:column;align-items:center; }
    .hero h1 { font-size:2.8rem; }
    .lc-btns { flex-direction:column; }
}
@media (max-width:480px) {
    .hero h1 { font-size:2.4rem; }
    .hero-inner { padding:172px 20px 40px; }
    .hero-cta { flex-direction:column; }
    .hero-cta .btn { width:100%;justify-content:center; }
    .hero-stats { gap:16px 12px; }
    .hero-stat { flex:0 1 calc(50% - 6px); }
    .hero-stat .num { font-size:1.9rem; }
    .emergency-strip .container { flex-direction:column; }
    .es-phones { flex-direction:column;gap:8px; }
    .hero-cta-pair { flex-direction:column; }
    .hero-cta-pair .btn { width:100%;justify-content:center; }
}

/* Extra-small phones (320px) — tightened from the live site's 480px
   rules so nothing overflows or overlaps on the smallest supported width */
@media (max-width:340px) {
    .hero-badge { font-size:.7rem;padding:6px 12px; }
    .lc-title { font-size:1.6rem; }
    .section-title { font-size:1.7rem; }
    .btn { padding:12px 18px;font-size:.88rem; }
}