/* One background square rests in a clear lane at the start of each section. */
.flow-diamond-dock {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: clamp(120px, 10.5vw, 154px);
  margin-block: 0 22px;
  grid-column: 1 / -1;
  pointer-events: none;
  user-select: none;
}

/* A measurement anchor for the original position; it reserves no layout space. */
.flow-diamond-home {
  position: absolute;
  display: block;
  top: 90px;
  right: clamp(28px, 3.5vw, 84px);
  inline-size: clamp(64px, 6vw, 104px);
  block-size: clamp(64px, 6vw, 104px);
  margin: 0;
  pointer-events: none;
}

/* Full-width lanes inside a grid use its gap instead of doubling the spacing. */
.about-layout > .flow-diamond-dock,
.capabilities-layout > .flow-diamond-dock { margin-block-end: 0; }
.about-layout:has(> .flow-diamond-dock),
.capabilities-layout:has(> .flow-diamond-dock) { row-gap: 24px; }

.flow-journey-active { position: relative; isolation: isolate; }

/* Keep section backgrounds below the square and all content above it and the trails. */
.flow-journey-active .flow-intro { isolation: auto; z-index: auto; }
.flow-journey-active .work-reel-home { isolation: auto; }
.flow-journey-active .flow-screen,
.flow-journey-active .hero > .eyebrow,
.flow-journey-active .hero-copy,
.flow-journey-active .hero-art,
.flow-journey-active .hero-bottom,
.flow-journey-active .purpose-inner,
.flow-journey-active .services-showcase > .container,
.flow-journey-active .section-head,
.flow-journey-active .selected-grid,
.flow-journey-active .work-reel-top,
.flow-journey-active .work-reel-stage,
.flow-journey-active .work-reel-bottom,
.flow-journey-active .work-reel-footnote,
.flow-journey-active .about-layout,
.flow-journey-active .capabilities-intro,
.flow-journey-active .service-list,
.flow-journey-active .contact-top,
.flow-journey-active .contact-heading,
.flow-journey-active .contact-cards,
.flow-journey-active .footer-top,
.flow-journey-active .footer-bottom {
  position: relative;
  z-index: 2;
}

.flow-trail-layer {
  position: absolute;
  top: 0;
  left: 0;
  inline-size: 100%;
  block-size: 0;
  overflow: visible;
  z-index: 1;
  pointer-events: none;
}

.flow-journey-layer {
  position: absolute;
  top: 0;
  left: 0;
  inline-size: 100%;
  block-size: 0;
  overflow: visible;
  z-index: 1;
  pointer-events: none;
}

/* Each bounded canvas remains as a static trace after its flight. */
.flow-flight-threads {
  position: absolute;
  display: block;
  opacity: 1;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.flight-thread {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.flight-thread-one { stroke: #9b00ff; stroke-width: 1; opacity: .62; }
.flight-thread-two { stroke: #00b5f4; stroke-width: 1; opacity: .4; }
.flight-thread-three { stroke: #cfc0ed; stroke-width: 1; opacity: .19; }
.flight-thread-four { stroke: #7e3caf; stroke-width: 1; opacity: .3; }

.flow-journey-layer > .flow-logo-square {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  inline-size: var(--flow-square-size, clamp(64px, 6vw, 104px));
  block-size: var(--flow-square-size, clamp(64px, 6vw, 104px));
  margin: 0;
  z-index: 1;
  transform-origin: center;
  pointer-events: none;
}

@media (max-width: 760px) {
  .flow-diamond-dock:not(.flow-diamond-home) { block-size: 104px; margin-block: 0 20px; }
  .about-layout > .flow-diamond-dock,
  .capabilities-layout > .flow-diamond-dock { margin-block-end: 0; }
  .about-layout:has(> .flow-diamond-dock),
  .capabilities-layout:has(> .flow-diamond-dock) { row-gap: 20px; }
}

@media (max-width: 540px) {
  .flow-diamond-dock:not(.flow-diamond-home) { block-size: 90px; margin-block: 0 16px; }
  .flow-diamond-home { top: 90px; right: 26px; inline-size: 40px; block-size: 40px; margin: 0; }
  .about-layout > .flow-diamond-dock,
  .capabilities-layout > .flow-diamond-dock { margin-block-end: 0; }
  .flow-journey-layer > .flow-logo-square {
    inline-size: var(--flow-square-size, 40px);
    block-size: var(--flow-square-size, 40px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-flight-threads, .flight-thread { animation: none !important; transition: none !important; }
  .flow-journey-layer > .flow-logo-square {
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}