/* Photography-led opening: the face carries the first impression. */
.hero.photo-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  height: auto;
  min-height: max(740px, 100svh);
  padding: 0;
}
.photo-hero .hero-copy { padding: 36px 0 36px var(--gutter); }
.photo-hero .hero-visual {
  position: relative;
  align-self: stretch;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
  transform: none;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 13%);
}
.photo-hero .hero-visual > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: 50% 48%;
  transform: none;
  mix-blend-mode: normal;
}

/* Still photographs replace the two ambient-video slots. */
.scene-night .scene-image > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 43%;
}
.scene-night .scene-image::after {
  background: linear-gradient(180deg, transparent 35%, #14233140 66%, #142331 100%);
}
.photo-conclusion .conclusion-backdrop > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.life-conclusion.photo-conclusion { min-height: 720px; }
.photo-conclusion::after {
  background: linear-gradient(180deg, #10202e00 22%, #10202e12 38%, #10202e8c 65%, #10202ee6 100%);
}
.photo-conclusion .conclusion-copy {
  align-self: end;
  margin: 0 auto;
  padding: 36px var(--gutter) 64px;
}
.photo-conclusion .conclusion-copy h2 { font-size: clamp(52px, 5.8vw, 84px); line-height: 1.35; }
.photo-conclusion .conclusion-copy > p { margin-top: 20px; }

.team-photo-real { margin-top: 48px; }
.team-photo-real img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.8;
  object-fit: cover;
  object-position: 50% 52%;
  border-radius: 12px 72px 12px 12px;
}

@media (min-width: 721px) and (max-width: 1100px) {
  .photo-hero h1 { font-size: clamp(32px, 4.35vw, 48px); }
  .photo-hero .hero-copy { padding-left: var(--gutter); }
}
@media (max-width: 720px) {
  .hero.photo-hero {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
    padding: 26px var(--gutter) 42px;
  }
  .photo-hero .hero-copy { display: contents; }
  .photo-hero .hero-visual {
    grid-column: 1;
    grid-row: 3;
    width: calc(100% + 2 * var(--gutter));
    height: clamp(300px, 46svh, 430px);
    margin: 18px calc(-1 * var(--gutter)) 24px;
    mask-image: none;
  }
  .photo-hero .hero-visual > img { object-position: 50% 48%; }
  .scene-night .scene-image::after { background: linear-gradient(180deg, transparent 72%, #142331 100%); }
  .life-conclusion.photo-conclusion { height: 100svh; min-height: 650px; max-height: 960px; }
  .photo-conclusion .conclusion-backdrop > img { object-position: 52% 40%; }
  .photo-conclusion .conclusion-copy { padding: 30px var(--gutter) 110px; }
  .photo-conclusion .conclusion-copy h2 { font-size: clamp(36px, 10vw, 64px); line-height: 1.45; }
  .photo-conclusion .conclusion-copy > p { margin-top: 22px; }
  .team-photo-real { margin-top: 32px; }
  .team-photo-real img { aspect-ratio: 4 / 3; object-position: center; border-radius: 10px 44px 10px 10px; }
}