.energy-section{background:#52a9e9 url(./assets/energy-meadow-plate.webp) center/cover;color:#03172e;isolation:isolate;--meadow-scale:1;--meadow-x:0px;--meadow-y:0px}
.energy-section:before{display:none}.energy-world{position:absolute;inset:0;overflow:hidden}.meadow-stage{position:absolute;width:1672px;height:941px;transform-origin:0 0;pointer-events:none}.meadow-plate{position:absolute;inset:0;width:100%;height:100%;user-select:none}.meadow-rotor{position:absolute;object-fit:contain;transform-origin:50% 50%;will-change:transform;user-select:none}.rotor-main{width:568px;height:568px;left:426px;top:36px}.rotor-left{width:340px;height:340px;left:192px;top:291px}.rotor-far-one{width:46px;height:46px;left:903px;top:526px}.rotor-far-two{width:38px;height:38px;left:1008px;top:541px}.meadow-plane{position:absolute;left:0;top:0;width:126px;height:auto;visibility:hidden;will-change:transform}
.energy-heading{position:absolute;z-index:3;left:calc(var(--meadow-x) + 95px * var(--meadow-scale));top:calc(var(--meadow-y) + 48px * var(--meadow-scale));pointer-events:none;margin:0}.energy-heading h2{font-family:Arial,Helvetica,sans-serif;font-size:calc(82px * var(--meadow-scale));font-weight:750;letter-spacing:calc(-2.2px * var(--meadow-scale));line-height:1.1;margin:0 0 calc(6px * var(--meadow-scale));color:#00162e;white-space:nowrap}.energy-heading p{margin:0;font-size:calc(32px * var(--meadow-scale));line-height:1.25;color:#03172e}
.energy-section .app-preview{position:absolute;display:block;z-index:3;left:calc(var(--meadow-x) + 1156px * var(--meadow-scale));top:calc(var(--meadow-y) + 143px * var(--meadow-scale));right:auto;width:calc(344px * var(--meadow-scale));transform:none;animation:none}.energy-section .app-preview:before{display:none}.energy-phone-image{display:block;width:100%;height:auto;filter:drop-shadow(18px 28px 22px #14282228)}.energy-section .app-preview>.cta{position:absolute;top:calc(654px * var(--meadow-scale));left:calc(53px * var(--meadow-scale));width:calc(226px * var(--meadow-scale));height:calc(60px * var(--meadow-scale));min-height:44px;padding:0 calc(22px * var(--meadow-scale));font-size:calc(23px * var(--meadow-scale));border:0;border-radius:50px;background:#242525;color:#fff;box-shadow:none;gap:10px;justify-content:center}.energy-section .cta:hover{background:#133b35;transform:translateY(-2px)}
.energy-loading{position:absolute;inset:0;z-index:6;display:grid;place-content:center;justify-items:center;gap:18px;background:#76b9e8;color:#133b53;font-size:14px}.energy-loading[hidden]{display:none}.energy-loading .fitness-loader-ring{border-color:#fff5;border-top-color:#173c59}.energy-heading,.energy-section .app-preview{visibility:hidden}.meadow-ready .energy-heading,.meadow-ready .app-preview{visibility:visible}
.energy-footer{position:absolute;z-index:4;left:24px;right:24px;bottom:14px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.energy-footer>*{pointer-events:auto}.energy-footer .motion-button,.energy-back{color:#1c3c38;background:#ffffffe0;border:1px solid #ffffffa0;box-shadow:0 2px 14px #1a442119;font-size:12px;border-radius:22px;padding:9px 13px}.energy-jump{bottom:83px;right:7%;color:#ffe2c1;background:#3b2038cf;border-color:#f4c7ae38}
.meadow-mobile.energy-section{background-position:35% center}.meadow-mobile .energy-heading{top:27px;left:6%;right:4%}.meadow-mobile .energy-heading h2{font-size:clamp(25px,6.8vw,48px);letter-spacing:-1px;white-space:normal}.meadow-mobile .energy-heading p{font-size:clamp(13px,3.5vw,22px)}.meadow-mobile .app-preview{left:auto;right:7%;top:auto;bottom:100px;width:min(43vw,230px)}.meadow-mobile .app-preview>.cta{position:relative;top:auto;left:auto;margin:18px auto 0;width:95%;height:46px;font-size:16px;min-height:44px;padding:0 14px}.meadow-mobile .energy-footer{left:16px;right:16px;bottom:18px}.meadow-mobile .meadow-stage{overflow:visible}
@media(prefers-reduced-motion:reduce){.energy-section .cta:hover{transform:none}.meadow-rotor,.meadow-plane{will-change:auto}}
/* Keep the rotor region of the packed transparent sheet; the plane has its own layer. */
.meadow-rotor{clip-path:polygon(0 0,100% 0,100% 100%,58% 100%,47% 65%,0 65%)}
.energy-heading h2{font-size:calc(85px * var(--meadow-scale))}.energy-heading p{font-size:calc(33px * var(--meadow-scale))}.energy-phone-image{height:calc(616px * var(--meadow-scale))}
.meadow-ready.energy-section:not(.scene-static){background:#48a4e5}.meadow-ready.energy-section:not(.scene-static)>.scene-poster{display:none}.meadow-mobile .meadow-plate{mask-image:none}.meadow-mobile .energy-heading h2{font-size:clamp(25px,6.8vw,48px)}.meadow-mobile .energy-heading p{font-size:clamp(13px,3.5vw,22px)}.meadow-mobile .energy-phone-image{height:auto}

.meadow-rotor-canvas{position:absolute;inset:0;width:1672px;height:941px;pointer-events:none}.meadow-rotor[hidden],.meadow-rotor-canvas[hidden]{display:none}
/* Shared project typography: the same scale and rhythm as Home Fit. */
.energy-section .energy-heading{left:3.5%;right:7%;top:34px;width:auto;max-width:680px}
.energy-section .energy-heading h2{font-family:Arial,Helvetica,sans-serif;font-size:clamp(38px,4vw,59px);font-weight:750;line-height:1;letter-spacing:-2.5px;margin:0 0 13px;white-space:normal;color:#143c38;text-shadow:0 2px 18px #ffffff60}
.energy-section .energy-heading p{font-size:13px;line-height:1.5;letter-spacing:.1px;max-width:300px;margin:0;color:#284e48}
@media(max-width:900px){.energy-section .energy-heading{left:5%;right:5%;top:30px}.energy-section .energy-heading h2{font-size:43px}}
@media(max-width:700px){.energy-section .energy-heading{top:29px}.energy-section .energy-heading h2{font-size:39px;letter-spacing:-1.7px;margin-bottom:10px}.energy-section .energy-heading p{font-size:11px;max-width:210px}}
@media(max-height:650px) and (max-width:700px){.energy-section .energy-heading{top:22px}.energy-section .energy-heading h2{font-size:32px}}
@media(max-height:540px) and (min-aspect-ratio:6/5){
 .portfolio>.energy-section{min-height:100svh}
 .energy-section .energy-heading{top:22px;max-width:55%}.energy-section .energy-heading h2{font-size:32px;letter-spacing:-1.7px}
 .energy-section .app-preview{left:auto;right:7%;top:20px;width:min(24vw,32vh);transform:none}.energy-section .energy-phone-image{height:auto}
 .energy-section .app-preview>.cta{position:relative;top:auto;left:auto;width:100%;height:44px;margin-top:10px;font-size:14px;padding:0 12px}
}

/* Constrain the UI independently; never zoom the landscape to fit the phone. */
.energy-section:not(.meadow-mobile) .app-preview{left:min(calc(var(--meadow-x) + 1156px * var(--meadow-scale)),calc(95% - 344px * var(--meadow-scale)))}
@media(max-height:540px) and (min-aspect-ratio:6/5){.energy-section:not(.meadow-mobile) .app-preview{left:auto}}

.energy-phone-content{position:relative;width:100%}.energy-app-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

@media(max-width:700px), (max-width:900px) and (max-height:540px){
 .portfolio .energy-section:before{display:block;background:linear-gradient(180deg,#f4f8f2 0,#f4f8f2f2 170px,#f4f8f200 330px)}
 .portfolio .energy-section .energy-heading h2{font-size:clamp(28px,7.5vw,36px);line-height:1.12;letter-spacing:-1px;margin-bottom:12px;text-shadow:none;text-wrap:balance}
 .portfolio .energy-section .energy-heading p{font-size:16px;line-height:1.5;max-width:none;letter-spacing:0;color:#24483e}
}
@media(max-width:700px) and (max-height:650px){
 .portfolio #energy.meadow-mobile .energy-phone-content{width:36vw}
}