/* ─── NAV — FLOATING BAR ───────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: calc(100% - 48px);
  max-width: 1120px;
  background: var(--navy);
  border-radius: 12px;
  transition: max-width .4s ease, width .4s ease, border-radius .4s ease, top .4s ease;
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 80px;
  padding: 0 20px;
  position: relative;
}
.nav-hamburger {
  background: none !important; border: none !important; cursor: pointer;
  color: var(--white) !important; padding: 4px;
  display: flex; align-items: center; justify-content: center;
  z-index: 1; box-shadow: none !important;
}
.nav-hamburger:hover, .nav-hamburger:focus { background: none !important; color: var(--white) !important; }
.nav-hamburger svg { width: 32px; height: 32px; }
.nav-hamburger ._close { display: none; }
body.menu__active .nav-hamburger ._open { display: none; }
body.menu__active .nav-hamburger ._close { display: block; }
.nav-logo-center {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.nav-logo-wordmark { height: 38px; width: auto; display: block; opacity: 1; transition: all 0.3s linear; }
.nav-logo-icon    { height: 30px; width: auto; scale: 0; transition: all 0.3s linear; position: absolute;
  left: 50%; margin-left: -20px; top: 10px; }
.nav.scrolled .nav-logo-wordmark { scale: 0; }
.nav.scrolled .nav-logo-icon    { scale: 1; }
body.menu__active .nav-logo-wordmark { display: block !important; opacity: 1 !important; }
body.menu__active .nav-logo-icon { display: none !important; }
.nav-right-spacer { width: 38px; }
.nav-scroll-cta {
  display: flex; align-items: center; gap: 14px;
  opacity: 0; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s ease;
}
.nav.scrolled .nav-scroll-cta { opacity: 1; pointer-events: auto; transform: translateY(0); }
.nav.scrolled .nav-right-spacer { display: none; }
body.menu__active .nav-scroll-cta { display: none !important; }
.nav-scroll-price {
  font-family: 'Pickler Social', 'Montserrat', sans-serif; font-weight: 800;
  font-size: 15px; color: #fff; white-space: nowrap;
}
.nav-scroll-price span { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.5); }
.nav-scroll-tagline {
  font-size: 12px; color: rgba(255,255,255,.45); white-space: nowrap;
}
@media (max-width: 600px) { .nav-scroll-tagline { display: none; } }
.nav-trial-btn {
  background: var(--cyan); color: #fff; border: 2px solid var(--cyan); border-radius: 100px;
  font-family: 'Pickler Social', 'Montserrat', sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 10px 24px; white-space: nowrap; text-decoration: none;
  transition: background .2s; z-index: 1;
}
.nav-trial-btn:hover { background: var(--navy); color: #fff; border-color: #fff; }
.nav-trial-default { display: inline-block; }
body.menu__active .nav-trial-default { display: inline-block !important; }
body.menu__active .nav-right-spacer { display: none; }

/* ─── MENU DRAWER (slides down inside nav) ────────────── */
#menu--drawer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease;
}
body.menu__active #menu--drawer {
  max-height: 100vh;
}
.menu-drawer-body {
  display: flex;
  padding: 16px 32px 32px;
  gap: 24px;
}
.menu-drawer-links {
  flex: 0 0 290px;
  display: flex; flex-direction: column;
  padding: 8px 0;
}
.menu-drawer-links a {
  display: block;
  font-family: "Pickler Social";
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--white);
  padding: 10px 16px;
  border-radius: 8px;
  transition: background .15s;
  text-decoration: none;
}
.menu-drawer-links a:hover,
.menu-drawer-links a.active {
  background: rgba(255,255,255,.08);
}
.menu-drawer-image {
  flex: 1;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  height: 400px;
}
.menu-drawer-image img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 12px;
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .3s ease;
}
.menu-drawer-image img.active { opacity: 1; }
@media (max-width: 768px) {
  .menu-drawer-body { flex-direction: column; padding: 16px 20px 24px; }
  .menu-drawer-links { flex: none; }
  .menu-drawer-links a { font-size: 22px; padding: 8px 12px; }
  .menu-drawer-image { display: none; }
}

/* ─── NAV RESPONSIVE ─────────────────────────────────── */
@media (max-width: 768px) {
  .nav { width: calc(100% - 32px); top: 12px; }
  .nav-inner { padding: 0 14px; height: 60px; }
  .nav-hamburger { padding: 11px; }
  .nav-hamburger svg { width: 20px; height: 20px; }
  .nav-logo-icon { top: 0; height: 22px; }
  .nav-logo-wordmark { height: 20px; }
  .nav-trial-btn { font-size: 10px; padding: 10px 20px; }
  .nav-scroll-cta { gap: 10px; }
  .nav-scroll-cta .btn { min-height: 40px; }
  .nav-scroll-price { font-size: 14px; }
  .nav-overlay-links { flex: 1; padding: 24px 28px; }
  .nav-overlay-links a { font-size: 18px; padding: 10px 12px; }
  .nav-overlay-image { display: none; }
}

@media (max-width: 480px) {
  .nav-inner { padding: 0 10px; }
  .nav-scroll-cta { gap: 8px; }
  .nav-scroll-price { display: none; }
  .nav-scroll-cta .btn .nav-btn-arrow { display: none; }
}