.glass-card,.glass-card-dark{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.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-open:checked~header .icon-menu{display:none}
#mnav-open:checked~header .icon-x{display:block}
#mnav-open:checked~header .mnav-panel{display:block}
.mnav-panel{display:none}
@media (min-width:1024px){
  .mnav-panel{display:none!important}
}

.mnav-svc{display:none}
#mnav-svc:checked~.mnav-svc{display:block}
#mnav-svc:checked+label .nav-chev{transform:rotate(180deg)}

.enquiry-thanks{display:none}
#enquiry-sent:checked~.enquiry-form{display:none}
#enquiry-sent:checked~.enquiry-thanks{display:flex}

@supports (animation-timeline:scroll()){
  .scroll-progress-bar{
    transform:scaleX(0);
    transform-origin:left;
    animation:nma-progress linear;
    animation-timeline:scroll();
  }
  .topbar-hide{
    animation:nma-topbar linear both;
    animation-timeline:scroll();
    animation-range:0 24px;
  }
  .nav-glass{
    animation:nma-nav linear both;
    animation-timeline:scroll();
    animation-range:0 24px;
  }
}
@keyframes nma-progress{to{transform:scaleX(1)}}
@keyframes nma-topbar{
  to{max-height:0;opacity:0;overflow:hidden}
}
@keyframes nma-nav{
  to{
    background:#ffffffb3;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid #84a17d26;
    box-shadow:0 10px 15px -3px rgb(23 36 38 / .05);
  }
}