/* ==========================================================================
   responsive.css — breakpoints. Mobile stays fully usable at 320px.
   ========================================================================== */

@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
  .cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  :root { --s-7: 5rem; --s-8: 6.5rem; }

  .nav__list, .header__actions .btn { display: none; }
  .burger { display: inline-flex; }

  .split { grid-template-columns: 1fr; gap: var(--s-5); }
  .cols--2, .cols--3 { grid-template-columns: 1fr; }
  .process__steps { grid-template-columns: 1fr; gap: var(--s-5); }
  .process__track, .process__fill { display: none; }
  .process__step { padding-top: 0; padding-left: var(--s-4); }
  .process__dot { top: 0.5rem; left: 0; }
  .process__step::before {
    content: '';
    position: absolute;
    left: 4px; top: 0.5rem;
    width: 1px; height: 100%;
    background: var(--border);
  }
  .process__step:last-child::before { display: none; }
}

@media (max-width: 680px) {
  .form__row { grid-template-columns: 1fr; }
  .statement { grid-template-columns: 2.75rem 1fr; gap: var(--s-2); }
  .footer__grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .hero__scroll { display: none; }
  .hero__actions .btn { width: 100%; }
}

@media (max-width: 380px) {
  :root { --gutter: 1.1rem; }
  .brand__name span { display: none; }
  .assess { padding: 1.15rem; }
  .assess__options { grid-template-columns: 1fr; }
}

/* Touch devices: hover-only affordances shouldn't linger */
@media (hover: none) {
  .service:hover { transform: none; }
  .service::after { display: none; }
  .magnetic { transform: none !important; }
}