html{scroll-behavior:smooth}
.ui-toggle{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;pointer-events:none}
label[for]{cursor:pointer}
.glass-panel{backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%)}

.icon-x{display:none}
.mnav-panel{display:none}
#mnav-open:checked~header .icon-menu{display:none}
#mnav-open:checked~header .icon-x{display:block}
#mnav-open:checked~header .mnav-panel{display:block}
#mnav-open:checked~header{
  background:#ffffffb8;
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  --hdr-ink:hsl(var(--brand-navy));
}
#mnav-open:checked~header .hdr-toggle{background:hsl(var(--brand-grey))}

.mega-panel{
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease,visibility .2s ease;
}
.mega-panel:before{content:"";position:absolute;left:0;right:0;bottom:100%;height:14px}
@media (min-width:1024px){
  .mnav-panel{display:none!important}
  .hdr-inner:has(.mega-services:hover) .panel-services,
  .hdr-inner:has(.panel-services:hover) .panel-services{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
  }
  .hdr-inner:has(.mega-services:hover) .mega-services .nav-chev,
  .hdr-inner:has(.panel-services:hover) .mega-services .nav-chev{
    transform:rotate(180deg);
  }
}

@property --hdr-ink{
  syntax:"<color>";
  inherits:true;
  initial-value:#fff;
}
.hdr-bar{
  --hdr-ink:#fff;
}
.logo-name,.hdr-phone,.hdr-toggle,.nav-link{color:var(--hdr-ink);transition:color .5s}
.nav-link:hover,.hdr-phone:hover{color:hsl(var(--brand-cyan))}
.nav-link.is-active{color:hsl(var(--brand-cyan))}
.hdr-cta{
  background:hsl(var(--brand-cyan));
  color:#fff;
}
.hdr-cta:hover{
  background:#fff;
  color:hsl(var(--brand-navy));
}
.hdr-toggle:hover{background:#ffffff1a}

@supports (animation-timeline:scroll()){
  .hdr-bar{
    animation:vo-header linear both;
    animation-timeline:scroll();
    animation-range:0 24px;
  }
  .hdr-cta{
    animation:vo-cta linear both;
    animation-timeline:scroll();
    animation-range:0 24px;
  }
}
@keyframes vo-header{
  to{
    background:#ffffffb8;
    -webkit-backdrop-filter:blur(18px) saturate(160%);
    backdrop-filter:blur(18px) saturate(160%);
    box-shadow:0 8px 30px rgba(0,46,91,.08);
    border-bottom:1px solid rgb(0 46 91 / .1);
    --hdr-ink:hsl(var(--brand-navy));
  }
}
@keyframes vo-cta{
  to{
    background:hsl(var(--brand-navy));
    color:#fff;
  }
}

.mnav-sub{display:none}
#mnav-services:checked~.mnav-sub{display:flex}
#mnav-services:checked+label .nav-chev{transform:rotate(180deg)}
body:has(#mnav-open:checked){overflow:hidden}
@media (min-width:1024px){
  body:has(#mnav-open:checked){overflow:auto}
}

.hero-slide{display:none}
.hero-wrap:has(#h0:checked) .slide-0,
.hero-wrap:has(#h1:checked) .slide-1,
.hero-wrap:has(#h2:checked) .slide-2,
.hero-wrap:has(#h3:checked) .slide-3,
.hero-wrap:has(#h4:checked) .slide-4{display:block}
.hero-dot{
  height:.375rem;
  width:1rem;
  border-radius:9999px;
  background:rgb(255 255 255 / .4);
  transition:all .2s;
  border:0;
  padding:0;
}
.hero-dot:hover{background:rgb(255 255 255 / .7)}
.hero-wrap:has(#h0:checked) label[for=h0],
.hero-wrap:has(#h1:checked) label[for=h1],
.hero-wrap:has(#h2:checked) label[for=h2],
.hero-wrap:has(#h3:checked) label[for=h3],
.hero-wrap:has(#h4:checked) label[for=h4]{
  width:2.5rem;
  background:hsl(var(--brand-cyan));
}

.quote-form{display:block}
.quote-thanks{display:none}
#quote-sent:checked~.quote-form{display:none}
#quote-sent:checked~.quote-thanks{display:block}