/* Jack Cleaning Service — responsive.css
   Mobile first in behaviour, breakpoints: 1180 / 1024 / 860 / 640 / 560 / 420
   Hard rule: nothing may exceed the viewport width. */

@media (max-width:1180px){
  :root{--s9:80px;--s10:96px}
  .fc-1{left:-16px}
  .fc-2{right:-12px}
  .fc-3{left:-8px}
  .areas-grid{grid-template-columns:repeat(4,1fr)}
}

@media (max-width:1024px){
  body{font-size:16.5px}
  .hero{padding-block:var(--s7) var(--s8)}
  .hero-grid{grid-template-columns:1fr;gap:var(--s7)}
  .hero-media{max-width:480px;margin-inline:auto;width:100%}
  .hero-lead{max-width:none}
  .pagehero-grid{grid-template-columns:1fr;gap:var(--s5)}
  .pagehero-figure{max-width:560px}
  .trust-grid{grid-template-columns:repeat(3,1fr);gap:var(--s3) var(--s4)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .svc-mosaic{grid-template-columns:repeat(2,1fr)}
  .svc-card--feature{grid-column:span 2}
  .svc-card--wide{grid-column:span 2}
  .steps{grid-template-columns:repeat(2,1fr);gap:var(--s5)}
  .step::after{display:none}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat{border-right:0}
  .stat:nth-child(odd){border-right:1px solid rgba(255,255,255,.14)}
  .masonry{columns:2}
  .contact-grid{grid-template-columns:1fr;gap:var(--s6)}
  .intro-grid{grid-template-columns:1fr;gap:var(--s5)}
  .portrait{max-width:380px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--s5)}
  .post-feature{grid-template-columns:1fr}
  .post-feature .thumb{min-height:0;aspect-ratio:16/9}
  .post-feature .post-body{padding:var(--s4)}
  .split{grid-template-columns:1fr;gap:var(--s5)}
  .nf-cards{grid-template-columns:1fr}
  .related-grid{grid-template-columns:repeat(2,1fr)}
}

/* --- Nav collapses into an off-canvas panel --------------------------- */
@media (max-width:860px){
  .section{padding-block:var(--s7)}
  .header-inner{min-height:84px;gap:var(--s2)}
  .brand img{height:58px}
  .burger{display:flex}
  .nav{
    position:fixed;top:0;right:0;bottom:0;width:min(340px,86vw);z-index:890;
    background:var(--surface);border-left:1px solid var(--border);
    padding:var(--s8) var(--s3) var(--s4);overflow-y:auto;margin-left:0;
    transform:translateX(100%);transition:transform .34s var(--ease);
    box-shadow:var(--sh-xl);
  }
  .nav.is-open{transform:translateX(0)}
  .nav > ul{flex-direction:column;align-items:stretch;gap:2px}
  .nav > ul > li{width:100%}
  .nav a,.nav .subtoggle{
    width:100%;justify-content:space-between;padding:14px 16px;
    border-radius:var(--r-sm);font-size:1.02rem;
  }
  .subnav{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;border-left:2px solid var(--border);border-radius:0;margin:4px 0 4px 16px;
    padding:0 0 0 8px;display:none;min-width:0;
  }
  .subnav.is-open{display:block}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .areas-grid{grid-template-columns:repeat(3,1fr)}
  .strip{grid-template-columns:repeat(2,1fr)}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .map-frame iframe{height:340px}
  .prose{font-size:1rem}
  .form-card{padding:var(--s4)}
}

@media (max-width:640px){
  body{font-size:16px}
  :root{--s9:64px}
  .section{padding-block:var(--s7)}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .svc-mosaic{grid-template-columns:1fr}
  .svc-card--feature,.svc-card--wide{grid-column:span 1;flex-direction:column}
  .svc-card--feature .svc-thumb,.svc-card--wide .svc-thumb{width:100%;aspect-ratio:16/10}
  .svc-card--feature .svc-body,.svc-card--wide .svc-body{padding:var(--s3)}
  .svc-card--feature h3{font-size:1.35rem}
  .steps{grid-template-columns:1fr;gap:var(--s4)}
  .masonry{columns:1}
  .areas-grid{grid-template-columns:repeat(2,1fr)}
  .field-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:var(--s5)}
  .footer-bottom{flex-direction:column;align-items:flex-start;text-align:left}
  .related-grid{grid-template-columns:1fr}
  .slide{flex:0 0 84%}
  .carousel-nav{justify-content:center}
  .stat{padding:var(--s3) var(--s1)}
  .float-card{max-width:200px;padding:12px 14px}
  .float-card strong{font-size:.94rem}
  .float-card span{font-size:.74rem}
  .fc-2{right:-6px}
  .btn{width:100%}
  .btn-row{flex-direction:column;align-items:stretch}
  .header-actions .btn{width:auto}
  .prose h2{margin-top:var(--s6)}
}

/* --- Below 560px the text phone button becomes a circular icon -------- */
@media (max-width:560px){
  .header-inner{gap:10px;min-height:76px}
  .brand img{height:52px}
  .header-actions .btn{display:none}
  .btn-phone{display:grid}
  .burger{width:44px;height:44px}
  .btn-phone{width:44px;height:44px}
  .nav{padding-top:var(--s7)}
  .totop{right:16px;bottom:96px;width:44px;height:44px}
  .stats-grid{grid-template-columns:1fr 1fr}
  .hero{padding-block:var(--s6) var(--s7)}
  .float-card{position:static;margin-top:12px;max-width:none;box-shadow:var(--sh-sm)}
  .hero-media{display:flex;flex-direction:column}
  .hero-figure{order:-1}
}

@media (max-width:420px){
  .header-inner{gap:8px}
  .brand img{height:46px}
  .wrap{padding-inline:var(--s2)}
  .card,.quote-card,.form-card{padding:var(--s3)}
  .acc-q{padding:18px var(--s2);font-size:.98rem}
  .acc-a p{padding-inline:var(--s2)}
  .areas-grid{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr}
  .nf .code{font-size:5.4rem}
  .badge{font-size:.78rem;padding:8px 13px}
}

@media print{
  .site-header,.site-footer,.totop,.ctaband,.carousel-nav,.nav-backdrop{display:none!important}
  body{background:#fff;color:#000}
  .section{padding-block:16px}
}