/* Top bar (DESIGN 5.0). Plain row at rest; fixed glass after 80vh (class .is-fixed, set by nav.js). */
.nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 50;
}
.nav__bar {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 72px;
}
.nav__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem; /* 17px */
  letter-spacing: -0.02em;
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.nav__mark { width: 34px; height: auto; flex: none; display: block; } /* the bhatta: brand/mark-bhatta-bare.svg */
.nav__links { display: flex; align-items: center; gap: 32px; }
.nav__links a {
  font-size: 1.0625rem;
  transition: color 240ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover, .menu-sheet__links a:not(.btn):hover { color: var(--accent); }
}

/* Glass bar after the hero */
.nav.is-fixed {
  position: fixed;
  background: rgba(12, 10, 8, 0.6);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  animation: nav-in 300ms ease both;
}
.nav.is-fixed .nav__bar { min-height: 64px; }
@keyframes nav-in { from { opacity: 0; } to { opacity: 1; } }

/* Menu button: phone only (and only when JS can open the sheet); the Close button lives in the sheet */
.nav__menu, .menu-sheet__close {
  display: none;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--pill);
  background: rgba(243, 237, 228, 0.1);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  transition: background-color 240ms ease, transform 300ms var(--ease-out);
}
.nav__menu:active, .menu-sheet__close:active { transform: scale(0.97); }

/* Phone menu sheet */
.menu-sheet__close { display: inline-flex; }
.menu-sheet {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  opacity: 0;
  transition: opacity 240ms ease;
  overflow-y: auto;
}
.menu-sheet.is-open { opacity: 1; }
.menu-sheet__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  flex: none;
}
.menu-sheet__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding-top: 8vh;
  padding-bottom: 40px;
}
.menu-sheet__links a:not(.btn) {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-head);
  line-height: 1.05;
  letter-spacing: -0.035em;
  transition: color 240ms ease;
}
.menu-sheet__links .btn { margin-top: 16px; width: 100%; }
html.menu-open { overflow: hidden; }

@media (max-width: 720px) {
  .nav__bar { min-height: 64px; }
  html.js .nav__links, html.js .nav__cta { display: none; }
  html.js .nav__bar > .nav__menu { display: inline-flex; }
  /* no JS: the links stay, wrapped */
  html:not(.js) .nav__bar { flex-wrap: wrap; gap: 8px 20px; padding-block: 12px; }
  html:not(.js) .nav__links { gap: 20px; }
  html:not(.js) .nav__cta { display: none; }
}
@media (min-width: 721px) {
  .menu-sheet { display: none !important; }
}