/* Case studies: one shared layout for every brand case. Each page sets its brand colours on <main>:
   --b1 (brand dark), --b2 (brand accent), --b3 (brand light). The Impression pink stays the site accent. */
.crumb { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; font: 400 var(--t-xs)/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.crumb a { color: var(--fg-2); text-decoration: none; }
.crumb a:hover { color: var(--fg); }
.cs-sec { padding-block: clamp(80px, 12vh, 140px); border-top: 1px solid var(--rule-soft); }
.cs-h2 { font: 700 var(--t-2xl)/1 var(--f-display); letter-spacing: -0.025em; text-wrap: balance; max-width: 16ch; }
.cs-lead { font: 500 clamp(1.25rem, 1.9vw, 1.6rem)/1.45 var(--f-body); color: var(--fg-2); max-width: 40ch; text-wrap: pretty; }
.paper .cs-lead { color: var(--paper-ink-2); }
.cs-body { max-width: 62ch; color: var(--fg-2); font-size: var(--t-s); line-height: 1.7; }
.paper .cs-body { color: var(--paper-ink-2); }
.cs-body + .cs-body { margin-top: 1em; }
.cs-split { display: grid; gap: 40px clamp(40px, 6vw, 112px); }
@media (min-width: 960px) { .cs-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }

/* hero */
.cs-hero { padding: calc(var(--hd) + clamp(48px, 10vh, 120px)) 0 0; }
.cs-h1 { font: 900 clamp(3.2rem, 9vw, 9.5rem)/.9 var(--f-display); letter-spacing: -0.045em; margin-left: -0.04em; text-wrap: balance; }
.cs-hero .cs-lead { margin-top: 28px; color: var(--fg); }
.cs-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.cs-tags li { list-style: none; padding: 8px 12px; border: 1px solid var(--rule); font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); }
.cs-hero-img { margin-top: clamp(48px, 8vh, 88px); background: var(--b1, var(--ink-1)); }
.cs-hero-img img { display: block; width: 100%; height: auto; }
.cs-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; padding-block: 40px; border-bottom: 1px solid var(--rule-soft); }
@media (min-width: 900px) { .cs-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cs-meta dt { font: 400 var(--t-xs)/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; }
.cs-meta dd { margin: 0; font: 500 var(--t-s)/1.4 var(--f-body); }

/* numbers band in the brand's own colour */
.cs-band { background: var(--b2, var(--accent)); color: var(--b3, #fff); }
.cs-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .cs-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cs-stats div { padding: clamp(32px, 5vh, 56px) 24px clamp(32px, 5vh, 56px) 0; border-right: 1px solid color-mix(in oklch, currentColor 22%, transparent); }
.cs-stats div:last-child { border-right: 0; }
.cs-stats div + div { padding-left: 24px; }
@media (max-width: 899px) { .cs-stats div:nth-child(2) { border-right: 0; } .cs-stats div:nth-child(3) { padding-left: 0; } .cs-stats div:nth-child(n+3) { border-top: 1px solid color-mix(in oklch, currentColor 22%, transparent); } }
.cs-stats b { display: block; font: 900 clamp(2.4rem, 5vw, 4.4rem)/1 var(--f-display); letter-spacing: -0.035em; }
.cs-stats span { display: block; margin-top: 10px; font: 500 var(--t-s)/1.4 var(--f-body); opacity: .85; }

/* findings */
.cs-cards { display: grid; gap: 0; margin-top: 48px; border-top: 1px solid var(--rule-soft); }
@media (min-width: 900px) { .cs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-cards li { list-style: none; padding: 28px 28px 32px 0; border-bottom: 1px solid var(--rule-soft); }
@media (min-width: 900px) { .cs-cards li:nth-child(odd) { border-right: 1px solid var(--rule-soft); } .cs-cards li:nth-child(even) { padding-left: 28px; } }
.cs-cards h3 { font: 700 var(--t-m)/1.2 var(--f-display); margin-bottom: 10px; }
.cs-cards p { color: var(--fg-2); line-height: 1.6; max-width: 46ch; }
.paper .cs-cards li, .paper .cs-cards { border-color: color-mix(in oklch, var(--paper-ink) 14%, transparent); }
.paper .cs-cards p { color: var(--paper-ink-2); }
.cs-photo { margin: 0; overflow: hidden; }
.cs-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* personas: a drag-and-scroll strip */
.cs-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 300px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--pad) 24px; margin: 40px calc(var(--pad) * -1) 0; scrollbar-width: thin; }
.cs-strip li { list-style: none; scroll-snap-align: start; padding: 24px; background: var(--ink-1); border: 1px solid var(--rule-soft); display: flex; flex-direction: column; gap: 10px; min-height: 230px; }
.cs-strip .who { font: 400 var(--t-xs)/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.cs-strip h3 { font: 700 var(--t-l)/1 var(--f-display); letter-spacing: -0.02em; }
.cs-strip q { font: 500 var(--t-s)/1.5 var(--f-body); color: var(--fg); quotes: none; margin-top: auto; }
.cs-strip q::before { content: ""; display: block; width: 24px; height: 2px; background: var(--accent); margin-bottom: 12px; }
.cs-note { margin-top: 8px; font: 400 var(--t-xs)/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }

/* positioning map */
.cs-map { margin-top: 48px; display: grid; gap: 32px; }
@media (min-width: 960px) { .cs-map { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; } }
.cs-map svg { width: 100%; height: auto; display: block; overflow: visible; }
.cs-map .ax { stroke: color-mix(in oklch, var(--paper-ink) 30%, transparent); stroke-width: 1; }
.cs-map .q { fill: color-mix(in oklch, var(--b2, var(--accent)) 9%, transparent); }
.cs-map .lab { font: 400 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; fill: var(--paper-ink-2); }
.cs-map .pt circle { fill: var(--paper-ink); }
.cs-map .pt text { font: 600 13px var(--f-body); fill: var(--paper-ink); }
.cs-map .lr circle { fill: var(--b2, var(--accent)); }
.cs-map .lr text { font: 800 14px var(--f-display); fill: var(--b2, var(--accent)); }
.cs-map .lr { transition: transform 1.4s var(--ease); }
.cs-map .ghost { opacity: 0; transition: opacity .8s var(--ease) .5s; }
.cs-map .ghost circle { fill: none; stroke: var(--b2, var(--accent)); stroke-dasharray: 3 3; }
.cs-map .ghost text { font: 500 12px var(--f-body); fill: var(--paper-ink-2); }
.cs-map .path { stroke: var(--b2, var(--accent)); stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; opacity: 0; transition: opacity .8s var(--ease) .4s; }
[data-map][data-state="after"] .ghost, [data-map][data-state="after"] .path { opacity: 1; }
.cs-toggle { display: inline-flex; border: 1px solid color-mix(in oklch, var(--paper-ink) 30%, transparent); margin-bottom: 24px; }
.cs-toggle button { padding: 12px 18px; background: none; border: 0; cursor: pointer; font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--paper-ink-2); }
.cs-toggle button[aria-pressed="true"] { background: var(--paper-ink); color: var(--paper); }
.cs-rivals { display: grid; gap: 14px; }
.cs-rivals li { list-style: none; padding-left: 16px; border-left: 2px solid color-mix(in oklch, var(--paper-ink) 18%, transparent); color: var(--paper-ink-2); line-height: 1.5; }
.cs-rivals b { color: var(--paper-ink); font-weight: 700; }
.cs-rivals li.us { border-color: var(--b2, var(--accent)); }

/* the idea */
.cs-idea { background: var(--b1, var(--ink-1)); color: var(--b3, var(--fg)); text-align: center; }
.cs-quote { font: 900 clamp(2.6rem, 7vw, 7rem)/.95 var(--f-display); letter-spacing: -0.04em; max-width: 14ch; margin-inline: auto; text-wrap: balance; }
.cs-idea .cs-lead { margin: 28px auto 0; color: inherit; opacity: .85; }
.cs-traits { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 48px; }
.cs-traits li { list-style: none; padding: 10px 16px; border: 1px solid color-mix(in oklch, currentColor 35%, transparent); font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }

/* bilingual voice */
.cs-voice { display: grid; gap: 0; margin-top: 48px; border-top: 1px solid var(--rule-soft); }
.cs-voice li { list-style: none; display: grid; gap: 6px 32px; padding: 22px 0; border-bottom: 1px solid var(--rule-soft); align-items: baseline; }
@media (min-width: 900px) { .cs-voice li { grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1fr); } }
.cs-voice .where { font: 400 var(--t-xs)/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.cs-voice .en { font: 600 var(--t-m)/1.35 var(--f-display); }
.cs-voice .ar { font: 500 var(--t-m)/1.5 "Geeza Pro", "Noto Kufi Arabic", system-ui, sans-serif; color: var(--fg-2); text-align: right; }

/* gallery: a mosaic that opens a full-screen viewer */
.cs-gallery { display: grid; gap: 12px; margin-top: 48px; }
@media (min-width: 900px) { .cs-gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); } .cs-gallery .w6 { grid-column: span 6; } .cs-gallery .w4 { grid-column: span 4; } .cs-gallery .w3 { grid-column: span 3; } .cs-gallery .w2 { grid-column: span 2; } }
.cs-gallery figure { margin: 0; }
.cs-gallery button { display: block; width: 100%; padding: 0; border: 0; background: var(--ink-1); cursor: zoom-in; overflow: hidden; }
.cs-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.cs-gallery button:hover img { transform: scale(1.025); }
.cs-gallery figcaption { margin-top: 10px; font: 400 var(--t-xs)/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.paper .cs-gallery figcaption { color: var(--paper-ink-2); }
.cs-lb { position: fixed; inset: 0; z-index: 200; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0b0a0a; color: var(--fg); }
.cs-lb[open] { display: grid; grid-template-rows: 1fr auto; }
.cs-lb::backdrop { background: transparent; }
.cs-lb-img { display: grid; place-items: center; padding: clamp(16px, 4vw, 56px); min-height: 0; touch-action: pan-y; }
.cs-lb-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cs-lb-bar { display: flex; align-items: center; gap: 16px; padding: 16px var(--pad) calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule-soft); }
.cs-lb-bar p { flex: 1; font: 400 var(--t-xs)/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); }
.cs-lb-bar button { width: 44px; height: 44px; border: 1px solid var(--rule); background: none; color: var(--fg); cursor: pointer; font: 400 18px/1 var(--f-body); }
.cs-lb-bar button:hover, .cs-lb-bar button:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }

/* deliverables */
.cs-list { columns: 1; gap: 48px; margin-top: 40px; }
@media (min-width: 900px) { .cs-list { columns: 2; } }
.cs-list li { list-style: none; break-inside: avoid; display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rule-soft); font: 500 var(--t-s)/1.4 var(--f-body); }
.cs-list li::before { content: ""; width: 7px; height: 7px; background: var(--accent); flex: none; transform: translateY(-2px); }
.paper .cs-list li { border-color: color-mix(in oklch, var(--paper-ink) 14%, transparent); }

/* next case */
.cs-next { padding-block: 56px; border-top: 1px solid var(--rule-soft); }
.cs-next-h { font: 400 var(--t-xs)/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 18px; }
.cs-next ul { display: grid; gap: 0 32px; }
@media (min-width: 900px) { .cs-next ul { grid-template-columns: repeat(3, 1fr); } }
.cs-next a { display: flex; justify-content: space-between; align-items: center; min-height: 64px; border-top: 1px solid var(--rule-soft); font: 700 var(--t-m)/1.2 var(--f-display); text-decoration: none; }
.cs-next a::after { content: ""; width: 9px; height: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform .4s var(--ease); }
.cs-next a:hover::after { transform: translateX(5px) rotate(45deg); }

@media (prefers-reduced-motion: reduce) { .cs-map .lr, .cs-map .ghost, .cs-map .path, .cs-gallery img { transition: none; } }

/* "How the mark was born": a pinned, scroll-driven particle story */
.cs-story { position: relative; height: 340vh; background: #23251c; }
.cs-story-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.cs-story-gl { position: absolute; inset: 0; }
.cs-story-gl canvas { display: block; width: 100%; height: 100%; }
.cs-story-copy { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: var(--hd); pointer-events: none; }
.cs-story-copy .cs-h2 { color: #f3ecdc; max-width: 11ch; }
.cs-story-steps { margin-top: 40px; display: grid; gap: 4px; max-width: 34ch; counter-reset: st; }
.cs-story-steps li { list-style: none; padding: 14px 0 14px 18px; border-left: 2px solid oklch(1 0 0 / .14); color: oklch(1 0 0 / .38); font: 500 var(--t-s)/1.45 var(--f-body); transition: color .5s var(--ease), border-color .5s var(--ease); }
.cs-story-steps li b { display: block; font: 700 var(--t-m)/1.2 var(--f-display); margin-bottom: 4px; }
.cs-story-steps li.on { color: #f3ecdc; border-color: var(--acc, #c9a46b); }
.cs-story-final { display: none; }
@media (max-width: 959px) {
  .cs-story-copy { justify-content: flex-end; padding-bottom: 48px; }
  .cs-story-steps { margin-top: 20px; }
  .cs-story-steps li { display: none; }
  .cs-story-steps li.on { display: block; }
}
/* still version: no pinning, the finished mark beside all four captions */
.cs-story.is-still { height: auto; }
.cs-story.is-still .cs-story-pin { position: relative; height: auto; padding-block: clamp(80px, 12vh, 140px); }
.cs-story.is-still .cs-story-copy { height: auto; padding-top: 0; }
.cs-story.is-still .cs-story-steps li { display: block; color: #f3ecdc; }
.cs-story.is-still .cs-story-final { display: block; width: min(260px, 50vw); margin-top: 40px; }
@media (min-width: 960px) { .cs-story.is-still .cs-story-final { position: absolute; right: 12%; top: 50%; transform: translateY(-50%); margin: 0; width: min(320px, 26vw); } }

/* Boom: a fan of floating phones that follows the pointer */
.bm-stage { position: relative; height: clamp(460px, 74vh, 760px); margin-top: clamp(32px, 6vh, 64px); perspective: 1600px; background: radial-gradient(70% 80% at 50% 60%, #6b3b95 0%, #391d4f 55%, var(--ink-0) 100%); overflow: hidden; }
.bm-fan { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 6deg)) rotateY(var(--ry, 0deg)); transition: transform 1s var(--ease); }
.bm-ph { position: absolute; left: 50%; top: 50%; width: clamp(150px, 15vw, 230px); aspect-ratio: 9 / 19.5; margin: 0; border-radius: clamp(22px, 2.4vw, 36px); padding: clamp(5px, .5vw, 8px); background: #111; box-shadow: 0 50px 80px -30px rgb(0 0 0 / .7), inset 0 0 0 1px rgb(255 255 255 / .14); transform: translate(-50%, -50%) translate3d(var(--x), var(--y), var(--z)) rotateY(var(--r)); animation: bm-float 7s ease-in-out infinite; animation-delay: var(--d); }
.bm-ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: clamp(17px, 1.9vw, 29px); }
.bm-ph:nth-child(1) { --x: -150%; --y: 4%; --z: -120px; --r: 24deg; --d: -1s; }
.bm-ph:nth-child(2) { --x: -52%; --y: -4%; --z: 40px; --r: 10deg; --d: -3s; }
.bm-ph:nth-child(3) { --x: 52%; --y: -2%; --z: 40px; --r: -10deg; --d: -5s; }
.bm-ph:nth-child(4) { --x: 150%; --y: 6%; --z: -120px; --r: -24deg; --d: -2s; }
@keyframes bm-float { 50% { margin-top: -14px; } }
@media (max-width: 767px) { .bm-ph:nth-child(1), .bm-ph:nth-child(4) { display: none; } .bm-ph { width: 40vw; } }

/* Boom: how it works, an animated route from one emirate to another */
.bm-how { display: grid; gap: 40px; margin-top: 48px; }
@media (min-width: 960px) { .bm-how { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; } }
.bm-steps { display: grid; gap: 4px; }
.bm-steps button { all: unset; cursor: pointer; display: block; padding: 18px 0 18px 20px; border-left: 2px solid var(--rule); color: var(--fg-3); transition: color .4s var(--ease), border-color .4s var(--ease); }
.bm-steps button b { display: block; font: 700 var(--t-m)/1.2 var(--f-display); margin-bottom: 4px; }
.bm-steps button[aria-pressed="true"] { color: var(--fg); border-color: #c6d958; }
.bm-steps button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.bm-map { width: 100%; height: auto; display: block; background: #2a1540; border-radius: 8px; }
.bm-map .road { fill: none; stroke: rgb(255 255 255 / .1); stroke-width: 2; }
.bm-map .route { fill: none; stroke: #c6d958; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 2.4s var(--ease); }
.bm-map .city circle { fill: #fff; } .bm-map .city text { fill: #fff; font: 700 15px var(--f-display); }
.bm-map .bid { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.6); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.bm-map .bid rect { fill: #a97abc; } .bm-map .bid text { fill: #fff; font: 600 12px var(--f-body); }
.bm-map .bid.win rect { fill: #c6d958; } .bm-map .bid.win text { fill: #391d4f; }
.bm-map .pkg { transition: transform 2.4s var(--ease), opacity .4s; }
.bm-map[data-s="1"] .bid, .bm-map[data-s="2"] .bid, .bm-map[data-s="3"] .bid { opacity: 1; transform: none; }
.bm-map[data-s="2"] .bid:not(.win), .bm-map[data-s="3"] .bid:not(.win) { opacity: .25; }
.bm-map[data-s="3"] .bid { opacity: 0 !important; }
.bm-map[data-s="3"] .route { stroke-dashoffset: 0; }
.bm-map[data-s="3"] .pkg { transform: translate(var(--tx), var(--ty)); }

/* the next case at the bottom of every case page */
.cs-pager { display: grid; border-top: 1px solid var(--rule-soft); }
@media (min-width: 900px) { .cs-pager { grid-template-columns: 1fr 1fr; } }
.cs-pager a { display: flex; flex-direction: column; gap: 10px; padding: clamp(32px, 5vw, 64px) var(--pad); text-decoration: none; background: var(--bg, var(--ink-1)); color: var(--ink, var(--fg)); transition: filter .4s var(--ease); }
.cs-pager a:hover { filter: brightness(1.12); }
.cs-pager span { font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.cs-pager b { font: 800 clamp(1.8rem, 3.6vw, 3.2rem)/1 var(--f-display); letter-spacing: -0.03em; }

/* ---------- motion layer (motion.js adds .mo; nothing here applies with reduced motion) ---------- */
.cs-hero-img { overflow: hidden; }
.cs-hero-img img, .cs-photo img, .cs-gallery img { will-change: transform; }
/* headlines rise word by word from behind a mask */
.mo .sp .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.mo .sp .w > span { display: inline-block; transform: translateY(110%) rotate(4deg); transform-origin: 0 100%; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i, 0) * 45ms); }
.mo .sp.in .w > span { transform: none; }
/* content cascades in */
.mo .rv { opacity: 0; transform: translateY(46px); transition: opacity 1s var(--ease), transform 1.2s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--d, 0ms); }
.mo .rv.in { opacity: 1; transform: none; }
.mo .cs-tags li.rv { transform: translateY(20px) scale(.9); }
.mo .cs-tags li.rv.in { transform: none; }
/* images wipe open and settle */
.mo .rvi { clip-path: inset(100% 0 0 0); transition: clip-path 1.4s cubic-bezier(.77, 0, .18, 1); }
.mo .rvi.in { clip-path: inset(0 0 0 0); }
.mo .cs-hero-img.rvi { clip-path: inset(18% 8% 18% 8% round 12px); transition-duration: 1.8s; }
.mo .cs-hero-img.rvi.in { clip-path: inset(0 0 0 0 round 0); }
/* the big idea lights up word by word as you scroll */
.mo .cs-quote .w > span { opacity: .16; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1), opacity .5s var(--ease); transition-delay: calc(var(--i, 0) * 45ms), 0s; }
.mo .cs-quote .w.lit > span { opacity: 1; }
/* the giant title band */
.cs-marq { overflow: hidden; padding-block: clamp(18px, 4vh, 40px); border-block: 1px solid var(--rule-soft); background: var(--ink-0); }
.cs-marq-row { display: flex; width: max-content; gap: clamp(28px, 4vw, 64px); align-items: center; will-change: transform; }
.cs-marq span { font: 900 clamp(3rem, 9vw, 9rem)/.9 var(--f-display); letter-spacing: -0.04em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px oklch(1 0 0 / .32); text-transform: uppercase; }
.cs-marq span.hl { color: var(--b2, var(--accent)); -webkit-text-stroke: 0; }
.cs-marq span::after { content: "✦"; display: inline-block; margin-left: clamp(28px, 4vw, 64px); font-size: .35em; vertical-align: middle; color: var(--accent); -webkit-text-stroke: 0; }
/* a "View" cursor over the gallery */
.cs-cursor { position: fixed; left: 0; top: 0; z-index: 250; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font: 400 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; pointer-events: none; scale: 0; transition: scale .45s cubic-bezier(.16, 1, .3, 1); }
.cs-cursor.on { scale: 1; }
.mo .cs-gallery button, .mo .bh-case { cursor: none; }
/* stats pop as they count */
.mo .cs-stats b { display: inline-block; }
@media (prefers-reduced-motion: reduce) { .cs-marq { display: none; } }

/* a brand film: full width, plays silently while in view, sound on request */
.cs-film { padding-block: clamp(80px, 12vh, 140px) 0; background: var(--ink-0); }
.cs-film-head { margin-bottom: clamp(32px, 5vh, 56px); }
.cs-film-frame { position: relative; margin: 0; overflow: hidden; background: #000; }
.cs-film-frame video { display: block; width: 100%; height: auto; }
.cs-film-snd { position: absolute; right: var(--pad); bottom: 24px; padding: 12px 18px; border: 1px solid oklch(1 0 0 / .4); background: oklch(0 0 0 / .45); color: #fff; backdrop-filter: blur(8px); font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background-color .3s var(--ease), border-color .3s var(--ease); }
.cs-film-snd:hover, .cs-film-snd:focus-visible, .cs-film-snd[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); outline: none; }
.mo .cs-film-frame { clip-path: inset(10% 10% 10% 10% round 16px); transition: clip-path 1.6s cubic-bezier(.77, 0, .18, 1); }
.mo .cs-film-frame.in { clip-path: inset(0 0 0 0 round 0); }

/* ---------- brand themes: each case page wears its client's palette, not The Impression's black ---------- */
html[data-theme] .btn, html[data-theme] .cs-cursor, html[data-theme] .cs-film-snd[aria-pressed="true"] { color: var(--on-acc); }
html[data-theme] .hd::before { background: linear-gradient(180deg, var(--hd-bg), transparent); }
html[data-theme] .hd.is-solid { background: var(--hd-bg); }
html[data-theme] .plane-close { display: none; }
html[data-theme] .closing { background: var(--close-bg); }
html[data-theme] .cs-band { background: var(--band); color: var(--band-ink); }
html[data-theme] .cs-idea { background: var(--idea); color: var(--idea-ink); }
html[data-theme] .cs-marq span { -webkit-text-stroke-color: color-mix(in oklch, var(--fg) 34%, transparent); }
html[data-theme] .cs-marq span.hl { color: var(--accent); }
html[data-theme] .cs-hero-img { background: var(--ink-1); }

html[data-theme="lr"] {
  --ink-0: #3b3f30; --ink-1: #464a39; --ink-2: #535845; --fg: #f3ecdc; --fg-2: #ddd5c0; --fg-3: #b5ad95;
  --rule: rgb(243 236 220 / .3); --rule-soft: rgb(243 236 220 / .15); --accent: #b3272f; --accent-deep: #8b1d24; --on-acc: #fff;
  --paper: #f3ecdc; --paper-ink: #2c2b22; --paper-ink-2: #555342;
  --hd-bg: rgb(59 63 48 / .94); --band: #8b1d24; --band-ink: #f3ecdc; --idea: #8b1d24; --idea-ink: #f3ecdc;
  --close-bg: radial-gradient(80% 90% at 80% 30%, #8b1d24 0%, #3b3f30 70%);
}
html[data-theme="lr"] .paper { --ink-0: #f3ecdc; --ink-1: #ebe2cd; --ink-2: #e2d8bf; --rule: #cfc4a8; --rule-soft: #ddd3ba; --fg: #2c2b22; --fg-2: #555342; --fg-3: #77735e; }

html[data-theme="kb"] {
  --ink-0: #faf8f5; --ink-1: #ffffff; --ink-2: #f1ede8; --fg: #141212; --fg-2: #3e3a3a; --fg-3: #6d6767;
  --rule: rgb(20 18 18 / .2); --rule-soft: rgb(20 18 18 / .1); --accent: #e0291f; --accent-deep: #b81f17; --on-acc: #fff;
  --paper: #1b1616; --paper-ink: #ffffff; --paper-ink-2: #d9d3d3;
  --hd-bg: rgb(250 248 245 / .95); --band: #e0291f; --band-ink: #fff; --idea: #e0291f; --idea-ink: #fff;
  --close-bg: radial-gradient(80% 90% at 80% 30%, #ffe3df 0%, #faf8f5 70%);
}
html[data-theme="kb"] .paper { --ink-0: #1b1616; --ink-1: #241e1e; --ink-2: #2e2727; --rule: rgb(255 255 255 / .22); --rule-soft: rgb(255 255 255 / .1); --fg: #fff; --fg-2: #d9d3d3; --fg-3: #a8a0a0; }
html[data-theme="kb"] .hd-logo img, html[data-theme="kb"] .ft-grid img { filter: brightness(0); }

html[data-theme="bm"] {
  --ink-0: #2e1740; --ink-1: #391d4f; --ink-2: #45255f; --fg: #ffffff; --fg-2: #ddd0ea; --fg-3: #b39dc8;
  --rule: rgb(255 255 255 / .25); --rule-soft: rgb(255 255 255 / .12); --accent: #c6d958; --accent-deep: #a9bd3c; --on-acc: #2e1740;
  --paper: #f3eef8; --paper-ink: #391d4f; --paper-ink-2: #5e4675;
  --hd-bg: rgb(46 23 64 / .94); --band: #c6d958; --band-ink: #2e1740; --idea: linear-gradient(120deg, #a04874, #a97abc 55%, #520b84); --idea-ink: #fff;
  --close-bg: radial-gradient(80% 90% at 80% 30%, #a04874 0%, #2e1740 70%);
}
html[data-theme="bm"] .paper { --ink-0: #f3eef8; --ink-1: #ebe3f3; --ink-2: #e2d7ee; --rule: #d6c9e3; --rule-soft: #e4dbee; --fg: #391d4f; --fg-2: #5e4675; --fg-3: #8a77a0; }

html[data-theme="rl"] {
  --ink-0: #15523f; --ink-1: #1c6e59; --ink-2: #237a63; --fg: #f6ecd2; --fg-2: #e0d5b8; --fg-3: #b9b08f;
  --rule: rgb(246 236 210 / .28); --rule-soft: rgb(246 236 210 / .14); --accent: #f3e3b8; --accent-deep: #e3cf98; --on-acc: #13392f;
  --paper: #f7f0de; --paper-ink: #13392f; --paper-ink-2: #3b5a4f;
  --hd-bg: rgb(21 82 63 / .94); --band: #f3e3b8; --band-ink: #13392f; --idea: #f3e3b8; --idea-ink: #13392f;
  --close-bg: radial-gradient(80% 90% at 80% 30%, #237a63 0%, #0f3d30 70%);
}
html[data-theme="rl"] .paper { --ink-0: #f7f0de; --ink-1: #efe5cc; --ink-2: #e6dabd; --rule: #d6c9a6; --rule-soft: #e5dcc4; --fg: #13392f; --fg-2: #3b5a4f; --fg-3: #61786d; }

html[data-theme="tgt"] {
  --ink-0: #001a45; --ink-1: #002560; --ink-2: #0a3070; --fg: #ffffff; --fg-2: #c9d5ea; --fg-3: #8ea3c6;
  --rule: rgb(255 255 255 / .24); --rule-soft: rgb(255 255 255 / .12); --accent: #19c37d; --accent-deep: #129d64; --on-acc: #001a45;
  --paper: #eef3fa; --paper-ink: #001f52; --paper-ink-2: #34507c;
  --hd-bg: rgb(0 26 69 / .94); --band: #19c37d; --band-ink: #001a45; --idea: linear-gradient(120deg, #00a85a, #0a5bd8 50%, #e5197e); --idea-ink: #fff;
  --close-bg: radial-gradient(80% 90% at 80% 30%, #0a3a8c 0%, #001a45 70%);
}
html[data-theme="tgt"] .paper { --ink-0: #eef3fa; --ink-1: #e3eaf5; --ink-2: #d8e1f0; --rule: #c8d3e6; --rule-soft: #dbe3f0; --fg: #001f52; --fg-2: #34507c; --fg-3: #6079a0; }
.cs-hero-img video { display: block; width: 100%; height: auto; }

/* ---------- case pages only (html[data-theme] is set on the five case pages, never on Services) ---------- */
/* phone: the stats band keeps every figure inside its column */
@media (max-width: 599px) {
  html[data-theme] .cs-stats b { font-size: min(2.4rem, 7.6vw); }
  html[data-theme] .cs-stats div { padding-right: 16px; }
  html[data-theme] .cs-stats div + div { padding-left: 16px; }
  html[data-theme] .cs-stats div:nth-child(3) { padding-left: 0; }
}
/* tap targets of 44px without moving the layout */
html[data-theme] .crumb a { display: inline-block; padding-block: 14px; margin-block: -14px; }
html[data-theme] .cs-toggle button, html[data-theme] .cs-film-snd { min-height: 44px; }
html[data-theme] .cs-tags li, html[data-theme] .cs-traits li { line-height: 1.2; }
/* visible keyboard focus on every interactive piece */
html[data-theme] .cs-gallery button:focus-visible, html[data-theme] .cs-pager a:focus-visible, html[data-theme] .cs-toggle button:focus-visible, html[data-theme] .crumb a:focus-visible, html[data-theme] .cs-strip:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
html[data-theme] .cs-pager a:focus-visible { outline-offset: -6px; }
html[data-theme] .cs-gallery button:focus-visible img { transform: scale(1.025); }
/* the strip says it can move: a soft fade on its trailing edge */
html[data-theme] .cs-strip { mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
html[data-theme] .cs-strip li { transition: border-color .4s var(--ease); }
html[data-theme] .cs-strip li:hover { border-color: var(--rule); }
/* calmer reading measure and rhythm */
html[data-theme] .cs-body { max-width: 66ch; }
html[data-theme] .cs-h2 + .cs-body, html[data-theme] .cs-h2 + .cs-lead { text-wrap: pretty; }
html[data-theme] .cs-pager b { transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
html[data-theme] .cs-pager a:hover b { transform: translateX(6px); }
@media (max-width: 767px) {
  html[data-theme] .cs-sec { padding-block: 72px; }
  html[data-theme] .cs-cards li { padding-right: 0; }
  html[data-theme] .cs-voice .ar { font-size: var(--t-s); }
  html[data-theme] .cs-gallery figcaption { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { html[data-theme] .cs-pager b, html[data-theme] .cs-strip li { transition: none; } html[data-theme] .cs-pager a:hover b { transform: none; } }