/* ==========================================================================
   Case study content
   Text, diagrams and animations for project pages. Content lives inside a
   `.cs` wrapper; the accent colour can be overridden per project with
   `--cs-accent` on that wrapper.
   ========================================================================== */

.cs {
  --cs-accent: #c0261f;
  --cs-accent-soft: rgba(192, 38, 31, 0.18);
  --cs-text: #ffffff;
  --cs-muted: #9b9b9b;
  --cs-line: #8a8a8a;
  --cs-surface: #111111;
  --cs-surface-2: #1b1b1b;
  --cs-tag: #4d4d4d;
  color: var(--cs-text);
  font-family: "Open Sans", "Segoe UI", "Roboto", "Helvetica", -apple-system, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  /* Components below adapt to the width of this column, not the viewport */
  container: cs / inline-size;
}

.cs p { margin: 0 0 1rem; }
.cs strong { font-weight: 700; color: #fff; }
.cs .cs-muted { color: var(--cs-muted); }
.cs .cs-accent { color: var(--cs-accent); }
.cs ul { padding-left: 1.2rem; }
/* The theme forces disc bullets on every list inside .section-content */
.cs .cs-chips li,
.cs .cs-icon-labels li,
.cs .cs-radial li,
.cs .cs-steps li,
.cs .cs-chain li { list-style: none; }
.cs li { margin-bottom: .35rem; }
.cs ol { padding-left: 1.4rem; }
.cs ol > li { list-style: decimal; }

/* Section heading, matches the SUMMARY heading style of the theme */
.article-light > .article-content > .wrapper.cs > h2 {
  font-weight: 300;
  font-size: 3rem;
  letter-spacing: .02em;
  margin: 6rem 0 2rem;
  scroll-margin-top: 80px;
}
.article-light > .article-content > .wrapper.cs > h2:first-child { margin-top: 2rem; }
@media (max-width: 767px) {
  .article-light > .article-content > .wrapper.cs > h2 { font-size: 2.1rem; margin-top: 4rem; }
}

/* Sub-section label (the grey tab in the original layouts) */
.cs-tag {
  display: inline-block;
  background: var(--cs-tag);
  color: #fff;
  font-size: 1.15rem;
  letter-spacing: .04em;
  padding: .45rem 1.75rem;
  margin: 3.5rem 0 1.5rem;
  scroll-margin-top: 80px;
}
.cs-tag:first-child { margin-top: 0; }

.cs-lead { font-size: 1.1rem; }

/* Text column + illustration column */
.cs-split {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 1.5rem;
}
@container cs (max-width: 520px) {
  .cs-split { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ---------- Scroll reveal ---------- */
.cs-js .cs-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.cs-js .cs-reveal.is-visible { opacity: 1; transform: none; }
.cs-js .cs-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}
.cs-js .cs-stagger.is-visible > * { opacity: 1; transform: none; }
.cs-stagger.is-visible > *:nth-child(2) { transition-delay: .1s; }
.cs-stagger.is-visible > *:nth-child(3) { transition-delay: .2s; }
.cs-stagger.is-visible > *:nth-child(4) { transition-delay: .3s; }
.cs-stagger.is-visible > *:nth-child(5) { transition-delay: .4s; }
.cs-stagger.is-visible > *:nth-child(6) { transition-delay: .5s; }
.cs-stagger.is-visible > *:nth-child(7) { transition-delay: .6s; }
.cs-stagger.is-visible > *:nth-child(8) { transition-delay: .7s; }
.cs-stagger.is-visible > *:nth-child(9) { transition-delay: .8s; }
.cs-stagger.is-visible > *:nth-child(10) { transition-delay: .9s; }
.cs-stagger.is-visible > *:nth-child(11) { transition-delay: 1s; }
.cs-stagger.is-visible > *:nth-child(12) { transition-delay: 1.1s; }
.cs-stagger.is-visible > *:nth-child(13) { transition-delay: 1.2s; }
.cs-stagger.is-visible > *:nth-child(14) { transition-delay: 1.3s; }
.cs-stagger.is-visible > *:nth-child(15) { transition-delay: 1.4s; }

/* Marching dashed arrow */
.cs-dash {
  position: relative;
  height: 2px;
  color: #ddd;
  background-image: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 10px);
  background-size: 20px 100%;
  animation: cs-dashmove .8s linear infinite;
}
.cs-dash::after {
  content: "";
  position: absolute;
  right: -6px;
  top: -5px;
  border: 6px solid transparent;
  border-left: 9px solid currentColor;
  border-right: 0;
}
@keyframes cs-dashmove { from { background-position: 0 0; } to { background-position: 20px 0; } }
@keyframes cs-dashmove-y { from { background-position: 0 0; } to { background-position: 0 20px; } }

/* ---------- Concept: A —— applied to ——> B ---------- */
.cs-concept {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, .8fr) minmax(0, 1fr);
  align-items: start;
  gap: 1.5rem;
  margin: 2.5rem 0;
}
.cs-concept-card {
  border: 1px solid var(--cs-line);
  aspect-ratio: 1 / 1;
  max-width: 260px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.25rem;
  transition: border-color .3s ease, background-color .3s ease;
}
.cs-concept-card:hover { border-color: #fff; background: var(--cs-surface); }
.cs-concept-card h4 {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 1.25rem;
  color: #fff;
}
.cs-concept-card .fa { font-size: 3.5rem; color: #c4c4c4; }
.cs-concept-card .fa-bell { transform-origin: 50% 10%; }
.cs-concept-card:hover .fa-bell { animation: cs-ring 1s ease; }
@keyframes cs-ring {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(14deg); }
  30% { transform: rotate(-12deg); }
  45% { transform: rotate(8deg); }
  60% { transform: rotate(-6deg); }
  75% { transform: rotate(3deg); }
}
.cs-concept-note {
  text-align: center;
  font-size: .95rem;
  margin-top: 1.25rem;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}
.cs-concept-arrow {
  align-self: center;
  text-align: center;
  font-size: .95rem;
  color: #ddd;
}
.cs-concept-arrow .cs-dash { margin-top: .5rem; }
.cs-concept-col { display: flex; flex-direction: column; }
.cs-concept-arrow.is-raised { margin-top: -6rem; }
@container cs (max-width: 480px) {
  .cs-concept { grid-template-columns: 1fr; }
  .cs-concept-arrow.is-raised { margin-top: 0; }
  .cs-concept-arrow .cs-dash { margin: .5rem auto 0; }
  .cs-concept-arrow .cs-dash { width: 2px; height: 56px; background-image: repeating-linear-gradient(180deg, currentColor 0 6px, transparent 6px 10px); animation-name: cs-dashmove-y; }
  .cs-concept-arrow .cs-dash::after { right: auto; top: auto; left: -5px; bottom: -6px; border: 6px solid transparent; border-top: 9px solid currentColor; border-bottom: 0; }
}

/* ---------- Integrated security graphic ---------- */
.cs-brandtree { text-align: center; max-width: 300px; margin: 0 auto; }
.cs-wordmark {
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  font-size: 2rem;
  line-height: 1;
  color: #e4002b;
  letter-spacing: -.01em;
}
.cs-wordmark-sub { font-size: .8rem; letter-spacing: .18em; color: #ddd; margin-top: .3rem; }
.cs-brandtree svg { width: 100%; height: 44px; display: block; }
.cs-icon-row { display: flex; justify-content: space-between; }
.cs-icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #fff;
  flex: none;
}
.cs-icon-circle.is-filled { background: var(--cs-accent); border-color: var(--cs-accent); }

/* Definition callout */
.cs .cs-definition {
  text-align: center;
  font-size: 1.05rem;
  display: table;
  margin: 2.5rem auto 0;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--cs-line);
  max-width: 100%;
}

/* ---------- Responsibilities (icon + label row) ---------- */
.cs-icon-labels {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  margin: 2rem 0 3rem;
  list-style: none;
  padding: 0;
}
.cs-icon-labels li { display: flex; flex-direction: column; align-items: center; gap: .75rem; margin: 0; }
.cs-icon-labels .cs-icon-circle { transition: transform .3s ease; }
.cs-icon-labels li:hover .cs-icon-circle { transform: scale(1.1); }

/* ---------- Persona cards ---------- */
.cs-personas { display: grid; gap: 1.25rem; margin: 1.5rem 0; }
.cs-persona {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 1.5rem;
  background: var(--cs-surface);
  border-left: 3px solid var(--cs-line);
  padding: 1.5rem;
  transition: border-color .3s ease, background-color .3s ease;
}
.cs-persona:hover { border-left-color: var(--cs-accent); background: var(--cs-surface-2); }
.cs-persona.is-focus { border-left-color: var(--cs-accent); }
.cs-persona-icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #262626;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.75rem;
  color: #c4c4c4;
}
.cs-persona-icon img { width: 68%; height: 68%; object-fit: contain; opacity: .8; }
.cs-persona h4 { font-size: 1.3rem; font-weight: 700; margin: 0; color: #fff; }
.cs-persona .cs-persona-role { color: var(--cs-muted); font-size: .9rem; margin-bottom: .75rem; }
.cs-persona ul { margin: 0; padding-left: 1.1rem; }
.cs-badge {
  display: inline-block;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--cs-accent);
  color: #fff;
  padding: .1rem .5rem;
  margin-left: .5rem;
  vertical-align: middle;
}
@container cs (max-width: 480px) {
  .cs-persona { grid-template-columns: 1fr; padding: 1.25rem; gap: 1rem; }
  .cs-persona-icon { width: 72px; height: 72px; font-size: 2rem; }
}

/* ---------- Flat vs hierarchical ---------- */
.cs-flatvs { max-width: 260px; margin: 0 auto; text-align: center; }
.cs-flatvs svg { width: 100%; display: block; overflow: visible; }
.cs-flatvs .cs-node { fill: var(--cs-accent); transform-box: fill-box; transform-origin: center; }
.cs-flatvs .cs-edge { stroke: #ddd; stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; }
.cs-js .cs-flatvs .cs-node { transform: scale(0); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.cs-flatvs.is-visible .cs-node { transform: scale(1); }
.cs-flatvs .cs-vs { font-weight: 700; margin: .5rem 0; }

/* ---------- Staircase (Country > State > City) ---------- */
.cs-stairs { max-width: 540px; margin: 2rem auto; }
.cs-stair {
  display: grid;
  grid-template-columns: 90px minmax(0, 220px);
  align-items: end;
  gap: 1rem;
  margin-bottom: .6rem;
}
.cs-stair:nth-child(2) { margin-left: 22%; }
.cs-stair:nth-child(3) { margin-left: 44%; }
.cs-stair-place { color: var(--cs-muted); text-align: right; transform: translateY(.9rem); }
.cs-stair-role { border-bottom: 2px solid var(--cs-line); padding: 0 .5rem .2rem; white-space: nowrap; }
.cs-js .cs-stairs .cs-stair-role { background: linear-gradient(var(--cs-line), var(--cs-line)) left bottom / 0 2px no-repeat; border-bottom-color: transparent; transition: background-size .8s ease; }
.cs-stairs.is-visible .cs-stair-role { background-size: 100% 2px; }
.cs-stairs.is-visible .cs-stair:nth-child(2) .cs-stair-role { transition-delay: .3s; }
.cs-stairs.is-visible .cs-stair:nth-child(3) .cs-stair-role { transition-delay: .6s; }
@container cs (max-width: 480px) {
  .cs-stair { grid-template-columns: 70px minmax(0, 1fr); }
  .cs-stair:nth-child(2) { margin-left: 10%; }
  .cs-stair:nth-child(3) { margin-left: 20%; }
  .cs-stair-role { white-space: normal; }
}
.cs-breadcrumb { font-weight: 700; white-space: nowrap; }
.cs-breadcrumb .fa { font-size: .8em; margin: 0 .4rem; color: var(--cs-muted); }

/* ---------- Hierarchy chain ---------- */
.cs-chain-wrap {
  border: 1px solid #3a3a3a;
  padding: 2rem 1.5rem 1.5rem;
  margin: 1.5rem 0 1rem;
}
.cs-chain-title { text-align: center; font-size: 1.1rem; margin-bottom: 1.5rem; }
.cs-chain-title small { display: block; color: var(--cs-muted); font-size: .85rem; }
.cs-chain {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cs-chain > li { display: flex; align-items: center; flex: 1 1 0; margin: 0; min-width: 0; }
.cs-chain > li:last-child { flex: 0 0 auto; }
.cs-chain-node {
  flex: none;
  width: 74px;
  height: 74px;
  background: #23b5e3;
  color: #0b2733;
  border: 0;
  font-size: .85rem;
  line-height: 1.15;
  font-family: inherit;
  padding: .25rem;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .5);
  cursor: pointer;
  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.cs-chain-node:hover,
.cs-chain-node:focus { transform: translateY(-4px); outline: none; }
.cs-chain-node:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cs-chain-node[aria-pressed="true"] { background: #fff; color: #000; transform: translateY(-4px); box-shadow: 0 0 0 3px #23b5e3; }
.cs-chain-link { flex: 1 1 auto; min-width: 12px; margin: 0 10px 0 4px; color: #23b5e3; }
.cs-chain-def { display: none; }
.cs-chain-detail {
  min-height: 4.5rem;
  margin-top: 1.5rem;
  text-align: center;
  color: #8fd8f0;
}
.cs-chain-detail strong { display: block; color: #fff; font-size: 1.05rem; }
.cs-chain-hint { text-align: center; color: var(--cs-muted); font-size: .8rem; margin: 0; }
/* Without JS show every definition under its node */
html:not(.cs-js) .cs-chain { flex-wrap: wrap; gap: 1rem; }
html:not(.cs-js) .cs-chain-def { display: block; font-size: .75rem; color: #8fd8f0; margin-top: .5rem; }
html:not(.cs-js) .cs-chain-detail,
html:not(.cs-js) .cs-chain-hint { display: none; }
@container cs (max-width: 680px) {
  .cs-chain { flex-wrap: wrap; justify-content: center; gap: .75rem .25rem; }
  .cs-chain > li { flex: 0 0 auto; }
  .cs-chain-link { width: 16px; min-width: 16px; flex: none; }
  .cs-chain-node { width: 64px; height: 64px; font-size: .75rem; }
}

/* ---------- Radial design objectives ---------- */
.cs-radial {
  position: relative;
  width: 100%;
  aspect-ratio: 100 / 46;
  margin: 2.5rem 0;
}
.cs-radial svg.cs-radial-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.cs-radial-lines line { stroke: #bbb; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 5 5; }
.cs-radial-center {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 22%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--cs-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.3;
  box-shadow: 0 0 0 0 var(--cs-accent-soft);
  animation: cs-pulse 2.8s ease-out infinite;
}
@keyframes cs-pulse {
  0% { box-shadow: 0 0 0 0 rgba(192, 38, 31, .45); }
  80%, 100% { box-shadow: 0 0 0 28px rgba(192, 38, 31, 0); }
}
.cs-radial-item {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 26%;
  text-align: center;
  font-size: 1rem;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  margin: 0;
}
.cs-radial-item .cs-radial-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  color: #c4c4c4;
  transition: color .3s ease, transform .3s ease;
}
.cs-radial-item:hover .cs-radial-icon { color: #fff; transform: scale(1.12); }
.cs-radial-item svg { width: 52px; height: 52px; }
.cs-icon-expand .cs-expand-panel { transform-origin: 24px 21px; }
.cs-radial-item:hover .cs-icon-expand .cs-expand-panel { animation: cs-expand .5s ease; }
@keyframes cs-expand { from { transform: scaleY(0); opacity: 0; } to { transform: none; opacity: 1; } }
.cs-radial-item.p1 { left: 20%; top: 24%; }
.cs-radial-item.p2 { left: 80%; top: 24%; }
.cs-radial-item.p3 { left: 25%; top: 76%; }
.cs-radial-item.p4 { left: 50%; top: 88%; }
.cs-radial-item.p5 { left: 75%; top: 76%; }
.cs-radial ul { list-style: none; margin: 0; padding: 0; }
@container cs (max-width: 700px) {
  .cs-radial { aspect-ratio: auto; }
  .cs-radial svg.cs-radial-lines { display: none; }
  .cs-radial-center { position: static; transform: none; width: 150px; margin: 0 auto 1.5rem; }
  .cs-radial ul { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
  .cs-radial-item { position: static; transform: none; width: auto; }
  .cs-radial-item:last-child { grid-column: 1 / -1; }
}

/* ---------- Scenario cards ---------- */
.cs-scenario { margin: 3.5rem 0 1rem; }
.cs-scenario:first-of-type { margin-top: 1rem; }
.cs-scenario-num {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 1.05rem;
  margin-bottom: .5rem;
}
.cs-scenario-num span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--cs-accent);
}
.cs-scenario p { font-size: 1.05rem; margin-bottom: .75rem; }
.cs-hint { color: var(--cs-muted); font-size: .85rem; text-align: center; }
.cs-hint .fa { margin-right: .35rem; animation: cs-tap 1.8s ease-in-out infinite; display: inline-block; }
@keyframes cs-tap { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.cs-embed {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  min-height: 220px;
  border: 0;
  display: block;
  background: #0b0b0b;
  margin-bottom: 1rem;
}
.cs-embed.is-main { aspect-ratio: 4 / 3; }
.cs-embed-link { display: none; font-size: .85rem; margin: -.5rem 0 1rem; text-align: right; }
.cs-embed-link .fa { margin-left: .3rem; }
@container cs (max-width: 600px) {
  .cs-embed-link { display: block; }
}

/* ---------- Process overview ---------- */
.cs-steps {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  counter-reset: cs-step;
}
.cs-steps li { margin: 0; }
.cs-steps a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #ddd;
  border: 1px solid #3a3a3a;
  padding: .35rem .85rem .35rem .4rem;
  border-radius: 999px;
  font-size: .9rem;
  text-decoration: none;
  transition: border-color .25s ease, color .25s ease, background-color .25s ease;
}
.cs-steps a::before {
  counter-increment: cs-step;
  content: counter(cs-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #2b2b2b;
  font-size: .75rem;
  transition: background-color .25s ease;
}
.cs-steps a:hover { border-color: var(--cs-accent); color: #fff; }
.cs-steps a:hover::before { background: var(--cs-accent); }

/* Mind-map illustrations */
.cs-mindmap { width: 100%; max-width: 420px; margin: 0 auto; display: block; overflow: visible; }
.cs-mm { display: flex; align-items: center; justify-content: center; gap: .75rem; }
.cs-mm-img { width: 56px; height: 56px; flex: none; object-fit: contain; }
.cs-mm .cs-mindmap { flex: 1 1 auto; min-width: 0; margin: 0; }
.cs-mindmap text { fill: #d8d8d8; font-size: 20px; font-family: inherit; }
.cs-mindmap .cs-mm-root { fill: #fff; font-size: 22px; }
.cs-mindmap .cs-mm-hot { fill: var(--cs-accent); }
.cs-mindmap .cs-mm-edge { stroke: #9a9a9a; stroke-width: 1; stroke-dasharray: 3 3; fill: none; }
.cs-mindmap .cs-mm-edge.cs-mm-hot { stroke: var(--cs-accent); fill: none; }
.cs-mindmap .cs-mm-icon { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cs-js .cs-mindmap .cs-mm-leaf { opacity: 0; transition: opacity .5s ease; }
.cs-mindmap.is-visible .cs-mm-leaf { opacity: 1; }
.cs-mindmap.is-visible .cs-mm-leaf.d1 { transition-delay: .2s; }
.cs-mindmap.is-visible .cs-mm-leaf.d2 { transition-delay: .4s; }
.cs-mindmap.is-visible .cs-mm-leaf.d3 { transition-delay: .6s; }
.cs-mindmap.is-visible .cs-mm-leaf.d4 { transition-delay: .9s; }

/* Use-case template */
.cs-template {
  font-size: 1.15rem;
  line-height: 1.6;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  gap: 0 1.25rem;
}
.cs-template dt { color: var(--cs-accent); font-weight: 400; text-align: right; }
.cs-template dd { margin: 0; color: #fff; font-family: Menlo, Consolas, monospace; }

/* Tabs */
.cs-tabs [role="tablist"] {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.cs-tab {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid #555;
  background: transparent;
  color: #ddd;
  font-size: 1.1rem;
  font-family: inherit;
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.cs-tab:hover { border-color: #fff; color: #fff; }
.cs-tab[aria-selected="true"] { background: #6b1612; border-color: #6b1612; color: #fff; transform: scale(1.08); }
.cs-tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cs-tabs [role="tabpanel"] { animation: cs-fade .45s ease; }
.cs-tabs [role="tabpanel"][hidden] { display: none; }
html:not(.cs-js) .cs-tabs [role="tablist"] { display: none; }
html:not(.cs-js) .cs-tabs [role="tabpanel"] { display: block; margin-bottom: 2.5rem; }
@keyframes cs-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.cs-story {
  background: var(--cs-surface);
  border-left: 3px solid var(--cs-accent);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  font-size: 1.05rem;
}
.cs-story p { margin: 0 0 .2rem; }
.cs-tabs .cs-figure img { max-width: 640px; margin: 0 auto; }

/* Modified card-sorting illustration */
.cs-cardsort { text-align: center; }
.cs-cardsort-title { font-size: 1.15rem; margin-bottom: 1rem; }
.cs-cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  max-width: 240px;
  margin: 0 auto 1rem;
}
.cs-cards span { height: 34px; background: #8e1b17; grid-column: span 2; }
.cs-cards span:nth-child(1) { grid-column: 2 / span 2; }
.cs-cards span:nth-child(6) { grid-column: 2 / span 2; }
.cs-js .cs-cardsort.is-visible .cs-cards span { animation: cs-sort 3.2s ease-in-out infinite alternate; }
.cs-cardsort .cs-cards span:nth-child(1) { --dx: 60px; --dy: 40px; --r: 14deg; }
.cs-cardsort .cs-cards span:nth-child(2) { --dx: -40px; --dy: 50px; --r: -10deg; }
.cs-cardsort .cs-cards span:nth-child(3) { --dx: 30px; --dy: -40px; --r: 20deg; }
.cs-cardsort .cs-cards span:nth-child(4) { --dx: -50px; --dy: -20px; --r: -16deg; }
.cs-cardsort .cs-cards span:nth-child(5) { --dx: 40px; --dy: -50px; --r: 8deg; }
.cs-cardsort .cs-cards span:nth-child(6) { --dx: 20px; --dy: -30px; --r: -22deg; }
.cs-cardsort .cs-cards span:nth-child(7) { --dx: -60px; --dy: -10px; --r: 12deg; }
@keyframes cs-sort {
  0%, 15% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: .7; }
  70%, 100% { transform: none; opacity: 1; }
}
.cs-cardsort-labels { color: #ddd; line-height: 1.5; }
.cs-gapnote { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.cs-gapnote img { width: 52px; height: 52px; flex: none; }
.cs-gapnote div { font-size: 1.15rem; line-height: 1.3; }
.cs-gapnote small { display: block; color: var(--cs-muted); font-size: .85rem; margin-top: .35rem; }

/* Data-per-level table */
.cs-table-wrap { margin: 2rem 0; }
.cs-table-caption { text-align: center; font-size: 1.1rem; margin-bottom: 1.25rem; }
.cs-table-caption small { display: block; color: var(--cs-muted); font-size: .85rem; }
.cs-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.cs-table th {
  text-align: left;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .8rem;
  color: #fff;
  padding: .5rem .75rem;
  border-bottom: 2px solid #555;
}
.cs-table td {
  vertical-align: top;
  padding: .9rem .75rem;
  border-bottom: 1px dashed #444;
  color: #ddd;
}
.cs-table tbody tr { transition: background-color .25s ease; }
.cs-table tbody tr:hover { background: var(--cs-surface-2); }
.cs-level {
  display: inline-block;
  background: #23b5e3;
  color: #0b2733;
  padding: .25rem .6rem;
  font-weight: 600;
  white-space: nowrap;
}
.cs .cs-chips { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; padding: 0; margin: 0; }
.cs-chips li {
  margin: 0;
  padding: .1rem .5rem;
  font-size: .8rem;
  border-radius: 3px;
  background: rgba(203, 239, 140, .14);
  color: #d7f0a8;
}
.cs-chips.is-health li { background: rgba(255, 241, 150, .12); color: #f6e9a0; }
.cs-server { display: block; margin-top: .4rem; font-size: .75rem; color: #23b5e3; }
@container cs (max-width: 640px) {
  .cs-table thead { display: none; }
  .cs-table, .cs-table tbody, .cs-table tr, .cs-table td { display: block; width: 100%; }
  .cs-table tr { border-bottom: 1px dashed #444; padding: .75rem 0; }
  .cs-table td { border: 0; padding: .3rem 0; }
  .cs-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cs-muted);
    margin-bottom: .2rem;
  }
}

/* Figures (real artefacts: boards, sketches) */
.cs-figure { margin: 1.5rem 0 2rem; }
.cs-figure a { display: block; position: relative; overflow: hidden; }
.cs-figure img { width: 100%; height: auto; display: block; transition: transform .5s ease; }
.cs-figure a:hover img { transform: scale(1.015); }
.cs-figure a::after {
  content: "\f065";
  font-family: FontAwesome;
  position: absolute;
  right: .75rem;
  top: .75rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .7);
  color: #fff;
  opacity: 0;
  transition: opacity .25s ease;
}
.cs-figure a:hover::after,
.cs-figure a:focus::after { opacity: 1; }
.cs-figure figcaption { color: var(--cs-muted); font-size: .85rem; text-align: center; margin-top: .75rem; }

.cs-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.cs-gallery .cs-figure { margin: 0; }
.cs-gallery figcaption { color: #ddd; }
@container cs (max-width: 640px) { .cs-gallery { grid-template-columns: 1fr 1fr; } }
@container cs (max-width: 400px) { .cs-gallery { grid-template-columns: 1fr; } }

/* Prototyping loop */
.cs-loop { width: 100%; max-width: 640px; margin: 1rem auto; display: block; overflow: visible; }
.cs-loop text { font-family: inherit; fill: #fff; font-size: 22px; font-weight: 300; }
.cs-loop .cs-loop-ring { fill: none; stroke: #bbb; stroke-width: 1.5; }
.cs-loop .cs-loop-feed { fill: none; stroke: #bbb; stroke-width: 1.5; stroke-dasharray: 4 4; }
.cs-loop .cs-loop-orbit { transform-origin: 400px 170px; animation: cs-spin 6s linear infinite; }
.cs-loop .cs-loop-dot { fill: var(--cs-accent); }
.cs-loop .cs-loop-screen { fill: #fff; }
.cs-loop .cs-loop-ink { fill: none; stroke: #000; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes cs-spin { to { transform: rotate(360deg); } }
.cs-loop-compact { display: none; max-width: 320px; }
.cs-loop-compact .cs-loop-orbit { transform-origin: 150px 230px; }
/* Narrow columns get a vertical version so labels stay readable */
@container cs (max-width: 480px) {
  .cs-loop-wide { display: none; }
  .cs-loop-compact { display: block; }
}

/* ---------- Publication / note callout ---------- */
.cs-callout {
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid #333;
  border-left: 3px solid var(--cs-accent);
  padding: .9rem 1.25rem;
  margin: 1.5rem 0;
  font-size: .95rem;
}
.cs-callout .fa { font-size: 1.6rem; color: var(--cs-accent); flex: none; }
.cs-callout a { white-space: nowrap; }

/* ---------- Stat tiles ---------- */
.cs-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
  list-style: none;
  padding: 0;
}
.cs .cs-stats li { list-style: none; margin: 0; }
.cs-stat { background: var(--cs-surface); padding: 1.25rem; border-top: 2px solid var(--cs-accent); }
.cs-stat-value { display: block; font-size: 2rem; font-weight: 700; line-height: 1.1; color: #fff; }
.cs-stat-value small { font-size: .55em; font-weight: 400; color: var(--cs-muted); }
.cs-stat-label { display: block; color: #ccc; font-size: .9rem; margin-top: .4rem; line-height: 1.4; }

/* ---------- User group cards ---------- */
.cs-users { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 1.5rem 0; }
.cs-user { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.cs-user img { width: 84px; height: 84px; object-fit: contain; }
.cs-user h4 { color: var(--cs-accent); font-size: 1.2rem; font-weight: 700; margin: 0 0 .35rem; }
.cs-user p { margin: 0; }
@container cs (max-width: 440px) {
  .cs-users { grid-template-columns: 1fr; }
  .cs-user { grid-template-columns: 64px minmax(0, 1fr); }
  .cs-user img { width: 64px; height: 64px; }
}

/* ---------- Problem cards ---------- */
.cs-problems {
  display: grid;
  grid-template-columns: 150px repeat(3, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  align-items: start;
  margin: 2rem 0;
}
.cs-problems-hub {
  grid-row: span 2;
  align-self: center;
  width: 150px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #5c1014;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
}
.cs-problem h4 { color: var(--cs-accent); font-size: 1.15rem; font-weight: 700; margin: 0 0 .35rem; }
.cs-problem p { margin: 0; font-size: .95rem; }
@container cs (max-width: 640px) {
  .cs-problems { grid-template-columns: 110px repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }
  .cs-problems-hub { grid-row: span 3; width: 110px; font-size: 1rem; }
}
@container cs (max-width: 420px) {
  .cs-problems { grid-template-columns: 1fr; }
  .cs-problems-hub { grid-row: auto; width: 110px; justify-self: center; }
}

/* ---------- "How might we" statement ---------- */
.cs-hmw {
  position: relative;
  text-align: center;
  font-size: 1.6rem;
  line-height: 1.45;
  margin: 3rem auto;
  padding: 2.5rem 1rem;
  max-width: 720px;
  isolation: isolate;
}
.cs-hmw::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: #4a0d10;
  transform: translate(-50%, -50%);
  z-index: -1;
  animation: cs-breathe 4s ease-in-out infinite;
}
.cs-hmw strong { font-weight: 700; }
@keyframes cs-breathe { 50% { transform: translate(-50%, -50%) scale(1.12); } }
@container cs (max-width: 480px) { .cs-hmw { font-size: 1.25rem; } .cs-hmw::before { width: 140px; height: 140px; } }

/* ---------- Sticky-note clusters (affinity map) ---------- */
.cs-clusters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; margin: 1.5rem 0 1rem; }
.cs-cluster { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.cs-sticky {
  background: #a8e4f7;
  color: #0d2f3d;
  text-transform: uppercase;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.25;
  padding: 1rem .75rem;
  width: 130px;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 14px rgba(0, 0, 0, .45);
  transition: transform .3s ease;
}
.cs-cluster:nth-child(1) .cs-sticky { transform: rotate(-2deg); }
.cs-cluster:nth-child(3) .cs-sticky { transform: rotate(2deg); }
.cs-cluster:hover .cs-sticky,
.cs-sticky:hover { transform: rotate(0) scale(1.05); }
.cs .cs-quotes { list-style: none; padding: 0; margin: .4rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; max-width: 300px; }
.cs .cs-quotes li {
  list-style: none;
  margin: 0;
  border: 1px solid #bbb;
  padding: .35rem .6rem;
  font-size: .85rem;
  line-height: 1.35;
  text-align: center;
  width: calc(50% - .2rem);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-stickies-small { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; margin: 3rem 0 0; }
.cs-stickies-small .cs-sticky { width: 110px; min-height: 110px; font-size: .85rem; padding: .6rem; }
.cs-stickies-small .cs-sticky:nth-child(odd) { transform: rotate(-1.5deg); }
.cs-stickies-small .cs-sticky:nth-child(even) { transform: rotate(1.5deg); }
.cs-sublabel { color: var(--cs-muted); font-size: .85rem; text-align: center; margin: 1rem 0 0; }
@container cs (max-width: 560px) { .cs-clusters { grid-template-columns: 1fr; } }

/* ---------- Headings inside a section ---------- */
.cs .cs-h { font-weight: 700; font-size: 1.35rem; color: #fff; margin: 3rem 0 1rem; }
.cs .cs-h.is-red { color: var(--cs-accent); }
.cs .cs-h.is-big { font-size: 2rem; letter-spacing: .02em; }

/* Note between dashed rules (e.g. publication) */
.cs-dashnote {
  text-align: center;
  color: #9a9a9a;
  font-size: .95rem;
  padding: 1.25rem 0;
  margin: 1rem 0 2rem;
  border-top: 2px dashed #555;
  border-bottom: 2px dashed #555;
}

/* ---------- Proportional strip (share of survey mentions) ----------
   Recreates the slide chart: every element is placed from the slide's own
   coordinates, x as % of the strip width and y in cqw (the strip spans the
   .cs container, so 1cqw = 1% of its width) so it scales like the slide. */
.cs-pstrip { position: relative; margin: .5rem 0 2.5rem; }
.cs-pstrip > * { position: absolute; }
.cs-pstrip-block {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  /* Open Sans runs ~7% wider than the slide's Segoe UI */
  font-size: 1.3cqw;
  line-height: 1.87cqw;
  letter-spacing: .01em;
}
.cs-pstrip-block.is-dark { color: #1d6896; }
.cs-pstrip-block.is-warm { color: #c4501d; }
.cs-pstrip-block.is-semibold { font-weight: 400; }
.cs-pstrip-block.is-bold { font-weight: 700; }
.cs-pstrip-block .is-vertical { writing-mode: vertical-rl; transform: rotate(180deg); }
.cs-pstrip-pin {
  width: 1.24cqw;
  margin: -.62cqw 0 0 -.62cqw;
}
.cs-pstrip-pin::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.24cqw;
  height: 1.24cqw;
  border-radius: 50%;
  background: #fff;
}
.cs-pstrip-pin::after {
  content: "";
  position: absolute;
  left: calc(.62cqw - 1px);
  top: 1.24cqw;
  bottom: 0;
  border-left: 2px dashed #fff;
}
.cs-pstrip-note { color: #fff; font-size: 1.24cqw; line-height: 1.87cqw; letter-spacing: .01em; }
.cs-pstrip-note.is-quote { font-style: italic; }
.cs-pstrip-box { border: 3px dashed #fff; pointer-events: none; }
.cs-js .cs-pstrip .cs-pstrip-block { transform: scaleY(0); transform-origin: bottom; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.cs-js .cs-pstrip.is-visible .cs-pstrip-block { transform: none; }
.cs-pstrip-block:hover { filter: brightness(1.12); }
/* Narrow columns (to be refined): stack the blocks and show quotes under them */
@container cs (max-width: 600px) {
  .cs-pstrip { height: auto !important; display: flex; flex-direction: column; gap: 4px; }
  .cs-pstrip > * { position: static !important; transform: none !important; }
  .cs-pstrip-block { width: auto !important; height: auto !important; min-height: 48px; justify-content: flex-start; text-align: left; padding: .5rem 1rem; font-size: .9rem; line-height: 1.35; }
  .cs-pstrip-block br { display: none; }
  .cs-pstrip-block .is-vertical { writing-mode: horizontal-tb; transform: none; }
  .cs-pstrip-note.is-quote { white-space: normal !important; font-size: .85rem; line-height: 1.5; padding: .25rem 1rem .75rem; text-align: left !important; }
  .cs-pstrip-pin, .cs-pstrip-box, .cs-pstrip-note.is-label { display: none; }
}

/* ---------- Idea map ('Good' recommendation) ---------- */
.cs-ideas-q {
  border: 3px dashed #8e1b17;
  padding: 1rem 1.5rem;
  font-weight: 700;
  font-size: 1.2rem;
  text-align: center;
  max-width: 300px;
  margin: 2rem auto 2.5rem;
}
.cs .cs-ideas {
  list-style: none;
  padding: 0;
  margin: 0 0 7rem;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2.25rem 1.5rem;
  align-items: center;
}
.cs .cs-ideas li {
  list-style: none;
  margin: 0;
  padding: .9rem 1rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.4;
  color: #fff;
  grid-column: span 2;
  justify-self: center;
}
.cs .cs-ideas li.is-focus { background: #3a0b0e; font-weight: 600; justify-self: stretch; }
.cs .cs-ideas li.is-future { border: 2px solid #8a8a8a; color: #9a9a9a; position: relative; justify-self: stretch; }
.cs .cs-ideas li.is-future::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 110%;
  height: 7rem;
  border-left: 2px dashed #888;
  border-bottom: 2px dashed #888;
}
.cs .cs-ideas li.is-future::before {
  content: "Future Work";
  position: absolute;
  top: calc(100% + 7rem - .75em);
  left: calc(50% + 110% + .5rem);
  white-space: nowrap;
  color: #9a9a9a;
  font-weight: 400;
}
.cs .cs-ideas .c1 { grid-column: 1 / span 2; }
.cs .cs-ideas .c2 { grid-column: 2 / span 2; }
.cs .cs-ideas .c3 { grid-column: 3 / span 2; }
.cs .cs-ideas .c4 { grid-column: 4 / span 2; }
.cs .cs-ideas .c5 { grid-column: 5 / span 2; }
@container cs (max-width: 600px) {
  .cs .cs-ideas { grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 2rem; }
  .cs .cs-ideas li, .cs .cs-ideas li[class*="c"] { grid-column: auto; justify-self: stretch; border: 1px solid #444; }
  .cs .cs-ideas li.is-focus { border-color: #3a0b0e; }
  .cs .cs-ideas li.is-future::after { display: none; }
  .cs .cs-ideas li.is-future::before { position: static; display: block; font-size: .8rem; }
}

/* ---------- Feature blocks ---------- */
.cs-audience {
  position: relative;
  isolation: isolate;
  display: inline-block;
  color: #fff;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .04em;
  padding: .55rem 1rem;
  margin: 3rem 0 1rem;
}
.cs-audience::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6.5rem;
  background: #5c1014;
  z-index: -1;
}
.cs-feature-title { color: var(--cs-accent); font-weight: 700; font-size: 1.35rem; margin: 2rem 0 .5rem; }

/* ---------- Before / after table ---------- */
.cs-compare { width: 100%; max-width: 720px; margin: 1.5rem auto .5rem; border-collapse: collapse; font-size: 1rem; }
.cs-compare th { font-weight: 400; font-style: italic; color: #ccc; text-align: right; padding: .5rem .75rem; border-bottom: 1px solid #777; }
.cs-compare th:first-child { text-align: left; }
.cs-compare td { padding: .7rem .75rem; text-align: right; font-variant-numeric: tabular-nums; border-bottom: 1px solid #222; }
.cs-compare td:first-child { text-align: left; color: #ddd; }
.cs-compare .is-better { color: #8fd48a; font-weight: 600; }
.cs-compare .is-better .fa { margin-left: .4rem; }
.cs-compare caption { caption-side: bottom; text-align: center; color: var(--cs-muted); padding-top: .75rem; font-size: .9rem; }
@container cs (max-width: 480px) { .cs-compare { font-size: .85rem; } .cs-compare td, .cs-compare th { padding: .5rem .35rem; } }

/* Two figures side by side */
.cs-figure-pair { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.5rem; align-items: end; }
.cs-figure-pair .cs-figure { margin: 0; }
.cs-figure-pair figcaption { color: #fff; font-size: 1.15rem; margin: 0 0 .75rem; }
@container cs (max-width: 600px) { .cs-figure-pair { grid-template-columns: 1fr; } }

/* ---------- Page layout ----------
   The theme pins the cover to the left third from 768px up, which crops the
   cover art and squeezes the content on tablets. Stack it until 992px, and
   give it room to show the artwork on phones. */
@media (max-width: 991px) {
  #itempage .section-cover-tier {
    position: relative;
    top: 0;
    width: 100%;
    height: auto;
    /* artwork height + top offset + room for the title below it */
    min-height: calc(min(86vw, 480px) + 56px + 150px);
    background-size: min(86%, 480px) auto;
    background-repeat: no-repeat;
    background-position: center 56px;
    background-color: #000;
    display: flex;
  }
  #itempage .section-cover-tier .cover-content { height: auto; width: 100%; }
  #itempage .item > .col-md-4 { display: none; }
  #itempage .item > .col-md-8 { flex: 0 0 100%; max-width: 100%; }
}
/* Keep the cover title inside the one-third cover column on laptops */
@media (min-width: 992px) {
  #itempage .section-cover-tier .display-title { font-size: clamp(2rem, calc(5.6vw - 18px), 4rem); }
}
/* The theme's .row negative margins overflow the full-width wrapper */
@media (min-width: 768px) {
  #itempage .section-wrapper > .item.row { margin-left: 0; margin-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cs *, .cs *::before, .cs *::after { animation: none !important; transition: none !important; }
  .cs-js .cs-reveal, .cs-js .cs-stagger > * { opacity: 1; transform: none; }
}

/* ==========================================================================
   Audience's Voice (ASO)
   Sections after the summary are rebuilt from the original slides: every
   text line, panel and graphic sits at its measured position (inline
   styles), and sizes use cqw so the layout scales with the column.
   ========================================================================== */
.cs-aso { --cs-accent: #b0262b; --aso-block: #570c14; }
/* The theme dims paragraphs and lists; the original slides use full white */
.cs.cs-aso > :is(p, ul, ol):not(.cs-reveal) { opacity: 1; }
.cs .cs-slide > p { opacity: 1; }

/* Heading on a short maroon block (summary) */
.cs h3.cs-block {
  position: relative;
  isolation: isolate;
  display: table;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  padding: .55rem 0 .55rem 2.7rem;
  margin: 3.5rem 0 1.25rem;
}
.cs h3.cs-block::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5.2rem;
  background: var(--aso-block);
  z-index: -1;
}
.cs-js .cs h3.cs-block::before { transform: scaleX(0); transform-origin: left; transition: transform .6s ease; }
.cs-js .cs h3.cs-block.is-visible::before { transform: none; }
.cs-aso-bg { display: grid; grid-template-columns: 3fr 2fr; gap: 2.5rem; align-items: center; }
.cs-aso-bg img { width: 100%; height: auto; display: block; }

/* Slide-faithful blocks */
.cs-slide { position: relative; width: 100%; margin: 0 0 .5rem; }
.cs .cs-slide .cs-t { margin: 0; white-space: nowrap; }
.cs .cs-slide .cs-t strong { color: inherit; }
.cs-slide .cs-g { display: block; max-width: none; }
.cs-slide .cs-f a { display: block; width: 100%; height: 100%; }
.cs-slide .cs-f a:hover img { filter: brightness(1.08); }
.cs-js .cs .cs-slide > * {
  opacity: 0;
  translate: 0 12px;
  transition: opacity .6s ease, translate .6s ease;
  transition-delay: var(--d, 0s);
}
.cs-js .cs .cs-slide.is-visible > * { opacity: 1; translate: none; }
.cs-slide .cs-s { transform-origin: left center; }
.cs-js .cs .cs-slide > .cs-s { translate: none; scale: 1 1; }

.cs-embed.is-figma { aspect-ratio: 4 / 3; margin: 1rem 0 3rem; }
.cs-embed.is-figma.is-wide { aspect-ratio: 16 / 10; }
.cs-embed.is-slides { aspect-ratio: 16 / 9.5; }

@container cs (max-width: 700px) {
  .cs-aso-bg { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Research Repository: slides rebuilt as positioned text and shapes
   ========================================================================== */
.cs-rr .cs-slides, .cs-hg .cs-slides, .cs-hl .cs-slides, .cs-ps .cs-slides, .cs-em .cs-slides, .cs-dr .cs-slides, .cs-fl .cs-slides, .cs-wc .cs-slides, .cs-lm .cs-slides { margin: 1.5rem 0 4rem; }
.cs-rr .cs-slides .cs-slide, .cs-hg .cs-slides .cs-slide, .cs-hl .cs-slides .cs-slide, .cs-ps .cs-slides .cs-slide, .cs-em .cs-slides .cs-slide, .cs-dr .cs-slides .cs-slide, .cs-fl .cs-slides .cs-slide, .cs-wc .cs-slides .cs-slide, .cs-lm .cs-slides .cs-slide { margin-bottom: 1rem; }
.cs-rr > h1, .cs-hg > h1, .cs-hl > h1, .cs-ps > h1, .cs-em > h1, .cs-dr > h1, .cs-fl > h1, .cs-wc > h1, .cs-lm > h1, .cs-iv > h1 { scroll-margin-top: 80px; }
/* Poison: the heading circles are cut by the slide edge, as in the original */
.cs-ps .cs-slide { overflow: hidden; }
.cs-em .cs-slide { overflow: hidden; }
/* Flow: the questionnaire table, rebuilt from the slide as a real table */
.cs-slide .cs-x { margin: 0; }
.cs-fl-table { width: 100%; height: 100%; table-layout: fixed; border-collapse: collapse; color: #e8e8e8;
  font-family: 'Open Sans', sans-serif; font-size: 1.2cqw; line-height: 1.35; }
.cs-fl-table td { border: 0; border-bottom: 1px solid rgba(255, 255, 255, .16); padding: .5cqw .9cqw; vertical-align: top; text-align: left; }
.cs-fl-table tr:first-child td { background: #765319; color: #fff; font-size: 1.3cqw; border-bottom: 0; vertical-align: middle; }
.cs-fl-table tr:first-child b { font-weight: 600; }
.cs-fl-table td:first-child { color: #d7a348; }
.cs-fl-table tr:not(:first-child) td { vertical-align: top; }
/* Wheelchair: bold phrases with the slide's red underline, and the data tables */
.cs-slide .cs-t b { font-weight: 700; color: inherit; }
.cs-slide .cs-t .cs-ul { text-decoration: underline; text-decoration-color: #a92219; text-decoration-thickness: .16em; text-underline-offset: .42em; }
.cs-wc-table { width: 100%; height: 100%; table-layout: fixed; border-collapse: collapse; color: #e8e8e8;
  font-family: 'Open Sans', sans-serif; line-height: 1.2; }
.cs-wc-table td { border: 0; border-bottom: 1px solid rgba(255, 255, 255, .16); padding: 0 .4cqw; text-align: center; vertical-align: middle; }
.cs-wc-table b { font-weight: 700; color: #fff; }
.cs-wc-table tr:nth-child(2) td, .cs-wc-table .is-head { background: rgba(114, 24, 16, .55); color: #fff; border-bottom: 0; }
.cs-wc-table .is-title { background: #721810; color: #fff; letter-spacing: .08em; font-size: .9em; border-bottom: 0; }
.cs-wc-table .is-top { vertical-align: middle; }
.cs-wc-table .is-num { text-align: center; }
.cs-wc-table .is-red { color: #ff6b5e; font-weight: 600; }
.cs-wc-table .is-group { color: #fff; font-weight: 600; border-right: 1px solid rgba(255, 255, 255, .16); }
.cs-wc-table.is-summary tr:first-child td { background: #721810; color: #fff; border-bottom: 0; }
.cs-wc-table.is-summary tr:nth-child(2) td { background: none; border-bottom: 1px solid rgba(255, 255, 255, .16); color: inherit; }
.cs-wc-table.is-current tr:nth-child(2) td { background: none; border-bottom: 1px solid rgba(255, 255, 255, .16); color: inherit; }
.cs-wc-table tr:last-child td { border-bottom: 0; }
.cs-wc-table td:first-child { text-align: left; padding-left: .9cqw; }
.cs-wc-table .is-title, .cs-wc-table.is-current td.is-group { text-align: center; }
.cs-wc-table.is-current td { text-align: center; padding-left: .4cqw; }
.cs-wc-foot { margin: 0; color: #a8a8a8; font-family: 'Open Sans', sans-serif; font-size: 1.02cqw; line-height: 1.35; opacity: 1; }

/* Hashtag Guru: phone prototype keeps its original fixed height */
.cs-embed.is-phone { aspect-ratio: auto; height: 542px; }

/* InfoViz: slides stack edge to edge with the animated charts between them, as in the original */
.cs-iv .cs-slides .cs-slide { margin: 0; }
.cs-iv .cs-slide .cs-t .cs-ul { text-decoration-color: #f59a1b; text-decoration-thickness: .1em; text-underline-offset: .38em; }

/* ==========================================================================
   Phones and tablets: js/case-study.js builds a stacked copy of each slide
   (.cs-mflow) below 900px and hides the positioned original. Nothing here
   applies on wider screens.
   ========================================================================== */
.cs-mflow, .cs-mcustom { display: none; }
.cs-measuring > * { translate: none !important; transition: none !important; }
@media (max-width: 900px) {
  .cs .cs-slide.has-mflow, .cs .cs-slide[data-m="custom"] { display: none; }
  .cs .cs-mflow, .cs .cs-mcustom { display: block; margin: 0 0 1.75rem; }
  .cs-mflow .cs-mstack > * { margin-top: 0; }
  .cs-mflow .cs-mgrid { display: grid; gap: 22px 18px; align-items: start; }
  .cs .cs-mflow p.cs-mt { opacity: 1; margin: 0; white-space: normal; line-height: 1.55; overflow-wrap: break-word; }
  .cs-mflow p.cs-mt[style*="text-align:right"] { font-size: 13px !important; }
  .cs-mflow .cs-t b { font-weight: 700; color: inherit; }
  .cs-mflow .cs-t .cs-ul { text-decoration: underline; text-decoration-color: #a92219; text-decoration-thickness: .12em; text-underline-offset: .3em; }
  .cs-iv .cs-mflow .cs-t .cs-ul { text-decoration-color: #f59a1b; }
  .cs-mflow .cs-mpanel { padding: 14px; }
  .cs-mflow .cs-mpanel > * { position: relative; }
  .cs-mflow .cs-mimg { max-width: 100%; margin: 0 auto; }
  .cs-mflow .cs-mimg > * { position: static !important; }
  .cs-mflow .cs-mimg img { width: 100%; height: 100%; object-fit: contain; }
  .cs-mflow .cs-mview { position: relative; overflow: hidden; margin: 0 auto; }
  .cs-mflow .cs-minner { position: absolute; margin: 0; aspect-ratio: auto !important; container-type: inline-size; }
  .cs-mflow .cs-mscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cs-mflow .cs-mscroll > .cs-mview { margin: 0; }
  .cs .cs-mflow p.cs-mhint { margin: .4rem 0 0; font-size: 12px; color: #8f8f8f; opacity: 1; text-align: center; }
  /* tables rebuilt from slides: readable type, scroll sideways when wide */
  .cs-mflow .cs-mraw { position: static; width: auto; height: auto; }
  .cs-mflow .cs-mraw table { height: auto; min-width: 520px; font-size: 12.5px !important; }
  .cs-mflow .cs-mraw td { padding: 6px 8px !important; font-size: inherit !important; }
  .cs-mflow .cs-mraw tr:first-child td { font-size: 13px !important; }
  .cs-mflow .cs-mraw .cs-wc-foot { font-size: 12px !important; margin-top: .5rem; }
}
@media (max-width: 900px) {
  .cs-mflow .cs-mrow { display: flex; align-items: center; gap: 14px; }
  .cs-mflow .cs-mrow > .cs-mimg, .cs-mflow .cs-mrow > .cs-mview { margin: 0; }
  .cs-mflow .cs-mrow p.cs-mt { text-align: left !important; }
}