.mp-intro{grid-template-columns:1.3fr 1fr;align-items:end;gap:80px;padding:55px 9% 75px;display:grid}.mp-intro h1{letter-spacing:-.045em;white-space:pre-line;margin:0;font-size:clamp(55px,6.2vw,106px);font-weight:550;line-height:1.05}.mp-intro>p{color:#c4c2bd;max-width:340px;margin:0 0 4px;font-size:22px;line-height:1.6}.mp-work{background:var(--pf-light);color:#252523;padding:55px 9% 100px}.mp-filters{border-bottom:1px solid #25252330;flex-wrap:wrap;gap:16px 30px;padding-bottom:24px;display:flex}.mp-filters button{color:#77776f;cursor:pointer;background:0 0;border:0;border-bottom:2px solid #0000;padding:10px 0;font-size:17px}.mp-filters button[aria-pressed=true]{color:#252523;border-bottom-color:#dc6249}.mp-count{color:#74746c;margin:24px 0 35px;font-size:13px}.mp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:65px 40px;display:grid}.mp-stage{perspective:1300px;cursor:pointer;color:#252523;background:#dbe2df;border:0;width:100%;height:610px;display:block;position:relative;overflow:hidden}.mp-device{filter:drop-shadow(20px 30px 18px #17251d35);width:228px;transition:transform .55s cubic-bezier(.22,1,.36,1);position:absolute;top:48px;left:calc(50% - 114px);transform:rotate(-7deg)rotateY(-17deg)rotateX(5deg)}.mp-tone-1 .mp-device,.mp-tone-3 .mp-device{transform:rotate(8deg)rotateY(-17deg)rotateX(5deg)}.mp-stage:hover .mp-device{transform:rotate(-3deg)rotateY(-10deg)rotateX(3deg)translateY(-5px)}.mp-tone-1 .mp-stage:hover .mp-device,.mp-tone-3 .mp-stage:hover .mp-device{transform:rotate(4deg)rotateY(-10deg)rotateX(3deg)translateY(-5px)}.mp-screen-action{justify-content:space-between;align-items:center;font-size:13px;display:flex;position:absolute;bottom:23px;left:25px;right:25px}.mp-caption{justify-content:space-between;align-items:start;gap:25px;padding-top:22px;display:flex}.mp-caption h2{letter-spacing:-.035em;margin:0 0 8px;font-size:28px;font-weight:550;line-height:1.15}.mp-caption p{color:#75756d;margin:0 0 5px;font-size:13px;line-height:1.5}.mp-caption>a{border:1px solid #25252335;border-radius:50%;flex-shrink:0;place-items:center;width:39px;height:39px;display:grid}.mp-pending{cursor:default;flex-direction:column;justify-content:center;align-items:flex-start;padding:50px;display:flex;background:#e7e5df!important}.mp-pending p{letter-spacing:-.03em;margin:0 0 20px;font-size:34px;font-weight:500;line-height:1.15}.mp-pending>span{max-width:250px;font-size:18px;line-height:1.5}.mp-pending>a{border-bottom:1px solid #25252370;align-items:center;gap:25px;margin-top:30px;padding-bottom:8px;font-size:16px;display:inline-flex}.mp-empty{padding:50px 0;font-size:22px}.mp-close{padding:100px 9% 110px}.mp-close h2{letter-spacing:-.045em;margin:0 0 40px;font-size:clamp(50px,6vw,90px);font-weight:500;line-height:1.08}.mp-dialog{color:#252523;background:#fafaf7;border:0;border-radius:5px;width:430px;max-width:calc(100vw - 30px);max-height:90svh;padding:0;box-shadow:0 30px 90px #0006}.mp-dialog::backdrop{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#111c}.mp-dialog-header{z-index:2;background:#fafaf7;border-bottom:1px solid #25252320;justify-content:space-between;align-items:center;gap:20px;padding:18px 20px;display:flex;position:sticky;top:0}.mp-dialog-header h2{letter-spacing:-.025em;margin:0;font-size:19px;font-weight:550}.mp-dialog-header button{cursor:pointer;background:0 0;border:0;place-items:center;width:30px;height:30px;display:grid}.mp-dialog>img{width:100%;height:auto;display:block}.mp-dialog-link{justify-content:center;align-items:center;gap:25px;padding:22px;font-size:16px;display:flex}.mp-dialog :is(a,button):focus-visible{outline:3px solid var(--pf-accent);outline-offset:3px}@media (width>=1600px){.mp-stage{height:720px}.mp-device{width:280px;top:48px;left:calc(50% - 140px)}}@media (width<=1000px) and (width>=761px){.mp-grid{gap:50px 25px}.mp-work{padding-left:6%;padding-right:6%}.mp-stage{height:570px}.mp-device{width:210px;left:calc(50% - 105px)}.mp-intro{gap:35px;padding-left:6%;padding-right:6%}.mp-intro>p{font-size:19px}}@media (width<=760px){.mp-intro{padding:45px 6% 55px;display:block}.mp-intro h1{margin-bottom:28px;font-size:45px;line-height:1.08}.mp-intro>p{max-width:310px;font-size:18px;line-height:1.6}.mp-work{padding:30px 6% 60px}.mp-filters{gap:10px 23px;padding-bottom:17px}.mp-filters button{padding:8px 0;font-size:14px}.mp-count{margin:22px 0 26px;font-size:12px}.mp-grid{grid-template-columns:minmax(0,1fr);gap:45px}.mp-stage{height:575px}.mp-device{width:230px;top:38px;left:calc(50% - 115px)}.mp-screen-action{font-size:12px;bottom:20px;left:21px;right:21px}.mp-caption{padding-top:19px}.mp-caption h2{font-size:27px}.mp-caption p{font-size:13px}.mp-pending{height:360px;padding:34px}.mp-pending p{font-size:31px}.mp-pending>span{font-size:17px}.mp-close{padding:60px 6% 70px}.mp-close h2{font-size:43px}.mp-dialog{max-height:88svh}.mp-dialog-header{padding:15px}.mp-dialog-header h2{font-size:18px}}@media (prefers-reduced-motion:reduce){.mobile-portfolio *{transition:none!important;animation:none!important}.mp-stage:hover .mp-device{transform:rotate(-7deg)rotateY(-17deg)rotateX(5deg)}.mp-tone-1 .mp-stage:hover .mp-device,.mp-tone-3 .mp-stage:hover .mp-device{transform:rotate(8deg)rotateY(-17deg)rotateX(5deg)}}.mobile-portfolio[lang=id] .mp-intro h1{font-size:clamp(52px,5.2vw,88px)}@media (width<=760px){.mobile-portfolio[lang=id] .mp-intro h1{font-size:39px}}.mp-dialog{margin:auto}.mp-paired .pf-laptop{width:83%;top:90px;left:3%}.mp-paired .mp-device{width:145px;top:140px;left:auto;right:6%;transform:rotate(7deg)}.mp-paired .pf-laptop-display{border-radius:10px 10px 3px 3px;padding:8px 7px 12px}.mp-paired .pf-laptop-display img{aspect-ratio:16/10}.mp-paired .pf-laptop-base{height:12px}.mp-paired.mp-pending{justify-content:flex-end;padding:25px}.mp-paired.mp-pending p{margin-bottom:5px;font-size:17px}.mp-paired.mp-pending>span{font-size:14px}.mp-paired.mp-pending .pf-laptop{top:60px}@media (width<=760px){.mp-paired .pf-laptop{top:55px}.mp-paired .mp-device{width:128px;top:120px}}.mp-stage.mp-paired{height:540px}@media (width<=760px){.mp-stage.mp-paired{height:450px}}.mp-device{container-type:inline-size}.mp-device .pf-phone-face{border-radius:11cqw;padding:2.4cqw;box-shadow:inset 0 0 0 1px #a8aaa5,inset 0 0 0 2px #151515,2px 1px #777a73,4px 2px #252823}.mp-device .pf-phone-edge{border-radius:11cqw;inset:1px -3px -1px 1px;box-shadow:4px 3px 9px #0004}.mp-device .pf-phone-screen{border-radius:8.6cqw}.mp-device .pf-camera{width:24cqw;height:6cqw;top:2cqw}.mp-device .pf-camera:after{width:2cqw;height:2cqw;top:1.4cqw;right:3cqw}.mp-device .pf-side-key{width:2px;height:12cqw;right:-3px}.mp-paired .pf-laptop-display .pf-laptop-viewport img{aspect-ratio:auto;height:100%}.mp-paired:hover .mp-device{transform:rotate(5deg)translateY(-3px)}@media (prefers-reduced-motion:reduce){.mp-paired:hover .mp-device{transform:rotate(7deg)}}.mp-work{color:#252523;background:#f7f7f7}.mp-filters{border-bottom-color:#25252330}.mp-filters button,.mp-count,.mp-caption p{color:#656561}.mp-filters button[aria-pressed=true]{color:#252523}.mp-caption>a{border-color:#25252350}.mp-stage{color:#252523;background:#dce2de}.mp-tone-1 .mp-stage{background:#e0e1e5}.mp-tone-2 .mp-stage{background:#e3e1dd}.mp-tone-3 .mp-stage{background:#e2dfe2}.mp-pending{background:#e7e7e7!important}