/* Powernaut site shell — floating pill navigation, mega menus and the global footer.
   Shared by the homepage and every subpage. Tokens fall back to literals so this
   file works standalone on pages that do not load site.css. */

.nav{position:fixed;top:16px;left:0;right:0;z-index:60;pointer-events:none;}
/* At the top of the page the bar sits wide and open on the hero; once scrolled it
   contracts into a rounded glass pill. Both states are explicit lengths so the width
   interpolates (max-content would snap instead of animate). */
.nav-inner{width:min(1200px,calc(100vw - 40px));margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:26px;pointer-events:auto;
  padding:12px 8px 12px 6px;border-radius:999px;
  background:transparent;backdrop-filter:none;
  border:1px solid transparent;box-shadow:none;
  transition:width .42s var(--ease,cubic-bezier(.2,.7,.2,1)),
    padding .42s var(--ease,cubic-bezier(.2,.7,.2,1)),
    background .32s var(--ease,cubic-bezier(.2,.7,.2,1)),
    border-color .32s var(--ease,cubic-bezier(.2,.7,.2,1)),
    box-shadow .32s var(--ease,cubic-bezier(.2,.7,.2,1)),
    backdrop-filter .32s var(--ease,cubic-bezier(.2,.7,.2,1));}
.nav.is-stuck .nav-inner{width:min(1000px,calc(100vw - 32px));
  padding:9px 10px 9px 20px;
  background:rgba(3,19,3,.62);backdrop-filter:blur(14px) saturate(1.3);
  border-color:rgba(248,248,246,.10);box-shadow:0 10px 40px -18px rgba(0,0,0,.8);}
.nav .brand{display:flex;align-items:center;text-decoration:none;flex:none;}
.nav .brand img{height:19px;width:auto;display:block;}
.navlinks{display:flex;align-items:center;gap:2px;}
.navmenu{display:none;align-items:center;gap:8px;background:none;
  border:1px solid rgba(248,248,246,.14);border-radius:999px;cursor:pointer;
  font:600 13px var(--body,"Inter",system-ui,sans-serif);color:var(--surface,#F8F8F6);padding:9px 15px;}
.navmenu:hover{background:rgba(248,248,246,.07);}
.navmenu .bars{display:grid;gap:3px;}
.navmenu .bars i{display:block;width:14px;height:1.6px;background:currentColor;border-radius:2px;}
.navlink{position:relative;display:inline-flex;align-items:center;gap:6px;background:none;border:0;
  cursor:pointer;font:500 13px var(--body,"Inter",system-ui,sans-serif);color:#C9D8CF;text-decoration:none;
  padding:7px 11px;border-radius:999px;white-space:nowrap;
  transition:color .18s var(--ease,cubic-bezier(.2,.7,.2,1)),background .18s var(--ease,cubic-bezier(.2,.7,.2,1));}
.navlink:hover,.navlink[aria-expanded="true"]{color:var(--surface,#F8F8F6);background:rgba(248,248,246,.08);}
.navlink[aria-current="page"]{color:var(--emerald,#14CB62);}
.navlink .caret{width:9px;height:9px;flex:none;transition:transform .22s var(--ease,cubic-bezier(.2,.7,.2,1));}
.navlink[aria-expanded="true"] .caret{transform:rotate(180deg);}
.nav-right{display:flex;align-items:center;gap:14px;flex:none;}
.nav-login{color:var(--mist,#AFC4B7);text-decoration:none;
  font:600 13px var(--body,"Inter",system-ui,sans-serif);white-space:nowrap;}
.nav-login:hover{color:var(--surface,#F8F8F6);}
.nav-cta{background:var(--emerald,#14CB62);color:var(--forest,#031303);text-decoration:none;
  font:700 13px var(--body,"Inter",system-ui,sans-serif);padding:9px 17px;border-radius:999px;
  white-space:nowrap;transition:box-shadow .18s var(--ease,cubic-bezier(.2,.7,.2,1));}
.nav-cta:hover{color:var(--forest,#031303);
  box-shadow:0 0 0 1px var(--emerald,#14CB62),0 6px 26px -6px rgba(20,203,98,.75);}

/* ---------- mega menus ---------- */
.mega{position:absolute;top:calc(100% + 10px);left:50%;pointer-events:auto;
  width:min(1080px,calc(100vw - 32px));
  background:rgba(3,19,3,.94);backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(248,248,246,.10);border-radius:24px;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.95);
  opacity:0;visibility:hidden;transform:translate(-50%,-8px);
  transition:opacity .2s var(--ease,cubic-bezier(.2,.7,.2,1)),
             transform .2s var(--ease,cubic-bezier(.2,.7,.2,1)),visibility .2s;}
.mega[data-open="true"]{opacity:1;visibility:visible;transform:translate(-50%,0);}
.mega-inner{padding:32px 32px 34px;display:grid;grid-template-columns:repeat(3,1fr);gap:34px;}
.mega.narrow{width:max-content;max-width:calc(100vw - 32px);}
.mega-inner.narrow{grid-template-columns:minmax(0,380px);padding:26px 26px 28px;}
.mega-inner.two{grid-template-columns:repeat(2,minmax(0,1fr));}
.mega-inner.two.has-feat{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 296px;}
.mega-inner.narrow.has-feat{grid-template-columns:minmax(0,380px) 296px;}
.mega-feat{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  text-decoration:none;border-radius:14px;overflow:hidden;min-height:300px;
  background:rgba(248,248,246,.05);border:1px solid rgba(248,248,246,.12);
  transition:border-color .18s var(--ease,cubic-bezier(.2,.7,.2,1)),transform .18s var(--ease,cubic-bezier(.2,.7,.2,1));}
.mega-feat:hover{border-color:rgba(20,203,98,.55);transform:translateY(-2px);}
.mf-img{position:absolute;inset:0;display:block;}
.mf-img img{width:100%;height:72%;object-fit:cover;object-position:center top;display:block;
  -webkit-mask-image:linear-gradient(180deg,#000 42%,transparent 96%);
  mask-image:linear-gradient(180deg,#000 42%,transparent 96%);}
.mf-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 0%,transparent 42%,rgba(3,19,3,.62) 100%);}
.mf-body{position:relative;display:flex;flex-direction:column;gap:9px;padding:120px 18px 18px;}
.mf-tag{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--emerald,#14CB62);}
.mf-body strong{font-family:var(--display,"Mozilla Text",sans-serif);font-weight:700;font-size:14.5px;
  letter-spacing:-.012em;line-height:1.35;color:#F8F8F6;text-wrap:pretty;}
.mf-more{font-size:12.5px;font-weight:600;color:var(--emerald,#14CB62);}
.mega-feat:hover .mf-more{text-decoration:underline;text-underline-offset:3px;}
.mega-col.more{display:none;}
.mega-col{display:flex;flex-direction:column;}
.mega-head{display:block;text-decoration:none;padding-bottom:14px;margin-bottom:14px;
  border-bottom:1px solid rgba(248,248,246,.14);}
.mega-label{font-family:var(--display,"Mozilla Text",system-ui,sans-serif);font-size:16.5px;
  font-weight:700;letter-spacing:-.02em;color:var(--surface,#F8F8F6);margin:0 0 5px;}
.mega-promise{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--emerald,#14CB62);margin:0;}
.mega-head:hover .mega-label{color:var(--emerald,#14CB62);}
.mega-links{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px;}
.mega-links.one{grid-template-columns:1fr;}
.mega-links a{display:flex;align-items:center;gap:12px;color:var(--pale,#D9E6DE);text-decoration:none;
  font-size:13.5px;font-weight:500;padding:9px 10px;margin-left:-10px;border-radius:10px;
  transition:color .16s var(--ease,cubic-bezier(.2,.7,.2,1)),background .16s var(--ease,cubic-bezier(.2,.7,.2,1));}
.mega-links a:hover{color:var(--surface,#F8F8F6);background:rgba(248,248,246,.07);}
.mega-ico{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:rgba(248,248,246,.06);border:1px solid rgba(248,248,246,.14);color:var(--emerald,#14CB62);
  transition:background .16s var(--ease,cubic-bezier(.2,.7,.2,1)),border-color .16s var(--ease,cubic-bezier(.2,.7,.2,1));}
.mega-ico svg{width:17px;height:17px;display:block;}
.mega-links a:hover .mega-ico{background:rgba(20,203,98,.16);border-color:rgba(20,203,98,.45);}
.mega-txt strong{display:block;font-weight:600;font-size:13.5px;letter-spacing:-.005em;}
.mega-txt span{display:block;font-size:12px;font-weight:400;color:var(--mist,#AFC4B7);margin-top:3px;}
.mega-col.wide .mega-links{grid-template-columns:1fr;}
/* full-width row beneath the workspace columns */
.mega-wide{grid-column:1 / -1;display:flex;align-items:center;gap:12px;
  color:var(--pale,#D9E6DE);text-decoration:none;padding:14px 16px;
  border-radius:12px;background:rgba(248,248,246,.04);
  border:1px solid rgba(248,248,246,.10);
  transition:color .16s var(--ease,cubic-bezier(.2,.7,.2,1)),background .16s var(--ease,cubic-bezier(.2,.7,.2,1)),border-color .16s var(--ease,cubic-bezier(.2,.7,.2,1));}
.mega-wide:hover{color:var(--surface,#F8F8F6);background:rgba(248,248,246,.08);
  border-color:rgba(20,203,98,.34);}
.mega-wide:hover .mega-ico{background:rgba(20,203,98,.16);border-color:rgba(20,203,98,.45);}
.mega-blurb{display:flex;flex-direction:column;gap:12px;text-decoration:none;
  font-size:13.5px;line-height:1.6;color:var(--mist,#AFC4B7);text-wrap:pretty;}
.mega-blurb em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--emerald,#14CB62);}
.mega-blurb:hover{color:var(--surface,#F8F8F6);}
.mega-blurb:hover em{text-decoration:underline;text-underline-offset:3px;}
.nav .brand{padding:0 14px;position:relative;height:28px;width:128px;transition:width .45s var(--ease,cubic-bezier(.2,.7,.2,1)),padding .45s var(--ease,cubic-bezier(.2,.7,.2,1));}
.nav .brand img{position:absolute;left:14px;top:50%;transform:translateY(-50%);transition:opacity .3s var(--ease,cubic-bezier(.2,.7,.2,1));}
.nav .brand .bm-full{height:26px;opacity:1;}
.nav .brand .bm-mark{height:24px;opacity:0;}
.nav.is-stuck .brand{width:24px;padding:0;}
.nav.is-stuck .brand img{left:0;}
.nav.is-stuck .brand .bm-full{opacity:0;}
.nav.is-stuck .brand .bm-mark{opacity:1;}
.mega-scrim{position:fixed;inset:0;z-index:55;background:rgba(3,19,3,.4);opacity:0;visibility:hidden;
  transition:opacity .2s var(--ease,cubic-bezier(.2,.7,.2,1)),visibility .2s;}
.mega-scrim[data-open="true"]{opacity:1;visibility:visible;}

@media (max-width:1080px){
  .navlinks{display:none;}
  .navmenu{display:inline-flex;}
  .mega-inner{grid-template-columns:1fr 1fr;}
  .mega-inner.narrow{grid-template-columns:1fr;}
  .mega-inner.narrow.has-feat{grid-template-columns:1fr 1fr;}
  .mega-inner.two{grid-template-columns:1fr;}
  .mega-inner.two.has-feat{grid-template-columns:1fr 1fr;}
  .mega-feat{grid-column:1 / -1;min-height:240px;}
  .mf-body{padding-top:96px;}
  .mega-col.more{display:flex;}
}
@media (max-width:720px){
  .nav-login{display:none;}
  .mega-inner{grid-template-columns:1fr;gap:24px;max-height:70vh;overflow-y:auto;}
  .mega-links{grid-template-columns:1fr 1fr;}
  .mega-inner.two.has-feat,.mega-inner.narrow.has-feat{grid-template-columns:1fr;}
  .mega-feat{min-height:250px;}
}

/* ---------- global footer ---------- */
/* ---------- footer ---------- */
.foot{background:var(--forest,#031303);color:var(--mist,#AFC4B7);border-top:1px solid rgba(248,248,246,.14);}
.foot-in{max-width:var(--wrap,1120px);margin:0 auto;padding:64px 28px 40px;}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:34px;}
.foot-brand img{height:26px;width:auto;display:block;margin:0 0 18px;}
.foot-tag{font-size:14px;line-height:1.6;color:var(--mist,#AFC4B7);margin:0;max-width:34ch;}
.foot h4{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--surface,#F8F8F6);margin:0 0 16px;}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.foot ul a{color:var(--mist,#AFC4B7);text-decoration:none;font-size:13.5px;transition:color .16s var(--ease,cubic-bezier(.2,.7,.2,1));}
.foot ul a:hover{color:var(--emerald,#14CB62);}
.foot-base{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;
  margin:44px 0 0;padding-top:20px;border-top:1px solid rgba(248,248,246,.08);}
.foot-base p{font-size:12px;color:var(--slate-2,#8A928C);margin:0;}
.foot-base .strap{font-family:var(--display,"Mozilla Text",system-ui,sans-serif);font-weight:700;color:var(--surface,#F8F8F6);letter-spacing:-.015em;
  font-size:13px;}
.foot-fine{font-size:10.5px;line-height:1.7;color:var(--slate-2,#8A928C);margin:20px 0 0;max-width:88ch;}
@media (max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px;}
  .foot-brand{grid-column:1/-1;}
}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr;}}

/* ---------- language toggle ---------- */
.lang{position:relative;}
.lang-btn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:rgba(248,248,246,.07);border:1px solid rgba(248,248,246,.14);border-radius:999px;
  padding:6px 11px 6px 7px;color:var(--surface,#F8F8F6);
  font:600 12.5px var(--body,"Inter",system-ui,sans-serif);
  transition:background .16s var(--ease,cubic-bezier(.2,.7,.2,1));}
.lang-btn:hover{background:rgba(248,248,246,.13);}
.lang-btn .caret{width:9px;height:9px;flex:none;opacity:.7;
  transition:transform .22s var(--ease,cubic-bezier(.2,.7,.2,1));}
.lang-btn[aria-expanded="true"] .caret{transform:rotate(180deg);}
.flag{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:15px;line-height:1;overflow:hidden;background:rgba(248,248,246,.12);
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;}
.lang-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:172px;padding:6px;
  background:rgba(3,19,3,.96);backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(248,248,246,.12);border-radius:14px;
  box-shadow:0 26px 50px -26px rgba(0,0,0,.95);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s var(--ease,cubic-bezier(.2,.7,.2,1)),
    transform .18s var(--ease,cubic-bezier(.2,.7,.2,1)),visibility .18s;}
.lang-menu[data-open="true"]{opacity:1;visibility:visible;transform:none;}
.lang-menu button{display:flex;align-items:center;gap:10px;width:100%;cursor:pointer;
  background:none;border:0;border-radius:9px;padding:9px 10px;text-align:left;
  color:var(--pale,#D9E6DE);font:500 13px var(--body,"Inter",system-ui,sans-serif);
  transition:background .14s var(--ease,cubic-bezier(.2,.7,.2,1)),color .14s var(--ease,cubic-bezier(.2,.7,.2,1));}
.lang-menu button:hover{background:rgba(248,248,246,.08);color:var(--surface,#F8F8F6);}
.lang-menu button[aria-checked="true"]{color:var(--emerald,#14CB62);}
@media (max-width:720px){.lang-code{display:none;}}

/* "Works with Powernaut" mark, right-aligned in the partner ecosystem menu row */
.mega-badge{height:30px;width:auto;display:block;margin-left:auto;flex:none;align-self:center;}

/* company-type tags under the who-we-serve columns */
.mega-tags{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 4px;}
.mega-tags span{font-size:10.5px;font-weight:600;letter-spacing:.02em;
  color:rgba(248,248,246,.72);background:rgba(248,248,246,.06);
  border:1px solid rgba(248,248,246,.12);border-radius:999px;padding:4px 10px;}

/* icon above each mega menu column heading */
.mega-head-ico{display:block;margin:0 0 14px;}
.mega-head-ico .mega-ico{width:40px;height:40px;border-radius:12px;}
.mega-head-ico .mega-ico svg{width:20px;height:20px;}
.mega-head:hover .mega-ico{background:rgba(20,203,98,.16);border-color:rgba(20,203,98,.45);}

/* Workspace and Who we serve: each column highlights as one tile on hover, like the Resources items */
.mega-col:has(> .mega-blurb){padding:16px 16px 18px;margin:-16px -16px -18px;border-radius:16px;
  transition:background .16s var(--ease,cubic-bezier(.2,.7,.2,1)),box-shadow .16s var(--ease,cubic-bezier(.2,.7,.2,1));}
.mega-col:has(> .mega-blurb):hover{background:rgba(255,255,255,.55);box-shadow:0 1px 0 rgba(255,255,255,.6) inset;}
.mega-col:has(> .mega-blurb):hover .mega-label{color:var(--ink,#0A0A0A);}
.mega-col:has(> .mega-blurb):hover .mega-blurb{color:var(--ink,#0A0A0A);}
.mega-col:has(> .mega-blurb):hover .mega-ico{background:#fff;border-color:rgba(20,203,98,.5);}

/* circular flat flags in the language switch */
.flag{display:inline-grid;place-items:center;width:18px;height:18px;flex:none;line-height:0;font-size:0;}
.flag svg{width:18px;height:18px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.08);}

.andmore{display:block;margin:14px 0 0;text-align:center;font-size:13.5px;font-weight:500;color:#5A645E;}
.eco .andmore,.on-deep .andmore,.dark .andmore{color:rgba(255,255,255,.72);}

/* no outline on menu icons when hovered */
.mega-links a:hover .mega-ico,.mega-wide:hover .mega-ico,.mega-head:hover .mega-ico,.mega-col:has(> .mega-blurb):hover .mega-ico{border-color:transparent !important;}