/* 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}}