/* Case study sections after the header. (.cs-section--full: see the notes on the section divider below.) Dark variant for the deep dive; add .cs-section--full for a full-screen section.
   <section class="cs-section cs-section--dark cs-section--full" id="deep-dive">
     <div class="cs-section__inner"> title, columns … </div>
     <div class="visual-nav-slot">…</div>
   </section> */
.cs-section { padding: calc(5rem * 2 / 3) var(--gutter) 0; overflow-x: clip; scroll-margin-top: calc(var(--visual-nav-chrome-h) + 55px - 5rem * 2 / 3); }   /* anchored so the title starts 27px below the soft blur at the top of the screen (chrome 78px + 28px of blur + 27px) */   /* space above the title: 80px less a third = 53px */   /* clip: rows that run out to the screen edge (100vw) must not add a sideways scrollbar */
.cs-section--dark { background: var(--color-case-dark); color: var(--color-type-sample); padding-bottom: var(--section-footer); }   /* (was 39px) */
.cs-section > .visual-nav-slot { margin-top: var(--cs-row-gap); }
/* (A full section used to be at least one window tall, with its closing line pinned to the bottom: a section with less content than that, like Account Hub, got a big empty gap above the line, bigger on a taller window. It is now exactly as tall as its content, so every section is the same gap apart.) */
.cs-section--full { display: flex; flex-direction: column; padding-top: var(--section-title-gap); scroll-margin-top: var(--section-line-y); padding-bottom: 0; }
/* The end of a section: a 0.5px grey line the width of the page container (not the full stage: that is kept for completely new project sections), with --section-footer (90px, tokens.css) of air above it. The dark sections have the same footer space.
   The line is the very bottom edge of the section, so when the next section is jumped to from the nav, the line lands --section-line-y (the docked bar + 12px) from the top of the screen:
   clear of the bar. The title still lands where it did (the docked bar + 55px), --section-title-gap (43px) under the line. */
.cs-section--full { --section-line-y: calc(var(--visual-nav-chrome-h) + 12px); --section-title-gap: 43px; }
.cs-section--full > .cs-section__inner { padding-bottom: var(--section-footer); width: min(var(--container), 100%); }
.cs-section--full::after { content: ""; flex: none; margin-top: auto; align-self: center; width: min(var(--container), 100%); border-top: .5px solid var(--color-case-dark); }
/* The first section after the dark deep dive (Core navigation) gets the same thin line above its title as the other sections, under the docked nav bar, and the bar sits on the light page colour.
   The visual nav row is at the bottom of the dark section, and the docked bar only slides in once that row is completely off the top of the screen: so a jump here puts this section's top at the very
   top of the screen (the dark section is all above it), and its own top padding then places the line (the docked bar + 12px) and the title (the docked bar + 55px) exactly as on the other sections. */
.cs-section--dark + .cs-section--full { position: relative; scroll-margin-top: 0; padding-top: calc(var(--visual-nav-chrome-h) + 55px); }
.cs-section--dark + .cs-section--full::before { content: ""; position: absolute; top: calc(var(--visual-nav-chrome-h) + 12px); left: 0; right: 0; margin-inline: auto; width: min(var(--container), calc(100% - 2 * var(--gutter))); border-top: .5px solid var(--color-case-dark); }
.cs-section--light { color: var(--color-ink); overflow-x: clip; }   /* clip: a full-width gallery (100vw) must not add a sideways scrollbar to the page */
.cs-section--light .cs-section__title { color: var(--color-case-dark); }
.cs-section__inner { width: min(var(--container), 100%); margin-inline: auto; }
.cs-section__title { margin: 0; color: var(--case-accent-dark, currentColor); }
.cs-section--dark .cs-section__title { text-wrap: balance; max-width: 76rem; }

/* two columns across the container: text on the left, stats on the right */
.cs-columns { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-5); margin-top: var(--cs-row-gap); align-items: start; }   /* title / text + stats / visual nav: 60px apart */
.cs-label { margin: 0; color: inherit; }                /* section label in H3 */
.cs-context > * { margin: 0; }
.cs-context > .cs-label { margin-bottom: 20px; }
.cs-context > .cs-copy__body + .lockup__meta-stack { margin-top: 63.5px; }   /* body copy then the meta rows (Haven): 70px to the first row's text, less the row's own 6.5px padding */
.cs-context > .lockup__meta + .cs-copy__body, .cs-context > .lockup__meta-stack + .cs-copy__body { margin-top: 20px; }   /* body copy under the meta rows; paragraphs inside are 10px apart */
/* Exception: when the stats sit beside a block of copy (a .cs-columns that holds a .cs-stats) the gutter between them is 62px, the same as the image / text lock-ups, not the usual 20px (it was too tight against the text).
   It is a column gap, so it disappears by itself when the columns stack on narrow screens (the rows are then spaced by row-gap instead). */
.cs-columns:has(> .cs-stats) { column-gap: 62px; }
.cs-stats { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); column-gap: var(--space-8); row-gap: 40px; }
.cs-stats__col { display: grid; grid-template-rows: subgrid; grid-row: span 3; }   /* the two columns share their rows, so the stat beside another is always as tall as it: balanced, with level hairlines */
.cs-stats__col > .cs-label { margin: 0 0 -10px; }   /* label sits 30px above the first stat */

/* Light section pieces (Core navigation and the sections after it): a row of stats under the title, then image / text lock-ups.
   <div class="cs-stat-row"><div class="stat">…</div> ×4</div>         add .cs-stat-row--3 for three stats
   Image / text lock-up (.cs-split): two equal halves (50 / 50, 62px between), text on one side and a SQUARE image on the other, centred on each other.
   Add .cs-split--reverse to put the image on the left (the text stays first in the page's reading order). Stack lock-ups under each other: 60px apart.
   <div class="cs-split">
     <div class="cs-copy">
       <p class="lockup__meta lockup__meta--wrap"><strong>Collaborators</strong><span>…</span></p>        optional, see lockup.css (wrapping rules)
       <div class="cs-copy__block">                                                                    one block per heading (any number)
         <h3 class="cs-label t-h3">What we built</h3>
         <div class="cs-copy__body"><p class="t-body">…</p><p class="t-body">…</p></div>                  paragraphs are 10px apart
       </div>
     </div>
     <div class="media media--placeholder" role="img" aria-label="…"></div>
   </div> */
.cs-section--light .stat__value { color: var(--color-case-dark); }
.cs-section--light .stat { border-bottom-width: .5px; border-bottom-color: var(--color-case-dark); }   /* hairline, as in Figma */
.cs-stat-row { --cols: 4; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--space-8); margin-top: var(--cs-row-gap); }
.cs-stat-row--3 { --cols: 3; }
.cs-stat-row--2 { --cols: 2; }
.cs-stat-row + .cs-split, .cs-split + .cs-split { margin-top: var(--cs-row-gap); }
.cs-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 62px; align-items: center; }
.cs-split > .media { height: auto; aspect-ratio: var(--media-ratio, 1 / 1); min-height: 0; }   /* square by default: as wide as its half (579px at 1228 wide). For a picture of another shape set --media-ratio on the .media (e.g. style="--media-ratio: 800 / 1094"): the lock-up grows to fit it */
.cs-split--reverse > .cs-copy { order: 2; }
.cs-split--reverse > .media { order: 1; }
.cs-split + .gallery__title, .cs-columns + .gallery__title { margin-top: 160px; }
.gallery__pager + .large-image, .cs-split + .large-image, .cs-columns + .large-image { margin-top: 160px; }
.large-image + .cs-split { margin-top: 80px; }   /* large image under the gallery's pager, or under a lock-up */   /* gallery title under the text + image */
.cs-copy { display: grid; gap: 40px; align-content: center; min-width: 0; }   /* blocks 40px apart */
.cs-copy > * { margin: 0; }
.cs-copy > .lockup__meta + .cs-copy__block { margin-top: 10px; }   /* the meta line is 50px above the first block */
.cs-copy__block > .cs-label { margin: 0 0 20px; text-box: trim-both cap alphabetic; }
.cs-copy__body { text-box: trim-both cap alphabetic; color: inherit; }   /* the section sets the colour (ink on light sections, light grey on the dark one) */   /* trimmed as one piece, so the 10px between paragraphs is the real gap */
.cs-copy__body > p { margin: 0 0 10px; }
.cs-copy__body > p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  /* mobile: the space above a section title is halved again (deep dive 27px; the others 53px, from 105px). The fixed logo + nav bar are stacked and 119px tall, so a section
     jumped to from the nav is scrolled to start lower: the title then sits clear of them and of the soft blur above them (27px clear of its edge). */
  .cs-section { padding-top: calc(5rem * 2 / 3 / 2); scroll-margin-top: calc(var(--visual-nav-chrome-h) + 55px - 5rem * 2 / 3 / 2); }
    .cs-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-8); }
  .cs-split { grid-template-columns: 1fr; row-gap: var(--space-8); }
  .cs-columns { grid-template-columns: 1fr; row-gap: var(--space-8); }
}

/* Paging, intro only: with class="snap" on <html>, js/header-paging.js settles the page on the case header or on the start of the body when you stop scrolling
   between them. (It used to be CSS scroll-snap on the header and .case-body, but Safari treated the very tall body as one snap page and pulled the page back up
   while scrolling; the script only ever acts inside the header's own height, so scrolling the rest of the page is never touched.) */
@media (prefers-reduced-motion: no-preference) { html.snap { scroll-behavior: smooth; } }

/* On the dark deep-dive section the meta cross-hairs use the same light grey as the text (they are ink by default). */
.cs-section--dark .lockup__meta strong::after, .cs-section--dark .lockup__meta--label > span:first-child::after { background-color: var(--color-type-sample); }

/* Light section with the context + stats columns (Haven "Deep dive"): the same two columns as the dark deep dive, on the light page. Collaborators, then Context (a .cs-copy), beside the stats.
   <div class="cs-columns"><div class="cs-copy">…meta + blocks…</div><div class="cs-stats">…</div></div> */
.cs-columns > .cs-copy { align-content: start; }
.cs-section--light .cs-stats__col > .cs-label { color: var(--color-headline); }

/* Dark section, text + square image (Haven "One system, three teams"): the context column and the image are centred on each other.
   <div class="cs-columns cs-columns--media"><div class="cs-context">…</div><div class="media"><img …></div></div> */
.cs-columns--media { align-items: center; }
.cs-columns--media > .media { height: auto; aspect-ratio: 1 / 1; min-height: 0; }

/* Wallet pieces (Luno), all on the light sections:
   Two figures side by side (.cs-pair), each a square picture with a caption under it (Body Bold, centred, 20px apart), 62px between, like the image / text lock-ups:
     <div class="cs-pair"><figure class="cs-figure"><div class="media"><img …></div><figcaption class="t-body-bold">Before: …</figcaption></figure> ×2</div>
   A figure on its own beside text is the same figure in a .cs-split. Any in-page picture can be a figure with an image description (the figcaption, Body Bold, centred, 20px from the picture):
   it sits UNDER the picture by default, or ABOVE it with .cs-figure--top:
     <figure class="cs-figure cs-figure--top"><figcaption class="t-body-bold">Description</figcaption><div class="media"><img …></div></figure>
   (the figcaption can be written first or last in the markup: the modifier decides where it shows). Leave the figcaption out for a picture with no description.
   One set of stats under a single label (Figma "Results" over four stats): <div class="cs-stats cs-stats--grid"><h3 class="cs-label t-h3">Results</h3><div class="stat">…</div> ×4</div> */
.cs-figure { margin: 0; display: grid; gap: 20px; justify-items: center; min-width: 0; }
.cs-figure > .media { height: auto; aspect-ratio: 1 / 1; min-height: 0; }
.cs-figure--top > figcaption { order: -1; }   /* description above the picture */
.cs-figure > figcaption { margin: 0; text-align: center; color: var(--color-ink); text-box: trim-both cap alphabetic; text-wrap: balance; }
.cs-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 62px; align-items: start; margin-top: var(--cs-row-gap); }
.cs-columns + .cs-split, .cs-pair + .cs-columns { margin-top: var(--cs-row-gap); }
.timeline + .large-image { margin-top: 160px; }   /* a large image under the timeline */
.cs-stats--grid { grid-template-rows: auto; }
.cs-stats--grid > .cs-label { grid-column: 1 / -1; margin: 0 0 -10px; color: var(--color-headline); }
.cs-section--dark .cs-stats--grid > .cs-label { color: inherit; }   /* (on the dark section the label takes the section's light grey, not the ink) */   /* label 30px above the first stats, as in the two-column version */
@media (max-width: 900px) { .cs-pair { grid-template-columns: 1fr; row-gap: var(--space-8); } }

/* Dark section, gallery first (Haven "Four products, three teams, one system"): the gallery title is 60px under the section title; the copy block under the gallery's pager is 160px down. The copy and the
   role rows are stacked in one column beside the team photo (a .cs-split: copy on the left, photo on the right, 16:9 via --media-ratio, top-aligned):
   <div class="cs-split cs-split--top"><div class="cs-copy"><div class="cs-copy__block">…</div><div class="lockup__meta-stack">…</div></div><div class="media" style="--media-ratio: 16 / 9">…</div></div> */
.cs-section__title + .gallery__title { margin-top: var(--cs-row-gap); }
.gallery__pager + .cs-columns, .gallery__pager + .cs-split { margin-top: 160px; }

/* A lock-up whose picture is taller than its text: the text starts at the top instead of floating down the middle (.cs-split--top). */
.cs-split--top { align-items: start; }

.cs-columns + .gallery { margin-top: 60px; }   /* a gallery straight under a text block (M&S: Ideation): 60px (Figma had 100, tightened) */
.cs-columns + .gallery__title--tight { margin-top: 100px; }   /* a gallery whose title belongs with the text above it (M&S: Field research under the ecosystem text): 100px, not the usual 160px */
.cs-section__title + .cs-split { margin-top: var(--cs-row-gap); }   /* a text + image row straight under the section title: the same gap as the columns get */
/* Two figures side by side at the SAME height (their widths follow their shapes), each centred in its half: M&S Before / After. Height is --pair-media-h (560px).
   <div class="cs-pair cs-pair--matched"><figure class="cs-figure"><div class="media" style="aspect-ratio: W / H"><img …></div><figcaption>…</figcaption></figure> ×2</div> */
.cs-pair--matched > .cs-figure > .media, .cs-split--figure > .cs-figure > .media { width: auto; height: var(--pair-media-h, 560px); }   /* (also a text + figure row: .cs-split--figure) */
.cs-section--dark .cs-figure > figcaption { color: inherit; }   /* a caption on the dark section takes its light grey, not the ink */
.cs-split--figure > .cs-copy { margin-bottom: 33px; }   /* the figure is the picture + its 20px gap + the 13px caption: this lifts the text block so it centres on the PICTURE, not on picture + caption */
.cs-copy--tight { gap: 30px; }   /* a label with its text 30px under it (M&S Dashboard) */
.cs-copy--tight > .cs-columns { margin-top: 0; }
.cs-copy__block > .t-subtitle { margin: 0 0 12px; }   /* a small label (Insight / Solution) 12px above its paragraph (was 30) */
.gallery + .cs-copy { margin-top: 62px; }   /* copy under a gallery row: 62px, as in Figma */
.cs-section__title + .gallery { margin-top: var(--cs-row-gap); }   /* a gallery row straight under the section title: the same 60px as the other rows, so a phone frame never touches the title */
.cs-copy + .large-image, .large-image + .cs-copy { margin-top: 62px; }   /* a large picture and a copy block one after the other: 62px apart (M&S app section) */
.cs-copy + .large-image--band { margin-top: 124px; }   /* the band picture needs more air above it than other pictures: double the 62px (M&S attributes) */
/* A heading over two columns, with BOTH columns of text starting under the heading (not level with it): the heading sits in the left column's first row, the two text blocks share the second row.
   <div class="cs-columns cs-columns--aligned"><h3 class="cs-label t-h3">…</h3><div class="cs-copy__body">…</div><div class="cs-copy__body">…</div></div> */
.cs-columns--aligned { row-gap: 20px; }
.cs-columns--aligned > .cs-label { grid-column: 1; grid-row: 1; margin: 0; }
.cs-columns--aligned > .cs-copy__body { grid-row: 2; }
.cs-columns--aligned > .cs-copy__body > p { margin: 0 0 10px; }
.cs-columns--aligned > .cs-copy__body > p:last-child { margin-bottom: 0; }
.cs-section__inner > .cs-columns:first-child { margin-top: 0; }   /* a text block that opens a section (under the divider above) has no extra row gap */
/* Insight / Solution block (M&S components): the heading, then the Insight pair and the Solution pair (a Subtitle label over a paragraph, 30px apart), the two pairs 40px apart.
   <div class="cs-copy__block cs-insight"><h3 class="cs-label t-h3">…</h3><div class="cs-insight__item"><p class="t-subtitle">Insight</p><div class="cs-copy__body"><p class="t-body">…</p></div></div> ×2</div>
   .cs-copy--stack puts several of these under each other 80px apart. */
.cs-insight { display: grid; row-gap: 30px; }
.cs-insight > .cs-label { margin: 0; }
.cs-insight__item { display: grid; row-gap: 12px; }   /* label to paragraph: 12px (was 30) */
.cs-insight__item + .cs-insight__item { margin-top: 10px; }
.cs-insight__item > .t-subtitle { margin: 0; }
.cs-copy--stack { gap: 80px; }
.cs-section--light .cs-label, .cs-section--light .t-h3 { color: var(--color-headline); }   /* headings on the light sections are the site grey (#3f3f3f), never the darker ink */
@media (max-width: 900px) {   /* the aligned two-column text block stacks: heading, then each text block under it */
  .cs-columns--aligned { row-gap: var(--space-5); }
  .cs-columns--aligned > .cs-label, .cs-columns--aligned > .cs-copy__body { grid-column: 1; grid-row: auto; }
}
@media (max-width: 900px) {   /* stacked: a fixed-height figure (the M&S Before picture) fills the width of its container instead of bleeding past it; its shape (the inline aspect-ratio) sets the height */
  .cs-pair--matched > .cs-figure > .media, .cs-split--figure > .cs-figure > .media { width: 100%; height: auto; }
  .cs-split--figure > .cs-copy { margin-bottom: 0; }   /* (the desktop lift that centres the text on the picture) */
}