.flow{position:relative;aspect-ratio:1200/520;margin:0 0 clamp(40px,4vw,72px);border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
  background:radial-gradient(ellipse 60% 70% at 15% 0%,rgba(0,102,196,.32),transparent 70%),radial-gradient(ellipse 50% 60% at 85% 100%,rgba(17,106,248,.16),transparent 70%),#0B1A33;
  box-shadow:0 40px 90px -50px rgba(4,38,153,.55)}
.flow::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:radial-gradient(rgba(165,243,252,.16) 1px,transparent 1.2px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000,transparent);mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000,transparent)}
.flow__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.flow__svg--v{display:none}

.flow__route{fill:none;stroke:rgba(165,243,252,.22);stroke-width:2;stroke-dasharray:3 9;stroke-linecap:round}
.flow__track{fill:none;stroke:var(--cyan);stroke-width:2.5;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(31,188,237,.55))}
.flow__dots circle{fill:#0B1A33;stroke:rgba(165,243,252,.4);stroke-width:2;transition:fill .35s ease,stroke .35s ease}
.flow__dots circle.on{fill:var(--cyan);stroke:var(--cyan);filter:drop-shadow(0 0 8px rgba(31,188,237,.8))}


.flow__tanker,.flow__barge{fill:none;stroke:var(--soft);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.flow__tanker .hull,.flow__barge .hull{fill:rgba(11,26,51,.92);stroke:#fff;stroke-width:1.6}
.flow__tanker .bridge{fill:rgba(165,243,252,.18)}
.flow__ship{filter:drop-shadow(0 0 10px rgba(31,188,237,.35))}
.flow__barge{opacity:0;transition:opacity .6s ease}
.flow__barge.on{opacity:1}
.flow__hose{fill:none;stroke:var(--cyan);stroke-width:2;stroke-dasharray:4 5;opacity:0;transition:opacity .5s ease}
.flow__hose.on{opacity:1;animation:flow-hose .6s linear infinite}
@keyframes flow-hose{to{stroke-dashoffset:-18}}


.flow__cards{position:absolute;inset:0;pointer-events:none}
.flow__card{position:absolute;display:flex;flex-direction:column;gap:3px;min-width:150px;max-width:210px;padding:10px 14px;border-radius:10px;background:#fff;
  box-shadow:0 16px 40px -18px rgba(0,0,0,.6);font-family:var(--f-app,Inter,system-ui,sans-serif);opacity:0;transition:opacity .45s ease,transform .55s var(--ease)}
.flow__card span{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray);font-family:var(--f-mono)}
.flow__card b{font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums}
.flow__card--save{background:#E9F8F0}.flow__card--save b{color:#13804f;font-size:18px}
.flow__card[data-pos="above"]{transform:translate(-50%,calc(-100% - 10px))}
.flow__card[data-pos="below"]{transform:translate(-50%,10px)}
.flow__card[data-pos="right"]{transform:translate(14px,-50%)}
.flow__card[data-pos="above"].on{transform:translate(-50%,calc(-100% - 20px));opacity:1}
.flow__card[data-pos="below"].on{transform:translate(-50%,20px);opacity:1}
.flow__card[data-pos="right"].on{transform:translate(26px,-50%);opacity:1}

.flow__end{position:absolute;right:clamp(18px,2.4vw,36px);bottom:clamp(16px,2vw,30px);margin:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px;
  font-family:var(--f-head);font-size:clamp(1.3rem,1rem + 1vw,2rem);letter-spacing:-.02em;color:#fff;opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .7s var(--ease)}
.flow__end span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.flow__end.on{opacity:1;transform:none}
.flow__cap{position:absolute;left:clamp(18px,2.4vw,36px);bottom:clamp(16px,2vw,30px);margin:0;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(220,228,236,.45)}


@media (max-width:760px){
  .flow{aspect-ratio:360/1040}
  .flow__svg--h{display:none}.flow__svg--v{display:block}
  .flow__card{min-width:0;max-width:62%}
  .flow__card b{white-space:normal}
  .flow__end{right:auto;left:clamp(18px,5vw,28px);align-items:flex-start;bottom:44px}
  .flow__cap{bottom:18px}
}
@media (prefers-reduced-motion:reduce){.flow__hose.on{animation:none}}


html.anim-p .pillar .p-hide{opacity:0;transform:translateY(6px)}
html.anim-p .pillar .p-in{opacity:1;transform:none;transition:opacity .5s ease,transform .6s var(--ease)}
html.anim-p .pillar .market__port strong{font-variant-numeric:tabular-nums}
html.anim-p .pillar .thread__cmp strong{font-variant-numeric:tabular-nums}

html.anim-p .pillar .entry.p-rail .entry__out::before{transform:scaleY(0);transform-origin:50% 0;transition:transform 1.6s var(--ease)}
html.anim-p .pillar .entry.p-rail-on .entry__out::before{transform:scaleY(1)}
html.anim-p .pillar .entry__out li.p-row>span:last-child{opacity:0;transition:opacity .4s ease}
html.anim-p .pillar .entry__out li.p-row::before{transition:background-color .4s ease,box-shadow .4s ease}
html.anim-p .pillar .entry__out li.p-row-on>span:last-child{opacity:1}


.results__flow{margin-top:clamp(48px,4vw,72px)}
.flow--light{background:radial-gradient(ellipse 60% 70% at 12% 0%,rgba(31,188,237,.14),transparent 70%),radial-gradient(ellipse 50% 60% at 88% 100%,rgba(17,106,248,.10),transparent 70%),#F4F7FA;
  border:1px solid var(--cool);box-shadow:none;margin-bottom:0}
.flow--light::before{background-image:radial-gradient(rgba(15,23,40,.12) 1px,transparent 1.2px)}
.flow--light .flow__route{stroke:rgba(15,23,40,.18)}
.flow--light .flow__track{stroke:var(--blue);filter:none}
.flow--light .flow__dots circle{fill:#fff;stroke:rgba(17,106,248,.35)}
.flow--light .flow__dots circle.on{fill:var(--blue);stroke:var(--blue);filter:drop-shadow(0 0 6px rgba(17,106,248,.45))}
.flow--light .flow__tanker,.flow--light .flow__barge{stroke:var(--blue)}
.flow--light .flow__tanker .hull,.flow--light .flow__barge .hull{fill:#fff;stroke:var(--navy)}
.flow--light .flow__tanker .bridge{fill:rgba(17,106,248,.14)}
.flow--light .flow__ship{filter:drop-shadow(0 6px 10px rgba(4,38,153,.18))}
.flow--light .flow__hose{stroke:var(--cyan)}
.flow--light .flow__card{border:1px solid var(--cool);box-shadow:0 14px 30px -18px rgba(4,38,153,.35)}
.flow--light .flow__card--save{background:#E9F8F0;border-color:rgba(34,181,115,.3)}
.flow--light .flow__end{color:var(--text)}
.flow--light .flow__end span{color:var(--blue)}
.flow--light .flow__cap{color:var(--gray)}


.flowsec{position:relative;height:150vh;
  background:radial-gradient(ellipse 50% 60% at 10% 10%,rgba(31,188,237,.12),transparent 70%),radial-gradient(ellipse 50% 60% at 90% 90%,rgba(17,106,248,.10),transparent 70%),#F4F7FA;
  border-top:1px solid var(--cool);border-bottom:1px solid var(--cool)}
.flowsec__pin{position:sticky;top:75px;height:calc(100vh - 75px);height:calc(100svh - 75px);display:flex;align-items:center;overflow:hidden}
.flowsec__stage{width:min(100%,1760px);margin:0 auto;padding:0 clamp(12px,2.5vw,40px)}
.flow--strip{background:transparent;border:0;border-radius:0;box-shadow:none;margin:0;max-height:calc(100vh - 75px - 32px);max-height:calc(100svh - 75px - 32px);width:100%}
.flow--strip::before{-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000,transparent);mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000,transparent)}

.flow--strip .flow__card{transition:opacity .25s ease,transform .3s var(--ease)}
.flowsec.is-static{height:auto}
.flowsec.is-static .flowsec__pin{position:static;height:auto;padding:clamp(48px,6vw,96px) 0}
@media (max-width:760px){
  .flowsec{height:auto}
  .flowsec__pin{position:static;height:auto;padding:48px 0;display:block}
  .flow--strip{max-height:none}
}

.flowsec__stage{width:auto;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);flex:1}

.flowsec{height:auto}
.flowsec__pin{position:static;height:auto;display:block;padding:clamp(28px,3vw,48px) 0}
.flow--light.flow--strip{aspect-ratio:1200/400;max-height:none}
.flow--strip .flow__end{display:none}
@media (max-width:760px){.flow--light.flow--strip{aspect-ratio:360/1040}.flow--strip .flow__end{display:flex}}

.flowsec{height:calc(var(--strip-h,520px) + 60vh);background:transparent;border:0}
.flowsec__pin{position:sticky;top:var(--pin-top,75px);height:auto;display:block;padding:clamp(28px,3vw,48px) 0;
  background:radial-gradient(ellipse 50% 70% at 10% 10%,rgba(31,188,237,.12),transparent 70%),radial-gradient(ellipse 50% 70% at 90% 90%,rgba(17,106,248,.10),transparent 70%),#F4F7FA;
  border-top:1px solid var(--cool);border-bottom:1px solid var(--cool)}
.flowsec.is-static{height:auto}.flowsec.is-static .flowsec__pin{position:static}
@media (max-width:760px){.flowsec{height:auto}.flowsec__pin{position:static}}
.flowsec{background:#fff}

.flow--strip{overflow:visible}
.flow--strip .flow__cap{bottom:auto;top:100%;margin-top:6px;left:0}
@media (max-width:760px){.flow--strip .flow__cap{top:auto;bottom:18px;left:clamp(18px,5vw,28px)}}

.flowsec__pin{padding:clamp(56px,6vw,96px) 0}
@media (max-width:760px){.flowsec__pin{padding:48px 0}}

.flowsec{height:auto}
.flowsec__pin{position:static}

.flowsec{height:calc(var(--strip-h,577px) + var(--budget,80vh));background:#fff;position:relative;z-index:2}
.flowsec__pin{position:sticky;top:var(--pin-top,160px);z-index:2}
.flowsec + section{position:relative;z-index:1}
.flowsec.is-static{height:auto}.flowsec.is-static .flowsec__pin{position:static}
@media (max-width:760px){.flowsec{height:auto}.flowsec__pin{position:static}}

.flowsec{background:linear-gradient(#fff 0,#fff var(--strip-h,577px),transparent var(--strip-h,577px));pointer-events:none}
.flowsec__pin{pointer-events:auto}

.flowsec{background:transparent;overflow:clip}
.flowsec__pin{overflow-x:clip;overflow-y:visible}
.flowsec__pin::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:300vh;background:#fff;pointer-events:none}
@media (max-width:760px){.flowsec__pin::before{display:none}}