/* ============================================================
   NextGen Controller Solutions — Shared Header & Footer
   SINGLE SOURCE OF TRUTH for site chrome.
   Brand system (final): Montserrat only.
   Navy #001B5A · Silver #C0C6D0 · Blue #2563EB · White · Light Gray #F2F4F7
   ============================================================ */
:root{
  --navy:#001B5A;
  --navy-deep:#001340;
  --blue:#2563EB;
  --blue-dark:#1d4fd0;
  --silver:#C0C6D0;
  --gray-light:#F2F4F7;
  --white:#ffffff;
  --ink:#0f1b34;
  --muted:#5b6b88;
  --hair:rgba(192,198,208,.18);
  --hair-2:rgba(192,198,208,.12);
  --font:'Montserrat',system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}

/* Universal base type — Montserrat is the one and only face, on EVERY page.
   Pages that don't load the legacy styles.css (the Website 2.0 pages) were falling
   back to the browser serif (Times New Roman) for any text without an explicit
   font rule. This guarantees the brand face + base ink color site-wide. */
body{margin:0;font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* Form controls don't inherit font-family by default (UA sets Arial) — force the brand face. */
button,input,select,textarea{font-family:inherit}

/* ---------- Header ---------- */
.ng-header{position:fixed;top:0;left:0;right:0;width:100%;z-index:200;background:var(--navy);border-bottom:1px solid transparent;transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
.ng-header.ng-scrolled{background:rgba(0,27,90,.92);backdrop-filter:blur(14px);border-bottom-color:var(--hair-2);box-shadow:0 8px 30px -16px rgba(0,0,0,.55)}
.ng-nav{max-width:1200px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;height:84px;gap:32px}

.ng-brand{display:flex;align-items:center;text-decoration:none}
.ng-brand img{height:46px;width:auto;display:block;object-fit:contain}

.ng-links{display:flex;align-items:center;gap:34px;justify-content:center;margin:0;padding:0}
.ng-links>a,.ng-item>button,.ng-portal{font-family:var(--font);text-transform:uppercase;letter-spacing:.08em;font-weight:500;font-size:.76rem;line-height:1;white-space:nowrap;color:var(--silver);transition:color .2s ease;background:none;border:0;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;text-decoration:none;height:84px}
.ng-links>a:hover,.ng-item:hover>button,.ng-portal:hover{color:#fff;font-weight:600}
.ng-links>a.active,.ng-item.active>button,.ng-portal.active{color:#fff;font-weight:600}
.ng-item{position:relative;display:inline-flex;align-items:center;height:84px}
.ng-item>button .chev{width:9px;height:9px;transition:transform .25s ease}
.ng-item:hover>button .chev,.ng-item.open-sub>button .chev{transform:rotate(180deg)}

.ng-dropdown{position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%) translateY(6px);min-width:300px;background:rgba(0,27,90,.98);backdrop-filter:blur(18px);border:1px solid var(--hair);border-radius:14px;padding:10px;opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s ease;box-shadow:0 30px 70px -24px rgba(0,0,0,.7)}
.ng-item:hover .ng-dropdown,.ng-item:focus-within .ng-dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.ng-dropdown::before{content:"";position:absolute;top:-7px;left:0;right:0;height:7px}
.ng-dropdown::after{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);width:12px;height:12px;background:rgba(0,27,90,.98);border-left:1px solid var(--hair);border-top:1px solid var(--hair);border-radius:2px 0 0 0}
.ng-dropdown a{display:block;padding:11px 14px;border-radius:9px;font-family:var(--font);text-transform:none;letter-spacing:0;font-size:.92rem;font-weight:500;color:#d7e0f2;transition:background .18s ease,color .18s ease;text-decoration:none}
.ng-dropdown a:hover{background:rgba(37,99,235,.14);color:#fff}


/* Header CTA = the SAME solid brand-blue as every body Assessment button (never transparent),
   just a shorter label ("Start Assessment") and a nav-compact size. One consistent CTA color. */
.ng-cta{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;justify-self:end;font-family:var(--font);font-weight:600;font-size:.8rem;letter-spacing:.01em;padding:.58rem 1.15rem;border-radius:7px;background:var(--blue);border:1px solid var(--blue);color:#fff;box-shadow:0 6px 18px -6px rgba(37,99,235,.55);transition:background .22s ease,box-shadow .22s ease,transform .22s ease;text-decoration:none}
.ng-cta:hover{background:var(--blue-dark);border-color:var(--blue-dark);transform:translateY(-1px);box-shadow:0 0 0 3px rgba(37,99,235,.22),0 10px 30px -6px rgba(37,99,235,.8)}

.ng-toggle{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:6px;justify-self:end}
.ng-toggle span{width:24px;height:2px;background:#fff;display:block;transition:.3s}

.ng-header-spacer{height:84px}

@media (max-width:980px){
  .ng-toggle{display:flex}
  .ng-nav{padding:0 16px;gap:10px}
  .ng-links{position:fixed;top:84px;left:0;right:0;flex-direction:column;align-items:stretch;background:rgba(0,27,90,.98);backdrop-filter:blur(16px);padding:18px 22px 28px;gap:4px;border-bottom:1px solid var(--hair-2);max-height:calc(100vh - 84px);overflow-y:auto;transform:translateY(-130%);transition:transform .34s ease;visibility:hidden}
  .ng-links.open{transform:translateY(0);visibility:visible}
  .ng-links>a,.ng-item>button,.ng-portal{padding:14px 8px;font-size:.95rem;width:100%;height:auto;justify-content:space-between;border-bottom:1px solid var(--hair-2)}
  .ng-item{width:100%;height:auto;display:block}
  .ng-dropdown{position:static;transform:none;opacity:1;visibility:visible;min-width:0;background:transparent;border:0;box-shadow:none;padding:0 0 8px;max-height:0;overflow:hidden;transition:max-height .3s ease;backdrop-filter:none}
  .ng-dropdown::before,.ng-dropdown::after{display:none}
  .ng-item:hover .ng-dropdown,.ng-item:focus-within .ng-dropdown{transform:none}
  .ng-item.open-sub .ng-dropdown{max-height:640px}
  .ng-dropdown a{padding:11px 18px;color:var(--silver)}
  .ng-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .ng-toggle.open span:nth-child(2){opacity:0}
  .ng-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ---------- Footer ---------- */
.ng-footer{background:var(--navy-deep);border-top:1px solid var(--hair-2)}
/* Primary focus: brand block is wider & airier than the nav columns */
.ng-footer-main{max-width:1180px;margin:0 auto;padding:88px 28px 64px;display:grid;grid-template-columns:1.9fr 1fr 1fr 1fr;gap:72px}
.ng-footer-brand img{height:56px;margin-bottom:24px}
.ng-footer-lead{color:#fff;font-size:1.06rem;font-weight:500;line-height:1.55;max-width:24em;margin:0 0 18px}
.ng-footer-points{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-direction:column;gap:8px}
.ng-footer-points li{position:relative;color:var(--silver);font-size:.9rem;line-height:1.5;padding-left:18px}
.ng-footer-points li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--blue)}
/* Secondary focus: lighter, more breathing room between heading and links */
.ng-footer-col h5{font-family:var(--font);text-transform:uppercase;letter-spacing:.15em;font-size:.7rem;font-weight:700;color:#fff;margin:0 0 22px}
.ng-footer-col a{display:block;color:var(--silver);font-size:.84rem;font-weight:400;line-height:1.4;margin-bottom:15px;text-decoration:none;transition:color .18s ease,padding-left .18s ease}
.ng-footer-col a:hover{color:#fff;padding-left:4px}
.ng-footer-col .ng-viewall{color:var(--blue);font-weight:600;margin-top:4px}
.ng-footer-col .ng-viewall:hover{color:var(--blue);padding-left:4px}
.ng-footer-col .ng-viewall span{transition:padding-left .18s ease}
.ng-footer-col .ng-viewall:hover span{padding-left:3px}
/* Social: present but quieter — supports the brand, doesn't dominate */
.ng-social{display:flex;align-items:center;gap:10px;margin-top:4px}
.ng-social a{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--silver);border:1px solid var(--hair-2);background:transparent;transition:all .2s ease}
.ng-social a:hover{color:#fff;border-color:var(--blue);background:rgba(37,99,235,.1);transform:translateY(-2px)}
.ng-social svg{width:16px;height:16px;fill:currentColor}
/* Brand signature: the centerpiece of the lower footer */
.ng-tagline{border-top:1px solid var(--hair-2);border-bottom:1px solid var(--hair-2);text-align:center;padding:44px 16px}
.ng-tagline span{font-family:var(--font);font-weight:600;letter-spacing:.32em;text-transform:uppercase;font-size:1.02rem;color:var(--blue)}
.ng-footer-bottom{max-width:1180px;margin:0 auto;padding:34px 28px 40px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.ng-footer-bottom .cr{color:var(--muted);font-size:.8rem}
.ng-footer-bottom .bpi{color:var(--silver);font-size:.8rem;font-weight:500;letter-spacing:.02em}
.ng-footer-bottom .legal a{color:var(--muted);font-size:.8rem;text-decoration:none}
.ng-footer-bottom .legal a:hover{color:var(--silver)}

@media (max-width:820px){.ng-footer-main{grid-template-columns:1fr 1fr;gap:48px 40px;padding:64px 28px 48px}.ng-footer-brand{grid-column:1/-1}.ng-tagline span{letter-spacing:.22em;font-size:.92rem}}
@media (max-width:520px){.ng-footer-main{grid-template-columns:1fr;gap:40px}.ng-footer-bottom{flex-direction:column;align-items:flex-start}.ng-tagline{padding:36px 16px}}

:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.ng-header *,.ng-footer *{transition:none!important}}