/* ==========================================================================
   TURING — website-new · faithful recreation of the reference experience
   Home  : fixed viewport, momentum-panned plane of small scattered thumbnails
   Works : alternating 22.1% / 57.5% editorial rows
   ========================================================================== */

:root{
  --bg:#ffffff;
  --ink:#141414;
  --grey:#8f8f8f;
  --faint:#bcbcbc;
  --line:rgba(0,0,0,.09);
  --mono:"Space Mono","PingFang SC","Hiragino Sans GB",ui-monospace,monospace;
  --disp:"Jost","PingFang SC","Hiragino Sans GB",sans-serif;
  --body:"Inter","PingFang SC","Hiragino Sans GB",sans-serif;
  --e:cubic-bezier(.22,1,.36,1);
  --e2:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.6;-webkit-tap-highlight-color:transparent}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:none;cursor:pointer;color:inherit}
::selection{background:var(--ink);color:var(--bg)}

/* bilingual: EN default, strict separation */
[data-lang="en"] .cn{display:none !important}
[data-lang="cn"] .en{display:none !important}

/* ============================================================= NAV */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:16px clamp(15px,1.3vw,26px);
  background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  transform:translateY(-101%);opacity:0;
  transition:transform .8s var(--e),opacity .8s var(--e);
}
.nav.on{transform:none;opacity:1}
.nav__side{display:flex;align-items:center;gap:clamp(16px,2.5vw,42px)}
.nav__side.r{justify-content:flex-end}
.nav__a{font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--grey);transition:color .3s}
.nav__a:hover,.nav__a.cur{color:var(--ink)}
.nav__brand img{height:16px;width:auto}
.nav__lang{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--grey);border:1px solid var(--line);border-radius:999px;padding:4px 10px;transition:.3s}
.nav__lang:hover{color:var(--ink);border-color:var(--ink)}
.nav__burger{display:none;font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase}
@media (max-width:760px){
  .nav{padding:12px 15px}
  .nav__side .nav__a{display:none}
  .nav__burger{display:block}
  .nav__side.r .nav__a.keep{display:block}
  .nav__brand img{height:13px}
}

/* mobile overlay menu */
.menu{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;flex-direction:column;justify-content:center;gap:4px;padding:24px;
  clip-path:inset(0 0 100% 0);transition:clip-path .55s var(--e);pointer-events:none}
.menu.open{clip-path:inset(0);pointer-events:auto}
.menu a{font-family:var(--disp);font-weight:300;font-size:clamp(30px,9vw,50px);line-height:1.42}
.menu__x{position:absolute;top:15px;right:18px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.menu__f{position:absolute;bottom:24px;left:24px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}

/* ============================================================= INTRO */
.intro{position:fixed;inset:0;z-index:300;background:var(--bg);display:grid;place-items:center;transition:opacity .85s var(--e),visibility .85s}
.intro.off{opacity:0;visibility:hidden}
.intro img{width:min(40vw,360px);opacity:0}
.intro.play img{animation:iF 2.05s var(--e) forwards}
@keyframes iF{0%{opacity:0;transform:translateY(6px)}28%{opacity:1;transform:none}70%{opacity:1;transform:none}100%{opacity:0;transform:scale(1.03)}}

/* ============================================================= HOME CANVAS */
html.home,html.home body{height:100%;overflow:hidden;overscroll-behavior:none}
.stage{position:fixed;inset:0;overflow:hidden;touch-action:none;cursor:grab;background:var(--bg)}
.stage.grabbing{cursor:grabbing}
.plane{position:absolute;top:0;left:0;will-change:transform}
.spot{position:absolute;top:0;left:0;opacity:0;transition:opacity 1.1s var(--e)}
.spot.on{opacity:1}
.spot figure{overflow:hidden;background:#f3f3f1}
.spot img{transition:transform 1.3s var(--e),filter .5s;filter:saturate(.96)}
.spot:hover img{transform:scale(1.05);filter:saturate(1)}
.spot figcaption{margin-top:7px;display:flex;justify-content:space-between;gap:10px;white-space:nowrap;
  font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--grey);transition:color .3s}
.spot:hover figcaption{color:var(--ink)}
.spot figcaption .yr{color:var(--faint)}
.hint{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:60;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
  opacity:0;animation:hintIn 1s var(--e) 2.6s forwards;pointer-events:none}
.hint.gone{opacity:0 !important;transition:opacity .5s}
@keyframes hintIn{to{opacity:1}}

/* ============================================================= WORKS ROWS */
.works{padding:0 1.1vw clamp(70px,9vw,150px)}
.works__mark{display:flex;justify-content:center;padding:calc(64px + 3vw) 0 clamp(60px,8vw,120px)}
.works__mark img{height:clamp(16px,1.7vw,24px);width:auto;opacity:.85}
.row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:clamp(80px,10.4vw,200px)}
.row.flip{flex-direction:row-reverse}
.card{display:block;opacity:0;transform:translateY(20px);transition:opacity 1s var(--e),transform 1s var(--e)}
.card.on{opacity:1;transform:none}
.card.sm{width:22.1%}
.card.lg{width:57.5%}
.card figure{overflow:hidden;background:#f3f3f1}
.card figure img{transition:transform 1.3s var(--e)}
.card:hover figure img{transform:scale(1.035)}
.card figcaption{margin-top:11px;display:flex;justify-content:space-between;gap:12px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--grey);transition:color .3s}
.card:hover figcaption{color:var(--ink)}
.card figcaption .yr{color:var(--faint);white-space:nowrap;text-align:right}
@media (max-width:760px){
  .works{padding:0 5vw 80px}
  .works__mark{padding:calc(56px + 5vw) 0 clamp(48px,12vw,80px)}
  .row,.row.flip{display:block;margin-bottom:0}
  .card{margin-bottom:clamp(46px,13vw,72px)}
  .card.lg{width:100%}
  .card.sm{width:62%}
  .row.flip .card.sm{margin-left:auto}
}

/* ============================================================= INNER PAGES */
.page{padding:calc(74px + 4vw) clamp(18px,4.5vw,70px) clamp(50px,7vw,100px)}
.kick{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.page h1{font-family:var(--disp);font-weight:300;font-size:clamp(40px,9vw,120px);line-height:.97;margin-top:20px;letter-spacing:-.01em}
.page .sub{margin-top:24px;max-width:56ch;color:var(--grey);font-size:15px;line-height:1.8}

.block{padding:clamp(30px,4vw,60px) clamp(18px,4.5vw,70px) clamp(60px,9vw,140px)}
.lead{font-family:var(--disp);font-weight:300;font-size:clamp(23px,4.3vw,56px);line-height:1.18;max-width:21ch;letter-spacing:-.01em}
.lead em{font-style:italic;color:var(--grey)}
.duo{margin-top:clamp(40px,6vw,84px);display:grid;grid-template-columns:1fr 1fr;gap:34px 58px}
.duo p{color:var(--grey);font-size:14.5px;line-height:1.85}
.duo p+p{margin-top:15px}
@media (max-width:760px){.duo{grid-template-columns:1fr;gap:24px}}

.clients{display:flex;flex-wrap:wrap;gap:12px 34px;margin-top:26px}
.clients span{font-family:var(--disp);font-weight:300;font-size:clamp(17px,2vw,26px);opacity:.72}

/* team */
.trow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,84px);align-items:center;
  padding:clamp(46px,7vw,104px) clamp(18px,4.5vw,70px);border-top:1px solid var(--line)}
.trow:nth-of-type(even) .tfig{order:2}
.tfig{overflow:hidden;aspect-ratio:4/5;background:#f3f3f1;filter:grayscale(1) contrast(1.02)}
.tfig img{height:100%;object-fit:cover}
.tname{font-family:var(--disp);font-weight:300;font-size:clamp(30px,4.6vw,62px);line-height:1}
.tname small{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-top:15px}
.trole{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin:20px 0 16px}
.tbio{color:var(--grey);font-size:14.5px;line-height:1.85;max-width:50ch}
@media (max-width:760px){.trow{grid-template-columns:1fr;gap:22px}.trow:nth-of-type(even) .tfig{order:0}.tfig{width:min(340px,82%)}}

/* contact */
.mail{font-family:var(--disp);font-weight:300;font-size:clamp(28px,6vw,84px);line-height:1.04;display:inline-block;position:relative}
.mail::after{content:"";position:absolute;left:0;bottom:1px;width:100%;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e)}
.mail:hover::after{transform:none}
.cgrid{margin-top:clamp(50px,8vw,110px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(30px,4vw,50px) 28px}
.cgrid>div{border-top:1px solid var(--line);padding-top:20px}
.cgrid h4{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.cgrid p{font-size:14px;line-height:1.75;color:var(--grey)}
.cgrid p b{color:var(--ink);font-weight:400}
@media (max-width:900px){.cgrid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.cgrid{grid-template-columns:1fr}}

/* project detail */
.phero{padding:calc(84px + 4vw) clamp(18px,4.5vw,70px) clamp(34px,5vw,64px);display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:end}
.phero h1{font-family:var(--disp);font-weight:300;font-size:clamp(32px,5.6vw,80px);line-height:1;margin-top:15px;letter-spacing:-.01em}
.phero h1 .also{display:block;font-size:.4em;color:var(--grey);margin-top:14px;letter-spacing:0}
.meta{display:flex;flex-direction:column;gap:8px}
.meta .mrow{display:flex;justify-content:space-between;gap:18px;border-top:1px solid var(--line);padding-top:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--grey)}
.meta .mrow b{color:var(--ink);font-weight:400}
@media (max-width:820px){.phero{grid-template-columns:1fr;gap:26px}}
.pquote{padding:clamp(60px,9vw,130px) clamp(18px,4.5vw,70px);text-align:center}
.pquote h2{font-family:var(--disp);font-weight:300;font-size:clamp(21px,3.4vw,46px);line-height:1.3;max-width:23ch;margin-inline:auto}
.pquote p{margin-top:14px;color:var(--grey)}
.pgal{padding:0 clamp(18px,4.5vw,70px) clamp(60px,8vw,120px);display:flex;flex-direction:column;gap:clamp(16px,2.4vw,38px)}
.pgal figure{overflow:hidden;background:#f3f3f1;opacity:0;transform:translateY(22px);transition:opacity 1s var(--e),transform 1s var(--e)}
.pgal figure.on{opacity:1;transform:none}
.pdesc{padding:clamp(50px,8vw,110px) clamp(18px,4.5vw,70px);display:grid;grid-template-columns:1fr 1fr;gap:36px 58px;border-top:1px solid var(--line)}
.pdesc h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:16px}
.pdesc p{color:var(--grey);font-size:14.5px;line-height:1.85}
@media (max-width:820px){.pdesc{grid-template-columns:1fr;gap:26px}}
.pnext{padding:clamp(60px,9vw,130px) clamp(18px,4.5vw,70px);border-top:1px solid var(--line);text-align:center}
.pnext small{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.pnext a{display:block;font-family:var(--disp);font-weight:300;font-size:clamp(28px,5.4vw,66px);margin-top:13px;transition:color .3s}
.pnext a:hover{color:var(--grey)}

/* footer */
.foot{border-top:1px solid var(--line);padding:clamp(40px,6vw,66px) clamp(18px,4.5vw,70px) 26px}
.foot__g{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px;margin-bottom:clamp(36px,5vw,56px)}
.foot__g h4{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.foot__g a,.foot__g p{display:block;font-size:13px;color:var(--grey);line-height:1.75}
.foot__g a:hover{color:var(--ink)}
.foot__b{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:20px}
.foot__b img{height:13px;width:auto;opacity:.8}
.foot__b .fine{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
@media (max-width:760px){.foot__g{grid-template-columns:1fr 1fr;gap:26px}}

.rv{opacity:0;transform:translateY(18px);transition:opacity .9s var(--e),transform .9s var(--e)}
.rv.on{opacity:1;transform:none}