:root {
    /* --- COLOR PALETTE (WCAG 2.1 AA Compliant) --- */
    --color-background-dark: #011224;
    --color-dark-cyber-bg: #0D111D;
    --color-background-light: #F8F8F8;

    /* Primary Brand Colors (Magenta Family) */
    --color-primary-brand: #b8158e;        /* Main magenta - 4.8:1 contrast on dark (WCAG AA) */
    --color-primary-brand-dark: #951176;   /* Original - graphics/logos only, not for text */
    --color-primary-brand-light: #d41ba6;  /* Light variant - 4.6:1 on white backgrounds */

    /* Call-to-Action Colors (Orange Family) */
    --color-accent-cta: #ee5500;           /* Primary CTA - 6.8:1 contrast (WCAG AA) */
    --color-accent-cta-hover: #ff6611;     /* Hover state - brighter */

    /* Secondary Accent (Blue Family) */
    --color-secondary-accent: #1070ad;     /* Main blue - already compliant */
    --color-secondary-accent-light: #2094de; /* Light variant for variety */

    /* Illinois Brand Expansion Colors (from 8-color logo palette) */
    --color-illinois-gold: #E5A823;        /* Gold - warmth, heritage - 6.2:1 contrast on dark */
    --color-illinois-cyan: #00A8B5;        /* Cyan - technology, freshness - 4.9:1 contrast on dark */
    --color-illinois-green: #6DB33F;       /* Green - growth, security - 5.1:1 contrast on dark */

    /* Text Colors (High Contrast) */
    --color-text-primary: #ffffff;         /* Body text on dark - 21:1 contrast */
    --color-text-secondary: #e0e0e0;       /* De-emphasized text - still 10:1 */
    --color-text-fade: #b0b0b0;            /* Subtle text - 7.2:1 contrast (WCAG AAA) */
    --color-text-dark: #1a1a1a;            /* Text on light backgrounds */
    --color-text-light: #ffffff;           /* Legacy alias for compatibility */

    /* Form State Colors */
    --color-success: #4caf50;              /* Success messages - 4.8:1 */
    --color-error: #f44336;                /* Error messages - 5.1:1 */
    --color-warning: #ff9800;              /* Warnings - 5.3:1 */

    /* UI Elements */
    --color-card-bg: rgba(255, 255, 255, 0.05);
    --color-border-subtle: rgba(255, 255, 255, 0.1);

    /* --- FONTS --- */
    --font-body: 'Inter', sans-serif;
    --font-head: 'Montserrat', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --font-tech: 'Rajdhani', sans-serif;

    /* --- DIMENSIONS & Z-INDEX --- */
    --max-width: 1200px;
    --nav-height: 70px;
    
    --z-back: -1;
    --z-normal: 1;
    --z-nav: 1000;
    --z-modal: 2000;
    --z-skip-link: 10000;
}

/* --- THEME OVERRIDES: GROUP 1818 --- */
body.group-1818-theme {
    /* Remap Colors for Dark Mode/Terminal Feel */
    --color-background-dark: #050b14;
    --color-dark-cyber-bg: #02060a;
    --color-primary-brand: #00f2ff; /* Neon Cyan */
    --color-secondary-accent: #00f2ff;
    --color-accent-cta: #ff9d00;    /* Amber Alert */
    
    --color-text-light: #ffffff;
    --color-text-fade: #a0aab5;
    
    /* 1818 Specific Status Colors */
    --sector-alert: #ff9d00; 
    --sector-success: #00ff41; 
    --sector-danger: #ff003c; 
    --sector-dim-blue: rgba(0, 242, 255, 0.08);
    
    /* Lab/White Section Overrides */
    --lab-bg: #F5F7FA;
    --lab-text: #0f172a;
    --lab-text-mute: #64748b;
    --lab-border: #cbd5e1;

    /* Remap Fonts */
    --font-head: var(--font-tech); 
}

/* --- RESET & BASE --- */
* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
}

body {
    margin: 0; padding: 0;
    font-family: var(--font-body);
    color: var(--color-text-light);
    background-color: var(--color-background-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

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

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    color: var(--color-text-light);
    line-height: 1.2;
    margin-top: 0; margin-bottom: 1rem;
}

h1 { font-size: 3rem; color: var(--color-accent-cta); text-shadow: 0 0 20px rgba(16, 112, 173, 0.4); }
p { margin-top: 0; margin-bottom: 1.5rem; }
li { margin-bottom: 0.5rem; }
a { color: var(--color-accent-cta); text-decoration: none; transition: color 0.3s ease; }
a:hover { color: var(--color-text-light); }

/* --- ACCESSIBILITY: SKIP TO MAIN CONTENT LINK (WCAG 2.4.1 Bypass Blocks - Level A) --- */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--color-accent-cta);
    color: white;
    padding: 12px 20px;
    z-index: var(--z-skip-link);
    font-weight: bold;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid white;
    outline-offset: -3px;
}

/* --- ACCESSIBILITY: IMPROVED FOCUS INDICATORS (WCAG 2.4.7 Focus Visible - Level AA) --- */
/* Global focus styles with 3:1 contrast ratio for all interactive elements */
*:focus {
    outline: 3px solid var(--color-accent-cta);
    outline-offset: 2px;
}

button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus,
.cta-button:focus,
.nav-links a:focus {
    outline: 3px solid var(--color-accent-cta);
    outline-offset: 2px;
}

/* Ensure focus is visible even on elements with background colors */
.modal-close:focus,
.cta-button:focus {
    outline: 3px solid white;
    outline-offset: 2px;
}

/* Remove focus outline from mailto links and specific interactive links */
a[href^="mailto:"]:focus,
.tier-link:focus,
.investigation-link:focus,
.lab-card a:focus,
a[href="contact.html"]:focus {
    outline: none !important;
}

/* --- UTILITIES --- */
.content-box { max-width: var(--max-width); margin: 0 auto; padding: 40px 20px; }
.content-box-darktext, .content-box-darktext * { color: var(--color-text-dark) !important; }

/* Privacy Policy Link Styling */
.privacy-content a {
    color: var(--color-primary-brand) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.3s ease;
}
.privacy-content a:hover {
    color: var(--color-accent-cta) !important;
    text-decoration: underline;
}
.privacy-content a:focus {
    outline: 2px solid var(--color-primary-brand);
    outline-offset: 2px;
}

.text-center { text-align: center !important; }
.text-center p { margin-left: auto; margin-right: auto; }

.section { padding: 80px 0; position: relative; }
.section-light { background-color: #fff; color: var(--color-text-dark); position: relative; z-index: 1; }
.section-light h2, .section-light h3, .section-light p, .section-light i { color: var(--color-text-dark); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

.section-title {
    font-size: 2.5rem; text-align: center; margin-bottom: 50px;
    color: var(--color-primary-brand); text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
}

/* Section title accent lines (page-specific colors) */
.section-title::before {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg,
        var(--color-primary-brand) 0%,
        var(--color-illinois-cyan) 50%,
        transparent 100%);
    margin: 0 auto 15px auto;
}

/* Page-specific gradients */
body.about-page .section-title::before {
    background: linear-gradient(90deg,
        var(--color-illinois-gold) 0%,
        var(--color-primary-brand) 100%);
}

body.events-page .section-title::before {
    background: linear-gradient(90deg,
        var(--color-accent-cta) 0%,
        var(--color-secondary-accent) 100%);
}

body.donate-page .section-title::before {
    background: linear-gradient(90deg,
        var(--color-illinois-green) 0%,
        var(--color-primary-brand) 100%);
}

body.careers-page .section-title::before {
    background: linear-gradient(90deg,
        var(--color-illinois-cyan) 0%,
        var(--color-secondary-accent) 100%);
}

body.contact-page .section-title::before {
    background: linear-gradient(90deg,
        var(--color-illinois-green) 0%,
        var(--color-secondary-accent) 100%);
}

.section-title-alt {
    font-size: 2rem; color: var(--color-secondary-accent); margin-bottom: 30px;
    text-shadow: 0 0 15px rgba(0, 191, 255, 0.3);
    text-align: center;
}

/* --- ANIMATIONS --- */
.appear, .fade-in-up {
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.appear.is-visible, .fade-in-up.is-visible { opacity: 1; transform: translateY(0); }

/* Enhanced fade-in-up with slide from left for timeline items */
.timeline-item.fade-in-up {
    opacity: 0;
    transform: translateY(30px) translateX(-20px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-item.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0) translateX(0);
}

/* Staggered delays for timeline reveal */
.delay-1 { transition-delay: 0.15s; }
.delay-2 { transition-delay: 0.3s; }
.delay-3 { transition-delay: 0.45s; }
.delay-4 { transition-delay: 0.6s; }
.delay-5 { transition-delay: 0.75s; }

@media (prefers-reduced-motion: reduce) {
    .appear, .fade-in-up { transition: none !important; opacity: 1 !important; transform: none !important; }
    .cta-button::before { display: none !important; }
    .cta-button:hover { transform: none !important; }
    .stat-box h4 { animation: none !important; }
    .cta-button:active { transform: none !important; }
    .cta-button .ripple { display: none !important; }
    .nav-links a::after { display: none !important; }
    .nav-links a { transition-delay: 0s !important; }
    .nav-cta.cta-button { animation: none !important; }
    .standard-contact-form input:focus,
    .standard-contact-form textarea:focus {
        transform: none !important;
    }
    .form-submit-btn.success,
    .form-submit-btn.error {
        animation: none !important;
    }
    .form-confirmation-card i {
        animation: none !important;
    }
    .form-confirmation-card {
        transform: none !important;
        opacity: 1 !important;
    }
    .tier-card:hover {
        transform: none !important;
    }
    .tier-card::before,
    .tier-card::after {
        display: none !important;
    }
    /* Donation celebration reduced motion */
    .confetti {
        display: none !important;
    }
    .celebration-content {
        transform: none !important;
    }
    .celebration-title,
    .celebration-message,
    .celebration-cta {
        animation: none !important;
    }
    .checkmark-circle-path,
    .checkmark-check {
        animation: none !important;
        stroke-dashoffset: 0 !important;
    }
    /* Tier card reduced motion */
    .tier-card:hover {
        transform: none !important;
    }
    .tier-card::after {
        display: none !important;
    }
    /* Featured event reduced motion */
    .calendar-row.featured-event::before {
        animation: none !important;
    }
    .calendar-row.featured-event:hover {
        transform: none !important;
    }
    .countdown-value {
        animation: none !important;
    }
    /* Calendar row reduced motion */
    .calendar-row:hover {
        transform: none !important;
    }
    .calendar-row::after {
        display: none !important;
    }
    .calendar-row:hover .cal-date {
        transform: none !important;
    }
    .calendar-row:hover .cal-action {
        transform: none !important;
    }
    /* Slack celebration reduced motion */
    .shield-path,
    .check-path {
        animation: none !important;
        stroke-dashoffset: 0 !important;
    }
    /* Gallery reduced motion */
    .gallery-item:hover {
        transform: none !important;
    }
    .gallery-item:hover img {
        transform: none !important;
    }
    .gallery-img-container::after {
        transition: none !important;
    }
    .gallery-caption {
        transition: none !important;
    }
    @media (min-width: 769px) {
        .gallery-caption {
            opacity: 1 !important;
            transform: none !important;
        }
    }
}

/* --- BUTTONS --- */
.cta-button {
    display: inline-block; background-color: var(--color-accent-cta); color: var(--color-text-light) !important;
    padding: 15px 30px; border-radius: 5px; font-weight: bold; text-transform: uppercase;
    margin-top: 15px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: none; cursor: pointer; text-align: center;
    position: relative; overflow: hidden;
}

/* Ripple effect on click */
.cta-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease-out, height 0.6s ease-out;
    pointer-events: none;
}

.cta-button:active::before {
    width: 300px;
    height: 300px;
}

.cta-button {
    position: relative;
    overflow: hidden;
}

.cta-button:hover {
    background-color: var(--color-primary-brand);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 7px 20px rgba(184, 21, 142, 0.4);
    animation: ctaBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ctaBounce {
    0% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-3px) scale(1.05);
    }
    100% {
        transform: translateY(-3px) scale(1.02);
    }
}

.cta-button:active {
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 3px 10px rgba(184, 21, 142, 0.3);
    transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ripple effect on click */
.cta-button .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: scale(0);
    animation: rippleEffect 0.6s ease-out;
    pointer-events: none;
}

@keyframes rippleEffect {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

.secondary-cta {
    display: inline-block; background-color: transparent;
    padding: 13px 28px; border-radius: 5px; font-weight: bold; text-transform: uppercase;
    border: 2px solid var(--color-accent-cta); color: var(--color-accent-cta) !important;
    transition: all 0.3s ease; cursor: pointer;
}
.secondary-cta:hover {
    background-color: var(--color-accent-cta); color: white !important;
    transform: translateY(-2px);
}

/* --- NAVIGATION --- */
.main-nav {
    position: fixed; top: 0; width: 100%;
    background-color: rgba(1, 18, 36, 0.95);
    z-index: var(--z-nav); backdrop-filter: blur(5px);
    border-bottom: 1px solid var(--color-border-subtle);
}
.nav-content { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; }
.logo-img {
    height: 45px;
    width: auto;
    display: block;
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 0 transparent);
}

.logo-img:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 6px rgba(0, 242, 255, 0.4));
}

.nav-links { list-style: none; display: flex; align-items: center; padding: 0; margin: 0; }
.nav-links li { margin-left: 30px; }
.nav-links a {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.95rem;
    color: #ffffff;
    text-decoration: none;
    letter-spacing: 0.5px;
    font-family: var(--font-tech);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* Staggered hover delays for each nav item */
.nav-links li:nth-child(1) a { transition-delay: 0s; }
.nav-links li:nth-child(2) a { transition-delay: 0.05s; }
.nav-links li:nth-child(3) a { transition-delay: 0.1s; }
.nav-links li:nth-child(4) a { transition-delay: 0.15s; }
.nav-links li:nth-child(5) a { transition-delay: 0.2s; }
.nav-links li:nth-child(6) a { transition-delay: 0.25s; }

/* Underline grow animation */
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--color-accent-cta);
    transform: translateX(-50%);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-links a:hover {
    color: var(--color-accent-cta);
    text-shadow: 0 0 8px var(--color-accent-cta);
}

.nav-links a:hover::after {
    width: 100%;
}

/* Special pulse effect for Donate button in nav */
.nav-cta.cta-button {
    animation: donateButtonPulse 3s ease-in-out infinite;
}

@keyframes donateButtonPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(238, 85, 0, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(238, 85, 0, 0);
    }
}

/* Group 1818 Special Link - Chromatic Aberration Glitch */
.nav-sector-link {
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 700 !important;
    font-size: 1.0rem;
    text-transform: uppercase;
    color: #00f2ff !important; /* Electric Blue Base */
    position: relative;
    letter-spacing: 2px;
    text-decoration: none;
    transition: color 0.2s;
}

/* The Glitch Effect Layers (Red/Blue Shadows) */
.nav-sector-link::before,
.nav-sector-link::after {
    content: attr(data-text); /* Duplicates the text */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

/* Red Layer */
.nav-sector-link::before {
    color: #ff003c;
    z-index: -1;
    animation: glitch-effect-1 2s infinite linear alternate-reverse;
}

/* Blue Layer */
.nav-sector-link::after {
    color: #00f2ff;
    z-index: -2;
    animation: glitch-effect-2 1.7s infinite linear alternate-reverse;
}

/* Hover: Stabilize the signal (turns white) */
.nav-sector-link:hover {
    color: #fff !important;
    text-shadow: 0 0 8px rgba(0, 242, 255, 0.8);
}
.nav-sector-link:hover::before,
.nav-sector-link:hover::after {
    display: none; /* Stops glitching on hover */
}

/* --- GLITCH KEYFRAMES (BALANCED INTENSITY) --- */
@keyframes glitch-effect-1 {
    0% { clip-path: inset(40% 0 20% 0); transform: translate(-3px, 2px); }
    10% { clip-path: inset(10% 0 70% 0); transform: translate(3px, -2px); }
    20% { clip-path: inset(80% 0 10% 0); transform: translate(-2px, 3px); }
    30% { clip-path: inset(30% 0 50% 0); transform: translate(3px, -3px); }
    40% { clip-path: inset(60% 0 5% 0); transform: translate(-3px, 2px); }
    50% { clip-path: inset(15% 0 65% 0); transform: translate(2px, -2px); }
    60% { clip-path: inset(70% 0 15% 0); transform: translate(-2px, 3px); }
    70% { clip-path: inset(25% 0 45% 0); transform: translate(3px, -2px); }
    80% { clip-path: inset(50% 0 30% 0); transform: translate(-3px, 2px); }
    90% { clip-path: inset(5% 0 75% 0); transform: translate(2px, -3px); }
    100% { clip-path: inset(35% 0 40% 0); transform: translate(-2px, 2px); }
}

@keyframes glitch-effect-2 {
    0% { clip-path: inset(25% 0 60% 0); transform: translate(3px, -2px); }
    10% { clip-path: inset(75% 0 10% 0); transform: translate(-3px, 3px); }
    20% { clip-path: inset(15% 0 70% 0); transform: translate(2px, 2px); }
    30% { clip-path: inset(55% 0 25% 0); transform: translate(-2px, -3px); }
    40% { clip-path: inset(10% 0 80% 0); transform: translate(3px, 2px); }
    50% { clip-path: inset(65% 0 20% 0); transform: translate(-3px, -2px); }
    60% { clip-path: inset(20% 0 50% 0); transform: translate(3px, 3px); }
    70% { clip-path: inset(80% 0 5% 0); transform: translate(-2px, -2px); }
    80% { clip-path: inset(40% 0 35% 0); transform: translate(2px, -3px); }
    90% { clip-path: inset(5% 0 85% 0); transform: translate(-3px, 2px); }
    100% { clip-path: inset(50% 0 30% 0); transform: translate(3px, -2px); }
}

/* Remove focus outline when clicking, keep for keyboard navigation */
.nav-links a:focus:not(:focus-visible) {
    outline: none;
}
.nav-cta {
    padding: 8px 15px;
    margin-top: 0;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* Mobile Nav Toggle */
.nav-toggle {
    display: none;
    background: none;
    border: 2px solid var(--color-text-fade);
    color: var(--color-text-fade);
    font-size: 1.5rem;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
}
.nav-toggle:hover {
    border-color: var(--color-accent-cta);
    color: var(--color-accent-cta);
}

main { padding-top: var(--nav-height); }

/* --- SCROLL PROGRESS BAR --- */
.scroll-progress-container {
    position: fixed;
    top: 70px; /* var(--nav-height) */
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    z-index: 1001; /* Above nav to ensure visibility */
    opacity: 0; /* Hidden by default, fades in on scroll */
    transition: opacity 0.3s ease;
    pointer-events: none; /* Don't block clicks */
}

.scroll-progress-container.visible {
    opacity: 1;
}

.scroll-progress-fill {
    height: 100%;
    width: 0%; /* Starts at 0, updated by JavaScript */
    background: var(--color-accent-cta);
    box-shadow: 0 0 10px rgba(238, 85, 0, 0.8);
    transition: width 0.1s ease-out;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .scroll-progress-container {
        top: 60px; /* Mobile nav height is shorter */
    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .scroll-progress-fill {
        transition: none;
    }
    .scroll-progress-container {
        transition: none;
    }
}

/* Page-specific progress bar colors */
.group-1818-theme .scroll-progress-fill {
    background: var(--color-illinois-cyan); /* Electric blue for Group 1818 */
    box-shadow: 0 0 10px rgba(0, 168, 181, 0.8);
}

/* --- HERO SECTIONS --- */
/* Video Hero (Home) */
.hero-section {
    position: relative; height: 100vh; display: flex; align-items: center; justify-content: center;
    text-align: center; overflow: hidden; background-color: #000a14;
}
header.hero-section + main { padding-top: 0; }

.video-background-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.header-video { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
.hero-section::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.65); z-index: 1; }

/* Hero Content Layout */
.hero-content {
    position: relative; z-index: 2; max-width: 900px; padding: 0 20px;
    text-align: center; margin: 0 auto;
}

/* Hero Title with Two-Line Structure */
#hero-headline {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 25px;
}

.hero-tagline {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-accent-cta);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: var(--font-tech);
}

.hero-subtitle-main {
    font-size: 4rem;
    font-weight: 900;
    color: var(--color-text-light);
    line-height: 1;
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.1),
                 0 2px 4px rgba(0, 0, 0, 0.5);
    font-family: var(--font-heading);
    letter-spacing: -1px;
    text-transform: uppercase;
}

/* Standard Grid Hero (Internal Pages) */
.research-hero-section, .events-hero-section, .mission-section {
    position: relative; padding: 150px 0 80px 0;
    background-color: var(--color-dark-cyber-bg);
    border-bottom: 5px solid var(--color-primary-brand); text-align: center; margin-top: -1px;
    background-image: linear-gradient(rgba(16, 112, 173, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 112, 173, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: 10;
}
.research-hero-section p, .events-hero-section p, .mission-section p { max-width: 900px; margin: 0 auto 30px auto; }
.research-hero-section .content-box, .events-hero-section .content-box, .mission-section .content-box {
    display: flex; flex-direction: column; align-items: center;
}

/* Mission Section Tighter Spacing */
.mission-section {
    padding: 100px 0 60px 0;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(184, 21, 142, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(16, 112, 173, 0.08) 0%, transparent 40%),
        linear-gradient(rgba(16, 112, 173, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 112, 173, 0.05) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 50px 50px, 50px 50px;
    position: relative;
    overflow: hidden;
}
.mission-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(184, 21, 142, 0.05) 0%, transparent 60%);
    animation: heroGlow 6s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes heroGlow {
    0% { opacity: 0.3; }
    100% { opacity: 0.7; }
}

.mission-section .section-title {
    margin-bottom: 35px;
    font-size: 2.8rem;
    text-shadow:
        0 0 20px rgba(184, 21, 142, 0.4),
        1px 1px 5px rgba(0, 0, 0, 0.6);
    position: relative;
    z-index: 2;
}
.mission-section .section-title::before {
    width: 100px;
    height: 4px;
    margin-bottom: 20px;
    box-shadow: 0 0 10px rgba(229, 168, 35, 0.5);
    animation: accentGrow 1s ease-out 0.3s both;
}

@keyframes accentGrow {
    from { width: 0; opacity: 0; }
    to { width: 100px; opacity: 1; }
}

.mission-text {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.7;
    position: relative;
    z-index: 2;
}
.mission-text p {
    margin: 0 auto 28px auto;
    font-size: 1.15rem;
    line-height: 1.75;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Vision Statement Emphasis */
.vision-statement {
    font-size: 1.3rem !important;
    font-weight: 600;
    padding: 25px 30px;
    padding-left: 35px;
    margin-top: 40px !important;
    background: linear-gradient(90deg,
        rgba(238, 85, 0, 0.08) 0%,
        rgba(184, 21, 142, 0.08) 100%);
    border-left: 4px solid;
    border-image: linear-gradient(180deg,
        var(--color-accent-cta) 0%,
        var(--color-primary-brand) 100%) 1;
    box-shadow: 0 4px 20px rgba(238, 85, 0, 0.15);
    position: relative;
}

.vision-statement::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    background: linear-gradient(180deg,
        var(--color-accent-cta) 0%,
        var(--color-primary-brand) 100%);
    filter: blur(4px);
}

/* --- ILLINOIS STATE BRANDING --- */
.hero-illinois-watermark {
    position: absolute;
    bottom: -50px;
    right: 5%;
    width: 280px;
    height: auto;
    opacity: 0.12;
    pointer-events: none;
    z-index: 5;
    transition: opacity 0.6s ease, transform 0.6s ease;
    animation: fadeInWatermark 1.2s ease-out 0.6s forwards;
}

/* Page-specific colors */
.hero-illinois-watermark.index-page {
    color: var(--color-illinois-cyan);
    opacity: 0.15;
}
.hero-illinois-watermark.about-page {
    color: var(--color-illinois-gold);
    opacity: 0.12;
}
.hero-illinois-watermark.events-page {
    color: var(--color-accent-cta);
    opacity: 0.10;
}
.hero-illinois-watermark.donate-page {
    color: var(--color-illinois-green);
    opacity: 0.15;
}
.hero-illinois-watermark.careers-page {
    color: var(--color-illinois-cyan);
    opacity: 0.12;
}
.hero-illinois-watermark.contact-page {
    color: var(--color-illinois-green);
    opacity: 0.10;
}

/* Fade-in animation */
@keyframes fadeInWatermark {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 0.12;
        transform: translateY(0) scale(1);
    }
}

/* Responsive sizing */
@media (max-width: 900px) {
    .hero-illinois-watermark {
        width: 200px;
        right: 2%;
    }
}

@media (max-width: 600px) {
    .hero-illinois-watermark {
        width: 150px;
        opacity: 0.08;
    }
}

/* Parallax effect for users who haven't requested reduced motion */
@media (prefers-reduced-motion: no-preference) {
    .hero-illinois-watermark {
        transform: translateY(calc(var(--scroll-y, 0) * -0.15px));
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hero-illinois-watermark {
        animation: none;
        opacity: 0.12;
    }
}

/* --- ABOUT PAGE FOOTER WATERMARK --- */
.about-footer-watermark-section {
    position: relative;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.about-footer-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: auto;
    color: var(--color-illinois-gold);
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
}

@media (max-width: 900px) {
    .about-footer-watermark {
        width: 140px;
    }
}

@media (max-width: 600px) {
    .about-footer-watermark-section {
        min-height: 150px;
    }

    .about-footer-watermark {
        width: 100px;
        opacity: 0.05;
    }
}

/* --- SECTIONS & LAYOUTS --- */
.secondary-section-dark, .leadership-section, .legal-section { 
    background: radial-gradient(circle at center, #0d253f 0%, #011224 85%); 
    border-top: 1px solid var(--color-border-subtle);
}
.secondary-section-dark .content-box, .leadership-section .content-box, .legal-section .content-box { 
    border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.2); box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}

.pillars-section { background-color: var(--color-background-light); }
.pillars-section p, .pillars-section h2, .pillars-section h3 { color: var(--color-text-dark) !important; }

/* Grid Systems */
.pillars-grid { display: flex; gap: 40px; }
.pillars-content { flex: 2; }
.pillars-content .cta-button { display: table; margin: 30px auto 0 auto; } 

.event-cards-grid, .focus-area-grid, .impact-grid, .cta-cards-grid, .gallery-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;
    align-items: stretch; /* Ensure all grid items in a row have equal height */
}

/* Strict 2-column Grid for Past Events */
.past-events-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;
}

/* Sidebar (Home) */
.donation-sidebar {
    flex: 1; background-color: var(--color-background-dark) !important; border-radius: 8px;
    padding: 30px;
}
/* Force white text on sidebar */
.donation-sidebar ul { padding-left: 20px; list-style: disc; margin-bottom: 20px; color: white; }
.donation-sidebar li, .donation-sidebar p, .donation-sidebar strong, .donation-sidebar h3 { color: #ffffff !important; }

.sidebar-title { color: var(--color-text-light); margin-bottom: 20px; border-bottom: 2px solid var(--color-accent-cta); padding-bottom: 10px; }
.donation-iframe-container { margin-top: 20px; }
.donation-widget-frame { border: 0; width: 100%; height: 700px; }

/* --- UNIFIED CARD SYSTEM --- */
.cta-card, .event-card, .focus-area-card, .impact-card, .pillar-card, .tier-card, .lab-card, .past-event-item, .sector-card {
    padding: 30px; border-radius: 8px; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,0.01) 5px, rgba(255,255,255,0.01) 7px);
    display: flex; flex-direction: column; height: 100%;
}

/* Hover State for all cards */
.cta-card:hover, .event-card:hover, .focus-area-card:hover, .impact-card:hover, .pillar-card:hover, .tier-card:hover, .lab-card:hover, .past-event-item:hover, .sector-card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); 
}

/* Specific Card Flavors */
.cta-card {
    background-color: var(--color-background-dark); border: 1px solid var(--color-border-subtle);
    border-bottom: 4px solid var(--color-primary-brand); align-items: center; text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(184, 21, 142, 0.1) 50%,
        transparent 100%);
    transition: left 0.6s ease;
}

.cta-card:hover::before {
    left: 100%;
}

.cta-card:hover .cta-icon {
    transform: scale(1.1) rotateY(180deg);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cta-icon { font-size: 4rem; color: var(--color-primary-brand); margin-bottom: 15px; }
.cta-card .cta-button { margin-top: auto; }

.event-card {
    background-color: var(--color-card-bg); border-top: 5px solid var(--color-primary-brand);
}

/* FIX: Strengthening the Heartland - Force Blue */
.focus-area-card {
    background-color: rgba(16, 112, 173, 0.25) !important; /* Explicit Blue Tint */
    background-image: none; /* REMOVED GRAY TEXTURE */
    border-top: 5px solid var(--color-secondary-accent);
    border-left: 1px solid rgba(16, 112, 173, 0.3);
    border-right: 1px solid rgba(16, 112, 173, 0.3);
}

.pillar-card {
    background: white;
    border: 2px solid rgba(149, 17, 118, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    /* Add subtle texture */
    background-image:
        linear-gradient(135deg, rgba(149, 17, 118, 0.02) 25%, transparent 25%),
        linear-gradient(225deg, rgba(149, 17, 118, 0.02) 25%, transparent 25%),
        linear-gradient(45deg, rgba(149, 17, 118, 0.02) 25%, transparent 25%),
        linear-gradient(315deg, rgba(149, 17, 118, 0.02) 25%, white 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
    background-repeat: repeat;
}

.pillar-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(149, 17, 118, 0.1) 50%,
        transparent 100%);
    transition: left 0.6s ease;
    z-index: 1;
}

.pillar-card:hover::before {
    left: 100%;
}

.pillar-card:hover {
    border-color: var(--color-primary-brand);
    box-shadow: 0 8px 24px rgba(149, 17, 118, 0.2),
                0 2px 8px rgba(149, 17, 118, 0.1);
    transform: translateY(-8px);
}

.pillar-card:hover .pillar-icon {
    filter: drop-shadow(0 4px 12px rgba(149, 17, 118, 0.4));
    color: #ee5500;
}

.pillar-icon {
    font-size: 2.5rem;
    color: var(--color-primary-brand);
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 2px 4px rgba(149, 17, 118, 0.15));
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-block;
}

.pillar-card h3,
.pillar-card p {
    position: relative;
    z-index: 2;
}

.past-event-item {
    background-color: var(--color-background-dark); 
    border-left: 5px solid var(--color-accent-cta);
    /* FIX: Outline visible now */
    border: 1px solid rgba(255, 255, 255, 0.3); 
}
.past-event-item h3 { color: var(--color-text-light); margin-bottom: 10px; font-size: 1.3rem; }
.past-event-item p { color: var(--color-text-fade); font-size: 0.95rem; }
.past-event-item strong { color: var(--color-accent-cta); }

.lab-card {
    background: #fff; border: 1px solid var(--lab-border); padding: 30px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); border-left: 4px solid var(--lab-text);
}
.lab-card:hover { border-left-color: var(--sector-danger); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.lab-card h3, .lab-card p { color: var(--lab-text); }
.lab-card a { color: var(--sector-alert); }  /* Yellow/orange for visibility on white background */
.lab-card a:hover { color: var(--sector-danger); }  /* Red on hover instead of white */

/* === DYNAMIC RESEARCH REPORTS SYSTEM === */

/* Reports grid container - FLEXBOX APPROACH - actually works */
.reports-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 40px;
}

.report-card {
    flex: 1 1 calc(33.333% - 20px);
    min-width: 300px;
    max-width: 100%;
}

/* Mobile: full width cards */
@media (max-width: 767px) {
    .report-card {
        flex: 1 1 100%;
        min-width: 100%;
    }
}

/* Tablet and up: enforce max 3 per row, stretch to fill */
@media (min-width: 768px) {
    .report-card {
        flex: 1 1 calc(33.333% - 20px);
        min-width: 300px;
    }
}

/* Individual report card */
.report-card {
    background: #fff;
    border: 1px solid var(--lab-border);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    border-left: 4px solid var(--lab-text);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-left-color 0.3s ease;
    display: flex;
    flex-direction: column;
}

.report-card:hover {
    transform: translateY(-5px);
    border-left-color: var(--sector-danger);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Report card header (category + date) */
.report-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.report-category {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--sector-alert);
    font-family: 'Rajdhani', sans-serif;
}

.report-date {
    font-size: 0.75rem;
    color: var(--color-text-fade);
    font-family: 'JetBrains Mono', monospace;
}

/* Report title */
.report-card h3 {
    color: var(--lab-text);
    font-size: 1.5rem;
    margin-bottom: 10px;
    line-height: 1.3;
}

/* Report subtitle */
.report-subtitle {
    color: var(--sector-danger);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 15px;
    font-family: 'Rajdhani', sans-serif;
}

/* Report excerpt */
.report-excerpt {
    color: var(--lab-text);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
}

/* Report card link styling - overrides global a:hover */
.report-card a {
    color: var(--sector-alert);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease, transform 0.2s ease;
}

.report-card a:hover {
    color: var(--sector-danger) !important; /* Override global white hover */
    transform: translateX(5px);
}

.report-card a i {
    transition: transform 0.2s ease;
}

.report-card a:hover i {
    transform: translateX(3px);
}

/* Featured report special styling */
.featured-report {
    flex: 1 1 100% !important; /* Force full width in flexbox */
    min-width: 100% !important;
    background: linear-gradient(135deg, #fff 0%, #fffbf5 100%);
    border: 2px solid var(--sector-danger);
    border-left: 6px solid var(--sector-danger);
    position: relative;
    padding: 40px;
}

.featured-report:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(238, 85, 0, 0.15);
}

.report-featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--sector-danger);
    color: #fff;
    padding: 8px 20px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-family: 'Rajdhani', sans-serif;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(238, 85, 0, 0.3);
}

.report-featured-badge i {
    font-size: 0.9rem;
}

.featured-report h3 {
    font-size: 2rem;
    color: var(--sector-danger);
}

.featured-report .report-subtitle {
    font-size: 1.2rem;
}

.featured-report .report-excerpt {
    font-size: 1rem;
    max-width: 900px;
}

/* No reports message */
.no-reports {
    text-align: center;
    color: var(--color-text-fade);
    font-size: 1.1rem;
    padding: 60px 20px;
    font-family: 'JetBrains Mono', monospace;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .reports-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .featured-report {
        padding: 25px;
    }

    .featured-report h3 {
        font-size: 1.6rem;
    }

    .featured-report .report-subtitle {
        font-size: 1.05rem;
    }

    .report-card-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

.sector-card {
    background: var(--color-dark-cyber-bg); border: 1px solid var(--color-border-subtle);
}
.sector-card:hover {
    border-color: var(--color-secondary-accent);
    box-shadow: 0 0 25px rgba(16, 112, 173, 0.3);
}
.sector-card .icon-box { font-size: 2rem; color: var(--color-primary-brand); margin-bottom: 20px; }
.sector-card h3 { margin-bottom: 15px; color: var(--color-text-light); }
.sector-card p { color: var(--color-text-fade); font-size: 0.9rem; }


/* --- ABOUT PAGE SPECIFICS --- */
.featured-leader {
    display: flex; gap: 40px; align-items: flex-start; background-color: var(--color-dark-cyber-bg);
    padding: 30px; margin: 40px 0; border-radius: 12px;
    border: 1px solid rgba(184, 21, 142, 0.5); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s;
}
.featured-leader:hover { transform: scale(1.01); }
.leader-profile-col { flex-shrink: 0; width: 300px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.leader-photo-container { width: 200px; height: 200px; overflow: hidden; border-radius: 50%; border: 5px solid var(--color-secondary-accent); margin-bottom: 15px; }
.leader-photo { width: 100%; height: 100%; object-fit: cover; }
.leader-bio { flex: 1; position: relative; z-index: 2; }

.advisors-section {
    background-color: var(--color-dark-cyber-bg); padding: 30px; margin-top: 40px;
    border-radius: 12px; border: 1px solid rgba(16, 112, 173, 0.3); text-align: left;
}
.advisors-section h4 { color: var(--color-secondary-accent); font-size: 1.5rem; margin-bottom: 20px; text-align: center; }

/* --- CONTACT & FORMS --- */
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px; align-items: start; }
.contact-info-block { background-color: var(--color-dark-cyber-bg); padding: 30px; border-radius: 8px; border-top: 5px solid var(--color-primary-brand); }
.contact-form-block { background-color: var(--color-background-dark); padding: 30px; border-radius: 8px; border-top: 5px solid var(--color-secondary-accent); }
.contact-details { margin-top: 30px; }
.detail-item { margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px dashed rgba(255, 255, 255, 0.1); }
.contact-icon { color: var(--color-primary-brand); font-size: 1.5rem; margin-right: 15px; float: left; line-height: 1.5; }

.standard-contact-form { width: 100%; max-width: 600px; margin: 0 auto; }
.form-row { display: flex; gap: 20px; }
.form-group { margin-bottom: 20px; width: 100%; }

.standard-contact-form input, .standard-contact-form textarea {
    width: 100%; padding: 12px; background: var(--color-dark-cyber-bg);
    border: 1px solid #30363d; border-radius: 4px;
    color: var(--color-text-primary); font-family: inherit;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Accessible placeholder styling - WCAG AA compliant */
.standard-contact-form input::placeholder,
.standard-contact-form textarea::placeholder {
    color: var(--color-text-secondary);  /* #e0e0e0 - 10:1 contrast ratio */
    opacity: 0.7;  /* Final contrast: ~7:1, exceeds WCAG AA requirement of 4.5:1 */
    transition: opacity 0.3s ease;
}

.standard-contact-form input:focus::placeholder,
.standard-contact-form textarea:focus::placeholder {
    opacity: 0.4;
}

.standard-contact-form input:focus, .standard-contact-form textarea:focus {
    border-color: var(--color-accent-cta);
    outline: none;
    box-shadow: 0 0 0 3px rgba(238, 85, 0, 0.1),
                0 0 20px rgba(238, 85, 0, 0.3);
    transform: scale(1.01);
}

/* Character counter for textarea */
.form-group {
    position: relative;
}

.char-counter {
    position: absolute;
    bottom: -20px;
    right: 0;
    font-size: 0.75rem;
    color: var(--color-text-fade);
    font-family: var(--font-mono);
}

.char-counter.warning {
    color: var(--color-warning);
}

.char-counter.limit {
    color: var(--color-error);
}

/* Form Button States */
.form-submit-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-submit-btn.loading {
    background: var(--color-secondary-accent);
    pointer-events: none;
    cursor: wait;
}

.form-submit-btn.success {
    background: var(--color-success);
    animation: successPulse 0.6s ease;
}

.form-submit-btn.error {
    background: var(--color-error);
    animation: shake 0.5s ease;
}

@keyframes successPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

/* Form Confirmation Card */
.form-confirmation-card {
    margin-top: 20px;
    padding: 25px;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(109, 179, 63, 0.1));
    border: 2px solid var(--color-success);
    border-radius: 8px;
    text-align: center;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.form-confirmation-card.visible {
    transform: translateY(0);
    opacity: 1;
}

.form-confirmation-card i {
    font-size: 2.5rem;
    color: var(--color-success);
    margin-bottom: 15px;
    animation: planeFloat 2s ease-in-out infinite;
}

@keyframes planeFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.form-confirmation-card h4 {
    margin: 0 0 10px 0;
    color: var(--color-success);
    font-size: 1.3rem;
}

.form-confirmation-card p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
}

/* --- DONATION SUCCESS CELEBRATION --- */
/* Confetti particles */
.confetti {
    position: fixed;
    width: 10px;
    height: 10px;
    top: -10px;
    z-index: 9999;
    animation: confettiFall linear forwards;
    border-radius: 2px;
}

@keyframes confettiFall {
    0% {
        transform: translateY(0) rotateZ(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotateZ(720deg);
        opacity: 0;
    }
}

/* Celebration Modal */
.celebration-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 10, 20, 0.95);
    backdrop-filter: blur(10px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.celebration-modal.active {
    opacity: 1;
}

.celebration-content {
    background: linear-gradient(145deg, #0d253f, #011224);
    border: 2px solid var(--color-illinois-green);
    border-radius: 16px;
    padding: 60px 40px;
    text-align: center;
    max-width: 500px;
    transform: scale(0.8) translateY(30px);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 20px 60px rgba(109, 179, 63, 0.3);
}

.celebration-modal.active .celebration-content {
    transform: scale(1) translateY(0);
}

/* Animated Checkmark SVG */
.checkmark-circle {
    width: 100px;
    height: 100px;
    margin: 0 auto 30px;
}

.checkmark {
    width: 100px;
    height: 100px;
    stroke-width: 3;
    stroke: #6DB33F;
    stroke-miterlimit: 10;
}

.checkmark-circle-path {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% { stroke-dashoffset: 0; }
}

.celebration-title {
    font-size: 2.2rem;
    color: var(--color-illinois-green);
    margin-bottom: 15px;
    font-weight: 900;
    animation: titleReveal 0.6s ease 0.4s both;
}

@keyframes titleReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.celebration-impact {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--color-illinois-green) 0%, var(--color-secondary-accent) 100%);
    color: #fff;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 20px 0;
    box-shadow: 0 4px 15px rgba(109, 179, 63, 0.4);
    animation: badgePulse 2s ease-in-out infinite;
}

.celebration-impact i {
    font-size: 1.3rem;
}

@keyframes badgePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(109, 179, 63, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(109, 179, 63, 0.6);
    }
}

.celebration-message {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
    color: var(--color-text-secondary);
    animation: titleReveal 0.6s ease 0.6s both;
}

.celebration-cta {
    margin-top: 20px;
    animation: titleReveal 0.6s ease 0.8s both;
}

/* --- SHAREABLE MOMENTS & SOCIAL PROOF STYLES --- */

/* Community Proof */
.community-proof {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    color: var(--color-text-fade);
    margin-top: 15px;
}

.community-proof strong {
    color: var(--color-secondary-accent);
    font-weight: 700;
}

/* Impact Story Card */
.impact-story {
    background: linear-gradient(145deg, rgba(109, 179, 63, 0.15) 0%, rgba(16, 112, 173, 0.1) 100%);
    border: 2px solid var(--color-illinois-green);
    border-radius: 12px;
    padding: 30px;
    margin: 40px 0;
    text-align: center;
    /* Add darker overlay for better contrast */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.impact-icon {
    font-size: 2.5rem;
    color: var(--color-illinois-green);
    margin-bottom: 15px;
    /* Add subtle shadow for depth */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.impact-story h4 {
    font-size: 1.5rem;
    color: #011224; /* Dark navy for readability on light background */
    font-weight: 700;
    margin-bottom: 10px;
}

.impact-story p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #0d253f; /* Darker text for better readability */
}

/* Transparency Note */
.transparency-note {
    background: rgba(109, 179, 63, 0.08);
    border-left: 4px solid var(--color-illinois-green);
    padding: 20px;
    margin: 30px 0;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.transparency-note i {
    font-size: 1.5rem;
    color: var(--color-illinois-green);
    margin-top: 3px;
}

.transparency-note p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Share Buttons */
.share-moment,
.badge-generator {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.badge-generator p {
    font-size: 0.9rem;
    color: var(--color-text-fade);
    margin-bottom: 10px;
}

.share-btn,
.share-event-btn,
.generate-badge-btn {
    background: linear-gradient(135deg, var(--color-secondary-accent) 0%, var(--color-primary-brand) 100%);
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.share-btn:hover,
.share-event-btn:hover,
.generate-badge-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 112, 173, 0.4);
}

.share-event-btn {
    font-size: 0.85rem;
    padding: 8px 16px;
    margin-top: 15px;
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .celebration-content {
        padding: 40px 20px;
        max-width: 90%;
    }

    .celebration-title {
        font-size: 1.8rem;
    }

    .celebration-message {
        font-size: 1rem;
    }
}

/* --- SLACK SUCCESS CELEBRATION --- */
.slack-celebration-content {
    background: linear-gradient(145deg, #1a1a2e, #0d0d1a);
    border: 2px solid var(--color-secondary-accent);
}

.access-granted-badge {
    width: 120px;
    height: 120px;
    margin: 0 auto 30px;
}

.shield-check {
    width: 120px;
    height: 120px;
}

.shield-path {
    stroke: var(--color-secondary-accent);
    stroke-width: 3;
    fill: rgba(16, 112, 173, 0.1);
    stroke-dasharray: 280;
    stroke-dashoffset: 280;
    animation: shieldDraw 0.8s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

@keyframes shieldDraw {
    to {
        stroke-dashoffset: 0;
    }
}

.check-path {
    stroke: var(--color-illinois-green);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: checkDraw 0.4s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes checkDraw {
    to {
        stroke-dashoffset: 0;
    }
}

.slack-celebration-title {
    color: var(--color-secondary-accent);
    font-family: var(--font-mono);
    letter-spacing: 0.2em;
    text-shadow: 0 0 20px rgba(16, 112, 173, 0.6);
}

/* Mobile adjustments for Slack celebration */
@media (max-width: 600px) {
    .access-granted-badge {
        width: 90px;
        height: 90px;
    }

    .shield-check {
        width: 90px;
        height: 90px;
    }

    .slack-celebration-title {
        font-size: 1.6rem;
        letter-spacing: 0.15em;
    }
}

/* --- SLACK PROMO BOX (Index/Contact) --- */
.slack-promo-box {
    background: linear-gradient(145deg, rgba(13, 37, 63, 0.9), rgba(0, 0, 0, 0.8));
    border: 1px solid rgba(77, 182, 255, 0.3); border-radius: 8px; padding: 30px;
    margin: 40px auto; max-width: 800px; text-align: center; display: flex; flex-direction: column;
    align-items: center; position: relative; overflow: hidden; box-shadow: 0 0 20px rgba(16, 112, 173, 0.15);
}
.slack-promo-box h3 { color: var(--color-secondary-accent); margin-bottom: 15px; }
.slack-promo-box ul { width: fit-content; padding: 0 0 0 20px; margin: 15px 0 25px 0; text-align: left; list-style: disc; }
.slack-promo-box li { color: var(--color-text-fade); margin-bottom: 8px; }

/* --- SOCIAL & LEGAL --- */
.social-connect { margin-top: 30px; text-align: center; }
.legal-section .social-connect { 
    border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; margin-top: 40px; 
}
.social-links-row { display: flex; gap: 15px; margin-top: 15px; justify-content: center; }
.social-icon-btn {
    width: 45px; height: 45px; border-radius: 50%; 
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.05); color: var(--color-text-fade); 
    border: 1px solid rgba(255, 255, 255, 0.1); font-size: 1.2rem; transition: all 0.3s ease;
}
.social-icon-btn:hover {
    background: var(--color-accent-cta); color: #fff; 
    transform: translateY(-3px); border-color: var(--color-accent-cta);
    box-shadow: 0 5px 15px rgba(238, 85, 0, 0.3);
}

/* --- MODALS --- */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 10, 20, 0.9); backdrop-filter: blur(5px);
    z-index: var(--z-modal); display: flex; align-items: flex-start; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
    overflow-y: auto; /* Allow scrolling when content exceeds viewport */
    padding: 20px 0; /* Add padding to prevent content from touching edges */
}
.modal-overlay.is-open { opacity: 1; pointer-events: auto; }

.modal-content {
    background: var(--color-background-dark); padding: 40px;
    border: 1px solid var(--color-secondary-accent);
    box-shadow: 0 0 30px rgba(16, 112, 173, 0.3); border-radius: 8px;
    max-width: 500px; width: 90%; text-align: center; position: relative;
    transform: translateY(20px); transition: transform 0.3s ease;
    margin: 10px auto; /* Vertical margin for spacing */
    max-height: none; /* Remove max-height constraint to allow full content display */
}
.modal-overlay.is-open .modal-content { transform: translateY(0); }

.modal-close {
    position: absolute; top: 10px; right: 15px; background: none; border: none; 
    color: var(--color-text-fade); font-size: 2rem; cursor: pointer;
}
.modal-close:hover { color: var(--color-accent-cta); }

/* --- FOOTER --- */
.site-footer {
    padding: 40px 0 20px 0;
    text-align: center;
    background-color: #000a14;
    font-size: 0.8rem;
    color: var(--color-text-fade);
    border-top: 1px solid rgba(77, 182, 255, 0.3);
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 30px 30px;
    position: relative;
}


.site-footer .content-box {
    position: relative;
    z-index: 1;
}

/* Remove focus outline on footer links when clicked (mouse users), keep for keyboard navigation */
.site-footer a:focus:not(:focus-visible) {
    outline: none;
}

/* --- PAGE SPECIFIC: GROUP 1818 (RESEARCH) --- */
/* Hero Animations & Backgrounds */
@keyframes grid-scroll { 0% { background-position: 0 0; } 100% { background-position: 40px 40px; } }
@keyframes scanline { 0% { top: -10%; opacity: 0; } 50% { opacity: 1; } 100% { top: 110%; opacity: 0; } }
@keyframes pulse-green { 0% { box-shadow: 0 0 0 0 rgba(0, 255, 65, 0.7); } 70% { box-shadow: 0 0 0 6px rgba(0, 255, 65, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 255, 65, 0); } }

.sector-hero {
    padding: 160px 0 100px 0; text-align: center; position: relative; overflow: hidden;
    background-color: var(--color-background-dark);
    background-image: linear-gradient(var(--sector-dim-blue) 1px, transparent 1px), linear-gradient(90deg, var(--sector-dim-blue) 1px, transparent 1px);
    background-size: 40px 40px; animation: grid-scroll 20s linear infinite; border-bottom: 1px solid var(--color-secondary-accent);
}

/* Constrain Scanline Width to match Title */
.sector-hero::after {
    content: ''; position: absolute; left: 50%; width: 100%; max-width: 800px; height: 5px;
    background: linear-gradient(90deg, transparent, var(--color-primary-brand), transparent); 
    opacity: 0.5; animation: scanline 6s linear infinite; z-index: 1;
    transform: translateX(-50%);
}

.decrypt-title {
    font-size: 5rem; color: var(--color-text-light);
    text-shadow: 0 0 25px var(--color-primary-brand);
    font-family: var(--font-tech); margin-bottom: 15px;
    position: relative; z-index: 2;
}

.logo-decrypt-canvas {
    max-width: 600px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 15px;
    position: relative;
    z-index: 2;
    image-rendering: crisp-edges;
}

@media (max-width: 900px) {
    .logo-decrypt-canvas { max-width: 450px; }
}

@media (max-width: 600px) {
    .logo-decrypt-canvas { max-width: 300px; }
}

.sector-badge {
    display: inline-block; border: 1px solid var(--color-primary-brand); color: var(--color-primary-brand);
    padding: 5px 15px; font-family: var(--font-mono); font-size: 0.9rem; margin-bottom: 20px;
    background: rgba(0, 242, 255, 0.15); letter-spacing: 2px; position: relative; z-index: 2;
}

/* Mission Alert Bar */
.mission-alert-bar {
    max-width: 800px; margin: 0 auto 30px auto;
    background: linear-gradient(90deg, rgba(255, 157, 0, 0.1) 0%, rgba(255, 157, 0, 0.2) 50%, rgba(255, 157, 0, 0.1) 100%);
    border: 1px solid var(--sector-alert); padding: 15px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 20px;
    position: relative; z-index: 2;
}
.mission-alert-bar p { margin: 0; color: var(--sector-alert); font-family: var(--font-mono); font-size: 0.9rem; text-transform: uppercase; }
.alert-btn { background: var(--sector-alert); color: #000; padding: 5px 15px; font-weight: bold; font-size: 0.8rem; text-transform: uppercase; border-radius: 2px; }
.alert-btn:hover { background: #fff; color: #000 !important; }

/* Hub Stats */
.hub-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    background: rgba(10, 20, 30, 0.85); border: 1px solid var(--color-secondary-accent);
    margin: -50px auto 40px auto; position: relative; z-index: 10; max-width: 1000px;
    backdrop-filter: blur(10px);
}
.stat-box { text-align: center; padding: 25px; border-right: 1px solid var(--color-secondary-accent); }
.stat-box h4 { font-size: 2.5rem; font-family: var(--font-tech); margin-bottom: 5px; text-shadow: 0 0 10px var(--color-primary-brand); }
.stat-box p { font-size: 0.75rem; color: var(--color-primary-brand); text-transform: uppercase; margin: 0; letter-spacing: 1px; font-family: var(--font-mono); }

/* Telemetry */
.sparkline-table { width: 100%; border-collapse: collapse; margin-top: 30px; font-family: var(--font-body); }
.sparkline-table th { 
    text-align: left; padding: 15px 20px; color: var(--color-text-fade); 
    text-transform: uppercase; border-bottom: 2px solid var(--color-secondary-accent); letter-spacing: 1px;
}
.sparkline-table td { padding: 20px; border-bottom: 1px solid var(--color-border-subtle); vertical-align: middle; color: var(--color-text-light); }
.legal-disclaimer { margin-top: 15px; font-size: 0.7rem; color: var(--color-text-fade); font-family: var(--font-mono); text-align: right; }
.live-indicator {
    display: inline-block; width: 10px; height: 10px; background-color: var(--sector-success);
    border-radius: 50%; margin-right: 15px; animation: pulse-green 2s infinite; 
    box-shadow: 0 0 10px var(--sector-success); vertical-align: middle; position: relative; top: -3px;
}
.offline-indicator { 
    display: inline-block; width: 10px; height: 10px; background-color: var(--sector-danger); 
    border-radius: 50%; margin-right: 15px; opacity: 0.8; vertical-align: middle; position: relative; top: -3px; 
}

/* FIX: Small Sparklines */
.sparkline-svg { width: 100%; max-width: 150px; height: 50px; overflow: visible; display: block; }

.spark-path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark-dot { r: 3; }
.path-crit { stroke: var(--sector-danger); filter: drop-shadow(0 0 4px var(--sector-danger)); }
.dot-crit { fill: var(--sector-danger); }
.path-high { stroke: var(--sector-alert); }
.dot-high { fill: var(--sector-alert); }
.path-elev { stroke: var(--color-primary-brand); }
.dot-elev { fill: var(--color-primary-brand); }
.path-norm { stroke: var(--sector-success); }
.dot-norm { fill: var(--sector-success); }
.trend-text { font-family: var(--font-mono); font-size: 0.9rem; }
.status-badge { padding: 4px 10px; border-radius: 4px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; display: inline-block; }
.badge-crit { background: rgba(255, 0, 60, 0.15); color: var(--sector-danger); border: 1px solid var(--sector-danger); }
.badge-high { background: rgba(255, 157, 0, 0.15); color: var(--sector-alert); border: 1px solid var(--sector-alert); }
.badge-elev { background: rgba(0, 242, 255, 0.15); color: var(--color-primary-brand); border: 1px solid var(--color-primary-brand); }
.badge-norm { background: rgba(0, 255, 65, 0.15); color: var(--sector-success); border: 1px solid var(--sector-success); }

/* Circular Threat Gauges */
.threat-gauge {
    width: 50px;
    height: 50px;
    display: block;
    margin: 0 auto;
    transform: rotate(-90deg);
    overflow: visible;  /* Allow glow effect to extend beyond SVG bounds */
}

/* Ensure table cells don't clip the glow effect */
.sparkline-table td {
    overflow: visible;
}

.gauge-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 6;
}

.gauge-fill {
    fill: none;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 125.6;
    stroke-dashoffset: 125.6;
    transition: stroke-dashoffset 2s cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 0.3s ease;
}

.gauge-crit {
    stroke: var(--sector-danger);
    filter: drop-shadow(0 0 6px var(--sector-danger));
}

.gauge-high {
    stroke: var(--sector-alert);
    filter: drop-shadow(0 0 6px var(--sector-alert));
}

.gauge-elev {
    stroke: var(--color-primary-brand);
    filter: drop-shadow(0 0 6px var(--color-primary-brand));
}

.gauge-norm {
    stroke: var(--sector-success);
    filter: drop-shadow(0 0 6px var(--sector-success));
}

.gauge-fill.animated {
    animation: gaugeGlow 2s ease-in-out infinite;
}

@keyframes gaugeGlow {
    0%, 100% {
        filter: drop-shadow(0 0 6px currentColor);
    }
    50% {
        filter: drop-shadow(0 0 12px currentColor);
    }
}

/* Active Operations (Strip) */
.active-projects-container { display: flex; flex-direction: column; gap: 20px; max-width: 1000px; margin: 0 auto; }
.project-strip {
    background: linear-gradient(90deg, rgba(0, 242, 255, 0.03) 0%, transparent 100%);
    border: 1px solid var(--color-border-subtle); border-left: 4px solid var(--color-primary-brand);
    padding: 25px; display: grid; grid-template-columns: 1fr auto; align-items: center; 
    transition: all 0.3s ease;
}
.project-strip:hover {
    border-color: var(--color-primary-brand); box-shadow: 0 0 20px rgba(0, 242, 255, 0.1); 
    transform: translateX(10px);
}
.project-main h4 { margin: 0 0 10px 0; font-size: 1.5rem; color: var(--color-text-light); font-family: var(--font-tech); }
.project-meta { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.last-update { font-size: 0.75rem; color: var(--color-primary-brand); background: var(--sector-dim-blue); padding: 4px 8px; font-family: var(--font-mono); }
.progress-wrapper { width: 220px; }
.progress-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--color-text-fade);
    display: block;
    margin-bottom: 5px;
    font-family: var(--font-mono);
}
.progress-bar-bg {
    background: rgba(255, 255, 255, 0.1);
    height: 8px;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.progress-fill {
    background: linear-gradient(90deg,
        var(--color-secondary-accent) 0%,
        var(--color-primary-brand) 50%,
        var(--color-accent-cta) 100%);
    height: 100%;
    box-shadow: 0 0 15px var(--color-primary-brand);
    width: 0;
    transition: width 2s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;  /* Prevent shimmer from extending beyond filled area */
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.6) 50%,
        transparent 100%);
    animation: progressShimmer 2s ease-in-out infinite;
}

@keyframes progressShimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}
.status-pill {
    font-family: var(--font-mono); font-size: 0.75rem; padding: 6px 16px; border-radius: 2px;
    text-transform: uppercase; font-weight: bold; letter-spacing: 1px; display: inline-flex; align-items: center; gap: 8px;
}
.status-pill.pill-blue { border: 1px solid var(--color-primary-brand); color: var(--color-primary-brand); background: rgba(0, 242, 255, 0.1); }
.status-pill.pill-orange { border: 1px solid var(--sector-alert); color: var(--sector-alert); background: rgba(255, 157, 0, 0.1); }
.status-pill.pill-green { border: 1px solid var(--sector-success); color: var(--sector-success); background: rgba(0, 255, 65, 0.1); }

/* Featured Project Card (SignalStrike) */
.featured-project {
    position: relative;
    background: linear-gradient(135deg, rgba(20, 30, 40, 0.9) 0%, rgba(10, 15, 25, 0.95) 100%);
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
}
.featured-project::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    padding: 2px;
    background: linear-gradient(135deg, var(--color-accent-cta), var(--color-primary-brand), var(--sector-success));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: borderGlow 3s ease-in-out infinite;
}
@keyframes borderGlow {
    0%, 100% { opacity: 0.7; filter: blur(0px); }
    50% { opacity: 1; filter: blur(1px); }
}
.featured-project-inner {
    padding: 30px;
    position: relative;
    z-index: 1;
}
.featured-badge {
    position: absolute;
    top: 20px;
    right: -35px;
    background: linear-gradient(90deg, var(--color-accent-cta), #ff6611);
    color: #000;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 8px 50px;
    transform: rotate(45deg);
    box-shadow: 0 2px 10px rgba(238, 85, 0, 0.4);
    z-index: 10;
}
.featured-project-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 40px;
    align-items: center;
}
.featured-image-container {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    background: linear-gradient(135deg, #0a0a0a, #1a1a2e);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 0 60px rgba(238, 85, 0, 0.05);
}
.featured-image-container::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(238, 85, 0, 0.3);
    border-radius: 6px;
    pointer-events: none;
}
.featured-image-container img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}
.featured-image-date {
    display: block;
    text-align: center;
    font-size: 0.75rem;
    color: var(--color-accent-cta);
    background: rgba(0, 0, 0, 0.7);
    padding: 8px;
    font-family: var(--font-mono);
    letter-spacing: 1px;
}
.featured-content-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.featured-content-header h4 {
    margin: 0;
    font-size: 1.8rem;
    color: var(--color-accent-cta);
    font-family: var(--font-tech);
}
.featured-content-header .status-pill {
    margin-left: auto;
}
.featured-description {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: 25px;
}
.feature-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 25px;
}
.feature-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(238, 85, 0, 0.1);
    border: 1px solid rgba(238, 85, 0, 0.3);
    color: var(--color-accent-cta);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    padding: 6px 12px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.feature-tag i {
    font-size: 0.85rem;
}
.featured-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.featured-actions .last-update {
    font-size: 0.75rem;
}
.featured-actions .cta-button {
    padding: 12px 28px;
    font-size: 0.9rem;
    background: var(--color-accent-cta);
    color: #000;
    border: none;
    font-weight: bold;
}
.featured-actions .cta-button:hover {
    background: var(--color-accent-cta-hover);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(238, 85, 0, 0.4);
}
.featured-actions .cta-secondary {
    background: transparent;
    border: 1px solid var(--color-text-fade);
    color: var(--color-text-fade);
}
.featured-actions .cta-secondary:hover {
    border-color: var(--color-primary-brand);
    color: var(--color-primary-brand);
    background: rgba(0, 242, 255, 0.05);
    box-shadow: none;
}

@media (max-width: 900px) {
    .featured-project-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    .featured-image-container {
        max-width: 300px;
        margin: 0 auto;
    }
    .featured-badge {
        top: 15px;
        right: -40px;
        font-size: 0.6rem;
        padding: 6px 45px;
    }
    .featured-content-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .featured-content-header .status-pill {
        margin-left: 0;
    }
}

/* Slack Secure Box (1818) */
.secure-drop-box {
    background: #000; border: 2px dashed var(--sector-alert); padding: 40px; text-align: center;
    margin: 60px auto 100px auto; max-width: 800px; position: relative; z-index: 10;
}

/* TLP White Section */
/* Added margin-top to prevent Slack Box overlap */
.sector-section-white {
    background-color: var(--lab-bg); padding: 100px 0; margin-top: 50px;
    background-image: linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
    background-size: 20px 20px; color: var(--lab-text);
    border-top: 10px solid var(--color-dark-cyber-bg);
    position: relative; z-index: 5;
}
.sector-section-white h2 { color: var(--lab-text) !important; text-shadow: none; }
.sector-section-white h3 { color: var(--lab-text); }
.sector-section-white p { color: var(--lab-text-mute) !important; }
.tlp-stamp {
    position: absolute; top: 30px; right: 30px;
    border: 3px solid #94a3b8; color: #64748b; padding: 8px 15px;
    font-family: var(--font-mono); font-weight: bold; text-transform: uppercase; font-size: 0.9rem;
    opacity: 0.8; transform: rotate(-5deg); background: rgba(0,0,0,0.02);
}
.tlp-stamp-bottom {
    position: absolute; bottom: 30px; left: 30px;
    border: 3px solid #94a3b8; color: #64748b; padding: 8px 15px;
    font-family: var(--font-mono); font-weight: bold; text-transform: uppercase; font-size: 0.9rem;
    opacity: 0.8; transform: rotate(2deg); background: rgba(0,0,0,0.02);
}

/* SOP Field Manual */
.sop-frame {
    max-width: 900px; margin: 40px auto;
    border: 2px solid var(--lab-text); background: #fff; box-shadow: 10px 10px 0px rgba(0,0,0,0.05);
}
.sop-header {
    background: #f1f5f9; border-bottom: 2px solid var(--lab-text); padding: 12px 20px;
    display: flex; justify-content: space-between; font-family: var(--font-mono);
    font-size: 0.8rem; color: #64748b; text-transform: uppercase;
}
.sop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Align tags to bottom using flex */
.sop-cell { 
    padding: 30px; border-right: 1px solid var(--lab-text); border-bottom: 1px solid var(--lab-text); 
    display: flex; flex-direction: column;
}
.sop-id { display: block; font-family: var(--font-mono); font-weight: 700; color: var(--lab-text); margin-bottom: 15px; }
.sop-icon { font-size: 2rem; color: var(--lab-text); opacity: 0.8; margin-bottom: 15px; }
.sop-status { 
    font-family: var(--font-mono); font-size: 0.75rem; color: var(--sector-alert); 
    display: block; margin-top: auto; letter-spacing: 1px; 
}

.secure-drop-white {
    background: #fff; border: 2px dashed #94a3b8; padding: 40px; text-align: center;
    margin: 60px auto; max-width: 800px; position: relative; border-radius: 4px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.secure-drop-white:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-color: var(--color-primary-brand); }
.secure-btn-white { 
    border: 2px solid var(--lab-text); color: var(--lab-text); padding: 10px 25px; 
    font-family: var(--font-mono); text-transform: uppercase; background: transparent; display: inline-block; font-weight: bold;
    transition: all 0.3s ease;
}
.secure-btn-white:hover { background: var(--lab-text); color: #fff; }

/* 1818 CTA Footer */
.sector-section-cta { padding: 100px 0; background: #000; border-top: 4px solid var(--color-primary-brand); text-align: center; position: relative; }
.sector-section-cta::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 242, 255, 0.05) 3px); pointer-events: none; }
.sector-btn { border: 1px solid var(--color-primary-brand); background: rgba(0, 242, 255, 0.05); color: var(--color-primary-brand) !important; font-family: var(--font-tech); letter-spacing: 2px; padding: 15px 40px; text-transform: uppercase; font-weight: 700; position: relative; z-index: 2; }
.sector-btn:hover { background: var(--color-primary-brand); color: #000 !important; box-shadow: 0 0 30px rgba(0, 242, 255, 0.5); }

/* --- PAGE SPECIFIC: DONATE (CONSORTIUM) --- */
#consortium {
    background-color: #02060b;
    background-image: 
        radial-gradient(circle at 50% 0%, rgba(16, 112, 173, 0.15) 0%, transparent 70%),
        linear-gradient(0deg, rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 100% 100%, 40px 40px, 40px 40px;
    border-top: 1px solid var(--color-secondary-accent);
}
#consortium-teaser {
    padding: 60px 0; border-top: 1px solid rgba(16, 112, 173, 0.3); border-bottom: 1px solid rgba(16, 112, 173, 0.3);
    background: radial-gradient(circle at center, #0d253f 0%, #011224 100%);
}

/* Consortium Tiers */
.tier-card {
    background: linear-gradient(145deg, #0d1520, #01060c);
    border: 1px solid var(--color-border-subtle);
    align-items: center; text-align: center;
    /* FIX: Button Alignment */
    display: flex; flex-direction: column;
    height: 100%; /* Fill the full height of grid cell */
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Gradient border glow effect */
.tier-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg,
        var(--color-secondary-accent) 0%,
        var(--color-primary-brand) 50%,
        var(--color-accent-cta) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: -1;
}

/* Subtle inner glow effect on hover */
.tier-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    background: radial-gradient(circle at top, rgba(184, 21, 142, 0.15) 0%, transparent 70%);
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.tier-card:hover::before {
    opacity: 1;
}

.tier-card:hover::after {
    opacity: 1;
}

.tier-card:hover {
    transform: translateY(-10px);
    border-color: transparent;
    box-shadow: 0 15px 40px rgba(184, 21, 142, 0.3),
                0 5px 15px rgba(16, 112, 173, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.tier-card .cta-button {
    margin-top: auto; /* Pushes button to bottom of flex container */
}

.tier-list {
    text-align: left;
    width: 100%;
    margin-bottom: 0;  /* Remove bottom margin - let flex handle spacing */
    padding-left: 0;
    list-style: none;
    flex-grow: 1;  /* Take up available space */
}
.tier-list li { margin-bottom: 10px; padding-left: 20px; position: relative; font-size: 0.9rem; color: var(--color-text-fade); }
.tier-list li::before { content: '►'; position: absolute; left: 0; font-size: 0.7rem; top: 4px; opacity: 0.7; }

/* Tier Colors & Hover Fixes */
.tier-founding { border-top: 5px solid #ffffff; }
.tier-founding h3, .tier-founding .pillar-icon { color: #ffffff; }
.tier-founding .cta-button { background: #ffffff; color: #000 !important; font-weight: 800; }
/* Tier-specific glow */
.tier-founding::after {
    background: radial-gradient(circle at top, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
}
.tier-founding:hover {
    box-shadow: 0 15px 40px rgba(255, 255, 255, 0.15);
}
/* FIX: Hover Priority - Enhanced for prominence */
.tier-founding .cta-button:hover {
    background-color: var(--color-primary-brand) !important;
    color: #ffffff !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
}

.tier-alliance { border-top: 5px solid #00f2ff; }
.tier-alliance h3, .tier-alliance .pillar-icon { color: #00f2ff; }
.tier-alliance .cta-button { background: #00f2ff; color: #000 !important; font-weight: 800; }
/* Tier-specific glow */
.tier-alliance::after {
    background: radial-gradient(circle at top, rgba(0, 242, 255, 0.08) 0%, transparent 70%);
}
.tier-alliance:hover {
    box-shadow: 0 15px 40px rgba(0, 242, 255, 0.15);
}
.tier-alliance .cta-button:hover {
    background-color: var(--color-primary-brand) !important;
    color: #ffffff !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 242, 255, 0.4);
}

.tier-workforce { border-top: 5px solid #ff9d00; }
.tier-workforce h3, .tier-workforce .pillar-icon { color: #ff9d00; }
.tier-workforce .cta-button { background: #ff9d00; color: #fff !important; font-weight: 800; }
/* Tier-specific glow */
.tier-workforce::after {
    background: radial-gradient(circle at top, rgba(255, 157, 0, 0.08) 0%, transparent 70%);
}
.tier-workforce:hover {
    box-shadow: 0 15px 40px rgba(255, 157, 0, 0.15);
}
.tier-workforce .cta-button:hover {
    background-color: var(--color-primary-brand) !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 157, 0, 0.4);
}

/* Donation Layout */
.donation-interface-grid {
    display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 50px; align-items: start;
}
.secure-terminal-box {
    background: #000a14; border: 1px solid var(--color-secondary-accent); border-radius: 6px;
    box-shadow: 0 0 30px rgba(16, 112, 173, 0.1); overflow: hidden;
}

/* FIX: Flatten Donation Background & Remove Seam */
.payment-form-wrapper { 
    background-color: #0b0f19 !important; /* Unified Hex */
    background-image: none !important;
    padding: 20px 0; 
    display: flex; justify-content: center; align-items: center;
    min-height: 900px;
    flex-direction: column; 
    border-bottom: 0; /* Remove seam */
}
/* Ensure iframe takes full width allowed */
.donation-widget-frame {
    border: 0; width: 100%; height: 700px; max-width: 425px;
}
.terminal-footer { 
    background-color: #0b0f19 !important; /* Unified Hex */
    padding: 10px; text-align: center; 
    border-top: 0; /* Remove top border to kill line */
    font-size: 0.8rem; color: var(--color-text-fade); 
}

.impact-row {
    display: flex; gap: 20px; background: rgba(255, 255, 255, 0.03); padding: 20px; border-radius: 8px;
    transition: transform 0.2s ease;
}
.impact-row:hover { transform: translateX(5px); background: rgba(255, 255, 255, 0.06); border-left: 3px solid var(--color-accent-cta); }
.impact-icon { font-size: 2rem; color: var(--color-primary-brand); min-width: 50px; text-align: center; }
.impact-content h3 { font-size: 1.1rem; margin-bottom: 5px; color: var(--color-text-light); }
.impact-content p { font-size: 0.9rem; margin: 0; color: var(--color-text-fade); }

.faq-box {
    margin-top: 40px; background: rgba(16, 112, 173, 0.1);
    border: 1px dashed var(--color-secondary-accent); padding: 20px; border-radius: 6px;
}
.faq-box h4 { margin-bottom: 10px; color: var(--color-secondary-accent); }

/* Logo Grid (Donate) */
.logo-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 50px; align-items: center; }
.logo-grid a {
    outline: none;
    text-decoration: none;
}
.logo-grid a:focus,
.logo-grid a:active {
    outline: none;
    box-shadow: none;
}
.uniform-logo-grid .sponsor-img {
    max-height: 60px;
    max-width: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0.6;
    margin: 15px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.uniform-logo-grid .sponsor-img:hover { opacity: 1; transform: scale(1.1); }

/* --- PAGE SPECIFIC: EVENTS --- */
/* FIX: Precise Positioning for Next Op Terminal */
.terminal-overlap {
    position: absolute;
    bottom: 0;
    left: 50%;
    /* Move down 50% of its own height to straddle the line */
    transform: translate(-50%, 50%);

    background: rgba(1, 18, 36, 0.95);
    border: 1px solid var(--color-secondary-accent);
    color: var(--color-text-fade);
    padding: 12px 25px;
    border-radius: 4px;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    box-shadow: 0 0 20px rgba(16, 112, 173, 0.3);
    z-index: 100;
    font-family: var(--font-mono);
    white-space: nowrap;
    width: max-content; /* Ensure centered alignment isn't thrown off by block width */
    margin: 0; /* Clear legacy margins */
}

.bsides-split-layout { display: flex; align-items: center; gap: 50px; }
.bsides-logo-col img { width: 100%; max-width: 350px; filter: drop-shadow(0 0 15px rgba(255,255,255,0.1)); }

/* White Background for Light Sections */
.event-card-compact { 
    display: flex; align-items: center; gap: 15px; background: rgba(255,255,255,0.05); 
    padding: 15px; border-radius: 6px; margin-bottom: 10px; border-left: 3px solid var(--color-primary-brand); 
    color: #fff; /* Default text white */
}
/* Override inside light sections */
.section-light .event-card-compact { 
    background: rgba(0,0,0,0.05); color: #000;
}

/* Event Submission CTA */
.event-submission-cta {
    max-width: 900px;
    margin: 40px auto 50px auto;
    background: linear-gradient(135deg, rgba(238, 85, 0, 0.08) 0%, rgba(184, 21, 142, 0.08) 100%);
    border: 1px solid rgba(238, 85, 0, 0.3);
    border-radius: 12px;
    padding: 35px 40px;
    position: relative;
    overflow: hidden;
}

.event-submission-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--color-accent-cta) 0%, var(--color-primary-brand) 100%);
}

.submission-cta-content {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 30px;
    align-items: center;
}

.submission-icon {
    font-size: 3rem;
    color: var(--color-accent-cta);
    display: flex;
    align-items: center;
    justify-content: center;
}

.submission-text h3 {
    font-size: 1.5rem;
    color: var(--color-accent-cta);
    margin: 0 0 10px 0;
    font-weight: 700;
}

.submission-text p {
    margin: 0 0 20px 0;
    color: var(--color-text-fade);
    font-size: 1rem;
}

.submission-rules {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rule-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.95rem;
}

.rule-item i {
    color: var(--color-accent-cta);
    margin-top: 3px;
    font-size: 1rem;
    flex-shrink: 0;
}

.rule-item strong {
    color: #fff;
}

.inline-link {
    color: var(--color-accent-cta);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.inline-link:hover {
    color: var(--color-primary-brand);
}

.submission-action {
    display: flex;
    align-items: center;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .event-submission-cta {
        padding: 25px 20px;
    }

    .submission-cta-content {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
    }

    .submission-icon {
        font-size: 2.5rem;
    }

    .submission-text h3 {
        font-size: 1.3rem;
    }

    .rule-item {
        text-align: left;
    }

    .submission-action {
        justify-content: center;
    }
}

/* Calendar Rows */
.calendar-wrapper { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 15px; }
.calendar-row {
    display: flex; align-items: center; background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border-subtle); border-radius: 8px; padding: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* Hover effect with slide-in and border accent */
.calendar-row:hover {
    transform: translateX(8px);
    border-left: 4px solid var(--color-accent-cta);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 20px rgba(238, 85, 0, 0.15);
}

/* Subtle glow on hover */
.calendar-row::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(238, 85, 0, 0.05) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.calendar-row:hover::after {
    opacity: 1;
}

/* Enhanced date box with hover scaling */
.cal-date {
    display: flex; flex-direction: column; align-items: center; background: rgba(0, 0, 0, 0.3);
    padding: 10px 15px; border-radius: 6px; margin-right: 25px; min-width: 80px;
    border: 1px solid var(--color-secondary-accent);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.calendar-row:hover .cal-date {
    transform: scale(1.05);
    border-color: var(--color-accent-cta);
    background: rgba(238, 85, 0, 0.1);
}

.cal-month {
    font-size: 0.8rem; font-weight: bold; color: var(--color-secondary-accent);
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.calendar-row:hover .cal-month {
    color: var(--color-accent-cta);
}

.cal-day {
    font-size: 1.8rem; font-weight: 900; line-height: 1; color: var(--color-text-light);
}

.cal-details {
    flex: 1;
    max-width: 450px;
    padding-right: 15px;
}

.cal-details h3 {
    margin: 0 0 18px 0;
    font-size: 1.2rem;
    color: var(--color-text-light);
    line-height: 1.3;
    transition: color 0.3s ease;
}

.calendar-row:hover .cal-details h3 {
    color: var(--color-accent-cta);
}

.cal-location {
    margin: 0; color: var(--color-text-fade); font-size: 0.9rem;
}

.cal-action {
    display: flex; gap: 10px; align-items: center;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.calendar-row:hover .cal-action {
    transform: translateX(-5px);
}

/* Small Button for Cal */
.cta-icon-btn {
    font-size: 0.8rem; border: 1px solid var(--color-border-subtle); padding: 8px 12px; border-radius: 4px; color: var(--color-text-fade);
    background: transparent;
    cursor: pointer;
}
/* Fix visibility in light sections */
.section-light .cta-icon-btn { border-color: rgba(0,0,0,0.2); color: #444; }

.cta-icon-btn:hover { border-color: var(--color-accent-cta); color: var(--color-accent-cta); }
.small-cta {
    display: inline-block; font-size: 0.8rem; background-color: var(--color-accent-cta);
    color: #ffffff !important; border: 1px solid var(--color-accent-cta); padding: 8px 18px;
    border-radius: 4px; text-transform: uppercase; font-weight: 800; transition: all 0.3s ease;
}
.small-cta:hover { background-color: var(--color-primary-brand); border-color: var(--color-primary-brand); transform: translateY(-2px); }

/* Featured Event Styling */
.calendar-row.featured-event {
    position: relative;
    background: linear-gradient(135deg, rgba(238, 85, 0, 0.08) 0%, rgba(184, 21, 142, 0.05) 100%);
    border: 2px solid var(--color-accent-cta);
    border-left: 6px solid var(--color-accent-cta);
    padding: 30px;
    overflow: visible;
    display: block;
}

/* Urgency pulse animation on border */
.calendar-row.featured-event::before {
    content: '';
    position: absolute;
    left: -6px;
    top: -2px;
    bottom: -2px;
    width: 6px;
    background: var(--color-accent-cta);
    animation: urgencyPulse 2s ease-in-out infinite;
}

@keyframes urgencyPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(238, 85, 0, 0.7);
    }
    50% {
        box-shadow: 0 0 0 15px rgba(238, 85, 0, 0);
    }
}

.calendar-row.featured-event:hover {
    transform: translateY(-5px) translateZ(0);
    box-shadow: 0 10px 40px rgba(238, 85, 0, 0.3);
    border-color: var(--color-accent-cta);
}

.featured-event-header {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-accent-cta);
    color: #ffffff;
    padding: 6px 16px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    box-shadow: 0 0 20px rgba(238, 85, 0, 0.4);
}

/* ILCF Organizer Badge - positioned in date box */
.ilcf-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    padding: 4px;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.ilcf-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ilcf-badge:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Larger badge for featured events to match larger date box */
.featured-cal-date .ilcf-badge {
    width: 40px;
    height: 40px;
    top: -12px;
    right: -12px;
    padding: 5px;
}

/* Make date box position relative for badge positioning */
.cal-date {
    position: relative;
}

.featured-cal-date {
    position: relative;
}

.featured-badge i {
    color: #FFD700;
}

.featured-event-content {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.featured-cal-date {
    background: rgba(238, 85, 0, 0.15);
    border: 2px solid var(--color-accent-cta);
    padding: 15px 20px;
    min-width: 100px;
}

.featured-cal-date .cal-month {
    color: var(--color-accent-cta);
    font-size: 0.9rem;
}

.featured-cal-date .cal-day {
    font-size: 2.5rem;
    color: var(--color-accent-cta);
}

.featured-cal-details {
    flex: 1;
    min-width: 250px;
    max-width: 585px;
    padding-right: 20px;
}

.featured-cal-details h3 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: var(--color-accent-cta);
    font-family: var(--font-tech);
    line-height: 1.3;
}

/* Event Countdown Timer */
.event-countdown {
    display: flex;
    gap: 25px;
    margin-top: 20px;
}

.countdown-segment {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    padding: 12px 18px;
    border-radius: 6px;
    border: 1px solid rgba(238, 85, 0, 0.3);
    min-width: 70px;
}

.countdown-value {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--color-accent-cta);
    font-family: var(--font-mono);
    line-height: 1;
    text-shadow: 0 0 10px rgba(238, 85, 0, 0.5);
}

.countdown-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--color-text-fade);
    letter-spacing: 0.1em;
    margin-top: 5px;
    font-family: var(--font-mono);
}

.featured-cal-action {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

.featured-cal-action .small-cta {
    min-width: 140px;
    text-align: center;
}

.featured-cal-action .cta-icon-btn {
    min-width: 140px;
    text-align: center;
}

/* Slack Strip */
.slack-strip-section { 
    width: 100%; background: linear-gradient(90deg, #0d253f 0%, #011224 100%); 
    border-top: 1px solid var(--color-secondary-accent); border-bottom: 1px solid var(--color-secondary-accent); 
    padding: 30px 0; display: flex; justify-content: center;
}
.slack-strip-content { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: var(--max-width); padding: 0 20px; }
.slack-btn { background-color: #4A154B; color: white !important; margin: 0; }
.slack-btn:hover { background-color: var(--color-accent-cta); }

/* Slack Section Button Styles - Inverse Color Scheme */
.slack-primary {
    background-color: var(--color-primary-brand) !important;
    color: white !important;
    border: none;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 600;
    padding: 14px 28px;
    font-size: 1rem;
}

.slack-primary:hover {
    background-color: var(--color-accent-cta) !important;
}

.slack-secondary {
    background-color: var(--color-accent-cta) !important;
    color: white !important;
    border: none;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 600;
    padding: 14px 28px;
    font-size: 1rem;
}

.slack-secondary:hover {
    background-color: var(--color-primary-brand) !important;
}

/* Events Gallery */
.gallery-item {
    background: #011224;
    border: 1px solid rgba(16, 112, 173, 0.4);
    border-top: 3px solid var(--color-secondary-accent);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(16, 112, 173, 0.3);
    border-top-color: var(--color-accent-cta);
}

.gallery-img-container {
    width: 100%; height: 250px; overflow: hidden;
    position: relative;
}

.gallery-img-container img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-item:hover img {
    transform: scale(1.08);
}

/* Hover overlay with gradient */
.gallery-img-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(1, 18, 36, 0.95) 0%,
        rgba(1, 18, 36, 0.7) 40%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.gallery-item:hover .gallery-img-container::after {
    opacity: 1;
}

/* Position caption absolutely over image on hover */
.gallery-caption {
    padding: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-item:hover .gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 25px;
    z-index: 2;
    transform: translateY(0);
}

/* Hide caption initially when not hovered */
@media (min-width: 769px) {
    .gallery-caption {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 25px;
        transform: translateY(100%);
        opacity: 0;
    }

    .gallery-item:hover .gallery-caption {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Keep captions visible on mobile/tablet */
@media (max-width: 768px) {
    .gallery-caption {
        position: static;
        transform: none;
        opacity: 1;
    }

    .gallery-img-container::after {
        display: none;
    }
}

.gallery-caption h4 {
    color: #ffffff;
    margin-bottom: 8px;
    font-size: 1.3rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.gallery-caption p {
    color: var(--color-text-light);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    line-height: 1.5;
}

/* --- VISUAL TIMELINE (About Page) --- */
.timeline-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-text-dark);
}

.timeline-container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 0;
}

.timeline-item {
    display: flex;
    gap: 30px;
    margin-bottom: 50px;
    position: relative;
}

/* Zigzag Timeline Layout - Alternate left/right */
.timeline-item:nth-child(odd) {
    flex-direction: row;
}

.timeline-item:nth-child(even) {
    flex-direction: row-reverse;
}

.timeline-item:nth-child(even) .timeline-content {
    text-align: right;
}

.timeline-item:nth-child(even) .timeline-marker {
    transform: scaleX(-1);
}

.timeline-item:nth-child(even) .timeline-icon {
    transform: scaleX(-1);
}

.timeline-marker {
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timeline-icon {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary-brand) 0%, var(--color-accent-cta) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    font-size: 1.4rem;
    box-shadow: 0 4px 20px rgba(184, 21, 142, 0.4);
    position: relative;
    z-index: 2;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-icon i {
    color: #fff !important;
}

/* Progressive icon growth by year (55px → 85px) */
.timeline-item[data-year="2020"] .timeline-icon {
    width: 58px;
    height: 58px;
}

.timeline-item[data-year="2022"] .timeline-icon {
    width: 65px;
    height: 65px;
    font-size: 1.5rem;
}

.timeline-item[data-year="2023"] .timeline-icon {
    width: 70px;
    height: 70px;
    font-size: 1.6rem;
}

.timeline-item[data-year="2024"] .timeline-icon {
    width: 78px;
    height: 78px;
    font-size: 1.75rem;
}

.timeline-item[data-year="2025"] .timeline-icon {
    width: 85px;
    height: 85px;
    font-size: 2rem;
}

/* Color evolution: Cyan → Purple → Orange */
/* 2019-2020: Foundation (Cyan) */
.timeline-item[data-year="2019"] .timeline-icon,
.timeline-item[data-year="2020"] .timeline-icon {
    background: linear-gradient(135deg, var(--color-secondary-accent) 0%, var(--color-primary-brand) 100%);
}

/* 2022-2023: Growth (Purple/Magenta) */
.timeline-item[data-year="2022"] .timeline-icon,
.timeline-item[data-year="2023"] .timeline-icon {
    background: linear-gradient(135deg, var(--color-primary-brand) 0%, var(--color-accent-cta) 50%, var(--color-primary-brand) 100%);
}

/* 2024-2025: Expansion (Orange/Magenta) */
.timeline-item[data-year="2024"] .timeline-icon,
.timeline-item[data-year="2025"] .timeline-icon {
    background: linear-gradient(135deg, var(--color-accent-cta) 0%, #ff6b35 100%);
    box-shadow: 0 6px 25px rgba(238, 85, 0, 0.6);
}

/* 2025 gets a pulsing glow to draw attention to "Future Forward" */
.timeline-item[data-year="2025"] .timeline-icon {
    animation: futurePulse 3s ease-in-out infinite;
}

@keyframes futurePulse {
    0%, 100% {
        box-shadow: 0 6px 25px rgba(238, 85, 0, 0.6);
    }
    50% {
        box-shadow: 0 8px 40px rgba(238, 85, 0, 0.9);
    }
}

/* Multi-step hover animation on timeline icon */
.timeline-item:hover .timeline-icon {
    transform: scale(1.2) rotate(5deg);
    box-shadow: 0 10px 40px rgba(16, 112, 173, 0.8);
    animation: iconPulse 0.6s ease-in-out;
}

@keyframes iconPulse {
    0%, 100% {
        transform: scale(1.2) rotate(5deg);
    }
    50% {
        transform: scale(1.25) rotate(5deg);
    }
}

/* Stat counter celebration pulse */
@keyframes statPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
        text-shadow: 0 0 25px rgba(238, 85, 0, 1);
    }
    100% {
        transform: scale(1);
    }
}

/* Blur-up image loading placeholders */
.blur-load {
    background-size: cover;
    background-position: center;
}

.blur-load.loading {
    filter: blur(10px);
    transform: scale(1.05);
}

.blur-load img {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.blur-load.loaded img {
    opacity: 1;
}

.blur-load.loaded {
    filter: blur(0);
    transform: scale(1);
    transition: filter 0.6s ease-in-out, transform 0.6s ease-in-out;
}

/* Custom Scrollbar - Brand Colors */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: linear-gradient(180deg, rgba(184, 21, 142, 0.1) 0%, rgba(1, 18, 36, 0.8) 100%);
    border-left: 1px solid rgba(184, 21, 142, 0.3);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--color-primary-brand) 0%, var(--color-accent-cta) 100%);
    border-radius: 6px;
    border: 2px solid rgba(1, 18, 36, 0.5);
    box-shadow: 0 0 10px rgba(238, 85, 0, 0.5);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--color-accent-cta) 0%, #ff6b35 100%);
    box-shadow: 0 0 15px rgba(238, 85, 0, 0.8);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent-cta) rgba(184, 21, 142, 0.1);
}

/* Easter Egg Modal */
.easter-egg-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 10, 20, 0.95);
    backdrop-filter: blur(10px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.easter-egg-modal.active {
    opacity: 1;
}

.easter-egg-content {
    background: linear-gradient(145deg, #0d253f, #011224);
    border: 2px solid var(--color-primary-brand);
    border-radius: 12px;
    padding: 40px;
    max-width: 600px;
    position: relative;
    box-shadow: 0 20px 60px rgba(184, 21, 142, 0.4);
    transform: scale(0.8) translateY(30px);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.easter-egg-modal.active .easter-egg-content {
    transform: scale(1) translateY(0);
}

.easter-egg-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: var(--color-text-fade);
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    padding: 5px 10px;
    transition: color 0.3s ease;
}

.easter-egg-close:hover {
    color: var(--color-accent-cta);
}

.easter-egg-header {
    text-align: center;
    margin-bottom: 30px;
}

.easter-egg-body {
    text-align: left;
}

.logo-img {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.logo-img:active {
    transform: scale(0.95);
}

.timeline-line {
    width: 3px;
    flex-grow: 1;
    background: linear-gradient(to bottom,
        var(--color-primary-brand) 0%,
        var(--color-secondary-accent) 100%);
    margin-top: 10px;
    position: relative;
    overflow: hidden;
}

/* Animated glow effect that "flows" down the timeline */
.timeline-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(16, 112, 173, 0.8) 20%,
        rgba(238, 85, 0, 0.6) 50%,
        transparent 100%);
    animation: flowTimeline 4s ease-in-out infinite;
}

@keyframes flowTimeline {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

.timeline-line-last {
    background: linear-gradient(to bottom,
        var(--color-secondary-accent) 0%,
        transparent 100%);
}

.timeline-content {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(16, 112, 173, 0.3);
    border-left: 4px solid var(--color-secondary-accent);
    border-radius: 8px;
    padding: 25px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-item:hover .timeline-content {
    transform: translateX(12px);
    border-left-color: var(--color-accent-cta);
    box-shadow: 0 12px 35px rgba(238, 85, 0, 0.3);
    background: rgba(255, 255, 255, 0.12);
}

/* Year badge float effect on hover */
.timeline-item:hover .timeline-year {
    transform: translateY(-3px);
    background: var(--color-accent-cta);
    box-shadow: 0 4px 15px rgba(238, 85, 0, 0.5);
}

/* Trail effect: Draw a glow line from previous milestone to current */
.timeline-item:hover .timeline-line {
    background: linear-gradient(to bottom,
        var(--color-accent-cta) 0%,
        var(--color-secondary-accent) 100%);
    box-shadow: 0 0 15px rgba(238, 85, 0, 0.6);
}

/* Cascading effect: When hovering, create subtle glow on previous milestone */
.timeline-item:hover + .timeline-item .timeline-icon {
    box-shadow: 0 6px 20px rgba(16, 112, 173, 0.3);
}

/* Phase Background Colors (Foundation/Growth/Expansion) */
/* Phase 1: Foundation (2019-2020) - Blue tint */
.timeline-item[data-year="2019"] .timeline-content,
.timeline-item[data-year="2020"] .timeline-content {
    background: linear-gradient(145deg, rgba(16, 112, 173, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    border-left-color: var(--color-secondary-accent);
}

/* Phase 2: Growth (2022-2023) - Purple tint */
.timeline-item[data-year="2022"] .timeline-content,
.timeline-item[data-year="2023"] .timeline-content {
    background: linear-gradient(145deg, rgba(184, 21, 142, 0.08) 0%, rgba(16, 112, 173, 0.05) 100%);
    border-left-color: var(--color-primary-brand);
}

/* Phase 3: Expansion (2024-2025) - Orange tint */
.timeline-item[data-year="2024"] .timeline-content,
.timeline-item[data-year="2025"] .timeline-content {
    background: linear-gradient(145deg, rgba(238, 85, 0, 0.08) 0%, rgba(184, 21, 142, 0.05) 100%);
    border-left-color: var(--color-accent-cta);
}

.timeline-year {
    display: inline-block;
    background: var(--color-secondary-accent);
    color: #fff !important;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: var(--font-mono);
    margin-bottom: 12px;
    letter-spacing: 0.05em;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Achievement badges */
.achievement-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--color-illinois-green) 0%, var(--color-secondary-accent) 100%);
    color: #fff !important;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 12px;
    box-shadow: 0 3px 10px rgba(109, 179, 63, 0.4);
}

.achievement-badge i {
    font-size: 1rem;
    color: #fff !important;
}

.achievement-badge span {
    color: #fff !important;
}

/* Stat callouts */
.stat-callout {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: rgba(238, 85, 0, 0.15);
    border: 2px solid var(--color-accent-cta);
    border-radius: 8px;
    padding: 6px 8px;
    margin-bottom: 8px;
    text-align: center;
    width: 110px;
    min-width: 110px;
}

/* Position stat-callout BOX on opposite side from timeline line */
.timeline-item:nth-child(odd) .stat-callout {
    float: right;
    margin-left: 12px;
}

.timeline-item:nth-child(even) .stat-callout {
    float: left;
    margin-right: 12px;
}

.stat-callout i {
    font-size: 1.2rem;
    color: var(--color-accent-cta);
    margin-bottom: 4px;
}

.stat-number {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--color-accent-cta);
    font-family: var(--font-mono);
    line-height: 1;
}

.stat-label {
    font-size: 0.55rem;
    text-transform: uppercase;
    color: var(--color-text-dark);
    letter-spacing: 0.05em;
    margin-top: 3px;
}

.timeline-content h3 {
    color: var(--color-text-dark);
    font-size: 1.6rem;
    margin-bottom: 12px;
    font-weight: 700;
}

.timeline-content p {
    color: var(--color-text-dark);
    line-height: 1.7;
    margin: 0;
}

/* Mobile timeline adjustments */
@media (max-width: 768px) {
    .timeline-item {
        gap: 20px;
    }

    /* Disable zigzag on mobile - all items flow left to right */
    .timeline-item:nth-child(even),
    .timeline-item:nth-child(odd) {
        flex-direction: row !important;
    }

    .timeline-item:nth-child(even) .timeline-content {
        text-align: left !important;
    }

    .timeline-item:nth-child(even) .timeline-marker,
    .timeline-item:nth-child(even) .timeline-icon {
        transform: none !important;
    }

    .timeline-icon {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    .timeline-content {
        padding: 20px;
    }

    .timeline-content h3 {
        font-size: 1.3rem;
    }

    .timeline-item:hover .timeline-content {
        transform: translateX(4px);
    }
}

/* --- CORE VALUES SECTION (About Page) --- */
.core-values-section {
    background: linear-gradient(180deg,
        var(--color-background-dark) 0%,
        #2d0f47 50%,
        var(--color-background-dark) 100%);
    padding: 100px 0 120px;
    position: relative;
    overflow: hidden;
    border-top: 3px solid var(--color-primary-brand);
    border-bottom: 3px solid var(--color-primary-brand);
}

/* Animated background overlay */
.values-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 30%, rgba(184, 21, 142, 0.35) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(16, 112, 173, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(238, 85, 0, 0.15) 0%, transparent 60%);
    opacity: 0.8;
    animation: valuesGlow 8s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes valuesGlow {
    0% {
        opacity: 0.6;
        transform: scale(1);
    }
    100% {
        opacity: 0.9;
        transform: scale(1.05);
    }
}

/* Values Header Section */
.values-header {
    text-align: center;
    margin-bottom: 70px;
    position: relative;
    z-index: 1;
}

.values-mission-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--color-primary-brand), var(--color-accent-cta));
    color: #fff;
    padding: 12px 30px;
    border-radius: 30px;
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 25px;
    box-shadow: 0 8px 25px rgba(184, 21, 142, 0.6);
    animation: badgePulse 3s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% {
        box-shadow: 0 8px 25px rgba(184, 21, 142, 0.6);
        transform: translateY(0);
    }
    50% {
        box-shadow: 0 12px 35px rgba(184, 21, 142, 0.9);
        transform: translateY(-3px);
    }
}

.values-mission-badge i {
    font-size: 1.4rem;
    color: #fff;
}

.values-main-title {
    font-size: 3rem;
    margin-bottom: 25px;
    background: linear-gradient(135deg, var(--color-primary-brand), var(--color-accent-cta));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

.values-intro-main {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    font-size: 1.2rem;
    color: var(--color-text-light);
    line-height: 1.9;
    font-weight: 400;
}

/* Values Grid - 1x4 layout */
.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.value-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(184, 21, 142, 0.3);
    border-radius: 15px;
    padding: 40px 25px;
    text-align: center;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.value-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--color-primary-brand), var(--color-secondary-accent));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.value-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(184, 21, 142, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.value-card:hover::before {
    opacity: 1;
}

.value-card:hover::after {
    opacity: 1;
}

.value-card:hover {
    transform: translateY(-12px) scale(1.02);
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-primary-brand);
    box-shadow: 0 20px 50px rgba(184, 21, 142, 0.5);
}

.value-icon {
    width: 90px;
    height: 90px;
    margin: 0 0 25px 0;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary-brand), var(--color-secondary-accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: #fff;
    box-shadow: 0 8px 25px rgba(184, 21, 142, 0.6);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 2;
}

.value-card:hover .value-icon {
    transform: scale(1.15) rotate(8deg);
    box-shadow: 0 15px 40px rgba(184, 21, 142, 0.9);
}

.value-card:nth-child(1) .value-icon {
    background: linear-gradient(135deg, var(--color-secondary-accent), var(--color-illinois-cyan));
}

.value-card:nth-child(2) .value-icon {
    background: linear-gradient(135deg, var(--color-primary-brand), var(--color-accent-cta));
}

.value-card:nth-child(3) .value-icon {
    background: linear-gradient(135deg, var(--color-illinois-gold), var(--color-accent-cta));
}

.value-card:nth-child(4) .value-icon {
    background: linear-gradient(135deg, var(--color-accent-cta), #ff6b35);
}

.value-title {
    color: var(--color-text-light);
    font-size: 1.6rem;
    font-family: var(--font-head);
    font-weight: 700;
    margin-bottom: 24px;
    letter-spacing: 0.02em;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    height: 2rem;
    display: flex;
    align-items: center;
}

.value-description {
    color: var(--color-text-secondary);
    line-height: 1.8;
    font-size: 0.95rem;
    margin: 0;
    position: relative;
    z-index: 2;
}

/* Values Footer */
.values-footer {
    text-align: center;
    margin-top: 70px;
    position: relative;
    z-index: 1;
}

.values-commitment {
    font-size: 1.4rem;
    color: var(--color-accent-cta);
    font-weight: 700;
    font-family: var(--font-head);
    font-style: normal;
    max-width: 700px;
    margin: 0 auto;
    padding: 35px 40px;
    border-left: 4px solid var(--color-accent-cta);
    border-right: 4px solid var(--color-accent-cta);
    background: linear-gradient(135deg, rgba(238, 85, 0, 0.08) 0%, rgba(184, 21, 142, 0.08) 100%);
    box-shadow: 0 8px 30px rgba(238, 85, 0, 0.2);
    letter-spacing: 0.02em;
}

/* Tablet responsive - 2x2 grid */
@media (max-width: 1200px) {
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        max-width: 900px;
    }

    .value-card {
        padding: 40px 30px;
    }
}

/* Mobile responsive - 1 column */
@media (max-width: 768px) {
    .core-values-section {
        padding: 80px 0 100px;
    }

    .values-header {
        margin-bottom: 50px;
    }

    .values-mission-badge {
        font-size: 0.9rem;
        padding: 10px 20px;
    }

    .values-main-title {
        font-size: 2.2rem;
    }

    .values-intro-main {
        font-size: 1.05rem;
        padding: 0 20px;
    }

    .values-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .value-card {
        padding: 35px 25px;
    }

    .value-icon {
        width: 75px;
        height: 75px;
        font-size: 2rem;
    }

    .value-title {
        font-size: 1.4rem;
    }

    .value-description {
        font-size: 0.9rem;
    }

    .values-footer {
        margin-top: 50px;
    }

    .values-commitment {
        font-size: 1.1rem;
        padding: 25px 20px;
    }
}

/* --- LEADERSHIP ENHANCEMENTS (About Page) --- */
.leader-photo-container {
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 8px;
    overflow: hidden;
    margin: 0 auto 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.leader-photo-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        transparent 0%,
        transparent 40%,
        rgba(16, 112, 173, 0.3) 70%,
        rgba(16, 112, 173, 0.7) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
    pointer-events: none;
}

.leader-photo-container:hover::before {
    opacity: 1;
}

.leader-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.leader-photo-container:hover .leader-photo {
    transform: scale(1.08);
}

.leader-photo-container:hover {
    box-shadow: 0 12px 40px rgba(16, 112, 173, 0.4);
    transform: translateY(-5px);
}

.leader-name {
    color: var(--color-text-light);
    font-size: 1.8rem;
    margin-bottom: 8px;
    text-align: center;
    transition: color 0.3s ease;
}

.featured-leader:hover .leader-name {
    color: var(--color-secondary-accent);
}

.leader-title {
    color: var(--color-accent-cta);
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 30px;
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
}

.leader-bio {
    color: var(--color-text-light);
    line-height: 1.8;
    position: relative;
    z-index: 2;
}

.leader-bio p {
    margin-bottom: 20px;
}

.leader-bio p:last-child {
    margin-bottom: 0;
}

/* Add subtle glow effect on hover */
.featured-leader {
    padding: 40px;
    border-radius: 12px;
    transition: background 0.3s ease;
}

.featured-leader:hover {
    background: rgba(16, 112, 173, 0.05);
}

/* --- ADVISOR CARDS (About Page) --- */
.advisors-section {
    margin-top: 60px;
}

.advisor-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.advisor-card {
    background: linear-gradient(145deg, rgba(16, 112, 173, 0.08) 0%, rgba(184, 21, 142, 0.04) 100%);
    border: 1px solid rgba(16, 112, 173, 0.3);
    border-top: 3px solid var(--color-secondary-accent);
    border-radius: 12px;
    padding: 35px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.advisor-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(16, 112, 173, 0.1) 50%,
        transparent 100%);
    transition: left 0.6s ease;
}

.advisor-card:hover::before {
    left: 100%;
}

.advisor-card:hover {
    transform: translateY(-8px);
    border-top-color: var(--color-accent-cta);
    box-shadow: 0 12px 35px rgba(16, 112, 173, 0.25);
    background: linear-gradient(145deg, rgba(16, 112, 173, 0.12) 0%, rgba(184, 21, 142, 0.06) 100%);
}

.advisor-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    background: linear-gradient(135deg, var(--color-secondary-accent) 0%, var(--color-primary-brand) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #fff;
    box-shadow: 0 6px 20px rgba(16, 112, 173, 0.4);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.advisor-card:hover .advisor-icon {
    transform: scale(1.1) rotateY(180deg);
    box-shadow: 0 8px 30px rgba(16, 112, 173, 0.6);
}

.advisor-card h5 {
    color: var(--color-text-light);
    font-size: 1.4rem;
    margin-bottom: 15px;
    font-weight: 700;
    transition: color 0.3s ease;
}

.advisor-card:hover h5 {
    color: var(--color-secondary-accent);
}

.advisor-card p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
    margin: 0;
}

/* Mobile advisor cards */
@media (max-width: 768px) {
    .advisor-cards-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .advisor-card {
        padding: 30px 25px;
    }

    .advisor-icon {
        width: 70px;
        height: 70px;
        font-size: 1.8rem;
    }
}

/* --- GOVERNANCE & TRANSPARENCY SECTION --- */
.governance-intro {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 50px;
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--color-text-dark);
}

.governance-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.governance-card {
    background: linear-gradient(145deg, rgba(16, 112, 173, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    border: 2px solid rgba(16, 112, 173, 0.3);
    border-radius: 12px;
    padding: 35px 30px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.governance-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(109, 179, 63, 0.15), transparent);
    transition: left 0.6s ease;
}

.governance-card:hover::before {
    left: 100%;
}

.governance-card:hover {
    transform: translateY(-8px);
    border-color: var(--color-illinois-green);
    box-shadow: 0 12px 35px rgba(109, 179, 63, 0.25);
    background: linear-gradient(145deg, rgba(109, 179, 63, 0.12) 0%, rgba(16, 112, 173, 0.08) 100%);
}

.governance-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--color-secondary-accent) 0%, var(--color-primary-brand) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 25px 0;
    box-shadow: 0 6px 20px rgba(16, 112, 173, 0.3);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.governance-icon i {
    font-size: 2rem;
    color: #fff;
}

.governance-card:hover .governance-icon {
    transform: scale(1.15) rotateY(180deg);
    background: linear-gradient(135deg, var(--color-illinois-green) 0%, var(--color-secondary-accent) 100%);
    box-shadow: 0 8px 30px rgba(109, 179, 63, 0.5);
}

.governance-card h4 {
    font-size: 1.4rem;
    color: var(--color-primary-brand);
    margin-bottom: 15px;
    font-weight: 700;
    min-height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.governance-card p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-dark);
    flex-grow: 1;
}

.governance-card strong {
    color: var(--color-primary-brand);
    font-weight: 700;
}

/* Transparency Snapshot Callout Box */
.transparency-snapshot {
    background: linear-gradient(145deg, rgba(109, 179, 63, 0.15) 0%, rgba(16, 112, 173, 0.1) 100%);
    border: 3px solid var(--color-illinois-green);
    border-radius: 16px;
    padding: 45px;
    box-shadow: 0 8px 30px rgba(109, 179, 63, 0.2);
}

.snapshot-title {
    text-align: center;
    font-size: 2rem;
    color: var(--color-primary-brand);
    margin-bottom: 30px;
    font-weight: 900;
}

.snapshot-content {
    max-width: 900px;
    margin: 0 auto;
}

.snapshot-header {
    text-align: center;
    font-size: 1.25rem;
    color: var(--color-text-dark);
    margin-bottom: 35px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(109, 179, 63, 0.3);
}

.snapshot-breakdown {
    display: grid;
    gap: 20px;
    margin-bottom: 40px;
}

.breakdown-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.6);
    padding: 18px 25px;
    border-radius: 10px;
    border-left: 5px solid var(--color-illinois-green);
    transition: all 0.3s ease;
}

.breakdown-item:hover {
    transform: translateX(10px);
    box-shadow: 0 4px 15px rgba(109, 179, 63, 0.2);
    background: rgba(255, 255, 255, 0.8);
}

.breakdown-percentage {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--color-illinois-green);
    font-family: var(--font-mono);
    min-width: 70px;
}

.breakdown-arrow {
    font-size: 1.5rem;
    color: var(--color-primary-brand);
    font-weight: bold;
}

.breakdown-desc {
    font-size: 1.05rem;
    color: var(--color-text-dark);
    line-height: 1.5;
    flex: 1;
}

.snapshot-footer {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    padding: 30px;
}

.snapshot-checkmarks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}

.checkmark-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkmark-item i {
    font-size: 1.2rem;
    color: var(--color-illinois-green);
}

.checkmark-item span {
    font-size: 0.95rem;
    color: var(--color-text-dark);
    line-height: 1.4;
}

.snapshot-contact {
    text-align: center;
    font-size: 0.95rem;
    color: var(--color-text-dark);
    margin: 0;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.snapshot-contact a {
    color: var(--color-primary-brand);
    text-decoration: underline;
    font-weight: 600;
}

.snapshot-contact a:hover {
    color: var(--color-illinois-green);
}

/* === RESEARCH REPORT DOWNLOAD MODAL === */

.report-modal-content {
    max-width: 600px;
    padding: 50px 40px;
    max-height: none; /* Remove max-height constraint to allow full content display */
    margin: 10px auto; /* Vertical margin for spacing */
}

.report-modal-header {
    text-align: center;
    margin-bottom: 35px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--color-border-subtle);
}

.report-modal-header h3 {
    color: var(--color-text-light);
    font-size: 1.5rem;
    margin-bottom: 10px;
    font-family: 'Rajdhani', sans-serif;
    text-transform: uppercase;
}

.report-id-display {
    color: var(--color-text-fade);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.report-option-container {
    margin-bottom: 25px;
    padding: 25px;
    background: rgba(0, 10, 20, 0.5);
    border: 1px solid var(--color-border-subtle);
    border-radius: 8px;
    transition: border-color 0.3s ease;
}

.report-option-container:hover {
    border-color: var(--color-secondary-accent);
}

.report-option-header {
    margin-bottom: 20px;
}

.report-option-badge {
    display: inline-block;
    background: var(--color-primary-brand);
    color: #000;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.report-option-badge.badge-alt {
    background: var(--color-accent-cta);
}

.report-option-header h4 {
    color: var(--color-text-light);
    font-size: 1.1rem;
    margin-bottom: 8px;
    font-family: 'Rajdhani', sans-serif;
}

.report-modal-divider {
    text-align: center;
    margin: 30px 0;
    position: relative;
}

.report-modal-divider::before,
.report-modal-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: var(--color-border-subtle);
}

.report-modal-divider::before {
    left: 0;
}

.report-modal-divider::after {
    right: 0;
}

.report-modal-divider span {
    background: var(--color-background-dark);
    padding: 0 15px;
    color: var(--color-text-fade);
    font-weight: 600;
    font-size: 0.9rem;
}

.mission-message {
    background: rgba(238, 85, 0, 0.05);
    border-left: 3px solid var(--color-accent-cta);
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.mission-message i {
    display: block;
}

.report-skip-container {
    text-align: center;
}

/* Form styling within modal */
.report-modal-content .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.report-modal-content .form-group {
    margin-bottom: 15px;
}

.report-modal-content .form-group input {
    width: 100%;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border-subtle);
    border-radius: 4px;
    color: var(--color-text-light);
    font-family: inherit;
    transition: border-color 0.3s ease;
}

.report-modal-content .form-group input:focus {
    outline: none;
    border-color: var(--color-secondary-accent);
    background: rgba(255, 255, 255, 0.08);
}

.report-modal-content .form-group input::placeholder {
    color: var(--color-text-fade);
}

/* Button states */
.cta-button.success {
    background: #4caf50 !important;
    border-color: #4caf50 !important;
}

.cta-button.error {
    background: #f44336 !important;
    border-color: #f44336 !important;
}

/* Secondary CTA for skip option */
.secondary-cta {
    background: transparent;
    border: 2px solid var(--color-accent-cta);
    color: var(--color-accent-cta);
}

.secondary-cta:hover {
    background: var(--color-accent-cta);
    color: #fff;
}

/* === COLLAPSIBLE OPTION 2 === */

/* Expand trigger button */
.expand-skip-option {
    width: 100%;
    background: transparent;
    border: 1px dashed rgba(77, 182, 255, 0.3);
    border-radius: 6px;
    padding: 15px 20px;
    margin-top: 25px;
    color: var(--color-text-fade);
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    font-family: 'Rajdhani', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.expand-skip-option:hover {
    background: rgba(77, 182, 255, 0.05);
    border-color: rgba(77, 182, 255, 0.5);
    color: var(--color-primary-brand);
}

.expand-skip-option:focus {
    outline: 2px solid var(--color-primary-brand);
    outline-offset: 2px;
}

.expand-skip-option .expand-icon {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
    display: inline-block;
}

.expand-skip-option.is-expanded .expand-icon {
    transform: rotate(90deg);
}

/* Collapsible container */
.report-skip-collapsible {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease;
    margin-top: 0;
}

.report-skip-collapsible.is-expanded {
    max-height: 600px; /* Generous height to accommodate content */
    opacity: 1;
    margin-top: 20px;
}

/* Ensure smooth animation for inner content */
.report-skip-collapsible .report-option-container {
    padding-top: 20px;
}

/* Mobile Responsive - Governance Section */
@media (max-width: 1024px) {
    .governance-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    /* Laptop-friendly modals - reduce padding for smaller screens */
    .modal-content {
        padding: 35px 30px;
    }

    .report-modal-content {
        padding: 40px 30px;
    }
}

@media (max-width: 768px) {
    .governance-intro {
        font-size: 1rem;
        margin-bottom: 35px;
    }

    .governance-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .governance-card {
        padding: 30px 25px;
    }

    .governance-icon {
        width: 70px;
        height: 70px;
        font-size: 1.8rem;
    }

    .transparency-snapshot {
        padding: 30px 20px;
    }

    .snapshot-title {
        font-size: 1.6rem;
        margin-bottom: 25px;
    }

    .snapshot-header {
        font-size: 1.1rem;
        margin-bottom: 25px;
    }

    .breakdown-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 15px 20px;
    }

    .breakdown-percentage {
        font-size: 1.5rem;
        min-width: auto;
    }

    .breakdown-arrow {
        display: none;
    }

    .breakdown-desc {
        font-size: 0.95rem;
    }

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

    .snapshot-footer {
        padding: 20px;
    }

    .snapshot-contact {
        font-size: 0.85rem;
    }

    /* Hero Section Mobile Responsive */
    .mission-section .section-title {
        font-size: 2.2rem;
    }

    .mission-text p {
        font-size: 1.05rem;
        line-height: 1.7;
    }

    .vision-statement {
        font-size: 1.15rem !important;
        padding: 20px 20px 20px 25px;
    }
}

/* --- MARQUEE --- */
.sponsor-marquee-section {
    background-color: var(--color-dark-cyber-bg); border-top: 1px solid var(--color-border-subtle);
    padding: 20px 0; overflow: hidden; position: relative;
}
.marquee-container { max-width: 100%; overflow: hidden; white-space: nowrap; position: relative; }
.marquee-track { display: flex; width: max-content; animation: scroll 40s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
.marquee-item { display: flex; align-items: center; justify-content: center; width: 200px; height: 100px; }

.sponsor-img {
    max-height: 70px;
    max-width: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: brightness(0) invert(1) opacity(0.7); /* Standard white monochrome */
    transition: all 0.3s ease;
}
.sponsor-img:hover { filter: brightness(0) invert(1) opacity(1); transform: scale(1.05); }

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

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    h1 { font-size: 2.2rem; }
    .section-title { font-size: 2rem; }
    .decrypt-title { font-size: 3rem; }

    /* Responsive Hero Title */
    .hero-tagline { font-size: 1rem; letter-spacing: 1px; }
    .hero-subtitle-main { font-size: 2.8rem; letter-spacing: -0.5px; }

    .hero-section { height: auto; padding: 100px 0; }
    .research-hero-section, .events-hero-section, .mission-section { padding: 100px 0 60px 0; }

    .nav-toggle { display: block; }

    .nav-content { flex-wrap: wrap; }

    .nav-links {
        display: none;
        width: 100%;
        flex-direction: column;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid var(--color-border-subtle);
    }

    .nav-links.is-open { display: flex; }

    .nav-links li {
        margin: 10px 0;
        width: 100%;
        text-align: center;
    }

    .pillars-grid, .contact-grid, .featured-leader, .bsides-split-layout, .slack-strip-content, .donation-interface-grid {
        flex-direction: column;
    }

    .contact-grid { grid-template-columns: 1fr; gap: 30px; }
    .leader-profile-col { width: 100%; border-bottom: 1px dashed rgba(255,255,255,0.1); padding-bottom: 20px; margin-bottom: 20px; }

    .calendar-row { flex-direction: column; text-align: center; gap: 15px; }
    .cal-date { width: 100%; flex-direction: row; justify-content: center; gap: 10px; margin: 0; }
    .cal-action { justify-content: center; flex-wrap: wrap; }

    .donation-interface-grid { gap: 40px; }
    .secure-terminal-box { width: 100%; }

    /* Responsive Grid Adjustments */
    .past-events-grid { grid-template-columns: 1fr; }
    .event-cards-grid, .focus-area-grid, .impact-grid, .cta-cards-grid, .gallery-grid {
        grid-template-columns: 1fr;
    }
    .hub-stats { grid-template-columns: repeat(2, 1fr); }
    .sop-grid { grid-template-columns: 1fr; }
    .sop-cell { border-right: 1px solid var(--lab-text); }
}

/* Tablet-specific optimizations (768px - 900px) */
@media (min-width: 601px) and (max-width: 900px) {
    /* Adjust grids for 2-column layout on tablets */
    .event-cards-grid, .focus-area-grid, .impact-grid, .cta-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    /* Better spacing for tablet forms */
    .contact-grid { grid-template-columns: 1fr; gap: 25px; }

    /* Optimize hero text for tablets */
    .hero-subtitle-main { font-size: 3.2rem; }

    /* Table remains horizontal scrollable but with better sizing */
    .sparkline-table { font-size: 0.9rem; }
}

@media (max-width: 600px) {
    h1 { font-size: 1.8rem; }
    .section-title { font-size: 1.6rem; }
    .decrypt-title { font-size: 2.2rem; }
    .section { padding: 60px 0; }
    .content-box { padding: 30px 15px; }

    .nav-links li { margin: 5px; }
    .nav-cta { padding: 6px 12px; font-size: 0.8rem; }

    .cta-button, .secondary-cta { padding: 12px 20px; font-size: 0.9rem; }

    .hub-stats { grid-template-columns: 1fr; }
    .stat-box { border-right: none; border-bottom: 1px solid var(--color-secondary-accent); }
    .stat-box:last-child { border-bottom: none; }

    /* Mobile-optimized table: Make it scrollable horizontally */
    .sparkline-table {
        font-size: 0.85rem;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .sparkline-table thead,
    .sparkline-table tbody,
    .sparkline-table tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }
    .sparkline-table th,
    .sparkline-table td {
        padding: 10px 5px;
        font-size: 0.75rem;
    }

    /* Make hero subtitle more readable on mobile */
    .hero-subtitle-main { font-size: 2.2rem !important; line-height: 1.2; }

    /* Hero Section Extra Small Mobile */
    .mission-section .section-title {
        font-size: 1.8rem;
    }

    /* Ensure grids don't create horizontal scroll */
    .event-cards-grid, .focus-area-grid, .impact-grid, .cta-cards-grid, .gallery-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Featured event mobile responsive */
    .featured-event-content {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .featured-cal-date {
        width: 100%;
        padding: 12px 15px;
    }

    .featured-cal-details {
        min-width: auto;
        width: 100%;
    }

    .featured-cal-details h3 {
        font-size: 1.4rem;
    }

    .event-countdown {
        justify-content: center;
        gap: 15px;
    }

    .countdown-segment {
        padding: 10px 14px;
        min-width: 60px;
    }

    .countdown-value {
        font-size: 1.8rem;
    }

    .countdown-label {
        font-size: 0.65rem;
    }

    .featured-cal-action {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .featured-cal-action .small-cta,
    .featured-cal-action .cta-icon-btn {
        flex: 1;
        min-width: 100px;
    }

    .featured-badge {
        font-size: 0.7rem;
        padding: 5px 12px;
    }

    .calendar-row.featured-event {
        padding: 20px 15px;
    }

    /* Mobile-friendly modal */
    .modal-content {
        width: 95%;
        padding: 30px 20px;
        max-height: calc(100vh - 40px);
        margin: 20px auto;
        overflow-y: auto;
    }

    /* Report modal mobile responsive */
    .report-modal-content {
        padding: 30px 20px;
        max-width: 95%;
        max-height: calc(100vh - 40px);
        margin: 20px auto;
    }

    .report-modal-content .form-row {
        grid-template-columns: 1fr;
    }

    .report-option-container {
        padding: 20px 15px;
    }

    /* Improve touch targets for mobile (minimum 44x44px) */
    .nav-toggle { padding: 12px; min-width: 44px; min-height: 44px; }
    .modal-close { min-width: 44px; min-height: 44px; }

    /* Adjust video containers for mobile */
    .hero-video, .pillar-video { height: 300px; }

    /* Improve form usability on mobile */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
    }

    /* Better spacing for form elements */
    .form-group { margin-bottom: 20px; }

    /* Ensure buttons are easily tappable */
    button, .cta-button, .secondary-cta, a.cta-button {
        min-height: 44px;
        padding: 14px 24px;
        font-size: 1rem;
    }

    /* Improve readability of long text on mobile */
    p, li { font-size: 1rem; line-height: 1.7; }

    /* Make sure images don't overflow */
    img { max-width: 100%; height: auto; }

    /* Ensure sponsor logos scale appropriately */
    .marquee-img { max-width: 120px; }

    /* Fix any potential horizontal scroll from margin/padding */
    body, html { overflow-x: hidden; }

    /* Fix NEXT_OP terminal box width on mobile */
    .terminal-overlap {
        width: 95%;
        max-width: 95%;
        padding: 10px 15px;
        font-size: 0.85rem;
    }
    .terminal-overlap > div {
        flex-wrap: wrap;
        gap: 5px;
    }

    /* Fix research project status pills on mobile */
    .project-strip {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 20px 15px;
    }
    .project-side {
        order: -1; /* Move status pill above the title */
        text-align: left;
    }
    .status-pill {
        display: inline-flex;
        width: auto;
    }

    /* Fix donate page sponsor logos - consistent 2 per line on mobile */
    .uniform-logo-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px 20px !important;
        align-items: center;
        justify-items: center;
    }
    .uniform-logo-grid .sponsor-img {
        margin: 0 !important;
        max-width: 140px;
    }

    /* Stack donation box sections on mobile */
    .donation-interface-grid {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }
}

/* =================================================================
   FINAL OVERRIDES: HIGH SPECIFICITY (v10 - The Only Truth)
   ================================================================= */

/* 1. EVENTS: FIX "NEXT OP" CENTER & POSITION
   We disable 'animation' to stop it from fighting our positioning.
   translate(-50%, 50%) centers it horizontally AND pushes it down
   half its height to straddle the line. */
html body .terminal-overlap {
    position: absolute !important;
    left: 50% !important;
    bottom: 0 !important;
    transform: translate(-50%, 50%) !important;
    margin: 0 !important;
    animation: none !important; /* Stops the "drift" caused by fade-in */
    opacity: 1 !important;
    z-index: 500 !important; /* Higher z-index to stay above white sections */
    width: max-content !important;
    background: rgba(1, 18, 36, 0.95) !important; /* Ensure readable background */
    backdrop-filter: blur(5px) !important;
}

/* 2. EVENTS: FIX "HEARTLAND" GRAY CARDS
   background-image: none is the key to removing the gray texture. */
html body .focus-area-card {
    background-image: none !important;
    background: linear-gradient(135deg, rgba(16, 112, 173, 0.25) 0%, rgba(16, 112, 173, 0.35) 100%) !important;
    border-top: 5px solid var(--color-secondary-accent) !important;
    border-left: 1px solid rgba(16, 112, 173, 0.4) !important;
    border-right: 1px solid rgba(16, 112, 173, 0.4) !important;
    border-bottom: 1px solid rgba(16, 112, 173, 0.2) !important;
}

/* 3. EVENTS: FIX HISTORICAL HIGHLIGHTS
   Targeting direct children divs to ensure styling applies to the containers. */
html body .past-events-grid > div {
    background-color: #011224 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-left: 5px solid #ee5500 !important;
    padding: 25px !important;
    border-radius: 6px !important;
    display: flex !important;
    flex-direction: column !important;
}
/* Typography inside Historical Cards */
html body .past-events-grid > div h3 { 
    color: #ffffff !important; 
    margin-top: 0 !important; 
}
html body .past-events-grid > div p { 
    color: #cccccc !important; 
    font-size: 0.95rem !important;
}
html body .past-events-grid > div strong { 
    color: #ee5500 !important; 
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace !important;
}

/* 4. DONATE: FIX BUTTONS & SEAM */
/* Align buttons to bottom */
html body .tier-card {
    display: flex !important;
    flex-direction: column !important;
}
html body .tier-card .cta-button {
    margin-top: auto !important;
}
/* Force Hover Colors (The !important overrides the base class hover) */
html body .tier-founding .cta-button:hover {
    background-color: var(--color-primary-brand) !important;
    color: #ffffff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3) !important;
}

.tier-learn-more {
    margin-bottom: 15px;
}
html body .tier-alliance .cta-button:hover {
    background-color: var(--color-primary-brand) !important;
    color: #ffffff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(0, 242, 255, 0.4) !important;
}
html body .tier-workforce .cta-button:hover {
    background-color: var(--color-primary-brand) !important;
    color: #ffffff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(255, 157, 0, 0.4) !important;
}

/* Fix the Background Seam */
html body .terminal-footer {
    border-top: none !important;
    margin-top: -1px !important; /* Physically pulls footer up to close gap */
    background-color: #0b0f19 !important;
    padding-top: 20px !important;
}
html body .payment-form-wrapper {
    background-color: #0b0f19 !important;
    background-image: none !important;
}

/* ================================================
   SITE-WIDE CARD SHIMMER ANIMATIONS
   ================================================ */

/* Impact Cards - Homepage */
.impact-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.impact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: left 0.6s ease;
    z-index: 1;
    pointer-events: none;
}

.impact-card:hover::before {
    left: 100%;
}

.impact-card:hover .impact-icon i {
    transform: scale(1.1) rotateY(180deg);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Gallery Items - Events Page */
.gallery-item {
    position: relative;
    overflow: hidden;
}

.gallery-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: left 0.6s ease;
    z-index: 1;
    pointer-events: none;
}

.gallery-item:hover::before {
    left: 100%;
}

.gallery-item:hover .gallery-img-container img {
    transform: scale(1.05);
}

/* Partnership Tier Cards - Donate Page */
.partnership-tier-card {
    position: relative;
    overflow: hidden;
}

.partnership-tier-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(109, 179, 63, 0.15), transparent);
    transition: left 0.6s ease;
    z-index: 1;
    pointer-events: none;
}

.partnership-tier-card:hover::before {
    left: 100%;
}

.partnership-tier-card:hover .tier-icon {
    transform: scale(1.15) rotateY(180deg);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Event Cards - Events Page */
.event-card-compact {
    position: relative;
    overflow: hidden;
}

.event-card-compact::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(16, 112, 173, 0.15), transparent);
    transition: left 0.6s ease;
    z-index: 1;
    pointer-events: none;
}

.event-card-compact:hover::before {
    left: 100%;
}

/* CTA Cards - Homepage shimmer */
.cta-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(238, 85, 0, 0.1), transparent);
    transition: left 0.6s ease;
    z-index: 1;
    pointer-events: none;
}

.cta-card:hover::before {
    left: 100%;
}

.cta-card:hover .cta-icon {
    transform: scale(1.1) rotateY(180deg);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================
   SPONSOR IMPACT CARDS
   ============================================ */
.sponsor-impact-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.sponsor-impact-item {
    background: linear-gradient(145deg, rgba(109, 179, 63, 0.08) 0%, rgba(16, 112, 173, 0.05) 100%);
    border: 2px solid var(--color-illinois-green);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.sponsor-impact-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(109, 179, 63, 0.15) 50%,
        transparent 100%);
    transition: left 0.6s ease;
    z-index: 0;
}

.sponsor-impact-item:hover::before {
    left: 100%;
}

.sponsor-impact-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(109, 179, 63, 0.2);
}

.sponsor-impact-item:hover i {
    transform: scale(1.1) rotateY(180deg);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sponsor-impact-item i {
    font-size: 2.5rem;
    color: var(--color-illinois-green);
    margin-bottom: 15px;
    display: block;
    position: relative;
    z-index: 1;
}

.sponsor-impact-item h4 {
    font-size: 1.3rem;
    color: var(--color-text-light);
    margin-bottom: 8px;
}

.sponsor-impact-item p {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
}

.sponsor-grid-title {
    text-align: center;
    font-size: 1.5rem;
    color: var(--color-text-light);
    margin-bottom: 30px;
    font-weight: 700;
}

/* ============================================
   ROI TIMELINE
   ============================================ */
.roi-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--color-text-dark);
}

.roi-timeline {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-bottom: 60px;
}

.roi-phase {
    background: linear-gradient(145deg, rgba(16, 112, 173, 0.08) 0%, rgba(184, 21, 142, 0.05) 100%);
    border: 2px solid var(--color-secondary-accent);
    border-left: 6px solid var(--color-secondary-accent);
    border-radius: 12px;
    padding: 30px;
    transition: all 0.3s ease;
}

.roi-phase:hover {
    transform: translateX(8px);
    border-left-color: var(--color-accent-cta);
    box-shadow: 0 8px 30px rgba(16, 112, 173, 0.2);
}

.roi-phase-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.roi-timeline-marker {
    background: linear-gradient(135deg, var(--color-secondary-accent) 0%, var(--color-primary-brand) 100%);
    color: #fff;
    font-weight: 900;
    font-size: 1.2rem;
    padding: 10px 18px;
    border-radius: 25px;
    box-shadow: 0 4px 15px rgba(16, 112, 173, 0.4);
    flex-shrink: 0;
}

.roi-phase-header h3 {
    font-size: 1.8rem;
    color: var(--color-text-dark);
    margin: 0;
}

.roi-deliverables {
    display: grid;
    gap: 15px;
}

.roi-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.5);
    padding: 15px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.roi-item:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: translateX(5px);
}

.roi-item i {
    font-size: 1.5rem;
    color: var(--color-illinois-green);
    min-width: 30px;
}

.roi-item span {
    font-size: 1rem;
    color: var(--color-text-dark);
    line-height: 1.5;
}

.roi-cta-box {
    background: linear-gradient(145deg, rgba(109, 179, 63, 0.1) 0%, rgba(16, 112, 173, 0.08) 100%);
    border: 2px solid var(--color-illinois-green);
    border-radius: 12px;
    padding: 40px;
    text-align: center;
}

.roi-cta-box h3 {
    font-size: 2rem;
    color: var(--color-text-dark);
    margin-bottom: 15px;
}

.roi-cta-box p {
    font-size: 1.1rem;
    color: var(--color-text-dark);
    margin-bottom: 25px;
    line-height: 1.6;
}

/* ==========================================
   TIER CARD "LEARN MORE" FOOTER
   ========================================== */

.tier-learn-more {
    margin-top: 20px;  /* Space from list above */
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    min-height: 60px;  /* Reserve consistent space for link text */
    display: flex;
    align-items: center;
    flex-shrink: 0;  /* Don't shrink this element */
}

.tier-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-secondary-accent);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.tier-link:hover {
    color: var(--color-accent-cta);
    transform: translateX(5px);
}

.tier-link i {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.tier-link:hover i {
    transform: translateY(3px);
}

/* ==========================================
   STRATEGIC IMPACT SECTION
   ========================================== */

.impact-intro {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 60px;
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--color-text-light);
}

.strategic-pillar {
    background: linear-gradient(145deg, rgba(16, 112, 173, 0.08) 0%, rgba(184, 21, 142, 0.05) 100%);
    border: 2px solid rgba(16, 112, 173, 0.2);
    border-radius: 12px;
    padding: 40px;
    margin-bottom: 30px;
    text-align: center;
    transition: all 0.3s ease;
}

.strategic-pillar:hover {
    border-color: var(--color-accent-cta);
    box-shadow: 0 8px 30px rgba(16, 112, 173, 0.2);
}

.pillar-icon-large {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, var(--color-secondary-accent) 0%, var(--color-primary-brand) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    box-shadow: 0 6px 20px rgba(16, 112, 173, 0.4);
}

.pillar-icon-large i {
    font-size: 2.5rem;
    color: #fff;
}

.strategic-pillar h3 {
    font-size: 1.8rem;
    color: var(--color-text-light);
    margin-bottom: 20px;
}

.pillar-vision {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--color-text-secondary);
    max-width: 900px;
    margin: 0 auto;
}

.impact-cta-box {
    background: linear-gradient(145deg, rgba(109, 179, 63, 0.12) 0%, rgba(16, 112, 173, 0.08) 100%);
    border: 2px solid var(--color-illinois-green);
    border-radius: 12px;
    padding: 50px;
    text-align: center;
    margin-top: 60px;
}

.impact-cta-box h3 {
    font-size: 2.2rem;
    color: var(--color-text-light);
    margin-bottom: 15px;
}

.impact-cta-box p {
    font-size: 1.15rem;
    color: var(--color-text-secondary);
    margin-bottom: 30px;
    line-height: 1.7;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .strategic-pillar {
        padding: 30px 20px;
    }

    .pillar-icon-large {
        width: 70px;
        height: 70px;
    }

    .pillar-icon-large i {
        font-size: 2rem;
    }

    .strategic-pillar h3 {
        font-size: 1.5rem;
    }

    .pillar-vision {
        font-size: 1rem;
    }

    .impact-cta-box {
        padding: 30px 20px;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .roi-phase {
        padding: 20px;
    }

    .roi-phase-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .roi-timeline-marker {
        font-size: 1rem;
        padding: 8px 14px;
    }

    .roi-phase-header h3 {
        font-size: 1.4rem;
    }

    /* Mobile adjustments for collapsible Option 2 */
    .expand-skip-option {
        font-size: 0.85rem;
        padding: 12px 15px;
    }

    .report-skip-collapsible.is-expanded {
        max-height: 700px; /* More space on mobile */
    }
}