/* 05 · Book a screen: the quote request (js/quote.js). The words on the left and the form on the right (stacked on a
   phone): name, company, email and phone. Fields follow the guide: the label above, line-strong edges, the 2px ink
   focus ring, and an error in signal-ink under the field it's about. */

/* The four fields sit level with the middle of the words beside them. */
.qf-frame { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-8); align-items: center; justify-items: stretch; }
.qf-copy { display: grid; justify-items: start; }
.qf-copy .lead { margin-top: var(--space-5); color: var(--ink-muted); }
.qf-points { margin-top: var(--space-6); }

.qf { display: grid; gap: var(--space-5); }
.qf-field > span:not(.qf-msg) { display: block; margin-bottom: var(--space-2); padding: 0; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ink); }
.qf-field > span:not(.qf-msg) i { font-style: normal; font-weight: 400; color: var(--ink-muted); }
.qf-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); }
.qf-field { display: block; min-width: 0; }

.qf :is(input[type="text"], input[type="email"], input[type="tel"]) {
  display: block; width: 100%; height: 48px; padding: 0 var(--space-4);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper-raised); color: var(--ink);
  font: 400 16px/24px var(--font-sans); transition: border-color var(--dur-fast) var(--ease-standard);
}
.qf ::placeholder { color: var(--ink-muted); opacity: .8; }
.qf input:hover { border-color: var(--ink-muted); }
.qf input:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.qf-field.is-wrong input { border-color: var(--signal-ink); }
.qf-msg { display: block; margin-top: var(--space-1); font-size: 14px; line-height: 20px; color: var(--signal-ink); }

.qf-send { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); margin-top: var(--space-2); }
.qf-fine { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.qf-error { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--signal-ink) 10%, var(--paper)); color: var(--signal-ink); font-size: 15px; line-height: 22px; }
/* The field only a bot fills. */
.qf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.qf.is-sending { opacity: .6; pointer-events: none; }

.qf-done { display: grid; align-content: start; gap: var(--space-3); padding-top: var(--space-2); outline: none; }
/* The thank-you takes the form's place once it's sent; whichever is hidden stays hidden. */
.qf-frame > :is(.qf, .qf-done) { grid-column: 2; grid-row: 1; }
:is(.qf, .qf-done, .qf-error)[hidden] { display: none; }
.qf-done-title { margin: 0; font-family: var(--font-display); font-stretch: 104%; font-weight: 900; font-size: clamp(32px, 4vw, 48px); line-height: 1; letter-spacing: -.03em; }
.qf-done p:last-child { max-width: 46ch; color: var(--ink-muted); }

@media (max-width: 900px) {
  .qf-frame { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-7); }
  .qf-frame > :is(.qf, .qf-done) { grid-column: 1; grid-row: 2; }
  .qf-row { grid-template-columns: minmax(0, 1fr); }
}

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

/* The dip to dark that covers the jump from any quote button to the form (js/quote.js): in quickly, out a little slower. */
.qf-veil { position: fixed; inset: 0; z-index: 1000; background: var(--brand-black); opacity: 0; pointer-events: none; transition: opacity 320ms var(--ease-standard); }
.qf-veil.is-on { opacity: 1; transition-duration: 180ms; }
/* The heading takes the focus after a jump on a phone; it doesn't need a ring for that. */
#close-title:focus { outline: none; }