/* ============================================================
   stoa — architecture, public space, interiors
   black, white and lowercase
   ============================================================ */
:root{
  --bk:#000;
  --bk-2:#0d0d0d;
  --wh:#fff;
  --paper:#efeee9;
  --gr:#8a8a8a;
  --gr-2:#5a5a5a;
  --line:rgba(255,255,255,.18);
  --line-2:rgba(255,255,255,.34);
  --pad:clamp(16px,2vw,32px);
  --gap:clamp(12px,1.4vw,22px);
  --f:'Inter',-apple-system,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.65,.05,0,1);
  --out:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bk);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--bk);color:var(--wh);font-family:var(--f);font-size:16px;line-height:1.4;font-weight:400;letter-spacing:-.015em;-webkit-font-smoothing:antialiased;overflow-x:hidden;text-transform:lowercase}
body.locked{overflow:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-transform:inherit;letter-spacing:inherit}
input,textarea,select{font:inherit;color:inherit;text-transform:none}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
::selection{background:var(--wh);color:var(--bk)}
:focus-visible{outline:1px solid var(--wh);outline-offset:3px}
.hide{display:none!important}
.keep{text-transform:none}

/* ---------- type ---------- */
.t-xxl{font-size:clamp(3rem,11vw,13rem);line-height:.86;letter-spacing:-.06em;font-weight:500}
.t-xl{font-size:clamp(2.4rem,6vw,6.6rem);line-height:.92;letter-spacing:-.05em;font-weight:500}
.t-l{font-size:clamp(2rem,3.6vw,3.9rem);line-height:1;letter-spacing:-.045em;font-weight:500}
.t-m{font-size:clamp(1.4rem,2vw,2.2rem);line-height:1.08;letter-spacing:-.035em;font-weight:500}
.t-s{font-size:clamp(1.05rem,1.2vw,1.3rem);line-height:1.3;letter-spacing:-.02em}
.t-xs{font-size:13px;line-height:1.35;letter-spacing:-.005em}
.gr{color:var(--gr)}
.b{font-weight:700}
.p{font-size:clamp(1rem,1.1vw,1.2rem);line-height:1.5;letter-spacing:-.01em;color:var(--gr);text-transform:none}
.p.wh{color:var(--wh)}
.ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.ln>span{display:inline-block;will-change:transform}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.w>span{display:inline-block;will-change:transform}

/* brackets button */
.brk{display:inline-flex;align-items:center;gap:.5em;font-size:clamp(1rem,1.15vw,1.25rem);letter-spacing:-.02em;white-space:nowrap}
.brk::before{content:"[";transition:transform .6s var(--ease)}
.brk::after{content:"]";transition:transform .6s var(--ease)}
.brk:hover::before{transform:translateX(-.4em)}
.brk:hover::after{transform:translateX(.4em)}
.brk.big{font-size:clamp(2.2rem,6vw,6.8rem);letter-spacing:-.05em;font-weight:500;gap:.35em}
.ulk{position:relative;display:inline-block}
.ulk::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .7s var(--ease)}
.ulk:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- layout ---------- */
.px{padding-inline:var(--pad)}
.g{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap)}
.g>*{min-width:0}
.sec{padding-block:clamp(90px,12vw,200px)}
.sec-s{padding-block:clamp(50px,6vw,100px)}
.rule{border-top:1px solid var(--line)}
.label{grid-column:1/4;color:var(--gr)}

/* ---------- header ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:100;padding:var(--pad);display:flex;justify-content:space-between;align-items:flex-start;mix-blend-mode:difference;pointer-events:none}
.hdr>*{pointer-events:auto}
.logo{font-size:clamp(1.6rem,2.2vw,2.3rem);font-weight:700;letter-spacing:-.06em;line-height:.8}
.hdr-mid{position:absolute;left:50%;top:var(--pad);transform:translateX(-50%)}
.hdr .brk{font-size:clamp(1rem,1.2vw,1.3rem)}

/* ---------- loader + wipe ---------- */
.loader{position:fixed;inset:0;z-index:400;background:var(--bk);display:flex;flex-direction:column;justify-content:space-between;padding:var(--pad)}
.loader .welcome{font-size:clamp(1.2rem,1.8vw,2rem);letter-spacing:-.03em;font-weight:500}
.loader .num{font-size:clamp(5rem,22vw,24rem);line-height:.78;letter-spacing:-.07em;font-weight:500;font-variant-numeric:tabular-nums}
.wipe{position:fixed;inset:0;z-index:390;background:var(--paper);color:var(--bk);transform:translateY(100%);display:flex;justify-content:space-between;align-items:flex-end;padding:var(--pad);pointer-events:none}
.wipe b{font-size:clamp(3rem,12vw,13rem);line-height:.78;letter-spacing:-.07em;font-weight:500}

/* ---------- menu ---------- */
.menu{position:fixed;inset:0;z-index:200;background:var(--bk);visibility:hidden;clip-path:inset(0 0 100% 0);display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);padding:var(--pad);padding-top:calc(var(--pad) + 90px);overflow-y:auto}
.menu.on{visibility:visible}
.menu-links{grid-column:1/9;align-self:center}
.menu-links a{display:block;font-size:clamp(3rem,9.5vw,10rem);line-height:.92;letter-spacing:-.065em;font-weight:500;transition:color .5s var(--out),padding-left .7s var(--ease)}
.menu-links a .c{color:var(--gr-2)}
.menu-links:hover a{color:var(--gr-2)}
.menu-links a:hover{color:var(--wh);padding-left:.12em}
.menu-links a.on{color:var(--wh)}
.menu-img{grid-column:9/13;align-self:center;aspect-ratio:3/4;position:relative;overflow:hidden;background:#111}
.menu-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.1);transition:opacity .6s var(--out),transform 1.2s var(--out)}
.menu-img img.on{opacity:1;transform:scale(1)}
.menu-foot{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:30px;align-self:end}
.menu-close{position:fixed;right:var(--pad);top:var(--pad);z-index:210;visibility:hidden}
.menu.on~.menu-close{visibility:visible}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover;filter:brightness(.72) contrast(1.05)}
.hero-in{position:absolute;left:var(--pad);right:var(--pad);bottom:var(--pad);display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:end}
.hero-in .desc{grid-column:1/6}
.hero-in .scroll{grid-column:10/13;justify-self:end;text-align:right}

/* ---------- we (pinned values) ---------- */
.we{position:relative}
.we-in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:start}
.we-l{grid-column:1/4;position:sticky;top:30vh}
.we-r{grid-column:4/13}
.we-r p{font-size:clamp(2.2rem,6vw,6.8rem);line-height:.95;letter-spacing:-.06em;font-weight:500;color:var(--gr-2);transition:color .6s var(--out);padding:.06em 0}
.we-r p.on{color:var(--wh)}

/* ---------- services ---------- */
.svc-row{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);padding:22px 0;border-top:1px solid var(--line);align-items:start;position:relative}
.svc-row:last-child{border-bottom:1px solid var(--line)}
.svc-row .n{grid-column:1/2;color:var(--gr)}
.svc-row h3{grid-column:2/7}
.svc-row p{grid-column:7/12}
.svc-row .pic{grid-column:12/13;aspect-ratio:1;overflow:hidden}
.svc-row .pic img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .7s var(--out),transform 1s var(--out)}
.svc-row:hover .pic img{filter:none;transform:scale(1.08)}

/* ---------- media ---------- */
.m{position:relative;overflow:hidden;background:#111}
.m img,.m video{width:100%;height:100%;object-fit:cover}
.m-par img,.m-par video{height:120%;margin-top:-10%}
.nums{display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--gap)}
.nums b{display:block;font-size:clamp(3rem,7vw,7.4rem);line-height:.85;letter-spacing:-.065em;font-weight:500}

/* ---------- featured projects ---------- */
.fp{border-bottom:1px solid var(--line)}
.fp-row{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:end;padding:14px 0;border-top:1px solid var(--line);transition:color .5s var(--out)}
.fp-row .nm{grid-column:1/9;font-size:clamp(2rem,5vw,5.6rem);line-height:.95;letter-spacing:-.06em;font-weight:500;transition:transform .8s var(--ease)}
.fp-row .ct{grid-column:9/11;color:var(--gr);padding-bottom:.6em}
.fp-row .yr{grid-column:11/13;text-align:right;font-size:clamp(1.4rem,2.4vw,2.6rem);letter-spacing:-.05em;font-weight:500;padding-bottom:.1em}
.fp:hover .fp-row{color:var(--gr-2)}
.fp .fp-row:hover{color:var(--wh)}
.fp .fp-row:hover .nm{transform:translateX(.25em)}
.float{position:fixed;left:0;top:0;z-index:80;width:clamp(240px,24vw,380px);aspect-ratio:4/5;pointer-events:none;overflow:hidden;clip-path:inset(100% 0 0 0);transition:clip-path .7s var(--ease)}
.float.on{clip-path:inset(0 0 0 0)}
.float img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.float img.on{opacity:1}

/* ---------- awards ---------- */
.aw-year{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.aw-year .y{grid-column:1/4;font-size:clamp(1.6rem,2.8vw,3rem);letter-spacing:-.05em;font-weight:500;line-height:1}
.aw-list{grid-column:4/13}
.aw{border-bottom:1px solid var(--line)}
.aw:last-child{border-bottom:0}
.aw-h{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:12px 0;text-align:left;font-size:clamp(1.05rem,1.3vw,1.4rem);letter-spacing:-.025em}
.aw-h .tg{font-variant-numeric:tabular-nums;color:var(--gr);transition:transform .6s var(--ease)}
.aw.open .aw-h .tg{transform:rotate(45deg)}
.aw-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease)}
.aw.open .aw-b{grid-template-rows:1fr}
.aw-b>div{overflow:hidden}
.aw-b .in{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);padding-bottom:18px;color:var(--gr)}

/* ---------- journal slider ---------- */
.slider{overflow:hidden;cursor:grab;user-select:none}
.slider.drag{cursor:grabbing}
.track{display:flex;gap:var(--gap);will-change:transform}
.jc{flex:0 0 clamp(280px,31vw,520px);display:block}
.jc .m{aspect-ratio:4/5}
.jc .m img{transition:transform 1.2s var(--out);pointer-events:none}
.jc:hover .m img{transform:scale(1.05)}
.jc .cat{color:var(--gr);margin-top:14px}
.jc h3{margin-top:6px}
.sl-bar{height:1px;background:var(--line);margin-top:28px;position:relative}
.sl-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--wh);width:20%}

/* ---------- footer ---------- */
.foot{padding:var(--pad);padding-top:clamp(100px,14vw,240px);position:relative}
.foot-cta{display:block;margin-bottom:clamp(60px,9vw,140px)}
.foot .g{border-top:1px solid var(--line);padding-top:16px;row-gap:24px}
.foot-mark{font-size:clamp(5rem,30vw,34rem);line-height:.72;letter-spacing:-.085em;font-weight:700;margin-top:clamp(40px,6vw,90px);white-space:nowrap}

/* ---------- inner pages ---------- */
.ph{padding:calc(var(--pad) + 130px) var(--pad) clamp(40px,6vw,90px)}
.filters{display:flex;gap:18px;flex-wrap:wrap}
.filters button{color:var(--gr);transition:color .4s}
.filters button.on,.filters button:hover{color:var(--wh)}
.filters sup{font-size:.6em;margin-left:2px}
.bar{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:14px var(--pad);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,3vw,50px) var(--gap);padding:var(--gap) var(--pad) 0}
.pc{display:block}
.pc .m{aspect-ratio:4/5}
.pc .m img{transition:transform 1.3s var(--out)}
.pc:hover .m img{transform:scale(1.05)}
.pc .cap{display:flex;justify-content:space-between;gap:14px;margin-top:12px}
.pc:nth-child(3n+2){margin-top:clamp(40px,8vw,140px)}
.meta{display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--gap);border-top:1px solid var(--line);padding-top:14px;row-gap:18px}
.gal{display:flex;gap:var(--gap);will-change:transform}
.gal figure{flex:0 0 auto;height:clamp(300px,62vh,680px)}
.gal img{height:100%;width:auto;max-width:none;pointer-events:none}
.next{display:block;border-top:1px solid var(--line);padding:clamp(60px,9vw,140px) var(--pad);position:relative;overflow:hidden}
.next .bgimg{position:absolute;inset:0;opacity:0;transition:opacity .8s var(--out)}
.next .bgimg img{width:100%;height:100%;object-fit:cover;filter:brightness(.45)}
.next:hover .bgimg{opacity:1}
.next .nm{position:relative;font-size:clamp(3rem,11vw,13rem);line-height:.86;letter-spacing:-.065em;font-weight:500}
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.team .m{aspect-ratio:3/4}
.team img{filter:grayscale(1);transition:filter .8s var(--out)}
.team>div:hover img{filter:none}
.role{border-top:1px solid var(--line)}
.role:last-child{border-bottom:1px solid var(--line)}
.role-h{width:100%;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);padding:18px 0;text-align:left;align-items:baseline}
.role-h .t{grid-column:1/7}
.role-h .l{grid-column:7/10;color:var(--gr)}
.role-h .x{grid-column:10/13;text-align:right;color:var(--gr)}
.role-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease)}
.role.open .role-b{grid-template-rows:1fr}
.role-b>div{overflow:hidden}
.art{max-width:880px;margin:0 auto;padding:0 var(--pad)}
.art p{font-size:clamp(1.1rem,1.35vw,1.4rem);line-height:1.6;color:#d8d8d8;margin-bottom:1.2em;text-transform:none}
.art h3{font-size:clamp(1.4rem,2vw,2rem);letter-spacing:-.035em;font-weight:500;margin:1.6em 0 .6em}
.fld{display:flex;flex-direction:column;gap:8px}
.fld input,.fld textarea,.fld select{background:transparent;border:0;border-bottom:1px solid var(--line-2);padding:12px 0;font-size:clamp(1.1rem,1.6vw,1.6rem);letter-spacing:-.025em;outline:0;border-radius:0;width:100%;min-width:0}
.fld select option{color:#000}
.fld input:focus,.fld textarea:focus{border-color:var(--wh)}
.fld.bad input{border-color:#ff5a4d}
.map{height:clamp(320px,48vh,520px);background:#111}
.leaflet-container{background:#0b0b0b!important;font-family:var(--f)!important}
.pin{width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.18)}
.note{border:1px dashed var(--line-2);padding:12px 14px;color:var(--gr);font-size:13px;text-transform:none}

/* ---------- cursor + toast ---------- */
.cur{position:fixed;left:0;top:0;z-index:500;pointer-events:none;transform:translate(-50%,-50%);font-size:15px;letter-spacing:-.02em;white-space:nowrap;mix-blend-mode:difference;color:#fff;opacity:0;transition:opacity .3s}
.cur .dot{display:block;width:8px;height:8px;border-radius:50%;background:#fff;transition:transform .4s var(--out),opacity .3s}
.cur .lab{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.6);opacity:0;transition:opacity .35s,transform .5s var(--out)}
.cur.live{opacity:1}
.cur.lb .dot{transform:scale(0);opacity:0}
.cur.lb .lab{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (hover:none){.cur{display:none}}
.toast{position:fixed;left:50%;bottom:var(--pad);z-index:600;transform:translate(-50%,24px);background:var(--wh);color:var(--bk);padding:12px 20px;opacity:0;transition:all .5s var(--out);pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- motion fallback ---------- */
[data-fade]{opacity:0;transform:translateY(30px)}
.no-gsap [data-fade],.reduced [data-fade]{opacity:1;transform:none}
.no-gsap .loader,.no-gsap .wipe{display:none}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hdr-mid{display:none}
  .menu-links{grid-column:1/-1}
  .menu-img{display:none}
  .hero-in .desc{grid-column:1/10}
  .we-l{position:relative;top:0;grid-column:1/-1;margin-bottom:10px}
  .we-r{grid-column:1/-1}
  .label{grid-column:1/-1;margin-bottom:14px}
  .svc-row h3{grid-column:2/13}
  .svc-row p{grid-column:2/13;margin-top:10px}
  .svc-row .pic{display:none}
  .nums{grid-template-columns:repeat(2,1fr);row-gap:30px}
  .fp-row .nm{grid-column:1/-1}
  .fp-row .ct{grid-column:1/7;padding:6px 0 0}
  .fp-row .yr{grid-column:7/13}
  .aw-year .y{grid-column:1/-1;margin-bottom:8px}
  .aw-list{grid-column:1/-1}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .pc:nth-child(3n+2){margin-top:0}
  .pc:nth-child(2n){margin-top:clamp(30px,8vw,80px)}
  .meta,.team{grid-template-columns:repeat(2,1fr)}
  .float{display:none}
  .role-h .t{grid-column:1/-1}
  .role-h .l{grid-column:1/7;margin-top:4px}
  .role-h .x{grid-column:7/13}
}
@media (max-width:560px){
  .pgrid{grid-template-columns:1fr}
  .pc:nth-child(2n){margin-top:0}
  .aw-b .in{grid-template-columns:1fr}
}