/* ==========================================================================
   Labelled form fields
   Webflow's export relied on placeholders alone, which vanish the moment
   someone starts typing, leaving no way to tell which box is which. Every
   control now has a persistent <label>, so each field is wrapped to give the
   label and the control a shared grid/flex cell.
   ========================================================================== */

.field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

/* Webflow assigned the two-column spans with `#id.w-node-<uuid>` selectors on
   the control itself. The wrapper is the grid item now, so the span lives here. */
.field--full {
  grid-column: 1 / -1;
}

.field-label {
  color: var(--black);
  margin-bottom: 0;
  font-family: DM Sans, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}

.field-optional {
  color: var(--dim-grey);
  font-weight: 400;
}

/* The control fills its wrapper rather than the form's cell. */
.field > .input,
.field > .w-input,
.field > .w-select {
  width: 100%;
  margin-bottom: 0;
}

.field > .input:focus,
.field > .w-select:focus {
  border-color: var(--brown-2);
  outline: 2px solid #aa2a3433;
  outline-offset: 1px;
}

/* `:user-invalid` only matches after the user has actually interacted with the
   field, so an untouched required field is never pre-flagged as an error. */
.field > .input:user-invalid,
.field > .w-select:user-invalid {
  border-color: var(--crimson);
}

/* Below their breakpoints both grids switch to `display: flex`, where
   `grid-column` is inert — so the full-width span needs no mobile override. */