.cases { background:#036533 url("../assets/case-study-bg.svg") center / cover no-repeat; color:#fff; }
.case-card__photo { background-image:url("../assets/case/figma-case1.png"); }
.case-card--02 .case-card__photo { background-image:url("../assets/case/figma-case2.png"); }
.case-card--03 .case-card__photo { background-image:url("../assets/case/figma-case3.png"); }
.case-card__photo::after { background:#00512f; clip-path:polygon(15% 0,100% 0,100% 100%,0 100%); }
.case-card__body { z-index:2; height:calc(484 / 14.4 * 1cqw); margin-top:calc(69 / 14.4 * 1cqw); padding:calc(29 / 14.4 * 1cqw) calc(35 / 14.4 * 1cqw); background:rgba(3,101,51,.78); border:1px solid rgba(255,255,255,.13); box-shadow:none; }
.case-card__results { color:var(--orange); }
.case-card__results span { color:#fff; font-size:.72em; }
.case-card__body ul,.case-card__body p { color:#fff; }
.case-card__body p { line-height:1.5; }
/* Reason tiles are text-first; keep secondary caption aligned like the Figma layer. */
.reason-grid li small { display:block; margin-top:.2em; color:var(--ink); font-size:.58em; font-weight:700; }
@media (max-width:767px) {
  .cases { background:#036533 url("../assets/case-study-bg.svg") center / cover no-repeat; padding-left:calc(10 / 3.75 * 1cqw); padding-right:calc(10 / 3.75 * 1cqw); }
  .cases .section-heading { width:100%; margin-bottom:calc(47 / 3.75 * 1cqw); }
  .cases .section-heading h2 { font-size:calc(27 / 3.75 * 1cqw); }
  .cases .section-heading > p:last-child { width:100%; font-size:calc(13 / 3.75 * 1cqw); line-height:1.7; }
  .case-list { gap:calc(43 / 3.75 * 1cqw); }
  .case-card { display:block; width:100%; min-height:0; }
  .case-card__photo { width:100%; height:calc(168 / 3.75 * 1cqw); }
  .case-card__photo > span { top:calc(5 / 3.75 * 1cqw); left:calc(8 / 3.75 * 1cqw); font-size:calc(13 / 3.75 * 1cqw); }
  .case-card__photo > span b { font-size:calc(25 / 3.75 * 1cqw); }
  .case-card__photo > div { right:calc(9 / 3.75 * 1cqw); bottom:calc(7 / 3.75 * 1cqw); gap:calc(9 / 3.75 * 1cqw); }
  .case-card__photo strong { font-size:calc(15 / 3.75 * 1cqw); }
  .case-card__photo small { font-size:calc(8 / 3.75 * 1cqw); }
  .case-card__photo::after { height:calc(28 / 3.75 * 1cqw); }
  .case-card__body { height:auto; min-height:calc(380 / 3.75 * 1cqw); margin:0; padding:calc(25 / 3.75 * 1cqw) calc(12 / 3.75 * 1cqw); background:rgba(3,101,51,.8); }
  .case-card__results { min-height:calc(90 / 3.75 * 1cqw); }
  .case-card__results strong { font-size:calc(22 / 3.75 * 1cqw); }
  .case-card__body ul { gap:calc(3 / 3.75 * 1cqw); margin:calc(8 / 3.75 * 1cqw) 0 calc(12 / 3.75 * 1cqw); font-size:calc(11 / 3.75 * 1cqw); }
  .case-card__body p { font-size:calc(10 / 3.75 * 1cqw); line-height:1.5; }
}

@media (min-width:768px) {
  /* Figma desktop cards overlap the photo and information panel by ~145px. */
  .case-card { grid-template-columns:calc(828 / 14.4 * 1cqw) calc(692 / 14.4 * 1cqw); }
  .case-card__body { margin-left:calc(-146 / 14.4 * 1cqw); }
}