/* ─────────────────────────────────────────────
   Contact Page — scoped under .contact-page
   Works alongside css/home.css (body has both
   .home and .contact-page classes)
   ───────────────────────────────────────────── */

/* ─── Contact Intro ─── */
.contact-page .contact-intro {
  padding: 160px 0 48px;
  text-align: center;
}

.contact-page .contact-intro__inner .label {
  margin-bottom: 20px;
}

.contact-page .contact-intro__heading {
  font-family: 'Lora', serif;
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #1C1C1E;
  margin-bottom: 24px;
}

.contact-page .contact-intro__sub {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #6B7280;
  max-width: 620px;
  margin: 0 auto;
}

.contact-page .contact-intro__handle {
  color: #2D6A4F;
  font-weight: 600;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity 0.2s ease;
}

.contact-page .contact-intro__handle:hover {
  opacity: 0.7;
}

/* ─── Contact Form ─── */
.contact-page .contact-form-section {
  padding: 40px 0 140px;
}

.contact-page .contact-form-card {
  background: #FFFFFF;
  border: 1px solid #F0F0F0;
  border-radius: 2px;
  padding: clamp(40px, 5vw, 64px);
}

.contact-page .contact-form-card .label {
  margin-bottom: 16px;
}

.contact-page .contact-form__heading {
  font-family: 'Lora', serif;
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #1C1C1E;
  margin-bottom: 12px;
}

.contact-page .contact-form__sub {
  font-size: 1rem;
  color: #6B7280;
  margin-bottom: 40px;
}

.contact-page .contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-page .contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.contact-page .contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-page .contact-form__field span {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6B7280;
}

.contact-page .contact-form__field input,
.contact-page .contact-form__field textarea {
  font-family: 'Manrope', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #1C1C1E;
  padding: 14px 16px;
  border: 1px solid #E5E7EB;
  background: #FFFFFF;
  border-radius: 2px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

.contact-page .contact-form__field textarea {
  resize: vertical;
  min-height: 140px;
}

.contact-page .contact-form__field input:focus,
.contact-page .contact-form__field textarea:focus {
  border-color: #2D6A4F;
  box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.12);
}

.contact-page .contact-form button[type="submit"] {
  align-self: flex-start;
  margin-top: 8px;
}

.contact-page .contact-form__status {
  font-size: 0.9375rem;
  color: #6B7280;
  min-height: 1.2em;
  margin-top: 4px;
}

.contact-page .contact-form__status--success {
  color: #2D6A4F;
  font-weight: 600;
}

.contact-page .contact-form__status--error {
  color: #B91C1C;
  font-weight: 600;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .contact-page .contact-intro { padding: 120px 0 32px; }
  .contact-page .contact-form-section { padding: 32px 0 80px; }
  .contact-page .contact-form__row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .contact-page .contact-intro__heading { font-size: 2rem; }
}