/* =====================================================================
   Kho Kho Uganda — premium layer (loads AFTER site.css and theme.css)

   Built from the association's crest: royal blue ring, sunshine yellow, white lettering,
   and the official light blue. Everything below is decoration made from those colours:
   gradients, spotlights ("flashlights"), flowing wave lines, wave dividers, the court-line
   texture, grain, the crest as a watermark, framed photos and layered shadows.

   Pattern files live in /images/patterns (wave, wave-flip, wavelines, court, dots, grain, arcs)
   and the transparent crest is /images/logo-mark.png.
   ===================================================================== */

:root {
    --k-royal: #0b4ba3;
    --k-royal-2: #0a3a80;
    --k-deep: #06265a;
    --k-night: #030d22;
    --k-sky: #4db6e8;
    --k-sky-soft: #e8f5fc;
    --k-sky-mid: #bfe3f7;
    --k-gold: #ffd400;
    --k-gold-2: #ffb800;
    --k-paper: #ffffff;
    --k-tint: #eef7fd;
    --k-ring: rgba(11, 75, 163, .16);

    --k-grad-hero:
        radial-gradient(900px 520px at 82% 18%, rgba(77, 182, 232, .55), transparent 62%),
        radial-gradient(640px 420px at 6% 96%, rgba(255, 212, 0, .26), transparent 62%),
        linear-gradient(135deg, #030d22 0%, #06265a 46%, #0b4ba3 100%);
    --k-grad-dark:
        radial-gradient(700px 380px at 90% 0%, rgba(77, 182, 232, .35), transparent 62%),
        radial-gradient(520px 320px at 0% 100%, rgba(255, 212, 0, .16), transparent 62%),
        linear-gradient(160deg, #030d22 0%, #06265a 60%, #0a3a80 100%);
    --k-grad-gold: linear-gradient(135deg, #ffe45c 0%, #ffd400 45%, #ffb800 100%);
    --k-grad-sky: linear-gradient(135deg, #7fd0f5 0%, #4db6e8 50%, #0b4ba3 130%);

    --k-shadow-1: 0 1px 2px rgba(6, 38, 90, .08), 0 4px 12px rgba(6, 38, 90, .06);
    --k-shadow-2: 0 2px 4px rgba(6, 38, 90, .08), 0 14px 34px rgba(6, 38, 90, .14);
    --k-shadow-3: 0 4px 8px rgba(6, 38, 90, .1), 0 28px 60px rgba(6, 38, 90, .26);
    --k-shadow-gold: 0 10px 28px rgba(255, 184, 0, .38);
    --k-radius: 22px;
}

[data-bs-theme="dark"] {
    --k-paper: #0a0f16;
    --k-tint: #0d1824;
    --k-sky-soft: #10202f;
    --k-ring: rgba(77, 182, 232, .22);
    --k-shadow-1: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 12px rgba(0, 0, 0, .3);
    --k-shadow-2: 0 2px 4px rgba(0, 0, 0, .5), 0 14px 34px rgba(0, 0, 0, .45);
    --k-shadow-3: 0 4px 8px rgba(0, 0, 0, .5), 0 28px 60px rgba(0, 0, 0, .6);
}

/* ---------------------------------------------------------------- base */
body { background: var(--bg); }
main { position: relative; overflow-x: clip; }
.section-title {
    background: none; color: var(--heading); position: relative; padding-bottom: 1.05rem; margin-bottom: 1rem;
    font-weight: 800; letter-spacing: -.028em;
}
/* a drawn wave under every section heading */
.section-title::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 92px; height: 12px;
    background: var(--k-grad-gold); border-radius: 12px;
    -webkit-mask: url('/images/patterns/underline.svg') center / 100% 100% no-repeat;
            mask: url('/images/patterns/underline.svg') center / 100% 100% no-repeat;
}
.text-center .section-title::after, .section-title.text-center::after { left: 50%; transform: translateX(-50%); }
.eyebrow {
    display: inline-flex; align-items: center; gap: .5rem; padding: .32rem .85rem .32rem .7rem; margin-bottom: .9rem;
    background: linear-gradient(90deg, var(--k-sky-soft), transparent); color: var(--k-royal);
    border: 1px solid var(--k-ring); border-radius: 999px; font-size: .82rem; font-weight: 800; letter-spacing: .02em;
}
.eyebrow::before {
    content: ""; position: static !important; flex: none; display: inline-block !important; width: .55rem; height: .55rem; border-radius: 50%;
    background: var(--k-grad-gold); box-shadow: 0 0 0 4px rgba(255, 212, 0, .25);
}
[data-bs-theme="dark"] .eyebrow { color: var(--k-sky); }
.section-text { font-size: 1.08rem; line-height: 1.75; }

/* ----------------------------------------------------- scroll reveal */
html.js .reveal { opacity: 0; transform: translateY(26px) scale(.985); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
html.js .reveal.reveal-in { opacity: 1; transform: none; }
html.js .reveal-delay-1 { transition-delay: .08s; } html.js .reveal-delay-2 { transition-delay: .16s; } html.js .reveal-delay-3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
    html.js .reveal { opacity: 1; transform: none; transition: none; }
    .k-marquee-track, .k-ring-spin, .k-float, .k-hero::before, .k-wavelines { animation: none !important; }
}

/* ------------------------------------------------------- buttons */
.btn { transition: transform .2s ease, box-shadow .25s ease, background .25s ease, color .2s ease; }
.btn-primary {
    background: linear-gradient(135deg, #1269c9, #0b4ba3 60%, #0a3a80); border: 0; color: #fff;
    box-shadow: 0 8px 20px rgba(11, 75, 163, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-primary:hover, .btn-primary:focus-visible { background: linear-gradient(135deg, #1a78dd, #0b4ba3); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(11, 75, 163, .45), inset 0 1px 0 rgba(255, 255, 255, .3); }
.btn-warning {
    background: var(--k-grad-gold); border: 0; color: #0a0a0a !important;
    box-shadow: var(--k-shadow-gold), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.btn-warning:hover { background: var(--k-grad-gold); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(255, 184, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn-outline-primary { border-width: 2px; border-color: var(--k-royal); color: var(--k-royal); background: transparent; }
.btn-outline-primary:hover { background: var(--k-royal); border-color: var(--k-royal); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(11, 75, 163, .3); }
[data-bs-theme="dark"] .btn-outline-primary { color: var(--k-sky); border-color: var(--k-sky); }
[data-bs-theme="dark"] .btn-outline-primary:hover { background: var(--k-sky); color: #04112b; }
.btn-outline-light { backdrop-filter: blur(6px); background: rgba(255, 255, 255, .06); }
.btn-outline-light:hover { transform: translateY(-2px); }

/* ------------------------------------------------- top bar + nav */
.topbar { background: linear-gradient(90deg, #030d22, #06265a 60%, #0b4ba3); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.main-nav { box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(6, 38, 90, 0); transition: box-shadow .3s ease, padding .3s ease; background: color-mix(in srgb, var(--surface) 88%, transparent); }
.main-nav.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 12px 32px rgba(6, 38, 90, .14); padding: .15rem 0; }
.main-nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: linear-gradient(90deg, var(--k-royal), var(--k-sky), var(--k-gold), var(--k-sky), var(--k-royal)); background-size: 200% 100%; animation: k-slide 12s linear infinite; opacity: .9; }
@keyframes k-slide { to { background-position: 200% 0; } }
.navbar-brand img { border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--k-gold), 0 8px 18px rgba(6, 38, 90, .35); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.navbar-brand:hover img { transform: rotate(-8deg) scale(1.06); }
.brand-text { margin-left: .35rem; }
.main-nav .nav-link.active::after { background: var(--k-grad-gold); height: 4px; border-radius: 4px; }
.main-nav .btn.nav-link { background: linear-gradient(135deg, #1269c9, #0b4ba3); box-shadow: 0 6px 16px rgba(11, 75, 163, .35); }

/* ------------------------------------------------- shared dark surface */
.k-dark, .k-hero, .page-hero, .news-masthead, .join-cta, .site-footer, .k-night {
    color: #fff; isolation: isolate; position: relative; overflow: hidden;
}
.k-grain::after, .k-hero::after, .page-hero::after, .news-masthead::after {
    pointer-events: none;
}

/* ================================================================== HERO */
.k-hero {
    background: var(--k-grad-hero);
    padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(8rem, 13vw, 11rem);
    margin-bottom: 0;
}
.k-hero > .container { position: relative; z-index: 3; }
/* flowing wave lines */
.k-wavelines {
    position: absolute; inset: auto 0 0 0; height: 78%; z-index: 0; opacity: .2; pointer-events: none;
    background: url('/images/patterns/wavelines.svg') center bottom / cover no-repeat;
    animation: k-drift 26s ease-in-out infinite alternate;
}
@keyframes k-drift { from { transform: translateX(-2.5%) scale(1.05); } to { transform: translateX(2.5%) scale(1.05); } }
/* the crest as a huge watermark */
.k-watermark {
    position: absolute; z-index: 1; pointer-events: none; width: min(62vw, 760px); aspect-ratio: 1;
    right: -12%; top: 50%; transform: translateY(-50%) rotate(-12deg);
    background: url('/images/logo-mark.png') center / contain no-repeat; opacity: .09; filter: saturate(.4) brightness(1.8);
}
/* court lines + dot texture */
.k-court-tex { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url('/images/patterns/court.svg') 0 0 / 240px 240px; opacity: .07;
    -webkit-mask: linear-gradient(90deg, transparent 0%, #000 45%, transparent 100%); mask: linear-gradient(90deg, transparent 0%, #000 45%, transparent 100%); }
.k-dots { position: absolute; z-index: 0; pointer-events: none; background: url('/images/patterns/dots.svg') 0 0 / 22px 22px; opacity: .22; width: 280px; height: 200px; }
.k-dots.tl { left: 2%; top: 8%; } .k-dots.br { right: 3%; bottom: 20%; }
.k-grain-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: url('/images/patterns/grain.svg') 0 0 / 220px 220px; opacity: .1; mix-blend-mode: overlay; }
/* flashlight that follows the pointer */
.k-spot { position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: radial-gradient(420px circle at var(--mx, 70%) var(--my, 30%), rgba(255, 255, 255, .16), rgba(255, 233, 120, .07) 38%, transparent 66%);
    transition: opacity .4s; mix-blend-mode: soft-light; }
.k-spot::after { content: ""; position: absolute; inset: 0; background: radial-gradient(260px circle at var(--mx, 70%) var(--my, 30%), rgba(255, 212, 0, .13), transparent 70%); }
/* scalloped wave edge into the next section */
.k-wave-bottom::before, .k-wave-top::before, .page-hero::before, .news-masthead::before {
    content: ""; position: absolute; left: 0; right: 0; z-index: 4; height: clamp(46px, 7vw, 110px); pointer-events: none;
    background: var(--wave, var(--bg));
    -webkit-mask: url('/images/patterns/wave.svg') center / 100% 100% no-repeat; mask: url('/images/patterns/wave.svg') center / 100% 100% no-repeat;
}
.k-wave-bottom::before, .page-hero::before, .news-masthead::before { bottom: -1px; }
.k-wave-top::before {
    top: -1px;
    -webkit-mask-image: url('/images/patterns/wave-flip.svg'); mask-image: url('/images/patterns/wave-flip.svg');
}
.k-hero .k-wave-gold { position: absolute; left: 0; right: 0; bottom: clamp(40px, 6.4vw, 100px); height: 4px; z-index: 3; background: linear-gradient(90deg, transparent, var(--k-gold), transparent); opacity: .0; }

.k-pill {
    display: inline-flex; align-items: center; gap: .55rem; padding: .45rem 1rem .45rem .5rem; border-radius: 999px;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(8px);
    font-weight: 700; font-size: .88rem; color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
}
.k-pill img { width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 2px var(--k-gold); }
.k-hero-title {
    font-family: var(--font-display); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; margin: 1.1rem 0 1.2rem;
    font-size: clamp(2.4rem, 5vw, 4.1rem);
    background: linear-gradient(180deg, #fff 30%, #bfe3f7 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
    text-shadow: none; filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .35));
}
.k-hero-title .k-swoosh { position: relative; display: inline-block; }
.k-hero-title .k-swoosh::after {
    content: ""; position: absolute; left: -2%; right: -2%; bottom: -.14em; height: .22em; background: var(--k-grad-gold); border-radius: 20px;
    -webkit-mask: url('/images/patterns/underline.svg') center / 100% 100% no-repeat; mask: url('/images/patterns/underline.svg') center / 100% 100% no-repeat;
}
.k-hero-lead { font-size: clamp(1.08rem, 1.5vw, 1.28rem); line-height: 1.7; color: rgba(255, 255, 255, .86); max-width: 38rem; }
.k-hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.k-hero-actions .btn { padding: .85rem 1.6rem; border-radius: 14px; font-size: 1.02rem; }
.k-hero-facts { display: flex; flex-wrap: wrap; gap: 1.6rem 2.2rem; margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid rgba(255, 255, 255, .16); }
.k-hero-facts div { line-height: 1.15; }
.k-hero-facts b { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--k-gold); }
.k-hero-facts span { font-size: .85rem; color: rgba(255, 255, 255, .72); }
.next-up { display: inline-flex; align-items: center; gap: .9rem; margin-top: 1.6rem; padding: .7rem 1.1rem; border-radius: 16px; color: #fff; text-decoration: none;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(8px); }
.next-up .count { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: var(--k-gold); line-height: 1; }
.next-up .u { font-size: .75rem; margin-left: .25rem; }
.next-up .what { font-weight: 700; } .next-up small { display: block; font-weight: 400; opacity: .75; }

/* photo collage */
.k-collage { position: relative; min-height: clamp(380px, 46vw, 560px); }
.k-frame {
    position: absolute; margin: 0; padding: 9px; background: #fff; border-radius: 22px;
    box-shadow: 0 2px 0 rgba(255, 255, 255, .6) inset, 0 30px 60px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .5);
    transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .4s;
}
.k-frame img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 15px; }
.k-frame:hover { z-index: 6 !important; box-shadow: 0 40px 80px rgba(0, 0, 0, .55), 0 0 0 3px var(--k-gold); }
.k-frame.a { width: 66%; aspect-ratio: 4 / 3; right: 0; top: 4%; transform: rotate(3deg); z-index: 3; }
.k-frame.b { width: 44%; aspect-ratio: 1; left: 0; bottom: 4%; transform: rotate(-6deg); z-index: 4; }
.k-frame.c { width: 36%; aspect-ratio: 3 / 4; right: 5%; bottom: -2%; transform: rotate(6deg); z-index: 5; }
.k-frame.a:hover { transform: rotate(1deg) scale(1.03); } .k-frame.b:hover { transform: rotate(-3deg) scale(1.05); } .k-frame.c:hover { transform: rotate(3deg) scale(1.05); }
.k-frame figcaption { position: absolute; left: 18px; right: 18px; bottom: 16px; padding: .3rem .7rem; border-radius: 10px; font-size: .75rem; font-weight: 700; color: #fff;
    background: linear-gradient(90deg, rgba(3, 13, 34, .82), rgba(3, 13, 34, .3)); backdrop-filter: blur(4px); }
.k-medallion {
    position: absolute; z-index: 7; left: 2%; top: 3%; width: clamp(104px, 13vw, 156px); aspect-ratio: 1; border-radius: 50%;
    background: #fff; padding: 6px; box-shadow: 0 0 0 5px var(--k-gold), 0 0 0 9px rgba(255, 212, 0, .25), 0 24px 50px rgba(0, 0, 0, .5);
}
.k-medallion img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.k-ring-spin { position: absolute; inset: -22px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .55); animation: k-spin 38s linear infinite; }
@keyframes k-spin { to { transform: rotate(360deg); } }
.k-chip {
    position: absolute; z-index: 8; display: inline-flex; align-items: center; gap: .6rem; padding: .55rem .95rem; border-radius: 16px;
    background: rgba(255, 255, 255, .96); color: #0a0a0a; font-weight: 800; font-size: .9rem; box-shadow: var(--k-shadow-3);
}
.k-chip i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--k-grad-gold); color: #0a0a0a; }
.k-chip small { display: block; font-weight: 600; color: #5a6672; font-size: .72rem; }
.k-chip.one { left: 30%; top: 47%; z-index: 9; } .k-chip.two { right: -1%; top: -2%; }
.k-float { animation: k-bob 6s ease-in-out infinite; } .k-float.d2 { animation-delay: -3s; }
@keyframes k-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* ============================================================ STATS */
.k-stats { position: relative; z-index: 5; margin-top: clamp(-6rem, -8vw, -4rem); padding-bottom: 1rem; }
.k-stat {
    position: relative; height: 100%; padding: 1.5rem 1.4rem 1.4rem; border-radius: var(--k-radius); overflow: hidden; color: #fff;
    background: linear-gradient(150deg, #0b4ba3 0%, #06265a 70%, #030d22 100%);
    box-shadow: var(--k-shadow-3), inset 0 1px 0 rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .12);
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s;
}
.k-stat::before { content: ""; position: absolute; width: 180px; height: 180px; right: -60px; top: -60px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 212, 0, .45), transparent 65%); }
.k-stat::after { content: ""; position: absolute; inset: auto -10% -35% -10%; height: 70%; background: url('/images/patterns/wavelines.svg') center / cover; opacity: .14; }
.k-stat:hover { transform: translateY(-8px); }
.k-stat .ic { position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.3rem; margin-bottom: .9rem;
    background: var(--k-grad-gold); color: #0a0a0a; box-shadow: 0 8px 18px rgba(255, 184, 0, .4); }
.k-stat .stat-number { position: relative; z-index: 1; font-size: clamp(2.4rem, 4vw, 3.3rem); color: #fff; }
.k-stat .stat-label { position: relative; z-index: 1; opacity: .82; font-size: .92rem; line-height: 1.35; }
.k-stat:nth-child(2n) { background: linear-gradient(150deg, #1c8fd0 0%, #0b4ba3 70%, #06265a 100%); }

/* ========================================================== MARQUEE */
.k-marquee { position: relative; padding: clamp(2.6rem, 4vw, 3.6rem) 0 1rem; overflow: hidden; }
.k-marquee-track { display: flex; gap: 1rem; width: max-content; animation: k-scroll 70s linear infinite; }
.k-marquee:hover .k-marquee-track { animation-play-state: paused; }
@keyframes k-scroll { to { transform: translateX(-50%); } }
.k-marquee a { flex: none; display: block; width: clamp(200px, 22vw, 290px); aspect-ratio: 4 / 3; padding: 6px; background: var(--surface); border-radius: 20px; box-shadow: var(--k-shadow-2); border: 1px solid var(--line); transition: transform .4s; }
.k-marquee a:nth-child(odd) { transform: rotate(-1.5deg); } .k-marquee a:nth-child(even) { transform: rotate(1.5deg) translateY(10px); }
.k-marquee a:hover { transform: scale(1.06) rotate(0); z-index: 3; box-shadow: var(--k-shadow-3), 0 0 0 3px var(--k-gold); }
.k-marquee img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; display: block; }
.k-marquee::before, .k-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none; }
.k-marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.k-marquee::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }

/* ======================================================== SECTIONS */
.k-section { position: relative; padding: clamp(3.6rem, 6.5vw, 6rem) 0; isolation: isolate; }
.k-tint { background: linear-gradient(180deg, var(--k-tint) 0%, var(--bg) 100%); }
.k-tint::after {
    content: ""; position: absolute; z-index: -1; width: min(52vw, 560px); aspect-ratio: 1; right: -9%; top: 6%;
    background: url('/images/logo-mark.png') center / contain no-repeat; opacity: .055; transform: rotate(14deg); pointer-events: none;
}
[data-bs-theme="dark"] .k-tint::after { opacity: .08; filter: brightness(1.4); }
.k-dots-bg::after { content: ""; position: absolute; z-index: -1; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none;
    background: url('/images/patterns/dots.svg') 0 0 / 26px 26px; opacity: .035; filter: invert(1); }
.k-dark { background: var(--k-grad-dark); }
.k-dark .section-title, .k-dark h2, .k-dark h3 { color: #fff; }
.k-dark .section-text, .k-dark p { color: rgba(255, 255, 255, .84); }
.k-dark .eyebrow { color: var(--k-gold); background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); }
.k-dark .text-muted { color: rgba(255, 255, 255, .7) !important; }

/* ------------------------------------------------------- who we are */
.k-about-art { position: relative; padding: 0 0 4rem 2rem; }
.k-about-art .big { margin: 0; padding: 10px; background: var(--surface); border-radius: 28px; box-shadow: var(--k-shadow-3); border: 1px solid var(--line); position: relative; transform: rotate(-2deg); }
.k-about-art .big::before { content: ""; position: absolute; inset: -16px 16px 16px -16px; border: 3px solid var(--k-gold); border-radius: 30px; z-index: -1; }
.k-about-art .big img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; }
.k-about-art .small { position: absolute; margin: 0; width: 46%; right: -2%; bottom: 0; padding: 8px; background: var(--surface); border-radius: 22px; box-shadow: var(--k-shadow-3); transform: rotate(4deg); border: 1px solid var(--line); }
.k-about-art .small img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 15px; }
.k-about-art .seal { position: absolute; left: -.5rem; bottom: 1.2rem; width: 112px; aspect-ratio: 1; border-radius: 50%; background: #fff; padding: 5px; box-shadow: 0 0 0 4px var(--k-gold), var(--k-shadow-3); }
.k-about-art .seal img { width: 100%; border-radius: 50%; display: block; }
.k-vmg { display: grid; gap: .9rem; margin: 1.6rem 0 1.8rem; }
.k-vmg div { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.15rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--k-shadow-1); transition: transform .3s, box-shadow .3s; }
.k-vmg div:hover { transform: translateX(6px); box-shadow: var(--k-shadow-2); }
.k-vmg i { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 1.2rem; color: #fff; background: var(--k-grad-sky); box-shadow: 0 8px 16px rgba(11, 75, 163, .3); }
.k-vmg b { display: block; font-family: var(--font-display); color: var(--heading); }
.k-vmg span { color: var(--kku-muted); font-size: .96rem; }

/* ------------------------------------------------------ milestones */
.k-mile { position: relative; height: 100%; padding: 1.8rem 1.5rem 1.6rem; border-radius: var(--k-radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--k-shadow-1); overflow: hidden; transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.k-mile::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, var(--k-royal), var(--k-sky), var(--k-gold)); }
.k-mile::after { content: ""; position: absolute; right: -50px; bottom: -50px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, var(--k-sky-soft), transparent 70%); transition: transform .5s; }
.k-mile:hover { transform: translateY(-10px); box-shadow: var(--k-shadow-3); }
.k-mile:hover::after { transform: scale(1.8); }
.k-mile .medal { position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 20px 20px 20px 6px; display: grid; place-items: center; font-size: 1.9rem; margin-bottom: 1.1rem;
    background: var(--k-grad-gold); box-shadow: var(--k-shadow-gold), inset 0 2px 0 rgba(255, 255, 255, .6); transform: rotate(-4deg); transition: transform .4s; }
.k-mile:hover .medal { transform: rotate(4deg) scale(1.08); }
.k-mile h3 { position: relative; z-index: 1; font-size: 1.15rem; color: var(--heading); } .k-mile p { position: relative; z-index: 1; color: var(--kku-muted); margin: 0; font-size: .96rem; }

/* --------------------------------------------------- why kho kho */
.k-why-list { list-style: none; padding: 0; margin: 1.4rem 0 1.8rem; display: grid; gap: .7rem; }
.k-why-list li { display: flex; gap: .8rem; align-items: center; padding: .75rem 1rem; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(6px); transition: transform .3s, background .3s; }
.k-why-list li:hover { transform: translateX(8px); background: rgba(255, 255, 255, .14); }
.k-why-list i { color: #0a0a0a; background: var(--k-grad-gold); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: .9rem; }
.k-trophy { position: relative; min-height: 480px; border-radius: 30px; overflow: hidden; display: flex; align-items: flex-end; color: #fff;
    background: linear-gradient(0deg, rgba(3, 13, 34, .97) 0%, rgba(3, 13, 34, .82) 48%, rgba(3, 13, 34, .2) 100%), var(--bg-img) center / cover;
    box-shadow: var(--k-shadow-3), 0 0 0 1px rgba(255, 255, 255, .22); transform: rotate(1.4deg); transition: transform .5s; }
.k-trophy:hover { transform: rotate(0) scale(1.02); }
.k-trophy::before { content: ""; position: absolute; inset: 12px; border: 2px solid rgba(255, 212, 0, .7); border-radius: 22px; pointer-events: none; }
.k-trophy .in { position: relative; z-index: 2; padding: 2rem 2rem 2.2rem; }
.k-trophy .tr { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; color: #0a0a0a; background: var(--k-grad-gold); margin-bottom: 1rem; box-shadow: 0 0 0 6px rgba(255, 212, 0, .25); }
.k-trophy h3 { color: #fff; font-size: 1.6rem; } .k-trophy p { color: rgba(255, 255, 255, .88); }
.k-trophy a { color: var(--k-gold); font-weight: 800; text-decoration: none; }

/* ---------------------------------------------- discover: team + steps */
.k-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1.2rem; }
.k-person { position: relative; display: block; border-radius: 22px; overflow: hidden; aspect-ratio: 3 / 4; text-decoration: none; background: var(--k-deep); box-shadow: var(--k-shadow-2); border: 4px solid var(--surface); outline: 1px solid var(--line); transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s; }
.k-person img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.k-person::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3, 13, 34, .9), transparent 55%); }
.k-person:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: var(--k-shadow-3); } .k-person:hover img { transform: scale(1.1); }
.k-person span { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 12px; color: #fff; font-weight: 800; font-family: var(--font-display); line-height: 1.15; }
.k-person small { display: block; margin-bottom: .2rem; font-family: var(--font-body); font-weight: 700; color: var(--k-gold); font-size: .72rem; }
.k-courtcard { position: relative; border-radius: 28px; padding: 1.2rem 1.2rem 1rem; background: var(--k-grad-dark); box-shadow: var(--k-shadow-3); border: 1px solid rgba(255, 255, 255, .14); overflow: hidden; color: #fff; }
.k-courtcard::before { content: ""; position: absolute; width: 260px; aspect-ratio: 1; right: -70px; bottom: -80px; background: url('/images/logo-mark.png') center / contain no-repeat; opacity: .12; }
.k-courtcard .court-caption { color: rgba(255, 255, 255, .78); position: relative; }
.k-steps { display: grid; gap: .9rem; counter-reset: s; }
.k-step { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--k-shadow-1); position: relative; overflow: hidden; transition: transform .3s, box-shadow .3s; }
.k-step::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--k-sky), var(--k-royal)); }
.k-step:hover { transform: translateX(8px); box-shadow: var(--k-shadow-2); }
.k-step .ic { flex: none; width: 50px; height: 50px; display: grid; place-items: center; font-size: 1.5rem; border-radius: 16px; background: var(--k-sky-soft); }
.k-step b { display: block; font-family: var(--font-display); color: var(--heading); } .k-step span { color: var(--kku-muted); font-size: .94rem; }

/* ----------------------------------------------------------- news */
.k-newsfeat { position: relative; display: flex; align-items: flex-end; min-height: clamp(360px, 42vw, 500px); border-radius: 30px; overflow: hidden; text-decoration: none; color: #fff;
    background: var(--bg-img) center / cover; box-shadow: var(--k-shadow-3); transition: transform .4s; isolation: isolate; }
.k-newsfeat::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(3, 13, 34, .95) 0%, rgba(6, 38, 90, .55) 50%, rgba(6, 38, 90, .1) 100%); }
.k-newsfeat::after { content: ""; position: absolute; inset: 14px; border: 1.5px solid rgba(255, 255, 255, .35); border-radius: 22px; pointer-events: none; transition: border-color .3s, inset .3s; }
.k-newsfeat:hover { transform: translateY(-6px); color: #fff; } .k-newsfeat:hover::after { border-color: var(--k-gold); inset: 10px; }
.k-newsfeat .in { padding: clamp(1.6rem, 4vw, 3rem); max-width: 50rem; }
.k-newsfeat h3 { font-size: clamp(1.5rem, 3.2vw, 2.4rem); color: #fff; line-height: 1.12; text-shadow: 0 4px 22px rgba(0, 0, 0, .5); }
.k-newsfeat p { color: rgba(255, 255, 255, .88); margin: .6rem 0 1rem; }
.k-tag { display: inline-block; padding: .3rem .8rem .3rem .9rem; font-size: .76rem; font-weight: 800; background: var(--k-grad-gold); color: #0a0a0a; border-radius: 4px 14px 14px 4px; box-shadow: 0 6px 14px rgba(0, 0, 0, .22); }
.k-more { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; color: var(--k-gold); }
.k-news { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: 22px; background: var(--surface); overflow: hidden; text-decoration: none; color: var(--text); border: 1px solid var(--line); box-shadow: var(--k-shadow-1); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.k-news:hover { transform: translateY(-8px); box-shadow: var(--k-shadow-3); color: var(--text); }
.k-news .img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--k-deep); }
.k-news .img span.pic { position: absolute; inset: 0; background: var(--bg-img) center / cover; transition: transform .7s; }
.k-news:hover .img span.pic { transform: scale(1.12); }
.k-news .img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3, 13, 34, .55), transparent 55%); }
.k-news .k-tag { position: absolute; left: 0; top: 14px; z-index: 2; }
.k-news .body { padding: 1.1rem 1.25rem 1.4rem; position: relative; }
.k-news .body::before { content: ""; position: absolute; left: 1.25rem; top: 0; width: 44px; height: 4px; border-radius: 4px; background: var(--k-grad-gold); transform: translateY(-50%); }
.k-news time { font-size: .8rem; font-weight: 700; color: var(--k-royal); } [data-bs-theme="dark"] .k-news time { color: var(--k-sky); }
.k-news h3 { font-size: 1.08rem; line-height: 1.25; color: var(--heading); margin: .35rem 0 .45rem; }
.k-news p { font-size: .92rem; color: var(--kku-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* -------------------------------------------------- across uganda */
.k-reach { text-align: center; }
.k-bignum { position: relative; display: inline-grid; place-items: center; width: clamp(190px, 24vw, 270px); aspect-ratio: 1; margin: .5rem auto 1.4rem; border-radius: 50%;
    background: radial-gradient(circle at 35% 25%, #1a78dd, #0b4ba3 55%, #06265a); box-shadow: 0 0 0 8px rgba(255, 212, 0, .9), 0 0 0 16px rgba(255, 212, 0, .2), 0 0 90px rgba(77, 182, 232, .6); }
.k-bignum::before { content: ""; position: absolute; inset: -34px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .4); animation: k-spin 50s linear infinite; }
.k-bignum b { font-family: var(--font-display); font-weight: 800; font-size: clamp(4rem, 9vw, 6.4rem); line-height: .9; color: #fff; text-shadow: 0 6px 24px rgba(0, 0, 0, .4); }
.k-bignum small { display: block; font-size: .85rem; font-weight: 700; color: var(--k-gold); letter-spacing: .04em; }
.k-regions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; max-width: 880px; margin: 2rem auto 0; }
.k-region { position: relative; padding: 1.3rem 1rem; border-radius: 22px; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(8px); font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: #fff; overflow: hidden; transition: transform .35s, background .35s; }
.k-region::before { content: ""; position: absolute; inset: auto 0 0 0; height: 60%; background: url('/images/patterns/wavelines.svg') center / cover; opacity: .18; }
.k-region i { display: block; margin-bottom: .35rem; font-size: 1.5rem; color: var(--k-gold); position: relative; }
.k-region:hover { transform: translateY(-8px) scale(1.03); background: rgba(255, 255, 255, .16); }
.k-reach a.k-link { color: var(--k-gold); font-weight: 800; }

/* ---------------------------------------------------------- voices */
.k-voice { position: relative; max-width: 860px; margin: 0 auto; padding: clamp(2rem, 5vw, 3.4rem); border-radius: 32px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--k-shadow-3); overflow: hidden; text-align: center; }
.k-voice::before { content: "\201C"; position: absolute; left: 1.2rem; top: -.9rem; font-family: Georgia, serif; font-size: 9rem; line-height: 1; color: var(--k-gold); opacity: .9; }
.k-voice::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 240px; aspect-ratio: 1; background: url('/images/logo-mark.png') center / contain no-repeat; opacity: .07; }
.k-voice p { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 2.6vw, 1.85rem); line-height: 1.35; color: var(--heading); margin: 0 0 1.2rem; }
.k-voice cite { position: relative; z-index: 1; font-style: normal; font-weight: 800; color: var(--k-royal); } [data-bs-theme="dark"] .k-voice cite { color: var(--k-sky); }
#voicesCarousel .carousel-control-prev, #voicesCarousel .carousel-control-next { width: 54px; }
#voicesCarousel .carousel-control-prev-icon, #voicesCarousel .carousel-control-next-icon { background-color: var(--k-royal); border-radius: 50%; background-size: 55%; width: 44px; height: 44px; box-shadow: var(--k-shadow-2); filter: none; }

/* ---------------------------------------------------------- events */
.k-event { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: 22px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--k-shadow-1); transition: transform .35s, box-shadow .35s; }
.k-event:hover { transform: translateY(-8px); box-shadow: var(--k-shadow-3); }
.k-event .cover { position: relative; height: 150px; background: var(--bg-img, linear-gradient(135deg, #0b4ba3, #06265a)) center / cover; }
.k-event .cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3, 13, 34, .55), transparent 70%); }
.k-event .date { position: absolute; z-index: 2; left: 14px; bottom: -22px; min-width: 62px; padding: .45rem .6rem; text-align: center; border-radius: 16px 16px 16px 4px; background: var(--k-grad-gold); color: #0a0a0a; box-shadow: var(--k-shadow-gold); line-height: 1; }
.k-event .date .d { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; } .k-event .date .m { font-size: .72rem; font-weight: 800; }
.k-event .body { padding: 2rem 1.25rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.k-event h3 { font-size: 1.08rem; color: var(--heading); } .k-event p { color: var(--kku-muted); font-size: .92rem; }

/* ------------------------------------------------------ gallery mosaic */
.k-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(110px, 15vw, 190px); gap: .8rem; }
.k-mosaic a { position: relative; overflow: hidden; border-radius: 20px; box-shadow: var(--k-shadow-2); border: 3px solid var(--surface); }
.k-mosaic a:nth-child(1) { grid-column: span 2; grid-row: span 2; } .k-mosaic a:nth-child(4), .k-mosaic a:nth-child(7) { grid-column: span 2; }
.k-mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.k-mosaic a:hover img { transform: scale(1.12) rotate(1deg); }
.k-mosaic a::after { content: "\F52A"; font-family: bootstrap-icons; position: absolute; right: 12px; top: 12px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(6, 38, 90, .65); backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s; }
.k-mosaic a:hover::after { opacity: 1; }
.k-mosaic span { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem .9rem .7rem; color: #fff; font-weight: 700; font-size: .8rem; background: linear-gradient(0deg, rgba(3, 13, 34, .85), transparent); opacity: 0; transform: translateY(8px); transition: .3s; }
.k-mosaic a:hover span { opacity: 1; transform: none; }
.home-video { border-radius: 22px; box-shadow: var(--k-shadow-2); transition: transform .35s, box-shadow .35s; }
.home-video:hover { transform: translateY(-6px); box-shadow: var(--k-shadow-3); }
.home-video .play { box-shadow: 0 0 0 10px rgba(255, 212, 0, .28), 0 12px 30px rgba(0, 0, 0, .45); transition: transform .3s; }
.home-video:hover .play { transform: scale(1.12); }

/* ------------------------------------------------------------- CTA */
.join-cta { background: var(--k-grad-hero); border: 0; padding: clamp(5rem, 9vw, 8rem) 0; }
.join-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url('/images/patterns/wavelines.svg') center / cover; opacity: .16; }
.join-cta .container { position: relative; z-index: 3; }
.join-cta .k-watermark { right: auto; left: -10%; width: min(60vw, 640px); opacity: .1; }
.join-cta h2 { font-weight: 800; font-size: clamp(2rem, 4.4vw, 3.4rem); color: #fff; }
.join-cta p { color: rgba(255, 255, 255, .86); max-width: 40rem; margin-inline: auto; font-size: 1.12rem; }
.join-cta .btn { padding: .9rem 1.8rem; border-radius: 14px; }

/* ================================================== INNER PAGE HEROES */
.page-hero, .news-masthead {
    background: var(--k-grad-hero); border: 0; padding: clamp(3.4rem, 6vw, 5.6rem) 0 clamp(5.6rem, 9vw, 8.4rem); text-align: left;
}
.page-hero > .container, .news-masthead > .container { position: relative; z-index: 3; }
.page-hero::after, .news-masthead::after { content: ""; display: block !important; position: absolute; inset: 0; z-index: 0; background: url('/images/patterns/wavelines.svg') center bottom / cover no-repeat; opacity: .2; animation: k-drift 26s ease-in-out infinite alternate; pointer-events: none; }
.page-hero::before, .news-masthead::before { display: block !important; }
.news-masthead-pattern { display: none !important; }
.page-hero > .container::before, .news-masthead > .container::before {
    content: ""; position: absolute; z-index: -1; right: -2%; top: 50%; width: min(46vw, 420px); aspect-ratio: 1; transform: translateY(-50%) rotate(-12deg);
    background: url('/images/logo-mark.png') center / contain no-repeat; opacity: .12; filter: saturate(.5) brightness(1.8);
}
.page-hero h1, .masthead-title {
    font-weight: 800; letter-spacing: -.035em; font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.05;
    background: linear-gradient(180deg, #fff 35%, #bfe3f7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 20px rgba(0, 0, 0, .3));
}
.page-hero p, .masthead-lead { color: rgba(255, 255, 255, .86); font-size: 1.15rem; max-width: 44rem; }
.page-hero-stats { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.page-hero-stats .chip { padding: .5rem 1rem; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .24); backdrop-filter: blur(8px); color: #fff; font-weight: 600; }
.page-hero-stats .chip strong { color: var(--k-gold); }
.page-hero .badge-type { background: var(--k-grad-gold); color: #0a0a0a; border-radius: 4px 14px 14px 4px; padding: .3rem .9rem; font-weight: 800; }
.news-search-form { background: rgba(255, 255, 255, .96); border-radius: 18px; box-shadow: var(--k-shadow-3); }
.news-search-form button { background: linear-gradient(135deg, #1269c9, #0b4ba3); border-radius: 12px; }
.masthead-ticker { border-radius: 24px; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(10px); box-shadow: var(--k-shadow-3); }
.ticker-item:hover { background: rgba(255, 255, 255, .1); }
.badge-pill { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .26); color: #fff; backdrop-filter: blur(8px); }

/* =================================================== LEGACY CARD UPGRADE */
.news-card, .event-card, .event-card-lg, .achievement-showcase-card, .benefit-card, .leader-card, .step-chip, .news-mag-item, .news-lead-card, .sb-card, .sidebar-card, .publication-list .list-group-item, .reg-type-card, .reg-steps-card, .reg-benefits-card, .status-check-card, .reg-form-inner {
    border-radius: 22px; border: 1px solid var(--line); box-shadow: var(--k-shadow-1); background: var(--surface);
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, border-color .3s;
}
.news-card:hover, .event-card:hover, .event-card-lg:hover, .benefit-card:hover, .leader-card:hover, .news-mag-item:hover, .news-lead-card:hover, .reg-type-card:hover {
    transform: translateY(-8px); box-shadow: var(--k-shadow-3); border-color: var(--k-ring);
}
.benefit-card { position: relative; overflow: hidden; padding: 1.7rem 1.5rem; }
.benefit-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--k-royal), var(--k-sky), var(--k-gold)); }
.benefit-card::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 130px; aspect-ratio: 1; background: url('/images/logo-mark.png') center / contain no-repeat; opacity: .06; transition: transform .6s, opacity .4s; }
.benefit-card:hover::after { transform: rotate(40deg) scale(1.3); opacity: .12; }
.benefit-card > i { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; font-size: 1.4rem; color: #fff; background: var(--k-grad-sky); box-shadow: 0 8px 18px rgba(11, 75, 163, .3); margin-bottom: .9rem; }
.benefit-card h3, .benefit-card h5 { color: var(--heading); }
.achievement-showcase-card .medal-badge { background: var(--k-grad-gold); border-radius: 20px 20px 20px 6px; box-shadow: var(--k-shadow-gold); }

/* news list page */
.news-page { background: linear-gradient(180deg, var(--bg), var(--k-tint)); }
.news-lead-card { overflow: hidden; display: block; }
.news-lead-img { transition: transform .8s; } .news-lead-card:hover .news-lead-img { transform: scale(1.06); }
.news-lead-card .news-lead-img, .news-mag-img { position: relative; }
.news-lead-card { position: relative; }
.news-lead-card::after, .news-mag-item::after { content: ""; position: absolute; inset: 10px; border: 1.5px solid transparent; border-radius: 16px; pointer-events: none; transition: border-color .3s; }
.news-lead-card:hover::after, .news-mag-item:hover::after { border-color: rgba(255, 212, 0, .75); }
.news-mag-item { overflow: hidden; position: relative; }
.news-mag-img { transition: transform .7s; } .news-mag-item:hover .news-mag-img { transform: scale(1.08); }
.news-mag-item { overflow: hidden; }
.cat-tag { background: var(--k-grad-gold); border-radius: 4px 14px 14px 4px; padding: .3rem .85rem; font-weight: 800; box-shadow: 0 6px 14px rgba(0, 0, 0, .25); }
.read-more, .read-more-sm { color: var(--k-royal); font-weight: 800; } [data-bs-theme="dark"] .read-more, [data-bs-theme="dark"] .read-more-sm { color: var(--k-sky); }
.filter-chip { border-radius: 999px; padding: .5rem 1.05rem; font-weight: 700; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--k-shadow-1); transition: all .25s; }
.filter-chip.active, .filter-chip:hover { background: linear-gradient(135deg, #1269c9, #0b4ba3); color: #fff; border-color: transparent; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(11, 75, 163, .35); }
.filter-chip .chip-count { background: var(--k-gold); color: #0a0a0a; border-radius: 999px; padding: 0 .45rem; font-size: .72rem; margin-left: .3rem; }
.sb-trending, .sidebar-card { overflow: hidden; position: relative; }
.sb-rank { background: var(--k-grad-gold); color: #0a0a0a; border-radius: 12px 12px 12px 3px; box-shadow: var(--k-shadow-gold); font-weight: 800; }
.sb-newsletter { background: var(--k-grad-dark); border: 0; color: #fff; position: relative; overflow: hidden; }
.sb-newsletter::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 150px; aspect-ratio: 1; background: url('/images/logo-mark.png') center / contain no-repeat; opacity: .12; }
.sb-newsletter p { color: rgba(255, 255, 255, .8); }
.sb-cta { border: 0; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--k-grad-gold) border-box; border: 2px solid transparent; }
.cta-card { background: var(--k-grad-dark); border: 0; color: #fff; position: relative; overflow: hidden; }
.cta-card::after { content: ""; position: absolute; right: -30px; bottom: -30px; width: 130px; aspect-ratio: 1; background: url('/images/logo-mark.png') center / contain no-repeat; opacity: .12; }
.cta-card p { color: rgba(255, 255, 255, .82); }
.news-pagination .page-link { border-radius: 14px !important; margin: 0 .2rem; box-shadow: var(--k-shadow-1); font-weight: 700; }
.news-pagination .page-item.active .page-link { background: linear-gradient(135deg, #1269c9, #0b4ba3); border-color: transparent; color: #fff; }
.news-empty { padding: 3rem; text-align: center; border-radius: 24px; background: var(--surface); border: 2px dashed var(--k-ring); }

/* article page */
.article-hero { position: relative; min-height: clamp(340px, 46vw, 520px); display: flex; align-items: flex-end; background-size: cover; background-position: center; padding: 0 0 clamp(4.4rem, 8vw, 7rem); color: #fff; isolation: isolate; }
.article-hero-overlay { background: linear-gradient(0deg, rgba(3, 13, 34, .96) 0%, rgba(6, 38, 90, .62) 50%, rgba(6, 38, 90, .2) 100%) !important; }
.article-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; height: clamp(46px, 7vw, 100px); background: var(--bg);
    -webkit-mask: url('/images/patterns/wave.svg') center / 100% 100% no-repeat; mask: url('/images/patterns/wave.svg') center / 100% 100% no-repeat; }
.article-hero .container { position: relative; z-index: 3; }
.article-hero h1 { color: #fff; font-weight: 800; letter-spacing: -.03em; font-size: clamp(1.9rem, 4.4vw, 3.3rem); text-shadow: 0 6px 28px rgba(0, 0, 0, .5); max-width: 52rem; }
.article-meta { color: rgba(255, 255, 255, .84); }
.article-body { font-size: 1.13rem; line-height: 1.85; }
.article-body > p:first-of-type::first-letter { float: left; font-family: var(--font-display); font-weight: 800; font-size: 4.2rem; line-height: .8; padding: .35rem .6rem 0 0; color: var(--k-royal); }
.article-body h2 { position: relative; padding-left: 1rem; margin-top: 2.2rem; font-weight: 800; }
.article-body h2::before { content: ""; position: absolute; left: 0; top: .15em; bottom: .15em; width: 5px; border-radius: 5px; background: linear-gradient(180deg, var(--k-gold), var(--k-sky)); }
.article-body blockquote { position: relative; margin: 1.8rem 0; padding: 1.6rem 1.8rem 1.6rem 3.4rem; border-radius: 22px; background: linear-gradient(135deg, var(--k-sky-soft), var(--surface)); border: 1px solid var(--k-ring); font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; box-shadow: var(--k-shadow-1); }
.article-body blockquote::before { content: "\201C"; position: absolute; left: 1rem; top: -.2rem; font-size: 4rem; font-family: Georgia, serif; color: var(--k-gold); }
.article-body img, .article-inline-img { display: block; width: 100%; height: auto; margin: 1.8rem 0; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--k-shadow-2); }
.article-body ul li::marker { color: var(--k-royal); }
.share-row a, .share-row button { border-radius: 50%; box-shadow: var(--k-shadow-1); transition: transform .25s; } .share-row a:hover, .share-row button:hover { transform: translateY(-4px) rotate(-6deg); }

/* events list + details */
.event-card-lg { position: relative; overflow: hidden; padding: 0 0 1.3rem; }
.event-card-lg > :not(.event-poster):not(.event-date-badge) { margin-left: 1.3rem; margin-right: 1.3rem; }
.event-poster { height: 190px; background-size: cover; background-position: center; position: relative; transition: transform .7s; margin-bottom: 0; }
.event-card-lg:hover .event-poster { transform: scale(1.06); }
.event-card-lg { background: var(--surface); }
.event-card-lg:not(:has(.event-poster)) { padding-top: 0; }
.event-date-badge { background: var(--k-grad-gold); color: #0a0a0a; border: 0; border-radius: 16px 16px 16px 4px; box-shadow: var(--k-shadow-gold); }
.event-date-badge .d, .event-date-badge .m { color: #0a0a0a; }
.event-card-lg .event-date-badge { position: relative; z-index: 2; margin: -28px 0 .8rem 1.3rem; width: max-content; }
.badge-type { background: var(--k-sky-soft); color: var(--k-royal); border-radius: 999px; font-weight: 800; padding: .25rem .8rem; }
[data-bs-theme="dark"] .badge-type { color: var(--k-sky); }
.framed img { border-radius: 24px !important; box-shadow: var(--k-shadow-3); border: 8px solid var(--surface); outline: 1px solid var(--line); }

/* about page */
.timeline { position: relative; padding-left: 1.6rem; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 4px; border-radius: 4px; background: linear-gradient(180deg, var(--k-gold), var(--k-sky), var(--k-royal)); }
.timeline-item { position: relative; margin-bottom: 1.1rem; padding: 1rem 1.2rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--k-shadow-1); transition: transform .3s; }
.timeline-item:hover { transform: translateX(6px); box-shadow: var(--k-shadow-2); }
.timeline-item::before { content: ""; position: absolute; left: -1.62rem; top: 1.25rem; width: 16px; height: 16px; border-radius: 50%; background: var(--k-gold); border: 3px solid var(--bg); box-shadow: 0 0 0 3px var(--k-royal); }
.timeline-item .year { display: inline-block; font-family: var(--font-display); font-weight: 800; color: #0a0a0a; background: var(--k-grad-gold); padding: .1rem .7rem; border-radius: 999px; font-size: .82rem; margin-bottom: .3rem; }
.timeline-item p { margin: 0; color: var(--kku-muted); }
.bg-light-alt { background: linear-gradient(180deg, var(--k-tint), var(--bg)); position: relative; }
.leader-card { text-align: center; padding: 1.6rem 1rem; position: relative; overflow: hidden; }
.leader-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 74px; background: var(--k-grad-hero); }
.leader-avatar { position: relative; z-index: 1; border: 5px solid var(--surface); box-shadow: 0 0 0 3px var(--k-gold), var(--k-shadow-2); background-color: var(--k-sky-soft); }
.leader-card h6 { color: var(--heading); font-family: var(--font-display); font-weight: 800; }
.leader-card span { color: var(--kku-muted); font-size: .88rem; }
.leader-feature img, .org-chart img { border-radius: 26px; border: 8px solid var(--surface); outline: 1px solid var(--line); box-shadow: var(--k-shadow-3); }
.k-swatch { display: inline-flex; align-items: center; gap: .6rem; padding: .35rem 1rem .35rem .4rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--k-shadow-1); font-weight: 700; }
.k-swatch i { width: 2rem; height: 2rem; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .6), 0 2px 6px rgba(0, 0, 0, .25); }
.k-slogan { position: relative; padding: clamp(1.6rem, 4vw, 2.6rem); border-radius: 28px; background: var(--k-grad-hero); color: #fff; overflow: hidden; box-shadow: var(--k-shadow-3); isolation: isolate; }
.k-slogan::before { content: ""; position: absolute; right: -40px; top: 50%; translate: 0 -50%; width: 240px; aspect-ratio: 1; background: url('/images/logo-mark.png') center / contain no-repeat; opacity: .16; z-index: -1; }
.k-slogan p { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 3.4vw, 2.5rem); line-height: 1.12; margin: 0; color: #fff; }
.k-vm { position: relative; height: 100%; padding: 2rem 1.8rem; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--k-shadow-2); overflow: hidden; }
.k-vm::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, var(--k-royal), var(--k-sky), var(--k-gold)); }
.k-vm .ic { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-size: 1.6rem; color: #fff; background: var(--k-grad-sky); box-shadow: 0 10px 22px rgba(11, 75, 163, .32); margin-bottom: 1rem; }
.k-vm h2 { font-size: 1.3rem; } .k-vm p { color: var(--kku-muted); margin: 0; }

/* directory, faq, forms, tables */
.accordion-item { border-radius: 18px !important; overflow: hidden; margin-bottom: .8rem; border: 1px solid var(--line); box-shadow: var(--k-shadow-1); }
.accordion-button:not(.collapsed) { background: var(--k-sky-soft); color: var(--k-royal); box-shadow: none; }
.form-control:focus, .form-select:focus { border-color: var(--k-sky); box-shadow: 0 0 0 .25rem rgba(77, 182, 232, .25); }
.empty-state { border-radius: 24px; border: 2px dashed var(--k-ring); background: var(--surface); }

/* photo grid + lightbox polish */
.photo-tile { border-radius: 18px; box-shadow: var(--k-shadow-2); border: 3px solid var(--surface); }
.photo-tile:hover { box-shadow: var(--k-shadow-3), 0 0 0 3px var(--k-gold); }
.album-card { border-radius: 24px; overflow: hidden; background: var(--surface); box-shadow: var(--k-shadow-2); border: 1px solid var(--line); transition: transform .35s, box-shadow .35s; display: block; text-decoration: none; }
.album-card:hover { transform: translateY(-8px) rotate(-.6deg); box-shadow: var(--k-shadow-3); }
.album-card h6 { padding: 1rem 1.2rem 1.2rem; margin: 0; font-family: var(--font-display); font-weight: 800; color: var(--heading); }
.album-cover { position: relative; transition: transform .7s; } .album-card .album-cover { overflow: hidden; }
.album-count { background: var(--k-grad-gold); color: #0a0a0a; border-radius: 999px; font-weight: 800; }
.video-card { border-radius: 24px; box-shadow: var(--k-shadow-2); border: 1px solid var(--line); transition: transform .35s, box-shadow .35s; }
.video-card:hover { transform: translateY(-6px); box-shadow: var(--k-shadow-3); }

/* ============================================================ FOOTER */
.site-footer { background: var(--k-grad-dark); margin-top: 0; padding-top: clamp(3.4rem, 6vw, 5rem); border: 0; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; z-index: 2; height: clamp(40px, 6vw, 84px); background: var(--bg);
    -webkit-mask: url('/images/patterns/wave-flip.svg') center / 100% 100% no-repeat; mask: url('/images/patterns/wave-flip.svg') center / 100% 100% no-repeat; }
.site-footer::after { content: ""; position: absolute; z-index: -1; right: -6%; bottom: -12%; width: min(46vw, 520px); aspect-ratio: 1; background: url('/images/logo-mark.png') center / contain no-repeat; opacity: .1; transform: rotate(-10deg); filter: brightness(1.6) saturate(.5); }
.site-footer .container { position: relative; z-index: 3; }
.site-footer h6 { color: var(--k-gold); font-family: var(--font-display); font-weight: 800; position: relative; padding-bottom: .6rem; margin-bottom: 1rem; }
.site-footer h6::after { content: ""; position: absolute; left: 0; bottom: 0; width: 38px; height: 4px; border-radius: 4px; background: var(--k-grad-gold); }
.footer-brand { font-size: 1.5rem; font-weight: 800; background: var(--k-grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.footer-links a { transition: padding .25s, color .25s; } .footer-links a:hover { color: var(--k-gold); padding-left: .4rem; }
.social-row a { width: 42px; height: 42px; border-radius: 50%; display: inline-grid; place-items: center; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: #fff; transition: all .3s; margin-right: .4rem; }
.social-row a:hover { background: var(--k-gold); color: #0a0a0a; transform: translateY(-4px) rotate(-8deg); }
.newsletter-form .form-control { border-radius: 14px; background: rgba(255, 255, 255, .95); border: 0; }
.newsletter-form .btn { border-radius: 14px; }
.back-to-top { background: var(--k-grad-gold); color: #0a0a0a; box-shadow: var(--k-shadow-gold); }

/* ajax swap */
.k-ajax-busy { opacity: .45; transition: opacity .2s; pointer-events: none; }
.k-ajax-in { animation: k-fade .45s ease both; }
@keyframes k-fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.k-loadbar { position: fixed; left: 0; top: 0; height: 4px; width: 0; z-index: 3000; background: linear-gradient(90deg, var(--k-gold), var(--k-sky)); transition: width .4s ease, opacity .3s; }

/* ============================================================ RESPONSIVE */
@media (max-width: 991.98px) {
    .k-collage { margin-top: 1.5rem; min-height: 420px; }
    .k-chip.one { left: 0; } .k-about-art { padding-left: 1rem; }
    .k-mosaic { grid-template-columns: repeat(2, 1fr); } .k-mosaic a:nth-child(1) { grid-column: span 2; } .k-mosaic a:nth-child(4) { grid-column: span 1; }
}
@media (max-width: 575.98px) {
    .k-hero { padding-bottom: 8.5rem; }
    .k-frame.a { width: 78%; } .k-frame.b { width: 50%; } .k-frame.c { display: none; }
    .k-chip.two { display: none; } .k-medallion { left: 8%; top: -2%; }
    .k-about-art .seal { width: 84px; } .k-hero-facts { gap: 1.1rem 1.6rem; }
}

/* ---- reset the legacy header decorations that site.css put on ::before / ::after ---- */
.page-hero::before, .news-masthead::before, .page-header::before {
    inset: auto 0 -1px 0 !important; top: auto !important; width: auto; opacity: 1 !important; background-image: none !important;
    background-color: var(--wave, var(--bg)) !important; border-radius: 0; display: block !important;
}
.page-hero::after, .news-masthead::after, .page-header::after {
    inset: 0 !important; top: 0 !important; right: 0 !important; width: auto !important; height: auto !important; border-radius: 0 !important;
    background: url('/images/patterns/wavelines.svg') center bottom / cover no-repeat !important; opacity: .2 !important; display: block !important; z-index: 0;
}
.page-header { background: var(--k-grad-hero); color: #fff; position: relative; overflow: hidden; isolation: isolate; border: 0;
    padding: clamp(3.4rem, 6vw, 5.6rem) 0 clamp(5.6rem, 9vw, 8.4rem); }
.page-header::before { content: ""; position: absolute; z-index: 4; height: clamp(46px, 7vw, 110px); pointer-events: none;
    -webkit-mask: url('/images/patterns/wave.svg') center / 100% 100% no-repeat; mask: url('/images/patterns/wave.svg') center / 100% 100% no-repeat; }
.page-header .container { position: relative; z-index: 3; }
.page-header h1 { font-weight: 800; letter-spacing: -.035em; font-size: clamp(2.2rem, 5vw, 3.8rem); background: linear-gradient(180deg, #fff 35%, #bfe3f7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-header p { color: rgba(255, 255, 255, .86); }
.page-hero .container, .news-masthead .container { z-index: 3; }

/* bottom wave for sections that also have a top wave (both would otherwise share ::before) */
.k-wave-top.k-wave-bottom::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; z-index: 4; height: clamp(46px, 7vw, 110px); pointer-events: none; background: var(--wave, var(--bg));
    -webkit-mask: url('/images/patterns/wave.svg') center / 100% 100% no-repeat; mask: url('/images/patterns/wave.svg') center / 100% 100% no-repeat;
}
.k-dark.k-wave-top.k-wave-bottom { padding-bottom: clamp(5.5rem, 9vw, 9rem); }
.k-bignum .stat-number { font-size: clamp(4rem, 9vw, 6.4rem); color: #fff; line-height: .9; text-shadow: 0 6px 24px rgba(0, 0, 0, .4); }
.k-bignum > span { text-align: center; }

/* ---- animated court (court-sim.js) ---- */
.court .kk-p .sh { fill: rgba(0, 0, 0, .35); }
.court .kk-p .ft { fill: #0a0a0a; }
.court .kk-p .hd { fill: #1a1a1a; }
.court .kk-chaser .bd { fill: var(--k-sky); stroke: #fff; stroke-width: 1.4; }
.court .kk-defender .bd { fill: var(--k-gold); stroke: #0a0a0a; stroke-width: 1.4; }
.court .kk-p .ring { fill: none; stroke: rgba(255, 212, 0, .6); stroke-width: 1.5; }
.court .kk-trail { stroke: rgba(77, 182, 232, .55); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.court .kk-wake .bd { animation: kkWake .5s ease-out; }
@keyframes kkWake { 0% { stroke-width: 6; stroke: var(--k-gold); } 100% { stroke-width: 1.4; stroke: #fff; } }
.court .kk-pop { font: 800 13px/1 'Segoe UI', system-ui, sans-serif; paint-order: stroke; stroke: #030d22; stroke-width: 3px; animation: kkPop 1.1s ease-out forwards; }
.court .kk-pop.out { fill: var(--k-gold); }
.court .kk-pop.kho { fill: var(--k-sky); }
@keyframes kkPop { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-14px); } }
.court .kk-burst { fill: none; stroke: var(--k-gold); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: kkBurst .7s ease-out forwards; }
@keyframes kkBurst { from { opacity: 1; transform: scale(.4); } to { opacity: 0; transform: scale(2.6); } }
.court .c-pole.kk-hit { animation: kkPole .5s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes kkPole { 0% { transform: scale(1.9); } 100% { transform: scale(1); } }
.court-hud { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; margin-top: .7rem; font-size: .8rem; color: rgba(255, 255, 255, .8); position: relative; }
.court-hud b { color: var(--k-gold); font-weight: 800; }
.court-toggle { margin-left: auto; color: #fff; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); }
.court-toggle:hover, .court-toggle:focus-visible { color: #06265a; background: var(--k-gold); border-color: var(--k-gold); }
@media (prefers-reduced-motion: reduce) { .court .kk-pop, .court .kk-burst, .court .kk-wake .bd, .court .c-pole.kk-hit { animation: none; } }

/* ---- v3: story track, pioneers, fallbacks, discover ---- */
.event-poster-fallback { background: var(--k-grad-dark) !important; position: relative; }
.event-poster-fallback::after { content: ""; position: absolute; inset: 0; background: url('/images/logo-mark.png') center / 46% no-repeat; opacity: .35; }
.k-journey { background: var(--k-grad-dark); color: #fff; padding-top: 7rem; padding-bottom: 6rem; overflow: hidden; }
.k-journey .section-title, .k-journey h3 { color: #fff; }
.k-journey .section-text { color: rgba(255, 255, 255, .8); }
.k-journey .eyebrow { color: var(--k-gold); background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); }
.k-track { list-style: none; margin: 0; padding: .5rem 0 1.4rem; display: flex; gap: 1.2rem; overflow-x: auto; scroll-snap-type: x proximity; position: relative; scrollbar-color: var(--k-gold) transparent; }
.k-track::before { content: ""; position: absolute; left: 0; right: 0; top: 2.35rem; height: 3px; background: linear-gradient(90deg, var(--k-gold), var(--k-sky), var(--k-gold)); opacity: .5; min-width: 100%; }
.k-stop { flex: 0 0 min(280px, 78vw); scroll-snap-align: start; position: relative; padding-top: 3.6rem; }
.k-stop .yr { position: absolute; top: .4rem; left: 0; background: var(--k-grad-gold); color: #0a0a0a; font-weight: 800; border-radius: 999px; padding: .35rem .95rem; box-shadow: var(--k-shadow-gold); z-index: 1; }
.k-stop figure { margin: 0 0 .8rem; border-radius: 18px; overflow: hidden; border: 3px solid rgba(255, 255, 255, .85); box-shadow: 0 14px 30px rgba(0, 0, 0, .35); aspect-ratio: 4 / 3; background: #0b2a5f; }
.k-stop:nth-child(even) figure { transform: rotate(1.4deg); } .k-stop:nth-child(odd) figure { transform: rotate(-1.2deg); }
.k-stop img { width: 100%; height: 100%; object-fit: cover; display: block; }
.k-stop h3 { font-size: 1.1rem; margin: 0 0 .25rem; }
.k-stop p { font-size: .92rem; color: rgba(255, 255, 255, .8); margin: 0; }
.k-pioneers { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .5rem .7rem; align-items: center; font-size: .9rem; }
.k-pioneers span { color: var(--k-gold); font-weight: 700; margin-right: .4rem; }
.k-pioneers b { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: .3rem .85rem; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) { .k-stop figure { transition: transform .35s ease; } .k-stop:hover figure { transform: rotate(0) scale(1.03); } }

.k-person.no-photo { background: var(--k-grad-dark); }
.k-person.no-photo img { object-fit: contain; padding: 22% 18% 30%; opacity: .9; }
.profile-card-full.no-photo { background: var(--k-grad-dark); }
.profile-card-full.no-photo > img { object-fit: contain; padding: 14% 22% 36%; background: transparent; }
.k-figure { margin: 0; border-radius: 22px; overflow: hidden; box-shadow: var(--k-shadow-2); border: 4px solid var(--surface); position: relative; }
.k-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.k-figure figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem 1rem .8rem; color: #fff; font-weight: 600; font-size: .92rem; background: linear-gradient(0deg, rgba(3, 13, 34, .85), transparent); }
.k-why-light li { background: var(--surface); border-color: var(--line); color: inherit; backdrop-filter: none; }

/* =====================================================================
   v4: header redesign (ticker strip + floating glass pill) and floaters
   ===================================================================== */
.topbar { position: relative; background: linear-gradient(100deg, #020a1c 0%, #06265a 55%, #0b4ba3 100%); border-bottom: 0; font-size: .86rem; overflow: hidden; }
.topbar::before { content: ""; position: absolute; inset: 0; background: url('/images/patterns/wavelines.svg') center / 900px repeat-x; opacity: .12; pointer-events: none; }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--k-gold), var(--k-sky), var(--k-gold), transparent); opacity: .85; }
.topbar .container { position: relative; z-index: 1; min-height: 40px; }
.topbar a, .topbar span { color: rgba(255, 255, 255, .9); }
.topbar i { color: var(--k-gold); }
.topbar .btn, .topbar a.btn-warning, .topbar a[href*="Register"] { border-radius: 999px; padding: .22rem .95rem; font-weight: 700; color: #0a0a0a; background: var(--k-grad-gold); box-shadow: 0 4px 14px rgba(255, 212, 0, .35); }
.topbar-ticker { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 1.5rem; width: min(440px, 38vw); overflow: hidden; text-align: center; pointer-events: none; }
.topbar-ticker span { position: absolute; inset: 0; opacity: 0; white-space: nowrap; font-weight: 600; letter-spacing: .01em; animation: k-tick 12s infinite; }
.topbar-ticker span:nth-child(2) { animation-delay: 4s; } .topbar-ticker span:nth-child(3) { animation-delay: 8s; }
@keyframes k-tick { 0% { opacity: 0; transform: translateY(10px); } 4%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: translateY(-10px); } }
@media (max-width: 1199px) { .topbar-ticker { display: none; } }

header { position: relative; z-index: 1030; background: linear-gradient(180deg, #06265a 0%, #052150 60%, #041a40 100%); }
.main-nav { position: sticky; top: 0; background: transparent !important; box-shadow: none !important; padding: .55rem 0 !important; backdrop-filter: none; }
.main-nav::after { display: none !important; }
.main-nav > .container { position: relative; background: color-mix(in srgb, var(--surface) 95%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); border-radius: 999px; padding: .4rem .6rem .4rem .5rem; box-shadow: 0 14px 40px rgba(6, 38, 90, .18), 0 2px 0 rgba(255, 255, 255, .6) inset; border: 1px solid color-mix(in srgb, var(--k-sky) 35%, transparent); transition: box-shadow .3s, background .3s, transform .3s; max-width: min(1240px, calc(100% - 1.5rem)); }
.main-nav > .container::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: linear-gradient(110deg, var(--k-royal), var(--k-sky), var(--k-gold), var(--k-sky), var(--k-royal)); background-size: 250% 100%; animation: k-slide 10s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .55; pointer-events: none; }
.main-nav.is-scrolled > .container { box-shadow: 0 18px 46px rgba(6, 38, 90, .28); background: color-mix(in srgb, var(--surface) 92%, transparent); }
.navbar-brand { gap: .65rem; margin-right: .5rem; }
.brand-crest { position: relative; display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #fff, #e6f1ff); box-shadow: 0 0 0 3px var(--k-gold), 0 8px 18px rgba(6, 38, 90, .35); flex: none; }
.brand-crest::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px dashed var(--k-sky); opacity: .75; animation: k-spin 24s linear infinite; }
.brand-crest img { box-shadow: none !important; width: 44px; height: 44px; border-radius: 50%; object-fit: contain; }
.navbar-brand:hover .brand-crest img { transform: rotate(-10deg) scale(1.08); }
@keyframes k-spin { to { transform: rotate(360deg); } }
.brand-text { font-family: 'Bricolage Grotesque', 'Figtree', sans-serif; font-size: 1.12rem; line-height: 1.05; }
.brand-text small { display: block; font-family: 'Figtree', sans-serif; font-size: .68rem; font-weight: 600; opacity: .7; letter-spacing: .02em; }
.main-nav .navbar-nav { gap: .15rem; }
.main-nav .nav-link { position: relative; font-weight: 600; font-size: .93rem; padding: .5rem .8rem !important; border-radius: 999px; color: var(--text); transition: background .25s, color .25s, transform .25s; }
.main-nav .nav-link::after { display: none !important; }
.main-nav .nav-link:hover, .main-nav .nav-link:focus-visible { background: color-mix(in srgb, var(--k-sky) 22%, transparent); color: var(--k-royal); transform: translateY(-1px); }
.main-nav .nav-link.active { background: var(--k-grad-gold); color: #0a0a0a; box-shadow: 0 6px 16px rgba(255, 212, 0, .45); }
.main-nav .btn.nav-link { background: linear-gradient(135deg, #1a7be0, #0b4ba3 70%, #06265a) !important; color: #fff !important; padding: .5rem 1.15rem !important; box-shadow: 0 8px 20px rgba(11, 75, 163, .4), 0 1px 0 rgba(255, 255, 255, .35) inset; }
.main-nav .btn.nav-link:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(11, 75, 163, .5); }
.main-nav .dropdown-menu { border: 0; border-radius: 20px; padding: .6rem; margin-top: .9rem; box-shadow: 0 22px 50px rgba(6, 38, 90, .28); background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: blur(14px); min-width: 15rem; }
.main-nav .dropdown-item { border-radius: 12px; padding: .55rem .8rem; font-weight: 600; font-size: .92rem; }
.main-nav .dropdown-item:hover, .main-nav .dropdown-item:focus { background: linear-gradient(90deg, rgba(77, 182, 232, .22), rgba(255, 212, 0, .2)); color: var(--k-deep); }
.main-nav .nav-tools { gap: .3rem; margin-left: .35rem; }
.main-nav .icon-btn { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; background: color-mix(in srgb, var(--k-sky) 16%, transparent); border: 1px solid color-mix(in srgb, var(--k-sky) 35%, transparent); color: var(--k-royal); transition: transform .3s, background .3s, color .3s; }
.main-nav .icon-btn:hover { background: var(--k-royal); color: #fff; transform: rotate(-12deg) scale(1.08); }
.main-nav .nav-staff { width: 40px; height: 40px; padding: 0 !important; display: inline-grid; place-items: center; background: transparent; border: 1px dashed color-mix(in srgb, var(--text) 35%, transparent); color: var(--text); opacity: .75; }
.main-nav .nav-staff:hover { opacity: 1; border-style: solid; }
@media (min-width: 992px) and (max-width: 1199px) { .brand-text small { display: none; } .main-nav .nav-link { padding: .5rem .55rem !important; font-size: .88rem; } }
@media (max-width: 991.98px) {
  .main-nav > .container { border-radius: 28px; }
  .main-nav .navbar-collapse { padding: .8rem .4rem .5rem; }
  .main-nav .navbar-nav { gap: .2rem; }
  .main-nav .nav-link { padding: .65rem 1rem !important; }
  .navbar-toggler { border: 0; border-radius: 50%; width: 44px; height: 44px; background: var(--k-grad-gold); box-shadow: var(--k-shadow-gold); }
}

/* ---- floaters ---- */
.k-floaters { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.k-floaters.sec { z-index: 0; }
.k-hero .container, .k-has-floaters .container { position: relative; z-index: 3; }
.k-has-floaters { position: relative; overflow: clip; }
.fl { position: absolute; display: block; --tx: 0px; --ty: 0px; transform: translate3d(var(--tx), var(--ty), 0); transition: transform .5s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
.fl > i { display: block; }
.fl-ring { width: 120px; height: 120px; left: 1%; top: 80%; border-radius: 50%; border: 10px solid rgba(255, 212, 0, .85); box-shadow: 0 0 40px rgba(255, 212, 0, .35), inset 0 0 20px rgba(255, 212, 0, .25); animation: fl-bob 9s ease-in-out infinite; }
.fl-ring.sm { width: 54px; height: 54px; border-width: 6px; left: auto; right: 6%; top: 66%; border-color: rgba(77, 182, 232, .9); box-shadow: 0 0 30px rgba(77, 182, 232, .5); animation-delay: -4s; }
.fl-ring.gold { border-color: rgba(255, 212, 0, .7); box-shadow: none; }
.k-floaters.sec .fl-ring { width: 90px; height: 90px; border-width: 8px; top: 8%; left: auto; right: 4%; }
.k-floaters.sec .fl-ring.sm { width: 46px; height: 46px; right: auto; left: 2%; top: 72%; border-width: 6px; }
.fl-blob { width: 260px; height: 260px; right: -60px; top: 6%; border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%; background: radial-gradient(circle at 30% 30%, rgba(77, 182, 232, .55), rgba(11, 75, 163, 0) 70%); filter: blur(2px); animation: fl-morph 16s ease-in-out infinite; }
.fl-blob.light { right: auto; left: -80px; top: 55%; width: 280px; height: 280px; background: radial-gradient(circle at 30% 30%, rgba(255, 212, 0, .28), rgba(255, 212, 0, 0) 70%); }
.fl-pole { width: 14px; height: 120px; left: 46%; bottom: 14%; border-radius: 8px; background: linear-gradient(90deg, #b57a2a, #f1c27a 45%, #8a5a1c); box-shadow: 0 12px 24px rgba(0, 0, 0, .35); transform: translate3d(var(--tx), var(--ty), 0) rotate(14deg); animation: fl-sway 7s ease-in-out infinite; }
.fl-pole i { position: absolute; left: -9px; top: -6px; width: 32px; height: 14px; border-radius: 50%; background: radial-gradient(#ffe880, #ffd400 70%); box-shadow: 0 0 18px rgba(255, 212, 0, .8); }
.fl-star { left: 41%; top: 11%; font-size: 1.7rem; color: var(--k-gold); filter: drop-shadow(0 0 12px rgba(255, 212, 0, .8)); animation: fl-twinkle 4s ease-in-out infinite; }
.fl-star.two { left: auto; right: 44%; top: auto; bottom: 30%; font-size: 1.1rem; color: #fff; animation-delay: -2s; }
.fl-star.dark { color: var(--k-gold); left: 48%; top: 8%; font-size: 1.3rem; }
.fl-wave { left: -2%; right: -2%; bottom: 24%; height: 90px; opacity: .18; background: url('/images/patterns/wavelines.svg') center / 700px repeat-x; animation: fl-drift 30s linear infinite; }
.fl-dotgrid { width: 120px; height: 120px; right: 8%; top: 8%; background: radial-gradient(circle, rgba(255, 255, 255, .55) 2.5px, transparent 3px) 0 0 / 20px 20px; opacity: .7; animation: fl-bob 11s ease-in-out infinite; }
.fl-dotgrid.dk { right: auto; left: 3%; top: auto; bottom: 8%; background-image: radial-gradient(circle, rgba(11, 75, 163, .35) 2.5px, transparent 3px); }
.fl-bolt { right: 40%; top: 60%; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; background: var(--k-grad-gold); color: #0a0a0a; font-size: 1.5rem; box-shadow: 0 12px 26px rgba(255, 212, 0, .45); transform: translate3d(var(--tx), var(--ty), 0) rotate(-12deg); animation: fl-bob 8s ease-in-out infinite; animation-delay: -2s; }
.fl-bolt.dark { right: 3%; top: auto; bottom: 10%; width: 46px; height: 46px; font-size: 1.2rem; }
.fl-medal { left: 52%; top: 5%; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #ffe880, #e0a800); color: #5c3b00; font-size: 1.6rem; border: 3px solid #fff; box-shadow: 0 12px 28px rgba(0, 0, 0, .35); animation: fl-bob 10s ease-in-out infinite; }
@keyframes fl-bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -22px; } }
@keyframes fl-sway { 0%, 100% { margin-top: 0; rotate: 0deg; } 50% { margin-top: -14px; rotate: 6deg; } }
@keyframes fl-twinkle { 0%, 100% { opacity: .35; scale: .8; } 50% { opacity: 1; scale: 1.25; } }
@keyframes fl-morph { 0%, 100% { border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%; } 50% { border-radius: 60% 40% 38% 62% / 58% 55% 45% 42%; } }
@keyframes fl-drift { to { background-position: 700px 0; } }
@media (max-width: 991.98px) { .fl-pole, .fl-medal, .fl-bolt:not(.dark), .fl-dotgrid:not(.dk) { display: none; } .fl-ring { width: 80px; height: 80px; } }
@media (prefers-reduced-motion: reduce) { .fl, .brand-crest::after, .main-nav > .container::before, .topbar-ticker span { animation: none !important; } .topbar-ticker span:first-child { opacity: 1; } }

/* ---- floating quick actions ---- */
.k-dock { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 1020; display: flex; flex-direction: column; gap: .5rem; padding: .5rem; border-radius: 999px; background: color-mix(in srgb, var(--k-night) 72%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 18px 44px rgba(3, 13, 34, .45); animation: dock-in .9s .6s cubic-bezier(.2, .8, .2, 1) both; }
.k-dock a { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: .55rem; height: 46px; width: 46px; padding: 0; border-radius: 999px; color: #fff; text-decoration: none; background: rgba(255, 255, 255, .1); overflow: hidden; transition: width .35s cubic-bezier(.2, .8, .2, 1), background .25s, color .25s; white-space: nowrap; flex-direction: row-reverse; }
.k-dock a i { flex: 0 0 46px; text-align: center; font-size: 1.15rem; line-height: 46px; }
.k-dock a span { display: none; font-weight: 700; font-size: .9rem; padding-left: 1rem; }
.k-dock a:hover span, .k-dock a:focus-visible span { display: inline; }
.k-dock a:hover, .k-dock a:focus-visible { width: 150px; background: var(--k-royal); }
.k-dock a.gold { background: var(--k-grad-gold); color: #0a0a0a; animation: dock-pulse 2.6s ease-in-out infinite; }
.k-dock a.gold:hover { background: var(--k-grad-gold); }
@keyframes dock-in { from { opacity: 0; transform: translate(40px, -50%); } to { opacity: 1; transform: translateY(-50%); } }
@keyframes dock-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 212, 0, .55); } 70% { box-shadow: 0 0 0 14px rgba(255, 212, 0, 0); } }
@media (max-width: 767.98px) { .k-dock { top: auto; bottom: 76px; right: 12px; transform: none; flex-direction: row; animation: none; padding: .35rem; } .k-dock a { width: 42px; height: 42px; } .k-dock a:hover { width: 42px; } .k-dock a span { display: none; } .k-dock a i { flex-basis: 42px; line-height: 42px; } .k-dock a:not(.gold) { display: none; } }
@media (prefers-reduced-motion: reduce) { .k-dock, .k-dock a.gold { animation: none; } }

/* Leadership page: one avatar size for every card, with titled groups. */
.leader-avatar { width: 112px; height: 112px; }
.leader-group-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; color: var(--heading); margin: 2.2rem 0 1.2rem; padding-bottom: .5rem; border-bottom: 3px solid var(--k-gold, #ffd400); display: inline-block; }
.leader-group-title:first-child { margin-top: 0; }
.leader-grid .leader-card { height: 100%; }