:root{--navy:#172126;--ink:#202829;--white:#fafaf7;--sand:#e9e4da;--red:#b64232;--line:#cacbc5;--serif:'Playfair Display',serif;--sans:'Manrope',sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font:16px/1.65 var(--sans)}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
header{height:92px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 3.5vw;border-bottom:1px solid var(--line);background:var(--white);position:relative;z-index:10}
.identity{display:flex;align-items:center;gap:11px}
.identity img{width:56px;height:56px;object-fit:contain}
.identity span{display:flex;flex-direction:column;line-height:1}
.identity b{font:500 27px var(--serif)}
.identity small{font-size:8px;letter-spacing:.19em;margin-top:5px}
header .identity span{display:block}
header .identity b{font:500 21px/1.15 var(--serif);letter-spacing:0;white-space:nowrap}
nav{display:flex;gap:2.5vw;font-size:13px;font-weight:600}
nav a:hover{color:var(--red)}
.header-cta{justify-self:end;font-size:13px;font-weight:600;border-bottom:1px solid;padding-bottom:2px}
.menu{display:none;border:0;background:none;font:600 13px var(--sans)}
.cover{min-height:720px;height:calc(100vh - 92px);display:grid;grid-template-columns:47% 53%;position:relative;background:var(--navy);color:#fff}
.cover-copy{padding:8vh 6vw 6vh;display:flex;flex-direction:column;justify-content:space-between}
.kicker{text-transform:uppercase;font-size:11px;letter-spacing:.2em;font-weight:600;margin:0 0 24px}
.cover h1{font:500 clamp(58px,6.8vw,106px)/.95 var(--serif);letter-spacing:-.045em;margin:0}
.cover h1 em{font-weight:500;color:#cdd8d2}
.lead{max-width:520px;color:rgba(255,255,255,.72);font-size:18px;margin:35px 0 0}
.cover-actions{display:flex;align-items:center;gap:28px;font-size:13px}
.button{display:inline-flex;padding:15px 21px;border:0;font:600 13px var(--sans);cursor:pointer}
.button.light{background:#fff;color:var(--ink)}
.button.dark{background:var(--navy);color:#fff}
.button:hover{background:var(--red);color:#fff}
.cover-photo{margin:0;position:relative;overflow:hidden}
.cover-photo img{filter:saturate(.82);object-position:center}
.cover-photo figcaption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.63));padding:80px 30px 24px;display:flex;justify-content:space-between;text-transform:uppercase;font-size:10px;letter-spacing:.15em}
.cover aside{position:absolute;left:47%;top:50%;transform:translate(-50%,-50%);background:var(--red);width:120px;height:150px;padding:21px;color:#fff;display:flex;flex-direction:column}
.cover aside b{font-size:9px;letter-spacing:.2em}
.cover aside strong{font:500 35px var(--serif);margin:9px 0}
.cover aside span{font-size:10px;line-height:1.4}
.pad{padding:125px 6vw}
.section-no{font-size:11px;letter-spacing:.12em;color:#818885}
.statement{display:grid;grid-template-columns:70px 1.35fr .65fr;gap:5vw;align-items:start}
.statement h2,.projects h2,.expertise h2,.story h2,.contact h2{font:500 clamp(43px,5.2vw,78px)/1.04 var(--serif);letter-spacing:-.035em;margin:0}
.statement-copy{padding-top:43px;color:#5b6360}
.statement-copy p{font-size:18px;margin:0 0 30px}
.line-link{font-size:13px;font-weight:600;border-bottom:1px solid;padding-bottom:3px}
.projects{background:var(--sand)}
.projects-head{display:grid;grid-template-columns:70px 1fr auto;gap:5vw;align-items:end;margin-bottom:65px}
.project-grid{display:grid;grid-template-columns:1.35fr .65fr;grid-template-rows:340px 340px;gap:16px}
.project-grid figure{margin:0;position:relative;overflow:hidden;background:#b7bab6}
.project-a{grid-row:span 2}
.project-grid img{transition:transform .5s}
.project-grid figure:hover img{transform:scale(1.025)}
.project-grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:55px 22px 19px;background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff;display:flex;justify-content:space-between;align-items:end}
.project-grid figcaption b{font:500 22px var(--serif)}
.project-grid figcaption span{font-size:9px;text-transform:uppercase;letter-spacing:.15em}
.expertise{display:grid;grid-template-columns:.8fr 1.2fr;gap:10vw}
.expertise-title>p:not(.kicker){color:#68706d;max-width:430px}
.expertise-list{border-top:1px solid var(--line)}
.expertise-list article{display:grid;grid-template-columns:40px 1fr 1fr;gap:22px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line)}
.expertise-list article>span{font-size:10px;color:#8a908d}
.expertise-list h3{font:500 26px var(--serif);margin:0}
.expertise-list h3 a{display:inline-block;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.expertise-list h3 a:hover{color:var(--red);border-color:var(--red)}
.expertise-list p{font-size:13px;color:#68706d;margin:0}
.story{display:grid;grid-template-columns:1fr 1fr;min-height:760px;background:var(--navy);color:#fff}
.story-photo{min-height:600px}
.story-copy{padding:110px 7vw}
.story-copy .section-no{color:rgba(255,255,255,.45)}
.story-copy h2{margin-bottom:35px}
.story-copy>p:not(.kicker){color:rgba(255,255,255,.68)}
.values{display:grid;grid-template-columns:1fr 1fr;margin-top:45px;border-top:1px solid rgba(255,255,255,.2)}
.values span{padding:15px 0;border-bottom:1px solid rgba(255,255,255,.2);font-size:12px}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:10vw}
.direct{display:flex;flex-direction:column;margin-top:45px;font-size:15px}
.direct a:first-child{font:500 27px var(--serif)}
form{display:flex;flex-direction:column;gap:20px;padding-top:35px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:600}
input,textarea{width:100%;display:block;border:0;border-bottom:1px solid #9ea29f;background:transparent;padding:10px 0;font:16px var(--sans);border-radius:0}
input:focus,textarea:focus{outline:0;border-color:var(--red)}
textarea{resize:vertical}
form .button{align-self:flex-start}
form small{font-size:10px;color:#777}
footer{background:#0f1518;color:#fff;display:grid;grid-template-columns:1fr 1fr 1fr;gap:5vw;align-items:center;padding:50px 6vw}
footer .identity b{color:#fff}
footer p{font-size:12px;color:rgba(255,255,255,.55);max-width:350px}
footer>div:last-child{justify-self:end;display:flex;flex-direction:column;align-items:flex-end;font-size:11px;color:rgba(255,255,255,.6)}
footer a{color:#fff}
@media(max-width:850px){header{height:78px;grid-template-columns:1fr auto;padding:0 20px}
.identity img{width:46px;height:46px}
header .identity b{font-size:17px}
.menu{display:block}
.header-cta{display:none}
nav{display:none;position:absolute;top:78px;left:0;right:0;background:var(--white);padding:24px;flex-direction:column;border-bottom:1px solid var(--line);color:var(--ink)}
nav.open{display:flex}
.cover{height:auto;min-height:0;grid-template-columns:1fr}
.cover-copy{min-height:570px;padding:65px 25px 45px}
.cover h1{font-size:59px}
.cover-photo{height:430px}
.cover aside{left:auto;right:18px;top:525px;transform:none;width:100px;height:130px}
.pad{padding:80px 24px}
.statement,.projects-head,.expertise,.contact{grid-template-columns:1fr;gap:28px}
.section-no{display:none}
.projects-head{align-items:start}
.projects-head .line-link{justify-self:start}
.project-grid{grid-template-columns:1fr;grid-template-rows:430px 300px 300px}
.project-a{grid-row:span 1}
.expertise-list article{grid-template-columns:30px 1fr}
.expertise-list p{grid-column:2}
.story{grid-template-columns:1fr}
.story-photo{min-height:460px}
.story-copy{padding:75px 24px}
.row{grid-template-columns:1fr}
footer{grid-template-columns:1fr;gap:25px}
footer>div:last-child{justify-self:start;align-items:flex-start}
}
@media(max-width:430px){.cover h1{font-size:51px}
.cover-copy{min-height:550px}
.cover-photo{height:350px}
.cover aside{top:505px}
.project-grid{grid-template-rows:360px 280px 280px}
.expertise-list h3{font-size:23px}
.values{grid-template-columns:1fr}
}
.gallery-intro{max-width:520px;color:#626966;margin:24px 0 0;font-size:15px}
.portfolio-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.portfolio-grid>a{display:block;min-width:0}
.portfolio-grid .wide,.portfolio-grid .tall{grid-column:span 1;grid-row:span 1}
.portfolio-grid figure{margin:0;position:relative;aspect-ratio:1/1;overflow:hidden;background:#b8b8b3}
.portfolio-grid img{object-fit:contain;background:#111719}
.portfolio-grid img{filter:saturate(.9)}
.portfolio-grid figcaption{position:absolute;inset:auto 0 0;padding:60px 18px 16px;background:linear-gradient(transparent,rgba(8,14,16,.78));color:#fff;display:flex;justify-content:space-between;align-items:end;gap:14px}
.portfolio-grid figcaption b{font:500 19px var(--serif)}
.portfolio-grid figcaption span{font-size:9px;text-transform:uppercase;letter-spacing:.12em;text-align:right}
@media(max-width:1050px){.portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.portfolio-grid figcaption{flex-direction:column;align-items:flex-start}.portfolio-grid figcaption span{text-align:left}}
@media(max-width:430px){.portfolio-grid{grid-template-columns:1fr}}
