/* A shared sticky stage connects the dark opening to the white firm section. */
.opening-journey {
  --journey-height: max(700px, min(920px, 100svh));
  position: relative;
  isolation: isolate;
}
.journey-stage {
  position: sticky;
  top: 0;
  height: var(--journey-height);
  margin-bottom: calc(-1 * var(--journey-height));
  z-index: 1;
  pointer-events: none;
  overflow: clip;
}
.opening-journey .hero {
  height: var(--journey-height);
  min-height: 0;
  max-height: none;
  isolation: auto;
}
.opening-journey .hero-content,
.opening-journey .hero-bottom { z-index: 3; }
.opening-journey .firm { position: relative; }
.opening-journey .firm-grid,
.opening-journey .firm > .section-marker { position: relative; z-index: 3; }
.opening-journey .hero-art { translate: none; }
@media(max-width:1050px) {
  .opening-journey { --journey-height: max(650px, min(850px, 100svh)); }
}
@media(max-width:700px) {
  .opening-journey { --journey-height: max(790px, min(1040px, 100svh)); }
}
@media(max-width:380px) {
  .opening-journey { --journey-height: max(760px, min(1040px, 100svh)); }
}
/* A static composition stays within the hero when motion is disabled. */
.motion-paused .journey-stage { position: absolute; width: 100%; margin-bottom: 0; }
.opening-journey:has(canvas[data-renderer="canvas"]) .journey-stage {
  position: absolute; width: 100%; margin-bottom: 0;
}
.motion-paused .opening-journey { padding-top: 0; }
@media(prefers-reduced-motion:reduce) {
  .journey-stage { position: absolute; width: 100%; margin-bottom: 0; }
}