/* shared base for LK Atelier concept demos */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
picture{display:block}
a{color:inherit}
h1,h2,h3,p,ol,ul,blockquote,figure{margin:0}
ol,ul{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--fg);color:var(--bg);padding:10px 16px;text-decoration:none}
.skip:focus{top:12px}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.wi,.ch{display:inline-block}
.scrub-ready .w{overflow:visible}
/* intro / curtain hidden when not needed */
#intro{position:fixed;inset:0;z-index:150;display:grid;place-items:center}
.seen #intro,.rm #intro,html:not(.js) #intro{display:none}
#curtain{position:fixed;inset:0;z-index:140;pointer-events:none;transform:translateY(-100%);display:grid;place-items:center}
/* concept badge */
.concept-badge{position:fixed;left:16px;bottom:16px;z-index:120;display:flex;align-items:center;gap:10px;padding:9px 14px 9px 12px;border-radius:999px;background:rgba(18,18,18,.86);color:#f4f1ea;text-decoration:none;font:500 12px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.02em;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);max-width:calc(100vw - 32px)}
.cb-dot{width:7px;height:7px;border-radius:50%;background:#d6b46c;flex:none}
.cb-x{display:none;opacity:.7}
.concept-badge:hover .cb-x,.concept-badge:focus-visible .cb-x{display:inline}
/* cursor */
.cursor{position:fixed;left:0;top:0;z-index:130;pointer-events:none;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;opacity:0;transition:width .35s,height .35s,margin .35s,opacity .3s,background .3s}
.cursor.on{opacity:1}
.cursor span{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:0;transition:opacity .2s}
.cursor.hov{width:36px;height:36px;margin:-18px 0 0 -18px}
.cursor.big{width:96px;height:96px;margin:-48px 0 0 -48px}
.cursor.big span{opacity:1}
@media (hover:none),(pointer:coarse){.cursor{display:none}}
/* form base */
.form{display:grid;gap:18px}
.f-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.f-row{display:grid;gap:6px}
.f-row input,.f-row select,.f-row textarea{width:100%;border:0;border-bottom:1px solid var(--line-s);background:transparent;padding:10px 0;border-radius:0;font-size:16px;transition:border-color .3s}
.f-row select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 10px) 52%,calc(100% - 5px) 52%;background-size:5px 5px;background-repeat:no-repeat}
.f-row input:focus,.f-row select:focus,.f-row textarea:focus{outline:none;border-color:var(--accent)}
.f-row [aria-invalid]{border-color:#b3261e}
.f-row textarea{resize:vertical}
.f-check{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.f-check input{margin-top:3px;accent-color:var(--accent);width:16px;height:16px}
.f-check input[aria-invalid]{outline:2px solid #b3261e}
.f-send{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.form-status{font-size:14px}
.form-status.err{color:#b3261e}
.f-note{font-size:12px;opacity:.75}
@media (max-width:640px){.f-2{grid-template-columns:1fr}}
/* static (reduced motion / no js) */
.static [data-hs] .hs-track{transform:none!important}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.wi{white-space:nowrap}

@font-face{font-family:"Archivo";src:url(../fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Mono";src:url(../fonts/mono.woff2) format("woff2");font-weight:400 500;font-display:swap}
:root{--bg:#E8E4DD;--fg:#141414;--ink:#141414;--mute:#5A5650;--sun:#B5461B;--accent:#B5461B;--line:rgba(20,20,20,.16);--line-s:rgba(20,20,20,.4);--sans:"Archivo",system-ui,sans-serif;--mono:"Mono",ui-monospace,Menlo,monospace;--pad:clamp(18px,2.6vw,40px)}
body{font:400 16px/1.55 var(--sans);font-stretch:100%}
::selection{background:var(--ink);color:var(--bg)}
.wrap{padding-inline:var(--pad)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.02em;text-transform:uppercase;font-weight:400}
.k{color:var(--mute)}
/* intro */
#intro{background:var(--ink);color:var(--bg);overflow:hidden;clip-path:inset(0 0 0 0)}
.sh-word{font:800 clamp(64px,17vw,260px)/1 var(--sans);font-stretch:125%;letter-spacing:-.04em;position:relative;z-index:1;display:block;overflow:hidden}
.sh-sweep{position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(232,228,221,.18) 48%,rgba(232,228,221,.0) 66%);z-index:2}
#curtain{background:var(--ink)}
/* cursor */
.cursor{background:var(--ink);color:var(--bg);mix-blend-mode:normal}
.cursor span{font-family:var(--mono);font-size:10px}
/* header */
.hd{position:fixed;inset:0 0 auto;z-index:100;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:16px var(--pad);mix-blend-mode:difference;color:#E8E4DD}
.logo{font:700 20px/1 var(--sans);font-stretch:125%;letter-spacing:-.02em;text-decoration:none;text-transform:uppercase}
.logo sup{font-size:9px;font-weight:400;vertical-align:top;margin-left:2px}
.nav{display:flex;gap:4px}
.nav a{text-decoration:none;font-size:14px;padding:6px 12px;border-radius:99px;border:1px solid transparent;transition:border-color .3s}
.nav a:hover,.nav a[aria-current]{border-color:currentColor}
.hd-geo{justify-self:end}
.menu-btn{display:none;justify-self:end;background:none;border:1px solid currentColor;border-radius:99px;padding:8px 16px;font:500 13px/1 var(--sans);cursor:pointer;color:inherit}
.menu{position:fixed;inset:0;z-index:90;background:var(--ink);color:var(--bg);padding:100px var(--pad) 84px;display:flex;flex-direction:column;justify-content:space-between;clip-path:inset(0 0 100% 0);transition:clip-path .7s cubic-bezier(.7,0,.2,1)}
.menu nav{display:grid}
.menu nav a{font:700 clamp(52px,16vw,90px)/1 var(--sans);font-stretch:112%;letter-spacing:-.04em;text-transform:uppercase;text-decoration:none;padding:6px 0;border-bottom:1px solid rgba(232,228,221,.2)}
.menu-open .menu{clip-path:inset(0 0 0 0)}
.menu-open .hd{mix-blend-mode:normal}
/* hero */
.hero{padding-top:64px}
.hero-word{font:800 clamp(64px,18.9vw,360px)/.8 var(--sans);font-stretch:125%;letter-spacing:-.055em;text-transform:uppercase;padding:0 var(--pad);margin-left:-.04em;white-space:nowrap;overflow:hidden;padding-bottom:.04em}
.hero-word .w{padding-bottom:0;margin-bottom:0}
.hero-grid{display:grid;grid-template-columns:1fr 1.3fr auto;gap:var(--pad);align-items:end;padding:28px var(--pad) 28px}
.hero-p{font:400 clamp(20px,1.7vw,26px)/1.3 var(--sans);letter-spacing:-.01em;max-width:30em}
.round{width:132px;height:132px;border-radius:50%;display:grid;place-items:center;text-align:center;border:1px solid var(--ink);text-decoration:none;font:500 13px/1.2 var(--sans);padding:14px;transition:background .4s,color .4s}
.round:hover{background:var(--ink);color:var(--bg)}
.round-dark{background:var(--ink);color:var(--bg)}
.round-dark:hover{background:var(--sun);border-color:var(--sun)}
.hero-img{height:calc(100vh - 64px);min-height:420px;overflow:hidden}
.hero-img img,.band-img img{width:100%;height:100%;object-fit:cover}
.hero-cap{display:flex;justify-content:space-between;padding:12px var(--pad);border-bottom:1px solid var(--line)}
/* manifesto */
.mani{padding-block:clamp(120px,20vh,240px);display:grid;grid-template-columns:1fr 3fr;gap:var(--pad)}
.mani-t{font:400 clamp(32px,4.3vw,72px)/1.06 var(--sans);letter-spacing:-.03em;text-indent:2.2em}
/* horizontal */
.hs{position:relative;overflow:hidden;background:var(--ink);color:var(--bg)}
.hs .k{color:rgba(232,228,221,.6)}
.hs-track{display:flex;gap:4vw;align-items:center;height:100vh;padding:0 var(--pad);width:max-content}
.hs-intro{width:34vw;display:grid;gap:28px}
.hs-big{font:700 clamp(54px,6.6vw,120px)/.92 var(--sans);font-stretch:118%;letter-spacing:-.045em;text-transform:uppercase}
.hs-sub{color:rgba(232,228,221,.65);max-width:24em}
.hs-item{width:56vw;text-decoration:none;display:grid;gap:14px}
.hs-item:nth-of-type(2n){margin-top:16vh}
.hs-img{aspect-ratio:16/10;overflow:hidden}
.hs-img img{width:116%;max-width:none;height:100%;object-fit:cover;margin-left:-8%;transition:filter .6s}
.hs-item:hover img{filter:brightness(1.08)}
.hs-cap{display:grid;grid-template-columns:50px 1fr auto;align-items:baseline;border-top:1px solid rgba(232,228,221,.25);padding-top:12px}
.hs-t{font:600 clamp(22px,2vw,32px)/1 var(--sans);font-stretch:110%;letter-spacing:-.02em}
.hs-s{color:rgba(232,228,221,.6)}
.hs-end{width:26vw;aspect-ratio:1;border-radius:50%;border:1px solid rgba(232,228,221,.4);display:grid;place-items:center;text-align:center;text-decoration:none;font:700 clamp(28px,2.6vw,44px)/1 var(--sans);font-stretch:118%;letter-spacing:-.03em;text-transform:uppercase;margin-right:6vw;position:relative;transition:background .5s,color .5s}
.hs-end i{position:absolute;bottom:22%;font-style:normal;font-size:26px}
.hs-end:hover{background:var(--bg);color:var(--ink)}
.hs-progress{position:absolute;left:var(--pad);right:var(--pad);bottom:28px;height:1px;background:rgba(232,228,221,.2)}
.hs-progress i{position:absolute;inset:0;background:var(--bg);transform-origin:0 50%}
/* approach */
.appr{padding-block:clamp(120px,18vh,220px)}
.appr-head{display:grid;grid-template-columns:1fr 3fr;gap:var(--pad);margin-bottom:80px}
.h2{font:600 clamp(36px,4.6vw,80px)/.98 var(--sans);font-stretch:112%;letter-spacing:-.04em}
.appr-g{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink)}
.appr-g li{padding:22px 24px 0 0;display:grid;gap:12px;align-content:start}
.appr-g li+li{padding-left:20px;border-left:1px solid var(--line)}
.appr-g h3{font:700 clamp(30px,3vw,48px)/1 var(--sans);font-stretch:118%;letter-spacing:-.035em;text-transform:uppercase;margin-top:60px}
.appr-g p{color:var(--mute);max-width:22em}
/* services */
.svc{padding-bottom:clamp(120px,18vh,220px)}
.svc-list{margin-top:24px}
.svc-list li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;border-top:1px solid var(--ink);padding:14px 0 10px;transition:padding .5s cubic-bezier(.2,.7,.2,1),color .4s}
.svc-list li:last-child{border-bottom:1px solid var(--ink)}
.svc-t{font:700 clamp(40px,7.4vw,130px)/.92 var(--sans);font-stretch:118%;letter-spacing:-.05em;text-transform:uppercase}
.svc-d{text-align:right;color:var(--mute)}
@media (hover:hover){.svc-list:hover li{color:rgba(20,20,20,.25)}.svc-list li:hover{color:var(--ink);padding-left:2vw}}
.hp-prev{position:fixed;left:0;top:0;width:300px;aspect-ratio:4/5;margin:-190px 0 0 -150px;pointer-events:none;z-index:60;opacity:0;transform:scale(.6);transition:opacity .35s,scale .45s;overflow:hidden}
.hp-prev.show{opacity:1;scale:1.67}
.hp-prev{scale:.6}
.hp-i{position:absolute;inset:0;opacity:0;transition:opacity .3s}
.hp-i.on{opacity:1}
.hp-i img{width:100%;height:100%;object-fit:cover}
/* band */
.band{height:120vh;overflow:hidden}
.band-img{height:100%;overflow:hidden}
/* cta */
.cta{padding-block:clamp(120px,18vh,220px)}
.cta-h{font:800 clamp(52px,9.6vw,180px)/.88 var(--sans);font-stretch:122%;letter-spacing:-.055em;text-transform:uppercase;max-width:9em}
.cta-row{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-top:50px;flex-wrap:wrap}
.cta-row p{max-width:30em;font-size:19px;color:var(--mute)}
/* footer */
.ft{background:var(--ink);color:var(--bg);padding:80px var(--pad) 100px;overflow:hidden}
.ft-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--pad)}
.ft-claim{font:600 clamp(28px,3vw,44px)/1 var(--sans);font-stretch:115%;letter-spacing:-.03em;text-transform:uppercase}
.ft-k{color:rgba(232,228,221,.55);margin-bottom:10px}
.ft a{text-decoration:none;border-bottom:1px solid rgba(232,228,221,.3)}
.ft-word{font:800 25vw/.8 var(--sans);font-stretch:125%;letter-spacing:-.06em;margin-top:80px;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(232,228,221,.35)}
.ft-note{margin-top:30px;color:rgba(232,228,221,.6);text-transform:none;max-width:70em;line-height:1.6}
/* page hero */
.phero{padding-top:120px;padding-bottom:60px;display:grid;gap:20px}
.phero-h{font:800 clamp(52px,12.4vw,240px)/.82 var(--sans);font-stretch:125%;letter-spacing:-.06em;text-transform:uppercase;overflow:hidden;padding-bottom:.03em}
.phero-p{max-width:34em;font-size:20px;line-height:1.35}
/* projects index */
.idx{padding-bottom:100px}
.idx-h,.idx li a{display:grid;grid-template-columns:60px 2fr 1.2fr 1fr 100px;gap:20px;align-items:baseline}
.idx-h{padding:10px 0;color:var(--mute);border-bottom:1px solid var(--ink)}
.idx li a{text-decoration:none;padding:18px 0;border-bottom:1px solid var(--line);transition:background .3s,padding .4s}
.idx li a:hover{padding-left:12px;background:rgba(20,20,20,.04)}
.idx-t{font:600 clamp(24px,2.4vw,38px)/1 var(--sans);font-stretch:112%;letter-spacing:-.03em}
.proj{display:grid;grid-template-columns:2fr 1fr;gap:var(--pad);padding-block:80px;scroll-margin-top:60px;align-items:end}
.proj:nth-of-type(odd){grid-template-columns:1fr 2fr}
.proj:nth-of-type(odd) .proj-img{order:2}
.proj-img{aspect-ratio:16/10;overflow:hidden}
.proj-img img{width:100%;height:100%;object-fit:cover}
.proj-b{display:grid;gap:22px}
.proj-b h2{font:700 clamp(40px,4.4vw,76px)/.92 var(--sans);font-stretch:118%;letter-spacing:-.045em;text-transform:uppercase}
.proj-txt{color:var(--mute);font-size:17px}
.proj-spec{display:grid;border-top:1px solid var(--ink)}
.proj-spec div{display:grid;grid-template-columns:110px 1fr;padding:10px 0;border-bottom:1px solid var(--line)}
.proj-spec dt{color:var(--mute)}
.proj-spec dd{margin:0}
/* contact */
.c-mail{font:700 clamp(28px,5.4vw,96px)/1 var(--sans);font-stretch:112%;letter-spacing:-.045em;text-decoration:none;border-bottom:2px solid var(--ink);justify-self:start;transition:color .3s,border-color .3s;word-break:break-all}
.c-mail:hover{color:var(--sun);border-color:var(--sun)}
.contact{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(40px,8vw,140px);padding-block:60px 140px}
.c-side{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-content:start}
.c-side p:not(.k){font-size:18px}
.c-side a{text-decoration:none;border-bottom:1px solid var(--line-s)}
.c-img{grid-column:1/-1;aspect-ratio:16/11;overflow:hidden}
.c-img img{width:100%;height:100%;object-fit:cover}
.c-form label{font-family:var(--mono);font-size:12px;text-transform:uppercase;color:var(--mute)}
.c-form .f-row input,.c-form .f-row textarea,.c-form .f-row select{font-size:20px;border-bottom-color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--bg);border:0;border-radius:99px;padding:16px 28px;font:500 14px/1 var(--sans);cursor:pointer;transition:background .3s}
.btn:hover{background:var(--sun)}
.btn::after{content:"↗"}
.form-status.ok{color:var(--ink);font-weight:600}
.cb-dot{background:#E07A4A}
/* static fallback for horizontal section */
.static .hs-track,.rm .hs-track{width:auto;height:auto;flex-wrap:wrap;padding-block:100px}
@media (max-width:899px){
 .hs-track{width:auto;height:auto;flex-direction:column;align-items:stretch;padding-block:100px;gap:60px}
 .hs-intro,.hs-item,.hs-end{width:auto}
 .hs-item:nth-of-type(2n){margin-top:0}
 .hs-img img{width:100%;margin:0}
 .hs-end{width:60vw;justify-self:center;align-self:center;margin:0}
 .hs-progress{display:none}
}
@media (max-width:900px){
 .hd{grid-template-columns:1fr auto}
 .nav,.hd-geo{display:none}
 .menu-btn{display:block}
 .hero{padding-top:70px}
 .phero-h{font-size:13.4vw;font-stretch:100%}
 .hero-grid{grid-template-columns:1fr auto;}
 .hero-k{grid-column:1/-1}
 .round{width:104px;height:104px;font-size:12px}
 .hero-img{height:62vh}
 .mani,.appr-head{grid-template-columns:1fr}
 .mani-t{text-indent:0}
 .appr-g{grid-template-columns:1fr 1fr}
 .appr-g li:nth-child(3){padding-left:0;border-left:0}
 .appr-g li{padding-bottom:30px}
 .appr-g h3{margin-top:24px}
 .svc-list li{flex-direction:column;gap:6px}
 .svc-t{font-size:clamp(28px,9.2vw,80px);font-stretch:100%}
 .hs-cap{grid-template-columns:40px 1fr}
 .hs-s{grid-column:2}
 .svc-d{text-align:left}
 .band{height:70vh}
 .ft-grid{grid-template-columns:1fr 1fr}
 .ft-claim{grid-column:1/-1}
 .idx-h{display:none}
 .idx li a{grid-template-columns:40px 1fr auto}
 .idx li a span:nth-child(3),.idx li a span:nth-child(4){display:none}
 .proj,.proj:nth-of-type(odd){grid-template-columns:1fr}
 .proj:nth-of-type(odd) .proj-img{order:0}
 .contact{grid-template-columns:1fr}
}
@media (max-width:560px){.appr-g{grid-template-columns:1fr}.appr-g li+li{padding-left:0;border-left:0;border-top:1px solid var(--line)}.c-side{grid-template-columns:1fr}.ft-grid{grid-template-columns:1fr}}
