.navigation-backdrop{position:fixed;inset:0;z-index:29;background:#102b3166;backdrop-filter:blur(5px);opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease}
@media(max-width:850px){
  header{gap:16px;flex-wrap:wrap;padding:14px 22px}
  #navigation{display:flex;width:100%;flex-wrap:wrap;gap:8px 22px}
  .menu{display:none}
  .nav-ready .menu{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:46px;min-width:102px;padding:10px 15px;border:1px solid #c9d8d0;border-radius:30px;background:#fff9;color:var(--ink);font-size:13px;font-weight:600;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
  .menu span{display:inline-block;font-size:24px;line-height:20px;font-weight:400;transition:transform .3s ease}
  .menu[aria-expanded=true]{background:var(--teal);border-color:var(--teal);color:white}
  .menu[aria-expanded=true] span{transform:rotate(45deg)}
  .nav-ready #navigation{position:absolute;left:14px;right:14px;top:calc(100% + 10px);width:auto;display:flex;flex-direction:column;flex-wrap:nowrap;gap:0;max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px);overflow:auto;overscroll-behavior:contain;padding:22px;border:1px solid #d7e3d8;border-radius:22px;background:#f7f8f5;box-shadow:0 24px 65px #102b3133;opacity:0;visibility:hidden;transform:translateY(-12px) scale(.98);transform-origin:top right;transition:opacity .28s ease,transform .32s cubic-bezier(.2,.8,.2,1),visibility .28s;counter-reset:nav-item}
  .nav-ready #navigation::before{content:'EXPLORE';font-size:10px;font-weight:700;letter-spacing:2px;color:#617970;margin:0 0 12px 5px}
  .nav-ready #navigation.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
  .nav-ready #navigation a{display:flex;align-items:center;gap:16px;min-height:53px;flex-shrink:0;padding:9px 12px;border:0;border-bottom:1px solid #dce5dd;border-radius:0;background:transparent;color:var(--ink);font-size:21px;font-weight:500;line-height:1.4;opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .3s ease,background .2s}
  .nav-ready #navigation a::before{counter-increment:nav-item;content:'0' counter(nav-item);font-size:10px;font-weight:500;color:#6a8178;letter-spacing:.05em}
  .nav-ready #navigation a::after{content:'↗';margin-left:auto;color:var(--teal);font-size:20px;transition:transform .2s}
  .nav-ready #navigation.open a{opacity:1;transform:none;transition-delay:calc(var(--nav-order,0)*25ms)}
  #navigation a:nth-child(2){--nav-order:1}#navigation a:nth-child(3){--nav-order:2}#navigation a:nth-child(4){--nav-order:3}#navigation a:nth-child(5){--nav-order:4}#navigation a:nth-child(6){--nav-order:5}
  .nav-ready #navigation a[aria-current=page]{background:#e3eedc;border-color:transparent;border-radius:10px;color:#174c42}
  .nav-ready #navigation a:hover{background:#e8eee8;border-radius:10px}
  .nav-ready #navigation a:hover::after{transform:translate(2px,-2px)}
  .nav-ready #navigation a:last-child{margin-top:12px;background:var(--teal);color:white;border:0;border-radius:12px;font-size:18px}
  .nav-ready #navigation a:last-child::before,.nav-ready #navigation a:last-child::after{color:#d3ee94}
  .navigation-open{overflow:hidden}
  .navigation-open .navigation-backdrop{opacity:1;visibility:visible}
}
@media(prefers-reduced-motion:reduce){.navigation-backdrop,.nav-ready #navigation,.nav-ready #navigation a,.menu span{transition:none!important;transform:none!important}.menu[aria-expanded=true] span{transform:rotate(45deg)!important}}
