/* ------------ HEADER ------------ */

.site-header {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 999;

  padding: 1.5rem 0;

  transition: var(--transition-default);

}

.site-header.scrolled {

  background: rgba(13,27,42,0.92);

  backdrop-filter: blur(14px);

  border-bottom: 1px solid rgba(255,255,255,0.05);

  padding: 1rem 0;

}

.header-wrapper {

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.site-logo {

  font-family: var(--font-heading);

  font-size: 1.8rem;

  color: var(--color-white);

}

.site-logo span {

  color: var(--color-gold);

}

.main-navigation ul {

  display: flex;

  align-items: center;

  gap: 2.5rem;

  list-style: none;

}

.main-navigation a {

  position: relative;

  color: var(--color-gray-light);

  font-size: 0.72rem;

  letter-spacing: 0.18em;

  text-transform: uppercase;

}

.main-navigation a::after {

  content: '';

  position: absolute;

  left: 0;

  bottom: -0.5rem;

  width: 100%;

  height: 1px;

  background: var(--color-gold);

  transform: scaleX(0);

  transform-origin: left;

  transition: var(--transition-default);

}

.main-navigation a:hover::after {

  transform: scaleX(1);

}

.main-navigation a:hover {

  color: var(--color-gold);

}

.nav-cta {

  padding: 0.8rem 1.5rem;

  border: 1px solid rgba(201,168,76,0.3);

}

.nav-cta:hover {

  background: rgba(201,168,76,0.08);

}

.mobile-toggle {

  display: none;

  position: relative;

  width: 40px;

  height: 40px;

  border: none;

  background: transparent;

  cursor: pointer;

}

.mobile-toggle span {

  position: absolute;

  left: 8px;

  width: 24px;

  height: 1px;

  background: var(--color-white);

  transition: var(--transition-default);

}

.mobile-toggle span:first-child {

  top: 16px;

}

.mobile-toggle span:last-child {

  top: 24px;

}

/* ------------ MOBILE MENU ------------ */

.mobile-menu {

  position: fixed;

  inset: 0;

  z-index: 998;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(13,27,42,0.98);

  opacity: 0;

  visibility: hidden;

  transition: var(--transition-default);

}

.mobile-menu.active {

  opacity: 1;

  visibility: visible;

}

.mobile-menu nav ul {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 2rem;

  list-style: none;

}

.mobile-menu a {

  color: var(--color-white);

  font-size: 1.2rem;

  letter-spacing: 0.15em;

  text-transform: uppercase;

}

.mobile-menu a:hover {

  color: var(--color-gold);

}

/* ------------ TOGGLE ACTIVE ------------ */

.mobile-toggle.active span:first-child {

  transform: rotate(45deg);

  top: 20px;

}

.mobile-toggle.active span:last-child {

  transform: rotate(-45deg);

  top: 20px;

}