/* cgti-nav.css · CGTI canonical header + primary navigation
   ────────────────────────────────────────────────────────────────────────────
   SOURCE OF TRUTH: the home page header. Every page loads this file and uses
   the identical markup kept in partials/cgti-header.html. Never fork the header
   in a page-level <style> block — change it here so every breakpoint (mobile,
   iPad, desktop) and every page stay in step.
   Fallback values are inlined on every custom property so the header renders
   identically on pages that do not load cgti-shared.css.
   ──────────────────────────────────────────────────────────────────────────── */

:root{
  --ls-mark:0.40em;
  --ls-nav:0.20em;
  --ls-sub:0.14em;
  --hdr-h:89px;
}

/* ── Skip link ─────────────────────────────────────────────────────────────── */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;overflow:visible;z-index:10001;
  padding:10px 18px;background:#ba9933;color:#111616;
  font-family:var(--sans,'Jost',system-ui,sans-serif);font-weight:400;font-size:11px;
  letter-spacing:0.16em;text-transform:uppercase}

/* The skip-link target is focusable but must not draw a focus ring itself. */
#main-content:focus{outline:none}

/* ── Header shell ──────────────────────────────────────────────────────────── */
.hdr{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--hdr-h);
  display:flex;align-items:center;padding:15px 55px;
  background:rgba(17,22,22,0.92);
  backdrop-filter:blur(16px) saturate(1.05);-webkit-backdrop-filter:blur(16px) saturate(1.05);
  isolation:isolate;border-bottom:0.5px solid transparent;
  transition:background .3s,border-color .3s}
.hdr::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(17,22,22,0.30) 0%,rgba(30,29,26,0.30) 100%),
             radial-gradient(120% 180% at 20% -40%,rgba(186,153,51,0.06) 0%,rgba(186,153,51,0) 60%)}
.hdr.scrolled{background:rgba(23,22,19,0.98);border-bottom-color:rgba(186,153,51,0.18)}

/* ── Brand ─────────────────────────────────────────────────────────────────── */
.hdr-brand{display:flex;align-items:center;gap:14px;flex-shrink:0;text-decoration:none}
.hdr-mark{width:30px;height:30px;display:block;flex-shrink:0}
.hdr-word{font-family:var(--sans,'Jost',system-ui,sans-serif);font-weight:300;font-size:15px;
  letter-spacing:var(--ls-mark);color:var(--cashmere,#F3F6F9);text-transform:uppercase;padding-left:3px}

/* ── Primary nav ───────────────────────────────────────────────────────────── */
.hdr-nav{position:static;display:flex;gap:44px;margin-left:64px;justify-content:flex-start;flex:0 0 auto}
.nav-item{position:relative}
.nav-top{font-family:var(--sans,'Jost',system-ui,sans-serif);font-weight:300;font-size:11px;
  letter-spacing:var(--ls-nav);color:var(--dim,rgba(243,246,249,0.72));text-transform:lowercase;
  padding:20px 0;display:block;cursor:pointer;text-decoration:none;transition:color .3s}
.nav-item:hover .nav-top,.nav-top:hover,.nav-top:focus-visible{color:var(--cashmere,#F3F6F9)}
.nav-top[aria-current="page"]{color:var(--cashmere,#F3F6F9)}

/* ── Dropdown ──────────────────────────────────────────────────────────────── */
.nav-dd{position:fixed;opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .28s,transform .28s,visibility .28s;
  background:rgba(17,22,22,0.96);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  padding:16px 0;min-width:186px;z-index:120;display:flex;flex-direction:column}
.nav-item:hover .nav-dd,
.nav-item:focus-within .nav-dd,
.nav-item.open .nav-dd{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dd a,.nav-dd .soon{display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:var(--sans,'Jost',system-ui,sans-serif);font-weight:300;font-size:10px;
  letter-spacing:var(--ls-sub);color:rgba(243,246,249,0.5);text-transform:lowercase;
  text-decoration:none;padding:10px 24px;transition:color .2s,background .2s}
.nav-dd a:hover,.nav-dd a:focus-visible{color:var(--cashmere,#F3F6F9);background:rgba(186,153,51,.05)}
.nav-dd .lbl{white-space:nowrap}
.nav-dd .gkey{width:7px;height:13px;display:block;flex-shrink:0;opacity:.55;transition:opacity .2s}
.nav-dd a.gated:hover .gkey,.nav-dd a.gated:focus-visible .gkey{opacity:1}
.nav-dd .soon{color:rgba(243,246,249,0.32);cursor:default}
.nav-dd .soon .tag{font-size:7px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(186,153,51,.5);white-space:nowrap}

/* ── Request access ────────────────────────────────────────────────────────── */
.hdr-cta{margin-left:auto;flex-shrink:0}
.hdr-req{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--sans,'Jost',system-ui,sans-serif);font-weight:300;font-size:10px;
  letter-spacing:var(--ls-nav);text-transform:lowercase;color:var(--gold,#ba9933);
  text-decoration:none;transition:color .3s,opacity .3s}
.hdr-req:hover{color:var(--gold,#ba9933);opacity:0.75}
.hdr-key{width:8px;height:15px;display:block;flex-shrink:0}
.hdr-key .key-eye{animation:ep 3.5s ease-in-out infinite}
@keyframes ep{0%,100%{opacity:1}50%{opacity:.35}}

/* ── Hamburger (mobile / iPad portrait only) ───────────────────────────────── */
.hdr-burger{display:none;flex-direction:column;justify-content:space-between;
  width:22px;height:14px;margin-left:20px;padding:0;background:none;border:0;cursor:pointer}
.hdr-burger span{display:block;width:100%;height:1px;background:var(--cashmere,#F3F6F9);
  transition:transform .25s,opacity .25s}
.hdr.mob-open .hdr-burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hdr.mob-open .hdr-burger span:nth-child(2){opacity:0}
.hdr.mob-open .hdr-burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ── Keyboard focus ────────────────────────────────────────────────────────── */
.hdr a:focus-visible,.hdr button:focus-visible{outline:1px solid var(--gold,#ba9933);outline-offset:4px}

/* ── iPad landscape / small laptop: same nav, tighter gutters ──────────────── */
@media(min-width:769px) and (max-width:1024px){
  .hdr{padding:15px 28px}
  .hdr-nav{margin-left:30px;gap:26px}
}

/* ── Mobile / iPad portrait: drawer ────────────────────────────────────────── */
@media(max-width:768px){
  :root{--hdr-h:58px}
  .hdr{padding:14px 22px}
  .hdr-word{font-size:13px;letter-spacing:.3em}
  .hdr-burger{display:flex}
  .hdr-nav{position:fixed;top:var(--hdr-h);left:0;right:0;bottom:0;margin-left:0;gap:0;
    flex-direction:column;justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:6px 22px 48px;background:rgba(17,22,22,0.98);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);display:none}
  .hdr.mob-open .hdr-nav{display:flex}
  .nav-item{border-bottom:0.5px solid rgba(186,153,51,0.14)}
  .nav-top{position:relative;padding:17px 26px 17px 0;font-size:12px}
  .nav-top::after{content:'';position:absolute;right:4px;top:50%;width:6px;height:6px;
    border-right:1px solid rgba(186,153,51,0.65);border-bottom:1px solid rgba(186,153,51,0.65);
    transform:translateY(-70%) rotate(45deg);transition:transform .25s}
  .nav-item.open>.nav-top::after{transform:translateY(-25%) rotate(-135deg)}
  .nav-dd{position:static;display:none;opacity:1;visibility:visible;transform:none;
    background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
    padding:0 0 12px 14px;min-width:0}
  .nav-item.open .nav-dd{display:flex}
  .nav-dd a,.nav-dd .soon{justify-content:flex-start;gap:10px;padding:12px 0;font-size:11px}
  body.nav-open{overflow:hidden}
}

@media(prefers-reduced-motion:reduce){
  .hdr,.hdr-nav,.nav-dd,.nav-top,.nav-top::after,.hdr-burger span,.hdr-req{transition:none}
  .hdr-key .key-eye{animation:none}
}