/* =========================================================================
   RESPONSIVE.CSS — breakpoints per spec: 1200+, 992–1199, 768–991, 480–767, <480
   ========================================================================= */

/* ---------- 992–1199px : slightly tighter container ---------- */
@media (max-width: 1199px) {
  :root { --container-padding: 20px; }
  .steps { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 768–991px : tablets, nav collapses to mobile menu ---------- */
@media (max-width: 991px) {
  .utility-bar { display: none; }
  .hero-grid, .split { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }

  .menu-toggle { display: block; }
  .primary-nav {
    position: fixed; inset: 0 0 0 auto; width: min(320px, 85vw); background: #fff;
    flex-direction: column; align-items: flex-start; padding: 5rem 1.5rem 2rem;
    transform: translateX(100%); transition: transform 0.2s ease; box-shadow: -6px 0 20px rgba(0,0,0,0.1);
    height: 100vh; overflow-y: auto; z-index: 200;
  }
  .primary-nav.is-open { transform: translateX(0); }
  .primary-menu { flex-direction: column; align-items: flex-start; width: 100%; gap: 0.25rem; }
  .primary-menu li { width: 100%; }
  .sub-menu { position: static; display: none; box-shadow: none; border: none; padding-left: 1rem; }
  .menu-item-has-children.is-open > .sub-menu { display: block; }
  .primary-nav > .btn-primary { margin-top: 1rem; width: 100%; text-align: center; }
}

/* ---------- 480–767px : phones ---------- */
@media (max-width: 767px) {
  section { padding: var(--space-lg) 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .newsletter-row { flex-direction: column; align-items: flex-start; }
  .newsletter-form { width: 100%; }
  .newsletter-form input { min-width: 0; flex: 1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- below 480px ---------- */
@media (max-width: 479px) {
  :root { --container-padding: 16px; }
  .btn { width: 100%; text-align: center; }
  .btn-row { flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* Prevent horizontal overflow globally. */
html, body { overflow-x: hidden; }