/*
 * /capabilities/marketing-strategy/ — extras on top of components/kosh-page.css (Oct 2026 redesign).
 * Only what the shared Kosh page system doesn't have: small labels, phase outputs and the engagement pair in the dark band.
 */

/* Hero: bold run inside the intro line */
.kp-hero__body strong { font-weight: var(--fw-medium); color: #fff; }

/* Numbers strip with three figures and no "trusted by" block */
.kp-x-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.kp-stat__n em, .kp-x-big em { font-style: italic; color: var(--color-secondary); }

/* Space between an intro split and the list that follows it in the same section */
.kp-x-gap { margin-top: clamp(48px, 6vw, 80px); }
.kp-x-gap-s { margin-top: 26px; }

/* Bold runs in body copy */
.kp-copy strong, .kp-feature__body strong, .kp-step__body strong { font-weight: var(--fw-medium); color: var(--text-primary); }

/* Problem cards: a symbol in the round icon, small caption above the title */
.kp-x-sym { font-family: var(--font-heading); font-size: 22px; line-height: 1; }
.kp-x-label {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

/* Small tag line above a title (engagement options) */
.kp-x-tag {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

/* 04 — What we deliver: card row; the five inclusions sit in two columns to keep each card short */
.kp-x-ms-deliver .kp-feature__label { margin-top: 14px; }
.kp-x-ms-deliver .kp-feature__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; max-width: 460px; }

/* Process: paragraph under the heading, phase names in the heading face, outputs under each phase */
.kp-x-note { margin-top: 22px; max-width: 360px; font-size: var(--fs-body); color: var(--text-secondary); }
.kp-step .kp-x-phase { font-family: var(--font-heading); font-size: var(--fs-h4); line-height: 1.2; }
.kp-x-outputs {
  list-style: none;
  margin: 16px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid rgba(20, 18, 16, .12);
}
.kp-x-outputs li { font-size: 12px; line-height: 1.5; color: var(--text-primary); }
.kp-x-outputs li + li { margin-top: 4px; }

/* Big figure on result cards */
.kp-x-big {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(36px, 3.4vw, 48px);
  line-height: 1;
  color: var(--text-primary);
}

/* Dark band: engagement pair */
.kp-dark .kp-hl em { color: var(--color-tertiary); }
.kp-dark .kp-x-tag { color: var(--color-tertiary); }
.kp-x-pair-hl { font-size: var(--fs-h3); }
.kp-dark .kp-list li { color: var(--text-on-dark-2); }
.kp-dark .kp-list { border-color: var(--line-on-dark); }
.kp-dark .kp-pair, .kp-dark .kp-pair__item { border-color: var(--line-on-dark); }
.kp-dark .kp-pair__item p { color: var(--text-on-dark-3); }
.kp-dark .kp-pair__item .kp-x-foot {
  margin-top: 22px;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--color-tertiary);
}

/* FAQ follows the dark band here, so it keeps its top padding */
.kp-faq.kp-x-faq { padding-top: var(--section-y); }

/* Final CTA: emphasis stays white on the maroon band */


/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .kp-x-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .kp-x-stats-3 { grid-template-columns: 1fr; row-gap: 24px; }
  .kp-x-stats-3 .kp-stat:nth-child(n) { padding: 0; border-left: 0; }
  .kp-x-outputs { grid-column: 2; }
}

/* phones: the card's inclusion list goes back to one column */
@media (max-width: 560px) {
  .kp-x-ms-deliver .kp-feature__list { grid-template-columns: minmax(0, 1fr); }
}