/* Case study template — clean, self-contained styles.
   Loaded per page from layouts/case-study/single.html (head-extra block).
   Everything is scoped under .cs- prefixes so the migrated Oxygen bundle
   (needed for the shared header/footer chrome) cannot bleed in. */

/* Palette and type scale measured off the live pages (see the CDP style-diff in
   the PR) rather than invented — these are the real brand values. */
.cs {
  --cs-green: #00ab4e;
  --cs-green-dark: #00913f;
  --cs-red: #e03b3b;
  --cs-ink: #172b4d;          /* headings, labels, quotes */
  --cs-body: #445365;         /* body copy */
  --cs-muted: #445365;
  --cs-line: #dbe2ec;
  --cs-surface: #eff3f8;      /* hero band + fact card */
  --cs-band: rgba(0, 170, 78, 0.2);   /* stat strip */
  --cs-max: 1344px;   /* 1296 content + 24px gutters, matching live */
  --cs-radius: 16px;
  color: var(--cs-body);
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 2;
}

.cs *,
.cs *::before,
.cs *::after { box-sizing: border-box; }

/* AOS parks fade-left/right elements 100px off to the side before revealing
   them, which on a narrow screen makes the page scroll sideways. Live clips
   this with `body { overflow: hidden }` from its Oxygen bundle; the bundle these
   pages load has no such rule. `clip` rather than `hidden` so the sticky fact
   card keeps working — clip does not create a scroll container. */
.cs { overflow-x: clip; }

.cs-wrap {
  max-width: var(--cs-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* :where() keeps this reset at zero specificity for the tag part, so the
   component rules below (.cs-hero__title, .cs-cta__title, …) can still set
   their own margins. */
.cs :where(h1, h2, h3, h4) {
  color: var(--cs-ink);
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}

/* The migrated Oxygen bundle styles bare `a:link` / `a:visited`, which
   out-specifies a plain class selector — hence the doubled-up selectors here. */
.cs a:link,
.cs a:visited { color: var(--cs-green-dark); }

.cs img { max-width: 100%; height: auto; display: block; }

/* ---------- buttons ---------- */

.cs a.cs-btn,
.cs a.cs-btn:link,
.cs a.cs-btn:visited {
  display: inline-block;
  padding: 9px 30px;
  border-radius: 999px;
  background: var(--cs-green);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background 0.18s ease;
}

.cs a.cs-btn:hover { background: var(--cs-green-dark); color: #fff; }

.cs a.cs-btn--ghost,
.cs a.cs-btn--ghost:link,
.cs a.cs-btn--ghost:visited {
  background: transparent;
  border: 2px solid var(--cs-green);
  color: var(--cs-green-dark);
  padding: 11px 24px;
}

.cs a.cs-btn--ghost:hover { background: var(--cs-green); color: #fff; }

/* ---------- hero ---------- */

.cs-hero { background: var(--cs-surface); padding: 0; }

/* Full-bleed: the image runs to the left edge, the copy column is padded so its
   text lines up near the content wrap on common desktop widths. */
.cs-hero__inner {
  display: grid;
  grid-template-columns: 51% 49%;   /* live hero image is 737px of 1440 */
  align-items: center;
  gap: 0;
}

.cs-hero__media {
  position: relative;
  align-self: stretch;
  min-height: 461px;
  /* the live pages lay a transparent PNG over the image to angle its right
     edge; clip-path does the same thing without the extra request */
  clip-path: polygon(0 0, 100% 0, calc(100% - 90px) 100%, 0 100%);
}

.cs-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-hero__body {
  padding: 56px clamp(24px, 5vw, 72px);
  max-width: 747px;   /* gives the 603px headline width live uses */
}

.cs-hero__title {
  font-size: clamp(28px, 3.01vw, 43.33px);   /* live h1 is 43.333px */
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0;
}

.cs-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 12px 0 30px;
  font-size: 16px;
  font-weight: 500;
  color: var(--cs-green);
}

.cs a.cs-eyebrow__link:link, .cs a.cs-eyebrow__link:visited,
.cs-eyebrow a { color: var(--cs-green); text-decoration: none; }
.cs-eyebrow a:hover { text-decoration: underline; }
.cs-eyebrow__sep,
.cs-eyebrow__kind { color: var(--cs-green); }

/* ---------- two-column body ---------- */

.cs-main { padding: 56px 0 24px; }

.cs-layout {
  display: grid;
  grid-template-columns: 389px minmax(0, 1fr);   /* matches the live fact card */
  gap: clamp(48px, 11vw, 149px);                 /* live gutter is 149px */
  align-items: start;
}

/* ---------- sidebar fact card ---------- */

.cs-aside {
  position: sticky;
  top: 110px;
  margin-top: -94px;      /* live lifts the card over the hero band */
}

.cs-card {
  border-radius: 6px;        /* live: 6px on 9 pages, 16px on 5 */
  background: var(--cs-surface);
  padding: 0 39px 34px;      /* live has no top padding: the logo sits flush */
}

.cs-card__logos {
  display: flex;
  flex-wrap: nowrap;         /* two marks sit side by side, as live does */
  align-items: center;
  justify-content: center;   /* live centres the client mark */
  gap: 8px;
  /* Live puts no padding above the card (13 of 14 pages) because the square
     156px logos carry their own whitespace — but a short, wide logo then touches
     the edge, which is what happened to Boncafe. Reserving the same 156px of
     height centres those instead, without moving the square ones. */
  min-height: 156px;
  margin-bottom: 0;
}
.cs-card__logos img {
  width: auto;
  height: auto;
  max-width: 156px;
  max-height: 156px;      /* live renders the client marks at 156px */
  min-width: 0;           /* lets two marks shrink to fit rather than wrap */
  flex: 0 1 auto;
  object-fit: contain;
}

.cs-fact + .cs-fact { margin-top: 15.5px; }

.cs-fact__label {
  font-size: 20px;
  font-weight: 500;
  color: var(--cs-ink);
  line-height: 1.4;
  margin-bottom: 6px;
}

/* live indents the value under its label */
.cs-fact__value { font-size: 16px; color: var(--cs-body); margin-left: 15.5px; }

.cs-ticks { list-style: none; margin: 0; padding: 0; }

.cs-ticks li {
  display: flex;
  align-items: center;
  gap: 15.5px;
  padding-left: 15.5px;      /* live indents the icon from the label */
  font-size: 16px;
  color: var(--cs-body);
}

.cs-ticks li + li { margin-top: 15.5px; }

.cs-ticks--flag li { padding-left: 21px; gap: 21px; }

/* real glyphs, inlined as a sprite in the template */
.cs-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.cs-ico {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.cs-ico--check { color: var(--cs-green); }
.cs-ico--flag  { color: var(--cs-red); }



/* optional embed in the fact card (e.g. a LinkedIn post) */
.cs-embed {
  margin-top: 20px;
  aspect-ratio: 3 / 4;
  border-radius: var(--cs-radius);
  overflow: hidden;
  background: var(--cs-surface);
}

.cs-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

.cs-card__cta {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--cs-line);
}

.cs-card__cta h3 { font-size: 17px; margin-bottom: 16px; }

/* ---------- article column ---------- */

.cs-article > * + * { margin-top: 40px; }

/* stat strip */

.cs-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 24px 20px;
  padding: 30px 34px;
  border-radius: 6px;
  background: var(--cs-band);
}

.cs-stat__value {
  display: block;
  font-size: clamp(30px, 3vw, 43px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--cs-green);
}

.cs-stat__unit { font-size: 0.55em; margin-left: 2px; }

.cs-stat__label {
  display: block;
  margin-top: 2px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--cs-body);
}

.cs-lead { font-size: 16px; color: var(--cs-green); }
.cs-lead p + p { margin-top: 1em; }

/* pull quote */

.cs-quote {
  margin: 0;                       /* browser default blockquote margin was
                                      shrinking the quote by 80px */
  border-left: 4px solid var(--cs-green);
  padding: 4px 0 4px 16px;
}

.cs-quote__text {
  font-size: clamp(21px, 2.1vw, 28px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  color: var(--cs-ink);
}

.cs-quote__by {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

.cs-quote__by img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.cs-quote__name { font-size: 20px; font-weight: 500; color: var(--cs-ink); }
.cs-quote__role { font-size: 16px; color: var(--cs-body); }

/* figures */

.cs-figure figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--cs-muted);
}

.cs-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.cs-gallery img { border-radius: var(--cs-radius); width: 100%; }

/* sections */

.cs-section__title {
  /* live is inconsistent — 28px on 11 of 15 pages, 40px on 4. Normalised to the
     majority rather than encoding a per-page size into content. */
  font-size: clamp(24px, 2vw, 28px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--cs-ink);
  margin-bottom: 26px;
}

.cs-section > * + * { margin-top: 20px; }

.cs-blocks { list-style: none; margin: 0; padding: 0; }

.cs-blocks li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.cs-blocks li + li { margin-top: 18px; }

.cs-blocks .cs-ico { margin-top: 0.5em; }

.cs-blocks__title { display: block; font-weight: 600; color: var(--cs-ink); }
.cs-prose, .cs-section > div { color: var(--cs-body); }

/* results checklist — green tick, figure, then label, all at body size */

.cs-results { list-style: none; margin: 0; padding: 0; }

.cs-results li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  min-height: 50px;
  padding-left: 15px;
  font-size: 16px;
  line-height: 2;
}

.cs-results__value {
  color: var(--cs-green);
  font-weight: 500;
}

.cs-results__unit { color: var(--cs-green); font-weight: 400; }

.cs-results__label { color: var(--cs-body); margin-left: 5px; }

/* prose — the markdown body */

.cs-prose > * + * { margin-top: 1.1em; }
.cs-prose h2 { font-size: clamp(22px, 2.2vw, 28px); margin-top: 1.6em; }
.cs-prose h3 { font-size: clamp(19px, 1.8vw, 22px); margin-top: 1.5em; }
.cs-prose h4 { font-size: 18px; margin-top: 1.4em; }
.cs-prose ul, .cs-prose ol { padding-left: 1.3em; }
.cs-prose li + li { margin-top: 0.5em; }
.cs-prose strong { color: var(--cs-ink); font-weight: 600; }
.cs-prose img { border-radius: var(--cs-radius); margin: 1.4em 0; }

.cs-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.cs-prose th {
  background: var(--cs-green);
  color: #fff;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--cs-green);
}

.cs-prose td { border: 1px solid var(--cs-line); padding: 9px 12px; vertical-align: top; }

/* video */

.cs-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--cs-radius);
  overflow: hidden;
  background: #000;
}

.cs-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* video-only variant */

.cs-videopage { padding: 56px 0 24px; }
.cs-videopage__title {
  font-size: clamp(28px, 3.1vw, 40px);
  text-align: center;
  margin-bottom: 32px;
}
.cs-videopage .cs-video { max-width: 960px; margin: 0 auto; }

/* ---------- other case studies ---------- */

.cs-more {
  padding: 64px 0;
  border-top: 1px solid var(--cs-line);
  margin-top: 64px;
}

.cs-more__title { font-size: clamp(22px, 2.2vw, 28px); margin-bottom: 28px; }

.cs-more__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

.cs-more__card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius);
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.cs-more__card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
  transform: translateY(-2px);
}

.cs-more__thumb {
  aspect-ratio: 16 / 10;
  background: var(--cs-surface) center / cover no-repeat;
}

.cs-more__body { padding: 18px; }

.cs-more__cat {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cs-green);
  margin-bottom: 8px;
}

.cs-more__name {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--cs-ink);
}

/* ---------- closing CTA ---------- */

.cs-cta {
  background: var(--cs-surface);
  padding: 64px 0;
  text-align: center;
}

.cs-cta__title {
  font-size: clamp(24px, 2.6vw, 34px);
  max-width: 22ch;
  margin: 0 auto 28px;
}

.cs-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

/* ---------- responsive ---------- */

@media (max-width: 991px) {
  .cs-hero__inner { grid-template-columns: 1fr; }
  .cs-hero__media { min-height: 220px; max-height: 260px; }
  .cs-hero__body { padding: 32px 24px 40px; }
  .cs-layout { grid-template-columns: 1fr; gap: 40px; }
  .cs-aside { position: static; margin-top: 0; }
  .cs-main { padding-top: 36px; }
}

@media (max-width: 600px) {
  .cs { font-size: 16px; }
  .cs-quote { padding-left: 20px; }
  .cs-stats { padding: 22px; }
}