/* Light editorial layout selected from the approved concept. */
body {
  background: #f7f4ec;
}

.site-header {
  position: relative;
  height: 86px;
  background: #fbfaf6;
  color: #10231b;
  border-bottom: 1px solid #ddd6c8;
}

.brand strong,
.footer-brand strong {
  color: #10231b;
}

.brand small {
  color: #5e625d;
}

.site-header nav > a:not(.nav-cta) {
  color: #26372f;
}

.site-header nav > a:hover {
  color: #9a7134;
}

.site-header .nav-cta {
  background: #a96245;
  border-color: #a96245;
  color: #fff !important;
}

.menu-button {
  color: #10231b;
}

.menu-button > span:not(.sr-only) {
  background: #10231b;
}

.hero {
  min-height: 610px;
  height: 72vh;
  max-height: 760px;
  border-bottom: 0;
}

.hero > img {
  object-position: center 56%;
}

.hero-shade {
  background: linear-gradient(
    90deg,
    rgba(10, 29, 21, 0.86) 0%,
    rgba(10, 29, 21, 0.62) 38%,
    rgba(10, 29, 21, 0.1) 72%,
    transparent 100%
  );
}

.hero-content {
  margin-top: 0;
}

.hero h1 {
  max-width: 690px;
  font-size: clamp(3.2rem, 5.4vw, 5.6rem);
}

.hero h1 em {
  color: #fff;
}

.hero-copy {
  max-width: 520px;
  margin: 22px 0 28px;
}

.hero .button-primary {
  background: #a96245;
  color: #fff;
}

.hero .button-primary:hover {
  background: #bd7658;
}

.hero-note {
  left: max(24px, calc((100vw - 1220px) / 2));
  right: auto;
  bottom: 26px;
}

.intro {
  padding: 72px 0 76px;
}

.intro > .section-label {
  justify-content: center;
  margin-bottom: 14px;
}

.intro-heading {
  display: block;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.intro-heading h2 {
  font-size: clamp(2.4rem, 4vw, 4rem);
}

.intro-heading p {
  max-width: 650px;
  margin: 18px auto 0;
}

.service-grid {
  gap: 0;
  margin-top: 48px;
  border: 0;
}

.service-grid article,
.service-grid article:first-child {
  min-height: 380px;
  padding: 0 20px 20px;
  background: transparent;
  border-right: 1px solid #ddd6c8;
}

.service-grid article:last-child {
  border-right: 0;
}

.service-number {
  display: none;
}

.service-photo {
  height: 190px;
  margin: 0 0 22px;
  overflow: visible;
  background: transparent;
  border-radius: 0;
}

.service-photo img {
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(44, 47, 39, 0.08));
}

.service-grid h3 {
  margin-bottom: 8px;
  text-align: center;
}

.service-grid p {
  text-align: center;
}

.service-grid a {
  justify-content: center;
  gap: 18px;
  border-bottom: 0;
  color: #a96245;
}

.portfolio {
  padding: 70px 0 78px;
  background: #dfe5d7;
}

.portfolio .section-label {
  margin-bottom: 12px;
}

.portfolio-heading {
  grid-template-columns: 1fr 0.8fr;
  margin-bottom: 38px;
}

.portfolio-heading h2 {
  font-size: clamp(2.6rem, 4.2vw, 4.4rem);
}

.project-block {
  margin-top: 0;
}

.project-meta {
  display: none;
}

.gallery.extension-gallery {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  gap: 16px;
}

.gallery.extension-gallery figure,
.gallery.extension-gallery figure.feature {
  display: grid;
  grid-column: auto;
  grid-row: auto;
  grid-template-rows: 230px auto;
  overflow: visible;
  background: transparent;
}

.gallery.extension-gallery img {
  grid-row: 1;
}

.gallery.extension-gallery figcaption {
  position: static;
  grid-row: 2;
  background: transparent;
  color: #21362c;
  padding: 12px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
}

.roof-project {
  display: none;
}

.approach {
  padding: 82px 0;
  background: #f8f6ef;
  color: #10231b;
  border-top: 0;
}

.approach-grid {
  grid-template-columns: 0.9fr 1.1fr;
  gap: 90px;
}

.approach .section-label.light {
  color: #6a6e67;
}

.principles article,
.principles article:last-child {
  border-color: #d9d2c4;
}

.principles p {
  color: #645f55;
}

.area {
  width: 100%;
  max-width: none;
  padding: 76px max(24px, calc((100vw - 1220px) / 2));
  background: #294b3d;
  color: #fff;
}

.area-grid {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
}

.area .eyebrow.dark,
.area .dark-link {
  color: #d8b477;
}

.area-grid > div:last-child > p {
  color: #dbe2dd;
}

.quote {
  padding: 88px 0;
  border-top: 0;
}

.quote-grid {
  gap: 90px;
}

footer {
  background: #173a2d;
}

footer .brand strong,
footer .brand small {
  color: #fff;
}

@media (max-width: 860px) {
  .site-header {
    height: 78px;
  }

  .site-header nav {
    top: 78px;
    background: #fbfaf6;
    border-bottom: 1px solid #ddd6c8;
  }

  .site-header nav a {
    color: #10231b !important;
  }

  .site-header .nav-cta {
    color: #fff !important;
    padding-inline: 14px;
  }

  .hero {
    min-height: 620px;
    height: 78svh;
  }

  .hero-note {
    display: none;
  }

  .service-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 36px;
  }

  .service-grid article,
  .service-grid article:first-child {
    border-right: 1px solid #ddd6c8;
    border-bottom: 0 !important;
    padding: 0 16px 18px !important;
  }

  .service-grid article:nth-child(2n) {
    border-right: 0;
  }

  .portfolio-heading,
  .approach-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .gallery.extension-gallery {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 530px) {
  .brand small {
    letter-spacing: 0.13em;
  }

  .hero {
    min-height: 610px;
  }

  .hero h1 {
    font-size: 3.2rem;
  }

  .intro {
    padding-top: 60px;
  }

  .service-grid {
    grid-template-columns: 1fr;
  }

  .service-grid article,
  .service-grid article:first-child,
  .service-grid article:nth-child(2n) {
    min-height: 430px;
    padding-inline: 0 !important;
    border-right: 0;
    border-bottom: 1px solid #ddd6c8 !important;
  }

  .service-photo {
    height: 270px;
    border-radius: 0;
  }

  .gallery.extension-gallery {
    grid-template-columns: 1fr;
  }

  .gallery.extension-gallery figure,
  .gallery.extension-gallery figure.feature {
    grid-template-rows: 245px auto;
    height: auto;
  }
}