body > header { --nav-ink: #182724; --nav-accent: #168878; --nav-paper: #fff; --nav-height: 88px; height: var(--nav-height); gap: 30px; }
body.urban > header { --nav-ink: #fff; --nav-accent: #00d9bd; --nav-paper: #182724; }
body > header .brand { width: 225px; max-width: none; }
body > header #nav { display: flex; position: static; align-items: center; flex-direction: row; gap: clamp(19px, 2.1vw, 36px); padding: 0; margin: 0; box-shadow: none; max-height: none; overflow: visible; background: transparent; color: var(--nav-ink); }
body > header #nav > a { font: 500 13px/1.5 var(--body-font, 'DM Sans', sans-serif); white-space: nowrap; letter-spacing: .005em; }
body > header #nav > a:not(.button)::after { height: 1px; background: var(--nav-accent); bottom: -8px; }
body > header #nav > a[aria-current='page']:not(.button) { color: var(--nav-accent); }
body > header #nav > .button { padding: 13px 22px; min-height: 46px; border-radius: 2px; background: var(--nav-ink); color: var(--nav-paper); box-shadow: none; transform: none; }
body.urban > header #nav > .button { background: var(--nav-accent); color: #182724; }
body > header #nav > .button:hover { opacity: .85; transform: none; }
body > header .menu-toggle { display: none; }
@media (max-width: 1000px) {
  body > header { --nav-height: 78px; padding: 0 6%; gap: 20px; background: var(--nav-paper); }
  body > header .brand { width: 210px; max-width: calc(100% - 66px); }
  body > header .menu-toggle { display: grid; place-items: center; width: 46px; height: 46px; flex: none; margin: 0; padding: 0; border: 1px solid #18272430; border-radius: 50%; color: var(--nav-ink); background: transparent; transition: background .2s, border-color .2s; }
  body.urban > header .menu-toggle { border-color: #ffffff50; }
  body > header .menu-toggle:hover { background: #16887812; border-color: var(--nav-accent); }
  body > header .menu-toggle:focus { outline: none; box-shadow: none; }
  body > header .menu-toggle:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--nav-accent); }
  body > header .menu-toggle svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; }
  .menu-toggle svg path { transform-box: view-box; transform-origin: 12px 12px; transition: transform .25s; }
  .menu-toggle[aria-expanded='true'] svg path:first-child { transform: rotate(45deg) translateY(4px); }
  .menu-toggle[aria-expanded='true'] svg path:last-child { transform: rotate(-45deg) translateY(-4px); }
  body > header #nav { position: fixed; top: var(--nav-height); left: 0; right: 0; bottom: 0; height: calc(100vh - var(--nav-height)); height: calc(100dvh - var(--nav-height)); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: clamp(25px, 5vh, 55px) 6% max(30px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; background: var(--nav-paper); visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .22s, transform .22s, visibility .22s; counter-reset: nc-navigation; }
  body > header #nav.open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
  body > header #nav > a, body > header #nav > .button { display: flex; align-items: center; justify-content: flex-start; flex: none; gap: 25px; width: 100%; min-height: 73px; padding: 13px 0; margin: 0; border: 0; border-bottom: 1px solid #18272420; border-radius: 0; font: 400 clamp(28px, 6vw, 40px)/1.2 var(--display-font, Manrope, sans-serif); letter-spacing: -.025em; color: var(--nav-ink); background: transparent; white-space: normal; box-shadow: none; }
  body.urban > header #nav > a { border-color: #ffffff25; }
  body > header #nav > a::before { counter-increment: nc-navigation; content: '0' counter(nc-navigation); flex: none; width: 22px; font: 400 10px/1.5 var(--body-font, 'DM Sans', sans-serif); letter-spacing: .1em; color: var(--nav-accent); }
  body > header #nav > a::after { display: none; }
  body > header #nav > a[aria-current='page'], body > header #nav > a:hover { color: var(--nav-accent); }
  body > header #nav > a:last-child { margin-top: 20px; border-bottom: 0; }
  html.nav-open { overflow: hidden; }
  html.nav-open body > header { position: fixed; inset: 0 0 auto; z-index: 200; backdrop-filter: none; box-shadow: none; }
}
@media (max-height: 540px) and (max-width: 1000px) {
  body > header #nav { padding-top: 15px; }
  body > header #nav > a { min-height: 54px; font-size: 27px; padding: 10px 0; }
  body > header #nav > a:last-child { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  body > header #nav, .menu-toggle svg path { transition: none; }
}