/* A scroll-controlled bridge from the service cards into our approach. */
.ribbon-interlude { position: relative; height: 110svh; overflow: clip; }
.journey-ribbon {
  position: sticky;
  top: 10svh;
  height: 80svh;
  z-index: 3;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
}
.ribbon-frame {
  position: relative;
  width: min(760px, 82vw, 86svh);
  aspect-ratio: 1;
  will-change: transform;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent), linear-gradient(transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent), linear-gradient(transparent, #000 22%, #000 78%, transparent);
  mask-composite: intersect;
}
.ribbon-frame img,
.ribbon-frame video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.ribbon-film { opacity: 0; }
.ribbon-frame.is-ready .ribbon-film { opacity: 1; }
.ribbon-frame.is-ready .ribbon-poster { opacity: 0; }
body.reduced .ribbon-interlude { display: none; }
/* Keep the approach copy balanced beneath its separate ribbon transition. */
.approach { min-height: 0; padding: 110px 0 65px; }
.approach-copy { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(35px, 7vw, 100px); }
.approach-copy > .section-label { grid-column: 1; grid-row: 1; }
.approach-copy > h2 { grid-column: 1; grid-row: 2; margin-bottom: 0; }
.approach-body { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.approach-body .body-copy { max-width: 440px; }
.approach-values { margin-top: 50px; }
@media (max-width: 700px) {
  .ribbon-frame { width: min(104vw, 78svh); }
  .approach { padding: 75px 0 20px; }
  .approach-copy { display: block; }
  .approach-copy > h2 { margin-bottom: 26px; }
  .approach-values { margin-top: 35px; }
}