:root{
  --bg:#f7f6f2;
  --text:#10100f;
  --muted:#6f6a62;
  --line:#dedbd3;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter, Helvetica, Arial, sans-serif;
  font-size:16px;
  line-height:1.7;
  overflow-x:hidden;
}
h1,h2,h3,.brand{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-weight:500;
  letter-spacing:-0.035em;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:22px clamp(20px,4vw,64px);
  background:rgba(247,246,242,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.brand{font-size:28px;line-height:1}
.nav{display:flex;gap:26px;font-size:14px}
.nav a{opacity:.88}
.nav a:hover{opacity:1;border-bottom:1px solid var(--text)}

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  padding:120px clamp(22px,5vw,70px) 58px;
  overflow:hidden;
}
.hero-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
  opacity:.72;
  filter:saturate(.92);
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(to bottom, rgba(247,246,242,.36), rgba(247,246,242,.22) 45%, rgba(247,246,242,.92) 88%, var(--bg)),
    linear-gradient(to right, rgba(247,246,242,.88), rgba(247,246,242,.35) 52%, rgba(247,246,242,.12));
}
.hero-content{max-width:1180px}
.kicker{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.20em;
  color:var(--muted);
  margin-bottom:20px;
}
.hero h1{
  margin:0 0 22px;
  font-size:clamp(76px,12vw,178px);
  line-height:.88;
}
.hero p{
  margin:0;
  max-width:680px;
  font-size:clamp(22px,2.15vw,34px);
  line-height:1.28;
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:34px;
  min-height:46px;
  padding:12px 26px;
  border:1px solid var(--text);
  border-radius:999px;
  font-size:14px;
  transition:.25s ease;
}
.button:hover{background:var(--text);color:var(--bg)}

.section{
  padding:112px clamp(22px,5vw,70px);
}
.two-col{
  display:grid;
  grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);
  gap:clamp(40px,8vw,140px);
  align-items:start;
}
.section h2{
  margin:0;
  font-size:clamp(52px,7vw,104px);
  line-height:.95;
}
.lead{
  margin-top:0;
  font-size:clamp(21px,2vw,31px);
  line-height:1.42;
}
.muted{color:var(--muted)}
.projects{
  margin-top:54px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
}
.project-card{
  border-top:1px solid var(--line);
  padding-top:18px;
}
.project-card img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  margin-bottom:18px;
}
.project-card h3{
  font-size:38px;
  line-height:1;
  margin:0 0 10px;
}
.project-card p{margin:0}

.gallery{
  display:grid;
  gap:88px;
  margin-top:68px;
}
.gallery figure{margin:0}
.gallery img{
  width:100%;
  max-height:92vh;
  object-fit:contain;
  background:#ece9e1;
}
.gallery figcaption{
  margin-top:12px;
  color:var(--muted);
  font-size:14px;
}
.quote{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(40px,6vw,88px);
  line-height:1.03;
  max-width:1120px;
  margin:0;
}
.contact-box{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:42px;
  padding:48px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.footer{
  padding:38px clamp(22px,5vw,70px);
  display:flex;
  justify-content:space-between;
  gap:18px;
  color:var(--muted);
  font-size:14px;
}

@media(max-width:900px){
  .site-header{
    position:fixed;
    padding:16px 18px;
  }
  .brand{
    font-size:22px;
    max-width:230px;
  }
  .nav{
    display:none;
  }
  .hero{
    min-height:100svh;
    padding:110px 20px 40px;
  }
  .hero::after{
    background:
      linear-gradient(to bottom, rgba(247,246,242,.18), rgba(247,246,242,.62) 48%, rgba(247,246,242,.97) 92%, var(--bg)),
      linear-gradient(to right, rgba(247,246,242,.88), rgba(247,246,242,.48));
  }
  .hero-image{
    object-position:center center;
    opacity:.64;
  }
  .kicker{
    font-size:10px;
    letter-spacing:.18em;
    margin-bottom:14px;
  }
  .hero h1{
    font-size:clamp(54px,18vw,88px);
    line-height:.88;
    margin-bottom:18px;
  }
  .hero p{
    font-size:20px;
    line-height:1.34;
    max-width:360px;
  }
  .button{
    margin-top:26px;
    padding:11px 20px;
    min-height:42px;
    font-size:13px;
  }
  .section{
    padding:72px 20px;
  }
  .two-col{
    grid-template-columns:1fr;
    gap:26px;
  }
  .section h2{
    font-size:clamp(46px,13vw,64px);
  }
  .lead{
    font-size:21px;
    line-height:1.42;
  }
  .projects{
    grid-template-columns:1fr;
    gap:40px;
    margin-top:34px;
  }
  .project-card img{
    aspect-ratio:4/5;
  }
  .project-card h3{
    font-size:34px;
  }
  .gallery{
    gap:44px;
    margin-top:42px;
  }
  .gallery img{
    max-height:none;
    width:100%;
  }
  .gallery figcaption{
    font-size:12px;
  }
  .quote{
    font-size:42px;
  }
  .contact-box{
    grid-template-columns:1fr;
    gap:14px;
    padding:34px 0;
  }
  .footer{
    display:block;
    padding:30px 20px;
  }
  .footer span{
    display:block;
    margin-bottom:8px;
  }
}

@media(max-width:420px){
  .brand{font-size:20px}
  .hero h1{font-size:54px}
  .hero p{font-size:18px}
  .section{padding:62px 18px}
}