/* Impact Section - compact, desktop + tablet same layout */

.impact-section{
  --imp-bg:#F8F9FA;
  --imp-ink:#212529;
  --imp-ink-light:#F8F9FA;
  --imp-muted:#6C757D;
  --imp-accent-blue:#0d6efd;
  --imp-card-bg:#FFFFFF;
  --imp-card-stroke:#E9ECEF;
  --imp-card-shadow:rgba(0,0,0,.05);
  --maxw:1200px;

  position:relative;
  overflow:hidden;
  background:var(--imp-bg);
  color:var(--imp-ink);

  /* no forced full viewport height, more compact */
  min-height:auto;
  display:block;
  padding:clamp(2.4rem,5vh,3.4rem) 0;
  box-sizing:border-box;
}

.impact-container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 1.75rem;
  width:100%;
}

/* Header */

.impact-section .section-header{
  text-align:center;
  max-width:780px;
  margin:0 auto clamp(1.4rem,3.4vh,2.1rem);
  opacity:0;
  transform:translateY(40px);
}

.impact-section .section-header h2{
  font-size:clamp(2rem,3.8vw,2.7rem);
  font-weight:700;
  letter-spacing:-0.01em;
  margin:0 0 0.7rem;
  color:var(--imp-ink);
}

.impact-section .section-header p{
  font-size:clamp(0.98rem,1.7vw,1.12rem);
  color:var(--imp-muted);
  line-height:1.6;
  margin:0 auto;
}

/* Grid */

.impact-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:auto;
  gap:1.4rem;
  align-items:stretch;
}

/* Cards - base */

.impact-card{
  border-radius:22px;
  padding:clamp(1.6rem,2.4vh,2rem);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  transition:transform .3s ease, box-shadow .3s ease, opacity .35s ease;
  opacity:0;
  transform:translateY(40px);
  overflow:hidden;
  position:relative;
}

.impact-card:hover{
  transform:translateY(-4px);
}

/* Large card */

.impact-card-large{
  grid-row:span 2;
  background:#10151B;
  color:var(--imp-ink-light);
  text-align:left;
  justify-content:flex-end;
  align-items:flex-start;
  box-shadow:0 14px 32px rgba(0,0,0,.25);
  min-height:420px;
}

.card-bg-video{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  min-width:100%;
  min-height:100%;
  z-index:1;
  filter:brightness(.55);
  opacity:.85;
}

.card-bg-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(to top,rgba(10,10,10,.88) 35%,transparent 100%);
  opacity:1;
}

.impact-card-large .card-content{
  position:relative;
  z-index:3;
  max-width:430px;
}

/* Big stat - left aligned */

.large-stat{
  display:flex;
  flex-direction:column;
  align-items:flex-start !important;
  text-align:left !important;
  width:100%;
}

.large-title{
  will-change:opacity, transform, clip-path, filter;
  color:#fff;
  text-align:left !important;
}

.large-sub{
  color:rgba(255,255,255,.9) !important;
  text-transform:none !important;
  letter-spacing:.02em;
  text-align:left !important;
  display:block;
  width:100%;
  max-width:none !important;
  margin-top:0.35rem;
  padding:0;
  text-shadow:0 0 8px rgba(0,0,0,.25);
}

/* Small cards */

.impact-card-small{
  background:var(--imp-card-bg);
  border:1px solid var(--imp-card-stroke);
  box-shadow:0 10px 26px var(--imp-card-shadow);
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  min-height:220px;
  padding:1.6rem 1.9rem;
}

.impact-card-small:hover{
  box-shadow:0 18px 30px rgba(0,0,0,.08);
}

/* Text styles */

.stat-number{
  font-size:clamp(2.1rem,3.7vw,2.8rem);
  font-weight:700;
  color:var(--imp-accent-blue);
  line-height:1.1;
  margin-bottom:0.35rem;
}

.stat-label{
  font-size:clamp(1rem,1.7vw,1.1rem);
  font-weight:500;
  margin-bottom:0.7rem;
  color:var(--imp-ink);
  text-transform:none;
  letter-spacing:0;
  white-space:normal;
}

.stat-description{
  font-size:clamp(0.9rem,1.4vw,0.98rem);
  color:var(--imp-muted);
  line-height:1.6;
  margin:0;
  max-width:95%;
}

/* Generic enter/exit animations */

@keyframes fadeInUp{
  from{opacity:0;transform:translateY(40px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes fadeOutDown{
  from{opacity:1;transform:translateY(0)}
  to{opacity:0;transform:translateY(40px)}
}

/* Desktop big-title motions */

@keyframes bigTitleIn{
  0%{opacity:0;transform:translateY(8px) scale(.98);filter:blur(2px);clip-path:inset(0 0 100% 0)}
  40%{clip-path:inset(0 0 0 0)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}

@keyframes bigTitleOut{
  0%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
  100%{opacity:0;transform:translateY(8px) scale(.98);filter:blur(4px)}
}

@keyframes bigSubIn{
  from{opacity:0;transform:translateX(-14px)}
  to{opacity:1;transform:translateX(0)}
}

@keyframes bigSubOut{
  from{opacity:1;transform:translateX(0)}
  to{opacity:0;transform:translateX(-14px)}
}

/* Apply animations */

.impact-section.is-entering .section-header{
  animation:fadeInUp .7s .1s forwards;
}

.impact-section.is-entering .impact-card{
  animation:fadeInUp .7s forwards;
}

.impact-section.is-entering .impact-card-large{animation-delay:.25s;}
.impact-section.is-entering .impact-grid .impact-card-small:nth-of-type(1){animation-delay:.35s;}
.impact-section.is-entering .impact-grid .impact-card-small:nth-of-type(2){animation-delay:.45s;}

.impact-section.is-leaving .section-header{
  animation:fadeOutDown .5s forwards;
}

.impact-section.is-leaving .impact-card{
  animation:fadeOutDown .5s forwards;
}

.impact-section.big-in .large-title{
  animation:bigTitleIn .8s ease-out forwards;
}

.impact-section.big-in .large-sub{
  animation:bigSubIn .6s .15s ease-out forwards;
}

.impact-section.big-out .large-title{
  animation:bigTitleOut .5s ease-in forwards;
}

.impact-section.big-out .large-sub{
  animation:bigSubOut .4s ease-in forwards;
}

/* Mobile / small tablet animations and tweaks */

@media (max-width:992px){
  @keyframes bigTitleInMobile{
    0%{opacity:0; transform:translateY(14px) scale(.96); filter:blur(3px)}
    60%{opacity:1}
    100%{opacity:1; transform:translateY(0) scale(1); filter:blur(0)}
  }
  @keyframes bigTitleOutMobile{
    0%{opacity:1; transform:translateY(0) scale(1); filter:blur(0)}
    100%{opacity:0; transform:translateY(10px) scale(.97); filter:blur(2px)}
  }

  .impact-section.big-in .large-title{
    animation:bigTitleInMobile .55s ease-out forwards;
  }
  .impact-section.big-out .large-title{
    animation:bigTitleOutMobile .4s ease-in forwards;
  }

  .impact-card{
    border-radius:20px;
  }

  /* keep two-column layout here - only phones will stack */
}

/* Phones only - stack cards */

@media (max-width:767px){
  .impact-container{
    padding:0 1.25rem;
  }

  .impact-grid{
    grid-template-columns:1fr;
  }

  .impact-card-large{
    grid-row:auto;
    min-height:380px;
  }

  .impact-card-small{
    min-height:0;
    padding:1.4rem 1.4rem 1.6rem;
  }

  /* label clamp to two lines */
  .impact-card-small .stat-label{
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:unset !important;
    max-width:90%;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }

  .impact-section{
    padding:clamp(2.1rem,5vh,2.7rem) 0;
  }
}

/* Shorter screens */

@media (max-height:780px){
  .impact-section{
    padding:clamp(2rem,4vh,3rem) 0;
  }
  .impact-card{
    padding:clamp(1.3rem,2vh,1.7rem);
  }
  .stat-number{
    font-size:clamp(2rem,3.5vw,2.6rem);
  }
}

/* Reduced motion */

@media (prefers-reduced-motion:reduce){
  .impact-section *{
    animation:none !important;
    transition:none !important;
  }
  .impact-section .section-header,
  .impact-section .impact-card{
    opacity:1 !important;
    transform:none !important;
  }
}