/* Hero photos: the picture sits on the right and melts into the hero's own background colour on its left edge
   (the mask makes the left part transparent, so the hero gradient shows through). Used with <div class="hero-media has-photo"><img ...></div>. */
.hero-media.has-photo::before, .hero-media.has-photo::after { display:none; }
/* same light left shadow as the home hero (titles stay readable, the picture keeps its colour) */
.hero:has(.has-photo)::after { background:linear-gradient(90deg, rgba(0,21,42,.58) 0%, rgba(0,29,51,.40) 28%, rgba(0,0,0,0) 58%); }
.hero-media.has-photo img {
  position:absolute; top:0; right:0; height:100%; width:clamp(680px, 74%, 1300px); object-fit:cover; object-position:50% 50%; filter:saturate(1.25) contrast(1.06);
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.08) 8%, rgba(0,0,0,.22) 18%, rgba(0,0,0,.45) 30%, rgba(0,0,0,.72) 42%, rgba(0,0,0,.92) 54%, #000 64%);
          mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.08) 8%, rgba(0,0,0,.22) 18%, rgba(0,0,0,.45) 30%, rgba(0,0,0,.72) 42%, rgba(0,0,0,.92) 54%, #000 64%);
}
/* Variant "photo-open": the interesting part of the picture is on its LEFT (CO2 & Dry Ice: the ice), so the picture starts further left,
   the fade starts earlier/higher and the hero's dark left overlay is much lighter. */
@media (min-width:769px) {
.hero-media.has-photo.photo-open img {
  width:clamp(760px, 80%, 1450px);
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.30) 8%, rgba(0,0,0,.55) 18%, rgba(0,0,0,.78) 32%, rgba(0,0,0,.93) 50%, #000 68%, #000 100%);
          mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.30) 8%, rgba(0,0,0,.55) 18%, rgba(0,0,0,.78) 32%, rgba(0,0,0,.93) 50%, #000 68%, #000 100%);
}
.hero:has(.photo-open)::after { background:linear-gradient(90deg, rgba(2,28,49,.72) 0%, rgba(2,28,49,.45) 22%, rgba(2,28,49,.12) 42%, transparent 55%); }
}

@media (max-width:768px) {
  .hero-media.has-photo { background:#062b4f; }
  /* phone: the picture is a band above the title and melts downward into the hero colour */
  .hero-media.has-photo img {
    width:100%; left:0; right:auto;
    -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
            mask-image:linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  }
}

/* Photos placed inside the page (replacing the grey placeholder boxes): shown whole, never stretched. */
.photo-frame { margin:0; border-radius:9px; overflow:hidden; box-shadow:0 10px 28px rgba(6,43,79,.12); line-height:0; background:#e8eef3; }
.photo-frame img { display:block; width:100%; height:auto; }
.photo-frame.photo-portrait { max-width:440px; width:100%; margin-inline:auto; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .photo-frame img { transition:transform .7s ease; }
  .photo-frame:hover img { transform:scale(1.03); }
}

/* Renewable Energy: tall "services" slot next to the service list (desktop only) */
.photo-frame.services-photo { display:none; }
@media (min-width:1024px) { .photo-frame.services-photo { display:block; margin-top:28px; } }
.photo-frame.photo-portrait { max-width:380px; }
@media (min-width:769px) { .photo-frame.photo-portrait { max-width:400px; } }