@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#f4f3ef;
  --text:#111;
  --muted:#777;
  --line:#d8d7d2;
  --pad:clamp(20px,4vw,64px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;font-size:14px;line-height:1.5}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.site-header{position:fixed;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:22px var(--pad);mix-blend-mode:multiply}
.brand{font-size:15px;font-weight:700;letter-spacing:.18em}
.nav{display:flex;gap:28px;font-size:11px;font-weight:600;letter-spacing:.14em}
.nav a:hover,.scroll-link:hover,.contact-link:hover{opacity:.5}
.menu-toggle{display:none;font-size:11px;letter-spacing:.14em}
.hero{min-height:100svh;padding:110px var(--pad) 48px;display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(30px,6vw,100px);align-items:end}
.hero-copy{padding-bottom:4vh}
.eyebrow{font-size:10px;letter-spacing:.18em;font-weight:600;margin:0 0 18px}
.hero h1{font-size:clamp(72px,13vw,190px);line-height:.78;letter-spacing:-.075em;margin:0 0 34px;font-weight:600}
.intro{font-size:14px;line-height:1.7;max-width:330px;margin:0 0 42px}
.scroll-link{font-size:10px;letter-spacing:.15em;font-weight:600}
.hero-image{height:min(74vh,780px)}
.placeholder{position:relative;overflow:hidden;background:#d8d5cd;display:flex;align-items:flex-end;justify-content:flex-start}
.placeholder:before,.placeholder:after{content:"";position:absolute;border-radius:50%;filter:blur(1px)}
.placeholder:before{width:70%;height:70%;right:-18%;top:-12%;background:linear-gradient(135deg,#b7b1a6,#eeeae0)}
.placeholder:after{width:55%;height:55%;left:-20%;bottom:-18%;background:linear-gradient(135deg,#8d8a84,#c8c3b8)}
.placeholder span{position:relative;z-index:2;padding:16px;font-size:10px;letter-spacing:.15em;font-weight:600}
.p-hero{background:#c9c6be}
.section{padding:130px var(--pad) 70px}
.section-head{display:flex;justify-content:space-between;gap:30px;align-items:flex-end;margin-bottom:48px}
.section h2{font-size:clamp(42px,7vw,92px);line-height:.9;letter-spacing:-.06em;margin:0;font-weight:600}
.filters{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;max-width:800px}
.filter{font-size:9px;letter-spacing:.12em;padding:7px 10px;border:1px solid transparent}
.filter.active,.filter:hover{border-color:var(--text)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,28px)}
.card{grid-column:span 4;cursor:pointer}
.card.wide{grid-column:span 8}
.card.tall .placeholder{aspect-ratio:4/5}
.card:not(.tall) .placeholder{aspect-ratio:4/3}
.card.wide .placeholder{aspect-ratio:16/9}
.card:hover .placeholder span{transform:translateY(-4px)}
.card .placeholder span{transition:transform .25s}
.meta{display:flex;justify-content:space-between;padding:10px 0 22px;font-size:9px;letter-spacing:.12em}
.p1{background:#d1cec7}.p2{background:#bcb9b2}.p3{background:#d9d7d0}.p4{background:#b8b6b1}.p5{background:#cec9bf}.p6{background:#dad6cd}.p7{background:#c3c0ba}.p8{background:#d5d1c9}
.project-section{padding-top:150px}
.project-row{display:grid;grid-template-columns:80px 1fr 50px;gap:25px;align-items:center;border-top:1px solid var(--line);padding:30px 0}
.project-row:last-child{border-bottom:1px solid var(--line)}
.project-row:hover{padding-left:12px}
.project-no{font-size:10px;color:var(--muted)}
.project-row h3{font-size:clamp(22px,4vw,54px);letter-spacing:-.04em;margin:0;font-weight:500}
.project-row p{margin:5px 0 0;color:var(--muted);font-size:12px}
.arrow{text-align:right;font-size:24px}
.about-section{display:grid;grid-template-columns:1fr 1fr;gap:80px;border-top:1px solid var(--line);margin-top:100px}
.about-copy{max-width:560px;font-size:clamp(18px,2.5vw,30px);line-height:1.35}
.about-copy .muted{font-size:13px;line-height:1.7;color:var(--muted);margin-top:34px}
.contact-section{min-height:75svh;display:flex;flex-direction:column;justify-content:flex-end}
.contact-section h2{font-size:clamp(56px,10vw,145px);margin-bottom:55px}
.contact-link{font-size:13px;border-bottom:1px solid var(--text);padding-bottom:5px;width:max-content}
.footer{border-top:1px solid var(--line);padding:25px var(--pad);display:flex;justify-content:space-between;font-size:9px;letter-spacing:.12em;color:var(--muted)}
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(17,17,17,.96);display:none;align-items:center;justify-content:center;padding:8vh 8vw}
.lightbox.open{display:flex}
.lightbox-image{width:min(1100px,90vw);height:min(75vh,800px);background:#555;position:relative;overflow:hidden}
.lightbox-image:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#9d9b97,#d8d5cf 45%,#6e6b67)}
.lightbox-label{position:absolute;left:8vw;bottom:4vh;color:#fff;font-size:10px;letter-spacing:.16em}
.lightbox-close{position:absolute;top:24px;right:32px;color:#fff;font-size:34px;z-index:2;font-weight:300}
@media(max-width:800px){
  .site-header{padding:18px 20px}
  .nav{display:none;position:absolute;top:58px;right:20px;background:var(--bg);padding:14px 18px;border:1px solid var(--line);flex-direction:column;gap:14px}
  .nav.open{display:flex}
  .menu-toggle{display:block}
  .hero{min-height:auto;padding:105px 20px 70px;display:flex;flex-direction:column;align-items:stretch;gap:45px}
  .hero h1{font-size:23vw}
  .hero-image{height:auto;aspect-ratio:4/5}
  .section{padding:90px 20px 50px}
  .section-head{display:block}
  .filters{justify-content:flex-start;margin-top:28px}
  .grid{display:block}
  .card{margin-bottom:25px}
  .card .placeholder,.card.wide .placeholder,.card.tall .placeholder{aspect-ratio:4/3}
  .project-section{padding-top:100px}
  .project-row{grid-template-columns:42px 1fr 30px;gap:10px}
  .about-section{display:block}
  .about-copy{margin-top:40px}
  .contact-section{min-height:65svh}
  .contact-section h2{font-size:17vw}
  .footer{gap:12px;flex-wrap:wrap}
}