.siteHeader {
  position: fixed;
  z-index: 50;
  inset-block-start: 0;
  inset-inline: 0;
  height: 84px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding-inline: max(32px, calc((100vw - var(--content, 1240px)) / 2));
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: rgba(var(--black-rgb, 8, 9, 9), .86);
  color: var(--ivory, #fffdf7);
  backdrop-filter: blur(18px);
}

.siteHeaderBrand {
  justify-self: start;
}

.skipLink {
  position: fixed;
  z-index: 1000;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  padding: 12px 16px;
  border-radius: 3px;
  background: var(--ivory, #fffdf7);
  color: var(--black, #080909);
  font-size: 14px;
  font-weight: 600;
  transform: translateY(-160%);
  transition-property: transform;
  transition-duration: .15s;
  transition-timing-function: ease-out;
}

.skipLink:focus {
  transform: translateY(0);
  outline: 2px solid var(--gold, #cbb07a);
  outline-offset: 3px;
}

.siteNav {
  display: flex;
  align-items: center;
  gap: clamp(22px, 2.65vw, 38px);
  color: rgba(255, 255, 255, .66);
  font-size: 14px;
  white-space: nowrap;
}

.siteNav a {
  padding-block: 12px;
  transition-property: color;
  transition-duration: .2s;
  transition-timing-function: ease;
}

.siteNav a:hover,
.siteNav a.is-current,
.siteNav a[aria-current="page"] {
  color: var(--gold);
}

.navCta {
  margin-inline-start: clamp(8px, 1.5vw, 22px);
  padding: 12px 22px;
  border: 1px solid var(--gold);
  border-radius: var(--button-radius, 3px);
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 1px;
  transition-property: background-color, border-color, color, filter, transform;
  transition-duration: .2s;
  transition-timing-function: ease;
}

.siteNav .navCta {
  transition-property: background-color, border-color, color, filter, transform;
}

.siteNav .navCta:hover {
  border-color: var(--gold-hover, var(--gold));
  background: var(--gold-hover, var(--gold));
  color: var(--black);
  filter: brightness(1.03);
}

.siteNav .navCta:hover > svg,
.siteNav .navCta:hover > span { color: inherit; }

.navCta:active {
  transform: scale(.96);
}

.siteMenuToggle {
  display: none;
}

.siteHeader a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 5px;
}

.brand {
  display: flex;
  align-items: center;
}

.brandLogo {
  display: block;
  width: clamp(115px, 12vw, 145px);
  height: auto;
}

#about,
#advantages,
#booking,
#contact {
  scroll-margin-top: 84px;
}

#main-content {
  scroll-margin-top: 84px;
}

@media (max-width: 900px) {
  .siteHeader {
    height: 70px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding-inline: max(22px, env(safe-area-inset-left)) max(22px, env(safe-area-inset-right));
  }

  .siteMenuToggle {
    width: 44px;
    height: 44px;
    display: grid;
    place-content: center;
    gap: 5px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    background: rgba(255, 255, 255, .035);
    color: var(--ivory, #fffdf7);
    cursor: pointer;
  }

  .siteMenuToggle > span {
    width: 17px;
    height: 1.5px;
    display: block;
    background: currentColor;
    transform-origin: center;
    transition-property: transform, opacity;
    transition-duration: .15s;
    transition-timing-function: ease-out;
  }

  .siteMenuToggle:active {
    transform: scale(.96);
  }

  .siteMenuToggle:focus-visible {
    outline: 2px solid var(--gold, #cbb07a);
    outline-offset: 3px;
  }

  .siteHeader.is-menu-open .siteMenuToggle > span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }

  .siteHeader.is-menu-open .siteMenuToggle > span:nth-child(2) {
    opacity: 0;
  }

  .siteHeader.is-menu-open .siteMenuToggle > span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  .siteNav {
    display: none;
  }

  .siteHeader.is-menu-open .siteNav {
    position: absolute;
    inset-block-start: 70px;
    inset-inline: 0;
    max-height: calc(100dvh - 70px);
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    padding: 16px max(22px, env(safe-area-inset-left)) calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto;
    border-bottom: 1px solid rgba(var(--gold-rgb, 203, 176, 122), .24);
    background: rgba(var(--black-rgb, 8, 9, 9), .98);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .32);
  }

  .siteNav > a:not(.navCta) {
    min-height: 50px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .82);
    font-size: 16px;
  }

  .navCta {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16px 0 0;
    padding: 12px 18px;
    background: var(--gold, #cbb07a);
    color: var(--black, #080909);
  }

  #about,
  #advantages,
  #booking,
  #contact {
    scroll-margin-top: 70px;
  }

  #main-content {
    scroll-margin-top: 70px;
  }
}

@media (max-width: 420px) {
  .brandCompact small {
    display: none;
  }

  .brandCompact b {
    font-size: 17px;
    letter-spacing: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .siteHeader a,
  .siteMenuToggle > span,
  .skipLink {
    transition: none;
  }

  .navCta:active,
  .siteMenuToggle:active {
    transform: none;
  }
}

@media (forced-colors: active) {
  .siteHeader a:focus-visible,
  .siteMenuToggle:focus-visible,
  .skipLink:focus {
    outline-color: Highlight;
  }
}