/* ——— STATS (shared component: home "proof" row + company intro row) ——— */
.stats-wrap {
  --dash-h: linear-gradient(90deg, rgba(255, 255, 255, 0.25) 0 5px, transparent 5px 8px);
  --dash-v: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0 5px, transparent 5px 8px);
  width: 100%;
  background-image: var(--dash-h);
  background-size: 8px 1px;
  background-position: left top;
  background-repeat: repeat-x;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 5rem);
}

.stat {
  position: relative;
  padding: clamp(2.5rem, 4vw, 3.5rem) clamp(1.25rem, 2.5vw, 2.5rem);
  min-height: 220px;
  display: flex;
  flex-direction: column;
}

.stat:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2px;
  background-image: var(--dash-v);
  background-size: 1px 8px;
  background-repeat: repeat-y;
  background-position: center top;
  pointer-events: none;
}

.stat--highlight {
  background: #1a1a1a;
  z-index: 1;
}

.stat--highlight::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    var(--dash-h),
    var(--dash-h),
    var(--dash-v),
    var(--dash-v);
  background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
  background-position: left top, left bottom, left top, right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}

.stat--highlight::after {
  display: none;
}

/* Red highlight variant, used on the Company page's stats row */
.stat--highlight-red {
  background: var(--red);
  z-index: 1;
}

.stat--highlight-red::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    var(--dash-h),
    var(--dash-h),
    var(--dash-v),
    var(--dash-v);
  background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
  background-position: left top, left bottom, left top, right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}

.stat--highlight-red::after {
  display: none;
}

.stat--highlight-red h3 {
  color: rgba(255, 255, 255, 0.85);
}

.stat--highlight-red .stat__desc {
  color: rgba(255, 255, 255, 0.95);
}

.stat h3 {
  color: var(--red);
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.stat__value {
  font-size: clamp(2.75rem, 4.5vw, 3.75rem);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 1.35rem;
  letter-spacing: -0.03em;
  color: #fff;
}

.stat__desc {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.92);
  max-width: 12.5rem;
  line-height: 1.45;
  margin-top: auto;
}

@media (min-width: 1200px) {
  .stats {
    max-width: 1320px;
    padding-left: clamp(2rem, 6vw, 6rem);
    padding-right: clamp(2rem, 6vw, 6rem);
  }

  .stat {
    padding-left: clamp(1.75rem, 3vw, 3rem);
    padding-right: clamp(1.75rem, 3vw, 3rem);
  }
}

@media (min-width: 1500px) {
  .stats {
    max-width: 1480px;
    padding-left: clamp(3rem, 8vw, 8rem);
    padding-right: clamp(3rem, 8vw, 8rem);
  }

  .stat {
    padding-left: clamp(2rem, 3.5vw, 3.5rem);
    padding-right: clamp(2rem, 3.5vw, 3.5rem);
  }

  .stat__desc {
    max-width: 14rem;
  }
}

@media (max-width: 1024px) {
  .stats {
    grid-template-columns: 1fr 1fr;
  }

  .stat:nth-child(1),
  .stat:nth-child(2) {
    border-bottom: none;
  }

  .stat:nth-child(1)::before,
  .stat:nth-child(2)::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-image: var(--dash-h);
    background-size: 8px 1px;
    background-repeat: repeat-x;
  }

  .stat:nth-child(2)::after {
    display: none;
  }

  .stat--highlight::before,
  .stat--highlight-red::before {
    background-image:
      var(--dash-h),
      var(--dash-h),
      var(--dash-v),
      var(--dash-v);
  }
}

@media (max-width: 640px) {
  .stats {
    grid-template-columns: 1fr;
  }

  .stat:not(:last-child)::after {
    display: none;
  }

  .stat:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-image: var(--dash-h);
    background-size: 8px 1px;
    background-repeat: repeat-x;
  }

  .stat--highlight::before,
  .stat--highlight-red::before {
    inset: 0;
    background-image:
      var(--dash-h),
      var(--dash-h),
      var(--dash-v),
      var(--dash-v);
    background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
    background-position: left top, left bottom, left top, right top;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  }
}