* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: #fff;
  color: #111;
  font-family: "Neue Haas Grotesk Text Pro", "neue-haas-grotesk-text", "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
main {
  flex: 1; padding: 72px 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; animation: in 1.2s ease both;
}
h1 { font-size: 17px; font-weight: 500; letter-spacing: -.01em; margin-bottom: 22px; }
ul { list-style: none; }
li { color: #9a9a9a; }
a { color: #9a9a9a; text-decoration: none; transition: color .25s; }
a:hover, a:focus-visible { color: #111; outline: none; }
footer {
  padding: 0 64px 24px;
  text-align: center; font-size: 11px; line-height: 1.6; color: #b5b5b5;
}
footer span + span::before { content: "·"; margin: 0 8px; }
@media (max-width: 640px) { footer { padding: 0 16px 24px; } footer span { display: block; } footer span + span::before { content: none; } }
#monkey { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; animation: in 1.6s ease both; }
@keyframes in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { main, #monkey { animation: none; } }

/* split layout: brand | divider | list */
.back { position: absolute; top: 24px; left: 0; right: 0; text-align: center; font-size: 12px; }
.split { display: flex; align-items: center; gap: 40px; }
.split .clients { text-align: right; }
.split .divider { width: 1px; align-self: stretch; background: #e6e6e6; }
.split .brand { font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.split .brand a { color: #111; }
.split .brand a:hover { color: #9a9a9a; }
.more { display: inline-flex; align-items: center; gap: 10px; }
.more canvas { width: 48px; height: 32px; image-rendering: pixelated; }
@media (max-width: 640px) {
  .split { flex-direction: column-reverse; gap: 20px; }
  .split .clients { text-align: center; }
  .split .divider { width: 24px; height: 1px; align-self: center; }
}

/* home: names + fighting monkeys */
.split .names { columns: 2; column-gap: 36px; text-align: left; }
.split .names li { break-inside: avoid; }
.duo { display: block; image-rendering: pixelated; }
@media (max-width: 900px) {
  .split.home { flex-direction: column; gap: 28px; }
  .split.home .divider { width: 24px; height: 1px; align-self: center; }
  .split .names { columns: 1; text-align: center; }
}