@charset "utf-8";
/* CSS Document */
/*===========================================================================================================*/
/*=========================================== SHARED SECTION HEADING ========================================*/
/*===========================================================================================================*/
.about-page .section-heading {
  text-align: center;
  margin-bottom: 80px;
}
.about-page .section-heading h2 {
  margin: 0;
}
/* the 3px rule under every section title in the prototype */
.about-page .section-heading .heading-bar {
  display: block;
  width: 267px;
  height: 3px;
  margin: 12px auto 0;
  background-color: #174691;
}
.about-page .section-heading p {
  font-size: 20px;
  line-height: 30px;
  margin: 12px 0 0;
}

/*===========================================================================================================*/
/*=========================================== INTRO =========================================================*/
/*===========================================================================================================*/
.about-intro {
  padding: 50px 0 90px;
  background-color: #fff;
}
.about-intro h2 {
  margin: 0;
  text-align: center;
}
.about-intro .heading-bar {
  display: block;
  width: 206px;
  height: 3px;
  margin: 38px auto 0;
  background-color: #174691;
}
.about-intro .intro-img {
  display: block;
  margin: 40px 0 50px;
}
.about-intro .intro-img img {
  display: block;
  width: 100%;
}

/*===========================================================================================================*/
/*=========================================== WHAT SETS US APART ============================================*/
/*===========================================================================================================*/
/* What Sets Discovery Apart and The Team run on the same blue as the Thinking
   About Building band, so their type and rules invert to white. The section
   icons ship as white-stroke SVGs, which only read against this background. */
.about-apart,
.about-team {
  background-color: #174691;
}
.about-apart .section-heading h2,
.about-apart .section-heading p,
.about-team .section-heading h2,
.about-team .section-heading p {
  color: #fff;
}
.about-apart .section-heading .heading-bar,
.about-team .section-heading .heading-bar {
  background-color: #fff;
}

.about-apart {
  padding: 105px 0 125px;
}
/* Items carry the gap and the row pulls it back, so the spacing survives however
   the four columns wrap without leaving dead space under the last row. */
.about-apart .row {
  margin-bottom: -30px;
}
.about-apart .apart-item {
  margin-bottom: 30px;
}
/* hairline between the four items. Only from 992px up, where they sit on one
   row: below that they stack and a vertical rule would have nothing to divide.
   Bootstrap stretches the columns to equal height, so every rule matches. */
@media screen and (min-width: 992px) {
  .about-apart .row > div + div {
    position: relative;
  }
  .about-apart .row > div + div:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 30px;
    width: 1px;
    background-color: rgb(255 255 255 / 40%);
  }
}
.about-apart .apart-item .icon {
  display: block;
  width: 78px;
  height: 78px;
  margin-bottom: 12px;
}
.about-apart .apart-item .icon img {
  display: block;
  width: 100%;
}
.about-apart .apart-item h4 {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 1px;
  color: #fff;
}
.about-apart .apart-item p {
  margin: 0;
  font-size: 18px;
  line-height: 26px;
  color: #fff;
}

/*===========================================================================================================*/
/*=========================================== HOW WE WORK ===================================================*/
/*===========================================================================================================*/
.about-process {
  padding: 80px 0 60px;
  background-color: #fff;
}
.about-process .process-list {
  position: relative;
  margin: 0;
  padding: 0;
}
.about-process .process-list > li {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  padding: 0;
  margin: 0;
}
/* image and copy swap sides on every other stage */
.about-process .process-list > li:nth-child(even) {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
/* Explicit halves rather than flex-grow: with grow the two columns settled 31px
   either side of centre, which made the rail zig-zag between stages. */
.about-process .process-list .step-img,
.about-process .process-list .step-text {
  display: block;
  width: 50%;
  min-width: 0;
}
.about-process .process-list .step-img {
  padding-right: 57px;
}
.about-process .process-list .step-text {
  padding-left: 57px;
}
.about-process .process-list > li:nth-child(even) .step-img {
  padding-right: 0;
  padding-left: 57px;
}
.about-process .process-list > li:nth-child(even) .step-text {
  padding-left: 0;
  padding-right: 57px;
}
.about-process .process-list .step-img img {
  display: block;
  width: 100%;
}
/* One continuous rail rather than a segment per stage, anchored to the centre
   of the list so it lines up whichever side leads. The photo is the tallest
   element in a stage and so sets the row height, which means the full height of
   the list runs from the top of the first photo to the bottom of the last. */
.about-process .process-list:before {
  content: '';
  position: absolute;
  z-index: 1;
  left: 50%;
  margin-left: -1px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #dcdcdc;
}
.about-process .process-list .step-mark {
  display: block;
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  margin: -7px 0 0 -7px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  background-color: #174691;
}
.about-process .process-list .step-text .step-title {
  display: block;
  margin-bottom: 34px;
  font-size: 38px;
  line-height: 1.2em;
  font-weight: 500;
  text-transform: uppercase;
  color: #174691;
}
.about-process .process-list .step-text .step-copy {
  display: block;
  font-size: 24px;
  line-height: 1.3em;
  font-weight: 300;
  color: #777;
}

/*===========================================================================================================*/
/*=========================================== THE TEAM ======================================================*/
/*===========================================================================================================*/
.about-team {
  padding: 105px 0 125px;
}
/* the prototype shows four members and the site has three, so the row centres
   whatever the loop returns instead of leaving a gap on the right */
.about-team .team-row {
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
/* same gap-and-pull-back as the differentiators: without it the stacked members
   sit flush against each other */
.about-team .team-row {
  margin-bottom: -45px;
}
.about-team .team-row > div {
  margin-bottom: 45px;
}
.about-team .member-link {
  display: block;
  text-decoration: none;
}
.about-team .member-link .img {
  display: block;
  height: 340px;
  margin-bottom: 18px;
  background-color: #ebebeb;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.about-team .member-link .name {
  display: block;
  font-size: 24px;
  line-height: 35px;
  color: #fff;
}
.about-team .member-link .title {
  display: block;
  font-size: 16px;
  line-height: 20px;
  color: #fff;
}
.about-team .member-link:hover .name {
  color: #c1d9ff;
}

/*===========================================================================================================*/
/*=========================================== AWARDS ========================================================*/
/*===========================================================================================================*/
.about-awards {
  padding: 105px 0 100px;
  background-color: #fff;
}
.about-awards .awards-list {
  margin: 0;
  padding: 0;
  text-align: center;
}
.about-awards .awards-list > li {
  padding: 0 30px;
}
.about-awards .awards-list > li img {
  display: block;
  width: 133px;
}

/*===========================================================================================================*/
/*=========================================== CTA BANNER ====================================================*/
/*===========================================================================================================*/
.about-cta {
  padding: 163px 0;
  position: relative;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.about-cta .cta-card {
  max-width: 548px;
  padding: 50px 40px;
  background-color: #fff;
}
.about-cta .cta-card h2 {
  margin: 0 0 28px;
  font-size: 35px;
  line-height: 1.2em;
  font-weight: 300;
  text-transform: none;
  color: #103166;
}
.about-cta .cta-card h2 strong {
  font-weight: 500;
}
.about-cta .cta-card p {
  margin: 0 0 60px;
  font-size: 20px;
  line-height: 1.4em;
  font-weight: 300;
  color: #000;
}
.about-cta .cta-card .btn-layout {
  display: block;
  width: 100%;
}

/*===========================================================================================================*/
/*=========================================== RESPONSIVE ====================================================*/
/*===========================================================================================================*/
@media screen and (max-width: 1200px) {
  .about-process .process-list .step-mark {
    margin: 0 25px;
  }
  .about-process .process-list .step-text {
    padding: 0 15px;
  }
  .about-process .process-list .step-text .step-title {
    font-size: 30px;
    margin-bottom: 20px;
  }
  .about-process .process-list .step-text .step-copy {
    font-size: 20px;
  }
}
@media screen and (max-width: 991px) {
  .about-intro {
    padding: 40px 0 60px;
  }
  .about-apart,
  .about-team,
  .about-awards {
    padding: 70px 0 60px;
  }
  .about-page .section-heading {
    margin-bottom: 50px;
  }
  .about-process {
    padding: 60px 0 40px;
  }
  /* the rail cannot run between two stacked halves, so each stage becomes a
     plain image-over-copy block and both the rail and its dot are dropped */
  /* padding, not margin: first-style.css sets .list-unstyled li { margin: 0
     !important }, which a margin here would lose to */
  .about-process .process-list > li,
  .about-process .process-list > li:nth-child(even) {
    display: block;
    padding-bottom: 45px;
  }
  .about-process .process-list > li:last-child {
    padding-bottom: 0;
  }
  .about-process .process-list:before,
  .about-process .process-list .step-mark {
    display: none;
  }
  /* only the horizontal padding is reset: the desktop rules set nothing else,
     and a blanket `padding: 0` here outranked the padding-top below on the
     even stages, leaving PLAN and DELIVER without their gap */
  .about-process .process-list .step-img,
  .about-process .process-list .step-text,
  .about-process .process-list > li:nth-child(even) .step-img,
  .about-process .process-list > li:nth-child(even) .step-text {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .about-process .process-list .step-text {
    padding-top: 22px;
  }
  .about-cta {
    padding: 70px 0;
  }
  .about-cta .cta-card {
    max-width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .about-page .section-heading .heading-bar {
    width: 180px;
  }
  .about-page .section-heading p,
  .about-intro .intro-img {
    font-size: 18px;
  }
  .about-intro .heading-bar {
    margin-top: 25px;
  }
  .about-apart .row {
    margin-bottom: -40px;
  }
  .about-apart .apart-item {
    margin-bottom: 40px;
  }
  .about-process .process-list .step-text .step-title {
    font-size: 26px;
  }
  .about-process .process-list .step-text .step-copy {
    font-size: 18px;
  }
  .about-team .member-link .img {
    height: 300px;
  }
  .about-cta .cta-card {
    padding: 35px 25px;
  }
  .about-cta .cta-card h2 {
    font-size: 28px;
  }
  .about-cta .cta-card p {
    font-size: 18px;
    margin-bottom: 35px;
  }
}