/* Grizzly Beam — /contact/ (spec: specs/contact-build-spec.md)
   The form reuses the .wpa__* classes from components.css. */

/* ---------- 1 · Hero ---------- */
.cnt-hero { display: flex; align-items: center; justify-content: center; }
/* ---------- 2 · Send us a note ----------
   Reorganized 2026-09-21. Was: a three-column strip (email / phone / a small audit form),
   then the title alone in the left corner beside a narrow form. Now one two-column
   section: title with email and phone under it on the left, the form card on the right.
   4fr / 7fr with a 6rem gap here, in the band below and in .cnt-map__grid, so the card, the
   audit field and the map all start on the same vertical. */
.cnt-form { background: linear-gradient(0deg, var(--stone2) 0%, var(--paper) 100%); color: var(--ink); padding-block: 8rem 7rem; }
.cnt-form__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 6rem; align-items: start; }
.cnt-form__title { font-size: 3.2rem; line-height: 1.05; letter-spacing: -0.005em; font-weight: var(--w-h2); }
.cnt-form__ways { margin-top: 4rem; display: flex; flex-direction: column; gap: 3rem; max-width: 30rem; }
.cnt-way { border-top: 1px solid rgba(22, 24, 28, 0.22); padding-top: 1.6rem; }
.cnt-way__label { color: var(--tx-g); }
.cnt-way__main {
  display: block; margin-top: 1.4rem;
  font-size: 2.1rem; line-height: 1.25; font-weight: var(--w-h3);   /* brand: H3 */
  color: var(--ink); text-decoration: none;
}
a.cnt-way__main:hover { color: var(--tx-g); }
.cnt-way__note { color: var(--tx-g); margin-top: 0.8rem; }

.cnt-form__form { width: 100%; }
/* align-items: start, so an error message under one field does not stretch its neighbor. */
.cnt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: start; }
.cnt-field { display: flex; flex-direction: column; min-width: 0; }
.cnt-row + .cnt-row, .cnt-row + .cnt-field { margin-top: 1.6rem; }
.cnt-form__form .wpa__label { margin-top: 0; }
.cnt-form__foot { display: flex; align-items: center; gap: 2rem; margin-top: 2.4rem; }
.cnt-form__foot .pill { flex: none; }
.cnt-form__foot .wpa__micro { margin-top: 0; }

/* ---------- 3 · Prefer to start small ----------
   The audit form as its own band: field and button on one line. The button is aligned from
   the top (label height + the input's margin), not from the bottom, so an error message
   under the field does not drag it down. */
.cnt-small { background: var(--stone2); color: var(--ink); padding-block: 0 8rem; }
.cnt-small__grid {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 6rem; align-items: end;
  border-top: 1px solid rgba(22, 24, 28, 0.22); padding-top: 3rem;
}
.cnt-small__l .cnt-way__main { margin-top: 1.4rem; }
.cnt-small__form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 1.2rem; }
.cnt-small__field { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cnt-small__field .wpa__input { max-width: none; line-height: 1.4; }
.cnt-small__field .fm-err { max-width: none; }
.cnt-small__form .pill { flex: none; margin-top: calc(0.984rem * 1.25 + 0.6rem); padding-block: 0; min-height: calc(3.65rem + 2px); }   /* = the input: 1.25rem x 1.4 + 2 x 0.95rem padding + border */
.cnt-small__form .fm-status { flex-basis: 100%; max-width: none; }

.cnt-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tx-g) 50%), linear-gradient(135deg, var(--tx-g) 50%, transparent 50%); background-position: calc(100% - 1.4rem) 55%, calc(100% - 0.9rem) 55%; background-size: 0.5rem 0.5rem; background-repeat: no-repeat; cursor: pointer; }
.cnt-textarea { resize: vertical; min-height: 8rem; }
.cnt-check { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; cursor: pointer; }
.cnt-check input { width: 1.3rem; height: 1.3rem; accent-color: var(--accent);   /* §07: form control, amber state */ }
.cnt-check .body { color: var(--tx-g); }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .cnt-form__grid, .cnt-small__grid { grid-template-columns: 1fr; gap: 4rem; }
  .cnt-small__grid { gap: 2.4rem; align-items: start; }
  .cnt-form__ways { max-width: none; }
}
@media (max-width: 767px) {
  .cnt-form { padding-block: 6rem 5rem; }
  .cnt-form__title { font-size: 2.6rem; }
  .cnt-row { grid-template-columns: 1fr; }
  .cnt-form__foot { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
  .cnt-small { padding-bottom: 6rem; }
  .cnt-small__form { flex-direction: column; align-items: stretch; }
  .cnt-small__form .pill { align-self: flex-start; margin-top: 1.6rem; }
}