/* ============================================================
   Broker Genius — contact.css
   Converted from Claude Design "Contact"
   ============================================================ */

/* ============================================================
   Hero: dark info panel + message form
   ============================================================ */
.chero { border-bottom: 2px solid var(--ink); background: var(--paper); padding: 64px 28px 0; }

.chero__grid > * { min-width: 0; }
.chero__grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  border: 2px solid var(--ink);
  border-bottom: none;
}

/* --- Left: dark panel --- */
.chero__panel { background: var(--ink); color: #fff; padding: 44px 40px 48px; }

.chero__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 600 11.5px var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  padding: 7px 12px;
}
.chero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: bg-blink 1.8s ease-in-out infinite;
}

.chero__title {
  font-size: 76px;
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-weight: 700;
  font-stretch: 94%;
  margin-top: 24px;
}

.chero__blurb { font-size: 18px; line-height: 1.6; color: var(--sand-2); margin-top: 18px; max-width: 34ch; }

.chero__details { margin-top: 36px; display: flex; flex-direction: column; border-top: 1px solid rgba(255, 255, 255, 0.25); }
.chero__detail { padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
.chero__detail-k { font: 600 10.5px var(--font-mono); letter-spacing: 0.12em; color: var(--accent); }
.chero__detail-v { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin-top: 7px; }

.chero__socials { display: flex; gap: 10px; margin-top: 22px;   flex-wrap: wrap;
}
.chero__social {
  font: 600 11px var(--font-mono);
  letter-spacing: 0.1em;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  padding: 8px 12px;
}
.chero__social:hover { border-color: var(--accent); color: var(--accent); }

/* --- Right: message form --- */
.cform { background: var(--card); padding: 44px 40px 48px; }

.cform__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 12px;
  font: 600 11px var(--font-mono);
  letter-spacing: 0.12em;
}
.cform__status { color: var(--brown); }

.cform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }

.cform__field { display: flex; flex-direction: column; gap: 7px; }
.cform__field--stack { margin-top: 16px; }
.cform__label { font: 600 10.5px var(--font-mono); letter-spacing: 0.11em; color: #6A6F7E; }

.cform input:not([type="checkbox"]),
.cform select,
.cform textarea {
  font: 400 15px var(--font-sans);
  padding: 12px 13px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  outline: none;
}
.cform textarea { resize: vertical; }
.cform input:not([type="checkbox"]):focus,
.cform textarea:focus { background: var(--card); box-shadow: 3px 3px 0 var(--accent); }

.cform__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.cform__accept { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.cform__accept input { width: 18px; height: 18px; accent-color: var(--ink); }
.cform__accept a { text-decoration: underline; }

.cform__submit {
  font: 700 15px var(--font-sans);
  padding: 14px 30px;
  border: 2px solid var(--ink);
  background: var(--accent);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
}
.cform__submit:hover { box-shadow: 1px 1px 0 var(--ink); }
.cform__submit.is-sent { background: var(--ink); color: var(--accent); }

/* ============================================================
   Routes (sales / support / demo)
   ============================================================ */
.croutes { border-bottom: 2px solid var(--ink); background: var(--tint); padding: 56px 28px; }
.croutes__grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.croute { display: block; border: 2px solid var(--ink); background: var(--card); padding: 26px; }
.croute:hover { box-shadow: 6px 6px 0 var(--accent); }
.croute__tag { font: 600 10.5px var(--font-mono); letter-spacing: 0.12em; color: var(--brown); }
.croute__title { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; margin-top: 10px; color: var(--ink); }
.croute__body { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin-top: 8px; }

/* ============================================================
   Free-trial band (yellow)
   ============================================================ */
.trial-band { border-bottom: 2px solid var(--ink); padding: 88px 28px; background: var(--accent); }
.trial-band__inner { max-width: 820px; margin: 0 auto; text-align: center; }
.trial-band__title {
  font-size: 58px;
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 700;
  font-stretch: 92%;
  text-wrap: balance;
}
.trial-band__sub { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-top: 12px; }
.trial-band__blurb { font-size: 16px; line-height: 1.6; color: #4A3A10; margin: 18px auto 0; max-width: 54ch; }
.trial-band__cta {
  display: inline-block;
  margin-top: 28px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: var(--ink);
  padding: 16px 30px;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--card);
}
.trial-band__cta:hover { color: var(--accent); box-shadow: 1px 1px 0 var(--card); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .chero__grid { grid-template-columns: minmax(0, 1fr); }
  .chero__title { font-size: 60px; }
  .croutes__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .chero__title { font-size: 44px; }
  .chero__panel, .cform { padding: 32px 24px 36px; }
  .cform__grid { grid-template-columns: minmax(0, 1fr); }
  .trial-band__title { font-size: 40px; }
}

/* ============================================================
   Contact Form 7 (WordPress) — match the design's form fields
   ============================================================ */
.cform .wpcf7 { margin-top: 24px; }
.cform .wpcf7 p { margin: 0 0 16px; }

.cform .wpcf7 label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font: 600 10.5px var(--font-mono);
  letter-spacing: 0.11em;
  color: #6A6F7E;
  text-transform: uppercase;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 textarea,
.wpcf7 select {
  display: block;
  width: 100%;
  font: 400 15px var(--font-sans);
  padding: 12px 13px;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.wpcf7 textarea { resize: vertical; }

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
  background: var(--card);
  box-shadow: 3px 3px 0 var(--accent);
}

.wpcf7 input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ink); }

.wpcf7-submit {
  font: 700 15px var(--font-sans);
  padding: 14px 30px;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--accent);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
}
.wpcf7-submit:hover { box-shadow: 1px 1px 0 var(--ink); }

/* Validation + response output in the same mono voice */
.wpcf7 .wpcf7-not-valid-tip {
  font: 600 10.5px var(--font-mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--brown);
  margin-top: 6px;
}
.wpcf7 .wpcf7-response-output {
  margin: 18px 0 0;
  padding: 12px 13px;
  border: 2px solid var(--ink);
  font: 600 11px var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--card);
}

/* The live CF7 form's submit is a custom button (old theme markup) — style it like the design CTA. */
.wpcf7 button[type="submit"],
.wpcf7 .special-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 15px var(--font-sans);
  color: var(--ink);
  background: var(--accent);
  padding: 14px 26px;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  margin-top: 6px;
}
.wpcf7 button[type="submit"]:hover,
.wpcf7 .special-btn:hover {
  background: var(--accent-deep);
  box-shadow: 1px 1px 0 var(--ink);
}