.works{position:relative;background:#0c0815;color:white;scroll-margin-top:0}.works-pin{position:relative;overflow:clip;padding:60px 24px}.work-backgrounds{position:absolute;inset:0;overflow:hidden;pointer-events:none}.work-backdrop{position:absolute;inset:-8%;will-change:transform,opacity}.work-backdrop img{width:100%;height:100%;object-fit:cover;filter:blur(30px)}.work-tint{position:absolute;inset:0;background:linear-gradient(180deg,#0b061cc7 0%,#11092155 45%,#0b061cbf 100%)}.works-heading{position:relative;z-index:3;text-align:center;pointer-events:none}.works-heading .tiny{color:#c5b9d5;font-size:9px;letter-spacing:3px;display:block;margin-bottom:14px}.works-heading h2{font-size:clamp(35px,4.3vw,62px);font-weight:550;letter-spacing:-2.7px;line-height:1.05}.works-heading em{color:#c4a0ff}.works-stage{position:relative;display:grid;gap:28px;width:min(760px,90%);margin:50px auto}.work-card{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:22px;background:#191222;border:1px solid #ffffff20;box-shadow:0 25px 80px #0006;backface-visibility:hidden}.work-card img{width:100%;height:100%;object-fit:cover;display:block}.work-scrim{position:absolute;inset:0;background:black;pointer-events:none;opacity:0}.works-meta,.works-footer{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;width:min(1120px,90%);margin:0 auto;gap:25px}.work-counter{font-size:15px;font-variant-numeric:tabular-nums;color:#b6a9c6;white-space:nowrap}.work-counter b{color:white;font-weight:500}.work-caption{text-align:center}.work-caption h3{font-size:27px;font-weight:550;margin:0 0 7px;letter-spacing:-.8px}.work-caption p{font-size:13px;letter-spacing:.2px;color:#d0c4dc;margin:0}.work-open{border:1px solid #ffffff50;border-radius:100px;background:#ffffff09;padding:15px 23px;font-size:14px;color:white;backdrop-filter:blur(12px);display:flex;gap:20px;align-items:center;transition:background .2s,border-color .2s;white-space:nowrap}.work-open:hover{background:#7500ff;border-color:#b285ff}.work-open span{font-size:20px}.works-footer{margin-top:35px;font-size:8px;letter-spacing:2.5px;color:#c1b4cd}.works-footer>span b{font-size:16px;font-weight:400;margin-left:14px}.work-progress{height:2px;background:#ffffff25;width:130px;border-radius:2px;overflow:hidden}.work-progress i{height:100%;display:block;background:#c7a1ff;width:12.5%;transform-origin:left}.work-controls{display:flex;gap:8px}.work-controls button{border:1px solid #ffffff3b;background:#ffffff08;color:white;border-radius:50%;width:37px;height:37px;font-size:18px;transition:background .2s}.work-controls button:hover{background:#7500ff}.work-controls button:disabled{opacity:.3;cursor:default;background:none}
.works.is-ready{height:520vh}.is-ready .works-pin{position:sticky;top:0;height:100svh;min-height:550px;padding:0}.is-ready .works-heading{position:absolute;inset:40px 20px auto}.is-ready .works-stage{position:absolute;inset:0;margin:0;width:100%;perspective:1900px;transform-style:preserve-3d;display:block}.is-ready .work-card{position:absolute;left:50%;top:45%;width:min(76vw,800px,calc((100svh - 320px)*1.6));will-change:transform,opacity}.is-ready .works-meta{position:absolute;inset:auto 0 83px}.is-ready .works-footer{position:absolute;inset:auto 0 25px;margin-top:0}.is-ready .work-caption{position:absolute;left:50%;transform:translateX(-50%);width:50%;pointer-events:none}.is-ready .work-open{margin-left:auto}
#case-detail{padding:0;width:min(1000px,calc(100vw - 40px));max-width:1000px;max-height:90svh;overflow:auto;background:#12101a;color:white;border:1px solid #d9c3ff40;border-radius:22px}#case-detail::backdrop{background:#080310ce;backdrop-filter:blur(14px)}#case-image{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}.case-close{position:absolute;z-index:1;right:16px;top:16px;width:40px;height:40px;border:1px solid #ffffff60;border-radius:50%;background:#10091cc9;color:white;font-size:26px;backdrop-filter:blur(12px)}.case-info{padding:30px 38px 38px}.case-info .tiny{color:#b9a0d3}.case-info h2{margin:12px 0 16px;font-size:38px;color:white}.case-info p{margin:0 0 25px;color:#d0c7db;font-size:16px;line-height:1.65;max-width:730px}.case-tags{font-size:12px;color:#bd99ec;letter-spacing:.4px}
@media(max-width:1000px){.is-ready .works-pin{min-height:560px}.is-ready .works-heading{top:50px}.works-heading h2{font-size:36px;letter-spacing:-1.8px}.works-heading .tiny{font-size:8px}.is-ready .work-card{width:90vw;border-radius:16px;top:44%}.is-ready .works-meta{bottom:120px;width:90%;align-items:flex-end;gap:12px}.work-counter{font-size:12px;padding-bottom:15px}.is-ready .work-caption{bottom:68px;width:100%}.work-caption h3{font-size:24px}.work-caption p{font-size:12px}.work-open{font-size:12px;padding:12px 18px;gap:12px}.is-ready .works-footer{bottom:40px;width:90%}.work-progress{width:65px}.works-footer{font-size:7px;letter-spacing:1.5px}.case-info{padding:24px}.case-info h2{font-size:30px}.case-info p{font-size:14px}}
@media(prefers-reduced-motion:reduce){.works.is-ready{height:auto}.is-ready .works-pin{position:relative;height:auto;min-height:0;padding:50px 20px}.is-ready .works-heading{position:relative;inset:auto}.is-ready .works-stage{position:relative;display:grid;gap:25px;inset:auto;width:min(800px,100%);margin:35px auto;perspective:none}.is-ready .work-card{position:relative;inset:auto;width:100%;transform:none!important;opacity:1!important;visibility:visible!important}.work-scrim{display:none}.is-ready .works-meta{position:relative;inset:auto;width:100%;margin-top:40px;display:flex;flex-wrap:wrap}.is-ready .work-caption{position:relative;left:auto;bottom:auto;transform:none;width:100%;order:-1;text-align:left}.is-ready .works-footer{position:relative;inset:auto;margin:30px auto 0;width:100%}.works-footer>span{visibility:hidden}}

.portfolio-flow{position:relative;isolation:isolate;--ground-dark:0;--flow-ink:#252525;--flow-muted:#666}.page-ground{position:sticky;top:0;height:100svh;margin-bottom:-100svh;z-index:-1;background:#151515;overflow:hidden;pointer-events:none}.ground-wash{position:absolute;inset:0;background:#fff;opacity:calc(1 - var(--ground-dark))}.portfolio-flow .can{padding-bottom:100px;color:var(--flow-ink)}.portfolio-flow .can-h,.portfolio-flow .can-d{color:var(--flow-ink)}.portfolio-flow .can-h .muted{color:var(--flow-muted)}.works{background:transparent;color:var(--flow-ink)}.works-heading em{font-style:normal;color:var(--flow-muted)}.works-heading h2{font-weight:500;letter-spacing:-.04em}.works-heading .tiny{font-size:12px;letter-spacing:0;color:var(--flow-muted)}.work-counter,.work-caption p,.works-footer{color:var(--flow-muted)}.work-counter b{color:var(--flow-ink)}.work-open{color:var(--flow-ink)}.work-open:hover,.work-controls button:hover{background:#fff;color:#252525;border-color:#fff}.work-progress i{background:white}.work-tint{background:#080b0ecc}.work-card{display:block;text-decoration:none;color:white}.cover-copy{position:absolute;inset:8% 7%;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:12px}.cover-copy>span{font-size:clamp(10px,1.1vw,16px);opacity:.85}.cover-copy strong{font-size:clamp(26px,4vw,56px);line-height:1.05;font-weight:500;letter-spacing:-.05em;max-width:80%}.cover-copy small{margin-top:auto;font-size:12px;border:1px solid #ffffff50;border-radius:30px;padding:8px 13px;backdrop-filter:blur(8px)}.light-cover{color:#252525}.light-cover small{border-color:#25252550}.how{margin-top:0}.is-ready .works-heading{top:110px}.is-ready .work-card{top:48%}.is-ready .works-stage{mask-image:linear-gradient(to bottom,transparent 7%,#000 25%,#000 72%,transparent 86%)}.nav-wrap.menu-open .navpill .top-link{max-width:220px;opacity:1;margin-left:0}.menu-panel{overflow-y:auto}.navpill a:focus-visible,.work-open:focus-visible,.work-card:focus-visible{outline:2px solid #999;outline-offset:5px}
@media(max-width:1000px){.is-ready .works-heading{top:96px}.is-ready .work-card{top:45%;width:min(90vw,calc((100svh - 320px)*1.6))}.is-ready .works-stage{mask-image:linear-gradient(to bottom,transparent 10%,#000 25%,#000 61%,transparent 73%)}.cover-copy{gap:7px}.cover-copy strong{font-size:clamp(25px,6vw,46px)}.cover-copy small{font-size:10px;padding:6px 10px}.portfolio-flow .can{padding-bottom:65px}.menu-panel{max-width:calc(100vw - 40px)}.nav-wrap.menu-open .menu-panel{max-height:calc(100svh - 105px)}}
@media(prefers-reduced-motion:reduce){.is-ready .works-heading{top:auto}.is-ready .works-stage{mask-image:none}.is-ready .work-card{top:auto;width:100%}.page-ground{display:none}.portfolio-flow{background:#fff!important;--flow-ink:#252525!important;--flow-muted:#666!important}.work-card{min-height:200px}.work-controls,.works-footer,.works-meta{display:none!important}.works.is-ready{height:auto}.work-card .cover-copy{color:white}.work-card.light-cover .cover-copy{color:#252525}}

@media(prefers-reduced-motion:reduce){.work-card{pointer-events:auto!important}}

/* Real website screens in responsive laptop mockups. */
.blend-logo{position:fixed;left:50px;top:38px;width:97px;height:21px;z-index:110;mix-blend-mode:difference;display:block}
.blend-logo .logo{position:static;width:100%;height:100%;filter:invert(1);background:transparent;border-radius:0;box-shadow:none;display:block}
.work-card{background:radial-gradient(ellipse at 50% 20%,#eff0ee,#afb4b2);border:1px solid #ffffff35;box-shadow:0 30px 80px #0003;color:#252525;overflow:hidden}
.mockup-dushoy{background:radial-gradient(ellipse at 50% 15%,#e2d9c9,#a99c86)}.mockup-neprotoptano{background:radial-gradient(ellipse at 50% 15%,#e0e5dd,#8d9b93)}.mockup-ganatera{background:radial-gradient(ellipse at 50% 15%,#e2eeed,#8ba6ac)}.mockup-hermoflex{background:radial-gradient(ellipse at 50% 15%,#e8e5df,#a09d95)}.mockup-vatnara{background:radial-gradient(ellipse at 50% 15%,#dce5ce,#8c9980)}.mockup-yudin{background:radial-gradient(ellipse at 50% 15%,#daedf1,#84a8b9)}
.mockup-label{position:absolute;top:6%;left:7%;right:7%;display:flex;justify-content:space-between;align-items:center;font-size:clamp(13px,1.6vw,22px);font-weight:500;letter-spacing:-.03em}.mockup-label small{font-size:clamp(8px,.85vw,12px);font-weight:400;letter-spacing:0}
.laptop{display:block;position:absolute;width:72%;left:14%;top:17%;perspective:1200px;filter:drop-shadow(0 23px 17px #0004);transform:rotate(-3deg)}
.laptop-screen{position:relative;display:block;padding:1.4% 1.1% 1.8%;background:linear-gradient(125deg,#777,#171717 20%,#333 85%,#999);border:1px solid #8c8c8c;border-radius:clamp(5px,1vw,14px);box-shadow:inset 0 0 0 2px #222;overflow:hidden}
.laptop-screen img{width:100%;height:auto;aspect-ratio:1425/900;object-fit:contain;border-radius:2px}
.laptop-camera{position:absolute;left:50%;top:.4%;width:3px;height:3px;border-radius:50%;background:#151e28}
.laptop-base{position:relative;display:block;margin-left:-7%;width:114%;height:clamp(5px,1.15vw,16px);background:linear-gradient(#e4e4e4 0%,#a8aaac 45%,#686a6d 80%,#c5c5c5);border-radius:1px 1px 45% 45% / 1px 1px 80% 80%;box-shadow:0 4px 3px #0003}
.laptop-base:before{content:'';position:absolute;left:42%;width:16%;height:40%;background:linear-gradient(#929497,#d0d0d0);border-radius:0 0 8px 8px}
.portfolio-exit{height:35svh;background:transparent}.portfolio-flow{background:#fff}.is-ready .works-stage{mask-image:linear-gradient(to bottom,transparent 20%,#000 29%,#000 75%,transparent 86%)}
.work-open,.work-controls button{color:var(--flow-ink);border-color:var(--flow-line,#ffffff50)}.work-progress{background:var(--flow-line,#ffffff25)}.work-progress i{background:var(--flow-ink)}
@media(max-width:1000px){.blend-logo{left:20px;top:26px;width:86px;height:19px}.laptop{top:19%;width:70%;left:15%}.mockup-label{top:7%;font-size:13px}.mockup-label small{font-size:8px}.is-ready .works-stage{mask-image:linear-gradient(to bottom,transparent 23%,#000 31%,#000 62%,transparent 73%)}}
@media(prefers-reduced-motion:reduce){.is-ready .works-stage{mask-image:none}.portfolio-exit{height:60px}}
@media(min-width:1001px){.is-ready .work-card{top:52%;width:min(76vw,760px,calc((100svh - 380px)*1.6))}.is-ready .works-stage{mask-image:linear-gradient(to bottom,transparent 21%,#000 28%,#000 77%,transparent 86%)}}

.portfolio-flow{background:#101214}.portfolio-exit{display:none}.scene-card{background:#17191b}.scene-card>img{width:100%;height:100%;object-fit:cover}.works-heading,.works-meta,.works-footer{will-change:opacity}
.how{position:relative;z-index:1;margin-top:-40svh}@media(prefers-reduced-motion:reduce){.how{margin-top:0}}