/* Hybrid Media lead form (assets/lead-form.js). Uses each page's own colors and fonts (--line, --accent, --mono, ...). */
#contactForm .lf-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px 16px; min-width:0}
#contactForm .lf-wide{grid-column:1/-1}
#contactForm .lf-step[hidden],#contactForm .lf-nav [hidden]{display:none !important}
@media (max-width:540px){ #contactForm .lf-grid{grid-template-columns:1fr} }

/* progress */
#contactForm .lf-prog{display:flex; align-items:center; gap:14px}
#contactForm .lf-bar{display:flex; gap:4px; flex:0 0 96px}
#contactForm .lf-bar i{flex:1; height:3px; background:var(--line); transition:background .3s}
#contactForm .lf-bar i.on{background:var(--accent)}
#contactForm .lf-pt{font-family:var(--mono); font-weight:500; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2)}
#contactForm .lf-preview{margin:0; padding:9px 12px; border:1px dashed var(--line); font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--muted)}

/* questions */
#contactForm .lf-opt{text-transform:none; letter-spacing:0; color:var(--dim)}
#contactForm fieldset.lf-f{border:0; margin:0; padding:0; min-width:0}
#contactForm legend{padding:0; margin:0 0 8px; font-family:var(--mono); font-weight:500; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
#contactForm select,#contactForm input[type=date]{color-scheme:dark}
html.light #contactForm select,html.light #contactForm input[type=date]{color-scheme:light}
#contactForm input[type=date]{min-height:48px}
#contactForm input:disabled{opacity:.4}
#contactForm .lf-hint{margin:0; font-size:.92rem; color:var(--muted)}

/* pick-any chips */
#contactForm .lf-cw{display:flex; flex-wrap:wrap; gap:8px}
#contactForm .lf-chip{position:relative; display:inline-flex; cursor:pointer; text-transform:none; letter-spacing:0}
#contactForm .lf-chip input{position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0; opacity:0; cursor:pointer}
#contactForm .lf-chip span{display:block; padding:9px 13px; border:1px solid var(--line); font-family:var(--sans); font-size:.9rem; line-height:1.3; color:var(--ink-2); transition:border-color .15s, background .15s, color .15s}
#contactForm .lf-chip input:checked + span{border-color:var(--accent); background:rgba(255,45,28,.13); color:var(--hi)}
#contactForm .lf-chip input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
#contactForm .lf-flex{margin-top:2px; align-self:start}
#contactForm .lf-flex span{padding:6px 10px; font-size:.82rem}

/* problems */
#contactForm .lf-bad input:not([type=checkbox]),#contactForm .lf-bad select,#contactForm .lf-bad textarea,#contactForm .lf-bad .lf-chip span{border-color:#ff8a7d}
#contactForm .lf-err{margin:0; font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:#ff8a7d}
#contactForm .lf-err:empty{display:none}
html.light #contactForm .lf-err{color:#c4291a}
html.light #contactForm .lf-bad input:not([type=checkbox]),html.light #contactForm .lf-bad select,html.light #contactForm .lf-bad textarea{border-color:#c4291a}

/* buttons */
#contactForm .lf-nav{display:flex; align-items:center; gap:12px 16px; flex-wrap:wrap}
#contactForm .lf-next,#contactForm .lf-send{font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.16em; text-transform:uppercase; background:var(--accent); color:#fff; border:1px solid var(--accent); padding:15px 28px; cursor:pointer; transition:background .15s, color .15s, border-color .15s}
#contactForm .lf-send:disabled{opacity:.6; cursor:progress}
#contactForm .lf-back,#contactForm .lf-again{font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.16em; text-transform:uppercase; background:none; color:var(--ink-2); border:1px solid var(--line); padding:15px 20px; cursor:pointer; transition:background .15s, color .15s}
#contactForm .lf-nav .form-msg{flex:1 1 220px}
#contactForm .lf-note{margin:-4px 0 0; font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; line-height:1.6; color:var(--dim)}
@media (max-width:480px){ #contactForm .lf-next,#contactForm .lf-send{flex:1} }
/* hover colors only with a mouse: on phones a tapped button would stay highlighted (and Back appears right where Next was tapped) */
@media (hover:hover){
  #contactForm .lf-chip:hover span{border-color:var(--muted); color:var(--ink)}
  #contactForm .lf-next:hover,#contactForm .lf-send:hover{background:var(--hi); color:var(--bg); border-color:var(--hi)}
  #contactForm .lf-back:hover,#contactForm .lf-again:hover{background:var(--ink); color:var(--bg)}
}

/* sent */
#contactForm .lf-done{outline:none; padding:4px 0 4px 20px; border-left:2px solid var(--accent)}
#contactForm .lf-done .lf-k{margin:0; font-family:var(--mono); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent)}
#contactForm .lf-done h3{margin:10px 0 0; font-family:var(--cond); font-weight:700; font-size:clamp(1.5rem,3vw,2rem); line-height:1; text-transform:uppercase; color:var(--hi)}
#contactForm .lf-done p{margin:12px 0 0; color:var(--ink-2); line-height:1.55}
#contactForm .lf-done b{color:var(--hi); font-weight:600}
#contactForm .lf-done dl{display:grid; grid-template-columns:auto 1fr; gap:8px 18px; margin:20px 0 22px; padding-top:16px; border-top:1px solid var(--line-2)}
#contactForm .lf-done dt{font-family:var(--mono); font-weight:500; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); padding-top:3px}
#contactForm .lf-done dd{margin:0; color:var(--ink)}
@media (prefers-reduced-motion:reduce){ #contactForm .lf-bar i{transition:none} }

/* an estimate from the rates page (assets/rates.js), attached to the inquiry */
#contactForm .lf-est-slot:empty{display:none}
#contactForm .lf-est{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:3px 16px; padding:13px 16px; border:1px solid var(--line); border-left:2px solid var(--accent); background:rgba(255,45,28,.06)}
#contactForm .lf-est-k{margin:0; font-family:var(--mono); font-weight:600; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent)}
#contactForm .lf-est-t{grid-column:1; margin:0; font-size:.92rem; line-height:1.35; color:var(--ink)}
#contactForm .lf-est-n{grid-column:2; grid-row:1/3; font-family:var(--cond); font-weight:700; font-size:1.7rem; line-height:1; color:var(--hi)}
#contactForm .lf-est-a{grid-column:1/-1; display:flex; gap:18px; margin:6px 0 0; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase}
#contactForm .lf-est-a a,#contactForm .lf-est-a button{padding:0 0 1px; background:none; border:0; border-bottom:1px solid var(--line); color:var(--ink-2); font:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer}
#contactForm .lf-est-a a:hover,#contactForm .lf-est-a button:hover{color:var(--hi); border-color:var(--accent)}