@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/space-grotesk-bold.ttf") format("truetype");
}

:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-underline-offset: 5px; }
a:focus-visible { outline: 1px solid #000; outline-offset: 6px; }
::selection { background: #000; color: #fff; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.home { position: relative; min-height: 100svh; }
.home-main {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 100px 32px;
}
.brand { width: min(640px, 100%); }
.brand h1 { margin: 0; font-size: 0; }
.brand-logo { display: block; width: 100%; height: auto; overflow: visible; }
.tagline {
  margin: clamp(16px, 2.2vw, 24px) 0 0;
  text-align: center;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: clamp(29px, 4.4vw, 48px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.045em;
}
.contact { margin-top: clamp(48px, 6vw, 64px); text-align: center; }
.contact-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 54px;
  padding: 16px 22px;
  border: 1px solid #000;
  border-radius: 6px;
  background: #fff;
  color: #000;
  font-family: "Space Grotesk", Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.2;
  text-decoration: none;
}
.contact-arrow { width: 18px; height: 18px; flex: none; }
.contact-link:hover, .contact-link:focus-visible { background: #000; color: #fff; }
.home-footer {
  position: absolute;
  bottom: max(28px, env(safe-area-inset-bottom));
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
}
.home-footer a {
  display: inline-block;
  padding: 12px;
  text-decoration: none;
}
.home-footer a:hover { text-decoration: underline; }

/* The ampersand stays at its final position and is cut at y=97,
   exactly as in the original logo.
   All motion is CSS: the full page also works with JavaScript disabled. */
@media (prefers-reduced-motion: no-preference) {
  .contact-link { transition: background-color 220ms ease, color 220ms ease; }
  .contact-arrow {
    transform: translate3d(0, 0, 0);
    transition: transform 240ms cubic-bezier(.4, 0, .2, 1);
  }
  .contact-link:hover .contact-arrow,
  .contact-link:focus-visible .contact-arrow {
    transform: translate3d(3px, -3px, 0);
  }
  .amp-trim { animation: trim-amp 1400ms 350ms cubic-bezier(.65, 0, .25, 1) both; }
  .brand-name { animation: reveal-name 1400ms 900ms var(--ease) both; }
  .tagline { animation: reveal-line 1200ms 1200ms var(--ease) both; }
  .contact { animation: reveal-line 1000ms 1500ms var(--ease) both; }
  .home-footer { animation: reveal-footer 1000ms 1800ms ease both; }
}
@keyframes trim-amp {
  from { height: 193px; }
  to { height: 52px; }
}
@keyframes reveal-name {
  from { opacity: 0; transform: translate(18px, 0); clip-path: inset(0 100% 0 0); }
  to { opacity: 1; transform: translate(0, 0); clip-path: inset(0); }
}
@keyframes reveal-line {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes reveal-footer { from { opacity: 0; } to { opacity: 1; } }

.legal { max-width: 688px; margin: 0 auto; padding: 56px 28px 80px; }
.legal-header { margin-bottom: 76px; }
.legal-header a { display: inline-block; }
.legal-header img { display: block; width: 116px; height: auto; }
.legal h1 { margin: 0 0 48px; font-size: clamp(32px, 6vw, 44px); font-weight: 500; letter-spacing: -.045em; }
.legal section + section { margin-top: 36px; }
.legal h2 { margin: 0 0 12px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.legal p { margin: 0 0 12px; font-size: 15px; line-height: 1.8; }
.legal-footer { margin-top: 64px; font-size: 14px; }
@media (max-width: 480px) {
  .home-main { padding-inline: 28px; }
  .legal { padding-top: 36px; }
  .legal-header { margin-bottom: 56px; }
}