/* ============================================
   TCM — MOBILE FIXES (loaded last, overrides all)
   ============================================ */

/* ── Reset box model for everything ── */
*, *::before, *::after { box-sizing: border-box !important; }
html, body { overflow-x: hidden !important; width: 100% !important; max-width: 100vw !important; }
img, video, iframe, svg { max-width: 100% !important; }

/* ── Menu overlay ── */
.menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(4,10,22,0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.menu-overlay.active {
  display: block;
  opacity: 1;
  pointer-events: all;
}
body.menu-open { overflow: hidden !important; }

/* ================================================
   MOBILE — 768px and below
   ================================================ */
@media (max-width: 768px) {

  /* ── Hide topbar ── */
  .topbar { display: none !important; }

  /* ── Navbar ── */
  .navbar {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #060e1f !important;
    border-bottom: 1px solid rgba(26,111,232,0.25) !important;
    z-index: 1000 !important;
  }
  .navbar-inner {
    height: 64px !important;
    padding: 0 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }
  .logo-img {
    height: 42px !important;
    width: auto !important;
    filter: brightness(0) invert(1) !important;
  }

  /* ── Hamburger button ── */
  .hamburger {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    width: 40px !important;
    height: 40px !important;
    padding: 6px !important;
    background: rgba(26,111,232,0.12) !important;
    border: 1px solid rgba(26,111,232,0.3) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    z-index: 1010 !important;
    position: relative !important;
  }
  .hamburger span {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background: #ffffff !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
    transform-origin: center !important;
  }
  .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
  .hamburger.open span:nth-child(2) { opacity: 0 !important; transform: scaleX(0) !important; }
  .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

  /* ── Fullscreen menu ── */
  .nav-links {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #060e1f !important;
    padding: 80px 32px 40px !important;
    margin: 0 !important;
    list-style: none !important;
    gap: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-16px) !important;
    transition: opacity 0.28s ease, transform 0.28s ease !important;
    z-index: 999 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .nav-links.open {
    opacity: 1 !important;
    pointer-events: all !important;
    transform: translateY(0) !important;
  }

  /* Each list item full width */
  .nav-links li { width: 100% !important; }

  /* Big fullscreen nav links */
  .nav-links .nav-link {
    display: block !important;
    width: 100% !important;
    padding: 18px 0 !important;
    font-family: 'Oswald', sans-serif !important;
    font-size: clamp(1.8rem, 7vw, 2.8rem) !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,0.65) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 0 !important;
    background: transparent !important;
    letter-spacing: -0.5px !important;
    transition: all 0.2s ease !important;
  }
  .nav-links .nav-link:hover {
    color: #00c6ff !important;
    background: transparent !important;
    padding-left: 12px !important;
  }
  .nav-links .nav-link.active {
    color: #ffffff !important;
    background: transparent !important;
    border-left: none !important;
    padding-left: 0 !important;
  }

  /* Quote button at bottom of fullscreen menu */
  .nav-links .btn.btn-primary {
    display: block !important;
    margin: 32px 0 0 !important;
    padding: 16px 24px !important;
    text-align: center !important;
    width: 100% !important;
    font-size: 1rem !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg,#1a6fe8,#1050b8) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 8px 28px rgba(26,111,232,0.35) !important;
  }

  /* ── Section spacing ── */
  .section { padding: 56px 0 !important; }
  .container { padding: 0 18px !important; }

  /* ── Typography ── */
  .section-title { font-size: clamp(1.65rem,7vw,2.2rem) !important; letter-spacing: -0.3px !important; }
  .section-sub { font-size: 0.93rem !important; margin-bottom: 36px !important; }
  .section-label { font-size: 10px !important; }

  /* ── Buttons ── */
  .btn-lg { padding: 14px 24px !important; font-size: 0.92rem !important; }

  /* ── Services grid ── */
  .services-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .service-card { padding: 28px 24px !important; }

  /* ── Solutions ── */
  .solutions-inner { grid-template-columns: 1fr !important; }
  .solution-content { padding: 32px 24px !important; }
  .solution-content h3 { font-size: 1.5rem !important; }

  /* ── About teaser ── */
  .about-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .about-img-wrap img { height: 260px !important; }
  .about-img-wrap::before, .about-img-wrap::after { display: none !important; }
  .about-text p { font-size: 0.92rem !important; }

  /* ── Goals ── */
  .goals-section { padding: 72px 0 !important; }
  .goals-grid { grid-template-columns: 1fr !important; gap: 16px !important; margin-top: 32px !important; }
  .goal-item { padding: 24px 20px !important; }
  .goal-num { font-size: 2rem !important; }

  /* ── Why grid ── */
  .why-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .why-item { padding: 28px 24px !important; }

  /* ── Client logos ── */
  .client-logo { width: 110px !important; height: 60px !important; }
  .clients-track-wrap::before, .clients-track-wrap::after { width: 30px !important; }

  /* ── CTA banner ── */
  .cta-banner { padding: 56px 0 !important; }
  .cta-inner { flex-direction: column !important; text-align: center !important; gap: 28px !important; }
  .cta-text h2 { font-size: 1.7rem !important; }
  .cta-actions { flex-direction: column !important; align-items: center !important; width: 100% !important; gap: 12px !important; }
  .cta-actions .btn { width: 100% !important; max-width: 300px !important; justify-content: center !important; }

  /* ── Contact page ── */
  .contact-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .contact-form-wrap { padding: 24px 18px !important; border-radius: 12px !important; }
  .contact-form-wrap h3 { font-size: 1.4rem !important; }
  .form-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .form-group.full { grid-column: 1 !important; }
  .form-control { padding: 12px 14px !important; font-size: 0.92rem !important; }
  .contact-info-cards { gap: 12px !important; }
  .contact-card { padding: 18px 16px !important; gap: 14px !important; }

  /* ── About page ── */
  .about-full-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .about-full-img img { height: 260px !important; }
  .reliability-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .reliability-img img { height: 240px !important; }

  /* ── Warehousing page ── */
  .warehouse-features { grid-template-columns: 1fr !important; gap: 16px !important; }
  .warehouse-feature { padding: 32px 24px !important; }
  .fulfillment-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  .testimonials-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* ── FAQ page ── */
  .faq-question { font-size: 0.9rem !important; padding: 20px 0 !important; }

  /* ── Footer ── */
  .footer { padding: 56px 0 0 !important; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; padding-bottom: 40px !important; }
  .footer-brand p { max-width: 100% !important; }
  .footer-logo { height: 40px !important; }

  /* ── Page hero (inner pages) ── */
  .page-hero { padding: 80px 0 48px !important; }
  .page-hero h1 { font-size: clamp(1.9rem,8vw,2.8rem) !important; letter-spacing: -0.5px !important; }
  .page-hero p { font-size: 0.93rem !important; }

  /* ── Stats row on about ── */
  div[style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
}

/* ================================================
   SMALL PHONES — 420px and below
   ================================================ */
@media (max-width: 420px) {
  .navbar-inner { padding: 0 14px !important; }
  .logo-img { height: 36px !important; }
  .container { padding: 0 14px !important; }
  .section { padding: 44px 0 !important; }
  .section-title { font-size: clamp(1.5rem,8vw,2rem) !important; }
  .fulfillment-grid { grid-template-columns: 1fr !important; }
  .contact-form-wrap { padding: 20px 14px !important; }
  .cta-text h2 { font-size: 1.5rem !important; }
  .footer-grid { gap: 24px !important; }
  .service-card { padding: 24px 18px !important; }
}