/*
  MOBILE CONTENT + FOOTER FINAL POLISH
  Scope: <= 700px only. Desktop/tablet layout is intentionally untouched.
*/
@media (max-width:700px){
  html,body{width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:hidden!important}
  body{padding-bottom:0!important}
  main,.section,.hero,.service-hero,.location-hero,.brand-hero,.site-footer{width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:hidden!important}
  .container{width:calc(100% - 28px)!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important;min-width:0!important}

  /* Homepage/service directory: compact two-column cards on normal phones. */
  .service-badge-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;align-items:stretch!important}
  .service-card-clean{width:100%!important;min-width:0!important;display:flex!important;flex-direction:column!important;height:auto!important;min-height:0!important;border-radius:16px!important;border-width:2px!important;overflow:hidden!important}
  .service-card-clean-media{width:100%!important;height:128px!important;min-height:128px!important;padding:8px!important;background:#f7f9fb!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important}
  .service-card-clean-media img{width:100%!important;height:100%!important;max-width:100%!important;object-fit:contain!important;object-position:center!important;display:block!important}
  .service-card-clean-body{width:100%!important;min-width:0!important;min-height:76px!important;padding:11px 12px 13px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:6px!important;overflow:visible!important}
  .service-card-clean-body h3{width:100%!important;min-width:0!important;margin:0!important;color:#0d2e5f!important;font-size:17px!important;line-height:1.18!important;overflow-wrap:anywhere!important;word-break:normal!important}
  .service-card-clean-link{display:inline-block!important;margin:0!important;font-size:13px!important;line-height:1.2!important;white-space:nowrap!important;color:#1769d6!important}

  /* If any older service-card markup exists on a page, make it mobile-safe too. */
  .service-badge-grid .service-badge-card{width:100%!important;min-width:0!important;min-height:0!important;height:auto!important;grid-template-columns:1fr!important;display:grid!important}
  .service-badge-grid .service-badge-media{width:100%!important;height:128px!important;min-height:128px!important;padding:8px!important}
  .service-badge-grid .service-badge-card>img{width:100%!important;height:128px!important;object-fit:contain!important}
  .service-badge-grid .service-badge-copy{padding:11px 12px 13px!important;min-width:0!important;display:block!important}
  .service-badge-grid .service-badge-copy h3{font-size:17px!important;line-height:1.18!important;overflow-wrap:anywhere!important}

  /* Section headings: no clipping and comfortable reading width. */
  .section-head{display:block!important;margin-bottom:26px!important}
  .section-head>div{min-width:0!important}
  .section h2{font-size:31px!important;line-height:1.12!important;overflow-wrap:anywhere!important}
  .section-head p{font-size:16px!important;line-height:1.65!important;margin:12px 0 0!important;overflow-wrap:anywhere!important}

  /* Why section / feature cards: let content determine height; never crop text. */
  .split{display:flex!important;flex-direction:column!important;gap:28px!important;align-items:stretch!important}
  .split-img{width:100%!important;height:auto!important;max-height:none!important}
  .feature-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  .feature{width:100%!important;min-width:0!important;height:auto!important;min-height:0!important;padding:16px!important;overflow:visible!important}
  .feature strong,.feature span{display:block!important;overflow-wrap:anywhere!important;word-break:normal!important}
  .feature strong{font-size:16px!important;line-height:1.35!important}
  .feature span{font-size:14px!important;line-height:1.55!important;margin-top:5px!important}

  /* Service/detail pages: stack content cleanly and keep hero visual inside viewport. */
  .service-hero-grid,.location-grid,.brand-hero-grid,.service-main-grid,.location-content-grid,.content-grid{width:100%!important;min-width:0!important}
  .service-hero-grid,.location-grid,.brand-hero-grid{display:grid!important;grid-template-columns:1fr!important;gap:24px!important}
  .service-hero h1,.location-hero h1,.brand-hero h1{font-size:37px!important;line-height:1.08!important;overflow-wrap:anywhere!important}
  .service-hero .lead,.location-hero p,.brand-hero p{font-size:16px!important;line-height:1.6!important;overflow-wrap:anywhere!important}
  .service-visual,.location-visual{width:100%!important;min-width:0!important;max-width:100%!important;overflow:visible!important}
  .service-appliance,.location-visual .collage,.brand-hero-logo{max-width:100%!important}
  .service-logo-badge,.location-badge{max-width:calc(100% - 28px)!important}
  .brand-hero-card{width:100%!important;min-width:0!important;max-width:100%!important;overflow:hidden!important}

  /* Forms / grids: remove fixed widths that can hide fields or text. */
  .form-grid,.fields,.problem-grid,.why-grid,.issue-grid,.process-grid,.brand-appliance-grid,.area-grid,.area-directory,.gallery-grid{min-width:0!important;max-width:100%!important}
  .form-card,.mini-form,.offer-card,.problem-card,.why-card,.issue-card,.process-card,.brand-appliance-card{min-width:0!important;max-width:100%!important;overflow:visible!important}
  .form-card,.mini-form{padding:20px!important}
  .field input,.field select,.field textarea,.form-card,.mini-form{box-sizing:border-box!important;max-width:100%!important}
  .offer-card{width:100%!important}
  .offer-card img{max-width:100%!important}

  /* Footer: one readable column. The previous wide 5-column rule was causing clipping. */
  .site-footer{padding:30px 0 0!important}
  .site-footer .footer-grid{display:grid!important;grid-template-columns:1fr!important;width:100%!important;max-width:100%!important;min-width:0!important;gap:26px!important;padding:24px 20px!important;border-radius:18px!important;overflow:visible!important}
  .site-footer .footer-grid>div{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;overflow:visible!important}
  .footer-brand img{display:block!important;width:min(100%,245px)!important;height:auto!important;max-height:none!important;object-fit:contain!important;object-position:left center!important;margin:0 0 14px!important}
  .footer-brand p{max-width:none!important;width:100%!important;font-size:16px!important;line-height:1.6!important;overflow-wrap:anywhere!important}
  .site-footer h3{font-size:17px!important;line-height:1.35!important;overflow-wrap:anywhere!important}
  .site-footer ul{width:100%!important;max-width:100%!important}
  .site-footer li{width:100%!important;max-width:100%!important;margin:9px 0!important;overflow:visible!important}
  .site-footer li a{width:100%!important;max-width:100%!important;display:flex!important;align-items:flex-start!important;gap:9px!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;line-height:1.45!important}
  .site-footer li .icon{flex:0 0 18px!important;margin-top:2px!important}
  .footer-brand .footer-contact-line{width:100%!important;max-width:100%!important;display:flex!important;align-items:flex-start!important;gap:9px!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;line-height:1.45!important}
  .footer-brand .footer-contact-line .icon{flex:0 0 20px!important;margin-top:2px!important}
  .footer-bottom{width:100%!important;max-width:100%!important;padding:20px 14px 100px!important;margin:0!important;overflow:visible!important}
  .payments{width:100%!important;max-width:100%!important;display:flex!important;justify-content:center!important;align-items:center!important;overflow:visible!important}
  .payments .payment-sprite{width:100%!important;max-width:430px!important;height:auto!important;display:block!important}
  .footer-bottom p{width:100%!important;max-width:100%!important;font-size:13px!important;line-height:1.6!important;overflow-wrap:anywhere!important}

  /* Fixed bottom CTA: keep both actions fully visible and don't overlap content horizontally. */
  .mobile-bar{display:flex!important;position:fixed!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;max-width:100%!important;z-index:5000!important}
  .mobile-bar a{min-width:0!important;flex:1 1 50%!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;padding:12px 8px!important;line-height:1.35!important;white-space:normal!important;overflow-wrap:anywhere!important}
}

@media (max-width:380px){
  .service-badge-grid{grid-template-columns:1fr!important}
  .service-card-clean-media,.service-badge-grid .service-badge-media,.service-badge-grid .service-badge-card>img{height:155px!important;min-height:155px!important}
  .service-card-clean-body{min-height:72px!important}
  .feature-list{grid-template-columns:1fr!important}
  .footer-bottom{padding-left:10px!important;padding-right:10px!important}
}

/* Header + bottom CTA final mobile sizing guard */
@media (max-width:700px){
  .utility-inner{grid-template-columns:minmax(0,1fr) auto auto!important;align-items:center!important;width:100%!important;padding:8px 12px!important}
  .utility-tag{min-width:0!important;max-width:none!important;overflow:visible!important;white-space:normal!important}
  .utility-phone{min-width:max-content!important;display:inline-flex!important;white-space:nowrap!important;overflow:visible!important;font-size:11px!important}
  .utility-book{flex:0 0 52px!important;width:52px!important;min-width:52px!important}
  .nav-inner{width:100%!important;padding:0 12px!important}
  .mobile-bar a{font-size:15px!important;font-weight:900!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:clip!important}
  .mobile-bar .icon{flex:0 0 20px!important;width:20px!important;height:20px!important;margin-right:6px!important}
}


/* LOCATION HERO VAN ONLY — preserves the existing page design; replaces the old appliance collage
   with the real Next Appliance Repair van on a transparent background. */
.location-visual .collage{
  width:min(100%,560px)!important;
  height:280px!important;
  object-fit:contain!important;
  object-position:center!important;
  background:transparent!important;
  padding:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  display:block!important;
}
.location-visual{
  min-height:470px!important;
  background:transparent!important;
}
.location-badge{
  bottom:5px!important;
}
@media(max-width:980px){
  .location-visual{min-height:430px!important}
  .location-visual .collage{width:min(100%,520px)!important;height:250px!important}
}
@media(max-width:640px){
  .location-visual{min-height:360px!important;padding-bottom:65px!important}
  .location-visual .collage{width:100%!important;height:210px!important;padding:0!important;border-radius:0!important}
  .location-badge{bottom:0!important}
}