/* Case study chrome -------------------------------------------------------
   The vocabulary every case study shares, at the exact values in the style
   guide's "Case study page standard". Page-specific components live in the
   per-page stylesheet.
-------------------------------------------------------------------------- */

/* Type --------------------------------------------------------------------- */

.cs-eyebrow {
  font-size:clamp(11.5px, 1.15vw, 13px);
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:#647670;
}

.cs-h1 {
  margin:0;
  font-family:'Figtree', sans-serif;
  font-weight:500;
  font-size:clamp(38px, 8.5vw, 68px);
  line-height:1.06;
  letter-spacing:-0.03em;
  text-wrap:balance;
}

.cs-h2 {
  margin:0;
  font-family:'Figtree', sans-serif;
  font-weight:400;
  font-size:clamp(30px, 4vw, 40px);
  line-height:1.16;
  letter-spacing:-0.02em;
  text-wrap:balance;
}

/* Change Order Management's four section headings carry `text-wrap:normal`
   in the reference. That is not a valid value for text-wrap (wrap | nowrap |
   balance | stable | pretty), so the declaration is dropped and those
   headings fall back to the default greedy wrap rather than balancing. With
   the value lifted into .cs-h2, the dropped declaration no longer overrides
   anything, so the intent is restated here with a value that parses. */
.cs-h2--wrap { text-wrap:wrap; }

.cs-statement {
  margin:0;
  font-family:'Figtree', sans-serif;
  font-weight:500;
  font-size:clamp(23px, 3vw, 30px);
  line-height:1.24;
  letter-spacing:-0.02em;
  color:#1B302A;
  text-wrap:balance;
}

.cs-intro {
  margin:0;
  font-size:clamp(17px, 1.75vw, 20px);
  line-height:1.64;
  color:#4E625B;
  font-weight:300;
  /* 19 of the 20 section intros across the four case studies set this. It only
     changes rendering where it actually saves an orphan, which is why its
     absence went unnoticed until a Project Unify paragraph broke differently. */
  text-wrap:pretty;
}
/* The Turn Control Center background paragraph is the one that does not. */
.cs-intro--greedy { text-wrap:normal; }

.cs-body {
  margin:0;
  font-size:clamp(16px, 1.6vw, 18px);
  line-height:1.72;
  color:#4E625B;
  font-weight:300;
  text-wrap:pretty;
}
/* The same body copy at the looser leading used inside column groups. */
.cs-body--cols { line-height:1.7; }
.cs-body--wide { line-height:1.75; }

/* A 12px tracked column label. --ruled adds the hairline it sits over when it
   heads a column; bare, it also labels rows and diagram groups. */
.cs-collabel {
  font-family:'Figtree', sans-serif;
  font-weight:500;
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#647670;
}
.cs-collabel--ruled {
  padding-bottom:14px;
  border-bottom:1px solid #E9E9E6;
}

/* Title block. Identical on every case study: eyebrow, masked h1, lede. */
.cs-title {
  display:flex;
  flex-direction:column;
  gap:30px;
  padding:78px max(clamp(24px, 6vw, 80px), calc((100% - 1280px) / 2)) 56px;
}
.cs-title__lede { max-width:960px; line-height:1.64; text-wrap:pretty; }
/* Change Order Management and Project Unify run their hero lede a little
   wider. Two pages each way, so neither width is the default. */
.cs-title__lede--wide { max-width:1005px; }
.cs-title .cs-h1 > span:nth-of-type(2) > span { transition-delay:90ms; }
.cs-title .cs-h1 > span:nth-of-type(3) > span { transition-delay:180ms; }
.cs-title .cs-h1 > span:nth-of-type(4) > span { transition-delay:270ms; }

/* Layout ------------------------------------------------------------------- */

.cs-section {
  padding:clamp(80px, 12vw, 136px) max(clamp(24px, 6vw, 80px), calc((100% - 1280px) / 2));
}
.cs-section--open-bottom {
  padding:clamp(80px, 12vw, 136px) max(clamp(24px, 6vw, 80px), calc((100% - 1280px) / 2)) 0;
}
.cs-section--lilac { background:#FAF9FE; }

.cs-stack { display:flex; flex-direction:column; }

/* Content pair. The 88px column gap is the enforced value. */
.cs-pair {
  display:grid;
  column-gap:88px;
  row-gap:0;
  align-items:center;
}

/* Copy column internal gap. */
.cs-copy { display:flex; flex-direction:column; gap:22px; }

.cs-cols3 {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:48px;
}

/* A label/value row: a 200px label column beside copy at a 32px gap. Not a
   content pair, which is why it carries its own hook and why the enforced
   88px pair gap does not apply to it. */
.cs-labelrow {
  display:grid;
  grid-template-columns:200px minmax(0, 1fr);
  column-gap:32px;
  row-gap:14px;
  align-items:start;
}

/* A centred callout on the near-white rose. Used for "The problem" on more
   than one case study. */
.cs-callout {
  display:flex;
  flex-direction:column;
  padding:44px 48px;
  border-radius:16px;
  background:#FEFBFB;
  box-shadow:inset 0 0 0 1px #F3E9EC;
}
.cs-callout__inner {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:20px;
}
.cs-callout__text {
  margin:0 auto;
  width:100%;
  /* The only fixed-px body size on the site, which is why it alone never
     scaled. Same ceiling, now with a floor. */
  font-size:clamp(17px, 1.75vw, 20px);
  line-height:1.62;
  color:#1B302A;
  font-weight:300;
  text-wrap:balance;
}

/* Surfaces ----------------------------------------------------------------- */

.cs-panel {
  position:relative;
  z-index:1;
  border-radius:16px;
  background:#FFFFFF;
  box-shadow:0 0 0 1px #E9E9E6, 0 8px 22px rgba(27, 48, 42, 0.10);
}

/* Demo ---------------------------------------------------------------------
   The frame box, plus the reveal. A demo is held transparent until it has
   painted and been primed, so its first frames are never visible.
-------------------------------------------------------------------------- */

[data-demo] > iframe { transition:opacity 240ms ease; }
[data-demo]:not([data-ready]) > iframe { opacity:0; }

.cs-demo-wrap {
  padding:0 max(clamp(24px, 6vw, 80px), calc((100% - 1280px) / 2)) clamp(80px, 12vw, 136px);
}
.cs-demo-note {
  display:none;
  padding:0 max(clamp(24px, 6vw, 80px), calc((100% - 1280px) / 2)) clamp(80px, 12vw, 136px);
}
.cs-demo-note__inner {
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px 20px;
  border-radius:12px;
  background:#FAF9FE;
  box-shadow:inset 0 0 0 1px #EFEDF7;
}
.cs-demo-note__text {
  font-size:15px;
  line-height:1.5;
  color:#4E625B;
  font-weight:300;
}

/* Responsive --------------------------------------------------------------- */

@media (max-width: 1040px) {
  [data-pair] { grid-template-columns:minmax(0, 1fr) !important; column-gap:0 !important; row-gap:34px !important; }
  [data-pair][data-visual-first] > *:first-child { order:2; }
  [data-pair]:not([data-cap]):not([data-hold]) > * { max-width:none !important; }
  /* Label/value rows, not content pairs. These values are what [data-pair]
     used to give them; kept verbatim so the layout is unchanged. */
  [data-labelrow] { grid-template-columns:minmax(0, 1fr) !important; column-gap:0 !important; row-gap:34px !important; }
  [data-labelrow] > * { max-width:none !important; }
  /* The capped child is whichever one holds the exhibit, and data-visual-first
     puts it first. Unqualified, this capped the copy instead whenever a pair
     was reversed - which only Project Unify does. */
  [data-pair][data-cap]:not([data-visual-first]) > *:last-child { width:100% !important; max-width:560px !important; margin:0 auto !important; }
  [data-pair][data-cap][data-visual-first] > *:first-child { width:100% !important; max-width:560px !important; margin:0 auto !important; }
  [data-pair][data-hold] { grid-template-columns:minmax(340px, 440px) minmax(0, 1fr) !important; column-gap:44px !important; }
  [data-pair][data-hold] > *:first-child { order:0 !important; }
  [data-fill] { max-width:none !important; }
  /* text-wrap:balance shortens lines to even them out, which reads as a
     narrow ragged block once there is no second column beside it. */
  [data-fillclaim] { max-width:none !important; text-wrap:pretty !important; }
}

@media (max-width: 860px) {
  [data-cols3] { grid-template-columns:minmax(0, 1fr) !important; gap:34px !important; }
  [data-eqlabel] { min-height:0 !important; }
  [data-pair][data-hold] { grid-template-columns:minmax(0, 1fr) !important; row-gap:34px !important; }
  [data-pair][data-hold] > *:first-child { order:2 !important; }
  [data-two-up] { grid-template-columns:minmax(0, 1fr) !important; }
  [data-demo-wrap] { display:none !important; }
  [data-demo-note] { display:block !important; }
}

@media (max-width: 900px) {
  [data-herobreak] { display:none; }
}

/* An icon + name + description card. Used for "What carried beyond" and
   "What it unlocks". ------------------------------------------------------- */

.cs-artifacts {
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  border-radius:12px;
  padding:28px 26px;
  background:#FFFFFF;
  box-shadow:0 0 0 1px #E4E1EE, 0 8px 22px rgba(27, 48, 42, 0.08);
}
.cs-artifacts__item {
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:0 0 20px;
}
.cs-artifacts__item--mid { padding:20px 0; border-top:1px solid #EFEDF7; }
.cs-artifacts__item--last { padding:20px 0 0; border-top:1px solid #EFEDF7; }
.cs-artifacts__item svg { flex:none; color:#4E625B; margin-top:2px; }
.cs-artifacts__text { display:flex; flex-direction:column; gap:5px; }
.cs-artifacts__name {
  font-family:'Figtree', sans-serif;
  font-weight:500;
  font-size:clamp(15px, 1.45vw, 16px);
  line-height:1.4;
  color:#1B302A;
}
.cs-artifacts__desc {
  font-size:clamp(14.5px, 1.4vw, 15.5px);
  line-height:1.6;
  color:#4E625B;
  font-weight:300;
  text-wrap:pretty;
}

/* Next --------------------------------------------------------------------- */

.cs-next {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  padding:clamp(80px, 12vw, 136px) max(clamp(24px, 6vw, 80px), calc((100% - 1280px) / 2));
}
.cs-next__group { display:flex; flex-direction:column; gap:14px; }
.cs-next__title {
  margin:0;
  font-family:'Figtree', sans-serif;
  font-weight:400;
  font-size:30px;
  line-height:1.16;
  letter-spacing:-0.02em;
  text-wrap:balance;
}
.cs-next__link {
  flex:none;
  font-size:clamp(13.5px, 1.35vw, 15px);
  border-bottom:1px solid #D5E4DB;
  padding-bottom:4px;
}

@media (max-width: 560px) {
  [data-pair] blockquote { padding:34px 26px 30px !important; }
  [data-pair] > div[data-card] { padding:22px 18px !important; }
}