/* Case-study page additions, on top of k2.css */

/* ==================================================================
   CASE STUDY PAGE — additions on top of the shared system
   ================================================================== */

.case-hero{ padding:clamp(44px,6vw,96px) 0 clamp(28px,3.4vw,50px); }
.case-hero h1{ font-size:clamp(32px,5.4vw,76px); line-height:1.02; max-width:24ch; }
.case-lede{
  margin:clamp(20px,2.4vw,32px) 0 0; max-width:74ch;
  font-family:var(--body); font-weight:300;
  font-size:clamp(16px,1.3vw,20px); line-height:1.55; color:var(--bone-2);
}

/* the meta block: client / years / scope / stack */
.meta{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(1px,.2vw,2px);
  background:var(--glass); backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-br); border-radius:6px; overflow:hidden;
}
.meta > div{
  padding:clamp(18px,2vw,26px); border-left:1px solid var(--glass-br);
  min-width:0;
}
.meta > div:first-child{ border-left:0; }
.meta dt{
  font-family:var(--mono); font-size:clamp(9px,.72vw,10.5px);
  letter-spacing:.17em; text-transform:uppercase; margin:0 0 10px;
  color:var(--bone-3);
}
.meta dd{
  margin:0; font-size:clamp(13.5px,.98vw,15.5px); color:var(--bone-2);
  font-weight:300; line-height:1.5;
}

/* body copy blocks */
.block{ max-width:74ch; }
.block p{ margin:0 0 clamp(14px,1.5vw,20px); color:var(--bone-2); font-weight:300;
  font-size:clamp(14.5px,1.05vw,17px); line-height:1.62; }
.block p:last-child{ margin-bottom:0; }
.block p.lead{ color:var(--bone); }

/* did-list */
.did{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(8px,.9vw,12px); }
.did li{
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:baseline;
  padding:clamp(15px,1.7vw,22px) clamp(16px,1.8vw,24px);
  background:var(--glass); backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-br); border-radius:6px;
  color:var(--bone-2); font-weight:300; font-size:clamp(14px,1vw,16px); line-height:1.55;
}
.did li::before{
  content:""; width:6px; height:6px; border-radius:50%;
  transform:translateY(-2px); background:var(--bone-3);
}

/* the headline result */
/* no panel at all: the number carries itself, and sits flush with the section
   heading the way .block does. */
.result{ margin-top:clamp(18px,2.2vw,30px); }
.result b{
  display:block; font-family:var(--disp); font-weight:var(--disp-w);
  font-size:clamp(28px,4.4vw,60px); line-height:1.04; letter-spacing:-.028em;
  color:var(--bone);
}
.result span{ display:block; margin-top:clamp(12px,1.4vw,18px); max-width:56ch;
  color:var(--bone-2); font-weight:300; font-size:clamp(14px,1vw,16.5px); line-height:1.6; }

.case-cta{ display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  margin-top:clamp(28px,3.4vw,52px); }

/* ---- tighter vertical rhythm on case pages (was clamp(66px,9vw,150px)) ---- */
.case .sec{ padding:clamp(30px,3.6vw,56px) 0; }
.case .case-hero{ padding:clamp(34px,4vw,62px) 0 clamp(18px,2vw,28px); }
.case .sec + .sec{ border-top:1px solid var(--hair-2); }

/* ---- screenshot at the top of a case, when there is one ---- */
/* every case screenshot occupies the same box — a 16:10 frame — whatever the
   source aspect is, so the pages line up when you click between them.
   Landscape shots fill it; the portrait pair is contained inside it. */
.caseshot{
  margin:clamp(20px,2.4vw,32px) 0 0; border-radius:6px; overflow:hidden;
  border:1px solid var(--glass-br); background:var(--void-3);
  aspect-ratio:16/10;
}
.caseshot img{ width:100%; height:100%; object-fit:cover; display:block; }
/* two landscape shots share the frame, half each */
.caseshot.two{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--glass-br);
}
.caseshot.two img{ border-radius:0; }
/* phone screenshots: same frame, but contained and centred rather than cropped */
.caseshot.phones{
  display:flex; flex-wrap:nowrap; justify-content:center; align-items:center;
  gap:clamp(12px,1.6vw,26px); padding:clamp(14px,1.8vw,26px);
}
.caseshot.phones img{
  width:auto; height:100%; max-width:44%; object-fit:contain;
  border-radius:4px;
}
@media (max-width:760px){
  .caseshot.two{ grid-template-columns:1fr; grid-template-rows:1fr 1fr; }
}