/* CoFlo flow animation · v1.4
   Each .coflo-flow element becomes one needle stage: two static SVG layers with a canvas between them,
   plus an optional callout (data-callout) that tracks one moving element. Everything is positioned by coflo-flow.js.

   Tokens: uses the site's --ink, --font and --u when present, with fallbacks so the module also
   works on a bare page. */

.coflo-flow {
  position: relative;
  width: 100%;
  aspect-ratio: 2470 / 660;              /* matches the module's viewBox (VB.w / VB.h); do not change */
  height: auto;
  min-width: 0;                          /* never let the stage widen a grid/flex track */
  align-self: start;                     /* a stretched grid row must not drive the width via aspect-ratio */
}

/* Band above the needle for the callout text, only on stages that have one. The script sets
   --coflo-callout-space on each such stage from its rendered text height (≈37px at 1920px wide). */
.coflo-flow[data-callout] { margin-top: var(--coflo-callout-space, 0px); }

/* Layers. The selectors are specific enough to beat site rules such as
   `.intro__visual img { object-fit: cover }` and `img, svg { max-width: 100% }`. */
.coflo-flow > .coflo-flow__layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
}

/* Callout: leader line + arrow + one line of text, translated every frame to follow the tracked particle. */
.coflo-flow > .coflo-flow__callout {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  opacity: 0;                              /* the script fades it in */
  pointer-events: none;
  will-change: transform, opacity;
}
.coflo-flow__callout svg {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 1px;
  height: 1px;
  max-width: none;                         /* the site's global `svg { max-width: 100% }` would collapse it to 0 */
  overflow: visible;
}
.coflo-flow__callout path {
  stroke: var(--ink, #0E0D19);
  stroke-width: 1.5;
}
.coflo-flow__callout-text {
  position: absolute;
  margin: 0;
  width: max-content;
  white-space: nowrap;                     /* the script sizes all callouts together to keep one line; wraps only on phones */
  transform: translateY(-100%);
  font-family: var(--font, "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  font-weight: 300;                        /* brand body weight: Inter Tight Light (brand weights are Light, Medium, Bold) */
  font-size: max(13px, calc(18 * var(--u, calc(min(100vw, 1920px) / 1920))));
  line-height: 1.3;
  color: var(--ink, #0E0D19);
}