/* ==== Bravo Protocol: site navigation ====
   Transparent top bar (wordmark + two-hairline menu button) and a right-hand drawer.
   Classes only, no inline styles. All motion is transform / opacity. Every layer is position:fixed (zero layout shift).
   States (set by nav.js on <html>): .nav-js (JS running), .nav-open (drawer open), .nav-solid (scrolled past the hero).
   No JS: the button is a link to #navDrawer and the drawer shows via :target. */

:root{--nav-h:76px;--nav-ease:cubic-bezier(.76,0,.24,1);--nav-out:cubic-bezier(.16,1,.3,1);--nav-w:clamp(560px,48vw,760px)}
html{scrollbar-gutter:stable}            /* scroll lock (overflow:hidden) keeps the gutter: no shift with classic scrollbars */
html.nav-lock{overflow:hidden}

/* ---- top bar: no background, no border ---- */
.nav-bar{position:fixed;top:0;left:0;right:0;z-index:40;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;
  padding:0 calc(var(--pad) - 12px) 0 var(--pad);pointer-events:none}
.nav-bar>*{pointer-events:auto}
/* optional backing after the hero: navy, no blur (the page keeps one blurred layer per viewport) */
.nav-bar::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(10,18,32,.82),rgba(10,18,32,.66));
  box-shadow:inset 0 -1px 0 rgba(198,165,104,.12);transition:opacity .6s var(--ease-out)}
.nav-solid .nav-bar::before{opacity:1}
.nav-open .nav-bar::before{opacity:0}

.nav-mark{font-family:var(--disp);font-weight:400;font-size:14px;line-height:1;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(243,238,228,.92);text-decoration:none;padding:15px 0;margin-left:0;white-space:nowrap;
  text-shadow:0 1px 14px rgba(4,8,15,.6)}
.nav-gold{color:var(--gold)}
.nav-mark:focus-visible,.nav-btn:focus-visible,.nav-a:focus-visible,.nav-s:focus-visible{outline:1px solid var(--gold);outline-offset:4px}

/* ---- menu button: two hand-set hairlines (top ivory, bottom shorter gold), 48x48 tap target ---- */
.nav-btn{position:relative;display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;margin:0;
  border:0;background:transparent;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;font:inherit}
.nav-ico{position:relative;display:block;width:24px;height:12px}
.nl{position:absolute;left:0;width:24px;height:1px;transform:translate3d(0,0,0);
  transition:transform .24s var(--nav-ease) .18s}                            /* close: lines part after the X unwinds */
.nl-a{top:0}
.nl-b{top:11px}
.nl-in{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform;
  transition:transform .28s var(--nav-ease) 0s}
.nl-in::before,.nl-in::after{content:"";position:absolute;inset:0}
.nl-a .nl-in::before{background:#f3eee4;box-shadow:0 0 6px rgba(4,8,15,.5)}
.nl-b .nl-in::before{background:var(--gold);box-shadow:0 0 6px rgba(4,8,15,.5)}
/* warm filament layer: fades in on open (opacity only) */
.nl-in::after{background:#f6e6c2;box-shadow:0 0 2px rgba(230,207,156,.9),0 0 6px rgba(222,168,80,.42),0 0 12px rgba(222,168,80,.14);
  opacity:0;transition:opacity .3s var(--nav-ease) 0s}
.nl-a .nl-in{transform:translate3d(0,0,0) rotate(0deg) scaleX(1)}
.nl-b .nl-in{transform:translate3d(4.8px,0,0) rotate(0deg) scaleX(.6)}      /* shorter, right-aligned */
/* hover: the short gold line draws out to full length */
@media (hover:hover){
  .nav-btn:hover .nl-b .nl-in{transform:translate3d(0,0,0) rotate(0deg) scaleX(1);transition-duration:.42s}
}
/* open: lines meet in the middle (0-240ms), then turn into a thin X (150-450ms) */
.nav-open .nl{transition:transform .24s var(--nav-ease) 0s}
.nav-open .nl-a{transform:translate3d(0,5.5px,0)}
.nav-open .nl-b{transform:translate3d(0,-5.5px,0)}
.nav-open .nl-in{transition:transform .3s var(--nav-ease) .15s}
.nav-open .nl-a .nl-in,.nav-open .nav-btn:hover .nl-a .nl-in{transform:translate3d(0,0,0) rotate(45deg) scaleX(.9)}
.nav-open .nl-b .nl-in,.nav-open .nav-btn:hover .nl-b .nl-in{transform:translate3d(0,0,0) rotate(-45deg) scaleX(.9)}
.nav-open .nl-in::after{opacity:1;transition:opacity .45s var(--nav-ease) .05s}

/* ---- scrim (click outside closes) ---- */
.nav-scrim{position:fixed;inset:0;z-index:30;background:rgba(5,9,17,.46);opacity:0;visibility:hidden;
  transition:opacity .46s var(--nav-ease),visibility 0s linear .46s}
.nav-open .nav-scrim{opacity:1;visibility:visible;transition:opacity .6s var(--nav-out),visibility 0s}

/* ---- drawer: dark navy glass, hairline gold edge ---- */
.nav-drawer{position:fixed;top:0;right:0;bottom:0;z-index:35;width:var(--nav-w);overflow-y:auto;overscroll-behavior:contain;
  background:radial-gradient(120% 50% at 70% 0%,rgba(198,165,104,.06),transparent 70%),rgba(10,18,32,.9);
  box-shadow:-40px 0 90px -40px rgba(2,5,10,.75);
  transform:translate3d(100%,0,0);visibility:hidden;
  transition:transform .46s var(--nav-ease),visibility 0s linear .46s}
.nav-drawer::before{content:"";position:fixed;top:0;bottom:0;left:0;width:1px;pointer-events:none;
  background:linear-gradient(180deg,rgba(198,165,104,0),rgba(198,165,104,.55) 22%,rgba(198,165,104,.55) 78%,rgba(198,165,104,0))}
.nav-open .nav-drawer{transform:translate3d(0,0,0);visibility:visible;transition:transform .72s var(--nav-out),visibility 0s}
@media (min-width:761px) and (max-width:1023px){:root{--nav-w:min(560px,76vw)}}

/* composition: three groups spread down the panel, utilities anchored to the bottom.
   Type and spacing scale with min(vw, vh) so 1280x800, 1440x900 and 1920x1080 all fill without overflowing. */
.nav-inner{display:flex;flex-direction:column;min-height:100%;
  padding:calc(var(--nav-h) + clamp(4px,1.6vh,32px)) clamp(40px,4.6vw,88px) clamp(20px,3.2vh,44px)}
.nav-groups{flex:1 0 auto;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(14px,2.2vh,32px);padding-bottom:clamp(18px,3vh,44px)}
.nav-head{display:flex;align-items:center;gap:clamp(16px,1.6vw,28px);margin:0 0 clamp(2px,.6vh,10px)}
.nav-h{font-family:var(--disp);font-weight:400;font-size:clamp(26px,min(2.4vw,4.1vh),40px);line-height:1.12;letter-spacing:-.005em;color:var(--ink);
  margin:0;display:flex;align-items:center;gap:14px;white-space:nowrap}
.nav-h::before{content:"";width:22px;height:1px;background:var(--gold);opacity:.75;flex:none}
.nav-head-line{flex:1 1 auto;min-width:24px;height:1px;background:linear-gradient(90deg,rgba(198,165,104,.26),rgba(198,165,104,.06))}
.nav-thumb{position:relative;flex:none;display:block;overflow:hidden;width:clamp(104px,min(8.6vw,14vh),172px);aspect-ratio:5/3}
.nav-thumb-in,.nav-thumb img{display:block;width:100%;height:100%}
.nav-list,.nav-small{list-style:none;margin:0;padding:0}
.nav-list{padding-left:36px}
.nav-a{display:block;padding:clamp(4px,.7vh,9px) 0;text-decoration:none}
.nav-t{position:relative;display:inline-block;font-family:var(--sans);font-size:clamp(16px,min(1.25vw,2.1vh),20px);font-weight:400;line-height:1.4;letter-spacing:.01em;
  color:var(--ink-2);transition:color var(--t-fast) var(--ease-out)}
.nav-t::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--hair-strong);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-med) var(--ease-out)}
.nav-a:hover .nav-t,.nav-a:focus-visible .nav-t{color:var(--ink)}
/* owner, Oct 24 (gold for skimming): topic links in gold, brighter warm gold on hover/focus. Headings stay ivory; descriptions stay ivory 65%. */
.nav-t{color:var(--gold)}
.nav-a:hover .nav-t,.nav-a:focus-visible .nav-t{color:#e6cf9c}
.nav-a:hover .nav-t::after,.nav-a:focus-visible .nav-t::after{transform:scaleX(1)}
.nav-d{display:block;margin-top:3px;font-family:var(--sans);font-size:clamp(13px,min(.95vw,1.6vh),15px);line-height:1.5;letter-spacing:.01em;
  color:rgba(243,238,228,.65)}
.nav-foot{flex:none}
.nav-rule{display:block;height:1px;margin:0 0 clamp(16px,2.6vh,28px);background:linear-gradient(90deg,var(--hair-strong),rgba(198,165,104,0))}
.nav-foot-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px clamp(16px,1.6vw,28px)}
/* Request Service: a slightly more prominent outline button (same sweep as the live ghost button) */
.nav-cta{position:relative;z-index:0;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:14px clamp(20px,1.9vw,28px);overflow:hidden;
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);text-decoration:none;
  border:1px solid var(--hair-strong);transition:color var(--t-med) var(--ease-out),border-color var(--t-med) var(--ease-out)}
.nav-cta span{padding-left:.24em}
.nav-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform var(--t-med) var(--ease-io)}
.nav-cta:hover,.nav-cta:focus-visible{color:var(--bg);border-color:var(--gold)}
.nav-cta:hover::before,.nav-cta:focus-visible::before{transform:scaleX(1);transform-origin:left}
.nav-cta:focus-visible{outline:1px solid var(--gold);outline-offset:5px}
.nav-small{display:flex;flex-wrap:wrap;gap:4px clamp(16px,1.6vw,28px)}   /* About added (v4): gaps scale so the row stays on one line */
.nav-s{display:inline-block;padding:12px 0;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;transition:color var(--t-fast) var(--ease-out)}
.nav-s:hover,.nav-s:focus-visible{color:var(--ink)}

/* item reveal: fade + 8px rise, staggered; on close they fade together, fast */
[data-n="0"]{--n:0}[data-n="1"]{--n:1}[data-n="2"]{--n:2}[data-n="3"]{--n:3}[data-n="4"]{--n:4}[data-n="5"]{--n:5}
[data-n="6"]{--n:6}[data-n="7"]{--n:7}[data-n="8"]{--n:8}[data-n="9"]{--n:9}[data-n="10"]{--n:10}
.nav-rv{opacity:0;transform:translate3d(0,8px,0);transition:opacity .18s linear,transform .18s linear}
.nav-open .nav-rv{opacity:1;transform:translate3d(0,0,0);
  transition:opacity .6s var(--nav-out) calc(.16s + var(--n) * .04s),transform .7s var(--nav-out) calc(.16s + var(--n) * .04s)}
/* thumbnail draw-in: a left-to-right wipe made of two opposite translations (clip box + counter-moved image), transform only, once per open */
.nav-thumb{transform:translate3d(-100%,0,0);transition:transform .18s linear}
.nav-thumb-in{transform:translate3d(100%,0,0);transition:transform .18s linear}
.nav-open .nav-thumb,.nav-open .nav-thumb-in{transform:translate3d(0,0,0);transition:transform 1.1s cubic-bezier(.65,0,.25,1) calc(.34s + var(--n) * .04s)}

/* ---- phones: full-screen, fades in (no slide) ---- */
@media (max-width:760px){
  :root{--nav-h:64px}
  .nav-mark{font-size:12px;letter-spacing:.3em}
  .nav-drawer{width:auto;left:0;transform:none;opacity:0;background:radial-gradient(120% 40% at 50% 0%,rgba(198,165,104,.06),transparent 70%),rgba(10,18,32,.96);
    box-shadow:none;transition:opacity .34s var(--nav-ease),visibility 0s linear .34s}
  .nav-open .nav-drawer{transform:none;opacity:1;transition:opacity .45s var(--nav-out),visibility 0s}
  .nav-drawer::before{position:absolute;top:var(--nav-h);bottom:auto;left:var(--pad);right:var(--pad);width:auto;height:1px;
    background:linear-gradient(90deg,rgba(198,165,104,.55),rgba(198,165,104,0))}
  .nav-inner{padding:calc(var(--nav-h) + clamp(12px,2.4vh,28px)) var(--pad) clamp(16px,2.6vh,28px)}
  .nav-groups{gap:clamp(12px,1.8vh,24px);padding-bottom:clamp(14px,2vh,24px)}
  .nav-head{gap:14px;margin-bottom:2px}
  .nav-h{font-size:clamp(22px,6.2vw,26px);gap:12px}
  .nav-h::before{width:16px}
  .nav-thumb{width:clamp(48px,18.5vw,88px);flex:0 1 auto;min-width:48px}
  .nav-head-line{min-width:0}
  .nav-list{padding-left:28px}
  .nav-a{padding:clamp(4px,.6vh,8px) 0}
  .nav-t{font-size:16px}
  .nav-d{font-size:13px;line-height:1.45;margin-top:1px}
  .nav-foot-row{gap:4px 24px}
  .nav-cta{flex:1 0 100%}
  .nav-scrim{display:none}
}
@media (max-width:359px){.nav-d,.nav-thumb,.nav-head-line{display:none}}   /* 320-359: titles only (no room beside the headings), so the list stays calm and tappable */
/* short desktop windows */
@media (min-width:761px) and (max-height:820px){
  .nav-d{margin-top:1px}
  .nav-rule{margin-bottom:14px}
}
@media (min-width:761px) and (max-height:700px){
  .nav-inner{padding-top:calc(var(--nav-h) + 8px);padding-bottom:20px}
  .nav-groups{gap:14px;padding-bottom:18px}
  .nav-a{padding:4px 0}
}

/* ---- no JS: :target fallback (plain, no animation needed) ---- */
.nav-nojs-close{display:none}
html:not(.nav-js) .nav-drawer:target{transform:none;opacity:1;visibility:visible}
html:not(.nav-js) .nav-drawer:target .nav-rv,html:not(.nav-js) .nav-drawer:target .nav-thumb,html:not(.nav-js) .nav-drawer:target .nav-thumb-in{opacity:1;transform:none}
html:not(.nav-js) .nav-drawer:target .nav-nojs-close{display:block;position:fixed;z-index:45;top:calc((var(--nav-h) - 48px) / 2);right:calc(var(--pad) - 12px);width:48px;height:48px}
html:not(.nav-js) .nav-drawer:target .nav-nojs-close:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
html:not(.nav-js) body:has(.nav-drawer:target) .nav-scrim{opacity:1;visibility:visible}
html:not(.nav-js) body:has(.nav-drawer:target) .nl-a{transform:translate3d(0,5.5px,0)}
html:not(.nav-js) body:has(.nav-drawer:target) .nl-b{transform:translate3d(0,-5.5px,0)}
html:not(.nav-js) body:has(.nav-drawer:target) .nl-a .nl-in{transform:rotate(45deg) scaleX(.9)}
html:not(.nav-js) body:has(.nav-drawer:target) .nl-b .nl-in{transform:rotate(-45deg) scaleX(.9)}
html:not(.nav-js) body:has(.nav-drawer:target) .nav-btn{pointer-events:none}   /* the close link underneath takes the tap */

/* ---- reduced motion: no slide, no rise, no morph tween, no draw-in; simple short fades ---- */
@media (prefers-reduced-motion:reduce){
  .nl,.nl-in,.nav-open .nl,.nav-open .nl-in,.nl-in::after,.nav-open .nl-in::after{transition:none!important}
  .nav-drawer,.nav-open .nav-drawer{transform:none!important}
  .nav-drawer{opacity:0;transition:opacity .18s linear,visibility 0s linear .18s}
  .nav-open .nav-drawer{opacity:1;transition:opacity .18s linear,visibility 0s}
  .nav-rv,.nav-open .nav-rv{transform:none;transition:none}
  .nav-thumb,.nav-thumb-in,.nav-open .nav-thumb,.nav-open .nav-thumb-in{transform:none!important;transition:none!important}
  .nav-scrim,.nav-open .nav-scrim{transition-duration:.18s}
  .nav-bar::before{transition:opacity .18s linear}
}
/* phones: the full-screen drawer hides the hero captions underneath (desktop keeps them, dimmed by the scrim) */
@media (max-width:760px){.ov{transition:opacity .3s var(--nav-ease)}.nav-open .ov{opacity:0}}

/* bfcache return (nav.js): the drawer left open by a page change closes in one frame, no slide */
.nav-instant .nav-drawer,.nav-instant .nav-scrim,.nav-instant .nl,.nav-instant .nl-in,.nav-instant .nl-in::after,.nav-instant #main{transition:none!important}