/* ============================================================
   BYBL SUPPORT — responsive.css
   Mirrors beyourbestlawyer.com breakpoint system exactly.
   Breakpoints: 1280 / 1100 / 1024 / 900 / 768 / 640 / 600 / 480
   All responsive rules live here. Never inline.
   ============================================================ */

/* ── CREDENTIALS BAND ── */
@media (max-width: 1024px) {
  .creds-band-inner { grid-template-columns: 1fr; gap: 44px; }
  .creds-band-title { font-size: 28px; }
}
@media (max-width: 640px) {
  .creds-band-title { font-size: 24px; }
}

/* ── 1280px ── */
@media (max-width: 1280px) {
  .hero h1 { font-size: 50px; }
  .section-title { font-size: 36px; }
  .cta-section h2 { font-size: 40px; }
}

/* ── 1100px ── */
@media (max-width: 1100px) {
  .hero-inner { grid-template-columns: 1fr 340px; gap: 48px; }
  .areas-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 32px; }
  .step-path-title { font-size: 26px; }
}

/* ── 1024px ── */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; max-width: 680px; }
  .path-card { max-width: 520px; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .bundles-grid { grid-template-columns: repeat(2, 1fr); }
  .testi-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; gap: 44px; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 36px; }
  .steps::before { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .section-title { font-size: 32px; }
}

/* ── 1024px tablet landscape ── */
@media (max-width: 1024px) and (min-width: 769px) {
  .nav-links { display: none; }
  .nav-actions .btn-nav-outline { display: none; }
  .nav-hamburger { display: flex; }
}

/* ── 900px ── */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-actions .btn-nav-outline { display: none; }
  .nav-hamburger { display: flex; }

  .hero { padding: 72px 20px 64px; }
  .hero h1 { font-size: 40px; }
  .hero-sub { font-size: 16px; }

  .step-path,
  .services-section,
  .bundles-section,
  .about-section,
  .testi-section,
  .areas-section,
  .cta-section { padding: 68px 20px; }

  .section-title { font-size: 30px; }
  .cta-section h2 { font-size: 34px; }
}

/* ── 900px mobile menu restore ── */
@media (max-width: 900px) {
  .mob-open[style*="flex"] { display: flex !important; }
}

/* ── 768px ── */
@media (max-width: 768px) {
  .hero h1 { font-size: 34px; }
  .hero-inner { grid-template-columns: 1fr; }

  .svc-grid { grid-template-columns: 1fr; }
  .bundles-grid { grid-template-columns: 1fr; }
  .testi-grid { grid-template-columns: 1fr; }
  .areas-grid { grid-template-columns: repeat(2, 1fr); }

  .arrival-inner { flex-direction: column; align-items: flex-start; }
  .arrival-cta { width: 100%; justify-content: center; }

  .about-grid { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; }

  .cta-section h2 { font-size: 30px; }
  .cta-section > .section-wrap > p { font-size: 16px; }
}

/* ── 640px ── */
@media (max-width: 640px) {
  .nav-inner { padding: 0 16px; }

  .hero { padding: 52px 16px 44px; }
  .hero h1 { font-size: 30px; }
  .hero-sub { font-size: 15px; }
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn-gold,
  .hero-ctas .btn-ghost { width: 100%; justify-content: center; }
  .hero-trust { flex-direction: column; gap: 10px; }

  .step-path,
  .services-section,
  .bundles-section,
  .about-section,
  .testi-section,
  .areas-section,
  .cta-section { padding: 52px 16px; }

  .section-title { font-size: 26px; }
  .section-intro { font-size: 15px; margin-bottom: 36px; }
  .step-path-title { font-size: 22px; }

  .steps { grid-template-columns: 1fr; gap: 28px; }
  .areas-grid { grid-template-columns: 1fr; }

  .cta-btns { flex-direction: column; align-items: stretch; }
  .cta-btns .btn-navy,
  .cta-btns .btn-navy-ghost { justify-content: center; width: 100%; }
  .cta-section h2 { font-size: 26px; }
  .cta-section > .section-wrap > p { font-size: 15px; }

  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ── 600px ── */
@media (max-width: 600px) {
  .nav-logo-main { font-size: 13.5px; }
  .nav-logo-tag { display: none; }
  .nav-actions .btn-nav-gold { font-size: 12px; padding: 8px 14px; }
}

/* ── 480px ── */
@media (max-width: 480px) {
  body { padding-top: 56px; }
  .nav { height: 56px; }
  .nav-logo-main { font-size: 13px; }
  .mob-open { top: 56px; }

  .hero h1 { font-size: 26px; }
  .hero-sub { font-size: 14px; }

  .section-title { font-size: 23px; }
  .section-intro { font-size: 14px; }
  .step-path-title { font-size: 20px; }

  .svc-card,
  .bundle,
  .testi { padding: 20px 18px; }

  .quote-card { padding: 24px 20px; }
  .quote-card blockquote { font-size: 18px; }

  .bundle-price { font-size: 26px; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-logo { font-size: 15px; }

  .cta-section h2 { font-size: 22px; }
  .cta-section > .section-wrap > p { font-size: 14px; }
}