/* WebPies — navigation (header + dropdowns + mega-menu + mobile menu).
   Compiled from scss/components-nav.scss. Previously injected by nav.js; now static. */

/* ===== STICKY HEADER ANIMATIONS =====
   Mode via <header id="nav" data-sticky-anim="…"> (or data-sticky-anim-mobile,
   or window.NX_HEADER={sticky,stickyMobile}). Modes:
     normal            backdrop-blur bar fades in on scroll (.scrolled)
     sticky-anim-one   hide on scroll-down, reveal on scroll-up as a floating pill
     sticky-anim-two   shrink: compact bar + logo, blurred, always visible
     sticky-anim-three smart full-width bar: hides on scroll-down, slides back up
     sticky-anim-four  morph into a floating pill on scroll (always visible)
     sticky-anim-five  invert: bar turns dark (ink) with light content on scroll */
#nav{transition:transform .55s cubic-bezier(.16,1,.3,1), background .35s ease, box-shadow .4s ease;}
#nav > div{transition:max-width .55s cubic-bezier(.16,1,.3,1), margin .5s cubic-bezier(.16,1,.3,1), padding .4s ease, background .4s ease, color .35s ease, box-shadow .45s ease, border-radius .5s ease, height .4s ease;}
#nav a[href="index.html"]{transition:transform .4s cubic-bezier(.16,1,.3,1);}
#nav.stk-float, #nav.stk-hidden{will-change:transform;}

/* hide / reveal (anim-one, anim-three) */
#nav.stk-hidden{transform:translateY(-130%);}

/* floating pill (anim-one, anim-four) */
#nav.stk-float{top:14px;}
#nav.stk-float > div{
  max-width:980px; margin-left:auto; margin-right:auto; height:56px;
  background:rgba(245,241,234,.82);
  -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px);
  border:1px solid var(--line); border-radius:999px;
  box-shadow:0 16px 44px -20px rgba(13,15,18,.45), 0 2px 8px -4px rgba(13,15,18,.2);
  padding-left:22px; padding-right:14px;
}

/* shrink (anim-two) */
#nav.stk-shrink > div{height:52px;}
#nav.stk-shrink a[href="index.html"]{transform:scale(.9); transform-origin:left center;}

/* invert to dark (anim-five) — a contained, inset rounded bar that lines up with
   the page content box (max-w-[1360px] + gutter) instead of bleeding edge-to-edge.
   Gutter is now px-4 (16px) <640 and sm:px-5 (20px) ≥640. */
#nav.stk-invert{top:12px;}
#nav.stk-invert > div{
  max-width:1320px; margin-left:auto; margin-right:auto;
  background:var(--ink); color:var(--cream);
  border-radius:14px; box-shadow:0 16px 44px -22px rgba(13,15,18,.5);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
#nav.stk-invert .btn-ink{background:var(--lime); color:var(--ink);}
#nav.stk-invert .ring-line{box-shadow:inset 0 0 0 1px rgba(245,241,234,.25);}
@media (max-width:1359px){
  #nav.stk-invert > div{max-width:none; margin-left:20px; margin-right:20px;}
}
@media (max-width:639px){
  #nav.stk-invert > div{margin-left:16px; margin-right:16px;}
}

@media (max-width:767px){
  #nav.stk-float{top:12px;}
  /* Match the page gutter so the floating pill's left/right edges line up
     with every section's content below it. */
  #nav.stk-float > div{max-width:none; margin-left:20px; margin-right:20px; border-radius:18px; height:56px; padding-left:14px; padding-right:10px;}
}
@media (max-width:639px){
  #nav.stk-float > div{margin-left:16px; margin-right:16px;}
}
@media (prefers-reduced-motion: reduce){
  #nav{transition:background .35s ease, color .35s ease;}
  #nav.stk-hidden{transform:none;}
}

/* DESKTOP NAV ENHANCEMENTS */
.nav-item{position:relative;}
.nav-trigger{position:relative;display:inline-flex;align-items:center;gap:5px;cursor:pointer;}
.nav-trigger .chev{transition:transform .3s ease;}
.nav-item.open .chev{transform:rotate(180deg);}

/* Logo: infinite letter-by-letter wave with lime ripple */
.nx-logo{display:inline-flex;}
.nx-logo-l{display:inline-block; will-change:transform; animation:nxLogoWave 3s ease-in-out infinite;}
.nx-logo-it{font-style:italic;}
@keyframes nxLogoWave{0%,24%,100%{transform:translateY(0);color:inherit;}8%{transform:translateY(-0.26em);color:var(--lime-deep);}16%{transform:translateY(0.05em);}}
@media (prefers-reduced-motion: reduce){.nx-logo-l{animation:none;}}

/* Main-nav hover: lime marker-highlight sweep */
#nxNav .underline-grow::after{content:none !important;}
#nxNav .underline-grow{position:relative; z-index:0;}
#nxNav .underline-grow::before{content:""; position:absolute; z-index:-1; left:-5px; right:-5px; bottom:2px; height:0.62em; background:var(--lime); border-radius:3px; transform:scaleY(0); transform-origin:center bottom; opacity:0; transition:transform .3s cubic-bezier(.6,0,.2,1), opacity .22s ease;}
#nxNav .underline-grow:hover::before, #nxNav .nav-item.open .nav-trigger::before{transform:scaleY(1); opacity:1;}
#nxNav .underline-grow.active::before{transform:scaleY(1); opacity:.5;}
#nxNav .underline-grow.active:hover::before{opacity:1;}
.nav-flyout{position:absolute; top:100%; left:0; opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity .22s ease, transform .28s cubic-bezier(.2,.7,.2,1); z-index:60; padding-top:14px;}
.nav-item.open .nav-flyout{opacity:1; transform:translateY(0); pointer-events:auto;}

.nx-dropdown{width:420px; background:var(--cream); border:1px solid var(--line); border-radius:20px; padding:18px; box-shadow:0 22px 60px -28px rgba(13,15,18,.35), 0 6px 18px -10px rgba(13,15,18,.15);}
.nx-dropdown .dd-head{display:flex; align-items:baseline; justify-content:space-between; padding:0 10px 12px;}
.nx-dropdown .dd-head .label{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.nx-dropdown .dd-head a{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;}
.nx-dropdown .dd-list{display:flex;flex-direction:column;}
.nx-dd-link{display:flex;align-items:center;gap:14px;padding:14px 10px;border-radius:14px;text-decoration:none;color:inherit;transition:background .2s;}
.nx-dd-link:hover{background:var(--cream-2);}
.nx-dd-link .num{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);min-width:22px;}
.nx-dd-link .ttl{font-family:'Instrument Serif',serif;font-size:22px;line-height:1.05;flex:1;}
.nx-dd-link .pr{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);}
.nx-dd-link:hover .arr{transform:translate(4px,-4px);}
.nx-dd-link .arr{transition:transform .25s ease;font-family:'JetBrains Mono',monospace;color:var(--muted);}

/* MEGAMENU */
.nx-megamenu{width:min(1100px, calc(100vw - 40px)); background:var(--cream); border:1px solid var(--line); border-radius:24px; padding:28px; box-shadow:0 30px 80px -28px rgba(13,15,18,.4), 0 8px 22px -10px rgba(13,15,18,.18); display:grid; grid-template-columns:repeat(4, 1fr) 1.1fr; gap:24px;}
.nav-item.megamenu-anchor .nav-flyout{position:fixed; top:54px; left:50%; transform:translate(-50%, -8px);}
.nav-item.megamenu-anchor.open .nav-flyout{transform:translate(-50%, 0);}
.mm-col h5{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line);}
.mm-link{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:8px 0;text-decoration:none;color:var(--ink);transition:transform .2s ease;}
.mm-link:hover{transform:translateX(3px);}
.mm-link .t{font-family:'Instrument Serif',serif;font-size:18px;line-height:1.15;}
.mm-link .p{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);}
.mm-featured{background:#0d0f12; color:#f5f1ea; border-radius:18px; padding:22px; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between;}
.mm-featured::before{content:"";position:absolute;inset:-20% -10% 40% 30%;background:radial-gradient(circle, #c8f25c, transparent 65%);opacity:.45;}
.mm-featured .ft-tag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,241,234,.55);position:relative;}
.mm-featured h4{font-family:'Instrument Serif',serif;font-size:28px;line-height:1.05;margin:8px 0 12px;position:relative;}
.mm-featured p{font-size:13px;color:rgba(245,241,234,.7);margin-bottom:18px;position:relative;}
.mm-featured .ft-cta{display:inline-flex;align-items:center;gap:6px;background:#c8f25c;color:#0d0f12;padding:8px 14px;border-radius:999px;font-size:12.5px;align-self:flex-start;text-decoration:none;font-weight:500;position:relative;}

@media (max-width: 767px){.nav-flyout{display:none !important;}}

/* ===== MOBILE MENU ===== */
#mobileMenu.mm-v2{position:fixed; inset:0; z-index:90; pointer-events:none;}
#mobileMenu.mm-v2 .mm-backdrop{position:absolute; inset:0; background:rgba(8,9,11,.55); opacity:0; transition:opacity .45s ease;}
#mobileMenu.mm-v2.open{pointer-events:auto;}
#mobileMenu.mm-v2.open .mm-backdrop{opacity:1;}
#mobileMenu.mm-v2 .mm-panel{position:absolute; background:#0d0f12; color:#f5f1ea; display:flex; flex-direction:column; transition:transform .56s cubic-bezier(.7,0,.2,1); will-change:transform; max-width:100%;}
#mobileMenu.mm-v2.pos-top .mm-panel, #mobileMenu.mm-v2.pos-bottom .mm-panel{left:0; right:0; height:100%;}
#mobileMenu.mm-v2.pos-top .mm-panel{top:0; transform:translateY(-100%);}
#mobileMenu.mm-v2.pos-bottom .mm-panel{bottom:0; transform:translateY(100%);}
#mobileMenu.mm-v2.pos-left .mm-panel, #mobileMenu.mm-v2.pos-right .mm-panel{top:0; bottom:0; width:min(384px, 87vw);}
#mobileMenu.mm-v2.pos-left .mm-panel{left:0; transform:translateX(-100%);}
#mobileMenu.mm-v2.pos-right .mm-panel{right:0; transform:translateX(100%);}
#mobileMenu.mm-v2.open .mm-panel{transform:none;}
#mobileMenu.mm-v2 .mm-top{display:flex; align-items:center; justify-content:space-between; height:64px; padding:0 20px; flex:0 0 auto; opacity:0; transition:opacity .3s ease .15s;}
#mobileMenu.mm-v2.open .mm-top{opacity:1;}
#mobileMenu.mm-v2 .mm-top .logo{display:flex;align-items:center;gap:10px;font-family:'Instrument Serif',serif;font-size:22px;color:#f5f1ea;text-decoration:none;}
#mobileMenu.mm-v2 .mm-close{width:42px;height:42px;border-radius:999px;border:1px solid rgba(245,241,234,.2);display:grid;place-items:center;color:#f5f1ea;background:transparent;cursor:pointer;transition:background .2s;}
#mobileMenu.mm-v2 .mm-close:hover{background:rgba(245,241,234,.08);}
#mobileMenu.mm-v2 .mm-views{position:relative; flex:1; overflow:hidden;}
#mobileMenu.mm-v2 .mm-slider{display:flex; width:200%; height:100%; transform:translateX(0); transition:transform .42s cubic-bezier(.7,0,.2,1);}
#mobileMenu.mm-v2 .mm-slider.show-sub{transform:translateX(-50%);}
#mobileMenu.mm-v2 .mm-view{width:50%; height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:18px 24px 12px;}
#mobileMenu.mm-v2 .mm-label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,241,234,.4); margin-bottom:22px;}
.mm-row{opacity:0; transform:translateY(20px); transition:opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1);}
#mobileMenu.mm-v2.open .mm-view-root .mm-row{opacity:1; transform:translateY(0);}
.mm-row a, .mm-row > button{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 0; border-bottom:1px solid rgba(245,241,234,.1); font-family:'Instrument Serif',serif; font-size:36px; line-height:1; color:#f5f1ea; text-decoration:none; width:100%; background:transparent; border-left:0; border-right:0; border-top:0; cursor:pointer; text-align:left;}
#mobileMenu.mm-v2.pos-left .mm-row a, #mobileMenu.mm-v2.pos-left .mm-row > button, #mobileMenu.mm-v2.pos-right .mm-row a, #mobileMenu.mm-v2.pos-right .mm-row > button{font-size:30px;}
.mm-row.active a > .label{color:#c8f25c;}
.mm-row a:hover, .mm-row > button:hover{color:#c8f25c;}
.mm-row > button .chev{font-family:'JetBrains Mono',monospace; font-size:18px; color:rgba(245,241,234,.5);}
.mm-row .idx{font-family:'JetBrains Mono',monospace;font-size:13px;color:rgba(245,241,234,.4);}
.mm-back{display:inline-flex; align-items:center; gap:9px; background:transparent; border:0; cursor:pointer; color:#c8f25c; font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; padding:2px 0 18px;}
.mm-back .ar{font-size:16px;}
/* static drill-down groups: only the active one shows */
.mm-group[hidden]{display:none;}
.mm-sub-title{font-family:'Instrument Serif',serif; font-size:42px; line-height:.98; margin-bottom:18px;}
#mobileMenu.mm-v2.pos-left .mm-sub-title, #mobileMenu.mm-v2.pos-right .mm-sub-title{font-size:34px;}
.mm-sub-list a{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:15px 0; font-family:'Geist',sans-serif; font-size:18px; line-height:1.3; color:rgba(245,241,234,.88); text-decoration:none; border-bottom:1px solid rgba(245,241,234,.08);}
.mm-sub-list a:last-child{border-bottom:0;}
.mm-sub-list a .sp{font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(245,241,234,.4);white-space:nowrap;}
.mm-sub-list a:hover{color:#c8f25c;}
.mm-sub-list a.cta{color:#c8f25c;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;}
#mobileMenu.mm-v2 .mm-footer{padding:18px 24px 26px; border-top:1px solid rgba(245,241,234,.1); flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; opacity:0; transition:opacity .4s ease .35s;}
#mobileMenu.mm-v2.open .mm-footer{opacity:1;}
#mobileMenu.mm-v2 .mm-footer .ft-actions{display:flex; gap:10px; align-items:center;}
#mobileMenu.mm-v2 .mm-footer .ic{width:42px;height:42px;border-radius:999px;border:1px solid rgba(245,241,234,.2); display:grid;place-items:center;color:#f5f1ea;text-decoration:none;transition:all .2s;}
#mobileMenu.mm-v2 .mm-footer .ic:hover{background:rgba(245,241,234,.08);color:#c8f25c;}
#mobileMenu.mm-v2 .mm-footer .em{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:rgba(245,241,234,.55);}
#mobileMenu.mm-v2 .mm-cta{display:inline-flex; align-items:center; gap:8px; background:#c8f25c; color:#0d0f12; padding:10px 16px; border-radius:999px; font-family:'Geist',sans-serif; font-size:13px; text-decoration:none; font-weight:500;}
html.mm-open{overflow:hidden;}
#menuBtn .mb-lines{position:relative;width:16px;height:12px;}
#menuBtn .mb-lines span{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .35s cubic-bezier(.7,0,.2,1), opacity .25s;}
#menuBtn .mb-lines span:nth-child(1){top:1px;}
#menuBtn .mb-lines span:nth-child(2){top:9px;}
html.mm-open #menuBtn .mb-lines span:nth-child(1){top:5px;transform:rotate(45deg);}
html.mm-open #menuBtn .mb-lines span:nth-child(2){top:5px;transform:rotate(-45deg);}