/* Contact page form – extends stylechain.css.
   Colours come from stylechain-tokens.css only; no hex literals here
   (see .claude/rules/stylechain-www-css.md). */

/* Compact intro under the sticky 72px nav. `.hero-sm` lives here (not in
   stylechain.css) so contact does not depend on the blog stylesheet. */
.hero-sm{padding:72px 0 28px}
.hero-sm h1{font-size:clamp(32px,4vw,44px);margin-bottom:12px}
.hero-sm p{color:var(--text-dim);max-width:640px;margin-bottom:0}
.hero-sm + .sec{padding-top:24px}

.contact-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:start}

/* ---------- form ---------- */
.contact-form{display:flex;flex-direction:column;gap:20px}
.field{display:flex;flex-direction:column;gap:7px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field label{font-size:14px;font-weight:600;color:var(--white)}
.field label span{color:var(--blue)}

.field input,
.field select,
.field textarea{
  width:100%;padding:12px 14px;border-radius:11px;
  background:var(--card);border:1px solid var(--border);color:var(--text);
  font-family:var(--body);font-size:15px;line-height:1.5;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.field textarea{resize:vertical;min-height:130px}
.field input::placeholder,
.field textarea::placeholder{color:var(--text-dim)}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px var(--blue-shadow);
}
.field input.is-invalid,
.field textarea.is-invalid{border-color:var(--error)}

.field-error{font-size:13px;color:var(--error)}

/* Honeypot – visually and programmatically out of the way, but still
   focusable-by-bot. Never display:none: some bots skip hidden inputs. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.contact-form .btn{align-self:flex-start}
.contact-form .reassure{margin-top:0}

.form-status{font-size:14px;padding:12px 14px;border-radius:11px;border:1px solid var(--border)}
.form-status.is-pending{color:var(--text-dim)}
.form-status.is-success{color:var(--white);border-color:var(--blue);background:var(--card)}
.form-status.is-error{color:var(--white);border-color:var(--error);background:var(--card)}

/* ---------- aside ---------- */
.contact-aside{display:flex;flex-direction:column;gap:18px}
.contact-aside .card{padding:22px}
.contact-aside .card h3{font-size:17px;margin-bottom:9px}
.contact-aside .card p{font-size:14px;color:var(--text-dim);line-height:1.65}
.contact-aside .card a:not(.btn){color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.contact-aside .card a:not(.btn):hover{color:var(--blue-hover)}
.contact-aside .btn{margin-top:14px}

.contact-steps{margin:0;padding-left:18px;font-size:14px;color:var(--text-dim);line-height:1.65}
.contact-steps li{margin-bottom:7px}
.contact-steps li::marker{color:var(--blue)}

@media(max-width:900px){
  .contact-layout{grid-template-columns:1fr;gap:32px}
}
@media(max-width:560px){
  .field-row{grid-template-columns:1fr;gap:20px}
}