/* =============================================================================
   NextGen — SHARED CHROME (single maintained source)
   Header (NG lockup + glass nav capsule + Login), mobile nav, footer, and the
   tokens those need. Consumed by BOTH the cinematic homepage (staging/index.html
   links this) and every interior page (site.css @imports this). Values are the
   EXACT approved homepage values, so linking this does not change the homepage.
   A correction here (e.g. the mobile header) reaches the homepage and all
   interior pages at once. Homepage-specific cinematic styles stay in the
   homepage; interior page styles stay in site.css.
   ============================================================================= */
:root{
  --navy-exec:#001B5A; --navy-deep:#001340; --perf-blue:#2563EB; --blue-soft:#8fb0ff;
  --silver:#C0C6D0; --silver-dim:#8b93a3; --light:#F2F4F7;
  --kick:clamp(11.5px,.8vw,14px); --label:clamp(13px,1.0vw,18px);
  --maxw:1280px; --gutter:clamp(22px,4.2vw,76px);
  --pad:clamp(48px,5vw,190px); --navx:6px;
  --font:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --glass-text:#e7eefb;
  --lg-bg:linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.06) 38%, rgba(0,27,90,.12) 72%, rgba(0,19,64,.20));
  --lg-border:rgba(255,255,255,.28); --lg-highlight:rgba(255,255,255,.5); --lg-shadow:0 12px 38px rgba(0,10,30,.26);
  --lg-blur:blur(18px) saturate(135%); --lg-radius:999px; --lg-transition:200ms cubic-bezier(.22,1,.36,1);
}

/* ---------- header (liquid glass, floats over the hero) ---------- */
.topnav{position:absolute;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(22px,1.8vw,40px) var(--pad)}
.lockup{display:flex;align-items:center;gap:clamp(14px,1vw,22px);text-decoration:none;min-width:0}
.lockup img{height:clamp(40px,3vw,62px);width:auto;display:block;flex:none}
.lockup .rule{width:1px;height:clamp(34px,2.6vw,54px);background:rgba(198,213,234,.4);flex:none}
.lockup .words{min-width:0}
.lockup .words b{display:block;font-size:clamp(13px,.95vw,18px);font-weight:500;letter-spacing:.215em;color:#F2F6FC;white-space:nowrap}
.lockup .words span{display:block;font-size:clamp(11px,.8vw,15px);font-weight:300;letter-spacing:.375em;color:#C6D5EA;margin-top:.28em;white-space:nowrap}
.navcap{position:absolute;left:50%;top:50%;transform:translate(calc(-50% + var(--navx,0px)),-50%);display:flex;align-items:center;gap:2px;height:52px;padding:6px;border-radius:var(--lg-radius);background:var(--lg-bg);backdrop-filter:var(--lg-blur);-webkit-backdrop-filter:var(--lg-blur);border:1px solid var(--lg-border);box-shadow:inset 0 1px 0 var(--lg-highlight),inset 0 -8px 18px rgba(0,19,64,.18),var(--lg-shadow);overflow:hidden;isolation:isolate}
.navcap::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0) 42%)}
.navcap::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 90% at 88% 130%, rgba(0,27,90,.30), rgba(0,27,90,0) 60%)}
.navcap a{position:relative;z-index:1;display:inline-flex;align-items:center;height:40px;padding:0 20px;border-radius:999px;color:var(--glass-text);text-decoration:none;font-size:15px;font-weight:600;letter-spacing:.01em;opacity:.85;white-space:nowrap;transition:color var(--lg-transition),background var(--lg-transition),opacity var(--lg-transition)}
.navcap a:not(.active):hover{opacity:1;color:#fff;background:rgba(255,255,255,.10)}
.navcap a.active{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(233,240,251,.82));color:var(--navy-deep);opacity:1;font-weight:700;border:1px solid rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 4px rgba(0,10,30,.14)}
.navcap a:focus-visible{outline:2px solid var(--perf-blue);outline-offset:3px}
.login{position:relative;display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 22px;border-radius:var(--lg-radius);background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.04) 40%,rgba(0,27,90,.10) 75%,rgba(0,19,64,.16));backdrop-filter:var(--lg-blur);-webkit-backdrop-filter:var(--lg-blur);border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 24px rgba(0,10,30,.2);color:var(--glass-text);text-decoration:none;font-size:14px;font-weight:600;letter-spacing:.02em;overflow:hidden;flex:none}
.login::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0) 45%)}
.login>*{position:relative;z-index:1}
.login svg{width:16px;height:16px;stroke:currentColor;fill:none;opacity:.85}
.login:focus-visible{outline:2px solid var(--blue-soft);outline-offset:3px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .navcap,.login,.navtoggle{background:rgba(4,20,55,.92)}
}

/* ---------- mobile toggle + drawer ---------- */
.navtoggle{display:none;position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);z-index:31;width:46px;height:46px;border-radius:12px;background:var(--lg-bg);backdrop-filter:var(--lg-blur);-webkit-backdrop-filter:var(--lg-blur);border:1px solid var(--lg-border);cursor:pointer;align-items:center;justify-content:center;flex:none}
.navtoggle span,.navtoggle span::before,.navtoggle span::after{display:block;width:20px;height:2px;background:#eaf1ff;border-radius:2px}
.navtoggle span{position:relative}
.navtoggle span::before,.navtoggle span::after{content:"";position:absolute;left:0}
.navtoggle span::before{top:-6px}.navtoggle span::after{top:6px}
.navtoggle:focus-visible{outline:2px solid var(--blue-soft);outline-offset:3px}
#mnav{display:none;position:fixed;inset:0;z-index:40;background:rgba(0,19,64,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);flex-direction:column;justify-content:center;gap:6px;padding:24px}
#mnav.open{display:flex}
#mnav a{color:#eaf1ff;text-decoration:none;font-size:22px;font-weight:600;padding:16px 8px;border-bottom:1px solid rgba(120,150,205,.16)}
#mnav a.active{color:var(--blue-soft)}
#mnav a:focus-visible{outline:2px solid var(--perf-blue);outline-offset:3px}
#mnav .mclose{position:absolute;top:20px;right:20px;width:44px;height:44px;background:none;border:0;color:#eaf1ff;font-size:30px;line-height:1;cursor:pointer}
#mnav .mclose:focus-visible{outline:2px solid var(--perf-blue);outline-offset:3px}

/* ---------- footer ---------- */
.ftr{background:var(--navy-deep);color:#dbe4f2}
.ftr .wrap{max-width:var(--maxw);margin:0 auto;padding:clamp(48px,6vh,80px) var(--gutter) clamp(24px,3vh,40px)}
.ftr-main{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,54px)}
.flock{display:flex;align-items:center;gap:12px}
.flock img{height:38px;width:auto}
.flock .rule{width:1px;height:34px;background:rgba(198,213,234,.4)}
.flock b{display:block;font-size:14px;font-weight:500;letter-spacing:.2em;color:#F2F6FC}
.flock span{display:block;font-size:11px;font-weight:300;letter-spacing:.34em;color:#C6D5EA;margin-top:.28em}
.ftr-lead{font-size:var(--label);color:#aebdd6;margin:clamp(14px,2vh,20px) 0 0;max-width:34ch;line-height:1.5}
.ftr-social{display:flex;gap:14px;margin-top:clamp(14px,2vh,20px)}
.ftr-social a{color:#9fb0cc;transition:color var(--lg-transition)}.ftr-social a:hover{color:#fff}
.ftr-social a:focus-visible{outline:2px solid var(--perf-blue);outline-offset:3px;border-radius:4px}
.ftr-social svg{width:20px;height:20px;fill:currentColor;display:block}
.ftr-col h5{font-size:var(--kick);letter-spacing:.16em;text-transform:uppercase;color:#fff;font-weight:700;margin:0 0 1em}
.ftr-col a{display:block;color:#aebdd6;text-decoration:none;font-size:var(--label);margin-bottom:.7em;transition:color var(--lg-transition)}
.ftr-col a:hover{color:#fff}
.ftr-col a:focus-visible{outline:2px solid var(--perf-blue);outline-offset:3px;border-radius:3px}
.ftr-tag{text-align:center;letter-spacing:.18em;text-transform:uppercase;font-size:var(--kick);color:#fff;font-weight:700;margin:clamp(30px,4vh,50px) 0}
.ftr-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;border-top:1px solid rgba(120,150,205,.14);padding-top:clamp(16px,2vh,22px);font-size:var(--kick);color:#93a3bf}
.ftr-bottom a{color:#aebdd6;text-decoration:none}.ftr-bottom a:hover{color:#fff}

/* ---------- responsive chrome ---------- */
@media (max-width:820px){
  .navcap,.login{display:none}
  .navtoggle{display:flex}
  .ftr-main{grid-template-columns:1fr 1fr}
  .ftr-brand{grid-column:1 / -1}
}
@media (max-width:560px){ .ftr-main{grid-template-columns:1fr} }

/* ---- mobile header fix: brand takes flexible room, a deliberate gap, and the
   menu control keeps its touch target and never overlaps the wordmark.
   Verified at 320 / 360 / 390 / 430. Shared → reaches homepage + all interior. ---- */
@media (max-width:640px){
  .topnav{padding-left:clamp(16px,4vw,22px);padding-right:clamp(70px,17vw,84px)} /* right pad reserves the toggle lane + gap */
  .navtoggle{right:clamp(16px,4vw,22px)}
  .lockup{gap:11px;min-width:0;flex:1 1 auto}
  .lockup img{height:clamp(34px,10vw,44px)}
  .lockup .rule{height:clamp(28px,8vw,38px)}
  .lockup .words b{font-size:clamp(11px,3.1vw,14px);letter-spacing:.12em}
  .lockup .words span{font-size:clamp(9px,2.4vw,11px);letter-spacing:.2em}
}
@media (max-width:400px){
  .lockup{gap:8px}
  .lockup img{height:30px}
  .lockup .rule{height:25px}
  .lockup .words b{font-size:9.8px;letter-spacing:.03em}
  .lockup .words span{font-size:8px;letter-spacing:.1em}
}

/* ---- Login (owner 2026-10-02): the single top-right header action is Login, to the Production portal
   sign-in https://app.ngcontrollers.com/sign-in (replaces the M7 "Start Your Assessment" header action;
   page CTAs keep the assessment). Compact header <=1140px: menu button + Login chip. 1140, not the
   approved header's 820: at 821-1129px the centred nav capsule overlaps or crowds the lockup (measured on
   the approved header, homepage included). The toggle lane is reserved so the chip never touches the menu
   button. Phones (<560) keep the lockup clear: Login is the highlighted item in the header menu. ---- */
@media (max-width:1140px){
  .navcap{display:none}
  .navtoggle{display:flex}
  .login{display:inline-flex;height:44px;padding:0 16px;gap:8px;font-size:13px;flex:0 0 auto}
}
@media (max-width:1140px) and (min-width:641px){
  .topnav{padding-right:calc(var(--pad) + 58px)} /* reserve the menu-toggle lane (46px + gap) */
}
/* Phones (<560): Login stays visible in the header (owner 2026-10-02: one visible Login on every page) as a
   compact chip beside the menu button; below 470px (where the label would squeeze the lockup wording) it is the person icon alone (the link
   text stays in the DOM, so its accessible name is still "Login"). It is also the highlighted menu item. */
@media (max-width:559px){
  .login{height:44px;padding:0 12px;gap:6px;font-size:12.5px;margin:-7px 2px -7px 0} /* 44px target without growing the header row */
  .login svg{width:15px;height:15px}
}
@media (max-width:469px){
  .login{width:44px;padding:0;justify-content:center;font-size:0;gap:0}
  .login svg{width:17px;height:17px;opacity:.95}
}
#mnav a.mcta{margin-top:18px;white-space:nowrap;border:1px solid rgba(255,255,255,.34);border-radius:999px;padding:12px 22px;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04));color:#fff}
@media (max-width:374px){ #mnav a.mcta{font-size:18px;padding:11px 18px} }

/* ---- Owner 2026-10-01: on phones the cinematic pages offer the Intelligence Assistant as a menu
   item ("Ask the NextGen Assistant", data-ngia-open) instead of the floating button, so the button
   never sits on page content or controls. Desktop/tablet keep the floating button. Scoped to
   chrome.css, so only the cinematic pages are affected. ---- */
@media (max-width:767px){ .ngia-launcher{display:none !important} }

/* ---- About section (owner 2026-10-02, content reconciliation): About is the gateway to About NextGen,
   Meet the Founder and Our Methodology, as on the live site's About menu. Desktop: hovering or focusing
   About opens a small panel (CSS only — :hover / :focus-within; Tab from About walks into it; Escape
   closes it). The capsule no longer clips its children so the panel can hang below it. Phone/tablet
   menu: the two pages are listed as indented items under About. ---- */
.navcap{overflow:visible}
.navsub{position:relative;z-index:2;display:inline-flex}
.navsub>a .chev{width:9px;height:9px;margin-left:7px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.75;transition:transform .2s ease}
.subnav{position:absolute;top:100%;right:-6px;padding-top:12px;min-width:236px;visibility:hidden;opacity:0;transform:translateY(-4px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.subnav-box{display:flex;flex-direction:column;gap:2px;padding:8px;border-radius:18px;background:rgba(4,20,55,.96);border:1px solid var(--lg-border);box-shadow:inset 0 1px 0 var(--lg-highlight),var(--lg-shadow)}
.navsub:not(.shut):hover .subnav,.navsub:not(.shut):focus-within .subnav{visibility:visible;opacity:1;transform:none;transition:opacity .18s ease,transform .18s ease}
.navsub:not(.shut):hover>a .chev,.navsub:not(.shut):focus-within>a .chev{transform:rotate(180deg)}
.navcap .subnav a{height:auto;padding:11px 16px;border-radius:12px;font-size:14.5px;font-weight:600;color:#eaf1ff;opacity:.92;background:none;border:0;box-shadow:none}
.navcap .subnav a:hover{opacity:1;color:#fff;background:rgba(255,255,255,.10)}
.navcap .subnav a[aria-current="page"]{opacity:1;color:#fff;background:rgba(255,255,255,.12)}
.navcap .subnav a small{display:block;margin-top:2px;font-size:12px;font-weight:500;color:#9fb2d4;letter-spacing:0}
.navcap .subnav a{flex-direction:column;align-items:flex-start}
@media (prefers-reduced-motion:reduce){ .subnav,.navsub>a .chev{transition:none} }
#mnav{overflow-y:auto;justify-content:safe center}
#mnav a.msub{font-size:17px;font-weight:500;padding:11px 8px 11px 26px;color:#c9d6ee}
#mnav a.msub.active{color:var(--blue-soft)}