:root{--dark: #1c1d20;--dark-2: #141517;--grey: #999d9e;--light: #ffffff;--muted: #8a8a8a;--line: rgba(28, 29, 32, .15);--line-light: rgba(255, 255, 255, .2);--blue: #455ce9;--blue-2: #334bd3;--ease: cubic-bezier(.7, 0, .2, 1);--ease-out: cubic-bezier(.2, 1, .3, 1);--pad: clamp(1.25rem, 5vw, 6rem)}*{box-sizing:border-box;margin:0;padding:0}html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-stopped{overflow:hidden}body{font-family:Inter,Noto Sans Thai,system-ui,sans-serif;background:var(--dark);color:var(--dark);-webkit-font-smoothing:antialiased;overflow-x:hidden}body.loading{overflow:hidden;height:100vh}a{color:inherit;text-decoration:none}ul{list-style:none}img{display:block;max-width:100%}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}::selection{background:var(--blue);color:#fff}.page{position:relative;z-index:2;background:var(--light)}.container{width:100%;padding:0 var(--pad);max-width:1600px;margin:0 auto}.eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:2rem}.roll-in{display:inline-block;overflow:hidden;vertical-align:top;height:1.3em;line-height:1.3em}.roll-in>span{display:block;transition:transform .55s var(--ease)}.roll:hover .roll-in>span{transform:translateY(-100%)}.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}.w>span{display:inline-block}.loader{position:fixed;inset:0;z-index:200;background:var(--dark-2);color:#fff;display:grid;place-items:center}.loader-word{font-size:clamp(2.2rem,5vw,3.6rem);display:flex;align-items:center;gap:.8rem;opacity:0}.loader-word .dot{width:10px;height:10px;border-radius:50%;background:#fff}.loader-curve{position:absolute;top:100%;left:0;width:100%;height:22vh;fill:var(--dark-2)}.nav{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:2rem var(--pad);color:#fff}.logo{display:flex;align-items:center;gap:.4rem;font-weight:500}.logo .copy{transition:transform .6s var(--ease);display:inline-block}.logo-track{display:inline-flex;gap:.3rem;overflow:hidden;white-space:nowrap;position:relative;width:var(--logo-w, 9em);transition:width .6s var(--ease)}.logo:hover .logo-track{width:var(--logo-w2, 9em)}.logo-track span{transition:transform .6s var(--ease);flex-shrink:0}.logo:hover .copy{transform:rotate(360deg)}.logo:hover .logo-track span{transform:translate(var(--logo-shift, -4em))}.nav-links{display:flex;gap:.2rem}.nav-links a{padding:.8rem 1rem;position:relative}.nav-links a:after{content:"";position:absolute;left:50%;bottom:.15rem;width:5px;height:5px;border-radius:50%;background:currentColor;transform:translate(-50%) scale(0);transition:transform .3s var(--ease)}.nav-links a:hover:after{transform:translate(-50%) scale(1)}.menu-btn{position:fixed;top:1.5rem;right:1.5rem;z-index:120;width:72px;height:72px;border-radius:50%;background:var(--dark);overflow:hidden;isolation:isolate;display:grid;place-items:center;transform:scale(0);box-shadow:0 10px 30px #0000002e}.menu-btn .fill{position:absolute;left:-25%;top:100%;width:150%;height:200%;border-radius:50%;background:var(--blue);z-index:-1;transition:top .5s var(--ease)}.menu-btn:hover .fill,.menu-btn.open .fill{top:-50%}.burger{display:flex;flex-direction:column;gap:8px}.burger i{display:block;width:26px;height:1.5px;background:#fff;transition:transform .45s var(--ease)}.menu-btn.open .burger i:first-child{transform:translateY(4.75px) rotate(45deg)}.menu-btn.open .burger i:last-child{transform:translateY(-4.75px) rotate(-45deg)}.side-menu{position:fixed;top:0;right:0;bottom:0;z-index:110;width:min(500px,100vw);background:var(--dark);color:#fff;transform:translate(calc(100% + 120px))}.side-curve{position:absolute;top:0;right:100%;height:100%;width:100px;fill:var(--dark)}.side-inner{position:relative;padding:9rem 4.5rem 3rem;height:100%;display:flex;flex-direction:column}.side-inner .eyebrow{border-bottom:1px solid var(--line-light);padding-bottom:1.5rem;margin-bottom:2rem;color:#ffffff80}.side-links{margin-bottom:auto}.side-links li a{display:flex;align-items:center;gap:1.2rem;font-size:clamp(2.4rem,5vw,3.6rem);padding:.25rem 0}.side-links .bullet{width:10px;height:10px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .4s var(--ease);margin-left:-2.2rem}.side-links a:hover .bullet,.side-links a.current .bullet{transform:scale(1)}.side-socials{display:flex;gap:1.6rem;flex-wrap:wrap}.menu-overlay{position:fixed;inset:0;z-index:105;background:#0006;opacity:0;pointer-events:none;transition:opacity .7s}.menu-overlay.open{opacity:1;pointer-events:auto}.toast{position:fixed;left:50%;bottom:2rem;z-index:160;transform:translate(-50%,250%);opacity:0;background:var(--blue);color:#fff;padding:.9rem 1.6rem;border-radius:999px;font-size:.9rem;transition:transform .5s var(--ease),opacity .3s}.toast.show{transform:translate(-50%);opacity:1}.hero{position:relative;height:100vh;min-height:640px;overflow:hidden;color:#fff;background:radial-gradient(ellipse 55% 60% at 50% 45%,#b4b8b9 0%,var(--grey) 70%)}.marquee{z-index:1}.hero-img-wrap{position:absolute;inset:0;z-index:2;pointer-events:none}.hero-location,.hero-role{z-index:3}.hero-img{position:absolute;left:50%;bottom:0;transform:translate(-50%);height:92%;width:auto;max-width:none;object-fit:contain;object-position:bottom;filter:brightness(1.06) contrast(1.04) saturate(1.05) drop-shadow(0 30px 60px rgba(0,0,0,.25));user-select:none;pointer-events:none}.hero-location{position:absolute;left:0;top:50%;translate:0 -50%;background:var(--dark);color:#fff;border-radius:0 999px 999px 0;display:flex;align-items:center;gap:2.5rem;padding:1.5rem 1.5rem 1.5rem var(--pad);font-size:1.1rem;line-height:1.3}.globe{width:64px;height:64px;border-radius:50%;background:var(--grey);display:grid;place-items:center}.globe svg{width:34px;animation:spin 10s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.hero-role{position:absolute;right:var(--pad);top:26%}.hero-role .arrow{width:18px;margin-bottom:2.5rem}.hero-role h2{font-weight:400;font-size:clamp(1.4rem,2.4vw,2.2rem);line-height:1.25}.mask{display:block;overflow:hidden}.mask>span{display:block}.marquee{position:absolute;bottom:4vh;left:0;width:100%;overflow:hidden;pointer-events:none}.marquee-track{display:flex;white-space:nowrap;will-change:transform}.marquee-track span{font-size:clamp(5rem,16vw,15rem);font-weight:500;letter-spacing:-.03em;padding-right:4vw;line-height:1.1}.intro{padding:clamp(5rem,12vw,10rem) 0 clamp(3rem,6vw,5rem)}.intro-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:4rem;max-width:1300px}.intro-lead{font-weight:400;font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.35}.intro-side p{font-size:1.05rem;line-height:1.6;max-width:360px;margin-bottom:3rem;color:#333}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:clamp(4rem,8vw,7rem);max-width:1300px}.stat{border-top:1px solid var(--line);padding-top:1.5rem}.stat b{display:block;font-size:clamp(2.6rem,5vw,4.5rem);font-weight:400;letter-spacing:-.03em;line-height:1;margin-bottom:.6rem}.stat span{color:var(--muted);font-size:.9rem}.circle-btn{position:relative;display:grid;place-items:center;width:180px;height:180px;border-radius:50%;color:#fff;overflow:hidden;isolation:isolate}.circle-btn.dark{background:var(--dark)}.circle-btn.blue{background:var(--blue)}.fill{position:absolute;left:-25%;top:100%;width:150%;height:200%;border-radius:50%;background:var(--blue);z-index:-1;transition:top .6s var(--ease)}.circle-btn.blue .fill{background:var(--blue-2)}.circle-btn:hover .fill,.pill:hover .fill{top:-50%}.label{position:relative;display:inline-block}.work{padding:4rem 0 8rem;position:relative}.work-head{display:flex;justify-content:space-between;align-items:flex-start}.view-toggle{display:flex;gap:.6rem}.tog{width:56px;height:56px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:background .3s,color .3s,border-color .3s}.tog svg{width:18px;height:18px}.tog.active,.tog:hover{background:var(--dark);color:#fff;border-color:var(--dark)}.work-list{border-top:1px solid var(--line)}.work-item{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:clamp(2rem,4.5vw,4rem) clamp(0rem,4vw,5rem);border-bottom:1px solid var(--line);cursor:pointer;transition:opacity .4s}.work-item h4{font-size:clamp(2.2rem,6.5vw,6rem);font-weight:400;letter-spacing:-.03em;transition:transform .5s var(--ease)}.work-item p{font-size:1rem;transition:transform .5s var(--ease)}.work-list:hover .work-item{opacity:.3}.work-list .work-item:hover{opacity:1}.work-item:hover h4{transform:translate(-14px)}.work-item:hover p{transform:translate(14px)}.projects{display:none;grid-template-columns:repeat(2,1fr);gap:4rem 3rem}.work.grid .work-list{display:none}.work.grid .projects{display:grid}.project-thumb{aspect-ratio:4 / 3;background:var(--bg, #f1f1f1);display:grid;place-items:center;margin-bottom:1.6rem;overflow:hidden;position:relative}.project-thumb img{width:82%;box-shadow:0 30px 60px #0000002e;transition:transform .8s var(--ease)}.project:hover .project-thumb img{transform:scale(1.05)}.project-meta h5{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:400;letter-spacing:-.02em}.project-meta .cat{display:block;color:var(--muted);font-size:.9rem;padding:.5rem 0 1.2rem;border-bottom:1px solid var(--line);margin-bottom:1.2rem}.project-meta p{color:#444;line-height:1.6;margin-bottom:1.2rem;font-size:.98rem;max-width:520px}.project.flash .project-thumb{outline:2px solid var(--blue);outline-offset:6px}.tags{display:flex;flex-wrap:wrap;gap:.5rem}.tags span{font-size:.8rem;border:1px solid var(--line);border-radius:999px;padding:.4rem .9rem}.center-btn{display:flex;justify-content:center;margin-top:5rem}.pill{position:relative;overflow:hidden;isolation:isolate;display:inline-block;border:1px solid var(--line-light);border-radius:999px;padding:1.5rem 2.4rem;font-size:1rem}.pill.dark-outline{border-color:var(--line)}.pill.dark-outline:hover{color:#fff;border-color:var(--blue)}.pill .label{transition:color .4s}.preview{position:fixed;left:0;top:0;z-index:40;pointer-events:none;width:400px;height:340px;margin:-170px 0 0 -200px;overflow:hidden;transform:scale(0)}.preview-slider{height:100%;transition:transform .6s var(--ease)}.preview-slide{height:100%;background:var(--bg);display:grid;place-items:center}.preview-slide img{width:80%;box-shadow:0 20px 40px #00000026}.preview-cursor{position:fixed;left:0;top:0;z-index:41;pointer-events:none;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:.9rem;transform:scale(0)}.experience{padding:4rem 0 6rem}.section-title{font-size:clamp(2.6rem,7vw,6.5rem);font-weight:400;letter-spacing:-.03em;line-height:1.02;margin-bottom:clamp(3rem,6vw,5rem);max-width:1100px}.rows{border-top:1px solid var(--line);margin-bottom:4rem}.row{display:grid;grid-template-columns:1fr 2fr 1.5fr;gap:1.5rem;align-items:baseline;padding:1.9rem 0;border-bottom:1px solid var(--line);transition:padding .5s var(--ease),background .4s}.row:hover{padding-left:1rem;padding-right:1rem;background:#f4f4f4}.row-date{color:var(--muted);font-size:.9rem}.row-title{font-size:clamp(1.2rem,2vw,1.8rem)}.row-role{text-align:right;color:#444}.badge{font-style:normal;font-size:.75rem;border:1px solid var(--line);border-radius:999px;padding:.25rem .7rem;margin-right:.5rem}.split{display:grid;grid-template-columns:1fr 1fr;gap:4rem}.split .row{grid-template-columns:1fr;gap:.4rem}.split .row-role{text-align:left}.skills{padding:2rem 0 8rem}.skill-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem;border-top:1px solid var(--line);padding-top:2.5rem}.skill-grid h6{font-size:1.1rem;font-weight:500;margin-bottom:1.2rem}.chips{display:flex;flex-wrap:wrap;gap:.6rem}.chips li{position:relative;overflow:hidden;isolation:isolate;border:1px solid var(--line);border-radius:999px;padding:.75rem 1.25rem;font-size:.95rem;transition:color .4s,border-color .4s}.chips li:before{content:"";position:absolute;left:-25%;top:100%;width:150%;height:200%;border-radius:50%;background:var(--dark);z-index:-1;transition:top .5s var(--ease)}.chips li:hover{color:#fff;border-color:var(--dark)}.chips li:hover:before{top:-50%}.sliding{position:relative;padding:2rem 0 8rem;overflow-x:clip;overflow-y:visible;display:flex;flex-direction:column;gap:3vw}.slide-row{display:flex;gap:3vw;width:120vw;will-change:transform}.slide-row[data-dir="-1"]{margin-left:-5vw}.slide-row[data-dir="1"]{margin-left:-25vw}.tile{flex:0 0 25%;aspect-ratio:16 / 11;background:var(--bg);display:grid;place-items:center;overflow:hidden}.tile img{width:84%;box-shadow:0 16px 34px #0000002e}.tile.word span{color:#fff;font-size:clamp(1.6rem,4vw,4rem);font-weight:500;letter-spacing:-.03em}.curve-wrap{position:absolute;left:0;right:0;bottom:1px;height:0;z-index:3}.curve{position:absolute;left:-10%;width:120%;top:0;height:18vh;background:var(--light);border-radius:0 0 50% 50%;box-shadow:0 60px 50px #0009;transform-origin:top center;will-change:transform}.hero-img-wrap,.marquee,.footer-inner,.parallax-btn,.preview,.preview-cursor{will-change:transform}.footer{position:relative;z-index:1;background:var(--dark);color:#fff;overflow:hidden}.footer-inner{padding-top:clamp(9rem,16vw,14rem)}.footer-head{display:flex;align-items:center;gap:1.6rem;max-width:1100px}.avatar{width:clamp(64px,8vw,110px);height:clamp(64px,8vw,110px);border-radius:50%;object-fit:cover;object-position:center 15%;background:#fff;flex-shrink:0}.footer-head h2{font-size:clamp(3rem,8vw,7.5rem);font-weight:400;line-height:1.02;letter-spacing:-.03em}.footer-line{position:relative;border-bottom:1px solid var(--line-light);margin:5rem 0 0;max-width:1300px}.footer-line .parallax-btn{position:absolute;right:8%;top:50%;translate:0 -50%;z-index:2}.footer-arrow{position:absolute;right:2%;top:-10rem;width:16px;opacity:.8}.pills{display:flex;flex-wrap:wrap;gap:1rem;margin-top:7rem}.pill:hover{border-color:var(--blue)}.footer-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;padding:7rem 0 2rem}.fb-group{display:flex;gap:3rem}.fb-col{display:flex;flex-direction:column;gap:.7rem}.fb-col small{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#ffffff73}.fb-links{display:flex;gap:1.6rem;flex-wrap:wrap}.no-gsap .fade-up{opacity:1!important;transform:none!important}@media (max-width: 900px){.nav-links{display:none}.menu-btn{width:58px;height:58px;top:1rem;right:1rem}.side-inner{padding:7rem 2.2rem 2rem}.side-links .bullet{margin-left:0;display:none}.hero{height:100svh}.hero-img{height:78%}.hero-location{top:auto;bottom:30%;translate:none;padding:.9rem .9rem .9rem var(--pad);gap:1.2rem;font-size:.9rem}.globe{width:44px;height:44px}.globe svg{width:24px}.hero-role{top:16%;bottom:auto;right:var(--pad);text-align:right}.hero-role .arrow{display:none}.hero-role h2{font-size:1.1rem}.marquee{bottom:3vh}.intro-grid{grid-template-columns:1fr;gap:2rem}.stats{grid-template-columns:repeat(2,1fr);gap:2rem 1.2rem}.circle-btn{width:140px;height:140px}.view-toggle,.work .work-list{display:none}.work .projects{display:grid;grid-template-columns:1fr;gap:3.5rem}.skill-grid,.split{grid-template-columns:1fr}.row{grid-template-columns:1fr;gap:.4rem}.row:hover{padding-left:0;padding-right:0;background:none}.row-role{text-align:left}.slide-row{width:200vw}.tile{flex-basis:30%}.footer-line{margin-top:6rem}.footer-line .parallax-btn{right:0}.footer-line .circle-btn{width:120px;height:120px}.footer-line .circle-btn .label{font-size:.85rem}.footer-arrow{display:none}.pills{margin-top:5.5rem}.pill{padding:1.1rem 1.5rem;font-size:.9rem;word-break:break-all}.footer-bottom{padding-top:4rem}.preview,.preview-cursor{display:none}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}}