/* Brand loops and animated flows (D-49). Script: brand-motion.js.
   Loops take the box of the still artwork they replace. A flow shows from
   1280px wide, where its 20px step labels (1920 artboard) stay readable; below
   that its caption stands alone, at body size. The step list under each flow is
   the text version of the diagram: screen readers read it, and it is not shown
   (Guy, 2026-10-29). */
.fv-site .bm-art > img, .fv-site .bm-host{ display:block; width:100%; height:auto; }
.fv-site .bm-art.bm-on{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
.fv-site .bm-art.bm-on:focus{ outline:none; }
.fv-site .bm-art.bm-on:focus-visible{ box-shadow:0 0 0 3px rgba(255,23,23,.12); outline:3px solid var(--red-deep); outline-offset:3px; }

/* The figure-8 is 300px wide (.red-stack); the loop's viewBox adds 300 units
   round it (3001 wide for a 2401 shape), so the box is 375px for the same 300px shape. */
.fv-site .bm-loop-eight{ width:100%; max-width:375px; margin-inline:auto; }
/* Home, "The new playbook is live" (Guy's pin, 2026-10-30: "use one of the new
   brand animations"; Freya's pick, eight-drift-loop, in place of the flower
   loop). The loop's viewBox adds 300 units round the 2401-unit figure-8, so
   the box is 125% of the band's figure box, with the margin taken back on
   every side: the figure-8 keeps the size and place the still one had. The
   still figure-8's breathing pulse (ds.css) is off, so the swap to the inline
   copy never jumps a size. */
.fv-site .ds-eight .bm-loop-eight{ width:125%; max-width:none; margin:-12.5%; }
.fv-site .ds-eight .bm-art > img{ animation:none; }
/* The circle fan opens to a full circle: a square box the height the fan had. */
.fv-site .bm-loop-fan{ width:100%; max-width:320px; margin:0 0 var(--space-block); }
.fv-site .hs-on .bm-loop-fan{ margin:0; max-width:min(100%, calc(100svh - var(--nav-h) - 300px)); justify-self:start; }
.fv-site .bm-loop-petal{ width:100%; max-width:320px; margin-inline:auto; }

.fv-site .bm-flow{ margin:0; position:relative; }
.fv-site .bm-flow > .bm-art{ display:none; }
/* The flow's pause button (added by the script). Guy, 2026-10-29: no pause
   buttons on show. A click on the flow still pauses it, and the button stays
   for the keyboard: it appears only while it has keyboard focus (WCAG 2.2.2). */
.fv-site .bm-flow > .bm-pause{ display:none; }
@media (min-width:1280px){
  .fv-site .bm-flow > .bm-art{ display:block; margin:0 0 var(--space-3); }
  .fv-site .bm-flow > .bm-pause{ display:inline-flex; margin:0 0 var(--space-3); }
  .fv-site .bm-flow > .bm-pause:not(:focus-visible){ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  /* where the flow shows, its caption is a small footnote under it (Guy, 2026-10-29) */
  .fv-site .bm-flow figcaption .body{ font-size:.85rem; line-height:1.5; color:var(--muted-2); }
}
.fv-site .bm-flow figcaption{ max-width:72ch; }
.fv-site .bm-flow figcaption .body{ text-wrap:pretty; }
.fv-site .bm-steps{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; list-style:none; }