/* Case study pages (_layouts/case-study.html). Content: _data/case_studies.json,
   which follows the case-study PDFs. Compact hero with the stats, the story beside
   an "At a glance" panel, impact, related stories and the CTA. */
.cs { --cs-navy: var(--ss-navy, #0a1628); --cs-ink: #0a1628; --cs-text: #4a5568; --cs-muted: #6c757d; --cs-line: #e4e8ee; --cs-bg: #f8f9fb; --cs-accent: var(--ss-orange, #ee6723); color: var(--cs-text); }
.cs a { text-decoration: none; }
.cs_wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.cs_eyebrow { display: block; font-size: 12px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--cs-accent); margin: 0 0 14px; }

/* Hero */
.cs_hero { position: relative; overflow: hidden; background: var(--cs-navy); color: rgba(255,255,255,.75); padding: 64px 0 0; }
.cs_hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 55% 60% at 85% 10%, rgba(238,103,35,.12), transparent 70%), radial-gradient(ellipse 50% 70% at 0% 100%, rgba(38,59,94,.6), transparent 70%); }
.cs_hero .cs_wrap { position: relative; }
.cs_back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.6); margin-bottom: 28px; }
.cs_back:hover { color: #fff; }
.cs_hero_grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.cs_logo { height: 34px; width: auto; filter: brightness(0) invert(1); margin-bottom: 22px; display: block; }
.cs_tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.cs_tag { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 5px 12px; }
.cs_hero h1 { font-size: clamp(32px, 3.6vw, 44px); line-height: 1.12; letter-spacing: -.02em; font-weight: 700; color: #fff; margin: 0 0 18px; }
.cs_hero h1 span { color: var(--cs-accent); }
.cs_hero_lead { font-size: 17px; line-height: 1.65; margin: 0 0 28px; max-width: 600px; }
.cs_btns { display: flex; flex-wrap: wrap; gap: 12px; }
.cs_btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 10px; font-size: 15px; font-weight: 600; transition: transform .2s, background .2s, border-color .2s; }
.cs_btn i { font-size: 13px; }
.cs_btn.primary { background: #fff; color: var(--cs-navy) !important; }
.cs_btn.ghost { border: 1px solid rgba(255,255,255,.28); color: #fff !important; }
.cs_btn:hover { transform: translateY(-1px); }
.cs_btn.ghost:hover { border-color: #fff; }
.cs_btn:focus-visible, .cs a:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 3px; }
.cs_art { border-radius: 18px; overflow: hidden; background: #ececec; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.cs_art img { display: block; width: 100%; height: auto; }
.cs_art_cap { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 10px; text-align: center; }
.cs_stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 56px; border-top: 1px solid rgba(255,255,255,.1); }
.cs_stat { padding: 26px 24px 30px 0; }
.cs_stat + .cs_stat { padding-left: 28px; border-left: 1px solid rgba(255,255,255,.1); }
.cs_stat strong { display: block; font-size: 36px; line-height: 1; font-weight: 700; color: #fff; letter-spacing: -.02em; margin-bottom: 8px; }
.cs_stat span { font-size: 14px; color: rgba(255,255,255,.62); }

/* Story + sidebar */
.cs_body { background: #fff; padding: 88px 0; }
.cs_body_grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 64px; align-items: start; }
.cs_block + .cs_block { margin-top: 64px; }
.cs_block h2 { font-size: 30px; line-height: 1.2; letter-spacing: -.015em; font-weight: 700; color: var(--cs-ink); margin: 0 0 16px; }
.cs_block p { font-size: 16.5px; line-height: 1.75; margin: 0 0 16px; }
.cs_need { margin: 24px 0 0; padding: 20px 24px; border-left: 3px solid var(--cs-accent); background: var(--cs-bg); border-radius: 0 12px 12px 0; }
.cs_need strong { display: block; color: var(--cs-ink); font-size: 16px; margin-bottom: 6px; }
.cs_need p { margin: 0; font-size: 15px; line-height: 1.65; }
.cs_shot { margin: 32px auto 0; max-width: 560px; border: 1px solid var(--cs-line); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 48px -28px rgba(10,22,40,.35); }
.cs_shot_bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--cs-bg); border-bottom: 1px solid var(--cs-line); }
.cs_shot_bar i { width: 9px; height: 9px; border-radius: 50%; background: #d6dbe3; }
.cs_shot_bar span { margin-left: 10px; font-size: 12px; color: var(--cs-muted); display: inline-flex; align-items: center; gap: 6px; }
.cs_shot_bar span em { font-style: normal; color: #2e7d32; font-weight: 600; }
.cs_shot img { display: block; width: 100%; height: auto; }
.cs_shot_cap { font-size: 13px; color: var(--cs-muted); margin: 10px auto 0; max-width: 560px; }
.cs_flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 10px; margin: 28px 0 8px; }
.cs_node { border: 1px solid var(--cs-line); border-radius: 12px; padding: 16px; background: #fff; }
.cs_node i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 14px; margin-bottom: 10px; background: rgba(238,103,35,.1); color: var(--cs-accent); }
.cs_node b { display: block; font-size: 14px; color: var(--cs-ink); margin-bottom: 4px; }
.cs_node small { font-size: 13px; line-height: 1.5; color: var(--cs-muted); display: block; }
.cs_node.mid { background: var(--cs-bg); }
.cs_arrow { align-self: center; color: #b3bcc8; font-size: 14px; }

.cs_side { position: sticky; top: 110px; border: 1px solid var(--cs-line); border-radius: 16px; padding: 24px; background: var(--cs-bg); }
.cs_side h3 { font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--cs-muted); margin: 0 0 16px; }
.cs_side dl { margin: 0; }
.cs_side dt { font-size: 12px; color: var(--cs-muted); margin-top: 14px; }
.cs_side dt:first-child { margin-top: 0; }
.cs_side dd { margin: 2px 0 0; font-size: 15px; font-weight: 500; color: var(--cs-ink); line-height: 1.5; }
.cs_side dd a { color: var(--cs-ink); border-bottom: 1px solid rgba(238,103,35,.4); }
.cs_side dd a:hover { color: var(--cs-accent); }
.cs_side .cs_dl { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; padding: 12px 16px; border-radius: 10px; background: var(--cs-navy); color: #fff !important; font-size: 14px; font-weight: 600; }
.cs_side .cs_dl:hover { background: #142a4a; }
.cs_side .cs_side_h { margin-top: 28px; }
.cs_side_links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cs_side_links a { display: block; padding: 10px 12px; margin: 0 -12px; border-radius: 10px; transition: background .2s; }
.cs_side_links a:hover { background: #fff; }
.cs_side_links b { display: block; font-size: 14px; color: var(--cs-ink); }
.cs_side_links span { font-size: 13px; color: var(--cs-muted); }

/* Impact */
.cs_impact { background: var(--cs-bg); padding: 88px 0; border-top: 1px solid var(--cs-line); border-bottom: 1px solid var(--cs-line); }
.cs_impact h2 { font-size: 36px; line-height: 1.15; letter-spacing: -.5px; font-weight: 700; color: var(--cs-ink); margin: 0 0 40px; max-width: 760px; }
.cs_impact h2 span { color: var(--cs-accent); }
.cs_cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cs_card { background: #fff; border: 1px solid var(--cs-line); border-radius: 16px; padding: 28px; }
.cs_card i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 16px; background: rgba(238,103,35,.1); color: var(--cs-accent); margin-bottom: 18px; }
.cs_card h3 { font-size: 18px; font-weight: 700; color: var(--cs-ink); margin: 0 0 8px; }
.cs_card p { font-size: 15px; line-height: 1.65; margin: 0; }
.cs_take { margin: 40px 0 0; padding: 28px 32px; border-radius: 16px; background: var(--cs-navy); color: #fff; display: flex; gap: 20px; align-items: flex-start; }
.cs_take img { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto; }
.cs_take p { margin: 0 0 6px; font-size: 19px; line-height: 1.5; font-weight: 500; }
.cs_take small { font-size: 13px; color: rgba(255,255,255,.6); }

/* More stories + CTA */
.cs_more { background: var(--cs-bg); padding: 88px 0; border-top: 1px solid var(--cs-line); }
.cs_more_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.cs_story { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--cs-line); border-radius: 16px; padding: 26px; transition: border-color .2s, box-shadow .2s; }
.cs_story:hover { border-color: rgba(238,103,35,.4); box-shadow: 0 0 0 1px rgba(238,103,35,.25), 0 16px 40px -22px rgba(238,103,35,.4); }
.cs_story img { height: 24px; width: auto; align-self: flex-start; filter: grayscale(1); opacity: .75; margin-bottom: 16px; }
.cs_story b { font-size: 18px; line-height: 1.35; color: var(--cs-ink); margin-bottom: 8px; }
.cs_story span { font-size: 15px; line-height: 1.6; color: var(--cs-text); flex: 1; }
.cs_story em { font-style: normal; font-size: 14px; font-weight: 600; color: var(--cs-ink); margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; }
.cs_story em i { color: var(--cs-accent); font-size: 12px; }
.cs_cta { background: var(--cs-navy); color: rgba(255,255,255,.72); text-align: center; padding: 88px 24px; }
.cs_cta h2 { font-size: 36px; line-height: 1.15; letter-spacing: -.5px; font-weight: 700; color: #fff; margin: 0 0 14px; }
.cs_cta h2 span { color: var(--cs-accent); }
.cs_cta p { font-size: 17px; line-height: 1.65; margin: 0 auto 28px; max-width: 620px; }
.cs_cta .cs_btns { justify-content: center; }
.cs_cta .cs_btn.green { background: linear-gradient(135deg, #28a745, #34c759); color: #fff !important; }

@media (max-width: 960px) {
  .cs_hero { padding-top: 40px; }
  .cs_hero_grid, .cs_body_grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .cs_side { position: static; }
  .cs_stats { grid-template-columns: minmax(0, 1fr); margin-top: 36px; }
  .cs_stat, .cs_stat + .cs_stat { padding: 18px 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.1); }
  .cs_stats { border-top: 0; }
  .cs_flow { grid-template-columns: minmax(0, 1fr); }
  .cs_arrow { transform: rotate(90deg); justify-self: center; }
  .cs_cards, .cs_more_grid { grid-template-columns: minmax(0, 1fr); }
  .cs_body, .cs_impact, .cs_more, .cs_cta { padding: 64px 0; }
  .cs_cta { padding: 64px 20px; }
  .cs_block h2 { font-size: 26px; }
  .cs_impact h2, .cs_more h2, .cs_cta h2 { font-size: 28px; }
  .cs_take { flex-direction: column; padding: 24px; }
}

/* Hero quote card (stories without campaign artwork) */
.cs_qcard { position: relative; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 30px 30px 26px; background: rgba(255,255,255,.05); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.cs_qcard::before { content: "\201C"; position: absolute; top: -6px; left: 22px; font-size: 72px; line-height: 1; font-weight: 700; color: var(--cs-accent); }
.cs_qcard p { margin: 18px 0 18px; font-size: 18px; line-height: 1.55; color: #fff; font-weight: 500; }
.cs_qcard b { display: block; font-size: 14px; color: #fff; }
.cs_qcard small { font-size: 13px; color: rgba(255,255,255,.6); }

/* Solution steps */
.cs_steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.cs_steps li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 18px 20px; border: 1px solid var(--cs-line); border-radius: 12px; }
.cs_steps .cs_step_tag { font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--cs-accent); padding-top: 3px; }
.cs_steps b { display: block; color: var(--cs-ink); font-size: 16px; margin-bottom: 4px; }
.cs_steps p { margin: 0; font-size: 15px; line-height: 1.65; }
.cs_steps p b { display: inline; font-size: inherit; margin: 0; }
.cs_side_links a span:empty { display: none; }
@media (max-width: 960px) { .cs_steps li { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* Hero logos: each story sets its own height (logo_h) so wide wordmarks and compact
   marks carry the same visual weight. Default turns the logo white. Logos printed on
   a solid background drop the background with a blend: ink-light for a light mark
   on a dark field, ink-dark for a dark mark on a white field. Colour crests stay as is. */
.cs_logo { width: auto; max-width: 260px; }
.cs_logo.ink-light { filter: grayscale(1) brightness(.78) contrast(4.5); mix-blend-mode: screen; }
.cs_logo.ink-dark { filter: grayscale(1) invert(1) brightness(5); mix-blend-mode: screen; }
.cs_logo.color { filter: none; }