.hero-visual.hero-energy{height:auto;aspect-ratio:1;align-self:center;border-radius:24px;overflow:hidden;background:#1c252b;box-shadow:0 20px 55px #16212918}
.hero-visual.hero-energy::after{display:none}
.hero-visual.hero-energy>img{display:block;width:100%;height:100%;object-fit:cover;filter:none;border-radius:0;transition:transform 1s ease}
.hero-energy:hover>img{transform:scale(1.025)}
.energy-kicker{position:absolute;top:24px;left:24px;color:white;font:700 12px/1.5 Manrope,sans-serif;letter-spacing:1.3px;text-shadow:0 1px 8px #000}
.energy-kicker:before{content:'';display:inline-block;width:7px;height:7px;background:#ff6a00;border-radius:50%;margin-right:9px}
.energy-kicker span{font-weight:400;opacity:.85}
.energy-story{position:absolute;bottom:0;left:0;right:0;padding:58px 30px 22px;background:linear-gradient(transparent,#101b24e8 40%,#101b24fa);color:#fff}
.energy-story>p{font-size:13px;color:#e5e7eb;margin:0 0 7px}
.energy-story h2{font-size:clamp(25px,2.6vw,38px);line-height:1.32;margin:0 0 15px;color:#fff}
.energy-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:46px;padding:10px 16px;max-width:290px;background:#ff6a00;color:#171a21;border-radius:9px;font-weight:700;font-size:14px;transition:background .2s}
.energy-cta:hover{background:#ff923f}
.energy-story small{display:block;margin-top:11px;color:#bfc6cd;font-size:10px}
.energy-point{position:absolute;display:flex;align-items:center;gap:8px;color:#fff;min-height:44px;min-width:44px;z-index:2}
.point-solar{left:28%;top:29%}.point-ev{left:8%;top:49%}.point-home{left:66%;top:39%}
.point-dot{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#ff6a00;color:#171a21;font-size:23px;box-shadow:0 0 0 5px #ff6a0033;transition:box-shadow .25s,transform .25s}
.point-label{font-size:12px;font-weight:600;background:#14212ae8;padding:7px 10px;border-radius:6px;white-space:nowrap}
.energy-point:hover .point-dot,.energy-point:focus-visible .point-dot{box-shadow:0 0 0 9px #ff6a0044;transform:rotate(90deg)}
.energy-point:focus-visible,.energy-cta:focus-visible{outline:3px solid white;outline-offset:4px}
@media(max-width:600px){
 .hero-visual.hero-energy{aspect-ratio:auto;border-radius:20px}
 .hero-visual.hero-energy>img{height:auto;aspect-ratio:5/4;object-fit:cover;object-position:center 25%}
 .hero-energy:hover>img{transform:none}
 .energy-points{position:absolute;inset:0 0 auto;height:auto;aspect-ratio:5/4}
 .energy-kicker{top:14px;left:16px;font-size:9px;letter-spacing:1px}
 .energy-story{position:relative;padding:17px 18px 18px;background:#101b24}
 .energy-story>p{font-size:12px;margin-bottom:6px}
 .energy-story h2{font-size:clamp(23px,6vw,28px);line-height:1.3;margin-bottom:13px}
 .energy-story h2 br{display:none}
 .energy-cta{width:100%;max-width:none;font-size:13px}
 .point-label{font-size:10px;padding:5px 7px}
 .point-dot{width:26px;height:26px}
 .energy-point{gap:5px}
 .point-solar{left:27%;top:27%}
 .point-home{left:59%;top:41%}
 .point-ev{left:8%;top:55%}
}
@media(prefers-reduced-motion:reduce){.hero-visual.hero-energy>img,.point-dot,.energy-cta{transition:none}.hero-energy:hover>img{transform:none}}
/* Draw the plus geometrically so font metrics cannot offset its center. */
.energy-point .point-dot{position:relative;font-size:0;flex-shrink:0}
.point-dot::before,.point-dot::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:2px;background:currentColor;border-radius:1px;transform:translate(-50%,-50%)}
.point-dot::after{transform:translate(-50%,-50%) rotate(90deg)}