/* ================= BO EXPERTISE CALLOUT WIDGET — default styling =================
   Scoped under .bo-expertise-callout-wrap. Self-contained: does not depend
   on theme globals like var(--navy)/var(--blue), so it renders correctly
   even if the theme's own stylesheet isn't loaded.

   NOTE ON DIVIDERS: like the Feature Grid widget, the stats grid uses the
   "background = divider color + 1px gap" trick instead of nth-child border
   removal, so it stays correct for any item count or column count.
   ========================================================================= */

.bo-expertise-callout-wrap{
  --ec-navy: #031B39;
  --ec-blue: #1083E6;
  --ec-ease: cubic-bezier(.22,1,.36,1);

  --ec-bg: var(--ec-navy);
  --ec-v-padding: 72px;
  --ec-container-max: 1220px;
  --ec-grid-gap: 72px;

  --ec-glow-color: rgba(16,131,230,.18);

  --ec-eyebrow-color: rgba(16,131,230,.9);
  --ec-heading-color: #ffffff;
  --ec-paragraph-color: rgba(255,255,255,.6);

  --ec-stats-bg: rgba(255,255,255,.07);
  --ec-stats-border: rgba(255,255,255,.1);
  --ec-stats-radius: 16px;

  --ec-stat-bg: rgba(255,255,255,.04);
  --ec-stat-hover-bg: rgba(255,255,255,.08);
  --ec-num-color: #ffffff;
  --ec-suffix-color: var(--ec-blue);
  --ec-label-color: rgba(255,255,255,.5);

  font-family:'Roboto', sans-serif;
}

.bo-expertise-callout-wrap .ec-section{
  padding: var(--ec-v-padding) 0;
  background: var(--ec-bg);
  position: relative;
  overflow: hidden;
}

.bo-expertise-callout-wrap:not(.ec-no-glow) .ec-section::before{
  content: '';
  position: absolute;
  top: -60%;
  right: -10%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ec-glow-color), transparent 70%);
  pointer-events: none;
}

.bo-expertise-callout-wrap .ec-wrap{
  max-width: var(--ec-container-max);
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 1;
}

.bo-expertise-callout-wrap .ec-inner{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ec-grid-gap);
  align-items: center;
}

/* ---------- Left column ---------- */
.bo-expertise-callout-wrap .ec-eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ec-eyebrow-color);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.bo-expertise-callout-wrap .ec-eyebrow::before{
  content: '';
  width: 18px; height: 1px;
  background: var(--ec-eyebrow-color);
  display: inline-block;
}

.bo-expertise-callout-wrap .ec-heading{
  font-family:'Roboto Slab', serif;
  font-size: 32px;
  font-weight: 500;
  color: var(--ec-heading-color);
  margin: 0 0 18px;
  letter-spacing: -.01em;
  line-height: 1.25;
}

.bo-expertise-callout-wrap .ec-left p, .bo-expertise-callout-wrap .ec-left [data-bo-html-text="p"]{
  font-size: 14.5px;
  color: var(--ec-paragraph-color);
  line-height: 1.7;
  margin: 0 0 14px;
}
.bo-expertise-callout-wrap .ec-left p:last-child, .bo-expertise-callout-wrap .ec-left [data-bo-html-text="p"]:last-child{ margin-bottom: 0; }

/* ---------- Stats grid (dynamic-safe dividers) ---------- */
.bo-expertise-callout-wrap .ec-stats{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--ec-stats-bg);
  border: 1px solid var(--ec-stats-border);
  border-radius: var(--ec-stats-radius);
  overflow: hidden;
}

.bo-expertise-callout-wrap .ec-exp-stat{
  padding: 28px 24px;
  background: var(--ec-stat-bg);
  transition: background .3s var(--ec-ease);
}
.bo-expertise-callout-wrap .ec-exp-stat:hover{
  background: var(--ec-stat-hover-bg);
}

.bo-expertise-callout-wrap .ec-exp-num{
  font-family:'Roboto Slab', serif;
  font-size: 38px;
  font-weight: 500;
  color: var(--ec-num-color);
  letter-spacing: -.02em;
  margin-bottom: 6px;
}
.bo-expertise-callout-wrap .ec-exp-num span{
  font-size: 22px;
  color: var(--ec-suffix-color);
  margin-left: 2px;
}

.bo-expertise-callout-wrap .ec-exp-label{
  font-size: 12.5px;
  color: var(--ec-label-color);
  line-height: 1.4;
}

/* ---------- Reveal / stagger (self-contained, no theme JS required) ---------- */
.bo-expertise-callout-wrap .reveal{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ec-ease), transform .8s var(--ec-ease);
}
.bo-expertise-callout-wrap .reveal.in{ opacity: 1; transform: translateY(0); }

.bo-expertise-callout-wrap .stagger-children .ec-exp-stat{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s var(--ec-ease), transform .55s var(--ec-ease);
}
.bo-expertise-callout-wrap .stagger-children.in .ec-exp-stat{ opacity: 1; transform: translateY(0); }
.bo-expertise-callout-wrap .stagger-children.in .ec-exp-stat:nth-child(1){ transition-delay: .05s; }
.bo-expertise-callout-wrap .stagger-children.in .ec-exp-stat:nth-child(2){ transition-delay: .10s; }
.bo-expertise-callout-wrap .stagger-children.in .ec-exp-stat:nth-child(3){ transition-delay: .15s; }
.bo-expertise-callout-wrap .stagger-children.in .ec-exp-stat:nth-child(n+4){ transition-delay: .20s; }

@media (prefers-reduced-motion: reduce){
  .bo-expertise-callout-wrap .reveal,
  .bo-expertise-callout-wrap .stagger-children .ec-exp-stat{ opacity: 1; transform: none; transition: none; }
}

/* ---------- Editor-active safety net ----------
   Elementor adds this class to the preview iframe <body> so plugins can
   force-show scroll-reveal content while editing, independent of any
   IntersectionObserver timing. Belt-and-suspenders alongside the JS check. */
body.elementor-editor-active .bo-expertise-callout-wrap .reveal,
body.elementor-editor-active .bo-expertise-callout-wrap .stagger-children .ec-exp-stat{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ================= RESPONSIVE ================= */

/* Tablet */
@media (max-width: 1024px){
  .bo-expertise-callout-wrap{ --ec-v-padding: 56px; --ec-grid-gap: 40px; }
  .bo-expertise-callout-wrap .ec-wrap{ padding: 0 28px; }
  .bo-expertise-callout-wrap .ec-heading{ font-size: 27px; }
  .bo-expertise-callout-wrap .ec-inner{ grid-template-columns: 1fr !important; }
  .bo-expertise-callout-wrap .ec-exp-num{ font-size: 32px; }
}

/* Mobile — ultra-compact */
@media (max-width: 767px){
  .bo-expertise-callout-wrap{
    --ec-v-padding: 40px;
    --ec-grid-gap: 26px;
  }
  .bo-expertise-callout-wrap .ec-wrap{ padding: 0 18px; }
  .bo-expertise-callout-wrap .ec-eyebrow{ font-size: 10px; margin-bottom: 10px; }
  .bo-expertise-callout-wrap .ec-heading{ font-size: 21px; margin-bottom: 12px; }
  .bo-expertise-callout-wrap .ec-left p, .bo-expertise-callout-wrap .ec-left [data-bo-html-text="p"]{ font-size: 13px; margin-bottom: 10px; }
  .bo-expertise-callout-wrap .ec-exp-stat{ padding: 18px 16px; }
  .bo-expertise-callout-wrap .ec-exp-num{ font-size: 26px; }
  .bo-expertise-callout-wrap .ec-exp-num span{ font-size: 16px; }
  .bo-expertise-callout-wrap .ec-exp-label{ font-size: 11.5px; }
  .bo-expertise-callout-wrap .ec-section::before{ width: 320px; height: 320px; }
}

/* Small mobile */
@media (max-width: 420px){
  .bo-expertise-callout-wrap .ec-heading{ font-size: 19px; }
}