/* Boothroyd intake forms.
   Included alongside site.css. Locked palette only, Plex only, no external
   resource. Spacing is a multiple of 4, as in site.css. The custom properties are
   redeclared with the same values so a partial still renders correctly if it is
   included on a page that does not load site.css. */
.intake{--graphite:#12151A;--signal:#3FA34D;--signal-text:#1E6B3A;--paper:#FAFAF6;
  --steel:#5C6470;--hair:#E3E3DD}

.intake-form{max-width:640px;margin-top:32px}
.intake-lede{max-width:640px;color:var(--steel)}

.intake-field{margin-bottom:24px}
.intake-field label{display:block;font-family:'IBM Plex Mono',monospace;font-size:14px;
  letter-spacing:.02em;color:var(--graphite);margin-bottom:8px}
.intake-optional{color:var(--steel);text-transform:none;letter-spacing:0}
.intake-hint{display:block;font-size:14px;color:var(--steel);margin-bottom:8px}

.intake-field input[type=text],
.intake-field input[type=email],
.intake-field select,
.intake-field textarea{
  width:100%;background:var(--paper);color:var(--graphite);
  border:1px solid var(--hair);border-bottom:1px solid var(--steel);
  padding:12px;font-family:'IBM Plex Sans',Arial,Helvetica,sans-serif;font-size:16px;
  line-height:1.5;min-height:48px}
.intake-field textarea{min-height:140px;resize:vertical}
.intake-field input:focus-visible,
.intake-field select:focus-visible,
.intake-field textarea:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

.intake-consent{display:flex;gap:12px;align-items:flex-start;margin-bottom:24px;
  border-top:1px solid var(--hair);padding-top:24px}
.intake-consent input[type=checkbox]{width:20px;height:20px;margin-top:4px;flex:0 0 auto;
  accent-color:#3FA34D}
.intake-consent label{font-family:'IBM Plex Sans',Arial,Helvetica,sans-serif;font-size:16px;
  color:var(--graphite);margin:0;line-height:1.5}

.intake-submit{background:var(--graphite);color:var(--paper);border:0;
  font-family:'IBM Plex Mono',monospace;font-size:14px;letter-spacing:.02em;
  padding:12px 24px;min-height:48px;cursor:pointer}
.intake-submit:hover{background:var(--signal);color:#FAFAF6}

/* What the applicant is told before they send it. Above the button, in body
   type rather than small print, because it is the answer to the question that
   stops most people filling a trade form in. */
.intake-statement{max-width:640px;margin:0 0 24px;font-size:16px;line-height:1.5;
  color:var(--graphite)}

.intake-note{max-width:640px;margin-top:24px;font-size:14px;color:var(--steel)}

/* The honeypot. Kept out of the accessibility tree and off the tab order rather
   than display:none, which some form fillers treat as a signal. */
.intake-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

.intake-thanks{max-width:640px}