/* 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}