/* =========================================================
   NAVBAR (cm- namespaced, from uploaded cutmode-navbar.html)
   Starts as a logo-only capsule, then expands into the full bar.
   ========================================================= */
.cm-nav,.cm-nav *{box-sizing:border-box}
.cm-nav{
  --nav-h:72px;
  --cap-w:220px;                       /* capsule width (set automatically by the script) */
  --ease:cubic-bezier(.65,0,.15,1);
  position:fixed;top:18px;left:50%;translate:-50% 0;z-index:100;   /* always at the top of the window */
  width:calc(100% - 40px);max-width:1240px;margin:0;
  height:var(--nav-h);padding:0 26px;
  display:flex;align-items:center;
  border-radius:999px;
  background:transparent;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 18px 40px -14px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  transition:max-width .95s var(--ease);
}
/* the bar's fill lives on its own layer so it can fade to semi-transparent while scrolling */
.cm-nav:before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:linear-gradient(180deg,#0d0f14 0%,#07080b 100%);opacity:1;transition:opacity .35s ease}
.cm-nav.cm-scrolled:before{opacity:.68}
/* holds the bar's old slot in the page so nothing shifts now that it floats */
.cm-nav-space{height:90px}
.cm-logo{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff;flex-shrink:0;white-space:nowrap}
.cm-logo-img{display:block;height:26px;width:auto;flex-shrink:0}
.cm-links{position:absolute;left:var(--mid,50%);top:50%;transform:translate(-50%,-50%);display:flex;gap:28px;list-style:none;margin:0;padding:0}
.cm-links li{transition:opacity .45s ease,transform .45s var(--ease)}
.cm-links a{color:#b9bac2;text-decoration:none;font-size:17px;font-weight:400;white-space:nowrap;transition:color .2s}
.cm-links a:hover,.cm-links a[aria-current="page"]{color:#fff}
.cm-cta{position:absolute;right:9px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 21px;border-radius:999px;
  background:#fff;color:#0b0b0d;text-decoration:none;font-size:17px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  transition:opacity .45s ease,transform .45s var(--ease),box-shadow .2s}
.cm-cta:hover{box-shadow:0 8px 24px -8px rgba(255,255,255,.45)}
.cm-burger{display:none;position:absolute;right:9px;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:transparent;cursor:pointer;place-items:center;transition:opacity .45s ease}
.cm-burger span,.cm-burger span:before,.cm-burger span:after{display:block;width:17px;height:2px;border-radius:2px;background:#fff;position:relative;transition:transform .25s,background .25s}
.cm-burger span:before,.cm-burger span:after{content:"";position:absolute;left:0}
.cm-burger span:before{top:-6px}.cm-burger span:after{top:6px}
.cm-nav.open .cm-burger span{background:transparent}
.cm-nav.open .cm-burger span:before{transform:translateY(6px) rotate(45deg)}
.cm-nav.open .cm-burger span:after{transform:translateY(-6px) rotate(-45deg)}
.cm-nav a:focus-visible,.cm-burger:focus-visible{outline:2px solid #8fb1ff;outline-offset:3px;border-radius:8px}

/* expanded: items fade in one after another once the bar has stretched */
.cm-nav .cm-links li:nth-child(1){transition-delay:.5s}
.cm-nav .cm-links li:nth-child(2){transition-delay:.56s}
.cm-nav .cm-links li:nth-child(3){transition-delay:.62s}
.cm-nav .cm-links li:nth-child(4){transition-delay:.68s}
.cm-nav .cm-links li:nth-child(5){transition-delay:.74s}
.cm-nav .cm-cta{transition-delay:.78s,.78s,0s}
.cm-nav .cm-burger{transition-delay:.6s}

/* capsule state: logo only */
.cm-nav.cm-capsule{max-width:var(--cap-w)}
.cm-nav.cm-capsule .cm-links li{opacity:0;transform:translateY(6px);transition-delay:0s;pointer-events:none}
.cm-nav.cm-capsule .cm-cta{opacity:0;transform:translateY(-50%) scale(.9);transition-delay:0s;pointer-events:none}
.cm-nav.cm-capsule .cm-burger{opacity:0;transition-delay:0s;pointer-events:none}

@media (max-width:860px){
  .cm-nav{--nav-h:62px;padding:0 20px}
  .cm-nav-space{height:80px}
  .cm-logo-img{height:23px}
  .cm-burger{display:grid}
  .cm-cta{height:44px;padding:0 16px;font-size:15px;right:62px}
  .cm-links{left:0;right:0;top:calc(100% + 10px);transform:none;flex-direction:column;gap:4px;padding:10px;border-radius:22px;
    background:linear-gradient(180deg,#0d0f14,#07080b);border:1px solid rgba(255,255,255,.07);box-shadow:0 20px 40px rgba(0,0,0,.6);
    opacity:0;visibility:hidden;translate:0 -6px;transition:opacity .2s,translate .2s,visibility .2s}
  .cm-links li{transition-delay:0s!important}
  .cm-nav.open .cm-links{opacity:1;visibility:visible;translate:0 0}
  .cm-links a{display:block;padding:12px 14px;border-radius:12px;font-size:17px}
  .cm-links a:hover{background:rgba(255,255,255,.05)}
}
@media (max-width:420px){ .cm-cta{display:none} }
@media (prefers-reduced-motion:reduce){ .cm-nav,.cm-nav *,.cm-nav:before{transition:none!important} }