/* ============================================================
   Case study detail pages — shared styles for case-<id>.html /
   _case-<id>_body.html pairs. All new classes are prefixed
   cdp- to avoid collisions with any other page's CSS. Reuses
   existing shared primitives (.hero-split, .hero-facts, .cstat,
   .case-tags, .section, .page-hero, .display, .lead, .h2) from
   assets/styles.css rather than re-implementing them.
   ============================================================ */

.cdp-hero-figure{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--bone);
  aspect-ratio:4/3;
}
.cdp-hero-figure img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.cdp-hero-tags{margin-top:22px}
.cdp-tech-section .section-head{margin-bottom:20px}
.cdp-tech-tags i{background:var(--paper)}
.cdp-copy{max-width:820px}
.cdp-copy h2{margin-bottom:18px}
.cdp-copy p{color:var(--mut);line-height:1.75;font-size:1rem}
.cdp-results-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:16px;
}
.cdp-results-list li{
  position:relative;
  padding-left:26px;
  color:var(--ink);
  line-height:1.65;
}
.cdp-results-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--yellow);
}

@media(max-width:900px){
  .cdp-hero-figure{aspect-ratio:16/10;margin-top:8px}
}