/* /site-shell/scroll-rail.css */
/* Compact desktop rail; native scrolling and native touch affordances remain. */
:root{scrollbar-color:var(--cf-blue,#019edb) var(--cf-night,#080b12)}
/* Keep the native gutter's layout and viewport units unchanged on enhancement.
   Transparent chrome avoids the late width/centred-rail jump caused by none. */
html.has-scroll-rail{scrollbar-color:transparent transparent}
html.has-scroll-rail::-webkit-scrollbar-track,html.has-scroll-rail::-webkit-scrollbar-thumb{background:transparent}
.scroll-rail{position:fixed;z-index:31;right:max(2px,env(safe-area-inset-right));top:50%;width:28px;height:clamp(128px,20vh,180px);transform:translateY(-50%);touch-action:none;user-select:none;cursor:grab;outline:none;opacity:.62;transition:opacity .25s ease}
.scroll-rail[hidden]{display:none!important}
.scroll-rail-track{position:absolute;inset:0 auto 0 12px;width:3px;border-radius:3px;background:#29364a;box-shadow:0 0 0 1px #080b1266;pointer-events:none}
.scroll-rail-thumb{position:absolute;top:0;left:-1px;width:5px;min-height:28px;border-radius:4px;background:var(--cf-blue,#019edb);box-shadow:0 0 0 #019edb00;transition:box-shadow .25s ease;pointer-events:none}
.scroll-rail:is(:hover,:focus-visible,[data-active],[data-dragging]){opacity:1}
.scroll-rail:is(:hover,:focus-visible,[data-active],[data-dragging]) .scroll-rail-thumb{box-shadow:0 0 9px #019edb66}
.scroll-rail:focus-visible{outline:1px solid var(--cf-light);outline-offset:1px;border-radius:8px}
.scroll-rail[data-dragging]{cursor:grabbing}
html.scroll-rail-dragging,html.scroll-rail-dragging *{user-select:none!important;cursor:grabbing!important}
html.has-dialog .scroll-rail{visibility:hidden;pointer-events:none}
@media(prefers-reduced-motion:reduce){.scroll-rail,.scroll-rail-thumb{transition:none}}
html[data-motion=off] .scroll-rail,html[data-motion=off] .scroll-rail-thumb{transition:none}
@media(forced-colors:active){:root{scrollbar-color:auto}.scroll-rail{display:none}}

/* /projects/project-card.css */
/* Shared project proof: identical framing, type, light and motion in every listing. */
.cf-work-grid,.projects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:60px 36px}
.cf-project{min-width:0;margin:0}
.cf-project-link{display:block;position:relative;isolation:isolate;color:var(--cf-ink);text-decoration:none}
.project-card-border{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible;pointer-events:none}
.project-card-border path{vector-effect:non-scaling-stroke;stroke-width:1;stroke-linejoin:round}
.project-border-depth{fill:#102532;stroke:#34617a}
.project-border-face{fill:#0b1621;stroke:#609bb1}
.project-border-inset{fill:none;stroke:#294354}
.project-border-light{fill:none;stroke:var(--cf-light);stroke-width:1.5!important;stroke-dasharray:.12 .88;stroke-dashoffset:.12;opacity:0;transition:stroke-dashoffset 1.1s var(--cf-ease),opacity .35s}
.project-border-signal{fill:none;stroke:var(--cf-light);stroke-width:2!important;stroke-linecap:round;opacity:.8}
.cf-project-link:is(:hover,:focus-visible) .project-border-light{stroke-dashoffset:-.8;opacity:.9}


.cf-project-frame{position:relative;isolation:isolate;padding:10px 14px 14px 10px;transform-origin:50% 50%;transform:perspective(1800px) translate3d(0,var(--media-y,0px),0) rotateX(var(--media-rx,0deg)) scale(var(--media-scale,1));opacity:var(--media-opacity,1)}
.cf-project-media{position:relative;margin:0;aspect-ratio:1.6;overflow:hidden;border:0;border-radius:0;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));background:#080d16;isolation:isolate}
.cf-project-media:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at var(--optic-x,50%) var(--optic-y,50%),#67ddff28,transparent 60%);opacity:var(--optic-hover,0);mix-blend-mode:screen}
.cf-project-media>img{display:block;width:100%;height:100%;max-width:100%;object-fit:cover;object-position:top;scale:calc(1 + var(--media-enter,0)*.055);transition:transform .7s var(--cf-ease)}
.cf-project-link:is(:hover,:focus-visible) .cf-project-media>img{transform:scale(1.025)}
.cf-project-neno-health .cf-project-media>img,.project-media-contain>img{object-fit:contain;background:#eef1f6}
.cf-project-caption{display:flex;justify-content:space-between;align-items:start;gap:20px;padding:24px 0 0;color:var(--cf-ink)}
.cf-project-caption>div{min-width:0}
.cf-project-caption .project-card-title{margin:0;font:500 clamp(27px,2.6vw,44px)/1.2 var(--cf-body);text-transform:none;letter-spacing:-.035em;position:relative}
.project-title-mask{display:inline-block;overflow:clip;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.project-title-mask>span{display:inline-block;--title-step:clamp(0,calc(var(--project-title-progress,1)*1.15 - var(--project-word,0)*.07),1);transform:translate3d(0,calc((1 - var(--title-step))*110%),0);opacity:var(--title-step)}
.project-title-mask:nth-child(2){--project-word:1}.project-title-mask:nth-child(n+3){--project-word:2}
.cf-project-caption p{margin:10px 0 0;max-width:44em;color:var(--cf-label);font:400 11px/1.7 var(--cf-mono);text-transform:uppercase;letter-spacing:.04em}
.project-card-arrow{flex:none;color:var(--cf-light);font:400 26px/1.2 var(--cf-body);transition:translate .5s var(--cf-ease)}
.cf-project-link:is(:hover,:focus-visible) .project-card-arrow{translate:3px -3px}
.cf-project .cf-project-link:focus-visible{outline:none}
.cf-project-link:focus-visible .project-title-mask>span{text-decoration:underline;text-decoration-color:var(--cf-light);text-decoration-thickness:2px;text-underline-offset:.14em}
.cf-project-link:focus-visible .project-title-mask>span{transform:none;opacity:1}
.cf-viavia-preview{display:flex;align-items:center;justify-content:center;padding:4% 9% 7%;background:radial-gradient(ellipse at 50% 20%,#25455e,#0d1a2b 70%)}
.cf-viavia-phones{display:flex;align-items:center;justify-content:center;gap:5%;width:100%;height:100%}
.cf-viavia-phones img{display:block;width:30%;height:auto;max-height:100%;object-fit:contain;border:3px solid #344c69;border-radius:14px;box-shadow:0 14px 28px #0208128a;transform:translateY(3%);transition:transform .7s var(--cf-ease)}
.cf-viavia-phones img:nth-child(2){transform:translateY(-3%)}
.cf-project-link:is(:hover,:focus-visible) .cf-viavia-phones img{transform:translateY(0)}
.cf-viavia-preview figcaption{position:absolute;left:5%;right:5%;bottom:4%;display:flex;justify-content:space-between;gap:8px;margin:0;font:400 9px/1.5 var(--cf-mono);letter-spacing:.04em;color:var(--cf-ink)}
.cf-viavia-preview figcaption span{color:var(--cf-label);font-size:8px}
@media(max-width:950px){.cf-work-grid,.projects-grid{gap:40px 24px}.cf-project-caption p{font-size:9px}.cf-viavia-preview figcaption{font-size:8px}.cf-viavia-preview figcaption span{display:none}.cf-viavia-phones img{border-width:2px;border-radius:10px}}
@media(max-width:700px){.cf-work-grid,.projects-grid{grid-template-columns:1fr;gap:28px}.cf-project-caption{padding:20px 0 0}}
/* Quiet states resolve instantly, including mid-scroll or keyboard focus. */
html[data-motion=off] .cf-project-frame{transform:none;opacity:1}
html[data-motion=off] .cf-project-media>img{scale:1}
html[data-motion=off] .project-title-mask>span{transform:none;opacity:1}
@media(prefers-reduced-motion:reduce){.cf-project-frame{transform:none!important;opacity:1!important}.cf-project-media>img{scale:1!important}.project-title-mask>span{transform:none!important;opacity:1!important}.cf-project *,.cf-project :before,.cf-project :after{transition:none!important}}

/* Screens share framing; the surrounding architecture has its own motion. */
.cinema-screen .cf-project-media{width:100%;box-sizing:border-box}
.cinema-screen .cf-project-media>img{height:100%;scale:1;transform:none}
.cinema-screen .cf-viavia-phones img{width:30%;height:auto}

/* 200: the project hero, scaled down, is the card. No second decorative box. */
.cf-project-frame:has(.project-hero-visual){padding:0}
.cf-project-frame:has(.project-hero-visual)>.project-card-border{display:none}
.project-hero-visual.cf-project-media{container-type:inline-size;aspect-ratio:1.6;background:transparent;clip-path:none;border-radius:0;overflow:visible;isolation:isolate}
.project-hero-visual.cf-project-media:after{display:none}
.project-hero-visual.cf-project-media>img{position:absolute;left:50%;top:50%;width:min(88%,calc(54cqw * var(--cover-ratio)));height:auto;aspect-ratio:var(--cover-ratio);max-height:none;object-fit:cover;object-position:center;translate:-50% -50%;scale:1;transform:none;border:1px solid #6b95ac60;border-radius:6px;box-shadow:0 18px 35px -12px #0009;background:#080b12}
.project-portal{position:absolute;inset:-4% 0;width:100%;height:108%;overflow:visible;pointer-events:none}
.project-portal path{vector-effect:non-scaling-stroke;stroke-width:1}
.project-portal-back{stroke:#2b5367;opacity:.62}
.project-portal-light{stroke:#019edb;stroke-width:1.5!important;stroke-dasharray:1;stroke-dashoffset:calc(var(--media-enter,0)*.6);opacity:.75;filter:drop-shadow(0 0 4px #019edb80);transition:opacity .4s}
.project-portal-accent{stroke:#8276ff;opacity:.6}
.cf-project-frame:has(.project-hero-visual)+.cf-project-caption{padding:22px 5% 0}
.cf-project-frame:has(.project-hero-visual)+.cf-project-caption .project-card-title{font-family:var(--cf-display);font-size:clamp(36px,4.5vw,64px);line-height:1.12;letter-spacing:-.025em;text-transform:uppercase}
body[data-experience=cinematic] .cinema-screen:has(.project-hero-visual){width:100%;max-width:min(1500px,calc((100svh - 300px)*1.6));border:0;box-shadow:none;border-radius:0;overflow:visible;transform:none!important}
.cinema-screen:has(.project-hero-visual)::before{display:none}
.cinema-stage:has(.project-hero-visual)>.cinematic-portal{inset:25px auto auto 50%;translate:-50% 0;width:min(100%,1500px,calc((100svh - 300px)*1.6));height:auto;aspect-ratio:1.6}
@media(max-width:950px){body[data-experience=cinematic] .cinema-screen:has(.project-hero-visual){max-width:none}.cf-project-frame:has(.project-hero-visual)+.cf-project-caption{padding-top:14px}}
@media(max-width:950px){.cinema-stage:has(.project-hero-visual)>.cinematic-portal{top:12px;width:100%}}
@media(prefers-reduced-motion:reduce){.project-portal-light{stroke-dashoffset:0;transition:none}}
.cinema-screen .project-hero-visual.cf-project-media>img{height:auto;max-height:none}
.cf-project-link:is(:hover,:focus-visible) .project-hero-visual>img{transform:none}

.cinema-screen .project-portal-light{stroke-dashoffset:calc((1 - var(--cinema-enter,1))*.6)}
html[data-motion=off] .project-portal-light,html[data-case-motion=off] .project-portal-light{stroke-dashoffset:0}

.case-next-image:has(.project-hero-visual){max-height:none;box-shadow:none}
.case-next-image .project-hero-visual>img{height:auto;max-height:none}

/* 216: the case architecture charges on card hover, independent of the screen.
   One reversible trace, then rest. Native page transitions still name only img. */
[data-project-card] .project-portal{inset:-6% auto auto -4%;width:108%;height:112%;transform-origin:50% 50%;transform:perspective(1100px) translateZ(-110px) rotateX(9deg);transition:transform .6s var(--cf-ease)}
[data-project-card] .project-portal-light{stroke:var(--cf-blue);stroke-width:2!important;stroke-dashoffset:1;opacity:0;filter:drop-shadow(0 0 3px var(--cf-light)) drop-shadow(0 0 9px var(--cf-blue));transition:stroke-dashoffset .45s var(--cf-ease),opacity .35s ease}
.cf-project[data-project-card] .project-portal-back{stroke:var(--service-accent,var(--cf-light));opacity:.38;transition:opacity .4s ease}
[data-project-card] .project-portal-accent{opacity:.28;transition:opacity .35s ease}
@media(hover:hover) and (pointer:fine) and (min-width:951px) and (prefers-reduced-motion:no-preference){
 html[data-cinematic-mode=full]:not([data-motion=off]):not([data-case-motion=off]) .cf-project-link:is(:hover,:focus-visible) .project-portal{transform:perspective(1100px) translateZ(0) rotateX(0);transition-duration:.85s}
 html[data-cinematic-mode=full]:not([data-motion=off]):not([data-case-motion=off]) .cf-project-link:is(:hover,:focus-visible) .project-portal-light{stroke-dashoffset:0;opacity:1;transition:stroke-dashoffset 1.05s var(--cf-ease),opacity .24s ease}
 html[data-cinematic-mode=full]:not([data-motion=off]):not([data-case-motion=off]) .cf-project-link:is(:hover,:focus-visible) .project-portal-back{opacity:.6}
 html[data-cinematic-mode=full]:not([data-motion=off]):not([data-case-motion=off]) .cf-project-link:is(:hover,:focus-visible) .project-portal-accent{opacity:.9;transition-delay:.14s}
}
/* Complete, quiet architecture for touch, low-power and reduced-motion views. */
html:is([data-cinematic-mode=off],[data-cinematic-mode=quiet],[data-motion=off],[data-case-motion=off]) [data-project-card] .project-portal{transform:none;transition:none}
html:is([data-cinematic-mode=off],[data-cinematic-mode=quiet],[data-motion=off],[data-case-motion=off]) [data-project-card] .project-portal-light{stroke-dashoffset:0;opacity:.35;filter:none;transition:none}
html:is([data-cinematic-mode=off],[data-cinematic-mode=quiet],[data-motion=off],[data-case-motion=off]) [data-project-card] .project-portal-accent{opacity:.28;transition:none}
@media(hover:none),(pointer:coarse),(max-width:950px),(prefers-reduced-motion:reduce){
 [data-project-card] .project-portal{transform:none;transition:none}
 [data-project-card] .project-portal-light{stroke-dashoffset:0;opacity:.35;filter:none;transition:none}
 [data-project-card] .project-portal-accent{transition:none}
}

/* /projects/connections.css */
/* Quiet, factual bridges. Shared by cases, services and archived reading. */
.project-card-industries{display:block;font:400 12px/1.7 var(--cf-body);color:var(--cf-muted);margin-top:8px}
.connected-work{margin-top:48px;padding-top:28px;border-top:1px solid var(--cf-line);min-width:0}
.connected-work-heading>.eyebrow{font:10px/1.6 var(--cf-mono);color:var(--cf-muted)}
.connected-work-heading h2{font:500 clamp(24px,2vw,34px)/1.3 var(--cf-body);letter-spacing:-.025em;text-transform:none;margin:12px 0 22px;text-wrap:balance}
.connected-work ul,.case-reading-links{list-style:none;padding:0;margin:0}
.connected-work li+li,.case-reading-links li+li{border-top:1px solid var(--cf-line)}
.connected-work li>a{display:grid;grid-template-columns:minmax(0,1fr) 24px;gap:24px;padding:22px 4px;color:var(--cf-ink);min-height:44px;text-decoration:none}
.connected-work strong{display:block;font:500 20px/1.4 var(--cf-body);letter-spacing:-.02em;overflow-wrap:anywhere}
.connected-work-context{display:block;margin-top:8px;color:var(--cf-muted);font:400 15px/1.7 var(--cf-body);max-width:72ch;text-wrap:pretty}
.connected-work-arrow{font-size:24px;color:var(--service-accent,var(--cf-light))}
.connected-work a:hover strong,.case-reading-links a:hover strong{text-decoration:underline;text-underline-offset:5px}
.connected-work a:focus-visible,.case-reading-links a:focus-visible{outline:2px solid var(--service-accent,var(--cf-light));outline-offset:-2px}
.connected-work-more{border-top:1px solid var(--cf-line);margin-top:12px}
.connected-work-more summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:44px;padding:15px 4px;cursor:pointer;font:500 14px/1.6 var(--cf-body);color:var(--cf-ink);list-style:none}
.connected-work-more summary::-webkit-details-marker{display:none}.connected-work-more summary span{color:var(--service-accent,var(--cf-light));font-size:22px}
.service-connected-work{max-width:100%;display:grid;grid-template-columns:.8fr 1.2fr;column-gap:8%}.service-connected-work>ul{grid-column:2;grid-row:1/3}.service-connected-work>.connected-work-more{grid-column:2}
.article-case-proof{padding-block:30px;margin-block:50px}.article-case-proof .connected-work-heading h2{font-size:27px}.article-case-proof .connected-work-context{font-size:15px}.article-case-proof strong{font-size:20px}
.case-connections{width:min(1560px,calc(100% - 2*var(--cf-gutter)));margin:48px auto 0;padding-block:44px;border-bottom:1px solid var(--cf-line);display:grid;grid-template-columns:.9fr 1.1fr;gap:8%;min-width:0}
.case-connections h2{font:500 clamp(26px,2.6vw,38px)/1.25 var(--cf-body);letter-spacing:-.025em;text-transform:none;margin:18px 0 25px;text-wrap:balance}
.case-industries,.case-topic-links{display:flex;flex-wrap:wrap;gap:4px 20px;margin-block:18px}
.case-industries a,.case-topic-links a{display:inline-flex;align-items:center;min-height:44px;gap:20px;font:500 14px/1.6 var(--cf-body);color:var(--cf-ink)}
.case-industries a{border-bottom:1px solid var(--cf-line)}.case-topic-links a{font-weight:400;color:var(--cf-muted)}.case-industries span,.case-topic-links span{color:var(--service-accent,var(--cf-light))}
.case-reading-links{margin-top:14px}.case-reading-links a{display:grid;grid-template-columns:minmax(0,1fr) 22px;gap:24px;padding:22px 0;min-height:44px;color:var(--cf-ink);text-decoration:none}
.case-reading-links strong{font:500 clamp(18px,1.4vw,23px)/1.4 var(--cf-body);overflow-wrap:anywhere;display:block;letter-spacing:-.02em}.case-reading-links small{font:10px/1.6 var(--cf-mono);display:block;margin-top:12px;color:var(--cf-muted)}.case-reading-links a>span:last-child{color:var(--service-accent,var(--cf-light));font-size:24px}
.hub-more-work{margin-top:24px}.hub-more-work>ul{display:grid;grid-template-columns:1fr 1fr;gap:0 36px;list-style:none;padding:0}.hub-more-work a{display:block;padding:20px 4px;min-height:44px;color:var(--cf-ink)}.hub-more-work strong{font:500 20px/1.4 var(--cf-body)}.hub-more-work p{color:var(--cf-muted);font:400 15px/1.7 var(--cf-body);margin-top:8px}
@media(max-width:800px){.case-connections,.service-connected-work{grid-template-columns:1fr;gap:24px}.service-connected-work>ul,.service-connected-work>.connected-work-more{grid-column:auto;grid-row:auto}.hub-more-work>ul{grid-template-columns:1fr}.case-connections{padding-block:32px}.case-connections h2{font-size:29px}.connected-work-context{font-size:14px}.connected-work-heading h2{font-size:27px}}

/* /projects/project-presentation.css */
/* Frameless case imagery. The separate portal retains its own motion. */
.project-hero-visual.cf-project-media:has(.project-mockup){aspect-ratio:var(--cover-ratio);background:transparent;border:0;box-shadow:none}
.project-mockup{--mockup-screen-ratio:4/3;position:absolute;inset:0;container-type:inline-size;isolation:isolate}
.cf-mockup-piece{position:absolute;margin:0;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:inherit}
.project-mockup img{display:block;width:100%;height:auto;max-width:100%;scale:1;transform:none;object-fit:contain}
.cf-mockup-screen-panel{width:85%;left:7%;top:7%;padding:.4cqw;border:1px solid #859aa773;border-radius:.9cqw;background:linear-gradient(145deg,#8396a0,#27353f 32%,#101b24);transform:perspective(160cqw) rotateY(-7deg) rotateX(3deg);box-shadow:.15cqw .15cqw 0 #617480,.4cqw .4cqw 0 #293e4c,.7cqw .7cqw 0 #182731,1cqw 2.8cqw 3.5cqw #0008}
.cf-mockup-screen{position:relative;aspect-ratio:var(--mockup-screen-ratio);overflow:hidden;border-radius:.5cqw;background:#111b26}
/* Shared 4:3 aperture filled edge to edge. Keep the header/left navigation in
   view; crop overflow proportionally instead of stretching or adding mattes. */
.project-mockup[data-mockup-count="1"] .cf-mockup-screen-panel{width:84%;left:8%;top:50%;translate:0 -50%}
.project-mockup .cf-mockup-screen img{position:absolute;inset:0;height:100%;object-fit:cover;object-position:left top}
.cf-mockup-display{background:#17232d;border:1px solid #a3b6c084;border-radius:1cqw;padding:.75cqw;box-shadow:0 2cqw 4cqw #0008;overflow:hidden}
.project-mockup .cf-mockup-display img{aspect-ratio:var(--mockup-screen-ratio);height:auto;object-fit:cover;object-position:left top;background:#111b26;border-radius:0 0 .4cqw .4cqw}
.cf-mockup-bar{height:2cqw;display:flex;gap:.5cqw;align-items:center;padding-left:.5cqw}
.cf-mockup-bar i{width:.4cqw;height:.4cqw;border-radius:50%;background:#81a5b8}
.cf-mockup-paper{background:#e0e5e8;border:1px solid #dce6ed;box-shadow:2px 3px 0 #8798a5,4px 5px 0 #cbd4d8,0 2.6cqw 3.4cqw #0008}
.cf-mockup-phone{padding:.45cqw;border:1px solid #91a7b477;border-radius:2.8cqw;background:linear-gradient(145deg,#647c8a,#18242f 15%,#080e15 60%,#476579);box-shadow:.25cqw .3cqw 0 #405768,.5cqw .5cqw 0 #1c2c37,0 3.5cqw 4cqw #0008}
.cf-mockup-phone img{border-radius:2.5cqw}
[data-mockup-layout=website][data-mockup-count="2"] .cf-mockup-screen-panel{width:80%;left:5%}
[data-mockup-layout=website] .cf-mockup-phone{width:23%;right:5%;top:29%;z-index:2;transform:perspective(160cqw) rotateY(-7deg) rotateX(3deg)}
[data-mockup-layout=partnership] .cf-mockup-screen-panel{width:80%;left:7%;top:5%}
[data-mockup-layout=partnership] .cf-mockup-display{width:36%;right:6%;top:51%;z-index:2}
[data-mockup-layout=partnership] .cf-mockup-paper{width:42%;left:8%;top:65%;z-index:3;transform:perspective(900px) rotateY(7deg) rotateX(5deg) rotateZ(-4deg);transform-origin:left center}
[data-mockup-layout=partnership] .cf-mockup-phone{width:23%;right:6%;top:29%;z-index:2;transform:perspective(160cqw) rotateY(-7deg) rotateX(3deg)}
.cf-mockup-logo{width:43%;left:8%;top:66%;aspect-ratio:1.9;display:flex;align-items:center;box-sizing:border-box;padding:5%;z-index:3;background:#f8f7f5;border:1px solid #dbe2e4;box-shadow:2px 3px 0 #83949b,4px 5px 0 #c8d1d4,0 2.6cqw 3.4cqw #0008;transform:perspective(160cqw) rotateY(7deg) rotateZ(-4deg)}
[data-mockup-layout=phones] .cf-mockup-piece-0{width:27.5%;left:36.25%;top:9%;z-index:2}
[data-mockup-layout=phones] .cf-mockup-piece-1{width:24.5%;left:12%;top:16%;transform:perspective(1000px) rotateY(12deg) rotateZ(-6deg)}
[data-mockup-layout=phones] .cf-mockup-piece-2{width:24.5%;right:12%;top:16%;transform:perspective(1000px) rotateY(-12deg) rotateZ(6deg)}
[data-mockup-layout=phones][data-mockup-count="2"] .cf-mockup-piece-0{width:29%;left:19%;top:11%}
[data-mockup-layout=phones][data-mockup-count="2"] .cf-mockup-piece-1{width:29%;left:auto;right:19%;top:16%;transform:rotate(4deg)}
[data-mockup-layout=boards] .cf-mockup-piece-0{width:83%;top:13%;left:6%;transform:perspective(1200px) rotateY(7deg) rotateZ(-3deg)}
[data-mockup-layout=boards] .cf-mockup-piece-1{width:66%;right:6%;top:48%;transform:perspective(1200px) rotateY(-5deg) rotateZ(3deg);z-index:2}
/* Single presentation boards share the screen proportion, while remaining
   clearly authored design material rather than a fabricated website capture. */
[data-mockup-layout=boards][data-mockup-count="1"] .cf-mockup-piece-0{width:84%;left:8%;top:50%;translate:0 -50%;aspect-ratio:var(--mockup-screen-ratio);background:#111b26}
.project-mockup[data-mockup-layout=boards][data-mockup-count="1"] .cf-mockup-piece-0 img{position:absolute;inset:0;height:100%;object-fit:cover;object-position:left top}
/* Portrait packaging and its identity share the same paper material as brand
   boards. Keep both originals complete and leave the portal visible around them. */
[data-mockup-layout=packaging] .cf-mockup-piece-0{width:45%;left:7%;top:8%;transform:perspective(160cqw) rotateY(7deg) rotateZ(-3deg)}
[data-mockup-layout=packaging] .cf-mockup-piece-1{width:45%;right:5%;top:35%;transform:perspective(160cqw) rotateY(-7deg) rotateZ(3deg);z-index:2}
.cf-mockup-artwork{inset:7%}
.project-mockup .cf-mockup-artwork img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2cqw 3cqw #0006)}
/* Listing artwork leaves room for the architecture, then comes gently forward.
   Scale this inner composition only; the scroll frame and arcs keep their owners. */
[data-project-card] .project-mockup{scale:.92;transform-origin:50% 50%;transform:perspective(1400px) rotateX(var(--mockup-rx,0deg)) rotateY(var(--mockup-ry,0deg));transition:scale .65s var(--cf-ease)}
/* Light belongs to each physical surface, never to the transparent composition
   slot. A faint face reflection supports a brighter, service-coloured rim. */
[data-project-card] .cf-mockup-piece:not(.cf-mockup-artwork)::after{
 content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;
 background:radial-gradient(ellipse at var(--mockup-light-x,50%) var(--mockup-light-y,50%),#ffffff14,transparent 58%),linear-gradient(115deg,transparent 30%,color-mix(in srgb,var(--service-accent,var(--cf-light)) 8%,transparent) 49%,#ffffff0c 51%,transparent 70%);
 background-size:100% 100%,220% 220%;background-position:center,var(--mockup-light-x,50%) var(--mockup-light-y,50%);
 box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--service-accent,var(--cf-light)) 55%,transparent),inset 0 0 16px color-mix(in srgb,var(--service-accent,var(--cf-light)) 18%,transparent);
 opacity:var(--mockup-light,0)
}
@media(hover:hover) and (pointer:fine) and (min-width:951px) and (prefers-reduced-motion:no-preference){
 html[data-cinematic-mode=full]:not([data-motion=off]):not([data-case-motion=off]) .cf-project-link:is(:hover,:focus-visible) .project-mockup{scale:.96}
}
html:is([data-cinematic-mode=off],[data-cinematic-mode=quiet],[data-motion=off],[data-case-motion=off]) [data-project-card] .project-mockup{transform:none;transition:none}
html:is([data-cinematic-mode=off],[data-cinematic-mode=quiet],[data-motion=off],[data-case-motion=off]) [data-project-card] .cf-mockup-piece::after{display:none}
@media(hover:none),(pointer:coarse),(max-width:950px),(prefers-reduced-motion:reduce){[data-project-card] .project-mockup{transform:none;transition:none}[data-project-card] .cf-mockup-piece::after{display:none}}
/* Keep the full composition in the same slot from a card to a case opening. */
body[data-experience=cinematic] .cinema-screen:has(.project-mockup){max-width:min(1320px,calc((100svh - 360px)*1.21858))}
.cinema-stage:has(.project-mockup)>.cinematic-portal{top:0;width:min(116%,1531px,calc((100svh - 360px)*1.41355));aspect-ratio:1745/1432}
.cinema-title+.cinema-note{line-height:1.7}
@media(max-width:950px),(max-height:600px){body[data-experience=cinematic] .cinema-screen:has(.project-mockup){max-width:none}.cinema-stage:has(.project-mockup)>.cinematic-portal{width:116%}}
@media(max-height:600px) and (min-width:700px){.cinema-stage:has(.project-mockup)>.cinematic-portal{left:0;translate:-7% 0;width:69%}}
/* The hero is shown once. Its introduction is a compact editorial reading beat. */
body[data-experience=cinematic] .case-opening{display:block}
.case-opening .opening-copy{max-width:none;display:grid;grid-template-columns:1.15fr 1fr;gap:20px 8%}
.case-opening .opening-copy>.eyebrow{grid-column:1/-1}
.case-opening .opening-copy h1{margin:0}
.case-opening .opening-bottom{align-self:center}
.case-opening .opening-bottom>p{margin-top:0}
.case-opening .project-launch{margin-top:16px}
.case-opening .launch{display:inline-flex;margin-top:22px}
@media(max-width:900px){.case-opening .opening-copy{grid-template-columns:1fr;gap:24px}.case-opening .opening-bottom{max-width:650px}}

/* /project-continuity.css */
/* Project images arrive in their final layout, without a travelling snapshot. */
@view-transition{navigation:none}


/* One native next-project link owns the complete panel, including its padding. */
.case-next:has(>.case-next-link){padding:0;--next-panel-gutter:max(var(--case-gutter,4vw),calc((100vw - var(--case-width,1560px))/2))}
.case-next>.case-next-link{width:100%;max-width:none;padding:clamp(24px,2vw,40px) var(--next-panel-gutter) calc(70px + env(safe-area-inset-bottom,0px));min-height:calc(clamp(160px,18svh,270px) + clamp(24px,2vw,40px) + 70px);outline-offset:-8px}
.case-next>.case-next-link:has(.case-next-image){padding-right:calc(var(--next-panel-gutter) + 65px)}
.case-next>.case-next-link:has(.case-next-image) .case-next-arrow{right:var(--next-panel-gutter)}
.case-next>.case-next-link:focus-visible{outline:2px solid var(--cf-light);outline-offset:-8px}
.case-next-link .case-next-footer{gap:24px;flex-wrap:wrap;line-height:1.5}
.case-next-link .case-next-meter{display:block;width:clamp(90px,9vw,160px);height:2px;overflow:hidden;background:var(--cf-line)}
.case-next-link .case-next-meter>i{display:block;height:100%;background:var(--service-accent,var(--cf-blue));transform-origin:left;transform:scaleX(0);transition:transform .42s cubic-bezier(.22,.72,.2,1)}
.case-next-link:is(:hover,:focus-visible) .case-next-meter>i{transform:scaleX(1)}
@media(max-width:600px){.case-next>.case-next-link:has(.case-next-image){padding-right:var(--next-panel-gutter)}.case-next>.case-next-link{padding-top:35px;padding-bottom:calc(45px + env(safe-area-inset-bottom,0px));min-height:315px}.case-next-link .case-next-footer{gap:18px}}
@media(prefers-reduced-motion:reduce),(forced-colors:active),(hover:none),(pointer:coarse){.case-next-link .case-next-meter>i{transform:scaleX(1);transition:none}.case-next-link .case-next-arrow{transition:none;transform:none}}
html:is([data-motion=off],[data-case-motion=off]) .case-next-link .case-next-meter>i{transform:scaleX(1);transition:none}
html:is([data-motion=off],[data-case-motion=off]) .case-next-link .case-next-arrow{transition:none;transform:none}

/* /site-shell/page-curtain.css */
/* One matching night-canvas pass; header anchored, official chevron in the sweep. */
#site-page-curtain {
  position: fixed;
  inset: -2px;
  z-index: 2147483000;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  contain: strict;
  isolation: isolate;
}
#site-page-curtain[data-phase="covering"],
#site-page-curtain[data-phase="covered"],
#site-page-curtain[data-phase="revealing"] {
  visibility: visible;
  pointer-events: auto;
  touch-action: none;
}
.cf-curtain-strip {
  position: absolute;
  top: calc(var(--shell-height, 96px) + env(safe-area-inset-top, 0px) + 2px);
  left: 0;
  width: calc(100% + 168px);
  height: calc(100% - var(--shell-height, 96px) - env(safe-area-inset-top, 0px) - 2px);
  transform: translateX(calc(-100vw - 100%));
  /* Every pixel of the central sheet is opaque. The glass boundary is cosmetic. */
  background: var(--cf-night, #080b12);
}
.cf-curtain-strip::before,
.cf-curtain-strip::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 168px;
  pointer-events: none;
  /* Only the sheet is composited; never re-blur a live WebGL page as it moves. */
}
/* A soft dark boundary conceals the content immediately ahead of the cover. */
.cf-curtain-strip::after {
  right: -168px;
  background: linear-gradient(90deg, var(--cf-night, #080b12), #080b12d9 24%, #080b124d 70%, transparent);
}
/* The clearing edge lets the destination come into focus in its final position. */
.cf-curtain-strip::before {
  left: -168px;
  background: linear-gradient(90deg, transparent, #080b124d 30%, #080b12d9 76%, var(--cf-night, #080b12));
}
.cf-curtain-edge {
  position: absolute;
  inset: 0 -168px 0 auto;
  width: 1px;
  background: linear-gradient(180deg, transparent, #019edb66 35%, #67ddff99 54%, transparent);
}
.cf-curtain-chevron {
  position: absolute;
  left: calc((100% - 168px) / 2);
  top: 50%;
  width: clamp(88px, 9vw, 180px);
  aspect-ratio: 25.911 / 38.858;
  height: auto;
  display: block;
  transform: translate(-50%, -50%);
  fill: #019edb;
  pointer-events: none;
}
#site-page-curtain[data-phase="revealing"] .cf-curtain-edge { left: -168px; right: auto; }
#site-page-curtain[data-phase="covering"] .cf-curtain-strip::before,
#site-page-curtain[data-phase="covered"] .cf-curtain-strip::before,
#site-page-curtain[data-phase="revealing"] .cf-curtain-strip::after { display: none; }
#site-page-curtain[data-phase="covered"] .cf-curtain-strip,
#site-page-curtain[data-phase="revealing"] .cf-curtain-strip { transform: translateX(0); }
#site-page-curtain:not([data-phase="idle"]) .cf-curtain-strip { will-change: transform; }
#site-page-curtain .cf-curtain-header {
  position: absolute;
  inset: 2px 2px auto;
  z-index: 2;
  pointer-events: none;
  /* Shared header selectors provide its exact material, type and breakpoints. */
}
@media (max-width: 600px) {
  .cf-curtain-strip::before, .cf-curtain-strip::after { width: 80px; }
  .cf-curtain-strip::before { left: -80px; }
  .cf-curtain-strip::after { right: -80px; }
  .cf-curtain-edge { right: -80px; }
  #site-page-curtain[data-phase="revealing"] .cf-curtain-edge { left: -80px; }
}
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  #site-page-curtain { display: none !important; }
}
html[data-motion="off"] #site-page-curtain { display: none !important; }