/* ═══════════════════════════════════════════════════
   COMPONENTS.CSS — Shared reusable UI components
   Load order: tokens.css → main.css → components.css → page.css
   ═══════════════════════════════════════════════════ */

/* ─── PROOF / CASE STUDY GRID ─── */

.proof{background:#fff;padding:120px 100px;}
.proof-hed{
  font-family:'Host Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:clamp(40px,4.5vw,64px);font-weight:700;
  text-transform:none;letter-spacing:-.02em;line-height:.97;
  margin-bottom:72px;
}
.proof-hed em{font-style:normal;color:var(--metric-color, var(--blue));}
.cases{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:24px;margin-bottom:0;
}
.case{background:#fff;padding:0 0 48px;overflow:hidden;position:relative;border:1px solid #e0e0e6;display:flex;flex-direction:column;}
.case:hover .case-img{transform:scale(1.03);}
.case-img-wrap{position:relative;display:block;height:280px;overflow:hidden;}
.case-logo{
  position:absolute;
  bottom:20px;left:24px;
  height:36px;width:auto;
  object-fit:contain;
  object-position:left center;
  opacity:.9;
  filter:brightness(0) invert(1);
  z-index:3;
  pointer-events:none;
}
.case-logo--sm{height:18px;}
.case-logo--xl{height:58px;}
.case-img{width:100%;height:280px;object-fit:cover;display:block;margin-bottom:32px;transition:transform .5s;}
.case-video{width:100%;height:280px;object-fit:cover;display:block;margin-bottom:32px;transition:transform .5s;}
.case:hover .case-video{transform:scale(1.03);}
.case-inner{padding:32px 36px 0;display:flex;flex-direction:column;flex:1;}
.case-tags{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.case-tag-pill{
  font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--teal);border:1px solid rgba(1,176,175,.3);
  border-radius:3px;padding:3px 10px;
}
.case-tag-pill.industry{color:#aaa;border-color:#ddd;}
.case-sub{font-size:13px;font-weight:400;color:#888;margin-bottom:4px;}
.case-title{
  font-family:'Host Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:clamp(20px,1.8vw,26px);font-weight:700;
  text-transform:none;letter-spacing:-.02em;line-height:1.1;
  color:#000;margin-bottom:14px;
}
.case-body{font-size:14px;font-weight:400;line-height:1.7;color:#000;margin-bottom:24px;flex:1;}
.case-divider{height:1px;background:#eee;margin-bottom:20px;}
.case-metrics{display:flex;gap:32px;}
.metric-n{
  font-family:'Host Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:28px;font-weight:700;letter-spacing:-.04em;color:var(--metric-color, var(--blue));line-height:1;
}
.metric-l{font-size:10px;color:#888;letter-spacing:.08em;margin-top:4px;text-transform:uppercase;}

/* ─── CASE GRID CTA ─── */

.case-grid-cta{display:flex;justify-content:flex-end;padding:32px 0 30px;}
.case-grid-cta a{
  font-size:13px;font-weight:600;letter-spacing:.06em;
  color:#000;text-decoration:none;
  transition:color .2s;
}
.case-grid-cta a:hover{color:var(--blue);}

/* ─── CASES MOBILE STACK (FIX 5 — partner LPs match homepage stacked pattern) ─── */

@media (max-width: 900px) {
  .cases{grid-template-columns:1fr;gap:24px;}
  .case-img-wrap{height:240px;}
  .case-img,.case-video{height:240px;}
  .case-inner{padding:24px 24px 0;}
  .case-metrics{gap:20px;flex-wrap:wrap;}
}
@media (max-width: 480px) {
  .case-img-wrap{height:200px;}
  .case-img,.case-video{height:200px;}
  .case-inner{padding:20px 20px 0;}
}