/* ============================================================
   americanlight.design — multi-step lead form (.lf-*)
   Rendered site-wide in the tone-dark section above the footer.
   No JS: all steps render stacked; JS adds .js to .lf-form and
   turns it into a 3-step flow.
   ============================================================ */

.lead-cta .lf-wrap{
  display:grid; grid-template-columns:1fr 1.15fr;
  gap:clamp(var(--s5),4vw,var(--s7)); align-items:center;
}
.lf-intro .lede{ margin-bottom:var(--s4) }
.lf-points{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px }
.lf-points li{ display:flex; align-items:center; gap:10px; font-size:15px }
.lf-points .icon{ color:var(--secondary-alt); width:20px; height:20px }

/* ---- the form panel ---------------------------------------- */
.lf-form{
  background:#fff; color:#2a3442; border-radius:var(--r);
  padding:clamp(var(--s4),3vw,var(--s5)); box-shadow:var(--shadow-3);
  display:flex; flex-direction:column; gap:var(--s3);
}

/* ---- progress dots (JS only) ------------------------------- */
.lf-progress{ display:none; list-style:none; margin:0 0 var(--s2); padding:0;
  justify-content:center; gap:clamp(18px,4vw,34px) }
.lf-form.js .lf-progress{ display:flex }
.lf-dot{ display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family:var(--head); font-size:12px; font-weight:600; color:#5a6b80;
  position:relative }
.lf-dot i{ width:14px; height:14px; border-radius:50%; border:2.5px solid var(--line);
  background:#fff; transition:background .2s ease, border-color .2s ease, transform .2s ease }
.lf-dot.is-on{ color:var(--accent) }
.lf-dot.is-on i{ border-color:var(--primary); background:var(--primary); transform:scale(1.15) }
.lf-dot.is-done{ color:var(--primary) }
.lf-dot.is-done i{ border-color:var(--primary); background:var(--primary) }
.lf-status{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); border:0; white-space:nowrap }

/* ---- steps -------------------------------------------------- */
.lf-step{ border:0; margin:0; padding:0; min-width:0 }
.lf-legend{ font-family:var(--head); font-weight:700; font-size:16px; color:var(--accent);
  padding:0; margin-bottom:var(--s3) }
.lf-form.js .lf-step{ display:none }
.lf-form.js .lf-step.is-active{ display:block; animation:lf-in .3s ease }
@keyframes lf-in{ from{ opacity:0; transform:translateX(10px) } to{ opacity:1; transform:none } }
/* JS flow: the step heading is carried by the dots, hide legends */
.lf-form.js .lf-legend{ position:absolute; width:1px; height:1px; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap }

.lf-label{ display:flex; flex-direction:column; gap:6px; font-family:var(--head);
  font-weight:600; font-size:13.5px; color:var(--accent); margin:0 0 var(--s3) }
p.lf-label{ margin-bottom:10px }

.lf-form input,.lf-form textarea{
  font:15px/1.4 var(--body); padding:12px 14px; border:1.5px solid var(--line);
  border-radius:10px; background:#fff; width:100%; color:#2a3442;
  transition:border-color .15s ease, box-shadow .15s ease }
.lf-form input:focus-visible,.lf-form textarea:focus-visible{
  outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(43,57,144,.18) }
.lf-form input[aria-invalid="true"]{ border-color:var(--secondary) }

/* big ZIP input */
.lf-zip{ font-family:var(--head) !important; font-weight:700; font-size:clamp(22px,3vw,28px) !important;
  letter-spacing:.14em; text-align:center; max-width:280px; padding:14px 18px !important }

/* ---- project cards ------------------------------------------ */
.lf-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr));
  gap:10px; margin-bottom:var(--s3) }
.lf-card{ position:relative; display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center; background:#fff; border:1.5px solid var(--line); border-radius:12px;
  padding:14px 10px 12px; cursor:pointer; font-family:var(--head); font-weight:600;
  font-size:13px; line-height:1.3; color:var(--accent);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease }
.lf-card .icon{ width:30px; height:30px; color:var(--primary) }
.lf-card input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none }
.lf-card:hover{ border-color:var(--primary-alt); transform:translateY(-2px); box-shadow:var(--shadow-1) }
.lf-card:has(input:checked){ border-color:var(--primary); background:#f2f5fc;
  transform:translateY(-2px); box-shadow:var(--shadow-1) }
.lf-card:has(input:checked) .icon{ color:var(--secondary) }
.lf-card:has(input:focus-visible){ outline:3px solid rgba(43,57,144,.35); outline-offset:2px }

.lf-details textarea{ resize:vertical }

/* ---- step 3 grid -------------------------------------------- */
.lf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 16px }
.lf-grid .lf-label{ margin-bottom:0 }
.lf-span2{ grid-column:1 / -1 }

/* ---- errors & nav ------------------------------------------- */
.lf-err{ color:var(--secondary); font-size:13.5px; font-weight:600; margin:0 0 var(--s2) }
.lf-nav{ display:flex; justify-content:flex-end; gap:12px; margin-top:var(--s3) }
.lf-nav .lf-back{ margin-right:auto }
.lf-next,.lf-back{ display:none }
.lf-form.js .lf-next{ display:inline-flex }
.lf-form.js .lf-back{ display:inline-flex }
.lf-form .btn.ghost{ color:var(--accent); border-color:var(--accent) }
.lf-form .fine{ margin:var(--s3) 0 0; color:#68788e }

/* ---- responsive --------------------------------------------- */
@media (max-width:1020px){
  .lead-cta .lf-wrap{ grid-template-columns:1fr; align-items:start }
  .lf-intro{ max-width:640px }
}
@media (max-width:640px){
  .lf-cards{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .lf-grid{ grid-template-columns:1fr }
  .lf-nav{ flex-direction:column-reverse }
  .lf-nav .btn{ width:100%; justify-content:center }
  .lf-nav .lf-back{ margin-right:0 }
  .lf-zip{ max-width:100% }
}

/* ---- reduced motion ----------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .lf-form.js .lf-step.is-active{ animation:none }
  .lf-card,.lf-card:hover,.lf-card:has(input:checked),.lf-dot i{ transition:none; transform:none }
}

/* ---- honeypot (never seen by a human; bots fill it) ---------- */
.lf-hp input{ font-size:16px }
.lf-hp{ position:absolute !important; left:-9999px !important; top:auto !important;
  width:1px !important; height:1px !important; overflow:hidden !important }

/* ---- server-side rejection banner ---------------------------- */
.lf-alert,.form-alert{
  margin:0 0 var(--s3); padding:12px 14px; border-radius:10px;
  border:1.5px solid var(--secondary); background:#fdf1ef; color:#8c2b18;
  font-family:var(--head); font-weight:600; font-size:14px; line-height:1.45 }
.form-alert{ margin-bottom:var(--s4) }

/* ---- step 1 reads as one centered decision (JS flow only) ----- */
.lf-form.js .lf-step[data-step="1"]{ text-align:center }
.lf-form.js .lf-step[data-step="1"] .lf-label{ align-items:center }
.lf-form.js .lf-step[data-step="1"] .lf-zip{ margin-inline:auto }
.lf-form.js .lf-step[data-step="1"] .lf-nav{ justify-content:center }