/* A scrollable reading surface, independent of the single-screen build index. */
@font-face{font-family:Nunito;src:url('/assets/case-studies/numbeast/game/assets/nunito.woff2') format('woff2');font-style:normal;font-weight:400 900;font-display:swap;}
html:has(body.presentation-document) {overflow-y:auto;overflow-x:clip;}
body.presentation-document {overflow:visible;}
.presentation-shell {--case-rule:color-mix(in srgb,var(--ink) 23%,transparent);--case-muted:color-mix(in srgb,var(--ink) 64%,var(--bg));--case-sage:#a7bdab;min-height:100dvh;padding:0 var(--gutter);font:400 13px/1.8 'IBM Plex Mono',monospace;}
.presentation-shell h1,.presentation-shell h2,.presentation-shell h3,.presentation-shell p {font-weight:400;}
.presentation-shell button {background:transparent;border:0;padding:0;}
.presentation-header {height:88px;position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:20px;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--case-rule);}
.presentation-header img {display:block;width:128px;height:auto;}
.presentation-header a {min-height:44px;display:flex;align-items:center;}
.presentation-header .header-social-link {font-size:13px;}
.presentation-header a:hover,.presentation-footer a:hover {color:var(--case-sage);}
.presentation-progress {position:fixed;inset:0 0 auto;height:2px;z-index:30;background:var(--ink);transform:scaleX(var(--reading-progress,0));transform-origin:left;pointer-events:none;}
.presentation-layout {padding-top:40px;}
.presentation-hero-copy {max-width:780px;margin:40px auto 45px;text-align:center;}
.presentation-label {font-size:10px;letter-spacing:.065em;color:var(--case-muted);}
.presentation-hero h1 {margin:17px 0 22px;font-size:clamp(34px,5.7vw,64px);line-height:1.12;letter-spacing:-.075em;overflow-wrap:anywhere;}
.presentation-lead {max-width:630px;margin:0 auto;font-size:clamp(15px,1.6vw,19px);line-height:1.6;letter-spacing:-.03em;}
.presentation-facts {margin:0 0 38px;display:grid;grid-template-columns:1fr 1.2fr;gap:24px 40px;padding:24px 0;border-top:1px solid var(--case-rule);border-bottom:1px solid var(--case-rule);}
.presentation-facts dt,.presentation-summary dt {margin-bottom:7px;font-size:10px;color:var(--case-muted);}
.presentation-facts dt::before {content:'// ';}
.presentation-facts dd {margin:0;font-size:11px;line-height:1.9;}
#presentation-role {color:var(--case-sage);}
.presentation-link-row {grid-column:1/-1;display:flex;align-items:baseline;gap:28px;}
.presentation-link-row dt {margin:0;flex:none;}
#presentation-links {display:flex;flex-wrap:wrap;gap:10px 24px;}
.presentation-links a,#presentation-links a {text-decoration:underline;text-underline-offset:5px;display:inline-flex;align-items:center;gap:8px;min-height:32px;}
.presentation-links a::after,#presentation-links a::after {content:'↗';font-size:12px;}
.presentation-links a:hover,#presentation-links a:hover {color:var(--case-sage);}
.case-media {margin:0;min-width:0;}
.case-media-title {margin:0 0 13px;font-size:13px;line-height:1.6;color:var(--case-sage);}
.case-image-button {position:relative;display:block;width:100%;overflow:hidden;border:1px solid var(--case-rule)!important;}
.case-image-button img {display:block;width:100%;height:100%;object-fit:contain;transition:transform 800ms cubic-bezier(.2,.7,.2,1);}
.case-image-button:hover img {transform:scale(1.025);}
.case-image-button:hover,.case-image-button:focus-visible {outline:1px solid var(--ink);outline-offset:3px;}
.presentation-artwork .case-image-button {aspect-ratio:16/9;background:#101410;}
.presentation-artwork img {padding:0;}
.presentation-hero-gallery {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;}
.presentation-hero-gallery[hidden] {display:none!important;}
.presentation-artwork[data-animated='true']>#presentation-cover-open,.presentation-artwork[data-animated='true']>figcaption {display:none;}
.presentation-layout[data-project='processjr'] .case-comparison-pair>div:first-child .case-phone-stage,
.presentation-layout[data-project='processjr'] .case-comparison-pair>div:first-child .case-image-button:not(.case-phone-button) {background:#3e4852;}
.presentation-layout[data-project='processjr'] #case-website .case-media[data-size='webpage'] {width:min(100%,720px);justify-self:center;}
.presentation-layout[data-project='processjr'] #case-website .case-image-button img {transform:none;transition:none;}
@media(max-width:720px){.presentation-hero-gallery {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}}
.presentation-layout[data-project='saynext'] .presentation-artwork .case-image-button {aspect-ratio:8/5;background:#080d1a;}
.presentation-layout[data-project='kraftkonect'] .presentation-artwork .case-image-button {aspect-ratio:8/5;background:#0f172a;}
.presentation-layout[data-project='moniporte'] .presentation-artwork .case-image-button {aspect-ratio:8/5;background:#102d27;}
.presentation-layout[data-project='anytinsystems']:not([data-placeholder='true']) .presentation-artwork .case-image-button {background:#fff8ef;}
.presentation-layout[data-project='anytinsystems']:not([data-placeholder='true']) .presentation-artwork img {padding:8%;}
.case-media figcaption {display:flex;align-items:baseline;gap:14px;padding-top:13px;font-size:9px;line-height:1.65;color:var(--case-muted);}
.case-figure-label {flex:none;color:var(--case-sage);font-size:8px;letter-spacing:.05em;}
.case-scroll-cue {margin-left:auto;white-space:nowrap;}
.case-expand {position:absolute;right:15px;bottom:12px;padding:3px 8px;background:var(--bg);color:var(--ink);font-size:12px;line-height:1.7;opacity:.75;transition:opacity 200ms;}
.case-image-button:hover .case-expand {opacity:1;}
.presentation-summary {margin:90px 0 0;padding:32px 0;display:grid;grid-template-columns:210px 1fr;gap:48px;border-block:1px solid var(--case-rule);}
.presentation-summary h2 {font-size:12px;margin:0;}
.presentation-summary dl {margin:0;display:grid;gap:24px;}
.presentation-summary dl>div {display:grid;grid-template-columns:140px 1fr;gap:20px;}
.presentation-summary dd {margin:0;font-size:12px;line-height:1.85;}
.presentation-summary dt {margin-top:3px;}
.case-chapter {position:relative;scroll-margin-top:120px;padding:95px 0 0;}
.case-chapter-copy {display:grid;grid-template-columns:210px 1fr;gap:48px;margin-bottom:38px;}
.case-chapter-label {font-size:12px;line-height:1.9;}
.case-chapter-label span {display:block;font-size:9px;letter-spacing:.08em;color:var(--case-muted);margin-bottom:13px;}
.case-chapter-label span::before {content:'[';color:var(--case-sage);margin-right:6px;}
.case-chapter-label span::after {content:']';color:var(--case-sage);margin-left:6px;}
.case-chapter h2 {font-size:clamp(22px,2.8vw,32px);line-height:1.4;letter-spacing:-.055em;margin:0 0 23px;max-width:660px;}
.case-chapter p {margin:0 0 18px;color:color-mix(in srgb,var(--ink) 85%,var(--bg));font-size:12px;line-height:1.95;}
.case-chapter p:last-child {margin-bottom:0;}
.presentation-layout[data-project='saynext'] .case-chapter p {font-size:14px;line-height:1.9;}
.presentation-layout[data-project='saynext'] .presentation-facts dd {font-size:13px;}
.presentation-layout[data-project='saynext'] .presentation-summary dd {font-size:14px;}
.presentation-layout[data-project='saynext'] .case-item p {font-size:13px;}
.case-word {display:inline-block;}
.case-items {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0 0 34px;border-top:1px solid var(--case-rule);}
.case-item {padding:22px 22px 18px 0;border-bottom:1px solid var(--case-rule);min-width:0;}
.case-item:not(:nth-child(3n+1)) {padding-left:22px;border-left:1px solid var(--case-rule);}
.case-item h3 {font-size:12px;line-height:1.7;margin:0 0 9px;color:var(--case-sage);}
.case-item p {font-size:11px;color:var(--case-muted);}
.case-gallery {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;}
.case-gallery[data-columns='3'] {grid-template-columns:repeat(3,minmax(0,1fr));}
.case-gallery[data-columns='4'] {grid-template-columns:repeat(4,minmax(0,1fr));}
.case-gallery:has(>.case-media:only-child) {grid-template-columns:1fr;}
.case-phone-set {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.case-phone-stage {display:grid;place-items:center;padding:22px 16px;background:#f0eee7;}
.case-phone-device {display:block;position:relative;width:min(100%,228px);border:5px solid #101827;border-radius:34px;overflow:hidden;background:#fff;box-shadow:0 10px 22px #0003;}
.case-phone-device img {display:block;width:100%;height:auto;aspect-ratio:393/852;object-fit:contain;}
.case-phone-device[data-device='current']::after {content:'';position:absolute;width:30%;height:1%;border-radius:20px;background:#0f172a;bottom:1%;left:35%;pointer-events:none;}
.case-phone-set .case-phone-stage {padding:18px 10px;}
.case-phone-set .case-phone-device {width:min(100%,180px);border-width:4px;border-radius:26px;}
.case-gallery .case-phone-button {aspect-ratio:auto;}
.case-phone-button:hover img {transform:none;}
/* Device chrome lives outside the artwork; scroll content stays below fixed app controls. */
.phone-demo {min-width:0;}
.phone-demo-stage {display:grid;place-items:center;padding:26px 16px;background:#101410;border:1px solid var(--case-rule);}
.demo-phone {width:min(100%,266px);padding:7px;border-radius:39px;background:#06080d;border:1px solid #697485;box-shadow:inset 0 0 0 2px #1c2430,0 15px 30px #0005;position:relative;}
.demo-phone::before {content:'';position:absolute;left:-3px;top:20%;height:9%;width:2px;background:#566171;border-radius:2px;}
.demo-phone::after {content:'';position:absolute;right:-3px;top:25%;height:12%;width:2px;background:#566171;border-radius:2px;}
.demo-screen {position:relative;width:100%;overflow:hidden;border-radius:32px;background:#080d1a;isolation:isolate;container-type:inline-size;}
.demo-screen::after {content:'';position:absolute;width:30%;height:1.25%;border-radius:20px;background:#f8fafc;bottom:1%;left:35%;pointer-events:none;z-index:5;}
.demo-phone[data-device='current'] .demo-screen::before {content:'';position:absolute;z-index:5;top:1.4%;left:35.25%;width:29.5%;height:3.4%;border-radius:30px;background:#000;pointer-events:none;}
.demo-phone[data-device='classic'] .demo-screen::after {display:none;}
.demo-base {display:block;width:100%;height:100%;object-fit:fill;}
.demo-scroll-viewport,.demo-welcome-video {position:absolute;overflow:hidden;background:#080d1a;}
.demo-scroll-content {display:block;max-width:none;will-change:transform;}
.demo-welcome-video {object-fit:contain;}
.demo-tap {position:absolute;z-index:14;display:block;width:7%;aspect-ratio:1;border-radius:50%;border:2px solid #eee7ffcc;background:#c4b5fd65;box-shadow:0 0 0 4px #c4b5fd24;transform:translate(-50%,-50%);pointer-events:none;}
.demo-tap::after {content:'';position:absolute;inset:-35%;border:1px solid #d2c4ff;border-radius:50%;scale:calc(1 + var(--tap-ripple,0)*1.5);opacity:calc(1 - var(--tap-ripple,0));}
.demo-tap[data-kind='swipe']::after {display:none;}
.demo-scene {position:absolute;inset:0;will-change:transform,opacity;}
.demo-system-status {position:absolute;inset:0 0 auto;overflow:hidden;z-index:6;pointer-events:none;}
.demo-system-status img {display:block;width:100%;height:auto;}
.demo-system-home {position:absolute;inset:auto 0 0;overflow:hidden;z-index:6;pointer-events:none;}
.demo-system-home img {position:absolute;inset:auto 0 0;display:block;width:100%;height:auto;}
.demo-phone[data-device='current'] .demo-screen::before {z-index:20;}
.demo-screen::after {z-index:20;}
.demo-fields {position:absolute;inset:0;pointer-events:none;}
.demo-typed {position:absolute;color:#f8fafc;font-family:'SF Pro','SF Pro Text',Arial,sans-serif;font-weight:400;white-space:pre-wrap;overflow-wrap:break-word;overflow:hidden;text-align:left;}
.demo-typed[data-selected='true'] .demo-typed-value {background:#7c3aed80;box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.demo-caret {display:inline-block;width:1px;height:1.1em;background:#c4b5fd;vertical-align:-.13em;margin-left:1px;}
.demo-keyboard {position:absolute;z-index:9;background:#101725;padding:0 1% 8%;display:flex;flex-direction:column;gap:2.2%;will-change:transform;pointer-events:none;font-family:'SF Pro',Arial,sans-serif;}
.demo-keyboard-accessory {height:12%;display:flex;align-items:center;justify-content:flex-end;color:#c4b5fd;padding:0 3%;font-size:3.7cqw;}
.demo-key-row {display:flex;justify-content:center;gap:1.4%;height:17%;}
.demo-key {display:grid;place-items:center;flex:1;max-width:9%;min-width:0;border-radius:4px;background:#202c3e;color:#eef2f9;font-size:4.6cqw;line-height:1;box-shadow:0 1px 0 #0008;}
.demo-key-row:nth-child(3) {padding-inline:4.5%;}
.demo-key-row:last-child .demo-key {font-size:3.9cqw;max-width:none;}
.demo-key[data-key='space'] {flex:4.4;}
.demo-key[data-key='return'] {flex:1.9;}
.demo-key[data-down='true'] {background:#b9a4ef;color:#101725;transform:translateY(-1px);box-shadow:0 2px 5px #0005;}
.demo-busy {position:absolute;inset:14% 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;background:#080d1ae8;color:#c4b5fd;pointer-events:none;font:4cqw/1.5 'SF Pro',Arial,sans-serif;}
.demo-spinner {display:block;width:9%;aspect-ratio:1;border:2px solid #c4b5fd25;border-top-color:#c4b5fd;border-radius:50%;}
.demo-busy-label {max-width:80%;text-align:center;}
.demo-toast {position:absolute;z-index:8;bottom:13%;left:12%;width:76%;text-align:center;padding:9px 4px;background:#172432ed;border:1px solid #53685a;color:#f8fafc;border-radius:8px;font:3.7cqw/1.4 'SF Pro',Arial,sans-serif;}
.phone-demo[data-reduced='true'] .demo-scene,.phone-demo[data-reduced='true'] .demo-scroll-content {will-change:auto;}
.phone-demo[data-theme='light'] .phone-demo-stage {background:#f0eee7;}
.phone-demo[data-theme='light'] .demo-screen,.phone-demo[data-theme='light'] .demo-scroll-viewport {background:#fff;}
.phone-demo[data-theme='light'] .demo-screen::after {background:#0f172a;}
.phone-demo[data-theme='light'] .demo-screen::before {display:none;}
.phone-demo[data-theme='light'] .demo-typed {color:#0f172a;font-family:Arial,sans-serif;}
.phone-demo[data-theme='light'] .demo-caret {background:#2259e8;}
.phone-demo[data-theme='light'] .demo-tap {border-color:#2259e8cc;background:#2259e845;box-shadow:0 0 0 4px #2259e821;}
.phone-demo[data-theme='light'] .demo-tap::after {border-color:#2259e8;}
.phone-demo[data-theme='light'] .demo-keyboard {background:#d1d5db;}
.phone-demo[data-theme='light'] .demo-keyboard-accessory {color:#2259e8;}
.phone-demo[data-theme='light'] .demo-key {background:#fff;color:#0f172a;}
.phone-demo[data-theme='light'] .demo-key[data-down='true'] {background:#acc5ff;}
.phone-demo[data-demo^='processjr-'] .phone-demo-stage {background:#edf1f2;}
.phone-demo[data-demo^='processjr-'] .demo-tap {border-color:#455d67;background:#ffffffc9;box-shadow:0 0 0 4px #455d6738;}
.phone-demo[data-demo^='processjr-'] .demo-tap::after {border-color:#455d67;}
.case-viewer-media .phone-demo[data-theme='light'] .phone-demo-stage {background:transparent;}
.phone-demo [hidden] {display:none!important;}
.case-collection {padding-top:26px;margin-top:34px;}
.case-collection h3 {color:var(--case-sage);font-size:16px;line-height:1.6;margin:0 0 10px;}
.case-chapter .case-collection-description {max-width:720px;font-size:13px;margin-bottom:24px;}
.case-collection[data-format='stories'] .case-gallery {max-width:680px;margin:auto;gap:20px;}
.case-collection[data-format='comics'] .case-gallery {max-width:760px;margin:auto;gap:28px;}
.case-collection[data-format='comics'] .case-image-button {aspect-ratio:4/5;background:#080d1a;}
.case-collection[data-format='comic-sequence'] .case-gallery {grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
.case-collection[data-format='comic-sequence'] .case-image-button {aspect-ratio:4/5;background:#080d1a;}
.case-media[data-size='phone-video'] .case-video {aspect-ratio:377/574;max-height:none;height:auto;object-fit:contain;background:#080d1a;}
.onboarding-film-stage {position:relative;background:#080d1a;overflow:hidden;}
.onboarding-film-touch {position:absolute;display:block;width:10%;aspect-ratio:1;transform:translate(-50%,-50%);border:2px solid #fff;border-radius:50%;background:#c4b5fd85;box-shadow:0 0 0 6px #c4b5fd40,0 0 15px #7c3aed88;pointer-events:none;}
.onboarding-film-touch::after {content:'';position:absolute;inset:-30%;border:1px solid #ede7ff;border-radius:50%;scale:calc(1 + var(--touch-progress,0)*1.25);opacity:calc(1 - var(--touch-progress,0));}
.case-chapter .onboarding-film-action {margin:0;padding:14px 8px;text-align:center;font-size:12px;line-height:1.6;color:var(--case-sage);min-height:47px;}
.onboarding-film [hidden] {display:none!important;}
.case-comparison .phone-demo-stage {min-height:640px;}
@media(max-width:600px) {
  .case-comparison .phone-demo-stage {min-height:0;}
  .phone-demo-stage {padding:22px 12px;}
  .case-collection[data-format='stories'] .case-gallery,.case-collection[data-format='comics'] .case-gallery {grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;}
  .case-collection .case-expand {font-size:9px;min-width:30px;min-height:26px;right:3px;bottom:3px;}
}
.case-media[data-size='wide'] {grid-column:1/-1;}
.case-gallery .case-image-button {aspect-ratio:1;min-height:0;background:#111512;}
.case-gallery [data-size='wide'] .case-image-button {aspect-ratio:auto;}
.case-gallery [data-size='wide'] img {height:auto;max-height:none;}
.case-gallery [data-size='webpage'] .case-image-button,.case-gallery [data-size='email'] .case-image-button {aspect-ratio:auto;background:#fff;}
.case-gallery [data-size='webpage'] img,.case-gallery [data-size='email'] img {height:auto;max-height:none;}
.case-media[data-size='email'] {grid-column:1/-1;width:min(100%,340px);justify-self:center;}
.case-gallery [data-tone='cream'] .case-image-button,.case-gallery [data-tone='cream'] .case-video {background:#fff8ef;}
.case-gallery [data-size='square'] img {padding:8%;}
.case-gallery [data-size='portrait'] .case-image-button {aspect-ratio:393/852;background:#080d1a;}
.case-gallery [data-size='story'] .case-image-button {aspect-ratio:9/16;background:#080d1a;}
.case-gallery [data-size='feed'] .case-image-button {aspect-ratio:4/5;background:#080d1a;}
.case-gallery [data-size='poster'] .case-image-button {aspect-ratio:9/16;background:#0f172a;}
.case-media[data-size='phone-video'] {grid-column:1/-1;width:min(100%,340px);justify-self:center;}
.case-media[data-size='phone-video'] .case-video {aspect-ratio:377/574;max-height:none;background:#080d1a;}
.case-note {margin:0 0 36px;padding:20px 24px;border-left:2px solid #c4b5fd;background:#c4b5fd0a;}
.case-note h3 {margin:0 0 8px;font-size:11px;letter-spacing:.03em;color:#c4b5fd;}
.case-note p {font-size:12px;max-width:760px;}
.case-comparison {padding-top:30px;margin:0 0 58px;}
.case-comparison-title {font-size:16px!important;line-height:1.6;margin:0 0 26px;letter-spacing:-.02em;}
.case-comparison-pair {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;}
.presentation-layout[data-project='moniporte'] .case-comparison-pair>div:first-child .case-phone-stage {background:#26363b;}
.case-comparison-label {margin-bottom:12px!important;color:var(--case-sage)!important;font-size:11px!important;}
.case-comparison .case-image-button {height:620px;padding:22px;background:#080d1a;}
.case-comparison-rationale {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;padding-top:26px;margin:0;}
.case-comparison-rationale dt {font-size:10px;color:#c4b5fd;margin-bottom:10px;}
.case-comparison-rationale dd {margin:0;font-size:12px;line-height:1.9;color:var(--case-muted);}
.case-video {display:block;width:100%;height:auto;max-height:650px;aspect-ratio:1;object-fit:contain;border:1px solid var(--case-rule);}
.case-gallery:has(video):has(>.case-media:only-child) {max-width:690px;margin-inline:auto;}
.presentation-layout[data-project='numbeast'] #case-website .case-gallery {max-width:900px;}
.presentation-layout[data-project='numbeast'] #case-website .case-video {aspect-ratio:360/307;max-height:none;background:#f6f4eb;}
.case-swatches {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:30px;}
.case-swatch>span {display:block;height:65px;background:var(--swatch);border:1px solid var(--case-rule);}
.case-swatch p {display:flex;justify-content:space-between;gap:8px;font-size:9px;margin:9px 0 0;}
.case-swatch code {font:inherit;color:var(--case-muted);}
.presentation-links {display:flex;flex-wrap:wrap;gap:15px 30px;margin-top:25px;font-size:11px;}
.presentation-toc {position:fixed;left:max(14px,calc((100vw - 1120px)/2 - 38px));top:50%;transform:translateY(-50%);z-index:15;display:grid;gap:10px;}
.presentation-toc[hidden] {display:none!important;}
.presentation-toc::before {content:'';position:absolute;width:1px;top:15px;bottom:15px;left:15px;background:var(--case-rule);z-index:-1;}
.presentation-toc a {display:flex;align-items:center;gap:12px;min-height:32px;width:32px;position:relative;font-size:9px;color:var(--case-muted);}
.presentation-toc a>span:first-child {display:grid;place-items:center;min-width:32px;height:32px;background:var(--bg);border:1px solid var(--case-rule);transition:color 200ms,border-color 200ms,background 200ms;}
.presentation-toc a>span:last-child {opacity:0;pointer-events:none;position:absolute;left:43px;white-space:nowrap;background:var(--bg);padding:3px 8px;border:1px solid var(--case-rule);transition:opacity 200ms;}
.presentation-toc a[aria-current='location']>span:first-child {color:var(--bg);background:var(--ink);border-color:var(--ink);}
.presentation-toc a:is(:hover,:focus-visible)>span:last-child {opacity:1;}
.presentation-next {margin:100px 0 20px;padding:30px 0;display:flex;align-items:center;justify-content:space-between;gap:40px;border-block:1px solid var(--case-rule);}
.presentation-next-copy {display:grid;gap:9px;}
.presentation-next-copy>#presentation-next-name {font-size:clamp(24px,3.5vw,40px);line-height:1.3;letter-spacing:-.055em;}
.presentation-next-copy>span:last-child {font-size:10px;color:var(--case-sage);}
.presentation-next img {width:34%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--case-rule);filter:saturate(.65);transition:filter 300ms,transform 400ms;}
.presentation-next:hover img {filter:saturate(1);transform:translateX(-5px);}
.presentation-page-actions {display:flex;justify-content:flex-end;margin-bottom:24px;}
.presentation-page-actions button {font:inherit;font-size:10px;min-height:44px;color:var(--case-muted);}
.presentation-page-actions button:hover {color:var(--ink);}
.presentation-footer {min-height:90px;}
.presentation-footer .ui-icon {background:currentColor;mask:var(--icon) center/contain no-repeat;-webkit-mask:var(--icon) center/contain no-repeat;}
.presentation-lightbox {position:fixed;inset:0;margin:auto;width:min(1200px,94vw);height:min(950px,94dvh);max-width:94vw;max-height:94dvh;padding:0;border:1px solid var(--case-rule);background:var(--bg);color:var(--ink);font:12px/1.7 'IBM Plex Mono',monospace;overflow:hidden;}
.presentation-lightbox[open] {display:grid;grid-template-rows:auto minmax(0,1fr) auto;}
.presentation-lightbox::backdrop {background:#050706e8;backdrop-filter:blur(9px);}
.case-viewer-toolbar {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 18px;border-bottom:1px solid var(--case-rule);}
.case-viewer-toolbar button {min-height:44px;min-width:44px;font-size:12px;cursor:pointer;}
.case-viewer-stage {min-width:0;min-height:0;overflow:auto;padding:8px 16px;overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom;scrollbar-width:thin;}
.presentation-lightbox:not([data-zoomed='true']) .case-viewer-stage {touch-action:pan-y pinch-zoom;overflow-x:hidden;}
.case-viewer-stage[data-dragging='true'] {cursor:grabbing;user-select:none;}
.case-viewer-stage[data-dragging='false'] .case-viewer-media {transition:transform 160ms ease-out;}
.case-viewer-media {width:100%;height:100%;min-width:0;min-height:0;display:grid;grid-template: minmax(0,1fr)/minmax(0,1fr);place-items:center;}
.case-viewer-media>img {display:block;margin:0;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%;object-fit:contain;user-select:none;}
.presentation-lightbox[data-scroll-preview='true']:not([data-zoomed='true']) .case-viewer-media {display:block;height:auto;min-height:100%;}
.presentation-lightbox[data-scroll-preview='true']:not([data-zoomed='true']) .case-viewer-media>img {height:auto;max-height:none;margin-inline:auto;}
.presentation-lightbox[data-scroll-preview='true'][data-scroll-size='email']:not([data-zoomed='true']) .case-viewer-media>img {width:min(100%,600px);}
.case-viewer-navigation {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 20px;}
.case-viewer-navigation[hidden] {display:none;}
.case-viewer-navigation button {min-width:44px;min-height:44px;font-size:14px;cursor:pointer;}
.case-viewer-navigation button:disabled {opacity:.25;cursor:default;}
.case-viewer-count {font-size:11px;color:var(--case-sage);}
.presentation-lightbox .case-viewer-caption {margin:0;padding:12px 20px;text-align:center;color:var(--case-muted);font-size:11px;line-height:1.6;}
.case-viewer-media>[hidden] {display:none!important;}
.case-viewer-media .phone-demo {width:min(100%,393px,calc((100dvh - 160px)*.45));}
.case-viewer-media .phone-demo-stage {padding:0;border:0;background:none;}
.case-viewer-media .demo-phone {width:100%;container-type:inline-size;padding:clamp(3px,2.8cqw,7px);border-radius:clamp(18px,15cqw,39px);}
.case-viewer-media .demo-screen {border-radius:12.8cqw;}
.case-viewer-media .onboarding-film {width:min(100%,calc((100dvh - 210px)*377/574));}
.case-viewer-media .case-video {max-height:none;}
.presentation-lightbox[data-kind='video'] .case-viewer-media>.case-video {aspect-ratio:auto;}
.presentation-lightbox[data-kind='video']:not([data-zoomed='true']) .case-viewer-media>.case-video {height:100%;max-height:100%;min-height:0;}
.presentation-lightbox[data-zoomed='true'] .case-viewer-media {display:block;width:200%;height:auto;min-height:100%;}
.presentation-lightbox[data-zoomed='true'] .case-viewer-media>img {width:100%;height:auto;max-width:none;max-height:none;}
.presentation-lightbox[data-zoomed='true'] .case-viewer-media .phone-demo,.presentation-lightbox[data-zoomed='true'] .case-viewer-media .onboarding-film {width:100%;}
.case-motion-artwork {position:relative;min-width:0;}
.case-media-open {position:absolute;inset:0;width:100%;height:100%;cursor:zoom-in;}
.case-image-button {cursor:zoom-in;}
html:has(.presentation-lightbox[open]),.code-presentation-view:has(.presentation-lightbox[open]) {overflow:hidden;}
#presentation-missing {min-height:50dvh;padding-block:60px;}
#presentation-missing a {text-decoration:underline;}
/* Content stays readable without JS. Reveal motion is enabled after mounting. */
.presentation-shell[data-reveals='ready'] .case-reveal {opacity:0;transform:translateY(24px);transition:opacity 650ms ease,transform 850ms cubic-bezier(.2,.75,.2,1);transition-delay:var(--reveal-delay,0ms);}
.presentation-shell[data-reveals='ready'] .case-reveal.is-visible {opacity:1;transform:none;}
/* Keep playing video on a stable surface when it enters or leaves the viewport. */
.presentation-shell[data-reveals='ready'] .case-reveal[data-motion='video'] {opacity:1;transform:none;transition:none;}
.presentation-shell[data-reveals='ready'] .case-chapter-copy .case-word {opacity:0;transform:translateY(10px);filter:blur(3px);transition:opacity 450ms ease,transform 650ms cubic-bezier(.2,.7,.2,1),filter 650ms ease;transition-delay:calc(var(--word-index)*32ms);}
.presentation-shell[data-reveals='ready'] .case-chapter-copy.is-visible .case-word {opacity:1;transform:none;filter:none;}
@media(max-width:1240px) {.presentation-toc {left:8px;}.presentation-shell {padding-inline:max(50px,var(--gutter));}}
@media(max-width:800px) {
  .presentation-shell {padding-inline:32px;}.presentation-toc {display:none;}.presentation-layout {padding-top:25px;}.presentation-hero-copy {margin-block:45px 30px;}
  .presentation-summary,.case-chapter-copy {grid-template-columns:150px 1fr;gap:28px;}.presentation-summary dl>div {grid-template-columns:1fr;gap:3px;}.case-swatches {gap:8px;}.case-swatch p {display:grid;gap:0;}
}
@media(max-width:600px) {
  .presentation-shell {padding-inline:22px;}.presentation-header {height:70px;}.presentation-header img {width:115px;}.presentation-header .header-social-link {font-size:12px;}
  .presentation-hero-copy {margin-top:42px;}.presentation-hero h1 {font-size:clamp(29px,8vw,45px);}.presentation-label {font-size:8px;}
  .presentation-facts {grid-template-columns:1fr;gap:21px;}.presentation-link-row {display:block;}.presentation-link-row dt {margin-bottom:7px;}
  .presentation-summary {margin-top:55px;grid-template-columns:1fr;gap:24px;padding-block:25px;}.presentation-summary dl {gap:22px;}
  .case-chapter {padding-top:75px;scroll-margin-top:90px;}.case-chapter-copy {grid-template-columns:1fr;gap:22px;margin-bottom:26px;}
  .case-chapter-label {display:flex;gap:16px;align-items:baseline;font-size:11px;}.case-chapter-label span {margin:0;}.case-chapter h2 {font-size:25px;}
  .case-items {grid-template-columns:1fr;}.case-item,.case-item:not(:nth-child(3n+1)) {padding:17px 0;border-left:0;}
  .case-gallery,.case-gallery[data-columns='3'] {grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px;}.case-swatches {gap:6px;}.case-swatch>span {height:45px;}.case-swatch p {font-size:8px;}
  .case-gallery .case-media[data-size='portrait'],.case-gallery .case-media[data-size='story'] {width:min(100%,370px);justify-self:center;}
  .case-comparison-pair {gap:12px;}.case-comparison .case-image-button {height:350px;padding:10px;}
  .case-comparison-title {font-size:15px!important;}.case-comparison-rationale {grid-template-columns:1fr;gap:20px;}
  .case-comparison-rationale dd {font-size:14px;line-height:1.85;}.case-comparison-rationale dt {font-size:11px;}
  .case-note {padding:18px;}.case-note p {font-size:13px;}
  .case-media figcaption {gap:9px;font-size:8px;}.case-scroll-cue {display:none;}.presentation-next {margin:65px 0 12px;gap:20px;}.presentation-next img {width:36%;}
  .presentation-page-actions {margin-bottom:12px;}.presentation-footer {padding-block:15px;}.presentation-footer nav {flex-wrap:wrap;gap:4px 24px;}
}
@media(prefers-reduced-motion:reduce) {
  html:has(body.presentation-document),.code-presentation-view {scroll-behavior:auto;}
  .presentation-shell .case-reveal,.presentation-shell .case-word {opacity:1!important;transform:none!important;filter:none!important;transition:none!important;}
  .presentation-shell * {animation:none!important;}.case-image-button img,.presentation-next img,.case-viewer-media {transition:none!important;}
}

/* The chapter index becomes a touch-sized strip below the header on tablets
   and phones, leaving the full reading width to the case study. */
@media (max-width:1100px) {
  .presentation-shell {--case-header-height:80px;padding-inline:clamp(24px,4vw,40px);}
  .presentation-header {height:var(--case-header-height);}
  .presentation-toc {position:sticky;inset:auto;top:var(--case-header-height);transform:none;display:flex;align-items:center;gap:10px;width:100%;height:58px;padding-block:7px;background:var(--bg);border-bottom:1px solid var(--case-rule);overflow-x:auto;scrollbar-width:none;}
  .presentation-toc::before {display:none;}
  .presentation-toc a {width:44px;height:44px;min-height:44px;flex:0 0 44px;}
  .presentation-toc a>span:first-child {min-width:44px;height:40px;}
  .presentation-toc a>span:last-child {display:none;}
  .presentation-layout {padding-top:24px;}
  .presentation-hero-copy {margin-top:30px;}
  .case-chapter {scroll-margin-top:calc(var(--case-header-height) + 76px);}
  .presentation-facts dd,.presentation-summary dd,.case-chapter p {font-size:13px;line-height:1.85;}
  .presentation-footer nav {font-size:12px;}
  /* Keep visual sequences compact and comparable on phones and tablets. */
  .case-gallery,.case-gallery[data-columns='3'],.case-gallery[data-columns='4'],.case-collection[data-format='comic-sequence'] .case-gallery {grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;}
  .case-gallery:has(>.case-media:only-child) {grid-template-columns:1fr;}
  .case-comparison-pair {grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;}
  .case-comparison .phone-demo-stage {min-height:0;}
  .phone-demo-stage {container-type:inline-size;padding:16px 10px;}
  .demo-phone {container-type:inline-size;padding:clamp(3px,2.8cqw,7px);border-radius:clamp(18px,15cqw,39px);}
  .demo-screen {border-radius:12.8cqw;}
  .case-comparison .case-image-button {height:auto;aspect-ratio:393/852;padding:10px;}
  .case-items {grid-template-columns:repeat(2,minmax(0,1fr));}
  .case-item,.case-item:not(:nth-child(3n+1)) {padding:20px 18px;border-left:0;}
  .case-item:nth-child(even) {border-left:1px solid var(--case-rule);}
  .case-item:nth-child(odd) {padding-left:0;}
  .case-item:last-child:nth-child(odd) {grid-column:1/-1;}
  .case-comparison-rationale {grid-template-columns:repeat(2,minmax(0,1fr));}
  .case-comparison-rationale>div:last-child:nth-child(odd) {grid-column:1/-1;}
  .presentation-lightbox {inset:0;margin:0;width:100dvw;max-width:100dvw;height:100dvh;max-height:100dvh;border:0;}
  .case-viewer-toolbar {padding:calc(8px + env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right,0px)) 8px max(14px,env(safe-area-inset-left,0px));}
  .presentation-lightbox .case-viewer-caption {padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));}
}
@media (max-width:600px) {
  .presentation-shell {--case-header-height:68px;padding-inline:20px;}
  .presentation-header img {width:110px;}
  .presentation-toc {gap:8px;height:54px;padding-block:5px;}
  .presentation-hero-copy {margin:24px auto 32px;}
  .presentation-hero h1 {font-size:clamp(30px,8vw,44px);letter-spacing:-.065em;}
  .presentation-lead {font-size:15px;line-height:1.7;}
  .presentation-label {font-size:9px;line-height:1.8;}
  .presentation-facts {padding-block:22px;margin-bottom:26px;}
  .presentation-facts dt,.presentation-summary dt {font-size:11px;}
  .presentation-facts dd,.presentation-summary dd,.case-chapter p,.case-item p {font-size:14px;line-height:1.85;}
  .case-chapter h2 {font-size:26px;line-height:1.45;}
  .case-item h3 {font-size:13px;}
  .case-media figcaption {font-size:10px;gap:10px;}
  .case-figure-label {font-size:9px;}
  .case-expand {min-width:44px;min-height:36px;display:grid;place-items:center;right:8px;bottom:8px;}
  .presentation-footer nav {display:grid;grid-template-columns:1fr auto;gap:0 24px;font-size:12px;}
  .presentation-footer a:first-child {grid-column:1/-1;}
  .presentation-footer a:last-child {justify-self:end;}
  .presentation-page-actions button {font-size:12px;}
  .case-gallery,.case-gallery[data-columns='3'],.case-collection[data-format='stories'] .case-gallery,.case-collection[data-format='comics'] .case-gallery,.case-collection[data-format='comic-sequence'] .case-gallery {gap:22px 12px;}
  .case-comparison-pair {gap:12px;}
  .phone-demo-stage {padding:12px 6px;}
  .case-media figcaption {display:grid;align-content:start;gap:4px;overflow-wrap:anywhere;}
  .case-media figcaption>span {min-width:0;}
  .case-swatches {grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;}
  .case-swatch p {display:flex;flex-wrap:wrap;font-size:10px;}
  .case-swatch>span {height:45px;}
}
@media (max-width:479px) {
  .case-items,.case-comparison-rationale {grid-template-columns:1fr;}
  .case-item,.case-item:not(:nth-child(3n+1)) {padding:17px 0;border-left:0;}
}
@media (max-width:420px) {
  .presentation-footer a[href*='linkedin.com'] {display:none;}
  .presentation-footer nav {display:flex;flex-wrap:nowrap;justify-content:space-between;gap:16px;font-size:11px;}
}
/* Static devices preserve the entire screen at every gallery breakpoint. */
.case-gallery .case-image-button.case-phone-button,.case-comparison .case-image-button.case-phone-button {height:auto;aspect-ratio:auto;padding:0;}
.presentation-lightbox[data-kind='phone'] .case-viewer-media>img {width:auto;height:auto;aspect-ratio:393/852;max-width:min(100%,420px);max-height:100%;border:5px solid #101827;border-radius:32px;background:#fff;box-sizing:border-box;}
.presentation-lightbox[data-kind='phone'][data-zoomed='true'] .case-viewer-media>img {width:100%;max-width:none;max-height:none;}
@media (max-width:700px) {
  .case-phone-set {grid-template-columns:1fr;}
  .case-phone-stage {padding:16px 10px;}
  .case-phone-device {border-width:4px;border-radius:26px;}
}
/* Photographic device artwork includes the physical bezel and side buttons. */
.case-phone-device[data-framed='true'] {border:0;border-radius:0;overflow:visible;background:transparent;box-shadow:none;filter:drop-shadow(0 10px 12px #0003);}
.case-phone-device[data-framed='true'] img {aspect-ratio:1293/2656;}
.case-phone-device[data-framed='true']::after {display:none;}
.presentation-lightbox[data-kind='phone'][data-framed='true'] .case-viewer-media>img {aspect-ratio:1293/2656;border:0;border-radius:0;background:transparent;}

/* Real device artwork surrounds a separate animated 393 × 852 screen. */
.demo-phone[data-framed='true'] {aspect-ratio:443/900;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;}
.demo-phone[data-framed='true']::before,.demo-phone[data-framed='true']::after {display:none;}
.demo-phone[data-framed='true'] .demo-screen {position:absolute;left:5.64334%;top:2.66667%;width:88.71332%;height:94.66667%;border-radius:14% / 6.46%;}
.demo-phone[data-framed='true'] .demo-screen::before,.demo-phone[data-framed='true'] .demo-screen::after {display:none;}
.demo-phone .demo-device-frame {position:absolute;inset:0;z-index:25;width:100%;height:100%;pointer-events:none;}
.case-viewer-media .demo-phone[data-framed='true'] {padding:0;border-radius:0;}
.presentation-layout[data-project='processjr'] .case-phone-device[data-framed='true'] img {aspect-ratio:443/900;}
/* The physical shell stays behind the display; every source screen fits intact. */
.numbeast-device{display:block;position:relative;box-sizing:border-box;width:min(100%,228px);aspect-ratio:443/900}
.numbeast-device .nb-device-shell{position:absolute;inset:0;display:block;width:100%;height:100%;max-height:none;padding:0;aspect-ratio:auto;object-fit:contain;pointer-events:none;transform:none;transition:none;filter:drop-shadow(0 12px 14px #0003)}
.nb-device-glass{position:absolute;z-index:1;left:5.64334%;top:2.66667%;width:88.71332%;height:94.66667%;box-sizing:border-box;display:grid;place-items:center;padding:5.3% 2.6%;border-radius:14%/6.46%;background:#fff}
.numbeast-device .nb-device-screen{display:block;position:static;box-sizing:border-box;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%;margin:0;padding:0;border:0;border-radius:0;aspect-ratio:auto;object-fit:contain;background:#fff;transform:none;transition:none}
.numbeast-device img.nb-device-screen:not([src*='/old-']),
.presentation-lightbox[data-device='numbeast'] .case-viewer-media>img:not([src*='/old-']){-webkit-mask-image:url('/assets/case-studies/numbeast/screen-content-mask.svg');mask-image:url('/assets/case-studies/numbeast/screen-content-mask.svg');-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.case-phone-button:hover .numbeast-device img{transform:none}
.presentation-layout[data-project='numbeast'] .case-phone-stage{padding-bottom:48px}
.presentation-lightbox[data-device='numbeast'] .case-viewer-media>img{width:100%;height:100%;max-width:100%;max-height:100%;aspect-ratio:auto;object-fit:contain;border:0;border-radius:0;background:transparent}
.presentation-lightbox[data-device='numbeast'][data-zoomed='true'] .case-viewer-media>img{height:auto;max-height:none}
.presentation-layout[data-project='numbeast'] .presentation-artwork .case-image-button{aspect-ratio:8/5}
.presentation-layout[data-project='numbeast'] .case-comparison-column:first-child .case-phone-stage{background:#48555b}
.presentation-layout[data-project='numbeast'] .case-comparison-column:last-child .case-phone-stage{background:#f6f4eb}
.presentation-layout[data-project='numbeast'] .case-comparison-column:first-child .case-comparison-label{color:#cad4d7}
.presentation-layout[data-project='numbeast'] .case-comparison-column:last-child .case-comparison-label{color:#f5bd50}
.presentation-layout[data-project='numbeast'] .case-collection[data-format='evolution'] .case-gallery{grid-template-columns:1fr}
.presentation-hero-gallery:has(.numbeast-journey){display:block}
.numbeast-journey{display:grid;justify-items:center;gap:8px;padding:20px 12px;color:var(--ink,#b7ae93)}
.nb-journey-device{width:min(100%,280px)}
.nb-journey-transport{display:grid;gap:0;width:min(100%,280px)}
.nb-journey-timeline{display:grid}
.nb-journey-timeline input[type='range']{--seek-progress:0%;display:block;appearance:none;-webkit-appearance:none;width:100%;height:24px;min-width:0;margin:0;padding:0;border:0;background:transparent;color:#b7ae93;cursor:pointer;touch-action:pan-y}
.nb-journey-timeline input::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(to right,#b7ae93 var(--seek-progress),#b7ae9326 var(--seek-progress))}
.nb-journey-timeline input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;margin-top:-4px;border:1px solid #0b0e0b;border-radius:50%;background:#b7ae93}
.nb-journey-timeline input::-moz-range-track{height:4px;border-radius:4px;background:#b7ae9326}
.nb-journey-timeline input::-moz-range-progress{height:4px;border-radius:4px;background:#b7ae93}
.nb-journey-timeline input::-moz-range-thumb{width:10px;height:10px;border:1px solid #0b0e0b;border-radius:50%;background:#b7ae93}
.nb-journey-timeline input:focus-visible{outline:2px solid #b7ae93;outline-offset:3px;border-radius:4px}
.nb-journey-timeline input:disabled{cursor:default;opacity:.5}
@media(pointer:coarse){.nb-journey-timeline input[type='range']{height:28px}.nb-journey-timeline input::-webkit-slider-thumb{width:18px;height:18px;margin-top:-7px}.nb-journey-timeline input::-moz-range-thumb{width:16px;height:16px}}
.nb-journey-time{display:flex;gap:4px;margin-left:auto;white-space:nowrap;color:var(--case-muted,#8f8872);font-size:10px;line-height:1.4;font-variant-numeric:tabular-nums}
.nb-journey-controls{display:flex;align-items:center;gap:2px;width:100%}
.presentation-shell .nb-journey-control{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;min-height:32px;padding:0;border:0;border-radius:4px;background:transparent;color:inherit;font:inherit;cursor:pointer;touch-action:manipulation}
.nb-journey-control svg{display:block;width:16px;height:16px;pointer-events:none}
@media(pointer:coarse){.presentation-shell .nb-journey-control{flex-basis:44px;width:44px;height:44px;min-height:44px}.nb-journey-control svg{width:18px;height:18px}}
.presentation-shell .nb-journey-control:hover{background:#b7ae9312}
.nb-journey-control:focus-visible{outline:2px solid #b7ae93;outline-offset:1px}
.presentation-layout[data-project='numbeast'] #case-website .case-image-button img{transform:none;transition:none}
@media(max-width:640px){.numbeast-journey{padding:16px 0;gap:6px}.nb-journey-device,.nb-journey-transport{width:min(100%,250px)}.presentation-layout[data-project='numbeast'] .case-comparison-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.presentation-layout[data-project='numbeast'] .case-comparison-label{font-size:10px}.presentation-layout[data-project='numbeast'] .case-phone-stage{padding:16px 8px 48px}}