/* =============================================================================
   APEX SOCIALS — responsive.css
   Mobile-first overrides. Breakpoints: 1024 · 768 · 480 · 375 · 320
   The base styles in style.css assume the full desktop layout; these queries
   collapse grids and swap the nav for a hamburger panel below 980px.
   ============================================================================= */

/* ---- Tablet / small laptop (<= 1024px) ----------------------------------- */
@media (max-width: 1024px) {
  .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---- Nav collapse + stacking (<= 980px) ---------------------------------- */
@media (max-width: 980px) {
  .nav-links,
  .nav-cta .btn { display: none; }
  .nav-toggle { display: inline-flex; }

  .cards--3 { grid-template-columns: repeat(2, 1fr); }
  .quotes { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr; }
}

/* ---- Mobile (<= 768px) --------------------------------------------------- */
@media (max-width: 768px) {
  :root { --header-h: 66px; }

  .cards--2,
  .cards--3,
  .cards--4 { grid-template-columns: 1fr; }

  .case__metrics { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: 1fr; }

  .beforeafter {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .ba-arrow { transform: rotate(90deg); justify-self: center; }

  .timeline::before { left: 22px; }
  .tl-step { grid-template-columns: 46px 1fr; gap: var(--space-2); }
  .tl-step__num { width: 46px; height: 46px; font-size: 1.1rem; }

  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .hero { min-height: auto; padding-block: calc(var(--header-h) + 3rem) var(--space-6); }
  .shape--1, .shape--3 { display: none; }

  .section-head { margin-bottom: var(--space-4); }
}

/* ---- Small phones (<= 480px) --------------------------------------------- */
@media (max-width: 480px) {
  .kpis { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .cta-band .hero__actions { flex-direction: column; }
  .card { padding: var(--space-3); }
  .case { padding: var(--space-4) var(--space-3); }
  .brand .brand-name { font-size: 0.95rem; }
}

/* ---- iPhone SE / 375 ------------------------------------------------------ */
@media (max-width: 375px) {
  :root { --section-y: 3.5rem; }
  .mobile-menu a { font-size: 1.45rem; }
}

/* ---- 320px floor ---------------------------------------------------------- */
@media (max-width: 320px) {
  .brand .brand-name { display: none; }
  .btn { --btn-pad-x: 1.2rem; font-size: 0.92rem; }
}

/* ---- Large screens: a touch more air -------------------------------------- */
@media (min-width: 1440px) {
  :root { --container: 1280px; }
}