html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #f3f3e7; }
a { color: #141414; text-decoration: none; transition: opacity 0.3s; }
a:hover { opacity: 0.55; }

.hero { position: fixed; inset: 0; width: 100vw; height: 100vh; overflow: hidden; background: #f3f3e7; }
#water { display: block; width: 100%; height: 100%; touch-action: none; }

/* ---------- Top bar ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; pointer-events: none;
}
.topbar nav, .topbar button { pointer-events: auto; }
.nav-desktop { display: flex; gap: 24px; }
.nav-desktop a, .menu-btn {
  font: 700 10px/1.4 Helvetica, Arial, sans-serif;
  letter-spacing: 0.48px; color: #141414; text-transform: uppercase;
}
.menu-btn {
  display: none; background: none; border: none; padding: 10px 0;
  cursor: pointer; min-width: 44px; text-align: left;
}

/* ---------- Footer ---------- */
.footer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: flex-start;
  gap: 24px; padding: 16px 24px; pointer-events: none;
}
.footer span {
  font: 700 10px/1.4 Helvetica, Arial, sans-serif;
  letter-spacing: 0.48px; color: rgba(20, 20, 20, 0.5);
}

/* ---------- Mobile menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 50; background: #f3f3e7;
  display: none; flex-direction: column; padding: 0 24px;
}
.menu-top { display: flex; align-items: center; padding: 18px 0; }
.menu-nav { display: flex; flex-direction: column; padding-top: 16px; }
.menu-nav a {
  display: block; padding: 18px 0; border-bottom: 1px solid rgba(20, 20, 20, 0.1);
  font: 700 20px/1.2 Helvetica, Arial, sans-serif; letter-spacing: 0.5px;
  color: #141414; text-transform: uppercase;
}

@media (max-width: 767px) {
  .nav-desktop { display: none; }
  .menu-btn { display: inline-block; }
  .footer { justify-content: center; }
}