@font-face{
  font-family:"Montserrat";
  src:url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}

@font-face{
  font-family:"Montserrat";
  src:url("../fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype");
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
}

:root{
  --bg:#fff;
  --fg:#050505;
  --text:#171717;
  --gray:#777774;
  --muted:rgba(5,5,5,.48);
  --line:rgba(5,5,5,.16);
  --pad:30px;
  --max:1470px;
  --ease:cubic-bezier(.16,1,.3,1);
  --font-sans:"Montserrat",Arial,sans-serif;
}

*{
  box-sizing:border-box;
}

html{
  background:var(--bg);
  color:var(--fg);
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-sans);
  letter-spacing:0;
  text-rendering:geometricPrecision;
}

button,
input,
textarea,
select{
  font-family:var(--font-sans);
}

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

a:hover{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.17em;
}

.container{
  width:min(100%,var(--max));
  margin-inline:auto;
  padding-inline:var(--pad);
}

.site-header{
  position:fixed;
  z-index:100;
  top:0;
  left:0;
  width:100%;
  background:#f5f5f3;
}

.header-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:96px;
}

.wordmark{
  display:inline-flex;
  align-items:baseline;
  color:#000;
  font-size:clamp(19px,1.55vw,24px);
  font-weight:700;
  font-kerning:none;
  line-height:1;
  letter-spacing:.015em;
  text-transform:uppercase;
  white-space:nowrap;
}

.wordmark span,
.wordmark sup{
  color:#000;
}

.wordmark sup{
  margin-left:.18em;
  font-size:.38em;
  letter-spacing:0;
}

.primary-nav{
  display:flex;
  align-items:center;
  gap:30px;
  color:var(--gray);
  font-size:18px;
}

.wordmark:hover,
.wordmark:focus-visible,
.primary-nav a:hover,
.primary-nav a:focus-visible{
  color:var(--text);
  text-decoration:none;
}

.primary-nav a{
  transition:color .2s ease,opacity .2s ease;
}

.primary-nav .active-nav{
  color:var(--text);
}

.menu-toggle{
  display:none;
}

.project-page{
  position:relative;
  width:min(100%,var(--max));
  min-height:100vh;
  margin-inline:auto;
  padding:126px var(--pad) 0;
}

.project-hero{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#efefef;
  overflow:hidden;
}

.project-hero img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.project-info{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(280px,.85fr);
  gap:clamp(36px,7vw,118px);
  padding:var(--pad) 0;
}

.project-title{
  margin:0;
  max-width:760px;
  font-size:clamp(44px,5.8vw,88px);
  font-weight:600;
  line-height:.94;
  letter-spacing:-.045em;
}

.project-copy{
  align-self:end;
  display:grid;
  gap:34px;
}

.project-description{
  margin:0;
  max-width:720px;
  font-size:clamp(20px,2.45vw,38px);
  line-height:1.04;
  text-transform:none;
}

.project-meta{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px 30px;
  padding-top:24px;
  border-top:1px solid var(--line);
}

.meta-label{
  display:block;
  margin-bottom:6px;
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  line-height:1.1;
  text-transform:uppercase;
}

.meta-value{
  font-size:clamp(17px,1.6vw,24px);
  line-height:1.05;
}

.project-gallery{
  columns:3 260px;
  column-gap:var(--pad);
  width:100%;
  margin:0;
}

.project-gallery-item{
  display:block;
  break-inside:avoid;
  margin:0 0 var(--pad);
  overflow:hidden;
  background:#efefef;
}

.project-gallery-item img{
  display:block;
  width:100%;
  height:auto;
}

.project-gallery.is-dynamic .project-gallery-item:nth-child(7n + 1) img,
.project-gallery.is-dynamic .project-gallery-item:nth-child(7n + 4) img{
  aspect-ratio:4/5;
  object-fit:cover;
}

.project-gallery.is-dynamic .project-gallery-item:nth-child(7n + 2) img,
.project-gallery.is-dynamic .project-gallery-item:nth-child(7n + 6) img{
  aspect-ratio:1/1;
  object-fit:cover;
}

.project-gallery.is-dynamic .project-gallery-item:nth-child(7n + 3) img{
  aspect-ratio:5/3;
  object-fit:cover;
}

.site-footer{
  margin-top:clamp(70px,9vw,120px);
  background:#fff;
}

.footer-inner{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:30px;
  width:min(100%,var(--max));
  margin-inline:auto;
  padding:112px var(--pad) 120px;
  border-top:1px solid var(--line);
}

.footer-inner nav,
.footer-inner address,
.footer-inner div{
  padding-right:30px;
}

.footer-nav,
.footer-services{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
}

.footer-inner address{
  font-style:normal;
}

.footer-inner strong{
  font-weight:650;
}

.footer-contact p,
.footer-services p{
  margin:0;
}

.footer-contact p+p{
  margin-top:13px;
}

.footer-inner a,
.footer-services{
  color:#5d5d5a;
}

.footer-inner a:hover,
.footer-inner a:focus-visible{
  color:var(--text);
  text-decoration:none;
}

@media(max-width:920px){
  :root{
    --pad:24px;
  }

  .project-info{
    grid-template-columns:1fr;
  }

  .project-copy{
    align-self:start;
  }

  .footer-inner{
    grid-template-columns:repeat(2,minmax(0,1fr));
    row-gap:52px;
  }
}

@media(max-width:620px){
  :root{
    --pad:20px;
  }

  .site-header{
    min-height:0;
  }

  .header-inner{
    position:relative;
    display:block;
    min-height:56px;
    padding-top:20px;
    padding-bottom:20px;
  }

  .wordmark{
    max-width:80%;
    font-size:18px;
  }

  .menu-toggle{
    position:absolute;
    top:19px;
    right:var(--pad);
    display:block;
    width:25px;
    height:17px;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
  }

  .menu-toggle span{
    position:absolute;
    left:0;
    width:100%;
    height:2px;
    background:var(--text);
    transition:transform .25s ease,opacity .2s ease,top .25s ease;
  }

  .menu-toggle span:nth-child(1){ top:0; }
  .menu-toggle span:nth-child(2){ top:7px; }
  .menu-toggle span:nth-child(3){ top:14px; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1){ top:7px; transform:rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3){ top:7px; transform:rotate(-45deg); }

  .primary-nav{
    display:grid;
    grid-template-rows:repeat(5,0fr);
    gap:0;
    height:0;
    overflow:hidden;
    font-size:18px;
    opacity:0;
    transition:height .35s var(--ease),opacity .2s ease,padding .35s var(--ease);
  }

  .primary-nav.is-open{
    height:253px;
    padding-top:8px;
    opacity:1;
  }

  .primary-nav a{
    display:flex;
    align-items:center;
    min-height:49px;
  }

  .project-page{
    padding-top:104px;
  }

  .project-title{
    font-size:clamp(38px,11vw,58px);
  }

  .project-description{
    font-size:clamp(24px,7.5vw,36px);
  }

  .project-meta{
    grid-template-columns:1fr;
  }

  .project-gallery{
    columns:1;
  }

  .footer-inner{
    grid-template-columns:1fr;
    gap:30px;
    padding-top:56px;
    padding-bottom:60px;
  }

  .footer-inner nav,
  .footer-inner address,
  .footer-inner div{
    padding-right:0;
  }
}