.hero .wrap{max-width:1480px;grid-template-columns:.85fr 1.25fr;gap:42px;padding:65px 40px;align-items:center}.hero h1{font-size:clamp(40px,4.2vw,65px)}.microgrid{min-width:0;border:1px solid #c9d8cf;background:#f0f4ee;border-radius:20px;padding:22px;box-shadow:0 20px 60px #073f4309}.mg-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:14px}.mg-head .eyebrow{margin:0;font-size:11px}.mg-head>span:last-child{font-size:11px;color:var(--muted)}.mg-controls{display:flex;gap:6px;flex-wrap:wrap}.mg-controls button{font-size:10px;padding:6px 9px;background:#fffefa;border:1px solid #c9d8cf;border-radius:20px;color:var(--ink)}.mg-controls button[aria-pressed=true]{background:var(--ink);color:white}.mg-controls .mg-pause{margin-left:auto}.mg-canvas{width:100%;margin-top:8px}.mg-canvas svg{display:block;width:100%;height:auto;overflow:visible}.mg-boundary{fill:#e5ede333;stroke:#b9cbb9;stroke-dasharray:5 7}.mg-caption{font:9px Arial;fill:#799083;letter-spacing:1.5px}.mg-bus-label{font:bold 9px Arial;letter-spacing:1px;fill:#8c731b}.mg-wire{fill:none;stroke-width:2.5;stroke-dasharray:7 7;animation:mg-flow 2s linear infinite;transition:opacity .2s,stroke-width .2s}.mg-wire.ac{stroke:#b28d22}.mg-wire.dc{stroke:#5d9a53}.mg-wire.data{stroke:#358aa0;stroke-dasharray:2 7;stroke-width:1.7;animation-duration:3s}.mg-wire.thermal{stroke:#c57147;stroke-dasharray:8 6}.mg-wire.highlight{stroke-width:4}.mg-wire.muted{opacity:.08;animation-play-state:paused}.mg-node{cursor:pointer;outline:none}.mg-node rect{fill:#fffefa;stroke:#c3d1c5;stroke-width:1.4;transition:fill .2s,stroke .2s}.mg-node:hover rect,.mg-node:focus rect,.mg-node.selected rect{stroke:#397e67;stroke-width:2.4;fill:#e1eddf}.mg-node:focus-visible rect{stroke:#b17620;stroke-width:3}.mg-icon{fill:none;stroke:#245950;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.mg-node-label{font:bold 12px Arial;fill:#174c45}.mg-cloud rect{fill:#fffefa;stroke:#99b8ba}.cloud-outline{fill:#fffefa;stroke:#99b8ba;stroke-width:1.5}.mg-cloud.selected rect,.mg-cloud:hover rect{fill:#fffefa}.mg-legend{display:flex;gap:18px;justify-content:center;margin-bottom:15px;font-size:10px}.mg-legend span:before{content:'';display:inline-block;width:15px;border-top:3px solid;margin-right:5px;vertical-align:middle}.mg-legend .ac{color:#a58219}.mg-legend .dc{color:#54894d}.mg-legend .data{color:#358aa0}.mg-legend .data:before{border-top-style:dotted}.mg-legend .thermal{color:#bd643c}.mg-info{border-top:1px solid #c9d8cf;padding:14px 0 0;min-height:158px;font-size:12px;line-height:1.5}.mg-info strong{font-size:16px}.mg-info p{margin:5px 0 8px;color:#45615a}.mg-info div{font-size:11px;color:#52655a}.mg-info div span{font-weight:bold;display:block;font-size:9px;text-transform:uppercase;letter-spacing:.7px;margin-bottom:2px}.mg-note{font-size:9px;line-height:1.4;color:#6b7c71;margin:12px 0 0}.mg-paused .mg-wire{animation-play-state:paused}@keyframes mg-flow{to{stroke-dashoffset:-28}}@media(prefers-reduced-motion:reduce){.mg-wire{animation:none}}@media(max-width:1050px){.hero .wrap{grid-template-columns:1fr;max-width:920px;gap:40px}.hero h1{font-size:58px}.microgrid{width:100%;max-width:800px;margin:auto}.mg-controls button{font-size:12px}.mg-info{min-height:125px;font-size:14px}.mg-info div{font-size:12px}}@media(max-width:550px){.hero .wrap{padding:45px 18px}.hero h1{font-size:44px}.microgrid{padding:14px 10px;border-radius:12px}.mg-head{display:block}.mg-head>span:last-child{display:block;font-size:10px;margin-top:5px}.mg-controls{gap:4px}.mg-controls button{font-size:9px;padding:5px 7px}.mg-controls .mg-pause{margin-left:0}.mg-info{min-height:190px;font-size:12px}.mg-legend{gap:12px;font-size:9px}.mg-node-label{font-size:13px}.mg-note{font-size:8px}}
.mg-wire.waterflow{stroke:#3d7cb2;stroke-dasharray:10 5}.mg-legend .waterflow{color:#3d7cb2}.dashboard{background:#e8eee6;border-bottom:1px solid var(--line);scroll-margin-top:100px}.dashboard .wrap{max-width:1380px;padding-block:65px}.dashboard .eyebrow{font-size:10px;color:#587663}.db-scenarios{display:flex;gap:10px;margin-bottom:25px;flex-wrap:wrap}.db-scenarios button{border:1px solid #b4c6b6;border-radius:20px;background:transparent;padding:8px 18px;font-size:13px}.db-scenarios button[aria-pressed=true]{background:var(--ink);color:white}.db-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:20px}.db-kpi{background:#fffefa;border:1px solid #c6d5c7;padding:18px;border-radius:10px;min-width:0}.db-kpi>span{display:block;font-size:11px}.db-kpi strong{font-size:30px;display:block;line-height:1.5}.db-kpi small{font-size:13px;font-weight:normal}.db-gen{color:#42784c}.db-demand{color:#b16c37}.db-export{color:#337f99}.db-import{color:#886f26}.db-soc{height:5px;background:#dce5d7;margin-top:6px;border-radius:4px;overflow:hidden}.db-soc i{display:block;height:100%;background:#6eaa77}.db-layout{display:grid;grid-template-columns:1fr 285px;gap:20px}.db-card{background:#fffefa;border:1px solid #c6d5c7;padding:24px;border-radius:12px}.db-card h3{font-size:18px;margin:0 0 15px}.db-chart svg{width:100%;display:block}.db-chart svg text{font:10px Arial;fill:#607164}.db-chart svg line{stroke:#dee6d9}.db-chart svg polyline{fill:none;stroke-width:3}.db-line-g{stroke:#56875b}.db-line-d{stroke:#bc7842}.db-line-e{stroke:#39899e}.db-chart-legend{display:flex;gap:20px;font-size:11px;margin-bottom:10px}.db-chart-legend span:before{content:'●';margin-right:5px}.db-flow-summary{font-size:11px;margin:12px 0 0;color:#58705d}.db-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}.db-card p{font-size:13px;margin:10px 0}.db-card small{font-size:10px;color:#647665}.db-controls label:not(.db-check){display:block;font-size:12px;margin-top:20px}.db-controls output{float:right;font-weight:bold}.db-controls input[type=range]{width:100%;accent-color:#4f8861;margin:12px 0}.db-check{display:flex;align-items:center;gap:8px;font-size:12px;margin:15px 0}.db-check input{accent-color:#4f8861;width:17px;height:17px}.db-status{color:#4f8058}.db-status.warning{color:#b06621}.db-meters{display:flex;gap:25px}.db-meters span{display:block;font-size:10px}.db-meters strong{font-size:22px}.db-water-pipe{color:#a9b6ab;font-size:22px;letter-spacing:2px}.db-water-pipe.active{color:#3d7cb2}.db-note{font-size:11px;color:#647665;margin:20px 0 0;max-width:950px}@media(max-width:1000px){.db-kpis{grid-template-columns:repeat(3,1fr)}.db-layout{grid-template-columns:1fr}.db-controls{display:grid;grid-template-columns:1fr 1fr;gap:0 25px}.db-controls h3{grid-column:1/-1}.db-controls label:not(.db-check){grid-column:1/-1}.db-controls input[type=range]{grid-column:1/-1}}@media(max-width:550px){.db-kpis{grid-template-columns:1fr 1fr}.db-kpi{padding:14px}.db-kpi strong{font-size:25px}.db-detail-grid{grid-template-columns:1fr}.db-card{padding:18px}.db-controls{display:block}.mg-legend{gap:8px;flex-wrap:wrap}.dashboard .wrap{padding:45px 18px}}

.portrait{width:160px;height:160px;border-radius:50%;overflow:hidden;margin-bottom:25px;border:3px solid #dce5d7}.portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 36%}.about h2{font-size:27px;letter-spacing:-.5px;color:#617d70;margin-bottom:15px}.about .wrap>div:first-child>p{font-size:15px;color:#64776d;max-width:310px}@media(max-width:760px){.portrait{width:140px;height:140px}.about h2{font-size:25px}}

/* Align the introduction and diagram; place the explanation in the left column. */
.hero .wrap{align-items:start}.hero-context{margin-top:38px;padding-top:28px;border-top:1px solid var(--line);max-width:570px}.hero-context h2,.hero-component h2{font-size:23px;letter-spacing:-.5px;line-height:1.25;margin-bottom:14px}.hero-context p{font-size:15px;color:var(--muted);margin-bottom:16px}.hero-component{margin-top:30px;padding:23px 25px;border:1px solid #c9d8cf;border-radius:12px;background:#edf2e9;max-width:570px}.hero-component h2{font-size:18px;margin-bottom:8px}.component-hint{font-size:12px;line-height:1.5;color:var(--muted);margin-bottom:15px}.hero-component .mg-info{min-height:155px;padding-top:15px;font-size:14px}.hero-component .mg-info div{font-size:12px}.microgrid .mg-note{margin-top:8px}@media(max-width:1050px){.hero-context{max-width:none}.hero-component{max-width:none}.hero-component .mg-info{min-height:125px}}@media(max-width:550px){.hero-context{margin-top:30px}.hero-component{padding:20px}.hero-component .mg-info{min-height:165px}}

/* Keep multi-column content sections aligned at their top edges. */
.hero .wrap,.case .wrap,.imp .wrap,.about .wrap,.contact .wrap,.section-head{align-items:start}