/* No hairline under the header. It appeared on scroll as a gold rule and read
   as an underline. Removed 2026-08-30 for consistency across the estate. */
/* Ported from cgti-nav.css on 2026-08-30 under PART 23. Behaviour identical.
   Ground and cashmere differ: MEVO runs #111616 and #F3F6F9 where CGTI runs
   #111616 and #F3F6F9. Never fork this. Fix the canonical and re-port. */
/* Header shell rules deliberately absent: .hdr::before, .hdr.scrolled, .hdr-mark, .hdr-word, .hdr-word. CGTI's .hdr-mark is the
   30px SVG icon; MEVO's .hdr-mark is the anchor wrapping the icon AND the
   wordmark, so the canonical display:block stacked the label. Same class
   name, different job. MEVO keeps its own header shell in the page. */
/* mevo-nav.css · MEVO header + primary navigation
   ────────────────────────────────────────────────────────────────────────────
   SOURCE OF TRUTH: the home page header. Every page loads this file and uses
   the identical markup kept in partials/mevo-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 mevo-shared.css.
   ──────────────────────────────────────────────────────────────────────────── */

:root{
  --ls-mark:0.40em;
  --ls-nav:0.20em;
  --ls-sub:0.14em;
  --hdr-h:68px;   /* MEVO header height, not CGTI's 89 */
}

/* ── 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;
  transition:background .3s,border-color .3s}

/* ── Brand ─────────────────────────────────────────────────────────────────── */
.hdr-brand{display:flex;align-items:center;gap:14px;flex-shrink:0;text-decoration:none}

/* ── 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:68px}   /* MEVO does not shrink its header at mobile */
  /* The drawer below is position:fixed and must resolve against the VIEWPORT.
     A backdrop-filter makes an element the containing block for fixed
     descendants, so while .hdr carried one the drawer's "top:58px; bottom:0"
     resolved inside a 58px header and rendered as a 54px strip. Measured on
     live cgti.ai at 375x812 on 2026-08-30: navTop 58, navHeight 54.
     Dropping the filter at mobile only restores the viewport as the
     containing block. The header keeps a near opaque ground instead, which
     it already used when scrolled, so nothing behind it shows through. */
  .hdr{padding:14px 22px;
    backdrop-filter:none;-webkit-backdrop-filter:none;
    background:rgba(17,22,22,0.98)}
  .hdr-burger{display:flex}
  /* align-items is stated explicitly, not left to the initial value. DDIF
     carries a bare "nav{align-items:center}" type selector for its own older
     header element, and because this block never mentioned align-items that
     rule applied unopposed once the drawer was ported: rows sized to their
     text and floated centre instead of spanning the width. Stating stretch
     here means the drawer does not depend on what else a forum happens to
     have written. Found 2026-08-30 porting to DDIF. */
  .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;align-items:stretch;
    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}
  /* The key, not a chevron. The key is the estate's access motif: it is on the
     gated dropdown links, the request CTA and every door. A generic arrow says
     nothing. It rests upright and turns a quarter turn on open, the way a key
     turns in a lock. A full flip would read as a flip, not an unlocking.
     Masked rather than drawn, so the colour comes from the gold token and
     follows hover instead of being hard coded twice. */
  .nav-top::after{content:'';position:absolute;right:4px;top:50%;width:9px;height:17px;
    background-color:var(--gold,#ba9933);opacity:.65;
    -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20300%22%3E%3Cpath%20d%3D%22M94.9%20112%20A35.3%2035.3%200%201%200%2065.1%20112%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%2213%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2280%22%20r%3D%2211%22%2F%3E%3Cline%20x1%3D%2280%22%20y1%3D%22113%22%20x2%3D%2280%22%20y2%3D%22252%22%20stroke%3D%22%23000%22%20stroke-width%3D%2213%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2280%22%20y1%3D%22150%22%20x2%3D%22116%22%20y2%3D%22150%22%20stroke%3D%22%23000%22%20stroke-width%3D%2213%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2280%22%20y1%3D%22198%22%20x2%3D%22110%22%20y2%3D%22198%22%20stroke%3D%22%23000%22%20stroke-width%3D%2213%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
            mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20300%22%3E%3Cpath%20d%3D%22M94.9%20112%20A35.3%2035.3%200%201%200%2065.1%20112%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%2213%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2280%22%20r%3D%2211%22%2F%3E%3Cline%20x1%3D%2280%22%20y1%3D%22113%22%20x2%3D%2280%22%20y2%3D%22252%22%20stroke%3D%22%23000%22%20stroke-width%3D%2213%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2280%22%20y1%3D%22150%22%20x2%3D%22116%22%20y2%3D%22150%22%20stroke%3D%22%23000%22%20stroke-width%3D%2213%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2280%22%20y1%3D%22198%22%20x2%3D%22110%22%20y2%3D%22198%22%20stroke%3D%22%23000%22%20stroke-width%3D%2213%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
    transform-origin:50% 27%;
    transform:translateY(-50%) rotate(0deg);
    transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .25s}
  .nav-item.open>.nav-top::after{transform:translateY(-50%) rotate(90deg);opacity:1}
  .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}
}