/* ============================================================
   i2X - Contact page
   Concept C: brand-aligned light palette.
   Navy #212B55 · Blue #3A4A9A · Yellow #FFED00 · Cream #FAFBFD
   ============================================================ */

/* ── Inline link (body text) ──────────────────────────────── */
.ct-inline-link {
  color: #3A4A9A;
  font-weight: 500;
  border-bottom: 1px dotted #3A4A9A;
  text-decoration: none;
  transition: color 160ms;
}
.ct-inline-link:hover { color: #212B55; border-bottom-style: solid; }

/* ── Form + info two-column layout ────────────────────────── */
.ct-form-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  align-items: flex-start;
}

/* ── Info sidebar cards ────────────────────────────────────── */
.ct-info-stack { display: flex; flex-direction: column; gap: 16px; }
.ct-info-card {
  background: #FFFFFF;
  border: 1px solid #E4E7F0;
  border-radius: 12px;
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.ct-info-card-h {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #6B7596;
}
.ct-info-card-body {
  font-size: 13px; line-height: 1.6;
  color: #3A4565;
}
.ct-info-card-body strong { color: #212B55; font-weight: 600; }
.ct-strong { color: #212B55; font-weight: 700; }

.ct-info-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  color: #3A4A9A; text-decoration: none;
  transition: color 160ms;
  padding: 6px 0;
}
.ct-info-link:hover { color: #212B55; }

.ct-process { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.ct-process-step {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; line-height: 1.5; color: #3A4565;
}
.ct-process-n {
  flex-shrink: 0; width: 22px; height: 22px;
  border-radius: 50%;
  background: #E8EAF5;
  display: flex; align-items: center; justify-content: center;
  font-family: "Red Hat Mono", monospace;
  font-size: 10px; font-weight: 700; color: #3A4A9A;
  margin-top: 1px;
}

/* ── Flash messages ────────────────────────────────────────── */
.ct-flash {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 22px; border-radius: 10px;
  margin-bottom: 24px; font-size: 14px; line-height: 1.5;
}
.ct-flash--success {
  background: rgba(47,168,91,0.10);
  border: 1px solid rgba(47,168,91,0.25);
  color: #1B7A3F;
}
.ct-flash--error {
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.18);
  color: #B91C1C;
}

/* ── Channel cards grid ────────────────────────────────────── */
.ct-channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ct-channel {
  background: #FFFFFF;
  border: 1px solid #E4E7F0;
  border-radius: 12px; padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color 200ms, transform 200ms, box-shadow 200ms;
}
.ct-channel:hover {
  border-color: #6472BE;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -16px rgba(33,43,85,0.18);
}
.ct-channel-icon {
  width: 40px; height: 40px; border-radius: 8px;
  background: #E8EAF5;
  display: flex; align-items: center; justify-content: center;
  color: #3A4A9A; flex-shrink: 0;
}
.ct-channel-t {
  font-size: 16px; font-weight: 700;
  color: #212B55; margin: 0;
}
.ct-channel-p {
  font-size: 13px; line-height: 1.55;
  color: #6B7596; margin: 0; flex: 1;
}
.ct-channel-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  color: #3A4A9A; text-decoration: none;
  border-bottom: 1px dotted #3A4A9A;
  transition: color 160ms, border-color 160ms;
  align-self: flex-start;
}
.ct-channel-link:hover { color: #212B55; border-color: #212B55; border-bottom-style: solid; }

/* ── Contact card: direct e-mail contact in place of the former forms ── */
.ct-contact-card {
  background: #FFFFFF;
  border: 1px solid #E4E7F0;
  border-radius: 12px;
  padding: 28px 30px;
  display: flex; flex-direction: column; gap: 14px;
}
.ct-contact-mail {
  align-self: flex-start;
  font-size: clamp(20px, 2.4vw, 28px); font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.2;
  color: #212B55; text-decoration: none;
  border-bottom: 2px solid #FFED00;
  overflow-wrap: anywhere;
  transition: color 160ms, border-color 160ms;
}
.ct-contact-mail:hover { color: #3A4A9A; border-color: #3A4A9A; }
.ct-contact-p { font-size: 14px; line-height: 1.6; color: #3A4565; margin: 0; }
.ct-contact-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ct-contact-option {
  display: inline-flex; align-items: center;
  padding: 7px 14px; border-radius: 999px;
  background: #F2F4FB; border: 1px solid #C4C8D8;
  font-size: 13px; font-weight: 500; color: #3A4565;
  text-decoration: none;
  transition: border-color 160ms, color 160ms;
}
.ct-contact-option:hover { border-color: #3A4A9A; color: #3A4A9A; }
.ct-sig-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ct-sig-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 16px; border-radius: 10px;
  background: #FAFBFD; border: 1px solid #E4E7F0;
}
.ct-sig-item small { font-size: 12px; line-height: 1.5; color: #6B7596; }

@media (max-width: 900px) {
  .ct-form-layout { grid-template-columns: 1fr; }
  .ct-channels    { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .ct-channels { grid-template-columns: 1fr; }
}