/* Ported from cgti-nav.css on 2026-08-30 under PART 23. Behaviour identical.
   Ground and cashmere differ: DDIF runs #171613 and #F4EFE5 where CGTI runs
   #111616 and #F3F6F9. Never fork this. Fix the canonical and re-port. */
/* ddif-nav.css · DDIF header + primary navigation
   ────────────────────────────────────────────────────────────────────────────
   SOURCE OF TRUTH: the home page header. Every page loads this file and uses
   the identical markup kept in partials/ddif-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 ddif-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:#171613;
  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(23,22,19,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(23,22,19,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,#F4EFE5);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(244,239,229,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,#F4EFE5)}
.nav-top[aria-current="page"]{color:var(--cashmere,#F4EFE5)}

/* ── Dropdown ──────────────────────────────────────────────────────────────── */
.nav-dd{position:fixed;opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .28s,transform .28s,visibility .28s;
  background:rgba(23,22,19,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(244,239,229,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,#F4EFE5);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(244,239,229,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,#F4EFE5);
  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}
  /* 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(23,22,19,0.98)}
  .hdr-word{font-size:13px;letter-spacing:.3em}
  .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(23,22,19,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}
}