*{box-sizing:border-box}
:root{--accent:#1230FF;--ac:#1230FF;--on:#FFFFFF;--ink:#111111;--mut:#5C5C5C;--line:#E3E3DF}
html{scroll-behavior:smooth}
body{margin:0;background:#FFFFFF;color:var(--ink);font-family:'Barlow',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;font-weight:400;line-height:1.5}
a{color:inherit}
img{max-width:100%}
.skip{position:absolute;left:-999px;top:0;background:#111;color:#fff;padding:12px 16px;z-index:100}.skip:focus{left:0}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.top{padding:20px clamp(16px,4vw,48px);border-bottom:1px solid var(--line);background:#fff}
.top-in{max-width:1280px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 32px}
.logo{display:inline-block}.logo img{display:block;width:clamp(190px,18vw,250px);height:auto}
.top nav{display:flex;flex-wrap:wrap;gap:0 clamp(24px,3vw,44px);font-size:clamp(15px,1.4vw,19px);font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.nl{display:inline-block;padding:12px 0;text-decoration:none}.nl:hover{text-decoration:underline}.nl.on{color:var(--accent)}
.sec{padding:112px clamp(16px,4vw,48px)}
.wrap{max-width:1280px;margin:0 auto}
.sec-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 32px;padding-top:24px;border-top:1px solid var(--ink);margin-bottom:56px}
.sec-h h2{margin:0;color:var(--accent);font-size:clamp(40px,6vw,88px);font-weight:300;line-height:1;letter-spacing:.04em;text-transform:uppercase}
.sec-h span{font-size:18px;color:var(--mut)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:56px 32px}
.pc{min-width:0}
.pbtn{display:block;position:relative;width:100%;height:clamp(260px,26vw,360px);background:#EDEDEB;overflow:hidden;text-decoration:none}
.pbtn img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.nm{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:24px 24px 56px;background:var(--accent);color:var(--on);opacity:0;transition:opacity .25s ease}
.pbtn:hover .nm,.pbtn:focus-visible .nm{opacity:.95}
.nm-t{font-size:clamp(22px,2.2vw,30px);font-weight:500;line-height:1.15}
.nm-place{margin-top:10px;font-size:14px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.nm-meta{margin-top:8px;font-size:15px;font-weight:500}
.nm-desc{margin-top:8px;font-size:15px}
.vp{position:absolute;left:0;bottom:0;padding:10px 16px;background:#111;color:#fff;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.cap{display:none}
.cap h3{margin:20px 0 4px;font-size:26px;line-height:1.15;font-weight:500}
.cap-place{font-size:14px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.cap-meta{margin-top:6px;font-size:15px;font-weight:500}
.cap-desc{margin:12px 0 0;color:var(--mut)}
@media (hover:none){.nm{display:none}.cap{display:block}}
@media (min-width:720px){.pc:nth-child(even){margin-top:80px}}
.eyebrow{font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.orows{border-top:1px solid var(--ink)}
.orow{display:grid;grid-template-columns:1.2fr 2fr 1.2fr;gap:8px 24px;padding:18px 0;border-bottom:1px solid var(--line);font-size:18px}
.o-t{font-weight:500}.o-m,.o-y{color:var(--mut)}.o-y{text-align:right}
@media (max-width:720px){.orow{grid-template-columns:1fr}.o-y{text-align:left}}
.foot{padding:28px clamp(16px,4vw,48px);border-top:1px solid var(--ink);color:var(--mut)}
.foot-in{max-width:1280px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;font-size:13px;letter-spacing:.06em}
.foot a{text-decoration:none}.foot a:hover{text-decoration:underline}
.pbtn.empty{background:#F2F2F0;border:1px solid var(--line)}
.ph{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:24px 24px 56px;gap:8px}
.ph-t{font-size:clamp(22px,2.2vw,30px);font-weight:500;line-height:1.15}
.ph-m{font-size:15px;color:var(--mut)}
.ph-s{margin-top:12px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.pbtn.empty:hover{background:var(--accent)}.pbtn.empty:hover .ph,.pbtn.empty:hover .ph-m,.pbtn.empty:hover .ph-s{color:#fff}
.soon{max-width:1280px;margin:32px auto;padding:0 clamp(8px,2vw,24px);font-size:18px;color:var(--mut)}
[hidden]{display:none!important}
/* home */
.homehero{--ac:var(--accent);--on:#FFFFFF}
.hero{position:relative;min-height:max(560px,calc(100vh - 220px));overflow:hidden;background:#fff}
.hs{position:absolute;inset:0;text-decoration:none;transition:background-color .25s ease,color .25s ease}
.dl{background:#fff;color:#111;clip-path:polygon(0 0,58% 0,42% 100%,0 100%)}
.dr{background:var(--accent);color:#fff;clip-path:polygon(58% 0,100% 0,100% 100%,42% 100%)}
.hc{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;padding:24px;text-align:center;height:100%}
.dl .hc{width:50%}.dr .hc{margin-left:50%;width:50%}
.hw{font-size:clamp(30px,5.2vw,96px);font-weight:300;line-height:1;letter-spacing:.02em}
.hl{font-size:14px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.dl:hover,.dl:focus-visible{background:var(--accent);color:#fff}
.dr:hover,.dr:focus-visible{background:#111;color:#fff}
.hero:has(.dl:hover) .dr,.hero:has(.dl:focus-visible) .dr,.hero:has(.dl:active) .dr{background:#fff;color:#111}
.hero-note{padding:28px clamp(16px,4vw,48px);border-top:1px solid var(--ink)}
.hero-note h1{max-width:1280px;margin:0 auto;font-size:clamp(16px,1.6vw,20px);font-weight:300;line-height:1.45;color:var(--mut)}
@media (max-width:720px){
.hero{min-height:640px}
.dl{clip-path:polygon(0 0,100% 0,100% 42%,0 58%)}
.dr{clip-path:polygon(0 58%,100% 42%,100% 100%,0 100%)}
.dl .hc{width:100%;height:50%}.dr .hc{margin-left:0;margin-top:50%;width:100%;height:50%}
.hw{font-size:clamp(34px,11vw,80px)}
}
/* project page */
.proj{padding:40px clamp(8px,2vw,24px) 96px}
.proj-head{max-width:1280px;margin:0 auto 24px;padding:0 clamp(8px,2vw,24px)}
.back{font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--mut)}.back:hover{text-decoration:underline}
.proj-head h1{margin:16px 0 4px;font-size:clamp(28px,3.4vw,52px);font-weight:300;line-height:1.1;letter-spacing:.01em}
.proj-place{font-size:14px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.gal{max-width:1280px;margin:0 auto}
.stage{position:relative;display:flex;align-items:center;gap:8px}
.slides{flex:1 1 auto;min-width:0}
.slide{margin:0 0 12px}
.slide img{display:block;width:100%;height:auto}
.js .slides{height:68vh;min-height:300px;position:relative}
.js .slide{display:none;position:absolute;inset:0;margin:0}
.js .slide.on{display:block}
.js .slide img{width:100%;height:100%;object-fit:contain}
.ar{display:none;flex:0 0 auto;width:48px;height:64px;align-items:center;justify-content:center;padding:0;border:1px solid #C9C9C4;background:#fff;color:var(--ink);cursor:pointer}
.ar.next{order:3}
.js .ar{display:flex}.ar:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
@media (max-width:720px){.js .ar{position:absolute;top:50%;margin-top:-32px;z-index:2;width:40px;opacity:.9}.js .ar.prev{left:4px}.js .ar.next{right:4px}.js .slides{height:56vh}}
.gal-bar{display:none;flex-direction:column;align-items:center;gap:12px;padding-top:8px}
.js .gal-bar{display:flex}
.count{font-size:14px;letter-spacing:.12em;color:var(--mut)}
.thumbs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.th{width:64px;height:44px;padding:0;border:0;background:#EDEDEB;cursor:pointer;opacity:.55;outline:3px solid transparent;outline-offset:2px}
.th.on{opacity:1;outline-color:var(--accent)}.th img{display:block;width:100%;height:100%;object-fit:cover}
.proj-info{max-width:1280px;margin:48px auto 0;padding:40px clamp(8px,2vw,24px) 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:40px 8%}
.ptext{flex:1 1 380px;min-width:0;max-width:680px}
.ptext p{margin:0 0 16px;font-size:18px;line-height:1.6}
.pfacts{flex:1 1 260px;min-width:0;max-width:420px}
.fact{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.fact span:first-child{color:var(--mut);letter-spacing:.08em;text-transform:uppercase}.fact span:last-child{text-align:right}
.nextbtn{display:inline-block;margin-top:32px;min-height:48px;padding:12px 24px;border:1px solid var(--ink);text-decoration:none;font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.nextbtn:hover{background:var(--accent);border-color:var(--accent);color:#fff}