/* EcoLoop MVP layers. The original theme owns typography, header, process, reviews and blog. */
:root{--mvp-green:#00c99b;--mvp-deep:#0d292a;--mvp-ice:#e9f3e8;--mvp-light:#34d399}
html.eco-intro-seen .eco-logo-intro{display:none!important}
html .eco-logo-intro{background:radial-gradient(circle at 50% 44%,#1c5b54 0%,#0f393b 35%,#061e22 76%);transition:opacity .26s ease,background .65s ease;animation:ecoLogoIntroFailsafe .01s linear 4s forwards}
.eco-logo-intro::before,.eco-logo-intro::after{content:'';position:absolute;inset:-20%;pointer-events:none;border-radius:50%}
.eco-logo-intro::before{background:conic-gradient(from 210deg,transparent 10%,rgba(57,229,172,.15) 25%,transparent 38%,rgba(209,246,104,.11) 67%,transparent 75%);filter:blur(35px);animation:introHalo 4.2s linear infinite}
.eco-logo-intro::after{inset:12%;border:1px solid rgba(214,255,198,.16);box-shadow:0 0 0 85px rgba(191,244,172,.035),0 0 0 180px rgba(191,244,172,.025);transform:scale(.95)}
.eco-logo-intro.el-run .el-layer,.eco-logo-intro.el-run .el-layer *{animation-duration:2.5s!important}
.eco-logo-intro.is-docking{background:rgba(7,32,33,.55)}
.eco-logo-intro.is-docking::before,.eco-logo-intro.is-docking::after{opacity:0;transition:opacity .4s}
.eco-logo-intro.is-docking .eco-logo-intro__stage{transform:translate(var(--dock-x),var(--dock-y)) scale(var(--dock-scale));transition:transform .67s cubic-bezier(.19,1,.22,1)}
.eco-logo-intro.is-docking .el-layer *{animation-play-state:paused!important}
@keyframes introHalo{to{transform:rotate(360deg)}}

/* Proof immediately follows the hero. */
.mvp-proof{padding:104px 0 86px;background:#f8fafb;overflow:hidden}
.proof-shell{display:grid;grid-template-columns:minmax(280px,.88fr) minmax(0,1.75fr);gap:clamp(35px,6vw,90px);align-items:start}
.proof-lead{padding-top:15px;position:sticky;top:110px}
.proof-lead h2{font-family:JakartaLocal,InterLocal,sans-serif;font-size:clamp(43px,4.3vw,72px);line-height:1.08;letter-spacing:-.075em;font-weight:600;margin:28px 0 24px}
.proof-lead em{font-style:normal;color:#4b9474}
.proof-lead p{font-size:16px;line-height:1.75;color:#607573;max-width:340px}
.proof-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.proof-tile{min-width:0;min-height:230px;display:flex;flex-direction:column;justify-content:space-between;padding:24px 27px;position:relative;overflow:hidden;border-radius:16px;background:#e7f0e4;color:#133635;text-decoration:none;isolation:isolate;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.proof-tile:hover{transform:translateY(-8px);box-shadow:0 24px 50px rgba(6,40,35,.18)}
.proof-tile::after{content:'';position:absolute;width:160px;height:160px;border:1px solid rgba(63,180,122,.2);border-radius:50%;right:-75px;bottom:-90px;box-shadow:0 0 0 34px rgba(63,180,122,.045),0 0 0 70px rgba(63,180,122,.03);transition:transform .7s var(--ease);z-index:-1}
.proof-tile:hover::after{transform:scale(1.55)}
.proof-eyebrow{display:flex;justify-content:space-between;gap:10px;font-size:10px;letter-spacing:.14em;font-weight:800;color:#44816c}
.proof-eyebrow>span{font-size:17px;line-height:.7}
.proof-value{display:flex;align-items:baseline;gap:12px;white-space:nowrap}
.proof-value strong{font-family:JakartaLocal,sans-serif;font-size:clamp(57px,6vw,90px);line-height:1;letter-spacing:-.105em;font-weight:600;font-variant-numeric:tabular-nums}
.proof-stars{font-size:13px;letter-spacing:-.1em;color:#eea140}
.proof-bottom{font-size:16px;font-weight:750;display:flex;flex-direction:column;gap:4px}
.proof-bottom small{font-size:11px;font-weight:500;color:#69807c}
.proof-reviews{background:#fff}
.proof-reviews .proof-bottom{flex-direction:row;align-items:end;gap:14px;justify-content:space-between}
.proof-years{background:#e0f2f1}
.proof-homes{background:#103b3c;color:#fff}
.proof-homes .proof-eyebrow{color:#34d399}
.proof-homes .proof-bottom small{color:#adcbc6}
.proof-bbb{background:#d9ece7}
.proof-emblem{width:125px;height:125px;border:2px solid #397f69;border-radius:50%;align-self:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transform:rotate(-13deg);box-shadow:0 0 0 7px rgba(79,156,119,.12),inset 0 0 0 6px #d9ece7,inset 0 0 0 7px rgba(47,110,89,.45);transition:transform .5s var(--ease)}
.proof-bbb:hover .proof-emblem{transform:rotate(0) scale(1.08)}
.proof-emblem span{font-size:9px;letter-spacing:.09em;font-weight:900}
.proof-emblem b{font-size:36px;line-height:1;color:#189e79}
.proof-bbb .proof-bottom small{display:flex;align-items:center;gap:7px}
.proof-bbb .proof-bottom small img{width:45px;height:32px;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(10,50,43,.12))}
.proof-footnote{grid-column:2;margin:-6px 0 0;color:#73837f;font-size:10px;line-height:1.5}

/* Northeast map with state-local video dialog. */
.mvp-map{background:#092527;color:#34d399;padding:105px 0 85px;overflow:hidden}
.mvp-map .section-index{color:#34d399}
.mvp-map .section-head h2{color:#fff}
.mvp-map .section-head em{color:#34d399}
.mvp-map .section-head p{color:#adcbc1}
.mvp-map-stage{min-height:605px;position:relative;border-radius:25px;background:radial-gradient(ellipse at 55% 48%,#17534c 0%,#0f3736 44%,#0a292b 78%);border:1px solid rgba(173,255,200,.23);box-shadow:inset 0 0 100px rgba(117,220,161,.06),0 45px 80px rgba(0,0,0,.17);overflow:hidden;display:grid;place-items:center;isolation:isolate}
.mvp-map-stage::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(190,247,191,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(190,247,191,.045) 1px,transparent 1px);background-size:52px 52px;mask-image:radial-gradient(circle,#000 30%,transparent 86%);pointer-events:none}
.map-orbit{position:absolute;width:650px;aspect-ratio:1;border:1px solid rgba(171,232,193,.11);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.map-orbit-two{width:930px}
.mvp-map-watermark{position:absolute;left:38px;top:35px;font-family:JakartaLocal,sans-serif;font-size:clamp(36px,6vw,95px);font-weight:600;letter-spacing:-.07em;line-height:.95;color:rgba(211,255,213,.055)}
.mvp-map-art{position:relative;width:min(840px,87%);aspect-ratio:840/590;z-index:1;margin:15px auto}
.mvp-map-art .coverage-svg,.mvp-map-art .map-towns-layer{width:100%;height:100%;position:absolute;inset:0;max-height:none;filter:none}
.mvp-map-art .state-shape{fill:#286b61;stroke:#5ea68a;stroke-width:1.7;pointer-events:none;cursor:default}
.mvp-map-art .map-nodes{display:none}
.map-towns-layer{overflow:visible;pointer-events:none}
.map-marker{position:absolute;left:var(--x);top:var(--y);width:46px;height:46px;transform:translate(-50%,-50%);border:0;background:transparent;z-index:2;display:grid;place-items:center;isolation:isolate}
.marker-ring{position:absolute;inset:0;border:1px solid rgba(220,255,187,.74);border-radius:50%;animation:markerPulse 2.6s ease-out infinite}
.marker-core{width:12px;height:12px;border-radius:50%;background:#e0f2f1;box-shadow:0 0 0 5px rgba(211,255,154,.15),0 0 22px rgba(219,255,160,.9);transition:transform .3s,background .3s}
.map-marker:hover .marker-core,.map-marker:focus-visible .marker-core{transform:scale(1.65);background:#fff}
.marker-tooltip{position:absolute;left:50%;bottom:calc(100% + 9px);white-space:nowrap;transform:translate(-50%,10px);background:#34d399;color:#143636;border-radius:7px;padding:9px 12px;font-size:11px;font-weight:800;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;box-shadow:0 15px 26px rgba(0,0,0,.22)}
.marker-tooltip i{font-style:normal;margin-left:12px}
.map-marker:hover .marker-tooltip,.map-marker:focus-visible .marker-tooltip{opacity:1;transform:translate(-50%,0)}
@keyframes markerPulse{0%{transform:scale(.65);opacity:.8}75%,100%{transform:scale(1.75);opacity:0}}
.map-marker:nth-of-type(2n) .marker-ring{animation-delay:.9s}
.map-side-note{position:absolute;z-index:2;bottom:32px;left:38px;color:#add5c2;font-size:10px;letter-spacing:.17em;font-weight:750}
.map-side-note{display:flex;gap:11px;align-items:center}
.map-side-dot{width:7px;height:7px;background:#34d399;border-radius:50%;box-shadow:0 0 0 5px rgba(213,247,121,.1)}
.map-under{display:flex;gap:12px;justify-content:space-between;font-size:13px;color:#34d399;margin:20px 5px 0}
.map-under span{color:#81ad9f}
body.place-open{overflow:hidden}
.place-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:25px}
.place-backdrop{position:absolute;inset:0;background:rgba(0,18,20,.78);backdrop-filter:blur(15px)}
.place-dialog{position:relative;width:min(100%,1000px);border:1px solid rgba(198,247,197,.3);border-radius:21px;background:#f0fdfa;overflow:hidden;box-shadow:0 30px 100px rgba(0,0,0,.38);animation:dialogEnter .48s var(--ease) both}
@keyframes dialogEnter{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:none}}
.place-close{position:absolute;right:18px;top:18px;z-index:2;width:42px;height:42px;background:rgba(9,39,39,.8);border:1px solid rgba(255,255,255,.5);border-radius:50%;color:white;font-size:28px;line-height:1}
.place-video{position:relative;background:#102e2d;aspect-ratio:16/9}
.place-video video{display:block;width:100%;height:100%;object-fit:cover}
.place-play-hint{position:absolute;left:20px;top:20px;background:rgba(6,28,29,.6);color:#fff;padding:7px 10px;border-radius:5px;letter-spacing:.13em;font-size:10px;pointer-events:none}
.place-caption{display:flex;justify-content:space-between;gap:24px;align-items:end;padding:23px 30px 28px}
.place-caption h3{font-family:JakartaLocal,sans-serif;font-size:clamp(31px,4vw,48px);letter-spacing:-.06em;line-height:1.05;margin:8px 0}
.place-caption p{color:#607371;margin:0;font-size:13px}
.place-caption a{color:#164b3f;font-size:13px;font-weight:800;white-space:nowrap;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:9px}

/* Bill explorer: native WordPress markup and a light JS island. */
.bill-paper{transform:rotate(-1.4deg);border-radius:13px;background:#fffdf5;box-shadow:0 1px 0 #b1c5b2,0 35px 70px -25px rgba(23,55,49,.4);transition:transform .55s var(--ease),box-shadow .55s var(--ease);overflow:hidden;max-width:100%}
.bill-paper:hover{transform:rotate(0) translateY(-5px);box-shadow:0 1px 0 #b1c5b2,0 48px 80px -25px rgba(23,55,49,.35)}
.bill-paper-top{padding:27px 33px 19px}
.bill-paper-head{display:flex;justify-content:space-between;align-items:center;gap:15px;border-bottom:2px solid #174947;padding-bottom:14px}
.bill-paper-head>span:first-child{font-family:JakartaLocal,sans-serif;font-weight:700;letter-spacing:-.08em;font-size:22px}
.bill-paper-head b{font-size:32px;color:#14b99d;line-height:.5}
.bill-paper-head>span:last-child{font-size:9px;letter-spacing:.13em;color:#66776b}
.bill-paper h2{font-size:20px;letter-spacing:-.04em;margin:25px 0 16px}
.bill-paper dl{display:grid;grid-template-columns:1fr auto;gap:9px 20px;font-size:13px;line-height:1.3;padding-bottom:20px;margin:0;border-bottom:1px solid #c9d0c5}
.bill-paper dt{color:#6f7b70}.bill-paper dd{margin:0;font-variant-numeric:tabular-nums;font-weight:700;text-align:right}
.bill-amount{display:flex;justify-content:space-between;align-items:end;gap:10px;margin:18px 0 15px}
.bill-amount span{font-size:12px;font-weight:800;letter-spacing:.08em;padding-bottom:12px}
.bill-amount output{font-size:clamp(50px,5vw,76px);line-height:1;font-weight:750;letter-spacing:-.09em;color:#1c7962;font-variant-numeric:tabular-nums}
.bill-paper label{display:block;color:#52665c;font-size:12px;margin-bottom:11px}
.bill-paper input[type=range]{display:block;width:100%;height:28px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:grab}
.bill-paper input[type=range]:active{cursor:grabbing}
.bill-paper input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:10px;background:linear-gradient(to right,#157f67 var(--range-progress),#d1ddd0 var(--range-progress))}
.bill-paper input[type=range]::-moz-range-track{height:5px;border-radius:10px;background:#d1ddd0}
.bill-paper input[type=range]::-moz-range-progress{height:5px;background:#157f67}
.bill-paper input[type=range]::-webkit-slider-thumb{appearance:none;width:25px;height:25px;margin-top:-10px;border:4px solid #fff;border-radius:50%;background:#0c8669;box-shadow:0 2px 9px rgba(10,48,38,.35)}
.bill-paper input[type=range]::-moz-range-thumb{width:20px;height:20px;border:4px solid #fff;border-radius:50%;background:#0c8669;box-shadow:0 2px 9px rgba(10,48,38,.35)}
.bill-range-labels{display:flex;justify-content:space-between;font-size:11px;color:#829087}
.bill-perforation{height:18px;background:radial-gradient(circle at 0 50%,#f3f4f6 9px,transparent 9px),radial-gradient(circle at 100% 50%,#f3f4f6 9px,transparent 9px),repeating-linear-gradient(to right,#92aba0 0 4px,transparent 4px 10px) center/100% 1px no-repeat}
.bill-paper-bottom{padding:20px 33px 28px;background:#dcefe4}
.bill-paper-bottom>span{font-size:10px;font-weight:850;letter-spacing:.14em;color:#397b67}
.bill-after{display:flex;align-items:center;gap:18px;margin:12px 0 0}
.bill-after output{font-size:clamp(46px,5vw,68px);line-height:1;letter-spacing:-.09em;font-weight:750;font-variant-numeric:tabular-nums}
.bill-after small{font-size:13px;line-height:1.35;color:#45675b}
.bill-paper-bottom>p{font-size:13px;color:#536b5b;line-height:1.55}
.bill-paper-bottom>p strong{color:#144b3e}
.bill-projection{margin:17px 0 0;padding:13px 15px;border-radius:8px;background:rgba(255,255,255,.55)}
.bill-projection summary{display:flex;justify-content:space-between;gap:10px;align-items:center;text-decoration:none!important;color:#215b4a}
.bill-projection summary span{font-size:18px;transition:transform .25s}
.bill-projection[open] summary span{transform:rotate(90deg)}
.bill-projection dl{display:grid;grid-template-columns:1fr auto;gap:8px 10px;border-top:1px solid #b6d4bd;padding:12px 0 0;margin:12px 0 0;font-size:11px}
.bill-projection dt{color:#5e7568}.bill-projection dd{margin:0;font-weight:800;font-variant-numeric:tabular-nums}
.bill-zip-form{margin-top:19px}
.bill-zip-form label{display:block;font-size:10px;letter-spacing:.12em;font-weight:850;color:#39725f;margin:0 0 8px}
.bill-zip-form>div{display:flex;gap:8px}
.bill-zip-form input{min-width:0;width:37%;border:1px solid #aacbb8;border-radius:8px;padding:12px;background:#fff;color:#173d38;font-size:14px;outline-color:#0f735e}
.bill-zip-form small{display:block;margin:7px 0;color:#a53131;font-size:11px}
.bill-plan-link{display:flex;justify-content:space-between;align-items:center;text-decoration:none;background:#0c3b39;color:#34d399;padding:17px 20px;border-radius:8px;font-weight:800;font-size:13px;margin-top:21px;transition:background .25s,transform .25s}
.bill-plan-link:hover{background:#166b55;transform:translateY(-3px)}
.bill-plan-link span{font-size:23px;line-height:.7}
.bill-paper details{margin-top:17px;font-size:11px;line-height:1.55;color:#52695e}
.bill-paper summary{cursor:pointer;font-weight:750;text-decoration:underline;text-underline-offset:3px}
.bill-paper details p{margin:8px 0 0}

/* Interactive architectural model. */
.mvp-systems{background:#e0f2f1;padding:135px 0 110px;overflow:hidden}
.systems-heading{text-align:center;max-width:800px;margin:0 auto 55px}
.systems-heading .section-index{color:#316449}
.systems-heading h2{font-family:JakartaLocal,sans-serif;font-size:clamp(52px,6.8vw,98px);line-height:1.03;letter-spacing:-.08em;font-weight:600;margin:18px 0}
.systems-heading em{font-style:normal;color:#40836d}
.systems-heading p{font-size:16px;line-height:1.6;color:#44644a;max-width:520px;margin:0 auto}
.systems-console{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(310px,.65fr);gap:12px;min-height:610px}
.systems-scene{position:relative;overflow:hidden;border-radius:19px;background:#0c2e30;isolation:isolate}
.systems-scene::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(6,30,29,.75),transparent 24%),radial-gradient(circle at 50% 45%,transparent 30%,rgba(5,28,27,.2) 90%);pointer-events:none}
.systems-scene-top,.systems-scene-foot{position:absolute;left:25px;right:25px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#34d399;font-size:10px;letter-spacing:.13em;font-weight:750}
.systems-scene-top{top:23px}.systems-scene-foot{bottom:23px}
.systems-live{display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:#34d399;box-shadow:0 0 0 5px rgba(213,247,121,.16)}
.systems-house{position:absolute;inset:0;display:grid;place-items:center}
.systems-house svg{width:100%;height:100%;object-fit:contain}
.house-energy{animation:houseFlow 4s linear infinite;filter:drop-shadow(0 0 5px #34d399)}
.battery-energy{animation-duration:2.3s}
.house-waves{transform-origin:690px 350px;animation:houseSignal 3s ease-in-out infinite}
@keyframes houseFlow{to{stroke-dashoffset:-130}}
@keyframes houseSignal{50%{opacity:.18;transform:scale(1.06)}}
.systems-hotspots{position:absolute;inset:0;z-index:3}
.systems-hotspots button{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:54px;height:54px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.77);border-radius:50%;background:rgba(213,247,121,.92);color:#113b34;font-size:12px;font-weight:850;box-shadow:0 0 0 10px rgba(213,247,121,.12),0 0 32px rgba(213,247,121,.52);transition:transform .35s var(--ease),background .35s,box-shadow .35s;animation:hotspotBob 4s ease-in-out infinite}
.systems-hotspots button:nth-child(2n){animation-delay:1.3s}
@keyframes hotspotBob{50%{box-shadow:0 0 0 16px rgba(213,247,121,.04),0 0 45px rgba(213,247,121,.45)}}
.systems-hotspots button:hover,.systems-hotspots button:focus-visible,.systems-hotspots button.is-active{transform:translate(-50%,-50%) scale(1.18);background:#fff;box-shadow:0 0 0 13px rgba(213,247,121,.18),0 0 42px rgba(213,247,121,.75)}
.systems-hotspots button i{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) translateY(7px);opacity:0;pointer-events:none;background:#f0fdfa;border-radius:5px;padding:8px 10px;font-style:normal;font-weight:800;white-space:nowrap;transition:opacity .25s,transform .25s}
.systems-hotspots button:hover i,.systems-hotspots button:focus-visible i,.systems-hotspots button.is-active i{opacity:1;transform:translateX(-50%)}
.systems-scene-progress{width:105px;height:2px;background:rgba(255,255,255,.25)}
.systems-scene-progress i{display:block;width:20%;height:100%;background:#34d399;transition:transform .7s var(--ease)}
.systems-console[data-active=roof] .systems-scene-progress i{transform:translateX(100%)}
.systems-console[data-active=battery] .systems-scene-progress i{transform:translateX(200%)}
.systems-console[data-active=ev] .systems-scene-progress i{transform:translateX(300%)}
.systems-console[data-active=smart] .systems-scene-progress i{transform:translateX(400%)}
.systems-detail{min-width:0;border-radius:19px;background:#f0fdfa;padding:27px;display:flex;flex-direction:column;color:#183b39}
.systems-detail-head{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.14em;font-weight:800;color:#408b6c}
.systems-detail-head span:last-child{font-size:22px;line-height:.7}
.systems-detail-photo{margin:40px 0 28px;height:210px;overflow:hidden;border-radius:9px;background:#acd5c4}
.systems-detail-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.systems-detail:hover img{transform:scale(1.06)}
.systems-console.is-changing .systems-detail-photo img{animation:detailImage .6s both}
.systems-console.is-changing .systems-detail h3,.systems-console.is-changing .systems-detail p{animation:detailRise .55s both}
@keyframes detailImage{from{opacity:.5;transform:scale(1.09)}to{opacity:1;transform:scale(1)}}
@keyframes detailRise{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}
.systems-detail h3{font-family:JakartaLocal,sans-serif;font-size:clamp(30px,3vw,47px);letter-spacing:-.065em;line-height:1.1;font-weight:600;margin:0 0 12px}
.systems-detail p{color:#5e7269;font-size:14px;line-height:1.7;margin:0}
.systems-detail-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:auto;padding-top:35px}
.systems-detail-bottom a{color:#12624f;text-decoration:none;font-size:12px;font-weight:850;border-bottom:1px solid currentColor;padding-bottom:9px}
.systems-detail-bottom a span{margin-left:18px}
.systems-detail-bottom>span{font-size:10px;font-weight:800;color:#7d9a8b}


/* Curated Learn hub. */
.learn-page{background:#f0fdfa}
.learn-hero{min-height:720px;min-height:94svh;position:relative;overflow:hidden;color:#34d399;padding:160px 0 65px;display:flex;flex-direction:column;justify-content:space-between}
.learn-hero-glow{position:absolute;inset:-40%;background:radial-gradient(ellipse at 65% 45%,rgba(0,196,134,.24),transparent 35%),radial-gradient(ellipse at 27% 70%,rgba(205,245,105,.1),transparent 25%);pointer-events:none;animation:introHalo 35s linear infinite}
.learn-hero-layout{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;flex:1}
.learn-hero .section-index{color:#34d399}
.learn-hero h1{font-family:JakartaLocal,sans-serif;font-size:clamp(76px,9.3vw,155px);letter-spacing:-.095em;line-height:.98;font-weight:600;margin:23px 0}
.learn-hero h1 em{font-style:normal;color:#34d399}
.learn-hero p{font-size:18px;line-height:1.65;color:#c4ded1;max-width:530px}
.learn-hero-actions{display:flex;align-items:center;gap:30px;flex-wrap:wrap;margin-top:35px}
.learn-text-link{color:#34d399;font-size:13px;font-weight:750;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:7px}
.learn-hero-visual{position:relative;aspect-ratio:1;max-width:560px;width:100%;margin:auto;display:grid;place-items:center}
.learn-orbit{position:absolute;inset:10%;border:1px solid rgba(222,252,206,.35);border-radius:50%;animation:introHalo 30s linear infinite}
.learn-orbit::before{content:'';position:absolute;left:4%;top:22%;width:14px;height:14px;background:#34d399;border-radius:50%;box-shadow:0 0 25px #34d399}
.orbit-b{inset:23%;animation-direction:reverse;animation-duration:22s;border-color:rgba(133,231,188,.3)}
.orbit-b::before{background:#55d7aa;box-shadow:0 0 25px #55d7aa;top:68%;left:0}
.learn-core{width:44%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 36% 36%,#68e4ad,#1f9a80 58%,#12504b);box-shadow:0 0 90px rgba(83,221,173,.32),inset -22px -24px 50px rgba(0,50,50,.45);display:grid;place-items:center;font-size:clamp(100px,14vw,220px);line-height:1;color:#34d399;font-family:JakartaLocal,sans-serif;font-weight:600;transform:rotate(-12deg)}
.learn-orbit-chip{position:absolute;padding:10px 14px;border:1px solid rgba(189,239,201,.4);border-radius:100px;background:rgba(23,72,65,.75);backdrop-filter:blur(7px);font-size:10px;letter-spacing:.14em;font-weight:850;color:#34d399}
.learn-orbit-chip.one{left:1%;top:30%}.learn-orbit-chip.two{right:2%;top:35%}.learn-orbit-chip.three{right:25%;bottom:9%}
.learn-hero-bottom{position:relative;display:flex;justify-content:space-between;color:#a9cbb7;font-size:10px;letter-spacing:.14em;font-weight:750}
.learn-trails,.learn-reading{padding:115px 0}
.learn-trail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.learn-trail{min-height:360px;position:relative;display:flex;flex-direction:column;align-items:flex-start;background:#e5eee5;border-radius:15px;padding:30px;color:#16433c;text-decoration:none;overflow:hidden;transition:transform .4s var(--ease),background .4s}
.learn-trail:nth-child(2){background:#34d399}
.learn-trail:nth-child(3){background:#144343;color:#34d399}
.learn-trail:hover{transform:translateY(-10px)}
.learn-trail>span:first-child{font-size:10px;font-weight:850;letter-spacing:.14em}
.learn-trail-icon{font-size:61px;line-height:1;margin:auto 0 15px;color:#1e9373;transition:transform .7s var(--ease)}
.learn-trail:nth-child(3) .learn-trail-icon{color:#34d399}
.learn-trail:hover .learn-trail-icon{transform:rotate(-25deg) scale(1.25)}
.learn-trail h3{font-family:JakartaLocal,sans-serif;font-size:clamp(29px,3vw,42px);line-height:1.08;letter-spacing:-.07em;font-weight:600;margin:0 0 12px}
.learn-trail p{max-width:320px;font-size:13px;line-height:1.6;opacity:.76;margin:0}
.learn-trail>i{position:absolute;right:30px;top:26px;font-size:24px;font-style:normal}
.learn-feature{padding:75px 0;background:#e0f2f1}
.learn-feature-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:7vw;align-items:center}
.learn-feature-media{position:relative;height:440px;border-radius:15px;overflow:hidden}
.learn-feature-media img{width:100%;height:100%;object-fit:cover}
.learn-feature-media span{position:absolute;left:20px;bottom:20px;padding:9px 12px;color:#fff;background:rgba(10,36,36,.75);font-size:10px;letter-spacing:.13em}
.learn-feature-copy h2,.learn-questions h2,.learn-outro h2{font-family:JakartaLocal,sans-serif;font-size:clamp(45px,5vw,74px);letter-spacing:-.075em;font-weight:600;line-height:1.07;margin:23px 0}
.learn-feature-copy em,.learn-questions em,.learn-outro em{font-style:normal;color:#40866c}
.learn-feature-copy p{font-size:16px;line-height:1.7;color:#405f51}
.learn-topics{padding:115px 0;background:#0b3031;color:#34d399}
.learn-topics .section-index{color:#34d399}
.learn-topics .section-head h2{color:#fff}
.learn-topics .section-head em{color:#34d399}
.learn-topics .section-head p{color:#bad2c6}
.learn-topic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.learn-topic{border:1px solid rgba(189,239,207,.19);border-radius:11px;background:#154142;min-height:130px;transition:background .35s,border-color .35s,transform .35s}
.learn-topic:hover,.learn-topic[open]{background:#215451;border-color:rgba(202,247,168,.58);transform:translateY(-3px)}
.learn-topic summary{list-style:none;cursor:pointer;min-height:128px;padding:25px;display:grid;grid-template-columns:1fr 40px;align-content:space-between;align-items:center}
.learn-topic summary::-webkit-details-marker{display:none}
.learn-topic summary span{font-size:10px;letter-spacing:.14em;font-weight:850;color:#34d399}
.learn-topic summary strong{grid-column:1;font-family:JakartaLocal,sans-serif;font-size:clamp(25px,3vw,39px);line-height:1.1;letter-spacing:-.06em;font-weight:600}
.learn-topic summary i{grid-column:2;grid-row:1/3;display:grid;place-items:center;width:37px;height:37px;border-radius:50%;border:1px solid rgba(255,255,255,.4);font-style:normal;font-size:25px;transition:transform .3s,background .3s}
.learn-topic[open] summary i{transform:rotate(45deg);background:#34d399;color:#143d36}
.learn-topic p{border-top:1px solid rgba(255,255,255,.15);margin:0 25px 24px;padding-top:19px;color:#d2e5d8;font-size:14px;line-height:1.7;max-width:580px}
.learn-topic a{color:#34d399}

.learn-reading-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:40px 0}
.learn-read-card{border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 7px 30px rgba(13,52,46,.06);transition:transform .35s var(--ease),box-shadow .35s}
.learn-read-card:hover{transform:translateY(-6px);box-shadow:0 22px 45px rgba(13,52,46,.14)}
.learn-read-card a{text-decoration:none;display:grid;grid-template-columns:45% 55%;height:100%}
.learn-read-photo{position:relative;min-height:245px;overflow:hidden}
.learn-read-photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.learn-read-card:hover img{transform:scale(1.1)}
.learn-read-photo span{position:absolute;left:15px;top:15px;background:#34d399;padding:7px 9px;font-size:9px;letter-spacing:.12em;font-weight:850}
.learn-read-copy{display:flex;flex-direction:column;padding:26px}
.learn-read-copy h3{font-family:JakartaLocal,sans-serif;font-size:clamp(22px,2vw,30px);letter-spacing:-.06em;line-height:1.16;margin:0 0 12px}
.learn-read-copy p{color:#63776c;font-size:13px;line-height:1.6;margin:0}
.learn-read-copy>span{display:flex;justify-content:space-between;margin-top:auto;padding-top:18px;color:#168167;font-size:12px;font-weight:850}
.learn-read-copy i{font-style:normal;font-size:19px}
.learn-questions{padding:120px 0;background:#e4eee5}
.learn-questions-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:9vw}
.learn-questions-layout>div:first-child p{font-size:16px;line-height:1.7;color:#647b6d;max-width:360px}
.learn-question-list details{border-top:1px solid #a8c0ad;padding:22px 3px}
.learn-question-list details:last-child{border-bottom:1px solid #a8c0ad}
.learn-question-list summary{display:flex;align-items:center;justify-content:space-between;gap:20px;font-family:JakartaLocal,sans-serif;font-size:clamp(19px,2.2vw,28px);font-weight:600;letter-spacing:-.04em;cursor:pointer;list-style:none}
.learn-question-list summary::-webkit-details-marker{display:none}
.learn-question-list summary > .learn-question-text{min-width:0}
.learn-question-list summary > .learn-question-icon{flex:none;font-family:InterLocal,sans-serif;font-size:28px;color:#398d68;transition:transform .3s}
.learn-question-list details[open] summary > .learn-question-icon{transform:rotate(45deg)}
.learn-question-list p{color:#5d7469;font-size:14px;line-height:1.7;max-width:690px}
.learn-question-list a{color:#136b54}
.learn-outro{background:#0b2d2e;color:#fff;padding:120px 0;text-align:center}
.learn-outro .section-index{color:#34d399}
.learn-outro h2{margin:24px 0}.learn-outro em{color:#34d399}
.learn-outro p{color:#b2d1c1;line-height:1.6}
.learn-outro .pill-button{margin-top:18px}

@media(max-width:1120px){
  .proof-shell{grid-template-columns:1fr;gap:35px}.proof-lead{position:static}.proof-lead h2{max-width:800px}.proof-lead p{max-width:700px}.proof-footnote{grid-column:1}
  .systems-console{grid-template-columns:minmax(0,1.25fr) minmax(285px,.75fr);min-height:550px}
  .systems-detail-photo{height:170px;margin:35px 0 25px}
  .mvp-map-stage{min-height:540px}
}
@media(max-width:920px){
  .bill-paper{width:min(500px,100%);margin:auto}
  .systems-console{display:block}.systems-scene{min-height:540px;border-radius:19px 19px 0 0}.systems-detail{min-height:300px;border-radius:0 0 19px 19px;display:grid;grid-template-columns:200px 1fr;gap:0 30px}.systems-detail-head,.systems-detail-bottom{grid-column:1/-1}.systems-detail-photo{grid-row:2/4;grid-column:1;margin:15px 0;height:180px}.systems-detail h3{grid-column:2;margin:20px 0 0}.systems-detail p{grid-column:2}.systems-detail-bottom{padding-top:12px}
  .learn-hero-layout{grid-template-columns:1fr 1fr}.learn-hero-visual{transform:scale(.9)}
  .learn-feature-layout{gap:35px}.learn-feature-media{height:370px}
}
@media(max-width:700px){
  .mvp-proof,.mvp-map,.mvp-bill,.mvp-systems,.learn-trails,.learn-topics,.learn-reading,.learn-questions{padding-top:75px;padding-bottom:80px}
  .proof-lead h2{font-size:49px}.proof-tiles{gap:8px}.proof-tile{min-height:190px;padding:17px}.proof-value strong{font-size:clamp(47px,10vw,72px)}.proof-stars{font-size:10px}.proof-bottom{font-size:13px}.proof-reviews .proof-bottom{flex-direction:column;align-items:start;gap:4px}.proof-eyebrow{font-size:8px}.proof-emblem{width:90px;height:90px}.proof-emblem b{font-size:24px}.proof-emblem span{font-size:6px}.proof-bbb .proof-bottom small img{width:35px;height:23px}
  .mvp-map .section-head{margin-bottom:28px}.mvp-map-stage{min-height:360px;border-radius:17px}.mvp-map-art{width:100%;margin:18px auto 45px}.mvp-map-watermark{left:15px;top:15px;font-size:35px}.map-side-note{left:15px;bottom:17px;font-size:8px}.map-orbit{width:400px}.map-orbit-two{width:650px}.map-marker{width:36px;height:36px}.marker-core{width:10px;height:10px}.map-marker[data-map-state=RI]{margin-left:17px;margin-top:12px}.map-marker[data-map-state=MA]{margin-left:-5px;margin-top:-11px}.map-marker[data-map-state=CT]{margin-left:-13px;margin-top:12px}.map-under{display:block;font-size:12px}.map-under span{display:block;margin-top:5px}.place-modal{padding:12px}.place-caption{display:block;padding:20px}.place-caption a{display:inline-block;margin-top:18px}.place-dialog{border-radius:14px}
  .bill-paper-top{padding:22px 21px 18px}.bill-paper-bottom{padding:18px 21px 23px}
  .systems-heading h2{font-size:clamp(50px,10vw,72px)}.systems-heading p{font-size:14px}.systems-scene{min-height:370px}.systems-scene-top,.systems-scene-foot{left:14px;right:14px;font-size:8px}.systems-scene-top{top:13px}.systems-scene-foot{bottom:13px}.systems-house svg{height:100%;width:100%}.systems-hotspots button{width:39px;height:39px;font-size:10px;box-shadow:0 0 0 6px rgba(213,247,121,.15)}.systems-hotspots button i{font-size:9px;bottom:calc(100% + 4px);padding:5px}.systems-detail{display:flex;min-height:0;padding:22px}.systems-detail-photo{height:160px;margin:20px 0;order:1}.systems-detail-head{order:0}.systems-detail h3{order:2;margin:0 0 10px}.systems-detail p{order:3}.systems-detail-bottom{order:4}
  
  .learn-hero{min-height:740px;padding:120px 0 45px}.learn-hero-layout{grid-template-columns:1fr;align-content:start}.learn-hero h1{font-size:clamp(68px,14vw,110px)}.learn-hero p{font-size:15px}.learn-hero-visual{width:min(100%,320px);transform:none;margin:0 auto}.learn-hero-bottom{font-size:8px}.learn-trail-grid{grid-template-columns:1fr}.learn-trail{min-height:250px}.learn-trail-icon{margin:30px 0 12px}.learn-feature{padding:55px 0}.learn-feature-layout,.learn-questions-layout{grid-template-columns:1fr;gap:30px}.learn-feature-media{height:290px}.learn-topic-grid{grid-template-columns:1fr}.learn-topic,.learn-topic summary{min-height:110px}.learn-topic summary{padding:20px}.learn-reading-grid{grid-template-columns:1fr}.learn-read-card a{grid-template-columns:40% 60%}.learn-read-photo{min-height:210px}.learn-read-copy{padding:19px}.learn-read-copy h3{font-size:21px}.learn-read-copy p{font-size:11px}.learn-outro{padding:75px 0}
}
@media(max-width:420px){
  .proof-tiles{grid-template-columns:1fr 1fr}.proof-tile{min-height:170px;padding:13px}.proof-value strong{font-size:45px}.proof-stars{display:none}.proof-bottom{font-size:12px}.proof-emblem{width:72px;height:72px}
  .systems-scene{min-height:300px}.systems-hotspots button{width:33px;height:33px}.systems-scene-top>span:last-child{display:none}
  
  .learn-read-card a{grid-template-columns:1fr}.learn-read-photo{height:165px;min-height:0}.learn-read-copy{min-height:210px}
}
@media(prefers-reduced-motion:reduce){.eco-logo-intro::before,.map-towns-layer path,.marker-ring,.house-energy,.house-waves,.systems-hotspots button,.learn-orbit,.learn-hero-glow{animation:none!important}.eco-logo-intro{animation:none}.systems-console.is-changing .systems-detail-photo img,.systems-console.is-changing .systems-detail h3,.systems-console.is-changing .systems-detail p{animation:none}}

/* Second MVP pass: compact proof, richer local map, aligned roof and editorial bridge. */
html .eco-logo-intro{background:radial-gradient(ellipse at 68% 36%,rgba(0,212,170,.2),transparent 39%),radial-gradient(ellipse at 25% 75%,rgba(27,107,110,.55),transparent 55%),linear-gradient(135deg,#102c38,#14344a 55%,#102c38);transition:opacity .28s ease,background .7s ease;animation:ecoLogoIntroFailsafe .01s linear 4s forwards}
.eco-logo-intro::before{inset:-30%;background:conic-gradient(from 170deg,transparent 8%,rgba(0,212,170,.16) 25%,transparent 40%,rgba(52,211,153,.13) 68%,transparent 83%);filter:blur(60px);animation:introHalo 9s linear infinite}
.eco-logo-intro::after{inset:18%;border:1px solid rgba(224,242,241,.14);box-shadow:0 0 0 110px rgba(224,242,241,.03),0 0 0 240px rgba(0,212,170,.018)}
.eco-logo-intro.el-run .el-layer,.eco-logo-intro.el-run .el-layer *{animation-duration:2.8s!important}
.eco-logo-intro.is-docking{background:rgba(16,44,56,0);opacity:.92}
.eco-logo-intro.is-docking .eco-logo-intro__stage{transition:transform .72s cubic-bezier(.19,1,.22,1)}
.mvp-proof{padding:67px 0 58px;background:#f8fafb}.proof-shell{grid-template-columns:minmax(245px,.82fr) minmax(0,1.9fr);gap:clamp(28px,4.5vw,65px)}.proof-lead{top:95px;padding-top:5px}.proof-lead h2{font-size:clamp(40px,4vw,64px);margin:17px 0 17px}.proof-lead em{color:#1b6b6e}.proof-lead p{font-size:14px;line-height:1.6}.proof-tile{min-height:188px;padding:20px 23px;background:#e0f2f1;color:#14344a}.proof-eyebrow{color:#1b6b6e}.proof-value strong{font-size:clamp(53px,5.5vw,77px)}.proof-reviews{background:#fff}.proof-years{background:#e0f2f1}.proof-homes{background:#14344a;color:#fff}.proof-bbb{background:#fff;border:1px solid #c8e3e1}.proof-bbb-seal{display:flex;align-items:center;gap:12px}.proof-bbb-seal img{width:133px;height:auto;max-height:94px;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(16,44,56,.13))}.proof-bbb-seal strong{font:600 18px/1.08 JakartaLocal,sans-serif;letter-spacing:-.04em}.proof-bbb-seal strong span{font-size:29px;color:#1b6b6e}.proof-bbb .proof-bottom{font-size:13px}.proof-footnote{color:#6b7280}
.mvp-map{background:#102c38;color:#f0fdfa;padding:75px 0 76px}.mvp-map .section-head{margin-bottom:32px}.mvp-map .section-head em{color:#34d399}.mvp-map-stage{min-height:565px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:8px;padding:24px;background:radial-gradient(ellipse at 38% 50%,#1b6b6e 0%,#14344a 60%,#102c38 100%);border-color:rgba(0,212,170,.25)}
.mvp-map-art{width:100%;max-width:840px;grid-column:1;margin:auto;transition:transform .85s var(--ease)}.mvp-map-art .state-shape{fill:#236d76;stroke:#7fc0bc;pointer-events:visiblePainted;cursor:pointer;transition:fill .4s,stroke .4s}.mvp-map-art .state-shape:hover,.mvp-map-art .state-shape.is-active{fill:#2e9390;stroke:#00d4aa}.mvp-map-art .map-towns-layer path{stroke:#00d4aa;opacity:.16}.mvp-map-art .map-activity{pointer-events:visiblePainted}.activity-dot{fill:#34d399;opacity:.8;stroke:#102c38;stroke-width:.6;animation:activityArrive .55s var(--ease) var(--delay,0s) both;transition:opacity .35s,fill .35s}.activity-dot.is-muted{opacity:.13}.activity-dot:hover{fill:#fff;opacity:1}@keyframes activityArrive{from{opacity:0;transform:scale(0)}to{opacity:.8;transform:scale(1)}}
.map-marker{z-index:3}.map-marker .marker-core{background:#00d4aa;box-shadow:0 0 0 5px rgba(0,212,170,.18),0 0 22px rgba(0,212,170,.75)}.map-marker.is-selected .marker-core{background:#fff}.map-marker .marker-ring{border-color:rgba(0,212,170,.8)}.marker-tooltip{background:#e0f2f1;color:#14344a}.map-insight{position:relative;z-index:3;grid-column:2;align-self:center;min-width:0;padding:27px 22px;border-radius:18px;background:rgba(16,44,56,.88);border:1px solid rgba(224,242,241,.17);box-shadow:0 22px 60px rgba(0,0,0,.16);backdrop-filter:blur(12px)}.map-insight-head{display:flex;justify-content:space-between;align-items:center}.map-insight .section-index{color:#7fe4cb}.map-insight-mark{font-size:24px;color:#00d4aa}.map-insight h3{font:600 30px/1.15 JakartaLocal,sans-serif;letter-spacing:-.06em;margin:20px 0 7px;color:#fff}.map-insight>p{font-size:11px;line-height:1.55;color:#bbd5d5;margin:0 0 17px}.map-region-list{display:grid;gap:2px}.map-region-list button{display:grid;grid-template-columns:1fr 48px 26px;gap:9px;align-items:center;padding:9px 7px;border:0;border-radius:7px;background:transparent;color:#d9efec;text-align:left;font-size:11px;cursor:pointer;transition:background .25s,color .25s,padding-left .25s}.map-region-list button:hover,.map-region-list button:focus-visible,.map-region-list button.is-active{background:rgba(0,212,170,.13);color:#fff;padding-left:13px}.map-region-list button b{text-align:right;font-variant-numeric:tabular-nums}.map-volume{height:3px;background:rgba(255,255,255,.15);border-radius:3px;overflow:hidden}.map-volume i{display:block;width:var(--volume);height:100%;background:#00d4aa;border-radius:3px;transition:width .5s}.map-region-list button.is-active .map-volume i{background:#34d399}.map-insight-current{display:grid;gap:3px;border-top:1px solid rgba(255,255,255,.17);padding-top:15px;margin-top:10px}.map-insight-current strong{font:600 19px JakartaLocal,sans-serif}.map-insight-current small{font-size:10px;line-height:1.5;color:#b3cfcd}.map-zoom-controls{display:flex;gap:5px;margin-top:17px}.map-zoom-controls button{border:1px solid rgba(255,255,255,.25);border-radius:7px;background:rgba(255,255,255,.06);color:#fff;min-width:30px;height:29px}.map-zoom-controls button:hover{background:#1b6b6e;border-color:#00d4aa}.map-zoom-controls [data-map-reset]{padding:0 10px;font-size:10px;font-weight:700}.map-under{color:#fff}.map-under span{color:#b5d9d6;max-width:650px;text-align:right}.place-dialog{background:#fff}.place-caption h3{color:#14344a!important}.place-caption .section-index{color:#1b6b6e}.place-caption a{color:#1b6b6e}.map-side-note{display:none}
.mvp-systems{background:#e0f2f1;padding:95px 0 96px}.systems-heading{margin-bottom:40px}.systems-heading .section-index,.systems-heading em{color:#1b6b6e}.systems-heading p{color:#4b5563}.systems-live{background:#00d4aa;box-shadow:0 0 0 5px rgba(0,212,170,.16)}.systems-hotspots button{background:#00d4aa;color:#14344a;box-shadow:0 0 0 10px rgba(0,212,170,.12),0 0 32px rgba(0,212,170,.45)}.systems-hotspots button:hover,.systems-hotspots button:focus-visible,.systems-hotspots button.is-active{box-shadow:0 0 0 13px rgba(0,212,170,.2),0 0 42px rgba(0,212,170,.6)}.systems-scene-progress i{background:#00d4aa}.systems-detail{background:#fff;color:#14344a}.systems-detail-head{color:#1b6b6e}.systems-detail p{color:#4b5563}.systems-detail-bottom a{color:#1b6b6e}.house-energy{filter:drop-shadow(0 0 5px #00d4aa)}
.reviews-section{background:#f0fdfa;padding:72px 0 70px}.reviews-intro{display:flex;justify-content:space-between;align-items:center;gap:38px;margin-bottom:28px}.reviews-intro h2{font:600 clamp(42px,4.5vw,69px)/1.07 JakartaLocal,sans-serif;letter-spacing:-.075em;margin:15px 0 12px}.reviews-intro h2 em{font-style:normal;color:#1b6b6e}.reviews-intro p{font-size:13px;line-height:1.55;color:#4b5563;margin:0}.google-proof{min-width:340px;padding:15px 18px;gap:18px;border-color:#c7e3de;box-shadow:0 12px 28px rgba(27,107,110,.08)}.google-proof img{width:115px}.google-rating strong{font-size:27px}.google-stars{font-size:15px}.review-card{min-height:270px;padding:24px;background:#fff;border-color:#c9e3df}.review-number{margin:16px 0 8px}.review-card blockquote strong{font-size:clamp(21px,2.2vw,28px)}.review-card blockquote p{line-height:1.55}.review-by{padding-top:10px}.review-footer{padding-top:15px}.review-footer a{color:#1b6b6e}

@media(max-width:1100px){.proof-shell{grid-template-columns:1fr;gap:25px}.proof-lead{position:static}.proof-footnote{grid-column:1}.mvp-map-stage{grid-template-columns:minmax(0,1fr) 255px;padding:15px}.map-insight{padding:18px 14px}.map-insight h3{font-size:25px}}
@media(max-width:760px){.mvp-proof,.mvp-map,.mvp-systems,.reviews-section{padding:65px 0}.proof-tile{min-height:180px}.proof-bbb-seal{gap:6px}.proof-bbb-seal img{width:100px}.proof-bbb-seal strong{font-size:14px}.proof-bbb-seal strong span{font-size:22px}.mvp-map-stage{display:flex;flex-direction:column;min-height:0;padding:12px;gap:0}.mvp-map-art{width:100%;margin:20px auto 5px}.map-insight{width:100%;align-self:stretch;margin-top:8px}.map-region-list{grid-template-columns:1fr 1fr;gap:3px 8px}.map-insight-current{margin-top:13px}.map-under{display:block}.map-under span{display:block;text-align:left;margin-top:8px}.reviews-intro{align-items:flex-start;flex-direction:column;gap:22px}.google-proof{min-width:0;width:100%;max-width:400px}.systems-heading{margin-bottom:27px}}
@media(max-width:480px){.proof-tile{min-height:156px}.proof-value strong{font-size:clamp(42px,10vw,55px)}.proof-bbb-seal img{width:78px}.proof-bbb-seal strong{font-size:11px}.map-region-list{grid-template-columns:1fr}.mvp-map-art .map-marker{width:34px;height:34px}}
@media(prefers-reduced-motion:reduce){.eco-logo-intro::before,.activity-dot{animation:none!important}.mvp-map-art{transition:none}}
.learn-page{background:#f8fafb}.learn-trail:nth-child(2){background:#e0f2f1}.learn-core{background:radial-gradient(circle at 36% 36%,#34d399,#1b6b6e 58%,#14344a);color:#e0f2f1}.learn-hero-glow{background:radial-gradient(ellipse at 65% 45%,rgba(0,212,170,.22),transparent 35%),radial-gradient(ellipse at 27% 70%,rgba(27,107,110,.17),transparent 25%)}
.learn-topics{background:#14344a}
@media(max-width:480px){.proof-value strong{font-size:36px}.proof-bbb-seal{justify-content:center}.proof-bbb-seal img{width:82px}.proof-bbb-seal strong{display:none}.proof-bbb .proof-bottom small{display:none}}
@media(max-width:700px){.map-marker[data-map-state=RI],.map-marker[data-map-state=MA],.map-marker[data-map-state=CT]{margin:0}}
@media(hover:hover){.mvp-map-art{cursor:grab}.mvp-map-art.is-dragging{cursor:grabbing;transition:none}}

/* One calm brand reveal: only the letters and one trace around the infinity. */
html .eco-logo-intro{position:fixed;inset:0;z-index:200;display:block;overflow:hidden;color:#fff;isolation:isolate;transition:opacity .26s ease,background .65s ease;}
/* The transition lives on the base state, not on .is-docking: a
   transition declared only by the class that also changes the value
   never ran, and the mark snapped into the header on frame one while
   the panel was still retracting behind it. */
.eco-logo-intro__stage{position:absolute;z-index:1;left:50%;top:50%;width:1040px;height:305.5px;margin:-152.75px 0 0 -520px;transform:scale(var(--ela-scale,.8));transform-origin:center center;will-change:transform;pointer-events:none;}
.eco-logo-intro__skip{position:absolute;z-index:2;bottom:max(28px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);border:1px solid rgba(255,255,255,.72);border-radius:100px;background:rgba(3,36,49,.3);color:#fff;padding:11px 22px;font:700 12px InterLocal,sans-serif;cursor:pointer;transition:background .25s,border-color .25s;}
.eco-logo-intro__skip:hover,.eco-logo-intro__skip:focus-visible{background:rgba(3,36,49,.75);border-color:#fff;outline:2px solid #fff;outline-offset:3px;}
html .eco-logo-intro.is-leaving{opacity:0;pointer-events:none;transition:opacity .28s ease;}
@keyframes ecoLogoIntroFailsafe{to{visibility:hidden;pointer-events:none}}
html .eco-logo-intro{background:transparent;animation:ecoLogoIntroFailsafe .01s linear 2.7s forwards;}
html .eco-logo-intro::before{display:block!important;position:absolute;inset:0;border-radius:0;background:var(--gradient-brand);filter:none;box-shadow:none;animation:none!important;opacity:1;transition:opacity .62s ease .06s;}
html .eco-logo-intro::after{display:none!important;}
html .eco-logo-intro.is-docking::before{opacity:0;transition-duration:.65s;}
html .eco-logo-intro .el-fx{display:none!important;}
/* The three beats are chained: ecol writes, the infinity draws, the p
   lands. Each wipe stops at the right edge of its own letters, because
   a wipe across the full 1040px canvas finishes the visible glyphs in
   its first third and then runs on empty, which read as a freeze. */
html .eco-logo-intro.el-run .el-layer.el-ecol{animation:ecoWipeEcol .46s cubic-bezier(.36,.02,.32,1) both!important;-webkit-mask-image:none!important;mask-image:none!important;}
html .eco-logo-intro.el-run .el-layer .el-inf{stroke-dasharray:118 118;animation:ecoInfinityOnce .62s cubic-bezier(.24,.5,.62,1) .28s both!important;}
html .eco-logo-intro.el-run .el-layer.el-p{animation:ecoLandP .3s cubic-bezier(.2,.9,.3,1.2) .78s both!important;-webkit-mask-image:none!important;mask-image:none!important;}
/* A charge running the loop once the stroke has closed. The path is
   113.98 long (measured, not the 118 the draw uses as a safe margin),
   so each dash pattern sums to exactly that or the loop would drift.
   The head rides 13 ahead of the trail, which is what makes it a comet
   rather than a bright spot with a tail behind the wrong end. */
.el-inf-glow,.el-inf-trail,.el-inf-spark{fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.el-inf-glow{stroke:rgba(74,228,180,.42);stroke-width:9.5;filter:blur(7px)}
.el-inf-trail{stroke:rgba(150,247,210,.55);stroke-width:6.2;filter:blur(3.6px)}
.el-inf-spark{stroke:#f4fffb;stroke-width:4.6;filter:drop-shadow(0 0 7px rgba(0,212,170,.95)) drop-shadow(0 0 18px rgba(20,186,165,.75)) drop-shadow(0 0 34px rgba(20,186,165,.4))}
html .eco-logo-intro.el-run .el-layer .el-inf-glow{stroke-dasharray:27 86.98;animation:ecoInfCharge .52s linear .86s infinite,ecoInfChargeIn .22s ease-out .86s both!important}
html .eco-logo-intro.el-run .el-layer .el-inf-trail{stroke-dasharray:21 92.98;animation:ecoInfCharge .52s linear .86s infinite,ecoInfChargeIn .22s ease-out .86s both!important}
html .eco-logo-intro.el-run .el-layer .el-inf-spark{stroke-dasharray:8 105.98;animation:ecoInfChargeHead .52s linear .86s infinite,ecoInfChargeIn .22s ease-out .86s both!important}
/* The panel retracts into the header logo rather than fading, so the
   intro hands the page over instead of disappearing off it. The clip
   and the stage share one easing and one duration; if they drift apart
   the shrinking edge crops the mark. */
html .eco-logo-intro{transition:opacity .28s ease;}
/* While the intro is on screen the header logo is hidden, so the mark
   is not on the page twice. Keying this on the overlay's presence
   rather than a class means removing the overlay reveals it, and a
   script that never runs cannot leave the header bare. */
html:has(#eco-logo-intro) .site-header .brand{opacity:0;}

/* The docked shape is set inline by logo-animation.js, not through
   custom properties: a clip-path built from var() does not transition,
   because changing a custom property substitutes a token rather than
   interpolating a value. */
html .eco-logo-intro.is-docking{background:transparent;opacity:1;}
/* Skip goes with the panel. It used to hang over the hero on its own
   for the length of the dock, long after there was anything to skip. */
html .eco-logo-intro.is-docking .eco-logo-intro__skip{animation:none!important;opacity:0;pointer-events:none;transition:opacity .22s ease;}

html .eco-logo-intro.is-docking .eco-logo-intro__stage{animation:none!important;}
@keyframes ecoBrandWipe{from{clip-path:inset(0 100% 0 0);opacity:.65}to{clip-path:inset(0 0 0 0);opacity:1}}
/* The "l" ends at exactly 50% of the 160-wide viewBox, so the wipe
   stops just past it; landing on 50% shaves the stem's right edge. */
@keyframes ecoWipeEcol{from{clip-path:inset(0 100% 0 0);opacity:.55}to{clip-path:inset(0 49% 0 0);opacity:1}}
@keyframes ecoLandP{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:translateX(0)}}
@keyframes ecoInfinityOnce{from{stroke-dashoffset:118}to{stroke-dashoffset:0}}
@keyframes ecoInfCharge{from{stroke-dashoffset:113.98}to{stroke-dashoffset:0}}
@keyframes ecoInfChargeHead{from{stroke-dashoffset:100.98}to{stroke-dashoffset:-13}}
@keyframes ecoInfChargeIn{from{opacity:0}to{opacity:1}}

/* Town dots sized by installation volume; small pulsing points open each state's video. */
.mvp-map-stage{display:grid;grid-template-columns:minmax(0,1fr);place-items:center}
.mvp-map-art{max-width:980px}
.mvp-map-art .state-shape{vector-effect:non-scaling-stroke;stroke-width:1.4}
.map-towns .activity-dot{fill:rgba(190,242,100,.34);stroke:rgba(217,249,157,.85);stroke-width:.7;opacity:1;transform-box:fill-box;transform-origin:center;animation:activityArrive .6s var(--ease) var(--delay,0s) both}
.map-towns .activity-dot.is-muted{opacity:.16}
@keyframes activityArrive{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
.map-marker{width:30px;height:30px;transform:translate(-50%,-50%) scale(calc(1 / var(--map-zoom,1)))}
.map-towns .activity-dot{stroke-width:calc(.7px / var(--map-zoom,1))}
.map-marker .marker-core{width:8px;height:8px;background:#fff;box-shadow:0 0 0 4px rgba(0,212,170,.28),0 0 16px rgba(0,212,170,.85)}
.map-marker .marker-ring{border-color:rgba(0,212,170,.85)}
.map-marker:hover .marker-core,.map-marker:focus-visible .marker-core,.map-marker.is-selected .marker-core{transform:scale(1.5);background:#fff}
.map-zoom-controls{position:absolute;z-index:4;right:22px;bottom:22px;display:flex;gap:5px;margin:0}
.map-zoom-controls button{border:1px solid rgba(255,255,255,.28);border-radius:7px;background:rgba(10,25,41,.55);color:#fff;min-width:32px;height:31px;backdrop-filter:blur(6px);cursor:pointer}
.map-zoom-controls button:hover,.map-zoom-controls button:focus-visible{background:#1b6b6e;border-color:#00d4aa}
.map-zoom-controls [data-map-reset]{padding:0 11px;font-size:10px;font-weight:700}
@media(max-width:760px){.map-zoom-controls{right:12px;bottom:12px}}
@media(prefers-reduced-motion:reduce){.map-towns .activity-dot{animation:none}}

/* Illustrated cutaway replaces the older custom-drawn home. */
.systems-scene{background:linear-gradient(155deg,#fff 3%,#f0fdfa 55%,#dbf2ee);min-height:620px;}
.systems-scene::before{background:linear-gradient(0deg,rgba(11,65,65,.08),transparent 17%);z-index:2;}
.systems-scene-top,.systems-scene-foot{color:#1b6b6e;}
.systems-house{position:absolute;inset:auto;left:50%;top:50%;width:min(100%,871px);height:auto;aspect-ratio:1586/992;transform:translate(-50%,-50%);display:block;}
.systems-house>img{display:block;width:100%;height:100%;object-fit:contain;}
.systems-hotspots{position:absolute;inset:0;z-index:3;}
.systems-hotspots button{left:var(--left);top:var(--top);width:var(--w);height:var(--h);transform:none;display:block;background:transparent;color:#14344a;border:2px solid transparent;border-radius:13px;box-shadow:none;animation:none;cursor:pointer;transition:background .3s,border-color .3s,box-shadow .3s;}
.systems-hotspots button:hover,.systems-hotspots button:focus-visible,.systems-hotspots button.is-active{transform:none;background:rgba(0,212,170,.10);border-color:rgba(0,169,141,.86);box-shadow:inset 0 0 32px rgba(0,212,170,.16),0 0 28px rgba(0,212,170,.2);outline:0;}
.systems-hotspots button span{position:absolute;left:7px;top:7px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#14344a;color:#fff;font-size:11px;box-shadow:0 2px 10px rgba(0,0,0,.22);}
.systems-hotspots button.is-active span{background:#00a98d;}
.systems-hotspots button i{position:absolute;left:auto;right:6px;bottom:5px;transform:translateY(5px);opacity:0;background:#fff;color:#14344a;font-size:11px;border:1px solid rgba(27,107,110,.2);box-shadow:0 5px 15px rgba(0,0,0,.08);}
.systems-hotspots button:hover i,.systems-hotspots button:focus-visible i,.systems-hotspots button.is-active i{transform:translateY(0);opacity:1;}
.systems-hotspots button.is-compact{min-width:38px;min-height:38px}
.systems-hotspots button.is-compact span{left:50%;top:50%;transform:translate(-50%,-50%)}
.systems-hotspots button.is-compact i{right:auto;bottom:auto;left:50%;top:calc(100% + 6px);white-space:nowrap;transform:translate(-50%,5px)}
.systems-hotspots button.is-compact:hover i,.systems-hotspots button.is-compact:focus-visible i,.systems-hotspots button.is-compact.is-active i{transform:translate(-50%,0)}
.systems-hotspots button.is-compact[data-system=battery] i{left:auto;right:calc(100% + 6px);top:50%;transform:translate(-5px,-50%)}
.systems-hotspots button.is-compact[data-system=battery]:is(:hover,:focus-visible,.is-active) i{transform:translate(0,-50%)}
.systems-hotspots button.is-compact[data-system=smart] i{left:calc(100% + 6px);top:50%;transform:translate(5px,-50%)}
.systems-hotspots button.is-compact[data-system=smart]:is(:hover,:focus-visible,.is-active) i{transform:translate(0,-50%)}
/* Dark-on-light copy of the mark: the letters take the bill's ink
   colour, the infinity keeps its gradient. */
.inline-brand-mark{display:block}
.inline-brand-mark .eco-brand-mark{width:112px}
@media(max-width:800px){.systems-scene{min-height:430px}.systems-house{width:min(100%,583px)}.systems-hotspots button span{width:25px;height:25px;font-size:10px}.systems-hotspots button i{font-size:9px}}
@media(max-width:480px){.systems-scene{min-height:290px}.systems-house{width:min(100%,377px)}.systems-hotspots button{border-radius:6px}.systems-hotspots button span{left:3px;top:3px;width:19px;height:19px;font-size:8px}.systems-hotspots button i{font-size:8px;padding:3px 4px;max-width:85px;white-space:normal}}
@media(prefers-reduced-motion:reduce){.el-inf-glow,.el-inf-trail,.el-inf-spark{display:none!important}html .eco-logo-intro.el-run .el-layer.el-ecol,html .eco-logo-intro.el-run .el-layer.el-p,html .eco-logo-intro.el-run .el-layer .el-inf{animation:none!important;clip-path:none!important;stroke-dasharray:none!important}}

/* ── Intro: smoother entry and a calmer landing ──────────────────────
   The animation was already there; what it lacked was easing. Three
   things were abrupt: the layers all started together, the flight into
   the header used a short ease that arrived with a visible stop, and
   the overlay cut out rather than dissolved.

   Everything below is timing and easing only. No geometry changes, so
   the logo still lands exactly on the header mark. */

/* Layers arrive in sequence instead of all at once: wordmark, then the
   loop, then the final letter. Reads as drawing rather than appearing. */
/* Per-layer delays live with the animations above, in one place. */

/* A slow breath on the stage while it holds, so the pause before the
   flight is alive rather than frozen. */
@keyframes ecoIntroBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.014); }
}
.eco-logo-intro.el-run:not(.is-docking) .eco-logo-intro__stage {
  animation: ecoIntroBreathe 4.2s cubic-bezier(.45, 0, .55, 1) infinite;
}

/* The flight into the header. An expo-out over nearly a second reads
   as the logo settling into place; the previous curve arrived with a
   visible stop. */
html .eco-logo-intro.is-docking .eco-logo-intro__stage {
  animation: none;
  transition: transform .92s cubic-bezier(.16, 1, .3, 1);
}
html .eco-logo-intro.is-docking {
  transition: background .6s ease, opacity .6s ease;
}

/* Dissolve rather than cut. The page underneath is already painted, so
   a longer fade costs nothing and removes the flicker at the seam. */
html .eco-logo-intro.is-leaving {
  opacity: 0;
  transition: opacity .52s cubic-bezier(.4, 0, .2, 1);
}

/* The skip control should not compete with the animation. */
.eco-logo-intro__skip {
  opacity: 0;
  animation: ecoIntroSkipIn .3s ease .6s forwards;
}
@keyframes ecoIntroSkipIn { to { opacity: .72; } }
.eco-logo-intro__skip:hover,
.eco-logo-intro__skip:focus-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .eco-logo-intro.el-run:not(.is-docking) .eco-logo-intro__stage,
  .eco-logo-intro__skip { animation: none; opacity: 1; }
  html .eco-logo-intro.is-docking .eco-logo-intro__stage,
  html .eco-logo-intro.is-leaving { transition-duration: .01s; }
}

/* ── Film pins on the map ────────────────────────────────────────────
   One pin per town that actually has a film, sitting on its own dot.
   The state pins they replace claimed a whole state from a single
   point; these claim a street. */
.map-film-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 3;
}
.film-pin-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(120, 240, 190, .55);
  animation: filmPinPulse 2.8s cubic-bezier(.4, 0, .2, 1) var(--pin-delay, 0s) infinite;
}
@keyframes filmPinPulse {
  0%   { transform: scale(.6); opacity: 0; }
  35%  { opacity: .9; }
  100% { transform: scale(1.65); opacity: 0; }
}
.film-pin-core {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #46e1aa;
  color: #06231b;
  font-size: .62rem;
  padding-left: 2px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35), 0 0 0 4px rgba(70, 225, 170, .18);
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease;
}
.map-film-pin:hover .film-pin-core,
.map-film-pin:focus-visible .film-pin-core {
  transform: scale(1.18);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45), 0 0 0 7px rgba(70, 225, 170, .26);
}
/* The name only shows on approach, so three labels do not crowd the
   coastline at rest. */
.film-pin-label {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 4px);
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(6, 35, 27, .92);
  color: #eafff6;
  font-size: .72rem;
  letter-spacing: .02em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s cubic-bezier(.2, .7, .3, 1);
}
.map-film-pin:hover .film-pin-label,
.map-film-pin:focus-visible .film-pin-label {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
  .film-pin-pulse { animation: none; opacity: .5; transform: scale(1.2); }
  .film-pin-core, .film-pin-label { transition: none; }
}

/* ── Map: bigger stage, framed on the work ───────────────────────────
   The stage grows and the art fills more of it, because the map is now
   the argument of this section rather than decoration beside it. */
.mvp-map-stage { min-height: clamp(560px, 68vh, 760px); }
.mvp-map-art {
  width: min(1080px, 94%);
  margin: 10px auto;
}

/* Pins sit inside the scaled layer, so they inherit its zoom. This
   cancels it: the map gets bigger, the pins stay the size a finger can
   hit. */
.map-film-pin {
  transform: translate(-50%, -50%) scale(var(--pin-counter-scale, 1));
  transform-origin: center;
}

/* ── Film pin ────────────────────────────────────────────────────────
   A map marker, the shape everyone already reads as one: a teardrop
   whose point sits on the town, in white so it separates from both the
   lime dots and the teal water. A green disc among green dots read as
   one more dot, only bigger. */
html .map-film-pin {
  width: 44px;
  height: 44px;
  /* The point marks the place, so the marker hangs above it. */
  transform: translate(-50%, -84%) scale(var(--pin-counter-scale, 1));
}
html .map-film-pin .film-pin-core {
  position: relative;
  width: 32px;
  height: 32px;
  padding: 0;
  background: linear-gradient(160deg, #ffffff, #e4fff5);
  border-radius: 50% 50% 50% 2px;
  transform: rotate(-45deg);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 6px 16px rgba(0, 0, 0, .45),
    0 2px 5px rgba(0, 0, 0, .3);
  transition: transform .28s cubic-bezier(.2, .8, .3, 1), background .28s ease, box-shadow .28s ease;
}
html .map-film-pin .film-pin-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* Cancels the teardrop's rotation so the triangle stands upright. */
  transform: rotate(45deg);
}
html .map-film-pin .film-pin-play svg {
  width: 11px;
  height: 11px;
  fill: #0b3b34;
  /* A triangle's visual mass sits left of its bounding box. */
  margin-left: 1.5px;
  transition: fill .28s ease, transform .28s cubic-bezier(.2, .8, .3, 1);
}
html .map-film-pin:hover .film-pin-core,
html .map-film-pin:focus-visible .film-pin-core {
  transform: rotate(-45deg) scale(1.16);
  background: linear-gradient(160deg, #46e1aa, #15b793);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .5) inset,
    0 10px 24px rgba(0, 0, 0, .5),
    0 0 22px rgba(70, 225, 170, .45);
}
html .map-film-pin:hover .film-pin-play svg,
html .map-film-pin:focus-visible .film-pin-play svg {
  fill: #fff;
  transform: scale(1.12);
}
/* The halo stays under the round part, not around the point. */
html .map-film-pin .film-pin-pulse {
  inset: -5px -5px 5px -5px;
  border-color: rgba(255, 255, 255, .34);
}
html .map-film-pin .film-pin-label { bottom: calc(100% + 2px); }
@media (prefers-reduced-motion: reduce) {
  html .map-film-pin .film-pin-core,
  html .map-film-pin .film-pin-play svg { transition: none; }
}

/* ── Hotspot numbers ─────────────────────────────────────────────────
   The badges were navy on an illustration that has a dark garage, a
   deep red gable and a grey study, so three of the six disappeared
   into their own background. White carries over every part of the
   drawing; the thin dark edge is what keeps it off the pale walls and
   the sky. */
html .systems-hotspots button span {
  background: #fff;
  color: #0e2f36;
  font-weight: 800;
  border: 1.5px solid rgba(14, 47, 54, .25);
  box-shadow:
    0 2px 9px rgba(0, 0, 0, .38),
    0 0 0 2px rgba(255, 255, 255, .4);
}
html .systems-hotspots button.is-active span,
html .systems-hotspots button:hover span {
  background: #00a98d;
  color: #fff;
  border-color: rgba(255, 255, 255, .92);
  box-shadow:
    0 2px 11px rgba(0, 0, 0, .4),
    0 0 0 3px rgba(0, 169, 141, .32);
}

/* ── Intro polish ────────────────────────────────────────────────────
   Three things the flat brand panel was missing: depth behind the
   mark, a beat when the loop closes, and a highlight that crosses the
   scene once it is whole. All inside the existing 2.5s, none of them
   delaying the dock. */

/* Depth. A slow radial breath behind the logo, so the panel is lit
   rather than painted. */
html .eco-logo-intro::after {
  display: block !important;
  content: '';
  position: absolute;
  inset: -10%;
  z-index: 0;
  border: 0;
  box-shadow: none;
  /* Four soft fields drifting against each other. Each one moves on
     its own timing, so the panel never settles into a shape you can
     name, which is what separates this from a static gradient. */
  background:
    radial-gradient(46% 54% at 22% 26%, rgba(0, 212, 170, .34), transparent 70%),
    radial-gradient(52% 50% at 80% 68%, rgba(20, 186, 165, .3), transparent 72%),
    radial-gradient(40% 44% at 64% 14%, rgba(126, 240, 196, .2), transparent 70%),
    radial-gradient(56% 52% at 38% 88%, rgba(13, 110, 120, .32), transparent 74%),
    /* A little light directly behind the mark, so the letters sit on
       something rather than on the gap between two fields. */
    radial-gradient(34% 30% at 50% 47%, rgba(126, 240, 196, .16), transparent 72%);
  /* Wide enough that no field shows an edge of its own. */
  filter: blur(62px);
  animation: ecoAuroraDrift 19s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes ecoAuroraDrift {
  0%   { transform: translate3d(-2.5%, -1.5%, 0) scale(1.04); }
  45%  { transform: translate3d(2%, 2.5%, 0) scale(1.12); }
  100% { transform: translate3d(-1%, 1.5%, 0) scale(1.06); }
}
html .eco-logo-intro.is-docking::after { opacity: 0; transition: opacity .4s ease; }

/* The beat. One pulse out of the infinity at the moment it closes. */
.eco-logo-flash {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 46vmin;
  height: 46vmin;
  margin: -23vmin 0 0 -23vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(190, 255, 228, .5), rgba(70, 225, 170, .18) 45%, transparent 68%);
  opacity: 0;
  pointer-events: none;
}
html .eco-logo-intro.el-run .eco-logo-flash {
  animation: ecoIntroFlash .5s cubic-bezier(.15, .7, .3, 1) .8s both;
}
@keyframes ecoIntroFlash {
  0%   { opacity: 0;   transform: scale(.55); }
  28%  { opacity: 1;   transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.5); }
}

/* Grain. A single tile of fractal noise over the whole panel at 5%.
   It is what keeps a CSS gradient from looking like a CSS gradient:
   flat colour fields band on wide screens, and the noise breaks the
   bands up without being visible as texture. */
.eco-logo-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity: .05;
  mix-blend-mode: overlay;
  pointer-events: none;
}
html .eco-logo-intro.is-docking .eco-logo-grain { opacity: 0; transition: opacity .3s ease; }

@media (prefers-reduced-motion: reduce) {
  html .eco-logo-intro::after { animation: none; }
  .eco-logo-flash { display: none !important; }
  .eco-logo-grain { opacity: .04; }
}

/* ── Hero headline ───────────────────────────────────────────────────
   The approved MVP headline keeps its face and tracking. Round 3
   sizes it below for the copy-and-bill composition and stacked mobile. */
/* The tracking (-.077em) that keeps the letters tight also eats about a
   third of each space, so "Lock In a Lower" read as one word. Word
   spacing gives the spaces back without loosening the letters. */
.hero h1 { word-spacing: .14em; }

/* ── Film preview beside the map ─────────────────────────────────────
   Pin -> preview -> player (ECTCH-944). The pin used to open the video
   straight away, and hovering it floated a second player over the
   coastline. Now a pin selects, the preview says where and what, and
   the preview is the one thing that opens the film.

   Positioned over the stage's right edge instead of in a column beside
   the art, so opening it never resizes the map: the framing and zoom
   are exactly what they were. */
.map-film-pin.is-selected .film-pin-label { opacity: 1; transform: translate(-50%, 0); }
html .map-film-pin.is-selected .film-pin-core {
  transform: rotate(-45deg) scale(1.16);
  background: linear-gradient(160deg, #46e1aa, #15b793);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 10px 24px rgba(0, 0, 0, .5), 0 0 22px rgba(70, 225, 170, .45);
}
html .map-film-pin.is-selected .film-pin-play svg { fill: #fff; }

.map-preview {
  position: absolute;
  top: 50%;
  right: clamp(16px, 2vw, 28px);
  z-index: 5;
  width: min(300px, 30%);
  transform: translateY(-50%);
  border-radius: 18px;
  background: linear-gradient(170deg, #0f3a44, #0a2530 70%);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .42), 0 0 0 1px rgba(126, 240, 196, .26), inset 0 1px 0 rgba(255, 255, 255, .06);
  overflow: hidden;
}
.map-preview[hidden] { display: none; }
.map-preview.is-entering { animation: mapPreviewIn .38s cubic-bezier(.2, .8, .25, 1) both; }
@keyframes mapPreviewIn {
  from { opacity: 0; transform: translate(14px, -50%); }
  to   { opacity: 1; transform: translate(0, -50%); }
}
.map-preview-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  background: rgba(6, 28, 33, .7);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.map-preview-close:hover, .map-preview-close:focus-visible { background: #0b3b34; border-color: #46e1aa; }
.map-preview-card {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.map-preview-card:focus-visible { outline: 2px solid #46e1aa; outline-offset: -2px; border-radius: 18px; }
.map-preview-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #102e2d; }
.map-preview-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .3, 1); }
.map-preview-card:hover .map-preview-media img { transform: scale(1.05); }
.map-preview-play {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
  transition: background .28s ease, transform .28s cubic-bezier(.2, .8, .3, 1);
}
.map-preview-play svg { width: 16px; height: 16px; fill: #0b3b34; margin-left: 2px; transition: fill .28s ease; }
.map-preview-card:hover .map-preview-play, .map-preview-card:focus-visible .map-preview-play { background: #46e1aa; transform: scale(1.08); }
.map-preview-card:hover .map-preview-play svg, .map-preview-card:focus-visible .map-preview-play svg { fill: #fff; }
.map-preview-body { display: grid; gap: 6px; padding: 16px 18px 18px; }
.map-preview-kicker { font-size: .64rem; font-weight: 700; letter-spacing: .14em; color: #7fe4cb; }
.map-preview-body strong { font: 600 1.35rem/1.15 JakartaLocal, sans-serif; letter-spacing: -.04em; color: #fff; }
.map-preview-body small { font-size: .8rem; line-height: 1.5; color: rgba(200, 240, 226, .78); }
.map-preview-cta {
  justify-self: start;
  margin-top: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid currentColor;
  font-size: .78rem;
  font-weight: 800;
  color: #46e1aa;
}

/* No room beside the map below 1100px, where the panel would start
   covering the Danvers and Boston pins: the preview drops under it, full
   width of the stage, image beside text so it stays one short row. */
@media (max-width: 1100px) {
  .map-preview {
    position: relative;
    top: auto;
    right: auto;
    width: auto;
    justify-self: stretch;
    /* Its own height: the stage's grid row would otherwise stretch it. */
    align-self: start;
    margin: 0 4px 4px;
    transform: none;
  }
  .map-preview.is-entering { animation-name: mapPreviewInBelow; }
  .map-preview-card { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; align-items: stretch; }
  .map-preview-media { aspect-ratio: auto; min-height: 140px; }
  /* Fills the row whatever height the text gives it. */
  .map-preview-media img { position: absolute; inset: 0; }
  .map-preview-play { width: 38px; height: 38px; left: 10px; bottom: 10px; }
  .map-preview-body { padding: 14px 48px 14px 16px; align-content: center; }
  .map-preview-body strong { font-size: 1.15rem; }
}
@keyframes mapPreviewInBelow { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) {
  .map-preview-card { grid-template-columns: 1fr; }
  .map-preview-media { aspect-ratio: 16 / 9; min-height: 0; }
  .map-preview-body { padding: 14px 16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .map-preview.is-entering { animation: none; }
  .map-preview-media img, .map-preview-play, .map-preview-play svg { transition: none; }
  .map-preview-card:hover .map-preview-media img { transform: none; }
}

/* ── Leaflet map (ECTCH-944) ─────────────────────────────────────────
   The SVG drawing gives way to a Leaflet map of the same states, drawn
   from Census outlines over the stage's own background (no tiles). The
   map fills the stage; the pins and the preview stay the theme's own
   elements, placed over it from each pin's lat/lng. */
html .mvp-map-stage { display: flex; flex-direction: column; padding: 0; min-height: 0; }
html .mvp-map-art {
  position: relative;
  width: 100%;
  max-width: none;
  height: clamp(560px, 68vh, 760px);
  aspect-ratio: auto;
  margin: 0;
  transform: none;
  cursor: default;
}
.mvp-leaflet { position: absolute; inset: 0; isolation: isolate; z-index: 0; }
.mvp-leaflet.leaflet-container { background: transparent; font-family: inherit; outline: 0; }
.mvp-leaflet .leaflet-interactive { cursor: default; }
/* Town names on hover, as the SVG's titles did. */
.map-town-tip.leaflet-tooltip {
  padding: 4px 9px;
  border: 0;
  border-radius: 999px;
  background: rgba(6, 35, 27, .92);
  color: #eafff6;
  font-size: .72rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}
.map-town-tip.leaflet-tooltip-top::before { border-top-color: rgba(6, 35, 27, .92); }
/* Pins wait for the map, which gives them their position. */
.mvp-map-art:not(.is-ready) .map-film-pin { visibility: hidden; }
html .map-film-pin { left: var(--x, 50%); top: var(--y, 50%); z-index: 3; }
.mvp-map-art.is-failed::after {
  content: 'The map could not load.';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #adcbc1;
  font-size: .9rem;
}
@media (max-width: 760px) { html .mvp-map-art { height: 420px; } }

/* The leader line from the selected pin to the preview: a thin elbow
   callout, no glow. */
.map-leader { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; opacity: 0; transition: opacity .2s ease; }
.map-leader.is-on { opacity: 1; }
.map-leader-path { fill: none; stroke: #c9fbe6; stroke-width: 1.25; stroke-linejoin: miter; }
.map-leader-origin { fill: #c9fbe6; }
.map-preview.is-entering.after-leader { animation-delay: .14s; }
/* Beside the pin, at the end of the line, instead of the map's edge. */
.map-preview.is-anchored { top: var(--card-y); right: auto; left: var(--card-x); transform: none; }
.map-preview.is-anchored.is-entering { animation-name: mapPreviewBesidePin; }
@keyframes mapPreviewBesidePin {
  from { opacity: 0; transform: translateX(calc(var(--card-side, 1) * -8px)); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 1100px) { .map-leader { display: none; } }

/* ── Round film pins (ECTCH-956 review) ───────────────────────────────
   A dark disc with a glowing mint rim and a white play mark, centred on
   the town, with soft rings that pulse outward to say "press me". It
   replaces the white teardrop, which read as a location marker rather
   than as something to play. Same element, same stacking. */
html .map-film-pin {
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
/* The disc is drawn by ::before, and only the disc grows on hover. The
   play mark never scales, so no browser can re-raster it a pixel off
   centre while the hover settles. */
html .map-film-pin .film-pin-core {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  transform: none;
  transition: none;
}
html .map-film-pin .film-pin-core::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #5ef2d6;
  background: radial-gradient(circle at 50% 38%, #12525a, #072b33 72%);
  box-shadow:
    0 0 0 3px rgba(94, 242, 214, .16),
    0 0 16px rgba(94, 242, 214, .55),
    0 6px 14px rgba(0, 0, 0, .35);
  transition: transform .28s cubic-bezier(.2, .8, .3, 1), box-shadow .28s ease, background .28s ease;
}
html .map-film-pin .film-pin-play { transform: none; }
/* No margin nudge: the triangle's centroid already sits on the centre
   of its viewBox. */
html .map-film-pin .film-pin-play svg { width: 13px; height: 13px; fill: #fff; margin: 0; transform: none; transition: none; }
html .map-film-pin:hover .film-pin-core,
html .map-film-pin:focus-visible .film-pin-core,
html .map-film-pin.is-selected .film-pin-core { transform: none; background: none; box-shadow: none; }
html .map-film-pin:hover .film-pin-core::before,
html .map-film-pin:focus-visible .film-pin-core::before,
html .map-film-pin.is-selected .film-pin-core::before {
  transform: scale(1.12);
  background: radial-gradient(circle at 50% 38%, #17707a, #0a3a42 72%);
  box-shadow:
    0 0 0 4px rgba(94, 242, 214, .22),
    0 0 26px rgba(94, 242, 214, .75),
    0 8px 18px rgba(0, 0, 0, .4);
}
html .map-film-pin:hover .film-pin-play svg,
html .map-film-pin:focus-visible .film-pin-play svg,
html .map-film-pin.is-selected .film-pin-play svg { fill: #fff; transform: none; }
/* Two rings, half a beat apart. */
html .map-film-pin .film-pin-pulse { inset: 3px; border: 1.5px solid rgba(94, 242, 214, .55); }
html .map-film-pin::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1.5px solid rgba(94, 242, 214, .55);
  pointer-events: none;
  animation: filmPinPulse 2.8s cubic-bezier(.4, 0, .2, 1) calc(var(--pin-delay, 0s) + 1.4s) infinite;
}
html .map-film-pin .film-pin-label { bottom: calc(100% + 4px); }
/* Danvers, Lawrence and Boston sit close: the pin in use, and its name,
   come in front of its neighbours. */
html .map-film-pin:hover, html .map-film-pin:focus-visible, html .map-film-pin.is-selected { z-index: 4; }
@media (prefers-reduced-motion: reduce) {
  html .map-film-pin::after { animation: none; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html .map-film-pin .film-pin-core::before { transition: none; }
}
@media (max-width: 760px) {
  html .map-film-pin { width: 36px; height: 36px; }
  html .map-film-pin .film-pin-core { width: 28px; height: 28px; }
  html .map-film-pin .film-pin-play svg { width: 11px; height: 11px; }
}

/* ── Film pins as pulsing town dots (map review, 2026-10-20) ──────────
   At rest a film pin is a green dot like the towns', a little brighter,
   with green rings pulsing out of it: it says "something here" without
   a play disc competing with the names. Hover, keyboard focus or a
   selected pin open it into the play disc. On touch the first tap
   selects it, so the disc shows there too. The button keeps its 44px
   (36px on a phone) so it stays easy to hit. */
/* A pin too close to a busier neighbour at this zoom waits for the next. */
html .map-film-pin.is-crowded { visibility: hidden; pointer-events: none; }
/* 24px, the WCAG 2.2 minimum target: with a pin per town, a 44px button
   reaches over its neighbours and hovering one opens the next. */
html .map-film-pin { width: 24px; height: 24px; }
html .map-film-pin .film-pin-core { width: 24px; height: 24px; }
html .map-film-pin .film-pin-core::before {
  inset: 6px;
  border: 1.5px solid rgba(217, 249, 157, .95);
  background: rgb(190, 242, 100);
  box-shadow: 0 0 10px rgba(190, 242, 100, .7);
  transition: inset .26s cubic-bezier(.2, .8, .3, 1), background .26s ease, border-color .26s ease, box-shadow .26s ease;
}
html .map-film-pin .film-pin-pulse,
html .map-film-pin::after { inset: 1px; border: 1.5px solid rgba(190, 242, 100, .7); }
/* Hover, focus or the open card: the dot swells and glows. */
html .map-film-pin:hover .film-pin-core::before,
html .map-film-pin:focus-visible .film-pin-core::before,
html .map-film-pin.is-selected .film-pin-core::before {
  inset: 3px;
  transform: none;
  border-color: #fff;
  background: rgb(205, 250, 120);
  box-shadow: 0 0 0 4px rgba(190, 242, 100, .22), 0 0 18px rgba(190, 242, 100, .85);
}
@media (prefers-reduced-motion: reduce) {
  html .map-film-pin .film-pin-core::before { transition: none; }
}
@media (max-width: 760px) {
  html .map-film-pin { width: 24px; height: 24px; }
}

/* The hover card: the place's footage and its name, nothing to press.
   A clip fades in over its still once it is playing. */
html .map-preview { pointer-events: none; }
@media (max-width: 1100px) {
  html .map-preview { width: min(100% - 8px, 420px); justify-self: center; }
  html .map-preview-media { aspect-ratio: 16 / 9; min-height: 0; }
}
.map-preview-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.map-preview.is-playing .map-preview-media video { opacity: 1; }
.map-preview-place { display: block; padding: 12px 16px 14px; font: 600 1.15rem/1.2 JakartaLocal, sans-serif; letter-spacing: -.03em; color: #fff; }
@media (prefers-reduced-motion: reduce) { .map-preview-media video { transition: none; } }

/* Round 3: the existing bill paper replaces the hero media. */
.hero{min-height:0;background:#142b2a}
body.home .hero{background:var(--gradient-hero)}
.hero-content{min-height:0;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(36px,5vw,80px);padding-top:150px;padding-bottom:105px}
.hero-copy{min-width:0}
.hero h1{font-size:clamp(48px,4.6vw,72px)}
.hero .bill-paper{width:100%;height:800px;display:flex;flex-direction:column;color:#14344a;justify-self:end;transform:rotate(-1.4deg)}
.hero .bill-paper:hover{transform:rotate(0) translateY(-5px)}
.hero .bill-paper-top{flex:none;padding:20px 25px 15px}
.hero .bill-perforation{flex:none}
.hero .bill-paper-bottom{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 25px 20px;scrollbar-gutter:stable}
.hero .bill-paper-bottom:focus-visible{outline-offset:-4px}
.hero .bill-paper-head{padding-bottom:10px}
.hero .bill-paper h2{font-family:InterLocal,sans-serif;font-size:20px;line-height:1.2;letter-spacing:-.04em;margin:14px 0 10px;font-weight:700}
.hero .bill-paper-top dl{gap:6px 16px;padding-bottom:10px}
.hero .bill-amount{margin:10px 0 8px}
.hero .bill-amount output{font-size:52px}
.hero .bill-after output{font-size:52px}
.hero .bill-after{margin-top:8px}
.hero .bill-paper-bottom>p{margin:10px 0}
.hero .bill-projection{padding:6px 12px}
.hero .bill-paper-bottom details{margin-top:10px}
.hero .bill-zip-form{margin-top:12px}
.hero .bill-paper-top label{margin-bottom:6px}
.hero .bill-utility-outlook{margin-top:10px}
.hero .bill-paper-bottom .bill-estimate-note{font-size:12px;margin-top:12px}
.hero .bill-projection summary,.hero .bill-paper-bottom>details>summary{min-height:44px;display:flex;align-items:center}
.hero .bill-paper-bottom>details{font-size:12px}
.hero .bill-paper .inline-brand-mark{color:#14344a}
.hero .bill-paper .inline-brand-mark .eco-brand-mark{width:96px}
@media(max-width:1100px){
  .hero-content{grid-template-columns:minmax(0,1fr) minmax(0,390px);gap:35px}
  .hero .bill-paper{height:810px}
  .hero h1{font-size:clamp(45px,5vw,58px)}
  .hero-kicker{letter-spacing:.12em;font-size:10px}
}
@media(max-width:920px){
  .hero-content{grid-template-columns:1fr;gap:45px;padding-top:130px;padding-bottom:100px}
  .hero-copy{max-width:720px}
  .hero h1{font-size:clamp(48px,7.4vw,68px)}
  .hero .bill-paper{width:min(420px,100%);justify-self:center;transform:none;margin:0}
  /* Stacked under the copy the card takes its natural height: a fixed
     height turned the lower half into a scroll box that phones cut off
     (ECTCH-981). Everything, assumptions included, is in the page flow. */
  .hero .bill-paper{height:auto}
  .hero .bill-paper-bottom{flex:none;overflow:visible;scrollbar-gutter:auto}
  .hero .bill-paper:hover{transform:none}
}
@media(max-width:700px){
  .hero-content{padding-top:125px;padding-bottom:90px;gap:38px}
  .hero h1{font-size:clamp(42px,11vw,64px)}
  .hero .bill-paper-top{padding:18px 20px 14px}
  .hero .bill-paper-bottom{padding:15px 20px 18px}
  .hero .bill-paper h2{margin-top:16px}
  .hero .bill-amount output,.hero .bill-after output{font-size:clamp(40px,13vw,52px)}
}
@media(max-width:360px){
  .hero .bill-paper-top{padding:16px 16px 12px}
  .hero .bill-paper-bottom{padding:14px 16px 16px}
  .hero .bill-amount{flex-wrap:wrap;gap:4px 10px}
  .hero .bill-amount span{padding-bottom:0}
  .hero .bill-after{gap:12px}
  .hero .bill-zip-form>div{flex-wrap:wrap}
  .hero .bill-zip-form input{width:100%}
}

/* Reference estimate copy stays visible alongside the bill values. */
.bill-utility-outlook{font-size:13px;line-height:1.55;color:#52665c;margin:16px 0 0}
.bill-utility-outlook strong{color:#1c7962;font-variant-numeric:tabular-nums}
.bill-paper-bottom .bill-estimate-note{font-size:11px;line-height:1.55;margin:17px 0 0}
.hero .bill-paper-bottom .bill-estimate-note{font-weight:700;color:#2f5f50}
.bill-assumptions p+p{margin-top:6px}
.hero-call .play-icon svg{width:17px;height:17px;fill:currentColor;display:block}
.hero-call-number{font-variant-numeric:tabular-nums;opacity:.78;font-weight:500}
@media(max-width:700px){.hero-ctas{gap:14px 22px}.hero-ctas .text-cta{min-height:44px}}

/* Hero energy: the brand's infinity rises along quiet wind trails. */
body.home .hero-motion{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;color:#8be5d5}
body.home .hero-motion *{pointer-events:none}
.hero-motion-defs{position:absolute}
.hero-wind{position:absolute;inset:0;width:100%;height:100%;opacity:.16}
.hero-wind-short{top:120px;bottom:auto;height:180px;opacity:.12}
.hero-wind-line{stroke-dasharray:300;stroke-dashoffset:0;animation:none}
.hero-loop-particle{position:absolute;width:42px;height:auto;opacity:0;animation:none;--loop-travel:-280px;--loop-drift:18px}
.hero-loop-particle-1{left:5%;bottom:10%;--loop-delay:-1s}
.hero-loop-particle-2{left:19%;bottom:5%;width:30px;--loop-delay:-4s}
.hero-loop-particle-3{left:35%;bottom:11%;width:38px;--loop-delay:-8s}
.hero-loop-particle-4{left:52%;bottom:7%;width:32px;--loop-delay:-3s}
.hero-loop-particle-5{left:73%;bottom:12%;width:40px;--loop-delay:-6s}
.hero-loop-particle-6{left:94%;bottom:6%;width:28px;--loop-delay:-10s}
.hero[data-motion-ready] .hero-loop-particle{animation:hero-loop-rise 12s linear var(--loop-delay) infinite;animation-play-state:paused}
.hero[data-motion-ready] .hero-wind-line{animation:hero-wind-flow 12s ease-in-out infinite;animation-play-state:paused}
.hero[data-motion-ready] .hero-wind-line:nth-child(2){animation-delay:-4s}
.hero[data-motion-ready] .hero-wind-line:nth-child(3){animation-delay:-8s}
.hero[data-motion-state=running] :is(.hero-loop-particle,.hero-wind-line,.pulse-dot,.scroll-cue>span){animation-play-state:running}
.hero[data-motion-state=paused] :is(.hero-loop-particle,.hero-wind-line,.pulse-dot,.scroll-cue>span){animation-play-state:paused}
body.home .hero-bottom{gap:20px}
@keyframes hero-loop-rise{0%{opacity:0;transform:translate(0,0) rotate(-8deg)}15%{opacity:.5}75%{opacity:.25}100%{opacity:0;transform:translate(var(--loop-drift),var(--loop-travel)) rotate(12deg)}}
@keyframes hero-wind-flow{0%{stroke-dashoffset:300;opacity:0}20%{opacity:1}60%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-300;opacity:0}}
@media(max-width:700px){
  .hero-wind-short{top:82px;height:40px}
  :is(.hero-loop-particle-4,.hero-loop-particle-5,.hero-loop-particle-6){display:none}
  /* The existing gap below the header stays clear of the opaque bill
     and the reading area throughout these shorter mobile routes. */
  .hero-loop-particle{bottom:auto;--loop-travel:-28px;--loop-drift:4px}
  .hero-loop-particle-1{left:8%;top:110px;width:22px}
  .hero-loop-particle-2{left:47%;top:108px;width:26px}
  .hero-loop-particle-3{left:83%;top:109px;width:24px}
  body.home .hero-bottom-tagline{display:none}
  body.home .hero-bottom{gap:10px}
}
@media(prefers-reduced-motion:reduce){
  body.home .hero-loop-particle{display:none}
  body.home .hero[data-motion-ready] .hero-wind-line{animation:none;stroke-dashoffset:0;opacity:1}
  body.home .hero-wind{opacity:.08}
}

/* ── Round 4 (ECTCH-981) ─────────────────────────────────────────────── */
/* Proof: rating and founding year. */
.proof-out-of{font-size:15px;font-weight:700;color:#5d7472}
.proof-google{display:inline-flex;align-items:center;gap:8px}
.proof-reviews .proof-google img{width:20px;height:20px;flex:none}
.proof-bbb .trust-badges{gap:12px;margin:14px 0}
.proof-bbb .trust-badges{--badge-h:88px}
/* The EnergySage hexagon carries its own white margin, so at the same
   height it reads smaller than the BBB block. Give it more height. */
.proof-bbb .trust-badge:last-child{--badge-h:116px}
@media(max-width:480px){.proof-bbb .trust-badge:last-child{--badge-h:56px}}
@media(max-width:480px){.proof-bbb .trust-badges{gap:5px;flex-wrap:nowrap;--badge-h:42px}.proof-bbb .trust-badge{padding:3px;border-radius:8px}.proof-out-of{font-size:12px}}

/* Proud to Be Part of the Local Community. */
.community-section{background:#fff;padding:72px 0 68px;border-top:1px solid #e3efec}
.community-head{display:flex;justify-content:space-between;align-items:end;gap:20px 50px;flex-wrap:wrap;margin-bottom:38px}
.community-head h2{font:600 clamp(34px,3.6vw,54px)/1.08 JakartaLocal,InterLocal,sans-serif;letter-spacing:-.06em;margin:0;max-width:720px;color:#14344a}
.community-head h2 em{font-style:normal;color:#1b6b6e}
.community-head p{margin:0;max-width:340px;font-size:15px;line-height:1.6;color:#4b5563}
.community-logos{list-style:none;margin:0;align-items:center}
.community-lane{display:grid}
.carousel-control .carousel-chevron{width:18px;height:18px}
/* Bare chevrons: no disc, no fill. They sit quiet beside the logos and only take the brand
   colour, with a nudge toward their direction, under the pointer. */
.community-lane .carousel-control{border:0;background:none;box-shadow:none;color:#9aaeb0;transition:color .25s,transform .3s var(--ease)}
.community-lane .carousel-control .carousel-chevron{width:26px;height:26px;stroke-width:1.6}
.community-lane .carousel-control:hover,.community-lane .carousel-control:focus-visible{background:none;box-shadow:none;color:#1b6b6e}
.community-lane .lane-prev:hover,.community-lane .lane-prev:focus-visible{transform:translateX(-3px)}
.community-lane .lane-next:hover,.community-lane .lane-next:focus-visible{transform:translateX(3px)}
.community-lane .carousel-control:focus-visible{outline:2px solid #00d4aa;outline-offset:2px;border-radius:8px}
.community-lane .carousel-viewport{mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.community-lane .carousel-track{gap:64px;padding:18px 0}
.community-logos li{flex:none;display:grid;place-items:center;width:170px;height:96px}
.community-logos img{display:block;width:auto;height:var(--h);max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1);opacity:.62;transition:filter .35s,opacity .35s,transform .35s}
/* Hover zooms enough to read the small print some chamber marks carry (seals, taglines).
   The track scrolls on overflow-x, which clips vertically too, so its padding leaves room. */
.community-logos li{position:relative}
.community-logos li:hover{z-index:1}
.community-logos li:hover img{filter:none;opacity:1;transform:scale(1.5)}
.community-lane .carousel-track{padding-block:26px}
@media(max-width:700px){
  .community-section{padding:58px 0}
  .community-lane .carousel-track{gap:36px}
  .community-logos li{width:130px;height:80px}
  .community-logos img{height:calc(var(--h) * .82)}
}
/* Reduced motion: no scrolling strip; all nine logos sit still, wrapped and centred. */
@media(prefers-reduced-motion:reduce){
  .community-lane .carousel-viewport{mask-image:none;overflow:visible}
  .community-lane .carousel-track{width:auto;transform:none!important;flex-wrap:wrap;justify-content:center;gap:12px 24px}
  .community-logos li:not([data-carousel-item]){display:none}
  .community-lane{display:block}.community-lane .carousel-control{display:none}
}
/* Map: local callout and city labels. */
.mvp-map .map-after{margin:48px 0 0}
.mvp-map .map-after h2{font-size:clamp(32px,3.4vw,48px);margin:0;color:#fff}
.map-city-label.leaflet-tooltip{padding:0;background:none;border:0;box-shadow:none;color:#e6fbf4;font:700 10px/1 InterLocal,sans-serif;letter-spacing:.02em;text-shadow:0 1px 3px rgba(4,26,30,.95),0 0 6px rgba(4,26,30,.8);pointer-events:none;white-space:nowrap}
.map-city-label.leaflet-tooltip::before{display:none}
@media(max-width:760px){.map-city-label.leaflet-tooltip{font-size:9px}}
/* Towns with fewer homes: named, but quieter than the big ones. */
.map-city-label.is-minor.leaflet-tooltip{font-weight:500;font-size:9px;color:rgba(230,251,244,.72)}
@media(max-width:760px){.map-city-label.is-minor.leaflet-tooltip{font-size:8px}}

/* Interactive home: named pills on the house, and on desktop the same
   five services as a list at the top of the right column, above the
   detail they open. Below 920px the console stacks and the menu falls
   back under the drawing, in DOM order. */
.systems-console{grid-template-rows:auto minmax(0,1fr)}
.systems-console>.systems-scene{grid-column:1;grid-row:1/3}
.systems-console>.systems-menu{grid-column:2;grid-row:1}
.systems-console>.systems-detail{grid-column:2;grid-row:2}
@media(min-width:921px){
  .systems-console>.systems-menu{flex-direction:column;flex-wrap:nowrap;gap:6px;padding:10px}
  .systems-console>.systems-menu button{flex:none;min-height:40px;text-align:left;padding:9px 18px}
  .systems-console>.systems-detail .systems-detail-photo{margin:22px 0 20px;height:170px}
}
html .systems-hotspots button span{position:absolute;left:8px;top:8px;width:auto;height:auto;padding:5px 10px;border-radius:99px;font:700 11px/1.2 InterLocal,sans-serif;letter-spacing:0;white-space:nowrap;transform:none}
html .systems-hotspots button.is-compact span{left:50%;top:auto;bottom:calc(100% + 6px);transform:translateX(-50%)}
html .systems-hotspots button[data-system=battery] span{left:auto;right:calc(100% + 6px);bottom:auto;top:50%;transform:translateY(-50%)}
html .systems-hotspots button[data-system=smart] span{left:calc(100% + 6px);bottom:auto;top:50%;transform:translateY(-50%)}
.systems-menu{display:flex;flex-wrap:wrap;gap:8px;padding:12px;border-radius:16px;background:#fff;box-shadow:0 1px 0 rgba(20,52,74,.05)}
.systems-menu button{flex:1 1 auto;min-height:44px;padding:10px 16px;border:1px solid #c7e3dd;border-radius:99px;background:#f0fdfa;color:#14344a;font:700 13px/1.2 InterLocal,sans-serif;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.systems-menu button:hover{border-color:#00a98d}
.systems-menu button.is-active{background:#14344a;border-color:#14344a;color:#fff}
.systems-menu button:focus-visible,.systems-hotspots button:focus-visible{outline:3px solid #00a98d;outline-offset:2px}
@media(max-width:920px){.systems-console>.systems-menu{border-radius:0;box-shadow:none;border-top:1px solid #d7ece8}}
@media(max-width:800px){html .systems-hotspots button span{font-size:10px;padding:4px 8px}}
@media(max-width:480px){
  html .systems-hotspots button span{font-size:8.5px;padding:3px 6px;left:3px;top:3px}
  .systems-menu{display:grid;grid-template-columns:1fr 1fr;padding:10px}
  .systems-menu button{font-size:12px;padding:8px 10px}
  .systems-menu button:last-child{grid-column:1/-1}
}

/* Reviews: rating card with the same two badges. */
.reviews-proof{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
@media(max-width:760px){.reviews-proof{width:100%}.reviews-proof .trust-badges{--badge-h:52px}}
/* The round 4 title is three phrases long: a step down in size keeps it to two lines. */
.mvp-systems .systems-heading{max-width:980px}
.mvp-systems .systems-heading h2{font-size:clamp(40px,5vw,76px)}
.mvp-systems .systems-heading p{max-width:640px;margin-inline:auto}
@media(max-width:760px){.mvp-systems .systems-heading h2{font-size:clamp(36px,9.5vw,52px)}}

/* Map zoom (ECTCH-981 follow-up): +, − and reset in the bottom-right corner. */
.map-zoom{position:absolute;right:16px;bottom:16px;z-index:4;display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(224,242,241,.22);border-radius:12px;background:rgba(9,37,39,.86);box-shadow:0 10px 26px rgba(0,0,0,.28);backdrop-filter:blur(8px)}
.map-zoom[hidden]{display:none}
.map-zoom button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:#eafff6;font:500 22px/1 InterLocal,sans-serif;cursor:pointer;transition:background .2s,color .2s}
.map-zoom button+button{border-top:1px solid rgba(224,242,241,.16)}
.map-zoom button:hover:not(:disabled){background:rgba(52,211,153,.18);color:#fff}
.map-zoom button:disabled{color:rgba(234,255,246,.32);cursor:default}
.map-zoom button:focus-visible{outline:2px solid #34d399;outline-offset:-3px}
.map-zoom svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mvp-leaflet.leaflet-grab{cursor:grab}
.mvp-leaflet.leaflet-dragging .leaflet-grab{cursor:grabbing}
@media(max-width:760px){.map-zoom{right:10px;bottom:10px}.map-zoom button{width:40px;height:40px}}

/* Proof tiles, refined: the concentric rings are gone. Light tiles are
   flat white or a soft mint wash with a hairline border; the dark tile
   carries a single teal glow in its corner. The hover lifts a little
   and lights the border, nothing grows behind the content. */
.proof-tile::after{display:none}
.proof-tile{border:1px solid #dcebe8;box-shadow:0 1px 2px rgba(20,52,74,.04),0 10px 30px -18px rgba(20,52,74,.18)}
.proof-tile:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(20,52,74,.05),0 22px 44px -20px rgba(20,52,74,.32)}
.proof-reviews,.proof-bbb{background:#fff}
.proof-years{background:linear-gradient(140deg,#f2faf8 0%,#dcefeb 100%)}
.proof-homes{border-color:#14344a;background:radial-gradient(circle at 100% 0,rgba(0,212,170,.26),transparent 58%),linear-gradient(160deg,#173d55 0%,#10293a 100%)}
.proof-homes:hover{box-shadow:0 22px 44px -18px rgba(16,41,58,.6)}
.proof-eyebrow>span{opacity:.75}
.proof-bbb .trust-badges{margin:auto 0 0;align-items:flex-end}
.proof-bbb .trust-badge{box-shadow:none;border:1px solid #e3efec}
.proof-bbb .trust-badge:hover,.proof-bbb .trust-badge:focus-visible{box-shadow:0 10px 22px -10px rgba(20,52,74,.25)}
/* Both badge frames share one height, so the pair reads as a set. */
.proof-bbb .trust-badge{height:130px;padding:6px 10px}
@media(max-width:480px){.proof-bbb .trust-badge{height:66px;padding:3px}}
/* Every tile reads the same way: eyebrow, figure with its unit beside
   it, then the label. No corner glyphs. The stars sit on the figure's
   baseline in a warmer, readable gold. */
.proof-reviews .proof-stars{font-size:16px;letter-spacing:.04em;color:#f5a623}
@media(max-width:480px){.proof-years .proof-value{flex-wrap:wrap;row-gap:2px}.proof-years .proof-out-of{flex-basis:100%}}

/* Proof section motion. The figures count up on entry (home.js), the
   stars light one by one once the tile is in view, and a faint teal wash
   sits behind the grid so the tiles do not float on flat grey. */
.mvp-proof{overflow:clip}
.proof-tiles{position:relative;isolation:isolate}
.proof-tiles::before{content:'';position:absolute;inset:-70px -90px;z-index:-1;pointer-events:none;background:radial-gradient(55% 60% at 28% 88%,rgba(0,212,170,.16),transparent 72%),radial-gradient(45% 55% at 92% 8%,rgba(27,107,110,.11),transparent 72%);-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent)}
.proof-stars i{font-style:normal;display:inline-block}
body.has-motion .proof-reviews .proof-stars i{opacity:.18;transform:scale(.6)}
body.has-motion .proof-reviews.in-view .proof-stars i{animation:proofStar .45s var(--ease) var(--star-delay,0s) forwards}
.proof-stars i:nth-child(1){--star-delay:.9s}.proof-stars i:nth-child(2){--star-delay:1.02s}.proof-stars i:nth-child(3){--star-delay:1.14s}.proof-stars i:nth-child(4){--star-delay:1.26s}.proof-stars i:nth-child(5){--star-delay:1.38s}
@keyframes proofStar{60%{opacity:1;transform:scale(1.25)}to{opacity:1;transform:scale(1)}}
/* Verified Credentials: no frames, the two seals fill the tile. */
.proof-bbb .trust-badges{flex:1;margin:10px 0 0;display:flex;align-items:center;justify-content:space-evenly;gap:20px;--badge-h:104px}
.proof-bbb .trust-badge,.proof-bbb .trust-badge:hover,.proof-bbb .trust-badge:focus-visible{height:auto;padding:0;border:0;background:none;box-shadow:none}
.proof-bbb .trust-badge:last-child{--badge-h:138px}
.proof-bbb .trust-badge img{filter:drop-shadow(0 8px 14px rgba(20,52,74,.14))}
@media(max-width:480px){.proof-bbb .trust-badges{gap:8px;--badge-h:50px}.proof-bbb .trust-badge:last-child{--badge-h:66px}}
.proof-bbb .trust-badge:last-child img{filter:none}
/* Hover: the tile lifts and its key figure grows a little, the same on
   all four (the number, or the two seals). No light band. */
.proof-tile .proof-value,.proof-bbb .trust-badges{transition:transform .5s var(--ease)}
.proof-tile .proof-value{transform-origin:left bottom}
.proof-tile:hover .proof-value,.proof-tile:focus-visible .proof-value{transform:scale(1.07)}
.proof-bbb:hover .trust-badges{transform:scale(1.06)}
.proof-bbb .trust-badge:hover,.proof-bbb .trust-badge:focus-visible{transform:none}
@media(prefers-reduced-motion:reduce){.proof-tile:hover .proof-value,.proof-bbb:hover .trust-badges{transform:none}}
/* The proof heading stays where the section starts; it no longer follows
   the scroll down the side of the tiles. */
.proof-lead{position:static}

/* ── The home, pointed at ────────────────────────────────────
   Rotating from one service to the next is the point of this drawing,
   so whatever is on show has to be unmistakable. Two things mark it,
   painted by mvp.js from each hotspot's data-anchor:
   - a line runs from its name to the spot, drawn in the way the
     coverage map draws its line, with a pulsing ring where it lands;
   - its label turns teal and steps up.
   The hotspot rectangles no longer draw anything: a box across a
   triangular roof read as a mistake. Every name sits outside the
   house, beside what it names, so the line has something to cross and
   no label covers the drawing. */
.systems-leader{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible;opacity:0;transition:opacity .2s ease}
.systems-leader.is-on{opacity:1}
.systems-leader-path{fill:none;stroke:#00d4aa;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(0,212,170,.7))}
.systems-leader-origin{fill:#fff;stroke:#00a98d;stroke-width:3}
.systems-leader-ring{fill:none;stroke:#00d4aa;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:systems-ring 1.8s ease-out infinite}
@keyframes systems-ring{0%{transform:scale(.5);opacity:.95}100%{transform:scale(2.4);opacity:0}}

html .systems-hotspots{z-index:5}
html .systems-hotspots button,
html .systems-hotspots button:is(:hover,:focus-visible,.is-active){background:transparent;border-color:transparent;box-shadow:none}
html .systems-hotspots button span{transition:background .3s,color .3s,transform .3s,opacity .3s,box-shadow .3s}
html .systems-hotspots button.is-active span{box-shadow:0 6px 20px rgba(0,0,0,.35),0 0 0 4px rgba(0,212,170,.35),0 0 24px rgba(0,212,170,.55)}

@media(min-width:801px){
  html .systems-hotspots button[data-system=solar] span,
  html .systems-hotspots button[data-system=roof] span{transform:translate(-50%,-50%)}
  /* In the sky: Solar to the left of the roof, Roofing to the right. */
  html .systems-hotspots button[data-system=solar] span{left:-80%;top:12%}
  html .systems-hotspots button[data-system=roof] span{left:132%;top:24%}
  html .systems-hotspots button[data-system=solar].is-active span,
  html .systems-hotspots button[data-system=roof].is-active span{transform:translate(-50%,-50%) scale(1.08)}
}
@media(min-width:1200px){
  html .systems-hotspots button span{padding:9px 18px;font-size:15px}
}
@media(min-width:801px){
  /* The three below the roof follow the same rule, outside the walls, at every width that
     draws the line (mvp.js wideScene): EV Charging left of the garage, Smart Panel in the
     sky left of the house, level with the panel box on the outside wall (where the solar
     wiring lands), and Battery Backup under the floor, the line dropping straight from it. */
  html .systems-hotspots button:is([data-system=ev],[data-system=battery],[data-system=smart]) span{right:auto;bottom:auto;transform:translate(-50%,-50%)}
  html .systems-hotspots button[data-system=battery] span{left:34%;top:152%}
  html .systems-hotspots button.is-active span{transform:translate(-50%,-50%) scale(1.08)}
  /* The two on the left wall hang off it by their right edge, so they hug the house at
     every width instead of drifting past the scene's edge on a narrower screen. */
  html .systems-hotspots button:is([data-system=ev],[data-system=smart]) span,
  html .systems-hotspots button:is([data-system=ev],[data-system=smart]).is-active span{left:auto;transform-origin:right center}
  html .systems-hotspots button[data-system=ev] span{right:calc(100% + 10px);top:-27%;transform:translateY(-50%)}
  html .systems-hotspots button[data-system=smart] span{right:calc(100% + 34px);top:50%;transform:translateY(-50%)}
  html .systems-hotspots button:is([data-system=ev],[data-system=smart]).is-active span{transform:translateY(-50%) scale(1.08)}
}
/* On a phone the names stay on the drawing (no line), but the panel box is on the outside
   wall, so its name sits in the sky beside it rather than across the rooms. */
@media(max-width:800px){html .systems-hotspots button[data-system=smart] span{left:auto;right:calc(100% + 6px)}}
@media(prefers-reduced-motion:reduce){.systems-leader-ring{animation:none}}
.proof-est{letter-spacing:.14em;font-weight:800}