/* =========================================================
   Klean It — Mobile Responsive Fixes v1.1
   Fixes: topbar, centered hero, CTA side-by-side, lists grid,
   gallery slider, footer NAP, stats 2x2, scroll indicators,
   service card images, hover effects
   ========================================================= */

/* ===== 1. REMOVE TOPBAR ON MOBILE ===== */
@media (max-width:768px){
  .topbar{display:none !important}
}

/* ===== 2. CENTER HERO CONTENT ON MOBILE ===== */
@media (max-width:1100px){
  .hero-copy{text-align:center;align-items:center}
  .hero-meta{justify-content:center}
  .hero-banner{margin-right:0;text-align:center}
  .hero-ctas{justify-content:center}
  .hero .socials{justify-content:center}
}

/* ===== 3. CTA BUTTONS ALWAYS SIDE-BY-SIDE ===== */
@media (max-width:600px){
  .cta-banner-inner{
    flex-direction:column !important;
    align-items:center !important;
    text-align:center;
  }
  .cta-banner-inner > div:last-child{
    display:flex !important;
    flex-direction:row !important;
    gap:10px !important;
    flex-wrap:nowrap !important;
    justify-content:center;
    width:100%;
  }
  .cta-banner-inner .btn{
    padding:13px 16px !important;
    font-size:11px !important;
    flex:1;
    text-align:center;
    justify-content:center;
    white-space:nowrap;
  }
  .hero-ctas{
    flex-wrap:nowrap !important;
    gap:8px !important;
    width:100%;
  }
  .hero-ctas .btn{
    padding:13px 18px !important;
    font-size:12px !important;
    flex:1;
    text-align:center;
    justify-content:center;
  }
  /* About page CTA buttons */
  .about-hero-copy > div[style],
  .mission > div[style]{
    flex-wrap:nowrap !important;
  }
  .about-hero-copy > div[style] .btn,
  .mission > div[style] .btn{
    padding:12px 16px !important;
    font-size:11px !important;
    flex:1;
    text-align:center;
    justify-content:center;
  }
}

/* ===== 4. CTA BANNER BACKGROUND FIX ===== */
.cta-banner{
  background:linear-gradient(135deg,rgba(47,125,255,.12) 0%,rgba(21,84,196,.08) 100%),var(--bg-2) !important;
  border-top:1px solid rgba(47,125,255,.3);
  border-bottom:1px solid rgba(47,125,255,.3);
}
.cta-banner h2{color:#fff !important}
.cta-banner p{color:var(--mute) !important}
.cta-banner .btn:first-child{
  background:#000 !important;color:#fff !important;
  border:1px solid var(--line-2);
}
.cta-banner .btn:first-child:hover{background:var(--accent) !important}
.cta-banner .btn:last-child,
.cta-banner .btn[style*="background:#fff"]{
  background:var(--accent) !important;color:#000 !important;
}
.cta-banner .btn[style*="background:#fff"]:hover{
  background:#fff !important;
}

/* ===== 5. CITY LIST — 2-COL GRID ON MOBILE, MAX 8 CITIES ===== */
@media (max-width:600px){
  .cities{
    grid-template-columns:repeat(2,1fr) !important;
    gap:4px 14px !important;
  }
  .cities li{
    padding:5px 0 !important;
    font-size:12px !important;
  }
}

/* ===== 6. FOOTER LISTS — 2-COL GRID ON MOBILE ===== */
@media (max-width:600px){
  .footer-grid{
    grid-template-columns:1fr !important;
    gap:32px !important;
  }
  .footer-col ul{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:6px 14px !important;
  }
  .footer-col a{font-size:12px !important}
  
  /* Fix footer NAP wrapping */
  .footer-brand .nap{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
  }
  .footer-brand .nap div{
    flex-direction:column !important;
    gap:6px !important;
    font-size:12px !important;
  }
  .footer-brand .nap div .ic{
    width:24px !important;height:24px !important;font-size:12px !important;
  }
}

/* ===== 7. SERVICE CARDS — FEATURED IMAGES ===== */
.svc-img{
  width:100%;height:140px;object-fit:cover;
  border-radius:0;margin:-30px -26px 14px;
  width:calc(100% + 52px);
}
.svc{overflow:hidden}

/* ===== 8. GALLERY — HORIZONTAL SLIDER ON MOBILE ===== */
@media (max-width:1100px){
  .gallery-grid{
    display:flex !important;
    overflow-x:auto !important;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:12px !important;
    padding-bottom:12px;
    scrollbar-width:none;
  }
  .gallery-grid::-webkit-scrollbar{display:none}
  .gallery-cell{
    flex:0 0 80vw !important;
    max-width:80vw;
    scroll-snap-align:start;
    aspect-ratio:4/3 !important;
  }
}

/* ===== 9. SCROLL INDICATORS ON HORIZONTAL SLIDERS ===== */
.scroll-hint{
  position:relative;
}
.scroll-hint::after{
  content:"Swipe →";
  display:none;
  position:absolute;
  right:0;top:50%;
  transform:translateY(-50%);
  background:linear-gradient(90deg,transparent,var(--bg) 30%);
  padding:10px 0 10px 40px;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
  pointer-events:none;
  animation:fadeArrow 2s ease infinite;
}
@keyframes fadeArrow{
  0%,100%{opacity:.4}
  50%{opacity:1}
}
@media (max-width:1100px){
  .scroll-hint::after{display:block}
  /* Tab sliders fade edge */
  .svc-tabs-inner,
  .sa-tabs-inner,
  .faq-cats{
    mask-image:linear-gradient(90deg,#000 80%,transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,#000 80%,transparent 100%);
  }
}

/* ===== 10. STATS BAR — 2x2 GRID ON MOBILE ===== */
@media (max-width:600px){
  .sa-stats,
  .about-hero-stats{
    grid-template-columns:repeat(2,1fr) !important;
  }
  .sa-stat,
  .about-hero-stat{
    padding:18px 16px !important;
  }
  .sa-stat:nth-child(1),
  .sa-stat:nth-child(2),
  .about-hero-stat:nth-child(1),
  .about-hero-stat:nth-child(2){
    border-bottom:1px solid var(--line) !important;
  }
  .sa-stat:nth-child(2n),
  .about-hero-stat:nth-child(2n){
    border-right:0 !important;
  }
  .sa-stat:nth-child(2n-1),
  .about-hero-stat:nth-child(2n-1){
    border-right:1px solid var(--line) !important;
  }
  .sa-stat:nth-child(n+3),
  .about-hero-stat:nth-child(n+3){
    border-bottom:0 !important;
  }
}

/* ===== 11. HOVER / MOTION EFFECTS ===== */
.svc{
  transition:background .2s, transform .25s, box-shadow .25s;
}
.svc:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(47,125,255,.08);
}
.review-card{
  transition:transform .25s, border-color .2s;
}
.review-card:hover{
  transform:translateY(-3px);
  border-color:rgba(47,125,255,.3);
}
.why-card{
  transition:transform .25s, border-color .2s, box-shadow .25s;
}
.why-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(47,125,255,.08);
}
.equip-card{
  transition:transform .25s, border-color .2s;
}
.equip-card:hover{
  transform:translateY(-3px);
}
.gallery-cell{
  transition:transform .3s;
}
.gallery-cell:hover{
  transform:scale(1.03);
}
.gallery-cell img{
  transition:transform .4s;
}
.gallery-cell:hover img{
  transform:scale(1.08);
}

/* ===== 12. SERVICE INCLUDES LIST — 2 COLS ON MOBILE ===== */
@media (max-width:600px){
  .svc-includes{
    grid-template-columns:1fr 1fr !important;
    gap:6px 12px !important;
  }
  .svc-includes li{
    font-size:12px !important;
    gap:6px !important;
  }
}

/* ===== 13. SERVICE AREAS CITY LIST — 2 COLS ALWAYS ===== */
@media (max-width:600px){
  .city-svcs{
    grid-template-columns:1fr 1fr !important;
  }
  .cities-grid{
    grid-template-columns:repeat(2,1fr) !important;
  }
}

/* ===== 14. PAGE HEADER CENTERING ON MOBILE ===== */
@media (max-width:768px){
  .page-header,
  .faq-hero,
  .svc-hero,
  .sa-hero-copy,
  .contact-hero,
  .about-hero-copy{
    text-align:center;
  }
  .page-header .crumb,
  .faq-hero .crumb,
  .svc-hero .crumb,
  .sa-hero-copy .crumb,
  .contact-hero .crumb,
  .about-hero-copy .crumb{
    justify-content:center;
    display:flex;
  }
  .eyebrow{justify-content:center}
  .sa-radius-badge{justify-content:center;display:flex}
  .section-head{flex-direction:column;align-items:center;text-align:center}
  .section-head > div{max-width:100%}
  .section-head .lead{margin-inline:auto}
  .reviews-head{flex-direction:column;align-items:center;text-align:center}
}

/* ===== 15. CONTACT QUICK CARDS — 2x2 ON MOBILE ===== */
@media (max-width:600px){
  .contact-quick{
    grid-template-columns:repeat(2,1fr) !important;
    gap:10px !important;
  }
  .cq-card{padding:16px !important}
  .cq-card b{font-size:13px !important}
}

/* ===== 16. FOOTER NAP — FIX WRAPPING ===== */
.footer-brand .nap div{
  align-items:flex-start !important;
}
.footer-brand .nap div > div{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.footer-brand .nap div > div b{
  display:block;
}
@media (max-width:600px){
  .footer-brand .nap{
    grid-template-columns:1fr !important;
  }
  .footer-brand .nap div{
    flex-direction:row !important;
    align-items:center !important;
  }
}

/* ===== 17. MAP CONTAINER FIX FOR IFRAMES ===== */
.area-map{
  position:relative;
}
.area-map iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.sa-map-wrap{
  position:relative;
}
.sa-map-wrap iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* ===== HERO VIDEO — FULL BACKGROUND ON MOBILE ===== */
@media (max-width:1100px){
  .hero{position:relative;overflow:hidden}
  .hero .hero-inner{position:relative;z-index:2}
  .hero .hero-image{
    position:absolute !important;
    inset:0 !important;
    order:0 !important;
    min-height:0 !important;
    z-index:1;
  }
  .hero .hero-image::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(5,5,7,.75) 0%,rgba(5,5,7,.85) 50%,rgba(5,5,7,.95) 100%);
    z-index:2;
  }
  .hero .hero-video-wrap{
    position:absolute !important;inset:0 !important;
    width:100% !important;height:100% !important;
    min-height:0 !important;border-radius:0 !important;
  }
  .hero .hero-video-wrap iframe{
    width:300% !important;height:300% !important;
    top:50% !important;left:50% !important;
    transform:translate(-50%,-50%) !important;
  }
  .hero .hero-image img.img-placeholder{
    position:absolute;inset:0;
    width:100%;height:100%;object-fit:cover;
  }
  .hero .hero-copy{
    position:relative;z-index:3;
    padding:48px 0 56px;
  }
  .hero .hero-dots{position:relative;z-index:3}
}