/* ─── Contact Hero ─────────────────────────────────────── */
.contact-hero {
  background: var(--ink);
  padding: 160px 80px 80px;
  text-align: center;
}

.contact-hero-inner {
  max-width: 640px;
  margin: 0 auto;
}

.contact-hero .eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 28px;
}

.contact-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin-bottom: 24px;
}

.contact-sub {
  font-size: 17px;
  color: var(--ash);
  line-height: 1.65;
  max-width: 520px;
  margin: 0 auto;
}

/* ─── Form Section ──────────────────────────────────────── */
.contact-section {
  background: var(--cream);
  padding: var(--space-lg) 80px var(--space-xl);
  max-width: 720px;
  margin: 0 auto;
}

#lead-form,
.contact-success {
  background: var(--stone);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  padding: 40px;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.form-row:last-of-type {
  margin-bottom: 32px;
}

.form-row label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--copper-dark);
}

.form-row input,
.form-row select,
.form-row textarea {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text);
  background: var(--cream);
  border: 1px solid var(--stone);
  border-radius: 8px;
  padding: 12px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.form-row textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

.form-row select {
  background-image: linear-gradient(45deg, transparent 50%, var(--copper) 50%),
                    linear-gradient(135deg, var(--copper) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 12px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--copper);
  box-shadow: 0 0 0 3px rgba(200,117,51,0.18);
}

.field-error {
  font-size: 13px;
  color: var(--copper-dark);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.contact-error {
  font-size: 14px;
  color: var(--copper-dark);
  font-weight: 500;
  text-align: center;
  margin: 0 0 16px 0;
}

.submit-btn {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: transparent;
  color: var(--copper);
  border: 1px solid var(--copper);
  padding: 16px 24px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.submit-btn:hover {
  background: var(--copper);
  color: var(--cream);
}

.submit-btn:active {
  transform: translateY(1px);
}

/* ─── Success State ─────────────────────────────────────── */
.contact-success {
  display: none;
  text-align: center;
  border: 1px solid var(--copper);
}

.contact-success.is-visible {
  display: block;
}

.success-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 16px;
}

.contact-success h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 16px;
}

.success-body {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 460px;
  margin: 0 auto;
}

/* ─── Reassurance ───────────────────────────────────────── */
.contact-reassure {
  margin-top: 32px;
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .contact-hero { padding: 120px 32px 60px; }
  .contact-section { padding: var(--space-md) 32px var(--space-lg); }
  #lead-form, .contact-success { padding: 28px; }
}