/* Solar4life front page: motion, the proof strip, guarantees, reviews, questions. Same tokens as the site. */
:root{--s4l-ink:#173c30;--s4l-mint:#86df94;--s4l-paper:#faf9f5;--s4l-card:#fffef9;--s4l-line:#d7e0d0;--s4l-muted:#5f6f66}
/* motion */
.s4l-motion .s4l-rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.s4l-motion .s4l-rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.s4l-motion .s4l-rv{opacity:1;transform:none;transition:none}}
.s4l-lift article.s4l-hp-card,.s4l-lift .s4l-guar-card,.s4l-lift .s4l-rev-card,.s4l-lift .energy-card{transition:transform .25s ease,box-shadow .25s ease}
.s4l-lift article.s4l-hp-card:hover,.s4l-lift .s4l-guar-card:hover,.s4l-lift .s4l-rev-card:hover,.s4l-lift .energy-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(23,60,48,.12)}
/* sticky, translucent — but never a filter or transform here: those would trap the phone menu (position:fixed) inside the header */
.s4l-sticky-head header.s4l-header{position:sticky;top:0;z-index:60;background:rgba(250,249,245,.94);border-bottom:1px solid rgba(215,224,208,.7)}
.s4l-sticky-head header.s4l-header:has(.wp-block-navigation__responsive-container.is-menu-open){position:relative}
.admin-bar.s4l-sticky-head header.s4l-header{top:32px}
@media (max-width:782px){.admin-bar.s4l-sticky-head header.s4l-header{top:46px}}
/* hero video: sits over the illustration, which stays underneath until the clip plays */
main .hero .hero-art{position:relative;overflow:hidden}
main .hero .hero-art .s4l-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease;pointer-events:none}
main .hero .hero-art.has-video .s4l-hero-video{opacity:1}
main .hero .hero-art.has-video > figure{visibility:hidden}
/* shared */
.s4l-kicker{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--s4l-muted);margin:0 0 10px}
.s4l-proof,.s4l-guar,.s4l-rev{padding:0 var(--wp--style--root--padding-right,24px) 0 var(--wp--style--root--padding-left,24px)}
.s4l-proof-in,.s4l-guar-in,.s4l-rev-in{max-width:var(--wp--style--global--wide-size,1200px);margin:0 auto}
/* proof strip */
.s4l-proof{margin:-8px 0 8px}
.s4l-proof-in{border-top:1px solid var(--s4l-line);border-bottom:1px solid var(--s4l-line);padding:22px 0}
.s4l-proof-t{margin:0 0 12px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--s4l-muted)}
.s4l-proof-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px 28px}
.s4l-proof-list li{display:flex;flex-direction:column;gap:2px}
.s4l-proof-n{font-size:34px;font-weight:600;letter-spacing:-.5px;line-height:1;color:var(--s4l-ink);font-variant-numeric:tabular-nums}
.s4l-proof-l{font-size:14px;color:var(--s4l-ink)}
.s4l-proof-s{font-size:12px;color:var(--s4l-muted)}
/* guarantees */
.s4l-guar{padding-top:56px;padding-bottom:56px}
.s4l-guar h2{margin:0 0 22px}
.s4l-guar-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.s4l-guar-card{background:var(--s4l-card);border:1px solid var(--s4l-line);border-radius:16px;padding:20px 22px;position:relative}
.s4l-guar-tick{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--s4l-mint);color:var(--s4l-ink);font-weight:700;margin:0 0 12px}
.s4l-guar-card h3{margin:0 0 6px;font-size:17px}
.s4l-guar-card p{margin:0;color:var(--s4l-muted);font-size:14.5px;line-height:1.5}
/* reviews */
.s4l-rev{padding-top:56px;padding-bottom:40px}
.s4l-rev h2{margin:0 0 18px}
.s4l-rev-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 16px;scrollbar-width:thin}
.s4l-rev-card{flex:0 0 min(340px,85vw);scroll-snap-align:start;margin:0;background:var(--s4l-card);border:1px solid var(--s4l-line);border-radius:16px;padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.s4l-rev-stars{color:#e0b64f;letter-spacing:2px;font-size:15px}
.s4l-rev-card blockquote{margin:0;font-size:15px;line-height:1.55;color:var(--s4l-ink);flex:1}
.s4l-rev-card figcaption{font-size:13px;color:var(--s4l-muted)}
.s4l-rev-src{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:#eef2e8;color:var(--s4l-ink);font-size:11.5px}
/* questions */
.s4l-fq{border-top:1px solid var(--s4l-line)}
.s4l-fq summary{cursor:pointer;padding:14px 0;font-weight:600;list-style:none;position:relative;padding-right:32px}
.s4l-fq summary::-webkit-details-marker{display:none}
.s4l-fq summary::after{content:"+";position:absolute;right:4px;top:10px;font-size:22px;line-height:1;color:var(--s4l-muted);transition:transform .2s}
.s4l-fq[open] summary::after{transform:rotate(45deg)}
.s4l-fq-a{padding:0 0 16px;color:var(--s4l-ink);line-height:1.6;max-width:70ch}
.s4l-fq-a p{margin:0 0 8px}
/* ---- scenes: the hero and the three cards come alive ---- */
.s4l-hero-scene{display:block;width:100%;height:100%}
.s4l-hero-scene svg{display:block;width:100%;height:auto}
.s4l-hero-svg .s4l-rails{opacity:0;animation:s4lFade .6s .3s ease forwards}
.s4l-hero-svg .s4l-pnl{opacity:0;transform:translateY(-16px);transform-box:fill-box;animation:s4lPanelLoop 18s cubic-bezier(.2,.8,.2,1) infinite;animation-delay:calc(.9s + var(--i) * .11s)}
.s4l-hero-svg .s4l-glint{animation:s4lGlint 9s 4s ease-in-out infinite}
.s4l-hero-svg .s4l-sun-glow{transform-box:fill-box;transform-origin:center;animation:s4lBreathe 6s ease-in-out infinite}
@keyframes s4lFade{to{opacity:1}}
@keyframes s4lPanelLoop{0%{opacity:0;transform:translateY(-16px)}2.4%{opacity:1;transform:translateY(2px)}3.2%{opacity:1;transform:none}86%{opacity:1;transform:none}90%{opacity:0;transform:translateY(-14px)}100%{opacity:0;transform:translateY(-16px)}}
@keyframes s4lGlint{0%{transform:skewX(-28deg) translateX(0)}22%,100%{transform:skewX(-28deg) translateX(560px)}}
@keyframes s4lBreathe{0%,100%{transform:scale(1);opacity:.35}50%{transform:scale(1.18);opacity:.5}}
.product-art.s4l-scene{padding:0}
.s4l-sc{width:100%;max-width:320px;height:auto;display:block;border-radius:14px}
/* panel card: the sun crosses, the sheen follows */
.s4l-sc-panel .s4l-sc-sheen{animation:s4lSheen 14s linear infinite}
@keyframes s4lSheen{0%{transform:skewX(-25deg) translateX(0)}100%{transform:skewX(-25deg) translateX(330px)}}
.s4l-sc-panel .s4l-sc-wire{animation:s4lDash 1.1s linear infinite}
.s4l-sc-panel .s4l-sc-led{animation:s4ltpwled 1.4s ease-in-out infinite}
@keyframes s4lSpark{0%,100%{opacity:.35}50%{opacity:1}}
/* battery card: modules arrive, the level fills, LEDs blink, energy flows in from the sun and out to the home */
.s4l-sc-batt .s4l-sc-mod{opacity:0;transform:translateY(-30px);transform-box:fill-box;animation:s4lModLoop 12s cubic-bezier(.2,.8,.2,1) infinite;animation-delay:calc(.4s + var(--i) * .5s)}
@keyframes s4lModLoop{0%{opacity:0;transform:translateY(-30px)}5%{opacity:1;transform:none}84%{opacity:1;transform:none}90%{opacity:0;transform:translateY(-18px)}100%{opacity:0;transform:translateY(-30px)}}
.s4l-sc-batt .s4l-sc-mod .s4l-sc-led{animation-delay:calc(var(--i) * .45s)}
.s4l-sc-batt .s4l-sc-win{animation:s4lSpark 2s ease-in-out infinite}
.s4l-sc-batt .s4l-sc-fill{transform-box:fill-box;transform-origin:left center;animation:s4lFill 8s 2s ease-in-out infinite}
@keyframes s4lFill{0%{transform:scaleX(.15)}45%{transform:scaleX(1)}60%{transform:scaleX(1)}100%{transform:scaleX(.15)}}
.s4l-sc-batt .s4l-sc-led{animation:s4ltpwled 1.4s ease-in-out infinite}
.s4l-sc-batt .s4l-sc-flow path{animation:s4lDash 1.2s linear infinite}
@keyframes s4lDash{to{stroke-dashoffset:-14}}
.s4l-sc-batt .s4l-sc-sunmini{transform-box:fill-box;transform-origin:center;animation:s4lBreathe 4s ease-in-out infinite}
/* ev card: energy runs down the cable, the ring fills, the port and lamp glow when full */
.s4l-sc-ev .s4l-sc-pulse{animation:s4lDash 1s linear infinite}
.s4l-sc-ev .s4l-sc-ring{animation:s4lRing 9s ease-in-out infinite}
@keyframes s4lRing{0%{stroke-dashoffset:56.5}55%{stroke-dashoffset:0}80%{stroke-dashoffset:0}100%{stroke-dashoffset:56.5}}
.s4l-sc-ev .s4l-sc-port{animation:s4lSpark 1s ease-in-out infinite}
.s4l-sc-ev .s4l-sc-lamp{opacity:0;animation:s4lLamp 9s ease-in-out infinite}
@keyframes s4lLamp{0%,50%{opacity:0}58%,80%{opacity:1}88%,100%{opacity:0}}
.s4l-sc-ev .s4l-sc-boltsm{animation:s4lSpark 1.2s ease-in-out infinite}
.s4l-sc-ev .s4l-sc-beam{opacity:0;animation:s4lLamp 9s ease-in-out infinite}
.s4l-sc-ev .s4l-sc-car{transform-box:fill-box;transform-origin:center bottom;animation:s4lIdle 3s ease-in-out infinite}
@keyframes s4lIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
@media (prefers-reduced-motion:reduce){
.s4l-hero-svg .s4l-rails,.s4l-hero-svg .s4l-pnl,.s4l-sc-batt .s4l-sc-mod{opacity:1;transform:none;animation:none}
.s4l-hero-svg .s4l-glint,.s4l-hero-svg .s4l-sun-glow,.s4l-sc-panel .s4l-sc-sheen,.s4l-sc-panel .s4l-sc-spark,.s4l-sc-batt .s4l-sc-fill,.s4l-sc-batt .s4l-sc-led,.s4l-sc-batt .s4l-sc-flow path,.s4l-sc-batt .s4l-sc-sunmini,.s4l-sc-ev *{animation:none}
.s4l-sc-ev .s4l-sc-ring{stroke-dashoffset:14}.s4l-sc-ev .s4l-sc-lamp{opacity:1}
}
/* five cards: business and hot water join the row */
.solution.commercial{background:#e9eef0}.solution.hotwater{background:#f4ece6}
.solution.offgrid{background:#e6ece9}
@media (min-width:760px) and (max-width:1099px){.solution-grid:has(.s4l-xcard){grid-template-columns:repeat(2,1fr)}}
@media (max-width:759px){.solution-grid:has(.s4l-xcard){grid-template-columns:1fr}}
/* off grid: the sun sets, night falls, the lights stay on */
.s4l-sc-og .s4l-og-night{opacity:0;animation:s4lNight 12s ease-in-out infinite}
@keyframes s4lNight{0%,35%{opacity:0}50%,85%{opacity:1}100%{opacity:0}}
.s4l-sc-og .s4l-og-sun{transform-box:fill-box;transform-origin:center;animation:s4lSunset 12s ease-in-out infinite}
@keyframes s4lSunset{0%,30%{transform:translateY(0)}50%,85%{transform:translateY(110px)}100%{transform:translateY(0)}}
.s4l-sc-og .s4l-og-tint{opacity:0;animation:s4lTint 12s ease-in-out infinite}
@keyframes s4lTint{0%,35%{opacity:0}50%,85%{opacity:.42}100%{opacity:0}}
.s4l-sc-og .s4l-og-stars{opacity:0;animation:s4lStars 12s ease-in-out infinite}
@keyframes s4lStars{0%,40%{opacity:0}55%,85%{opacity:1}100%{opacity:0}}
.s4l-sc-og .s4l-og-win{opacity:.25;animation:s4lWin 12s ease-in-out infinite}
@keyframes s4lWin{0%,40%{opacity:.25}50%,85%{opacity:1}100%{opacity:.25}}
.s4l-sc-og .s4l-og-note{opacity:0;animation:s4lStars 12s ease-in-out infinite}
.s4l-sc-og .s4l-og-led{animation:s4ltpwled 1.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.s4l-sc-og *{animation:none!important}.s4l-sc-og .s4l-og-night{opacity:1}.s4l-sc-og .s4l-og-tint{opacity:.42}.s4l-sc-og .s4l-og-stars,.s4l-sc-og .s4l-og-win,.s4l-sc-og .s4l-og-note{opacity:1}}
/* business: the roof lights up row by row, the day's chart rises */
.s4l-sc-com .s4l-cm-p{animation:s4lRoofWave 6s ease-in-out infinite;animation-delay:calc(var(--i) * .18s)}
@keyframes s4lRoofWave{0%,70%,100%{fill:#263f48}12%{fill:#4e7d8a}}
.s4l-sc-com .s4l-cm-bar{transform-box:fill-box;transform-origin:center bottom;animation:s4lBarUp 6s ease-in-out infinite;animation-delay:calc(1s + var(--i) * .25s)}
@keyframes s4lBarUp{0%{transform:scaleY(.1)}25%,75%{transform:scaleY(1)}100%{transform:scaleY(.1)}}
.s4l-sc-com .s4l-sc-sunmini{transform-box:fill-box;transform-origin:center;animation:s4lBreathe 5s ease-in-out infinite}
/* hot water: fan spins, warm air flows in, the tank heats, the shower runs */
.s4l-sc-hw .s4l-hw-fan{transform-box:fill-box;transform-origin:center;animation:s4lSpin 1.6s linear infinite}
@keyframes s4lSpin{to{transform:rotate(360deg)}}
.s4l-sc-hw .s4l-hw-air path{animation:s4lAir 1.8s ease-in-out infinite}
.s4l-sc-hw .s4l-hw-air path:nth-child(2){animation-delay:.3s}.s4l-sc-hw .s4l-hw-air path:nth-child(3){animation-delay:.6s}
@keyframes s4lAir{0%{opacity:0;transform:translateX(-8px)}40%{opacity:1}100%{opacity:0;transform:translateX(14px)}}
.s4l-sc-hw .s4l-hw-level{transform-box:fill-box;transform-origin:center bottom;animation:s4lHeat 7s ease-in-out infinite}
@keyframes s4lHeat{0%{transform:scaleY(.25)}45%,80%{transform:scaleY(1)}100%{transform:scaleY(.25)}}
.s4l-sc-hw .s4l-hw-warm{animation:s4lDash 1.1s linear infinite}
.s4l-sc-hw .s4l-hw-drops path{animation:s4lDrop 1.2s linear infinite;animation-delay:calc(var(--i) * .3s)}
@keyframes s4lDrop{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(46px);opacity:0}}
.s4l-sc-hw .s4l-hw-steam path{animation:s4lSteam 2.8s ease-in-out infinite;animation-delay:calc(var(--i) * .7s)}
@keyframes s4lSteam{0%{opacity:0;transform:translateY(6px)}40%{opacity:.8}100%{opacity:0;transform:translateY(-16px)}}
@media (prefers-reduced-motion:reduce){.s4l-sc-com *,.s4l-sc-hw *{animation:none!important}.s4l-sc-hw .s4l-hw-air path{opacity:1}}
/* ---- scene polish: shared secondary motion ---- */
.s4l-hero-svg .s4l-cloud{animation:s4lDrift 46s ease-in-out infinite alternate}
.s4l-hero-svg .s4l-bat-led{animation:s4ltpwled 1.6s ease-in-out infinite}
@keyframes s4lDrift{from{transform:translateX(0)}to{transform:translateX(90px)}}
.s4l-sc .s4l-sc-cloud{animation:s4lDriftSm 30s ease-in-out infinite alternate}
.s4l-sc .s4l-sc-cloud2{animation:s4lDriftSm 38s ease-in-out infinite alternate-reverse}
@keyframes s4lDriftSm{from{transform:translateX(-14px)}to{transform:translateX(14px)}}
.s4l-sc .s4l-rays{animation:s4lRays 24s linear infinite}
@keyframes s4lRays{to{transform:rotate(360deg)}}
/* store: window glows in step with the flow */
.s4l-sc-batt .s4l-sc-win{animation:s4lSpark 2s ease-in-out infinite}
/* hot water: bubbles rise in the bath */
.s4l-sc-hw .s4l-hw-bub{animation:s4lBub 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * .7s)}
@keyframes s4lBub{0%{transform:translateY(0);opacity:0}30%{opacity:.8}100%{transform:translateY(-8px);opacity:0}}
/* off grid: stars twinkle, the moon rises as the sun sets, the windows glow, chimney smoke at night */
.s4l-sc-og .s4l-og-star{animation:s4lTwinkle 3s ease-in-out infinite;animation-delay:calc(var(--i) * .4s)}
@keyframes s4lTwinkle{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}
.s4l-sc-og .s4l-og-star{transform-box:fill-box;transform-origin:center}
.s4l-sc-og .s4l-og-moon{transform-box:fill-box;transform-origin:center;animation:s4lMoon 12s ease-in-out infinite}
@keyframes s4lMoon{0%,32%{transform:translateY(0)}50%,85%{transform:translateY(-150px)}100%{transform:translateY(0)}}
.s4l-sc-og .s4l-og-glow{opacity:0;animation:s4lStars 12s ease-in-out infinite}
.s4l-sc-og .s4l-og-smoke circle{opacity:0;animation:s4lSmoke 4s ease-in-out infinite;animation-delay:calc(var(--i) * 1.3s)}
@keyframes s4lSmoke{0%{opacity:0;transform:translateY(0) scale(.6)}30%{opacity:.6}100%{opacity:0;transform:translateY(-22px) scale(1.4)}}
.s4l-sc-og .s4l-og-smoke circle{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:reduce){.s4l-hero-svg .s4l-cloud,.s4l-hero-svg .s4l-bat-led,.s4l-sc .s4l-sc-cloud,.s4l-sc .s4l-sc-cloud2,.s4l-sc .s4l-rays,.s4l-sc-hw .s4l-hw-bub,.s4l-sc-og .s4l-og-star,.s4l-sc-og .s4l-og-moon,.s4l-sc-og .s4l-og-glow,.s4l-sc-og .s4l-og-smoke circle{animation:none!important}.s4l-sc-og .s4l-og-glow{opacity:1}.s4l-sc-og .s4l-og-moon{transform:translateY(-150px)}}
/* off grid: each sheep wanders a little way, stops to graze (head down, chewing), turns and wanders back; legs step only while it walks */
.s4l-sc-og .s4l-sheep{animation:s4lWander calc(18s + var(--i) * 2s) ease-in-out infinite;animation-delay:calc(var(--i) * -5s)}
@keyframes s4lWander{0%{transform:translateX(0)}30%{transform:translateX(22px)}52%{transform:translateX(22px)}82%{transform:translateX(0)}100%{transform:translateX(0)}}
.s4l-sc-og .s4l-sheep-body{transform-box:fill-box;transform-origin:center;animation:s4lFace calc(18s + var(--i) * 2s) step-end infinite;animation-delay:calc(var(--i) * -5s)}
@keyframes s4lFace{0%,51%{transform:scaleX(1)}52%,99%{transform:scaleX(-1)}100%{transform:scaleX(1)}}
.s4l-sc-og .s4l-sheep-leg{animation:s4lStep calc(18s + var(--i) * 2s) linear infinite;animation-delay:calc(var(--i) * -5s)}
.s4l-sc-og .s4l-sheep-leg.b{animation-name:s4lStepB}
@keyframes s4lStep{0%,3%,9%,15%,21%,27%{transform:rotate(14deg)}6%,12%,18%,24%,30%{transform:rotate(-14deg)}31%,52%{transform:rotate(0)}55%,61%,67%,73%,79%{transform:rotate(14deg)}58%,64%,70%,76%,82%{transform:rotate(-14deg)}83%,100%{transform:rotate(0)}}
@keyframes s4lStepB{0%,3%,9%,15%,21%,27%{transform:rotate(-14deg)}6%,12%,18%,24%,30%{transform:rotate(14deg)}31%,52%{transform:rotate(0)}55%,61%,67%,73%,79%{transform:rotate(-14deg)}58%,64%,70%,76%,82%{transform:rotate(14deg)}83%,100%{transform:rotate(0)}}
.s4l-sc-og .s4l-sheep-head{animation:s4lGraze calc(18s + var(--i) * 2s) ease-in-out infinite;animation-delay:calc(var(--i) * -5s)}
@keyframes s4lGraze{0%,30%{transform:rotate(0)}33%,35%,37%,39%,41%,43%,45%,47%,49%{transform:rotate(34deg)}34%,36%,38%,40%,42%,44%,46%,48%{transform:rotate(26deg)}52%,82%{transform:rotate(0)}85%,87%,89%,91%,93%,95%,97%{transform:rotate(34deg)}86%,88%,90%,92%,94%,96%{transform:rotate(26deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.s4l-sc-og .s4l-sheep,.s4l-sc-og .s4l-sheep-body,.s4l-sc-og .s4l-sheep-leg,.s4l-sc-og .s4l-sheep-head{animation:none}.s4l-sc-og .s4l-sheep-head{transform:rotate(30deg)}}

@media print{.s4l-motion .s4l-rv{opacity:1!important;transform:none!important}}