/* site-nav.css: the mobile menu (hamburger + slide-down panel), shared by every page.
   The desktop nav (nav.links) hides below 880px; this takes over there. Markup lives in each
   page's <header class="nav">, behaviour in assets/site-nav.js. Uses the page's Lucent tokens. */

.page-wrapper .nav-actions{display:flex;align-items:center;gap:10px;flex:none}

/* Hamburger button: hidden on desktop */
.page-wrapper .nav-toggle{display:none;position:relative;width:44px;height:44px;flex:none;border:1px solid var(--line,rgba(126,180,165,.2));border-radius:6px;background:transparent;color:var(--platinum,#EFF1F3);cursor:pointer;transition:border-color .2s,background .2s}
.page-wrapper .nav-toggle:hover{border-color:var(--sage,#7EB4A5)}
.page-wrapper .nav-toggle .bar{position:absolute;left:12px;right:12px;height:1.5px;border-radius:2px;background:currentColor;transition:transform .22s ease,opacity .18s ease,top .22s ease}
.page-wrapper .nav-toggle .bar:nth-child(1){top:15px}
.page-wrapper .nav-toggle .bar:nth-child(2){top:21px}
.page-wrapper .nav-toggle .bar:nth-child(3){top:27px}
.page-wrapper .nav-toggle[aria-expanded="true"]{background:rgba(126,180,165,.08);border-color:var(--sage,#7EB4A5)}
.page-wrapper .nav-toggle[aria-expanded="true"] .bar:nth-child(1){top:21px;transform:rotate(45deg)}
.page-wrapper .nav-toggle[aria-expanded="true"] .bar:nth-child(2){opacity:0}
.page-wrapper .nav-toggle[aria-expanded="true"] .bar:nth-child(3){top:21px;transform:rotate(-45deg)}

/* Panel */
.page-wrapper .mnav{display:none}
@media(max-width:880px){
  .page-wrapper .nav-toggle{display:block}
  .page-wrapper .mnav{display:block;position:absolute;left:0;right:0;top:100%;background:var(--abyss,#04101F);border-bottom:1px solid var(--line,rgba(126,180,165,.2));box-shadow:0 24px 48px rgba(0,0,0,.45);max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s}
  .page-wrapper .mnav.is-open{opacity:1;visibility:visible;transform:translateY(0)}
}
/* Shorter header text on narrow phones so brand + button + toggle fit */
@media(max-width:640px){.page-wrapper .brandlock .wm{display:none}.page-wrapper .nav .btn{padding:12px 16px}}

.page-wrapper .mnav-inner{max-width:var(--maxw,1140px);margin:0 auto;padding:10px 28px 26px}
@media(max-width:600px){.page-wrapper .mnav-inner{padding:8px 16px 22px}}
.page-wrapper .mnav-link{display:flex;align-items:center;justify-content:space-between;padding:15px 4px;border-bottom:1px solid var(--line-soft,rgba(174,185,196,.14));font-family:var(--sans,"Jost",sans-serif);font-size:.86rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--mist,#C7D1DB);transition:color .15s}
.page-wrapper .mnav-link::after{content:"";width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);opacity:.5}
.page-wrapper .mnav-link:hover,.page-wrapper .mnav-link[aria-current="page"]{color:var(--sage,#7EB4A5)}

.page-wrapper .mnav-group{padding:14px 0 10px;border-bottom:1px solid var(--line-soft,rgba(174,185,196,.14))}
.page-wrapper .mnav-head{display:block;padding:0 4px 8px;font-family:var(--sans,"Jost",sans-serif);font-size:.62rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--slate,#8493A6)}
.page-wrapper .mnav-sol{display:flex;align-items:flex-start;gap:14px;padding:12px 8px;border-radius:8px;transition:background .15s}
.page-wrapper a.mnav-sol:hover,.page-wrapper a.mnav-sol[aria-current="page"]{background:rgba(126,180,165,.08)}
.page-wrapper .mnav-sol .drop-ico{flex:none;width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.page-wrapper .mnav-sol .drop-ico--cofi{background:#F4ECE1;box-shadow:inset 0 0 0 1px rgba(42,27,20,.08)}
.page-wrapper .mnav-sol .drop-ico--cofi img{width:30px;height:30px;display:block}
.page-wrapper .mnav-sol .drop-ico--soon{border:1px solid var(--line,rgba(126,180,165,.2));color:var(--slate,#8493A6)}
.page-wrapper .mnav-sol .drop-txt{display:flex;flex-direction:column;gap:4px;min-width:0;padding-top:1px}
.page-wrapper .mnav-sol .label{font-family:var(--sans,"Jost",sans-serif);font-size:.95rem;font-weight:600;line-height:1.3;color:var(--platinum,#EFF1F3)}
.page-wrapper .mnav-sol .desc{font-family:var(--sans,"Jost",sans-serif);font-size:.8rem;font-weight:300;line-height:1.45;color:var(--mist,#C7D1DB)}
.page-wrapper .mnav-sol.soon .label{color:#C3CBD4}
.page-wrapper .mnav-sol .tag{align-self:flex-start;margin-top:4px;font-size:.56rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--sage,#7EB4A5);border:1px solid var(--line,rgba(126,180,165,.2));border-radius:999px;padding:1px 8px}
.page-wrapper .mnav-cta{display:flex;justify-content:center;width:100%;margin-top:22px}

/* Keep the page from scrolling behind an open menu */
html.mnav-lock,html.mnav-lock body{overflow:hidden}

/* Nav bar text: match the site's brighter body copy (2026-09-24). This file loads last on every
   page, so it overrides each page's own nav.links rules. Hover and current page stay sage. */
.page-wrapper nav.links a:not(.drop-item),.page-wrapper nav.links .drop-trigger{color:#EFF1F3;font-weight:400}
.page-wrapper nav.links a:not(.drop-item):hover,.page-wrapper nav.links a:not(.drop-item)[aria-current]{color:var(--sage,#7EB4A5)}
.page-wrapper .mnav-link{color:#EFF1F3}
.page-wrapper .mnav-link:hover,.page-wrapper .mnav-link[aria-current="page"]{color:var(--sage,#7EB4A5)}