.page-hero {
  padding: 3rem 0 2rem;
}

.page-hero h1 {
  font-size: clamp(2.2rem, 4vw, 3rem);
  color: var(--deep-blue);
}

.page-hero .lead {
  font-size: 1.15rem;
  color: var(--blue);
  max-width: 700px;
}

.page-section {
  padding: 2.5rem 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5rem;
}

.contact-details {
  background: var(--white);
  padding: 1.8rem;
  border-radius: 16px;
  border: 1px solid rgba(156, 175, 136, 0.35);
  box-shadow: 0 16px 30px rgba(30, 58, 138, 0.08);
}

.contact-form {
  background: var(--white);
  padding: 1.8rem;
  border-radius: 16px;
  border: 1px solid rgba(61, 87, 137, 0.18);
}

.contact-form button {
  width: fit-content;
}

.page-hero,
.page-section {
  animation: fadeUp 0.7s ease both;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}