/* ===== V28: full-color photo heroes (Service Areas, Contact) ===== */
.v28-hero{min-height:clamp(560px,78vh,820px);display:flex;align-items:center}
.v28-hero > .relative{width:100%}
.v28-hero-img{opacity:1 !important;object-fit:cover;filter:none}
.v28-shade{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(to bottom,rgba(7,11,21,.92) 0,rgba(7,11,21,.55) 150px,rgba(7,11,21,0) 260px),
  linear-gradient(to top,#0a0f1c 0,rgba(10,15,28,0) 120px),
  linear-gradient(90deg,rgba(7,11,21,.94) 0%,rgba(7,11,21,.80) 30%,rgba(7,11,21,.35) 50%,rgba(7,11,21,0) 64%)}
/* hide the old flat overlay that came with the page */
.v28-hero > .v28-old-shade{display:none}
.v28-areas-img{object-position:62% 40%}
.v28-contact-img{object-position:60% 30%}
@media (max-width:767px){
  .v28-hero{min-height:620px;align-items:flex-end;padding-bottom:40px}
  .v28-shade{background:
    linear-gradient(to bottom,rgba(7,11,21,.9) 0,rgba(7,11,21,.35) 140px,rgba(7,11,21,.55) 45%,rgba(7,11,21,.95) 75%,#0a0f1c 100%)}
  .v28-areas-img{object-position:72% center}
  .v28-contact-img{object-position:62% center}
}
/* Service Areas: nudge the photo right so the headline sits over the overpass, not the van */
@media (min-width:768px){ .v28-areas-img{transform:translateX(7%)} }
/* Service Areas on phones: photo on top, text below on the dark background */
@media (max-width:767px){
  .v28-hero:has(.v28-areas-img){display:block;min-height:0;padding-bottom:24px}
  .v28-hero:has(.v28-areas-img) > .relative{padding-top:250px !important}
  .v28-areas-img{height:340px !important;bottom:auto !important;object-position:76% center !important}
  .v28-hero:has(.v28-areas-img) .v28-shade{background:linear-gradient(to bottom,rgba(7,11,21,.85) 0,rgba(7,11,21,.15) 120px,rgba(7,11,21,.2) 200px,#0a0f1c 340px)}
}

/* ===== V29: scaled-back photo heroes (Service Areas, Contact, About) =====
   Same height as the other interior heroes; the photo starts just under the
   navigation and fades in beneath it. */
@media (min-width:768px){
  .v28-hero{min-height:0 !important;display:block}
  .v28-hero > .relative{padding-top:4.5rem !important;padding-bottom:5rem !important}
  .v28-hero-img{top:96px !important;height:calc(100% - 96px) !important;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 120px);
            mask-image:linear-gradient(to bottom,transparent 0,#000 120px)}
  .v28-shade{background:
    linear-gradient(to bottom,#070b15 0,rgba(7,11,21,.6) 150px,rgba(7,11,21,0) 260px),
    linear-gradient(to top,#0a0f1c 0,rgba(10,15,28,0) 90px),
    linear-gradient(90deg,rgba(7,11,21,.95) 0%,rgba(7,11,21,.82) 32%,rgba(7,11,21,.35) 52%,rgba(7,11,21,0) 66%) !important}
  .v28-areas-img{object-position:center 62% !important}
  .v28-contact-img{object-position:60% 34% !important}
  .v28-about-img{object-position:center 28% !important;transform:translateX(18%)}
}
@media (max-width:767px){
  .v28-about-img{object-position:47% 25% !important}
}
@media (min-width:768px){ .v28-areas-img{transform:translateX(15%) !important} }
/* Phones: all three photo heroes stack — photo on top, text below */
@media (max-width:767px){
  .v28-hero{display:block !important;min-height:0 !important;padding-bottom:24px !important}
  .v28-hero > .relative{padding-top:250px !important}
  .v28-hero-img{height:340px !important;bottom:auto !important}
  .v28-hero .v28-shade{background:linear-gradient(to bottom,rgba(7,11,21,.85) 0,rgba(7,11,21,.1) 120px,rgba(7,11,21,.2) 200px,#0a0f1c 340px) !important}
  .v28-contact-img{object-position:62% 30% !important}
  .v28-about-img{object-position:47% 30% !important}
}

/* ===== V30: zoom the photo heroes back out (show more of each photo) =====
   The hero is taller (sized to the photo's proportions), so the photo is barely cropped;
   it starts just under the navigation with the nav shadow over its top edge. */
@media (min-width:768px){
  .v28-hero{display:flex !important;align-items:center;min-height:clamp(520px,46vw,780px) !important}
  .v28-hero > .relative{padding-top:150px !important;padding-bottom:3.5rem !important}
  .v28-hero-img{top:70px !important;height:calc(100% - 70px) !important;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 110px);
            mask-image:linear-gradient(to bottom,transparent 0,#000 110px)}
  .v28-shade{background:
    linear-gradient(to bottom,#070b15 0,rgba(7,11,21,.55) 140px,rgba(7,11,21,0) 240px),
    linear-gradient(to top,#0a0f1c 0,rgba(10,15,28,0) 110px),
    linear-gradient(90deg,rgba(7,11,21,.95) 0%,rgba(7,11,21,.8) 30%,rgba(7,11,21,.3) 50%,rgba(7,11,21,0) 62%) !important}
  .v28-areas-img{object-position:center 40% !important;transform:translateX(6%) !important}
  .v28-contact-img{object-position:center 30% !important;transform:none}
  .v28-about-img{object-position:center 30% !important;transform:translateX(14%) !important}
}

/* ===== V31: one consistent "pulled back" photo hero (Service Areas, Contact, About) =====
   The whole photo is shown (nothing cropped), sized to the hero height and anchored right.
   Its left edge and top edge fade into the dark page, so the text sits on dark background. */
@media (min-width:768px){
  .v28-hero{min-height:clamp(480px,38vw,640px) !important}
  .v28-hero-img{
    left:auto !important;right:0 !important;top:70px !important;bottom:auto !important;
    height:calc(100% - 70px) !important;width:auto !important;max-width:none !important;
    aspect-ratio:1765/891;object-fit:cover !important;object-position:center !important;transform:none !important;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 32%),linear-gradient(to bottom,transparent 0,#000 90px,#000 85%,transparent 100%);
    -webkit-mask-composite:source-in;
            mask-image:linear-gradient(to right,transparent 0,#000 32%),linear-gradient(to bottom,transparent 0,#000 90px,#000 85%,transparent 100%);
            mask-composite:intersect}
  .v28-shade{background:
    linear-gradient(to bottom,#070b15 0,rgba(7,11,21,.5) 130px,rgba(7,11,21,0) 220px),
    linear-gradient(90deg,rgba(7,11,21,.9) 0%,rgba(7,11,21,.6) 35%,rgba(7,11,21,0) 55%) !important}
}