/* Rounded, naturally scrolling chapter changes. No fixed-position pinning. */
.section-flow {
  --flow-radius: clamp(32px, 4.8vw, 72px);
  position: relative;
  display: flow-root;
  isolation: isolate;
  overflow-x: clip;
}

.section-flow > .flow-section {
  position: relative;
  margin: 0;
  padding: 0;
  z-index: var(--flow-layer, 1);
}

.section-flow .flow-surface {
  position: relative;
  display: flow-root;
  width: 100%;
  background: var(--flow-background, var(--canvas, #f2f2f2));
  border-radius: var(--flow-radius) var(--flow-radius) 0 0;
  overflow: clip;
  transform-origin: bottom left;
}

.section-flow .flow-section--privacy {
  --flow-background: #000;
  --flow-hold: clamp(100px, 16svh, 192px);
}

.section-flow .flow-section--privacy > .flow-surface {
  padding-bottom: var(--flow-hold);
}

.section-flow .flow-section--evidence {
  --flow-background: #fff;
}

.section-flow .flow-section--services > .flow-surface {
  padding-bottom: clamp(64px, 7vw, 100px);
}

.section-flow .flow-section--audience > .flow-surface {
  padding-bottom: clamp(64px, 7vw, 100px);
}

.section-flow .flow-section--workflow > .flow-surface {
  border-radius: 0;
}

.section-flow .flow-section--workflow .workflow-section {
  padding-bottom: clamp(160px, 20svh, 240px);
}

/* Keep Privacy inside the full chapter flow until the following grey surface
   has covered it. Audience then scrolls directly into the grey workflow. */
.section-flow.flow-ready > .flow-section:not(:last-child):not(.flow-section--audience) {
  position: sticky;
  top: var(--flow-sticky-top, 0px);
}

.section-flow .flow-surface.is-flow-turning {
  will-change: transform;
}

@media (max-width: 600px) {
  .section-flow { --flow-radius: 32px; }
  .section-flow .flow-section--services > .flow-surface,
  .section-flow .flow-section--audience > .flow-surface {
    padding-bottom: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-flow.flow-ready > .flow-section:not(:last-child):not(.flow-section--audience) {
    position: relative;
    top: auto;
  }
  .section-flow .flow-surface {
    transform: none !important;
    will-change: auto !important;
  }
}