/* =========================================================================
   Case study pages — redesign (Declan's 10 Oct 2026 copy).
   Loaded after styles.css, chrome.css and home.css; reuses the homepage's
   narrative, gaps, voice and CTA components. Every treatment is native
   Squarespace 7.1: section backgrounds, image blocks, text blocks, dividers.
   ========================================================================= */

/* Hero */
.cs-hero { padding-top: var(--header-height); }
.cs-hero .content-wrapper { padding: 2.5vmax 0 5vmax; }
.cs-back { display: inline-flex; gap: .5em; align-items: center; margin-bottom: 3vmax; font-weight: 500; color: rgba(255, 255, 255, .8); text-decoration: none; }
.cs-back:hover { color: var(--white); }
.cs-logo { display: block; height: 34px; width: auto; aspect-ratio: var(--ar); margin-bottom: 2rem; }
.cs-hero h1 { margin: 0 0 .5em; max-width: 22em; }
.cs-hero .lede { margin: 0; max-width: 48em; color: rgba(255, 255, 255, .85); }
.cs-facts { display: flex; flex-wrap: wrap; gap: 0 4rem; margin: 3vmax 0 0; padding-top: 1.5rem; border-top: 1px solid var(--rule-dark); max-width: 54em; }
.cs-facts div { flex: 0 1 auto; min-width: 8em; padding: 0; }
.cs-facts dt { margin: 0 0 .35rem; font-size: .9rem; font-weight: 600; color: var(--accent); }
.cs-facts dd { margin: 0; font-size: var(--fs-large); font-weight: 500; color: var(--white); }

/* Wide image */
.cs-image-sec .content-wrapper { padding: 5vmax 0 0; }
.cs-image { aspect-ratio: 24 / 11; height: auto; border-radius: 20px; overflow: hidden; }
.cs-image img { width: 100%; height: 100%; object-fit: cover; }

/* Challenge + What Waters did */
.cs-body .cs-row + .cs-row { margin-top: 6vmax; padding-top: 6vmax; border-top: 1px solid var(--rule); }
.cs-body .narrative-body > p.large { margin-top: 0; }
.cs-person { margin: 2.5rem 0 0; max-width: 260px; }
.cs-person .img-block { aspect-ratio: 1 / 1; height: auto; border-radius: 15px; overflow: hidden; }
.cs-person img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.cs-person figcaption { display: flex; flex-direction: column; gap: .15rem; margin-top: 1rem; padding-left: 1rem; border-left: 3px solid var(--accent); }
.cs-person figcaption strong { color: var(--black); }
.cs-person figcaption span { color: var(--grey); }

/* The result */
.cs-results h2 { margin: 0; }
.cs-results .txt { margin-bottom: 5rem; }
.results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 5vw; margin: 0; padding: 0; list-style: none; }
.result { padding: 3rem 0 4.5rem; border-top: 1px solid var(--rule-dark); }
.result-num { display: block; margin-bottom: 1.5rem; font-weight: 600; color: var(--accent); }
.result p { margin: 0; font-size: var(--fs-h3); font-weight: 500; line-height: 1.3; color: var(--white); }

/* Client voice, inside the results band */
.cs-voice { margin-top: 6vmax; padding-top: 6vmax; border-top: 1px solid var(--rule-dark); }

/* The company — muted, separate */
.cs-company { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 6vw; padding-top: 2rem; border-top: 1px solid var(--rule); }
.cs-company h2 { margin: 0; font-size: var(--fs-large); font-weight: 600; color: var(--grey); }
.cs-company p { margin: 0; color: var(--black); }
.cs-company-sec .content-wrapper { padding-bottom: 0; }

@media (max-width: 767px) {
  .cs-logo { height: 26px; }
  .cs-facts { gap: 1rem 2rem; }
  .cs-facts div { min-width: 0; }
  .cs-facts dd { font-size: 1rem; }
  .cs-facts div:nth-child(2) { flex-grow: 2; }
  .cs-image { aspect-ratio: 4 / 3; border-radius: 15px; }
  .results { grid-template-columns: 1fr; }
  .cs-company { grid-template-columns: 1fr; gap: 1rem; }
  .cs-person { max-width: 200px; margin-top: 1.5rem; }
}

/* =========================================================================
   Item pagination (portfolio prev / next)
   ========================================================================= */
.item-pagination {
  display: flex;
  padding: 3vw 4vw;
  background: var(--light);
  color: var(--black);
}
.item-pagination-link {
  display: flex;
  align-items: center;
  max-width: 50%;
  width: auto;
  text-align: left;
  color: var(--black);
  text-decoration: none;
}
.item-pagination-link--prev { margin-left: 0; margin-right: auto; }
.item-pagination-link--next { margin-left: auto; margin-right: 0; text-align: right; }
.item-pagination-prev-next { display: none; }
.item-pagination-title {
  margin: 0; padding: 0;
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: var(--fs-large);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--black);
}
.item-pagination-icon { width: 18px; height: 32px; padding-right: 25px; box-sizing: content-box; line-height: 1em; }
.item-pagination-link--next .item-pagination-icon { padding-right: 0; padding-left: 25px; }
.item-pagination-icon svg { display: block; width: 18px; height: 32px; stroke: var(--black); stroke-width: 1px; }
@media (max-width: 767px) {
  .item-pagination { padding: 3vw 6vw; }
}

/* =========================================================================

/* Older studies (26 Oct 2026): live "Impact" lead words shown large, plus the strategy lead-in line */
.result-lead { display: block; margin-bottom: .6rem; font-size: var(--fs-h2); font-weight: 600; line-height: 1.1; color: var(--accent); }
.result--lead p { font-size: var(--fs-large); font-weight: 500; line-height: 1.45; color: rgba(255, 255, 255, .85); }
.did-intro { margin: 0 0 1.5rem !important; color: var(--black); }
/* 27 Oct 2026: multi-paragraph challenge and "The bigger picture" (Synack, Exclaimer) */
.cs-body .narrative-body > p.large + p.large { margin-top: 1.1rem; }
.cs-company-body p { margin: 0; color: var(--black); }
.cs-company-body p + p { margin-top: 1rem; }
/* Legal pages (27 Oct 2026): one readable column */
.legal { max-width: none; }
.legal h2 { margin: 2.6rem 0 .8rem; font-size: var(--fs-h3); line-height: 1.25; color: var(--black); }
.legal h2:first-child { margin-top: 0; }
.legal p { margin: 0 0 1rem; font-size: var(--fs-large); line-height: 1.6; color: var(--black); }
.legal a { color: var(--black); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .2em; overflow-wrap: anywhere; }
.legal-updated { margin: 0 0 1rem; font-size: .9rem; font-weight: 500; letter-spacing: .02em; color: rgba(255, 255, 255, .75); }