/* ============================================================
   MyTrafficBuzz — Responsive

   Breakpoint overrides. Loaded last so these always win.

   Part of the split of the former single style.css (20-Aug-2026).
   Load order matters: see the <link> block in any page head, and
   keep this file in that same position when adding rules.
   ============================================================ */

/* ---------- responsive ---------- */
@media(max-width:1420px){
  .primary-nav>a,.primary-nav__dropdown>.primary-nav__trigger{padding:9px 8px;font-size:13.5px}
  .site-header__logo img{height:46px}
  .site-header__logo{margin-right:12px}
  .site-header__search input{width:70px}
  .site-header__search:focus-within input{width:120px}
  .site-header__cta{padding:9px 14px;font-size:13px}
  .site-header__actions{gap:8px;margin-left:8px}
}
@media(max-width:1200px){
  .primary-nav>a,.primary-nav__dropdown>.primary-nav__trigger{padding:10px 10px;font-size:14px}
  .site-header__logo img{height:50px}
  .page-shell__grid{grid-template-columns:1fr 300px;gap:28px}
  .site-header__search input{width:84px}
  .site-header__search:focus-within input{width:130px}
}
@media(max-width:1024px){
  .page-shell__grid{grid-template-columns:1fr}
  .sidebar{position:static}
  .hero{height:520px}
  .contact__grid{grid-template-columns:1fr}
  .primary-nav>a,.primary-nav__dropdown>.primary-nav__trigger{padding:9px 9px;font-size:13px}
  .site-header__logo img{height:46px}
  .site-header__cta{padding:9px 14px;font-size:13px}
  .section{padding:72px 0}
}
@media(max-width:768px){
  .topbar .container{justify-content:center;font-size:12px}
  .site-header__menu-toggle{display:block}
  .site-header__logo img{height:42px}
  .site-header__logo{margin-right:0}
  .site-header__actions{margin-left:auto;margin-right:8px}
  .site-header__cta{display:none}
  .site-header__search input{width:70px}
  .site-header__search:focus-within input{width:110px}
  .primary-nav{position:fixed;top:0;right:-100%;width:300px;height:100vh;background:var(--pri);flex-direction:column;padding:70px 20px 30px;box-shadow:-10px 0 40px rgba(0,0,0,.35);transition:right .3s ease;overflow-y:auto;align-items:stretch;gap:0}
  .primary-nav.open{right:0}
  .primary-nav>a,.primary-nav__dropdown>.primary-nav__trigger{padding:13px 14px;font-size:15px;border-radius:10px}
  .primary-nav>a::after,.primary-nav__dropdown>.primary-nav__trigger::after{content:none}
  .primary-nav>a:hover,.primary-nav__dropdown:hover>.primary-nav__trigger{background:rgba(255,255,255,.06)}
  .primary-nav__menu{position:static;box-shadow:none;opacity:1;visibility:visible;transform:none;display:none;padding-left:14px;background:rgba(255,255,255,.04);border:none;min-width:auto;backdrop-filter:none;-webkit-backdrop-filter:none}
  .primary-nav__menu a{color:rgba(255,255,255,.8);font-size:13.5px}
  .primary-nav__menu a:hover{background:rgba(255,255,255,.06);color:var(--gold)}
  .primary-nav__dropdown.open .primary-nav__menu{display:block}
  .hero{height:480px}
  .hero-content{padding:0 24px}
  .hero-content h1{font-size:31px}
  .hero-content p{font-size:15.5px}
  .service-grid{grid-template-columns:1fr}
  .site-footer__grid{grid-template-columns:1fr}
  .whatsapp-float{bottom:18px;right:18px;width:52px;height:52px}
  
  .mtb-top{bottom:84px;right:18px;width:42px;height:42px}
  .contact__hero{border-radius:12px;padding:44px 0 40px}
  .contact__hero h1{padding:0 22px;font-size:27px}
  .contact__hero p{padding:0 22px;font-size:15px}
  .breadcrumbs{padding:0 22px}
  .page-shell{padding:24px 0 44px}
  .section{padding:58px 0}
  .district-list{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
  .state-list{grid-template-columns:1fr}
  .contact__grid{grid-template-columns:1fr}
}