/* ==========================================================================
   Case study template — "Snap Chapters"
   Shared by every page in /work. Pages supply content only; layout, type
   voices, media treatments and motion live here + case-study.js.
   Design reference: design/shopify/README.md (1440×900).
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --bg:#0B0E14;--panel:#161B26;--ink:#EDE6D6;--body:#C9C3B5;--muted:#9AA1AE;--rule:#262B36;--accent:#F2B84B;
  --ease:cubic-bezier(.2,.8,.2,1);
  --sans:'Archivo',sans-serif;--display:'Syne',sans-serif;--mono:'Space Mono',monospace;--serif:'Instrument Serif',serif;
  /* --k: 1 design pixel. Every size is authored at 1440 and scales down linearly. */
  --k:min(1px,100vw / 1440);
  --gutter:max(20px,calc(40 * var(--k)));
  --header-h:54px;
  --media-w:min(640px,44.5%);
}
@media (max-width:1099px){:root{--k:clamp(.4px,100vw / 1000,.7px)}}

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans)}
a{color:var(--accent)}a:hover{color:var(--ink)}
.mono,.cs-header,.eyebrow,.cs-meta,.cs-counter,.cs-chip,.cs-fig-label{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em}
@media (min-width:1100px) and (prefers-reduced-motion:no-preference){html.cs-page{scroll-snap-type:y mandatory}}
/* stacked (phones/tablets): snap section by section too — title, each chapter, footer. Most stacked chapters are taller than the
   screen, so case-study.js gives any section taller than the viewport a second stop at its bottom (.cs-snap-end.on); with a stop at
   each end, nothing in between is ever out of reach. */
@media (max-width:1099px) and (prefers-reduced-motion:no-preference){html.cs-page{scroll-snap-type:y mandatory}.cs-story .chapter{scroll-snap-align:start}}
.cs-title,.cs-story .chapter{position:relative}
.cs-snap-end{position:absolute;left:0;bottom:0;width:1px;height:1px;pointer-events:none}
.cs-snap-end.on{scroll-snap-align:end}

/* ---------- header ---------- */
.cs-header{position:sticky;top:0;z-index:3;height:var(--header-h);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);mix-blend-mode:difference;color:var(--ink)}
.cs-header a{color:inherit;text-decoration:none}
/* slides away on scroll-down, back on scroll-up (header.js). Once it floats over content (.is-scrolled) it swaps the
   blend mode for a dark scrim, same as the home page; at the very top it stays bare. Mobile keeps the scrim always. */
.cs-header{transition:transform .35s var(--ease)}
.cs-header.nav-hidden{transform:translateY(calc(-100% - 32px))}
.cs-header::before{content:'';position:absolute;inset:0 0 -28px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(11,14,20,.94),rgba(11,14,20,.8) 60%,rgba(11,14,20,0));opacity:0;transition:opacity .3s}
.cs-header.is-scrolled{mix-blend-mode:normal}
.cs-header.is-scrolled::before{opacity:1}
@media (min-width:1100px){.cs-header::before{right:var(--media-w)}}   /* desktop: the scrim stops at the media panel (its content is all on the left once scrolled), so a white panel stays clean */
@media (max-width:640px){
  .cs-header{mix-blend-mode:normal}
  .cs-header::before{opacity:1}
}

/* ---------- title ---------- */
.cs-title{min-height:100vh;margin-top:calc(-1 * var(--header-h));padding:max(96px,calc(120 * var(--k))) var(--gutter) var(--gutter);display:flex;flex-direction:column;justify-content:space-between;gap:48px;scroll-snap-align:start}
.cs-name{margin:0;font-weight:900;font-size:min(calc(176 * var(--k)),calc(var(--name-vw,15) * 1vw));line-height:.8;letter-spacing:-.05em;font-variation-settings:'wdth' 118;text-transform:uppercase}
.cs-subtitle{margin:16px 0 0;font-family:var(--serif);font-style:italic;font-weight:400;font-size:max(30px,calc(72 * var(--k)));line-height:1;color:var(--accent)}
.cs-year{margin:20px 0 0;font-family:var(--mono);font-size:13px;letter-spacing:.12em;color:var(--muted)}   /* the year, under the subtitle */
.cs-intro-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,calc(380 * var(--k)));gap:calc(80 * var(--k));align-items:end}
.cs-intro{margin:0;max-width:880px;font-size:max(22px,calc(40 * var(--k)));line-height:1.1;letter-spacing:-.025em;font-weight:500;text-wrap:pretty}
.cs-intro b{font-weight:900;font-variation-settings:'wdth' 125}
.cs-intro em{font-family:var(--serif);font-weight:400;font-size:1.15em;color:var(--accent)}
.cs-meta{display:grid;gap:20px;margin:0;line-height:1.9}
.cs-meta dt{color:var(--muted)}
.cs-meta dd{margin:0}

/* ---------- chapters ---------- */
.cs-chapters{border-top:1px solid var(--rule)}
.cs-story{position:relative;overflow:clip}
.chapter{padding:min(120px,13vh) calc(60 * var(--k)) min(120px,13vh) var(--gutter);border-bottom:1px solid var(--rule);display:flex;flex-direction:column;justify-content:center}
.chapter:last-child{border-bottom:0}
.eyebrow{margin:0 0 24px;letter-spacing:.14em;color:var(--accent)}
.chapter-body{margin:40px 0 0 auto;width:max(300px,calc(380 * var(--k)));max-width:100%;font-size:15px;line-height:1.55;color:var(--body);text-wrap:pretty}
.chapter-body+.chapter-body{margin-top:1em}   /* a second paragraph */

/* callout voices — alternate so no two adjacent chapters match.
   Override the design-px size per chapter with style="--size:92". */
.callout{margin:0;font-size:calc(var(--size) * var(--k))}
.callout em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent);font-variation-settings:normal}
.num{font-family:var(--sans);font-variation-settings:'wdth' 108;letter-spacing:-.03em}   /* numbers are only slightly expanded: the widest cuts are hard to read */
.voice-wide{--size:88;font-weight:900;font-variation-settings:'wdth' 125;line-height:.85;letter-spacing:-.05em}
.voice-condensed{--size:104;font-weight:300;font-variation-settings:'wdth' 62;line-height:.86;letter-spacing:-.04em}
.voice-syne{--size:128;font-family:var(--display);font-weight:800;line-height:.86;letter-spacing:-.05em}
.voice-serif{--size:104;font-family:var(--serif);font-style:italic;font-weight:400;line-height:.9}
.callout.caps{text-transform:uppercase}
/* single-sentence chapter */
.statement{margin:0;max-width:640px;font-size:max(24px,calc(44 * var(--k)));line-height:1.1;font-weight:500;letter-spacing:-.025em;text-wrap:pretty}
.statement em{font-family:var(--serif);font-weight:400;color:var(--accent)}

/* ---------- media: data-fx="fit" (framed, centred) | "bleed" (fills) ---------- */
.media{margin:40px 0 0}
.media>*{display:block;width:100%;background:var(--panel)}
.media[data-fx=fit]>*{box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(237,230,214,.08)}
/* several items in one fit figure stack vertically */
.media[data-fx=fit]{display:grid;gap:16px;justify-items:center}
.media[data-fx=bleed]>*{aspect-ratio:4/3;object-fit:cover}
/* class="cs-layer" in a bleed figure: a photo fills the frame (cropped as needed) and a transparent UI capture sits whole and centred on top */
.media>.cs-layer{display:grid;place-items:center;background-position:center;background-size:cover;background-repeat:no-repeat}
.cs-layer>img{display:block;width:auto;height:auto;max-width:96%;max-height:96%}
.cs-layer>img.browser{max-width:86%;max-height:80%;border-radius:12px;box-shadow:0 28px 70px rgba(0,0,0,.4),0 8px 20px rgba(0,0,0,.2)}   /* a flat capture in browser chrome, floating over the photo */
/* data-fx="phone": portrait device captures (video or img), one to three side by side. Width is
   capped by viewport height so a phone never overflows; set --ar (w/h) per item. */
.media[data-fx=phone]{display:flex;justify-content:center;align-items:center;gap:16px}
.media[data-fx=phone]>*{--ar:9/19.5;flex:0 1 auto;min-width:0;width:min(300px,calc((100vh - 220px) * var(--ar)));aspect-ratio:var(--ar);object-fit:cover;box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(237,230,214,.08)}
.media[data-fx=phone]>:not(:only-child){max-width:calc(50% - 8px)}
/* UI captures (fit + phone, images and videos) get 16px corners. class="device": a raw phone screen recording gets a generic black
   iPhone bezel (content-box, so the screen keeps its --ar); captures with a device frame baked in go without. */
.media[data-fx=fit]>*,.media[data-fx=phone]>*,.cs-poster img,.lb-item{border-radius:16px}
.media>.device{box-sizing:content-box;border:9px solid #050506;border-radius:46px;background:#000;box-shadow:0 0 0 1.5px #3a3e46,0 30px 70px rgba(0,0,0,.55)}
/* class="browser": a desktop UI capture gets generic browser chrome, sized to the capture's scale (it shows at ~⅓ of its resolution) — a warm grey bar with traffic lights and an address pill, painted
   into the image's top padding (an <img> can't take pseudo-elements) */
.media>.browser,.cs-layer>.browser{padding-top:18px;background:
  radial-gradient(circle at 11px 9px,#FF5F57 0 3px,transparent 3.5px),radial-gradient(circle at 21px 9px,#FEBC2E 0 3px,transparent 3.5px),
  radial-gradient(circle at 31px 9px,#28C840 0 3px,transparent 3.5px),
  radial-gradient(circle at 34% 9px,#F7F5F0 0 4.5px,transparent 5px),radial-gradient(circle at 66% 9px,#F7F5F0 0 4.5px,transparent 5px),
  linear-gradient(#F7F5F0,#F7F5F0) 50% 4.5px/32% 9px no-repeat,#E4E1DA}
/* live-text stats inside a fit figure (not an image): no card, shadow or height cap */
.media>.cs-stats{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;row-gap:14px;align-items:baseline;
  width:auto;max-width:min(560px,100%);max-height:none!important;background:none;box-shadow:none;border-radius:0}
.cs-stats>div{display:contents}
.cs-stats dt{font-family:var(--sans);font-weight:800;font-variation-settings:'wdth' 108;font-size:calc(40 * var(--k));letter-spacing:-.03em;line-height:1;color:var(--accent);text-align:right;white-space:nowrap}
.cs-stats dd{margin:0;font-size:15px;line-height:1.35;color:var(--body)}
@media (max-width:1099px){.cs-stats dt{font-size:28px}}
/* .cs-modules: a fit figure of titled captures — each .cs-mod (title + metrics, live text) precedes its img. Stacked on
   phones; desktop sets them in rows beside their capture. Dark page on phones, white panel on desktop, so colours differ. */
.media>.cs-mod{width:auto;justify-self:start;background:none;box-shadow:none;border-radius:0;max-height:none!important}
.media.cs-modules>.cs-mod:not(:first-child){margin-top:24px}
.cs-mod p{margin:0}
.cs-mod-t{font-weight:600;font-size:15px;line-height:1.3;color:var(--ink)}
.cs-mod-m{margin-top:6px!important;font-size:14px;line-height:1.3;color:#81C995}
.cs-mod-m b{font-weight:800;font-variation-settings:'wdth' 108;font-size:26px;letter-spacing:-.02em;margin-right:4px}
.cs-mod-m span{display:inline-block;white-space:nowrap}   /* a label never breaks mid-phrase: it drops whole to the next line */
/* .cs-results: headline outcomes as live type, the .cs-mod metric style scaled up: number above its line */
.media>.cs-results{margin:0;display:grid;gap:max(28px,calc(40 * var(--k)));width:auto;max-width:min(560px,100%);max-height:none!important;background:none;box-shadow:none;border-radius:0}
.cs-results>div{display:grid;gap:10px;align-content:start}   /* side-by-side callouts: captions start on one line even when one wraps */
.cs-results dt{font-weight:900;font-size:max(64px,calc(104 * var(--k)));line-height:.9;color:var(--res-m,#81C995)}   /* --res-m / --res-d: the number colour on the dark page / white panel */
.cs-results dd{margin:0;font-size:15px;line-height:1.4;color:var(--muted)}   /* captions: a step smaller and grey, so the number leads */
.cs-results-row{grid-auto-flow:column;justify-content:start;column-gap:48px}   /* a row of short callouts */
.cs-results-row dt{font-size:max(48px,calc(80 * var(--k)))}
/* .cs-logos: partner marks in a white card (reads on the dark page too); not an image, so no lightbox */
.media>.cs-logos{display:flex;align-items:center;justify-content:center;gap:48px;width:auto;padding:24px 36px;background:#fff;box-shadow:none;border-radius:16px}
.cs-logos img{display:block;height:calc(var(--lh,36px) * var(--ls,1));width:auto}   /* --lh on an img: its height; --ls scales the row (phones) */
@media (max-width:1099px){.media>.cs-logos{--ls:.8;gap:16px 28px;flex-wrap:wrap;padding:20px 16px;min-width:0}}   /* phones: smaller marks, never wider than the card (they stack on the narrowest screens) */
/* data-bg="white": the capture sits on white, so the pinned panel turns white behind it (desktop) and it drops the shadow */
.cs-media{transition:background-color .6s}
.cs-media:has(.media.is-active[data-bg=white]){background:#fff}
.cs-media .media[data-bg=white]>*{box-shadow:none}
/* magnifier: opens the figure in the lightbox (the media itself stays clickable). Desktop: bottom-right of the pinned panel, shown
   with its figure; stacked: bottom-right of each figure. */
.cs-fig{min-width:0}
.cs-zoom{all:unset;box-sizing:border-box;position:absolute;right:16px;bottom:16px;z-index:1;width:40px;height:40px;display:grid;place-items:center;color:#80858F;cursor:pointer;transition:color .2s,opacity .4s}
.cs-zoom:hover{color:var(--accent)}
.cs-zoom:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:50%}
.cs-zoom svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cs-media .cs-zoom{opacity:0;pointer-events:none}
.cs-media .cs-fig:has(>.media.is-active) .cs-zoom{opacity:1;pointer-events:auto}
@media (max-width:1099px){.cs-fig{position:relative}.cs-zoom{top:100%;bottom:auto;right:-8px;margin-top:4px}}
/* figure label, stacked: the desktop chip's twin, under the figure's bottom-left corner, level with the magnifier on the right */
.cs-fig-label{display:none}
@media (max-width:1099px){.cs-fig-label{display:block;position:absolute;left:0;top:100%;margin-top:8px;max-width:calc(100% - 52px);background:var(--bg);color:var(--ink);padding:8px 12px;border:1px solid var(--rule);line-height:1.3}}   /* stacked: no panel, so it sits just under the figure's bottom-right instead of over the capture */
/* reading progress: a gold line along the bottom of the screen */
.cs-progress{position:fixed;left:0;right:0;bottom:0;z-index:40;height:3px;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
.stat-card{display:flex!important;align-items:center;justify-content:center;background:var(--ink)!important;color:var(--bg);font-weight:900;font-size:calc(var(--size,220) * var(--k));line-height:.85;text-align:center;letter-spacing:-.03em;font-variation-settings:'wdth' 108}
.stat-card em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent);font-variation-settings:normal}
.stat-duo{flex-direction:column;gap:.35em;font-size:calc(var(--size,150) * var(--k))}   /* two stacked stats, each with a small caption */
.stat-duo>span{display:flex;flex-direction:column;align-items:center;gap:.14em}
.stat-card:has(>small){flex-direction:column;gap:.14em}   /* a single stat with a small caption under it */
.stat-card>small,.stat-duo small{white-space:nowrap;font-family:var(--sans);font-size:max(15px,.15em);font-weight:500;letter-spacing:0;line-height:1.2;font-variation-settings:normal;color:var(--bg);opacity:.7}
/* .stat-wins: headline accomplishments as a stacked, left-aligned list; a closing pull quote in the serif */
.stat-wins{flex-direction:column;align-items:flex-start;gap:.55em;padding:40px calc(64 * var(--k));text-align:left;font-size:max(26px,calc(var(--size,60) * var(--k)));line-height:.95;text-wrap:balance}
@media (max-width:1099px){.media[data-fx=bleed]>.stat-wins{aspect-ratio:auto;min-height:75vw}}   /* stacked: grows past 4:3 rather than clipping the list */
.stat-wins .q{font-family:var(--serif);font-weight:400;font-style:italic;font-size:.82em;line-height:1.05;letter-spacing:0;font-variation-settings:normal;color:var(--bg)}
.stat-wins .q small{display:block;margin-top:.6em;font-family:var(--mono);font-style:normal;font-size:max(11px,.2em);letter-spacing:.12em;text-transform:uppercase;color:var(--bg);opacity:.7}
.stat-card>small.stat-serif{font-family:var(--serif);font-style:italic;font-weight:400;font-size:max(20px,.2em);letter-spacing:0}   /* an aside in the serif italic (its lightest cut) */
.stat-list{flex-direction:column;gap:.3em;font-size:max(24px,calc(var(--size,58) * var(--k)));line-height:1}   /* a stacked list of names in place of a number */
.stat-logos{gap:calc(90 * var(--k))}   /* brand marks in place of a number */
.stat-logos svg{width:calc(170 * var(--k));min-width:88px;height:auto;fill:currentColor}

/* ---------- desktop: snap chapters + pinned media panel ---------- */
@media (min-width:1100px){
  .cs-chapters{display:grid;grid-template-columns:minmax(0,1fr) var(--media-w)}
  .chapter{height:100vh;scroll-snap-align:start}
  .cs-counter{position:sticky;top:0;height:0;z-index:2;color:var(--muted)}
  .cs-counter>div{position:absolute;left:var(--gutter);top:calc(100vh - 48px);white-space:nowrap}
  .cs-counter b{font-weight:400;color:var(--ink)}
  .cs-media{position:sticky;top:0;align-self:start;height:100vh;border-left:1px solid var(--rule);background:var(--panel);overflow:hidden}
  .cs-media .media{position:absolute;inset:0;margin:0;display:grid;place-items:center;opacity:0;transition:opacity .6s,transform .8s var(--ease)}
  .cs-media .media[data-fx=fit]{transform:scale(.94)}
  .cs-media .media[data-fx=fit]>*{width:min(520px,81%)}
  .cs-media .media.cs-modules[data-fx=fit]{grid-template-columns:minmax(0,150px) minmax(0,1fr);align-items:center;gap:32px 28px;padding:40px 36px}
  .cs-media .media.cs-modules[data-fx=fit]>.cs-mod{margin:0}
  .cs-media .media.cs-modules[data-fx=fit]>img{max-width:100%;max-height:calc((100vh - 200px) / 3 - 16px)}
  .cs-media .cs-mod-t{color:#0B0E14}.cs-media .cs-mod-m{color:#188038}
  .cs-media .cs-results dt{color:var(--res-d,#188038)}.cs-media .cs-results dd{color:#5F6570}
  .cs-media .media[data-fx=fit]>img:only-child{width:auto;max-width:var(--fit-w,min(520px,81%));max-height:calc(100vh - 160px)}   /* a portrait capture fits the panel's height; --fit-w on the img widens its cap */
  .cs-media .media[data-fx=fit]:has(>:nth-child(2)){align-content:center;padding:40px}
  .cs-media .media[data-fx=fit]>:not(:only-child){width:auto;height:auto;max-width:min(560px,100%);max-height:calc((100vh - 200px) * var(--mh,.5))}   /* --mh on an item: its share of the height (default half) */
  .cs-media .media.cs-wide[data-fx=fit]{padding:24px}.cs-media .media.cs-wide[data-fx=fit]>img{max-width:100%}   /* .cs-wide: a detailed capture gets the panel's full width */
  .cs-media .media[data-fx=fit]>:first-child:nth-last-child(3),.cs-media .media[data-fx=fit]>:first-child:nth-last-child(3)~*{max-height:calc((100vh - 220px) / 3)}
  .cs-media .media[data-fx=phone]{display:flex;padding:0 40px;transform:scale(.94)}
  .cs-media .media.cs-big[data-fx=phone]{padding:0 24px}.cs-media .media.cs-big[data-fx=phone]>*{width:min(440px,calc((100vh - 100px) * var(--ar)))}   /* .cs-big: phones fill more of the panel */
  .cs-media .media[data-fx=bleed]>*{position:absolute;inset:0;height:100%;aspect-ratio:auto}
  .cs-media .media.is-active{opacity:1;transform:none}
  .cs-chip{position:absolute;left:24px;bottom:24px;z-index:1;background:var(--bg);color:var(--ink);padding:8px 12px;border:1px solid var(--rule);transition:opacity .4s}
  .cs-chip:empty{opacity:0}
}
@media (max-width:1099px){
  .cs-counter,.cs-media{display:none}
  .chapter{padding-top:72px;padding-bottom:72px}
  .cs-intro-row{grid-template-columns:1fr;gap:32px}
  .cs-title{min-height:100svh}
  .chapter-body{width:auto;max-width:520px;margin-left:0}
}

/* ---------- figure layouts (after the desktop/stacked blocks so they win ties) ---------- */
/* data-bg="cream": the panel (desktop) or a card (stacked) in the page ink colour, for captures with transparent backgrounds */
.cs-media:has(.media.is-active[data-bg=cream]){background:var(--ink)}
.media[data-bg=cream]>*{background:none;box-shadow:none;border-radius:0}
/* .cs-team: org-chart pods stacked, with a two-line note under them */
.cs-team-note{display:grid;gap:6px;margin:4px 0 0;text-align:center;font-size:17px;line-height:1.3;color:#0B0E14;max-height:none!important}
.cs-team-note:first-child{margin:0 0 4px}
.cs-team-note i{font-style:normal;opacity:.5;margin:0 .35em}
/* .cs-results-cols: two or three callouts side by side, spread evenly across the visual */
.media>.cs-results-cols{grid-auto-flow:column;grid-auto-columns:auto;justify-content:space-evenly;column-gap:16px;justify-self:stretch;width:100%;max-width:100%;text-align:center}   /* spread evenly across the visual, each centred, so the group reads as centred */
.cs-results-cols dt{font-size:max(40px,calc(64 * var(--k)))}
/* callouts beside a visual sit above it: one number (.cs-results-lead, left-aligned, 76) or two–three side by side (.cs-results-cols, 64); a unit in <small> is set lighter */
.media>.cs-results-lead{justify-self:start}
.media>.cs-results-lead,.media>.cs-results-cols{margin-bottom:max(16px,calc(28 * var(--k)))}
.cs-results-lead dt{font-size:max(48px,calc(76 * var(--k)))}
.cs-results dt small{font-size:.5em;font-weight:600;letter-spacing:-.01em;margin-left:.06em}
/* .cs-grid2: transparent phone captures in a 2×2 grid */
.media.cs-grid2{grid-template-columns:1fr 1fr;gap:16px}
.media.cs-grid2>img{background:none;box-shadow:none;border-radius:0;width:100%;height:auto}
/* .cs-pairs: captures with a centred title (.cs-cap-title) above and a caption (.cs-cap) under each — side by side on desktop, stacked on phones */
.media>.cs-cap-title{margin:0;width:auto;background:none;box-shadow:none;border-radius:0;max-height:none!important;font-weight:700;font-size:26px;line-height:1.1;letter-spacing:-.02em;color:var(--ink);text-align:center}   /* a title centred above its capture */
.media>.cs-cap{margin:0;width:auto;background:none;box-shadow:none;border-radius:0;max-height:none!important;font-size:14px;line-height:1.35;color:var(--ink);text-align:center}
/* .cs-phone-stats: a phone figure with callouts under the phones */
.media[data-fx=phone].cs-phone-stats{flex-wrap:wrap;align-content:center;row-gap:28px}
.media[data-fx=phone]>.cs-results{flex:0 0 100%;width:auto;max-width:none;aspect-ratio:auto;justify-content:center;text-align:center}
.media[data-fx=phone]>.cs-results-cols{justify-content:space-evenly}
.media[data-fx=phone]>.cs-results-lead,.media[data-fx=phone]>.cs-results-cols{margin-bottom:max(20px,calc(44 * var(--k)))}   /* more air between callouts and phones */
.media[data-fx=phone].cs-phone-stats>.device:not(:only-child){max-width:calc(50% - 26px)}   /* two bezelled phones stay side by side (the 9px bezel sits outside the width) */
/* .cs-phone-caps: two phones on a grid, each with a caption above it (captions come before the videos in the markup) */
.media.cs-phone-caps[data-fx=phone]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:10px;justify-items:center;align-items:end}
.media.cs-phone-caps[data-fx=phone]>.cs-results{grid-column:1/-1}
.media.cs-phone-caps[data-fx=phone]>.cs-cap{max-width:none;width:auto;height:auto;aspect-ratio:auto;align-self:end;font-weight:600;font-size:15px}
.media.cs-phone-caps[data-fx=phone]>.device:not(:only-child){max-width:none;width:calc(100% - 18px)}
/* .cs-mosaic: photos re-tiled on a 6-column grid (spans set per image), filling the frame */
.media.cs-mosaic{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:minmax(0,26fr) minmax(0,21fr) minmax(0,22fr) minmax(0,15fr);gap:8px;aspect-ratio:592/864}
.media.cs-mosaic>img{width:100%;height:100%;min-width:0;min-height:0;object-fit:cover;border-radius:10px;box-shadow:none;background:none}
.cs-footnote{margin:14px 0 0 auto;width:max(300px,calc(380 * var(--k)));max-width:100%;font-size:12px;line-height:1.4;color:var(--muted)}
@media (min-width:1100px){
  .cs-media .media.cs-team[data-fx=fit]{padding:28px 32px;gap:18px}
  .cs-media .media.cs-team[data-fx=fit]>img{max-width:100%;max-height:calc((100vh - 250px) / 3)}
  .cs-media .media.cs-grid2[data-fx=fit]{padding:32px;gap:20px 12px}
  .cs-media .media.cs-grid2[data-fx=fit]>img{width:auto;max-width:100%;max-height:calc((100vh - 110px) / 2)}
  .cs-media .media.cs-pairs[data-fx=fit]{grid-template-rows:auto auto auto;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:14px 12px;padding:24px;align-content:center}
  .cs-media .media.cs-pairs[data-fx=fit]>img{align-self:end;width:100%;max-width:100%;max-height:calc(100vh - 200px);object-fit:contain}
  .cs-media .cs-cap{color:#0B0E14;align-self:start}
  .cs-media .cs-cap-title{color:#0B0E14;align-self:end}
  .cs-media .media.cs-phone-stats[data-fx=phone]>video{width:min(260px,calc((100vh - 400px) * var(--ar)))}
  .cs-media .media.cs-phone-caps[data-fx=phone]{padding:0 40px;align-content:center}.cs-media .media.cs-phone-caps[data-fx=phone]>.device:not(:only-child){width:min(260px,calc((100vh - 440px) * var(--ar)))}
  .cs-media .media.cs-mosaic[data-fx=fit]{inset:24px;padding:0;aspect-ratio:auto;align-content:stretch;place-items:stretch}
  .cs-media .media.cs-mosaic[data-fx=fit]>img{max-width:none;max-height:none;width:100%;height:100%}
  .cs-media .media.cs-wide[data-fx=fit]>.cs-results:not(.cs-results-lead):not(.cs-results-cols){justify-self:center}
  .cs-media .media[data-fx=fit]>.cs-results-cols{width:100%;max-width:100%;justify-self:stretch}
}
@media (max-width:1099px){
  /* stacked, 1:1 with desktop: each figure sits on a card in the colour its desktop panel shows — white (data-bg="white"), cream, or
     the default slate panel. Bleed figures fill their frame on desktop too, so they stay edge to edge. */
  .cs-story .media:not([data-fx=bleed]){background:var(--panel);padding:20px 16px;border-radius:16px}
  .cs-story .media[data-bg=white]{background:#fff}
  .cs-story .media[data-bg=cream]{background:var(--ink)}
  .media[data-bg=white]>*{box-shadow:none}
  /* text in a white figure takes the desktop panel's colours (dark captions and module titles, green metrics, grey stat captions) */
  .media[data-bg=white] .cs-cap,.media[data-bg=white] .cs-cap-title,.media[data-bg=white] .cs-mod-t{color:#0B0E14}
  .media[data-bg=white] .cs-mod-m{color:#188038}
  .media[data-bg=white] .cs-results dt{color:var(--res-d,#188038)}.media[data-bg=white] .cs-results dd{color:#5F6570}
  .cs-results-cols{column-gap:16px}.cs-results-cols dt{font-size:34px}.cs-results-cols dd{font-size:13px}
  .media>.cs-results{min-width:0}
  .media.cs-pairs>.cs-cap{margin-bottom:12px}
  .cs-footnote{width:auto;max-width:520px;margin-left:0}
}
/* the narrowest phones (under 360px): side-by-side numbers shrink so a stat row never outgrows its card */
@media (max-width:359px){.cs-results-cols{column-gap:10px}.cs-results-cols dt{font-size:26px}.cs-results-cols dd{font-size:12px}.cs-results-row dt{font-size:38px}}

/* ---------- reveal (JS only, so content is visible without it) ---------- */
.js .chapter-text{opacity:0;transform:translateY(32px);transition:opacity .7s .15s,transform .9s .15s var(--ease)}
.js .chapter.is-active .chapter-text{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .chapter-text,.cs-media .media{transform:none!important}
}

/* ---------- footer ---------- */
.cs-footer{padding:var(--gutter);border-top:1px solid var(--rule);scroll-snap-align:end}
.cs-next{font-family:var(--sans);font-weight:400;font-size:max(18px,calc(24 * var(--k)));letter-spacing:-.01em;line-height:1;color:inherit;text-decoration:none}
.cs-next em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;color:var(--accent)}
.cs-next:hover{color:var(--accent)}

/* ---------- contact page (/contact): single column, form only ---------- */
.cs-contact{border-top:1px solid var(--rule)}
.cs-contact .chapter{height:auto;min-height:calc(100vh - var(--header-h));border:0;padding-right:var(--gutter)}

/* ---------- sign-up page (/tap): story column + form, poster in the media panel ---------- */
.cs-signup{border-top:1px solid var(--rule)}
.cs-signup .chapter{height:auto;border:0}
.cs-form{display:grid;grid-template-columns:1fr 1fr;gap:28px 24px;margin-top:48px;max-width:720px}
.cs-form label{display:grid;gap:10px;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.cs-form .wide{grid-column:1/-1}
.cs-form input,.cs-form textarea{font:inherit;font-family:var(--sans);font-size:17px;text-transform:none;letter-spacing:0;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--rule);padding:8px 0;border-radius:0;outline:none;transition:border-color .3s}
.cs-form textarea{min-height:96px;resize:vertical}
.cs-form input:focus,.cs-form textarea:focus{border-color:var(--accent)}
.cs-form button{justify-self:start;font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.03em;color:var(--bg);background:var(--accent);border:0;padding:16px 28px;cursor:pointer;transition:background .3s}
.cs-form button:hover{background:var(--ink)}
.cs-form .note{grid-column:1/-1;margin:0;font-size:13px;color:var(--muted)}
.cs-form .note:empty{display:none}
.cs-form .hp{position:absolute;left:-9999px}
.cs-form button:disabled{opacity:.5;cursor:wait}
.cs-form .cs-intro{margin:0}
.cs-gate{margin-top:0;max-width:640px}
.cs-poster{margin:0}
.cs-poster img{display:block;width:100%;box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(237,230,214,.08)}
@media (min-width:1100px){
  .cs-signup{display:grid;grid-template-columns:minmax(0,1fr) var(--media-w)}
  .cs-signup .cs-media{display:grid;place-items:center}
  .cs-poster img{width:min(520px,81%);margin:auto}
}
@media (max-width:1099px){
  .cs-signup .cs-media{display:block;padding:0 var(--gutter) 72px}
  .cs-form{grid-template-columns:1fr}
}

/* ---------- lightbox: any case-study image/video opens full screen; wheel/pinch/double-tap zooms, drag pans ---------- */
.cs .media>img,.cs .media>video{cursor:pointer}
.cs-media .media:not(.is-active){pointer-events:none}   /* the pinned panel stacks every figure; only the visible one takes the click */
.lb{position:fixed;inset:0;z-index:50;background:rgba(11,14,20,.96);display:grid;place-items:center;overflow:hidden;touch-action:none;
  opacity:0;transition:opacity .25s;-webkit-user-select:none;user-select:none}
.lb.is-open{opacity:1}
.lb-item{display:block;max-width:calc(100vw - 32px);max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px);width:auto;height:auto;
  transform-origin:50% 50%;will-change:transform;transition:transform .3s var(--ease);box-shadow:0 30px 70px rgba(0,0,0,.55);-webkit-user-drag:none}
.lb.is-live .lb-item{transition:none}   /* no easing while a finger or wheel is driving it */
.lb.is-zoomed .lb-item{cursor:grab}.lb.is-panning .lb-item{cursor:grabbing}
.lb-bar{position:absolute;top:12px;right:12px;display:flex;gap:6px}
.lb-bar button{all:unset;box-sizing:border-box;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:rgba(38,43,54,.85);
  color:var(--ink);font-family:var(--mono);font-size:18px;line-height:1;cursor:pointer;transition:background .2s}
.lb-bar button:hover{background:var(--rule)}
.lb-bar button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.lb,.lb-item{transition:none}}