:root {
  --paper: #f3f2ee;
  --ink: #141414;
  --dim: #8a8984;
  --hair: #d9d7d0;
  --night: #141414;
  --night-hair: #3a3a38;
  --sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --pad: clamp(16px, 2vw, 28px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: var(--paper); }
h1, h2, h3, p { margin: 0; }

.mono { font-family: var(--mono); font-size: 12px; line-height: 1.6; text-transform: uppercase; letter-spacing: 0.02em; }
.dim { color: var(--dim); }
.sep { margin: 0 4px; }
.link { transition: opacity .15s; }
.link:hover { opacity: .5; }

/* 4-column grid used everywhere; labels sit in column 1 */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--pad);
  padding-inline: var(--pad);
}
.c-2 { grid-column: 2; }
.c-3 { grid-column: 3; }
.c-4 { grid-column: 4; }

/* Header */
.top {
  position: sticky; top: 0; z-index: 10;
  padding-block: 14px;
  align-items: center;
  background: var(--paper);
  border-bottom: 1px solid var(--hair);
}
.brand { font-weight: 600; font-size: clamp(24px, 2.2vw, 32px); line-height: 1; letter-spacing: -0.05em; }
.top .c-4 { justify-self: end; }

/* Hero */
.hero { padding: clamp(80px, 14vw, 200px) var(--pad) 0; }
h1 {
  font-weight: 300;
  font-size: clamp(44px, 7.6vw, 132px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  max-width: 15ch;
}
.hero-meta {
  padding-inline: 0;
  margin-top: clamp(56px, 8vw, 120px);
  padding-block: 18px clamp(56px, 8vw, 96px);
  border-top: 1px solid var(--hair);
  align-items: start;
}
.hero-copy { grid-column: 2 / span 2; max-width: 44ch; font-size: 17px; }
.hero-meta .pill { grid-column: 4; justify-self: end; }

/* Pill button */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font: 500 14px/1 var(--sans);
  border: 0; cursor: pointer;
  transition: opacity .15s;
}
.pill:hover { opacity: .8; }
.pill:disabled { opacity: .5; cursor: wait; }
.pill-light { background: var(--paper); color: var(--ink); }

/* Generic block: label in col 1, content in cols 2-4 */
.block { border-top: 1px solid var(--hair); padding-block: 18px clamp(72px, 9vw, 128px); }
.block > .mono:first-child { padding-top: 4px; }

/* Services: big stacked names */
.svc-list { grid-column: 2 / span 3; list-style: none; margin: 0; padding: 0; }
.svc {
  display: grid; grid-template-columns: 2fr 1fr; column-gap: var(--pad);
  align-items: start;
  padding: 18px 0 22px;
  border-bottom: 1px solid var(--hair);
  transition: opacity .2s;
}
.svc:first-child { padding-top: 0; }
.svc h2 {
  font-weight: 300;
  font-size: clamp(36px, 5.2vw, 88px);
  line-height: 1;
  letter-spacing: -0.04em;
}
.svc p { color: var(--dim); padding-top: 8px; }
.svc-list:hover .svc:not(:hover) { opacity: .3; }

/* How */
.how { grid-column: 2 / span 3; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--pad); }
.how h3 { font-weight: 500; font-size: 17px; margin-bottom: 6px; }
.how p { color: #55544f; max-width: 30ch; }

/* Contact */
.contact { background: var(--night); color: var(--paper); }
.contact-inner { padding-block: 22px clamp(72px, 9vw, 128px); row-gap: 48px; }
.contact .dim { color: #8f8e89; }
.contact-title {
  grid-column: 2 / span 3;
  font-weight: 300;
  font-size: clamp(40px, 5.6vw, 96px);
  line-height: 1;
  letter-spacing: -0.04em;
  max-width: 13ch;
}
.form { grid-column: 2 / span 3; display: grid; grid-template-columns: 1fr 1fr; gap: 28px var(--pad); }
.form .full { grid-column: 1 / -1; }
.form label { display: grid; gap: 4px; }
.form label .mono { color: #8f8e89; }
.form input, .form textarea {
  width: 100%; padding: 6px 0 10px;
  border: 0; border-bottom: 1px solid var(--night-hair); border-radius: 0;
  background: transparent; color: var(--paper);
  font: 300 22px/1.3 var(--sans);
  transition: border-color .15s;
}
.form textarea { resize: vertical; min-height: 84px; }
.form input:focus, .form textarea:focus { outline: none; border-bottom-color: var(--paper); }
.form-foot { display: flex; align-items: center; gap: 20px; }
.form-foot .pill { margin-left: auto; }
.fine { font-size: 13px; color: #8f8e89; }
.fine a { text-decoration: underline; text-underline-offset: 3px; }
.form-status { color: var(--paper); }
.form-status.err { color: #ff8a7a; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Footer */
.foot { background: var(--paper); overflow: hidden; }
.foot-row { padding-block: 16px; border-bottom: 1px solid var(--hair); }
.foot-row .c-4 { justify-self: end; }
.giant {
  font-weight: 500;
  font-size: 20vw;
  line-height: 0.74;
  letter-spacing: -0.065em;
  padding: 3vw 0 0 1.2vw;
  margin-bottom: -1.5vw;
  white-space: nowrap;
  user-select: none;
}

/* Plain pages (privacy, 404) */
.page { padding: clamp(64px, 10vw, 140px) var(--pad); }
.page-inner { max-width: 680px; margin-left: calc(25% + var(--pad) / 4); }
.page h1 { font-size: clamp(44px, 6vw, 88px); margin-bottom: 32px; }
.page h2 { font-size: 18px; font-weight: 500; margin: 32px 0 6px; }
.page p { color: #55544f; margin-bottom: 10px; }
.page a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 860px) {
  .top { grid-template-columns: 1fr auto; }
  .top .c-2, .top .c-3 { display: none; }
  .top .c-4 { grid-column: 2; }
  .hero-meta, .block, .contact-inner { grid-template-columns: 1fr; row-gap: 20px; }
  .hero-copy, .svc-list, .how, .contact-title, .form { grid-column: 1; }
  .hero-meta .pill { grid-column: 1; justify-self: start; }
  .svc { grid-template-columns: 1fr; row-gap: 8px; }
  .svc-list:hover .svc:not(:hover) { opacity: 1; }
  .how { grid-template-columns: 1fr; row-gap: 24px; }
  .form { grid-template-columns: 1fr; }
  .form-foot { flex-wrap: wrap; }
  .foot-row { grid-template-columns: 1fr 1fr; row-gap: 6px; }
  .foot-row .c-2, .foot-row .c-3, .foot-row .c-4 { grid-column: auto; justify-self: start; }
  .page-inner { margin-left: 0; }
}

/* Two-tone wordmark */
.brand .tone { color: #a9a7a0; }