/* ================================================================
   cyber-sub.css  (cyber.nonodon.com: header that slides up out of the
                   way while you scroll down and comes back when you
                   scroll up, plus phone-width fixes)
   REV 0.1  |  20261102  |  Nonodon LLC
   Goes on the site as assets/nonodon-sub.css, loaded after styles.css.
   Works with nonodon-sub.js; without the script the header is the
   ordinary full header and the page still gets the phone fixes.
   Widths: 1180px and up = full header, every link in one row.
           720 to 1179px = slim row (logo, Cybersecurity, Request a
           quote, Menu); links and Dark mode open under Menu.
           Under 720px = Request a quote moves to the top of the menu.
           Under 420px = Menu shows its icon only.
   ================================================================ */
html{scroll-padding-top:84px}
.cy-head.js-head{position:sticky;top:0;z-index:60;transition:transform .28s ease,opacity .28s ease;will-change:transform}
.cy-head.js-head.is-up{transform:translateY(calc(-100% - 8px));opacity:0;pointer-events:none}
.sub-head-tools{display:none}
.cy-head .sub-menu{display:none}
@media (min-width:1180px) and (max-width:1299.98px){.cy-nav{gap:18px}}

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

/* Phone-width fixes: nothing may be wider than the screen */
.cy-fw{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.cy-grid{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.cy-steps{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.cy-steps.cy-cycle{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.cy-row{grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr))}
@media (max-width:640px){
  .cy-hero{gap:36px;padding-bottom:56px}
  .cy-h1{font-size:clamp(34px,9vw,40px)}
  .cy-lead{font-size:17px}
  .cy-fig{padding:16px}
  .cy-band-in,.cy-about-in{padding-top:56px;padding-bottom:56px}
  .cy-fw div{padding-right:0}
  .cy-fw b{font-size:20px}
  .cy-card{padding:22px}
  .cy-about-in p{font-size:20px}
  .cy-form{padding:20px}
  .cy-foot-in{flex-direction:column;align-items:flex-start}
}