/* ============================================================
   components.css — reusable chrome shared across pages:
   navigation, footer, stat bar, division detail drawer.
   ============================================================ */

/* ---------- NAV / HEADER ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:200;transition:background .3s,box-shadow .3s,border-color .3s;border-bottom:1px solid transparent}
nav.solid{background:rgba(10,20,48,.85);backdrop-filter:blur(14px);border-bottom-color:var(--line-soft)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:76px;max-width:var(--maxw);margin:0 auto;padding:0 32px}
.brand{display:inline-flex;align-items:center;line-height:1}
.brand-logo{height:45px;width:auto;display:block}
.nav-links{display:flex;gap:34px;align-items:center}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--muted);transition:color .25s}
.nav-links a:hover{color:#fff}
.nav-links .btn{padding:11px 20px;font-size:14px}
.nav-toggle{display:none;background:none;border:none;color:#fff;font-size:24px;cursor:pointer}

/* ---------- STAT BAR ---------- */
.stats{padding:0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:var(--navy-2)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:46px 26px;border-right:1px solid var(--line-soft);position:relative}
.stat::before{content:"▲";position:absolute;top:24px;left:26px;color:var(--crimson);font-size:9px;opacity:.7}
.stat:last-child{border-right:none}
.stat .fig{font-family:'Space Grotesk';font-weight:700;font-size:clamp(38px,4.6vw,60px);letter-spacing:-.03em;line-height:1}
.stat .fig .suf{color:var(--crimson)}
.stat .lab{margin-top:12px;font-size:13.5px;color:var(--muted)}

/* ---------- FOOTER ---------- */
footer{padding:70px 0 36px;border-top:1px solid var(--line-soft)}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid var(--line-soft)}
.foot-brand .brand-logo{height:50px}
.foot-brand p{font-size:14px;color:var(--muted);max-width:32ch;margin-top:16px}
.foot-col h5{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-light);margin-bottom:16px}
.foot-col a{display:block;font-size:14px;color:var(--muted);margin-bottom:11px;transition:color .25s}
.foot-col a:hover{color:#fff}
.foot-bot{padding-top:26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--muted-2)}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .nav-links{position:fixed;inset:76px 0 auto 0;flex-direction:column;background:var(--navy-2);padding:24px 32px;gap:18px;transform:translateY(-130%);transition:transform .35s var(--ease);border-bottom:1px solid var(--line)}
  .nav-links.show{transform:none}
  .nav-toggle{display:block}
  .stats .wrap{grid-template-columns:1fr 1fr}
  .stat:nth-child(2){border-right:none}
  .foot-top{grid-template-columns:1fr 1fr}
}