/* Independent layers let entry, scroll depth and pointer feedback coexist. */
.home-hero .hero-piece-drift { display: block; padding-block: 18px; mix-blend-mode: multiply; }
.home-hero .hero-piece-entry { display: block; transform-origin: center center; }
/* Blend the complete moving layer with the stage, including while its inner
   entry transform creates a stacking context. Focus keeps the same backdrop. */
.home-hero .hero-piece-entry img { display: block; mix-blend-mode: normal; }
.home-hero [data-hero-opening] { transform-origin: left center; }
/* A short guide bridges the existing white/navy boundary without adding a gap. */
.client-band[data-client-handoff] { position: relative; }
.client-transition-line {
  position: absolute;
  z-index: 1;
  top: -18px;
  left: max(var(--gutter, 24px), calc((100% - var(--container, 1280px)) / 2));
  width: 2px;
  height: 36px;
  background: var(--accent);
  transform-origin: top center;
  pointer-events: none;
}
/* Reserve the whole arrival travel inside the native scroll viewport. The
   transformed strip cannot be clipped vertically and its hit area stays still. */
.client-band[data-client-handoff] .client-carousel { padding-block: 12px; }
/* The same guide leaves the client band and introduces the plant scene. */
.client-scene-guide { display: none; }
.client-band + [data-client-scene] { position: relative; }
.client-band + [data-client-scene] .client-scene-guide {
  display: block;
  position: absolute;
  z-index: 1;
  top: -18px;
  left: max(var(--gutter, 24px), calc((100% - var(--container, 1280px)) / 2));
  width: 2px;
  height: 50px;
  background: var(--accent);
  transform-origin: top center;
  pointer-events: none;
}
/* Continue below the chapter navigation, within the existing heading padding. */
[data-capabilities-handoff] { position: relative; }
.capabilities-transition-guide {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 34px;
  background: var(--accent);
  transform-origin: top center;
  pointer-events: none;
}
@media (max-width: 767px) {
  .home-hero .hero-piece-drift { padding-block: 12px; }
  .client-band[data-client-handoff] .client-carousel { padding-block: 8px; }
  .client-band + [data-client-scene] .client-scene-guide { top: -16px; height: 44px; }
  .capabilities-transition-guide { height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero .hero-piece-drift,
  .home-hero .hero-piece-entry,
  .home-hero [data-hero-opening],
  [data-client-arrival-title],
  [data-client-handoff] [data-client-track],
  .client-transition-line,
  [data-client-scene-heading],
  [data-client-scene-media],
  .client-scene-guide,
  .capabilities-transition-guide,
  [data-capabilities-heading],
  [data-capability-arrival-copy],
  [data-capability-arrival-image] { transform: none !important; }
}
@media print {
  .home-hero .hero-piece-drift,
  .home-hero .hero-piece-entry,
  .home-hero [data-hero-opening],
  [data-client-arrival-title],
  [data-client-handoff] [data-client-track],
  [data-client-scene-heading],
  [data-client-scene-media],
  [data-capabilities-heading],
  [data-capability-arrival-copy],
  [data-capability-arrival-image] { transform: none !important; }
  .client-transition-line,
  .client-band + [data-client-scene] .client-scene-guide,
  .capabilities-transition-guide { display: none; }
  .client-band[data-client-handoff] .client-carousel { padding-block: 0; }
}