:root{--bg:#FBF8F3;--ink:#484848;--line:#8c8c8c;--r:28px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 clamp(16px,1.3vw,24px)/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif;position:relative}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.07;z-index:-1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
img{display:block;width:100%}
.logo{mix-blend-mode:multiply}
header{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;padding:12px 3.2vw;background:linear-gradient(var(--bg) 60%,transparent)}
header .logo{width:clamp(56px,5vw,96px)}
nav{display:flex;gap:clamp(24px,3.2vw,64px);margin:0 auto;padding-right:8vw}
nav a{opacity:.85}nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:6px}
main{width:76%;margin:0 auto}
.hero{padding-top:clamp(120px,18vh,200px);text-align:right}
.hero h1{font-weight:300;font-size:clamp(34px,4.6vw,88px);line-height:1.5;text-transform:uppercase;margin:0}
.hero p{font-size:clamp(18px,1.5vw,28px);margin:30px 0 40px}
.pic{border-radius:var(--r);overflow:hidden}.pic img{transform:scale(var(--s,1.08));transition:transform .2s linear}
.sec{padding-top:clamp(90px,14vh,170px)}
.label{display:flex;align-items:center;gap:20px;color:var(--line);margin-bottom:clamp(40px,8vh,90px)}
.label i{display:block;width:88px;border-top:1px solid var(--line)}
h2{font-weight:300;text-transform:uppercase;font-size:clamp(40px,6vw,112px);line-height:1;margin:0}
.btn{display:inline-block;border:1px solid var(--ink);border-radius:99px;padding:.3em 2.2em;transition:background .25s,color .25s}
.btn:hover{background:var(--ink);color:var(--bg)}
.work{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:start}
.work p.lead{max-width:22em;margin-top:clamp(30px,6vh,70px)}
.svc{display:grid;grid-template-columns:2.4em 1fr;margin-bottom:clamp(24px,4vh,50px)}
.svc small{font-size:.8em;color:var(--line);padding-top:.7em}
.svc h3{font-weight:300;font-size:clamp(28px,3.4vw,64px);line-height:1.1;text-transform:uppercase;margin:0 0 .5em}
.svc .btn{margin-top:.8em;margin-left:34%}
.proj{margin-bottom:clamp(60px,10vh,120px)}
.row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.proj h2{font-size:clamp(36px,5.6vw,108px);text-transform:uppercase}
.proj .btn{text-transform:uppercase;margin-top:1.2em}
.proj p{margin:.2em 0 clamp(20px,4vh,40px)}
.all{display:block;text-align:center;border:1px solid var(--ink);border-radius:99px;padding:.3em}
.about{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:start}
.about h2{margin-bottom:1em}
.contact h2{font-size:clamp(30px,4.4vw,84px);line-height:1.05;max-width:14em}
.contact h2 span{font-size:.3em;vertical-align:middle;margin-left:.8em}
.contact dl{display:grid;grid-template-columns:1fr 1fr;gap:34px 6vw;text-transform:uppercase;margin:clamp(40px,7vh,80px) 0}
.contact dd{margin:0}.contact dt{margin:0}
.contact .based{align-self:center;font-size:1.3em}
footer{text-align:center;padding:60px 0 40px}
footer .logo{width:clamp(90px,8vw,140px);margin:0 auto 36px}
footer small{display:block;font-size:.7em;color:var(--line);text-transform:none}
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s ease,transform .9s ease}.rv.in{opacity:1;transform:none}
.ld{opacity:0;animation:ld 1.1s .15s ease forwards}.ld2{animation-delay:.45s}.ld3{animation-delay:.75s}
@keyframes ld{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@media(max-width:800px){main{width:88%}nav{display:none}header{justify-content:space-between}.work,.about,.contact dl{grid-template-columns:1fr}.row{flex-direction:column}.svc .btn{margin-left:0}}
@media(prefers-reduced-motion:reduce){.rv,.ld{opacity:1;transform:none;animation:none;transition:none}.pic img{transform:none}html{scroll-behavior:auto}}
.pg{padding-top:clamp(130px,20vh,220px)}
.pg h1{font-weight:300;text-transform:uppercase;font-size:clamp(44px,7vw,132px);line-height:1;margin:0 0 .5em}
.intro{max-width:30em;margin:0 0 clamp(50px,9vh,110px)}
.blk{display:grid;grid-template-columns:1fr 1fr;gap:6vw;border-top:1px solid var(--line);padding:clamp(36px,6vh,70px) 0}
.blk h2{font-size:clamp(28px,3.6vw,68px)}
.blk p{margin:0 0 1em}.blk ul{margin:0 0 1.6em;padding:0;list-style:none}.blk li{padding:.25em 0;border-bottom:1px solid #ddd8cf}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-bottom:clamp(50px,9vh,110px)}
.cards.two{grid-template-columns:repeat(2,1fr);gap:40px 28px;margin-top:40px}
.card h3{font-weight:300;text-transform:uppercase;font-size:clamp(22px,2.2vw,40px);line-height:1.1;margin:.6em 0 .2em}
.card .tag{color:var(--line);font-size:.85em}.card em{display:block;margin-top:.5em;font-size:.9em}
.ph{aspect-ratio:4/3;border-radius:var(--r);background:#ECE6DA;overflow:hidden}.ph img{height:100%;object-fit:cover}
.cta{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--line);padding:clamp(30px,5vh,60px) 0;flex-wrap:wrap}
.cta h3{font-weight:300;font-size:clamp(24px,2.6vw,48px);margin:0}.cta p{margin:.3em 0 0}
@media(max-width:800px){.blk,.cards,.cards.two{grid-template-columns:1fr}}
.pic.wide{aspect-ratio:16/9}.pic.wide img{height:100%;object-fit:cover;object-position:50% 22%}
.lang{margin-left:auto;font-size:.85em;color:var(--line)}.lang a{opacity:.7}.lang b{font-weight:500;color:var(--ink)}
nav{margin:0 auto 0 4vw;padding-right:0}
footer small a{text-decoration:underline;text-underline-offset:3px}
.text h3{font-weight:400;margin:1.6em 0 .3em}
.intro.r{margin-left:auto;text-align:right}
@media(min-width:801px){.pg h1.one{white-space:nowrap}}
.svcl details{border-top:1px solid var(--line)}.svcl details:last-child{border-bottom:1px solid var(--line)}
.svcl summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:24px 0;font-weight:300;text-transform:uppercase;font-size:clamp(22px,2.4vw,44px);line-height:1.1}
.svcl summary::-webkit-details-marker{display:none}.svcl summary span{flex:1}
.svcl summary b{font-weight:400;font-size:.5em;text-transform:none;text-align:right}
.svcl summary:after{content:"+";font-size:.8em}.svcl details[open] summary:after{content:"–"}
.svcl .body{display:grid;grid-template-columns:1fr 1fr;gap:6vw;padding:0 0 40px}
.svcl .body ul{margin:.6em 0 1.6em;padding:0;list-style:none}.svcl .body li{padding:.3em 0;border-bottom:1px solid #ddd8cf}
.svcl .n{color:var(--line)}
.steps{display:grid;grid-template-columns:1fr 1fr;gap:40px 6vw;margin:0 0 40px}
.steps small{color:var(--line)}.steps h3{font-weight:300;text-transform:uppercase;font-size:clamp(22px,2.2vw,40px);margin:.2em 0 .5em}.steps p{margin:0}
@media(max-width:800px){.svcl .body,.steps{grid-template-columns:1fr}.svcl summary{flex-wrap:wrap}}
@media(max-width:800px){header{flex-wrap:wrap;row-gap:6px}nav{display:flex;order:3;width:100%;margin:0;padding:0;gap:22px;font-size:.9em;overflow-x:auto;white-space:nowrap}main{padding-top:40px}}
/* Point of view */
.pov{width:100vw;margin-left:calc(50% - 50vw);margin-top:clamp(90px,14vh,170px);display:grid;grid-template-columns:21fr 42.5fr 36.5fr;color:var(--ink)}
.pov-side{background-size:cover;background-position:center}
.pov-l{background-image:url(images/pov-left.jpg)}.pov-r{background-image:url(images/pov-right.jpg)}
.pov-panel{background:var(--bg);padding:clamp(60px,9vh,110px) clamp(20px,2vw,32px) clamp(80px,12vh,140px)}
.pov-title{font-weight:500;text-transform:none;font-size:clamp(52px,6vw,112px);line-height:.72;letter-spacing:-.01em;margin:0 0 clamp(90px,14vh,170px);max-width:none}
.pov-title span{display:block}
.pov-rule{max-width:34em;margin:0 0 clamp(90px,15vh,180px)}
.pov-rule:last-child{margin-bottom:0}
.pov-rule.r{margin-left:auto;text-align:right}
.pov-rule h3{font-weight:400;text-transform:none;font-size:clamp(22px,1.9vw,34px);margin:0 0 .7em}
.pov-rule p{margin:0;color:var(--ink);opacity:.85}
@media(max-width:800px){.pov{grid-template-columns:1fr}.pov-l{display:none}.pov-r{height:60vh;order:-1}.pov-panel{padding:60px 6vw 80px}}
.pov-title img{width:min(100%,350px);height:auto}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.pair img{border-radius:var(--r);background:#fff}
@media(max-width:800px){.pair{grid-template-columns:1fr}}
@media(max-width:800px){nav{gap:0;justify-content:space-between;font-size:.82em;overflow:visible}}
/* Covers in listings: black & white with film grain; colour inside projects */
.hero .pic,.proj .pic,.card .ph{position:relative}
.hero .pic img,.proj .pic img,.card .ph img{filter:grayscale(1) contrast(1.02) brightness(1.03);transition:filter .6s ease}
.hero .pic:after,.proj .pic:after,.card .ph:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;mix-blend-mode:multiply;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .45  0 0 0 0 .45  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E")}
.proj:hover .pic img,.card:hover .ph img{filter:none}
/* No rounded corners anywhere */
:root{--r:0}
*,*:before,*:after{border-radius:0!important}
/* Buttons: text with underline only */
.btn,.all{border:none!important;background:none!important;padding:0!important;color:inherit;text-decoration:underline;text-underline-offset:.32em;text-decoration-thickness:1px}
.btn:hover,.all:hover{background:none!important;color:var(--ink);text-decoration-thickness:2px}
.all{display:table;margin-left:auto;margin-right:auto}
.svc .btn{margin-left:0}
.btn{white-space:nowrap;flex-shrink:0}
/* Solid header, no fade */
header{background:var(--bg)!important}
/* Mobile: both photo halves side by side above the rules, faces in frame */
@media(max-width:800px){.pov{grid-template-columns:1fr 1fr}.pov-l{display:block}.pov-l,.pov-r{height:62vh;order:0;background-position:50% 12%}.pov-panel{grid-column:1/-1;order:1}}