/* ============================================================
   KC Foundation — Design System v2
   Clean, humanitarian, mission-driven layout.
   All sections visible by default. GSAP animates FROM visible states.
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ---------- Design Tokens ---------- */
:root {
    --kc-primary:          #1a5c52;
    --kc-primary-light:    #2f8f83;
    --kc-primary-bright:   #3eb8a8;
    --kc-primary-gradient: linear-gradient(135deg, #1a5c52 0%, #2f8f83 100%);
    --kc-accent:           #2f8f83;
    --kc-accent-gradient:  linear-gradient(135deg, #2f8f83 0%, #3eb8a8 100%);
    --kc-font-body:        'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --kc-font-display:     'Outfit', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --kc-ink:              #0f1e27;
    --kc-body:             #3d5060;
    --kc-slate:            #627585;
    --kc-muted:            #8ea0ac;

    --kc-surface:          #ffffff;
    --kc-surface-alt:      #f4f9f8;
    --kc-surface-warm:     #fdf6ec;
    --kc-surface-teal:     #e8f4f2;
    --kc-surface-dark:     #0b1b25;

    --kc-border:           rgba(15, 30, 39, 0.08);
    --kc-border-med:       rgba(15, 30, 39, 0.13);

    --kc-shadow-sm:  0 1px 4px rgba(15,30,39,0.06);
    --kc-shadow:     0 6px 24px rgba(15,30,39,0.09);
    --kc-shadow-md:  0 12px 40px rgba(15,30,39,0.11);
    --kc-shadow-lg:  0 24px 64px rgba(15,30,39,0.14);

    --kc-r-sm:   10px;
    --kc-r:      16px;
    --kc-r-lg:   24px;
    --kc-r-xl:   32px;
    --kc-r-pill: 999px;

    --kc-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
    --kc-dur:      0.32s;

    --kc-section-py: 96px;
    --kc-max-w:      1200px;
}

/* ---------- Typography ---------- */
html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--kc-font-body);
    font-size: 17px;
    line-height: 1.72;
    color: var(--kc-body);
    background: var(--kc-surface);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--kc-font-display);
    color: var(--kc-ink);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
}

h1 { font-size: clamp(36px, 5.5vw, 66px); }
h2 { font-size: clamp(26px, 3.5vw, 44px); }
h3 { font-size: clamp(18px, 2vw, 22px); }
h4 { font-size: 18px; }

p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--kc-primary); text-decoration: none; transition: color var(--kc-dur) var(--kc-ease); -webkit-tap-highlight-color: transparent; }
a:hover { color: var(--kc-primary-light); }

img, video { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 3px solid rgba(62, 184, 168, 0.32);
    outline-offset: 3px;
}

/* ---------- Layout ---------- */
.container {
    width: 100%;
    max-width: var(--kc-max-w);
    margin: 0 auto;
    padding: 0 24px;
}

.kc-header-shell {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Buttons ---------- */
.kc-btn {
    font-family: var(--kc-font-display);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 30px;
    border-radius: var(--kc-r-pill);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: all var(--kc-dur) var(--kc-ease);
    cursor: pointer;
    border: 2px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}
.kc-btn:active { transform: translateY(1px) scale(0.985); }

.kc-btn-primary {
    background: var(--kc-primary-gradient);
    color: #fff !important;
    border-color: transparent;
    box-shadow: 0 4px 18px rgba(26,92,82,0.28);
}
.kc-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(26,92,82,0.38);
    color: #fff !important;
}
.kc-btn-primary:hover i { transform: translateX(4px); }
.kc-btn-primary i { transition: transform var(--kc-dur) var(--kc-ease); }

.kc-btn-outline-white {
    background: transparent;
    color: #fff !important;
    border-color: rgba(255,255,255,0.55);
}
.kc-btn-outline-white:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.85);
    color: #fff !important;
}

.kc-btn-outline-teal {
    background: transparent;
    color: var(--kc-primary) !important;
    border-color: var(--kc-primary);
}
.kc-btn-outline-teal:hover {
    background: var(--kc-primary);
    color: #fff !important;
}

.kc-btn-ghost {
    background: transparent;
    color: var(--kc-primary);
    padding: 0;
    min-height: auto;
    font-weight: 700;
    font-size: 14px;
    border: none;
    gap: 6px;
}
.kc-btn-ghost:hover { color: var(--kc-primary-light); }
.kc-btn-ghost i { transition: transform var(--kc-dur) var(--kc-ease); }
.kc-btn-ghost:hover i { transform: translateX(4px); }

.kc-btn-accent {
    background: var(--kc-accent-gradient);
    color: #fff !important;
    border-color: transparent;
    box-shadow: 0 4px 18px rgba(47,143,131,0.28);
}
.kc-btn-accent:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(47,143,131,0.38);
    color: #fff !important;
}

.kc-button-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 28px;
}

/* ---------- Eyebrow ---------- */
.kc-eyebrow {
    display: inline-block;
    padding: 6px 14px;
    border-radius: var(--kc-r-pill);
    background: var(--kc-surface-teal);
    color: var(--kc-primary);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 14px;
}

.kc-eyebrow-white {
    background: rgba(255,255,255,0.18);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
}

/* ---------- Sections ---------- */
.kc-section {
    padding: var(--kc-section-py) 0;
    position: relative;
}
.kc-section-alt   { background: var(--kc-surface-alt); }
.kc-section-teal  { background: var(--kc-surface-teal); }
.kc-section-dark  { background: var(--kc-surface-dark); }

.kc-section-heading {
    max-width: 680px;
    margin-bottom: 52px;
}
.kc-section-heading.center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.kc-section-heading h2 { margin: 10px 0 14px; }
.kc-section-heading p  { color: var(--kc-slate); font-size: 17px; line-height: 1.7; }

/* =========================================================
   HEADER
   ========================================================= */
.kc-site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 1px 0 var(--kc-border), var(--kc-shadow-sm);
    transition: background 0.4s var(--kc-ease), box-shadow 0.4s var(--kc-ease);
}

/* — Top Bar — */
.kc-header-top {
    background: var(--kc-ink);
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    line-height: 1;
    transition: background 0.4s var(--kc-ease);
}
.kc-header-top-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 10px 0;
}
.kc-header-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    width: 100%;
}
.kc-header-contact a,
.kc-header-contact span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255,255,255,0.85);
    font-weight: 500;
    transition: opacity var(--kc-dur);
}
.kc-header-contact a:hover { opacity: 0.7; color: rgba(255,255,255,0.85); }
.kc-top-donate {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 16px;
    border-radius: var(--kc-r-pill);
    background: var(--kc-accent-gradient);
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: all var(--kc-dur) var(--kc-ease);
}
.kc-top-donate:hover { opacity: 0.88; color: #fff !important; }

/* — Main Nav Bar — */
.kc-header-main {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    padding: 14px 0;
}

/* Logos */
.kc-brand          { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.kc-brand img      { height: 52px; width: auto; transition: opacity 0.3s; }
.kc-brand .kc-logo-dark      { display: block !important; }
.kc-brand .kc-logo-light     { display: none !important; }

/* Transparent header (over hero) */
.kc-site-header.hero-mode {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}
.kc-site-header.hero-mode .kc-header-top {
    background: rgba(0,0,0,0.35);
}
.kc-site-header.hero-mode .kc-header-main {
    background: transparent;
}
.kc-site-header.hero-mode .kc-brand .kc-logo-dark  { display: none !important; }
.kc-site-header.hero-mode .kc-brand .kc-logo-light { display: block !important; }
.kc-site-header.hero-mode .kc-nav > a,
.kc-site-header.hero-mode .kc-nav-group > a { color: rgba(255,255,255,0.92); }
.kc-site-header.hero-mode .kc-nav > a:hover,
.kc-site-header.hero-mode .kc-nav-group:hover > a { color: #fff; background: rgba(255,255,255,0.1); }
.kc-site-header.hero-mode .kc-menu-toggle span { background: #fff; }
.kc-site-header.hero-mode .kc-header-cta { display: none; }

/* Scrolled solid state */
.kc-site-header.scrolled {
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 1px 0 var(--kc-border), var(--kc-shadow-sm);
}
.kc-site-header.scrolled .kc-header-top { display: none; }
.kc-site-header.scrolled .kc-brand .kc-logo-dark  { display: block !important; }
.kc-site-header.scrolled .kc-brand .kc-logo-light { display: none !important; }
.kc-site-header.scrolled .kc-nav > a,
.kc-site-header.scrolled .kc-nav-group > a { color: var(--kc-ink); }

/* Navigation */
.kc-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    justify-content: flex-end;
}
.kc-nav > a,
.kc-nav-group > a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 44px;
    padding: 9px 15px;
    border-radius: var(--kc-r-sm);
    color: var(--kc-ink);
    font-size: 14.5px;
    font-weight: 600;
    transition: all var(--kc-dur) var(--kc-ease);
    text-decoration: none;
}
.kc-nav > a:hover,
.kc-nav-group:hover > a {
    color: var(--kc-primary);
    background: var(--kc-surface-teal);
}
.kc-nav-group { position: relative; }
.kc-nav-dropdown {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 210px;
    padding: 10px;
    border-radius: var(--kc-r-lg);
    background: #fff;
    box-shadow: var(--kc-shadow-lg);
    border: 1px solid var(--kc-border);
    transition: opacity 0.22s var(--kc-ease), transform 0.22s var(--kc-ease), visibility 0.22s var(--kc-ease);
    z-index: 1010;
    display: grid;
    gap: 2px;
}
/* Invisible bridge fills the gap between nav link and dropdown so hover doesn't break */
.kc-nav-dropdown::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}
.kc-nav-group:hover .kc-nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateX(-50%) translateY(0);
}
.kc-nav-dropdown a {
    display: block;
    padding: 10px 14px;
    border-radius: var(--kc-r-sm);
    color: var(--kc-ink);
    font-size: 14px;
    font-weight: 500;
    transition: all var(--kc-dur) var(--kc-ease);
}
.kc-nav-dropdown a:hover {
    background: var(--kc-surface-teal);
    color: var(--kc-primary);
}

.kc-header-cta { flex-shrink: 0; }

/* Hamburger */
.kc-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: var(--kc-r-sm);
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 1010;
    flex-direction: column;
    gap: 5px;
}
.kc-menu-toggle span {
    display: block;
    width: 22px; height: 2px;
    background: var(--kc-ink);
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}
.kc-menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kc-menu-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.kc-menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.kc-mobile-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.35s ease;
}
.kc-mobile-overlay.active { opacity: 1; }

/* =========================================================
   HERO
   ========================================================= */
.kc-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--kc-ink);
}

/* Black overlay for readability — z-index 1 */
.kc-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.70) 0%,
        rgba(0,0,0,0.55) 60%,
        rgba(0,0,0,0.72) 100%
    );
    z-index: 1;
}

.kc-hero-video {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Hero content is ALWAYS visible — z-index above overlay */
.kc-hero > .container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.kc-hero-content {
    max-width: 1220px;
    margin: 0 auto;
    text-align: center;
    padding: 200px 0 110px;
    color: #fff;
}

.kc-hero-content h1 {
    color: #fff !important;
    font-size: clamp(38px, 6.5vw, 74px);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -0.025em;
    margin: 18px 0 22px;
    text-shadow: 0 2px 16px rgba(0,0,0,0.3);
}

.kc-hero-content > p {
    color: rgba(255,255,255,0.92) !important;
    font-size: 19px;
    line-height: 1.65;
    max-width: 620px;
    margin: 0 auto 32px;
    text-shadow: 0 1px 8px rgba(0,0,0,0.2);
}

.kc-hero .kc-button-row {
    justify-content: center;
    margin-top: 0;
}

/* =========================================================
   PAGE BANNER
   ========================================================= */
.kc-page-banner {
    position: relative;
    min-height: 340px;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.kc-page-banner::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(11,27,37,0.4) 0%, rgba(11,27,37,0.75) 100%);
    z-index: 1;
}
.kc-page-banner-inner {
    position: relative;
    z-index: 2;
    padding: 150px 0 48px;
    color: #fff;
}
.kc-page-banner-kicker {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
}
.kc-page-banner-inner h1 { color: #fff; font-size: clamp(30px, 4.5vw, 52px); margin-bottom: 12px; }
.kc-page-banner-crumbs {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 500;
}
.kc-page-banner-crumbs a  { color: rgba(255,255,255,0.7); }
.kc-page-banner-crumbs a:hover { color: #fff; }
.kc-page-banner-crumbs span { color: rgba(255,255,255,0.45); }

/* =========================================================
   SPLITS
   ========================================================= */
.kc-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}
.kc-split-reverse { grid-template-columns: 1fr 1fr; }
.kc-split-reverse > *:first-child { order: 2; }
.kc-split-reverse > *:last-child  { order: 1; }

.kc-copy-stack h2 { margin: 10px 0 16px; }
.kc-copy-stack > p { color: var(--kc-slate); }

/* Media Stack */
.kc-media-stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
}
.kc-media-stack img {
    width: 100%;
    border-radius: var(--kc-r-lg);
    object-fit: cover;
    box-shadow: var(--kc-shadow-md);
}
.kc-media-stack img:nth-child(odd)  { margin-top: 28px; }
.kc-media-stack img:nth-child(even) { margin-top: 0; }

.kc-home-identity {
    background:
        radial-gradient(circle at 82% 18%, rgba(62,184,168,0.1), transparent 28%),
        linear-gradient(180deg, #fff 0%, rgba(244,249,248,0.52) 100%);
}
.kc-home-identity-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
    gap: clamp(38px, 6vw, 86px);
    align-items: center;
}
.kc-home-identity-copy {
    max-width: 640px;
}
.kc-home-identity-copy h2 {
    margin: 12px 0 20px;
}
.kc-home-identity-media {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(190px, 0.82fr);
    gap: 18px;
    align-items: stretch;
}
.kc-home-identity-photo {
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,0.78);
    box-shadow: var(--kc-shadow-lg);
    background: var(--kc-surface-teal);
}
.kc-home-identity-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.kc-home-identity-photo-main {
    min-height: 430px;
    aspect-ratio: 4 / 5;
}
.kc-home-identity-side {
    display: grid;
    grid-template-rows: minmax(190px, 1fr) auto;
    gap: 18px;
    min-width: 0;
}
.kc-home-identity-photo-secondary {
    aspect-ratio: 1 / 1;
}
.kc-home-identity-facts {
    display: grid;
    gap: 14px;
}
.kc-home-identity-card {
    padding: 20px;
    border-radius: 22px;
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--kc-border);
    box-shadow: var(--kc-shadow-md);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.kc-home-identity-card.secondary {
    background: var(--kc-primary);
    border-color: transparent;
    color: #fff;
}
.kc-home-identity-card span {
    display: block;
    color: var(--kc-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.kc-home-identity-card.secondary span {
    color: rgba(255,255,255,0.74);
}
.kc-home-identity-card strong {
    display: block;
    margin-top: 6px;
    color: var(--kc-ink);
    font-family: var(--kc-font-display);
    font-size: 20px;
    line-height: 1.15;
}
.kc-home-identity-card.secondary strong {
    color: #fff;
}

.kc-country-impact {
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 28%, rgba(62,184,168,0.12), transparent 26%),
        linear-gradient(180deg, #fff 0%, rgba(244,249,248,0.72) 100%);
}
.kc-country-impact-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
    gap: clamp(36px, 6vw, 84px);
    align-items: center;
}
.kc-country-copy {
    max-width: 650px;
}
.kc-country-copy h2 {
    margin: 12px 0 18px;
    max-width: 620px;
}
.kc-country-copy > p {
    color: var(--kc-slate);
    font-size: 17px;
    line-height: 1.8;
    max-width: 610px;
}
.kc-country-copy .kc-button-row {
    align-items: center;
}
.kc-country-copy .kc-button-row .kc-btn {
    width: auto;
    min-width: 210px;
}
.kc-country-media {
    position: relative;
    min-height: 390px;
}
.kc-country-photo {
    position: absolute;
    overflow: hidden;
    border-radius: 28px;
    box-shadow: var(--kc-shadow-lg);
    border: 1px solid rgba(255,255,255,0.68);
}
.kc-country-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.kc-country-photo-main {
    left: 0;
    top: 72px;
    width: 53%;
    height: 210px;
}
.kc-country-photo-secondary {
    right: 0;
    top: 24px;
    width: 53%;
    height: 260px;
}
.kc-country-badge {
    position: absolute;
    left: 20%;
    bottom: 8px;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 360px;
    padding: 18px 20px;
    border-radius: 22px;
    background: rgba(255,255,255,0.9);
    border: 1px solid var(--kc-border);
    box-shadow: var(--kc-shadow-md);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.kc-country-badge strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: var(--kc-primary-gradient);
    color: #fff;
    font-size: 28px;
    line-height: 1;
}
.kc-country-badge span {
    color: var(--kc-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}

/* Video card */
.kc-video-card {
    border-radius: var(--kc-r-lg);
    overflow: hidden;
    box-shadow: var(--kc-shadow-md);
}
.kc-video-card video,
.kc-video-card img {
    width: 100%;
    min-height: 380px;
    object-fit: cover;
    display: block;
}
.kc-impact-video-card {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    border-radius: 32px;
    background:
        linear-gradient(135deg, rgba(20,103,90,0.88), rgba(47,143,131,0.64)),
        var(--kc-surface-teal);
    box-shadow: var(--kc-shadow-lg);
    isolation: isolate;
}
.kc-impact-video-card video {
    width: 100%;
    height: 100%;
    min-height: 430px;
    object-fit: cover;
    display: block;
}
.kc-impact-video-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 38%, rgba(8,38,35,0.68) 100%),
        radial-gradient(circle at 18% 12%, rgba(255,255,255,0.24), transparent 26%);
    pointer-events: none;
    z-index: 1;
}
.kc-impact-video-caption {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 2;
    max-width: 360px;
    padding: 18px 20px;
    border-radius: 22px;
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(255,255,255,0.7);
    box-shadow: 0 18px 45px rgba(10,64,56,0.18);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.kc-impact-video-caption span {
    display: block;
    color: var(--kc-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.kc-impact-video-caption strong {
    display: block;
    margin-top: 6px;
    color: var(--kc-ink);
    font-family: var(--kc-font-display);
    font-size: 21px;
    line-height: 1.12;
}

/* =========================================================
   CARDS
   ========================================================= */
.kc-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.kc-card {
    background: var(--kc-surface);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-r-lg);
    overflow: hidden;
    box-shadow: var(--kc-shadow-sm);
    transition: transform var(--kc-dur) var(--kc-ease),
                box-shadow var(--kc-dur) var(--kc-ease);
    display: flex;
    flex-direction: column;
}
.kc-card:hover { transform: translateY(-5px); box-shadow: var(--kc-shadow-md); }
.kc-card img   { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.kc-card-body  { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.kc-card-body h3 { color: var(--kc-ink); font-size: 19px; line-height: 1.35; }
.kc-card-body p  { color: var(--kc-slate); font-size: 14.5px; line-height: 1.65; flex: 1; }
.kc-card-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--kc-surface-teal);
    color: var(--kc-primary);
    font-size: 18px;
}

/* Info cards */
.kc-info-card {
    padding: 32px;
    background: var(--kc-surface);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-r-lg);
    box-shadow: var(--kc-shadow-sm);
    transition: transform var(--kc-dur) var(--kc-ease), box-shadow var(--kc-dur) var(--kc-ease);
}
.kc-info-card:hover { transform: translateY(-4px); box-shadow: var(--kc-shadow); }
.kc-info-card h3 { font-size: 20px; line-height: 1.35; margin-bottom: 10px; color: var(--kc-ink); }
.kc-info-card p  { color: var(--kc-slate); font-size: 15px; margin: 0; }

/* Resource cards */
.kc-resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.kc-resource-card {
    display: flex; flex-direction: column; gap: 12px;
    padding: 28px;
    border-radius: var(--kc-r-lg);
    border: 1px solid var(--kc-border);
    background: var(--kc-surface);
    box-shadow: var(--kc-shadow-sm);
    color: var(--kc-ink);
    text-decoration: none;
    transition: all var(--kc-dur) var(--kc-ease);
}
.kc-resource-card:hover { transform: translateY(-4px); box-shadow: var(--kc-shadow-md); border-color: var(--kc-primary-bright); color: var(--kc-ink); }
.kc-resource-card > i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 15px;
    background: var(--kc-surface-teal);
    color: var(--kc-primary); font-size: 22px;
}
.kc-resource-card h3 { font-size: 19px; color: var(--kc-ink); }
.kc-resource-card p  { color: var(--kc-slate); font-size: 14.5px; line-height: 1.6; margin: 0; }

.kc-governance-hub {
    padding: 40px;
    border-radius: var(--kc-r-xl);
    background:
        radial-gradient(circle at top right, rgba(62, 184, 168, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(232, 244, 242, 0.8), rgba(255, 255, 255, 0.98));
    border: 1px solid rgba(47, 143, 131, 0.14);
    box-shadow: var(--kc-shadow);
}
.kc-governance-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}
.kc-governance-link {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 24px;
    border-radius: var(--kc-r-lg);
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--kc-border);
    color: var(--kc-ink);
    text-decoration: none;
    box-shadow: var(--kc-shadow-sm);
    transition: all var(--kc-dur) var(--kc-ease);
}
.kc-governance-link:hover {
    transform: translateY(-3px);
    box-shadow: var(--kc-shadow-md);
    border-color: rgba(47, 143, 131, 0.3);
    color: var(--kc-ink);
}
.kc-governance-link.is-current {
    border-color: rgba(47, 143, 131, 0.4);
    box-shadow: 0 0 0 1px rgba(47, 143, 131, 0.12), var(--kc-shadow);
}
.kc-governance-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--kc-primary-gradient);
    color: #fff;
    font-size: 20px;
    flex-shrink: 0;
}
.kc-governance-link-copy {
    display: grid;
    gap: 8px;
}
.kc-governance-link-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.kc-governance-link-top strong {
    font-size: 18px;
    color: var(--kc-ink);
}
.kc-governance-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: var(--kc-r-pill);
    background: var(--kc-surface-teal);
    color: var(--kc-primary);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}
.kc-governance-range {
    color: var(--kc-primary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.kc-governance-link p {
    margin: 0;
    color: var(--kc-slate);
    font-size: 14.5px;
    line-height: 1.65;
}
.kc-governance-map {
    margin-top: 22px;
    padding: 28px;
    border-radius: var(--kc-r-lg);
    background: rgba(11, 27, 37, 0.96);
    color: #fff;
}
.kc-governance-map-header h3 {
    color: #fff;
    margin-top: 10px;
    font-size: clamp(22px, 2.8vw, 30px);
}
.kc-governance-map-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-top: 22px;
}
.kc-governance-map-item {
    padding: 18px;
    border-radius: var(--kc-r);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
}
.kc-governance-map-item span {
    display: inline-block;
    color: rgba(255,255,255,0.65);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.kc-governance-map-item strong {
    display: block;
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.45;
}
.kc-governance-map-item p {
    margin: 8px 0 0;
    color: rgba(255,255,255,0.72);
    font-size: 13px;
    line-height: 1.55;
}

/* Action cards */
.kc-action-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kc-action-card {
    display: flex; flex-direction: column; gap: 8px;
    padding: 24px;
    border-radius: var(--kc-r-lg);
    border: 1px solid var(--kc-border);
    background: var(--kc-surface);
    box-shadow: var(--kc-shadow-sm);
    color: var(--kc-ink);
    text-decoration: none;
    transition: all var(--kc-dur) var(--kc-ease);
}
.kc-action-card:hover { transform: translateY(-4px); box-shadow: var(--kc-shadow); border-color: var(--kc-primary-bright); color: var(--kc-ink); }
.kc-action-card > i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 13px;
    background: var(--kc-surface-teal);
    color: var(--kc-primary); font-size: 18px;
}
.kc-action-card strong { font-size: 16px; color: var(--kc-ink); }
.kc-action-card span  { color: var(--kc-slate); font-size: 13.5px; line-height: 1.5; }

/* =========================================================
   STATS
   ========================================================= */
.kc-stat-row {
    display: flex; gap: 16px; flex-wrap: wrap; margin-top: 28px;
}
.kc-stat-card {
    flex: 1; min-width: 120px; padding: 20px;
    border-radius: var(--kc-r-lg);
    background: var(--kc-surface-teal);
    text-align: center;
    border: 1px solid rgba(47,143,131,0.12);
}
.kc-stat-card strong {
    display: block; font-size: 34px; line-height: 1;
    color: var(--kc-primary); font-weight: 800;
}
.kc-stat-card span {
    display: block; margin-top: 5px;
    color: var(--kc-body); font-weight: 600; font-size: 13px;
}

/* =========================================================
   FEATURE LIST & CHECK LIST
   ========================================================= */
.kc-feature-list { display: grid; gap: 20px; margin-top: 8px; }
.kc-feature-item { display: flex; gap: 16px; align-items: flex-start; }
.kc-feature-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 14px;
    background: var(--kc-surface-teal); color: var(--kc-primary);
    font-size: 20px; flex-shrink: 0;
}
.kc-feature-item h3 { font-size: 17px; margin-bottom: 4px; color: var(--kc-ink); }
.kc-feature-item p  { color: var(--kc-slate); font-size: 14.5px; line-height: 1.6; }

.kc-check-list { display: grid; gap: 12px; margin-top: 10px; }
.kc-check-list li {
    display: flex; align-items: center; gap: 12px;
    font-weight: 500; color: var(--kc-ink); font-size: 15px;
}
.kc-check-list li::before {
    content: "\f058";
    font-family: "Font Awesome 6 Free"; font-weight: 900;
    color: var(--kc-primary-light); font-size: 17px; flex-shrink: 0;
}

/* =========================================================
   CTA PANEL
   ========================================================= */
.kc-cta-panel {
    padding: 60px 48px;
    text-align: center;
    border-radius: var(--kc-r-xl);
    background: var(--kc-primary-gradient);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.kc-cta-panel::before {
    content: '';
    position: absolute; top: -40%; right: -10%;
    width: 450px; height: 450px; border-radius: 50%;
    background: rgba(255,255,255,0.05); pointer-events: none;
}
.kc-cta-panel h2   { color: #fff; position: relative; }
.kc-cta-panel p    { color: rgba(255,255,255,0.88); max-width: 560px; margin: 14px auto 28px; font-size: 17px; position: relative; }
.kc-cta-panel .kc-button-row { justify-content: center; margin-top: 0; }

/* =========================================================
   GALLERY
   ========================================================= */
.kc-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kc-gallery-item {
    display: block; border-radius: var(--kc-r); overflow: hidden;
    transition: transform var(--kc-dur) var(--kc-ease);
}
.kc-gallery-item:hover { transform: scale(1.02); }
.kc-gallery-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* =========================================================
   CONTACT, FORMS
   ========================================================= */
.kc-contact-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 32px; align-items: start; }
.kc-contact-redesign {
    background:
        radial-gradient(circle at top left, rgba(47,143,131,0.1), transparent 32%),
        linear-gradient(180deg, #fff 0%, var(--kc-surface-alt) 100%);
}
.kc-contact-clean-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(320px, 0.78fr);
    gap: 28px;
    align-items: stretch;
}
.kc-form-shell {
    padding: 40px;
    background: var(--kc-surface);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-r-xl);
    box-shadow: var(--kc-shadow);
}
.kc-form-shell h2 { font-size: clamp(22px, 2.8vw, 32px); margin: 10px 0 10px; }
.kc-contact-redesign .kc-form-shell h2,
.kc-contact-simple-panel h2 {
    font-size: clamp(28px, 3.3vw, 42px);
}
.kc-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 24px;
}
.kc-form-grid select,
.kc-form-grid textarea,
.kc-form-grid button { grid-column: 1 / -1; }
.kc-form-grid input,
.kc-form-grid select,
.kc-form-grid textarea {
    width: 100%; min-height: 50px; padding: 0 16px;
    border-radius: var(--kc-r-sm);
    border: 1.5px solid var(--kc-border-med);
    background: var(--kc-surface-alt);
    font-family: inherit; font-size: 15px; color: var(--kc-ink);
    transition: border-color var(--kc-dur), box-shadow var(--kc-dur);
}
.kc-form-grid textarea { min-height: 150px; padding: 14px 16px; resize: vertical; }
.kc-form-grid input:focus,
.kc-form-grid select:focus,
.kc-form-grid textarea:focus {
    outline: none;
    border-color: var(--kc-primary-light);
    box-shadow: 0 0 0 3px rgba(47,143,131,0.12);
}
.kc-contact-card-grid { display: grid; gap: 12px; }
.kc-contact-card {
    display: flex; gap: 14px; align-items: center;
    padding: 18px 20px;
    border: 1px solid var(--kc-border); border-radius: var(--kc-r-lg);
    background: var(--kc-surface); box-shadow: var(--kc-shadow-sm);
    color: var(--kc-ink); text-decoration: none;
    transition: all var(--kc-dur) var(--kc-ease);
}
.kc-contact-card:hover { transform: translateY(-2px); box-shadow: var(--kc-shadow); color: var(--kc-ink); }
.kc-contact-card > i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--kc-surface-teal); color: var(--kc-primary); font-size: 17px; flex-shrink: 0;
}
.kc-contact-card strong { display: block; font-size: 14px; color: var(--kc-ink); }
.kc-contact-card span   { display: block; color: var(--kc-slate); font-size: 13.5px; }

.kc-contact-simple-panel {
    position: relative;
    overflow: hidden;
    padding: 40px;
    border-radius: var(--kc-r-xl);
    background:
        linear-gradient(145deg, rgba(11,27,37,0.96), rgba(26,92,82,0.94)),
        var(--kc-surface-dark);
    color: #fff;
    box-shadow: var(--kc-shadow-lg);
}
.kc-contact-simple-panel::before {
    content: '';
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    right: -110px;
    top: -90px;
    background: rgba(62,184,168,0.18);
    pointer-events: none;
}
.kc-contact-simple-panel > * {
    position: relative;
}
.kc-contact-simple-panel h2 {
    color: #fff;
    margin: 10px 0 12px;
}
.kc-contact-simple-panel p {
    color: rgba(255,255,255,0.74);
    margin-bottom: 28px;
}
.kc-contact-simple-panel .kc-eyebrow {
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.88);
    border: 1px solid rgba(255,255,255,0.16);
}
.kc-contact-simple-panel .kc-contact-card {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.12);
    color: #fff;
    box-shadow: none;
}
.kc-contact-simple-panel .kc-contact-card:hover {
    background: rgba(255,255,255,0.13);
    color: #fff;
}
.kc-contact-simple-panel .kc-contact-card > i {
    background: rgba(255,255,255,0.12);
    color: var(--kc-primary-bright);
}
.kc-contact-simple-panel .kc-contact-card strong {
    color: #fff;
}
.kc-contact-simple-panel .kc-contact-card span {
    color: rgba(255,255,255,0.72);
}

.kc-form-field {
    display: grid;
    gap: 8px;
}
.kc-form-field-full {
    grid-column: 1 / -1;
}
.kc-form-field label {
    color: var(--kc-ink);
    font-family: var(--kc-font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.kc-form-help {
    color: var(--kc-muted);
    font-size: 13px;
    line-height: 1.55;
}
.kc-form-alert,
.kc-contact-context {
    margin-top: 22px;
    padding: 16px 18px;
    border-radius: var(--kc-r);
    border: 1px solid var(--kc-border);
}
.kc-form-alert {
    margin-bottom: 22px;
    font-size: 14px;
    font-weight: 600;
}
.kc-form-alert-success {
    background: rgba(47, 143, 131, 0.08);
    border-color: rgba(47, 143, 131, 0.24);
    color: var(--kc-primary);
}
.kc-form-alert-error {
    background: rgba(232, 160, 74, 0.11);
    border-color: rgba(232, 160, 74, 0.3);
    color: #9b5d14;
}
.kc-contact-context {
    background: linear-gradient(135deg, rgba(232, 244, 242, 0.9), rgba(253, 246, 236, 0.82));
    box-shadow: var(--kc-shadow-sm);
}
.kc-contact-context strong {
    display: block;
    color: var(--kc-ink);
    font-family: var(--kc-font-display);
    font-size: 18px;
    margin-bottom: 6px;
}
.kc-contact-context p {
    color: var(--kc-slate);
    margin: 0;
    font-size: 14.5px;
}

.kc-map-frame { border-radius: var(--kc-r-lg); overflow: hidden; box-shadow: var(--kc-shadow); }
.kc-map-frame iframe { width: 100%; height: 420px; border: 0; display: block; }

/* =========================================================
   ACCORDION
   ========================================================= */
.kc-accordion-list { display: grid; gap: 12px; }
.kc-accordion-list details {
    border-radius: var(--kc-r-lg);
    border: 1px solid var(--kc-border);
    background: var(--kc-surface);
    overflow: hidden;
    transition: box-shadow var(--kc-dur);
}
.kc-accordion-list details[open] { box-shadow: var(--kc-shadow); }
.kc-accordion-list summary {
    cursor: pointer; padding: 20px 24px;
    font-size: 17px; font-weight: 600; color: var(--kc-ink);
    list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.kc-accordion-list summary::-webkit-details-marker { display: none; }
.kc-accordion-list summary::after {
    content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    font-size: 13px; color: var(--kc-muted);
    transition: transform 0.3s ease; flex-shrink: 0;
}
.kc-accordion-list details[open] summary::after { transform: rotate(180deg); }
.kc-accordion-list details > p,
.kc-accordion-list details > div { padding: 0 24px 20px; color: var(--kc-slate); line-height: 1.75; }

/* =========================================================
   DONATE SECTION
   ========================================================= */
.kc-donate-panel {
    margin-top: 28px; padding: 28px;
    border-radius: var(--kc-r-lg);
    background: var(--kc-surface-teal);
    border: 1px solid rgba(47,143,131,0.15);
}
.kc-donate-panel strong { display: block; font-size: 18px; color: var(--kc-ink); margin-bottom: 6px; }
.kc-donate-panel p { color: var(--kc-slate); margin-bottom: 16px; }

/* =========================================================
   NEWS / ARTICLE
   ========================================================= */
.kc-news-meta { color: var(--kc-slate); font-weight: 600; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; }
.kc-article-layout { display: grid; grid-template-columns: 1.3fr 0.55fr; gap: 28px; align-items: start; }
.kc-article-main {
    padding: 36px; background: var(--kc-surface);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-r-xl); box-shadow: var(--kc-shadow);
}
.kc-article-hero { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--kc-r-lg); margin-bottom: 22px; }
.kc-article-main h1 { font-size: clamp(24px, 3.2vw, 36px); margin: 14px 0 18px; }
.kc-article-main h2 { font-size: 22px; margin: 28px 0 10px; }
.kc-tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.kc-tag-row span { padding: 5px 12px; border-radius: var(--kc-r-pill); background: var(--kc-surface-teal); color: var(--kc-primary); font-weight: 600; font-size: 12px; }
.kc-side-panel { padding: 22px; background: var(--kc-surface); border: 1px solid var(--kc-border); border-radius: var(--kc-r-lg); box-shadow: var(--kc-shadow-sm); display: grid; gap: 14px; }
.kc-side-panel h3 { font-size: 17px; padding-bottom: 10px; border-bottom: 1px solid var(--kc-border); }
.kc-side-post { display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--kc-ink); transition: color var(--kc-dur); }
.kc-side-post:hover { color: var(--kc-primary); }
.kc-side-post img { width: 60px; height: 60px; border-radius: var(--kc-r-sm); object-fit: cover; flex-shrink: 0; }
.kc-side-post span { font-weight: 600; font-size: 13.5px; line-height: 1.4; }

/* =========================================================
   FOOTER
   ========================================================= */
.kc-footer {
    padding: 80px 0 32px;
    background: var(--kc-surface-dark);
    color: rgba(255,255,255,0.75);
}
.kc-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.kc-footer-brand img { height: 60px; width: auto; margin-bottom: 18px; }
.kc-footer-brand p   { color: rgba(255,255,255,0.6); font-size: 14.5px; line-height: 1.65; }
.kc-footer h3 {
    color: #fff; font-size: 13px;
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: 18px; font-weight: 700;
}
.kc-footer-links { display: grid; gap: 10px; }
.kc-footer-links a {
    color: rgba(255,255,255,0.6); font-size: 14.5px;
    transition: all var(--kc-dur) var(--kc-ease); display: inline-flex; align-items: center; gap: 7px;
}
.kc-footer-links a:hover { color: #fff; padding-left: 4px; }
.kc-footer-social { display: flex; gap: 10px; margin-top: 18px; }
.kc-footer-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.65); font-size: 15px;
    transition: all var(--kc-dur) var(--kc-ease);
}
.kc-footer-social a:hover { background: var(--kc-primary); color: #fff; transform: translateY(-2px); }
.kc-footer-bottom {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding-top: 32px; margin-top: 48px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.kc-footer-bottom p   { margin: 0; font-size: 13.5px; color: rgba(255,255,255,0.45); }
.kc-footer-legal      { display: flex; gap: 20px; flex-wrap: wrap; }
.kc-footer-legal a    { color: rgba(255,255,255,0.4); font-size: 13.5px; }
.kc-footer-legal a:hover { color: rgba(255,255,255,0.8); }

/* =========================================================
   SCROLL TOP
   ========================================================= */
.kc-scroll-top {
    position: fixed; right: 24px; bottom: 24px;
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--kc-surface);
    color: var(--kc-primary);
    box-shadow: var(--kc-shadow-md);
    border: 1px solid var(--kc-border);
    cursor: pointer;
    opacity: 0; visibility: hidden;
    transform: translateY(12px);
    transition: all var(--kc-dur) var(--kc-ease);
    z-index: 900; font-size: 17px;
}
.kc-scroll-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.kc-scroll-top:hover   { background: var(--kc-primary); color: #fff; transform: translateY(-2px); }

/* =========================================================
   404
   ========================================================= */
.kc-error-section {
    min-height: 70vh; display: flex; align-items: center;
    justify-content: center; text-align: center; padding: 120px 0 80px;
}
.kc-error-code {
    font-size: clamp(100px, 18vw, 180px); font-weight: 800; line-height: 1;
    background: var(--kc-primary-gradient);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    opacity: 0.22;
}
.kc-error-section h2 { margin: 16px 0 10px; }
.kc-error-section p  { color: var(--kc-slate); max-width: 440px; margin: 0 auto 24px; }

/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */
@media (max-width: 1080px) {
    :root { --kc-section-py: 72px; }
    .kc-card-grid, .kc-resource-grid, .kc-action-grid { grid-template-columns: repeat(2, 1fr); }
    .kc-split, .kc-split-reverse { grid-template-columns: 1fr; gap: 36px; }
    .kc-split-reverse > *:first-child { order: unset; }
    .kc-split-reverse > *:last-child  { order: unset; }
    .kc-contact-grid { grid-template-columns: 1fr; }
    .kc-contact-clean-grid { grid-template-columns: 1fr; }
    .kc-home-identity-grid { grid-template-columns: 1fr; }
    .kc-home-identity-copy { max-width: none; }
    .kc-home-identity-media { max-width: 760px; width: 100%; }
    .kc-country-impact-grid { grid-template-columns: 1fr; }
    .kc-country-copy { max-width: none; }
    .kc-country-media { min-height: 430px; max-width: 760px; width: 100%; }
    .kc-article-layout { grid-template-columns: 1fr; }
    .kc-footer-grid { grid-template-columns: repeat(2, 1fr); }
    .kc-governance-hub-grid { grid-template-columns: 1fr; }
    .kc-governance-map-list { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */
@media (max-width: 767px) {
    :root { --kc-section-py: 56px; }

    .kc-header-top    { display: none; }
    .kc-menu-toggle   { display: flex; }
    .kc-header-cta    { display: none; }
    .kc-header-main   { padding: 12px 0; }

    /* White hamburger lines in hero mode */
    .kc-site-header.hero-mode .kc-menu-toggle span { background: #fff; }

    .kc-nav {
        position: fixed; top: 0; right: -100%;
        width: 300px; height: 100vh;
        background: #fff;
        flex-direction: column; align-items: flex-start;
        justify-content: flex-start;
        padding: 90px 28px 40px;
        gap: 2px;
        box-shadow: -8px 0 40px rgba(0,0,0,0.12);
        z-index: 999;
        transition: right 0.38s var(--kc-ease);
        overflow-y: auto;
        display: flex;
    }
    .kc-nav.open { right: 0; }

    .kc-nav > a,
    .kc-nav-group > a {
        width: 100%; padding: 13px 18px;
        font-size: 16px; color: var(--kc-ink) !important;
        border-radius: var(--kc-r-sm);
    }
    .kc-nav-group { width: 100%; }

    .kc-nav-dropdown {
        position: static; opacity: 1; visibility: visible;
        pointer-events: all; transform: none;
        box-shadow: none; border: none;
        padding: 4px 0 10px 16px;
        background: transparent;
        display: grid; gap: 2px;
    }
    .kc-nav-dropdown a { color: var(--kc-body) !important; padding: 9px 14px; font-size: 14.5px; }
    .kc-nav .kc-btn-primary { width: 100%; margin-top: 20px; justify-content: center; }
    .kc-mobile-overlay.active { display: block; }

    /* Hero */
    .kc-hero { min-height: 100svh; }
    .kc-hero-content { padding: 140px 0 80px; }
    .kc-hero-content h1 { font-size: clamp(32px, 9vw, 48px); }
    .kc-hero-content > p { font-size: 16px; }
    .kc-button-row { flex-direction: column; align-items: stretch; }
    .kc-btn { width: 100%; justify-content: center; }

    /* Grids */
    .kc-card-grid, .kc-resource-grid, .kc-action-grid,
    .kc-gallery-grid, .kc-media-stack, .kc-form-grid { grid-template-columns: 1fr; }
    .kc-home-identity-media {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .kc-home-identity-side,
    .kc-home-identity-facts {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .kc-home-identity-photo {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
        border-radius: 22px;
    }
    .kc-country-impact-grid { gap: 28px; }
    .kc-country-copy .kc-button-row .kc-btn {
        width: 100%;
        min-width: 0;
    }
    .kc-country-media {
        min-height: auto;
        display: grid;
        gap: 14px;
    }
    .kc-country-photo {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
        border-radius: 22px;
    }
    .kc-country-badge {
        position: relative;
        left: auto;
        bottom: auto;
        max-width: none;
    }
    .kc-governance-hub { padding: 28px 20px; }
    .kc-governance-link { padding: 20px; }
    .kc-governance-link-top { align-items: flex-start; flex-direction: column; }
    .kc-governance-map { padding: 22px; }
    .kc-governance-map-list { grid-template-columns: 1fr; }

    .kc-media-stack img:nth-child(odd)  { margin-top: 0; }

    .kc-footer-grid { grid-template-columns: 1fr; gap: 32px; }

    .kc-stat-row { flex-direction: column; }
    .kc-stat-card { min-width: 0; }

    .kc-form-shell, .kc-article-main { padding: 22px; }
    .kc-cta-panel { padding: 36px 22px; }
    .kc-video-card video, .kc-video-card img { min-height: 240px; }
    .kc-impact-video-card,
    .kc-impact-video-card video { min-height: 280px; }
    .kc-impact-video-caption {
        left: 14px;
        right: 14px;
        bottom: 14px;
        padding: 15px 16px;
        border-radius: 18px;
    }
    .kc-map-frame iframe { height: 280px; }
    .kc-page-banner { min-height: 260px; }
    .kc-page-banner-inner { padding: 100px 0 32px; }
    .kc-accordion-list summary { padding: 16px 18px; font-size: 15px; }
    .kc-accordion-list details > p,
    .kc-accordion-list details > div { padding: 0 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 420px) {
    .container { padding: 0 16px; }
    .kc-hero-content h1 { font-size: clamp(28px, 10vw, 38px); }
}

/* =========================================================
   STEP CARDS (membership process)
   ========================================================= */
.kc-step-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    counter-reset: kc-step;
}
.kc-step-card {
    position: relative;
    padding: 32px 28px 28px;
    background: var(--kc-surface);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-r-lg);
    box-shadow: var(--kc-shadow-sm);
    transition: transform var(--kc-dur) var(--kc-ease), box-shadow var(--kc-dur) var(--kc-ease);
    counter-increment: kc-step;
}
.kc-step-card:hover { transform: translateY(-5px); box-shadow: var(--kc-shadow-md); }
.kc-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--kc-primary-gradient);
    color: #fff; font-size: 20px; font-weight: 800;
    margin-bottom: 18px;
    box-shadow: 0 4px 14px rgba(26,92,82,0.25);
}
.kc-step-card h3 { font-size: 17px; color: var(--kc-ink); margin-bottom: 8px; }
.kc-step-card p  { color: var(--kc-slate); font-size: 14px; line-height: 1.65; margin: 0; }

/* connector line between steps */
.kc-step-grid .kc-step-card:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 52px;
    right: -13px;
    width: 26px; height: 2px;
    background: var(--kc-primary-bright);
    opacity: 0.4;
    z-index: 1;
}

/* =========================================================
   DOCUMENT / DOWNLOAD CARDS
   ========================================================= */
.kc-doc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.kc-doc-card {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 26px;
    background: var(--kc-surface);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-r-lg);
    box-shadow: var(--kc-shadow-sm);
    transition: all var(--kc-dur) var(--kc-ease);
    text-decoration: none;
    color: var(--kc-ink);
}
.kc-doc-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--kc-shadow-md);
    border-color: var(--kc-primary-bright);
    color: var(--kc-ink);
}
.kc-doc-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
    background: var(--kc-surface-teal);
    color: var(--kc-primary); font-size: 22px;
}
.kc-doc-card h4  { font-size: 16px; color: var(--kc-ink); margin-bottom: 4px; }
.kc-doc-card p   { color: var(--kc-slate); font-size: 13.5px; line-height: 1.6; margin: 0; }
.kc-doc-badge {
    display: inline-block;
    margin-top: 10px;
    padding: 3px 10px;
    border-radius: var(--kc-r-pill);
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.kc-doc-badge-teal { background: var(--kc-surface-teal); color: var(--kc-primary); }
.kc-doc-badge-warm { background: var(--kc-surface-teal); color: var(--kc-primary); }

/* =========================================================
   RULE / POLICY LIST
   ========================================================= */
.kc-rule-list {
    display: grid;
    gap: 14px;
}
.kc-rule-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 20px;
    background: var(--kc-surface);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-r-lg);
    box-shadow: var(--kc-shadow-sm);
    transition: transform var(--kc-dur) var(--kc-ease);
}
.kc-rule-item:hover { transform: translateX(4px); }
.kc-rule-item > i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    background: var(--kc-surface-teal);
    color: var(--kc-primary); font-size: 16px;
    margin-top: 2px;
}
.kc-rule-item strong { display: block; font-size: 15px; color: var(--kc-ink); margin-bottom: 3px; }
.kc-rule-item span   { color: var(--kc-slate); font-size: 13.5px; line-height: 1.6; }

/* =========================================================
   CONSTITUTION HIGHLIGHT BOX
   ========================================================= */
.kc-highlight-box {
    padding: 32px 36px;
    background: var(--kc-primary-gradient);
    border-radius: var(--kc-r-lg);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.kc-highlight-box::before {
    content: '';
    position: absolute; bottom: -30px; right: -30px;
    width: 200px; height: 200px; border-radius: 50%;
    background: rgba(255,255,255,0.06); pointer-events: none;
}
.kc-highlight-box h3 { color: #fff; font-size: 22px; margin-bottom: 10px; }
.kc-highlight-box p  { color: rgba(255,255,255,0.88); margin-bottom: 18px; font-size: 15px; line-height: 1.7; }
.kc-highlight-box .kc-eyebrow { background: rgba(255,255,255,0.18); color: #fff; border: 1px solid rgba(255,255,255,0.25); }

/* =========================================================
   BADGE STRIP (key facts row)
   ========================================================= */
.kc-badge-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}
.kc-badge {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 16px;
    border-radius: var(--kc-r-pill);
    background: var(--kc-surface-teal);
    border: 1px solid rgba(47,143,131,0.18);
    color: var(--kc-primary);
    font-size: 13px; font-weight: 600;
}
.kc-badge i { font-size: 13px; }

/* =========================================================
   OFFICER CARDS (governance)
   ========================================================= */
.kc-officer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.kc-officer-card {
    padding: 28px;
    background: var(--kc-surface);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-r-lg);
    box-shadow: var(--kc-shadow-sm);
    transition: transform var(--kc-dur) var(--kc-ease), box-shadow var(--kc-dur) var(--kc-ease);
    text-align: center;
}
.kc-officer-card:hover { transform: translateY(-4px); box-shadow: var(--kc-shadow); }
.kc-officer-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--kc-primary-gradient);
    color: #fff; font-size: 26px;
    margin: 0 auto 16px;
    box-shadow: 0 6px 20px rgba(26,92,82,0.25);
}
.kc-officer-card h3 { font-size: 17px; color: var(--kc-ink); margin-bottom: 6px; }
.kc-officer-card .kc-role-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--kc-r-pill);
    background: var(--kc-surface-teal);
    color: var(--kc-primary);
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: 12px;
}
.kc-officer-card p { color: var(--kc-slate); font-size: 13.5px; line-height: 1.65; margin: 0; }

/* =========================================================
   RESPONSIVE — NEW COMPONENTS
   ========================================================= */
@media (max-width: 1080px) {
    .kc-step-grid     { grid-template-columns: repeat(2, 1fr); }
    .kc-officer-grid  { grid-template-columns: repeat(2, 1fr); }
    .kc-step-card::after { display: none; }
}
@media (max-width: 767px) {
    .kc-step-grid     { grid-template-columns: 1fr; }
    .kc-doc-grid      { grid-template-columns: 1fr; }
    .kc-officer-grid  { grid-template-columns: 1fr; }
    .kc-doc-card      { flex-direction: column; gap: 12px; }
    .kc-badge-strip   { gap: 8px; }
}