html{scroll-behavior:smooth}
header,.hdr-main{overflow:visible}
.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}

.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}

.nav-drop,.mega-panel{
  visibility:hidden;
  opacity:0;
  pointer-events:none;
}
.nav-drop{
  position:absolute;
  left:0;
  top:100%;
  width:18rem;
  background:#fff;
  border-top:2px solid #8cc63f;
  box-shadow:0 24px 60px -20px rgba(0,51,102,.28);
}
.nav-underline{
  position:absolute;
  bottom:-4px;
  left:0;
  height:2px;
  width:0;
  background:#8cc63f;
  transition:width .3s;
}
.mega-panel{
  position:absolute;
  left:0;
  right:0;
  top:100%;
  background:#fff;
  color:#333;
  border-top:2px solid #8cc63f;
  box-shadow:0 24px 60px -20px rgba(0,51,102,.28);
  z-index:40;
}
.mega-panel:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:100%;
  height:8px;
}

@media (min-width:1024px){
  .mnav-panel{display:none!important}
  .nav-item:hover .nav-drop,
  .nav-item:hover .nav-drop:hover{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
  }
  .nav-item:hover .nav-underline{width:100%}
  .nav-item:hover>.nav-link{color:#003366}
  .hdr-main:has(.nav-mega:hover) .mega-panel,
  .hdr-main:has(.mega-panel:hover) .mega-panel{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
  }
  .hdr-main:has(.nav-mega:hover) .nav-mega .nav-underline,
  .hdr-main:has(.mega-panel:hover) .nav-mega .nav-underline{width:100%}
  .hdr-main:has(.nav-mega:hover) .nav-mega>.nav-link,
  .hdr-main:has(.mega-panel:hover) .nav-mega>.nav-link{color:#003366}
}

@supports (animation-timeline:scroll()){
  .hdr-main{
    animation:aa-hdr linear both;
    animation-timeline:scroll();
    animation-range:0 20px;
  }
}
@keyframes aa-hdr{
  to{
    background:#fffffff2;
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    box-shadow:0 8px 30px -12px rgba(0,51,102,.18);
  }
}

.aa-type{
  display:inline;
}
.aa-type>span{
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
  max-width:0;
  vertical-align:bottom;
}
.aa-type>span:nth-child(1){animation:aa-type1 13.2s steps(22,end) infinite}
.aa-type>span:nth-child(2){animation:aa-type2 13.2s steps(22,end) infinite}
.aa-type>span:nth-child(3){animation:aa-type3 13.2s steps(22,end) infinite}
@keyframes aa-type1{
  0%,32.5%,100%{max-width:0}
  14%,24%{max-width:22ch}
}
@keyframes aa-type2{
  0%,32.5%,65%,100%{max-width:0}
  33%{max-width:0}
  47%,57%{max-width:22ch}
}
@keyframes aa-type3{
  0%,65.5%,100%{max-width:0}
  66%{max-width:0}
  78%,90%{max-width:18ch}
}
.aa-caret{
  display:inline-block;
  width:3px;
  height:.9em;
  margin-left:.125rem;
  background:#8cc63f;
  vertical-align:middle;
  animation:2s cubic-bezier(.4,0,.6,1) infinite pulse;
}