.site-header{position:absolute;top:0;left:0;right:0;z-index:50;height:var(--header-h)}
.has-hero .site-header{padding-inline:var(--panel-inset)} /* align with the inset hero panel */
.no-hero .site-header{position:relative;background:#fff}
/* Full-width bar: logo at the left edge, nav on the page centre, button at the right edge.
   The bar needs about 1216px to hold seven items, the logo and the button; below that the
   two 1fr columns shrink to nothing and the logo vanishes, so the menu switches to the
   mobile toggle at 76em rather than the layout's 64em. (Seven items since How it works.) */
.site-header__bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(1rem,3vw,3rem);height:100%;max-width:none;padding-inline:clamp(1.25rem,3.2vw,3.75rem)}
.site-logo{flex:none;display:block;justify-self:start}
.site-logo__img{height:clamp(2.5rem,3.4vw,4.0625rem);width:auto;object-fit:contain}

.site-nav{display:flex;align-items:center;flex:1;min-width:0;gap:2rem}
@media (min-width:76.01em){
  .site-nav{display:contents}
  .site-nav__list{margin:0;justify-self:center}
  .site-nav__cta{justify-self:end}
}
.site-nav__list{list-style:none;margin:0 auto;padding:0;display:flex;gap:clamp(1.25rem,2.4vw,2.75rem)}
.site-nav__list a{position:relative;display:inline-block;padding:.25rem 0;font-weight:var(--w-ui);font-size:var(--ui-size);line-height:var(--ui-lh);letter-spacing:var(--ui-track);color:var(--ink);white-space:nowrap;transition:color var(--dur) var(--ease)}
.site-nav__list a::after{content:"";position:absolute;left:0;right:0;bottom:-.25rem;height:2px;border-radius:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease)}
.site-nav__list a:hover,.site-nav__list .current-menu-item>a,.site-nav__list .current-menu-ancestor>a,.site-nav__list .current_page_parent>a{color:var(--blue)}
.site-nav__list a:hover::after,.site-nav__list .current-menu-item>a::after,.site-nav__list .current-menu-ancestor>a::after{transform:scaleX(1)}
.site-nav__cta{flex:none;width:15.875rem;filter:drop-shadow(var(--shadow-btn))}

/* ---- one level of sub-menu ------------------------------------------------ */
/* Compliance carries the two standards, and without this panel they are genuinely hard to reach.
   A panel rather than a list: it has to read as part of the header over a dark hero and over
   white, so it brings its own white ground either way. Opened by hover AND by focus-within, so a
   keyboard reaches it with no script; the parent is a real link to a real page, so a tap that
   never opens the panel still goes somewhere. */
.site-nav__list li{position:relative}
.site-nav__list .sub-menu{
  list-style:none;margin:0;padding:.5rem;
  position:absolute;top:100%;left:50%;z-index:2;
  min-width:15rem;transform:translate(-50%,.5rem);
  background:#fff;border:1px solid var(--hairline);border-radius:.875rem;
  box-shadow:0 1.5rem 3rem -1rem rgba(15,23,42,.18);
  display:flex;flex-direction:column;gap:.125rem;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s var(--ease),transform .28s var(--b2-ease),visibility 0s .22s;
}
/* The gap between the parent and the panel would drop the hover on the way down. */
.site-nav__list .menu-item-has-children::after{content:"";position:absolute;top:100%;left:0;right:0;height:.75rem}
.site-nav__list .menu-item-has-children:hover > .sub-menu,
.site-nav__list .menu-item-has-children:focus-within > .sub-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
  transition:opacity .22s var(--ease),transform .28s var(--b2-ease);
}
/* Rows, not centred labels: the underline that marks the top level would be lost in a panel. */
.site-nav__list .sub-menu a{display:block;padding:.625rem .75rem;border-radius:.5rem;white-space:normal;color:var(--ink)}
.site-nav__list .sub-menu a::after{display:none}
.site-nav__list .sub-menu a:hover,.site-nav__list .sub-menu .current-menu-item > a{background:var(--wash,#f7f8fa);color:var(--blue)}

/* A caret, so a parent that opens something does not look like a parent that does not. */
.site-nav__list .menu-item-has-children > a{padding-right:.875rem}
.site-nav__list .menu-item-has-children > a::before{
  content:"";position:absolute;right:0;top:50%;width:.375rem;height:.375rem;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg);transition:transform var(--dur) var(--ease);
}
.site-nav__list .menu-item-has-children:hover > a::before,
.site-nav__list .menu-item-has-children:focus-within > a::before{transform:translateY(-20%) rotate(225deg)}

.nav-toggle{display:none}

@media (max-width:76em){
  .site-header__bar{grid-template-columns:auto auto;justify-content:space-between}
  .nav-toggle{display:grid;place-items:center;position:relative;z-index:2;width:3rem;height:3rem;margin:0;padding:0;border:1px solid var(--hairline);border-radius:50%;background:#fff;cursor:pointer}
  .nav-toggle__bars,.nav-toggle__bars::before,.nav-toggle__bars::after{display:block;width:1.25rem;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),background .3s var(--ease)}
  .nav-toggle__bars{position:relative}
  .nav-toggle__bars::before,.nav-toggle__bars::after{content:"";position:absolute;left:0}
  .nav-toggle__bars::before{top:-6px}
  .nav-toggle__bars::after{top:6px}
  .nav-open .nav-toggle__bars{background:transparent}
  .nav-open .nav-toggle__bars::before{transform:translateY(6px) rotate(45deg)}
  .nav-open .nav-toggle__bars::after{transform:translateY(-6px) rotate(-45deg)}

  .site-nav{position:fixed;inset:0;z-index:1;flex-direction:column;justify-content:center;gap:2.5rem;padding:var(--header-h) var(--gutter) 3rem;background:#fff;opacity:0;visibility:hidden;transform:translateY(-1rem);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s}
  .nav-open .site-nav{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
  .site-nav__list{flex-direction:column;align-items:center;gap:1.5rem;margin:0}
  .site-nav__list a{font-size:1.5rem}
  /* No room for a floating panel, and nothing to hover with: the children just sit under
     their parent, smaller, always open. Colour alone marks the current one — the panel's
     tinted row reads as a stray pill under a centred list. */
  .site-nav__list .sub-menu{
    position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
    min-width:0;margin:.75rem 0 0;padding:0;border:0;border-radius:0;box-shadow:none;
    background:transparent;align-items:center;gap:.75rem;
  }
  .site-nav__list .sub-menu a{padding:0;font-size:1.0625rem;color:var(--muted-2)}
  .site-nav__list .sub-menu a:hover,.site-nav__list .sub-menu .current-menu-item > a{background:transparent}
  .site-nav__list .menu-item-has-children > a::before{display:none}
  .site-nav__list .menu-item-has-children::after{display:none}
  .site-nav__cta{width:auto;min-width:15rem}
  body.nav-open{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){.site-nav,.nav-toggle__bars,.nav-toggle__bars::before,.nav-toggle__bars::after{transition:none}}

/* Dark hero variant (body.hero-dark): white nav over the dark opening section */
.hero-dark .site-nav__list a{color:#fff}
.hero-dark .site-nav__list a:hover,.hero-dark .site-nav__list .current-menu-item>a,.hero-dark .site-nav__list .current-menu-ancestor>a{color:#3b9de8}
.hero-dark .site-nav__list a::after{background:#3b9de8}
/* The panel is white on both variants, so its rows keep the page ink rather than the
   white the top level takes over a dark hero. */
.hero-dark .site-nav__list .sub-menu a{color:var(--ink)}
.hero-dark .site-nav__list .sub-menu a:hover,.hero-dark .site-nav__list .sub-menu .current-menu-item > a{color:var(--blue)}
.hero-dark .site-logo--auto-light .site-logo__img{filter:brightness(0) invert(1)}
.hero-dark .site-nav__cta .btn2__label{border-color:transparent}
@media (max-width:76em){
  .hero-dark .nav-toggle{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
  .hero-dark .nav-toggle__bars,.hero-dark .nav-toggle__bars::before,.hero-dark .nav-toggle__bars::after{background:#fff}
  .hero-dark.nav-open .nav-toggle{background:#fff;border-color:var(--hairline)}
  .hero-dark.nav-open .nav-toggle__bars::before,.hero-dark.nav-open .nav-toggle__bars::after{background:var(--ink)}
  .hero-dark.nav-open .nav-toggle__bars{background:transparent}
  .hero-dark .site-nav__list a{color:var(--ink)}
  .hero-dark .site-nav .site-logo--auto-light{filter:none}
}