/* ============================================================================
   Key for Change — Navigation component (task 12634)

   Fixed top nav. Transparent-over-hero → solid dark-purple on scroll.
   All colour / type / spacing / metric values come from tokens.css (--k4c-*);
   this file only lays out the nav. Loaded after tokens.css so it may reference
   every brand var. Mobile breakpoint: 768px (off-canvas panel below).
   ========================================================================== */

/* ---- The fixed bar ------------------------------------------------------- */
.k4c-nav {
  position: fixed;
  inset: 0 0 auto 0;                 /* top:0; left:0; right:0 */
  z-index: var(--k4c-z-nav);
  height: var(--k4c-nav-height);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background-color var(--k4c-transition),
              box-shadow var(--k4c-transition),
              height var(--k4c-transition);
}

/* Contrast scrim: dark fade under the bar so white text/logo stays legible at
   the very top even before the dark hero is in place, and over any light
   content that scrolls beneath. Fades out once the bar goes solid. */
.k4c-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--k4c-purple-900) 88%, transparent) 0%,
    color-mix(in oklab, var(--k4c-purple-900) 42%, transparent) 55%,
    transparent 100%
  );
  opacity: 1;
  transition: opacity var(--k4c-transition);
}

/* Scrolled state (toggled by nav.js) — solid brand purple + lift. */
.k4c-nav[data-scrolled="true"] {
  background: var(--k4c-purple);
  box-shadow: var(--k4c-shadow);
  height: calc(var(--k4c-nav-height) - 0.75rem);
}
.k4c-nav[data-scrolled="true"]::before { opacity: 0; }

.k4c-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k4c-space-5);
  width: 100%;
  height: 100%;
  position: relative;                /* sit above the scrim */
  z-index: 1;
}

/* ---- Brand / logo -------------------------------------------------------- */
.k4c-nav__brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  line-height: 0;
}
.k4c-nav__logo {
  display: block;
  height: 3.5rem;                    /* large at top so the "Key for Change" strap under the key reads (#1000989) */
  width: auto;
  transition: height var(--k4c-transition);
}
/* On scroll the whole bar tightens — shrink the logo back to its compact size in step. */
.k4c-nav[data-scrolled="true"] .k4c-nav__logo { height: 2.5rem; }

/* ---- Desktop link list --------------------------------------------------- */
.k4c-nav__menu { flex: 1 1 auto; display: flex; justify-content: center; }
.k4c-nav__list {
  display: flex;
  align-items: center;
  gap: var(--k4c-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.k4c-nav__link {
  position: relative;
  display: inline-block;
  padding: var(--k4c-space-2) 0;
  font-family: var(--k4c-font-heading);
  font-weight: var(--k4c-fw-semibold);
  font-size: var(--k4c-fs-sm);
  letter-spacing: 0.01em;
  color: var(--k4c-white);
  text-decoration: none;
  transition: color var(--k4c-transition);
}
/* Yellow underline grows from the centre on hover / focus / current page. */
.k4c-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--k4c-yellow);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--k4c-transition);
}
.k4c-nav__link:hover,
.k4c-nav__link:focus-visible { color: var(--k4c-yellow); }
.k4c-nav__link:hover::after,
.k4c-nav__link:focus-visible::after,
.k4c-nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* ---- Particle emitter (task #1000994) ------------------------------------ *
   A nav item tagged `.k4c-nav__item--emit` gently emits hearts / happiness
   emojis that drift up and away from the CENTRE of the link. Desktop only.
   Pure CSS: only `transform` + `opacity` animate (GPU-composited, cheap), just
   six particles, one long staggered loop — subtle, not a particle engine. The
   `--emit` class is the whole switch; move it (or the `emit` data flag in
   nav.html.twig) to make any other item emit.                                 */
.k4c-nav__item--emit { position: relative; }
/* Keep the label crisp above the drifting field — emoji rise from behind it. */
.k4c-nav__item--emit .k4c-nav__link { position: relative; z-index: 1; }

.k4c-emit {
  position: absolute;
  left: 50%;                 /* centre anchor under the nav item (desktop) */
  bottom: 0.15rem;
  width: 0;                  /* zero-width so children fan out from dead centre */
  height: 0;
  pointer-events: none;
  z-index: 0;                /* behind the link text, in front of the bar bg */
}
.k4c-emit__p {
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: 0.72rem;
  line-height: 1;
  opacity: 0;
  transform: translate(-50%, 0) scale(0.6);
  will-change: transform, opacity;
  animation: k4c-emit-rise 4.8s ease-in-out infinite;
}
/* Per-particle drift, timing + stagger so they never move in lockstep. Each
   sets how far it floats sideways (--dx) and up (--dy) via the shared keyframe. */
.k4c-emit__p:nth-child(1) { --dx: -14px; --dy: -42px; animation-delay: 0s;    animation-duration: 5.0s; }
.k4c-emit__p:nth-child(2) { --dx:   9px; --dy: -50px; animation-delay: 0.9s;  animation-duration: 4.4s; }
.k4c-emit__p:nth-child(3) { --dx: -22px; --dy: -46px; animation-delay: 1.7s;  animation-duration: 5.4s; }
.k4c-emit__p:nth-child(4) { --dx:  18px; --dy: -40px; animation-delay: 2.4s;  animation-duration: 4.8s; }
.k4c-emit__p:nth-child(5) { --dx:  -4px; --dy: -54px; animation-delay: 3.1s;  animation-duration: 5.2s; }
.k4c-emit__p:nth-child(6) { --dx:  24px; --dy: -44px; animation-delay: 3.8s;  animation-duration: 4.6s; }

@keyframes k4c-emit-rise {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(0.55); }
  15%  { opacity: 0.9; }
  70%  { opacity: 0.55; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), var(--dy, -46px)) scale(1); }
}

/* Motion-sensitive users: no drifting emoji at all. */
@media (prefers-reduced-motion: reduce) {
  .k4c-emit { display: none; }
}
/* Desktop-only: the inline nav (and this emitter) don't render < 900px anyway
   (the whole .k4c-nav__menu is hidden), but hide the field explicitly so it can
   never leak into the mobile sheet if the markup is ever reused. */
@media (max-width: 899.98px) {
  .k4c-emit { display: none; }
}

/* ---- Actions (CTA + hamburger) ------------------------------------------- */
.k4c-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--k4c-space-4);
  flex: 0 0 auto;
}
/* Tighten the shared .k4c-btn for the bar. The mock retires the yellow CTA for
   a white pill (keyforchange-mobile-nav.html note) — the bar is always dark, so
   white keeps the strongest contrast. */
.k4c-nav__cta {
  padding: var(--k4c-space-2) var(--k4c-space-5);
  font-size: var(--k4c-fs-sm);
  background: var(--k4c-white);
  color: var(--k4c-purple-900);
}
.k4c-nav__cta:hover { background: var(--k4c-purple-100); color: var(--k4c-purple-900); }

/* Hamburger — hidden on desktop. */
.k4c-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.k4c-nav__bar {
  display: block;
  width: 26px;
  height: 2px;
  margin-inline: auto;
  background: var(--k4c-white);
  border-radius: var(--k4c-radius-pill);
  transition: transform var(--k4c-transition), opacity var(--k4c-transition);
}

/* ---- Mega dropdown (desktop) --------------------------------------------- *
   A top-level link carrying a `mega` panel reveals a full-bleed branded panel
   on hover / keyboard focus-within, exposing the deeper content hierarchy.
   Reveal is CSS-first (:hover / :focus-within) so it works without JS; nav.js
   layers on aria-expanded + touch "tap-to-open" + ESC/outside-click close.    */
.k4c-nav__item--mega { position: relative; }

/* Hover bridge (#1001096): the link box is ~33px tall and vertically centred in
   the 80px bar, but the panel is fixed at top:var(--k4c-nav-height) — leaving a
   ~24px dead gap below the link. Moving the cursor straight down into that gap
   dropped :hover/.is-open and the panel vanished before the mouse reached it.
   This transparent pad extends the hoverable area from the link's bottom edge
   down past the panel top, so hover never breaks. pointer-events are gated so
   the pad only exists while the menu is engaged and never blocks the hero. */
.k4c-nav__item--mega::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 2.25rem;                   /* comfortably spans the link→panel gap */
  pointer-events: none;
}
.k4c-nav__item--mega:hover::after,
.k4c-nav__item--mega:focus-within::after,
.k4c-nav__item--mega.is-open::after {
  pointer-events: auto;
}

.k4c-nav__link--mega { display: inline-flex; align-items: center; gap: 0.4rem; }
.k4c-nav__chev {
  flex: 0 0 auto;
  transition: transform var(--k4c-transition);
}
.k4c-nav__item--mega:hover > .k4c-nav__link--mega .k4c-nav__chev,
.k4c-nav__item--mega:focus-within > .k4c-nav__link--mega .k4c-nav__chev,
.k4c-nav__item--mega.is-open > .k4c-nav__link--mega .k4c-nav__chev {
  transform: rotate(180deg);
}

.k4c-mega {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--k4c-nav-height);
  background: var(--k4c-white);
  border-top: 3px solid var(--k4c-yellow);
  box-shadow: var(--k4c-shadow-lg);
  /* hidden resting state */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity var(--k4c-transition),
              transform var(--k4c-transition),
              visibility 0s linear var(--k4c-dur, 220ms);
}
/* nav shrinks 0.75rem on scroll — keep the panel flush to the bar. */
.k4c-nav[data-scrolled="true"] .k4c-mega { top: calc(var(--k4c-nav-height) - 0.75rem); }

.k4c-nav__item--mega:hover > .k4c-mega,
.k4c-nav__item--mega:focus-within > .k4c-mega,
.k4c-nav__item--mega.is-open > .k4c-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity var(--k4c-transition),
              transform var(--k4c-transition),
              visibility 0s;
}

.k4c-mega__inner {
  display: flex;
  gap: var(--k4c-space-7);
  align-items: stretch;
  padding-block: var(--k4c-space-6) var(--k4c-space-7);
}
/* Panels that carry a promo image tile (Resources) pack three areas — tile grid,
   promo card, feature card — so tighten the gap and let each area size itself. */
.k4c-mega__inner--promo { gap: var(--k4c-space-6); align-items: stretch; flex-wrap: wrap; }
/* Below ~1100px the three areas can't share one row — let promo + feature wrap
   under the tile grid rather than overflow the bar. */
.k4c-mega__inner--promo .k4c-mega__promo { flex: 1 1 240px; }
.k4c-mega__inner--promo .k4c-mega__feature { flex: 1 1 260px; }
.k4c-mega__cols {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  justify-content: start;
  gap: var(--k4c-space-5) var(--k4c-space-6);
  align-content: start;
}
/* Single-group mega (e.g. Resources): a wider column that holds a 2-up tile grid
   instead of one thin track stranded against a void. */
.k4c-mega__cols--compact { grid-template-columns: minmax(300px, 460px); }
.k4c-mega__heading {
  display: flex;
  align-items: center;
  gap: var(--k4c-space-2);
  margin: 0 0 var(--k4c-space-3);
  padding-bottom: var(--k4c-space-2);
  font-family: var(--k4c-font-heading);
  font-size: var(--k4c-fs-xs);
  font-weight: var(--k4c-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--k4c-purple-light);
  border-bottom: 1px solid var(--k4c-purple-100);
}
.k4c-mega__head-ico { display: inline-grid; place-items: center; color: var(--k4c-purple-light); }
.k4c-mega__head-ico .k4c-ico { width: 15px; height: 15px; }
.k4c-mega__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.15rem; }
/* Resources: render the group as a 2-up card grid so the panel reads full. */
.k4c-mega__list--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--k4c-space-3); }

/* Base mega link is now an icon-chip + label row (#1001028). */
.k4c-mega__link {
  display: flex;
  align-items: center;
  gap: var(--k4c-space-3);
  padding: var(--k4c-space-2);
  margin-inline: calc(-1 * var(--k4c-space-2));
  border-radius: var(--k4c-radius);
  font-family: var(--k4c-font-heading);
  font-weight: var(--k4c-fw-medium);
  font-size: var(--k4c-fs-sm);
  line-height: 1.3;
  color: var(--k4c-purple);
  text-decoration: none;
  transition: background-color var(--k4c-transition), color var(--k4c-transition);
}
.k4c-mega__link:hover,
.k4c-mega__link:focus-visible {
  background: var(--k4c-purple-50);
  color: var(--k4c-purple-dark);
}
.k4c-mega__chip {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--k4c-purple-100);
  color: var(--k4c-purple);
  transition: background-color var(--k4c-transition), color var(--k4c-transition), transform var(--k4c-transition);
}
.k4c-mega__link:hover .k4c-mega__chip,
.k4c-mega__link:focus-visible .k4c-mega__chip {
  background: var(--k4c-purple);
  color: var(--k4c-white);
  transform: translateY(-1px);
}
.k4c-mega__linkbody { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.k4c-mega__linktitle { display: block; }
.k4c-mega__linkdesc {
  display: block;
  font-family: var(--k4c-font-body);
  font-weight: var(--k4c-fw-regular);
  font-size: var(--k4c-fs-xs);
  line-height: 1.3;
  color: var(--k4c-purple-light);
}
/* Rich tiles (Resources) sit in bordered cards that lift on hover. */
.k4c-mega__link--rich {
  align-items: flex-start;
  padding: var(--k4c-space-3);
  margin-inline: 0;
  border: 1px solid var(--k4c-purple-100);
  border-radius: var(--k4c-radius);
  background: var(--k4c-white);
  transition: background-color var(--k4c-transition), border-color var(--k4c-transition), box-shadow var(--k4c-transition), transform var(--k4c-transition);
}
.k4c-mega__link--rich:hover,
.k4c-mega__link--rich:focus-visible {
  background: var(--k4c-white);
  border-color: var(--k4c-purple-light);
  box-shadow: var(--k4c-shadow);
  transform: translateY(-2px);
}

/* Promo tile — image card that fills the panel and points at a live surface. */
.k4c-mega__promo {
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  border-radius: var(--k4c-radius-lg);
  overflow: hidden;
  background: var(--k4c-white);
  border: 1px solid var(--k4c-purple-100);
  box-shadow: var(--k4c-shadow);
  text-decoration: none;
  color: var(--k4c-purple-dark);
  transition: transform var(--k4c-transition), box-shadow var(--k4c-transition);
}
.k4c-mega__promo:hover,
.k4c-mega__promo:focus-visible { transform: translateY(-3px); box-shadow: var(--k4c-shadow-lg); }
.k4c-mega__promo-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--k4c-purple-100); }
.k4c-mega__promo-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.k4c-mega__promo-body { display: flex; flex-direction: column; gap: var(--k4c-space-1); padding: var(--k4c-space-4); }
.k4c-mega__promo-eyebrow {
  font-family: var(--k4c-font-heading);
  font-size: var(--k4c-fs-xs);
  font-weight: var(--k4c-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--k4c-purple-light);
}
.k4c-mega__promo-title { font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-bold); font-size: var(--k4c-fs-md); color: var(--k4c-purple); }
.k4c-mega__promo-text { font-size: var(--k4c-fs-sm); line-height: 1.4; color: var(--k4c-grey-600); }
.k4c-mega__promo-cta { margin-top: var(--k4c-space-1); font-family: var(--k4c-font-heading); font-weight: var(--k4c-fw-semibold); font-size: var(--k4c-fs-sm); color: var(--k4c-purple-light); }

/* Feature card — branded purple block anchoring the right of the panel. */
.k4c-mega__feature {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: var(--k4c-space-3);
  padding: var(--k4c-space-5);
  border-radius: var(--k4c-radius-lg);
  overflow: hidden;
  background: linear-gradient(150deg, var(--k4c-purple) 0%, var(--k4c-purple-900) 100%);
  color: var(--k4c-white);
}
.k4c-mega__feature-media {
  display: block;
  margin: calc(-1 * var(--k4c-space-5)) calc(-1 * var(--k4c-space-5)) 0;
  aspect-ratio: 16 / 7;
  overflow: hidden;
}
.k4c-mega__feature-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.k4c-mega__feature-title {
  display: flex;
  align-items: center;
  gap: var(--k4c-space-2);
  margin: 0;
  font-family: var(--k4c-font-heading);
  font-size: var(--k4c-fs-xs);
  font-weight: var(--k4c-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--k4c-yellow);
}
.k4c-mega__feature-title .k4c-ico { width: 16px; height: 16px; color: var(--k4c-yellow); }
.k4c-mega__feature-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--k4c-space-2); flex: 1 1 auto; }
.k4c-mega__feature-link {
  display: block;
  padding: var(--k4c-space-2) var(--k4c-space-3);
  border-radius: var(--k4c-radius);
  text-decoration: none;
  color: var(--k4c-white);
  transition: background-color var(--k4c-transition);
}
.k4c-mega__feature-link:hover,
.k4c-mega__feature-link:focus-visible { background: color-mix(in oklab, var(--k4c-white) 14%, transparent); }
.k4c-mega__feature-text {
  display: block;
  font-family: var(--k4c-font-heading);
  font-weight: var(--k4c-fw-semibold);
  font-size: var(--k4c-fs-sm);
  color: var(--k4c-white);
}
.k4c-mega__feature-desc { display: block; font-size: var(--k4c-fs-xs); color: color-mix(in oklab, var(--k4c-white) 78%, transparent); }
/* White pill on the purple feature card (mock: yellow CTA retired). */
.k4c-mega__cta {
  align-self: flex-start;
  margin-top: auto;
  background: var(--k4c-white);
  color: var(--k4c-purple-900);
}
.k4c-mega__cta:hover { background: var(--k4c-purple-100); color: var(--k4c-purple-900); }

/* Latest-videos row (#1001378) — link columns stacked over a 4-up thumbnail
   strip, both left of the feature card. Only rendered when the mega item
   carries `videos: N` and the library has published videos. */
.k4c-mega__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--k4c-space-5);
}
.k4c-mega__main > .k4c-mega__cols { flex: 0 0 auto; }
.k4c-mega__videos .k4c-mega__heading { margin-bottom: var(--k4c-space-3); }
.k4c-mega__videos-all {
  margin-left: auto;
  font-size: var(--k4c-fs-xs);
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--k4c-purple);
  text-decoration: none;
}
.k4c-mega__videos-all:hover,
.k4c-mega__videos-all:focus-visible { text-decoration: underline; }
.k4c-mega__vlist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--k4c-space-4);
}
.k4c-mega__vid {
  display: flex;
  flex-direction: column;
  gap: var(--k4c-space-2);
  text-decoration: none;
  color: var(--k4c-purple);
}
.k4c-mega__vthumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--k4c-radius);
  background: linear-gradient(150deg, var(--k4c-purple) 0%, var(--k4c-purple-900) 100%);
  box-shadow: var(--k4c-shadow);
  transition: transform var(--k4c-transition), box-shadow var(--k4c-transition);
}
.k4c-mega__vthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.k4c-mega__vplay {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--k4c-white);
  color: var(--k4c-purple-900);
  transform: translate(-50%, -50%);
  box-shadow: var(--k4c-shadow);
  transition: background-color var(--k4c-transition), transform var(--k4c-transition);
}
.k4c-mega__vplay svg { margin-left: 2px; }
.k4c-mega__vtitle {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--k4c-font-heading);
  font-weight: var(--k4c-fw-medium);
  font-size: var(--k4c-fs-sm);
  line-height: 1.3;
}
.k4c-mega__vid:hover .k4c-mega__vthumb,
.k4c-mega__vid:focus-visible .k4c-mega__vthumb { transform: translateY(-2px); box-shadow: var(--k4c-shadow-lg); }
.k4c-mega__vid:hover .k4c-mega__vplay,
.k4c-mega__vid:focus-visible .k4c-mega__vplay { background: var(--k4c-yellow); transform: translate(-50%, -50%) scale(1.08); }
.k4c-mega__vid:hover .k4c-mega__vtitle,
.k4c-mega__vid:focus-visible .k4c-mega__vtitle { color: var(--k4c-purple-dark); text-decoration: underline; }
/* Mid widths (900–1199): keep the four guide groups on ONE row (they wrapped
   3+1 and pushed the video row off-screen) by slimming the feature card; the
   panel scrolls if it's still taller than a short laptop viewport. */
.k4c-mega { max-height: calc(100vh - var(--k4c-nav-height)); overflow-y: auto; overscroll-behavior: contain; }
@media (min-width: 900px) and (max-width: 1199.98px) {
  .k4c-mega__main + .k4c-mega__feature { flex-basis: 220px; padding: var(--k4c-space-4); }
  .k4c-mega__main + .k4c-mega__feature .k4c-mega__feature-media { margin: calc(-1 * var(--k4c-space-4)) calc(-1 * var(--k4c-space-4)) 0; }
  .k4c-mega__main .k4c-mega__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--k4c-space-4); }
  .k4c-mega__main .k4c-mega__vlist { gap: var(--k4c-space-3); }
  .k4c-mega__main .k4c-mega__chip { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .k4c-mega__vthumb, .k4c-mega__vplay { transition: none; }
  .k4c-mega__vid:hover .k4c-mega__vthumb,
  .k4c-mega__vid:focus-visible .k4c-mega__vthumb { transform: none; }
  .k4c-mega__vid:hover .k4c-mega__vplay,
  .k4c-mega__vid:focus-visible .k4c-mega__vplay { transform: translate(-50%, -50%); }
}

@media (prefers-reduced-motion: reduce) {
  .k4c-mega { transform: none; }
  .k4c-nav__item--mega:hover > .k4c-mega,
  .k4c-nav__item--mega:focus-within > .k4c-mega,
  .k4c-nav__item--mega.is-open > .k4c-mega { transform: none; }
  .k4c-nav__chev,
  .k4c-mega__link,
  .k4c-mega__chip,
  .k4c-mega__link--rich,
  .k4c-mega__promo { transition: none; }
  .k4c-mega__link:hover .k4c-mega__chip,
  .k4c-mega__link--rich:hover,
  .k4c-mega__promo:hover { transform: none; }
}

/* ---- Shared focus ring (keyboard) ---------------------------------------- */
.k4c-nav__brand:focus-visible,
.k4c-nav__link:focus-visible,
.k4c-nav__toggle:focus-visible,
.k4c-nav__close:focus-visible,
.k4c-nav__panel-link:focus-visible,
.k4c-nav__cta:focus-visible,
.k4c-nav__panel-cta:focus-visible {
  outline: 3px solid var(--k4c-yellow);
  outline-offset: 3px;
  border-radius: var(--k4c-radius-sm);
}

/* ---- MOBILE NAVIGATION SHEET (design file keyforchange-mobile-nav.html) ---
   Full-screen sheet replacing the old off-canvas drawer. Slides in from the
   right; grid rows = header · scrollable list · pinned foot. Brand sits at the
   same height as the page bar so it doesn't jump when the sheet opens. The
   floating WhatsApp bubble is retired on mobile — it lives in the sheet foot. */
.kfc-nav {
  /* Accent = the mock's lilac (--kfc-lilac, defined on :root in hero.css), with
     the brand accent as a fallback so this block never loses its accent. */
  --kfc-accent: var(--kfc-lilac, var(--k4c-purple-light));
  /* Pico leak guards: the sheet is a semantic <nav> using native <details>/<summary>,
     and Pico (blades.min.css) styles those bare elements sitewide — `nav ul`
     becomes flex, summaries get its accordion palette and its own ::after
     chevron. Repoint Pico's accordion vars into the sheet's palette (they
     inherit; no specificity war) and neutralise its chrome below. */
  --pico-accordion-close-summary-color: var(--k4c-white);
  --pico-accordion-open-summary-color: var(--kfc-accent);
  position: fixed;
  inset: 0;
  z-index: var(--k4c-z-overlay);
  display: grid;
  overflow: hidden;  /* Pico's `nav { overflow: visible }` would let content spill */
  grid-template-rows: auto 1fr auto;
  background: var(--k4c-purple-900);
  color: var(--k4c-white);
  font-family: var(--k4c-font-body);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.45s var(--k4c-ease), visibility 0s linear 0.45s;
}
.kfc-nav[data-open="true"],
.kfc-nav:target:not([data-js]) {
  transform: none;
  visibility: visible;
  transition: transform 0.45s var(--k4c-ease), visibility 0s;
}
/* Soft brand glow, top-right (the hero's radial language). */
.kfc-nav::before {
  content: "";
  position: absolute;
  right: -180px;
  top: -220px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%,
    rgba(201, 166, 242, 0.38) 0%,
    rgba(81, 45, 127, 0.2) 45%,
    rgba(44, 23, 72, 0) 70%);
  pointer-events: none;
}

/* Header row: brand · quick-exit pill · close. */
.kfc-nav__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k4c-space-2);
  padding: 14px var(--k4c-container-pad);
  border-bottom: 1px solid color-mix(in oklab, var(--k4c-white) 10%, transparent);
}
.kfc-nav__head .k4c-nav__logo { height: 2.2rem; }  /* matches the page bar's visual weight */
.kfc-nav__right { display: flex; align-items: center; gap: var(--k4c-space-1); }
.kfc-nav__exit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: var(--k4c-radius-pill);
  border: 1px solid color-mix(in oklab, var(--kfc-accent) 45%, transparent);
  color: var(--k4c-white);
  font-family: var(--k4c-font-heading);
  font-size: var(--k4c-fs-sm);
  font-weight: var(--k4c-fw-medium);
  text-decoration: none;
}
.kfc-nav__exit svg { color: var(--kfc-accent); }
.kfc-nav__exit:hover { background: color-mix(in oklab, var(--k4c-white) 8%, transparent); }
.kfc-nav__close {
  text-decoration: none;  /* a link since #1001652 (no-JS :target close) */
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--k4c-white);
  background: transparent;
  border: 0;
  border-radius: var(--k4c-radius);
  cursor: pointer;
}

/* Body: scrollable list. */
.kfc-nav__list-wrap {
  position: relative;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px var(--k4c-container-pad) 16px;
}
.kfc-nav__items {
  display: block;  /* Pico's `nav ul { display: flex }` would flow items sideways */
  margin: 0;
  padding: 0;
  list-style: none;
}
.kfc-nav__item {
  /* Pico's `nav li` gives inline-block + its own padding — reset to full-width
     rows with the mock's border-separated rhythm. */
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid color-mix(in oklab, var(--k4c-white) 10%, transparent);
}
.kfc-nav__item > details { margin-bottom: 0; }  /* Pico gives every <details> a gutter */
.kfc-nav__item summary::after { content: none; display: none; }  /* drop Pico's own chevron */
.kfc-nav__item > a,
.kfc-nav__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k4c-space-3);
  min-height: 60px;
  padding: 14px 0;
  font-family: var(--k4c-font-heading);
  font-size: 1.75rem;
  font-weight: var(--k4c-fw-bold);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--k4c-white);
  text-decoration: none;
  cursor: pointer;
}
.kfc-nav__item > a[aria-current],
.kfc-nav__group[open] > summary { color: var(--kfc-accent); }
.kfc-nav__item > a .kfc-nav__chev,
.kfc-nav__item summary .kfc-nav__chev {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: color-mix(in oklab, var(--k4c-white) 65%, transparent);
  transition: transform var(--k4c-transition);
}
.kfc-nav__item summary { list-style: none; }
.kfc-nav__item summary::-webkit-details-marker { display: none; }
.kfc-nav__group[open] > summary .kfc-nav__chev { transform: rotate(180deg); color: var(--kfc-accent); }

.kfc-nav__sub {
  padding: 0 0 18px;
  display: grid;
  gap: 14px;
}
.kfc-nav__subgroup b {
  display: block;
  margin-bottom: 4px;
  font-family: var(--k4c-font-heading);
  font-size: var(--k4c-fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: var(--k4c-fw-semibold);
  color: color-mix(in oklab, var(--k4c-white) 60%, transparent);
}
.kfc-nav__subgroup a {
  display: block;
  padding: 9px 0 9px 14px;
  border-left: 2px solid color-mix(in oklab, var(--k4c-white) 12%, transparent);
  font-size: var(--k4c-fs-base);
  font-weight: var(--k4c-fw-medium);
  color: color-mix(in oklab, var(--k4c-white) 82%, transparent);
  text-decoration: none;
}
.kfc-nav__subgroup a:active,
.kfc-nav__subgroup a[aria-current] { color: var(--k4c-white); border-color: var(--kfc-accent); }
/* Scoped under .kfc-nav__subgroup so it outranks `.kfc-nav__subgroup a`
   (0,2,0 vs 0,1,1) — this link sits inside a subgroup div. */
.kfc-nav__subgroup .kfc-nav__all {
  color: var(--kfc-accent);
  border-color: var(--kfc-accent);
  font-weight: var(--k4c-fw-semibold);
}
.kfc-nav__subgroup .kfc-nav__all:active { color: var(--kfc-accent); }

/* Staggered reveal of items when the sheet opens. */
.kfc-nav__item {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s var(--k4c-ease), transform 0.4s var(--k4c-ease);
}
.kfc-nav[data-open="true"] .kfc-nav__item,
.kfc-nav:target:not([data-js]) .kfc-nav__item { opacity: 1; transform: none; }
.kfc-nav[data-open="true"] .kfc-nav__item:nth-child(1) { transition-delay: 0.08s; }
.kfc-nav[data-open="true"] .kfc-nav__item:nth-child(2) { transition-delay: 0.12s; }
.kfc-nav[data-open="true"] .kfc-nav__item:nth-child(3) { transition-delay: 0.16s; }
.kfc-nav[data-open="true"] .kfc-nav__item:nth-child(4) { transition-delay: 0.20s; }
.kfc-nav[data-open="true"] .kfc-nav__item:nth-child(5) { transition-delay: 0.24s; }
.kfc-nav[data-open="true"] .kfc-nav__item:nth-child(6) { transition-delay: 0.28s; }
.kfc-nav[data-open="true"] .kfc-nav__item:nth-child(7) { transition-delay: 0.32s; }
.kfc-nav[data-open="true"] .kfc-nav__item:nth-child(8) { transition-delay: 0.36s; }

/* Foot: actions + support, pinned. */
.kfc-nav__foot {
  position: relative;
  padding: 14px var(--k4c-container-pad) calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid color-mix(in oklab, var(--k4c-white) 10%, transparent);
  background: rgba(20, 8, 34, 0.35);
  display: flex;
  flex-direction: column;
  gap: var(--k4c-space-3);
}
.kfc-nav__actions {
  display: grid;
  grid-template-columns: 1fr 52px;
  gap: var(--k4c-space-2);
}
.kfc-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--k4c-space-2);
  min-height: 52px;
  padding: 14px 20px;
  border-radius: var(--k4c-radius-pill);
  font-family: var(--k4c-font-heading);
  font-size: var(--k4c-fs-base);
  font-weight: var(--k4c-fw-bold);
  background: var(--k4c-white);
  color: var(--k4c-purple-900);
  text-decoration: none;
  transition: transform var(--k4c-transition), background-color var(--k4c-transition);
}
.kfc-nav__btn:hover { background: var(--k4c-purple-100); }
.kfc-nav__btn-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in oklab, var(--k4c-white) 30%, transparent);
  color: var(--k4c-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.kfc-nav__btn-icon:hover { border-color: var(--kfc-accent); color: var(--kfc-accent); }
.kfc-nav__support {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k4c-space-3);
  font-size: var(--k4c-fs-sm);
  color: color-mix(in oklab, var(--k4c-white) 62%, transparent);
}
.kfc-nav__support b { color: color-mix(in oklab, var(--k4c-white) 82%, transparent); font-weight: var(--k4c-fw-semibold); }
.kfc-nav__support a {
  color: var(--kfc-accent);
  font-weight: var(--k4c-fw-semibold);
  white-space: nowrap;
  text-decoration: none;
}

/* Shared focus ring for the sheet's own controls (yellow, like the bar). */
.kfc-nav__exit:focus-visible,
.kfc-nav__close:focus-visible,
.kfc-nav__item > a:focus-visible,
.kfc-nav__item summary:focus-visible,
.kfc-nav__subgroup a:focus-visible,
.kfc-nav__btn:focus-visible,
.kfc-nav__btn-icon:focus-visible,
.kfc-nav__support a:focus-visible {
  outline: 3px solid var(--k4c-yellow);
  outline-offset: 3px;
  border-radius: var(--k4c-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  .kfc-nav,
  .kfc-nav__item,
  .kfc-nav__item .kfc-nav__chev { transition: none !important; }
}

/* ---- Responsive: collapse to hamburger < 900px --------------------------- */
/* Raised from 768px: the 8-link menu + CTA + Quick Exit overflows an iPad-
   portrait (768px) viewport and gets silently clipped by html{overflow-x:clip}
   (audit #12749 C1). Collapse to the hamburger up to 899.98px instead. */
@media (max-width: 899.98px) {
  .k4c-nav__menu,
  .k4c-nav__cta { display: none; }
  .k4c-nav__toggle { display: flex; }
  /* Slightly more restrained enlargement on phones — the strap still reads
     but the logo doesn't dominate the narrower bar (#1000989). */
  .k4c-nav__logo { height: 3rem; }
  .k4c-nav[data-scrolled="true"] .k4c-nav__logo { height: 2.4rem; }
}

/* ≥ 900px: the sheet never renders (desktop uses the inline list). */
@media (min-width: 900px) {
  .kfc-nav { display: none; }
}

/* Body scroll-lock while the sheet is open (class set by nav.js). */
body.k4c-nav-open { overflow: hidden; }

/* The GHL chat launcher (chat-widget shadow host) floats bottom-right and would
   sit over the sheet foot's WhatsApp button + support number. Hide it only for
   the lifetime of the sheet — the widget itself stays on the site (#12678). */
body.k4c-nav-open chat-widget { display: none; }

/* Same for the sitewide red quick-exit tab: fixed top-right, it covers the
   sheet header's close button (completely at tablet widths). The sheet is a
   focus-trapped modal and carries its own Quick-exit pill — same
   data-quick-exit hook, same ESC behaviour — so nothing is lost while open. */
body.k4c-nav-open .k4c-quick-exit { display: none; }

/* Anchor targets shouldn't land hidden behind the fixed bar. */
:target { scroll-margin-top: calc(var(--k4c-nav-height) + var(--k4c-space-4)); }

/* CONCEPT SCAFFOLD — remove when the hero lands.
   Until the 100vh hero (task 12635) provides the dark backdrop the nav is
   designed to overlay, offset the body slot so the placeholder content isn't
   hidden under the fixed bar. The hero task renders a full-height section that
   sits *behind* the transparent nav and owns the top of the page; it signals
   that by adding `.has-hero` to <body>, which auto-disables this fallback. */
body:not(.has-hero) main#start { padding-top: var(--k4c-nav-height); }

/* #1001609 — mobile sheet rows line up with the logo (links sat at 4px, the
   <details> summary at 12px, the brand at 20px). */
.kfc-nav__list-wrap { padding-inline: 20px; }
.kfc-nav__item > details, .kfc-nav__item > details > summary { padding-left: 0; padding-right: 0; margin-left: 0; }
/* Pico's `nav ul:first-of-type` / `nav li a` negative margins pulled the list
   and the plain links left of the gutter — neutralise them in the sheet. */
nav.kfc-nav ul.kfc-nav__items { margin: 0; }
nav.kfc-nav .kfc-nav__item > a { margin: 0; }

/* #1001652 — no-JS fallback for the mobile sheet. The hamburger is an
   <a href="#kfc-nav">, so without JS the sheet opens via :target (rules above
   carry `.kfc-nav:target:not([data-js])` next to [data-open="true"]); the close
   control is <a href="#k4c-nav">. nav.js sets data-js on the sheet, so once it
   runs these rules stand down and data-open alone decides. The body-level
   guards nav.js normally adds via body.k4c-nav-open are mirrored with :has(). */
a.k4c-nav__toggle { text-decoration: none; }
@media (max-width: 899.98px) {
  body:has(.kfc-nav:target:not([data-js])) { overflow: hidden; }
  body:has(.kfc-nav:target:not([data-js])) .k4c-quick-exit,
  body:has(.kfc-nav:target:not([data-js])) chat-widget { display: none; }
}
/* nav.js adds role="button" to both links; Pico's `a[role=button]` (0,1,1)
   would then override display, and its [role=button] padding / focus
   box-shadow would leak in. Pin them back. */
a.k4c-nav__toggle[role="button"] { display: none; }
@media (max-width: 899.98px) { a.k4c-nav__toggle[role="button"] { display: flex; } }
a.kfc-nav__close[role="button"] { display: inline-flex; }
/* As a link, sheet link colours (`.kfc-nav a`-style rules) outrank .kfc-nav__close's white. */
nav.kfc-nav a.kfc-nav__close { color: var(--k4c-white); }
a.k4c-nav__toggle[role="button"],
a.kfc-nav__close[role="button"] { padding: 0; box-shadow: none; }