/* Shared by the Uline round 2 ideas (U4–U6): warm and light, but serious. Smaller text,
   an Instrument Serif title, one-line summaries, key numbers, and rough sketch placeholders. */
.page-case .app { padding: clamp(92px, 11vw, 128px) var(--gutter) 160px; }
.cs { display: grid; gap: clamp(28px, 4vw, 44px); max-width: 1040px; margin: 0 auto; }
.cs-title {
  margin: 0; font-family: var(--font-head); font-weight: 400;
  font-size: clamp(38px, 4.6vw, 56px); line-height: 1.05; letter-spacing: -0.01em; color: var(--ink);
}
.cs-hero .kicker { margin-bottom: 10px; }
.cs-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.cs-facts li { padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink); background: #FFF7EE; box-shadow: inset 0 0 0 1px var(--line); }
.cs-facts span { margin-right: 6px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 10.5px; color: var(--kicker); }
.cs-h { margin: 0; font-family: var(--font-head); font-weight: 400; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.1; color: var(--ink); }
.cs h3 { margin: 0 0 4px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.cs p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--text); }
.cs-sum { margin: 8px 0 12px !important; font-size: 15.5px !important; font-weight: 600; line-height: 1.5 !important; color: var(--accent) !important; }
.cs-list { display: grid; gap: 14px; margin: 14px 0 0; padding: 0; list-style: none; }

/* Key numbers */
.cs-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.cs-stats > div { display: grid; gap: 2px; min-width: 150px; padding: 14px 18px; border-radius: 16px; background: #FFFDF8; box-shadow: inset 0 0 0 1px var(--line); }
.cs-stats b { font-family: var(--font-head); font-weight: 400; font-size: 36px; line-height: 1; color: var(--accent); }
.cs-stats span { font-size: 12.5px; color: var(--soft); }

/* "On this page" (left list; same size as round 1) */
.cs-book { display: grid; grid-template-columns: 190px 1fr; gap: clamp(24px, 4vw, 52px); align-items: start; }
.cs-toc { position: sticky; top: 84px; }
.cs-toc ol { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cs-toc a { display: block; padding: 8px 14px; border-left: 2px solid var(--line); color: var(--soft); font-size: 14.5px; text-decoration: none; transition: color 0.3s, border-color 0.3s, background 0.3s; }
.cs-toc a:hover { color: var(--ink); }
.cs-toc a.is-here { color: var(--accent); font-weight: 600; border-color: var(--accent); background: linear-gradient(90deg, #EEF3E8, transparent); }
.cs-pages { display: grid; gap: 22px; }
.cs-page { scroll-margin-top: 84px; }

/* Rough sketch placeholders: pictures to come */
.ph { margin: 0; }
.ph-art { overflow: hidden; border-radius: 14px; background: #FBF5EC; box-shadow: inset 0 0 0 1.5px #E8DDCB; }
.ph-art svg { display: block; width: 100%; height: auto; }
.ph figcaption { margin-top: 8px; font-size: 12.5px; color: var(--soft); }
.ph figcaption span { margin-right: 8px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kicker); background: #FBEDF0; }

/* FigJam board and its lightbox */
.cs-figure { margin: 18px 0 0; }
.cs-figure img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: var(--shadow); }
.cs-figure figcaption { margin-top: 8px; font-size: 12.5px; color: var(--soft); text-align: center; }
.cs-zoom { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.cs-zoom-hint { position: absolute; right: 12px; bottom: 12px; padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: #FFFFFF; background: rgba(38, 42, 34, 0.7); }
.cs-lightbox { width: min(96vw, 1400px); max-height: 92vh; padding: 0; border: 0; border-radius: 18px; background: #FFFFFF; }
.cs-lightbox::backdrop { background: rgba(251, 248, 243, 0.86); backdrop-filter: blur(6px); }
.cs-lightbox img { display: block; width: 100%; height: auto; }
.cs-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; font-size: 22px; line-height: 1; color: var(--ink); background: #FFFFFF; box-shadow: var(--shadow); cursor: pointer; }

/* Related projects */
.cs-related { text-align: center; padding-top: 20px; }
.cs-related .cs-h { margin-bottom: 22px; }
.cs-related-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; text-align: left; }
.cs-rel { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center; padding: 10px; border-radius: 20px; background: var(--card); color: inherit; text-decoration: none; box-shadow: var(--shadow); transition: transform 0.35s var(--ease), box-shadow 0.35s; }
.cs-rel:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.cs-rel-thumb { aspect-ratio: 1; overflow: hidden; border-radius: 12px; }
.cs-rel-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-rel-body { display: grid; gap: 5px; padding-right: 10px; }
.cs-rel-body b { font-family: var(--font-head); font-weight: 400; font-size: 19px; line-height: 1.15; color: var(--ink); }
.cs-rel .meta { color: var(--kicker); font-size: 11.5px; }
.cs-back { margin-top: 26px; }

@media (max-width: 860px) {
  .cs-book { grid-template-columns: 1fr; }
  .cs-toc { position: static; }
  .cs-toc ol { grid-auto-flow: column; overflow-x: auto; }
  .cs-toc a { border-left: 0; border-bottom: 2px solid var(--line); white-space: nowrap; }
  .cs-toc a.is-here { border-color: var(--accent); }
}

/* Uline idea U6 · Reading column: "On this page" becomes a bar that stays under the status
   bar, with a pink line that fills as you read. One narrow column for easy reading, with the
   pictures and decision cards stepping out wider. */
.cs-bar {
  position: sticky; top: 56px; z-index: 20; justify-self: center;
  display: flex; flex-direction: column; padding: 6px 8px 0; border-radius: 999px;
  background: rgba(255, 253, 248, 0.92); backdrop-filter: blur(8px); box-shadow: var(--shadow); overflow: hidden;
}
.cs-bar ol { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; overflow-x: auto; }
.cs-bar a { display: block; padding: 7px 14px 9px; border-radius: 999px; font-size: 13.5px; color: var(--soft); text-decoration: none; white-space: nowrap; transition: color 0.3s, background 0.3s; }
.cs-bar a:hover { color: var(--ink); }
.cs-bar a.is-here { color: var(--accent); font-weight: 600; background: #EEF3E8; }
.cs-progress { display: block; height: 3px; margin: 4px -8px 0; background: var(--glow); transform-origin: 0 50%; transform: scaleX(var(--read, 0)); }
.cs-hero.is-centre { text-align: center; }
.cs-stats.is-strip { justify-content: center; }
.cs-column { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; width: min(100%, 680px); margin: 0 auto; }
.cs-hero.is-centre .cs-facts { justify-content: center; }
.cs-sec { scroll-margin-top: 120px; }
.cs-sec > * + * { margin-top: 14px; }
.cs-no { margin: 0 0 4px; font-family: var(--font-head); font-style: italic; font-size: 20px; color: var(--kicker); }
.is-wide { width: min(100vw - 2 * var(--gutter), 940px); margin-left: 50%; transform: translateX(-50%); }
.cs-cards.is-wide { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.cs-card { padding: 14px 14px 18px; border-radius: 16px; background: #FFFDF8; box-shadow: inset 0 0 0 1px var(--line); }
.cs-card .ph.is-top { margin: -4px -4px 14px; }
.cs-card h3 em { display: block; margin-bottom: 2px; font-family: var(--font-head); font-style: italic; font-weight: 400; font-size: 20px; color: var(--kicker); }
.cs-pull { margin: 18px 0 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--glow); }

/* U7: the cover picture under the title, the process in place of the numbers, pictures kept
   inside the reading column (a little smaller) with more room above and below them, and the
   key decisions as side-by-side sketch + text cards. */
.cs-cover { width: min(100%, 820px); margin: 0 auto; }
.cs-cover img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: var(--shadow); }
.cs-process { width: min(100%, 940px); margin: 0 auto; text-align: center; }
.cs-process .kicker { margin-bottom: 14px; }
.cs-process ol { display: flex; align-items: stretch; justify-content: center; gap: 30px; margin: 0; padding: 0; list-style: none; }
.cs-process li {
  position: relative; flex: 1 1 0; display: grid; align-content: start; gap: 4px;
  padding: 14px 12px; border-radius: 16px; background: #FFFDF8; box-shadow: inset 0 0 0 1px var(--line);
}
.cs-process li b { font-family: var(--font-head); font-style: italic; font-weight: 400; font-size: 18px; color: var(--kicker); }
.cs-process li span { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--ink); }
/* The arrow to the next step */
.cs-process li + li::before {
  content: ""; position: absolute; top: 50%; left: -26px; width: 22px; height: 12px; transform: translateY(-50%);
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M1 6h18M14 1l5 5-5 5' fill='none' stroke='%23D98A9C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cs-column .ph, .cs-column .cs-figure { width: min(100%, 600px); margin: 32px auto; }
.cs-column .cs-figure figcaption { text-align: left; }
.cs-cards { display: grid; gap: 14px; margin-top: 22px; }
.cs-card { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: center; padding: 14px; }
.cs-card .ph.is-side { width: auto; margin: 0; }
.cs-card .ph.is-side figcaption { font-size: 11.5px; }
@media (max-width: 860px) {
  .cs-process ol { flex-direction: column; gap: 26px; }
  .cs-process li + li::before { top: -20px; left: 50%; transform: translateX(-50%) rotate(90deg); }
}
@media (max-width: 600px) { .cs-card { grid-template-columns: 1fr; } }

/* U7 update: on wide screens "On this page" moves to the left side, as a list with lines like
   U3 and U4. It's fixed in the empty space left of the reading column, so nothing else moves
   (the room it used to take at the top is kept). The pink reading line now runs down its side.
   Narrower screens keep the bar across the top. */
@media (min-width: 1100px) {
  .cs { padding-top: calc(51px + clamp(28px, 4vw, 44px)); }
  .cs-bar {
    position: fixed; top: 140px; left: max(24px, calc(50vw - 470px - 24px - 190px));
    width: 190px; padding: 0; border-radius: 0;
    background: none; backdrop-filter: none; box-shadow: none; overflow: visible;
  }
  .cs-bar::before { content: "On this page"; display: block; margin: 0 0 10px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kicker); }
  .cs-bar ol { position: relative; display: grid; gap: 4px; overflow: visible; }
  .cs-bar a { padding: 8px 14px; border-left: 2px solid var(--line); border-radius: 0; font-size: 14.5px; white-space: normal; }
  .cs-bar a.is-here { color: var(--accent); font-weight: 600; border-color: var(--accent); background: linear-gradient(90deg, #EEF3E8, transparent); }
  .cs-progress {
    position: absolute; top: 28px; left: 0; width: 2px; height: calc(100% - 28px); margin: 0;
    transform-origin: 50% 0; transform: scaleY(var(--read, 0)); opacity: 0.7;
  }
}
@media (min-width: 1100px) {
  .cs-bar { transition: opacity 0.35s ease, visibility 0.35s; }
}
@media (min-width: 1100px) {
  /* The side line is only the pink reading line now; the current title is shown in green
     (text and soft green highlight) without a green line of its own */
  .cs-bar a.is-here { border-color: var(--line); }
  .cs-progress { opacity: 1; }
}
@media (min-width: 1100px) {
  /* "On this page" always stays visible: it now sits just outside the widest pieces (940px),
     so nothing passes behind it. The related projects row is kept to that same width. */
  .cs-related-row { max-width: 940px; margin: 0 auto; }
}
@media (min-width: 1100px) {
  /* "On this page" moved 40px to the right. To keep it clear of everything, the process row and
     the related projects are 860px wide here (still wider than the 820px cover). */
  .cs-bar { left: max(24px, calc(50vw - 430px - 24px - 190px)); }
  .cs-process, .cs-related-row { max-width: 860px; }
}

/* U8: click a process step and a panel drops down under the row with that phase's details.
   The panel grows to fit each phase; ← → slide to the step before or after. */
.cs-process-hint { margin: -6px 0 14px; font-size: 12.5px; color: var(--soft); }
.cs-process li { display: flex; padding: 0; background: none; box-shadow: none; }
.cs-step {
  display: grid; align-content: start; gap: 4px; width: 100%; padding: 14px 12px;
  border: 0; border-radius: 16px; font: inherit; text-align: center; cursor: pointer;
  background: #FFFDF8; box-shadow: inset 0 0 0 1px var(--line);
  transition: transform 0.35s var(--ease), box-shadow 0.35s, background 0.35s;
}
.cs-step:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
.cs-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cs-step b { font-family: var(--font-head); font-style: italic; font-weight: 400; font-size: 18px; color: var(--kicker); }
.cs-step span { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.cs-step.is-open { background: #EEF3E8; box-shadow: inset 0 0 0 1.5px var(--accent); }
.cs-step.is-open b, .cs-step.is-open span { color: var(--accent); }

/* The wrap is a little wider and taller than the panel so its shadow isn't cut off */
.cs-phase-wrap { height: 0; margin: 0 -16px; padding: 0 16px; overflow: hidden; transition: height 0.55s var(--ease); }
.cs-phase {
  position: relative; margin-top: 18px; padding: 24px 28px 18px; border-radius: 20px; text-align: left;
  background: #FFFDF8; box-shadow: inset 0 0 0 1px var(--line), var(--shadow);
  opacity: 0; transform: translateY(-8px); transition: opacity 0.4s, transform 0.5s var(--ease);
}
.cs-phase-wrap.is-open .cs-phase { opacity: 1; transform: none; }
/* The little pointer up to the open step */
.cs-phase-tip {
  position: absolute; top: -8px; left: var(--tip-x, 50%); width: 16px; height: 16px; margin-left: -8px;
  background: #FFFDF8; box-shadow: -1px -1px 0 0 var(--line); transform: rotate(45deg); transition: left 0.5s var(--ease);
}
.cs-phase-close {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 50%;
  font-size: 20px; line-height: 1; color: var(--soft); background: transparent; cursor: pointer;
}
.cs-phase-close:hover { color: var(--ink); background: #F4EEE4; }
.cs-phase-view { position: relative; overflow: hidden; }
.cs-phase-body > * + * { margin-top: 10px; }
.cs-phase-no { margin: 0; font-family: var(--font-head); font-style: italic; font-size: 18px; color: var(--kicker); }
.cs-phase-title { margin: 2px 0 0 !important; padding-right: 30px; font-family: var(--font-head); font-weight: 400 !important; font-size: 24px !important; line-height: 1.15; color: var(--ink); }
.cs-phase-soon { color: var(--soft) !important; font-style: italic; }
.cs-phase-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--line); }
.cs-phase-nav button { padding: 6px 12px; border: 0; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; color: var(--accent); background: transparent; cursor: pointer; }
.cs-phase-nav button:hover:not(:disabled) { background: #EEF3E8; }
.cs-phase-nav button:disabled { color: var(--line); cursor: default; }
.cs-phase-nav span { font-size: 12px; color: var(--soft); }

/* Sliding to the next or previous phase */
.cs-phase-body.is-leaving { position: absolute; inset: 0 0 auto 0; }
.cs-phase-body.to-left { animation: phase-out-left 0.45s var(--ease) forwards; }
.cs-phase-body.to-right { animation: phase-out-right 0.45s var(--ease) forwards; }
.cs-phase-body.from-right { animation: phase-in-right 0.45s var(--ease); }
.cs-phase-body.from-left { animation: phase-in-left 0.45s var(--ease); }
@keyframes phase-out-left { to { opacity: 0; transform: translateX(-60px); } }
@keyframes phase-out-right { to { opacity: 0; transform: translateX(60px); } }
@keyframes phase-in-right { from { opacity: 0; transform: translateX(60px); } }
@keyframes phase-in-left { from { opacity: 0; transform: translateX(-60px); } }

/* Phones: the steps are stacked, so the panel opens right under the step you tapped */
@media (max-width: 860px) {
  .cs-process li { flex-direction: column; }
  .cs-phase { margin-top: 12px; padding: 20px 18px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-phase-wrap, .cs-phase, .cs-phase-tip { transition: none; }
}

/* U8 phase content: a list of activities beside one picture */
.cs-phase-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; margin-top: 16px !important; }
.cs-phase-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.cs-phase-list li { padding-left: 14px; border-left: 2px solid var(--line); }
.cs-phase-list h4 { margin: 0 0 3px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.cs-phase-list p { font-size: 14px !important; }
.cs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px !important; }
.cs-chips span { padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--kicker); background: #FBEDF0; }
.cs-phase-grid .ph { margin: 0; }
@media (max-width: 860px) { .cs-phase-grid { grid-template-columns: 1fr; gap: 18px; } }
/* The phase list sits inside .cs-process, so undo the step-card styles it would pick up */
.cs-process .cs-phase-list li { display: block; flex: none; padding: 0 0 0 14px; border-radius: 0; background: none; box-shadow: none; }
.cs-process .cs-phase-list li::before { content: none; }
.cs-process .cs-phase-list li span { font-size: 11.5px; font-weight: 600; line-height: 1.4; color: var(--kicker); }
/* On phones the panel moves inside the step's row, so keep the picture caption its usual size */
.cs-process .cs-phase figcaption span { font-size: 10.5px; font-weight: 600; line-height: inherit; color: var(--kicker); }
/* Phase 01 update: small dots for the secondary research topics, the audit picture beside the list */
.cs-process .cs-dots { display: grid; gap: 4px; margin: 4px 0 0; padding: 0 0 0 16px; list-style: disc; }
.cs-process .cs-dots li { display: list-item; padding: 0; border: 0; font-size: 14px; line-height: 1.6; color: var(--text); }
.cs-process .cs-dots li::marker { color: var(--glow); }
.cs-phase-list h4 { white-space: nowrap; }
.cs-phase-pic { margin: 0 !important; }
.cs-phase-pic img { border-radius: 12px; }
.cs-phase-pic .cs-zoom-hint { right: 8px; bottom: 8px; font-size: 11px; }
/* Phase facts (used in place of a picture when a phase has numbers instead) */
.cs-phase-facts { display: grid; gap: 10px; margin: 0; }
.cs-phase-facts > div { padding: 12px 16px; border-radius: 14px; background: #FBF5EC; box-shadow: inset 0 0 0 1px var(--line); }
.cs-phase-facts dt { font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kicker); }
.cs-phase-facts dd { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.cs-process .cs-phase-facts dd b { display: block; font-family: var(--font-head); font-style: normal; font-size: 40px; line-height: 1; color: var(--accent); }
.cs-process .cs-phase-facts dd span { display: block; margin-top: 6px; font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--text); }
.cs-phase-grid.is-solo { grid-template-columns: minmax(0, 1fr); }
/* Process now sits after Overview (between two reading columns), with a heading like the others */
.cs-process { scroll-margin-top: 120px; }
.cs-process .cs-h { margin-bottom: 10px; }
.cs-process-hint { margin-top: 0; }

/* Process now sits inside the reading column like the other sections: same heading and green
   summary line, left-aligned, the five steps and the panel fitting the column's width */
.cs-column .cs-process { width: auto; margin: 0; text-align: left; }
@media (min-width: 1100px) { .cs-column .cs-process { max-width: none; } }
.cs-column .cs-process ol { gap: 22px; margin-top: 18px; }
.cs-column .cs-process li + li::before { left: -20px; width: 18px; }
.cs-column .cs-step { padding: 12px 8px; }
.cs-column .cs-step span { font-size: 12.5px; }
.cs-column .cs-phase { padding: 22px 22px 16px; }
.cs-column .cs-phase-grid { grid-template-columns: minmax(0, 1fr) 250px; gap: 22px; }
.cs-column .cs-phase-grid.is-solo { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 860px) {
  .cs-column .cs-process ol { gap: 26px; }
  .cs-column .cs-process li + li::before { left: 50%; width: 22px; }
  .cs-column .cs-phase-grid { grid-template-columns: 1fr; }
}

/* U9: the title, facts and cover sit across the top, left-aligned (like U4). Below them,
   "On this page" is on the left of the reading column; it starts under the cover and, once you
   scroll, sticks near the top and follows you down. Narrower screens keep the bar on top. */
.cs-layout { display: contents; }
.cs-hero { text-align: left; }
.cs-cover { width: 100%; }
@media (min-width: 1100px) {
  .cs { padding-top: 0; }
  .cs-layout { display: grid; grid-template-columns: 190px minmax(0, 680px); gap: 64px; align-items: start; }
  .cs-bar { position: sticky; top: 96px; left: auto; width: auto; align-self: start; justify-self: stretch; }
  .cs-column { width: 100%; margin: 0; }
}
@media (min-width: 1100px) {
  /* A little wider reading column (680 → 760px), and "On this page" moved 40px to the left */
  .cs-layout { grid-template-columns: 190px minmax(0, 760px); gap: 72px; margin-left: -40px; }
  .cs-column .ph, .cs-column .cs-figure { width: min(100%, 640px); }
}
@media (min-width: 1100px) {
  /* "On this page" back in line with the cover's left edge, so everything fits under the cover */
  .cs-layout { margin-left: 0; }
}

/* U9: decision titles bigger, on one line with their number */
.cs-card h3 { display: flex; align-items: baseline; gap: 10px; font-size: 20px; line-height: 1.25; }
.cs-card h3 em { display: inline; margin: 0; font-size: 24px; }

/* U9: decision pictures removed for now; a big number sits where the picture was */
.cs-card { grid-template-columns: 120px 1fr; padding: 22px 24px 22px 14px; }
.cs-card h3 { display: block; }
.cs .cs-card .cs-card-no { margin: 0; text-align: center; font-family: var(--font-head); font-style: italic; font-weight: 400; font-size: 76px; line-height: 1; color: var(--kicker); }
@media (max-width: 600px) {
  .cs-card { grid-template-columns: 1fr; gap: 8px; padding: 18px; }
  .cs .cs-card .cs-card-no { text-align: left; font-size: 52px; }
}