/*
 * Blog — Closing contact/CTA band.
 * Scoped under body.log-blog-page.
 */

/* Reference (about_us_4.html) gets its post-band breathing room from
   footer.site{margin-top:60px} — its own footer, not shared sitewide
   here. Adding that same 60px directly on this wrapper's bottom margin
   instead (same pattern already used on testimonials/contact-us pages).
   !important: beats log-global-layout-fix.css's
   .entry-content.is-layout-constrained > * margin-block reset, which
   otherwise zeroes this section's bottom margin. */
.log-blog-page .bl2-contact-band {
  max-width: 1160px;
  margin: 44px auto 60px !important;
  padding: 0 20px;
}

.log-blog-page .bl2-cb-inner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--plum-950), var(--plum-900));
  border-radius: var(--r-lg);
  padding: 36px 34px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}

.log-blog-page .bl2-cb-inner:hover {
  transform: translateY(-4px);
  box-shadow: 0 34px 60px rgba(15, 28, 25, .32);
}

.log-blog-page .bl2-cb-inner::before,
.log-blog-page .bl2-cb-inner::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .28;
  pointer-events: none;
}

.log-blog-page .bl2-cb-inner::before {
  width: 220px;
  height: 220px;
  background: var(--sage-500);
  top: -70px;
  left: -40px;
}

.log-blog-page .bl2-cb-inner::after {
  width: 200px;
  height: 200px;
  background: var(--plum-600);
  bottom: -70px;
  right: -30px;
}

.log-blog-page .bl2-cb-text {
  position: relative;
  z-index: 1;
}

.log-blog-page .bl2-cb-text span.bl2-cb-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sage-400);
  margin-bottom: 6px;
}

.log-blog-page .bl2-cb-text h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 2.8vw, 32px);
  color: #fff;
}

.log-blog-page .bl2-cb-text h2 em {
  font-style: italic;
  color: var(--sage-400);
}

.log-blog-page .bl2-cb-cta {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.log-blog-page .bl2-btn-gold {
  position: relative;
  overflow: hidden;
  background: var(--sage-500);
  color: var(--plum-950);
  font-weight: 700;
  font-size: 12.5px;
  padding: 13px 22px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}

.log-blog-page .bl2-btn-gold:hover {
  background: var(--sage-400);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(203, 168, 105, .3);
}

@media (max-width: 760px) {
  .log-blog-page .bl2-cb-inner { flex-direction: column; text-align: center; padding: 32px 22px; gap: 22px; }
  .log-blog-page .bl2-cb-cta { flex-direction: column; width: 100%; }
  .log-blog-page .bl2-cb-cta a { width: 100%; justify-content: center; }
}