/* =========================================================================
   Close The Deal - evaluation form
   Added 2026-08-24.

   Until now every call to action on this site was a mailto: link. That asks a
   stranger to open a mail client, invent a subject line and work out what we
   need to know. Most people simply do not. This replaces guesswork with named
   fields, and lets them attach photos, which is the single thing that makes an
   evaluation possible at all.
   ====================================================================== */

.ctd-form {
  max-width: 680px;
  margin: 1.9rem auto 0;   /* the intro paragraph sat right on top of the first field */
  text-align: left;
}

.ctd-form__row { margin-bottom: 1.15rem; }

/* Two fields side by side on desktop, stacked on phones, with no media query
   needed: the flex-basis floor does the work. */
.ctd-form__pair {
  display: flex;
  flex-wrap: wrap;
  gap: 1.15rem;
  margin-bottom: 1.15rem;
}
.ctd-form__pair > .ctd-form__row {
  flex: 1 1 220px;
  margin-bottom: 0;
  min-width: 0;
}

.ctd-form label {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
  color: #141414;
}
.ctd-form .ctd-form__req { color: #B84A26; }

.ctd-form input[type="text"],
.ctd-form input[type="email"],
.ctd-form input[type="tel"],
.ctd-form select,
.ctd-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.8rem 0.9rem;
  font: inherit;
  font-size: 1rem;              /* 16px minimum, or iOS zooms the page on focus */
  color: #141414;
  background: #fff;
  border: 2px solid #d8d2c8;
  border-radius: 10px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.ctd-form textarea { min-height: 140px; resize: vertical; }

.ctd-form input:focus,
.ctd-form select:focus,
.ctd-form textarea:focus {
  outline: none;
  border-color: #B84A26;
  box-shadow: 0 0 0 3px rgba(184,74,38,.18);
}

.ctd-form__hint {
  font-size: 0.87rem;
  color: #6b6b6b;
  margin-top: 0.35rem;
  line-height: 1.45;
}

/* The file input, styled as a drop zone. The real input stays in the DOM and
   focusable - it is only visually replaced, so keyboard and screen readers are
   unaffected. */
.ctd-form__file {
  border: 2px dashed #c9c2b6;
  border-radius: 12px;
  padding: 1.1rem;
  background: #fbf9f5;
  transition: border-color .18s ease, background .18s ease;
}
.ctd-form__file:focus-within { border-color: #B84A26; background: #fff; }
.ctd-form input[type="file"] {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  color: #444;
}
.ctd-form input[type="file"]::file-selector-button {
  font: inherit;
  font-weight: 700;
  padding: 0.5rem 0.9rem;
  margin-right: 0.8rem;
  color: #fff;
  background: #141414;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background .18s ease;
}
.ctd-form input[type="file"]::file-selector-button:hover { background: #B84A26; }

.ctd-form__submit {
  display: inline-block;
  width: 100%;
  padding: 0.95rem 1.5rem;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
  background: #B84A26;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.ctd-form__submit:hover {
  background: #9F3F20;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(184,74,38,.32);
}
.ctd-form__submit:active { transform: translateY(0); }

.ctd-form__foot {
  font-size: 0.87rem;
  color: #6b6b6b;
  margin-top: 0.9rem;
  text-align: center;
  line-height: 1.5;
}

/* The honeypot. Must be reachable by bots and invisible to people, which means
   NOT display:none - some bots skip hidden fields deliberately. */
.ctd-form__honey {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .ctd-form__submit:hover { transform: none; }
}

/* Server-side validation message. The form posts to PHP now, so a rejected
   submission comes back as a redirect with a reason rather than being handled
   in the browser. */
.ctd-form__error {
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border-left: 4px solid #B84A26;
  background: #fdf0ea;
  color: #7a2d13;
  font-size: 0.95rem;
  font-weight: 600;
}