/* FINAL REFERENCE REBUILD — targeted fixes only */
html,body{width:100%;max-width:100%;overflow-x:hidden}
body{margin:0}
*,*:before,*:after{box-sizing:border-box}
img,svg{max-width:100%}
svg.icon{display:inline-block!important;width:22px!important;height:22px!important;flex:0 0 22px!important;color:#0b2f68!important;overflow:visible!important}
/* Do not create decorative icon glyphs with CSS; all icons come from real SVGs in the DOM. */
.main-nav a::before,.main-nav .mega a::before,.site-footer a::before,.area-grid a::before,.area-grid-card::before{content:none!important;display:none!important;width:0!important;height:0!important;margin:0!important;padding:0!important}
/* Mobile utility: keep the real calendar SVG, hide only its label. */
@media(max-width:640px){
  .utility-book{display:inline-flex!important;align-items:center;justify-content:center;gap:0!important;padding:14px 15px!important;font-size:0!important}
  .utility-book::after{content:none!important;display:none!important}
  .utility-book .icon{width:20px!important;height:20px!important;flex-basis:20px!important}
  .utility-book span{display:none!important}
}
/* Homepage approved desktop composition. */
.homepage .hero{background:#0b2d63!important}
.homepage .hero-grid{width:min(1240px,calc(100% - 40px));margin:0 auto;min-height:520px!important;padding:52px 0!important;display:grid!important;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)!important;gap:42px!important;align-items:center!important}
.homepage .hero-grid>div:first-child{position:relative!important;width:auto!important;height:auto!important;padding:0!important;margin:0!important;inset:auto!important}
.homepage .hero h1{font-size:clamp(48px,4.4vw,64px)!important;line-height:1.02!important;margin:0 0 22px!important;max-width:620px!important;color:#fff!important}
.homepage .hero p{font-size:18px!important;line-height:1.55!important;max-width:610px!important;color:#f5f8fc!important}
.homepage .hero-media{position:relative!important;width:100%!important;height:auto!important;margin:0!important}
.homepage .hero-media .van{display:block!important;width:100%!important;height:auto!important;max-width:none!important;aspect-ratio:1536/590!important;object-fit:contain!important;object-position:center!important;border-radius:16px!important}
.homepage .appliance-float{right:18px!important;bottom:-38px!important}
.homepage .section>.container{width:min(1240px,calc(100% - 40px))!important;margin-left:auto!important;margin-right:auto!important}
/* Approved service directory: photo + service name + Explore. */
.service-directory .service-grid,.services-page .service-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:22px!important}.service-directory .service-card-clean,.services-page .service-card-clean{display:flex;flex-direction:column}
.service-card-clean-media{height:235px!important;background:#f7f9fb!important;padding:14px!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;object-fit:contain!important;object-position:center!important;display:block!important}
.service-card-clean-body{min-height:82px!important;padding:19px 20px 22px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important}
.service-card-clean-link{display:inline-flex!important;align-items:center!important;color:#1769d6!important;font-weight:900!important;font-size:14px!important;white-space:nowrap!important}
/* Service-page / Location-page hero image treatment from approved references. */
.service-hero,.location-hero,.brand-hero{overflow:hidden!important}
.service-visual,.location-visual{overflow:visible!important}
.service-logo-badge,.location-badge{background:#0b2f68!important}
.service-logo-badge img,.location-badge img{object-fit:contain!important;display:block!important}
/* Brand hero: clean logo card only, no competitor badge art. */
.brand-hero-card{background:#fff!important;border-radius:22px!important;display:flex!important;align-items:center!important;justify-content:center!important;box-shadow:0 15px 42px rgba(16,42,84,.11)!important;padding:28px!important}
.brand-hero-logo{width:min(85%,430px)!important;height:220px!important;object-fit:contain!important;display:block!important}
/* Footer: one Service heading spanning the two service columns. */
.site-footer .footer-grid{align-items:start!important}
.site-footer .footer-grid>div:nth-child(2) h3{margin-bottom:12px!important}
.site-footer .footer-grid>div:nth-child(3) h3{display:none!important}
/* Make service-area directory cards icon-first and consistent. */
.area-grid-card,.area-directory .area-grid-card{display:flex!important;align-items:center!important;gap:10px!important}
.area-grid-card .icon{width:22px!important;height:22px!important;flex-basis:22px!important;color:#0b2f68!important}
/* ---------- Mobile: image first on the approved homepage/service/location/brand hero ---------- */
@media(max-width:900px){
  .homepage .hero-grid{width:100%!important;display:flex!important;flex-direction:column!important;padding:0!important;gap:0!important}
  .homepage .hero-media{order:1!important;width:100%!important;padding:0 14px 28px!important}
  .homepage .hero-grid>div:first-child{order:2!important;width:100%!important;padding:34px 18px 84px!important}
  .homepage .hero-media .van{width:100%!important;height:auto!important;aspect-ratio:auto!important;object-fit:contain!important;border-radius:0!important;box-shadow:none!important}
  .homepage .appliance-float{position:static!important;display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:8px!important;margin-top:10px!important}
  .homepage .mini-appliance{width:100%!important}
  .homepage .mini-appliance img{height:72px!important;object-fit:cover!important}
  .homepage .hero h1{font-size:clamp(38px,9vw,52px)!important}
  .homepage .hero p{font-size:16px!important;line-height:1.58!important}
  .homepage .actions{flex-direction:column!important;align-items:stretch!important}
  .homepage .actions .btn{width:100%!important}
  .service-hero-grid,.location-grid,.brand-hero-grid{display:flex!important;flex-direction:column!important}
  .service-hero-grid>div:nth-child(2),.location-grid>div:nth-child(2),.brand-hero-grid>div:nth-child(2){order:1!important;width:100%!important}
  .service-hero-grid>div:first-child,.location-grid>div:first-child,.brand-hero-grid>div:first-child{order:2!important;width:100%!important}
  .service-visual{min-height:310px!important;margin-top:8px!important}
  .location-visual{min-height:330px!important}
  .brand-hero-card{min-height:300px!important}
  .service-appliance{width:min(92%,430px)!important;height:245px!important}
  .service-logo-badge{width:min(72%,310px)!important;bottom:0!important}
  .location-visual .collage{width:min(94%,430px)!important;height:240px!important;object-fit:contain!important}
  .location-badge{width:min(76%,320px)!important;bottom:6px!important}
  .brand-hero-logo{height:180px!important}
  .brand-grid,.brand-appliance-grid{grid-template-columns:1fr 1fr!important}
  .footer-grid{grid-template-columns:1fr!important;padding:26px 20px!important}
  .site-footer .footer-grid>div:nth-child(3) h3{display:none!important}
}
@media(max-width:900px){
  .service-directory .service-grid,.services-page .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}
}
@media(max-width:640px){
  .container{width:calc(100% - 28px)!important}
  .service-card-clean-media{height:180px!important;padding:10px!important}
  .service-card-clean-body{min-height:78px!important;padding:14px 14px 16px!important}
  .service-card-clean-body h3{font-size:18px!important}
  .service-card-clean-link{font-size:12px!important}
  .service-badge-grid{grid-template-columns:1fr 1fr!important}
  .service-logo-badge{width:280px!important;max-width:80%!important}
  .location-badge{width:280px!important;max-width:82%!important}
  .brand-grid{grid-template-columns:1fr 1fr!important}
  .brand-card img{height:135px!important}
  .homepage .hero-grid>div:first-child{padding-left:16px!important;padding-right:16px!important}
}

@media(max-width:640px){
  body{padding-bottom:64px!important}
  .mobile-bar{display:grid!important;grid-template-columns:1fr 1fr!important;position:fixed!important;left:0!important;right:0!important;bottom:0!important;height:64px!important;z-index:9999!important;background:#0b2f68!important;box-shadow:0 -8px 25px rgba(16,42,84,.18)!important}
  .mobile-bar a{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;color:#fff!important;font-weight:900!important;font-size:16px!important;text-decoration:none!important}
  .mobile-bar a+ a{background:#ffad00!important;color:#0b2f68!important}
  .mobile-bar .icon{width:20px!important;height:20px!important;flex-basis:20px!important;color:inherit!important}
}

/* FINAL viewport safeguard for the homepage's last-loaded stylesheet */
@media (min-width:901px){
  .container,.nav-inner,.utility-inner{width:calc(100% - 80px)!important;max-width:1800px!important;margin-left:auto!important;margin-right:auto!important}
  .nav-inner{display:grid!important;grid-template-columns:250px minmax(0,1fr)!important;gap:20px!important;min-width:0!important}
  .main-nav{min-width:0!important;width:100%!important;gap:clamp(8px,1vw,22px)!important;font-size:clamp(12px,.84vw,16px)!important}
}
@media (max-width:1400px) and (min-width:901px){
  .container,.nav-inner,.utility-inner{width:calc(100% - 48px)!important;max-width:1350px!important}
  .nav-inner{grid-template-columns:210px minmax(0,1fr)!important;gap:12px!important}
  .site-logo{width:195px!important}
  .main-nav{gap:9px!important;font-size:12px!important}
  .nav-cta{padding:12px 13px!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}
}
/* Appliance page badge alignment/scale only — leave all other site elements unchanged */
.service-visual .service-appliance{
  width:min(100%,520px)!important;
  height:360px!important;
  object-fit:contain!important;
  object-position:center center!important;
  margin:0 auto!important;
}
.service-visual:before{
  width:370px!important;
  height:370px!important;
  top:22px!important;
}
@media(max-width:980px){
  .service-visual .service-appliance{width:min(100%,500px)!important;height:350px!important}
  .service-visual:before{width:350px!important;height:350px!important}
}
@media(max-width:640px){
  .service-visual .service-appliance{width:min(100%,430px)!important;height:300px!important}
  .service-visual:before{width:260px!important;height:260px!important;top:22px!important}
}