/* ═══════════════════════════════════════════════════════════════
   Alp Web Studio — multi-step project inquiry form.
   Shared by the home page (#contact) and /contact/.

   Tokens are re-declared locally on .inq with literal values because
   index.html (inline CSS) and styles/site.css use different variable
   names for the same brand colours (--ink vs --abyss, --pill vs
   --radius-pill, and so on). Only --font-* and --ease are shared and
   safe to reference, and those still carry fallbacks.
   The form always sits on a .band-dark section, so it styles for ink.
   ═══════════════════════════════════════════════════════════════ */

.inq{
  --i-bone:#F6F2EC;
  --i-bone-80:rgba(244,239,230,.82);
  --i-bone-70:rgba(244,239,230,.70);
  --i-bone-50:rgba(244,239,230,.52);
  --i-bone-38:rgba(244,239,230,.38);
  --i-accent:#B8715A;
  --i-accent-dark:#8A4E3B;
  --i-glacier:#F2BBA0;
  --i-blue:#55AACB;
  --i-blue-pale:#C5E3EE;
  --i-line:rgba(244,239,230,.13);
  --i-line-med:rgba(244,239,230,.22);
  --i-r:14px;
  --i-r-lg:22px;
  --i-ease:var(--ease,cubic-bezier(.22,1,.36,1));

  max-width:720px;
  margin:0 auto;
  background:rgba(244,239,230,.04);
  border:1px solid var(--i-line-med);
  border-radius:var(--i-r-lg);
  padding:clamp(20px,3.2vw,34px);
  font-family:var(--font-body,system-ui,sans-serif);
  color:var(--i-bone);
}

/* ───────── Progress ───────── */
.inq-progress{display:flex;align-items:center;gap:14px;margin-bottom:clamp(18px,2.6vw,26px);}
.inq-bar{flex:1;height:4px;border-radius:9999px;background:rgba(244,239,230,.12);overflow:hidden;}
.inq-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--i-accent),var(--i-glacier));transition:width .45s var(--i-ease);}
.inq-count{font-family:var(--font-mono,monospace);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--i-bone-50);white-space:nowrap;}
@media(prefers-reduced-motion:reduce){ .inq-bar i{transition:none;} }

/* Chosen-package pill, shown from step 2 on */
.inq-tag{display:none;align-items:center;gap:9px;margin:0 0 18px;padding:8px 8px 8px 14px;border:1px solid rgba(242,187,160,.3);background:rgba(184,113,90,.16);border-radius:9999px;width:fit-content;max-width:100%;}
.inq-tag.show{display:inline-flex;}
.inq-tag .tv{font-family:var(--font-mono,monospace);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--i-glacier);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.inq-tag button{font-family:var(--font-mono,monospace);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--i-bone-70);background:rgba(244,239,230,.08);border:0;border-radius:9999px;padding:5px 11px;cursor:pointer;transition:background .2s,color .2s;}
.inq-tag button:hover{background:rgba(244,239,230,.18);color:var(--i-bone);}

/* ───────── Steps ───────── */
.inq-step{display:none;}
.inq-step.is-active{display:block;animation:inqStepIn .38s var(--i-ease) both;}
@keyframes inqStepIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){ .inq-step.is-active{animation:none;} }

.inq-q{font-family:var(--font-display,var(--font-body,sans-serif));font-weight:600;font-size:clamp(1.24rem,2.6vw,1.58rem);letter-spacing:-.02em;line-height:1.2;color:var(--i-bone);margin:0 0 7px;}
.inq-sub{font-size:.93rem;line-height:1.5;color:var(--i-bone-70);margin:0 0 20px;max-width:52ch;}

/* Sub-legend when a step carries more than one group */
.inq-legend{font-family:var(--font-mono,monospace);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--i-bone-50);margin:0 0 10px;padding:0;}
.inq-group + .inq-group,.inq-group + .inq-fields,.inq-fields + .inq-group{margin-top:22px;}
.inq-group{border:0;padding:0;margin:0;min-width:0;}

/* ───────── Choice cards ───────── */
.inq-cards{display:grid;gap:10px;}
.inq-cards.cols-2{grid-template-columns:1fr 1fr;}
@media(max-width:560px){ .inq-cards.cols-2{grid-template-columns:1fr;} }

.inq-card{position:relative;display:flex;align-items:center;gap:14px;min-height:58px;padding:14px 16px;border:1.5px solid var(--i-line-med);border-radius:var(--i-r);background:rgba(244,239,230,.03);cursor:pointer;transition:border-color .2s,background .2s,transform .2s var(--i-ease);}
.inq-card:hover{border-color:rgba(244,239,230,.46);background:rgba(244,239,230,.07);transform:translateY(-1px);}
.inq-card:focus-within{outline:2.5px solid var(--i-blue);outline-offset:3px;}
.inq-card input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.inq-card .cbody{min-width:0;flex:1;}
.inq-card .t{display:block;font-family:var(--font-display,var(--font-body,sans-serif));font-weight:600;font-size:1rem;line-height:1.25;color:var(--i-bone);letter-spacing:-.01em;}
.inq-card .d{display:block;font-size:.82rem;line-height:1.42;color:var(--i-bone-50);margin-top:3px;}
.inq-card .px{display:inline-block;font-family:var(--font-mono,monospace);font-size:.68rem;letter-spacing:.04em;color:var(--i-glacier);margin-top:5px;}
.inq-card .mk{flex:0 0 auto;width:21px;height:21px;border-radius:50%;border:1.5px solid var(--i-line-med);display:inline-flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s;}
.inq-card .mk svg{width:11px;height:11px;color:#FFF6EF;opacity:0;transform:scale(.55);transition:opacity .18s,transform .18s var(--i-ease);}
.inq-card.multi .mk{border-radius:7px;}
.inq-card.is-on{border-color:var(--i-accent);background:rgba(184,113,90,.18);}
.inq-card.is-on .mk{background:var(--i-accent);border-color:var(--i-accent);}
.inq-card.is-on .mk svg{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){ .inq-card,.inq-card .mk svg{transition:none;} .inq-card:hover{transform:none;} }

/* ───────── Text fields ───────── */
.inq-fields{display:grid;gap:14px;}
.inq-fields.cols-2{grid-template-columns:1fr 1fr;}
@media(max-width:560px){ .inq-fields.cols-2{grid-template-columns:1fr;} }
.inq-f.full{grid-column:1 / -1;}
.inq-f label{display:block;font-family:var(--font-mono,monospace);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--i-bone-50);margin-bottom:6px;}
.inq-f label .opt{letter-spacing:.04em;color:var(--i-bone-38);}
.inq-f input,.inq-f textarea{width:100%;font-family:var(--font-body,system-ui,sans-serif);font-size:.97rem;line-height:1.5;color:var(--i-bone);background:rgba(244,239,230,.06);border:1px solid var(--i-line-med);border-radius:var(--i-r);padding:13px 14px;transition:border-color .2s,background .2s;}
.inq-f textarea{min-height:118px;resize:vertical;}
.inq-f input::placeholder,.inq-f textarea::placeholder{color:var(--i-bone-38);}
.inq-f input:focus,.inq-f textarea:focus{outline:none;border-color:var(--i-blue);background:rgba(244,239,230,.09);}
.inq-f.has-error input,.inq-f.has-error textarea{border-color:#E9927A;background:rgba(233,146,122,.09);}
.inq-fmsg{display:none;font-size:.79rem;line-height:1.4;color:var(--i-glacier);margin-top:6px;}
.inq-f.has-error .inq-fmsg{display:block;}

/* Field revealed by a card choice (e.g. "Yes, I own one" → domain input) */
.inq-reveal{display:none;margin-top:12px;}
.inq-reveal.show{display:block;animation:inqStepIn .3s var(--i-ease) both;}
@media(prefers-reduced-motion:reduce){ .inq-reveal.show{animation:none;} }

/* ───────── Nav row ───────── */
.inq-nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:24px;}
.inq-back{font-family:var(--font-mono,monospace);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--i-bone-50);background:none;border:0;padding:10px 2px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:color .2s;}
.inq-back svg{width:13px;height:13px;transition:transform .2s var(--i-ease);}
.inq-back:hover{color:var(--i-bone);}
.inq-back:hover svg{transform:translateX(-3px);}
.inq-back[hidden]{display:none;}
.inq-actions{margin-left:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.inq-skip{font-family:var(--font-body,sans-serif);font-size:.88rem;color:var(--i-bone-50);background:none;border:0;padding:8px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;transition:color .2s;}
.inq-skip:hover{color:var(--i-bone);}
.inq-next{font-family:var(--font-body,sans-serif);font-weight:600;font-size:1rem;line-height:1;display:inline-flex;align-items:center;gap:10px;padding:15px 27px;border:0;border-radius:9999px;background:var(--i-accent);color:#FFF6EF;cursor:pointer;transition:background .25s var(--i-ease),transform .25s var(--i-ease),box-shadow .25s var(--i-ease);}
.inq-next svg{width:15px;height:15px;transition:transform .25s var(--i-ease);}
.inq-next:hover{background:var(--i-accent-dark);transform:translateY(-2px);}
.inq-next:hover svg{transform:translateX(3px);}
.inq-next[disabled]{opacity:.62;cursor:default;transform:none;}
@media(max-width:420px){ .inq-actions{width:100%;} .inq-next{flex:1;justify-content:center;} }
@media(prefers-reduced-motion:reduce){ .inq-next,.inq-next svg,.inq-back svg{transition:none;} .inq-next:hover{transform:none;} }

.inq-hint{font-family:var(--font-mono,monospace);font-size:.6rem;letter-spacing:.06em;color:var(--i-bone-38);margin:14px 0 0;}
.inq-error{font-size:.87rem;line-height:1.45;color:var(--i-glacier);margin:14px 0 0;text-align:center;}
.inq-error[hidden]{display:none;}
.inq-ts{min-height:70px;margin-top:18px;}
.inq-ts:empty{min-height:0;margin-top:0;}

/* Honeypot: off-screen for humans, irresistible to bots */
.inq-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ───────── Success screen ───────── */
.inq-done{display:none;}
.inq.is-sent .inq-progress,.inq.is-sent .inq-tag,.inq.is-sent .inq-steps{display:none;}
.inq.is-sent .inq-done{display:block;animation:inqStepIn .45s var(--i-ease) both;}
@media(prefers-reduced-motion:reduce){ .inq.is-sent .inq-done{animation:none;} }
.inq-done .ok{width:52px;height:52px;border-radius:50%;background:rgba(123,196,154,.16);color:#7BC49A;display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px;}
.inq-done .ok svg{width:27px;height:27px;}
.inq-done h3{font-family:var(--font-display,sans-serif);font-weight:600;font-size:clamp(1.3rem,2.6vw,1.66rem);letter-spacing:-.02em;color:var(--i-bone);margin:0 0 8px;}
.inq-done .dsub{font-size:.96rem;line-height:1.55;color:var(--i-bone-70);margin:0 0 22px;max-width:50ch;}
.inq-done .dsub a{color:var(--i-glacier);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(242,187,160,.42);}

.inq-booknow{border-top:1px solid var(--i-line);padding-top:22px;}
.inq-booknow .bt{font-family:var(--font-display,sans-serif);font-weight:600;font-size:1.06rem;color:var(--i-bone);margin:0 0 6px;letter-spacing:-.01em;}
.inq-booknow .bd{font-size:.9rem;line-height:1.5;color:var(--i-bone-70);margin:0 0 16px;max-width:48ch;}
.inq-booknow .bfine{font-family:var(--font-mono,monospace);font-size:.6rem;letter-spacing:.05em;color:var(--i-bone-38);margin:12px 0 0;}
.inq-cal{display:none;margin-top:4px;background:var(--i-bone);border-radius:var(--i-r);padding:6px;overflow:hidden;}
.inq-cal.show{display:block;}
.inq-cal .calendly-inline-widget{border-radius:calc(var(--i-r) - 6px);overflow:hidden;min-width:280px;}

/* ───────── Fallback strip under the form (text / call) ───────── */
.inq-alt{max-width:720px;margin:22px auto 0;display:flex;align-items:center;justify-content:center;gap:10px 26px;flex-wrap:wrap;}
.inq-alt .lbl{font-family:var(--font-mono,monospace);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,239,230,.45);}
.inq-alt a{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-body,sans-serif);font-weight:600;font-size:.95rem;color:#F6F2EC;text-decoration:none;padding:8px 2px;border-bottom:1px solid rgba(244,239,230,.24);transition:color .2s,border-color .2s;}
.inq-alt a svg{width:16px;height:16px;color:#F2BBA0;flex:0 0 auto;}
.inq-alt a:hover{color:#F2BBA0;border-bottom-color:#F2BBA0;}

/* No-JS fallback */
.inq-nojs{max-width:720px;margin:0 auto;background:rgba(244,239,230,.04);border:1px dashed rgba(244,239,230,.28);border-radius:22px;padding:34px 24px;text-align:center;color:rgba(244,239,230,.8);}
.inq-nojs a{color:#F2BBA0;font-weight:600;}