/* ─── Inovista Stat Counter ─── */

.istat-section {
  width: 100vw !important;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  right: 50%;
  padding: var(--istat-pad-v) var(--istat-pad-h);
  background: transparent;
  box-sizing: border-box;
  /* NO overflow:hidden — it breaks the full-width breakout and causes overlap */
}

.istat-grid {
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  gap: 0;
  flex-wrap: nowrap;
  width: 100%;
}

.istat-item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  /* NO overflow:hidden — it clips the absolute icon */
}

/* Vertical divider between items */
.istat-item + .istat-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: rgba(255,255,255,0.15);
}

/* Background icon */
.istat-icon-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  width: var(--istat-icon-size);
  height: var(--istat-icon-size);

}

.istat-icon-bg svg,
.istat-icon-bg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  fill: #ffffff;
  stroke: #ffffff;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Number row */
.istat-number-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  line-height: 1;
  margin-bottom: 14px;
}

.istat-number {
  font-size: var(--istat-font-size);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -3px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.istat-prefix {
  font-size: calc(var(--istat-font-size) * 0.55);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -1px;
}

.istat-label {
  position: relative;
  z-index: 1;
  font-size: clamp(13px, calc(var(--istat-font-size) * 0.20), 22px);
  color: rgba(255,255,255,0.65);
  font-weight: 400;
  margin: 0;
  letter-spacing: 0.3px;
  line-height: 1.5;
}

.istat-number.counting { will-change: contents; }

/* ── Tablet ≤ 900px ── */
@media (max-width: 900px) {
  .istat-section { padding: 50px 20px !important; }
  .istat-item    { padding: 40px 12px; }
  .istat-number  { font-size: clamp(38px, 6.5vw, 70px) !important; letter-spacing: -2px; }
  .istat-prefix  { font-size: clamp(22px, 3vw, 38px) !important; }
  .istat-label   { font-size: clamp(11px, 1.4vw, 15px) !important; }
  .istat-icon-bg { width: 110px !important; height: 110px !important; }
}

/* ── Mobile ≤ 640px — stack vertically, one per row ── */
@media (max-width: 640px) {
  .istat-section {
    padding: 0 !important;
    /* still full width — keep the breakout, just no extra padding */
  }
  .istat-grid {
    flex-direction: column;
    width: 100%;
  }
  .istat-item {
    width: 100%;
    flex: none;           /* don't flex-grow in column — use natural height */
    padding: 40px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .istat-item:last-child {
    border-bottom: none;
  }
  /* Kill vertical divider */
  .istat-item + .istat-item::before { display: none; }

  /* Fixed comfortable sizes — bold and readable */
  .istat-number  { font-size: 68px !important; letter-spacing: -2px; }
  .istat-prefix  { font-size: 38px !important; }
  .istat-label   { font-size: 14px !important; max-width: 280px; }

  /* Icon visible but not overwhelming */
  .istat-icon-bg {
    width: 120px !important;
    height: 120px !important;
  }
}

/* ── Small mobile ≤ 390px ── */
@media (max-width: 390px) {
  .istat-number  { font-size: 56px !important; letter-spacing: -1px; }
  .istat-prefix  { font-size: 32px !important; }
  .istat-label   { font-size: 13px !important; }
}