/* A case study page. The opening is the inner-page opening (eyebrow, name, one line, the
   service pills) over the project's main picture on a tinted panel; the story then runs in
   parts, copy beside a picture, sides alternating; the tools as pills; and the way on. */
.cs{background:#fff}
.cs__inner{max-width:var(--container-max);margin:0 auto;padding-inline:var(--gutter)}

/* ---- opening ------------------------------------------------------------------ */
.cs__hero{padding-top:var(--section-pad)}
.cs__hero-inner{max-width:56rem;text-align:center}
.cs__hero-inner .eyebrow{text-align:center}
.cs__title{margin-top:1.25rem}
.cs__hero-inner .sec-sub{margin-top:clamp(1rem,2.5vw,1.5rem);max-width:38rem}
.cs__pills{list-style:none;margin:clamp(1.25rem,3vw,1.75rem) 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.cs__pill{
  padding:.3rem .7rem;border-radius:.5rem;background:var(--tint-1);
  font-weight:var(--w-ui);font-size:var(--cap-size);line-height:var(--cap-lh);letter-spacing:var(--eyebrow-track);
  text-transform:uppercase;color:var(--blue);
}
/* The main picture: the mockups arrive on their own backgrounds, so the panel is a quiet
   tinted ground that suits any of them, and the picture sits inside it rather than filling. */
.cs__main{
  margin:clamp(2.5rem,5vw,3.5rem) auto 0;max-width:var(--container-max);padding-inline:var(--gutter);
}
.cs__mainimg{
  display:block;width:100%;height:auto;max-height:min(70vh,44rem);object-fit:contain;
  border-radius:1.25rem;
  background:radial-gradient(60% 70% at 70% 30%,var(--tint-2),transparent 70%),var(--wash,#f7f8fa);
}

/* ---- the story ------------------------------------------------------------------ */
.cs__story{padding-top:calc(var(--section-pad) * .5)}
.cs__part{padding:calc(var(--section-pad) * .5) 0}
.cs__part-inner{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:clamp(2.5rem,6vw,6rem);row-gap:2rem;align-items:center;
}
/* Sides alternate so the eye zigzags down the page rather than reading a table. */
.cs__part:nth-child(even) .cs__copy{order:2}
.cs__part--text .cs__part-inner{grid-template-columns:minmax(0,46rem)}
.cs__copy .eyebrow{margin-bottom:1.25rem}
.cs__prose{font-size:var(--body-size);line-height:var(--body-lh);letter-spacing:var(--body-track);color:var(--ink-q)}
.cs__prose>*+*{margin-top:1rem}
.cs__prose p{margin:0}
.cs__prose ul,.cs__prose ol{margin:0;padding-left:1.25rem}
.cs__prose li+li{margin-top:.5rem}
.cs__prose li::marker{color:var(--blue)}
.cs__prose strong{font-weight:var(--w-ui);color:var(--ink-heading)}
.cs__pic{margin:0}
.cs__img{
  display:block;width:100%;height:auto;object-fit:contain;
  border-radius:1.25rem;background:radial-gradient(60% 70% at 70% 30%,var(--tint-2),transparent 70%),var(--wash,#f7f8fa);
}

/* ---- tools, and the way on ------------------------------------------------------- */
.cs__tools{padding:calc(var(--section-pad) * .5) 0}
.cs__tools .eyebrow{margin-bottom:1rem}
.cs__pills--tools{justify-content:flex-start;margin-top:0}
.cs__pills--tools .cs__pill{background:var(--panel-bg);color:var(--ink-q)}

.cs__more{padding:calc(var(--section-pad) * .5) 0 var(--section-pad)}
.cs__more-inner{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:1.5rem;
  padding-top:clamp(1.5rem,3vw,2rem);border-top:1px solid var(--hairline);
}
.cs__adj{display:flex;flex-direction:column;gap:.25rem;text-decoration:none;color:var(--ink-heading)}
.cs__adj--next{text-align:right;align-items:flex-end}
.cs__adj-label{font-weight:var(--w-ui);font-size:var(--cap-size);line-height:var(--cap-lh);letter-spacing:var(--eyebrow-track);text-transform:uppercase;color:var(--muted-3)}
.cs__adj-title{font-family:var(--font-display);font-weight:var(--w-display);font-size:var(--h4-size);line-height:var(--h4-lh);letter-spacing:var(--h4-track);transition:color var(--dur) var(--ease)}
.cs__adj:hover .cs__adj-title{color:var(--blue)}
.cs__all{min-width:13.5rem;max-width:100%}

@media (max-width:64em){
  .cs__part-inner{grid-template-columns:1fr}
  .cs__part:nth-child(even) .cs__copy{order:0}
  .cs__pic{max-width:36rem}
  .cs__more-inner{grid-template-columns:1fr;text-align:center}
  .cs__adj,.cs__adj--next{align-items:center;text-align:center}
  .cs__all{justify-self:center}
}