/* Case studies page — matches the Figma frame "Case studies — Desktop 1440" (page "Case studies").
   Load AFTER thinking.css and sheets.css; reuses .wrap, .rule, .entry, .meta, .pill, .scope/.stat from thinking.css. */

/* ---------- intro ---------- */
.cs-intro{display:flex;flex-direction:column;gap:24px;align-items:flex-start;padding-top:clamp(56px,8.33vw,120px);padding-bottom:clamp(64px,7.8vw,112px)}
.cs-intro h1{font:400 clamp(56px,7.8vw,112px)/1.04 var(--serif);letter-spacing:-.01em}
.cs-lede{font-size:clamp(18px,1.88vw,27px);line-height:1.4;max-width:560px}

/* ---------- company blocks: dotted rule, then meta (349) + cards (699) ---------- */
.cs-company .entry{padding:clamp(40px,5vw,72px) 0 clamp(48px,5vw,72px)}
.cs-company:last-of-type .entry{padding-bottom:clamp(64px,8.3vw,120px)}
.cs-company>.rule{margin-top:35px}                        /* the empty section label above the first rule */
.cs-divider{padding:30px 0 29px}                          /* 60px band with the rule centred, between companies */
.cs-meta{display:flex;flex-direction:column;gap:8px}
.cs-meta h2{font:400 clamp(28px,2.8vw,40px)/1.1 var(--serif)}
.cs-years{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cs-meta p{font-size:18px;line-height:1.4}
.cs-meta p+p{margin-top:17px}                             /* the blank line between the two sentences */

/* ---------- cards ---------- */
.cs-cards{display:flex;flex-direction:column;gap:28px;min-width:0}
.cs-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:36px;border-radius:20px}
.cs-card.is-soon{border:1px dashed rgba(24,46,222,.55);padding:35px}
.cs-visual{aspect-ratio:627/353;border-radius:14px;overflow:hidden;margin-bottom:14px;background:#00224b}
.cs-visual img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.cs-card.is-live:hover .cs-visual img{transform:scale(1.02)}
.cs-kicker{font-size:17px;line-height:1.4}
.cs-title{font:400 clamp(28px,2.8vw,40px)/1.2 var(--serif)}
.cs-body{font-size:clamp(17px,1.25vw,18px);line-height:1.5;color:var(--muted);max-width:600px}

.cs-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.cs-top .pills{margin-top:0}
.cs-card .pill{height:24px;font:400 13px/1.4 var(--sans);letter-spacing:.06em}
.cs-soon{padding:3px 10px;border-radius:9999px;background:#ffefb5;color:#7a5800;font:400 12px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase}

.cs-facts{margin-top:0;padding-top:14px;gap:40px;flex-wrap:nowrap}
.cs-facts .stat b{font-size:clamp(40px,3.6vw,52px)}
.cs-facts .stat span{max-width:170px}

/* the CTA's hit area covers the whole live card */
.cs-cta{align-self:flex-start;padding-top:18px;font:400 16px/1.4 var(--sans);color:var(--brand);text-decoration:none}
.cs-cta span{text-decoration:underline dotted;text-underline-position:from-font}
.cs-cta::after{content:"";position:absolute;inset:0;border-radius:inherit}
.cs-cta:hover span{text-decoration-style:solid}

.cs-outcome{display:flex;flex-direction:column;gap:4px;padding-top:16px;border-top:1px solid rgba(24,46,222,.12);line-height:1.4}
.cs-outcome span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cs-outcome p,.cs-outcome ul{font-size:17px;color:var(--ink);max-width:600px}
.cs-outcome ul{padding-left:25.5px}
.cs-meta strong{font-weight:400}
.cs-card>.pills{margin-top:0}

.cols a[aria-current="page"]{text-decoration:underline}

@media (max-width:900px){
  .cs-facts{flex-wrap:wrap;gap:24px 40px}
}
@media (max-width:640px){
  .cs-card{padding:24px}
  .cs-card.is-soon{padding:23px}
}