/* Contact form on /contact/ (the page also loads legal.css for its layout). */
.cf{display:grid;gap:18px;margin-top:22px;padding:26px;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:var(--shadow)}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cf-field{display:grid;gap:7px;min-width:0}
.cf-field label{font-size:14px;font-weight:600;color:var(--text)}
.cf-field label .opt{font-weight:400;color:var(--faint)}
.cf input,.cf select,.cf textarea{width:100%;box-sizing:border-box;font:inherit;font-size:15px;color:var(--text);background:var(--bg);border:1px solid var(--border-strong);border-radius:11px;padding:11px 14px;transition:border-color .15s,box-shadow .15s}
.cf select{appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px}
.cf textarea{min-height:170px;resize:vertical;line-height:1.55}
.cf input::placeholder,.cf textarea::placeholder{color:var(--faint)}
.cf input:focus,.cf select:focus,.cf textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.cf [aria-invalid="true"]{border-color:var(--bad)}
.cf [aria-invalid="true"]:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--bad) 22%,transparent)}
.cf-err{margin:0;color:var(--bad);font-size:13.5px;font-weight:600}
.cf-err[hidden]{display:none}
.cf-meta{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.cf-count{margin-left:auto;font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.cf-note{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.cf-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cf-submit{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border:0;border-radius:11px;background:#2563eb;color:#fff;font:inherit;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 6px 20px -8px #2563eb;transition:transform .15s,background .15s}
.cf-submit:hover{background:#1d4ed8;transform:translateY(-1px)}
.cf-submit:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.cf-submit[disabled]{opacity:.7;cursor:progress;transform:none}
.cf-submit svg{width:17px;height:17px}
.cf-status{margin:0;font-size:14px;color:var(--muted)}
.cf-status.is-error{color:var(--bad);font-weight:600}
/* Honeypot: off-screen for people, still in the form for bots. */
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-notice,.cf-done{margin-top:22px;padding:18px 20px;border-radius:14px;border:1px solid;font-size:15px;line-height:1.55}
.cf-notice p,.cf-done p{margin:0}
.cf-notice.ok,.cf-done{border-color:color-mix(in srgb,var(--good) 45%,transparent);background:color-mix(in srgb,var(--good) 10%,transparent)}
.cf-notice.bad{border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:color-mix(in srgb,var(--bad) 8%,transparent)}
.cf-done h3{margin:0 0 6px;font-size:18px}
.cf-done:focus{outline:none}
.cf-done[hidden]{display:none}
@media (max-width:640px){
  .cf{padding:18px;border-radius:16px}
  .cf-row{grid-template-columns:1fr}
  .cf-submit{width:100%}
}
/* The page's prose/button styles are more specific than the rules above: make the form's own win. */
.cwc-page .cf button.cf-submit{background:#2563eb;color:#fff;border:0}
.cwc-page .cf button.cf-submit:hover{background:#1d4ed8;color:#fff}
.cwc-page .cf .cf-err,.cwc-page .cf p.cf-status.is-error{color:var(--bad,#dc2626)}
.cwc-page .cf p.cf-note,.cwc-page .cf p.cf-status{color:var(--muted)}
.cwc-page .cf .cf-count{color:var(--faint)}