/* Six connected chapters. Native scrolling, transparent artwork and a shared stage. */
#ecosystem.ecosystem-story {
  --eco-blue:#0080FF; --eco-accent:#0080FF; --eco-muted:#E5E5E5;
  --eco-head:80px; --eco-nav:83px;
  position:relative; isolation:isolate; color:#f3f7fc;
  background:#06111e; padding-bottom:0;
  background-image:radial-gradient(ellipse at 0 0,rgba(12,78,134,.32),transparent 32%),linear-gradient(115deg,#06111e,#07121f 55%,#030b13);
  border-top:1px solid #213449;
}
.ecosystem-story > .wrap { max-width:1900px; }
.eco-story-intro { display:flex; justify-content:space-between; align-items:end; gap:48px; padding-bottom:52px; }
.eco-overline { font-family:var(--label); color:var(--eco-accent); text-transform:uppercase; letter-spacing:.2em; font-size:13px; margin-bottom:20px; }
.eco-story-intro h2 { font-family:var(--display); font-size:clamp(30px,3.3vw,55px); line-height:1.22; letter-spacing:-.03em; color:#fff; }
.eco-story-intro h2 span { color:var(--eco-blue); }
.eco-intro-note { padding-bottom:7px; flex-shrink:0; }
.eco-intro-note p { color:#E5E5E5; font-size:20px; line-height:1.5; }
.eco-intro-note a { display:flex; align-items:center; gap:18px; color:#fff; font-size:13px; padding:20px 0 8px; }
.eco-intro-note > span { color:var(--eco-muted); font-size:12px; }
.eco-intro-note a:hover { color:var(--eco-blue); }
.eco-chapters { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); position:sticky; top:var(--eco-head); z-index:20; border:1px solid #2c4259; border-radius:13px; background:rgba(7,20,34,.96); backdrop-filter:blur(18px); box-shadow:0 12px 30px #02081033; }
.eco-chapter-link { display:flex; position:relative; align-items:center; justify-content:center; flex-direction:column; min-height:82px; gap:7px; padding:13px 10px; color:#E5E5E5; font-size:13px; line-height:1.2; transition:color .25s,background .25s; text-align:center; border-radius:12px; }
.eco-chapter-link + .eco-chapter-link:before { content:''; position:absolute; top:25%; bottom:25%; left:0; width:1px; background:#284057; }
.eco-chapter-link:after { content:''; position:absolute; bottom:0; left:20%; right:20%; height:2px; background:var(--eco-blue); transform:scaleX(0); transition:transform .35s ease; }
.eco-chapter-link .mi { font-size:22px; }
.eco-chapter-link:hover { color:#fff; background:#132940; }
.eco-chapter-link[aria-current] { color:#fff; background:linear-gradient(180deg,#113a5a,#0b243b); }
.eco-chapter-link[aria-current] .mi { color:var(--eco-blue); }
.eco-chapter-link[aria-current]:after { transform:scaleX(1); }
.eco-nav-number { position:absolute; top:12px; right:12px; font-family:var(--label); color:#E5E5E5; font-size:10px; letter-spacing:.07em; }
.ecosystem-story :focus-visible { outline-color:#0080FF; outline-offset:5px; }
.eco-story-layout { position:relative; display:grid; grid-template-columns:minmax(0,1.22fr) minmax(0,1fr); gap:clamp(28px,5vw,88px); align-items:start; }
.eco-visual { display:none; }
.eco-scenes { min-width:0; }
.eco-scene { position:relative; padding:70px 0; scroll-margin-top:calc(var(--eco-head) + var(--eco-nav) + 30px); border-bottom:1px solid #283b50; }
.eco-scene:last-child { border:0; }
.eco-scene-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:23px; }
.eco-scene-icon { display:flex; align-items:center; justify-content:center; width:52px; height:52px; border:1px solid #386386; border-radius:15px; background:#0a2740; color:#0080FF; }
.eco-scene-icon .mi { font-size:27px; }
.eco-step-label { color:#E5E5E5; font:16px/1 var(--label); letter-spacing:.2em; }
.eco-step-label span { color:#E5E5E5; margin-left:8px; }
.eco-scene h3 { color:#fff; font-family:var(--display); font-size:clamp(28px,2.7vw,43px); line-height:1.2; letter-spacing:-.025em; max-width:18ch; }
.eco-scene h3:focus { outline:none; }
.eco-subtitle { color:var(--eco-blue); font-family:var(--label); text-transform:uppercase; letter-spacing:.14em; font-size:14px; line-height:1.5; margin:16px 0 27px; }
.eco-inline-art { margin:0 -10px 25px; }
.eco-inline-art img { width:100%; height:auto; object-fit:contain; }
.eco-benefits { list-style:none; }
.eco-benefits li { display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid #1d3247; color:#E5E5E5; font-size:clamp(16px,1.35vw,20px); line-height:1.35; }
.eco-benefits li:first-child { padding-top:0; }
.eco-benefits svg { flex:none; width:20px; height:20px; fill:none; stroke:var(--eco-accent); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.eco-flow { display:flex; flex-wrap:wrap; gap:8px 10px; margin:27px 0 23px; color:var(--eco-accent); font-size:11px; line-height:1.6; letter-spacing:.07em; text-transform:uppercase; }
.eco-flow span:not(:last-child):after { content:'\2192'; color:#E5E5E5; padding-left:10px; }
.eco-next-link { display:inline-flex; align-items:center; gap:12px; font-size:12px; min-height:44px; color:#E5E5E5; border-bottom:1px solid transparent; }
.eco-next-link .mi { font-size:17px; }
.eco-next-link:hover { color:#fff; border-color:var(--eco-blue); }
.eco-outcomes { position:relative; border-top:1px solid #34516d; padding:55px 0 66px; scroll-margin-top:calc(var(--eco-head) + var(--eco-nav) + 20px); }
.eco-outcomes-heading { display:flex; align-items:center; gap:18px; margin-bottom:38px; }
.eco-outcomes-heading > svg { width:28px; height:28px; color:var(--eco-blue); }
.eco-outcomes h3 { color:#fff; font-family:var(--display); font-size:clamp(24px,2.2vw,34px); }
.eco-outcomes ul { display:grid; grid-template-columns:repeat(4,1fr); gap:25px; list-style:none; }
.eco-outcomes li { display:flex; align-items:center; gap:14px; color:#E5E5E5; font-size:15px; }
.eco-outcomes li .mi { display:grid; place-items:center; width:45px; height:45px; border:1px solid #34516d; border-radius:50%; color:var(--eco-accent); }

/* Progressively enhanced desktop: all text remains in normal document flow. */
@media(min-width:1001px) and (min-height:640px) {
 .eco-enhanced .eco-visual { display:flex; flex-direction:column; position:sticky; top:calc(var(--eco-head) + var(--eco-nav) + 20px); height:calc(100svh - var(--eco-head) - var(--eco-nav) - 80px); min-height:350px; max-height:850px; margin-top:24px; }
 .eco-enhanced .eco-inline-art { display:none; }
 .eco-enhanced .eco-scene { display:flex; flex-direction:column; justify-content:center; min-height:max(740px,calc(100svh - var(--eco-head) - var(--eco-nav))); padding:72px 0; }
 .eco-enhanced .eco-scene-heading { margin-bottom:22px; }
 .eco-visual-top { display:flex; align-items:center; justify-content:space-between; color:#E5E5E5; font:11px/1.4 var(--body); letter-spacing:.08em; text-transform:uppercase; padding:10px 0; }
 .eco-visual-top > span:first-child { display:flex; gap:9px; align-items:center; }
 .eco-visual-top svg { width:14px; height:14px; color:#0080FF; }
 .eco-visual-count { color:#E5E5E5; font-family:var(--label); font-size:13px; }
 .eco-art-stage { position:relative; flex:1; min-height:0; isolation:isolate; }
 .eco-lightfield { position:absolute; inset:4% -10% -3%; z-index:-1; background:radial-gradient(ellipse at 50% 60%,#0a539b60,transparent 63%); animation:eco-light-breathe 8s ease-in-out infinite alternate; }
 .eco-circuit { position:absolute; inset:0; width:100%; height:100%; overflow:visible; fill:none; stroke:#2d6795; stroke-width:.7; opacity:.45; }
 .eco-circuit .eco-signal { stroke:#0080FF; stroke-width:2; stroke-dasharray:3 900; stroke-linecap:round; animation:eco-signal-travel 13s linear infinite; }
 .eco-art { position:absolute; inset:0 -5%; margin:0; display:flex; justify-content:center; align-items:center; opacity:0; visibility:hidden; transform:translateY(28px) scale(.96); transition:opacity .65s ease,transform .85s cubic-bezier(.2,.7,.2,1),visibility .65s; pointer-events:none; }
 .eco-art.is-current { opacity:1; visibility:visible; transform:translateY(0) scale(1); }
 .eco-art img { height:100%; width:100%; object-fit:contain; translate:0 var(--eco-drift,0px); filter:drop-shadow(0 25px 25px #0005); }
 .eco-art[data-eco-art='2'] img { transform:translateY(-6%) scale(1.08); }
 .eco-visual-foot { display:flex; justify-content:space-between; align-items:center; gap:15px; border-top:1px solid #294059; padding:20px 0 17px; }
 .eco-current-label { display:block; color:#e7f2fb; font-size:15px; }
 .eco-visual-foot small { display:block; color:#E5E5E5; font-size:10px; letter-spacing:.035em; margin-top:6px; }
 .eco-controls { display:flex; gap:8px; }
 .eco-controls button { display:grid; place-items:center; background:#10263c; color:#E5E5E5; border:1px solid #395c7a; border-radius:50%; width:43px; height:43px; cursor:pointer; transition:background .2s,translate .2s; }
 .eco-controls button:hover:not(:disabled) { background:#16528a; translate:0 -2px; }
 .eco-controls button:disabled { opacity:.3; cursor:default; }
 .eco-controls .mi { font-size:20px; }
 .eco-progress { height:2px; background:#24384c; overflow:hidden; }
 .eco-progress span { display:block; height:100%; width:100%; background:linear-gradient(90deg,#287abd,#0080FF,var(--eco-accent)); transform:scaleX(var(--eco-progress,.1667)); transform-origin:left; transition:transform .4s ease; }
 .eco-scene.is-current .eco-scene-icon { border-color:#0080FF; box-shadow:0 0 28px #168cff26; transition:border-color .5s,box-shadow .5s; }
 .eco-scene.is-current > :is(.eco-scene-heading,h3,.eco-subtitle),.eco-scene.is-current .eco-benefits li { animation:eco-copy-arrive .65s cubic-bezier(.2,.7,.2,1) backwards; }
 .eco-scene.is-current .eco-benefits li:nth-child(2) { animation-delay:40ms; }
 .eco-scene.is-current .eco-benefits li:nth-child(3) { animation-delay:80ms; }
 .eco-scene.is-current .eco-benefits li:nth-child(4) { animation-delay:120ms; }
 .eco-scene.is-current .eco-benefits li:nth-child(5) { animation-delay:160ms; }
}
@keyframes eco-signal-travel { to { stroke-dashoffset:-1806; } }
@keyframes eco-light-breathe { from { opacity:.65; transform:scale(.96); } to { opacity:1; transform:scale(1.05); } }
@keyframes eco-copy-arrive { from { opacity:.55; translate:0 10px; } to { opacity:1; translate:0 0; } }
/* Without JS, on short screens and on touch layouts every chapter includes its image. */
.ecosystem-story:not(.eco-enhanced) .eco-story-layout { display:block; }
.ecosystem-story:not(.eco-enhanced) .eco-scenes { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
@media(max-width:1000px),(max-height:639px) {
 .eco-story-layout { display:block; }
 .eco-story-intro { align-items:start; }
 .eco-story-intro h2 { font-size:clamp(28px,4vw,44px); }
 .eco-scene { max-width:730px; margin:auto; }
 .eco-inline-art { max-width:640px; margin:-12px auto 22px; }
 .eco-inline-art img { max-height:58svh; }
 .eco-scene h3 { max-width:none; font-size:clamp(28px,4vw,40px); }
 .eco-outcomes ul { grid-template-columns:1fr 1fr; }
}
@media(max-width:720px) {
 #ecosystem.ecosystem-story { --eco-nav:73px; }
 .eco-story-intro { display:block; padding-bottom:30px; }
 .eco-story-intro h2 { font-size:clamp(28px,6.4vw,40px); }
 .eco-intro-note { margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; }
 .eco-intro-note p { font-size:16px; }
 .eco-intro-note a { padding:6px 0; font-size:12px; }
 .eco-intro-note > span { display:none; }
 .eco-overline { font-size:12px; }
 .eco-chapters { display:flex; overflow-x:auto; scrollbar-width:none; margin:0 calc(-1 * var(--gutter)); padding:0 var(--gutter); border-radius:0; border-left:0; border-right:0; scroll-padding-inline:var(--gutter); }
 .eco-chapters::-webkit-scrollbar { display:none; }
 .eco-chapter-link { flex:0 0 105px; min-height:72px; font-size:11px; }
 .eco-chapter-link .mi { font-size:20px; }
 .eco-nav-number { top:8px; right:10px; font-size:9px; }
 .eco-scene { padding:48px 0; }
 .eco-scene-heading { margin-bottom:22px; }
 .eco-scene-icon { width:43px; height:43px; border-radius:12px; }
 .eco-scene-icon .mi { font-size:24px; }
 .eco-scene h3 { font-size:29px; }
 .eco-subtitle { font-size:12px; letter-spacing:.12em; margin:14px 0 12px; }
 .eco-inline-art { margin:0 -16px 20px; }
 .eco-inline-art img { max-height:none; }
 .eco-benefits li { font-size:16px; padding:12px 0; }
 .eco-flow { font-size:10px; }
 .eco-outcomes { padding:40px 0 50px; }
 .eco-outcomes h3 { font-size:23px; }
 .eco-outcomes ul { gap:24px 15px; }
 .eco-outcomes li { align-items:start; font-size:13px; line-height:1.4; }
 .eco-outcomes li .mi { width:32px; height:32px; font-size:20px; flex-shrink:0; }
 .ecosystem-story:not(.eco-enhanced) .eco-scenes { display:block; }
}
@media(prefers-reduced-motion:reduce) {
 .ecosystem-story *, .ecosystem-story *:before, .ecosystem-story *:after { animation:none!important; transition:none!important; scroll-behavior:auto; }
 .eco-art img { translate:none; }
}
.scroll-effects-paused .ecosystem-story *, .scroll-effects-paused .ecosystem-story *:before, .scroll-effects-paused .ecosystem-story *:after { animation:none!important; transition:none!important; }
.scroll-effects-paused .eco-art img { translate:none; }
@media print {
 #ecosystem.ecosystem-story { background:white; color:#111; }
 .eco-chapters,.eco-visual,.eco-next-link { display:none!important; }
 .eco-story-layout { display:block; }
 .eco-inline-art { display:block!important; max-width:400px; }
 .eco-scene { min-height:0!important; break-inside:avoid; }
 .ecosystem-story :is(h2,h3,p,li,span) { color:#111; }
}