/* Background joins only: preserve the homepage's content and section spacing. */
.home .section-flow {
  --flow-color: var(--white, #fff);
  --flow-height: clamp(44px, 5.5vw, 78px);
  --flow-direction: 1;
  --flow-scale: .84;
  --flow-contour-scale: 1;
  --flow-contour-opacity: .42;
  position: relative;
  isolation: isolate;
  overflow: visible;
  background-color: var(--flow-color);
}

.home .section-flow.sec-cream,
.home .section-flow.cta { --flow-color: var(--cream, #f0e9e3); }
.home .section-flow.sec-gray { --flow-color: var(--bg, #f7f7f5); }
.home .section-flow.why { --flow-color: var(--black, #0a0a0a); }
.home .section-flow:nth-of-type(even) { --flow-direction: -1; }

/* Distinct, locally deformable contours; masks remain the no-JS fallback. */
.home .section-flow > .section-flow-art {
  position: absolute;
  z-index: -1;
  inset-inline: 0;
  bottom: calc(100% - 1px);
  width: 100%;
  height: var(--flow-height);
  overflow: hidden;
  pointer-events: none;
  fill: var(--flow-color);
}
.home .section-flow[data-flow-ready]::before,
.home .section-flow[data-flow-ready]::after { content: none; }
.home .section-flow[data-flow-kind="sweep"] { --flow-height: clamp(48px, 6vw, 86px); }
.home .section-flow[data-flow-kind="arch"] { --flow-height: clamp(44px, 5vw, 72px); }
.home .section-flow[data-flow-kind="ripple"] { --flow-height: clamp(48px, 6.2vw, 88px); }

/* The solid wave meets the next background exactly; the translucent copy
   supplies the soft contour. Masks keep both layers decorative and responsive. */
@supports (mask-image: url('../section-wave.svg')) or (-webkit-mask-image: url('../section-wave.svg')) {
  .home .section-flow::before,
  .home .section-flow::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset-inline: 0;
    bottom: calc(100% - 1px);
    height: var(--flow-height);
    background: var(--flow-color);
    pointer-events: none;
    transform-origin: center bottom;
    -webkit-mask: url('../section-wave.svg') center / 100% 100% no-repeat;
    mask: url('../section-wave.svg') center / 100% 100% no-repeat;
  }

  .home .section-flow::before {
    opacity: var(--flow-contour-opacity);
    transform: scale(var(--flow-direction), var(--flow-contour-scale));
  }

  .home .section-flow::after {
    transform: scale(var(--flow-direction), var(--flow-scale));
  }
}

@media (max-width: 720px) {
  .home .section-flow,
  .home .section-flow[data-flow-kind] { --flow-height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .home .section-flow::before { opacity: .42; transform: scale(var(--flow-direction), 1); }
  .home .section-flow::after { transform: scale(var(--flow-direction), .84); }
}

@media print {
  .home .section-flow > .section-flow-art,
  .home .section-flow::before,
  .home .section-flow::after { display: none; }
}