/* Keep the hero content above the shared ambient glow. */
.homepage .hero { position: relative; isolation: isolate; }
.homepage .hero-grid { position: relative; z-index: 2; }

/* Let the selected client website carry the contrast in the carousel. */
.homepage #work .work-stack .work-desktop img,
.homepage #work .work-stack .work-mobile img {
  filter: brightness(.93) saturate(.96);
  transition: filter .4s ease;
}
.homepage #work .work-stack .is-current .work-desktop img,
.homepage #work .work-stack .is-current .work-mobile img {
  filter: brightness(1.04) contrast(1.045) saturate(1.035);
}
.homepage #work .work-stack .is-current .work-desktop {
  box-shadow: 0 25px 60px rgba(0,0,0,.52), 0 0 0 1px rgba(255,156,82,.13);
}

/* The same field continues through the page, with calmer reading areas. */
.homepage main > #included,
.homepage main > #pricing,
.homepage main > #faq,
.homepage main > #contact {
  background: linear-gradient(180deg, transparent, rgba(2,3,4,.42) 18%, rgba(2,3,4,.58) 50%, rgba(2,3,4,.42) 82%, transparent);
}

html[data-motion-paused="true"] .homepage #work .work-stack img { transition: none; }
@media (max-width: 650px) {
  .homepage #work .work-stack img { transition-duration: .25s; }
}
@media (prefers-reduced-motion: reduce) {
  .homepage #work .work-stack img { transition: none; }
}