/* ===== V32: service-detail and city-page heroes =====
   Same "pulled back" look as About / Contact / Service Areas: the full photo, bright, on the right,
   fading softly into the dark page; text on the dark left side. */
.v32-hero{position:relative}
.v32-hero > .v32-old-shade{display:none}
.v32-img{opacity:1 !important;filter:saturate(1.05) brightness(1.05)}
.v32-shade{position:absolute;inset:0;pointer-events:none}
@media (min-width:768px){
  .v32-hero{min-height:clamp(440px,34vw,600px);display:flex;align-items:center}
  .v32-hero > .relative{width:100%}
  .v32-img{left:auto !important;right:0 !important;top:0 !important;bottom:auto !important;
    height:100% !important;width:auto !important;max-width:none !important;object-fit:cover;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 30%),linear-gradient(to bottom,transparent 0,#000 70px,#000 86%,transparent 100%);
    -webkit-mask-composite:source-in;
            mask-image:linear-gradient(to right,transparent 0,#000 30%),linear-gradient(to bottom,transparent 0,#000 70px,#000 86%,transparent 100%);
            mask-composite:intersect}
  .v32-svc{aspect-ratio:1600/1000}
  .v32-city{aspect-ratio:1693/929}
  .v32-shade{background:linear-gradient(90deg,rgba(7,11,21,.9) 0%,rgba(7,11,21,.6) 36%,rgba(7,11,21,0) 56%)}
}
@media (max-width:767px){
  .v32-hero > .relative{padding-top:250px !important}
  .v32-img{height:330px !important;bottom:auto !important;object-position:center 30%}
  .v32-shade{background:linear-gradient(to bottom,rgba(7,11,21,.3) 0,rgba(7,11,21,.1) 140px,rgba(7,11,21,.35) 220px,#070b15 330px)}
}
/* Electrical hero: wider photo, so keep it to the right 60% of the hero */
@media (min-width:768px){ .v34-el-img{width:58% !important;aspect-ratio:auto !important;object-fit:cover;object-position:74% center} }
@media (max-width:767px){ .v34-el-img{object-position:62% center} }