/* IDC Tech · idctech.tech · contact@idctech.tech
   r5 singles (D324): the stylesheet of the item pages (case studies, consultants, news, reports) and of the list pages they return to
   (Projects, Consultants, News, What we think, Clients). The approved prototype's final\assets\r5.css without its static header and footer
   copies (.sh, .sf), its list-hero copies (.kz-lhero, .kz-wwt, .kz-field) and its page base; every rule is scoped under .kz-r5, the body
   class inc/kaizen-r5-singles.php gives those pages only, and the base text rules apply inside the r5 blocks only (.kz-r5s: a single,
   .kz-lst: a list), so the header, the footer and the Divi sections of the list pages keep their own styles.
   Fonts: Almarai, already declared by the child theme's style.css with its Arabic and Latin faces, so English r5 blocks draw in Almarai's
   Latin letters ([Q6]); to go back to Arial on English pages, set --kz-font: Arial, sans-serif on html[lang="en"] .kz-r5.
   Loaded after gs-overrides.css (wp_enqueue_scripts 10001), versioned by its file time. No script: the gallery is radio buttons, the
   report-type tabs are radio buttons, "first 12 + Show all" and "You were here" are :target and :has(). */

/* ------------------------------------------------------------------ tokens */
.kz-r5 {
  --kz-bar-h: 64px;             /* the sticky back bar (56 px on phones) */
  --kz-wrap: 1120px;
  --kz-pad: 24px;
  --kz-font: "Almarai", Arial, sans-serif;
  --kz-ink: #141414;
  --kz-text: #383838;
  --kz-muted: #575a62;
  --kz-line: #e2e2ea;
  --kz-canvas: #f4f4f6;
  --kz-card: #ffffff;
  --kz-teal: #0bd0e2;
  --kz-teal-ink: #086b72;
  --kz-teal-soft: #e3f8fa;
  --kz-indigo: #101240;
  --kz-purple: #4b1575;
  --kz-link: #1f4fd1;
  --kz-radius: 20px;
  --kz-radius-sm: 12px;
  --kz-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 12px 32px -16px rgba(16, 24, 40, .16);
  --kz-shadow-hover: 0 2px 6px rgba(16, 24, 40, .07), 0 22px 44px -18px rgba(16, 24, 40, .28);
  --sector: #4b1575; --sector-ink: #4b1575; --sector-soft: #f2edf8;
}

/* ------------------------------------------------------------------ anchors clear the fixed header (+ the back bar on the singles); the only offset (no scroll-margin on headings: it would count twice) */
html:has(body.kz-r5 .kz-ctx) { scroll-padding-top: calc(var(--kz-header-h, 77px) + 64px + 16px); }
html:has(body.kz-r5 .kz-lst) { scroll-padding-top: calc(var(--kz-header-h, 77px) + 24px); }
@media (max-width: 767px) { html:has(body.kz-r5 .kz-ctx) { scroll-padding-top: calc(var(--kz-header-h, 77px) + 56px + 16px); } }
@media (max-height: 560px) { html:has(body.kz-r5 .kz-ctx) { scroll-padding-top: calc(var(--kz-header-h, 77px) + 16px); } }

/* ------------------------------------------------------------------ the r5 blocks and their base (never the header, footer or Divi) */
.kz-r5 .kz-r5s { padding-block-start: var(--kz-header-h, 77px); background: var(--kz-canvas); }
.kz-r5 :where(.kz-r5s, .kz-lst) { font-family: var(--kz-font); color: var(--kz-text); font-size: 17px; line-height: 1.75; text-align: start; }
html[lang="ar"] .kz-r5 :where(.kz-r5s, .kz-lst) { line-height: 1.9; }
.kz-r5 :where(.kz-r5s, .kz-lst) *,
.kz-r5 :where(.kz-r5s, .kz-lst) *::before,
.kz-r5 :where(.kz-r5s, .kz-lst) *::after { box-sizing: border-box; }
.kz-r5 :where(.kz-r5s, .kz-lst) img { max-width: 100%; height: auto; display: block; }
.kz-r5 :where(.kz-r5s, .kz-lst) a { color: var(--kz-link); }
.kz-r5 :where(.kz-r5s, .kz-lst) :is(h1, h2, h3, h4) { color: var(--kz-ink); margin: 0; padding: 0; line-height: 1.35; font-weight: 800; font-family: inherit; letter-spacing: normal; text-transform: none; }
.kz-r5 :where(.kz-r5s, .kz-lst) p { margin: 0 0 1em; padding: 0; }
.kz-r5 :where(.kz-r5s, .kz-lst) :focus-visible { outline: 3px solid var(--kz-purple); outline-offset: 3px; border-radius: 6px; }
.kz-r5 :where(.kz-r5s, .kz-lst) ul,
.kz-r5 :where(.kz-r5s, .kz-lst) ol { margin: 0; }
.kz-r5 :where(.kz-r5s, .kz-lst) [hidden] { display: none !important; }
.kz-r5 .kz-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .55; flex: none; display: inline-block; }

/* ------------------------------------------------------------------ the GS wrappers around an r5 single: full width, no own spacing */
.kz-r5 .gs-single-container:has(.kz-r5s),
.kz-r5 .gs-single-container:has(.kz-r5s) > .gs_project,
.kz-r5 .gs-single-container:has(.kz-r5s) > .gs_,
.kz-r5 .gs-single-container:has(.kz-r5s) .gs-team-single-content { max-width: none; width: auto; margin: 0; padding: 0; background: transparent; float: none; }
.kz-r5 .gs-single-container:has(.kz-r5s) { margin: 0 !important; padding: 0 !important; }   /* GS's own margin-bottom: 100px, and Additional CSS's margin-top: 140px !important on the consultant page */
.kz-r5 .gs-team-breadcumb:empty { display: none; }
/* the sector colours of the sector pages' footers; -ink is the text step (at least 6:1 on -soft) */
.kz-r5 .kz-sector--dt { --sector: #7030a0; --sector-ink: #5e2887; --sector-soft: #f4eefa; }
.kz-r5 .kz-sector--ai { --sector: #0070c0; --sector-ink: #00558f; --sector-soft: #e8f2fb; }
.kz-r5 .kz-sector--di { --sector: #1f7e80; --sector-ink: #135759; --sector-soft: #e6f3f3; }
.kz-r5 .kz-sector--cx { --sector: #701531; --sector-ink: #701531; --sector-soft: #f8ecf0; }
.kz-r5 .kz-sector--ix { --sector: #c10000; --sector-ink: #9a0000; --sector-soft: #fcecec; }
.kz-r5 .kz-sector--sleia { --sector: #a67c00; --sector-ink: #634a00; --sector-soft: #faf3df; }
.kz-r5 .kz-sector--rcb { --sector: #3f4c8f; --sector-ink: #364180; --sector-soft: #eef0f8; }
.kz-r5 .kz-sector--icv { --sector: #006c35; --sector-ink: #00552a; --sector-soft: #e5f3eb; }
.kz-r5 .kz-sector--sd { --sector: #6a3d25; --sector-ink: #6a3d25; --sector-soft: #f5eee9; }
.kz-r5 .kz-sector--es { --sector: #233d33; --sector-ink: #233d33; --sector-soft: #eaf0ed; }
.kz-r5 .kz-sector--fa { --sector: #1d1d1d; --sector-ink: #1d1d1d; --sector-soft: #efefef; }


.kz-r5 .kz-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.kz-r5 .kz-wrap { width: 100%; max-width: calc(var(--kz-wrap) + 2 * var(--kz-pad)); margin-inline: auto; padding-inline: var(--kz-pad); }
.kz-r5 .kz-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kz-r5 .kz-ico--fill { fill: currentColor; stroke: none; }
[dir="rtl"] .kz-r5 .kz-dir { transform: scaleX(-1); }
/* arrows and chevrons follow the reading direction */
.kz-r5 .kz-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .55; flex: none; }
/* "·" looks like the Arabic zero in Almarai */
/* ------------------------------------------------------------------ static copy of the site header (r4's area; not part of r5) */
/* the English header and footer draw in Arial today */
/* ------------------------------------------------------------------ the sticky back bar: the way back + the breadcrumb trail */
.kz-r5 .kz-ctx { position: sticky; top: var(--kz-header-h, 77px); z-index: 50; container-type: scroll-state; }
.kz-r5 .kz-ctx__bar { background: #fff; border-block-end: 1px solid var(--kz-line); transition: box-shadow .2s; }
.kz-r5 .kz-ctx__in { min-height: var(--kz-bar-h); display: flex; align-items: center; gap: 20px; }
.kz-r5 .kz-back { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; flex: none; padding-block: 0; padding-inline: 6px 8px; border-radius: 999px; background: var(--kz-ink); color: #fff;
  text-decoration: none; font-weight: 800; font-size: 15px; white-space: nowrap; transition: background .15s; }
.kz-r5 .kz-back:hover { background: #000; }
.kz-r5 .kz-back:hover .kz-back__txt { text-decoration: underline; text-underline-offset: 4px; }
.kz-r5 .kz-back__ico { width: 36px; height: 36px; border-radius: 50%; background: var(--kz-teal); color: #000; display: grid; place-items: center; flex: none; }
.kz-r5 .kz-back__ico .kz-ico { width: 18px; height: 18px; stroke-width: 2.2; }
.kz-r5 .kz-back__count { min-width: 34px; height: 26px; padding-inline: 9px; border-radius: 999px; background: rgba(255, 255, 255, .16); display: inline-grid; place-items: center; font-size: 13px; font-weight: 700; }
.kz-r5 .kz-trail { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; line-height: 1.4; color: var(--kz-muted);
  padding-inline-start: 20px; border-inline-start: 1px solid var(--kz-line); }
.kz-r5 .kz-trail li { display: flex; align-items: center; gap: 10px; min-width: 0; flex: none; }
.kz-r5 .kz-trail li:last-child { flex: 1 1 auto; }
.kz-r5 .kz-trail li + li::before { content: ""; width: 7px; height: 7px; flex: none; border-block-start: 2px solid #9a9ca3; border-inline-end: 2px solid #9a9ca3; transform: rotate(45deg); }
[dir="rtl"] .kz-r5 .kz-trail li + li::before { transform: rotate(-45deg); }
.kz-r5 .kz-trail a { color: var(--kz-muted); text-decoration: none; display: inline-flex; align-items: center; min-height: 48px; padding-inline: 4px; }
.kz-r5 .kz-trail a:hover { color: var(--kz-ink); text-decoration: underline; text-underline-offset: 3px; }
.kz-r5 .kz-trail [aria-current] span { color: var(--kz-ink); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52ch; display: block; }
/* progressive: where the browser knows the bar is stuck (Chrome 133+), it gets a soft shadow; elsewhere it stays flat */
@container scroll-state(stuck: top) {
  .kz-r5 .kz-ctx__bar { box-shadow: 0 10px 24px -14px rgba(16, 24, 40, .35); }
}
/* ------------------------------------------------------------------ page canvas */
.kz-r5 .kz-page { padding-block-end: 72px; }
.kz-r5 .kz-band { height: 196px; background: radial-gradient(120% 140% at 85% -20%, #2a2e86 0%, var(--kz-indigo) 55%, #0a0b2b 100%); position: relative; overflow: hidden; }
.kz-r5 .kz-band::after { content: ""; position: absolute; inset: 0; opacity: .14; background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 1.5px); background-size: 22px 22px; }
.kz-r5 .kz-band + .kz-wrap { margin-block-start: -156px; position: relative; z-index: 2; }
.kz-r5 .kz-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
/* ------------------------------------------------------------------ cards */
.kz-r5 .kz-card { background: var(--kz-card); border: 1px solid var(--kz-line); border-radius: var(--kz-radius); box-shadow: var(--kz-shadow); }
.kz-r5 .kz-sec { padding: 32px 36px; }
.kz-r5 .kz-sec__title { display: flex; align-items: center; gap: 12px; font-size: 22px; margin-block-end: 16px; }
.kz-r5 .kz-sec__ico { width: 44px; height: 44px; border-radius: 14px; background: var(--sector-soft); color: var(--sector-ink); display: grid; place-items: center; flex: none; }
.kz-r5 .kz-sec__ico .kz-ico { width: 22px; height: 22px; }
.kz-r5 .kz-sec__step { margin-inline-start: auto; font-size: 13px; font-weight: 700; color: var(--kz-muted); letter-spacing: .04em; }
.kz-r5 .kz-prose { font-size: 17px; color: var(--kz-text); overflow-wrap: anywhere; }
.kz-r5 .kz-measure { max-width: 76ch; }
.kz-r5 .kz-prose > :first-child { margin-block-start: 0; }
.kz-r5 .kz-prose > :last-child { margin-block-end: 0; }
.kz-r5 .kz-prose h2 { font-size: 24px; margin: 1.6em 0 .6em; }
.kz-r5 .kz-prose h3 { font-size: 20px; margin: 1.4em 0 .5em; }
.kz-r5 .kz-prose ul,
.kz-r5 .kz-prose ol { padding-inline-start: 1.4em; margin: 0 0 1em; }
.kz-r5 .kz-prose li { margin-block-end: .4em; }
.kz-r5 .kz-prose a { color: var(--kz-link); text-decoration: underline; text-underline-offset: 3px; }
.kz-r5 .kz-prose table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 1.2em; }
.kz-r5 .kz-prose th,
.kz-r5 .kz-prose td { border: 1px solid var(--kz-line); padding: 8px 12px; text-align: start; vertical-align: top; }
/* a Latin citation inside Arabic text stays on one line where the text column is wide; on phones it may wrap (a long one would push the page sideways) */
@media (min-width: 768px) { .kz-r5 .kz-prose bdi { white-space: nowrap; } }
.kz-r5 .kz-prose blockquote { margin: 0 0 1em; padding-inline-start: 20px; border-inline-start: 4px solid var(--sector); color: var(--kz-ink); }
.kz-r5 .kz-lead-quote { position: relative; font-size: 19px; line-height: 1.85; color: var(--kz-ink); padding-inline-start: 24px; border-inline-start: 4px solid var(--sector); margin: 0; }
.kz-r5 .kz-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.kz-r5 .kz-sec--soft { background: var(--sector-soft); border-color: transparent; box-shadow: none; }
.kz-r5 .kz-sec--soft .kz-sec__ico { background: #fff; }
/* chips */
.kz-r5 .kz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kz-r5 .kz-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; line-height: 1.3;
  background: #f0f0f3; color: #3a3d44; text-decoration: none; border: 1px solid transparent; }
.kz-r5 .kz-chip .kz-ico { width: 16px; height: 16px; }
.kz-r5 .kz-chip--type { background: #fff; border-color: #cfd0d6; color: var(--kz-ink); }
.kz-r5 .kz-chip--sector { background: var(--sector-soft); color: var(--sector-ink); }
.kz-r5 .kz-chip--sector::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sector); flex: none; }
/* a chip that is a link gets a 48 px target */
.kz-r5 .kz-chip--sm { min-height: 28px; font-size: 13px; padding: 3px 10px; }
/* buttons */
.kz-r5 .kz-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.kz-r5 .kz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding-inline: 22px; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 800;
  text-decoration: none; cursor: pointer; border: 2px solid transparent; line-height: 1.2; white-space: nowrap; }
.kz-r5 .kz-btn .kz-ico { width: 18px; height: 18px; stroke-width: 2.1; }
.kz-r5 .kz-btn--primary { background: var(--kz-teal); color: #000; }
.kz-r5 .kz-btn--primary:hover { background: #08b9c9; }
.kz-r5 .kz-btn--dark { background: var(--kz-ink); color: #fff; }
.kz-r5 .kz-btn--dark:hover { background: #000; }
.kz-r5 .kz-btn--ghost { background: #fff; color: var(--kz-ink); border-color: #cfd0d6; }
.kz-r5 .kz-btn--ghost:hover { border-color: var(--kz-ink); }
/* ------------------------------------------------------------------ hero card (case study, news, report) */
.kz-r5 .kz-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "body media" "actions media" ". media" "facts facts";
  grid-template-rows: auto auto 1fr auto; overflow: hidden; position: relative; }
.kz-r5 .kz-hero::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 6px; background: var(--sector); z-index: 1; }
.kz-r5 .kz-hero--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.kz-r5 .kz-hero__body { grid-area: body; padding: 40px 44px 0; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.kz-r5 .kz-hero__actions { grid-area: actions; padding: 24px 44px 36px; }
.kz-r5 .kz-hero__media { grid-area: media; margin: 0; position: relative; background: #e9e9ee; min-height: 340px; }
.kz-r5 .kz-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kz-r5 .kz-h1 { font-size: 40px; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }
.kz-r5 .kz-lead { font-size: 19px; color: #2f3136; margin: 0; }
.kz-r5 .kz-lead--sm { font-size: 17px; color: var(--kz-text); max-width: 62ch; }
.kz-r5 .kz-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--kz-muted); font-size: 15px; margin: 0; padding: 0; list-style: none; }
.kz-r5 .kz-meta li { display: inline-flex; align-items: center; gap: 8px; }
.kz-r5 .kz-meta .kz-ico { width: 18px; height: 18px; color: var(--kz-teal-ink); }
.kz-r5 .kz-byline { font-size: 16px; color: var(--kz-ink); font-weight: 700; margin: 0; }
/* key facts of a case study: right under the title on every width (today the details box comes after all the text on phones) */
.kz-r5 .kz-facts { grid-area: facts; margin: 0; display: flex; border-block-start: 1px solid var(--kz-line); background: #fbfbfc; }
.kz-r5 .kz-facts > div { flex: 1 1 0; min-width: 0; padding-block: 18px 20px; padding-inline: 56px 22px; position: relative; }
.kz-r5 .kz-facts > .kz-facts__wide { flex-grow: 1.7; }
.kz-r5 .kz-facts > div + div { border-inline-start: 1px solid var(--kz-line); }
.kz-r5 .kz-facts dt .kz-ico { position: absolute; inset-inline-start: 22px; inset-block-start: 21px; width: 22px; height: 22px; color: var(--kz-teal-ink); }
.kz-r5 .kz-facts dt { font-size: 13px; color: var(--kz-muted); font-weight: 700; }
.kz-r5 .kz-facts dd { margin: 0; font-size: 16px; color: var(--kz-ink); font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.kz-r5 .kz-facts dd a { color: var(--kz-link); display: inline-flex; align-items: center; gap: 6px; min-height: 48px; }
.kz-r5 .kz-facts dd a .kz-ico { width: 16px; height: 16px; margin: 0; color: currentColor; }
/* report: no photo (the covers are generic wave graphics); a small PDF cover with the title stands at the end side on desktop */
.kz-r5 .kz-hero--report { grid-template-columns: minmax(0, 1fr) 292px; grid-template-areas: "body cover" "actions cover" ". cover"; grid-template-rows: auto auto 1fr; }
.kz-r5 .kz-cover { grid-area: cover; align-self: start; margin: 36px; margin-inline-start: 0; position: relative; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: #0b1230;
  box-shadow: 0 24px 44px -22px rgba(9, 14, 40, .6), 0 2px 6px rgba(9, 14, 40, .2); transform: rotate(-1.5deg); }
[dir="rtl"] .kz-r5 .kz-cover { transform: rotate(1.5deg); }
.kz-r5 .kz-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kz-r5 .kz-cover figcaption { position: absolute; inset: 0; padding: 24px 22px; display: flex; flex-direction: column; gap: 12px; color: #fff; background: linear-gradient(180deg, rgba(4, 7, 24, .55), rgba(4, 7, 24, .2) 60%, rgba(4, 7, 24, .55)); }
.kz-r5 .kz-cover__eyebrow { font-size: 12px; font-weight: 800; color: var(--kz-teal); letter-spacing: .06em; }
.kz-r5 .kz-cover__title { font-size: 21px; font-weight: 800; line-height: 1.45; }
.kz-r5 .kz-cover__badge { margin-block-start: auto; align-self: flex-start; background: #fff; color: #000; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 6px; letter-spacing: .06em; }
/* ------------------------------------------------------------------ profile card (consultant): the photo at the start, the name beside it */
.kz-r5 .kz-profile { display: grid; grid-template-columns: 280px minmax(0, 1fr); column-gap: 40px; row-gap: 14px; padding: 40px 44px; position: relative; overflow: hidden;
  grid-template-areas: "photo chips" "photo name" "photo role" "photo lead" "photo meta" "photo actions" "photo ."; grid-template-rows: repeat(6, auto) 1fr; align-items: start; }
.kz-r5 .kz-profile::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 6px; background: var(--sector); }
.kz-r5 .kz-profile__photo { grid-area: photo; margin: 0; border-radius: 18px; overflow: hidden; background: #f0f0f2; aspect-ratio: 1 / 1; }
.kz-r5 .kz-profile__photo img { width: 100%; height: 100%; object-fit: cover; }
.kz-r5 .kz-profile__chips { grid-area: chips; }
.kz-r5 .kz-profile__name { grid-area: name; }
.kz-r5 .kz-profile__role { grid-area: role; font-size: 20px; color: #2f3136; margin: 0; font-weight: 700; }
.kz-r5 .kz-profile__lead { grid-area: lead; }
.kz-r5 .kz-profile__meta { grid-area: meta; }
.kz-r5 .kz-profile__actions { grid-area: actions; padding-block-start: 4px; }
/* ------------------------------------------------------------------ main + aside */
.kz-r5 .kz-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; margin-block-start: 24px; }
.kz-r5 .kz-aside { position: sticky; top: calc(var(--kz-header-h, 77px) + var(--kz-bar-h) + 24px); display: grid; gap: 24px; }
.kz-r5 .kz-cta { padding: 28px; background: var(--kz-ink); color: #fff; border-color: transparent; position: relative; overflow: hidden; }
.kz-r5 .kz-cta::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 6px; background: var(--sector); }
.kz-r5 .kz-cta > * { position: relative; }
.kz-r5 .kz-cta h2 { color: #fff; font-size: 21px; margin-block-end: 8px; }
.kz-r5 .kz-cta p { color: rgba(255, 255, 255, .86); font-size: 16px; margin-block-end: 18px; }
.kz-r5 .kz-cta .kz-btn { width: 100%; }
.kz-r5 .kz-cta__link { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-block-start: 6px; color: #fff; font-weight: 700; font-size: 15px; text-underline-offset: 4px; }
.kz-r5 .kz-mini { padding: 24px 26px; }
.kz-r5 .kz-mini h2 { font-size: 17px; margin-block-end: 12px; }
.kz-r5 .kz-mini__group + .kz-mini__group { margin-block-start: 16px; }
.kz-r5 .kz-mini__label { font-size: 13px; color: var(--kz-muted); font-weight: 700; margin-block-end: 6px; }
.kz-r5 .kz-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.kz-r5 .kz-toc li { counter-increment: toc; }
.kz-r5 .kz-toc a { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: baseline; min-height: 44px; padding: 10px 10px; border-radius: 10px; color: var(--kz-text); text-decoration: none; font-size: 15px; line-height: 1.5; }
.kz-r5 .kz-toc a::before { content: counter(toc, decimal-leading-zero); font-size: 12px; font-weight: 800; color: var(--kz-teal-ink); }
.kz-r5 .kz-toc a:hover { background: var(--kz-canvas); color: var(--kz-ink); }
.kz-r5 .kz-toc a.active,
.kz-r5 .kz-toc a[aria-current] { background: var(--kz-teal-soft); color: var(--kz-ink); font-weight: 700; }
.kz-r5 .kz-toc-m { display: none; }
/* client quote (case study) */
.kz-r5 .kz-quote { margin: 0; padding: 32px 36px; display: grid; grid-template-columns: 96px 1fr; gap: 24px; align-items: start; }
.kz-r5 .kz-quote__logo { width: 96px; height: 96px; border-radius: 16px; border: 1px solid var(--kz-line); display: grid; place-items: center; padding: 10px; background: #fff; }
.kz-r5 .kz-quote__logo img { width: 74px; height: 74px; object-fit: contain; object-position: center !important; }
.kz-r5 .kz-quote blockquote { margin: 0; font-size: 18px; color: var(--kz-ink); line-height: 1.85; }
.kz-r5 .kz-quote figcaption { margin-block-start: 14px; font-size: 15px; color: var(--kz-muted); }
.kz-r5 .kz-quote figcaption b { color: var(--kz-ink); display: block; font-size: 16px; }
.kz-r5 .kz-quote__eyebrow { font-size: 13px; font-weight: 800; color: var(--kz-teal-ink); letter-spacing: .04em; margin-block-end: 8px; }
/* ------------------------------------------------------------------ gallery: radio buttons + CSS, opens inline, no script */
.kz-r5 .kz-gal { position: relative; }
.kz-r5 .kz-gal__radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.kz-r5 .kz-gal__stage { position: relative; border-radius: 16px; overflow: hidden; background: #e9e9ee; aspect-ratio: 16 / 9; }
.kz-r5 .kz-gal__item { display: none; margin: 0; position: absolute; inset: 0; }
.kz-r5 .kz-gal__item img { width: 100%; height: 100%; object-fit: cover; }
.kz-r5 .kz-gal__item figcaption { position: absolute; inset-block-end: 12px; inset-inline-end: 12px; background: rgba(0, 0, 0, .72); color: #fff; font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.kz-r5 .kz-gal__thumbs { display: flex; gap: 10px; margin-block-start: 12px; overflow-x: auto; padding: 4px; }
.kz-r5 .kz-gal__thumb { position: relative; width: 96px; height: 64px; flex: none; border-radius: 10px; overflow: hidden; cursor: pointer; border: 2px solid transparent; opacity: .72; transition: opacity .15s; }
.kz-r5 .kz-gal__thumb img { width: 100%; height: 100%; object-fit: cover; }
.kz-r5 .kz-gal__thumb:hover { opacity: 1; }
.kz-r5 .kz-gal__radio:nth-of-type(1):checked ~ .kz-gal__stage .kz-gal__item:nth-child(1),
.kz-r5 .kz-gal__radio:nth-of-type(2):checked ~ .kz-gal__stage .kz-gal__item:nth-child(2),
.kz-r5 .kz-gal__radio:nth-of-type(3):checked ~ .kz-gal__stage .kz-gal__item:nth-child(3),
.kz-r5 .kz-gal__radio:nth-of-type(4):checked ~ .kz-gal__stage .kz-gal__item:nth-child(4),
.kz-r5 .kz-gal__radio:nth-of-type(5):checked ~ .kz-gal__stage .kz-gal__item:nth-child(5),
.kz-r5 .kz-gal__radio:nth-of-type(6):checked ~ .kz-gal__stage .kz-gal__item:nth-child(6),
.kz-r5 .kz-gal__radio:nth-of-type(7):checked ~ .kz-gal__stage .kz-gal__item:nth-child(7),
.kz-r5 .kz-gal__radio:nth-of-type(8):checked ~ .kz-gal__stage .kz-gal__item:nth-child(8),
.kz-r5 .kz-gal__radio:nth-of-type(9):checked ~ .kz-gal__stage .kz-gal__item:nth-child(9),
.kz-r5 .kz-gal__radio:nth-of-type(10):checked ~ .kz-gal__stage .kz-gal__item:nth-child(10) { display: block; }
.kz-r5 .kz-gal__radio:nth-of-type(1):checked ~ .kz-gal__thumbs .kz-gal__thumb:nth-child(1),
.kz-r5 .kz-gal__radio:nth-of-type(2):checked ~ .kz-gal__thumbs .kz-gal__thumb:nth-child(2),
.kz-r5 .kz-gal__radio:nth-of-type(3):checked ~ .kz-gal__thumbs .kz-gal__thumb:nth-child(3),
.kz-r5 .kz-gal__radio:nth-of-type(4):checked ~ .kz-gal__thumbs .kz-gal__thumb:nth-child(4),
.kz-r5 .kz-gal__radio:nth-of-type(5):checked ~ .kz-gal__thumbs .kz-gal__thumb:nth-child(5),
.kz-r5 .kz-gal__radio:nth-of-type(6):checked ~ .kz-gal__thumbs .kz-gal__thumb:nth-child(6),
.kz-r5 .kz-gal__radio:nth-of-type(7):checked ~ .kz-gal__thumbs .kz-gal__thumb:nth-child(7),
.kz-r5 .kz-gal__radio:nth-of-type(8):checked ~ .kz-gal__thumbs .kz-gal__thumb:nth-child(8),
.kz-r5 .kz-gal__radio:nth-of-type(9):checked ~ .kz-gal__thumbs .kz-gal__thumb:nth-child(9),
.kz-r5 .kz-gal__radio:nth-of-type(10):checked ~ .kz-gal__thumbs .kz-gal__thumb:nth-child(10) { border-color: var(--kz-ink); opacity: 1; }
.kz-r5 .kz-gal__radio:nth-of-type(1):focus-visible ~ .kz-gal__thumbs .kz-gal__thumb:nth-child(1),
.kz-r5 .kz-gal__radio:nth-of-type(2):focus-visible ~ .kz-gal__thumbs .kz-gal__thumb:nth-child(2),
.kz-r5 .kz-gal__radio:nth-of-type(3):focus-visible ~ .kz-gal__thumbs .kz-gal__thumb:nth-child(3),
.kz-r5 .kz-gal__radio:nth-of-type(4):focus-visible ~ .kz-gal__thumbs .kz-gal__thumb:nth-child(4),
.kz-r5 .kz-gal__radio:nth-of-type(5):focus-visible ~ .kz-gal__thumbs .kz-gal__thumb:nth-child(5),
.kz-r5 .kz-gal__radio:nth-of-type(6):focus-visible ~ .kz-gal__thumbs .kz-gal__thumb:nth-child(6),
.kz-r5 .kz-gal__radio:nth-of-type(7):focus-visible ~ .kz-gal__thumbs .kz-gal__thumb:nth-child(7),
.kz-r5 .kz-gal__radio:nth-of-type(8):focus-visible ~ .kz-gal__thumbs .kz-gal__thumb:nth-child(8),
.kz-r5 .kz-gal__radio:nth-of-type(9):focus-visible ~ .kz-gal__thumbs .kz-gal__thumb:nth-child(9),
.kz-r5 .kz-gal__radio:nth-of-type(10):focus-visible ~ .kz-gal__thumbs .kz-gal__thumb:nth-child(10) { outline: 3px solid var(--kz-purple); outline-offset: 2px; }
/* ------------------------------------------------------------------ related items, the cards of the list pages */
.kz-r5 .kz-related { margin-block-start: 56px; }
.kz-r5 .kz-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-block-end: 20px; flex-wrap: wrap; }
.kz-r5 .kz-sechead h2 { font-size: 26px; }
.kz-r5 .kz-eyebrow { display: block; font-size: 13px; font-weight: 800; color: var(--kz-teal-ink); letter-spacing: .03em; margin-block-end: 6px; }
.kz-r5 .kz-more { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding-inline: 4px; color: var(--kz-ink); font-weight: 800; font-size: 15px; text-decoration: underline; text-decoration-color: var(--kz-teal); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.kz-r5 .kz-more .kz-ico { width: 18px; height: 18px; }
.kz-r5 .kz-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.kz-r5 .kz-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kz-r5 .kz-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kz-r5 .kz-grid > li { display: flex; min-width: 0; }
.kz-r5 .kz-item { position: relative; display: flex; flex-direction: column; width: 100%; background: #fff; border: 1px solid var(--kz-line); border-radius: var(--kz-radius); overflow: hidden; box-shadow: var(--kz-shadow); transition: box-shadow .18s, transform .18s; }
.kz-r5 .kz-item:hover { box-shadow: var(--kz-shadow-hover); transform: translateY(-2px); }
.kz-r5 .kz-item:has(.kz-stretch:focus-visible) { outline: 3px solid var(--kz-purple); outline-offset: 3px; }
.kz-r5 .kz-stretch { color: inherit; text-decoration: none; }
.kz-r5 .kz-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.kz-r5 .kz-stretch:focus-visible { outline: none; }
.kz-r5 .kz-item__media { aspect-ratio: 16 / 10; background: #e9e9ee; overflow: hidden; }
.kz-r5 .kz-item__media img { width: 100%; height: 100%; object-fit: cover; }
.kz-r5 .kz-item__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.kz-r5 .kz-item__meta { font-size: 14px; color: var(--kz-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; }
.kz-r5 .kz-item__meta time,
.kz-r5 .kz-nw { white-space: nowrap; }
.kz-r5 .kz-item__meta .kz-ico { width: 16px; height: 16px; color: var(--kz-teal-ink); }
.kz-r5 .kz-item__title { text-wrap: pretty; font-size: 18px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kz-r5 .kz-item__text { font-size: 15px; color: var(--kz-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kz-r5 .kz-item__foot { margin-block-start: auto; padding-block-start: 4px; display: flex; flex-wrap: wrap; gap: 6px; }
.kz-r5 .kz-item__foot--top { margin: 0; padding: 0; }
.kz-r5 .kz-item__foot a,
.kz-r5 .kz-item__ext { position: relative; z-index: 2; }
/* person card */
.kz-r5 .kz-person { flex-direction: row; align-items: center; gap: 16px; padding: 18px; }
.kz-r5 .kz-person__photo { width: 84px; height: 84px; border-radius: 16px; overflow: hidden; flex: none; background: #f0f0f2; }
.kz-r5 .kz-person__photo img { width: 100%; height: 100%; object-fit: cover; }
.kz-r5 .kz-person__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kz-r5 .kz-person__name { font-size: 17px; line-height: 1.45; }
.kz-r5 .kz-person__role { font-size: 14px; color: var(--kz-muted); margin: 0; line-height: 1.5; }
.kz-r5 .kz-person .kz-chip--sm { align-self: flex-start; margin-block-start: 4px; }
/* client card */
.kz-r5 .kz-client__logo { height: 176px; display: grid; place-items: center; padding: 16px; border-block-end: 1px solid var(--kz-line); background: #fff; }
.kz-r5 .kz-client__logo img { width: 144px; height: 144px; object-fit: contain; }
/* the logo files are square art boards */
.kz-r5 .kz-client__links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-block-start: auto; }
.kz-r5 .kz-client__links a { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; font-weight: 700; font-size: 15px; color: var(--kz-link); text-underline-offset: 3px; }
.kz-r5 .kz-client__links .kz-ico { width: 16px; height: 16px; }
.kz-r5 .kz-item__text--3 { -webkit-line-clamp: 4; }
/* ------------------------------------------------------------------ previous / all / next */
.kz-r5 .kz-pn { margin-block-start: 56px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; }
.kz-r5 .kz-pn__item { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center; padding: 16px; min-height: 104px; background: #fff; border: 1px solid var(--kz-line); border-radius: var(--kz-radius); box-shadow: var(--kz-shadow); text-decoration: none; color: var(--kz-ink); transition: box-shadow .18s; }
.kz-r5 .kz-pn__item:hover { box-shadow: var(--kz-shadow-hover); }
.kz-r5 .kz-pn__item--next { grid-template-columns: 1fr 72px; text-align: end; }
.kz-r5 .kz-pn__item--next .kz-pn__img { order: 2; }
.kz-r5 .kz-pn__img { width: 72px; height: 72px; border-radius: 14px; overflow: hidden; background: #eee; }
.kz-r5 .kz-pn__img img { width: 100%; height: 100%; object-fit: cover; }
.kz-r5 .kz-pn__dir { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--kz-teal-ink); margin-block-end: 4px; }
.kz-r5 .kz-pn__item--next .kz-pn__dir { justify-content: flex-end; }
.kz-r5 .kz-pn__dir .kz-ico { width: 16px; height: 16px; stroke-width: 2.2; }
.kz-r5 .kz-pn__title { font-size: 16px; font-weight: 700; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kz-r5 .kz-pn__all { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 140px; padding: 12px 18px; border-radius: var(--kz-radius); background: var(--kz-ink); color: #fff; text-decoration: none; font-weight: 800; font-size: 14px; text-align: center; line-height: 1.35; }
.kz-r5 .kz-pn__all:hover { background: #000; }
.kz-r5 .kz-pn__all .kz-ico { width: 26px; height: 26px; color: var(--kz-teal); }
.kz-r5 .kz-pn__all small { font-weight: 400; color: rgba(255, 255, 255, .82); font-size: 12px; }
/* ------------------------------------------------------------------ static copy of the site footer (unchanged) */
/* ------------------------------------------------------------------ list pages (the back links' target) */
.kz-r5 .kz-lst { padding-block: 8px 72px; }
.kz-r5 .kz-panel.kz-lst { padding-block: 32px 40px; }
.kz-r5 .kz-lstbar { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 16px; margin-block-end: 18px; }
.kz-r5 .kz-lstbar--2 { grid-template-columns: 1fr 1.4fr; }
.kz-r5 .kz-lstmeta { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-block-end: 22px; color: var(--kz-muted); font-size: 15px; flex-wrap: wrap; }
.kz-r5 .kz-lstmeta b,
.kz-r5 .kz-lstmeta h2 { color: var(--kz-ink); font-size: 16px; font-weight: 800; margin: 0; }
.kz-r5 .kz-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.kz-r5 .kz-all-anchor { display: block; width: 0; height: 0; flex: none; }
.kz-r5 .kz-showall { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-block-start: 36px; color: var(--kz-muted); font-size: 15px; }
/* "You were here": the card the visitor came back from */
.kz-r5 .kz-lst .kz-grid > li:target > .kz-item { outline: 3px solid var(--kz-purple); outline-offset: 4px; box-shadow: 0 0 0 10px rgba(75, 21, 117, .12), var(--kz-shadow-hover); }
.kz-r5 .kz-lst .kz-grid > li { position: relative; }
/* the badge sits on the card's top edge, so it never covers the title, the photo or the chips */
.kz-r5 .kz-lst .kz-grid > li:target::before { content: attr(data-here); position: absolute; z-index: 4; inset-block-start: -14px; inset-inline-end: 20px; background: var(--kz-purple); color: #fff;
  font-size: 13px; font-weight: 800; line-height: 1.2; padding: 6px 12px; border-radius: 999px; box-shadow: 0 0 0 3px var(--kz-canvas), 0 6px 16px -6px rgba(0, 0, 0, .45); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .kz-r5 .kz-lst .kz-grid > li:target > .kz-item { animation: kz-here 1.8s ease-out 1; }
}
@keyframes kz-here { 0% { box-shadow: 0 0 0 0 rgba(75, 21, 117, .5), var(--kz-shadow-hover); } 100% { box-shadow: 0 0 0 10px rgba(75, 21, 117, .12), var(--kz-shadow-hover); } }
.kz-r5 .kz-panel { padding: 32px 36px 40px; }
.kz-r5 .kz-panel__sub { margin-block-start: -8px; color: var(--kz-muted); }
.kz-r5 .kz-tsec { padding-block: 8px 72px; }
/* ------------------------------------------------------------------ tablet */
@media (max-width: 1024px) {
  .kz-r5 .kz-layout { grid-template-columns: minmax(0, 1fr); }
  .kz-r5 .kz-aside { position: static; grid-template-columns: 1fr 1fr; }
  .kz-r5 .kz-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kz-r5 .kz-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kz-r5 .kz-facts > div { border-block-start: 1px solid var(--kz-line); }
  .kz-r5 .kz-facts > div + div { border-inline-start: 0; }
  .kz-r5 .kz-facts > div:first-child { border-block-start: 0; grid-column: 1 / -1; }
  .kz-r5 .kz-facts > div:nth-child(odd):not(:first-child) { border-inline-start: 1px solid var(--kz-line); }
  .kz-r5 .kz-hero--report { grid-template-columns: minmax(0, 1fr) 232px; }
  .kz-r5 .kz-cover__title { font-size: 17px; }
}
/* ------------------------------------------------------------------ phone */
@media (max-width: 767px) {
  /* the bar keeps only the way back on phones; it stays under the header while scrolling */
  .kz-r5 .kz-trail { display: none; }
  .kz-r5 .kz-ctx__in { gap: 12px; }
  .kz-r5 .kz-back { font-size: 14px; gap: 8px; }
  .kz-r5 .kz-band { height: 112px; }
  .kz-r5 .kz-band + .kz-wrap { margin-block-start: -88px; }
  /* title first: chips, H1 and lead open the page, then the photo, the key facts and the actions */
  .kz-r5 .kz-hero,
  .kz-r5 .kz-hero--even { grid-template-columns: minmax(0, 1fr); grid-template-areas: "body" "media" "facts" "actions"; grid-template-rows: auto; }
  .kz-r5 .kz-hero__body { padding: 22px 20px 20px; gap: 14px; }
  .kz-r5 .kz-hero__media { min-height: 0; aspect-ratio: 16 / 9; }
  .kz-r5 .kz-hero__actions { padding: 16px 20px 20px; flex-wrap: nowrap; gap: 10px; }
  .kz-r5 .kz-hero__actions .kz-btn--primary { flex: 1 1 auto; min-width: 0; padding-inline: 16px; }
  .kz-r5 .kz-hero__actions .kz-btn--primary + .kz-share { flex: none; }
  .kz-r5 .kz-hero__actions .kz-btn--primary + .kz-share .kz-btn--share { width: 48px; padding: 0; }
  .kz-r5 .kz-hero__actions .kz-btn--primary + .kz-share .kz-btn__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .kz-r5 .kz-hero--report { grid-template-columns: minmax(0, 1fr); grid-template-areas: "body" "actions"; }
  .kz-r5 .kz-hero--report .kz-hero__actions { border-block-start: 0; padding-block-start: 4px; }
  .kz-r5 .kz-cover { display: none; }
  .kz-r5 .kz-h1 { font-size: 27px; }
  .kz-r5 .kz-lead { font-size: 17px; }
  .kz-r5 .kz-facts > div { padding: 14px 16px 16px; }
  .kz-r5 .kz-facts dt .kz-ico { position: static; display: block; margin-block-end: 4px; }
  .kz-r5 .kz-facts + .kz-hero__actions,
  .kz-r5 .kz-hero__media + .kz-hero__actions { border-block-start: 1px solid var(--kz-line); }
  /* profile: the photo beside the name */
  .kz-r5 .kz-profile { grid-template-columns: 88px minmax(0, 1fr); column-gap: 14px; row-gap: 10px; padding: 22px 20px;
    grid-template-areas: "chips chips" "photo name" "photo role" "lead lead" "meta meta" "actions actions"; grid-template-rows: auto; }
  .kz-r5 .kz-profile__photo { width: 88px; border-radius: 16px; align-self: start; }
  .kz-r5 .kz-profile__name { align-self: end; font-size: 25px; }
  .kz-r5 .kz-profile__role { font-size: 16px; align-self: start; }
  .kz-r5 .kz-profile__chips { margin-block-end: 4px; }
  .kz-r5 .kz-profile__actions .kz-btn--primary { flex: 1 1 100%; }
  .kz-r5 .kz-profile__actions .kz-btn--ghost { flex: 1 1 0; }
  .kz-r5 .kz-sec { padding: 22px 20px; }
  .kz-r5 .kz-sec__title { font-size: 19px; }
  .kz-r5 .kz-lead-quote { font-size: 17px; padding-inline-start: 16px; }
  .kz-r5 .kz-duo { grid-template-columns: 1fr; gap: 16px; }
  .kz-r5 .kz-stack { gap: 16px; }
  .kz-r5 .kz-layout { gap: 16px; margin-block-start: 16px; }
  .kz-r5 .kz-aside { grid-template-columns: 1fr; gap: 16px; }
  .kz-r5 .kz-quote { grid-template-columns: 1fr; padding: 22px 20px; gap: 14px; }
  .kz-r5 .kz-quote__logo { width: 72px; height: 72px; }
  .kz-r5 .kz-related { margin-block-start: 40px; }
  .kz-r5 .kz-sechead h2 { font-size: 21px; }
  .kz-r5 .kz-grid { gap: 12px; }
  .kz-r5 .kz-grid--3,
  .kz-r5 .kz-grid--4 { grid-template-columns: minmax(0, 1fr); }
  /* the list card turns into a compact row on phones: the list pages get 4 to 5 times shorter */
  .kz-r5 .kz-grid--rows .kz-item { display: grid; grid-template-columns: 104px 1fr; align-items: stretch; }
  .kz-r5 .kz-grid--rows .kz-item__media { aspect-ratio: auto; height: 100%; min-height: 120px; }
  .kz-r5 .kz-grid--rows .kz-item__body { padding: 14px 16px; gap: 6px; }
  .kz-r5 .kz-grid--rows .kz-item__title { font-size: 16px; -webkit-line-clamp: 3; }
  .kz-r5 .kz-grid--rows .kz-item__text { display: none; }
  .kz-r5 .kz-grid--rows .kz-item__foot .kz-chip--sm:nth-child(n+2) { display: none; }
  .kz-r5 .kz-grid--clients .kz-item { grid-template-columns: 96px 1fr; }
  .kz-r5 .kz-grid--clients .kz-client__logo { height: auto; border-block-end: 0; border-inline-end: 1px solid var(--kz-line); padding: 10px; align-content: start; }
  .kz-r5 .kz-grid--clients .kz-client__logo img { width: 76px; height: 76px; }
  .kz-r5 .kz-grid--clients .kz-item__text--3 { display: -webkit-box; -webkit-line-clamp: 3; }
  .kz-r5 .kz-grid--clients .kz-item__foot { display: none; }
  .kz-r5 .kz-person { padding: 14px; gap: 14px; }
  .kz-r5 .kz-person__photo { width: 72px; height: 72px; }
  .kz-r5 .kz-client__logo { height: 148px; }
  .kz-r5 .kz-client__logo img { width: 120px; height: 120px; }
  .kz-r5 .kz-chip { font-size: 13px; padding-inline: 12px; }
  .kz-r5 .kz-lst .kz-grid > li:target::before { inset-inline-end: 14px; font-size: 12px; padding: 5px 10px; }
  .kz-r5 .kz-pn { grid-template-columns: 1fr 1fr; gap: 12px; margin-block-start: 40px; }
  .kz-r5 .kz-pn__item,
  .kz-r5 .kz-pn__item--next { grid-template-columns: 1fr; padding: 14px; text-align: start; min-height: 0; }
  .kz-r5 .kz-pn__item--next { text-align: end; }
  .kz-r5 .kz-pn__img { display: none; }
  .kz-r5 .kz-pn__all { grid-column: 1 / -1; grid-row: 2; flex-direction: row; min-height: 52px; }
  .kz-r5 .kz-pn__all .kz-ico { width: 20px; height: 20px; }
  .kz-r5 .kz-toc-d { display: none; }
  .kz-r5 .kz-toc-m { display: block; }
  .kz-r5 .kz-toc-m summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 6px 20px; font-weight: 800; color: var(--kz-ink); }
  .kz-r5 .kz-toc-m summary::-webkit-details-marker { display: none; }
  .kz-r5 .kz-toc-m .kz-toc { padding: 0 12px 12px; }
  .kz-r5 .kz-lstbar,
  .kz-r5 .kz-lstbar--2 { grid-template-columns: 1fr; gap: 10px; }
  .kz-r5 .kz-panel,
  .kz-r5 .kz-panel.kz-lst { padding: 22px 16px 28px; }
}
@media (max-width: 359px) {
  .kz-r5 .kz-back__count { display: none; }
}
/* short viewports (landscape phones, large zoom): nothing sticks under the header, so the reading area stays usable */
@media (max-height: 560px) {
  .kz-r5 .kz-ctx,
  .kz-r5 .kz-aside { position: static; }
}

/* ------------------------------------------------------------------ dropped from the prototype's selectors above, kept here */
html[lang="ar"] .kz-r5 .kz-lead-quote { line-height: 2; }
html[lang="ar"] .kz-r5 .kz-h1 { line-height: 1.45; letter-spacing: 0; }
html[lang="en"] .kz-r5 .kz-cover__eyebrow { text-transform: uppercase; letter-spacing: .1em; }
html[lang="en"] .kz-r5 .kz-quote__eyebrow,
html[lang="en"] .kz-r5 .kz-eyebrow { text-transform: uppercase; letter-spacing: .08em; }
.kz-r5 a.kz-chip { min-height: 48px; padding-inline: 16px; }          /* a chip that is a link gets a 48 px target */
.kz-r5 a.kz-chip:hover { text-decoration: underline; text-underline-offset: 3px; }
.kz-r5 .kz-btn, .kz-r5 .kz-back, .kz-r5 .kz-more, .kz-r5 .kz-pn__item, .kz-r5 .kz-pn__all, .kz-r5 .kz-chip, .kz-r5 .kz-stretch { text-decoration: none; }
.kz-r5 .kz-btn--primary, .kz-r5 .kz-btn--primary:hover { color: #000; }
.kz-r5 .kz-btn--dark, .kz-r5 .kz-btn--dark:hover, .kz-r5 .kz-back, .kz-r5 .kz-back:hover, .kz-r5 .kz-pn__all, .kz-r5 .kz-pn__all:hover, .kz-r5 .kz-cta__link { color: #fff; }
.kz-r5 .kz-btn--ghost, .kz-r5 .kz-more, .kz-r5 .kz-pn__item { color: var(--kz-ink); }
.kz-r5 .kz-chip--sector { color: var(--sector-ink); }

/* ------------------------------------------------------------------ share popover (share.js toggles .is-open and aria-expanded) */
.kz-r5 .kz-share { position: relative; display: inline-flex; }
.kz-r5 .kz-share__pop { display: none; position: absolute; z-index: 30; inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-width: 220px; padding: 8px;
  background: #fff; border: 1px solid var(--kz-line); border-radius: 16px; box-shadow: var(--kz-shadow-hover); }
.kz-r5 .kz-share.is-open .kz-share__pop { display: block; }
.kz-r5 .kz-share__pop ul { list-style: none; margin: 0; padding: 0; }
.kz-r5 .kz-share__pop a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding-inline: 12px; border-radius: 10px; color: var(--kz-ink); text-decoration: none; font-size: 15px; font-weight: 700; }
.kz-r5 .kz-share__pop a:hover { background: var(--kz-canvas); }
.kz-r5 .kz-share__pop .kz-ico { width: 18px; height: 18px; color: var(--kz-teal-ink); }

/* ------------------------------------------------------------------ FAQ card (the case study's trailing <details>) */
.kz-r5 .kz-faq details { margin: 0; }
.kz-r5 .kz-faq summary { display: flex; align-items: center; min-height: 48px; cursor: pointer; font-size: 19px; font-weight: 800; color: var(--kz-ink); }
.kz-r5 .kz-faq summary strong { font-weight: 800; }
.kz-r5 .kz-faq .rank-math-question { font-size: 18px; margin: 1.2em 0 .4em; }
.kz-r5 .kz-faq .rank-math-answer { margin: 0 0 .8em; }

/* ------------------------------------------------------------------ the r5 lists: first 12 (9) + "Show all", filters, tabs */
.kz-r5 .kz-lst { width: 100%; max-width: none; flex: 1 1 100%; margin: 0; padding-block: 8px 24px; }
.kz-r5 .kz-panel.kz-lst { padding: 32px 36px 40px; margin-block: 32px 8px; }
.kz-r5 .kz-lst .kz-grid { list-style: none; margin: 0; padding: 0; }
.kz-r5 .kz-lst .kz-grid > li { margin: 0; padding: 0; }
.kz-r5 .kz-lst .kz-grid > li::marker { content: none; }
/* the cap: every item stays in the HTML; "Show all" (#kz-all), a back link that targets a later card, a set filter or a chosen report type
   lifts it; browsers without :has() show every card (today's behaviour) */
.kz-r5 .kz-lst:not(:has(:target)):not(.kz-filtering):not(:has(.kz-tabs input:checked:not([value="all"]))) .kz-cap12 > li:nth-child(n+13),
.kz-r5 .kz-lst:not(:has(:target)):not(.kz-filtering):not(:has(.kz-tabs input:checked:not([value="all"]))) .kz-cap9 > li:nth-child(n+10) { display: none; }
.kz-r5 .kz-lst:has(:target) :is(.kz-showall, .kz-shown),
.kz-r5 .kz-lst.kz-filtering :is(.kz-showall, .kz-shown),
.kz-r5 .kz-lst:has(.kz-tabs input:checked:not([value="all"])) :is(.kz-showall, .kz-shown) { display: none; }
.kz-r5 .kz-showall .kz-btn { color: #fff; }
/* report-type tabs: radio buttons styled as pills (the input stays focusable for keyboards and screen readers) */
.kz-r5 .kz-tab { position: relative; display: inline-flex; align-items: center; min-height: 48px; padding-inline: 18px; border-radius: 999px; background: #fff; border: 1px solid #cfd0d6;
  color: var(--kz-ink); font-weight: 700; font-size: 15px; cursor: pointer; line-height: 1.3; }
.kz-r5 .kz-tab input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.kz-r5 .kz-tab:has(input:checked) { background: var(--kz-ink); border-color: var(--kz-ink); color: #fff; }
.kz-r5 .kz-tab:has(input:focus-visible) { outline: 3px solid var(--kz-purple); outline-offset: 3px; }
.kz-r5 .kz-lst:has(#kz-rt-1:checked) .kz-grid > li:not(.kz-rt-1),
.kz-r5 .kz-lst:has(#kz-rt-2:checked) .kz-grid > li:not(.kz-rt-2),
.kz-r5 .kz-lst:has(#kz-rt-3:checked) .kz-grid > li:not(.kz-rt-3),
.kz-r5 .kz-lst:has(#kz-rt-4:checked) .kz-grid > li:not(.kz-rt-4),
.kz-r5 .kz-lst:has(#kz-rt-5:checked) .kz-grid > li:not(.kz-rt-5),
.kz-r5 .kz-lst:has(#kz-rt-6:checked) .kz-grid > li:not(.kz-rt-6),
.kz-r5 .kz-lst:has(#kz-rt-7:checked) .kz-grid > li:not(.kz-rt-7),
.kz-r5 .kz-lst:has(#kz-rt-8:checked) .kz-grid > li:not(.kz-rt-8) { display: none; }

/* ------------------------------------------------------------------ phone and short viewports, reduced motion, print */
@media (max-width: 767px) {
  .kz-r5 { --kz-pad: 16px; --kz-bar-h: 56px; }
  .kz-r5 :where(.kz-r5s, .kz-lst) { font-size: 16px; }
  .kz-r5 a.kz-chip { padding-inline: 12px; }
  .kz-r5 .kz-panel.kz-lst { padding: 22px 16px 28px; }
  .kz-r5 .kz-share__pop { inset-inline-start: auto; inset-inline-end: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .kz-r5 :where(.kz-r5s, .kz-lst) *, .kz-r5 :where(.kz-r5s, .kz-lst) *::before, .kz-r5 :where(.kz-r5s, .kz-lst) *::after { transition: none !important; animation: none !important; }
}
@media print {
  .kz-r5 .kz-ctx, .kz-r5 .kz-aside, .kz-r5 .kz-related, .kz-r5 .kz-pn, .kz-r5 .kz-cover { display: none !important; }
}
/* IDC Tech · idctech.tech · contact@idctech.tech */