/* ---------- About and case studies, on the landing page's system ---------- */

/* ===== Case studies ===== */
/* the nav replaces the old Back bar, so content starts below it */
.cs-page.page-wrapper.project-padding { padding-top: 0 !important; }
.cs-page .main-section { padding-top: 0 !important; }
.cs-page .main-section.cs-first { padding-top: 136px !important; }
@media (max-width: 767px) { .cs-page .main-section.cs-first { padding-top: 150px !important; } }
/* the old spacers between chapters all become one section gap */
.cs-page .mt-83, .cs-page .mt-104, .cs-page .mt-106, .cs-page .mt-120, .cs-page .mt-130, .cs-page .mt-141,
.cs-page .mt-149, .cs-page .mt-158, .cs-page .mt-171 { margin-top: var(--section-gap) !important; }
.cs-page .all-h4--hedding.font-24-24, .cs-page .all-h4--hedding.font-24, .cs-page .h2-white.text-bold { margin-top: 0 !important; }
.cs-back { display: inline-block; margin-bottom: 20px; font: 500 15px/1 var(--sans); color: var(--grey) !important; text-decoration: none; transition: color .2s; }
.cs-back:hover { color: var(--silver) !important; }

/* title and meta: like the home hero */
.cs-page h1.all-h1-hedding {
  font-size: 56px !important; line-height: 1.12 !important; letter-spacing: -0.012em !important; margin: 0 0 16px !important; text-transform: none !important;
}
.cs-page .d-flex-user { gap: 8px; margin: 0; }
.cs-page .praagraph-18 { font: 400 16px/1.5 var(--sans) !important; color: var(--grey) !important; margin: 0; }
.cs-page .praagraph-18.text-bold { color: var(--silver) !important; font-weight: 500 !important; }
@media (max-width: 991px) { .cs-page h1.all-h1-hedding { font-size: 46px !important; } }
@media (max-width: 767px) { .cs-page h1.all-h1-hedding { font-size: 34px !important; line-height: 1.18 !important; } }

/* chapter headings become the same hairline label as "Selected work" */
.cs-page h2.all-h4--hedding, .cs-page h4.all-h4--hedding.font-24, .cs-page h4.all-h4--hedding.font-24-24, .cs-page h3.all-h4--hedding,
.cs-page h2.all-h1-hedding.font-24-24, .cs-page h4.h2-white {
  display: flex !important; align-items: center; gap: 20px; width: 100%;
  font: 500 15px/1.3 var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important;
  color: var(--silver) !important; margin-bottom: var(--label-gap) !important;
}
.cs-page h2.all-h4--hedding::after, .cs-page h4.all-h4--hedding.font-24::after, .cs-page h4.all-h4--hedding.font-24-24::after, .cs-page h3.all-h4--hedding::after,
.cs-page h4.h2-white::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .18; }
.cs-page h2.all-h4--hedding *, .cs-page h4.all-h4--hedding * { color: inherit !important; font: inherit !important; }
/* the small heads in the intro (Overview, My role, Team, Tools) are quiet labels */
.cs-page h4.all-h4--hedding:not(.font-24):not(.font-24-24) { font: 500 15px/1.3 var(--sans) !important; letter-spacing: 0 !important; color: var(--grey) !important; margin-bottom: 12px !important; }

/* body text: the hero paragraph's type */
.cs-page .paragraph-2, .cs-page .res-paragraph, .cs-page .disc-para, .cs-page .p-24:not(.orange):not(h2) {
  font: 400 18px/1.8 var(--sans) !important; letter-spacing: 0 !important; color: var(--silver) !important;
}
.cs-page .paragraph-2.f-16-25-6, .cs-page .f-16-25-6 { font-size: 16px !important; line-height: 1.7 !important; }
.cs-page .image-caption-text { font: 400 14px/1.5 var(--sans) !important; color: var(--grey) !important; }
@media (max-width: 767px) { .cs-page .paragraph-2, .cs-page .res-paragraph, .cs-page .disc-para { font-size: 17px !important; line-height: 1.7 !important; } }

/* pull quotes: the serif, at the statement size */
.cs-page h2.all-h1-hedding:not(.font-24-24) {
  font-size: 40px !important; line-height: 1.25 !important; letter-spacing: -0.012em !important; color: var(--silver) !important; text-transform: none !important;
}
@media (max-width: 991px) { .cs-page h2.all-h1-hedding:not(.font-24-24) { font-size: 32px !important; } }
@media (max-width: 767px) { .cs-page h2.all-h1-hedding:not(.font-24-24) { font-size: 26px !important; } }
.cs-page .f-17 { font: 500 15px/1.4 var(--sans) !important; color: var(--silver) !important; }
.cs-page .paragraph-6 { font: 400 14px/1.4 var(--sans) !important; color: var(--grey) !important; }

/* Visit site / Download app: the same red text link as the cards */
.cs-page .path-icon .arial, .cs-page .path-icon .p-24.orange { font: 500 16px/1 var(--sans) !important; color: var(--bright-red) !important; letter-spacing: 0 !important; }
.cs-page .path-icon img[src*="Vector.png"] { width: 9px !important; height: 9px !important; }

/* cards and boxed panels use the card tokens */
.cs-page .small-card, .cs-page .col-left, .cs-page .feedback-card, .cs-page .border-div {
  background-color: var(--wc-card-bg) !important; border: 1px solid var(--wc-card-border) !important; border-radius: 24px !important;
}
.cs-page .f-12 { font: 400 15px/1.55 var(--sans) !important; color: var(--silver) !important; }

/* ===== About ===== */
.about-page h1.about-title { margin: 0 !important; }
.about-page .about-intro { font: 400 18px/1.8 var(--sans) !important; color: var(--silver) !important; opacity: .82; max-width: 880px; text-wrap: pretty; }
@media (max-width: 767px) { .about-page .about-intro { font-size: 17px !important; line-height: 1.7 !important; } }
.about-page .about_section_header_2 { padding-top: var(--section-gap) !important; padding-bottom: 0 !important; }
.about-page .about_section_header_2 .left-div { margin-top: 0 !important; }
.about-page .p-28.font-weight-600 { font-size: 24px !important; }
.about-page .border-div { background-color: var(--wc-card-bg) !important; border: 1px solid var(--wc-card-border) !important; border-radius: 24px !important; }
.about-page .text-block-15 { font: 500 15px/1 var(--sans) !important; color: var(--silver) !important; }
.about-page .text-block-15 strong { font-weight: 500 !important; }
.mt-99 { margin-top: 0 !important; }
.mt-99 .reviews-section { padding-top: var(--section-gap) !important; }
/* within-chapter spacing uses the content gap; the intro's last line adds nothing extra */
.cs-page .all-h4--hedding.mt-104 { margin-top: var(--content-gap) !important; }
.cs-page .mt-56 { margin-top: var(--content-gap) !important; }
.cs-page .banner-disc .banner-left > div:last-child > .font-18-22-32:last-child { margin-bottom: 0 !important; }
.cs-page .path-icon { display: inline-flex; align-items: center; gap: 6px; color: var(--bright-red); }
.cs-page .cs-arrow { width: 16px; height: 16px; flex: none; }

/* label headings: the text stays in one piece next to the hairline */
.cs-page .lbl-t { flex: 0 1 auto; }
/* pull quotes and the last chapter: no extra spacer on top of the section gap */
.cs-page h2.all-h1-hedding.mobile-mt-60 { margin-top: 0 !important; }
.cs-page .left-out { padding-bottom: 0 !important; }
.cs-page .setp-d-flex { row-gap: var(--section-gap) !important; }
.cs-page .d-flex-user { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; }
.cs-page .d-flex-user .praagraph-18:first-child { color: var(--silver) !important; font-weight: 500 !important; }