*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* No body animation — transforms on body break mix-blend-mode on the header */

/* ── Header ── */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding: 28px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* white text + mix-blend-mode:difference = dark on light bg, white on dark bg */
  mix-blend-mode: difference;
  pointer-events: none;
}

header a {
  color: #fff;
  text-decoration: none;
  pointer-events: all;
  cursor: pointer;
}

.logo {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

nav { display: flex; gap: 36px; align-items: center; }

nav a {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: opacity 0.2s;
}
nav a:hover  { opacity: 0.5; }
nav a.active { font-weight: 700; }

/* Contact button — bordered, stands out from plain nav links */
.contact-btn {
  padding: 7px 18px;
  border: 1.5px solid currentColor;
  font-weight: 600;
  letter-spacing: 0.15em;
}
.contact-btn:hover { opacity: 0.7; }

/* ── Hamburger button ── */
.menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  pointer-events: all;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 17px;
  padding: 0;
}
.menu-btn span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: #fff;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.menu-btn.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-btn.open span:nth-child(2) { opacity: 0; }
.menu-btn.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ── Mobile nav overlay ── */
.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 150;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
}
.mobile-overlay.open { display: flex; }

.mobile-overlay a {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  transition: opacity 0.2s;
}
.mobile-overlay a:hover { opacity: 0.4; }

.mobile-overlay .contact-btn {
  font-size: 12px;
  padding: 10px 28px;
  border: 1.5px solid #fff;
  font-weight: 600;
  letter-spacing: 0.15em;
  margin-top: 8px;
}

/* ── Shared mobile header ── */
@media (max-width: 768px) {
  header  { padding: 22px 28px; }
  nav     { display: none; }
  .menu-btn { display: flex; }
}