/* ============================================================================
   Key for Change — Interior page + content-section styles  (task 12647)

   The homepage concept (group #90) shipped nav / hero / body / footer. This
   file adds the brand system for EVERY OTHER page: a compact page-header, a
   styled prose column, and a library of reusable content-section modules
   (cards, steps, stats, tiers, testimonials, checklists, CTA bands, FAQ,
   featured-in strip). Rendered by templates/partials/sections.html.twig macros.

   Loaded at priority 81 (after footer.css, before custom.css) — every value
   references a token from tokens.css (var(--k4c-*)); no raw hex / px here.
   Non-home <body> has NO .has-hero, so the nav's scaffold offset
   (body:not(.has-hero) main#start padding-top, nav.css) already clears the
   fixed bar — the page-header sits directly below the nav.
   ========================================================================== */

/* ---- Shared section rhythm & backgrounds -------------------------------- */
.k4c-section { padding-block: var(--k4c-section-pad); }
.k4c-section--tight { padding-block: calc(var(--k4c-section-pad) * 0.6); }
.k4c-section--tint  { background: var(--k4c-purple-50); }
.k4c-section--tint2 { background: var(--k4c-purple-100); }
.k4c-section--grey  { background: var(--k4c-grey-100); }
.k4c-section--purple {
  background: var(--k4c-purple);
  color: var(--k4c-white);
}
.k4c-section--purple :is(h1,h2,h3,h4) { color: var(--k4c-white); }
.k4c-section--purple .k4c-eyebrow { color: var(--k4c-yellow); }

/* Section heading cluster (eyebrow + heading + lede), optionally centred */
.k4c-sec-head { margin-bottom: var(--k4c-space-7); max-width: 46rem; }
.k4c-sec-head--center { margin-inline: auto; text-align: center; }
/* Eyebrow is a <p>, so it inherits Pico's ~1rem margin-bottom which collapses
   with the title's margin-top and opens too big a gap (#1000997). Zero it so
   the title's margin-top alone owns the eyebrow→title spacing. */
.k4c-sec-head .k4c-eyebrow { margin-bottom: 0; }
.k4c-sec-head__title { font-size: var(--k4c-fs-2xl); margin: var(--k4c-space-2) 0 var(--k4c-space-3); }
/* quark2's `:is(p,…,.card) + h2 { margin-top:1.65em }` (0,1,1) out-ranks the rule above
   and put ~72px between eyebrow and title (#1001401). Scope it so the 8px gap wins. */
.k4c-sec-head > .k4c-sec-head__title { margin-top: var(--k4c-space-2); }
.k4c-sec-head__lede { font-size: var(--k4c-fs-md); color: var(--k4c-grey-600); margin: 0; }
.k4c-section--purple .k4c-sec-head__lede { color: color-mix(in oklab, var(--k4c-white) 82%, var(--k4c-purple)); }
.k4c-section--purple .k4c-prose { color: color-mix(in oklab, var(--k4c-white) 82%, var(--k4c-purple)); }
.k4c-section--purple .k4c-prose ul li::marker { color: var(--k4c-yellow); }

/* ============================================================================
   Page header (compact interior hero) — brand purple band under the nav
   ========================================================================== */
.k4c-pagehead {
  position: relative;
  background: linear-gradient(135deg, var(--k4c-purple-900) 0%, var(--k4c-purple) 55%, var(--k4c-purple-light) 130%);
  color: var(--k4c-white);
  padding-block: calc(var(--k4c-nav-height) + var(--k4c-space-7)) var(--k4c-space-8);
  overflow: hidden;
}
.k4c-pagehead::after { /* soft warm glow, decorative */
  content: "";
  position: absolute;
  inset: auto -10% -40% auto;
  width: 40rem; height: 40rem;
  background: radial-gradient(circle, color-mix(in oklab, var(--k4c-yellow) 22%, transparent) 0%, transparent 62%);
  pointer-events: none;
}
/* When a page-header is present it owns the top of the page and paints up
   under the transparent fixed nav (its own top padding clears the bar), so
   cancel nav.css's `body:not(.has-hero) main#start` scaffold offset. */
body:has(.k4c-pagehead) main#start { padding-top: 0; }
.k4c-pagehead__inner { position: relative; z-index: 1; }
.k4c-pagehead--split .k4c-pagehead__inner {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--k4c-space-8);
  align-items: center;
}
.k4c-pagehead__eyebrow { color: var(--k4c-yellow); }
.k4c-pagehead__title {
  color: var(--k4c-white);
  font-size: var(--k4c-fs-3xl);
  margin: var(--k4c-space-3) 0 0;
  text-wrap: balance;
  /* Long words ("narcissistic") must break rather than overflow the band
     and get clipped by .k4c-pagehead's overflow:hidden (#12696). */
  overflow-wrap: break-word;
}
.k4c-pagehead__title .k4c-accent { color: var(--k4c-yellow); }
.k4c-pagehead__lede {
  font-size: var(--k4c-fs-lg);
  color: color-mix(in oklab, var(--k4c-white) 88%, var(--k4c-purple));
  margin: var(--k4c-space-5) 0 0;
  max-width: 40rem;
}
.k4c-pagehead__meta {
  margin: var(--k4c-space-5) 0 0;
  font-family: var(--k4c-font-heading);
  font-weight: var(--k4c-fw-semibold);
  color: var(--k4c-yellow);
  letter-spacing: 0.02em;
}
.k4c-pagehead__actions { margin-top: var(--k4c-space-6); display: flex; flex-wrap: wrap; gap: var(--k4c-space-3); }
/* white-outline ghost that reads on the purple header */
.k4c-btn--onpurple { background: transparent; color: var(--k4c-white); border-color: color-mix(in oklab, var(--k4c-white) 60%, transparent); }
.k4c-btn--onpurple:hover { background: var(--k4c-white); color: var(--k4c-purple); border-color: var(--k4c-white); }
.k4c-pagehead__media img {
  width: 100%; height: auto; display: block;
  border-radius: var(--k4c-radius-lg);
  box-shadow: var(--k4c-shadow-lg);
}
@media (max-width: 768px) {
  .k4c-pagehead--split .k4c-pagehead__inner { grid-template-columns: 1fr; }
  .k4c-pagehead__media { order: -1; max-width: 22rem; }
}
/* Small phones: --k4c-fs-3xl's clamp floor (2.4rem) never shrinks, so the
   longest interior-hero heading ("Beyond narcissistic abuse — step into your
   power") overflowed the ~358px content box at 390px. Step the title down to
   the 2xl scale so it wraps cleanly on one/two lines (#12696). */
@media (max-width: 560px) {
  .k4c-pagehead__title { font-size: var(--k4c-fs-2xl); }
}

/* ============================================================================
   Prose column — styles raw markdown body content on-brand
   ========================================================================== */
.k4c-prose { max-width: 46rem; font-size: var(--k4c-fs-md); color: var(--k4c-grey-800); }
.k4c-prose--wide { max-width: 60rem; }
.k4c-prose > :first-child { margin-top: 0; }
.k4c-prose > :last-child { margin-bottom: 0; }
.k4c-prose h2 { font-size: var(--k4c-fs-xl); margin: var(--k4c-space-8) 0 var(--k4c-space-4); }
.k4c-prose h3 { font-size: var(--k4c-fs-lg); margin: var(--k4c-space-6) 0 var(--k4c-space-3); }
.k4c-prose p { margin: 0 0 var(--k4c-space-5); }
.k4c-prose ul, .k4c-prose ol { margin: 0 0 var(--k4c-space-5); padding-left: var(--k4c-space-5); }
.k4c-prose li { margin-bottom: var(--k4c-space-2); }
.k4c-prose ul li::marker { color: var(--k4c-purple-light); }
.k4c-prose strong { color: var(--k4c-purple); font-weight: var(--k4c-fw-bold); }
.k4c-prose a { color: var(--k4c-purple); text-decoration: underline; }
.k4c-prose a:hover { color: var(--k4c-purple-light); }
.k4c-prose img { max-width: 100%; height: auto; border-radius: var(--k4c-radius); }
.k4c-prose blockquote {
  margin: var(--k4c-space-6) 0;
  padding: var(--k4c-space-4) var(--k4c-space-6);
  border-left: 4px solid var(--k4c-yellow);
  background: var(--k4c-purple-50);
  border-radius: var(--k4c-radius-sm);
  font-size: var(--k4c-fs-lg);
  color: var(--k4c-grey-800);
}
.k4c-prose blockquote p:last-child { margin-bottom: 0; }

/* ============================================================================
   Card grid — icon / heading / text / optional link
   ========================================================================== */
.k4c-cards { display: grid; gap: var(--k4c-space-6); grid-template-columns: repeat(3, 1fr); }
.k4c-cards--2 { grid-template-columns: repeat(2, 1fr); }
.k4c-cards--4 { grid-template-columns: repeat(4, 1fr); }
.k4c-card {
  background: var(--k4c-white);
  border: var(--k4c-border);
  border-radius: var(--k4c-radius-lg);
  padding: var(--k4c-space-6);
  box-shadow: var(--k4c-shadow-sm);
  transition: transform var(--k4c-transition), box-shadow var(--k4c-transition);
  display: flex; flex-direction: column; gap: var(--k4c-space-2);
}
.k4c-card:hover { transform: translateY(-3px); box-shadow: var(--k4c-shadow); }
.k4c-card__icon {
  width: 3rem; height: 3rem; margin-bottom: var(--k4c-space-2);
  display: grid; place-items: center;
  background: var(--k4c-purple-100); color: var(--k4c-purple);
  border-radius: var(--k4c-radius-pill);
  font-size: var(--k4c-fs-lg);
}
.k4c-card__title { font-size: var(--k4c-fs-lg); margin: 0; }
.k4c-card__text { color: var(--k4c-grey-600); margin: 0; }
.k4c-card__link {
  margin-top: auto; padding-top: var(--k4c-space-3);
  font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-bold);
  text-decoration: none;
}
.k4c-card__link::after { content: " →"; }
@media (max-width: 900px) { .k4c-cards, .k4c-cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .k4c-cards, .k4c-cards--2, .k4c-cards--4 { grid-template-columns: 1fr; } }
/* Orphan-card fix (task #12750): in the 2-col tablet layout an odd-count card
   grid leaves the final card alone on its row with a large dead gap to its
   right. Span the lone card across the row, cap it to one column's width and
   centre it, so the trailing space is balanced instead of dumped on the right.
   Cascades to every template using the shared card grid (resources, home,
   about team, events, retreat). */
@media (min-width: 561px) and (max-width: 900px) {
  .k4c-cards > .k4c-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc((100% - var(--k4c-space-6)) / 2);
    margin-inline: auto;
  }
}

/* ============================================================================
   Steps — numbered process
   ========================================================================== */
.k4c-steps { display: grid; gap: var(--k4c-space-6); grid-template-columns: repeat(3, 1fr); counter-reset: k4cstep; }
.k4c-steps--5 { grid-template-columns: repeat(5, 1fr); }
.k4c-step { position: relative; padding-top: var(--k4c-space-6); }
.k4c-step__num {
  position: absolute; top: 0; left: 0;
  font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-extrabold);
  font-size: var(--k4c-fs-2xl); color: var(--k4c-yellow);
  line-height: 1;
}
.k4c-section--purple .k4c-step__num { color: var(--k4c-yellow); }
.k4c-step__title { font-size: var(--k4c-fs-lg); margin: var(--k4c-space-3) 0 var(--k4c-space-2); }
.k4c-step__text { color: var(--k4c-grey-600); margin: 0; }
.k4c-section--purple .k4c-step__text { color: color-mix(in oklab, var(--k4c-white) 80%, var(--k4c-purple)); }
@media (max-width: 900px) { .k4c-steps, .k4c-steps--5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .k4c-steps, .k4c-steps--5 { grid-template-columns: 1fr; } }

/* ============================================================================
   Stats band
   ========================================================================== */
.k4c-stats { display: grid; gap: var(--k4c-space-6); grid-template-columns: repeat(4, 1fr); text-align: center; }
.k4c-stat__num {
  font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-extrabold);
  font-size: var(--k4c-fs-3xl); color: var(--k4c-yellow); line-height: 1;
}
.k4c-stat__label { margin: var(--k4c-space-2) 0 0; font-weight: var(--k4c-fw-semibold); }
@media (max-width: 700px) { .k4c-stats { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================================
   Tiers — programme / pricing cards
   ========================================================================== */
.k4c-tiers { display: grid; gap: var(--k4c-space-6); grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.k4c-tier {
  position: relative; display: flex; flex-direction: column;
  background: var(--k4c-white); border: var(--k4c-border);
  border-radius: var(--k4c-radius-lg); padding: var(--k4c-space-7) var(--k4c-space-6);
  box-shadow: var(--k4c-shadow-sm);
}
.k4c-tier--featured { border-color: var(--k4c-purple); box-shadow: var(--k4c-shadow-lg); }
.k4c-tier__badge {
  position: absolute; top: 0; right: var(--k4c-space-6); transform: translateY(-50%);
  background: var(--k4c-yellow); color: var(--k4c-grey);
  font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-bold);
  font-size: var(--k4c-fs-xs); text-transform: uppercase; letter-spacing: var(--k4c-tracking-caps);
  padding: var(--k4c-space-1) var(--k4c-space-4); border-radius: var(--k4c-radius-pill);
}
.k4c-tier__name { font-size: var(--k4c-fs-xl); margin: 0 0 var(--k4c-space-2); }
.k4c-tier__blurb { color: var(--k4c-grey-600); margin: 0 0 var(--k4c-space-5); }
.k4c-tier__list { list-style: none; margin: 0 0 var(--k4c-space-6); padding: 0; }
.k4c-tier__list li { position: relative; padding-left: var(--k4c-space-6); margin-bottom: var(--k4c-space-3); color: var(--k4c-grey-800); list-style: none; }
.k4c-tier__list li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--k4c-purple); font-weight: var(--k4c-fw-bold);
}
.k4c-tier__cta { margin-top: auto; }
@media (max-width: 900px) { .k4c-tiers { grid-template-columns: 1fr; max-width: 32rem; margin-inline: auto; } }

/* ============================================================================
   Testimonials grid — quote cards
   ========================================================================== */
.k4c-quotes { display: grid; gap: var(--k4c-space-6); grid-template-columns: repeat(3, 1fr); }
.k4c-quotes--2 { grid-template-columns: repeat(2, 1fr); }
.k4c-quote {
  background: var(--k4c-white); border: var(--k4c-border); border-radius: var(--k4c-radius-lg);
  padding: var(--k4c-space-6); box-shadow: var(--k4c-shadow-sm);
  display: flex; flex-direction: column;
}
.k4c-section--purple .k4c-quote { background: color-mix(in oklab, var(--k4c-white) 8%, var(--k4c-purple)); border-color: color-mix(in oklab, var(--k4c-white) 16%, transparent); color: var(--k4c-white); }
.k4c-quote__mark { font-family: var(--k4c-font-heading); font-size: var(--k4c-fs-3xl); line-height: 0.6; color: var(--k4c-yellow); height: 1.2rem; }
.k4c-quote__title { font-size: var(--k4c-fs-lg); margin: 0 0 var(--k4c-space-2); }
.k4c-quote__text { color: var(--k4c-grey-700, var(--k4c-grey-600)); margin: 0 0 var(--k4c-space-4); font-style: italic; }
.k4c-section--purple .k4c-quote__text { color: color-mix(in oklab, var(--k4c-white) 88%, var(--k4c-purple)); }
.k4c-quote__cite { margin-top: auto; font-style: normal; }
.k4c-quote__name { font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-bold); color: var(--k4c-purple); }
.k4c-section--purple .k4c-quote__name { color: var(--k4c-yellow); }
.k4c-quote__role { display: block; font-size: var(--k4c-fs-sm); color: var(--k4c-grey-400); }
.k4c-section--purple .k4c-quote__role { color: color-mix(in oklab, var(--k4c-white) 70%, var(--k4c-purple)); }
@media (max-width: 900px) { .k4c-quotes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .k4c-quotes, .k4c-quotes--2 { grid-template-columns: 1fr; } }
/* Orphan-card fix (task #12750): same as the card grid — a lone final quote in
   the 2-col tablet layout (e.g. 9 testimonials on success-stories) is centred
   at one column's width rather than left-aligned with a gap on the right. */
@media (min-width: 621px) and (max-width: 900px) {
  .k4c-quotes > .k4c-quote:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc((100% - var(--k4c-space-6)) / 2);
    margin-inline: auto;
  }
}

/* Single feature quote (pull-quote) */
.k4c-feature-quote { max-width: 44rem; margin-inline: auto; text-align: center; }
.k4c-feature-quote__text { font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-semibold); font-size: var(--k4c-fs-xl); color: var(--k4c-purple); line-height: var(--k4c-lh-heading); }
.k4c-section--purple .k4c-feature-quote__text { color: var(--k4c-white); }
.k4c-feature-quote__cite { margin-top: var(--k4c-space-4); font-style: normal; color: var(--k4c-grey-600); }
.k4c-feature-quote__cite b { color: var(--k4c-purple); font-family: var(--k4c-font-heading); }
.k4c-section--purple .k4c-feature-quote__cite, .k4c-section--purple .k4c-feature-quote__cite b { color: var(--k4c-yellow); }

/* ============================================================================
   Checklist — with / without, tick + cross
   ========================================================================== */
.k4c-checkcols { display: grid; gap: var(--k4c-space-6); grid-template-columns: repeat(2, 1fr); }
.k4c-checkcard { border-radius: var(--k4c-radius-lg); padding: var(--k4c-space-6); border: var(--k4c-border); }
.k4c-checkcard--yes { background: var(--k4c-purple-50); border-color: color-mix(in oklab, var(--k4c-purple) 20%, transparent); }
.k4c-checkcard--no  { background: var(--k4c-grey-100); }
.k4c-checkcard__title { font-size: var(--k4c-fs-lg); margin: 0 0 var(--k4c-space-4); }
.k4c-checklist { list-style: none; margin: 0; padding: 0; }
/* Pico's `ul li { list-style: square }` targets the li itself and beats anything
   inherited from the ul — the double-bullet Mike reported (#1000897). Set none
   on the li, like .k4c-ticklist already did. */
.k4c-checklist li { position: relative; padding-left: var(--k4c-space-6); margin-bottom: var(--k4c-space-3); list-style: none; }
.k4c-checklist--yes li::before { content: "✓"; position: absolute; left: 0; color: var(--k4c-purple); font-weight: var(--k4c-fw-bold); }
.k4c-checklist--no li::before  { content: "✕"; position: absolute; left: 0; color: var(--k4c-red); font-weight: var(--k4c-fw-bold); }
@media (max-width: 700px) { .k4c-checkcols { grid-template-columns: 1fr; } }

/* Simple benefit list (single column, ticks) */
.k4c-ticklist { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--k4c-space-8); }
.k4c-ticklist li { position: relative; padding-left: var(--k4c-space-6); margin-bottom: var(--k4c-space-3); break-inside: avoid; list-style: none; }
.k4c-ticklist li::before { content: "✓"; position: absolute; left: 0; color: var(--k4c-purple); font-weight: var(--k4c-fw-bold); }
.k4c-section--purple .k4c-ticklist li::before { color: var(--k4c-yellow); }
/* light body text on purple bands — text had no override so it inherited the dark default = near-invisible (WCAG AA fail, #12694) */
.k4c-section--purple .k4c-ticklist li { color: color-mix(in oklab, var(--k4c-white) 90%, var(--k4c-purple)); }
/* single-column variant — for use inside a narrow media-split column (#12671) */
.k4c-ticklist--single { columns: 1; }
@media (max-width: 620px) { .k4c-ticklist { columns: 1; } }

/* ============================================================================
   CTA band
   ========================================================================== */
.k4c-cta {
  background: linear-gradient(135deg, var(--k4c-purple) 0%, var(--k4c-purple-dark) 100%);
  color: var(--k4c-white); text-align: center;
  border-radius: var(--k4c-radius-lg);
  padding: var(--k4c-space-8) var(--k4c-space-6);
}
.k4c-cta--full { border-radius: 0; }
.k4c-cta__title { color: var(--k4c-white); font-size: var(--k4c-fs-2xl); margin: 0 0 var(--k4c-space-3); }
.k4c-cta__text { color: color-mix(in oklab, var(--k4c-white) 85%, var(--k4c-purple)); font-size: var(--k4c-fs-md); margin: 0 auto var(--k4c-space-6); max-width: 40rem; }
.k4c-cta__actions { display: flex; flex-wrap: wrap; gap: var(--k4c-space-3); justify-content: center; }

/* ============================================================================
   Featured-in strip (text pills — real logos wired in media task #12649)
   ========================================================================== */
.k4c-featured { text-align: center; }
.k4c-featured__label { color: var(--k4c-grey-400); font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-semibold); text-transform: uppercase; letter-spacing: var(--k4c-tracking-caps); font-size: var(--k4c-fs-xs); margin: 0 0 var(--k4c-space-5); }
.k4c-featured__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--k4c-space-3) var(--k4c-space-6); }
.k4c-featured__item { font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-bold); font-size: var(--k4c-fs-lg); color: var(--k4c-purple-light); }
.k4c-section--purple .k4c-featured__label { color: color-mix(in oklab, var(--k4c-white) 70%, var(--k4c-purple)); }
.k4c-section--purple .k4c-featured__item { color: var(--k4c-white); }

/* ============================================================================
   FAQ — native <details> accordion (no JS, accessible)
   ========================================================================== */
.k4c-faq { max-width: 48rem; margin-inline: auto; }
.k4c-faq__item { border: var(--k4c-border); border-radius: var(--k4c-radius); margin-bottom: var(--k4c-space-3); background: var(--k4c-white); overflow: hidden; }
.k4c-faq__item[open] { border-color: color-mix(in oklab, var(--k4c-purple) 35%, transparent); }
.k4c-faq__q {
  cursor: pointer; list-style: none;
  padding: var(--k4c-space-4) var(--k4c-space-5);
  font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-semibold);
  color: var(--k4c-purple); font-size: var(--k4c-fs-md);
  display: flex; justify-content: space-between; align-items: center; gap: var(--k4c-space-4);
}
.k4c-faq__q::-webkit-details-marker { display: none; }
.k4c-faq__q::after { content: "+"; font-size: var(--k4c-fs-xl); color: var(--k4c-purple-light); transition: transform var(--k4c-transition); }
.k4c-faq__item[open] .k4c-faq__q::after { transform: rotate(45deg); }
.k4c-faq__q:focus-visible { outline: 3px solid var(--q2-focus-ring); outline-offset: -3px; }
.k4c-faq__a { padding: 0 var(--k4c-space-5) var(--k4c-space-5); color: var(--k4c-grey-700, var(--k4c-grey-600)); }
.k4c-faq__a > :first-child { margin-top: 0; }
.k4c-faq__a p { margin: 0 0 var(--k4c-space-3); }

/* ============================================================================
   Info grid — contact details / address blocks
   ========================================================================== */
.k4c-info { display: grid; gap: var(--k4c-space-6); grid-template-columns: repeat(2, 1fr); }
.k4c-info__block { padding: var(--k4c-space-6); border: var(--k4c-border); border-radius: var(--k4c-radius-lg); background: var(--k4c-white); }
.k4c-info__block h3 { font-size: var(--k4c-fs-lg); margin: 0 0 var(--k4c-space-3); }
.k4c-info__block p { margin: 0 0 var(--k4c-space-2); color: var(--k4c-grey-700, var(--k4c-grey-600)); }
.k4c-info__block a { color: var(--k4c-purple); }
@media (max-width: 700px) { .k4c-info { grid-template-columns: 1fr; } }

/* Two-column split (text + aside) */
.k4c-split { display: grid; gap: var(--k4c-space-8); grid-template-columns: 1fr 1fr; align-items: center; }
.k4c-split--textwide { grid-template-columns: 1.3fr 0.7fr; }
.k4c-split__media img { width: 100%; height: auto; border-radius: var(--k4c-radius-lg); box-shadow: var(--k4c-shadow); }
@media (max-width: 800px) { .k4c-split, .k4c-split--textwide { grid-template-columns: 1fr; } }

/* ============================================================================
   Contact form (Grav form plugin) — brand skin
   ========================================================================== */
.k4c-form { max-width: 40rem; }
.k4c-form .form-group { margin-bottom: var(--k4c-space-4); }
.k4c-form label { display: block; font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-semibold); margin-bottom: var(--k4c-space-2); color: var(--k4c-grey-800); }
.k4c-form input, .k4c-form textarea, .k4c-form select {
  width: 100%; padding: var(--k4c-space-3) var(--k4c-space-4);
  border: 1px solid var(--k4c-grey-200); border-radius: var(--k4c-radius);
  font-family: var(--k4c-font-body); font-size: var(--k4c-fs-base); background: var(--k4c-white); color: var(--k4c-grey);
}
.k4c-form input:focus, .k4c-form textarea:focus, .k4c-form select:focus {
  outline: none; border-color: var(--k4c-purple); box-shadow: 0 0 0 3px var(--q2-focus-ring);
}
.k4c-form textarea { min-height: 8rem; resize: vertical; }
.k4c-form .buttons { margin-top: var(--k4c-space-5); }

/* ── News / blog (task 12648) ─────────────────────────────────────────────── */
/* Listing card grid */
.k4c-postgrid {
  display: grid;
  /* auto-fit (not auto-fill): an underfilled last row collapses its empty
     tracks and stretches the cards to fill, instead of leaving dead white
     space to the right of the final post (task #12750). */
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--k4c-space-6);
}
.k4c-postcard {
  display: flex; flex-direction: column;
  background: var(--k4c-white);
  border: 1px solid var(--k4c-grey-200);
  border-radius: var(--k4c-radius-lg);
  overflow: hidden;
  box-shadow: var(--k4c-shadow-sm);
  transition: transform var(--k4c-transition), box-shadow var(--k4c-transition);
}
.k4c-postcard:hover { transform: translateY(-4px); box-shadow: var(--k4c-shadow); }
.k4c-postcard__media {
  display: block; aspect-ratio: 16 / 9; background: var(--k4c-purple-100);
  overflow: hidden;
}
.k4c-postcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Logo / wordmark / designed-graphic thumbnails (task 12700): show the whole
   image 'contained' on a branded panel rather than cover-cropping it. Keeps the
   16:9 card box uniform across the grid while press logos (Newsweek, Metro) and
   Keeley's edge-text share-graphics read intact instead of clipped/gibberish. */
.k4c-postcard__media--logo {
  display: flex; align-items: center; justify-content: center;
  padding: var(--k4c-space-5);
  background:
    radial-gradient(125% 125% at 14% 16%, color-mix(in oklab, var(--k4c-yellow) 16%, transparent), transparent 44%),
    linear-gradient(135deg, color-mix(in oklab, var(--k4c-purple) 9%, var(--k4c-white)) 0%, var(--k4c-white) 72%);
}
.k4c-postcard__media.k4c-postcard__media--logo img {
  width: auto; height: auto; max-width: 80%; max-height: 66%;
  object-fit: contain; border-radius: var(--k4c-radius-sm);
}
.k4c-postcard__placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;
  padding: var(--k4c-space-4); text-align: center;
  background:
    radial-gradient(120% 120% at 15% 20%, color-mix(in oklab, var(--k4c-yellow) 26%, transparent), transparent 46%),
    linear-gradient(135deg, var(--k4c-purple) 0%, var(--k4c-purple-light) 100%);
  font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-bold);
  color: var(--k4c-white); letter-spacing: var(--k4c-tracking-caps);
  text-transform: uppercase; font-size: var(--k4c-fs-sm);
}
.k4c-postcard__placeholder::before {
  content: '✦'; display: block; margin-bottom: var(--k4c-space-2);
  color: var(--k4c-yellow); font-size: var(--k4c-fs-lg); line-height: 1;
}
.k4c-postcard__body { display: flex; flex-direction: column; flex: 1; padding: var(--k4c-space-5); }
.k4c-postcard__cat {
  margin: 0 0 var(--k4c-space-2); font-family: var(--k4c-font-heading);
  font-weight: var(--k4c-fw-semibold); text-transform: uppercase;
  letter-spacing: var(--k4c-tracking-caps); font-size: var(--k4c-fs-xs);
  color: var(--k4c-purple-light);
}
.k4c-postcard__title { font-size: var(--k4c-fs-lg); line-height: var(--k4c-lh-tight); margin: 0 0 var(--k4c-space-2); }
.k4c-postcard__title a { color: var(--k4c-purple); text-decoration: none; }
.k4c-postcard__title a:hover { color: var(--k4c-purple-light); }
.k4c-postcard__date { margin: 0 0 var(--k4c-space-3); font-size: var(--k4c-fs-sm); color: var(--k4c-grey-600); }
.k4c-postcard__excerpt { margin: 0 0 var(--k4c-space-4); font-size: var(--k4c-fs-sm); color: var(--k4c-grey-800); }
.k4c-postcard__link {
  margin-top: auto; align-self: flex-start; font-family: var(--k4c-font-heading);
  font-weight: var(--k4c-fw-semibold); font-size: var(--k4c-fs-sm);
  color: var(--k4c-purple); text-decoration: none;
}
.k4c-postcard__link:hover { color: var(--k4c-purple-light); }
.k4c-postcard__link span { transition: transform var(--k4c-transition); display: inline-block; }
.k4c-postcard__link:hover span { transform: translateX(3px); }

/* Pagination */
.k4c-pagination {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: var(--k4c-space-4); margin-top: var(--k4c-space-8);
}
.k4c-pagination__link {
  font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-semibold);
  color: var(--k4c-purple); text-decoration: none;
  padding: var(--k4c-space-2) var(--k4c-space-4);
  border: 1px solid var(--k4c-grey-200); border-radius: var(--k4c-radius-pill);
  transition: background var(--k4c-transition), color var(--k4c-transition);
}
.k4c-pagination__link:hover { background: var(--k4c-purple); color: var(--k4c-white); }
.k4c-pagination__status { font-size: var(--k4c-fs-sm); color: var(--k4c-grey-600); }

/* Single post */
.k4c-post__hero {
  margin: 0 auto var(--k4c-space-8); max-width: 60rem;
  border-radius: var(--k4c-radius-lg); overflow: hidden; box-shadow: var(--k4c-shadow);
}
.k4c-post__hero img { width: 100%; height: auto; display: block; }
.k4c-post__body { margin-inline: auto; }
.k4c-post__body :is(iframe, video) { max-width: 100%; }
/* Migrated WP posts bold a large share of phrases; purple-on-purple runs read as
   noise in body copy (visual review #12693 K4C-VP-07). Keep the bold weight for
   emphasis but drop the purple so paragraphs stay readable. Scoped to post bodies
   only, so intentional sparse purple <strong> on hand-authored pages is unaffected.
   Higher specificity (.k4c-prose.k4c-post__body) overrides .k4c-prose strong. */
.k4c-prose.k4c-post__body strong { color: inherit; }
.k4c-post__back { max-width: 46rem; margin: var(--k4c-space-8) auto 0; }
.k4c-post__back a {
  font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-semibold);
  color: var(--k4c-purple); text-decoration: none;
}
.k4c-post__back a:hover { color: var(--k4c-purple-light); }

/* ── Utility-page modules (task #12662): image grid + responsive embed ─────── */
.k4c-imggrid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.k4c-imgcard { margin: 0; }
.k4c-imgcard img {
  width: 100%; height: auto; display: block;
  border-radius: var(--k4c-radius-lg); box-shadow: var(--k4c-shadow);
}
/* Multi-image galleries: force a uniform crop box so mixed-aspect-ratio sources
   (e.g. rooms-for-hire = 2 square + 2 landscape) render at equal heights with
   captions on a shared baseline, instead of ragged (task #12698). A single-image
   gallery (brochure covers) is left at natural aspect so it never gets cropped. */
.k4c-imggrid:has(> .k4c-imgcard:nth-child(2)) .k4c-imgcard img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}
.k4c-imgcard figcaption {
  margin-top: .5rem; text-align: center;
  font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-semibold);
  color: var(--k4c-purple);
}
.k4c-embed { line-height: 0; }
.k4c-embed iframe { display: block; width: 100%; }

/* ── Media split — prose column + portrait (task #12670, About page) ───────── */
.k4c-split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--k4c-space-8);
  align-items: start;
}
.k4c-split .k4c-prose { max-width: none; }
.k4c-split .k4c-sec-head { margin-bottom: var(--k4c-space-5); }
.k4c-split__media { margin: 0; }
.k4c-split__media img {
  width: 100%; height: auto; display: block;
  border-radius: var(--k4c-radius-lg);
  box-shadow: var(--k4c-shadow);
  position: sticky;
  top: calc(var(--k4c-nav-height) + var(--k4c-space-5));
}
.k4c-split--reverse .k4c-split__media { order: -1; }
@media (max-width: 820px) {
  .k4c-split { grid-template-columns: 1fr; gap: var(--k4c-space-6); }
  .k4c-split__media { max-width: 22rem; margin-inline: auto; order: -1; }
  .k4c-split__media img { position: static; }
}

/* ── Card portrait — full-bleed image at card top (team grid, #12670) ──────── */
.k4c-card--media { padding-top: 0; overflow: hidden; }
.k4c-card__img {
  width: calc(100% + var(--k4c-space-6) * 2);
  max-width: none; /* #12761 A1: beat parent Pico img{max-width:100%} so the calc() full-bleed wins instead of collapsing to a 65px right-gap */
  margin: 0 calc(var(--k4c-space-6) * -1) var(--k4c-space-3);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  display: block;
  background: var(--k4c-purple-100);
}

/* ── Video-post card — 16:9 YouTube thumb + play badge (library video index,
      #1001363). Opt-in: only cards the hub template tags `--video` get it, so
      icon/heading section cards are untouched. Reuses the full-bleed technique
      from `.k4c-card__img` above. ──────────────────────────────────────────── */
.k4c-card--video { padding-top: 0; overflow: hidden; }
.k4c-card__thumb {
  position: relative;
  display: block;
  width: calc(100% + var(--k4c-space-6) * 2);
  margin: 0 calc(var(--k4c-space-6) * -1) var(--k4c-space-4);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--k4c-purple-100);
}
.k4c-card__thumb img {
  width: 100%; height: 100%;
  max-width: none; /* beat Pico img{max-width:100%} — same as .k4c-card__img */
  object-fit: cover;
  object-position: center;
  display: block;
}
.k4c-card__play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.k4c-card__play svg {
  width: 3.25rem; height: 3.25rem;
  padding: 0.85rem 0.75rem 0.85rem 0.95rem; /* nudge the triangle optically centre */
  box-sizing: border-box;
  fill: var(--k4c-white);
  background: rgba(81, 45, 122, 0.72); /* --k4c-purple @ ~72% */
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--k4c-radius-pill);
  transition: transform var(--k4c-transition), background var(--k4c-transition);
}
.k4c-card--video:hover .k4c-card__play svg { transform: scale(1.08); background: var(--k4c-purple); }

/* ============================================================================
   Imagery pass (#12665) — shared image conventions
   Consumed by the figure() and media_split() macros in sections.html.twig.
   Aspect-ratio boxes reserve space pre-load (CLS guard); rounding + shadow are
   the sitewide "warm card" treatment. Every colour / radius / space via tokens.
   ========================================================================== */

/* ---- Standalone responsive figure --------------------------------------- */
.k4c-figure { margin: 0; width: 100%; }
.k4c-figure__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--k4c-radius-lg);
  background: var(--k4c-purple-100);   /* graceful placeholder tint while loading */
}
/* Ratio variants — the box holds space so images never cause layout shift. */
.k4c-figure--wide     .k4c-figure__img,
.k4c-figure.k4c-figure--wide     { aspect-ratio: 16 / 9; }
.k4c-figure--photo    .k4c-figure__img { aspect-ratio: 4 / 3; }
.k4c-figure--portrait .k4c-figure__img { aspect-ratio: 4 / 5; }
.k4c-figure--square   .k4c-figure__img { aspect-ratio: 1 / 1; }
.k4c-figure--auto     .k4c-figure__img { aspect-ratio: auto; height: auto; }
/* Framed = white border + soft shadow for feature emphasis (matches the hero). */
.k4c-figure--framed .k4c-figure__img {
  border: 4px solid color-mix(in oklab, var(--k4c-white) 92%, transparent);
  box-shadow: var(--k4c-shadow-lg);
}
.k4c-figure__caption {
  margin-top: var(--k4c-space-3);
  font-size: var(--k4c-fs-sm);
  color: var(--k4c-grey-600);
  text-align: center;
}

/* ---- Text + image feature band ------------------------------------------ */
.k4c-mediasplit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
}
.k4c-mediasplit__title { margin: var(--k4c-space-3) 0 var(--k4c-space-4); }
.k4c-mediasplit__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k4c-space-4);
  margin-top: var(--k4c-space-5);
}
/* flip = image on the right (default: image left) */
.k4c-mediasplit--flip .k4c-mediasplit__media { order: 2; }

@media (max-width: 767.98px) {
  .k4c-mediasplit { grid-template-columns: 1fr; gap: var(--k4c-space-5); }
  /* Always image-then-text when stacked, regardless of desktop flip. */
  .k4c-mediasplit--flip .k4c-mediasplit__media { order: 0; }
}

/* ---- GoHighLevel form embeds (#12676) ----------------------------------- */
/* Reusable GHL opt-in iframe wrapper (partials/ghl_form.html.twig). The iframe
   height is set inline as a pre-paint fallback; GHL's form_embed.js resizes it
   to content height once loaded. scroll-margin keeps card jump-links clear of
   the fixed nav. */
.k4c-ghlform {
  scroll-margin-top: 6rem;
}
.k4c-ghlform + .k4c-ghlform { margin-top: var(--k4c-space-6); }
.k4c-ghlform__eyebrow { margin-bottom: var(--k4c-space-2); }
.k4c-ghlform__title { margin: 0 0 var(--k4c-space-2); }
.k4c-ghlform__text {
  margin: 0 0 var(--k4c-space-4);
  color: var(--k4c-grey-600);
}
.k4c-ghlform__iframe { display: block; }

/* Stacked free-gift forms on /resources/ — one column, comfortably readable. */
.k4c-ghlstack {
  max-width: 40rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--k4c-space-7);
}

/* Self-Reflection Check styles moved to css/selfcheck.css (#1001021) — loaded
   only on pages carrying a `selfcheck:` block (base.html.twig). */

/* ---------- Blog newsletter sign-up band (#1001610) — /news/ + every post ---------- */
.k4c-nlband { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,440px); gap: clamp(24px,4vw,56px); align-items: center; margin: clamp(40px,6vw,72px) 0 0; padding: clamp(28px,4vw,52px); border-radius: 28px; background: linear-gradient(135deg, #F3ECFA 0%, #FBF8F3 70%); border: 1px solid rgba(81,45,127,0.14); position: relative; overflow: hidden; }
.k4c-nlband::before { content: ""; position: absolute; left: -140px; bottom: -180px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(201,166,242,0.45) 0%, rgba(201,166,242,0) 70%); pointer-events: none; }
.k4c-nlband > * { position: relative; }
.k4c-nlband__eyebrow { margin: 0 0 10px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: #512D7F; }
.k4c-nlband__title { margin: 0 0 12px; font-family: var(--k4c-font-heading); font-size: clamp(26px,3vw,36px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; color: #241A33; text-transform: none; }
.k4c-nlband__title span { color: #8156B5; }
.k4c-nlband__text { margin: 0 0 16px; font-size: 16.5px; line-height: 1.55; color: #4A415A; max-width: 48ch; }
.k4c-nlband__list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.k4c-nlband__list li { position: relative; padding-left: 28px; font-size: 15px; color: #241A33; margin: 0; }
.k4c-nlband__list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #512D7F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat; }
.k4c-nlband__safe { margin: 0; font-size: 13px; color: #6F6580; }
.k4c-nlband__form { background: #fff; border-radius: 20px; padding: 8px; box-shadow: 0 18px 40px -22px rgba(42,21,63,0.35); min-height: 320px; }
.k4c-nlband__iframe { display: block; border-radius: 14px; }
@media (max-width: 900px) {
  .k4c-nlband { grid-template-columns: minmax(0,1fr); padding: 24px 18px; border-radius: 22px; }
  .k4c-nlband__form { padding: 4px; }
}
/* glue: Pico/scoped-blog rules leak square markers, h2 top margin and auto-hyphens into the band */
html .k4c-nlband .k4c-nlband__list li { list-style: none; }
html .k4c-nlband .k4c-nlband__list li::marker { content: none; }
html .k4c-nlband .k4c-nlband__title { margin: 0 0 12px; padding: 0; }
html .k4c-nlband, html .k4c-nlband * { hyphens: manual; -webkit-hyphens: manual; }