/* ==========================================================================
   Keynes — Case Studies and Knowledge Base hubs (Ver 3.0).

   Loaded only on the two hub templates, where the legacy stylesheets are
   dequeued, so it owns the document and may set base element styles.
   Depends on kx-chrome.css for @font-face, tokens and .kx-visually-hidden.

   Ported from the 12 October 2026 hub handoff, two desktop mockups with every
   value inline. As on Media Meets, headings are 700 rather than the mock's
   800 (the self-hosted Inter Tight stops at 700) and the type stack is the
   site's. The hubs keep their own deeper purple (#5b14d6) for buttons and
   links, which the mock uses throughout, rather than the chrome's #6e56f8.
   ========================================================================== */

:root {
  --kxh-purple: #5b14d6;
  --kxh-purple-dark: #3f0e96;
  --kxh-ink: #0d0d0d;
  --kxh-body: #3f3f3f;
  --kxh-muted: #5f6166;
  --kxh-line: #d9dee3;
  --kxh-grey: #e9edf0;
  --kxh-teal: #12c6be;
  --kxh-stat: linear-gradient(110deg, #5b14d6 0%, #7a16d3 25%, #9b17cf 50%, #c219d8 75%, #e81be0 100%);
  --kxh-quote: linear-gradient(90deg, #b11ff0 0%, #7b4fe0 45%, #12c6be 100%);
}

/* --- Base ----------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: var(--kx-header-h); }

body {
  margin: 0;
  background: #fff;
  color: var(--kxh-body);
  font-family: var(--kx-font);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, blockquote { text-wrap: balance; }
p, li, td, figcaption { text-wrap: pretty; }

a { color: var(--kxh-purple); text-decoration: none; }
a:hover { color: var(--kxh-purple-dark); }

img { display: block; max-width: 100%; }

:where(a, button):focus-visible {
  outline: 2px solid var(--kxh-purple);
  outline-offset: 3px;
}

/* Filtered-out cards and rows, and the pills before JavaScript reveals them.
   Each is one attribute more specific than its own display rule. */
.kx-hcard[hidden],
.kx-hpills[hidden],
.kx-htable tr[hidden] { display: none; }

.kx-h__container {
  box-sizing: border-box;
  max-width: calc(1200px + 64px);
  margin: 0 auto;
  padding: 0 32px;
}

.kx-hstack { display: flex; flex-direction: column; gap: 40px; }

.kx-hsection { padding: 72px 0; background: #fff; }
.kx-hsection--grey { padding: 88px 0; background: var(--kxh-grey); }

/* --- Type ----------------------------------------------------------------- */

.kx-hhead { display: flex; flex-direction: column; gap: 16px; }

.kx-heyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--kxh-purple);
}

.kx-hh2 {
  max-width: 880px;
  margin: 0;
  font-size: clamp(34px, 9vw, 52px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.035em;
  color: var(--kxh-ink);
}

.kx-hsub {
  max-width: 520px;
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--kxh-body);
}

.kx-hlede,
.kx-hbody {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--kxh-body);
}

.kx-hlede { max-width: 720px; }

.kx-grad {
  background-image: var(--kxh-stat);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--kxh-purple);
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.kx-hstat {
  align-self: flex-start;
  font-size: 52px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  background-image: var(--kxh-stat);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--kxh-purple);
  -webkit-text-fill-color: transparent;
}

.kx-hlink {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--kxh-purple);
}

.kx-hbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--kxh-purple);
  border-radius: 999px;
  background: var(--kxh-purple);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  transition: background .2s ease, border-color .2s ease;
}

a.kx-hbtn:hover,
a:hover .kx-hbtn { background: var(--kxh-purple-dark); border-color: var(--kxh-purple-dark); color: #fff; }

.kx-hbtn--ghost {
  min-height: 44px;
  padding: 0 18px;
  border-color: var(--kxh-ink);
  background: transparent;
  color: var(--kxh-ink);
  white-space: nowrap;
}

a.kx-hbtn--ghost:hover { background: var(--kxh-ink); border-color: var(--kxh-ink); color: #fff; }

/* The measurement badge. Strong (a controlled test) is a filled violet dot;
   platform reporting is a hollow grey one. */
.kx-proof {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kxh-purple);
}

.kx-proof__dot {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--kxh-purple);
}

.kx-proof--weak { color: var(--kxh-muted); }
.kx-proof--weak .kx-proof__dot { background: none; border: 1.5px solid var(--kxh-muted); }

/* --- Hero ----------------------------------------------------------------- */
/* .kx-flush pages: the hero runs under the translucent header, so its top
   padding is the mock's 80px plus the bar. */

.kx-hhero {
  position: relative;
  isolation: isolate;
  padding: calc(80px + var(--kx-header-h)) 0 72px;
  background: #f6f5fc url("../img/hubs/hub-hero-bg.jpg") center / cover no-repeat;
}

.kx-hhero--cs::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../img/hubs/hub-hero-texture.jpg") center / cover no-repeat;
  mix-blend-mode: multiply;
  opacity: .15;
  pointer-events: none;
}

.kx-hhero--kb {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  min-height: 780px;
  background-image: url("../img/hubs/kb-hero-bg.jpg");
}

.kx-hhero__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px;
  width: 100%;
}

.kx-hhero__copy {
  flex: 1 1 540px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.kx-hhero__aside { flex: 1 1 400px; min-width: 0; }

/* The featured story. Drop-shadows rather than a box-shadow so the shadow
   follows the image's transparent top edge, where heads break the frame. */
.kx-hfeature {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  color: inherit;
  filter: drop-shadow(0 1px 1px rgba(24, 20, 43, .04)) drop-shadow(0 6px 14px rgba(24, 20, 43, .06)) drop-shadow(0 24px 48px rgba(91, 20, 214, .07));
}

.kx-hfeature:hover { color: inherit; }

.kx-hfeature__img { width: 100%; height: auto; }

.kx-hfeature__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border: 1px solid var(--kxh-line);
  border-top: 0;
  border-radius: 0 0 20px 20px;
  background: #fff;
}

.kx-hfeature__stat { display: flex; flex-direction: column; gap: 2px; }

.kx-hfeature__caption,
.kx-hstats__caption {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--kxh-muted);
}

/* The Knowledge Base's featured guide, on a frosted panel ruled like graph
   paper. */
.kx-hglass {
  box-sizing: border-box;
  padding: 48px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 20px;
  background-color: rgba(255, 255, 255, .42);
  background-image:
    linear-gradient(rgba(91, 20, 214, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 20, 214, .12) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 12px 40px rgba(24, 20, 43, .06);
}

.kx-hguide {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--kxh-line);
  border-radius: 12px;
  background: #fff;
  color: inherit;
  box-shadow: 0 8px 24px rgba(13, 13, 13, .08);
}

.kx-hguide:hover { color: inherit; }

.kx-hguide__img {
  height: 200px;
  border: 1px solid var(--kxh-line);
  border-radius: 8px;
  background: center / cover no-repeat;
}

/* --- Cards ---------------------------------------------------------------- */

.kx-hgrid { display: grid; gap: 24px; }
.kx-hgrid--library { grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); }
.kx-hgrid--practice { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }

.kx-hcard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--kxh-line);
  border-radius: 16px;
  background: #fff;
  color: inherit;
  transition: box-shadow .2s ease, transform .2s ease;
}

.kx-hcard:hover {
  color: inherit;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -24px rgba(24, 20, 43, .28);
}

.kx-hcard__img { height: 168px; background: var(--kxh-grey) center / cover no-repeat; }

.kx-hcard__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 14px;
  padding: 24px;
}

.kx-hcard--practice .kx-hcard__body { gap: 12px; }

.kx-hcard__kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--kxh-muted);
}

.kx-hcard__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--kxh-ink);
}

.kx-hcard__summary {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--kxh-body);
}

.kx-hcard__caption {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--kxh-muted);
}

.kx-hcard .kx-hlink { margin-top: auto; padding-top: 4px; }

/* --- Filters -------------------------------------------------------------- */

.kx-hpills { display: flex; flex-wrap: wrap; gap: 10px; }

.kx-hpill {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--kxh-line);
  border-radius: 999px;
  background: #fff;
  color: var(--kxh-ink);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}

.kx-hpill:hover { border-color: var(--kxh-ink); }

.kx-hpill[aria-pressed="true"] { border-color: var(--kxh-teal); background: var(--kxh-teal); }

/* --- Stats ---------------------------------------------------------------- */

.kx-hstats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr));
  gap: 32px;
}

.kx-hstats__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--kxh-line);
}

.kx-hstats__caption { max-width: 460px; color: var(--kxh-body); }

/* --- Quotes --------------------------------------------------------------- */
/* Each card spans three rows of a shared subgrid, so quote, attribution and
   link line up across the row whatever each quote's length. */

.kx-hquotes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: 64px 24px;
  padding-top: 44px;
}

.kx-hquote {
  position: relative;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 20px;
  box-sizing: border-box;
  margin: 0;
  padding: 60px 28px 32px;
  border: 3px solid transparent;
  border-radius: 18px;
  background: linear-gradient(#fff, #fff) padding-box, var(--kxh-quote) border-box;
  color: inherit;
}

.kx-hquote:hover { color: inherit; }

.kx-hquote__mark {
  position: absolute;
  top: -44px;
  left: 22px;
  width: 112px;
  height: auto;
}

.kx-hquote blockquote {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--kxh-ink);
  text-wrap: pretty;
}

.kx-hquote__by {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 4px;
}

.kx-hquote__rule {
  width: 140px;
  height: 3px;
  margin-bottom: 10px;
  border-radius: 2px;
  background: var(--kxh-quote);
}

.kx-hquote__name {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--kxh-ink);
}

.kx-hquote__role {
  font-size: 15px;
  line-height: 1.45;
  color: var(--kxh-ink);
}

.kx-hquote__link { align-self: end; }

/* --- How we measure ------------------------------------------------------- */

.kx-hmethod { padding-top: 24px; }

.kx-hmethod__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 20px;
}

.kx-hmethod__item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--kxh-line);
}

/* --- Written by others ---------------------------------------------------- */

.kx-hpress__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: 24px;
}

.kx-hpress__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border: 1px solid var(--kxh-line);
  border-radius: 16px;
  background: #fff;
  color: inherit;
}

.kx-hpress__card:hover { color: inherit; }

.kx-hpress__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.kx-hpress__logo { width: auto; height: 26px; }

/* --- Browse by task ------------------------------------------------------- */

.kx-hpaths__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
  gap: 32px;
}

.kx-hpaths__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 20px;
  border-top: 3px solid var(--kxh-purple);
  border-image: linear-gradient(90deg, #5b14d6 0%, #9b17cf 50%, #e81be0 100%) 1;
}

.kx-hpaths__list { margin: 0; padding: 0; list-style: none; }

.kx-hpaths__list a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--kxh-line);
  font-size: 16px;
  line-height: 1.6;
  color: var(--kxh-ink);
}

.kx-hpaths__list a span:last-child { color: var(--kxh-purple); }
.kx-hpaths__list a:hover { color: var(--kxh-purple); }

/* --- Tools ---------------------------------------------------------------- */

.kx-htools { padding: 80px 0; }

.kx-htools__row { display: flex; flex-wrap: wrap; gap: 24px; }

.kx-htool {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  border: 1px solid var(--kxh-line);
  border-radius: 16px;
  background: #fff;
  color: inherit;
}

.kx-htool:hover { color: inherit; }

.kx-htool--wide {
  flex: 2 1 560px;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
}

.kx-htool__copy {
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kx-htool .kx-hbtn { align-self: flex-start; }
.kx-htool__btn { margin-top: auto; }

.kx-htool__art {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 260px;
}

.kx-htool__art img {
  width: 100%;
  max-width: 440px;
  height: auto;
  max-height: 256px;
  object-fit: contain;
}

/* --- All guides ----------------------------------------------------------- */

.kx-hguides { padding: 88px 0; }

.kx-htable {
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--kxh-line);
  border-radius: 16px;
}

.kx-htable table { width: 100%; min-width: 720px; border-collapse: collapse; }

.kx-htable th {
  padding: 14px 16px;
  border-bottom: 1px solid var(--kxh-line);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .24em;
  text-align: left;
  text-transform: uppercase;
  color: var(--kxh-muted);
}

.kx-htable td {
  padding: 18px 16px;
  border-bottom: 1px solid var(--kxh-line);
  vertical-align: top;
}

.kx-htable tbody tr:last-child td { border-bottom: 0; }

/* The last visible row loses its rule when a filter hides the rows after it. */
.kx-htable tbody tr.is-last td { border-bottom: 0; }

.kx-htable__guide { width: 28%; }

.kx-htable__title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--kxh-ink);
}

.kx-htable__cat {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--kxh-muted);
}

.kx-htable td.kx-htable__dl { padding-top: 12px; text-align: right; }

/* --- Knowledge Base press quote ------------------------------------------- */

.kx-hkbquote {
  padding: 60px 0;
  background: #f6f5fc url("../img/hubs/hub-hero-bg.jpg") center / cover no-repeat;
}

.kx-hkbquote__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
}

.kx-hkbquote__lead {
  flex: 1 1 360px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.kx-hkbquote__fig {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}

/* Hangs the opening quotation mark into the margin. */
.kx-hkbquote__fig blockquote { text-indent: -.56em; }

.kx-hkbquote__fig figcaption { color: var(--kxh-muted); }

/* --- Practice ------------------------------------------------------------- */

.kx-hpractice { padding: 88px 0; }

/* --- Talk to a strategist ------------------------------------------------- */
/* The glass K and two smaller K tiles are decoration in the background; the
   copy is pushed right to clear the big K. Below 1000px the artwork goes and
   the copy takes the full width, as the design does. */

.kx-hcta {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  background:
    url("../img/hubs/cta-k-tile-1.webp") no-repeat 50% -50px / 96px auto,
    url("../img/hubs/cta-k-tile-2.webp") no-repeat 97% 24px / 84px auto,
    url("../img/hubs/cta-k-tile-1.webp") no-repeat 58% calc(100% + 40px) / 110px auto,
    url("../img/hubs/cta-k-tile-2.webp") no-repeat 99% calc(100% + 30px) / 96px auto,
    url("../img/hubs/cta-k.webp") no-repeat -50px 50% / auto 78%,
    linear-gradient(100deg, #ebddf8 0%, #f6f0fc 28%, #fff 55%, #f7f3fc 100%);
}

.kx-hcta__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px;
  padding-left: calc(32px + 250px);
}

.kx-hcta__lead {
  flex: 1 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.kx-hcta__lead .kx-hsub { max-width: none; }

.kx-hcta__act {
  flex: 1 1 400px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.kx-hcta__body {
  max-width: 520px;
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--kxh-body);
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1000px) {
  .kx-hcta { background: linear-gradient(100deg, #ebddf8 0%, #f6f0fc 28%, #fff 55%, #f7f3fc 100%); }
  .kx-hcta__grid { padding-left: 32px; }
}

@media (max-width: 760px) {
  .kx-h__container,
  .kx-hcta__grid { padding-left: 20px; padding-right: 20px; }

  .kx-hhero { padding-top: calc(48px + var(--kx-header-h)); padding-bottom: 56px; }
  .kx-hhero--kb { min-height: 0; }
  .kx-hhero__grid { gap: 40px; }

  .kx-hsection,
  .kx-hsection--grey,
  .kx-htools,
  .kx-hguides,
  .kx-hpractice { padding: 56px 0; }
  .kx-hmethod { padding-top: 8px; }
  .kx-hcta { padding: 64px 0; }

  .kx-hglass { padding: 20px; }
  .kx-hstat { font-size: 44px; }

  /* The guide table keeps title and Download; the description column would
     only run off the edge, and pushes the button off-screen with it. */
  .kx-htable table { min-width: 0; }
  .kx-htable .kx-htable__inside { display: none; }
  .kx-htable__guide { width: auto; }

  /* Hand-set line breaks only make sense at the width they were set for. */
  .kx-hcta br { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kx-hcard { transition: none; }
  .kx-hcard:hover { transform: none; }
}