/* ============================================================
   MSEnergy — V2 "GOLDEN HOUR" agency layer
   (loads after site.css + home.css; reuses --sun, #savingsCurve, .process-wire, .quote-feature, .savings-rail from home.css/sunpath.js)
   ============================================================ */
:root{--clash:'Clash Display','Bricolage Grotesque',sans-serif}
body.preloading{overflow:hidden;height:100vh}
.grain-global{position:fixed;inset:0;z-index:52;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' 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")}
@media(prefers-reduced-motion:reduce){.grain-global{display:none}}

/* ---------- PRELOADER ---------- */
#preloader{position:fixed;inset:0;z-index:9999;background:#070b1c;overflow:hidden}
.pl-grain{position:absolute;inset:0;opacity:.05;background:inherit}
.pl-horizon{position:absolute;left:50%;top:50%;width:44vw;height:2px;border-radius:2px;background:var(--gold);transform:translate(-50%,-50%) scaleX(.12);transform-origin:center;filter:brightness(.4);box-shadow:0 0 24px rgba(245,161,0,.5)}
.pl-count{position:absolute;left:5vw;bottom:5vh;font-family:var(--clash);font-weight:600;font-size:clamp(64px,18vw,240px);line-height:.9;color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pl-label{position:absolute;left:5vw;bottom:4vh;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:600}
#plCube{position:absolute;left:50%;top:calc(50% - 90px);transform:translate(-50%,-50%);width:64px;height:auto}
#plCube path,#plCube polygon{fill:none;stroke:var(--gold);stroke-width:4;vector-effect:non-scaling-stroke}
.pl-skip{position:absolute;right:5vw;bottom:5vh;background:none;border:0;color:rgba(255,255,255,.6);font-size:13px;font-weight:600;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px}
.pl-skip:hover{color:var(--gold);border-color:var(--gold)}
.pl-wipe{position:absolute;inset:0;background:linear-gradient(120deg,#F5A100,#ffcf7a);clip-path:inset(0 100% 0 0);will-change:clip-path}

/* ---------- CUSTOM CURSOR ---------- */
#cur-dot,#cur-ring,#cur-label,#cur-spot{position:fixed;top:0;left:0;pointer-events:none;z-index:9998;will-change:transform}
#cur-dot{width:9px;height:9px;border-radius:50%;background:var(--gold);margin:-4.5px 0 0 -4.5px}
#cur-ring{width:36px;height:36px;border:1px solid rgba(245,161,0,.7);border-radius:50%;margin:-18px 0 0 -18px;transition:width .25s,height .25s,border-color .25s,background .25s}
#cur-ring.is-mag{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(245,161,0,.08)}
#cur-ring.is-order,#cur-ring.is-earn{border-color:#25D366}
#cur-ring.is-earn{border-color:#5fd16a}
#cur-label{font-family:var(--clash);font-weight:600;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#fff;transform:translate(14px,14px);opacity:0;transition:opacity .2s;white-space:nowrap}
#cur-spot{width:300px;height:300px;border-radius:50%;margin:-150px 0 0 -150px;background:radial-gradient(circle,rgba(255,220,150,.16),transparent 60%);mix-blend-mode:soft-light;opacity:0;transition:opacity .35s}
body.cursor-on,body.cursor-on a,body.cursor-on button{cursor:none}
body.cursor-on input,body.cursor-on textarea,body.cursor-on [data-native-cursor]{cursor:auto}
@media(hover:none),(pointer:coarse){#cur-dot,#cur-ring,#cur-label,#cur-spot{display:none}}

/* ---------- LOGO FIX (wordmark-led, no square box) ---------- */
.logo-chip{background:none!important;box-shadow:none!important;padding:0!important;border-radius:0!important;position:relative;display:inline-flex}
.logo-chip::after{content:'';position:absolute;inset:-7px -9px;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.38),transparent 70%);filter:blur(7px)}
.brand-logo{height:34px}
.site-footer .brand-logo{height:40px}

/* ---------- FOLIO RAIL ---------- */
.folio-rail{position:fixed;left:18px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;align-items:center;gap:14px;pointer-events:none}
.folio-rail .fr-num{font-family:var(--clash);font-weight:600;font-size:13px;color:#fff;letter-spacing:.1em;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.folio-rail .fr-line{width:1px;height:80px;background:rgba(255,255,255,.25);position:relative;overflow:hidden}
.folio-rail .fr-line i{position:absolute;top:0;left:0;width:100%;height:var(--fp,0%);background:var(--gold)}
.folio-rail .fr-lang{font-size:10px;color:rgba(255,255,255,.6);writing-mode:vertical-rl;letter-spacing:.2em;text-shadow:0 1px 6px rgba(0,0,0,.5)}
@media(max-width:1100px){.folio-rail{display:none}}

/* ---------- mask-line headline reveal ---------- */
/* padding-bottom gives descenders (g/y/p) room inside the overflow:hidden box; negative margin keeps layout tight */
.mask-line{overflow:hidden;display:block;padding-bottom:.16em;margin-bottom:-.16em}
.mask-line>*{display:block;transform:translateY(125%);transition:transform .8s var(--ease)}
.mask-line.in>*{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.mask-line>*{transform:none}}

/* ---------- cinematic hero (V2) ---------- */
.hero2{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.hero2 .ghost-num{position:absolute;left:-2vw;top:8%;font-family:var(--clash);font-weight:600;font-size:30vw;line-height:1;color:rgba(255,255,255,.03);pointer-events:none;z-index:2}
.hero2 .h2copy{position:relative;z-index:6;max-width:1100px}
.hero2 .whisper{font-family:'Fraunces',serif;font-style:italic;font-weight:400;color:var(--gold);font-size:clamp(20px,3vw,34px);display:inline-block;margin-bottom:6px}
.hero2 h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(48px,11vw,150px);line-height:.92;letter-spacing:-.04em;color:#fff;margin:0}
.hero2 .h2sub{font-size:clamp(16px,1.5vw,20px);color:rgba(255,255,255,.72);max-width:540px;margin:26px 0 0;line-height:1.6}
.hero2 .h2cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.hero2 .h2badge{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-size:13px;color:rgba(255,255,255,.7)}
.hero2 .h2badge .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}
.scroll-cue2{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:6;color:rgba(255,255,255,.5);font-size:11px;letter-spacing:.2em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-cue2 .ln{width:1px;height:36px;background:linear-gradient(rgba(245,161,0,.8),transparent);animation:cueLn 1.8s ease-in-out infinite}
@keyframes cueLn{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}

/* ---------- cost of darkness ---------- */
.cost-figs{display:flex;justify-content:space-between;gap:30px;border-top:1px solid rgba(255,255,255,.14);padding-top:24px;margin-top:36px;flex-wrap:wrap}
.cost-figs .cf{flex:1;min-width:160px}
.cost-figs .cf .n{font-family:var(--clash);font-weight:600;font-size:clamp(36px,5vw,64px);color:#fff;line-height:1}
.cost-figs .cf .n b{color:var(--gold)}
.cost-figs .cf .l{color:var(--muted);font-size:13px;margin-top:8px}
.flicker{animation:flick 6s steps(1) infinite}
@keyframes flick{0%,97%,100%{opacity:1}97.5%{opacity:.3}98%{opacity:1}98.5%{opacity:.4}99%{opacity:1}}
@media(prefers-reduced-motion:reduce){.flicker{animation:none}}

/* ---------- SIGNATURE: village sunrise pin ---------- */
.village{position:relative;height:100svh;overflow:hidden;background:#070b1c}
.village .vimg{position:absolute;inset:0;background:url('../img/bg-village.webp') center bottom/cover;filter:brightness(.32) saturate(.5)}
.village .vsky{position:absolute;inset:0;background:linear-gradient(180deg,#070b1c 0%,#0a1228 60%,transparent 100%)}
.village .vdisc{position:absolute;left:18%;bottom:18%;width:min(46vw,520px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(255,244,214,.95),rgba(245,161,0,.5) 26%,rgba(245,161,0,0) 64%);filter:blur(2px);opacity:.0}
.village .vline{position:relative;z-index:5;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:6px}
.village .vline .l1,.village .vline .l2{font-family:'Fraunces',serif;font-style:italic;font-weight:400;font-size:clamp(30px,6vw,80px);color:#fff;line-height:1.1;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.village .vline .l2{color:var(--gold)}
.village .glint{position:absolute;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 14px 3px var(--gold);opacity:0}

/* ---------- locality marquee (reinvented) ---------- */
.locality{position:relative;overflow:hidden;padding:30px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.loc-track{display:flex;gap:0;width:max-content;white-space:nowrap;will-change:transform}
.loc-track span{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(28px,4vw,54px);letter-spacing:-.02em;padding:0 30px;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.3);transition:color .3s,-webkit-text-stroke .3s;display:inline-flex;align-items:center;gap:30px}
.loc-track span.lit{color:var(--gold);-webkit-text-stroke:1px var(--gold)}
.loc-track span::after{content:'✦';-webkit-text-stroke:0;color:var(--gold);font-size:.4em;opacity:.6}

/* ---------- horizontal drag gallery ---------- */
.hgallery{position:relative;overflow:hidden}
.hg-head{padding-bottom:30px}
.hgallery-track{display:flex;gap:24px;cursor:grab;padding:0 6vw}
.hgallery-track:active{cursor:grabbing}
.hg-card{position:relative;flex:0 0 auto;width:min(78vw,560px);aspect-ratio:4/3;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.hg-card img{position:absolute;inset:0;width:110%;height:100%;object-fit:cover;left:-5%}
.hg-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,11,28,.05),rgba(7,11,28,.9))}
.hg-card .hc-cap{position:absolute;inset:auto 0 0 0;z-index:2;padding:26px}
.hg-card .hc-num{position:absolute;top:20px;left:24px;z-index:2;font-family:var(--clash);font-weight:600;color:rgba(255,255,255,.7);font-size:14px}
.hg-card h3{font-size:24px;margin:8px 0 4px}
.hg-card .ba-chip{display:inline-flex;gap:8px;align-items:center;font-family:var(--clash);font-weight:600;margin-top:6px}
.hg-card .ba-chip s{color:rgba(255,255,255,.4)}.hg-card .ba-chip b{color:#5fd16a}.hg-card .ba-chip .ar{color:var(--gold)}
@media(max-width:760px){.hgallery-track{cursor:auto;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.hg-card{scroll-snap-align:center;width:84vw}}

/* ---------- FAQ ---------- */
.faq-accordion{max-width:780px;margin:0 auto}

/* ---------- hero2 background + misc ---------- */
.hero2 .h2bg{position:absolute;inset:0;z-index:1;background:url('../img/hero-bg.webp') center/cover;opacity:.55;filter:brightness(.5) saturate(1.08);transform:scale(1.08);will-change:transform}
.hero2 .h2tint{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(7,11,28,.5) 0%,rgba(7,11,28,.35) 38%,rgba(7,11,28,.94) 100%)}
.hero2 .container{position:relative;z-index:6}
.goldword{color:var(--gold)}
.hero2 .btn-line{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.28)}
.hero2 .btn-line:hover{background:#fff;color:var(--navy);border-color:#fff}

/* ---------- calculator feature wrapper ---------- */
.calc-feature{max-width:960px;margin:0 auto}
.calc-feature .calc{margin:36px auto 0}

/* ---------- locality dual rows ---------- */
.loc-track.rtl{animation-direction:reverse}

/* ---------- village glints (positions) ---------- */
.village .glint.g1{left:30%;bottom:34%}
.village .glint.g2{left:54%;bottom:28%}
.village .glint.g3{left:70%;bottom:40%}

/* ---------- horizontal gallery head ---------- */
.hgallery .hg-head .eyebrow{margin-bottom:10px}

/* ---------- TEAM photo cards ---------- */
.team-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.tcard{position:relative;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);aspect-ratio:4/5;display:flex;align-items:flex-end;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.tcard:hover{transform:translateY(-6px);border-color:rgba(245,161,0,.4);box-shadow:0 26px 60px rgba(0,0,0,.5)}
.tcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s var(--ease)}
.tcard:hover img{transform:scale(1.04)}
.tcard::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(7,11,28,.5) 74%,rgba(7,11,28,.95))}
.tcard .tinfo{position:relative;z-index:2;padding:22px}
.tcard .tinfo .nm{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;color:#fff;font-size:19px;line-height:1.1}
.tcard .tinfo .rl{color:var(--gold);font-size:12.5px;font-weight:600;margin-top:4px}
/* placeholder card (no photo) — monogram on brand gradient */
.tcard.noimg{background:linear-gradient(150deg,var(--navy) 10%,#103218 60%,#0d1730)}
.tcard.noimg .mono{position:absolute;inset:0 0 56px 0;display:flex;align-items:center;justify-content:center;font-family:var(--clash);font-weight:600;font-size:68px;color:rgba(255,255,255,.16);letter-spacing:.04em}
.tcard.noimg::after{background:linear-gradient(180deg,transparent 50%,rgba(7,11,28,.7))}
.tcard.noimg .tinfo .rl{color:var(--gold-2)}
@media(max-width:820px){.team-photos{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(max-width:430px){.team-photos{gap:12px}.tcard .tinfo{padding:14px}.tcard .tinfo .nm{font-size:16px}.tcard.noimg .mono{font-size:52px}}

/* ---------- PERF: skip offscreen layout/paint on inert tail sections ----------
   Applied to inner wrappers (NOT section[data-folio]) so the folio rail's
   cached offsetTop stays exact. Never on hero2/village/sunpath/process-wire/locality
   (pinned, scrubbed, or rAF-measured — CV would break their measurement). */
.team-strip .container{content-visibility:auto;contain-intrinsic-size:auto 1000px}
.quote-feature{content-visibility:auto;contain-intrinsic-size:auto 420px}
.faq-accordion{content-visibility:auto;contain-intrinsic-size:auto 360px}
.cta-band--dusk{content-visibility:auto;contain-intrinsic-size:auto 360px}
.site-footer{content-visibility:auto;contain-intrinsic-size:auto 720px}
/* component-level containment (independent paint/layout islands) */
.locality{contain:layout paint}
.hg-card{contain:layout paint}
.bento .b{contain:layout paint}
.team-person{contain:layout}

/* ---------- responsive type guards ---------- */
@media(max-width:640px){
  /* eyebrow->heading->lead->content rhythm guard for inline-styled blocks */
  [data-folio] .h-lg{margin-top:14px!important}
  [data-folio] .lead{margin-top:18px!important}
  /* logo: symbol-only on mobile (wordmark hidden in site.css); enlarge cube as sole mark */
  .brand-logo{height:40px}
  /* hero2 — kill scroll-cue overlap, open bottom rhythm */
  .hero2{min-height:auto;padding:124px 0 72px}
  .hero2 .ghost-num{display:none}
  .hero2 .scroll-cue2{display:none}            /* was overlapping the .h2badge */
  .hero2 .whisper{margin-bottom:12px;font-size:22px}
  .hero2 .h2sub{margin-top:20px}
  .hero2 .h2cta{flex-direction:column;align-items:stretch;margin-top:28px}   /* full-width, evenly stacked buttons */
  .hero2 .h2cta .btn{width:100%}
  .hero2 .h2badge{margin-top:24px;line-height:1.4}
  /* cost of darkness — 2x2 grid with generous row gap */
  .cost-figs{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:40px;padding-top:32px;margin-top:40px}
  .cost-figs .cf{min-width:0;flex:none}
  .cost-figs .cf .l{margin-top:12px;line-height:1.45}
  /* SIGNATURE village — full-bleed hero on mobile: image visible, sun behind centred text */
  .village{height:auto;min-height:82svh;padding:80px 0;display:flex;align-items:center;justify-content:center}
  .village .vimg{filter:brightness(.5) saturate(1)}                 /* show the village, darkened for text contrast */
  .village .vsky{background:linear-gradient(180deg,rgba(7,11,28,.45),rgba(7,11,28,.1) 45%,rgba(7,11,28,.82))}
  .village .vdisc{position:absolute;left:50%;top:20%;bottom:auto;transform:translate(-50%,-50%);width:min(64vw,300px);margin:0}
  .village .vline{height:auto;padding:0 24px;gap:16px;max-width:560px;margin:0 auto}
  .village .vline .l1,.village .vline .l2{font-size:clamp(27px,8vw,44px);line-height:1.18}
  .village .vline .l1{opacity:.85!important}                       /* keep first line legible (JS dims to .5 for desktop) */
  .village .glint{display:none}                                    /* glints float awkwardly without the pin */
  .folio-rail{display:none}
  /* proof + locality marquee */
  .marquee-lead{margin-bottom:24px!important}                       /* override inline 14px */
  .locality{margin-top:40px!important;padding:22px 0}               /* override inline 46px on first row; trims band height */
  .loc-track span{font-size:clamp(24px,7vw,40px);padding:0 20px;gap:20px}
  /* gallery */
  .hgallery.section{padding:72px 0}
  .hgallery .hg-head{padding-bottom:24px}
  .hgallery-track{padding:0 20px;gap:16px}
  .hg-card{width:82vw}
  .hg-card .hc-cap{padding:24px 20px}
  .hg-card h3{font-size:20px;line-height:1.2;margin:8px 0 0}
  .hg-card .ba-chip{margin-top:10px;font-size:14px;flex-wrap:wrap}
  .hg-card .hc-num{top:18px;left:20px}
  /* team */
  .team-photos{margin-top:32px}
  /* faq */
  .faq-accordion{margin-top:8px}
  /* calculator — beat home2.css desktop .calc-feature .calc specificity */
  .calc-feature .calc{margin-top:24px}
}
@media(max-width:430px){
  .team-photos{gap:16px}
  .tcard .tinfo{padding:16px 16px 18px}
  .tcard .tinfo .nm{font-size:16px}
  .tcard .tinfo .rl{margin-top:5px;font-size:12px;line-height:1.25}
  .tcard.noimg .mono{font-size:44px;inset:0 0 64px 0}
}
@media(max-width:390px){
  .village .vline{padding:0 20px;gap:14px}
  .village .vline .l1,.village .vline .l2{font-size:clamp(25px,7.4vw,40px);line-height:1.22}
  .hgallery-track{padding:0 16px;gap:14px}
  .hg-card{width:86vw}
  .hg-card h3{font-size:19px}
  .hg-card .hc-cap{padding:20px 18px}
  .calc-feature .calc{margin-top:20px}
}