/* ==========================================================================
   PRISM — Contact page (page-specific; shared components live in
   components.css / sections.css and are reused here, not redefined)
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* Contact hero — centered, text-only, same recipe as the About hero       */
/* ---------------------------------------------------------------------- */
.contact-hero {
  padding-top: clamp(2rem, 4vw, 4rem);
  padding-bottom: var(--space-8);
  position: relative;
  overflow: clip;
  text-align: center;
}
.contact-hero__inner { position: relative; z-index: 1; max-width: 700px; margin-inline: auto; }
.contact-hero__badge { margin-bottom: var(--space-5); }
.contact-hero__title { margin-bottom: var(--space-5); }
.contact-hero__title em {
  font-style: normal;
  font-weight: inherit;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.contact-hero__sub { font-size: var(--fs-lead); color: var(--ink-500); max-width: 56ch; margin-inline: auto; }

.contact-hero .bg-mesh__blob--1 { width: 360px; height: 360px; top: -120px; right: -80px; opacity: 0.32; }
.contact-hero .bg-mesh__blob--2 { width: 300px; height: 300px; bottom: -140px; left: -100px; opacity: 0.26; }
[data-theme="dark"] .contact-hero .bg-mesh__blob--1 { opacity: 0.22; }
[data-theme="dark"] .contact-hero .bg-mesh__blob--2 { opacity: 0.18; }
@media (max-width: 640px) {
  .contact-hero .bg-mesh__blob--1 { width: 240px; height: 240px; top: -70px; right: -60px; opacity: 0.28; }
  .contact-hero .bg-mesh__blob--2 { width: 200px; height: 200px; bottom: -90px; left: -70px; opacity: 0.22; }
}

/* ---------------------------------------------------------------------- */
/* Contact form + info                                                     */
/* ---------------------------------------------------------------------- */
.contact__grid { grid-template-columns: 1.1fr 0.9fr; align-items: start; }
@media (max-width: 900px) { .contact__grid { display:flex; flex-direction:column-reverse; } }

/* The form is taller than the info card, so on desktop the info card
   stays pinned in view (rather than leaving blank space beside the form)
   as the visitor scrolls through the longer form. Disabled once the grid
   collapses to a single column, where sticking would look broken. */
@media (min-width: 901px) {
  .contact-info { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
}

.contact-form-card { position: relative; }
.contact-form-card__title { margin-bottom: var(--space-5); }

.contact-info-card__title { margin-bottom: var(--space-5); }
.contact-info-card__list { margin-bottom: var(--space-5); }
.contact-info-card .divider { margin-bottom: var(--space-5); }
.contact-info-card__social { margin-top: var(--space-5); justify-content: center; }