:root{
  --pad:2.4vw;
  --ink:#000;
  --grey:#8d8d8d;
  --line:#dcdcdc;
  --bg:#fff;
  --ease:cubic-bezier(.76,0,.24,1);
  --out:cubic-bezier(.16,1,.3,1);
  --col2:50%;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
body{
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:450;letter-spacing:-.03em;line-height:1.1;
  color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
sup{font-size:.5em;vertical-align:top;position:relative;top:-.15em;margin-left:.15em;letter-spacing:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:100;background:#fff;display:grid;place-items:center;font-size:1.3vw;transition:transform 1s var(--ease)}
.loader.done{transform:translateY(-100%)}
.loader span{transition:opacity .3s}
.loader.done span{opacity:0}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:5.6vw;padding:0 var(--pad);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;font-size:1.19vw;pointer-events:none}
.nav>*{pointer-events:auto}
.nav__links{display:flex;gap:0;background:#fff;padding:.3vw .45vw .22vw;margin:0}
.nav__cta{justify-self:end}
.nav__logo{justify-self:start}
.nav .nav__menu{display:none}
.pill{display:inline-block;padding:.3vw .45vw .22vw;margin:0 -.45vw;background:#fff;transition:background .25s,transform .6s var(--out),opacity .6s}
.nav__links .pill{margin:0;padding:.22vw .1vw}
.nav__links .pill.hit{padding:.22vw .45vw}
.nav .pill,.nav__links{overflow:hidden}
.nav .t,.nav .pill sup{display:inline-block;transition:transform .95s var(--out)}
.nav.rise .t,.nav.rise .pill sup{transform:translateY(125%)}
.nav.rise .nav__menu{transform:translateY(125%)}
.nav .pill{transition-delay:0s}

.menu{position:fixed;inset:0;z-index:40;background:#fff;display:none;flex-direction:column;justify-content:center;gap:2vw;padding:var(--pad);font-size:10.38vw}
.menu.open{display:flex}

/* ---------- smooth scroll shell ---------- */
.scroller{position:fixed;top:0;left:0;width:100%;will-change:transform}
.page{padding:0 var(--pad)}

/* ---------- line-mask reveal ---------- */
.ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.ln>span{display:block;transform:translateY(110%);transition:transform 1.1s var(--out);transition-delay:calc(var(--i,0)*70ms)}
.in .ln>span,.ln.in>span{transform:none}
.ln.first-indent{}
[data-fade]{opacity:0;transform:translateY(.8vw);transition:opacity 1s var(--out),transform 1s var(--out)}
[data-fade].in{opacity:1;transform:none}

/* ---------- hero ---------- */
.hero{padding-top:12.5vw;text-align:center}
.hero__name{display:flex;justify-content:center;align-items:center;gap:1.7vw;font-size:9.4vw;font-weight:450;letter-spacing:-.055em;line-height:.8;white-space:nowrap;height:11.6vw}
.hero__name .ln{overflow:visible;padding:0;margin:0}
.hero__w{display:inline-block;overflow:hidden;padding:0 .09em 1.3vw;margin:0 -.09em -1.3vw;position:relative;top:.25vw}
.hero__w .ch{display:inline-block;transform:translateY(115%) skewY(9deg);transform-origin:0 100%;transition:transform 1.25s var(--out);transition-delay:calc(var(--i)*40ms + var(--d,0ms))}
.in .hero__w .ch{transform:none}
.hero__w:nth-of-type(2) .ch{--d:160ms}
.hero__w:nth-of-type(3) .ch{--d:320ms}
.hero__media{display:block;width:14vw;height:10vw;border-radius:.3vw;overflow:hidden;position:relative;margin-top:-.4vw;flex:none;clip-path:polygon(52% 0,52% 0,48% 100%,48% 100%);transition:clip-path 1.3s var(--ease) .35s}
.in .hero__media,.hero__media.in{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.hero__media img{position:absolute;inset:0;opacity:0}
.hero__media img.on{opacity:1}
.hero__media--sticker{width:8.5vw;height:6.8vw;margin-top:-.5vw}
.hero__media--arm{width:8.4vw;height:8.4vw;margin-top:-1.6vw;border-radius:0;background:transparent}
.hero__media--arm iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;background:transparent}
.hero__sub{font-size:2.94vw;line-height:1.14;letter-spacing:-.04em;max-width:46vw;margin:3.4vw auto 0}
.hero--work{padding-top:16vw}
.hero__name--work{font-size:7.0vw;letter-spacing:-.05em;height:6.6vw;gap:1.7vw}
.hero--work .hero__w{padding-bottom:.9vw;margin-bottom:-.9vw}

/* ---------- 3-col info blocks ---------- */
.block,.footer{position:relative}
.block::before,.footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease) .1s}
.block.in::before,.footer.in::before{transform:scaleX(1)}
.block{display:grid;grid-template-columns:50% 1fr auto;margin-top:8.2vw;padding-top:2.9vw;font-size:1.21vw;min-height:12vw}
.block--3{margin-top:11vw;min-height:0}
.block__label{white-space:nowrap}
.block__text{font-size:1.46vw;line-height:1.14;max-width:21vw;text-indent:4vw;position:relative;letter-spacing:-.03em}
.num{position:absolute;left:0;top:.3vw;font-size:.72vw;text-indent:0;letter-spacing:0}
.block__right,.block__link{justify-self:end;white-space:nowrap}
.block__right{font-size:1.21vw}
.link{position:relative;display:inline-block}
.link .arr,.about__cta .arr{display:inline-block;transition:transform .5s var(--out);margin-right:.3em}
.link:hover .arr{transform:translateX(.3vw)}
.t{position:relative;display:inline-block}
.t::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--out)}
a:hover>.t::after{transform:scaleX(1);transform-origin:left}

/* ---------- works ---------- */
.works-head{display:flex;justify-content:space-between;align-items:center;margin-top:7.5vw}
.h2{font-size:3.2vw;font-weight:450;letter-spacing:-.045em;line-height:1}
.link--arrow{font-size:1.21vw}
.grid{display:grid;grid-template-columns:1fr 1fr;column-gap:.22vw;row-gap:7.8vw;margin-top:4.8vw}
.grid--work{margin-top:11.5vw}
.card{display:block}
.card__img{position:relative;overflow:hidden;aspect-ratio:664/462;border-radius:.25vw;background:#eee;clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--ease)}
.card.in .card__img{clip-path:inset(0)}
.card__img img{--py:0%;transform:translateY(var(--py)) scale(1.12);transition:transform 1.4s var(--out)}
.card.in .card__img img{transform:translateY(var(--py)) scale(1.06)}
.card:hover .card__img img{transform:translateY(var(--py)) scale(1.1)}
.card__cap{display:flex;align-items:baseline;gap:.6vw;font-size:1.4vw;margin-top:.6vw;letter-spacing:-.035em}
.card__cap i{font-style:normal;font-size:.72vw;letter-spacing:0;width:1.1vw}
.card__cap b{font-weight:500;display:inline-flex;align-items:center;gap:.5vw}
.card__cap em{font-style:normal;opacity:0;transform:translateX(-.6vw);transition:.5s var(--out)}
.card:hover .card__cap em{opacity:1;transform:none}

/* ---------- footer ---------- */
.footer{display:grid;grid-template-columns:50% 25.5% 1fr;margin-top:10vw;padding:2.9vw 0 5vw;font-size:1.21vw;min-height:20vw}
.f-open{}
.f-label{margin-bottom:2.4vw}
.f-text{font-size:1.46vw;line-height:1.14;letter-spacing:-.03em}
.f-open .f-text{max-width:20vw;text-indent:4vw}
.indent{display:inline-block;width:3.9vw}
.f-contact{padding-left:0;min-width:0}
.f-contact .f-text{overflow-wrap:anywhere}
.f-contact .u{font-size:.9em;letter-spacing:-.02em}
.u{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .5s var(--out)}
.u:hover{background-size:0 1px;background-position:100% 100%}

/* ---------- archive ---------- */
.a-hero{padding-top:12.5vw;display:grid;grid-template-columns:50% 1fr}
.a-title{grid-column:2;font-size:6.14vw;font-weight:450;letter-spacing:-.05em;line-height:.98;max-width:42vw;height:15vw}
.archive .block{margin-top:6.5vw}
.a-table{position:relative;margin-top:2vw}
.a-head{display:grid;grid-template-columns:50% 1fr auto;font-size:1.21vw;padding:4vw 0 4.2vw}
.a-list{position:relative}
.a-row{display:grid;grid-template-columns:50% 1fr auto;font-size:1.46vw;height:2.46vw;align-items:center;cursor:pointer;letter-spacing:-.03em;overflow:hidden}
.a-row span{display:block;transform:translateY(110%);transition:transform .9s var(--out);transition-delay:calc(var(--i)*35ms)}
.a-row.in span{transform:none}
.a-row span:last-child{font-size:1.21vw}
.a-line{position:absolute;left:0;right:0;height:1px;background:#222;opacity:0;pointer-events:none;transition:opacity .25s}
.a-preview{position:absolute;left:19.8%;width:23vw;height:23vw;overflow:hidden;border-radius:.2vw;pointer-events:none;opacity:0;transform:scale(.92);transition:opacity .3s,transform .5s var(--out);z-index:3}
.a-preview.on{opacity:1;transform:none}
.a-line.on{opacity:1}

/* ---------- about ---------- */
.about{display:block;position:relative;padding-bottom:12vw}
.about__img{position:absolute;left:9.4vw;top:12.8vw;width:20vw;aspect-ratio:4/5;opacity:0;transition:opacity 1.6s ease .3s}
.about__img.in{opacity:1}
.about__img.stuck{position:fixed;top:20.7vw}
.about__col{margin-left:40.6vw;padding-top:12.4vw;width:46vw}
.about__lead{font-size:2.11vw;line-height:1.22;letter-spacing:-.035em;text-indent:7vw;margin-bottom:3.6vw}
.a-sec{margin-top:8vw;margin-left:9.4vw}
.a-sec .h2{font-size:2.68vw;margin-bottom:3.8vw}
.a-sec__p{font-size:1.46vw;line-height:1.14;text-indent:4.1vw;position:relative;margin-left:5.6vw;max-width:22vw;letter-spacing:-.03em}
.a-sec__p .num{left:-5.6vw}
.a-sec__g{font-size:1.46vw;line-height:1.2;color:var(--grey);letter-spacing:-.04em}
.a-sec__g a:hover{color:var(--ink)}
.about__cta{display:inline-flex;align-items:center;gap:1.1vw;font-size:2.68vw;margin:8vw 0 0 9.4vw;letter-spacing:-.045em}
.about__cta .arr{font-size:2.68vw;margin:0;transition:transform .5s var(--out)}
.about__cta:hover .arr{transform:translateX(.6vw)}
.about__cta .u{background-size:100% 2px;padding-bottom:.1vw}


/* ---------- project detail ---------- */
.project{position:relative;min-height:100vh;padding-bottom:6vw}
.p-left{position:absolute;left:var(--pad);top:0;width:38vw;height:100vh;will-change:transform}
.p-num{position:absolute;left:34.2vw;top:2vw;font-size:1.21vw;width:2vw}
.p-title{position:relative;margin-top:10.2vw;font-size:4.06vw;font-weight:450;letter-spacing:-.05em;line-height:1;width:39vw}
.p-meta{position:relative;margin-top:5.1vw;display:grid;grid-template-columns:14.2vw 1fr;width:36vw;font-size:1.25vw}
.p-tags{line-height:1.2;margin-bottom:2.8vw}
.p-desc{font-size:1.3vw;line-height:1.25;letter-spacing:-.03em;max-width:21vw}
.p-next{position:absolute;left:0;bottom:3.2vw;font-size:1.25vw}
.p-right{margin-left:40.6vw;padding-top:10.6vw;display:flex;flex-direction:column;gap:1vw}
.p-frame{border-radius:.35vw;overflow:hidden;background:#f2f2f2}
.p-bar{height:2.3vw;display:flex;align-items:center;gap:1vw;padding:0 .9vw;font-size:.95vw;color:#777;background:#ececec}
.p-dots{display:flex;gap:.35vw}.p-dots i{width:.55vw;height:.55vw;border-radius:50%;background:#cfcfcf}
.p-url{flex:1;text-align:center;letter-spacing:0}
.p-open{color:#111;display:inline-flex;gap:.3vw;transition:opacity .3s}.p-open:hover{opacity:.55}
.p-view{position:relative;overflow:hidden;background:#fff}
.p-view iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:#fff;transition:opacity .6s ease}
.p-shot{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.p-shot{background:#fff}
.p-shot img{display:block;width:100%;height:auto}
.p-shot img+img{margin-top:.55vw}
.p-view--mob{display:grid;place-items:center;background:#e9e9e9}
.p-phone{position:relative;overflow:hidden;border-radius:2.2vw;background:#fff;box-shadow:0 0 0 .35vw #111,0 1.5vw 3vw rgba(0,0,0,.18)}
.p-phone iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0}
@media (max-width:900px){
  .project{padding-top:26vw}
  .p-left{position:static;width:auto;height:auto;transform:none!important}
  .p-num{position:static;display:block;margin-bottom:6vw;font-size:4vw}
  .p-title{position:static;font-size:13vw;width:auto;margin-bottom:8vw}
  .p-meta{position:static;display:block;width:auto;font-size:4.2vw}
  .p-year{margin-bottom:4vw}.p-tags{margin-bottom:5vw}
  .p-desc{font-size:4.8vw;max-width:none}
  .p-next{position:static;display:inline-block;margin:8vw 0;font-size:4.4vw}
  .p-right{margin-left:0;padding-top:0}
  .p-bar{height:8vw;font-size:2.8vw}
}


/* ---------- AI / ML list ---------- */
.ml-head{margin-top:9vw}
.ml-sub{font-size:1.32vw;color:var(--grey)}
.ml{margin-top:3.6vw}
.ml-row{display:grid;grid-template-columns:3.4vw calc(50% - 3.4vw) 1fr auto;align-items:baseline;gap:0;padding:1.5vw 0 1.6vw;position:relative;opacity:0;transform:translateY(1vw);transition:opacity .9s var(--out),transform .9s var(--out)}
.ml-row.in{opacity:1;transform:none}
.ml-row::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.ml-row:last-child::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
.ml-n{font-size:.68vw;letter-spacing:0}
.ml-name{padding-right:2vw;font-size:2.35vw;letter-spacing:-.045em;line-height:1;transition:transform .5s var(--out)}
.ml-desc{padding-right:2vw;font-size:1.4vw;color:var(--grey);letter-spacing:-.03em;transition:color .3s}
.ml-year{font-size:1.32vw}
.ml-row:hover .ml-name{transform:translateX(.6vw)}.ml-row:hover .ml-desc{color:var(--ink)}
.p-ml{padding-top:.5vw;max-width:36vw}
.p-media{margin:0 0 3vw;width:54.6vw;max-width:none}
.p-media img,.p-media video{display:block;width:100%;height:auto;border-radius:.35vw;background:#111}
.p-media video{aspect-ratio:16/9;object-fit:cover}
.p-media__frame{display:block;width:100%;aspect-ratio:1200/630;border:0;border-radius:.35vw;background:#fbf7ef}
.p-media figcaption{font-size:1.1vw;color:var(--grey);margin-top:.8vw;letter-spacing:-.02em}
.p-ml__label{font-size:1.32vw;margin-bottom:1.6vw}
.p-ml--after{padding-top:5vw}
.p-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6vw;width:54.6vw;margin-bottom:1vw;padding-bottom:2vw;border-bottom:1px solid var(--line)}
.p-stats b{display:block;font-size:3.1vw;font-weight:450;letter-spacing:-.05em;line-height:1}
.p-stats span{display:block;font-size:1.05vw;color:var(--grey);margin-top:.7vw;line-height:1.25;letter-spacing:-.02em}
.p-stats__note{font-size:1.05vw;color:var(--grey);margin-bottom:4vw}
.p-stats + .p-ml__label{margin-top:4vw}
.p-ml ul{list-style:none;margin-bottom:5vw}
.p-ml li{font-size:2vw;line-height:1.18;letter-spacing:-.04em;margin-bottom:2.4vw}
.p-ml__stack{font-size:1.6vw;line-height:1.35;color:var(--grey);letter-spacing:-.03em}
@media (max-width:900px){
  .ml-row{grid-template-columns:8vw 1fr auto;row-gap:1.5vw;padding:5vw 0}.ml-name{font-size:6vw}.ml-desc{grid-column:2/-1;font-size:4vw}.ml-year{font-size:3.6vw}.ml-n{font-size:2.6vw}.ml-sub{display:none}
  .p-ml{max-width:none}.p-media{width:100%}.p-stats{width:100%;grid-template-columns:1fr 1fr;gap:5vw}.p-stats b{font-size:9vw}.p-stats span,.p-stats__note{font-size:3.4vw}.p-media figcaption{font-size:3.4vw}.p-ml__label{font-size:3.8vw}.p-ml li{font-size:5.2vw}.p-ml__stack{font-size:4.4vw}
}

/* ---------- page transition ---------- */
.curtain{position:fixed;inset:0;background:#f7f7f7;z-index:60;pointer-events:none;opacity:0;transition:opacity .32s ease}
.curtain.on{opacity:1;pointer-events:all}

/* ---------- mobile ---------- */
@media (max-width:900px){
  :root{--pad:5vw}
  .nav{height:16vw;font-size:4.2vw;grid-template-columns:1fr auto}
  .nav__links,.nav__cta{display:none}
  .nav .nav__menu{display:block;justify-self:end;border:1px solid var(--line);background:#fff;padding:2.6vw 4vw;font-size:4.4vw;border-radius:.8vw}
  .pill{padding:0;margin:0}
  .loader{font-size:5vw}
  .hero{padding-top:32vw}
  .hero__name{font-size:13.2vw;gap:2.6vw;height:13vw}
  .hero__media{width:23vw;height:16vw}
  .hero__sub{font-size:7.6vw;max-width:90vw;margin-top:12vw}
  .block{grid-template-columns:1fr 1fr;font-size:4vw;margin-top:16vw;row-gap:5vw;min-height:0}
  .block__text{grid-column:2;font-size:4.6vw;max-width:none;text-indent:10vw;grid-row:2}
  .block__label{grid-column:1/-1}
  .num{font-size:2.6vw;top:1.2vw}
  .block__right,.block__link{grid-row:3;grid-column:1/-1;justify-self:start;font-size:4vw}
  .works-head{margin-top:20vw;flex-direction:column;align-items:flex-start;gap:5vw}
  .h2{font-size:10vw}
  .link--arrow{font-size:4vw}
  .grid{grid-template-columns:1fr;row-gap:10vw;margin-top:10vw}
  .card__cap{font-size:5vw;margin-top:2vw;gap:2vw}.card__cap i{font-size:2.6vw;width:4vw}
  .footer{grid-template-columns:1fr;row-gap:8vw;font-size:4vw;margin-top:20vw}
  .f-text{font-size:5vw}.f-open .f-text{max-width:none}.indent{width:10vw}
  .hero__name--work{font-size:14vw;height:12vw}
  .hero__media--sticker{width:18vw;height:14vw}
  .hero__media--arm{width:17vw;height:17vw}
  .a-title{grid-column:1/-1;font-size:17vw;height:36vw;max-width:none}
  .a-hero{grid-template-columns:1fr;padding-top:32vw}
  .a-head,.a-row{grid-template-columns:1fr 1fr auto;font-size:3.8vw}
  .a-row{height:9vw;font-size:4.2vw}
  .a-preview{display:none}
  .about__img{position:relative;left:0;top:0;width:60vw;margin-top:30vw}
  .about__col{margin-left:0;padding-top:10vw;width:100%}
  .about__lead{font-size:6.2vw;text-indent:12vw}
  .a-sec{margin-left:0}.a-sec__p,.a-sec__g{font-size:5vw;max-width:none}
  .a-sec .h2{font-size:9vw}
  .about__cta{font-size:8vw;margin-left:0}.about__cta .arr{font-size:8vw}
}