/* ============================================================
   Green & Co. - the estimate form on a DARK surface.

   Extracted from remodel.css on 2026-08-26. Both remodel landing pages render
   this form, and the ad variant was pulling the whole 41KB field-record
   stylesheet to get it: 12.3KB gzipped of chapters, rails and proof sequences
   for a page that has none of them, on the one page in the account built to
   raise a landing-page score that counts how fast it loads.

   What deliberately did NOT come along: `.ask__facts`, which only the field
   record uses, and the phone-width rule that full-bleeds this form out of that
   page's rail. That rule is written in `--rail` and `--gut`, custom properties
   declared on `.rec`, so on any page without the field-record wrapper it
   resolves to nothing and has always been inert. It stays with the page whose
   variables it depends on.

   The homepage form is NOT here. It uses different class names on a white
   surface and shares no rule with this one.
   ============================================================ */

.ask__form {
  background: var(--gc-charcoal);
  border-radius: var(--gc-radius);
  padding: clamp(24px, 3.4vw, 40px);
}
.ask__form-intro {
  margin-bottom: clamp(24px, 3vw, 32px);
  padding-bottom: clamp(20px, 2.6vw, 26px);
  border-bottom: 1px solid var(--hair);
}
.ask__form-title {
  margin: 0;
  color: var(--gc-text-on-dark);
  font-family: var(--gc-font-serif);
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: var(--gc-weight-display);
  line-height: 1.15;
}
.ask__form-lede {
  margin: 10px 0 0;
  max-width: 46ch;
  color: var(--gc-text-muted);
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
}
.fld { display: grid; gap: 7px; margin-bottom: 20px; }
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 22px); }
.fld label {
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gc-text-muted);
}
.fld__opt { letter-spacing: .1em; opacity: .8; }
.fld input, .fld select, .fld textarea {
  width: 100%;
  font-family: var(--gc-font-sans);
  font-size: 1rem;
  color: var(--gc-text-on-dark);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(245, 245, 245, .28);
  border-radius: 0;
  padding: 10px 2px;
  min-height: 44px;
}
.fld textarea { resize: vertical; line-height: 1.5; }
.fld select { appearance: none; cursor: pointer; }
/* The native arrow disappears with appearance:none, so the control has to say it
   is a control some other way. */
.fld select {
  background-image: linear-gradient(45deg, transparent 50%, rgba(245,245,245,.6) 50%),
                    linear-gradient(135deg, rgba(245,245,245,.6) 50%, transparent 50%);
  background-position: right 12px top 55%, right 6px top 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 28px;
}
.fld select option { background: var(--gc-charcoal); color: var(--gc-text-on-dark); }
.fld input:focus, .fld select:focus, .fld textarea:focus {
  outline: none;
  border-bottom-color: var(--gc-accent);
}

/* Invalid field state. See the note in home.css; the same reasoning applies,
   with this form's underline treatment and the on-dark error token. The
   box-shadow doubles the rule to 2px without changing the border width, so
   nothing reflows when a field goes invalid. */
.fld input[aria-invalid="true"],
.fld select[aria-invalid="true"],
.fld textarea[aria-invalid="true"],
.fld input[aria-invalid="true"]:focus,
.fld select[aria-invalid="true"]:focus,
.fld textarea[aria-invalid="true"]:focus {
  border-bottom-color: var(--gc-err-dark);
  box-shadow: 0 1px 0 var(--gc-err-dark);
}
.fld:has([aria-invalid="true"]) label { color: var(--gc-err-dark); }
/* The focus ring goes red too. form.js focuses the field it marked, so the
   default accent ring lands on a field the page is calling wrong, and a gold
   box around a red underline reads as two states arguing. Same ring, restated
   in the state's own colour. */
.fld [aria-invalid="true"]:focus-visible { outline-color: var(--gc-err-dark); }

.fld input:focus-visible, .fld select:focus-visible, .fld textarea:focus-visible {
  outline: 2px solid var(--gc-accent);
  outline-offset: 3px;
}
.fld--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fld-hint {
  margin: -8px 0 20px;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--gc-text-muted);
}
.ask__turnstile { margin-bottom: 20px; }
.ask__form .leadform__submit { width: 100%; }
.leadform__status {
  margin: 14px 0 0;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--gc-text-muted);
  min-height: 1.4em;
}
.leadform__status.is-ok { color: var(--gc-ok); }
.leadform__status.is-error { color: var(--gc-err-dark); }

/* Carried over from the field record's 640px block, because it is the form's
   own stacking rule rather than that page's composition. */
@media (max-width: 640px) {
  .fld-row { grid-template-columns: 1fr; }
}