/* ============================================================================
   Knowledge Hub walkthrough banner — LAYER 4, loaded after knowledge-hub.css
   London Reporting Academy
   ----------------------------------------------------------------------------
   The navy explainer strip the owner approved on the Materiality Navigator
   (homepage Study Studio panel palette), shared by the Knowledge Hub home, the
   Disclosure Guides home and the Disclosure Library home. Four steps loop on a
   20-second clock, one quarter each (slowed from 16 s at the owner's request); a scene sets its start with --t0 and its
   items stagger with --i, so the markup decides the timing without JS.

     wave          homepage .v2-studio-mini-thumb sweep, looped per step
     pulse + shine homepage "Tour the platform" button
     skeletons     .khw__load items shimmer before their text resolves

   With reduced motion the last scene is shown still and nothing moves.
   ========================================================================== */

.khw{position:relative;margin:var(--lra-spacing-lg,28px) 0 0;overflow:hidden;border-radius:14px;color:#fff;
  background:radial-gradient(640px 240px at 92% 4%,rgba(98,181,225,.18),transparent 70%),linear-gradient(165deg,#0d3068 0%,#1b5182 45%,#0090a7 100%);
  box-shadow:0 18px 40px -30px rgba(20,50,76,.6)}
.khw *,.khw *::before,.khw *::after{box-sizing:border-box}
.khw-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.khw::after{content:"";position:absolute;top:-60%;left:-40%;width:28%;height:220%;transform:rotate(18deg);pointer-events:none;z-index:2;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.08) 40%,rgba(255,255,255,.16) 50%,rgba(255,255,255,.08) 60%,transparent 100%);
  animation:khwWave 5s cubic-bezier(.22,1,.36,1) infinite}
.khw__in{display:flex;flex-direction:column;padding:20px 28px 14px;font-size:14px;color:rgba(255,255,255,.86)}

/* Step rail */
.khw__rail{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 16px;padding:0;list-style:none;counter-reset:khwstep}
.khw__rail li{position:relative;counter-increment:khwstep;padding-top:8px;border-top:3px solid rgba(255,255,255,.22);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6);animation:khwRail 20s infinite both}
.khw__rail li::before{content:counter(khwstep) "  "}
.khw__rail li::after{content:"";position:absolute;top:-3px;inset-inline-start:0;height:3px;width:0;background:#62b5e1;animation:khwFill 20s linear infinite both}
.khw__rail li:nth-child(2),.khw__rail li:nth-child(2)::after{animation-delay:5s}
.khw__rail li:nth-child(3),.khw__rail li:nth-child(3)::after{animation-delay:10s}
.khw__rail li:nth-child(4),.khw__rail li:nth-child(4)::after{animation-delay:15s}

/* Stage: scenes share one grid cell, so the strip is as tall as its tallest scene */
.khw__stage{display:grid;min-height:132px;margin-bottom:14px}
.khw__scene{grid-area:1/1;opacity:0;animation:khwScene 20s infinite both;animation-delay:var(--t0,0s)}
.khw__q{margin:0 0 12px;font-family:var(--lra-font-family-serif,Lora,Georgia,serif);font-size:19px;line-height:1.25;color:#fff}
.khw__q small{display:block;margin-top:4px;font-family:inherit;font-size:13px;color:rgba(255,255,255,.72)}

/* A small uppercase caption above a chip row, e.g. the filter name */
.khw__k{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.66)}
/* Chips: .khw__pick lights up a moment after its scene starts */
.khw__chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.khw__chips li{padding:7px 12px;border:1px solid rgba(255,255,255,.26);border-radius:999px;background:rgba(255,255,255,.08);color:#fff;font-weight:600}
.khw__pick{animation:khwPick 20s infinite both;animation-delay:var(--t0,0s)}

/* Sequence: items reveal one after another, arrows between them */
.khw__seq{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;padding:0;list-style:none}
.khw__seq > li{animation:khwRow 20s infinite both;animation-delay:calc(var(--t0,0s) + var(--i,0) * .3s)}
.khw__seq--arrows > li + li::before{content:"→";margin-inline-end:10px;color:#62b5e1;font-weight:700}
[dir="rtl"] .khw__seq--arrows > li + li::before{content:"←"}

/* Cards: three across, orange accent; .khw__load shimmers first */
.khw__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.khw__cards > li{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid rgba(255,255,255,.18);border-inline-start:3px solid #ffb672;border-radius:8px;background:rgba(255,255,255,.08);
  animation:khwRow 20s infinite both;animation-delay:calc(var(--t0,0s) + var(--i,0) * .3s)}
.khw__cards b{font-weight:600;line-height:1.3;color:#fff}
.khw__cards span{font-size:12px;line-height:1.4;color:#62b5e1;font-weight:600}
.khw__cards p{margin:0;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.8)}
.khw__load > li::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.22) 50%,rgba(255,255,255,.10) 100%) 0 0/200% 100%;
  animation:khwSkel 20s infinite both,khwShimmer 1s linear infinite;animation-delay:calc(var(--t0,0s) + var(--i,0) * .3s),0s}

/* Stamps: small status badges that pop in after the row */
.khw__stamp{align-self:flex-start;margin-top:4px;padding:2px 9px;border-radius:999px;font-size:11px;font-style:normal;font-weight:700;background:#62b5e1;color:#0d3068;
  animation:khwStamp 20s infinite both;animation-delay:calc(var(--t0,0s) + .4s + var(--i,0) * .3s)}
.khw__stamp--ok{background:#e3f2ea;color:#1f7a4d}
.khw__stamp--warn{background:#f7edd2;color:#7a5b00}

/* A typed search query and a chat bubble */
.khw__search{display:flex;align-items:center;gap:10px;max-width:520px;margin-bottom:12px;padding:10px 14px;border:1px solid rgba(255,255,255,.3);border-radius:10px;background:rgba(255,255,255,.1);font-weight:600}
.khw__search::before{content:"";width:14px;height:14px;border:2px solid #62b5e1;border-radius:50%;flex:none}
.khw__type{display:inline-block;overflow:hidden;white-space:nowrap;border-inline-end:2px solid #62b5e1;width:0;animation:khwType 20s steps(var(--n,10)) infinite both;animation-delay:calc(var(--t0,0s) + .25s)}
.khw__bubble{display:inline-block;max-width:560px;margin-bottom:10px;padding:10px 14px;border-radius:14px 14px 14px 4px;background:rgba(255,255,255,.14);color:#fff;font-weight:600;
  animation:khwRow 20s infinite both;animation-delay:calc(var(--t0,0s) + var(--i,0) * .3s)}
.khw__bubble--lra{border-radius:14px 14px 4px 14px;background:#62b5e1;color:#0d3068}
.khw__note{margin:8px 0 0;font-size:12px;color:rgba(255,255,255,.7)}

/* Footer and call to action */
.khw__foot{display:flex;align-items:center;min-height:66px;padding-inline-end:260px;border-top:1px solid rgba(255,255,255,.2)}
.khw__foot img{display:block;width:96px;height:auto;filter:brightness(0) invert(1)}
.khw__cta{position:absolute;inset-block-end:24px;inset-inline-end:28px;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border:1px solid #ffb672;border-radius:10px;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,#1d4f8a 0%,#2a78b8 100%);color:#fff;font-weight:700;font-size:14px;text-decoration:none;animation:khwCtaPulse 3.6s ease-in-out infinite;transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.khw__cta::after{content:"";position:absolute;top:0;left:-90%;width:55%;height:100%;background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.35) 50%,transparent 100%);transform:skewX(-22deg);pointer-events:none;animation:khwCtaShine 6s ease-in-out 1.6s infinite}
.khw__cta:hover{transform:translateY(-3px);background:linear-gradient(135deg,#2a78b8 0%,#62b5e1 100%);box-shadow:0 16px 32px rgba(98,181,225,.45),0 6px 14px rgba(13,48,104,.4);animation-play-state:paused;color:#fff}
.khw__cta:focus-visible{outline:2px solid #fff;outline-offset:3px}

@keyframes khwWave{0%{left:-40%}45%,100%{left:130%}}
@keyframes khwRail{0%{color:rgba(255,255,255,.6)}2%,24%{color:#fff}25%,100%{color:rgba(255,255,255,.6)}}
@keyframes khwFill{0%{width:0}24%{width:100%}25%,100%{width:0}}
@keyframes khwScene{0%{opacity:0;transform:translateX(22px);filter:blur(3px)}4%,22%{opacity:1;transform:none;filter:none}25%,100%{opacity:0;transform:translateX(-14px);filter:blur(2px)}}
@keyframes khwPick{0%,7%{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.26);color:#fff}10%,24%{background:#62b5e1;border-color:#62b5e1;color:#0d3068}25%,100%{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.26);color:#fff}}
@keyframes khwRow{0%,1%{opacity:0;transform:translateY(6px)}5%,100%{opacity:1;transform:none}}
@keyframes khwSkel{0%,6%{opacity:1}9%,100%{opacity:0}}
@keyframes khwShimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes khwStamp{0%,2%{opacity:0}6%,100%{opacity:1}}
@keyframes khwType{0%{width:0}8%,24%{width:calc(var(--n,10) * 1ch + 2px)}25%,100%{width:0}}
@keyframes khwCtaPulse{0%,100%{box-shadow:0 6px 16px rgba(98,181,225,.22),0 0 0 0 rgba(98,181,225,.5);transform:translateY(0)}50%{box-shadow:0 10px 22px rgba(98,181,225,.35),0 0 0 10px rgba(98,181,225,0);transform:translateY(-1.5px)}}
@keyframes khwCtaShine{0%{left:-90%}35%,100%{left:140%}}

@media (max-width:760px){
  .khw__in{padding:16px 16px 12px}
  .khw__rail{gap:6px}.khw__rail li{font-size:10px}
  .khw__cards{grid-template-columns:1fr}
  .khw__foot{padding-inline-end:0}
  .khw__cta{position:relative;inset:auto;margin:0 16px 16px}
}
@media (prefers-reduced-motion:reduce){
  .khw *,.khw::after,.khw *::before,.khw *::after{animation:none!important}
  .khw::after,.khw__load > li::after{display:none}
  .khw__scene{opacity:0}.khw__scene:last-child{opacity:1}
  .khw__type{width:auto;border:0}
  .khw__rail li:nth-child(4){color:#fff}.khw__rail li:nth-child(4)::after{width:100%}
}

/* ── Hero with a walkthrough film (text left, film card right) ──────────────
   Same pattern as the Materiality Navigator index: the hero copy moves left
   and the film card sits beside the headline; the navy banner follows below. */
.khw-hero__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--lra-spacing-xl,40px);align-items:start}
.khw-hero .khh2-hero__inner{max-width:none;margin-inline:0;text-align:start}
.khw-hero .khh2-hero__inner .kh-eyebrow,.khw-hero .khh2-modes,.khw-hero .khh2-marks{justify-content:flex-start}
.khw-hero__side{min-width:0;padding-top:var(--lra-spacing-xl,40px)}
.khw-film{display:block;box-sizing:border-box;width:100%;max-width:100%;padding:0;border:1px solid var(--lra-color-gray-300,#d9e0e7);border-radius:14px;overflow:hidden;background:#fff;color:var(--lra-color-primary,#0d3068);font:inherit;text-align:start;cursor:pointer;box-shadow:0 18px 40px -28px rgba(20,50,76,.55);transition:border-color .2s,box-shadow .2s}
.khw-film:hover{border-color:var(--lra-color-teal,#0090a7);box-shadow:0 22px 44px -24px rgba(20,50,76,.6)}
.khw-film__frame{position:relative;display:block;width:100%;height:0;padding-top:56.25%;overflow:hidden;background:#0b1f33}
.khw-film__frame img{position:absolute;top:0;left:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform .4s ease}
.khw-film:hover .khw-film__frame img{transform:scale(1.03)}
.khw-film__play{position:absolute;inset:50% auto auto 50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:var(--lra-color-teal,#0090a7);box-shadow:0 0 0 8px rgba(255,255,255,.28);transition:transform .2s}
.khw-film__play::before{content:"";position:absolute;inset:50% auto auto 50%;margin:-11px 0 0 -6px;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff}
.khw-film:hover .khw-film__play{transform:scale(1.08)}
.khw-film__dur{position:absolute;inset-block-end:10px;inset-inline-end:10px;padding:2px 8px;border-radius:6px;background:rgba(9,20,34,.78);color:#fff;font-size:12px;font-weight:700}
.khw-film__t{display:flex;flex-direction:column;gap:2px;padding:12px 16px 14px;font-weight:700;line-height:1.3}
.khw-film__t small{font-size:12px;font-weight:500;color:var(--lra-color-gray-600,#6b7785)}
.khw-video{position:fixed;inset:0;margin:auto;height:fit-content;width:min(1100px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:0;border:0;border-radius:14px;background:#0b1f33;color:#fff;overflow:hidden}
.khw-video::backdrop{background:rgba(9,20,34,.72)}
.khw-video__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px}
.khw-video__h{margin:0;font-size:15px;font-weight:600;color:#fff}
.khw-video__x{width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.khw-video__x:focus-visible{outline:2px solid #fff;outline-offset:2px}
.khw-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000}
@media (max-width:960px){.khw-hero__grid{grid-template-columns:1fr;gap:var(--lra-spacing-lg,28px)}.khw-hero__side{padding-top:0;max-width:560px}}
@media (prefers-reduced-motion:reduce){.khw-film__frame img,.khw-film__play{transition:none}.khw-film:hover .khw-film__frame img,.khw-film:hover .khw-film__play{transform:none}}

/* Hero with a film: the four modes become four even columns — verb on top,
   grey description underneath — so they read as two clean rows. */
.khw-hero .khh2-modes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--lra-spacing-md,16px);margin-top:var(--lra-spacing-lg,28px)}
.khw-hero .khh2-modes li{display:block}
.khw-hero .khh2-modes li+li::before{content:none}
.khw-hero .khh2-modes a{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 0 8px;border-top:2px solid var(--lra-color-gray-300,#d9e0e7);border-bottom:0}
.khw-hero .khh2-modes a:hover{border-top-color:var(--lra-color-teal,#0090a7)}
.khw-hero .khh2-modes span{line-height:1.35}
@media (max-width:560px){.khw-hero .khh2-modes{grid-template-columns:repeat(2,minmax(0,1fr))}}