:root {
  --ink:#1d1d1a;
  --paper:#f0eee8;
  --sand:#c8b69c;
  --line:rgba(29,29,26,.18)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:14px/1.6 'DM Sans',sans-serif
}

a {
  color:inherit;
  text-decoration:none
}

h1,h2,h3,p {
  margin-top:0
}

h1,h2,h3 {
  font-family:'Manrope',sans-serif;
  font-weight:300;
  line-height:1.08
}

em {
  font-family:Georgia,serif;
  font-weight:400
}

.site-header {
  height:92px;
  padding:0 4.5vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  position:absolute;
  top:0;
  left:0;
  width:100%;
  z-index:20;
  transition:.3s
}

.site-header.header-light {
  color:#fff;
  border-color:rgba(255,255,255,.25)
}

.site-header.scrolled {
  position:fixed;
  height:72px;
  background:rgba(240,238,232,.94);
  backdrop-filter:blur(12px);
  color:var(--ink);
  border-color:var(--line)
}

.brand {
  display:flex;
  align-items:center;
  gap:11px;
  font:600 16px/1 'Manrope';
  letter-spacing:.16em
}

.brand small {
  display:block;
  font-size:7px;
  letter-spacing:.35em;
  margin-top:6px
}

.brand-mark {
  width:38px;
  height:38px;
  border:1px solid currentColor;
  border-radius:50%;
  display:grid;
  place-items:center;
  font:400 19px Georgia
}

.site-header nav {
  display:flex;
  gap:36px
}

.site-header nav a {
  position:relative;
  font-size:12px;
  letter-spacing:.05em
}

.site-header nav a:after {
  content:'';
  position:absolute;
  left:0;
  bottom:-8px;
  width:0;
  height:1px;
  background:currentColor;
  transition:.25s
}

.site-header nav a:hover:after,.site-header nav a.active:after {
  width:100%
}

.menu-button {
  display:none;
  background:none;
  border:0
}

.hero {
  height:100svh;
  min-height:680px;
  position:relative;
  color:white;
  overflow:hidden
}

.hero>img {
  width:100%;
  height:100%;
  object-fit:cover
}

.hero-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(8,7,5,.73) 0%,rgba(8,7,5,.28) 43%,rgba(8,7,5,.05) 80%)
}

.hero-copy {
  position:absolute;
  left:9vw;
  top:50%;
  transform:translateY(-42%);
  max-width:690px
}

.eyebrow {
  font-size:10px;
  letter-spacing:.28em;
  font-weight:600
}

.eyebrow.light {
  color:rgba(255,255,255,.72)
}

.hero h1 {
  font-size:clamp(58px,7.6vw,116px);
  letter-spacing:-.06em;
  margin:22px 0 24px
}

.hero h1 em {
  font-weight:400
}

.hero-copy>p:not(.eyebrow) {
  max-width:440px;
  color:rgba(255,255,255,.74);
  font-size:15px
}

.circle-link {
  width:118px;
  height:118px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:42px;
  transition:.3s
}

.circle-link:hover {
  background:#fff;
  color:var(--ink)
}

.circle-link b {
  font-size:20px;
  font-weight:300
}

.hero-meta {
  position:absolute;
  bottom:34px;
  left:4.5vw;
  right:4.5vw;
  display:flex;
  justify-content:space-between;
  font-size:10px;
  letter-spacing:.18em
}

.section {
  padding:130px 9vw
}

.section-no {
  font-size:10px;
  letter-spacing:.22em;
  font-weight:600
}

.intro {
  display:grid;
  grid-template-columns:26% 1fr
}

.intro h2 {
  font-size:clamp(34px,4.2vw,65px);
  max-width:920px;
  letter-spacing:-.04em
}

.text-link {
  display:inline-flex;
  gap:40px;
  border-bottom:1px solid var(--ink);
  padding-bottom:8px;
  margin-top:30px;
  font-size:12px;
  letter-spacing:.06em
}

.featured {
  display:grid;
  grid-template-columns:62% 38%;
  min-height:750px;
  background:#d6caba
}

.feature-visual {
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#b7a68e,#e4ddd2)
}

.feature-visual:before {
  content:'';
  position:absolute;
  width:50%;
  height:70%;
  background:#3d3b35;
  left:18%;
  bottom:0
}

.feature-visual .arch {
  width:42%;
  height:60%;
  position:relative;
  background:linear-gradient(155deg,#ddd5c9,#998b78);
  border-radius:50% 50% 0 0;
  z-index:1;
  box-shadow:35px 30px 0 rgba(55,50,44,.18)
}

.feature-visual>span {
  position:absolute;
  top:30px;
  left:35px;
  color:white
}

.feature-copy {
  padding:11vw 7vw;
  display:flex;
  flex-direction:column;
  justify-content:center
}

.feature-copy h3 {
  font-size:clamp(42px,4vw,66px);
  letter-spacing:-.04em
}

.feature-copy>p {
  max-width:390px
}

.feature-copy dl {
  margin:35px 0
}

.feature-copy dl>div {
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding:10px 0
}

.feature-copy dt {
  font-size:11px
}

.feature-copy dd {
  margin:0;
  font-size:11px
}

.feature-story {
  position:relative;
  background:#cfc2b0
}

.feature-story:before {
  content:'A';
  position:absolute;
  right:5%;
  top:3%;
  color:rgba(255,255,255,.14);
  font:300 clamp(170px,20vw,340px)/1 'Manrope',sans-serif;
  pointer-events:none
}

.feature-story>* {
  position:relative;
  z-index:1
}

.feature-story h3 em {
  font-family:Georgia,serif;
  font-weight:400
}

.feature-story>p:not(.eyebrow) {
  line-height:1.75;
  margin-top:25px
}

.feature-story .design-values {
  margin:44px 0 38px
}

.feature-story .design-values>div {
  align-items:center;
  padding:14px 0
}

.feature-story .design-values dt {
  color:#777064;
  letter-spacing:.12em
}

.feature-story .design-values dd {
  font-size:12px;
  letter-spacing:.03em
}

.services {
  display:grid;
  grid-template-columns:26% 1fr
}

.service-list a {
  display:grid;
  grid-template-columns:55px 1fr auto;
  align-items:center;
  border-top:1px solid var(--line);
  padding:27px 5px
}

.service-list a:last-child {
  border-bottom:1px solid var(--line)
}

.service-list h3 {
  font-size:clamp(24px,3vw,42px);
  margin:0;
  transition:.25s
}

.service-list a:hover h3 {
  padding-left:18px
}

.service-list b {
  font-size:25px;
  font-weight:300
}

footer {
  background:#1c1d1a;
  color:#e9e6de;
  padding:85px 7vw 25px;
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:70px
}

footer>div {
  display:flex;
  flex-direction:column;
  align-items:flex-start
}

footer>div:first-child p {
  font:300 28px/1.35 'Manrope';
  margin-top:38px
}

footer small {
  font-size:9px;
  letter-spacing:.23em;
  color:#99998f;
  margin-bottom:20px
}

footer a,footer p {
  font-size:12px;
  color:#c7c6bd;
  margin-bottom:7px
}

.footer-bottom {
  grid-column:1/-1;
  border-top:1px solid #3a3b36;
  padding-top:24px;
  margin-top:45px;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  font-size:10px;
  color:#8e8e85
}

.page-main {
  padding-top:92px
}

.page-hero {
  padding:130px 9vw 110px;
  min-height:610px
}

.page-hero.compact {
  min-height:520px;
  padding-bottom:75px
}

.page-hero h1 {
  font-size:clamp(54px,7.5vw,112px);
  letter-spacing:-.06em;
  margin:35px 0
}

.lead {
  font-size:16px;
  max-width:520px;
  margin-left:50%
}

.manifesto {
  display:grid;
  grid-template-columns:1fr 1fr;
  background:#d8d0c3
}

.manifesto>div:last-child {
  padding:10vw 8vw
}

.manifesto h2 {
  font-size:clamp(34px,4vw,58px);
  letter-spacing:-.04em
}

.manifesto p:not(.section-no) {
  max-width:530px
}

.team-art {
  min-height:720px;
  background:linear-gradient(145deg,#4b4b43,#aaa194);
  position:relative;
  overflow:hidden
}

.team-art div {
  position:absolute;
  width:60%;
  height:80%;
  left:20%;
  bottom:-10%;
  border-radius:50% 50% 0 0;
  background:linear-gradient(145deg,#d6cab8,#817464);
  box-shadow:-60px -50px 0 rgba(242,235,222,.15)
}

.team-art span {
  position:absolute;
  bottom:30px;
  left:35px;
  color:#fff;
  letter-spacing:.2em;
  font-size:10px
}

.values {
  display:grid;
  grid-template-columns:26% 1fr
}

.value-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line)
}

.value-grid article {
  background:var(--paper);
  padding:40px 30px;
  min-height:300px
}

.value-grid span,.big-no {
  font:300 60px/1 'Manrope';
  color:#b7aa98
}

.value-grid h3 {
  font-size:28px;
  margin-top:70px
}

.content-services {
  padding:0 9vw 120px
}

.content-services article {
  position:relative;
  display:grid;
  grid-template-columns:12% 42% 1fr;
  gap:5%;
  padding:90px 0;
  border-top:1px solid var(--line);
  align-items:center
}

.content-services h2 {
  font-size:clamp(32px,4vw,57px);
  letter-spacing:-.04em
}

.content-services article>div:nth-child(2)>p:not(.eyebrow) {
  max-width:480px
}

.content-services ul {
  list-style:none;
  padding:0;
  margin-top:28px
}

.content-services li {
  border-top:1px solid var(--line);
  padding:8px 0;
  font-size:12px
}

.service-art {
  height:460px;
  position:relative;
  overflow:hidden
}

.art-a {
  background:linear-gradient(140deg,#c8b99e 50%,#696258 50%)
}

.art-a:after {
  content:'';
  position:absolute;
  inset:15% 18%;
  border:18px solid rgba(241,234,220,.75)
}

.art-b {
  background:radial-gradient(circle at 65% 40%,#decbb1 0 14%,#867767 15% 28%,#353630 29%)
}

.art-c {
  background:linear-gradient(110deg,#373833 0 35%,#a49988 35% 70%,#ddd6c9 70%)
}

.projects {
  padding:0 5vw 120px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px 3vw
}

.projects article:nth-child(even) {
  margin-top:140px
}

.project-image {
  height:590px;
  position:relative;
  overflow:hidden
}

.project-image span {
  position:absolute;
  top:20px;
  left:22px;
  color:#fff;
  font-size:11px;
  z-index:2
}

.project-image:after {
  content:'';
  position:absolute;
  inset:15%;
  transition:.5s
}

.project-image:hover:after {
  transform:scale(1.08)
}

.project-one {
  background:linear-gradient(150deg,#514b43,#b6a78e)
}

.project-one:after {
  background:linear-gradient(90deg,#d6c8ae 50%,#776b5d 50%);
  border-radius:50% 50% 0 0
}

.project-two {
  background:linear-gradient(160deg,#c9c2b4,#77786f)
}

.project-two:after {
  inset:23% 12%;
  border:25px solid #3b3c38;
  box-shadow:50px 40px 0 #a69c8c
}

.project-three {
  background:linear-gradient(#aab2b0 0 48%,#6b6358 48%)
}

.project-three:after {
  inset:23% 10% 10%;
  background:#d1c4ac;
  clip-path:polygon(0 30%,50% 0,100% 30%,100% 100%,0 100%)
}

.project-four {
  background:linear-gradient(125deg,#363631,#c2b5a1)
}

.project-four:after {
  inset:10% 20%;
  border-radius:50%;
  background:#d8d0c2
}

.projects h2 {
  font-size:28px;
  margin:18px 0 2px
}

.projects p {
  font-size:11px;
  color:#686861
}

.project-filter {
  display:flex;
  gap:25px;
  margin-top:70px
}

.project-filter button {
  border:0;
  background:none;
  border-bottom:1px solid transparent;
  padding:5px 0;
  font:11px 'DM Sans';
  cursor:pointer
}

.project-filter button.active {
  border-color:var(--ink)
}

.project-cta {
  background:#a9967d;
  color:#fff;
  padding:120px 9vw
}

.project-cta h2 {
  font-size:clamp(50px,7vw,100px);
  letter-spacing:-.05em
}

.project-cta a {
  border-bottom:1px solid #fff;
  padding-bottom:8px
}

@media(max-width:800px) {
  .site-header {
    height:72px;
    padding:0 22px
  }
  .site-header nav {
    position:fixed;
    inset:72px 0 0;
    background:var(--paper);
    color:var(--ink);
    display:flex;
    flex-direction:column;
    padding:55px 28px;
    gap:25px;
    transform:translateX(100%);
    transition:.35s
  }
  .site-header.menu-open nav {
    transform:none
  }
  .site-header nav a {
    font:300 30px 'Manrope'
  }
  .menu-button {
    display:block;
    width:34px;
    height:25px;
    position:relative;
    color:inherit
  }
  .menu-button span {
    position:absolute;
    left:3px;
    width:26px;
    height:1px;
    background:currentColor
  }
  .menu-button span:first-child {
    top:8px
  }
  .menu-button span:last-child {
    top:16px
  }
  .hero {
    min-height:700px
  }
  .hero-copy {
    left:25px;
    right:25px
  }
  .hero h1 {
    font-size:57px
  }
  .hero-copy>p:not(.eyebrow) {
    font-size:13px
  }
  .circle-link {
    width:95px;
    height:95px
  }
  .section {
    padding:80px 25px
  }
  .intro,.services,.values {
    grid-template-columns:1fr;
    gap:45px
  }
  .featured {
    grid-template-columns:1fr
  }
  .feature-visual {
    min-height:500px
  }
  .feature-copy {
    padding:80px 28px
  }
  .service-list a {
    grid-template-columns:40px 1fr auto
  }
  .page-main {
    padding-top:72px
  }
  .page-hero,.page-hero.compact {
    padding:90px 25px 70px;
    min-height:0
  }
  .page-hero h1 {
    font-size:52px
  }
  .lead {
    margin-left:0
  }
  .manifesto {
    grid-template-columns:1fr
  }
  .team-art {
    min-height:520px
  }
  .manifesto>div:last-child {
    padding:80px 28px
  }
  .value-grid {
    grid-template-columns:1fr
  }
  .value-grid article {
    min-height:240px
  }
  .value-grid h3 {
    margin-top:45px
  }
  .content-services {
    padding:0 25px 80px
  }
  .content-services article {
    grid-template-columns:1fr;
    padding:70px 0
  }
  .service-art {
    height:390px
  }
  .projects {
    grid-template-columns:1fr;
    padding:0 25px 80px;
    gap:55px
  }
  .projects article:nth-child(even) {
    margin-top:0
  }
  .project-image {
    height:480px
  }
  .project-filter {
    flex-wrap:wrap
  }
  .project-cta {
    padding:80px 25px
  }
  footer {
    grid-template-columns:1fr;
    padding:70px 25px 25px;
    gap:35px
  }
  .footer-bottom {
    display:flex;
    gap:15px
  }
  .page-hero h1 br {
    display:none
  }
}