/* Centered transparent brand; the installed Libraries.dev BorderBeam renders the light. */
.crux-nav { position: fixed; top: 0; left: 50%; z-index: 60; transform: translateX(-50%); font-family: Geist, Inter, system-ui, sans-serif; }
.crux-nav-shell { position: relative; display: flex; align-items: center; width: 196px; height: 48px; isolation: isolate; background: #050507f5; border: 1px solid #ffffff1c; border-top: 0; border-radius: 0 0 12px 12px; box-shadow: 0 8px 28px #0006; backdrop-filter: blur(24px); transition: width 340ms cubic-bezier(.22,1,.36,1),height 280ms cubic-bezier(.22,1,.36,1); }
.crux-nav-brand { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; flex: none; gap: 11px; width: 194px; height: 46px; padding: 0; border: 0; background: transparent; color: #f6f8ff; cursor: pointer; border-radius: inherit; transition: width 340ms cubic-bezier(.22,1,.36,1); }
.crux-nav-brand > span { font-family: "Crux Demo Brand", Geist, sans-serif; font-size: 21px; line-height: 1; }
.crux-nav-logo { display: block; flex: none; width: 22px; height: 32px; background: transparent; object-fit: contain; }
.crux-nav-brand:focus-visible,.crux-nav-links a:focus-visible { outline: 2px solid #a5d8ff; outline-offset: -3px; border-radius: 7px; }
/* Keep the installed BorderBeam intact, exposing only left, bottom and right. */
.crux-nav-effects { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; clip-path: inset(1px -12px -12px); }
.crux-nav-effects > [data-beam] { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0 0 12px 12px !important; }
.crux-nav-beam-surface { display: block; width: 100%; height: 100%; border-radius: inherit; }
.crux-nav-links { position: relative; z-index: 3; display: flex; align-items: center; gap: 24px; flex: 1; min-width: 0; height: 54px; padding: 0 18px 0 8px; opacity: 0; visibility: hidden; overflow: hidden; transform: translateY(-4px); transition: opacity 150ms,transform 240ms cubic-bezier(.22,1,.36,1),visibility 150ms; }
.crux-nav-links a { flex: none; color: #a5d8ff; text-decoration: none; font-size: 13px; white-space: nowrap; }
.crux-nav-links a:hover,.crux-nav-links a[aria-current="location"] { color: #fff; }
.crux-nav-links .crux-nav-cta { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 13px; margin-left: auto; border: 1px solid #ffffff1c; border-radius: 8px; background: #004ff1; color: #f6f8ff; font-size: 12px; font-weight: 600; }
.crux-nav[data-mode="open"] .crux-nav-shell { width: min(660px,calc(100vw - 24px)); height: 56px; }
.crux-nav[data-mode="open"] .crux-nav-brand { width: 156px; }
.crux-nav[data-mode="open"] .crux-nav-links { opacity: 1; visibility: visible; transform: none; transition-delay: 80ms; }
@media(max-width:640px) {
 .crux-nav-shell { flex-wrap: wrap; align-content: flex-start; }
 .crux-nav-brand { width: 100% !important; }
 .crux-nav-links { flex-basis: 100%; height: 54px; padding: 0 14px; gap: 14px; border-top: 1px solid #ffffff0d; }
 .crux-nav-links .crux-nav-cta { padding: 0 10px; gap: 6px; }
 .crux-nav[data-mode="open"] .crux-nav-shell { height: 102px; }
}
@media(prefers-reduced-motion:reduce) { .crux-nav * { transition: none !important; animation: none !important; } .crux-nav-effects { display: none !important; } }