/* chrome.css — header, nav, footer, lockup. The ONLY place these live. Linked by every page.
   Loaded BEFORE site.css / the inline page styles, so page CSS must not redefine anything here. */
:root{--asphalt:#17191C;--green:#0E7A45;--green-dk:#0B693B;--amber:#F0A227;--concrete:#F1F0ED;--ink:#14181F;
  --dot:#0E7A45;        /* dot + SYSTEMS + digit circles on LIGHT ground */
  --dot-dark:#2EB067;   /* same things on DARK ground. 6.1:1 on asphalt. "The green light." */
  --hdr:99px;           /* sticky header height. chrome.js re-measures and overwrites this */
  --display:"Plus Jakarta Sans",system-ui,sans-serif;--body:"Hanken Grotesk",system-ui,sans-serif;
  --mono:"Space Grotesk",system-ui,sans-serif;--ease-out:cubic-bezier(.2,.7,.2,1)}
/* lockup, exact approved spec. Colour only changed 2026-08-23 (green dot everywhere). */
.lock{--s:34px;display:inline-block;text-align:center;text-decoration:none}
.lock .w{font-family:var(--display);font-weight:800;font-size:var(--s);letter-spacing:-.035em;line-height:1;
  color:var(--ink);white-space:nowrap}
.lock .w i{color:var(--dot);font-style:normal}
.lock .sys{font-family:var(--mono);font-weight:700;font-size:calc(var(--s)*.392);letter-spacing:.335em;
  text-indent:.335em;text-transform:uppercase;margin-top:calc(var(--s)*.2);color:var(--dot);white-space:nowrap}
/* on asphalt (header, footer, dark sections) the wordmark is concrete and the dot is the brighter green */
.on-dark .lock .w,header .lock .w,footer .lock .w{color:var(--concrete)}
.on-dark .lock .w i,header .lock .w i,footer .lock .w i,
.on-dark .lock .sys,header .lock .sys,footer .lock .sys{color:var(--dot-dark)}

/* ---- shared shell + buttons (moved here from site.css / index inline) ---- */
.wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 24px}
.btn{display:inline-block;background:var(--green);color:#fff;font-family:var(--display);font-weight:800;
  font-size:17px;padding:13px 22px;border-radius:4px;text-decoration:none;white-space:nowrap;
  transition:background-color .15s,transform .12s var(--ease-out)}
.btn:hover{background:var(--green-dk);color:#fff}
.btn:active{transform:translateY(1px)}

/* ---- header bar (sticky, full size) ---- */
header.site{position:sticky;top:0;z-index:60;background:var(--asphalt);color:var(--concrete);
  border-bottom:1px solid #26292E}
.bar{display:flex;align-items:center;gap:28px;padding-top:18px;padding-bottom:18px;
  min-height:var(--hdr);box-sizing:border-box}
.bar .lock{flex:none}
.nav{display:flex;align-items:center;gap:2px;margin-left:16px;flex:1 1 auto;min-width:0}
.nav > a,.navbtn{font-family:var(--body);font-weight:500;font-size:17px;line-height:1;color:#C9CBCE;
  text-decoration:none;padding:11px 14px;border-radius:4px;background:none;border:0;cursor:pointer;
  white-space:nowrap;transition:color .12s,background-color .12s}
.nav > a:hover,.navbtn:hover,.navbtn[aria-expanded="true"]{color:#fff;background:rgba(255,255,255,.07)}
.nav > a[aria-current],.navbtn[aria-current]{color:#fff;text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:7px;text-decoration-color:var(--dot-dark)}
.chev{display:inline-block;width:7px;height:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg);margin:0 0 3px 9px;transition:transform .15s}
.navbtn[aria-expanded="true"] .chev{transform:rotate(225deg);margin-bottom:-2px}
.cta-bar{margin-left:auto;flex:none;font-size:17px;padding:15px 26px}

/* ---- mega menu (desktop) ---- */
.has-mega{position:static}
.mega{position:absolute;left:0;right:0;top:100%;display:none;padding:10px 24px 0}
.has-mega.open .mega{display:block}
.mega-in{max-width:1280px;margin:0 auto;background:var(--concrete);color:var(--ink);border:1px solid #D9D8D4;
  border-radius:8px;padding:22px 28px 26px;box-sizing:border-box;width:min(100%,980px)}
.mlabel{font-family:var(--mono);font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#6B7076;padding:0 0 14px 4px;border-bottom:1px solid #E2E1DC;margin-bottom:10px}
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 18px}
.mgrid a{display:flex;gap:14px;align-items:flex-start;padding:12px 12px 13px;border-radius:6px;
  text-decoration:none;color:var(--ink)}
.mgrid a:hover{background:rgba(14,122,69,.08)}
.mgrid b{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.01em;display:block;line-height:1.25}
.mgrid small{display:block;font-family:var(--body);font-size:15px;color:#5A5E64;line-height:1.4;margin-top:3px}
.mgrid .n,.dprod .n{flex:none;width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;font-family:var(--mono);font-weight:700;font-size:16px;background:var(--dot);color:#fff}

/* ---- burger + drawer (mobile / tablet) ---- */
.burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;padding:10px;
  flex-direction:column;justify-content:center;gap:7px}
.burger span{display:block;height:2px;background:var(--concrete);border-radius:2px;
  transition:transform .2s var(--ease-out),opacity .2s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
.drawer{position:fixed;top:var(--hdr);left:0;right:0;bottom:0;background:var(--asphalt);overflow:auto;
  padding:18px 0 40px;z-index:59}
.drawer[hidden]{display:none}
.dlabel{font-family:var(--mono);font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#8E9297;margin:6px 0 10px}
.dprod a{display:flex;align-items:center;gap:14px;padding:10px 0;font-family:var(--display);font-weight:800;
  font-size:18px;color:var(--concrete);text-decoration:none}
.dprod .n{background:var(--dot-dark);color:var(--asphalt)}
.dlinks{display:flex;flex-direction:column;margin:18px 0 24px;border-top:1px solid #26292E}
.dlinks a{font-family:var(--body);font-weight:500;font-size:20px;color:#E2E3E5;text-decoration:none;
  padding:14px 0;border-bottom:1px solid #26292E}
.dlinks a[aria-current]{color:#fff;text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:6px;text-decoration-color:var(--dot-dark)}
.drawer .btn.big{display:block;text-align:center;font-size:19px;padding:16px 28px}
body.drawer-open{overflow:hidden}
@media (max-width:1120px){
  .nav{display:none}
  .burger{display:flex}
  .cta-bar{margin-left:auto;font-size:16px;padding:13px 20px}
  .mega{display:none!important}
}
@media (max-width:640px){
  :root{--hdr:85px}
  .bar{padding-top:14px;padding-bottom:14px;gap:16px}
  .lock{--s:28px}
  .cta-bar{display:none}
  .burger{margin-left:auto}
}

/* ---- footer ---- */
footer{background:var(--asphalt);color:#8E9297;padding:52px 0 44px;font-size:15.5px;margin-top:64px}
.fgrid{display:grid;grid-template-columns:auto 1fr 1fr auto;gap:34px 48px;align-items:start}
.fcol{display:flex;flex-direction:column;gap:9px}
.fcol b{font-family:var(--mono);font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#8E9297;margin-bottom:4px}
footer a{color:#C9CBCE;text-decoration:none}
footer a:hover{color:#fff}
.legal{line-height:1.8;text-align:right}
@media (max-width:980px){.fgrid{grid-template-columns:1fr 1fr}.legal{grid-column:1/-1;text-align:left}}
@media (max-width:640px){.fgrid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.burger span,.chev,.nav > a,.navbtn,.btn{transition:none}}