:root {
  --header-offset: 0px;
}

body.mobile-nav-open {
  overflow: hidden;
}

#hero,
.hero {
  padding-top: var(--header-offset);
}

.reg-form,
#regForm {
  scroll-margin-top: calc(var(--header-offset) + 20px) !important;
}

.nav-menu-toggle {
  display: none;
}

.mobile-nav-backdrop,
.mobile-nav-drawer {
  display: none;
}

@media (max-width: 900px) {
  #navbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "logo lang"
      "phone menu";
    align-items: center;
    row-gap: 10px;
    column-gap: 12px;
  }

  #navbar .nav-logo,
  #navbar .logo {
    grid-area: logo;
    min-width: 0;
  }

  #navbar .nav-right {
    display: contents !important;
  }

  #navbar .lang-switch {
    grid-area: lang;
    justify-self: end;
  }

  #navbar .nav-phone,
  #navbar .topbar-phone a {
    grid-area: phone;
    justify-self: start;
    white-space: nowrap;
  }

  #navbar .nav-links,
  #navbar .nav-main {
    display: none !important;
  }

  #navbar .nav-menu-toggle {
    display: inline-flex;
    grid-area: menu;
    justify-self: end;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 16px;
    border: 1px solid var(--gold, #b8965a);
    background: transparent;
    color: var(--gold-light, #d4b07a);
    font-family: "Jost", sans-serif;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .mobile-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(22, 18, 13, 0.56);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 230;
  }

  .mobile-nav-drawer {
    display: block;
    position: fixed;
    top: var(--header-offset);
    right: 0;
    width: min(360px, 88vw);
    max-height: calc(100vh - var(--header-offset));
    overflow-y: auto;
    background: rgba(22, 18, 13, 0.98);
    border-left: 1px solid var(--divider, rgba(184, 150, 90, 0.25));
    border-top: 1px solid var(--divider, rgba(184, 150, 90, 0.25));
    transform: translateX(100%);
    transition: transform 0.28s ease;
    z-index: 240;
  }

  .mobile-nav-links {
    margin: 0;
    padding: 18px 16px 24px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .mobile-nav-links a {
    display: block;
    padding: 12px 10px;
    color: var(--cream, #f4ede0);
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.92;
    border-bottom: 1px solid var(--divider, rgba(184, 150, 90, 0.25));
  }

.mobile-nav-links a:hover,
.mobile-nav-links a:focus {
  color: var(--gold-light, #d4b07a);
  opacity: 1;
}

.mobile-nav-links a.active {
  color: var(--gold, #b8965a);
  opacity: 1;
  border-bottom-color: var(--gold, #b8965a);
}

  body.mobile-nav-open .mobile-nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  body.mobile-nav-open .mobile-nav-drawer {
    transform: translateX(0);
  }

  #hero .hero-eyebrow,
  .hero .hero-eyebrow {
    display: none !important;
  }
}

@media (max-width: 480px) {
  #hero .hero-title,
  #hero h1,
  .hero-inner h1 {
    font-size: clamp(34px, 9vw, 44px) !important;
    line-height: 1.04;
  }

  #hero .hero-btns,
  #hero .hero-cta-wrap {
    width: 100%;
    align-items: center !important;
    gap: 10px;
  }

  #hero .hero-btns .hero-cta,
  #hero .hero-cta-wrap .hero-cta {
    width: 100%;
    max-width: 320px;
    text-align: center;
  }
}