/* A contact form. Sits inside .panel, so only the controls are defined here. */
.cform__form { display: flex; flex-direction: column; gap: 18px; max-width: 620px; }

.cform__field { display: flex; flex-direction: column; gap: 6px; }

.cform__label {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-navy, #12345b);
}

.cform__input {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius-md, 10px);
  border: 1.5px solid var(--color-border, #d9e2f2);
  background: var(--color-card, #fff);
  color: var(--color-ink, #1b2430);
  font-size: 16px;
  font-family: inherit;
}
.cform__input:focus-visible {
  outline: 3px solid var(--color-blue, #0a5fcc);
  outline-offset: 1px;
  border-color: transparent;
}
textarea.cform__input { resize: vertical; min-height: 130px; line-height: 1.6; }

.cform__group { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; }
.cform__option,
.cform__consent { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.cform__option input,
.cform__consent input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.cform__consent span { font-size: 15px; line-height: 1.5; color: var(--color-ink, #1b2430); }

.cform__help { font-size: 14px; color: var(--color-ink-soft, #49566c); }

/* Red is the only signal an error gets on colour alone, so it also carries a
   word — the message itself — and the input is marked with aria-invalid. */
.cform__error { font-size: 14px; font-weight: 600; color: var(--color-red, #dd0b18); }
.cform__error[hidden] { display: none; }
.cform__input[aria-invalid='true'] { border-color: var(--color-red, #dd0b18); }

.cform__actions { margin-top: 4px; }

.cform__result {
  padding: 14px 16px;
  border-radius: var(--radius-md, 10px);
  background: var(--color-ice, #edf4ff);
  color: var(--color-navy, #12345b);
  font-size: 15.5px;
  font-weight: 600;
}
.cform__result[hidden] { display: none; }
.cform__result--bad { background: #fdecee; color: #8f0e17; }

.cform__gone { color: var(--color-ink-soft, #49566c); font-style: italic; }

/*
 * The honeypot: out of sight, out of the accessibility tree, out of the tab
 * order. Not `display: none`, which some bots know to skip.
 */
.cform__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}