/* ==========================================================================
   NODEFORGE — universal header + footer  (single source of truth)
   Loaded LAST on every page; !important guarantees it wins over legacy
   per-page CSS so the header & footer look and behave identically sitewide.
   Edit here once → every page updates.
   ========================================================================== */
:root{
  --nf-green:#103D2E; --nf-green-2:#0C3123; --nf-green-3:#17553F; --nf-line:#2C5C48;
  --nf-lime:#C7F04A; --nf-lime-2:#D6F56E;
  --nf-cream:#ECE8D9; --nf-cream-2:#E3DECB; --nf-cream-line:#D6D0BA;
  --nf-ink:#0C2A20; --nf-text:#ECE9DB; --nf-muted:#9DB3A7; --nf-muted-ink:#586B60;
  --nf-shadow:0 22px 50px -24px rgba(4,22,16,.8);
  --nf-navh:70px;
}

/* ---------- HEADER / NAV ---------- */
nav{position:sticky!important;top:0!important;z-index:900!important;
  background:rgba(16,61,46,.92)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1.5px solid var(--nf-line)!important;font-family:'Inter',system-ui,sans-serif!important}
nav *{box-sizing:border-box}
.nav-inner{position:relative!important;z-index:3!important;display:flex!important;align-items:center!important;
  justify-content:space-between!important;gap:16px!important;height:var(--nf-navh)!important;
  max-width:1200px!important;margin:0 auto!important;padding:0 clamp(16px,4vw,28px)!important}
.logo{font-family:'Fraunces',Georgia,serif!important;font-weight:600!important;font-size:clamp(15px,1.65vw,22px)!important;
  letter-spacing:-.01em!important;color:var(--nf-text)!important;text-decoration:none!important;
  display:inline-flex!important;align-items:center!important;gap:10px!important;flex:0 0 auto!important;white-space:nowrap!important}
.logo .dot{width:12px!important;height:12px!important;border-radius:50%!important;background:var(--nf-lime)!important;
  box-shadow:none!important;animation:none!important;transition:transform .3s!important}
.logo:hover .dot{transform:scale(1.25)!important}
.brand-logo{display:block!important;width:auto!important;height:52px!important;max-width:252px!important;object-fit:contain!important;filter:drop-shadow(0 8px 18px rgba(4,22,16,.34)) saturate(1.08)!important}

.nav-links{display:flex!important;align-items:center!important;gap:clamp(14px,1.7vw,26px)!important;
  margin-left:auto!important;list-style:none!important}
.nav-links>a,.has-mega>span{color:var(--nf-text)!important;text-decoration:none!important;font-size:14.5px!important;
  font-weight:500!important;line-height:1!important;cursor:pointer!important;display:inline-flex!important;
  align-items:center!important;gap:5px!important;opacity:.86;white-space:nowrap!important;
  transition:opacity .16s,color .16s!important;background:transparent!important;border:0!important}
.nav-links>a:hover,.has-mega:hover>span{opacity:1;color:var(--nf-lime)!important}
.nav-links a.nav-cta{background:var(--nf-lime)!important;color:var(--nf-ink)!important;padding:11px 20px!important;
  border-radius:100px!important;font-weight:600!important;opacity:1!important;box-shadow:none!important;
  border:0!important;transition:background .16s,transform .16s!important}
.nav-links a.nav-cta:hover{background:var(--nf-lime-2)!important;color:var(--nf-ink)!important;transform:translateY(-1px)!important}

/* social rail (universal, all pages) */
.social-rail{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:80;display:flex;flex-direction:column;gap:8px}
.social-rail a{width:44px;height:44px;display:flex;align-items:center;justify-content:center;text-decoration:none;background:var(--nf-green-3);border:1.5px solid var(--nf-line);border-radius:50%;transition:background .16s,transform .16s}
.social-rail img{width:18px;height:18px;display:block;filter:brightness(0) invert(1)}
.social-rail a:hover{background:var(--nf-lime);transform:translateY(-2px)}
.social-rail a:hover img{filter:none}
.social-rail a:focus-visible{outline:3px solid var(--nf-lime);outline-offset:3px}
@media(max-width:560px){
  .brand-logo{height:42px!important;max-width:198px!important}
  .social-rail{top:auto;right:50%;bottom:12px;transform:translateX(50%);flex-direction:row;gap:8px}
  .social-rail a{width:38px;height:38px}
  .social-rail img{width:16px;height:16px}
}
@media print{.social-rail{display:none}}

/* mega dropdowns */
.has-mega{position:static!important}
.has-mega>span{user-select:none}
.mega{position:absolute!important;left:0!important;right:0!important;top:var(--nf-navh)!important;
  background:var(--nf-cream)!important;color:var(--nf-ink)!important;border:0!important;
  border-bottom:1.5px solid var(--nf-cream-line)!important;box-shadow:var(--nf-shadow)!important;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s;
  padding:24px 0 26px!important;max-height:calc(100vh - var(--nf-navh) - 12px)!important;overflow-y:auto!important;overscroll-behavior:contain}
.mega::-webkit-scrollbar{width:10px}
.mega::-webkit-scrollbar-thumb{background:var(--nf-cream-line);border-radius:8px;border:3px solid var(--nf-cream)}
.mega{scrollbar-width:thin;scrollbar-color:var(--nf-cream-line) var(--nf-cream)}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega-grid{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:12px 22px!important;
  align-content:start!important;max-width:1200px!important;margin:0 auto!important;padding:0 clamp(16px,4vw,28px)!important}
.mega-col{min-width:0}
.mega-col .mega-title{font-family:'Inter',sans-serif!important;font-size:11px!important;letter-spacing:.1em!important;
  text-transform:uppercase!important;color:var(--nf-muted-ink)!important;margin:0 0 8px!important;
  font-weight:600!important;padding-bottom:8px!important;border-bottom:1.5px solid var(--nf-cream-line)!important}
.mega-col a{display:block!important;color:var(--nf-ink)!important;text-decoration:none!important;font-size:13px!important;
  line-height:1.3!important;padding:3px 0!important;opacity:.82;transition:opacity .14s,transform .14s!important}
.mega-col a:hover{opacity:1;transform:translateX(3px);color:var(--nf-ink)!important}
.mega-col a.mega-all{margin-top:8px!important;padding-top:8px!important;border-top:1px solid var(--nf-cream-line)!important;
  font-weight:600!important;font-size:12.5px!important;color:#1c6b45!important;opacity:1!important}
.mega-col a.mega-all:hover{color:var(--nf-ink)!important;transform:translateX(3px)}

/* hamburger button */
.menu-btn{display:none;position:relative;width:46px;height:46px;flex:0 0 auto;padding:0;cursor:pointer;
  border:1.5px solid var(--nf-line)!important;border-radius:12px!important;background:var(--nf-green-3)!important;
  color:var(--nf-text)!important;font-size:0!important;box-shadow:none!important}
.menu-btn .bars,.menu-btn .bars::before,.menu-btn .bars::after{position:absolute;left:50%;top:50%;
  width:20px;height:2px;background:var(--nf-text);border-radius:2px;transition:transform .25s ease,background .15s ease}
.menu-btn .bars{transform:translate(-50%,-50%)}
.menu-btn .bars::before{content:"";transform:translate(-50%,-7px)}
.menu-btn .bars::after{content:"";transform:translate(-50%,5px)}
.menu-btn[aria-expanded="true"] .bars{background:transparent}
.menu-btn[aria-expanded="true"] .bars::before{transform:translate(-50%,0) rotate(45deg)}
.menu-btn[aria-expanded="true"] .bars::after{transform:translate(-50%,0) rotate(-45deg)}

/* backdrop (mobile) */
.nav-backdrop{display:none}

/* focus visibility */
.nav-links a:focus-visible,.has-mega>span:focus-visible,.menu-btn:focus-visible,.logo:focus-visible,
.nav-cta:focus-visible,.foot-col a:focus-visible,.foot-bottom a:focus-visible{
  outline:3px solid var(--nf-lime)!important;outline-offset:3px!important;border-radius:6px}

/* ---------- MOBILE DRAWER (<=1100px) ---------- */
@media(max-width:1100px){
  /* CRITICAL: backdrop-filter on nav makes it the containing block for
     position:fixed children, which traps the drawer inside the 70px bar.
     On mobile we drop the blur and use a solid background instead. */
  nav{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--nf-green)!important}
  .menu-btn{display:inline-flex!important;align-items:center;justify-content:center}
  .nav-links{position:fixed!important;top:var(--nf-navh)!important;right:0!important;bottom:0!important;left:auto!important;
    width:min(400px,88vw)!important;margin:0!important;flex-direction:column!important;align-items:stretch!important;
    gap:2px!important;background:var(--nf-green)!important;border-left:1.5px solid var(--nf-line)!important;
    padding:16px 14px calc(30px + env(safe-area-inset-bottom))!important;overflow-y:auto!important;
    overscroll-behavior:contain;z-index:2!important;transform:translateX(102%);visibility:hidden;
    box-shadow:-30px 0 60px rgba(0,0,0,.4)!important;transition:transform .32s cubic-bezier(.4,0,.2,1),visibility .32s!important}
  .nav-links.open{transform:none!important;visibility:visible!important}
  .nav-links>a,.has-mega>span{font-size:16px!important;min-height:52px;padding:14px!important;border-radius:12px!important;
    opacity:1;justify-content:space-between!important;width:100%;
    border-bottom:1px solid rgba(236,233,219,.07)!important;border-radius:0!important}
  .nav-links>a:active,.has-mega>span:active,.has-mega.open>span{background:rgba(236,233,219,.06)!important}
  .has-mega.open>span{color:var(--nf-lime)!important}
  .nav-links a.nav-cta{position:sticky;bottom:-1px;margin-top:14px!important;justify-content:center!important;
    padding:16px!important;font-size:16px!important;min-height:54px;border-radius:100px!important;
    border-bottom:0!important;box-shadow:0 -14px 24px -10px rgba(6,20,15,.85)!important}
  .has-mega{position:relative!important;width:100%}
  .has-mega>span::after{content:"›"!important;font-size:22px;line-height:1;opacity:.7;transition:transform .22s}
  .has-mega.open>span::after{transform:rotate(90deg);opacity:1}
  .mega{position:static!important;display:none!important;opacity:1!important;visibility:visible!important;transform:none!important;
    box-shadow:none!important;border:0!important;background:rgba(6,20,15,.28)!important;border-radius:0 0 14px 14px!important;
    padding:2px 6px 10px!important;max-height:none!important;overflow:visible!important}
  .has-mega.open .mega{display:block!important;animation:nfSlideIn .26s ease}
  .mega-grid{grid-template-columns:1fr!important;gap:0!important;padding:0!important}
  /* level-2 accordions: tap a category to reveal only its links */
  .mega-col{padding:0!important;border-bottom:1px solid rgba(236,233,219,.06)}
  .mega-col:last-child{border-bottom:0}
  .mega-col .mega-title{display:flex!important;align-items:center!important;justify-content:space-between!important;
    cursor:pointer;min-height:50px;margin:0!important;padding:12px 10px!important;border:0!important;
    color:var(--nf-text)!important;font-size:13px!important;letter-spacing:.08em!important;user-select:none}
  .mega-col .mega-title::after{content:"+";font-family:Inter,sans-serif;font-size:20px;font-weight:400;
    color:var(--nf-lime);line-height:1;transition:transform .22s}
  .mega-col.open .mega-title::after{transform:rotate(45deg)}
  .mega-col.open .mega-title{color:var(--nf-lime)!important}
  .mega-col a{display:none!important;color:var(--nf-text)!important;opacity:.8;font-size:15px!important;
    min-height:46px;padding:11px 10px 11px 18px!important;border-radius:10px!important;align-items:center}
  .mega-col.open a{display:flex!important;animation:nfSlideIn .22s ease}
  .mega-col a:active{background:rgba(236,233,219,.07)!important;opacity:1}
  .mega-col a:hover{color:var(--nf-text)!important;transform:none}
  .mega-col a.mega-all{color:var(--nf-lime)!important;border-top:1px solid rgba(236,233,219,.1)!important;
    margin-top:2px!important;opacity:1;font-weight:600!important}
  @keyframes nfSlideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

  .nav-backdrop{display:block!important;position:fixed!important;inset:0!important;z-index:1!important;
    background:rgba(6,20,15,.55)!important;opacity:0;visibility:hidden;transition:opacity .32s,visibility .32s;
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  nav:has(.nav-links.open) .nav-backdrop,nav.nf-open .nav-backdrop{opacity:1;visibility:visible}
  html:has(.nav-links.open),html.nav-locked{overflow:hidden!important}
}

/* ---------- FOOTER ---------- */
footer{background:var(--nf-green-2)!important;border-top:1.5px solid var(--nf-line)!important;
  padding:60px 0 28px!important;color:var(--nf-text)!important;font-family:'Inter',system-ui,sans-serif!important}
footer .wrap{max-width:1200px!important;margin:0 auto!important;padding:0 clamp(16px,4vw,28px)!important}

.foot-top{display:grid!important;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr!important;
  gap:clamp(24px,3.6vw,40px)!important;padding-bottom:44px!important;
  border-bottom:1.5px solid var(--nf-line)!important;margin-bottom:26px!important}
.foot-brand .logo{margin-bottom:14px!important}
.foot-brand p{color:var(--nf-muted)!important;font-size:14px!important;max-width:280px!important;
  line-height:1.65!important;margin-bottom:20px!important}
.foot-social{display:flex!important;gap:10px!important}
.foot-social a{width:36px!important;height:36px!important;display:flex!important;align-items:center!important;
  justify-content:center!important;background:var(--nf-green-3)!important;border:1.5px solid var(--nf-line)!important;
  border-radius:50%!important;transition:background .16s,border-color .16s,transform .16s!important}
.foot-social a:hover{background:var(--nf-lime)!important;border-color:var(--nf-lime)!important;transform:translateY(-2px)!important}
.foot-social img{width:15px!important;height:15px!important;filter:brightness(0) invert(1)!important}
.foot-social a:hover img{filter:none!important}

.foot-col .foot-title{font-family:'Inter',sans-serif!important;font-size:11px!important;letter-spacing:.1em!important;
  text-transform:uppercase!important;color:var(--nf-lime)!important;margin:0 0 16px!important;font-weight:600!important}
.foot-col a{display:block!important;color:var(--nf-muted)!important;text-decoration:none!important;font-size:14px!important;
  padding:6px 0!important;transition:color .14s,transform .14s!important}
.foot-col a:hover{color:var(--nf-text)!important;transform:translateX(3px)!important}
.foot-col a.foot-all{color:var(--nf-lime)!important;font-weight:600!important;margin-top:2px!important}

.foot-bottom{display:flex!important;align-items:center!important;justify-content:space-between!important;
  flex-wrap:wrap!important;gap:14px!important;color:var(--nf-muted)!important;font-size:13px!important}
.foot-bottom .legal{display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important}
.foot-bottom a{color:var(--nf-muted)!important;text-decoration:none!important}
.foot-bottom a:hover{color:var(--nf-text)!important}
.foot-top-link{display:inline-flex!important;align-items:center!important;gap:8px!important;
  color:var(--nf-text)!important;text-decoration:none!important;font-weight:600!important;font-size:13px!important;
  padding:9px 16px!important;border:1.5px solid var(--nf-line)!important;border-radius:100px!important;
  transition:border-color .16s,color .16s,transform .16s!important}
.foot-top-link:hover{border-color:var(--nf-lime)!important;color:var(--nf-lime)!important;transform:translateY(-2px)!important}
.foot-top-link svg{width:12px!important;height:12px!important}

@media(max-width:1000px){
  .foot-top{grid-template-columns:1fr 1fr 1fr!important}
  .foot-brand{grid-column:1/-1!important;padding-bottom:8px!important}
  .foot-brand p{max-width:440px!important}
}
@media(max-width:640px){
  .foot-top{grid-template-columns:1fr 1fr!important;row-gap:32px!important}
}
@media(max-width:480px){
  .foot-top{grid-template-columns:1fr!important;row-gap:30px!important;text-align:left!important}
  .foot-bottom{flex-direction:column!important;align-items:flex-start!important}
  .foot-bottom .legal{width:100%!important;justify-content:space-between!important}
}

@media(prefers-reduced-motion:reduce){
  nav *,.nav-links,.mega,.menu-btn .bars,.menu-btn .bars::before,.menu-btn .bars::after,.nav-backdrop{
    transition:none!important;animation:none!important}
}