/* Uline round 3 (U12): U10 D, with the cover half as tall (800×520 → 800×260 shape),
   cropped from the top so the top of the picture stays in view. */
.page-case .cs-cover img { aspect-ratio: 40 / 13; object-fit: cover; object-position: 50% 26%; }

/* A statement above Problem Scope, in the same serif as the section headings */
.page-case .cs .cs-intro-line { margin: 0; font-family: var(--font-head); font-weight: 400; font-size: clamp(25px, 2.75vw, 33px) !important; line-height: 1.25 !important; color: var(--ink); }
/* The statement gets the same thin line above it as the sections below */
.page-case .cs-column > .cs-intro { padding-top: 48px; border-top: 1px solid var(--line); }
/* Problem Scope has no subheader now, so give the paragraph the usual gap under the heading */
.page-case #overview > .cs-h + p { margin-top: 14px; }

/* The main column starts further left (gap 72 → 32px) and is 40px wider (760 → 800px),
   so its right edge stays put. "On this page" doesn't move. */
@media (min-width: 1100px) {
  .page-case .cs-layout { grid-template-columns: 190px minmax(0, 800px); gap: 32px; }
}

/* The section lines reach further left, up to the right edge of "On this page" (across the 32px
   gap). Only the lines move; the text stays where it was. They stop there so they never run
   through the links, which stay on screen as you scroll. */
@media (min-width: 1100px) {
  .page-case .cs-column > .cs-sec + .cs-sec, .page-case .cs-column > .cs-intro { position: relative; border-top: 0; }
  .page-case .cs-column > .cs-sec + .cs-sec::before, .page-case .cs-column > .cs-intro::before {
    content: ""; position: absolute; top: 0; right: 0; left: -32px; height: 1px; background: var(--line);
  }
}

/* Each section's contents end 40px before the right end of the section lines (800 → 760px of
   text). The lines and the left edge stay where they are. */
@media (min-width: 1100px) {
  .page-case .cs-column > .cs-sec { padding-right: 40px; }
}

/* The two lines hug the statement more: 28px between each line and the statement (was 48px above
   and 56px below), and a little more room on their far sides (+8px above the top line, and
   48 → 56px between the lower line and "Problem Scope"). */
.page-case .cs-column > .cs-intro { margin-top: 8px; padding-top: 28px; }
.page-case .cs-column > .cs-intro + .cs-sec { margin-top: -28px; padding-top: 56px; }
/* No subheaders now: a paragraph straight after a section heading gets the usual gap */
.page-case .cs-column > .cs-sec > .cs-h + p { margin-top: 14px; }

/* Key Decisions numbers back to their big size (U10 D's 16px text rule had shrunk them) */
.page-case .cs .cs-card .cs-card-no { font-size: 76px !important; line-height: 1 !important; }
@media (max-width: 600px) { .page-case .cs .cs-card .cs-card-no { font-size: 52px !important; } }

/* More room between each section heading and what comes under it: 28px everywhere
   (was 14px before text, 18px before the process steps, 22px before the cards) */
.page-case .cs-column > .cs-sec > .cs-h + *,
.page-case .cs-column > .cs-sec > .cs-h + p,
.page-case #overview > .cs-h + p { margin-top: 28px; }

/* The tagline is centred, with the top line the longer one: on wide screens it spans the full
   length of the section lines and breaks after "experience"; narrower screens wrap normally */
.page-case .cs .cs-intro-line { text-align: center; text-wrap: wrap; }
.page-case .cs-intro-break { display: none; }
@media (min-width: 1100px) {
  .page-case .cs-intro-break { display: inline; }
  .page-case .cs .cs-intro-line { margin: 0 -40px 0 -32px; }
}

/* A full blank line between two paragraphs in a row */
.page-case .cs-column > .cs-sec > p + p { margin-top: 1.7em; }

/* Smaller pictures in the Process phases (250 → 200px wide) */
.page-case .cs-column .cs-phase-grid { grid-template-columns: minmax(0, 1fr) 200px; }
.page-case .cs-column .cs-phase-grid.is-solo { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 860px) { .page-case .cs-column .cs-phase-grid { grid-template-columns: 1fr; } .page-case .cs-phase-pic { max-width: 260px; } }

/* Process: the phase paragraphs match the Secondary Research bullets (14px, line-height 1.6) */
.page-case .cs .cs-process .cs-phase-list p { font-size: 14px !important; line-height: 1.6 !important; }

/* More space between the activities inside a Process phase (16 → 28px) */
.page-case .cs-phase-list { gap: 28px; }

/* Process: the phase picture stays beside the activities but bigger (200 → 300px wide) */
.page-case .cs-column .cs-phase-grid { grid-template-columns: minmax(0, 1fr) 300px; }
.page-case .cs-column .cs-phase-grid.is-solo { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 860px) { .page-case .cs-column .cs-phase-grid { grid-template-columns: 1fr; } .page-case .cs-phase-pic { max-width: 360px; } }

/* Process tags: each tag takes an equal share of the row, so they're spread out evenly */
.page-case .cs-process .cs-chips { display: flex; gap: 8px; }
.page-case .cs-process .cs-chips span { flex: 1 1 0; text-align: center; white-space: nowrap; }

/* Every picture caption is centred under its picture */
.page-case .cs figcaption, .page-case .cs-column .cs-figure figcaption { text-align: center; }

/* The clickable Process steps: bigger names (12.5 → 14.5px) and numbers (18 → 21px) */
.page-case .cs-column .cs-step span { font-size: 14.5px; line-height: 1.35; }
.page-case .cs-column .cs-step b { font-size: 21px; }

/* Section headings in sage green and bigger (36 → 44px on desktop) */
.page-case .cs-column > .cs-sec > .cs-h { font-size: clamp(32px, 3.6vw, 44px); color: var(--accent); }

/* Even more room between each section heading and its content (28 → 40px) */
.page-case .cs-column > .cs-sec > .cs-h + *,
.page-case .cs-column > .cs-sec > .cs-h + p,
.page-case #overview > .cs-h + p { margin-top: 40px; }

/* Greens: section headings darker (#4E6B48 → #36502F), the tagline a lighter green (#647F5C) */
.page-case .cs-column > .cs-sec > .cs-h { color: #36502F; }
.page-case .cs .cs-intro-line { color: #647F5C; }

/* Tagline a bit lighter (#647F5C → #7A9472); section headings bigger (44 → 52px on desktop) */
.page-case .cs .cs-intro-line { color: #7A9472; }
.page-case .cs-column > .cs-sec > .cs-h { font-size: clamp(36px, 4.2vw, 52px); }

/* Tagline in dark pink (a deeper shade of the page's pink #A6566B) */
.page-case .cs .cs-intro-line { color: #8E4459; }

/* An even lighter cream background (#FBF8F3 → #FEFCF8), with the status bar and the picture
   viewer's backdrop to match */
.page-case { --bg: #FEFCF8; --status-bg: rgba(254, 252, 248, 0.9); }
.page-case .cs-lightbox::backdrop { background: rgba(254, 252, 248, 0.86); }

/* Background lighter still (#FEFCF8 → #FFFDFA); each phase's title on the card in dark pink */
.page-case { --bg: #FFFDFA; --status-bg: rgba(255, 253, 250, 0.9); }
.page-case .cs-lightbox::backdrop { background: rgba(255, 253, 250, 0.86); }
.page-case .cs-phase-title { color: #8E4459; }

/* Each phase's title on the card: bigger (24 → 32px), with more room under it (16 → 28px)
   and a little more between "Phase 01" and the title */
.page-case .cs-phase-title { margin-top: 6px !important; font-size: 32px !important; }
.page-case .cs-column .cs-phase-grid { margin-top: 28px !important; }

/* Key Decisions: the big numbers in a lighter pink (#A6566B → #D68C9E) */
.page-case .cs .cs-card .cs-card-no { color: #D68C9E; }
/* …now a soft peach instead (#EFA585, from the site's peach) */
.page-case .cs .cs-card .cs-card-no { color: #EFA585; }
/* …lighter and more pinkish peach (#F4B3A2) */
.page-case .cs .cs-card .cs-card-no { color: #F4B3A2; }
/* …a light, warm pink with a hint of peach (#EFA3AE) */
.page-case .cs .cs-card .cs-card-no { color: #EFA3AE; }

/* Tagline in peach, deep enough to read on the cream (#CF7A58) */
.page-case .cs .cs-intro-line { color: #CF7A58; }

/* "On this page": the pink becomes peach. The label is a darker pinkish peach (#C46B5C) and
   the reading line down its side a light peach (#F3B9A3) */
.page-case .cs-bar::before { color: #C46B5C; }
.page-case .cs-progress { background: #F3B9A3; }

/* All the pink on the page becomes peach: labels and numbers a darker pinkish peach (#C46B5C),
   lines, bullets and dots a light peach (#F3B9A3), tags on a pale peach, phase titles a deep
   peach, the Key Decisions numbers a light peach, the arrows between steps peach, and the
   PepsiCo card at the bottom a soft peach like the Chester one */
.page-case { --kicker: #C46B5C; --glow: #F3B9A3; --chip2-bg: #FDEBE2; --chip2-ink: #C46B5C; --card-3: #FDE8DE; }
.page-case .cs-chips span { color: #C46B5C; background: #FDEBE2; }
.page-case .cs-phase-title { color: #B25A4A; }
.page-case .cs .cs-card .cs-card-no { color: #F4B3A2; }
.page-case .cs-process li + li::before {
  background-image: 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='%23E8A089' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Key Decisions numbers more see-through */
.page-case .cs .cs-card .cs-card-no { opacity: 0.55; }

/* Section headings a little less dark (#36502F → #3F5B38) */
.page-case .cs-column > .cs-sec > .cs-h { color: #3F5B38; }

/* Process tags: back to peach, but lighter (bubble #FDEBE2 → #FEF4EF, text #C46B5C → #D2826D) */
.page-case .cs-chips span { color: #D2826D; background: #FEF4EF; }
/* …and the bubbles more see-through (a faint wash of peach instead of a solid fill) */
.page-case .cs-chips span { background: rgba(240, 160, 130, 0.1); }
/* …fainter still: lighter bubble and softer text */
.page-case .cs-chips span { color: #DA937F; background: rgba(240, 160, 130, 0.06); }
/* …bubble back to the previous step, but the words fainter to match */
.page-case .cs-chips span { color: #E2A896; }
/* …the words fainter still */
.page-case .cs-chips span { color: #EBBDAE; }

/* Testing phase cards: the peach labels (Participants, Sessions, Data collection) as faint as the tags */
.page-case .cs-phase-facts dt { color: #EBBDAE; }
/* …a bit darker (#EBBDAE → #E3A794), for both the Testing labels and the tag words so they still match */
.page-case .cs-phase-facts dt, .page-case .cs-chips span { color: #E3A794; }
/* Research card tags: darker bubble (6% → 14% peach) and lighter words (#E3A794 → #ECBBA9) */
.page-case [data-phase="0"] .cs-chips span { color: #ECBBA9; background: rgba(240, 160, 130, 0.14); }
/* …bubble a little fainter (14% → 10%), words a little darker (#ECBBA9 → #DE9C86) */
.page-case [data-phase="0"] .cs-chips span { color: #DE9C86; background: rgba(240, 160, 130, 0.1); }

/* Takeaways: the vertical lines peach (was sage) */
.page-case .cs-pull { border-left-color: #F3B9A3; }