/* ================================================================
   pea-sub.css  (pea.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, P.E.A., 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}
.pe-head.js-head{position:sticky;top:0;z-index:60;transition:transform .28s ease,opacity .28s ease;will-change:transform}
.pe-head.js-head.is-up{transform:translateY(calc(-100% - 4px));opacity:0;pointer-events:none}
.sub-head-tools{display:none}
.pe-head .sub-menu{display:none}

@media (max-width:1179.98px){
  .pe-head.js-head .pe-head-in{flex-wrap:nowrap;gap:12px;padding-top:12px;padding-bottom:12px}
  .pe-head.js-head .pe-brand{min-width:0;flex:0 1 auto}
  .pe-head.js-head .pe-brand span{white-space:nowrap}
  .pe-head.js-head .sub-head-tools{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none}
  .pe-head.js-head .sub-head-cta{padding:12px 18px;font-size:14px;white-space:nowrap}
  .pe-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:var(--band);
    border:0;border-radius:14px;cursor:pointer}
  .pe-head.js-head .sub-menu:hover{box-shadow:inset 0 0 0 2px #F24F00}
  .pe-head.js-head .sub-menu:focus-visible{outline:3px solid #F24F00;outline-offset:2px}
  .pe-head.js-head .sub-menu svg{display:block}
  .pe-head.js-head .sub-menu .sub-menu-x{display:none}
  .pe-head.js-head.is-open .sub-menu .sub-menu-bars{display:none}
  .pe-head.js-head.is-open .sub-menu .sub-menu-x{display:block}
  /* the link list, opened by Menu */
  .pe-head.js-head .pe-nav{display:none;position:absolute;left:0;right:0;top:calc(100% + 1px);
    flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:0;padding:4px 24px 18px;
    background:var(--head-bg);border-bottom:3px solid #F24F00;box-shadow:0 10px 24px rgba(0,0,0,.08);
    max-height:calc(100vh - 80px);overflow:auto}
  .pe-head.js-head.is-open .pe-nav{display:flex}
  .pe-head.js-head .pe-nav>a{display:flex;align-items:center;min-height:48px;font-size:17px;border-bottom:1px solid var(--line)}
  .pe-head.js-head .pe-nav>.pe-home{font-size:14px}
  .pe-head.js-head .pe-nav>.theme-toggle{align-self:flex-start;margin-top:14px;min-height:44px}
  .pe-head.js-head .pe-nav>.pe-btn{display:none}
}
@media (max-width:719.98px){
  .pe-head.js-head .sub-head-cta{display:none}
  .pe-head.js-head .pe-brand{gap:10px}
  .pe-head.js-head .pe-brand img{height:30px}
  .pe-head.js-head .pe-brand span{font-size:17px;padding:3px 12px}
  .pe-head.js-head .pe-nav>.pe-btn{display:flex;justify-content:center;order:-1;margin:12px 0 8px;border-bottom:0;min-height:48px}
}
@media (max-width:640px){
  .pe-wrap{padding-left:16px;padding-right:16px}
  .pe-head.js-head .pe-nav{padding-left:16px;padding-right:16px}
}
@media (max-width:559.98px){
  .pe-head.js-head .pe-brand img{height:26px}
  .pe-head.js-head .pe-brand span{font-size:15px;padding:3px 10px}
}
@media (max-width:419.98px){
  .pe-head.js-head .sub-menu{padding:0 11px}
  .pe-head.js-head .sub-menu-word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  .pe-head.js-head{transition:none}
}

/* Phone-width fixes: nothing may be wider than the screen */
.pe-pillars{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.pe-grid{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.pe-steps{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.pe-row{grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr))}
@media (max-width:640px){
  .pe-h1{font-size:clamp(36px,10.5vw,44px)}
  .pe-lead{font-size:18px}
  .pe-pillar{padding:24px}
  .pe-card{padding:22px}
  .pe-step{padding:20px}
  .pe-about{padding-top:56px;padding-bottom:56px}
  .pe-about p{font-size:19px}
  .pe-form{padding:20px}
  .pe-foot-in{flex-direction:column;align-items:flex-start}
}