/* Central Asia Procurement, home page (/en/, /ru/, /kk/). Approved by the convenor on 27 October 2026:
   review/redesign/approved/home/ (decisions in docs/15-redesign-decisions.md). Colours only from tokens.css.
   Each block sits in <div class="blk-src" data-b="N">, so rules of one block do not reach another and
   home.js can reveal a block at once (focus, anchor jump, scroll restore). Motion: once, on entry; none with reduced motion. */
/* Top: place. Astana, the Atyrau footbridge on the Ishim, text on a translucent ink veil (after RICS, rics.org).
   The KazMunayGas headquarters photo was replaced on 28 October 2026 after founder feedback (docs/15). */
:root {
  --hero-h: 640px;
  --panel-w: 600px;
  --edge: max(0px, calc((100% - var(--cap-container)) / 2));
  /* The veil is ink only: dense ink, half ink, clear */
  --veil: color-mix(in srgb, var(--cap-ink) 88%, transparent);
  --veil-half: color-mix(in srgb, var(--cap-ink) 50%, transparent);
  --veil-clear: color-mix(in srgb, var(--cap-ink) 0%, transparent);
}
/* ---------- Hero: the Atyrau bridge photograph under a left-to-right ink veil ---------- */
/* The photograph fills the area right of the text column and is cropped to it (2800 px wide, sharp at 2x). */
.hero { position: relative; min-height: var(--hero-h); display: flex; align-items: flex-end; overflow: hidden; background: var(--cap-ink); }
.hero-photo { position: absolute; inset: 0; margin: 0; }
.hero-photo img { position: absolute; max-width: none; width: calc(100% - var(--edge) - 253px); height: 100%; right: 0; top: 0; object-fit: cover; object-position: 50% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--cap-ink) 160px); mask-image: linear-gradient(90deg, transparent 0, var(--cap-ink) 160px); }
.hero-veil { position: absolute; inset: 0; background: linear-gradient(90deg, var(--veil) 0, var(--veil) calc(var(--edge) + 570px), var(--veil-half) calc(var(--edge) + 650px), var(--veil-clear) calc(var(--edge) + 740px)); }
.hero-panel { position: relative; margin-left: var(--edge); width: var(--panel-w); padding: 56px var(--cap-space-6) var(--cap-space-7); }
.kicker { display: flex; align-items: center; gap: 12px; font: var(--cap-text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cap-gold); }
.kicker::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--cap-gold); }
.hero-panel h1 { font: var(--cap-text-display); color: var(--cap-white); margin-top: 20px; text-wrap: balance; }
.lede { margin-top: var(--cap-space-4); color: var(--cap-ink-10); max-width: 34em; }

/* The survey: reason, the primary button, the report offer and the trust line */
.hero-survey { margin-top: 28px; }
.reason { font: 600 17px/28px var(--cap-font-sans); color: var(--cap-white); text-wrap: pretty; }
.hero-cta { display: inline-flex; align-items: center; gap: 14px; min-height: 56px; margin-top: 20px; padding: 18px 32px; font: 600 17px/20px var(--cap-font-sans); text-decoration: none; }
.hero-cta svg { flex: none; transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .hero-cta:hover svg { transform: translateX(3px); } }
.offer { margin-top: var(--cap-space-4); font: var(--cap-text-small); color: var(--cap-ink-10); max-width: 36em; }
.offer strong { color: var(--cap-white); font-weight: 700; }
.trust { margin-top: var(--cap-space-1); font: var(--cap-text-small); color: var(--cap-ink-10); }
/* ---------- Founders strip ---------- */
.founders { padding-top: var(--cap-space-6); }
.founders-head { font: var(--cap-text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cap-slate); }
.people { list-style: none; margin: var(--cap-space-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--cap-space-5); }
.person { display: grid; grid-template-columns: 72px 1fr; gap: var(--cap-space-4); align-items: start; }
.person img { width: 72px; height: 72px; object-fit: cover; background: var(--cap-ink-10); }
.person b { display: block; font: 600 15px/22px var(--cap-font-sans); color: var(--cap-ink); padding-top: 2px; }
.person span { display: block; font: 500 14px/20px var(--cap-font-sans); color: var(--cap-slate); margin-top: 2px; }
.next-hint { height: 120px; }

/* ---------- Entry motion: once, CSS only, all done by 1.5 s ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-photo { animation: photo-in 1400ms var(--ease-out) both; }
  .hero-panel > * { animation: rise 500ms var(--ease-out) both; }
  .hero-panel > :nth-child(1) { animation-delay: 300ms; }
  .hero-panel > :nth-child(2) { animation-delay: 360ms; }
  .hero-panel > :nth-child(3) { animation-delay: 420ms; }
  .hero-panel > :nth-child(4) { animation-delay: 480ms; }
  .founders-head, .person { animation: rise 500ms var(--ease-out) both; }
  .founders-head { animation-delay: 800ms; }
  .person:nth-child(1) { animation-delay: 820ms; }
  .person:nth-child(2) { animation-delay: 880ms; }
  .person:nth-child(3) { animation-delay: 940ms; }
  .person:nth-child(4) { animation-delay: 1000ms; }
  .person:nth-child(5) { animation-delay: 1060ms; }
}
@keyframes photo-in { from { opacity: 0.6; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Tablet: menu button; 1024 to 1199 keeps the text on the veil ---------- */
@media (max-width: 1199px) {
  :root { --panel-w: 560px; }
  .people { grid-template-columns: repeat(2, 1fr); }
  .person:first-child { grid-column: 1 / -1; }
  .hero-photo img { width: 901px; }
  .hero-veil { background: linear-gradient(90deg, var(--veil) 0, var(--veil) 535px, var(--veil-half) 575px, var(--veil-clear) 615px); }
}
/* ---------- Under 1024 px: the photograph becomes a band, the text sits below it on ink ---------- */
@media (max-width: 1023px) {
  .hero { display: block; min-height: 0; }
  .hero-photo { position: relative; height: 360px; overflow: hidden; }
  .hero-photo img { position: static; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; -webkit-mask-image: none; mask-image: none; }
  .hero-veil { bottom: auto; height: 360px; background: linear-gradient(180deg, var(--veil-clear) 70%, var(--cap-ink) 100%); }
  .hero-panel { margin-left: 0; width: auto; max-width: 680px; padding: var(--cap-space-6) 32px var(--cap-space-7); }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  .hero-photo { height: 200px; }
  .hero-veil { height: 200px; background: linear-gradient(180deg, var(--veil-clear) 85%, var(--cap-ink) 100%); }
  .hero-photo img { object-position: 50% 50%; }
  .hero-panel { padding: var(--cap-space-3) var(--cap-space-4) var(--cap-space-6); }
  .hero-panel h1 { margin-top: var(--cap-space-3); }
  .lede { margin-top: var(--cap-space-3); }
  .hero-survey { margin-top: 20px; }
  .hero-cta { display: flex; width: 100%; justify-content: center; margin-top: var(--cap-space-4); padding: 18px 16px; }
  .founders { padding-top: var(--cap-space-5); }
  .people { grid-template-columns: 1fr; gap: var(--cap-space-4); }
  .person { grid-template-columns: 56px 1fr; gap: var(--cap-space-3); }
  .person img { width: 56px; height: 56px; }
  .next-hint { height: 48px; }
}

/* ====================== Block 2: the survey in five sections and the founding report ====================== */

/* ---------- Block 2, alternative D: the survey in five sections, leading to the founding report ---------- */
/* A combination of C and B. C's numbered path (after GOV.UK step by step, gov.uk/learn-to-drive-a-car) runs across the page
   and ends at an ink square; below it, what the answers decide and B's report cover (after the CIPS salary guide, cips.org).
   Light ground; the cover is the one ink surface and carries the one 45 degree cut of the section (top right). */
.combo { background: var(--cap-light); padding: var(--cap-space-8) 0; }

.combo-kicker { font: var(--cap-text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cap-slate); }

.combo-head h2 { font: var(--cap-text-h1); color: var(--cap-ink); margin-top: var(--cap-space-3); text-wrap: balance; }

/* The path: five numbered squares on one turquoise line, ending at an ink square with the gold square of the mark */
.route { --mark: 36px; --rail: 2px; --gap: var(--cap-space-5); margin-top: var(--cap-space-6);
  display: grid; grid-template-columns: minmax(0, 1fr) var(--mark); column-gap: var(--gap); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); }

[data-b="2"] .step { position: relative; }

/* One segment of the line per step: from this square's centre to the next square's centre */
[data-b="2"] .step::before { content: ""; position: absolute; top: calc(var(--mark) / 2 - var(--rail) / 2); left: calc(var(--mark) / 2);
  width: calc(100% + var(--gap)); height: var(--rail); background: var(--cap-turquoise); transform-origin: 0 50%; }

[data-b="2"] .num { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: var(--mark); height: var(--mark);
  background: var(--cap-light); border: 2px solid var(--cap-ink); font: var(--cap-text-small); font-weight: 700; line-height: 1; color: var(--cap-ink); font-variant-numeric: tabular-nums; }

.step-text { padding: var(--cap-space-4) var(--cap-space-2) 0 0; }

[data-b="2"] .step h3 { font: var(--cap-text-h3); color: var(--cap-ink); text-wrap: pretty; }

[data-b="2"] .step p { margin-top: var(--cap-space-2); font: var(--cap-text-small); color: var(--cap-slate); text-wrap: pretty; }

.end { position: relative; z-index: 1; width: var(--mark); height: var(--mark); background: var(--cap-ink); display: flex; align-items: center; justify-content: center; }

.end::after { content: ""; width: 12px; height: 12px; background: var(--cap-gold); }

/* The outcome: what the answers decide and the survey button on the left, the report as an object on the right */
.outcome { margin-top: var(--cap-space-7); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 552px); grid-template-rows: auto 1fr;
  grid-template-areas: "why report" "act report"; column-gap: var(--cap-space-8); }

.why { grid-area: why; max-width: 30em; padding-left: var(--cap-space-5); border-left: 3px solid var(--cap-turquoise); font: var(--cap-text-h3); color: var(--cap-ink); text-wrap: pretty; }

.act { grid-area: act; margin-top: var(--cap-space-6); }

[data-b="2"] .d-cta { display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 18px 32px; font: 600 17px/20px var(--cap-font-sans); color: var(--cap-white); text-decoration: none; }

[data-b="2"] .d-cta svg { flex: none; transition: transform 160ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
 [data-b="2"] .d-cta:hover svg { transform: translateX(3px); }
}

.privacy { margin-top: var(--cap-space-3); font: var(--cap-text-small); color: var(--cap-slate); max-width: 34em; text-wrap: pretty; }

.report { grid-area: report; display: grid; grid-template-columns: minmax(0, 1fr) 232px; grid-template-areas: "text cover"; column-gap: var(--cap-space-5); align-items: start; }

.report-text { grid-area: text; }

.report-text p { font: var(--cap-text-small); color: var(--cap-ink); text-wrap: pretty; }

.report-text .report-offer { margin-top: var(--cap-space-4); padding-top: var(--cap-space-4); border-top: 1px solid var(--cap-ink-20); font: var(--cap-text-body); font-weight: 700; }

/* The cover: a portrait page in A4 proportion, with the reverse logo, the title and the year in gold */
.cover { grid-area: cover; --cap-cut: 24px; aspect-ratio: 210 / 297; display: flex; flex-direction: column; padding: 24px 22px 26px; background: var(--cap-ink); color: var(--cap-white); }

.cover-logo { width: 160px; height: auto; }

.cover-foot { margin-top: auto; }

.cover-rule { height: 1px; background: var(--cap-ink-60); transform-origin: left center; }

.cover h3 { margin-top: var(--cap-space-4); font: var(--cap-text-h2); color: var(--cap-white); }

.cover-year { margin-top: var(--cap-space-2); font: var(--cap-text-h3); color: var(--cap-gold); }

/* Entry motion: once, when the block comes into view. The line draws square by square; from 0.6 s the outcome rises, the survey button first,
   and the cover's rule draws. All done by 1.6 s */
@media (prefers-reduced-motion: no-preference) {

  [data-b="2"] .combo.is-in .step::before { animation: wipe-x 240ms cubic-bezier(0.65, 0, 0.35, 1) both; }

  [data-b="2"] .combo.is-in .num, .combo.is-in .step-text { animation: rise 420ms var(--ease-out) both; }

  [data-b="2"] .combo.is-in .step:nth-child(1) .num, [data-b="2"] .combo.is-in .step:nth-child(1) .step-text { animation-delay: 60ms; }

  [data-b="2"] .combo.is-in .step:nth-child(2) .num, [data-b="2"] .combo.is-in .step:nth-child(2) .step-text { animation-delay: 240ms; }

  [data-b="2"] .combo.is-in .step:nth-child(3) .num, [data-b="2"] .combo.is-in .step:nth-child(3) .step-text { animation-delay: 420ms; }

  [data-b="2"] .combo.is-in .step:nth-child(4) .num, [data-b="2"] .combo.is-in .step:nth-child(4) .step-text { animation-delay: 600ms; }

  [data-b="2"] .combo.is-in .step:nth-child(5) .num, [data-b="2"] .combo.is-in .step:nth-child(5) .step-text { animation-delay: 780ms; }

  [data-b="2"] .combo.is-in .step:nth-child(1)::before { animation-delay: 160ms; }

  [data-b="2"] .combo.is-in .step:nth-child(2)::before { animation-delay: 340ms; }

  [data-b="2"] .combo.is-in .step:nth-child(3)::before { animation-delay: 520ms; }

  [data-b="2"] .combo.is-in .step:nth-child(4)::before { animation-delay: 700ms; }

  [data-b="2"] .combo.is-in .step:nth-child(5)::before { animation-delay: 880ms; }

  .combo.is-in .end { animation: rise 420ms var(--ease-out) 1060ms both; }

  .combo.is-in .act { animation: rise 520ms var(--ease-out) 600ms both; }

  .combo.is-in .why { animation: rise 520ms var(--ease-out) 680ms both; }

  .combo.is-in .cover { animation: cover-in 700ms var(--ease-out) 720ms both; }

  .combo.is-in .report-text { animation: rise 520ms var(--ease-out) 800ms both; }

  .combo.is-in .cover-rule { animation: draw-x 700ms var(--ease-out) 900ms both; }

  /* Before the block is in view (script present): held at the start state */
  [data-b="2"] .combo.is-waiting .step::before { clip-path: inset(0 100% 0 0); }

  .combo.is-waiting .cover-rule { transform: scaleX(0); }

  [data-b="2"] .combo.is-waiting .num, .combo.is-waiting .step-text, .combo.is-waiting .end, .combo.is-waiting .why,
  .combo.is-waiting .cover, .combo.is-waiting .report-text, .combo.is-waiting .act { opacity: 0; }
}

@keyframes draw-x { from { transform: scaleX(0); } to { transform: none; } }

@keyframes wipe-x { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }

@keyframes draw-y { from { transform: scaleY(0); } to { transform: none; } }

@keyframes cover-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* 1024 to 1199 px: the same path, narrower columns */
@media (max-width: 1199px) {

  .outcome { grid-template-columns: minmax(0, 1fr) minmax(0, 488px); column-gap: var(--cap-space-7); }

  .report { grid-template-columns: minmax(0, 1fr) 208px; }

  .cover { padding: 20px 20px 22px; }

  .cover-logo { width: 150px; }
}

/* Under 1024 px: the path runs down the page, as in C, and the outcome follows it */
@media (max-width: 1023px) {

  .route { grid-template-columns: minmax(0, 1fr); max-width: 640px; }

  .steps { grid-template-columns: minmax(0, 1fr); }

  [data-b="2"] .step { display: grid; grid-template-columns: var(--mark) minmax(0, 1fr); column-gap: var(--cap-space-5); }

  [data-b="2"] .step::before { top: calc(var(--mark) / 2); bottom: calc(-1 * var(--mark) / 2); left: calc(var(--mark) / 2 - var(--rail) / 2); width: var(--rail); height: auto; transform-origin: 50% 0; }

  .step-text { padding: 3px 0 var(--cap-space-5); }

  [data-b="2"] .step p { margin-top: var(--cap-space-1); max-width: 34em; }

  .outcome { margin-top: var(--cap-space-5); grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "why" "report" "act"; max-width: 640px; }

  .report { margin-top: var(--cap-space-6); grid-template-columns: minmax(0, 1fr) 208px; }
}

@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {

  [data-b="2"] .combo.is-in .step::before { animation-name: draw-y; }

  [data-b="2"] .combo.is-waiting .step::before { clip-path: none; transform: scaleY(0); }
}

/* Phone: shorter cover (4:3, logo, title and year) above the description, so the offer and the button come sooner */
@media (max-width: 767px) {

  .combo { padding: var(--cap-space-7) 0; }

  .route { --mark: 32px; margin-top: var(--cap-space-5); }

  [data-b="2"] .step { column-gap: var(--cap-space-4); }

  .step-text { padding: 2px 0 var(--cap-space-4); }

  .end::after { width: 10px; height: 10px; }

  .why { padding-left: var(--cap-space-4); }

  .report { margin-top: var(--cap-space-5); grid-template-columns: minmax(0, 1fr); grid-template-areas: "cover" "text"; row-gap: var(--cap-space-4); }

  .cover { aspect-ratio: 4 / 3; width: 100%; max-width: 300px; padding: 18px 18px 20px; }

  .cover-logo { width: 150px; }

  .cover h3 { margin-top: var(--cap-space-3); }

  .act { margin-top: var(--cap-space-5); }

  [data-b="2"] .d-cta { display: flex; width: 100%; justify-content: center; padding: 18px 16px; }
}

/* Block 2: the survey button arrow holds still under reduced motion */
@media (prefers-reduced-motion: reduce) {

  [data-b="2"] .d-cta:hover svg, [data-b="2"] .d-cta svg { transform: none !important; }
}

/* Print: every part of block 2 shows, whatever the entry motion state */
@media print {

  [data-b="2"] .combo .num, .combo .step-text, .combo .end, .combo .why, .combo .cover, .combo .report-text, .combo .act { opacity: 1 !important; animation: none !important; transform: none !important; }

  [data-b="2"] .combo .step::before, .combo .cover-rule { animation: none !important; transform: none !important; clip-path: none !important; }
}

/* Block 2: focus inside the block cancels the held start state and the entry motion, so the survey button is never focused while hidden
   (Tab, anchor jump). Placed after the width rules so it wins over the phone version of the held line */
@media (prefers-reduced-motion: no-preference) {

  [data-b="2"] .combo:focus-within .num, .combo:focus-within .step-text, .combo:focus-within .end, .combo:focus-within .why,
  .combo:focus-within .cover, .combo:focus-within .report-text, .combo:focus-within .act { opacity: 1; animation: none; }

  [data-b="2"] .combo:focus-within .step::before, .combo:focus-within .cover-rule { clip-path: none; transform: none; animation: none; }
}

/* ====================== Block 3: Kazakhstan in figures ====================== */

/* ---------- Block 3, alternative B: a light editorial block, numbers in the serif beside one chart (after Our World in Data's key insights, ourworldindata.org) ---------- */
.b3 { padding: var(--cap-space-8) 0; }

.b3 > .cap-container { border-top: 0; }

.b3 h2 { font: var(--cap-text-h1); color: var(--cap-ink); padding-top: var(--cap-space-5); border-top: 1px solid var(--cap-ink); text-wrap: balance; }

.b3-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; grid-template-areas: "text chart" "more chart"; gap: 0 var(--cap-space-8); margin-top: var(--cap-space-6); align-items: start; }

.b3-text { grid-area: text; }

.b3-chart { grid-area: chart; }

.b3-lede { font: var(--cap-text-body); color: var(--cap-ink); text-wrap: pretty; }

.b3-facts { list-style: none; margin: var(--cap-space-6) 0 0; padding: 0; }

.b3-facts li { display: grid; grid-template-columns: 164px 1fr; gap: var(--cap-space-5); padding: var(--cap-space-4) 0 var(--cap-space-2); border-top: 1px solid var(--cap-ink-20); }

.b3-facts li:last-child { border-bottom: 1px solid var(--cap-ink-20); }

.b3-n { font: var(--cap-text-display); line-height: 1; color: var(--cap-ink); font-variant-numeric: lining-nums; letter-spacing: -0.01em; white-space: nowrap; padding-top: 2px; }

.b3-n span { font-size: 20px; letter-spacing: 0; }

.b3-t { font: var(--cap-text-body); color: var(--cap-ink); }

.b3-src { margin-top: var(--cap-space-2); display: flex; flex-direction: column; align-items: flex-start; row-gap: 4px; }

/* One shared source line for the Ministry of Finance under the three figures; the Bureau of National Statistics stays on the third */
.b3-shared { margin-top: var(--cap-space-3); }

.b3-src a, .b3-shared a, .b3-reg a { display: inline-flex; align-items: center; min-height: 44px; font: var(--cap-text-small); text-wrap: balance; }

.b3-chart .b3-src { margin-top: 0; }

.b3-src--row { flex-direction: row; flex-wrap: wrap; column-gap: var(--cap-space-5); }

.b3-note { margin-top: var(--cap-space-3); font: var(--cap-text-small); color: var(--cap-slate); }

.b3-reg { margin-top: var(--cap-space-2); }

.b3-more { grid-area: more; justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: var(--cap-space-3); font: 600 17px/24px var(--cap-font-sans); }

.b3-more svg { flex: none; transition: transform 160ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) { .b3-more:hover svg { transform: translateX(3px); } }

/* The chart: square columns, ink for the comparison, turquoise for the year the story is about (as web/charts.js) */
.b3-chart { margin: 0; padding: var(--cap-space-6); background: var(--cap-light); --cap-cut: 24px; }

.b3-ct { font: var(--cap-text-h3); color: var(--cap-ink); max-width: 22em; text-wrap: balance; }

.b3-unit { margin-top: var(--cap-space-2); font: var(--cap-text-small); color: var(--cap-slate); }

/* The plot is drawn by charts.js (fig2 in figures.js) as one SVG with the editorial layout: gridlines at 0, 25 and 50%,
   2017 then an axis break for the years not shown, then 2024 and 2025. Its sizes come from these properties. */
.b3-plot { --chart-h: 260px; --chart-bar: 44px; margin-top: var(--cap-space-4); min-height: var(--chart-h); }
.b3-plot .chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.b3-plot .chart-tick { font: 600 13px/1 var(--cap-font-sans); font-variant-numeric: tabular-nums; }
.b3-plot .chart-value { font: 700 17px/1 var(--cap-font-sans); font-variant-numeric: tabular-nums; }
:lang(kk) .b3-plot .chart-value { font-weight: 600; }
.b3-plot .chart-hit { cursor: default; outline: none; }
.b3-plot .chart-hit:focus-visible { stroke: var(--cap-turquoise-deep); stroke-width: 2; }
.b3-plot .chart-mark { transition: opacity 160ms ease; }
.b3-plot .chart-mark.is-hot { opacity: 0.82; }
/* Before the chart is drawn (no script): the values as a plain list */
.b3-fallback { list-style: none; margin: 0; padding: var(--cap-space-4) 0 0; display: flex; flex-wrap: wrap; gap: var(--cap-space-2) var(--cap-space-6); font: var(--cap-text-small); color: var(--cap-ink); }
.b3-fallback b { font-weight: 700; }
/* The readout for a column under the pointer or the keyboard (shared with the figures section of the survey page) */
.chart-tip { position: absolute; top: 0; left: 0; z-index: 60; pointer-events: none; background: var(--cap-ink); color: var(--cap-white); padding: 8px 12px 9px; max-width: 280px; }
.chart-tip[hidden] { display: none; }
.chart-tip strong { display: block; font: 700 18px/1.2 var(--cap-font-sans); font-variant-numeric: tabular-nums; }
.chart-tip span { display: block; margin-top: 2px; font: 500 13px/1.35 var(--cap-font-sans); color: var(--cap-ink-20); }
:lang(kk) .chart-tip strong { font-weight: 600; }

.b3-chart figcaption { margin-top: var(--cap-space-4); }

.b3-cnote { font: var(--cap-text-small); color: var(--cap-slate); }

.b3-slabel { margin-top: var(--cap-space-4); font: var(--cap-text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cap-slate); }

/* Entry: once. The numbers rise in turn, the columns grow from the baseline, the values follow. Done by 1.6 s. */
@media (prefers-reduced-motion: no-preference) {
  .js .b3 .b3-facts li { opacity: 0; }
  .b3.is-in .b3-facts li { animation: rise 600ms var(--ease-out) both; }
  .b3.is-in .b3-facts li:nth-child(2) { animation-delay: 80ms; }
  .b3.is-in .b3-facts li:nth-child(3) { animation-delay: 160ms; }
  /* charts.js adds .is-in to the SVG when it scrolls into view: the columns grow from the baseline, the values follow */
  .b3-plot .chart-mark { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform 800ms var(--ease-out), opacity 160ms ease; }
  .b3-plot .chart-value { opacity: 0; transition: opacity 400ms ease 1000ms; }
  .b3-plot .chart-svg.is-in .chart-mark { transform: none; transition-delay: calc(250ms + var(--i, 0) * 80ms), 0ms; }
  .b3-plot .chart-svg.is-in .chart-value { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) { .b3-more:hover svg { transform: none !important; } }

@media (max-width: 1023px) {
  .b3-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "text" "chart" "more"; gap: var(--cap-space-7) 0; }
  .b3-more { margin-top: calc(var(--cap-space-4) - var(--cap-space-7)); }
  .b3-text { max-width: 640px; }
}

@media (max-width: 767px) {
  .b3 { padding: var(--cap-space-7) 0; }
  .b3 h2 { padding-top: var(--cap-space-4); }
  .b3-grid { margin-top: var(--cap-space-4); gap: var(--cap-space-6) 0; }
  .b3-more { margin-top: calc(var(--cap-space-4) - var(--cap-space-6)); }
  .b3-facts li { grid-template-columns: 1fr; gap: var(--cap-space-2); padding-top: var(--cap-space-4); }
  .b3-chart { margin-left: -16px; margin-right: -16px; padding: var(--cap-space-5) var(--cap-space-4); --cap-cut: 16px; }
  .b3-plot { --chart-h: 230px; --chart-bar: 36px; }
}

/* ====================== Block 4: what Central Asia Procurement is ====================== */

/* ========== Block 4, alternative D: B with the statement from C ========== */
.nowrap { white-space: nowrap; }

/* B with the statement from C: block heading as a small label, one large serif sentence in white,
   then the four principles two by two with large gold numerals (ICA charter + JRF statement) */
.about { --cap-cut: 24px; padding: var(--cap-space-8) 0; }

.about-head h2 { display: flex; align-items: center; gap: 12px; font: var(--cap-text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cap-ink-20); }

.about-head h2::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--cap-gold); }

.statement { font: var(--cap-text-h1); color: var(--cap-white); margin-top: var(--cap-space-5); max-width: 17em; text-wrap: balance; }

.charter-wrap { margin-top: var(--cap-space-7); }

.charter { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 5fr 6fr; align-items: start; border-top: 1px solid var(--cap-ink-80); }

.article { display: grid; grid-template-columns: 64px 1fr; column-gap: var(--cap-space-5); padding: var(--cap-space-6) var(--cap-space-7) var(--cap-space-6) 0; }

.article:nth-child(n+3) { border-top: 1px solid var(--cap-ink-80); }

.article:nth-child(even) { padding-left: var(--cap-space-7); padding-right: 0; border-left: 1px solid var(--cap-ink-80); }

[data-b="4"] .num { font: 600 72px/64px var(--cap-font-serif); color: var(--cap-gold); font-variant-numeric: lining-nums; }

.article h3 { font: var(--cap-text-h3); color: var(--cap-white); text-wrap: balance; }

.article p { font: var(--cap-text-small); color: var(--cap-ink-10); margin-top: var(--cap-space-3); text-wrap: pretty; max-width: 34em; }

.article .figure { margin-top: var(--cap-space-4); padding-top: var(--cap-space-3); border-top: 1px solid var(--cap-ink-80); color: var(--cap-white); font-weight: 600; }

[data-b="4"] .article .source { margin-top: var(--cap-space-1); font: 500 13px/20px var(--cap-font-sans); color: var(--cap-ink-20); }

.about-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 600 15px/20px var(--cap-font-sans); white-space: nowrap; text-underline-offset: 0.2em; }

.about-link svg { flex: none; transition: transform 160ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
 .about-link:hover svg { transform: translateX(3px); }
}

/* The link closes the block on every width, after the grid, on the block's left edge */
.about-link { margin-top: var(--cap-space-5); }

@media (prefers-reduced-motion: no-preference) {

  .js .about .about-head > *, .js .about .article > div, .js .about .about-link { opacity: 0; transform: translateY(8px); }

  .js [data-b="4"] .about .num { opacity: 0; }

  .js .about:not(.is-in) .charter { clip-path: inset(0 100% 0 0); }

  .js .about.is-in .about-head > * { animation: rise 500ms var(--ease-out) both; }

  .js .about.is-in .statement { animation-duration: 700ms; animation-delay: 90ms; }

  .js .about.is-in .charter { animation: wipe 900ms var(--ease-out) 300ms backwards; }

  .js [data-b="4"] .about.is-in .num { animation: show 600ms ease both; }

  .js .about.is-in .article > div { animation: rise 500ms var(--ease-out) both; }

  .js [data-b="4"] .about.is-in .article:nth-child(1) .num { animation-delay: 450ms; }

  .js [data-b="4"] .about.is-in .article:nth-child(2) .num { animation-delay: 530ms; }

  .js [data-b="4"] .about.is-in .article:nth-child(3) .num { animation-delay: 610ms; }

  .js [data-b="4"] .about.is-in .article:nth-child(4) .num { animation-delay: 690ms; }

  .js .about.is-in .article:nth-child(1) > div { animation-delay: 510ms; }

  .js .about.is-in .article:nth-child(2) > div { animation-delay: 590ms; }

  .js .about.is-in .article:nth-child(3) > div { animation-delay: 670ms; }

  .js .about.is-in .article:nth-child(4) > div { animation-delay: 750ms; }

  .js .about.is-in .about-link { animation: rise 500ms var(--ease-out) 900ms both; }
}

@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

@keyframes show { to { opacity: 1; } }

@media (max-width: 1023px) {

  .charter { grid-template-columns: 1fr; }

  .article, .article:nth-child(even) { padding: var(--cap-space-6) 0; border-left: 0; }

  .article + .article { border-top: 1px solid var(--cap-ink-80); }
}

@media (max-width: 767px) {

  .about { --cap-cut: 16px; padding: var(--cap-space-7) 0 var(--cap-space-7); }

  .statement { margin-top: var(--cap-space-4); }

  .charter-wrap { margin-top: var(--cap-space-6); }

  .article, .article:nth-child(even) { grid-template-columns: 44px 1fr; column-gap: var(--cap-space-4); padding: var(--cap-space-5) 0; }

  [data-b="4"] .num { font: 600 44px/40px var(--cap-font-serif); }
}

/* ====================== Block 5: membership ====================== */

/* ==========================================================================
   Block 5, alternative A: membership as a benefits grid with one wide card.
   After the Association for Project Management (apm.org.uk/membership):
   a grid of benefit titles on white, the supplier qualification as a wide ink card.
   ========================================================================== */
.ma { padding: var(--cap-space-8) 0; background: var(--cap-white); }

.ma-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--cap-space-7); align-items: start; }

.ma-head h2 { font: var(--cap-text-h1); color: var(--cap-ink); margin-top: -4px; }

.ma-value { font: 600 20px/30px var(--cap-font-sans); color: var(--cap-ink); text-wrap: pretty; }

.ma-lede { grid-column: 2; margin-top: var(--cap-space-3); font: var(--cap-text-small); color: var(--cap-slate); }

/* Six benefit titles: three columns, a hairline with a turquoise lead above each */
.ma-grid { list-style: none; margin: var(--cap-space-7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--cap-space-6); row-gap: var(--cap-space-6); }

.ma-grid li { position: relative; padding-top: 20px; border-top: 1px solid var(--cap-ink-20); }

.ma-grid li::before { content: ""; position: absolute; left: 0; top: -1px; width: 48px; height: 3px; background: var(--cap-turquoise); transform-origin: 0 50%; }

.ma-num { position: absolute; right: 0; top: 20px; font: var(--cap-text-caption); letter-spacing: 0.08em; color: var(--cap-slate); }

.ma-ben { display: block; font: var(--cap-text-h3); color: var(--cap-ink); padding-right: 40px; text-wrap: balance; }

/* The supplier qualification: the wide card, on ink, with the one cut of this section */
.ma-qual { --cap-cut: 24px; margin-top: var(--cap-space-7); padding: var(--cap-space-7) var(--cap-space-7) 44px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--cap-space-7); }

.ma-tag { display: flex; align-items: center; gap: 12px; font: var(--cap-text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cap-gold); }

.ma-tag::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--cap-gold); }

.ma-qual h3 { margin-top: var(--cap-space-4); font: var(--cap-text-h2); color: var(--cap-white); text-wrap: balance; }

.ma-qual-text p { color: var(--cap-ink-10); }

.ma-qual-text p + p { margin-top: var(--cap-space-3); }

.ma-qual-text { padding-top: 28px; }

/* Who can join, the expected fee, and the actions */
.ma-foot { margin-top: var(--cap-space-7); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr); column-gap: var(--cap-space-6); align-items: start; }

.ma-label { font: var(--cap-text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cap-slate); }

.ma-foot .ma-join p:not(.ma-label), .ma-fee-note { margin-top: var(--cap-space-2); font: var(--cap-text-small); color: var(--cap-ink); }

.ma-fee-figure { margin-top: var(--cap-space-2); font: var(--cap-text-h1); color: var(--cap-ink); font-variant-numeric: lining-nums; white-space: nowrap; }

.ma-fee-unit { font: 600 15px/24px var(--cap-font-sans); color: var(--cap-ink); }

.ma-fee-note { color: var(--cap-slate); }

.ma-act { display: flex; flex-direction: column; align-items: flex-start; padding-left: var(--cap-space-6); border-left: 1px solid var(--cap-ink-20); }

.ma-open { font: var(--cap-text-small); color: var(--cap-ink); }

.ma-cta { display: inline-flex; align-items: center; gap: 14px; min-height: 56px; margin-top: var(--cap-space-4); padding: 18px 32px; font: 600 17px/20px var(--cap-font-sans); color: var(--cap-white); text-decoration: none; }

.ma-cta:hover, .ma-cta:focus-visible { color: var(--cap-white); }

.ma-cta svg { flex: none; transition: transform 160ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) { .ma-cta:hover svg { transform: translateX(3px); } }

.ma-more { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--cap-space-3); font: 600 15px/24px var(--cap-font-sans); }

/* Entry motion: once, when each part enters the viewport; hidden only once the script has armed it */
@media (prefers-reduced-motion: no-preference) {
  .ma-head.armed > *, .ma-grid.armed li, .ma-qual.armed, .ma-foot.armed > * { opacity: 0; }
  .ma-grid.armed li::before { transform: scaleX(0); }
  .ma-head.is-in > * { animation: rise 500ms var(--ease-out) both; }
  .ma-head.is-in > :nth-child(2) { animation-delay: 60ms; }
  .ma-head.is-in > :nth-child(3) { animation-delay: 120ms; }
  .ma-grid.is-in li { animation: rise 500ms var(--ease-out) both; }
  .ma-grid.is-in li::before { animation: draw 700ms var(--ease-out) both; }
  .ma-grid.is-in li:nth-child(2), .ma-grid.is-in li:nth-child(2)::before { animation-delay: 60ms; }
  .ma-grid.is-in li:nth-child(3), .ma-grid.is-in li:nth-child(3)::before { animation-delay: 120ms; }
  .ma-grid.is-in li:nth-child(4), .ma-grid.is-in li:nth-child(4)::before { animation-delay: 180ms; }
  .ma-grid.is-in li:nth-child(5), .ma-grid.is-in li:nth-child(5)::before { animation-delay: 240ms; }
  .ma-grid.is-in li:nth-child(6), .ma-grid.is-in li:nth-child(6)::before { animation-delay: 300ms; }
  .ma-qual.is-in { animation: rise-card 600ms var(--ease-out) 100ms both; }
  .ma-foot.is-in > * { animation: rise 500ms var(--ease-out) both; }
  .ma-foot.is-in > :nth-child(2) { animation-delay: 80ms; }
  .ma-foot.is-in > :nth-child(3) { animation-delay: 160ms; }
}

@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@keyframes rise-card { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 1199px) {
  .ma-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: var(--cap-space-6); }
  .ma-act { grid-column: 1 / -1; padding: var(--cap-space-5) 0 0; border-left: 0; border-top: 1px solid var(--cap-ink-20); }
}

@media (max-width: 1023px) {
  .ma-head { display: block; max-width: 680px; }
  .ma-value { margin-top: var(--cap-space-4); }
  .ma-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ma-qual { display: block; padding: var(--cap-space-6) var(--cap-space-6) 36px; }
  .ma-qual-text { padding-top: var(--cap-space-4); max-width: 40em; }
}

@media (max-width: 767px) {
  .ma { padding: var(--cap-space-7) 0; }
  .ma-value { font-size: 18px; line-height: 28px; margin-top: var(--cap-space-3); }
  .ma-grid { grid-template-columns: minmax(0, 1fr); row-gap: 0; margin-top: var(--cap-space-5); }
  .ma-grid li { padding: 14px 0 16px; }
  .ma-num { top: 18px; }
  .ma-grid li:last-child { border-bottom: 1px solid var(--cap-ink-20); }
  .ma-ben { font: 600 18px/26px var(--cap-font-serif); }
  .ma-qual { --cap-cut: 16px; margin-top: var(--cap-space-6); padding: var(--cap-space-5) var(--cap-space-4) 28px; }
  .ma-foot { grid-template-columns: minmax(0, 1fr); row-gap: var(--cap-space-5); margin-top: var(--cap-space-6); }
  .ma-fee-figure { font: var(--cap-text-h1); }
  .ma-act { align-items: stretch; }
  .ma-cta { display: flex; width: 100%; justify-content: center; padding: 18px 16px; }
  .ma-more { align-self: flex-start; }
}

/* Reduced motion: the button arrow stays still on hover */
@media (prefers-reduced-motion: reduce) { .ma-cta svg, .ma-cta:hover svg { transform: none !important; } }

/* ====================== Block 6: how the association is being founded ====================== */

/* ---------- Block 6 ---------- */
.blk { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); }

/* Alternative A: a horizontal roadmap with the current steps marked, then the two cities side by side (after the European Citizens' Initiative, citizens-initiative.europa.eu, "How it works") */
.blk { padding-block: 0 104px; }

.blk::before { content: ""; display: block; height: 1px; background: var(--cap-ink-20); margin-bottom: 80px; }

.blk-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--cap-space-6); align-items: end; }

.blk h2 { font: var(--cap-text-h1); color: var(--cap-ink); text-wrap: balance; }

.blk-lede { margin-top: var(--cap-space-3); color: var(--cap-slate); max-width: 36em; }

.more { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 600 15px/20px var(--cap-font-sans); white-space: nowrap; }

.more svg { flex: none; transition: transform 160ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
 .more:hover svg { transform: translateX(3px); }
}

/* The roadmap: five columns, the two current steps on a tinted panel with the brand cut */
.track { list-style: none; margin: var(--cap-space-7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1.15fr)) repeat(3, minmax(0, 1fr)); column-gap: var(--cap-space-5); position: relative; }

.track::before { content: ""; grid-column: 1 / 3; grid-row: 1; margin: -24px -12px -24px 0; background: var(--cap-turquoise-12); clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); }

[data-b="6"] .step { grid-row: 1; position: relative; padding-top: 52px; }

[data-b="6"] .step:nth-child(1) { grid-column: 1; }

 [data-b="6"] .step:nth-child(2) { grid-column: 2; }

 [data-b="6"] .step:nth-child(3) { grid-column: 3; }

[data-b="6"] .step:nth-child(4) { grid-column: 4; }

 [data-b="6"] .step:nth-child(5) { grid-column: 5; }

.node { position: absolute; left: 0; top: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font: 700 15px/1 var(--cap-font-sans); color: var(--cap-ink); background: var(--cap-white); border: 1.5px solid var(--cap-ink); z-index: 1; }

[data-b="6"] .step.is-now { padding-left: 24px; }

[data-b="6"] .step.is-now .node { left: 24px; }

[data-b="6"] .step.is-now .node { background: var(--cap-turquoise-deep); border-color: var(--cap-turquoise-deep); color: var(--cap-white); }

/* The line from each node to the next: solid turquoise between the two current steps, a hairline after them */
[data-b="6"] .step:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: 32px; right: calc(-1 * var(--cap-space-5)); height: 1px; background: var(--cap-ink-20); transform-origin: left center; }

[data-b="6"] .step:first-child::after { height: 2px; top: 15px; left: 56px; right: calc(-1 * var(--cap-space-5) - 24px); background: var(--cap-turquoise-deep); }

[data-b="6"] .step.is-now:nth-child(2)::after { left: 56px; }

[data-b="6"] .step .tag { display: block; font: var(--cap-text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cap-slate); }

[data-b="6"] .step.is-now .tag { color: var(--cap-turquoise-deep); }

[data-b="6"] .step h3 { font: var(--cap-text-h3); color: var(--cap-ink); margin-top: var(--cap-space-2); text-wrap: balance; }

[data-b="6"] .step p { font: var(--cap-text-small); color: var(--cap-slate); margin-top: var(--cap-space-2); }

[data-b="6"] .step.is-now p { color: var(--cap-ink-80); }

[data-b="6"] .step .survey-link { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: var(--cap-space-2); font: 600 15px/20px var(--cap-font-sans); }

/* The first year: two cities side by side, captions under each photo, then the plans */
.year { margin-top: 104px; }

.year-head { display: flex; align-items: baseline; gap: var(--cap-space-5); flex-wrap: wrap; }

.year-head h3 { font: var(--cap-text-h2); color: var(--cap-ink); }

.year-head p { font: var(--cap-text-small); color: var(--cap-slate); }

.cities { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cap-space-6); margin-top: var(--cap-space-5); }

.city { margin: 0; }

.city-photo { aspect-ratio: 16 / 9; overflow: hidden; background: var(--cap-ink-10); }

.city-photo img { width: 100%; height: 100%; object-fit: cover; }
.city-photo picture { display: contents; }
/* Each photo carries only its city name; the two initiatives follow, under a line, for both cities (28 October 2026) */
.cities { list-style: none; padding: 0; }
.city-photo { position: relative; }
.city-name { position: absolute; left: 0; bottom: 0; padding: 8px 14px; background: var(--cap-ink); color: var(--cap-white); font: var(--cap-text-caption); letter-spacing: 0.08em; text-transform: uppercase; }
.inits { margin-top: var(--cap-space-6); padding-top: var(--cap-space-5); border-top: 1px solid var(--cap-ink-20); }
.inits-title { margin: 0; font: var(--cap-text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cap-slate); }
.inits-list { list-style: none; margin: var(--cap-space-3) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--cap-space-6); }
.init h5 { font: var(--cap-text-h3); color: var(--cap-ink); margin: 0; }
.init p { font: var(--cap-text-small); color: var(--cap-slate); margin: var(--cap-space-2) 0 0; max-width: 34em; }
.init .source { font: 500 13px/20px var(--cap-font-sans); margin-top: var(--cap-space-3); }

.city figcaption { padding-top: var(--cap-space-4); }

.city .tag, .plan .tag { display: block; font: var(--cap-text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cap-slate); }

.city h4, .plan h4 { font: var(--cap-text-h3); color: var(--cap-ink); margin: var(--cap-space-2) 0 0; }

.city p, .plan p { font: var(--cap-text-small); color: var(--cap-slate); margin-top: var(--cap-space-2); max-width: 34em; }

.plans { list-style: none; margin: var(--cap-space-7) 0 0; padding: var(--cap-space-5) 0 0; border-top: 1px solid var(--cap-ink-20); display: grid; grid-template-columns: 1fr 1fr; gap: var(--cap-space-6); }

.plan h4 { font: var(--cap-text-h3); }

[data-b="6"] .city .source { font: 500 13px/20px var(--cap-font-sans); color: var(--cap-slate); margin-top: var(--cap-space-3); }

.blk-foot { display: none; }

/* Motion: once, on entry. The line draws, the steps follow, then the cities. Done by about 1.5 s */
@media (prefers-reduced-motion: no-preference) {

  [data-b="6"] .blk.is-ready .step::after { transition: transform 900ms var(--ease-out); }

  [data-b="6"] .blk.is-ready .step > *:not(.node), .blk.is-ready .node, .blk.is-ready .city, .blk.is-ready .inits, .blk.is-ready .plan, .blk.is-ready .track::before { transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }

  [data-b="6"] .blk.is-ready:not(.is-in) .step::after { transform: scaleX(0); }

  .blk.is-ready:not(.is-in) .track::before { opacity: 0; }

  [data-b="6"] .blk.is-ready:not(.is-in) .step > *, .blk.is-ready:not(.is-in) .city, .blk.is-ready:not(.is-in) .inits, .blk.is-ready:not(.is-in) .plan { opacity: 0; transform: translateY(8px); }

  [data-b="6"] .step:nth-child(1)::after { transition-delay: 150ms !important; }

  [data-b="6"] .step:nth-child(2)::after { transition-delay: 300ms !important; }

  [data-b="6"] .step:nth-child(3)::after { transition-delay: 380ms !important; }

  [data-b="6"] .step:nth-child(4)::after { transition-delay: 460ms !important; }

  [data-b="6"] .step:nth-child(1) > * { transition-delay: 100ms !important; }

  [data-b="6"] .step:nth-child(2) > * { transition-delay: 180ms !important; }

  [data-b="6"] .step:nth-child(3) > * { transition-delay: 260ms !important; }

  [data-b="6"] .step:nth-child(4) > * { transition-delay: 340ms !important; }

  [data-b="6"] .step:nth-child(5) > * { transition-delay: 420ms !important; }

  .city:nth-child(1) { transition-delay: 700ms !important; }

  .city:nth-child(2) { transition-delay: 800ms !important; }

  .inits { transition-delay: 880ms !important; }

  .plan:nth-child(1) { transition-delay: 950ms !important; }

  .plan:nth-child(2) { transition-delay: 1020ms !important; }
}

/* Tablet: the roadmap keeps its five columns down to 1024, then turns vertical */
@media (max-width: 1023px) {

  .track { grid-template-columns: minmax(0, 1fr); row-gap: 0; margin-top: var(--cap-space-6); padding-left: 16px; }

  .track::before { grid-column: 1; grid-row: 1 / 3; margin: -16px 0 8px -16px; }

  [data-b="6"] .step:nth-child(n) { grid-column: 1; padding: 0 0 var(--cap-space-6) 52px; }

  [data-b="6"] .step:nth-child(1) { grid-row: 1; }
 [data-b="6"] .step:nth-child(2) { grid-row: 2; }
 [data-b="6"] .step:nth-child(3) { grid-row: 3; }

  [data-b="6"] .step:nth-child(4) { grid-row: 4; }
 [data-b="6"] .step:nth-child(5) { grid-row: 5; padding-bottom: 0; }

  [data-b="6"] .step:nth-child(2) { padding-bottom: var(--cap-space-7); }

  [data-b="6"] .step.is-now .node { left: 0; }

  [data-b="6"] .step:not(:last-child)::after { top: 32px; bottom: 0; left: 15px; right: auto; width: 1px; height: auto; transform-origin: center top; }

  [data-b="6"] .step:first-child::after { width: 2px; height: auto; left: 15px; right: auto; }

  [data-b="6"] .step.is-now:nth-child(2)::after { left: 15px; }

  [data-b="6"] .step:nth-child(2)::after { bottom: 0; }

  [data-b="6"] .step h3 { margin-top: 6px; }

  [data-b="6"] .step .tag { padding-top: 8px; }

  [data-b="6"] .step p { max-width: 34em; }

  @media (prefers-reduced-motion: no-preference) {
 [data-b="6"] .blk.is-ready:not(.is-in) .step::after { transform: scaleY(0); }
}
}

/* Phone */
@media (max-width: 767px) {

  .blk { padding-block: 0 72px; }

  .blk::before { margin-bottom: 56px; }

  .blk-head { grid-template-columns: 1fr; }

  .blk-head .more { display: none; }

  .year { margin-top: 72px; }

  .year-head { display: block; }

  .year-head p { margin-top: var(--cap-space-2); }

  .plans, .inits-list { grid-template-columns: 1fr; gap: var(--cap-space-6); }

  .cities { gap: var(--cap-space-3); }

  .plans { margin-top: var(--cap-space-6); }

  .blk-foot { display: block; margin-top: var(--cap-space-6); padding-top: var(--cap-space-4); border-top: 1px solid var(--cap-ink-20); }
}

/* ====================== Block 7: closing band and footer ====================== */

/* Entry motion for the block: once, when it enters the viewport (the observer only adds .is-in) */
@media (prefers-reduced-motion: no-preference) {

  .js-reveal [data-block]:not(.is-in) .rv { opacity: 0; }

  [data-block].is-in .rv { animation: rise 520ms var(--ease-out) both; }

  [data-block].is-in .rv:nth-child(2) { animation-delay: 70ms; }

  [data-block].is-in .rv:nth-child(3) { animation-delay: 140ms; }

  [data-block].is-in .rv:nth-child(4) { animation-delay: 210ms; }

  [data-block].is-in .rv:nth-child(5) { animation-delay: 280ms; }
}

/* Alternative D: C with the survey as the main action. An ink stage inside the light band carries the survey heading at h1 size (display stays for the page title)
   and a large button; the invitation to colleagues sits below it on the light ground, smaller, with outline buttons.
   The light strip under the stage keeps the ink footer clearly separate, so no rule or mitre line is needed. */
.closing-d { background: var(--cap-turquoise-12); padding: 96px 0 72px; }

.d-stage { --d-cut: 24px; padding: 72px 64px 64px; clip-path: polygon(0 0, calc(100% - var(--d-cut)) 0, 100% var(--d-cut), 100% 100%, 0 100%); }

.d-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 64px; align-items: end; }

.closing-d h2 { font: var(--cap-text-h1); color: var(--cap-white); margin-top: 20px; text-wrap: balance; }

.d-lede { margin-top: var(--cap-space-4); color: var(--cap-ink-10); max-width: 30em; }

.d-act { padding-bottom: 4px; }

/* The survey button: larger than every other button on the page, white on ink */
[data-b="7"] .d-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 80px; margin: 0; padding: 24px 32px; font: 600 20px/24px var(--cap-font-sans); text-decoration: none; }

[data-b="7"] .d-cta svg { width: 22px; height: 22px; }

/* The invitation to colleagues: secondary, below the stage, on the same column split as the stage:
   the heading under the survey text, the buttons under the survey button and as wide as it */
.d-share { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px 64px; align-items: start; margin-top: 40px; padding: 0 64px; }

.d-share h2, .d-share h3 { font: var(--cap-text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cap-slate); padding-top: 2px; }

.d-share-text { margin-top: var(--cap-space-2); font: var(--cap-text-small); color: var(--cap-ink); max-width: 24em; }

.d-share .share-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; list-style: none; margin: 0; padding: 0; }

.d-share .share-list a, .d-share .share-list button { display: inline-flex; align-items: center; justify-content: center; width: 100%; gap: 8px; min-height: 44px; padding: 10px 14px; font: 600 14px/20px var(--cap-font-sans); text-decoration: none; background: var(--cap-white); }

.d-share .share-list svg { flex: none; }

/* Secondary hover from the tokens, which the white fill above would otherwise hide */
.d-share .share-list .cap-button--secondary:hover { background: var(--cap-ink-10); color: var(--cap-ink); border-color: var(--cap-ink); }

/* After copying: ink fill, so the confirmation reads on the light ground */
.d-share .share-list .copy-btn[data-copied="true"] { background: var(--cap-ink); border-color: var(--cap-ink); color: var(--cap-white); }

.copy-fallback { margin-top: var(--cap-space-3); }

.copy-fallback .cap-input { width: 100%; max-width: 30em; min-height: 48px; font: var(--cap-text-small); }

.copy-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Entry: the stage rises, its texts follow, the survey button arrives last on the stage, then the share buttons */
@media (prefers-reduced-motion: no-preference) {

  .js-reveal [data-block]:not(.is-in) .d-stage, .js-reveal [data-block]:not(.is-in) .share-list li, .js-reveal [data-block]:not(.is-in) .d-share-head { opacity: 0; }

  [data-block].is-in .d-stage { animation: rise 560ms var(--ease-out) both; }

  [data-block].is-in .d-text .rv:nth-child(1) { animation-delay: 120ms; }

  [data-block].is-in .d-text .rv:nth-child(2) { animation-delay: 180ms; }

  [data-block].is-in .d-text .rv:nth-child(3) { animation-delay: 240ms; }

  [data-block].is-in .d-act.rv { animation: rise-cta 520ms var(--ease-out) 320ms both; }

  [data-block].is-in .d-share-head { animation: rise 420ms var(--ease-out) 460ms both; }

  [data-block].is-in .share-list li { animation: rise 420ms var(--ease-out) both; }

  [data-block].is-in .share-list li:nth-child(1) { animation-delay: 500ms; }

  [data-block].is-in .share-list li:nth-child(2) { animation-delay: 540ms; }

  [data-block].is-in .share-list li:nth-child(3) { animation-delay: 580ms; }

  [data-block].is-in .share-list li:nth-child(4) { animation-delay: 620ms; }

  .d-share .share-list .cap-button { transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out); }
}

@keyframes rise-cta { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }

@media (max-width: 1023px) {

  .d-stage { padding: 56px 40px 48px; }

  .d-grid { grid-template-columns: 1fr; align-items: start; gap: 32px; }

  .d-act { max-width: 440px; }

  .d-share { grid-template-columns: 1fr; padding: 0 40px; }

  .d-share-act { max-width: 440px; }
}

@media (max-width: 767px) {

  .closing-d { padding: 32px 0 48px; }

  /* On the phone the stage runs edge to edge */
  .d-stage { --d-cut: 16px; margin: 0 -16px; padding: 40px 16px 32px; }

  .closing-d h2 { margin-top: var(--cap-space-3); }

  .d-grid { gap: 28px; }

  .d-act { max-width: none; }

  [data-b="7"] .d-cta { min-height: 64px; padding: 20px 20px; font-size: 18px; }

  .d-share { margin-top: 32px; padding: 0; gap: 16px; }

  .d-share-act { max-width: none; }

  .d-share .share-list a, .d-share .share-list button { padding: 10px 8px; }
}

/* ====================== Assembly ====================== */
/* What every assembly needs once the blocks sit on one page.
   Rhythm: 64 px of space inside each section edge (48 px on the phone); two neighbours on the same white
   ground are parted by one hairline at the middle of that space. Fixes for particular blocks are in src/overrides/. */
.founders .next-hint { height: var(--cap-space-8); }
@media (max-width: 767px) { .founders .next-hint { height: var(--cap-space-7); } }
/* ---------- Assembly fixes for block 6 ---------- */
/* Block 6A brings its own hairline at the top (it follows white block 5): the same space either side of it,
   and the page rhythm at the bottom, so the gap to the closing band is not doubled (was 80 above, 104 below) */
.blk::before { margin-bottom: var(--cap-space-8); }
.blk { padding-block: 0 var(--cap-space-8); }
@media (max-width: 767px) {
  .blk::before { margin-bottom: var(--cap-space-7); }
  .blk { padding-block: 0 var(--cap-space-7); }
}

/* Reduced motion: nothing moves, no animations and no transitions */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cap-button:active, .hero-cta:hover svg, .hero-cta svg { transform: none !important; }
}

/* Kazakh: the report title has a long word; one step smaller so it stays inside the cover */
:lang(kk) .cover h3 { font: var(--cap-text-h3); overflow-wrap: anywhere; }
/* Share buttons: same height in each row when a Russian or Kazakh label wraps */
.d-share .share-list li { display: flex; }
.d-share .share-list li > a, .d-share .share-list li > button { height: 100%; }
.d-share .share-list { grid-auto-rows: 1fr; }

/* ====================== Survey emphasis (28 October 2026, alternative C, approved by the convenor) ====================== */
/* Block 2 on ink: the survey in five sections and the report, with the white survey button */
.combo.cap-dark { background: var(--cap-ink); }
.cap-dark .combo-kicker { color: var(--cap-gold); }
.cap-dark .combo-head h2, [data-b="2"] .cap-dark .step h3, .cap-dark .why { color: var(--cap-white); }
[data-b="2"] .cap-dark .step p, .cap-dark .report-text p, .cap-dark .privacy { color: var(--cap-ink-20); }
.cap-dark .report-text .report-offer { color: var(--cap-white); border-top-color: var(--cap-ink-80); }
[data-b="2"] .cap-dark .num { background: var(--cap-ink); border-color: var(--cap-white); color: var(--cap-white); }
.cap-dark .end { box-shadow: inset 0 0 0 2px var(--cap-white); }
.cap-dark .cover { background: var(--cap-ink); box-shadow: inset 0 0 0 1px var(--cap-ink-60); }
[data-b="2"] .cap-dark .d-cta { color: var(--cap-ink); }
/* The survey band sits after the Kazakhstan figures, on white; the share row closes the page on its own */
.closing-mid { background: var(--cap-white); padding: var(--cap-space-7) 0 var(--cap-space-8); }
.closing-share { padding: 56px 0 72px; }
.closing-share .d-share { margin-top: 0; }
@media (max-width: 767px) {
  .closing-mid { padding: var(--cap-space-5) 0 var(--cap-space-7); }
  .closing-share { padding: 32px 0 48px; }
}