/* ============================================================================
   AutoVault — mobile-first refinements (loads last; mobile is the priority view)
   Research-applied: no horizontal scroll, ≥44px touch targets, 16px+ body,
   thumb-zone sticky CTA, comfortable rhythm. (WCAG / Material / Apple HIG)
   ============================================================================ */

/* CRITICAL — never allow horizontal scroll on any device */
html, body { max-width: 100%; overflow-x: clip; }

@media (max-width: 640px) {

  /* — Nav: brand + burger only. The full-width "WhatsApp" text button used to
       overflow the viewport and clip; the burger menu already holds the CTAs. */
  .nav__cta .btn--primary { display: none; }
  .nav__burger { display: flex; width: 44px; height: 44px; }
  .nav__in { padding-block: 12px; }

  /* — Hero: readable + thumb-reachable CTAs */
  .hero { padding-top: 64px; }
  .hero__kicker { font-size: 11px; letter-spacing: .1em; line-height: 1.5; }
  .hero__copy h1 { font-size: clamp(34px, 11.2vw, 52px); line-height: 1.0; }
  .lede.hero__sub, .hero__sub { font-size: 16px; line-height: 1.6; max-width: 100%; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }
  .hero__actions .btn { width: 100%; justify-content: center; min-height: 52px; }

  /* — Section rhythm + line measure (avoid edge-to-edge cramping) */
  .section { padding-block: 60px; }
  .wrap { padding-inline: 20px; }
  .h2 { font-size: clamp(30px, 9vw, 46px); line-height: 1.05; }
  p, .lede, .hero__sub { max-width: 100%; }

  /* — Touch targets ≥44px everywhere */
  .btn { min-height: 48px; }
  .qbtn { min-width: 44px; min-height: 44px; }

  /* — Imagery sized for small screens (bigger, fewer per row) */
  .ig-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .ig-strip > *:nth-child(n+5) { display: none; }
  .fac__gallery { gap: 10px; }

  /* — Sticky thumb-zone CTA bar (kept in reach during scroll) */
  .m-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: flex; gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: linear-gradient(0deg, rgba(10,10,11,.97), rgba(10,10,11,.82));
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid rgba(204,44,36,.3);
  }
  .m-cta .btn { flex: 1; min-height: 50px; font-size: 13px; letter-spacing: .04em; }
  .wa-float { bottom: 84px !important; }   /* lift above the sticky bar */
  .footer { padding-bottom: 92px; }        /* reserve space so nothing hides behind it */
}

/* Sticky bar is mobile-only */
@media (min-width: 641px) { .m-cta { display: none !important; } }

/* ============================================================================
   Mobile fixes v2 — menu overflow + oversized cards (reported on device)
   ============================================================================ */

/* Mobile menu links were inline <a> (no display set) → flowed horizontally and
   overflowed. Force a clean vertical stack. */
.mobile-menu > div { display: flex; flex-direction: column; width: 100%; }
.mobile-menu a { display: flex; align-items: baseline; width: 100%; }
@media (max-width: 640px) {
  .mobile-menu a { font-size: 26px; padding: 13px 0; }
  .mobile-menu a .mi { margin-right: 12px; }

  /* Service cards: were min-height 280px with icon pushed to top (margin-bottom:auto),
     leaving huge empty boxes when stacked. Make them hug their content. */
  .svc { min-height: auto !important; padding: 24px 20px 26px !important; }
  .svc__ico { margin-bottom: 16px !important; }
  .svc__n { top: 20px; right: 20px; }
  .svc__t { font-size: 20px; margin: 16px 0 10px !important; }
  .svc__d { font-size: 14.5px; }

  /* same content-hug fix for the "why" threat cards + step cards if tall */
  .step { min-height: auto; }
}