/* =====================================================================
   FORM · the /contact-us form card, its contact action pills and the map slot.
   Live classes: contact-cta-row, contact-cta, contact-cta-icon, contact-content,
   contact-card white-bg, form-content-title subheading3, form-wrap w-form,
   form-group, form-field w-input / w-select, form-text-area w-input,
   text-area-icon, form-footer, cf-turnstile, form-button (see button),
   w-form-done, w-form-fail, contact-map.
   The submit is the black pill from ../button/button.css (.vm-button--black.vm-button--wide).
   ===================================================================== */

.vm-form {
  /* TOKEN-REQUEST: #e1e1e1 · 1px field border (live .form-field). Nearest token --vm-pill-hover-light #ddd is a hover fill, not a rule. */
  --vm-form-field-line: #e1e1e1;
  /* TOKEN-REQUEST: #999999 · placeholder text (live Webflow .w-input::placeholder). */
  --vm-form-placeholder: #999999;
  font-family: var(--vm-font-body);
}

/* ---------- Contact actions: Call / Email / Directions (live contact-cta-row) ---------- */
.vm-form__actions {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: var(--vm-space-4);
  max-width: 800px;
  margin: 60px auto;
  padding: 0;
  list-style: none;
}
.vm-form__action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--vm-space-2);
  padding: 10px 24px;
  border: var(--vm-border-hair) solid var(--vm-night);
  border-radius: var(--vm-radius-round);
  color: var(--vm-night);
  font: 600 16px/20px var(--vm-font-body);
  text-decoration: none;
  transition: background-color var(--vm-duration) var(--vm-ease);
}
.vm-form__action:hover,
.vm-form__action.is-hover { background-color: var(--vm-white); }
.vm-form__action.is-focus { outline: 2px solid var(--vm-focus); outline-offset: 3px; }
.vm-form__action-icon { display: block; flex: none; width: 20px; height: 20px; }

/* ---------- Card + map layout (live contact-content: 1.25fr 1fr) ---------- */
.vm-form__layout {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  align-items: center;
  gap: var(--vm-space-8);
  margin-top: var(--vm-space-8);
}
.vm-form__card {
  width: 100%;
  padding: 38px;
  background: var(--vm-white);
  color: var(--vm-night);
}
.vm-form__title {
  margin: 0;
  color: var(--vm-night);
  font: 600 var(--vm-fs-subheading3) / var(--vm-lh-subheading3) var(--vm-font-display);   /* 24/32 */
  letter-spacing: 0;
  text-align: center;
}
.vm-form__form { margin: 22px 0 15px; }   /* live .form-wrap + .w-form bottom margin */

.vm-form__row {
  position: relative;
  display: flex;
  gap: 18px;
  margin-bottom: 18px;
}
.vm-form__group { position: relative; flex: 1 1 0; min-width: 0; }
.vm-form__control { position: relative; }   /* anchors the textarea icon to the field */

/* ---------- Labels: real <label>s; visually hidden in the live-faithful layout ---------- */
.vm-form__label {
  display: block;
  margin-bottom: var(--vm-space-2);
  color: var(--vm-night);
  font: 600 var(--vm-caption) / 20px var(--vm-font-body);
}
.vm-form__label--sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Fields ---------- */
.vm-form__field {
  display: block;
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 14px 16px;
  border: var(--vm-border-hair) solid var(--vm-form-field-line);
  border-radius: var(--vm-radius-input);
  background-color: var(--vm-white);
  color: var(--vm-pencil);                  /* live #6f6f72 */
  font: 400 var(--vm-body) / 24px var(--vm-font-body);
  transition: border-color var(--vm-duration) var(--vm-ease);
}
.vm-form__field::placeholder { color: var(--vm-form-placeholder); opacity: 1; }
textarea.vm-form__field {
  height: auto;
  min-height: 174px;
  padding: 14px 12px 8px 52px;
  resize: vertical;
}
.vm-form__textarea-icon {
  position: absolute;
  top: 14px;
  left: 16px;
  width: 24px;
  height: 24px;
  pointer-events: none;
}

/* Select: native control, custom chevron (live inline 'select {' block: 20px chevron, 16px from the right) */
.vm-form__select { position: relative; display: block; }
.vm-form__select .vm-form__field {
  padding-right: 40px;
  -webkit-appearance: none;
          appearance: none;
  cursor: pointer;
}
.vm-form__select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 20px;
  height: 20px;
  translate: 0 -50%;
  background-color: var(--vm-night);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}

/* Focus: live swaps the border to Webflow blue #3898ec with no outline. Brand version: indigo, 2px. */
.vm-form__field:focus,
.vm-form__field.is-focus {
  border-color: var(--vm-focus);
  outline: var(--vm-border-hair) solid var(--vm-focus);
  outline-offset: 0;
}

/* ---------- Footer: verification widget slot + submit ---------- */
.vm-form__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 44px;
}
.vm-form__verify {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  max-width: 100%;
  height: 65px;
  margin-bottom: 16px;                      /* live inline style on .cf-turnstile */
  border: var(--vm-border-hair) solid var(--vm-rule);
  background: var(--vm-cream);
  color: var(--vm-pencil);
  font: 400 12px/1.4 var(--vm-font-body);
  text-align: center;
}

/* ---------- Form-level messages (live Webflow .w-form-done / .w-form-fail) ---------- */
.vm-form__message {
  margin: 0;
  color: var(--vm-ink);
  font: 400 var(--vm-caption) / 20px var(--vm-font-body);
}
.vm-form__message--done {
  padding: 20px;
  background-color: var(--vm-pill-hover-light);   /* live #ddd */
  text-align: center;
}
.vm-form__message--fail {
  margin-top: 10px;
  padding: 10px;
  background-color: var(--vm-tint-rose);          /* live #ffdede (Webflow default), mapped to the rose tint */
}

/* ---------- Map slot (live Google Maps iframe; neutral placeholder here) ---------- */
.vm-form__map {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 340px;
  background: var(--vm-surface-warm);
  color: var(--vm-pencil-strong);
  font: 700 13px/1.5 var(--vm-font-body);
  letter-spacing: var(--vm-tracking-eyebrow);
  text-transform: uppercase;
}

/* ---------- Responsive (live) ---------- */
@media (max-width: 991px) {
  .vm-form__layout { grid-template-columns: 1fr; }
  .vm-form__map { height: auto; min-height: 0; aspect-ratio: 1; }
}
@media (max-width: 767px) {
  .vm-form__action { padding-left: 12px; }
  .vm-form__row { flex-direction: column; gap: 0; margin-bottom: 0; }
  .vm-form__group { flex: none; }
  .vm-form__row .vm-form__field { margin-bottom: 18px; }
  .vm-form__footer { flex-direction: column; justify-content: space-between; }
}
@media (max-width: 479px) {
  .vm-form__actions { grid-auto-flow: row; }
  .vm-form__layout { margin-top: 40px; }
  .vm-form__card { padding: 20px; }
  .vm-form__footer { margin-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .vm-form__action, .vm-form__field { transition: none; }
}