:root{
  --green:#183A32;
  --green-2:#183A32;
  --deep:#183A32;
  --ivory:#F4EFE6;
  --ivory-2:#F4EFE6;
  --plaster:#DDD1BE;
  --saffron:#C77638;
  --wood:#B8AFA2;
  --ink:#1D201D;
  --muted:#6C6A65;
  --line:#B8AFA2;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:Manrope,"Avenir Next",Avenir,"Segoe UI",Helvetica,Arial,sans-serif;
}

.site-header{
  background:rgba(24,58,50,.84);
}
.site-header.is-scrolled{
  border-color:rgba(29,32,29,.14);
  background:rgba(244,239,230,.97);
  color:var(--green);
}

.brand{
  position:relative;
  width:172px;
  height:42px;
}
.brand .brand-logo{
  position:absolute;
  top:50%;
  left:0;
  width:172px;
  max-height:42px;
  object-fit:contain;
  object-position:left center;
  transform:translateY(-50%);
}
.brand-logo--dark{display:none}
.site-header.is-scrolled .brand-logo--light{display:none}
.site-header.is-scrolled .brand-logo--dark{display:block}

.mobile-menu__top img{
  width:190px;
  max-height:54px;
  object-fit:contain;
  object-position:left center;
}

.eyebrow--light{color:var(--saffron)}
.button--accent{background:var(--saffron);color:var(--ink)}
.quick-icon{background:var(--plaster)}
.service-visual{background:var(--sand,#DDD1BE)}
.study-room{background:linear-gradient(145deg,var(--ivory),var(--architectural-sand,#DDD1BE))}
.study-room em,
.project-placeholder i,
.concept-overlay span{background:var(--saffron)}
.transform-copy{border-left-color:var(--saffron)}
.transform-copy span{color:#E0AF87}
.transform-tabs button[aria-selected="true"]{
  border-color:var(--saffron);
  background:rgba(199,118,56,.18);
  color:#F4EFE6;
}

.demo-status{
  max-width:31rem;
  margin:1.15rem 0 0;
  padding-left:.75rem;
  border-left:2px solid var(--saffron);
  color:rgba(255,255,255,.68);
  font-size:.68rem;
  line-height:1.5;
}
.demo-status strong{
  color:#fff;
  font-weight:760;
}

footer{
  background:#102820;
}
.footer-brand img{
  width:190px;
  max-height:74px;
  object-fit:contain;
  object-position:left center;
}
.footer-social span{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  color:rgba(255,255,255,.52);
  font-size:.76rem;
}
.footer-note{max-width:42rem}

@media(min-width:1024px){
  .brand{width:195px;height:46px}
  .brand .brand-logo{width:195px;max-height:46px}
}