/* ============================================
   CONTACT PAGE
   ============================================ */

.contact-hero{
  padding: 72px 0 20px;
  background: linear-gradient(180deg, var(--cream-deep), var(--cream) 60%);
}
.contact-hero h1{ font-size: clamp(34px, 4.6vw, 48px); margin-top: 14px; }

.contact-grid{
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap: 40px;
  align-items: start;
}

.contact-card{
  background: var(--white);
  border-radius: var(--radius-soft);
  box-shadow: var(--shadow-card);
  padding: 44px;
}
.contact-card h3{ font-size: 24px; margin-bottom: 26px; }

.field{ margin-bottom: 20px; }
.field label{
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: var(--teal-deep);
  margin-bottom: 8px;
}
.field input, .field select, .field textarea{
  width: 100%;
  font-family: var(--font-body);
  font-size: 15.5px;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1.5px solid rgba(58,53,48,0.14);
  background: var(--cream);
  color: var(--ink);
  resize: vertical;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none;
  border-color: var(--coral);
  background: var(--white);
}

.form-status{
  margin-top: 16px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--teal-deep);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.form-status.show{ opacity: 1; }

.contact-side{ display: flex; flex-direction: column; gap: 20px; }
.contact-info-card{
  background: var(--white);
  border-radius: 22px;
  box-shadow: var(--shadow-card);
  padding: 26px 28px;
}
.contact-info-card h4{
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral-deep);
  margin-bottom: 8px;
}
.contact-info-card a{
  font-weight: 700;
  color: var(--teal-deep);
  font-size: 16px;
}
.contact-info-card p{ font-size: 15px; margin: 0; }

@media (max-width: 820px){
  .contact-grid{ grid-template-columns: 1fr; }
  .contact-card{ padding: 32px 24px; }
}