/* Service page hero photo (as on Spector): a full-bleed image behind the whole hero, darkened so the headline stays readable.
   The interactive mesh is drawn over it and reads the photo's brightness (data-src on .hero__media). */
.page-hero .hero__photo { position: absolute; inset: 0; width: auto; z-index: -1; overflow: hidden; }
.page-hero .hero__photo--dim img { filter: brightness(.62) saturate(.9); }
.page-hero .hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 38%; }
.page-hero .hero__photo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(5,6,9,.5), rgba(5,6,9,.5)),
    linear-gradient(90deg, rgba(5,6,9,.92) 0%, rgba(5,6,9,.55) 38%, rgba(5,6,9,.22) 75%, rgba(5,6,9,.38) 100%),
    linear-gradient(0deg, #050609 0%, rgba(5,6,9,.7) 22%, rgba(5,6,9,0) 55%),
    linear-gradient(180deg, rgba(5,6,9,.6) 0%, rgba(5,6,9,0) 22%); }
.js .page-hero .hero__photo { opacity: 0; transform: scale(1.06); transition: opacity 1.8s var(--ease) .4s, transform 2.6s var(--ease) .4s; }
.js.is-ready .page-hero .hero__photo { opacity: 1; transform: none; }
@media (max-width: 800px) { .page-hero .hero__photo img { object-position: 66% 30%; } }
@media (prefers-reduced-motion: reduce) { .js .page-hero .hero__photo { opacity: 1; transform: none; transition: none; } }