/*
 * Canonical bottom-of-page contact highlight for TapSocial marketing pages.
 * Keep this component immediately before the site footer.
 */
.site-contact-cta {
  --contact-cta-bg: #3EE08F;
  --contact-cta-shadow: #4B3FD6;
  --contact-cta-shadow-hover: #F45FC0;
  position: relative;
  min-height: 430px;
  display: grid;
  place-items: center;
  padding: 104px 24px;
  overflow: hidden;
  color: #0A1018;
  background: var(--contact-cta-bg);
  text-align: center;
}

.site-contact-cta + .site-footer { margin-top: 0; }

.site-contact-cta[data-accent="gold"] { --contact-cta-bg: #FFB627; --contact-cta-shadow-hover: #3EE08F; }
.site-contact-cta[data-accent="cyan"] { --contact-cta-bg: #35D0EE; --contact-cta-shadow-hover: #FFB627; }
.site-contact-cta[data-accent="magenta"] { --contact-cta-bg: #F45FC0; --contact-cta-shadow-hover: #35D0EE; }

.site-contact-cta::before,
.site-contact-cta::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  border: 3px solid currentColor;
  border-radius: 50%;
  opacity: .09;
  pointer-events: none;
}

.site-contact-cta::before {
  top: -135px;
  left: -85px;
  box-shadow: 0 0 0 34px currentColor, 0 0 0 68px currentColor;
}

.site-contact-cta::after {
  right: -95px;
  bottom: -145px;
  box-shadow: 0 0 0 34px currentColor, 0 0 0 68px currentColor;
}

.site-contact-cta__inner {
  position: relative;
  z-index: 1;
  width: min(1060px, 100%);
  margin-inline: auto;
}

.site-contact-cta__kicker {
  display: block;
  margin-bottom: 18px;
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  line-height: 1.2;
  text-transform: uppercase;
}

.site-contact-cta h2 {
  max-width: 1040px;
  margin: 0 auto;
  color: #0A1018;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(48px, 7vw, 88px);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: .96;
  text-transform: none;
}

.site-contact-cta p {
  max-width: 730px;
  margin: 27px auto 0;
  color: rgba(10, 16, 24, .82);
  font-family: Inter, sans-serif;
  font-size: 18px;
  line-height: 1.65;
}

/*
 * Optional display subtitle under the headline. Bakbak sits between the Playfair
 * headline and the Inter body copy as a second beat, so it is sized well below
 * the headline and never competes with it.
 * More specific than the `.site-contact-cta p` rule it has to override.
 */
.site-contact-cta .site-contact-cta__lead {
  max-width: none;
  margin: 17px auto 0;
  color: #0A1018;
  font-family: "Bakbak One", sans-serif;
  font-size: clamp(19px, 2.2vw, 28px);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.06;
  text-transform: uppercase;
}

.site-contact-cta .site-contact-cta__lead + p {
  margin-top: 18px;
}

/*
 * Optional prompt list: three questions the visitor wants answered, sitting
 * between the copy and the button. Deliberately quiet — hairline rules and a
 * small brand marker, no face and no shadow, so the only solid object in this
 * section stays the button. Only renders on pages that include the markup.
 */
.site-contact-cta__prompts {
  width: min(560px, 100%);
  margin: 30px auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
  border-top: 1px solid rgba(10, 16, 24, .16);
}

.site-contact-cta__prompt {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 15px 2px;
  border-bottom: 1px solid rgba(10, 16, 24, .16);
  color: rgba(10, 16, 24, .88);
  font-family: Inter, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
}

.site-contact-cta__prompt::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  /* optical centre of the first line, not the top of the box */
  margin-top: .48em;
  background: var(--prompt-marker);
}

/* Deep palette markers — they hold up on every accent this section ships with. */
.site-contact-cta__prompt:nth-child(1) { --prompt-marker: #4B3FD6; }
.site-contact-cta__prompt:nth-child(2) { --prompt-marker: #7D2E7A; }
.site-contact-cta__prompt:nth-child(3) { --prompt-marker: #0E6E8C; }

.site-contact-cta__button {
  min-width: 245px;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 31px;
  padding: 16px 24px;
  border: 0;
  color: #fff;
  background: #0A1018;
  box-shadow: 8px 8px 0 var(--contact-cta-shadow);
  transform: rotate(-1deg);
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .2s ease, box-shadow .2s ease;
}

.site-contact-cta__button:hover,
.site-contact-cta__button:focus-visible {
  transform: rotate(1deg) translateY(-4px);
  box-shadow: 12px 12px 0 var(--contact-cta-shadow-hover);
  outline: none;
}

.site-contact-cta__button:focus-visible {
  outline: 3px solid #0A1018;
  outline-offset: 5px;
}

.site-contact-cta__button:active {
  transform: rotate(0deg) translate(4px, 4px);
  box-shadow: 2px 2px 0 var(--contact-cta-shadow-hover);
}

.site-contact-cta__button .material-symbols-rounded {
  font-size: 19px;
  transition: transform .18s ease;
}

.site-contact-cta__button:hover .material-symbols-rounded,
.site-contact-cta__button:focus-visible .material-symbols-rounded {
  transform: translateX(3px);
}

@media (max-width: 600px) {
  .site-contact-cta {
    min-height: 0;
    padding: 78px 18px 82px;
  }

  .site-contact-cta__kicker { margin-bottom: 15px; }
  .site-contact-cta .site-contact-cta__lead { margin-top: 14px; }
  .site-contact-cta .site-contact-cta__lead + p { margin-top: 14px; }
  .site-contact-cta__prompts { margin-top: 24px; }
  .site-contact-cta__prompt { padding: 13px 0; gap: 11px; font-size: 15.5px; }
  .site-contact-cta h2 { font-size: clamp(44px, 14vw, 62px); }
  .site-contact-cta p { margin-top: 22px; font-size: 16px; }
  .site-contact-cta__button { width: min(100%, 320px); margin-top: 28px; }
}

@media (prefers-reduced-motion: reduce) and (min-width:100000px) {
  .site-contact-cta__button,
  .site-contact-cta__button .material-symbols-rounded { transition: none; }
}