/* Shared CTA banners for the Digital Marketing service pages. */
body#top.local-seo-page main section.local-cta.service-cta-reference,
body#top.off-page-seo-page main section.off-cta.service-cta-reference,
body section.service-cta-reference,
body.ai-seo-page section.ai-cta-section {
  box-sizing: border-box !important;
  position: relative !important;
  isolation: isolate !important;
  width: min(1180px, calc(100vw - 48px)) !important;
  max-width: none !important;
  min-height: 344px !important;
  margin: 48px calc((100% - min(1180px, calc(100vw - 48px))) / 2) !important;
  padding: 64px 40px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: radial-gradient(circle at 88% 80%, rgba(255,241,197,.22), transparent 28%), linear-gradient(120deg, #df4c05 0%, #ff7010 48%, #ff9a42 100%) !important;
  box-shadow: 0 16px 38px rgba(209,81,0,.16) !important;
  color: #fff !important;
  text-align: center !important;
}

body section.service-cta-reference::before,
body.ai-seo-page section.ai-cta-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 24px auto auto 40px !important;
  width: 34% !important;
  height: 72% !important;
  border: 0 !important;
  border-radius: 0 !important;
  opacity: .26 !important;
  background: radial-gradient(circle, #fff 3px, transparent 3.5px) 0 0 / 19px 19px !important;
  mask-image: linear-gradient(135deg, #000 20%, transparent 88%) !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

body section.service-cta-reference::after,
body.ai-seo-page section.ai-cta-section::after {
  content: "" !important;
  position: absolute !important;
  inset: 18px !important;
  width: auto !important;
  height: auto !important;
  aspect-ratio: auto !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 18px !important;
  background: transparent !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

body section.service-cta-reference > * { margin-top: 0 !important; margin-bottom: 0 !important; }
body section.service-cta-reference :is(h2, h3) { color: #fff !important; }
body section.service-cta-reference p { max-width: 760px !important; color: #fff !important; }
body section.service-cta-reference :is(a, button) {
  width: auto !important;
  max-width: 100% !important;
  min-height: 58px !important;
  padding: 16px 30px !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #ed6005 !important;
  white-space: normal !important;
}
body section.service-cta-reference :is(a, button):hover {
  background: #211d1a !important;
  color: #fff !important;
}

/* Keep CTA copy stationary when the pointer enters its content area. */
body section.service-cta-reference :is(.cta-card, .cta-box, .local-cta-card),
body section.service-cta-reference :is(.cta-card, .cta-box, .local-cta-card):hover {
  transform: none !important;
  box-shadow: none !important;
  transition: none !important;
}

body section.service-cta-reference :is(a, button):hover,
body section.service-cta-reference :is(a, button):focus-visible {
  transform: none !important;
}

body#top.local-seo-page main section.local-cta.service-cta-reference {
  min-height: 0 !important;
  padding: 40px 28px !important;
}
body#top.local-seo-page .local-cta-content {
  gap: 12px !important;
}
body#top.local-seo-page .local-cta-content :is(h2, p) {
  margin: 0 auto !important;
  padding: 0 !important;
}
body#top.local-seo-page .local-cta-content > a {
  margin: 6px auto 0 !important;
  text-transform: none !important;
}

/* AI SEO already has an outer banner; keep its inner content unboxed. */
body.ai-seo-page section.ai-cta-section .service-cta-reference {
  width: 100% !important;
  min-height: 0 !important;
  max-width: 820px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
body.ai-seo-page section.ai-cta-section .service-cta-reference::before,
body.ai-seo-page section.ai-cta-section .service-cta-reference::after { display: none !important; }

@media (max-width: 640px) {
  body#top.local-seo-page main section.local-cta.service-cta-reference,
body#top.off-page-seo-page main section.off-cta.service-cta-reference,
body section.service-cta-reference,
  body.ai-seo-page section.ai-cta-section {
    width: calc(100vw - 28px) !important;
    margin: 32px calc((100% - (100vw - 28px)) / 2) !important;
    min-height: 300px !important;
    padding: 40px 24px !important;
    border-radius: 20px !important;
  }
  body section.service-cta-reference::after,
  body.ai-seo-page section.ai-cta-section::after { inset: 12px !important; }
}
