/* Case studies. Extends /styles.css. IBM Plex Sans (OFL) for numbers and charts. */
@font-face{font-family:"IBM Plex Sans";src:url(/fonts/IBMPlexSans-var.woff2) format("woff2");font-weight:100 700;font-style:normal;font-display:swap}
:root{--plex:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;--rust:#a6574a}
html{scroll-padding-top:64px}
@media (min-width:821px){html.cs-snap{scroll-snap-type:y proximity}.cs-ch{scroll-snap-align:start}}
.cs-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:30;pointer-events:none}
.cs-progress span{display:block;height:100%;width:0;background:var(--gold)}
html:not(.js) .cs-progress{display:none}

/* hero */
.cs-hero .cs-client{font-size:15px;color:#fff;font-weight:600;margin:0 0 4px}
.cs-hero .cs-client span{color:#aab3c6;font-weight:400}
.cs-label{display:inline-block;font-size:13px;color:var(--gold-2);border:1px solid rgba(196,163,109,.45);padding:4px 10px;margin:4px 0 22px;letter-spacing:.01em}
.cs-hyp{font-size:13px;color:#cfd5e2;margin:-14px 0 22px}
.cs-strip{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.15)}
.cs-strip li{padding:18px 18px 4px 0;border-right:1px solid rgba(255,255,255,.12);margin-right:18px}
.cs-strip li:last-child{border-right:0;margin-right:0}
.cs-strip b{display:block;font-family:var(--plex);font-weight:500;font-size:clamp(24px,2.6vw,34px);color:var(--gold);line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap}
.cs-strip li>span{display:block;font-size:14px;color:#cfd5e2;line-height:1.4;margin-top:4px}
.cs-strip-cap{font-size:12px;color:#8d9ab3;margin:14px 0 0}
@media (max-width:820px){.cs-strip{grid-template-columns:1fr 1fr}.cs-strip li:nth-child(2){border-right:0;margin-right:0}}

/* sticky chapter nav */
.cs-chapters{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
.cs-chapters ol{list-style:none;margin:0;padding:0;display:flex;gap:28px;overflow-x:auto;scrollbar-width:none}
.cs-chapters ol::-webkit-scrollbar{display:none}
.cs-chapters a{display:block;padding:16px 0 14px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent}
.cs-chapters a span{font-family:var(--plex);color:var(--gold-dk);margin-right:4px}
.cs-chapters a:hover,.cs-chapters a.is-active{color:var(--navy);border-bottom-color:var(--gold)}
@media (max-width:600px){.cs-chapters ol{gap:20px}.cs-chapters a{font-size:12px;padding:13px 0 11px}}

/* chapters */
.cs-ch{padding:72px 0;border-bottom:1px solid var(--line)}
.cs-ch:nth-of-type(even){background:var(--cream)}
.cs-ch-grid{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
.cs-ch-grid>*{min-width:0}
@media (min-width:960px){.cs-ch-grid{grid-template-columns:240px minmax(0,1fr);gap:56px}.cs-ch-head{position:sticky;top:84px;align-self:start}}
.cs-ch-num{display:block;font-family:var(--plex);font-size:13px;font-weight:600;letter-spacing:.18em;color:var(--gold-dk);margin-bottom:8px}
.cs-ch h2{font-size:clamp(26px,3vw,36px);margin:0}
.cs-ch-body{max-width:760px}
.cs-scene{font-family:Georgia,"Times New Roman",serif;font-size:clamp(20px,2.1vw,25px);line-height:1.5;color:var(--navy);margin:0 0 28px}
.cs-lede{font-size:19px;color:var(--ink);margin:0 0 20px}
.cs-h3{font-family:inherit;font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--gold-dk);margin:0 0 10px}
.cs-list{margin:0 0 28px;padding:0;list-style:none}
.cs-list li{position:relative;padding:10px 0 10px 24px;border-top:1px solid var(--line)}
.cs-list li::before{content:"";position:absolute;left:0;top:21px;width:10px;height:2px;background:var(--gold)}
.cs-next{margin:28px 0 0}
.cs-next a{font-size:14px;font-weight:600;color:var(--navy);text-decoration:none;border-bottom:1px solid var(--gold)}
.cs-ending{font-family:Georgia,serif;font-size:22px;color:var(--navy);border-left:3px solid var(--gold);padding:4px 0 4px 18px;margin:32px 0}
.cs-foot{font-size:13px;color:var(--muted);margin:28px 0 0}

/* steps (stepper with JS; plain list without) */
.cs-steps{list-style:none;counter-reset:st;margin:0 0 28px;padding:0;display:grid;gap:0}
.cs-steps li{counter-increment:st;position:relative;padding:16px 0 16px 52px;border-top:1px solid var(--line)}
.cs-steps li::before{content:counter(st,decimal-leading-zero);position:absolute;left:0;top:16px;font-family:var(--plex);font-weight:600;color:var(--gold-dk);font-size:15px}
.cs-steps h3{font-family:inherit;font-size:17px;font-weight:600;margin:0 0 4px;color:var(--navy)}
.cs-steps p{margin:0;color:var(--muted)}
.cs-stepper-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;list-style:none}
.cs-stepper-tabs button{font:600 13px/1 var(--plex);padding:10px 14px;border:1px solid var(--line);background:#fff;color:var(--navy);cursor:pointer}
.cs-stepper-tabs button[aria-selected=true]{background:var(--navy);color:#fff;border-color:var(--navy)}
.cs-steps.is-stepper li{display:none;border:1px solid var(--line);background:#fff;padding:22px 22px 22px 70px}
.cs-steps.is-stepper li::before{left:22px;top:22px}
.cs-steps.is-stepper li.is-on{display:block}
.cs-stepper-ctl{display:flex;justify-content:space-between;margin:-16px 0 28px}
.cs-stepper-ctl button{font:600 13px var(--plex);background:none;border:0;color:var(--navy);cursor:pointer;padding:8px 0}
.cs-stepper-ctl button[disabled]{color:#b9bfca;cursor:default}

/* timeline */
.cs-timeline{list-style:none;margin:0 0 32px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--navy)}
.cs-timeline li{position:relative;padding:18px 14px 0 0}
.cs-timeline li::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;border-radius:50%;background:var(--gold);border:2px solid #fff}
.cs-timeline b{display:block;font-family:var(--plex);font-weight:600;font-size:14px;color:var(--navy)}
.cs-timeline span{display:block;font-size:14px;color:var(--muted);line-height:1.45}
@media (max-width:700px){.cs-timeline{grid-template-columns:1fr;border-top:0;border-left:2px solid var(--navy);padding-left:18px}.cs-timeline li{padding:0 0 16px}.cs-timeline li::before{left:-26px;top:4px}}

/* figures + charts */
.cs-fig{margin:8px 0 28px;background:#fff;border:1px solid var(--line);padding:22px 22px 14px}
.cs-fig-title{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--navy);margin:0 0 14px}
.cs-cap{font-size:12px;color:var(--muted);margin:10px 0 0}
.cs-chart{display:block;width:100%;height:auto;max-width:640px;font-family:var(--plex)}
.cs-chart text{font-family:var(--plex);fill:var(--ink)}
.cs-chart .tk{font-size:13px;fill:#545e70}
.cs-chart .lb{font-size:14px;fill:var(--ink)}
.cs-chart .dl{font-size:14px;font-weight:600;fill:var(--navy)}
.cs-chart .gd{fill:var(--gold-dk)}
@media (prefers-reduced-motion:no-preference){
  .js .cs-anim .cs-bar{transform:scaleY(0);transform-box:fill-box;transform-origin:50% 100%;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
  .js .cs-anim .cs-hbar{transform:scaleX(0);transform-box:fill-box;transform-origin:0 50%;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
  .js .cs-anim .cs-ln{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s ease}
  .js .cs-anim.in .cs-bar,.js .cs-anim.in .cs-hbar{transform:none}
  .js .cs-anim.in .cs-ln{stroke-dashoffset:0}
  .js .cs-anim polyline[stroke-dasharray]{stroke-dasharray:6 5}
}
.cs-table-wrap{overflow-x:auto}
.cs-table{width:100%;border-collapse:collapse;font-family:var(--plex);font-size:14px;font-variant-numeric:tabular-nums}
.cs-table th,.cs-table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.cs-table th:first-child,.cs-table thead th:first-child{text-align:left}
.cs-table thead th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;white-space:normal;vertical-align:bottom}
.cs-table tbody th{font-weight:600;color:var(--navy)}
.cs-call{display:inline-block;padding:2px 8px;font-size:12px;font-weight:600}
.cs-call-go{background:var(--navy);color:#fff}.cs-call-wait{background:#efe6d6;color:#6b5530}.cs-call-pass{background:#f1dcd8;color:#7b3b30}
.cs-note{font-size:12px;color:var(--muted);margin:8px 0 0}
.cs-funnel{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-family:var(--plex)}
.cs-funnel li{width:100%;min-width:180px;background:var(--navy);color:#fff;padding:10px 14px;font-size:14px;font-weight:500}
.cs-funnel li:nth-child(n+4){background:var(--navy-2)}
.cs-funnel li:last-child{background:var(--gold);color:var(--navy)}
/* dashboard + analyst mocks */
.cs-dash,.cs-chat{font-family:var(--plex);font-size:14px;border:1px solid var(--line);background:#fff}
.cs-dash-top{display:flex;justify-content:space-between;gap:12px;background:var(--navy);color:#fff;padding:10px 14px;font-size:13px}
.cs-dash-top span{color:#aab3c6}
.cs-dash-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
.cs-dash-tiles div{background:#fff;padding:12px 14px}
.cs-dash-tiles small{display:block;color:var(--muted);font-size:12px}
.cs-dash-tiles b{display:block;font-size:22px;font-weight:600;color:var(--navy)}
.cs-dash-tiles em{font-style:normal;font-size:12px}
.cs-dash .up{color:#2f6b4f}.cs-dash .dn{color:#2f6b4f}.cs-dash .warn{color:var(--rust)}
.cs-dash-list{list-style:none;margin:0;padding:6px 14px 10px}
.cs-dash-list li{display:grid;grid-template-columns:1fr 1.4fr auto;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:13px}
.cs-dash-list b{color:var(--rust);font-weight:600}
.cs-q{margin:0;padding:12px 14px;background:var(--cream);border-bottom:1px solid var(--line);font-weight:500;color:var(--navy)}
.cs-a{padding:12px 14px}.cs-a p{margin:0 0 8px}.cs-a ol{margin:0 0 8px;padding-left:20px}
.cs-src{font-size:12px;color:var(--muted)}
.cs-tools ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.cs-tools a{display:inline-block;padding:8px 14px;border:1px solid var(--line);background:#fff;font-size:14px;text-decoration:none;color:var(--navy)}
.cs-tools a:hover{border-color:var(--gold)}
/* pager */
.cs-pager{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;padding-top:40px;padding-bottom:8px}
.cs-pager a{text-decoration:none;color:var(--navy)}
.cs-pager small{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dk);font-weight:600}
.cs-pager span{font-family:Georgia,serif;font-size:20px}
.cs-nextstudy{text-align:right}
.cs-all{font-size:14px;font-weight:600;border-bottom:1px solid var(--gold)}
@media (max-width:600px){.cs-pager{grid-template-columns:1fr 1fr}.cs-all{grid-column:1/-1;grid-row:2;justify-self:center}}
/* index */
.cs-index-note{font-size:14px;color:var(--muted);margin:0 0 28px}
.cs-cards{list-style:none;margin:0;padding:0;display:grid;gap:24px}
@media (min-width:760px){.cs-cards{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.cs-cards{grid-template-columns:repeat(3,1fr)}}
.cs-card{display:flex;flex-direction:column;height:100%;padding:28px;border:1px solid var(--line);border-top:3px solid var(--gold);text-decoration:none;color:var(--ink);background:#fff;transition:box-shadow .2s,transform .2s}
.cs-card:hover{box-shadow:0 10px 30px rgba(10,31,68,.10)}
@media (prefers-reduced-motion:no-preference){.cs-card:hover{transform:translateY(-2px)}}
.cs-card-num{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold-dk)}
.cs-card-metric{margin:18px 0 14px}
.cs-card-metric b{display:block;font-family:var(--plex);font-weight:500;font-size:44px;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}
.cs-card-metric small{display:block;font-size:14px;color:var(--muted);margin-top:6px}
.cs-card-client{font-size:14px;font-weight:600;color:var(--navy)}
.cs-card-h{font-family:Georgia,serif;font-size:20px;line-height:1.3;color:var(--navy);margin:8px 0 18px}
.cs-card-go{margin-top:auto;font-size:14px;font-weight:600;color:var(--navy);border-bottom:1px solid var(--gold);align-self:flex-start}
@media print{.cs-chapters,.cs-progress,.cs-next{display:none}}

.cs-fw-84{width:84%!important}.cs-fw-68{width:68%!important}.cs-fw-52{width:52%!important}.cs-fw-40{width:40%!important}.cs-fw-30{width:30%!important}
/* v2 */
.cs-answer{max-width:46rem;margin:18px 0 28px;font-size:20px;line-height:1.45;color:#fff}
.cs-answer span{display:inline-block;margin-right:8px;padding:2px 8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;background:var(--gold);color:var(--navy);vertical-align:2px}
.cs-card-a{display:block;margin-top:10px;font-size:15px;color:var(--muted);line-height:1.5}
.cs-chart .dlw{fill:#fff}
.cs-checks i{font-style:normal;font-weight:600;color:#2f6b4f}
.cs-chan li{grid-template-columns:1.3fr 1fr 1fr}.cs-chan li>:nth-child(2),.cs-chan li>b{text-align:right}
.cs-chan b{color:var(--navy)}
.cs-flow-v{display:none}@media (max-width:600px){.cs-flow-h{display:none}.cs-flow-v{display:block}}
.cs-chan .cs-chan-h{font-size:.75rem;color:var(--muted,#545e70);text-transform:uppercase;letter-spacing:.04em}.cs-chan .cs-chan-h b{color:inherit;font-weight:500}
/* AEO additions (Nov 3 2026): byline, Before/After/Change table, systems line */
.cs-byline{font-size:14px;color:#aab3c6;margin:-12px 0 18px}
.cs-byline a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.cs-ba-wrap{margin:8px 0 28px}
.cs-ba caption{caption-side:top;text-align:left;font-weight:600;color:var(--navy);padding:0 0 10px;font-size:15px}
.cs-ba th,.cs-ba td{white-space:normal;text-align:left;vertical-align:top}
.cs-ba td:last-child{font-weight:600;color:var(--navy)}
.cs-systems{font-size:15px;margin:0 0 14px}