/* Lime values cards: unclipped typography, brand surfaces, subtle Lime glow and horizontal reveal. */
:root { --lime-values-navy:#002B66; --lime-values-accent:#A0EC00; }
.value-grid,.values-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,1.8vw,26px);align-items:stretch
}
.value-grid>div,.values-grid>article{
  box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;
  min-width:0;min-height:245px;height:auto;padding:28px 25px 26px;overflow:visible;
  border:1px solid rgba(160,236,0,.24);border-top:3px solid var(--lime-values-navy);
  border-radius:20px;background:#fff;color:var(--lime-values-navy);
  box-shadow:0 12px 30px rgba(160,236,0,.13),0 5px 18px rgba(0,43,102,.06);
  transition:box-shadow .5s ease,border-color .35s ease,background-color .35s ease
}
.value-grid>div:hover,.values-grid>article:hover{
  box-shadow:0 16px 36px rgba(160,236,0,.2),0 7px 20px rgba(0,43,102,.08)
}
.value-grid>div>span,.values-grid>article>span{
  display:block;margin:0;color:var(--lime-values-accent);font-size:13px;
  line-height:1.45;font-weight:800;letter-spacing:.04em
}
.value-grid>div h3,.values-grid>article h3{
  margin:42px 0 14px;color:var(--lime-values-navy);
  font-size:clamp(17px,1.25vw,22px);line-height:1.3;letter-spacing:-.025em;
  overflow:visible;overflow-wrap:anywhere;hyphens:auto
}
.value-grid>div p,.values-grid>article p{
  margin:0;color:#647789;font-size:15px;line-height:1.7;
  overflow:visible;overflow-wrap:anywhere;hyphens:auto
}
/* Dark mode: exact Lime navy card surface. */
html[data-theme="dark"] .value-grid>div,
html[data-theme="dark"] .values-grid>article{
  background:#002B66!important;color:#F6FBFF!important;
  border:1px solid rgba(160,236,0,.28)!important;border-top:3px solid #A0EC00!important;
  box-shadow:0 13px 32px rgba(160,236,0,.15),0 5px 18px rgba(0,0,0,.18)!important
}
html[data-theme="dark"] .value-grid>div h3,
html[data-theme="dark"] .values-grid>article h3{color:#fff!important}
html[data-theme="dark"] .value-grid>div p,
html[data-theme="dark"] .values-grid>article p{color:#D5E3F2!important}
html[data-theme="dark"] .value-grid>div>span,
html[data-theme="dark"] .values-grid>article>span{color:#A0EC00!important}
html[data-theme="dark"] .value-grid>div:hover,
html[data-theme="dark"] .values-grid>article:hover{
  box-shadow:0 17px 40px rgba(160,236,0,.22),0 7px 20px rgba(0,0,0,.2)!important
}
/* Scroll-triggered, slow left-to-right glide with staggered timing. */
html.js-scroll-reveal .value-grid>div.scroll-reveal,
html.js-scroll-reveal .values-grid>article.scroll-reveal{
  opacity:0;transform:translate3d(-42px,0,0);
  transition:opacity 1.45s cubic-bezier(.16,.72,.22,1),
    transform 1.45s cubic-bezier(.16,.72,.22,1),
    box-shadow .5s ease,background-color .35s ease;
  transition-delay:var(--reveal-delay,0ms);will-change:opacity,transform
}
html.js-scroll-reveal .value-grid>div.scroll-reveal.is-visible,
html.js-scroll-reveal .values-grid>article.scroll-reveal.is-visible{
  opacity:1;transform:translate3d(0,0,0)
}
@media(max-width:1000px){.value-grid,.values-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
  .value-grid,.values-grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .value-grid>div,.values-grid>article{min-height:0;padding:24px}
  .value-grid>div h3,.values-grid>article h3{margin-top:32px;font-size:20px}
  .value-grid>div p,.values-grid>article p{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  html.js-scroll-reveal .value-grid>div.scroll-reveal,
  html.js-scroll-reveal .values-grid>article.scroll-reveal,
  html.js-scroll-reveal .value-grid>div.scroll-reveal.is-visible,
  html.js-scroll-reveal .values-grid>article.scroll-reveal.is-visible{
    opacity:1!important;transform:none!important;transition:none!important;will-change:auto
  }
}