/*
 * Photo clarity pass.
 *
 * The visual system remains deliberately dark, but the source photographs
 * must read as separate, tactile surfaces instead of disappearing into the
 * page background.  Filters are intentionally scoped to production photos;
 * logos, maps, icons, avatars and self-hosted video are left untouched.
 */

/* Large photographic statements: lift exposure without washing out LEDs. */
.mock-home-hero__media > img {
  filter: brightness(1.12) saturate(1.06) contrast(1.02);
}

.services-hero__media > img,
.formats-hero__media > img,
.mock-about-hero__media > img {
  filter: brightness(1.08) saturate(1.05) contrast(1.01);
}

.cases-hero__media > img:first-child,
.blog-hero__media > img:first-child {
  filter: brightness(1.1) saturate(1.06);
}

.page--service-detail .hero-media > img:first-child,
.page--format-landing .format-hero__media > img:first-child,
.page--article .hero-media > img:first-child,
.page--case-detail .hero-media > img:first-child,
.page--videos .hero-media > img:first-child,
.page--reviews .hero-media > img:first-child,
.blog-featured__media img,
.cases-focus__media img,
.services-contour__top > img,
.services-final__panel > img,
.formats-final__panel > img,
.mock-tech-responsibility > img,
.mock-contact-final > img {
  filter: brightness(1.06) saturate(1.04);
}

/* Card sources already have a finished grade: only a very small lift. */
.content-card__media img,
.service-card__media img,
.format-card__media img,
.cases-card__media img,
.blog-card__media img,
.photo-card img {
  filter: brightness(1.04) saturate(1.03);
}

/* Reduce the black veils that were stacked over already dark source files. */
.cases-hero__media::after {
  background:
    linear-gradient(90deg, rgb(2 6 13 / 34%), transparent 25%),
    linear-gradient(0deg, rgb(2 7 17 / 26%), transparent 44%);
}

.blog-hero__media::after {
  background:
    linear-gradient(90deg, rgb(2 6 13 / 34%), transparent 27%),
    linear-gradient(0deg, rgb(2 7 17 / 28%), transparent 45%);
}

.service-hero .hero-media::before {
  background:
    linear-gradient(90deg, rgb(1 5 12 / 52%), transparent 28%),
    linear-gradient(0deg, rgb(1 5 12 / 40%), transparent 44%);
}

.format-hero__media::after {
  background:
    linear-gradient(90deg, rgb(1 5 12 / 50%), transparent 25%),
    linear-gradient(0deg, rgb(1 5 12 / 40%), transparent 48%);
}

.blog-featured__media::before {
  background: linear-gradient(90deg, rgb(8 16 26 / 82%), transparent 32%);
}

.cases-card__media::after {
  background: linear-gradient(transparent, rgb(8 13 22 / 88%));
}

.content-card__media::after {
  inset: 55% 0 0;
  background: linear-gradient(transparent, rgb(3 7 14 / 82%));
}

/* Team portraits previously had two almost opaque gradients on top of each
   other.  Keep the lower text area safe while allowing faces and equipment to
   remain visible. */
.mock-role-grid article::after {
  background: linear-gradient(180deg, rgb(3 7 14 / 0%), rgb(3 7 14 / 68%) 37%, rgb(3 7 14 / 92%) 74%);
}

.mock-role-grid article > div {
  background: linear-gradient(180deg, transparent, rgb(3 7 14 / 86%) 58%, rgb(3 7 14 / 96%));
}

/* A cool neutral edge makes photo cards legible against the near-black page
   without turning them into bright glass panels. */
:is(
  .content-card,
  .service-card,
  .format-card,
  .cases-card,
  .blog-card,
  .blog-featured,
  .mock-role-card,
  .photo-card
) {
  border-color: rgb(185 198 226 / 18%);
  box-shadow:
    0 16px 42px rgb(0 0 0 / 20%),
    inset 0 1px rgb(255 255 255 / 4%);
}

:is(
  .content-card,
  .service-card,
  .format-card,
  .cases-card,
  .blog-card,
  .blog-featured,
  .mock-role-card,
  .photo-card
):hover {
  border-color: rgb(232 76 142 / 55%);
}