:root {
  --copper: #343a39;
  --paper: #f6f7f7;
  --cream: #ecefee;
}

body {
  background-color: var(--paper);
}

.process,
.vision-grid,
.prekast-info {
  background: #ecefee;
}

/* Light metallic accents on dark photographic and charcoal sections. */
.eyebrow,
.hero h1 em,
.services h2 em,
.quote h2 em,
.detail-title p,
.hero-copy > p,
.hero-copy h1 em,
.corporate-cta > p {
  color: #c5cac8;
}


/* Calm architectural grey accents on light sections. */
.intro h2 em,
.projects h2 em,
.process h2 em,
.approach h2 em,
.prekast-info h2 em,
.prekast-info__point span {
  color: #5f6866;
}

footer h4,
.site-footer h4 {
  color: #c5cac8;
}

.placeholder {
  background: #e2e5e3;
  color: #404745;
}

.button.primary:hover {
  background: #202625;
}

.gallery-grid figcaption b {
  color: #4e5451 !important;
}

/* Brand red is reserved for small, functional highlights. */
.site-header .header-cta,
.corporate-header .header-cta,
.gallery-header .header-cta,
.detail-header .header-cta,
.button.primary,
.corporate-cta a,
.gallery-contact a {
  color: #fff;
  background: #d71920;
}

.site-header nav a::after {
  background: #d71920;
}

.corporate-header nav .active,
.gallery-header nav .active {
  border-color: #d71920;
}

.service-icon,
.step b,
.vision-grid span,
.next-project > span,
.gallery-grid figcaption span,
.prekast-info__point span {
  color: #d71920;
}

.hero .eyebrow {
  color: #fff;
}

.hero h1 em {
  color: #fff;
}

.intro h2 em {
  color: #e31b23;
}

.projects h2 em,
.process h2 em,
.approach h2 em,
.prekast-info h2 em {
  color: #d65b60;
}

.approach > div > p {
  color: #d65b60;
}

.site-header nav,
.corporate-header nav,
.gallery-header nav,
.detail-header nav {
  margin-right: 64px;
}

.detail-title h1,
.project-overview h2,
.next-project strong {
  font-family: "Manrope", Arial, sans-serif !important;
  font-style: normal !important;
}

.hero .button.primary {
  color: #171b1a;
  background: #fff;
}

.hero .button.primary:hover {
  background: #e9eceb;
}

.step span::before {
  background: #d71920;
}

.site-header .header-cta:hover,
.corporate-header .header-cta:hover,
.gallery-header .header-cta:hover,
.detail-header .header-cta:hover,
.button.primary:hover,
.corporate-cta a:hover,
.gallery-contact a:hover {
  background: #b51218;
}