/* Header, after citadelgroup.org: no bar, just the logo, centred links and the calls to action over the page.
   Clear at the top of the page. Once scrolled (lz-scrolled) the links and each button become their own raised square
   block, the logo stays bare, and the page shows, and takes clicks, between them. The blocks follow the tone of the section beneath: over a light one
   (lz-light) the logo turns dark on white. Without JS it is a solid dark bar, so it stays readable everywhere. */
header{position:fixed;top:0;left:0;right:0;z-index:40;background:rgba(10,10,10,.94) !important;border:0 !important;--lz-tone:#0A0A0A;--lz-lift:0 1px 2px rgba(0,0,0,.2),0 12px 30px -10px rgba(0,0,0,.5)}
header.lz-light{--lz-tone:#FFFFFF;--lz-lift:0 1px 2px rgba(0,0,0,.08),0 12px 30px -10px rgba(0,0,0,.28)}
.lz-js header{background:transparent !important;pointer-events:none}
.lz-js header a,.lz-js header button,.lz-js .lz-links,.lz-js header nav.lz-open{pointer-events:auto}
header > div{max-width:1280px !important;padding:14px 32px !important;gap:12px 24px !important}
header > div > a:first-child{display:flex !important;align-items:center;height:44px}
header img{width:88px !important}
header + section{padding-top:72px}
html{scroll-padding-top:88px}
header nav a{transition:color .3s ease,border-color .3s ease,background-color .15s ease,box-shadow .3s ease}
.lz-links{position:relative}
.lz-hl{position:absolute;left:0;bottom:8px;width:1px;height:2px;background:#FF5A1F;transform-origin:0 50%;opacity:0;pointer-events:none}
header nav a[data-here][style*="border:"]{border-color:#FF5A1F !important;color:#FF5A1F !important}
@media (min-width:1121px){
  header nav{flex:1 1 auto;justify-content:flex-end;gap:10px !important;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px !important;font-weight:500 !important;line-height:14px;letter-spacing:.12em;text-transform:uppercase}
  header > div{max-width:none !important;padding:14px 24px !important}
  .lz-links{display:flex;align-items:center;gap:28px;height:44px;margin:0 auto;padding:0 20px;transition:background-color .3s ease,box-shadow .3s ease}
  header nav a{padding:15px 0 !important}
  header nav a[class],header nav a[style*="border:"]{padding:15px 18px !important;font-weight:500 !important}
  header nav a.btn-l,header nav a[style*="border:"]{padding:14px 17px !important}
  .lz-scrolled .lz-links{background:#0A0A0A;box-shadow:var(--lz-lift)}
  .lz-scrolled nav a[class],.lz-scrolled nav a[style*="border:"]{box-shadow:var(--lz-lift)}
  .lz-scrolled nav a.btn-l,.lz-scrolled nav a[style*="border:"]{background:var(--lz-tone) !important}
  .lz-light nav a.btn-l:not([data-here]){border-color:#0A0A0A !important;color:#0A0A0A !important}
  .lz-light nav a.btn-l:not([data-here]):hover{background:#0A0A0A !important;color:#FFFFFF !important}
  .lz-scrolled nav a.btn-l:not(.lz-light *):hover{background:#FFFFFF !important}
}
@media (min-width:1300px){.lz-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}}
@media (max-width:1120px){
  .lz-links{display:contents}
  .lz-js header:has(nav.lz-open){background:#0A0A0A !important;box-shadow:0 18px 40px -12px rgba(0,0,0,.6)}
  .lz-js .lz-scrolled .lz-menu{margin-right:0 !important;background:var(--lz-tone) !important;box-shadow:var(--lz-lift);transition:background-color .3s ease,box-shadow .3s ease}
  .lz-light .lz-menu{color:#0A0A0A !important}
  header nav a[data-here]:not([style*="border:"]),header nav a[aria-current="page"]:not([style*="border:"]){color:#FF5A1F}
  header > div{padding:12px 16px 12px 20px !important}
  header nav.lz-open{max-height:calc(100vh - 80px);overflow-y:auto}
  .lz-hl{display:none}
}
@media (prefers-reduced-motion:reduce){header nav a,.lz-links,.lz-menu{transition:none !important}}

/* Phone and tablet menu. The lz-js class is set in each page's head, so with no JS the full nav still shows. */
.lz-menu{display:none}
@media (max-width:1120px){
  .lz-js header img{width:88px !important}
  .lz-js .lz-menu{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:44px;height:44px;margin-right:-10px;padding:0;border:0;background:none;color:#FFFFFF;cursor:pointer}
  .lz-menu:focus-visible{outline:2px solid #FF5A1F;outline-offset:2px}
  .lz-menu span{display:block;width:22px;height:2px;background:currentColor;transition:transform .25s cubic-bezier(.16,1,.3,1)}
  .lz-menu[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
  .lz-menu[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
  .lz-js header nav{display:none !important}
  .lz-js header nav.lz-open{display:flex !important;flex:1 0 100%;flex-direction:column;align-items:stretch !important;gap:0 !important;font-size:17px !important;animation:lzMenu .25s cubic-bezier(.16,1,.3,1) both}
  .lz-js header nav.lz-open a:not([class]),.lz-js header nav.lz-open a:not([style*="border:"]):not(.btn-o){padding:14px 0 !important;border-bottom:1px solid #2E2E2E}
  .lz-js header nav.lz-open a.btn-l{margin-top:20px}
  .lz-js header nav.lz-open a[style*="border:"],.lz-js header nav.lz-open a.btn-o{margin-top:12px;padding:14px 20px !important;text-align:center}
  .lz-js header nav.lz-open a.btn-l + a{margin-top:8px}
}
@keyframes lzMenu{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .lz-menu span{transition:none}
  .lz-js header nav.lz-open{animation:none}
}