body {
            margin: 0;
            font-family: 'Poppins', sans-serif;
            background: #f4f7f6;
            color: #333;
        }

        body{
        background:#f4f6f8;
        line-height:1.7;
        color:#333;
        padding-top:110px;
        }

        /* Responsive Images & Videos */
        img, video{
        max-width:100%;
        height:auto;
        display:block;
        }

        /* Container */
        .section {
            max-width: 1000px;
            margin: auto;
            padding: 40px 20px;
        }

        /* Card */
        .card {
            background: #ffffff;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.08);
            text-align: center;
        }

        /* Title */
        .card h1 {
            font-size: 28px;
            color: #1b5e20;
            margin-bottom: 10px;
        }

        /* Tagline */
        .tags {
            margin: 15px 0 25px;
        }

        .tag {
            display: inline-block;
            background: #046815;
            color: #2e7d32;
            padding: 6px 12px;
            margin: 5px;
            border-radius: 20px;
            font-size: 13px;
        }

        /* Paragraph */
        .card p {
            font-size: 15px;
            line-height: 1.7;
            text-align: justify;
        }

        /* Highlight */
        .highlight {
            color: #046815;
            font-weight: 600;
        }

        /* Responsive */
        @media (max-width: 600px) {
            .card {
                padding: 25px;
            }

            .card h1 {
                font-size: 22px;
            }

            .card p {
                font-size: 14px;
            }
        }
        *{
        margin:0;
        padding:0;
        box-sizing:border-box;
        font-family:Poppins,sans-serif;
        }

        body{
        background:#f4f6f8;
        line-height:1.7;
        color:#333;
        }

        /* HEADER */

        /* HEADER */

        header{
          background:#046815;
          color:white;
          position:fixed;
          top:0;
          left:0;
          width:100%;
          z-index:1000;
          padding:6px 15px; /* Reduced padding */
          box-shadow:0 3px 10px rgba(0,0,0,.15);
          text-align:center;
        }

        /* Smaller Logo */

        .logo{
          width:60px; /* Reduced from 90px */
          display:block;
          margin:auto;
        }

        /* Smaller Title */

        h1{
          margin:3px 0 2px;
          font-size:1rem; /* Reduced from 1.3rem */
        }

        /* Smaller Motto */

        .motto{
          font-size:11px; /* Reduced from 13px */
          margin-bottom:5px;
          font-style:italic;
          opacity:.9;
        }

        /* Navigation */

        nav{
          display:flex;
          justify-content:center;
          flex-wrap:wrap;
          gap:6px;
          margin-top:5px;
        }

        nav a{
          background:white;
          color:#026925;
          text-decoration:none;
          padding:4px 10px; /* Reduced button size */
          border-radius:20px;
          font-size:11px; /* Smaller text */
          font-weight:600;
          transition:.3s;
        }

        nav a:hover{
          background:#ffcccc;
          transform:translateY(-1px);
        }

        .hero{
        margin-top:90px; /* Adjust based on header height */
        }


        /* HERO */

        .hero{
        height:80vh;
        background:url("https://images.unsplash.com/photo-1523240795612-9a054b0db644") center/cover no-repeat;
        display:flex;
        align-items:center;
        justify-content:center;
        text-align:center;
        }

        .hero h2{
        font-size:48px;
        color:white;
        background:rgba(0,0,0,0.55);
        padding:30px 45px;
        border-radius:8px;
        }

        /* GENERAL SECTIONS */

        section{
        padding:70px 10%;
        }

        section h2{
        text-align:center;
        margin-bottom:40px;
        color:#064e3b;
        }

        /* ABOUT CARD */

        .about-container{
        display:flex;
        justify-content:center;
        }

        .about-card{
        background:white;
        max-width:900px;
        padding:40px;
        border-radius:12px;
        box-shadow:0 8px 20px rgba(0,0,0,0.08);
        }

        /* VISION MISSION */

        .vm-container{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
        gap:30px;
        }

        .vm-card{
        background:white;
        padding:30px;
        border-radius:10px;
        box-shadow:0 5px 12px rgba(0,0,0,0.08);
        }

        .vm-card h3{
        color:#064e3b;
        margin-bottom:12px;
        }

        /* PROGRAMS */

        .activities{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
        gap:25px;
        }

        .activity-card{
        background:white;
        border-radius:10px;
        overflow:hidden;
        box-shadow:0 5px 12px rgba(0,0,0,0.1);
        }

        .activity-card img{
        width:100%;
        height:180px;
        object-fit:cover;
        }

        .activity-content{
        padding:20px;
        }

        .read-btn{
        margin-top:12px;
        padding:8px 18px;
        background:#064e3b;
        border:none;
        color:white;
        border-radius:4px;
        cursor:pointer;
        }

        /* PUBLICATIONS */

        .publication-grid{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
        gap:25px;
        }

        .publication-card{
        background:white;
        padding:25px;
        border-radius:10px;
        box-shadow:0 4px 10px rgba(0,0,0,0.1);
        }

        .download-btn{
        display:inline-block;
        margin-top:10px;
        background:#064e3b;
        color:white;
        padding:8px 16px;
        border-radius:4px;
        text-decoration:none;
        }

        /* SLIDESHOW */

        .slideshow-container{
        max-width:700px;
        margin:auto;
        position:relative;
        }

        .slide{
        display:none;
        }

        .slide img{
        width:100%;
        height:400px;
        object-fit:cover;
        border-radius:10px;
        }

        .prev,.next{
        position:absolute;
        top:50%;
        transform:translateY(-50%);
        font-size:20px;
        background:rgba(0,0,0,0.6);
        color:white;
        padding:8px 12px;
        cursor:pointer;
        border-radius:50%;
        }

        .prev{left:10px;}
        .next{right:10px;}

        /* MODAL */

        .modal{
        display:none;
        position:fixed;
        z-index:2000;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background:rgba(0,0,0,0.7);
        }

        .modal-content{
        background:white;
        margin:5% auto;
        padding:30px;
        width:80%;
        max-width:900px;
        border-radius:10px;
        }

        .close{
        float:right;
        font-size:28px;
        cursor:pointer;
        }

        .modal-images{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
        gap:10px;
        margin-top:20px;
        }

        .modal-images img{
        width:100%;
        border-radius:6px;
        }

         /* PAGE SYSTEM */

                .page {
                    display: block;
                    padding: 100px 10%;
                    min-height: 100vh;
                }

                .active {
                    display: block;
                }

                /* HERO */

                .hero {
        min-height:70vh;
        padding:20px;

                    background: url("https://images.unsplash.com/photo-1523240795612-9a054b0db644") center/cover no-repeat;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                }

                    .hero h2 {
                        font-size: 45px;
                        color: white;
                        background: rgba(0,0,0,0.6);
                        padding: 30px;
                        border-radius: 10px;
                    }

                /* SECTION */

                section {
                    margin-top: 40px;
                }

                h2 {
                    text-align: center;
                    margin-bottom: 30px;
                    color: #064e3b;
                }

                /* CARDS */

                .card-container {
                    display: grid;
                    grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
                    gap: 25px;
                }

                .card {
                    background: white;
                    padding: 25px;
                    border-radius: 10px;
                    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
                }

                /* PROJECTS */

                .project {
                    background: white;
                    padding: 25px;
                    border-radius: 10px;
                    margin-bottom: 20px;
                    box-shadow: 0 5px 12px rgba(0,0,0,0.08);
                }

                /* STORIES */

                .story {
                    background: white;
                    padding: 25px;
                    margin-bottom: 20px;
                    border-left: 6px solid #046815;
                }

                /* CONTACT */

                .contact-box {
                    max-width: 700px;
                    margin: auto;
                    background: white;
                    padding: 40px;
                    border-radius: 10px;
                    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
                }

                input, textarea {
                    width: 100%;
                    padding: 10px;
                    margin: 10px 0;
                    border-radius: 5px;
                    border: 1px solid #ccc;
                }

                button {
                    background: #046815;
                    color: white;
                    border: none;
                    padding: 10px 20px;
                    border-radius: 6px;
                    cursor: pointer;
                }

                footer {
                    background: #046815;
                    color: white;
                    text-align: center;
                    padding: 20px;
                }

        /* FOOTER */

        footer{
          background:#046815;
          color:white;
          text-align:center;
          padding:30px 20px;
          margin-top:40px
        }

        footer a{
          color:#ffe6e6;
          margin:0 10px;
          text-decoration:none
        }

        .page{display:block}
        .active{display:block}

        /* PARTNER LOGO SLIDER */

        .partners{
        padding:70px 10%;
        background:white;
        text-align:center;
        }

        .partners h2{
        color:#064e3b;
        margin-bottom:40px;
        }

        .logo-slider{
        overflow:hidden;
        position:relative;
        width:100%;
        }

        .logo-track{
        display:flex;
        width:calc(200px * 30);
        animation:scroll 35s linear infinite;
        }

        .logo-track img{
        width:180px;
        height:80px;
        object-fit:contain;
        margin:0 30px;

        /* LOGOS NOW IN FULL COLOR */
        filter:none;
        opacity:1;

        transition:0.4s;
        }

        /* Hover animation */

        .logo-track img:hover{
        transform:scale(1.1);
        }

        /* Animation */

        @keyframes scroll{
        0%{
        transform:translateX(0);
        }
        100%{
        transform:translateX(-50%);
        }
        }

        /* Pause animation on hover */

        .logo-slider:hover .logo-track{
        animation-play-state:paused;
        }

        .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:20px}
        .card{background:white;border-radius:10px;padding:20px;box-shadow:0 6px 18px rgba(0,0,0,.08)}

         /* Tag Container */
                .tag-container {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 12px;
                }

                /* Tags */
                .tag {
                    color: white;
                    padding: 8px 16px;
                    border-radius: 25px;
                    font-weight: 600;
                    font-size: 10px;
                    cursor: pointer;
                    transition: 0.3s;
                }

                    .tag:hover {
                        transform: scale(1.05);
                        opacity: 0.9;
                    }

                /* Tag Colors */
                .green-dark {
                    background: #064e3b;
                }

                .green {
                    background: #10b981;
                }

                .orange {
                    background: #f59e0b;
                }

                .blue {
                    background: #3b82f6;
                }

                /* Popup Modal */
                .modal {
                    display: none;
                    position: fixed;
                    z-index: 1000;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0,0,0,0.6);
                    justify-content: center;
                    align-items: center;
                }

                /* Modal Content */
                .modal-content {
                    background: white;
                    padding: 30px;
                    border-radius: 12px;
                    width: 90%;
                    max-width: 500px;
                    text-align: center;
                    animation: fadeIn 0.3s ease;
                }

                    .modal-content h3 {
                        margin-bottom: 10px;
                    }

                .close {
                    float: right;
                    font-size: 22px;
                    cursor: pointer;
                    font-weight: bold;
                }

                /* Animation */
                @keyframes fadeIn {
                    from {
                        opacity: 0;
                        transform: scale(0.9);
                    }

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

                .core-values {
                    padding: 70px 10%;
                    text-align: center;
                }

                    .core-values h2 {
                        font-size: 34px;
                        color: #064e3b;
                        margin-bottom: 15px;
                    }

                    .core-values p {
                        color: #555;
                        margin-bottom: 50px;
                    }

                /* Grid */

                .values-grid {
                    display: grid;
                    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
                    gap: 25px;
                }

                /* Card */

                .value-card {
                    background: white;
                    padding: 30px 25px;
                    border-radius: 12px;
                    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
                    transition: 0.3s;
                }

                    .value-card:hover {
                        transform: translateY(-8px);
                        box-shadow: 0 12px 30px rgba(0,0,0,0.15);
                    }

                /* Icon */

                .value-icon {
                    font-size: 40px;
                    margin-bottom: 15px;
                }

                /* Title */

                .value-title {
                    font-size: 20px;
                    font-weight: 400;
                    color: #064e3b;
                    margin-bottom: 10px;
                }

                /* Description */

                .value-desc {
                    font-size: 14px;
                    color: #555;
                    line-height: 1.4;
                }

                 img2 {
                            max-width: 50%;

                            height: auto;
                            border-radius: 15px;
                            box-shadow: 0 8px 16px rgba(0,0,0,0.3);
                             align-items: center;
                            }
                  .center {
            text-align: center;
            }
                  .programs{
        padding:60px 20px;
        text-align:center;
        background:#f5f7fa;
        }

        .programs h2{
        font-size:32px;
        margin-bottom:40px;
        }

        .program-container{
        display:flex;
        justify-content:center;
        flex-wrap:wrap;
        gap:30px;
        }

        .program-card {
            width: 280px;
            height: 360px; 
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 6px 20px rgba(0,0,0,0.1);
            transition: 0.3s;
            cursor: pointer;

            display: flex;
            flex-direction: column;
            justify-content: space-between; 
        }

        .program-card img {
            width: 100%;
            height: 160px;
            object-fit: cover;
        }

        .program-card h3 {
            margin: 10px 15px;
            font-size: 18px;
            height: 60px; 
            overflow: hidden;
        }

        .program-card p {
            margin: 0 15px;
            font-size: 14px;
            height: 40px;
            overflow: hidden;
        }

        .program-card button {
            margin: 15px;
            padding: 10px;
            border: none;
            background: #2E8B57;
            color: white;
            border-radius: 6px;
            cursor: pointer;
        }

    

        /* PROGRAM SECTION */
        .programs{
        padding:60px 20px;
        text-align:center;
        background:#f5f7fa;
        }

        .programs h2{
        font-size:32px;
        margin-bottom:40px;
        }

        .program-container {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        
     
    }

        /* PROGRAM CARD */
        .program-card{
        width:100%;
        max-width:320px;
        margin:auto;
        background:white;
        border-radius:12px;
        overflow:hidden;
        box-shadow:0 6px 20px rgba(0,0,0,0.1);
        transition:0.3s;
        cursor:pointer;
        }

        .program-card:hover{
        transform:translateY(-8px);
        }

        .program-card img{
        width:100%;
        height:170px;
        object-fit:cover;
        }

        .program-card h3{
        margin:15px;
        font-size:20px;
        }

        .program-card p{
        margin:0 15px 15px;
        font-size:14px;
        }

        /* POPUP BACKGROUND */
        .popup{
        display:none;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:rgba(0,0,0,0.7);
        z-index:999;
        overflow-y:auto;
        padding:40px 10px;
        }

        /* POPUP BOX */
        .popup-content{
        background:white;
        width:95%;
        max-width:750px;
        margin:40px auto;
        padding:25px;
        border-radius:10px;
        text-align:center;

        max-height:85vh;
        overflow-y:auto;

        animation:popupFade 0.35s ease;
        }

        /* POPUP ANIMATION */
        @keyframes popupFade{
        from{
        opacity:0;
        transform:scale(0.9);
        }
        to{
        opacity:1;
        transform:scale(1);
        }
        }

        /* CLOSE BUTTON */
        .close{
        font-size:30px;
        float:right;
        cursor:pointer;
        }

        /* IMAGE GALLERY */
       

        /* IMAGE STYLE */
        .popup-images img{
        width:80%;
        border-radius:8px;
        object-fit:cover;

        transition:transform 0.35s ease, box-shadow 0.35s ease;
        cursor:pointer;
        }

        /* ZOOM EFFECT */
        .popup-images img:hover{
        transform:scale(1.15);
        box-shadow:0 10px 25px rgba(0,0,0,0.25);
        z-index:5;
        }

        /* MOBILE */
        @media(max-width:768px){

        .program-container{
        flex-direction:column;
        align-items:center;
        }

        .popup-images{
        flex-direction:column;
        }

        .popup-images img{
        width:80%;
        }

        .about-title {
            font-size: 36px;       /* Makes the text bigger */
            font-weight: 700;      /* Bold and professional */
            color: #1a1a1a;        /* Dark text for readability */
            text-align: center;    /* Centered on the page */
            margin-bottom: 20px;   /* Space below the heading */
            font-family: 'Arial', sans-serif; /* Clean, modern font */
          }

          /* Responsive for smaller screens */
          @media (max-width: 600px) {
            .about-title {
              font-size: 28px;     /* Adjust size for mobile */
            }
          }
        }

        /* CONTAINER CENTERING */
.program-container {
    display: flex;
    justify-content: center; /* centers cards horizontally */
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 30px;
}

/* PROGRAM CARDS */
.program-card {
    width: 450px;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 25px;
    cursor: pointer;
    text-align: center;
    background: #fff;
    transition: 0.3s;
}

.program-card:hover {
    transform: translateY(-5px);
}

.program-card img {
    width: 100%;
    border-radius: 10px;
}

/* POPUP */
.popup {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
}

.popup-content {
    background: #fff;
    margin: 5% auto;
    padding: 20px;
    width: 90%;
    max-width: 900px;
    border-radius: 10px;
    position: relative;
    text-align: left;
}

.close {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 30px;
    cursor: pointer;
}

/* POPUP IMAGES */
.popup-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.popup-images img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s;
}

.popup-images img:hover {
    transform: scale(1.05);
}

/* IMAGE FULLSCREEN MODAL */
.image-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    text-align: center;
}

.image-modal img {
    margin-top: 60px;
    max-width: 90%;
    max-height: 80vh;
    border-radius: 10px;
}

.close-image {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    cursor: pointer;
}




/* ===== VIDEO GALLERY PAGE ===== */

  :root{
    --vg-pine:#0f3d23;
    --vg-forest:#1e6b3a;
    --vg-forest-light:#2f8a4d;
    --vg-copper:#a8571f;
    --vg-copper-light:#c97a3c;
    --vg-copper-glow:#eab278;
    --vg-sand:#f6f3ec;
    --vg-ink:#14231a;
    --vg-line:#e4e0d5;
  }

  /* ---- Hero ---- */
  .vg-hero{
    background:linear-gradient(155deg,var(--vg-pine) 0%,var(--vg-forest) 78%);
    color:#fff;padding:72px 24px 56px;text-align:center;position:relative;overflow:hidden;
  }
  .vg-hero::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
    background:repeating-linear-gradient(90deg,var(--vg-copper) 0 26px,transparent 26px 40px);
    opacity:.85;
  }
  .vg-hero .vg-eyebrow{
    font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--vg-copper-glow);
    font-weight:600;margin-bottom:14px;
  }
  .vg-hero h2{
    font-family:'Fraunces',serif;font-weight:600;font-size:clamp(34px,5vw,54px);
    margin:0 0 16px;line-height:1.08;
  }
  .vg-hero p{
    max-width:620px;margin:0 auto;font-size:16px;line-height:1.7;color:#dcebe1;
  }

  /* ---- Filter tabs ---- */
  .vg-filter-bar{max-width:1080px;margin:-26px auto 0;padding:0 24px;position:relative;z-index:2}
  .vg-filter-track{
    background:#fff;border-radius:16px;box-shadow:0 18px 40px rgba(15,61,35,.14);
    padding:10px;display:flex;gap:6px;overflow-x:auto;border-top:4px solid var(--vg-copper);
  }
  .vg-filter-track::-webkit-scrollbar{height:0}
  .vg-filter-btn{
    border:none;background:transparent;color:var(--vg-pine);font-family:'Poppins',sans-serif;
    font-weight:600;font-size:13.5px;padding:12px 18px;border-radius:10px;cursor:pointer;
    white-space:nowrap;transition:.2s;
  }
  .vg-filter-btn:hover{background:var(--vg-sand)}
  .vg-filter-btn.active{background:var(--vg-forest);color:#fff}

  /* ---- Grid ---- */
  .vg-wrap{max-width:1080px;margin:0 auto;padding:56px 24px 90px}
  .vg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px}

  .vg-card{
    background:#fff;border-radius:16px;overflow:hidden;border:1px solid var(--vg-line);
    box-shadow:0 8px 24px rgba(15,35,20,.06);transition:transform .25s, box-shadow .25s;
    display:flex;flex-direction:column;cursor:pointer;
  }
  .vg-card:hover{transform:translateY(-5px);box-shadow:0 20px 36px rgba(15,35,20,.14)}
  .vg-card:focus-visible{outline:3px solid var(--vg-copper);outline-offset:2px}

  .vg-thumb{
    position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,var(--vg-pine),var(--vg-forest-light));
    display:flex;align-items:center;justify-content:center;overflow:hidden;
  }
  .vg-thumb img, .vg-thumb video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;pointer-events:none}
  .vg-thumb .vg-texture{
    position:absolute;inset:0;
    background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,.10) 0 2px,transparent 3px),
                      radial-gradient(circle at 70% 65%,rgba(255,255,255,.08) 0 2px,transparent 3px),
                      radial-gradient(circle at 45% 80%,rgba(255,255,255,.07) 0 2px,transparent 3px);
    background-size:120px 120px;
  }
  .vg-duration{
    position:absolute;bottom:10px;right:10px;background:rgba(15,35,20,.75);color:#fff;
    font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:6px;letter-spacing:.02em;
  }

  /* signature element: hexagonal copper play badge */
  .vg-play-badge{
    width:58px;height:58px;background:var(--vg-copper);
    clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0% 50%);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform .25s, background .25s;
    position:relative;z-index:1;
  }
  .vg-card:hover .vg-play-badge{transform:scale(1.08);background:var(--vg-copper-light)}
  .vg-play-badge svg{width:18px;height:18px;fill:#fff;margin-left:3px}

  .vg-soon-badge{
    width:58px;height:58px;background:rgba(15,35,20,.55);
    clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0% 50%);
    display:flex;align-items:center;justify-content:center;color:#fff;
    font-size:10px;font-weight:700;letter-spacing:.05em;text-align:center;line-height:1.2;
    border:1px solid rgba(255,255,255,.4);position:relative;z-index:1;
  }

  .vg-card-body{padding:18px 20px 20px}
  .vg-category-chip{
    display:inline-block;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
    color:var(--vg-copper);background:#fbeee0;padding:4px 10px;border-radius:999px;margin-bottom:10px;
  }
  .vg-card-body h3{
    font-family:'Fraunces',serif;font-weight:600;font-size:18px;margin:0 0 8px;color:var(--vg-pine);line-height:1.3;
  }
  .vg-card-body p{margin:0;font-size:13.5px;line-height:1.6;color:#4c5a51}

  .vg-empty-state{text-align:center;padding:60px 20px;color:#6b7a70;font-size:15px;display:none}

  /* ---- Modal ---- */
  .vg-lightbox{
    position:fixed;inset:0;background:rgba(10,20,14,.82);display:none;align-items:center;justify-content:center;
    z-index:9999;padding:24px;
  }
  .vg-lightbox.open{display:flex}
  .vg-lightbox-inner{
    background:#0c1a11;border-radius:16px;max-width:840px;width:100%;overflow:hidden;
    box-shadow:0 30px 70px rgba(0,0,0,.5);
  }
  .vg-lightbox-frame{position:relative;aspect-ratio:16/9;background:#000}
  .vg-lightbox-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
  .vg-lightbox-soon{
    position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    color:#e8e3d6;text-align:center;padding:30px;gap:14px;
  }
  .vg-lightbox-soon .vg-hex{
    width:64px;height:64px;background:var(--vg-copper);
    clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0% 50%);
    display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:11px;
  }
  .vg-lightbox-meta{padding:20px 26px 26px;color:#f1efe8}
  .vg-lightbox-meta .vg-category-chip{background:rgba(234,178,120,.15);color:var(--vg-copper-glow)}
  .vg-lightbox-meta h3{font-family:'Fraunces',serif;margin:10px 0 8px;font-size:20px}
  .vg-lightbox-meta p{margin:0;font-size:13.5px;line-height:1.6;color:#c7cfc9}
  .vg-lightbox-close{
    position:absolute;top:14px;right:14px;background:rgba(255,255,255,.12);border:none;color:#fff;
    width:36px;height:36px;border-radius:50%;font-size:18px;cursor:pointer;line-height:1;z-index:2;
  }
  .vg-lightbox-close:hover{background:rgba(255,255,255,.22)}

  @media(max-width:560px){
    .vg-hero{padding:56px 18px 48px}
  }