/* ==========================================================================
   BR Services LLC — responsive.css
   Mobile first in behaviour; breakpoints 1180 / 1024 / 860 / 640 / 560 / 420.
   HARD RULE: nothing may be wider than the viewport.
   ========================================================================== */

/* global width locks (repeated here on purpose — this file is the safety net) */
html{overflow-x:clip}
body{overflow-x:hidden}
img,svg,iframe,video,table{max-width:100%}
.hdr__in,.brand,.brand__txt,.nav,.hdr__cta,.hero__in,.ihero__in,.card,.svc,.svc__body,
.benefit,.cinfo li,.ft__contact li,.trustbar li{min-width:0}
pre,code{overflow-x:auto;max-width:100%}
.hero,.ihero,.cta,.section,.nf,.owner{overflow:hidden} /* decoration containment */

@media (max-width:1180px){
  :root{--wrap:1080px}
  .nav__list{gap:0}
  .nav__list a{padding:10px 10px;font-size:.9063rem}
  .hdr__phone{padding:12px 16px;font-size:.875rem}
  .hero__in{gap:40px}
  .hero__float{max-width:200px;padding:12px 14px}
  .hero__float--a{left:-12px}
  .hero__float--b{right:-10px}
  .trustbar ul{grid-template-columns:repeat(3,1fr);gap:20px}
  .steps--5{grid-template-columns:repeat(3,1fr)}
  .stats{grid-template-columns:repeat(4,1fr);gap:16px}
  .stat{padding:24px}
}

@media (max-width:1024px){
  .section{padding:80px 0}
  .section--tight{padding:56px 0}
  /* nav collapses to panel */
  .nav{
    position:absolute;left:0;right:0;top:100%;background:var(--card);
    border-bottom:1px solid var(--border);box-shadow:var(--sh-2);padding:16px 24px 24px;display:none;margin-left:0
  }
  .nav.is-open{display:block}
  .nav__list{flex-direction:column;align-items:stretch;gap:2px}
  .nav__list a{padding:14px 12px;font-size:1rem;border-radius:var(--r-sm)}
  .nav__list a::after{display:none}
  .burger{display:flex}
  .hdr__cta{margin-left:auto}
  .hero__in,.ihero__in,.owner__in,.areas__in,.contact__in,.cta__in{grid-template-columns:1fr}
  .hero{padding:72px 0 96px}
  .hero__media{max-width:520px;margin:0 auto}
  .hero__float--a{left:0}
  .hero__float--b{right:0}
  .hero__float--c{left:0}
  .owner__media{max-width:420px}
  .cta .btn-row{justify-content:flex-start}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .svc--feature{grid-column:span 2}
  .svc--wide{grid-column:span 2;flex-direction:column}
  .svc--wide .svc__img{width:100%;aspect-ratio:16/10}
  .svc--wide .svc__body{padding:28px}
  .svc--feature .svc__body{padding:32px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .feature-post{grid-template-columns:1fr}
  .feature-post__img{min-height:0;aspect-ratio:16/9;width:100%}
  .feature-post__body{padding:32px}
  .masonry{columns:2}
  .band-photos{grid-template-columns:repeat(2,1fr)}
  .rel,.nf__cards{grid-template-columns:1fr}
  .prose-cols{columns:1}
  .map iframe,.map__ph{height:340px}
}

@media (max-width:860px){
  :root{--hdr-h:76px}
  body{font-size:16px}
  .section{padding:64px 0}
  .head{margin-bottom:32px}
  .grid-3,.grid-2,.grid-4,.stats,.steps--5,.mv{grid-template-columns:1fr}
  .trustbar ul{grid-template-columns:repeat(2,1fr)}
  .city-grid{grid-template-columns:1fr}
  .brand img{height:44px}
  .hdr__phone{padding:10px 14px}
  .slide{flex:0 0 78%}
  .form{padding:28px}
  .article h2{margin-top:40px}
  .toc{padding:24px}
  .ft__grid{grid-template-columns:repeat(2,1fr);gap:40px}
}

@media (max-width:640px){
  .wrap{padding:0 20px}
  .hdr__in{padding:0 20px;gap:12px}
  .section{padding:56px 0}
  .hero{padding:56px 0 72px}
  .hero__float{position:static;max-width:none;margin-top:12px;box-shadow:var(--sh-1)}
  .hero__media{margin-bottom:8px}
  .hero__frame{aspect-ratio:4/5}
  .seals{gap:8px}
  .seals li{font-size:.75rem;padding:7px 12px}
  .btn{width:100%;padding:16px 20px}
  .btn-row{gap:12px}
  .cta .btn-row{width:100%}
  .trustbar ul{grid-template-columns:1fr;gap:16px}
  .masonry{columns:1}
  .band-photos{grid-template-columns:1fr}
  .step{padding:24px 20px}
  .card,.incl,.benefit,.quote{padding:24px}
  .benefit{flex-direction:column;gap:12px}
  .acc__btn{padding:20px 40px 20px 0;font-size:1rem}
  .acc__panel{padding-right:0}
  .ft__grid{grid-template-columns:1fr;gap:32px;padding-bottom:40px}
  .ft__bar{justify-content:flex-start}
  .totop{right:16px;bottom:96px;width:44px;height:44px}
  .lightbox{padding:20px}
  .hours th,.hours td{padding:12px 14px;font-size:.875rem}
  .feature-post__body{padding:24px}
}

/* ---- below 560px: header must fit 300px. Text CTA becomes a round phone button ---- */
@media (max-width:560px){
  :root{--hdr-h:68px}
  .hdr__in{gap:8px;padding:0 16px}
  .brand{gap:10px}
  .brand img{height:36px}
  .brand__name{font-size:.9375rem}
  .brand__sub{font-size:.5625rem;letter-spacing:.08em}
  .hdr__phone{display:none}
  .phone-round{display:grid}
  .nav{padding:12px 16px 20px}
  .wrap{padding:0 16px}
  h1{font-size:clamp(1.75rem,7.5vw,2.25rem)}
  h2{font-size:clamp(1.4rem,6vw,1.8rem)}
  .nf__code{font-size:clamp(4rem,26vw,7rem)}
  .slide{flex:0 0 88%}
  .cbtn{width:46px;height:46px}
  .form{padding:20px}
  .section{padding:48px 0}
}

@media (max-width:420px){
  .brand__txt{display:none} /* logo mark + round phone only: header floor ~300px */
  .brand img{height:34px}
  .hdr__in{gap:6px;padding:0 14px}
  .wrap{padding:0 14px}
  .seals li{font-size:.6875rem;padding:6px 10px}
  .eyebrow{font-size:.6875rem;letter-spacing:.12em}
  .eyebrow::before{width:20px}
  .card,.incl,.quote,.step{padding:20px}
  .slide{flex:0 0 92%}
  .article figcaption{padding-left:12px}
}

@media print{
  .hdr,.nav,.totop,.cta,.carousel__nav,.lightbox{display:none !important}
  body{background:#fff;color:#000;font-size:12pt}
  .section{padding:16px 0}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
}