/* Kinetic navigation adapted from the supplied Sterling Gate motion sequence. */
.menu-toggle,.menu-close{width:auto;min-width:100px;display:none;align-items:center;justify-content:flex-end;gap:14px;padding:12px 0}
.menu-toggle b,.menu-close b{font-size:14px;font-weight:500;letter-spacing:.01em}
.menu-toggle i,.menu-close i{display:block;position:relative;width:22px;height:22px;flex-shrink:0}
.menu-toggle i::before,.menu-toggle i::after,.menu-close i::before,.menu-close i::after{content:'';position:absolute;background:currentColor;width:20px;height:2px;left:1px;top:10px}
.menu-toggle i::after,.menu-close i::after{transform:rotate(90deg)}
.menu-close{display:flex}.menu-close i{transform:rotate(45deg)}
.mobile-menu{background:transparent;isolation:isolate;overscroll-behavior:contain;overflow-x:hidden}
.mobile-menu::backdrop{background:#0009}
.mobile-menu[open]{animation:none}
.mobile-menu::before,.mobile-menu::after{content:'';position:fixed;inset:0;pointer-events:none;transform:translateX(101%)}
.mobile-menu::before{background:var(--accent);z-index:-2}
.mobile-menu::after{background:#101010;z-index:-1}
.mobile-menu[open]::before{animation:kinetic-panel .575s cubic-bezier(.65,.01,.05,.99) both}
.mobile-menu[open]::after{animation:kinetic-panel .575s .12s cubic-bezier(.65,.01,.05,.99) both}
.mobile-menu-top{padding-top:max(22px,env(safe-area-inset-top));flex-shrink:0}
.mobile-menu nav{padding:18px 8% 28px}
.mobile-menu nav a{overflow:hidden;min-height:54px;padding:14px 0;font-size:clamp(34px,8.5vw,58px)}
.mobile-menu[open] nav a:nth-child(n){animation:none}
.mobile-menu[open] nav a .kinetic-label{display:block;transform-origin:0 100%;animation:kinetic-link .7s cubic-bezier(.65,.01,.05,.99) both;animation-delay:calc(.35s + var(--menu-index,0)*.05s)}
.mobile-menu[open] .mobile-menu-top,.mobile-menu[open] .mobile-menu-footer{animation:kinetic-fade .4s .3s both}
.mobile-menu-footer{padding-bottom:max(24px,env(safe-area-inset-bottom));flex-shrink:0}
.mobile-menu.is-closing[open]{animation:kinetic-close .4s cubic-bezier(.65,.01,.05,.99) both;pointer-events:none}
@keyframes kinetic-panel{from{transform:translateX(101%)}to{transform:translateX(0)}}
@keyframes kinetic-link{from{transform:translateY(140%) rotate(10deg)}to{transform:translateY(0) rotate(0)}}
@keyframes kinetic-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes kinetic-close{to{transform:translateX(105%);opacity:0}}
@media(max-width:700px){.menu-toggle{display:flex}}
@media(max-height:600px){.mobile-menu nav{padding-top:8px;padding-bottom:16px}.mobile-menu nav a{font-size:30px;padding:10px 0}.mobile-menu-top{min-height:72px;padding-bottom:12px}}
@media(prefers-reduced-motion:reduce){.mobile-menu[open]::before,.mobile-menu[open]::after{transform:none}.mobile-menu[open],.mobile-menu[open]::before,.mobile-menu[open]::after,.mobile-menu[open] nav a .kinetic-label,.mobile-menu[open] .mobile-menu-top,.mobile-menu[open] .mobile-menu-footer{animation:none!important}}
