/* contact-form.css — styles for <contact-form>.
 *
 * Linked BEFORE each page's inline <style> so that any page which already
 * defines .cform (About Us, Business Owners, industries, the four process
 * pages) keeps its own rules and its existing card look. Pages with no local
 * .cform (Contact Us) get the base treatment from here.
 */

.cform {
  background: var(--paper, #FBFAF5);
  border-radius: 18px;
  padding: 32px 30px;
  box-shadow: 0 34px 74px rgba(9, 26, 19, 0.36);
  border: 1px solid rgba(245, 242, 234, 0.1);
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease;
}
.cform:hover { transform: translateY(-4px); box-shadow: 0 44px 90px rgba(9, 26, 19, 0.44); }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fld { margin: 0 0 16px; }
.fld label { transition: color .18s; }
.fld:focus-within label { color: var(--forest, #143D2E); }
.cform label {
  display: block; font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brassDk, #916E38); margin: 0 0 8px;
}
.cform__opt { text-transform: none; letter-spacing: 0; color: rgba(26, 29, 26, 0.4); font-size: 11px; }
.cform input, .cform textarea {
  width: 100%; background: #fff; border: 1px solid rgba(20, 61, 46, 0.18);
  border-radius: 9px; padding: 12px 14px;
  font-family: var(--sans, system-ui, sans-serif); font-size: 15px; color: var(--ink, #1A1D1A);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.cform input:hover, .cform textarea:hover { border-color: rgba(176, 137, 76, 0.55); background: #fffdf8; }
.cform input:focus, .cform textarea:focus {
  outline: none; border-color: var(--brass, #B0894C); box-shadow: 0 0 0 3px rgba(176, 137, 76, 0.16);
}
.cform input.err, .cform textarea.err { border-color: #B4462F; box-shadow: 0 0 0 3px rgba(180, 70, 47, 0.14); }
.cform textarea { resize: vertical; min-height: 104px; }
.cform__btn {
  width: 100%; margin-top: 4px; background: var(--forest, #143D2E); color: var(--cream, #F5F2EA);
  border: none; border-radius: 999px; padding: 15px;
  font-family: var(--sans, system-ui, sans-serif); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
  transition: background .2s, transform .2s, box-shadow .2s, letter-spacing .2s;
}
.cform__btn:hover { background: var(--pine, #0E2A20); transform: translateY(-1px); box-shadow: 0 14px 30px rgba(9, 26, 19, 0.3); letter-spacing: 0.17em; }
.cform__btn:active { transform: translateY(0); box-shadow: 0 6px 16px rgba(9, 26, 19, 0.26); }
.cform__note { font-size: 12px; color: rgba(26, 29, 26, 0.5); margin: 14px 0 0; text-align: center; }
.cform__success { display: none; text-align: center; padding: 34px 10px; }
.cform.is-sent .cform__form { display: none; }
.cform.is-sent .cform__success { display: block; }
.cform__success:focus { outline: none; }
.cform__check {
  width: 58px; height: 58px; border-radius: 50%; background: rgba(20, 61, 46, 0.08);
  border: 1px solid rgba(20, 61, 46, 0.14); display: flex; align-items: center;
  justify-content: center; margin: 0 auto 20px;
}
.cform__success h3 { font-family: var(--serif, Georgia, serif); font-weight: 500; font-size: 27px; color: var(--forest, #143D2E); margin: 0 0 10px; }
.cform__success p { font-size: 15px; line-height: 1.6; color: rgba(26, 29, 26, 0.7); margin: 0 auto; max-width: 34ch; }

/* ---- additions for the reusable component ---- */

/* Required marker on company + email only. */
.cform__req { color: #B4462F; font-size: 12px; letter-spacing: 0; }

/* Per-field inline validation message. Empty by default, so it takes no space. */
.cform__err {
  margin: 7px 0 0; font-family: var(--sans, system-ui, sans-serif); font-size: 12px;
  line-height: 1.4; color: #B4462F;
}
.cform__err:empty { display: none; }

/* Whole-form submit failure. */
.cform__error {
  margin: 14px 0 0; padding: 11px 13px; border-radius: 9px;
  background: rgba(180, 70, 47, 0.08); border: 1px solid rgba(180, 70, 47, 0.3);
  font-family: var(--sans, system-ui, sans-serif); font-size: 13px; line-height: 1.5;
  color: #8E3A26;
}
.cform__error:empty { display: none; }

/* Error slot for the home page's single-field "Join our network" form, which
   keeps its own design and only borrows the submit helper. */
.join__err {
  margin: 16px auto 0; max-width: 46ch;
  font-family: var(--sans, system-ui, sans-serif); font-size: 13px; line-height: 1.5;
  color: #8E3A26; text-align: center;
}
.join__err:empty { display: none; }

/* Pending state while the submission is in flight. */
.cform.is-busy { pointer-events: none; }
.cform.is-busy:hover { transform: none; }
.cform.is-busy .cform__btn { opacity: .68; cursor: progress; }

@media (max-width: 860px) {
  .cform { padding: 26px 22px; }
  .cform__row { grid-template-columns: 1fr; gap: 0; }
}