:root{--ink:#f6f3ec;--char:#ece7dc;--line:#ddd6c8;--bone:#0d0e10;--mute:#6a6963;--gold:#e9a90f;--bar:rgba(246,243,236,.94);--text:#2b2a27;--t1:#e9e4d8;--t2:#ddd6c8;--pad:clamp(20px,4vw,64px)}
*{box-sizing:border-box;margin:0}
body{background:var(--ink);color:var(--bone);font:400 16px/1.65 Montserrat,system-ui,sans-serif;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{padding-inline:var(--pad);max-width:1600px;margin-inline:auto}
header{position:sticky;top:0;z-index:10;background:var(--bar);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.logo{display:flex;align-items:center;gap:14px;font-weight:700;letter-spacing:.32em;text-decoration:none;font-size:15px;white-space:nowrap}
.logo img{display:block;height:40px;width:auto}
nav{display:flex;gap:clamp(14px,3vw,40px)}
nav a{text-decoration:none;font-size:14px;font-weight:500;color:var(--mute);padding:6px 0;border-bottom:2px solid transparent}
nav a:hover,nav a[aria-current]{color:var(--bone);border-color:var(--gold)}
h1{font-size:clamp(26px,3.6vw,52px);line-height:1.08;font-weight:600;max-width:17ch;letter-spacing:-.02em}
h2{font-size:clamp(26px,3.2vw,42px);font-weight:600;letter-spacing:-.01em;line-height:1.15;color:var(--bone)}
.hero{padding:clamp(28px,4vw,56px) 0 clamp(18px,2.5vw,32px)}
.hero p{margin-top:16px;max-width:56ch;color:var(--mute);font-size:clamp(16px,1.4vw,19px)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 20px}
.filters button{font:500 14px Montserrat,sans-serif;color:var(--mute);background:none;border:1px solid var(--line);border-radius:999px;padding:8px 18px;cursor:pointer}
.filters button[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:#0d0e10}
.grid{display:flex;flex-wrap:wrap;gap:8px;overflow:hidden}
.tile{position:relative;display:block;overflow:hidden;flex:var(--g,150) 1 calc(var(--r,1.5) * 20vw);max-width:min(100%,calc(var(--r,1.5) * 27vw));background:linear-gradient(160deg,var(--t1),var(--t2));text-decoration:none}
.tile::before{content:"";display:block;padding-bottom:calc(100% / var(--r,1.5))}
.tile[style*="height"]::before{display:none}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tile:hover img{transform:scale(1.03)}
.tile[hidden]{display:none}
.cap{position:absolute;inset:auto 0 0 0;padding:44px 18px 16px;background:linear-gradient(transparent,rgba(0,0,0,.72));display:flex;flex-direction:column;font-size:13px;color:#cfcfca}
.cap b{font-size:16px;font-weight:600;color:#fff}
.page{display:flex;align-items:center;min-height:calc(100vh - 72px - 78px);padding-block:48px}
.page .wrap{width:100%}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:40px;margin-top:40px}
.cols h3{font-size:19px;font-weight:600;margin-bottom:8px}
.cols p{color:var(--mute);max-width:42ch}
.steps{list-style:none;padding:0;margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));counter-reset:s}
.steps li{counter-increment:s;padding:20px 20px 20px 0;border-top:2px solid var(--line)}
.steps li::before{content:counter(s);display:block;color:var(--gold);font-weight:700;margin-bottom:8px}
.steps b{display:block;font-weight:600}
.steps span{color:var(--mute);font-size:15px}
.about{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(32px,6vw,96px)}
.about p+p{margin-top:16px}
.about p{color:var(--text);max-width:58ch}
.sub{margin-top:12px;color:var(--mute);font-size:15px}
.lead{margin-top:16px;color:var(--mute);max-width:52ch}
a.big{display:inline-block;margin-top:24px;font-size:clamp(20px,3vw,34px);font-weight:600;text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:4px;overflow-wrap:anywhere}
.links{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:32px}
.links a{color:var(--mute);text-decoration:none;border-bottom:1px solid var(--line)}
.links a:hover{color:var(--bone)}
footer{border-top:1px solid var(--line);padding:28px 0;color:var(--mute);font-size:14px}
@media(prefers-reduced-motion:reduce){.tile img{transition:none}}
@media(max-width:560px){header .wrap{height:auto;padding-block:12px;flex-wrap:wrap}nav{width:100%;justify-content:space-between}.page{min-height:0}}
.proj{position:relative;padding-block:48px 80px}
.proj h1{max-width:none;font-size:clamp(28px,4vw,52px)}
.back{display:inline-block;margin-bottom:28px;color:var(--mute);text-decoration:none;font-size:14px;border-bottom:1px solid var(--line)}
.back:hover{color:var(--bone)}
.meta{display:flex;flex-wrap:wrap;gap:8px 32px;margin-top:20px;color:var(--mute);font-size:15px}
.meta b{color:var(--bone);font-weight:600;margin-right:6px}
img{max-width:100%;height:auto}
html,body{max-width:100%;overflow-x:hidden}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,28px);margin-top:40px}
.gallery a{display:block;aspect-ratio:1;overflow:hidden;background:var(--char)}
.gallery img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:700px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.gallery{grid-template-columns:1fr}}
.lb{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center}
.lb[hidden]{display:none}
.lb-s{position:absolute;inset:0;display:flex;overflow:hidden}
.lb img{flex:none;margin:auto;max-width:94vw;max-height:92vh;object-fit:contain;user-select:none;-webkit-user-drag:none}
.lb button{z-index:2;position:absolute;background:none;border:0;color:#fff;font:300 44px/1 Montserrat,sans-serif;cursor:pointer;padding:12px 18px}
.lb-x{top:8px;right:8px}.lb-p{left:4px;top:50%;transform:translateY(-50%)}.lb-n{right:4px;top:50%;transform:translateY(-50%)}
header nav{margin-left:auto}
.soc{display:flex;align-items:center;gap:6px}
.soc a{display:flex;padding:6px;color:var(--mute);transition:color .2s}
.soc a:hover{color:var(--bone)}
.soc svg{display:block}
header .soc{margin-left:14px}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media(max-width:560px){header nav{margin-left:0;order:2}header .soc{order:1;margin-left:auto}}
footer{padding-bottom:84px}
.dock{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:15;gap:4px;padding:2px 12px;background:var(--bar);border:1px solid var(--line);border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.08)}
.dock a{padding:9px;color:var(--mute)}
.dock a:hover{color:var(--bone)}
@media(max-width:1000px){.tile{flex-basis:calc(var(--r,1.5) * 30vw);max-width:min(100%,calc(var(--r,1.5) * 40vw))}}
@media(max-width:600px){.tile{flex-basis:100%;max-width:100%}}
.awards{position:absolute;top:0;right:var(--pad);z-index:5;list-style:none;margin:0;padding:0;display:flex;align-items:flex-start;gap:8px}
.awards li{position:relative;line-height:0;visibility:hidden;transform-origin:50% 0;-webkit-mask:radial-gradient(farthest-side at 50% 0,#000 97%,transparent 100%) 50% 0/170% 0% no-repeat;mask:radial-gradient(farthest-side at 50% 0,#000 97%,transparent 100%) 50% 0/170% 0% no-repeat}
.awards.go li{visibility:visible;animation:hem 1.6s cubic-bezier(.35,.6,.3,1) forwards}
.awards.go li:nth-child(2){animation-delay:.25s}
.awards.go li:nth-child(3){animation-delay:.5s}
.awards.go li:nth-child(4){animation-delay:.75s}
.awards.go li:nth-child(n+5){animation-delay:1s}
.awards img{display:block;width:66px;height:auto}
@keyframes hem{0%{-webkit-mask-size:170% 0%;mask-size:170% 0%}70%{-webkit-mask-size:170% 190%;mask-size:170% 190%}100%{-webkit-mask-size:170% 240%;mask-size:170% 240%}}
.awards .sl{position:absolute;inset:0;pointer-events:none}
.awards .sl span{position:absolute;left:0;width:100%;background-repeat:no-repeat;will-change:transform}
.awards li.waving img{opacity:0}
.awards.go .sl span{animation:wave 1.6s cubic-bezier(.45,0,.4,1) both;animation-delay:calc(var(--d) + 200ms + var(--k) * 900ms)}
@keyframes wave{0%{transform:translateX(0)}45%{transform:translateX(calc(var(--a) * 1px))}100%{transform:translateX(0)}}
@media(max-width:600px){.awards{gap:6px}.awards img{width:46px}}
@media(prefers-reduced-motion:reduce){.awards.go li{animation:none;-webkit-mask:none;mask:none}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.grid{margin-top:8px}
.tile .cap{opacity:0;transition:opacity .15s}
.tile:hover .cap,.tile:focus-visible .cap{opacity:1}
@media(hover:none){.tile .cap{opacity:1}}
.about{align-items:start;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
@media(max-width:760px){.about{grid-template-columns:1fr}}
.about-photo img{display:block;width:100%;max-width:230px;height:auto;border-radius:14px;margin-left:auto}
@media(max-width:760px){.about-photo img{margin-left:0}}
.about-text h2{font-size:clamp(26px,3vw,40px);margin-bottom:14px}
.about-text p{color:var(--text);max-width:58ch;font-size:17px}
.about-text p+p{margin-top:12px}
.about-text .h-services{margin-top:44px}
.svc{list-style:none;padding:0;margin:0;font-size:17px;color:var(--text)}
.svc li{padding:7px 0;border-bottom:1px solid var(--line)}
.svc li:last-child{border-bottom:0}
.soon{display:inline-block;padding:5px 11px;border-radius:999px;background:var(--gold);color:#0d0e10;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1}
.tile .soon{position:absolute;top:12px;left:12px;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.wip{display:flex;align-items:center;gap:12px;margin-top:14px;color:var(--mute);font-size:15px}
.awards a{display:block;transition:transform .2s}
.awards a:hover{transform:translateY(2px)}
html{overflow-y:scroll}
html{color-scheme:light}
html[data-theme=dark]{color-scheme:dark;--ink:#121212;--char:#1b1b1b;--line:#2c2c2c;--bone:#ecebe7;--mute:#9b9c98;--bar:rgba(18,18,18,.94);--text:#cfcfca;--t1:#1e1e1e;--t2:#161616}
html[data-theme=dark] .logo img{filter:invert(1)}
.theme{display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin-left:6px;padding:0;border:0;background:none;color:var(--mute);cursor:pointer;border-radius:50%}
.theme:hover{color:var(--bone)}
.theme svg{display:block}
.theme .moon{display:none}
html[data-theme=dark] .theme .sun{display:none}
html[data-theme=dark] .theme .moon{display:block}
@media(max-width:560px){header .theme{order:1}}
.contact-page{align-items:flex-start}
.contact-intro{text-align:center;font-size:clamp(17px,1.6vw,20px);max-width:60ch;margin:0 auto 56px;line-height:1.7}
.contact-intro a{text-decoration:none}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,6vw,96px);align-items:start}
.contact-info p{display:flex;align-items:center;gap:10px;font-size:18px;margin:0 0 10px}
.contact-info svg{flex:none;color:var(--mute)}
.contact-info a{color:inherit}
.cform{display:flex;flex-direction:column;gap:18px}
.cform label{display:flex;flex-direction:column;gap:6px;font-size:16px}
.cform input,.cform textarea{font:400 16px Montserrat,system-ui,sans-serif;color:var(--bone);background:var(--char);border:1px solid var(--line);border-radius:0;padding:16px 18px;width:100%}
.cform textarea{resize:vertical;min-height:140px}
.cform input::placeholder,.cform textarea::placeholder{color:var(--mute)}
.cform input:focus,.cform textarea:focus{outline:2px solid var(--gold);outline-offset:0;border-color:var(--gold)}
.cform button{align-self:center;margin-top:8px;font:600 20px Montserrat,system-ui,sans-serif;color:#fff;background:var(--gold);border:0;border-radius:16px;padding:16px 60px;cursor:pointer}
.cform button:hover{filter:brightness(1.05)}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cmsg{margin:0;padding:12px 16px;font-size:15px;border-left:3px solid var(--gold);background:var(--char)}
.cmsg.err{border-color:#c0392b}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr}}
.grid{opacity:0}
.grid.ready{opacity:1;transition:opacity .25s ease}
/* phone layout */
@media(max-width:560px){
header .wrap{padding-block:10px;row-gap:6px}
header .soc{display:none}
header .theme{margin-left:auto}
nav a{font-size:15px}
footer{padding:22px 0 26px}
footer .wrap{flex-direction:column-reverse;justify-content:center;text-align:center;gap:14px}
.dock{position:static;transform:none;box-shadow:none}
}
@media(max-width:420px){.gallery{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:28px}}
/* services: three columns, square images at the bottom */
.svc-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);margin-top:40px}
.svc-item{display:flex;flex-direction:column}
.svc-ic{display:block;color:var(--bone);width:30px;height:30px;margin-bottom:14px}
.svc-item h3{margin:0 0 14px;font-size:clamp(20px,1.7vw,26px);font-weight:500;letter-spacing:.02em;text-transform:uppercase;line-height:1.15}
.svc-item p{color:var(--text);font-size:16px;line-height:1.7;margin:0 0 24px}
.pills{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:0}
.pills li{padding:6px 14px;border:1px solid color-mix(in srgb,var(--bone) 28%,transparent);border-radius:999px;font-size:13px;letter-spacing:.03em;color:var(--text)}
.svc-img{margin-top:auto}
.svc-img img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
@media(max-width:900px){.svc-list{grid-template-columns:1fr;gap:56px}}
.tagline{max-width:none;line-height:1.35;margin:26px 0 16px;font-size:clamp(20px,1.9vw,28px);font-weight:500;letter-spacing:-.005em;color:var(--bone)}
@media(max-width:560px){.tagline{margin:16px 0 10px}}
.talk{max-width:12ch;margin:0 0 36px;font-size:clamp(38px,4.6vw,68px);font-weight:400;line-height:1.08;letter-spacing:-.01em}
.clist{list-style:none;margin:0;padding:0}
.clist li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;border-top:1px solid var(--line)}
.clist li div{display:flex;flex-direction:column;gap:4px;min-width:0}
.clabel{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.clist a{color:var(--bone);text-decoration:none;font-size:clamp(17px,1.5vw,22px);letter-spacing:.02em;overflow-wrap:anywhere}
.clist a:hover{color:var(--gold)}
.copy{flex:none;font:500 14px Montserrat,system-ui,sans-serif;color:var(--bone);background:none;border:1px solid color-mix(in srgb,var(--bone) 25%,transparent);border-radius:999px;padding:9px 18px;cursor:pointer}
.copy:hover{border-color:var(--bone)}
.about-photo figure{margin:0 0 0 auto;max-width:230px}
.about-photo figure img{margin:0;max-width:100%}
.about-photo figcaption{display:flex;flex-direction:column;gap:3px;margin-top:14px}
.about-photo figcaption b{font-size:22px;font-weight:600;letter-spacing:-.005em;color:var(--bone)}
.about-photo figcaption span{white-space:nowrap;font-size:14px;letter-spacing:.02em;color:var(--mute)}
@media(max-width:760px){.about-photo figure{margin-left:0}}
/* recognition: full width under the about grid */
.recog{grid-column:1/-1;margin-top:clamp(24px,4vw,56px)}
.recog h2{font-size:clamp(26px,3vw,40px);margin-bottom:20px}
.rec{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,64px)}
.rec li{border-top:1px solid var(--line)}
.rec a,.rec li>div{display:flex;align-items:center;gap:20px;padding:18px 0;color:inherit;text-decoration:none}
.rec img{flex:none;width:72px;height:72px;border-radius:14px;object-fit:cover}
.rec-t{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.rec-t b{font-size:20px;font-weight:500;color:var(--bone)}
.rec-t span{font-size:15px;color:var(--mute)}
.rec-go{flex:none;width:20px;height:20px;color:var(--mute);transition:transform .2s,color .2s}
.rec a:hover .rec-go{transform:translate(2px,-2px);color:var(--gold)}
.rec a:hover .rec-t b{color:var(--gold)}
@media(max-width:800px){.rec{grid-template-columns:1fr}.rec img{width:60px;height:60px}.rec-t b{font-size:18px}}
/* magazine feature */
.press{margin:clamp(32px,4vw,56px) 0 0;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;background:var(--char);border-radius:18px;padding:clamp(18px,3vw,40px)}
.press-imgs{display:flex;gap:14px;align-items:flex-start}
.press-imgs a{display:block;min-width:0}
.press-imgs img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.press figcaption{display:flex;flex-direction:column;gap:6px}
.press-k{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600}
.press figcaption b{font-size:clamp(28px,3vw,44px);font-weight:500;line-height:1.1;color:var(--bone)}
.press-i{font-size:17px;color:var(--mute)}
.press blockquote{margin:22px 0 0;font-size:clamp(18px,1.6vw,23px);line-height:1.5;font-style:italic;color:var(--text)}
.press-by{font-size:14px;color:var(--mute)}
@media(max-width:800px){.press{grid-template-columns:1fr}}
/* about: photo column + text column, recognition spans exactly both */
.about{grid-template-columns:240px minmax(0,680px);justify-content:center;column-gap:clamp(40px,6vw,88px);row-gap:32px}
.about-photo figure{margin:0;max-width:240px}
.about-photo figure img{max-width:240px}
.about-text p{max-width:none}
@media(max-width:760px){.about{grid-template-columns:minmax(0,1fr)}}
.recog{margin-top:0}
.press{grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:clamp(24px,3vw,44px)}
.press figcaption b{font-size:clamp(26px,2.6vw,38px)}
.press blockquote{font-size:clamp(17px,1.4vw,20px)}
.press-imgs{align-items:center}
@media(max-width:800px){.press{grid-template-columns:minmax(0,1fr)}.press figcaption b{font-size:28px}.press blockquote{font-size:18px;margin-top:14px}}