/* =========================================================
   Bright Valley James — responsive layer
   Mobile-first refinements & breakpoints
   ========================================================= */

/* ---- large tablet ---- */
@media (max-width: 1024px) {
  :root { --s-7: 4rem; --s-8: 5.5rem; }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .hero-visual { max-width: 440px; }
  .split { grid-template-columns: 1fr; gap: var(--s-5); }
  .content-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; grid-template-columns: 1fr 1fr; }
  .blog-feature { grid-template-columns: 1fr; }
  .blog-feature .thumb { min-height: 220px; }
  .contact-grid { grid-template-columns: 1fr; }
  .related { grid-template-columns: repeat(2,1fr); }
}

/* ---- tablet ---- */
@media (max-width: 860px) {
  .nav-links, .nav-actions .btn { display: none; }
  .nav-toggle { display: flex; }

  .mobile-menu {
    display: flex;
    position: fixed; inset: 76px 0 0; z-index: 48;
    background: var(--canvas);
    transform: translateX(100%); transition: transform .4s var(--ease);
    padding: 1.5rem; display: flex; flex-direction: column; gap: .4rem;
    overflow-y: auto;
  }
  .mobile-menu.open { transform: translateX(0); }
  .mobile-menu a {
    padding: 1rem 1.1rem; border-radius: 12px; font-family: var(--display);
    font-weight: 600; font-size: 1.3rem; color: var(--ink);
    border-bottom: 1px solid var(--line-soft);
  }
  .mobile-menu a:hover, .mobile-menu a[aria-current="page"] { color: var(--brand-deep); }
  .mobile-menu .btn { margin-top: 1.2rem; font-size: 1.05rem; }

  .svc-grid, .steps, .tips-grid, .articles, .tmls { grid-template-columns: 1fr 1fr; }
  .stat-strip .shell { grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-3); }
  .cities { grid-template-columns: 1fr 1fr; }
  .why-metrics { grid-template-columns: 1fr 1fr; }
  .info-cards { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-4); }
  .footer-brand { grid-column: 1 / -1; }
}

body.menu-open { overflow: hidden; }

/* ---- mobile ---- */
@media (max-width: 560px) {
  body { font-size: 1rem; }
  .shell { padding-inline: 1.15rem; }
  :root { --s-7: 3.25rem; --s-8: 4.25rem; }

  .hero { padding-top: var(--s-6); }
  .hero h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); }
  .hero h1 .hl { white-space: normal; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; }
  .searchbar { grid-template-columns: 1fr; }
  .searchbar .btn { width: 100%; }

  .svc-grid, .steps, .tips-grid, .articles, .tmls, .related,
  .cities, .why-metrics, .sidebar { grid-template-columns: 1fr; }

  .stat-strip .shell { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .float-chip { display: none; }
  .page-hero h1 { font-size: clamp(2rem, 8.5vw, 2.6rem); }
  .cta-banner .btn-row .btn { width: 100%; }
}

@media (max-width: 380px) {
  .stat-strip .shell { grid-template-columns: 1fr; }
}