/* The artwork stays still; only real SVG flow routes move. */
.hero-content { max-width:none; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; gap:32px; padding:56px 0 48px; }
.hero-copy { min-width:0; }
.hero-copy h1 { font-size:clamp(40px,4.3vw,58px); line-height:1.12; letter-spacing:-2px; }
.hero-copy .hero-description { font-size:16px; margin-bottom:28px; }
.hero-copy .address-entry { flex-direction:column; }
.hero-copy .journey { flex-wrap:wrap; gap:12px 22px; margin-top:24px; padding-top:24px; }
.energy-visual { min-width:0; margin:0; background:#fff; border:1px solid #d9e1e9; border-radius:20px; overflow:hidden; text-align:left; }
.hero-energy { border:0; align-self:center; }
.energy-heading { padding:24px 24px 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; }
.energy-heading h2,.energy-heading h3 { font-size:18px; line-height:1.4; font-weight:600; margin:0; letter-spacing:-.3px; }
.energy-badge { font-size:10px; font-weight:600; letter-spacing:.8px; color:#526477; background:#f0f4f7; padding:5px 9px; border-radius:6px; text-transform:uppercase; }
.energy-art { position:relative; width:100%; aspect-ratio:3/2; margin:12px 0 0; background:#fff; }
.energy-art img { display:block; width:100%; height:100%; object-fit:contain; }
.energy-diagram { position:absolute; inset:0; pointer-events:none; }
.energy-diagram svg { width:100%; height:100%; display:block; overflow:visible; }
.energy-solar { --energy-color:#ea580c; }
.energy-home { --energy-color:#008faf; }
.energy-battery { --energy-color:#00a34a; }
.energy-grid { --energy-color:#2563eb; }
.energy-ev { --energy-color:#9333ea; }
.energy-route path { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.energy-outline { stroke:#fff; stroke-width:13; }
.energy-track { stroke:#e2e8f0; stroke-width:4; }
.energy-route.is-active .energy-track { stroke:var(--energy-color); stroke-opacity:.2; stroke-width:6; }
.energy-stream { stroke:var(--energy-color); stroke-width:7; stroke-dasharray:8 15; opacity:0; animation:energy-out 1.4s linear infinite; }
.energy-arrow { stroke:var(--energy-color); stroke-width:4.5; opacity:0; }
.energy-route.is-active .energy-stream { opacity:1; }
.energy-route.is-active .energy-arrow { opacity:1; }
.energy-route.is-inward .energy-stream { animation-direction:reverse; }
.energy-junction { position:absolute; left:53.5%; top:54.72%; transform:translate(-50%,-50%); padding:8px 13px; border:1px solid #bdd0ea; border-radius:10px; background:#fff; color:#1859b7; font-size:12px; font-weight:600; line-height:1.4; box-shadow:0 2px 10px #1859b714; }
@keyframes energy-out { to { stroke-dashoffset:-46; } }
.energy-paused .energy-stream,.energy-offscreen .energy-stream,.energy-hidden-tab .energy-stream { animation-play-state:paused; }
.energy-ui { padding:0 24px 24px; }
.energy-readouts { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin:8px 0 20px; }
.energy-reading { min-width:0; border-top:4px solid var(--energy-color); padding-top:10px; }
.energy-reading dt { color:#526477; font-size:11px; font-weight:400; }
.energy-reading dd { color:#142535; font-size:14px; font-weight:600; line-height:1.5; margin:5px 0 0; overflow-wrap:anywhere; }
/* Inactive text still sizes the grid, so wrapping never moves the scenario controls. */
.energy-reading-stable { display:grid; }
.energy-reading-stable > span { grid-area:1/1; min-width:0; }
.energy-reading-reserve { visibility:hidden; }
.energy-reading small { display:block; color:#526477; font-size:10px; line-height:1.5; margin-top:4px; }
.energy-controls { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.energy-scenes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; gap:4px; padding:4px; border-radius:10px; background:#f0f4f7; }
.energy-scenes button,.energy-motion { font-family:inherit; font-size:11px; line-height:1.4; min-height:40px; border:0; border-radius:7px; padding:9px 12px; background:transparent; color:#34475a; cursor:pointer; }
.energy-scenes button[aria-pressed=true] { background:#fff; box-shadow:0 1px 5px #14253516; color:#1859b7; font-weight:600; }
.energy-motion { margin-left:auto; text-decoration:underline; text-underline-offset:3px; }
.energy-controls button:hover { background:#e7eef6; }
.energy-controls :focus-visible { outline:3px solid #1859b7; outline-offset:3px; }
/* Reserve the tallest complete description at the current width and text size. */
.energy-narrative--scenes { display:grid; }
.energy-scene-copy { grid-area:1/1; min-width:0; visibility:hidden; }
.energy-scene-copy.is-current { visibility:visible; }
.energy-explanation { font-size:13px; line-height:1.6; color:#142535; margin:16px 0 8px; min-height:42px; }
.energy-opportunity { font-size:12px; line-height:1.6; color:#21503d; background:#edf7f1; border-left:3px solid #12815c; border-radius:4px; padding:10px 12px; margin:0 0 12px; }
.energy-opportunity[hidden] { display:none; }
.energy-scope { font-size:11px; color:#526477; line-height:1.6; margin:0; }
.estimate-energy { margin:28px 0; }
.estimate-energy[hidden] { display:none; }
.estimate-energy .energy-art { max-width:760px; margin:12px auto 0; }
.energy-mode-controls { padding:20px 24px 0; }
.energy-modes { grid-template-columns:repeat(2,minmax(0,1fr)); }
.energy-view-note { min-height:3.2em; margin:10px 0 0; font-size:12px; line-height:1.6; color:#34475a; }
.energy-event-buttons button small { display:block; font-size:10px; font-weight:400; margin-top:3px; }
.energy-event-buttons button:disabled { cursor:default; color:#617083; background:transparent; }
.estimate-energy .energy-reading small { min-height:3em; }
.energy-mode-controls :focus-visible { outline:3px solid #1859b7; outline-offset:3px; }
.energy-tour-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:52px; margin:12px 0 0; }
.energy-tour-heading strong { color:#142535; font-size:17px; line-height:1.5; }
.energy-tour-play { flex-shrink:0; padding:11px 15px; border:1px solid #1859b7; border-radius:8px; background:#1859b7; color:white; font-family:inherit; font-size:12px; font-weight:600; line-height:1.4; cursor:pointer; }
.energy-tour-play:disabled { background:#edf2f7; color:#526477; border-color:#cbd5e1; cursor:default; }
.energy-tour-play[hidden],.energy-battery-insight[hidden],[data-charge-interval][hidden] { display:none; }
.energy-battery-insight { margin-top:20px; padding:18px; border:1px solid #ccdce7; border-radius:12px; background:#f5f8fb; color:#142535; }
.energy-battery-insight h4 { margin:0 0 8px; font-size:16px; }
.energy-battery-insight p { font-size:12px; line-height:1.6; margin:8px 0; }
.energy-runtime-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:14px 0; }
.energy-runtime-grid div { padding:10px; background:white; border-radius:8px; }
.energy-runtime-grid span { display:block; font-size:11px; color:#526477; }
.energy-runtime-grid strong { display:block; margin-top:4px; font-size:18px; font-variant-numeric:tabular-nums; }
.energy-battery-insight meter { width:100%; height:16px; accent-color:#008646; }
.energy-battery-insight [data-charge-interval] { margin-top:14px; min-height:160px; border-top:1px solid #ccdce7; padding-top:10px; }
.energy-time { flex:1; min-width:180px; }
.energy-time label { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:#34475a; }
.energy-time output { color:#1859b7; font-weight:600; font-size:17px; font-variant-numeric:tabular-nums; }
.energy-time input { width:100%; accent-color:#1859b7; min-height:40px; margin:0; cursor:pointer; }
@media(min-width:1001px) { .hero-energy .energy-ui { padding:0 12px 16px; } .hero-energy .energy-heading { padding:16px 12px 0; } }
@media(max-width:1000px) { .hero-content { grid-template-columns:1fr; max-width:760px; gap:32px; } .hero-copy .address-entry { flex-direction:row; } .hero-copy h1 { font-size:clamp(38px,6vw,60px); } }
@media(max-width:600px) {
 .energy-junction { font-size:10px; padding:6px 9px; border-radius:7px; }
 .hero-content { padding-top:36px; }
 .hero-copy .address-entry { flex-direction:column; }
 .energy-heading { padding:20px 16px 0; }
 .energy-heading h2,.energy-heading h3 { font-size:17px; }
 .energy-ui { padding:0 16px 20px; }
 .energy-mode-controls { padding:16px 16px 0; }
 .energy-view-note { min-height:6.4em; }
 .energy-tour-heading { align-items:flex-start; flex-direction:column; min-height:104px; }
 .energy-runtime-grid { gap:6px; }
 .energy-runtime-grid div { padding:8px 6px; }
 .energy-runtime-grid strong { font-size:15px; }
 .energy-readouts { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 12px; }
 .energy-reading dd { font-size:14px; }
 .energy-scenes { width:100%; }
 .energy-scenes button { flex:1; min-height:44px; }
 .energy-motion { min-height:44px; margin-left:0; padding-left:0; }
 .energy-time { flex-basis:100%; }
 .estimate-energy .energy-heading { display:block; }
 .estimate-energy .energy-badge { display:inline-block; margin-top:8px; }
}
@media(prefers-reduced-motion:reduce) { .energy-stream { animation:none; } }
@media print { .energy-stream { animation:none; } .energy-controls { display:none; } }