/* Marketing — contact page. See landing/base.css. */

/* =====================================================================
   CONTACT (3c)
   ===================================================================== */
.contact-hero { padding: 38px 40px 0; max-width: 660px; margin: 0 auto; }
.contact-hero h1 { font-size: 38px; }
.contact-hero .hero-sub { font-size: 16px; max-width: 440px; margin-top: 12px; }
.contact-body { max-width: 660px; margin: 0 auto; padding: 0 40px; }
.contact-form {
  margin: 24px 0 40px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 26px;
}
.contact-form .form-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 16px;
}
.contact-form .form-cols label { margin-top: 0; }
.contact-form input, .contact-form textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  font-family: var(--font-ui);
  font-size: 15.5px;
  font-weight: 400;
  color: var(--ink);
  height: 40px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid var(--border-control);
  border-radius: 8px;
  outline: none;
}
.contact-form textarea { height: 120px; padding: 11px 12px; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(168, 100, 20, .15);
}
.contact-form button { margin-top: 18px; height: 44px; padding: 0 22px; font-size: 16px; border-color: var(--ink); }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-thanks { text-align: center; padding: 56px 36px; max-width: 460px; margin: 0 auto; }
.contact-thanks h1 { font-size: 28px; margin-top: 18px; }
.contact-thanks p {
  margin: 12px auto 0;
  font-size: 15.5px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 280px;
}
.contact-thanks .btn { margin-top: 24px; }


@media (max-width: 900px) {
  .contact-hero, .contact-body { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 640px) {
  .contact-form .form-cols { grid-template-columns: 1fr; gap: 0; }
  .contact-form .form-cols label + label { margin-top: 16px; }
}