*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{color:#d7e2ea;background-color:#0c0c0c;font-family:Kanit,sans-serif}main{background-color:#0c0c0c;overflow-x:clip}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0}html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}body.nav-open{overflow:hidden}.hero-heading{background:linear-gradient(#646973 0%,#bbccd7 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.fade-in{opacity:0;transform:translateY(var(--fade-y,30px)) translateX(var(--fade-x,0px));transition:opacity .7s,transform .7s}.fade-in.visible{opacity:1;transform:translateY(0)translate(0)}.progress{z-index:70;transform-origin:0;background:linear-gradient(90deg,#b600a8,#7621b0,#be4c00);height:2px;position:fixed;top:0;left:0;right:0;transform:scaleX(0)}.nav{z-index:60;pointer-events:none;justify-content:center;display:flex;position:fixed;top:0;left:0;right:0}.nav__inner{pointer-events:auto;border:1px solid #0000;border-radius:9999px;align-items:center;width:100%;padding:24px 34px 0;transition:opacity .7s,transform .7s,width .6s cubic-bezier(.22,1,.36,1),margin .6s,padding .6s,background-color .4s,border-color .4s;display:flex}.nav__links{flex:1;justify-content:space-between;align-items:center;display:flex}.nav__link{color:#d7e2ea;text-transform:uppercase;letter-spacing:.05em;font-size:.875rem;font-weight:500;transition:opacity .2s,font-size .5s,color .3s;position:relative}.nav__link:hover{opacity:.7}.nav__brand,.nav__cta{opacity:0;white-space:nowrap;pointer-events:none;max-width:0;transition:max-width .6s,opacity .4s,padding .6s;overflow:hidden}.nav__brand{text-transform:uppercase;letter-spacing:.02em;font-size:1.1rem;font-weight:800}.nav__brand b{color:#b600a8}.nav .nav__cta{outline-width:0;padding:0;font-size:.72rem}.nav[data-state=pill] .nav__inner{-webkit-backdrop-filter:blur(18px)saturate(140%);backdrop-filter:blur(18px)saturate(140%);background:#1212149e;border-color:#d7e2ea29;width:min(700px,100% - 20px);margin-top:12px;padding:8px 10px 8px 22px}.nav[data-state=pill] .nav__links{justify-content:center;gap:clamp(12px,3vw,26px)}.nav[data-state=pill] .nav__link{font-size:.78rem}.nav[data-state=pill] .nav__link.is-active:after{content:"";background:#b600a8;border-radius:2px;height:2px;position:absolute;bottom:-5px;left:0;right:0}.nav[data-state=pill] .nav__brand{opacity:1;pointer-events:auto;max-width:120px}.nav[data-state=pill] .nav__cta{opacity:1;pointer-events:auto;outline-width:2px;max-width:200px;padding:9px 20px}.nav[data-state=pill][data-theme=light] .nav__inner{background:#ffffffb8;border-color:#0c0c0c1f}.nav[data-state=pill][data-theme=light] .nav__link,.nav[data-state=pill][data-theme=light] .nav__brand{color:#0c0c0c}.hero{flex-direction:column;height:100vh;display:flex;position:relative;overflow-x:clip}.hero-inner{z-index:0;flex-direction:column;flex:1;padding:0 10px;display:flex;position:relative}.hero-nav-space{height:calc(24px + 1.3rem)}.hero-title-wrap{margin-top:24px;overflow:hidden}.hero-title{text-transform:uppercase;letter-spacing:-.02em;white-space:nowrap;text-align:center;width:100%;font-size:14vw;font-weight:900;line-height:.85}.hero-bottom{justify-content:space-between;align-items:flex-end;padding:0 24px 28px;display:flex}.hero-tagline{color:#d7e2ea;text-transform:uppercase;letter-spacing:.05em;max-width:160px;font-size:clamp(.75rem,1.4vw,1.5rem);font-weight:300;line-height:1.4}.contact-btn{color:#fff;text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;outline-offset:-3px;background:linear-gradient(123deg,#18011f 7%,#b600a8 37%,#7621b0 72%,#be4c00 100%);border-radius:9999px;outline:2px solid #e3e3e3;justify-content:center;align-items:center;padding:12px 32px;font-size:.75rem;font-weight:500;transition:opacity .2s,transform .3s;display:inline-flex;box-shadow:0 4px 4px #b501a740,inset 4px 4px 12px #7721b1}.contact-btn:hover{opacity:.9;transform:translateY(-2px)}.contact-btn:active{opacity:.75}.hero-portrait-wrap{z-index:10;touch-action:pan-y;width:400px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.hero-portrait-inner{will-change:transform;position:relative}.hero-portrait-inner img{object-fit:contain;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:100%;height:auto;display:block}.face-gl{pointer-events:none;width:170%;height:170%;position:absolute;top:-35%;left:-35%}.face-props{pointer-events:none;position:absolute;inset:0}.face-fly,.face-hand{opacity:0;transition:opacity .2s;position:absolute;transform:translate(-50%,-50%)}.face-fly{fill:#111;width:6%}.face-fly .wing{fill:#dcebffb3;transform-origin:16px 15px;animation:50ms linear infinite alternate flap}.face-fly .wing.r{animation-direction:alternate-reverse}@keyframes flap{0%{transform:rotate(-16deg)}to{transform:rotate(16deg)}}.face-hand{fill:#fff;stroke:#0c0c0c;stroke-width:1.4px;stroke-linejoin:round;width:11%}.face-hand .grab,.face-hand.shut .open{display:none}.face-hand.shut .grab{display:block}.hair{z-index:20;position:absolute;bottom:132px;left:50%;transform:translate(-50%)}.hair__inner{flex-direction:column;align-items:center;gap:8px;display:flex}.hair__chips{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#12121499;border:1px solid #d7e2ea29;border-radius:9999px;gap:4px;padding:5px;display:flex}.hair__chip{letter-spacing:.1em;text-transform:uppercase;color:#d7e2ea;opacity:.7;border-radius:9999px;padding:7px 14px;font-size:.7rem;font-weight:500;transition:opacity .2s,background-color .3s,color .3s}.hair__chip:hover{opacity:1}.hair__chip.is-on{color:#0c0c0c;opacity:1;background:#d7e2ea}.hair__hint{letter-spacing:.14em;text-transform:uppercase;color:#d7e2ea99;white-space:nowrap;font-size:.66rem;font-weight:300}.marquee-section{background-color:#0c0c0c;width:100%;padding-top:96px;padding-bottom:40px;overflow:hidden}.marquee-rows{flex-direction:column;gap:12px;display:flex}.marquee-clip{width:100%;overflow:hidden}.marquee-row{will-change:transform;gap:12px;width:max-content;margin-left:-864px;display:flex}.marquee-tile{border-radius:16px;flex-shrink:0;width:420px;height:270px;display:block;position:relative;overflow:hidden}.marquee-tile img{object-fit:cover;width:100%;height:100%;transition:transform .6s cubic-bezier(.22,1,.36,1)}.marquee-tile:hover img{transform:scale(1.06)}.marquee-tile__name{letter-spacing:.1em;text-transform:uppercase;color:#fff;opacity:0;background:linear-gradient(#0000,#000000bf);padding:40px 18px 14px;font-size:.8rem;font-weight:500;transition:opacity .3s,transform .3s;position:absolute;bottom:0;left:0;right:0;transform:translateY(8px)}.marquee-tile:hover .marquee-tile__name,.marquee-tile:focus-visible .marquee-tile__name{opacity:1;transform:none}.about-section{flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:80px 20px;display:flex;position:relative}.about-decor{z-index:0;position:absolute}.about-decor img{will-change:transform;width:100%;height:auto;display:block}.about-decor.top-left{width:120px;top:4%;left:1%}.about-decor.bottom-left{width:100px;bottom:8%;left:3%}.about-decor.top-right{width:120px;top:4%;right:1%}.about-decor.bottom-right{width:130px;bottom:8%;right:3%}.about-content{z-index:10;flex-direction:column;align-items:center;gap:64px;width:100%;max-width:896px;display:flex;position:relative}.about-inner{flex-direction:column;align-items:center;gap:40px;width:100%;display:flex}.about-heading,.services-heading,.projects-heading,.connect__heading{text-transform:uppercase;letter-spacing:-.02em;text-align:center;width:100%;font-size:clamp(3rem,12vw,160px);font-weight:900;line-height:.85}.about-text{color:#d7e2ea;text-align:center;max-width:560px;font-size:clamp(1rem,2vw,1.35rem);font-weight:500;line-height:1.7}.about-text .word{white-space:nowrap;display:inline-block}.about-text .char{opacity:.2;transition:opacity .1s}.services-section{background-color:#fff;border-radius:40px 40px 0 0;flex-direction:column;padding:80px 20px;display:flex}.services-heading{color:#0c0c0c;margin-bottom:64px}.services-list{flex-direction:column;align-items:center;width:100%;display:flex}.service-item-wrap{flex-direction:column;align-items:center;width:100%;max-width:1024px;display:flex}.service-divider{border-top:1px solid #0c0c0c26;width:100%}.service-item{align-items:flex-start;gap:24px;width:100%;padding:32px 0;transition:padding-left .4s cubic-bezier(.22,1,.36,1);display:flex}.service-item:hover{padding-left:18px}.service-number{text-transform:uppercase;color:#0c0c0c;flex-shrink:0;font-size:clamp(3rem,10vw,140px);font-weight:900;line-height:.85;transition:color .3s}.service-item:hover .service-number{color:#b600a8}.service-info{flex-direction:column;gap:8px;padding-top:4px;display:flex}.service-name{text-transform:uppercase;color:#0c0c0c;font-size:clamp(1rem,2.2vw,2.1rem);font-weight:500}.service-desc{color:#0c0c0c;opacity:.6;max-width:672px;font-size:clamp(.85rem,1.6vw,1.25rem);font-weight:300;line-height:1.7}.projects-section{z-index:10;background-color:#0c0c0c;border-radius:40px 40px 0 0;margin-top:-40px;padding:0 20px;position:relative}.projects-heading-wrap{flex-direction:column;align-items:center;padding:80px 0;display:flex}.project-card-container{justify-content:center;align-items:flex-start;height:85vh;display:flex;position:sticky;top:96px}.project-card{transform-origin:top;will-change:transform;background-color:#0c0c0c;border:2px solid #d7e2ea;border-radius:40px;flex-direction:column;gap:24px;width:100%;max-width:1760px;padding:16px;display:flex;position:absolute}.project-card-header{flex-direction:column;gap:24px;display:flex}.project-card-meta{align-items:center;gap:24px;display:flex}.project-card-number{color:#d7e2ea;text-transform:uppercase;font-size:clamp(3rem,10vw,140px);font-weight:900;line-height:.85}.project-card-info{flex-direction:column;gap:8px;display:flex}.project-card-category{color:#d7e2ea;text-transform:uppercase;font-size:clamp(1rem,2.2vw,2.1rem);font-weight:500}.project-card-name{color:#d7e2ea;letter-spacing:.05em;font-size:clamp(.9rem,2vw,2rem);font-weight:300}.live-project-btn{color:#d7e2ea;text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;border:2px solid #d7e2ea;border-radius:9999px;justify-content:center;align-self:flex-start;align-items:center;gap:8px;padding:12px 32px;font-size:.875rem;font-weight:500;transition:background-color .2s,transform .3s;display:inline-flex}.live-project-btn:hover{background-color:#d7e2ea1a;transform:translateY(-2px)}.project-card-images,.project-card-col1{flex-direction:column;gap:16px;width:100%;display:flex}.project-card-col2{width:100%}.project-shot{cursor:zoom-in;border-radius:30px;width:100%;display:block;overflow:hidden}.project-shot img{object-fit:cover;object-position:top;width:100%;height:100%;transition:transform .7s cubic-bezier(.22,1,.36,1);display:block}.project-shot:hover img{transform:scale(1.04)}.project-card-col1 .project-shot:first-child{height:min(clamp(130px,16vw,230px),20vh)}.project-card-col1 .project-shot:last-child{height:min(clamp(160px,22vw,340px),28vh)}.project-card-col2 .project-shot{height:min(300px,30vh)}.lightbox{z-index:170;visibility:hidden;opacity:0;background:#000000eb;place-items:center;display:grid;position:fixed;inset:0}.lightbox.open{visibility:visible}.lightbox img{object-fit:contain;border-radius:10px;max-width:92vw;max-height:82vh}.lightbox__cap{color:#ffffffb3;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;font-size:12px;position:absolute;bottom:28px;left:50%;transform:translate(-50%)}.lightbox__btn{color:#fff;background:#ffffff1a;border-radius:999px;place-items:center;width:48px;height:48px;font-size:22px;display:grid;position:absolute;top:50%;transform:translateY(-50%)}.lightbox__btn:hover{background:#fff3}.lightbox__prev{left:20px}.lightbox__next{right:20px}.lightbox__close{color:#fff;background:#ffffff1a;border-radius:999px;width:44px;height:44px;font-size:28px;position:absolute;top:20px;right:20px}.connect{z-index:10;background:#0c0c0c;flex-direction:column;min-height:100vh;padding:120px 20px 28px;display:flex;position:relative}.connect__inner{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:28px;display:flex}.connect__lead{max-width:34em;font-size:clamp(1rem,1.6vw,1.25rem);font-weight:300;line-height:1.7}.connect__email{letter-spacing:-.01em;color:#d7e2ea;border-bottom:2px solid #d7e2ea40;align-items:baseline;gap:14px;padding-bottom:6px;font-size:clamp(1.3rem,4.4vw,3.4rem);font-weight:500;transition:opacity .7s,transform .7s,border-color .3s;display:inline-flex}.connect__email:hover{border-color:#b600a8}.connect__email small{letter-spacing:.14em;text-transform:uppercase;opacity:.6;font-size:.7rem;font-weight:500}.connect__actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;margin-top:12px;display:flex}.connect__actions .live-project-btn{align-self:auto}.footer{letter-spacing:.1em;text-transform:uppercase;color:#d7e2eab3;border-top:1px solid #d7e2ea29;flex-wrap:wrap;justify-content:space-between;gap:14px;margin-top:60px;padding-top:22px;font-size:.78rem;font-weight:300;display:flex}.footer nav{flex-wrap:wrap;gap:20px;display:flex}.footer a{transition:color .2s}.footer a:hover{color:#fff}.toast{z-index:180;opacity:0;pointer-events:none;color:#0c0c0c;letter-spacing:.08em;text-transform:uppercase;background:#d7e2ea;border-radius:9999px;padding:10px 20px;font-size:.8rem;font-weight:500;transition:opacity .3s,transform .3s;position:fixed;bottom:28px;left:50%;transform:translate(-50%,20px)}.toast.is-on{opacity:1;transform:translate(-50%)}@media (min-width:640px){.nav__link{font-size:1rem}.hero-nav-space{height:calc(24px + 1.5rem)}.hero-title-wrap{margin-top:16px}.hero-title{font-size:15vw}.hero-bottom{padding-bottom:32px}.hero-tagline{max-width:220px}.hero-portrait-wrap{width:500px}.hair{bottom:34px}.contact-btn{padding:14px 40px;font-size:.875rem}.marquee-section{padding-top:128px}.about-section{padding:80px 32px}.about-decor.top-left{width:160px;left:2%}.about-decor.bottom-left{width:140px;left:6%}.about-decor.top-right{width:160px;right:2%}.about-decor.bottom-right{width:170px;right:6%}.about-content{gap:80px}.about-inner{gap:56px}.services-section{border-radius:50px 50px 0 0;padding:96px 32px}.services-heading{margin-bottom:80px}.service-item{gap:32px;padding:40px 0}.service-info{gap:16px}.projects-section{border-radius:50px 50px 0 0;margin-top:-48px;padding:0 32px}.projects-heading-wrap{padding:96px 0}.project-card{border-radius:50px;gap:32px;padding:24px}.project-card-header{flex-direction:row;justify-content:space-between;align-items:center}.project-card-meta{gap:32px}.project-card-info{gap:16px}.live-project-btn{padding:14px 40px}.connect{padding:120px 32px 32px}}@media (min-width:768px){.nav__inner{padding:32px 50px 0}.nav__link{font-size:1.4rem}.nav[data-state=pill] .nav__link{font-size:.85rem}.hero-inner{padding:0 40px}.hero-nav-space{height:calc(32px + 2.1rem)}.hero-title-wrap{margin-top:-20px}.hero-title{font-size:16vw}.hero-bottom{padding:0 40px 40px}.hero-tagline{max-width:260px}.hero-portrait-wrap{width:600px}.contact-btn{padding:16px 48px;font-size:1rem}.marquee-section{padding-top:160px}.about-section{padding:80px 40px}.about-decor.top-left{width:210px;left:4%}.about-decor.bottom-left{width:180px;left:10%}.about-decor.top-right{width:210px;right:4%}.about-decor.bottom-right{width:220px;right:10%}.about-content{gap:96px}.about-inner{gap:64px}.services-section{border-radius:60px 60px 0 0;padding:128px 40px}.services-heading{margin-bottom:112px}.service-item{gap:40px;padding:48px 0}.service-info{gap:20px}.projects-section{border-radius:60px 60px 0 0;margin-top:-56px;padding:0 40px}.projects-heading-wrap{padding:128px 0}.project-card{border-radius:60px;gap:40px;padding:32px}.project-card-container{top:128px}.project-card-meta{gap:40px}.project-card-info{gap:24px}.project-card-images{flex-direction:row;gap:20px}.project-card-col1{gap:20px;width:40%}.project-card-col2{width:60%}.project-card-col2 .project-shot{border-radius:60px;height:100%}.project-card-col1 .project-shot{border-radius:60px}.connect{padding:140px 40px 36px}}@media (min-width:1024px){.hero-title{font-size:17.5vw}.hero-portrait-wrap{width:clamp(640px,78vh,46vw)}}@media (max-width:639px){.nav[data-state=pill] .nav__brand,.nav[data-state=pill] .nav__cta{opacity:0;pointer-events:none;max-width:0;padding:0}.nav[data-state=pill] .nav__inner{padding:12px 20px}.nav .nav__brand,.nav .nav__cta{display:none}}@media (prefers-reduced-motion:reduce){.fade-in{transition-duration:10ms}}