/* Contact form. Deliberately plain: labels above fields, one column on narrow screens,
   generous targets. Nothing here is clever, because a contact form that surprises
   people is a contact form that does not get sent. */
.sts-contact{max-width:720px}
.sts-contact-head{margin:0 0 20px}
.sts-contact-title{margin:0;font-size:26px;font-weight:800;letter-spacing:-.018em;color:var(--ink)}
.sts-contact-lede{margin:6px 0 0;font-size:16px;color:var(--ink-soft)}

.sts-field-row{display:grid;gap:0 18px;grid-template-columns:1fr}
@media (min-width:620px){.sts-field-row{grid-template-columns:1fr 1fr}}
.sts-field{margin:0 0 16px;display:flex;flex-direction:column;gap:6px}
.sts-field label{font-size:13.5px;font-weight:700;color:var(--ink)}
.sts-field .req{color:var(--accent);margin-left:2px}
.sts-field .opt{font-weight:400;color:var(--ink-faint)}
.sts-field input,.sts-field select,.sts-field textarea{
  font:inherit;font-size:15.5px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:11px 13px;width:100%;
  transition:border-color .13s ease,box-shadow .13s ease}
.sts-field textarea{resize:vertical;min-height:150px;line-height:1.6}
.sts-field input:focus,.sts-field select:focus,.sts-field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}

.sts-contact-actions{margin:6px 0 0}
.sts-contact-actions .sts-btn{font-size:15.5px;padding:13px 26px}

/* The honeypot is positioned off-screen rather than display:none — some bots skip
   hidden fields, and a field they can see is a field they will fill in. */
.sts-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.sts-form-note{margin:0 0 18px;padding:13px 16px;border-radius:12px;font-size:15px;line-height:1.55}
.sts-form-note.is-ok{background:color-mix(in srgb,var(--accent) 12%,var(--surface));
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent-deep)}
.sts-form-note.is-bad{background:color-mix(in srgb,#c0392b 10%,var(--surface));
  border:1px solid color-mix(in srgb,#c0392b 34%,transparent);color:#8e2b20}
:root[data-theme="dark"] .sts-site .sts-form-note.is-bad{color:#f0a49a}