:root { --ink:#0c0c0c; --metal-1:#67707b; --metal-2:#c9d9e5; --paper:#f7f8f9; --mist:#d7e2ea; --line:rgba(215,226,234,.24); --pink:#c433d3; --violet:#743bd0; }
*{box-sizing:border-box} html{scroll-behavior:smooth;background:var(--ink)} body{margin:0;background:var(--ink);color:var(--mist);font-family:"Noto Sans SC","Kanit",sans-serif;overflow-x:clip} button,a{font:inherit} button{cursor:pointer} a{text-decoration:none;color:inherit}.mono,.eyebrow,.project-id,.work-no,.service-no,.nav{font-family:Kanit,"Noto Sans SC",sans-serif;letter-spacing:.12em}.hero-heading{background:linear-gradient(180deg,var(--metal-1) 0%,var(--metal-2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.page{overflow:clip}.nav{position:absolute;z-index:10;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:26px clamp(22px,4.2vw,72px);font-size:clamp(.75rem,1.1vw,1.02rem);font-weight:500;text-transform:uppercase}.brand{padding:0;border:0;background:none;color:var(--mist);font-weight:800;letter-spacing:.08em}.brand b{color:#fff}.nav-links{display:flex;align-items:center;gap:clamp(16px,3vw,48px)}.nav-links button{border:0;background:none;color:var(--mist);font-size:inherit;letter-spacing:inherit;text-transform:uppercase;transition:opacity .2s}.nav-links button:hover{opacity:.65}.nav-links .contact-link{display:none}.hero{position:relative;isolation:isolate;min-height:100svh;padding:clamp(118px,13vw,172px) clamp(22px,4.2vw,72px) 32px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.hero:before{content:"";position:absolute;z-index:-2;inset:0;background:radial-gradient(circle at 50% 70%,#242733 0,transparent 25%),linear-gradient(140deg,#111217 0%,#0c0c0c 62%)}.hero:after{content:"";position:absolute;inset:0;z-index:-1;opacity:.24;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:58px 58px;mask-image:linear-gradient(to bottom,black,transparent 72%)}.hero-title-wrap{overflow:hidden;position:relative;z-index:2}.hero-title{font-family:Kanit,"Noto Sans SC",sans-serif;font-size:clamp(4.8rem,15.8vw,17.6rem);line-height:.76;font-weight:900;letter-spacing:-.075em;text-transform:uppercase;white-space:nowrap;margin:0;transform:translateY(110%);animation:rise 1.15s cubic-bezier(.16,1,.3,1) .15s forwards}.hero-title .cn{font-family:"Noto Sans SC",sans-serif;font-size:.72em;letter-spacing:-.16em}.hero-portrait{position:absolute;z-index:1;left:50%;bottom:0;width:min(39vw,525px);height:min(68vh,700px);transform:translateX(-50%);background:linear-gradient(to bottom,transparent 55%,var(--ink)),url("/profile.jpg") center 26%/cover no-repeat;filter:saturate(.78) contrast(1.08);mix-blend-mode:screen;opacity:0;animation:portrait .95s cubic-bezier(.16,1,.3,1) .55s forwards;will-change:transform}.hero-portrait:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 46%,var(--ink) 98%)}.hero-deck{position:relative;z-index:3;display:flex;align-items:end;justify-content:space-between;gap:24px;opacity:0;animation:fadeup .7s ease-out .6s forwards}.hero-note{margin:0;max-width:290px;font-size:clamp(.74rem,1.3vw,1.16rem);font-weight:500;line-height:1.65;letter-spacing:.08em;text-transform:uppercase}.contact-orb{display:grid;place-items:center;width:clamp(92px,10vw,142px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.85);outline:4px solid rgba(160,38,192,.22);outline-offset:-6px;background:linear-gradient(125deg,#220c35,#c111aa 47%,#ee6f22);color:white;font-family:Kanit,sans-serif;font-size:clamp(.66rem,.9vw,.85rem);font-weight:700;letter-spacing:.12em;text-transform:uppercase;transition:transform .25s,filter .25s;box-shadow:inset 5px 5px 14px rgba(255,255,255,.2),inset -7px -8px 20px rgba(28,0,47,.55)}.contact-orb:hover{transform:scale(1.08) rotate(8deg);filter:brightness(1.1)}.contact-orb span{max-width:52px;line-height:1.1}.ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0}.ticker-track{display:flex;gap:22px;width:max-content;animation:ticker 32s linear infinite}.ticker-track span{font-family:Kanit,sans-serif;font-size:clamp(1.05rem,2.1vw,2rem);font-weight:700;letter-spacing:.055em;white-space:nowrap}.ticker-track i{font-style:normal;color:#9f44de}.mosaic{padding:clamp(88px,12vw,170px) 0 42px;overflow:hidden}.mosaic-label{padding:0 clamp(22px,4.2vw,72px) 32px;display:flex;justify-content:space-between;gap:12px;color:#9aa8b4;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em}.marquee-row{display:flex;gap:12px;width:max-content;will-change:transform;margin-bottom:12px}.marquee-row.reverse{margin-left:-680px}.marquee-tile{width:clamp(230px,29vw,420px);height:clamp(158px,18.75vw,270px);overflow:hidden;border-radius:22px;background:#1b1b1b;flex:0 0 auto}.marquee-tile img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;transition:transform .6s cubic-bezier(.16,1,.3,1)}.marquee-tile:hover img{transform:scale(1.06)}.about{min-height:100svh;position:relative;padding:clamp(110px,13vw,190px) 24px;display:grid;place-items:center;overflow:hidden}.about-center{position:relative;z-index:1;text-align:center;max-width:790px}.section-title{font-family:Kanit,"Noto Sans SC",sans-serif;font-size:clamp(4.25rem,11.8vw,10rem);line-height:.85;letter-spacing:-.07em;font-weight:900;text-transform:uppercase;margin:0}.section-title .cn{font-family:"Noto Sans SC",sans-serif;font-size:.78em;letter-spacing:-.16em}.about-copy{font-size:clamp(1rem,1.65vw,1.37rem);font-weight:500;line-height:1.95;margin:clamp(42px,6vw,76px) auto 0;max-width:680px}.about-copy .reveal-char{opacity:.2;transition:opacity .25s}.about-copy.is-readable .reveal-char{opacity:1}.orbital{position:absolute;z-index:0;border:1px solid rgba(215,226,234,.24);border-radius:50%;width:clamp(120px,17vw,235px);aspect-ratio:1;display:grid;place-items:center;font-family:Kanit,sans-serif;color:#aeb9c1;font-weight:700;font-size:clamp(.65rem,1vw,.9rem);letter-spacing:.08em;text-transform:uppercase}.orbital:after{content:"";width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 30%,#fff,#7f8691 30%,#1b1e23 70%);box-shadow:0 0 40px rgba(190,203,218,.2)}.orbital.one{top:11%;left:4%;transform:rotate(-16deg)}.orbital.two{bottom:10%;right:6%;transform:rotate(25deg)}.orbital.three{top:18%;right:7%;width:clamp(70px,9vw,132px);transform:rotate(12deg)}.expertise{position:relative;border-radius:58px 58px 0 0;background:var(--paper);color:var(--ink);padding:clamp(84px,11vw,150px) clamp(22px,8.5vw,140px)}.section-kicker{font-family:Kanit,sans-serif;font-weight:700;letter-spacing:.13em;font-size:.78rem;text-transform:uppercase;margin:0 0 20px}.expertise .section-title{color:var(--ink);margin-bottom:clamp(58px,8vw,115px)}.expertise-list{max-width:1120px;margin:0 auto}.service{display:grid;grid-template-columns:clamp(88px,14vw,178px) 1fr;gap:clamp(20px,5vw,80px);align-items:start;border-top:1px solid rgba(12,12,12,.16);padding:clamp(26px,3vw,45px) 0}.service:last-child{border-bottom:1px solid rgba(12,12,12,.16)}.service-no{font-size:clamp(3.3rem,8.3vw,8.5rem);line-height:.72;font-weight:900;letter-spacing:-.09em}.service h3{font-size:clamp(1.15rem,2.35vw,2.1rem);letter-spacing:.04em;text-transform:uppercase;margin:0 0 12px;font-weight:700}.service p{font-size:clamp(.88rem,1.45vw,1.12rem);line-height:1.75;margin:0;max-width:670px;color:rgba(12,12,12,.65)}.projects{position:relative;z-index:1;margin-top:-56px;border-radius:58px 58px 0 0;padding:clamp(92px,12vw,168px) clamp(22px,4.2vw,72px);background:var(--ink)}.projects-header{margin-bottom:clamp(58px,9vw,120px)}.projects-header .section-kicker{color:#aeb9c1}.project-stack{max-width:1340px;margin:0 auto}.project-shell{position:relative;height:87vh;min-height:650px}.project-card{position:sticky;top:72px;overflow:hidden;height:calc(100vh - 110px);min-height:580px;padding:clamp(18px,2.8vw,40px);border:2px solid var(--mist);border-radius:clamp(34px,4.8vw,62px);background:#101114;transform-origin:top center;transition:box-shadow .3s}.project-shell:nth-child(1) .project-card{top:72px}.project-shell:nth-child(2) .project-card{top:96px}.project-shell:nth-child(3) .project-card{top:120px}.project-card:hover{box-shadow:0 20px 80px rgba(117,59,208,.18)}.project-meta{display:grid;grid-template-columns:minmax(90px,.65fr) 1.4fr auto;gap:18px;align-items:start;margin-bottom:clamp(18px,2.5vw,34px)}.project-number{font-family:Kanit,sans-serif;font-size:clamp(3.5rem,8vw,8.5rem);line-height:.68;letter-spacing:-.1em;font-weight:900}.project-type,.project-name{margin:0}.project-type{font-family:Kanit,sans-serif;font-size:.72rem;letter-spacing:.13em;color:#aeb9c1;text-transform:uppercase}.project-name{font-size:clamp(1.25rem,2.8vw,3.05rem);line-height:1.05;font-weight:800;margin-top:7px}.ghost-button{align-self:center;border:1px solid var(--mist);border-radius:99px;color:var(--mist);background:transparent;padding:12px 20px;text-transform:uppercase;font-family:Kanit,sans-serif;font-size:.72rem;letter-spacing:.12em;white-space:nowrap;transition:background .2s,color .2s}.ghost-button:hover{background:var(--mist);color:var(--ink)}.project-media{height:calc(100% - 124px);display:grid;grid-template-columns:39% 1fr;gap:clamp(10px,1.5vw,22px)}.project-media .left{display:grid;grid-template-rows:43% 1fr;gap:clamp(10px,1.5vw,22px)}.project-media figure{margin:0;overflow:hidden;border-radius:clamp(24px,3.7vw,48px);background:#262831}.project-media img{width:100%;height:100%;object-fit:cover;object-position:50% 10%;transition:transform .7s cubic-bezier(.16,1,.3,1)}.project-card:hover img{transform:scale(1.04)}.all-work{background:#f1f3f5;color:var(--ink);padding:clamp(80px,11vw,150px) clamp(22px,4.2vw,72px)}.all-work-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;max-width:1340px;margin:0 auto clamp(42px,5.5vw,72px)}.all-work-heading .section-title{color:var(--ink)}.all-work-heading p{margin:0;max-width:260px;font-size:.92rem;line-height:1.6;color:rgba(12,12,12,.64)}.work-grid{max-width:1340px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.work-card{position:relative;aspect-ratio:.99;overflow:hidden;border:0;padding:0;text-align:left;color:#fff;background:#20232b}.work-card img{width:100%;height:100%;object-fit:cover;object-position:50% 10%;transition:transform .6s cubic-bezier(.16,1,.3,1),filter .3s}.work-card:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,5,7,.84),rgba(4,5,7,.05) 60%)}.work-card:hover img,.work-card:focus-visible img{transform:scale(1.06);filter:saturate(1.12)}.work-copy{position:absolute;z-index:1;inset:auto 18px 16px}.work-copy span,.work-copy small{display:block}.work-copy span{font-size:clamp(1rem,1.5vw,1.4rem);font-weight:700;line-height:1.25}.work-copy small{font-family:Kanit,sans-serif;font-size:.65rem;letter-spacing:.12em;margin-top:6px;opacity:.76}.footer{padding:clamp(100px,12vw,170px) clamp(22px,4.2vw,72px) 30px;min-height:78vh;display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(circle at 78% 36%,#392040 0,transparent 25%),var(--ink)}.footer-top{display:flex;align-items:end;justify-content:space-between;gap:30px}.footer h2{font-family:Kanit,"Noto Sans SC",sans-serif;font-size:clamp(4rem,10vw,10rem);letter-spacing:-.075em;line-height:.78;text-transform:uppercase;margin:0}.footer h2 .cn{font-family:"Noto Sans SC",sans-serif;font-size:.7em;letter-spacing:-.16em}.footer .contact-orb{flex:none}.footer-bottom{display:flex;justify-content:space-between;gap:20px;font-family:Kanit,sans-serif;font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:#9aa8b4}.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}.reveal.visible{opacity:1;transform:none}@keyframes rise{to{transform:translateY(0)}}@keyframes portrait{to{opacity:.88}}@keyframes fadeup{to{opacity:1;transform:none}}@keyframes ticker{to{transform:translateX(-50%)}}@media (max-width:700px){.nav-links{gap:12px}.nav-links button:not(.contact-link){display:none}.nav-links .contact-link{display:block}.hero{min-height:93svh}.hero-title{font-size:20.7vw}.hero-portrait{width:72vw;height:53vh;background-position:center 20%;opacity:.54!important}.hero-deck{align-items:flex-end}.hero-note{max-width:205px;font-size:.66rem}.mosaic{padding-top:86px}.mosaic-label{font-size:.61rem}.about{min-height:86svh}.orbital.one{top:5%;left:-7%}.orbital.two{bottom:5%;right:-8%}.orbital.three{display:none}.about-copy{padding:0 8px}.expertise,.projects{border-radius:36px 36px 0 0}.service{grid-template-columns:78px 1fr;gap:14px}.project-shell{height:660px;min-height:0}.project-card{top:42px!important;height:590px;min-height:0;padding:18px;border-radius:34px}.project-meta{grid-template-columns:72px 1fr;gap:12px;margin-bottom:16px}.project-number{font-size:4.2rem}.project-type{font-size:.61rem}.project-name{font-size:1.12rem}.ghost-button{display:none}.project-media{height:calc(100% - 76px);grid-template-columns:1fr;grid-template-rows:31% 1fr}.project-media .left{grid-template-columns:1fr 1fr;grid-template-rows:1fr;order:2}.project-media .right{order:1}.project-media figure{border-radius:22px}.work-grid{grid-template-columns:repeat(2,1fr);gap:8px}.work-copy{inset:auto 11px 10px}.work-copy span{font-size:.8rem}.work-copy small{font-size:.53rem}.all-work-heading{display:block}.all-work-heading p{margin-top:20px}.footer{min-height:62svh}.footer-top{display:block}.footer .contact-orb{margin-top:42px}.footer-bottom{font-size:.58rem;flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
.hero-portrait{background-image:linear-gradient(to bottom,transparent 55%,var(--ink)),url("./public/profile.jpg")}
.hero-heading{background:linear-gradient(180deg,#d9e5ef 0%,#fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 18px rgba(223,238,250,.16)}
.marquee-tile img,.work-card img{object-position:center top}
.all-work .section-title{font-size:clamp(3.2rem,7.8vw,7.6rem);letter-spacing:-.11em}
.project-media{display:block}
.iframe-frame{position:relative;height:100%;overflow:hidden;border-radius:clamp(24px,3.7vw,48px);background:radial-gradient(circle at 50% 0,#26304a 0,transparent 45%),#15161a}
.iframe-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#101114}
.iframe-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;pointer-events:none;background:linear-gradient(115deg,rgba(13,14,18,.78),rgba(26,31,44,.5));text-align:center}.iframe-placeholder span{font-family:Kanit,sans-serif;font-size:.72rem;letter-spacing:.18em;color:#bfcee0}.iframe-placeholder strong{font-size:clamp(1.15rem,2.2vw,2rem)}.iframe-placeholder small{color:#acb9c6}
.modal-open{overflow:hidden}.lightbox{position:fixed;z-index:100;inset:0;display:none;align-items:center;justify-content:center;padding:24px}.lightbox.is-open{display:flex}.lightbox-backdrop{position:absolute;inset:0;border:0;background:rgba(2,3,5,.82);backdrop-filter:blur(10px)}.lightbox-panel{position:relative;z-index:1;width:min(1120px,100%);height:min(86vh,920px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;border:1px solid rgba(215,226,234,.3);border-radius:28px;overflow:hidden;background:#121417;box-shadow:0 24px 90px rgba(0,0,0,.6);outline:0}.lightbox-panel header,.lightbox-panel footer{display:flex;align-items:center;gap:12px;padding:14px 18px;background:#171a1f}.lightbox-panel header{justify-content:space-between;border-bottom:1px solid rgba(215,226,234,.15)}.lightbox-panel header p{margin:0;font-family:Kanit,sans-serif;font-size:.68rem;letter-spacing:.14em;color:#afbdc9}.lightbox-panel header h2{margin:4px 0 0;font-size:1.1rem}.lightbox-stage{min-height:0;overflow:auto;display:grid;place-items:start center;padding:26px;background:radial-gradient(circle at 50% 0,#273039 0,transparent 52%),#0a0c0f}.lightbox-stage img{display:block;width:min(100%,850px);height:auto;transform-origin:top center;transition:transform .2s ease;box-shadow:0 12px 38px rgba(0,0,0,.5)}.lightbox-panel footer{border-top:1px solid rgba(215,226,234,.15)}.icon-button{border:1px solid rgba(215,226,234,.4);border-radius:50%;width:34px;height:34px;padding:0;background:transparent;color:var(--mist);font-family:Kanit,sans-serif;font-size:1.25rem;line-height:1;transition:background .2s,color .2s}.icon-button:hover{background:var(--mist);color:var(--ink)}.lightbox-panel footer span{min-width:44px;text-align:center;font-family:Kanit,sans-serif;font-size:.72rem;letter-spacing:.08em}.lightbox-spacer{flex:1}
.ether-zone{position:relative;isolation:isolate}.ether-canvas{position:absolute;z-index:-1;inset:0;width:100%;height:100%;pointer-events:none;opacity:.9;mix-blend-mode:screen}.hero.ether-zone:before{z-index:-3}.hero.ether-zone:after{z-index:-2}.ticker.ether-zone .ether-canvas{opacity:.44}.mosaic.ether-zone .ether-canvas{opacity:.68}.about.ether-zone .ether-canvas{opacity:.74}.projects.ether-zone .ether-canvas{opacity:.7}.footer.ether-zone .ether-canvas{opacity:.76}.ether-zone:hover .ether-canvas{opacity:1}
@media (max-width:700px){.project-media{display:block!important}.iframe-frame{border-radius:22px}.iframe-placeholder strong{font-size:1rem}.lightbox{padding:10px}.lightbox-panel{height:92vh;border-radius:20px}.lightbox-panel header,.lightbox-panel footer{padding:12px}.lightbox-stage{padding:14px}.lightbox-panel header h2{font-size:.95rem}}
@media (prefers-reduced-motion:reduce){.ether-canvas{display:none}}
.waves-canvas{position:absolute;z-index:-2;inset:0;width:100%;height:100%;pointer-events:none;opacity:.72;mix-blend-mode:screen}.ether-canvas{opacity:.64}.hero.ether-zone:before{z-index:-4}.hero.ether-zone:after{z-index:-3}.ticker.ether-zone .ether-canvas{opacity:.3}.mosaic.ether-zone .ether-canvas{opacity:.44}.about.ether-zone .ether-canvas{opacity:.5}.projects.ether-zone .ether-canvas{opacity:.48}.footer.ether-zone .ether-canvas{opacity:.52}.ether-zone:hover .ether-canvas{opacity:.7}.project-shell{height:calc(87vh + 200px);min-height:850px}.project-card{height:calc(100vh + 90px);min-height:780px}.iframe-frame{height:100%}.iframe-scaler{width:1920px;height:var(--iframe-internal-height,1200px);transform:scale(var(--iframe-scale,.5));transform-origin:top left}.iframe-frame iframe{position:static;display:block;width:1920px;height:var(--iframe-internal-height,1200px);border:0;background:#101114}@media (max-width:700px){.project-shell{height:860px;min-height:0}.project-card{height:790px;min-height:0}.waves-canvas{opacity:.5}}
@media (prefers-reduced-motion:reduce){.waves-canvas{display:none}}
.waves-canvas{opacity:.94}.ticker.ether-zone .waves-canvas{opacity:.58}.mosaic.ether-zone .waves-canvas{opacity:.88}.about.ether-zone .waves-canvas{opacity:.82}.projects.ether-zone .waves-canvas{opacity:.8}.footer.ether-zone .waves-canvas{opacity:.86}.ether-canvas{opacity:.45}.ticker.ether-zone .ether-canvas{opacity:.18}.mosaic.ether-zone .ether-canvas{opacity:.28}.about.ether-zone .ether-canvas{opacity:.32}.projects.ether-zone .ether-canvas{opacity:.3}.footer.ether-zone .ether-canvas{opacity:.34}.ether-zone:hover .ether-canvas{opacity:.48}
.hero .hero-portrait{top:0;bottom:auto;left:0;width:66.13svh;height:100svh;transform:none;background-image:url("./public/profile.jpg");background-size:auto 100%;background-position:left top;background-repeat:no-repeat;filter:saturate(.88) contrast(1.03);mix-blend-mode:normal;-webkit-mask-image:linear-gradient(90deg,#000 18%,rgba(0,0,0,.92)42%,transparent 100%);mask-image:linear-gradient(90deg,#000 18%,rgba(0,0,0,.92)42%,transparent 100%)}.hero .hero-portrait:after{background:linear-gradient(180deg,transparent 58%,rgba(12,12,12,.88) 100%)}@media (max-width:700px){.hero .hero-portrait{width:61.5svh;height:93svh;background-size:auto 100%;background-position:left top}.hero .hero-portrait:after{background:linear-gradient(180deg,transparent 64%,rgba(12,12,12,.88) 100%)}}
.waves-canvas{opacity:.492}.ticker.ether-zone .waves-canvas{opacity:.3}.mosaic.ether-zone .waves-canvas{opacity:.444}.about.ether-zone .waves-canvas{opacity:.42}.projects.ether-zone .waves-canvas{opacity:.408}.footer.ether-zone .waves-canvas{opacity:.432}.project-meta>div:nth-child(2){transform:translateX(-100px);min-width:0}.project-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.project-type{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.project-shell{z-index:1}.project-shell:nth-child(1){z-index:1}.project-shell:nth-child(2){z-index:2}.project-shell:nth-child(3){z-index:3}.project-card{will-change:transform;isolation:isolate}.service{position:relative;transition:padding .32s cubic-bezier(.16,1,.3,1),background-color .32s ease,border-color .32s ease}.service:after{content:"↗";position:absolute;right:clamp(12px,2vw,30px);top:50%;font-family:Kanit,sans-serif;font-size:clamp(1.25rem,2vw,2rem);opacity:0;transform:translate3d(-10px,-50%,0);transition:opacity .24s ease,transform .32s cubic-bezier(.16,1,.3,1)}.service:hover{padding-left:clamp(10px,1.6vw,24px);padding-right:clamp(38px,4vw,68px);background:rgba(12,12,12,.055);border-color:rgba(12,12,12,.42)}.service:hover .service-no{transform:translateX(8px);background:linear-gradient(135deg,#176dff 0%,#9b43ff 52%,#e959cc 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.service:hover h3{letter-spacing:.075em;color:#6738d8}.service:hover:after{opacity:1;transform:translate3d(0,-50%,0)}.service-no,.service h3{transition:transform .32s cubic-bezier(.16,1,.3,1),color .24s ease,letter-spacing .24s ease}.all-work-heading .section-kicker{transform:translateY(-12px)}.all-work-heading .section-title{font-size:clamp(3rem,6.8vw,72px)}.work-card{border-radius:22px}.work-copy small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.footer h2,.footer h2 .cn{letter-spacing:.02em}.iframe-placeholder{opacity:1;visibility:visible;transition:opacity .22s ease,visibility .22s step-end}.iframe-frame.is-ready .iframe-placeholder{opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s step-end}.hero .hero-portrait{z-index:2;opacity:0;animation:portrait-solid .95s cubic-bezier(.16,1,.3,1) .55s forwards;width:45vw;background-size:cover;background-position:left top}@keyframes portrait-solid{to{opacity:1}}@media (max-width:700px){.project-meta>div:nth-child(2){transform:none}.project-name,.project-type{white-space:nowrap}.project-shell:nth-child(n){z-index:1}.service:hover{padding-left:0;padding-right:0;background:transparent}.service:hover:after{display:none}.all-work-heading .section-kicker{transform:translateY(-8px)}.all-work-heading .section-title{font-size:clamp(3rem,12vw,4.2rem)}.work-card{border-radius:14px}.footer h2,.footer h2 .cn{letter-spacing:.012em}.hero .hero-portrait{width:61.5svh;background-size:auto 100%;background-position:left top}}

/* Browser review: title hierarchy, orbital motion, and case-study alignment. */
.hero-title-wrap{align-self:flex-end;width:min(53vw,760px);margin:0 clamp(0px,3.2vw,46px) 0 auto;text-align:center;overflow:visible}.hero-title{font-size:clamp(4.8rem,10.4vw,10rem);line-height:.8;letter-spacing:-.055em;white-space:normal;transform:none;animation:none}.hero-title-row{display:block;overflow:hidden;padding:.08em .05em .16em}.hero-title-text{display:block;transform:translate3d(0,118%,0);will-change:transform;animation:hero-title-enter .82s cubic-bezier(.16,1,.3,1) forwards}.hero-title-name{font-size:.84em!important;letter-spacing:-.12em!important;animation-delay:.36s}.hero-title-intro{animation-delay:.16s}@keyframes hero-title-enter{to{transform:translate3d(0,0,0)}}
.orbital{--orbital-rotation:0deg;will-change:transform;animation:orbital-float 4.8s ease-in-out infinite}.orbital.one{--orbital-rotation:-16deg;animation-delay:-1.1s}.orbital.two{--orbital-rotation:25deg;animation-duration:5.6s;animation-delay:-2.4s}.orbital.three{--orbital-rotation:12deg;animation-duration:4.3s;animation-delay:-.6s}.about:not(.is-in-view) .orbital{animation-play-state:paused}@keyframes orbital-float{0%,100%{transform:rotate(var(--orbital-rotation)) translate3d(0,-5px,0)}50%{transform:rotate(var(--orbital-rotation)) translate3d(0,5px,0)}}
.project-meta>div:nth-child(2){transform:translateX(-150px)}
@media (max-width:700px){.hero-title-wrap{width:100%;margin:0;text-align:right;padding-right:2vw}.hero-title{font-size:clamp(4.6rem,20.7vw,7rem);line-height:.82}.hero-title-row{padding-right:0}.project-meta>div:nth-child(2){transform:none}}
@media (prefers-reduced-motion:reduce){.hero-title-text{transform:none;animation:none}.orbital{animation:none;transform:rotate(var(--orbital-rotation))}}

/* GradientWaves: 70% of the prior visual intensity. */
.waves-canvas{opacity:.3444}.ticker.ether-zone .waves-canvas{opacity:.21}.mosaic.ether-zone .waves-canvas{opacity:.3108}.about.ether-zone .waves-canvas{opacity:.294}.projects.ether-zone .waves-canvas{opacity:.2856}.footer.ether-zone .waves-canvas{opacity:.3024}
@media (max-width:700px){.waves-canvas{opacity:.35}}

/* Hero review: lock the title to the right-hand visual field and make its two-stage entrance legible. */
.hero-title-wrap{position:absolute;z-index:4;top:45svh;right:clamp(20px,6.2vw,92px);width:min(50vw,720px);margin:0;transform:translate3d(0,-50%,0);text-align:center;overflow:visible}.hero-title{font-size:clamp(4.8rem,10vw,10rem);line-height:.8}.hero-title-row{overflow:hidden;padding:.1em .06em .18em}.hero-title-text{opacity:0;transform:translate3d(0,136%,0) skewY(4deg);filter:blur(9px);animation:hero-title-enter-v2 1.02s cubic-bezier(.16,1,.3,1) forwards}.hero-title-intro{animation-delay:.32s}.hero-title-name{animation-delay:1.02s}@keyframes hero-title-enter-v2{to{opacity:1;transform:translate3d(0,0,0) skewY(0);filter:blur(0)}}
@media (max-width:700px){.hero-title-wrap{top:45svh;right:clamp(16px,5vw,28px);width:min(76vw,340px);padding:0;text-align:center}.hero-title{font-size:clamp(4.6rem,20.7vw,7rem);line-height:.82}}
@media (prefers-reduced-motion:reduce){.hero-title-text{opacity:1;transform:none;filter:none;animation:none}}

/* Keep the supporting copy and contact action anchored after the title leaves flex flow. */
.hero-deck{margin-top:auto}

/* Desktop hero portrait: preserve scale while revealing 100px more of the lower photograph. */
@media (min-width:701px){.hero .hero-portrait{background-position:left -100px}}

/* Stable no-script state: GSAP only enhances this visible layout. */
.hero .hero-portrait,.hero-deck,.hero-title-text{opacity:1;animation:none}.hero-title-text{transform:none;filter:none;will-change:auto}
@media (prefers-reduced-motion:reduce){.hero .hero-portrait,.hero-deck{animation:none;opacity:1}}
.hero-char{display:inline;color:#edf4fa;-webkit-text-fill-color:#edf4fa}