/* ============================================================
   Lead form — pages only, never loaded on the homepage.
   
   SEPARATE FILE ON PURPOSE. site/assets/site.css must stay
   byte-for-byte identical to the approved mockup's <style>
   block; verify-design-fidelity.js asserts exactly that. Form
   controls do not exist in the mockup, so adding them there
   would break the one guarantee that keeps the approved design
   approved. They live here instead and inherit every token,
   so the two files cannot drift in palette or type.
   ============================================================ */

.lead-head{padding:clamp(40px,6vw,72px) 0 clamp(20px,3vw,32px)}
.lead-head h1{font-size:clamp(34px,5vw,58px);max-width:16ch}
.lead-head .lede{font-size:clamp(17px,2vw,20px);color:var(--ink-2);max-width:52ch;margin:20px 0 0}

.lead-wrap{padding:0 0 clamp(48px,7vw,88px)}
.lead-grid{display:grid;gap:clamp(24px,4vw,44px);grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);align-items:start}

form.lead,.lead-call{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,3.5vw,38px);
}

/* INTERIM, 2026-09-26: the phone number in the form's slot. Display face at
   its heaviest, as the h1-h3 rule sets it in site.css. */
.call-number{
  display:block;font-family:var(--display);font-weight:800;font-stretch:88%;
  font-size:clamp(28px,6.5vw,68px);line-height:1;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;white-space:nowrap;
}
.call-number:hover{color:var(--cobalt)}

/* --- the intent selector -------------------------------------------------
   Three real radios, styled as cards. Radios rather than a <select> because
   this is the one field the owner sorts by, it has exactly three values, and
   all three should be readable without opening anything. The colour is the
   same code the homepage uses: cobalt = whole car, amber = parts. */
.intent{border:0;padding:0;margin:0 0 30px;min-width:0}
.intent legend{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--steel);padding:0;margin-bottom:14px;
}
.intent-grid{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))}
.intent label{
  position:relative;display:block;cursor:pointer;
  border:1.5px solid var(--line);border-radius:var(--r);
  padding:16px 16px 15px;background:var(--paper-2);
  transition:border-color .12s ease, background-color .12s ease;
}
.intent input{position:absolute;opacity:0;width:1px;height:1px}
.intent .t{
  display:block;font-family:var(--display);font-weight:800;font-stretch:90%;
  font-size:17px;letter-spacing:-.01em;line-height:1.15;
}
.intent .d{display:block;font-size:13px;color:var(--steel);margin-top:6px;line-height:1.4}
.intent label:hover{background:var(--white)}
.intent input:checked + .t{color:var(--cobalt)}
.intent label:has(input:checked){border-color:var(--cobalt);background:var(--white);box-shadow:inset 0 0 0 1px var(--cobalt)}
.intent label.parts:has(input:checked){border-color:var(--amber-dk);box-shadow:inset 0 0 0 1px var(--amber-dk)}
.intent label.parts input:checked + .t{color:var(--amber-dk)}
/* Keyboard focus must be visible even though the control itself is hidden. */
.intent input:focus-visible + .t{outline:3px solid var(--cobalt);outline-offset:4px}

/* --- fields -------------------------------------------------------------- */
.rows{display:grid;gap:18px}
.row{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.row.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.row.one{grid-template-columns:1fr}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f label{font-size:14px;font-weight:600;color:var(--ink-2)}
.f .hint{font-size:12px;color:var(--steel);font-weight:400}
.f input,.f select,.f textarea{
  width:100%;font-family:var(--body);font-size:16px;color:var(--ink);
  padding:13px 14px;border-radius:var(--r);
  border:1.5px solid var(--line);background:var(--paper-2);
}
.f input:focus,.f select:focus{border-color:var(--cobalt);background:var(--white);outline:none}
.f input::placeholder{color:var(--steel-2)}
.f input[name="vin"]{font-family:var(--mono);letter-spacing:.06em}
.f textarea{resize:vertical;min-height:104px;line-height:1.5}
.f textarea:focus{border-color:var(--cobalt);background:var(--white);outline:none}
.f textarea::placeholder{color:var(--steel-2)}
/* A field the browser has judged invalid, but only after the user has
   engaged with it - :invalid alone reddens every required field on load. */
.f input:not(:placeholder-shown):invalid{border-color:var(--crit,#B3261E)}

.lead-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.lead-actions .note{font-size:13px;color:var(--steel);max-width:38ch}

/* The honeypot. Off-screen rather than display:none - some bots skip hidden
   inputs, and this one wants to be filled in. aria-hidden and tabindex keep
   it away from anyone using a screen reader or a keyboard. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- the aside ----------------------------------------------------------- */
.lead-aside{display:grid;gap:18px}
.aside-card{background:var(--ink);color:var(--paper-2);border-radius:var(--r);padding:24px 22px}
.aside-card h2{font-size:20px;color:var(--white);font-stretch:88%}
.aside-card p{font-size:14.5px;color:var(--steel-2);margin:10px 0 0}
.aside-card ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.aside-card li{position:relative;padding-left:22px;font-size:14.5px;color:var(--steel-2)}
.aside-card li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:2px;background:var(--amber)}

/* --- banners ------------------------------------------------------------- */
.banner{border-radius:var(--r);padding:16px 20px;margin:0 0 24px;font-size:15px;border:1px solid}
.banner.bad{background:#FDECEA;border-color:#E7B4AE;color:#8C2018}
.banner h2{font-size:16px;margin:0 0 4px}

/* --- confirmation --------------------------------------------------------
   max-width belongs on the COLUMN, not on the section. Putting it on
   .confirm made the whole section a 496px strip pinned to the left of the
   viewport while the header stayed centred on the page - caught by the audit
   at all three widths (L1-off-centre HIGH, plus header-body-misaligned),
   which named section.confirm as the culprit. .wrap already carries
   margin-inline:auto, so narrowing it centres the column and leaves the text
   left-aligned inside it. */
.confirm{padding:clamp(56px,9vw,110px) 0}
.confirm .wrap{max-width:62ch}
.confirm h1{font-size:clamp(36px,5.5vw,62px)}
.confirm p{font-size:clamp(17px,2vw,20px);color:var(--ink-2);margin:22px 0 0}
.confirm .next{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.confirm .next h2{font-size:18px;margin-bottom:12px}

@media (max-width:1000px){
  .lead-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .intent-grid{grid-template-columns:1fr}
  .row,.row.three{grid-template-columns:1fr}
}