/* A single photographic scene, with the text kept on the common reading grid. */
#approach {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #e9edef;
  border: 0;
  box-shadow: none;
}
#approach .approach-photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
#approach .approach-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
#approach .approach-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #e9edef 0%, #e9edeffc 38%, #e9edeff5 46%, #e9edefba 54%, #e9edef00 68%);
}
#approach > .section-heading,
#approach > .approach-promises { width: 54%; }
#approach > .section-heading { display: block; margin: 0 0 28px; }
#approach .approach-promises { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
#approach .approach-promises > .glass-panel { padding: 0; border: 0; background: none; box-shadow: none; }
#approach .approach-principles { display: grid; gap: 24px; }
#approach .approach-principles article { padding: 0; border: 0; }
#approach .approach-promises h3 { font-size: clamp(21px, 1.9vw, 26px); line-height: 1.35; margin: 0 0 10px; color: var(--ink); }
#approach .approach-promises p { font-size: 16px; line-height: 1.75; color: #405d70; }
#approach > .source-section-link { margin-top: 28px; }

@media (max-width: 850px) {
  #approach { padding-top: clamp(280px, 46vw, 380px); }
  #approach .approach-photo { inset: 0 0 auto; height: clamp(320px, 52vw, 430px); }
  #approach .approach-photo img { object-position: right 42%; }
  #approach .approach-photo::after { background: linear-gradient(180deg, #e9edef00 50%, #e9edef70 70%, #e9edef 100%); }
  #approach > .section-heading,
  #approach > .approach-promises { width: 100%; }
  #approach > .section-heading { margin-bottom: 24px; }
}
@media (max-width: 540px) {
  #approach > .source-section-link { display: flex; width: fit-content; margin-inline: auto; }
}