/* Quote wizard. Tokens, .container/.section/.h*/.btn/.micro/.lead/.small and
   .link-cta all come from site.css. Nothing here redefines them.

   Option tiles are the one real card on this site: white, hairline border,
   4px radius. Everything else is separated by rules and whitespace. */

/* ── Progress bar: full-bleed, sits under the sticky header ─────────── */

.quote-progress{ height:3px; background:var(--line); }
.quote-progress__fill{
  height:100%; width:50%;
  background:var(--accent);
  transition:width .3s ease;
}
@media (prefers-reduced-motion:reduce){ .quote-progress__fill{ transition:none; } }

/* ── Column ─────────────────────────────────────────────────────────── */

.quote{ padding-top:40px; }
.quote__col > *{ max-width:1024px; }          /* narrow measure, flush left in the container */
.quote__body{ max-width:70ch; margin:16px 0 0; }
.quote .h2{ margin-top:10px; }

.quote__banner{
  margin:0 0 28px;
  padding:16px 18px;
  border-left:3px solid var(--accent);
  background:var(--paper-cream);
  font:400 15px/1.6 var(--font); color:var(--ink-muted);
}
.quote__banner strong{ color:var(--ink); }

.quote__pick{ font:600 italic 15px/1.5 var(--font); color:var(--ink); margin:32px 0 12px; }

.quote__reason,
.quote__notice{
  margin:20px 0 0; padding:14px 16px;
  background:var(--paper-cream); border-left:3px solid var(--accent);
  font:400 15px/1.6 var(--font); color:var(--ink-muted);
}

/* ── Form groups on page 1 ──────────────────────────────────────────── */

/* Scope, project type and contact read as three numbered blocks rather than
   three separate screens. The rule is the only separator, matching the way
   the rest of the site divides sections. */
.quote__group{
  margin-top:56px; padding-top:40px;
  border-top:1px solid var(--line);
}
.quote__group .h3{ margin-top:8px; }
.quote__group .quote__pick:first-of-type{ margin-top:24px; }

/* The scope block swaps field sets when a project type is chosen. Hidden
   inputs stay in the DOM so a rerouted project keeps its answers. */
[hidden]{ display:none !important; }

/* ── Steps ──────────────────────────────────────────────────────────── */

.step{ display:none; }
.step.is-active{ display:block; }

.step__error{
  margin:24px 0 0;
  font:600 14px/1.5 var(--font); color:#B3300C;
}
.step__actions{
  display:flex; gap:16px; flex-wrap:wrap;
  margin-top:40px; padding-top:32px; border-top:1px solid var(--line);
}

/* ── Working state ──────────────────────────────────────────────────── */

/* Submitting can run close to a minute. The bar creeps toward each stage
   rather than reporting real progress, and the stripe keeps moving even
   when the width does not, so the page never reads as frozen. */
.working{ margin-top:24px; max-width:520px; }
.working__bar{ height:6px; border-radius:3px; background:var(--line); overflow:hidden; }
.working__fill{
  height:100%; width:0;
  background:var(--accent)
    linear-gradient(110deg, rgba(255,255,255,.4) 25%, transparent 25%, transparent 50%,
                    rgba(255,255,255,.4) 50%, rgba(255,255,255,.4) 75%, transparent 75%)
    repeat 0 0 / 22px 22px;
  animation:working-stripe 900ms linear infinite;
  transition:width .6s ease;
}
@keyframes working-stripe{ to{ background-position:22px 0; } }
.working__text{ margin:12px 0 0; font:600 15px/1.5 var(--font); color:var(--ink); }
.working .small{ margin:4px 0 0; }

@media (prefers-reduced-motion:reduce){
  .working__fill{ animation:none; transition:none; }
}

/* ── Option tiles ───────────────────────────────────────────────────── */

.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.tiles--two{ grid-template-columns:repeat(2,1fr); max-width:672px; }

.tile{
  display:flex; flex-direction:column; gap:6px;
  text-align:left;
  background:var(--white);
  border:1px solid var(--card-border);
  border-radius:4px;
  padding:27px;
  cursor:pointer;
  font:inherit; color:inherit;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.tile:hover{ border-color:var(--accent); }
.tile.is-selected{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.tile__title{ font:600 16px/1.35 var(--font); }
.tile__sub{ font:400 14px/1.45 var(--font); color:var(--ink-muted); }

/* ── Fields ─────────────────────────────────────────────────────────── */

.field{ margin-top:28px; max-width:520px; }
.field__label{
  display:block; margin:0 0 8px;
  font:600 15px/1.4 var(--font); color:var(--ink);
}
.req{ color:var(--accent); }

.field__input{
  display:block; width:100%;
  padding:13px 14px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  font:400 16px/1.5 var(--font); color:var(--ink);
}
textarea.field__input{ resize:vertical; }
.field__input:focus{ border-color:var(--accent); outline:none; box-shadow:0 0 0 2px rgba(232,116,10,.18); }
.field__input.is-invalid{ border-color:#B3300C; }
.field__input--file{ padding:11px 14px; background:var(--paper); cursor:pointer; }
.field__help{ margin:8px 0 0; font:400 13px/1.5 var(--font); color:var(--ink-muted); }

/* Field-level labels that introduce a tile group are not <label> elements. */
p.field__label{ margin-top:36px; }

/* ── Estimate + summaries ───────────────────────────────────────────── */

.estimate{
  margin-top:28px; padding:28px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.estimate__amount{
  margin:10px 0 8px;
  font:700 clamp(40px,5vw,60px)/1 var(--font); color:var(--ink);
  font-variant-numeric:tabular-nums;
}

.summary__head{ margin:40px 0 0; text-transform:uppercase; letter-spacing:.08em; font-size:14px; }
.summary{ margin:14px 0 0; }
.summary__row{
  display:flex; justify-content:space-between; gap:24px;
  padding:11px 0; border-bottom:1px solid var(--line);
}
.summary__row dt{ font:400 15px/1.5 var(--font); color:var(--ink-muted); flex:0 0 auto; }
.summary__row dd{
  margin:0; text-align:right;
  font:600 15px/1.5 var(--font); color:var(--ink);
  overflow-wrap:anywhere;
}
.summary__row--total{ border-bottom:0; border-top:2px solid var(--ink); }
.summary__row--total dt,.summary__row--total dd{ font:700 19px/1.4 var(--font); color:var(--ink); }

/* ── Small screens ──────────────────────────────────────────────────── */

@media (max-width:750px){
  .tiles,.tiles--two{ grid-template-columns:1fr; }
  .tile{ padding:20px; }
  .step__actions .btn{ width:100%; }
  .summary__row{ flex-direction:column; gap:2px; }
  .summary__row dd{ text-align:left; }
}

/* Honeypot. Off-screen rather than display:none, since some bots skip hidden
   inputs. Real users never reach it: aria-hidden + tabindex="-1". */
.hp{
  position:absolute; left:-9999px; width:1px; height:1px;
  overflow:hidden;
}