:root {

      --paper: #faf9f5;
      --paper-alt: #f0eee5;
      --ink: #111111;
      --muted: #555555;
      --faint: #888888;

      --line: rgba(0, 0, 0, 0.12);
      --line-strong: rgba(0, 0, 0, 0.25);


      --green: #007bb5;
      --green-soft: rgba(0, 123, 181, 0.1);
      --sage: #4a7788;
      --sage-soft: rgba(74, 119, 136, 0.1);
      --sand: #cc7000;


      --electric: var(--green);
      --electric-soft: var(--green-soft);
      --energy: var(--sand);
      --energy-soft: rgba(204, 112, 0, 0.1);
      --solar: #2d8a4e;
      --ivory: var(--ink);
      --stage-edge: var(--line);
      --body-muted: var(--muted);

      --max: 1500px;
      --font-head: "Roboto Condensed", Arial Narrow, sans-serif;
      --font-body: "Inter", Arial, sans-serif;
    }

    * { box-sizing: border-box; }
    html { background: var(--paper); color-scheme: light; scroll-behavior: smooth; }
    body {
      margin: 0;
      min-width: 320px;
      background: var(--paper);
      color: var(--ink);
      font-family: var(--font-body);
      overflow-x: clip;
    }

    .ev-story {
      position: relative;
      height: 420vh;
      min-height: 2600px;
      background: var(--paper);
    }

    .hero {
      position: sticky;
      top: 0;
      height: 100vh;
      height: 100svh;
      min-height: 650px;
      overflow: hidden;
      isolation: isolate;
      background:
        radial-gradient(circle at 77% 51%, rgba(0,0,0,.04) 0 1px, transparent 1.2px) 0 0 / 18px 18px,
        linear-gradient(180deg, var(--paper) 0%, #f2f0ea 100%);
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background:
        radial-gradient(ellipse at 76% 48%, rgba(0, 123, 181, 0.08), transparent 42%),
        radial-gradient(ellipse at 62% 78%, rgba(45, 138, 78, 0.06), transparent 36%);
      pointer-events: none;
    }

    .hero-grid {
      position: relative;
      z-index: 10;
      width: min(100%, var(--max));
      height: 100%;
      margin: 0 auto;
      padding: clamp(74px, 9vh, 104px) clamp(24px, 5vw, 78px) clamp(74px, 10vh, 110px);
      display: grid;
      grid-template-columns: minmax(320px, .75fr) minmax(620px, 1.25fr);
      align-items: center;
      gap: clamp(10px, 2vw, 36px);
    }

    .copy { position: relative; z-index: 30; max-width: 620px; align-self: center; }

    .chapter {
      display: flex; align-items: center; gap: 10px; margin: 0 0 22px;
      color: var(--sand); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    }

    .chapter::before {
      content: "01"; display: grid; place-items: center; width: 30px; height: 30px;
      border: 1px solid var(--line-strong); border-radius: 50%; color: var(--ink); letter-spacing: 0; font-size: 10px;
    }

    h1 {
      margin: 0; max-width: 720px; display: grid; row-gap: clamp(10px, 1.15vw, 18px);
      font-family: var(--font-head); font-size: clamp(54px, 5.65vw, 92px); font-weight: 700;
      line-height: 1; letter-spacing: -.035em; text-transform: uppercase; text-wrap: balance;
    }
    h1 .line { display: block; overflow: visible; padding-block: .12em .14em; }
    h1 .line > span { display: block; }
    h1 .line--vehicle { font-size: .82em; letter-spacing: -.045em; white-space: nowrap; }
    h1 .accent { color: var(--green); font-style: normal; }

    .deck { max-width: 560px; margin: 26px 0 0; color: var(--muted); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; }

    .metric {
      width: min(100%, 510px); margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--line-strong);
      display: grid; grid-template-columns: auto 1fr; gap: 16px 22px; align-items: end;
    }
    .metric__value { font-family: var(--font-head); font-size: clamp(40px, 4vw, 62px); font-weight: 700; line-height: .9; letter-spacing: -.035em; white-space: nowrap; }
    .metric__value b { color: var(--green); font-weight: 700; }
    .metric__label { max-width: 260px; color: var(--muted); font-size: 12px; line-height: 1.45; }
    .metric__source { grid-column: 1 / -1; color: var(--faint); font-size: 10px; letter-spacing: .03em; }

    .visual { position: relative; z-index: 10; width: 100%; height: min(74vh, 780px); min-height: 560px; align-self: center; }
    .visual svg { width: 100%; height: 100%; overflow: visible; display: block; }

    .scene-label { font-family: var(--font-body); font-size: 17px; font-weight: 650; fill: var(--ink); letter-spacing: .01em; }
    .scene-label-small { font-family: var(--font-body); font-size: 17px; font-weight: 700; fill: var(--ink); letter-spacing: .025em; text-transform: uppercase; }


    .node-box { fill: rgba(255,255,255,0.85); stroke: rgba(0,0,0,0.15); stroke-width: 1; vector-effect: non-scaling-stroke; }
    .node-box--accent { stroke: var(--green); stroke-width: 1.5; }
    .node-fill { fill: rgba(0,0,0,0.04); }
    .node-stroke { fill: none; stroke: rgba(0,0,0,0.4); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
    .node-accent { fill: none; stroke: var(--green); stroke-width: 1.8; vector-effect: non-scaling-stroke; }
    .node-blue { fill: none; stroke: var(--sage); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

    .ground-line { fill: none; stroke: rgba(0,0,0,0.1); stroke-width: 1; vector-effect: non-scaling-stroke; }
    .network-line { fill: none; stroke: rgba(0,0,0,0.2); stroke-width: 1; stroke-dasharray: 2 8; vector-effect: non-scaling-stroke; }
    .network-line--energy { stroke: var(--sand); stroke-dasharray: 1 9; stroke-linecap: round; stroke-width: 2.2; }
    .network-line--data { stroke: var(--sage); stroke-dasharray: 6 8; stroke-width: 1.25; }


    .car-shadow { fill: rgba(0,0,0,.15); filter: blur(11px); }
    .car-body { fill: #f8f9fa; stroke: rgba(0,0,0,0.3); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
    .car-highlight { fill: none; stroke: rgba(255,255,255,0.8); stroke-width: 1; vector-effect: non-scaling-stroke; }
    .car-glass { fill: #e9ecef; stroke: rgba(0,0,0,0.2); stroke-width: 1; vector-effect: non-scaling-stroke; }
    .wheel-outer { fill: #343a40; stroke: rgba(0,0,0,0.5); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
    .wheel-inner { fill: #adb5bd; stroke: rgba(0,0,0,0.2); stroke-width: 1; vector-effect: non-scaling-stroke; }
    .wheel-spoke { stroke: rgba(0,0,0,0.4); stroke-width: 1; vector-effect: non-scaling-stroke; }


    .xray-shell { fill: rgba(0,0,0,0.02); stroke: rgba(0,0,0,0.3); stroke-width: 1.1; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
    .battery-shell { fill: rgba(0,123,181,0.05); stroke: var(--green); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
    .battery-cell { fill: rgba(0,123,181,0.2); }
    .motor-ring { fill: rgba(0,0,0,0.05); stroke: rgba(0,0,0,0.4); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
    .drive-line { fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }


    .detail-label .detail-label__panel { fill: rgba(255,255,255,0.95); stroke: rgba(0,0,0,0.15); stroke-width: 1; vector-effect: non-scaling-stroke; }
    .detail-label .detail-label__rule { stroke: var(--green); stroke-width: 3; vector-effect: non-scaling-stroke; }
    .detail-label .detail-label__leader { fill: none; stroke: rgba(0,0,0,0.3); stroke-width: 1.35; vector-effect: non-scaling-stroke; }
    .detail-label circle { fill: var(--green); }
    .detail-label text {
      font-family: var(--font-body); fill: var(--ink); font-size: 31px; font-weight: 750; letter-spacing: -.025em;
      paint-order: stroke fill; stroke: rgba(255,255,255,0.9); stroke-width: 4px; stroke-linejoin: round;
    }
    .detail-label text tspan:last-child { fill: var(--muted); font-size: 17px; font-weight: 650; letter-spacing: .035em; text-transform: uppercase; }

    .step-caption {
      position: absolute; left: 50%; bottom: 31px; z-index: 45; width: min(720px, calc(100% - 160px)); transform: translateX(-50%);
      display: flex; align-items: center; justify-content: center; gap: 14px;
      color: var(--muted); font-size: 14px; line-height: 1.45; text-align: center; pointer-events: none;
    }
    .step-caption::before, .step-caption::after { content: ""; height: 1px; flex: 1 1 100px; background: var(--line); }

    .scroll-cue { position: absolute; right: 30px; bottom: 34px; z-index: 50; display: grid; justify-items: center; gap: 8px; color: var(--muted); font-size: 9px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
    .scroll-cue__line { position: relative; width: 1px; height: 44px; background: var(--line-strong); overflow: hidden; }
    .scroll-cue__line::after { content: ""; position: absolute; inset: -100% 0 auto; height: 60%; background: var(--green); animation: cue 1.8s ease-in-out infinite; }
    @keyframes cue { 0% { transform: translateY(0); } 70%, 100% { transform: translateY(320%); } }

    .progress { position: absolute; top: 50%; right: 30px; z-index: 45; transform: translateY(-50%); display: grid; gap: 14px; }
    .progress__dot { width: 7px; height: 7px; border: 1px solid rgba(0,0,0,.3); border-radius: 50%; background: transparent; transition: all .2s ease; }
    .progress__dot.is-active { background: var(--green); border-color: var(--green); transform: scale(1.2); }

    .intro-line { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; pointer-events: none; color: var(--ink); font-size: clamp(18px, 2vw, 28px); letter-spacing: -.015em; text-align: center; }
    .intro-line span { max-width: 680px; padding: 0 24px; }
    .intro-line strong { color: var(--green); font-weight: 600; }

    .story-progress { position:fixed; inset:0 0 auto; height:3px; z-index:1000; background:rgba(0,0,0,.05); }
    .story-progress span { display:block; width:100%; height:100%; background:var(--electric); transform:scaleX(0); transform-origin:left center; }

    .article-band { position:relative; padding:clamp(76px,11vw,150px) 22px; background:var(--paper); color:var(--ink); }

    #opening { padding-bottom: 20px; }
    #chapter-start { padding-top: clamp(40px, 6vw, 80px); }

    .prose { position:relative; width:min(720px,100%); margin:0 auto; }
    .prose p { margin:0 0 1.5em; color:#333; font-family:"Arimo",Inter,Arial,sans-serif; font-size:clamp(18px,1.45vw,20px); line-height:1.82; }


    .prose .standfirst {
      color:var(--ink);
      font-size:clamp(22px,2vw,28px);
      line-height:1.6;
      font-weight:500;
      font-family: var(--font-head);
      border-left: 3px solid var(--green);
      padding-left: 24px;
      margin-bottom: 48px;
    }

    .prose .kicker,.eyebrow { margin:0 0 14px; color:var(--electric); font:700 11px/1.2 Inter,Arial,sans-serif; letter-spacing:.17em; text-transform:uppercase; }

    .prose blockquote { margin:54px -100px; padding:12px 0 12px 38px; border-left:3px solid var(--energy); color:var(--ink); font:600 clamp(26px,3vw,42px)/1.35 "Roboto Condensed",Arial,sans-serif; letter-spacing:-.025em; }
    .prose .short-paragraph { color:var(--energy); font-weight:700; }

    .chapter-heading { width:min(1040px,100%); margin:0 auto 74px; display:flex; gap:22px; align-items:flex-start; }
    .chapter-index { width:44px; height:44px; display:grid; place-items:center; flex:0 0 auto; border:1px solid rgba(0, 123, 181, 0.3); border-radius:50%; color:var(--electric); font:700 12px Inter,sans-serif; }
    .chapter-heading h2,.inline-heading { margin:0; max-width:820px; color:var(--ink); font:700 clamp(42px,6vw,78px)/.98 "Roboto Condensed",Arial,sans-serif; letter-spacing:-.045em; text-transform:uppercase; }
    .inline-heading { margin:0 0 48px; font-size:clamp(38px,5vw,64px); }
    .inline-heading--business {
      position:relative;
      left:50%;
      translate:-50% 0;
      width:min(1100px,calc(100vw - 48px));
      max-width:none;
      margin-bottom:48px;
      font-size:clamp(24px,6.15vw,72px);
      line-height:.98;
      letter-spacing:-.052em;
      text-wrap:nowrap;
    }
    .inline-heading--business span { display:block; white-space:nowrap; }

    .scrolly { position:relative; min-height:340vh; background:var(--paper-alt); color:var(--ink); }
    .scrolly.microgrid { min-height:430vh; }.scrolly.value-map { min-height:360vh; }

    .sticky-stage { position:sticky; top:0; height:100vh; height:100svh; min-height:650px; overflow:hidden; background:var(--paper-alt); border-top:1px solid rgba(0,0,0,.05); border-bottom:1px solid rgba(0,0,0,.05); }
    .sticky-stage::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 52%, rgba(0,123,181,.04), transparent 50%), linear-gradient(rgba(0,0,0,.02) 1px, transparent 1px), linear-gradient(90deg,rgba(0,0,0,.02) 1px,transparent 1px); background-size:auto,30px 30px,30px 30px; pointer-events:none; }

    .stage-title { position:absolute; z-index:12; top:max(56px,8vh); left:50%; width:min(960px,calc(100% - 48px)); transform:translateX(-50%); text-align:center; }
    .stage-title--left { text-align:left; }
    .stage-title h2 { margin:0; font:700 clamp(40px,5.4vw,76px)/.95 "Roboto Condensed",sans-serif; letter-spacing:-.045em; text-transform:uppercase; text-wrap:balance; }

    .step-rail { position:relative; z-index:20; margin-top:-100vh; pointer-events:none; }
    .step { min-height:100vh; display:flex; align-items:center; padding:15vh clamp(18px,5vw,72px); }
    .step-rail--right .step { justify-content:flex-end; }.step-rail--left .step { justify-content:flex-start; }


    .step-card { width:min(360px,86vw); padding:24px 26px; background:rgba(255,255,255,.9); border:1px solid rgba(0,0,0,.1); box-shadow: 0 10px 30px -10px rgba(0,0,0,0.08); backdrop-filter:blur(12px); pointer-events:auto; opacity:.28; transform:translateY(22px); transition:opacity .35s ease,transform .35s ease,border-color .35s ease; }
    .step.is-active .step-card { opacity:1; transform:none; border-color:var(--green); }
    .step-card > span { display:block; color:var(--electric); font:700 11px/1 Inter,sans-serif; letter-spacing:.16em; margin-bottom:12px; }
    .step-card h3 { margin:0 0 10px; font:700 25px/1.08 "Roboto Condensed",sans-serif; color: var(--ink); }
    .step-card p { margin:0; color:var(--muted); font-size:15px; line-height:1.55; }

    .path-compare { width:min(1050px,100%); margin:90px auto 0; display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:26px; }
    .path-card { position:relative; padding:34px; border:1px solid var(--line); background:#fff; box-shadow: 0 4px 20px rgba(0,0,0,0.02);}
    .path-card svg { width:100%; height:auto; margin-bottom:18px; }
    .path-card h3 { margin:0 0 10px; font:700 28px/1.1 "Roboto Condensed",sans-serif; }
    .path-card p { margin:0; color:var(--body-muted); font-size:16px; line-height:1.55; }
    .path-no { position:absolute; top:18px; right:20px; color:var(--electric); font:700 13px Inter,sans-serif; }
    .path-divider { display:grid; place-items:center; color:#888; font-size:12px; text-transform:uppercase; letter-spacing:.15em; }
    .path-divider::before,.path-divider::after { content:""; width:1px; height:42%; background:var(--stage-edge); }

    .wire { fill:none; stroke:rgba(0,0,0,.2); stroke-width:2; vector-effect:non-scaling-stroke; }
    .wheel { fill:#333; stroke:none; }
    .solar-fill { fill:rgba(45,138,78,.15); stroke:var(--solar); }
    .energy-flow,.data-flow { fill:none; stroke-linecap:round; stroke-width:3; stroke-dasharray:1 11; animation:particleFlow 1.2s linear infinite; }
    .energy-flow { stroke:var(--energy); }.data-flow { stroke:var(--electric); }

    .investment-road { position:absolute; inset:20% 3% 8%; }
    .road-line { position:absolute; left:8%; right:8%; bottom:20%; height:2px; background:linear-gradient(90deg,var(--electric),rgba(0,123,181,.1)); }
    .milestone { position:absolute; bottom:24%; width:210px; opacity:.22; transition:opacity .55s ease,transform .55s ease; color: var(--ink); }
    .milestone::after { content:""; position:absolute; left:0; top:100%; width:1px; height:96px; background:rgba(0,123,181,.3); }
    .milestone .year { display:block; color:var(--electric); font:700 13px Inter,sans-serif; letter-spacing:.12em; }
    .milestone b { display:block; margin-top:10px; font:700 clamp(32px,4vw,58px)/.9 "Roboto Condensed",sans-serif; }
    .milestone small { display:block; margin-top:8px; color:var(--muted); font-size:13px; }
    .milestone em { display:block; margin-top:12px; color:var(--energy); font:600 18px Inter,sans-serif; font-style:normal; }
    .m2030 { left:8%; }.m2040 { left:40%; }.m2050 { right:5%; }

    .ghost-car { position:absolute; left:50%; bottom:5%; width:min(480px,42vw); transform:translateX(-50%); fill:rgba(0,123,181,.03); stroke:rgba(0,123,181,.4); transition:opacity .7s ease,transform .7s ease; }
    .charger-field { position:absolute; inset:42% 6% 14%; display:grid; grid-template-columns:repeat(16,1fr); align-items:end; gap:10px; opacity:.14; transition:opacity .6s ease; }
    .charger-field i { height:22px; border:1px solid rgba(0,0,0,.15); background:#fff; border-radius:2px 2px 0 0; transform-origin:bottom; transform:scaleY(.2); transition:transform .65s ease; }
    .stage-note { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); width:min(720px,90%); margin:0; color:var(--faint); text-align:center; font-size:11px; }

    .investment-stage[data-step="0"] .m2030,.investment-stage[data-step="1"] .m2030,.investment-stage[data-step="2"] .m2030 { opacity:1; transform:translateY(-8px); }
    .investment-stage[data-step="1"] .m2040,.investment-stage[data-step="2"] .m2040 { opacity:1; transform:translateY(-8px); }
    .investment-stage[data-step="2"] .m2050 { opacity:1; transform:translateY(-8px); }
    .investment-stage[data-step="0"] .charger-field i:nth-child(-n+8),.investment-stage[data-step="1"] .charger-field i:nth-child(-n+20),.investment-stage[data-step="2"] .charger-field i { transform:scaleY(1); }
    .investment-stage[data-step="1"] .charger-field { opacity:.35; }.investment-stage[data-step="2"] .charger-field { opacity:.68; }
    .investment-stage[data-step="0"] .ghost-car { opacity:.75; }.investment-stage[data-step="1"] .ghost-car { opacity:.35; transform:translateX(-50%) scale(.82); }.investment-stage[data-step="2"] .ghost-car { opacity:.08; transform:translateX(-50%) scale(.6); }

    .station-visual { position:absolute; inset:18% 4% 4% 32%; }
    .station-visual svg { width:100%; height:100%; overflow:visible; }
    .station-visual svg g,.station-visual svg path,.station-visual svg rect,.station-visual svg circle { vector-effect:non-scaling-stroke; }
    .station-transformer,.station-charger,.station-car { fill:rgba(255,255,255,.6); stroke:rgba(0,0,0,.3); stroke-width:1.5; }
    .station-visual text { fill:var(--faint); font:700 13px Inter,sans-serif; letter-spacing:.08em; }
    .ground { stroke:rgba(0,0,0,.1); }

    .cost-part { position:absolute; padding:12px 14px; background:#fff; border:1px solid rgba(0,0,0,.1); border-left:3px solid var(--electric); opacity:.14; transition:opacity .5s ease,transform .5s ease; box-shadow:0 4px 15px rgba(0,0,0,0.05); }
    .cost-part b { display:block; color:var(--ink); font:700 20px "Roboto Condensed",sans-serif; }
    .cost-part span { display:block; margin-top:3px; color:var(--muted); font-size:11px; }
    .cost-transformer { left:4%; top:34%; }.cost-charger { left:37%; top:30%; }.cost-working { right:2%; top:72%; }

    .economics-meter { position:absolute; right:5%; bottom:5%; width:min(600px,58vw); display:grid; gap:16px; }
    .economics-meter > div { position:relative; padding:14px 0; border-bottom:1px solid var(--line); opacity:.18; transition:opacity .45s ease; }
    .economics-meter span { display:block; color:var(--muted); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
    .economics-meter strong { display:block; margin-top:7px; color:var(--ink); font:700 clamp(30px,4vw,60px)/.9 "Roboto Condensed",sans-serif; }
    .economics-meter i { display:block; height:7px; margin-top:14px; background:var(--electric); transform-origin:left; transform:scaleX(.12); transition:transform .7s ease; }
    .cashflow i { background:var(--energy); transform:scaleX(.02); }

    .station-stage[data-step="0"] .capital,.station-stage[data-step="0"] .cost-part,.station-stage[data-step="1"] .capital,.station-stage[data-step="1"] .cashflow,.station-stage[data-step="1"] .cost-part,.station-stage[data-step="2"] .economics-meter>div,.station-stage[data-step="2"] .cost-part { opacity:1; }
    .station-stage[data-step="0"] .capital i,.station-stage[data-step="1"] .capital i,.station-stage[data-step="2"] .capital i { transform:scaleX(1); }.station-stage[data-step="1"] .cashflow i,.station-stage[data-step="2"] .cashflow i { transform:scaleX(.12); }

    .microgrid-map { position:absolute; inset:16% 3% 6%; width:94%; height:80%; }
    .microgrid-map .node { opacity:.16; transition:opacity .5s ease,transform .5s ease; transform-origin:center; }
    .microgrid-map text { fill:var(--muted); font:700 16px Inter,sans-serif; letter-spacing:.1em; }
    .solar-wire{fill:none;stroke:var(--solar);stroke-width:2}
    .data-node{fill:rgba(0,123,181,.05);stroke:var(--electric);stroke-width:1.5; background:#fff;}
    .data-wire{fill:none;stroke:var(--electric);stroke-width:2}
    .station-roof,.station-base{fill:rgba(255,255,255,.8);stroke:rgba(0,0,0,.2);stroke-width:1.5}
    .chargers rect{fill:rgba(0,123,181,.05);stroke:var(--electric)}
    .mg-station { filter:drop-shadow(0 14px 24px rgba(17,17,17,.055)); }
    .station-shadow { fill:rgba(17,17,17,.09); }
    .station-platform { fill:rgba(255,255,255,.92); stroke:rgba(17,17,17,.15); stroke-width:1.35; }
    .parking-line { fill:none; stroke:rgba(17,17,17,.12); stroke-width:1.2; }
    .parking-line--edge { stroke-dasharray:6 9; }
    .station-canopy { fill:rgba(255,255,255,.96); stroke:rgba(17,17,17,.24); stroke-width:1.45; }
    .station-canopy-edge { fill:none; stroke:rgba(17,17,17,.18); stroke-width:1; }
    .station-solar-cell { fill:rgba(45,138,78,.08); stroke:rgba(45,138,78,.55); stroke-width:1; }
    .station-post { fill:none; stroke:rgba(17,17,17,.28); stroke-width:2; }
    .station-control-box { fill:#fff; stroke:rgba(0,123,181,.38); stroke-width:1.2; }
    .station-control-dot { fill:var(--electric); }
    .station-control-dot--muted { fill:rgba(17,17,17,.18); }
    .station-bus { fill:none; stroke:rgba(0,123,181,.32); stroke-width:1.4; stroke-dasharray:5 7; }
    .station-bus-node { fill:var(--electric); }
    .charger-body { fill:#fff; stroke:rgba(17,17,17,.28); stroke-width:1.4; }
    .charger-screen { fill:rgba(0,123,181,.07); stroke:rgba(0,123,181,.55); stroke-width:1; }
    .charger-screen-mark { fill:none; stroke:var(--electric); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    .charger-slot { fill:rgba(17,17,17,.12); }
    .charger-led { fill:var(--electric); animation:chargerPulse 1.8s ease-in-out infinite; transform-origin:center; }
    .charger-cable { fill:none; stroke:rgba(17,17,17,.52); stroke-width:2; stroke-linecap:round; }
    .charger-plug { fill:#fff; stroke:var(--electric); stroke-width:1.6; }
    .charger-foot { fill:none; stroke:rgba(17,17,17,.28); stroke-width:1.4; }
    .station-vehicle path { fill:rgba(0,123,181,.035); stroke:rgba(17,17,17,.28); stroke-width:1.25; }
    .station-vehicle circle { fill:#f0eee5; stroke:rgba(17,17,17,.3); stroke-width:1.15; }
    .station-vehicle--secondary { opacity:.52; }
    .station-label { fill:var(--ink)!important; font:700 15px Inter,sans-serif!important; letter-spacing:.14em!important; }
    @keyframes chargerPulse { 0%,100%{opacity:.45;transform:scale(.82)} 50%{opacity:1;transform:scale(1.16)} }
    .flow-base { fill:none; stroke:rgba(0,0,0,.08); stroke-width:3; }
    .flow-solar{stroke:rgba(45,138,78,.15)}
    .flow-data{stroke:rgba(0,123,181,.15)}

    .particle-line { fill:none; stroke-width:4; stroke-linecap:round; stroke-dasharray:1 17; animation:particleFlow 1.25s linear infinite; }
    .energy-particles{stroke:var(--energy)}
    .data-particles{stroke:var(--electric);animation-duration:.85s}
    .solar-particles{stroke:var(--solar);animation-duration:1.4s}
    @keyframes particleFlow { to { stroke-dashoffset:-72; } }

    .microgrid-legend { position:absolute; left:50%; bottom:22px; transform:translateX(-50%); display:flex; gap:26px; color:var(--muted); font-size:11px; }
    .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px}
    .dot.energy{background:var(--energy)}.dot.data{background:var(--electric)}.dot.solar{background:var(--solar)}

    .microgrid-metaphors span { position:absolute; padding:12px 15px; border:1px solid rgba(0,0,0,.1); background:#fff; box-shadow:0 4px 12px rgba(0,0,0,0.06); font:700 15px Inter,sans-serif; color:var(--ink); opacity:0; transition:opacity .5s ease; }
    .microgrid-metaphors small{display:block;margin-top:5px;color:var(--muted);font-weight:400}
    .heart{right:11%;top:58%}.brain{left:50%;top:25%;transform:translateX(-50%)}.lungs{right:12%;top:27%}

    .microgrid-stage[data-step="0"] .mg-grid,.microgrid-stage[data-step="0"] .mg-station,.microgrid-stage[data-step="1"] .mg-grid,.microgrid-stage[data-step="1"] .mg-station,.microgrid-stage[data-step="1"] .mg-bess,.microgrid-stage[data-step="2"] .node,.microgrid-stage[data-step="3"] .node { opacity:1; }
    .microgrid-stage[data-step="1"] .heart,.microgrid-stage[data-step="2"] .heart,.microgrid-stage[data-step="3"] .heart,.microgrid-stage[data-step="2"] .brain,.microgrid-stage[data-step="3"] .brain,.microgrid-stage[data-step="3"] .lungs { opacity:1; }

    .business-canvas { position:absolute; inset:18% 3% 3%; }
    .business-canvas svg { width:100%; height:100%; }
    .biz-node rect { fill:#fff; stroke:rgba(0,0,0,.15); }
    .biz-node text { fill:var(--ink); font:700 24px "Roboto Condensed",sans-serif; }
    .biz-node .biz-value{fill:var(--electric);font-size:21px}
    .biz-node .biz-sub{fill:var(--muted);font:500 15px Inter,sans-serif}
    .biz-node{opacity:.18;transition:opacity .5s ease,transform .5s ease}
    .business-car{fill:rgba(0,123,181,.02);stroke:rgba(0,123,181,.3);transition:opacity .8s ease,transform .8s ease;transform-origin:center}
    .network-caption{position:absolute;left:50%;bottom:1%;transform:translateX(-50%);margin:0;color:var(--faint);font-size:12px;text-align:center}

    .business-stage[data-step="0"] .bank,.business-stage[data-step="0"] .realestate,.business-stage[data-step="0"] .retail,.business-stage[data-step="1"] .biz-node,.business-stage[data-step="2"] .biz-node{opacity:1}
    .business-stage[data-step="1"] .software,.business-stage[data-step="2"] .software,.business-stage[data-step="2"] .data{transform:scale(1.04)}
    .business-stage[data-step="1"] .business-car{opacity:.45;transform:scale(.88)}
    .business-stage[data-step="2"] .business-car{opacity:.06;transform:scale(.64)}

    .value-canvas { position:absolute; inset:22% 4% 8%; display:grid; grid-template-columns:1fr minmax(360px,1.2fr) 1fr; align-items:center; gap:32px; }
    .value-column { display:grid; gap:11px; opacity:.2; transition:opacity .55s ease,transform .55s ease; }
    .value-column p{margin:0 0 11px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.12em}
    .value-column span{padding:15px; border:1px solid var(--line); background:#fff; font-size:15px; color:var(--ink);}
    .value-out{transform:translateX(-30px)}.value-in{transform:translateX(30px)}.value-core{text-align:center}
    .value-core svg{width:100%;fill:rgba(0,123,181,.02);stroke:rgba(0,123,181,.2);transition:opacity .7s ease,transform .7s ease}

    .scarce-assets{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}
    .scarce-assets span{padding:13px 8px;border-top:2px solid var(--electric);background:#fff; box-shadow:0 2px 8px rgba(0,0,0,0.05); color:var(--ink);}
    .scarce-assets b{display:block;font:700 13px Inter,sans-serif}
    .scarce-assets small{display:block;margin-top:5px;color:var(--muted);font-size:10px}
    .value-question{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);width:min(760px,90%);margin:0;text-align:center;color:var(--energy);font:600 clamp(17px,2vw,24px) "Roboto Condensed",sans-serif}

    .value-stage[data-step="0"] .value-out,.value-stage[data-step="1"] .value-out,.value-stage[data-step="1"] .value-in,.value-stage[data-step="2"] .value-column{opacity:1;transform:none}
    .value-stage[data-step="1"] .value-core svg{opacity:.35;transform:scale(.82)}.value-stage[data-step="2"] .value-core svg{opacity:.03;transform:scale(.55)}.value-stage[data-step="2"] .scarce-assets{transform:scale(1.08)}


    .sources-footer{padding:38px 24px 70px;border-top:1px solid rgba(0,0,0,0.1);background:#ebe9e1;color:var(--faint);font-size:11px;line-height:1.6}
    .sources-footer>div{width:min(900px,100%);margin:0 auto}

    @media (max-width: 1120px) {
      .hero-grid { grid-template-columns: .85fr 1.15fr; padding-inline: 34px; }
      h1 { font-size: clamp(50px, 6.5vw, 76px); }
      .visual { min-height: 520px; }
    }

    @media (max-width: 900px) {
      .hero { min-height: 680px; }
      .hero::after { display: none;  }
      .hero-grid { padding: 64px 18px 58px; grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; gap: 0; }
      .copy { z-index: 40; width: 100%; max-width: none; }
      .chapter { margin-bottom: 14px; }
      h1 { max-width: 700px; font-size: clamp(45px, 11.6vw, 68px); line-height: 1; row-gap: 7px; }
      h1 .line--vehicle { font-size: .72em; letter-spacing: -.045em; }
      .deck { max-width: 620px; margin-top: 16px; font-size: 15px; line-height: 1.45; }
      .metric { width: 100%; max-width: 560px; margin-top: 18px; padding-top: 11px; grid-template-columns: auto 1fr; }
      .metric__value { font-size: clamp(34px, 10vw, 49px); }
      .metric__label { font-size: 11px; }
      .metric__source { display: none; }
      .visual { position: absolute; inset: 30% -22% 0 -22%; width: 144%; height: 71%; min-height: 0; opacity: .92; }
      .step-caption { display: none; }
      .progress { right: 16px; }
      .scroll-cue { right: 14px; bottom: 22px; }

      .prose blockquote{margin:42px 0;padding-left:24px}
      .path-compare{grid-template-columns:1fr}
      .path-divider{display:none}
      .stage-title{top:40px}
      .stage-title--left{text-align:center}
      .stage-title h2{font-size:clamp(35px,9vw,58px)}
      .step{padding:18vh 14px 10vh;align-items:flex-end!important;justify-content:center!important}
      .step-card{width:min(520px,94vw); opacity: .95;}
      .investment-road{inset:23% 0 18%}
      .milestone{width:150px}.m2030{left:3%}.m2040{left:36%}.m2050{right:1%}
      .milestone b{font-size:32px}
      .charger-field{grid-template-columns:repeat(8,1fr);gap:6px}
      .ghost-car{width:55vw}
      .station-visual{inset:26% -7% 31% -12%}
      .economics-meter{left:5%;right:5%;top:auto;bottom:3%;width:auto}
      .cost-part{display:none}
      .microgrid-map{inset:25% -15% 10%;height:66%}
      .microgrid-legend,.microgrid-metaphors{display:none}
      .business-canvas{inset:22% -18% 10%;}
      .value-canvas{inset:22% 16px 12%;grid-template-columns:1fr 1fr;gap:12px}
      .value-core{grid-column:1/-1;grid-row:1}
      .value-column span{font-size:12px;padding:10px}
      .scarce-assets{grid-template-columns:1fr 1fr 1fr}
      .value-question{bottom:8px}

      .investment-stage .stage-title,.station-stage .stage-title,.value-stage .stage-title{left:50%;right:auto;transform:translateX(-50%);width:calc(100% - 32px);text-align:center}
      .microgrid-stage .stage-title{width:calc(100% - 30px)}
      .investment-stage .stage-title h2,.station-stage .stage-title h2,.microgrid-stage .stage-title h2,.value-stage .stage-title h2{font-size:clamp(34px,8.4vw,55px)}
    }

    @media (max-width: 560px) {
      .ev-story { height: 390vh; }
      .hero { min-height: 640px; }
      .hero-grid { padding-top: 72px; }
      .chapter { font-size: 9px; }
      .chapter::before { width: 26px; height: 26px; }
      h1 { font-size: clamp(42px, 12.4vw, 58px); }
      h1 .line--vehicle { font-size: .70em; }
      .deck { max-width: 94%; }
      .metric { max-width: 95%; gap: 6px; grid-template-columns: 1fr; }
      .metric__value { white-space: normal; }
      .metric__label { max-width: 290px; }
      .visual { inset: 38% -35% -4% -35%; width: 170%; height: 66%; }
      .progress { display: none; }

      .article-band{padding:76px 18px}
      .prose p{font-size:18px;line-height:1.75}
      .prose .standfirst{font-size:24px}
      .chapter-heading{margin-bottom:50px}
      .chapter-heading h2,.inline-heading{font-size:42px}
      .inline-heading--business{width:calc(100vw - 28px);font-size:clamp(20px,6.15vw,34px);letter-spacing:-.05em}
      .scrolly{min-height:310vh}.scrolly.microgrid{min-height:390vh}
      .sticky-stage{min-height:640px}
      .stage-title{top:34px}
      .investment-road{inset:24% 0 21%}
      .milestone{width:116px}.milestone b{font-size:25px}.milestone em{font-size:14px}.milestone small{font-size:10px}
      .m2040{left:34%}.ghost-car{width:76vw}
      .station-visual{inset:26% -26% 34% -28%}
      .economics-meter strong{font-size:34px}
      .microgrid-map{inset:25% -34% 13%;height:63%}
      .business-canvas{inset:22% -48% 15%;}
      .value-canvas{inset:22% 10px 10%;}
      .value-column p{font-size:9px}.value-column span{font-size:11px}
      .scarce-assets small{display:none}
      .step-card h3{font-size:23px}

      .investment-stage .stage-title h2,.station-stage .stage-title h2,.microgrid-stage .stage-title h2,.value-stage .stage-title h2{font-size:clamp(32px,9.3vw,44px)}
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important;
      }
      .ev-story { height: 100vh; min-height: 720px; }
      .hero { position: relative; }
      .intro-line { display: none; }
      .particle-line,.energy-flow,.data-flow{animation:none!important}
      .scrolly{min-height:auto}
      .sticky-stage{position:relative;height:auto;min-height:780px}
      .step-rail{display:none}
      .investment-stage .milestone,.investment-stage .charger-field,.station-stage .economics-meter>div,.microgrid-stage .node,.microgrid-metaphors span,.business-stage .biz-node,.value-stage .value-column{opacity:1!important;transform:none!important}
    }

    #node-solar .node-stroke{stroke:var(--solar)} #node-solar .node-box{stroke:rgba(45,138,78,.45)}


    .investment-stage .stage-title { left:4.5%; transform:none; width:58%; text-align:left; }
    .investment-stage .stage-title h2 { font-size:clamp(42px,4.65vw,66px); }
    .station-stage .stage-title { left:auto; right:4.5%; transform:none; width:62%; text-align:right; }
    .station-stage .stage-title h2 { font-size:clamp(42px,4.7vw,67px); }
    .microgrid-stage .stage-title { top:max(36px,4.5vh); width:min(760px,64%); }
    .microgrid-stage .stage-title h2 { font-size:clamp(40px,4.5vw,64px); }
    .value-stage .stage-title { left:4.5%; transform:none; width:57%; text-align:left; }
    .value-stage .stage-title h2 { font-size:clamp(43px,4.9vw,69px); }

    .station-visual { inset:25% 43% 9% 23%; }
    .economics-meter { right:5%; top:31%; bottom:auto; width:39%; }
    .cost-transformer { left:-12%; top:26%; }
    .cost-charger { left:52%; top:25%; }
    .cost-working { right:-28%; top:72%; }
    .microgrid-map { inset:25% 3% 6%; height:70%; }
    .microgrid-legend { bottom:18px; }

.sources-footer__credit {
  margin-top: 12px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
}