/* ── Site menu: dropdowns (Services, Industries, Case Studies) ───────────
   Loaded after typography.css on every page with the site nav. Desktop
   panels open on hover, keyboard focus, or click (nav-menu.js toggles
   .is-open for touch and Safari, which does not focus buttons on click).
   On phones the same groups become <details> lists in the mobile menu. */

#nav .nav-links{gap:4px}
#nav .nav-links > li{position:relative}

/* the top-level trigger looks exactly like the plain links next to it */
#nav .nav-drop-btn{
  font:inherit;font-size:14px!important;font-weight:500!important;letter-spacing:-0.16px!important;
  padding:7px 13px!important;border-radius:var(--pill,999px);background:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  color:rgba(20,17,13,.74);transition:color .15s;
}
#nav .nav-drop-btn:hover,#nav .nav-drop.is-open .nav-drop-btn{color:#14110D}
#nav.on-hero .nav-drop-btn{color:rgba(255,255,255,.72)}
#nav.on-hero .nav-drop-btn:hover,#nav.on-hero .nav-drop.is-open .nav-drop-btn{color:#fff}
#nav .nav-drop-btn svg{width:9px;height:9px;transition:transform .2s;opacity:.7}
#nav .nav-drop.is-open .nav-drop-btn svg{transform:rotate(180deg)}

/* ── Panels: frosted glass, aligned under their trigger ──────────────── */
#nav .nav-panel{
  position:absolute;top:calc(100% + 14px);left:0;transform:translateY(6px);
  padding:20px;border-radius:14px;text-align:left;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 24px 60px rgba(20,17,13,.14),0 2px 8px rgba(20,17,13,.05),inset 0 1px 0 rgba(255,255,255,.8);
  opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease,visibility 0s .18s;z-index:110;
}
/* invisible bridge so the pointer can travel from button to panel */
#nav .nav-panel::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
#nav .nav-drop:hover .nav-panel,#nav .nav-drop.is-open .nav-panel{
  opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .18s ease;
}

/* shared pieces */
#nav .np-label{display:block;margin:0 0 10px;padding:0 12px 10px;border-bottom:1px solid rgba(20,17,13,.08);
  font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(20,17,13,.52)}
#nav .nav-panel a{display:block!important;padding:0!important;border-radius:8px!important;white-space:normal!important;
  font-size:14px!important;font-weight:500!important;letter-spacing:-0.16px!important;color:#14110D!important;text-decoration:none}
#nav .np-desc{display:block;margin-top:3px;font-size:12.5px;font-weight:400;line-height:1.45;letter-spacing:0;color:rgba(20,17,13,.6)}
#nav .np-arrow{display:inline-block!important;width:11px;height:11px;margin-left:6px;vertical-align:-1px;opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .15s}
#nav .nav-panel a:hover .np-arrow,#nav .nav-panel a:focus-visible .np-arrow{opacity:.7;transform:none}

/* list rows */
#nav .nav-panel .np-item,#nav .nav-panel .np-case,#nav .nav-panel .np-link{padding:10px 12px!important;transition:background .15s}
#nav .nav-panel .np-item:hover,#nav .nav-panel .np-case:hover,#nav .nav-panel .np-link:hover,
#nav .nav-panel .np-item:focus-visible,#nav .nav-panel .np-case:focus-visible,#nav .nav-panel .np-link:focus-visible{background:rgba(255,255,255,.6)}
#nav .np-title{display:block}

/* Services: list + featured audit card */
#nav .np-services{display:grid;grid-template-columns:280px 240px;gap:16px;width:max-content}
#nav .nav-panel .np-feature{display:flex!important;flex-direction:column;padding:16px 18px!important;
  background:rgba(255,255,255,.55);border:1px solid rgba(20,17,13,.07);border-radius:10px!important;transition:background .15s}
#nav .nav-panel .np-feature:hover{background:rgba(255,255,255,.8)}
#nav .np-feature .np-label{padding:0 0 10px;margin-bottom:12px}
#nav .np-feature-title{font-size:16px;font-weight:500;letter-spacing:-.02em;line-height:1.25}
#nav .np-feature .np-desc{margin-top:8px;flex:1}
#nav .np-more{display:inline-block;margin-top:14px;font-size:13px;font-weight:500;color:#14110D}
#nav .np-feature .np-arrow{opacity:.7;transform:none}

/* Who we help: intro line, then two columns of example industries */
#nav .np-industries{width:440px}
#nav .np-intro{margin:0 0 8px;padding:0 12px;font-size:13px;line-height:1.5;color:rgba(20,17,13,.68)}
#nav.on-hero .np-intro{color:rgba(255,255,255,.72)}
#nav .np-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:4px}
#nav .nav-panel .np-link{padding:8px 12px!important}

/* Case studies: lead with the number */
#nav .np-cases{width:300px}
#nav .np-metric{display:block;font-size:15px;font-weight:500;letter-spacing:-.02em}

/* footer link */
#nav .nav-panel .np-foot{margin-top:10px;padding:12px 12px 2px!important;border-top:1px solid rgba(20,17,13,.08);border-radius:0!important;font-size:13px!important}
#nav .nav-panel .np-foot .np-arrow{opacity:.7;transform:none}

/* over the dark photo heroes: smoked glass, light text */
#nav.on-hero .nav-panel{background:rgba(20,17,13,.5);border-color:rgba(255,255,255,.14);
  box-shadow:0 24px 60px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.1)}
#nav.on-hero .nav-panel a,#nav.on-hero .np-more{color:#fff!important}
#nav.on-hero .np-desc{color:rgba(255,255,255,.66)}
#nav.on-hero .np-label{color:rgba(255,255,255,.55);border-bottom-color:rgba(255,255,255,.12)}
#nav.on-hero .nav-panel .np-item:hover,#nav.on-hero .nav-panel .np-case:hover,#nav.on-hero .nav-panel .np-link:hover{background:rgba(255,255,255,.08)}
#nav.on-hero .nav-panel .np-feature{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1)}
#nav.on-hero .nav-panel .np-feature:hover{background:rgba(255,255,255,.12)}
#nav.on-hero .nav-panel .np-foot{border-top-color:rgba(255,255,255,.12)}

/* tighter spacing between 1180px and the hamburger breakpoint */
@media(max-width:1080px){#nav .nav-links a,#nav .nav-drop-btn{padding:7px 9px!important}}

/* ── Mobile menu ── */
.mobile-menu{overflow-y:auto;justify-content:safe center!important;padding:88px 24px 40px}
.mobile-menu details{width:100%;max-width:340px;text-align:center}
.mobile-menu summary{
  list-style:none;cursor:pointer;color:#14110D;font-size:19px;font-weight:500;
  display:inline-flex;align-items:center;gap:8px;
}
.mobile-menu summary::-webkit-details-marker{display:none}
.mobile-menu summary svg{width:10px;height:10px;transition:transform .2s;opacity:.6}
.mobile-menu details[open] summary svg{transform:rotate(180deg)}
.mobile-menu details > div{display:flex;flex-direction:column;gap:14px;padding:18px 0 4px}
.mobile-menu details > div a{font-size:16px!important;font-weight:400!important;color:rgba(20,17,13,.72)!important}

/* The glass nav clips its children (overflow:hidden in each page's glass-strong
   block) to hold the hover sheen, which would also cut the panels off. The sheen
   is inset:0, so letting the bar overflow changes nothing else. */
html body #nav{overflow:visible !important}

/* Frost behind the open panel. Nothing inside the fixed nav can blur the page
   (the bar is its own backdrop layer), so nav-menu.js lays this body-level pane
   exactly under whichever panel is showing. */
.nav-glass{
  position:fixed;z-index:99;pointer-events:none;border-radius:14px;opacity:0;transition:opacity .18s;
  -webkit-backdrop-filter:blur(28px) saturate(1.8);backdrop-filter:blur(28px) saturate(1.8);
}
.nav-glass.is-on{opacity:1}

/* Mobile menu tap targets: every row at least 44px tall (Apple/Google minimum),
   spacing comes from the rows themselves instead of the column gap. */
html body .mobile-menu{gap:4px !important}
html body .mobile-menu > a:not(.btn-pill),html body .mobile-menu summary{
  min-height:48px;display:flex !important;align-items:center;justify-content:center;
  font-size:19px !important;font-weight:500 !important;
}
html body .mobile-menu summary{gap:8px}
html body .mobile-menu details > div{gap:0;padding:4px 0 10px}
html body .mobile-menu details > div a{min-height:44px;display:flex !important;align-items:center;justify-content:center}
html body .mobile-menu > a.btn-pill{margin-top:16px;min-height:48px}

/* Menu open over a dark-hero page: the bar sits on the light menu sheet, so the
   wordmark and close button switch to ink instead of staying white. */
html body:has(#mobileMenu.open) #nav .wordmark .wm-word{color:#14110D !important}
html body:has(#mobileMenu.open) #nav .wordmark .logo-img{filter:none !important}
html body:has(#mobileMenu.open) #nav .hamburger span{background:#14110D !important}