@charset "utf-8";
/* CSS Document */
/*===========================================================================================================*/
/*=========================================== INTRO =========================================================*/
/*===========================================================================================================*/
.services-intro {
  padding: 94px 0 20px;
  background-color: #fff;
  text-align: center;
}
/* the rule is as wide as the heading it underlines, not the container, so the
   block is sized to the copy and centred rather than stretched */
.services-intro .intro-heading {
  display: inline-block;
  max-width: 675px;
}
.services-intro .intro-heading h2 {
  margin: 0;
  font-size: 35px;
  line-height: 42px;
}
.services-intro .intro-heading .heading-bar {
  display: block;
  width: 100%;
  height: 3px;
  margin-top: 21px;
  background-color: #174691;
}
.services-intro p {
  max-width: 978px;
  margin: 22px auto 0;
  font-size: 18px;
  line-height: 30px;
  color: #5a5a5a;
}

/*===========================================================================================================*/
/*=========================================== SERVICE ROWS ==================================================*/
/*===========================================================================================================*/
.service-row {
  padding: 70px 0;
  background-color: #fff;
}
/* the four services alternate sides and background: the even ones run on the
   same blue as the Thinking About Building band, so their type and rule invert
   to white and their link takes the white button variant in the markup */
.service-row.reverse {
  background-color: #174691;
}
.service-row.reverse .service-num,
.service-row.reverse .service-copy h2,
.service-row.reverse .service-copy p {
  color: #fff;
}
.service-row.reverse .service-copy .heading-bar {
  background-color: #fff;
}
/* photo and copy are the same height in the prototype only by coincidence; the
   copy is centred against the photo, which is the taller of the two */
.service-row .row {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
/* the copy sits 72px from the photo in the prototype; 30px of that is already
   the Bootstrap gutter, so only the remainder is added here */
.service-row .service-copy {
  padding-left: 42px;
}
.service-row.reverse .service-copy {
  padding-left: 0;
  padding-right: 42px;
}
.service-row .service-photo {
  display: block;
}
/* fixed 560x420 window in the prototype: the images are already cropped to it,
   so the height is pinned and the fill guards the odd source ratio */
.service-row .service-photo img {
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;
  background-color: #d9dadb;
}
.service-row .service-num {
  display: block;
  margin-bottom: 18px;
  font-size: 28px;
  line-height: 1.2em;
  font-weight: 600;
  letter-spacing: 3px;
  color: #17478f;
}
.service-row .service-copy h2 {
  margin: 0;
  font-size: 35px;
  line-height: 42px;
}
.service-row .service-copy .heading-bar {
  display: block;
  width: 206px;
  height: 3px;
  margin: 18px 0;
  background-color: #17478f;
}
.service-row .service-copy p {
  margin: 0 0 18px;
  font-size: 18px;
  line-height: 30px;
  color: #5a5a5a;
}
/* the section link is the standard button at the prototype's smaller size */
.service-row .service-copy .btn-layout {
  font-size: 14px;
  line-height: 21px;
  padding: 13px 23px;
}

/*===========================================================================================================*/
/*=========================================== OUR LATEST PROJECTS ===========================================*/
/*===========================================================================================================*/
/* The same module as Related Projects on the single project, inverted: the
   band is white here, so the heading, titles and meta all read dark. The rules
   are repeated rather than shared with single-project.css because that file
   only loads on the single, and style.css ships on a fixed enqueue version. */
.services-proof {
  padding: 96px 0 90px;
  background-color: #fff;
}
.services-proof .section-heading {
  text-align: center;
  margin-bottom: 65px;
}
.services-proof .section-heading h2 {
  margin: 0;
  font-size: 35px;
  line-height: 42px;
  color: #000;
}
.services-proof .section-heading p {
  max-width: 890px;
  margin: 25px auto 0;
  font-size: 18px;
  line-height: 30px;
  color: #5a5a5a;
}
/* the gap rides on the items and the row pulls it back, so the last row of
   cards leaves no dead space above the band below */
.services-proof .row {
  margin-bottom: -40px;
}
.services-proof .proof-item {
  margin-bottom: 40px;
}
.services-proof .related-card {
  display: block;
  text-decoration: none;
}
.services-proof .related-card .img {
  display: block;
  height: 300px;
  background-color: #d4d4d4;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.services-proof .related-card .meta {
  display: block;
  padding-top: 20px;
}
.services-proof .related-card .status-row {
  display: block;
  margin-bottom: 10px;
}
.services-proof .related-card .project-status {
  display: inline-block;
  padding: 5px 10px;
  font-size: 9px;
  line-height: 1.2em;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.services-proof .related-card .project-status.is-complete {
  background-color: #174691;
}
.services-proof .related-card .project-status.is-progress {
  background-color: #a67a3d;
}
.services-proof .related-card .year {
  display: inline-block;
  margin-left: 12px;
  font-size: 11px;
  line-height: 1.2em;
  letter-spacing: 1px;
  font-weight: 500;
  color: #65676b;
}
.services-proof .related-card .title {
  display: block;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.4em;
  letter-spacing: 2.2px;
  font-weight: 600;
  text-transform: uppercase;
  color: #222;
}
.services-proof .related-card .sub {
  display: block;
  font-size: 13px;
  line-height: 1.55em;
  letter-spacing: 0.3px;
  color: #65676b;
}
.services-proof .related-card:hover .title {
  color: #174691;
}

/*===========================================================================================================*/
/*=========================================== RESPONSIVE ====================================================*/
/*===========================================================================================================*/
@media screen and (max-width: 1200px) {
  .service-row .service-copy,
  .service-row.reverse .service-copy {
    padding-left: 0;
    padding-right: 0;
  }
}
@media screen and (max-width: 991px) {
  .services-intro {
    padding: 60px 0 10px;
  }
  .service-row {
    padding: 40px 0;
  }
  /* stacked, the photo always leads: the reversed rows put the copy first in
     the markup, so that column is pushed back below the photo */
  .service-row.reverse .row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
  .service-row .service-copy {
    padding-top: 30px;
  }
  .service-row .service-photo img {
    height: 340px;
  }
  .services-proof {
    padding: 70px 0 60px;
  }
  .services-proof .section-heading {
    margin-bottom: 45px;
  }
}
@media screen and (max-width: 768px) {
  .services-intro .intro-heading h2,
  .service-row .service-copy h2,
  .services-proof .section-heading h2 {
    font-size: 28px;
    line-height: 34px;
  }
  .services-intro p,
  .service-row .service-copy p,
  .services-proof .section-heading p {
    font-size: 16px;
    line-height: 26px;
  }
  .service-row .service-photo img {
    height: 260px;
  }
  .service-row .service-num {
    font-size: 24px;
    margin-bottom: 12px;
  }
  .services-proof .related-card .img {
    height: 240px;
  }
}