/* Lime values cards: readable sizing, theme-aware navy surfaces, and scroll slide-in. */
.values-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
  margin-top:52px;
  align-items:stretch;
}
.values-grid article{
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
  min-height:230px;
  height:100%;
  padding:27px 25px 25px;
  overflow:visible;
  border:1px solid rgba(160,236,0,.28);
  border-top:2px solid var(--navy);
  border-radius:25px;
  background:#fff;
  box-shadow:0 14px 34px rgba(160,236,0,.12),0 8px 24px rgba(17,39,75,.07);
  transition:background-color .35s ease,border-color .35s ease,box-shadow .45s ease,transform .35s ease;
}
.values-grid article:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 42px rgba(160,236,0,.2),0 12px 28px rgba(17,39,75,.1);
}
.values-grid article>span{
  display:block;
  margin:0;
  color:var(--lime);
  font-size:13px;
  line-height:1.4;
  font-weight:800;
  letter-spacing:.04em;
}
.values-grid article h3{
  margin:48px 0 14px;
  color:var(--navy);
  font-size:clamp(17px,1.25vw,22px);
  line-height:1.25;
  letter-spacing:-.025em;
  overflow-wrap:anywhere;
}
.values-grid article p{
  margin:0;
  color:#647789;
  font-size:15px;
  line-height:1.65;
  overflow-wrap:anywhere;
}

/* In-view cards enter one after another, moving slowly from left to right. */
.js-scroll-reveal .values-grid article.scroll-reveal{
  opacity:0;
  transform:translate3d(-34px,0,0);
  transition:opacity 1.3s cubic-bezier(.16,.72,.22,1),
             transform 1.3s cubic-bezier(.16,.72,.22,1),
             background-color .35s ease,box-shadow .45s ease;
  transition-delay:var(--reveal-delay,0ms);
  will-change:opacity,transform;
}
.js-scroll-reveal .values-grid article.scroll-reveal.is-visible{
  opacity:1;
  transform:translate3d(0,0,0);
}
html[data-theme="dark"] .values-grid article{
  background:#1b2b5b!important;
  color:#f6fbff!important;
  border:1px solid rgba(160,236,0,.24);
  border-top:2px solid #a0ec00;
  box-shadow:0 16px 38px rgba(160,236,0,.10),0 8px 24px rgba(0,0,0,.18);
}
html[data-theme="dark"] .values-grid article h3{color:#f6fbff!important}
html[data-theme="dark"] .values-grid article p{color:#c2d0e2!important}
html[data-theme="dark"] .values-grid article>span{color:#a0ec00!important}
html[data-theme="dark"] .values-grid article:hover{
  box-shadow:0 20px 46px rgba(160,236,0,.18),0 12px 28px rgba(0,0,0,.2);
}
@media(max-width:1000px){
  .values-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .values-grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .values-grid article{min-height:190px;padding:24px}
  .values-grid article h3{margin-top:34px;font-size:20px}
}
@media(prefers-reduced-motion:reduce){
  .values-grid article,.values-grid article:hover,
  .js-scroll-reveal .values-grid article.scroll-reveal,
  .js-scroll-reveal .values-grid article.scroll-reveal.is-visible{
    transition:none!important;transform:none!important;opacity:1!important;will-change:auto;
  }
}