.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 16px clamp(18px, 4vw, 54px);
  color: #f5efe3;
  background: linear-gradient(180deg, rgba(5, 15, 12, .72), rgba(5, 15, 12, .18));
  transition: background 220ms ease, box-shadow 220ms ease, padding 220ms ease;
}

.site-header.scrolled,
.site-header.nav-open {
  padding-block: 11px;
  background: rgba(11, 29, 24, .92);
  box-shadow: 0 12px 32px rgba(3, 12, 10, .2);
  backdrop-filter: blur(16px);
}

.brand-link { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex: 0 0 auto; }
.brand-mark { width: 38px; height: 42px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(216,182,122,.25)); }
.brand-word { font-family: var(--serif); font-size: 1.18rem; font-weight: 600; letter-spacing: .22em; }

.site-nav { display: flex; align-items: center; justify-content: flex-end; gap: clamp(12px, 1.8vw, 25px); }
.site-nav a {
  position: relative;
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-nav a:not(.nav-cta)::after {
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 1px;
  content: "";
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}
.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav a.active::after { transform: scaleX(1); transform-origin: left; }

.site-nav .nav-cta {
  padding: 10px 15px;
  color: #173127;
  background: #f5f1e9;
  border-radius: 999px;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  color: inherit;
  cursor: pointer;
  background: transparent;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 50%;
}
.nav-toggle span { display: block; width: 18px; height: 1px; margin: 6px auto; background: currentColor; transition: transform 180ms ease; }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 1050px) {
  .site-nav { gap: 14px; }
  .site-nav a { font-size: .63rem; }
}

@media (max-width: 900px) {
  .nav-toggle { z-index: 31; display: block; }
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: grid;
    place-content: center;
    gap: 24px;
    color: var(--ivory);
    background: rgba(13, 36, 31, .98);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 180ms ease, transform 180ms ease;
  }
  .site-nav.open { opacity: 1; pointer-events: auto; transform: none; }
  .site-nav a { font-size: .95rem; text-align: center; }
  .site-nav .nav-cta { color: var(--pine-deep); justify-self: center; }
}

@media (max-width: 520px) {
  .site-header { padding-inline: 16px; }
  .brand-word { font-size: .95rem; letter-spacing: .18em; }
  .brand-mark { width: 34px; height: 38px; }
}