MAINHACK

Viewing / Editing File: cs.css

/* ==== Additions for Elementor build (tokens the case-study CSS expects) ==== */
.cs-cont{max-width:1180px;margin-inline:auto;width:100%;}
.cs-page{background:#ffffff;}
:root[data-theme="dark"] .cs-page{background:#242020;}
.cs{
  --bg:#ededeb; --bg-2:#ededeb; --surface:#ffffff; --media-fallback:#ededeb;
  --font-serif:"Georgia","Times New Roman",serif;
  --font-italic-serif:"Instrument Serif","Georgia",serif;
  --accent-soft:rgba(21,19,19,0.12);
  --radius-pill:999px; --radius-card:18px; --radius-media:12px;
  --ease:cubic-bezier(0.22,1,0.36,1); --ease-out:cubic-bezier(0.16,1,0.3,1);
  --dur:240ms; --dur-slow:700ms;
  --shadow-sm:0 12px 36px rgba(21,19,19,0.08);
  --shadow-md:0 18px 40px rgba(21,19,19,0.08);
  --shadow-lg:0 24px 48px rgba(21,19,19,0.14);
}
:root[data-theme="dark"] .cs{
  --bg:#0f0d0d; --bg-2:#0f0d0d; --surface:#242020; --media-fallback:#0f0d0d;
  --accent-soft:rgba(243,241,238,0.16);
}
.cs-prevnext .cs-cont{max-width:1100px;}
/* =========================================================
   Case Study (Working v12 — NHS Service Finder)
   ========================================================= */
:root {
  --cs-bg-card-soft: #ededeb;
  --cs-line-strong: rgba(21, 19, 19, 0.2);
  --cs-muted-3: #151313;
  --cs-pill-match-bg: #ededeb;
  --cs-pill-match-fg: #151313;
  --cs-pill-minor-bg: #ededeb;
  --cs-pill-minor-fg: #151313;
  --cs-pill-no-bg: #ededeb;
  --cs-pill-no-fg: #151313;
  --cs-nhs-blue: #151313;
  --cs-open-green: #151313;
  --cs-num-faint: rgba(21, 19, 19, 0.1);
  /* Timeline (migration stages) */
  --cs-tl-border: rgba(21, 19, 19, 0.2);
  --cs-tl-legend-bg: #ededeb;
  --cs-tl-early-fg: #151313;
  --cs-tl-aligned-fg: #151313;
  --cs-tl-aligned-stroke: #151313;
  --cs-tl-aligned-bg: #ededeb;
  --cs-tl-aligned-tint: rgba(21, 19, 19, 0.06);
  --cs-tl-first-tint: rgba(21, 19, 19, 0.02);
}
:root[data-theme="dark"] {
  --cs-bg-card-soft: #0f0d0d;
  --cs-line-strong: rgba(243, 241, 238, 0.26);
  --cs-muted-3: #f3f1ee;
  --cs-pill-match-bg: #0f0d0d;
  --cs-pill-match-fg: #f3f1ee;
  --cs-pill-minor-bg: #0f0d0d;
  --cs-pill-minor-fg: #f3f1ee;
  --cs-pill-no-bg: #0f0d0d;
  --cs-pill-no-fg: #f3f1ee;
  --cs-nhs-blue: #f3f1ee;
  --cs-open-green: #f3f1ee;
  --cs-num-faint: rgba(243, 241, 238, 0.12);
  --cs-tl-border: rgba(243, 241, 238, 0.26);
  --cs-tl-legend-bg: #0f0d0d;
  --cs-tl-early-fg: #f3f1ee;
  --cs-tl-aligned-fg: #f3f1ee;
  --cs-tl-aligned-stroke: #f3f1ee;
  --cs-tl-aligned-bg: #0f0d0d;
  --cs-tl-aligned-tint: rgba(243, 241, 238, 0.08);
  --cs-tl-first-tint: rgba(243, 241, 238, 0.03);
}

/* Case-study scoped tokens — aligned to Figma "Working v12" */
.cs {
  --ink: #151313;
  --ink-strong: #151313;
  --ink-2: #151313;
  --muted: #151313;
  --muted-deep: #151313;
  --muted-2: #151313;
  --line: rgba(21, 19, 19, 0.14);
  --line-strong: rgba(21, 19, 19, 0.2);
  --accent: #151313;
  --accent-warm: #151313;
  --paper: #ffffff;
  --card-bg: #ededeb;
  --cs-num-faint: rgba(21, 19, 19, 0.1);
  --cs-bg-card-soft: #ededeb;
  --cs-line-strong: rgba(21, 19, 19, 0.2);
  --cs-muted-3: #151313;

/* Figma "Working v12" uses Inter for all sans-serif body/UI text
     and Inter Italic for kicker + reflection quote. */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-italic-sans: "Inter", system-ui, sans-serif;
  font-family: var(--font-sans);
}
:root[data-theme="dark"] .cs {
  --ink: #f3f1ee;
  --ink-strong: #f3f1ee;
  --ink-2: #f3f1ee;
  --muted: #f3f1ee;
  --muted-deep: #f3f1ee;
  --muted-2: #f3f1ee;
  --line: rgba(243, 241, 238, 0.2);
  --line-strong: rgba(243, 241, 238, 0.26);
  --accent: #f3f1ee;
  --accent-warm: #f3f1ee;
  --paper: #242020;
  --card-bg: #0f0d0d;
  --cs-num-faint: rgba(243, 241, 238, 0.12);
  --cs-bg-card-soft: #0f0d0d;
  --cs-line-strong: rgba(243, 241, 238, 0.26);
  --cs-muted-3: #f3f1ee;
}

/* White-dominant canvas (Uber-style) — overrides the grey body background
   so the case study reads on white, with grey internal panels + the dark
   reflection card providing the grey/black accents. Token-driven, so dark
   mode resolves to the elevated dark surface automatically. */
.cs-page { background: var(--surface); }

.cs { padding-block: clamp(40px, 4vw, 60px) 0; }
.cs > .container { max-width: 1100px; }

.cs-back-wrap { padding-bottom: 0; }
.cs-back {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  padding-inline: 4px;
  margin-inline-start: -4px;
  font-weight: 400; font-size: 14px;
  line-height: 20px;
  color: var(--muted);
  transition: color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.cs-back:hover { color: var(--accent); gap: 12px; }
.cs-back:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
  color: var(--accent);
}
.cs-back__chev { width: 8px; height: 12px; flex: 0 0 auto; }

/* ----- Section base ----- */
.cs-section {
  padding-block: 80px 81px;
  border-bottom: 1px solid var(--line-strong);
}
.cs-section--dense { padding-block: 80px 81px; }

.cs-section__inner { padding-inline: 52px; }
@media (max-width: 720px) {
  .cs-section { padding-block: 56px 60px; }
  .cs-section__inner { padding-inline: 0; }
}

.cs-eyebrow {
  margin: 0;
  font-weight: 700; font-size: 14px;
  letter-spacing: 1.96px; text-transform: uppercase;
  color: var(--accent-warm);
  line-height: 18px;
}

.cs-h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 52px;
  line-height: 64px;
  letter-spacing: -1.56px;
  color: var(--ink);
}
.cs-h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 46px;
  line-height: 50px;
  letter-spacing: -1.15px;
  color: var(--ink);
}
.cs-h2 em { font-style: italic; color: var(--accent-warm); }
.cs-h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 36px;
  color: var(--ink);
}
.cs-kicker {
  margin: 0;
  font-family: var(--font-italic-sans);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 28.6px;
  color: var(--muted);
}
.cs-prose p {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink-2);
}
.cs-prose p + p { margin-top: 16px; }
.cs-prose strong { color: var(--ink); font-weight: 600; }
.cs-prose em { color: var(--accent-warm); font-style: italic; }

/* Two-col label/body block (kicker on left, prose on right) */
.cs-rowdef {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 52px;
  align-items: start;
}
.cs-rowdef__body { max-width: 640px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 720px) {
  .cs-rowdef { grid-template-columns: 1fr; gap: 16px; }
}

/* ----- HERO ----- */
.cs-hero { padding-bottom: 73px; padding-top: 60px; border-bottom: 1px solid var(--line-strong); }
.cs-hero__inner { padding-inline: 52px; display: flex; flex-direction: column; gap: 14px; }
.cs-hero__title { max-width: 840px; }
.cs-hero__lede { max-width: 680px; font-size: 18px; line-height: 28px; color: var(--muted); margin: 0; }
.cs-hero__lede strong { color: var(--ink-2); font-weight: 600; }

.cs-hero__meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 103px;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: transparent;
}
.cs-hero__meta > div {
  padding: 18px 22px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 5px;
  min-height: 103px;
}
.cs-hero__meta > div:last-child { border-right: 0; }
.cs-hero__meta-label {
  margin: 0;
  font-size: 12px;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 18px;
}
.cs-hero__meta-value {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: var(--ink);
}

.cs-hero__media {
  margin: 0;
  width: 100%;
  height: 360px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--media-fallback);
}
.cs-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 720px) {
  .cs-hero { padding-top: 40px; padding-bottom: 48px; }
  .cs-hero__inner { padding-inline: 0; }
  .cs-hero__title { font-size: 36px; line-height: 44px; letter-spacing: -1px; }
  .cs-hero__meta { grid-template-columns: 1fr; }
  .cs-hero__meta > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .cs-hero__meta > div:last-child { border-bottom: 0; }
  .cs-hero__media { height: auto; aspect-ratio: 996/360; }
}

/* ----- IMPACT 3x2 grid ----- */
.cs-impact { padding-block: 80px 81px; border-bottom: 1px solid var(--line-strong); background: var(--bg); }
.cs-impact__inner { padding-inline: 52px; display: flex; flex-direction: column; gap: 14px; }
.cs-impact__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(148px, auto);
  gap: 10px;
  margin-top: 4px;
}
.cs-impact__grid > .cs-stat:nth-child(n+4) { min-height: 169px; }
.cs-stat {
  background: var(--paper);
  border-bottom: 2px solid var(--accent-warm);
  border-radius: 4px;
  padding: 28px 24px 26px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 1px 1.5px rgba(28, 28, 28, 0.06);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cs-stat:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(28, 28, 28, 0.08); }
.cs-stat__num {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 42px;
  line-height: 42px;
  letter-spacing: -1.26px;
  color: var(--accent-warm);
}
.cs-stat__copy {
  margin: 0;
  font-size: 14px;
  line-height: 21px;
  color: var(--ink-2);
  font-weight: 500;
}
@media (max-width: 720px) {
  .cs-impact { padding-block: 56px 60px; }
  .cs-impact__inner { padding-inline: 0; }
  .cs-impact__grid { grid-template-columns: 1fr; }
}

/* ----- PRODUCT CONTEXT ----- */
.cs-pc__inner { padding-inline: 52px; display: flex; flex-direction: column; gap: 10px; }
.cs-pc__h2 { padding-top: 4px; }
.cs-pc__row { padding-top: 18px; }
.cs-pc__gallery {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px;
}
.cs-pc__tile {
  display: flex; flex-direction: column; gap: 12px; align-items: center;
  padding: 8px;
  border-radius: 4px;
  min-height: 200px;
}
.cs-pc__tile img {
  width: 100%; aspect-ratio: 299/241; object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
}
.cs-pc__tile-label {
  margin: 0;
  font-size: 12px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--cs-nhs-blue);
  text-align: center;
}
.cs-pc__caption {
  font-size: 14px; line-height: 21px; color: var(--muted-2); margin: 0;
}
@media (max-width: 720px) {
  .cs-pc__inner { padding-inline: 0; }
  .cs-pc__gallery { grid-template-columns: 1fr; }
}

/* ----- THE CHALLENGE ----- */
.cs-challenge__inner { padding-inline: 52px; }
.cs-challenge__h2 { padding-block: 14px 28px; }
.cs-challenge__h2 p { margin: 0; }
.cs-pillrow {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px;
  padding-block: 24px;
  margin: 0; padding-left: 0; list-style: none;
}
.cs-pillrow__item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 12px 16px;
  width: 179px;
  display: flex; flex-direction: column; gap: 4px;
}
.cs-pillrow__num {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 36px;
  color: var(--accent);
}
.cs-pillrow__name {
  margin: 0;
  font-weight: 600; font-size: 14px;
  line-height: 20px;
  color: var(--ink);
}
.cs-pillrow__arrow {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);
  flex: 0 0 16px;
}
.cs-pillrow__arrow svg { width: 16px; height: 12px; }

.cs-problems {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 24px;
}
.cs-problem {
  background: var(--card-bg);
  padding: 28px 30px;
  display: flex; flex-direction: column; gap: 10px;
}
.cs-problem__num {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 52px;
  line-height: 52px;
  letter-spacing: -2.08px;
  color: var(--accent);
}
.cs-problem__title {
  margin: 0;
  font-weight: 600; font-size: 18px; line-height: 22px;
  color: var(--ink);
  padding-top: 2px;
}
.cs-problem__copy {
  margin: 0;
  font-size: 14px; line-height: 23.1px;
  color: var(--muted);
}
.cs-problem--span2 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0; background: var(--card-bg); }
.cs-problem--span2 > .cs-problem__inner {
  padding: 28px 31px 28px 30px;
  border-right: 1px solid var(--line-strong);
  display: flex; flex-direction: column; gap: 10px;
}
.cs-problem__quote {
  padding: 28px 30px;
  display: flex; align-items: center;
}
.cs-problem__quote p {
  margin: 0;
  font-family: var(--font-italic-sans);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 33px;
  color: var(--muted);
}
@media (max-width: 720px) {
  .cs-challenge__inner { padding-inline: 0; }
  .cs-pillrow { gap: 8px; }
  .cs-pillrow__item { width: calc(50% - 16px); }
  .cs-pillrow__arrow { display: none; }
  .cs-problems { grid-template-columns: 1fr; }
  .cs-problem--span2 { grid-template-columns: 1fr; }
  .cs-problem--span2 > .cs-problem__inner { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* ----- MY ROLE ----- */
.cs-role__inner { padding-inline: 52px; display: flex; flex-direction: column; gap: 14px; }
.cs-role__sub { max-width: 560px; padding-top: 14px; font-size: 16px; line-height: 24px; color: var(--muted); margin: 0; }

.cs-role__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 15px;
}
.cs-role__col {
  background: var(--paper);
  padding: 24px 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.cs-role__icon { width: 24px; height: 24px; flex: 0 0 24px; }
.cs-role__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cs-role__heading {
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 18px;
}
.cs-role__list { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 6.5px; padding-top: 2px; }
.cs-role__list li {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 14px; line-height: 21.7px; color: var(--ink-2);
}
.cs-role__list li::before {
  content: "–"; color: var(--accent-warm); font-weight: 700; flex: 0 0 auto;
}

.cs-role__contrib {
  margin-top: 0;
  background: var(--paper);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 17.5px 22px;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted-deep);
  font-weight: 400;
}
.cs-role__contrib strong { color: var(--ink-strong); font-weight: 600; }
@media (max-width: 720px) {
  .cs-role__inner { padding-inline: 0; }
  .cs-role__grid { grid-template-columns: 1fr; }
}

/* ----- CHAPTER WRAPPER ----- */
.cs-chapter { padding-block: 80px 81px; border-bottom: 1px solid var(--line-strong); }
.cs-chapter__inner { padding-inline: 52px; }
.cs-chapter__head {
  display: flex; align-items: center; gap: 20px;
  padding: 22px 0 25px;
  border-bottom: 1px solid var(--line);
}
.cs-chapter__num {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 72px; line-height: 72px;
  letter-spacing: -2.88px;
  color: var(--cs-num-faint);
}
.cs-chapter__num--filled { color: var(--accent); }
.cs-chapter__label {
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.cs-chapter__label .cs-eyebrow { font-size: 14px; }
.cs-chapter__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 32px; line-height: 36px; color: var(--ink); }

/* Sub-block within chapter */
.cs-sub { padding-block: 38px 0; }
.cs-sub + .cs-sub { border-top: 1px solid var(--line); margin-top: 28px; }
.cs-sub__head {
  display: flex; flex-direction: column; gap: 8px;
  padding-bottom: 6px;
}
@media (max-width: 720px) {
  .cs-chapter { padding-block: 56px 60px; }
  .cs-chapter__inner { padding-inline: 0; }
  .cs-chapter__num { font-size: 48px; line-height: 48px; }
  .cs-chapter__title { font-size: 24px; line-height: 28px; }
}

/* ----- TABLES — Figma "Working v12" spec ----- */
.cs-table-wrap {
  background: var(--paper);
  border: 1px solid var(--line);          /* #d8cfbd */
  border-radius: 4px;
  overflow: clip;
  margin-top: 18px;
  padding-top: 18px;                      /* Figma pt-[19px] inset above header */
}
.cs-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);          /* Inter */
  font-size: 14px;
  table-layout: auto;
}
.cs-table thead th {
  background: var(--cs-bg-card-soft);     /* #f3efe6 */
  text-align: left;
  font-family: var(--font-sans);          /* Inter */
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  color: var(--muted);                    /* #6e6860 */
  padding: 12px 16px 13px;                /* pt-12 pb-13 px-16 */
  border-bottom: 1px solid var(--cs-line-strong); /* #d4cebf */
  white-space: nowrap;
}
.cs-table tbody td {
  padding: 14px 16px 15px;                /* pt-14 pb-15 px-16 */
  border-bottom: 1px solid var(--line);   /* #d8cfbd */
  vertical-align: top;
  color: var(--ink-2);                    /* #2e2e2e */
  font-weight: 400;
  font-size: 14px;
  line-height: 21.7px;
}
.cs-table tbody tr:last-child td {
  border-bottom: 0;
  padding: 14px 16px;                     /* symmetric py-14 on the last row */
}
.cs-table td:first-child {
  color: var(--ink);                      /* #1c1c1c */
  font-weight: 500;
}

/* Column widths per Figma (301.3 / 353.95 / 418.76 within 1074 = ~28/33/39 %) */
.cs-table th:nth-child(1), .cs-table td:nth-child(1) { width: 28%; }
.cs-table th:nth-child(2), .cs-table td:nth-child(2) { width: 33%; }
.cs-table th:nth-child(3), .cs-table td:nth-child(3) { width: 39%; }

@media (max-width: 720px) {
  .cs-table th, .cs-table td { white-space: normal; }
  .cs-table th:nth-child(n), .cs-table td:nth-child(n) { width: auto; }
}

/* Pill cells */
.cs-pill-tag {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 100px;
  font-weight: 600; font-size: 12px;
  line-height: 18px;
}
.cs-pill-tag--match { background: var(--cs-pill-match-bg); color: var(--cs-pill-match-fg); }
.cs-pill-tag--minor { background: var(--cs-pill-minor-bg); color: var(--cs-pill-minor-fg); }
.cs-pill-tag--no { background: var(--cs-pill-no-bg); color: var(--cs-pill-no-fg); }

/* ----- STAT ROW (4-up small stats) ----- */
.cs-stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 4px;
}
.cs-stat-row__item {
  background: var(--bg);
  padding: 22px 20px;
  display: flex; flex-direction: column; gap: 7px;
}
.cs-stat-row__num {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 32px;
  color: var(--accent);
}
.cs-stat-row__label {
  margin: 0; font-size: 14px; line-height: 21px; color: var(--ink-2);
}
@media (max-width: 720px) {
  .cs-stat-row { grid-template-columns: repeat(2, 1fr); }
}

/* ----- BEFORE / AFTER COMPARE ----- */
.cs-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 18px;
}
.cs-compare__col {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 21px;
  display: flex; flex-direction: column; gap: 10px;
}
.cs-compare__col--after { border-color: var(--accent); }
.cs-compare__label {
  margin: 0;
  font-weight: 700; font-size: 14px;
  letter-spacing: 1.68px; text-transform: uppercase;
  color: var(--cs-muted-3);
  line-height: 18px;
}
.cs-compare__col--after .cs-compare__label { color: var(--accent); }
.cs-compare__caption {
  margin: 0;
  font-size: 14px; line-height: 21px; color: var(--cs-muted-3);
}
.cs-compare__card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 17px 15px 15px;
  display: flex; flex-direction: column; gap: 6px;
}
.cs-compare__col--after .cs-compare__card { background: var(--paper); border: 2px solid var(--accent); }
.cs-compare__card-title { margin: 0; font-weight: 600; font-size: 16px; line-height: 22px; color: var(--cs-nhs-blue); }
.cs-compare__card-meta { margin: 0; font-size: 14px; line-height: 23.1px; color: var(--muted); }
.cs-compare__card-link { font-size: 14px; line-height: 20px; color: var(--cs-nhs-blue); display: inline-block; padding-top: 3px; }

.cs-compare__hierarchy {
  background: var(--paper);
  border: 2px solid var(--accent);
  border-radius: 4px;
  padding: 18px 16px 16px;
  display: flex; flex-direction: column; gap: 0;
}
.cs-compare__tier-label {
  margin: 0;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 18px;
}
.cs-compare__primary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 0 4px;
}
.cs-compare__primary-name { margin: 0; font-weight: 600; font-size: 16px; color: var(--cs-nhs-blue); line-height: 22px; }
.cs-compare__open-tag {
  background: var(--cs-open-green);
  color: var(--paper);
  padding: 2px 7px;
  border-radius: 3px;
  font-weight: 700; font-size: 10px;
  line-height: 18px;
}
.cs-compare__sub { font-size: 14px; line-height: 20px; color: var(--muted); padding: 4px 0 9px; margin: 0; }
.cs-compare__divider { border-top: 1px solid var(--line); margin: 0; }
.cs-compare__sec-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
  padding-bottom: 9px; padding-top: 0;
}
.cs-compare__sec-cell { display: flex; flex-direction: column; gap: 2px; }
.cs-compare__sec-cell .lbl { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--cs-muted-3); line-height: 18px; }
.cs-compare__sec-cell .val { font-weight: 500; font-size: 14px; line-height: 22px; color: var(--ink); }
.cs-compare__supp { font-size: 14px; line-height: 20px; color: var(--muted); padding-bottom: 8px; padding-top: 4px; margin: 0; }
.cs-compare__action {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 9px;
}
.cs-compare__action-tel { font-size: 14px; color: var(--muted); line-height: 20px; }
.cs-compare__action-link { font-size: 14px; font-weight: 500; color: var(--ink); line-height: 22px; }
@media (max-width: 720px) {
  .cs-compare { grid-template-columns: 1fr; }
}

/* ----- CHECKLIST (numbered) ----- */
.cs-checklist {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 25px;
  display: flex; flex-direction: column; gap: 16px;
}
.cs-checklist__head {
  margin: 0;
  font-weight: 700; font-size: 14px;
  letter-spacing: 1.68px; text-transform: uppercase;
  color: var(--cs-muted-3); line-height: 18px;
}
.cs-checklist__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.cs-checklist__list li {
  display: grid; grid-template-columns: 26px 1fr; gap: 12px;
  padding: 11px 0 12px;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.cs-checklist__list li:last-child { border-bottom: 0; }
.cs-checklist__num {
  width: 22px; height: 22px;
  border: 1px solid var(--accent);
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 10px; color: var(--accent);
  flex: 0 0 auto;
}
.cs-checklist__text {
  font-size: 14px; line-height: 22.4px; color: var(--ink-2);
}
.cs-checklist__text strong { color: var(--ink); font-weight: 700; }

/* ----- FIGURE / PLACEHOLDER BOX ----- */
.cs-figure {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 24px 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
}
.cs-figure__icon { width: 14px; height: 14px; opacity: 0.4; }
.cs-figure__icon img, .cs-figure__icon svg { width: 100%; height: 100%; }
.cs-figure__label {
  margin: 0;
  font-size: 12px;
  letter-spacing: 1.44px; text-transform: uppercase;
  color: var(--accent);
  line-height: 18px;
}
.cs-figure__desc {
  margin: 0;
  font-size: 14px; line-height: 21.7px; color: var(--muted);
  max-width: 320px;
}
.cs-figure__quote {
  margin-top: 10px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  font-size: 14px; line-height: 21px;
  color: var(--cs-muted-3);
  max-width: 340px;
}
.cs-figure--small { min-height: 196px; padding: 24px 20px; }
.cs-figure--medium { min-height: 260px; }
.cs-figure--large { min-height: 360px; }
.cs-figure--tall { min-height: 332px; }

.cs-figure-row {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}
.cs-figure-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-figure-row--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.cs-figure-row--3x2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-figure-row--4x2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cs-figure-row--3x2 .cs-figure,
.cs-figure-row--4x2 .cs-figure,
.cs-figure-row--6 .cs-figure { min-height: 160px; padding: 24px 16px; }

@media (max-width: 1024px) {
  .cs-figure-row--6 { grid-template-columns: repeat(3, 1fr); }
  .cs-figure-row--4x2 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .cs-figure-row--3, .cs-figure-row--3x2, .cs-figure-row--6, .cs-figure-row--4x2 { grid-template-columns: 1fr; }
}

/* ----- COMPONENT GRID (small tiles) ----- */
.cs-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 720px) {
  .cs-tiles { grid-template-columns: 1fr; }
}

/* ----- TIMELINE (migration stages 6-up) ----- */
.cs-timeline-block {
  margin-block-start: 24px;
  border: 1px solid var(--cs-tl-border);
  border-radius: 4px;
  background: var(--paper);
  overflow: clip;
}
.cs-timeline__legend {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 24px;
  padding-block: 16px;
  padding-inline: 24px;
  background: var(--cs-tl-legend-bg);
  border-block-end: 1px solid var(--cs-tl-border);
  font-size: 14px; line-height: 20px;
  color: var(--ink);
}
.cs-timeline__legend-label {
  margin: 0;
  font-weight: 800;
  font-size: 14px; line-height: 18px;
  letter-spacing: 3px; text-transform: uppercase;
}
.cs-timeline__legend span { display: inline-flex; align-items: center; gap: 8px; }
.cs-timeline__dot {
  display: inline-block;
  inline-size: 12px; block-size: 12px;
  border-radius: 4px;
  box-sizing: border-box;
}
.cs-timeline__dot--owned   { background: var(--cs-nhs-blue); }
.cs-timeline__dot--wider   { background: var(--accent); }
.cs-timeline__dot--aligned {
  background: var(--cs-tl-aligned-bg);
  border: 1px dashed var(--cs-tl-aligned-stroke);
}
.cs-timeline {
  margin: 0; padding: 0; list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.cs-timeline__col {
  padding-block: 18px 45px;
  padding-inline: 14px 15px;
  display: flex; flex-direction: column; gap: 3px;
  border-inline-end: 1px solid var(--cs-tl-border);
}
.cs-timeline__col:last-child { border-inline-end: 0; }
.cs-timeline__col:first-child { background: var(--cs-tl-first-tint); }
.cs-timeline__phase {
  margin: 0;
  font-weight: 800; font-size: 14px; line-height: 18px;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--ink);
}
.cs-timeline__when {
  margin: 0;
  font-size: 14px; line-height: 20px;
  color: var(--cs-muted-3);
}
.cs-timeline__when--early { color: var(--cs-tl-early-fg); }
.cs-timeline__list {
  margin: 0; padding: 9px 0 0; list-style: none;
  display: flex; flex-direction: column; gap: 5px;
}
.cs-timeline__list li {
  font-size: 10px; line-height: 14px;
  padding-block: 4px;
  padding-inline: 7px;
  border-radius: 3px;
}
.cs-timeline__list li.is-owned {
  background: color-mix(in oklab, var(--cs-nhs-blue) 10%, transparent);
  color: var(--cs-nhs-blue);
}
.cs-timeline__list li.is-wider {
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  color: var(--accent);
}
.cs-timeline__list li.is-aligned {
  background: var(--cs-tl-aligned-tint);
  border: 1px dashed var(--cs-tl-aligned-stroke);
  color: var(--cs-tl-aligned-fg);
  padding-block: 5px;
  padding-inline: 8px;
  box-sizing: border-box;
}
@media (max-width: 1024px) {
  .cs-timeline { grid-template-columns: repeat(3, 1fr); }
  .cs-timeline__col:nth-child(3) { border-inline-end: 0; }
  .cs-timeline__col:nth-child(n+4) { border-block-start: 1px solid var(--cs-tl-border); }
}
@media (max-width: 720px) {
  .cs-timeline { grid-template-columns: 1fr; }
  .cs-timeline__col { border-inline-end: 0; }
  .cs-timeline__col + .cs-timeline__col { border-block-start: 1px solid var(--cs-tl-border); }
  .cs-timeline__legend { gap: 12px 18px; padding-block: 14px; padding-inline: 18px; }
}

/* ----- DECISION FLOW (auth flow diagram) ----- */
.cs-flow {
  margin-top: 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 36px 24px 32px;
  display: flex; flex-direction: column; gap: 14px;
  align-items: center;
}
.cs-flow__head {
  margin: 0 0 6px;
  font-weight: 700; font-size: 12px;
  letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--cs-nhs-blue);
  line-height: 18px;
  text-align: center;
}
.cs-flow__step {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
}
.cs-flow__node {
  background: var(--cs-bg-card-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 12px 22px;
  font-weight: 500; font-size: 14px;
  color: var(--ink);
  line-height: 20px;
  min-width: 168px;
}
.cs-flow__node--decision { background: var(--cs-bg-card-soft); border-color: var(--line); }
.cs-flow__node--access   { background: var(--cs-pill-match-bg); border-color: transparent; color: var(--cs-pill-match-fg); }
.cs-flow__arrow {
  color: var(--cs-nhs-blue);
  font-size: 16px;
  line-height: 1;
  margin: 2px 0;
}
.cs-flow__branches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; width: 100%;
  position: relative;
  padding-top: 18px;
}
/* Horizontal connector lines from decision node down to each branch */
.cs-flow__branches::before {
  content: "";
  position: absolute;
  left: 16.6%;
  right: 16.6%;
  top: 0;
  height: 1px;
  background: var(--cs-nhs-blue);
}
.cs-flow__branch {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  position: relative;
}
.cs-flow__branch::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -18px;
  width: 1px;
  height: 18px;
  background: var(--cs-nhs-blue);
}
.cs-flow__label {
  font-weight: 700; font-size: 11px;
  letter-spacing: 1.76px; text-transform: uppercase;
  color: var(--cs-nhs-blue);
  margin: 0;
}
.cs-flow__caption {
  font-size: 13px;
  color: var(--cs-muted-3);
  margin: 0;
  line-height: 18px;
  text-align: center;
}
@media (max-width: 720px) {
  .cs-flow__branches { grid-template-columns: 1fr; padding-top: 0; }
  .cs-flow__branches::before { display: none; }
  .cs-flow__branch::before { display: none; }
}

/* ----- HANDOFF (Setup vs Login numbered side by side) ----- */
.cs-handoff {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 14px;
  align-items: stretch;
}
.cs-handoff__col {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
}
.cs-handoff__col--login { border: 2px solid var(--accent); padding: 21px 23px 23px; }
.cs-handoff__tag {
  align-self: flex-start;
  margin: 0 0 18px;
  background: var(--accent);
  color: var(--paper);
  padding: 6px 12px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 16px;
  border-radius: 4px;
  display: inline-block;
}
.cs-handoff__title {
  margin: 0 0 4px;
  font-weight: 600; font-size: 18px;
  color: var(--ink);
  line-height: 24px;
  display: flex; align-items: center; gap: 8px;
}
.cs-handoff__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  color: var(--ink);
}
.cs-handoff__list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column;
  flex: 1 1 auto;
  counter-reset: handoff;
}
.cs-handoff__list li {
  display: grid; grid-template-columns: 26px 1fr; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  flex: 1 1 0;
  align-content: center;
}
.cs-handoff__list li:last-child { border-bottom: 0; }
.cs-handoff__list li::before {
  counter-increment: handoff;
  content: counter(handoff);
  width: 22px; height: 22px;
  background: var(--accent); color: var(--paper);
  font-weight: 700; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px;
  flex: 0 0 auto;
  align-self: start;
  margin-top: 0;
}
.cs-handoff__step {
  grid-column: 2;
  display: block;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
}
.cs-handoff__hint {
  grid-column: 2;
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 18px;
  color: var(--muted);
}
@media (max-width: 720px) {
  .cs-handoff { grid-template-columns: 1fr; }
}

/* ----- JIRA TICKET CARD ----- */
.cs-ticket {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  max-width: 640px;
  margin-top: 14px;
}
.cs-ticket__head {
  background: var(--cs-bg-card-soft);
  border-bottom: 1px solid var(--line);
  padding: 10px 16px;
  display: flex; align-items: center; gap: 10px;
}
.cs-ticket__badge {
  background: var(--accent-soft);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  line-height: 18px;
}
.cs-ticket__id { font-size: 12px; color: var(--cs-muted-3); line-height: 18px; }
.cs-ticket__body { padding: 18px 16px 0; display: flex; flex-direction: column; }
.cs-ticket__title {
  margin: 0; padding-bottom: 14px;
  font-weight: 600; font-size: 18px; line-height: 22px; color: var(--ink);
}
.cs-ticket__rows { display: grid; gap: 0; }
.cs-ticket__row {
  display: grid; grid-template-columns: 140px 1fr; gap: 10px;
  padding: 9px 0 10px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 21.7px;
}
.cs-ticket__row:last-child { border-bottom: 0; padding-bottom: 18px; }
.cs-ticket__key { color: var(--muted); font-weight: 500; line-height: 22px; }
.cs-ticket__val { color: var(--ink-2); }
.cs-ticket__val strong { color: var(--accent); font-weight: 600; }
@media (max-width: 720px) {
  .cs-ticket__row { grid-template-columns: 1fr; gap: 4px; }
}

/* ----- Issue classification card ----- */
.cs-issue-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.cs-issue-card__head {
  background: var(--cs-bg-card-soft);
  padding: 10px 16px;
  font-weight: 400; font-size: 12px;
  letter-spacing: 1.44px; text-transform: uppercase;
  color: var(--muted); line-height: 18px;
}
.cs-issue-card__body { padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.cs-issue-card__group { display: flex; flex-direction: column; gap: 6px; }
.cs-issue-card__group + .cs-issue-card__group {
  padding-top: 13px;
  border-top: 1px solid var(--line);
}
.cs-issue-card__title {
  margin: 0;
  font-weight: 700; font-size: 14px;
  letter-spacing: 1.4px;
  line-height: 18px;
}
.cs-issue-card__title--quick { color: var(--accent); }
.cs-issue-card__title--struct { color: var(--ink); }
.cs-issue-card__copy { margin: 0; font-size: 14px; line-height: 22.4px; color: var(--muted); }

/* Layout: two-col grid for "audit findings" sub-section */
.cs-audit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 14px;
}
.cs-audit-grid__right { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 720px) {
  .cs-audit-grid { grid-template-columns: 1fr; }
}

/* Component grid sub for chapter 03 */
.cs-comp-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 20px;
  margin-top: 14px;
}
.cs-comp-grid__right { display: flex; flex-direction: column; gap: 12px; }
.cs-comp-grid__title {
  margin: 0;
  font-weight: 700; font-size: 14px;
  letter-spacing: 1.68px; text-transform: uppercase;
  color: var(--cs-muted-3); line-height: 18px;
}
.cs-comp-grid__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 720px) {
  .cs-comp-grid { grid-template-columns: 1fr; }
}

/* Chapter 04 areas-addressed grid (checklist + figure side-by-side) */
.cs-aa-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 14px;
}
@media (max-width: 720px) {
  .cs-aa-grid { grid-template-columns: 1fr; }
}

/* ----- OUTCOMES 2x3 ----- */
.cs-outcomes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 8px;
}
.cs-outcomes__item {
  border-top: 2px solid var(--ink);
  padding-top: 24px;
  display: flex; flex-direction: column; gap: 8px;
  padding-bottom: 22px;
}
.cs-outcomes__title {
  margin: 0;
  font-weight: 600; font-size: 18px; line-height: 22px;
  color: var(--ink);
}
.cs-outcomes__copy {
  margin: 0;
  font-size: 14px; line-height: 23.1px; color: var(--muted);
}
@media (max-width: 720px) {
  .cs-outcomes { grid-template-columns: 1fr; }
}

/* ----- REFLECTION (dark card) ----- */
.cs-reflection {
  margin-top: 0;
  margin-bottom: 80px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 4px;
  padding: 56px;
  display: flex; flex-direction: column; gap: 20px;
}
.cs-reflection__eyebrow {
  margin: 0;
  font-weight: 700; font-size: 14px;
  letter-spacing: 1.96px; text-transform: uppercase;
  color: #ededeb;
  line-height: 18px;
}
.cs-reflection__quote {
  margin: 0;
  font-family: var(--font-italic-sans);
  font-style: italic;
  font-weight: 400;
  font-size: 32px;
  line-height: 44.8px;
  color: var(--paper);
  max-width: 580px;
}
.cs-reflection__body { display: flex; flex-direction: column; gap: 15.2px; padding-top: 7.2px; max-width: 600px; }
.cs-reflection__body p {
  margin: 0;
  font-size: 16px; line-height: 28.8px;
  color: rgba(255, 255, 255, 0.6);
}
.cs-reflection__body strong { color: rgba(255, 255, 255, 0.85); font-weight: 700; }

/* Dark mode: keep the reflection card dark like other sections (e.g. the
   "Areas addressed" card) rather than flipping to a light card. */
:root[data-theme="dark"] .cs-reflection {
  background: var(--card-bg);
  color: var(--ink);
  border: 1px solid var(--line);
}
:root[data-theme="dark"] .cs-reflection__quote { color: var(--ink); }
:root[data-theme="dark"] .cs-reflection__body p { color: rgba(243, 241, 238, 0.7); }
:root[data-theme="dark"] .cs-reflection__body strong { color: var(--ink); }

@media (max-width: 720px) {
  .cs-reflection { padding: 36px 24px; margin-bottom: 60px; }
  .cs-reflection__quote { font-size: 24px; line-height: 32px; }
}

/* ----- BACK link section adjustments for v12 ----- */
.cs-section:last-of-type { border-bottom: 0; }

/* ----- Inline bullet list (cs-prose nested ul) ----- */
.cs-bullets {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cs-bullets li {
  position: relative;
  padding-left: 18px;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink-2);
}
.cs-bullets li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-warm);
}
.cs-bullets li strong { color: var(--ink); font-weight: 600; }

/* ----- Inline callout paragraph (chapter wrap-up) ----- */
.cs-callout {
  margin: 12px 0 0;
  background: var(--paper);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 17.5px 22px;
  font-size: 14px;
  line-height: 22px;
  color: var(--muted-deep);
}
.cs-callout strong { color: var(--ink-strong); font-weight: 600; }

/* ----- Recovery cards (login failure scenarios — 2x2) ----- */
.cs-recovery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.cs-recovery__card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 22px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cs-recovery__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(28, 28, 28, 0.07);
}
.cs-recovery__tag {
  margin: 0;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  color: var(--accent-warm);
  line-height: 18px;
}
.cs-recovery__title {
  margin: 0;
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  color: var(--ink);
}
.cs-recovery__copy {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--muted);
}
.cs-recovery__actions {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
}
.cs-recovery__actions::before {
  content: "→ ";
  color: var(--accent-warm);
  font-weight: 700;
  margin-inline-end: 4px;
}
.cs-recovery__actions li { display: inline; }
.cs-recovery__actions li + li::before {
  content: " · ";
  color: var(--muted);
  margin: 0 2px;
}
@media (max-width: 720px) {
  .cs-recovery { grid-template-columns: 1fr; }
}

/* ----- Solid image placeholder (Figma annotation) ----- */
.cs-placeholder {
  margin: 22px 0 0;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 320px;
  background: #ededeb;
  border-radius: 4px;
  color: var(--ink);
}
.cs-placeholder--wide { min-height: 220px; }
.cs-placeholder--wide + .cs-placeholder--wide { margin-top: 14px; }

/* ----- Drop-in image placeholder (replaceable .jpeg) -----
   Image fills 100% of container width and renders at its natural aspect
   ratio (height auto). No cropping, no fixed/min height. */
.cs-ph {
  display: block;
  width: 100%;
  height: auto;
  margin: 22px 0 0;
  border-radius: 12px;
  background: transparent;
}
.cs-ph + .cs-ph { margin-top: 14px; }
.cs-placeholder span {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 56px);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-strong);
}
:root[data-theme="dark"] .cs-placeholder { background: #0f0d0d; }
:root[data-theme="dark"] .cs-placeholder span { color: var(--ink-strong); }

/* ----- Reflection wrapper (no border, tight padding) ----- */
.cs-section--reflection {
  border-bottom: 0;
  padding-block: 80px 0;
}
@media (max-width: 720px) {
  .cs-section--reflection { padding-block: 56px 0; }
}

/* ----- Footer prev/next case study nav ----- */
.cs-prevnext {
  padding-block: 24px 32px;
  border-top: 1px solid var(--line);
}
.cs-prevnext .container { max-width: 1100px; }
.cs-prevnext__inner {
  padding-inline: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cs-prevnext__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted-2);
  transition: color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.cs-prevnext__link:hover {
  color: var(--accent);
  gap: 12px;
}
.cs-prevnext__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
  color: var(--accent);
}
.cs-prevnext__chev {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}
@media (max-width: 720px) {
  .cs-prevnext__inner { padding-inline: 0; }
}

/* ----- Tablet (~720–1024) breakpoints for grids that otherwise jump
   straight from desktop to 1-col on small phones. ----- */
@media (max-width: 1024px) {
  .cs-impact__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-role__grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-hero__meta   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-hero__meta > div:nth-child(2) { border-right: 0; }
  .cs-pillrow__item { width: auto; flex: 1 1 160px; }
}

/* Image containers — Figma "Working v12" spec:
   border-radius 4px, 1px dashed #1c1c1c05, padding 50/24/32/24. */
.cs-figure,
.cs-figure--medium,
.cs-figure--large {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 24px 0;
  opacity: 1;
  overflow: hidden;
  box-sizing: border-box;
}
.cs-figure > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Mobile: strip the container (border, bg, padding) and let images render
   at full width with natural height. */
@media (max-width: 720px) {
  .cs-figure,
  .cs-figure--medium,
  .cs-figure--large {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
  }
  .cs-figure > img,
  .cs-ph,
  .cs-ba__media {
    width: 100%;
    height: auto;
    border-radius: 0;
  }
}

/* Utility: margin-top spacing for blocks that follow prose copy */
[data-mt-md] { margin-top: 24px; }
@media (max-width: 720px) {
  [data-mt-md] { margin-top: 18px; }
}

/* ----- Inline code in case study prose ----- */
.cs code {
  font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  font-size: 0.92em;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--cs-bg-card-soft);
  color: var(--ink);
}

/* =========================================================
   Before / After comparison block (chapter 02 interaction redesign)
   Matches Figma "Block 4" — tabs header + media below
   ========================================================= */
.cs-ba {
  margin-top: 18px;
  border: 1px solid var(--cs-line-strong);
  border-radius: 4px;
  overflow: hidden;
  background: var(--cs-bg-card-soft);
}
.cs-ba__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--cs-bg-card-soft);
  border-bottom: 1px solid var(--cs-line-strong);
}
.cs-ba__tab {
  margin: 0;
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--cs-muted-3);
  line-height: 18px;
  border-right: 1px solid var(--cs-line-strong);
}
.cs-ba__tab:last-child { border-right: 0; }
.cs-ba {
  min-height: 520px;
}
.cs-ba__media {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  background: var(--cs-bg-card-soft);
  object-fit: cover;
  object-position: center top;
}
@media (max-width: 720px) {
  .cs-ba { min-height: 360px; }
}

/* ==== Elementor Image widget adapters for cs images ==== */
.elementor-widget-image.cs-ph{margin-top:22px;}
.elementor-widget-image.cs-ph .elementor-widget-container{line-height:0;}
.elementor-widget-image.cs-ph img{width:100%;height:auto;border-radius:12px;display:block;}
.elementor-widget-image.cs-ph + .elementor-widget-image.cs-ph{margin-top:14px;}
.cs-figure img{width:100%;height:auto;border-radius:12px;display:block;}
@media (max-width:720px){.elementor-widget-image.cs-ph img{border-radius:0;}}

/* ==== Zero Elementor default widget margins — spacing driven by BEM CSS only ==== */
.cs-page .elementor-widget {
  margin-bottom: 0 !important;
}
/* Sub-head: eyebrow + h2 need their CSS gap, not Elementor gap */
.cs-sub__head > .elementor-widget { margin-bottom: 0 !important; }
/* Chapter label eyebrow+title */
.cs-chapter__label > .elementor-widget { margin-bottom: 0 !important; }
/* Image widget: keep the cs-ph margin-top from CSS */
.cs-page .elementor-widget-image.cs-ph { margin-top: 32px !important; margin-bottom: 0 !important; }
/* Rowdef: keep gap from parent container */
.cs-cont > .elementor-widget { margin-bottom: 0 !important; }
/* Impact/outcomes inner */
.cs-impact__inner > .elementor-widget,
.cs-cont.cs-impact__inner > .elementor-widget { margin-bottom: 0 !important; }
/* Role inner items */
.cs-role__inner > .elementor-widget { margin-bottom: 0 !important; }
/* Hero inner spacing: eyebrow → title → lede → image → meta — all 0, let gap: 14px in .cs-hero__inner handle it */
.cs-hero__inner > .elementor-widget { margin-bottom: 0 !important; }
/* Restore explicit gap on hero inner via flex gap */
.cs-hero__inner.e-con {
  gap: 14px !important;
}
/* Section inner containers: gap between eyebrow, h2, rowdef, image */
.cs-pc__inner > .elementor-widget,
.cs-challenge__inner > .elementor-widget,
.cs-role__inner > .elementor-widget {
  margin-bottom: 0 !important;
}
.cs-pc__inner.e-con { gap: 14px !important; }
.cs-role__inner.e-con { gap: 14px !important; }
/* Chapter inner: sub-blocks */
.cs-chapter__inner > .elementor-widget { margin-bottom: 0 !important; }
/* Sub block: eyebrow/h2, rowdef, image */
.cs-sub > .elementor-widget { margin-bottom: 0 !important; }
.cs-sub__head.e-con { gap: 8px !important; }
/* Outcomes/reflection inner */
.cs-cont.cs-impact__inner.e-con { gap: 14px !important; }

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: cs.css

Server Info

System Features

User Info