/* Hope Money — Contact form section. */

.hope-contact {
  --hc-cream:    #FAF7F2;
  --hc-white:    #FFFFFF;
  --hc-navy:     #002060;
  --hc-navy-ink: #0A1D47;
  --hc-orange:   #FE5E1A;
  --hc-muted:    #6B7280;
  --hc-hairline: #EEE8DC;
  --hc-error:    #B91C1C;
  --hc-success:  #047857;

  background: var(--hc-cream);
  color: var(--hc-navy-ink);
  font-family: 'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  position: relative;
  box-sizing: border-box;
}

.hope-contact__stage {
  max-width: 760px;
  margin: 0 auto;
  padding: 88px clamp(20px, 4vw, 40px) 96px;
  box-sizing: border-box;
}

.hope-contact__head { text-align: center; max-width: 560px; margin: 0 auto 32px; }
.hope-contact__eyebrow {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--hc-orange);
  margin: 0 0 12px;
}
.hope-contact__title {
  font-family: 'Fraunces','Times New Roman',serif;
  font-size: 48px; font-weight: 500;
  letter-spacing: -1.4px; line-height: 1.05;
  color: var(--hc-navy); margin: 0;
}
.hope-contact__intro {
  font-size: 16px; font-weight: 500;
  line-height: 1.55;
  color: var(--hc-muted);
  margin: 12px 0 0;
}

.hope-contact__card {
  background: var(--hc-white);
  border: 1px solid var(--hc-hairline);
  border-radius: 22px;
  padding: 32px clamp(20px, 3vw, 36px);
  box-shadow: 0 12px 32px -16px rgba(10, 29, 71, 0.10);
}

.hope-contact__form { display: grid; gap: 20px; }
.hope-contact__row { display: grid; gap: 6px; }
.hope-contact__row--double {
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.hope-contact__row--double > .hope-contact__field { display: grid; gap: 6px; }

.hope-contact__label {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--hc-muted);
  text-transform: uppercase;
}
.hope-contact__label .req { color: var(--hc-orange); margin-left: 2px; }

.hope-contact__input,
.hope-contact__textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--hc-hairline);
  border-radius: 10px;
  background: var(--hc-cream);
  font: 500 15px/1.5 'Inter',sans-serif;
  color: var(--hc-navy-ink);
  transition: border-color .15s, background .15s, box-shadow .15s;
  box-sizing: border-box;
}
.hope-contact__input:focus,
.hope-contact__textarea:focus {
  outline: none;
  border-color: var(--hc-navy);
  background: var(--hc-white);
  box-shadow: 0 0 0 3px rgba(0, 32, 96, 0.10);
}
.hope-contact__textarea { resize: vertical; min-height: 140px; font-family: 'Inter',sans-serif; }

/* Honeypot — hidden from real users */
.hope-contact__honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.hope-contact__actions {
  display: flex; align-items: center; gap: 16px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.hope-contact__submit {
  font-family: 'Inter',sans-serif;
  font-size: 14px; font-weight: 600;
  color: #fff;
  background: var(--hc-navy-ink);
  border: 0;
  padding: 14px 26px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
  transition: transform .15s, box-shadow .15s, opacity .15s;
}
.hope-contact__submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -10px rgba(10, 29, 71, 0.4);
}
.hope-contact__submit[disabled] { opacity: 0.55; cursor: progress; transform: none; box-shadow: none; }

.hope-contact__status {
  font-size: 14px; font-weight: 500; line-height: 1.4;
  margin: 0;
}
.hope-contact__status[data-state="error"]   { color: var(--hc-error); }
.hope-contact__status[data-state="success"] { color: var(--hc-success); }

.hope-contact__success {
  display: none;
  text-align: center;
  padding: 12px 4px;
}
.hope-contact__success-title {
  font-family: 'Fraunces',serif;
  font-size: 28px; font-weight: 500;
  letter-spacing: -0.6px;
  color: var(--hc-navy);
  margin: 0 0 8px;
}
.hope-contact__success-body {
  font-size: 15px; font-weight: 500; line-height: 1.5;
  color: var(--hc-muted);
  margin: 0;
}
.hope-contact[data-state="sent"] .hope-contact__form    { display: none; }
.hope-contact[data-state="sent"] .hope-contact__success { display: block; }

@media (max-width: 600px) {
  .hope-contact__stage { padding: 56px 20px 64px; }
  .hope-contact__title { font-size: 32px; letter-spacing: -0.8px; }
  .hope-contact__row--double { grid-template-columns: 1fr; }
  .hope-contact__card { padding: 24px 20px; border-radius: 18px; }
}