/* ============================================================
   ORDO — shared lead-capture form component
   Used identically on: index.html (#enquire), enquire.html,
   and landing.html. Edit here once; it updates everywhere.

   Relies entirely on the host page's own :root tokens
   (--charcoal, --bone, --sand, --ink-60, --ink-38, --ink-14,
   --font-display, --font-text). No new colours are introduced;
   the locked five-hex palette is untouched, and gold is never
   used in this component so it never competes with a page's
   single gold moment elsewhere.
   ============================================================ */

.ordo-lead-form{ max-width: 640px; }

.lf{ display:flex; flex-direction:column; gap:1.7rem; }

.lf-row{ display:flex; flex-direction:column; gap:.55rem; }

.lf-row--split{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; }
@media (max-width:560px){
  .lf-row--split{ grid-template-columns:1fr; }
}

.lf-label{
  font-family:var(--font-text);
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-60);
}

.lf-input{
  width:100%;
  border:0;
  border-bottom:1px solid var(--ink-38);
  background:transparent;
  padding:.6em .1em;
  font-family:var(--font-text);
  font-size:1rem;
  font-weight:300;
  color:var(--charcoal);
  transition:border-color .2s ease;
}
.lf-input::placeholder{ color:var(--ink-38); }
.lf-input:focus{ outline:none; border-bottom-color:var(--charcoal); }

.lf-textarea{
  resize:vertical;
  min-height:4.4em;
  border:1px solid var(--ink-14);
  border-radius:2px;
  padding:.7em .8em;
}
.lf-textarea:focus{ outline:none; border-color:var(--charcoal); border-bottom:1px solid var(--charcoal); }

.lf-tiles{ display:flex; flex-wrap:wrap; gap:.55rem; }

/* Real radio inputs, visually hidden but still focusable and
   screen-reader visible, so required-group validation is native
   and no custom a11y logic is needed. */
.lf-tiles input[type="radio"]{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.lf-tiles label{
  display:inline-block;
  padding:.55em 1.15em;
  border:1px solid var(--ink-38);
  color:var(--charcoal);
  font-family:var(--font-text);
  font-size:.92rem;
  cursor:pointer;
  user-select:none;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.lf-tiles input:checked + label{
  background:var(--charcoal);
  border-color:var(--charcoal);
  color:var(--bone);
}
.lf-tiles input:focus-visible + label{
  outline:2px solid var(--charcoal);
  outline-offset:3px;
}

.lf-other{ margin-top:.7rem; max-width:320px; }

.lf-actions{
  flex-direction:row;
  align-items:center;
  gap:1.3rem;
  flex-wrap:wrap;
}

.lf-submit{
  background:var(--charcoal);
  color:var(--bone);
  border:0;
  padding:.85em 2.15em;
  font-family:var(--font-text);
  font-size:.95rem;
  letter-spacing:.02em;
  cursor:pointer;
  transition:opacity .2s ease;
}
.lf-submit:hover{ opacity:.85; }
.lf-submit:disabled{ opacity:.5; cursor:default; }
.lf-submit:focus-visible{ outline:2px solid var(--charcoal); outline-offset:3px; }

.lf-status{
  margin:0;
  font-family:var(--font-text);
  font-size:.86rem;
  color:var(--ink-60);
}
.lf-status--error{
  color:var(--charcoal);
  border-left:2px solid var(--charcoal);
  padding-left:.7em;
}
.lf-status--error a{ color:var(--charcoal); }

.lf-done{ padding:.25rem 0 1rem; }
.lf-done__msg{
  font-family:var(--font-display);
  font-size:clamp(1.15rem,3vw,1.5rem);
  font-weight:300;
  letter-spacing:-.01em;
  line-height:1.35;
  color:var(--charcoal);
  max-width:34ch;
  margin:0;
}