/* ==========================================================================
   Steady Drift Studio — Client Discovery ("Start a Project") stepped form.
   Extends the shared token system in site.css (navy/teal/cream, DM Serif
   Display + DM Sans). This file only adds the step-engine chrome: progress
   bar, question shell, option cards, transitions.
   ========================================================================== */

/* ── INTRO (reuses .page-header look — arrival moment, moody navy) ── */
.intake-intro{background:var(--navy-deep);padding:9.5rem var(--pad) 6rem;position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:center}
.intake-intro-inner{position:relative;z-index:2;max-width:640px;margin:0 auto;text-align:center}
.intake-intro .eyebrow{justify-content:center;display:flex}
.intake-intro h1{font-family:var(--font-display);font-size:clamp(2.1rem,4.8vw,3.2rem);font-weight:400;color:#e8f4f0;letter-spacing:-0.025em;line-height:1.15;margin:1.1rem 0 1.25rem}
.intake-intro .lede{font-size:clamp(1rem,1.6vw,1.1rem);font-weight:300;color:rgba(232,244,240,0.6);line-height:1.8;max-width:520px;margin:0 auto}
.intake-intro-meta{display:flex;align-items:center;justify-content:center;gap:0.6rem;margin-top:1.75rem;font-size:12px;color:rgba(232,244,240,0.4)}
.intake-intro-meta svg{flex-shrink:0}
.intake-intro .btn-primary{margin-top:2.5rem;font-size:14.5px;padding:0.95rem 2rem}

/* ── FORM SHELL ── */
.intake-form-view{display:none;background:var(--cream);min-height:100vh;flex-direction:column}
.intake-form-view.active{display:flex}

.intake-progress-track{position:fixed;top:0;left:0;right:0;height:4px;background:var(--stone-dark);z-index:110}
.intake-progress-fill{height:100%;background:var(--teal-bright);width:0%;transition:width 0.45s cubic-bezier(0.16,1,0.3,1);box-shadow:0 0 10px rgba(91,196,212,0.55)}

.intake-topbar{position:fixed;top:4px;left:0;right:0;z-index:105;display:flex;align-items:center;justify-content:space-between;padding:5.4rem var(--pad) 0}
.intake-back{display:inline-flex;align-items:center;gap:0.4rem;font-family:var(--font-body);font-size:12.5px;color:var(--ink-mid);background:none;border:none;cursor:pointer;padding:0.4rem 0;transition:color 0.2s}
.intake-back:hover{color:var(--teal)}
.intake-back:disabled{visibility:hidden}
.intake-section-tag{font-size:10.5px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--teal);display:flex;align-items:center;gap:0.5rem}
.intake-section-count{color:var(--ink-light);font-weight:400;letter-spacing:0.5px}

.intake-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:9rem var(--pad) 5rem}
.intake-step{max-width:640px;width:100%;opacity:0;transform:translateY(14px);transition:opacity 0.4s ease,transform 0.4s cubic-bezier(0.16,1,0.3,1)}
.intake-step.visible{opacity:1;transform:none}
.intake-step.leaving{opacity:0;transform:translateY(-10px);transition:opacity 0.2s ease,transform 0.2s ease}

.intake-q-eyebrow{font-size:10.5px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--teal);margin-bottom:0.85rem}
.intake-step h2{font-family:var(--font-display);font-size:clamp(1.5rem,3.2vw,2.1rem);font-weight:400;color:var(--ink);letter-spacing:-0.02em;line-height:1.25;margin-bottom:0.6rem}
.intake-step .intake-help{font-size:13.5px;font-weight:300;color:var(--ink-mid);line-height:1.75;margin-bottom:1.75rem;max-width:520px}
.intake-step .intake-help:last-of-type{margin-bottom:1.75rem}

/* ── FIELDS ── */
.intake-field{margin-bottom:1.4rem}
.intake-field label.intake-field-label{display:block;font-size:11.5px;font-weight:500;letter-spacing:0.02em;color:var(--ink-mid);margin-bottom:0.5rem}
.intake-field input[type="text"],.intake-field input[type="email"],.intake-field input[type="tel"],.intake-field input[type="url"],.intake-field input[type="date"],.intake-field textarea{
  width:100%;font-family:var(--font-body);font-size:16px;color:var(--ink);background:#fff;
  border:1px solid var(--stone-dark);border-radius:var(--r);padding:0.85rem 1rem;transition:border-color 0.2s,box-shadow 0.2s;
}
.intake-step input:focus,.intake-step textarea:focus,.intake-step select:focus{outline:none;border-color:var(--teal-bright);box-shadow:0 0 0 3px rgba(91,196,212,0.15)}
.intake-field textarea{min-height:120px;resize:vertical;line-height:1.65}
.intake-field textarea.intake-textarea-lg{min-height:160px}
.intake-field-hint{display:block;font-size:11.5px;font-weight:300;color:var(--ink-light);margin-top:0.4rem}
.intake-field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}

/* ── OPTION CARDS (single + multi select) ── */
.intake-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0.7rem;margin-bottom:0.5rem}
.intake-options.intake-options-1col{grid-template-columns:1fr}
.intake-option{display:flex;align-items:flex-start;gap:0.7rem;font-size:14px;color:var(--ink);background:#fff;border:1px solid var(--stone-dark);border-radius:var(--r-lg);padding:0.9rem 1.05rem;cursor:pointer;transition:border-color 0.2s,background 0.2s,transform 0.15s}
.intake-option:hover{border-color:rgba(42,124,138,0.35);transform:translateY(-1px)}
.intake-option .intake-option-indicator{width:18px;height:18px;flex-shrink:0;margin-top:0.1rem;border:1.5px solid var(--stone-dark);background:#fff;transition:all 0.2s;display:flex;align-items:center;justify-content:center}
.intake-option[data-kind="radio"] .intake-option-indicator{border-radius:50%}
.intake-option[data-kind="checkbox"] .intake-option-indicator{border-radius:5px}
.intake-option input{position:absolute;opacity:0;width:1px;height:1px}
.intake-option.selected{border-color:var(--teal);background:var(--teal-light)}
.intake-option.selected .intake-option-indicator{border-color:var(--teal);background:var(--teal)}
.intake-option.selected .intake-option-indicator::after{content:'';width:6px;height:6px;border-radius:2px;background:#fff}
.intake-option[data-kind="radio"].selected .intake-option-indicator::after{border-radius:50%}
.intake-option-label{line-height:1.45}
.intake-option-label small{display:block;font-size:11.5px;color:var(--ink-light);font-weight:300;margin-top:0.15rem}

/* ── ACTIONS ── */
.intake-actions{display:flex;align-items:center;gap:1.1rem;margin-top:1.9rem;flex-wrap:wrap}
.intake-skip{font-family:var(--font-body);font-size:12.5px;color:var(--ink-light);background:none;border:none;cursor:pointer;text-decoration:underline;text-decoration-color:var(--stone-dark);transition:color 0.2s}
.intake-skip:hover{color:var(--teal)}
.intake-error{font-size:12.5px;color:var(--bad,#b0473e);margin-top:0.75rem;display:none}
.intake-error.visible{display:block}
.intake-enter-hint{font-size:11px;color:var(--ink-light);margin-left:0.2rem}

/* ── OUTRO ── */
.intake-outro{text-align:center;padding:3.5rem 0}
.intake-outro h2{margin-bottom:1rem}
.intake-outro p{font-size:14.5px;color:var(--ink-mid);line-height:1.85;max-width:460px;margin:0 auto}

/* ── RESPONSIVE ── */
@media(max-width:640px){
  .intake-intro{padding-top:7.5rem}
  .intake-topbar{padding-top:4.6rem}
  .intake-stage{padding-top:7.5rem}
  .intake-field-row{grid-template-columns:1fr}
  .intake-options{grid-template-columns:1fr}
  .intake-actions{flex-direction:column-reverse;align-items:stretch}
  .intake-actions .btn-primary{justify-content:center;width:100%}
}
@media(prefers-reduced-motion:reduce){
  .intake-step{transition:none}
}