/* Home Team Construction — 08 Lead form

   Rebuilt from deliverables/review.html <template id="cmp-form">, whose CSS
   restyled Elementor Pro's markup. The markup is native here, but every value
   and every layout decision below is the artifact's.

   The artifact's own notes, carried forward because they are load-bearing:

     THE DEFECT IT FIXES. Every field on the live site is placeholder-only.
     Elementor emits proper <label> elements then hides them with
     .elementor-screen-only, so a field's name disappears the moment someone
     types into it. The labels are real and visible here.

     THE CONSENT TEXT IS NOT DUPLICATED. The audit called the SMS checkbox a
     markup bug; the artifact corrected that. There is one acceptance input —
     the consent TEXT appears twice in Elementor's output because it emits a
     hidden <label> plus a visible option label. One visible sentence is the
     correct rendering, which is what this produces. The /quote/ form is a
     separate form and was never checked; do not assume it matches.

     THE CARD. The form previously sat as bare fields on the page background,
     so beside a solid colour panel it read as "block next to nothing" rather
     than as a pair.

   FIELD LAYOUT comes from the Elementor form's own column config, not from the
   artifact's CSS: Full Name is full width, Phone and Email share a row, and
   the message, consent and submit are full width again.
*/

.htc-form{
  box-sizing:border-box;
  width:100%;
  max-width:calc(var(--htc-container) + var(--htc-s4) * 2);
  margin-inline:auto;
  /* Matches the vertical rhythm the outcomes block sets on its own wrapper, so
     the card and the panel beside it start level instead of the card floating. */
  padding:var(--htc-s7) var(--htc-s4);
  font-family:var(--htc-font-body);
}

.htc-form *,
.htc-form *::before,
.htc-form *::after{ box-sizing:border-box; }

.htc-form__card{
  background:var(--htc-white);
  padding:var(--htc-s5);
  box-shadow:0 18px 40px rgba(16,16,16,.16);
}

/* --- the field grid ---
   Two columns. Elementor spaced its col-50 pair with s2 of padding on each
   facing edge, so the column gap here is s4; the row gap is the s3 margin its
   field groups carried. */
.htc-form__form{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:var(--htc-s4);
  row-gap:var(--htc-s3);
}

.htc-form__group{
  display:flex;
  flex-direction:column;
  grid-column:1 / -1;
}

.htc-form__group--half{
  grid-column:auto;
}

/* --- labels --- */

.htc-form__label{
  display:block;
  margin:0 0 var(--htc-s1);
  font-family:var(--htc-font-body);
  font-size:var(--htc-eyebrow);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.3;
  color:var(--htc-text);
}

/* --- fields --- */

.htc-form__input,
.htc-form__textarea{
  width:100%;
  min-height:48px;
  padding:var(--htc-s2);
  border:1px solid var(--htc-border);
  border-radius:var(--htc-radius);
  background:var(--htc-white);
  font-family:var(--htc-font-body);
  font-size:var(--htc-body);
  line-height:1.5;
  color:var(--htc-black);
  box-shadow:none;
  transition:border-color 160ms ease, box-shadow 160ms ease;
}

.htc-form__input:hover,
.htc-form__textarea:hover{
  border-color:var(--htc-text);
}

.htc-form__input:focus,
.htc-form__textarea:focus{
  outline:none;
  border-color:var(--htc-red);
  /* A ring rather than an outline, so it hugs the square corners. */
  box-shadow:0 0 0 3px rgba(230,57,70,.22);
}

.htc-form__input::placeholder,
.htc-form__textarea::placeholder{
  color:var(--htc-border);
}

.htc-form__textarea{
  min-height:132px;
  resize:vertical;
}

/* --- consent ---
   The label sits beside the control and reads as a sentence, not as a field,
   so it does not take the uppercase treatment above. */

.htc-form__consent{
  grid-column:1 / -1;
  display:flex;
  align-items:flex-start;
  gap:var(--htc-s2);
}

.htc-form__checkbox{
  flex-shrink:0;
  width:20px;
  height:20px;
  margin:2px 0 0;
  accent-color:var(--htc-red);
}

.htc-form__checkbox:focus-visible{
  outline:2px solid var(--htc-red);
  outline-offset:2px;
}

.htc-form__consent label{
  font-family:var(--htc-font-body);
  font-size:var(--htc-small);
  line-height:1.55;
  color:var(--htc-text);
  cursor:pointer;
}

/* --- submit --- */

.htc-form__actions{
  grid-column:1 / -1;
}

.htc-form__submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:var(--htc-s2) var(--htc-s5);
  border:2px solid var(--htc-red);
  border-radius:var(--htc-radius);
  background:var(--htc-red);
  color:var(--htc-white);
  font-family:var(--htc-font-body);
  font-size:var(--htc-body);
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
  transition:box-shadow 200ms ease;
}

.htc-form__submit:hover{
  box-shadow:inset 0 0 0 999px rgba(2,1,1,.15);
}

.htc-form__submit:focus-visible{
  outline:2px solid var(--htc-black);
  outline-offset:2px;
}

@media (max-width:1150px){
  .htc-form{ padding-block:var(--htc-s6); }
}

@media (max-width:767px){
  .htc-form{ padding-block:0 var(--htc-s5); }

  .htc-form__card{ padding:var(--htc-s3); }

  /* Phone and Email share a row above this. At 375px that leaves each about
     120px wide: "EMAIL (OPTIONAL)" wraps onto two lines, pushing its input out
     of line with the one beside it, and the phone placeholder truncates to
     "Phone Numb". Below the mobile breakpoint they go full width. */
  .htc-form__form{ grid-template-columns:1fr; }

  .htc-form__group--half{ grid-column:1 / -1; }
}

@media (prefers-reduced-motion:reduce){
  .htc-form__input,
  .htc-form__textarea,
  .htc-form__submit{ transition:none; }
}