/* ==========================================================================
   Reusable contact form — self-contained styles.
   Every colour falls back to a sensible default, so the component can be
   dropped into any site; override the --cform-* variables to re-skin it.
   ========================================================================== */
.cform {
  --cform-accent:      var(--orange-600, #C4552A);
  --cform-accent-soft: var(--orange-50, #FDF0E7);
  --cform-ink:         var(--ink, #14273A);
  --cform-body:        var(--body, #45586A);
  --cform-muted:       var(--muted, #6F8296);
  --cform-line:        rgba(14, 43, 69, .16);
  --cform-field-bg:    #fff;
  --cform-radius:      14px;
  --cform-error:       #B3261E;
  --cform-success:     #16704F;
  display: grid;
  gap: 1.15rem;
}

.cform__fields { display: grid; gap: 1.15rem; }
.cform__row { display: grid; gap: 1.15rem; }
@media (min-width: 620px) { .cform__row--2 { grid-template-columns: 1fr 1fr; } }

.cform__field { display: grid; gap: .45rem; }
.cform__label {
  font-size: .9375rem; font-weight: 600; color: var(--cform-ink);
  display: flex; align-items: baseline; gap: .4rem;
}
.cform__label .cform__optional { font-weight: 500; font-size: .8125rem; color: var(--cform-muted); }
.cform__hint { font-size: .8125rem; color: var(--cform-muted); }

.cform input[type="text"],
.cform input[type="email"],
.cform input[type="tel"],
.cform select,
.cform textarea {
  width: 100%;
  padding: .85rem 1rem;
  font-size: 1rem; line-height: 1.5; color: var(--cform-ink);
  background: var(--cform-field-bg);
  border: 1px solid var(--cform-line);
  border-radius: var(--cform-radius);
  box-shadow: 0 1px 2px rgba(14, 43, 69, .04);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  appearance: none;
}
.cform textarea { min-height: 9.5rem; resize: vertical; }
.cform select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236F8296' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: .72rem;
  padding-right: 2.5rem;
}
.cform ::placeholder { color: #9BAAB8; }

.cform input:hover, .cform select:hover, .cform textarea:hover { border-color: rgba(14, 43, 69, .28); }
.cform input:focus, .cform select:focus, .cform textarea:focus {
  outline: none;
  border-color: var(--cform-accent);
  box-shadow: 0 0 0 4px var(--cform-accent-soft);
}
.cform [aria-invalid="true"] {
  border-color: var(--cform-error);
  box-shadow: 0 0 0 4px rgba(179, 38, 30, .10);
}

.cform__error { font-size: .8125rem; font-weight: 600; color: var(--cform-error); }

/* honeypot — hidden from people, reachable by bots */
.cform__trap {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.cform__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.cform__footer .cform__hint { flex: 1 1 14rem; }

.cform__status {
  padding: .95rem 1.15rem;
  border-radius: var(--cform-radius);
  font-size: .9375rem; font-weight: 500;
  border: 1px solid transparent;
}
.cform__status:focus { outline: none; }
.cform__status.is-success {
  background: #EAF6F1; border-color: rgba(22, 112, 79, .25); color: var(--cform-success);
}
.cform__status.is-error {
  background: #FDECEA; border-color: rgba(179, 38, 30, .22); color: var(--cform-error);
}