/* ============================================================================
   nav.css — the grouped primary navigation (issue Admin-ovqm).

   Lives in its own file, loaded by EVERY page, because index.html does not load
   site.css or platinova.css (it carries ~84KB of inline CSS instead). Putting
   the nav here is the only way one change reaches all 84 navigated pages.

   Desktop dropdowns are pure CSS — :hover for mice, :focus-within for keyboards.
   No JS is required to open a menu, and every trigger is a real link to a real
   hub page, so the nav degrades to a plain link list without JS and on touch.
   ========================================================================== */

.nlinks{position:relative}

/* ---- a group: trigger + panel ---- */
.ndrop{position:relative;display:inline-flex;align-items:center}
.nlinks .ndrop > a{display:inline-flex;align-items:center;gap:6px}
.ndrop > a svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;
  transition:transform .3s cubic-bezier(.22,1,.36,1)}
.ndrop:hover > a svg,.ndrop:focus-within > a svg{transform:rotate(180deg)}

.nmenu{position:absolute;top:100%;left:50%;transform:translate(-50%,10px);
  margin-top:14px;padding:26px;z-index:120;
  background:var(--panel);border:1px solid var(--line2);border-radius:18px;
  box-shadow:0 30px 70px rgba(0,0,0,.6);
  display:grid;gap:26px 34px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1),visibility .3s}
.ndrop:hover > .nmenu,.ndrop:focus-within > .nmenu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}

/* the hover bridge — stops the panel closing in the 14px gap under the trigger */
.ndrop::after{content:'';position:absolute;top:100%;left:0;right:0;height:18px}

.nmenu-1{grid-template-columns:1fr;min-width:230px}
.nmenu-2{grid-template-columns:repeat(2,minmax(180px,1fr))}
.nmenu-5{grid-template-columns:repeat(4,minmax(158px,1fr)) minmax(190px,auto)}
@media(max-width:1240px){.nmenu-5{grid-template-columns:repeat(2,minmax(168px,1fr))}}

.ncol{display:flex;flex-direction:column;gap:2px}
.nhead{font-family:var(--ui);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);font-weight:600;margin-bottom:10px;white-space:nowrap}
.nlinks .nmenu a{display:block;padding:8px 10px;margin-left:-10px;border-radius:9px;
  font-family:var(--ui);font-size:14.5px;color:#b5b5b5;line-height:1.35;
  transition:background .25s,color .25s}
.nlinks .nmenu a:hover,.nlinks .nmenu a:focus-visible{background:#151515;color:var(--fg)}
.nlinks .nmenu a small{display:block;font-size:12px;color:var(--dim);margin-top:2px}

/* the one highlighted column — start-here / conversion */
.ncol-feat{border-left:1px solid var(--line2);padding-left:26px}
@media(max-width:1240px){.ncol-feat{border-left:0;padding-left:0;border-top:1px solid var(--line2);padding-top:20px}}
.ncol-feat a b{color:var(--fg);font-weight:600}

/* ---- the contact CTA at the end of the bar ---- */
.nlinks a.nav-cta{padding:9px 18px;border-radius:999px;background:var(--goldgrad);
  color:#111;font-weight:600;transition:filter .3s}
.nlinks a.nav-cta:hover{filter:brightness(1.08);color:#111}

/* ---- mobile: the bar collapses, the overlay takes over (see nav.js) ---- */
@media(max-width:760px){
  .nmenu{display:none}
  .ndrop{display:none}
}
/* group headings inside the full-screen mobile overlay */
.mm-links .mm-group{font-family:var(--ui);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);font-weight:600;
  margin:26px 0 6px;display:block}
.mm-links .mm-group:first-child{margin-top:0}
.mm-links a.mm-sub{font-size:17px;opacity:.8;padding-left:14px}