/* Section: Get in touch (#get-in-touch). The only call to action: a framed card with the contact form.
   Independent of the other sections. Needs section-base.css.
   If this section is removed, the nav and hero "Get in touch" buttons need a new target. */

.cta__card { display: grid; gap: var(--s-8); padding: var(--s-8) var(--s-6); }
@media (min-width: 960px) {
  .cta__card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-9); padding: var(--s-9) var(--s-9); align-items: start; }
}
.cta__card .s__head { margin: 0; max-width: none; }
.cta__card .s__title { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.375rem); }

.form { display: grid; gap: var(--s-5); max-width: 560px; }
.field label {
  display: block; margin-bottom: var(--s-2);
  color: var(--t-2); font-size: var(--fs-small); font-weight: 500; line-height: 1.5;
}
.field input, .field textarea {
  display: block; width: 100%;
  padding: var(--s-3) var(--s-4);
  background: var(--recessed); color: var(--t-body);
  /* CHOICE: #6B6B6B (3.5:1), not the 8% hairline, because a form control's edge must be perceivable. */
  border: 1px solid #6B6B6B; border-radius: 4px;
  font: 400 var(--fs-body)/1.55 var(--font-sans);
}
.field__opt { color: var(--t-4); font-weight: 400; }
.field textarea { resize: vertical; min-height: 144px; }
.form .btn { justify-self: start; }
.form__status { margin: 0; }
.form__status[hidden] { display: none; }
.form__note { margin: 0; max-width: 56ch; color: var(--t-4); font-size: var(--fs-small); line-height: 1.5; }
.hp { display: none; }
@media (max-width: 719.98px) { .cta__card { padding: var(--s-6) var(--s-5); } }