/* Get in touch (v3.html), laid out like the solutions block: the statement and the contact links
   on the left, the form on the right behind a hairline, 48px off it. The form loses its card. */

.contact-v3 { padding: var(--space-16) 0 var(--space-12); background: var(--white); color: var(--black); }
.contact-v3 .contact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-12); row-gap: 0; }
.contact-v3__intro { max-width: 520px; font-family: var(--font-sans); font-size: 28px; line-height: 38px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink-muted); }
.contact-v3__intro > span:not(.t-word) { color: var(--black); } /* the dark lead-in only, not the word-reveal spans */
.contact-v3 .contact__links { gap: var(--space-3); margin-top: var(--space-8); }
.contact-v3 .contact__links a { font-size: 18px; line-height: 28px; text-decoration-color: var(--border-strong); }
.contact-v3 .contact__hint { font-size: 14px; }
.contact-v3 .contact__form { padding-left: var(--space-12); border-left: 1px solid var(--border); }
/* buttons on v3 are brand black (as in the header and the hero) */
.contact-v3 .in-btn--primary { background: var(--black); border-color: var(--black); color: var(--white); }
.contact-v3 .in-btn--primary:not(:disabled):hover { background: var(--graphite); border-color: var(--graphite); }

/* the footer: white, in the same container, a hairline between it and the form */
.footer-v3 { background: var(--white); color: var(--black); }
.footer-v3 .footer__grid { padding-top: var(--space-12); padding-bottom: var(--space-12); border-top: 1px solid var(--border); }
.footer-v3 .footer__brand img { height: 28px; }
.footer-v3 .footer__brand p { color: var(--ink-muted); }
.footer-v3 .footer__heading { color: var(--ink-muted); }
.footer-v3 .footer__col a { color: var(--black); }
.footer-v3 .footer__col a:hover { opacity: .7; }
.footer-v3 .footer__legal { padding-top: 0; padding-bottom: var(--space-12); border-top: 0; color: var(--ink-muted); }

@media (min-width: 1441px) {
  .contact-v3 { padding: calc(64 * var(--s)) 0 calc(48 * var(--s)); }
  .footer-v3 .footer__grid { padding-top: calc(48 * var(--s)); padding-bottom: calc(48 * var(--s)); }
  .footer-v3 .footer__brand img { height: calc(28 * var(--s)); }
  .contact-v3 .contact { column-gap: calc(48 * var(--s)); }
  .contact-v3__intro { max-width: calc(520 * var(--s)); font-size: calc(28 * var(--s)); line-height: calc(38 * var(--s)); }
  .contact-v3 .contact__links { margin-top: calc(32 * var(--s)); }
  .contact-v3 .contact__links a { font-size: calc(18 * var(--s)); line-height: calc(28 * var(--s)); }
  .contact-v3 .contact__form { padding-left: calc(48 * var(--s)); }
}

@media (max-width: 900px) {
  .contact-v3 { padding: var(--space-12) 0 var(--space-10); }
  .footer-v3 .footer__grid { padding-top: var(--space-10); padding-bottom: var(--space-10); }
  .contact-v3 .contact { grid-template-columns: 1fr; row-gap: var(--space-10); }
  .contact-v3__intro { font-size: 22px; line-height: 30px; }
  .contact-v3 .contact__form { padding-left: 0; border-left: 0; }
}