.noti-bar{
  background:#def2f2;
  color:#339b98;
  text-align: center;
  min-height:46px;
}
header {
  position: sticky;
  top: var(--adminbar, 0px);
  left: 0; right: 0;
  z-index: 1001;
  background: #fff;
  box-shadow: 0 2px 5px rgb(0 0 0 / .1);
}
.noti-bar a{color:#339b98;display:block;width:100%;text-decoration:none;padding:15px 25px;}
.noti-bar a:hover{
  background:#339b98;
  color:#def2f2;
}
nav.secondary-nav{
  background: #58595b;
  box-sizing: border-box;
  color: #ffffff;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding:0px 25px;
  min-height:41px;
}
nav.secondary-nav a{
  padding:.75rem 1rem;
  color:#ffffff;
  height:100%;
}
.secondary-nav svg{display:inline-block;fill:#ffffff;position:relative;vertical-align:middle;top:-1px;}
nav.secondary-nav a:hover{background:#7e7f82}
header #primary-bar{padding:0px 25px;min-height:121px}
.site-branding img{width:150px;height:auto;display:block}
.display-none,.site-nav-toggle,#menu-item-5045,#menu-item-5046,#menu-item-330,#menu-item-25586,#menu-item-332{display:none}
#primary-menu>li{position:relative;padding: 0 2rem;}
#primary-menu a, #primary-menu a:visited{color:#333333}
#primary-menu>li>a{display:flex;height:100%;width:100%;align-items:center;justify-items:center}
#primary-menu .sub-menu {
  position: absolute;
    top: 100%;
    width: 300px;
    left: 50%;
    background: #dedeef;
    height: auto;
    border-radius: 0px 0px 3px 3px;
    transform:translateX(-50%) scale(0.8);
    transform-origin:center top;
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0s linear 0.25s;
    opacity:0;
    visibility: hidden;
    z-index:999;
    border-top: 2px solid #706db2;
}
#primary-menu .sub-menu li {
    text-align: center;
}
#primary-menu .sub-menu a {
    padding: 1rem;
    width:100%;
}
#primary-menu .sub-menu li:last-of-type a {
    padding-bottom: 1.5rem;
}
#primary-menu .sub-menu a:hover {
    background: #706db2;
    color: #ffffff;
}
.site-branding{line-height:0rem}

/* Hamburger Menu */
/* A11y helper (you already have something similar in your CSS) */
.visually-hidden {
  position:absolute!important;
  height:1px;width:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

/* The clickable toggle */
.nav-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;   /* nice tap target */
  cursor:pointer;
}

/* The hamburger icon (3 bars via pseudo-elements) */
.hamburger {
  position:relative;
  width:24px; height:2px;
  background:#706db2;
  transition:transform .25s ease, background-color .2s ease, opacity .2s ease;
}
.hamburger::before,
.hamburger::after {
  content:"";
  position:absolute; left:0;
  width:24px; height:2px;
  background:#706db2;
  transition:transform .25s ease, top .25s ease, opacity .2s ease;
}
.hamburger::before { top:-8px; }
.hamburger::after  { top: 8px; }

/* Base bars stay the same as you have */
.hamburger { position: relative; width: 24px; height: 2px; background: #706db2; transition: transform .25s, background-color .2s, opacity .2s; }
.hamburger::before,
.hamburger::after { content: ""; position: absolute; left: 0; width: 24px; height: 2px; background: #706db2; transition: transform .25s, top .25s, opacity .2s; }
.hamburger::before { top: -8px; }
.hamburger::after  { top:  8px; }

/* When menu is open, morph to X */
header.site-header.nav-open .hamburger { background-color: transparent; }
header.site-header.nav-open .hamburger::before { top: 0; transform: rotate(45deg); }
header.site-header.nav-open .hamburger::after  { top: 0; transform: rotate(-45deg); }

/* Optional: reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hamburger, .hamburger::before, .hamburger::after {
    transition: none;
  }
}

@media screen and (min-width:931px) {
  #primary-menu li:hover > .sub-menu,
  #primary-menu li:focus-within > .sub-menu {
    transform: translateX(-50%) scale(1);
    opacity: 1;
    visibility: visible;
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0s linear 0s;
  }
}
@media screen and (max-width:1090px) {
  #primary-menu.gap-30{gap:0px;}
  #primary-menu>li{padding:0 1rem}
}
@media screen and (max-width:930px) {
  .primary-inner{justify-content:center;gap:0}
  header #primary-bar{padding:0px}
  nav.secondary-nav{display:none;}
  #primary-menu.gap-30{gap:0px;height:auto}
  #primary-bar .header-cta {order:1;flex-basis:110px;margin-left:10px}
  #primary-bar .header-cta a.btn {font-size:0.9rem;line-height:1rem;padding:6px 12px}
  .site-branding{order:2;flex:1;display:flex;justify-content:center}
  .site-nav-toggle{order:3;flex-basis:110px;display:flex;justify-content:flex-end;align-items:center;margin-right:10px}
  button.nav-toggle{padding:unset}
  #site-navigation{order:4;display:none}
  header.site-header.nav-open #site-navigation {display: block;flex:100%;}
  #primary-menu{flex-direction:column}
  #primary-menu>li{padding:0}
  #primary-menu>li>a{padding:1rem}
  #primary-menu .sub-menu {
      position: relative;
      opacity: 100;
      visibility: visible;
      display: block;
      transform: unset;
      left: unset;
      top: unset;
      width:100%;
      background:unset;
      border-top:1px solid #dfdfdf;
      border-bottom:1px solid #dfdfdf;
  }
  header .sub-menu{box-shadow:unset;
    -webkit-box-shadow:unset;
    -moz-box-shadow:unset}
  #primary-menu .sub-menu a{padding:1rem 1rem 1rem 3rem}
  #primary-menu .sub-menu li{text-align:left;}
  #primary-menu a:hover, #primary-menu .sub-menu a:hover{background:#dedeef;color:#706db2}
  #menu-item-5045, #menu-item-5046, #menu-item-330, #menu-item-25586, #menu-item-332{display:block}

/* Click-to-open behavior only at mobile/tablet sizes */
body.use-click-nav #primary-menu .sub-menu { 
  display: none;
}
body.use-click-nav #primary-menu li.is-open > .sub-menu {
  display: block;
}

/* Make room for the caret button on top-level items */
#primary-menu > li {
  position: relative;
}
#primary-menu > li > a {
  padding-right: 2.25rem; /* room for the caret button */
}

/* The caret toggle button */
.submenu-toggle {
  position: absolute;
  right: 17px;
  top: 24px;
  transform: translateY(-50%);
  width: 30px;
  height: 24px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

/* The caret arms */
.submenu-toggle::before,
.submenu-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 11px;
  height: 2px;
  background-color: #706db2;
  transition: transform 0.2s ease;
}

/* Left arm */
.submenu-toggle::before {
  left: 6px;
  transform: translateY(-50%) rotate(45deg);
}

/* Right arm */
.submenu-toggle::after {
  right: 6px;
  transform: translateY(-50%) rotate(-45deg);
}

/* When open: flip arms upward */
#primary-menu li.is-open > .submenu-toggle::before {
  transform: translateY(-50%) rotate(-45deg);
}
#primary-menu li.is-open > .submenu-toggle::after {
  transform: translateY(-50%) rotate(45deg);
}

/* Optional hover focus styles */
.submenu-toggle:focus-visible {
  outline: 2px solid #706db2;
  outline-offset: 2px;
}
}

@media screen and (max-width:650px) {
  .site-branding img {
      width: 100px;
  }
  header #primary-bar { min-height:90px; }
}