.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.utility-bar,
.topbar,
.main-nav { transition: opacity .42s ease, transform .42s cubic-bezier(.22,.61,.36,1), max-height .42s ease, margin .42s ease; }
.utility-bar { max-height: 60px; overflow: hidden; }
.topbar { max-height: 360px; overflow: hidden; }
.scroll-brand { display: block; width: 0; height: 0; max-width: 0; opacity: 0; overflow: hidden; transform: translateX(-18px); transition: width .4s ease, height .4s ease, max-width .4s ease, opacity .3s ease, transform .4s cubic-bezier(.22,.61,.36,1); }
.utility-bar { background: #073C2E; }
.utility-row { min-height: 47px; display: flex; align-items: center; justify-content: space-between; color: #d6dfda; font-size: .77rem; font-weight: 800; letter-spacing: .06em; }
.utility-row div { display: flex; gap: 36px; }
.utility-row a { color: #fff; }
.nav-row nav { flex: 1; }
.menu { width: 100%; justify-content: flex-start; gap: 8px; }
.menu a { display: inline-block; padding: 9px 12px; text-transform: uppercase; }
.menu a.is-active,
.menu .current-menu-item a {
  background: #073C2E;
  color: #F77F00;
  font-weight: 800;
}

.site-header.is-scrolled .topbar,
.site-header.is-scrolled .utility-bar { max-height: 0; opacity: 0; transform: translateY(-100%); }
.site-header.is-scrolled .main-nav { margin-top: 0; border-top: 0; }
.site-header.is-scrolled .nav-row { height: 61px; min-height: 61px; overflow: hidden; }
.site-header.is-scrolled .scroll-brand { width: 210px; height: 44px; max-width: 210px; opacity: 1; transform: translateX(0); flex: 0 0 auto; }
.site-header.is-scrolled .scroll-brand img {
  display: block;
  width: 210px;
  max-height: 44px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.site-header.is-scrolled .main-nav { animation: banner-drop .52s cubic-bezier(.22,.61,.36,1) both; }
@keyframes banner-drop { from { opacity: 0; transform: translateY(-28px); } to { opacity: 1; transform: translateY(0); } }

.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (max-width: 760px) {
  .utility-row { min-height:39px; font-size:.62rem; }
  .utility-row div { gap:12px; }
  .utility-row div span:last-child { display:none; }
  .main-nav { position:relative; }
  .nav-row { min-height:70px; align-items:center; padding:10px 0; gap:14px; }
  .menu-toggle { display:inline-flex; align-items:center; justify-content:center; flex-direction:column; gap:5px; width:48px; height:48px; padding:0; border:1px solid #fff; border-radius:5px; background:transparent; color:#fff; cursor:pointer; }
  .menu-toggle > span:not(.screen-reader-text) { display:block; width:24px; height:2px; background:currentColor; border-radius:2px; transition:transform .2s ease,opacity .2s ease; }
  .main-nav.is-open .menu-toggle > span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .main-nav.is-open .menu-toggle > span:nth-child(2) { opacity:0; }
  .main-nav.is-open .menu-toggle > span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  .nav-row nav { display:none; }
  .main-nav.is-open .nav-row nav { display:block; position:absolute; top:100%; left:0; right:0; padding:8px 18px 20px; background:var(--green); border-top:1px solid rgba(255,255,255,.28); box-shadow:0 14px 20px #073c2e33; }
  .menu { display:flex; flex-direction:column; gap:3px; flex-wrap:nowrap; }
  .menu a { display:block; padding:13px 10px; font-size:1.05rem; }
  .personal { margin-left:auto; padding:10px 15px; font-size:.92rem; }
  .site-header.is-scrolled .nav-row { overflow:visible; }
  .site-header.is-scrolled .scroll-brand { display:none; }
  .site-header.is-scrolled .main-nav { animation:none; }
}