/* cs_title — case-study title band.
   Values from spec ## Computed Styles: 1440 = base rules; 768 -> @media
   (max-width: 991px); 375 -> @media (max-width: 479px) (run-canonical
   breakpoint set {479,767,991,1919}). All shared canonical classes are scoped
   under the component-unique root .c-cs_title__heading-wrap-3. */

/* ---- Section wrapper — path 0 (padding 96px 40px 20px @1440) ------------- */
.c-cs_title__heading-wrap-3 {
  display: block;
  padding: 96px var(--space-40) var(--space-20); /* 96px: no --space-96 token this run */
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: 400;
  line-height: var(--line-height-body);
  color: var(--color-text-body);
  /* SDC-preview UA body-margin neutraliser: the bare preview body carries an
     8px TOP margin (left already 0), so cancel just the top so the band's top
     edge aligns with the source crop. The composed-page reset below zeroes it
     under .region-content, where the body margin is already 0. */
  margin: -8px 0 0 0;
}
.region-content .c-cs_title__heading-wrap-3 {
  margin: 0;
  width: 100%;
}

/* ---- Container column — path 0.0 (max-width 1280, centred) --------------- */
.c-cs_title__heading-wrap-3 .c-about_info__heading-wrap {
  display: block;
  width: 100%;
  max-width: 1280px; /* no --container-max token this run */
  margin-inline: auto;
}

/* ---- Inner hero stack — path 0.0.0 (flex column, gap 64px, max 900) ------ */
.c-cs_title__heading-wrap-3 .c-cs_title__heading-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
  width: 100%;
  max-width: 900px; /* no --space token; content column cap */
}

/* ---- Eyebrow — path 0.0.0.0.0 ("Case study", red kicker) ----------------- */
.c-cs_title__heading-wrap-3 .c-cs_banner__body {
  display: block;
  margin: 0 0 var(--space-20);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 500;
  letter-spacing: -0.32px;
  text-align: left;
  color: var(--color-bg-accent); /* rgb(237,28,36) — exact token match */
}

/* ---- Heading — path 0.0.0.0.1 (styled H1) -------------------------------- */
.c-cs_title__heading-wrap-3 .c-cookie__heading-2 {
  display: block;
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-h1); /* 60px */
  font-weight: 500;
  line-height: var(--line-height-h1); /* 68px */
  letter-spacing: -3px;
  color: var(--color-text-h1);
}

/* ============================ 768 (@media max-width:991px) ================= */
@media (max-width: 991px) {
  .c-cs_title__heading-wrap-3 {
    padding: var(--space-64) var(--space-40); /* 64px 40px @768 */
  }
  .c-cs_title__heading-wrap-3 .c-cs_title__heading-wrap {
    gap: var(--space-40); /* 40px @768 */
  }
  .c-cs_title__heading-wrap-3 .c-cs_banner__body {
    margin: 0 0 var(--space-12); /* 12px @768 */
  }
  .c-cs_title__heading-wrap-3 .c-cookie__heading-2 {
    font-size: 40px;     /* no --font-size token this run */
    line-height: 48px;   /* no --line-height token this run */
    letter-spacing: -2px;
  }
}

/* ============================ 375 (@media max-width:479px) ================= */
@media (max-width: 479px) {
  .c-cs_title__heading-wrap-3 {
    padding: var(--space-64) var(--space-20); /* 64px 20px @375 (pb-20 side/bottom) */
    /* cancel the preview body's 8px LEFT margin too — no longer absorbed at
       mobile width (composed-page reset above still zeroes it). */
    margin: -8px 0 0 -8px;
  }
  .c-cs_title__heading-wrap-3 .c-cs_title__heading-wrap {
    gap: 32px; /* no --space-32 token this run */
  }
  .c-cs_title__heading-wrap-3 .c-cs_banner__body {
    margin: 0 0 var(--space-12); /* 12px @375 */
  }
  .c-cs_title__heading-wrap-3 .c-cookie__heading-2 {
    font-size: 28px;     /* no --font-size token this run */
    line-height: 36px;   /* no --line-height token this run */
    letter-spacing: -1px;
  }
}