/* Case study pages. Loaded after styles.css, so they share the home page's cream, ink, red,
   nav pill and dock, Cormorant headings and Hanken text.
   The layout follows one reference end to end (sanjaymenon.framer.website/checkout):
   tags, title and a small facts row; a gradient hero panel with fanned screens; a narrow reading
   column; a divider-ruled numbers row; sticky notes; pinned decision cards; screens in uniform
   soft tiles, three across; feature rows with a close crop; before/after tiles; an outcome band;
   a paper note for reflections. The title stays centred, as on the home page. */
.cs {
  --bg: #FFFDF1;
  --band: #F4F2E6;
  --surface: #FFFFFF;
  --ink: #1B1916;
  --soft: #5F584D;
  --rule: rgba(27, 25, 22, .13);
  --red: #671813;
  --tile: #F1EEE0;
  --tile-2: color-mix(in srgb, var(--glow, #8C6A3A) 13%, #F4F2E6);
  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --page: 60rem;
  --text: 40rem;
  --pad: clamp(1.25rem, 5vw, 5rem);
  --edge: max(var(--pad), calc((100vw - var(--page)) / 2));
  --gap: clamp(.9rem, 1.8vw, 1.25rem);
  --radius: 1.25rem;
  --lift: 0 0 0 1px rgba(27, 25, 22, .07), 0 2rem 3rem -1.8rem rgba(40, 32, 12, .5);
  background: var(--bg); color: var(--ink);
  font-family: var(--body); font-size: 1.0625rem; line-height: 1.6;
}
.cs h1, .cs h2, .cs h3, .cs h4 { margin: 0; font-family: var(--display); font-weight: 700; text-wrap: balance; }
.cs p { text-wrap: pretty; }
.cs strong { font-weight: 600; color: var(--ink); }
.cs :focus-visible { outline-color: var(--red); }
.cs-progress { position: fixed; inset: 0 0 auto 0; z-index: 60; height: 2px; background: var(--red); transform: scaleX(var(--read, 0)); transform-origin: 0 50%; }

.cs-label, .cs-meta dt, .cs-table thead th, .cs-chat h4, .cs-check small, .cs-group b, .cs-num, .cs-shot figcaption {
  font-family: var(--body); font-style: normal; font-weight: 500; font-size: .75rem; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; color: var(--red);
}

/* ---------- Back button: a pill at the top left, beside the nav ---------- */
.cs-back {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: 0 1.1rem; align-self: center; width: auto !important;
  border-radius: 2rem; background: #F4F2E6; box-shadow: 4px 5px 10px rgba(70, 64, 40, .16);
  font-size: .9375rem; font-weight: 500; color: var(--ink); text-decoration: none; transition: opacity .3s, transform .4s var(--ease);
}
.cs-back span { transition: transform .3s var(--ease); }
.cs-back:hover span { transform: translateX(-.25em); }
@media (min-width: 62rem) {
  .cs-back { position: fixed; z-index: 50; left: clamp(1rem, 3vw, 3rem); top: clamp(1rem, 3.5vw, 3.75rem); height: clamp(44px, 3.15vw, 52px); }
  .cs.is-away .cs-back { opacity: 0; transform: translateY(-150px); pointer-events: none; }
}

/* ---------- Hero ---------- */
.cs-hero { display: flex; flex-direction: column; align-items: center; padding: clamp(6.5rem, 11vw, 10rem) var(--edge) 0; text-align: center; }
.cs-hero > * { width: 100%; }
.cs-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.25rem !important; }
.cs-tags span { padding: .3rem .85rem; border: 1px solid var(--rule); border-radius: .5rem; font-size: .875rem; color: var(--soft); background: var(--surface); }
.cs-title { max-width: 17ch; margin: clamp(1.25rem, 2.5vw, 2rem) auto 0 !important; font-size: clamp(3rem, 7vw, 6.5rem); line-height: .94; letter-spacing: -.02em; }
.cs-dek { max-width: 36rem; margin: clamp(1rem, 2vw, 1.5rem) auto 0 !important; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.5; color: var(--soft); }
.cs-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem clamp(1.5rem, 4vw, 3.5rem); margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; text-align: left; }
.cs-meta dt { letter-spacing: 0; text-transform: none; font-size: .8125rem; color: var(--soft); font-weight: 400; }
.cs-meta dd { margin: .15rem 0 0; font-size: .9375rem; font-weight: 500; }
.cs-glance { display: none; }

.cs-tile, .cs-stage, .cs-shots .cs-shot button, .cs-fig > button, .cs-fig > img, .cs-strip { background: linear-gradient(165deg, var(--tile-2), var(--tile) 70%); }
.cs-stage {
  position: relative; margin-top: clamp(2.5rem, 5vw, 4rem); padding: clamp(2rem, 6vw, 5rem) clamp(1.25rem, 6vw, 5rem) 0;
  border-radius: clamp(1.25rem, 2.4vw, 2rem); overflow: hidden;
  background: linear-gradient(165deg, color-mix(in srgb, var(--glow, #8C6A3A) 26%, #F4F2E6), #F4F2E6 72%);
}
.cs-phones { display: flex; justify-content: center; align-items: flex-start; gap: var(--gap); margin: 0; }
.cs-phones > * { flex: 1 1 0; min-width: 0; margin: 0; }
.cs-phones img { display: block; width: 100%; border: clamp(4px, .55vw, 7px) solid #14120F; border-radius: clamp(1.1rem, 2.6vw, 2.2rem); background: #14120F; box-shadow: 0 2.5rem 3.5rem -2rem rgba(40, 32, 12, .55); }
.cs-phones--bare img { border: 0; background: none; border-radius: 0; box-shadow: none; filter: drop-shadow(0 2rem 2rem rgba(40, 32, 12, .3)); }
.cs-stage .cs-phones { gap: 0; margin-bottom: -22%; padding-top: 2%; }
.cs-stage .cs-phones > * { flex: 0 0 31%; }
.cs-stage .cs-phones > :nth-child(1) { transform: rotate(-9deg) translate(12%, 9%); }
.cs-stage .cs-phones > :nth-child(2) { transform: scale(1.08); z-index: 2; }
.cs-stage .cs-phones > :nth-child(3) { transform: rotate(9deg) translate(-12%, 9%); }
.cs-stage .cs-phones:has(> :nth-child(4)) > * { flex-basis: 25%; }
.cs-stage .cs-phones:has(> :nth-child(4)) > :nth-child(1) { transform: rotate(-10deg) translate(22%, 12%); }
.cs-stage .cs-phones:has(> :nth-child(4)) > :nth-child(2) { transform: rotate(-3deg) translate(6%, 0); z-index: 2; }
.cs-stage .cs-phones:has(> :nth-child(4)) > :nth-child(3) { transform: rotate(3deg) translate(-6%, 0); z-index: 2; }
.cs-stage .cs-phones:has(> :nth-child(4)) > :nth-child(4) { transform: rotate(10deg) translate(-22%, 12%); }
.cs-duo { position: relative; }
.cs-duo > :first-child { width: 80%; border-radius: .8rem .8rem 0 0; }
.cs-duo > :last-child { position: absolute; right: 0; bottom: 0; width: 48%; transform: translateY(14%); }

/* ---------- Sections ---------- */
.cs-body { margin-top: clamp(1rem, 3vw, 2rem); }
.cs-sec { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); padding: clamp(4.5rem, 9vw, 8rem) var(--edge); scroll-margin-top: 1rem; }
.cs-sec + .cs-sec::before { content: ""; position: absolute; left: var(--edge); right: var(--edge); top: 0; height: 1px; background: var(--rule); }
.cs-sec + .cs-sec::after { content: ""; position: absolute; left: 50%; top: -3px; width: 7px; height: 7px; margin-left: -3px; background: var(--red); transform: rotate(45deg); }
.cs-sec > * { min-width: 0; }
.cs-sec > * + * { margin-top: 1.25rem; }
.cs-sec > .cs-num { display: flex; justify-content: center; align-items: center; gap: .6rem; margin: 0; }
.cs-num b { display: none; }
.cs-num::before { content: ""; width: 7px; height: 7px; background: var(--red); transform: rotate(45deg); }
.cs-sec > h2 { max-width: 20ch; margin: .9rem auto 0; text-align: center; font-size: clamp(2.2rem, 4.2vw, 3.6rem); line-height: 1; letter-spacing: -.015em; }
.cs-sec > p:not(.cs-num) { max-width: var(--text); margin-inline: auto; text-align: center; color: var(--soft); }
.cs-sec > h2 + p { margin-top: clamp(1.25rem, 2.2vw, 1.75rem); }
.cs-sec > h2 ~ :not(p):not(h3) { margin-top: clamp(2.25rem, 4.5vw, 3.5rem); }
.cs-lead { font-size: 1.125rem; color: var(--ink) !important; font-weight: 500; }
.cs-sec h3 { text-align: center; font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.05; margin-top: clamp(3.5rem, 7vw, 5.5rem) !important; }
.cs-sec > :is(.cs-facts, .cs-note, .cs-check, .cs-list) { width: min(100%, var(--text)); margin-inline: auto; }

/* Reading sections: one narrow column, text ranged left */
.cs-sec--read > .cs-num { justify-content: flex-start; }
.cs-sec--read > :is(.cs-num, h2, p, h3) { width: min(100%, var(--text)); max-width: none; margin-inline: auto; text-align: left !important; }
.cs-sec--read > h2 { max-width: none; }

.cs-list li { position: relative; padding-left: 1.4rem; color: var(--soft); }
.cs-list li + li { margin-top: .5rem; }
.cs-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: .4rem; height: .4rem; background: var(--red); transform: rotate(45deg); }
.cs-list a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.cs-facts { border-top: 1px solid var(--rule); }
.cs-facts div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--gap); padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.cs-facts dt { padding-top: .3rem; }
.cs-facts dd { margin: 0; color: var(--soft); }

/* Numbers: a row ruled by dividers */
.cs-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-stats > div { padding: .25rem clamp(1rem, 2.5vw, 2rem); text-align: left; }
.cs-stats > div + div { border-left: 1px solid var(--rule); }
.cs-stats > div:first-child { padding-left: 0; }
.cs-stats b { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 3.8vw, 3.4rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.cs-stats span { display: block; margin-top: .75rem; font-size: .875rem; line-height: 1.45; color: var(--soft); }

/* Goals: three columns, each under a small target mark */
.cs-cards, .cs-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem) var(--gap); }
.cs-cards--2, .cs-pair, .cs-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem) var(--gap); }
.cs-card { text-align: left; padding-right: .5rem; }
.cs-card::before { content: ""; display: block; width: 1.35rem; height: 1.35rem; margin-bottom: 1rem; border-radius: 50%; border: 2px solid #3F7B3A; background: radial-gradient(#3F7B3A 0 28%, transparent 30%); }
.cs-card > * + * { margin-top: .6rem; }
.cs-card h3, .cs-card h4 { margin: 0 !important; text-align: left; font-family: var(--body); font-weight: 600; font-size: 1.0625rem; line-height: 1.3; letter-spacing: 0; }
.cs-card p { font-size: .9375rem; line-height: 1.55; color: var(--soft); }
.cs-card .cs-label b { font: inherit; margin-right: .4rem; }
.cs-card:not(.cs-card--line):has(.cs-label:first-child + p:last-child) p:last-child { color: var(--ink); font-size: 1rem; }
.cs-then { padding-top: .7rem; border-top: 1px solid var(--rule); }

/* Decisions: pinned cards */
.cs-cards:has(.cs-card--line) { gap: var(--gap); padding-top: .75rem; }
.cs-card--line { position: relative; padding: 1.75rem 1.1rem 1.2rem; border-radius: .9rem; background: var(--surface); box-shadow: 0 0 0 1px rgba(27, 25, 22, .06), 0 1.5rem 2rem -1.5rem rgba(40, 32, 12, .35); }
.cs-card--line::before { position: absolute; left: 50%; top: -.55rem; width: 1rem; height: 1rem; margin: 0 0 0 -.5rem; border: 0; background: radial-gradient(circle at 35% 30%, #E46A5C, #A01F16 70%); box-shadow: 0 .35rem .4rem -.1rem rgba(60, 10, 5, .45); }
.cs-card--line h3, .cs-card--line h4 { margin-top: .6rem !important; padding: .8rem .8rem 0; border-radius: .6rem .6rem 0 0; }
.cs-card--line > p:not(.cs-label) { margin: 0; padding: .5rem .8rem .9rem; border-radius: 0 0 .6rem .6rem; }
.cs-card--line h3, .cs-card--line h4, .cs-card--line > p:not(.cs-label) { background: var(--note-bg, #FBF1E3); }
.cs-card--line:nth-child(even) { --note-bg: #FBE9E4; }
.cs-card--line .cs-label { color: var(--soft); letter-spacing: .06em; }

/* Steps: sticky notes */
.cs-steps { counter-reset: step; gap: var(--gap); }
.cs-steps > li { counter-increment: step; padding: 1.4rem 1.3rem 1.6rem; text-align: left; background: #FBF1B5; box-shadow: 0 1.2rem 1.4rem -1.1rem rgba(70, 60, 20, .5); transform: rotate(-1.2deg); }
.cs-steps > li:nth-child(2) { background: #DCEBF7; transform: rotate(.8deg); }
.cs-steps > li:nth-child(3) { background: #F8D9D4; transform: rotate(-.6deg); }
.cs-steps > li:nth-child(4) { background: #DDEED2; transform: rotate(1deg); }
.cs-steps > li::before { content: "0" counter(step); display: block; font: 500 .75rem var(--body); letter-spacing: .1em; color: rgba(27, 25, 22, .6); }
.cs-steps h4 { margin-top: .6rem; font-size: 1.5rem; line-height: 1.05; }
.cs-steps p { margin-top: .5rem; font-size: .9375rem; line-height: 1.45; color: #3C382F; }
.cs-steps .cs-mock { margin-top: 1rem; }

.cs-pull { margin: clamp(3rem, 7vw, 5.5rem) 0 0 !important; text-align: center; }
.cs-pull p { max-width: 22ch; margin-inline: auto; font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(1.9rem, 3.8vw, 3.2rem); line-height: 1.05; }
.cs-pull footer { max-width: var(--text); margin: 1rem auto 0; font-size: .9375rem; color: var(--soft); }

/* Notes and reflections: a sheet of paper held by a clip */
.cs-note { position: relative; padding: 2rem 1.9rem 1.8rem; background: var(--surface); text-align: left; box-shadow: 0 0 0 1px rgba(27, 25, 22, .05), 0 1.6rem 2rem -1.5rem rgba(40, 32, 12, .4); transform: rotate(-.5deg); }
.cs-note::before { content: ""; position: absolute; left: 1.6rem; top: -1rem; width: .9rem; height: 2.6rem; border: 2px solid #8C8676; border-radius: .5rem; border-bottom-color: transparent; }
.cs-note > * + * { margin-top: .5rem; }
.cs-note p:not(.cs-label) { font-size: .9375rem; line-height: 1.55; color: var(--soft); }

.cs-scroll { overflow-x: auto; }
.cs-table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .9375rem; line-height: 1.5; text-align: left; }
.cs-table th, .cs-table td { padding: 1rem 1.25rem 1rem 0; vertical-align: top; border-bottom: 1px solid var(--rule); color: var(--soft); }
.cs-table thead th { padding-top: 0; border-bottom-color: var(--ink); }
.cs-table tbody th { font-weight: 600; color: var(--ink); }
.cs-table tbody th a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.cs-num-cell { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-badge { display: inline-block; padding: .15rem .65rem; border-radius: 2rem; font-size: .8125rem; font-weight: 500; white-space: nowrap; background: #E9E6D8; color: #3C382F; }
.cs-badge--ok { background: #DDEED2; color: #24521A; }
.cs-badge--bad { background: #F8D9D4; color: #8A1F14; }
.cs-badge--warn { background: #FBEBC0; color: #6A4B00; }
.cs-sev { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: #A01F16; white-space: nowrap; }
.cs-sev i { display: inline-flex; gap: 3px; }
.cs-sev i::before, .cs-sev i::after { content: "●●"; letter-spacing: 3px; font-style: normal; font-size: .7rem; }
.cs-sev--3 i::after { content: "●○"; }

/* ---------- Product shots: every screen in the same soft tile ---------- */
.cs-tile { position: relative; border-radius: var(--radius); overflow: hidden; }
.cs-browser { border-radius: .7rem; background: #fff; overflow: hidden; box-shadow: var(--lift); }
.cs-browser__bar { display: flex; align-items: center; gap: 5px; padding: .5rem .7rem; background: #FBFAF4; border-bottom: 1px solid rgba(27, 25, 22, .08); }
.cs-browser__bar i { width: 7px; height: 7px; border-radius: 50%; background: #CFCAB4; }
.cs-browser__view { display: block; width: 100%; padding: 0; border: 0; background: #fff; cursor: zoom-in; aspect-ratio: var(--ar, 16 / 10); overflow: hidden; }
.cs-browser__view img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: object-position 5s cubic-bezier(.45, 0, .2, 1); }
.cs-browser__view:hover img, .cs-browser__view:focus-visible img { object-position: 50% 100%; }
.cs-browser--full .cs-browser__view { aspect-ratio: auto; }
.cs-browser--full .cs-browser__view img { height: auto; }
.cs-shotcard { margin: 0; min-width: 0; }
.cs-shotcard .cs-tile { padding: clamp(1.25rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem) 0; }
.cs-shotcard .cs-tile .cs-browser { border-radius: .7rem .7rem 0 0; }
.cs-shotcard .cs-tile--full { padding-bottom: clamp(1.25rem, 4vw, 3rem); }
.cs-shotcard .cs-tile--full .cs-browser { border-radius: .7rem; }
.cs-pair .cs-shotcard .cs-tile { padding: clamp(1rem, 2.4vw, 1.75rem) clamp(1rem, 2.4vw, 1.75rem) 0; }
.cs-shotcard figcaption, .cs-phones figcaption, .cs-fig figcaption, .cs-cap { margin-top: .85rem; text-align: left; font-size: .875rem; line-height: 1.45; color: var(--soft); }
.cs-sec > .cs-cap { text-align: center !important; }
.cs-fig figcaption b { font-weight: 600; color: var(--ink); margin-right: .5rem; }
.cs-cap b { font-weight: 600; color: var(--ink); }
.cs-tile--phone { padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 3.5vw, 2.75rem) 0; aspect-ratio: 4 / 5; }
.cs-tile--phone img { border-bottom: 0 !important; border-radius: clamp(1.1rem, 2.2vw, 1.9rem) clamp(1.1rem, 2.2vw, 1.9rem) 0 0 !important; }
.cs-tile--phone.is-bare img { border: 0 !important; background: none; border-radius: .9rem .9rem 0 0 !important; }
.cs-phones--bare:not(.cs-stage *) > * { padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 2.5vw, 2rem) 0; border-radius: var(--radius); background: linear-gradient(165deg, var(--tile-2), var(--tile) 70%); }

.cs-fig { margin: 0; }
.cs-fig > button, .cs-fig > img { display: block; width: 100%; border: 0; border-radius: var(--radius); padding: clamp(1rem, 3.5vw, 2.75rem); }
.cs-fig > button { cursor: zoom-in; }
.cs-fig > button img { display: block; width: auto; max-width: 100%; margin-inline: auto; border-radius: .6rem; box-shadow: var(--lift); }
.cs-pair { align-items: start; }
.cs-pair > * { margin-top: 0 !important; min-width: 0; }
.cs-strip { overflow-x: auto; border-radius: var(--radius); padding: clamp(1rem, 3vw, 2.25rem); }
.cs-strip img { display: block; height: clamp(15rem, 30vw, 26rem); width: auto; max-width: none; border-radius: .6rem; box-shadow: var(--lift); }

/* Feature row: the point on one side, a close crop on the other */
.cs-feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; text-align: left; }
.cs-feature--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.cs-feature--flip > :first-child { order: 2; }
.cs-feature .cs-label { display: flex; align-items: center; gap: .6rem; }
.cs-feature .cs-label::before { content: ""; width: 7px; height: 7px; background: var(--red); transform: rotate(45deg); }
.cs-feature h3 { margin: .7rem 0 0 !important; text-align: left; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1; }
.cs-feature p:not(.cs-label) { margin-top: 1rem; color: var(--soft); }
.cs-feature .cs-why { padding-left: 1rem; border-left: 2px solid var(--rule); font-size: .9375rem; font-style: italic; }
.cs-feature .cs-why strong { font-style: normal; }
.cs-feature + .cs-feature { margin-top: clamp(3.5rem, 8vw, 7rem) !important; }
.cs-tile--crop { aspect-ratio: 5 / 4; display: flex; align-items: center; padding-left: clamp(1.25rem, 3vw, 2.5rem); }
.cs-tile--crop img { display: block; flex: none; width: 270%; height: auto; max-width: none; border-radius: .7rem 0 0 .7rem; box-shadow: var(--lift); }
.cs-feature--flip .cs-tile--crop { padding-left: 0; padding-right: clamp(1.25rem, 3vw, 2.5rem); justify-content: flex-end; }
.cs-feature--flip .cs-tile--crop img { border-radius: 0 .7rem .7rem 0; }
.cs-tile--crop.cs-tile--tall { align-items: flex-start; justify-content: center; padding: clamp(1.5rem, 4vw, 3rem) 0 0; }
.cs-tile--crop.cs-tile--tall img { width: 62%; border-radius: .7rem .7rem 0 0; }

/* Before and after: two tiles, each labelled above */
.cs-finding { display: flex; flex-direction: column-reverse; gap: clamp(1.5rem, 3vw, 2.25rem); }
.cs-finding > div:first-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto; grid-auto-flow: column; gap: .4rem var(--gap); text-align: left; }
.cs-finding > div:first-child > p { color: var(--soft); font-size: .9375rem; }
.cs-finding > div:first-child > p:nth-child(5) { grid-column: 1 / -1; grid-row: 3; margin-top: .8rem; }
.cs-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: end; }
.cs-shots:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }
.cs-shot { display: flex; flex-direction: column-reverse; margin: 0; }
.cs-shot button { display: grid; place-items: center; width: 100%; aspect-ratio: 1; padding: clamp(1rem, 3vw, 2.25rem); border: 0; border-radius: var(--radius); cursor: zoom-in; overflow: hidden; }
.cs-shots:not(:has(> :nth-child(2))) .cs-shot button { aspect-ratio: auto; }
.cs-shot img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: .5rem; box-shadow: var(--lift); }
.cs-shot figcaption { margin-bottom: .75rem; text-align: center; color: var(--soft); }

/* Outcome: a soft sky of colour with glass cards */
.cs-sec--outcome { background: linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--glow, #8C6A3A) 22%, #F4F2E6) 55%, var(--bg)); }
.cs-sec--outcome :is(.cs-cards, .cs-stats) { gap: var(--gap); }
.cs-sec--outcome :is(.cs-card, .cs-stats > div) { padding: 1.6rem 1.5rem 1.7rem; border: 1px solid rgba(255, 255, 255, .8) !important; border-radius: var(--radius); background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1.5rem 2.5rem -1.8rem rgba(40, 32, 12, .45); }
.cs-sec--outcome .cs-card::before { display: none; }
.cs-sec--outcome .cs-card p:last-child { color: var(--ink); }

/* Interface sketches and small demos */
.cs-mock { border-radius: .8rem; background: var(--surface); overflow: hidden; font-size: .875rem; line-height: 1.35; text-align: left; box-shadow: var(--lift); }
.cs-mock__bar { display: flex; align-items: center; gap: 5px; padding: .6rem .85rem; background: #FBFAF4; color: var(--soft); border-bottom: 1px solid var(--rule); }
.cs-mock__bar i { width: 8px; height: 8px; border-radius: 50%; background: #CFCAB4; }
.cs-mock__bar span { margin-left: .5rem; }
.cs-mock__body { padding: 1rem; }
.cs-mock__body > * + * { margin-top: .45rem; }
.cs-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem .85rem; border: 1px solid var(--rule); border-radius: .5rem; background: #fff; }
.cs-row--dim { color: #8A877C; }
.cs-log { padding: .7rem .85rem; border-radius: .5rem; background: var(--band); font-family: var(--mono); font-size: .78rem; overflow-wrap: anywhere; }
.cs-log em { font-style: normal; color: #A01F16; }
.cs-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: .75rem; text-align: left; }
.cs-flow > div { flex: 1 1 9rem; padding: 1.3rem 1.3rem 1.4rem; border-radius: 1rem; background: var(--band); }
.cs-flow > div.is-key { background: var(--ink); color: #FFFCF2; }
.cs-flow > div.is-key :is(.cs-label, p) { color: rgba(255, 252, 242, .75); }
.cs-flow > span { align-self: center; color: var(--soft); }
.cs-flow h4 { margin-top: 1rem; font-size: clamp(1.5rem, 2.1vw, 1.9rem); line-height: 1.05; }
.cs-flow p { margin-top: .35rem; font-size: .875rem; line-height: 1.4; color: var(--soft); }
.cs-chat, .cs-demo, .cs-type { padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--radius); background: var(--band); text-align: left; }
.cs-pair > .cs-demo { margin-top: 0 !important; }
.cs-chat h4 { margin-bottom: 1.25rem; }
.cs-chat p { width: fit-content; max-width: 88%; margin-top: .5rem; padding: .7rem 1rem; border-radius: 1.1rem 1.1rem 1.1rem .3rem; background: #fff; font-size: .9375rem; line-height: 1.4; }
.cs-chat p.me { margin-left: auto; border-radius: 1.1rem 1.1rem .3rem 1.1rem; background: var(--ink); color: #FFFCF2; }
.cs-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.cs-chips span { padding: .3rem .85rem; border: 1px solid var(--ink); border-radius: 2rem; font-size: .8125rem; background: var(--surface); }
.cs-code { padding: clamp(1.25rem, 3vw, 2.25rem); border-radius: var(--radius); background: #26231F; color: #F1ECDD; font-family: var(--mono); font-size: .8438rem; line-height: 1.8; overflow-x: auto; white-space: pre; text-align: left; }
.cs-code b { font-weight: 400; color: #E3B9A6; }
.cs-check { text-align: left; }
.cs-check li { position: relative; padding: .9rem 0 .9rem 2rem; border-bottom: 1px solid var(--rule); }
.cs-check li::before { content: ""; position: absolute; left: 0; top: 1.2rem; width: 1rem; height: 1rem; border: 1.5px solid var(--ink); border-radius: 4px; }
.cs-check small { display: block; margin-top: .3rem; color: var(--soft); }
.cs-seg { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.cs-seg button { min-height: 44px; padding: .4rem 1.1rem; border: 1px solid var(--ink); border-radius: 2rem; background: transparent; font: 500 .9375rem var(--body); color: var(--ink); cursor: pointer; }
.cs-seg button[aria-pressed="true"] { background: var(--ink); color: #FFFCF2; }
.cs-screen { margin-top: 1rem; padding: clamp(2.5rem, 8vw, 6rem) 1.25rem; border-radius: .75rem; text-align: center; transition: background .4s, color .4s; }
.cs-screen b { display: block; font-weight: 500; font-size: clamp(1.4rem, 3.4vw, 2.5rem); transition: text-shadow .4s; }
.cs-screen span { display: block; margin-top: .8rem; font-size: .8125rem; opacity: .8; }
.cs-screen[data-mode="harsh"] { background: #000; color: #fff; }
.cs-screen[data-mode="harsh"] b { text-shadow: 0 0 6px rgba(255, 255, 255, .9), 0 0 16px rgba(255, 255, 255, .55); }
.cs-screen[data-mode="calm"] { background: #1E1C19; color: #E9E4D6; }
.cs-screen[data-mode="light"] { background: #FBF8EC; color: #1B1916; }
.cs-type > * + * { margin-top: .7rem; }
.cs-type--tight p:not(.cs-label) { line-height: 1.15; }
.cs-type--room p:not(.cs-label) { line-height: 1.6; letter-spacing: .12em; word-spacing: .16em; }
.cs-type code { display: block; font: .75rem var(--mono); color: var(--soft); }
.cs-glyphs { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.1; letter-spacing: .04em; }
.cs-facts-flat { display: flex; flex-wrap: wrap; gap: .4rem; }
.cs-facts-flat span, .cs-group span { padding: .35rem .75rem; border-radius: .4rem; background: #fff; font-size: .8125rem; }
.cs-group { display: grid; gap: .35rem; padding: .8rem; border: 1px dashed #B9B49C; border-radius: .6rem; }
.cs-group + .cs-group { margin-top: .5rem; }
.cs-bar { position: relative; height: 2.5rem; margin-top: .75rem; border-radius: .4rem; background: #fff; }
.cs-bar i { position: absolute; top: 0; bottom: 0; border-radius: .4rem; background: var(--red); }
.cs-axis { display: flex; justify-content: space-between; margin-top: .4rem; font-size: .75rem; color: var(--soft); }

/* People: a row of small quote-style cards */
.cs-people { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); text-align: left; }
.cs-people article { border-radius: 1rem; background: var(--surface); overflow: hidden; box-shadow: 0 0 0 1px rgba(27, 25, 22, .06), 0 1.5rem 2rem -1.6rem rgba(40, 32, 12, .35); }
.cs-people img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.cs-people div { padding: .9rem 1rem 1.1rem; }
.cs-people h4 { font-size: 1.4rem; line-height: 1.05; }
.cs-people p { margin-top: .4rem; font-size: .8125rem; line-height: 1.45; color: var(--soft); }
.cs-people p.cs-label { font-size: .6875rem; }
.cs-split { align-items: center; text-align: left; }
.cs-split img { width: 100%; border-radius: var(--radius); }
.cs-split > div > * + * { margin-top: 1rem; }
.cs-split p:not(.cs-lead):not(.cs-label) { color: var(--soft); }

.cs-zoom { width: min(96vw, 1600px); max-width: none; max-height: 94vh; padding: 0; border: 0; border-radius: .75rem; background: #fff; overflow: auto; }
.cs-zoom::backdrop { background: rgba(20, 18, 14, .82); }
.cs-zoom img { width: 100%; }
.cs-zoom button { position: sticky; top: .75rem; float: right; margin: .75rem; z-index: 1; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--ink); color: #FFFCF2; font-size: 1.25rem; cursor: pointer; }

/* ---------- Close ---------- */
.cs-next { display: block; padding: clamp(4rem, 9vw, 7.5rem) var(--edge) clamp(7rem, 12vw, 10rem); background: var(--ink); color: #FFFCF2; text-decoration: none; text-align: center; }
.cs-next .cs-kicker { display: block; font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #E3B9A6; }
.cs-next b { display: block; max-width: 16ch; margin: 1rem auto 0; font-family: var(--display); font-weight: 700; font-size: clamp(2.8rem, 7vw, 6.5rem); line-height: .94; letter-spacing: -.02em; }
.cs-next span.go { display: inline-flex; gap: .5em; margin-top: clamp(1.5rem, 3vw, 2.5rem); font-weight: 500; padding-bottom: .3rem; border-bottom: 1px solid currentColor; }
.cs-next span.go i { font-style: normal; transition: transform .3s var(--ease); }
.cs-next:hover span.go i { transform: translateX(.35em); }
.cs-foot { display: none; }

.js .rv > *:not(.cs-num) { opacity: 0; transform: translateY(1.5rem); }
.js .rv.is-in > * { opacity: 1; transform: none; transition: opacity .7s ease-out, transform .9s cubic-bezier(.16, 1, .3, 1); }
.js .rv.is-in > :nth-child(3) { transition-delay: .08s; } .js .rv.is-in > :nth-child(n+4) { transition-delay: .16s; }
.js .cs-hero > *:not(.cs-back) { animation: cs-rise .9s cubic-bezier(.16, 1, .3, 1) both; }
.js .cs-hero > :nth-child(3) { animation-delay: .06s; } .js .cs-hero > :nth-child(4) { animation-delay: .12s; }
.js .cs-hero > :nth-child(5) { animation-delay: .2s; } .js .cs-hero > :nth-child(n+6) { animation-delay: .3s; }
@keyframes cs-rise { from { opacity: 0; transform: translateY(1.5rem); } }

@media (max-width: 61.99rem) {
  .cs-people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 47.99rem) {
  .cs-cards, .cs-cards--2, .cs-pair, .cs-split, .cs-steps, .cs-feature, .cs-feature--flip, .cs-duo { grid-template-columns: minmax(0, 1fr) !important; }
  .cs-feature--flip > :first-child { order: 0; }
  .cs-sec--outcome .cs-stats { gap: var(--gap); }
  .cs-facts div { grid-template-columns: 1fr; gap: .3rem; }
  .cs-flow > span { display: none; }
  .cs-finding > div:first-child { display: block; }
  .cs-finding > div:first-child > * + * { margin-top: .6rem; }
  .cs-finding > div:first-child > p:nth-child(3) { margin-top: 1.5rem; }
  .cs-sec .cs-phones:not(.cs-stage *) { flex-wrap: wrap; }
  .cs-sec .cs-phones:not(.cs-stage *) > * { flex: 1 1 42%; }
}
@media (prefers-reduced-motion: reduce) {
  .js .rv > *:not(.cs-num) { opacity: 1; transform: none; }
  .cs-progress { display: none; }
  .cs-browser__view img { transition: none; }
}

/* ================= Alignment and scale pass =================
   White page. Everything sits on the centre line. Rows of cards are centred and take only the
   width their items need, growing outwards until the row is full, then wrapping. Type is smaller. */
.cs { --bg: #FFFFFF; --band: #F6F5F0; --tile: #F4F3EE; --tile-2: color-mix(in srgb, var(--glow, #8C6A3A) 10%, #F6F5F0); --page: 72rem; --text: 40rem; }
.cs-title { max-width: 20ch; font-size: clamp(2.3rem, 4.4vw, 3.75rem); line-height: 1; letter-spacing: -.015em; }
.cs-dek { font-size: 1.0625rem; max-width: 34rem; }
.cs-sec > h2 { max-width: 24ch; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.05; letter-spacing: -.01em; }
.cs-sec h3 { font-size: clamp(1.35rem, 2vw, 1.6rem); }
.cs-feature h3 { font-size: clamp(1.6rem, 2.4vw, 2rem); }
.cs-pull p { font-size: clamp(1.6rem, 2.8vw, 2.25rem); line-height: 1.15; }
.cs-next b { font-size: clamp(2.2rem, 4.4vw, 3.75rem); }
.cs-stats b { font-size: clamp(2rem, 3vw, 2.6rem); }
.cs-steps h4 { font-size: 1.3rem; }
.cs-flow h4 { font-size: 1.5rem; }
.cs-people h4 { font-size: 1.25rem; }
.cs-sec > p:not(.cs-num), .cs-lead { font-size: 1rem; }
.cs-lead { font-weight: 400; color: var(--soft) !important; }

/* Reading sections are centred like every other section */
.cs-sec--read > .cs-num { justify-content: center; }
.cs-sec--read > :is(.cs-num, h2, p, h3) { width: auto; max-width: var(--text); text-align: center !important; }
.cs-sec--read > h2 { max-width: 24ch; }

.cs-sec > :is(.cs-scroll, .cs-facts, .cs-note, .cs-check, .cs-list, .cs-flow, .cs-code, .cs-demo, .cs-pair, .cs-split, .cs-feature, .cs-finding, .cs-shotcard, .cs-fig, .cs-strip, .cs-phones) { width: min(100%, 60rem); margin-inline: auto; }
.cs-sec > :is(.cs-facts, .cs-note, .cs-check, .cs-list) { width: min(100%, var(--text)); }
.cs-sec > .cs-scroll { width: min(100%, 52rem); }
.cs-stage { width: min(100%, 60rem); margin-inline: auto; }

/* Goal columns: mark, title and text share one left edge; the row itself is centred */
.cs-card::before { width: 1.2rem; height: 1.2rem; margin-bottom: .9rem; }
.cs-card h3, .cs-card h4 { font-size: 1rem; }
.cs-card .cs-label { letter-spacing: .08em; font-size: .6875rem; color: var(--soft); }

/* Pinned cards: each as tall as its own content, a number, then a tinted bordered panel */
.cs-cards:has(.cs-card--line) { padding-top: 1rem; }
.cs-card--line { padding: 3.25rem 1rem 1rem; border-radius: 1.25rem; box-shadow: 0 0 0 1px rgba(27, 25, 22, .05), 0 1.75rem 2.25rem -1.6rem rgba(30, 28, 20, .38); }
.cs-card--line::before { top: 1rem; width: 1.15rem; height: 1.15rem; margin-left: -.575rem; box-shadow: -.5rem .45rem .5rem -.15rem rgba(40, 30, 20, .45); }
.cs-card--line .cs-label { font-family: var(--mono); letter-spacing: .04em; padding-left: .25rem; }
.cs-card--line h3, .cs-card--line h4 { margin-top: .75rem !important; padding: 1rem 1rem 0; border: 1px solid var(--note-line, #F1E3C8); border-bottom: 0; border-radius: .8rem .8rem 0 0; }
.cs-card--line > p:not(.cs-label) { padding: .5rem 1rem 1.1rem; border: 1px solid var(--note-line, #F1E3C8); border-top: 0; border-radius: 0 0 .8rem .8rem; }
.cs-card--line { --note-bg: #FFFBF1; }
.cs-card--line:nth-child(4n+2) { --note-bg: #F3F8FD; --note-line: #CFE0F0; }
.cs-card--line:nth-child(4n+3) { --note-bg: #FDEFEB; --note-line: #F3CFC6; }
.cs-card--line:nth-child(4n+4) { --note-bg: #FDF4F1; --note-line: #F3DDD5; }

.cs-back, .cs .topnav__pill { background: #F6F5F0; }
.cs-tags span { background: #fff; }
.cs-sec > .cs-mock { margin-inline: auto; }

/* Headings run wider so most sit on two lines */
.cs-sec > h2, .cs-sec--read > h2 { max-width: 40ch; }
.cs-title { max-width: 24ch; }
.cs-back, .cs .topnav__pill { background: #F5F4EF; }

.cs-back, .cs .topnav__pill { background: #FFFFFF; border: 1px solid rgba(11, 11, 11, .07); box-shadow: 0 1px 2px rgba(11, 11, 11, .04), 0 10px 28px -12px rgba(11, 11, 11, .22); }

/* Text runs as wide as the layout allows before it wraps */
.cs { --text: 54rem; }
.cs-dek { max-width: 50rem; }
.cs-sec > h2, .cs-sec--read > h2 { max-width: 46ch; }
.cs-pull p { max-width: 36ch; }
.cs-pull footer, .cs-fig figcaption, .cs-cap, .cs-shotcard figcaption { max-width: none; }
.cs-sec > :is(.cs-facts, .cs-note, .cs-check, .cs-list) { width: min(100%, 52rem); }
.cs-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cs-feature--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* Pills: the same barely-there grey ring as the home page */
.cs-tags { gap: 1rem; }
.cs-tags span { border-radius: 2rem; border-color: rgba(20, 20, 20, .1); box-shadow: 0 0 0 6px rgba(20, 20, 20, .055), 0 8px 14px -8px rgba(20, 20, 20, .22); }
.cs-badge, .cs-chips span { box-shadow: 0 0 0 4px rgba(20, 20, 20, .05); }
.cs-chips { gap: .75rem; }
.cs-seg { gap: .8rem; }
.cs-seg button { box-shadow: 0 0 0 5px rgba(20, 20, 20, .055); }
.cs-back { box-shadow: 0 0 0 6px rgba(20, 20, 20, .05), 0 10px 28px -12px rgba(11, 11, 11, .22); }

/* ================= One grid =================
   Every block in a section shares one width and one pair of edges. Rows are real grids with equal
   columns, so cards in a row are the same height, their titles, text and rules sit on shared lines,
   and nothing is left centred on its own under a fuller row. */
.cs { --wide: 60rem; --inset: max(var(--pad), calc((100vw - var(--wide)) / 2)); --block: clamp(2.25rem, 4.5vw, 3.5rem); }
.cs-sec + .cs-sec::before { left: var(--inset); right: var(--inset); }
.cs-sec > :is(.cs-scroll, .cs-facts, .cs-note, .cs-check, .cs-list, .cs-cards, .cs-steps, .cs-stats, .cs-people, .cs-flow, .cs-code, .cs-demo, .cs-pair, .cs-split, .cs-feature, .cs-finding, .cs-shotcard, .cs-fig, .cs-strip, .cs-phones, .cs-cap) { width: min(100%, var(--wide)); max-width: none; margin-inline: auto; }

/* Vertical rhythm: one gap around blocks, a smaller one between a heading and what it introduces */
.cs-sec > h2 ~ :not(p):not(h3) { margin-top: var(--block); }
.cs-sec > :not(p):not(h2):not(h3) + p:not(.cs-cap) { margin-top: clamp(1.75rem, 3vw, 2.25rem); }
.cs-sec > h3 + :not(p) { margin-top: clamp(1.5rem, 2.5vw, 2rem); }
.cs-sec > h3 + p { margin-top: .9rem; }
.cs-sec > .cs-steps + * { margin-top: calc(var(--block) + 1rem); }
.cs .cs-sec > p.cs-cap { width: min(100%, var(--wide)); max-width: none; margin-top: .85rem; text-align: left !important; font-size: .875rem; }
.cs-pull footer { margin-inline: auto; }

/* Hero facts: one ruled strip, flush with the edges of the panel below it */
.cs-meta { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, auto); justify-content: space-between; gap: 1rem clamp(1.25rem, 3vw, 2.5rem); width: min(100%, var(--wide)); margin-inline: auto; padding: 1.1rem 0; border-block: 1px solid var(--rule); }
.cs-meta dd { text-wrap: balance; }
.cs-stage { margin-top: clamp(2rem, 4vw, 3rem); }

/* Numbers */
.cs-stats { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 0; align-items: stretch; }
.cs-stats:has(> :nth-child(4)) { --n: 4; }
.cs-stats:not(:has(> :nth-child(3))) { --n: 2; }
.cs-stats > div, .cs-stats > div:first-child { padding: .25rem clamp(1rem, 2vw, 1.75rem); }
.cs-stats > div:first-child { padding-left: 0; }
.cs-sec--outcome .cs-stats { gap: var(--gap); }
.cs-sec--outcome .cs-stats > div, .cs-sec--outcome .cs-stats > div:first-child { padding: 1.6rem 1.5rem 1.7rem; }

/* Cards: three across, or two where the row is marked as a pair. Each card borrows the row's
   lines, so marks, labels, titles, text and the ruled last line match across the row. */
.cs-cards { --rows: clamp(2rem, 3.5vw, 2.75rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gap); align-items: stretch; }
.cs-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-cards > .cs-card:not(.cs-card--line) { display: grid; grid-template-rows: subgrid; grid-row: span 5; align-content: start; padding-right: clamp(.5rem, 2vw, 1.5rem); }
.cs-cards > .cs-card:not(.cs-card--line)::before { grid-row: 1; }
.cs-cards > .cs-card:not(.cs-card--line) > .cs-label { grid-row: 2; margin: 0; }
.cs-cards > .cs-card:not(.cs-card--line) > :is(h3, h4) { grid-row: 3; }
.cs-cards > .cs-card:not(.cs-card--line) > p:not(.cs-label):not(.cs-then) { grid-row: 4; margin-top: .55rem; }
.cs-cards > .cs-card:not(.cs-card--line) > .cs-then { grid-row: 5; margin-top: .9rem; padding-top: .9rem; }
.cs-cards > .cs-card:not(.cs-card--line) > .cs-label + :is(h3, h4) { margin-top: .3rem !important; }
.cs-cards:not(.cs-cards--2) > .cs-card:not(.cs-card--line):nth-child(n+4), .cs-cards--2 > .cs-card:not(.cs-card--line):nth-child(n+3) { padding-top: var(--rows); }
/* Glass cards in the outcome band keep their own box; the row still stretches them to one height */
.cs-sec--outcome .cs-cards { --rows: 1.6rem; row-gap: var(--gap); }
.cs-sec--outcome .cs-cards > .cs-card:not(.cs-card--line) { display: block; grid-row: auto; padding: 1.6rem 1.5rem 1.7rem; }
.cs-sec--outcome .cs-cards > .cs-card > p:not(.cs-label) { margin-top: .7rem; }

/* Pinned cards: the same height across a row, with the tinted panel filling each card */
.cs-cards:has(.cs-card--line) { gap: var(--gap); }
.cs-card--line { display: flex; flex-direction: column; }
.cs-card--line > * + * { margin-top: 0; }
.cs-card--line > p:last-child { flex: 1; }
.cs-card--line > .cs-label + p { margin-top: .75rem; padding-top: 1rem; border: 1px solid var(--note-line, #F1E3C8); border-radius: .8rem; }
.cs-card--line > :is(h3, h4):first-child { margin-top: 0 !important; }
.cs-card--line:nth-child(4n+1) { --note-bg: #FFFBF1; --note-line: #F1E3C8; }

/* Sticky notes and people: equal columns, equal heights */
.cs-steps { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
.cs-steps:has(> :nth-child(4)) { --n: 4; }
.cs-people { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }

/* Side-by-side figures: both tiles are the same shape, whatever the artwork inside */
.cs-pair { align-items: stretch; }
.cs-pair > .cs-fig > :is(button, img), .cs-pair > .cs-shotcard .cs-tile { aspect-ratio: 3 / 2; }
.cs-pair > .cs-fig > button { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; overflow: hidden; }
.cs-pair > .cs-fig > button img { min-height: 0; max-height: 100%; object-fit: contain; }
.cs-pair > .cs-fig > img { height: auto; object-fit: contain; }
.cs-pair > .cs-shotcard .cs-tile { overflow: hidden; }

/* Lists: two ruled columns in place of one short column under a centred heading */
.cs-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 4vw, 3rem); text-align: left; border-bottom: 1px solid var(--rule); }
.cs-list li, .cs-list li + li { margin: 0; padding: .9rem 0 .9rem 1.4rem; border-top: 1px solid var(--rule); font-size: 1rem; }
.cs-list li::before { top: 1.5rem; }
.cs-facts dd, .cs-check li { font-size: 1rem; }
.cs-facts div { grid-template-columns: 13rem minmax(0, 1fr); }

.cs-next b { max-width: 22ch; text-wrap: balance; }

@media (max-width: 61.99rem) {
  .cs-cards:not(.cs-cards--2) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-cards:not(.cs-cards--2) > .cs-card:not(.cs-card--line):nth-child(3) { padding-top: var(--rows); }
  .cs-steps:has(> :nth-child(4)) { --n: 2; }
  .cs-people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 47.99rem) {
  .cs-cards:not(.cs-cards--2), .cs-list { grid-template-columns: minmax(0, 1fr); }
  .cs-cards > .cs-card:not(.cs-card--line):nth-child(n+2) { padding-top: var(--rows); }
  .cs-sec--outcome .cs-cards > .cs-card:not(.cs-card--line):nth-child(n+2) { padding-top: 1.6rem; }
  .cs-meta { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
  .cs-stats, .cs-stats:has(> :nth-child(4)) { --n: 2; row-gap: 1.5rem; }
  .cs-stats > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .cs-sec--outcome .cs-stats > div:nth-child(odd) { padding-left: 1.5rem; }
  .cs-steps, .cs-steps:has(> :nth-child(4)) { --n: 1; }
  .cs-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-facts div { grid-template-columns: 1fr; }
}

/* ================= Explore more work =================
   Closes every case study: the next three projects as the same cards the home page uses,
   then one way back to the full list. */
.cs-more { position: relative; padding: clamp(4.5rem, 9vw, 8rem) var(--edge) clamp(3rem, 6vw, 5rem); text-align: center; }
.cs-more::before { content: ""; position: absolute; left: var(--edge); right: var(--edge); top: 0; height: 1px; background: var(--rule); }
.cs-more::after { content: ""; position: absolute; left: 50%; top: -3px; width: 7px; height: 7px; margin-left: -3px; background: var(--red); transform: rotate(45deg); }
.cs-more > .cs-num { display: flex; justify-content: center; align-items: center; gap: .6rem; margin: 0; }
.cs-more > h2 { margin-top: .9rem; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.05; letter-spacing: -.01em; }
.cs-more__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3rem) var(--gap); margin-top: var(--block); }
.cs-more .case__title { margin-top: 1.1rem; font-size: clamp(1.4rem, 1.9vw, 1.7rem); }
.cs-more .case__desc { font-size: .9375rem; line-height: 1.5; }
.cs-more .case__tags { gap: .75rem; row-gap: .7rem; }
.cs-more .case__sheet--audit { grid-template-columns: 1fr; gap: .75rem; }
.cs-more .case__sheet--audit p { flex-direction: row; align-items: baseline; gap: .6rem; }
.cs-more .case__sheet--audit b { font-size: 2.5rem; }
.cs-more .case__sheet--audit ul { font-size: .75rem; }
.cs-more .case__sheet--split { font-size: clamp(2.5rem, 4.5vw, 4rem); }
.cs-more__all { margin-top: var(--block); }
.cs-more__all a { display: inline-flex; align-items: center; gap: .6em; min-height: 48px; padding: 0 1.6rem; border-radius: 2rem; background: var(--ink); color: #fff; font-weight: 500; font-size: .9375rem; text-decoration: none; box-shadow: 0 0 0 6px rgba(20, 20, 20, .07), 0 14px 28px -14px rgba(11, 11, 11, .5); transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s; }
.cs-more__all a i { font-style: normal; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.cs-more__all a:hover { transform: translateY(-2px); box-shadow: 0 0 0 8px rgba(20, 20, 20, .07), 0 18px 30px -14px rgba(11, 11, 11, .55); }
.cs-more__all a:hover i { transform: translateX(.3em); }
.cs-more__all a:active { transform: scale(.97); }
.cs-end { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 2rem; margin: 0 var(--edge); padding: 1.5rem 0 clamp(6.5rem, 10vw, 8rem); border-top: 1px solid var(--rule); font-size: .875rem; color: var(--soft); }
.cs-end ul { display: flex; gap: 1.75rem; }
.cs-end a { color: var(--ink); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s cubic-bezier(.16, 1, .3, 1); }
.cs-end a:hover, .cs-end a:focus-visible { background-size: 100% 1px; }
@media (max-width: 61.99rem) {
  .cs-more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-more__grid > :nth-child(3) { display: none; }
}
@media (max-width: 39.99rem) {
  .cs-more__grid { grid-template-columns: minmax(0, 1fr); }
  .cs-more__grid > :nth-child(3) { display: flex; }
  .cs-end { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .cs-more__all a, .cs-more__all a i { transition: none; } }

/* Same chrome arrow cursor as the home page */
html { cursor: url("assets/cursor.png?s=18") 1 1, auto; cursor: -webkit-image-set(url("assets/cursor.png?s=18") 1x, url("assets/cursor@2x.png?s=18") 2x) 1 1, auto; cursor: image-set(url("assets/cursor.png?s=18") 1x, url("assets/cursor@2x.png?s=18") 2x) 1 1, auto; }