/* Extra blocks for the designed case study, layered on the standard .article
   (chip, h1, rule, prose) that every case study already uses. Site palette
   (navy and amber), no per-page theming. Loaded after case-studies.css. */

/* The category pill from the case study template. The site's .chip--dark is
   otherwise unstyled, so this is scoped to case-study.css (this page only). */
.article .chip--dark {
  display: inline-block; padding: 5px 14px; border-radius: 9999px;
  background: var(--navy); color: var(--warm-white);
  font-weight: 600; font-size: 12px; letter-spacing: .03em; text-transform: uppercase;
}

.article .cs-standfirst { font-size: 19px; line-height: 1.6; color: #4A4A5A; margin: 0 0 4px; max-width: 720px; }

/* Proof-point band */
.cs-stats {
  border: 1px solid var(--border); border-radius: 12px; padding: 24px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; text-align: center;
  margin: 8px 0 28px;
}
.cs-stat__n { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 6vw, 30px); line-height: 1; color: var(--amber); }
.cs-stat__label { font-size: 12.5px; line-height: 1.4; color: var(--muted-foreground); margin-top: 6px; }

/* Pull-quote, amber card */
.cs-quote { background: var(--amber); border-radius: 12px; padding: 24px 26px; margin: 8px 0 26px; }
.cs-quote p { font-family: var(--font-display); font-weight: 600; font-style: italic; font-size: 18px; line-height: 1.5; color: var(--navy); margin: 0; }

/* Definition-style list with an amber rule per item */
.cs-defs { display: flex; flex-direction: column; gap: 18px; margin: 8px 0 28px; }
.cs-def { border-left: 2px solid var(--amber); padding-left: 18px; }
.cs-def__label { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--navy); margin: 0 0 5px; }
.cs-def__text { font-size: 16px; line-height: 1.7; color: #4A4A5A; margin: 0; }

/* Tags and source, below the body */
.cs-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.cs-foot__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.cs-foot__tag { padding: 4px 12px; border-radius: 9999px; background: var(--muted-bg); font-weight: 600; font-size: 11.5px; color: var(--muted-foreground); }
.cs-foot__source { font-weight: 600; font-size: 13px; color: var(--amber); text-decoration: none; white-space: nowrap; }
.cs-foot__source:hover { color: var(--navy); }

@media (min-width: 620px) {
  .cs-stats { grid-template-columns: repeat(4, 1fr); padding: 28px; }
}

/* The hero rule from the case study template: a hairline between the
   standfirst and the dateline, so the meta reads as a footer to the hero
   rather than as another paragraph. */
.cs-standfirst + .article__tags {
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
.article__meta {
  margin: 0;
  font-weight: var(--fw-semibold);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--muted-foreground);
  text-transform: uppercase;
}

/* ------------------------------------------- hero facts, case studies

   Sector / Work / Period on a hairline under the standfirst, the same
   three-facts-on-a-rule device the service pages open with. That one is
   set for a dark hero; this is the light-hero twin, so the rule and the
   label take the page's own border and muted tokens. */
.cs-facts {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  margin: var(--space-8) 0 var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}
.cs-facts dt {
  font-weight: var(--fw-semibold);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: var(--space-1);
}
.cs-facts dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 17px;
  line-height: 1.4;
  color: var(--navy);
}

/* --------------------------------------------- "what this shows" band

   The argument the page exists to make, set larger than the body and
   given the page's dark band. The heading stays a real h2 so the
   outline is unbroken, set as an eyebrow rather than a display size:
   the copy underneath is what should carry the weight. */
.cs-shows { max-width: 820px; }
.cs-shows__label {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: 11.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--amber-light);
  margin: 0 0 var(--space-3);
}
.cs-shows p {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: clamp(19px, 2.2vw, 23px);
  line-height: 1.55;
  color: var(--warm-white);
  margin: 0;
}