/* Contact: big accent-colored card with the call to action, on a color-1 section with scalloped top and bottom edges */

.contact-section { --scallop: var(--color-1); background: var(--color-1); }
.contact-card {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding: 56px 22px 46px;
  border: var(--line);
  border-radius: 32px;
  background: var(--accent);
  box-shadow: 7px 7px 0 var(--ink);
  color: var(--on-accent);
  text-align: center;
}
.contact-card h2 { margin-bottom: 18px; text-wrap: balance; font-size: clamp(2.8rem, 6vw, 4.8rem); color: var(--on-accent); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--ink); }
.contact-card > p:not(.eyebrow) { max-width: 500px; margin: 0 auto 30px; font-size: 1.12rem; font-weight: 600; }
.contact-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.contact-spark { position: absolute; animation: twinkle 2.6s ease-in-out infinite; }
.contact-spark-1 { top: 28px; left: 9%; width: 36px; }
.contact-spark-2 { bottom: 34px; right: 12%; width: 26px; animation-delay: -1.2s; }
.contact-sticker-1 { top: -30px; right: 7%; width: 66px; animation: bob 4s ease-in-out infinite; }
.contact-sticker-2 { bottom: -30px; left: 5%; width: 56px; animation: bob 4.6s ease-in-out -1.5s infinite; }

@media (min-width: 681px) {
  .contact-card { padding: 70px 40px 56px; border-radius: 48px; box-shadow: 10px 10px 0 var(--ink); }
  .contact-sticker-1 { top: -36px; width: 86px; }
  .contact-sticker-2 { width: 74px; }
}