/* EaseKrew — responsive.css
   Global breakpoints that adjust the homepage/layout grids for tablet
   and mobile widths. Component-scoped responsive rules that only ever
   affect one widget (e.g. the floating action bar, booking modals) stay
   next to that component's own stylesheet — see the header comment in
   components.css and booking.css for those. */

/* RESPONSIVE */
/* Tablet/narrow-desktop: header stays a single row but tightens up so
   nothing overlaps before there's enough width for the full layout above
   (see .container.nav-inner in layout.css for why this threshold sits
   higher than the 1180px content container). */
@media(max-width:1260px){
  .nav-inner{column-gap:12px}
  .nav-links{gap:18px}
  .nav-cta{gap:8px}
  .nav-cta .btn{padding:9px 12px}
  .nav-wa-btn .nav-btn-text{display:none}
}
@media(max-width:940px){
  .hero-inner,.partner-inner{grid-template-columns:1fr}
  .hero-visual{display:none}
  .steps{grid-template-columns:1fr 1fr;gap:32px}.steps::before{display:none}
  .features-grid{grid-template-columns:1fr 1fr}
  .reviews-grid,.contact-grid{grid-template-columns:1fr}
  .numbers-inner{grid-template-columns:1fr 1fr;gap:32px}
  .number-item{border-right:none;border-bottom:1px solid rgba(255,255,255,0.15);padding-bottom:24px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .nav-links,.nav-cta{display:none}.hamburger{display:flex}
  .sub-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  section{padding:60px 0}h1{font-size:30px}h2{font-size:24px}
  .hero-top{padding:52px 0 44px}.features-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}.numbers-inner{grid-template-columns:1fr 1fr}
  .trust-inner{gap:24px}.contact-form{padding:24px}
}