:root{
            --bg:#f7f9f8;
            --card:#ffffff;
            --accent:#0b6b5b;
            --accent-2:#0f9d77;
            --muted:#6b7280;
            --glass: rgba(11,107,91,0.08);
            --radius:14px;
            --max-width:1200px;
            --shadow: 0 6px 24px rgba(12,40,37,0.06);
            --border: rgba(12,40,37,0.08);
        }
        /* Base Reset & Typography */
        *{box-sizing:border-box}
        html{scroll-behavior: smooth;}
        body{
            font-family: "Inter", system-ui, -apple-system, sans-serif;
            margin:0;
            background:linear-gradient(180deg,var(--bg),#eef6f4 120%);
            color:#0b2b27;
            line-height:1.5;
            -webkit-font-smoothing:antialiased;
        }
        img { max-width: 100%; height: auto; display: block; }
       
        .container{
            width:92%;
            max-width:var(--max-width);
            margin:0 auto;
            padding:48px 0;
        }
        /* Header / Nav */
        header{
            position:sticky;
            top:0;
            z-index:100;
            backdrop-filter: blur(12px);
            background: rgba(255,255,255,0.85);
            border-bottom:1px solid var(--border);
        }
        .nav{
            display:flex;
            gap:24px;
            align-items:center;
            justify-content:space-between;
            height:72px;
            padding: 0;
        }
        .brand{
            display:flex;
            gap:12px;
            align-items:center;
            text-decoration:none;
            color:var(--accent);
            z-index: 101;
        }
        .brand svg{width:40px;height:40px;flex:none;}
        .brand-text h1{font-size:18px;margin:0;font-weight:800;letter-spacing:-0.5px; line-height: 1.1;}
        .brand-text .mini{font-size: 11px; font-weight: 500;}
        /* Desktop Nav */
        .navlinks{display:flex;gap:8px;align-items:center}
        .navlinks a{
            color:var(--muted);
            text-decoration:none;
            padding:8px 14px;
            border-radius:8px;
            font-weight:600;
            font-size: 14px;
            transition: all 0.2s ease;
        }
        .navlinks a:hover{color:var(--accent);background:var(--glass)}
       
        .cta{display:flex;gap:10px; align-items: center;}
        /* Mobile Menu Toggle */
        .menu-toggle {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            padding: 10px;
            z-index: 101;
        }
        .menu-toggle span {
            display: block;
            width: 24px;
            height: 2px;
            background: var(--accent);
            margin-bottom: 5px;
            border-radius: 2px;
            transition: all 0.3s;
        }
        /* Buttons */
        .btn{
            display:inline-flex;
            align-items:center;
            justify-content: center;
            gap:8px;
            padding:10px 20px;
            border-radius:10px;
            border:0;
            cursor:pointer;
            font-weight:700;
            text-decoration:none;
            font-size: 14px;
            transition: transform 0.1s ease, box-shadow 0.2s ease;
        }
        .btn:active { transform: scale(0.98); }
        .btn-primary{
            background:linear-gradient(135deg,var(--accent),var(--accent-2));
            color:white;
            box-shadow: 0 4px 12px rgba(11,107,91,0.25);
        }
        .btn-primary:hover { box-shadow: 0 6px 16px rgba(11,107,91,0.35); }
        .btn-ghost{
            background:transparent;
            color:var(--accent);
            border:1px solid var(--border);
        }
        .btn-ghost:hover { background: var(--glass); }
        /* Hero */
        .hero{
            padding-top: 32px;
        }
        .hero-grid{
            display:grid;
            grid-template-columns: 1fr 0.8fr;
            gap:40px;
            align-items:center;
        }
        .hero-copy h2{
            font-size: clamp(32px, 5vw, 48px);
            margin:0;
            line-height:1.1;
            letter-spacing: -1px;
        }
        .tagline{
            font-size: clamp(16px, 2vw, 18px);
            color:var(--muted);
            margin-top:16px;
            max-width: 500px;
        }
        .hero-ctas{display:flex;gap:12px;margin-top:24px; flex-wrap: wrap;}
       
        .hero-media{
            border-radius:18px;
            overflow:hidden;
            box-shadow: var(--shadow);
            aspect-ratio: 16/10;
            background: #eef6f4;
        }
        .hero-media img{width:100%;height:100%;object-fit:cover;}
        /* Overview Section */
        .overview{
            display:grid;
            grid-template-columns: 2fr 1fr;
            gap:32px;
            margin-top:48px;
            align-items: start;
        }
        .pillars{
            display:grid;
            grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
            gap:16px;
            margin-top:16px;
        }
        .pillar{
            display:flex;
            gap:14px;
            background:var(--card);
            padding:18px;
            border-radius:12px;
            align-items:flex-start;
            box-shadow: 0 2px 10px rgba(12,40,37,0.03);
            border: 1px solid var(--border);
            transition: transform 0.2s;
        }
        .pillar:hover { transform: translateY(-2px); }
        .pillar h4{margin:0;font-size:16px; font-weight: 700;}
        .pillar p{margin:4px 0 0;color:var(--muted);font-size:13px; line-height: 1.4;}
        .highlights{
            background:linear-gradient(180deg, #ffffff, #f0fdf9);
            padding:24px;
            border-radius:16px;
            border: 1px solid var(--border);
            position: sticky;
            top: 90px;
        }
        .highlight-item{
            display:flex; justify-content:space-between; align-items:center;
            padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.04);
        }
        .highlight-item:last-child { border-bottom: none; }
        .highlight-item span { font-weight: 600; font-size: 14px; }
       
        /* Global Sections */
        section{padding:15px 0;border-top:1px solid var(--border)}
        section h3{font-size:24px;margin:0 0 24px; font-weight: 800;}
       
        .two-col{
            display:grid;
            grid-template-columns: 1fr 380px;
            gap:48px;
            align-items:start;
        }
       
        /* Initiatives */
        .initiatives-grid{
            display:grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap:24px;
        }
        .initiative{
            background:var(--card);
            padding:24px;
            border-radius:16px;
            border: 1px solid var(--border);
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            transition: box-shadow 0.2s;
        }
        .initiative:hover { box-shadow: var(--shadow); }
        /* --- BLOG CSS --- */
        .blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 24px;
        }
        .blog-card {
            background: var(--card);
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid var(--border);
            box-shadow: 0 4px 12px rgba(12,40,37,0.03);
            transition: transform 0.2s;
        }
        .blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
        .blog-img {
            height: 180px;
            width: 100%;
            object-fit: cover;
            background: #eef6f4;
        }
        .blog-body { padding: 20px; }
        .blog-date {
            font-size: 12px;
            font-weight: 700;
            color: var(--muted);
            text-transform: uppercase;
            margin-bottom: 8px;
            display: block;
        }
        .blog-title {
            margin: 0 0 8px;
            font-size: 18px;
            font-weight: 700;
            color: var(--accent);
            line-height: 1.3;
        }
        .blog-excerpt {
            font-size: 14px;
            color: var(--muted);
            margin-bottom: 0;
            line-height: 1.5;
        }
        /* Pagination Styles */
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 32px;
            gap: 12px;
            font-size: 14px;
            font-weight: 700;
        }
        .pagination a {
            color: var(--accent);
            text-decoration: none;
            padding: 8px 16px;
            border: 1px solid var(--border);
            border-radius: 8px;
            transition: background 0.2s;
        }
        .pagination a:hover {
            background: var(--glass);
        }
        .pagination .disabled {
            color: var(--muted);
            pointer-events: none;
            opacity: 0.5;
            border-color: transparent;
        }

        /* Forms */
        .form-card{
            background:white; padding:24px; border-radius:16px;
            box-shadow:var(--shadow); border: 1px solid var(--border);
        }
        .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
        label{font-weight: 600; font-size: 13px; color: var(--accent); display: block; margin-bottom: 6px;}
        input, textarea, select{
            width:100%; padding:12px; border-radius:8px;
            border:1px solid #d1d5db; font-size:14px; outline: none;
            font-family: inherit; transition: border-color 0.2s;
        }
        input:focus, textarea:focus, select:focus { border-color: var(--accent); }
        textarea{min-height:100px;resize:vertical}
        /* Footer */
        .footer{
            padding:64px 0 32px;
            background:#06231f; color:#dff3ec;
            margin-top:64px; border-radius:24px 24px 0 0;
        }
        .footer-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:32px}
        .footer a { color: #8ebbb3; text-decoration: none; display: block; margin-bottom: 8px; font-size: 14px;}
        .footer a:hover { color: white; }
        /* Utilities */
        .mini{font-size:12px;color:var(--muted)}
        .mini.muted { color: #9ca3af; }
        a.anchor{color:var(--accent);text-decoration:none; font-weight: 600; font-size: 13px;}
        .chip{background:#d1fae5; color:#065f46; padding:2px 6px; border-radius:4px;}
       
        /* --- RESPONSIVENESS --- */
        @media (max-width: 1000px) {
            .hero-grid, .overview, .two-col { grid-template-columns: 1fr; }
            .highlights { position: static; margin-top: 24px; }
        }
        @media (max-width: 768px) {
            .menu-toggle { display: block; }
            .navlinks {
                position: fixed;
                top: 72px; left: 0; right: 0;
                background: white;
                flex-direction: column;
                align-items: flex-start;
                padding: 24px;
                gap: 16px;
                border-bottom: 1px solid var(--border);
                box-shadow: 0 10px 20px rgba(0,0,0,0.05);
                transform: translateY(-150%);
                transition: transform 0.3s ease-in-out;
                z-index: 99;
            }
            .navlinks.active { transform: translateY(0); }
            .navlinks a { width: 100%; padding: 12px 0; border-bottom: 1px solid #f3f4f6; }
            .cta { display: none; }
            .form-row { grid-template-columns: 1fr; }
            .hero-media { min-height: 200px; }
        }
        @media (max-width: 480px) {
            .container { width: 90%; }
            .brand-text h1 { font-size: 15px; }
            .hero-copy h2 { font-size: 32px; }
            .hero-ctas { flex-direction: column; width: 100%; }
            .btn { width: 100%; }
        }
        
        
/* --- LIGHTBOX FULL SCREEN PREVIEW --- */
.lightbox-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9); /* Dark background */
    display: none; /* Hidden by default */
    z-index: 99999; /* Higher than everything else */
    align-items: center;
    justify-content: center;
}

.lightbox-overlay.active {
    display: flex; /* Shown when image is clicked */
}

#lb-enlarged-img {
    max-width: 85%;
    max-height: 80vh;
    border: 3px solid white;
    border-radius: 4px;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

.close-lightbox {
    position: absolute;
    top: 20px; right: 30px;
    color: white; font-size: 50px;
    cursor: pointer; font-weight: bold;
}

.lb-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.1);
    color: white; border: none;
    font-size: 40px; padding: 20px;
    cursor: pointer; transition: 0.3s;
}

.lb-arrow:hover { background: rgba(255,255,255,0.3); }
.lb-prev { left: 10px; }
.lb-next { right: 10px; }

/* Responsive adjustments */
@media (max-width: 768px) {
    .lb-arrow { padding: 10px; font-size: 25px; }
    #lb-enlarged-img { max-width: 95%; }
}