/* ============================================================
   VALENCE PARTNERS — responsive.css
   Breakpoints: 1024 (tablet), 860 (mobile), 540 (small)
   ============================================================ */

/* ── Tablet ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .split { gap: var(--space-md); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; row-gap: 2.5rem; }
}

/* ── Mobile ──────────────────────────────────────────── */
@media (max-width: 860px) {
  :root { --space-xl: 4.5rem; --space-lg: 2.8rem; }

  /* Nav → off-canvas */
  .nav-burger { display: flex; }
  .nav-menu {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    background: var(--navy); flex-direction: column; align-items: stretch;
    gap: 0; padding: 1rem 5% 2rem;
    border-bottom: 1px solid rgba(196,151,58,0.2);
    transform: translateY(-150%); transition: transform 0.35s var(--ease);
    max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
  }
  .nav-menu.open { transform: translateY(0); }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links a { padding: 0.9rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 0.9rem; }
  .nav-links a.active::after { display: none; }
  .nav-right { flex-direction: column; align-items: stretch; gap: 1rem; margin-top: 1rem; }
  .nav-cta { text-align: center; padding: 0.9rem; }

  /* Hero */
  .hero { min-height: auto; padding: calc(var(--nav-h) + 3rem) 5% var(--space-lg); }
  .hero.hero-sm { min-height: auto; }

  /* Stat row → stack */
  .stat-row { flex-direction: column; }
  .stat { padding: 1.1rem 0; min-width: 0; }
  .stat + .stat { border-left: none; border-top: 1px solid rgba(196,151,58,0.2); padding-left: 0; }

  /* Grids → single / double */
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .compare { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .radio-row { flex-direction: column; gap: 0.7rem; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-legal { flex-direction: column; text-align: center; }
  .footer-legal-links { flex-wrap: wrap; justify-content: center; }

  /* Timeline tighten */
  .tl-step { gap: 1.2rem; }
}

/* ── Small mobile ────────────────────────────────────── */
@media (max-width: 540px) {
  .display { font-size: 2.3rem; }
  .h2 { font-size: 1.85rem; }
  .btn { width: 100%; }
  .btn-group { flex-direction: column; }
  .form-card { padding: 1.6rem 1.3rem; }
  .card { padding: 1.7rem 1.4rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .tl-num { width: 44px; height: 44px; font-size: 1rem; }
  .tl-marker { width: 44px; }
  .channels { flex-direction: column; }
  .channel { justify-content: center; }
}