.quote-builder { grid-column: 1 / -1; width: 100%; padding: clamp(1rem, 3vw, 2rem); border: 1px solid #cbd5e1; border-radius: 1rem; background: #fff; color: #142c3d; }
.quote-builder[hidden], #quote-summary[hidden] { display: none; }
.quote-fields, .quote-costs, .quote-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.quote-fields label { display: grid; gap: .5rem; font-weight: 600; }
.quote-fields select, .quote-fields input { width: 100%; min-width: 0; min-height: 48px; padding: .7rem; border: 1px solid #64748b; border-radius: .4rem; background: #fff; color: #142c3d; font: inherit; }
.quote-costs { margin-block: 1.5rem; }
.quote-costs p, .quote-steps li { padding: 1rem; background: #f0f5f8; border-radius: .6rem; }
.quote-steps { list-style: none; margin: 0; padding: 0; }
#quote-summary { white-space: pre-line; padding: 1rem; border-left: 3px solid #12677b; }
.quote-builder :focus-visible { outline: 3px solid #12677b; outline-offset: 4px; }
@media (max-width: 760px) { .quote-fields, .quote-costs, .quote-steps { grid-template-columns: 1fr; } }
/* Keep the introduction, choices and existing protected form in document order. */
#contact.final-cta { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; align-items: start; }
#contact.final-cta > div, #contact.final-cta > .button { grid-column: 1; grid-row: auto; max-width: 100%; }
#contact.final-cta > .button { justify-self: start; }
#contact .quote-builder > div { max-width: none; }