/*
 * Compact — citywide-compact-usa — responsive.css
 * Mobile is the base design (site.css / style.css are written mobile-first).
 * This file only ADDS breakpoint enhancements — desktop still renders the
 * same single, centered, narrow column; only grids gain columns and the nav
 * switches from a hamburger to inline links. No wide hero split is ever
 * introduced, per the design brief.
 */

/* ---------- Small phones: guard against overflow ---------- */
@media (max-width: 374px) {
  .container { padding: 0 14px; }
  .svc-grid { grid-template-columns: 1fr; }
  .expect-grid { grid-template-columns: 1fr; }
}

/* ---------- Tablet and up ---------- */
@media (min-width: 640px) {
  .svc-grid { grid-template-columns: repeat(3, 1fr); }
  .expect-grid { grid-template-columns: repeat(4, 1fr); }
  .about-grid { grid-template-columns: repeat(3, 1fr); }
  .decision-grid, .list-pair { grid-template-columns: 1fr 1fr; }
  .hero__actions { flex-wrap: nowrap; }
}

/* ---------- Desktop: header becomes inline, container widens slightly ---------- */
@media (min-width: 900px) {
  :root { --container: 760px; --callbar-h: 44px; }

  .nav__list {
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .nav__cta { display: inline-flex; }
  .navToggle { display: none; }
  .mnav { display: none; }

  .site-header__inner { padding: 12px 0; }

  .hero { padding: 34px 0 30px; }
  .hero__title { font-size: clamp(28px, 3.4vw, 38px); }
  .hero__subtitle { font-size: 15.5px; }
  .hero__image { max-height: 280px; }
  .hero__image img { height: 280px; }

  .section { padding: 46px 0; }
  .section__title { font-size: clamp(24px, 2.6vw, 30px); }

  .svc-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .svc-card { padding: 18px 16px; }
  .svc-card__title { font-size: 14.5px; }

  .process-grid { grid-template-columns: repeat(3, 1fr); }

  .callbar__main { font-size: 15px; }

  .site-footer__grid { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; }

  .stats { justify-content: flex-start; }
  .stat { flex: 0 1 140px; }
}

/* ---------- Wide desktop: container-wide grids get a touch more room ---------- */
@media (min-width: 1200px) {
  .svc-grid { max-width: var(--container-wide); margin: 0 auto; }
}