/* A calmer editorial rhythm: smaller film, authentic roof photography. */
.media-film{display:grid;grid-template-columns:.74fr 1fr;gap:18px 64px;align-items:center;padding-block:72px 55px}
.film-intro{grid-column:1;grid-row:1;display:block;margin:0}.film-intro h2{font-size:clamp(32px,3.2vw,43px);line-height:1.1}.film-intro>div:last-child{margin-top:25px}.film-intro>div:last-child>p:first-child{font-size:16px;line-height:1.75;max-width:360px}.film-intro .media-provenance{font-size:12px;margin-top:17px}.film-frame{grid-column:2;grid-row:1;width:100%;max-width:660px;justify-self:end;border:1px solid #102d231a;box-shadow:0 16px 40px #102d2310}.film-foot{grid-column:2;grid-row:2;display:flex;gap:20px;padding-top:0;align-items:start}.film-foot p{font-size:12px;max-width:310px}.film-foot .text-link{font-size:13px}.film-play{gap:10px;padding:9px 15px 9px 9px}.film-play>span{width:35px;height:35px;font-size:14px}.film-play b{font-size:14px}.film-play small{font-size:11px}
.day-story{padding-top:70px;padding-bottom:50px}.story-chapters article{padding-block:27px}.story-heading h2{font-size:clamp(32px,3.4vw,46px)}.media-systems{padding-top:35px;padding-bottom:70px}.media-systems .section-heading{margin-bottom:29px}.media-systems h2{font-size:clamp(32px,3.3vw,45px)}.system-photo-card{background:#edf1e8;border:1px solid #dae2d3;box-shadow:0 4px 15px #102d2304}.system-photo-card>img{height:280px}.system-photo-copy{padding:28px}.system-photo-copy h3{font-size:29px}
.media-design{gap:65px;grid-template-columns:.84fr 1.16fr;padding-block:20px 85px;align-items:center}.design-copy h2{font-size:clamp(32px,3.3vw,44px)}.design-copy>p:not(.eyebrow){font-size:16px;line-height:1.75;max-width:410px}.design-copy .eyebrow{font-size:11px;letter-spacing:.1em;max-width:380px}
.roof-study{min-width:0;border:1px solid #d7e1cf;background:#edf1e8;border-radius:10px;overflow:hidden;box-shadow:0 18px 50px #102d230a}.roof-study-photo{width:100%;position:relative;aspect-ratio:16/10;overflow:hidden;background:#102d23;isolation:isolate}.roof-study-photo>img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;object-position:center;display:block;border:0;border-radius:0}.roof-study-photo>svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.study-badge{position:absolute;top:16px;left:16px;background:#102d23ed;color:#f7f7f2;padding:7px 10px;font-size:10px;letter-spacing:.09em;line-height:1.4;border-radius:3px;z-index:2}.study-image-note{position:absolute;right:14px;bottom:12px;background:#102d23ba;color:#f7f7f2;padding:4px 8px;font-size:10px;line-height:1.5;border-radius:3px}.study-layout path{fill:#a2d98b22;stroke:#a2d98b;stroke-width:5;stroke-linejoin:round}.study-layout circle{fill:#f7f7f2;stroke:#146b4a;stroke-width:4}.study-layout,.study-sun,.study-shadow{transition:opacity .35s}.study-sun,.study-shadow{opacity:0}.study-sun circle{fill:#d3e9a7;stroke:#f7f7f2;stroke-width:4}.study-sun path{fill:none;stroke:#f0f4d6;stroke-width:4;stroke-linecap:round}.study-sun .sun-ray{stroke:#d7eeb6;stroke-width:3;stroke-dasharray:10 10}.study-shadow path{fill:#102d2399;stroke:#a2d98b;stroke-width:3;stroke-dasharray:10 8}.roof-study-photo[data-study-mode=sunlight] .study-layout{opacity:.45}.roof-study-photo[data-study-mode=sunlight] .study-sun{opacity:1}.roof-study-photo[data-study-mode=shading] .study-layout{opacity:.3}.roof-study-photo[data-study-mode=shading] .study-shadow{opacity:1}
.study-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:15px 18px 0}.study-tabs button{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:11px 13px;border:1px solid #b7c9aa;background:transparent;color:#375c2c;border-radius:4px;font-size:13px;min-height:44px;text-align:left;cursor:pointer}.study-tabs button>span{font-size:10px;color:#78906a}.study-tabs button[aria-pressed=true]{background:#102d23;border-color:#102d23;color:#f7f7f2}.study-tabs button[aria-pressed=true]>span{color:#a2d98b}.study-tabs button:hover{border-color:#146b4a}.study-explanation{padding:19px 20px 16px;min-height:113px}.study-explanation strong{display:block;font-size:17px;font-weight:400;line-height:1.4;letter-spacing:-.015em}.study-explanation p{font-size:14px;line-height:1.6;margin-top:8px;max-width:530px}.study-caption{font-size:11px;line-height:1.6;color:#788371;padding:0 20px 19px;max-width:100%}.media-panorama{height:340px;margin-bottom:60px}.panorama-copy{padding-top:85px}.panorama-copy h2{font-size:clamp(35px,3.8vw,52px)}.work{padding-top:30px}
@media(max-width:1100px){.media-film{gap:17px 40px;grid-template-columns:.8fr 1fr}.film-intro h2{font-size:35px}.film-foot{display:block}.film-foot .text-link{margin-top:10px}.media-design{gap:40px}.system-photo-card>img{height:245px}.study-tabs{margin-inline:14px;gap:5px}.study-tabs button{font-size:12px;padding-inline:10px}}
@media(max-width:800px){.media-film{grid-template-columns:1fr;gap:25px;padding-block:55px 45px;max-width:680px}.film-intro,.film-frame,.film-foot{grid-column:1;grid-row:auto}.film-intro>div:last-child{margin-top:20px}.film-intro>div:last-child>p:first-child{max-width:600px}.film-frame{max-width:100%}.film-foot{display:flex;gap:20px}.film-foot .text-link{margin-top:0}.day-story{padding-top:55px}.media-design{grid-template-columns:1fr;gap:30px;padding-bottom:60px}.design-copy>p:not(.eyebrow){max-width:640px}.roof-study{max-width:680px;width:100%}.roof-study-photo{aspect-ratio:16/9}.study-explanation{min-height:100px}.media-panorama{height:330px;margin-bottom:45px}}
@media(max-width:560px){.media-film{padding-block:45px 35px;gap:22px}.film-intro h2{font-size:32px}.film-intro>div:last-child>p:first-child{font-size:15px;line-height:1.7}.film-foot{display:block}.film-foot .text-link{margin-top:13px}.film-play b{font-size:12px}.film-play small{font-size:10px}.film-play>span{width:30px;height:30px}.media-systems{padding-block:25px 50px}.system-photo-card>img{height:225px}.system-photo-copy{padding:25px 23px}.system-photo-copy h3{font-size:27px}.media-design{padding-top:0;padding-bottom:45px;gap:27px}.design-copy h2{font-size:31px}.roof-study-photo{aspect-ratio:4/3}.study-badge{top:11px;left:11px;font-size:8px;padding:6px 8px}.study-image-note{font-size:8px;right:9px;bottom:9px}.study-tabs{margin:13px 12px 0;gap:5px}.study-tabs button{font-size:12px;padding:10px;min-height:44px}.study-tabs button>span{font-size:9px}.study-explanation{padding:17px 15px 14px;min-height:115px}.study-explanation strong{font-size:16px}.study-explanation p{font-size:14px}.study-caption{font-size:10px;padding:0 15px 17px}.media-panorama{height:300px}.panorama-copy{padding-top:75px}.panorama-copy h2{font-size:35px}}
@media(prefers-reduced-motion:reduce){.study-layout,.study-sun,.study-shadow{transition:none}}

/* Each scene shares the same responsive text slots, including wrapped lines. */
#energy-kicker,#energy-title,#energy-text{display:grid;align-items:start}
.scene-copy-current,.scene-copy-reserve{grid-area:1/1;min-width:0}
.scene-copy-reserve{visibility:hidden;pointer-events:none;user-select:none}

#start .motion-intro .eyebrow{font-size:12px;line-height:1.6;letter-spacing:.07em;margin:0 0 17px}
#start .motion-intro>p:not(.eyebrow){font-size:17px;line-height:1.55;margin-top:24px;max-width:310px}
#start .scene-narration .eyebrow{font-size:12px;line-height:1.6;letter-spacing:.09em;margin:0 0 10px}
#start .scene-narration>p:not(.eyebrow){font-size:15px;line-height:1.6;margin:11px 0 0;max-width:535px}
@media(min-width:801px) and (max-height:740px){#start .motion-intro>p:not(.eyebrow){font-size:16px}#start .scene-narration .eyebrow{margin-bottom:7px}#start .scene-narration>p:not(.eyebrow){margin-top:8px}}
@media(max-width:800px){#start .motion-intro>p:not(.eyebrow){font-size:15px;margin-top:13px;max-width:none}#start .scene-narration .eyebrow{font-size:11px;margin-bottom:11px}#start .scene-narration>p:not(.eyebrow){font-size:15px;line-height:1.6;margin-top:13px;max-width:none}}

/* Identical line wrapping in every lighting mode. */
#motion-title em{display:block;white-space:normal;font:inherit;letter-spacing:inherit;line-height:inherit;transform:none;transition:none}

/* The energy bar explains the scene; roof entry stays on the roof and in the header. */
#start .motion-controls{margin-top:0;justify-content:center}
@media(max-width:800px){#start .motion-controls{width:100%}}

/* All scene actions live together on the energy bar, leaving the photograph clear. */
#start .motion-controls{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:12px}
#start .motion-primary{order:1;width:100%;margin:0;background:#a2d98b;color:#102d23}
#start .motion-primary:hover{background:#c5e8b7}
#start .motion-controls .segmented{order:0}

/* Give the energy bar a stronger editorial hierarchy without empty text rows. */
#start .scene-dock{grid-template-columns:minmax(0,1fr) 325px;gap:42px;padding:24px 30px;align-items:center}
#start .scene-narration{max-width:650px;width:100%}
#start .scene-narration .eyebrow{font-size:10px;font-weight:600;line-height:1.4;letter-spacing:.14em;margin-bottom:9px;color:#a2d98b}
#start .scene-narration h2{font-size:clamp(28px,2.7vw,40px);line-height:1.1;letter-spacing:-.04em;font-weight:400}
#start .scene-narration>p:not(.eyebrow){font-size:16px;line-height:1.5;max-width:600px;margin:10px 0 0;color:#d6e2cf}
#start .motion-controls{gap:10px}
#start .motion-controls .segmented button{font-size:13px;min-height:40px;padding:9px 14px}
#start .motion-primary{min-height:48px}
#start .motion-primary .roof-action-label{font-size:16px}
@media(min-width:1600px){#start .scene-dock{padding:27px 34px;grid-template-columns:minmax(0,1fr) 350px}}
@media(min-width:801px) and (max-width:1050px){#start .scene-dock{grid-template-columns:minmax(0,1fr) 300px;gap:28px;padding:22px}#start .scene-narration h2{font-size:29px}}
@media(max-width:800px){#start .scene-dock{grid-template-columns:1fr;gap:21px;padding:24px}#start .scene-narration{order:-1}#start .scene-narration h2{font-size:30px}#start .scene-narration>p:not(.eyebrow){font-size:15px;max-width:none}#start .motion-controls{max-width:440px;width:100%;justify-self:start}}

/* Readable supporting copy, independently of the photograph or lighting mode. */
#start .motion-intro>p:not(.eyebrow){color:#fff;font-size:18px;font-weight:500;line-height:1.5;background:#102d23e6;border-left:2px solid #a2d98b;border-radius:0 5px 5px 0;padding:12px 14px;max-width:340px;text-shadow:none}
#start .scene-narration>p:not(.eyebrow){color:#f7f7f2;font-size:18px;font-weight:500;line-height:1.5;max-width:650px;letter-spacing:0}
@media(max-width:800px){#start .motion-intro>p:not(.eyebrow){font-size:16px;max-width:440px;padding:11px 13px;background:#102d2380}#start .scene-narration>p:not(.eyebrow){font-size:17px}}

/* Equal mode segments and an EV-only charging glow registered to the photograph. */
#start .motion-controls .segmented{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;width:100%;max-width:none;align-items:stretch}
#start .motion-controls .segmented button{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;height:42px;min-height:42px;padding:0 5px;margin:0;line-height:1.1;border:0;border-radius:24px;white-space:nowrap;text-align:center;font-size:13px;box-sizing:border-box;transform:none}
.ev-neon-overlay{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;opacity:0;transition:opacity .45s}
.hero-sim[data-time=ev] .ev-neon-overlay{opacity:1}
@media(max-width:800px){.ev-neon-overlay{object-fit:contain}#start .motion-controls .segmented button{font-size:12px;height:44px;min-height:44px}}
@media(prefers-reduced-motion:reduce){.ev-flow{animation:none}.ev-neon-overlay{transition:none}}

.ev-charger-halo{opacity:.45}
.hero-sim[data-time=ev] .ev-charger-halo{animation:ev-charger-pulse 2.2s ease-in-out infinite}
.hero-sim[data-time=ev] .ev-charger-light{animation:ev-charger-core 2.2s ease-in-out infinite}
@keyframes ev-charger-pulse{0%,100%{opacity:.25;stroke-width:6}50%{opacity:1;stroke-width:14}}
@keyframes ev-charger-core{0%,100%{stroke:#7ce69a}50%{stroke:#efffce}}
@media(prefers-reduced-motion:reduce){.hero-sim[data-time=ev] .ev-charger-halo,.hero-sim[data-time=ev] .ev-charger-light{animation:none}}

/* A restrained working indicator on the charger's light rim. */
.ev-charger-halo{stroke:#b6f56b;opacity:.1;stroke-width:3}
.ev-charger-light{stroke:#d1ff85;stroke-width:2.3;opacity:.9}
.hero-sim[data-time=ev] .ev-charger-halo{animation:ev-charger-soft-halo 3.4s ease-in-out infinite}
.hero-sim[data-time=ev] .ev-charger-light{animation:ev-charger-soft-rim 3.4s ease-in-out infinite}
@keyframes ev-charger-soft-halo{0%,100%{opacity:.18;stroke-width:3}50%{opacity:.42;stroke-width:6}}
@keyframes ev-charger-soft-rim{0%,100%{opacity:.72}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.hero-sim[data-time=ev] .ev-charger-halo,.hero-sim[data-time=ev] .ev-charger-light{animation:none}}

/* Broad, low-contrast facets echo the G without competing with the copy. */
#start .scene-dock{background-color:#102d23;background-image:url('assets/energy-bar-facets.svg?v=4');background-size:100% 100%;background-repeat:no-repeat;backdrop-filter:none;border-color:#668c694d}
@media(max-width:800px){#start .scene-dock{background-size:100% 100%;background-position:center}}

#start .motion-controls .segmented{background:#153d2bd9;border-color:#d8ecc680}