@media (max-width:800px){
  .menu-button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  body.mobile-nav-open{overflow:hidden}
  body.mobile-nav-open .site-header.custom-logo.on-light{
    background:transparent;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  body.mobile-nav-open .site-header .logo,
  body.mobile-nav-open .site-header .menu-button{position:relative;z-index:2}
  .site-header .nav{
    position:fixed;
    top:0;
    right:0;
    bottom:auto;
    left:0;
    width:100vw;
    height:100vh;
    height:100dvh;
    min-height:100svh;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    overflow:hidden;
    gap:clamp(14px,2.8vh,28px);
    padding:90px 24px 42px;
    font-size:clamp(27px,8vw,40px);
    transition:transform .5s,opacity .25s,visibility 0s linear .5s;
  }
  .site-header .nav.open{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    overflow-y:auto;
    transform:none;
    color:#fff;
    transition:transform .5s,opacity .25s,visibility 0s;
  }
  body.mobile-nav-open .site-header.on-light .nav.open{color:#fff}
  body.mobile-nav-open .site-header.custom-logo.on-light .logo>img{
    filter:brightness(0) invert(1) drop-shadow(0 2px 5px rgba(0,0,0,.32));
    opacity:1;
  }
  body.mobile-nav-open .site-header.on-light .menu-button i{background:#fff}
}