/* LUKATOUCH — site styles */
@font-face{font-family:"Archivo";src:url("/fonts/archivo-var.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("/fonts/instrument-serif-italic.woff2") format("woff2");font-style:italic;font-weight:400;font-display:swap}

:root{
  --ink:#0b0b0c; --paper:#f2efe9; --mute:#8a867f; --line-d:#2a2927; --line-l:#d9d4ca;
  --accent:#ff6a1f;
  --pad:clamp(20px,4.4vw,68px);
  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Instrument Serif","Times New Roman",serif;
  --ease:cubic-bezier(.2,.7,.1,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ol,ul{margin:0;padding:0}
ol,ul{list-style:none}
img,video,canvas{display:block}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;font-stretch:100%}
::selection{background:var(--accent);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}

/* type */
.display{font-weight:560;font-stretch:112%;letter-spacing:-.035em;line-height:.94;font-size:clamp(46px,8.6vw,156px);text-wrap:balance}
.display em{font-size:1.06em;line-height:.8}
.display--m{font-size:clamp(34px,4.6vw,84px);line-height:.98}
.display--l{font-size:clamp(38px,6vw,112px)}
.display--xl{font-size:clamp(56px,12.4vw,230px);line-height:.88}
.eyebrow{display:flex;align-items:center;gap:.7em;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block}
.num{font-feature-settings:"tnum";color:var(--accent);margin-right:.2em}
.lede{font-size:clamp(15px,1.25vw,19px);line-height:1.5;max-width:34em;color:color-mix(in srgb,currentColor 72%,transparent)}

/* buttons */
.pill{display:inline-flex;align-items:center;gap:.6em;height:48px;padding:0 22px;border-radius:999px;font-size:14px;font-weight:560;letter-spacing:.01em;white-space:nowrap;transition:transform .35s var(--ease),background .25s,color .25s}
.pill span{transition:transform .35s var(--ease)}
.pill:hover span{transform:translate(3px,-3px)}
.pill--light{background:var(--paper);color:var(--ink)}
.pill--dark{background:var(--ink);color:var(--paper)}
.pill--light:hover,.pill--dark:hover{background:var(--accent);color:var(--ink)}
.link{font-size:14px;font-weight:560;border-bottom:1px solid currentColor;padding-bottom:3px;transition:color .25s}
.link:hover{color:var(--accent)}

/* nav */
.nav{position:fixed;z-index:50;inset:0 0 auto 0;height:72px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;gap:24px;color:var(--paper);transition:color .3s,transform .5s var(--ease)}
.nav[data-theme="light"]{color:var(--ink)}
.nav::before{content:"";position:absolute;inset:0 0 -24px 0;z-index:-1;pointer-events:none;background:linear-gradient(rgba(11,11,12,.72),rgba(11,11,12,0));transition:opacity .3s}
.nav[data-theme="light"]::before{background:linear-gradient(rgba(242,239,233,.96) 55%,rgba(242,239,233,0))}
.nav__logo{font-weight:700;font-stretch:118%;letter-spacing:.02em;font-size:15px}
.nav__links{display:flex;gap:30px;font-size:13px;font-weight:500;letter-spacing:.04em}
.nav__links a{opacity:.72;transition:opacity .2s}
.nav__links a:hover{opacity:1}
.pill--nav{height:38px;padding:0 16px;font-size:13px;background:var(--paper);color:var(--ink)}
.nav[data-theme="light"] .pill--nav{background:var(--ink);color:var(--paper)}
.pill--nav:hover{background:var(--accent)!important;color:var(--ink)!important}

/* 1. hero */
.hero{position:relative;height:420vh;background:var(--ink)}
.hero__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hero__gl{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;cursor:grab;opacity:0;transition:opacity 1.2s ease}
.hero__gl.is-ready{opacity:1}
.hero__gl:active{cursor:grabbing}
.hero__fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}
.no-gl .hero__fallback{opacity:.55}
.no-gl .hero__gl{display:none}

.stage{position:absolute;z-index:2;left:var(--pad);right:var(--pad);bottom:clamp(96px,13vh,150px);display:flex;flex-direction:column;gap:clamp(16px,2vw,26px);pointer-events:none;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s .5s}
.stage>*{transform:translateY(22px);filter:blur(10px);transition:transform .8s var(--ease),filter .8s ease}
.stage.is-on{opacity:1;visibility:visible;transition:opacity .6s ease .12s,visibility 0s}
.stage.is-on>*{transform:none;filter:none}
.stage.is-on>*:nth-child(2){transition-delay:.06s}
.stage.is-on>*:nth-child(3){transition-delay:.12s}
.stage.is-on>*:nth-child(4){transition-delay:.18s}
.stage.is-on a{pointer-events:auto}
.stage[data-stage="0"] .display{max-width:9.5em}
.stage--side{max-width:min(46vw,640px);bottom:auto;top:50%;translate:0 -50%}
.stage--right{left:auto;right:var(--pad)}
.cta{display:flex;align-items:center;gap:26px;margin-top:6px}

/* split words */
[data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .04em .14em;margin:-.08em -.04em -.14em}
[data-split] .w>span{display:inline-block;transform:translateY(110%);transition:transform 1.1s var(--ease)}
.is-loaded [data-split] .w>span{transform:none}

.hero__foot{position:absolute;z-index:2;left:var(--pad);right:var(--pad);bottom:clamp(22px,4vh,40px);display:flex;align-items:center;justify-content:space-between;gap:24px;pointer-events:none}
.rail{display:flex;gap:8px}
.rail li{width:44px;height:2px;background:var(--line-d);position:relative;overflow:hidden}
.rail li::after{content:"";position:absolute;inset:0;background:var(--paper);transform:scaleX(var(--f,0));transform-origin:left}
.hint{display:flex;gap:22px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.hint__scroll::after{content:"↓";margin-left:.5em;display:inline-block;animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(4px)}}

/* band */
.band{background:var(--ink);border-block:1px solid var(--line-d);overflow:hidden;padding:18px 0}
.band__track{display:flex;align-items:center;gap:34px;width:max-content;animation:slide 38s linear infinite;font-size:clamp(20px,2.6vw,40px);font-weight:560;font-stretch:112%;letter-spacing:-.02em;white-space:nowrap}
.band__track i{font-style:normal;color:var(--accent);font-size:.7em}
@keyframes slide{to{transform:translateX(-50%)}}

/* 2. film */
.film{position:relative;height:380vh;background:#000}
.film__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.film__cv{position:absolute;inset:0;width:100%;height:100%}
.film__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,.5),transparent 28%,transparent 55%,rgba(11,11,12,.78))}
.film__caps{position:absolute;inset:auto var(--pad) clamp(70px,11vh,120px) var(--pad)}
.cap{position:absolute;left:0;bottom:0;display:flex;flex-direction:column;gap:16px;max-width:11em;font-size:clamp(34px,4.6vw,84px);opacity:0;filter:blur(18px);transform:translateY(18px);transition:opacity .7s ease,filter .9s ease,transform .9s var(--ease)}
.cap .eyebrow{color:color-mix(in srgb,var(--paper) 70%,transparent)}
.cap.is-on{opacity:1;filter:none;transform:none}
.film__meta{position:absolute;right:var(--pad);bottom:clamp(22px,4vh,40px);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--paper) 60%,transparent);font-feature-settings:"tnum"}
.film__meta b{color:var(--paper);font-weight:500}

/* 3. work */
.work{position:relative;background:var(--paper);color:var(--ink);height:400vh}
.work__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3vh,34px);padding-top:72px}
.work__head{display:flex;justify-content:space-between;align-items:center;padding:0 var(--pad)}
.work__count{font-size:12px;letter-spacing:.14em;color:var(--mute);font-feature-settings:"tnum"}
.work__count b{color:var(--ink);font-weight:560}
.work__track{display:flex;gap:clamp(20px,3vw,48px);padding:0 var(--pad);width:max-content;will-change:transform}
.card{flex:none;width:min(62vw,calc((100svh - 300px)*1.6));display:flex;flex-direction:column;gap:18px;transition:opacity .5s ease,filter .5s ease}
.card.is-far{opacity:.42;filter:blur(3px) saturate(.6)}
.card__media{aspect-ratio:16/10;background:#dcd7cd;overflow:hidden;border-radius:4px}
.card__media video{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.2s var(--ease)}
.card:hover .card__media video{transform:scale(1.06)}
.card__body{display:grid;grid-template-columns:1fr auto;gap:4px 24px;align-items:end}
.card__tag{grid-column:1/-1;display:flex;gap:14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.card__tag span:first-child{color:var(--accent)}
.card__name{font-size:clamp(30px,3.6vw,60px);font-weight:620;font-stretch:118%;letter-spacing:-.03em;line-height:1;text-transform:uppercase}
.card__line{grid-column:1;font-size:15px;color:#4a4742}
.card__role{grid-column:2;grid-row:2/4;align-self:end;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);text-align:right}
.card--end{width:min(46vw,560px);justify-content:center;align-items:flex-start;gap:26px;padding-left:clamp(10px,3vw,60px);border-left:1px solid var(--line-l)}

/* 4. why */
.why{background:var(--paper);color:var(--ink);padding:clamp(90px,14vw,200px) var(--pad) clamp(60px,8vw,120px);border-top:1px solid var(--line-l)}
.why .display{margin:26px 0 clamp(50px,7vw,110px);max-width:12em}
.why__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--ink)}
.why__grid li{padding:22px 24px 10px 0;border-right:1px solid var(--line-l);display:flex;flex-direction:column;gap:12px}
.why__grid li+li{padding-left:24px}
.why__grid li:last-child{border-right:0}
.why__grid h3{font-size:clamp(19px,1.7vw,26px);font-weight:600;font-stretch:108%;letter-spacing:-.02em;line-height:1.1;margin-top:clamp(26px,5vw,80px)}
.why__grid p{font-size:15px;color:#4a4742;max-width:22em}
.why__grid .num{font-size:12px;letter-spacing:.14em}

/* 5. process */
.process{background:var(--paper);color:var(--ink);padding:clamp(50px,7vw,110px) var(--pad) clamp(100px,14vw,200px)}
.steps{margin-top:30px}
.steps li{display:grid;grid-template-columns:clamp(70px,16vw,300px) 1fr;align-items:start;padding:clamp(24px,3.4vw,48px) 0;border-top:1px solid var(--line-l)}
.steps li:last-child{border-bottom:1px solid var(--line-l)}
.steps__no{font-size:clamp(44px,7vw,120px);font-weight:560;font-stretch:112%;letter-spacing:-.04em;line-height:.8}
.steps div{display:grid;grid-template-columns:1fr 1fr;gap:16px 40px;align-items:start}
.steps h3{font-size:clamp(24px,3vw,48px);font-weight:560;font-stretch:112%;letter-spacing:-.03em;line-height:1}
.steps p{font-size:clamp(15px,1.2vw,18px);color:#4a4742;max-width:28em}

/* 6. contact */
.contact{background:var(--ink);padding:clamp(110px,16vw,240px) var(--pad) clamp(70px,9vw,130px);display:flex;flex-direction:column;gap:clamp(26px,3.4vw,50px)}
.contact__mail{align-self:flex-start;font-size:clamp(22px,3.2vw,52px);font-weight:500;letter-spacing:-.02em;border-bottom:1px solid var(--line-d);padding-bottom:10px;transition:color .25s,border-color .25s}
.contact__mail:hover{color:var(--accent);border-color:var(--accent)}
.contact__note{font-size:15px;color:var(--mute);max-width:32em}
.foot{background:var(--ink);border-top:1px solid var(--line-d);padding:24px var(--pad) calc(24px + env(safe-area-inset-bottom));display:flex;justify-content:space-between;gap:20px;font-size:12px;letter-spacing:.06em;color:var(--mute)}
.foot a:hover{color:var(--paper)}

/* reveal */
[data-reveal]{opacity:0;transform:translateY(34px);filter:blur(8px);transition:opacity .9s ease,transform 1s var(--ease),filter 1s ease}
[data-reveal].is-in{opacity:1;transform:none;filter:none}
.why__grid li:nth-child(2),.steps li:nth-child(2){transition-delay:.08s}
.why__grid li:nth-child(3),.steps li:nth-child(3){transition-delay:.16s}
.why__grid li:nth-child(4){transition-delay:.24s}

/* tablet / phone */
@media (max-width:900px){
  .nav{height:60px}
  .nav__links{display:none}
  .hero{height:380vh}
  .stage,.stage--side,.stage--right{left:var(--pad);right:var(--pad);top:auto;bottom:92px;translate:none;max-width:none}
  .stage[data-stage="0"] .display{font-size:clamp(46px,13.2vw,96px)}
  .hint__drag{display:none}
  .rail li{width:28px}
  .film{height:320vh}
  .cap{max-width:none}
  .work{height:auto;padding:90px 0 70px}
  .work__pin{position:static;height:auto;overflow:visible;padding-top:0}
  .work__track{flex-direction:column;width:auto;transform:none!important;gap:54px}
  .card,.card--end{width:auto}
  .card.is-far{opacity:1;filter:none}
  .card__body{grid-template-columns:1fr}
  .card__role{grid-column:1;grid-row:auto;text-align:left}
  .card--end{border-left:0;border-top:1px solid var(--line-l);padding:40px 0 0}
  .work__count{display:none}
  .why__grid{grid-template-columns:1fr 1fr}
  .why__grid li{border-right:0;border-bottom:1px solid var(--line-l);padding:20px 16px 26px 0}
  .why__grid li+li{padding-left:0}
  .why__grid h3{margin-top:18px}
  .steps div{grid-template-columns:1fr}
  .foot{flex-wrap:wrap}
}
@media (max-width:520px){
  .why__grid{grid-template-columns:1fr}
  .cta{gap:18px}
}

@media (prefers-reduced-motion:reduce){
  .band__track,.hint__scroll::after{animation:none}
  .stage>*,[data-reveal],.cap,[data-split] .w>span{transition-duration:.01s!important;filter:none!important}
}