/* ═══════════════════════════════════════
   responsive.css — Media queries
═══════════════════════════════════════ */

/* ── Tablet ── */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
}

/* ── Small tablet / large phone ── */
@media (max-width: 900px) {
  .choose-grid {
    grid-template-columns: 1fr;
  }
  .choose-visual {
    display: none;
  }
  .services-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Mobile ── */
@media (max-width: 640px) {
  :root { --section-pad: 70px; }

  .nav-links,
  .nav-cta        { display: none; }
  .hamburger      { display: flex; }

  .hero-title     { font-size: clamp(2.2rem, 10vw, 3.5rem); }
  .hero-stats     { gap: 2rem; }

  .features-grid  { grid-template-columns: 1fr; }
  .quotes-grid    { grid-template-columns: 1fr; }

  .form-row       { grid-template-columns: 1fr; }

  .footer-grid    { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom  { flex-direction: column; text-align: center; }

  .cta-box h2     { font-size: 1.8rem; }
}

/* ── Very small ── */
@media (max-width: 380px) {
  .hero-btns { flex-direction: column; align-items: center; }
  .stat-num  { font-size: 1.8rem; }
}