/* Contact page: the homepage CTA, given a whole page. Tokens from redesign.css only. */

.contact { padding-top: clamp(56px, 9vw, 128px); padding-bottom: clamp(72px, 10vw, 140px); }
.contact .eyebrow { margin-bottom: 28px; }
.contact__title {
  font-size: clamp(3.4rem, 1rem + 11vw, 11rem); font-weight: 500;
  letter-spacing: -0.055em; line-height: 0.92;
}
.contact__title em { color: var(--accent); letter-spacing: -0.02em; padding-right: 0.05em; }

.contact__grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(40px, 6vw, 96px); align-items: start;
  margin-top: clamp(48px, 7vw, 96px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--line);
}
.contact__lede { max-width: 54ch; font-size: 1.125rem; line-height: 1.6; color: var(--ink-2); }
.contact__lede:first-child { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.4; color: var(--ink); letter-spacing: -0.015em; }
.contact__lede + .contact__lede { margin-top: 1.1em; }
.contact__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }

.contact__details { border-top: 1px solid var(--line); }
.contact__row { padding: 20px 0; border-bottom: 1px solid var(--line); }
.contact__row dt {
  font: 500 0.7rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 10px;
}
.contact__row dd { font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); font-weight: 500; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.contact__row a { transition: color 0.2s; }
.contact__row a:hover { color: var(--accent); }
.contact__row a span { color: var(--ink-3); font-family: var(--mono); font-size: 0.85em; }

@media (max-width: 860px) {
  .contact__grid { grid-template-columns: 1fr; }
}