/* ============================================================================
   NAV - floating rounded pill header, 4 routes, lime-dot dropdowns, side drawer.
   Scoped .s-nav. Reuses .btn from base.css.
   ========================================================================== */
.s-nav{ --nav-h:60px; position:fixed; top:0; left:0; right:0; z-index:var(--z-nav);
  padding:14px var(--gutter) 0; font-family:var(--f-body); pointer-events:none }
.s-nav > *{ pointer-events:auto }

/* HOME ONLY (cycle 13b, owner): the header starts hidden and appears once the hero is
   scrolled past - the hero logo is the brand moment, the nav mark would double it.
   Progressive enhancement: the state class is only ever applied by nav.js, and the hidden
   rule is scoped behind :where(.js), so no-JS users always have the header. Keyboard focus
   entering the nav (tab / skip-link) reveals it regardless of scroll position. Fixed
   position + opacity/transform = zero layout shift; --dur-base collapses under
   reduced-motion via tokens.css. */
:where(.js) .s-nav{ transition:opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard) }
:where(.js) .s-nav.s-nav--home-hidden:not(:focus-within){
  opacity:0; transform:translateY(-10px); pointer-events:none }
:where(.js) .s-nav.s-nav--home-hidden:not(:focus-within) > *{ pointer-events:none }
@media (max-width:1023px){ .s-nav{ --nav-h:56px; padding-top:10px } }
/* phone + tablet (owner request, cycle 17): the mark centers in the pill; burger stays
   right. Absolute centering = zero layout shift when the bar appears or scrolls, and the
   pill keeps its flex flow for the burger. Desktop unchanged. */
@media (max-width:1023px){
  .s-nav__bar{ position:relative }
  .s-nav__logo{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) }
}

.s-nav__skip{ position:absolute; left:-9999px; top:0; background:var(--lime); color:var(--lime-ink);
  padding:var(--s-3) 18px; font-family:var(--f-mono); font-size:var(--t-small); z-index:calc(var(--z-modal) + 2) }
.s-nav__skip:focus{ left:var(--gutter); top:12px }

/* ---- floating pill bar ---- */
.s-nav__bar{
  max-width:1120px; margin-inline:auto; height:var(--nav-h);
  /* at very wide viewports the pill was stranded in the middle third with ~500px of
     dead gutter each side; let it grow toward the content grid instead. */
  display:flex; align-items:center; gap:var(--s-5); padding:0 var(--s-2) 0 20px;
  background:rgba(18,18,20,.72); border:1px solid var(--ink-40); border-radius:var(--r-btn);
  -webkit-backdrop-filter:blur(14px) saturate(120%); backdrop-filter:blur(14px) saturate(120%);
  transition:background var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
@media (min-width:1600px){ .s-nav__bar{ max-width:1200px } }
.s-nav.is-scrolled .s-nav__bar{ background:rgba(12,12,14,.9); box-shadow:0 10px 30px -12px rgba(0,0,0,.7) }
.s-nav__logo{ display:inline-flex; align-items:center; flex:none }
.s-nav__logo img{ height:24px; width:auto; display:block }

/* ---- desktop links ---- */
.s-nav__links{ display:flex; align-items:center; gap:4px; margin-inline:auto }
.s-nav__item{ position:relative }
.s-nav__link{ display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 14px;
  font-size:var(--t-note); color:var(--paper); border-radius:var(--r-btn); text-transform:lowercase;
  transition:color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard) }
.s-nav__link:hover, .s-nav__link[aria-expanded="true"], .s-nav__item:hover .s-nav__link{ color:var(--paper-full); background:rgba(255,255,255,.04) }
.s-nav__link[data-menu]::after{ content:""; width:5px; height:5px; border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform var(--dur-fast) var(--ease-standard); opacity:.7 }
.s-nav__link[aria-expanded="true"]::after{ transform:translateY(1px) rotate(225deg) }
.s-nav__link--plain{ text-decoration:none }

/* ---- floating dropdown panel ---- */
.s-nav__menu{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translate(-50%,-6px);
  width:340px; max-width:calc(100vw - 2*var(--gutter)); padding:14px; border-radius:18px;
  background:rgba(16,16,18,.96); border:1px solid var(--ink-40);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.85);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}
/* bridge the 14px gap between trigger and panel so hover doesn't flicker-close mid-travel */
.s-nav__menu::before{ content:""; position:absolute; left:0; right:0; top:-14px; height:14px }
.s-nav__menu--wide{ width:min(520px, calc(100vw - 2*var(--gutter))) }
/* two-group panel: capabilities + revenue lanes, so the bar stays at four items */
.s-nav__menu--split{ width:min(620px, calc(100vw - 2*var(--gutter)));
  display:grid; grid-template-columns:1.15fr .85fr; gap:var(--s-4) var(--s-5) }
.s-nav__group-title{ margin:2px 0 8px 11px; font-size:var(--t-eyebrow); letter-spacing:var(--track-eyebrow);
  text-transform:uppercase; color:var(--paper-muted) }
.s-nav__group + .s-nav__group{ border-left:1px solid var(--ink-40); padding-left:var(--s-4) }
.s-nav__item:hover .s-nav__menu, .s-nav__item:focus-within .s-nav__menu, .s-nav__menu.is-open{
  opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0);
  transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear 0s;
}
.s-nav__list{ display:flex; flex-direction:column; gap:2px }
.s-nav__list--grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px 10px }
.s-nav__list a{ display:flex; align-items:flex-start; gap:11px; padding:9px 11px; border-radius:12px;
  color:var(--paper); text-transform:lowercase; transition:background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard) }
.s-nav__list a:hover{ background:rgba(255,255,255,.05); color:var(--paper-full) }
.s-nav__list b{ font-weight:600; font-size:var(--t-note); display:block }
.s-nav__list em{ font-style:normal; font-size:var(--t-eyebrow); color:var(--paper-muted); display:block; margin-top:2px; line-height:1.35 }
.s-nav__dot{ width:7px; height:7px; border-radius:var(--r-btn); background:var(--lime); flex:none; margin-top:7px }
.s-nav__list--grid a{ align-items:center; font-size:var(--t-note) } .s-nav__list--grid .s-nav__dot{ margin-top:0 }
.s-nav__list--flat a{ align-items:center; padding-block:7px; font-size:var(--t-note) } .s-nav__list--flat .s-nav__dot{ margin-top:0 }

/* ---- cta + burger ---- */
.s-nav__cta{ flex:none; padding:11px 20px; font-size:var(--t-small) }
.s-nav__burger{ display:none; flex:none; width:44px; height:44px; border-radius:var(--r-btn);
  flex-direction:column; align-items:center; justify-content:center; gap:5px }
.s-nav__burger span{ width:20px; height:2px; background:var(--paper-full); border-radius:2px; transition:transform var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard) }
.s-nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.s-nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.s-nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

/* ---- mobile drawer (side menu) ---- */
.s-nav__scrim{ position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:var(--z-modal);
  opacity:0; transition:opacity var(--dur-base) var(--ease-standard) }
.s-nav__scrim.is-open{ opacity:1 }
/* calc() requires whitespace around + : "calc(var(--z-modal)+1)" is INVALID and computed
   to z-index:auto, leaving the drawer UNDER the scrim - every drawer link tap hit the
   scrim (closing the drawer) and the panel rendered dimmed. Live bug, latent since the
   drawer shipped; caught by the cycle-7 dialog behavioral test. */
.s-nav__drawer{ position:fixed; top:0; right:0; height:100dvh; width:min(360px,86vw); z-index:calc(var(--z-modal) + 1);
  background:var(--ink-10); border-left:1px solid var(--lime); padding:76px 22px var(--s-5);
  display:flex; flex-direction:column; gap:6px; overflow-y:auto;
  transform:translateX(100%); transition:transform var(--dur-base) var(--ease-out) }
.s-nav__drawer.is-open{ transform:translateX(0) }
.s-nav__drawer-close{ position:absolute; top:18px; right:20px; width:44px; height:44px; font-size:30px; color:var(--paper) }
.s-nav__acc{ border-bottom:1px solid var(--ink-40) }
.s-nav__acc summary{ list-style:none; cursor:pointer; padding:15px 4px; font-size:var(--t-body-lg); color:var(--paper-full);
  text-transform:lowercase; display:flex; justify-content:space-between; align-items:center }
.s-nav__acc summary::-webkit-details-marker{ display:none }
.s-nav__acc summary::after{ content:"+"; color:var(--lime); font-size:22px }
.s-nav__acc[open] summary::after{ content:"\2013" }
.s-nav__acc a{ display:block; padding:9px 4px 9px var(--s-4); font-size:var(--t-note); color:var(--paper); text-transform:lowercase }
.s-nav__acc a:hover{ color:var(--lime) }
/* display:block is load-bearing: anchors are inline by default, and with two plain links
   (cycle 15 regroup) they rendered side-by-side squished on one line (owner-reported).
   Every drawer entry is a full-width row. */
.s-nav__drawer-link{ display:block; width:100%; padding:15px 4px; font-size:var(--t-body-lg); color:var(--paper-full); text-transform:lowercase; border-bottom:1px solid var(--ink-40) }
.s-nav__drawer-cta{ margin-top:auto; justify-content:center; width:100% }

@media (max-width:1023px){
  .s-nav__links{ display:none }
  .s-nav__cta{ display:none }
  .s-nav__burger{ display:inline-flex; margin-left:auto }
  .s-nav__bar{ padding-right:6px }
}
@media (min-width:1024px){ .s-nav__drawer, .s-nav__scrim{ display:none } }

/* cycle 15: drawer category group labels (industries accordion) */
.s-nav__drawer .s-nav__group-label{
  margin:14px 0 4px; font-size:var(--t-label); letter-spacing:var(--track-eyebrow);
  text-transform:uppercase; color:var(--ink-60);
}
.s-nav__drawer .s-nav__group-label:first-of-type{ margin-top:6px; }