/* ============================================================
   Shared case-study layout / hierarchy styles.
   Wrap a case study's body content in <div class="case-study"> …
   Established on case-study-enterprise-security and reused across
   the recent case-study family (CLIENT PROFILE / CHALLENGE /
   SOLUTION / RESULTS / IMPACT + closing block).
   ============================================================ */

.case-study { color: #3a4a51; }

/* Small uppercase kicker under the "Other case studies" link */
.case-study .cs-eyebrow {
  text-transform: uppercase; letter-spacing: .14em; font-size: .82em;
  font-weight: 700; color: #63bfab; margin: .25em 0 1.5em;
}

/* Each block: generous spacing + hairline separator */
.case-study .cs-section {
  margin-top: 3.25em; padding-top: 3.25em; border-top: 1px solid #e7edef;
}
.case-study .cs-section--first {
  margin-top: 1.25em; padding-top: 0; border-top: 0;
}

/* Section label (CLIENT PROFILE, THE CHALLENGE, …) with green accent bar */
.case-study .cs-section > h2 {
  color: #20424d; font-weight: 700; letter-spacing: .01em; margin: 0 0 .7em;
}
.case-study .cs-section > h2::before {
  content: ""; display: block; width: 54px; height: 4px;
  background: #63bfab; border-radius: 2px; margin-bottom: .85em;
}

/* Big client-profile title */
.case-study .cs-title {
  font-size: 1.9em; line-height: 1.2; font-weight: 700; color: #20424d; margin: 0 0 .7em;
}

/* Sub-title that opens each section (introduces the paragraphs below).
   Selector out-specifies `.cs-section p` so weight/size are not reset. */
.case-study .cs-section p.cs-lead {
  font-family: "WorkSans-Bold"; font-size: 1.4em; line-height: 1.3;
  font-weight: 700; color: #20424d; margin: 0 0 1.1em;
}

/* Attribute badges/chips */
.case-study .cs-chips {
  display: flex; flex-wrap: wrap; gap: .6em; margin: .4em 0 0; padding: 0; list-style: none;
}
.case-study .cs-chip {
  display: inline-flex; align-items: center;
  background: #edf7f4; color: #1d7a66;
  border: 1px solid #c3e6dc; border-radius: 999px;
  padding: .5em 1.05em; font-size: .95em; font-weight: 600; line-height: 1.2;
}

/* Body copy: paragraphs and bullets share the exact same typography */
.case-study .cs-section p,
.case-study .cs-section li {
  font-family: "WorkSans"; font-weight: 300; font-size: 1em; color: #1b1b1b; line-height: 1.65;
}
.case-study .cs-section ul { margin-bottom: 1em; }

/* Inline links: clearly recognisable (brand green + underline) */
.case-study .cs-section a,
.case-study .cs-outro a {
  color: #1d7a66; font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
  transition: color .2s ease;
}
.case-study .cs-section a:hover,
.case-study .cs-section a:focus,
.case-study .cs-outro a:hover,
.case-study .cs-outro a:focus {
  color: #12503f; text-decoration: underline;
}

/* Closing block: takeaway summary + call to action, set apart from IMPACT */
.case-study .cs-outro {
  margin-top: 3.25em; padding-top: 3.25em; border-top: 1px solid #e7edef;
}
.case-study .cs-outro .cs-summary {
  font-family: "WorkSans"; font-weight: 300; font-size: 1.12em; color: #2c434e;
  line-height: 1.6; border-left: 4px solid #63bfab; padding-left: 1.1em; margin: 0 0 2em;
}
.case-study .cs-outro .cs-cta {
  background: #f2f8f6; border: 1px solid #d5ebe3; border-radius: 14px;
  padding: 1.9em 2em;
}
.case-study .cs-outro .cs-cta-hook {
  font-family: "WorkSans-Bold"; font-weight: 700; font-size: 1.2em; color: #20424d;
  line-height: 1.45; margin: 0 0 .7em;
}
.case-study .cs-outro .cs-cta-text {
  font-family: "WorkSans"; font-weight: 300; font-size: 1em; color: #1b1b1b;
  line-height: 1.65; margin: 0;
}

@media (max-width: 575.98px) {
  .case-study .cs-title { font-size: 1.5em; }
  .case-study .cs-section { margin-top: 2.4em; padding-top: 2.4em; }
}