/* ---------- Page hero image ---------- */
.page-hero--contact {
  background:
    linear-gradient(rgba(8, 47, 34, 0.82), rgba(11, 63, 45, 0.86)),
    url("../../assets/images/contact-hero.jpg") 30% center / cover no-repeat,
    var(--color-green-700);
}

/* ---------- Contact layout ---------- */
.contact-layout { display: grid; gap: var(--space-2xl); align-items: start; }

.contact-aside h2 { margin-bottom: var(--space-md); }
.contact-steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: var(--space-lg); margin-top: var(--space-xl); }
.contact-steps li { counter-increment: step; position: relative; padding-left: 3.25rem; }
.contact-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-green-700); color: var(--color-gold-400);
  font-family: var(--font-heading); font-size: var(--text-base);
}
.contact-steps h3 { font-size: var(--text-base); margin-bottom: var(--space-2xs); }
.contact-steps p { font-size: var(--text-sm); color: var(--color-text-muted); }

.contact-note {
  margin-top: var(--space-xl); padding: var(--space-md) var(--space-lg); font-size: var(--text-sm);
  background: var(--color-gold-100); border-left: 4px solid var(--color-gold-500); border-radius: var(--radius-sm);
}

.contact-card {
  background: var(--color-white); border-top: 4px solid var(--color-gold-500);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-card);
  padding: var(--space-xl) var(--space-lg);
}
.contact-card > h2 { margin-bottom: var(--space-2xs); }
.contact-card-intro { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-xl); }

@media (min-width: 900px) {
  .contact-layout { grid-template-columns: 5fr 7fr; gap: var(--space-3xl); }
  .contact-card { padding: var(--space-2xl); }
  .contact-aside { position: sticky; top: 110px; }
}