.trade-story{--story-header:100px;height:1050svh;position:relative;background:#062b3d;scroll-margin-top:0}
.trade-stage{height:calc(100svh - var(--story-header));min-height:570px;position:sticky;top:var(--story-header);overflow:hidden;color:#fff;isolation:isolate;background:#062b3d}
.trade-visual{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#062b3d}
#trade-canvas,#ocean-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}#ocean-canvas{background:#073e55}#trade-canvas{z-index:1}
.cinema-shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,#00141990,transparent 64%),linear-gradient(0deg,#000f16e0,transparent 34%,transparent 65%,#000f1640);transition:opacity .6s}
.trade-stage-top{position:absolute;top:28px;left:4.5%;right:4.5%;display:flex;justify-content:space-between;align-items:center;z-index:5}.trade-stage-top .eyebrow{margin:0;font-size:12px;letter-spacing:1.5px}.trade-stage-top .index{color:inherit;opacity:.8;margin-right:25px}.trade-skip{font-size:13px;border-bottom:1px solid #ffffff60;padding-bottom:5px}.trade-skip span{margin-left:12px}
.trade-heading{position:absolute;inset:0;z-index:4;pointer-events:none}.trade-heading>div:first-child{position:absolute;top:100px;left:4.5%;max-width:600px;width:45%}.trade-heading .eyebrow{font-size:12px;letter-spacing:2px;color:#e3d1a5;margin-bottom:20px}.trade-heading h2{font:500 clamp(42px,4.5vw,78px)/1.06 Manrope,sans-serif;letter-spacing:-3px;margin:0;text-wrap:balance}.trade-heading h2 span{font-family:Georgia,serif;font-style:italic;font-weight:400;color:#e8ddbb;letter-spacing:-2px}
.trade-narrative{position:absolute;left:4.5%;bottom:176px;width:300px;max-width:30%}.trade-narrative>p:first-child{font-size:16px;line-height:1.6;color:#ebf1ee;margin:0 0 20px}.trade-role{margin:0;border-top:1px solid #ffffff50;padding-top:15px}.trade-role>span{display:block;font-size:11px;letter-spacing:1.6px;color:#dcd4b5;margin-bottom:6px}.trade-role strong{font-size:14px;font-weight:500;line-height:1.6}
.trade-controls{position:absolute;bottom:0;left:4.5%;right:4.5%;z-index:6}.trade-shipment{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:12px 0 17px;min-height:60px}.trade-shipment>strong{font-size:14px;font-weight:500;letter-spacing:.1px}.cinema-buttons{display:flex;gap:10px;align-items:center}.cinema-buttons button{background:#ffffff09;border:1px solid #ffffff60;color:inherit;padding:9px 15px;border-radius:40px;font-size:13px;white-space:nowrap;backdrop-filter:blur(12px)}.cinema-buttons button:hover{background:#ffffff20}
.trade-progress{height:1px;background:#ffffff40}.trade-progress i{height:2px;display:block;width:0;background:#e6c579;transform-origin:left;will-change:width}.trade-chapters{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;padding-top:16px}.trade-chapters button{background:none;color:inherit;opacity:.58;padding:0;text-align:left;font-size:14px;line-height:1.4;transition:opacity .3s}.trade-chapters button span{font-size:12px;margin-right:13px;opacity:.65}.trade-chapters button[aria-current],.trade-chapters button:hover{opacity:1}.trade-control-foot{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:14px 0 18px;font-size:11px;opacity:.72}.trade-scroll-hint{letter-spacing:1.3px}.trade-scroll-hint span{margin-left:20px}.trade-disclaimer{text-align:right}
.trade-document,.trade-delivery{position:absolute;right:8%;top:22%;width:300px;color:#143d30;background:#f5f4ebed;border:1px solid #fff9;padding:28px;z-index:4;opacity:0;visibility:hidden;pointer-events:none;box-shadow:0 35px 70px #001a2426;backdrop-filter:blur(8px)}.document-kicker{display:block;font-size:12px;letter-spacing:1.3px;color:#5a745c;margin-bottom:20px}.trade-document>strong,.trade-delivery>strong{display:block;font:500 34px/1.08 Manrope,sans-serif;letter-spacing:-1.2px;margin-bottom:24px}.trade-document>div{display:flex;justify-content:space-between;border-top:1px solid #aabdac;padding:13px 0;font-size:14px}.trade-document b{color:#518057}.trade-document small{font-size:12px;color:#728370}.trade-delivery{display:none}
.trade-loading{position:absolute;inset:0;z-index:5;display:grid;place-content:center;color:white;background:#0c312b;font-size:16px}.trade-ready .trade-loading{display:none}
.trade-stage[data-scene="port"],.trade-stage[data-scene="buyer"]{color:#13372e}.trade-stage[data-scene="port"] .cinema-shade,.trade-stage[data-scene="buyer"] .cinema-shade{opacity:0}.trade-stage[data-scene="port"] .trade-heading h2 span,.trade-stage[data-scene="buyer"] .trade-heading h2 span{color:#6e805d}.trade-stage[data-scene="port"] .trade-heading .eyebrow,.trade-stage[data-scene="buyer"] .trade-heading .eyebrow{color:#617455}.trade-stage[data-scene="port"] .trade-narrative,.trade-stage[data-scene="buyer"] .trade-narrative{left:auto;right:4.5%;top:105px;bottom:auto;width:275px}.trade-stage[data-scene="port"] .trade-narrative p,.trade-stage[data-scene="buyer"] .trade-narrative p{color:#48644f}.trade-stage[data-scene="port"] .trade-role>span,.trade-stage[data-scene="buyer"] .trade-role>span{color:#627956}.trade-stage[data-scene="port"] .trade-role,.trade-stage[data-scene="buyer"] .trade-role{border-color:#53754b40}.trade-stage[data-scene="port"] .trade-controls,.trade-stage[data-scene="buyer"] .trade-controls{background:linear-gradient(0deg,#f5f4ed 60%,#f5f4ed00)}.trade-stage[data-scene="port"] button,.trade-stage[data-scene="buyer"] button{border-color:#456f5b55}.trade-stage[data-scene="port"] .trade-progress,.trade-stage[data-scene="buyer"] .trade-progress{background:#234b3440}
.trade-stage[data-scene="ocean"] .cinema-shade{background:linear-gradient(90deg,#000f3250,transparent 48%),linear-gradient(0deg,#000d1bde,transparent 27%,transparent 70%,#000f2940)}
.trade-static{height:auto}.trade-static .trade-stage{position:relative;top:0}.trade-static #trade-play{display:none}.trade-static .trade-scroll-hint{font-size:0}.trade-static .trade-scroll-hint:before{content:'CHOOSE A STAGE TO EXPLORE';font-size:11px}.trade-nojs{position:relative;background:#f5f4ed;color:#123d30;padding:50px}.trade-nojs li{margin:15px 0}
@media(max-height:780px) and (min-width:901px){.trade-heading>div:first-child{top:80px}.trade-heading h2{font-size:52px}.trade-narrative{bottom:165px;width:270px}.trade-narrative>p:first-child{font-size:15px;margin-bottom:12px}.trade-role{padding-top:10px}.trade-heading .eyebrow{margin-bottom:12px}.trade-document{top:16%;padding:24px}}
@media(max-width:900px){.trade-story{--story-header:85px}.trade-heading>div:first-child{width:55%;top:92px}.trade-heading h2{font-size:clamp(35px,5.5vw,54px);letter-spacing:-2px}.trade-narrative{max-width:38%;width:275px;bottom:175px}.trade-narrative>p:first-child{font-size:15px}.trade-document{right:5%;width:250px}.trade-chapters{gap:12px}.trade-chapters button{font-size:12px}.trade-chapters button span{display:block;margin-bottom:5px}.trade-stage[data-scene="port"] .trade-narrative,.trade-stage[data-scene="buyer"] .trade-narrative{width:235px;max-width:32%}.trade-stage-top .index{font-size:11px;margin-right:15px}}
@media(max-width:600px){.trade-story{--story-header:80px;height:950svh}.trade-stage{min-height:570px}.trade-stage-top{top:20px;left:6%;right:6%}.trade-stage-top .eyebrow{font-size:10px;letter-spacing:.8px}.trade-stage-top .index{font-size:9px;margin-right:10px}.trade-skip{font-size:11px}.trade-skip span{display:none}.trade-heading>div:first-child{top:65px;left:6%;width:80%;max-width:370px}.trade-heading h2{font-size:clamp(30px,8.6vw,43px);line-height:1.03;letter-spacing:-1.5px}.trade-heading h2 span{letter-spacing:-1px}.trade-heading .eyebrow{font-size:10px;margin-bottom:12px}.trade-narrative{left:6%;bottom:179px;width:82%;max-width:none}.trade-narrative>p:first-child{font-size:14px;line-height:1.5;max-width:330px;margin-bottom:10px}.trade-role{display:none}.trade-controls{left:6%;right:6%}.trade-shipment{display:block;padding:10px 0;min-height:70px}.trade-shipment>strong{display:block;font-size:12px;margin-bottom:9px}.cinema-buttons{justify-content:space-between}.cinema-buttons button{font-size:12px;padding:7px 12px}.trade-chapters{gap:8px;padding-top:11px}.trade-chapters button{font-size:11px}.trade-chapters button span{font-size:10px;margin-bottom:3px}.trade-control-foot{padding:12px 0 14px;font-size:9px;gap:8px;line-height:1.5}.trade-scroll-hint{letter-spacing:.5px;max-width:100px}.trade-scroll-hint span{margin-left:3px}.trade-disclaimer{max-width:175px}.trade-document{top:38%;right:6%;width:200px;padding:17px}.trade-document>strong{font-size:25px;margin-bottom:14px}.document-kicker{font-size:10px;margin-bottom:13px}.trade-document>div{font-size:12px;padding:9px 0}.trade-document small{font-size:10px}.trade-stage[data-scene="port"] .trade-narrative,.trade-stage[data-scene="buyer"] .trade-narrative{left:6%;right:auto;top:auto;bottom:179px;width:86%;max-width:none}.trade-static{height:auto}.trade-static .trade-stage{min-height:710px}.trade-static .trade-scroll-hint:before{font-size:9px}}
@media(prefers-reduced-motion:reduce){.trade-story{height:auto}.trade-stage{position:relative;top:0}}
@media(max-width:600px){.trade-stage[data-scene="verify"] .trade-narrative,.trade-stage[data-scene="port"] .trade-narrative,.trade-stage[data-scene="buyer"] .trade-narrative{display:none}.trade-document{top:35%}.trade-stage[data-scene="ocean"] .trade-narrative{max-width:280px}}
.trade-stage:is([data-scene="port"],[data-scene="buyer"]) .trade-heading>div:first-child{top:78px;width:48%}
.trade-stage:is([data-scene="port"],[data-scene="buyer"]) .trade-heading h2{font-size:clamp(34px,3.5vw,54px);line-height:1.07;letter-spacing:-1.8px}
.trade-stage:is([data-scene="port"],[data-scene="buyer"]) .trade-heading .eyebrow{margin-bottom:13px}
.trade-stage:is([data-scene="port"],[data-scene="buyer"]) .trade-narrative{top:80px;max-width:34%;width:355px}
.trade-stage:is([data-scene="port"],[data-scene="buyer"]) .trade-narrative>p:first-child{font-size:15px;line-height:1.55;margin-bottom:12px}
.trade-stage:is([data-scene="port"],[data-scene="buyer"]) .trade-role{padding-top:10px}
.trade-stage:is([data-scene="port"],[data-scene="buyer"]) .trade-controls{color:#fff;background:linear-gradient(0deg,#0b2032f5,#0b2032df 68%,#0b203280);left:0;right:0;padding:0 4.5%}
.trade-stage:is([data-scene="port"],[data-scene="buyer"]) .trade-controls button{color:white;border-color:#ffffff70}.trade-stage:is([data-scene="port"],[data-scene="buyer"]) .trade-progress{background:#ffffff50}
@media(max-width:600px){.trade-stage:is([data-scene="port"],[data-scene="buyer"]) .trade-heading>div:first-child{top:64px;width:88%}.trade-stage:is([data-scene="port"],[data-scene="buyer"]) .trade-heading h2{font-size:34px}.trade-stage:is([data-scene="port"],[data-scene="buyer"]) .trade-controls{padding:0 6%}}