/* ==========================================================================
   Gentle Touch Cleaning: /quote/ (walkthrough and quote request) and /thank-you/.
   Owned by the quote builder. Layout only: every component comes from site.css.
   This site is quote-only, so there is no price output of any kind here.
   ========================================================================== */

/* ---------- Compact typographic hero ---------- */
.q-hero { padding-bottom: clamp(1.75rem, 1rem + 2.5vw, 3rem); }
.q-hero h1 { max-width: 20ch; }
.q-hero-eyebrow { display: flex; align-items: center; gap: var(--space-3); }
.q-hero-eyebrow .icon-ring { width: 48px; height: 48px; }
.q-hero-eyebrow .icon-ring .icon { width: 22px; height: 22px; }
.q-hero-points { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  font-size: var(--step--1); color: var(--color-text-muted); }
.q-hero-points li { display: inline-flex; align-items: flex-start; gap: var(--space-2); }
.q-hero-points .icon { width: 20px; height: 20px; margin-top: 1px; color: var(--color-accent); }

/* ---------- Layout: form card | aside ---------- */
.q-section { padding-top: 0; }
.q-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
@media (min-width: 960px) {
  .q-layout { grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem); gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: stretch; }
}

/* ---------- Form card ---------- */
.q-card { align-self: start; }
.q-form-title { font-size: var(--step-3); }
.q-form-intro { margin-top: var(--space-3); max-width: 62ch; font-size: var(--step--1); color: var(--color-text-muted); }
.q-form { margin-top: var(--space-6); gap: clamp(2.25rem, 1.75rem + 2vw, 3.25rem); counter-reset: qstep; }

/* Numbered steps: 01 Your facility, 02 What you need… (the number is decorative; the legend carries the name) */
.q-step { counter-increment: qstep; gap: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--gt-ink); }
.q-step > legend {
  float: left; width: 100%; display: flex; align-items: baseline; gap: var(--space-3); margin: 0;
  font: 500 var(--step-3)/1.15 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-text); font-variant-numeric: lining-nums;
}
.q-step > legend::before {
  content: counter(qstep, decimal-leading-zero);
  content: counter(qstep, decimal-leading-zero) / "";
  flex: 0 0 auto; min-width: 1.9rem; font: 500 var(--step--2)/1 var(--font-sans); letter-spacing: 0.14em; color: var(--color-text-subtle);
  font-variant-numeric: lining-nums tabular-nums;
}
.q-group { gap: var(--space-3); }
.q-group > legend { margin-bottom: 0; }
.q-group > .hint { margin-top: calc(var(--space-1) * -1); }

/* Radio cards (type of space, what you need) */
.q-cards { display: grid; gap: var(--space-3); }
@media (min-width: 600px) { .q-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.q-choice { align-items: start; padding: var(--space-4); gap: var(--space-3); }
.q-choice > input { margin-top: 2px; }
.q-choice .choice-desc { margin-top: 2px; line-height: 1.4; }
.q-choice > .icon { width: 22px; height: 22px; color: var(--gt-ink-2); }

/* Three short fields in a row (size, restrooms, floors) */
.q-grid-3 { display: grid; gap: var(--space-4) var(--space-5); grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
@media (max-width: 759px) { .q-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .q-grid-3 > :first-child { grid-column: 1 / -1; } }
@media (max-width: 419px) { .q-grid-3 { grid-template-columns: 1fr; } }

/* Details for one type of space or one service (shown by the page script; all visible without JS) */
.q-cond { gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-m); background: var(--gt-linen); }
.q-cond > legend {
  float: left; width: 100%; margin: 0;
  font: 500 var(--step--2)/1.4 var(--font-sans); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--gt-ink-2);
}
.q-cond .note { background: var(--gt-white); }
.q-cond .note p { margin: 0; }
@media (max-width: 599px) { .q-cond { padding: var(--space-4) var(--space-3); } }

.q-stack { display: grid; gap: var(--space-3); }
.q-seg-short { max-width: 24rem; }
.q-hint-strong { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--step--1); color: var(--gt-ink-2); }
.q-hint-strong .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--gt-ink); }

.q-submit { display: grid; gap: var(--space-3); justify-items: start; }
@media (max-width: 599px) { .q-submit .btn { width: 100%; } }

/* Success panel (replaces the form after an AJAX submit) */
.q-success { display: grid; gap: var(--space-4); }
.q-success h2 { font-size: var(--step-4); }
.q-success-more { font-size: var(--step--1); }

/* ---------- Aside ---------- */
.q-aside { display: grid; gap: var(--space-5); align-content: start; }
.q-aside-block { display: grid; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-m); background: var(--gt-linen); }
.q-aside h2 { font-size: var(--step-2); }
.q-aside-sticky { display: grid; gap: var(--space-5); }
/* The reassurance stays beside the form while it's filled in, on screens tall enough to show all of it */
@media (min-width: 960px) and (min-height: 780px) {
  .q-aside-sticky { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
}

.q-next { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); counter-reset: qnext; }
.q-next li { counter-increment: qnext; display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); column-gap: var(--space-2); }
.q-next li::before {
  content: counter(qnext, decimal-leading-zero);
  content: counter(qnext, decimal-leading-zero) / "";
  grid-row: span 2; font: 400 var(--step-2)/1 var(--font-display); font-variant-numeric: lining-nums; color: var(--gt-ink);
}
.q-next strong { font-weight: 500; }
.q-next span { font-size: var(--step--1); color: var(--color-text-muted); }
.q-aside-cta .pending-link { gap: var(--space-2); }

.q-ticks { gap: 6px; font-size: var(--step--1); }
.q-aside-small { font-size: var(--step--1); color: var(--color-text-muted); }

.q-links { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); font-size: var(--step--1); color: var(--color-text-muted); }
.q-links li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); }
.q-links .icon { width: 20px; height: 20px; margin-top: 2px; color: var(--gt-ink); }
.q-links strong { font-weight: 500; color: var(--color-text); }
.q-links a { overflow-wrap: anywhere; }

/* ---------- Thank-you page ---------- */
.q-hero--thanks h1 { max-width: 22ch; }
.q-thanks-cta { justify-self: end; }
@media (max-width: 719px) { .q-thanks-cta { justify-self: start; } }
.q-before { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--gt-white); border: var(--border-hair); border-radius: var(--radius-l); }
.q-thanks-route { max-width: 60ch; }