/* --- V2.1: Refined Ed-Tech Graphic Novel (Fixed Image Gap) --- */
    :root {
        --v2-primary: #0f172a; 
        --v2-accent: #0ea5e9; 
        --v2-highlight: #facc15; 
        --v2-bg: #f8fafc;
    }

    /* Subtle Dot Grid Background */
    .hero-v2 {
        position: relative;
        padding: 160px 0 100px; 
        background-color: var(--v2-bg);
        background-image: radial-gradient(#cbd5e1 1.5px, transparent 1.5px);
        background-size: 28px 28px;
        font-family: 'Inter', sans-serif;
        overflow: hidden;
    }

    .hero-content {
        position: relative;
        z-index: 2;
    }

    /* The 'Comic' Tag */
    .hero-badge-v2 {
        display: inline-block;
        padding: 8px 24px;
        background-color: var(--v2-highlight);
        color: var(--v2-primary);
        font-family: 'Poppins', sans-serif;
        font-weight: 800;
        text-transform: uppercase;
        font-size: 0.9rem;
        letter-spacing: 1.5px;
        margin-bottom: 2rem;
        border: 2px solid var(--v2-primary);
        box-shadow: 4px 4px 0px var(--v2-primary);
        transform: rotate(-2deg);
        transition: transform 0.2s ease;
    }
    .hero-badge-v2:hover {
        transform: rotate(0deg) scale(1.02);
    }

    /* Fluid, Crisp Typography */
    .hero-title-v2 {
        font-family: 'Poppins', sans-serif;
        font-weight: 800;
        color: var(--v2-primary);
        line-height: 1.15;
        font-size: clamp(2.5rem, 5vw, 4rem); 
        margin-bottom: 1.25rem;
    }

    .text-pop {
        color: var(--v2-accent);
        position: relative;
        display: inline-block;
    }
    .text-pop::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 10px;
        background-color: var(--v2-highlight);
        bottom: 8px;
        left: 0;
        z-index: -1;
        opacity: 0.6;
        transform: skewX(-15deg);
    }

    .hero-subtitle-v2 {
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        color: #334155;
        font-size: clamp(1.25rem, 2.5vw, 1.75rem);
        margin-bottom: 1.5rem;
    }

    .hero-description-v2 {
        color: #475569;
        font-size: clamp(1rem, 1.5vw, 1.15rem);
        line-height: 1.8;
    }

    /* Geometric Button */
    .btn-hero-v2 {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        background-color: var(--v2-primary);
        color: #fff;
        padding: 16px 40px;
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        font-size: 1.1rem;
        text-decoration: none;
        border: 2px solid var(--v2-primary);
        box-shadow: 6px 6px 0px var(--v2-accent);
        transition: all 0.2s ease;
        margin-top: 2rem;
    }

    .btn-hero-v2:hover {
        transform: translate(2px, 2px);
        box-shadow: 4px 4px 0px var(--v2-accent);
        color: #fff;
    }

    /* Right-Side Graphic Panel Carousel */
    .panel-carousel-wrapper {
        position: relative;
        border: 4px solid var(--v2-primary);
        box-shadow: 14px 14px 0px var(--v2-accent);
        background: #fff;
        padding: 12px;
        border-radius: 6px;
        transition: transform 0.3s ease;
        width: 100%; 
    }

    .panel-carousel-wrapper:hover {
        transform: translateY(-5px);
    }

    /* --- THE FIX: Image & Box Height Matching --- */
    .panel-carousel-inner {
        border-radius: 4px;
        overflow: hidden;
        border: 2px solid #e2e8f0;
        aspect-ratio: 4/3; /* Enforces the box shape */
        background: #f8fafc; /* Prevents white flashes between slides */
    }

    .panel-carousel-inner .carousel-item {
        height: 100%; /* Forces the slide to completely fill the inner box */
    }

    .panel-carousel-inner img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Crops the image perfectly to fit the box without stretching */
        object-position: center top; /* Keeps the focus on the top/center of the covers */
        display: block; /* Removes the default HTML gap below images */
    }
    /* ------------------------------------------ */

    /* Custom Geometric Controls */
    .v2-control {
        width: 45px;
        height: 45px;
        background: var(--v2-primary);
        border: 2px solid #fff;
        border-radius: 0;
        top: 50%;
        transform: translateY(-50%);
        opacity: 0.9;
        transition: all 0.2s ease;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    .v2-control i {
        color: #fff;
        font-size: 1.4rem;
    }

    .v2-control:hover {
        background: var(--v2-accent);
        opacity: 1;
        transform: translateY(-50%) scale(1.05);
    }

    .carousel-control-prev.v2-control { left: -22px; }
    .carousel-control-next.v2-control { right: -22px; }

    /* Mobile Adjustments */
    @media (max-width: 991px) {
        .hero-v2 { text-align: center; padding: 120px 0 60px; }
        .hero-badge-v2 { transform: rotate(0); margin-bottom: 1.5rem; }
        .hero-description-v2 { margin: 0 auto; max-width: 90%; }
        .panel-carousel-wrapper { margin-top: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; }
        .carousel-control-prev.v2-control { left: -10px; }
        .carousel-control-next.v2-control { right: -10px; }
    }

    
    .featured-services {
        padding: 80px 0;
        background-color: #ffffff; /* Clean white contrast to separate from the hero */
        position: relative;
        z-index: 5;
    }

    /* Clean, Professional Card Style */
    .service-card-clean {
        background: #fff;
        border: 2px solid #e2e8f0; /* Soft slate border */
        border-radius: 12px;
        padding: 40px 25px;
        text-align: center;
        transition: all 0.3s ease;
        /* Very subtle, professional offset shadow */
        box-shadow: 6px 6px 0px #f8fafc; 
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .service-card-clean:hover {
        transform: translateY(-6px);
        border-color: var(--v2-accent); /* Shifts to professional science blue */
        box-shadow: 8px 8px 0px rgba(14, 165, 233, 0.1);
    }

    /* Icon Styling - No tight circles, let the image breathe */
    .service-icon-clean {
        margin-bottom: 20px;
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .service-icon-clean img {
        width: 155px; /* Much larger and clearly visible */
        height: auto;
        object-fit: contain;
    }

    .service-card-clean:hover .service-icon-clean {
        transform: scale(1.15); /* Nice subtle pop on hover */
    }

    /* Typography */
    .service-title-clean {
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        color: var(--v2-accent);
        font-size: 1.25rem;
        margin-bottom: 12px;
        transition: color 0.3s ease;
    }
    .service-title-clean a{
        color: var(--v2-accent);
    }

    .service-card-clean:hover .service-title-clean {
        color: var(--v2-accent);
    }

    .service-desc-clean {
        color: #475569;
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 0;
    }
     /* --- Refined About Us Section --- */
    .about-section {
        padding: 80px 0;
        background-color: var(--v2-bg); /* Very light, clean background */
        font-family: 'Inter', sans-serif;
    }

    /* Clean Section Header */
    .section-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 800;
        color: var(--v2-primary);
        font-size: 2.5rem;
        margin-bottom: 1.5rem;
        position: relative;
        display: inline-block;
    }
    
    /* Small geometric accent under the title */
    .section-title::after {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 4px;
        background-color: var(--v2-accent);
        border-radius: 2px;
    }

    .about-intro-text {
        color: #475569;
        font-size: 1.05rem;
        line-height: 1.8;
        max-width: 900px;
        margin: 0 auto 3rem auto;
    }

    /* Structured Image Wrapper */
    .about-img-wrapper {
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        padding: 10px;
        background: #fff;
        box-shadow: 12px 12px 0px #e2e8f0; /* Signature V2 clean offset shadow */
        transition: transform 0.3s ease;
    }
    
    .about-img-wrapper:hover {
        transform: translateY(-5px);
        box-shadow: 12px 12px 0px rgba(14, 165, 233, 0.15); /* Soft cyan shadow on hover */
        border-color: #cbd5e1;
    }

    .about-img-wrapper img {
        border-radius: 6px;
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    /* Quote Callout Box */
    .quote-box {
        background: #ffffff;
        border-left: 4px solid var(--v2-accent);
        padding: 20px 25px;
        border-radius: 0 8px 8px 0;
        box-shadow: 0 4px 15px rgba(0,0,0,0.03);
        margin-bottom: 2rem;
    }

    .quote-box h3 {
        font-family: 'Poppins', sans-serif;
        font-size: 1.15rem;
        color: var(--v2-primary);
        line-height: 1.6;
        margin: 0;
    }

    /* Premium Modern Tabs (Segmented Control Style) */
    .custom-nav-pills {
        background-color: #e2e8f0;
        padding: 6px;
        border-radius: 12px;
        display: inline-flex;
        gap: 5px;
    }

    .custom-nav-pills .nav-link {
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        color: #64748b;
        border-radius: 8px;
        padding: 10px 24px;
        transition: all 0.3s ease;
        border: none;
        background: transparent;
    }

    .custom-nav-pills .nav-link:hover {
        color: var(--v2-primary);
    }

    .custom-nav-pills .nav-link.active {
        background-color: #ffffff;
        color: var(--v2-accent);
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

    /* Tab Content Styling */
    .tab-content-wrapper {
        background: #fff;
        padding: 30px;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 10px 25px rgba(0,0,0,0.02);
    }

    .tab-intro {
        color: var(--v2-accent);
        font-weight: 500;
        margin-bottom: 1.5rem;
        font-size: 1.05rem;
    }

    .feature-item {
        margin-bottom: 1.5rem;
    }
    
    .feature-item:last-child {
        margin-bottom: 0;
    }

    .feature-header {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
    }

    .feature-header i {
        color: var(--v2-accent);
        font-size: 1.25rem;
        margin-right: 12px;
    }

    .feature-header h4 {
        font-family: 'Poppins', sans-serif;
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--v2-primary);
        margin: 0;
    }

    .feature-text {
        color: #475569;
        padding-left: 32px; /* Aligns with the text, skipping the icon */
        margin: 0;
        line-height: 1.6;
    }
 /* --- Refined CTA / Objectives Section --- */
    .cta-section {
        padding: 80px 0;
        background-color: var(--v2-primary); /* Deep Slate/Navy #0f172a */
        color: #ffffff;
        position: relative;
        overflow: hidden;
        z-index: 1;
    }

    /* Subtle glowing background orb to give the dark section depth */
    .cta-section::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -10%;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(14, 165, 233, 0.15) 0%, transparent 60%);
        border-radius: 50%;
        z-index: 0;
        pointer-events: none;
    }

    .cta-content {
        position: relative;
        z-index: 2;
    }

    .cta-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 800;
        font-size: clamp(2rem, 4vw, 2.75rem);
        line-height: 1.25;
        margin-bottom: 1.5rem;
        color: #ffffff;
    }

    /* Styling the <em> tag to pop without looking messy */
    .cta-title em {
        font-style: normal;
        color: var(--v2-highlight); /* Vibrant Yellow */
        position: relative;
        display: inline-block;
    }
    
    .cta-title em::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 8px;
        background-color: var(--v2-accent); /* Science Blue */
        bottom: 5px;
        left: 0;
        z-index: -1;
        opacity: 0.8;
    }

    .cta-text {
        font-family: 'Inter', sans-serif;
        font-size: 1.1rem;
        line-height: 1.8;
        color: #cbd5e1; /* Soft Slate 300 for readability */
        margin-bottom: 1.25rem;
        max-width: 95%;
    }

    /* Structured Image Wrapper */
    .cta-img-wrapper {
        position: relative;
        z-index: 2;
        border: 4px solid #ffffff; /* Clean white frame */
        border-radius: 8px;
        box-shadow: 12px 12px 0px var(--v2-accent); /* Signature offset shadow */
        background: #ffffff;
        padding: 6px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .cta-img-wrapper:hover {
        transform: translateY(-5px);
        box-shadow: 12px 12px 0px var(--v2-highlight); /* Shifts to yellow on hover */
    }

    .cta-img-wrapper img {
        width: 100%;
        height: auto;
        border-radius: 4px;
        display: block;
        object-fit: cover;
    }
    /* --- Refined On Focus (Video) Section --- */
    .video-showcase-section {
        padding: 80px 0;
        background-color: var(--v2-bg);
        font-family: 'Inter', sans-serif;
    }

    /* The main wrapper for each video/text pair */
    .video-panel-wrapper {
        background: #ffffff;
        border: 4px solid var(--v2-primary);
        border-radius: 12px;
        box-shadow: 14px 14px 0px #e2e8f0;
        margin-bottom: 4rem;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .video-panel-wrapper:hover {
        box-shadow: 14px 14px 0px var(--v2-accent);
        transform: translateY(-4px);
    }

    /* Video Side Styling */
    .video-side {
        position: relative;
        min-height: 350px;
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 4px solid var(--v2-primary);
    }

    /* Flips the border for the alternating layout */
    .video-side-alt {
        border-right: none;
        border-left: 4px solid var(--v2-primary);
    }

    /* Dark overlay to make the play button pop */
    .video-side::before {
        content: '';
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(15, 23, 42, 0.4);
        transition: background 0.3s ease;
    }

    .video-panel-wrapper:hover .video-side::before {
        background: rgba(15, 23, 42, 0.2);
    }

    /* Premium Play Button */
    .custom-play-btn {
        position: relative;
        z-index: 2;
        width: 80px;
        height: 80px;
        background: var(--v2-accent);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 2.5rem;
        padding-left: 5px; /* visually centers the play triangle */
        box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.7);
        animation: pulse-blue 2s infinite;
        transition: transform 0.2s ease;
        text-decoration: none;
    }

    .custom-play-btn:hover {
        transform: scale(1.1);
        color: #fff;
    }

    @keyframes pulse-blue {
        0% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.7); }
        70% { box-shadow: 0 0 0 20px rgba(14, 165, 233, 0); }
        100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); }
    }

    /* Content Side Styling */
    .video-content-side {
        padding: 50px 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .video-content-side h3 {
        font-family: 'Poppins', sans-serif;
        font-weight: 800;
        color: var(--v2-primary);
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .video-content-side p {
        color: #475569;
        font-size: 1.1rem;
        line-height: 1.7;
        margin-bottom: 0;
    }

    /* Mobile overrides to fix borders when stacked */
    @media (max-width: 991px) {
        .video-side {
            min-height: 250px;
            border-right: none;
            border-bottom: 4px solid var(--v2-primary);
        }
        .video-side-alt {
            border-left: none;
            /* When stacked, the image will be on top, so it needs a bottom border */
            border-bottom: 4px solid var(--v2-primary); 
        }
        .video-content-side {
            padding: 30px 20px;
        }
    }
    /* --- V2.2: Interactive Action Cards (Tabs) --- */
    .features-section {
        padding: 100px 0;
        background-color: #f1f5f9; /* Slightly darker background to make white cards pop */
        font-family: 'Inter', sans-serif;
    }

    /* The Grid Layout for the Tabs */
    .action-tabs-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-bottom: 2.5rem;
        border-bottom: none;
        padding: 0;
    }

    /* The Interactive Tab Card */
    .action-tab-btn {
        width: 100%;
        background: #ffffff;
        border: 2px solid #cbd5e1 !important;
        border-radius: 12px !important;
        padding: 25px 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 15px;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        text-decoration: none;
    }

    .action-tab-btn img {
        height: 65px;
        width: auto;
        object-fit: contain;
        transition: transform 0.3s ease;
    }

    .tab-label {
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 1.15rem;
        color: var(--v2-primary);
        margin: 0;
        transition: color 0.3s ease;
    }

    /* Hover State - Makes it obvious it's clickable */
    .action-tab-btn:hover {
        border-color: var(--v2-accent) !important;
        transform: translateY(-6px);
        box-shadow: 0 12px 25px -5px rgba(14, 165, 233, 0.15);
    }

    .action-tab-btn:hover img {
        transform: scale(1.1);
    }

    .action-tab-btn:hover .tab-label {
        color: var(--v2-accent);
    }

    /* Active State - Connects to the content below */
    .nav-tabs .nav-link.action-tab-btn.active {
        background: #ffffff !important;
        border-color: var(--v2-accent) !important;
        box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.15), 0 10px 20px -5px rgba(14, 165, 233, 0.2) !important;
        transform: translateY(-4px);
    }

    .nav-tabs .nav-link.action-tab-btn.active .tab-label {
        color: var(--v2-accent);
    }

    /* The tiny downward arrow that points to the content */
    .nav-tabs .nav-link.action-tab-btn.active::after {
        content: '';
        position: absolute;
        bottom: -12px;
        left: 50%;
        transform: translateX(-50%);
        border-width: 12px 12px 0;
        border-style: solid;
        border-color: var(--v2-accent) transparent transparent transparent;
        z-index: 10;
    }

    /* Main Content Display Box */
    .feature-content-wrapper {
        background: #ffffff;
        border: 2px solid #e2e8f0;
        border-radius: 16px;
        padding: 50px 50px;
        box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.05);
        position: relative;
    }

    /* Typography inside the box */
    .feature-pane-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 800;
        color: var(--v2-primary);
        font-size: 2.25rem;
        margin-bottom: 1.25rem;
    }

    .feature-pane-text {
        color: #475569;
        font-size: 1.1rem;
        line-height: 1.7;
        margin-bottom: 1.5rem;
    }

    .btn-feature-action {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background-color: var(--v2-accent);
        color: #ffffff;
        padding: 12px 30px;
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        font-size: 1.05rem;
        text-decoration: none;
        border-radius: 50px; /* Modern pill shape */
        transition: all 0.3s ease;
        box-shadow: 0 8px 15px -3px rgba(14, 165, 233, 0.3);
    }

    .btn-feature-action:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 20px -3px rgba(14, 165, 233, 0.4);
        color: #ffffff;
    }

    /* Framed Image on the right side */
    .feature-img-frame {
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 15px 30px -5px rgba(0,0,0,0.1);
        border: 4px solid #fff;
    }

    .feature-img-frame img {
        width: 100%;
        display: block;
    }

    /* Mobile Responsive Fixes */
    @media (max-width: 991px) {
        .action-tabs-grid {
            grid-template-columns: repeat(2, 1fr); /* 2x2 grid on tablets */
        }
        .feature-content-wrapper { padding: 40px 20px; }
    }

    @media (max-width: 576px) {
        .action-tabs-grid {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            padding-bottom: 15px;
            scroll-snap-type: x mandatory;
            -ms-overflow-style: none; /* Hide scrollbar */
            scrollbar-width: none;
        }
        .action-tabs-grid::-webkit-scrollbar { display: none; }
        
        .action-tabs-grid .nav-item {
            flex: 0 0 160px; /* Fixed width for swipeable cards on phones */
            scroll-snap-align: start;
        }
        
        /* Hide the arrow on mobile swipe view to prevent layout bugs */
        .nav-tabs .nav-link.action-tab-btn.active::after { display: none; }
    }
    /* --- Refined Comic Resources Section --- */
    .comic-resources-section {
        padding: 100px 0;
        background-color: #f8fafc; /* Light slate to contrast with previous sections */
        font-family: 'Inter', sans-serif;
    }

    .section-title-centered {
        font-family: 'Poppins', sans-serif;
        font-weight: 800;
        color: var(--v2-primary);
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }

    .section-subtitle-centered {
        color: #475569;
        font-size: 1.1rem;
        max-width: 700px;
        margin: 0 auto 3.5rem auto;
        line-height: 1.6;
    }

    /* The Comic Card */
    .resource-card {
        background: #ffffff;
        border: 2px solid #cbd5e1; /* Soft slate border */
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 4px 4px 0px transparent;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        height: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .resource-card:hover {
        transform: translateY(-6px);
        border-color: var(--v2-primary); /* Dark border on hover */
        box-shadow: 8px 8px 0px var(--v2-accent); /* Blue offset shadow */
    }

    /* Fixed Aspect Ratio Image Wrapper */
    .resource-img-wrapper {
        width: 100%;
        aspect-ratio: 4 / 3; /* Forces all thumbnails to be uniform */
        border-bottom: 2px solid #cbd5e1;
        overflow: hidden;
        background: #f1f5f9;
        transition: border-color 0.3s ease;
    }

    .resource-card:hover .resource-img-wrapper {
        border-color: var(--v2-primary);
    }

    .resource-img-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Crops cleanly without stretching */
        object-position: top center;
        transition: transform 0.5s ease;
    }

    .resource-card:hover .resource-img-wrapper img {
        transform: scale(1.05); /* Smooth zoom effect */
    }

    /* Content Area */
    .resource-details {
        padding: 20px 25px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .resource-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 1.1rem;
        color: var(--v2-primary);
        margin-bottom: 15px;
        line-height: 1.4;
        transition: color 0.3s ease;
    }

    .resource-card:hover .resource-title {
        color: var(--v2-accent);
    }

    .resource-action {
        font-family: 'Inter', sans-serif;
        font-weight: 700;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--v2-accent);
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .resource-action i {
        font-size: 1.1rem;
        transition: transform 0.3s ease;
    }

    .resource-card:hover .resource-action i {
        transform: translateX(4px); /* Arrow shoots right on hover */
    }
    /* --- Refined Genetiks Kit Section (16:9 Ticker) --- */
    .kit-section {
        padding: 100px 0;
        background-color: #ffffff;
        font-family: 'Inter', sans-serif;
        position: relative;
        overflow: hidden;
    }

    /* Product Spotlight Image */
    .kit-img-wrapper {
        border-radius: 12px;
        overflow: hidden;
        border: 2px solid #e2e8f0;
        box-shadow: 12px 12px 0px #f8fafc;
        transition: all 0.3s ease;
    }

    .kit-img-wrapper:hover {
        transform: translateY(-5px);
        box-shadow: 12px 12px 0px rgba(14, 165, 233, 0.1);
        border-color: var(--v2-accent);
    }

    .kit-img-wrapper img {
        width: 100%;
        display: block;
        object-fit: cover;
    }

    /* Typography */
    .kit-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 800;
        color: var(--v2-primary);
        font-size: 2.75rem;
        margin-bottom: 1rem;
    }

    .kit-greeting {
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        color: var(--v2-accent);
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .kit-description {
        color: #475569;
        font-size: 1.15rem;
        line-height: 1.8;
        margin-bottom: 2rem;
    }

    /* Action Area */
    .kit-action-area {
        background: #f8fafc;
        padding: 25px;
        border-radius: 12px;
        border-left: 4px solid var(--v2-primary);
    }

    .btn-kit {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background-color: var(--v2-primary);
        color: #ffffff;
        padding: 14px 35px;
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        font-size: 1.1rem;
        text-decoration: none;
        border-radius: 8px;
        border: 2px solid var(--v2-primary);
        box-shadow: 4px 4px 0px var(--v2-accent);
        transition: all 0.3s ease;
        margin-bottom: 15px;
        width: 100%;
        max-width: 300px;
    }

    .btn-kit:hover {
        transform: translate(2px, 2px);
        box-shadow: 2px 2px 0px var(--v2-accent);
        color: #ffffff;
    }

    /* --- Image Gallery Ticker Styling --- */
    .kit-gallery-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 800;
        color: var(--v2-primary);
        font-size: 2rem;
        margin: 5rem 0 2.5rem 0;
        text-align: center;
    }

    /* Hide the clunky arrows and dots globally for this specific carousel */
    #kit-ticker-carousel .owl-nav,
    #kit-ticker-carousel .owl-dots {
        display: none !important;
    }

    /* Clean Photo Frame effect for 16:9 images */
    .gallery-frame {
        background: #ffffff;
        border-radius: 12px;
        padding: 8px; /* Creates the white frame border */
        border: 1px solid #e2e8f0;
        box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.05);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        margin: 15px 5px; /* Gives room for the hover shadow to not get cut off */
    }

    .gallery-frame:hover {
        transform: scale(1.03);
        box-shadow: 0 15px 35px -5px rgba(14, 165, 233, 0.15);
        border-color: #cbd5e1;
    }

    .gallery-frame img {
        border-radius: 6px;
        width: 100%;
        aspect-ratio: 16 / 9 !important; /* Forces perfect 16:9 widescreen */
        object-fit: cover;
        display: block;
    }
    /* --- Refined Testimonials Section --- */
    .testimonials-section {
        padding: 100px 0;
        background-color: var(--v2-bg); /* Soft slate background */
        background-image: radial-gradient(#cbd5e1 1.5px, transparent 1.5px); /* Signature Dot Grid */
        background-size: 30px 30px;
        font-family: 'Inter', sans-serif;
        overflow: hidden;
    }

    .testimonials-header {
        text-align: center;
        margin-bottom: 3rem;
    }

    .testimonials-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 800;
        color: var(--v2-primary);
        font-size: 2.5rem;
    }

    /* Testimonial Card Styling */
    .testimonial-card-v2 {
        background: #ffffff;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        padding: 35px 30px;
        margin: 10px 10px 40px; /* Margin allows the shadow to display without cutting off */
        box-shadow: 8px 8px 0px #e2e8f0;
        transition: all 0.3s ease;
        height: 100%; /* Ensures all cards in the row are equal height */
        display: flex;
        flex-direction: column;
    }

    .testimonial-card-v2:hover {
        transform: translateY(-5px);
        border-color: var(--v2-primary);
        box-shadow: 10px 10px 0px var(--v2-accent);
    }

    /* Header of the Card (Avatar + Name) */
    .testimonial-user-info {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #f1f5f9;
    }

    .testimonial-avatar {
        width: 60px !important;
        height: 60px !important;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid var(--v2-accent);
        padding: 2px;
    }

    .testimonial-meta h3 {
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        color: var(--v2-primary);
        font-size: 1.15rem;
        margin: 0;
    }

    .testimonial-meta h4 {
        font-weight: 500;
        color: #64748b;
        font-size: 0.9rem;
        margin: 2px 0 5px 0;
    }

    .testimonial-stars {
        color: var(--v2-highlight); /* Comic Yellow */
        font-size: 0.9rem;
    }

    /* The Quote */
    .testimonial-quote-text {
        color: #475569;
        font-size: 1.05rem;
        line-height: 1.7;
        font-style: italic;
        flex-grow: 1; /* Pushes content down to keep cards equal height */
        position: relative;
        z-index: 1;
    }

    .quote-icon {
        color: rgba(14, 165, 233, 0.15); /* Faint accent color */
        font-size: 2.5rem;
        position: absolute;
        z-index: -1;
    }
    .quote-icon-left { top: -10px; left: -10px; }
    .quote-icon-right { bottom: -10px; right: -10px; display: inline-block; transform: translateY(10px); }

    /* Custom Swiper Pagination */
    .testimonials-section .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        background-color: #cbd5e1;
        opacity: 1;
        transition: all 0.3s ease;
    }

    .testimonials-section .swiper-pagination-bullet-active {
        background-color: var(--v2-accent);
        width: 24px;
        border-radius: 8px;
    }
    /* --- Refined Partners & Sponsors Section --- */
    .partners-section {
        padding: 80px 0;
        background-color: #ffffff;
        border-top: 1px solid #e2e8f0;
        font-family: 'Inter', sans-serif;
    }

    /* Main Funder Styling (BIG) */
    .funder-block {
        margin-bottom: 4rem;
    }

    .funder-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 800;
        font-size: clamp(1.75rem, 3vw, 2.25rem);
        color: var(--v2-primary);
        margin-bottom: 2rem;
    }

    .funder-logo {
        max-width: 250px; /* Big and prominent */
        height: auto;
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .funder-logo:hover {
        transform: scale(1.08);
    }

    /* Supporters Styling (SMALL) */
    .supporters-block {
        border-top: 2px dashed #f1f5f9; /* Subtle divider */
        padding-top: 3.5rem;
        max-width: 900px;
        margin: 0 auto;
    }

    .supporters-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 1.15rem;
        color: #94a3b8; /* Slate 400 - Muted so it doesn't fight the main funder */
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 2.5rem;
    }

    .supporter-logo-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 120px; /* Forces all logos to align perfectly on the same horizontal line */
    }

    .supporter-logo {
        max-width: 140px; /* Noticeably smaller than the main funder */
        max-height: 110px;
        width: auto;
        height: auto;
        object-fit: contain;
        transition: all 0.3s ease;
        opacity: 0.7; /* Gives a clean, uniform look */
        filter: grayscale(20%); /* Slightly desaturated */
    }

    .supporter-logo:hover {
        opacity: 1;
        filter: grayscale(0%); /* Bursts into full color */
        transform: translateY(-4px);
    }
    /* --- Equal Height Fix for Owl Carousel --- */
    #testimonials-carousel .owl-stage {
        display: flex;
        align-items: stretch;
    }
    
    #testimonials-carousel .owl-item {
        display: flex;
    }
    
    #testimonials-carousel .item {
        display: flex;
        width: 100%;
    }

    /* Testimonial Card Styling */
    .testimonial-card-v2 {
        background: #ffffff;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        padding: 35px 30px;
        margin: 10px 10px 40px; 
        box-shadow: 8px 8px 0px #e2e8f0;
        transition: all 0.3s ease;
        
        /* CRITICAL: Forces the card to stretch and fill the Owl wrapper */
        flex: 1; 
        display: flex;
        flex-direction: column;
    }

    .testimonial-card-v2:hover {
        transform: translateY(-5px);
        border-color: var(--v2-primary);
        box-shadow: 10px 10px 0px var(--v2-accent);
    }

    /* Header of the Card (Avatar + Name) */
    .testimonial-user-info {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #f1f5f9;
    }

    .testimonial-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid var(--v2-accent);
        padding: 2px;
    }

    .testimonial-meta h3 {
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        color: var(--v2-primary);
        font-size: 1.15rem;
        margin: 0;
    }

    .testimonial-meta h4 {
        font-weight: 500;
        color: #64748b;
        font-size: 0.9rem;
        margin: 2px 0 5px 0;
    }

    .testimonial-stars {
        color: var(--v2-highlight);
        font-size: 0.9rem;
    }

    /* The Quote */
    .testimonial-quote-text {
        color: #475569;
        font-size: 1.05rem;
        line-height: 1.7;
        font-style: italic;
        
        /* CRITICAL: Forces this text block to expand, keeping the layout perfectly aligned */
        flex-grow: 1; 
        
        position: relative;
        z-index: 1;
    }
    /* --- Refined FAQ Section --- */
    .faq-section {
        padding: 100px 0;
        background-color: #ffffff;
        font-family: 'Inter', sans-serif;
    }

    .faq-header-content {
        margin-bottom: 2rem;
    }

    .faq-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 800;
        color: var(--v2-primary);
        font-size: clamp(2rem, 4vw, 2.75rem);
        margin-bottom: 0.5rem;
    }

    .faq-subtitle {
        color: var(--v2-accent);
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        font-size: 1.1rem;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    /* Individual FAQ Cards */
    .faq-card {
        border: 2px solid #e2e8f0 !important;
        border-radius: 12px !important;
        margin-bottom: 16px;
        background: #fff;
        overflow: hidden;
        transition: all 0.3s ease;
        box-shadow: 4px 4px 0px transparent;
    }

    .faq-card:hover {
        border-color: #cbd5e1 !important;
    }

    /* Accordion Button (The Question) */
    .faq-card .accordion-button {
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        color: var(--v2-primary);
        font-size: 1.05rem;
        padding: 20px 25px;
        background: transparent;
        box-shadow: none;
        transition: all 0.3s ease;
    }

    .faq-card .accordion-button:not(.collapsed) {
        color: var(--v2-accent);
        background-color: #f8fafc;
        box-shadow: none;
    }

    /* Customizing the question icon */
    .question-icon {
        color: var(--v2-accent);
        font-size: 1.25rem;
        margin-right: 15px;
    }

    /* Accordion Body (The Answer) */
    .faq-card .accordion-body {
        padding: 0 25px 20px 25px;
        color: #475569;
        font-size: 1rem;
        line-height: 1.7;
        background-color: #f8fafc;
    }

    .faq-card .accordion-body a {
        color: var(--v2-primary);
        font-weight: 600;
        text-decoration: none;
        border-bottom: 2px solid rgba(37, 99, 235, 0.2);
        transition: all 0.3s ease;
    }

    .faq-card .accordion-body a:hover {
        border-bottom-color: var(--v2-primary);
    }

    /* Active State Shadow */
    .faq-card:has(.accordion-button:not(.collapsed)) {
        border-color: var(--v2-accent) !important;
        box-shadow: 6px 6px 0px rgba(14, 165, 233, 0.15);
        transform: translateX(4px); /* Slight shift to show it's active */
    }

    /* Framed Image on the right side */
    .faq-img-wrapper {
        position: relative;
        border: 4px solid #fff;
        border-radius: 16px;
        box-shadow: 12px 12px 0px #e2e8f0;
        background: #fff;
        transition: transform 0.3s ease;
        padding: 10px;
    }

    .faq-img-wrapper:hover {
        transform: translateY(-5px);
        box-shadow: 12px 12px 0px var(--v2-highlight); /* Yellow accent shadow */
    }

    .faq-img-wrapper img {
        width: 100%;
        border-radius: 8px;
        display: block;
    }
    /* --- Max-Image Gallery Linker Section --- */
    .gallery-max-section {
        padding: 80px 0;
        background-color: var(--v2-bg);
        font-family: 'Inter', sans-serif;
    }

    /* The Massive Clickable Banner */
    .gallery-max-banner {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 450px;
        border-radius: 16px;
        overflow: hidden;
        text-decoration: none;
        box-shadow: 14px 14px 0px #e2e8f0;
        border: 4px solid #ffffff;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        display: block; /* Ensures the whole block is a link */
    }

    .gallery-max-banner:hover {
        transform: translateY(-8px);
        box-shadow: 16px 16px 0px var(--v2-accent);
        border-color: var(--v2-accent);
    }

    /* The Image Background */
    .gallery-max-bg {
        position: absolute;
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%;
        background-size: cover;
        background-position: center;
        transition: transform 0.6s ease;
        z-index: 1;
    }

    /* Zooms the image smoothly on hover */
    .gallery-max-banner:hover .gallery-max-bg {
        transform: scale(1.08);
    }

    /* The Color Overlay (Ensures text is always readable) */
    .gallery-max-overlay {
        position: absolute;
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%;
        background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(14, 165, 233, 0.6) 100%);
        z-index: 2;
        transition: opacity 0.4s ease;
    }

    .gallery-max-banner:hover .gallery-max-overlay {
        opacity: 0.95;
    }

    /* The Text Content */
    .gallery-max-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 3;
        text-align: center;
        color: #ffffff;
        width: 100%;
        padding: 0 20px;
    }

    .gallery-max-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 800;
        font-size: clamp(2.2rem, 5vw, 4rem);
        margin-bottom: 15px;
        color: #ffffff;
        text-shadow: 0 4px 15px rgba(0,0,0,0.4);
    }

    .gallery-max-subtitle {
        font-size: clamp(1.1rem, 2vw, 1.3rem);
        font-weight: 500;
        color: #e2e8f0;
        margin-bottom: 30px;
    }

    /* The CTA Button inside the banner */
    .gallery-max-btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: #ffffff;
        color: var(--v2-primary);
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        padding: 14px 35px;
        border-radius: 50px;
        font-size: 1.1rem;
        transition: all 0.3s ease;
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }

    .gallery-max-banner:hover .gallery-max-btn {
        background: var(--v2-highlight); /* Shifts to comic yellow on hover */
        color: var(--v2-primary);
        transform: scale(1.05);
    }
    /* --- Refined Team Section --- */
    .team-section {
        padding: 100px 0;
        background-color: #ffffff; /* Clean white background */
        font-family: 'Inter', sans-serif;
    }

    .team-header-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 800;
        color: var(--v2-primary);
        font-size: 2.5rem;
        text-align: center;
        margin-bottom: 0.5rem;
    }

    .team-header-subtitle {
        color: var(--v2-accent);
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-align: center;
        margin-bottom: 4rem;
    }

    /* Team Card Styling */
    .team-card-v2 {
        background: #fff;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        padding: 40px 20px 30px;
        text-align: center;
        box-shadow: 8px 8px 0px #f1f5f9;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .team-card-v2:hover {
        transform: translateY(-8px);
        border-color: var(--v2-primary);
        /* A vibrant yellow shadow for the team cards to add some energy */
        box-shadow: 10px 10px 0px var(--v2-highlight); 
    }

    /* Circular Avatar Wrapper */
    .team-avatar-wrapper {
        width: 140px;
        height: 140px;
        border-radius: 50%;
        border: 3px solid #e2e8f0;
        padding: 5px; /* Creates a white ring inside the border */
        background: #fff;
        margin-bottom: 20px;
        transition: all 0.3s ease;
    }

    .team-card-v2:hover .team-avatar-wrapper {
        border-color: var(--v2-accent);
        transform: scale(1.05);
    }

    .team-avatar-wrapper img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
    }

    /* Typography inside the card */
    .team-name {
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        color: var(--v2-primary);
        font-size: 1.25rem;
        margin-bottom: 5px;
        transition: color 0.3s ease;
    }

    .team-card-v2:hover .team-name {
        color: var(--v2-accent);
    }

    .team-role {
        color: var(--v2-accent);
        font-weight: 600;
        font-size: 0.9rem;
        margin-bottom: 10px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .team-affiliation {
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.6;
        margin: 0;
        flex-grow: 1; /* Pushes bottom spacing evenly */
    }
    /* --- Refined IOG (Grants) Section --- */
    .iog-section {
        padding: 100px 0;
        background-color: #f8fafc; /* Soft slate to contrast with white sections */
        font-family: 'Inter', sans-serif;
    }

    /* Logo Wrapper */
    .iog-logo-wrapper {
        background: #ffffff;
        border: 2px solid #e2e8f0;
        border-radius: 16px;
        padding: 30px;
        box-shadow: 12px 12px 0px var(--v2-accent); /* Science blue shadow */
        transition: transform 0.3s ease;
        display: inline-block;
    }

    .iog-logo-wrapper:hover {
        transform: translateY(-5px);
        box-shadow: 12px 12px 0px var(--v2-primary);
    }

    .iog-logo-wrapper img {
        max-width: 100%;
        height: auto;
    }

    /* Typography */
    .iog-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 800;
        color: var(--v2-primary);
        font-size: clamp(2rem, 4vw, 2.75rem);
        margin-bottom: 1.5rem;
        line-height: 1.2;
    }

    .iog-text {
        color: #475569;
        font-size: 1.1rem;
        line-height: 1.8;
        margin-bottom: 1.5rem;
    }

    .iog-text a {
        color: var(--v2-accent);
        font-weight: 600;
        text-decoration: none;
        border-bottom: 2px solid rgba(14, 165, 233, 0.2);
        transition: all 0.3s ease;
    }

    .iog-text a:hover {
        border-bottom-color: var(--v2-accent);
        color: var(--v2-primary);
    }

    /* Mission Callout Box */
    .iog-mission-box {
        background-color: var(--v2-primary);
        border-radius: 16px;
        padding: 50px 40px;
        margin: 4rem 0;
        color: #ffffff;
        position: relative;
        box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.2);
        border-left: 8px solid var(--v2-highlight); /* Comic yellow accent */
    }

    .iog-mission-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 800;
        color: var(--v2-highlight);
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .iog-mission-text {
        color: #cbd5e1;
        font-size: 1.1rem;
        line-height: 1.8;
        margin: 0;
    }

    /* Grant Info Cards */
    .iog-grant-card {
        background: #ffffff;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        padding: 40px 30px;
        height: 100%;
        box-shadow: 8px 8px 0px #e2e8f0;
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
    }

    .iog-grant-card:hover {
        transform: translateY(-6px);
        border-color: var(--v2-accent);
        box-shadow: 10px 10px 0px rgba(14, 165, 233, 0.15);
    }

    .iog-grant-header {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 2px dashed #f1f5f9;
    }

    .iog-grant-icon {
        width: 50px;
        height: 50px;
        background: rgba(14, 165, 233, 0.1);
        color: var(--v2-accent);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
    }

    .iog-grant-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        color: var(--v2-primary);
        font-size: 1.35rem;
        margin: 0;
    }

    .iog-grant-text {
        color: #475569;
        font-size: 1rem;
        line-height: 1.7;
        margin: 0;
        flex-grow: 1;
    }

    /* Contact Footer inside section */
    .iog-contact {
        text-align: center;
        margin-top: 3rem;
        padding-top: 2rem;
        border-top: 1px solid #cbd5e1;
    }

    @media (max-width: 991px) {
        .iog-mission-box { padding: 40px 20px; margin: 3rem 0; }
        .iog-logo-wrapper { margin-bottom: 2rem; }
    }
    /* --- V2.1: Impact & Events Section --- */
    .impact-section {
        padding: 100px 0;
        background-color: var(--v2-bg);
        font-family: 'Inter', sans-serif;
    }

    .impact-header {
        text-align: center;
        margin-bottom: 4rem;
    }

    .impact-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 800;
        color: var(--v2-primary);
        font-size: clamp(2.5rem, 4vw, 3rem);
        margin-bottom: 1rem;
    }

    /* Stat Cards */
    .stat-card-v2 {
        background: #ffffff;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        padding: 35px 20px;
        text-align: center;
        box-shadow: 6px 6px 0px #cbd5e1;
        transition: all 0.3s ease;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .stat-card-v2:hover {
        transform: translateY(-6px);
        border-color: var(--v2-accent);
        box-shadow: 8px 8px 0px rgba(14, 165, 233, 0.2);
    }

    .stat-icon {
        width: 60px;
        height: 60px;
        background: rgba(14, 165, 233, 0.1);
        color: var(--v2-accent);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.75rem;
        margin-bottom: 15px;
    }

    .stat-number {
        font-family: 'Poppins', sans-serif;
        font-size: 2.75rem;
        font-weight: 800;
        color: var(--v2-primary);
        line-height: 1;
        margin-bottom: 8px;
    }

    .stat-label {
        color: #64748b;
        font-size: 0.95rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin: 0;
    }

    /* Chart Container */
    .chart-wrapper-v2 {
        background: #ffffff;
        border: 2px solid #e2e8f0;
        border-radius: 16px;
        padding: 40px;
        box-shadow: 14px 14px 0px #e2e8f0;
        margin-top: 2rem;
        transition: transform 0.3s ease;
    }

    .chart-wrapper-v2:hover {
        box-shadow: 14px 14px 0px rgba(14, 165, 233, 0.15);
        border-color: #cbd5e1;
    }

    .chart-container-inner {
        position: relative;
        height: 700px; /* Gives the 20 bars plenty of room to breathe */
        width: 100%;
    }

    .chart-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        color: var(--v2-primary);
        font-size: 1.5rem;
        margin-bottom: 5px;
    }

    .chart-subtitle {
        color: #64748b;
        font-size: 1rem;
        margin-bottom: 30px;
    }

    @media (max-width: 768px) {
        .chart-wrapper-v2 { padding: 20px; }
        .chart-container-inner { height: 600px; } /* Slightly shorter on mobile */
    }
    /* --- Refined Careers & Volunteering Section --- */
    .careers-section {
        padding: 100px 0;
        background-color: #ffffff; /* Clean white background */
        font-family: 'Inter', sans-serif;
    }

    .careers-header {
        max-width: 800px;
        margin: 0 auto 4rem auto;
    }

    .careers-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 800;
        color: var(--v2-primary);
        font-size: clamp(2rem, 4vw, 2.75rem);
        margin-bottom: 1rem;
    }

    .careers-subtitle {
        color: #475569;
        font-size: 1.1rem;
        line-height: 1.7;
        margin-bottom: 2rem;
    }

    /* Big Email CTA Button */
    .btn-career-email {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background-color: var(--v2-accent);
        color: #ffffff;
        padding: 15px 40px;
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        font-size: 1.15rem;
        border-radius: 50px;
        text-decoration: none;
        border: 2px solid var(--v2-accent);
        box-shadow: 0 10px 20px -5px rgba(14, 165, 233, 0.4);
        transition: all 0.3s ease;
    }

    .btn-career-email:hover {
        background-color: #ffffff;
        color: var(--v2-accent);
        transform: translateY(-3px);
        box-shadow: 0 15px 25px -5px rgba(14, 165, 233, 0.3);
    }

    /* Career/Volunteer Card */
    .career-card {
        background: #ffffff;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        height: 100%;
        box-shadow: 6px 6px 0px #f8fafc;
        transition: all 0.3s ease;
    }

    .career-card:hover {
        transform: translateY(-6px);
        border-color: var(--v2-primary);
        box-shadow: 10px 10px 0px rgba(14, 165, 233, 0.15); /* Soft blue shadow */
    }

    .career-img-wrapper {
        width: 100%;
        aspect-ratio: 16 / 9; /* Widescreen banner format */
        overflow: hidden;
        border-bottom: 1px solid #e2e8f0;
        background: #f1f5f9;
    }

    .career-img-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    .career-card:hover .career-img-wrapper img {
        transform: scale(1.05);
    }

    .career-content {
        padding: 25px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    /* Little Date Badge */
    .career-meta {
        margin-bottom: 15px;
    }

    .career-date-badge {
        display: inline-block;
        background: #f1f5f9;
        color: #64748b;
        font-size: 0.8rem;
        font-weight: 600;
        padding: 4px 12px;
        border-radius: 4px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .career-card-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 1.25rem;
        color: var(--v2-primary);
        margin-bottom: 10px;
        line-height: 1.4;
        transition: color 0.3s ease;
    }

    .career-card:hover .career-card-title {
        color: var(--v2-accent);
    }

    .career-desc {
        color: #475569;
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 20px;
        flex-grow: 1;
        
        /* Truncates text after 3 lines so cards stay the exact same height */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .career-read-more {
        font-family: 'Inter', sans-serif;
        font-weight: 700;
        font-size: 0.95rem;
        color: var(--v2-primary);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .career-read-more i {
        font-size: 1.2rem;
        color: var(--v2-accent);
        transition: transform 0.3s ease;
    }

    .career-card:hover .career-read-more i {
        transform: translateX(5px);
    }

    /* --- V2.1: Backing Our Mission (Grants) --- */
    .mission-section {
        padding: 100px 0;
        background-color: #ffffff;
        font-family: 'Inter', sans-serif;
    }

    .mission-header {
        margin-bottom: 5rem;
        text-align: center;
    }

    .mission-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 800;
        color: var(--v2-primary);
        font-size: clamp(2.5rem, 5vw, 3.5rem);
        margin-bottom: 1rem;
    }

    /* Grant Card Styling */
    .grant-row {
        margin-bottom: 4rem;
        align-items: center;
    }

    .grant-card-v2 {
        background: #fff;
        border: 2px solid #e2e8f0;
        border-radius: 16px;
        padding: 40px;
        box-shadow: 10px 10px 0px #f1f5f9;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        height: 100%;
    }

    .grant-card-v2:hover {
        transform: translateY(-5px);
        border-color: var(--v2-accent);
        box-shadow: 12px 12px 0px rgba(14, 165, 233, 0.1);
    }

    .grant-badge-img {
        /* max-width: 180px; */
        height: auto;
        width: 100%;
        margin-bottom: 20px;
        transition: transform 0.3s ease;
    }

    /* .grant-card-v2:hover .grant-badge-img {
        transform: scale(1.1) rotate(2deg);
    } */

    .grant-label {
        font-family: 'Poppins', sans-serif;
        font-weight: 800;
        color: var(--v2-primary);
        font-size: 1.5rem;
        margin-bottom: 15px;
        line-height: 1.3;
    }

    .grant-text {
        color: #475569;
        font-size: 1.05rem;
        line-height: 1.7;
        margin: 0;
    }

    /* Future Awards Grid */
    .future-awards-box {
        background-color: var(--v2-bg);
        border-radius: 20px;
        padding: 60px 40px;
        margin-top: 4rem;
        border: 2px dashed #cbd5e1;
    }

    .future-award-item {
        background: #fff;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        padding: 30px;
        text-align: center;
        transition: all 0.3s ease;
    }

    .future-award-item:hover {
        border-color: var(--v2-highlight);
        box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    }

    .future-award-logo {
        max-height: 100px;
        width: auto;
        margin-bottom: 15px;
        /* filter: grayscale(100%); */
        /* opacity: 0.7; */
        transition: all 0.3s ease;
    }

    .future-award-item:hover .future-award-logo {
        filter: grayscale(0%);
        opacity: 1;
    }
    /* --- V2.1: Media & Press Section --- */
    .media-page-section {
        padding: 80px 0;
        font-family: 'Inter', sans-serif;
    }

    /* Alternating backgrounds for sections */
    .bg-light-v2 { background-color: var(--v2-bg); }
    .bg-white-v2 { background-color: #ffffff; }

    .media-header-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 800;
        color: var(--v2-primary);
        font-size: 2.25rem;
        margin-bottom: 3rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        position: relative;
        display: inline-block;
    }

    .media-header-title::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 0;
        width: 60px;
        height: 5px;
        background-color: var(--v2-accent);
        border-radius: 2px;
    }

    /* Press Card Styling */
    .press-card-v2 {
        background: #fff;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        overflow: hidden;
        height: 100%;
        display: flex;
        flex-direction: column;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        box-shadow: 6px 6px 0px #f1f5f9;
    }

    .press-card-v2:hover {
        transform: translateY(-8px);
        border-color: var(--v2-primary);
        box-shadow: 10px 10px 0px var(--v2-highlight); /* Comic yellow shadow on hover */
    }

    .press-img-wrapper {
        width: 100%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        border-bottom: 2px solid #f1f5f9;
        background: #f8fafc;
    }

    .press-img-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    .press-card-v2:hover .press-img-wrapper img {
        transform: scale(1.05);
    }

    .press-content {
        padding: 25px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .press-source-badge {
        display: inline-block;
        background: rgba(14, 165, 233, 0.1);
        color: var(--v2-accent);
        font-size: 0.75rem;
        font-weight: 700;
        padding: 4px 12px;
        border-radius: 50px;
        text-transform: uppercase;
        margin-bottom: 15px;
    }

    .press-card-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 1.15rem;
        line-height: 1.4;
        color: var(--v2-primary);
        margin-bottom: 12px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .press-date {
        font-size: 0.85rem;
        color: #94a3b8;
        font-style: italic;
        margin-bottom: 20px;
    }

    .press-btn {
        margin-top: auto;
        font-weight: 700;
        color: var(--v2-accent);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: gap 0.3s ease;
    }

    .press-card-v2:hover .press-btn {
        gap: 12px;
        color: var(--v2-primary);
    }

    /* Video Frame */
    .video-card-v2 {
        border: 4px solid var(--v2-primary);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 12px 12px 0px var(--v2-accent);
        background: #000;
    }