/* Header — desktop staging parity + solid mobile menu */

.site-header {
  z-index: 999;
  position: sticky;
  top: 0;
  height: 80px;
  background-color: transparent;
  transition: background-color 0.35s ease;
}

.site-header.is-scrolled,
.site-header.is-open {
  background-color: #000;
}

/* Bar container */
.site-header__inner {
  position: relative;
  height: 80px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 64px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
}

/* Logo: absolute center on desktop; left bar on mobile */
.site-header__logo {
  display: flex;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  align-items: center;
  justify-content: center;
}

.site-header__logo img {
  width: 122px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* Desktop nav: staging flex layout — left links | logo spacer | right links */
.site-header__nav {
  flex: 1;
  order: -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 8px 0;
  gap: clamp(24px, 3.7vw, 53px);
  min-width: 0;
}

.site-header__center {
  display: block;
  width: 122px;
  height: 1px;
  pointer-events: none;
}

/* Staging: wide gap between the two links in each pair */
.site-header__cluster {
  display: flex;
  align-items: center;
  gap: clamp(40px, 12.5vw, 180px);
  min-width: 0;
}

.site-header__cluster:first-child {
  justify-content: flex-start;
}

.site-header__cluster--end {
  justify-content: flex-end;
}

/* 16px IS the client's "30% smaller". Do not reduce it again.
   The nav was 24px originally. The client asked for the four header links
   uppercase and 30% smaller (2026-07-25); 24 * 0.7 = 16.8, taken as 16px.
   That change was made in Webflow, so staging already shows the finished
   result. Matching staging here is correct and the request is satisfied.
   Anything that reads staging as the "before" state and cuts another 30%
   off it is wrong. */
.site-header__link {
  color: #fff;
  padding: 4px 8px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 19.6px;
  transition: color 0.2s ease, text-shadow 0.2s ease;
  white-space: nowrap;
}

.site-header__link:hover,
.site-header__link:focus-visible,
.site-header__link:active,
.site-header__link.is-active {
  color: #e0bb7f;
  font-weight: 500;
}

.site-header__link.is-active {
  font-size: 16px;
}

/* Hamburger — mobile only */
.site-header__toggle {
  display: none;
  flex-shrink: 0;
  background: none;
  border: 0;
  width: 44px;
  height: 44px;
  cursor: pointer;
  padding: 0;
  z-index: 3;
  position: relative;
  margin-left: auto;
}

.site-header__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  margin: 5px auto;
  transition: none;
  border-radius: 1px;
}

.site-header.is-open .site-header__toggle span:nth-child(1) {
  transform: none;
}
.site-header.is-open .site-header__toggle span:nth-child(2) {
  opacity: 1;
}
.site-header.is-open .site-header__toggle span:nth-child(3) {
  transform: none;
}

/* ========== Mobile / tablet ≤991px ========== */
@media screen and (max-width: 991px) {
  .site-header {
    background-color: #000;
    height: 80px;
  }

  .site-header.is-open {
    height: 80px;
  }

  .site-header__inner {
    height: 80px;
    padding: 0 32px;
    background-color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }

  /* Logo left on mobile bar */
  .site-header__logo {
    position: static;
    transform: none;
    left: auto;
    top: auto;
    flex-shrink: 0;
    z-index: 3;
  }

  .site-header__logo img {
    width: 68px;
  }

  .site-header__toggle {
    display: block;
  }

  /* Full-viewport panel under the 80px bar */
  .site-header__nav {
    display: flex;
    order: 0;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    height: 100vh;
    margin: 8px 0 0;
    padding: 26px 16px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    grid-template-columns: none;
    background-color: rgba(0, 0, 0, 0.6);
    border-top: 1px solid #303030;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 998;
    opacity: 1;
    visibility: hidden;
    pointer-events: none;
    clip-path: inset(0 0 100% 0);
    transition:
      clip-path 0.4s ease,
      visibility 0s linear 0.4s;
  }

  .site-header.is-open .site-header__nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    clip-path: inset(0);
    transition-delay: 0s;
  }

  .site-header__center {
    display: none;
  }

  .site-header__cluster,
  .site-header__cluster--end {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    gap: 0;
  }

  .site-header__link {
    display: block;
    width: 100%;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 19.6px;
    padding: 23px 8px;
    border-bottom: 1px solid #303030;
    white-space: normal;
    box-sizing: border-box;
  }

  .site-header__link:hover,
  .site-header__link:focus-visible,
  .site-header__link:active,
  .site-header__link.is-active {
    color: #e0bb7f;
    font-size: 20px;
    font-weight: 500;
  }
}

@media screen and (max-width: 767px) {
  .site-header__inner {
    padding: 0 16px;
  }
}

@media screen and (max-width: 479px) {
  .site-header__nav {
    margin-top: 0;
    background-color: rgba(0, 0, 0, 0.79);
  }

  .site-header.is-open .site-header__nav {
    clip-path: inset(0);
  }

  .site-header__link,
  .site-header__link.is-active {
    font-size: 18px;
    padding: 23px 8px;
  }

  .site-header__link:hover,
  .site-header__link:focus-visible,
  .site-header__link:active,
  .site-header__link.is-active {
    font-size: 18px;
    font-weight: 500;
  }
}