:root{--navy:#0f2a5c;--ink:#1d2a44;--muted:#6b7488;--bg:#fff;--line:#e6e9ef}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.5 "Alegreya Sans",system-ui,sans-serif}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
.site-header{position:sticky;top:0;z-index:20;height:56px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);font-size:15px;color:var(--navy)}
.nav-left{position:absolute;left:22px;display:flex;gap:18px}.nav-left a{opacity:.75}.nav-left a.active{opacity:1;font-weight:700}
.logo{font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.hero{text-align:center;padding:84px 20px 56px}
.hero h1{margin:0;font-size:clamp(36px,6vw,58px);font-weight:700;color:var(--navy);line-height:1.1}
.hero p{margin:14px 0 0;color:var(--muted);font-size:16px}
.chev{display:block;width:22px;height:22px;margin:44px auto 0;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);opacity:.6}
.work{padding-bottom:20px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.card{position:relative;display:block;overflow:hidden;background:#111}
.thumb{aspect-ratio:4/3}.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s,opacity .3s}

.card span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;text-align:center;color:#fff;font-size:24px;font-weight:700;background:rgba(10,18,40,.45);opacity:0;transition:opacity .3s}
.card:hover img{transform:scale(1.04)}.card:hover span,.card:focus-visible span{opacity:1}
@media(hover:none){.card span{opacity:1;font-size:20px;background:rgba(10,18,40,.3)}}
@media(max-width:820px){.grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.grid{grid-template-columns:1fr}}
.project{max-width:1500px;margin:0 auto;padding:36px 2px 40px}
.project h1,.contact h1{margin:0;text-align:center;font-size:clamp(30px,5vw,46px);color:var(--navy)}
.project h1{margin-bottom:30px}
.gallery{display:flex;flex-wrap:wrap;gap:2px}
.g{flex:calc(var(--ar)*100) 1 calc(var(--ar)*260px);min-width:0;display:block;background:#f2f3f6}
.g img{width:100%;height:auto;cursor:zoom-in}
.video{margin:2px auto 14px}.video>div{position:relative;height:0}.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pager{display:flex;justify-content:space-between;padding:36px 22px 0;color:var(--navy);font-weight:700}
.contact{max-width:620px;margin:0 auto;padding:46px 22px}
form label{display:block;margin-top:20px;font-size:14px;color:var(--muted)}
input,textarea{width:100%;margin-top:6px;padding:11px 12px;font:inherit;color:var(--ink);border:1px solid var(--line);border-radius:3px;background:#fafbfc}
input:focus,textarea:focus{outline:2px solid var(--navy);outline-offset:-1px;background:#fff}
form button{margin-top:24px;padding:11px 30px;border:0;border-radius:3px;background:var(--navy);color:#fff;font:700 15px inherit;cursor:pointer}
.ok{color:var(--navy);font-weight:700}.social{display:flex;gap:22px;justify-content:center;margin-top:44px;color:var(--navy);font-weight:700}
.site-footer{padding:44px 20px 30px;text-align:center;font-size:14px;color:var(--muted)}
.cookie{position:fixed;inset:auto 0 0 0;z-index:40;background:rgba(255,255,255,.97);border-top:1px solid var(--line);padding:14px 20px;text-align:center;font-size:14px}
.cookie p{margin:0;max-width:760px;margin-inline:auto}.cookie button{border:0;background:none;color:var(--navy);text-decoration:underline;font:inherit;cursor:pointer;margin:0 6px}
.lb{position:fixed;inset:0;z-index:50;background:rgba(10,12,18,.96);display:flex;align-items:center;justify-content:center}
.lb img{max-width:94vw;max-height:92vh;object-fit:contain}
.lb button{position:absolute;border:0;background:none;color:#fff;font-size:40px;cursor:pointer;padding:16px;opacity:.7}.lb button:hover{opacity:1}
.lb .x{top:6px;right:10px}.lb .p{left:6px;top:50%}.lb .n{right:6px;top:50%}