.works-section{z-index:99999;pointer-events:none;width:100%;display:flex;position:relative}.works-section section{width:95%;max-width:1415px;margin:0 auto;padding:0 81px;display:flex;position:relative}.works-section section .left-section{flex-direction:column;justify-content:space-between;height:100vh;padding-top:10%;padding-bottom:20%;display:flex;position:sticky;top:0}.works-section section .left-section .categories{pointer-events:auto;flex-direction:column;gap:24px;margin-bottom:80px;padding:16px;display:flex;position:relative}.works-section section .left-section .categories svg{position:absolute}.works-section section .left-section .categories svg.bottom-right{bottom:0;right:0}.works-section section .left-section .categories svg.top-right{top:0;right:0}.works-section section .left-section .categories svg.top-left{top:0;left:0}.works-section section .left-section .categories svg.bottom-left{bottom:0;left:0}.works-section section .left-section .categories .category{cursor:pointer;border-bottom:1px solid #0000;border-image-source:linear-gradient(90deg,#3e3e3e 2%,#3e3e3e80 48.5%,#3e3e3e00 98%);border-image-slice:1;width:240px;height:44px;padding-bottom:24px}.works-section section .left-section .categories .category:hover .wrap h3,.works-section section .left-section .categories .category.active .wrap h3{color:#fff}.works-section section .left-section .categories .category .wrap{align-items:center;gap:8px;display:flex}.works-section section .left-section .categories .category .wrap h3{letter-spacing:-.04em;text-transform:uppercase;font-size:20px;font-weight:500;line-height:100%}.works-section section .left-section .project-details{pointer-events:auto;flex-direction:column;gap:16px;display:flex}.works-section section .left-section .project-details .txt{letter-spacing:-.04em;color:#fff;font-size:20px;font-style:normal;font-weight:500;line-height:28px}.works-section section .left-section .project-details .btn{cursor:pointer;background:0 0;justify-content:center;align-items:center;width:110px;height:54px;display:flex;position:relative;overflow:hidden}.works-section section .left-section .project-details .btn p{letter-spacing:-.04em;color:#bebfc1;z-index:2;font-size:20px;font-style:normal;font-weight:500;line-height:100%;transition:color .4s}.works-section section .left-section .project-details .btn svg{pointer-events:none;z-index:2;transition:stroke .4s;position:absolute;top:-2px;left:-2px}.works-section section .left-section .project-details .btn:before{content:"";opacity:0;z-index:1;background:radial-gradient(#ffffff1a 0%,#0000 70%);transition:opacity .6s;position:absolute;inset:0}.works-section section .left-section .project-details .btn:after{content:"";z-index:1;background:linear-gradient(120deg,#0000,#fff3,#0000);width:50%;height:100%;transition:all .6s;position:absolute;top:0;left:-75%;transform:skew(-20deg)}.works-section section .left-section .project-details .btn:hover p{color:#d45009}.works-section section .left-section .project-details .btn:hover svg path{stroke:#d45009}.works-section section .left-section .project-details .btn:hover:before{opacity:1}.works-section section .left-section .project-details .btn:hover:after{transition:all .8s cubic-bezier(.4,0,.2,1);left:130%}.works-section section .left-section .project-details h1{letter-spacing:-.025em;color:#fff;white-space:nowrap;font-family:Grotesk,sans-serif;font-size:104px;font-weight:400;line-height:60%}.works-section section .left-section .project-details h1 .number{font-family:Guton,sans-serif;font-size:80px;font-weight:600}.works-section section .left-section .project-details .wrap{align-items:center;gap:13px;display:flex}.works-section section .left-section .project-details .wrap h3{letter-spacing:-.04em;color:#fff;font-size:20px;font-style:normal;font-weight:500;line-height:28px}.works-section section .left-section .project-details .wrap p{letter-spacing:-.04em;color:#5f6061;font-size:20px;font-style:normal;font-weight:500;line-height:28px}.works-section section .right-section{pointer-events:none;flex:1;justify-content:flex-end;align-items:center;height:fit-content;padding-left:0;display:flex}.works-section section .right-section .no-projects{text-align:center;justify-content:center;align-items:center;width:80%;height:100vh;display:flex}.works-section section .right-section .no-projects p{color:#fff;margin:0;font-family:Grotesk,sans-serif;font-size:42px;font-weight:400}.works-section section .right-section .projects-column{flex-direction:column;align-items:flex-end;gap:120px;padding:200px 0;display:flex}.works-section section .right-section .project-box{opacity:.3;scroll-snap-align:center;pointer-events:auto;perspective:1000px;border:1px solid #ff9e6a79;border-radius:5px;width:620px;height:434px;padding:10px 10px 20px;transition:box-shadow .4s,transform .4s,border-color .4s,clip-path .4s;position:relative;overflow:hidden;transform:scale(.7)}.works-section section .right-section .project-box:hover{clip-path:polygon(0 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%);background:#d4500947;border-color:#d4500959;transform:translateY(-4px);box-shadow:0 18px 40px #00000073,0 0 0 1px #d450092e}.works-section section .right-section .project-box:hover:after{opacity:1}.works-section section .right-section .project-box .video-container{width:100%;height:100%;position:relative}.works-section section .right-section .project-box .video-container .video-controls{z-index:10;gap:12px;display:flex;position:absolute;top:16px;right:16px}.works-section section .right-section .project-box .video-container .video-controls .control-btn{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;cursor:pointer;background:#000000b3;border:1px solid #fff3;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;transition:all .3s;display:flex}.works-section section .right-section .project-box .video-container .video-controls .control-btn:hover{background:#d45009cc;border-color:#d4500980;transform:scale(1.1)}.works-section section .right-section .project-box .video-container .video-controls .control-btn svg{pointer-events:none}.works-section section .right-section .project-box .project-details{display:none}.works-section section .right-section .project-box img,.works-section section .right-section .project-box video{-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;transform-origin:top;width:100%;height:100%;transition:transform .6s}.works-section section .right-section .content{color:#fff;text-align:center;padding:16px}.works-section section .right-section .content h2{margin-bottom:8px;font-size:28px;font-weight:600}.works-section section .right-section .content p{color:#ddd;font-size:16px}.works-section .video-modal-overlay{z-index:999999;pointer-events:auto;background:#000000f2;justify-content:center;align-items:center;width:100vw;height:100vh;padding:20px;display:flex;position:fixed;top:0;left:0}.works-section .video-modal-overlay .video-modal-content{justify-content:center;align-items:center;gap:40px;width:90%;max-width:1400px;height:85vh;display:flex;position:relative}.works-section .video-modal-overlay .video-modal-content .modal-close-btn{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;cursor:pointer;background:#ffffff1a;border:1px solid #fff3;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;transition:all .3s;display:flex;position:absolute;top:-60px;right:0}.works-section .video-modal-overlay .video-modal-content .modal-close-btn:hover{background:#d45009cc;border-color:#d4500980;transform:scale(1.1)rotate(90deg)}.works-section .video-modal-overlay .video-modal-content .modal-close-btn svg{pointer-events:none}.works-section .video-modal-overlay .video-modal-content .modal-nav-btn{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;cursor:pointer;background:#ffffff1a;border:1px solid #fff3;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:64px;height:64px;transition:all .3s;display:flex}.works-section .video-modal-overlay .video-modal-content .modal-nav-btn:hover{background:#d45009cc;border-color:#d4500980;transform:scale(1.15)}.works-section .video-modal-overlay .video-modal-content .modal-nav-btn svg{pointer-events:none}.works-section .video-modal-overlay .video-modal-content .modal-video-wrapper{flex-direction:column;flex:1;gap:0;max-width:1200px;height:100%;display:flex}.works-section .video-modal-overlay .video-modal-content .modal-video-wrapper video{border:1px solid #ffffff1a;border-radius:8px;flex:1}.works-section .video-modal-overlay .video-modal-content .modal-video-wrapper .modal-video-info{color:#fff;flex-direction:row;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;display:flex}.works-section .video-modal-overlay .video-modal-content .modal-video-wrapper .modal-video-info h2{letter-spacing:-.025em;text-align:left;flex:1;margin:0;font-family:Grotesk,sans-serif;font-size:32px;font-weight:400}.works-section .video-modal-overlay .video-modal-content .modal-video-wrapper .modal-video-info p{color:#ffffffb3;white-space:nowrap;margin:0;font-size:18px}@media (max-width:768px){.works-section section{width:100%;max-width:100%;margin:0 auto;padding:0 24px;display:flex;position:relative}.works-section section .left-section{flex-direction:column;justify-content:space-between;height:100vh;padding-top:134px;padding-bottom:20%;padding-left:20px;position:sticky;top:0}.works-section section .left-section.mobile{opacity:1}.works-section section .left-section.hide{opacity:0;pointer-events:none;background:red}.works-section section .left-section .categories{pointer-events:auto;flex-direction:column;gap:24px;margin-bottom:80px;padding:16px;display:flex;position:relative}.works-section section .left-section .categories svg{position:absolute}.works-section section .left-section .categories svg.bottom-right{bottom:0;right:0}.works-section section .left-section .categories svg.top-right{top:0;right:0}.works-section section .left-section .categories svg.top-left{top:0;left:0}.works-section section .left-section .categories svg.bottom-left{bottom:0;left:0}.works-section section .left-section .categories .category{cursor:pointer;border-bottom:1px solid #0000;border-image-source:linear-gradient(90deg,#3e3e3e 2%,#3e3e3e80 48.5%,#3e3e3e00 98%);border-image-slice:1;width:240px;height:44px;padding-bottom:24px}.works-section section .left-section .categories .category:hover .wrap h3,.works-section section .left-section .categories .category.active .wrap h3{color:#fff}.works-section section .left-section .categories .category .wrap{align-items:center;gap:8px;display:flex}.works-section section .left-section .categories .category .wrap h3{letter-spacing:-.04em;text-transform:uppercase;font-size:20px;font-weight:500;line-height:100%}.works-section section .left-section .categories .category .wrap p{font-size:18px}.works-section section .left-section .project-details{display:none}.works-section section .nav-head{z-index:9999;cursor:pointer;pointer-events:auto;justify-content:center;align-items:center;gap:8px;display:flex;position:fixed;top:100px;left:50%;transform:translate(-50%)}.works-section section .nav-head .wrap{align-items:center;gap:8px;display:flex}.works-section section .nav-head .wrap h3{letter-spacing:-.04em;text-transform:uppercase;color:#fff;font-size:20px;font-weight:500;line-height:100%}.works-section section .nav-head .wrap p{font-size:19px}.works-section section .right-section{pointer-events:none;flex:1;justify-content:flex-end;align-items:center;height:fit-content;padding:0 24px;position:absolute;top:0;left:0;overflow:hidden}.works-section section .right-section .no-projects{text-align:center;justify-content:center;align-items:center;width:95%;height:100vh;display:flex}.works-section section .right-section .no-projects p{color:#fff;margin:0;font-family:Grotesk,sans-serif;font-size:42px;font-weight:400}.works-section section .right-section .projects-column{flex-direction:column;align-items:center;gap:120px;padding:200px 0;display:flex}.works-section section .right-section .project-box{opacity:.3;scroll-snap-align:center;pointer-events:auto;perspective:1000px;flex-direction:column;gap:20px;width:95%;height:fit-content;transition:transform .3s,opacity .3s;display:flex;position:relative;overflow:hidden;transform:scale(.7)}.works-section section .right-section .project-box .video-container{width:100%;height:360px;position:relative}.works-section section .right-section .project-box .video-container .video-controls{z-index:10;gap:12px;display:flex;position:absolute;top:16px;right:16px}.works-section section .right-section .project-box .video-container .video-controls .control-btn{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;cursor:pointer;background:#000000b3;border:1px solid #fff3;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;transition:all .3s;display:flex}.works-section section .right-section .project-box .video-container .video-controls .control-btn:hover{background:#d45009cc;border-color:#d4500980;transform:scale(1.1)}.works-section section .right-section .project-box .video-container .video-controls .control-btn svg{pointer-events:none;width:20px;height:20px}.works-section section .right-section .project-box img,.works-section section .right-section .project-box video{-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;transform-origin:top;width:100%;height:360px;transition:transform .6s}.works-section section .right-section .project-box .project-details{justify-content:space-between;align-items:flex-end;width:100%;display:flex}.works-section section .right-section .project-box .project-details .contain{width:65%}.works-section section .right-section .project-box .project-details .contain h3{letter-spacing:-.04em;color:#fff;margin-bottom:12px;font-size:16px;font-weight:400;line-height:22px}.works-section section .right-section .project-box .project-details .contain h1{letter-spacing:-.025em;color:#fff;white-space:nowrap;font-family:Grotesk,sans-serif;font-size:48px;font-weight:400;line-height:66%}.works-section section .right-section .project-box .project-details .contain h1 .number{font-family:Guton,sans-serif;font-size:38px;font-weight:600}.works-section section .right-section .project-box .project-details .btn{cursor:pointer;background:0 0;justify-content:center;align-items:center;width:110px;height:54px;display:flex;position:relative;overflow:hidden;transform:scale(.8)}.works-section section .right-section .project-box .project-details .btn p{letter-spacing:-.04em;color:#bebfc1;z-index:2;font-size:20px;font-style:normal;font-weight:500;line-height:100%;transition:color .4s}.works-section section .right-section .project-box .project-details .btn svg{pointer-events:none;z-index:2;transition:stroke .4s;position:absolute;top:-2px;left:-2px}.works-section section .right-section .project-box .project-details .btn:before{content:"";opacity:0;z-index:1;background:radial-gradient(#ffffff1a 0%,#0000 70%);transition:opacity .6s;position:absolute;inset:0}.works-section section .right-section .project-box .project-details .btn:after{content:"";z-index:1;background:linear-gradient(120deg,#0000,#fff3,#0000);width:50%;height:100%;transition:all .6s;position:absolute;top:0;left:-75%;transform:skew(-20deg)}.works-section section .right-section .project-box .project-details .btn:hover p{color:#d45009}.works-section section .right-section .project-box .project-details .btn:hover svg path{stroke:#d45009}.works-section section .right-section .project-box .project-details .btn:hover:before{opacity:1}.works-section section .right-section .project-box .project-details .btn:hover:after{transition:all .8s cubic-bezier(.4,0,.2,1);left:130%}.works-section section .right-section .content{color:#fff;text-align:center;padding:16px}.works-section section .right-section .content h2{margin-bottom:8px;font-size:28px;font-weight:600}.works-section section .right-section .content p{color:#ddd;font-size:16px}.works-section .video-modal-overlay .video-modal-content{flex-direction:column;gap:20px;height:90vh}.works-section .video-modal-overlay .video-modal-content .modal-nav-btn{width:48px;height:48px}.works-section .video-modal-overlay .video-modal-content .modal-close-btn{width:40px;height:40px;top:-50px}.works-section .video-modal-overlay .video-modal-content .modal-video-wrapper .modal-video-info{flex-direction:column;align-items:flex-start;padding:16px 0}.works-section .video-modal-overlay .video-modal-content .modal-video-wrapper .modal-video-info h2{text-align:left;font-size:24px}.works-section .video-modal-overlay .video-modal-content .modal-video-wrapper .modal-video-info p{font-size:14px}.works-section .video-modal-overlay .video-modal-content .prev-btn{order:2}.works-section .video-modal-overlay .video-modal-content .modal-video-wrapper{order:1}.works-section .video-modal-overlay .video-modal-content .next-btn{order:3}}
