/* ============================================================================
   QUOTE FORM — the estimate request card.
   Loaded on every page; the section sits directly after the hero.

   The form is a designed object in the "Clear Coast" system, not a default box:
   it reads as the inspection card a technician fills out — stamped header rule,
   mono field labels, underline inputs that ink in on focus, corner ticks from
   .plate. Every colour below was COMPUTED against its ground, not eyeballed:

     input text     ink #101c1e   on paper  15.84   AA
     field label    ink-soft      on paper   7.82   AA
     placeholder    ink-mute      on paper   5.09   AA
     tel link       green #17722f on paper   5.49   AA
     button label   #fff on green-btn        5.02   AA
     required mark  sun #95600d   on paper   4.83   AA
     error text     #a3211f       on paper   6.84   AA
   ========================================================================== */

.qf-sec{background:var(--paper-2);position:relative;overflow:clip}

/* the registration grid, faint — same device as the rest of the card world */
.qf-sec::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line-hair) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line-hair) 1px,transparent 1px);
  background-size:64px 64px;
}

.qf-grid{
  position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(30px,4.6vw,70px);align-items:start;
}

/* ------------------------------------------------------------------ left -- */
/* Sticky so the intro tracks the card rather than leaving a dead well at the
   bottom of a tall form. Released below 1000px where the columns stack.
   Note the section must NOT use overflow:hidden or this dies silently —
   overflow-x:clip on the section preserves it. */
.qf-intro{position:sticky;top:calc(var(--bar) + 26px)}
.qf-h2{margin-top:14px}
.qf-lede{
  margin-top:18px;max-width:44ch;color:var(--ink-soft);
  font-size:15.5px;line-height:1.75;
}
.qf-tel{
  color:var(--green);font-weight:500;
  border-bottom:1px solid var(--green-wash);
  transition:border-color .3s var(--ease);
}
.qf-tel:hover{border-bottom-color:var(--green)}

/* the "what we'll ask" index — dotted leader rows, like the spec table */
.qf-ready-h{
  margin-top:26px;font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink-mute);
}
.qf-ready{margin-top:10px;border-top:1px solid var(--line-soft)}
.qf-ready li{
  display:flex;align-items:baseline;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--line-hair);
  font-size:14px;color:var(--ink-soft);
}
.qf-ready .tnum{
  font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.14em;
  color:var(--green);flex:none;
}
.qf-note{
  margin-top:20px;max-width:42ch;font-size:13px;line-height:1.7;
  color:var(--ink-mute);font-style:italic;
}

/* ------------------------------------------------------------------ card -- */
.qf-card{
  background:var(--paper);
  padding:clamp(22px,2.7vw,34px);
}
.qf-card .plate-hd{margin-bottom:24px}

/* Two columns, not three: the contact pair sits on one line and the vehicle
   trio is its own nested row, so year/make/model read as ONE group instead of
   wrapping across rows and scattering. */
.qf-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:19px 18px}
.qf-f{display:flex;flex-direction:column;gap:7px;min-width:0}
.qf-f--half{grid-column:span 1}
.qf-f--wide{grid-column:1/-1}
.qf-f--cap{grid-column:1/-1}

/* .qf-veh and .qf-sel are currently UNUSED — the vehicle trio and the
   damaged-glass select were removed from the form on 2026-09-10. Kept because
   the handler still accepts those fields, so restoring them is a markup-only
   change with no CSS to rewrite. Delete both blocks if that is ruled out. */
.qf-veh{
  grid-column:1/-1;display:grid;
  grid-template-columns:minmax(0,.55fr) minmax(0,1fr) minmax(0,1fr);
  gap:18px;
}

.qf-l{
  font-family:'Spline Sans Mono',monospace;font-size:9.5px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--ink-soft);
  display:flex;align-items:center;gap:8px;
}
.qf-l i{
  font-style:normal;font-size:8.5px;letter-spacing:.14em;color:var(--sun);
}

/* underline inputs — the ruled line of a printed form, not a bordered box */
.qf-f input,
.qf-f textarea,
.qf-sel select{
  width:100%;font:inherit;font-size:15px;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:7px 2px;border-radius:0;appearance:none;
  transition:border-color .35s var(--ease),background-color .35s var(--ease);
}
.qf-f textarea{resize:vertical;min-height:52px;line-height:1.6}
.qf-f input::placeholder,
.qf-f textarea::placeholder{color:var(--ink-mute);opacity:1}

.qf-f input:focus,
.qf-f textarea:focus,
.qf-sel select:focus{
  outline:0;border-bottom-color:var(--green-br);
  background:var(--green-wash);
}
/* a visible ring for keyboard users, since the underline alone is subtle */
.qf-f input:focus-visible,
.qf-f textarea:focus-visible,
.qf-sel select:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* number inputs: no spinners — they crowd a 3-column grid */
.qf-f input[type=number]{-moz-appearance:textfield}
.qf-f input[type=number]::-webkit-outer-spin-button,
.qf-f input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* select keeps the underline treatment; the chevron is drawn, not native */
.qf-sel{position:relative;display:block}
.qf-sel select{cursor:pointer;padding-right:24px}
.qf-sel svg{
  position:absolute;right:3px;top:50%;transform:translateY(-40%);
  color:var(--ink-mute);pointer-events:none;
}

/* security check sits on its own rule, visually separated from the data */
.qf-f--cap{
  margin-top:5px;padding-top:19px;border-top:1px solid var(--line-soft);
}
.qf-cap{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.qf-q{
  font-family:'Spline Sans Mono',monospace;font-size:15px;letter-spacing:.08em;
  color:var(--ink);background:var(--paper-2);
  border:1px solid var(--line-soft);padding:9px 14px;white-space:nowrap;
}
/* The answer field is BOXED, not underlined like the rest. A bare underline
   here reads as decoration rather than an input — this is the one field a
   customer must find instantly or the form is abandoned. */
.qf-cap input{
  max-width:88px;text-align:center;
  border:1px solid var(--line);border-bottom-color:var(--line);
  background:var(--paper);padding:9px 10px;
  font-family:'Spline Sans Mono',monospace;font-size:15px;
}
.qf-cap input:focus{border-color:var(--green-br);background:var(--green-wash)}

/* honeypots: off-canvas rather than display:none — some bots skip hidden
   fields, and none of this is client copy, so removing it from flow is safe */
.qf-hp{
  position:absolute!important;left:-9999px;width:1px;height:1px;
  opacity:0;pointer-events:none;
}

.qf-submit{margin-top:26px;width:100%;justify-content:center}
.qf-submit:disabled{opacity:.45;cursor:not-allowed}
.qf-submit:disabled::before{transform:translateX(-101%)}

/* JS-off notice: the tokens come from fetch, so the form genuinely cannot
   submit without script. #a3211f on paper = 6.84:1, AA. */
.qf-nojs{
  margin-top:14px;padding:12px 14px;font-size:13.5px;line-height:1.6;
  color:#a3211f;border:1px solid rgba(163,33,31,.3);background:rgba(163,33,31,.05);
}
.qf-nojs a{color:#a3211f;font-weight:500;text-decoration:underline}

.qf-msg{margin-top:14px;font-size:13.5px;line-height:1.6;min-height:0}
.qf-msg:empty{display:none}
.qf-msg .error,
.qf-msg p.error{color:#a3211f;margin:0}
.qf-msg .success,
.qf-msg p.success{color:var(--green);margin:0}

/* ---------------------------------------------------------- confirmation -- */
/* success replaces the form in place — no redirect, no lost context */
.qf-done{text-align:center;padding:14px 0 6px}
.qf-stamp{
  display:inline-block;font-family:'Spline Sans Mono',monospace;
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--green);border:1.5px solid var(--green);
  padding:9px 18px;transform:rotate(-2deg);margin-bottom:20px;
}
.qf-done p{color:var(--ink-soft);font-size:15px;line-height:1.7;margin:0 auto;max-width:38ch}
.qf-done .qf-sign{
  margin-top:20px;font-family:'Spline Sans Mono',monospace;
  font-size:10px;letter-spacing:.2em;color:var(--ink-mute);
}

/* -------------------------------------------------------------- narrower -- */
@media(max-width:1000px){
  .qf-grid{grid-template-columns:1fr;gap:34px}
  .qf-lede,.qf-note{max-width:60ch}
  .qf-intro{position:static}   /* nothing to stick to once stacked */
}
@media(max-width:560px){
  /* Restack, never hide — hiding a field would be a content bug and would
     also break the handler, which reads every one of these names. */
  .qf-fields{grid-template-columns:1fr}
  .qf-f--half{grid-column:1/-1}
  /* year keeps its own line with make; model drops below */
  .qf-veh{grid-template-columns:minmax(0,.6fr) minmax(0,1fr)}
  .qf-veh .qf-f:last-child{grid-column:1/-1}
}
@media(max-width:380px){
  .qf-veh{grid-template-columns:1fr}
  .qf-veh .qf-f:last-child{grid-column:auto}
}

@media(prefers-reduced-motion:reduce){
  .qf-f input,.qf-f textarea,.qf-sel select{transition:none}
}