/* ==========================================================================
   IRONCLAD GLOBAL FREIGHT — RESPONSIVE OVERRIDES (v2, flexbox)
   Breakpoints: 1180 / 980 / 760 / 520
   ========================================================================== */

/* ---------------------------------------------------------------------- 
   ≤ 1180px — large tablet / small laptop
   ---------------------------------------------------------------------- */
@media (max-width: 1180px) {
  :root { --sp-9: 4.5rem; --sp-8: 3.4rem; }
  .container { padding-inline: var(--sp-5); }
  .nav-links { gap: var(--sp-4); }
  .nav-cta-text small { display: none; }
  .stat-float { margin-left: var(--sp-3); margin-right: var(--sp-3); }
}

/* ---------------------------------------------------------------------- 
   ≤ 980px — tablet / nav switches to drawer
   ---------------------------------------------------------------------- */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .nav-cta-text { display: none; }
  .nav-cta { padding: 0.5rem; }
  .nav-cta .nav-cta-icon { width: 40px; height: 40px; }

  .hero-video-col { flex: 1 1 100%; max-width: 340px; }
  .hero-content h1 { max-width: 16ch; }
}

/* ---------------------------------------------------------------------- 
   ≤ 760px — mobile
   ---------------------------------------------------------------------- */
@media (max-width: 760px) {
  :root {
    --sp-9: 3.4rem;
    --sp-8: 2.6rem;
    --sp-7: 2.1rem;
    --nav-h: 68px;
  }
  .container { padding-inline: var(--sp-4); }
  h2 { max-width: none !important; }

  .site-header .container { gap: var(--sp-3); }
  .brand-text small { display: none; }

  .hero { min-height: 100svh; }
  .hero-content { padding-block: var(--sp-6) var(--sp-8); }
  .hero-content h1 { max-width: none; font-size: clamp(2rem, 8vw, 2.8rem); }
  .hero-row { gap: var(--sp-6); }
  .hero-video-col { flex: 1 1 100%; max-width: 100%; order: 2; }
  .hero-video-frame { aspect-ratio: 16/10; }
  .hero-ctas { width: 100%; }
  .hero-ctas .btn { flex: 1; }
  .hero-scroll { display: none; }
  .hero-dots { right: var(--sp-4); bottom: var(--sp-4); }

  .about-row { gap: var(--sp-6); }
  .about-visual { order: -1; width: 100%; }
  .about-frame { aspect-ratio: 4/3; }
  .stat-float { margin-top: var(--sp-5); margin-left: 0; margin-right: 0; width: 100%; justify-content: space-around; }

  .services-head-row { flex-direction: column; align-items: flex-start; }
  .service-card { flex: 1 1 100%; }

  .industries-row { gap: var(--sp-4); }
  .industry-card { flex: 1 1 100%; }

  .marquee-item { font-size: 1rem; padding-inline: var(--sp-5); }

  .why-acc-inner { flex-direction: column; padding-left: var(--sp-2); gap: var(--sp-4); }
  .why-acc-inner p {
    flex: 1 1 0px;
  }
  .why-acc-inner .why-adv {
    flex: 1 1 0px;
  .why-acc-trigger .why-label { font-size: 0.95rem; }
  .why-acc-item.is-open .why-acc-panel { max-height: 700px; }

  .network-row { gap: var(--sp-6); }
  .network-list li { flex: 1 1 100%; }

  .gallery-item { flex: 1 1 100%; aspect-ratio: 4/3; }

  .cta-inner h2 { max-width: none; }
  .cta-actions { flex-direction: column; width: 100%; }
  .cta-actions .btn { width: 100%; }
  .cta-contacts { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }

  .footer-row { gap: var(--sp-6); padding-bottom: var(--sp-6); }
  .footer-brand, .footer-col { flex: 1 1 100%; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }

  .to-top { width: 44px; height: 44px; bottom: var(--sp-5); right: var(--sp-5); }
}

/* ---------------------------------------------------------------------- 
   ≤ 520px — small mobile
   ---------------------------------------------------------------------- */
@media (max-width: 520px) {
  .hero-eyebrow { font-size: 0.66rem; }
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; }

  .stat-float { flex-direction: column; gap: var(--sp-3); align-items: flex-start; }

  .industry-card { min-width: 0; }

  .footer-social { flex-wrap: wrap; }

  .lightbox-nav { width: 40px; height: 40px; }
  .lightbox-nav.prev { left: var(--sp-3); }
  .lightbox-nav.next { right: var(--sp-3); }
  .lightbox-close { top: var(--sp-4); right: var(--sp-4); width: 40px; height: 40px; }
}

/* ---------------------------------------------------------------------- 
   Large screens
   ---------------------------------------------------------------------- */
@media (min-width: 1600px) {
  :root { --container: 1360px; }
}

/* ---------------------------------------------------------------------- 
   Safety net — prevent any accidental horizontal overflow
   ---------------------------------------------------------------------- */
html, body { max-width: 100%; overflow-x: hidden; }