.contact-form {
  background-color: rgb(var(--color-background));
}

.contact-form__inner {
  margin-inline: auto;
}

.contact-form__group {
  gap: 14.4px;
}

@media (max-width: 959px) {
  .contact-form__group {
    display: block;
  }
}

.contact-form .field,
.contact-form .field__label,
.contact-form .field__input {
  font-size: inherit;
}

.contact-form .field {
  margin-block-end: 14.4px;
}

/* The reference paints the field box on the control itself: 1px #2E4A29, radius 8px.
   This theme paints it with .field::after from the global input tokens (1px rgba(9,18,8,0.2),
   radius 4px), so retarget that pseudo-element rather than the input. */
.contact-form .field::after {
  border: 1px solid #2e4a29;
  border-radius: 8px;
}

.contact-form .field__input {
  padding: 16px 20px;
  border: 1px solid transparent;
  font-family: inherit;
  /* Reference types in pure black; the theme default is the near-black green rgb(9,18,8). */
  color: #000000;
}

/* The reference shows a real placeholder; this theme floats the label over the input and
   hides the placeholder. Restore the placeholder and retire the floating label. */
.contact-form .field__input::placeholder {
  opacity: 1;
  color: #000000;
}

.contact-form .field__label {
  display: none !important;
}

.contact-form .textarea {
  height: 230px;
  padding: 16px 20px;
  margin-block: 0;
}

@media (max-width: 959px) {
  .contact-form .textarea {
    height: 258px;
  }

  .contact-form .field__input {
    font-size: 16px;
  }
}

.contact-form__button {
  margin-block-start: 14.4px;
  text-align: left;
}

/* Defeats the global .button min-height:52px !important so the submit matches the reference.
   The size is pinned here rather than left to button_typography: the `body4` token resolves to
   13px at mobile, while the reference stays 14px at every width. */
.contact-form__button .button {
  min-height: 0 !important;
  font-size: 14px;
  line-height: 19.6px;
}

@media (max-width: 959px) {
  .contact-form__button {
    margin-block-start: 14.4px;
  }
}