/* The case study pages in the brand's dots (spec docs/specs/2026-11-03-case-studies-dots.md; Rafael
   approved the mockup on 2026-11-03: Telemyr Ads folder, Case studies/Mockup, css/case.css), on the
   site's own styles (styles.css and assets/services/reels.css). Type stays in the shared roles; this
   file only places, sizes and colours. Black and white, one hairline grey, the marks' dots; colour
   only in the confetti. No shadows. Capeesh moved into the dots on 2026-11-08 (spec
   docs/specs/2026-11-08-capeesh-dots.md); the old page's styles (../case-study.css) are unused. */
.cx-page { background: var(--color-white); color: var(--page-ink); }
.cx { --svc-muted: color-mix(in srgb, var(--color-black) 63.92157%, var(--color-white)); --cx-wide: 72rem;
  padding: calc(var(--nav-top-space, 0px) + clamp(3rem, 7vw, 6.5rem)) var(--page-gutter) clamp(7rem, 13vw, 11rem); }
.cx-muted { color: var(--svc-muted); }
.cx-center { text-align: center; }

/* ---- the head: the client's logo, the facts, the title, and the services we did as their own dots */
.cx-head { position: relative; display: grid; justify-items: center; text-align: center; gap: clamp(1rem, 2vw, 1.5rem); touch-action: pan-y pinch-zoom; }
.cx-head-ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cx-head > :not(canvas) { position: relative; }
.cx-client { display: block; width: auto; height: clamp(1.7rem, 2.6vw, 2.4rem); }
.cx-client.is-tall { height: clamp(4.2rem, 6.5vw, 6rem); }
.cx-facts { margin: 0; color: var(--color-text-grey); }
.cx-title { max-width: 16ch; text-wrap: balance; }
.cx-deck { max-width: 38ch; text-wrap: pretty; }
.cx-services { list-style: none; margin: clamp(1rem, 3vw, 2.5rem) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem clamp(1.5rem, 6vw, 6rem); }
.cx-services li { display: grid; justify-items: center; gap: .35rem; }
.cx-svc-spot { display: block; width: clamp(5.4rem, 12vw, 10rem); aspect-ratio: 1.45; }
@media (max-width: 600px) { .cx-services { gap: .5rem 1rem; flex-wrap: nowrap; } .cx-services li { min-width: 0; } .cx-services .text-small { white-space: nowrap; } }
/* four services (Capeesh's) go two by two on phones, where four in a row do not fit */
@media (max-width: 600px) { .cx-services:has(> li:nth-child(4)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; } }

/* ---- the film, on the site's film player (assets/services/svc-film.js) with the reels' controls
   (reels.css): the wide film on every screen, inside the page's gutter */
.cx-film { width: min(100%, var(--cx-wide)); margin: clamp(3rem, 7vw, 6rem) auto 0; }
.cx-film .reel-viewport { border: var(--rule); }
/* a moment of the work, live: the film's own card, drawn on the page (moment.js) */
.cx-live { width: min(100%, 68rem); margin: clamp(2.5rem, 5vw, 4rem) auto 0; }
.cx-live canvas { display: block; width: 100%; height: auto; }
.cx-caption { margin: .9rem auto 0; width: min(100%, var(--cx-wide)); color: var(--color-text-grey); }

/* ---- sections and their centred heads, as the site's services */
.cx-section { padding-top: clamp(6rem, 12vw, 11rem); }
.cx-sub { display: grid; justify-items: center; gap: clamp(1rem, 2vw, 1.5rem); text-align: center; }
.cx-sub h2 { max-width: 18ch; text-wrap: balance; }
.cx-sub p { max-width: 46ch; text-wrap: pretty; }

/* The problems: one row each, its own dots on the left; the whole row goes black under the pointer,
   rule to rule, the words and the dots turning white, as the services list does. */
.cx-rows { list-style: none; max-width: var(--cx-wide); margin: clamp(2.5rem, 5vw, 4.5rem) auto 0; padding: 0; border-bottom: var(--rule); }
.cx-row { --inset: clamp(.75rem, 1.6vw, 1.25rem); display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1fr); gap: .5rem clamp(1rem, 3vw, 3rem); align-items: center; padding: clamp(1rem, 2vw, 1.4rem) 0; border-top: var(--rule); transition: background-color .2s ease, border-color .2s ease, color .2s ease; outline: none; }
.cx-row-mark { position: relative; display: block; width: 5.5rem; height: 3.8rem; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.cx-row-mark canvas { position: absolute; inset: 0; width: 100%; height: 100%; transition: filter .2s ease; }
.cx-row-q { margin: 0; text-wrap: balance; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.cx-row-a { color: var(--svc-muted); text-wrap: pretty; transition: color .2s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) {
  .cx-row:hover { background: var(--color-black); border-top-color: var(--color-black); color: var(--color-white); }
  .cx-row:hover .cx-row-a { color: var(--color-white); }
  .cx-row:hover .cx-row-mark canvas { filter: invert(1); }
  .cx-row:hover :is(.cx-row-mark, .cx-row-q) { transform: translateX(var(--inset)); }
  .cx-row:hover .cx-row-a { transform: translateX(calc(var(--inset) * -1)); }
}
/* reached with the keyboard: black, as under the pointer, with a white ring inside it */
.cx-row:focus-visible { background: var(--color-black); color: var(--color-white); outline: 2px solid var(--color-white); outline-offset: -5px; }
.cx-row:focus-visible .cx-row-a { color: var(--color-white); }
.cx-row:focus-visible .cx-row-mark canvas { filter: invert(1); }
@media (max-width: 700px) {
  .cx-row { grid-template-columns: 4.25rem minmax(0, 1fr); align-items: start; }
  .cx-row-mark { width: 4.25rem; height: 2.8rem; }
  .cx-row-a { grid-column: 2; }
}

/* The client's words: a plain black opening quote over them, the brand face's own (qmark.js: it
   breaks into dots under the pointer, they fall onto the first line, then it fills back in), the
   key line in full black, the rest in the paragraph grey; confetti from the key line, drawn under
   the words. */
.cx-words { position: relative; }
.cx-party { position: absolute; left: calc(var(--page-gutter) * -1); right: calc(var(--page-gutter) * -1); top: 0; bottom: -18rem; width: calc(100% + var(--page-gutter) * 2); height: calc(100% + 18rem); pointer-events: none; z-index: 0; }
.cx-quotes { position: relative; z-index: 1; max-width: 62rem; margin: 0 auto; }
.cx-quotes.is-two { max-width: var(--cx-wide); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 6vw, 6rem); }
.cx-quote { position: relative; margin: 0; display: grid; justify-items: start; align-content: start; gap: clamp(1.25rem, 2.5vw, 2rem); }
.cx-qmark { position: relative; width: clamp(2.6rem, 5.4vw, 4.85rem); aspect-ratio: 1.14; touch-action: pan-y pinch-zoom; }
.cx-quotes.is-two .cx-qmark { width: clamp(2.6rem, 4.2vw, 4rem); }
/* the quote's canvas: placed by the script over the mark and down to the first line of the words */
.cx-qmark-ink { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2; pointer-events: none; }
.cx-quote blockquote { margin: 0; }
.cx-quote blockquote p { max-width: 26ch; text-wrap: pretty; }
.cx-quotes.is-two blockquote p { max-width: 34ch; }
.cx-key { color: var(--color-black); }
.cx-quote figcaption { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
@media (max-width: 900px) { .cx-quotes.is-two { grid-template-columns: minmax(0, 1fr); } }

/* The apps: the services list's rows, with a box that peeks at the app under the pointer; then each
   app under its own dots, its screen opening out of a dot. */
.cx-apps { position: relative; }
.cx-index { position: relative; }
.cx-peek { position: absolute; left: 0; top: 0; z-index: 3; width: min(26rem, 34vw); aspect-ratio: 2400 / 1278; border-radius: clamp(.5rem, 1vw, .9rem); overflow: hidden; border: var(--rule); background: var(--color-white); pointer-events: none; opacity: 0; scale: .92; transition: opacity .2s ease, scale .35s cubic-bezier(.2, .8, .2, 1); }
.cx-peek.is-on { opacity: 1; scale: 1; }
.cx-peek img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.cx-app, .cx-moment { --svc-mark-u: max(1.4rem, var(--type-h2-size, 2.4rem)); --svc-mark-h: calc(var(--svc-mark-u) * 1.7 + 12px); --svc-head-gap: clamp(1.25rem, 2.6vw, 2.25rem); }
.cx-app { padding-top: clamp(5rem, 10vw, 9rem); scroll-margin-top: 1rem; }
.cx-app .svc-item-head h3, .cx-moment .svc-item-head h2 { text-wrap: balance; }
.cx-screen { position: relative; width: min(100%, var(--cx-wide)); margin: clamp(2.5rem, 5vw, 4rem) auto 0; }
.cx-screen-win { position: relative; display: block; border-radius: clamp(.5rem, 1.1vw, 1rem); overflow: hidden; }
.cx-screen img { display: block; width: 100%; height: auto; }
.cx-screen-ink { position: absolute; inset: 0; background: var(--color-black); opacity: 0; pointer-events: none; }
.cx-screen.is-shut .cx-screen-win { clip-path: inset(50% 50% round 0); }
.cx-screen.is-shut .cx-screen-ink { opacity: 1; }
.cx-app .svc-features { max-width: var(--cx-wide); margin-inline: auto; }
.cx-app .svc-features h4 { margin: 0; }

/* The client's systems on the site's data map, with a card per system under it. */
.cx-map { width: 100%; max-width: calc(90svh * 1920 / 1030); margin: 0 auto; }
@media (max-width: 700px) { .cx-map { max-width: 30rem; } }
.cx-sources { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: var(--cx-wide); margin-inline: auto; }
.cx-sources li { transition: border-color .2s ease; }
.cx-sources li.is-on { border-top-color: var(--color-black); }
@media (max-width: 900px) { .cx-sources { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* One live moment of the work, drawn by the films' own engine (.cx-live, above). */
.cx-moment > .svc-item-head { padding-top: 0; }

/* Capeesh's results: three figures side by side across the width, each under its own rule and in the
   middle of it, counting up as it comes into view (page.js), its line under it in the paragraph grey;
   on tablets and phones two by two, the last alone across both (Rafael, 2026-11-09: "remove the 28%
   and space the three left to move to the middle"; there were four). */
.cx-figures { list-style: none; max-width: var(--cx-wide); margin: clamp(2.5rem, 5vw, 4.5rem) auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem clamp(1rem, 3vw, 3rem); }
.cx-figures li { display: grid; align-content: start; justify-items: center; gap: .75rem; padding-top: clamp(1rem, 2vw, 1.4rem); border-top: var(--rule); text-align: center; }
.cx-fig { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cx-fig-line { color: var(--svc-muted); text-wrap: pretty; }
.cx-results .cx-caption { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
@media (max-width: 900px) {
  .cx-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-figures li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Capeesh's markets, under its world of dots: the forty names, largest first, in columns, grey; the
   one pointed at (or tapped) black as it swells on the world (page.js, moment.js). */
.cx-markets { list-style: none; max-width: var(--cx-wide); margin: clamp(2.5rem, 5vw, 4rem) auto 0; padding: clamp(1rem, 2vw, 1.4rem) 0 0; border-top: var(--rule); columns: 4; column-gap: clamp(1rem, 3vw, 3rem); }
.cx-markets li { break-inside: avoid; padding: .15rem 0; color: var(--svc-muted); transition: color .2s ease; -webkit-tap-highlight-color: transparent; }
.cx-markets li.is-on { color: var(--page-ink); }
@media (max-width: 900px) { .cx-markets { columns: 2; } }
/* on phones the world alone, as each service is only its film there: the list is too long for them */
@media (max-width: 700px) { .cx-markets { display: none; } }

/* The next case study: its photo in a plain rounded square (the site's case study cards: the same
   corners, the same slow zoom under the pointer), its name and line. */
.cx-next { max-width: var(--cx-wide); margin: 0 auto; }
.cx-next-k { margin: 0 0 1.25rem; padding-bottom: .9rem; border-bottom: var(--rule); color: var(--color-text-grey); }
.cx-next-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: center; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.cx-next-photo { position: relative; display: block; aspect-ratio: 1; max-width: 100%; overflow: hidden; isolation: isolate; border-radius: clamp(.75rem, 1.6vw, 1.5rem); background: var(--color-light-grey); }
.cx-next-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms cubic-bezier(.22, 1, .36, 1); }
.cx-next-copy { display: grid; justify-items: start; gap: clamp(.75rem, 1.5vw, 1.1rem); }
.cx-next-logo { display: block; height: clamp(1.5rem, 2.2vw, 2rem); width: auto; }
.cx-next-logo.is-tall { height: clamp(3.5rem, 5vw, 4.5rem); }
.cx-next-title { max-width: 14ch; text-wrap: balance; }
@media (hover: hover) { .cx-next-card:hover .cs-arrow { transform: translateX(.4em); } .cx-next-card:hover .cx-next-photo img { transform: scale(1.03); } }
.cx-next-card:focus-visible { outline: 2px solid var(--color-black); outline-offset: 6px; border-radius: 1rem; }
@media (max-width: 760px) { .cx-next-card { grid-template-columns: minmax(0, 1fr); } .cx-next-photo { width: min(100%, 22rem); } }

@media (prefers-reduced-motion: reduce) {
  .cx-row, .cx-row-mark, .cx-row-q, .cx-row-a, .cx-peek, .cx-next-photo img, .cx-markets li { transition: none; }
}