:root{
  --black:#000; --ink:#161616; --grey-1:#3A3A3A; --grey-2:#6E6E6E; --grey-3:#A8A8A8; --line:#DADADA; --paper:#F7F7F5; --white:#fff;
  --clay:#A86F55; --clay-l:#E9DCD3;
  --gut:clamp(20px,4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Familjen Grotesk",system-ui,sans-serif;background:var(--paper);color:var(--ink);font-size:17px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
.wrap{padding-inline:var(--gut);max-width:1600px;margin-inline:auto}
h1,h2,h3{font-weight:400;letter-spacing:-.025em;line-height:1.02}
.display{font-size:clamp(3rem,9vw,9.5rem);letter-spacing:-.045em;line-height:.92}
h2{font-size:clamp(2rem,4.4vw,4rem)}
h3{font-size:1.5rem;letter-spacing:-.015em}
.muted{color:var(--grey-2)}
.small{font-size:.88rem}
.mono{font-variant-numeric:tabular-nums}
.bw img,.bw{filter:grayscale(1) contrast(1.04)}
.link{text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.link:hover{color:var(--clay)}
.btn{display:inline-flex;align-items:center;gap:.6em;background:var(--ink);color:var(--white);border:0;font:inherit;font-size:1rem;padding:1em 1.6em;text-decoration:none;cursor:pointer;transition:background .2s}
.btn:hover{background:var(--clay)}
.btn.clay{background:var(--clay)}
.btn.clay:hover{background:var(--ink)}

/* header */
header.site{position:sticky;top:0;z-index:50;background:rgba(247,247,245,.92);backdrop-filter:blur(10px);transition:border-color .2s;border-bottom:1px solid transparent}
header.site.scrolled{border-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:1.15rem;letter-spacing:-.01em}
.logo svg{width:30px;height:30px}
.nav ul{display:flex;gap:36px;list-style:none}
.nav ul a{text-decoration:none;color:var(--grey-1)}
.nav ul a:hover{color:var(--ink)}
.nav ul a[aria-current=page]{color:var(--ink);box-shadow:inset 0 -1px 0 var(--clay)}
.burger{display:none;background:none;border:0;cursor:pointer;font:inherit;font-size:1rem;padding:10px 0;color:var(--ink)}

/* hero */
.hero{padding:70px 0 0}
.hero .top{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;margin-bottom:48px}
.hero .top p{max-width:34ch;color:var(--grey-1);font-size:1.1rem}
.hero-img{position:relative;height:min(78vh,820px);overflow:hidden}
.hero-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.hero-cap{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--line);font-size:.9rem;color:var(--grey-2);flex-wrap:wrap}
.hero-cap b{color:var(--ink);font-weight:500}

section{padding:120px 0}
.statement{display:grid;grid-template-columns:1fr 2fr;gap:40px}
.statement p.big{font-size:clamp(1.6rem,2.9vw,2.6rem);line-height:1.22;letter-spacing:-.02em;max-width:28ch}
.statement .cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:56px;color:var(--grey-1);max-width:820px}

/* project index list (hover preview) */
.plist{border-top:1px solid var(--ink)}
.plist-wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:start}
.prow{display:grid;grid-template-columns:70px 1fr auto auto;gap:24px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:padding .25s,color .2s}
.prow .no{color:var(--grey-3);font-size:.9rem}
.prow .t{font-size:clamp(1.4rem,2.3vw,2.1rem);letter-spacing:-.02em}
.prow .ty,.prow .yr{color:var(--grey-2);font-size:.95rem}
.prow:hover,.prow.on{padding-left:14px}
.prow:hover .t,.prow.on .t{color:var(--clay)}
.preview{position:sticky;top:110px;aspect-ratio:4/5;overflow:hidden;background:#ddd}
.preview img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:opacity .35s}
.preview .pc{position:absolute;left:0;bottom:0;background:var(--paper);padding:10px 14px;font-size:.88rem}

/* services row */
.svcs{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink)}
.svcs div{padding:30px 28px 0 0}
.svcs div+div{padding-left:28px;border-left:1px solid var(--line)}
.svcs p{color:var(--grey-1);margin-top:10px;font-size:.98rem}

/* full image band */
.band{position:relative;height:80vh;max-height:760px;overflow:hidden}
.band img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.band blockquote{position:absolute;right:var(--gut);bottom:var(--gut);max-width:520px;background:var(--paper);padding:34px;font-size:1.45rem;line-height:1.3;letter-spacing:-.015em}
.band cite{display:block;font-style:normal;font-size:.9rem;color:var(--grey-2);margin-top:14px;letter-spacing:0}

/* recognition */
.recog{display:grid;grid-template-columns:1fr 2fr;gap:40px}
.recog ul{list-style:none;border-top:1px solid var(--ink)}
.recog li{display:grid;grid-template-columns:90px 1fr auto;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.recog li span:last-child{color:var(--grey-2)}

/* cta */
.cta{background:var(--ink);color:var(--paper);padding:120px 0}
.cta .wrap{display:grid;grid-template-columns:2fr 1fr;gap:40px;align-items:end}
.cta .display{font-size:clamp(2.8rem,7vw,7rem)}
.cta p{color:var(--grey-3);margin-bottom:26px;max-width:36ch}
.cta .btn{background:var(--clay)}
.cta .btn:hover{background:var(--paper);color:var(--ink)}

/* footer */
footer{background:var(--ink);color:var(--grey-3);border-top:1px solid #2c2c2c;padding:60px 0 30px;font-size:.93rem}
footer .grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;padding-bottom:50px}
footer h4{font-weight:400;color:var(--paper);margin-bottom:12px}
footer a{display:block;text-decoration:none;padding:2px 0}
footer a:hover{color:var(--paper)}
footer .logo{color:var(--paper)}
footer .bottom{border-top:1px solid #2c2c2c;padding-top:22px;font-size:.84rem}

/* page head */
.phead{padding:90px 0 60px}
.phead .row{display:grid;grid-template-columns:2fr 1fr;gap:40px;align-items:end}
.phead p{color:var(--grey-1);font-size:1.1rem;max-width:40ch}

/* portfolio */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);padding:16px 0;margin-bottom:40px}
.filt{display:flex;gap:26px;flex-wrap:wrap}
.filt button,.views button{background:none;border:0;font:inherit;font-size:1rem;color:var(--grey-2);cursor:pointer;padding:4px 0}
.filt button sup{font-size:.7rem;margin-left:3px;color:var(--grey-3)}
.filt button[aria-pressed=true],.views button[aria-pressed=true]{color:var(--ink);box-shadow:inset 0 -1px 0 var(--clay)}
.views{display:flex;gap:18px}
.pgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:56px 28px}
.card{text-decoration:none;display:block}
.card .im{overflow:hidden;background:#e5e5e5;aspect-ratio:4/3}
.card img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .5s,transform .8s}
.card:hover img{filter:grayscale(0);transform:scale(1.02)}
.card .meta{display:flex;justify-content:space-between;gap:14px;margin-top:14px}
.card .meta h3{font-size:1.35rem}
.card .meta span{color:var(--grey-2);font-size:.92rem;white-space:nowrap}
.card .loc{color:var(--grey-2);font-size:.92rem;margin-top:2px}
.pgrid .card:nth-child(6n+1){grid-column:span 7}
.pgrid .card:nth-child(6n+2){grid-column:span 5}
.pgrid .card:nth-child(6n+2) .im{aspect-ratio:4/5}
.pgrid .card:nth-child(6n+3){grid-column:span 4}
.pgrid .card:nth-child(6n+4){grid-column:span 4}
.pgrid .card:nth-child(6n+5){grid-column:span 4}
.pgrid .card:nth-child(6n+6){grid-column:2 / span 10}
.pgrid .card:nth-child(6n+6) .im{aspect-ratio:21/9}
.pgrid .card.hide{display:none}
.pgrid.filtered .card{grid-column:span 4!important}
.pgrid.filtered .card .im{aspect-ratio:4/3!important}
.plist-view{display:none}
.as-list .pgrid{display:none}
.as-list .plist-view{display:block}
.empty{display:none;padding:40px 0;color:var(--grey-2)}

/* case study */
.case-hero{height:min(86vh,900px);overflow:hidden}
.case-hero img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.facts{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--ink);margin-top:40px}
.facts div{padding:18px 18px 18px 0;border-bottom:1px solid var(--line)}
.facts dt{color:var(--grey-2);font-size:.88rem}
.facts dd{font-size:1.1rem}
.narr{display:grid;grid-template-columns:1fr 2fr;gap:40px}
.narr .txt p{max-width:62ch;margin-bottom:1.1em;color:var(--grey-1);font-size:1.08rem}
.narr .txt p.big{font-size:1.6rem;line-height:1.3;color:var(--ink);letter-spacing:-.015em;max-width:30ch}
.pair{display:grid;grid-template-columns:5fr 7fr;gap:28px}
.pair img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.pair figure:first-child img{aspect-ratio:4/5}
figcaption{font-size:.86rem;color:var(--grey-2);margin-top:10px}
.plan{background:var(--white);border:1px solid var(--line);padding:30px}
.plan svg{width:100%;height:auto}
.plan-tabs{display:flex;gap:24px;margin-bottom:18px}
.plan-tabs button{background:none;border:0;font:inherit;color:var(--grey-2);cursor:pointer;padding:4px 0}
.plan-tabs button[aria-selected=true]{color:var(--ink);box-shadow:inset 0 -1px 0 var(--clay)}
.plan svg .room{transition:fill .2s}
.plan svg .room:hover{fill:var(--clay-l)}
.next{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;text-decoration:none;border-top:1px solid var(--ink);padding-top:28px}
.next img{aspect-ratio:16/9;object-fit:cover;width:100%;filter:grayscale(1);transition:filter .4s}
.next:hover img{filter:none}

/* studio */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.team img{aspect-ratio:3/4;object-fit:cover;width:100%;filter:grayscale(1)}
.team h3{font-size:1.2rem;margin-top:14px}
.team p{color:var(--grey-2);font-size:.93rem}
.values{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.values div{padding:28px 28px 0 0}
.values div+div{padding-left:28px;border-left:1px solid var(--line)}
.values p{color:var(--grey-1);margin-top:10px}
.stages{list-style:none;border-top:1px solid var(--ink)}
.stages li{display:grid;grid-template-columns:120px 1fr 1.4fr auto;gap:24px;padding:24px 0;border-bottom:1px solid var(--line);align-items:baseline}
.stages .n{color:var(--clay)}
.stages p{color:var(--grey-1)}
.stages .w{color:var(--grey-2);font-size:.92rem}

/* contact */
.ct-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:80px}
.fg{margin-bottom:26px}
.fg label,.fg legend{display:block;font-size:.92rem;color:var(--grey-2);margin-bottom:6px}
.fg input,.fg select,.fg textarea{width:100%;font:inherit;font-size:1.15rem;border:0;border-bottom:1px solid var(--grey-3);background:transparent;padding:.5em 0;color:var(--ink);border-radius:0}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--clay)}
.fg textarea{min-height:110px;resize:vertical}
.fg.err input,.fg.err select,.fg.err textarea{border-color:#A3321F}
.fg .em{display:none;color:#A3321F;font-size:.85rem;margin-top:6px}
.fg.err .em{display:block}
fieldset.fg{border:0}
.seg{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--ink);width:fit-content;max-width:100%;position:relative}
.seg input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.seg label{margin:0;padding:.6em 1.1em;cursor:pointer;color:var(--ink);font-size:.98rem}
.seg label+input+label{border-left:1px solid var(--ink)}
.seg input:checked+label{background:var(--ink);color:var(--paper)}
.seg input:focus-visible+label{outline:2px solid var(--clay);outline-offset:-4px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.ok{display:none;margin-top:18px;padding:16px 18px;background:var(--clay-l);color:var(--ink)}
.ok.show{display:block}
.addr dl{border-top:1px solid var(--ink)}
.addr dl div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.addr dt{color:var(--grey-2)}
.mapbox{margin-top:30px;background:#ECECEA;aspect-ratio:4/3}
.mapbox svg{width:100%;height:100%;display:block}
.qa{border-bottom:1px solid var(--line)}
.qa button{width:100%;text-align:left;background:none;border:0;font:inherit;font-size:1.15rem;padding:20px 40px 20px 0;cursor:pointer;position:relative;color:var(--ink)}
.qa button::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:1.5rem;color:var(--grey-2);transition:transform .25s}
.qa button[aria-expanded=true]::after{transform:translateY(-50%) rotate(45deg);color:var(--clay)}
.qa .a{max-height:0;overflow:hidden;transition:max-height .3s}
.qa .a p{padding-bottom:20px;color:var(--grey-1);max-width:64ch}

@media (max-width:1020px){
  .nav ul{display:none}
  .nav ul.open{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:76px;background:var(--paper);padding:10px var(--gut) 30px;gap:0;border-bottom:1px solid var(--line)}
  .nav ul.open a{display:block;padding:14px 0;font-size:1.6rem;letter-spacing:-.02em;border-bottom:1px solid var(--line);color:var(--ink)}
  .burger{display:block}
  .hero .top,.statement,.plist-wrap,.recog,.cta .wrap,.phead .row,.narr,.ct-grid{grid-template-columns:1fr}
  .statement .cols{grid-template-columns:1fr}
  .preview{display:none}
  .svcs,.values{grid-template-columns:1fr 1fr}
  .svcs div,.values div{padding:24px 20px 24px 0!important;border-left:0!important;border-bottom:1px solid var(--line)}
  .facts{grid-template-columns:repeat(3,1fr)}
  .team{grid-template-columns:1fr 1fr}
  .pgrid{grid-template-columns:1fr 1fr}
  .pgrid .card{grid-column:auto!important}
  .pgrid .card .im{aspect-ratio:4/3!important}
  .stages li{grid-template-columns:90px 1fr;}
  .stages li p{grid-column:2}
  .stages .w{grid-column:2}
  footer .grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  section{padding:76px 0}
  .hero{padding-top:40px}
  .hero-img{height:60vh}
  .prow{grid-template-columns:44px 1fr;gap:12px}
  .prow .ty{grid-column:2}
  .prow .yr{display:none}
  .svcs,.values,.team{grid-template-columns:1fr}
  .band{height:auto;max-height:none}
  .band img{height:56vh}
  .band blockquote{position:static;max-width:none;padding:28px var(--gut);font-size:1.2rem}
  .recog li{grid-template-columns:60px 1fr}
  .recog li span:last-child{grid-column:2}
  .pgrid{gap:40px;grid-template-columns:1fr}
  .pgrid .card{grid-column:1 / -1!important}
  .facts{grid-template-columns:1fr 1fr}
  .pair,.next{grid-template-columns:1fr}
  .plan{padding:16px}
  .frow{grid-template-columns:1fr}
  .addr dl div{grid-template-columns:90px 1fr}
  footer .grid{grid-template-columns:1fr}
  .stages li{grid-template-columns:1fr;gap:6px}
  .stages li p,.stages .w{grid-column:1}
  .cta{padding:80px 0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}