.project-typology-menu {
  position:fixed;z-index:2101;width:250px;max-width:calc(100vw - 24px);
  color:#fff;isolation:isolate;pointer-events:none;
  --typology-anchor:40px;
}
.project-typology-menu[hidden] { display:none!important; }
.project-typology-menu.is-open { pointer-events:auto; }
html.nav-magnet-enabled body .site-header .main-nav>a[data-projects-navigation][aria-expanded="true"] {
  background:#181a18!important;color:#fff!important;
}
.typology-filter { position:absolute;pointer-events:none; }
.project-typology-surface {
  position:absolute;inset:0;filter:url(#typology-liquid);z-index:-1;
  transform-origin:var(--typology-anchor) 0;
  transform:scale(.3,.025);opacity:0;
  transition:transform 460ms cubic-bezier(.22,.85,.24,1),opacity 180ms ease;
}
.project-typology-surface b { display:block;position:absolute;inset:0;background:#181a18;border-radius:28px; }
.project-typology-surface i { position:absolute;left:calc(var(--typology-anchor) - 16px);top:-18px;width:32px;height:44px;border-radius:50%;background:#181a18; }
.project-typology-menu.is-open .project-typology-surface { opacity:1;transform:scale(1); }
.project-typology-links { padding:18px 12px 12px;max-height:calc(100svh - 160px);overflow:auto;opacity:0;translate:0 -5px;transition:opacity 150ms ease,translate 200ms ease; }
.project-typology-menu.is-open .project-typology-links { opacity:1;translate:0 0;transition-delay:150ms; }
.project-typology-links p { margin:0 12px 10px;color:#c3c4bf;font:400 11px/1.4 'Space Grotesk',sans-serif;letter-spacing:.035em; }
.project-typology-links a { display:flex;justify-content:space-between;color:#fff!important;background:transparent;text-decoration:none;padding:10px 12px;border-radius:22px;font:400 14px/1.25 'Space Grotesk',sans-serif;transition:background 180ms ease,color 180ms ease; }
.project-typology-links a:hover,.project-typology-links a:focus-visible { background:#f1f2ed;color:#181a18!important;outline:none; }
.project-typology-links .typology-all { margin-top:8px;border-top:1px solid #ffffff26;border-radius:0 0 20px 20px; }
@media (prefers-reduced-motion:reduce) {
  .project-typology-surface,.project-typology-links { transition:none!important;translate:none; }
}