/* ============================================================
   FRAME V2 — hero-flow.css
   The hero as one connected journey on a panning track:
     [ institution ] --> [ Frame orchestration layer ] --> [ endpoints ]
   A spine line runs through all three; value pulses flow left to
   right along it while the camera pans stage to stage (hero-flow.js).
   Light hero; desktop-only (.hero__visual hidden < 920px).
   Default (no JS / reduced motion) shows the Frame layer (stage 2).
   ============================================================ */

/* the v1 hero set margin-left:auto, which makes this grid item size to
   content; the diagram has none, so stretch it to fill the track. */
.hero__visual { max-width: none; margin-left: 0; width: 100%; min-width: 0; }

.oflow {
  position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  font-family: var(--font-condensed);
}

/* the track holds three stages side by side and is panned by hero-flow.js.
   Default position centres stage 2 (the layer) for the no-JS fallback. */
.otrack { position: absolute; top: 0; left: 0; height: 100%; width: 300%; display: flex; transform: translateX(-33.3333%); }
.oslot { position: relative; z-index: 2; width: 33.3333%; height: 100%; display: flex; align-items: center; justify-content: center; }

/* the connecting spine */
.ospine { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
.ospine .sbase { fill: none; stroke: rgba(15, 76, 129, .3); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ospine .sflow { fill: none; stroke: var(--frame-deepwater); stroke-width: 2.6; vector-effect: non-scaling-stroke; stroke-linecap: round; opacity: 0; }

/* ---------- STAGE 1 · the institution ---------- */
.osrc {
  width: 62%; display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 11% 9%;
  background: var(--frame-white); border: 1px solid var(--frame-scaffold);
  box-shadow: 0 30px 70px rgba(15, 76, 129, .16);
}
.osrc__ico { width: 60px; height: 60px; display: grid; place-items: center; margin-bottom: 4px; background: rgba(15, 76, 129, .08); color: var(--frame-deepwater); border-radius: 50%; }
.osrc__ico .material-symbols-sharp { font-size: 32px; }
.osrc__name { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(1.3rem, 2.2vw, 1.85rem); color: var(--frame-ironworks); line-height: 1; text-align: center; }
.osrc__sub { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--frame-foundry); }

/* ---------- STAGE 2 · the orchestration layer ---------- */
.olayer {
  width: 70%; display: flex; flex-direction: column;
  background: var(--frame-white); border: 1.5px solid var(--frame-deepwater);
  box-shadow: 0 30px 70px rgba(15, 76, 129, .18); padding: 7% 7% 6%;
}
.olayer__head { padding-bottom: 6%; border-bottom: 1px solid var(--frame-scaffold); margin-bottom: 7%; display: flex; flex-direction: column; gap: 9px; }
.olayer__logo { color: var(--frame-deepwater); }
.olayer__logo svg { height: clamp(20px, 2.2vw, 28px); width: auto; display: block; }
.olayer__sub { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--frame-conduit); }
.olayer__rows { display: flex; flex-direction: column; gap: 11px; }
.orow { position: relative; padding: 11px 13px 11px 17px; background: var(--frame-clearspan); border: 1px solid var(--frame-scaffold); display: flex; flex-direction: column; gap: 3px; }
.orow::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--frame-deepwater); }
.orow__h { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(.95rem, 1.4vw, 1.2rem); color: var(--frame-ironworks); line-height: 1; }
.orow__d { font-size: 12px; letter-spacing: .01em; color: var(--frame-foundry); }
.olayer__foot { margin-top: 7%; font-size: 10.5px; font-style: italic; color: var(--frame-foundry); }

/* ---------- STAGE 3 · every endpoint ---------- */
.oout { position: absolute; inset: 0; }
.ogrp { position: absolute; left: 28%; right: 4%; transform: translateY(-50%); }
.ogrp[data-grp="0"] { top: 18%; }
.ogrp[data-grp="1"] { top: 50%; }
.ogrp[data-grp="2"] { top: 82%; }
.ogrp__h { font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--frame-foundry); margin-bottom: 10px; }
.ogrp__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ogrp__chips span {
  font-family: var(--font-condensed); font-weight: 600; font-size: 11.5px; letter-spacing: .01em;
  color: var(--frame-deepwater); background: var(--frame-white);
  border: 1px solid var(--frame-scaffold); padding: 6px 9px; white-space: nowrap;
}