/* ==========================================================================
   CPG.GE — the About pages, built to the supplied reference (kkcg.com) at
   its own measurements: About us, Our Founder, Leadership and History.
   --------------------------------------------------------------------------
   The reference sets everything in one grotesk (Aeonik Pro); Inter stands in
   for it here. The column is 1114px at 1440 and grows to 1514px at 1920, as
   the reference's does; below 1440 it is the width less 96px, on a phone
   the width less 32px.
   ========================================================================== */
.kk-page {
  --kk-black: #0D0D0C; /* the shell's one black */
  --kk-teal: #94BDC3;
  --kk-teal-deep: #6F8E92;
  --kk-teal-pale: #E3EFF0;
  --kk-tile: #F2F8F8;
  --kk-ink: #212E30;
  --kk-g72: #484848;
  --kk-g101: #656565;
  --kk-g154: #9A9A9A;
  --kk-g205: #CDCDCD;
  --kk-g233: #E9E9E9;
  --kk-g240: #F0F0F0;
  --kk-g248: #F8F8F8;
  --kk-font: "Inter", "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-family: var(--kk-font);
  font-weight: 400;
  color: var(--kk-black);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
.kk-page *, .kk-page *::before, .kk-page *::after { box-sizing: border-box; }
.kk-page h1, .kk-page h2, .kk-page h3, .kk-page p { margin: 0; font-family: var(--kk-font); font-weight: 400; }
.kk-page a { color: inherit; }
.kk-page img, .kk-page video { display: block; max-width: 100%; }
.kk-container { width: calc(100% - 32px); margin-inline: auto; }
@media (min-width: 64rem) { .kk-container { width: calc(100% - 96px); } }
@media (min-width: 90rem) { .kk-container { width: min(calc(83.3334% - 86px), 1514px); } }
.kk-page strong { font-weight: 700; }
.kk-page em { font-style: normal; color: var(--kk-teal); }

/* --- the type scale --------------------------------------------------------- */
.kk-h1 { font-size: clamp(3.5rem, 1.6rem + 5.5vw, 7rem); line-height: 1.054; letter-spacing: -0.01em; }
.kk-h2 { font-size: clamp(2.5rem, 1.4rem + 3.2vw, 4.5rem); line-height: 1.111; }
.kk-h2--56 { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.5rem); line-height: 1.143; letter-spacing: 0.3px; }
.kk-h3 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); line-height: 1.182; }
.kk-lead { font-size: clamp(1.375rem, 1rem + 1vw, 2rem); line-height: 1.375; font-weight: 300; }
.kk-lead--44 { font-size: clamp(1.625rem, 1.1rem + 1.5vw, 2.75rem); line-height: 1.182; font-weight: 400; }
.kk-body { font-size: clamp(1.125rem, 1rem + 0.4vw, 1.5rem); line-height: 1.334; font-weight: 300; letter-spacing: 0.2px; }
.kk-body--20 { font-size: 1.25rem; line-height: 1.4; font-weight: 300; letter-spacing: 0.2px; }
.kk-small { font-size: 1rem; line-height: 1.5; }

/* From 1440 the scale is the reference's exactly. */
@media (min-width: 90rem) {
  .kk-h1 { font-size: 7rem; line-height: 118px; }
  .kk-h2 { font-size: 4.5rem; line-height: 80px; }
  .kk-h2--56 { font-size: 3.5rem; line-height: 64px; }
  .kk-h3 { font-size: 2.75rem; line-height: 52px; }
  .kk-lead { font-size: 2rem; line-height: 44px; }
  .kk-lead--44 { font-size: 2.75rem; line-height: 52px; }
  .kk-body { font-size: 1.5rem; line-height: 32px; }
  .kk-founder-band p, .kk-stats__text p { font-size: 2rem; }
  .kk-founder-band p { line-height: 40px; }
  .kk-stats__text p { line-height: 44px; }
}

/* --- the pill: a circle with an arrow, then the label ----------------------- */
.kk-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 62px;
  padding: 8px 16px 8px 8px;
  border: 1px solid var(--kk-teal);
  border-radius: 9999px;
  background: transparent;
  color: var(--kk-black);
  font-family: var(--kk-font);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.kk-pill__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--kk-teal-pale);
  color: var(--kk-black);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.kk-pill__mark svg { width: 16px; height: 16px; }
.kk-pill:hover { background: var(--kk-teal); border-color: var(--kk-teal); color: var(--kk-black); }
.kk-pill:hover .kk-pill__mark { background: #fff; transform: translateX(2px); }
.kk-pill--filled { background: var(--kk-teal); height: 60px; }
.kk-pill--filled .kk-pill__mark { background: #fff; }
.kk-pill--filled:hover { background: #fff; border-color: #fff; }
.kk-pill--filled:hover .kk-pill__mark { background: var(--kk-teal); }
.kk-pill--dark { color: #fff; }
.kk-pill--dark .kk-pill__mark { background: rgba(148, 189, 195, 0.22); color: #fff; }
.kk-pill--dark:hover { color: var(--kk-black); }
.kk-pill--dark:hover .kk-pill__mark { color: var(--kk-black); }
.kk-pill:focus-visible { outline: 2px solid var(--kk-teal); outline-offset: 4px; }

/* --- the masthead: a full-bleed picture, the title 288px down --------------- */
.kk-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  min-height: 926px;
  padding: 288px 0 128px;
  overflow: hidden;
}
.kk-hero__media { position: absolute; inset: 0; z-index: -1; }
.kk-hero__media img, .kk-hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.kk-hero--light { color: var(--kk-black); }
/* A light frosted sheet over the whole picture, so the black title reads;
   the reference's diagonal edge was not wanted. */
.kk-hero__wedge {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  pointer-events: none;
}
.kk-hero--dark { color: #fff; background: var(--kk-black); }
.kk-hero__lead { max-width: 539px; margin-top: 56px; color: var(--kk-g72); }
.kk-hero--dark .kk-hero__lead { color: var(--kk-g233); }
.kk-hero__cta { margin-top: 56px; }

/* --- Our Values / Our Vision: black, two columns ---------------------------- */
.kk-values { padding: 152px 0; background: var(--kk-black); color: #fff; }
.kk-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 36px; }
.kk-cols__cell { max-width: 424px; }
.kk-values h2 { color: var(--kk-teal-deep); }
.kk-values p { margin-top: 24px; color: var(--kk-g233); }

/* --- the founder's band: black, the portrait at the right ------------------- */
.kk-founder-band {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 900px;
  padding: 120px 0;
  background: var(--kk-black);
  color: #fff;
  overflow: hidden;
}
.kk-founder-band__media { position: absolute; inset: 0; z-index: -1; }
/* The reference draws this picture 123% wide, 20px in from the left, so the
   sitter lands at the right of the column. */
.kk-founder-band__media img { position: absolute; top: 0; left: 20px; width: 123%; max-width: none; height: 100%; object-fit: cover; object-position: 100% 100%; }
.kk-founder-band h2 { color: var(--kk-teal); margin-bottom: 36px; }
.kk-founder-band p { max-width: 735px; font-size: clamp(1.375rem, 1rem + 1vw, 2rem); line-height: 1.25; }
.kk-founder-band .kk-pill { margin-top: 28px; }

/* --- the light quote band ---------------------------------------------------- */
.kk-quote { padding: 152px 0; background: var(--kk-g248); }
.kk-quote p { color: var(--kk-black); }
.kk-quote .kk-pill { margin-top: 56px; }

/* --- History: a line down the left, the years and the milestones ------------ */
.kk-history { padding: 152px 0 224px; background: #fff; }
.kk-history__lead { margin-top: 24px; color: var(--kk-g101); }
.kk-timeline { position: relative; margin-top: 92px; padding-left: clamp(40px, 8vw, 116px); }
.kk-timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--kk-teal); }
.kk-timeline__marker { position: sticky; top: 50%; float: left; width: 3px; height: 208px; margin-left: calc(-1px - clamp(40px, 8vw, 116px)); transform: translateX(-1px); background: var(--kk-ink); }
.kk-timeline__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 128px; }
.kk-timeline__item { max-width: 778px; }
.kk-timeline__year { display: block; margin-bottom: 16px; font-size: 1.25rem; line-height: 1.4; letter-spacing: 0.2px; color: var(--kk-g154); }
.kk-timeline__item h3 { margin-bottom: 32px; }
.kk-timeline__item p { color: var(--kk-g101); }
.kk-history__more { display: flex; justify-content: center; margin-top: 76px; }

/* --- Join our team -------------------------------------------------------------- */
.kk-join { padding: 80px 0; background: var(--kk-g248); }
.kk-join h2 { margin-bottom: 40px; }
.kk-join__row { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 64px; padding-top: 40px; border-top: 1px solid var(--kk-g233); }
.kk-join__row p { color: var(--kk-ink); }

/* --- Fact sheet: a photograph 550 tall ---------------------------------------- */
.kk-fact { position: relative; isolation: isolate; min-height: 550px; padding: 140px 0; color: #fff; overflow: hidden; }
.kk-fact__media { position: absolute; inset: 0; z-index: -1; background: var(--kk-black); }
.kk-fact__media img { width: 100%; height: 100%; object-fit: cover; }
.kk-fact h2 { color: var(--kk-teal); }
.kk-fact p { margin-top: 24px; }
.kk-fact .kk-pill { margin-top: 40px; }

/* --- Our Founder: the black masthead ------------------------------------------ */
.kk-founder-hero { min-height: 980px; padding: 240px 0 76px; align-items: stretch; }
.kk-founder-hero .kk-container { display: flex; flex-direction: column; }
.kk-founder-hero__role { display: inline-flex; align-items: center; gap: 16px; margin-top: 32px; color: var(--kk-teal); font-size: 1rem; line-height: 1.5; text-transform: uppercase; text-decoration: none; }
.kk-founder-hero__role img { width: 20px; height: 20px; }
.kk-founder-hero__lead { max-width: 539px; margin-top: auto; padding-top: 120px; color: var(--kk-g233); }
/* 134% wide and 138px to the left, as the reference draws it. */
.kk-founder-hero .kk-hero__media img { position: absolute; top: 0; left: -9.6%; width: 134%; max-width: none; height: 100%; object-position: 100% 100%; }

/* --- the grey statement and the two tiles ------------------------------------- */
.kk-statement { padding: 152px 0 48px; background: #fff; }
.kk-statement__text { color: var(--kk-black); }
.kk-stats { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 8px; margin-top: 96px; }
.kk-stats__tiles { display: grid; gap: 8px; }
.kk-stats__tile { padding: 40px 48px; background: var(--kk-tile); color: var(--kk-ink); }
.kk-stats__tile strong { display: block; margin-bottom: 24px; font-size: 4.5rem; line-height: 1.111; font-weight: 400; }
.kk-stats__tile span { font-size: 0.875rem; line-height: 1.43; color: var(--kk-g101); }
.kk-stats__text { padding: 48px; background: var(--kk-tile); }
.kk-stats__text p { font-size: clamp(1.375rem, 1rem + 1vw, 2rem); line-height: 1.375; font-weight: 400; }

/* --- the dark statement band on a photograph ----------------------------------- */
.kk-band { position: relative; isolation: isolate; min-height: 622px; padding: 152px 0; color: #fff; overflow: hidden; }
.kk-band__media { position: absolute; inset: 0; z-index: -1; background: var(--kk-black); }
.kk-band__media img { width: 100%; height: 100%; object-fit: cover; }
.kk-band .kk-pill { margin-top: 48px; }

/* --- Passion Projects ----------------------------------------------------------- */
.kk-passion { padding: 96px 0 48px; background: #fff; }
.kk-passion__head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 36px; }
.kk-passion__head p { max-width: 539px; color: var(--kk-g72); }
.kk-projects { list-style: none; margin: 0; padding: 152px 0 0; display: flex; flex-direction: column; gap: 160px; background: #fff; }
.kk-project { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; align-items: start; }
.kk-project__media { width: 424px; max-width: 100%; aspect-ratio: 1; overflow: hidden; }
.kk-project__media img { width: 100%; height: 100%; object-fit: cover; }
.kk-project--flip .kk-project__media { order: 2; justify-self: end; }
.kk-project__text { max-width: 539px; }
.kk-project__text h2 { margin-bottom: 32px; }
.kk-project__text p { color: var(--kk-g72); }
.kk-project__text .kk-pill { margin-top: 32px; }

/* --- the Foundation: black, an accordion ------------------------------------ */
.kk-foundation { padding: 152px 0 88px; background: var(--kk-black); color: #fff; }
.kk-foundation__head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 36px; }
.kk-foundation__head h2 { max-width: 539px; }
.kk-foundation__head p { max-width: 539px; color: var(--kk-g205); }
.kk-foundation__head p + p { margin-top: 24px; }
.kk-accordion { margin-top: 80px; border-top: 1px solid var(--kk-g72); }
.kk-accordion__item { border-bottom: 1px solid var(--kk-g72); }
.kk-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 124px;
  padding: 16px 16px;
  list-style: none;
  cursor: pointer;
  font-size: 2rem;
  line-height: 1.25;
  transition: color 0.3s ease, padding 0.3s ease;
}
.kk-accordion__summary::-webkit-details-marker { display: none; }
.kk-accordion__item[open] .kk-accordion__summary { padding-left: 72px; color: var(--kk-teal); }
.kk-accordion__toggle { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid #fff; border-radius: 50%; color: #fff; }
.kk-accordion__toggle::before { content: "+"; font-size: 1.25rem; line-height: 1; }
.kk-accordion__item[open] .kk-accordion__toggle { background: #fff; color: var(--kk-black); }
.kk-accordion__item[open] .kk-accordion__toggle::before { content: "−"; }
.kk-accordion__body { display: grid; grid-template-columns: 500px minmax(0, 1fr); gap: 36px; padding: 24px 16px 40px; }
.kk-accordion__body img { width: 500px; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.kk-accordion__body p { max-width: 539px; color: #fff; }
.kk-foundation__more { display: flex; justify-content: center; margin-top: 80px; }

/* --- Leadership: the founder's card and the people --------------------------- */
.kk-person-feature { padding: 152px 0; background: #fff; }
.kk-person-feature .kk-cols { align-items: start; }
.kk-person-feature h2 { margin-bottom: 24px; color: var(--kk-ink); }
.kk-person-feature__role { color: var(--kk-g101); }
.kk-person-feature__text { margin-top: 36px; color: var(--kk-g72); }
.kk-person-feature .kk-pill { margin-top: 40px; }
.kk-person-feature__media { justify-self: end; width: 539px; max-width: 100%; aspect-ratio: 1; }
.kk-person-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.kk-people { padding: 0 0 152px; background: #fff; }
.kk-people h2 { margin-bottom: 64px; }
.kk-people__grid { display: grid; grid-template-columns: repeat(3, 310px); gap: 92px; justify-content: space-between; list-style: none; margin: 0; padding: 0; }
.kk-people__card img { width: 310px; height: 310px; object-fit: cover; }
.kk-people__name { display: block; margin-top: 32px; font-size: 2rem; line-height: 1.25; color: var(--kk-teal-deep); }
.kk-people__role { margin-top: 8px; color: var(--kk-g101); }

/* --- narrower screens -------------------------------------------------------- */
@media (max-width: 89.999rem) {
  .kk-people__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 36px; }
  .kk-people__card img { width: 100%; height: auto; aspect-ratio: 1; }
}
@media (max-width: 63.999rem) {
  .kk-hero { min-height: 0; padding: 180px 0 72px; }
  .kk-hero__lead, .kk-hero__cta { margin-top: 32px; }
  .kk-values, .kk-quote, .kk-history, .kk-person-feature, .kk-statement, .kk-foundation { padding-block: 88px; }
  .kk-history { padding-bottom: 120px; }
  .kk-cols, .kk-passion__head, .kk-foundation__head, .kk-project, .kk-stats, .kk-accordion__body { grid-template-columns: minmax(0, 1fr); }
  .kk-cols__cell, .kk-project__text, .kk-passion__head p, .kk-foundation__head h2, .kk-foundation__head p { max-width: none; }
  .kk-founder-band { min-height: 0; padding: 88px 0; }
  .kk-founder-band__media img { left: 0; width: 100%; object-position: 70% 50%; opacity: 0.55; }
  .kk-founder-hero .kk-hero__media img { left: 0; width: 100%; object-position: 70% 100%; opacity: 0.7; }
  .kk-founder-hero { min-height: 0; padding: 180px 0 64px; }
  .kk-founder-hero__lead { padding-top: 64px; }
  .kk-timeline { margin-top: 56px; }
  .kk-timeline__list { gap: 72px; }
  .kk-timeline__item h3 { margin-bottom: 20px; }
  .kk-timeline__marker { display: none; }
  .kk-history__more, .kk-foundation__more { margin-top: 56px; }
  .kk-join { padding: 64px 0; }
  .kk-fact { min-height: 0; padding: 96px 0; }
  .kk-stats { margin-top: 56px; }
  .kk-stats__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kk-stats__tile { padding: 32px; }
  .kk-stats__text { padding: 32px; }
  .kk-band { min-height: 0; padding: 96px 0; }
  .kk-passion { padding: 64px 0 24px; }
  .kk-projects { padding-top: 64px; gap: 72px; }
  .kk-project--flip .kk-project__media { order: 0; justify-self: start; }
  .kk-project__media { width: 100%; max-width: 424px; }
  .kk-accordion__summary { min-height: 88px; font-size: 1.5rem; padding: 16px 0; }
  .kk-accordion__item[open] .kk-accordion__summary { padding-left: 0; }
  .kk-accordion__body { padding: 8px 0 32px; }
  .kk-accordion__body img { width: 100%; }
  .kk-person-feature__media { width: 100%; justify-self: start; }
  .kk-people { padding-bottom: 88px; }
  .kk-people h2 { margin-bottom: 40px; }
  .kk-people__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  .kk-people__name { margin-top: 20px; font-size: 1.5rem; }
}
@media (max-width: 39.999rem) {
  .kk-hero { padding: 150px 0 56px; }
  .kk-people__grid { grid-template-columns: minmax(0, 1fr); }
  .kk-pill { height: 56px; }
  .kk-pill__mark { width: 40px; height: 40px; }
  .kk-stats__tiles { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .kk-pill, .kk-pill__mark, .kk-accordion__summary { transition: none; }
}

/* --- Our Founder with cpg.ge's own portrait: it stands at the right of the
   black masthead, fading into the black towards the copy. --- */
.kk-founder-hero--portrait .kk-hero__media img {
  left: auto;
  right: 0;
  width: 58%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.kk-founder-hero__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #0D0D0C 0%, #0D0D0C 34%, rgba(13, 13, 12, 0.85) 46%, rgba(13, 13, 12, 0) 68%),
    linear-gradient(180deg, rgba(13, 13, 12, 0.6) 0%, rgba(13, 13, 12, 0) 30%, rgba(13, 13, 12, 0) 75%, #0D0D0C 100%);
}
.kk-founder-hero__role svg { width: 20px; height: 20px; }
p.kk-founder-hero__role { margin: 32px 0 0; }
.kk-accordion__logo { display: grid; place-items: center; width: 500px; max-width: 100%; aspect-ratio: 16 / 9; background: #2C2C2C; padding: 40px; }
.kk-accordion__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
@media (max-width: 63.999rem) {
  .kk-founder-hero--portrait .kk-hero__media img { width: 100%; object-position: center 20%; opacity: 0.55; }
  .kk-founder-hero__shade { background: linear-gradient(180deg, rgba(13, 13, 12, 0.5) 0%, rgba(13, 13, 12, 0.35) 40%, #0D0D0C 100%); }
  .kk-accordion__logo { width: 100%; }
}

/* A long quote in the founder's masthead is set at the lead size, 640px wide. */
.kk-founder-hero__lead--long { max-width: 640px; font-size: clamp(1.375rem, 1rem + 1vw, 2rem); line-height: 1.375; font-weight: 300; }
@media (min-width: 90rem) { .kk-founder-hero__lead--long { font-size: 2rem; line-height: 44px; } }

/* The founder's portrait on the About page's black band: at the right,
   fading into the black towards the copy, as on his own page. */
.kk-founder-band--portrait .kk-founder-band__media img { left: auto; right: 0; width: 52%; max-width: none; object-position: center top; }
@media (max-width: 63.999rem) {
  .kk-founder-band--portrait .kk-founder-band__media img { width: 100%; object-position: center 20%; }
}

/* --- a news article, built to the supplied reference: 300px down from the
   top, "Back" and the category and date on one line, the title at 72/80,
   the lead 32/44 light 40px under it, the picture 3:2 36px under that,
   and the body 18/27 in an 884px column 48px under the picture. --- */
.kk-article { padding: 200px 0 120px; background: #fff; }
.kk-article__top { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 64px; margin-bottom: 34px; }
.kk-article__back { height: 60px; }
.kk-article__meta { display: inline-flex; align-items: center; gap: 20px; font-size: 0.875rem; line-height: 1.43; color: var(--kk-g154); }
.kk-article__category { color: var(--kk-ink); font-weight: 500; text-transform: uppercase; text-decoration: underline; }
.kk-article__title { color: var(--kk-black); }
.kk-article__lead { margin-top: 40px; color: var(--kk-g101); }
.kk-article__figure { margin: 36px 0 0; aspect-ratio: 3 / 2; overflow: hidden; }
.kk-article__figure img { width: 100%; height: 100%; object-fit: cover; }
.kk-article__body { max-width: 884px; margin-top: 48px; font-size: 1.125rem; line-height: 1.5; color: var(--kk-black); }
.kk-article__body p + p { margin-top: 22.5px; }
.kk-article__body a { color: var(--kk-teal-deep); font-weight: 500; }
.kk-page .kk-news { padding-top: 64px; }
@media (max-width: 63.999rem) {
  .kk-article { padding: 140px 0 64px; }
  .kk-article__top { gap: 16px 32px; margin-bottom: 24px; }
  .kk-article__lead { margin-top: 24px; }
  .kk-article__figure { margin-top: 24px; }
  .kk-article__body { margin-top: 32px; }
}

/* ==========================================================================
   THE HEADER'S OTHER PAGES — built to the supplied reference (kkcg.com):
   Our business, a business, Partnerships, Responsibility, News, Careers,
   Contacts. Modules shared between them follow.
   ========================================================================== */

/* --- a small label over a large grey statement ------------------------------- */
.kk-intro { padding: 152px 0; background: #fff; }
.kk-intro--grey { background: var(--kk-g248); }
.kk-intro__label { font-size: 1.5rem; line-height: 1.334; color: var(--kk-g72); }
.kk-intro__text { margin-top: 40px; color: var(--kk-black); }

/* --- full-bleed dark photo bands, one per pillar ----------------------------- */
.kk-pillars { background: var(--kk-black); }
.kk-pillar { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 640px; padding: 96px 0; color: #fff; overflow: hidden; }
.kk-pillar__media { position: absolute; inset: 0; z-index: -1; }
.kk-pillar__media img { width: 100%; height: 100%; object-fit: cover; }
.kk-pillar__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 13, 12, 0.92) 0%, rgba(13, 13, 12, 0.7) 45%, rgba(13, 13, 12, 0.25) 100%); }
.kk-pillar h2 { color: var(--kk-g240); }
.kk-pillar p { max-width: 539px; margin-top: 24px; font-size: 1.25rem; line-height: 1.4; }
.kk-pillar .kk-pill { margin-top: 40px; }

/* --- a short photo band with a title, a line and a pill ---------------------- */
.kk-cta-band { position: relative; isolation: isolate; min-height: 430px; padding: 116px 0; color: #fff; overflow: hidden; }
.kk-cta-band__media { position: absolute; inset: 0; z-index: -1; background: var(--kk-black); }
.kk-cta-band__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }
.kk-cta-band .kk-cols { align-items: start; }
.kk-cta-band .kk-pill { margin-top: 40px; }

/* --- two dark columns, each with a heading, a line and a pill ---------------- */
.kk-duo { padding: 152px 0; background: var(--kk-black); color: #fff; }
.kk-duo p { margin-top: 24px; font-size: 1.25rem; line-height: 1.4; color: var(--kk-g233); }
.kk-duo .kk-pill { margin-top: 40px; }

/* --- the business masthead: a pale tile with the picture at the right -------- */
.kk-hero--tile { min-height: 960px; padding: 240px 0 150px; background: var(--kk-tile); color: var(--kk-black); }
.kk-hero--tile .kk-container { display: grid; grid-template-columns: minmax(0, 1fr) 539px; gap: 36px; align-items: start; }
.kk-hero--tile .kk-hero__lead { color: var(--kk-g72); }
.kk-hero__tileimg { width: 539px; max-width: 100%; aspect-ratio: 1; overflow: hidden; }
.kk-hero__tileimg img { width: 100%; height: 100%; object-fit: cover; }

/* --- the dark selection: big picture cards with the title on the picture ----- */
.kk-assets { padding: 152px 0; background: var(--kk-black); color: #fff; }
.kk-assets__lead { margin-top: 24px; max-width: 884px; font-size: 1.25rem; line-height: 1.4; }
.kk-assets__list { display: flex; flex-direction: column; gap: 48px; margin: 64px 0 0; padding: 0; list-style: none; }
.kk-asset { position: relative; display: block; aspect-ratio: 1114 / 560; overflow: hidden; color: #fff; text-decoration: none; }
.kk-asset img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--cpg-ease); }
.kk-asset::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.1) 100%); }
.kk-asset__body { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; max-width: 620px; padding: 48px; }
.kk-asset__body p { margin-top: 24px; font-size: 1.25rem; line-height: 1.4; }
.kk-asset__go { position: absolute; right: 32px; bottom: 32px; z-index: 1; display: inline-flex; align-items: center; gap: 12px; font-size: 1rem; font-weight: 500; }
.kk-asset__go .kk-pill__mark { background: #fff; }
.kk-asset:hover img { transform: scale(1.04); }
.kk-assets__more { display: flex; justify-content: center; margin-top: 64px; }

/* --- a row of big figures ------------------------------------------------------ */
.kk-figures { padding: 152px 0; background: #fff; }
.kk-figures__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kk-figures__cell { padding: 40px 48px; background: var(--kk-tile); color: var(--kk-ink); }
.kk-figures__cell strong { display: block; font-size: 4.5rem; line-height: 1.111; font-weight: 400; }
.kk-figures__cell span { display: block; margin-top: 16px; font-size: 0.875rem; color: var(--kk-g101); }

/* --- the dark "Our business" list, as on the home band ------------------------ */
.kk-bizlist { padding: 152px 0; background: var(--kk-black); color: #fff; }
.kk-bizlist h2 { color: var(--kk-teal-deep); }
.kk-bizlist__lead { margin-top: 24px; font-size: 2rem; line-height: 1.25; color: var(--kk-g205); }
.kk-bizlist__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; margin: 56px 0 0; padding: 0; list-style: none; }
.kk-bizlist__link { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 16px 24px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); color: var(--kk-g154); font-size: 1.75rem; line-height: 1.2; text-decoration: none; transition: color 0.3s ease; }
.kk-bizlist__link svg { flex: none; width: 24px; height: 24px; }
.kk-bizlist__link:hover { color: #fff; }

/* --- a featured dark band with a picture above the copy ----------------------- */
.kk-feature { background: var(--kk-black); color: #fff; padding-bottom: 120px; }
.kk-feature__media { aspect-ratio: 1440 / 700; overflow: hidden; }
.kk-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.kk-feature__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 36px; margin-top: 96px; }
.kk-feature__body h2 { max-width: 539px; }
.kk-feature__body p { max-width: 539px; margin-top: 32px; font-size: 1.5rem; line-height: 1.334; color: var(--kk-g233); }
.kk-feature__logo { display: grid; place-items: center; width: 100%; max-width: 539px; aspect-ratio: 16 / 9; background: #1F1F1E; padding: 48px; }
.kk-feature__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.kk-feature__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: 64px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.2); }

/* --- a strip of three pictures ----------------------------------------------------- */
.kk-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--kk-g240); }
.kk-strip img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* --- large dark picture cards with a title and a line ------------------------- */
.kk-cards { padding: 152px 0; background: #fff; }
.kk-cards__list { display: flex; flex-direction: column; gap: 48px; margin: 64px 0 0; padding: 0; list-style: none; }
.kk-card { position: relative; display: block; min-height: 480px; overflow: hidden; color: #fff; text-decoration: none; background: var(--kk-black); }
.kk-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: transform 0.6s var(--cpg-ease); }
.kk-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 55%, rgba(0, 0, 0, 0.15) 100%); }
.kk-card__body { position: relative; z-index: 1; max-width: 620px; padding: 48px; }
.kk-card__body h3 { color: #fff; }
.kk-card__body p { margin-top: 24px; font-size: 1.25rem; line-height: 1.4; }
.kk-card__go { position: absolute; right: 32px; bottom: 32px; z-index: 1; }
.kk-card__go .kk-pill__mark { background: #fff; }
.kk-card:hover img { transform: scale(1.04); }

/* --- partner logos -------------------------------------------------------------- */
.kk-logos { padding: 128px 0; background: var(--kk-g248); }
.kk-logos__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 56px 0 0; padding: 0; list-style: none; }
.kk-logos__cell { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 24px; background: #fff; }
.kk-logos__cell img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* --- the film band with a play mark ------------------------------------------- */
.kk-film { padding: 152px 0; background: var(--kk-black); }
.kk-film__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #1F1F1E; }
.kk-film__frame video, .kk-film__frame img { width: 100%; height: 100%; object-fit: cover; }

/* --- the letter blocks: a great letter, a heading, a line, then rows ---------- */
.kk-esg { padding: 0 0 96px; background: #fff; }
.kk-esg + .kk-esg { padding-top: 0; }
.kk-esg__head { display: grid; grid-template-columns: 424px minmax(0, 1fr); gap: 36px; align-items: center; }
.kk-esg--flip .kk-esg__head { grid-template-columns: minmax(0, 1fr) 424px; }
.kk-esg--flip .kk-esg__letter { order: 2; }
.kk-esg__letter { display: grid; place-items: center; width: 424px; max-width: 100%; aspect-ratio: 424 / 278; background: var(--kk-tile); color: var(--kk-ink); font-size: 12.5rem; line-height: 1; font-weight: 400; }
.kk-esg__copy { max-width: 539px; }
.kk-esg__copy h2 { font-size: 2rem; line-height: 1.25; color: var(--kk-g72); }
.kk-esg__copy p { margin-top: 24px; font-size: 1.25rem; line-height: 1.4; color: var(--kk-g101); }
.kk-esg__rows { margin-top: 56px; border-top: 1px solid var(--kk-g205); }
.kk-esg__row { border-bottom: 1px solid var(--kk-g205); }
.kk-esg__row summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 96px; padding: 16px 16px; list-style: none; cursor: pointer; font-size: 2rem; line-height: 1.25; color: var(--kk-black); }
.kk-esg__row summary::-webkit-details-marker { display: none; }
.kk-esg__row summary .kk-accordion__toggle { border-color: var(--kk-black); color: var(--kk-black); }
.kk-esg__row[open] summary .kk-accordion__toggle { background: var(--kk-black); color: #fff; }
.kk-esg__row[open] summary .kk-accordion__toggle::before { content: "−"; }
.kk-esg__row .kk-accordion__body { padding: 8px 16px 40px; grid-template-columns: 500px minmax(0, 1fr); }
.kk-esg__row .kk-accordion__body p { color: var(--kk-black); }
.kk-esg__row .kk-accordion__body img { width: 500px; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* --- a quote with the person ----------------------------------------------------- */
.kk-quote-person { padding: 152px 0; background: #fff; }
.kk-quote-person .kk-container { display: grid; grid-template-columns: 424px minmax(0, 1fr); gap: 36px; align-items: start; }
.kk-quote-person--flip .kk-container { grid-template-columns: minmax(0, 1fr) 424px; }
.kk-quote-person--flip .kk-quote-person__who { order: 2; }
.kk-quote-person__who img { width: 309px; height: 309px; object-fit: cover; }
.kk-quote-person__name { display: block; margin-top: 24px; font-size: 2rem; line-height: 1.25; }
.kk-quote-person__role { margin-top: 8px; font-size: 1rem; line-height: 1.5; color: var(--kk-g154); }
.kk-quote-person__text { color: var(--kk-black); }

/* --- the pale teal tiles ------------------------------------------------------------- */
.kk-tiles { padding: 152px 0; background: var(--kk-teal-pale); }
.kk-tiles__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; margin: 64px 0 0; padding: 0; list-style: none; }
.kk-tile { position: relative; display: block; aspect-ratio: 539 / 360; overflow: hidden; color: #fff; text-decoration: none; background: var(--kk-black); }
.kk-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.kk-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.6) 100%); }
.kk-tile h3 { position: absolute; top: 32px; left: 32px; z-index: 1; color: #fff; }
.kk-tile__tag { position: absolute; left: 32px; bottom: 32px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 9999px; background: #fff; color: var(--kk-black); font-size: 0.875rem; font-weight: 500; }

/* --- the news list: one featured, then the cards ---------------------------------- */
.kk-newslist { padding: 152px 0; background: var(--kk-tile); }
.kk-newslist__featured { display: grid; grid-template-columns: minmax(0, 1fr) 355px; gap: 36px; align-items: start; padding-bottom: 64px; }
.kk-newslist__featured .kk-news__meta { padding: 0 0 16px; }
.kk-newslist__featured h2 { color: var(--kk-ink); }
.kk-newslist__featured .kk-pill { margin-top: 32px; }
.kk-newslist__featured img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.kk-newslist .kk-news { padding: 0; background: transparent; }
.kk-newslist .kk-news__inner { width: 100%; }
.kk-newslist .kk-news__cell:nth-child(n) { display: block; }
.kk-newslist__more { display: flex; justify-content: center; gap: 16px; margin-top: 64px; }

/* --- "Get to know us": three ways in ------------------------------------------------ */
.kk-social { padding: 152px 0; background: var(--kk-g248); }
.kk-social h2 { color: var(--kk-ink); }
.kk-social__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; margin: 56px 0 0; padding: 0; list-style: none; }
.kk-social__cell { padding-top: 24px; border-top: 1px solid var(--kk-g205); }
.kk-social__icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--kk-ink); border-radius: 50%; color: var(--kk-ink); }
.kk-social__icon svg { width: 18px; height: 18px; }
.kk-social__cell .kk-pill { margin-top: 24px; height: 48px; }
.kk-social__cell .kk-pill__mark { width: 32px; height: 32px; }

/* --- a person to contact --------------------------------------------------------- */
.kk-person-contact { padding: 152px 0; background: #fff; }
.kk-person-contact .kk-container { display: grid; grid-template-columns: minmax(0, 1fr) 539px; gap: 36px; align-items: start; }
.kk-person-contact__role { margin-top: 16px; font-size: 1.25rem; line-height: 1.4; color: var(--kk-g101); }
.kk-person-contact__links { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
.kk-person-contact__links a { font-size: 1.5rem; line-height: 1.334; color: var(--kk-black); text-decoration: underline; text-underline-offset: 6px; }
.kk-person-contact__media { width: 539px; max-width: 100%; aspect-ratio: 1; overflow: hidden; }
.kk-person-contact__media img { width: 100%; height: 100%; object-fit: cover; }

/* --- Careers: "We are" and the numbered list ---------------------------------------- */
.kk-why { padding: 152px 0 172px; background: #fff; }
.kk-why__label { font-size: 1.5rem; line-height: 1.334; color: var(--kk-black); }
.kk-why__grid { display: grid; grid-template-columns: 539px minmax(0, 1fr); gap: 36px; margin-top: 56px; align-items: start; }
.kk-why__big { font-size: clamp(5rem, 11vw, 10rem); line-height: 1; color: var(--kk-teal-deep); position: sticky; top: 160px; }
.kk-why__list { margin: 0; padding: 0; list-style: none; }
.kk-why__item { padding: 40px 0; border-top: 1px solid var(--kk-g205); }
.kk-why__item:last-child { border-bottom: 1px solid var(--kk-g205); }
.kk-why__num { display: block; font-size: 1rem; line-height: 1.5; color: var(--kk-teal-deep); }
.kk-why__item h3 { margin-top: 8px; font-size: 2rem; line-height: 1.25; color: var(--kk-teal-deep); }
.kk-why__item p { margin-top: 16px; max-width: 539px; font-size: 1.5rem; line-height: 1.334; color: var(--kk-g72); }

/* --- Careers: the dark values band --------------------------------------------------- */
.kk-values-band { padding: 152px 0; background: var(--kk-black); color: #fff; }
.kk-values-band .kk-container { display: grid; grid-template-columns: 424px minmax(0, 1fr); gap: 36px; align-items: start; }
.kk-values-band h2 { color: var(--kk-teal); }
.kk-values-band__intro { margin-top: 24px; font-size: 2rem; line-height: 1.375; color: var(--kk-g205); }
.kk-values-band__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 56px; }
.kk-values-band__list h3 { color: var(--kk-g248); }
.kk-values-band__list p { margin-top: 16px; font-size: 1.25rem; line-height: 1.4; color: var(--kk-g205); }

/* --- Contacts: the headquarters block and a form ------------------------------------ */
.kk-hq { padding: 152px 0; background: var(--kk-g248); }
.kk-hq__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; margin-top: 56px; }
.kk-hq__label { display: block; font-size: 1rem; line-height: 1.5; color: var(--kk-g101); }
.kk-hq__value { margin-top: 8px; font-size: 2rem; line-height: 1.375; color: var(--kk-ink); }
.kk-hq__value a { color: inherit; text-decoration: none; }
.kk-hq__value a:hover { text-decoration: underline; text-underline-offset: 6px; }
.kk-map { aspect-ratio: 1440 / 560; background: var(--kk-g240); }
.kk-map iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(1); }
.kk-form-section { padding: 152px 0; background: #fff; }
.kk-form-section__lead { margin-top: 24px; max-width: 640px; color: var(--kk-g101); }
.kk-form { margin-top: 56px; max-width: 884px; }
.kk-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 36px; }
.kk-form__cell--wide { grid-column: 1 / -1; }
.kk-form label { display: block; font-size: 0.875rem; line-height: 1.43; color: var(--kk-g101); }
.kk-form input, .kk-form select, .kk-form textarea { display: block; width: 100%; margin-top: 8px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--kk-g205); border-radius: 0; background: transparent; color: var(--kk-black); font-family: var(--kk-font); font-size: 1.125rem; line-height: 1.5; }
.kk-form input:focus, .kk-form select:focus, .kk-form textarea:focus { outline: none; border-bottom-color: var(--kk-teal-deep); }
.kk-form textarea { min-height: 140px; resize: vertical; }
.kk-form__consent { display: flex; align-items: flex-start; gap: 12px; margin-top: 32px; font-size: 0.875rem; line-height: 1.5; color: var(--kk-g101); }
.kk-form__consent input { width: 18px; height: 18px; margin: 2px 0 0; }
.kk-form__submit { margin-top: 40px; border: 1px solid var(--kk-teal); background: transparent; cursor: pointer; }
.kk-form .kk-field__error { margin-top: 8px; font-size: 0.875rem; color: #B42318; }
.kk-form .cpg-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

@media (max-width: 63.999rem) {
  .kk-intro, .kk-duo, .kk-assets, .kk-figures, .kk-bizlist, .kk-cards, .kk-logos, .kk-film, .kk-quote-person, .kk-tiles, .kk-newslist, .kk-social, .kk-person-contact, .kk-why, .kk-values-band, .kk-hq, .kk-form-section { padding-block: 88px; }
  .kk-pillar { min-height: 0; padding: 72px 0; }
  .kk-cta-band { min-height: 0; padding: 72px 0; }
  .kk-hero--tile { min-height: 0; padding: 180px 0 72px; }
  .kk-hero--tile .kk-container, .kk-feature__body, .kk-quote-person .kk-container, .kk-quote-person--flip .kk-container, .kk-person-contact .kk-container, .kk-why__grid, .kk-values-band .kk-container, .kk-newslist__featured, .kk-form__grid, .kk-esg__head, .kk-esg--flip .kk-esg__head { grid-template-columns: minmax(0, 1fr); }
  .kk-figures__row, .kk-hq__grid, .kk-social__grid, .kk-strip { grid-template-columns: minmax(0, 1fr); }
  .kk-logos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kk-tiles__grid, .kk-bizlist__grid { grid-template-columns: minmax(0, 1fr); }
  .kk-asset { aspect-ratio: auto; min-height: 420px; }
  .kk-asset__body, .kk-card__body { padding: 32px 32px 96px; }
  .kk-esg__letter { width: 100%; font-size: 8rem; }
  .kk-esg--flip .kk-esg__letter { order: 0; }
  .kk-quote-person--flip .kk-quote-person__who { order: 0; }
  .kk-why__big { position: static; }
  .kk-hero__tileimg, .kk-person-contact__media { width: 100%; }
  .kk-feature__body { margin-top: 56px; }
  .kk-esg__row .kk-accordion__body { grid-template-columns: minmax(0, 1fr); }
}

/* --- the home page's photograph band, built to the reference's "Diversified
   Ventures": 592px tall, the picture under a 50% black, the title in teal,
   the line at 32/40, the pill 40px under. --- */
.kk-venture { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 592px; padding: 116px 0; color: #fff; }
.kk-venture__media { position: absolute; inset: 0; z-index: -1; background: var(--kk-black); }
.kk-venture__media img { width: 100%; height: 100%; object-fit: cover; }
.kk-venture__media::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.kk-venture h2 { color: var(--kk-teal); }
.kk-venture__text { margin-top: 36px; font-size: 2rem; line-height: 1.25; }
.kk-venture .kk-pill { margin-top: 40px; }
@media (max-width: 63.999rem) {
  .kk-venture { min-height: 0; padding: 72px 0; }
  .kk-venture__text { margin-top: 24px; font-size: 1.375rem; line-height: 1.4; }
}
.kk-feature__names { display: flex; flex-wrap: wrap; gap: 24px; margin: 0; padding: 0; list-style: none; color: var(--kk-g205); font-size: 1rem; }
.kk-person-contact--tinted { background: var(--kk-tile); }
.kk-esg--first { padding-top: 96px; }
.kk-esg__rowtitle { font: inherit; margin: 0; }
.kk-esg__row .kk-accordion__body img.kk-esg__logo { object-fit: contain; background: #2C2C2C; padding: 32px; }
/* The About band: 140px of padding, the copy in an 884px column, the pill 48px under. */
.kk-venture--about { min-height: 0; padding: 140px 0; }
.kk-venture--about .kk-container > * { max-width: 884px; }
.kk-venture--about h2 { margin-bottom: 36px; }
.kk-venture--about .kk-venture__text { margin-top: 0; }
.kk-venture--about .kk-pill { margin-top: 48px; }
/* A long label wraps on a phone rather than pushing the page wider. */
@media (max-width: 40rem) {
  .kk-pill { white-space: normal; height: auto; min-height: 56px; text-align: left; }
  .kk-pill > span:last-child { padding: 4px 0; }
}

/* ==========================================================================
   SPECIFICITY — the shared layer styles paragraphs, lists and links by
   element under a body class, which outranks a lone class here; these
   restate the kk rules that lost, at a weight that wins.
   ========================================================================== */
.cpg-body--holding .kk-page a { color: inherit; }
.cpg-body--holding .kk-page :is(.kk-card__body, .kk-asset__body, .kk-pillar, .kk-band, .kk-duo, .kk-values, .kk-founder-band, .kk-foundation, .kk-values-band, .kk-bizlist) p { color: inherit; }
.cpg-body--holding .kk-page .kk-card__body p,
.cpg-body--holding .kk-page .kk-asset__body p,
.cpg-body--holding .kk-page .kk-pillar p { color: #fff; }
.cpg-body--holding .kk-page .kk-duo p,
.cpg-body--holding .kk-page .kk-values p { color: var(--kk-g233); }
.cpg-body--holding .kk-page .kk-hero__lead { margin-top: 56px; }
.cpg-body--holding .kk-page .kk-founder-hero__lead { margin-top: auto; }
.cpg-body--holding .kk-page .kk-history__lead { margin-top: 24px; }
.cpg-body--holding .kk-page .kk-intro__text { margin-top: 40px; }
.cpg-body--holding .kk-page .kk-person-feature__text { margin-top: 36px; }
.cpg-body--holding .kk-page .kk-people__role { margin-top: 8px; }
.cpg-body--holding .kk-page .kk-assets__lead { margin-top: 24px; }
.cpg-body--holding .kk-page .kk-bizlist__lead { margin-top: 24px; }
.cpg-body--holding .kk-page .kk-quote-person__role { margin-top: 8px; }
.cpg-body--holding .kk-page .kk-person-contact__role { margin-top: 16px; }
.cpg-body--holding .kk-page .kk-values-band__intro { margin-top: 24px; }
.cpg-body--holding .kk-page .kk-hq__value { margin-top: 8px; }
.cpg-body--holding .kk-page .kk-form-section__lead { margin-top: 24px; }
.cpg-body--holding .kk-page .kk-article__lead { margin-top: 40px; }
.cpg-body--holding .kk-page .kk-venture__text { margin-top: 36px; }
.cpg-body--holding .kk-page .kk-venture--about .kk-venture__text { margin-top: 0; }
.cpg-body--holding .kk-page .kk-assets__list { margin: 64px 0 0; padding: 0; }
.cpg-body--holding .kk-page .kk-cards__list { margin: 64px 0 0; padding: 0; }
.cpg-body--holding .kk-page .kk-logos__grid { margin: 56px 0 0; padding: 0; }
.cpg-body--holding .kk-page .kk-tiles__grid { margin: 64px 0 0; padding: 0; }
.cpg-body--holding .kk-page .kk-social__grid { margin: 56px 0 0; padding: 0; }
.cpg-body--holding .kk-page .kk-bizlist__grid { margin: 56px 0 0; padding: 0; }
.cpg-body--holding .kk-page .kk-projects { margin: 0; padding: 152px 0 0; }
.cpg-body--holding .kk-page .kk-timeline__list,
.cpg-body--holding .kk-page .kk-why__list,
.cpg-body--holding .kk-page .kk-values-band__list,
.cpg-body--holding .kk-page .kk-people__grid,
.cpg-body--holding .kk-page .kk-feature__names { margin: 0; padding: 0; }
.cpg-body--holding .kk-page .kk-people__grid { margin: 0; }
.cpg-body--holding .kk-page .kk-esg__copy p { margin-top: 24px; }
.cpg-body--holding .kk-page .kk-pillar p,
.cpg-body--holding .kk-page .kk-duo p,
.cpg-body--holding .kk-page .kk-values p,
.cpg-body--holding .kk-page .kk-fact p,
.cpg-body--holding .kk-page .kk-card__body p,
.cpg-body--holding .kk-page .kk-asset__body p { margin-top: 24px; }
.cpg-body--holding .kk-page .kk-feature__body p,
.cpg-body--holding .kk-page .kk-timeline__item h3 { margin-top: 32px; }
.cpg-body--holding .kk-page .kk-timeline__item h3 { margin-top: 0; margin-bottom: 32px; }
.cpg-body--holding .kk-page .kk-founder-band h2 { margin-bottom: 36px; }
.cpg-body--holding .kk-page .kk-project__text h2 { margin-bottom: 32px; }
.cpg-body--holding .kk-page .kk-join h2 { margin-bottom: 40px; }
.cpg-body--holding .kk-page .kk-people h2 { margin-bottom: 64px; }
.cpg-body--holding .kk-page .kk-person-feature h2 { margin-bottom: 24px; }
.cpg-body--holding .kk-page .kk-why__item h3 { margin-top: 8px; }
.cpg-body--holding .kk-page .kk-why__item p { margin-top: 16px; }
.cpg-body--holding .kk-page .kk-values-band__list p { margin-top: 16px; }
.cpg-body--holding .kk-page .kk-stats__tile strong { margin-bottom: 24px; }
.cpg-body--holding .kk-page .kk-quote-person__text { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); line-height: 1.182; }
.cpg-body--holding .kk-page .kk-venture--about h2 { margin-bottom: 36px; }
@media (max-width: 63.999rem) {
  .cpg-body--holding .kk-page .kk-hero__lead { margin-top: 32px; }
  .cpg-body--holding .kk-page .kk-projects { padding-top: 64px; }
}
/* the ordinal tiles of the responsibility page */
.kk-esg__letter--num { font-size: 7rem; letter-spacing: -0.02em; }
.cpg-body--holding .kk-page .kk-intro__body { margin-top: 32px; max-width: 640px; color: var(--kk-g101); }
.cpg-body--holding .kk-news__head:has(> span:only-child) { display: none; }
/* The card body is a span inside a link; as a block its padding holds. */
.cpg-body--holding .kk-page .kk-card__body { display: block; }
.cpg-body--holding .kk-page .kk-card { display: flex; flex-direction: column; justify-content: flex-end; }