/* ==========================================================================
   Contact page — Phase 4 reskin
   CSS ONLY. contact_form.html is frozen: it carries form_token, js_nonce and
   the honeypot, and contact.js binds to its ids and classes. Every rule here
   restyles existing markup; none of it requires a markup change.
   Loaded after contact.css so it wins.
   ========================================================================== */

.ex-contact-hero { border-bottom: 1px solid var(--ex-line); }

/* ---------- two-column layout ------------------------------------------ */
.ex-contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
}
@media (max-width: 991.98px) { .ex-contact-layout { grid-template-columns: 1fr; } }

/* The frozen form ships inside a Bootstrap column; neutralise that so the
   grid above owns the layout. */
.ex-contact-main .col-lg-8 { width: 100%; max-width: none; flex: none; padding: 0; margin: 0; }

/* ---------- the form card ---------------------------------------------- */
.ex-contact-main .contact-form {
  background: var(--ex-surface) !important;
  border: 1px solid var(--ex-line) !important;
  border-radius: var(--ex-radius-lg) !important;
  padding: clamp(26px, 3.2vw, 44px) !important;
  margin: 0 !important;
}
.ex-contact-main .form-title {
  font-family: var(--ex-display);
  font-size: clamp(24px, 2.6vw, 32px) !important;
  letter-spacing: -0.03em;
  color: var(--ex-text-strong) !important;
  margin: 0 0 8px !important;
}
.ex-contact-main .form-subtitle {
  color: var(--ex-text-muted) !important;
  font-size: 15.5px !important;
  margin: 0 0 28px !important;
}

.ex-contact-main .form-label {
  font-family: var(--ex-mono);
  font-size: 11px !important;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ex-text-muted) !important;
  margin-bottom: 8px !important;
  font-weight: 500 !important;
}

.ex-contact-main .form-control,
.ex-contact-main .form-select {
  background: var(--ex-surface-2) !important;
  border: 1px solid var(--ex-line) !important;
  border-radius: var(--ex-radius-sm) !important;
  color: var(--ex-text-strong) !important;
  font-family: var(--ex-body);
  font-size: 15.5px !important;
  padding: 13px 16px !important;
  transition: border-color .2s var(--ex-ease), box-shadow .2s var(--ex-ease), background-color .2s var(--ex-ease);
}
.ex-contact-main .form-control::placeholder { color: var(--ex-text-muted) !important; opacity: .75; }
.ex-contact-main .form-control:hover,
.ex-contact-main .form-select:hover { border-color: var(--ex-line-strong) !important; }
.ex-contact-main .form-control:focus,
.ex-contact-main .form-select:focus {
  background: var(--ex-surface-2) !important;
  border-color: var(--ex-accent) !important;
  box-shadow: 0 0 0 3px var(--ex-accent-soft) !important;
  outline: none;
}
.ex-contact-main .form-select option { background: var(--ex-surface); color: var(--ex-text-strong); }
.ex-contact-main textarea.form-control { min-height: 150px; resize: vertical; }

/* Validation states set by contact.js — do not rename these classes. */
.ex-contact-main .form-control.is-valid,
.ex-contact-main .form-select.is-valid {
  border-color: color-mix(in srgb, var(--ex-accent-2) 55%, transparent) !important;
  background-image: none !important;
}
.ex-contact-main .form-control.is-invalid,
.ex-contact-main .form-select.is-invalid {
  border-color: #E5484D !important;
  background-image: none !important;
  box-shadow: 0 0 0 3px rgba(229, 72, 77, .13) !important;
}
.ex-contact-main .invalid-feedback { color: #E5484D; font-size: 13px; margin-top: 6px; }

/* Consent row */
.ex-contact-main .form-check { padding-left: 30px; }
.ex-contact-main .form-check-input {
  width: 18px; height: 18px; margin-left: -30px; margin-top: 2px;
  background-color: var(--ex-surface-2);
  border: 1px solid var(--ex-line-strong);
  border-radius: 5px;
}
.ex-contact-main .form-check-input:checked {
  background-color: var(--ex-accent);
  border-color: var(--ex-accent);
}
.ex-contact-main .form-check-input:focus {
  box-shadow: 0 0 0 3px var(--ex-accent-soft);
  border-color: var(--ex-accent);
}
.ex-contact-main .form-check-label { color: var(--ex-text-muted) !important; font-size: 14.2px !important; }

/* Submit */
.ex-contact-main button[type="submit"] {
  width: 100%;
  margin-top: 6px;
  padding: 15px 30px !important;
  font-size: 16px !important;
}
.ex-contact-main button[type="submit"].btn-success {
  background: color-mix(in srgb, var(--ex-accent-2) 88%, black) !important;
  color: #fff !important;
}
.ex-contact-main button[type="submit"]:disabled { opacity: .7; }

/* The honeypot must stay off-screen, never display:none — some bots skip
   display:none fields. contact.css defines .hp-field; this re-asserts it in
   case load order ever changes. */
.ex-contact-main .hp-field {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none;
}

/* ---------- aside ------------------------------------------------------- */
.ex-contact-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 104px; }
@media (max-width: 991.98px) { .ex-contact-aside { position: static; } }

.ex-aside-card {
  background: var(--ex-surface);
  border: 1px solid var(--ex-line);
  border-radius: var(--ex-radius);
  padding: clamp(22px, 2.4vw, 28px);
}
.ex-aside-quiet { background: var(--ex-bg-alt); }

.ex-contact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.ex-contact-list li { display: flex; gap: 13px; align-items: flex-start; }
.ex-contact-list b {
  display: block; color: var(--ex-text-strong);
  font-size: 13.5px; font-weight: 600; margin-bottom: 3px;
}
.ex-contact-list span:last-child { color: var(--ex-text-muted); font-size: 14.6px; line-height: 1.55; }
.ex-contact-list em { font-style: normal; font-size: 13px; opacity: .82; }
.ex-contact-ico {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ex-accent-soft); color: var(--ex-accent);
  border: 1px solid color-mix(in srgb, var(--ex-accent) 24%, transparent);
  font-size: 14px;
}

.ex-next-steps { list-style: none; padding: 0; margin: 0; counter-reset: step; display: grid; gap: 14px; }
.ex-next-steps li {
  counter-increment: step; position: relative; padding-left: 34px;
  color: var(--ex-text-muted); font-size: 14.6px; line-height: 1.55;
}
.ex-next-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font-family: var(--ex-mono); font-size: 11px; letter-spacing: .06em;
  color: var(--ex-accent);
}
.ex-next-steps b { color: var(--ex-text-strong); font-weight: 600; }

/* ---------- FAQ (native details/summary — no JS needed) ----------------- */
.ex-faq { display: flex; flex-direction: column; gap: 10px; max-width: 900px; }
.ex-faq-item {
  background: var(--ex-surface);
  border: 1px solid var(--ex-line);
  border-radius: var(--ex-radius);
  overflow: hidden;
  transition: border-color .25s var(--ex-ease), background-color .25s var(--ex-ease);
}
.ex-faq-item:hover { border-color: var(--ex-line-strong); }
.ex-faq-item[open] { background: var(--ex-surface-hover); border-color: var(--ex-line-strong); }
.ex-faq-item summary {
  cursor: pointer; list-style: none;
  padding: 19px clamp(20px, 2.4vw, 26px);
  font-family: var(--ex-display); font-size: clamp(16px, 1.5vw, 18.5px);
  font-weight: 600; letter-spacing: -0.02em; color: var(--ex-text-strong);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.ex-faq-item summary::-webkit-details-marker { display: none; }
.ex-faq-item summary::after {
  content: "+"; flex: none;
  font-family: var(--ex-mono); font-size: 20px; font-weight: 400;
  color: var(--ex-accent); line-height: 1;
  transition: transform .25s var(--ex-ease);
}
.ex-faq-item[open] summary::after { transform: rotate(45deg); }
.ex-faq-body { padding: 0 clamp(20px, 2.4vw, 26px) 22px; }
.ex-faq-body p { color: var(--ex-text-muted); font-size: 15.4px; margin: 0; max-width: 72ch; }
@media (prefers-reduced-motion: reduce) {
  .ex-faq-item summary::after { transition: none; }
}