/* static/css/landing/contact.css
   Contact page. Two columns: help + email on the left, "Get in touch" form on
   the right. Same palette as the home / results pages. Scoped under `.ct`. */

.ct {
  --ink: #1b2740; --body: #525f79; --muted: #7a879f; --primary: #274285;
  --primary-2: #2f4c97; --line: #e4e9f4;
  font-family: "Inter", system-ui, sans-serif; color: #2b3242;
  padding: 64px 0 90px;
}
.ct-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: start; }

/* Left */
.ct-title { font-size: clamp(2rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 0; }
.ct-intro { font-size: 1.05rem; line-height: 1.6; color: var(--body); margin: 18px 0 0; max-width: 40ch; }
.ct-info-block { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.ct-info-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.ct-info-item { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.ct-info-ic {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; background: #eef2fb;
  color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
}
.ct-info-key { display: block; font-size: 12px; font-weight: 700; color: var(--ink); }
.ct-info-val { display: block; font-size: 15px; color: var(--body); margin-top: 2px; }
.ct-info-item:hover .ct-info-val { color: var(--primary); }

/* Right: form card */
.ct-form-card {
  background: #fff; border: 1px solid #e6ebf6; border-radius: 20px;
  padding: 36px; box-shadow: 0 10px 34px rgba(39,66,133,.06);
}
.ct-form-heading { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 0 0 22px; }

.ct-field { margin-bottom: 16px; }
.ct-field input, .ct-field textarea {
  width: 100%; border: 1px solid #dbe3f2; border-radius: 12px; background: #fff;
  padding: 15px 16px; font-family: inherit; font-size: 15px; color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease; resize: vertical;
}
.ct-field textarea { min-height: 150px; }
.ct-field input::placeholder, .ct-field textarea::placeholder { color: #9aa6bf; }
.ct-field input:focus, .ct-field textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(39,66,133,.12);
}

.ct-submit {
  width: 100%; height: 54px; border: 0; border-radius: 12px; background: var(--primary);
  color: #fff; font-family: inherit; font-size: 15.5px; font-weight: 700; cursor: pointer;
  box-shadow: 0 10px 26px rgba(39,66,133,.24); transition: background .18s ease, transform .18s ease;
}
.ct-submit:hover { background: var(--primary-2); transform: translateY(-1px); }
.ct-submit:focus-visible { outline: 3px solid #bed2ff; outline-offset: 2px; }

/* Honeypot: visually removed but present for bots */
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Success + error states */
.ct-success {
  display: none; align-items: flex-start; gap: 12px;
  background: #eaf6ef; border: 1px solid #cde9d9; border-radius: 12px;
  padding: 16px 18px; margin-bottom: 20px;
}
.ct-success.is-visible { display: flex; }
.ct-success-ic { color: #2b6b45; font-size: 20px; line-height: 1.4; }
.ct-success p { margin: 0; font-size: 14px; line-height: 1.55; color: #2b5741; }

.ct-error {
  background: #fdeeee; border: 1px solid #f6d2d2; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 20px; font-size: 14px; color: #a23a3a;
}

.ct-form.is-hidden { display: none; }

/* Responsive */
@media (max-width: 860px) {
  .ct { padding: 44px 0 70px; }
  .ct-grid { grid-template-columns: 1fr; gap: 36px; }
  .ct-form-card { padding: 28px 22px; }
}