/* Monarchy v10: one top nav on every page (home, case studies, /resources, articles).
   Same items, same order, same metrics; the active item changes colour and underline only, never width. */
header.nav .nav-links{align-items:center;list-style:none;margin:0;padding:0}
header.nav .nav-links > li{position:relative}
header.nav .nav-links > li > a{font-size:.95rem!important;font-weight:500!important;letter-spacing:normal!important;line-height:1.5;white-space:nowrap;padding:0!important}
header.nav .nav-links > li > a.active{font-weight:500!important}
/* underline sits outside the text box, so it cannot widen the item (it used to be a flex item inside "Work") */
header.nav .nav-links > li > a.active::after{content:""!important;display:block!important;position:absolute!important;left:0;right:0;bottom:-4px;height:2px;margin:0!important;background:var(--brand,#FC5000);border-radius:2px}
header.nav .nav-links > li.has-sub > a.active::after{right:calc(7px + .32rem)}
/* Resources: the same orange label and caret on every page (it was only styled on the home) */
header.nav .nav-links .nav-res-dd > a{color:#FC5000!important}
header.nav .nav-links .nav-res-dd > a::before{opacity:.8}
header.nav .nav-links .nav-res-dd > a.active::after{background:#FC5000}
header.nav .nav-links a.nav-res::before{display:none}
.nav-mobile li.mx-mres a{padding-left:1rem;font-size:1rem}
.nav-mobile li.mx-mres-h a{color:#FC5000!important}
/* pinned metrics (px, so pages with a different root font size or stylesheet still match the home) */
header.nav .nav-links{gap:20.48px!important}
header.nav .nav-links > li > a{font-size:15.2px!important}
header.nav .nav-links > li.has-sub > a{display:inline-flex!important;align-items:center;gap:5.12px!important}
header.nav .nav-links > li.has-sub > a::before{content:""!important;display:block!important;order:2;width:0!important;height:0!important;
  border-left:3.5px solid transparent!important;border-right:3.5px solid transparent!important;border-top:4px solid currentColor!important;border-bottom:0!important;
  opacity:.55;margin:1px 0 0!important;background:none!important;position:static!important}
header.nav .nav-links > li > a:not(.active)::after{content:none!important;display:none!important}
header.nav .nav-in > div:last-of-type > .theme-toggle{width:40px;height:40px}
@media (min-width:1241px){
  header.nav .nav-in{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;column-gap:16px!important;max-width:1344px!important;padding:0 24px!important;margin:0 auto!important}
  header.nav .nav-in > .nav-logo{justify-self:start}
  header.nav .nav-links{justify-self:center}
  header.nav .nav-in > div:last-of-type{justify-self:end}
}
/* dropdowns: the same on every page (stack.html loads site.css, which had no dropdown rules) */
header.nav .nav-links .nav-sub{display:none;position:absolute;top:calc(100% + .2rem);left:50%;transform:translateX(-50%);min-width:15.5rem;padding:.45rem 0 .35rem;margin:0;list-style:none;
  background:#161618;border:1px solid rgba(244,241,234,.16);border-radius:.55rem;box-shadow:0 18px 40px -18px rgba(0,0,0,.6);z-index:60}
header.nav .nav-links .nav-sub::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:.55rem}
header.nav .nav-links .has-sub:hover .nav-sub,header.nav .nav-links .has-sub:focus-within .nav-sub{display:block}
header.nav .nav-links .nav-sub a{display:block;padding:.48rem 1rem;font-size:.9rem;font-weight:500;color:#d8d2c8!important;white-space:nowrap}
header.nav .nav-links .nav-sub a:hover{color:#f4f1ea!important}
html[data-theme="light"] header.nav .nav-links .nav-sub{background:#fff;border:1px solid rgba(26,26,26,.12);box-shadow:0 18px 40px -18px rgba(0,0,0,.18)}
html[data-theme="light"] header.nav .nav-links .nav-sub a{color:#1a1a1a!important}
@media (min-width:1241px){header.nav .nav-in{height:72px!important}}