/* =========================================================
   VALUES SECTION
   Mission page: asymmetric layout with value bands
========================================================= */

.valuesSection{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 5% 12%, rgba(118,193,74,.10), transparent 29%),
    radial-gradient(circle at 96% 88%, rgba(118,193,74,.07), transparent 27%),
    linear-gradient(135deg, #fbfcf9 0%, #f3f8ef 100%);
  color: var(--text);
}
.valuesSection::before{
  content: "";
  position: absolute;
  left: -200px;
  bottom: -230px;
  width: 470px;
  height: 470px;
  border-radius: 50%;
  border: 1px solid rgba(118,193,74,.07);
  pointer-events: none;
}

.valuesSection::after{
  content: "";
  position: absolute;
  right: -270px;
  top: -310px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  border: 1px solid rgba(118,193,74,.06);
  pointer-events: none;
}

.valuesSection .container{
  position: relative;
  z-index: 1;
}


/* =========================
   Main split layout
========================= */

.valuesSplit{
  display: grid;
  grid-template-columns: minmax(300px, .86fr) minmax(520px, 1.18fr);
  gap: clamp(38px, 5vw, 70px);
  align-items: start;
}


/* =========================
   Left introduction
========================= */

.valuesSplit__intro{
  padding-top: clamp(6px, 1vw, 14px);
}

.valuesSplit__kicker{
  margin: 0 0 16px;
  color: var(--accent-dark);
}

.valuesSplit__title{
  margin: 0 0 18px;
  max-width: 390px;
  font-size: clamp(2.05rem, 3vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.04em;
  font-weight: 800;
  color: var(--brand-900);
}

.valuesSplit__text{
  margin: 0;
  max-width: 390px;
  font-size: var(--text-md);
  line-height: 1.72;
  color: var(--muted);
}

.valuesSplit__callout{
  margin-top: clamp(26px, 3vw, 34px);
  max-width: 430px;
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, var(--brand-900), var(--brand-800));
  border: 1px solid rgba(118,193,74,.22);
  box-shadow: 0 16px 30px rgba(15,47,31,.12);
}

.valuesSplit__calloutText{
  margin: 0;
  font-size: .98rem;
  line-height: 1.5;
  font-weight: 750;
  color: rgba(255,255,255,.94);
}
/* =========================
   Right value bands
========================= */

/* =========================
   Value bands
========================= */

.valuesList{
  display: grid;
  gap: 16px;
}

.valuesBand{
  position: relative;
  padding: 24px 88px 21px 28px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(118,193,74,.16);
  box-shadow: 0 12px 28px rgba(15,47,31,.065);
  overflow: hidden;
  transition:
    transform var(--ease-standard),
    background-color var(--ease-standard),
    border-color var(--ease-standard),
    box-shadow var(--ease-standard);
}
.valuesBand::before{
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  right: 34px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--accent) 0%,
    rgba(118,193,74,.92) 24%,
    rgba(118,193,74,.42) 67%,
    rgba(118,193,74,0) 100%
  );
}

.valuesBand::after{
  content: attr(data-index);
  position: absolute;
  top: 18px;
  right: 24px;
  font-size: clamp(2.8rem, 3vw, 3.3rem);
  line-height: 1;
  letter-spacing: -.06em;
  font-weight: 800;
  color: rgba(118,193,74,.52);
  pointer-events: none;
}

.valuesBand:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.94);
  border-color: rgba(118,193,74,.32);
  box-shadow: 0 16px 32px rgba(15,47,31,.08);
}

.valuesBand__body{
  position: relative;
  z-index: 1;
}

.valuesBand__title{
  margin: 0 0 7px;
  font-size: clamp(1.12rem, 1.3vw, 1.28rem);
  line-height: 1.25;
  letter-spacing: -.025em;
  font-weight: 800;
  color: var(--brand-900);
}

.valuesBand__text{
  margin: 0 0 14px;
  max-width: 570px;
  font-size: .92rem;
  line-height: 1.56;
  color: var(--muted);
}

/* =========================================================
   VALUES SECTION RESPONSIVE
========================================================= */

@media (max-width: 980px){

  .valuesSplit{
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .valuesSplit__intro{
    max-width: 680px;
  }

  .valuesSplit__title,
  .valuesSplit__text{
    max-width: 680px;
  }

  .valuesSplit__statement{
    margin-top: 24px;
  }

}

@media (max-width: 640px){

  .valuesSection::before,
  .valuesSection::after{
    display: none;
  }

  .valuesBand{
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 22px 19px 21px;
  }

  .valuesBand__number{
    padding-top: 0;
  }

  .valuesBand__text{
    margin-bottom: 15px;
  }

  .valuesBand__chips{
    gap: 7px;
  }

  .valuesBand__chip{
    min-height: 32px;
    padding: 7px 11px;
    font-size: .80rem;
  }

}