/* ==========================================================================
   Marketing group: /web-design-questionnaire/ multi-step form (.qform)
   Other marketing pages use shared components only.
   ========================================================================== */
.qform { gap: 1.25rem; overflow: hidden; }
.qform__head { display: grid; gap: .9rem; }
.qform__h { font-variation-settings: "wdth" 116; font-weight: 800; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); line-height: 1.1; color: var(--navy); margin: 0; }
.qform__intro { margin: 0; color: var(--muted); }
.qform__req { display: inline-block; margin-left: .35rem; padding: .05rem .4rem; border-radius: 4px; background: var(--sand); color: var(--orange-text); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; vertical-align: middle; }

/* step rail + progress bar (only meaningful once JS has split the steps) */
.qform__rail { display: none; }
.qform.is-stepped .qform__rail { display: grid; grid-template-columns: repeat(6, 1fr); gap: .35rem; list-style: none; margin: .25rem 0 0; padding: 0; font-size: .72rem; font-weight: 700; color: var(--muted); line-height: 1.2; }
.qform__rail li { display: grid; gap: .35rem; justify-items: start; transition: color .3s; }
.qform__rail span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); font-size: .78rem; color: var(--navy); background: #fff; transition: background-color .35s var(--ease), border-color .35s, color .35s, transform .35s var(--ease); }
.qform__rail li.is-on { color: var(--navy); }
.qform__rail li.is-on span { background: var(--orange); border-color: var(--orange); color: var(--ink); transform: scale(1.12); }
.qform__rail li.is-done span { background: var(--navy); border-color: var(--navy); color: #fff; }
.qform__bar { display: none; }
.qform.is-stepped .qform__bar { display: block; height: 6px; border-radius: 6px; background: var(--sand); overflow: hidden; }
.qform__bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--orange), var(--orange-glow)); transform-origin: left center; transform: scaleX(var(--p, .1667)); transition: transform .7s var(--ease); }
.qform__count { margin: 0; font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-text); font-variation-settings: "wdth" 120; }

/* steps */
.qform__stage { position: relative; }
.qform__step { display: grid; gap: 1.1rem; }
.qform__step + .qform__step { margin-top: 2.5rem; }
.qform.is-stepped .qform__step + .qform__step { margin-top: 0; }
.qform__title { font-variation-settings: "wdth" 112; font-weight: 800; font-size: 1.35rem; color: var(--navy); margin: 0; outline: none; }
.qform__no { display: block; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--orange-text); margin-bottom: .2rem; }
.qform:not(.is-stepped) .qform__no { display: none; }
.qform__sub { margin: -.6rem 0 0; color: var(--muted); font-size: .95rem; }

/* step transitions: a wipe plus a short slide in the direction of travel */
.qform__step.is-leaving { animation: qOut .32s var(--ease) both; pointer-events: none; }
.qform__step.is-leaving.is-back { animation-name: qOutBack; }
.qform__step.is-entering, .qform__done.is-entering { animation: qIn .55s var(--ease) both; }
.qform__step.is-entering.is-back { animation-name: qInBack; }
@keyframes qOut { to { opacity: 0; transform: translateX(-48px); clip-path: inset(0 100% 0 0); } }
@keyframes qOutBack { to { opacity: 0; transform: translateX(48px); clip-path: inset(0 0 0 100%); } }
@keyframes qIn { from { opacity: 0; transform: translateX(56px); clip-path: inset(0 0 0 100%); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
@keyframes qInBack { from { opacity: 0; transform: translateX(-56px); clip-path: inset(0 100% 0 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }

/* choice pills */
.qform__choice { border: 0; margin: 0; padding: 0; min-width: 0; }
.qform__choice legend { padding: 0; margin-bottom: .5rem; font-size: .85rem; font-weight: 700; color: var(--navy); }
.qform__pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.qform__pills label { position: relative; }
.qform__pills input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.qform__pills span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.25rem; border: 2px solid var(--line); border-radius: var(--radius); font-weight: 700; font-size: .95rem; color: var(--navy); background: var(--paper); transition: background-color .2s, border-color .2s, color .2s; }
.qform__pills input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.qform__pills input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }
.qform__choice.is-invalid .qform__pills span { border-color: #b3261e; }
.field.is-invalid textarea { border-color: #b3261e; }
.qform__err { margin: .15rem 0 0; color: #b3261e; font-size: .88rem; font-weight: 600; }

/* nav */
.qform__nav { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; }
.qform__nav [data-q-next], .qform__nav [data-q-submit] { margin-left: auto; }
.qform__done { gap: .9rem; outline: none; }
.qform__done p { margin: 0; }
.qform__done a { color: var(--navy); font-weight: 700; text-decoration-color: var(--orange); }

@media (max-width: 640px) {
  .qform.is-stepped .qform__rail { font-size: 0; gap: .25rem; }
  .qform__rail span { width: 26px; height: 26px; }
  .qform__nav .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .qform__step.is-leaving, .qform__step.is-entering, .qform__done.is-entering { animation: none; }
  .qform__bar i, .qform__rail span { transition: none; }
}
.qform[hidden], .qform [hidden] { display: none !important; }
.qform.is-stepped .qform__no { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }