/* ============================================================
   MSEnergy — Homepage distinctive layer (editorial dark luxury)
   ============================================================ */

/* film grain over hero for atmosphere */
.hero::before{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- orchestrated hero load (opacity-safe; transforms on non-JS elements) ---- */
.hero .badge,.hero h1 span,.hero h1 em,.hero .sub{opacity:0;animation:hUp .85s var(--ease) forwards}
.hero .badge{animation-delay:.10s}
.hero h1 span{animation-delay:.22s}
.hero h1 em{animation-delay:.34s}
.hero .sub{animation-delay:.48s}
.hero .calc{opacity:0;animation:hFade 1s var(--ease) .6s forwards}
.hero-proof>div{opacity:0;animation:hUp .7s var(--ease) forwards}
.hero-proof>div:nth-child(1){animation-delay:.8s}
.hero-proof>div:nth-child(2){animation-delay:.9s}
.hero-proof>div:nth-child(3){animation-delay:1s}
.hero-proof>div:nth-child(4){animation-delay:1.1s}
@keyframes hUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes hFade{to{opacity:1}}

/* scroll cue */
.scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:25;display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,.5);font-size:11px;letter-spacing:.2em;text-transform:uppercase;animation:hFade 1s ease 1.4s both}
.scroll-cue .mouse{width:22px;height:34px;border:1.5px solid rgba(255,255,255,.4);border-radius:14px;position:relative}
.scroll-cue .mouse::after{content:'';position:absolute;left:50%;top:6px;width:3px;height:6px;border-radius:2px;background:var(--gold);transform:translateX(-50%);animation:wheel 1.6s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,10px)}}

/* ---- brand marquee ---- */
.marquee{position:relative;overflow:hidden;padding:26px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:18px;width:max-content;animation:scrollX 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scrollX{to{transform:translateX(-50%)}}

/* ---- bento services ---- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:185px;gap:18px}
.bento .b{position:relative;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);padding:26px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;will-change:transform}
.bento .b:hover{transform:translateY(-5px);border-color:rgba(245,161,0,.4);box-shadow:0 26px 60px rgba(0,0,0,.5)}
.bento .b .bimg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.42;transition:opacity .4s,transform .6s var(--ease)}
.bento .b:hover .bimg{opacity:.55;transform:scale(1.06)}
.bento .b::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,11,28,.1),rgba(7,11,28,.86))}
.bento .b>*{position:relative;z-index:2}
.bento .b .bk{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:8px}
.bento .b h3{font-size:23px;margin-bottom:6px;color:#fff}
.bento .b p{font-size:13.5px;color:rgba(255,255,255,.66);max-width:34ch}
.bento .b .arrow{position:absolute;top:24px;right:24px;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;color:#fff;transition:.25s;z-index:2}
.bento .b:hover .arrow{background:var(--gold);color:var(--navy);border-color:var(--gold);transform:rotate(-45deg)}
.b-solar{grid-column:span 2;grid-row:span 2}
.b-solar h3{font-size:30px}
.b-elec{grid-column:span 2}
.b-calc{grid-column:span 2;background:linear-gradient(135deg,rgba(245,161,0,.16),rgba(45,106,47,.12));border-color:rgba(245,161,0,.3)}
.b-prices{grid-column:span 2}
.bento .b.glow::before{content:'';position:absolute;inset:0;background:radial-gradient(400px 200px at 80% 20%,rgba(245,161,0,.14),transparent 70%)}
@media(max-width:900px){.bento{grid-template-columns:repeat(2,1fr)}.b-solar,.b-elec,.b-calc,.b-prices{grid-column:span 2}.b-solar{grid-row:auto;min-height:240px}}
@media(max-width:560px){.bento{grid-template-columns:1fr;grid-auto-rows:auto}.bento .b{grid-column:auto!important;min-height:180px}}

/* ---- big editorial stats ---- */
.bigstats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);padding:44px 0}
.bigstats .bs-i{position:relative}
.bigstats .n{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(40px,5.5vw,76px);line-height:1;letter-spacing:-.03em;background:linear-gradient(180deg,#fff,#cfd8ee);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.bigstats .n b{color:var(--gold);-webkit-text-fill-color:var(--gold)}
.bigstats .l{color:var(--muted);font-size:13.5px;margin-top:10px}
@media(max-width:640px){.bigstats{grid-template-columns:1fr 1fr;gap:40px 24px;padding:40px 0}.bigstats .l{margin-top:8px;font-size:13px;line-height:1.3}}

/* split feature (asymmetric) */
.split-feat{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.split-feat .visual{position:relative;border-radius:24px;overflow:hidden;box-shadow:var(--shadow-lg)}
.split-feat .visual img{width:100%;aspect-ratio:4/3.4;object-fit:cover;transform:scale(1.02)}
.split-feat .visual .tagfloat{position:absolute;left:18px;bottom:18px;z-index:3;background:rgba(11,18,40,.7);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:12px 16px;color:#fff;font-size:13px;font-weight:600}
@media(max-width:820px){.split-feat{grid-template-columns:1fr;gap:30px}}

/* reveal words for headings */
.reveal-up{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal-up.in{opacity:1;transform:none}

/* ============================================================
   SUNPATH × LEDGER redesign
   ============================================================ */
:root{--sun:0}
/* traveling sun glow (behind content) + warming veil */
#page-sun{position:fixed;z-index:0;width:clamp(180px,24vw,380px);aspect-ratio:1;left:0;top:0;transform:translate(-50%,-50%);will-change:transform;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,rgba(255,242,214,.55),rgba(245,161,0,.22) 32%,rgba(245,161,0,0) 70%);filter:blur(10px);opacity:calc(.3 + var(--sun)*.4)}
.sun-veil{position:fixed;inset:0;z-index:51;pointer-events:none;opacity:calc(var(--sun)*.635);will-change:opacity;
  background:radial-gradient(75% 55% at 80% 14%,rgba(255,168,66,.28),transparent 62%)}
.site-header,.mobile-menu,.bottom-nav,.wa-float{z-index:60}
main,.site-footer{position:relative;z-index:1}
section{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){#page-sun{opacity:.4!important}.sun-veil{opacity:.25!important}}

/* hero asymmetric grid */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1.22fr);gap:44px;align-items:center;padding-top:120px}
.hero-grid .copy{text-align:left;padding:0;isolation:auto}
.hero-grid .copy::before{display:none}
.hero-grid h1{font-size:clamp(40px,5vw,66px)}
.hero-grid .badge{margin-bottom:20px}
.calc--hero{margin:0}
@media(min-width:1280px){.calc--hero{margin-right:-30px}}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:26px;padding-top:96px}.hero-grid .copy{text-align:center}.hero-grid .badge{justify-content:center}}
.hero .netchip{display:inline-flex;align-items:center;gap:7px;margin-top:18px}
@keyframes dawnWarm{from{filter:brightness(.7) saturate(.8)}to{filter:none}}
.hero .bgimg{animation:dawnWarm 1.4s var(--ease) both}

/* horizon ruler */
.horizon-ruler{display:flex;justify-content:space-between;gap:24px;border-top:1px solid rgba(255,255,255,.14);margin-top:8px;padding:20px 0 4px;font-variant-numeric:tabular-nums}
.horizon-ruler .hr-i{text-align:center}
.horizon-ruler .hr-n{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(20px,2.4vw,28px);color:#fff}
.horizon-ruler .hr-n b{color:var(--gold)}
.horizon-ruler .hr-l{font-size:11px;color:var(--muted);margin-top:2px}
@media(max-width:560px){.horizon-ruler{flex-wrap:wrap;gap:16px 0}.horizon-ruler .hr-i{flex:1 0 46%}}

/* marquee lead + bento ribbon/duotone */
.marquee-lead{text-align:center;font-size:13px;letter-spacing:.06em;color:var(--muted);margin-bottom:18px}
.b-ribbon{display:inline-block;margin-top:8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.18);border-radius:30px;padding:4px 12px;align-self:flex-start;position:relative;z-index:2}
.bimg--duo{filter:saturate(.6) contrast(1.05)}
.bimg--duo + ::after{}
.b-solar .bimg{mix-blend-mode:normal}
.b-solar::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(160deg,rgba(27,42,94,.25),rgba(245,161,0,.18));mix-blend-mode:overlay}

/* engineering ledger */
.ledger-list{display:flex;flex-direction:column;margin-top:24px}
.ledger-row{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.ledger-row .ix{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;color:var(--gold);font-size:15px;letter-spacing:.04em}
.ledger-row p{color:rgba(255,255,255,.82);font-size:15px;margin:0}
.clip-reveal{clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease)}
.clip-reveal.in{clip-path:inset(0 0 0 0)}

/* ===== SIGNATURE: Sunpath savings ===== */
.sunpath{position:relative;padding:100px 0;overflow:hidden}
.sunpath .container{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}
@media(max-width:900px){.sunpath .container{grid-template-columns:1fr;gap:30px}}
.mini-calc{margin-top:24px;background:rgba(12,18,42,.6);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:20px 22px;max-width:420px}
.mini-calc .mc-lab{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.mini-calc .mc-val{font-family:'Bricolage Grotesque',sans-serif;font-size:30px;font-weight:700;color:#fff;margin:4px 0 10px}
.mini-calc input[type=range]{-webkit-appearance:none;width:100%;height:8px;border-radius:10px;outline:none;background:linear-gradient(90deg,var(--gold) 0%,var(--gold) var(--p,40%),rgba(255,255,255,.14) var(--p,40%),rgba(255,255,255,.14))}
.mini-calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:4px solid var(--gold);cursor:pointer;box-shadow:0 4px 12px rgba(245,161,0,.5)}
.mini-calc .mc-out{display:flex;justify-content:space-between;margin-top:14px;font-size:13px;color:var(--muted)}
.mini-calc .mc-out b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:18px;color:#fff;margin-top:2px}
.mini-calc .mc-out .be b{color:var(--gold)}
.curve-wrap{position:relative}
.savings-curve{width:100%;height:auto;display:block;overflow:visible}
.savings-curve .axis{stroke:rgba(255,255,255,.12);stroke-width:1}
.savings-curve .grid-l{stroke:rgba(255,255,255,.06);stroke-width:1}
.savings-curve .area{fill:url(#areaGrad)}
.savings-curve .curve{fill:none;stroke:url(#curveGrad);stroke-width:3;stroke-linecap:round}
.savings-curve .sun-dot{fill:#fff;filter:drop-shadow(0 0 10px var(--gold))}
.savings-curve .sun-halo{fill:rgba(245,161,0,.25)}
.savings-curve .be-line{stroke:rgba(255,255,255,.4);stroke-width:1.5;stroke-dasharray:4 4}
.savings-curve text{font-family:'Inter',sans-serif;fill:rgba(255,255,255,.7);font-size:13px}
.savings-curve .be-lab.lit{fill:var(--gold);font-weight:700}
.savings-curve .end-lab{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;fill:#fff}
.savings-curve .end-lab.lit{fill:var(--gold)}
.savings-curve .node{fill:var(--gold);opacity:0;transition:opacity .3s}
.savings-curve .node.lit{opacity:1}

/* process wire */
.process-wire{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}
@media(max-width:820px){.process-wire{grid-template-columns:1fr;gap:24px}}
.wire-col{position:relative;padding-left:42px}
.wire-line{position:absolute;left:14px;top:6px;bottom:6px;width:2px;background:rgba(255,255,255,.12);overflow:hidden}
.wire-line i{position:absolute;left:0;top:0;width:100%;height:var(--wire,0%);background:linear-gradient(180deg,var(--gold),var(--green));box-shadow:0 0 10px var(--gold);transition:height .1s linear}
.wire-step{position:relative;padding:18px 0 30px}
.wire-step .dot{position:absolute;left:-34px;top:20px;width:18px;height:18px;border-radius:50%;background:#0e1730;border:2px solid rgba(255,255,255,.25);transition:.3s}
.wire-step.on .dot{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 5px rgba(245,161,0,.18)}
.wire-step .day{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);font-weight:700}
.wire-step h4{font-size:19px;margin:4px 0 5px;color:#fff}
.wire-step p{color:var(--muted);font-size:14.5px}
.wire-photo{position:sticky;top:100px;border-radius:22px;overflow:hidden;aspect-ratio:4/3.4;box-shadow:var(--shadow-lg)}
.wire-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s var(--ease)}
.wire-photo img.on{opacity:1}
@media(max-width:820px){.wire-photo{display:none}}

/* magazine projects */
.projects-mag{display:grid;grid-template-columns:1.45fr 1fr;gap:22px}
@media(max-width:820px){.projects-mag{grid-template-columns:1fr}}
.proj-lead{position:relative;border-radius:22px;overflow:hidden;min-height:420px;display:flex;align-items:flex-end;border:1px solid rgba(255,255,255,.1)}
.proj-lead img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.proj-lead:hover img{transform:scale(1.05)}
.proj-lead::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,11,28,.1),rgba(7,11,28,.9))}
.proj-lead .cap{position:relative;z-index:2;padding:30px}
.proj-side{display:flex;flex-direction:column;gap:22px}
.proj-side .media-card{flex:1}
.ba-chip{display:inline-flex;align-items:center;gap:8px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:15px;margin-top:8px}
.ba-chip s{color:rgba(255,255,255,.4);font-weight:400}
.ba-chip b{color:#5fd16a}
.ba-chip .ar{color:var(--gold)}

/* cinematic quote */
.quote-feature{position:relative;max-width:920px;margin:0 auto}
.quote-feature .q-glyph{position:absolute;left:-.1em;top:-.35em;font-family:'Fraunces',serif;font-size:140px;line-height:1;color:rgba(245,161,0,.22);pointer-events:none}
.quote-slide{display:none}
.quote-slide.on{display:block;animation:qIn .6s var(--ease)}
@keyframes qIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.quote-feature blockquote{font-family:'Fraunces',serif;font-style:italic;font-size:clamp(26px,3.6vw,42px);line-height:1.28;color:#fff;margin:0 0 22px;position:relative;z-index:2}
.quote-feature .who{display:flex;align-items:center;gap:12px}
.quote-feature .who .stars{color:var(--gold);font-size:14px}
.quote-feature .who b{color:#fff;font-weight:700}
.quote-feature .who span{color:var(--muted);font-size:14px}
.quote-switch{display:flex;gap:8px;margin-top:30px}
.quote-switch button{width:34px;height:6px;border-radius:6px;border:0;background:rgba(255,255,255,.18);cursor:pointer;transition:.2s;padding:0}
.quote-switch button.on{background:var(--gold);width:48px}

/* team strip */
.team-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:30px}
@media(max-width:680px){.team-row{grid-template-columns:1fr 1fr}}
.team-person{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.mono-disc{width:66px;height:66px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:20px;color:#fff;background:linear-gradient(140deg,var(--navy),var(--green) 55%,var(--gold));box-shadow:0 12px 28px rgba(0,0,0,.4);transition:.25s}
.team-person:hover .mono-disc{box-shadow:0 12px 28px rgba(245,161,0,.3),0 0 0 1px var(--gold)}
.team-person .nm{font-weight:700;color:#fff;font-size:16px}
.team-person .rl{color:var(--gold);font-size:12.5px;font-weight:600}

/* sunset CTA */
.cta-band--dusk{position:relative;overflow:hidden}
.cta-band--dusk .dusk-bg{position:absolute;inset:0;background:url('../img/bg-village.webp') center/cover;opacity:.2;filter:brightness(.65);transition:filter 1.2s var(--ease),opacity 1.2s}
.cta-band--dusk.in .dusk-bg{opacity:.28;filter:brightness(.95)}
.cta-band--dusk>*{position:relative;z-index:2}

/* savings rail (money thread) */
.savings-rail{position:fixed;left:0;top:50%;transform:translateY(-50%) translateX(-110%);z-index:55;background:rgba(12,18,42,.78);backdrop-filter:blur(16px);border:1px solid rgba(245,161,0,.3);border-left:0;border-radius:0 14px 14px 0;padding:14px 16px;transition:transform .5s var(--ease);max-width:180px}
.savings-rail.show{transform:translateY(-50%) translateX(0)}
.savings-rail .sr-l{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}
.savings-rail .sr-v{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:800;color:var(--gold);margin-top:3px}
.savings-rail .sr-s{font-size:11px;color:rgba(255,255,255,.6);margin-top:2px}
@media(max-width:768px){.savings-rail{top:auto;bottom:64px;left:0;right:0;max-width:none;transform:translateY(120%);border-radius:14px 14px 0 0;border:1px solid rgba(245,161,0,.3);display:flex;align-items:center;justify-content:center;gap:10px;text-align:center}.savings-rail.show{transform:translateY(0)}.savings-rail .sr-v{margin:0}}

/* ============================================================
   MOBILE BREATHE FIXES (savings-curve / process-wire / voices)
   ============================================================ */
@media(max-width:640px){
  /* savings curve — legible labels + section rhythm */
  .sunpath{padding:64px 0}
  .sunpath .container{gap:40px}
  .sunpath .curve-wrap{margin-top:8px}
  .sunpath .savings-curve{min-height:160px}
  .sunpath .savings-curve text{font-size:26px}        /* viewBox units -> ~9px rendered */
  .sunpath .savings-curve .end-lab{font-size:34px}    /* -> ~12px rendered */
  .sunpath .savings-curve .ax-yr0{display:none}       /* redundant; collides with the early break-even label on mobile */
  /* process wire — open vertical rhythm per step */
  .process-wire{margin-top:8px}
  .wire-col{padding-left:34px}
  .wire-line{left:11px}
  .wire-step{padding:22px 0 32px}
  .wire-step .dot{left:-29px;width:16px;height:16px}
  .wire-step .day{margin-bottom:8px}
  .wire-step h4{margin:0 0 8px;font-size:18px;line-height:1.25}
  .wire-step p{font-size:14.5px;line-height:1.55}
  /* voices — fix glyph overlap, size type, real touch targets */
  .quote-feature{padding-top:40px}
  .quote-feature .q-glyph{font-size:84px;top:-.1em;left:-.02em}
  .quote-feature blockquote{font-size:22px;line-height:1.35;margin:0 0 24px}
  .quote-feature .who{flex-wrap:wrap;gap:6px 10px;row-gap:6px}
  .quote-switch{gap:10px;margin-top:32px}
  .quote-switch button{height:10px;min-height:44px;padding:17px 0;background-clip:content-box;-webkit-background-clip:content-box}
  .quote-switch button.on{background-clip:content-box;-webkit-background-clip:content-box}
}
@media(max-width:390px){
  .wire-step{padding:20px 0 30px}
  .quote-feature blockquote{font-size:20px;margin:0 0 22px}
  .quote-feature .q-glyph{font-size:72px}
}