/* ============================================================================
 * forms.css — WEEKENDS INC Phase 1
 * Shared styling for the conversion forms (contact / general / maharishi /
 * qualified production brief) and the thank-you page. Uses the design tokens
 * (--ink, --paper, --hair, --f-*) already defined on :root by the page shell.
 * ==========================================================================*/
.form-shell{padding:48px 0 96px}
.form-shell .intro{max-width:60ch;color:var(--ink-2);font-size:17px;line-height:1.6;margin:0 0 40px}

.wknds-form{max-width:640px;display:grid;gap:24px}
.wknds-form .field{display:grid;gap:8px}
.wknds-form .field-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:640px){.wknds-form .field-row{grid-template-columns:1fr}}

.wknds-form label{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3)}
.wknds-form label .req{color:var(--accent-ink);margin-left:4px}

.wknds-form input[type=text],
.wknds-form input[type=email],
.wknds-form input[type=url],
.wknds-form select,
.wknds-form textarea{
  font-family:var(--f-body);font-size:16px;color:var(--ink);
  background:rgba(255,255,255,0.5);
  border:1px solid var(--hair-2);border-radius:2px;
  padding:13px 14px;width:100%;
  transition:border-color .15s ease, background .15s ease;
}
.wknds-form textarea{min-height:140px;resize:vertical;line-height:1.5}
.wknds-form input:focus,
.wknds-form select:focus,
.wknds-form textarea:focus{outline:none;border-color:var(--ink);background:#fff}
.wknds-form input:user-invalid,
.wknds-form textarea:user-invalid{border-color:var(--accent-ink)}

/* Multi-select project type */
.wknds-form .checks{display:flex;flex-wrap:wrap;gap:10px}
.wknds-form .checks label{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--f-body);font-size:14px;letter-spacing:normal;text-transform:none;color:var(--ink);
  border:1px solid var(--hair-2);border-radius:999px;padding:8px 16px;
  transition:border-color .15s ease, background .15s ease;
}
.wknds-form .checks input{accent-color:var(--ink);margin:0}
.wknds-form .checks label:has(input:checked){border-color:var(--ink);background:rgba(14,14,16,0.05)}

.wknds-form .hint{font-family:var(--f-mono);font-size:11px;letter-spacing:0.04em;color:var(--ink-3)}

.wknds-form .actions{display:flex;align-items:center;gap:20px;margin-top:8px}
.wknds-form button[type=submit]{
  font-family:var(--f-display);font-weight:600;font-size:14px;letter-spacing:0.02em;
  color:var(--paper);background:var(--ink);border:none;border-radius:2px;
  padding:15px 30px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  transition:opacity .15s ease, transform .15s ease;
}
.wknds-form button[type=submit]:hover{opacity:.88}
.wknds-form button[type=submit]:disabled{opacity:.5;cursor:default}
.wknds-form button .arrow{transition:transform .15s ease}
.wknds-form button:hover .arrow{transform:translateX(3px)}

.form-error{
  font-family:var(--f-body);font-size:14px;color:#fff;background:var(--accent-ink);
  border-radius:2px;padding:12px 16px;line-height:1.45;
}
.form-status{font-family:var(--f-mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3)}

/* Thank-you page */
.ty{padding:90px 0 120px;max-width:60ch}
.ty .eyebrow{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-3);display:inline-flex;align-items:center;gap:10px;margin:0 0 24px}
.ty .eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.ty h1{font-family:var(--f-display);font-weight:600;font-size:clamp(40px,5vw,64px);letter-spacing:-0.04em;line-height:1.02;margin:0 0 24px}
.ty h1 em{font-family:var(--f-serif);font-style:italic;font-weight:400}
.ty p{color:var(--ink-2);font-size:18px;line-height:1.6;margin:0 0 32px}
.ty .ty-back{font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:10px;border-bottom:2px solid var(--ink);padding-bottom:3px}
.ty .ty-back .arrow{transition:transform .15s ease}
.ty .ty-back:hover .arrow{transform:translateX(3px)}