.site-nav { position: fixed; z-index: 100; top: 3.3vw; left: 3.3vw; right: 3.3vw; height: 0; display: flex; justify-content: center; text-transform: uppercase; }
.site-nav .logo { position: absolute; left: -10px; top: -10px; width: 60px; height: 44px; background: url('../img/logo-w.svg') no-repeat center / 100%; }
body[data-state='intro'] .site-nav .logo { background-image: url('../img/logo-bl.svg'); }
.site-nav.is-on-light { color: #212121; }
.site-nav.is-on-light .logo { background-image: url('../img/logo-bl.svg'); }
.menu-toggle.is-on-light { color: #212121; }
.main-nav { display: flex; justify-content: center; gap: 2vw; }
.site-nav a, .social-link { font-size: 14px; letter-spacing: .1em; line-height: 1.2; }
.main-nav a, .social-link { position: relative; display: block; padding: 8px 0 14px; }
.social-link { position: absolute; top: 0; right: 0; }
.main-nav a::after, .social-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 4px; background: url('../img/ui/wiggle-white.svg') repeat-x center / 7px 3px; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
body[data-state='who'] .main-nav a::after { background-image: url('../img/ui/wiggle-who.svg'); }
body[data-state='what'] .main-nav a::after { background-image: url('../img/ui/wiggle-what.svg'); }
body[data-state='work'] .main-nav a::after { background-image: url('../img/ui/wiggle-work.svg'); }
.main-nav a[aria-current='page']::after, .main-nav a:hover::after, .social-link:hover::after { transform: scaleX(1); }
.site-nav.is-scrolled .main-nav, .site-nav.is-scrolled .social-link { opacity: 0; visibility: hidden; pointer-events: none; }
.main-nav, .social-link { transition: opacity .35s var(--ease), visibility .35s; }
.back-to-top { position: absolute; right: -10px; top: 0; width: 44px; height: 44px; display: grid; place-items: center; opacity: 0; visibility: hidden; }
.back-to-top .chevron { transform: rotate(225deg); }
.site-nav.is-scrolled .back-to-top { opacity: 1; visibility: visible; }
.menu-toggle { display: none; position: fixed; right: 25px; top: 20px; width: 50px; height: 50px; z-index: 240; }
.menu-toggle::before, .menu-toggle::after { content: ''; position: absolute; top: 50%; left: 20%; width: 60%; height: 2px; background: currentColor; transition: transform .29s var(--ease); }
.menu-toggle::before { transform: translateY(-5px); }
.menu-toggle::after { transform: translateY(5px); }
.menu-toggle[aria-expanded='true'] { color: #212121; }
.menu-toggle[aria-expanded='true']::before { transform: rotate(45deg); }
.menu-toggle[aria-expanded='true']::after { transform: rotate(-45deg); }
.mobile-menu { position: fixed; inset: 14px; z-index: 220; padding: 100px 24px 48px; background: #fff; color: #212121; overflow-y: auto; }
.mobile-menu::before { content: ''; position: absolute; inset: 0; background: var(--modal); opacity: .08; pointer-events: none; }
.mobile-menu-inner { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; gap: 48px; }
.mobile-menu ul { display: grid; gap: 12px; }
.mobile-menu ul a { display: block; padding: 12px; text-transform: uppercase; font-size: 22px; letter-spacing: .06em; }
.mobile-menu [aria-current='page'] { text-decoration: underline; text-underline-offset: 8px; }
.mobile-menu .menu-social { display: inline-block; margin-top: 12px; font-size: 16px; }
.mobile-menu h3 { padding: 0; margin: 0; }
.mobile-menu h3::after { display: none; }
[hidden] { display: none !important; }
@media (max-width: 1000px) { .site-nav { top: 30px; left: 30px; right: 30px; } }
@media (max-width: 760px) {
  .main-nav, .site-nav .social-link, .site-nav .back-to-top { display: none; }
  .menu-toggle { display: block; }
  .site-nav .logo { left: -5px; top: -5px; width: 52px; }
}