/* =============================================================
   responsive.css — Breakpoints (mobile-first overrides)
   ============================================================= */

/* <= 1200 */
@media (max-width:1200px){
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1 / -1;margin-bottom:var(--space-24)}
}

/* <= 992 : tablet */
@media (max-width:991px){
  .hero__grid{grid-template-columns:1fr;gap:var(--space-48)}
  .hero__visual{display:none}
  .tf-grid{grid-template-columns:1fr;gap:var(--space-64)}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .rrr{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:var(--space-32)}
  .split--reverse .split__media{order:0}
  .contact-grid{grid-template-columns:1fr;gap:var(--space-48)}
  .flow{grid-template-columns:1fr;gap:var(--space-32);margin-top:var(--space-32)}
  .flow__line{display:none}
  .flow__step{flex-direction:row;text-align:left;gap:var(--space-16)}
  .flow__node{flex:0 0 auto}
  .footer__grid{grid-template-columns:1fr 1fr;gap:var(--space-32)}
}

/* <= 768 : large phone */
@media (max-width:768px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .trust__row{gap:var(--space-16);flex-direction:column}
  .actions .btn{width:100%}
  .cta-band .actions .btn{width:auto}
  .mvcard{padding:var(--space-32)}
}

/* <= 480 : small phone */
@media (max-width:480px){
  .footer__grid{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:var(--space-12)}
  .contact-card{padding:var(--space-24)}
  .tst__card{padding:var(--space-24)}
  .cta-band .actions{flex-direction:column}
  .cta-band .actions .btn{width:100%}
}

/* Large screens */
@media (min-width:1440px){
  .hero__inner{max-width:68ch}
}