@import "https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700;800;900&display=swap";:root{--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-synthesis:none;text-rendering:geometricprecision;--ink:#0c0c0c;--silver:#d7e2ea;--project-top:6rem}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;background:var(--ink)}body,#root{background:var(--ink);min-height:100%;color:var(--silver);-webkit-user-select:none;user-select:none;font-family:Kanit,sans-serif}body{overflow-x:clip}a{color:inherit;text-decoration:none}img{-webkit-user-drag:none;-webkit-user-select:none;user-select:none;max-width:100%}::selection{color:inherit;background:0 0}.site-shell{background:var(--ink);min-height:100vh;overflow-x:clip}.hero{isolation:isolate;flex-direction:column;min-height:100svh;display:flex;position:relative;overflow:hidden}.hero-nav{z-index:5;letter-spacing:.08em;text-transform:uppercase;justify-content:space-between;padding:1.5rem 1.5rem 0;font-size:.875rem;font-weight:500;display:flex;position:relative}.hero-nav a{padding-block:.25rem;transition:opacity .2s;position:relative}.hero-nav a:after{content:"";transform-origin:100%;background:currentColor;height:1px;transition:transform .24s;position:absolute;bottom:0;left:0;right:0;transform:scaleX(0)}.hero-nav a:hover{opacity:.7}.hero-nav a:hover:after{transform-origin:0;transform:scaleX(1)}.hero-title-mask{width:100%;margin-top:1.5rem;overflow:hidden}.hero-heading{color:#0000;-webkit-text-fill-color:transparent;background:linear-gradient(#646973 0%,#bbccd7 100%);-webkit-background-clip:text;background-clip:text}.hero-title{letter-spacing:-.055em;text-align:center;text-transform:uppercase;white-space:nowrap;width:100%;font-size:14vw;font-weight:900;line-height:.82}.hero-portrait-layer{z-index:2;width:320px;position:absolute;top:50%;left:50%;translate:-50% -50%}.hero-portrait-motion,.portrait-interaction,.portrait-surface,.hero-portrait,.portrait-light-pass{width:100%}.portrait-interaction{cursor:crosshair;isolation:isolate;position:relative}.portrait-surface{z-index:1;transform-style:preserve-3d;will-change:transform;transition:transform .22s cubic-bezier(.2,.7,.2,1);position:relative;transform:perspective(900px)rotateX(0)rotateY(0)translate(0)}.hero-portrait{-o-object-fit:contain;object-fit:contain;filter:drop-shadow(0 24px 45px #0000006b);pointer-events:none;height:auto;transition:filter .22s;display:block}.portrait-light-pass{z-index:2;filter:brightness(2.35)saturate(0)contrast(.9)drop-shadow(0 0 14px #ffffff8c);mix-blend-mode:screen;-o-object-fit:contain;object-fit:contain;opacity:0;pointer-events:none;will-change:mask-image, opacity;height:auto;display:block;position:absolute;inset:0;transform:translateZ(2px);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.hero-bottom{z-index:3;justify-content:space-between;align-items:flex-end;margin-top:auto;padding:0 1.5rem 1.75rem;display:flex;position:relative}.hero-intro{letter-spacing:.04em;text-transform:uppercase;max-width:160px;font-size:clamp(.75rem,1.4vw,1.5rem);font-weight:300;line-height:1.25}.contact-button,.live-button{color:#fff;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;justify-content:center;align-items:center;gap:.5rem;font-weight:500;display:inline-flex}.contact-button{outline-offset:-3px;background:linear-gradient(123deg,#18011f 7%,#b600a8 37%,#7621b0 72%,#be4c00 100%);outline:2px solid #fff;padding:.75rem 1.55rem;font-size:.72rem;transition:transform .2s,filter .2s;box-shadow:0 4px 4px #b501a740,inset 4px 4px 12px #7721b1}.contact-button:hover{filter:brightness(1.14);transform:translateY(-2px)}.contact-button:focus-visible,.live-button:focus-visible,.hero-nav a:focus-visible,.contact-strip a:focus-visible{outline-offset:5px;outline:3px solid #b600a8}.marquee-section{background:var(--ink);gap:1rem;padding:6rem 0 2.5rem;display:grid;overflow:hidden}.marquee-track{gap:.75rem;width:max-content;display:flex}.marquee-tile{background:#171717;border:1px solid #d7e2ea29;border-radius:1.25rem;flex:0 0 420px;width:420px;height:270px;overflow:hidden;box-shadow:0 18px 55px #0000003d}.marquee-tile img{-o-object-fit:cover;object-fit:cover;filter:saturate(.82)contrast(1.08);width:100%;height:100%;display:block;transform:scale(1.01)}.about-section{place-items:center;min-height:100svh;padding:5rem 1.25rem;display:grid;position:relative;overflow:hidden}.about-section:before{aspect-ratio:1;content:"";border:1px solid #d7e2ea12;border-radius:50%;width:min(65vw,760px);position:absolute;box-shadow:inset 0 0 120px #9740cc0f}.about-content{z-index:2;text-align:center;flex-direction:column;align-items:center;gap:2.5rem;display:flex;position:relative}.section-title{letter-spacing:-.055em;text-align:center;text-transform:uppercase;font-size:clamp(3rem,12vw,10rem);font-weight:900;line-height:.84}.about-text-block{flex-direction:column;align-items:center;gap:4rem;display:flex}.about-copy{text-wrap:balance;overflow-wrap:anywhere;white-space:pre-wrap;width:min(100%,560px);max-width:560px;font-size:clamp(1rem,2vw,1.35rem);font-weight:500;line-height:1.7;position:relative}.decoration{z-index:1;pointer-events:none;position:absolute}.decoration img{filter:drop-shadow(0 18px 30px #00000059);width:100%;height:auto;display:block}.decoration-moon{width:120px;top:4%;left:1%}.decoration-object{width:100px;bottom:8%;left:3%}.decoration-lego{width:120px;top:4%;right:1%}.decoration-group{width:130px;bottom:8%;right:3%}.services-section{z-index:2;color:var(--ink);background:#fff;border-radius:40px 40px 0 0;padding:5rem 1.25rem;position:relative}.services-title{margin-bottom:4rem}.services-list{border-top:1px solid #0c0c0c26;width:min(100%,64rem);margin-inline:auto}.service-item{border-bottom:1px solid #0c0c0c26;grid-template-columns:minmax(84px,.35fr) 1fr;align-items:center;gap:1.5rem;padding:2rem 0;display:grid}.service-number,.project-number{letter-spacing:-.06em;font-size:clamp(3rem,10vw,8.75rem);font-weight:900;line-height:.8}.service-detail h3{text-transform:uppercase;font-size:clamp(1rem,2.2vw,2.1rem);font-weight:500;line-height:1.1}.service-detail p{opacity:.6;max-width:42rem;margin-top:.75rem;font-size:clamp(.85rem,1.6vw,1.25rem);font-weight:300;line-height:1.55}.projects-section{z-index:3;background:var(--ink);border-radius:40px 40px 0 0;margin-top:-2.5rem;position:relative;overflow:clip}.projects-stage{min-height:420svh;position:relative}.projects-sticky{grid-template-rows:auto minmax(0,1fr);gap:clamp(.75rem,1.6vh,1.25rem);height:100svh;padding:clamp(1rem,2.5vw,2.5rem);display:grid;position:sticky;top:0;overflow:hidden}.projects-heading-row{justify-content:space-between;align-items:flex-end;width:min(100%,88rem);margin-inline:auto;display:flex}.projects-heading-row p{color:#d7e2ea85;letter-spacing:.14em;text-align:right;text-transform:uppercase;max-width:18rem;padding-bottom:.35rem;font-size:.72rem;line-height:1.35}.projects-title{text-align:left;font-size:clamp(3rem,8vw,7.5rem)}.projects-stack-viewport{width:min(100%,88rem);min-height:0;margin-inline:auto;position:relative}.project-card{border:2px solid var(--silver);background:var(--ink);transform-origin:top;backface-visibility:hidden;will-change:transform;border-radius:40px;grid-template-rows:auto minmax(0,1fr);padding:1rem;display:grid;position:absolute;top:0;left:0;right:0;overflow:hidden;box-shadow:0 -18px 50px #00000061}.project-meta{grid-template-columns:auto 1fr;align-items:center;gap:1rem;padding:.5rem .25rem 1.25rem;display:grid}.project-number{color:var(--silver);grid-row:1/3}.project-labels{min-width:0}.project-labels span{color:#d7e2ea94;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.25rem;font-size:.7rem;display:block}.project-labels h3{color:var(--silver);text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;font-size:clamp(1.2rem,3vw,2.5rem);font-weight:500;line-height:1;overflow:hidden}.project-labels p{color:#d7e2ea7a;letter-spacing:.04em;text-overflow:ellipsis;white-space:nowrap;margin-top:.4rem;font-size:clamp(.68rem,1.15vw,.9rem);font-weight:300;overflow:hidden}.live-button{border:2px solid var(--silver);grid-column:1/-1;width:fit-content;padding:.7rem 1.25rem;font-size:.75rem;transition:background-color .2s,transform .2s}.live-button:hover{background:#d7e2ea1a;transform:translateY(-2px)}.project-gallery{grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:.75rem;min-height:0;display:grid}.project-gallery-left{grid-template-rows:minmax(0,42fr) minmax(0,58fr);gap:.75rem;min-height:0;display:grid}.project-gallery img{-o-object-fit:cover;object-fit:cover;background:#181818;border-radius:28px;width:100%;height:100%;min-height:0;display:block}.project-gallery-main{min-height:0!important}.project-gallery img.image-error{opacity:.15}.contact-strip{text-align:center;flex-direction:column;justify-content:center;align-items:center;width:min(100%,88rem);min-height:54vh;margin:2rem auto 0;padding:5rem 0;display:flex}.contact-strip p{color:#d7e2ea94;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1rem;font-size:.9rem}.contact-strip a{letter-spacing:-.04em;text-transform:uppercase;border-bottom:2px solid #d7e2ea80;align-items:center;gap:.65rem;font-size:clamp(2rem,7vw,6rem);font-weight:700;line-height:1;transition:border-color .2s,color .2s;display:inline-flex}.contact-strip a:hover{color:#fff;border-color:#b600a8}.site-footer{color:#d7e2ea85;letter-spacing:.1em;text-transform:uppercase;border-top:1px solid #d7e2ea24;justify-content:space-between;align-items:center;width:min(100%,88rem);margin-inline:auto;padding:1.5rem clamp(1rem,2.5vw,2.5rem) 2rem;font-size:.78rem;font-weight:300;display:flex}@media (width>=640px){:root{--project-top:7rem}.hero-nav{padding-inline:2.5rem;font-size:1rem}.hero-title{font-size:15vw}.hero-portrait-layer{width:410px;top:50%;bottom:auto;translate:-50% -50%}.hero-bottom{padding:0 2.5rem 2rem}.hero-intro{max-width:220px}.contact-button{padding:.875rem 2.25rem;font-size:.875rem}.marquee-section{padding-top:8rem}.about-section{padding:5rem 2rem}.about-content{gap:3.5rem}.about-text-block{gap:5rem}.decoration-moon{width:160px;left:2%}.decoration-object{width:140px;left:6%}.decoration-lego{width:160px;right:2%}.decoration-group{width:170px;right:6%}.services-section{border-radius:50px 50px 0 0;padding:6rem 2rem}.services-title{margin-bottom:5rem}.service-item{grid-template-columns:minmax(150px,.4fr) 1fr;gap:2rem;padding:2.5rem 0}.projects-section{border-radius:50px 50px 0 0;margin-top:-3rem}.project-card{border-radius:50px;padding:1.5rem}.project-meta{grid-template-columns:auto 1fr auto;padding:.5rem .5rem 1.5rem}.project-number{grid-row:auto}.live-button{grid-column:auto;padding:.85rem 2rem;font-size:.875rem}.project-gallery,.project-gallery-left{gap:1rem}.project-gallery img{border-radius:38px}}@media (width>=768px){:root{--project-top:8rem}.hero-nav{padding-top:2rem;font-size:1.125rem}.hero-title-mask{margin-top:-1.25rem}.hero-title{font-size:16vw}.hero-portrait-layer{width:500px}.hero-bottom{padding-bottom:2.5rem}.hero-intro{max-width:260px}.contact-button{padding:1rem 2.75rem;font-size:1rem}.marquee-section{padding-top:10rem}.decoration-moon{width:210px;left:4%}.decoration-object{width:180px;left:10%}.decoration-lego{width:210px;right:4%}.decoration-group{width:220px;right:10%}.services-section{border-radius:60px 60px 0 0;padding:8rem 2.5rem}.services-title{margin-bottom:7rem}.service-item{padding:3rem 0}.projects-section{border-radius:60px 60px 0 0;margin-top:-3.5rem}.project-card{border-radius:60px;padding:2rem}.project-gallery img{border-radius:50px}}@media (width>=1024px){.hero-nav{font-size:1.4rem}.hero-title{font-size:17.5vw}.hero-portrait-layer{width:610px}}@media (width<=639px){.marquee-tile{flex-basis:280px;width:280px;height:180px}.decoration{opacity:.62}.about-copy{max-width:78vw}.projects-stage{min-height:390svh}.projects-heading-row p{display:none}.project-meta{padding-bottom:.75rem}.project-number{font-size:2.75rem}.project-labels h3{font-size:1.05rem}.project-gallery{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.site-footer{text-align:center;flex-direction:column;gap:.55rem}}@media (width<=767px),(hover:none),(pointer:coarse){.portrait-interaction{cursor:default;pointer-events:none}.portrait-surface{will-change:auto;transition:none;transform:none!important}.portrait-light-pass{display:none}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}