/* ==========================================================================
   knowmad mood Germany — main stylesheet
   Brand colours taken from knowmadmood.com and the knowmad mood logo.
   All classes use the "km-" prefix so they do not clash with OceanWP.
   ========================================================================== */

/* Fonts: IBM Plex Sans, self-hosted (SIL Open Font License). No request to Google,
   which German courts have treated as a GDPR issue. */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Tokens ------------------------------------------------------------------ */
:root {
  --km-ink: #181232;          /* logo colour: text, dark sections */
  --km-orange: #F77E21;       /* primary action */
  --km-orange-hover: #E66D12;
  --km-raspberry: #D61C4E;
  --km-yellow: #FAC213;
  --km-white: #FFFFFF;
  --km-grey-50: #F6F6F6;      /* light bands */
  --km-grey-200: #DEDFE0;     /* borders */
  --km-muted: #67637A;        /* secondary text on white, AA */
  --km-muted-on-ink: rgba(255, 255, 255, .72);

  --km-font: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;

  --km-wrap: none;                       /* full width of the window */
  --km-gutter: clamp(20px, 4vw, 72px);   /* side margins */
  --km-section: clamp(80px, 9vw, 128px);
  --km-radius: 8px;
}

/* Base -------------------------------------------------------------------- */
.km, .km *, .km *::before, .km *::after { box-sizing: border-box; }

.km {
  margin: 0;
  background: var(--km-white);
  color: var(--km-ink);
  font-family: var(--km-font);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* :where() keeps resets at zero specificity so component classes always win */
.km :where(h1, h2, h3, h4, p, ul, ol, figure, address, dl, dd, fieldset) { margin: 0; padding: 0; }
.km :where(fieldset) { border: 0; min-width: 0; }
.km :where(ul, ol) { list-style: none; }
.km :where(a) { color: inherit; }
.km :where(img, svg) { display: block; max-width: 100%; }

.km [hidden] { display: none !important; } /* wins over display rules on components */
.km :focus-visible { outline: 3px solid var(--km-orange); outline-offset: 3px; }

.km-sr {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.km-skip {
  position: absolute; left: 16px; top: -64px; z-index: 100;
  padding: 12px 18px; border-radius: 6px;
  background: var(--km-ink); color: var(--km-white); font-weight: 600; text-decoration: none;
}
.km-skip:focus { top: 12px; }

.km-wrap { width: 100%; max-width: var(--km-wrap); margin: 0 auto; padding: 0 var(--km-gutter); }

.km-h2 {
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.km-h3 { font-size: clamp(1.35rem, 1.9vw, 1.6rem); line-height: 1.25; font-weight: 600; }
.km-lead { font-size: 1.2rem; color: var(--km-muted); max-width: 36em; }

/* Buttons and links ------------------------------------------------------- */
.km-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 20px;
  border: 1.5px solid transparent; border-radius: 6px;
  font: inherit; font-size: 1rem; font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.km-btn--large { min-height: 54px; padding: 0 26px; }
.km-btn--primary { background: var(--km-orange); color: var(--km-ink); }
.km-btn--primary:hover { background: var(--km-orange-hover); }
.km-btn--outline { border-color: currentColor; color: inherit; background: transparent; }
.km-btn--outline:hover { background: var(--km-white); color: var(--km-ink); border-color: var(--km-white); }
.km-btn--outline-ink { border-color: var(--km-ink); color: var(--km-ink); background: transparent; }
.km-btn--outline-ink:hover { background: var(--km-ink); color: var(--km-white); }

.km-textlink {
  --km-underline: var(--km-orange);
  display: inline-block;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--km-underline);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  transition: text-decoration-color .15s ease;
}
.km-textlink:hover { --km-underline: currentColor; }

/* Header ------------------------------------------------------------------ */
.km-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--km-white);
  border-bottom: 1px solid var(--km-grey-200);
}
/* WordPress admin bar (logged-in editors): keep the sticky header below it */
.admin-bar .km-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .km-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .km-header { top: 0; } }
.km-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }

.km-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.km-logo img { width: 132px; height: auto; }
.km-logo__region { font-size: .95rem; font-weight: 500; color: var(--km-muted); padding-top: 2px; }

.km-nav { display: flex; align-items: center; gap: 36px; }
.km-nav__list { display: flex; align-items: center; gap: 30px; }
.km-nav__item { position: relative; display: flex; align-items: center; }
.km-nav__link {
  padding: 10px 0; font-size: 1rem; font-weight: 500; text-decoration: none;
  background: linear-gradient(var(--km-orange), var(--km-orange)) left calc(100% - 4px) / 0 2px no-repeat;
  transition: background-size .2s ease;
}
.km-nav__link:hover,
.km-nav__link[aria-current="page"] { background-size: 100% 2px; }

.km-nav__subtoggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-left: 2px;
  border: 0; background: none; color: inherit; cursor: pointer;
}
.km-nav__subtoggle svg { width: 12px; height: 12px; transition: transform .15s ease; }
.km-nav__subtoggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.km-nav__sub {
  position: absolute; top: calc(100% + 18px); left: -16px;
  min-width: 300px; padding: 8px;
  background: var(--km-white);
  border: 1px solid var(--km-grey-200); border-radius: var(--km-radius);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.km-nav__sub::before { /* keeps the menu open while the pointer crosses the gap */
  content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px;
}
.km-nav__sub a { display: block; padding: 10px 12px; border-radius: 6px; font-size: .97rem; text-decoration: none; }
.km-nav__sub a:hover { background: var(--km-grey-50); }
.km-nav__item--has-sub:hover .km-nav__sub,
.km-nav__item--has-sub:focus-within .km-nav__sub,
.km-nav__item--has-sub.is-open .km-nav__sub { opacity: 1; visibility: visible; transform: none; }

.km-burger {
  display: none; position: relative;
  width: 44px; height: 44px; border: 0; background: none; color: inherit; cursor: pointer;
}
.km-burger__bars, .km-burger__bars::before, .km-burger__bars::after {
  position: absolute; left: 11px; width: 22px; height: 2px; background: currentColor;
  transition: transform .2s ease, top .2s ease, background-color .2s ease;
}
.km-burger__bars { top: 21px; }
.km-burger__bars::before { content: ""; left: 0; top: -7px; }
.km-burger__bars::after { content: ""; left: 0; top: 7px; }
.km-burger[aria-expanded="true"] .km-burger__bars { background: transparent; }
.km-burger[aria-expanded="true"] .km-burger__bars::before { top: 0; transform: rotate(45deg); }
.km-burger[aria-expanded="true"] .km-burger__bars::after { top: 0; transform: rotate(-45deg); }

/* Home hero --------------------------------------------------------------- */
.km-hero { padding: clamp(56px, 7vw, 104px) 0 clamp(16px, 2vw, 32px); overflow: hidden; }
.km-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}
.km-hero__title {
  font-size: clamp(2.1rem, 3.6vw, 3.4rem);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.025em;
  max-width: 19em;
  text-wrap: balance;
}
.km-hero__lead { margin-top: 28px; max-width: 34em; font-size: 1.2rem; color: var(--km-muted); }
.km-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 40px; }

/* The mark: four parts of the logo symbol, each in a brand colour.
   On load they slide in along the mark's own slant, one after another. */
.km-mark { width: 100%; max-width: 520px; height: auto; justify-self: end; overflow: visible; }
.km-mark__part {
  transform-box: fill-box;
  animation: km-mark-in .7s cubic-bezier(.2, .7, .2, 1) both;
}
.km-mark__part--1 { animation-delay: .05s; }
.km-mark__part--2 { animation-delay: .18s; }
.km-mark__part--3 { animation-delay: .31s; }
.km-mark__part--4 { animation-delay: .5s; animation-name: km-dot-in; }

@keyframes km-mark-in {
  from { opacity: 0; transform: translate(-14%, 30%); }
  to   { opacity: 1; transform: none; }
}
@keyframes km-dot-in {
  from { opacity: 0; transform: scale(.2); }
  to   { opacity: 1; transform: none; }
}

/* Inner page header --------------------------------------------------------
   Dark band on every inner page: eyebrow, title and lead on the left, a
   numbered index of the page on the right (direct contact rows on Contact us).
   The page's colour (--km-accent) marks the eyebrow tick, the arrows and the
   hover line. */
.km-pagehead {
  --km-accent: var(--km-orange);
  position: relative; overflow: hidden;
  padding: clamp(56px, 6.5vw, 96px) 0 clamp(56px, 6vw, 88px);
  background: var(--km-ink); color: var(--km-white);
}
.km-pagehead--raspberry { --km-accent: var(--km-raspberry); }
.km-pagehead--yellow { --km-accent: var(--km-yellow); }
.km-pagehead--ink { --km-accent: var(--km-white); }
.km-pagehead__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: clamp(40px, 6vw, 112px);
}
.km-pagehead__eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
  font-size: .85rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--km-muted-on-ink);
}
.km-pagehead__eyebrow::before { /* one bar of the logo mark */
  content: ""; flex: none; width: 12px; height: 18px;
  background: var(--km-accent);
  clip-path: polygon(0 0, 45% 0, 100% 100%, 55% 100%);
}
.km-pagehead__title {
  max-width: 14em;
  font-size: clamp(2.4rem, 4.8vw, 4rem);
  line-height: 1.06; font-weight: 600; letter-spacing: -0.025em;
  text-wrap: balance;
}
.km-pagehead__lead { margin-top: 24px; max-width: 36em; font-size: 1.15rem; color: var(--km-muted-on-ink); }

.km-index__label {
  margin-bottom: 14px;
  font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--km-muted-on-ink);
}
.km-index__list { border-bottom: 1px solid rgba(255, 255, 255, .16); counter-reset: km-index; }
.km-index__list > li { counter-increment: km-index; }
.km-index__row {
  position: relative;
  display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto 16px;
  align-items: baseline; gap: 16px;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
  color: var(--km-white); text-decoration: none;
}
.km-index__row::before { /* hover line in the page colour */
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: var(--km-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.km-index--plain .km-index__row { grid-template-columns: minmax(0, 1fr) auto 16px; }
.km-index__row:hover::before, .km-index__row:focus-visible::before { transform: scaleX(1); }
.km-index__num::before { content: counter(km-index, decimal-leading-zero); }
.km-index__num { font-size: .85rem; font-variant-numeric: tabular-nums; color: var(--km-muted-on-ink); }
.km-index__name { font-size: 1.15rem; font-weight: 600; overflow-wrap: anywhere; }
.km-index__meta { font-size: .9rem; color: var(--km-muted-on-ink); text-align: right; }
.km-index__arrow { align-self: center; color: var(--km-accent); transition: transform .2s ease; }
.km-index__row:hover .km-index__arrow { transform: translateY(3px); }
.km-index__row[href^="mailto:"]:hover .km-index__arrow,
.km-index__row[href^="tel:"]:hover .km-index__arrow { transform: translateX(3px); }

/* Generic section ---------------------------------------------------------- */
.km-section { padding: var(--km-section) 0; scroll-margin-top: 76px; }
.km-section--grey { background: var(--km-grey-50); }
.km-section--ink { background: var(--km-ink); color: var(--km-white); }
.km-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.km-section--ink + .km-contact { border-top: 1px solid rgba(255, 255, 255, .14); }
.km-contact__actions .km-btn { min-width: 200px; }
.km :where(legend) { padding: 0; }
.km-section__intro { margin-top: 16px; max-width: 36em; color: var(--km-muted); }
.km-section--ink .km-section__intro { color: var(--km-muted-on-ink); }

/* Two-column: heading left, content right */
.km-split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 32px clamp(32px, 6vw, 96px);
}
.km-prose p { max-width: 38em; }
.km-prose p + p { margin-top: 1.1em; }
.km-prose--large p { font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.5; }

/* Facts ------------------------------------------------------------------- */
.km-facts { background: var(--km-grey-50); padding: clamp(64px, 7vw, 96px) 0; }
.km-facts__text {
  max-width: 30em;
  font-size: clamp(1.4rem, 2.3vw, 1.95rem);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
}

/* Figures row (about us) */
.km-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 56px; }
.km-figures dt { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1; font-weight: 600; letter-spacing: -0.02em; }
.km-figures dd { margin-top: 10px; color: var(--km-muted); max-width: 14em; }
.km-figures div { padding-top: 20px; border-top: 2px solid var(--km-ink); }

/* Service catalogue (what we do) ------------------------------------------ */
.km-themes { display: flex; flex-direction: column; }
.km-theme {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: 24px clamp(32px, 5vw, 80px);
  padding: 40px 0; border-top: 1px solid var(--km-grey-200);
  scroll-margin-top: 100px;
}
.km-theme:first-child { border-top: 0; padding-top: 8px; }
.km-theme__label p { margin-top: 6px; color: var(--km-muted); font-size: .95rem; }
.km-svcgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.km-svc {
  display: flex; flex-direction: column; gap: 12px;
  padding: 24px; border-radius: var(--km-radius);
  background: var(--km-white); border: 1px solid var(--km-grey-200);
}
.km-svc__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.km-svc__name { font-size: 1.15rem; line-height: 1.3; font-weight: 600; }
.km-svc p { color: var(--km-muted); font-size: .97rem; }
.km-tag {
  flex: none; padding: 3px 9px; border-radius: 4px;
  font-size: .8rem; font-weight: 600; line-height: 1.5; white-space: nowrap;
}
.km-tag--workshop { background: #FEF3CF; color: #6B4E00; }
.km-tag--consulting { background: #FDE5D3; color: #8A3D00; }
.km-tag--it { background: var(--km-ink); color: var(--km-white); }

/* What we do: focus areas ------------------------------------------------- */
.km-areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.km-area { --km-accent: var(--km-orange); position: relative; padding-top: 28px; border-top: 1px solid var(--km-grey-200); }
.km-area::before { content: ""; position: absolute; left: 0; top: -1px; width: 56px; height: 4px; background: var(--km-accent); }
.km-area--secure { --km-accent: var(--km-raspberry); }
.km-area--run { --km-accent: var(--km-yellow); }
.km-area__num { display: block; font-size: .85rem; font-variant-numeric: tabular-nums; color: var(--km-muted); }
.km-area__title { margin-top: 10px; font-size: 1.45rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
.km-area__text { margin-top: 12px; color: var(--km-muted); }
.km-area__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.km-areachip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1.5px solid var(--km-grey-200); border-radius: 999px;
  font-size: .9rem; font-weight: 600; text-decoration: none; color: var(--km-ink);
  transition: border-color .15s ease;
}
.km-areachip span { font-weight: 400; color: var(--km-muted); font-variant-numeric: tabular-nums; }
.km-areachip:hover { border-color: var(--km-accent); }

/* What we do: service explorer -------------------------------------------- */
.km-section__head--split { align-items: flex-end; flex-wrap: wrap; }
.km-seg { display: inline-flex; flex-wrap: wrap; padding: 4px; gap: 4px; border-radius: 8px; background: var(--km-white); border: 1px solid var(--km-grey-200); }
.km-seg__btn {
  padding: 8px 14px; border: 0; border-radius: 5px; background: none;
  font: inherit; font-size: .92rem; font-weight: 600; color: var(--km-muted); cursor: pointer;
}
.km-seg__btn:hover { color: var(--km-ink); }
.km-seg__btn[aria-pressed="true"] { background: var(--km-ink); color: var(--km-white); }

.km-explorer.is-enhanced { display: grid; grid-template-columns: minmax(220px, 3fr) minmax(0, 9fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.km-explorer:not(.is-enhanced) .km-panels { display: flex; flex-direction: column; gap: 24px; }
.km-tabs { position: sticky; top: 96px; }
.km-tabs__group {
  margin: 22px 0 6px; padding-left: 16px;
  font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--km-muted);
}
.km-tabs__group:first-child { margin-top: 0; }
.km-tab {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 11px 16px; border-left: 3px solid transparent; border-radius: 0 6px 6px 0;
  color: var(--km-ink); text-decoration: none; font-size: 1rem;
  transition: background-color .15s ease;
}
.km-tab:hover { background: rgba(24, 18, 50, .04); }
.km-tab[aria-selected="true"] { background: var(--km-white); border-left-color: var(--km-orange); font-weight: 600; box-shadow: 0 1px 2px rgba(24, 18, 50, .06); }
.km-tab__count { font-size: .85rem; font-weight: 400; color: var(--km-muted); font-variant-numeric: tabular-nums; }
.km-tab.is-empty { opacity: .45; }

.km-panel { padding: clamp(24px, 3vw, 40px); border-radius: var(--km-radius); background: var(--km-white); border: 1px solid var(--km-grey-200); }
.km-panel:focus { outline: none; }
.km-panel__area { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--km-muted); }
.km-panel__title { margin-top: 8px; font-size: clamp(1.5rem, 2.2vw, 1.9rem); line-height: 1.15; font-weight: 600; letter-spacing: -0.015em; }
.km-panel__intro { margin-top: 8px; color: var(--km-muted); }
.km-svclist { margin-top: 24px; border-bottom: 1px solid var(--km-grey-200); }
.km-svcrow { border-top: 1px solid var(--km-grey-200); scroll-margin-top: 120px; }
.km-svcrow summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: start; gap: 16px 24px;
  padding: 22px 0; list-style: none; cursor: pointer;
}
.km-svcrow summary::-webkit-details-marker { display: none; }
.km-svcrow__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px 24px; padding: 24px 0; }
.km-svcrow--static .km-svcrow__outcome { margin-top: 4px; }
.km-svcrow.is-target { animation: km-flash 1.6s ease; }
@keyframes km-flash { 0%, 30% { background: #FEF3CF; } 100% { background: transparent; } }
.km-svcrow__text { display: grid; gap: 4px; }
.km-svcrow__name { font-size: 1.12rem; font-weight: 600; }
.km-svcrow summary:hover .km-svcrow__name, .km-svcrow details[open] .km-svcrow__name { text-decoration: underline; text-decoration-color: var(--km-orange); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.km-svcrow__tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.km-svcrow__chev { color: var(--km-muted); transition: transform .2s ease; }
.km-svcrow details[open] .km-svcrow__chev { transform: rotate(180deg); }
.km-svcrow__body {
  display: grid; gap: 28px; justify-items: start;
  margin: -4px 0 24px; padding: clamp(20px, 2.4vw, 32px);
  border-radius: var(--km-radius); background: var(--km-grey-50);
}
.km-svcrow__intro { max-width: 52em; }
.km-svcrow__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px clamp(28px, 4vw, 56px); width: 100%; }
.km-svcrow__label {
  margin-bottom: 12px;
  font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--km-muted);
}
.km-svcrow__list li { position: relative; padding-left: 22px; font-size: .96rem; line-height: 1.5; }
.km-svcrow__list li + li { margin-top: 9px; }
.km-svcrow__list li::before { /* one bar of the logo mark */
  content: ""; position: absolute; left: 2px; top: .38em; width: 7px; height: 11px;
  background: var(--km-orange); clip-path: polygon(0 0, 45% 0, 100% 100%, 55% 100%);
}
.km-svcrow__list--check li::before {
  top: .32em; width: 11px; height: 6px; background: none; clip-path: none;
  border-left: 2px solid var(--km-orange); border-bottom: 2px solid var(--km-orange); transform: rotate(-45deg);
}
.km-svcrow__list strong { font-weight: 600; }
.km-svcrow__how { width: 100%; }
.km-svcrow__steps { counter-reset: km-step; border-bottom: 1px solid var(--km-grey-200); }
.km-svcrow__steps li {
  counter-increment: km-step;
  display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 4px 24px;
  padding: 12px 0; border-top: 1px solid var(--km-grey-200); font-size: .95rem; line-height: 1.5;
}
.km-svcrow__steps strong { font-weight: 600; }
.km-svcrow__steps strong::before { content: counter(km-step, decimal-leading-zero); margin-right: 8px; font-weight: 400; color: var(--km-muted); font-variant-numeric: tabular-nums; }
.km-svcrow__steps span { color: var(--km-muted); }
.km-svcrow__outcome { max-width: 44em; color: var(--km-muted); font-size: .98rem; }
.km-svcrow__tags, .km-svcrow__chev { margin-top: 3px; }
.km-panel__empty { margin-top: 20px; color: var(--km-muted); }

.km-start {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px clamp(32px, 5vw, 80px);
  margin-top: clamp(40px, 5vw, 64px); padding: clamp(28px, 4vw, 48px);
  border-radius: var(--km-radius); background: var(--km-ink); color: var(--km-white);
  position: relative; overflow: hidden;
}
.km-start::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--km-orange); }
.km-start__eyebrow { font-size: .85rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--km-orange); }
.km-start__title { margin-top: 10px; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; font-weight: 600; letter-spacing: -0.015em; }
.km-start__text { margin-top: 12px; max-width: 40em; color: var(--km-muted-on-ink); }
.km-start__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.km-start .km-textlink { color: var(--km-white); }

.km-steps__svc { margin-top: 14px; font-size: .9rem; color: var(--km-muted-on-ink); }
.km-steps__svc a { color: var(--km-white); text-decoration: underline; text-decoration-color: var(--km-orange); text-underline-offset: 4px; }

/* Partner page (JFrog) ---------------------------------------------------- */
.km-jhero { padding: clamp(48px, 6vw, 96px) 0 clamp(56px, 6vw, 96px); }
.km-jhero__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.km-lockup { display: inline-flex; align-items: center; gap: 20px; padding: 10px 0; margin-bottom: 36px; }
.km-lockup img { height: 32px; width: auto; }
.km-lockup img + .km-lockup__divider + img { height: 34px; }
.km-lockup__divider { width: 1px; height: 36px; background: var(--km-grey-200); }
.km-jhero__title { max-width: 16em; font-size: clamp(2.2rem, 4.2vw, 3.6rem); line-height: 1.05; font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; }
.km-jhero__lead { margin-top: 24px; max-width: 34em; font-size: 1.2rem; color: var(--km-muted); }
.km-jhero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 36px; }
.km-jcard { position: relative; padding: clamp(28px, 3vw, 40px); border-radius: var(--km-radius); background: var(--km-ink); color: var(--km-white); overflow: hidden; }
.km-jcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--km-orange); }
.km-jcard__eyebrow { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--km-orange); }
.km-jcard__title { margin-top: 10px; font-size: 1.45rem; line-height: 1.2; font-weight: 600; }
.km-jcard__list { margin-top: 20px; display: grid; gap: 12px; }
.km-jcard__list li { position: relative; padding-left: 26px; color: var(--km-muted-on-ink); line-height: 1.5; }
.km-jcard__list li::before {
  content: ""; position: absolute; left: 2px; top: .38em; width: 11px; height: 6px;
  border-left: 2px solid var(--km-orange); border-bottom: 2px solid var(--km-orange); transform: rotate(-45deg);
}

.km-offers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.km-offer { display: flex; flex-direction: column; gap: 12px; padding: 28px 24px; border-radius: var(--km-radius); background: var(--km-white); border: 1px solid var(--km-grey-200); }
.km-offer__num { font-size: .85rem; font-variant-numeric: tabular-nums; color: var(--km-muted); }
.km-offer__title { font-size: 1.2rem; line-height: 1.25; font-weight: 600; }
.km-offer p { color: var(--km-muted); font-size: .97rem; }
.km-offer__links { margin-top: auto; padding-top: 8px; font-size: .9rem; }
.km-offer__links a { color: var(--km-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--km-orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.km-jsectors { margin-top: clamp(40px, 5vw, 56px); }
.km-jsectors__label { margin-bottom: 14px; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--km-muted); }
.km-jsectors ul { display: flex; flex-wrap: wrap; gap: 10px; }
.km-jsectors li { padding: 8px 14px; border: 1.5px solid var(--km-grey-200); border-radius: 999px; background: var(--km-white); font-size: .92rem; color: var(--km-muted); }
.km-jsectors strong { margin-right: 6px; color: var(--km-ink); font-weight: 600; }

.km-jchecks { display: grid; gap: 0; border-bottom: 1px solid var(--km-grey-200); }
.km-jchecks li { position: relative; padding: 20px 0 20px 40px; border-top: 1px solid var(--km-grey-200); font-size: 1.05rem; }
.km-jchecks li::before {
  content: ""; position: absolute; left: 0; top: 21px; width: 22px; height: 22px;
  border: 2px solid var(--km-ink); border-radius: 4px;
}
.km-jchecks li::after {
  content: ""; position: absolute; left: 6px; top: 27px; width: 10px; height: 5px;
  border-left: 2px solid var(--km-orange); border-bottom: 2px solid var(--km-orange); transform: rotate(-45deg);
}
.km-jchecks__cta { margin-top: 32px; }

.km-pgroups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.km-pgroup { padding: 28px; border-radius: var(--km-radius); background: var(--km-white); border: 1px solid var(--km-grey-200); }
.km-pgroup__title { font-size: 1.25rem; font-weight: 600; line-height: 1.25; }
.km-pgroup__products { margin: 6px 0 12px; font-size: .9rem; font-weight: 600; color: #2F7A3B; }
.km-pgroup p:last-child { color: var(--km-muted); }

.km-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
.km-stat { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 2px solid rgba(255, 255, 255, .7); }
.km-stat__num { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; font-weight: 600; letter-spacing: -0.02em; }
.km-stat__label { color: var(--km-muted-on-ink); font-size: .95rem; }
.km-stat__src { margin-top: auto; font-size: .8rem; color: var(--km-muted-on-ink); text-decoration: underline; text-underline-offset: 3px; }
.km-stat__src:hover { color: var(--km-white); }
.km-partner .km-textlink + .km-textlink { margin-top: 10px; }

/* About: closing statement */
.km-statement {
  margin-top: 1.6em !important; padding-left: 20px;
  border-left: 4px solid var(--km-orange);
  font-weight: 500; color: var(--km-ink);
}

/* Industries -------------------------------------------------------------- */
.km-industries__list { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 48px; }
.km-industries__list h3 {
  position: relative;
  padding-left: 22px;
  font-size: 1.2rem; font-weight: 600; line-height: 1.3;
}
.km-industries__list h3::before {
  /* the small slanted bar of the logo mark */
  content: "";
  position: absolute; left: 0; top: .2em;
  width: 9px; height: 1.05em;
  background: var(--km-yellow);
  clip-path: polygon(0 0, 50% 0, 100% 100%, 50% 100%);
}
.km-industries__list p { padding-left: 22px; color: var(--km-muted); margin-top: 4px; }

/* Client logo strip (what we do). Empty cells are placeholders until approved
   client logos exist. */
.km-clients { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--km-grey-200); }
.km-clients__title { font-size: 1rem; font-weight: 600; color: var(--km-muted); margin-bottom: 20px; }
.km-clients__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.km-clients__list li {
  display: flex; align-items: center; justify-content: center;
  height: 72px; padding: 12px;
  border: 1px dashed var(--km-grey-200); border-radius: 6px;
  font-size: .85rem; color: #9A97A8; text-align: center;
}
.km-clients__list img { max-height: 40px; width: auto; filter: grayscale(1); opacity: .8; }

/* Service groups (what we do) ----------------------------------------------- */
.km-group { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 6vw, 96px); }
.km-group + .km-group { margin-top: clamp(64px, 7vw, 96px); padding-top: clamp(64px, 7vw, 96px); border-top: 1px solid var(--km-grey-200); }
.km-group > div:first-child { position: sticky; top: 108px; align-self: start; }
.km-group__label {
  display: inline-block; margin-bottom: 16px;
  padding: 4px 10px; border-radius: 4px;
  font-size: .9rem; font-weight: 600;
}
.km-group__label--ink { background: var(--km-ink); color: var(--km-white); }
.km-group__label--orange { background: var(--km-orange); color: var(--km-ink); }
.km-group__intro { margin-top: 16px; color: var(--km-muted); max-width: 26em; }

.km-detail { scroll-margin-top: 100px; }
.km-detail + .km-detail { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--km-grey-200); }
.km-detail__title { font-size: 1.45rem; line-height: 1.25; font-weight: 600; }
.km-detail > p { margin-top: 12px; max-width: 36em; }
.km-detail__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; margin-top: 28px; }
.km-detail__cols h4 { font-size: 1rem; font-weight: 600; margin-bottom: 10px; }
.km-checks li { position: relative; padding-left: 20px; color: var(--km-ink); }
.km-checks li + li { margin-top: 8px; }
.km-checks li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--km-orange);
}
.km-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.km-tools li { padding: 4px 10px; border: 1px solid var(--km-grey-200); border-radius: 4px; font-size: .9rem; }

/* How we work: numbered steps are content here (a real sequence), not decoration */
.km-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: km-step; }
.km-steps li { counter-increment: km-step; padding-top: 20px; border-top: 2px solid var(--km-white); }
.km-steps li::before { content: counter(km-step); display: block; font-size: 1rem; font-weight: 600; color: var(--km-orange); margin-bottom: 12px; }
.km-steps h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 8px; }
.km-steps p { color: var(--km-muted-on-ink); }

/* Cards (posts) ----------------------------------------------------------- */
.km-discover__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 24px; }

.km-card { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
/* Placeholder until posts have featured images: a grey tile with one bar
   of the logo mark, coloured by post type. In PHP, output the_post_thumbnail()
   inside .km-card__media and these rules stop showing. */
.km-card__media {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 3; border-radius: var(--km-radius); margin-bottom: 16px;
  background: var(--km-grey-50);
}
.km-section--grey .km-card__media { background: var(--km-white); }
.km-card__media img { width: 100%; height: 100%; object-fit: cover; }
.km-card__media:empty::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 26%; height: 52%; transform: translate(-50%, -50%);
  clip-path: polygon(0 0, 38% 0, 100% 100%, 62% 100%);
  border-radius: 4px;
  transition: transform .3s ease;
}
.km-card__media--insight::after { background: var(--km-orange); }
.km-card__media--news::after { background: var(--km-raspberry); }
.km-card__media--event::after { background: var(--km-yellow); }
.km-card__media--case::after { background: var(--km-ink); }
.km-card:hover .km-card__media:empty::after { transform: translate(-46%, -50%); }

.km-card__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .88rem; color: var(--km-muted); }
.km-card__type { font-size: .88rem; font-weight: 600; color: var(--km-muted); }
.km-card__title {
  margin: 4px 0 10px;
  font-size: 1.1rem; line-height: 1.35; font-weight: 600;
  text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: 2px; text-underline-offset: 4px;
  transition: text-decoration-color .15s ease;
}
.km-card:hover .km-card__title { text-decoration-color: var(--km-orange); }
.km-card__excerpt { color: var(--km-muted); font-size: .97rem; margin-bottom: 12px; }
.km-card__speaker { font-size: .9rem; font-weight: 500; color: var(--km-ink); margin: -4px 0 12px; }
.km-card__date { margin-top: auto; font-size: .9rem; color: var(--km-muted); }

.km-card--more {
  justify-content: flex-end;
  padding: 24px;
  background: var(--km-ink); color: var(--km-white);
  border-radius: var(--km-radius);
  min-height: 220px;
}
.km-card--more .km-card__title { font-size: 1.35rem; margin: 0 0 8px; }
.km-card__more-text { color: var(--km-muted-on-ink); font-size: .95rem; line-height: 1.5; }

/* Loading placeholders, shown until posts.js has the posts ----------------- */
.km-skel { display: block; height: .9em; margin: 8px 0; border-radius: 4px; background: var(--km-grey-200); animation: km-pulse 1.4s ease-in-out infinite; }
.km-skel--short { width: 35%; }
.km-skel--long { width: 85%; }
.km-card--skeleton .km-card__media { background: var(--km-grey-50); animation: km-pulse 1.4s ease-in-out infinite; }
.km-section--grey .km-card--skeleton .km-card__media { background: var(--km-white); }
@keyframes km-pulse { 50% { opacity: .55; } }
.km-featured.is-loading .km-featured__media { animation: km-pulse 1.4s ease-in-out infinite; }
.km-featured.is-loading .km-featured__media::after { display: none; }
.km-filters select:disabled { opacity: .55; cursor: progress; }
.km-filters__group[hidden], [data-km-new] [hidden] { display: none; }

/* News & insights ---------------------------------------------------------- */
.km-newlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }

.km-featured {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 0; overflow: hidden;
  border-radius: var(--km-radius);
  background: var(--km-ink); color: var(--km-white);
  text-decoration: none;
}
.km-featured__media { position: relative; min-height: 380px; background: #231C45; }
.km-featured__media:empty::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 22%; height: 62%; transform: translate(-50%, -50%);
  background: var(--km-orange);
  clip-path: polygon(0 0, 38% 0, 100% 100%, 62% 100%);
  transition: transform .3s ease;
}
.km-featured:hover .km-featured__media:empty::after { transform: translate(-46%, -50%); }
.km-featured__media img { width: 100%; height: 100%; object-fit: cover; }
.km-featured__body { display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(28px, 3.4vw, 48px); }
.km-featured .km-card__meta { color: var(--km-muted-on-ink); }
.km-featured__title {
  margin: 10px 0 14px;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.2; font-weight: 600;
  text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: 2px; text-underline-offset: 6px;
  transition: text-decoration-color .15s ease;
}
.km-featured:hover .km-featured__title { text-decoration-color: var(--km-orange); }
.km-featured__excerpt { color: var(--km-muted-on-ink); }

.km-filters {
  position: sticky; top: 76px; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 20px;
  padding: 16px 0; margin-bottom: 32px;
  background: var(--km-white);
  border-bottom: 1px solid var(--km-grey-200);
}
.km-filters__group { display: flex; flex-direction: column; gap: 6px; }
.km-filters__group label { font-size: .88rem; font-weight: 600; color: var(--km-muted); }
.km-select {
  min-height: 46px; min-width: 220px; padding: 0 40px 0 14px;
  border: 1.5px solid var(--km-grey-200); border-radius: 6px;
  background: var(--km-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8l4-3.5' fill='none' stroke='%23181232' stroke-width='1.6'/%3E%3C/svg%3E") right 14px center / 12px no-repeat;
  color: var(--km-ink); font: inherit; font-size: 1rem;
  appearance: none; cursor: pointer;
}
.km-select:focus { outline: none; border-color: var(--km-ink); }
.km-filters__count { margin-left: auto; font-size: .95rem; color: var(--km-muted); align-self: center; }
.km-filters__reset {
  border: 0; background: none; padding: 0; min-height: 46px;
  font: inherit; font-size: .95rem; font-weight: 600; color: var(--km-ink); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--km-orange); text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.km-filters__reset[hidden] { display: none; }

.km-alllist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.km-alllist [hidden] { display: none; }
.km-empty { padding: 48px 0; color: var(--km-muted); }
.km-empty[hidden] { display: none; }

/* Partners ---------------------------------------------------------------- */
.km-partners { border-top: 1px solid var(--km-grey-200); padding: 40px 0 48px; overflow: hidden; }
.km-partners__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-bottom: 28px; }
.km-partners__title { font-size: 1rem; font-weight: 600; color: var(--km-muted); }

/* Logo marquee. The list is printed twice; the track moves by exactly one copy
   (-50%) and loops. Direction: km-marquee-right moves the logos to the right;
   swap to km-marquee-left for the opposite direction. Speed: --km-marquee-time. */
.km-marquee {
  --km-marquee-time: 45s;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.km-marquee__track { display: flex; width: max-content; animation: km-marquee-right var(--km-marquee-time) linear infinite; }
.km-marquee:hover .km-marquee__track,
.km-marquee:focus-within .km-marquee__track { animation-play-state: paused; }
.km-marquee__list { display: flex; align-items: center; gap: clamp(48px, 5vw, 88px); padding-right: clamp(48px, 5vw, 88px); }
@keyframes km-marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes km-marquee-left  { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* One partner logo. --km-logo-h is the visible height of the logo itself;
   --ty / --tx crop the transparent margin some logo files have (fraction of
   the file's height), so every logo lines up at the same visual size. */
.km-logo-img {
  --km-logo-h: 34px; --f: 1; --ty: 0; --tx: 0;
  display: block; flex: none;
  height: calc(var(--km-logo-h) * var(--f) / (1 - 2 * var(--ty)));
  width: auto; max-width: none;
  margin: calc(var(--km-logo-h) * var(--f) / (1 - 2 * var(--ty)) * var(--ty) * -1)
          calc(var(--km-logo-h) * var(--f) / (1 - 2 * var(--ty)) * var(--tx) * -1);
}
.km-marquee .km-logo-img { filter: grayscale(1); opacity: .75; transition: filter .2s ease, opacity .2s ease; }
.km-marquee .km-logo-img:hover { filter: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .km-marquee { -webkit-mask-image: none; mask-image: none; }
  .km-marquee__track { animation: none !important; width: auto; }
  .km-marquee__list { flex-wrap: wrap; padding: 0 var(--km-gutter); row-gap: 24px; }
  .km-marquee__list[aria-hidden] { display: none; }
}

.km-why { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(32px, 6vw, 112px); align-items: start; }
.km-why__quote { margin-top: 28px; font-size: clamp(1.4rem, 2.3vw, 2rem); line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; max-width: 18em; }
.km-why__intro { font-size: 1.15rem; max-width: 36em; }
.km-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 40px; margin-top: 40px; }
.km-reasons li { padding-top: 20px; border-top: 2px solid var(--km-ink); }
.km-reasons h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 8px; }
.km-reasons p { color: var(--km-muted); }

.km-partnergrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.km-partner {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px; min-height: 210px;
  border: 1px solid var(--km-grey-200); border-radius: var(--km-radius);
  background: var(--km-white);
}
.km-partner__logo { height: 56px; display: flex; align-items: center; margin-bottom: 8px; }
.km-partner__logo .km-logo-img { --km-logo-h: 32px; }
.km-partner__cat { font-size: .88rem; font-weight: 600; color: var(--km-muted); }
.km-partner p { color: var(--km-muted); font-size: .97rem; }
.km-partner .km-textlink { margin-top: auto; font-size: .95rem; }

/* About ------------------------------------------------------------------- */
.km-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
.km-pillar { padding: clamp(28px, 3.4vw, 40px); border-radius: var(--km-radius); }
.km-pillar--ink { background: var(--km-ink); color: var(--km-white); }
.km-pillar--orange { background: var(--km-orange); color: var(--km-ink); }
.km-pillar h3 { font-size: 1.35rem; font-weight: 600; margin-bottom: 10px; }
.km-pillar--ink p { color: var(--km-muted-on-ink); }
.km-pillar .km-textlink { margin-top: 20px; }
.km-pillar--ink .km-textlink:hover { --km-underline: var(--km-white); }
.km-pillar--orange .km-textlink { --km-underline: var(--km-ink); }
.km-pillar--orange .km-textlink:hover { --km-underline: var(--km-white); }

.km-team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.km-person__photo {
  aspect-ratio: 1; width: 100%; margin-bottom: 16px;
  border-radius: var(--km-radius); overflow: hidden;
  background: var(--km-grey-50);
}
.km-person__photo img { width: 100%; height: 100%; object-fit: cover; color: transparent; filter: grayscale(1); transition: filter .3s ease; }
.km-person:hover .km-person__photo img { filter: none; }
.km-person h3 { font-size: 1.15rem; font-weight: 600; }
.km-person__role { color: var(--km-muted); font-size: .97rem; }
.km-person p:not(.km-person__role) { margin-top: 10px; font-size: .97rem; }
.km-person .km-textlink { margin-top: 12px; font-size: .95rem; }

.km-group-band { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 32px clamp(32px, 6vw, 96px); align-items: center; }
.km-group-band ul { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; }
.km-group-band li strong { display: block; font-size: 1.6rem; line-height: 1.1; font-weight: 600; }
.km-group-band li span { color: var(--km-muted-on-ink); font-size: .97rem; }

/* Contact ----------------------------------------------------------------- */
.km-contact { background: var(--km-ink); color: var(--km-white); padding: clamp(72px, 8vw, 112px) 0; }
.km-contact__inner {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center; gap: 32px clamp(32px, 6vw, 96px);
}
.km-contact__text { margin-top: 12px; color: var(--km-muted-on-ink); }
.km-contact__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }


.km-contactgrid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 48px clamp(32px, 5vw, 80px); margin-top: 48px; }
.km-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.km-field { display: flex; flex-direction: column; gap: 6px; }
.km-field--full { grid-column: 1 / -1; }
.km-field label { font-size: .95rem; font-weight: 600; }
.km-field input, .km-field textarea {
  min-height: 50px; padding: 12px 14px;
  border: 1.5px solid var(--km-grey-200); border-radius: 6px;
  background: var(--km-white); color: var(--km-ink); font: inherit; font-size: 1rem;
}
.km-field textarea { min-height: 150px; resize: vertical; }
.km-field input:focus, .km-field textarea:focus { outline: none; border-color: var(--km-ink); }
.km-consent { grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; color: var(--km-muted); }
.km-consent input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--km-orange); flex: none; }
.km-form .km-btn { grid-column: 1 / -1; justify-self: start; }
.km-form__captcha { grid-column: 1 / -1; }
.km-form__captcha:empty { display: none; }
.km-field [aria-invalid="true"], .km-newsletter [aria-invalid="true"] { border-color: var(--km-raspberry); }
.km-form.is-sending .km-btn, .km-newsletter.is-sending .km-btn { cursor: progress; opacity: .7; }
.km-form__status {
  grid-column: 1 / -1;
  padding: 14px 16px; border-radius: 6px; border-left: 4px solid currentColor;
  font-size: .95rem; line-height: 1.5;
}
.km-form__status--success { background: #EEF7F0; color: #1D6B38; }
.km-form__status--error { background: #FCEDF1; color: #A3123A; }
.km-newsletter .km-form__status { margin-top: 12px; padding: 10px 12px; font-size: .9rem; }

.km-office { padding: 28px; border-radius: var(--km-radius); background: var(--km-grey-50); align-self: start; }
.km-office h2 { font-size: 1.15rem; font-weight: 600; margin-bottom: 12px; }
.km-office address { font-style: normal; }
.km-office p, .km-office address { color: var(--km-muted); }
.km-office p + p, .km-office address + p { margin-top: 14px; }
.km-office a { color: var(--km-ink); font-weight: 600; text-decoration: none; }
.km-office a:hover { text-decoration: underline; text-decoration-color: var(--km-orange); text-underline-offset: 4px; }

/* Webinar pop-up on News & Insights ----------------------------------------
   The webinar page's component is on the page with its library hidden; only
   its pop-up is used. Its colours are switched to this site's palette. */
.km-webinar-host .kmm-webinar-hero,
.km-webinar-host .kmm-webinar-library,
.km-webinar-host .kmm-webinar-steps { display: none !important; }
.km-webinar-host .kmm-webinar-root {
  --kmm-navy: #181232;
  --kmm-navy-2: #2A2350;
  --kmm-navy-3: #110C26;
  --kmm-magenta: #D61C4E;
  --kmm-magenta-strong: #B5153F;
  --kmm-orange: #F77E21;
  --kmm-focus: #F77E21;
  --kmm-text: #181232;
  --kmm-text-muted: #67637A;
  --kmm-border: #DEDFE0;
  --kmm-grey-light: #F6F6F6;
  --kmm-radius: 8px;
}

/* Blog post page ----------------------------------------------------------- */
.km-article { padding-bottom: clamp(56px, 6vw, 88px); }
.km-article__col { max-width: 760px; margin: 0 auto; }
.km-article__head { padding: clamp(40px, 6vw, 80px) 0 clamp(28px, 4vw, 48px); }
.km-article__back {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 28px;
  font-size: .95rem; font-weight: 600; color: var(--km-muted); text-decoration: none;
}
.km-article__back:hover { color: var(--km-ink); }
.km-article__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 16px; font-size: .95rem; color: var(--km-muted); }
.km-article__meta a { font-weight: 600; color: var(--km-ink); text-decoration: none; }
.km-article__meta a:hover { text-decoration: underline; text-decoration-color: var(--km-orange); text-underline-offset: 4px; }
.km-article__title { font-size: clamp(2.1rem, 4.2vw, 3.4rem); line-height: 1.08; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
.km-article__lead { margin-top: 20px; font-size: 1.25rem; line-height: 1.55; color: var(--km-muted); }
.km-article__author { margin-top: 20px; font-weight: 500; }
.km-article__image { max-width: 1100px; margin: 0 auto clamp(40px, 5vw, 64px); }
.km-article__image img { width: 100%; height: auto; border-radius: var(--km-radius); }

/* The article text: works for any HTML the editor produces */
.km-article__body { font-size: 1.125rem; line-height: 1.75; overflow-wrap: break-word; }
.km-article__body > * + * { margin-top: 1.1em; }
.km-article__body p:empty { display: none; }
.km-article__body h2 { margin-top: 2em; font-size: 1.75rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.km-article__body h3 { margin-top: 1.8em; font-size: 1.35rem; line-height: 1.3; font-weight: 600; }
.km-article__body h4 { margin-top: 1.6em; font-size: 1.15rem; line-height: 1.35; font-weight: 600; }
.km-article__body h2 + *, .km-article__body h3 + *, .km-article__body h4 + * { margin-top: .6em; }
.km-article__body > :first-child { margin-top: 0; }
.km-article__body ul, .km-article__body ol { padding-left: 1.4em; }
.km-article__body ul { list-style: disc; }
.km-article__body ol { list-style: decimal; }
.km-article__body li + li { margin-top: .4em; }
.km-article__body li::marker { color: var(--km-orange); }
.km-article__body a:not(.km-btn) {
  color: var(--km-ink); text-decoration: underline; text-decoration-color: var(--km-orange);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.km-article__body a:not(.km-btn):hover { text-decoration-color: currentColor; }
.km-article__body strong, .km-article__body b { font-weight: 600; }
.km-article__body img { display: block; max-width: 100%; height: auto; border-radius: var(--km-radius); }
.km-article__body figure { margin: 2em 0; }
.km-article__body figcaption { margin-top: 8px; font-size: .9rem; color: var(--km-muted); }
.km-article__body blockquote { margin-left: 0; margin-right: 0; padding-left: 20px; border-left: 4px solid var(--km-orange); font-size: 1.25rem; font-weight: 500; }
.km-article__body table { width: 100%; border-collapse: collapse; font-size: .97rem; display: block; overflow-x: auto; }
.km-article__body th, .km-article__body td { padding: 10px 12px; border-bottom: 1px solid var(--km-grey-200); text-align: left; vertical-align: top; }
.km-article__body th { font-weight: 600; }
.km-article__body code { padding: 2px 6px; border-radius: 4px; background: var(--km-grey-50); font-family: ui-monospace, Consolas, monospace; font-size: .9em; }
.km-article__body pre { overflow-x: auto; padding: 20px; border-radius: var(--km-radius); background: var(--km-ink); color: var(--km-white); font-size: .9rem; line-height: 1.6; }
.km-article__body pre code { padding: 0; background: none; color: inherit; }
.km-article__body hr { margin: 2.5em 0; border: 0; border-top: 1px solid var(--km-grey-200); }
.km-article__body iframe, .km-article__body video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--km-radius); }

.km-article__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--km-grey-200); }
.km-article__foot-label { margin-right: 6px; font-size: .95rem; font-weight: 600; color: var(--km-muted); }
.km-chip { padding: 6px 14px; border: 1px solid var(--km-grey-200); border-radius: 999px; font-size: .92rem; text-decoration: none; transition: border-color .15s ease; }
.km-chip:hover { border-color: var(--km-ink); }

/* Footer ------------------------------------------------------------------ */
.km-footer { background: var(--km-grey-50); padding: 72px 0 32px; font-size: .95rem; }
.km-footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1.5fr;
  gap: 40px 32px;
}
.km-footer__brand img { width: 132px; height: auto; margin-bottom: 20px; }
.km-footer__brand address { font-style: normal; color: var(--km-muted); margin-bottom: 12px; }
.km-footer__brand p { color: var(--km-muted); }
.km-footer__title { display: block; margin-bottom: 14px; font-size: .95rem; font-weight: 600; color: var(--km-ink); }
.km-footer__col li + li { margin-top: 10px; }
.km-footer a { color: var(--km-muted); text-decoration: none; transition: color .15s ease; }
.km-footer a:hover { color: var(--km-ink); text-decoration: underline; text-decoration-color: var(--km-orange); text-underline-offset: 4px; }

.km-newsletter p { color: var(--km-muted); margin-bottom: 14px; }
.km-newsletter__row { display: flex; gap: 8px; }
.km-newsletter input {
  flex: 1; min-width: 0; min-height: 46px; padding: 0 14px;
  border: 1.5px solid var(--km-grey-200); border-radius: 6px;
  background: var(--km-white); color: var(--km-ink); font: inherit;
}
.km-newsletter input:focus { outline: none; border-color: var(--km-ink); }

.km-footer__bottom {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 56px; padding-top: 24px;
  border-top: 1px solid var(--km-grey-200);
  color: var(--km-muted); font-size: .9rem;
}

/* Wide screens ------------------------------------------------------------ */
@media (min-width: 1600px) {
  .km-alllist { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .km-team { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1100px) {
  .km-burger { display: block; }
  .km-nav {
    position: fixed; inset: 77px 0 0 0;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 32px;
    padding: 16px var(--km-gutter) 40px;
    background: var(--km-white);
    overflow-y: auto;
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, visibility .2s;
  }
  .km-nav.is-open { opacity: 1; visibility: visible; }
  .km-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .km-nav__item { flex-wrap: wrap; justify-content: space-between; border-bottom: 1px solid var(--km-grey-200); }
  .km-nav__link { padding: 16px 0; font-size: 1.35rem; font-weight: 600; background: none; }
  .km-nav__link[aria-current="page"] { color: var(--km-orange-hover); }
  .km-nav__subtoggle { width: 44px; height: 44px; }
  .km-nav__sub {
    position: static; flex-basis: 100%; min-width: 0; padding: 0 0 12px;
    border: 0; display: none; opacity: 1; visibility: visible; transform: none;
  }
  .km-nav__sub::before { content: none; }
  .km-nav__item--has-sub:hover .km-nav__sub,
  .km-nav__item--has-sub:focus-within .km-nav__sub { display: none; }
  .km-nav__item--has-sub.is-open .km-nav__sub { display: block; }
  .km-nav__sub a { padding: 10px 0; font-size: 1.05rem; color: var(--km-muted); }
  .km-nav .km-btn { align-self: flex-start; }
  body.km-nav-open { overflow: hidden; }

  .km-discover__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .km-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .km-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .km-footer__brand { grid-column: 1 / -1; }
  .km-newsletter { grid-column: 1 / -1; max-width: 520px; }
}

@media (max-width: 860px) {
  .km-jhero__inner { grid-template-columns: 1fr; }
  .km-offers { grid-template-columns: 1fr 1fr; }
  .km-pgroups { grid-template-columns: 1fr; }
  .km-stats { grid-template-columns: 1fr 1fr; }
  .km-areas { grid-template-columns: 1fr; }
  .km-explorer.is-enhanced { grid-template-columns: 1fr; }
  .km-tabs { position: static; display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(var(--km-gutter) * -1); padding: 0 var(--km-gutter) 6px; scrollbar-width: none; }
  .km-tabs::-webkit-scrollbar { display: none; }
  .km-tabs__group { display: none; }
  .km-tab { flex: none; border: 1.5px solid var(--km-grey-200); border-radius: 999px; padding: 8px 14px; background: var(--km-white); white-space: nowrap; font-size: .95rem; }
  .km-tab[aria-selected="true"] { border-color: var(--km-ink); background: var(--km-ink); color: var(--km-white); box-shadow: none; }
  .km-tab[aria-selected="true"] .km-tab__count { color: var(--km-muted-on-ink); }
  .km-start { grid-template-columns: 1fr; }
  .km-svcrow__cols { grid-template-columns: 1fr; }
  .km-svcrow__steps li { grid-template-columns: 1fr; }
  .km-hero__inner { grid-template-columns: 1fr; }
  .km-mark { order: -1; max-width: 220px; justify-self: start; }
  .km-pagehead__inner { grid-template-columns: 1fr; align-items: start; }
  .km-group > div:first-child { position: static; }
  .km-split, .km-group, .km-why, .km-group-band, .km-theme,
  .km-contact__inner, .km-contactgrid, .km-featured { grid-template-columns: 1fr; }
  .km-featured__media { min-height: 220px; }
  .km-contact__actions { justify-content: flex-start; }
  .km-newlist, .km-alllist { grid-template-columns: 1fr 1fr; }
  .km-steps, .km-figures { grid-template-columns: 1fr 1fr; }
  .km-clients__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .km-filters { top: 76px; }
}

@media (max-width: 600px) {
  .km { font-size: 17px; }
  .km-offers, .km-stats { grid-template-columns: 1fr; }
  .km-lockup { gap: 14px; }
  .km-lockup img { height: 26px; }
  .km-lockup img + .km-lockup__divider + img { height: 28px; }
  .km-svcrow summary { grid-template-columns: minmax(0, 1fr) 16px; gap: 8px 12px; }
  .km-svcrow__tags { grid-column: 1; grid-row: 2; justify-content: flex-start; }
  .km-svcrow__chev { grid-column: 2; grid-row: 1 / span 2; }
  .km-svcrow__head { grid-template-columns: 1fr; }
  .km-svcrow__head .km-svcrow__tags { grid-column: 1; grid-row: auto; }
  .km-seg { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .km-index__row { grid-template-columns: 2em minmax(0, 1fr) 16px; gap: 2px 12px; padding: 16px 0; }
  .km-index__meta { grid-column: 2; grid-row: 2; text-align: left; }
  .km-index__arrow { grid-column: 3; grid-row: 1 / span 2; }
  .km-index--plain .km-index__row { grid-template-columns: minmax(0, 1fr) 16px; }
  .km-index--plain .km-index__meta { grid-column: 1; }
  .km-index--plain .km-index__arrow { grid-column: 2; }
  .km-logo img { width: 116px; }
  .km-industries__list, .km-detail__cols, .km-pillars,
  .km-newlist, .km-alllist, .km-reasons,
  .km-steps, .km-team, .km-form, .km-group-band ul { grid-template-columns: 1fr; }
  .km-industries__list { gap: 24px; }
  .km-marquee .km-logo-img { --km-logo-h: 26px; }
  .km-marquee__list { gap: 40px; padding-right: 40px; }
  .km-marquee { --km-marquee-time: 35s; }
  .km-section__head { flex-direction: column; gap: 12px; }
  .km-discover__list { grid-template-columns: 1fr; }
  .km-card--more { min-height: 0; }
  .km-contact__actions .km-btn { width: 100%; }
  .km-filters { position: static; }
  .km-filters__group, .km-select { width: 100%; min-width: 0; }
  .km-filters__count { margin-left: 0; }
  .km-footer__grid { grid-template-columns: 1fr 1fr; }
  .km-footer__bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .km *, .km *::before, .km *::after { animation: none !important; transition-duration: 0s !important; }
}