/* ============================================================================
   Key for Change — homepage sections (Mike's design, task #1000965)

   The homepage below the Statement hero, rebuilt as a PORTAL into the content
   types. Section order: mosaic → guides → videos → self-checks →
   thoughts & press → work with Keeley → success stories → closing.

   Adapted from the handoff HTML (keyforchange-homepage-sections.html):
   • EVERYTHING is scoped under .kfc-home so nothing leaks onto the hero, nav,
     footer or interior pages (this file is loaded home-only, but scoping keeps
     the generic class names — .container/.btn/.tag/.thumb — from clashing with
     quark2/pico even here).
   • The design's own web fonts (Bricolage/Newsreader/Instrument) are mapped
     onto the brand fonts (Montserrat/Lato) — same call the footer + heroes made.
     The italic pull-quote serif uses a system stack (no extra font download).
   • The design's warm palette is kept as .kfc-home-scoped custom properties; the
     primary purple (--brand #512D7F) already equals --k4c-purple.
   ========================================================================== */

.kfc-home {
  --ink: #241A33; --ink-2: #4A415A; --ink-3: #6F6580; --ink-4: #6A6076; /* #1001017: was #8A809A (3.2-3.7:1 on light bg, below WCAG AA); darkened to clear 4.5:1 on white/paper/lilac-2 for the small metadata (dates, read-time, "N statements", bylines) while staying muted */
  --paper: #FAF7F2; --paper-2: #F3EEE7; --white: #FFFFFF;
  --brand: #512D7F; --deep: #2A153F; --deeper: #1E0E30; --lilac: #C9A6F2; --lilac-2: #EADFF4;
  --line: rgba(81,45,127,0.14); --line-2: rgba(81,45,127,0.28);
  --display: var(--k4c-font-heading);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: var(--k4c-font-body);
  --gutter: 64px; --container: 1440px; --ease: cubic-bezier(.2,.7,.2,1);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
.kfc-home *, .kfc-home *::before, .kfc-home *::after { box-sizing: border-box; }
.kfc-home a { color: inherit; text-decoration: none; }
.kfc-home .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.kfc-home .hp { padding: 88px 0; }
.kfc-home .hp.dark { background: var(--deep); color: #F4EEFA; position: relative; overflow: hidden; }
.kfc-home .hp.dark::before { content: ""; position: absolute; right: -220px; top: -260px; width: 720px; height: 720px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(129,86,181,0.45) 0%, rgba(81,45,127,0.2) 45%, rgba(42,21,63,0) 70%); pointer-events: none; }
.kfc-home .hp.dark > * { position: relative; }
.kfc-home .hp.tint { background: var(--paper-2); }

/* section header: eyebrow + h2 + optional link, shared */
.kfc-home .sh { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 36px; }
.kfc-home .sh .eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); font-weight: 600; margin-bottom: 14px; }
.kfc-home .sh .eyebrow::before { content: ""; width: 24px; height: 1.5px; background: currentColor; }
.kfc-home .dark .sh .eyebrow { color: var(--lilac); }
.kfc-home .sh h2 { margin: 0; font-family: var(--display); font-size: 48px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; max-width: 760px; }
.kfc-home .sh h2 .accent { color: var(--brand); }
.kfc-home .dark .sh h2 .accent { color: var(--lilac); }
/* A11y (#1001017): the Quark2 base theme.css applies element-level
   h1-6{color:var(--brand)} + a muted tag/heading colour that override the
   inherited light colour on dark surfaces, leaving several headings/tags
   dark-purple-on-dark (~1.6:1, effectively invisible). Force them back to the
   light colour their dark container already intends. Same fix pattern as the
   .w-prog card + .t-video/.t-thought h3 which were already whitened. */
.kfc-home .dark .sh h2 { color: #fff; }
.kfc-home .t-video .tag,
.kfc-home .t-thought .tag,
.kfc-home .g-feature .tag { color: var(--lilac); }
.kfc-home .g-feature h3,
.kfc-home .v-feature h3,
.kfc-home .v-list h4 { color: #fff; }
/* #1001018: root-cause GUARD, not a per-element patch. The Quark2 base theme.css
   force-colours every h1-h6 to --brand (dark purple) — invisible on any dark
   surface, and the reason contrast kept resurfacing (fixed selector-by-selector
   in #1001017). Set a safe LIGHT default for all headings inside a .hp.dark
   block. :where() keeps it 0-specificity so the intended lilac .accent spans
   (and any explicit override above) still win — this only catches headings that
   would otherwise fall through to the base dark-purple. New dark content can no
   longer regress into dark-on-dark. */
.kfc-home .hp.dark :where(h1, h2, h3, h4, h5, h6) { color: #fff; }
.kfc-home .sh p { margin: 12px 0 0; font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 620px; }
.kfc-home .dark .sh p { color: #D9C6F0; }
.kfc-home .sh .more { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--brand); padding-bottom: 6px; }
.kfc-home .dark .sh .more { color: var(--lilac); }
.kfc-home .sh .more svg { width: 16px; height: 16px; }

.kfc-home .tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--brand); }
.kfc-home .dark .tag { color: var(--lilac); }
.kfc-home .tag svg { width: 13px; height: 13px; }
.kfc-home .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 24px; border-radius: 999px; font-size: 15px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.kfc-home .btn svg { width: 16px; height: 16px; }
.kfc-home .btn-brand { background: var(--brand); color: #fff; }
.kfc-home .btn-white { background: #fff; color: var(--deep); }
.kfc-home .btn-ghost { border: 1.5px solid rgba(255,255,255,0.35); color: #fff; font-weight: 600; }
.kfc-home .btn-outline { border: 1.5px solid var(--brand); color: var(--brand); font-weight: 600; }
.kfc-home .thumb { position: relative; background: linear-gradient(160deg, #6B4A96 0%, #3A2160 100%); border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.kfc-home .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kfc-home .thumb .play { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.kfc-home .thumb .play svg { width: 20px; height: 20px; margin-left: 3px; }
.kfc-home .thumb .dur { position: absolute; right: 12px; bottom: 10px; z-index: 1; padding: 3px 7px; border-radius: 5px; background: rgba(0,0,0,0.6); color: #fff; font-size: 11px; font-weight: 600; }

/* ---------- 1. MOSAIC ---------- */
/* First section under the hero gets the tighter top (was mosaic; work moved up, #1001605). */
.kfc-home [data-section="work"] { padding-top: 72px; }
.kfc-home .mosaic { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); grid-auto-rows: 132px; gap: 16px; }
.kfc-home .tile { position: relative; border-radius: 20px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.kfc-home .tile:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(36,26,51,0.12); }
.kfc-home .tile h3 { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-size: 22px; text-wrap: balance; }
.kfc-home .tile p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.kfc-home .tile .foot { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--ink-4); }
.kfc-home .t-video { grid-column: span 6; grid-row: span 3; padding: 0; background: var(--deep); color: #fff; }
.kfc-home .t-video .thumb { position: absolute; inset: 0; border-radius: 0; }
.kfc-home .t-video .thumb .play { width: 84px; height: 84px; }
.kfc-home .t-video .thumb .play svg { width: 30px; height: 30px; }
.kfc-home .t-video .over { position: relative; z-index: 1; margin-top: auto; padding: 24px; background: linear-gradient(0deg, rgba(20,8,34,0.85) 0%, rgba(20,8,34,0) 100%); display: flex; flex-direction: column; gap: 8px; }
.kfc-home .t-video h3 { font-size: 30px; color: #fff; }
.kfc-home .t-video p { color: #D9C6F0; }
.kfc-home .t-guide { grid-column: span 3; grid-row: span 2; background: var(--white); border: 1px solid var(--line); }
.kfc-home .t-guide h3 { font-size: 24px; }
.kfc-home .t-check { grid-column: span 3; grid-row: span 2; background: var(--lilac-2); }
.kfc-home .t-check .q { font-family: var(--serif); font-size: 19px; line-height: 1.35; color: var(--ink); }
.kfc-home .t-check .btn { min-height: 40px; padding: 10px 16px; font-size: 13px; align-self: flex-start; }
.kfc-home .t-stat { grid-column: span 3; grid-row: span 1; background: var(--brand); color: #fff; flex-direction: row; align-items: center; justify-content: space-around; padding: 16px; }
.kfc-home .t-stat.t-stat--wide { grid-column: span 6; }
.kfc-home .t-stat div { text-align: center; }
.kfc-home .t-stat b { display: block; font-family: var(--display); font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.kfc-home .t-stat span { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lilac); }
.kfc-home .t-term { grid-column: span 3; grid-row: span 1; background: var(--white); border: 1px solid var(--line); flex-direction: row; align-items: center; gap: 16px; }
.kfc-home .t-term h3 { font-size: 20px; }
.kfc-home .t-term p { font-size: 13px; }
.kfc-home .t-thought { grid-column: span 4; grid-row: span 2; background: var(--deeper); color: #fff; }
.kfc-home .t-thought h3 { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 24px; color: #fff; letter-spacing: 0; line-height: 1.25; }
.kfc-home .t-thought p { color: #B9A6D4; }
.kfc-home .t-press { grid-column: span 4; grid-row: span 2; background: var(--white); border: 1px solid var(--line); }
.kfc-home .t-press .logos { display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--ink-3); }
.kfc-home .t-story { grid-column: span 4; grid-row: span 2; background: var(--lilac-2); }
.kfc-home .t-story h3 { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 20px; letter-spacing: 0; line-height: 1.3; }

/* #1001092 — visual motif on the plain mosaic cards.
   Chrome-capture feedback: the text-only tiles (guide / self-check / thought /
   press / story) read flat next to the image-backed video tile — "something
   visual should be included in each card". Add an on-brand decorative layer to
   each: an icon watermark on guide + self-check, an oversized quotation-mark
   motif on the two pull-quote cards, and tidy logo chips on the press card.
   Copy is untouched — every motif is a pure-CSS pseudo-element sitting BEHIND
   the text (real content lifted with z-index:1), so nothing is read aloud and
   nothing reflows. */
.kfc-home .t-guide > *, .kfc-home .t-check > *,
.kfc-home .t-thought > *, .kfc-home .t-story > * { position: relative; z-index: 1; }

/* icon watermarks — guide (open book) + self-check (shield-check) */
.kfc-home .t-guide::before, .kfc-home .t-check::before {
  content: ""; position: absolute; right: -16px; bottom: -20px;
  width: 122px; height: 122px; pointer-events: none;
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.kfc-home .t-guide::before { opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23512D7F'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2019.5A2.5%202.5%200%200%201%206.5%2017H20'/%3E%3Cpath%20d='M6.5%202H20v20H6.5A2.5%202.5%200%200%201%204%2019.5v-15A2.5%202.5%200%200%201%206.5%202z'/%3E%3C/svg%3E"); }
.kfc-home .t-check::before { opacity: .10;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23512D7F'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z'/%3E%3Cpolyline%20points='9%2012%2011.5%2014.5%2016%209.5'/%3E%3C/svg%3E"); }

/* oversized quotation-mark motif on the two pull-quote cards */
.kfc-home .t-thought::before, .kfc-home .t-story::before {
  content: "\201C"; position: absolute; right: 18px; top: -34px;
  font-family: var(--serif); font-weight: 700; font-size: 160px; line-height: 1;
  pointer-events: none; }
.kfc-home .t-thought::before { color: var(--lilac); opacity: .20; }
.kfc-home .t-story::before { color: var(--brand); opacity: .12; }

/* press card — turn the plain bold names into a tidy logo-chip wall */
.kfc-home .t-press .logos { gap: 8px 10px; font-size: 15px; }
.kfc-home .t-press .logos span { padding: 6px 12px; border-radius: 10px; background: var(--paper-2); border: 1px solid var(--line); line-height: 1; }

/* ---------- 2. GUIDES ---------- */
.kfc-home .guides { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; }
.kfc-home .g-feature { border-radius: 24px; background: var(--deep); color: #fff; padding: 32px; display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden; }
.kfc-home .g-feature::before { content: ""; position: absolute; right: -160px; bottom: -200px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(129,86,181,0.5) 0%, rgba(42,21,63,0) 70%); }
.kfc-home .g-feature > * { position: relative; }
.kfc-home .g-feature h3 { margin: 0; font-family: var(--display); font-size: 40px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; }
.kfc-home .g-feature h3 span { color: var(--lilac); }
.kfc-home .g-feature p { margin: 0; font-size: 16px; line-height: 1.5; color: #D9C6F0; }
.kfc-home .g-feature .meta { font-size: 12px; color: #B9A6D4; }
.kfc-home .g-feature .btn { align-self: flex-start; margin-top: auto; }
.kfc-home .g-groups { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.kfc-home .g-group { border-radius: 20px; background: var(--white); border: 1px solid var(--line); padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.kfc-home .g-group b { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); font-weight: 600; margin-bottom: 8px; }
.kfc-home .g-group a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; font-weight: 500; color: var(--ink); }
.kfc-home .g-group a svg { width: 14px; height: 14px; color: var(--ink-4); flex-shrink: 0; }
.kfc-home .g-group a:hover { color: var(--brand); }
.kfc-home .g-group a:hover svg { color: var(--brand); }
.kfc-home .g-group a small { font-size: 11px; color: var(--ink-4); font-weight: 400; margin-left: auto; }

/* ---------- 3. VIDEOS ---------- */
.kfc-home .videos { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; margin-bottom: 20px; }
.kfc-home .v-feature { position: relative; }
.kfc-home .v-feature .thumb { aspect-ratio: 16 / 9; border-radius: 20px; box-shadow: 0 30px 60px rgba(0,0,0,0.35); }
.kfc-home .v-feature .thumb .play { width: 84px; height: 84px; }
.kfc-home .v-feature .thumb .play svg { width: 30px; height: 30px; }
.kfc-home .v-feature h3 { margin: 16px 0 6px; font-family: var(--display); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.kfc-home .v-feature p { margin: 0; font-size: 15px; color: #D9C6F0; line-height: 1.5; }
.kfc-home .v-list { display: flex; flex-direction: column; gap: 4px; }
.kfc-home .v-list a { display: grid; grid-template-columns: 128px 1fr; gap: 14px; align-items: center; padding: 10px; border-radius: 14px; transition: background .2s; }
.kfc-home .v-list a:hover { background: rgba(255,255,255,0.06); }
.kfc-home .v-list .thumb { aspect-ratio: 16 / 9; border-radius: 10px; }
.kfc-home .v-list .thumb .play { width: 32px; height: 32px; }
.kfc-home .v-list .thumb .play svg { width: 12px; height: 12px; }
.kfc-home .v-list h4 { margin: 0 0 3px; font-family: var(--display); font-size: 16px; font-weight: 700; line-height: 1.2; }
.kfc-home .v-list span { font-size: 12px; color: #B9A6D4; }
.kfc-home .v-topics { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.14); }
.kfc-home .v-topics .label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #B9A6D4; margin-right: 6px; }
.kfc-home .chip { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.25); color: #fff; font-size: 13px; font-weight: 500; }
.kfc-home .v-topics .yt { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #D9C6F0; }
.kfc-home .v-topics .yt svg { width: 16px; height: 16px; color: var(--lilac); }

/* ---------- 4. SELF-CHECKS — "app button" cards (#1001016) ----------
   The WHOLE card is the link and reads as one big tappable button: numbered
   badge + statement count, bold title, blurb, then a full-width solid purple
   "Start the check" pill with an arrow disc. Hover/focus lifts the card, fills
   the badge, slides the gradient and flips the arrow disc to brand yellow;
   :active gives a real press. Everything degrades to a static card under
   prefers-reduced-motion. */
.kfc-home .checks { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 16px; }
.kfc-home .check { position: relative; isolation: isolate; overflow: hidden; border-radius: 22px; background: linear-gradient(180deg, #FFFFFF 0%, #F8F4FC 100%); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(36,26,51,0.04), 0 8px 24px rgba(81,45,127,0.06); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 10px; min-height: 240px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .2s, transform .25s var(--ease), box-shadow .25s var(--ease); }
.kfc-home .check::before { content: ""; position: absolute; z-index: -1; right: -70px; top: -70px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, rgba(201,166,242,0.5) 0%, rgba(201,166,242,0) 70%); opacity: .75; pointer-events: none; transition: opacity .25s, transform .4s var(--ease); }
.kfc-home .check:hover, .kfc-home .check:focus-visible { border-color: var(--line-2); transform: translateY(-4px); box-shadow: 0 2px 4px rgba(36,26,51,0.05), 0 22px 44px rgba(81,45,127,0.16); }
.kfc-home .check:hover::before, .kfc-home .check:focus-visible::before { opacity: 1; transform: scale(1.4); }
.kfc-home .check:active { transform: translateY(-1px) scale(.985); transition-duration: .08s; }
.kfc-home .check:focus-visible { outline: 3px solid color-mix(in oklab, var(--brand) 45%, transparent); outline-offset: 3px; }
.kfc-home .check .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kfc-home .check .n { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: var(--lilac-2); color: var(--brand); font-family: var(--display); font-size: 14px; font-weight: 800; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; transition: background .2s, color .2s; }
.kfc-home .check:hover .n, .kfc-home .check:focus-visible .n { background: var(--brand); color: #fff; }
.kfc-home .check .meta { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); font-weight: 600; white-space: nowrap; }
.kfc-home .check h3 { margin: 4px 0 0; font-family: var(--display); font-size: 21px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; color: var(--ink); text-wrap: balance; }
.kfc-home .check p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
.kfc-home .check .go { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 6px 6px 6px 18px; border-radius: 999px; background: linear-gradient(135deg, #6544A0 0%, var(--brand) 50%, #3D2260 100%); background-size: 180% 100%; background-position: 0 0; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; line-height: 1; box-shadow: 0 6px 16px rgba(81,45,127,0.28), inset 0 1px 0 rgba(255,255,255,0.18); transition: background-position .4s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease); }
.kfc-home .check .go .arr { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.16); color: #fff; transition: background .2s, color .2s, transform .3s var(--ease); }
.kfc-home .check .go .arr svg { width: 16px; height: 16px; }
.kfc-home .check:hover .go, .kfc-home .check:focus-visible .go { background-position: 100% 0; box-shadow: 0 10px 22px rgba(81,45,127,0.36), inset 0 1px 0 rgba(255,255,255,0.22); }
.kfc-home .check:hover .go .arr, .kfc-home .check:focus-visible .go .arr { background: var(--k4c-yellow, #FFC729); color: var(--deep); transform: translateX(3px); }
.kfc-home .check:active .go { transform: scale(.98); box-shadow: 0 3px 8px rgba(81,45,127,0.3); }
.kfc-home .checks-note { margin-top: 20px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-3); }
.kfc-home .checks-note svg { width: 16px; height: 16px; color: var(--brand); }
@media (prefers-reduced-motion: reduce) {
  .kfc-home .check, .kfc-home .check::before, .kfc-home .check .n, .kfc-home .check .go, .kfc-home .check .go .arr { transition: none; }
  .kfc-home .check:hover, .kfc-home .check:focus-visible, .kfc-home .check:active { transform: none; }
  .kfc-home .check:hover::before { transform: none; }
  .kfc-home .check:hover .go .arr { transform: none; }
}

/* ---------- 5. THOUGHTS & PRESS ---------- */
.kfc-home .thoughts { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; }
.kfc-home .posts { display: flex; flex-direction: column; }
.kfc-home .post { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding: 22px 0; border-top: 1px solid var(--line); align-items: center; text-decoration: none; color: inherit; transition: transform .18s ease; }
.kfc-home .post:last-child { border-bottom: 1px solid var(--line); }
.kfc-home .post:hover { transform: translateX(3px); }
.kfc-home .post-thumb { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--paper-2); }
.kfc-home .post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.kfc-home .post:hover .post-thumb img { transform: scale(1.05); }
.kfc-home .post-thumb--logo { display: grid; place-items: center; background: linear-gradient(135deg, var(--paper-2), var(--white)); border: 1px solid var(--line); }
.kfc-home .post-thumb--logo img { width: auto; height: auto; max-width: 82%; max-height: 82%; object-fit: contain; }
.kfc-home .post:hover .post-thumb--logo img { transform: none; }
.kfc-home .post-thumb__ph { font-family: var(--display); font-size: 12px; font-weight: 700; color: var(--brand); text-align: center; padding: 8px; }
.kfc-home .post-txt { min-width: 0; }
.kfc-home .post time { display: block; font-size: 12px; color: var(--ink-4); margin-top: 8px; font-variant-numeric: tabular-nums; }
.kfc-home .post .cat { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); font-weight: 600; margin-bottom: 6px; }
.kfc-home .post h3 { margin: 0 0 6px; font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.kfc-home .post p { margin: 0; font-family: var(--serif); font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.kfc-home .press-col { border-radius: 24px; background: var(--white); border: 1px solid var(--line); padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.kfc-home .press-col b { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); }
.kfc-home .press-col .logos { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.kfc-home .press-col .logos span { padding: 14px 8px; border-radius: 12px; background: var(--paper-2); text-align: center; font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--ink-3); }
.kfc-home .press-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.kfc-home .press-col li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.4; }
.kfc-home .press-col li span { display: block; font-size: 12px; color: var(--ink-4); }

/* ---------- 6. WORK WITH KEELEY ---------- */
.kfc-home .work { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.kfc-home .w-card { border-radius: 22px; padding: 28px; display: flex; flex-direction: column; gap: 12px; min-height: 340px; position: relative; overflow: hidden; }
.kfc-home .w-card .tag { margin-bottom: 4px; }
.kfc-home .w-card h3 { margin: 0; font-family: var(--display); font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.kfc-home .w-card p { margin: 0; font-size: 15px; line-height: 1.5; }
.kfc-home .w-card ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.kfc-home .w-card li { display: flex; gap: 8px; align-items: flex-start; }
.kfc-home .w-card li svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
.kfc-home .w-card .btn { margin-top: auto; align-self: flex-start; }
.kfc-home .w-therapy { background: var(--white); border: 1px solid var(--line); color: var(--ink); }
.kfc-home .w-therapy p { color: var(--ink-2); }
.kfc-home .w-therapy li svg { color: var(--brand); }
.kfc-home .w-prog { background: var(--brand); color: #fff; }
.kfc-home .w-prog .tag { color: var(--lilac); }
/* h3 + li need an explicit white here: the Quark2 base theme.css applies a
   sitewide h1-6{color:var(--brand)} and li{color:#242424} that win over the
   card's inherited color on this dark purple surface — leaving both dark-on-dark
   (~1:1, invisible). Same fix pattern as programme.css .prg-kfc li / home.css
   .t-video h3, which already whiten text on their dark surfaces. (#1001017) */
.kfc-home .w-prog h3 { color: #fff; }
.kfc-home .w-prog li { color: #fff; }
.kfc-home .w-prog p { color: #EADFF4; }
.kfc-home .w-prog li svg { color: var(--lilac); }
.kfc-home .w-retreat { background: var(--lilac-2); color: var(--ink); }
.kfc-home .w-retreat p { color: var(--ink-2); }
.kfc-home .w-retreat li svg { color: var(--brand); }

/* ---------- 7. SUCCESS STORIES ----------
   3 flip-columns, one card visible each = only THREE on screen, but each column
   flips through its own stack of quotes on a staggered timer (task #1001095). The
   stagger is what stops it feeling like a plain slide carousel. Column height is
   equalised to the tallest card so the row never jumps as content flips. */
.kfc-home .stories { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; align-items: stretch; }
.kfc-home .story-col { position: relative; perspective: 1400px; display: grid; }
/* every card in a column stacks on the same grid cell so the column sizes to the
   tallest quote and cards flip in place without shifting their neighbours */
.kfc-home .story-col .story { grid-area: 1 / 1; }
.kfc-home .story { border-radius: 22px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); padding: 28px; display: flex; flex-direction: column; gap: 18px; transform-origin: center top; backface-visibility: hidden; transition: transform .38s cubic-bezier(.4,0,.2,1), opacity .38s ease; will-change: transform, opacity; }
.kfc-home .story[hidden] { display: none; }
/* JS states: flip the current card out (up), swap content, flip the next in (down) */
.kfc-home .stories.is-live .story-col .story { display: flex; }          /* JS keeps only one non-flipped card; siblings are pre-positioned */
.kfc-home .story.is-out { transform: rotateX(-92deg); opacity: 0; }
.kfc-home .story.is-pre { transition: none; transform: rotateX(92deg); opacity: 0; }
.kfc-home .story .mark { font-family: var(--display); font-size: 56px; line-height: 0.6; color: var(--lilac); font-weight: 800; }
.kfc-home .story p { margin: 0; font-family: var(--serif); font-size: 20px; line-height: 1.4; color: #fff; text-wrap: pretty; }
.kfc-home .story .who { margin-top: auto; font-size: 13px; color: #B9A6D4; }
.kfc-home .story .who b { color: #fff; font-weight: 600; display: block; }
/* motion-safe fallback: no flipping, gentle crossfade handled by JS; if JS is off
   the [hidden] siblings simply never appear, leaving three static cards. */
@media (prefers-reduced-motion: reduce) {
  .kfc-home .story { transition: opacity .4s ease; }
  .kfc-home .story.is-out, .kfc-home .story.is-pre { transform: none; opacity: 0; }
}

/* ---------- 8. CLOSING CTA ---------- */
.kfc-home .close { display: grid; grid-template-columns: 300px 1fr; gap: 0; border-radius: 28px; overflow: hidden; background: var(--white); border: 1px solid var(--line); }
.kfc-home .close .photo { background: linear-gradient(160deg, #9A7CC0 0%, #5E3A90 60%, #2A153F 100%); position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 100%; }
.kfc-home .close .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; /* keep her whole head in frame (#1001605 portrait) */ }
.kfc-home .close .body { padding: 40px 44px; display: flex; flex-direction: column; gap: 16px; }
.kfc-home .close .q { margin: 0; font-family: var(--serif); font-size: 30px; line-height: 1.3; font-style: italic; color: var(--ink); }
.kfc-home .close .q b { font-style: normal; font-weight: 500; color: var(--brand); }
.kfc-home .close .who { font-size: 13px; color: var(--ink-3); }
.kfc-home .close .who b { color: var(--ink); font-weight: 600; }
.kfc-home .close .row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .kfc-home { --gutter: 32px; }
  .kfc-home .hp { padding: 64px 0; }
  .kfc-home .sh { flex-direction: column; align-items: flex-start; gap: 12px; }
  .kfc-home .sh h2 { font-size: 38px; }
  .kfc-home .mosaic { grid-auto-rows: 120px; }
  .kfc-home .t-video { grid-column: span 12; grid-row: span 3; }
  .kfc-home .t-guide, .kfc-home .t-check { grid-column: span 6; }
  .kfc-home .t-stat, .kfc-home .t-stat.t-stat--wide, .kfc-home .t-term { grid-column: span 6; }
  .kfc-home .t-thought, .kfc-home .t-press, .kfc-home .t-story { grid-column: span 6; }
  .kfc-home .guides, .kfc-home .videos, .kfc-home .thoughts { grid-template-columns: 1fr; }
  .kfc-home .g-groups { grid-template-columns: 1fr; }
  .kfc-home .checks { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .kfc-home .work, .kfc-home .stories { grid-template-columns: 1fr; }
  .kfc-home .close { grid-template-columns: 1fr; }
  .kfc-home .close .photo { height: 220px; min-height: 0; }
}
@media (max-width: 640px) {
  .kfc-home { --gutter: 20px; }
  .kfc-home .mosaic { grid-auto-rows: auto; }
  .kfc-home .tile { grid-row: auto !important; grid-column: span 12 !important; min-height: 140px; }
  .kfc-home .t-video { min-height: 320px; }
  .kfc-home .checks { grid-template-columns: 1fr; gap: 12px; }
  .kfc-home .check { min-height: 0; }
  .kfc-home .post { grid-template-columns: 104px 1fr; gap: 16px; align-items: start; }
  .kfc-home .post h3 { font-size: 19px; }
  .kfc-home .post p { font-size: 15px; }
  .kfc-home .close .body { padding: 28px 22px; }
  .kfc-home .close .q { font-size: 24px; }
  .kfc-home .v-topics .yt { margin-left: 0; }
}

/* ===== Featured-video inline player (task #1001090) =====
   The mosaic "Latest/Featured video" tile and the section-3 v-feature are now
   click-to-play. With JS off they stay plain links to the video article page
   (progressive enhancement — no dead controls, no autoplay: YMYL §7). With JS,
   home-video.js swaps the poster for a youtube-nocookie iframe on click. */
.kfc-home .kfc-vplay { cursor: pointer; }
.kfc-home .over { text-decoration: none; }
.kfc-home .v-feature h3 a { color: inherit; text-decoration: none; }
.kfc-home .v-feature h3 a:hover { text-decoration: underline; }
/* subtle affordance that the poster is a real control */
.kfc-home .kfc-vplay .play { transition: transform .15s ease, box-shadow .15s ease; }
.kfc-home .kfc-vplay:hover .play,
.kfc-home .kfc-vplay:focus-visible .play { transform: scale(1.06); box-shadow: 0 14px 36px rgba(0,0,0,0.4); }
.kfc-home .kfc-vplay:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
/* the injected iframe fills the poster box it replaces */
.kfc-home .kfc-vframe { border: 0; display: block; }
.kfc-home .t-video .kfc-vframe { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.kfc-home .v-feature .kfc-vframe { width: 100%; aspect-ratio: 16/9; border-radius: 20px; box-shadow: 0 30px 60px rgba(0,0,0,0.35); }