/* ---- Stepped quote form (partials/quote-form-steps.njk, `form.steps`). a copy of Trend Decorating's block, as an opt-in kit sheet (GH Plumbing, 7 Oct 2026). ---- */
.qs-count { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-body-soft); white-space: nowrap; }
.qs-bar { display: flex; gap: 0.4rem; }
.qs-bar span { flex: 1; height: 4px; border-radius: 4px; background: var(--color-paper-line); transition: background-color 0.35s var(--ease-soft); }
.qs-bar span.on { background: var(--color-brand-solid); }
.qs-q { margin: 1.5rem 0 1rem; font-size: 1.05rem; line-height: 1.25; color: var(--color-ink); }
.qs-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.qs-tile { display: block; cursor: pointer; }
.qs-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem; height: 100%; min-height: 7.75rem; padding: 1rem; border: 2px solid var(--color-paper-line); border-radius: var(--radius-card); background: #fff; transition: border-color 0.2s var(--ease-soft), background-color 0.2s var(--ease-soft), box-shadow 0.2s var(--ease-soft), transform 0.2s var(--ease-soft); }
.qs-tile:hover .qs-card { border-color: var(--color-ink); transform: translateY(-2px); }
.qs-ic { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 0.8rem; background: var(--color-brand-tint); color: var(--color-brand-deep); transition: background-color 0.2s var(--ease-soft), color 0.2s var(--ease-soft); }
.qs-name { font-size: 0.82rem; line-height: 1.25; color: var(--color-ink); }
.qs-tick { position: absolute; top: 0.7rem; right: 0.7rem; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--color-brand-solid); color: var(--color-on-brand); opacity: 0; transform: scale(0.5); transition: opacity 0.2s var(--ease-soft), transform 0.25s var(--ease-soft); }
.qs-radio:checked + .qs-card { border-color: var(--color-brand-solid); background: var(--color-brand-tint); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 18%, transparent); }
.qs-radio:checked + .qs-card .qs-ic { background: var(--color-brand-solid); color: var(--color-on-brand); }
.qs-radio:checked + .qs-card .qs-tick { opacity: 1; transform: scale(1); }
.qs-radio:focus-visible + .qs-card { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.qs-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; margin-top: 1.6rem; }
/* Back stays on the left, the way forward on the right (GH Plumbing, Mike, 7 Oct). */
[data-step="2"] .qs-nav, [data-step="3"] .qs-nav { justify-content: space-between; }
.qs-sum { margin-top: 1rem; font-size: 0.9rem; color: var(--color-body-soft); }
@media (min-width: 640px) { .qs-card { min-height: 8.5rem; } .qs-name { font-size: 0.88rem; } }
/* An odd number of tiles (a plumber's four jobs plus "Something else"): the last one takes the whole row. */
.qs-tiles > .qs-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.qs-tiles > .qs-tile:last-child:nth-child(odd) .qs-card { min-height: 0; flex-direction: row; align-items: center; }
/* The emergency call strip above the tiles (`form.urgency`). */
.qs-call { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1rem; padding: 0.7rem 0.9rem; border-radius: var(--radius-card); background: var(--color-brand-tint); color: var(--color-ink); font-size: 0.92rem; line-height: 1.3; }
.qs-call svg { flex: none; color: var(--color-brand-deep); }