:root {font-family: Arial, Helvetica, sans-serif; color:#162b37; background:#f4f7f7;}
* {box-sizing:border-box;}
body {margin:0;}
.topbar {background:#14363c; color:#fff; min-height:66px; display:flex; align-items:center; justify-content:space-between; padding:0 max(3vw,24px); gap:20px;}
.brand {font-size:19px; font-weight:800; letter-spacing:.2em;}
.topbar .brand {color:#fff; text-decoration:none;}
.topbar-right {font-size:11px; letter-spacing:.16em; color:#b7d8d6; text-align:right;}
main {max-width:1500px; margin:auto; padding:36px 24px 24px;}
.hero {padding:15px 0 24px;}
.eyebrow {font-size:11px; letter-spacing:.18em; color:#127b78; font-weight:700;}
h1 {font-size:clamp(30px,3vw,48px); line-height:1.12; letter-spacing:-.035em; margin:12px 0 12px;}
.hero p {font-size:16px; color:#536970; max-width:730px; line-height:1.55; margin:0;}
.hero-cta {display:inline-block; margin-top:20px; padding:11px 17px; border-radius:8px; background:#127b78; color:#fff; text-decoration:none; font-weight:700; font-size:14px;}
.hero-cta:hover {background:#0e6462;}
.kpi-grid {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:12px 0 22px;}
.kpi-card {background:#fff; border:1px solid #e1e9e9; border-radius:13px; padding:18px; min-height:168px; box-shadow:0 4px 16px rgba(18,56,58,.035);}
.kpi-label {font-weight:700; font-size:11px; letter-spacing:.1em; color:#658086; min-height:26px;}
.kpi-value {font-size:clamp(25px,2.1vw,35px); line-height:1.2; font-weight:750; white-space:nowrap; letter-spacing:-.04em;}
.unit {display:block; font-size:12px; font-weight:600; letter-spacing:0; color:#61767c; margin-top:3px;}
.kpi-delta {font-size:13px; font-weight:700; color:#127b78; margin-top:15px;}
.kpi-period {font-size:12px; color:#78888c; margin-top:7px;}
.panel-grid {display:grid; grid-template-columns:1.2fr 1fr; gap:24px; margin-top:24px; align-items:stretch;}
.panel {background:#fff; border:1px solid #e1e9e9; border-radius:14px; padding:24px 24px 18px; min-width:0; min-height:535px; overflow:hidden;}
.panel h2 {font-size:19px; letter-spacing:-.02em; margin:0 0 5px;}
.panel p {color:#698087; font-size:13px; margin:0 0 14px; line-height:1.45;}
.panel-head {display:flex; align-items:flex-start; justify-content:space-between; gap:14px;}
.year-select {min-width:145px; font-size:12px;}
.panel-note {border-top:1px solid #edf1f1; padding-top:12px; margin-top:6px !important;}
.panel .dash-graph {height:430px; min-height:430px;}
.water-section {margin-top:24px;}
.water-panel {min-height:590px;}
.water-panel .dash-graph {height:450px; min-height:450px;}
.lower {grid-template-columns:1.2fr 1fr;}
.reading-panel {padding:30px 32px;}
.reading-panel h2 {font-size:23px; line-height:1.22; margin:12px 0 16px; max-width:430px;}
.reading-panel p {font-size:15px; color:#3d545c; line-height:1.6;}
.balance {display:flex; flex-direction:column; background:#f1f7f6; border-radius:10px; padding:15px 18px; margin:20px 0;}
.balance span {font-size:10px; letter-spacing:.1em; color:#537b7a; font-weight:700;}
.balance strong {font-size:28px; margin:4px 0;}
.balance small {color:#688080;}
footer {padding:22px 2px 6px; color:#74868a; font-size:12px; line-height:1.45;}
footer p {margin:4px 0;}
footer a {color:#127b78; font-weight:700;}
@media (max-width:1150px) {.kpi-grid {grid-template-columns:repeat(3,minmax(0,1fr));}.panel-grid,.lower {grid-template-columns:1fr;}}
@media (max-width:650px) {main {padding:18px 12px;} .topbar {padding:0 14px;} .topbar-right {font-size:9px;} .kpi-grid {grid-template-columns:repeat(2,minmax(0,1fr));}.kpi-card {min-height:155px;padding:14px;}.panel {padding:16px 12px 8px;} .panel-head {flex-direction:column;} .year-select {width:100%;}}