/* Energy Planner: liquid glass layer.
   To roll back, delete this file (or remove its <link> line). The site falls back to the previous design. */

:root{
  --g-fill:linear-gradient(160deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.42) 55%,rgba(255,255,255,.55) 100%);
  --g-edge:rgba(255,255,255,.85);
  --g-blur:blur(24px) saturate(185%);
  --g-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.35),0 1px 2px rgba(16,26,22,.06),0 18px 40px -26px rgba(16,26,22,.45);
  --g-radius:20px;
}

/* ambient light the glass can refract */
body{background:#f4f7f6}
body::before{content:"";position:fixed;inset:-20vh -20vw;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38vw 38vw at 85% 12%,rgba(15,184,122,.20),transparent 60%),
    radial-gradient(42vw 42vw at 8% 55%,rgba(8,36,48,.12),transparent 62%),
    radial-gradient(34vw 34vw at 70% 88%,rgba(15,184,122,.14),transparent 60%)}
.hero,#capabilities,#compare,#figures,#who,#insights,#contact,.more,.chartband,.article-wrap{background:transparent!important}
#governance,#faq{background:rgba(241,244,242,.45)!important}

/* glass surfaces */
.door:not(.primary),.gov,.cmpcol,.fig,.form-slot,.quote,.lead-card,.side-card,.more-card,.prose .keybox,.apply,.chart-shell{
  background:var(--g-fill)!important;
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
  border:1px solid var(--g-edge)!important;border-radius:var(--g-radius)!important;
  box-shadow:var(--g-shadow)!important;overflow:hidden}
.gov-grid,.figs{border:0!important;gap:16px!important}
.gov,.fig{border-right:1px solid var(--g-edge)!important;border-bottom:1px solid var(--g-edge)!important}
.gov:hover,.door:not(.primary):hover,.more-card:hover{transform:translateY(-4px)}
.prose .keybox{border-left:3px solid var(--live)!important}
.form-slot .form-card{background:transparent!important}
.form-slot .slot-head{border-bottom-color:rgba(16,26,22,.08)!important}

/* dark glass */
.door.primary,.inline-cta{border-radius:var(--g-radius)!important;
  background:linear-gradient(160deg,rgba(22,34,29,.92),rgba(14,21,18,.86))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 24px 50px -28px rgba(14,21,18,.8)!important;border:1px solid rgba(255,255,255,.08)!important}

/* service rows float on glass when hovered */
.row{border-radius:16px}
.row:hover{background:var(--g-fill)!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);box-shadow:var(--g-shadow)}
.ins{border-radius:16px}
.ins:hover{background:var(--g-fill)!important;box-shadow:var(--g-shadow)}

/* capsule buttons with a specular top edge */
.btn{border-radius:999px!important}
.btn-ink{background:linear-gradient(180deg,#26332d 0%,#0e1512 60%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 24px -14px rgba(14,21,18,.9)}
.btn-line,.btn-outline{background:var(--g-fill)!important;-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);border:1px solid var(--g-edge)!important;box-shadow:var(--g-shadow)}
.btn-paper{box-shadow:inset 0 1px 0 #fff,0 10px 24px -14px rgba(0,0,0,.6)}
.row .go{border-radius:999px}
.fld input,.fld select,.fld textarea,.afld input,.afld select,.afld textarea,.side-card input{border-radius:12px!important;background:rgba(255,255,255,.7)!important}
.dl2 a{border-radius:999px!important}

/* header: deeper glass with a sheen */
header{background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(250,251,250,.58))!important}
header.scrolled{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 20px 44px -24px rgba(16,26,22,.5)!important}

/* accessibility: solid surfaces for anyone who reduces transparency */
@media (prefers-reduced-transparency: reduce){
  .door:not(.primary),.gov,.cmpcol,.fig,.form-slot,.quote,.lead-card,.side-card,.more-card,.prose .keybox,.apply,.chart-shell,header,.btn-line,.btn-outline{
    background:#fff!important;-webkit-backdrop-filter:none;backdrop-filter:none}
  body::before{display:none}
}

/* header: true liquid glass, adapts to light and dark content beneath */
header{
  background:linear-gradient(180deg,rgba(255,255,255,.60) 0%,rgba(255,255,255,.34) 100%)!important;
  -webkit-backdrop-filter:blur(30px) saturate(210%) brightness(1.06)!important;
  backdrop-filter:blur(30px) saturate(210%) brightness(1.06)!important;
  border:1px solid rgba(255,255,255,.55)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.25),inset 0 0 0 1px rgba(255,255,255,.12),0 22px 48px -26px rgba(16,26,22,.5)!important;
  transition:background .35s ease,box-shadow .35s ease,top .35s ease,left .35s ease,right .35s ease,border-radius .35s ease!important}
header::before{content:"";position:absolute;left:0;right:0;top:0;height:55%;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));opacity:.7;z-index:0}
header .bar,header .bicsbar{position:relative;z-index:1}
header .bicsbar{background:rgba(14,21,18,.62)!important;-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%)}
header nav.main a:not(.btn){text-shadow:0 1px 0 rgba(255,255,255,.4)}

header.on-dark{
  background:linear-gradient(180deg,rgba(40,54,48,.55) 0%,rgba(14,21,18,.35) 100%)!important;
  border-color:rgba(255,255,255,.14)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.06),0 22px 48px -26px rgba(0,0,0,.7)!important}
header.on-dark::before{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0))}
header.on-dark .brand-logo{background-image:var(--logo)!important}
header.on-dark nav.main a:not(.btn){color:#e9efec!important;text-shadow:none}
header.on-dark nav.main a.active{color:var(--live)!important}
header.on-dark nav.main a.active::after{background:var(--live)!important}
header.on-dark .btn-ink{background:linear-gradient(180deg,#ffffff,#e4ebe7)!important;color:#0e1512!important;box-shadow:inset 0 1px 0 #fff,0 10px 24px -14px rgba(0,0,0,.8)!important}
header.on-dark .menu-btn span{background:#e9efec!important}
@media(max-width:900px){header.on-dark nav.main a:not(.btn){color:var(--ink)!important}}
@media (prefers-reduced-transparency: reduce){header,header.on-dark{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}header{background:#fff!important}header.on-dark{background:#0e1512!important}}

/* homepage: at the very top the bar melts into the page; glass appears once you scroll */
header#hdr:not(.scrolled){background:transparent!important;border-color:transparent!important;
  box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
header#hdr:not(.scrolled)::before{opacity:0}
header#hdr:not(.scrolled) .bicsbar{background:rgba(14,21,18,.94)!important}
header#hdr .bicsbar{transition:background .35s ease}

/* polish pass: consistent rounding and spacing across all controls */
.brief-form{gap:10px!important}
.brief-form input{border-radius:999px!important;padding:16px 22px!important;background:rgba(255,255,255,.92)!important}
.brief-form .btn{flex:none}
.row .go,.faq-list summary .pm{border-radius:50%!important}
.faq-list details{border-bottom-color:rgba(16,26,22,.1)!important}
.share a{border-radius:999px!important;background:var(--g-fill);border:1px solid var(--g-edge)!important}
.side-card .btn,.apply .btn{border-radius:999px!important}
.cat-pill{border-radius:999px;padding:6px 14px!important}
.chart-tabs button:first-child{border-top-left-radius:0}
.chart-shell{overflow:hidden}
.chips .chip{border-radius:999px!important}
.form-slot .slot-head{border-top-left-radius:var(--g-radius);border-top-right-radius:var(--g-radius)}
.hero-cta .btn,.cmp-cta .btn,.stickybar .btn{white-space:nowrap}
.foot-social{border-radius:50%!important}
.totop{border-radius:50%!important}
.step{border-radius:16px;background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.08)!important;padding:26px 24px!important;margin-right:14px}
.steps{gap:0!important}
.stickybar{gap:8px!important}
.step::before{display:none!important}
.step{margin-top:0!important}
@media(max-width:900px){.step{margin-right:0!important;margin-bottom:14px!important}}
.steps{border:0!important;position:static}
.steps::before,.steps::after,.step::after{display:none!important}
.step{border-left:1px solid rgba(255,255,255,.08)!important}
.quote::before,.quote::after{display:none!important}

header.no-anim,header.no-anim *{transition:none!important}
/* inner pages: same floating liquid glass bar as the homepage */
header:not(#hdr){position:fixed;top:0;left:0;right:0;z-index:60;transition:top .35s ease,left .35s ease,right .35s ease,border-radius .35s ease,background .35s ease}
header:not(#hdr).scrolled{top:10px;left:max(14px,calc(50% - 660px));right:max(14px,calc(50% - 660px));border-radius:18px;overflow:visible}
@media(max-width:900px){header:not(#hdr).scrolled{top:8px;left:8px;right:8px;border-radius:14px}}

/* dropdowns must escape the floating bar */
header,header.scrolled{overflow:visible!important}
nav.main .dd .menu{z-index:70}
header.on-dark nav.main .dd .menu a{color:var(--ink)!important;text-shadow:none}
header.on-dark nav.main .dd .menu a:hover{color:var(--live-d)!important}
nav.main .dd .menu{background:rgba(255,255,255,.96)!important}

/* ===== 3 Oct 2026 fixes ===== */

/* desktop: the BICS strip follows the rounded corners of the floating bar */
header.scrolled .bicsbar{border-radius:17px 17px 0 0}

/* phones: floating rounded bar like desktop. The bar clips its contents to the
   rounded corners so the BICS strip and glass edges never poke out (this was the
   white strip top right) */
@media(max-width:900px){
  header.scrolled,header#hdr.scrolled,header:not(#hdr).scrolled{top:8px!important;left:8px!important;right:8px!important;border-radius:16px!important;overflow:hidden!important;border:1px solid rgba(255,255,255,.7)!important}
  header.scrolled .bicsbar{border-radius:0}
  header.scrolled::before{border-radius:16px}
}

/* phones, every page: menu button and a slide out panel that lives outside the
   glass bar (a panel inside the bar gets trapped by the blur and breaks) */
.ep-mbtn{display:none}
.ep-mnav,.ep-mshade{display:none}
@media(max-width:900px){
  header nav.main,header #menuBtn,header .menu-btn{display:none!important}
  header .bar{display:flex;align-items:center;justify-content:space-between}
  header:not(#hdr) .bar{padding-left:20px!important;padding-right:10px!important}
  .ep-mbtn{display:block;background:none;border:0;cursor:pointer;padding:10px;margin-right:4px;-webkit-tap-highlight-color:transparent}
  .ep-mbtn span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:transform .25s,opacity .25s}
  header.on-dark .ep-mbtn span{background:#e9efec}
  .ep-mbtn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .ep-mbtn.open span:nth-child(2){opacity:0}
  .ep-mbtn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .ep-mshade{display:block;position:fixed;inset:0;background:rgba(14,21,18,.35);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:80}
  .ep-mshade.open{opacity:1;visibility:visible}
  .ep-mnav{display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;width:min(340px,86vw);background:var(--paper,#fafbfa);
    box-shadow:-20px 0 50px rgba(14,21,18,.25);transform:translateX(100%);transition:transform .3s ease;z-index:81;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px 26px 32px}
  .ep-mnav.open{transform:none}
  .ep-mnav .ep-mclose{align-self:flex-end;background:none;border:0;font-size:30px;line-height:1;padding:6px 4px;color:var(--ink);cursor:pointer}
  .ep-mnav .ep-mgroup{margin-top:14px}
  .ep-mnav .ep-mhead{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--live-d,#0a8f5e);margin:6px 0 4px;text-decoration:none}
  .ep-mnav .ep-mgroup a:not(.ep-mhead){display:block;padding:8px 0;font-size:16px;color:var(--ink);text-decoration:none}
  .ep-mnav .ep-mtop{display:block;padding:12px 0;font-size:19px;font-weight:500;color:var(--ink);text-decoration:none;border-top:1px solid rgba(16,26,22,.08)}
  .ep-mnav .ep-mgroup+.ep-mtop{margin-top:14px}
  .ep-mnav .btn{margin-top:22px;text-align:center;justify-content:center}
  body.ep-mlock{overflow:hidden}
}