/* The original uploaded logo is framed, never recoloured or redrawn. */
.site-logo-frame{position:relative;display:block;flex:none;width:104px;height:80px;overflow:hidden;border-radius:10px;background:#fff8e8;border:1px solid #e8d9ba;}
.site-logo-frame img{position:absolute;left:50%;top:50%;width:110%;height:auto;max-width:none;transform:translate(-50%,-50%);}
.nav .brand{gap:12px;}
.nav .brand strong{font-size:18px;}
footer .site-logo-frame{width:144px;height:110px;}
.solar-footer-brand{display:flex;gap:16px;align-items:center;}
@media(max-width:600px){header .nav-phone{display:none;}.nav .site-logo-frame{width:76px;height:58px;}.nav .brand{gap:9px;}.nav .brand strong{font-size:15px;}.solar-footer-brand{align-items:flex-start;flex-direction:column;}}
@media(max-width:360px){.nav .site-logo-frame{width:68px;height:52px;}.nav .brand strong{font-size:14px;}}

/* Shared floating oval header used consistently across every page. */
header,
header.is-scrolled{
  background:transparent!important;
  border-bottom:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
header .nav,
.home-page header .nav{
  width:calc(100% - 48px);
  max-width:1440px;
  margin:24px auto 0;
  padding:10px 22px 10px 18px;
  border:1px solid rgba(255,255,255,.78);
  border-radius:999px;
  background:rgba(255,255,255,.97);
  color:#10182a;
  box-shadow:0 20px 48px rgba(0,0,0,.22);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:margin .28s ease,padding .28s ease,box-shadow .28s ease,background .28s ease;
}
header.is-scrolled .nav,
.home-page header.is-scrolled .nav{
  margin-top:6px;
  padding-top:6px;
  padding-bottom:6px;
  background:rgba(255,255,255,.985);
  box-shadow:0 10px 28px rgba(0,0,0,.2);
}
header .brand-text strong{color:#10182a!important}
header .brand-text span{color:#44506a!important}
header .navlinks a,
header .navlinks a.current{color:#10182a;font-weight:600}
header .navlinks a::after{background:#ffc72c}
header .nav .site-logo-frame,
.home-page header .nav .site-logo-frame{
  width:96px;
  height:64px;
  border:0;
  border-radius:0;
  background:transparent;
  transition:width .28s ease,height .28s ease;
}
header.is-scrolled .nav .site-logo-frame{width:78px;height:52px}
header .nav-cta .btn-primary{
  padding:14px 25px;
  border-color:#ffc72c;
  background:#ffc72c;
  color:#101218;
  box-shadow:none;
}
header .nav-cta .btn-primary:hover{background:#e8ad05;border-color:#e8ad05;color:#101218}

/* Keep the ON GRID SOLAR header aligned with that page's narrower content grid. */
.solar-page header .nav{
  max-width:1180px;
  height:auto;
  min-height:84px;
}
.solar-page header.is-scrolled .nav{min-height:66px}

@media(max-width:1100px){
  header .nav,
  header.is-scrolled .nav,
  .home-page header .nav,
  .home-page header.is-scrolled .nav{
    width:calc(100% - 24px);
    margin:12px auto 0;
    padding:9px 13px;
    border-radius:22px;
  }
  header .navlinks,
  header .navlinks.open{
    top:100%;
    left:12px;
    right:12px;
    width:auto;
    margin-top:8px;
    border:1px solid #485160;
    border-top:3px solid #ffc72c;
    border-radius:16px;
    background:#20242d;
    box-shadow:0 20px 45px rgba(0,0,0,.58);
  }
  header #navlinks a{color:#fff}
  header #navlinks a.current,
  header #navlinks a[aria-current="page"]{color:#14151a}
  .solar-page header .nav,
  .solar-page header.is-scrolled .nav{min-height:0}
  header.is-scrolled .nav .site-logo-frame{width:72px;height:52px}
}
@media(max-width:480px){
  header .nav,
  header.is-scrolled .nav,
  .home-page header .nav,
  .home-page header.is-scrolled .nav{padding:8px 11px}
  header .nav .site-logo-frame,
  .home-page header .nav .site-logo-frame{width:72px;height:52px}
}