/* Performance metric / case-study result cards
   Structure: tags → big (yellow underline) → lbl → chips → CTA */

.metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.metric,
a.metric{
  background:var(--white,#ffffff);
  border:1px solid var(--line,#e7e6e1);
  border-radius:28px;
  padding:28px 26px 26px;
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  transition:box-shadow .25s,border-color .25s;
}

a.metric:hover{
  transform:none;
  box-shadow:0 14px 36px rgba(0,0,0,.07);
  border-color:#d8d8d2;
}

.metric .tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 22px;
}

.metric .tags span{
  font-family:'Poppins',sans-serif !important;
  font-size:10px;
  font-weight:500;
  color:var(--ink,#111) !important;
  background:#f2f2f2 !important;
  border:0 !important;
  border-radius:999px;
  padding:7px 14px;
  line-height:1.2;
  display:inline-flex;
  align-items:center;
  gap:0;
}

.metric .tags span::before{
  content:none !important;
  display:none !important;
}

.metric .big{
  font-size:clamp(48px,5.8vw,64px);
  font-weight:800;
  letter-spacing:-.04em;
  line-height:.95;
  color:var(--ink,#111);
}

.metric .big i{
  font-style:normal !important;
  position:relative;
  display:inline-block;
  padding:0 2px;
  z-index:0;
}

.metric .big i::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:calc(0.22em + 1px);
  bottom:-2px;
  background:var(--yellow,#f3e733);
  z-index:-1;
  pointer-events:none;
}

.metric .lbl{
  font-family:'Poppins',sans-serif;
  font-size:15px;
  font-weight:400;
  line-height:1.45;
  color:var(--ink,#111);
  margin:16px 0 0;
  max-width:28ch;
  min-height:auto;
}

.metric .chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
}

.metric .chips span{
  font-size:12.5px;
  font-family:'Poppins',sans-serif !important;
  font-weight:400;
  letter-spacing:0;
  color:#6C6C6C;
  border:1px solid #6C6C6C;
  border-radius:999px;
  padding:6px 14px;
  background:transparent;
}

.metric .cs-cta{
  margin-top:auto;
  padding-top:35px;
  font-family:'Poppins',sans-serif !important;
  font-size:15px;
  letter-spacing:0;
  text-transform:none;
  font-weight:600;
  color:#111;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  align-self:flex-start;
}

.metric .cs-cta .ar{
  transition:transform .2s;
}

a.metric:hover .cs-cta .ar{
  transform:translateX(5px);
}

/* Hide legacy who/bar if still present in markup */
.metric .who,
.metric .bar{
  display:none;
}

@media(max-width:980px){
  .metrics{grid-template-columns:1fr 1fr}
}

@media(max-width:620px){
  .metrics{grid-template-columns:1fr}
}