/* Solar & Energy page (src/pages/mn|en/solar.html). Shared tokens and classes live in site.css.
   Zoom stories: static image sequence by default (phones, reduced motion, no JS);
   pinned scroll-driven zoom only when JS runs on a screen >= 760 x 560 without reduced motion. */

:root{--zs-top:72px;--sl-gold:#8A6D00}
.sl-gold,.eyebrow.sl-gold{color:var(--sl-gold)}
.sl-tag{align-self:flex-start;display:inline-block;background:var(--spark);color:var(--core);padding:5px 10px;font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;line-height:1.4;text-shadow:none}
.sl-label{font-family:var(--f-mono);font-size:12px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);line-height:1.4;margin:0}
.sl-dim{color:#8A8B86}

/* ---------- section heads ---------- */
.sl-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:24px 64px;align-items:end;margin-bottom:clamp(36px,4vw,56px)}
.sl-head__text{display:flex;flex-direction:column;gap:16px}
.sl-head__lead{font-size:17px;line-height:1.6;color:var(--ink-3)}
.sl-head--big{grid-template-columns:minmax(0,1fr) minmax(0,460px)}
.sl-head--big .sl-head__text{gap:28px}
.sl-head--big .sl-head__lead{font-size:18px;line-height:1.65}
.sl-h2xl{font-size:clamp(42px,5.3vw,76px);line-height:1;letter-spacing:-.028em;font-weight:300}
.sl-h2xl>span{display:block}
:lang(mn) .sl-h2xl{font-size:clamp(36px,4.7vw,68px);line-height:1.04}
@media (max-width:900px){.sl-head,.sl-head--big{grid-template-columns:minmax(0,1fr)}}

/* ================================================================ zoom stories */
.sl-zs{position:relative}
.sl-zs--home{background:var(--open)}
.sl-zs--ci{background:var(--white);margin-top:var(--sec)}
.sl-zs__stage{position:relative}
.sl-zs__haze,.sl-zs__dim,.sl-zs__fade,.sl-zs__scrim,.sl-zs__dots,.sl-zs__hint{display:none}
.sl-zs__img{position:relative;overflow:hidden;background:#5AAAFB}
.sl-zs__img>img:first-child{display:block;width:100%;height:100%;object-fit:cover}
.sl-real{position:absolute;height:auto;filter:drop-shadow(0 2px 3px rgba(20,30,40,.25));pointer-events:none}
.sl-real--bat{left:54.48%;top:56.06%;width:5.6%}
.sl-real--inv{left:54.51%;top:70.88%;width:6.04%}

/* hero copy (home) */
.sl-hero{padding-top:calc(var(--header-h) + clamp(16px,3vw,40px))}
.sl-hero__inner{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px)}
.sl-hero__title{font-size:clamp(40px,5.3vw,76px);line-height:1.02;letter-spacing:-.028em;font-weight:300;max-width:980px}
:lang(mn) .sl-hero__title{font-size:clamp(34px,4.5vw,64px);line-height:1.06}
.sl-hero__lead{font-size:clamp(17px,1.4vw,19px);line-height:1.6;color:var(--ink-3);max-width:620px}
.sl-hero__btns{margin-top:clamp(4px,1.2vw,16px)}
.sl-btn-glass{border-color:rgba(24,25,27,.55);background:rgba(255,255,255,.55);color:var(--ink);font-weight:500;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sl-btn-glass:hover{background:var(--core);border-color:var(--core);color:var(--on-dark)}

/* C&I story title (static: dark text on white) */
.sl-ci-title{display:flex;flex-direction:column;gap:20px;padding-inline:var(--gutter);max-width:calc(820px + 2 * var(--gutter))}
.sl-zs--ci .sl-zs__intro{max-width:var(--maxw);margin-inline:auto}
.sl-ci-title__h{display:flex;flex-direction:column;gap:12px;font-weight:300;letter-spacing:-.028em}
.sl-ci-title__h>span:first-child{font-size:clamp(36px,4.5vw,64px);line-height:1.02}
.sl-ci-title__sub{font-size:clamp(22px,2.1vw,30px);line-height:1.25;letter-spacing:-.015em;color:var(--ink-3)}
.sl-ci-title__p{font-size:clamp(16px,1.3vw,18px);line-height:1.6;color:var(--ink-3);max-width:560px}
:lang(mn) .sl-ci-title__h>span:first-child{font-size:clamp(32px,4vw,58px)}

/* product cards (shared look) */
.sl-card{position:relative;display:flex;flex-direction:column;gap:14px;background:var(--white);color:var(--ink);padding:32px 32px 28px}
.sl-card__logo{height:18px;width:auto;align-self:flex-start;filter:brightness(0);opacity:.85}
.sl-card__logo--trina{height:28px}
.sl-card__eyebrow{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sl-gold);line-height:1.4}
.sl-card__title{font-size:clamp(28px,2.4vw,34px);font-weight:300;letter-spacing:-.02em;line-height:1.1}
.sl-card__model{font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;color:var(--muted);margin-top:-6px}
.sl-card__text{font-size:15px;line-height:1.6;color:var(--ink-3)}
.sl-card__module{position:absolute;right:-30px;top:-56px;height:200px;width:auto;filter:drop-shadow(0 18px 28px rgba(16,40,80,.3));pointer-events:none}
.sl-card--module{padding-right:72px}

/* key/value spec lists */
.sl-specs{margin:0;display:flex;flex-direction:column;border-bottom:1px solid rgba(24,25,27,.12)}
.sl-specs>div{display:grid;grid-template-columns:minmax(110px,150px) minmax(0,1fr);gap:14px;padding:10px 0;border-top:1px solid rgba(24,25,27,.12)}
.sl-specs dt{font-family:var(--f-mono);font-size:12px;color:var(--muted);line-height:1.5}
.sl-specs dd{margin:0;font-family:var(--f-mono);font-size:13px;line-height:1.5;color:var(--ink)}
.sl-specs--2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
.sl-specs--2>div{display:flex;flex-direction:column;gap:3px;padding:9px 0}
:lang(mn) .sl-specs>div{grid-template-columns:minmax(120px,170px) minmax(0,1fr)}

/* ---------- static sequence (phones, reduced motion, no JS) ---------- */
.sl-zs--home .sl-zs__base{margin-top:clamp(28px,4vw,48px)}
.sl-zs--home .sl-zs__img{aspect-ratio:16/9}
.sl-zs--ci .sl-zs__stage{padding-top:var(--sec)}
.sl-zs--ci .sl-zs__base{margin-top:clamp(28px,4vw,48px)}
.sl-zs--ci .sl-zs__img{aspect-ratio:4/3;background:#4F9CF0}
.sl-zs--ci .sl-zs__img>img:first-child{object-position:50% 41%}
.sl-zs__step{display:grid;grid-template-columns:minmax(0,1fr);margin-top:16px}
.sl-zs__cu{position:relative;overflow:hidden;aspect-ratio:16/10;background:#DCE6EE}
.sl-zs__cu img{display:block;width:100%;height:100%;object-fit:cover}
.sl-zs__cu--wall img{object-position:72% 40%}
.sl-zs__cards{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.sl-zs__step .sl-card{border-top:4px solid var(--spark)}
.sl-zs--ci .sl-zs__step .sl-card{background:var(--open)}
@media (max-width:759px){
  .sl-hero__btns .btn{flex:1 1 auto}
  .sl-zs__step .sl-card{padding:28px 22px 24px}
  .sl-zs__step .sl-card--module{padding-right:22px}
  .sl-zs__step .sl-card__module{right:18px;top:-44px;height:150px}
  .sl-zs__step .sl-card--module .sl-card__logo,.sl-zs__step .sl-card--module .sl-card__eyebrow,.sl-zs__step .sl-card--module .sl-card__title,.sl-zs__step .sl-card--module .sl-card__model{margin-right:64px}
  .sl-specs--2{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:760px){
  .sl-hero__inner{align-items:center;text-align:center}
  .sl-hero__lead{max-width:600px}
  .sl-hero__btns{justify-content:center}
  /* static frames on wide screens (reduced motion): image beside its cards, inside the page grid */
  .sl-zs__base,.sl-zs__step{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
  .sl-zs--ci .sl-zs__img{aspect-ratio:16/9}
  .sl-zs__step{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start;margin-top:16px}
  .sl-zs__step>.sl-zs__cu{aspect-ratio:auto;height:100%;min-height:360px}
  .sl-zs__step .sl-card__module{right:24px;top:-36px;height:180px}
  .sl-zs__step .sl-card--module{padding-right:96px}
}

/* ---------- pinned zoom story (JS, >= 760 x 560, motion allowed) ---------- */
@media (min-width:760px) and (min-height:560px) and (prefers-reduced-motion:no-preference){
  .js .sl-zs--home{height:600vh;height:600svh}
  .js .sl-zs--ci{height:556vh;height:556svh}
  .js .sl-zs .sl-zs__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;container-type:size;isolation:isolate;padding:0}
  .js .sl-zs__step,.js .sl-zs__cards{display:contents}
  /* the photo always runs edge to edge, also on screens wider than the 1440 px page grid */
  .js .sl-zs__base{position:absolute;inset:0;z-index:0;overflow:hidden;margin:0;max-width:none;padding:0}
  /* cards and the scroll hint line up with the page grid (header logo / CTA) on wide screens */
  .js .sl-zs__stage{--zs-x:max(var(--gutter),calc((100% - var(--maxw)) / 2 + var(--gutter)))}
  .js .sl-zs__frame{position:absolute;width:max(100cqw,160cqh);height:max(62.5cqw,100cqh);left:calc((100cqw - max(100cqw,160cqh)) / 2);top:calc((100cqh - max(62.5cqw,100cqh)) * .4)}
  .js .sl-zs--ci .sl-zs__frame{top:calc((100cqh - max(62.5cqw,100cqh)) * .12);background:#4F9CF0}
  .js .sl-zs--home .sl-zs__frame{background:linear-gradient(180deg,#3E8CE8 0%,#5AAAFB 31%)}
  .js .sl-zs .sl-zs__img{position:absolute;left:0;width:100%;aspect-ratio:auto;background:none;overflow:visible;transform-origin:0 0;will-change:transform;backface-visibility:hidden}
  .js .sl-zs--home .sl-zs__img{top:22.222%;height:90%}
  .js .sl-zs--home .sl-zs__img>img:first-child{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%);mask-image:linear-gradient(180deg,transparent 0,#000 16%)}
  .js .sl-zs--ci .sl-zs__img{top:-37.778%;height:213.667%}
  .js .sl-zs--ci .sl-zs__img>img:first-child{object-position:50% 50%}
  .js .sl-zs__cu{position:absolute;inset:0;z-index:1;opacity:0;aspect-ratio:auto;height:auto;min-height:0;pointer-events:none;background:none;will-change:opacity}
  .js .sl-zs__cu img{position:absolute;inset:0;transform-origin:0 0;will-change:transform;backface-visibility:hidden}
  .js .sl-zs:not(.is-live) .sl-zs__cu{display:none} /* close-ups load once the visitor starts scrolling */
  .js .sl-zs__cu--roof img{object-position:62% 45%}
  .js .sl-zs__cu--wall img{right:auto;bottom:auto;max-width:none;width:max(100cqw,177.778cqh);height:max(56.25cqw,100cqh)}
  .js .sl-zs__cu--froof img{object-position:40% 50%}
  .js .sl-zs__cu--ps img{object-position:58% 60%}
  .js .sl-zs__cu--inv img{object-position:55% 50%}
  .js .sl-zs__dim{display:block;position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;background:linear-gradient(90deg,rgba(14,30,60,.22),rgba(14,30,60,0) 45%,rgba(14,30,60,0) 55%,rgba(14,30,60,.22))}
  .js .sl-zs__fade{display:block;position:absolute;left:0;right:0;bottom:0;height:110px;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(247,247,242,0) 0%,var(--open) 100%)}
  .js .sl-zs--ci .sl-zs__fade{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,var(--white) 100%)}
  /* home hero over the photo: a light morning haze keeps the dark header and headline readable */
  .js .sl-zs__haze{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(247,247,242,.97) 0%,rgba(247,247,242,.9) 22%,rgba(247,247,242,.62) 40%,rgba(247,247,242,.18) 56%,rgba(247,247,242,0) 66%)}
  .js .sl-zs--home .sl-zs__intro{position:absolute;left:0;right:0;top:0;z-index:3;will-change:opacity,transform}
  .js .sl-zs--home .sl-hero{padding-top:calc(var(--header-h) + clamp(8px,4.4cqh,40px))}
  .js .sl-zs__scrim{display:block;position:absolute;left:0;right:0;top:0;height:min(460px,55%);z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(12,36,72,.42) 0%,rgba(12,36,72,.14) 60%,rgba(12,36,72,0) 100%)}
  .js .sl-zs--ci .sl-zs__intro{position:absolute;left:0;right:0;top:calc(var(--zs-top) + clamp(20px,5cqh,56px));z-index:3;margin:0 auto;padding-top:0;color:#fff;text-shadow:0 2px 24px rgba(10,30,60,.45);will-change:opacity,transform}
  .js .sl-zs--ci .sl-ci-title__sub{color:rgba(255,255,255,.9)}
  .js .sl-zs--ci .sl-ci-title__p{color:rgba(255,255,255,.95)}
  /* cards float over the photo */
  .js .sl-zs .sl-card{position:absolute;z-index:3;top:calc(50% + var(--zs-top) / 2);width:min(532px,44vw);max-height:calc(100% - var(--zs-top) - 40px);background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 30px 80px rgba(16,40,80,.22);border:0;opacity:var(--o,0);transform:translateY(calc(-50% + 26px * (1 - var(--o,0))));pointer-events:none;padding:34px 36px 30px}
  .js .sl-zs--home .sl-card--module{width:min(560px,46vw)}
  .js .sl-zs--ci .sl-card{width:min(492px,42vw)}
  .js .sl-zs--ci .sl-card--module{width:min(520px,44vw)}
  .js .sl-zs .sl-card--l{left:var(--zs-x)}
  .js .sl-zs .sl-card--r{right:var(--zs-x)}
  .js .sl-zs .sl-card--module{padding-right:64px}
  .js .sl-zs .sl-card__module{right:-54px;top:-70px;height:250px}
  .js .sl-zs .sl-card--module-l{padding-left:64px;padding-right:36px}
  .js .sl-zs .sl-card--module-l .sl-card__module{right:auto;left:-54px}
  .js .sl-zs__dots{display:flex;flex-direction:column;align-items:flex-end;gap:14px;position:absolute;right:28px;top:calc(50% + var(--zs-top) / 2);transform:translateY(-50%);z-index:4}
  .js .sl-zs__hint{display:flex;flex-direction:column;align-items:flex-start;gap:10px;position:absolute;left:var(--zs-x);bottom:18px;z-index:3;color:var(--ink);font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
  .js .sl-zs__hint>span:first-child{background:rgba(247,247,242,.88);padding:3px 7px}
  .js .sl-zs__hint--light{color:#fff}
  .js .sl-zs__hint--light>span:first-child{background:rgba(24,25,27,.6)}
  .js .sl-zs.is-right .sl-dot__l{opacity:0!important}
}
/* tablets: cards sit along the bottom of the stage so the products stay visible above them */
@media (min-width:760px) and (max-width:1023px) and (min-height:560px) and (prefers-reduced-motion:no-preference){
  .js .sl-zs .sl-card,.js .sl-zs--home .sl-card--module,.js .sl-zs--ci .sl-card,.js .sl-zs--ci .sl-card--module{top:auto;bottom:24px;left:var(--gutter);right:var(--gutter);width:auto;max-height:calc(58% - var(--zs-top));transform:translateY(calc(26px * (1 - var(--o,0))));padding:26px 28px 22px;gap:10px}
  .js .sl-zs .sl-card--module,.js .sl-zs .sl-card--module-l{padding:26px 120px 22px 28px}
  .js .sl-zs .sl-card__module,.js .sl-zs .sl-card--module-l .sl-card__module{left:auto;right:24px;top:-60px;height:220px}
  .js .sl-zs .sl-card__text{font-size:14px;line-height:1.5}
  .js .sl-zs .sl-card__title{font-size:28px}
  .js .sl-zs .sl-specs>div{padding:7px 0}
  .js .sl-zs .sl-specs:not(.sl-specs--2){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
  .js .sl-zs .sl-specs:not(.sl-specs--2)>div{display:flex;flex-direction:column;gap:2px}
  .js .sl-zs .sl-specs--2{grid-template-columns:repeat(3,minmax(0,1fr))}
  .js .sl-zs__dots{right:16px;top:calc(var(--zs-top) + 20px);transform:none}
  .js .sl-zs__dim{background:linear-gradient(0deg,rgba(14,30,60,.28),rgba(14,30,60,0) 55%)}
}
@media (min-width:760px) and (max-height:760px) and (prefers-reduced-motion:no-preference){
  .js .sl-zs .sl-card{gap:10px;padding-top:26px;padding-bottom:22px}
  .js .sl-zs .sl-card__text{font-size:14px;line-height:1.5}
  .js .sl-zs .sl-specs>div{padding:7px 0}
  .js .sl-zs .sl-card__title{font-size:28px}
}
.sl-zs__run{position:relative;display:block;width:1px;height:44px;background:rgba(127,127,127,.35);overflow:hidden}
.sl-zs__run i{position:absolute;left:0;top:0;width:1px;height:16px;background:currentColor;animation:slRun 2s cubic-bezier(.6,0,.4,1) infinite}
@keyframes slRun{from{transform:translateY(-16px)}to{transform:translateY(44px)}}

.sl-dot{display:flex;align-items:center;justify-content:flex-end;gap:12px;background:none;border:0;padding:4px 0;cursor:pointer;font:inherit;color:#fff}
.sl-dot__c{width:10px;height:10px;border-radius:50%;border:1.5px solid #fff;background:rgba(255,255,255,.15);box-shadow:0 0 0 1px rgba(16,40,80,.25);transition:background .3s,transform .3s,border-color .3s;flex-shrink:0}
.sl-dot.is-on .sl-dot__c{background:var(--spark);border-color:var(--spark);transform:scale(1.25)}
.sl-dot__l{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(24,25,27,.6);padding:3px 7px;line-height:1.4;opacity:0;transform:translateX(6px);transition:opacity .25s,transform .25s;white-space:nowrap}
.sl-dot:hover .sl-dot__l,.sl-dot:focus-visible .sl-dot__l,.sl-dot.is-on .sl-dot__l{opacity:1;transform:none}
.sl-dot:focus-visible{outline:2px solid var(--spark);outline-offset:4px}

/* ================================================================ calculator */
.sl-calc__box{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);border:1px solid rgba(24,25,27,.1)}
.sl-calc__in{background:var(--white);padding:clamp(24px,3.4vw,48px);display:flex;flex-direction:column;gap:34px;min-width:0}
.sl-fs{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;min-width:0}
.sl-fs>legend{padding:0;margin-bottom:14px}
.sl-seg{display:grid;border:1px solid rgba(24,25,27,.18)}
.sl-seg--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sl-seg--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sl-seg__opt{position:relative;display:flex;cursor:pointer}
.sl-seg__opt+.sl-seg__opt{border-left:1px solid rgba(24,25,27,.18)}
.sl-seg__opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.sl-seg__opt span{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;min-height:54px;padding:12px 10px;font-size:15px;font-weight:500;line-height:1.3;color:var(--ink);transition:background .2s,color .2s}
.sl-seg__opt:hover span{background:var(--open)}
.sl-seg__opt input:checked+span{background:var(--core);color:var(--on-dark)}
.sl-seg__opt input:focus-visible+span{outline:2px solid var(--core);outline-offset:2px;position:relative;z-index:1}
.sl-bill{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.sl-bill__input{width:min(320px,calc(100% - 84px));font-family:var(--f-head);font-size:clamp(44px,4vw,56px);font-weight:300;letter-spacing:-.02em;line-height:1.15;border:0;border-bottom:1px solid rgba(24,25,27,.25);border-radius:0;background:transparent;color:var(--ink);padding:0 0 4px;font-variant-numeric:tabular-nums}
.sl-bill__input:focus{outline:none;border-bottom-color:var(--core);box-shadow:0 3px 0 0 var(--spark)}
.sl-bill__unit{font-family:var(--f-mono);font-size:14px;color:var(--muted)}
.sl-range{--pct:4%;-webkit-appearance:none;appearance:none;width:100%;height:26px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y}
.sl-range::-webkit-slider-runnable-track{height:4px;background:linear-gradient(90deg,var(--spark) 0 var(--pct),rgba(24,25,27,.15) var(--pct) 100%)}
.sl-range::-moz-range-track{height:4px;background:rgba(24,25,27,.15)}
.sl-range::-moz-range-progress{height:4px;background:var(--spark)}
.sl-range::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-9px;width:22px;height:22px;border-radius:50%;background:var(--core);border:3px solid var(--spark);cursor:pointer}
.sl-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--core);border:3px solid var(--spark);cursor:pointer}
.sl-range:focus{outline:none}
.sl-range:focus-visible{outline:2px solid var(--core);outline-offset:4px}
.sl-hint{font-size:14px;line-height:1.55;color:var(--muted)}
.sl-hint b{font-weight:600;color:var(--ink)}
.sl-hint--ink{color:var(--ink-3)}
.sl-tariff{display:flex;flex-direction:column;gap:8px}
.sl-tariff[hidden],[data-show][hidden]{display:none}
.sl-tariff label{font-size:14px;color:var(--ink-3)}
.sl-tariff input{width:170px;font-family:var(--f-mono);font-size:18px;padding:10px 12px;border:1px solid rgba(24,25,27,.25);border-radius:0;background:var(--open);color:var(--ink)}
.sl-tariff input:focus{outline:none;border-color:var(--core);box-shadow:0 0 0 3px rgba(255,204,0,.55)}

.sl-calc__out{position:relative;overflow:hidden;background:var(--core);color:var(--on-dark);padding:clamp(24px,3.4vw,48px);display:flex;flex-direction:column;gap:28px;min-width:0;isolation:isolate}
.sl-calc__out::before{content:"";position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(255,204,0,.16),rgba(255,204,0,0) 70%);pointer-events:none;z-index:-1}
.sl-label--dark{color:var(--on-dark-3)}
.sl-res{display:flex;flex-direction:column;gap:12px}
.sl-res__kwp{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0}
.sl-res__kwp>span:first-child{font-family:var(--f-head);font-size:clamp(52px,4.6vw,64px);font-weight:300;line-height:1;letter-spacing:-.02em;color:var(--spark);font-variant-numeric:tabular-nums}
.sl-res__unit{font-family:var(--f-mono);font-size:14px;color:var(--on-dark-2)}
.sl-res__kit{font-family:var(--f-mono);font-size:13px;line-height:1.7;color:var(--on-dark-2);display:flex;flex-direction:column}
.sl-res__kit-main{color:var(--on-dark)}
.sl-res__kit li:empty{display:none}
/* two stat columns share rows, so a two-line label never pushes its value out of line */
.sl-res__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto;grid-auto-flow:column;column-gap:24px;row-gap:6px;padding-top:24px;border-top:1px solid rgba(247,247,242,.14)}
.sl-res__stats>div{display:contents}
.sl-res__stats .sl-res__k{align-self:end}
.sl-res__k{font-size:13px;line-height:1.4;color:var(--on-dark-3)}
.sl-res__v{font-family:var(--f-head);font-size:30px;font-weight:400;line-height:1.1;font-variant-numeric:tabular-nums}
.sl-res__s{font-family:var(--f-mono);font-size:11.5px;line-height:1.5;color:var(--on-dark-4)}
.sl-res__tip{padding:14px 16px;background:rgba(255,204,0,.1);border-left:2px solid var(--spark);font-size:14px;line-height:1.5;color:var(--on-dark)}
.sl-res__tip[hidden]{display:none}
.sl-res__bars{display:flex;flex-direction:column;gap:12px;padding-top:24px;border-top:1px solid rgba(247,247,242,.14)}
.sl-bar{display:grid;grid-template-columns:minmax(96px,128px) minmax(0,1fr) minmax(96px,auto);align-items:center;gap:14px}
.sl-bar__k{font-size:13px;color:var(--on-dark-3)}
.sl-bar__track{height:10px;background:#8E8F8A}
.sl-bar__track--after{background:rgba(247,247,242,.1)}
.sl-bar__track i{display:block;height:100%;background:transparent}
.sl-bar__track--after i{background:var(--spark);transition:width .5s ease}
.sl-bar__v{font-family:var(--f-mono);font-size:14px;text-align:right;font-variant-numeric:tabular-nums}
.sl-res__save{display:flex;flex-direction:column;gap:8px;padding-top:24px;border-top:1px solid rgba(247,247,242,.14)}
.sl-res__yr{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0}
.sl-res__yr>span:first-child{font-family:var(--f-head);font-size:clamp(40px,3.8vw,52px);font-weight:300;line-height:1;letter-spacing:-.02em;color:var(--spark);font-variant-numeric:tabular-nums}
.sl-res__more{font-family:var(--f-mono);font-size:13px;line-height:1.6;color:var(--on-dark-2)}

/* quote form (real form, posted by site.js) */
.sl-quote.form{display:flex;flex-direction:column;gap:14px;padding-top:24px;border-top:1px solid rgba(247,247,242,.14)}
.sl-quote__title{font-family:var(--f-body);font-size:20px;font-weight:500;letter-spacing:0;line-height:1.3;color:var(--on-dark)}
.sl-quote__text{font-size:14px;line-height:1.55;color:var(--on-dark-3)}
.sl-quote__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
.sl-quote .field{gap:8px}
.sl-quote .field label{color:var(--on-dark-3)}
.sl-quote .field input{background:rgba(247,247,242,.06);border-color:rgba(247,247,242,.28);color:var(--on-dark);min-height:56px}
.sl-quote .field input::placeholder{color:#8E8F8A}
.sl-quote .field input:focus{border-color:var(--spark);box-shadow:none;background:rgba(247,247,242,.1)}
.sl-quote .field [aria-invalid="true"]{border-color:#FF8A7A}
.sl-quote .field__error{color:#FFB4A9;font-size:13px}
.sl-quote .field__error:empty{display:none}
.sl-quote__send{min-height:56px;white-space:nowrap}
.sl-quote__send[disabled]{opacity:.7;cursor:progress}
.sl-quote__row .field__error{grid-column:1/-1}
.sl-quote__consent{display:flex;flex-direction:column;gap:6px}
.sl-quote .check{font-size:13px;line-height:1.5;color:var(--on-dark-3);cursor:pointer}
.sl-quote .check input{accent-color:var(--spark);width:18px;height:18px}
.sl-quote .check input[aria-invalid="true"]{outline:2px solid #FF8A7A;outline-offset:2px}
.sl-quote .check a{color:var(--on-dark);text-decoration:underline;text-decoration-color:var(--spark);text-decoration-thickness:2px;text-underline-offset:3px}
.sl-quote :focus-visible{outline-color:var(--spark)}
.sl-quote .form__status:focus{outline:2px solid var(--spark);outline-offset:2px}
.sl-calc__note{margin-top:20px;max-width:900px;font-size:13px;line-height:1.6;color:#6E6F6A}
@media (max-width:1100px){.sl-calc__box{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
  .sl-calc__in,.sl-calc__out{padding:28px 20px}
  .sl-seg__opt span{font-size:14px;padding:10px 6px;min-height:52px}
  .sl-bar{grid-template-columns:minmax(0,auto) minmax(40px,1fr) auto;gap:10px}
  .sl-bar__k{min-width:84px}
  .sl-quote__row{grid-template-columns:minmax(0,1fr)}
  .sl-quote__send{width:100%}
  .sl-res__stats{column-gap:16px}
  .sl-res__v{font-size:26px}
}

/* ================================================================ why solar */
.sl-adv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sl-adv__item{position:relative;background:var(--white);padding:40px 36px 38px;display:flex;flex-direction:column;gap:18px}
.js .sl-adv__item.reveal.is-in{transition:opacity .8s var(--ease),transform .35s ease,box-shadow .35s ease}
.sl-adv__item:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(24,25,27,.1)}
.sl-adv__line{position:absolute;left:0;top:0;width:48px;height:2px;background:var(--spark);transition:width .5s cubic-bezier(.6,0,.2,1)}
.sl-adv__item:hover .sl-adv__line{width:100%}
.sl-adv__ic{display:block;width:56px;height:56px;color:var(--ink)}
.sl-adv__ic svg{width:56px;height:56px}
.sl-adv__title{margin-top:6px;font-size:24px;font-weight:400;letter-spacing:-.015em;line-height:1.2}
.sl-adv__text{font-size:15px;line-height:1.65;color:var(--ink-3)}
@media (max-width:1024px){.sl-adv{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .sl-adv{grid-template-columns:minmax(0,1fr);gap:12px}
  .sl-adv__item{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:18px;row-gap:8px;padding:26px 22px 26px}
  .sl-adv__ic{grid-row:1/span 2;width:44px;height:44px}
  .sl-adv__ic svg{width:44px;height:44px}
  .sl-adv__title{margin-top:0;font-size:21px}
}
.ad-shrink{transform-box:fill-box;transform-origin:bottom;animation:adShrink 3.2s ease-in-out infinite}
@keyframes adShrink{0%,15%{transform:scaleY(1.9)}55%,100%{transform:scaleY(1)}}
.ad-bob{animation:adBob 1.6s ease-in-out infinite}
@keyframes adBob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
.ad-lv{animation:adLv 2.4s ease-in-out infinite}
@keyframes adLv{0%,10%{opacity:.15}30%,80%{opacity:1}100%{opacity:.15}}
.ad-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:adDraw 3.2s ease-in-out infinite}
@keyframes adDraw{0%,10%{stroke-dashoffset:1}50%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
.ad-puff{animation:adPuff 2.7s ease-in infinite}
@keyframes adPuff{0%{opacity:0;transform:translateY(4px)}30%{opacity:.8}100%{opacity:0;transform:translateY(-6px)}}
.ad-cross{stroke-dasharray:1;stroke-dashoffset:1;animation:adDraw 2.7s ease-in-out infinite}

/* ================================================================ system cards (isometric art) */
.sl-sys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sl-sys__item{will-change:transform}
.sl-sys__card{position:relative;height:100%;min-height:540px;background:#EDEDE6;padding:32px;display:flex;flex-direction:column;color:var(--ink);transition:background .3s}
.sl-sys__card:hover{background:var(--white)}
.sl-sys--ci .sl-sys__card{background:var(--open)}
.sl-sys--ci .sl-sys__card:hover{background:var(--white)}
.sl-sys__art{display:block;margin:-8px -8px 0}
.sl-iso{display:block;width:100%;height:270px;overflow:visible}
.sl-sys__body{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.sl-sys__title{font-size:28px;font-weight:400;letter-spacing:-.015em;line-height:1.15}
.sl-sys__text{font-size:15px;line-height:1.6;color:var(--ink-3)}
.sl-sys--ci .sl-sys__text{color:var(--muted)}
.sl-sys__more{all:unset;box-sizing:border-box;margin-top:8px;align-self:flex-start;font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sl-gold);cursor:pointer;transition:color .25s,letter-spacing .25s;padding:4px 0}
.sl-sys__more::after{content:"";position:absolute;inset:0;z-index:1}
.sl-sys__card:hover .sl-sys__more{color:var(--ink);letter-spacing:.18em}
.sl-sys__more:focus-visible{outline:none}
.sl-sys__more:focus-visible::after{outline:2px solid var(--core);outline-offset:-2px}
@media (max-width:1024px){
  .sl-sys{grid-template-columns:minmax(0,1fr);gap:12px}
  .sl-sys__item{transform:none!important}
  .sl-sys__card{min-height:0;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);gap:24px;align-items:center;padding:24px 32px}
  .sl-iso{height:220px}
  .sl-sys__body{margin-top:0}
}
@media (max-width:640px){
  .sl-sys__card{grid-template-columns:minmax(0,1fr);gap:8px;padding:20px 22px 24px}
  .sl-iso{height:190px}
  .sl-sys__title{font-size:25px}
}
/* isometric art (ported from the board) */
.iso .ig{fill:#E4E4DC;stroke:none}.iso .ft{fill:#FFFFFF}.iso .fl{fill:#E9E9E2}.iso .fr{fill:#D2D2CA}.iso .fs{fill:#F2F2EC}.iso .fd{fill:#C4C4BC}.iso .fp{fill:#2A2C33}.iso .pg{stroke:#7C7F88;stroke-width:.5}.iso .pg2{stroke-dasharray:2 2;stroke-width:.7}
.iso2 .sh{fill:#FFFFFF;stroke:none;opacity:0;animation:icShine 3.4s ease-in-out infinite}
@keyframes icShine{0%,100%{opacity:0}10%{opacity:.4}22%{opacity:0}}
.iso2 .ic-spin2{transform-box:fill-box;transform-origin:center;animation:icSpin 16s linear infinite}
.iso2 .sun{animation:icSun 3s ease-in-out infinite}
@keyframes icSun{0%,100%{opacity:.85}50%{opacity:1}}
.iso2 .lv{animation:icLv 3.2s ease-in-out infinite}
@keyframes icLv{0%,10%{opacity:.12}30%,85%{opacity:1}100%{opacity:.12}}
.iso2 .win{animation:icSeq 4s ease-in-out infinite}
.iso2 .dn-sun,.iso2 .dn-day{animation:dnDay 10s ease-in-out infinite}
.iso2 .dn-moon,.iso2 .dn-night{animation:dnNight 10s ease-in-out infinite}
@keyframes dnDay{0%,42%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}
@keyframes dnNight{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}
.iso2 .fan{transform-box:fill-box;transform-origin:center;animation:icSpin 1.4s linear infinite}
.iso2 .evbar{transform-box:fill-box;transform-origin:left center;animation:evCh 5s ease-in-out infinite}
@keyframes evCh{0%{transform:scaleX(.12)}80%,100%{transform:scaleX(1)}}
.sl-sys__card:hover .iso2 .sh{animation-duration:1.8s}
[data-anim]:not(.is-vis) svg *{animation-play-state:paused!important}

/* residential footer: included list + steps */
.sl-res-foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:32px 64px;margin-top:clamp(40px,4.4vw,64px)}
.sl-incl .sl-label{letter-spacing:.16em;margin-bottom:12px}
.sl-incl__list li{position:relative;padding:14px 0 14px 22px;border-top:1px solid rgba(24,25,27,.14);font-size:16px;line-height:1.45}
.sl-incl__list li::before{content:"";position:absolute;left:0;top:21px;width:8px;height:8px;background:var(--spark)}
.sl-res-foot__right{display:flex;flex-direction:column;align-items:flex-start;gap:32px}
.sl-steps{display:grid;gap:20px;width:100%;counter-reset:none}
.sl-steps--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sl-steps--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.sl-steps li{display:flex;flex-direction:column;gap:10px;border-top:2px solid var(--core);padding-top:18px}
.sl-steps--spark li{border-top-color:var(--spark)}
.sl-steps__no{font-family:var(--f-mono);font-size:13px;color:var(--sl-gold)}
.sl-steps__t{font-size:17px;font-weight:500;line-height:1.4}
@media (max-width:1024px){
  .sl-res-foot{grid-template-columns:minmax(0,1fr)}
  .sl-steps--5{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}
}
@media (max-width:640px){
  .sl-steps--4,.sl-steps--5{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px;column-gap:16px}
  .sl-steps__t{font-size:16px}
  .sl-res-foot__right .btn{width:100%}
}

/* ================================================================ C&I systems */
.sl-ci{position:relative;overflow:hidden;background:var(--white);padding:clamp(56px,6.7vw,96px) 0 var(--sec);isolation:isolate}
.sl-ci__knot{position:absolute;left:-200px;bottom:-160px;width:620px;opacity:.06;z-index:-1;pointer-events:none;will-change:transform}
.sl-why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 40px;margin-top:clamp(48px,5vw,64px)}
.sl-why__eyebrow{grid-column:1/-1}
.sl-why__item{display:flex;flex-direction:column;gap:10px;border-top:1px solid rgba(24,25,27,.2);padding-top:20px}
.sl-why__t{font-family:var(--f-body);font-size:20px;font-weight:500;letter-spacing:0;line-height:1.3}
.sl-why__p{font-size:15px;line-height:1.6;color:var(--ink-3)}
.sl-ci .sl-steps{margin-top:clamp(48px,5vw,64px)}
.sl-ci__foot{display:flex;justify-content:space-between;align-items:center;gap:20px 32px;flex-wrap:wrap;margin-top:clamp(40px,4.4vw,56px);padding-top:32px;border-top:1px solid rgba(24,25,27,.14)}
.sl-ci__foot p{font-size:16px;color:var(--ink-3)}
@media (max-width:900px){.sl-why{grid-template-columns:minmax(0,1fr);gap:24px}}
@media (max-width:640px){.sl-ci__foot .btn{width:100%}}

/* ================================================================ Sungrow range */
.sl-range-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 48px;flex-wrap:wrap;margin-bottom:clamp(36px,4vw,56px)}
.sl-range-head__aside{display:flex;align-items:center;gap:20px;max-width:600px}
.sl-range-head__aside img{height:22px;width:auto;filter:brightness(0);opacity:.85;flex-shrink:0}
.sl-range-head__aside p{font-size:14px;line-height:1.6;color:var(--muted);max-width:380px}
.sl-rg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 56px;align-items:start}
.sl-rg__h{display:flex;align-items:center;gap:14px;font-size:24px;font-weight:400;letter-spacing:-.015em;margin-bottom:18px}
.sl-rg__h::before{content:"";width:24px;height:2px;background:var(--spark)}
.sl-rg__t{width:100%;border-collapse:collapse;border-bottom:1px solid rgba(24,25,27,.12);table-layout:fixed}
.sl-rg__t thead th{font-family:var(--f-mono);font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:#6E6F6A;text-align:left;padding:0 12px 10px}
.sl-rg__t thead th:nth-child(1){width:28%}.sl-rg__t thead th:nth-child(2){width:32%}
.sl-rg__t tbody tr{border-top:1px solid rgba(24,25,27,.12);transition:background .2s}
.sl-rg__t tbody tr:hover{background:var(--white)}
.sl-rg__t tbody th,.sl-rg__t td{text-align:left;vertical-align:baseline;padding:15px 12px}
.sl-rg__t tbody th{font-size:14px;font-weight:400;color:var(--ink-3);line-height:1.45}
.sl-rg__t td{font-family:var(--f-mono);font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.sl-rg__t td.sl-rg__m{font-size:13px;font-weight:500;color:var(--ink)}
.sl-range-head__aside{flex-wrap:wrap}
@media (max-width:1024px){.sl-rg{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.sl-range-head__aside{flex-direction:column;align-items:flex-start;gap:12px}}
@media (max-width:640px){
  .sl-rg__t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .sl-rg__t,.sl-rg__t tbody,.sl-rg__t tr,.sl-rg__t tbody th,.sl-rg__t td{display:block;width:auto}
  .sl-rg__t tbody tr{padding:14px 0;display:grid;gap:4px}
  .sl-rg__t tbody th,.sl-rg__t td{padding:0}
  .sl-rg__t tbody th{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
}

/* ================================================================ system dialogs */
.sl-dlg{border:0;padding:0;margin:auto;width:min(1120px,calc(100vw - 48px));max-height:min(88vh,calc(100svh - 32px));background:var(--white);color:var(--ink);overflow:auto;overscroll-behavior:contain;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.sl-dlg[open]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));animation:slUp .45s cubic-bezier(.2,.7,.2,1) both}
.sl-dlg::backdrop{background:rgba(24,25,27,.62);animation:slFade .3s ease both}
@keyframes slUp{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
@keyframes slFade{from{opacity:0}to{opacity:1}}
.sl-dlg__art{background:#EDEDE6;padding:40px;display:flex;flex-direction:column;justify-content:center;position:sticky;top:0;align-self:stretch}
.sl-dlg__art .sl-iso{height:250px}
.sl-dlg__body{padding:clamp(28px,3.4vw,48px) clamp(24px,3.4vw,48px) 40px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0}
.sl-dlg__top{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%}
.sl-dlg__tag{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sl-dlg__x{width:44px;height:44px;border-color:rgba(24,25,27,.2)}
.sl-dlg__title{font-size:clamp(30px,3vw,40px);font-weight:300;letter-spacing:-.02em;line-height:1.08;margin-top:6px}
.sl-dlg__lead{font-size:17px;line-height:1.6;color:var(--ink-3)}
.sl-dlg__label{margin-top:10px;font-family:var(--f-mono);font-size:11.5px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--sl-gold)}
.sl-dlg__p{font-size:15px;line-height:1.55;color:var(--ink-3)}
.sl-bullets{display:flex;flex-direction:column;gap:6px}
.sl-bullets li{position:relative;padding-left:19px;font-size:15px;line-height:1.5}
.sl-bullets li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;background:var(--spark)}
.sl-specs--dlg{width:100%}
.sl-specs--dlg>div{padding:11px 0}
.sl-note{width:100%;margin-top:8px;padding:14px 16px;background:rgba(255,204,0,.12);border-left:2px solid var(--spark);font-size:14px;line-height:1.55}
.sl-note b{font-weight:600}
.sl-dlg__cta{margin-top:10px}
@media (max-width:900px){
  .sl-dlg{width:calc(100vw - 24px);max-height:calc(100svh - 24px)}
  .sl-dlg[open]{grid-template-columns:minmax(0,1fr)}
  .sl-dlg__art{position:static;padding:20px 24px}
  .sl-dlg__art .sl-iso{height:180px}
}

/* ================================================================ reduced motion */
@media (prefers-reduced-motion:reduce){
  .sl-zs__run i,.iso2 *,.sl-adv svg *{animation:none!important}
  .iso2 .dn-moon,.iso2 .dn-night{opacity:0}
  .ad-draw,.ad-cross{stroke-dashoffset:0}
  .sl-sys__item,.sl-ci__knot{transform:none!important}
  .sl-dlg[open],.sl-dlg::backdrop{animation:none}
  .sl-adv__item:hover{transform:none}
}