/* Homepage edge accents; the centre belongs to the work and the copy. */
.home-page .flow-section {
  --blend-height: clamp(32px, 4vw, 56px);
  position: relative;
  isolation: isolate;
  border-top: 0;
  background: var(--journey-to);
}
.home-page .flow-section.flow-blend { padding-top: calc(var(--blend-height) + 3rem); }
.home-page #selected-work.flow-section { background: transparent; }
.home-page .flow-blend-frame {
  position: absolute; inset: 0 0 auto; z-index: -1;
  display: block; width: 100%; height: var(--blend-height);
  overflow: hidden; pointer-events: none;
  background: var(--journey-from);
}
.home-page .flow-blend-frame::after {
  content: ''; position: absolute; inset: 8px 0 -1px;
  border-radius: clamp(24px,4vw,56px) clamp(24px,4vw,56px) 0 0;
  background: var(--journey-to);
}
/* Each scene has its own route, not a shared left/right image treatment.
   Mesh glow is transparent; the artwork never captures input or covers cards. */
.home-page .flow-energy-frame {
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none; user-select: none;
}
.flow-energy-scene {
  position: absolute; left: 0; top: var(--energy-y);
  width: 100%; height: clamp(440px, 56.25vw, 850px);
  max-height: 100%; transform: translateY(-50%);
  contain: layout paint style;
}
.flow-energy-canvas, .flow-energy-fallback {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
}
.has-energy .flow-energy-fallback { visibility: hidden; }
/* Closing diagonal lives low in the composition, beneath the copy and form. */
.energy-finale { -webkit-mask-image: linear-gradient(180deg,transparent 5%,#000 40%,#000 94%,transparent); mask-image: linear-gradient(180deg,transparent 5%,#000 40%,#000 94%,transparent); }
.energy-finale .flow-energy-scene { height: 100%; max-height: none; }
/* Retire disconnected blobs and broad grey bands. */
.home-page .home-range.flow-section::before,
.home-page .home-range.flow-section::after,
.home-page .proc.flow-section::before,
.home-page .pricing.flow-section::before,
.home-page .flow-section > .why-glow,
.home-page .flow-section > .cta-glow { display: none; }
.home-page [data-home-motion="paused"] *,
.home-page [data-home-motion="paused"] *::before,
.home-page [data-home-motion="paused"] *::after { animation-play-state: paused !important; }
.home-page .field input, .home-page .field textarea { cursor: text; }
.home-page .field select { cursor: default; }
@media (max-width: 760px) {
  .energy-finale .flow-energy-scene { height: 520px; top: auto; bottom: -30px; transform: none; }
}