/* Shared "site chrome" -- the top nav bar, the side-nav overlay, and the
   footer -- identical across all 4 marketing pages (index.html,
   services/benefits/about). Depends on the CSS custom properties each page
   already defines in its own :root block (--bone-white, --press-black,
   --green, etc.) -- those stay per-page since the page-specific styles need
   them too, only the rules that reference them for this shared chrome live
   here. Paired with site-chrome.js, which builds the side-nav panel and
   injects the footer markup at runtime. */

/* ---------- Top nav bar ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;padding:32px 40px;position:sticky;top:0;background:var(--bone-white);z-index:30;}
.nav-word{font-weight:800;font-size:19px;letter-spacing:-.01em;}
.nav-word .u{position:relative;}
.nav-word .u::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--green);}
.nav-right{display:flex;align-items:center;gap:24px;}
.nav-login{position:relative;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding-bottom:2px;}
.nav-login::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--green);transition:width .3s ease;}
.nav-login:hover::after{width:100%;}
.nav-menu{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;background:none;border:none;color:var(--ink);padding:0;}
/* The "equalizer" hover effect: three bars at fixed staggered resting
   offsets: the bounce keyframes are identical for all three, so the
   staggered look while hovering comes purely from each bar running a
   different animation-duration, not different amplitudes. */
.bars{display:flex;align-items:flex-end;gap:3px;height:20px;}
.bars span{width:3px;height:14px;background:var(--green);display:block;transform-origin:center bottom;}
.bars span:nth-child(1){transform:translateY(2px);}
.bars span:nth-child(2){transform:translateY(-3px);}
.bars span:nth-child(3){transform:translateY(1px);}
.nav-menu:hover .bars span{animation:eq-bounce ease-in-out infinite;}
.nav-menu:hover .bars span:nth-child(1){animation-duration:1s;}
.nav-menu:hover .bars span:nth-child(2){animation-duration:1.5s;}
.nav-menu:hover .bars span:nth-child(3){animation-duration:2s;}
@keyframes eq-bounce{0%{transform:translateY(0);}50%{transform:translateY(9px);}100%{transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){
  .nav-menu:hover .bars span{animation:none;}
}

/* ---------- Side-nav overlay ---------- */
.side-nav{position:fixed;inset:0;z-index:60;pointer-events:none;}
/* Dims the page behind rather than blacking it out entirely -- opacity
   stays well under 1 so the actual page content is still visible through
   it, on both the scrim itself and the gap the panel leaves uncovered. */
.side-nav-scrim{position:absolute;inset:0;background:var(--press-black);opacity:0;transition:opacity .5s ease;}
.side-nav.open{pointer-events:auto;}
.side-nav.open .side-nav-scrim{opacity:.55;}
.side-nav-panel{
  position:absolute;top:0;right:0;height:100%;width:min(520px,calc(100% - 64px));background:var(--press-black);color:var(--bone-white);
  padding:32px 40px;display:flex;flex-direction:column;gap:40px;transform:translateX(100%);transition:transform .5s cubic-bezier(.65,0,.35,1);overflow:hidden;
}
.side-nav.open .side-nav-panel{transform:translateX(0);}
.side-nav-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2;}
.side-nav-close{display:flex;align-items:center;gap:8px;background:none;border:none;color:var(--bone-white);cursor:pointer;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.side-nav-close .x{color:var(--green);font-size:16px;}
.side-nav-links{flex:1;display:flex;flex-direction:column;justify-content:center;gap:6px;position:relative;z-index:2;overflow-y:auto;}
.side-nav-links a{font-weight:500;font-size:clamp(38px,7vw,64px);letter-spacing:-.02em;text-decoration:none;color:var(--bone-white);line-height:1.15;transition:color .2s ease;}
.side-nav-links a:hover{font-weight:800;}
.side-nav-links a.current{color:var(--green);}

/* ---------- Footer ---------- */
.accent-band{background:var(--green);min-height:200px;display:flex;align-items:flex-start;padding:32px 40px;margin-top:40px;}
.accent-band .mark{font-family:var(--font-display-heavy);font-weight:900;font-size:44px;color:#fff;}
.footer{background:var(--press-black);padding:70px 40px 30px;font-size:14px;color:var(--muted-sage);}
.footer a{text-decoration:none;color:var(--muted-sage);}
.footer-top{display:flex;flex-wrap:wrap;gap:60px;padding-bottom:50px;border-bottom:1px solid #33392f;}
.footer-brand{flex:2;min-width:240px;}
.footer-tagline{margin:16px 0 0;max-width:320px;line-height:1.6;color:var(--muted-sage);font-size:14px;}
.footer-col{flex:1;min-width:160px;display:flex;flex-direction:column;gap:12px;}
.footer-col-head{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-white);margin:0 0 4px;}
.footer-col a{color:var(--muted-sage);font-size:14px;transition:color .2s ease;}
.footer-col a:hover{color:var(--green);}
.footer-addr{margin:4px 0 0;font-size:13px;}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:24px;font-size:13px;color:var(--newsprint-gray);}
.footer-legal{display:flex;gap:20px;}
.footer-legal a{color:var(--newsprint-gray);}
.footer-legal a:hover{color:var(--green);}
.footer-col-subscribe{flex:1.4;min-width:220px;}
.footer-subscribe-label{margin:0;color:var(--muted-sage);font-size:14px;}
.footer-subscribe-wrap{position:relative;margin:2px 0 0;}
.footer-subscribe{display:flex;gap:10px;}
.footer-subscribe input[type="email"]{
  flex:1;min-width:0;background:transparent;border:none;border-bottom:1px solid #33392f;
  color:var(--bone-white);font-family:var(--font-grotesk);font-size:14px;padding:8px 0;outline:none;transition:border-color .2s ease;
}
.footer-subscribe input[type="email"]::placeholder{color:var(--shadow-moss);}
.footer-subscribe input[type="email"]:focus{border-bottom-color:var(--green);}
.footer-subscribe button{
  flex-shrink:0;width:34px;height:34px;background:var(--green);color:#000;border:none;border-radius:5px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;transition:transform .15s ease,opacity .2s ease;
}
.footer-subscribe button:hover{transform:translateX(2px);}
.footer-subscribe button:disabled{opacity:.6;cursor:default;transform:none;}
.footer-subscribe-msg{font-size:13px;margin:2px 0 0;min-height:16px;}
.footer-subscribe-msg.success{color:var(--green);}
.footer-subscribe-msg.error{color:#ff8a80;}
.footer-subscribe-success{
  position:absolute;inset:0;display:flex;align-items:center;
  background:var(--press-black);color:var(--green);font-size:14px;font-weight:600;line-height:1.4;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.footer-subscribe-success.show{opacity:1;pointer-events:auto;}