@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,800;0,900;1,600;1,700&display=swap');
/* ============================================================
   AMBOSELI ECOSYSTEM TRUST — 2026
   Master CSS — Official Brand Build
   ============================================================ */

:root {
    /* === OFFICIAL AET LOGO BRAND PALETTE (NO BLUE) === */
    /* 1. Logo Acacia & Letter Greens */
    --clr-logo-green: #244724;
    /* Bold "AET" Letters & Foothills */
    --clr-logo-green-deep: #182417;
    /* Deep Silhouette Shadow Green */
    --clr-logo-green-accent: #2E5A2E;
    /* Mid Acacia Leaf Accent */
    --clr-logo-green-soft: #DFEADF;
    /* Soft Savanna Green Tint */
    --clr-logo-green-light: #EBF2EB;
    /* Light Fresh Sage */

    /* 2. Logo Foundation Beige (Base Circle) */
    --clr-logo-beige: #E2DACC;
    /* Exact Logo Base Circle */
    --clr-logo-beige-light: #EDE6D8;
    /* Warm Savanna Sand */
    --clr-logo-beige-warm: #F5EFE6;
    /* Soft Linen Cream */
    --clr-logo-sand: #D8CEBD;
    /* Savanna Ochre Sand */

    /* 3. Logo Sunset Sky & Sunrise Glow */
    --clr-logo-amber: #F7A927;
    /* Sunset Sky Top */
    --clr-logo-gold: #FDCD13;
    /* Mid-Sky Sunrise Gold */
    --clr-logo-sun: #F6E416;
    /* Rising Sun Flare */
    --clr-amboseli-gold: #FAB918;
    /* Primary Gold Accent */
    --clr-aet-orange: #F7A927;
    /* Brand Warm Amber */

    /* 4. Legacy Aliases (Preserved for compatibility - NO BLUE) */
    --clr-brand-blue: #1B381E;
    --clr-brand-blue-deep: #122414;
    --clr-brand-blue-light: #EDF4ED;
    --clr-brand-blue-accent: #2E5A2E;
    --clr-aet-blue: #1B381E;
    --clr-mountain-blue: #2E5A2E;
    --clr-brand-primary: #1B381E;
    --clr-brand-green: #244724;
    --clr-brand-sage-light: #EDF4ED;
    --clr-nature-green: #244724;
    --clr-nature-green-deep: #172E19;
    --clr-nature-green-accent: #2E5A2E;
    --clr-nature-green-light: #EBF2EB;
    --clr-aet-green: #244724;
    --clr-forest-green: #244724;
    --clr-deep-green: #172E19;
    --clr-dark-green-alt: #182417;

    /* 5. Clean Backgrounds & Breathing Room */
    --clr-safari-beige: #EDE6D8;
    --clr-safari-beige-light: #F6F1E7;
    --clr-safari-beige-dark: #E2DACC;
    --clr-sand: #D8CEBD;
    --clr-savannah-sand: #EDE6D8;
    --clr-ivory: #F8F4EB;
    --clr-pure-white: #FFFFFF;
    --clr-snow-white: #FFFFFF;
    --clr-warm-off-white: #FAF7F2;

    /* Text Colours with High Contrast (WCAG AAA) */
    --clr-text-primary: #1C231F;
    --clr-text-secondary: #4A554E;
    --clr-text-muted: #717D75;
    --clr-text-on-dark: #FAF9F6;
    --clr-charcoal: #1C231F;
    --clr-dark-charcoal: #151A17;

    /* Accents & Borders */
    --clr-gold-accent: #DCA017;
    --clr-border-light: rgba(28, 35, 31, 0.08);
    --clr-border-beige: rgba(226, 218, 204, 0.85);

    /* === TYPOGRAPHY (Official: Poppins) === */
    --ff-sans: 'Poppins', system-ui, -apple-system, sans-serif;
    --ff-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;

    /* === RADII === */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 9999px;

    /* === SHADOWS (Warm Organic Forest/Safari - ZERO BLUE) === */
    --shadow-soft: 0 8px 30px rgba(27, 56, 30, 0.06);
    --shadow-elevated: 0 16px 40px rgba(27, 56, 30, 0.10);
    --shadow-orange: 0 6px 20px rgba(250, 185, 24, 0.35);

    /* === TRANSITIONS === */
    --transition-fast: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-normal: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

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

html,
body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    background: var(--clr-ivory);
    color: var(--clr-text-primary);
    font-family: var(--ff-sans);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

body.page-dark {
    background: var(--clr-ivory);
    color: var(--clr-text-primary);
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-fast);
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 24px;
    background: var(--clr-aet-orange);
    color: var(--clr-deep-green);
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-weight: 700;
    z-index: 99999;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 20px;
}

.hidden {
    display: none !important;
}

.text-gold {
    color: var(--clr-aet-orange) !important;
}

.text-white {
    color: var(--clr-snow-white) !important;
}

.text-orange {
    color: var(--clr-aet-orange) !important;
}

/* ==========================================
   UNIFIED PAGE CONTAINER & GRID ALIGNMENT
   ========================================== */
.page-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding-left: clamp(16px, 3.5vw, 48px);
    padding-right: clamp(16px, 3.5vw, 48px);
    box-sizing: border-box;
}

/* ==========================================
   PREMIUM SINGLE-ROW INSTITUTIONAL HEADER
   ========================================== */
.top-utility-bar {
    display: none;
}

/* Full-width fixed header shell */
.header-shell {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.07);
    border-bottom: 1px solid rgba(36, 71, 36, 0.08);
    transition: background 0.35s ease, box-shadow 0.35s ease, height 0.3s ease;
}

/* Scrolled: fully opaque crisp white with deeper shadow */
.header-shell.is-scrolled {
    background: rgba(255, 255, 255, 0.99);
    box-shadow: 0 4px 28px rgba(0, 0, 0, 0.12);
}

/* Amber accent line at the bottom */
.header-shell::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(250, 185, 24, 0.4) 15%,
            var(--clr-aet-orange) 50%,
            rgba(250, 185, 24, 0.4) 85%,
            transparent 100%);
}

/* ── Unified Single-Row Header Container ── */
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(10px, 1.4vw, 24px);
    height: 96px;
    transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-shell.is-scrolled .header-container {
    height: 76px;
}

/* -- Prominent Logo Styling (Left Grid Alignment) -- */
.header-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.brand-logo-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    line-height: 1.2;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

.brand-logo-link:hover {
    opacity: 0.88;
}

.brand-logo-img {
    height: 66px;
    max-height: 72px;
    width: auto;
    max-width: 250px;
    object-fit: contain;
    display: block;
    margin: 0;
    padding: 0;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.06));
    transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s ease;
}

.brand-logo-link:hover .brand-logo-img {
    height: 66px;
    max-height: 72px;
    width: auto;
    max-width: 250px;
    object-fit: contain;
    display: block;
    margin: 0;
    padding: 0;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.06));
    transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s ease;
}

/* -- Brand Circle Badge (Logo Image Container) -- */
.brand-circle-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid rgba(36, 71, 36, 0.18);
    box-shadow:
        0 2px 8px rgba(36, 71, 36, 0.12),
        0 0 0 4px rgba(250, 185, 24, 0.16);
    overflow: hidden;
    transition: box-shadow 0.22s ease, border-color 0.22s ease;
}

.brand-logo-link:hover .brand-circle-badge {
    border-color: rgba(250, 185, 24, 0.55);
    box-shadow:
        0 4px 14px rgba(36, 71, 36, 0.18),
        0 0 0 4px rgba(250, 185, 24, 0.42);
}

.brand-circle-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    padding: 0;
}

/* -- Brand Text Lockup (Name + Tagline) -- */
.brand-text-lockup {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    max-width: 170px;
}

.brand-full-name {
    display: block;
    font-family: var(--ff-serif, Georgia, serif);
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--clr-deep-green, #172E19);
    letter-spacing: 0.01em;
    line-height: 1.3;
    white-space: normal;
    word-break: normal;
}

.brand-sub-strap {
    display: block;
    font-family: var(--ff-sans, sans-serif);
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--clr-amboseli-gold, #FAB918);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.2;
}

/* Responsive: hide tagline early, shrink badge on mobile */
@media (max-width: 960px) {
    .brand-sub-strap {
        display: none;
    }
}

@media (max-width: 768px) {
    .brand-circle-badge {
        width: 44px;
        height: 44px;
    }

    .brand-full-name {
        font-size: 0.82rem;
    }

    .brand-text-lockup {
        max-width: 120px;
    }
}

@media (max-width: 480px) {
    .brand-circle-badge {
        width: 38px;
        height: 38px;
    }

    .brand-full-name {
        font-size: 0.76rem;
    }

    .brand-text-lockup {
        max-width: 100px;
    }
}

.header-shell.is-scrolled .brand-logo-img {
    height: 66px;
    max-height: 72px;
    width: auto;
    max-width: 250px;
    object-fit: contain;
    display: block;
    margin: 0;
    padding: 0;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.06));
    transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s ease;
}

/* ── Desktop Primary Navigation Menu (Center) ── */
.nav-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
}

.nav-list {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: clamp(4px, 0.75vw, 14px);
    white-space: nowrap;
}

.nav-item {
    display: flex;
    align-items: center;
    position: relative;
    height: 100%;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px clamp(6px, 0.6vw, 11px);
    font-weight: 600;
    font-size: clamp(0.79rem, 0.85vw, 0.88rem);
    letter-spacing: 0.01em;
    color: var(--clr-deep-green);
    background: transparent;
    border: none;
    border-radius: 6px;
    transition: color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
    position: relative;
    cursor: pointer;
    text-decoration: none;
}

.nav-item:hover .nav-link,
.nav-link:hover {
    color: var(--clr-forest-green);
    background: rgba(36, 71, 36, 0.06);
}

.chevron {
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    color: rgba(36, 71, 36, 0.45);
    margin-left: 2px;
    flex-shrink: 0;
}

.nav-item:hover .chevron {
    transform: rotate(180deg);
    color: var(--clr-aet-orange);
}

/* ── Integrated Right Actions ── */
.nav-actions {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1vw, 14px);
    flex-shrink: 0;
}

/* Search toggle removed cleanly across the site */
.search-toggle,
.search-bar-inline {
    display: none !important;
}

/* Language selector */
.lang-selector-wrap {
    position: relative;
}

.lang-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid rgba(36, 71, 36, 0.14);
    background: rgba(36, 71, 36, 0.03);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: var(--clr-deep-green);
    cursor: pointer;
    transition: all 0.2s ease;
}

.lang-btn:hover {
    background: #ffffff;
    border-color: var(--clr-aet-orange);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    color: var(--clr-forest-green);
}

.lang-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: rgba(14, 24, 14, 0.97);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-md);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 300px;
    min-width: 164px;
    z-index: 1200;
}

.lang-dropdown::-webkit-scrollbar {
    width: 4px;
}

.lang-dropdown::-webkit-scrollbar-thumb {
    background: rgba(250, 185, 24, 0.3);
    border-radius: 4px;
}

.lang-opt {
    padding: 10px 16px;
    text-align: left;
    font-size: 0.83rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.15s ease;
}

.lang-opt:hover,
.lang-opt.active {
    background: rgba(250, 185, 24, 0.12);
    color: var(--clr-aet-orange);
}

/* ── Premium CTA Button ── */
.btn-support {
    height: 40px;
    padding: 0 20px;
    background: linear-gradient(135deg, #FAB918 0%, #e5a50b 100%);
    color: #12200f;
    border: none;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 4px 18px rgba(250, 185, 24, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.btn-support::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.btn-support:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(250, 185, 24, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, #ffc832 0%, #FAB918 100%);
}

.btn-support:hover::before {
    opacity: 1;
}

.btn-support:active {
    transform: translateY(0);
}

.support-arrow {
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-support:hover .support-arrow {
    transform: translate(2px, -2px);
}

/* ── Mobile Toggle ── */
.mobile-toggle {
    display: none;
    width: 44px;
    height: 44px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(36, 71, 36, 0.16);
    border-radius: 10px;
    background: rgba(36, 71, 36, 0.04);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.mobile-toggle:hover {
    border-color: var(--clr-forest-green);
    background: rgba(36, 71, 36, 0.08);
}

.mobile-toggle:active {
    transform: scale(0.96);
}

.hamburger-line {
    width: 20px;
    height: 2px;
    background: var(--clr-deep-green);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

/* ════════════════════════════════════════════════════════════
   CASCADING RESPONSIVE BREAKPOINTS (ALL SCREENS)
   ════════════════════════════════════════════════════════════ */

/* A. Laptops & Compact Desktops (1151px – 1440px) */
@media (max-width: 1440px) and (min-width: 1151px) {
    .header-container {
        height: 84px;
        gap: clamp(8px, 1.2vw, 16px);
        padding-left: clamp(16px, 2.5vw, 36px);
        padding-right: clamp(16px, 2.5vw, 36px);
    }

    .header-shell.is-scrolled .header-container {
        height: 72px;
    }

    .brand-logo-img {
        height: 66px;
        max-height: 72px;
        width: auto;
        max-width: 250px;
        object-fit: contain;
        display: block;
        margin: 0;
        padding: 0;
        filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.06));
        transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s ease;
    }

    .header-shell.is-scrolled .brand-logo-img {
        height: 66px;
        max-height: 72px;
        width: auto;
        max-width: 250px;
        object-fit: contain;
        display: block;
        margin: 0;
        padding: 0;
        filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.06));
        transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s ease;
    }

    .nav-list {
        gap: clamp(2px, 0.45vw, 8px);
    }

    .nav-link {
        padding: 6px clamp(4px, 0.5vw, 8px);
        font-size: clamp(0.76rem, 0.79vw, 0.83rem);
    }

    .chevron {
        width: 10px;
        height: 10px;
        margin-left: 2px;
    }

    .nav-actions {
        gap: 8px;
    }

    /* "Partner With Us" button is ALWAYS visible and perfectly proportioned on smaller laptops */
    .btn-support {
        display: inline-flex !important;
        height: 38px;
        padding: 0 clamp(10px, 1vw, 16px);
        font-size: clamp(0.76rem, 0.8vw, 0.81rem);
        font-weight: 700;
        gap: 6px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .lang-btn {
        height: 38px;
        padding: 6px 10px;
        font-size: 0.76rem;
    }
}

/* B. Primary Mobile & Tablet Breakpoint (<= 1150px) */
@media (max-width: 1150px) {
    .nav-menu {
        display: none !important;
    }

    .mobile-toggle {
        display: flex !important;
    }

    .header-container {
        height: 72px;
    }

    .header-shell.is-scrolled .header-container {
        height: 64px !important;
    }

    .brand-logo-img {
        height: 66px;
        max-height: 72px;
        width: auto;
        max-width: 250px;
        object-fit: contain;
        display: block;
        margin: 0;
        padding: 0;
        filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.06));
        transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s ease;
    }

    .header-shell.is-scrolled .brand-logo-img {
        height: 66px;
        max-height: 72px;
        width: auto;
        max-width: 250px;
        object-fit: contain;
        display: block;
        margin: 0;
        padding: 0;
        filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.06));
        transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s ease;
    }
}

/* Tablets (769px – 1150px): Keep "Partner With Us" visible next to hamburger on tablet screens */
@media (max-width: 1150px) and (min-width: 769px) {
    .btn-support {
        display: inline-flex !important;
        height: 36px;
        padding: 0 14px;
        font-size: 0.78rem;
        gap: 5px;
    }
}

/* Phones (<= 768px): Hide button in top header to avoid crowding phone screens; full button is inside mobile menu drawer */
@media (max-width: 768px) {
    .btn-support {
        display: none !important;
    }
}

/* C. Tablets & Phablets (<= 768px) */
@media (max-width: 768px) {
    .header-container {
        height: 64px;
    }

    .header-shell.is-scrolled .header-container {
        height: 58px !important;
    }

    .brand-logo-img {
        height: 66px;
        max-height: 72px;
        width: auto;
        max-width: 250px;
        object-fit: contain;
        display: block;
        margin: 0;
        padding: 0;
        filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.06));
        transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s ease;
    }

    .header-shell.is-scrolled .brand-logo-img {
        height: 66px;
        max-height: 72px;
        width: auto;
        max-width: 250px;
        object-fit: contain;
        display: block;
        margin: 0;
        padding: 0;
        filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.06));
        transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s ease;
    }

    .mobile-toggle {
        width: 40px;
        height: 40px;
        border-radius: 8px;
    }

    .hamburger-line {
        width: 18px;
    }

    .lang-btn {
        padding: 5px 10px;
        font-size: 0.76rem;
        height: 36px;
    }
}

/* D. Mobile Phones (<= 480px) */
@media (max-width: 480px) {
    .header-container {
        height: 58px;
        gap: 8px;
    }

    .header-shell.is-scrolled .header-container {
        height: 54px !important;
    }

    .brand-logo-img {
        height: 66px;
        max-height: 72px;
        width: auto;
        max-width: 250px;
        object-fit: contain;
        display: block;
        margin: 0;
        padding: 0;
        filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.06));
        transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s ease;
    }

    .header-shell.is-scrolled .brand-logo-img {
        height: 66px;
        max-height: 72px;
        width: auto;
        max-width: 250px;
        object-fit: contain;
        display: block;
        margin: 0;
        padding: 0;
        filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.06));
        transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s ease;
    }

    .nav-actions {
        gap: 6px !important;
    }

    .mobile-toggle {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    .hamburger-line {
        width: 16px;
        height: 1.5px;
    }

    .lang-btn {
        height: 34px;
        padding: 3px 8px;
        font-size: 0.72rem;
    }
}

/* E. Ultra-compact Phones (<= 340px) */
@media (max-width: 340px) {
    .brand-logo-img {
        height: 66px;
        max-height: 72px;
        width: auto;
        max-width: 250px;
        object-fit: contain;
        display: block;
        margin: 0;
        padding: 0;
        filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.06));
        transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s ease;
    }

    .lang-btn span {
        font-size: 0.68rem;
    }

    .header-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ============================================================
   MEGA-MENU DROPDOWNS — AET Editorial Navigation System
   ============================================================ */

/* ── Hover Bridge: keeps menu open across cursor gaps ── */
.nav-item.has-dropdown::after {
    content: '';
    position: absolute;
    bottom: -18px;
    left: 0;
    right: 0;
    height: 22px;
    z-index: 1099;
}

/* ══════════════════════════
   DROPDOWN SHELL
   ══════════════════════════ */
.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 780px;
    max-width: min(780px, calc(100vw - 32px));
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 18px;
    padding: 0;
    overflow: hidden;
    box-shadow:
        0 10px 25px -5px rgba(18, 38, 20, 0.08),
        0 25px 60px -10px rgba(18, 38, 20, 0.18),
        0 0 0 1px rgba(250, 185, 24, 0.35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.24s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1100;
}

/* Open states */
.nav-item.has-dropdown:hover .dropdown-menu,
.nav-item.has-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Gold top accent line */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(250, 185, 24, 0.4) 15%,
            #FAB918 50%,
            rgba(250, 185, 24, 0.4) 85%,
            transparent 100%);
    z-index: 2;
}

/* ══════════════════════════
   INNER PADDING & WRAPPER
   ══════════════════════════ */
.dropdown-menu-inner-wrap {
    padding: 24px 26px 22px;
    position: relative;
    z-index: 1;
}

/* ── Top Editorial Header ── */
.dropdown-editorial-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(36, 71, 36, 0.07);
}

.dropdown-tag {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: var(--clr-forest-green);
    text-transform: uppercase;
    white-space: nowrap;
    background: rgba(36, 71, 36, 0.07);
    border: 1px solid rgba(36, 71, 36, 0.14);
    border-radius: 100px;
    padding: 3px 10px;
}

.dropdown-heading {
    font-weight: 700;
    font-size: 1rem;
    color: var(--clr-deep-green);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

/* ── 3-Column Content Grid ── */
.dropdown-grid-3col {
    display: grid;
    grid-template-columns: 1fr 1fr 240px;
    gap: 18px;
    align-items: stretch;
}

/* Individual Link Columns */
.dropdown-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dropdown-col-title {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(36, 71, 36, 0.45);
    margin-bottom: 6px;
    padding-left: 10px;
}

/* ── Link Item (.dd-item) ── */
.dd-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 9px 10px;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid transparent;
}

.dd-item:hover {
    background: rgba(36, 71, 36, 0.05);
    border-color: rgba(36, 71, 36, 0.09);
    transform: translateX(3px);
}

.dd-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(250, 185, 24, 0.1);
    border: 1px solid rgba(250, 185, 24, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    transition: all 0.18s ease;
}

.dd-item:hover .dd-icon {
    background: rgba(250, 185, 24, 0.22);
    border-color: rgba(250, 185, 24, 0.4);
    transform: scale(1.05);
}

.dd-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dd-heading {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--clr-deep-green);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.dd-sub {
    font-size: 0.72rem;
    color: rgba(36, 31, 33, 0.52);
    line-height: 1.38;
}

/* ── Right-Side Feature Showcase Panel (.dd-feature) ── */
.dd-feature {
    background: linear-gradient(155deg, #162410 0%, #203e1e 60%, #193118 100%);
    border-radius: 14px;
    padding: 20px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(24, 36, 15, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease;
}

.dd-feature::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 110px;
    height: 110px;
    background: radial-gradient(circle, rgba(250, 185, 24, 0.2) 0%, transparent 65%);
    pointer-events: none;
}

.dd-feature:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(24, 36, 15, 0.32);
}

.dd-feature-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #FAB918;
    background: rgba(250, 185, 24, 0.12);
    border: 1px solid rgba(250, 185, 24, 0.25);
    border-radius: 100px;
    padding: 3px 10px;
    width: fit-content;
}

.dd-feature-title {
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.25;
    color: rgba(251, 248, 240, 0.98);
    letter-spacing: -0.01em;
}

.dd-feature-desc {
    font-size: 0.72rem;
    color: rgba(251, 248, 240, 0.62);
    line-height: 1.55;
    flex-grow: 1;
}

.dd-feature-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #FAB918;
    margin-top: auto;
    transition: gap 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dd-feature:hover .dd-feature-cta {
    gap: 10px;
}

/* ── Live Stats Grid inside Feature Card ── */
.dd-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin: 3px 0;
}

.dd-stat {
    text-align: center;
    flex: 1;
}

.dd-stat-num {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    color: #FAB918;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.dd-stat-label {
    display: block;
    font-size: 0.58rem;
    font-weight: 600;
    color: rgba(251, 248, 240, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 2px;
}

.dd-stat-divider {
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

/* ══════════════════════════
   PROGRAMMES MEGA-MENU
   ══════════════════════════ */
.dropdown-menu--programmes {
    width: 820px;
}

.prog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.prog-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 14px 18px;
    border-radius: 12px;
    border: 1px solid rgba(36, 71, 36, 0.1);
    background: rgba(36, 71, 36, 0.025);
    text-decoration: none;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.prog-card:hover {
    background: rgba(36, 71, 36, 0.06);
    border-color: rgba(250, 185, 24, 0.3);
    transform: translateY(-3px);
}

.prog-num {
    font-size: 1.7rem;
    font-weight: 800;
    color: rgba(36, 71, 36, 0.15);
    line-height: 1;
    letter-spacing: -0.05em;
}

.prog-name {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--clr-deep-green);
    line-height: 1.3;
    flex-grow: 1;
}

.prog-outcome {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--clr-aet-green);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    padding: 3px 8px;
    background: rgba(36, 71, 36, 0.06);
    border-radius: 100px;
    width: fit-content;
}

.prog-sub-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 14px;
    border-top: 1px solid rgba(36, 71, 36, 0.07);
}

.prog-sub-tag {
    font-size: 0.73rem;
    font-weight: 600;
    color: rgba(36, 31, 33, 0.55);
    padding: 5px 13px;
    border-radius: 100px;
    border: 1px solid rgba(36, 71, 36, 0.13);
    text-decoration: none;
    transition: all 0.16s ease;
}

.prog-sub-tag:hover {
    color: var(--clr-forest-green);
    border-color: rgba(36, 71, 36, 0.28);
    background: rgba(36, 71, 36, 0.05);
}

/* ══════════════════════════
   DROPDOWN POSITIONING
   ══════════════════════════ */
/* Left side dropdowns: align under nav link */
#dropdown-about {
    left: -20px;
    transform: translateY(8px);
}

.nav-item.has-dropdown:hover #dropdown-about,
.nav-item.has-dropdown:focus-within #dropdown-about {
    transform: translateY(0);
}

#dropdown-ecosystem {
    left: -120px;
    transform: translateY(8px);
}

.nav-item.has-dropdown:hover #dropdown-ecosystem,
.nav-item.has-dropdown:focus-within #dropdown-ecosystem {
    transform: translateY(0);
}

/* Center programmes */
#dropdown-work {
    left: 50%;
    transform: translateX(-50%) translateY(8px);
}

.nav-item.has-dropdown:hover #dropdown-work,
.nav-item.has-dropdown:focus-within #dropdown-work {
    transform: translateX(-50%) translateY(0);
}

/* ══════════════════════════
   POSITIONING OVERRIDES
   Right-side dropdowns anchor to right edge
   ══════════════════════════ */
/* Conservancies & Impact dropdowns are near right of nav — right-anchor them */
#dropdown-conservancies,
#dropdown-impact {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(8px);
}

.nav-item.has-dropdown:hover #dropdown-conservancies,
.nav-item.has-dropdown:focus-within #dropdown-conservancies,
.nav-item.has-dropdown:hover #dropdown-impact,
.nav-item.has-dropdown:focus-within #dropdown-impact {
    transform: translateX(0) translateY(0);
}

/* ── Responsive ── */
@media (max-width: 1280px) {
    .dropdown-menu {
        width: 640px;
        max-width: calc(100vw - 32px);
    }

    .dropdown-menu--programmes {
        width: 680px;
        max-width: calc(100vw - 32px);
    }

    #dropdown-conservancies,
    #dropdown-impact {
        width: 640px;
        max-width: calc(100vw - 32px);
    }
}

/* Inline Search Bar */
.search-bar-inline {
    width: 100%;
    max-width: 1680px;
    margin: 0 auto;
    background: rgba(12, 20, 12, 0.9);
    backdrop-filter: blur(16px);
    border-radius: 0;
    padding: 14px 48px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.search-form-inline {
    display: flex;
    gap: 12px;
    max-width: 800px;
    margin: 0 auto;
}

.search-input-inline {
    flex: 1;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    outline: none;
    font-family: inherit;
}

.search-input-inline::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.search-input-inline:focus {
    border-color: rgba(250, 185, 24, 0.5);
    background: rgba(255, 255, 255, 0.09);
}

.search-btn-inline {
    padding: 10px 24px;
    background: var(--clr-aet-orange);
    color: var(--clr-deep-green);
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
    transition: background 0.2s ease;
}

.search-btn-inline:hover {
    background: #ffc832;
}

/* ---- MOBILE MENU DRAWER ---- */
.mobile-menu {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: rgba(14, 28, 16, 0.98);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.mobile-menu.is-active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.mobile-menu-inner {
    max-width: 600px;
    margin: 0 auto;
    padding: clamp(16px, 3.5vw, 28px) clamp(16px, 3.5vw, 24px);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-logo-img {
    height: clamp(36px, 4vw, 44px);
    width: auto;
    object-fit: contain;
}

.mobile-close {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--clr-snow-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.mobile-close:hover {
    background: rgba(250, 185, 24, 0.2);
    border-color: var(--clr-aet-orange);
    transform: scale(1.05);
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    text-decoration: none;
    transition: background 0.18s ease, transform 0.18s ease;
}

.mobile-nav-link:hover,
.mobile-nav-link:active {
    background: rgba(255, 255, 255, 0.07);
    transform: translateX(4px);
}

.mobile-num {
    font-weight: 800;
    font-size: 0.82rem;
    color: var(--clr-aet-orange);
    min-width: 22px;
    letter-spacing: 0.04em;
}

.mobile-link-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mobile-text {
    font-weight: 700;
    font-family: var(--ff-sans);
    font-size: clamp(1.05rem, 2.5vw, 1.28rem);
    color: var(--clr-snow-white);
    display: block;
    line-height: 1.25;
}

.mobile-sub {
    font-size: 0.74rem;
    color: rgba(251, 248, 240, 0.65);
    line-height: 1.3;
}

.mobile-menu-footer {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mobile-btn-support {
    height: 48px;
    background: linear-gradient(135deg, #FAB918 0%, #e5a50b 100%);
    color: #12200f !important;
    border-radius: var(--radius-full);
    font-weight: 800;
    font-size: 0.88rem;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(250, 185, 24, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
}

.mobile-btn-support:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(250, 185, 24, 0.5);
}

.mobile-contact-info {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.6;
}

.mobile-contact-info p {
    margin: 4px 0;
}

.mobile-contact-info strong {
    color: rgba(255, 255, 255, 0.9);
}

/* ---- CINEMATIC HERO ---- */
.hero-section {
    position: relative;
    height: 100vh;
    min-height: 840px;
    background: var(--clr-deep-green);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 120px;
    padding-bottom: 32px;
}

/* Slideshow Container & Crossfading Slides */
.hero-slideshow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1), transform 8s ease-out;
}

.hero-slide.active {
    opacity: 1;
    transform: scale(1.02);
}

.hero-svg-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-overlay-main {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(24, 36, 23, 0.94) 0%, rgba(24, 36, 23, 0.76) 35%, rgba(24, 36, 23, 0.38) 65%, rgba(24, 36, 23, 0.08) 100%);
}

.hero-overlay-bottom {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(to top, rgba(24, 36, 23, 0.94) 0%, rgba(24, 36, 23, 0.25) 40%, transparent 70%);
}

.hero-overlay-haze {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 60%;
    z-index: 4;
    pointer-events: none;
    background: radial-gradient(circle at 75% 25%, rgba(107, 172, 205, 0.16) 0%, transparent 70%);
}

.hero-overlay-grain {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

.hero-container {
    position: relative;
    z-index: 10;
    width: 100%;
}

.hero-content,
.hero-content-slide {
    max-width: 820px;
}

.hero-content-slide {
    display: none;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-content-slide.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--clr-snow-white);
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.eyebrow-line {
    width: 36px;
    height: 2px;
    background: var(--clr-aet-orange);
}

.eyebrow-pill {
    background: rgba(250, 185, 24, 0.12);
    border: 1px solid rgba(250, 185, 24, 0.35);
    color: var(--clr-aet-orange);
    padding: 4px 14px;
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    backdrop-filter: blur(8px);
}

.text-gradient {
    background: linear-gradient(135deg, #FBF8F0 0%, #E2DACC 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.shimmer-text {
    background: linear-gradient(90deg, #FAB918 0%, #FAB918 40%, #FAB918 80%, #FAB918 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: goldGlint 5s ease-in-out infinite;
}

@keyframes goldGlint {

    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

.hero-headline {
    font-family: var(--ff-sans);
    font-size: clamp(38px, 4.5vw, 68px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
}

.headline-line {
    display: block;
}

.hero-word-wrap {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

.hero-word {
    display: inline-block;
    animation: wordRise 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.headline-line1 .hero-word-wrap:nth-child(1) .hero-word {
    animation-delay: 0.4s;
}

.headline-line1 .hero-word-wrap:nth-child(2) .hero-word {
    animation-delay: 0.55s;
}

.headline-line2 .hero-word-wrap:nth-child(1) .hero-word {
    animation-delay: 0.7s;
}

.headline-line2 .hero-word-wrap:nth-child(2) .hero-word {
    animation-delay: 0.82s;
}

.headline-line2 .hero-word-wrap:nth-child(3) .hero-word {
    animation-delay: 0.94s;
}

@keyframes wordRise {
    from {
        opacity: 0;
        transform: translateY(110%) rotate(4deg);
    }

    to {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
}

.hero-slide-indicators {
    display: flex;
    align-items: center;
    gap: 8px;
}

.indicator-dot {
    width: 24px;
    height: 3px;
    background: rgba(251, 248, 240, 0.3);
    border-radius: 2px;
    border: none;
    cursor: pointer;
    transition: all 0.35s ease;
}

.indicator-dot.active,
.indicator-dot:hover {
    width: 48px;
    background: var(--clr-aet-orange);
}

.hero-lead {
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.6;
    color: rgba(251, 248, 240, 0.9);
    max-width: 580px;
    margin-bottom: 24px;
}

/* Hero Quick Stats Glass Bar */
.hero-glass-stats {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    padding: 12px 24px;
    margin-bottom: 28px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.glass-stat-item {
    display: flex;
    flex-direction: column;
}

.glass-stat-num {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--clr-aet-orange);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.glass-stat-lbl {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(251, 248, 240, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 2px;
}

.glass-stat-divider {
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, 0.18);
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.btn-primary-hero {
    height: 52px;
    padding: 0 28px;
    background: var(--clr-snow-white);
    color: var(--clr-deep-green);
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    transition: var(--transition-fast);
}

.btn-primary-hero:hover {
    background: #FFF;
    transform: translateY(-2px);
}

.btn-secondary-hero {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--clr-snow-white);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1.5px solid rgba(251, 248, 240, 0.4);
    padding-bottom: 4px;
}

.btn-secondary-hero:hover {
    color: var(--clr-aet-orange);
    border-color: var(--clr-aet-orange);
}

.aemp-reference {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: rgba(251, 248, 240, 0.7);
}

.hero-lower-bar {
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
    max-width: 1600px;
    margin: 0 auto;
    padding-left: 48px;
    padding-right: 48px;
    box-sizing: border-box;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(251, 248, 240, 0.7);
}

.hero-scroll-prompt {
    display: flex;
    align-items: center;
    gap: 10px;
}

.scroll-line {
    width: 24px;
    height: 1.5px;
    background: var(--clr-aet-orange);
}

/* ---- SECTION SHARED UTILITIES ---- */
.section-badge {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: var(--clr-forest-green);
    margin-bottom: 12px;
}

.section-title-serif {
    font-weight: 700;
    font-family: var(--ff-sans);
    font-size: clamp(34px, 3.4vw, 52px);
    font-weight: 400;
    line-height: 1.15;
    margin-bottom: 48px;
}

/* ---- MANIFESTO ---- */
.manifesto-section {
    background: var(--clr-savannah-sand);
    color: var(--clr-deep-green);
    position: relative;
    padding-bottom: 100px;
}

.organic-transition-curve svg {
    width: 100%;
    height: 72px;
    display: block;
}

/* ---- OPENING MANIFESTO (DARK CINEMATIC DESIGN) ---- */
.manifesto-section {
    background: #131B12;
    color: var(--clr-snow-white);
    padding: 100px 32px 90px;
    position: relative;
    border-bottom: 1px solid rgba(250, 185, 24, 0.12);
}

.manifesto-container {
    max-width: 1380px;
    margin: 0 auto;
}

.manifesto-top-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(250, 185, 24, 0.08);
    border: 1px solid rgba(250, 185, 24, 0.2);
    color: var(--clr-aet-orange);
    padding: 6px 18px;
    border-radius: var(--radius-full);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    margin-bottom: 36px;
}

.tag-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--clr-aet-orange);
    box-shadow: 0 0 10px var(--clr-aet-orange);
    animation: pulseGlint 2s infinite ease-in-out;
}

@keyframes pulseGlint {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.4);
        opacity: 0.6;
    }
}

.manifesto-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 64px;
    align-items: center;
}

.manifesto-left {
    position: relative;
}

.manifesto-quote-mark {
    font-weight: 700;
    font-family: var(--ff-sans);
    font-size: 140px;
    line-height: 0;
    position: absolute;
    top: 40px;
    left: -40px;
    color: rgba(250, 185, 24, 0.12);
    pointer-events: none;
    user-select: none;
}

.manifesto-statement {
    font-weight: 700;
    font-family: var(--ff-sans);
    font-size: clamp(34px, 3.6vw, 54px);
    line-height: 1.18;
    color: var(--clr-snow-white);
    font-weight: 400;
    position: relative;
    z-index: 2;
}

.manifesto-text {
    font-size: 1.05rem;
    color: rgba(226, 218, 204, 0.85);
    line-height: 1.7;
    margin-bottom: 32px;
}

.manifesto-pillars {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pillar-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(251, 248, 240, 0.05);
    border: 1px solid rgba(251, 248, 240, 0.12);
    padding: 8px 16px;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}

.pillar-chip:hover {
    background: rgba(250, 185, 24, 0.1);
    border-color: rgba(250, 185, 24, 0.35);
    transform: translateY(-2px);
}

.chip-num {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--clr-aet-orange);
    letter-spacing: 0.1em;
}

.chip-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--clr-snow-white);
}

/* ---- INTRO / ABOUT (DARK ECOSYSTEM MOSAIC) ---- */
.intro-section {
    background: #172416;
    color: var(--clr-snow-white);
    padding: 110px 32px;
    position: relative;
}

.intro-container {
    max-width: 1380px;
    margin: 0 auto;
}

.intro-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 64px;
}

.intro-mosaic-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 32px;
}

.mosaic-main-card {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    height: 540px;
    border: 1px solid rgba(250, 185, 24, 0.15);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
}

.mosaic-badge-overlay {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(24, 36, 23, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(250, 185, 24, 0.3);
    padding: 6px 16px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--clr-aet-orange);
}

.mosaic-caption {
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    padding: 32px 28px 24px;
    background: linear-gradient(to top, rgba(16, 26, 15, 0.95) 0%, rgba(16, 26, 15, 0.6) 60%, transparent 100%);
    color: var(--clr-snow-white);
}

.mosaic-caption h4 {
    font-weight: 700;
    font-family: var(--ff-sans);
    font-size: 1.6rem;
    line-height: 1.2;
    margin-bottom: 6px;
    color: var(--clr-snow-white);
}

.mosaic-caption p {
    font-size: 0.88rem;
    color: rgba(226, 218, 204, 0.85);
}

.mosaic-side-column {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.mosaic-sub-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: 250px;
    border: 1px solid rgba(250, 185, 24, 0.15);
}

.mosaic-badge-pill {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(24, 36, 23, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(251, 248, 240, 0.2);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--clr-snow-white);
}

.mosaic-overlay-text {
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(16, 26, 15, 0.95) 0%, transparent 100%);
    color: var(--clr-snow-white);
}

.mosaic-overlay-text h4 {
    font-weight: 700;
    font-family: var(--ff-sans);
    font-size: 1.35rem;
    margin-bottom: 4px;
}

.mosaic-overlay-text p {
    font-size: 0.82rem;
    color: rgba(226, 218, 204, 0.85);
}

.mosaic-fact-card {
    background: rgba(30, 44, 29, 0.8);
    border-radius: var(--radius-lg);
    padding: 32px;
    border: 1px solid rgba(250, 185, 24, 0.2);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
}

.fact-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.fact-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(250, 185, 24, 0.12);
    border: 1px solid rgba(250, 185, 24, 0.25);
    color: var(--clr-aet-orange);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fact-badge {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--clr-aet-orange);
    background: rgba(250, 185, 24, 0.1);
    padding: 4px 10px;
    border-radius: 4px;
}

.mosaic-fact-card h3 {
    font-weight: 700;
    font-family: var(--ff-sans);
    font-size: 1.8rem;
    color: var(--clr-snow-white);
    margin-bottom: 10px;
}

.mosaic-fact-card p {
    font-size: 0.92rem;
    color: rgba(226, 218, 204, 0.85);
    line-height: 1.6;
    margin-bottom: 20px;
}

.fact-footer {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(251, 248, 240, 0.1);
}

.fact-pillar-tag {
    font-size: 0.74rem;
    font-weight: 700;
    color: rgba(251, 248, 240, 0.6);
    letter-spacing: 0.08em;
}

.fact-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--clr-aet-orange);
    font-size: 0.88rem;
    transition: transform 0.25s ease;
}

.fact-link:hover {
    transform: translateX(4px);
}

/* ---- IMPACT ---- */
.impact-section {
    background: var(--clr-deep-green);
    color: var(--clr-snow-white);
    padding: 100px 32px;
}

.impact-container {
    max-width: 1380px;
    margin: 0 auto;
}

.impact-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.impact-card {
    background: rgba(251, 248, 240, 0.04);
    border-radius: var(--radius-md);
    padding: 32px 20px;
    border: 1px solid rgba(251, 248, 240, 0.08);
    text-align: center;
}

.impact-num {
    font-weight: 700;
    font-family: var(--ff-sans);
    font-size: 3.4rem;
    color: var(--clr-aet-orange);
    line-height: 1;
    margin-bottom: 8px;
}

.impact-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(251, 248, 240, 0.8);
}

.impact-disclaimer {
    font-size: 0.78rem;
    color: rgba(251, 248, 240, 0.5);
    text-align: right;
}

/* ---- OUR WORK PROGRAMMES ---- */
/* ---- OUR WORK PROGRAMMES (DARK CINEMATIC DESIGN) ---- */
.work-section {
    background: #152214;
    color: var(--clr-snow-white);
    padding: 110px 32px;
    position: relative;
    overflow: hidden;
}

.work-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(250, 185, 24, 0.25), transparent);
}

.work-container {
    max-width: 1380px;
    margin: 0 auto;
}

.work-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 64px;
}

.section-subtitle {
    font-size: 1rem;
    color: rgba(226, 218, 204, 0.8);
    margin-top: 12px;
    line-height: 1.6;
}

.programme-rows {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.programme-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center;
    background: rgba(30, 44, 29, 0.75);
    border-radius: var(--radius-xl);
    overflow: hidden;
    padding: 36px;
    box-shadow: 0 16px 40px rgba(10, 16, 10, 0.35);
    border: 1px solid rgba(250, 185, 24, 0.15);
    backdrop-filter: blur(12px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}

.programme-row:hover {
    transform: translateY(-6px);
    border-color: rgba(250, 185, 24, 0.45);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45), 0 0 30px rgba(250, 185, 24, 0.1);
}

.programme-row.row-reverse {
    grid-template-columns: 1fr 1.2fr;
}

.programme-row.row-reverse .row-media {
    grid-column: 2;
}

.programme-row.row-reverse .row-content {
    grid-column: 1;
    grid-row: 1;
}

.row-media {
    position: relative;
    height: 390px;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.row-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.programme-row:hover .row-img {
    transform: scale(1.05);
}

.media-overlay-tag {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: rgba(24, 36, 23, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(251, 248, 240, 0.15);
    padding: 6px 16px;
    border-radius: var(--radius-full);
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--clr-snow-white);
    letter-spacing: 0.08em;
}

.row-content {
    display: flex;
    flex-direction: column;
}

.row-header-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.row-num {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: var(--clr-aet-orange);
    background: rgba(250, 185, 24, 0.12);
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid rgba(250, 185, 24, 0.25);
}

.row-category {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(251, 248, 240, 0.6);
    text-transform: uppercase;
}

.row-title {
    font-weight: 700;
    font-family: var(--ff-sans);
    font-size: 2.1rem;
    line-height: 1.15;
    margin-bottom: 14px;
    color: var(--clr-snow-white);
}

.row-desc {
    font-size: 0.95rem;
    color: rgba(226, 218, 204, 0.85);
    line-height: 1.6;
    margin-bottom: 22px;
}

.activity-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(251, 248, 240, 0.9);
    margin-bottom: 28px;
}

.activity-list li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bullet-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--clr-aet-orange);
    box-shadow: 0 0 8px rgba(250, 185, 24, 0.6);
    flex-shrink: 0;
}

.row-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid rgba(251, 248, 240, 0.1);
    flex-wrap: wrap;
    gap: 12px;
}

.row-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--clr-aet-orange);
    background: rgba(250, 185, 24, 0.08);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(250, 185, 24, 0.2);
}

.row-link {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--clr-snow-white);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.25s ease, transform 0.25s ease;
}

.row-link:hover {
    color: var(--clr-aet-orange);
    transform: translateX(4px);
}

/* ---- INTERACTIVE MAP ---- */
.map-section {
    background: var(--clr-deep-green);
    color: var(--clr-snow-white);
    padding: 100px 32px;
}

.map-container {
    max-width: 1380px;
    margin: 0 auto;
}

.map-intro {
    font-size: 1.05rem;
    color: rgba(251, 248, 240, 0.8);
    margin-bottom: 36px;
}

.map-interactive-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 32px;
}

.map-svg-box {
    background: #10190F;
    border-radius: var(--radius-xl);
    padding: 16px;
    border: 1px solid rgba(251, 248, 240, 0.1);
}

.map-svg {
    width: 100%;
    height: auto;
    display: block;
}

.map-polygon {
    fill: #1d331d;
    fill-opacity: 0.6;
    stroke: var(--clr-aet-orange);
    stroke-width: 1.5;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.map-polygon:hover,
.map-polygon.active {
    fill-opacity: 0.85;
    fill: var(--clr-aet-green);
    filter: drop-shadow(0 0 12px rgba(250, 185, 24, 0.3));
}

.map-core-park {
    fill: #1B381E;
    fill-opacity: 0.85;
    stroke: #FFF;
    stroke-width: 2;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.map-core-park:hover,
.map-core-park.active {
    fill-opacity: 0.95;
    fill: var(--clr-nature-green-accent);
    filter: drop-shadow(0 0 12px rgba(250, 185, 24, 0.3));
}

.map-text-core {
    fill: #FFF;
    font-weight: 800;
    font-size: 14px;
    pointer-events: none;
}

.map-text-sub {
    fill: rgba(251, 248, 240, 0.85);
    font-size: 12px;
    font-weight: 600;
    pointer-events: none;
}

.map-text-kili {
    fill: var(--clr-aet-orange);
    font-size: 13px;
    font-weight: 700;
    pointer-events: none;
}

.map-side-panel {
    background: rgba(16, 26, 15, 0.75);
    backdrop-filter: blur(16px);
    border-radius: var(--radius-xl);
    padding: 36px 32px;
    border: 1px solid rgba(251, 248, 240, 0.15);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    transition: all 0.35s ease;
}

.panel-category {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: var(--clr-aet-orange);
}

.panel-title {
    font-weight: 700;
    font-family: var(--ff-sans);
    font-size: 1.8rem;
    color: var(--clr-snow-white);
    margin-top: 4px;
}

.panel-body {
    font-size: 0.92rem;
    color: rgba(251, 248, 240, 0.85);
    line-height: 1.65;
    margin: 20px 0;
}

.panel-btn {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--clr-aet-orange);
}

/* ---- CORRIDORS ---- */
.corridors-section {
    background: #121C11;
    color: var(--clr-snow-white);
    padding: 100px 32px;
}

.corridors-container {
    max-width: 1380px;
    margin: 0 auto;
}

.corridors-horizontal-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.corridor-card {
    background: rgba(251, 248, 240, 0.04);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    border: 1px solid rgba(251, 248, 240, 0.08);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.corridor-num {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--clr-aet-orange);
}

.corridor-card h3 {
    font-weight: 700;
    font-family: var(--ff-sans);
    font-size: 1.5rem;
    line-height: 1.2;
}

.corridor-card p {
    font-size: 0.88rem;
    color: rgba(251, 248, 240, 0.75);
}

.corridor-species {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--clr-amboseli-gold);
    margin-top: auto;
}

/* ---- CAMPAIGN & SLIDER ---- */
.campaign-section {
    background: #2A3D27;
    color: var(--clr-snow-white);
    padding: 100px 32px;
}

.campaign-container {
    max-width: 1380px;
    margin: 0 auto;
}

.campaign-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 48px;
    align-items: center;
}

.campaign-desc {
    font-size: 1rem;
    color: rgba(251, 248, 240, 0.85);
    line-height: 1.65;
    margin-bottom: 24px;
}

.campaign-meta {
    font-size: 0.88rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: rgba(251, 248, 240, 0.75);
}

.slider-component {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-elevated);
}

.slider-img-container {
    position: relative;
    height: 420px;
    overflow: hidden;
}

.img-after {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-before-wrap {
    position: absolute;
    inset: 0;
    width: 50%;
    overflow: hidden;
}

.img-before {
    width: 200%;
    height: 100%;
    object-fit: cover;
}

.slider-handle-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: ew-resize;
    z-index: 30;
}

.slider-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    background: #FFF;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 20;
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--clr-deep-green);
    color: var(--clr-snow-white);
    font-size: 0.82rem;
    font-weight: 700;
}

/* ---- COMMUNITY CONSERVATION ---- */
.community-section {
    background: var(--clr-savannah-sand);
    color: var(--clr-deep-green);
    padding: 100px 32px;
}

.community-container {
    max-width: 1380px;
    margin: 0 auto;
}

.community-hero-card {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    background: var(--clr-snow-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    padding: 40px;
    box-shadow: var(--shadow-soft);
}

.comm-img-col {
    height: 420px;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.comm-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comm-tag {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: var(--clr-forest-green);
}

.comm-title {
    font-weight: 700;
    font-family: var(--ff-sans);
    font-size: 2.2rem;
    line-height: 1.15;
    margin: 12px 0 16px;
}

.comm-lead {
    font-size: 0.98rem;
    color: var(--clr-charcoal);
    line-height: 1.65;
    margin-bottom: 28px;
}

/* ---- CONSERVANCIES ---- */
.conservancies-section {
    background: var(--clr-deep-green);
    color: var(--clr-snow-white);
    padding: 100px 32px;
}

.conservancies-container {
    max-width: 1380px;
    margin: 0 auto;
}

.conservancy-cards-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.conservancy-card {
    position: relative;
    height: 440px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 32px;
}

.card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-body {
    position: relative;
    z-index: 10;
    background: linear-gradient(to top, rgba(24, 36, 23, 0.95) 0%, rgba(24, 36, 23, 0.6) 70%, transparent 100%);
    margin: -32px;
    padding: 32px;
}

.card-badge {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: var(--clr-aet-orange);
}

.conservancy-card h4 {
    font-weight: 700;
    font-family: var(--ff-sans);
    font-size: 1.8rem;
    margin: 6px 0;
}

.conservancy-card p {
    font-size: 0.88rem;
    color: rgba(251, 248, 240, 0.85);
    margin-bottom: 16px;
}

.card-stats {
    display: flex;
    gap: 16px;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(251, 248, 240, 0.7);
}

/* ---- FILM ---- */
.film-section {
    background: #0D140D;
    color: var(--clr-snow-white);
    padding: 100px 32px;
}

.film-container {
    max-width: 1380px;
    margin: 0 auto;
}

.film-poster-box {
    position: relative;
    height: 520px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 72px;
}

.film-poster-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.film-overlay-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(13, 20, 13, 0.92) 0%, rgba(13, 20, 13, 0.5) 60%, transparent 100%);
}

.film-content {
    position: relative;
    z-index: 10;
    max-width: 600px;
}

.film-title {
    font-weight: 700;
    font-family: var(--ff-sans);
    font-size: 3.4rem;
    margin: 8px 0 16px;
}

.film-desc {
    font-size: 1rem;
    color: rgba(251, 248, 240, 0.85);
    margin-bottom: 32px;
}

.film-play-btn {
    height: 54px;
    padding: 0 32px;
    background: var(--clr-aet-orange);
    color: var(--clr-deep-green);
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

/* ---- RESEARCH ---- */
.research-section {
    background: #1E2E1C;
    color: var(--clr-snow-white);
    padding: 100px 32px;
}

.research-container {
    max-width: 1380px;
    margin: 0 auto;
}

.doc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.doc-card {
    background: rgba(251, 248, 240, 0.06);
    border-radius: var(--radius-lg);
    padding: 36px 28px;
    border: 1px solid rgba(251, 248, 240, 0.1);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.doc-badge {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--clr-aet-orange);
}

.doc-card h3 {
    font-weight: 700;
    font-family: var(--ff-sans);
    font-size: 1.7rem;
    margin: 10px 0;
    color: var(--clr-snow-white);
}

.doc-card p {
    font-size: 0.9rem;
    color: rgba(251, 248, 240, 0.75);
    margin-bottom: 20px;
}

.doc-meta {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(251, 248, 240, 0.5);
    margin-bottom: 20px;
}

.doc-btn {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--clr-aet-orange);
}

/* ---- STORIES ---- */
.stories-section {
    background: var(--clr-savannah-sand);
    color: var(--clr-deep-green);
    padding: 100px 32px;
}

.stories-container {
    max-width: 1380px;
    margin: 0 auto;
}

.stories-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
}

.story-main-card {
    background: var(--clr-snow-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.story-img {
    height: 360px;
    width: 100%;
    object-fit: cover;
}

.story-content {
    padding: 36px;
}

.story-cat {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: var(--clr-forest-green);
}

.story-main-card h3 {
    font-weight: 700;
    font-family: var(--ff-sans);
    font-size: 2.2rem;
    line-height: 1.18;
    margin: 10px 0;
}

.story-main-card p {
    font-size: 0.95rem;
    color: var(--clr-charcoal);
    margin-bottom: 20px;
}

.story-link {
    font-weight: 700;
    color: var(--clr-forest-green);
}

.stories-side-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.story-sub-card {
    background: var(--clr-snow-white);
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: var(--shadow-soft);
}

.story-sub-card h4 {
    font-weight: 700;
    font-family: var(--ff-sans);
    font-size: 1.5rem;
    margin: 6px 0;
}

.story-sub-card p {
    font-size: 0.88rem;
    color: var(--clr-charcoal);
}

/* ---- VISIT ---- */
.visit-section {
    background: linear-gradient(135deg, #FEE79A 0%, #F7BE38 50%, #ED9015 100%);
    padding: 100px 32px;
    border-top: 2px solid var(--clr-amboseli-gold);
    border-bottom: 2px solid var(--clr-amboseli-gold);
}

.visit-container {
    max-width: 1380px;
    margin: 0 auto;
}

.visit-card {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    padding: 80px;
}

.visit-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.visit-content {
    position: relative;
    z-index: 10;
    max-width: 640px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 20px 48px rgba(27, 56, 30, 0.12);
    margin: -80px;
    padding: 70px 60px;
}

.visit-content h2 {
    color: var(--clr-brand-blue) !important;
}

.visit-content p {
    font-size: 1.05rem;
    color: var(--clr-text-secondary) !important;
    margin: 16px 0 32px;
    line-height: 1.65;
}

/* ---- PARTNERS ---- */
.partners-section {
    background: #FAF7F2;
    background: linear-gradient(180deg, #FDFBF8 0%, #F6F2EA 100%);
    color: #1C231F;
    padding: 90px 32px;
    border-top: 1px solid #EAE3D6;
    border-bottom: 1px solid #EAE3D6;
}

.partners-container {
    max-width: 1380px;
    margin: 0 auto;
}

.partner-category-group h4 {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--clr-forest-green);
    margin-bottom: 20px;
    text-transform: uppercase;
}

.partner-logos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.partner-logo-item {
    background: var(--clr-snow-white);
    border-radius: var(--radius-lg);
    padding: 24px;
    border: 1px solid rgba(36, 71, 36, 0.08);
    box-shadow: 0 4px 20px rgba(36, 71, 36, 0.02);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.partner-logo-item:hover {
    background: var(--clr-snow-white);
    border-color: rgba(250, 185, 24, 0.35);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(36, 71, 36, 0.08), 0 0 20px rgba(250, 185, 24, 0.05);
}

.partner-logo-img-wrapper {
    height: 85px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.partner-logo-img {
    max-height: 100%;
    max-width: 95%;
    object-fit: contain;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.partner-logo-item.ate-logo .partner-logo-img {
    max-width: 100%;
    transform: scale(1.40);
}

.partner-logo-item.ate-logo:hover .partner-logo-img {
    transform: scale(1.48);
}

/* ---- SUPPORT CTA ---- */
.support-section {
    background: var(--clr-deep-green);
    color: var(--clr-snow-white);
    padding: 100px 32px;
}

.support-container {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.support-title {
    font-weight: 700;
    font-family: var(--ff-sans);
    font-size: clamp(40px, 4vw, 64px);
    margin: 12px 0 20px;
}

.support-desc {
    font-size: 1.1rem;
    color: rgba(251, 248, 240, 0.85);
    margin-bottom: 40px;
}

.support-cta-group {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-support-large {
    height: 56px;
    padding: 0 36px;
    background: var(--clr-aet-orange);
    color: var(--clr-deep-green);
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
}

.btn-outline-white {
    height: 56px;
    padding: 0 36px;
    border: 1.5px solid rgba(251, 248, 240, 0.4);
    color: var(--clr-snow-white);
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
}

/* ---- FOOTER ---- */
.site-footer {
    background: #10190F;
    color: var(--clr-snow-white);
    padding: 80px 32px 40px;
    border-top: 1px solid rgba(251, 248, 240, 0.1);
}

.footer-container {
    max-width: 1380px;
    margin: 0 auto;
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 48px;
    margin-bottom: 48px;
}

.footer-logo-img {
    height: 50px;
    margin-bottom: 16px;
}

.footer-tagline {
    font-size: 0.88rem;
    color: rgba(251, 248, 240, 0.7);
    max-width: 320px;
}

.footer-col-title {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-aet-orange);
    margin-bottom: 16px;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.88rem;
}

.footer-links a {
    color: rgba(251, 248, 240, 0.8);
}

.footer-address {
    font-size: 0.88rem;
    color: rgba(251, 248, 240, 0.7);
    line-height: 1.6;
}

.footer-horizon-line svg {
    width: 100%;
    height: 40px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    font-size: 0.82rem;
    color: rgba(251, 248, 240, 0.6);
}

.footer-legal {
    display: flex;
    gap: 24px;
}

/* ---- RESPONSIVE ---- */
@media (max-width:1024px) {
    .hero-container {
        padding-bottom: 60px;
    }

    .hero-lower-bar {
        left: 32px;
        right: 32px;
    }

    .manifesto-grid,
    .intro-mosaic-grid,
    .programme-row,
    .map-interactive-wrapper,
    .campaign-grid,
    .community-hero-card,
    .stories-grid {
        grid-template-columns: 1fr;
    }

    .programme-row.row-reverse .row-media {
        grid-column: 1;
    }

    .programme-row.row-reverse .row-content {
        grid-column: 1;
        grid-row: 2;
    }

    .impact-grid,
    .corridors-horizontal-track,
    .conservancy-cards-track,
    .doc-grid,
    .partner-logos-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-top {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:768px) {
    .hero-section {
        min-height: 780px;
    }

    .hero-headline {
        font-size: clamp(46px, 11vw, 62px);
    }

    .hero-container {
        padding-bottom: 48px;
    }

    .hero-lower-bar {
        left: 24px;
        right: 24px;
    }

    .impact-grid,
    .corridors-horizontal-track,
    .conservancy-cards-track,
    .doc-grid,
    .partner-logos-grid {
        grid-template-columns: 1fr;
    }

    .footer-top {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .support-cta-group {
        flex-direction: column;
        align-items: center;
    }
}

/* Footer Credit & Outerface Link */
.footer-credit {
    font-size: 0.82rem;
    color: rgba(226, 218, 204, 0.7);
    display: flex;
    align-items: center;
    gap: 6px;
}

.outerface-link {
    color: var(--clr-aet-orange);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-decoration: none;
    position: relative;
    padding-bottom: 2px;
    transition: color 0.3s ease, transform 0.3s ease;
}

.outerface-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--clr-aet-orange);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.outerface-link:hover {
    color: #FAB918;
    transform: translateY(-1px);
}

.outerface-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* ---- CINEMATIC KEYFRAME ANIMATIONS ---- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes heroMediaZoom {
    from {
        transform: scale(1.08);
    }

    to {
        transform: scale(1.02);
    }
}

@keyframes shimmer {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(250, 185, 24, 0.4);
    }

    50% {
        box-shadow: 0 0 20px 8px rgba(250, 185, 24, 0.15);
    }
}

@keyframes floatLine {

    0%,
    100% {
        width: 36px;
    }

    50% {
        width: 52px;
    }
}

/* Scroll Reveal System */
.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-36px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(36px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Staggered children delays */
.reveal-stagger>*:nth-child(1) {
    transition-delay: 0s;
}

.reveal-stagger>*:nth-child(2) {
    transition-delay: 0.12s;
}

.reveal-stagger>*:nth-child(3) {
    transition-delay: 0.24s;
}

.reveal-stagger>*:nth-child(4) {
    transition-delay: 0.36s;
}

.reveal-stagger>*:nth-child(5) {
    transition-delay: 0.48s;
}

.reveal-stagger>*:nth-child(6) {
    transition-delay: 0.6s;
}

/* Hero entrance animations */
.hero-media {
    animation: heroMediaZoom 12s ease-out forwards;
}

.hero-eyebrow {
    animation: fadeInUp 1s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-headline {
    animation: fadeInUp 1.2s 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-lead {
    animation: fadeInUp 1s 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-actions {
    animation: fadeInUp 1s 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.aemp-reference {
    animation: fadeInUp 0.8s 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-lower-bar {
    animation: fadeInUp 0.8s 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.eyebrow-line {
    animation: floatLine 3s ease-in-out infinite;
}

/* Navbar entrance */
.header-shell {
    animation: fadeInUp 0.9s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Hover cinematic interactions */
.mosaic-main-card:hover .mosaic-img,
.mosaic-sub-card:hover .mosaic-img,
.conservancy-card:hover .card-bg,
.film-poster-box:hover .film-poster-img,
.story-main-card:hover .story-img,
.visit-card:hover .visit-bg {
    transform: scale(1.04);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.mosaic-img,
.card-bg,
.film-poster-img,
.story-img,
.visit-bg {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.row-media:hover .row-img {
    transform: scale(1.04);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.row-img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary-hero:hover svg,
.btn-secondary-hero:hover svg,
.row-link:hover,
.story-link:hover,
.fact-link:hover,
.doc-btn:hover,
.panel-btn:hover,
.featured-link:hover {
    transform: translateX(4px);
    transition: transform 0.25s ease;
}

/* Support button pulse */
.btn-support {
    animation: pulseGlow 3s ease-in-out infinite;
}

/* Corridor card hover */
.corridor-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.corridor-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(250, 185, 24, 0.12);
}

/* Doc card hover */
.doc-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.doc-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-elevated);
}

/* Film play button pulse */
.film-play-btn {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.film-play-btn:hover {
    transform: scale(1.06);
    box-shadow: var(--shadow-orange);
}

/* Story sub cards hover */
.story-sub-card {
    transition: transform 0.3s ease;
}

.story-sub-card:hover {
    transform: translateY(-4px);
}

/* Impact number counter shimmer */
.impact-num {
    animation: shimmer 3s ease-in-out infinite;
}

/* Partner logo hover */
.partner-logo-item {
    transition: transform 0.3s ease, background 0.3s ease;
}

.partner-logo-item:hover {
    transform: translateY(-3px);
    background: rgba(36, 71, 36, 0.06);
}

/* ==========================================
   CONSERVATION BLOGS SECTION (NATURAL SAFARI TINT - NO BLUE)
   ========================================== */
.blogs-section {
    background: linear-gradient(180deg, #FAF7F2 0%, #F5EFE6 50%, #FAF6EE 100%);
    color: var(--clr-text-primary);
    padding: 110px 32px;
    position: relative;
    border-top: 1px solid rgba(27, 56, 30, 0.08);
}

.blogs-container {
    max-width: 1380px;
    margin: 0 auto;
}

.blogs-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 60px;
}

.blogs-header h2 {
    color: var(--clr-brand-blue) !important;
}

.blogs-header .section-subtitle {
    color: var(--clr-text-secondary) !important;
}

.blogs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

@media (max-width: 992px) {
    .blogs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .blogs-grid {
        grid-template-columns: 1fr;
    }
}

.blog-card {
    background: #FAF8F5;
    border: 1px solid var(--clr-border-beige);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
    box-shadow: 0 4px 20px rgba(27, 56, 30, 0.05);
}

.blog-card:hover {
    transform: translateY(-6px);
    border-color: var(--clr-nature-green);
    box-shadow: 0 16px 36px rgba(27, 56, 30, 0.12);
}

.blog-card-body h3,
.blog-card-body h4,
.blog-card-title {
    color: var(--clr-text-primary) !important;
}

.blog-card-body p,
.blog-card-desc {
    color: var(--clr-text-secondary) !important;
}

.blog-img-box {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.blog-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.blog-card:hover .blog-img {
    transform: scale(1.06);
}

.blog-category-pill {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(20, 31, 19, 0.85);
    border: 1px solid rgba(250, 185, 24, 0.3);
    color: var(--clr-aet-orange);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    backdrop-filter: blur(8px);
}

.blog-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.76rem;
    color: rgba(226, 218, 204, 0.65);
    margin-bottom: 12px;
}

.meta-dot {
    color: var(--clr-aet-orange);
}

.blog-title {
    font-weight: 700;
    font-family: var(--ff-sans);
    font-size: 1.25rem;
    line-height: 1.35;
    margin-bottom: 12px;
}

.blog-title a {
    color: var(--clr-snow-white);
    transition: color 0.25s ease;
}

.blog-card:hover .blog-title a {
    color: var(--clr-aet-orange);
}

.blog-excerpt {
    font-size: 0.88rem;
    color: rgba(226, 218, 204, 0.8);
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1;
}

.blog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid rgba(251, 248, 240, 0.1);
}

.blog-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.author-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(250, 185, 24, 0.15);
    border: 1px solid rgba(250, 185, 24, 0.3);
    color: var(--clr-aet-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
}

.author-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(226, 218, 204, 0.9);
}

.blog-read-more {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--clr-aet-orange);
    transition: transform 0.25s ease;
}

.blog-card:hover .blog-read-more {
    transform: translateX(4px);
}

@media (prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================
   PREVIEW MODE WARNING TOAST NOTIFICATION
   ========================================== */
.preview-toast {
    position: fixed;
    top: 96px;
    left: 50%;
    transform: translateX(-50%) translateY(-16px) scale(0.96);
    background: rgba(16, 25, 15, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(212, 175, 55, 0.5);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(212, 175, 55, 0.2);
    color: #FBF8F0;
    padding: 14px 28px;
    border-radius: 40px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
    pointer-events: none;
}

.preview-toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
}

.preview-toast-icon {
    color: var(--clr-aet-orange, #FAB918);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.preview-toast-text strong {
    color: var(--clr-aet-orange, #FAB918);
    font-weight: 700;
}

/* ==========================================
   PREMIUM GALLERY SYSTEM & LIGHTBOX MODAL
   ========================================== */

.gallery-section {
    padding: 100px 32px;
    background: #0E160D;
    color: var(--clr-snow-white);
    position: relative;
}

.gallery-filters-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 36px 0 48px;
}

.gallery-filter-btn {
    background: rgba(251, 248, 240, 0.05);
    border: 1px solid rgba(251, 248, 240, 0.12);
    color: rgba(251, 248, 240, 0.75);
    padding: 10px 22px;
    border-radius: 30px;
    font-family: var(--ff-sans);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-filter-btn:hover {
    background: rgba(212, 175, 55, 0.15);
    border-color: rgba(212, 175, 55, 0.4);
    color: var(--clr-snow-white);
}

.gallery-filter-btn.active {
    background: var(--clr-aet-orange);
    border-color: var(--clr-aet-orange);
    color: #10190F;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.3);
}

/* Mosaic Grid Layout */
.gallery-mosaic-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 260px;
    gap: 20px;
    max-width: 1300px;
    margin: 0 auto;
}

.gallery-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    background: rgba(251, 248, 240, 0.03);
    border: 1px solid rgba(251, 248, 240, 0.08);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, visibility 0.35s ease;
}

.gallery-card.card-featured {
    grid-column: span 2;
    grid-row: span 2;
}

.gallery-card.card-tall {
    grid-row: span 2;
}

.gallery-card.card-wide {
    grid-column: span 2;
}

.gallery-card.is-hidden {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.92);
    position: absolute;
    pointer-events: none;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.gallery-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 20px rgba(212, 175, 55, 0.2);
    border-color: rgba(212, 175, 55, 0.4);
}

.gallery-card:hover .gallery-card-img {
    transform: scale(1.06);
}

.gallery-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(14, 22, 13, 0.95) 0%, rgba(14, 22, 13, 0.4) 50%, rgba(14, 22, 13, 0.1) 100%);
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0.9;
    transition: opacity 0.35s ease;
}

.gallery-card:hover .gallery-card-overlay {
    opacity: 1;
}

.gallery-badge {
    align-self: flex-start;
    background: rgba(212, 175, 55, 0.2);
    border: 1px solid rgba(212, 175, 55, 0.5);
    color: var(--clr-aet-orange);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    margin-bottom: auto;
}

.gallery-card-title {
    font-weight: 700;
    font-family: var(--ff-sans);
    font-size: 1.15rem;
    color: var(--clr-snow-white);
    margin: 8px 0 4px;
    line-height: 1.25;
}

.gallery-card.card-featured .gallery-card-title {
    font-size: 1.6rem;
}

.gallery-card-caption {
    font-size: 0.82rem;
    color: rgba(251, 248, 240, 0.75);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gallery-expand-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(14, 22, 13, 0.7);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: var(--clr-aet-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-card:hover .gallery-expand-icon {
    opacity: 1;
    transform: scale(1);
}

/* Lightbox Modal System */
.gallery-lightbox-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(10, 15, 9, 0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease;
}

.gallery-lightbox-modal.is-active {
    opacity: 1;
    visibility: visible;
}

.lightbox-close-btn {
    position: absolute;
    top: 28px;
    right: 32px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(251, 248, 240, 0.08);
    border: 1px solid rgba(251, 248, 240, 0.2);
    color: var(--clr-snow-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    z-index: 10;
}

.lightbox-close-btn:hover {
    background: var(--clr-aet-orange);
    color: #10190F;
    transform: rotate(90deg);
}

.lightbox-stage {
    max-width: 1000px;
    width: 100%;
    height: 75vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.lightbox-img {
    max-width: 100%;
    max-height: 80%;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(212, 175, 55, 0.15);
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.lightbox-meta {
    margin-top: 20px;
    text-align: center;
    max-width: 680px;
}

.lightbox-tag {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--clr-aet-orange);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.lightbox-title {
    font-weight: 700;
    font-family: var(--ff-sans);
    font-size: 1.5rem;
    color: var(--clr-snow-white);
    margin: 6px 0 8px;
}

.lightbox-desc {
    font-size: 0.9rem;
    color: rgba(251, 248, 240, 0.8);
    line-height: 1.5;
}

.lightbox-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(251, 248, 240, 0.08);
    border: 1px solid rgba(251, 248, 240, 0.2);
    color: var(--clr-snow-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    z-index: 10;
}

.lightbox-nav-btn:hover {
    background: var(--clr-aet-orange);
    color: #10190F;
}

.lightbox-nav-prev {
    left: 20px;
}

.lightbox-nav-next {
    right: 20px;
}

@media (max-width: 1024px) {
    .gallery-mosaic-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 240px;
    }

    .gallery-card.card-featured,
    .gallery-card.card-wide {
        grid-column: span 2;
    }
}

@media (max-width: 640px) {
    .gallery-mosaic-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 220px;
    }

    .gallery-card.card-featured,
    .gallery-card.card-wide,
    .gallery-card.card-tall {
        grid-column: span 1;
        grid-row: span 1;
    }

    .lightbox-nav-btn {
        width: 40px;
        height: 40px;
    }

    .lightbox-nav-prev {
        left: 8px;
    }

    .lightbox-nav-next {
        right: 8px;
    }
}

/* ==========================================================
   2026 UPDATES — NEW COMPONENT STYLES
   ========================================================== */

/* ---- SECTION TITLE POPPINS OVERRIDE ---- */
/* Replaces all old serif section-title-serif with Poppins weight 700 */
.section-title-serif {
    font-family: var(--ff-sans) !important;
    font-weight: 700 !important;
    font-size: clamp(32px, 3.2vw, 50px);
    line-height: 1.15;
    margin-bottom: 40px;
}

.hero-headline {
    font-family: var(--ff-sans) !important;
    font-weight: 800 !important;
}

.section-badge {
    font-family: var(--ff-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--clr-aet-green);
    margin-bottom: 12px;
    text-transform: uppercase;
}

.section-badge.text-orange {
    color: var(--clr-aet-orange) !important;
}

/* ---- AMBOSELI AT A GLANCE ---- */
.glance-section {
    background: #ffffff;
    color: var(--clr-dark-charcoal);
    padding: 110px 32px;
    position: relative;
    overflow: hidden;
}

.glance-container {
    max-width: 1380px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.glance-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 64px;
}

.glance-header h2 {
    font-family: var(--ff-sans);
    font-weight: 700;
    font-size: clamp(30px, 3.2vw, 48px);
    color: var(--clr-aet-green);
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}

.glance-header p {
    font-size: 1.08rem;
    color: rgba(36, 31, 33, 0.75);
    line-height: 1.7;
}

.glance-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.glance-stat {
    padding: 44px 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(36, 71, 36, 0.08);
    box-shadow: 0 8px 30px rgba(36, 71, 36, 0.03);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.glance-stat::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--clr-aet-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
    z-index: 4;
}

.glance-stat:hover {
    transform: translateY(-6px);
    border-color: rgba(36, 71, 36, 0.15);
    box-shadow: 0 16px 40px rgba(36, 71, 36, 0.08);
}

.glance-stat:hover::after {
    transform: scaleX(1);
}

.glance-stat.has-bg {
    border: 1px solid rgba(251, 248, 240, 0.1);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.glance-stat.has-bg:hover {
    border-color: rgba(250, 185, 24, 0.45);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
}

.glance-stat-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}

.glance-stat.has-bg:hover .glance-stat-bg {
    transform: scale(1.08);
}

.glance-stat-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(9, 18, 9, 0.35) 0%, rgba(6, 10, 5, 0.88) 100%);
    z-index: 2;
    transition: background 0.4s ease;
}

.glance-stat.has-bg:hover .glance-stat-overlay {
    background: linear-gradient(180deg, rgba(250, 185, 24, 0.15) 0%, rgba(6, 10, 5, 0.94) 100%);
}

.glance-stat-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    gap: 16px;
}

.glance-stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.glance-unit {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: var(--clr-aet-green);
    text-transform: uppercase;
}

.glance-stat.has-bg .glance-unit {
    color: var(--clr-aet-orange);
}

.stat-card-icon {
    color: var(--clr-aet-green);
    opacity: 0.4;
    transition: all 0.35s ease;
}

.glance-stat.has-bg .stat-card-icon {
    color: var(--clr-aet-orange);
    opacity: 0.6;
}

.glance-stat:hover .stat-card-icon {
    opacity: 0.9;
    color: var(--clr-aet-orange);
    transform: scale(1.1);
}

.glance-stat.has-bg:hover .stat-card-icon {
    color: #ffffff;
    opacity: 1;
}

.glance-num-wrap {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.glance-num {
    font-family: var(--ff-sans);
    font-weight: 800;
    font-size: clamp(38px, 4vw, 56px);
    color: var(--clr-aet-green);
    line-height: 1;
}

.glance-stat.has-bg .glance-num {
    color: #ffffff;
}

.glance-stat.has-bg:hover .glance-num {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

.glance-suffix {
    font-family: var(--ff-sans);
    font-weight: 800;
    font-size: 2.2rem;
    color: var(--clr-aet-orange);
    line-height: 1;
}

.glance-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--clr-dark-charcoal);
    line-height: 1.45;
}

.glance-stat.has-bg .glance-label {
    color: rgba(255, 255, 255, 0.82);
}

.glance-stat.has-bg:hover .glance-label {
    color: #ffffff;
}

/* ZERO POACHING SHOWCASE */
.glance-stat.zero-poaching-showcase {
    background: linear-gradient(135deg, #0e1e0f 0%, #152d16 100%);
    color: var(--clr-snow-white);
    grid-column: span 2;
    padding: 48px;
    border: 1px solid rgba(250, 185, 24, 0.35);
    box-shadow: 0 20px 50px rgba(14, 30, 15, 0.25), 0 0 35px rgba(250, 185, 24, 0.05);
    justify-content: flex-start;
    display: block;
}

.glance-stat.zero-poaching-showcase::after {
    background: var(--clr-aet-orange);
}

.zero-poaching-glow {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(250, 185, 24, 0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 3;
}

.zero-poaching-inner {
    position: relative;
    z-index: 5;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.zero-poaching-badge {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(250, 185, 24, 0.12);
    border: 1px solid rgba(250, 185, 24, 0.35);
    color: var(--clr-aet-orange);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.zero-poaching-number {
    font-family: var(--ff-serif);
    font-weight: 950;
    font-size: clamp(80px, 9vw, 120px);
    color: var(--clr-aet-orange);
    line-height: 0.85;
    margin-bottom: 12px;
    text-shadow: 0 0 45px rgba(250, 185, 24, 0.25);
}

.zero-poaching-title {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--clr-snow-white);
    margin-bottom: 14px;
}

.zero-poaching-desc {
    font-size: 1.02rem;
    color: rgba(251, 248, 240, 0.88);
    line-height: 1.6;
}

.glance-stat.zero-poaching-showcase:hover {
    border-color: rgba(250, 185, 24, 0.6);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
}

/* SUPPORT CARD */
.glance-stat.support-link-card {
    background: linear-gradient(135deg, #101c0f 0%, #1c321b 100%);
    color: var(--clr-snow-white);
    border: 1px solid rgba(36, 71, 36, 0.3);
    align-items: stretch;
    justify-content: stretch;
    padding: 44px;
}

.support-card-glow {
    position: absolute;
    bottom: -40px;
    left: -40px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(250, 185, 24, 0.08) 0%, transparent 75%);
    pointer-events: none;
    z-index: 3;
}

.support-card-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    position: relative;
    z-index: 5;
}

.support-link-card h3 {
    font-family: var(--ff-serif);
    font-size: 1.55rem;
    line-height: 1.25;
    color: var(--clr-snow-white);
    margin-bottom: 12px;
}

.support-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--clr-aet-orange);
    color: #10190F;
    border: none;
    border-radius: var(--radius-md);
    padding: 14px 28px;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 15px rgba(250, 185, 24, 0.15);
    width: fit-content;
    margin-top: 16px;
    cursor: pointer;
}

.support-card-link:hover {
    background: #FFF;
    color: #10190F;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
}

.support-card-link svg {
    transition: transform 0.3s ease;
}

.support-card-link:hover svg {
    transform: translate(2px, -2px);
}

.glance-source {
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 15px rgba(250, 185, 24, 0.15);
    width: fit-content;
}

.support-card-link:hover {
    background: #FFF;
    color: #10190F;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
}

.support-card-link svg {
    transition: transform 0.3s ease;
}

.support-card-link:hover svg {
    transform: translate(2px, -2px);
}

.glance-source {
    margin-top: 24px;
    text-align: center;
    font-size: 0.8rem;
    color: rgba(36, 31, 33, 0.5);
}

/* ---- AET IMPACT MODEL ---- */
.impact-model-section {
    background: var(--clr-aet-green);
    color: var(--clr-snow-white);
    padding: 110px 32px;
    position: relative;
    overflow: hidden;
}

.impact-model-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 60% 40%, rgba(107, 172, 205, 0.12) 0%, transparent 70%);
    pointer-events: none;
}

.impact-model-container {
    max-width: 1280px;
    margin: 0 auto;
}

.impact-model-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 72px;
}

.impact-model-header h2 {
    font-family: var(--ff-sans);
    font-weight: 700;
    font-size: clamp(30px, 3vw, 46px);
    margin-bottom: 16px;
}

.impact-model-header p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
}

.impact-model-diagram {
    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
}

.impact-nodes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    flex: 1;
}

.impact-node {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

.impact-node::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--clr-aet-orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.impact-node:hover,
.impact-node.is-visible {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(250, 185, 24, 0.5);
    transform: translateY(-4px);
}

.impact-node:hover::before,
.impact-node.is-visible::before {
    transform: scaleX(1);
}

.impact-node-num {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: var(--clr-aet-orange);
    margin-bottom: 10px;
    display: block;
}

.impact-node h3 {
    font-family: var(--ff-sans);
    font-weight: 700;
    font-size: 1.4rem;
    margin-bottom: 10px;
}

.impact-node p {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.6;
}

.impact-connector {
    flex-shrink: 0;
    width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.connector-line {
    width: 2px;
    height: 120px;
    background: linear-gradient(to bottom, transparent, var(--clr-aet-orange), transparent);
    position: relative;
}

.connector-arrow {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 10px solid var(--clr-aet-orange);
}

.impact-outcomes {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.impact-outcome {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(250, 185, 24, 0.4);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    text-align: center;
    position: relative;
}

.outcome-icon {
    font-size: 2rem;
    margin-bottom: 12px;
    display: block;
}

.outcome-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--clr-aet-orange);
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

.impact-outcome h4 {
    font-family: var(--ff-sans);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.3;
}

/* ---- VALUES SECTION ---- */
.values-section {
    background: var(--clr-warm-off-white);
    padding: 100px 32px;
    color: var(--clr-dark-charcoal);
}

.values-container {
    max-width: 1280px;
    margin: 0 auto;
}

.values-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 64px;
}

.values-header h2 {
    font-family: var(--ff-sans);
    font-weight: 700;
    font-size: clamp(30px, 3vw, 44px);
    color: var(--clr-aet-green);
    margin-bottom: 16px;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.value-card {
    background: var(--clr-snow-white);
    border-radius: var(--radius-lg);
    padding: 36px 24px;
    border: 1px solid rgba(36, 71, 36, 0.08);
    border-top: 4px solid var(--clr-aet-green);
    transition: all 0.3s ease;
    text-align: center;
}

.value-card:nth-child(2) {
    border-top-color: var(--clr-nature-green);
}

.value-card:nth-child(3) {
    border-top-color: var(--clr-aet-orange);
}

.value-card:nth-child(4) {
    border-top-color: var(--clr-olive);
}

.value-card:nth-child(5) {
    border-top-color: var(--clr-earth-brown);
}

.value-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(36, 71, 36, 0.12);
}

.value-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(36, 71, 36, 0.06);
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.value-name {
    font-family: var(--ff-sans);
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-aet-green);
    margin-bottom: 12px;
    display: block;
}

.value-desc {
    font-size: 0.86rem;
    color: rgba(36, 31, 33, 0.7);
    line-height: 1.6;
}

/* ---- ECONOMIC IMPACT SECTION ---- */
.economic-section {
    background: var(--clr-deep-green);
    color: var(--clr-snow-white);
    padding: 110px 32px;
    position: relative;
}

.economic-container {
    max-width: 1280px;
    margin: 0 auto;
}

.economic-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 16px;
}

.economic-header h2 {
    font-family: var(--ff-sans);
    font-weight: 700;
    font-size: clamp(28px, 2.8vw, 44px);
    margin-bottom: 16px;
}

.economic-data-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(250, 185, 24, 0.12);
    border: 1px solid rgba(250, 185, 24, 0.3);
    color: var(--clr-aet-orange);
    padding: 8px 20px;
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 auto 64px;
    display: flex;
    width: fit-content;
}

.economic-hero-stat {
    text-align: center;
    margin-bottom: 64px;
    padding: 48px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(250, 185, 24, 0.2);
    border-radius: var(--radius-xl);
}

.economic-hero-num {
    font-family: var(--ff-sans);
    font-weight: 800;
    font-size: clamp(52px, 5.5vw, 84px);
    color: var(--clr-aet-orange);
    line-height: 1;
    margin-bottom: 12px;
    display: block;
}

.economic-hero-label {
    font-size: 1.1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

.economic-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.econ-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: 28px 22px;
    transition: all 0.3s ease;
}

.econ-card:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(250, 185, 24, 0.35);
    transform: translateY(-3px);
}

.econ-category {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--clr-amboseli-gold);
    text-transform: uppercase;
    display: block;
    margin-bottom: 12px;
}

.econ-num {
    font-family: var(--ff-sans);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--clr-aet-orange);
    line-height: 1.1;
    margin-bottom: 8px;
    display: block;
}

.econ-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.45;
}

.economic-source {
    text-align: center;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---- STATE OF CONSERVANCIES FEATURE ---- */
.soc-feature-section {
    background: var(--clr-safari-beige-light);
    color: var(--clr-text-primary);
    padding: 100px 32px;
    border-top: 1px solid var(--clr-border-beige);
    border-bottom: 1px solid var(--clr-border-beige);
}

.soc-feature-container {
    max-width: 1280px;
    margin: 0 auto;
}

.soc-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 64px;
    align-items: center;
}

.soc-cover {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(24, 36, 15, 0.25);
    aspect-ratio: 3/4;
    background: var(--clr-aet-green);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.soc-cover-placeholder {
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    padding: 40px;
}

.soc-cover-placeholder h3 {
    font-family: var(--ff-sans);
    font-weight: 800;
    font-size: 1.6rem;
    margin-bottom: 12px;
}

.soc-cover-placeholder p {
    font-size: 0.9rem;
    opacity: 0.75;
}

.soc-report-year {
    display: inline-block;
    background: var(--clr-aet-orange);
    color: var(--clr-dark-charcoal);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    padding: 6px 16px;
    border-radius: var(--radius-full);
    margin-bottom: 28px;
}

.soc-feature-content h2 {
    font-family: var(--ff-sans);
    font-weight: 700;
    font-size: clamp(28px, 2.8vw, 44px);
    color: var(--clr-dark-charcoal);
    line-height: 1.2;
    margin-bottom: 20px;
}

.soc-feature-content p {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(36, 31, 33, 0.85);
    margin-bottom: 36px;
}

.soc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.btn-soc-primary {
    height: 52px;
    padding: 0 28px;
    background: var(--clr-aet-green);
    color: #fff;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-fast);
}

.btn-soc-primary:hover {
    background: #1a3518;
    transform: translateY(-2px);
}

.btn-soc-secondary {
    height: 52px;
    padding: 0 24px;
    border: 2px solid var(--clr-aet-green);
    color: var(--clr-aet-green);
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-fast);
}

.btn-soc-secondary:hover {
    background: rgba(36, 71, 36, 0.08);
    transform: translateY(-2px);
}

/* ---- WILDLIFE SECURITY SECTION ---- */
.wildlife-security-section {
    background: #0e1a0d;
    color: var(--clr-snow-white);
    padding: 100px 32px;
}

.wildlife-security-container {
    max-width: 1280px;
    margin: 0 auto;
}

.zero-poaching-banner {
    background: linear-gradient(135deg, rgba(36, 71, 36, 0.6), rgba(24, 36, 15, 0.8));
    border: 1px solid rgba(250, 185, 24, 0.35);
    border-radius: var(--radius-xl);
    padding: 52px 60px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 48px;
}

.zero-num-large {
    font-family: var(--ff-sans);
    font-weight: 800;
    font-size: clamp(64px, 8vw, 120px);
    color: var(--clr-aet-orange);
    line-height: 1;
    flex-shrink: 0;
}

.zero-poaching-text h3 {
    font-family: var(--ff-sans);
    font-weight: 700;
    font-size: clamp(22px, 2.4vw, 34px);
    margin-bottom: 10px;
}

.zero-poaching-text p {
    font-size: 0.96rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

.zero-poaching-note {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 12px;
    font-style: italic;
}

/* ---- UPDATED NAVBAR — PARTNER WITH US BUTTON ---- */
.btn-partner {
    height: 46px;
    padding: 0 22px;
    background: var(--clr-aet-green);
    color: var(--clr-snow-white);
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition-fast);
}

.btn-partner:hover {
    background: #1a3518;
    transform: translateY(-2px);
}

/* ---- COMPREHENSIVE RESPONSIVE DESIGN: TABLET & MOBILE ---- */

/* Laptop & Tablet (992px – 1200px) */
@media (max-width: 1200px) {

    .programme-row,
    .programme-row.row-reverse {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }
}

/* Tablet & Medium Screen (768px – 991px) */
@media (max-width: 991px) {
    .hero-section {
        padding-top: 105px;
        padding-bottom: 48px;
        min-height: 100vh;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .hero-content,
    .hero-content-slide {
        max-width: 100%;
        width: 100%;
    }

    .hero-headline {
        font-size: clamp(32px, 5.5vw, 52px);
        line-height: 1.12;
    }

    .hero-glass-stats {
        gap: 20px;
        padding: 12px 20px;
    }

    .hero-lower-bar {
        position: relative;
        inset: auto;
        margin-top: 36px;
        padding: 0;
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
    }

    /* Programme Rows Mobile Stack */
    .programme-row,
    .programme-row.row-reverse {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }

    .programme-row.row-reverse .row-media {
        order: -1;
    }

    .row-media {
        height: 320px;
    }

    .glance-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .glance-stat.zero-poaching-showcase,
    .glance-stat.support-link-card {
        grid-column: span 2;
    }

    .impact-model-diagram {
        flex-direction: column;
        gap: 32px;
    }

    .impact-nodes {
        grid-template-columns: 1fr 1fr;
    }

    .impact-connector {
        width: 100%;
        height: 40px;
        flex-direction: row;
    }

    .connector-line {
        width: 120px;
        height: 2px;
    }

    .impact-outcomes {
        flex-direction: row;
        width: 100%;
    }

    .soc-feature-grid {
        grid-template-columns: 1fr;
    }

    .soc-cover {
        max-height: 320px;
        aspect-ratio: 16/9;
    }

    .economic-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .zero-poaching-banner {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 36px 28px;
    }
}

/* Mobile Devices (<= 767px) */
@media (max-width: 767px) {
    .hero-section {
        padding-top: 92px;
        padding-bottom: 36px;
        height: auto;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .hero-content,
    .hero-content-slide {
        max-width: 100%;
        width: 100%;
    }

    .hero-eyebrow {
        font-size: 0.72rem;
        gap: 8px;
        margin-bottom: 14px;
    }

    .eyebrow-line {
        width: 24px;
    }

    .eyebrow-pill {
        font-size: 0.65rem;
        padding: 3px 10px;
    }

    .hero-headline {
        font-size: clamp(26px, 7vw, 38px);
        line-height: 1.15;
        margin-bottom: 14px;
    }

    .hero-lead {
        font-size: 0.92rem;
        line-height: 1.55;
        margin-bottom: 20px;
    }

    .hero-glass-stats {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        padding: 14px 18px;
        margin-bottom: 22px;
    }

    .glass-stat-divider {
        display: none;
    }

    .glass-stat-num {
        font-size: 1.15rem;
    }

    .glass-stat-lbl {
        font-size: 0.68rem;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
        margin-bottom: 18px;
    }

    .btn-primary-hero {
        width: 100%;
        justify-content: center;
        height: 48px;
        font-size: 0.9rem;
    }

    .btn-secondary-hero {
        justify-content: center;
        padding-bottom: 2px;
    }

    .aemp-reference {
        font-size: 0.75rem;
        flex-wrap: wrap;
    }

    .hero-lower-bar {
        position: relative;
        inset: auto;
        margin-top: 24px;
        padding: 0;
        width: 100%;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        text-align: center;
    }
}

/* Small Mobile Phones (<= 480px) */
@media (max-width: 480px) {
    .hero-eyebrow {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .eyebrow-line {
        display: none;
    }

    .hero-headline {
        font-size: clamp(24px, 7.2vw, 32px);
        line-height: 1.16;
    }

    .hero-glass-stats {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 12px 14px;
    }

    .glass-stat-item {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding-bottom: 6px;
    }

    .glass-stat-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .hero-lower-bar {
        font-size: 0.72rem;
        gap: 8px;
    }
}

/* Section Padding Adjustments */
.glance-section,
.impact-model-section,
.work-section,
.economic-section,
.soc-feature-section,
.wildlife-security-section {
    padding: 60px 18px;
}

.glance-grid {
    grid-template-columns: 1fr;
    gap: 16px;
}

.glance-stat {
    padding: 28px 20px;
}

.glance-stat.zero-poaching-showcase,
.glance-stat.support-link-card {
    grid-column: span 1;
    padding: 32px 20px;
}

.glance-num {
    font-size: clamp(32px, 8vw, 44px);
}

.impact-nodes {
    grid-template-columns: 1fr;
}

.impact-outcomes {
    flex-direction: column;
}

.economic-hero-stat {
    padding: 28px 20px;
}

.economic-hero-num {
    font-size: clamp(36px, 9vw, 56px);
}

.economic-grid {
    grid-template-columns: 1fr;
    gap: 12px;
}

.econ-card {
    padding: 20px 18px;
}

.soc-actions {
    flex-direction: column;
    width: 100%;
}

.btn-soc-primary,
.btn-soc-secondary {
    width: 100%;
    justify-content: center;
}

.footer-main {
    grid-template-columns: 1fr;
    gap: 36px;
}

/* ============================================================
   WILDLIFE SECURITY SECTION
   ============================================================ */

.wildlife-security-section {
    background: var(--clr-deep-green);
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.wildlife-security-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../img/rangers work.webp') center/cover no-repeat;
    opacity: 0.15;
    z-index: 0;
}

.wildlife-security-container {
    position: relative;
    z-index: 1;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}

.wildlife-security-left .section-badge {
    color: rgba(250, 185, 24, 0.85);
    margin-bottom: 16px;
}

.wildlife-security-left h2 {
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 700;
    color: var(--clr-snow-white);
    line-height: 1.15;
    margin-bottom: 20px;
}

.wildlife-security-left p {
    font-size: 1.05rem;
    color: rgba(251, 248, 240, 0.8);
    line-height: 1.7;
    margin-bottom: 32px;
}

.zero-poaching-centrepiece {
    background: linear-gradient(135deg, rgba(250, 185, 24, 0.12) 0%, rgba(36, 71, 36, 0.3) 100%);
    border: 1px solid rgba(250, 185, 24, 0.3);
    border-radius: var(--radius-xl);
    padding: 48px 40px;
    text-align: center;
}

.zp-shield {
    width: 56px;
    height: 56px;
    background: rgba(250, 185, 24, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--clr-aet-orange);
}

.zp-number {
    font-size: clamp(72px, 12vw, 96px);
    font-weight: 800;
    color: var(--clr-aet-orange);
    line-height: 1;
    display: block;
    margin-bottom: 8px;
}

.zp-label {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: var(--clr-aet-orange);
    margin-bottom: 16px;
    display: block;
}

.zp-desc {
    font-size: 1.05rem;
    color: rgba(251, 248, 240, 0.9);
    line-height: 1.65;
    font-weight: 500;
}

.wildlife-security-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 32px;
}

.ws-feature {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: 18px;
}

.ws-feature-title {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--clr-aet-orange);
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.ws-feature p {
    font-size: 0.84rem;
    color: rgba(251, 248, 240, 0.75);
    margin-bottom: 0;
}

/* ============================================================
   ADDITIONAL ECONOMIC IMPACT CATEGORIES
   ============================================================ */

.econ-categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 32px;
}

.econ-cat-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: 20px 16px;
    transition: var(--transition-fast);
}

.econ-cat-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.econ-cat-icon {
    font-size: 1.4rem;
    display: block;
    margin-bottom: 10px;
}

.econ-cat-value {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--clr-aet-orange);
    margin-bottom: 4px;
}

.econ-cat-label {
    font-size: 0.78rem;
    color: rgba(251, 248, 240, 0.7);
    line-height: 1.4;
}

/* ============================================================
   RESPONSIVE: WILDLIFE SECURITY + NEW MEGA-MENUS
   ============================================================ */

@media (max-width: 1180px) {
    .dropdown-menu--programmes {
        width: 760px;
    }

    .dropdown-inner--programmes {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .wildlife-security-container {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}

@media (max-width: 768px) {
    .wildlife-security-section {
        padding: 64px 0;
    }

    .wildlife-security-container {
        padding: 0 24px;
    }

    .wildlife-security-features {
        grid-template-columns: 1fr;
    }

    .econ-categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .zero-poaching-centrepiece {
        padding: 36px 24px;
    }
}

@media (max-width: 480px) {
    .econ-categories-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   LIVING LANDSCAPE, HERITAGE & INVESTMENT SECTIONS
   ============================================================ */
.living-landscape-section {
    position: relative;
    padding: 140px 24px;
    text-align: center;
    color: #fff;
    overflow: hidden;
}

.landscape-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.landscape-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 30, 15, 0.85) 0%, rgba(36, 71, 36, 0.5) 100%);
    z-index: 1;
}

.landscape-container {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.landscape-container .section-title-serif {
    font-size: clamp(2.5rem, 5vw, 4rem);
    margin: 20px 0 30px;
}

.landscape-desc {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(251, 248, 240, 0.9);
    margin-bottom: 40px;
}

.heritage-section {
    background: var(--clr-snow-white);
    padding: 100px 24px;
    color: var(--clr-deep-green);
}

.heritage-container {
    max-width: 1300px;
    margin: 0 auto;
}

.heritage-intro .section-badge {
    color: var(--clr-aet-orange);
}

.heritage-intro .section-title-serif {
    color: var(--clr-deep-green);
    margin-bottom: 40px;
}

.heritage-chapters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.heritage-chapter {
    padding: 30px;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-top: 4px solid var(--clr-aet-orange);
}

.chapter-num {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--clr-nature-green);
    margin-bottom: 15px;
    display: block;
}

.heritage-chapter h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
}

.heritage-chapter p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
}

.investment-section {
    padding: 100px 24px;
    background: var(--clr-safari-beige);
    color: var(--clr-text-primary);
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--clr-border-beige);
    border-bottom: 1px solid var(--clr-border-beige);
}

.investment-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../img/Copy of _DSC8965.jpg') center/cover;
    opacity: 0.07;
}

.investment-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.investment-content h2 {
    color: var(--clr-brand-blue) !important;
}

.investment-content p {
    line-height: 1.7;
    margin: 20px 0 40px;
    color: var(--clr-text-secondary) !important;
}

@media (max-width: 900px) {
    .heritage-chapters {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .heritage-chapters {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   EXTRACTED SECTION & COMPONENT STYLES
   ========================================== */

.impact-stat:hover {
    border-top-color: var(--clr-amboseli-gold) !important;
    transform: translateY(-10px);
}

.impact-stat:hover p {
    color: rgba(255, 255, 255, 0.9) !important;
}

@media(max-width: 900px) {
    .glance-section-v7 {
        padding: 100px 0 !important;
    }

    .glance-section-v7 .container {
        grid-template-columns: 1fr !important;
        gap: 80px !important;
    }

    .glance-section-v7 .impact-grid {
        grid-template-columns: 1fr !important;
        gap: 60px !important;
    }
}

.prog-card-v3:hover .prog-bg-img {
    transform: scale(1.08);
}

.prog-card-v3:hover .prog-explore-btn {
    color: var(--clr-amboseli-gold) !important;
    gap: 14px;
}

@media(max-width: 1000px) {
    .programmes-cinematic-grid {
        grid-template-columns: 1fr !important;
    }

    .prog-card-v3 {
        min-height: 450px !important;
    }
}

.doc-card:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    transform: translateX(0px) !important;
    cursor: pointer;
}

.doc-card:hover .hover-bar-pubs {
    width: 8px !important;
}

.doc-card:hover .dl-circ {
    background: #fff !important;
    color: #000 !important;
    transform: translateY(-5px);
}

@media(max-width: 1100px) {
    .research-section-v3 .container>div {
        grid-template-columns: 1fr !important;
    }

    .pubs-sticky {
        position: relative !important;
        top: 0 !important;
        margin-bottom: 40px;
    }

    .doc-card {
        transform: none !important;
        flex-direction: column;
        text-align: center;
    }

    .doc-card .hover-bar-pubs {
        bottom: auto;
        right: 0;
        left: 0;
        top: 0;
        width: 100% !important;
        height: 4px;
    }

    .doc-dl {
        align-self: center !important;
        text-align: center !important;
        margin-top: 20px;
    }
}

.glass-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(250, 185, 24, 0.3) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

@media(max-width: 992px) {
    .economics-section-v3 .container>div {
        grid-template-columns: 1fr !important;
    }

    .econ-intro {
        text-align: center;
    }

    .hero-stat-card {
        text-align: left;
    }
}

@media(max-width: 500px) {
    .econ-data-grid {
        grid-template-columns: 1fr !important;
    }

    .glass-card {
        grid-column: span 1 !important;
    }
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

/* ============================================================
   CLIENT PALETTE 2026: LUXURY SAFARI & HOSPITALITY SYSTEM
   ============================================================ */

/* Unified bright baseline across all pages */
body.page-dark {
    background: var(--clr-ivory) !important;
    color: var(--clr-text-primary) !important;
}

/* 1. Official Luxury White Creme System (Replaces bright gold/amber) */
.section-creme,
.section-white-creme,
.section-amber,
.bg-amber,
.section-gold,
.bg-gold,
.section-white,
.bg-white,
.section-ivory,
.bg-ivory,
.section-beige,
.bg-beige,
.section-blue-light,
.bg-blue-light {
    background: #FAF7F2 !important;
    background: linear-gradient(180deg, #FDFBF8 0%, #F6F2EA 100%) !important;
    color: #1C231F !important;
    border-top: 1px solid #EAE3D6 !important;
    border-bottom: 1px solid #EAE3D6 !important;
}

.section-creme h2,
.section-creme h3,
.section-creme h4,
.section-white-creme h2,
.section-white-creme h3,
.section-white-creme h4,
.section-amber h2,
.section-amber h3,
.section-amber h4,
.bg-amber h2,
.bg-amber h3,
.bg-amber h4,
.section-gold h2,
.section-gold h3,
.section-gold h4,
.bg-gold h2,
.bg-gold h3,
.bg-gold h4,
.section-white h2,
.section-white h3,
.section-white h4,
.section-ivory h2,
.section-ivory h3,
.section-ivory h4,
.section-beige h2,
.section-beige h3,
.section-beige h4 {
    color: #122814 !important;
}

.section-creme p,
.section-white-creme p,
.section-amber p,
.bg-amber p,
.section-gold p,
.bg-gold p,
.section-white p,
.section-ivory p,
.section-beige p {
    color: #2D3D30 !important;
}

/* 2. Logo Horizon Blend Section (Acacia Green -> Deep Forest Green) */
.section-logo-blend {
    background: linear-gradient(180deg, #1A3E1E 0%, #122814 100%) !important;
    color: #FFFFFF !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* 3. Brand Primary Ribbon Section (AET Deep Forest Green) */
.section-blue,
.bg-blue {
    background: var(--clr-logo-green-deep) !important;
    color: var(--clr-pure-white) !important;
}

.section-blue h2,
.section-blue h3,
.section-blue h4,
.bg-blue h2,
.bg-blue h3,
.bg-blue h4 {
    color: var(--clr-pure-white) !important;
}

.section-blue p,
.bg-blue p {
    color: rgba(255, 255, 255, 0.88) !important;
}

/* 5. Nature Green Accent Section (Acacia savanna accent) */
.section-green,
.bg-green-accent {
    background: var(--clr-nature-green-deep) !important;
    color: var(--clr-pure-white) !important;
}

.section-green h2,
.section-green h3,
.section-green h4,
.bg-green-accent h2,
.bg-green-accent h3,
.bg-green-accent h4 {
    color: var(--clr-pure-white) !important;
}

.section-green p,
.bg-green-accent p {
    color: rgba(255, 255, 255, 0.88) !important;
}

/* Card Surface Systems (Tactile Logo Sand & Warm Ivory) */
.luxury-card-white {
    background: #FAF8F5 !important;
    border: 1px solid var(--clr-border-beige) !important;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(27, 56, 30, 0.05);
    color: var(--clr-text-primary) !important;
    transition: var(--transition-normal);
}

.luxury-card-white:hover {
    box-shadow: 0 12px 32px rgba(27, 56, 30, 0.12);
    border-color: var(--clr-nature-green) !important;
    transform: translateY(-4px);
}

.luxury-card-beige {
    background: linear-gradient(145deg, #FAF8F5 0%, #EDE5D6 100%) !important;
    border: 1px solid var(--clr-border-beige);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(80, 55, 31, 0.04);
    color: var(--clr-text-primary) !important;
    transition: var(--transition-normal);
}

.luxury-card-beige:hover {
    box-shadow: 0 10px 28px rgba(80, 55, 31, 0.08);
    transform: translateY(-3px);
}

/* Luxury Safari Badges */
.badge-blue {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(27, 56, 30, 0.1);
    color: var(--clr-brand-blue) !important;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: var(--radius-full);
}

.badge-green {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(36, 71, 36, 0.1);
    color: var(--clr-nature-green) !important;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: var(--radius-full);
}

.badge-beige {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--clr-safari-beige-dark);
    color: var(--clr-text-primary) !important;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: var(--radius-full);
}

.badge-gold {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(218, 160, 23, 0.15);
    color: #9E6B08 !important;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: var(--radius-full);
}

/* Primary Action Buttons */
.btn-brand-blue,
.btn-brand-green,
.btn-forest {
    background: var(--clr-brand-blue) !important;
    color: var(--clr-pure-white) !important;
    padding: 13px 28px;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 16px rgba(27, 56, 30, 0.2);
    transition: var(--transition-normal);
    text-decoration: none;
}

.btn-brand-blue:hover,
.btn-brand-green:hover,
.btn-forest:hover {
    background: var(--clr-brand-blue-deep) !important;
    box-shadow: 0 8px 24px rgba(27, 56, 30, 0.32);
    transform: translateY(-2px);
}

.btn-nature-green {
    background: var(--clr-nature-green) !important;
    color: var(--clr-pure-white) !important;
    padding: 13px 28px;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 16px rgba(36, 71, 36, 0.2);
    transition: var(--transition-normal);
    text-decoration: none;
}

.btn-nature-green:hover {
    background: var(--clr-nature-green-deep) !important;
    box-shadow: 0 8px 24px rgba(36, 71, 36, 0.32);
    transform: translateY(-2px);
}

.btn-warm-beige {
    background: var(--clr-safari-beige-dark) !important;
    color: var(--clr-text-primary) !important;
    padding: 13px 28px;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--clr-border-beige);
    transition: var(--transition-normal);
    text-decoration: none;
}

.btn-warm-beige:hover {
    background: #DFCFAF !important;
    transform: translateY(-2px);
}

/* Subpage hero section */
.subpage-hero {
    position: relative;
    min-height: 380px;
    background-color: var(--clr-nature-green-deep);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    padding: 160px 32px 70px;
    color: var(--clr-pure-white);
}

.subpage-hero .container {
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
    padding-left: 48px;
    padding-right: 48px;
    box-sizing: border-box;
}

/* section-tag */
.section-tag {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--clr-aet-orange);
    margin-bottom: 12px;
}

/* Content area for secondary pages */
.content-body {
    max-width: 860px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.85;
    color: var(--clr-text-primary);
}

/* ==========================================
   MAIN CONTENT PADDING (push below fixed nav)
   ========================================== */
main {
    padding-top: 96px;
}

/* ==========================================
   NAVBAR CRITICAL FIX PATCH
   ========================================== */

/* Fix 1: Mobile menu visibility controlled cleanly by is-active */
.mobile-menu:not(.is-active) {
    display: none !important;
}

.mobile-menu.is-active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Fix 2: Desktop nav list cleanly contained on wide screens */
@media (min-width: 1151px) {
    .header-container {
        overflow: visible !important;
    }

    .nav-menu {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .nav-list {
        flex-wrap: nowrap;
    }
}

/* Fix 3: Dropdown menus - absolutely hidden until hover */
.dropdown-menu {
    display: block !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
}

.nav-item.has-dropdown:hover .dropdown-menu,
.nav-item.has-dropdown:focus-within .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Fix 4: Header shell must never clip nav dropdowns */
.header-shell {
    overflow: visible !important;
}

/* Fix 5: Nav actions always visible */
.nav-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
}

/* Fix 6: Search bar inline - hidden by default */
.search-bar-inline.hidden {
    display: none !important;
}

/* ==========================================
   LEADERSHIP & GOVERNANCE SHOWCASE (NO BLUE)
   ========================================== */
.leadership-section {
    position: relative;
    padding: 120px 32px;
    background: linear-gradient(180deg, #122B15 0%, #1A3E1E 50%, #0F2412 100%);
    color: #FFFFFF;
    border-top: 2px solid var(--clr-amboseli-gold);
    border-bottom: 2px solid var(--clr-amboseli-gold);
}

.leadership-container {
    max-width: 1400px;
    margin: 0 auto;
}

.leadership-header {
    text-align: center;
    max-width: 840px;
    margin: 0 auto 40px;
}

.leadership-header h2 {
    color: #FFFFFF;
    font-size: clamp(2.4rem, 4.5vw, 3.8rem);
    margin: 12px 0 16px;
    font-weight: 800;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.leadership-header p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.15rem;
    line-height: 1.7;
}

/* Category Filter Tabs */
.leadership-filter-wrap {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.leadership-filter-btn {
    padding: 12px 28px;
    border-radius: 9999px;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
    backdrop-filter: blur(8px);
}

.leadership-filter-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.45);
    color: #FFFFFF;
    transform: translateY(-2px);
}

.leadership-filter-btn.active {
    background: #FAF7F2;
    color: #122814;
    border-color: #FAF7F2;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    font-weight: 800;
}

/* Sub-Heading per Tier */
.leadership-group-title {
    font-size: 1.6rem;
    color: #F8F4EB;
    font-family: var(--ff-serif);
    margin: 40px 0 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.leadership-group-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}

/* Leadership Grid */
.leadership-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    margin-bottom: 48px;
}

@media (max-width: 1200px) {
    .leadership-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
}

@media (max-width: 860px) {
    .leadership-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 540px) {
    .leadership-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* Individual Card */
.leadership-card {
    background: #FAF7F2;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.leadership-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.35);
}

/* Image Box */
.leadership-card-img-wrap {
    height: 380px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #244724 0%, #152A18 100%);
}

.leadership-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.leadership-card:hover .leadership-card-img {
    transform: scale(1.05);
}

.leadership-card-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(18, 40, 20, 0.92);
    color: #FAF7F2;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(6px);
    z-index: 2;
}

/* Content Body */
.leadership-card-body {
    padding: 26px 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #FAF7F2;
}

.leadership-card-name {
    font-family: var(--ff-serif);
    font-size: 1.3rem;
    font-weight: 700;
    color: #122814;
    margin: 0 0 6px;
    line-height: 1.25;
}

.leadership-card-role {
    font-size: 0.8rem;
    font-weight: 800;
    color: #2D6331;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
    line-height: 1.4;
    display: block;
}

.leadership-card-desc {
    font-size: 0.9rem;
    color: #3B4B3D;
    line-height: 1.6;
    margin: 0;
}

/* ============================================================
   AMBOSELI AT A GLANCE (REVAMPED LUXURY SAFARI SECTION)
   ============================================================ */
.glance-revamp-section {
    background: linear-gradient(180deg, #FDFBF8 0%, #F5F0E6 50%, #FAF6EE 100%);
    padding: 120px 0;
    border-top: 1px solid rgba(36, 71, 36, 0.1);
    border-bottom: 1px solid rgba(36, 71, 36, 0.1);
    position: relative;
    overflow: hidden;
}

.glance-revamp-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1600px;
    height: 100%;
    background: radial-gradient(circle at 10% 20%, rgba(250, 185, 24, 0.06) 0%, transparent 60%),
        radial-gradient(circle at 90% 80%, rgba(36, 71, 36, 0.05) 0%, transparent 60%);
    pointer-events: none;
}

.glance-revamp-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 56px;
    flex-wrap: wrap;
}

.glance-revamp-title-group {
    max-width: 640px;
}

.glance-revamp-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(20, 44, 23, 0.08);
    border: 1px solid rgba(20, 44, 23, 0.18);
    color: var(--clr-nature-green-deep);
    padding: 6px 16px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.glance-revamp-heading {
    font-family: var(--ff-serif);
    font-size: clamp(2.8rem, 4.5vw, 4.2rem);
    line-height: 1.08;
    color: #122814;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.glance-revamp-lead {
    font-size: 1.15rem;
    color: #2D3D30;
    line-height: 1.7;
    margin: 0;
}

.glance-revamp-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--clr-nature-green-deep);
    color: var(--clr-snow-white);
    padding: 16px 32px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(20, 44, 23, 0.18);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.glance-revamp-cta:hover {
    background: #1C3D1E;
    color: #FFF;
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(20, 44, 23, 0.28);
}

/* 4-Card Luxury Impact Grid (PREMIUM ICONS ONLY - NO IMAGES) */
.glance-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 52px;
}

.glance-revamp-card {
    background: #FFFFFF;
    border-radius: 20px;
    border: 1px solid rgba(24, 51, 26, 0.1);
    box-shadow: 0 10px 30px rgba(20, 44, 23, 0.05), 0 2px 6px rgba(0, 0, 0, 0.02);
    padding: 32px 26px 26px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(28px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, opacity 0.85s ease;
}

.glance-revamp-card.is-in-view {
    opacity: 1;
    transform: translateY(0);
}

.glance-revamp-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1C3D1E 0%, #FAB918 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.glance-revamp-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 50px rgba(20, 44, 23, 0.12), 0 4px 14px rgba(250, 185, 24, 0.08);
    border-color: rgba(250, 185, 24, 0.45);
}

.glance-revamp-card:hover::before {
    opacity: 1;
}

/* Card Top: Premium Icon Badge & Category Pill */
.glance-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 24px;
}

.glance-icon-badge {
    width: 78px;
    height: 78px;
    border-radius: 22px;
    background: linear-gradient(135deg, #FFFFFF 0%, #F7F2E6 100%);
    border: 1.5px solid rgba(250, 185, 24, 0.42);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #122814;
    box-shadow: 0 10px 24px rgba(24, 51, 26, 0.08), 0 2px 8px rgba(250, 185, 24, 0.12);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
    position: relative;
}

.glance-icon-badge svg {
    width: 46px;
    height: 46px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glance-revamp-card:hover .glance-icon-badge {
    background: linear-gradient(135deg, #122814 0%, #1E4020 100%);
    color: #FFFFFF;
    border-color: #FAB918;
    box-shadow: 0 14px 32px rgba(250, 185, 24, 0.35), 0 0 0 1px rgba(250, 185, 24, 0.3);
    transform: scale(1.06) rotate(-2deg);
}

.glance-revamp-card:hover .glance-icon-badge svg {
    transform: scale(1.08);
}

.glance-card-pill {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #1B381E;
    background: rgba(24, 51, 26, 0.06);
    padding: 6px 12px;
    border-radius: 100px;
    border: 1px solid rgba(24, 51, 26, 0.12);
    transition: all 0.3s ease;
}

.glance-revamp-card:hover .glance-card-pill {
    background: rgba(250, 185, 24, 0.15);
    color: #9A6A00;
    border-color: rgba(250, 185, 24, 0.35);
}

/* Subtle Watermark Background */
.glance-card-watermark {
    position: absolute;
    right: -15px;
    bottom: -15px;
    width: 148px;
    height: 148px;
    opacity: 0.04;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.4s ease;
    color: #18331A;
}

.glance-card-watermark svg {
    width: 100%;
    height: 100%;
}

.glance-revamp-card:hover .glance-card-watermark {
    opacity: 0.085;
    transform: scale(1.1) rotate(4deg);
    color: #FAB918;
}

/* Metric Typography */
.glance-card-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.glance-metric-wrap {
    overflow: hidden;
    display: inline-flex;
    align-items: baseline;
    margin-bottom: 8px;
    padding-top: 2px;
}

.glance-metric-val {
    font-family: var(--ff-sans);
    font-size: clamp(2.4rem, 3.2vw, 3.2rem);
    font-weight: 800;
    color: #122814;
    line-height: 1;
    letter-spacing: -0.03em;
    display: inline-block;
    opacity: 0;
    transform: translateY(115%);
    transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
    will-change: transform, opacity;
}

.glance-revamp-card.is-in-view .glance-metric-val,
.glance-metric-val.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.glance-metric-gold {
    color: #B8800B;
}

.glance-card-subtitle {
    font-size: 1.15rem;
    font-weight: 700;
    color: #122814;
    margin-bottom: 12px;
    line-height: 1.3;
}

.glance-card-desc {
    font-size: 0.92rem;
    color: #4A5A4D;
    line-height: 1.6;
    margin: 0 0 20px 0;
    flex: 1;
}

/* Bottom Highlight Chip */
.glance-card-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FAF7F0;
    border: 1px solid rgba(24, 51, 26, 0.08);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #2D4430;
    margin-top: auto;
    transition: all 0.3s ease;
}

.glance-card-chip svg {
    color: #FAB918;
    flex-shrink: 0;
}

.glance-revamp-card:hover .glance-card-chip {
    background: #F4EEDC;
    border-color: rgba(250, 185, 24, 0.3);
    color: #18331A;
}

/* Bottom Highlight Banner Bar (Prestigious Accreditations & Scale) */
.glance-highlight-bar {
    margin-top: 36px;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.97) 0%, rgba(251, 248, 240, 0.94) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid rgba(250, 185, 24, 0.32);
    border-radius: 20px;
    padding: 16px 24px;
    gap: 16px;
    box-shadow: 0 16px 40px rgba(20, 44, 23, 0.07), 0 2px 8px rgba(0, 0, 0, 0.03);
    opacity: 0;
    transform: translateY(28px);
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.25s, opacity 0.9s ease 0.25s;
}

.glance-highlight-bar.is-in-view {
    opacity: 1;
    transform: translateY(0);
}

.glance-highlight-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    border-radius: 14px;
    transition: background 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.glance-highlight-item:hover {
    background: rgba(36, 71, 36, 0.04);
    transform: translateY(-2px);
}

.glance-highlight-divider {
    width: 1px;
    height: 48px;
    background: linear-gradient(to bottom, rgba(36, 71, 36, 0.02), rgba(36, 71, 36, 0.15), rgba(36, 71, 36, 0.02));
}

.glance-highlight-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    background: linear-gradient(135deg, #18331A 0%, #244724 100%);
    color: #FAB918;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 22px rgba(24, 51, 26, 0.22);
    border: 1.5px solid rgba(250, 185, 24, 0.42);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.glance-highlight-icon svg {
    width: 32px;
    height: 32px;
    transition: transform 0.35s ease;
}

.glance-highlight-item:hover .glance-highlight-icon {
    transform: scale(1.08) rotate(-3deg);
    box-shadow: 0 10px 24px rgba(250, 185, 24, 0.35);
    border-color: #FAB918;
}

.glance-highlight-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.glance-highlight-badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
    flex-wrap: wrap;
}

.glance-highlight-stat {
    font-family: var(--ff-sans);
    font-size: 1.15rem;
    font-weight: 800;
    color: #173017;
    letter-spacing: -0.01em;
}

.glance-highlight-tag {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(250, 185, 24, 0.15);
    color: #9A6A00;
    border: 1px solid rgba(250, 185, 24, 0.3);
}

.glance-highlight-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1A2E1D;
    line-height: 1.25;
    margin: 0 0 2px;
}

.glance-highlight-sub {
    font-size: 0.78rem;
    font-weight: 500;
    color: #556B59;
    line-height: 1.35;
    margin: 0;
}

@media (max-width: 1024px) {
    .glance-highlight-bar {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px;
    }

    .glance-highlight-divider {
        display: none;
    }

    .glance-highlight-item {
        padding: 12px;
        background: rgba(255, 255, 255, 0.6);
        border: 1px solid rgba(36, 71, 36, 0.08);
    }
}

@media (max-width: 1200px) {
    .glance-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 640px) {
    .glance-card-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .glance-revamp-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
}

/* ============================================================
   REVAMPED SECTION HEADERS & 4 PILLARS SYSTEM (2026)
   ============================================================ */
.section-header-revamp {
    text-align: center;
    max-width: 860px;
    margin: 0 auto 60px auto;
    position: relative;
}

.section-badge-revamp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: var(--radius-full);
    background: #122814;
    color: #FDCD13;
    border: 1px solid rgba(250, 185, 24, 0.35);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    box-shadow: 0 4px 16px rgba(18, 40, 20, 0.12);
    margin-bottom: 20px;
}

.section-title-revamp {
    font-family: var(--ff-serif);
    font-size: clamp(2.4rem, 4.2vw, 3.6rem);
    font-weight: 800;
    color: #122814;
    line-height: 1.12;
    margin-bottom: 18px;
    letter-spacing: -0.01em;
}

.section-lead-revamp {
    font-size: 1.15rem;
    color: #3B4D3F;
    font-weight: 500;
    line-height: 1.65;
    margin: 0 auto;
}

.section-divider-gold {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #FDCD13 0%, #D49B00 100%);
    margin: 22px auto 0 auto;
    border-radius: 2px;
}

/* Revamped SOC Report 2026 Section - Rich Vibrant Blue Conservation Theme */
.soc-revamp-section {
    background: radial-gradient(circle at 85% 20%, rgba(56, 189, 248, 0.22) 0%, transparent 55%),
        linear-gradient(135deg, #0A3D68 0%, #13558E 48%, #082946 100%) !important;
    color: #FFFFFF !important;
    padding: 105px 0 !important;
    position: relative !important;
    overflow: hidden !important;
    border-top: 3px solid #1E70B3 !important;
    border-bottom: 3px solid #1E70B3 !important;
}

.soc-revamp-section::before {
    content: '' !important;
    position: absolute !important;
    top: -50px !important;
    right: -50px !important;
    width: 600px !important;
    height: 600px !important;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.18) 0%, transparent 70%) !important;
    pointer-events: none !important;
}

.soc-revamp-grid {
    display: grid !important;
    grid-template-columns: 360px 1fr !important;
    gap: 56px !important;
    align-items: center !important;
}

.soc-cover-card {
    background: #FFFFFF !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: var(--radius-xl) !important;
    padding: 24px 20px !important;
    box-shadow: 0 20px 50px rgba(4, 20, 36, 0.45) !important;
    text-align: center !important;
    position: relative !important;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.soc-cover-card:hover {
    transform: translateY(-6px) !important;
    border-color: #FDCD13 !important;
    box-shadow: 0 26px 60px rgba(4, 20, 36, 0.55) !important;
}

.soc-badge-year {
    display: inline-block !important;
    padding: 6px 14px !important;
    border-radius: 4px !important;
    background: #FDCD13 !important;
    color: #122814 !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    margin-bottom: 24px !important;
}

.soc-cover-title {
    font-family: var(--ff-serif) !important;
    font-size: 2.2rem !important;
    color: #FFFFFF !important;
    line-height: 1.15 !important;
    margin-bottom: 12px !important;
}

.soc-cover-sub {
    font-size: 0.95rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin-bottom: 28px !important;
}

.soc-content-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

.soc-eyebrow-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(253, 205, 19, 0.15) !important;
    color: #FDCD13 !important;
    border: 1px solid rgba(253, 205, 19, 0.45) !important;
    padding: 6px 16px !important;
    border-radius: 30px !important;
    font-weight: 800 !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    width: fit-content !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

.soc-main-heading {
    font-family: var(--ff-serif) !important;
    font-size: clamp(2.3rem, 4vw, 3.2rem) !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    margin: 12px 0 16px !important;
    line-height: 1.15 !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35) !important;
}

.soc-main-lead {
    color: rgba(255, 255, 255, 0.94) !important;
    font-size: 1.08rem !important;
    line-height: 1.75 !important;
    margin-bottom: 12px !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25) !important;
}

.soc-main-subtext {
    color: rgba(224, 242, 254, 0.85) !important;
    font-size: 0.98rem !important;
    line-height: 1.68 !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25) !important;
}

.soc-metrics-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    margin: 10px 0 !important;
}

.soc-metric-box {
    background: rgba(255, 255, 255, 0.10) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: var(--radius-lg) !important;
    padding: 18px 20px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.soc-metric-box:hover {
    transform: translateY(-3px) !important;
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(253, 205, 19, 0.6) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25) !important;
}

.soc-metric-num {
    font-size: 1.85rem !important;
    font-weight: 800 !important;
    color: #FDCD13 !important;
    line-height: 1 !important;
    margin-bottom: 6px !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

.soc-metric-lbl {
    font-size: 0.82rem !important;
    color: rgba(255, 255, 255, 0.88) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.soc-action-btns {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-top: 8px !important;
    flex-wrap: wrap !important;
}

.btn-soc-gold {
    background: #FDCD13 !important;
    color: #122814 !important;
    padding: 14px 32px !important;
    border-radius: var(--radius-md) !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 8px 24px rgba(253, 205, 19, 0.4) !important;
    border: none !important;
}

.btn-soc-gold:hover {
    background: #FFCA36 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 30px rgba(253, 205, 19, 0.55) !important;
    color: #122814 !important;
}

.btn-soc-outline {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #FFFFFF !important;
    border: 1.5px solid rgba(255, 255, 255, 0.75) !important;
    padding: 14px 28px !important;
    border-radius: var(--radius-md) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.btn-soc-outline:hover {
    border-color: #FFFFFF !important;
    color: #0A3D68 !important;
    background: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25) !important;
}

/* 4 Core Pillars Section */
.pillars-section {
    padding: 110px 0;
    background: #FAF7F2;
    background: linear-gradient(180deg, #FAF7F2 0%, #F3EDE2 100%);
    border-top: 1px solid #E4DACB;
    border-bottom: 1px solid #E4DACB;
}

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 48px;
}

.pillar-card {
    background: #FFFFFF;
    border: 1px solid rgba(36, 71, 36, 0.12);
    border-radius: var(--radius-xl);
    padding: 32px 24px;
    box-shadow: 0 10px 30px rgba(20, 44, 23, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    transition: all 0.35s ease;
    overflow: hidden;
}

.pillar-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #122814 0%, #244724 100%);
    transition: background 0.3s ease;
}

.pillar-card:nth-child(2)::before {
    background: linear-gradient(90deg, #FDCD13 0%, #D49B00 100%);
}

.pillar-card:nth-child(3)::before {
    background: linear-gradient(90deg, #2E6B34 0%, #18421D 100%);
}

.pillar-card:nth-child(4)::before {
    background: linear-gradient(90deg, #B8800B 0%, #8A5F07 100%);
}

.pillar-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(20, 44, 23, 0.1);
    border-color: rgba(36, 71, 36, 0.25);
}

.pillar-num {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--clr-aet-orange);
    letter-spacing: 0.12em;
    margin-bottom: 16px;
    display: block;
}

.pillar-icon-box {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: rgba(36, 71, 36, 0.08);
    color: #122814;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.pillar-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #122814;
    margin-bottom: 12px;
    line-height: 1.25;
}

.pillar-desc {
    font-size: 0.93rem;
    color: #4A5A4D;
    line-height: 1.6;
    margin-bottom: 24px;
}

.pillar-link {
    font-size: 0.88rem;
    font-weight: 700;
    color: #122814;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
}

.pillar-link:hover {
    color: var(--clr-aet-orange);
}

@media (max-width: 1024px) {
    .soc-revamp-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .pillars-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .pillars-grid {
        grid-template-columns: 1fr;
    }

    .soc-metrics-row {
        grid-template-columns: 1fr;
    }
}

/* Responsive grid for Exciting Impact Highlights on Index */
.exciting-impact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.exciting-card {
    background: #FFFFFF;
    padding: 32px 28px;
    border-radius: var(--radius-xl);
    border: 1px solid #EAE3D6;
    box-shadow: 0 10px 30px rgba(27, 56, 30, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.exciting-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(27, 56, 30, 0.1);
    border-color: var(--clr-amboseli-gold);
}

.exciting-card-tag {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--clr-nature-green);
    text-transform: uppercase;
    margin-bottom: 6px;
    display: block;
}

.exciting-card-title {
    font-family: var(--ff-serif);
    font-size: 1.4rem;
    color: #122814;
    font-weight: 700;
    margin: 6px 0 10px;
    line-height: 1.25;
}

.exciting-card-desc {
    font-size: 0.94rem;
    color: #4A5A4D;
    line-height: 1.65;
    margin-bottom: 20px;
}

.exciting-badge-pillar {
    background: rgba(20, 44, 23, 0.06);
    border: 1px solid rgba(20, 44, 23, 0.15);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 800;
    color: #122814;
    display: inline-flex;
    align-items: center;
}

/* Mission & Vision Luxury Layout */
.mission-vision-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 48px;
}

.mission-card {
    background: #FFFFFF;
    padding: 44px 36px;
    border-radius: var(--radius-xl);
    border: 1px solid #EAE3D6;
    box-shadow: 0 12px 36px rgba(27, 56, 30, 0.05);
    position: relative;
    overflow: hidden;
    transition: all 0.35s ease;
}

.mission-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 45px rgba(27, 56, 30, 0.09);
}

.mission-card--mission {
    border-left: 6px solid var(--clr-nature-green-deep);
}

.mission-card--vision {
    border-left: 6px solid var(--clr-amboseli-gold);
}

.mission-tag {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 12px;
}

.mission-card--mission .mission-tag {
    color: var(--clr-nature-green-deep);
}

.mission-card--vision .mission-tag {
    color: #B8800B;
}

.mission-title {
    font-family: var(--ff-serif);
    font-size: 1.8rem;
    color: #122814;
    font-weight: 800;
    margin-bottom: 16px;
    line-height: 1.2;
}

.mission-quote {
    font-size: 1.12rem;
    color: #2D3D30;
    line-height: 1.7;
    font-weight: 500;
    margin: 0;
}

/* Latest News Grid */
.news-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.news-card-v2 {
    background: #FFFFFF;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid #EAE3D6;
    box-shadow: 0 10px 30px rgba(27, 56, 30, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.news-card-v2:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px rgba(27, 56, 30, 0.12);
    border-color: var(--clr-amboseli-gold);
}

.news-card-media {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.news-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.news-card-v2:hover .news-card-img {
    transform: scale(1.06);
}

.news-card-category {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #142C17;
    color: #FFFFFF;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 6px 14px;
    border-radius: 20px;
    text-transform: uppercase;
}

.news-card-body {
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
}

.news-card-date {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--clr-amboseli-gold);
    margin-bottom: 8px;
    display: block;
}

.news-card-title {
    font-family: var(--ff-serif);
    font-size: 1.35rem;
    color: #122814;
    font-weight: 800;
    line-height: 1.28;
    margin-bottom: 12px;
}

.news-card-snippet {
    font-size: 0.94rem;
    color: #4A5A4D;
    line-height: 1.6;
    margin-bottom: 20px;
}

.news-card-link {
    font-size: 0.88rem;
    font-weight: 800;
    color: #122814;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
}

.news-card-v2:hover .news-card-link {
    color: #B8800B;
}

@media (max-width: 1024px) {
    .mission-vision-grid {
        grid-template-columns: 1fr;
    }

    .news-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .news-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   AET UNIFORM AUTO-PAGINATION COMPONENT
   Flexible for Blogs, Stories, and Document Library Pages
   ============================================================ */
.aet-pagination-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 52px;
    padding-top: 32px;
    border-top: 1px solid rgba(36, 71, 36, 0.12);
    width: 100%;
}

.page-dark .aet-pagination-wrap,
.section-dark .aet-pagination-wrap {
    border-top-color: rgba(255, 255, 255, 0.12);
}

.aet-page-summary {
    font-size: 0.86rem;
    font-weight: 600;
    color: #4A554E;
    letter-spacing: 0.02em;
}

.page-dark .aet-page-summary,
.section-dark .aet-page-summary {
    color: rgba(255, 255, 255, 0.75);
}

.aet-page-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.aet-page-btn,
.aet-page-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    font-family: var(--ff-sans);
    font-size: 0.88rem;
    font-weight: 700;
    color: #1C231F;
    background: #FFFFFF;
    border: 1.5px solid rgba(36, 71, 36, 0.16);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    user-select: none;
    text-decoration: none;
}

.aet-page-btn:hover:not(:disabled),
.aet-page-number:hover:not(.active) {
    background: #F5EFE6;
    border-color: #FAB918;
    color: #182417;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(250, 185, 24, 0.25);
}

.aet-page-number.active {
    background: #244724;
    color: #FFFFFF;
    border-color: #244724;
    box-shadow: 0 6px 18px rgba(36, 71, 36, 0.35);
    cursor: default;
    pointer-events: none;
}

.aet-page-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    border-color: rgba(0, 0, 0, 0.08);
}

.aet-page-ellipsis {
    font-size: 1rem;
    font-weight: 800;
    color: #717D75;
    padding: 0 4px;
    user-select: none;
}

/* Dark Theme Support */
.page-dark .aet-page-btn,
.page-dark .aet-page-number,
.section-dark .aet-page-btn,
.section-dark .aet-page-number {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    box-shadow: none;
}

.page-dark .aet-page-btn:hover:not(:disabled),
.page-dark .aet-page-number:hover:not(.active),
.section-dark .aet-page-btn:hover:not(:disabled),
.section-dark .aet-page-number:hover:not(.active) {
    background: rgba(250, 185, 24, 0.18);
    border-color: #FAB918;
    color: #FAB918;
    transform: translateY(-2px);
}

.page-dark .aet-page-number.active,
.section-dark .aet-page-number.active {
    background: #FAB918;
    color: #182417;
    border-color: #FAB918;
    box-shadow: 0 6px 20px rgba(250, 185, 24, 0.4);
}

.page-dark .aet-page-btn:disabled,
.section-dark .aet-page-btn:disabled {
    opacity: 0.3;
    border-color: rgba(255, 255, 255, 0.1);
}

.page-dark .aet-page-ellipsis,
.section-dark .aet-page-ellipsis {
    color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 600px) {

    .aet-page-btn,
    .aet-page-number {
        min-width: 36px;
        height: 36px;
        padding: 0 10px;
        font-size: 0.80rem;
    }
}

/* ============================================================
   GLOBAL RESPONSIVE GRID & LAYOUT PROTECTION (MOBILE & TABLET)
   ============================================================ */

/* Prevent horizontal page blowouts on all mobile viewports */
html,
body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Fluid image & media scaling */
img,
video,
iframe,
svg {
    max-width: 100%;
    height: auto;
}

/* Automatically stack 2-column and split grids on tablets & mobile */
@media (max-width: 992px) {

    [style*="grid-template-columns: 1.1fr 0.9fr"],
    [style*="grid-template-columns: 1.15fr 0.85fr"],
    [style*="grid-template-columns: 1.2fr 0.8fr"],
    [style*="grid-template-columns: 2fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"],
    .work-section-v3 .page-container>div[style*="display: grid"],
    .subpage-hero .page-container>div[style*="display: grid"] {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
}

/* Protect cards from forcing horizontal overflow on narrow mobile screens (320px - 414px) */
@media (max-width: 640px) {

    [style*="grid-template-columns: repeat(auto-fit, minmax(340px, 1fr))"],
    [style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"],
    [style*="grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))"] {
        grid-template-columns: 1fr !important;
    }

    .hero-glass-stats {
        width: 100% !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    .hero-actions {
        width: 100% !important;
    }

    .btn-primary-hero,
    .btn-secondary-hero {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Data tables and wide scrollable containers */
.table-responsive,
table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Programme Showcase Card Interactions */
.program-showcase-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(250, 185, 24, 0.6) !important;
}

.program-showcase-card:hover img {
    transform: scale(1.06) !important;
}

.program-showcase-card:hover a {
    color: #8C6A15 !important;
}




/* ==========================================
   SIMPLIFIED LUXURY DROPDOWN MENUS (UNCLUTTERED)
   ========================================== */
.dropdown-menu--simple {
    width: 330px;
    max-width: calc(100vw - 32px);
    border-radius: 14px;
    padding: 10px;
    background: #FFFFFF;
}

.dropdown-simple-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.simple-dropdown-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.simple-dropdown-item:hover {
    background: rgba(36, 71, 36, 0.05);
    transform: translateX(4px);
}

.sdd-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(36, 71, 36, 0.06);
    color: #1E3823;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all 0.18s ease;
}

.simple-dropdown-item:hover .sdd-icon {
    background: #FAB918;
    color: #122814;
    transform: scale(1.05);
}

.sdd-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sdd-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1C231F;
    line-height: 1.25;
}

.sdd-desc {
    font-size: 0.74rem;
    color: #5A6A5E;
    line-height: 1.35;
}

/* Programmes Clean Mega Dropdown */
.dropdown-menu--programmes-clean {
    width: 580px;
    max-width: calc(100vw - 32px);
    border-radius: 16px;
    padding: 0;
    background: #FFFFFF;
}

.dropdown-clean-header {
    padding: 16px 20px 12px;
    border-bottom: 1px solid rgba(36, 71, 36, 0.08);
    background: #FAF7F2;
}

.dch-tag {
    font-size: 0.65rem;
    font-weight: 800;
    color: #8C6A15;
    letter-spacing: 0.14em;
    display: block;
    margin-bottom: 2px;
}

.dch-title {
    font-family: var(--ff-serif);
    font-size: 1.15rem;
    font-weight: 800;
    color: #1C231F;
    margin: 0;
}

.dropdown-clean-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 14px 16px;
}

.clean-prog-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.18s ease;
}

.clean-prog-item:hover {
    background: rgba(36, 71, 36, 0.05);
    transform: translateX(3px);
}

.cpi-num {
    font-size: 1.1rem;
    font-weight: 800;
    color: #FAB918;
    line-height: 1;
}

.cpi-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cpi-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1C231F;
}

.cpi-sub {
    font-size: 0.72rem;
    color: #5A6A5E;
}

.dropdown-clean-footer {
    padding: 10px 18px;
    background: #F6F8F5;
    border-top: 1px solid rgba(36, 71, 36, 0.08);
}

.dcf-link {
    font-size: 0.78rem;
    font-weight: 700;
    color: #1E3823;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dcf-link:hover {
    color: #8C6A15;
}

/* Call to Action (CTA) Tab */
.nav-cta-btn {
    background: #FAB918;
    color: #122814 !important;
    font-weight: 800;
    font-size: 0.82rem;
    padding: 9px 18px;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(250, 185, 24, 0.28);
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.nav-cta-btn:hover {
    background: #FFD447;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(250, 185, 24, 0.42);
}


/* ==========================================
   CREATIVE BRAND LOCKUP & NAVBAR ENHANCEMENTS
   ========================================== */
.brand-logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    line-height: 1.2;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.brand-logo-link:hover {
    transform: translateY(-1px);
}

.brand-circle-badge {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid #FAB918;
    box-shadow: 0 4px 14px rgba(18, 40, 20, 0.12), 0 0 0 2.5px rgba(250, 185, 24, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    padding: 2px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-logo-link:hover .brand-circle-badge {
    box-shadow: 0 6px 20px rgba(250, 185, 24, 0.35), 0 0 0 3.5px rgba(250, 185, 24, 0.35);
    transform: rotate(6deg) scale(1.04);
}

.brand-circle-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

.brand-text-lockup {
    display: flex;
    align-items: center;
    gap: 11px;
}

.brand-acronym {
    font-family: var(--ff-serif);
    font-size: 1.6rem;
    font-weight: 900;
    color: #122B15;
    letter-spacing: -0.02em;
    line-height: 1;
}

.brand-divider {
    width: 1.5px;
    height: 32px;
    background: linear-gradient(180deg, #FAB918 0%, rgba(36, 71, 36, 0.25) 100%);
    border-radius: 1px;
}

.brand-name-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.brand-full-name {
    font-family: var(--ff-serif);
    font-size: 0.98rem;
    font-weight: 800;
    color: #162E1A;
    letter-spacing: 0.015em;
    line-height: 1.15;
    white-space: nowrap;
}

.brand-sub-strap {
    font-size: 0.65rem;
    font-weight: 700;
    color: #8C6A15;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

@media (max-width: 1380px) {
    .brand-sub-strap {
        display: none;
    }

    .brand-full-name {
        font-size: 0.9rem;
    }

    .brand-circle-badge {
        width: 46px;
        height: 46px;
    }
}

@media (max-width: 1220px) {
    .nav-list {
        gap: 2px;
    }

    .nav-link {
        padding: 6px 7px;
        font-size: 0.79rem;
    }
}


.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(16px, 2vw, 32px);
    height: 94px;
    transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 12px;
}

.brand-circle-badge {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid #FAB918;
    box-shadow: 0 3px 12px rgba(18, 40, 20, 0.12), 0 0 0 2px rgba(250, 185, 24, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    padding: 2px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-logo-link:hover .brand-circle-badge {
    box-shadow: 0 5px 18px rgba(250, 185, 24, 0.35), 0 0 0 3px rgba(250, 185, 24, 0.35);
    transform: rotate(5deg) scale(1.05);
}

.brand-circle-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

.brand-text-lockup {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.2;
}

.brand-acronym {
    font-family: var(--ff-serif);
    font-size: 1.55rem;
    font-weight: 900;
    color: #122B15;
    letter-spacing: -0.02em;
    line-height: 1;
}

.brand-divider {
    width: 1.5px;
    height: 28px;
    background: linear-gradient(180deg, #FAB918 0%, rgba(36, 71, 36, 0.25) 100%);
    border-radius: 1px;
}

.brand-name-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.2;
}

.brand-full-name {
    font-family: var(--ff-serif);
    font-size: 0.95rem;
    font-weight: 800;
    color: #162E1A;
    letter-spacing: 0.015em;
    line-height: 1.15;
    white-space: nowrap;
}

.brand-sub-strap {
    font-size: 0.64rem;
    font-weight: 700;
    color: #8C6A15;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

.nav-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 10px;
}

.nav-list {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: clamp(2px, 0.5vw, 8px);
    white-space: nowrap;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px clamp(6px, 0.6vw, 10px);
    font-weight: 600;
    font-size: clamp(0.79rem, 0.83vw, 0.86rem);
    letter-spacing: 0.01em;
    color: #162E1A;
    background: transparent;
    border: none;
    border-radius: 6px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    position: relative;
    cursor: pointer;
    text-decoration: none;
}

.nav-link:hover,
.nav-link.active {
    color: #0E2411;
    background: rgba(36, 71, 36, 0.06);
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 2.5px;
    background: #FAB918;
    border-radius: 2px;
}


/* ==========================================
   STREAMLINED NAVBAR & DUAL-COLUMN ABOUT DROPDOWN
   ========================================== */
.dropdown-menu--about-wide {
    width: 620px;
    max-width: calc(100vw - 32px);
    border-radius: 16px;
    padding: 16px 18px;
    background: #FFFFFF;
}

.dropdown-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.dropdown-col-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dropdown-col-section.border-left {
    padding-left: 16px;
    border-left: 1px solid rgba(36, 71, 36, 0.08);
}

.dropdown-section-tag {
    font-size: 0.65rem;
    font-weight: 800;
    color: #8C6A15;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 4px 0 8px 12px;
    display: block;
}

/* Dedicated Donate Button Styling */
.nav-donate-btn {
    background: linear-gradient(135deg, #FAB918 0%, #E59F0B 100%) !important;
    color: #122814 !important;
    padding: 9px 22px !important;
    font-weight: 800 !important;
    font-size: 0.86rem !important;
    letter-spacing: 0.03em !important;
    box-shadow: 0 4px 15px rgba(250, 185, 24, 0.35) !important;
}

.nav-donate-btn:hover {
    background: linear-gradient(135deg, #FFD447 0%, #FAB918 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(250, 185, 24, 0.48) !important;
}


/* ============================================================
   PREMIUM EMBLEM & SERIF BRAND LOCKUP (PERFECT RESPONSIVE LAYOUT)
   ============================================================ */
.header-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-width: max-content;
    margin: 0;
    padding: 0;
}

.brand-logo-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.brand-logo-link:hover {
    transform: translateY(-1px) !important;
}

/* Distinctive Circular Emblem (No Yellow Outline, Clean Natural Seal) */
.brand-circle-badge {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.brand-logo-link:hover .brand-circle-badge {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    transform: scale(1.05) !important;
}

/* Existing Logo Image: Perfectly Contained Within Badge, Crisp Ambient Depth */
.brand-circle-img,
.brand-logo-img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
    filter: drop-shadow(0 2px 5px rgba(18, 40, 20, 0.12)) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Brand Text Lockup: Sits Comfortably Beside Emblem Without Overlapping */
.brand-text-lockup {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 3px !important;
    flex-shrink: 0 !important;
    min-width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.15 !important;
    overflow: visible !important;
}

.brand-full-name {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif) !important;
    font-size: clamp(1.10rem, 1.25vw, 1.25rem) !important;
    font-weight: 800 !important;
    color: #122814 !important;
    letter-spacing: 0.012em !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    display: block !important;
}

/* Tagline Under Name: Always Proudly Visible */
.brand-sub-strap {
    font-family: var(--ff-sans, 'Poppins', sans-serif) !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    color: #8C6A15 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Header Container Height */
.header-container {
    height: 92px !important;
}

/* Scrolled Navbar State */
.header-shell.is-scrolled .header-container {
    height: 78px !important;
}

.header-shell.is-scrolled .brand-circle-badge {
    width: 48px !important;
    height: 48px !important;
}

.header-shell.is-scrolled .brand-full-name {
    font-size: 1.10rem !important;
}

.header-shell.is-scrolled .brand-sub-strap {
    display: block !important;
    font-size: 0.58rem !important;
}

/* Responsive Scaling: Tagline Always Displayed Under Name */
@media (max-width: 1380px) {
    .brand-logo-link {
        gap: 12px !important;
    }

    .brand-circle-badge {
        width: 52px !important;
        height: 52px !important;
    }

    .brand-circle-img,
    .brand-logo-img {
        width: 100% !important;
        height: 100% !important;
    }

    .brand-full-name {
        font-size: 1.06rem !important;
    }

    .brand-sub-strap {
        display: block !important;
        font-size: 0.60rem !important;
        letter-spacing: 0.10em !important;
    }

    .nav-menu {
        margin: 0 6px !important;
    }

    .nav-link {
        padding: 7px 7px !important;
        font-size: 0.81rem !important;
    }
}

@media (max-width: 1220px) {
    .brand-logo-link {
        gap: 10px !important;
    }

    .brand-circle-badge {
        width: 48px !important;
        height: 48px !important;
    }

    .brand-full-name {
        font-size: 0.98rem !important;
    }

    .brand-sub-strap {
        display: block !important;
        font-size: 0.56rem !important;
        letter-spacing: 0.08em !important;
    }

    .nav-link {
        padding: 6px 5px !important;
        font-size: 0.77rem !important;
    }

    .nav-donate-btn {
        padding: 7px 16px !important;
        font-size: 0.82rem !important;
    }
}

@media (max-width: 991px) {
    .header-container {
        height: 78px !important;
    }

    .brand-circle-badge {
        width: 46px !important;
        height: 46px !important;
    }

    .brand-circle-img,
    .brand-logo-img {
        width: 100% !important;
        height: 100% !important;
    }

    .brand-full-name {
        font-size: 1.02rem !important;
    }

    .brand-sub-strap {
        display: block !important;
        font-size: 0.56rem !important;
    }
}

/* Hide language translation selector completely */
.lang-selector-wrap,
#lang-btn,
#lang-dropdown {
    display: none !important;
}

/* ============================================================
   STYLISH COMPACT DROPDOWNS (ONLY A FEW MAIN AREAS)
   ============================================================ */
.stylish-dropdown {
    width: 440px !important;
    max-width: calc(100vw - 32px) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-radius: 18px !important;
    border: 1px solid rgba(36, 71, 36, 0.08) !important;
    border-top: 3.5px solid #FAB918 !important;
    box-shadow: 0 18px 50px rgba(18, 40, 20, 0.14), 0 2px 10px rgba(0, 0, 0, 0.04) !important;
    padding: 14px 14px !important;
    display: none;
    flex-direction: column !important;
    gap: 6px !important;
}

.has-dropdown:hover .stylish-dropdown,
.has-dropdown:focus-within .stylish-dropdown {
    display: flex !important;
}

.stylish-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 10px 8px 10px;
    border-bottom: 1px solid rgba(36, 71, 36, 0.06);
    margin-bottom: 2px;
}

.sd-tag {
    font-size: 0.64rem;
    font-weight: 800;
    color: #8C6A15;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.sd-sub {
    font-size: 0.70rem;
    font-weight: 600;
    color: #556B58;
}

.stylish-dropdown-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stylish-dropdown-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    text-decoration: none;
    background: transparent;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.stylish-dropdown-item:hover {
    background: rgba(250, 185, 24, 0.1);
    transform: translateX(4px);
}

.sd-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(36, 71, 36, 0.06);
    color: #1E3D21;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.22s ease;
}

.stylish-dropdown-item:hover .sd-icon-box {
    background: #FAB918;
    color: #122814;
    transform: scale(1.08);
}

.sd-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.sd-item-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sd-item-title {
    font-size: 0.90rem;
    font-weight: 700;
    color: #142E17;
    letter-spacing: 0.01em;
}

.stylish-dropdown-item:hover .sd-item-title {
    color: #0B1C0E;
}

.sd-arrow {
    font-size: 0.85rem;
    color: #8C6A15;
    opacity: 0;
    transform: translateX(-4px);
    transition: all 0.2s ease;
}

.stylish-dropdown-item:hover .sd-arrow {
    opacity: 1;
    transform: translateX(0);
}

.sd-item-desc {
    font-size: 0.75rem;
    color: #556B58;
    line-height: 1.35;
}

.stylish-dropdown-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px 2px 10px;
    border-top: 1px solid rgba(36, 71, 36, 0.06);
    margin-top: 2px;
}

.sd-footer-link {
    font-size: 0.74rem;
    font-weight: 700;
    color: #1E3D21;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
}

.sd-footer-link:hover {
    color: #8C6A15;
}

.sd-footer-link.highlight {
    color: #8C6A15;
}

@media (max-width: 1380px) {
    .brand-sub-strap {
        display: block !important;
        font-size: 0.60rem !important;
        letter-spacing: 0.10em !important;
    }

    .brand-full-name {
        font-size: 1.06rem !important;
    }

    .brand-circle-badge {
        width: 52px !important;
        height: 52px !important;
    }

    .brand-circle-img,
    .brand-logo-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
}

@media (max-width: 991px) {
    .brand-circle-badge {
        width: 46px !important;
        height: 46px !important;
    }

    .brand-circle-img,
    .brand-logo-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    .brand-full-name {
        font-size: 1.04rem !important;
    }

    .header-container {
        height: 78px !important;
    }
}


/* ============================================================
   CREATIVE & STYLISH MEGA-DROPDOWNS (3 MAIN AREAS + SPOTLIGHT)
   ============================================================ */
.has-dropdown {
    position: relative !important;
}

.creative-dropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(10px) !important;
    width: 610px !important;
    max-width: calc(100vw - 32px) !important;
    background: rgba(255, 255, 255, 0.985) !important;
    backdrop-filter: blur(28px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(27, 56, 30, 0.09) !important;
    border-top: 3.5px solid #FAB918 !important;
    box-shadow: 0 20px 54px rgba(18, 40, 20, 0.16), 0 4px 14px rgba(0, 0, 0, 0.04) !important;
    padding: 16px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.22s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s !important;
    z-index: 1200 !important;
}

/* Display on hover & focus */
.has-dropdown:hover .creative-dropdown,
.has-dropdown:focus-within .creative-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* Invisible bridge so mouse doesn't drop hover */
.creative-dropdown::before {
    content: '' !important;
    position: absolute !important;
    top: -12px !important;
    left: 0 !important;
    right: 0 !important;
    height: 14px !important;
    background: transparent !important;
}

.cd-layout {
    display: grid !important;
    grid-template-columns: 1.45fr 1fr !important;
    gap: 16px !important;
    align-items: stretch !important;
}

/* Left: Main Areas */
.cd-main-areas {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.cd-col-tag {
    font-size: 0.64rem !important;
    font-weight: 800 !important;
    color: #8C6A15 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    margin: 2px 0 8px 6px !important;
    display: block !important;
}

.cd-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 10px 10px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    background: transparent !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cd-item:hover {
    background: rgba(250, 185, 24, 0.10) !important;
    transform: translateX(4px) !important;
}

.cd-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 8px rgba(18, 40, 20, 0.06) !important;
    transition: transform 0.22s ease !important;
}

.cd-item:hover .cd-icon {
    transform: scale(1.1) rotate(2deg) !important;
}

.cd-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.cd-title-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.cd-title {
    font-size: 0.91rem !important;
    font-weight: 700 !important;
    color: #122814 !important;
    letter-spacing: 0.01em !important;
    transition: color 0.2s ease !important;
}

.cd-item:hover .cd-title {
    color: #0B1C0E !important;
}

.cd-arrow {
    font-size: 0.85rem !important;
    color: #8C6A15 !important;
    opacity: 0 !important;
    transform: translateX(-4px) !important;
    transition: all 0.2s ease !important;
}

.cd-item:hover .cd-arrow {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.cd-desc {
    font-size: 0.74rem !important;
    color: #526355 !important;
    line-height: 1.35 !important;
}

/* Right: Creative Spotlight Card */
.cd-feature-card {
    border-radius: 14px !important;
    padding: 18px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    position: relative !important;
    overflow: hidden !important;
}

.cd-feature--about {
    background: linear-gradient(145deg, #162F19 0%, #0E1F11 100%) !important;
    color: #FFFFFF !important;
    box-shadow: inset 0 0 0 1px rgba(250, 185, 24, 0.25) !important;
}

.cd-feature--ecosystem {
    background: linear-gradient(145deg, #1C3820 0%, #122415 100%) !important;
    color: #FFFFFF !important;
    box-shadow: inset 0 0 0 1px rgba(250, 185, 24, 0.25) !important;
}

.cd-feature--programmes {
    background: linear-gradient(145deg, #244227 0%, #152917 100%) !important;
    color: #FFFFFF !important;
    box-shadow: inset 0 0 0 1px rgba(250, 185, 24, 0.25) !important;
}

.cd-feature-badge {
    font-size: 0.60rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    color: #FAB918 !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
    display: inline-block !important;
}

.cd-feature-title {
    font-family: var(--ff-serif) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    line-height: 1.25 !important;
    margin-bottom: 8px !important;
}

.cd-feature-snippet {
    font-size: 0.73rem !important;
    color: rgba(255, 255, 255, 0.78) !important;
    line-height: 1.4 !important;
    margin-bottom: 14px !important;
}

.cd-feature-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    color: #122814 !important;
    background: #FAB918 !important;
    padding: 7px 12px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    width: fit-content !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cd-feature-btn:hover {
    background: #FFD447 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(250, 185, 24, 0.4) !important;
}

@media (max-width: 1200px) {
    .creative-dropdown {
        width: 540px !important;
    }
}


/* ============================================================
   AET REVAMPED STYLISH & RESPONSIVE DROPDOWNS (BULLETPROOF)
   ============================================================ */
.nav-item.has-dropdown {
    position: relative !important;
}

.aet-dropdown {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(8px) !important;
    width: 390px !important;
    max-width: calc(100vw - 24px) !important;
    background: #FFFFFF !important;
    border-radius: 16px !important;
    border: 1px solid rgba(27, 56, 30, 0.08) !important;
    border-top: 3.5px solid #FAB918 !important;
    box-shadow: 0 16px 45px rgba(18, 40, 20, 0.14), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    padding: 12px 14px 10px 14px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.22s ease, transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s !important;
    z-index: 1200 !important;
}

.aet-dropdown--programmes {
    width: 430px !important;
}

/* Hover & Focus states */
.nav-item.has-dropdown:hover .aet-dropdown,
.nav-item.has-dropdown:focus-within .aet-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* Hover bridge */
.aet-dropdown::before {
    content: '' !important;
    position: absolute !important;
    top: -14px !important;
    left: 0 !important;
    right: 0 !important;
    height: 16px !important;
    background: transparent !important;
}

.aet-drop-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.aet-drop-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 4px 8px 8px 8px !important;
    border-bottom: 1px solid rgba(27, 56, 30, 0.06) !important;
    margin-bottom: 4px !important;
}

.aet-drop-badge {
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    color: #8C6A15 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

.aet-drop-sub {
    font-size: 0.70rem !important;
    font-weight: 600 !important;
    color: #556858 !important;
}

.aet-drop-items {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.aet-drop-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 10px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    background: transparent !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.aet-drop-item:hover {
    background: rgba(250, 185, 24, 0.10) !important;
    transform: translateX(3px) !important;
}

.aet-drop-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}

.aet-drop-icon.icon-green {
    background: rgba(36, 71, 36, 0.08) !important;
    color: #1A3E1E !important;
}

.aet-drop-icon.icon-gold {
    background: rgba(250, 185, 24, 0.14) !important;
    color: #8C6A15 !important;
}

.aet-drop-icon.icon-earth {
    background: rgba(46, 90, 46, 0.08) !important;
    color: #244724 !important;
}

.aet-drop-item:hover .aet-drop-icon {
    background: #FAB918 !important;
    color: #122814 !important;
    transform: scale(1.06) !important;
}

.aet-drop-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.aet-drop-title {
    font-size: 0.91rem !important;
    font-weight: 700 !important;
    color: #122814 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: color 0.2s ease !important;
}

.aet-drop-item:hover .aet-drop-title {
    color: #0E2411 !important;
}

.aet-drop-arrow {
    font-size: 0.85rem !important;
    color: #8C6A15 !important;
    opacity: 0 !important;
    transform: translateX(-4px) !important;
    transition: all 0.2s ease !important;
}

.aet-drop-item:hover .aet-drop-arrow {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.aet-drop-desc {
    font-size: 0.74rem !important;
    color: #556858 !important;
    line-height: 1.35 !important;
}

.aet-drop-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 8px 8px 2px 8px !important;
    border-top: 1px solid rgba(27, 56, 30, 0.06) !important;
    margin-top: 4px !important;
}

.aet-drop-footer--split {
    justify-content: space-between !important;
}

.aet-drop-footer-link {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #1E3D21 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.2s ease !important;
}

.aet-drop-footer-link:hover {
    color: #8C6A15 !important;
    transform: translateX(2px) !important;
}

.aet-drop-footer-link.highlight {
    color: #8C6A15 !important;
}

/* ============================================================
   RESPONSIVE STYLES (MOBILE DRAWER ACCORDIONS & ADAPTIVE SIZES)
   ============================================================ */
@media (max-width: 991px) {
    .aet-dropdown {
        display: none !important;
    }

    .mobile-menu-inner {
        padding: 24px 20px !important;
    }

    .mobile-nav-group {
        border-bottom: 1px solid rgba(27, 56, 30, 0.08);
        padding-bottom: 8px;
        margin-bottom: 8px;
    }

    .mobile-subnav-list {
        padding-left: 36px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 6px;
        margin-bottom: 10px;
    }

    .mobile-subnav-item {
        font-size: 0.86rem;
        color: #526355;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: color 0.2s ease;
    }

    .mobile-subnav-item:hover {
        color: #8C6A15;
    }
}


/* ============================================================
   AET "NEW LIVE DESIGN" MEGA-DROPDOWNS
   ============================================================ */
.nav-item.has-dropdown {
    position: relative !important;
}

.live-dropdown {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(12px) !important;
    width: 730px !important;
    max-width: calc(100vw - 32px) !important;
    background: #FFFFFF !important;
    border-radius: 20px !important;
    border: 1px solid rgba(27, 56, 30, 0.08) !important;
    border-top: 3.5px solid #FAB918 !important;
    box-shadow: 0 24px 60px rgba(10, 26, 12, 0.16), 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    padding: 16px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.22s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s !important;
    z-index: 1200 !important;
}

/* Align first dropdowns cleanly */
.nav-item:nth-child(2) .live-dropdown {
    left: -20px !important;
    transform: translateY(12px) !important;
}

.nav-item:nth-child(2):hover .live-dropdown,
.nav-item:nth-child(2):focus-within .live-dropdown {
    transform: translateY(0) !important;
}

/* Hover and Focus States */
.nav-item.has-dropdown:hover .live-dropdown,
.nav-item.has-dropdown:focus-within .live-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* Hover bridge */
.live-dropdown::before {
    content: '' !important;
    position: absolute !important;
    top: -14px !important;
    left: 0 !important;
    right: 0 !important;
    height: 16px !important;
    background: transparent !important;
}

.live-dropdown-grid {
    display: grid !important;
    grid-template-columns: 1.35fr 1fr !important;
    gap: 16px !important;
    align-items: stretch !important;
}

/* Left: Curated interactive list */
.ld-list-col {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 4px !important;
}

.ld-col-tag {
    font-size: 0.64rem !important;
    font-weight: 800 !important;
    color: #8C6A15 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    margin: 2px 0 6px 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.ld-items-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.ld-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 10px 10px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    background: transparent !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ld-item:hover {
    background: rgba(250, 185, 24, 0.10) !important;
    transform: translateX(4px) !important;
}

.ld-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}

.ld-icon.icon-green {
    background: rgba(36, 71, 36, 0.08) !important;
    color: #1A3E1E !important;
}

.ld-icon.icon-gold {
    background: rgba(250, 185, 24, 0.14) !important;
    color: #8C6A15 !important;
}

.ld-icon.icon-earth {
    background: rgba(46, 90, 46, 0.08) !important;
    color: #244724 !important;
}

.ld-item:hover .ld-icon {
    background: #FAB918 !important;
    color: #122814 !important;
    transform: scale(1.08) !important;
}

.ld-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.ld-title-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.ld-title {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #122814 !important;
    letter-spacing: 0.01em !important;
    transition: color 0.2s ease !important;
}

.ld-item:hover .ld-title {
    color: #0A1C0E !important;
}

.ld-arrow {
    font-size: 0.85rem !important;
    color: #8C6A15 !important;
    opacity: 0 !important;
    transform: translateX(-4px) !important;
    transition: all 0.2s ease !important;
}

.ld-item:hover .ld-arrow {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.ld-desc {
    font-size: 0.74rem !important;
    color: #556858 !important;
    line-height: 1.35 !important;
}

.ld-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 6px 2px 6px !important;
    border-top: 1px solid rgba(27, 56, 30, 0.06) !important;
    margin-top: 4px !important;
}

.ld-footer-link {
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    color: #1E3D21 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: color 0.2s ease !important;
}

.ld-footer-link:hover {
    color: #8C6A15 !important;
}

.ld-footer-link.gold {
    color: #8C6A15 !important;
}

/* Right: Live Visual Showcase Card */
.ld-live-card {
    position: relative !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 20px 18px !important;
    min-height: 250px !important;
    background-size: cover !important;
    background-position: center !important;
    box-shadow: 0 8px 24px rgba(10, 26, 12, 0.12) !important;
    text-decoration: none !important;
    color: #FFFFFF !important;
}

.ld-live-card::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(14, 31, 17, 0.15) 0%, rgba(10, 24, 12, 0.84) 65%, rgba(8, 20, 10, 0.98) 100%) !important;
    transition: background 0.3s ease !important;
}

.ld-live-card:hover::before {
    background: linear-gradient(180deg, rgba(14, 31, 17, 0.05) 0%, rgba(10, 24, 12, 0.78) 60%, rgba(8, 20, 10, 0.94) 100%) !important;
}

.ld-live-content {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.ld-live-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    color: #FAB918 !important;
    text-transform: uppercase !important;
    margin-bottom: 2px !important;
}

.ld-live-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #25D366 !important;
    box-shadow: 0 0 8px #25D366 !important;
    animation: livePulse 2s infinite !important;
}

@keyframes livePulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }

    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 6px rgba(37, 211, 102, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

.ld-live-title {
    font-family: var(--ff-serif) !important;
    font-size: 1.14rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    line-height: 1.25 !important;
}

.ld-live-desc {
    font-size: 0.74rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.4 !important;
    margin-bottom: 6px !important;
}

.ld-live-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    color: #122814 !important;
    background: #FAB918 !important;
    padding: 7px 14px !important;
    border-radius: 8px !important;
    width: fit-content !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ld-live-card:hover .ld-live-btn {
    background: #FFD447 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(250, 185, 24, 0.45) !important;
}

@media (max-width: 991px) {
    .live-dropdown {
        display: none !important;
    }
}


/* ============================================================
   AET "NEW LIVE DESIGN" MEGA-DROPDOWNS (7 BUTTONS SYSTEM)
   ============================================================ */
.nav-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 clamp(6px, 1vw, 16px) !important;
}

.nav-list {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: clamp(2px, 0.4vw, 8px) !important;
    white-space: nowrap !important;
}

.nav-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 8px clamp(6px, 0.6vw, 10px) !important;
    font-weight: 600 !important;
    font-size: clamp(0.78rem, 0.82vw, 0.87rem) !important;
    letter-spacing: 0.01em !important;
    color: #162E1A !important;
    background: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    white-space: nowrap !important;
    position: relative !important;
    cursor: pointer !important;
    text-decoration: none !important;
}

.nav-link:hover,
.nav-link.active {
    color: #0E2411 !important;
    background: rgba(36, 71, 36, 0.06) !important;
}

.nav-item.has-dropdown {
    position: relative !important;
}

/* Base Live Dropdown Styling */
.live-dropdown {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    width: 760px !important;
    max-width: calc(100vw - 32px) !important;
    background: #FFFFFF !important;
    border-radius: 20px !important;
    border: 1px solid rgba(27, 56, 30, 0.08) !important;
    border-top: 3.5px solid #FAB918 !important;
    box-shadow: 0 24px 64px rgba(10, 26, 12, 0.16), 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    padding: 16px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.22s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s !important;
    z-index: 1300 !important;
}

/* Strategic Horizontal Alignments across 7 Buttons */
.nav-item:nth-child(2) .live-dropdown {
    left: -40px !important;
    transform: translateY(12px) !important;
}

.nav-item:nth-child(2):hover .live-dropdown,
.nav-item:nth-child(2):focus-within .live-dropdown {
    transform: translateY(0) !important;
}

.nav-item:nth-child(3) .live-dropdown {
    left: -120px !important;
    transform: translateY(12px) !important;
}

.nav-item:nth-child(3):hover .live-dropdown,
.nav-item:nth-child(3):focus-within .live-dropdown {
    transform: translateY(0) !important;
}

.nav-item:nth-child(4) .live-dropdown {
    left: 50% !important;
    transform: translateX(-50%) translateY(12px) !important;
}

.nav-item:nth-child(4):hover .live-dropdown,
.nav-item:nth-child(4):focus-within .live-dropdown {
    transform: translateX(-50%) translateY(0) !important;
}

.nav-item:nth-child(5) .live-dropdown {
    left: 50% !important;
    transform: translateX(-50%) translateY(12px) !important;
}

.nav-item:nth-child(5):hover .live-dropdown,
.nav-item:nth-child(5):focus-within .live-dropdown {
    transform: translateX(-50%) translateY(0) !important;
}

.nav-item:nth-child(6) .live-dropdown {
    right: -40px !important;
    left: auto !important;
    transform: translateY(12px) !important;
}

.nav-item:nth-child(6):hover .live-dropdown,
.nav-item:nth-child(6):focus-within .live-dropdown {
    transform: translateY(0) !important;
}

/* Universal Hover and Focus Show */
.nav-item.has-dropdown:hover .live-dropdown,
.nav-item.has-dropdown:focus-within .live-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Invisible hover bridge */
.live-dropdown::before {
    content: '' !important;
    position: absolute !important;
    top: -16px !important;
    left: 0 !important;
    right: 0 !important;
    height: 20px !important;
    background: transparent !important;
}

.live-dropdown-grid {
    display: grid !important;
    grid-template-columns: 1.35fr 1fr !important;
    gap: 16px !important;
    align-items: stretch !important;
}

/* Left: Curated interactive list */
.ld-list-col {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 4px !important;
}

.ld-col-tag {
    font-size: 0.64rem !important;
    font-weight: 800 !important;
    color: #8C6A15 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    margin: 2px 0 6px 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.ld-items-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.ld-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 10px 10px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    background: transparent !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ld-item:hover {
    background: rgba(250, 185, 24, 0.10) !important;
    transform: translateX(4px) !important;
}

.ld-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}

.ld-icon.icon-green {
    background: rgba(36, 71, 36, 0.08) !important;
    color: #1A3E1E !important;
}

.ld-icon.icon-gold {
    background: rgba(250, 185, 24, 0.14) !important;
    color: #8C6A15 !important;
}

.ld-icon.icon-earth {
    background: rgba(46, 90, 46, 0.08) !important;
    color: #244724 !important;
}

.ld-item:hover .ld-icon {
    background: #FAB918 !important;
    color: #122814 !important;
    transform: scale(1.08) !important;
}

.ld-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.ld-title-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.ld-title {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #122814 !important;
    letter-spacing: 0.01em !important;
    transition: color 0.2s ease !important;
}

.ld-item:hover .ld-title {
    color: #0A1C0E !important;
}

.ld-arrow {
    font-size: 0.85rem !important;
    color: #8C6A15 !important;
    opacity: 0 !important;
    transform: translateX(-4px) !important;
    transition: all 0.2s ease !important;
}

.ld-item:hover .ld-arrow {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.ld-desc {
    font-size: 0.74rem !important;
    color: #556858 !important;
    line-height: 1.35 !important;
}

.ld-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 6px 2px 6px !important;
    border-top: 1px solid rgba(27, 56, 30, 0.06) !important;
    margin-top: 4px !important;
}

.ld-footer-link {
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    color: #1E3D21 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: color 0.2s ease !important;
}

.ld-footer-link:hover {
    color: #8C6A15 !important;
}

.ld-footer-link.gold {
    color: #8C6A15 !important;
}

/* Right: Live Visual Showcase Card */
.ld-live-card {
    position: relative !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 20px 18px !important;
    min-height: 250px !important;
    background-size: cover !important;
    background-position: center !important;
    box-shadow: 0 8px 24px rgba(10, 26, 12, 0.12) !important;
    text-decoration: none !important;
    color: #FFFFFF !important;
}

.ld-live-card::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(14, 31, 17, 0.15) 0%, rgba(10, 24, 12, 0.84) 65%, rgba(8, 20, 10, 0.98) 100%) !important;
    transition: background 0.3s ease !important;
}

.ld-live-card:hover::before {
    background: linear-gradient(180deg, rgba(14, 31, 17, 0.05) 0%, rgba(10, 24, 12, 0.78) 60%, rgba(8, 20, 10, 0.94) 100%) !important;
}

.ld-live-content {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.ld-live-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    color: #FAB918 !important;
    text-transform: uppercase !important;
    margin-bottom: 2px !important;
}

.ld-live-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #25D366 !important;
    box-shadow: 0 0 8px #25D366 !important;
    animation: livePulse 2s infinite !important;
}

@keyframes livePulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }

    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 6px rgba(37, 211, 102, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

.ld-live-title {
    font-family: var(--ff-serif) !important;
    font-size: 1.14rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    line-height: 1.25 !important;
}

.ld-live-desc {
    font-size: 0.74rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.4 !important;
    margin-bottom: 6px !important;
}

.ld-live-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    color: #122814 !important;
    background: #FAB918 !important;
    padding: 7px 14px !important;
    border-radius: 8px !important;
    width: fit-content !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ld-live-card:hover .ld-live-btn {
    background: #FFD447 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(250, 185, 24, 0.45) !important;
}

@media (max-width: 991px) {
    .live-dropdown {
        display: none !important;
    }

    .nav-menu {
        display: none !important;
    }

    .nav-toggle {
        display: flex !important;
    }
}


/* ============================================================
   CINEMATIC FULL-BLEED MULTI-SLIDE HERO (.hero-section)
   ============================================================ */
.hero-section {
    position: relative !important;
    width: 100% !important;
    min-height: 100vh !important;
    min-height: 100svh !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    background-color: #0E1610 !important;
    padding-top: 104px !important;
    padding-bottom: 96px !important;
}

/* Full-bleed background slideshow media wrap */
.hero-media-wrap {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    overflow: hidden !important;
}

.hero-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.4s ease !important;
    z-index: 1 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

.hero-slide.active {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2 !important;
    pointer-events: auto !important;
}

.hero-slide .hero-bg-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 70% center !important;
    display: block !important;
    transform: scale(1.0);
    will-change: transform;
}

/* Distinct Ken Burns Cinematic Motion for Each Wildlife/Landscape Scene */
.hero-slide.active[data-slide-index="0"] .hero-bg-image {
    animation: kenBurnsSlide0 14s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate !important;
}

.hero-slide.active[data-slide-index="1"] .hero-bg-image {
    animation: kenBurnsSlide1 14s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate !important;
}

.hero-slide.active[data-slide-index="2"] .hero-bg-image {
    animation: kenBurnsSlide2 14s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate !important;
}

.hero-slide.active[data-slide-index="3"] .hero-bg-image {
    animation: kenBurnsSlide3 14s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate !important;
}

@keyframes kenBurnsSlide0 {
    0% {
        transform: scale(1.0) translate3d(0, 0, 0);
    }

    100% {
        transform: scale(1.08) translate3d(-1.5%, -0.8%, 0);
    }
}

@keyframes kenBurnsSlide1 {
    0% {
        transform: scale(1.02) translate3d(1%, 0, 0);
    }

    100% {
        transform: scale(1.09) translate3d(-2%, -1%, 0);
    }
}

@keyframes kenBurnsSlide2 {
    0% {
        transform: scale(1.0) translate3d(-1%, 0, 0);
    }

    100% {
        transform: scale(1.08) translate3d(1%, -0.8%, 0);
    }
}

@keyframes kenBurnsSlide3 {
    0% {
        transform: scale(1.02) translate3d(0, 1%, 0);
    }

    100% {
        transform: scale(1.09) translate3d(0, -1.5%, 0);
    }
}

/* Sophisticated Dark Gradient Overlay (Deep Charcoal/Terracotta to Transparent) */
.hero-cinematic-scrim {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    pointer-events: none !important;
    background:
        /* Subtle top scrim so header transition is clean */
        linear-gradient(180deg, rgba(12, 16, 13, 0.62) 0%, rgba(12, 16, 13, 0.18) 24%, transparent 40%),
        /* Left-to-right cinematic gradient: deep charcoal on the left, crystal clear transparent on right */
        linear-gradient(90deg, rgba(14, 18, 15, 0.96) 0%, rgba(20, 22, 18, 0.92) 28%, rgba(32, 22, 18, 0.76) 48%, rgba(28, 20, 16, 0.32) 68%, rgba(0, 0, 0, 0) 86%),
        /* Bottom transition for controls readability */
        linear-gradient(0deg, rgba(10, 14, 11, 0.85) 0%, rgba(12, 16, 13, 0.35) 20%, transparent 35%) !important;
    animation: heroScrimPulse 8s ease-in-out infinite alternate !important;
}

@keyframes heroScrimPulse {
    0% {
        opacity: 0.96;
    }

    100% {
        opacity: 1;
    }
}

/* Left-Aligned Dynamic Content Structure */
.hero-container {
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
}

.hero-content-column {
    max-width: 630px !important;
    position: relative !important;
    text-align: left !important;
}

/* Slide Content Panels (Orchestrated Staggered Text Cascade) */
.hero-slide-content {
    display: none !important;
    opacity: 0 !important;
    flex-direction: column !important;
    gap: 20px !important;
}

.hero-slide-content.active {
    display: flex !important;
    opacity: 1 !important;
}

/* 1. Staggered Entry: Eyebrow Tag */
.hero-slide-content.active .hero-eyebrow-tag {
    animation: heroTextReveal 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both !important;
}

/* 2. Staggered Entry: Headline */
.hero-slide-content.active .hero-cinematic-headline {
    animation: heroTextReveal 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both !important;
}

/* Shimmering Golden Gradient Sweep on Accent Words */
.hero-slide-content.active .hero-headline-accent {
    display: inline-block !important;
    background: linear-gradient(110deg, #FAB918 0%, #FFF2B2 40%, #FAB918 70%) !important;
    background-size: 200% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: heroGoldSweep 3.5s ease-in-out infinite alternate 0.5s !important;
    filter: drop-shadow(0 2px 14px rgba(250, 185, 24, 0.35)) !important;
}

/* 3. Staggered Entry: Subheadline */
.hero-slide-content.active .hero-cinematic-subheadline {
    animation: heroTextReveal 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.32s both !important;
}

/* 4. Staggered Entry: Metrics Bar with Micro Float */
.hero-slide-content.active .hero-metrics-bar {
    animation: heroTextReveal 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both, heroMetricsFloat 4s ease-in-out infinite alternate 1.2s !important;
}

/* Pop Animation on Numbers */
.hero-slide-content.active .hero-metric-num {
    animation: heroNumPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s both !important;
}

/* 5. Staggered Entry: CTA Group */
.hero-slide-content.active .hero-cta-group {
    animation: heroTextReveal 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.58s both !important;
}

/* Master Text Reveal Keyframes with Cinematic Depth-of-Field */
@keyframes heroTextReveal {
    0% {
        opacity: 0;
        transform: translateY(32px) translateZ(0);
        filter: blur(5px);
    }

    60% {
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translateY(0) translateZ(0);
        filter: blur(0);
    }
}

@keyframes heroNumPop {
    0% {
        opacity: 0;
        transform: scale(0.85);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes heroGoldSweep {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 100% center;
    }
}

@keyframes heroMetricsFloat {
    0% {
        transform: translateY(0);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    }

    100% {
        transform: translateY(-3px);
        box-shadow: 0 14px 32px rgba(0, 0, 0, 0.38), 0 0 18px rgba(250, 185, 24, 0.18);
    }
}

/* Eyebrow Pill Tag */
.hero-eyebrow-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.70rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #FAB918 !important;
    background: rgba(250, 185, 24, 0.12) !important;
    border: 1px solid rgba(250, 185, 24, 0.32) !important;
    padding: 6px 14px !important;
    border-radius: 9999px !important;
    width: fit-content !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.hero-live-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #FAB918 !important;
    box-shadow: 0 0 8px rgba(250, 185, 24, 0.9) !important;
    display: inline-block !important;
    animation: dotPulse 2s infinite ease-in-out !important;
}

@keyframes dotPulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.55;
        transform: scale(0.85);
    }
}

/* Headline: Elegant Serif Font with Crisp White Text */
.hero-cinematic-headline {
    font-family: var(--ff-serif), 'Playfair Display', Georgia, serif !important;
    font-size: clamp(2.3rem, 4.1vw, 3.65rem) !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    line-height: 1.13 !important;
    letter-spacing: -0.015em !important;
    margin: 0 !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45) !important;
}

.hero-headline-accent {
    color: #FAB918 !important;
    display: inline-block !important;
}

/* Subheadline: Muted Warm Gray */
.hero-cinematic-subheadline {
    font-size: clamp(1.01rem, 1.15vw, 1.15rem) !important;
    color: #E2DDD5 !important;
    line-height: 1.65 !important;
    margin: 0 !important;
    max-width: 580px !important;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Impact Metrics Bar: Sleek, Clean Single-Line Bar */
.hero-metrics-bar {
    display: inline-flex !important;
    align-items: center !important;
    gap: 22px !important;
    flex-wrap: nowrap !important;
    padding: 12px 20px !important;
    background: rgba(16, 22, 18, 0.62) !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 12px !important;
    width: fit-content !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
    margin-top: 4px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.hero-metric-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
}

.hero-metric-num {
    font-size: 1.36rem !important;
    font-weight: 800 !important;
    color: #FAB918 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em !important;
}

.hero-metric-lbl {
    font-size: 0.70rem !important;
    font-weight: 700 !important;
    color: #D6D0C7 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    white-space: nowrap !important;
}

.hero-metric-divider {
    width: 1px !important;
    height: 30px !important;
    background: rgba(255, 255, 255, 0.16) !important;
}

/* Call-to-Action (CTA) Grouping */
.hero-cta-group {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    margin-top: 6px !important;
}

/* Primary Button: Solid Warm Gold/Saffron with Shimmer Sweep */
.hero-cta-primary {
    background: #FAB918 !important;
    color: #122814 !important;
    padding: 13px 26px !important;
    border-radius: 9999px !important;
    font-weight: 800 !important;
    font-size: 0.94rem !important;
    letter-spacing: 0.02em !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 6px 20px rgba(250, 185, 24, 0.38) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border: none !important;
    position: relative !important;
    overflow: hidden !important;
}

.hero-cta-primary::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 40%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: rotate(25deg);
    transition: all 0.65s ease;
    pointer-events: none;
}

.hero-cta-primary:hover::after {
    left: 130%;
}

.hero-cta-primary:hover {
    background: #FFCA36 !important;
    color: #0E2010 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 28px rgba(250, 185, 24, 0.52) !important;
}

/* Secondary Button: Transparent Ghost Button with Clean White Border */
.hero-cta-secondary {
    background: transparent !important;
    color: #FFFFFF !important;
    border: 1.5px solid rgba(255, 255, 255, 0.88) !important;
    padding: 12px 24px !important;
    border-radius: 9999px !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.hero-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: #FFFFFF !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
}

/* Bottom Cinematic Slider Navigation */
.hero-slider-bottom {
    position: absolute !important;
    bottom: 24px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 20 !important;
    pointer-events: auto !important;
}

.hero-slider-bottom-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    flex-wrap: wrap !important;
}

.hero-slider-tabs {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.hero-slider-tab {
    background: rgba(16, 22, 18, 0.58) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 9999px !important;
    padding: 7px 16px !important;
    color: #D6D0C7 !important;
    font-size: 0.80rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.hero-slider-tab:hover {
    background: rgba(16, 22, 18, 0.85) !important;
    border-color: rgba(250, 185, 24, 0.5) !important;
    color: #FFFFFF !important;
}

.hero-slider-tab.active {
    background: rgba(16, 22, 18, 0.92) !important;
    border-color: #FAB918 !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 14px rgba(250, 185, 24, 0.35) !important;
}

.hero-tab-num {
    font-size: 0.70rem !important;
    font-weight: 800 !important;
    color: #FAB918 !important;
    letter-spacing: 0.05em !important;
}

.hero-tab-text {
    letter-spacing: 0.02em !important;
}

.hero-tab-progress-wrap {
    width: 22px !important;
    height: 2.5px !important;
    background: rgba(255, 255, 255, 0.22) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    display: inline-block !important;
}

.hero-tab-progress-fill {
    display: block !important;
    height: 100% !important;
    width: 0% !important;
    background: #FAB918 !important;
    border-radius: 2px !important;
}

.hero-slider-tab.active .hero-tab-progress-fill {
    animation: heroTabProgress 6.5s linear forwards !important;
}

@keyframes heroTabProgress {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

.hero-slider-nav-arrows {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.hero-nav-arrow {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: rgba(16, 22, 18, 0.6) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.hero-nav-arrow:hover {
    background: #FAB918 !important;
    color: #122814 !important;
    border-color: #FAB918 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(250, 185, 24, 0.4) !important;
}

/* Mobile & Tablet Responsiveness */
@media (max-width: 991px) {
    .hero-section {
        padding-bottom: 110px !important;
    }

    .hero-cinematic-scrim {
        background:
            linear-gradient(180deg, rgba(12, 16, 13, 0.65) 0%, rgba(12, 16, 13, 0.2) 20%, transparent 35%),
            linear-gradient(90deg, rgba(14, 18, 15, 0.96) 0%, rgba(20, 22, 18, 0.92) 50%, rgba(32, 22, 18, 0.75) 75%, rgba(0, 0, 0, 0.2) 100%),
            linear-gradient(0deg, rgba(10, 14, 11, 0.9) 0%, rgba(12, 16, 13, 0.4) 25%, transparent 40%) !important;
    }

    .hero-slider-bottom {
        bottom: 20px !important;
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding-top: 92px !important;
        padding-bottom: 100px !important;
    }

    .hero-slider-tab {
        padding: 6px 12px !important;
        font-size: 0.75rem !important;
    }

    .hero-tab-progress-wrap {
        display: none !important;
    }

    .hero-metrics-bar {
        gap: 14px !important;
        padding: 10px 14px !important;
    }

    .hero-metric-num {
        font-size: 1.15rem !important;
    }

    .hero-cta-group {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .hero-cta-primary,
    .hero-cta-secondary {
        justify-content: center !important;
    }
}

@media (max-width: 768px) {
    .hero-section {
        min-height: auto !important;
        padding-top: 116px !important;
        padding-bottom: 56px !important;
    }

    .hero-bg-image {
        object-position: 78% center !important;
    }

    .hero-cinematic-scrim {
        background: linear-gradient(180deg, rgba(12, 16, 13, 0.85) 0%, rgba(14, 18, 15, 0.78) 45%, rgba(14, 18, 15, 0.92) 100%) !important;
    }

    .hero-content-column {
        max-width: 100% !important;
        gap: 16px !important;
    }

    .hero-cinematic-headline {
        font-size: 2.15rem !important;
        line-height: 1.15 !important;
    }

    .hero-cinematic-subheadline {
        font-size: 0.98rem !important;
    }

    .hero-metrics-bar {
        width: 100% !important;
        justify-content: space-between !important;
        gap: 8px !important;
        padding: 10px 14px !important;
    }

    .hero-metric-num {
        font-size: 1.15rem !important;
    }

    .hero-metric-lbl {
        font-size: 0.64rem !important;
    }

    .hero-cta-group {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .hero-cta-primary,
    .hero-cta-secondary {
        width: 100% !important;
        justify-content: center !important;
    }
}

@media (max-width: 390px) {
    .hero-cinematic-headline {
        font-size: 1.95rem !important;
    }

    .hero-metrics-bar {
        padding: 8px 10px !important;
        gap: 6px !important;
    }

    .hero-metric-num {
        font-size: 1.05rem !important;
    }

    .hero-metric-lbl {
        font-size: 0.60rem !important;
    }
}

/* ============================================================
   MINIMALIST CINEMATIC HERO (.blog-cinematic-hero)
   ============================================================ */
.blog-cinematic-hero {
    position: relative;
    min-height: 72vh;
    padding: 190px 24px 64px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    color: #FFFFFF;
    background-color: #0E1A0F;
}

.bch-backdrop {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.01);
    transition: transform 7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s ease;
    z-index: 1;
}

.blog-cinematic-hero:hover .bch-backdrop {
    transform: scale(1.035);
}

/* Natural Daylight Scrim: 70%+ of photo completely unobstructed */
.bch-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(10, 18, 11, 0.42) 0%,
            rgba(10, 18, 11, 0.04) 28%,
            rgba(10, 18, 11, 0.16) 55%,
            rgba(10, 18, 11, 0.82) 82%,
            #FAF8F5 100%);
    z-index: 2;
    pointer-events: none;
}

.bch-container {
    position: relative;
    z-index: 3;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

/* Minimal Kicker (Breadcrumb & Category in one subtle whisper line) */
.bch-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.bch-kicker-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.bch-kicker-link:hover {
    color: #FAB918;
    transform: translateX(-2px);
}

.bch-sep {
    color: rgba(255, 255, 255, 0.35);
    user-select: none;
}

.bch-category {
    color: #FAB918;
    font-weight: 800;
}

.bch-time {
    color: rgba(251, 248, 240, 0.75);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
}

/* Cinematic Title */
.bch-title {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: clamp(2.4rem, 4.8vw, 4.1rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.018em;
    color: #FFFFFF;
    margin: 0 0 16px;
    max-width: 980px;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}

/* Subtle Lead Excerpt */
.bch-excerpt {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.65;
    color: rgba(251, 248, 240, 0.94);
    max-width: 820px;
    margin: 0 0 28px;
    font-weight: 400;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* Minimalist Byline & Share Bar */
.bch-meta-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.bch-byline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: rgba(251, 248, 240, 0.85);
    flex-wrap: wrap;
}

.bch-by-label {
    color: rgba(251, 248, 240, 0.55);
    font-style: italic;
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
}

.bch-author {
    color: #FFFFFF;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.bch-dot {
    color: rgba(255, 255, 255, 0.35);
    user-select: none;
}

.bch-date {
    color: rgba(251, 248, 240, 0.72);
}

/* Minimalist Icon Action Buttons */
.bch-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bch-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.bch-icon-btn:hover {
    background: #FAB918;
    color: #122814;
    border-color: #FAB918;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(250, 185, 24, 0.35);
}

.bch-icon-btn#btn-copy-link {
    width: auto;
    border-radius: 999px;
    padding: 0 12px;
    gap: 6px;
}

.bch-btn-tip {
    font-size: 0.76rem;
    font-weight: 700;
}

@media (max-width: 900px) {
    .blog-cinematic-hero {
        padding-top: 140px;
        padding-bottom: 50px;
        min-height: auto;
    }

    .bch-meta-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .bch-actions {
        width: 100%;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
}

@media (max-width: 600px) {
    .bch-title {
        font-size: 2.15rem;
    }

    .bch-excerpt {
        font-size: 1.05rem;
        margin-bottom: 20px;
    }
}

/* ============================================================
   OUR SIX CORE PROGRAMMES SHOWCASE (.programmes-showcase-section)
   ============================================================ */
.programmes-showcase-section {
    padding: 120px 0 110px;
    background: #FAF7F2;
    position: relative;
    border-bottom: 1px solid #E5DFD5;
}

.prog-section-header {
    text-align: center;
    max-width: 860px;
    margin: 0 auto 64px;
}

.prog-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(250, 185, 24, 0.12);
    border: 1px solid rgba(250, 185, 24, 0.35);
    color: #8C6A15;
    padding: 6px 16px;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.prog-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #FAB918;
    box-shadow: 0 0 6px rgba(250, 185, 24, 0.8);
}

.prog-section-title {
    font-family: var(--ff-serif);
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    color: #122814;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 18px;
    letter-spacing: -0.015em;
}

.prog-section-lead {
    font-size: clamp(1.02rem, 1.18vw, 1.14rem);
    color: #4E6052;
    line-height: 1.7;
    margin: 0;
}

/* 6-Card Grid */
.prog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 60px;
}

.prog-card {
    background: #FFFFFF;
    border-radius: 20px;
    overflow: hidden;
    border: 1.5px solid rgba(27, 56, 30, 0.08);
    box-shadow: 0 8px 24px rgba(18, 40, 20, 0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
    position: relative;
}

.prog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 50px rgba(18, 40, 20, 0.12);
    border-color: rgba(250, 185, 24, 0.5);
}

/* Media Header with subtle zoom */
.prog-card-media {
    position: relative;
    height: 240px;
    overflow: hidden;
    background: #122814;
}

.prog-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.prog-card:hover .prog-card-img {
    transform: scale(1.06);
}

.prog-card-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 28, 16, 0.35) 0%, transparent 45%, rgba(14, 28, 16, 0.85) 100%);
    pointer-events: none;
}

/* Floating Badges on Image */
.prog-card-pill-left {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(14, 28, 16, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #FAB918;
    font-size: 0.70rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 100px;
    border: 1px solid rgba(250, 185, 24, 0.38);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.prog-card-pill-right {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #122814;
    font-size: 0.70rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 100px;
    border: 1px solid rgba(27, 56, 30, 0.1);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.prog-card-subtag {
    position: absolute;
    bottom: 14px;
    left: 16px;
    color: #FFFFFF;
    font-size: 0.80rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Card Body */
.prog-card-body {
    padding: 28px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.prog-card-category {
    font-size: 0.74rem;
    font-weight: 800;
    color: #8C6A15;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 8px;
    display: block;
}

.prog-card-title {
    font-family: var(--ff-serif);
    font-size: 1.42rem;
    color: #122814;
    font-weight: 800;
    margin: 0 0 12px;
    line-height: 1.25;
}

.prog-card-desc {
    font-size: 0.94rem;
    color: #526355;
    line-height: 1.62;
    margin: 0 0 20px;
}

/* Micro-highlights */
.prog-card-bullets {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 22px;
    background: #F8F5EE;
    border-radius: 12px;
    padding: 12px 14px;
    border-left: 3px solid #FAB918;
}

.prog-bullet-item {
    font-size: 0.82rem;
    font-weight: 600;
    color: #2D3E30;
    display: flex;
    align-items: center;
    gap: 8px;
}

.prog-bullet-icon {
    color: #8C6A15;
    font-weight: 800;
}

/* Card Footer */
.prog-card-footer {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(27, 56, 30, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.prog-impact-badge {
    background: rgba(36, 71, 36, 0.08);
    color: #1A3E1E;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 8px;
    letter-spacing: 0.02em;
}

.prog-card-cta {
    color: #122814;
    font-weight: 800;
    font-size: 0.88rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease, transform 0.2s ease;
}

.prog-card-cta svg {
    transition: transform 0.2s ease;
}

.prog-card:hover .prog-card-cta {
    color: #8C6A15;
}

.prog-card:hover .prog-card-cta svg {
    transform: translateX(4px);
}

/* Executive Bottom Banner */
.prog-banner {
    background: linear-gradient(135deg, #132D17 0%, #0D2010 100%);
    border-radius: 20px;
    padding: 40px 48px;
    border: 1.5px solid rgba(250, 185, 24, 0.35);
    box-shadow: 0 20px 48px rgba(10, 26, 12, 0.16);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 28px;
}

.prog-banner-content {
    max-width: 680px;
}

.prog-banner-badge {
    color: #FAB918;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

.prog-banner-title {
    font-family: var(--ff-serif);
    font-size: 1.65rem;
    color: #FFFFFF;
    font-weight: 800;
    margin: 0 0 8px;
    line-height: 1.25;
}

.prog-banner-desc {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.98rem;
    line-height: 1.6;
    margin: 0;
}

.prog-banner-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.prog-banner-btn-primary {
    background: #FAB918;
    color: #122814;
    font-weight: 800;
    padding: 13px 26px;
    border-radius: 9999px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    box-shadow: 0 4px 16px rgba(250, 185, 24, 0.35);
    transition: all 0.25s ease;
    white-space: nowrap;
}

.prog-banner-btn-primary:hover {
    background: #FFD447;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(250, 185, 24, 0.5);
}

.prog-banner-btn-secondary {
    background: transparent;
    color: #FFFFFF;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    font-weight: 700;
    padding: 12px 22px;
    border-radius: 9999px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.90rem;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.prog-banner-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #FFFFFF;
    transform: translateY(-2px);
}

/* Responsiveness: 3 columns on desktop, 2 on tablet, 1 on mobile */
@media (min-width: 992px) {
    .prog-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 32px !important;
    }
}

@media (max-width: 991px) and (min-width: 769px) {
    .prog-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
}

@media (max-width: 768px) {
    .programmes-showcase-section {
        padding: 72px 0 60px !important;
    }

    .prog-section-header {
        margin-bottom: 40px !important;
    }

    .prog-section-title {
        font-size: 2.15rem !important;
    }

    .prog-section-lead {
        font-size: 0.98rem !important;
    }

    .prog-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        width: 100% !important;
        margin-bottom: 40px !important;
    }

    .prog-card {
        border-radius: 16px !important;
    }

    .prog-card-media {
        height: 200px !important;
    }

    .prog-card-body {
        padding: 22px 18px !important;
    }

    .prog-card-title {
        font-size: 1.30rem !important;
    }

    .prog-card-desc {
        font-size: 0.90rem !important;
    }

    .prog-banner {
        padding: 26px 20px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        border-radius: 16px !important;
    }

    .prog-banner-title {
        font-size: 1.35rem !important;
    }

    .prog-banner-desc {
        font-size: 0.90rem !important;
    }

    .prog-banner-actions {
        width: 100% !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .prog-banner-btn-primary,
    .prog-banner-btn-secondary {
        width: 100% !important;
        justify-content: center !important;
    }
}



/* ============================================================
   OFFICIAL CONSERVANCIES DIRECTORY (42 CONSERVANCIES IN 7 GROUPS)
   ============================================================ */
.conservancies-directory-shell {
    margin-top: 56px;
    background: linear-gradient(145deg, #122814 0%, #173319 100%);
    border: 2px solid rgba(250, 185, 24, 0.4);
    border-radius: 28px;
    padding: 36px 36px 44px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
}

.directory-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 28px;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 24px;
}

.directory-search-box {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.35);
    border: 1.5px solid rgba(250, 185, 24, 0.35);
    border-radius: 100px;
    padding: 10px 18px;
    gap: 10px;
    width: 320px;
    max-width: 100%;
    transition: all 0.3s ease;
}

.directory-search-box:focus-within {
    border-color: #FAB918;
    box-shadow: 0 0 0 3px rgba(250, 185, 24, 0.2);
    background: rgba(0, 0, 0, 0.55);
}

.directory-search-box input {
    background: transparent;
    border: none;
    outline: none;
    color: #FFFFFF;
    font-size: 0.92rem;
    font-family: inherit;
    width: 100%;
}

.directory-search-box input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.search-clear {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.2rem;
    cursor: pointer;
    line-height: 1;
}

.search-clear:hover {
    color: #FAB918;
}

/* Filter Bar */
.directory-filter-bar {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 12px;
    margin-bottom: 20px;
    scrollbar-width: thin;
}

.directory-filter-bar::-webkit-scrollbar {
    height: 4px;
}

.directory-filter-bar::-webkit-scrollbar-thumb {
    background: rgba(250, 185, 24, 0.3);
    border-radius: 4px;
}

.group-tab {
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.16);
    border-radius: 100px;
    padding: 8px 16px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
}

.group-tab .tab-count {
    background: rgba(0, 0, 0, 0.4);
    padding: 2px 7px;
    border-radius: 100px;
    font-size: 0.74rem;
    color: #FAB918;
    border: 1px solid rgba(250, 185, 24, 0.25);
}

.group-tab:hover {
    background: rgba(250, 185, 24, 0.15);
    border-color: rgba(250, 185, 24, 0.4);
    color: #FAB918;
    transform: translateY(-1px);
}

.group-tab.active {
    background: #FAB918;
    border-color: #FAB918;
    color: #122814;
    box-shadow: 0 4px 14px rgba(250, 185, 24, 0.35);
}

.group-tab.active .tab-count {
    background: #122814;
    color: #FAB918;
    border-color: #122814;
}

.directory-status-bar {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 24px;
}

.directory-status-bar strong {
    color: #FAB918;
}

/* Group Cards */
.conservancy-groups-container {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.conservancy-group-card {
    background: rgba(0, 0, 0, 0.25);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 24px;
    transition: all 0.3s ease;
}

.conservancy-group-card:hover {
    border-color: rgba(250, 185, 24, 0.35);
    background: rgba(0, 0, 0, 0.32);
}

.group-header {
    margin-bottom: 20px;
}

.group-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.group-badge {
    background: #FAB918;
    color: #122814;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 3px 10px;
    border-radius: 100px;
}

.group-count-pill {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 100px;
}

.group-title {
    font-size: 1.32rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 4px 0 6px;
}

.group-desc {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0;
}

/* Conservancies Grid within each group */
.conservancies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.conservancy-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.25s ease;
}

.conservancy-item:hover {
    background: rgba(250, 185, 24, 0.12);
    border-color: rgba(250, 185, 24, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.c-num-badge {
    background: rgba(250, 185, 24, 0.2);
    color: #FAB918;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid rgba(250, 185, 24, 0.3);
    flex-shrink: 0;
}

.c-info {
    flex-grow: 1;
    min-width: 0;
}

.c-name {
    font-size: 0.94rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.c-tag {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.65);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conservancy-item:hover .c-name {
    color: #FAB918;
}

.conservancy-item:hover .c-tag {
    color: rgba(255, 255, 255, 0.85);
}

.c-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(250, 185, 24, 0.15);
    color: #FAB918;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.4;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.conservancy-item:hover .c-check {
    opacity: 1;
    transform: scale(1.1);
    background: #FAB918;
    color: #122814;
}

/* Empty State */
.directory-empty-state {
    text-align: center;
    padding: 48px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    border: 1px dashed rgba(250, 185, 24, 0.3);
}

.directory-empty-state h4 {
    font-size: 1.25rem;
    color: #FFFFFF;
    margin: 0 0 8px;
}

.directory-empty-state p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.92rem;
    margin: 0 0 20px;
}

.btn-reset-filters {
    background: #FAB918;
    color: #122814;
    border: none;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 10px 22px;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.btn-reset-filters:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(250, 185, 24, 0.4);
}

@media (max-width: 768px) {
    .conservancies-directory-shell {
        padding: 24px 18px 30px;
        border-radius: 20px;
    }

    .directory-search-box {
        width: 100%;
    }

    .conservancies-grid {
        grid-template-columns: 1fr;
    }
}



/* ============================================================
   UPGRADED DONORS, PARTNERS & GOVERNMENT ALLIES DIRECTORY
   ============================================================ */
.partners-section {
    background: linear-gradient(180deg, #FBF8F2 0%, #F4EFE6 100%);
    color: #1C231F;
    padding: 100px 24px;
    border-top: 2px solid #EAE3D6;
    border-bottom: 2px solid #EAE3D6;
}

.partners-container {
    max-width: 1280px;
    margin: 0 auto;
}

.partner-tier-card {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 36px 36px 40px;
    border: 1.5px solid rgba(36, 71, 36, 0.1);
    box-shadow: 0 12px 36px rgba(36, 71, 36, 0.04);
    transition: all 0.3s ease;
}

.partner-tier-card:hover {
    border-color: rgba(250, 185, 24, 0.35);
    box-shadow: 0 16px 44px rgba(36, 71, 36, 0.08);
}

.partner-tier-header {
    margin-bottom: 28px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding-bottom: 20px;
}

.partner-tier-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    padding: 4px 14px;
    border-radius: 100px;
    margin-bottom: 8px;
}

.partner-tier-tag.gold {
    background: rgba(250, 185, 24, 0.18);
    color: #9A6A00;
    border: 1px solid rgba(250, 185, 24, 0.35);
}

.partner-tier-tag.green {
    background: rgba(36, 71, 36, 0.1);
    color: #1B381E;
    border: 1px solid rgba(36, 71, 36, 0.2);
}

.partner-tier-tag.blue {
    background: rgba(0, 90, 156, 0.1);
    color: #005A9C;
    border: 1px solid rgba(0, 90, 156, 0.25);
}

.partner-tier-title {
    font-size: 1.55rem;
    font-weight: 800;
    color: #122814;
    margin: 0 0 6px;
}

.partner-tier-desc {
    font-size: 0.94rem;
    color: #556B59;
    margin: 0;
    line-height: 1.6;
    max-width: 760px;
}

/* Grid Layouts - Clean Logo Showcase */
.partner-tier-grid {
    display: grid;
    gap: 22px;
}

.donors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.government-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

/* Big & Clean Partner Logo Card */
.partner-card {
    background: #FFFFFF;
    border: 1.5px solid rgba(18, 40, 20, 0.08);
    border-radius: 18px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 136px;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 18px rgba(18, 40, 20, 0.035);
    position: relative;
    cursor: default;
    overflow: hidden;
}

.partner-card:hover {
    background: #FFFFFF;
    border-color: #FAB918;
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(18, 40, 20, 0.11), 0 0 0 1px rgba(250, 185, 24, 0.4);
}

.partner-img {
    max-height: 95px;
    max-width: 92%;
    width: auto;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.partner-card:hover .partner-img {
    transform: scale(1.08);
}

/* Custom optical balance & enlargement per brand logo */
.partner-img.img-ate {
    max-height: 110px;
    max-width: 95%;
    transform: scale(1.3);
    transform-origin: center;
}

.partner-card:hover .partner-img.img-ate {
    transform: scale(1.38);
}

.partner-img.img-wra {
    max-height: 112px;
    max-width: 95%;
    transform: scale(1.35);
    transform-origin: center;
}

.partner-card:hover .partner-img.img-wra {
    transform: scale(1.42);
}

.partner-img.img-ministry {
    max-height: 112px;
    max-width: 95%;
    transform: scale(1.38);
    transform-origin: center;
}

.partner-card:hover .partner-img.img-ministry {
    transform: scale(1.45);
}

.partner-img.img-wm {
    max-height: 105px;
    max-width: 95%;
    transform: scale(1.25);
    transform-origin: center;
}

.partner-card:hover .partner-img.img-wm {
    transform: scale(1.32);
}

.partner-img.img-wwf {
    max-height: 100px;
    max-width: 85%;
}

.partner-img.img-awf {
    max-height: 80px;
    max-width: 90%;
}

.partner-img.img-justdiggit {
    max-height: 75px;
    max-width: 90%;
}

.partner-img.img-acc {
    max-height: 98px;
    max-width: 90%;
}

.partner-img.img-rangers {
    max-height: 98px;
    max-width: 90%;
}

.partner-img.img-kws {
    max-height: 94px;
    max-width: 90%;
}

.partner-img.img-kajiado {
    max-height: 96px;
    max-width: 88%;
}

@media (max-width: 1200px) {
    .partners-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .government-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .partner-tier-card {
        padding: 24px 18px 26px;
    }

    .partner-card {
        height: 115px;
        padding: 14px 16px;
    }

    .partner-img {
        max-height: 80px;
    }

    .partner-img.img-ate,
    .partner-img.img-wra,
    .partner-img.img-ministry,
    .partner-img.img-wm {
        transform: scale(1.15);
    }

    .donors-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .partners-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .government-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 480px) {

    .partners-grid,
    .government-grid {
        grid-template-columns: 1fr;
    }
}

/* Interactive Landscape Map Section */
.landscape-map-section {
    padding: 100px 0;
    background: linear-gradient(180deg, #102412 0%, #16361A 50%, #0E2010 100%);
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
    border-top: 3px solid #FAB918;
    border-bottom: 3px solid #FAB918;
}

.map-filter-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.map-filter-btn:hover {
    background: rgba(250, 185, 24, 0.2);
    border-color: #FAB918;
    color: #FAB918;
}

.map-filter-btn.active {
    background: #FAB918;
    border-color: #FAB918;
    color: #122814;
    font-weight: 800;
}

/* Custom Leaflet Map popup styling */
.leaflet-popup-content-wrapper {
    background: #122814 !important;
    color: #FFFFFF !important;
    border: 1.5px solid #FAB918 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

.leaflet-popup-tip {
    background: #122814 !important;
}

/* Aerial Drone View (IMAGE 1.jpeg) framing for Kilimanjaro and AET Hub */
.hero-slide[data-slide-index="0"] .hero-bg-image {
    object-position: center 32% !important;
}

/* East Africa's Giants (IMAGE 3.jpeg) framing for elephant herd & savanna */
.hero-slide[data-slide-index="1"] .hero-bg-image {
    object-position: center 60% !important;
}

/* ============================================================
   REVAMPED: OUR HOLISTIC IMPACT MODEL (SECTION 2)
   ============================================================ */
.holistic-impact-section {
    padding: 110px 0 120px;
    background: radial-gradient(circle at 18% 15%, rgba(36, 71, 36, 0.45) 0%, transparent 55%),
        radial-gradient(circle at 82% 85%, rgba(250, 185, 24, 0.08) 0%, transparent 50%),
        linear-gradient(155deg, #08160B 0%, #112816 45%, #08160B 100%);
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
    border-top: 2px solid rgba(250, 185, 24, 0.35);
    border-bottom: 2px solid rgba(250, 185, 24, 0.35);
}

.holistic-impact-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(250, 185, 24, 0.8), transparent);
}

/* Section Header */
.him-header {
    text-align: center;
    max-width: 880px;
    margin: 0 auto 52px;
}

.him-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(250, 185, 24, 0.12);
    border: 1px solid rgba(250, 185, 24, 0.45);
    color: #FDCD13;
    padding: 7px 20px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(250, 185, 24, 0.15);
}

.him-badge-dot {
    width: 8px;
    height: 8px;
    background: #FDCD13;
    border-radius: 50%;
    box-shadow: 0 0 10px #FDCD13;
    display: inline-block;
    animation: himPulse 2s infinite ease-in-out;
}

@keyframes himPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.4);
        opacity: 0.6;
    }
}

.him-heading {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: clamp(2.3rem, 4vw, 3.5rem);
    line-height: 1.15;
    color: #FFFFFF;
    font-weight: 800;
    margin: 0 0 20px;
}

.him-heading-gold {
    display: block;
    background: linear-gradient(135deg, #FDCD13 0%, #FAB918 50%, #F7A927 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.him-subheading {
    font-size: 1.12rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.7;
    margin: 0 auto;
    max-width: 780px;
}

/* Theory of Change Progression Pathway Ribbon */
.him-toc-ribbon {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 56px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(250, 185, 24, 0.2);
    border-radius: 20px;
    padding: 20px;
    backdrop-filter: blur(14px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
    position: relative;
}

.him-toc-step {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px 16px 18px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}

.him-toc-step:hover {
    background: rgba(250, 185, 24, 0.08);
    border-color: rgba(250, 185, 24, 0.4);
    transform: translateY(-3px);
}

.him-toc-step.highlight {
    background: linear-gradient(145deg, rgba(250, 185, 24, 0.15), rgba(36, 71, 36, 0.3));
    border-color: rgba(250, 185, 24, 0.5);
}

.him-step-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.him-step-num {
    font-size: 0.72rem;
    font-weight: 800;
    color: #FDCD13;
    background: rgba(250, 185, 24, 0.15);
    padding: 2px 8px;
    border-radius: 6px;
    letter-spacing: 0.08em;
}

.him-step-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 4px;
    line-height: 1.3;
}

.him-step-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.45;
    margin: 0;
}

/* 4 Holistic Impact Pillars Grid */
.him-pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 64px;
}

.him-pillar-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 4px solid var(--clr-amboseli-gold);
    border-radius: 20px;
    padding: 32px 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    backdrop-filter: blur(12px);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.him-pillar-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(250, 185, 24, 0.12), transparent 70%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.him-pillar-card:hover {
    transform: translateY(-8px);
    border-color: rgba(250, 185, 24, 0.6);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4), 0 0 30px rgba(250, 185, 24, 0.15);
}

.him-pillar-card:hover::before {
    opacity: 1;
}

.him-pillar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.him-pillar-tag {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--clr-amboseli-gold);
    text-transform: uppercase;
}

.him-pillar-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(250, 185, 24, 0.12);
    border: 1px solid rgba(250, 185, 24, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FDCD13;
    transition: all 0.3s ease;
}

.him-pillar-card:hover .him-pillar-icon-box {
    background: var(--clr-amboseli-gold);
    color: #112816;
    transform: rotate(6deg) scale(1.08);
}

.him-pillar-title {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: 1.32rem;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 12px;
    line-height: 1.25;
}

.him-pillar-desc {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.6;
    margin-bottom: 22px;
    flex-grow: 1;
}

.him-pillar-meta {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.him-meta-stat {
    font-size: 1.15rem;
    font-weight: 800;
    color: #FDCD13;
    line-height: 1;
}

.him-meta-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Lower Split: Mandate & Visual Showcase */
.him-showcase-split {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 52px;
    align-items: center;
}

.him-mandate-box {
    background: rgba(255, 255, 255, 0.05);
    border-left: 5px solid var(--clr-amboseli-gold);
    border: 1px solid rgba(250, 185, 24, 0.3);
    padding: 24px 28px;
    border-radius: 18px;
    margin-bottom: 28px;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.him-mandate-eyebrow {
    color: var(--clr-amboseli-gold);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

.him-mandate-text {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.68;
    margin: 0;
}

/* Mission & Vision Twin Cards */
.him-mv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 32px;
}

.him-mv-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.him-mv-card.mission {
    border-left: 4px solid var(--clr-amboseli-gold);
}

.him-mv-card.vision {
    border-left: 4px solid #4CAF50;
}

.him-mv-card:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-3px);
}

.him-mv-badge {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px;
}

.him-mv-card.mission .him-mv-badge {
    color: var(--clr-amboseli-gold);
}

.him-mv-card.vision .him-mv-badge {
    color: #81C784;
}

.him-mv-heading {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: 1.18rem;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 8px;
}

.him-mv-quote {
    font-size: 0.94rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.6;
    margin: 0;
    font-style: italic;
}

/* CTA Buttons */
.him-cta-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.him-btn-gold {
    background: linear-gradient(135deg, #FDCD13 0%, #FAB918 100%);
    color: #0E2211;
    font-weight: 800;
    padding: 15px 32px;
    border-radius: 10px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    box-shadow: 0 8px 25px rgba(250, 185, 24, 0.35);
    transition: all 0.3s ease;
}

.him-btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(250, 185, 24, 0.5);
    color: #09170C;
}

.him-btn-outline {
    background: rgba(255, 255, 255, 0.06);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-weight: 700;
    padding: 14px 28px;
    border-radius: 10px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    transition: all 0.3s ease;
}

.him-btn-outline:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #FDCD13;
    color: #FDCD13;
    transform: translateY(-2px);
}

/* Media Showcase Card */
.him-media-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    height: 560px;
    box-shadow: 0 25px 65px rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(250, 185, 24, 0.45);
}

.him-media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.him-media-card:hover .him-media-img {
    transform: scale(1.03);
}

.him-media-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 22, 11, 0.1) 0%, rgba(8, 22, 11, 0.35) 45%, rgba(6, 17, 9, 0.95) 100%);
    pointer-events: none;
}

.him-media-top-badge {
    position: absolute;
    top: 22px;
    right: 22px;
    background: rgba(14, 34, 17, 0.88);
    backdrop-filter: blur(12px);
    border: 1px solid var(--clr-amboseli-gold);
    padding: 8px 18px;
    border-radius: 999px;
    color: var(--clr-amboseli-gold);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.him-media-bottom-glass {
    position: absolute;
    bottom: 24px;
    left: 24px;
    right: 24px;
    background: rgba(14, 34, 17, 0.92);
    border: 1px solid rgba(250, 185, 24, 0.45);
    backdrop-filter: blur(16px);
    padding: 22px 24px;
    border-radius: 18px;
    color: #FFFFFF;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.him-glass-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    text-align: center;
}

.him-glass-stat-item {
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0 10px;
}

.him-glass-stat-item:last-child {
    border-right: none;
}

.him-glass-num {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--clr-amboseli-gold);
    display: block;
    line-height: 1.1;
    margin-bottom: 4px;
}

.him-glass-lbl {
    font-size: 0.74rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Responsive Breakpoints */
@media (max-width: 1200px) {
    .him-pillars-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .him-toc-ribbon {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .him-showcase-split {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .him-media-card {
        height: 420px;
    }
}

@media (max-width: 768px) {
    .holistic-impact-section {
        padding: 80px 0;
    }

    .him-pillars-grid {
        grid-template-columns: 1fr;
    }

    .him-mv-grid {
        grid-template-columns: 1fr;
    }

    .him-glass-stats-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .him-glass-stat-item {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 10px;
    }

    .him-glass-stat-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
}

/* Core Values RIACT Showcase (Enhanced for about.html) */
.him-values-wrap {
    margin-top: 56px;
    padding-top: 48px;
    border-top: 1px solid rgba(250, 185, 24, 0.2);
}

.him-values-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.him-values-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.15rem;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: 0.04em;
}

.him-values-title-star {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(250, 185, 24, 0.2);
    border: 1px solid #FAB918;
    color: #FAB918;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.him-values-badge {
    font-size: 0.74rem;
    font-weight: 800;
    background: rgba(250, 185, 24, 0.15);
    color: #FDCD13;
    border: 1px solid rgba(250, 185, 24, 0.4);
    padding: 5px 14px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.him-values-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.him-value-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    padding: 22px 18px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.him-value-card:hover {
    background: rgba(250, 185, 24, 0.08);
    border-color: rgba(250, 185, 24, 0.45);
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
}

.him-value-letter {
    font-size: 1.6rem;
    font-weight: 900;
    color: #FDCD13;
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    line-height: 1;
    margin-bottom: 8px;
}

.him-value-name {
    font-size: 0.96rem;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 8px;
}

.him-value-text {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 1024px) {
    .him-values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .him-values-grid {
        grid-template-columns: 1fr;
    }
}



/* ==========================================================================
   AET MASTER REVIEW CSS ADDITIONS (OFFICIAL 3-PILLAR MODEL, 8 STATS, 8 PROGRAMMES, GOVERNANCE, OPPORTUNITIES)
   ========================================================================== */

/* 1. Impact at a Glance - 8 Metric Grid */
.glance-8-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 36px;
}

.glance-8-card {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 28px 24px;
    border: 1.5px solid #EAE2D3;
    box-shadow: 0 10px 28px rgba(18, 40, 20, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease;
}

.glance-8-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 42px rgba(18, 40, 20, 0.12);
    border-color: #FAB918;
}

.glance-8-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #18331C 0%, #FAB918 100%);
    opacity: 0.4;
    transition: opacity 0.28s ease, height 0.28s ease;
}

.glance-8-card:hover::before {
    opacity: 1;
    height: 5px;
}

.glance-8-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.glance-8-icon {
    width: 66px;
    height: 66px;
    border-radius: 18px;
    background: radial-gradient(circle at 35% 30%, #204523 0%, #0D1D10 100%);
    border: 1.5px solid rgba(250, 185, 24, 0.55);
    color: #FAB918;
    box-shadow: 0 10px 24px rgba(18, 40, 20, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
    position: relative;
}

.glance-8-card:hover .glance-8-icon {
    background: radial-gradient(circle at 35% 30%, #2B5E30 0%, #132A17 100%);
    border-color: #FAB918;
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 14px 32px rgba(250, 185, 24, 0.4), 0 0 20px rgba(250, 185, 24, 0.3);
}

.glance-8-icon svg {
    width: 40px;
    height: 40px;
    display: block;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.glance-8-card:hover .glance-8-icon svg {
    transform: scale(1.08);
}

.glance-8-badge {
    font-size: 0.70rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #8C6A15;
    background: rgba(250, 185, 24, 0.15);
    border: 1px solid rgba(250, 185, 24, 0.35);
    padding: 5px 12px;
    border-radius: 20px;
    transition: all 0.25s ease;
}

.glance-8-card:hover .glance-8-badge {
    background: #142816;
    color: #FAB918;
    border-color: #142816;
}

.glance-8-num {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: clamp(1.85rem, 2.5vw, 2.45rem);
    font-weight: 800;
    color: #122814;
    line-height: 1.1;
    margin-bottom: 6px;
    transition: color 0.25s ease;
}

.glance-8-num.gold {
    color: #8C6A15;
}

.glance-8-card:hover .glance-8-num.gold {
    color: #B8860B;
}

.glance-8-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: #122814;
    margin: 0 0 6px;
    line-height: 1.3;
}

.glance-8-desc {
    font-size: 0.83rem;
    color: #556258;
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 1100px) {
    .glance-8-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .glance-8-grid {
        grid-template-columns: 1fr;
    }
}

/* 2. Official AET Modern Impact Model (Cinematic Dark Showcase) */
.him-section {
    padding: 110px 0 120px;
    background: radial-gradient(circle at 15% 20%, rgba(250, 185, 24, 0.09) 0%, transparent 45%),
        radial-gradient(circle at 85% 70%, rgba(46, 204, 113, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(10, 40, 22, 0.5) 0%, transparent 70%),
        #07140B;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.him-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    opacity: 0.6;
}

.him-container {
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 2;
}

/* Section Header */
.him-header {
    text-align: center;
    max-width: 860px;
    margin: 0 auto 54px;
}

.him-brand-tag {
    font-size: 0.82rem;
    font-weight: 700;
    color: #FAB918;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(250, 185, 24, 0.12);
    border: 1px solid rgba(250, 185, 24, 0.3);
    padding: 6px 18px;
    border-radius: 999px;
}

.him-brand-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #FAB918;
    box-shadow: 0 0 10px #FAB918;
}

.him-heading {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: clamp(2.4rem, 4.4vw, 3.8rem);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.15;
    margin: 0 0 18px;
    letter-spacing: -0.01em;
}

.him-heading span {
    background: linear-gradient(135deg, #FFFFFF 20%, #FAB918 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.him-sublead {
    font-size: 1.12rem;
    color: #A2B7A7;
    line-height: 1.75;
    margin: 0 auto;
    max-width: 760px;
}

/* 1. HERO KEYSTONE: COORDINATION COMMAND DECK */
.him-hero-deck {
    background: rgba(14, 34, 20, 0.65);
    border: 1px solid rgba(250, 185, 24, 0.25);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    margin-bottom: 48px;
    overflow: hidden;
    position: relative;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.him-hero-deck:hover {
    border-color: rgba(250, 185, 24, 0.45);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

.him-deck-top-stripe {
    height: 4px;
    background: linear-gradient(90deg, #0A4A28 0%, #FAB918 35%, #1EA7DE 70%, #0A4A28 100%);
}

.him-deck-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    min-height: 380px;
}

.him-deck-content {
    padding: 44px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.him-deck-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #FAB918;
    background: rgba(250, 185, 24, 0.12);
    border: 1px solid rgba(250, 185, 24, 0.3);
    padding: 5px 14px;
    border-radius: 20px;
    width: fit-content;
    margin-bottom: 18px;
}

.him-deck-title {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: clamp(1.7rem, 2.3vw, 2.2rem);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.25;
    margin: 0 0 16px;
}

.him-deck-desc {
    font-size: 1.02rem;
    color: #C1D4C6;
    line-height: 1.7;
    margin: 0 0 28px;
}

.him-deck-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.him-dstat-item {
    text-align: left;
}

.him-dstat-val {
    font-size: 1.65rem;
    font-weight: 900;
    color: #FAB918;
    line-height: 1.1;
    display: block;
}

.him-dstat-lbl {
    font-size: 0.72rem;
    font-weight: 700;
    color: #A2B7A7;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 4px;
    display: block;
}

/* Image Side of Deck */
.him-deck-media {
    position: relative;
    overflow: hidden;
    min-height: 320px;
}

.him-deck-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.him-hero-deck:hover .him-deck-img {
    transform: scale(1.05);
}

.him-deck-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(14, 34, 20, 0.95) 0%, rgba(14, 34, 20, 0.4) 40%, rgba(14, 34, 20, 0.2) 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 28px;
}

.him-media-tag {
    align-self: flex-end;
    background: rgba(7, 20, 11, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.him-media-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2ECC71;
    box-shadow: 0 0 8px #2ECC71;
}

.him-media-caption {
    background: rgba(7, 20, 11, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    padding: 14px 20px;
    border-radius: 16px;
}

.him-media-caption h4 {
    font-size: 0.92rem;
    font-weight: 700;
    color: #FAB918;
    margin: 0 0 4px;
}

.him-media-caption p {
    font-size: 0.78rem;
    color: #E0EBE2;
    margin: 0;
    line-height: 1.4;
}

/* 2. SUBDIVIDER */
.him-subdivider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 0 0 44px;
}

.him-subdivider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15) 40%, rgba(255, 255, 255, 0.15) 60%, transparent);
}

.him-subdivider-badge {
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #C1D4C6;
    background: rgba(18, 42, 26, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 8px 20px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 3. THREE OPERATIONAL PILLARS (IMAGE CARDS) */
.him-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 56px;
}

.him-pillar-card {
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    position: relative;
    overflow: hidden;
    height: 520px;
    min-height: 520px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}

.him-pillar-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.65);
    border-color: rgba(255, 255, 255, 0.28);
}

.pillar-oversight {
    border-top: 4px solid #00E676;
}

.pillar-oversight:hover {
    border-color: #00E676;
    box-shadow: 0 26px 60px rgba(0, 230, 118, 0.22);
}

.pillar-advocacy {
    border-top: 4px solid #00C9FF;
}

.pillar-advocacy:hover {
    border-color: #00C9FF;
    box-shadow: 0 26px 60px rgba(0, 201, 255, 0.22);
}

.pillar-support {
    border-top: 4px solid #FAB918;
}

.pillar-support:hover {
    border-color: #FAB918;
    box-shadow: 0 26px 60px rgba(250, 185, 24, 0.22);
}

/* Big Cinematic Background Image */
.him-pcard-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.him-pillar-card:hover .him-pcard-bg-img,
.him-pillar-card:focus-within .him-pcard-bg-img,
.him-pillar-card.is-expanded .him-pcard-bg-img {
    transform: scale(1.07);
}

/* Light Scrim Mask - Keeps the Big Picture Bright and Clearly Visible */
.him-pcard-mask {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(5, 15, 8, 0.38) 0%, rgba(5, 15, 8, 0.05) 30%, rgba(5, 15, 8, 0.45) 55%, rgba(4, 12, 6, 0.94) 95%);
    transition: opacity 0.4s ease;
}

/* Top Floating Bar */
.him-pcard-topbar {
    position: absolute;
    top: 22px;
    left: 22px;
    right: 22px;
    z-index: 4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.him-pillar-pill {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.pillar-oversight .him-pillar-pill {
    background: rgba(0, 230, 118, 0.22);
    color: #00E676;
    border: 1px solid rgba(0, 230, 118, 0.45);
}

.pillar-advocacy .him-pillar-pill {
    background: rgba(0, 201, 255, 0.22);
    color: #00C9FF;
    border: 1px solid rgba(0, 201, 255, 0.45);
}

.pillar-support .him-pillar-pill {
    background: rgba(250, 185, 24, 0.22);
    color: #FAB918;
    border: 1px solid rgba(250, 185, 24, 0.45);
}

/* Resting State: Image Front & Center + Heading + Big Bold Highlight Numbers */
.him-pcard-resting-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 24px 24px 28px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    pointer-events: none;
}

.him-pillar-card:hover .him-pcard-resting-wrap,
.him-pillar-card:focus-within .him-pcard-resting-wrap,
.him-pillar-card.is-expanded .him-pcard-resting-wrap {
    transform: translateY(20px);
    opacity: 0;
}

.him-pcard-title {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: 2.1rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 6px;
    line-height: 1.15;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.8);
}

.him-pcard-mandate-short {
    font-size: 0.86rem;
    color: #D2E0D6;
    line-height: 1.45;
    margin: 0 0 14px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* Huge Bold Stat Highlight Badge */
.him-pcard-stat-badge {
    background: rgba(3, 12, 6, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    padding: 10px 16px;
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.him-pcard-stat-num {
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
}

.pillar-oversight .him-pcard-stat-num {
    color: #00E676;
    text-shadow: 0 0 22px rgba(0, 230, 118, 0.5);
}

.pillar-advocacy .him-pcard-stat-num {
    color: #00C9FF;
    text-shadow: 0 0 22px rgba(0, 201, 255, 0.5);
}

.pillar-support .him-pcard-stat-num {
    color: #FAB918;
    text-shadow: 0 0 22px rgba(250, 185, 24, 0.5);
}

.him-pcard-stat-meta {
    display: flex;
    flex-direction: column;
}

.him-pcard-stat-unit {
    font-size: 0.92rem;
    font-weight: 800;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

.him-pcard-stat-sub {
    font-size: 0.72rem;
    font-weight: 600;
    color: #A2B7A7;
    line-height: 1.2;
}

.him-pcard-peek-cue {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #C2D5C7;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.him-pcard-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    animation: himPulse 2s infinite ease-in-out;
}

.pillar-oversight .him-pcard-dot {
    background: #00E676;
    box-shadow: 0 0 8px #00E676;
}

.pillar-advocacy .him-pcard-dot {
    background: #00C9FF;
    box-shadow: 0 0 8px #00C9FF;
}

.pillar-support .him-pcard-dot {
    background: #FAB918;
    box-shadow: 0 0 8px #FAB918;
}

/* Slide-Up Details Drawer on Hover */
.him-pcard-drawer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    padding: 22px 24px 22px;
    background: linear-gradient(180deg, rgba(8, 22, 13, 0.96) 0%, rgba(4, 14, 8, 0.99) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 -15px 35px rgba(0, 0, 0, 0.5);
    transform: translateY(105%);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.him-pillar-card:hover .him-pcard-drawer,
.him-pillar-card:focus-within .him-pcard-drawer,
.him-pillar-card.is-expanded .him-pcard-drawer {
    transform: translateY(0);
}

.him-pcard-drawer-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.him-pcard-drawer-tag {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pillar-oversight .him-pcard-drawer-tag {
    color: #00E676;
}

.pillar-advocacy .him-pcard-drawer-tag {
    color: #00C9FF;
}

.pillar-support .him-pcard-drawer-tag {
    color: #FAB918;
}

.him-pcard-drawer-stat-inline {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.him-pcard-drawer-stat-num {
    font-size: 1.3rem;
    font-weight: 900;
    line-height: 1;
}

.pillar-oversight .him-pcard-drawer-stat-num {
    color: #00E676;
}

.pillar-advocacy .him-pcard-drawer-stat-num {
    color: #00C9FF;
}

.pillar-support .him-pcard-drawer-stat-num {
    color: #FAB918;
}

.him-pcard-drawer-stat-unit {
    font-size: 0.72rem;
    font-weight: 800;
    color: #FFFFFF;
    text-transform: uppercase;
}

.him-pcard-drawer-title {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: 1.45rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 6px;
    line-height: 1.2;
}

.him-pcard-mandate {
    font-size: 0.84rem;
    font-weight: 600;
    color: #E2ECE5;
    line-height: 1.45;
    margin: 0 0 10px;
}

.him-pcard-points {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 10px;
    padding-bottom: 10px;
}

.him-pcard-points li {
    font-size: 0.8rem;
    color: #CBD8CE;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.35;
}

.him-pt-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pillar-oversight .him-pt-icon {
    color: #00E676;
}

.pillar-advocacy .him-pt-icon {
    color: #00C9FF;
}

.pillar-support .him-pt-icon {
    color: #FAB918;
}

.him-pcard-drawer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 9px 16px;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #111A13;
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.pillar-oversight .him-pcard-drawer-btn {
    background: #00E676;
}

.pillar-advocacy .him-pcard-drawer-btn {
    background: #00C9FF;
}

.pillar-support .him-pcard-drawer-btn {
    background: #FAB918;
}

.him-pcard-drawer-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* 4. DUAL IMPACT HORIZON: PEOPLE & WILDLIFE */
.him-outcomes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.him-oc-feature {
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    position: relative;
    overflow: hidden;
    height: 480px;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}

.him-oc-feature:hover {
    transform: translateY(-5px);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.65);
    border-color: rgba(255, 255, 255, 0.28);
}

.oc-people:hover {
    border-color: rgba(250, 185, 24, 0.45);
}

.oc-ecosystem:hover {
    border-color: rgba(85, 239, 196, 0.45);
}

/* Big Cinematic Background Image */
.him-oc-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.him-oc-feature:hover .him-oc-bg-img,
.him-oc-feature:focus-within .him-oc-bg-img,
.him-oc-feature.is-expanded .him-oc-bg-img {
    transform: scale(1.06);
}

/* Light Scrim Mask for Resting Contrast - Preserves Big Photo Brightness */
.him-oc-mask {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.oc-people .him-oc-mask {
    background: linear-gradient(180deg, rgba(5, 15, 8, 0.35) 0%, rgba(5, 15, 8, 0.05) 30%, rgba(5, 15, 8, 0.5) 65%, rgba(4, 12, 6, 0.92) 100%);
}

.oc-ecosystem .him-oc-mask {
    background: linear-gradient(180deg, rgba(4, 20, 12, 0.35) 0%, rgba(4, 20, 12, 0.05) 30%, rgba(4, 20, 12, 0.5) 65%, rgba(3, 14, 8, 0.92) 100%);
}

/* Top Floating Bar (Always Visible at Top of Card) */
.him-oc-topbar {
    position: absolute;
    top: 24px;
    left: 24px;
    right: 24px;
    z-index: 4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    pointer-events: none;
}

.him-oc-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.oc-people .him-oc-badge {
    background: rgba(250, 185, 24, 0.22);
    color: #FAB918;
    border: 1px solid rgba(250, 185, 24, 0.45);
}

.oc-ecosystem .him-oc-badge {
    background: rgba(46, 204, 113, 0.22);
    color: #55EFC4;
    border: 1px solid rgba(46, 204, 113, 0.45);
}

.him-click-cue {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #FFFFFF;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.16);
    padding: 5px 12px;
    border-radius: 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.25s ease, border-color 0.25s ease;
}

.him-oc-feature:hover .him-click-cue {
    background: rgba(0, 0, 0, 0.7);
    border-color: rgba(255, 255, 255, 0.35);
}

/* Resting Title Presentation (Visible at Bottom with Photo) */
.him-oc-resting-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 28px 30px 32px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    pointer-events: none;
}

.him-oc-title {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: clamp(2rem, 2.5vw, 2.45rem);
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 10px;
    line-height: 1.15;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.75);
}

.him-oc-peek-cue {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.74rem;
    font-weight: 700;
    color: #D2E0D6;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.him-oc-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #FAB918;
    box-shadow: 0 0 8px #FAB918;
    animation: himPulse 2s infinite ease-in-out;
}

.him-oc-pulse-dot.dot-eco {
    background: #55EFC4;
    box-shadow: 0 0 8px #55EFC4;
}

@keyframes himPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.35);
        opacity: 0.65;
    }
}

.him-oc-feature:hover .him-oc-resting-wrap,
.him-oc-feature:focus-within .him-oc-resting-wrap,
.him-oc-feature.is-expanded .him-oc-resting-wrap {
    transform: translateY(20px);
    opacity: 0;
}

/* Slide-Up Frosted Glass Details Drawer (Reveals on Hover) */
.him-oc-drawer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    padding: 24px 28px 24px;
    background: linear-gradient(180deg, rgba(8, 22, 13, 0.94) 0%, rgba(4, 14, 8, 0.98) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 -15px 35px rgba(0, 0, 0, 0.45);
    transform: translateY(105%);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.him-oc-feature:hover .him-oc-drawer,
.him-oc-feature:focus-within .him-oc-drawer,
.him-oc-feature.is-expanded .him-oc-drawer {
    transform: translateY(0);
}

.him-oc-drawer-head {
    margin-bottom: 10px;
}

.him-oc-drawer-tag {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #FAB918;
    margin-bottom: 4px;
}

.him-oc-drawer-tag.tag-eco {
    color: #55EFC4;
}

.him-oc-drawer-title {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: 1.55rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0;
    line-height: 1.2;
}

.him-oc-desc {
    font-size: 0.88rem;
    color: #D2E0D6;
    line-height: 1.55;
    margin: 0 0 16px;
}

.him-oc-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 12px 0;
    margin-bottom: 16px;
}

.him-oc-mitem {
    text-align: left;
}

.him-oc-mnum {
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.1;
    display: block;
}

.oc-people .him-oc-mnum {
    color: #FAB918;
}

.oc-ecosystem .him-oc-mnum {
    color: #55EFC4;
}

.him-oc-mlbl {
    font-size: 0.68rem;
    font-weight: 600;
    color: #A2B7A7;
    line-height: 1.3;
    margin-top: 4px;
    display: block;
}

.him-oc-drawer-footer {
    display: flex;
    justify-content: flex-end;
}

.him-oc-explore-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #111A13;
    background: #FAB918;
    padding: 8px 16px;
    border-radius: 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.him-oc-explore-btn.btn-eco {
    background: #55EFC4;
}

.him-oc-feature:hover .him-oc-explore-btn {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.him-oc-explore-btn:hover {
    filter: brightness(1.08);
    transform: translateX(3px);
}

@media (max-width: 992px) {
    .him-deck-grid {
        grid-template-columns: 1fr;
    }

    .him-deck-content {
        padding: 34px 28px;
    }

    .him-pillars-grid {
        grid-template-columns: 1fr;
    }

    .him-outcomes-grid {
        grid-template-columns: 1fr;
    }

    .him-oc-feature {
        height: auto;
        min-height: 440px;
    }
}

@media (max-width: 640px) {
    .him-oc-feature {
        min-height: 480px;
    }

    .him-oc-drawer {
        padding: 20px;
    }

    .him-oc-metrics {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* 3. Eight Programmes Grid */
.prog-8grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
    margin-top: 48px;
}

@media (max-width: 1200px) {
    .prog-8grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .prog-8grid {
        grid-template-columns: 1fr;
    }
}

/* 4. Leadership & Governance Hierarchy */
.gov-tier-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px;
}

.gov-tier-badge {
    display: inline-block;
    padding: 6px 16px;
    background: #122814;
    color: #FAB918;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.gov-top-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 48px;
}

.gov-members-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.gov-card {
    background: #FFFFFF;
    border-radius: 18px;
    overflow: hidden;
    border: 1.5px solid #EAE3D6;
    box-shadow: 0 10px 28px rgba(18, 40, 20, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
}

.gov-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(18, 40, 20, 0.12);
    border-color: #FAB918;
}

.gov-card-photo-wrap {
    height: 320px;
    background: #233326;
    position: relative;
    overflow: hidden;
}

.gov-card-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.4s ease;
}

.gov-card:hover .gov-card-photo {
    transform: scale(1.04);
}

.gov-card-body {
    padding: 22px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.gov-card-name {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: 1.15rem;
    font-weight: 800;
    color: #122814;
    margin: 0 0 4px;
    line-height: 1.25;
}

.gov-card-role {
    font-size: 0.82rem;
    font-weight: 700;
    color: #9E740B;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
    display: block;
}

.gov-card-bio {
    font-size: 0.82rem;
    color: #556258;
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 1024px) {
    .gov-top-trio {
        grid-template-columns: repeat(2, 1fr);
    }

    .gov-members-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .gov-top-trio {
        grid-template-columns: 1fr;
    }

    .gov-members-grid {
        grid-template-columns: 1fr;
    }
}

/* 5. Opportunities / Careers / TORs */
.opp-card {
    background: #FFFFFF;
    border-radius: 18px;
    border: 1.5px solid #EAE3D6;
    padding: 32px 28px;
    box-shadow: 0 8px 24px rgba(18, 40, 20, 0.05);
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.opp-card:hover {
    border-color: #FAB918;
    box-shadow: 0 14px 36px rgba(18, 40, 20, 0.1);
}

.opp-badge {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 10px;
}

.opp-badge.open {
    background: #E8F5E9;
    color: #2E7D32;
}

.opp-badge.closed {
    background: #FFEBEE;
    color: #C62828;
}

.opp-title {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: 1.35rem;
    font-weight: 800;
    color: #122814;
    margin: 0 0 8px;
}

.opp-meta {
    display: flex;
    gap: 18px;
    font-size: 0.85rem;
    color: #637267;
    flex-wrap: wrap;
}

.opp-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.opp-actions {
    display: flex;
    gap: 12px;
}

/* 6. Economic Impact Section */
.eis-hero {
    background: #122814;
    color: #FFFFFF;
    border-radius: 24px;
    padding: 48px;
    border: 2px solid rgba(250, 185, 24, 0.35);
    margin-bottom: 40px;
}

.eis-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 36px;
}

.eis-stat-box {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 24px 20px;
}

.eis-val {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: 2.2rem;
    font-weight: 800;
    color: #FAB918;
    line-height: 1;
    margin-bottom: 8px;
}

.eis-lbl {
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.eis-sub {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.4;
    margin: 0;
}

@media (max-width: 992px) {
    .eis-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .eis-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   AET ORIGINAL NAVBAR SUPPLEMENTS (8-BUTTON LAYOUT)
   ============================================================ */

/* Accessibility Skip Link (Hidden until focused) */
.skip-link,
.skip-to-content {
    position: absolute !important;
    top: -120px !important;
    left: 20px !important;
    background: #FAB918 !important;
    color: #122814 !important;
    padding: 10px 18px !important;
    z-index: 99999 !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    transition: top 0.2s ease !important;
}

.skip-link:focus,
.skip-to-content:focus {
    top: 20px !important;
}

/* Strategic Horizontal Alignments for 8-Button Nav */
.nav-item:nth-child(2) .live-dropdown {
    left: -20px !important;
    right: auto !important;
    transform: translateY(12px) !important;
}

.nav-item:nth-child(2):hover .live-dropdown,
.nav-item:nth-child(2):focus-within .live-dropdown {
    transform: translateY(0) !important;
}

.nav-item:nth-child(3) .live-dropdown {
    left: -80px !important;
    right: auto !important;
    transform: translateY(12px) !important;
}

.nav-item:nth-child(3):hover .live-dropdown,
.nav-item:nth-child(3):focus-within .live-dropdown {
    transform: translateY(0) !important;
}

.nav-item:nth-child(5) .live-dropdown {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateY(12px) !important;
}

.nav-item:nth-child(5):hover .live-dropdown,
.nav-item:nth-child(5):focus-within .live-dropdown {
    transform: translateX(-50%) translateY(0) !important;
}

.nav-item:nth-child(6) .live-dropdown {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateY(12px) !important;
}

.nav-item:nth-child(6):hover .live-dropdown,
.nav-item:nth-child(6):focus-within .live-dropdown {
    transform: translateX(-50%) translateY(0) !important;
}

.nav-item:nth-child(7) .live-dropdown {
    right: -20px !important;
    left: auto !important;
    transform: translateY(12px) !important;
}

.nav-item:nth-child(7):hover .live-dropdown,
.nav-item:nth-child(7):focus-within .live-dropdown {
    transform: translateY(0) !important;
}

/* Mobile Toggle Hamburger Button */
.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #142816;
    border: 1.5px solid #FAB918;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    padding: 0;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.nav-toggle .hamburger-bar {
    width: 22px;
    height: 2.5px;
    background: #FAB918;
    border-radius: 2px;
    transition: all 0.25s ease;
    display: block;
}

.nav-toggle:hover {
    background: #244724;
    transform: scale(1.05);
}

@media (max-width: 1140px) {
    .nav-menu {
        display: none !important;
    }

    .nav-toggle {
        display: flex !important;
    }

    .header-container {
        height: 76px !important;
    }

    .brand-circle-badge {
        width: 46px !important;
        height: 46px !important;
    }

    .brand-circle-img,
    .brand-logo-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    .brand-full-name {
        font-size: 1.04rem !important;
    }
}

/* Mobile Menu Active States */
.mobile-menu.is-active,
.mobile-menu.active,
.mobile-menu.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Ensure all live-dropdowns show smoothly on hover & focus */
.nav-item.has-dropdown:hover>.live-dropdown,
.nav-item.has-dropdown:focus-within>.live-dropdown,
.nav-item:hover>.live-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: block !important;
}

/* ============================================================
   ABOUT US PAGE — PREMIUM ENHANCED AESTHETICS (2026)
   ============================================================ */

/* 1. Hero Section */
.abt-hero {
    position: relative;
    background: linear-gradient(135deg, rgba(18, 36, 20, 0.92) 0%, rgba(24, 48, 27, 0.88) 50%, rgba(14, 28, 16, 0.95) 100%),
        url('../img/Copy of AET HQ Drone shot .jpg') center/cover no-repeat;
    padding: 140px 0 90px;
    color: #FFFFFF;
    border-bottom: 4px solid #FAB918;
    overflow: hidden;
}

.abt-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% 20%, rgba(250, 185, 24, 0.12) 0%, transparent 60%);
    pointer-events: none;
}

.abt-hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 48px;
    align-items: center;
}

.abt-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(250, 185, 24, 0.15);
    border: 1px solid rgba(250, 185, 24, 0.6);
    backdrop-filter: blur(8px);
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    color: #FAB918;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
}

.abt-hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FAB918;
    box-shadow: 0 0 10px #FAB918;
    animation: abtPulse 2s infinite;
}

@keyframes abtPulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}

.abt-hero-title {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: clamp(2.4rem, 4.4vw, 3.8rem);
    font-weight: 800;
    line-height: 1.14;
    color: #FFFFFF;
    margin: 0 0 20px;
    letter-spacing: -0.02em;
}

.abt-hero-title span {
    color: #FAB918;
    position: relative;
}

.abt-hero-lead {
    font-size: 1.15rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 32px;
    max-width: 640px;
}

.abt-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}

.abt-btn-gold {
    background: #FAB918;
    color: #122814;
    font-weight: 800;
    font-size: 0.92rem;
    padding: 13px 26px;
    border-radius: 10px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 24px rgba(250, 185, 24, 0.35);
    transition: all 0.25s ease;
}

.abt-btn-gold:hover {
    background: #E5A812;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(250, 185, 24, 0.45);
    color: #0E1F10;
}

.abt-btn-ghost {
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.92rem;
    padding: 12px 22px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    text-decoration: none;
    backdrop-filter: blur(6px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
}

.abt-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    color: #FAB918;
}

/* Quick Nav Ribbon */
.abt-quick-nav {
    display: flex;
    gap: 10px;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    flex-wrap: wrap;
}

.abt-quick-link {
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: all 0.2s ease;
}

.abt-quick-link:hover {
    color: #FAB918;
    background: rgba(250, 185, 24, 0.15);
    border-color: #FAB918;
}

/* Hero Glass Card (Right Column) */
.abt-hero-card {
    background: rgba(18, 40, 20, 0.75);
    border: 1.5px solid rgba(250, 185, 24, 0.45);
    backdrop-filter: blur(14px);
    border-radius: 24px;
    padding: 32px 28px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    position: relative;
}

.abt-hero-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    margin-bottom: 22px;
}

.abt-hero-card-title {
    font-size: 0.85rem;
    font-weight: 800;
    color: #FAB918;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.abt-hero-card-badge {
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(250, 185, 24, 0.2);
    color: #FAB918;
    padding: 3px 10px;
    border-radius: 12px;
}

.abt-hero-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.abt-hm-item {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 16px 14px;
    transition: all 0.2s ease;
}

.abt-hm-item:hover {
    background: rgba(250, 185, 24, 0.1);
    border-color: rgba(250, 185, 24, 0.4);
    transform: translateY(-2px);
}

.abt-hm-val {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: 1.8rem;
    font-weight: 800;
    color: #FAB918;
    line-height: 1;
    margin-bottom: 6px;
}

.abt-hm-lbl {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.85);
}

.abt-hero-card-footer {
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    gap: 10px;
}

.abt-hero-card-footer svg {
    color: #FAB918;
    flex-shrink: 0;
}

/* 2. Who We Are Section */
.abt-section {
    padding: 95px 0;
    position: relative;
}

.abt-section-light {
    background: #FFFFFF;
    border-bottom: 1px solid #EAE3D6;
}

.abt-section-warm {
    background: #FAF7F0;
    border-bottom: 1px solid #EAE3D6;
}

.abt-section-dark {
    background: #142816;
    color: #FFFFFF;
    border-bottom: 1px solid rgba(250, 185, 24, 0.25);
}

.abt-sec-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(250, 185, 24, 0.18);
    color: #8C6A15;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 14px;
    border: 1px solid rgba(250, 185, 24, 0.4);
}

.abt-section-dark .abt-sec-tag {
    background: rgba(250, 185, 24, 0.15);
    color: #FAB918;
    border-color: rgba(250, 185, 24, 0.45);
}

.abt-sec-heading {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: clamp(2.1rem, 3.6vw, 3rem);
    font-weight: 800;
    color: #122814;
    line-height: 1.18;
    margin: 0 0 20px;
}

.abt-section-dark .abt-sec-heading {
    color: #FFFFFF;
}

.abt-sec-sub {
    font-size: 1.08rem;
    color: #556258;
    line-height: 1.75;
    margin: 0 0 24px;
}

.abt-section-dark .abt-sec-sub {
    color: rgba(255, 255, 255, 0.85);
}

/* Two Column Who We Are */
.abt-who-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 52px;
    align-items: center;
}

.abt-lead-quote {
    border-left: 4px solid #FAB918;
    padding-left: 20px;
    font-size: 1.18rem;
    font-style: italic;
    color: #122814;
    font-weight: 600;
    margin: 0 0 24px;
    line-height: 1.6;
}

.abt-ranches-wrap {
    margin: 28px 0;
    background: #FAF7F0;
    border: 1px solid #EAE3D6;
    border-radius: 16px;
    padding: 20px 22px;
}

.abt-ranches-title {
    font-size: 0.78rem;
    font-weight: 800;
    color: #8C6A15;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.abt-ranches-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.abt-chip {
    background: #FFFFFF;
    color: #122814;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid #E2DACC;
    box-shadow: 0 2px 6px rgba(18, 40, 20, 0.04);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.abt-chip-bullet {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FAB918;
}

/* Image Visual Card */
.abt-media-frame {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(18, 40, 20, 0.16);
    border: 4px solid #FFFFFF;
}

.abt-media-img {
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.abt-media-frame:hover .abt-media-img {
    transform: scale(1.03);
}

.abt-media-caption-card {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: rgba(18, 40, 20, 0.88);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(250, 185, 24, 0.4);
    border-radius: 16px;
    padding: 16px 20px;
    color: #FFFFFF;
}

.abt-mcc-tag {
    font-size: 0.68rem;
    font-weight: 800;
    color: #FAB918;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
}

.abt-mcc-title {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0;
    color: #FFFFFF;
}

/* 3. Vision, Mission & RIACT Values */
.abt-vm-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 48px;
}

.abt-vm-card {
    border-radius: 24px;
    padding: 44px 38px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.abt-vm-card:hover {
    transform: translateY(-4px);
}

.abt-vm-card.vision {
    background: #142816;
    color: #FFFFFF;
    border: 2px solid rgba(250, 185, 24, 0.45);
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.2);
}

.abt-vm-card.mission {
    background: #FFFFFF;
    color: #122814;
    border: 2px solid #EAE3D6;
    box-shadow: 0 16px 45px rgba(18, 40, 20, 0.06);
}

.abt-vm-badge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.abt-vm-badge {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.abt-vm-card.vision .abt-vm-badge {
    background: rgba(250, 185, 24, 0.18);
    color: #FAB918;
    border: 1px solid rgba(250, 185, 24, 0.4);
}

.abt-vm-card.mission .abt-vm-badge {
    background: rgba(250, 185, 24, 0.18);
    color: #8C6A15;
    border: 1px solid rgba(250, 185, 24, 0.4);
}

.abt-vm-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.abt-vm-card.vision .abt-vm-icon-box {
    background: rgba(250, 185, 24, 0.15);
    color: #FAB918;
}

.abt-vm-card.mission .abt-vm-icon-box {
    background: #FAF7F0;
    color: #122814;
    border: 1px solid #EAE3D6;
}

.abt-vm-quote {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: clamp(1.65rem, 2.3vw, 2.15rem);
    font-weight: 800;
    line-height: 1.28;
    margin: 0 0 16px;
}

.abt-vm-card.vision .abt-vm-quote {
    color: #FFFFFF;
}

.abt-vm-card.mission .abt-vm-quote {
    color: #122814;
}

.abt-vm-desc {
    font-size: 0.96rem;
    line-height: 1.65;
    margin: 0;
}

.abt-vm-card.vision .abt-vm-desc {
    color: rgba(255, 255, 255, 0.8);
}

.abt-vm-card.mission .abt-vm-desc {
    color: #556258;
}

/* RIACT Values Grid */
.abt-riact-box {
    background: #FFFFFF;
    border-radius: 24px;
    border: 1.5px solid #EAE3D6;
    padding: 44px 36px;
    box-shadow: 0 12px 36px rgba(18, 40, 20, 0.05);
}

.abt-riact-head {
    text-align: center;
    margin-bottom: 36px;
}

.abt-riact-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

.abt-riact-card {
    background: #FAF7F0;
    border-radius: 16px;
    padding: 26px 18px;
    text-align: center;
    border: 1.5px solid #EAE3D6;
    border-top: 4px solid #122814;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.abt-riact-card:hover {
    transform: translateY(-5px);
    border-top-color: #FAB918;
    border-color: #FAB918;
    box-shadow: 0 12px 28px rgba(250, 185, 24, 0.2);
    background: #FFFFFF;
}

.abt-riact-glyph {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #142816;
    color: #FAB918;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    box-shadow: 0 4px 12px rgba(18, 40, 20, 0.15);
    transition: all 0.25s ease;
}

.abt-riact-card:hover .abt-riact-glyph {
    background: #FAB918;
    color: #122814;
    transform: scale(1.08);
}

.abt-riact-glyph svg {
    width: 24px;
    height: 24px;
}

.abt-riact-letter {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: 1.6rem;
    font-weight: 900;
    color: #8C6A15;
    line-height: 1;
    margin-bottom: 6px;
}

.abt-riact-title {
    font-size: 0.92rem;
    font-weight: 800;
    color: #122814;
    margin: 0 0 8px;
    line-height: 1.25;
}

.abt-riact-desc {
    font-size: 0.82rem;
    color: #556258;
    line-height: 1.5;
    margin: 0;
}

/* 4. Evolution Timeline Section */
.abt-timeline-wrap {
    position: relative;
    max-width: 1040px;
    margin: 40px auto 0;
}

.abt-timeline-spine {
    position: absolute;
    top: 40px;
    bottom: 40px;
    left: 50%;
    width: 3px;
    background: linear-gradient(180deg, #122814 0%, #FAB918 50%, #122814 100%);
    transform: translateX(-50%);
    border-radius: 2px;
}

.abt-tl-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-bottom: 42px;
    align-items: center;
}

.abt-tl-item.reverse {
    direction: rtl;
}

.abt-tl-item.reverse .abt-tl-content {
    direction: ltr;
}

.abt-tl-node {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #FAB918;
    border: 4px solid #142816;
    box-shadow: 0 0 0 4px rgba(250, 185, 24, 0.25);
    z-index: 3;
    transition: all 0.25s ease;
}

.abt-tl-item:hover .abt-tl-node {
    transform: translate(-50%, -50%) scale(1.3);
    background: #142816;
    border-color: #FAB918;
    box-shadow: 0 0 16px #FAB918;
}

.abt-tl-content {
    background: #FAF7F0;
    border: 1.5px solid #EAE3D6;
    border-radius: 20px;
    padding: 28px 24px;
    box-shadow: 0 8px 26px rgba(18, 40, 20, 0.05);
    transition: all 0.3s ease;
    position: relative;
}

.abt-tl-content:hover {
    transform: translateY(-4px);
    border-color: #FAB918;
    background: #FFFFFF;
    box-shadow: 0 16px 40px rgba(18, 40, 20, 0.1);
}

.abt-tl-badge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 8px;
    flex-wrap: wrap;
}

.abt-tl-year {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: 1.15rem;
    font-weight: 900;
    color: #122814;
    background: #FAB918;
    padding: 4px 14px;
    border-radius: 20px;
    display: inline-block;
}

.abt-tl-category {
    font-size: 0.72rem;
    font-weight: 800;
    color: #8C6A15;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.abt-tl-title {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: 1.25rem;
    font-weight: 800;
    color: #122814;
    margin: 0 0 8px;
    line-height: 1.3;
}

.abt-tl-desc {
    font-size: 0.88rem;
    color: #556258;
    line-height: 1.6;
    margin: 0;
}

/* 5. Strategic Goals Section */
.abt-goals-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 36px;
}

.abt-goal-card {
    background: #FFFFFF;
    border-radius: 20px;
    border: 1.5px solid #EAE3D6;
    padding: 34px 26px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.abt-goal-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #FAB918;
    opacity: 0.5;
    transition: opacity 0.25s ease, height 0.25s ease;
}

.abt-goal-card:hover {
    transform: translateY(-5px);
    border-color: #FAB918;
    box-shadow: 0 16px 40px rgba(18, 40, 20, 0.1);
}

.abt-goal-card:hover::before {
    opacity: 1;
    height: 5px;
}

.abt-goal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.abt-goal-num {
    font-size: 0.75rem;
    font-weight: 800;
    color: #8C6A15;
    background: rgba(250, 185, 24, 0.2);
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.abt-goal-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #FAF7F0;
    color: #122814;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #EAE3D6;
    transition: all 0.25s ease;
}

.abt-goal-card:hover .abt-goal-icon {
    background: #142816;
    color: #FAB918;
}

.abt-goal-title {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: 1.25rem;
    font-weight: 800;
    color: #122814;
    margin: 0 0 10px;
    line-height: 1.3;
}

.abt-goal-desc {
    font-size: 0.88rem;
    color: #556258;
    line-height: 1.6;
    margin: 0 0 20px;
}

.abt-goal-target {
    background: #FAF7F0;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #122814;
    border-left: 3px solid #FAB918;
}

/* 6. Landscape at a Glance Impact Ribbon */
.abt-impact-ribbon {
    background: #142816;
    color: #FFFFFF;
    border-radius: 24px;
    padding: 44px 40px;
    border: 2px solid rgba(250, 185, 24, 0.4);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    margin: 60px 0;
}

.abt-ir-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    text-align: center;
}

.abt-ir-val {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: 2.6rem;
    font-weight: 900;
    color: #FAB918;
    line-height: 1;
    margin-bottom: 8px;
}

.abt-ir-lbl {
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #FFFFFF;
    margin-bottom: 4px;
}

.abt-ir-sub {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
}

/* 7. Leadership, Team & Opportunity Portals */
.abt-portals-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.abt-portal-card {
    background: #FAF7F0;
    border-radius: 22px;
    border: 1.5px solid #EAE3D6;
    padding: 38px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.25s ease;
}

.abt-portal-card:hover {
    transform: translateY(-5px);
    border-color: #FAB918;
    background: #FFFFFF;
    box-shadow: 0 16px 40px rgba(18, 40, 20, 0.08);
}

.abt-portal-avatars {
    display: flex;
    align-items: center;
    margin: 18px 0;
}

.abt-avatar-img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #FFFFFF;
    margin-right: -12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    background: #233326;
}

.abt-avatar-plus {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #142816;
    color: #FAB918;
    font-size: 0.78rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #FFFFFF;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 8. Partner Logos Grid (Crisp White Tile Container) */
.abt-partners-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin-top: 36px;
}

.abt-partner-card {
    background: #FFFFFF;
    border: 1.5px solid #EAE3D6;
    border-radius: 16px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 120px;
    box-shadow: 0 4px 14px rgba(18, 40, 20, 0.04);
    transition: all 0.25s ease;
}

.abt-partner-card:hover {
    transform: translateY(-4px);
    border-color: #FAB918;
    box-shadow: 0 12px 28px rgba(18, 40, 20, 0.1);
}

.abt-partner-img {
    max-width: 100%;
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin-bottom: 8px;
    filter: grayscale(15%);
    transition: filter 0.25s ease, transform 0.25s ease;
}

.abt-partner-card:hover .abt-partner-img {
    filter: grayscale(0%);
    transform: scale(1.05);
}

.abt-partner-name {
    font-size: 0.74rem;
    font-weight: 700;
    color: #122814;
    line-height: 1.25;
}

/* 9. Noonkotiak Resource Centre Spotlight */
.abt-spotlight-card {
    background: #142816;
    color: #FFFFFF;
    border-radius: 24px;
    border: 2px solid rgba(250, 185, 24, 0.4);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
    margin-top: 48px;
}

.abt-spotlight-body {
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.abt-spotlight-media {
    position: relative;
    min-height: 380px;
}

.abt-spotlight-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.abt-spotlight-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 24px 0 0;
}

.abt-sf-item {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 8px;
}

.abt-sf-item svg {
    color: #FAB918;
    flex-shrink: 0;
}

/* Responsive Media Queries */
@media (max-width: 1100px) {
    .abt-hero-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .abt-hero-card {
        max-width: 600px;
    }

    .abt-who-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .abt-riact-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .abt-goals-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .abt-partners-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .abt-ir-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .abt-portals-grid {
        grid-template-columns: 1fr;
    }

    .abt-spotlight-card {
        grid-template-columns: 1fr;
    }

    .abt-spotlight-media {
        min-height: 280px;
    }
}

@media (max-width: 768px) {
    .abt-hero {
        padding: 110px 0 70px;
    }

    .abt-section {
        padding: 70px 0;
    }

    .abt-vm-row {
        grid-template-columns: 1fr;
    }

    .abt-riact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .abt-timeline-spine {
        left: 20px;
    }

    .abt-tl-item,
    .abt-tl-item.reverse {
        grid-template-columns: 1fr;
        gap: 0;
        padding-left: 50px;
        direction: ltr !important;
    }

    .abt-tl-node {
        left: 20px;
        top: 24px;
        transform: translate(-50%, 0);
    }

    .abt-tl-item:hover .abt-tl-node {
        transform: translate(-50%, 0) scale(1.3);
    }

    .abt-goals-grid {
        grid-template-columns: 1fr;
    }

    .abt-partners-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .abt-ir-grid {
        grid-template-columns: 1fr;
    }

    .abt-spotlight-body {
        padding: 30px 24px;
    }

    .abt-spotlight-features {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .abt-riact-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================================
   STRATEGIC PLAN 2024–2028 INTERACTIVE MODAL & CLICKABLE CARDS
   ======================================================== */

.him-clickable {
    cursor: pointer !important;
    position: relative;
    user-select: none;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),
        border-color 0.35s ease,
        box-shadow 0.35s ease !important;
}

.him-clickable:hover {
    transform: translateY(-6px) !important;
}

.him-clickable:focus-visible {
    outline: 2px solid #FAB918 !important;
    outline-offset: 4px;
}

/* Interactive Click Cue Badges */
.him-click-cue {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #FAB918;
    background: rgba(250, 185, 24, 0.15);
    border: 1px solid rgba(250, 185, 24, 0.4);
    padding: 4px 12px;
    border-radius: 999px;
    transition: all 0.25s ease;
    backdrop-filter: blur(8px);
}

.him-clickable:hover .him-click-cue {
    background: #FAB918;
    color: #122814;
    border-color: #FAB918;
    box-shadow: 0 0 14px rgba(250, 185, 24, 0.4);
}

/* Header brand button styling */
button.him-brand-tag {
    cursor: pointer;
    background: rgba(250, 185, 24, 0.12);
    border: 1px solid rgba(250, 185, 24, 0.35);
    transition: all 0.25s ease;
    font-family: inherit;
}

button.him-brand-tag:hover {
    background: rgba(250, 185, 24, 0.24);
    border-color: #FAB918;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(250, 185, 24, 0.25);
}

/* Section 4 Programme Cards Clickable */
.prog-card {
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.35s ease;
}

.prog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(18, 40, 20, 0.18);
}

/* Modal Overlay & Container */
.sp-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(3, 10, 6, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease;
}

.sp-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.sp-modal-container {
    background: #09190F;
    background-image:
        radial-gradient(circle at 10% 10%, rgba(250, 185, 24, 0.12) 0%, transparent 45%),
        radial-gradient(circle at 90% 90%, rgba(46, 204, 113, 0.12) 0%, transparent 50%),
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: auto, auto, 40px 40px, 40px 40px;
    border: 1px solid rgba(250, 185, 24, 0.35);
    border-radius: 24px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.8), 0 0 50px rgba(250, 185, 24, 0.12);
    width: 100%;
    max-width: 960px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transform: scale(0.93) translateY(24px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.sp-modal-overlay.active .sp-modal-container {
    transform: scale(1) translateY(0);
}

/* Modal Top Bar */
.sp-modal-top-stripe {
    height: 4px;
    background: linear-gradient(90deg, #0A4A28 0%, #FAB918 35%, #00E676 70%, #0A4A28 100%);
}

.sp-modal-header {
    padding: 24px 32px 18px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sp-modal-header-info {
    max-width: 780px;
}

.sp-modal-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #FAB918;
    background: rgba(250, 185, 24, 0.12);
    border: 1px solid rgba(250, 185, 24, 0.3);
    padding: 4px 14px;
    border-radius: 999px;
    margin-bottom: 8px;
}

.sp-modal-title {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 6px;
    line-height: 1.25;
}

.sp-modal-sub {
    font-size: 0.88rem;
    color: #A2B7A7;
    margin: 0;
    line-height: 1.5;
}

.sp-modal-close {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.sp-modal-close:hover {
    background: rgba(250, 185, 24, 0.2);
    border-color: #FAB918;
    color: #FAB918;
    transform: rotate(90deg);
}

/* Modal Nav Tabs */
.sp-modal-tabs {
    display: flex;
    gap: 8px;
    padding: 12px 32px;
    background: rgba(5, 15, 8, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    overflow-x: auto;
    scrollbar-width: none;
}

.sp-modal-tabs::-webkit-scrollbar {
    display: none;
}

.sp-tab-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #A2B7A7;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}

.sp-tab-btn:hover {
    color: #FFFFFF;
    border-color: rgba(250, 185, 24, 0.4);
    background: rgba(250, 185, 24, 0.06);
}

.sp-tab-btn.active {
    background: #FAB918;
    color: #122814;
    border-color: #FAB918;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(250, 185, 24, 0.3);
}

/* Modal Body */
.sp-modal-body {
    padding: 28px 32px;
    overflow-y: auto;
    flex-grow: 1;
    max-height: calc(88vh - 200px);
    scrollbar-width: thin;
    scrollbar-color: rgba(250, 185, 24, 0.3) rgba(10, 25, 14, 0.5);
}

.sp-modal-body::-webkit-scrollbar {
    width: 6px;
}

.sp-modal-body::-webkit-scrollbar-track {
    background: rgba(10, 25, 14, 0.5);
}

.sp-modal-body::-webkit-scrollbar-thumb {
    background-color: rgba(250, 185, 24, 0.3);
    border-radius: 4px;
}

.sp-tab-panel {
    display: none;
    animation: spFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.sp-tab-panel.active {
    display: block;
}

@keyframes spFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Inner Panel Layout */
.sp-panel-lead {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px 20px;
}

.sp-panel-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sp-panel-icon.gold {
    background: rgba(250, 185, 24, 0.15);
    color: #FAB918;
}

.sp-panel-icon.green {
    background: rgba(0, 230, 118, 0.15);
    color: #00E676;
}

.sp-panel-icon.cyan {
    background: rgba(0, 201, 255, 0.15);
    color: #00C9FF;
}

.sp-panel-mandate {
    font-size: 1.02rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.45;
    margin: 0;
}

.sp-panel-desc {
    font-size: 0.94rem;
    color: #C1D4C6;
    line-height: 1.7;
    margin: 0 0 24px;
}

/* Key Targets & Pillars 2-Column Grid inside Modal */
.sp-panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.sp-panel-box {
    background: rgba(14, 34, 20, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px;
}

.sp-panel-box-title {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #FAB918;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sp-targets-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sp-targets-list li {
    font-size: 0.85rem;
    color: #CBD8CE;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.sp-target-check {
    color: #00E676;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Metrics Strip inside Modal */
.sp-metrics-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sp-metric-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 12px 16px;
    text-align: left;
}

.sp-mval {
    font-size: 1.5rem;
    font-weight: 900;
    color: #FAB918;
    line-height: 1.1;
    display: block;
}

.sp-mlbl {
    font-size: 0.72rem;
    font-weight: 700;
    color: #A2B7A7;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 4px;
    display: block;
}

/* Modal Footer */
.sp-modal-footer {
    padding: 18px 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(5, 15, 8, 0.7);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.sp-footer-btn-primary {
    background: #FAB918;
    color: #122814;
    border: none;
    font-size: 0.85rem;
    font-weight: 800;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.sp-footer-btn-primary:hover {
    background: #E0A510;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(250, 185, 24, 0.35);
}

.sp-footer-btn-secondary {
    background: transparent;
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.sp-footer-btn-secondary:hover {
    border-color: #FAB918;
    color: #FAB918;
}

@media (max-width: 768px) {
    .sp-modal-header {
        padding: 20px 20px 14px;
    }

    .sp-modal-tabs {
        padding: 10px 20px;
    }

    .sp-modal-body {
        padding: 20px;
    }

    .sp-panel-grid {
        grid-template-columns: 1fr;
    }

    .sp-metrics-strip {
        grid-template-columns: 1fr;
    }

    .sp-modal-footer {
        padding: 16px 20px;
        flex-direction: column;
        align-items: stretch;
    }

    .sp-modal-footer a,
    .sp-modal-footer button {
        justify-content: center;
    }
}




/* ==========================================================================
   STRATEGIC PROGRAMMES SECTION - REFINED REFERENCE DESIGN
   Warm Cream Canvas, Dark Forest Green Cards, Golden Amber Highlights,
   and Minimal Bottom Hover Drawer (Leaves Upper Photograph Unobstructed)
   ========================================================================== */

/* 1. Main Section Container (Warm Cream Canvas) */
.progs-revamp-section {
    padding: 85px 0 100px;
    background: radial-gradient(circle at 50% 0%, #FFFFFF 0%, #FAF7F0 45%, #F4ECE0 100%);
    position: relative;
    overflow: hidden;
    border-top: 1.5px solid #EBE4D8;
    border-bottom: 4px solid #FAB918;
    color: #122814;
}

.progs-revamp-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(ellipse at 50% 15%, rgba(250, 185, 24, 0.05) 0%, transparent 60%);
    pointer-events: none;
}

.progs-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 2;
}

/* 2. Centred Header */
.progs-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 30px;
}

.progs-badge {
    font-size: 0.74rem;
    font-weight: 800;
    color: #8C6207;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(250, 185, 24, 0.16);
    border: 1.5px solid rgba(229, 169, 34, 0.45);
    padding: 6px 20px;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(229, 169, 34, 0.12);
}

.progs-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #E5A922;
    box-shadow: 0 0 6px rgba(229, 169, 34, 0.7);
}

.progs-title {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: clamp(2.5rem, 4.4vw, 3.6rem);
    font-weight: 800;
    color: #122814;
    line-height: 1.15;
    margin: 0 0 12px;
    letter-spacing: -0.015em;
}

.progs-title span {
    color: #EAA816;
}

.progs-lead {
    font-size: 1.05rem;
    color: #4C5A50;
    line-height: 1.68;
    margin: 0 auto;
    max-width: 760px;
}

/* 3. Horizontal Statistics Bar (5 Columns) */
.progs-stats-bar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: #FFFFFF;
    border: 1.5px solid #EBE4D8;
    border-radius: 20px;
    padding: 20px 24px;
    margin: 32px 0 36px;
    box-shadow: 0 8px 30px rgba(18, 40, 20, 0.04);
}

.progs-stat-col {
    text-align: center;
    position: relative;
    padding: 4px 10px;
}

.progs-stat-col:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: #EBE4D8;
}

.progs-stat-val {
    font-size: 2.05rem;
    font-weight: 900;
    color: #122814;
    line-height: 1.1;
    display: block;
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
}

.progs-stat-lbl {
    font-size: 0.72rem;
    font-weight: 800;
    color: #4C5A50;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 5px;
    display: block;
}

/* 4. Two-Column Main Stage */
.progs-main-grid {
    display: grid;
    grid-template-columns: 410px 1fr;
    gap: 24px;
    align-items: stretch;
}

/* 5. Left Column: 8 Vertically Stacked Cards */
.progs-cards-stack {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.prog-stack-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-radius: 12px;
    padding: 10px 14px;
    cursor: pointer;
    text-align: left;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
    text-decoration: none;
    font-family: inherit;
    position: relative;
    
    /* Inactive State: Deep Rich Forest Green */
    background: #112316;
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: #FFFFFF;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.prog-stack-card:hover {
    background: #18381C;
    border-color: rgba(245, 166, 35, 0.35);
    transform: translateX(3px);
}

.prog-stack-num {
    background: rgba(0, 0, 0, 0.3);
    color: #F5A623;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.82rem;
    margin-right: 12px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.prog-stack-info {
    flex: 1;
    min-width: 0;
    margin-right: 10px;
}

.prog-stack-eyebrow {
    font-size: 0.65rem;
    font-weight: 800;
    color: #F5A623;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: block;
    line-height: 1.2;
    transition: color 0.2s ease;
}

.prog-stack-title {
    font-size: 0.86rem;
    font-weight: 700;
    color: #FFFFFF;
    display: block;
    line-height: 1.25;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

.prog-stack-tag {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.92);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.prog-stack-arrow {
    font-size: 1.15rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    margin-left: 8px;
    flex-shrink: 0;
    line-height: 1;
    transition: all 0.2s ease;
}

/* ACTIVE STATE (Golden Yellow Card) */
.prog-stack-card.active {
    background: #F5A623;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 6px 18px rgba(245, 166, 35, 0.38);
    transform: none;
}

.prog-stack-card.active .prog-stack-num {
    background: #112316;
    color: #F5A623;
}

.prog-stack-card.active .prog-stack-eyebrow {
    color: #112316;
    font-weight: 900;
}

.prog-stack-card.active .prog-stack-title {
    color: #112316;
    font-weight: 800;
}

.prog-stack-card.active .prog-stack-tag {
    background: #112316;
    border-color: #112316;
    color: #FFFFFF;
    font-weight: 800;
}

.prog-stack-card.active .prog-stack-arrow {
    color: #112316;
    font-weight: 900;
}

/* 6. Right Column: Large Landscape Card */
.prog-large-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #112316;
    min-height: 520px;
    height: 100%;
    border: 2px solid rgba(245, 166, 35, 0.25);
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.16);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    outline: none;
}

.prog-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
    z-index: 1;
}

.prog-large-card:hover .prog-card-img {
    transform: scale(1.03);
}

.prog-card-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(17, 35, 22, 0.45) 0%,
            rgba(17, 35, 22, 0.05) 35%,
            rgba(10, 23, 13, 0.72) 65%,
            rgba(6, 16, 8, 0.96) 100%);
    z-index: 2;
    pointer-events: none;
}

/* Top Meta Bar */
.prog-card-top-bar {
    position: absolute;
    top: 20px;
    left: 22px;
    right: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    z-index: 3;
}

.prog-kicker-pill {
    background: #F5A623;
    color: #112316;
    font-weight: 800;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 15px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
}

.prog-status-pill {
    background: rgba(17, 35, 22, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #FFFFFF;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.prog-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2ECC71;
    box-shadow: 0 0 8px #2ECC71;
    animation: progStatusPulse 2s infinite ease-in-out;
}

@keyframes progStatusPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.85); }
}

/* Bottom Normal Info (Fades when hovering) */
.prog-card-bottom-info {
    position: absolute;
    bottom: 22px;
    left: 24px;
    right: 24px;
    z-index: 3;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.prog-large-card:hover .prog-card-bottom-info {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

.prog-stat-badge-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.prog-big-stat {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: 2.3rem;
    font-weight: 900;
    color: #F5A623;
    line-height: 1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.prog-green-badge {
    background: #1B5E20;
    color: #FFFFFF;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-block;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.prog-stage-title {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: 1.95rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 6px 0 4px;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.prog-stage-sub {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.94rem;
    margin: 0;
    font-weight: 500;
    max-width: 520px;
    line-height: 1.4;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* 7. Minimal Bottom Hover Drawer: Covers ONLY lower ~45%, leaves photograph unobstructed! */
.prog-card-hover-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    background: rgba(11, 25, 14, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1.5px solid rgba(245, 166, 35, 0.45);
    border-radius: 0 0 18px 18px;
    padding: 22px 26px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%);
    transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    color: #FFFFFF;
}

.prog-large-card:hover .prog-card-hover-overlay {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.hover-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    border-bottom: 1px solid rgba(245, 166, 35, 0.2);
    padding-bottom: 8px;
}

.hover-kicker {
    font-size: 0.68rem;
    font-weight: 800;
    color: #F5A623;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hover-title {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: 1.25rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0;
}

.hover-about-text {
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.5;
    margin: 0;
}

.hover-data-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.hover-data-chip {
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(245, 166, 35, 0.28);
    border-radius: 8px;
    padding: 6px 10px;
    text-align: center;
}

.hover-data-val {
    display: block;
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: 1.05rem;
    font-weight: 900;
    color: #F5A623;
    line-height: 1.1;
}

.hover-data-lbl {
    display: block;
    font-size: 0.64rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

.hover-foot-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 2px;
}

.hover-link-btn {
    background: #F5A623;
    color: #112316;
    font-weight: 800;
    font-size: 0.78rem;
    padding: 7px 16px;
    border-radius: 999px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(245, 166, 35, 0.3);
}

.hover-link-btn:hover {
    background: #FAB918;
    color: #112316;
    transform: translateY(-2px);
}

/* Responsive Rules */
@media (max-width: 991px) {
    .progs-main-grid {
        grid-template-columns: 1fr;
    }
    .prog-large-card {
        min-height: 520px;
    }
    .progs-stats-bar {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }
    .progs-stat-col:not(:last-child)::after {
        display: none;
    }
    /* On mobile/touch: hover overlay shows as permanent clean bottom bar */
    .prog-card-hover-overlay {
        position: relative;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        border-radius: 0 0 18px 18px;
    }
    .prog-card-bottom-info {
        display: none;
    }
}

@media (max-width: 640px) {
    .progs-stats-bar {
        grid-template-columns: repeat(2, 1fr);
    }
    .hover-data-grid {
        grid-template-columns: 1fr;
    }
    .prog-stat-badge-row {
        gap: 8px;
    }
    .prog-big-stat {
        font-size: 1.8rem;
    }
    .prog-stage-title {
        font-size: 1.5rem;
    }
}

/* ========================================================
   LUXURY CONSERVANCY LANDSCAPE PORTALS
   ======================================================== */
.cgroup-portals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 26px;
}

.cgroup-portal-card {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    min-height: 440px;
    border: 1.5px solid rgba(250, 185, 24, 0.35);
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.25s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: #0B1C0E;
    text-decoration: none;
    outline: none;
}

.cgroup-portal-card:hover,
.cgroup-portal-card:focus-visible {
    transform: translateY(-8px);
    border-color: #FAB918;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 35px rgba(250, 185, 24, 0.3);
}

.cgroup-portal-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
}

.cgroup-portal-card:hover .cgroup-portal-bg {
    transform: scale(1.06);
    filter: brightness(0.92);
}

.cgroup-portal-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(7, 18, 9, 0.35) 0%,
            rgba(7, 18, 9, 0.6) 40%,
            rgba(6, 15, 8, 0.95) 85%,
            rgba(5, 12, 6, 0.98) 100%);
    transition: background 0.3s ease;
}

.cgroup-portal-card:hover .cgroup-portal-scrim {
    background: linear-gradient(180deg,
            rgba(7, 18, 9, 0.2) 0%,
            rgba(7, 18, 9, 0.5) 35%,
            rgba(6, 15, 8, 0.94) 80%,
            rgba(5, 12, 6, 0.98) 100%);
}

.cgroup-portal-content {
    position: relative;
    z-index: 2;
    padding: 28px 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cgroup-portal-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.cgroup-portal-badge {
    background: linear-gradient(135deg, #FAB918 0%, #FF9E1B 100%);
    color: #122814;
    font-size: 0.72rem;
    font-weight: 900;
    padding: 4px 11px;
    border-radius: 6px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.cgroup-portal-count {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 999px;
}

.cgroup-portal-title {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: 1.55rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0;
    line-height: 1.22;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    transition: color 0.2s ease;
}

.cgroup-portal-card:hover .cgroup-portal-title {
    color: #FAB918;
}

.cgroup-portal-lead {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cgroup-portal-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 4px 0 6px;
}

.cgroup-chip {
    font-size: 0.72rem;
    font-weight: 600;
    color: #E2ECF3;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 3px 8px;
    border-radius: 5px;
    white-space: nowrap;
}

.cgroup-portal-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    color: #FAB918;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.cgroup-portal-card:hover .cgroup-portal-cta {
    color: #FFFFFF;
}

.cgroup-portal-cta svg {
    transition: transform 0.25s ease;
}

.cgroup-portal-card:hover .cgroup-portal-cta svg {
    transform: translateX(4px);
}

/* Consolidated Ecosystem Portfolio Footer Bar */
.cgroup-portfolio-bar {
    margin-top: 36px;
    background: rgba(14, 36, 18, 0.85);
    border: 1.5px solid #FAB918;
    border-radius: 20px;
    padding: 24px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.cgroup-portfolio-badge {
    background: #FAB918;
    color: #122814;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 4px 14px;
    border-radius: 999px;
    display: inline-block;
    margin-bottom: 8px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cgroup-portfolio-title {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: 1.55rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 6px;
}

.cgroup-portfolio-lead {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
    max-width: 720px;
}

.cgroup-portfolio-btn {
    background: #FAB918;
    color: #122814;
    font-size: 0.9rem;
    font-weight: 800;
    padding: 13px 28px;
    border-radius: 999px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 6px 18px rgba(250, 185, 24, 0.35);
    transition: all 0.25s ease;
    white-space: nowrap;
}

.cgroup-portfolio-btn:hover {
    background: #FFC43A;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(250, 185, 24, 0.5);
}

@media (max-width: 1024px) {
    .progs-pills-bar {
        grid-template-columns: repeat(2, 1fr);
    }
    .progs-cinematic-stage {
        grid-template-columns: 1fr;
    }
    .progs-stage-media {
        min-height: 420px;
    }
    .progs-kpi-ribbon {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    .progs-kpi-item:nth-child(3)::after {
        display: none;
    }
    .progs-spotlight-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .progs-pills-bar {
        grid-template-columns: 1fr;
    }
    .progs-kpi-ribbon {
        grid-template-columns: repeat(2, 1fr);
    }
    .progs-kpi-item:not(:last-child)::after {
        display: none;
    }
    .progs-dossier-kpis {
        grid-template-columns: 1fr;
    }
    .progs-dossier-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .progs-stage-btn-main,
    .progs-stage-btn-sec {
        justify-content: center;
    }
    .cgroup-portals-grid {
        grid-template-columns: 1fr;
    }
    .progs-spotlight-grid {
        grid-template-columns: 1fr;
    }
    .cgroup-portfolio-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .cgroup-portfolio-btn {
        justify-content: center;
    }
}

/* ========================================================
   LANDMARK PUBLICATIONS & PEER-AUDITED RESEARCH REPOSITORY
   ======================================================== */
/* ========================================================
   LANDMARK PUBLICATIONS & PEER-AUDITED RESEARCH REPOSITORY
   (AET Logo Mountain Blue #79a5ca Theme)
   ======================================================== */
.pubs-revamp-section {
    padding: 110px 0 125px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.5) 0%, transparent 45%),
        radial-gradient(circle at 85% 25%, rgba(255, 255, 255, 0.35) 0%, transparent 45%),
        radial-gradient(circle at 15% 75%, rgba(250, 185, 24, 0.2) 0%, transparent 45%),
        linear-gradient(180deg, #8ab5d8 0%, #79a5ca 35%, #5d8ea7 100%);
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-bottom: 5px solid #FAB918;
    color: #0A2238;
}

.pubs-revamp-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, 0.28) 0%, transparent 60%);
    pointer-events: none;
}

.pubs-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    position: relative;
    z-index: 2;
}

.pubs-header {
    text-align: center;
    max-width: 880px;
    margin: 0 auto 46px;
}

.pubs-badge {
    font-size: 0.75rem;
    font-weight: 800;
    color: #0A2238;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.9);
    border: 1.5px solid rgba(255, 255, 255, 0.95);
    padding: 8px 24px;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(10, 34, 56, 0.08), inset 0 1px 0 #FFFFFF;
    backdrop-filter: blur(12px);
}

.pubs-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FAB918;
    box-shadow: 0 0 10px #FAB918;
    animation: pub-glow-dot 2s infinite ease-in-out;
}

@keyframes pub-glow-dot {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.45;
        transform: scale(0.85);
    }
}

.pubs-title {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: clamp(2.5rem, 4.5vw, 3.9rem);
    font-weight: 900;
    color: #0A2238;
    line-height: 1.15;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 24px rgba(255, 255, 255, 0.4);
}

.pubs-title span {
    background: linear-gradient(135deg, #0A2238 20%, #B88206 60%, #E69D00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
}

.pubs-lead {
    font-size: 1.12rem;
    color: #123758;
    font-weight: 500;
    line-height: 1.75;
    margin: 0 auto;
    max-width: 780px;
}

/* 4 Authority Sovereign Metrics Bar */
.pubs-metrics-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    background: rgba(255, 255, 255, 0.94);
    border: 1.5px solid rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    padding: 24px 32px;
    margin-bottom: 44px;
    backdrop-filter: blur(20px);
    box-shadow:
        0 22px 50px -10px rgba(10, 34, 56, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.8);
    position: relative;
}

.pubs-metrics-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 30px;
    right: 30px;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #FAB918 25%, #FF9E1B 75%, transparent 100%);
    border-radius: 3px;
}

.pubs-metric-item {
    text-align: center;
    position: relative;
    padding: 6px 14px;
    transition: transform 0.25s ease;
}

.pubs-metric-item:hover {
    transform: translateY(-3px);
}

.pubs-metric-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 18%;
    height: 64%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(10, 34, 56, 0.12), transparent);
}

.pubs-metric-val {
    font-size: 2.25rem;
    font-weight: 900;
    color: #0A2238;
    line-height: 1.1;
    letter-spacing: -0.015em;
    display: block;
    font-family: var(--ff-serif, Georgia, serif);
}

.pubs-metric-lbl {
    font-size: 0.76rem;
    font-weight: 800;
    color: #486581;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    margin-top: 6px;
    display: block;
}

/* ========================================================
   SINGLE HIGHLIGHTED LANDMARK PUBLICATION SHOWCASE (3D STAGE)
   ======================================================== */
.pub-single-hero-stage {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 251, 254, 0.96) 100%);
    border: 2px solid rgba(255, 255, 255, 0.95);
    border-radius: 32px;
    padding: 56px 54px;
    box-shadow:
        0 32px 85px -15px rgba(10, 34, 56, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.9);
    display: grid;
    grid-template-columns: 390px 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    overflow: visible;
}

.pub-single-hero-stage::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: 5px;
    background: linear-gradient(90deg, #FAB918, #FF9E1B, transparent);
    border-top-left-radius: 32px;
}

/* 3D Realistic Hardcover Presentation */
.pub-single-book-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    perspective: 1400px;
}

.pub-book-podium-glow {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 360px;
    height: 440px;
    background: radial-gradient(circle, rgba(121, 165, 202, 0.4) 0%, rgba(250, 185, 24, 0.14) 45%, transparent 70%);
    border-radius: 50%;
    filter: blur(28px);
    pointer-events: none;
    z-index: 1;
}

.pub-hardcover-wrap {
    position: relative;
    z-index: 2;
    width: 280px;
    height: 388px;
    cursor: pointer;
    transform-style: preserve-3d;
    transform: rotateY(-18deg) rotateX(4deg) rotateZ(1deg);
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease;
}

.pub-hardcover-wrap:hover {
    transform: rotateY(-8deg) rotateX(2deg) translateY(-12px) scale(1.03);
    filter: drop-shadow(0 32px 45px rgba(10, 34, 56, 0.38));
}

.pub-book-front {
    position: absolute;
    inset: 0;
    border-radius: 6px 14px 14px 6px;
    overflow: hidden;
    box-shadow:
        -5px 8px 20px rgba(10, 34, 56, 0.32),
        inset -2px 0 6px rgba(255, 255, 255, 0.3);
    background: #0E3628;
    transform: translateZ(14px);
}

.pub-book-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pub-book-front::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.48) 0%,
            rgba(0, 0, 0, 0.24) 2.5%,
            rgba(255, 255, 255, 0.2) 6%,
            transparent 14%,
            transparent 78%,
            rgba(255, 255, 255, 0.16) 90%,
            rgba(0, 0, 0, 0.16) 100%);
    pointer-events: none;
}

.pub-book-pages-right {
    position: absolute;
    top: 6px;
    bottom: 6px;
    right: -24px;
    width: 26px;
    background: repeating-linear-gradient(to right,
            #F8F5EE 0px,
            #EADBBE 1px,
            #F8F5EE 2px,
            #FAF7F2 4px);
    border-radius: 0 4px 4px 0;
    transform: rotateY(90deg) translateZ(-13px);
    transform-origin: left center;
    box-shadow:
        inset 0 0 6px rgba(10, 34, 56, 0.22),
        inset 0 0 2px rgba(250, 185, 24, 0.4);
}

.pub-book-pages-top {
    position: absolute;
    top: -15px;
    left: 4px;
    right: 0px;
    height: 17px;
    background: #EADBBE;
    transform: rotateX(90deg) translateZ(8px);
    transform-origin: bottom center;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.18);
}

.pub-book-ribbon {
    position: absolute;
    bottom: -24px;
    left: 64px;
    width: 19px;
    height: 42px;
    background: linear-gradient(135deg, #FAB918 0%, #D49504 100%);
    box-shadow: 0 5px 10px rgba(10, 34, 56, 0.38);
    z-index: 5;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
}

.pub-book-shadow {
    width: 270px;
    height: 26px;
    background: radial-gradient(ellipse at center, rgba(10, 34, 56, 0.42) 0%, rgba(10, 34, 56, 0.14) 50%, transparent 75%);
    margin-top: 26px;
    border-radius: 50%;
    filter: blur(7px);
    transition: all 0.4s ease;
}

.pub-single-book-stage:hover .pub-book-shadow {
    transform: scale(0.92);
    opacity: 0.7;
}

.pub-book-inspect-pill {
    margin-top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(10, 34, 56, 0.05);
    border: 1px solid rgba(10, 34, 56, 0.12);
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    color: #123758;
    cursor: pointer;
    transition: all 0.25s ease;
}

.pub-book-inspect-pill:hover {
    background: #0A2238;
    color: #FFFFFF;
    border-color: #0A2238;
    transform: translateY(-1px);
}

.pub-single-book-meta {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.pub-single-book-meta-pill {
    font-size: 0.72rem;
    font-weight: 700;
    color: #486581;
    background: #EEF4F9;
    border: 1px solid #D5E4F0;
    padding: 4px 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Right Column: Sovereign Dossier */
.pub-single-dossier {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.pub-single-kicker-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.pub-single-badge-flagship {
    background: linear-gradient(135deg, #FAB918 0%, #F59E0B 100%);
    color: #0A2238;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(250, 185, 24, 0.35);
}

.pub-single-badge-statutory {
    background: #EEF4F9;
    color: #123758;
    border: 1px solid #D5E4F0;
    font-size: 0.70rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 6px;
}

.pub-single-title {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: clamp(2rem, 3.2vw, 2.7rem);
    font-weight: 900;
    color: #0A2238;
    line-height: 1.18;
    letter-spacing: -0.015em;
    margin: 0 0 12px;
}

.pub-single-author {
    font-size: 0.85rem;
    font-weight: 700;
    color: #123758;
    background: rgba(121, 165, 202, 0.15);
    border-left: 3px solid #FAB918;
    padding: 8px 16px;
    border-radius: 0 8px 8px 0;
    line-height: 1.4;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.pub-single-author svg {
    flex-shrink: 0;
    margin-top: 1px;
}

.pub-single-desc {
    font-size: 1rem;
    color: #334E68;
    line-height: 1.7;
    margin: 0 0 20px;
}

.pub-single-pillars {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pub-single-pillar-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 18px;
    background: #FFFFFF;
    border: 1px solid #E2ECF3;
    border-radius: 14px;
    font-size: 0.92rem;
    color: #243B53;
    line-height: 1.5;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(10, 34, 56, 0.03);
}

.pub-single-pillar-item:hover {
    border-color: #FAB918;
    transform: translateX(4px);
    box-shadow: 0 8px 20px rgba(10, 34, 56, 0.06);
}

.pub-single-pillar-icon-box {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(250, 185, 24, 0.25) 0%, rgba(250, 185, 24, 0.08) 100%);
    border: 1.5px solid #FAB918;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    color: #0A2238;
}

.pub-single-pillar-item strong {
    color: #0A2238;
    font-weight: 800;
}

.pub-single-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 6px;
}

.pub-single-btn-dl {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #FAB918 0%, #FF9E1B 100%);
    color: #0A2238;
    font-weight: 900;
    font-size: 0.95rem;
    padding: 15px 30px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(250, 185, 24, 0.35);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    border: none;
    cursor: pointer;
}

.pub-single-btn-dl:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(250, 185, 24, 0.45);
    filter: brightness(1.05);
}

.pub-single-btn-modal {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #FFFFFF;
    color: #0A2238;
    border: 1.5px solid #CCDCE8;
    font-weight: 800;
    font-size: 0.95rem;
    padding: 14px 26px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(10, 34, 56, 0.06);
    font-family: inherit;
}

.pub-single-btn-modal:hover {
    background: #F0F6FA;
    border-color: #0A2238;
    transform: translateY(-2px);
}

.pub-single-archive-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #123758;
    font-weight: 800;
    font-size: 0.88rem;
    text-decoration: none;
    margin-left: 8px;
    transition: color 0.2s ease, transform 0.2s ease;
}

.pub-single-archive-link:hover {
    color: #0A2238;
    transform: translateX(4px);
}

/* Companion Library Row */
.pub-companion-row {
    margin-top: 48px;
}

.pub-companion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 0 4px;
}

.pub-companion-header h4 {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: 1.35rem;
    font-weight: 800;
    color: #0A2238;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pub-companion-badge {
    font-size: 0.78rem;
    font-weight: 800;
    color: #0A2238;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.9);
    padding: 4px 14px;
    border-radius: 999px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pub-companion-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.pub-companion-card {
    background: rgba(255, 255, 255, 0.95);
    border: 1.5px solid rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 12px 30px rgba(10, 34, 56, 0.08);
    position: relative;
    overflow: hidden;
}

.pub-companion-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #FAB918;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.pub-companion-card:hover {
    transform: translateY(-6px);
    border-color: #FAB918;
    box-shadow: 0 22px 48px rgba(10, 34, 56, 0.16);
    background: #FFFFFF;
}

.pub-companion-card:hover::before {
    opacity: 1;
}

.pub-companion-thumb-wrap {
    position: relative;
    flex-shrink: 0;
    perspective: 600px;
}

.pub-companion-thumb {
    width: 76px;
    height: 104px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 8px 18px rgba(10, 34, 56, 0.22);
    transition: transform 0.3s ease;
    display: block;
}

.pub-companion-card:hover .pub-companion-thumb {
    transform: rotateY(-8deg) scale(1.05);
}

.pub-companion-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-grow: 1;
}

.pub-companion-tag {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #486581;
}

.pub-companion-title {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: 1.08rem;
    font-weight: 800;
    color: #0A2238;
    line-height: 1.3;
}

.pub-companion-card:hover .pub-companion-title {
    color: #B88206;
}

.pub-companion-meta {
    font-size: 0.74rem;
    font-weight: 600;
    color: #627D98;
}

.pub-companion-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #F0F6FA;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0A2238;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.pub-companion-card:hover .pub-companion-arrow {
    background: #FAB918;
    color: #0A2238;
    transform: translateX(4px);
}

@media (max-width: 1024px) {
    .pub-single-hero-stage {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 40px 30px;
    }

    .pub-single-book-stage {
        margin: 0 auto;
    }

    .pub-companion-grid {
        grid-template-columns: 1fr;
    }

    .pubs-metrics-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .pubs-metric-item:nth-child(2)::after {
        display: none;
    }

    .pub-single-archive-link {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .pubs-metrics-bar {
        grid-template-columns: 1fr;
    }

    .pubs-metric-item:not(:last-child)::after {
        display: none;
    }

    .pub-hardcover-wrap {
        width: 240px;
        height: 330px;
    }

    .pub-single-hero-stage {
        padding: 28px 20px;
    }

    .pub-single-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .pub-single-btn-dl,
    .pub-single-btn-modal {
        justify-content: center;
    }
}

/* Publications Preview Modal */
.pub-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 20, 12, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pub-modal-backdrop.active {
    display: flex;
    opacity: 1;
}

.pub-modal-window {
    background: #FFFFFF;
    border-radius: 24px;
    max-width: 760px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border: 2px solid rgba(250, 185, 24, 0.4);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    padding: 36px 40px;
    position: relative;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.pub-modal-backdrop.active .pub-modal-window {
    transform: translateY(0);
}

.pub-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #F5EEDB;
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #122814;
    transition: all 0.2s ease;
}

.pub-modal-close:hover {
    background: #122814;
    color: #FFFFFF;
}

@media (max-width: 992px) {
    .pubs-spotlight-deck {
        grid-template-columns: 1fr;
        padding: 28px 24px;
        gap: 28px;
    }

    .pubs-spot-3d-book {
        width: 220px;
        height: 300px;
    }

    .pubs-grid-6 {
        grid-template-columns: repeat(2, 1fr);
    }

    .pubs-metrics-bar {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .pubs-grid-6 {
        grid-template-columns: 1fr;
    }

    .pubs-metrics-bar {
        grid-template-columns: 1fr;
    }

    .pubs-metric-item:not(:last-child)::after {
        display: none;
    }
}

/* ==========================================================================
   CONSERVANCY LANDSCAPE GROUPS CARDS & INTERACTIVE DETAIL MODAL
   ========================================================================== */
.eco-card-dark {
    background: #244724;
    color: #FFFFFF;
    border-radius: 18px;
    border: 1.5px solid #FAB918;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    padding: 28px 24px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.25s ease;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    outline: none;
    user-select: none;
}

.eco-card-dark:hover,
.eco-card-dark:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45), 0 0 25px rgba(250, 185, 24, 0.22);
    border-color: #FAB918;
}

.eco-card-dark:active {
    transform: translateY(-2px);
}

.eco-card-click-prompt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.78rem;
    font-weight: 800;
    color: #FAB918;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.eco-card-dark:hover .eco-card-click-prompt {
    color: #FFFFFF;
}

.eco-card-click-prompt .ecc-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(250, 185, 24, 0.2);
    color: #FAB918;
    font-size: 0.95rem;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.eco-card-dark:hover .eco-card-click-prompt .ecc-arrow {
    transform: translateX(4px);
    background: #FAB918;
    color: #122814;
}

/* Modal Backdrop */
.cgroup-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(8, 20, 10, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.cgroup-modal-backdrop.open {
    opacity: 1;
    visibility: visible;
}

/* Modal Dialog */
.cgroup-modal {
    background: #142918;
    color: #FFFFFF;
    width: 100%;
    max-width: 920px;
    max-height: 90vh;
    border-radius: 24px;
    border: 2px solid #FAB918;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.65), 0 0 35px rgba(250, 185, 24, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.95) translateY(10px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cgroup-modal-backdrop.open .cgroup-modal {
    transform: scale(1) translateY(0);
}

/* Modal Header */
.cgroup-modal-header {
    background: #0E1E12;
    padding: 24px 28px;
    border-bottom: 1.5px solid rgba(250, 185, 24, 0.3);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    position: relative;
}

.cgroup-modal-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.cgroup-pill-badge {
    background: rgba(250, 185, 24, 0.2);
    color: #FAB918;
    border: 1px solid #FAB918;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 999px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cgroup-pill-count {
    background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
}

.cgroup-pill-status {
    background: rgba(76, 175, 80, 0.2);
    color: #81C784;
    border: 1px solid rgba(76, 175, 80, 0.4);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}

.cgroup-modal-title {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: clamp(1.6rem, 2.5vw, 2.1rem);
    font-weight: 800;
    color: #FAB918;
    margin: 4px 0 6px;
    line-height: 1.2;
}

.cgroup-modal-subtitle {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    line-height: 1.5;
}

.cgroup-modal-close {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.cgroup-modal-close:hover {
    background: #FAB918;
    color: #122814;
    border-color: #FAB918;
    transform: rotate(90deg);
}

/* Modal Body */
.cgroup-modal-body {
    padding: 26px 28px;
    overflow-y: auto;
    max-height: calc(90vh - 180px);
    scrollbar-width: thin;
    scrollbar-color: #FAB918 rgba(255, 255, 255, 0.08);
}

.cgroup-modal-body::-webkit-scrollbar {
    width: 8px;
}
.cgroup-modal-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}
.cgroup-modal-body::-webkit-scrollbar-thumb {
    background: #FAB918;
    border-radius: 4px;
}

/* 4-Stat Cards */
.cgroup-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.cgroup-stat-card {
    background: #18361E;
    border: 1px solid rgba(250, 185, 24, 0.3);
    border-radius: 14px;
    padding: 14px 16px;
    text-align: left;
}

.cgroup-stat-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 4px;
}

.cgroup-stat-val {
    font-size: 1.25rem;
    font-weight: 800;
    color: #FAB918;
    display: block;
    line-height: 1.2;
}

.cgroup-stat-sub {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.75);
    display: block;
    margin-top: 2px;
}

/* Story/Role Box */
.cgroup-story-box {
    background: rgba(14, 30, 18, 0.8);
    border-left: 4px solid #FAB918;
    border-radius: 0 14px 14px 0;
    padding: 18px 22px;
    margin-bottom: 26px;
}

.cgroup-story-lead {
    font-size: 1.02rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.6;
    margin: 0 0 10px;
}

.cgroup-story-desc {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.65;
    margin: 0 0 12px;
}

.cgroup-story-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.78rem;
}

.cgroup-story-tag {
    background: rgba(255, 255, 255, 0.1);
    color: #FAB918;
    padding: 3px 10px;
    border-radius: 6px;
    font-weight: 600;
}

/* Member Conservancies Table/Grid */
.cgroup-members-section {
    margin-top: 24px;
}

.cgroup-section-title {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: 1.25rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cgroup-members-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cgroup-member-card {
    background: #18361E;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transition: all 0.2s ease;
}

.cgroup-member-card:hover {
    border-color: #FAB918;
    background: #1F4225;
}

.cgroup-member-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.cgroup-member-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cgroup-member-name {
    font-size: 1.02rem;
    font-weight: 800;
    color: #FFFFFF;
}

.cgroup-member-note {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.4;
}

.cgroup-member-right {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.cgroup-member-area {
    font-size: 0.95rem;
    font-weight: 800;
    color: #FAB918;
}

.cgroup-member-acres {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
}

.cgroup-member-status {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cgroup-status-established {
    background: rgba(76, 175, 80, 0.25);
    color: #A5D6A7;
    border: 1px solid rgba(76, 175, 80, 0.4);
}

.cgroup-status-developing {
    background: rgba(255, 152, 0, 0.25);
    color: #FFCC80;
    border: 1px solid rgba(255, 152, 0, 0.4);
}

.cgroup-status-upcoming {
    background: rgba(33, 150, 243, 0.25);
    color: #90CAF9;
    border: 1px solid rgba(33, 150, 243, 0.4);
}

.cgroup-status-proposed {
    background: rgba(158, 158, 158, 0.25);
    color: #E0E0E0;
    border: 1px solid rgba(158, 158, 158, 0.4);
}

/* Modal Footer */
.cgroup-modal-footer {
    background: #0E1E12;
    padding: 16px 28px;
    border-top: 1.5px solid rgba(250, 185, 24, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.cgroup-modal-btn-dir {
    background: #FAB918;
    color: #122814;
    font-weight: 800;
    font-size: 0.88rem;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.cgroup-modal-btn-dir:hover {
    background: #FFFFFF;
    color: #122814;
    transform: translateY(-2px);
}

.cgroup-modal-btn-close {
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    font-weight: 700;
    font-size: 0.88rem;
    padding: 11px 22px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cgroup-modal-btn-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    border-color: #FFFFFF;
}

@media (max-width: 768px) {
    .cgroup-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .cgroup-modal-header {
        padding: 20px;
    }
    .cgroup-modal-body {
        padding: 20px;
    }
    .cgroup-member-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .cgroup-member-right {
        text-align: left;
        align-items: flex-start;
        flex-direction: row;
        gap: 10px;
    }
}

/* ==========================================================================
   AET VERIFIED PROGRAMME ACHIEVEMENTS DESIGN SYSTEM (M&E FRAMEWORK)
   Source of Truth: AET Achievement.xlsx
   ========================================================================== */

.aet-achieve-section {
    padding: 80px 0;
    background: #FAF7F0;
    border-bottom: 1px solid #EAE3D6;
}

.aet-achieve-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.aet-achieve-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 44px;
}

.aet-achieve-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(18, 40, 20, 0.08);
    border: 1px solid #122814;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #122814;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
}

.aet-achieve-badge-gold {
    background: rgba(250, 185, 24, 0.15);
    border: 1px solid #FAB918;
    color: #9E740B;
}

.aet-achieve-title {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 800;
    color: #122814;
    margin: 0 0 14px;
    line-height: 1.2;
}

.aet-achieve-intro {
    font-size: 1.05rem;
    color: #556258;
    line-height: 1.7;
    margin: 0;
}

/* Top Stat KPI Cards */
.aet-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 48px;
}

.aet-kpi-card {
    background: #FFFFFF;
    border-radius: 16px;
    border: 1.5px solid #EAE3D6;
    padding: 24px 20px;
    box-shadow: 0 6px 20px rgba(18, 40, 20, 0.04);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.aet-kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(18, 40, 20, 0.08);
    border-color: #FAB918;
}

.aet-kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #FAB918;
}

.aet-kpi-val {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: clamp(2rem, 3vw, 2.6rem);
    font-weight: 800;
    color: #122814;
    line-height: 1.1;
    display: block;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

.aet-kpi-val.highlight {
    color: #9E740B;
}

.aet-kpi-lbl {
    font-size: 0.88rem;
    font-weight: 700;
    color: #122814;
    line-height: 1.4;
    display: block;
    margin-bottom: 4px;
}

.aet-kpi-sub {
    font-size: 0.76rem;
    color: #64748B;
    display: block;
    line-height: 1.4;
}

/* Complete Indicator Table */
.aet-table-wrap {
    background: #FFFFFF;
    border-radius: 18px;
    border: 1.5px solid #EAE3D6;
    box-shadow: 0 10px 30px rgba(18, 40, 20, 0.05);
    overflow: hidden;
    margin-bottom: 48px;
}

.aet-table-top-bar {
    background: #122814;
    padding: 20px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    border-bottom: 3px solid #FAB918;
}

.aet-table-top-title {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.aet-table-source-tag {
    font-size: 0.72rem;
    font-weight: 800;
    color: #122814;
    background: #FAB918;
    padding: 4px 10px;
    border-radius: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.aet-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.aet-indicator-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    text-align: left;
}

.aet-indicator-table thead th {
    background: #F4EFE6;
    color: #122814;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 14px 24px;
    border-bottom: 2px solid #EAE3D6;
}

.aet-indicator-table thead th.text-right {
    text-align: right;
}

.aet-indicator-table thead th.text-center {
    text-align: center;
}

.aet-indicator-table tbody tr {
    border-bottom: 1px solid #EAE3D6;
    transition: background-color 0.15s ease;
}

.aet-indicator-table tbody tr:last-child {
    border-bottom: none;
}

.aet-indicator-table tbody tr:nth-child(even) {
    background-color: #FAF8F5;
}

.aet-indicator-table tbody tr:hover {
    background-color: rgba(250, 185, 24, 0.08);
}

.aet-indicator-table td {
    padding: 14px 24px;
    color: #2D3748;
    vertical-align: middle;
}

.aet-indicator-name {
    font-weight: 600;
    color: #122814;
    display: flex;
    align-items: center;
    gap: 8px;
}

.aet-indicator-num {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: 1.15rem;
    font-weight: 800;
    color: #122814;
    text-align: right;
    white-space: nowrap;
}

.aet-type-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.aet-type-currency { background: #E8F5E9; color: #2E7D32; border: 1px solid #A5D6A7; }
.aet-type-people { background: #E3F2FD; color: #1565C0; border: 1px solid #90CAF9; }
.aet-type-area { background: #FFF8E1; color: #F57F17; border: 1px solid #FFE082; }
.aet-type-physical { background: #EDE7F6; color: #512DA8; border: 1px solid #D1C4E9; }

/* Audit verification notice */
.aet-audit-box {
    background: #FFF9E6;
    border: 1.5px solid #FAB918;
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.aet-audit-icon {
    color: #9E740B;
    flex-shrink: 0;
    margin-top: 2px;
}

.aet-audit-text {
    font-size: 0.85rem;
    color: #5C4300;
    line-height: 1.55;
    margin: 0;
}

/* Photo Gallery Grid */
.aet-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.aet-photo-card {
    background: #FFFFFF;
    border-radius: 16px;
    overflow: hidden;
    border: 1.5px solid #EAE3D6;
    box-shadow: 0 8px 24px rgba(18, 40, 20, 0.06);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.aet-photo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(18, 40, 20, 0.1);
}

.aet-photo-img-wrap {
    height: 240px;
    position: relative;
    overflow: hidden;
    background: #122814;
}

.aet-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.aet-photo-card:hover .aet-photo-img {
    transform: scale(1.04);
}

.aet-photo-tag {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(18, 40, 20, 0.85);
    backdrop-filter: blur(4px);
    color: #FAB918;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid rgba(250, 185, 24, 0.4);
}

.aet-photo-info {
    padding: 16px 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.aet-photo-caption {
    font-size: 0.9rem;
    font-weight: 600;
    color: #122814;
    line-height: 1.45;
    margin: 0;
}

/* Feature Spotlight Card (for Mwanamke Bora, Score4Nature) */
.aet-spotlight-card {
    background: linear-gradient(135deg, #122814 0%, #1A3820 100%);
    border-radius: 20px;
    border: 2px solid #FAB918;
    padding: 40px;
    color: #FFFFFF;
    margin-bottom: 48px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 36px;
    align-items: center;
}

@media (max-width: 900px) {
    .aet-spotlight-card {
        grid-template-columns: 1fr;
        padding: 28px 24px;
    }
}

.aet-spotlight-img-wrap {
    border-radius: 14px;
    overflow: hidden;
    border: 2px solid rgba(250, 185, 24, 0.5);
    max-height: 320px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.aet-spotlight-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.aet-spotlight-badge {
    display: inline-block;
    background: rgba(250, 185, 24, 0.18);
    border: 1px solid #FAB918;
    color: #FAB918;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}

.aet-spotlight-title {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 12px;
    line-height: 1.2;
}

.aet-spotlight-desc {
    font-size: 0.98rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.65;
    margin: 0 0 20px;
}

.aet-spotlight-metrics {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.aet-spotlight-metric-item {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(250, 185, 24, 0.25);
    border-radius: 10px;
    padding: 10px 16px;
}

.aet-spotlight-metric-num {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: 1.35rem;
    font-weight: 800;
    color: #FAB918;
    display: block;
    line-height: 1;
}

.aet-spotlight-metric-lbl {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 4px;
    display: block;
}

/* Interactive Programme Tabs */
.aet-tabs-nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 36px;
}

.aet-tab-btn {
    background: #FFFFFF;
    border: 1.5px solid #EAE3D6;
    color: #122814;
    font-weight: 700;
    font-size: 0.92rem;
    padding: 12px 22px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.aet-tab-btn:hover {
    border-color: #FAB918;
    background: #FAF8F5;
    transform: translateY(-1px);
}

.aet-tab-btn.active {
    background: #122814;
    color: #FAB918;
    border-color: #122814;
    box-shadow: 0 4px 14px rgba(18, 40, 20, 0.2);
}

.aet-tab-badge {
    background: rgba(250, 185, 24, 0.2);
    color: #9E740B;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 10px;
}

.aet-tab-btn.active .aet-tab-badge {
    background: #FAB918;
    color: #122814;
}

.aet-tab-panel {
    display: none;
    animation: aetFadeIn 0.3s ease;
}

.aet-tab-panel.active {
    display: block;
}

@keyframes aetFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   PREMIUM REDESIGN: WORK.HTML 8-PROGRAMME SHOWCASE & DOCUMENTARY PICTORIALS
   ========================================================================== */

/* 1. Quick Programme Jump Anchor Strip */
.work-hero-stats-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-top: 36px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(250, 185, 24, 0.35);
    border-radius: 16px;
    padding: 18px 24px;
}

.work-hero-stat-item {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.work-hero-stat-num {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: 1.85rem;
    font-weight: 900;
    color: #FAB918;
    line-height: 1.1;
    margin-bottom: 2px;
}

.work-hero-stat-lbl {
    font-size: 0.72rem;
    font-weight: 800;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.work-hero-stat-sub {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.72);
    margin-top: 2px;
}

/* ========================================================
   WORK.HTML EDITORIAL STORYTELLING (ZIGZAG STEP-BY-STEP REVAMP)
   ======================================================== */
.work-hero-revamp {
    background: linear-gradient(180deg, rgba(14, 34, 18, 0.88) 0%, rgba(10, 24, 14, 0.96) 100%), url('../img/chyulu-hills.jpeg');
    background-size: cover;
    background-position: center;
    padding: 140px 0 85px;
    color: #FFFFFF;
    border-bottom: 4px solid #FAB918;
    position: relative;
}

.work-jump-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 28px;
    padding: 12px 18px;
    background: rgba(10, 24, 14, 0.7);
    border: 1px solid rgba(250, 185, 24, 0.3);
    border-radius: 40px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.work-jump-label {
    font-size: 0.72rem;
    font-weight: 800;
    color: #FAB918;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-right: 6px;
}

.work-jump-link {
    font-size: 0.76rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease;
}

.work-jump-link:hover {
    background: #FAB918;
    color: #122814;
    transform: translateY(-1px);
}

/* ============================================================
   STRATEGIC FRAMEWORK CLUSTER (INTEGRATED STRATEGIC MODEL)
   Rich, beautifully mixed environmental savanna theme
   ============================================================ */
.work-framework-strip {
    padding: 85px 0 80px;
    background: radial-gradient(circle at 50% 0%, #FAF6EE 0%, #F5EFE4 55%, #ECE3D2 100%);
    border-top: 1px solid rgba(226, 218, 204, 0.85);
    border-bottom: 1.5px solid rgba(226, 218, 204, 0.95);
    position: relative;
}

.work-framework-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 46px;
}

.work-framework-eyebrow {
    font-size: 0.74rem;
    font-weight: 900;
    color: #9E740B;
    background: rgba(250, 185, 24, 0.16);
    border: 1px solid rgba(250, 185, 24, 0.45);
    padding: 5px 16px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    display: inline-block;
    margin-bottom: 14px;
}

.work-framework-title {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: clamp(2.1rem, 3.4vw, 2.7rem);
    font-weight: 800;
    color: #122814;
    line-height: 1.2;
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}

.work-framework-desc {
    font-size: 1.05rem;
    color: #4A584E;
    line-height: 1.7;
    margin: 0;
}

.work-framework-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

@media (max-width: 1080px) {
    .work-framework-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 600px) {
    .work-framework-grid {
        grid-template-columns: 1fr;
    }
}

.work-framework-card {
    background: #122814;
    color: #FFFFFF;
    border-radius: 20px;
    padding: 28px 24px;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
    border: 1.5px solid rgba(250, 185, 24, 0.28);
    overflow: hidden;
}

.work-framework-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #FAB918, #9E740B);
}

.work-framework-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.work-framework-num {
    font-size: 0.70rem;
    font-weight: 900;
    color: #FAB918;
    background: rgba(250, 185, 24, 0.15);
    border: 1px solid rgba(250, 185, 24, 0.4);
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-block;
    letter-spacing: 0.08em;
}

.work-framework-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(250, 185, 24, 0.15);
    color: #FAB918;
    border: 1px solid rgba(250, 185, 24, 0.35);
    transition: transform 0.35s ease, background 0.35s ease;
}

.work-framework-card:hover .work-framework-icon-wrap {
    transform: scale(1.1) rotate(6deg);
    background: #FAB918;
    color: #122814;
}

.work-framework-card h4 {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: 1.3rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 10px;
    line-height: 1.3;
}

.work-framework-card p {
    font-size: 0.90rem;
    color: rgba(255, 255, 255, 0.84);
    line-height: 1.62;
    margin: 0 0 20px;
}

.work-framework-stat-badge {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px dashed rgba(250, 185, 24, 0.3);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.work-framework-stat-val {
    font-size: 1.35rem;
    font-weight: 900;
    color: #FAB918;
    font-family: var(--ff-serif, Georgia, serif);
    line-height: 1.1;
}

.work-framework-stat-lbl {
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.72);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.work-framework-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.28);
    border-color: #FAB918;
}

/* ============================================================
   THE EIGHT PILLARS OF OUR WORK — DECORATED SAVANNA GREEN CARDS
   (Curated 4x2 Architectural Cards with Gold Inlay & Royal Green)
   Strict Savanna Palette: #122814, #183A1C, #FAB918, #FAF7F0, No Blue
   ============================================================ */
.work-editorial-section,
.fineart-pillars-section {
    padding: 95px 0 120px;
    background: radial-gradient(circle at 50% 12%, #FAF7F0 0%, #F4ECE0 50%, #ECE3D4 100%);
    border-bottom: 1.5px solid #EAE3D6;
    position: relative;
    overflow: hidden;
}

.pillar-anchor-target {
    position: relative;
    top: -110px;
    display: block;
    visibility: hidden;
    height: 0;
    pointer-events: none;
}

.work-editorial-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 50px;
}

.work-editorial-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(250, 185, 24, 0.16);
    border: 1px solid rgba(250, 185, 24, 0.45);
    padding: 6px 22px;
    border-radius: 30px;
    font-size: 0.74rem;
    font-weight: 800;
    color: #9E740B;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.work-editorial-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FAB918;
    box-shadow: 0 0 8px #FAB918;
}

.work-editorial-title {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: clamp(2.4rem, 4.2vw, 3.4rem);
    font-weight: 800;
    color: #122814;
    line-height: 1.16;
    margin: 0 0 16px;
}

.work-editorial-lead {
    font-size: 1.06rem;
    color: #4A584E;
    line-height: 1.75;
    margin: 0 auto;
}

/* 4x2 Architectural Fine-Art Grid */
.fineart-pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

@media (max-width: 1200px) {
    .fineart-pillars-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 680px) {
    .fineart-pillars-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}

/* The Decorated Savanna Green Card */
.fineart-pillar-card {
    background: radial-gradient(circle at 90% 10%, rgba(250, 185, 24, 0.12) 0%, transparent 45%),
                linear-gradient(165deg, #183A1C 0%, #122815 45%, #0B1A0E 100%);
    border: 1.5px solid rgba(250, 185, 24, 0.38);
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 8px 24px rgba(11, 26, 14, 0.2), inset 0 1px 0 rgba(250, 185, 24, 0.25);
    position: relative;
}

.fineart-pillar-card:hover {
    transform: translateY(-8px);
    border-color: #FAB918;
    box-shadow: 0 24px 50px rgba(11, 26, 14, 0.35), 0 0 25px rgba(250, 185, 24, 0.25);
}

.fineart-pillar-card.is-targeted {
    border-color: #FAB918;
    box-shadow: 0 0 0 3px rgba(250, 185, 24, 0.5), 0 24px 50px rgba(11, 26, 14, 0.38);
}

/* Photographic Media Plate */
.fineart-card-media {
    position: relative;
    height: 230px;
    overflow: hidden;
    background: #0B1A0E;
    border-bottom: 2px solid rgba(250, 185, 24, 0.35);
}

.fineart-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.fineart-pillar-card:hover .fineart-card-img {
    transform: scale(1.08);
}

.fineart-card-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 34, 18, 0.45) 0%, rgba(14, 34, 18, 0.1) 40%, rgba(11, 26, 14, 0.92) 100%);
    pointer-events: none;
}

.fineart-media-top {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
}

.fineart-pillar-badge {
    background: rgba(11, 26, 14, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(250, 185, 24, 0.6);
    color: #FAB918;
    font-size: 0.70rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.fineart-stat-pill {
    background: #FAB918;
    color: #122814;
    font-size: 0.74rem;
    font-weight: 900;
    padding: 5px 13px;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
    white-space: nowrap;
}

.fineart-media-bottom {
    position: absolute;
    bottom: 12px;
    left: 15px;
    right: 15px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.74rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 7px;
    z-index: 2;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Card Editorial Body */
.fineart-card-body {
    padding: 24px 24px 22px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.fineart-eyebrow {
    font-size: 0.70rem;
    font-weight: 800;
    color: #FAB918;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 8px;
    display: block;
}

.fineart-card-title {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: 1.28rem;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.26;
    margin: 0 0 12px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.fineart-card-desc {
    font-size: 0.89rem;
    color: #DCE5DC;
    line-height: 1.64;
    margin: 0 0 16px;
    flex-grow: 1;
}

/* Decorative Gold Filigree Divider */
.fineart-deco-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
}

.fineart-deco-divider .deco-line {
    flex-grow: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(250, 185, 24, 0.4), transparent);
}

.fineart-deco-divider .deco-gem {
    color: #FAB918;
    font-size: 0.65rem;
    line-height: 1;
    filter: drop-shadow(0 0 3px rgba(250, 185, 24, 0.6));
}

/* Micro-KPI Matrix Line */
.fineart-kpi-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}

.fineart-kpi-chip {
    background: rgba(250, 185, 24, 0.10);
    border: 1px solid rgba(250, 185, 24, 0.32);
    border-left: 2.5px solid #FAB918;
    padding: 5px 9px;
    border-radius: 6px;
    font-size: 0.74rem;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: all 0.2s ease;
}

.fineart-pillar-card:hover .fineart-kpi-chip {
    background: rgba(250, 185, 24, 0.16);
    border-color: rgba(250, 185, 24, 0.55);
}

.fineart-kpi-chip strong {
    color: #FAB918;
    font-weight: 900;
}

/* Card Action Footer */
.fineart-card-footer {
    padding-top: 16px;
    border-top: 1px solid rgba(250, 185, 24, 0.22);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fineart-card-link {
    background: rgba(250, 185, 24, 0.12);
    border: 1px solid rgba(250, 185, 24, 0.5);
    color: #FAB918;
    font-size: 0.80rem;
    font-weight: 800;
    text-decoration: none;
    padding: 7px 16px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.25s ease;
}

.fineart-pillar-card:hover .fineart-card-link {
    background: #FAB918;
    color: #122814;
    box-shadow: 0 4px 14px rgba(250, 185, 24, 0.35);
    transform: translateX(3px);
}

.fineart-card-index {
    font-size: 0.78rem;
    font-weight: 900;
    color: #FAB918;
    font-family: var(--ff-serif, Georgia, serif);
    letter-spacing: 0.06em;
}



/* 4. DOCUMENTARY PICTORIALS & PHOTO GALLERY MOSAIC */
.pictorial-section {
    padding: 100px 0;
    background: #102416;
    color: #FFFFFF;
    position: relative;
    border-bottom: 4px solid #FAB918;
}

.pictorial-header {
    text-align: center;
    max-width: 860px;
    margin: 0 auto 40px;
}

.pictorial-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(250, 185, 24, 0.15);
    border: 1px solid #FAB918;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #FAB918;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
}

.pictorial-title {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: clamp(2.2rem, 3.8vw, 3.2rem);
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 16px;
    line-height: 1.2;
}

.pictorial-desc {
    font-size: 1.08rem;
    color: rgba(255, 255, 255, 0.86);
    line-height: 1.7;
    margin: 0;
}

.pictorial-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 38px;
}

.pictorial-filter-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.88rem;
    padding: 10px 22px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pictorial-filter-btn:hover {
    border-color: #FAB918;
    background: rgba(250, 185, 24, 0.15);
}

.pictorial-filter-btn.active {
    background: #FAB918;
    color: #122814;
    border-color: #FAB918;
    font-weight: 800;
    box-shadow: 0 4px 16px rgba(250, 185, 24, 0.35);
}

.pictorial-mosaic-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}

.pictorial-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: #08160D;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.3s ease;
}

.pictorial-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
    border-color: rgba(250, 185, 24, 0.7);
}

.pictorial-card.span-8 {
    grid-column: span 8;
    height: 380px;
}

.pictorial-card.span-4 {
    grid-column: span 4;
    height: 380px;
}

.pictorial-card.span-6 {
    grid-column: span 6;
    height: 320px;
}

.pictorial-card.span-12 {
    grid-column: span 12;
    height: 420px;
}

@media (max-width: 992px) {
    .pictorial-mosaic-grid {
        grid-template-columns: repeat(6, 1fr);
    }
    .pictorial-card.span-8,
    .pictorial-card.span-4,
    .pictorial-card.span-6,
    .pictorial-card.span-12 {
        grid-column: span 6 !important;
        height: 320px !important;
    }
}

@media (max-width: 600px) {
    .pictorial-mosaic-grid {
        grid-template-columns: 1fr;
    }
    .pictorial-card.span-8,
    .pictorial-card.span-4,
    .pictorial-card.span-6,
    .pictorial-card.span-12 {
        grid-column: span 1 !important;
        height: 280px !important;
    }
}

.pictorial-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.pictorial-card:hover .pictorial-img {
    transform: scale(1.07);
}

.pictorial-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.25) 40%, rgba(10, 24, 14, 0.95) 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 22px 24px;
    pointer-events: none;
}

.pictorial-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pictorial-tag {
    background: rgba(18, 40, 20, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(250, 185, 24, 0.55);
    color: #FAB918;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pictorial-zoom-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(250, 185, 24, 0.9);
    color: #122814;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0.85;
    transition: all 0.2s ease;
}

.pictorial-card:hover .pictorial-zoom-btn {
    transform: scale(1.1);
    background: #FAB918;
    opacity: 1;
}

.pictorial-bottom {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pictorial-location {
    font-size: 0.72rem;
    color: #FAB918;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pictorial-card-title {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: 1.25rem;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.25;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.pictorial-card-caption {
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.45;
    margin: 0;
}

/* 5. LANDSCAPE SYNERGY SECTION */
.aet-synergy-section {
    padding: 95px 0;
    background: #FAF7F0;
    border-bottom: 1px solid #EAE3D6;
}

.aet-synergy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-top: 48px;
}

.aet-synergy-card {
    background: #FFFFFF;
    border-radius: 18px;
    padding: 30px 24px;
    border: 1.5px solid #EAE3D6;
    box-shadow: 0 8px 24px rgba(18, 40, 20, 0.04);
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.aet-synergy-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(18, 40, 20, 0.09);
    border-color: #FAB918;
}

.aet-synergy-step {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #122814;
    color: #FAB918;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 900;
    margin-bottom: 16px;
    border: 2px solid #FAB918;
}

.aet-synergy-title {
    font-family: var(--ff-serif, Georgia, serif);
    font-size: 1.25rem;
    font-weight: 800;
    color: #122814;
    margin: 0 0 10px;
    line-height: 1.3;
}

.aet-synergy-desc {
    font-size: 0.88rem;
    color: #556258;
    line-height: 1.6;
    margin: 0;
}


/* ==========================================================================
   PROGRAMME PAGES MASTER DESIGN SYSTEM — MINIMAL, ELEGANT & UNIQUE
   Applies across all 8 Strategic Programme Directorates
   Strict Savanna Palette: #122814, #18381C, #FAB918, #FAF7F0, No Blue
   ========================================================================== */

/* 1. CINEMATIC MINIMAL HERO */
.inner-hero-section {
    position: relative;
    padding: 140px 0 95px !important;
    background-size: cover !important;
    background-position: center !important;
    color: #FFFFFF !important;
    border-bottom: 3.5px solid #FAB918 !important;
    overflow: hidden;
}

.inner-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 24, 12, 0.76) 0%, rgba(10, 24, 12, 0.52) 48%, rgba(10, 24, 12, 0.22) 100%),
                linear-gradient(180deg, rgba(10, 24, 12, 0.20) 0%, rgba(10, 24, 12, 0.60) 100%);
    pointer-events: none;
    z-index: 1;
}

.inner-hero-section .page-container {
    position: relative;
    z-index: 2;
}

.inner-hero-section h1 {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif) !important;
    font-size: clamp(2.4rem, 4.4vw, 3.8rem) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    margin: 0 0 16px !important;
    color: #FFFFFF !important;
    letter-spacing: -0.01em;
}

/* 2. STICKY QUICK-NAV BAR */
.prog-quicknav-bar {
    background: rgba(14, 34, 18, 0.94) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 2px solid rgba(250, 185, 24, 0.4) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
    position: sticky;
    top: 76px;
    z-index: 95;
    padding: 12px 0 !important;
}

.prog-quicknav-container {
    display: flex;
    align-items: center;
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.prog-quicknav-container::-webkit-scrollbar {
    display: none;
}

.prog-quicknav-label {
    font-size: 0.72rem;
    font-weight: 900;
    color: #FAB918;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    padding-right: 12px;
    border-right: 1px solid rgba(250, 185, 24, 0.35);
}

.prog-quicknav-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.prog-quicknav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    transition: all 0.25s ease;
}

.prog-quicknav-link:hover {
    background: #FAB918;
    color: #122814;
    border-color: #FAB918;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(250, 185, 24, 0.3);
}

.prog-quicknav-link.highlight {
    background: rgba(250, 185, 24, 0.22);
    border-color: #FAB918;
    color: #FAB918;
}

.prog-quicknav-link.highlight:hover {
    background: #FAB918;
    color: #122814;
}

.q-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.q-icon svg {
    display: block;
    width: 13px;
    height: 13px;
}

/* 3. PROGRAMME METRICS RIBBON */
.prog-metrics-strip {
    background: radial-gradient(circle at 50% 12%, #FAF7F0 0%, #F5EFE4 55%, #EDE5D6 100%) !important;
    padding: 50px 0 !important;
    border-bottom: 1.5px solid #EAE3D6 !important;
}

.prog-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 22px;
}

.prog-metric-box {
    background: #FFFFFF !important;
    border: 1.5px solid #EBE4D8 !important;
    border-radius: 18px !important;
    padding: 28px 22px !important;
    text-align: center;
    box-shadow: 0 4px 20px rgba(18, 40, 20, 0.04) !important;
    border-top: 3.5px solid #FAB918 !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.prog-metric-box:hover {
    transform: translateY(-6px) !important;
    border-color: #FAB918 !important;
    box-shadow: 0 16px 36px rgba(18, 40, 20, 0.1) !important;
}

.prog-metric-num {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif) !important;
    font-size: clamp(2.3rem, 3.2vw, 3rem) !important;
    font-weight: 800 !important;
    color: #122814 !important;
    line-height: 1 !important;
    display: block;
    margin-bottom: 8px;
}

.prog-metric-title {
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    color: #9E740B !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    display: block;
    margin-bottom: 4px;
}

.prog-metric-sub {
    font-size: 0.80rem !important;
    color: #556258 !important;
    display: block;
    line-height: 1.45 !important;
}

/* 4. CHALLENGE & OBJECTIVES DUAL SPREAD */
#challenge {
    padding: 95px 0 !important;
    background: #FAF7F0 !important;
    border-bottom: 1.5px solid #EAE3D6 !important;
}

/* 5. FIELD INTERVENTIONS (ARCHITECTURAL CARDS) */
.prog-interventions-section {
    padding: 95px 0 !important;
    background: radial-gradient(circle at 50% 12%, #FAF7F0 0%, #F5EFE4 55%, #EDE5D6 100%) !important;
    border-bottom: 1.5px solid #EAE3D6 !important;
}

.prog-activities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 26px !important;
}

.prog-activity-card {
    background: #FFFFFF !important;
    border-radius: 20px !important;
    border: 1.5px solid #EBE4D8 !important;
    padding: 34px 28px !important;
    box-shadow: 0 6px 22px rgba(18, 40, 20, 0.04) !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-top: 3.5px solid #FAB918 !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
    position: relative;
    overflow: hidden;
}

.prog-activity-card:hover {
    transform: translateY(-7px) !important;
    border-color: #FAB918 !important;
    box-shadow: 0 18px 40px rgba(18, 40, 20, 0.1) !important;
}

.prog-activity-badge {
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    color: #9E740B !important;
    background: rgba(250, 185, 24, 0.16) !important;
    border: 1px solid rgba(250, 185, 24, 0.4) !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    display: inline-block;
    margin-bottom: 16px;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

.prog-activity-title {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif) !important;
    font-size: 1.32rem !important;
    font-weight: 800 !important;
    color: #122814 !important;
    margin: 0 0 12px !important;
    line-height: 1.3 !important;
}

.prog-activity-desc {
    font-size: 0.92rem !important;
    color: #4A584E !important;
    line-height: 1.68 !important;
    margin: 0;
}

/* Universal Revamped Field Execution Cards (4-column responsive grid with photo headers) */
.prog-exec-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
@media (max-width: 1080px) {
    .prog-exec-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }
}
@media (max-width: 640px) {
    .prog-exec-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
}
.prog-exec-card {
    background: #FAF7F0 !important;
    border-radius: 18px !important;
    border: 1.5px solid #EAE3D6 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 8px 24px rgba(18,40,20,0.04) !important;
    border-top: 4px solid #FAB918 !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease !important;
}
.prog-exec-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 18px 40px rgba(18,40,20,0.12) !important;
    border-color: #FAB918 !important;
}
.prog-exec-img-box {
    height: 180px !important;
    position: relative !important;
    overflow: hidden !important;
}
.prog-exec-img-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.4s ease !important;
}
.prog-exec-card:hover .prog-exec-img-box img {
    transform: scale(1.05) !important;
}

/* 6. LUXURY FIELD PHOTOGRAPHY GALLERY */
.prog-photo-section {
    padding: 95px 0 !important;
    background: radial-gradient(circle at 50% 0%, #FAF5EB 0%, #EFE7D8 100%) !important;
    border-top: 1.5px solid #E2D7C5 !important;
    border-bottom: 1.5px solid #E2D7C5 !important;
    position: relative;
    overflow: hidden;
}

.prog-photo-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #9E740B 0%, #FAB918 50%, #9E740B 100%);
}

.prog-photo-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 46px;
}

.prog-photo-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(158, 116, 11, 0.14) !important;
    color: #9E740B !important;
    border: 1px solid rgba(158, 116, 11, 0.35) !important;
    padding: 6px 18px !important;
    border-radius: 30px !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    margin-bottom: 14px;
}

.prog-photo-title {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif) !important;
    font-size: clamp(2rem, 3.4vw, 2.75rem) !important;
    font-weight: 800 !important;
    color: #122814 !important;
    line-height: 1.2 !important;
    margin: 0 0 14px !important;
}

.prog-photo-subtitle {
    font-size: 1.02rem !important;
    color: #4C5A50 !important;
    line-height: 1.65 !important;
    margin: 0 0 18px;
}

.prog-photo-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(18, 40, 20, 0.08) !important;
    color: #18381C !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    padding: 6px 18px !important;
    border-radius: 20px !important;
    border: 1px dashed rgba(18, 40, 20, 0.25) !important;
}

.prog-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
}

@media (max-width: 1024px) {
    .prog-photo-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
}

@media (max-width: 680px) {
    .prog-photo-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

.prog-photo-card {
    background: #FFFFFF !important;
    border-radius: 20px !important;
    overflow: hidden;
    border: 1.5px solid #EBE4D8 !important;
    box-shadow: 0 8px 24px rgba(18, 40, 20, 0.05) !important;
    display: flex;
    flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
    position: relative;
    cursor: pointer;
}

.prog-photo-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 45px rgba(18, 40, 20, 0.12) !important;
    border-color: #FAB918 !important;
}

.prog-photo-img-wrap {
    height: 240px !important;
    position: relative;
    overflow: hidden;
    background: #122814;
}

.prog-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.prog-photo-card:hover .prog-photo-img {
    transform: scale(1.08) !important;
}

.prog-photo-meta {
    padding: 22px 24px 20px !important;
    background: #FFFFFF !important;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-top: 1px solid #EBE4D8 !important;
}

.prog-photo-caption {
    font-size: 0.90rem !important;
    font-weight: 600 !important;
    color: #122814 !important;
    line-height: 1.55 !important;
    margin: 0 0 14px !important;
}

.prog-photo-location {
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    color: #9E740B !important;
    letter-spacing: 0.03em !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px dashed #EDE5D6 !important;
}

/* 7. BOTTOM CROSS-PROGRAMME SWITCHER */
.prog-switcher-section {
    padding: 95px 0 !important;
    background: #102416 !important;
    border-top: 4px solid #FAB918 !important;
    color: #FFFFFF !important;
    position: relative;
}

.prog-switcher-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 50px;
}

.prog-switcher-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    color: #FAB918;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 12px;
    background: rgba(250, 185, 24, 0.15) !important;
    padding: 5px 16px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(250, 185, 24, 0.35) !important;
}

.prog-switcher-title {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif) !important;
    font-size: clamp(2rem, 3.2vw, 2.7rem) !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    margin: 0 0 14px !important;
}

.prog-switcher-desc {
    font-size: 0.98rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.65 !important;
    margin: 0;
}

.prog-switcher-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 22px !important;
}

@media (max-width: 1024px) {
    .prog-switcher-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 580px) {
    .prog-switcher-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

.prog-switcher-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1.5px solid rgba(250, 185, 24, 0.22) !important;
    border-radius: 18px !important;
    padding: 24px 22px !important;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative;
    overflow: hidden;
}

.prog-switcher-card:hover {
    background: rgba(250, 185, 24, 0.1) !important;
    border-color: #FAB918 !important;
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35) !important;
}

.prog-switcher-card.is-current {
    background: radial-gradient(circle at 90% 10%, rgba(250, 185, 24, 0.15) 0%, transparent 60%),
                linear-gradient(160deg, rgba(24, 58, 28, 0.85) 0%, rgba(14, 34, 18, 0.95) 100%) !important;
    border-color: #FAB918 !important;
    box-shadow: 0 0 24px rgba(250, 185, 24, 0.25) !important;
}

.prog-switcher-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.prog-switcher-num {
    font-size: 0.70rem !important;
    font-weight: 900 !important;
    color: #FAB918 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    background: rgba(250, 185, 24, 0.18) !important;
    padding: 3px 10px !important;
    border-radius: 12px;
    border: 1px solid rgba(250, 185, 24, 0.35) !important;
}

.prog-switcher-current-badge {
    font-size: 0.68rem !important;
    font-weight: 900 !important;
    color: #122814 !important;
    background: #FAB918 !important;
    padding: 2px 9px !important;
    border-radius: 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.prog-switcher-name {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif) !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    margin: 0 0 8px !important;
    line-height: 1.3 !important;
}

.prog-switcher-card:hover .prog-switcher-name {
    color: #FAB918 !important;
}

.prog-switcher-tagline {
    font-size: 0.82rem !important;
    color: rgba(255, 255, 255, 0.75) !important;
    line-height: 1.5 !important;
    margin: 0 0 16px !important;
    flex-grow: 1;
}

.prog-switcher-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    color: #FAB918 !important;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.prog-switcher-card:hover .prog-switcher-footer {
    color: #FFFFFF !important;
}

/* ==========================================================================
   PROGRAMME M&E INDICATOR TABLES, RESPONSIVE SPREADS & LIGHTBOX MODAL
   ========================================================================== */

/* 8. VERIFIED M&E INDICATOR SECTION */
.aet-achieve-section {
    padding: 95px 0 !important;
    background: radial-gradient(circle at 50% 12%, #FAF7F0 0%, #F5EFE4 55%, #EDE5D6 100%) !important;
    border-bottom: 1.5px solid #EAE3D6 !important;
}

.aet-achieve-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 46px;
}

.aet-achieve-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(158, 116, 11, 0.14) !important;
    color: #9E740B !important;
    border: 1px solid rgba(158, 116, 11, 0.35) !important;
    padding: 6px 18px !important;
    border-radius: 30px !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    margin-bottom: 14px;
}

.aet-achieve-title {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif) !important;
    font-size: clamp(2.1rem, 3.4vw, 2.85rem) !important;
    font-weight: 800 !important;
    color: #122814 !important;
    line-height: 1.2 !important;
    margin: 0 0 14px !important;
}

.aet-achieve-intro {
    font-size: 1.02rem !important;
    color: #4C5A50 !important;
    line-height: 1.65 !important;
    margin: 0 auto;
}

/* M&E KPI Quick Highlights */
.aet-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.aet-kpi-card {
    background: #FFFFFF !important;
    border: 1.5px solid #EBE4D8 !important;
    border-radius: 18px !important;
    padding: 26px 22px !important;
    text-align: center;
    box-shadow: 0 4px 18px rgba(18, 40, 20, 0.04) !important;
    border-top: 3.5px solid #FAB918 !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.aet-kpi-card:hover {
    transform: translateY(-5px) !important;
    border-color: #FAB918 !important;
    box-shadow: 0 14px 32px rgba(18, 40, 20, 0.1) !important;
}

.aet-kpi-val {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif) !important;
    font-size: clamp(2.2rem, 3.2vw, 2.9rem) !important;
    font-weight: 800 !important;
    color: #122814 !important;
    line-height: 1 !important;
    display: block;
    margin-bottom: 8px;
}

.aet-kpi-val.highlight {
    color: #122814 !important;
}

.aet-kpi-lbl {
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    color: #9E740B !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    display: block;
    margin-bottom: 4px;
}

.aet-kpi-sub {
    font-size: 0.78rem !important;
    color: #556258 !important;
    display: block;
    line-height: 1.45 !important;
}

/* M&E Table Wrap & Header */
.aet-table-wrap {
    background: #FFFFFF;
    border-radius: 20px;
    border: 1.5px solid #EBE4D8;
    box-shadow: 0 8px 30px rgba(18, 40, 20, 0.05);
    overflow: hidden;
    margin-bottom: 30px;
}

.aet-table-top-bar {
    background: #122814;
    color: #FFFFFF;
    padding: 20px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border-bottom: 2px solid #FAB918;
}

.aet-table-top-title {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: 1.25rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.aet-table-source-tag {
    font-size: 0.74rem;
    font-weight: 800;
    color: #FAB918;
    background: rgba(250, 185, 24, 0.16);
    border: 1px solid rgba(250, 185, 24, 0.35);
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.aet-table-scroll {
    overflow-x: auto;
    width: 100%;
}

.aet-indicator-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
}

.aet-indicator-table thead th {
    background: #FAF7F0;
    color: #122814;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 16px 20px;
    border-bottom: 2px solid #E5DCCE;
    white-space: nowrap;
}

.aet-indicator-table tbody td {
    padding: 16px 20px;
    border-bottom: 1px solid #EBE4D8;
    font-size: 0.90rem;
    color: #2D3A30;
    vertical-align: middle;
}

.aet-indicator-table tbody tr:last-child td {
    border-bottom: none;
}

.aet-indicator-table tbody tr:hover td {
    background: rgba(250, 185, 24, 0.06);
}

.aet-indicator-name {
    font-weight: 600;
    color: #122814;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.aet-type-badge {
    font-size: 0.70rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.aet-type-physical,
.aet-type-institutional {
    background: rgba(18, 40, 20, 0.08);
    color: #18381C;
    border: 1px solid rgba(18, 40, 20, 0.2);
}

.aet-type-area {
    background: rgba(158, 116, 11, 0.12);
    color: #9E740B;
    border: 1px solid rgba(158, 116, 11, 0.3);
}

.aet-type-finance {
    background: rgba(250, 185, 24, 0.18);
    color: #7A5703;
    border: 1px solid rgba(250, 185, 24, 0.4);
}

.aet-indicator-num {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: 1.25rem;
    font-weight: 800;
    color: #122814;
    text-align: right;
    white-space: nowrap;
}

/* Audit Note Callout */
.aet-audit-box {
    background: #FFFFFF;
    border-radius: 16px;
    border: 1.5px solid #E5DCCE;
    border-left: 4px solid #FAB918;
    padding: 20px 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    box-shadow: 0 4px 14px rgba(18, 40, 20, 0.03);
}

.aet-audit-icon {
    color: #9E740B;
    flex-shrink: 0;
    margin-top: 2px;
}

.aet-audit-text {
    font-size: 0.88rem;
    color: #556258;
    line-height: 1.6;
    margin: 0;
}

.aet-audit-text strong {
    color: #122814;
}

/* 9. RESPONSIVE SPREAD FOR CHALLENGE & PUBLICATIONS */
@media (max-width: 880px) {
    #challenge .page-container > div,
    #publications .page-container > div {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

/* 10. LUXURY FULL-SCREEN DOCUMENTARY LIGHTBOX VIEWER */
.gallery-lightbox-modal {
    position: fixed;
    inset: 0;
    background: rgba(8, 20, 10, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
}

.gallery-lightbox-modal.is-active {
    display: flex;
    animation: aetFadeIn 0.25s ease-out forwards;
}

@keyframes aetFadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

.lightbox-stage {
    position: relative;
    max-width: 880px;
    width: 100%;
    background: #0E2413;
    border-radius: 24px;
    overflow: hidden;
    border: 1.5px solid rgba(250, 185, 24, 0.35);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
}

.lightbox-img {
    width: 100%;
    max-height: 62vh;
    object-fit: cover;
    background: #061108;
    display: block;
}

.lightbox-meta {
    padding: 26px 30px;
    background: #0E2413;
    color: #FFFFFF;
    border-top: 1px solid rgba(250, 185, 24, 0.2);
}

.lightbox-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 900;
    color: #FAB918;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: rgba(250, 185, 24, 0.15);
    padding: 4px 14px;
    border-radius: 20px;
    border: 1px solid rgba(250, 185, 24, 0.3);
    margin-bottom: 12px;
}

.lightbox-title {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 10px;
    line-height: 1.3;
}

.lightbox-desc {
    font-size: 0.94rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin: 0;
}

.lightbox-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(18, 40, 20, 0.85);
    border: 1.5px solid rgba(250, 185, 24, 0.4);
    color: #FAB918;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    z-index: 10;
}

.lightbox-close-btn:hover {
    background: #FAB918;
    color: #122814;
    transform: rotate(90deg) scale(1.08);
}


/* ============================================================
   STORIES & FIELD VOICES — EDITORIAL MAGAZINE & DOCUMENTARY JOURNAL
   Cinematic National Geographic Style Layout (Strict Savanna Palette)
   ============================================================ */

/* 1. HERO SECTION */
.stories-editorial-hero {
    padding: 160px 0 90px;
    background: radial-gradient(circle at 50% 20%, #152F19 0%, #0E2012 60%, #07130A 100%);
    color: #FFFFFF;
    position: relative;
    border-bottom: 3.5px solid #FAB918;
    overflow: hidden;
}

.stories-editorial-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('assets/img/Ranger trainings.jpg');
    background-size: cover;
    background-position: center 30%;
    opacity: 0.16;
    filter: saturate(0.8) contrast(1.1);
    pointer-events: none;
}

.stories-hero-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 980px;
    margin: 0 auto;
}

.stories-masthead-stamp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(250, 185, 24, 0.15);
    border: 1px solid rgba(250, 185, 24, 0.45);
    padding: 6px 20px;
    border-radius: 30px;
    font-size: 0.74rem;
    font-weight: 800;
    color: #FAB918;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.stories-masthead-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FAB918;
    box-shadow: 0 0 8px #FAB918;
}

.stories-hero-title {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: clamp(2.6rem, 5vw, 4.3rem);
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1.12;
    margin: 0 0 20px;
    letter-spacing: -0.015em;
}

.stories-hero-title .accent-gold {
    color: #FAB918;
    font-style: italic;
}

.stories-hero-lead {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.90);
    line-height: 1.75;
    max-width: 760px;
    margin: 0 auto 34px;
}

/* Hero Stats Ribbon */
.stories-hero-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 20px 24px;
    background: rgba(14, 34, 18, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(250, 185, 24, 0.3);
    border-radius: 18px;
}

@media (max-width: 768px) {
    .stories-hero-metrics {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        padding: 16px;
    }
}

.stories-metric-item {
    text-align: center;
}

.stories-metric-val {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: 1.7rem;
    font-weight: 900;
    color: #FAB918;
    line-height: 1.1;
    margin-bottom: 4px;
    display: block;
}

.stories-metric-lbl {
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.78);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Category Filter Pills */
.stories-filter-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 auto;
}

.stories-filter-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    color: #FFFFFF;
    font-size: 0.84rem;
    font-weight: 700;
    padding: 9px 20px;
    border-radius: 30px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.stories-filter-btn:hover {
    border-color: #FAB918;
    background: rgba(250, 185, 24, 0.15);
    color: #FFFFFF;
    transform: translateY(-2px);
}

.stories-filter-btn.active {
    background: #FAB918;
    border-color: #FAB918;
    color: #122814;
    font-weight: 800;
    box-shadow: 0 4px 16px rgba(250, 185, 24, 0.35);
    transform: translateY(-2px);
}

.stories-filter-btn .s-count {
    background: rgba(18, 40, 20, 0.15);
    color: inherit;
    font-size: 0.72rem;
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 12px;
}

.stories-filter-btn.active .s-count {
    background: #122814;
    color: #FAB918;
}

/* 2. COVER STORY SPREAD */
.stories-cover-section {
    padding: 85px 0 95px;
    background: radial-gradient(circle at 50% 12%, #FAF7F0 0%, #F4ECE0 55%, #ECE2D0 100%);
    border-bottom: 1.5px solid #E2D7C5;
    position: relative;
}

.stories-cover-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(250, 185, 24, 0.18);
    border: 1px solid rgba(250, 185, 24, 0.5);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.74rem;
    font-weight: 900;
    color: #9E740B;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.stories-cover-spread {
    background: #FFFFFF;
    border-radius: 24px;
    border: 1.5px solid #EAE3D6;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(18, 40, 20, 0.08);
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.stories-cover-spread:hover {
    box-shadow: 0 24px 60px rgba(18, 40, 20, 0.14);
}

@media (max-width: 980px) {
    .stories-cover-spread {
        grid-template-columns: 1fr;
    }
}

.stories-cover-media {
    position: relative;
    min-height: 440px;
    overflow: hidden;
    background: #122814;
}

.stories-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.stories-cover-spread:hover .stories-cover-img {
    transform: scale(1.05);
}

.stories-cover-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 32, 18, 0.25) 0%, rgba(14, 32, 18, 0.1) 40%, rgba(10, 24, 13, 0.88) 100%);
    pointer-events: none;
}

.stories-cover-top-pill {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #FAB918;
    color: #122814;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 2;
}

.stories-cover-location {
    position: absolute;
    bottom: 18px;
    left: 20px;
    right: 20px;
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.78rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 7px;
    z-index: 2;
}

.stories-cover-body {
    padding: 44px 44px 38px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media (max-width: 600px) {
    .stories-cover-body {
        padding: 28px 24px;
    }
}

.stories-cover-meta {
    font-size: 0.76rem;
    font-weight: 800;
    color: #9E740B;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    margin-bottom: 12px;
    display: block;
}

.stories-cover-headline {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: clamp(1.8rem, 2.8vw, 2.4rem);
    font-weight: 900;
    color: #122814;
    line-height: 1.2;
    margin: 0 0 18px;
}

.stories-cover-quote {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-style: italic;
    font-size: 1.06rem;
    color: #18381C;
    line-height: 1.6;
    border-left: 3.5px solid #FAB918;
    padding-left: 16px;
    margin: 0 0 18px;
}

.stories-cover-narrative {
    font-size: 0.96rem;
    color: #4A584E;
    line-height: 1.7;
    margin: 0 0 24px;
}

.stories-cover-author-row {
    padding-top: 20px;
    border-top: 1px solid #EAE3D6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.stories-author-lockup {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stories-author-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #18381C;
    color: #FAB918;
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: 1.15rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #FAB918;
    flex-shrink: 0;
}

.stories-author-name {
    font-size: 0.94rem;
    font-weight: 800;
    color: #122814;
    display: block;
    line-height: 1.2;
}

.stories-author-role {
    font-size: 0.74rem;
    color: #6C7A70;
    font-weight: 600;
    display: block;
    margin-top: 2px;
}

.stories-cover-cta {
    background: #122814;
    color: #FAB918;
    font-size: 0.86rem;
    font-weight: 800;
    padding: 11px 24px;
    border-radius: 30px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
    border: 1.5px solid #FAB918;
}

.stories-cover-cta:hover {
    background: #FAB918;
    color: #122814;
    transform: translateX(3px);
    box-shadow: 0 6px 18px rgba(18, 40, 20, 0.25);
}

/* 3. EDITORIAL MAGAZINE GRID */
.stories-magazine-section {
    padding: 95px 0 110px;
    background: #FAF6EE;
    position: relative;
    border-bottom: 1.5px solid #E2D7C5;
}

.stories-magazine-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 52px;
}

.stories-magazine-title {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: clamp(2.2rem, 3.8vw, 3.2rem);
    font-weight: 900;
    color: #122814;
    line-height: 1.18;
    margin: 0 0 16px;
}

.stories-magazine-desc {
    font-size: 1.06rem;
    color: #4A584E;
    line-height: 1.7;
    margin: 0;
}

/* 3-Column Magazine Cards Grid */
.stories-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

@media (max-width: 1040px) {
    .stories-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 660px) {
    .stories-cards-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}

.story-card {
    background: #FFFFFF;
    border-radius: 20px;
    border: 1.5px solid #EAE3D6;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(18, 40, 20, 0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.3s ease;
    position: relative;
}

.story-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 42px rgba(18, 40, 20, 0.12);
    border-color: #FAB918;
}

.story-card-media {
    position: relative;
    height: 220px;
    overflow: hidden;
    background: #122814;
}

.story-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.story-card:hover .story-card-img {
    transform: scale(1.08);
}

.story-card-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 32, 18, 0.2) 0%, rgba(14, 32, 18, 0.1) 40%, rgba(10, 24, 13, 0.88) 100%);
    pointer-events: none;
}

.story-card-tag {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #122814;
    color: #FAB918;
    border: 1px solid rgba(250, 185, 24, 0.45);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 11px;
    border-radius: 14px;
    z-index: 2;
}

.story-card-readtime {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(6px);
    color: #122814;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 12px;
    z-index: 2;
}

.story-card-body {
    padding: 24px 22px 18px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.story-card-category {
    font-size: 0.68rem;
    font-weight: 900;
    color: #9E740B;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    display: block;
}

.story-card-title {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: 1.3rem;
    font-weight: 800;
    color: #122814;
    line-height: 1.25;
    margin: 0 0 12px;
}

.story-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.story-card-title a:hover {
    color: #9E740B;
}

.story-card-excerpt {
    font-size: 0.88rem;
    color: #556258;
    line-height: 1.62;
    margin: 0 0 20px;
}

.story-card-footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #EAE3D6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.story-author-mini {
    display: flex;
    align-items: center;
    gap: 9px;
}

.story-author-mini-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #18381C;
    color: #FAB918;
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: 0.85rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #FAB918;
    flex-shrink: 0;
}

.story-author-mini-name {
    font-size: 0.82rem;
    font-weight: 800;
    color: #122814;
    display: block;
    line-height: 1.2;
}

.story-author-mini-role {
    font-size: 0.68rem;
    color: #76837A;
    display: block;
}

.story-card-link {
    font-size: 0.80rem;
    font-weight: 800;
    color: #9E740B;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.story-card-link:hover {
    color: #122814;
    transform: translateX(3px);
}

/* 4. ORAL PROVERBS & QUOTE MOSAIC */
.stories-proverbs-section {
    padding: 95px 0 105px;
    background: #0E2214;
    color: #FFFFFF;
    position: relative;
    border-bottom: 3.5px solid #FAB918;
}

.stories-proverbs-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 48px;
}

.stories-proverbs-eyebrow {
    font-size: 0.74rem;
    font-weight: 800;
    color: #FAB918;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 12px;
}

.stories-proverbs-title {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: clamp(2.2rem, 3.6vw, 3.0rem);
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1.2;
    margin: 0 0 14px;
}

.stories-proverbs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

@media (max-width: 900px) {
    .stories-proverbs-grid {
        grid-template-columns: 1fr;
    }
}

.stories-quote-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(250, 185, 24, 0.25);
    border-radius: 20px;
    padding: 34px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease;
    position: relative;
}

.stories-quote-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #FAB918;
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
}

.stories-quote-glyph {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: 3.5rem;
    color: #FAB918;
    line-height: 1;
    margin-bottom: 12px;
    opacity: 0.8;
}

.stories-quote-text {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-style: italic;
    font-size: 1.15rem;
    color: #FFFFFF;
    line-height: 1.6;
    margin: 0 0 20px;
}

.stories-quote-author {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.75);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stories-quote-author strong {
    color: #FAB918;
}

/* 5. EDITORIAL DISPATCH SIGNUP */
.stories-signup-strip {
    padding: 80px 0;
    background: radial-gradient(circle at 50% 20%, #152E1B 0%, #0F2314 100%);
    color: #FFFFFF;
    text-align: center;
    border-top: 1px solid rgba(250, 185, 24, 0.2);
}

.stories-signup-box {
    max-width: 680px;
    margin: 0 auto;
}

.stories-signup-title {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: clamp(2rem, 3.4vw, 2.7rem);
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 14px;
}

.stories-signup-desc {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.65;
    margin: 0 0 26px;
}

.stories-signup-form {
    display: flex;
    justify-content: center;
    gap: 10px;
    max-width: 480px;
    margin: 0 auto;
}

@media (max-width: 540px) {
    .stories-signup-form {
        flex-direction: column;
    }
}

.stories-signup-input {
    flex-grow: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    padding: 12px 18px;
    border-radius: 30px;
    color: #FFFFFF;
    font-size: 0.90rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.stories-signup-input:focus {
    border-color: #FAB918;
    background: rgba(255, 255, 255, 0.16);
}

.stories-signup-btn {
    background: #FAB918;
    color: #122814;
    font-size: 0.88rem;
    font-weight: 800;
    padding: 12px 26px;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.stories-signup-btn:hover {
    background: #FFFFFF;
    color: #122814;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(250, 185, 24, 0.35);
}

/* 6. MODAL READER POPUP */
.story-reader-modal {
    position: fixed;
    inset: 0;
    background: rgba(10, 24, 13, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.story-reader-modal.is-active {
    display: flex;
}

.story-reader-dialog {
    background: #FFFFFF;
    border-radius: 24px;
    max-width: 780px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    padding: 44px;
    position: relative;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
    border: 1.5px solid #EAE3D6;
}

@media (max-width: 600px) {
    .story-reader-dialog {
        padding: 28px 20px;
    }
}

.story-reader-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #FAF6EE;
    border: 1px solid #EAE3D6;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #122814;
    transition: all 0.2s ease;
}

.story-reader-close:hover {
    background: #FAB918;
    color: #122814;
    transform: rotate(90deg);
}


/* ========================================================
   AMBOSELI ECOSYSTEM INTERACTIVE MAP & FILTER SUITE
   ======================================================== */
.map-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
    user-select: none;
    font-family: inherit;
}

.map-filter-btn:hover {
    background: rgba(250, 185, 24, 0.18);
    border-color: rgba(250, 185, 24, 0.5);
    color: #FAB918;
    transform: translateY(-1px);
}

.map-filter-btn.active {
    background: #FAB918;
    border-color: #FAB918;
    color: #122814;
    font-weight: 800;
    box-shadow: 0 4px 16px rgba(250, 185, 24, 0.35);
}

.filter-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.filter-dot.dot-all { background: #FFFFFF; }
.filter-dot.dot-core { background: #FAB918; }
.filter-dot.dot-conservancy { background: #4ADE80; }
.filter-dot.dot-corridor { background: #F59E0B; }

.map-filter-btn.active .filter-dot.dot-all { background: #122814; }
.map-filter-btn.active .filter-dot.dot-core { background: #122814; }
.map-filter-btn.active .filter-dot.dot-conservancy { background: #122814; }
.map-filter-btn.active .filter-dot.dot-corridor { background: #122814; }

/* Interactive Map Canvas Wrapper */
#amboseli-interactive-map {
    position: relative;
    width: 100%;
    min-height: 560px;
    background: radial-gradient(circle at 50% 40%, #17361D 0%, #0E2012 70%, #09160C 100%);
    overflow: hidden;
    user-select: none;
}

.amboseli-map-svg {
    width: 100%;
    height: 100%;
    min-height: 560px;
    display: block;
}

/* Corridor Flow Animations */
@keyframes corridorDashFlow {
    0% { stroke-dashoffset: 40; }
    100% { stroke-dashoffset: 0; }
}

@keyframes beaconRadar {
    0% { r: 10; opacity: 0.9; }
    70% { r: 26; opacity: 0; }
    100% { r: 26; opacity: 0; }
}

@keyframes beaconGlow {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(250, 185, 24, 0.6)); }
    50% { filter: drop-shadow(0 0 12px rgba(250, 185, 24, 0.95)); }
}

.corridor-active-flow {
    stroke-dasharray: 8 6;
    animation: corridorDashFlow 1.6s linear infinite;
}

/* Landmark Node Interactivity */
.map-landmark-node {
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    transform-origin: center;
}

.map-landmark-node:hover {
    transform: scale(1.18);
}

.map-landmark-node .beacon-ring {
    transform-origin: center;
    animation: beaconRadar 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.map-landmark-node.is-dimmed {
    opacity: 0.20;
    filter: grayscale(80%);
    pointer-events: none;
}

.map-landmark-node.is-highlighted {
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(250, 185, 24, 0.85));
}

.map-landmark-node.is-active-pin circle.pin-core {
    stroke: #FFFFFF;
    stroke-width: 3px;
}

/* Landmark Intelligence Overlay Drawer */
.map-intel-drawer {
    position: absolute;
    bottom: 24px;
    left: 24px;
    max-width: 440px;
    width: calc(100% - 48px);
    background: rgba(14, 32, 16, 0.96);
    backdrop-filter: blur(14px);
    border: 1.5px solid rgba(250, 185, 24, 0.45);
    border-radius: 18px;
    padding: 22px 24px;
    color: #FFFFFF;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.65);
    z-index: 20;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(0);
}

.map-intel-drawer.drawer-hidden {
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
}

.map-intel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.map-intel-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 10px;
    border-radius: 999px;
}

.map-intel-badge.badge-core {
    background: rgba(250, 185, 24, 0.18);
    color: #FAB918;
    border: 1px solid rgba(250, 185, 24, 0.5);
}

.map-intel-badge.badge-conservancy {
    background: rgba(74, 222, 128, 0.18);
    color: #4ADE80;
    border: 1px solid rgba(74, 222, 128, 0.5);
}

.map-intel-badge.badge-corridor {
    background: rgba(245, 158, 11, 0.2);
    color: #FBBF24;
    border: 1px solid rgba(245, 158, 11, 0.5);
}

.map-intel-close {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
    transition: all 0.2s ease;
}

.map-intel-close:hover {
    background: #FAB918;
    color: #122814;
    border-color: #FAB918;
}

.map-intel-title {
    font-size: 1.28rem;
    font-weight: 800;
    color: #FAB918;
    margin: 0 0 6px;
    line-height: 1.25;
}

.map-intel-metric {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.map-intel-desc {
    font-size: 0.86rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 16px;
}

.map-intel-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 800;
    color: #FAB918;
    text-decoration: none;
    transition: color 0.2s ease;
}

.map-intel-action:hover {
    color: #FFFFFF;
    text-decoration: underline;
}

/* Floating Map View Controls */
.map-canvas-tools {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 15;
}

.map-tool-btn {
    background: rgba(14, 32, 16, 0.88);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.map-tool-btn:hover {
    background: rgba(250, 185, 24, 0.2);
    border-color: #FAB918;
    color: #FAB918;
}

/* Map Legend */
.map-live-legend {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(14, 32, 16, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 10px 14px;
    z-index: 15;
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
}

.legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend-swatch.swatch-core { background: #FAB918; }
.legend-swatch.swatch-conservancy { background: #4ADE80; }
.legend-swatch.swatch-corridor { background: #F59E0B; }
.legend-swatch.swatch-water { background: #336149; }

@media (max-width: 768px) {
    #amboseli-interactive-map {
        min-height: 480px;
    }
    .amboseli-map-svg {
        min-height: 480px;
    }
    .map-intel-drawer {
        bottom: 12px;
        left: 12px;
        width: calc(100% - 24px);
        padding: 16px;
    }
    .map-live-legend {
        display: none;
    }
}

/* ==========================================================================
   PILLAR 01: ECOSYSTEM PLANNING & MANAGEMENT - EDITORIAL & TECHNICAL STYLES
   ========================================================================== */

/* 1. Deluxe Hero Section */
.prog-hero-deluxe {
    position: relative;
    background: linear-gradient(175deg, rgba(14, 34, 18, 0.88) 0%, rgba(10, 24, 14, 0.96) 100%), 
                url('../img/Olgulului Buffer Landscapes.jpg') center/cover no-repeat;
    padding: 130px 0 70px;
    color: #FFFFFF;
    border-bottom: 4px solid #FAB918;
}

.prog-hero-kicker-strip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(250, 185, 24, 0.15);
    border: 1px solid rgba(250, 185, 24, 0.45);
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.76rem;
    font-weight: 800;
    color: #FAB918;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 18px;
}

.prog-hero-title {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: clamp(2.4rem, 4.4vw, 3.8rem);
    font-weight: 800;
    line-height: 1.14;
    color: #FFFFFF;
    margin: 0 0 16px;
}

.prog-hero-subtitle {
    font-size: clamp(1.15rem, 1.8vw, 1.4rem);
    font-weight: 600;
    color: #FAB918;
    line-height: 1.4;
    margin: 0 0 18px;
    max-width: 960px;
}

.prog-hero-narrative {
    font-size: 1.08rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.75;
    margin: 0 0 28px;
    max-width: 960px;
}

.prog-hero-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 32px;
}

.prog-hero-tag {
    font-size: 0.76rem;
    font-weight: 700;
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    padding: 5px 14px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.prog-hero-tag.gold {
    background: rgba(250, 185, 24, 0.2);
    border-color: #FAB918;
    color: #FAB918;
}

.prog-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 40px;
}

/* Hero Key Indicators Strip */
.prog-hero-kpi-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    background: rgba(18, 40, 20, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1.5px solid rgba(250, 185, 24, 0.3);
    border-radius: 18px;
    padding: 22px 24px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

@media (max-width: 900px) {
    .prog-hero-kpi-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        padding: 18px;
    }
}

@media (max-width: 500px) {
    .prog-hero-kpi-bar {
        grid-template-columns: 1fr;
    }
}

.prog-hero-kpi-item {
    text-align: left;
    border-left: 2px solid rgba(250, 185, 24, 0.35);
    padding-left: 14px;
}

.prog-hero-kpi-item:first-child {
    border-left: none;
    padding-left: 0;
}

.prog-hero-kpi-num {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: clamp(1.8rem, 2.4vw, 2.3rem);
    font-weight: 800;
    color: #FAB918;
    line-height: 1.1;
    display: block;
    margin-bottom: 4px;
}

.prog-hero-kpi-lbl {
    font-size: 0.76rem;
    font-weight: 800;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 2px;
}

.prog-hero-kpi-sub {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.35;
    display: block;
}

/* 2. Statutory Mandate & Landscape Governance */
.prog-mandate-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: stretch;
}

@media (max-width: 920px) {
    .prog-mandate-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.mandate-card {
    border-radius: 20px;
    padding: 38px 34px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 8px 30px rgba(18, 40, 20, 0.04);
}

.mandate-card-threat {
    background: #FFFFFF;
    border: 1.5px solid #F1D2D2;
    border-top: 4px solid #C62828;
}

.mandate-card-solution {
    background: #122814;
    color: #FFFFFF;
    border: 1.5px solid rgba(250, 185, 24, 0.4);
    border-top: 4px solid #FAB918;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
}

.mandate-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
}

.mandate-badge.threat {
    background: #FFEBEE;
    color: #C62828;
    border: 1px solid rgba(198, 40, 40, 0.25);
}

.mandate-badge.solution {
    background: rgba(250, 185, 24, 0.18);
    color: #FAB918;
    border: 1px solid rgba(250, 185, 24, 0.45);
}

.mandate-title {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: 1.85rem;
    font-weight: 800;
    margin: 0 0 16px;
    line-height: 1.25;
}

.mandate-lead {
    font-size: 0.96rem;
    line-height: 1.7;
    margin: 0 0 20px;
}

.mandate-points-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mandate-point-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 0.92rem;
    line-height: 1.6;
}

.mandate-point-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 800;
    font-size: 0.75rem;
    margin-top: 2px;
}

.mandate-point-icon.danger {
    background: #FFEBEE;
    color: #C62828;
}

.mandate-point-icon.success {
    background: rgba(250, 185, 24, 0.2);
    color: #FAB918;
}

/* 3. 4-Tier Spatial Zonal Architecture Grid */
.prog-zones-section {
    padding: 95px 0;
    background: radial-gradient(circle at 50% 12%, #FAF7F0 0%, #F5EFE4 55%, #EDE5D6 100%);
    border-bottom: 1.5px solid #EAE3D6;
}

.prog-zones-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

@media (max-width: 960px) {
    .prog-zones-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}

.prog-zone-card {
    background: #FFFFFF;
    border-radius: 20px;
    border: 1.5px solid #EBE4D8;
    box-shadow: 0 8px 26px rgba(18, 40, 20, 0.04);
    padding: 34px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.prog-zone-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(18, 40, 20, 0.09);
}

.prog-zone-card.zone-1 { border-top: 5px solid #1B5E20; }
.prog-zone-card.zone-2 { border-top: 5px solid #D97706; }
.prog-zone-card.zone-3 { border-top: 5px solid #785210; }
.prog-zone-card.zone-4 { border-top: 5px solid #1E3A8A; }

.zone-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 10px;
}

.zone-badge {
    font-size: 0.72rem;
    font-weight: 900;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.zone-1 .zone-badge { background: #E8F5E9; color: #1B5E20; border: 1px solid #A5D6A7; }
.zone-2 .zone-badge { background: #FEF3C7; color: #B45309; border: 1px solid #FCD34D; }
.zone-3 .zone-badge { background: #F5EFE6; color: #785210; border: 1px solid #D7C6B4; }
.zone-4 .zone-badge { background: #EFF6FF; color: #1E3A8A; border: 1px solid #BFDBFE; }

.zone-acreage-badge {
    font-size: 0.74rem;
    font-weight: 800;
    color: #122814;
    background: #FAF7F0;
    border: 1px solid #EBE4D8;
    padding: 4px 10px;
    border-radius: 12px;
}

.zone-title {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: 1.45rem;
    font-weight: 800;
    color: #122814;
    margin: 0 0 10px;
    line-height: 1.25;
}

.zone-purpose {
    font-size: 0.92rem;
    color: #4A584E;
    line-height: 1.65;
    margin: 0 0 18px;
}

.zone-specs-box {
    background: #FAF7F0;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 18px;
    border: 1px solid #EBE4D8;
}

.zone-spec-row {
    display: flex;
    gap: 8px;
    font-size: 0.86rem;
    line-height: 1.5;
    margin-bottom: 8px;
}

.zone-spec-row:last-child {
    margin-bottom: 0;
}

.zone-spec-icon {
    flex-shrink: 0;
    font-weight: 800;
    line-height: 1;
}

.zone-spec-icon.ok { color: #1B5E20; }
.zone-spec-icon.no { color: #C62828; }

.zone-landscapes-footer {
    padding-top: 14px;
    border-top: 1px dashed #E2D7C5;
    font-size: 0.78rem;
    color: #7A5703;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 4. Spatial Cartography Showcase Section */
.prog-cartography-section {
    padding: 95px 0;
    background: #FFFFFF;
    border-bottom: 1.5px solid #EAE3D6;
}

.prog-cartography-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 36px;
    align-items: start;
}

@media (max-width: 1024px) {
    .prog-cartography-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

.cartography-map-frame {
    background: #FAF7F0;
    border-radius: 20px;
    border: 1.5px solid #EAE3D6;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(18, 40, 20, 0.06);
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.cartography-map-frame:hover {
    transform: translateY(-4px);
    border-color: #FAB918;
    box-shadow: 0 18px 40px rgba(18, 40, 20, 0.12);
}

.cartography-img-wrap {
    width: 100%;
    height: 480px;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    background: #122814;
}

@media (max-width: 600px) {
    .cartography-img-wrap {
        height: 320px;
    }
}

.cartography-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.cartography-map-frame:hover .cartography-img {
    transform: scale(1.04);
}

.cartography-badge-overlay {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(14, 34, 18, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #FAB918;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(250, 185, 24, 0.35);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.cartography-zoom-tag {
    position: absolute;
    bottom: 14px;
    right: 14px;
    background: rgba(14, 34, 18, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #FFFFFF;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cartography-legend-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 10px 4px;
}

.cartography-legend-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    font-weight: 700;
    color: #2D3A30;
}

.cartography-swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.cartography-intel-card {
    background: #122814;
    color: #FFFFFF;
    border-radius: 20px;
    border: 1.5px solid rgba(250, 185, 24, 0.35);
    padding: 34px 30px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16);
}

.cartography-intel-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    color: #FAB918;
    background: rgba(250, 185, 24, 0.15);
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
}

.cartography-intel-title {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: 1.65rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 16px;
    line-height: 1.25;
}

.cartography-intel-desc {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.86);
    line-height: 1.65;
    margin: 0 0 22px;
}

.corridor-item-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
}

.corridor-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 16px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.corridor-item:hover {
    background: rgba(250, 185, 24, 0.1);
    border-color: rgba(250, 185, 24, 0.35);
}

.corridor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.corridor-name {
    font-weight: 800;
    font-size: 0.88rem;
    color: #FAB918;
}

.corridor-scope {
    font-size: 0.70rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
}

.corridor-desc {
    font-size: 0.80rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.45;
    margin: 0;
}

.gis-ops-callout {
    background: rgba(250, 185, 24, 0.12);
    border: 1px solid rgba(250, 185, 24, 0.3);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 0.80rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
}

.gis-ops-callout strong {
    color: #FAB918;
}

/* 5. Deep Core Interventions */
.prog-interventions-5grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 1024px) {
    .prog-interventions-5grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .prog-interventions-5grid {
        grid-template-columns: 1fr;
    }
}

.prog-activity-detail-card {
    background: #FFFFFF;
    border-radius: 18px;
    border: 1.5px solid #EBE4D8;
    padding: 30px 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 6px 20px rgba(18, 40, 20, 0.04);
    border-top: 4px solid #FAB918;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.prog-activity-detail-card:hover {
    transform: translateY(-6px);
    border-color: #FAB918;
    box-shadow: 0 16px 36px rgba(18, 40, 20, 0.1);
}

.activity-detail-badge {
    font-size: 0.70rem;
    font-weight: 900;
    color: #9E740B;
    background: rgba(250, 185, 24, 0.16);
    border: 1px solid rgba(250, 185, 24, 0.4);
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.activity-detail-title {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: 1.25rem;
    font-weight: 800;
    color: #122814;
    margin: 0 0 10px;
    line-height: 1.3;
}

.activity-detail-desc {
    font-size: 0.88rem;
    color: #4A584E;
    line-height: 1.65;
    margin: 0 0 16px;
    flex-grow: 1;
}

.activity-impact-box {
    background: #FAF7F0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.78rem;
    color: #122814;
    border-left: 3px solid #FAB918;
    line-height: 1.45;
}

.activity-impact-box strong {
    color: #9E740B;
}

/* 6. Institutional Governance & Stakeholder Ecosystem */
.prog-governance-section {
    padding: 90px 0;
    background: #FAF7F0;
    border-bottom: 1.5px solid #EAE3D6;
}

.prog-governance-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

@media (max-width: 960px) {
    .prog-governance-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.prog-governance-card {
    background: #FFFFFF;
    border-radius: 18px;
    border: 1.5px solid #EBE4D8;
    padding: 30px 26px;
    box-shadow: 0 6px 20px rgba(18, 40, 20, 0.03);
    border-top: 3.5px solid #122814;
}

.prog-governance-badge {
    font-size: 0.70rem;
    font-weight: 900;
    color: #122814;
    background: rgba(18, 40, 20, 0.08);
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.prog-governance-title {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: 1.3rem;
    font-weight: 800;
    color: #122814;
    margin: 0 0 14px;
    line-height: 1.25;
}

.prog-governance-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.prog-governance-item {
    font-size: 0.86rem;
    color: #4A584E;
    line-height: 1.5;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.prog-governance-item strong {
    color: #122814;
}

/* 7. Technical Publications & Dispatches Tri-Grid */
.prog-publications-trigrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

@media (max-width: 960px) {
    .prog-publications-trigrid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}


/* ==========================================================================
   MODERN LUXURY EDITORIAL SYSTEM FOR PROGRAMME PLANNING (PILLAR 01)
   Bento Grids, Glassmorphism, Cinematic Hero, Modern Typography & Spacing
   ========================================================================== */

/* Modern Hero */
.mod-hero-wrap {
    position: relative;
    background: radial-gradient(circle at 80% 20%, rgba(250, 185, 24, 0.12) 0%, transparent 50%),
                linear-gradient(175deg, #0A1B0F 0%, #112816 60%, #0D1F12 100%);
    padding: 140px 0 90px;
    color: #FFFFFF;
    border-bottom: 3px solid #FAB918;
    overflow: hidden;
}

.mod-hero-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../img/Olgulului Buffer Landscapes.jpg') center/cover no-repeat;
    opacity: 0.18;
    mix-blend-mode: luminosity;
    pointer-events: none;
}

.mod-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: center;
}

@media (max-width: 992px) {
    .mod-hero-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

.mod-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.74rem;
    font-weight: 800;
    color: #FAB918;
    background: rgba(250, 185, 24, 0.12);
    border: 1px solid rgba(250, 185, 24, 0.35);
    padding: 6px 16px;
    border-radius: 30px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
}

.mod-hero-title {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: clamp(2.5rem, 4.2vw, 3.8rem);
    font-weight: 800;
    line-height: 1.12;
    color: #FFFFFF;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
}

.mod-hero-title span {
    color: #FAB918;
    display: inline;
}

.mod-hero-lead {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.65;
    margin: 0 0 28px;
    max-width: 580px;
}

.mod-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* Glass Feature Card in Hero */
.mod-hero-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid rgba(250, 185, 24, 0.25);
    border-radius: 24px;
    padding: 32px 28px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    position: relative;
}

.mod-hero-card-img-wrap {
    height: 180px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    margin-bottom: 20px;
}

.mod-hero-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mod-hero-card-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(14, 34, 18, 0.9);
    border: 1px solid rgba(250, 185, 24, 0.4);
    color: #FAB918;
    font-size: 0.70rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mod-hero-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 18px;
}

.mod-stat-num {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: 1.45rem;
    font-weight: 800;
    color: #FAB918;
    display: block;
    line-height: 1.1;
}

.mod-stat-lbl {
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: block;
    margin-top: 4px;
}

/* Modern Bento Grid for Key Numbers */
.mod-bento-section {
    padding: 90px 0;
    background: #FAF7F2;
    border-bottom: 1.5px solid #EAE3D6;
}

.mod-section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 50px;
}

.mod-section-kicker {
    font-size: 0.74rem;
    font-weight: 900;
    color: #9E740B;
    background: rgba(158, 116, 11, 0.12);
    border: 1px solid rgba(158, 116, 11, 0.28);
    padding: 5px 16px;
    border-radius: 20px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}

.mod-section-title {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: clamp(2.1rem, 3.4vw, 2.75rem);
    font-weight: 800;
    color: #122814;
    line-height: 1.2;
    margin: 0 0 12px;
}

.mod-section-desc {
    font-size: 1.02rem;
    color: #556258;
    line-height: 1.6;
    margin: 0;
}

.mod-bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

@media (max-width: 992px) {
    .mod-bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    .mod-bento-grid {
        grid-template-columns: 1fr;
    }
}

.mod-bento-card {
    background: #FFFFFF;
    border-radius: 20px;
    border: 1.5px solid #EBE4D8;
    padding: 32px 26px;
    box-shadow: 0 8px 24px rgba(18, 40, 20, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    border-top: 4px solid #FAB918;
    position: relative;
}

.mod-bento-card:hover {
    transform: translateY(-6px);
    border-color: #FAB918;
    box-shadow: 0 18px 40px rgba(18, 40, 20, 0.1);
}

.mod-bento-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(250, 185, 24, 0.15);
    color: #9E740B;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 1.3rem;
}

.mod-bento-val {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: clamp(2rem, 2.8vw, 2.7rem);
    font-weight: 800;
    color: #122814;
    line-height: 1;
    margin-bottom: 8px;
}

.mod-bento-title {
    font-size: 0.84rem;
    font-weight: 900;
    color: #9E740B;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.mod-bento-sub {
    font-size: 0.86rem;
    color: #556258;
    line-height: 1.5;
    margin: 0;
}

/* Strategic Focus Visual Cards (The 4 Pillars of Action) */
.mod-focus-section {
    padding: 95px 0;
    background: #FFFFFF;
    border-bottom: 1.5px solid #EAE3D6;
}

.mod-focus-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

@media (max-width: 1024px) {
    .mod-focus-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 580px) {
    .mod-focus-grid {
        grid-template-columns: 1fr;
    }
}

.mod-focus-card {
    background: #FAF7F2;
    border-radius: 20px;
    border: 1.5px solid #EBE4D8;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 6px 20px rgba(18, 40, 20, 0.04);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.mod-focus-card:hover {
    transform: translateY(-6px);
    border-color: #FAB918;
    box-shadow: 0 16px 36px rgba(18, 40, 20, 0.1);
}

.mod-focus-img-box {
    height: 170px;
    position: relative;
    overflow: hidden;
    background: #122814;
}

.mod-focus-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.mod-focus-card:hover .mod-focus-img-box img {
    transform: scale(1.08);
}

.mod-focus-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(14, 34, 18, 0.88);
    backdrop-filter: blur(8px);
    color: #FAB918;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid rgba(250, 185, 24, 0.35);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mod-focus-body {
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.mod-focus-title {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: 1.25rem;
    font-weight: 800;
    color: #122814;
    line-height: 1.3;
    margin: 0 0 10px;
}

.mod-focus-desc {
    font-size: 0.88rem;
    color: #556258;
    line-height: 1.6;
    margin: 0 0 16px;
    flex-grow: 1;
}

.mod-focus-footer {
    padding-top: 12px;
    border-top: 1px dashed #E2D7C5;
    font-size: 0.76rem;
    font-weight: 800;
    color: #9E740B;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Strategic Challenge vs Solution Duo */
.mod-duo-section {
    padding: 95px 0;
    background: #FAF7F2;
    border-bottom: 1.5px solid #EAE3D6;
}

.mod-duo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: stretch;
}

@media (max-width: 860px) {
    .mod-duo-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.mod-duo-card {
    border-radius: 24px;
    padding: 38px 34px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mod-duo-card.threat {
    background: #FFFFFF;
    border: 1.5px solid #F0DCDC;
    box-shadow: 0 8px 30px rgba(18, 40, 20, 0.04);
    border-top: 4px solid #C62828;
}

.mod-duo-card.solution {
    background: #112816;
    color: #FFFFFF;
    border: 1.5px solid rgba(250, 185, 24, 0.35);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
    border-top: 4px solid #FAB918;
}

.mod-duo-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
}

.mod-duo-badge.threat {
    background: #FFEBEE;
    color: #C62828;
    border: 1px solid rgba(198, 40, 40, 0.2);
}

.mod-duo-badge.solution {
    background: rgba(250, 185, 24, 0.16);
    color: #FAB918;
    border: 1px solid rgba(250, 185, 24, 0.35);
}

.mod-duo-title {
    font-family: var(--ff-serif, 'Playfair Display', Georgia, serif);
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0 0 14px;
    line-height: 1.25;
}

.mod-duo-desc {
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0 0 22px;
}

.mod-duo-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mod-duo-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 0.92rem;
    line-height: 1.55;
}

.mod-duo-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 0.8rem;
    margin-top: 2px;
}

.mod-duo-icon.threat {
    background: #FFEBEE;
    color: #C62828;
}

.mod-duo-icon.solution {
    background: rgba(250, 185, 24, 0.2);
    color: #FAB918;
}

/* Staggered Modern Field Photo Archive */
.mod-gallery-section {
    padding: 95px 0;
    background: #FAF7F2;
    border-bottom: 1.5px solid #EAE3D6;
}

.mod-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 900px) {
    .mod-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    .mod-gallery-grid {
        grid-template-columns: 1fr;
    }
}

.mod-gallery-card {
    background: #FFFFFF;
    border-radius: 18px;
    overflow: hidden;
    border: 1.5px solid #EBE4D8;
    box-shadow: 0 6px 20px rgba(18, 40, 20, 0.04);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mod-gallery-card:hover {
    transform: translateY(-6px);
    border-color: #FAB918;
    box-shadow: 0 16px 36px rgba(18, 40, 20, 0.1);
}

.mod-gallery-img-box {
    height: 220px;
    overflow: hidden;
    position: relative;
    background: #122814;
}

.mod-gallery-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.mod-gallery-card:hover .mod-gallery-img-box img {
    transform: scale(1.08);
}

.mod-gallery-tag {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(14, 34, 18, 0.88);
    backdrop-filter: blur(8px);
    color: #FAB918;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid rgba(250, 185, 24, 0.35);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mod-gallery-meta {
    padding: 18px 20px;
}

.mod-gallery-caption {
    font-size: 0.88rem;
    font-weight: 600;
    color: #122814;
    line-height: 1.5;
    margin: 0 0 10px;
}

.mod-gallery-loc {
    font-size: 0.74rem;
    font-weight: 700;
    color: #9E740B;
    display: flex;
    align-items: center;
    gap: 4px;
}