/* ===================== About Us ===================== */
.page-about h1,
.page-about h2 { color: var(--ink-2); font-weight: 700; padding-bottom: 10px; }
.page-about p { font-size: 14px; line-height: 21px; }

/* ---------- intro ---------- */
.about-top { padding-top: 120px; }
.about-intro { width: 64%; margin: 0 auto; text-align: center; }
.about-intro h1 { margin-top: 8px; font-size: 64px; line-height: 83.2px; }
.about-intro p { max-width: 403px; margin: 8px auto 0; color: #5a5b5c; }
.about-cta { margin-top: 32px; box-shadow: 0 10px 20px 0 rgba(247, 139, 0, 0.23); }

/* ---------- mission / story rows: image bleeds to the screen edge ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; column-gap: 5.55%; align-items: start; }
.split-img-left { margin-top: 120px; }
.split-img-right { margin-top: 50px; }
.split-img img { width: 100%; }
.split-text { padding-top: 100px; color: var(--ink-2); }
.split-img-left .split-text { padding-right: 8vw; }
.split-img-right .split-text { padding-left: 8vw; }
.split-text h2 { font-size: 44px; line-height: 57.2px; }
.split-text h2 + p { margin-top: 8px; }
.split-text p + p { margin-top: 30px; }
.split-text .btn { margin-top: 20px; padding: 5px 20px; }

/* ---------- timeline ---------- */
.story { padding: 70px 0 139px; }
.story h2 { color: var(--white); font-size: 44px; line-height: 57.2px; text-align: center; }
.story-grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 5.5%; margin-top: 28px; }
.story-card { min-height: 390px; padding: 30px; background: var(--white); border-radius: 5px; color: #535557; }
.story-card img { width: auto; height: 32px; }
.story-card h3 { margin-top: 9px; font-size: 24px; font-weight: 700; line-height: 43.2px; color: var(--ink-2); padding-bottom: 18px; }
.story-card p { color: #535557; }
.story-card p + .dash-list { margin-top: 16px; }
.dash-list { padding-bottom: 17px; }
.dash-list li {
  padding-left: 30px;
  font-size: 13px;
  line-height: 22px;
  background: url("../../assets/img/bullet-icon.png") no-repeat 0 10px;
}
.dash-list li + li { margin-top: 7px; }

/* ---------- career ---------- */
.career { padding: 116px 0 20px; }
.career-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 5.5%; align-items: center; }
.career-img img { width: 100%; }
.career-text { margin-bottom: 30px; }
.career-text h2 { font-size: 44px; line-height: 57.2px; }
.career-text p { color: #5a5b5c; }
.career-text h2 + p { margin-top: 8px; }
.career-text p + p { margin-top: 30px; }
.career-text a { color: var(--orange); }

@media (min-width: 981px) and (max-width: 1279px) {
  .career-text br { display: none; }
}

/* ---------- tablet ---------- */
@media (max-width: 980px) {
  .about-intro { width: 80%; }
  .about-intro h1 { font-size: 45px; line-height: 58.5px; }
  .about-intro p { max-width: none; }

  .split { grid-template-columns: 1fr; }
  .split-img-right .split-img { order: -1; }
  .split-img-right { margin-top: 66px; }
  .split-text,
  .split-img-left .split-text,
  .split-img-right .split-text { padding: 69px 50px 0; text-align: center; }
  .split-img-right .split-text { padding-top: 40px; padding-bottom: 60px; }
  .split-text h2,
  .story h2,
  .career-text h2 { font-size: 35px; line-height: 45.5px; }

  .story { padding: 70px 0 98px; }
  .story-grid { grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 30px; }
  .story-card h3 { margin-top: 13px; padding-bottom: 14px; font-size: 22px; line-height: 39.6px; }

  .career { padding: 115px 0 46px; }
  .career-row { grid-template-columns: 1fr; text-align: center; }
  .career-text { margin: 50px 0 0; }
  .career-text br { display: none; }
}

/* ---------- phone ---------- */
@media (max-width: 767px) {
  .about-top { padding-top: 50px; }
  .about-intro h1 { font-size: 26px; line-height: 33.8px; }
  .about-cta { margin-top: 30px; }
  .split-img-left { margin-top: 50px; }
  .split-text,
  .split-img-left .split-text,
  .split-img-right .split-text { padding: 70px 30px 0; }
  .split-img-right .split-text { padding-top: 70px; padding-bottom: 70px; }
  .split-text .btn { margin-top: 20px; }
  .split-text h2,
  .story h2,
  .career-text h2 { font-size: 26px; line-height: 33.8px; }

  .story { padding: 70px 0 40px; }
  .story-grid { grid-template-columns: 1fr; }
  .story-card h3 { margin-top: 13px; padding-bottom: 14px; font-size: 20px; line-height: 36px; }

  .career { padding: 111px 0 46px; }
  .career-img { display: none; }
  .career-text { margin-top: 0; }
}