:root{--black:#111;--off:#efeee9;--grey:#777;--line:#c9c8c2}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--off);color:var(--black);font-family:Arial,sans-serif;line-height:1.55}
.progress{position:fixed;z-index:99;top:0;left:0;height:3px;background:#111;width:0}
header{position:absolute;z-index:5;top:0;width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:26px 4vw;border-bottom:1px solid rgba(255,255,255,.4);color:#fff}
a{color:inherit;text-decoration:none}.logo{font-weight:900;letter-spacing:.12em}.logo span{display:block;font-size:8px;font-weight:400;letter-spacing:.24em}nav{display:flex;gap:36px;font-size:10px;text-transform:uppercase;letter-spacing:.16em}.enquire{justify-self:end;font-size:10px;text-transform:uppercase;letter-spacing:.16em}
.hero{min-height:100vh;padding:150px 4vw 50px;background:#111;color:#fff}.hero-grid{display:grid;grid-template-columns:130px 1fr 280px;gap:40px;align-items:end}.index,.kicker,.summary,small,.section-title span,.statement>span,.contact>span{font-size:9px;letter-spacing:.15em;text-transform:uppercase}.index,.kicker,.summary{color:#aaa}.kicker{margin-bottom:22px}
h1{font:400 clamp(60px,8vw,128px)/.9 Georgia,serif;letter-spacing:-.05em}h1 i{font-weight:400;color:#aaa}.summary{line-height:1.8}.hero figure{height:46vh;margin-top:55px;overflow:hidden}.hero figure img,.project figure img{width:100%;height:115%;object-fit:cover;transform:translateY(var(--shift,0))}
figcaption{display:flex;justify-content:space-between;margin-top:12px;font-size:9px;letter-spacing:.12em;text-transform:uppercase}
.statement,.work,.method{padding:120px 7vw}.statement{display:grid;grid-template-columns:150px 1.4fr .6fr;gap:55px;border-bottom:1px solid var(--line)}h2{font:400 clamp(42px,6vw,82px)/1.03 Georgia,serif;letter-spacing:-.04em}.statement p{color:var(--grey)}
.studio-profile{display:grid;grid-template-columns:1.1fr .75fr;gap:8vw;align-items:center;padding:120px 7vw;background:#f7f6f1;border-bottom:1px solid var(--line)}
.studio-profile .profile-index{font-size:9px;letter-spacing:.15em;text-transform:uppercase}.studio-profile h2{margin:24px 0}.studio-profile>div:first-child>p{max-width:650px;color:var(--grey)}
.studio-profile .company-illustration{color:#111;border:1px solid var(--line)}
.section-title{display:grid;grid-template-columns:150px 1fr;gap:55px;margin-bottom:80px}.work{overflow:hidden}.project{display:grid;grid-template-columns:60px 1.25fr .65fr;gap:35px;align-items:end;margin-bottom:100px}.project.reverse{grid-template-columns:60px .65fr 1.25fr}.project.reverse figure{grid-column:3}.project.reverse>div:last-child{grid-row:1;grid-column:2}.project figure{height:520px;overflow:hidden}.project-no{align-self:start;font-size:11px}.project h3,.expert-grid h3,.method h3{font:400 30px Georgia,serif;margin-bottom:15px}.project p{color:var(--grey);margin-bottom:25px}
.expertise{padding:120px 7vw;background:#111;color:#fff}.light span{color:#888}.expert-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #444;border-left:1px solid #444}.expert-grid article{min-height:270px;padding:30px;border-right:1px solid #444;border-bottom:1px solid #444}.expert-grid b{font-size:9px;color:#888}.expert-grid h3{margin-top:100px}.expert-grid p{color:#888;font-size:14px}
.archive{padding:120px 7vw;background:#d8d7d0}.archive-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#aaa9a3}.archive-grid figure{height:470px;overflow:hidden;background:#bbb}.archive-grid img{width:100%;height:112%;object-fit:cover;transform:translateY(var(--shift,0));filter:saturate(.75)}.archive-grid figcaption{position:relative;margin-top:-48px;padding:14px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.8));font-size:9px;letter-spacing:.12em;text-transform:uppercase}.archive-grid figcaption b{margin-right:15px;color:#ccc}
.method ol{display:grid;grid-template-columns:repeat(3,1fr);list-style:none;border-top:1px solid var(--line)}.method li{padding:30px;border-right:1px solid var(--line)}.method li span{font-size:9px}.method h3{margin-top:100px}.method p{color:var(--grey)}
.contact{padding:140px 7vw;background:#d8d7d0}.contact h2{margin:20px 0 50px}.contact a{display:flex;justify-content:space-between;padding:22px 0;border-top:1px solid #111;border-bottom:1px solid #111;text-transform:uppercase;font-size:11px;letter-spacing:.15em}
.contact .architectural-actions{justify-content:flex-start}.contact .action-link{display:inline-flex;padding:13px 18px;border:1px solid currentColor;font-size:9px;letter-spacing:.13em}.architectural-socials{margin-top:34px}
footer{display:flex;justify-content:space-between;padding:24px 4vw;background:#111;color:#888;font-size:9px;letter-spacing:.12em}
[data-reveal]{opacity:0;transform:translateY(40px);transition:.8s ease}[data-reveal].visible{opacity:1;transform:none}
@media(max-width:850px){header{grid-template-columns:1fr auto}nav{display:none}.hero-grid,.statement,.section-title{grid-template-columns:1fr}.index{display:none}.hero-grid{align-items:start}.summary{max-width:400px}.project,.project.reverse{grid-template-columns:1fr}.project .project-no{display:none}.project.reverse figure,.project.reverse>div:last-child{grid-column:auto;grid-row:auto}.expert-grid,.method ol{grid-template-columns:1fr 1fr}.hero figure{height:40vh}}
@media(max-width:850px){.studio-profile{grid-template-columns:1fr;padding:90px 7vw}}
@media(max-width:850px){.archive-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.hero{padding-top:130px}.expert-grid,.method ol,.archive-grid{grid-template-columns:1fr}.project figure{height:430px}.archive-grid figure{height:560px}.statement,.work,.method,.expertise,.archive,.contact{padding:85px 24px}footer{gap:16px;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}[data-reveal]{opacity:1;transform:none}}