.immersive-navigation {
  position: fixed;
  z-index: 50;
  inset: max(1.125rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) auto max(1.25rem, env(safe-area-inset-left));
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  pointer-events: none;
  transition: opacity 700ms ease;
}
html[data-world-entry="loading"] .immersive-navigation { opacity: 0; visibility: hidden; }
.navigation-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 48px;
  pointer-events: auto;
  color: #f1e8d5;
  border: 1px solid rgb(241 232 213 / .22);
  border-radius: 14px;
  background: rgb(29 37 30 / .74);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  backdrop-filter: blur(16px) saturate(115%);
  box-shadow: inset 0 1px 0 rgb(255 248 228 / .12), 0 4px 20px rgb(13 24 17 / .1);
  transition: background 180ms ease, border-color 180ms ease;
}
.navigation-menu-trigger { gap: .75rem; padding: 0 1rem; font-size: .75rem; font-weight: 500; letter-spacing: .025em; }
.navigation-menu-trigger:hover { background: rgb(29 37 30 / .82); border-color: rgb(241 232 213 / .4); }
.immersive-navigation :is(a, button):focus-visible { outline: 2px solid #f1e8d5; outline-offset: 4px; }
@media (min-width: 1024px) {
  .immersive-navigation { inset-inline: max(2rem, env(safe-area-inset-left)) max(2rem, env(safe-area-inset-right)); top: max(1.5rem, env(safe-area-inset-top)); }
}
@media (prefers-reduced-transparency: reduce) {
  .navigation-menu-trigger { background: #253128; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .immersive-navigation, .navigation-menu-trigger { transition: none; }
}

.navigation-drawer {
  --drawer-ink: #362f26;
  --drawer-muted: #5d5141;
  --drawer-accent: #92502b;
  --drawer-rule: rgb(112 94 66 / .18);
  --drawer-hover: rgb(255 253 246 / .38);
  --drawer-control: rgb(255 253 246 / .24);
  --drawer-focus: #8b6b48;
  position: fixed;
  z-index: 70;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  width: min(23rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow: hidden;
  color: var(--drawer-ink);
  border: 1px solid rgb(255 252 242 / .6);
  border-radius: 1.25rem;
  background: linear-gradient(145deg, rgb(255 250 240 / .84), rgb(235 225 207 / .66));
  -webkit-backdrop-filter: blur(24px) saturate(125%);
  backdrop-filter: blur(24px) saturate(125%);
  box-shadow: inset 1px 1px 0 rgb(255 255 248 / .5), inset -1px -1px 0 rgb(255 255 248 / .18), -16px 18px 64px rgb(49 37 22 / .16);
}
.navigation-drawer[data-state="open"] { animation: navigation-enter 320ms cubic-bezier(.22, .8, .25, 1) both; }
.navigation-drawer[data-state="closed"] { animation: navigation-leave 180ms ease both; }
@keyframes navigation-enter { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes navigation-leave { to { opacity: 0; transform: translateX(12px); } }
.drawer-title { padding-left: .75rem; font-size: .6875rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--drawer-muted); }

.dark .navigation-drawer {
  --drawer-ink: #eee6d7;
  --drawer-muted: #d3c8b5;
  --drawer-accent: #e3b081;
  --drawer-rule: rgb(237 219 183 / .14);
  --drawer-hover: rgb(245 228 195 / .07);
  --drawer-control: rgb(247 229 197 / .045);
  --drawer-focus: #d4b58a;
  border-color: rgb(245 228 195 / .2);
  background: linear-gradient(145deg, rgb(38 51 42 / .86), rgb(20 32 28 / .72));
  box-shadow: inset 1px 1px 0 rgb(255 244 222 / .12), inset -1px -1px 0 rgb(255 244 222 / .035), -20px 20px 72px rgb(0 0 0 / .28);
}

.drawer-header {
  flex-shrink: 0;
  gap: .75rem;
  padding: 1.125rem;
  border-bottom: 1px solid var(--drawer-rule);
  background: linear-gradient(120deg, var(--drawer-control), transparent);
}

.navigation-drawer .drawer-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  color: var(--drawer-ink);
  border: 1px solid var(--drawer-rule);
  border-radius: 50%;
  background: var(--drawer-control);
  box-shadow: inset 0 1px 0 rgb(255 250 236 / .1);
  transition: background 180ms ease, border-color 180ms ease;
}

.drawer-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .6rem;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.25rem 1.125rem 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--drawer-rule) transparent;
}

.drawer-link, .drawer-sublink {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
  min-height: 48px;
  padding: .6rem .75rem;
  border-radius: .625rem;
  color: var(--drawer-ink);
  font-size: 1.125rem;
  font-weight: 450;
  line-height: 1.45;
  text-align: left;
  transition: background 180ms ease, color 180ms ease;
}

.drawer-services { padding-block: .65rem; }
.drawer-services-title { padding: .25rem .75rem .65rem; font-size: 1.125rem; font-weight: 450; }
.drawer-services-links { margin-left: .75rem; padding-left: .5rem; border-left: 1px solid var(--drawer-rule); }
.drawer-sublink { min-height: 44px; color: var(--drawer-muted); font-size: .875rem; }
.drawer-sublink--accent { color: var(--drawer-accent); }
.drawer-sublink svg { flex-shrink: 0; }
.drawer-link:hover, .drawer-sublink:hover, .navigation-drawer .drawer-icon-button:hover { background: var(--drawer-hover); }

.drawer-actions { margin: .6rem .75rem 0; padding-top: 1.25rem; border-top: 1px solid var(--drawer-rule); }
.drawer-crm-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 48px;
  padding: .75rem 1rem;
  border: 1px solid rgb(103 131 82 / .32);
  border-radius: .875rem;
  background: linear-gradient(135deg, rgb(146 170 123 / .26), rgb(146 170 123 / .12));
  box-shadow: inset 0 1px 0 rgb(255 255 240 / .32), 0 4px 14px rgb(47 57 36 / .05);
  color: #34432d;
  font-size: .875rem;
  font-weight: 550;
  transition: background 180ms ease, border-color 180ms ease;
}
.drawer-crm-link:hover { background: rgb(146 170 123 / .32); border-color: rgb(103 131 82 / .55); }
.dark .drawer-crm-link { color: #e4ebd9; border-color: rgb(180 201 154 / .27); box-shadow: inset 0 1px 0 rgb(240 252 221 / .12), 0 4px 14px rgb(0 0 0 / .08); }
.navigation-drawer :is(a, button):focus-visible { outline: 2px solid var(--drawer-focus); outline-offset: 2px; }

.drawer-scrim { position: fixed; inset: 0; z-index: 60; background: rgb(52 42 28 / .1); }
.dark .drawer-scrim { background: rgb(12 14 10 / .2); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .navigation-drawer { background: #eee5d8; }
  .dark .navigation-drawer { background: #24332b; }
}

@media (prefers-reduced-transparency: reduce) {
  .navigation-drawer { background: #eee5d8; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .dark .navigation-drawer { background: #24332b; }
}

@media (prefers-reduced-motion: reduce) {
  .navigation-drawer, .navigation-drawer :is(a, button) { transition: none; animation: none; }
}

.drawer-tilt { margin-top: .5rem; padding-top: 1rem; border-top: 1px solid rgb(140 135 119 / .22); }
.drawer-tilt button { min-height: 44px; }
.drawer-tilt button:disabled { opacity: .65; cursor: default; }
.drawer-tilt p { max-width: 28ch; margin: .1rem 0 .5rem; font-size: .8rem; line-height: 1.5; opacity: .8; }