/* ============================= PUSHY MOBILE NAV (pushy.css) ============================= */
.hamburger{
  display:none; background:none; border:none; width:40px; height:40px;
  padding:0; align-items:center; justify-content:center; position:relative;
  font-size: 20px; color: var(--navy);
}
.hamburger .icon-close{ display:none; }
.hamburger[aria-expanded="true"] .icon-bars{ display:none; }
.hamburger[aria-expanded="true"] .icon-close{ display:inline-block; }

.mobile-nav{
  display:none;
  position: fixed; top: var(--header-h, 84px); right: 0; bottom: 0; left: 0; z-index:99;
  background: var(--navy); color: var(--white);
  padding: 12px var(--gutter) 40px;
  overflow-y:auto;
  transform: translateY(-8px); opacity:0; pointer-events:none;
  transition: transform .25s ease, opacity .25s ease;
}
.mobile-nav.is-open{ transform: translateY(0); opacity:1; pointer-events:auto; }
.mobile-nav ul{ display:flex; flex-direction:column; }
.mobile-nav ul a{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 18px 0; font-size: 22px; font-family: var(--font-serif); font-weight:500;
  border-bottom: 1px solid var(--line-on-navy);
}
.mobile-nav ul a::after{
  content: "\f054";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 14px;
  flex: none;
  opacity: 0.55;
}
.mobile-nav-social{ display:flex; gap:16px; margin-top: 28px; }

@media (max-width: 900px){
  .main-nav{ display:none; }
  .hamburger{ display:flex; }
  .mobile-nav{ display:block; }
}