@font-face{font-family:'Kanit';font-style:normal;font-weight:200;font-display:swap;src:url(../fonts/kanit-200-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Kanit';font-style:normal;font-weight:200;font-display:swap;src:url(../fonts/kanit-200-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Kanit';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/kanit-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Kanit';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/kanit-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Kanit';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/kanit-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Kanit';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/kanit-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Kanit';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/kanit-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Kanit';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/kanit-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/roboto-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/roboto-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/roboto-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/roboto-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/roboto-mono-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/roboto-mono-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/roboto-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/roboto-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* studio syzygy — static site styles (replaces Eldon/Elementor CSS) */
:root{--qodef-main-color:#fff;--qodef-main-color-second:#000;--bg:#000;--fg:#fff;--line:#363636;--muted:#7a7a7a;--cjk:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;--kanit:Kanit,var(--cjk);--roboto:Roboto,var(--cjk);--mono:"Roboto Mono",var(--cjk)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;padding:22px;background:var(--bg);color:var(--fg);font:200 16px/27px var(--kanit);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;vertical-align:top}
h1,h2,h3,h4,h5,h6{font-family:var(--kanit);font-weight:300;margin:0}
h1{font-size:40px;line-height:1.2}h2{font-size:35px;line-height:1.2}h3{font-size:35px;line-height:40px}h4{font-size:25px;line-height:28px;font-weight:400}h5{font-size:20px;line-height:1.3;font-weight:400}h6{font-size:18px;line-height:1.294;font-weight:400}
p{margin:10px 0}
figure{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
.hdr{height:100px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:100}
.hdr .logo{display:block;height:60px}
.hdr .logo img{height:60px;width:auto;display:block}
.nav .menu{list-style:none;margin:0;padding:0;display:flex;height:100px}
.nav li{margin:0 29px;height:100%}
.nav li:first-child{margin-left:0}.nav li:last-child{margin-right:0}
.nav a{position:relative;display:flex;align-items:center;height:100%;font:400 20px/1.294 var(--kanit)}
.nav a::before{content:"";position:absolute;top:calc(50% - 4px);left:-20px;width:9px;height:9px;background:currentColor;opacity:0;transform:translateX(-5px);transition:transform .3s cubic-bezier(.39,.1,0,.98),opacity .15s ease-out}
.nav a:hover::before,.nav .is-current a::before{opacity:1;transform:none}
.mhdr{display:none}
@media (max-width:1024px){
 .hdr{display:none}
 .mhdr{display:flex;align-items:center;justify-content:space-between;height:85px;padding:0 20px;position:relative;z-index:100;background:#000}
 .mlogo{display:block;height:85px;width:85px}.mlogo img{width:85px;height:85px;object-fit:contain;display:block}
 .burger{width:30px;height:30px;position:relative}
 .burger span{position:absolute;left:0;width:30px;height:2px;background:#fff;transition:transform .25s,opacity .2s}
 .burger span:nth-child(1){top:6px}.burger span:nth-child(2){top:14px}.burger span:nth-child(3){top:22px}
 .burger[aria-expanded=true] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
 .burger[aria-expanded=true] span:nth-child(2){opacity:0}
 .burger[aria-expanded=true] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
 .mnav{position:absolute;top:100%;left:0;right:0;background:#000;display:none;padding:10px 20px 25px;border-bottom:1px solid var(--line)}
 .mnav.is-open{display:block}
 .mmenu{list-style:none;margin:0;padding:0}
 .mmenu a{display:block;padding:8px 0;font:300 17px/22px var(--kanit)}
 .mmenu .is-current a{text-decoration:underline;text-underline-offset:4px}
}

/* content grid (Eldon .qodef-content-grid) */
main{display:block}
.grid{width:1100px;margin:0 auto;padding-bottom:60px}
@media (min-width:1441px){.grid-1400{width:1400px}}
@media (max-width:1200px){.grid{width:960px}}
@media (max-width:1024px){.grid{width:768px}}
@media (max-width:800px){.grid{width:97%}}
.full{padding-bottom:60px}
.con{min-width:0;position:relative}
.blk{min-width:0;max-width:100%}
.con>.blk{flex-shrink:1}

/* video (新片场 iframe) */
.b-video .frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden}
.b-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* headings & text (Elementor heading/text widgets used Roboto) */
.b-heading>*{font-family:var(--roboto);font-weight:300;color:#fff;margin:0}
.b-heading>h3{font-size:35px;line-height:40px}
.b-heading.is-section>*{font-family:var(--kanit);font-weight:400;font-size:25px;line-height:28px}
.b-meta>p{font:300 16px/30px var(--roboto);margin:0;color:#fff}
.b-text{font:400 16px/27px var(--roboto);color:var(--muted)}
.b-text p:first-child{margin-top:0}.b-text p:last-child{margin-bottom:0}
.b-text a{color:#fff}
.b-text h2{font-size:24px;line-height:1.3;margin:28px 0 10px;color:#fff}
.b-lead>*{font:300 20px/30px var(--kanit);margin:0;color:#fff}
.b-image{text-align:center}.b-image img{width:100%;display:block}
.b-image.size-medium img{width:auto;max-width:min(300px,100%);display:inline-block}.b-image.size-thumbnail img{width:auto;max-width:150px;display:inline-block}.b-image.size-large img{width:auto;max-width:min(1024px,100%);display:inline-block}
@media (max-width:767px){.b-heading>h3{font-size:25px}}

/* swiper image slider (Qi image slider) */
.b-slider .swiper{position:relative;width:100%}
.b-slider .swiper-slide img{width:100%;height:auto;display:block}
.sw-prev,.sw-next{position:absolute;top:50%;z-index:5;width:30px;height:30px;margin-top:-15px;color:#111;display:flex;align-items:center;justify-content:center}
.sw-prev{left:30px}.sw-next{right:30px}
.sw-prev svg,.sw-next svg{width:30px;height:auto;stroke:currentColor;stroke-width:2;fill:none;transition:transform .2s ease-out}
.sw-prev:hover svg{transform:translateX(-4px)}.sw-next:hover svg{transform:translateX(4px)}
.swiper-pagination-bullet{background:#fff}

/* galleries */
.gal{--cols:1;--gap:0px}
.gal-grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--gap)}
.gal-masonry,.gal-pinterest{column-count:var(--cols);column-gap:var(--gap)}
.gal-masonry .gi,.gal-pinterest .gi{break-inside:avoid;margin-bottom:var(--gap)}
.gal.is-js{display:flex;gap:var(--gap);align-items:flex-start;column-count:auto}
.gal.is-js .gcol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--gap)}
.gal.is-js .gi{margin:0}
.gi a,.gi>img{display:block;overflow:hidden}
.gi img{width:100%;height:auto;display:block}
.hover-zoom-out .gi img{transform:scale(1.03) translateZ(0);transition:transform .35s cubic-bezier(.25,.46,.45,.94)}
.hover-zoom-out .gi:hover img{transform:scale(1)}
.hover-zoom .gi img{transform:scale(1.005) translateZ(0);transition:transform .35s cubic-bezier(.25,.46,.45,.94)}
.hover-zoom .gi:hover img{transform:scale(1.03)}
a.lb{cursor:zoom-in}

/* before / after (Qi before-after, vertical = top/bottom split) */
.cmp{position:relative;overflow:hidden;user-select:none;-webkit-user-select:none;cursor:grab}
.cmp img{display:block;width:100%;height:auto;pointer-events:none}
.cmp-before{position:absolute;inset:0}
.cmp-before img{width:100%;height:100%;object-fit:cover}
.cmp-v{touch-action:pan-x}.cmp-h{touch-action:pan-y}
.cmp-v .cmp-before{clip-path:inset(0 0 calc(100% - var(--pos)) 0)}
.cmp-h .cmp-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.cmp-handle{position:absolute;z-index:3;width:100px;height:100px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);outline:none}
.cmp-v .cmp-handle{top:var(--pos);left:50%}.cmp-h .cmp-handle{left:var(--pos);top:50%}
.cmp-handle span{font:700 1rem/1 var(--kanit);color:#111;text-transform:uppercase;pointer-events:none}
.cmp-handle::before,.cmp-handle::after{content:"";position:absolute;background:#fff}
.cmp-v .cmp-handle::before{width:100vw;height:2px;top:50%;left:50%;margin-left:.48em;transform:translateY(-50%);margin-left:48px}
.cmp-v .cmp-handle::after{width:100vw;height:2px;top:50%;right:50%;transform:translateY(-50%);margin-right:48px}
.cmp-h .cmp-handle::before{height:100vh;width:2px;left:50%;top:50%;margin-top:48px;transform:translateX(-50%)}
.cmp-h .cmp-handle::after{height:100vh;width:2px;left:50%;bottom:50%;margin-bottom:48px;transform:translateX(-50%)}
.cmp-handle:focus-visible{box-shadow:0 0 0 3px #888}
@media (max-width:767px){.cmp-handle{width:50px;height:50px}.cmp-handle span{font-size:10px}.cmp-v .cmp-handle::before{margin-left:24px}.cmp-v .cmp-handle::after{margin-right:24px}.cmp-h .cmp-handle::before{margin-top:24px}.cmp-h .cmp-handle::after{margin-bottom:24px}}

/* client logos & team (studio) */
.logos{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:10px 0}
.logo-i{text-align:center}.logo-i img{width:150px;height:auto}
.team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.tm img{width:100%;height:auto;display:block}
.tm-c{padding:0 9.2%;margin-top:35px}
.tm h4{margin:0 0 9px}
.tm .role{font:400 16px/27px var(--mono);margin:0}
@media (max-width:480px){.team{grid-template-columns:1fr;gap:30px}}

/* contact form (no public submit endpoint yet; see site.js) */
.cf input,.cf textarea{display:block;width:100%;background:transparent;border:0;border-bottom:1px solid #fff;color:#fff;font:200 16px/25px var(--kanit);padding:9px 15px 9px 5px;margin:0 0 46px;outline:none;border-radius:0}
.cf input::placeholder{color:#fff;opacity:1;font-size:14px}
.cf .ta span{display:block;font-size:14px;padding-left:5px}
.cf textarea{border:1px solid #fff;padding:10.5px 20px;margin-bottom:60px;resize:vertical}
.cf button{font:700 17px/34px var(--kanit);padding:11px 34px;min-width:174px;border:1px solid #fff;background:#000;box-shadow:5px 5px 0 #fff;transition:box-shadow .2s,transform .2s}
.cf button:hover{box-shadow:0 0 0 #fff;transform:translate(3px,3px)}
.cf-msg{font-size:14px;color:#aaa;min-height:27px}

/* works grid (home) */
.b-works_grid{position:relative}
.wf{display:flex;justify-content:center;flex-wrap:wrap;margin:-20px 0 50px}
.wf button{position:relative;margin:0 27px 20px;padding:0 2px;font:400 20px/1.25 var(--kanit);text-transform:lowercase}
.wf button::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.39,.1,0,.98)}
.wf button.is-active::after,.wf button:hover::after{transform:scaleX(1)}
.wg{--cols:6;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));margin:0 -35px}
.wi{padding:0 35px;margin-bottom:70px;transition:opacity .35s ease,transform .35s ease}
.wi a{display:block;position:relative}
.wi img{width:100%;aspect-ratio:1;object-fit:contain;display:block;transition:transform .4s cubic-bezier(.25,.46,.45,.94),opacity .3s ease}
/* dim the icon so the white title reads: desktop on hover/focus, touch via scroll focus line (.is-dim, site.js) */
.wcap{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);padding:0 6px;text-align:center;color:#fff;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
.wcap .t{display:block;font:400 18px/23px var(--kanit)}
.wcap .cat{display:block;font:400 16px/27px var(--mono)}
.wi.is-dim img{opacity:.45}
.wi.is-dim .wcap{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s}
@media (hover:hover) and (pointer:fine){
 .wi a:hover img,.wi a:focus-visible img{opacity:.45}
 .wi a:focus-visible .wcap{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s}
}
@media (prefers-reduced-motion:reduce){.wi img{transition:opacity .12s linear}.wcap,.wi.is-dim .wcap{transition-duration:.12s,0s}}
.wi.is-hidden{display:none}
.wi.is-fading{opacity:0;transform:scale(.96)}
.follow{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;visibility:hidden;transform:translateX(calc(-50% - 15px));text-align:left;white-space:nowrap}
.follow.is-on{visibility:visible}
.follow h6{margin:0;font:400 18px/23px var(--kanit)}
.follow .cat{display:block;font:400 16px/27px var(--mono)}
[data-tilt] .wi a{transform-style:preserve-3d;will-change:transform;transition:transform .3s ease-out}
@media (max-width:767px){
  /* collapsed: one current category, optically centered between header and grid */
  .wf{flex-direction:column;align-items:center;margin:0 0 50px}
  .wf button{margin:8px 0;font-size:18px;line-height:1.3}
  .wf:not(.is-open) button{display:none}
  .wf:not(.is-open) button.is-active{display:inline-block;margin:0}
  .wf button.is-active{padding-right:20px}
  .wf button.is-active::after{right:20px;width:auto}
  .wf button.is-active::before{
    content:"";
    position:absolute;
    right:3px;
    top:50%;
    width:6px;height:6px;
    margin-top:-1px;
    border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;
    transform:translateY(-50%) rotate(45deg);
    pointer-events:none;
  }
  .wf.is-open button.is-active::before{transform:translateY(-50%) rotate(-135deg);margin-top:2px}
}

/* related slider (portfolio list slider) */
.rel{overflow:hidden;padding-bottom:100px}
.rel-i .rel-img{display:block;aspect-ratio:1;overflow:hidden}
.rel-i img{width:100%;height:100%;object-fit:cover;display:block}
.rel-i h6{margin:20px 0 6px;font-size:16px;line-height:1.3}
.rel-i .cat{margin:0;color:#888;font-size:14px}
.rel .sw-prev,.rel .sw-next{color:#fff;width:42px;top:40%}
.rel .sw-prev svg,.rel .sw-next svg{width:42px;fill:currentColor;stroke:none}
.rel .sw-prev{left:10px}.rel .sw-next{right:10px}
.rel .swiper-pagination{bottom:0}
.rel .swiper-pagination-bullet{width:22px;height:2px;border-radius:0;background:#fff;opacity:.35;margin:0 3px!important}
.rel .swiper-pagination-bullet-active{opacity:1}

/* footer */
.ftr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 30px;padding:0 20px;font:400 18px/23.3px var(--kanit)}
.ftr span{display:block}
.ftr .f1 img{width:135px;height:auto;display:block}
.ftr .copy{margin-top:5px}
.ftr .f3 span,.ftr .f4 span{margin-bottom:0}
.ftr .mail{display:block;margin-top:23px}
@media (max-width:1024px){.ftr{grid-template-columns:repeat(2,minmax(0,1fr));margin:0 15px 15px;padding:0;row-gap:30px}}
@media (max-width:680px){.ftr{grid-template-columns:1fr}.ftr .f2{display:none}}