/* Case-study post template, round 2 (6 Nov 2026): data layer and motion. Tokens come from style.css/pages.css. */
.cp main { display: block; }
.cp-crumb { font: 600 13px/1.4 var(--sans); margin: 0 0 18px; }
.cp-crumb a { color: var(--teal-deep); text-decoration: none; }
.cp-crumb a::before { content: "\2190\00a0"; }
.cp-tag { display: inline-block; font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--teal-deep); background: #fff; border: 1px solid var(--rule); border-radius: 999px; padding: 7px 12px; margin: 0 0 18px; }
:root:root .cp h1 { font-size: var(--h2); font-weight: 700; line-height: 1.1; max-width: 22ch; text-wrap: balance; }
.cp-date { font: 500 13px/1 var(--sans); color: var(--ink-mute); margin: 16px 0 0; }
.cp .lede { margin-top: 18px; max-width: 58ch; }
.cp .lede:empty { display: none; }

/* reading progress */
.kv-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 9990; pointer-events: none; }
.kv-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--teal-deep), var(--cyan)); transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- hero with the map ---------- */
.kv-hero { position: relative; padding: 40px 0 56px; background: linear-gradient(180deg, var(--mist), #fff 88%); overflow: hidden; }
.kv-hero-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 40px; align-items: center; }
.kv-hero-t { min-width: 0; }
.kv-map { position: relative; margin: 0; aspect-ratio: 4 / 3; }
.kv-map img { width: 100%; height: 100%; object-fit: contain; display: block;
  -webkit-mask-image: radial-gradient(ellipse 74% 72% at 50% 50%, #000 56%, transparent 100%); mask-image: radial-gradient(ellipse 74% 72% at 50% 50%, #000 56%, transparent 100%); }
.kv-scan { position: absolute; inset: 8% 10%; width: 80%; height: 84%; overflow: visible; pointer-events: none; opacity: 0; }
.kv-scan line { stroke: var(--cyan); stroke-width: .4; vector-effect: non-scaling-stroke; stroke-width: 2; filter: drop-shadow(0 0 6px rgba(0,174,230,.8)); }
.kv-motion .kv-hero .kv-map.in .kv-scan { animation: scan 1.6s var(--ease-out) .1s 1 both; }
@keyframes scan { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: .9; } 90% { opacity: .9; } 100% { opacity: 0; transform: translateY(100%); } }

.kv-pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 0; border-radius: 999px;
  background: var(--navy); color: #fff; font: 600 13px/1 var(--sans); box-shadow: 0 10px 24px -10px rgba(16,45,123,.55); cursor: pointer; text-decoration: none; white-space: nowrap; z-index: 2;
  transition: transform .25s var(--ease-out), background .2s; }
.kv-pin::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 2px; height: 8px; background: var(--navy); transform: translateX(-50%); }
.kv-pin::before { content: ""; position: absolute; left: 50%; bottom: -12px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 rgba(0,174,230,.5); }
.kv-pin-n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cyan); color: var(--navy); font: 700 12px/1 var(--sans); }
.kv-pin-v { font: 700 15px/1 var(--display); letter-spacing: .01em; }
a.kv-pin .kv-pin-v { font: 600 13px/1 var(--sans); }
.kv-pin.lit, .kv-pin:hover, .kv-pin:focus-visible { transform: translate(-50%, calc(-100% - 4px)); background: var(--teal-deep); }
.kv-pin:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.kv-motion .kv-map .kv-pin { opacity: 0; transform: translate(-50%, calc(-100% - 18px)); }
.kv-motion .kv-map.in .kv-pin { animation: pindrop .6s cubic-bezier(.3, 1.5, .5, 1) calc(.5s + var(--d) * .22s) both; }
.kv-motion .kv-map.in .kv-pin::before { animation: ping 2.4s ease-out calc(1.2s + var(--d) * .22s) 2; }
@keyframes pindrop { from { opacity: 0; transform: translate(-50%, calc(-100% - 18px)); } to { opacity: 1; transform: translate(-50%, -100%); } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(0,174,230,.55); } 80%, 100% { box-shadow: 0 0 0 14px rgba(0,174,230,0); } }

/* figures under the title, numbered like the pins */
.kv-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; margin-top: 40px; border-top: 1px solid var(--rule); }
.kv-fig { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-content: start; padding: 22px 24px 4px 0; transition: background .2s; }
.kv-fig + .kv-fig { padding-left: 24px; border-left: 1px solid var(--rule); }
.kv-fig::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--teal-deep); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease-out); }
.kv-fig + .kv-fig::before { left: 0; }
.kv-fig.in::before, .kv-fig.lit::before, :root:not(.kv-motion) .kv-fig::before { transform: scaleX(1); }
.kv-fig-i { grid-row: 1 / 3; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 6px; border-radius: 50%; background: var(--navy); color: #fff; font: 700 12px/1 var(--sans); }
.kv-fig .kv-n { font: 700 clamp(1.9rem, 3vw, 2.6rem)/1.05 var(--display); color: var(--navy); font-variant-numeric: tabular-nums; }
.kv-fig-l { margin-top: 8px; font: 500 14px/1.45 var(--sans); color: var(--ink-soft); }
.kv-fig.lit .kv-fig-i { background: var(--cyan); color: var(--navy); }
.kv-motion .kv-fig { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.kv-motion .kv-fig.in { opacity: 1; transform: none; }

/* ---------- body: rail + chapters ---------- */
.kv-body { display: grid; grid-template-columns: 220px minmax(0, 760px); gap: 64px; padding: 72px 0 32px; align-items: start; }
.kv-rail { position: sticky; top: 112px; display: grid; grid-template-columns: 2px 1fr; gap: 0 18px; }
.kv-rail-line { position: relative; background: var(--rule); border-radius: 2px; }
.kv-rail-line i { position: absolute; inset: 0; background: var(--teal-deep); transform: scaleY(0); transform-origin: 50% 0; transition: transform .35s var(--ease-out); }
.kv-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.kv-rail a { display: grid; grid-template-columns: 26px 1fr; gap: 8px; padding: 8px 0; text-decoration: none; color: var(--ink-mute); font: 500 14px/1.35 var(--sans); transition: color .2s; }
.kv-rail a b { font: 700 12px/1.6 var(--sans); color: var(--rule); transition: color .2s; }
.kv-rail a.past { color: var(--ink-soft); }
.kv-rail a.past b { color: var(--teal-deep); }
.kv-rail a[aria-current] { color: var(--navy); font-weight: 600; }
.kv-rail a[aria-current] b { color: var(--cyan); }
.kv-rail a:hover { color: var(--teal-deep); }
.kv-flow { min-width: 0; }
.kv-ch { padding: 0 0 56px; scroll-margin-top: 110px; }
.kv-ch + .kv-ch { padding-top: 48px; border-top: 1px solid var(--rule); }
.kv-chn { display: block; font: 700 13px/1 var(--sans); letter-spacing: .1em; color: var(--cyan); margin-bottom: 12px; }
.kv-ch > h2, .kv-ch > h3 { font: 700 clamp(1.6rem, 2.4vw, 2.1rem)/1.15 var(--display); color: var(--navy); margin: 0 0 18px; text-wrap: balance; }
.kv-ch-results > h2, .kv-ch-results > h3 { color: var(--teal-deep); }
.kv-motion .kv-ch[data-rv] { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.kv-motion .kv-ch[data-rv].in { opacity: 1; transform: none; }

/* prose */
.cp-prose { overflow-wrap: anywhere; min-width: 0; }
.cp-prose h2, .cp-prose h3 { font: 600 1.3rem/1.3 var(--display); color: var(--navy); margin: 32px 0 10px; }
.cp-prose ul, .cp-prose ol:not(.kv-tl) { padding-left: 1.2em; color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.7; list-style: disc; }
.cp-prose ol:not(.kv-tl) { list-style: decimal; }
.cp-prose li + li { margin-top: 6px; }
.cp-prose li::marker { color: var(--teal-deep); }
.cp-prose img { display: block; max-width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--rule); margin: 24px 0; }
.cp-prose iframe, .cp-prose video { width: 100%; aspect-ratio: 16/9; height: auto; border: 0; border-radius: 14px; margin: 24px 0; }
.cp-prose table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.cp-prose td, .cp-prose th { border: 1px solid var(--rule); padding: 8px 10px; }
.cp-prose a { color: var(--teal-deep); }
.cp-prose small, .cp-prose sub, .cp-prose sup { font-size: 12px; }

/* module chapters ("01 Company Profile") */
.kv-chap { position: relative; font: 700 clamp(1.6rem, 2.4vw, 2.1rem)/1.15 var(--display) !important; color: var(--navy) !important; }
.kv-chap::before { content: attr(data-n); display: block; font: 700 13px/1 var(--sans); letter-spacing: .1em; color: var(--cyan); margin-bottom: 12px; }
.kv-ch > .kv-chap::before { display: none; }

/* stat cards from the post's own modules */
.kv-mcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 28px 0; }
.kv-mcard { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: 14px; background: var(--mist); border: 1px solid var(--rule); }
.kv-mnum { font: 700 clamp(1.7rem, 2.6vw, 2.2rem)/1 var(--display); color: var(--navy); font-variant-numeric: tabular-nums; }
.kv-mlab { font: 500 14px/1.4 var(--sans); color: var(--ink-soft); }
.kv-motion .kv-mcards .kv-mcard { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.kv-motion .kv-mcards.in .kv-mcard { opacity: 1; transform: none; }
.kv-motion .kv-mcards.in .kv-mcard:nth-child(2) { transition-delay: .1s; }
.kv-motion .kv-mcards.in .kv-mcard:nth-child(3) { transition-delay: .2s; }
.kv-motion .kv-mcards.in .kv-mcard:nth-child(4) { transition-delay: .3s; }

/* results lists become check rows */
.kv-checks ul { list-style: none; padding: 0; margin: 0; }
.kv-checks li { position: relative; padding: 12px 0 12px 36px; border-bottom: 1px solid var(--rule); margin: 0 !important; }
.kv-checks li::before { content: ""; position: absolute; left: 0; top: 14px; width: 22px; height: 22px; border-radius: 50%; background: var(--slate) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.5l3 3 6-7' fill='none' stroke='%23027aa2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.kv-checks em { font-style: normal; }
.kv-motion .kv-checks li { opacity: 0; transform: translateX(-8px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.kv-motion .kv-checks.in li { opacity: 1; transform: none; }
.kv-motion .kv-checks.in li:nth-child(n) { transition-delay: calc(var(--k, 0) * 1s); }

/* timeline (phases), drawn by the scroll */
.kv-tl { --p: 0; position: relative; list-style: none; margin: 32px 0; padding: 0 0 0 40px; }
.kv-tl::before, .kv-tl::after { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; }
.kv-tl::before { background: var(--rule); }
.kv-tl::after { background: linear-gradient(var(--teal-deep), var(--cyan)); transform: scaleY(var(--p)); transform-origin: 50% 0; }
:root:not(.kv-motion) .kv-tl::after { transform: none; }
.kv-ph { position: relative; padding: 0 0 28px; }
.kv-ph::before { content: ""; position: absolute; left: -40px; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid var(--rule); box-sizing: border-box; transition: border-color .3s, background .3s, box-shadow .3s; z-index: 1; }
.kv-ph.on::before, :root:not(.kv-motion) .kv-ph::before { border-color: var(--teal-deep); background: var(--cyan); box-shadow: 0 0 0 5px rgba(0,174,230,.15); }
.kv-ph h3 { margin: 0 0 8px !important; font: 600 1.15rem/1.3 var(--display) !important; color: var(--navy); }
.kv-ph > div { color: var(--ink-soft); font-size: 1rem; line-height: 1.65; }
.kv-ph ul { margin: 8px 0 0; font-size: 1rem; }
.kv-motion .kv-ph { opacity: .45; transition: opacity .5s var(--ease-out); }
.kv-motion .kv-ph.on { opacity: 1; }

/* quotes */
.kv-q { position: relative; margin: 36px 0; padding: 32px 32px 28px; border-radius: 18px; background: var(--navy); color: #fff; overflow: hidden; }
.kv-q::before { content: ""; position: absolute; right: 20px; top: 14px; width: 72px; height: 56px; opacity: .22;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 56'%3E%3Cpath fill='%2300aee6' d='M0 56V34C0 14 10 3 29 0l3 7C21 10 16 17 15 27h14v29zm40 0V34C40 14 50 3 69 0l3 7C61 10 56 17 55 27h14v29z'/%3E%3C/svg%3E") center/contain no-repeat; }
.kv-q p { position: relative; margin: 0; font: 500 clamp(1.15rem, 1.7vw, 1.35rem)/1.5 var(--display); color: #fff; }
.kv-q cite { display: block; margin-top: 16px; font: 600 14px/1.4 var(--sans); font-style: normal; color: var(--cyan-light); }
.kv-q p + p { margin-top: 12px; }
.kv-motion .kv-q { opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.kv-motion .kv-q.in { opacity: 1; transform: none; }
.kv-motion .kv-q p { opacity: 0; transform: translateY(8px); transition: opacity .7s var(--ease-out) .25s, transform .7s var(--ease-out) .25s; }
.kv-motion .kv-q.in p { opacity: 1; transform: none; }

.kv-line { margin: 28px 0; padding: 18px 0; border-block: 1px solid var(--rule); font: 600 1.2rem/1.4 var(--display); color: var(--teal-deep); text-align: center; }
.kv-logos { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; margin: 24px 0; }
.kv-logos img { height: 44px !important; width: auto !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; object-fit: contain; }
.kv-btnrow { margin: 28px 0; }
.kv-btnrow .btn { color: #fff; text-decoration: none; }

/* video, loaded on click */
.kv-video { position: relative; margin: 28px 0; border-radius: 16px; overflow: hidden; background: var(--navy); aspect-ratio: 16 / 9; }
.kv-video img { width: 100%; height: 100%; object-fit: cover; margin: 0 !important; border: 0 !important; border-radius: 0 !important; transition: transform .8s var(--ease-out); }
.kv-video:hover img { transform: scale(1.03); }
.kv-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: 0; }
.kv-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border: 0; border-radius: 50%; background: #fff; cursor: pointer; box-shadow: 0 0 0 10px rgba(255,255,255,.25); transition: transform .2s var(--ease-out); }
.kv-play span { position: absolute; left: 31px; top: 25px; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent var(--teal-deep); }
.kv-play:hover { transform: scale(1.06); }
.kv-play:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }

/* ---------- figures with their charts ---------- */
.kv-band { padding-block: 88px; position: relative; overflow: hidden; }
.kv-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 85% 0%, rgba(0,174,230,.18), transparent 70%); pointer-events: none; }
.kv-band .wrap { position: relative; }
.kv-band-h { color: #fff; margin: 0 0 32px; }
.kv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.kv-stats.kv-n1 { grid-template-columns: minmax(0, 560px); }
.kv-stat { margin: 0; display: grid; gap: 14px; align-content: start; padding: 24px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); transition: border-color .25s, background .25s, transform .25s var(--ease-out); }
.kv-stat.lit, .kv-stat.flash { border-color: var(--cyan); background: rgba(0,174,230,.1); }
.kv-stat.flash { animation: statflash 1.2s var(--ease-out); }
@keyframes statflash { 0% { box-shadow: 0 0 0 4px var(--cyan); } 100% { box-shadow: 0 0 0 0 rgba(0,174,230,0); } }
.kv-stat-top { display: grid; gap: 16px; align-content: start; }
.kv-stat-top > svg, .kv-stat-top > .kv-bars, .kv-stat-top > .kv-tick { order: -1; }
.kv-stat .kv-bars { width: 100%; }
.kv-stat .kv-n { font: 700 clamp(2.1rem, 3vw, 2.75rem)/1.05 var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.kv-stat .kv-n.kv-long { font-size: clamp(1.7rem, 2.3vw, 2.1rem); }
.kv-stat figcaption { font: 500 14px/1.5 var(--sans); color: rgba(255,255,255,.82); }
.kv-motion .kv-stat { opacity: 0; transform: translateY(14px); }
.kv-motion .kv-stat.in { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), border-color .25s, background .25s; }
.kv-motion .kv-stats .kv-stat.in:nth-child(2) { transition-delay: .12s; }
.kv-motion .kv-stats .kv-stat.in:nth-child(3) { transition-delay: .24s; }
.kv-motion .kv-stats .kv-stat.in:nth-child(4) { transition-delay: .36s; }

/* ring: a share of a whole */
.kv-ring { width: 64px; height: 64px; flex: none; transform: rotate(-90deg); }
.kv-ring circle { fill: none; stroke-width: 6; }
.kv-ring-bg { stroke: rgba(255,255,255,.14); }
.kv-ring-fg { stroke: var(--cyan); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--v)); transition: stroke-dashoffset 1.5s var(--ease-out) .2s; }
.kv-motion .kv-stat:not(.in) .kv-ring-fg { stroke-dashoffset: 100; }
/* before/after bars: what the sentence says changed */
.kv-bars { display: grid; gap: 6px; width: 46%; min-width: 120px; flex: none; }
.kv-bar { position: relative; display: block; height: 22px; border-radius: 5px; background: rgba(255,255,255,.06); overflow: hidden; }
.kv-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 1%); border-radius: 5px; background: rgba(255,255,255,.28); transform-origin: 0 50%; transition: transform 1.3s var(--ease-out) .2s; }
.kv-bar-b::before { background: linear-gradient(90deg, var(--teal-deep), var(--cyan)); transition-delay: .6s; }
.kv-bar i { position: relative; z-index: 1; display: block; padding: 0 8px; font: 600 12px/22px var(--sans); font-style: normal; color: rgba(255,255,255,.9); }
.kv-motion .kv-stat:not(.in) .kv-bar::before { transform: scaleX(0); }
/* clock: a span of time */
.kv-clock { width: 60px; height: 60px; flex: none; }
.kv-clock circle { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 5; }
.kv-clock-arc { fill: none; stroke: var(--cyan); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease-out) .2s; }
.kv-hand { stroke: #fff; stroke-width: 3; stroke-linecap: round; transform-origin: 32px 32px; transition: transform 1.6s var(--ease-out) .2s; transform: rotate(270deg); }
.kv-motion .kv-stat:not(.in) .kv-clock-arc { stroke-dashoffset: 100; }
.kv-motion .kv-stat:not(.in) .kv-hand { transform: rotate(0deg); }
.kv-tick { display: block; width: 56px; height: 4px; border-radius: 2px; background: var(--cyan); transform-origin: 0 50%; transition: transform 1s var(--ease-out) .3s; margin-bottom: 10px; }
.kv-motion .kv-stat:not(.in) .kv-tick { transform: scaleX(0); }

/* light-surface variants (stats outside navy) */
.sec-mist .kv-stat, .kv-light .kv-stat { background: #fff; border-color: var(--rule); }
.sec-mist .kv-stat .kv-n { color: var(--navy); }
.sec-mist .kv-stat figcaption { color: var(--ink-soft); }

/* ---------- B: the story (sticky drawing that changes with the chapter) ---------- */
.kv-hero-b { padding-bottom: 32px; }
.kv-hero-b .wrap > * { max-width: 860px; }
.kv-hero-b .kv-rail { position: static; margin-top: 32px; grid-template-columns: 1fr; }
.kv-hero-b .kv-rail-line { display: none; }
.kv-hero-b .kv-rail ol { display: flex; flex-wrap: wrap; gap: 8px; }
.kv-hero-b .kv-rail a { display: inline-flex; gap: 8px; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px; background: #fff; }
.kv-hero-b .kv-rail a[aria-current] { border-color: var(--teal-deep); }
.kv-scrolly { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; padding: 24px 0 48px; }
.kv-steps { min-width: 0; }
.kv-step { padding: 40px 0 72px; min-height: 60vh; scroll-margin-top: 110px; }
.kv-step + .kv-step { border-top: 1px solid var(--rule); }
.kv-step > h2, .kv-step > h3 { font: 700 clamp(1.6rem, 2.4vw, 2.1rem)/1.15 var(--display); color: var(--navy); margin: 0 0 18px; }
.kv-stage { position: sticky; top: 104px; height: calc(100vh - 140px); max-height: 720px; display: grid; align-content: center; gap: 20px; }
.kv-stage .kv-map { border-radius: 24px; background: linear-gradient(180deg, var(--mist), #fff); }
.kv-stage .kv-map img { transition: filter .9s var(--ease-out), transform 1.2s var(--ease-out); }
.kv-stage[data-kind="challenge"] .kv-map img { filter: grayscale(1) contrast(.85) brightness(1.05); transform: scale(1.04); }
.kv-stage[data-kind="solution"] .kv-map img { transform: scale(1.08) translateY(-2%); }
.kv-stage[data-kind="results"] .kv-map img { transform: scale(1); }
.kv-stage .kv-pin { transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.kv-stage[data-kind="challenge"] .kv-pin, .kv-stage[data-kind="lead"] .kv-pin, .kv-stage[data-kind="context"] .kv-pin { opacity: .0; transform: translate(-50%, calc(-100% - 14px)); pointer-events: none; }
.kv-stage[data-kind="solution"] .kv-pin, .kv-stage[data-kind="results"] .kv-pin { opacity: 1; animation: none; transform: translate(-50%, -100%); }
.kv-stage-stats { display: grid; gap: 10px; }
.kv-sv { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 14px 18px; border-radius: 14px; background: var(--navy); color: #fff; opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.kv-sv .kv-n { font: 700 1.6rem/1 var(--display); color: #fff; }
.kv-sv span { font: 500 13px/1.4 var(--sans); color: rgba(255,255,255,.82); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kv-stage[data-kind="results"] .kv-sv { opacity: 1; transform: none; }
.kv-stage[data-kind="results"] .kv-sv:nth-child(2) { transition-delay: .12s; }
.kv-stage[data-kind="results"] .kv-sv:nth-child(3) { transition-delay: .24s; }
:root:not(.kv-motion) .kv-sv, :root:not(.kv-motion) .kv-stage .kv-pin { opacity: 1; transform: none; }
:root:not(.kv-motion) .kv-stage .kv-pin { transform: translate(-50%, -100%); }

/* ---------- C: the dashboard ---------- */
.kv-hero-c { background: var(--navy); padding: 48px 0 72px; }
.kv-hero-c .wrap { position: relative; z-index: 1; }
.kv-hero-c h1 { color: #fff; }
.kv-hero-c .lede { color: rgba(255,255,255,.86); }
.kv-hero-c .cp-date { color: rgba(255,255,255,.7); }
.kv-hero-c .cp-crumb a { color: var(--cyan-light); }
.kv-hero-c .cp-tag { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: var(--cyan-light); }
.kv-hero-c .lede a { color: var(--cyan-light); }
.kv-c-art { position: absolute; right: -4%; top: 2%; width: 50%; max-width: 680px; opacity: .5; pointer-events: none; filter: invert(1) hue-rotate(180deg) saturate(.6); mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 70% 68% at 50% 50%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 70% 68% at 50% 50%, #000 40%, transparent 100%); }
.kv-motion .kv-c-art { animation: drift 24s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-3%, 2%, 0) scale(1.05); } }
.kv-dash { margin-top: 44px; }
.kv-hero-c .wrap > :not(.kv-dash) { max-width: 760px; }
.kv-body-c { grid-template-columns: 220px minmax(0, 760px); }

/* closing */
.kv-cta { padding-block: 56px; }
.kv-cta-g { display: flex; flex-wrap: wrap; gap: 12px; }
.kv-ghost-w { color: #fff; border: 1px solid rgba(255,255,255,.4); background: transparent; }
.kv-ghost-w:hover { background: rgba(255,255,255,.08); }

/* related */
.cp-rel h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin-bottom: 24px; }
.rc-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.rc { display: grid; gap: 10px; text-decoration: none; color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: 14px; padding: 12px 12px 18px; transition: border-color .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s; }
.rc img, .rc-noimg { width: 100%; aspect-ratio: 1200/630; object-fit: cover; border-radius: 8px; background: var(--slate); }
.rc-k { font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--teal-deep); }
.rc-t { font: 600 1.05rem/1.3 var(--display); color: var(--navy); }
@media (hover: hover) and (pointer: fine) { .rc:hover { border-color: var(--teal-deep); transform: translateY(-3px); box-shadow: 0 16px 32px -20px rgba(16,45,123,.4); } }
.kv-motion .rc[data-rv] { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), border-color .2s; }
.kv-motion .rc[data-rv].in { opacity: 1; transform: none; }

@media (max-width: 1080px) {
  .kv-body, .kv-body-c { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 48px; }
  .kv-body .kv-rail { display: none; }
  .kv-scrolly { grid-template-columns: minmax(0, 1fr); }
  .kv-stage { display: none; }
  .kv-step { min-height: 0; padding: 32px 0 40px; }
  .kv-c-art { display: none; }
}
@media (max-width: 960px) {
  .kv-hero-g { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .rc-g { grid-template-columns: minmax(0, 1fr); }
  .kv-fig + .kv-fig { padding-left: 0; border-left: 0; }
  .kv-figs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .kv-hero { padding: 24px 0 40px; }
  .kv-pin { padding: 4px 9px 4px 4px; gap: 6px; }
  .kv-pin-v { font-size: 13px; }
  a.kv-pin .kv-pin-v { font-size: 12px; }
  .kv-q { padding: 26px 22px 22px; }
  .kv-stat-top { flex-wrap: wrap; }
  .kv-bars { width: 100%; }
  .kv-band { padding-block: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .kv-progress { display: none; }
  .kv-stage .kv-map img { transition: none; }
}

/* live posts end sections with <hr>; the chapter rule already does that job */
.cp-prose > hr, .cp-prose > br + hr, .cp-prose > hr + br { display: none; }
.cp-prose > br:first-child, .cp-prose > br:last-child { display: none; }

/* a figure, where the story says it: a highlighter pass as it is read */
.cp-prose mark.kv-mark { color: var(--navy); font-weight: 700; background: linear-gradient(transparent 58%, rgba(0,174,230,.32) 58%) no-repeat 0 0 / 100% 100%; padding: 0 2px; border-radius: 2px; }
.kv-motion .cp-prose mark.kv-mark { background-size: 0% 100%; transition: background-size 1s var(--ease-out) .5s; }
.kv-motion .in .cp-prose mark.kv-mark, .kv-motion .kv-step.in mark.kv-mark { background-size: 100% 100%; }
.kv-q p { padding-right: 64px; } @media (max-width: 600px) { .kv-q p { padding-right: 0; } .kv-q::before { opacity: .12; } }
.kv-mnum:empty { display: none; }
@media (max-width: 600px) {
  .kv-map .kv-pin-v { display: none; }
  .kv-map .kv-pin { padding: 4px; }
  a.kv-pin .kv-pin-v { display: none; }
}

/* MSHDA format (11 Nov): the Outcomes band uses the case pages' figrow; the count-up keeps its look. */
.kv-outcomes .kv-dt { font: inherit; color: inherit; letter-spacing: inherit; display: inline; }
.kv-outcomes .figrow { margin-top: 0; }
.kv-quote .quote { margin: 0; }
.kv-quote + .kv-body, .kv-outcomes + .kv-body { padding-top: 72px; }