/* Project intake wizard. Only web-design-request.html loads this, so it stays
   out of the shared sheet every other page has to download.

   The whole thing is written so that WITHOUT JavaScript every step is simply
   visible, stacked, and submittable as one long form. .stp-js is added by the
   script, and only then does anything hide. A blocked script costs the visitor
   a progress bar, not the ability to send the form. */

.wiz{max-width:860px}

/* ── progress ─────────────────────────────────────────────────────────────── */
.wiz-head{position:sticky;top:0;z-index:6;background:var(--ink);
 padding:14px 0 13px;margin-bottom:clamp(20px,2.6vw,30px);
 border-bottom:1px solid var(--lnD)}
.wiz-head .cnt{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
 font-size:13px;color:var(--muD);margin-bottom:9px}
.wiz-head .cnt b{color:var(--pp);font-size:15px;font-weight:600}
.wiz-track{height:3px;background:var(--lnD);border-radius:3px;overflow:hidden}
.wiz-track i{display:block;height:100%;width:100%;border-radius:3px;
 background:linear-gradient(90deg,var(--tl) 0%,var(--tl2) 100%);
 transform-origin:left;transform:scaleX(1);transition:transform .4s var(--ez)}
.stp-js .wiz-track i{transform:scaleX(var(--wp,0))}
/* Only meaningful once the steps actually step; without script it is one form. */
.wiz-head .saved{font-size:12.5px;color:var(--tl2);opacity:0;transition:opacity .3s}
.wiz-head .saved.on{opacity:1}

/* ── steps ────────────────────────────────────────────────────────────────── */
.stp{border:0;padding:0;margin:0 0 clamp(30px,4vw,46px)}
.stp-js .stp{display:none;margin-bottom:0}
.stp-js .stp.on{display:block;animation:stpin .34s var(--ez)}
@keyframes stpin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.stp>legend{padding:0;font-size:clamp(23px,2.6vw,34px);line-height:1.14;
 letter-spacing:-.02em;font-weight:700;color:var(--pp);margin-bottom:8px}
.stp .lead{color:var(--muD);font-size:16.5px;max-width:62ch;margin:0 0 clamp(20px,2.6vw,30px)}

/* ── questions ────────────────────────────────────────────────────────────── */
.q{margin-bottom:clamp(18px,2.2vw,26px)}
.q>.qh{display:block;font-weight:600;font-size:15.5px;color:var(--pp);margin-bottom:7px}
.q .hint{display:block;font-size:13.5px;color:var(--muD);margin:-2px 0 8px;max-width:60ch}
.q .req{color:var(--or2);font-weight:600}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,18px)}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,18px)}
.wiz textarea{min-height:104px;resize:vertical}
.wiz input:focus-visible,.wiz select:focus-visible,.wiz textarea:focus-visible{
 outline:2px solid var(--tl2);outline-offset:1px}

/* A field the browser has flagged only turns red once the step has been
   submitted - colouring an empty box the moment it is touched is nagging. */
.stp.checked input:invalid,.stp.checked select:invalid,.stp.checked textarea:invalid{
 border-color:var(--or);background:rgba(240,82,26,.07)}
.err{display:none;color:var(--or2);font-size:13.5px;margin-top:7px}
.stp.checked .err.on{display:block}

/* ── choice cards ─────────────────────────────────────────────────────────── */
.opts{display:grid;gap:9px}
.opts.two-up{grid-template-columns:1fr 1fr}
.opts.three-up{grid-template-columns:repeat(3,1fr)}
.opt{display:flex;gap:11px;align-items:flex-start;cursor:pointer;
 padding:12px 14px;border:1px solid var(--lnD);background:rgba(247,246,243,.04);
 transition:border-color .2s var(--ez),background .2s var(--ez)}
.opt:hover{border-color:rgba(247,246,243,.32)}
.opt input{width:auto;flex:0 0 auto;margin:2px 0 0;accent-color:var(--tl2)}
.opt span{font-size:15px;line-height:1.4}
.opt span i{display:block;font-style:normal;font-size:13px;color:var(--muD);margin-top:2px}
.opt:has(input:checked){border-color:var(--tl2);background:rgba(51,194,197,.1)}
.opt:has(input:focus-visible){outline:2px solid var(--tl2);outline-offset:1px}

/* ── conditional blocks ───────────────────────────────────────────────────── */
/* Hidden by default only once the script is running, so no-script sees every
   follow-up question rather than losing them. */
.stp-js .when{display:none}
.stp-js .when.on{display:block}

/* ── file upload ──────────────────────────────────────────────────────────── */
.drop{border:1px dashed var(--lnD);background:rgba(247,246,243,.03);
 padding:clamp(18px,2.4vw,26px);text-align:center;transition:border-color .2s var(--ez),background .2s var(--ez)}
.drop.over{border-color:var(--tl2);background:rgba(51,194,197,.08)}
.drop input[type=file]{display:none}
.drop .pick{color:var(--tl2);text-decoration:underline;cursor:pointer;font-weight:600}
.drop p{margin:0;font-size:15px;color:var(--muD)}
.files{list-style:none;padding:0;margin:11px 0 0;display:grid;gap:7px}
.files li{display:flex;align-items:center;gap:10px;font-size:14px;
 background:rgba(247,246,243,.05);border:1px solid var(--lnD);padding:9px 12px}
.files li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.files li em{font-style:normal;color:var(--muD);font-size:13px;flex:0 0 auto}
.files li button{background:none;border:0;color:var(--or2);cursor:pointer;
 font-size:19px;line-height:1;padding:0 2px;flex:0 0 auto}
.files li.bad{border-color:var(--or);background:rgba(240,82,26,.09)}

/* ── nav ──────────────────────────────────────────────────────────────────── */
.wiz-nav{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
 margin-top:clamp(22px,2.8vw,32px);padding-top:clamp(18px,2.2vw,26px);
 border-top:1px solid var(--lnD)}
.wiz-nav .sp{flex:1}
.wiz-nav .ghost{background:none;border:1px solid var(--lnD);color:var(--pp)}
.wiz-nav .ghost:hover{border-color:var(--pp)}
.stp-js .wiz-only{display:inline-block}
.wiz-only{display:none}

/* ── result ───────────────────────────────────────────────────────────────── */
.wiz-done{display:none;text-align:center;padding:clamp(30px,5vw,64px) 0}
.wiz-done.on{display:block}
.wiz-done h2{font-size:clamp(26px,3.2vw,40px);margin:0 auto 12px}
.wiz-done p{color:var(--muD);max-width:52ch;margin:0 auto 10px}

@media(max-width:640px){
.two,.three,.opts.two-up,.opts.three-up{grid-template-columns:1fr}
.wiz-head{padding:11px 0 10px}
.wiz-nav .btn,.wiz-nav .btn2{flex:1 1 100%}
.wiz-nav .sp{display:none}
}

@media(prefers-reduced-motion:reduce){
.stp-js .stp.on{animation:none}
.wiz-track i{transition:none}
}

/* Inputs in a two- or three-up row have to line up even when one question
   carries a hint and the one beside it does not. Pushing the control to the
   bottom of its cell fixes every such pair at once rather than one at a time. */
.two .q,.three .q{display:flex;flex-direction:column;margin-bottom:0}
.two .q>input,.two .q>select,.two .q>textarea,
.three .q>input,.three .q>select,.three .q>textarea{margin-top:auto}
.two,.three{margin-bottom:clamp(18px,2.2vw,26px)}

/* Anything that costs money gets said plainly and early, not in a footnote. */
.note{border-left:2px solid var(--or2);background:rgba(246,170,43,.09);
 padding:13px 16px;margin-bottom:11px}
.note b{display:block;color:var(--or2);font-size:14.5px;margin-bottom:5px}
.note p{margin:0;font-size:14.5px;color:var(--muD);line-height:1.58}
.note.past{border-left-color:var(--or);background:rgba(240,82,26,.1)}
.note.past b{color:var(--or)}