.contact { padding-block: clamp(32px, 6vw, 80px) var(--section); }
.contact__lead { margin-top: 1.25rem; }
.contact__phone { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--color-dark); }
.contact__phone span { display: block; }
.contact__phone a { display: inline-flex; align-items: center; min-height: var(--touch); font-family: var(--font-display); font-size: var(--text-h3); font-weight: 700; text-decoration: none; white-space: nowrap; }
.contact__demo { margin-top: 1.5rem; }

.form { display: grid; gap: 1rem; padding: 1.25rem; border: 1px solid var(--color-border); background: var(--color-surface); }
.form p { display: grid; gap: 0.3rem; }
.form label { font-weight: 600; }
.form input:not([type="hidden"]), .form select, .form textarea { width: 100%; min-height: var(--touch); padding: 0.7rem; border: 1px solid var(--color-text-2); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); font: inherit; }
.form .btn { justify-self: start; }
.form p.note { display: block; }
.form .errorlist { margin: 0; color: var(--color-error); }
.error { padding: 1rem; border-left: 4px solid var(--color-error); background: var(--color-error-bg); color: var(--color-error); }

@media (min-width: 900px) {
  .contact__intro { grid-column: 1 / span 5; }
  .contact .form { grid-column: 7 / span 6; padding: 2rem; }
  .form { padding: 2rem; }
}