/* leadform.css — one lead form, six different looking pages.
   It borrows whatever the host page already defines (--ink, --pad, --sans,
   --serif, --ease) and falls back to something sane when a page does not.
   To tint it for a page, set --lf-accent on .lead in that page's own CSS. */

.lead{
  --lf-fg     : var(--ink, #14140F);
  --lf-paper  : var(--lf-bg, #F4F1EC);
  --lf-accent : var(--ink, #14140F);
  --lf-line   : rgba(20,20,15,.18);
  --lf-muted  : rgba(20,20,15,.62);
  position:relative;background:var(--lf-paper);color:var(--lf-fg);
  padding:clamp(56px,10vh,120px) var(--pad, 24px);
  /* every page has a fixed nav. Without this, jumping to #enquire parks the
     heading underneath it and the two collide. */
  scroll-margin-top:clamp(74px,12vh,112px);
}
.lead__inner{max-width:640px;margin:0 auto}

.lead__eyebrow{font-family:var(--sans, system-ui, sans-serif);font-size:.64rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--lf-muted);margin-bottom:14px}
.lead__title{font-family:var(--serif, Georgia, serif);font-weight:400;
  font-size:clamp(1.8rem,4.4vw,2.9rem);line-height:1.08;margin-bottom:12px}
.lead__promise{font-family:var(--sans, system-ui, sans-serif);
  color:var(--lf-muted);max-width:46ch;margin-bottom:clamp(26px,4vh,40px)}

.lead__grid{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.lead__field--wide{grid-column:1 / -1}
@media (max-width:560px){ .lead__grid{grid-template-columns:1fr} }

.lead__field{display:flex;flex-direction:column;gap:7px}
.lead__field label{font-family:var(--sans, system-ui, sans-serif);font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--lf-muted)}
.lead__field input,
.lead__field select,
.lead__field textarea{
  font-family:var(--sans, system-ui, sans-serif);font-size:1rem;color:var(--lf-fg);
  background:transparent;border:0;border-bottom:1px solid var(--lf-line);
  border-radius:0;padding:11px 2px;min-height:44px;   /* 44px: real tap target */
  transition:border-color .3s var(--ease, ease);appearance:none}
.lead__field textarea{resize:vertical;min-height:96px;line-height:1.5}
.lead__field input:focus,
.lead__field select:focus,
.lead__field textarea:focus{outline:none;border-bottom-color:var(--lf-accent)}
.lead__field input:-webkit-autofill{-webkit-text-fill-color:var(--lf-fg);
  transition:background-color 9999s}

/* the honeypot. Off screen rather than display:none, which some bots skip. */
.lead__pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.lead__actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:clamp(24px,3.5vh,34px)}
.lead__btn{font-family:var(--sans, system-ui, sans-serif);font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;cursor:pointer;
  min-height:48px;padding:0 30px;border-radius:100px;border:1px solid var(--lf-accent);
  background:var(--lf-accent);color:var(--lf-paper);
  transition:opacity .3s var(--ease, ease),transform .3s var(--ease, ease)}
.lead__btn:hover{opacity:.86}
.lead__btn:disabled{opacity:.5;cursor:progress}

.lead__note{font-family:var(--sans, system-ui, sans-serif);font-size:.78rem;
  color:var(--lf-muted)}
.lead__note[data-state="err"]{color:#B3261E}

/* the thank you swaps in place of the form, so the page does not jump */
.lead__done{display:none}
.lead.is-done .lead__form{display:none}
.lead.is-done .lead__done{display:block}
.lead__done h3{font-family:var(--serif, Georgia, serif);font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.1rem);margin-bottom:10px}
.lead__done p{font-family:var(--sans, system-ui, sans-serif);color:var(--lf-muted);max-width:44ch}

@media (prefers-reduced-motion:reduce){
  .lead__field input,.lead__field select,.lead__field textarea,.lead__btn{transition:none}
}