/* ==========================================================================
   Enquiry form.

   Overrides the label-stacked layout the design shipped with a compact grid.
   Loaded on every view that renders a form, after style.css and responsive.css
   so these rules win without any !important.

   Every value is an existing design token — this is a layout change, not a new
   visual language.
   ========================================================================== */

.qf{container-type:inline-size;container-name:qf}

/* Reassurance copy and stacked labels are gone; tighten what is left. */
.qf .quote-form__t{margin:0 0 var(--s-4)}

.qf__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s-3) var(--s-3);
}
.qf__field{display:flex;flex-direction:column;gap:var(--s-1);min-width:0}
.qf__field--full{grid-column:1 / -1}

/* ---------- Controls ---------- */
.qf input,.qf select,.qf textarea{
  width:100%;min-height:52px;padding:var(--s-3) var(--s-4);
  font-family:var(--font-body);font-size:var(--fs-sm);color:var(--ink);
  background:var(--white);border:1.5px solid var(--field-line);
  border-radius:12px;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.qf textarea{min-height:88px;resize:vertical;line-height:1.55}
.qf input::placeholder,.qf textarea::placeholder{color:#6b7270}

.qf select{
  appearance:none;-webkit-appearance:none;padding-right:var(--s-8);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333383a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--s-4) center;background-size:18px;
}

.qf input:focus,.qf select:focus,.qf textarea:focus{
  border-color:var(--brand-deep);box-shadow:0 0 0 3px rgba(0,99,26,.16);outline:none;
}

/* ---------- Validation ---------- */
.qf .field.has-error input,
.qf .field.has-error select,
.qf .field.has-error textarea{border-color:var(--danger)}
.qf .field.is-valid input,
.qf .field.is-valid select,
.qf .field.is-valid textarea{border-color:var(--brand-line)}

.qf__err{
  margin:0;font-size:.8125rem;line-height:1.4;font-weight:600;color:var(--danger);
  /* Balanced wrapping keeps a two-line error from leaving one orphaned word. */
  text-wrap:balance;
}

/* ---------- Submit ---------- */
.qf__submit{position:relative;gap:var(--s-3)}
.qf__submit[disabled]{opacity:.75;cursor:progress}
.qf__spin{
  display:none;width:18px;height:18px;flex:none;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:qf-spin .7s linear infinite;
}
.qf.is-sending .qf__spin{display:block}
@keyframes qf-spin{to{transform:rotate(360deg)}}

/* ---------- Status ---------- */
.qf__status{margin:var(--s-3) 0 0;font-size:var(--fs-xs);font-weight:600;text-align:center}
.qf__status:empty{display:none}
.qf.has-error .qf__status{color:var(--danger)}

/* ---------- Success ---------- */
.qf__done{
  display:none;flex-direction:column;align-items:center;gap:var(--s-3);
  text-align:center;padding:var(--s-6) var(--s-4);
}
.qf.is-sent .qf__done{display:flex;animation:qf-rise .4s var(--ease) both}
.qf.is-sent .qf__grid,
.qf.is-sent .qf__submit,
.qf.is-sent .quote-form__t,
.qf.is-sent .qf__status{display:none}

.qf__tick{
  width:56px;height:56px;border-radius:50%;flex:none;
  display:grid;place-content:center;
  background:var(--brand-wash);color:var(--brand-deep);
  border:2px solid var(--brand-line);
}
.qf__tick svg{width:28px;height:28px;stroke-dasharray:32;stroke-dashoffset:32;animation:qf-draw .45s .12s var(--ease) forwards}
.qf__done-t{margin:0;font-family:var(--font-head);font-size:var(--fs-h4);font-weight:700;color:var(--ink)}
.qf__done-x{margin:0;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.6}

@keyframes qf-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes qf-draw{to{stroke-dashoffset:0}}

/* ==========================================================================
   Narrow placements — the article sidebar is ~300px, where two columns leave the
   phone and email fields too tight and wrap their error messages over three
   lines. A 340px threshold keeps two columns anywhere there is genuine room
   (~160px per field) and stacks only where there is not. Container queries
   handle any narrow placement automatically, whatever the viewport.
   ========================================================================== */
@container qf (max-width: 340px){
  .qf__grid{grid-template-columns:minmax(0,1fr)}
  .qf__field{grid-column:1 / -1}
}

/* Fallback for browsers without container query support. */
.artform .qf__grid{grid-template-columns:minmax(0,1fr)}
.artform .qf__field{grid-column:1 / -1}

@supports (container-type:inline-size){
  .artform .qf{container-type:inline-size}
}

/* Below 480px there is no room for two columns anywhere. */
@media (max-width:479px){
  .qf__grid{grid-template-columns:minmax(0,1fr)}
  .qf__field{grid-column:1 / -1}
}

@media (prefers-reduced-motion:reduce){
  .qf__spin{animation-duration:1.4s}
  .qf.is-sent .qf__done,.qf__tick svg{animation:none}
  .qf__tick svg{stroke-dashoffset:0}
}