/* Display effects only: every source photograph remains unchanged. */
:root {
  --photo-room-filter: saturate(.48) contrast(1.1) brightness(.86);
  --photo-room-hover-filter: saturate(.64) contrast(1.08) brightness(.93);
  --photo-portrait-filter: saturate(.78) contrast(1.045) brightness(.98);
}

.photo-surface {
  position: relative;
  isolation: isolate;
  background: #0b1417;
  box-shadow: 0 24px 55px -32px #000c;
}

.photo-surface > img {
  position: relative;
  z-index: 0;
  filter: var(--photo-room-filter);
  transition: filter .5s ease, transform .6s ease;
}

.photo-surface::before,
.photo-surface::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* A cool, translucent colour layer quietens the warm wood tones. */
.photo-surface::before {
  z-index: 1;
  background: #537c85;
  mix-blend-mode: color;
  opacity: .28;
}

.photo-surface::after {
  z-index: 2;
  background: linear-gradient(180deg, #0710140b 35%, #03090e42 100%);
  border: 1px solid #edf8f014;
  box-shadow: inset 0 -35px 45px -35px #02080bd9;
}

.hero-image.photo-surface {
  position: absolute;
}

.hero-image > img {
  filter: saturate(.42) contrast(1.12) brightness(.83);
}

.hero-image::before {
  opacity: .34;
}

.hero-image::after {
  background: linear-gradient(90deg, #0b0d0e66, transparent 60%),
    linear-gradient(0deg, #050b10b3, #0610150f 65%);
  border-color: #d9f5ef12;
}

.hero-image .image-note,
.hero-image .image-corner,
.jobs-hero-photo .photo-tag,
.gallery-item > span {
  z-index: 3;
}

/* Match the former image dimensions without changing any page layout. */
.about-feature > .photo-surface {
  height: 520px;
  overflow: hidden;
}

.about-feature > .photo-surface > img {
  height: 100%;
  width: 100%;
}

.team-grid .photo-surface {
  aspect-ratio: 1;
  overflow: hidden;
}

.team-grid .photo-surface > img {
  width: 100%;
  height: 100%;
}

.photo-surface--portrait > img {
  filter: var(--photo-portrait-filter);
}

/* Portraits keep natural skin tones; shading is confined to the edges. */
.photo-surface--portrait::before {
  opacity: .055;
  background: #708e91;
}

.photo-surface--portrait::after {
  background: linear-gradient(180deg, transparent 60%, #050c1429);
  box-shadow: inset 0 -24px 32px -30px #0009;
  border-color: #e2f7ee1c;
}

.benefits-intro > .photo-surface {
  overflow: hidden;
  box-shadow: 0 23px 45px -27px #10240699;
}

.benefits-intro > .photo-surface > img {
  width: 100%;
}

.jobs-hero-photo::after {
  background: linear-gradient(180deg, transparent 40%, #040d1566);
}

.lightbox-photo {
  display: table;
  width: fit-content;
  max-width: 100%;
}

.dialog-close {
  z-index: 4;
}


@media (max-width: 1180px) {
  .about-feature > .photo-surface { height: 490px; }
}

@media (max-width: 940px) {
  .about-feature > .photo-surface { height: 420px; }
}

@media (max-width: 680px) {
  .hero-image.photo-surface { position: relative; }
  .about-feature > .photo-surface { height: 300px; }
  .hero-image::after {
    background: linear-gradient(0deg, #050b1099, transparent 65%),
      linear-gradient(180deg, #0b0d0e66, transparent 55%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .photo-surface > img { transition: none; }
}