.impact-section{
  background: linear-gradient(180deg,rgba(187, 155, 172, 1) 0%, rgba(187, 155, 172, 1) 51%, rgba(149, 120, 137, 1) 74%, rgba(112, 85, 102, 1) 88%, rgba(40, 19, 35, 1) 100%);
}

.kpi-header{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.main-title{width: 45%;}

/* =========================
   HERO NUMBER
========================= */

.hero-impact{
  /*margin-bottom:120px;*/
  width: 50%;
  opacity:0;
  transform:translateY(50px);
  transition:
    opacity 1s ease,
    transform 1s ease;
}

.hero-impact.active{
  opacity:1;
  transform:translateY(0);
}

.hero-number{
  font-size:clamp(70px, 14vw, 100px);
  line-height:.9;
  font-weight:800;
  color:var(--text);
}

.hero-description{
  font-size:28px;
  margin-top:8px;
  color:var(--text);
  font-weight:500;
}

.hero-small{
  margin-top:16px;
  font-size:18px;
  color:rgb(255, 255, 255);
  max-width:700px;
  /*line-height:1.5;*/
}

/* =========================
   GRID
========================= */

.stats-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0px 40px;
}

/* =========================
   CARD
========================= */

.stat-card{
  padding:40px 10px 40px 0;
  border-top:1px solid rgba(255,255,255,.2);

  opacity:0;
  transform:translateY(50px);

  transition:
    opacity .8s ease,
    transform .8s ease;
}

.stat-card.active{
  opacity:1;
  transform:translateY(0);
}

.stat-number{
  font-size:clamp(30px, 5vw, 70px);
  font-weight:800;
  line-height:1;
  margin-bottom:8px;
  color: var(--text);
}

.stat-text{
  font-size:20px;
  line-height:1.4;
  color:white;
 /* color:rgba(255,255,255,.9);*/
 /* max-width:300px;*/
}

/* =========================
   FOOTNOTE
========================= */

.footnote{
  margin-top:40px;
 color:rgb(255, 255, 255);
  font-size:18px;
  line-height:1.6;
  text-align: center;
  /*max-width:900px;*/
}

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

@media(max-width:1100px){

  .stats-grid{
    grid-template-columns:repeat(2, 1fr);
  }

}

@media(max-width:768px){

  /*.impact-section{
    padding:80px 30px;
  }*/

  .stat-card{
  padding:25px 0px 25px 0;
}

.main-title h3{
  font-size:38px;
}
  .main-title{
  width: 100%;
}

.hero-impact{
  width: 100%;}

  .stats-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:0px 12px;
  }

  .hero-description{
    font-size:22px;
  }

  .stat-text{
    font-size:16px;
  }

}