/* The document order is intro, form, then process, including on mobile. */
.contact-lead-layout { row-gap: 32px; align-items: start; }
.contact-lead-layout .contact-intro { grid-column: 1; grid-row: 1; }
.contact-form-column { grid-column: 2; grid-row: 1 / span 2; }
.contact-process { grid-column: 1; grid-row: 2; }
.contact-next-step { margin-top: 20px; color: var(--muted); font-size: 1rem; }
.contact-process h2 { font-size: 1.5rem; margin-bottom: 20px; }
.contact-process .steps li { padding: 20px 0; }
.contact-process .steps h3 { font-size: 1.15rem; }
.contact-process .steps p { font-size: .95rem; }
@media (max-width: 680px) {
  /* Override the shared mascot-first layout without changing other pages. */
  .hero-grid.lead-first-hero, .character-hero.lead-first-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .hero-grid.lead-first-hero > div:first-child, .character-hero.lead-first-hero > div:first-child { display: block; }
  .character-hero.lead-first-hero > .mascot-sticker { width: 210px; margin: 0; justify-self: center; }
  .hero-grid.lead-first-hero > .mascot-hero { order: initial; margin-top: 0; }
  .contact-lead-layout .contact-intro,
  .contact-lead-layout .contact-form-column,
  .contact-lead-layout .contact-process { grid-column: auto; grid-row: auto; }
}