.hero-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, oklch(0.22 0.045 145 / 0.92) 0%, oklch(0.22 0.045 145 / 0.42) 46%, oklch(0.22 0.045 145 / 0) 78%),
    linear-gradient(0deg, oklch(0.22 0.045 145 / 0.72) 0%, oklch(0.22 0.045 145 / 0) 52%);
}

.site-header.is-solid {
  background-image: none !important;
  background-color: var(--forest) !important;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

body.nav-open { overflow: hidden; }
header .section-shell > a img {
  height: 3.15rem;
  width: auto;
}

.header-cta,
.menu-toggle { display: none; }

.menu-toggle {
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: transparent;
  color: var(--surface);
  cursor: pointer;
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgb(0 0 0 / 0.55);
}

.nav-backdrop[hidden] { display: none; }

.side-nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  width: min(86vw, 22rem);
  height: 100vh;
  height: 100dvh;
  padding: 1.25rem 1.25rem 1.75rem;
  background: var(--forest);
  color: var(--surface);
  transform: translateX(-105%);
  transition: transform 0.28s ease;
  box-shadow: 16px 0 40px rgb(0 0 0 / 0.28);
}

.side-nav.is-open { transform: translateX(0); }

.side-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.side-nav-head img {
  height: 3.4rem;
  width: auto;
}

.side-close {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid color-mix(in oklch, var(--surface) 25%, transparent);
  background: transparent;
  color: var(--surface);
  cursor: pointer;
}

.side-nav nav {
  display: flex;
  flex-direction: column;
  margin-top: 1.75rem;
}

.side-nav nav a {
  border-bottom: 1px solid color-mix(in oklch, var(--surface) 12%, transparent);
  padding: 0.95rem 0;
  color: var(--surface);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
}

.side-nav nav a.is-active,
.side-nav nav a:hover { color: var(--gold); }

.side-cta {
  align-self: flex-start;
  margin-top: auto;
  width: auto;
  height: 2.15rem !important;
  padding: 0 0.8rem !important;
  font-size: 0.62rem;
  gap: 0.35rem;
}

.side-cta .icon {
  width: 0.8rem;
  height: 0.8rem;
}

@media (max-width: 79.99rem) {
  .menu-toggle { display: inline-flex; }
  body.nav-open .menu-toggle {
    visibility: hidden;
    pointer-events: none;
  }
}

@media (min-width: 40rem) {
  header .section-shell > a img { height: 4rem; }
}

@media (min-width: 80rem) {
  .header-cta { display: inline-flex !important; }
  .menu-toggle,
  .side-nav,
  .nav-backdrop { display: none !important; }
}

a.inline-flex { text-decoration: none; }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

/* SVGs without a size default to 300x150 and overflow buttons on mobile. */
svg.icon {
  display: block;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

svg.icon.size-4 { width: 1rem; height: 1rem; }
svg.icon.size-5 { width: 1.25rem; height: 1.25rem; }
svg.icon.size-6 { width: 1.5rem; height: 1.5rem; }
svg.icon.size-7 { width: 1.75rem; height: 1.75rem; }
svg.icon.size-10 { width: 2.5rem; height: 2.5rem; }

.inline-flex,
a.inline-flex,
button.inline-flex {
  max-width: 100%;
  overflow: hidden;
}

.h-13 {
  height: 3.25rem;
}