/* ==========================================================================
   PAGES/CONTACT.CSS
   Styles unique to contact.html. The content doc explicitly specifies
   "NO HEADER IMAGE" for this page, so instead of the photographic
   .page-header banner used on About/Projects, this is a solid navy colour
   band — same brand-forward hero feel, no invented imagery.
   ========================================================================== */

.contact-hero {
  background-color: var(--color-navy);
  color: var(--color-white);
  padding-block: var(--space-section-lg);
}

.contact-hero h1 {
  color: var(--color-white);
}

.contact-hero__subheading {
  font-size: var(--font-size-lg);
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

.contact-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

/* On-dark override for the secondary button — same reasoning as the
   Landing page hero: the base navy-outline secondary button would be
   invisible against this navy background, so it's restyled to a white
   outline here specifically. */
.contact-hero .btn--secondary {
  border-color: var(--color-white);
  color: var(--color-white);
}

.contact-hero .btn--secondary:hover,
.contact-hero .btn--secondary:focus-visible {
  background-color: var(--color-white);
  color: var(--color-navy);
}