/* ask.css — enquiry form page. Page-scoped, like pricing.css.
 * Tokens only; mirrors the component system in base.css. */

.ask { max-width: var(--measure); }
.ask__head { margin-bottom: var(--s7); }

.ask__form { display: grid; gap: var(--s5); }

.field { display: grid; gap: var(--s2); }
.field__label {
  font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.field__opt { letter-spacing: 0; text-transform: none; }
.field__hint { color: var(--muted); font-size: var(--fs-cap); }
.field__error { color: var(--accent); font-size: var(--fs-cap); font-weight: 500; }

/* invalid field — accent border + ring, matching the error-note styling below */
.field--error .input,
.field--error .textarea { border-color: var(--accent); }
.field--error .input:focus,
.field--error .textarea:focus { box-shadow: 0 0 0 3px rgba(12, 74, 114, .14); }

.input, .textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand-2);
  box-shadow: 0 0 0 3px rgba(12, 74, 114, .14);   /* brand-deep, matching base.css shadows */
}
.textarea { resize: vertical; min-height: 9.5rem; }

/* honeypot — kept in the DOM for bots, removed from view and the tab order */
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ask__consent { color: var(--muted); font-size: var(--fs-cap); }

.ask__actions { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; margin-top: var(--s2); }
.ask__alt { font-size: var(--fs-cap); color: var(--muted); }
.ask__alt:hover { color: var(--accent); }

.form-note {
  font-size: var(--fs-body);
  border-radius: var(--radius-sm);
  padding: var(--s4) var(--s5);
  border: 1px solid var(--line);
}
.form-note--ok { background: var(--surface); color: var(--ink); border-left: 3px solid var(--accent); }
.form-note--err { background: var(--bg); color: var(--accent); border-color: var(--accent); }