/* One navigation system for every Camixel page. */
#site-navigation, #site-navigation * { box-sizing: border-box; }
#site-navigation { position: sticky; top: 0; z-index: 6000; width: 100%; min-height: 72px; background: #080808; border-bottom: 1px solid rgba(255,255,255,.13); color: #f7f8f7; font-family: inherit; }
#site-navigation a { text-decoration: none; }
#site-navigation .cxn-shell { display: flex; align-items: center; gap: clamp(20px,2vw,36px); width: min(100% - 48px, 1440px); height: 72px; margin: 0 auto; }
#site-navigation .cxn-brand { display: flex; flex: 0 0 auto; align-items: center; width: 136px; height: 58px; }
#site-navigation .cxn-brand img { display: block; width: 100%; max-height: 48px; object-fit: contain; object-position: left center; }
#site-navigation .cxn-nav { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 2px; min-width: 0; }
#site-navigation .cxn-link, #site-navigation .cxn-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 6px; position: relative; min-height: 42px; padding: 0 11px; border: 0; border-radius: 9px; background: transparent; color: #c5ccca; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: color .16s ease, background-color .16s ease; }
#site-navigation .cxn-link:hover, #site-navigation .cxn-trigger:hover, #site-navigation .cxn-link:focus-visible, #site-navigation .cxn-trigger:focus-visible, #site-navigation .cxn-trigger[aria-expanded="true"] { color: #fff; background: #1e1e1e; }
#site-navigation .cxn-link[aria-current="page"], #site-navigation .cxn-trigger.cxn-current { color: #fff; }
#site-navigation .cxn-link[aria-current="page"]::after, #site-navigation .cxn-trigger.cxn-current::after { content: ""; position: absolute; right: 11px; bottom: 3px; left: 11px; height: 2px; border-radius: 2px; background: #3da57f; }
#site-navigation .cxn-group { position: relative; flex: 0 0 auto; }
#site-navigation .cxn-chevron { display: inline-block; width: 7px; height: 7px; margin: -3px 0 0 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .16s ease; }
#site-navigation .cxn-trigger[aria-expanded="true"] .cxn-chevron { transform: translateY(3px) rotate(225deg); }
#site-navigation .cxn-panel[hidden] { display: none !important; }
#site-navigation .cxn-panel { position: absolute; top: calc(100% + 12px); left: 50%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; width: 410px; padding: 10px; transform: translateX(-50%); border: 1px solid #303635; border-radius: 16px; background: #121212; box-shadow: 0 22px 54px rgba(0,0,0,.48); }
#site-navigation #cxn-about-panel { width: 260px; grid-template-columns: 1fr; }
#site-navigation #cxn-brands-panel .cxn-panel-heading { grid-column: 1 / -1; padding: 10px 12px 5px; color: #86a598; font-size: 10px; font-weight: 800; letter-spacing: .13em; line-height: 1.2; text-transform: uppercase; }
#site-navigation #cxn-brands-panel .cxn-panel-heading--secondary { margin-top: 8px; padding-top: 16px; border-top: 1px solid #303635; }
#site-navigation .cxn-panel a { display: flex; align-items: center; min-height: 42px; padding: 9px 12px; border-radius: 9px; color: #dce2df; font-size: 13px; font-weight: 600; line-height: 1.35; transition: background-color .16s ease, color .16s ease; }
#site-navigation .cxn-panel a:hover, #site-navigation .cxn-panel a:focus-visible, #site-navigation .cxn-panel a[aria-current="page"] { background: #282828; color: #fff; }
#site-navigation .cxn-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
#site-navigation .cxn-action { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 17px; border: 1px solid #3a4140; border-radius: 999px; color: #f2f4f2; font-size: 12px; font-weight: 700; white-space: nowrap; transition: background-color .16s ease, border-color .16s ease, color .16s ease; }
#site-navigation .cxn-action:hover, #site-navigation .cxn-action:focus-visible { background: #262626; border-color: #6a7671; color: #fff; }
#site-navigation .cxn-action--primary { border-color: #3da57f; background: #3da57f; color: #0c0c0c; }
#site-navigation .cxn-action--primary:hover, #site-navigation .cxn-action--primary:focus-visible { border-color: #62c9a1; background: #62c9a1; color: #0c0c0c; }
#site-navigation :is(a,button):focus-visible { outline: 2px solid #62c9a1; outline-offset: 3px; }
#site-navigation .cxn-toggle { display: none; align-items: center; justify-content: center; flex-direction: column; gap: 5px; width: 44px; height: 44px; margin-left: auto; border: 1px solid #343b38; border-radius: 11px; background: #181818; cursor: pointer; }
#site-navigation .cxn-toggle span { display: block; width: 20px; height: 2px; border-radius: 2px; background: #f5f6f5; transition: transform .16s ease, opacity .16s ease; }
#site-navigation .cxn-toggle[aria-expanded="true"] span:first-child { transform: translateY(7px) rotate(45deg); }
#site-navigation .cxn-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
#site-navigation .cxn-toggle[aria-expanded="true"] span:last-child { transform: translateY(-7px) rotate(-45deg); }
#site-navigation .cxn-mobile-actions { display: none; }
@media (max-width: 1370px) {
  #site-navigation .cxn-shell { width: min(100% - 32px, 1440px); }
  #site-navigation .cxn-toggle { display: flex; }
  #site-navigation .cxn-shell > .cxn-actions { display: none; }
  #site-navigation .cxn-nav { display: none; position: fixed; inset: 72px 0 0; width: 100%; height: calc(100dvh - 72px); padding: 20px max(20px,calc((100vw - 760px)/2)) 42px; overflow-y: auto; background: #080808; border-top: 1px solid #282828; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
  #site-navigation .cxn-nav.cxn-open { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px; }
  #site-navigation .cxn-link, #site-navigation .cxn-trigger { justify-content: space-between; width: 100%; min-height: 48px; padding: 0 16px; font-size: 15px; text-align: left; }
  #site-navigation .cxn-group { width: 100%; }
  #site-navigation .cxn-panel, #site-navigation #cxn-about-panel { position: static; display: grid; grid-template-columns: 1fr; width: 100%; margin: 5px 0 9px; transform: none; box-shadow: none; }
  #site-navigation .cxn-panel a { min-height: 44px; font-size: 14px; }
  #site-navigation .cxn-mobile-actions { display: grid; gap: 10px; width: 100%; margin-top: 18px; }
  #site-navigation .cxn-mobile-actions .cxn-action { min-height: 48px; font-size: 14px; }
  body.cxn-menu-open { overflow: hidden; }
}
@media (max-width: 480px) { #site-navigation .cxn-brand { width: 122px; } #site-navigation .cxn-panel { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { #site-navigation *, #site-navigation *::before, #site-navigation *::after { transition-duration: .01ms !important; } }