body { --nav-ease: cubic-bezier(0.22, 1, 0.36, 1); --nav-enter: 500ms; --nav-exit: 250ms; }
.nav_desktop_wrap {
  border-bottom: 1px solid transparent;
  box-shadow: 0 1px 0 rgba(27, 42, 74, 0);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.primary_nav_link,
.text-up-button { transition: color .2s ease; }
.navmenu__button { transition: color .3s ease; }
/* SCROLLED — and ALSO while the menu is open (the JS adds .is-scrolled then too, so the bar
   wears the frosted treatment behind the navy panel). One set of rules, not two — so the
   dark variant can't fall out of step. */
.nav_desktop_wrap.is-scrolled {
  background: rgba(248, 247, 244, .92);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: rgba(27, 42, 74, .08);  /* colour ONLY — the shorthand would reset
                                                  the 1px border declared above */
  box-shadow: 0 1px 0 rgba(27, 42, 74, .04);
}
.nav_desktop_wrap.is-scrolled .primary_nav_link,
.nav_desktop_wrap.is-scrolled .text-up-button { color: rgba(27, 42, 74, .7); }
.nav_desktop_wrap.is-scrolled .primary_nav_link:hover,
.nav_desktop_wrap.is-scrolled .text-up-button:hover { color: #1B2A4A; }
.nav_desktop_wrap.is-scrolled .navmenu__button { color: #1B2A4A; }
/* Logo classes are named for their OWN ink. !important beats the variant's Designer-set
   resting logo; scoped to .is-scrolled so resting logic is untouched. */
.nav_desktop_wrap.is-scrolled .logo_white { display: none !important; }
.nav_desktop_wrap.is-scrolled .logo_navy  { display: block !important; }
/* HAMBURGER. `.u-path` is stroke:currentColor → the mark inherits `.navmenu__button`'s
   colour. Set that per variant in the Designer; nothing else controls it. */
.navmenu__icon { width: 100%; height: 100%; }
.navmenu__icon .u-path {
  transform-box: view-box;   /* LOAD-BEARING. Without it each path rotates about its OWN
                                bounding box — degenerate for a 16x0 line, so the bars fly
                                off instead of crossing. This is the line Webflow ate. */
  transform-origin: 50% 50%;
  transition: transform 200ms var(--nav-ease), stroke .3s ease;
}
/* ORDER MATTERS. CSS applies a transform list RIGHT-TO-LEFT to the point, so the translate
   here runs FIRST — the bar moves to the centre (12,12), and the rotation then spins it in
   place about that centre. Written the other way round (`translateY() rotate()`) the bar
   rotates while still at y=9, swinging its centre out to (14.1, 9.9), and the X comes out
   skewed. The bars sit 3px either side of centre, so 3px of travel closes them. */
body.nav-in .navmenu__icon .is-top    { transform: rotate(45deg)  translateY(3px); }
body.nav-in .navmenu__icon .is-bottom { transform: rotate(-45deg) translateY(-3px); }
/* PANEL. `position: fixed` on the wrap is set in the DESIGNER — absolute would anchor it
   to the sticky bar, not the viewport, and it drifts once scrolled. */
@media (max-width: 991px) {
  /* `display` can't be transitioned: `nav-open` puts the panel in the layout, `nav-in`
     (next frame) runs the animation. Same pattern as the consent popup. */
  body.nav-open .nav_mobile_wrap { display: flex; }
  body.nav-open .navbar_mobile_overlay { display: block; }
  body.nav-open { overflow: hidden; }                 /* scroll lock */
  .nav_mobile_contain {
    transform: translateY(-100%);
    transition: transform var(--nav-exit) ease-in;
  }
  body.nav-in .nav_mobile_contain {
    transform: translateY(0);
    transition: transform var(--nav-enter) var(--nav-ease);
  }
  .navbar_mobile_overlay { opacity: 0; transition: opacity 150ms ease-in; }
  body.nav-in .navbar_mobile_overlay { opacity: 1; transition: opacity 200ms var(--nav-ease); }
}
@media (prefers-reduced-motion: reduce) {
  .nav_desktop_wrap, .primary_nav_link, .text-up-button, .navmenu__button,
  .nav_mobile_contain, .navbar_mobile_overlay, .navmenu__icon .u-path { transition: none; }
}