/* Page-body components — Content Design & Readability pilot (bathroom-tiling).
   Reuses --qh-* tokens from hero.css. No new colours/fonts/radii/shadows introduced. */

.qh-section { padding: var(--qh-space-5) 0; }
.qh-section--light { background: var(--qh-surface); }
.qh-section--alt { background: var(--qh-surface-alt); }
.qh-section--dark { background: var(--qh-primary); color: var(--qh-text-on-dark); }

.qh-section__container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.qh-section__container--narrow { max-width: 74ch; text-align: center; }

.qh-section__head { max-width: 68ch; margin-bottom: var(--qh-space-4); }
.qh-section__head h2, .qh-section__head h3 {
  margin: 0 0 var(--qh-space-1);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--qh-primary);
  font-size: 1.5rem;
}
.qh-section--dark .qh-section__head h2, .qh-section--dark .qh-section__head h3 { color: var(--qh-white); }
.qh-section__head p { margin: 0; color: var(--qh-text-muted); line-height: 1.6; }
.qh-section--dark .qh-section__head p { color: var(--qh-text-on-dark-muted); }

/* Card grid — used for services, tile-selection items, climate factors, process steps */
.qh-card-grid { display: grid; grid-template-columns: 1fr; gap: var(--qh-space-3); }
@media (min-width: 640px) {
  .qh-card-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .qh-card-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .qh-card-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .qh-card-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.qh-card {
  background: var(--qh-white);
  border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
  padding: var(--qh-space-3);
  transition: box-shadow 150ms ease-out, transform 150ms ease-out;
}
.qh-card:hover, .qh-card:focus-within { box-shadow: var(--qh-shadow-md); transform: translateY(-2px); }
.qh-card h3, .qh-card h4 {
  margin: 0 0 var(--qh-space-1);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--qh-primary);
}
.qh-card p { margin: 0; color: var(--qh-text); line-height: 1.6; font-size: .9375rem; }
.qh-card .qh-card__price { font-weight: 700; color: var(--qh-accent-dark); font-size: 1.0625rem; }

/* Alternating image + text rows */
.qh-prose__grid { display: grid; grid-template-columns: 1fr; gap: var(--qh-space-4); align-items: center; }
@media (min-width: 768px) { .qh-prose__grid { grid-template-columns: 1fr 1fr; } }
.qh-prose__grid img { width: 100%; height: auto; border-radius: var(--qh-radius-card); display: block; }
.qh-prose__grid h2, .qh-prose__grid h3 {
  margin: 0 0 var(--qh-space-2);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--qh-primary);
  font-size: 1.375rem;
}
.qh-prose__grid p { color: var(--qh-text); line-height: 1.6; margin: 0 0 var(--qh-space-2); }
.qh-prose__grid p:last-child { margin-bottom: 0; }
.qh-section--dark .qh-prose__grid > div > p:not([class]) { color: var(--qh-text-on-dark-muted); }
.qh-prose__grid strong { color: var(--qh-primary); }

/* Single-column prose (no image) */
.qh-prose h2 {
  margin: 0 0 var(--qh-space-2);
  font-weight: 800; text-transform: uppercase; letter-spacing: -.01em;
  color: var(--qh-primary); font-size: 1.375rem;
}
.qh-prose p { color: var(--qh-text); line-height: 1.6; margin: 0 0 var(--qh-space-2); }
.qh-prose p:last-child { margin-bottom: var(--qh-space-3); }
.qh-section--dark .qh-prose p:not([class]) { color: var(--qh-text-on-dark-muted); }
.qh-section--dark .qh-prose h2 { color: var(--qh-white); }

/* Trust bar */
.qh-trust-bar { display: flex; flex-wrap: wrap; gap: var(--qh-space-2); justify-content: center; }
.qh-trust-bar__item {
  display: flex; align-items: center; gap: 8px;
  background: var(--qh-white); border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-card); padding: var(--qh-space-1) var(--qh-space-2);
  font-weight: 600; font-size: .9375rem; color: var(--qh-primary);
}
.qh-trust-bar__item::before { content: "✓"; color: var(--qh-accent); font-weight: 800; }

/* FAQ accordion */
.qh-faq { display: flex; flex-direction: column; gap: var(--qh-space-1); max-width: 74ch; margin: 0 auto; }
.qh-faq details {
  background: var(--qh-white); border: 1px solid var(--qh-border);
  border-radius: var(--qh-radius-card); overflow: hidden;
}
.qh-faq summary {
  padding: var(--qh-space-2) var(--qh-space-3);
  font-weight: 700; color: var(--qh-primary); cursor: pointer;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--qh-space-2);
}
.qh-faq summary::-webkit-details-marker { display: none; }
.qh-faq summary::after { content: "+"; font-size: 1.25rem; color: var(--qh-accent); flex-shrink: 0; }
.qh-faq details[open] summary::after { content: "\2212"; }
.qh-faq summary:focus-visible { outline: 2px solid var(--qh-accent); outline-offset: -2px; }
.qh-faq p { margin: 0; padding: 0 var(--qh-space-3) var(--qh-space-3); color: var(--qh-text); line-height: 1.6; }

/* Final CTA band */
.qh-cta-band { background: var(--qh-primary); color: var(--qh-text-on-dark); padding: var(--qh-space-5) 0; text-align: center; }
.qh-cta-band .qh-section__container { max-width: 640px; }
.qh-cta-band h2 {
  margin: 0 0 var(--qh-space-2); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.01em; color: var(--qh-white); font-size: 1.5rem;
}
.qh-cta-band p { color: var(--qh-text-on-dark-muted); line-height: 1.6; margin: 0 0 var(--qh-space-2); }
.qh-cta-band ol { text-align: left; max-width: 44ch; margin: 0 auto var(--qh-space-3); color: var(--qh-text-on-dark-muted); }

/* Form card wrapper — styles the container around the existing <form> only; form itself untouched */
.qh-form-wrap {
  background: var(--qh-white); border-radius: var(--qh-radius-card);
  box-shadow: var(--qh-shadow-md); padding: var(--qh-space-3);
}
.qh-form-wrap .bc-form-field label { color: var(--qh-text); font-weight: 600; font-size: .8125rem; }
.qh-form-wrap .bc-form-field input,
.qh-form-wrap .bc-form-field select,
.qh-form-wrap .bc-form-field textarea {
  border-radius: var(--qh-radius-input); border: 1px solid var(--qh-border);
}