/* ============================================================================
   RESPONSIVE OVERRIDES
   Mobile-first adjustments layered on top of css/style.css.
   ============================================================================ */

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-visual { order: -1; }
  .services-grid, .fleet-grid, .why-grid { grid-template-columns: repeat(2, 1fr); }
  .purpose-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(2, 1fr); row-gap: 2.4rem; }
  .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .about-figure { order: -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 2.2rem; }
  .gallery-grid { columns: 2 220px; }
}

/* ---------- Mobile nav swap ---------- */
@media (max-width: 900px) {
  .main-nav { display: none; }
  .header-actions .btn-outline.header-call { display: none; }
  .menu-toggle { display: inline-flex; }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .section { padding: 3.6rem 0; }
  .section-tight { padding: 2.4rem 0; }
  h1 { font-size: clamp(2rem, 9vw, 2.7rem); }

  .services-grid, .fleet-grid, .why-grid, .testimonial-grid, .steps-grid, .values-grid { grid-template-columns: 1fr; }
  .purpose-grid { grid-template-columns: 1fr; }
  .gallery-grid { columns: 1 100%; }
  .why-list { grid-template-columns: 1fr; }

  .booking-form { grid-template-columns: 1fr 1fr; }
  .field.span-2 { grid-column: span 2; }
  .field.span-4 { grid-column: span 2; }
  .booking-submit-row { grid-column: span 2; flex-direction: column; align-items: stretch; }
  .booking-card { padding: 1.5rem; }
  .booking-wrap { margin-top: -2.2rem; }

  .trust-row { gap: 1rem 1.4rem; }
  .hero-ctas .btn { flex: 1 1 auto; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .contact-card, .contact-form-card { padding: 1.6rem; }

  /* room for the fixed bottom action bar */
  body { padding-bottom: 78px; }
  .mobile-bar { display: block; }
  .float-whatsapp { display: none; }

  .lightbox-prev, .lightbox-next { width: 40px; height: 40px; }
  .lightbox-close { top: 14px; right: 14px; }
}

@media (max-width: 480px) {
  .booking-form { grid-template-columns: 1fr; }
  .field.span-2, .field.span-4 { grid-column: span 1; }
  .booking-submit-row { grid-column: span 1; }
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; }
}