/* ================================================================
   npcc-header.css  (npcc.nonodon.com header: stays on screen, slides up
                     out of the way while you scroll down, comes back
                     as soon as you scroll up)
   REV 0.2  |  20261102  |  Nonodon LLC
   REV 0.2: Dark mode keeps its full box inside the menu (the live site's
            toggle is a button, the mockup's is a label; both styled)
   Works with npcc-header.js. Without the script the header is the
   ordinary full header and scrolls away with the page.
   Widths: 1180px and up = full header with every link in one row.
           Under 1180px = slim row (logo, NPCC-SUITE, Request a demo,
           Menu); links and Dark mode open under Menu.
           Under 560px = Request a demo moves to the top of the menu.
   ================================================================ */
html{scroll-padding-top:84px}
.np-head.js-head{position:sticky;top:0;z-index:60;transition:transform .28s ease,opacity .28s ease;will-change:transform}
.np-head.js-head.is-up{transform:translateY(calc(-100% - 8px));opacity:0;pointer-events:none}
.np-head-tools{display:none}
.np-head .np-menu{display:none}

@media (max-width:1179.98px){
  .np-head.js-head .np-head-in{flex-wrap:nowrap;gap:12px;padding-top:10px;padding-bottom:10px}
  .np-head.js-head .np-brand{min-width:0;flex:0 1 auto;gap:10px}
  .np-head.js-head .np-brand img{height:28px}
  .np-head.js-head .np-brand span{font-size:13px;padding-left:10px;white-space:nowrap}
  .np-head.js-head .np-head-tools{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none}
  .np-head.js-head .np-head-cta{padding:9px 14px;font-size:14px;white-space:nowrap}
  .np-head.js-head .np-menu{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;
    font:600 15px/1 'IBM Plex Sans',system-ui,sans-serif;color:var(--head-ink);background:transparent;
    border:2px solid var(--line-strong);border-radius:0;cursor:pointer}
  .np-head.js-head .np-menu:focus-visible{outline:3px solid #F24F00;outline-offset:2px}
  .np-head.js-head .np-menu svg{display:block}
  .np-head.js-head .np-menu .np-menu-x{display:none}
  .np-head.js-head.is-open .np-menu .np-menu-bars{display:none}
  .np-head.js-head.is-open .np-menu .np-menu-x{display:block}
  /* the link list, opened by Menu */
  .np-head.js-head .np-nav{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 16px;background:var(--head-bg);
    border-bottom:2px solid var(--line-strong);box-shadow:0 4px 0 #F24F00;
    max-height:calc(100vh - 90px);overflow:auto}
  .np-head.js-head.is-open .np-nav{display:flex}
  .np-head.js-head .np-nav>a{
    display:flex;align-items:center;min-height:48px;border-bottom:1px solid var(--line);font-size:16px}
  .np-head.js-head .np-nav>.nd-toggle,.np-head.js-head .np-nav>.theme-toggle{align-self:flex-start;margin-top:12px;min-height:44px}
  .np-head.js-head .np-nav>.np-btn{display:none}
}
@media (max-width:640px){
  .np-head.js-head .np-head-in{padding-left:16px;padding-right:16px}
  .np-head.js-head .np-nav{padding-left:16px;padding-right:16px}
  .np-head.js-head .np-brand img{height:24px}
  .np-head.js-head .np-brand span{font-size:12px}
}
@media (max-width:559.98px){
  .np-head.js-head .np-head-cta{display:none}
  .np-head.js-head .np-menu{padding:0 10px}
  .np-head.js-head .np-menu-word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .np-head.js-head .np-nav>.np-btn{display:flex;justify-content:center;order:-1;margin:8px 0 12px;border-bottom:2px solid #0A0A0A;min-height:48px}
}
@media (prefers-reduced-motion:reduce){
  .np-head.js-head{transition:none}
}