/* ══════════════════════════════════════════
   CASE STUDY TEMPLATE (13 Nov 2026): every page under /work/ on the site's new design language
   The homepage (feat/homepage-language-2026-11-12, a051a89): the wide grid (16 / 32 / 48 px margins, content to
   1824 px), one section rhythm (96 / 128 / 160 px content to content), the type scale, the radius scale (controls and
   media 8 px, the white page's foot 16 / 24 px), one muted grey (60% ink), ink links with the 30% underline, the light
   header with the keyboard-reachable Services trigger, the blended cursor dot, the one focus ring and the standard
   ending (synced between the case:ending markers below by scripts/case-study/sync_ending.py). The About refresh
   (feat/about-refresh-2026-11-13) for the light header on a page without a film behind it.
   No fade-ups, no scroll reveals, no purple, no card outlines, no tinted cards with an accent bar.
   The pattern is written down in scripts/case-study/case-study-template.md. Linked before system.css, as the
   homepage's own styles are, so the shared button and header shapes in system.css apply unchanged.
══════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Tokens. The homepage's names, so the synced ending reads them unchanged ── */
:root {
  --white: #FFFFFF;
  --off-white: #FAFAF9;
  --page-bg: #F7F7F6;              /* the homepage's neutral page grey */
  --black: #09090B;
  --text-primary: #09090B;
  --text-muted: #09090B99;         /* the one muted grey on light (60% ink) */
  --text-white: #FFFFFF;
  --border: #09090B14;             /* hairlines: 8% ink */
  --media-line: rgba(9, 9, 11, 0.04);   /* the hairline round pale media on white: 4% ink (Charlie, 14 Nov: "extremely faint", then "needs to be more subtle") */
  --font: 'Inter Tight', 'Geist', system-ui, sans-serif;
  --desc-size: 16px;
  --desc-lh: 1.45;
  /* Body copy in the chapters: 18 px on phones, 20 from 769 (the homepage's 20 px step), about 62 to 74 characters a line */
  --body-size: 18px;
  /* The display step (the closing headline's): 48 at 390, 56 on tablets, 80 at 1440, 96 at 1920 */
  --type-display: clamp(40px, 12.3vw, 52px);
  --type-display-lh: 1.02;
  --type-display-track: -0.045em;
  /* The summary under the title and the next case's line: the homepage's quote step (18 / 20 / 28 px) */
  --type-lead: 18px;
  --type-lead-lh: 1.4;
  --type-lead-track: -0.01em;
  /* Space from a label or heading to what it introduces (About's title-to-content step), and between media */
  --space-title: 32px;
  --media-gap: 12px;
  --sel-bg: #FCCA04FC;
  --sel-ink: #09090B;
  --duration-state: 0.2s;
  --home-gutter-phone: 16px;
  --home-gutter-tablet: 32px;
  --home-gutter-desktop: 48px;
  --home-grid-max: 1824px;
  --home-gutter: var(--home-gutter-phone);
  --home-space: 48px;
  --home-foot: 16px;
  --home-radius-control: 8px;
  --home-radius-media: 8px;
  --home-radius-page: 16px;
  /* The header's height (padding plus the 44 px pill, or the phone bar), so the opening clears it */
  --nav-clear: 56px;
  /* The grid's content width, for image sizes */
  --grid-w: calc(100vw - 2 * var(--home-gutter));
}
@media (min-width: 769px) {
  :root {
    --home-gutter: var(--home-gutter-tablet); --home-space: 64px; --home-foot: 32px; --home-radius-page: 24px; --nav-clear: 72px;
    --body-size: 20px; --type-display: 56px; --type-display-lh: 0.98; --type-display-track: -0.05em; --type-lead: 20px;
    --media-gap: 16px;
  }
}
@media (min-width: 1024px) { :root { --space-title: 48px; } }
@media (min-width: 1025px) {
  :root {
    --home-gutter: max(var(--home-gutter-desktop), calc((100% - var(--home-grid-max)) / 2)); --home-space: 80px; --home-foot: 48px;
    --nav-clear: 88px; --type-display: clamp(40px, 5.56vw, 96px); --type-lead: 28px; --type-lead-lh: 1.25; --type-lead-track: -0.02em;
  }
}
@media (min-width: 1280px) { :root { --desc-size: 17px; } }

/* ── Base ── */
/* Overscroll: white at the top (the hiring bar's ink while it shows); the shared overscroll.js turns it to the
   wordmark layer's ink at the foot */
html { scroll-behavior: smooth; overflow-x: hidden; cursor: none; background-color: var(--white); }
html.has-announce { background-color: var(--black); }
body { font-family: var(--font); color: var(--black); background: var(--black); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:not(input):not(textarea)::selection { background-color: var(--sel-bg); color: var(--sel-ink); }
:not(input):not(textarea)::-moz-selection { background-color: var(--sel-bg); color: var(--sel-ink); }

/* No scroll-triggered motion: every part of the page shows as it loads, with or without JavaScript. The work still
   moves (its clips loop while on screen); with reduced motion they stay on their posters. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ── Cursor (the homepage's, a051a89): a dot drawn white with mix-blend-mode difference, so it reads as ink on
   white and white on dark and never hides what it points at; labels only over the next case's image ── */
.cursor {
  position: fixed; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%;
  background: var(--text-primary); pointer-events: none; z-index: 10002; transform: translate(-50%, -50%);
  transition: width 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), height 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
              border-radius 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), background 0.3s ease, box-shadow 0.3s ease,
              backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease, opacity 0.15s ease;
  display: flex; align-items: center; justify-content: center; will-change: transform; opacity: 0; overflow: hidden;
}
.cursor.visible { opacity: 1; }
.cursor-text {
  font-family: 'Geist Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--white); opacity: 0; transform: scale(0.5); white-space: nowrap; user-select: none;
  transition: opacity 0.3s ease 0.05s, transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) 0.05s;
}
.cursor.active { width: auto; padding: 0 12px; height: 28px; border-radius: 4px; background: rgba(0, 0, 0, 0.45); box-shadow: none; backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); }
.cursor.active .cursor-text { opacity: 1; transform: scale(1); }
.cursor.link-hover, .cursor.on-dark.link-hover { width: 20px; height: 20px; }
.cursor.on-dark:not(.active), .cursor.on-dark.link-hover { background: var(--white); }
.cursor:not(.active) { background: #FFFFFF; mix-blend-mode: difference; }
* { cursor: none !important; }
@media (hover: none), (pointer: coarse) {
  .cursor { display: none !important; }
  *, html { cursor: auto !important; }
}

/* ── One focus ring, keyboard only (the homepage's, a051a89): 2 px in the element's own text colour, 3 px out, on
   the 8 px control corners ── */
:where(a, button, [role="button"], [tabindex]):focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: var(--home-radius-control); }
html .announce-link:focus-visible, html .announce-close:focus-visible { border-radius: var(--home-radius-control); }

/* ══════════════════════════════════════════
   HEADER: the homepage's header in its light state from the top (as on About): the wordmark and links in a white
   frosted pill, Talk to us in ink, both on the content's edges. Phones: wordmark and menu glyph on the 16 px margin,
   on a bar in the colour of the band under it once the page has moved.
══════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 22px; padding-left: calc(var(--home-gutter) - 24px); padding-right: var(--home-gutter);
  transition: padding 0.3s, background-color 0.2s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav.nav-away { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }
.nav-inner {
  display: flex; align-items: center; gap: 32px; position: relative; padding: 10px 24px;
  border-radius: var(--home-radius-control);
  background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: background 0.4s, box-shadow 0.4s, backdrop-filter 0.4s, -webkit-backdrop-filter 0.4s;
}
.nav.scrolled .nav-inner { box-shadow: 0px 2px 8px #0000000A; }
 /* the homepage's: the wordmark sits inline in its link's 20 px line box, so the pill is 40 px high (10 + 20 + 10) */
.nav-logo svg { height: 12px; width: auto; }
.nav-logo svg path { fill: #09090B; transition: fill 0.4s; }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a { font-size: 14px; line-height: 18px; color: var(--black); transition: color 0.4s; }
.nav-links a:hover { opacity: 0.7; }
.nav-cta { display: flex; background: var(--black); padding: 10px 20px; border-radius: var(--home-radius-control); transition: background 0.4s, opacity 0.15s; }
.nav-cta:hover { opacity: 0.85; }
.nav-cta span { font-size: 14px; line-height: 18px; color: var(--white); font-weight: 500; transition: color 0.4s; }
.nav-hamburger { display: none; width: 20px; height: 16px; cursor: pointer; background: none; border: none; padding: 14px; margin: -14px; box-sizing: content-box; }
.nav-hamburger svg { width: 20px; height: 10px; display: block; overflow: visible; }
.nav-hamburger line { stroke: #09090B; transition: stroke 0.4s; }

.services-trigger { cursor: pointer; transition: color 0.3s ease; }
.services-dropdown {
  position: absolute; top: calc(100% - 14px); left: 24px; z-index: 10;
  display: flex; flex-direction: column; padding: 4px; gap: 0; border-radius: 4px;
  background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), visibility 0s linear 0.3s;
}
.services-dropdown.open {
  opacity: 1; transform: translateY(0); pointer-events: auto; visibility: visible;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), visibility 0s linear 0s;
}
.service-item { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 4px; transition: background 0.15s; }
.service-item:hover { background: rgba(0, 0, 0, 0.04); }
.service-name { font-size: 16px; line-height: 18px; color: var(--black); font-weight: 400; transition: color 0.15s; }
.service-desc { font-size: 13px; line-height: 18px; color: var(--text-muted); }

.mobile-menu {
  display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 200; background: var(--white);
  flex-direction: column; padding: 16px var(--home-gutter) 24px; height: 100vh; height: 100dvh; overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mobile-menu-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; }
.mobile-menu-header .nav-logo svg { height: 12px; }
.mobile-menu-header .nav-logo svg path { fill: #09090B; }
.mobile-menu-close { background: none; border: none; padding: 0; cursor: pointer; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; position: relative; left: 2px; top: -2px; }
.mobile-menu-close svg { width: 20px; height: 10px; overflow: visible; display: block; }
.mobile-menu-close::after { content: ''; position: absolute; inset: -10px; }
.mobile-menu-close line { transform-box: view-box; }
.mobile-menu-close line:first-of-type { transform-origin: 10px 1px; }
.mobile-menu-close line:last-of-type { transform-origin: 10px 9px; }
.mobile-menu.open .mobile-menu-close line:first-of-type { animation: hamX1 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both; }
.mobile-menu.open .mobile-menu-close line:last-of-type { animation: hamX2 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both; }
@keyframes hamX1 { from { transform: none; } to { transform: translateY(4px) rotate(45deg); } }
@keyframes hamX2 { from { transform: none; } to { transform: translateY(-4px) rotate(-45deg); } }
.mobile-menu-links { display: flex; flex-direction: column; padding-top: 24px; }
.mobile-menu-links > a { display: flex; align-items: center; padding: 16px 0; font-size: 28px; line-height: 36px; color: var(--black); border-bottom: 1px solid #F4F4F5; }
.mobile-services { display: flex; flex-direction: column; padding: 16px 0; gap: 20px; border-bottom: 1px solid #F4F4F5; }
.mobile-services-label { font-size: 13px; line-height: 16px; color: var(--text-muted); }
.mobile-services-items { display: flex; flex-direction: column; gap: 16px; }
.mobile-services-items a { font-size: 28px; line-height: 36px; color: var(--black); }
.mobile-menu-footer { display: flex; flex-direction: column; flex-grow: 1; justify-content: flex-end; gap: 24px; padding-top: 32px; }
.mobile-menu-cta { display: flex; align-items: center; justify-content: center; padding: 14px 32px; background: var(--black); color: var(--white); font-size: 15px; line-height: 18px; border-radius: var(--home-radius-control); }
.mobile-menu-email { font-size: 13px; line-height: 16px; color: var(--text-muted); text-align: center; }

@media (max-width: 1024px) {
  .nav { padding-block: 14px; }
  .nav-inner { padding-block: 10px; }
}
@media (max-width: 768px) {
  .nav { padding-block: 16px; padding-inline: var(--home-gutter); }
  .nav-inner, .nav.scrolled .nav-inner { padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
  .nav-links, .nav-cta { display: none; }
  .nav-hamburger { display: block; }
  .nav.scrolled { background-color: var(--nav-bar, var(--white)); }
  .nav.nav-over-dark .nav-logo svg path { fill: var(--white); }
  .nav.nav-over-dark .nav-hamburger line { stroke: var(--white); }
  /* on the bar, the wordmark and glyph follow the bar's own colour (the shared overscroll.js reads dark media under
     the bar as a dark band and would turn them white on the white page) */
  html .nav.scrolled:not(.bar-dark) .nav-logo svg path { fill: #09090B !important; }
  html .nav.scrolled:not(.bar-dark) .nav-hamburger line { stroke: #09090B !important; }
  html .nav.scrolled.bar-dark .nav-logo svg path { fill: #FFFFFF !important; }
  html .nav.scrolled.bar-dark .nav-hamburger line { stroke: #FFFFFF !important; }
  /* before the page moves, over the white opening, the wordmark and glyph stay ink */
  html .nav:not(.scrolled) .nav-logo svg path { fill: #09090B !important; }
  html .nav:not(.scrolled) .nav-hamburger line { stroke: #09090B !important; }
}
@media (max-width: 1024px), (pointer: coarse) {
  .nav-logo { padding-block: 12px; margin-block: -12px; }
  .nav-links a, .section-link { padding-block: 13px; margin-block: -13px; }
  .nav-links a { padding-inline: 7px; margin-inline: -7px; }
  .nav-cta { min-height: 44px; align-items: center; }
  .mobile-services-items a { display: block; padding-block: 4px; margin-block: -4px; }
  .mobile-menu-email { padding-block: 14px; margin-block: -14px; }
}

/* Text links in ink with the site's in-copy underline: 1 px at 30% ink, solid on hover (homepage .section-link) */
.section-link {
  align-self: flex-start; font-size: 14px; font-weight: 400; line-height: 18px; color: var(--text-primary);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: #09090B4D;
  transition: text-decoration-color var(--duration-state) ease;
}
.section-link:hover, .section-link:focus-visible { text-decoration-color: currentColor; }

/* The white page: from the opening to the closing block. It lifts off the dark wordmark layer at the end on its
   rounded foot (24 px, 16 on phones). */
.page-content { position: relative; z-index: 2; background: var(--white); overflow: hidden; overflow: clip; border-radius: 0 0 var(--home-radius-page) var(--home-radius-page); }
@media (max-width: 768px) { .page-content { overflow: visible; } }

/* ══════════════════════════════════════════
   THE CASE STUDY
   One left edge (the grid's), the homepage's rhythm between chapters, the label style of the footer's columns.
══════════════════════════════════════════ */
.cs-open, .cs-content, .cs-next { padding-inline: var(--home-gutter); }

/* The small label: the closing block's column label (12 px capitals, 0.08em, the muted grey) */
.cs-label { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; line-height: 16px; text-transform: uppercase; color: var(--text-muted); }

/* ── OPENING: the way back, the client's name at the display step (one line at every width), its one-line summary
   in the muted grey at the quote step, the meta as a hairline list, then the hero film or image on the grid ── */
/* Round 2 (C-4): the hero starts high enough to be seen on arrival (about 390 px down at 1440 x 900 with the hiring
   bar, so some 510 of its 756 px show; its top well inside the first screen on a phone): the space above the
   breadcrumb is the header's height plus 32 px (24 on phones) rather than a full section step, and the meta list
   moves under the hero. The type sizes are unchanged. */
.cs-open { padding-top: calc(var(--nav-clear) + 24px); padding-bottom: var(--home-space); display: flex; flex-direction: column; }
@media (min-width: 769px) { .cs-open { padding-top: calc(var(--nav-clear) + 32px); } }
.cs-crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 18px; color: var(--text-muted); margin-bottom: 24px; }
.cs-crumbs a { color: var(--text-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: #09090B4D; transition: text-decoration-color var(--duration-state) ease; }
.cs-crumbs a:hover { text-decoration-color: currentColor; }
@media (max-width: 1024px), (pointer: coarse) { .cs-crumbs a { padding-block: 13px; margin-block: -13px; } }
.cs-title { font-size: var(--type-display); font-weight: 400; line-height: var(--type-display-lh); letter-spacing: var(--type-display-track); color: var(--text-primary); white-space: nowrap; }
.cs-summary { margin-top: 16px; max-width: 40em; font-size: var(--type-lead); line-height: var(--type-lead-lh); letter-spacing: var(--type-lead-track); color: var(--text-muted); text-wrap: balance; }
@media (min-width: 1025px) { .cs-summary { margin-top: 20px; } }

/* Meta: one hairline, then the facts in columns (two on phones, four from 769 px when there is a result), each a
   label over its value; the result's figure at the homepage's case figure (28 px) with its label tight under it */
.cs-meta { margin-top: var(--space-title); border-top: 1px solid var(--border); padding-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
.cs-meta > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cs-meta dd { font-size: var(--desc-size); line-height: var(--desc-lh); color: var(--text-primary); text-wrap: pretty; }
/* The sector, where it matches a sector page, links to it (14 Nov): the chapters' in-copy link (ink, 1 px underline
   at 30% ink, solid on hover), with the crumbs' taller target on touch, which moves nothing */
.cs-meta dd a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: #09090B4D; transition: text-decoration-color var(--duration-state) ease; }
.cs-meta dd a:hover { text-decoration-color: currentColor; }
@media (max-width: 1024px), (pointer: coarse) { .cs-meta dd a { padding-block: 13px; margin-block: -13px; } }
.cs-meta .cs-meta-wide { grid-column: 1 / -1; }
.cs-figure { display: block; font-size: 28px; font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.cs-figure-label { display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--text-muted); text-wrap: balance; max-width: 24em; }
@media (min-width: 769px) {
  .cs-meta { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 2fr) minmax(0, 1.4fr); column-gap: 24px; }
  .cs-meta .cs-meta-wide { grid-column: auto; }
  .cs-meta.has-three { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 3.4fr); }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .cs-meta, .cs-meta.has-three { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
}
@media (min-width: 1025px) { .cs-meta { column-gap: 48px; } }

.cs-hero { margin-top: var(--space-title); }

/* ── MEDIA: every image and clip in a frame of its own shape (no cropping: the frame takes the file's ratio), on
   the media radius; pale work on the white page gets a 3% hairline drawn inside its corners. Runs: one item a row
   (the grid's width), or two or three side by side at one height (each as wide as its shape asks), 16 px apart (12
   on phones). Full-bleed: edge to edge of the screen, square corners, only where the file holds 1.5x the screen. ── */
.cs-run { display: flex; flex-direction: column; gap: var(--media-gap); }
.cs-row { display: flex; gap: var(--media-gap); align-items: flex-start; }
.cs-row > .cs-media { flex: var(--g) 1 0%; min-width: 0; }
.cs-media { position: relative; aspect-ratio: var(--r); border-radius: var(--home-radius-media); overflow: hidden; background: var(--off-white); isolation: isolate; }
.cs-media.is-dark { background: #121212; }
.cs-media > picture { display: contents; }   /* a hero poster with an AVIF source for phones (perf, 14 Nov): the img inside lays out as before */
.cs-media > img, .cs-media > picture > img, .cs-media > video, .cs-media > iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.cs-media > .cs-poster, .cs-media > picture > .cs-poster { z-index: 0; }
.cs-media > video { z-index: 1; background: transparent; }
.cs-media > iframe { z-index: 1; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; }
/* a Vimeo film shows only once its player reports time passing (case-study.js); until then, and if it fails, the
   poster under it is all that shows */
.cs-media.is-playing > iframe { opacity: 1; }
.cs-media > .cs-overlay { inset: auto; top: 50%; left: 50%; height: auto; transform: translate(-50%, -50%); object-fit: contain; z-index: 2; }
/* Charlie, 14 Nov: "an extremely faint outline on the case study cards, extremely light grey, just so that they're
   distinguishable between the background". Only frames whose edge melts into the white page (any side mostly above
   luma 230, measured by build.py) carry data-edge="pale" and take it, inside their 8 px corners; strong edges get none */
.cs-media[data-edge="pale"]::after, .cs-quote-photo[data-edge="pale"]::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--media-line); pointer-events: none; }
.cs-bleed { margin-inline: calc(-1 * var(--home-gutter)); border-radius: 0; }
.cs-bleed[data-edge="pale"]::after { box-shadow: inset 0 1px 0 var(--media-line), inset 0 -1px 0 var(--media-line); }
/* Phones: rows stack into single items at the grid's width, except two squares or two portraits, which stay side by
   side (each still well over a third of the screen) */
@media (max-width: 768px) {
  .cs-row:not(.keep-row) { flex-direction: column; }
  .cs-row:not(.keep-row) > .cs-media { flex: none; width: 100%; }
}
.cs-caption { margin-top: 12px; font-size: 13px; line-height: 1.4; color: var(--text-muted); max-width: 40em; }

/* ── CHAPTERS: Overview, The work, Outcome. Each opens on a hairline across the grid with its label, then the copy
   at the body size on the grid's left edge, at most about 74 characters a line, then its run of work. The rhythm
   between chapters is the homepage's (48 / 64 / 80 px above and below). ── */
.cs-chapter { padding-block: var(--home-space); scroll-margin-top: var(--nav-clear); }
/* Section titles (round 2, C-6, now the site rule): the homepage's section title ("The proof", "Selected work"),
   20 / 24 px at 400, -0.01em, ink, sentence case, with its hairline 16 px under it, the content below */
.cs-section-title { font-size: 20px; font-weight: 400; letter-spacing: -0.01em; line-height: 24px; color: var(--text-primary); }
.cs-text { display: flex; flex-direction: column; gap: 24px; }
.cs-text > .cs-section-title { padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.cs-body { max-width: 31em; font-size: var(--body-size); line-height: 1.45; letter-spacing: -0.005em; color: var(--text-primary); text-wrap: pretty; }
.cs-body + .cs-body { margin-top: -8px; }
.cs-body a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: #09090B4D; transition: text-decoration-color var(--duration-state) ease; }
.cs-body a:hover { text-decoration-color: currentColor; }
.cs-text + .cs-run { margin-top: var(--space-title); }
@media (min-width: 769px) { .cs-text { gap: 32px; } }

/* ── FILMS WITH SOUND (round 2, C-7): our poster with the site's play control (the homepage's 40 px blurred ink
   square, 36 px on phones, 8 px corners), the cursor's "Play" label over the frame from 1025 px, where the button
   shows only to the keyboard. Once playing, a minimal bar of our own along the foot of the frame: pause, a 2 px
   scrub line on a 44 px target, sound; it fades when the pointer rests. No browser controls. ── */
.cs-film-play, .cs-film-controls button {
  display: flex; align-items: center; justify-content: center; border: 0; padding: 0; color: #FFFFFF; cursor: pointer;
  border-radius: var(--home-radius-control); background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.cs-film-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; width: 40px; height: 40px; }
.cs-film-play::after { content: ''; position: absolute; inset: -4px; }
.cs-film-play svg { width: 14px; height: 14px; margin-left: 2px; }
@media (max-width: 768px) { .cs-film-play { width: 36px; height: 36px; } .cs-film-play svg { width: 12px; height: 12px; } }
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  .cs-film-play { opacity: 0; }
  .cs-film-play:focus-visible { opacity: 1; }
}
.cs-film.is-started .cs-film-play { display: none; }
.cs-film.is-started > .cs-poster, .cs-film.is-started > picture > .cs-poster { visibility: hidden; }
.cs-film > video { background: #000; }
.cs-film:not(.is-started) > video { background: transparent; }
.cs-film-controls { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; display: flex; align-items: center; gap: 8px; transition: opacity 0.3s ease; }
.cs-film-controls[hidden] { display: none; }
.cs-film.is-idle .cs-film-controls { opacity: 0; }
.cs-film-controls button { flex: none; width: 44px; height: 44px; }
.cs-film-controls svg { width: 16px; height: 16px; }
.cs-film-toggle .i-play { display: none; }
.cs-film.is-paused .cs-film-toggle .i-play { display: block; }
.cs-film.is-paused .cs-film-toggle .i-pause { display: none; }
.cs-film-mute .i-muted { display: none; }
.cs-film.is-muted .cs-film-mute .i-muted { display: block; }
.cs-film.is-muted .cs-film-mute .i-sound { display: none; }
.cs-film-scrub { flex: 1 1 auto; height: 44px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.cs-film-track { position: relative; display: block; width: 100%; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, 0.35); overflow: hidden; }
.cs-film-progress { position: absolute; inset: 0 auto 0 0; width: 0; background: #FFFFFF; }
.cs-film-scrub:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -8px; }
@media (prefers-reduced-motion: reduce) { .cs-film-controls { transition: none; } }

/* ── THE LEFT COLUMN (Charlie, 14 Nov: "I think the left column is a nice UX"): production's case sidebar, word for word
   and in its order (the case's name and its line where it had one, the chapter links, the result, the services),
   set in the site's language and sticky beside the chapters as it was. From 1025 px: about 30% of the grid (400 px
   at 1440, at most 480), 80 px from the chapters (48 to 1279 px), its top level with the first chapter's title,
   sticking 24 px under the header. The name at the homepage's case name (28 px), the links at the body size in the
   muted grey with the current chapter in ink, the result at the homepage's case figure, the services as the footer
   column label over their list; hairlines between the groups. Up to 1024 px there is no column, as live: Services and
   the result join the list under the summary instead (live hid them on phones and tablets). ── */
.cs-content { display: block; }
.cs-side { display: none; }
@media (min-width: 1025px) {
  .cs-content { display: flex; align-items: flex-start; column-gap: 48px; }
  .cs-col { flex: 1 1 0%; min-width: 0; }
  .cs-side {
    display: flex; flex-direction: column; flex: 0 0 clamp(300px, 30%, 480px); width: clamp(300px, 30%, 480px);
    position: -webkit-sticky; position: sticky; top: calc(var(--nav-clear) + 24px); align-self: flex-start;
    margin-top: var(--home-space); padding-bottom: var(--home-space);   /* margin, so the stuck column sits 24 px under the header */
  }
  .cs-meta .cs-meta-compact { display: none; }
}
@media (min-width: 1280px) { .cs-content { column-gap: 80px; } }
.cs-side-head { display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.cs-side-name { font-size: 28px; font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; color: var(--text-primary); }
.cs-side-line { font-size: var(--desc-size); line-height: var(--desc-lh); color: var(--text-muted); text-wrap: balance; }
.cs-side-nav { display: flex; flex-direction: column; padding-block: 12px; }
.cs-side-nav a { display: flex; align-items: center; min-height: 36px; font-size: var(--desc-size); line-height: 22px; color: var(--text-muted); transition: color var(--duration-state) ease; }
.cs-side-nav a:hover, .cs-side-nav a[aria-current="true"] { color: var(--text-primary); }
.cs-side-result { display: flex; flex-direction: column; padding-block: 24px; border-top: 1px solid var(--border); }
.cs-side-services { display: flex; flex-direction: column; gap: 8px; padding-top: 24px; border-top: 1px solid var(--border); }
.cs-side-services p { font-size: var(--desc-size); line-height: var(--desc-lh); color: var(--text-primary); text-wrap: pretty; }
/* the first chapter's title level with the column's top */
.cs-content .cs-chapter { scroll-margin-top: calc(var(--nav-clear) + 24px); }
/* ── OUTCOME SPREAD (round 2, C-3): a band on the white page under one hairline, with the case's results at the homepage's stat size and the client's quote in its testimonial
   type. Desktop: results on the left five twelfths, the quote on the right seven, both under one hairline.
   Tablets: the results side by side, the quote under them. Phones: one column, a hairline between results.
   The figures are static (round 3): client results show their final value from the start, so no screenshot can
   catch a figure mid-count. ── */
/* On white with one hairline above it (round 3: the tint, a white gap and the black work below changed ground three
   times in 460 px), so the page goes from white to the work once */
/* Charlie, 14 Nov: "the container's a bit soft maybe, and there's too many lines ... We don't need that top line
   above the stats." A crisp block in the homepage's neutral page grey (--page-bg #F7F7F6, no warm tint), on the
   media radius (8 px), no line above the stats, one line between the stats and the quote; the standard section
   space under it before the next image, so it never sits in a thin white strip between two grounds */
.cs-spread { --cs-band: var(--page-bg); background: var(--cs-band); border-radius: var(--home-radius-media); padding: 24px; }
.cs-text + .cs-spread { margin-top: var(--space-title); }
.cs-spread + .cs-run { margin-top: calc(2 * var(--home-space)); }
.cs-results > .cs-result:first-child { padding-top: 0; }
.cs-spread .cs-result + .cs-result { border-top: 0; }   /* one line only: between the stats and the quote */
.cs-spread .cs-results { row-gap: 32px; }
.cs-spread .cs-results > .cs-result { padding-block: 0; }
.cs-spread .cs-spread-inner { row-gap: 24px; }
.cs-spread .cs-quote { border-top: 1px solid var(--border); padding-top: 24px; }
@media (min-width: 769px) { .cs-spread { padding: 32px; } .cs-spread .cs-spread-inner { row-gap: 32px; } .cs-spread .cs-quote { padding-top: 32px; } }
@media (min-width: 1025px) { .cs-spread { padding: 48px; } .cs-spread .cs-spread-inner { row-gap: 40px; } .cs-spread .cs-quote { padding-top: 40px; } }
.cs-spread-inner { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
.cs-results { display: grid; grid-template-columns: minmax(0, 1fr); }
.cs-result { display: flex; flex-direction: column; gap: 16px; padding-block: 24px; }
.cs-result + .cs-result { border-top: 1px solid var(--border); }
.cs-result:last-child { padding-bottom: 0; }
.cs-result-figure { font-size: 44px; font-weight: 400; line-height: 52px; letter-spacing: -0.03em; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-result-label { font-size: var(--desc-size); line-height: var(--desc-lh); color: var(--text-muted); max-width: 280px; text-wrap: balance; }
.cs-quote { display: flex; flex-direction: column; gap: 24px; }
.cs-quote-text p { font-size: 18px; font-weight: 400; line-height: 1.4; letter-spacing: -0.01em; color: var(--text-primary); text-wrap: balance; max-width: 34em; }
.cs-quote-text p::before { content: "\201C"; }
.cs-quote-text p::after { content: "\201D"; }
.cs-quote-author { display: flex; align-items: center; gap: 12px; }
.cs-quote-photo { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: #E0E0DE; }
.cs-quote-photo img { width: 100%; height: 100%; object-fit: cover; }
.cs-quote-meta { display: flex; flex-direction: column; gap: 2px; }
.cs-quote-name { font-size: 14px; font-weight: 500; line-height: 18px; color: var(--text-primary); }
.cs-quote-role { font-size: 13px; line-height: 16px; color: var(--text-muted); }
@media (min-width: 769px) {
  .cs-results { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .cs-result { padding-block: 32px 0; gap: 16px; }
  .cs-result + .cs-result { border-top: 0; }
  .cs-result-figure { font-size: 48px; line-height: 58px; }
  .cs-quote-text p { font-size: 20px; }
}
@media (min-width: 1025px) {
  .cs-spread-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; align-items: start; }
  .cs-spread.is-results-only .cs-spread-inner, .cs-spread.is-quote-only .cs-spread-inner { grid-template-columns: minmax(0, 1fr); }
  .cs-result-figure { font-size: 52px; line-height: 64px; }
  .cs-quote { border-top: 1px solid var(--border); padding-top: 32px; gap: 32px; }
  .cs-quote-text p { font-size: clamp(28px, 1.94vw, 36px); line-height: 1.25; letter-spacing: -0.02em; }
}

/* The results band sits inside the chapters' column from 1025 px, so the sticky column beside it never overlaps it:
   the results side by side, the quote under them on its own hairline */
@media (min-width: 1025px) {
  .cs-results > .cs-result { padding-top: 0; }
  .cs-spread-inner { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .cs-results { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .cs-result { padding-block: 32px 0; }
  .cs-result + .cs-result { border-top: 0; }
  .cs-quote-text p { font-size: clamp(24px, 1.67vw, 32px); }
}

/* ── NEXT CASE (Charlie, 14 Nov: "quite liked the single case study at the bottom ... with the full width page
   version"): one case across the grid, in place of More work: the next in the work index's order, its name at the
   title's display step, its line in the muted grey under it, its image beside it (above it on phones), one link;
   "All work" ranged right on the section title's row ── */
.cs-next { padding-block: var(--home-space); }
.cs-next-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.cs-next-head .section-link { align-self: auto; }
.cs-next-card { margin-top: var(--space-title); display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 24px; color: var(--text-primary); }
.cs-next-name { font-size: var(--type-display); font-weight: 400; line-height: var(--type-display-lh); letter-spacing: var(--type-display-track); white-space: nowrap; }
.cs-next-line { margin-top: 12px; font-size: var(--type-lead); line-height: var(--type-lead-lh); letter-spacing: var(--type-lead-track); color: var(--text-muted); text-wrap: balance; max-width: 22em; }
.cs-next-card .cs-media { order: -1; }
.cs-next-card:hover .cs-next-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; text-decoration-color: #09090B4D; }
@media (min-width: 769px) {
  .cs-next-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); column-gap: 32px; align-items: end; }
  .cs-next-card .cs-media { order: 2; }
}
@media (min-width: 1025px) { .cs-next-card { column-gap: 48px; } }
@media (hover: hover) and (pointer: fine) {
  .cs-next-card .cs-media img { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
  .cs-next-card:hover .cs-media img { transform: scale(1.03); }
}

/* ══════════════════════════════════════════
   THE ENDING: the homepage's standard ending (closing block on the white page, dark wordmark layer under it).
   Synced from the homepage between the markers; these few sit outside them: the button base and the radius roles
   for the shared notices.
══════════════════════════════════════════ */
.btn-primary { display: flex; background: var(--white); border: none; cursor: pointer; border-radius: var(--home-radius-control); padding: 12px 20px; transition: opacity 0.15s; }
.btn-primary:hover { opacity: 0.85; }
.btn-primary span { font-family: var(--font); font-size: 14px; font-weight: 500; line-height: 18px; color: var(--black); }
html .announce-tag { border-radius: var(--home-radius-control); }
.pow-consent { border-radius: var(--home-radius-media); }
.pow-consent-accept { border-radius: var(--home-radius-control); }

/* case:ending:start (homepage a378f9c2; synced by scripts/case-study/sync_ending.py, do not edit by hand) */
:root { --home-mark-top: #2E3036; --home-mark-base: #23252A; --home-mark-sheen: 0.04; --home-mark-bottom: 2px; }
.closing-mark { position: -webkit-sticky; position: sticky; bottom: 0; z-index: 1; background: var(--black); padding: var(--home-foot) var(--home-gutter) calc(var(--home-mark-bottom) + env(safe-area-inset-bottom, 0px)); }
.closing-mark-box { overflow: hidden; }
.closing-mark-svg { display: block; width: 100%; height: auto; }
.closing-mark-top { stop-color: var(--home-mark-top); }
.closing-mark-foot { stop-color: var(--home-mark-base); }
.closing-mark-sheen { opacity: var(--home-mark-sheen); transform-box: view-box; transform-origin: 0 0; animation: powMarkSheen 23s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; animation-play-state: paused; }
.closing-mark-sheen-b { opacity: calc(var(--home-mark-sheen) * 0.7); animation-duration: 37s; animation-delay: -14s; animation-name: powMarkSheenB; }
.closing-mark-box.is-lit .closing-mark-sheen { animation-play-state: running; }
@keyframes powMarkSheen { 0% { transform: translateX(-40px) skewX(-28deg); } 45% { transform: translateX(210px) skewX(-28deg); } 100% { transform: translateX(560px) skewX(-28deg); } }
@keyframes powMarkSheenB { 0% { transform: translateX(-20px) skewX(-34deg); } 60% { transform: translateX(330px) skewX(-34deg); } 100% { transform: translateX(540px) skewX(-34deg); } }
@media (prefers-reduced-motion: reduce) {
  .closing-mark-sheen { display: none; }
}
.closing-mark-box.is-rising .closing-mark-svg { will-change: transform; }
html:has(.pow-consent.is-visible) .closing-mark { padding-bottom: max(calc(var(--home-mark-bottom) + env(safe-area-inset-bottom, 0px)), 160px); }
.closing { display: grid; padding-top: var(--home-space); padding-bottom: var(--home-foot); padding-inline: var(--home-gutter); grid-template-columns: 1fr; row-gap: 48px; }
.closing-ask { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.closing-heading { font-size: clamp(40px, 12.3vw, 52px); font-weight: 400; line-height: 1.02; letter-spacing: -0.045em; color: var(--text-primary); }
.closing-btn { background: var(--black); min-height: 44px; align-items: center; }
.closing-btn span { color: var(--white); }
.closing-cols-inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; }
.closing-col { display: flex; flex-direction: column; }
.closing-col ul { list-style: none; }
.closing-label { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; line-height: 16px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.closing-col a { display: flex; align-items: center; min-height: 44px; font-size: 16px; line-height: 22px; color: var(--text-primary); }
.closing-col a:hover, .closing-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.closing-foot { display: flex; flex-direction: column; --sign: 28px; --sign-gap: 24px; --meta-gap: 16px; }
.closing-foot-lead { display: flex; align-items: flex-start; column-gap: var(--sign-gap); }
.closing-sign { flex: none; display: block; width: var(--sign); height: var(--sign); margin-top: calc((44px - var(--sign)) / 2); color: var(--text-primary); }
.closing-meta { flex: 1 1 0%; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--meta-gap); }
.closing-legal { padding-left: calc(var(--sign) + var(--sign-gap)); }
.closing-meta-line { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; line-height: 18px; color: var(--text-muted); }
@media (max-width: 359px) {
  .closing-cols-inner { column-gap: 12px; }
}
@media (min-width: 769px) {
  .closing { grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 64px; row-gap: 64px; }
  .closing-ask { grid-area: 1 / 1; }
  .closing-cols { grid-area: 1 / 2; margin-top: 2.5px; }
  .closing-foot { display: contents; --sign-gap: 48px; --meta-gap: 40px; }
  .closing-foot-lead { grid-area: 2 / 1; }
  .closing-legal { grid-area: 2 / 2; justify-self: stretch; justify-content: space-between; align-self: start; padding-left: 0; flex-wrap: nowrap; white-space: nowrap; }
  .closing-cols-inner { justify-content: end; }
  .closing-heading { font-size: 56px; line-height: 0.98; letter-spacing: -0.05em; }
  .closing-cols-inner { grid-template-columns: repeat(3, auto); column-gap: 48px; }
}
@media (min-width: 1025px) {
  .closing-cols { margin-top: clamp(3px, 0.44vw, 7.5px); }
  .closing-heading { font-size: clamp(40px, 5.56vw, 96px); }
  .closing-cols-inner { column-gap: 80px; }
  .closing-ask { gap: 40px; }
  .closing-foot { --sign: 32px; }
}
@media (min-width: 1280px) {
  .closing-col a { font-size: 17px; }
}
.closing-subline { display: none; font-size: 17px; line-height: 1.5; color: var(--text-muted); }
/* case:ending:end */