/* --- Variables & Reset --- */
:root {
    --primary-dark: #1a1a1a;
    --primary-light: #ffffff;
    --accent: #c0392b; /* CPCS Red */
    --text-main: #2c3e50;
    --text-muted: #7f8c8d;
    --bg-soft: #f8f9fa;
    --border-color: #e0e0e0;
    
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
    
    --container-width: 1200px;
    
    /* Professional Animation Curves */
    --smooth-curve: cubic-bezier(0.25, 0.8, 0.25, 1);
    --bounce-curve: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/playfairdisplay/v40/nuFRD-vYSZviVYUb_rj3ij__anPXDTnCjmHKM4nYO7KN_qiTXtXA-W2r.woff2) format('woff2');
    unicode-range: U +0301, U +0400 -045F, U +0490 -0491, U +04B0 -04B1, U +2116;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format('woff2');
    unicode-range: U +0460 -052F, U +1C80 -1C8A, U +20B4, U +2DE0 -2DFF, U + A640-A69F, U + FE2E-FE2F;
}

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

body {
    font-family: var(--font-body);
    background-color: var(--primary-light);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
}

body.loading { overflow: hidden; }

/* --- Global Container --- */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

/* =========================================
   SPLASH SCREEN (LOADING)
   ========================================= */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #ffffff; /* Clean white background */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#splash-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.cpcs-splash-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 200px; /* Constrains the progress bar width */
}

.cpcs-splash-logo {
    width: 65px; /* Adjust slightly if needed to match your exact logo size */
    height: auto;
    margin-bottom: 20px;
}

.cpcs-splash-progress-bar {
    width: 100%;
    height: 2px; /* Very thin, elegant line */
    background-color: #e5e7eb; /* Light grey track */
    position: relative;
    overflow: hidden;
    margin-bottom: 12px;
}

.cpcs-splash-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 40%;
    background-color: var(--accent); /* CPCS Red */
    animation: cpcs-loading 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes cpcs-loading {
    0% { left: -40%; }
    100% { left: 100%; }
}

.cpcs-splash-text {
    font-family: var(--font-heading); /* Serif font */
    font-size: 0.8rem;
    color: #9ca3af; /* Medium grey */
    font-style: italic;
    letter-spacing: 0.5px;
}

/* --- Top Bar & Ticker --- */
.top-bar {
    background: var(--primary-dark);
    color: white;
    font-size: 0.8rem;
    padding: 8px 0; /* ADDED BREATHING ROOM */
    display: flex;
    align-items: center;
}
.top-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.breaking-label {
    background: var(--accent);
    color: white;
    font-weight: 700;
    padding: 4px 12px; /* Inner spacing for the red box */
    border-radius: 2px; /* Slight rounding looks premium */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ticker-wrap {
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
    margin: 0 20px;
}
.ticker-move { display: inline-block; animation: ticker 7s linear infinite; }
.ticker-item { margin-right: 50px; color: #ddd; }
@keyframes ticker { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); } }
.date-display { color: #ddd; white-space: nowrap; }

/* --- Main Navbar --- */
.navbar {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: box-shadow 0.3s var(--smooth-curve);
}
.navbar.scrolled {
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Adds depth when scrolling */
}
.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 90px;
}

/* Nav Flex Sections */
.nav-left { flex: 0 0 auto; display: flex; align-items: center; }
.nav-center { flex: 1 1 auto; display: flex; justify-content: center; }
.nav-right { flex: 0 0 auto; display: flex; align-items: center; gap: 25px; }

.logo-img { height: 65px; width: auto; object-fit: contain; }

/* Smooth Underline Animation for Links */
.nav-links { display: flex; list-style: none; gap: 35px; margin: 0; padding: 0; }
.nav-link {
    text-decoration: none;
    color: var(--text-main);
    font-weight: 500;
    font-size: 1rem;
    position: relative;
    padding: 5px 0;
    transition: color 0.3s var(--smooth-curve);
}
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%; /* Starts from center */
    background-color: var(--accent);
    transition: width 0.4s var(--smooth-curve), left 0.4s var(--smooth-curve);
}
.nav-link:hover { color: var(--accent); }
.nav-link:hover::after, .nav-link.active::after {
    width: 100%;
    left: 0; /* Expands perfectly to the edges */
}

/* Icons and Buttons */
.search-icon svg { 
    width: 20px; height: 20px; 
    fill: var(--text-main); 
    cursor: pointer; 
    transition: transform 0.3s var(--bounce-curve), fill 0.3s ease; 
}
.search-icon:hover svg { fill: var(--accent); transform: scale(1.15); }

/* --- Professional Join Us Button --- */
.btn-join {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-dark);
    color: #ffffff;
    text-decoration: none;
    padding: 10px 26px; /* Slightly wider for a more elegant proportion */
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.85rem; /* Slightly smaller text looks more premium */
    letter-spacing: 1px; /* Adds that high-end editorial feel */
    text-transform: uppercase;
    border: 1px solid var(--primary-dark);
    border-radius: 2px;
    
    /* Smooth, grounded transition without the bounce */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
}

.btn-join:hover { 
    background: var(--accent); 
    border-color: var(--accent);
    color: #ffffff;
    
    /* A very subtle, sharp shadow instead of a glowing red one */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08); 
    
    /* Removed transform: translateY to keep the button strictly planted */
}

.menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: var(--primary-dark);
    transition: transform 0.3s var(--smooth-curve);
}
.menu-btn.active { transform: rotate(90deg); color: var(--accent); }

/* --- Footer --- */
.site-footer { background-color: var(--primary-light); padding: 80px 20px 40px; text-align: center; }
.footer-logo-link { display: inline-block; text-decoration: none; margin-bottom: 15px; }
.footer-logo-text { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 900; color: #1b263b; letter-spacing: -1px; }
.footer-logo-text .dot { color: var(--accent); }
.footer-desc { max-width: 950px; margin: 0 auto 35px; color: var(--text-muted); font-size: 0.95rem; line-height: 1.7; }
.footer-divider { border: none; border-top: 1px solid var(--border-color); max-width: 950px; margin: 0 auto; }
.footer-socials { display: flex; justify-content: center; gap: 40px; padding: 35px 0; }
.social-icon svg { width: 22px; height: 22px; fill: var(--primary-dark); transition: transform 0.3s var(--bounce-curve), fill 0.3s; }
.social-icon:hover svg { fill: var(--accent); transform: translateY(-4px) scale(1.1); }
.footer-links { display: flex; justify-content: center; gap: 30px; list-style: none; padding: 35px 0; flex-wrap: wrap; margin: 0; }
.footer-links a { text-decoration: none; color: var(--text-muted); font-size: 0.95rem; transition: color 0.3s; }
.footer-links a:hover { color: var(--accent); }
.footer-copyright { color: #aab2bd; font-size: 0.85rem; padding-top: 10px; }

/* =========================================
   MOBILE MENU & RESPONSIVE FIXES
   ========================================= */
@media (max-width: 992px) {
    .menu-btn { display: block; }
    .btn-join { display: none; }
    .date-display { display: none; }
    
    /* Professional Vertical Mobile Menu */
    .nav-center {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--primary-light);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        border-top: 1px solid var(--border-color);
        
        /* Smooth Dropdown Animation Setup */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-15px);
        transition: all 0.4s var(--smooth-curve);
    }
    
    /* This class is triggered by JS */
    .nav-center.mobile-active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        padding: 10px 0 20px 0;
    }

    .nav-links {
        flex-direction: column;
        gap: 0;
        align-items: center;
    }
    
    .nav-links li { width: 100%; text-align: center; }
    
    .nav-link {
        display: block;
        padding: 15px 20px;
        font-size: 1.1rem;
        border-bottom: 1px solid var(--bg-soft);
    }
    
    /* Remove the bottom underline animation for mobile */
    .nav-link::after { display: none; }
    
    .nav-link:hover, .nav-link.active {
        background-color: var(--bg-soft);
        color: var(--accent);
    }
}

@media (max-width: 768px) {
    .footer-desc { font-size: 0.85rem; text-align: justify; }
    .footer-links { gap: 15px; flex-direction: column; }
    .breaking-label { padding: 4px 8px; font-size: 0.7rem; }
}

/* =========================================
   SEARCH DROPDOWN LOGIC
   ========================================= */
.search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-bar-container {
    position: absolute;
    top: calc(100% + 25px); /* Positioned just below the navbar */
    right: 0;
    width: 360px;
    background: var(--primary-light);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 15px;
    z-index: 2000;
    
    /* Animation initial state */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-15px);
    transition: all 0.4s var(--smooth-curve);
}

/* Activated state via JS */
.search-bar-container.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.search-form {
    display: flex;
    gap: 10px;
}

#search-input {
    flex-grow: 1;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-main);
    outline: none;
    transition: border-color 0.3s var(--smooth-curve), box-shadow 0.3s;
}

#search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1);
}

#search-submit {
    background: var(--primary-dark);
    color: white;
    border: none;
    padding: 0 20px;
    border-radius: 2px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s var(--bounce-curve);
}

#search-submit:hover {
    background: var(--accent);
    transform: translateY(-2px);
}

/* Mobile Adjustments for Search */
@media (max-width: 768px) {
    .search-bar-container {
        position: fixed; /* Fix to top on mobile */
        top: 90px;
        right: 0;
        left: 0;
        width: 100%;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

/* =========================================
   LIVE SEARCH RESULTS
   ========================================= */
/* --- Live Search Dropdown Results --- */
.search-quick-results {
    margin-top: 15px;
    max-height: 350px;
    overflow-y: auto;
    border-top: 1px solid var(--border-color);
}

.search-result-item {
    display: flex;
    flex-direction: column;
    padding: 12px 10px;
    border-bottom: 1px solid var(--bg-soft);
    text-decoration: none;
    transition: background 0.2s;
}

.search-result-item:hover { background: var(--bg-soft); }

.result-cat {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.result-title {
    font-size: 0.95rem;
    color: var(--text-main);
    font-weight: 500;
    line-height: 1.3;
}

.no-results, .search-loading {
    padding: 20px 10px;
    font-size: 0.9rem;
    color: var(--text-muted);
    text-align: center;
    font-style: italic;
}

/* =========================================
   NEWSLETTER SECTION & ANIMATIONS
   ========================================= */
.newsletter-section { padding: 25px 0 65px 0; background-color: var(--primary-light); }

.newsletter-box {
    background-color: #1a1a1a;
    border-radius: 8px;
    padding: 70px 60px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

/* Floating animation for the background shapes */
@keyframes floatShape {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(2deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

.bg-circle-solid {
    position: absolute; width: 550px; height: 550px;
    background-color: #242424; border-radius: 50%;
    top: -150px; right: -100px; z-index: 1;
    animation: floatShape 12s ease-in-out infinite;
}

.bg-circle-hollow {
    position: absolute; width: 280px; height: 280px;
    border: 25px solid #3a1c1c; border-radius: 50%;
    bottom: -100px; right: 180px; z-index: 2;
    animation: floatShape 15s ease-in-out infinite reverse;
}

.newsletter-content { position: relative; z-index: 10; max-width: 600px; }
.newsletter-label { color: var(--accent); font-size: 0.75rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 20px; display: block; }
.newsletter-title { color: #ffffff; font-family: var(--font-heading); font-size: 2.8rem; line-height: 1.2; margin-bottom: 20px; }
.newsletter-desc { color: #d1d5db; font-size: 1.05rem; line-height: 1.6; margin-bottom: 35px; }
.newsletter-form { display: flex; gap: 15px; }

#newsletter-email {
    flex-grow: 1; padding: 16px 20px; border: none; border-radius: 4px;
    font-family: var(--font-body); font-size: 1rem; color: #333; outline: none;
    transition: box-shadow 0.3s var(--smooth-curve);
}
#newsletter-email:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.3); }

#newsletter-submit {
    background-color: var(--accent); /* CPCS Red */
    color: #ffffff;
    border: none;
    padding: 0 40px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    /* Clean, understated color fade */
    transition: background-color 0.2s ease-in-out;
}

/* Professional Hover: Just a slightly darker flat red */
#newsletter-submit:hover {
    background-color: #a82e21; 
}

/* Professional Active: Instant darker feedback, no shrinking/scaling */
#newsletter-submit:active {
    background-color: #8c261b;
}

#newsletter-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #666;
}

/* =========================================
   FOOTER DIVIDER FIX
   ========================================= */
.site-footer {
    background-color: var(--primary-light);
    padding: 60px 20px 30px;
    text-align: center;
    border-top: 1px solid var(--border-color); /* Added the divider line here */
}

/* =========================================
   PROFESSIONAL TOAST POPUP (BOTTOM RIGHT)
   ========================================= */
.toast-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 15px;
    pointer-events: none;
}

.toast-box {
    background: var(--primary-dark);
    border-left: 4px solid var(--accent);
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
    border-radius: 4px;
    width: 320px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    pointer-events: auto;
    
    /* Premium hardware-accelerated slide-in */
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s ease;
}

.toast-box.show { transform: translateX(0); opacity: 1; }
.toast-box.success { border-left-color: #27ae60; }

.toast-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.toast-title { font-weight: 700; font-size: 0.95rem; color: var(--accent); }
.toast-box.success .toast-title { color: #27ae60; }

.toast-close { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--text-muted); transition: color 0.2s; }
.toast-close:hover { color: var(--primary-dark); }
.toast-message { font-size: 0.9rem; color: var(--primary-light); line-height: 1.4; }

/* Auto-Vanish Loader Bar */
.toast-progress { position: absolute; bottom: 0; left: 0; height: 3px; width: 100%; background: #f0f0f0; }
.toast-progress-bar { height: 100%; width: 100%; animation: vanishLoad 5s linear forwards; background: var(--accent); }
.toast-box.success .toast-progress-bar { background: #27ae60; }
@keyframes vanishLoad { from { width: 100%; } to { width: 0%; } }

/* =========================================
   HERO SLIDER SECTION (BALANCED EDITORIAL)
   ========================================= */
.hero-section {
    padding: 45px 0; /* Reduced from 70px to bring the section together */
    width: 100%;
}

.hero-slider-viewport {
    overflow: hidden; 
    position: relative;
    width: 100%;
    max-width: 1150px; 
    margin: 0 auto;
}

.hero-slider-track {
    display: flex;
    width: 100%;
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1); 
}

.hero-slide {
    flex: 0 0 100%; 
    min-width: 100%;
    display: flex;
    gap: 55px; /* Tighter gap between image and text */
    align-items: stretch; 
    box-sizing: border-box;
}

/* --- Image Side --- */
.hero-image-wrapper {
    flex: 0 0 55%; 
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    /* Perfectly balanced height: Shorter than 4/3, taller than 16/9 */
    aspect-ratio: 16 / 10; 
    
    /* REMOVED box-shadow: This fixes the weird shadow bleeding onto the text! */
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.hero-image-wrapper:hover .hero-image {
    transform: scale(1.04); 
}

/* --- Arrows --- */
.hero-nav {
    position: absolute;
    bottom: 25px;
    left: 25px;
    display: flex;
    gap: 8px;
    z-index: 10;
}

.hero-arrow {
    background: rgba(15, 15, 15, 0.7); 
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 42px; 
    height: 42px;
    border-radius: 2px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
}

.hero-arrow svg { width: 14px; height: 14px; fill: #ffffff; }

.hero-arrow:hover {
    background: var(--accent);
    border-color: var(--accent);
}

/* --- Content Side --- */
.hero-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-right: 15px;
    padding-top: 10px; 
    padding-bottom: 15px; 
}

.hero-tag {
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 15px; 
}

.hero-title {
    font-family: var(--font-heading);
    font-size: 2.4rem; /* Balanced size */
    line-height: 1.2; 
    color: var(--primary-dark);
    margin-bottom: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hero-summary {
    color: var(--text-muted);
    font-size: 1rem; 
    line-height: 1.6; 
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hero-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #777;
    font-size: 0.9rem; 
    margin-bottom: 25px;
}

.hero-separator { color: #ccc; font-size: 0.7rem; }

.hero-action-area {
    border-top: 1px solid var(--border-color);
    padding-top: 25px;
    margin-top: auto; 
}

.hero-btn {
    display: inline-block;
    padding: 12px 28px; 
    border: 1px solid var(--primary-dark);
    color: var(--primary-dark);
    background: transparent;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem; 
    transition: all 0.3s ease;
}

.hero-btn:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

/* --- Section Divider --- */
.section-divider { display: flex; align-items: center; justify-content: space-around; margin: 35px 0; }
.divider-line { height: 0.5px; background-color: var(--primary-dark); flex-grow: 1; max-width: 47%; }
.divider-diamond { width: 6px; height: 6px; background-color: var(--primary-dark); transform: rotate(45deg); margin: 0 15px; }

/* =========================================
   MOBILE RESPONSIVENESS
   ========================================= */
@media (max-width: 992px) {
    .hero-slide { flex-direction: column; gap: 30px; align-items: flex-start; }
    .hero-image-wrapper { flex: 0 0 auto; width: 100%; aspect-ratio: 16/10; }
    .hero-content { padding-right: 0; text-align: left; width: 100%; padding-top: 0; }
    .hero-title { font-size: 2.1rem; } 
    .hero-action-area { margin-top: 20px; } 
    
    .hero-nav { bottom: auto; top: 40%; transform: translateY(-50%); width: 100%; left: 0; justify-content: space-between; padding: 0 15px; box-sizing: border-box; pointer-events: none; }
    .hero-arrow { pointer-events: auto; background: rgba(0,0,0,0.6); } 
}

/* =========================================
   LATEST ARTICLES SECTION (STRICT LAYOUT MATCH)
   ========================================= */
.latest-articles-section {
    padding: 15px 0 60px 0;
    width: 100%;
}

/* Locks the width to exactly match the 1150px hero section */
.latest-articles-wrapper {
    max-width: 1150px;
    margin: 0 auto;
    width: 100%;
    padding: 20px; /* This padding ensures the hover shadow isn't clipped by the container */
}

/* --- Header & Filter Buttons --- */
.latest-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.latest-title-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* The distinct vertical red line from the screenshot */
.latest-divider {
    width: 3px;
    height: 30px;
    background-color: var(--accent);
}

.section-title {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    color: var(--primary-dark);
    line-height: 1;
    margin: 0;
}

.filter-buttons {
    display: flex;
    gap: 10px;
}

.filter-btn {
    padding: 6px 16px;
    border: 1px solid #d1d5db;
    border-radius: 20px;
    background: transparent;
    color: #4b5563;
    font-size: 0.75rem;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-btn:hover {
    border-color: var(--primary-dark);
    color: var(--primary-dark);
}

.filter-btn.active {
    background: var(--primary-dark);
    color: #ffffff;
    border-color: var(--primary-dark);
}

/* --- Article Grid --- */
.article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 30px; /* Exact spacing from the screenshot */
}

/* --- The Contained Card Structure --- */
.article-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 8px; /* Rounded corners for the whole box */
    overflow: hidden; /* Ensures the image stays inside the rounded corners */
    transition: all 0.3s ease;
}

/* The Hover Shadow Effect */
.article-card:hover {
    /* This matches the soft, elegant shadow on the middle card in your screenshot */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    transform: translateY(-5px);
}

/* --- Card Image --- */
.article-img-wrapper {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    margin-bottom: 0; /* Resetting margin so padding handles the gap */
}

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

.article-card:hover .article-img {
    transform: scale(1.03); /* Subtle zoom on hover */
}

/* --- Card Content & Padding --- */
.article-content {
    padding: 25px 25px 25px 25px; /* Perfect spacing inside the border */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.article-cat {
    color: var(--accent); /* CPCS Red */
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.article-title {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    line-height: 1.25;
    margin-bottom: 15px;
}

.article-title a {
    color: var(--primary-dark);
    text-decoration: none;
    transition: color 0.2s;
}

.article-title a:hover {
    color: var(--accent);
}

.article-summary {
    text-align: left; /* Reverted back to strict left-align */
    color: #6b7280;
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1; 
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Card Footer & Divider Line --- */
.article-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    padding-bottom: 5px;
    border-top: 1px solid #f3f4f6; /* The faint grey horizontal line from the image */
    font-size: 0.9rem;
    color: var(--text-muted);
}

.article-date {
    color: var(--text-muted);
}

.article-read-link {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
    font-weight: 500;
}

/* Only turns red when hovering over the card */
.article-card:hover .article-read-link {
    color: var(--accent); 
}

/* =========================================
   MOBILE RESPONSIVENESS (2-COLUMN GRID)
   ========================================= */
@media (max-width: 992px) {
    .article-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 20px;
    }
}

@media (max-width: 768px) {
    .latest-articles-section {
        padding: 25px 10px; /* Reduced side padding to give cards more room */
    }

    .latest-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    /* FIX: Force 2 columns even on small mobile screens */
    .article-grid {
        grid-template-columns: repeat(2, 1fr); 
        gap: 25px 15px; /* Tighter gap for small screens */
    }

    /* Reduce internal card padding so text fits in 2-column layout */
    .article-content {
        padding: 12px 10px 15px 10px; 
    }

    .article-title {
        font-size: 1.1rem; /* Smaller titles so they don't break lines awkwardly */
        margin-bottom: 8px;
    }

    .article-summary {
        font-size: 0.85rem; /* Smaller summary text */
        -webkit-line-clamp: 2; /* Show fewer lines to keep heights consistent */
    }

    .article-footer {
        font-size: 0.75rem;
    }

    /* Keep filter buttons swipeable */
    .filter-buttons {
        display: flex;
        overflow-x: auto;
        width: 100%;
        padding-bottom: 8px;
        gap: 6px;
        -webkit-overflow-scrolling: touch;
    }

    .filter-btn {
        white-space: nowrap;
        padding: 5px 12px;
        font-size: 0.75rem;
    }
}

/* Extra small devices (iPhone SE, etc.) */
@media (max-width: 400px) {
    .article-grid {
        gap: 20px 10px;
    }
    .article-title {
        font-size: 1rem;
    }
}

/* --- View All Articles Link (Strict Screenshot Match) --- */
.view-all-container {
    display: flex;
    justify-content: flex-end; 
    margin-top: 50px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--text-muted); 
}

/* --- View All Articles Link (Normal Weight & Size) --- */
.view-all-link {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--primary-dark);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color 0.3s;
}

.view-all-link:hover { color: var(--accent); }
.view-all-link .arrow { transition: transform 0.3s ease; font-weight: 400 !important; }
.view-all-link:hover .arrow { transform: translateX(6px); }

/* =========================================
   CORE MANDATE SECTION
   ========================================= */
.core-mandate-section {
    background-color: var(--accent); /* Uses your CPCS Red */
    padding: 75px 0; /* Deep padding for a grand feel */
    width: 100%;
}

.mandate-wrapper {
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Top Content --- */
.mandate-top {
    max-width: 650px; /* Constrains text to the left side like the screenshot */
    margin-bottom: 70px;
}

.mandate-tag {
    display: block;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.mandate-title {
    font-family: var(--font-heading);
    font-size: 4rem; /* Huge, elegant serif heading */
    line-height: 1.1;
    color: #ffffff;
    margin: 0;
}

.mandate-line {
    width: 60px;
    height: 3px;
    background-color: #ffffff;
    margin: 35px 0;
}

.mandate-desc {
    color: #ffffff;
    font-size: 1.15rem;
    line-height: 1.6;
    font-weight: 400;
}

/* --- The Grid & Borders --- */
.mandate-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* The faint white top line spanning the whole grid */
    border-top: 1px solid rgba(255, 255, 255, 0.25); 
}

/* --- The Interactive Cards --- */
.mandate-card {
    position: relative;
    padding: 40px 30px 60px 30px;
    /* The faint vertical divider lines */
    border-right: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff; /* Default text is white */
    background: transparent;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 1; /* Base layer */
    display: flex;
    flex-direction: column;
}

/* Removes the right border from the last column */
.mandate-card:last-child {
    border-right: none;
}

/* --- Card Typography --- */
.mandate-num {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    margin-bottom: 30px;
    color: inherit; /* Inherits white or red based on hover state */
}

.mandate-card-title {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    line-height: 1.25;
    margin-bottom: 20px;
    color: inherit;
}

.mandate-card-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: inherit;
    flex-grow: 1;
}

/* --- The Hidden Arrow --- */
.mandate-arrow {
    position: absolute;
    bottom: 35px;
    right: 35px;
    font-size: 1.5rem;
    opacity: 0; /* Hidden by default */
    transform: translateX(-15px); /* Prepped to slide in */
    color: inherit;
    transition: all 0.4s ease;
}

/* =========================================
   THE SCREENSHOT HOVER EFFECT
   ========================================= */
.mandate-card:hover {
    background-color: #ffffff; /* Card turns white */
    color: var(--accent); /* Text turns red */
    transform: scale(1.06); /* Pops out of the grid constraints */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2); /* Deep shadow */
    z-index: 10; /* Ensures it covers the border lines */
    border-radius: 4px;
}

/* Arrow slides in and becomes visible */
.mandate-card:hover .mandate-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* =========================================
   MOBILE RESPONSIVENESS
   ========================================= */
@media (max-width: 1024px) {
    .mandate-title { font-size: 3rem; }
    .mandate-grid { grid-template-columns: repeat(2, 1fr); border-top: none; }
    .mandate-card { border-top: 1px solid rgba(255,255,255,0.25); }
    .mandate-card:nth-child(2) { border-right: none; }
}

@media (max-width: 768px) {
    .core-mandate-section { padding: 45px 0; }
    .mandate-title { font-size: 2.2rem; }
    .mandate-grid { grid-template-columns: 1fr; }
    .mandate-card { border-right: none; padding: 30px 20px 45px 20px; }
}

/* =========================================
   UPCOMING EVENTS SECTION
   ========================================= */
.upcoming-events-section {
    padding: 70px 0 30px 0;
    width: 100%;
    background-color: #ffffff;
}

.events-wrapper {
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Header Area --- */
.events-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Aligns text to the bottom of the line */
    border-bottom: 1px solid #e5e7eb; /* The faint line from the screenshot */
    padding-bottom: 50px;
    margin-bottom: 40px;
}

.events-title-group {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* FIX: The missing vertical red accent bar */
.header-accent-line {
    width: 4px;
    height: 34px;
    background-color: var(--accent); /* Pulls your CPCS red */
}

.calendar-link {
    font-size: 0.9rem;
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.2s ease;
}

.calendar-link:hover {
    color: var(--accent);
}

/* --- Events Grid --- */
.events-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* --- Event Card --- */
.event-card {
    display: flex;
    flex-direction: column;
    height: 80%;
    background: #ffffff;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02); /* Very faint default shadow */
}

.event-card:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08); /* Lifts up on hover */
    transform: translateY(-5px);
    border: 1px solid var(--text-main);
}

/* --- Image & Badge --- */
.event-img-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 12;
    overflow: hidden;
}

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

.event-card:hover .event-img {
    transform: scale(1.04);
}

.event-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: var(--accent); /* CPCS Red */
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 5px 10px;
    border-radius: 2px;
    z-index: 2;
}

/* --- Card Content --- */
.event-content {
    padding: 25px 25px 30px 25px; /* Slightly more bottom padding */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.event-date {
    font-size: 0.8rem;
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.event-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    line-height: 1.3;
    margin-bottom: 20px;
    
    /* FIX 1: Locks the title to exactly 2 lines of vertical height */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3.9rem; /* (1.5rem * 1.3) * 2 lines = 3.9rem */
}

.event-title a {
    color: var(--primary-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}

.event-title a:hover {
    color: var(--accent);
}

/* --- Status & Meta (Adding Pulse Animation) --- */
.event-status {
    display: flex;
    align-items: center;
    gap: 12px; /* Slightly wider gap to accommodate the pulse */
    color: var(--accent); 
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

/* The central, solid red dot */
.status-dot {
    width: 8px;
    height: 8px;
    background-color: var(--accent);
    border-radius: 50%;
    /* We need relative positioning so the expanding ring knows where to start */
    position: relative; 
    z-index: 1;
}

/* The expanding, fading ring effect */
.status-dot::after {
    content: '';
    position: absolute;
    /* Center the ring perfectly behind the dot */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    width: 100%; /* Starts the same size as the dot */
    height: 100%;
    background-color: var(--accent); /* Same CPCS red color */
    border-radius: 50%;
    opacity: 0.7; /* Starts slightly transparent */
    z-index: -1; /* Places it behind the main dot */
    
    /* The animation definition: 2 seconds long, loops forever */
    animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

/* Defining the animation keyframes */
@keyframes pulse-ring {
    0% {
        transform: translate(-50%, -50%) scale(0.8); /* Starts slightly smaller */
        opacity: 0.7;
    }
    100% {
        transform: translate(-50%, -50%) scale(3); /* Expands to 3x size */
        opacity: 0; /* Fades completely away */
    }
}

.event-meta {
    color: #9ca3af;
    font-size: 0.85rem;
    margin-bottom: 25px;
}

/* --- Action Link --- */
.event-action {
    /* FIX 2: Pushes the link to the absolute bottom edge of the card */
    margin-top: auto; 
    
    font-size: 0.8rem;
    font-weight: 800;
    color: #1a1a1a;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.3s ease;
}

.event-action .arrow {
    font-size: 1rem;
    font-weight: normal;
    transition: transform 0.3s ease;
}

.event-action:hover {
    color: var(--accent);
}

.event-action:hover .arrow {
    transform: translateX(4px);
}

/* --- Mobile Responsiveness --- */
@media (max-width: 992px) {
    .events-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .events-grid { grid-template-columns: 1fr; gap: 30px; }
    .events-header { flex-direction: column; align-items: flex-start; gap: 15px; }
    .article-summary {
        font-size: 0.85rem;
        line-height: 1.5;
        /* Optional: If you find justification too crowded on mobile, 
           you can switch it back to left-align here */
        /* text-align: left; */
    }
    .newsletter-box {
        padding: 40px 20px; /* Drastically reduces side padding to free up screen space */
    }

    .newsletter-title {
        font-size: 2rem; /* Scales down the title so words don't break awkwardly */
    }

    .newsletter-form {
        flex-direction: column; /* Forces the button to stack underneath the input */
        width: 100%;
    }

    #newsletter-submit {
        width: 100%; /* Makes the button span the full width of the box */
        padding: 16px 0; /* Matches the vertical height of the email input */
    }
    
    /* Optional: Hide or shrink the background shapes so they don't cause horizontal scrolling */
    .bg-circle-solid {
        width: 300px; height: 300px; top: -50px; right: -50px;
    }
    .bg-circle-hollow {
        width: 150px; height: 150px; bottom: -50px; right: -20px; border-width: 10px;
    }
}
/* --- Search Dropdown View All Link --- */
.search-view-all {
    display: block;
    padding: 15px 10px;
    text-align: center;
    
    /* FIX: Set to 700 for Bold, 600 for Semi-Bold, or 400 for Normal */
    font-family: var(--font-body); 
    font-weight: 300 !important; /* 800 is Extra Bold */

    font-size: 0.9rem;
    color: var(--accent); /* CPCS Red */
    background: #ffffff;
    text-decoration: none;
    border-top: 1px solid var(--border-color);
    transition: background 0.2s ease, color 0.2s ease;
}

.search-view-all:hover {
    background: var(--bg-soft);
    color: var(--primary-dark);
}

/* =========================================
   ABOUT US PAGE - INTRO SECTION
   ========================================= */
.about-intro-section {
    padding: 100px 0 80px 0; /* Deep padding to clear the navbar elegantly */
    background-color: var(--primary-light);
}

.about-intro-wrapper {
    max-width: 1050px; /* Slightly narrower than the global container for ideal reading width */
    margin: 0 auto;
    padding: 0 20px;
}

/* Premium Entry Animation */
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

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

/* --- Header Styling --- */
.intro-header {
    margin-bottom: 55px;
}

.intro-tag {
    display: block;
    color: var(--accent); /* CPCS Red */
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.intro-title {
    font-family: var(--font-heading);
    font-size: 3.5rem; /* Massive, authoritative serif font */
    line-height: 1.1;
    color: var(--primary-dark);
    margin: 0 0 35px 0;
    letter-spacing: -0.5px; /* Pulls the letters slightly tighter for impact */
}

/* The thick red horizontal line */
.intro-divider {
    width: 65px;
    height: 5px;
    background-color: var(--accent);
}

/* --- Two-Column Layout --- */
.intro-content-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 70px; /* Wide gap between columns just like the screenshot */
}

.intro-text-column p {
    color: #374151; /* A rich, readable dark gray */
    font-size: 1rem;
    line-height: 1.8; /* Tall line-height for easy reading */
    font-weight: 400;
}

/* --- The Editorial Drop Cap --- */
.drop-cap {
    float: left;
    font-family: var(--font-heading);
    font-size: 3.5rem;
    line-height: 0.8;
    padding-top: 2px;
    margin-right: 10px;
    color: var(--primary-dark);
    font-weight: 700;
}

/* =========================================
   ABOUT US PAGE - MOBILE RESPONSIVENESS
   ========================================= */
@media (max-width: 992px) {
    .intro-title {
        font-size: 3.5rem;
    }
    .intro-content-grid {
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .about-intro-section {
        padding: 60px 0 40px 0;
    }
    .intro-title {
        font-size: 2.5rem;
    }
    /* Stacks the two columns into a single column on phones */
    .intro-content-grid {
        grid-template-columns: 1fr; 
        gap: 25px;
    }
    .drop-cap {
        font-size: 4rem;
        padding-top: 4px;
        padding-right: 10px;
    }
}

/* =========================================
   ABOUT US - MANDATE OVERLAP SECTION
   ========================================= */
.about-mandate-section {
    padding: 100px 0;
    background-color: #ffffff;
}

.mandate-overlap-wrapper {
    display: grid;
    /* 12-column grid for precise, wide-scale overlapping */
    grid-template-columns: repeat(12, 1fr); 
    align-items: center; /* Centers them vertically */
    max-width: 1900px; /* Widened slightly to match the grandeur of the screenshot */
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Left Image Box styling --- */
.mandate-image-box {
    grid-column: 1 / 9; /* Image takes up 8 columns (approx 66% width) */
    grid-row: 1;
    position: relative;
    height: 550px; /* Taller, more dominant image */
    overflow: hidden; 
    border-radius: 2px;
    z-index: 1; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* Soft shadow for the image itself */
}

.mandate-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), filter 0.8s ease;
}

/* Hover Effect: Zoom and Contrast */
.mandate-image-box:hover .mandate-image {
    transform: scale(1.05);
    filter: none;
}

/* --- Right Dark Content Box styling --- */
.mandate-content-box {
    grid-column: 7 / 13; /* Overlaps columns 7 and 8, extends to the edge */
    grid-row: 1;
    background-color: #1a1a1a; /* Exact dark gray/black from screenshot */
    
    padding: 55px 60px; /* Deep, generous padding */
    
    color: #ffffff;
    z-index: 2; 
    position: relative;
    
    /* The crucial deep shadow that gives the 3D overlapping effect */
    box-shadow: -15px 25px 50px rgba(0,0,0,0.35); 
    border-radius: 2px;
}

/* The red bar attached directly to the top edge */
.mandate-accent-bar {
    position: absolute;
    top: 0;
    left: 60px; /* Aligns perfectly with the 60px padding */
    width: 50px; /* Short and thick like the screenshot */
    height: 4px;
    background-color: var(--accent);
}

/* Typography matching the screenshot */
.mandate-small-tag {
    display: block;
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 17px;
}

.mandate-title {
    font-family: var(--font-heading);
    font-size: 2.8rem; /* Massive and authoritative */
    line-height: 1.15;
    margin-bottom: 23px; 
    color: #ffffff;
    letter-spacing: -0.5px;
}

.mandate-desc {
    color: var(--primary-light); /* A softer, muted grey for readability */
    font-size: 1rem; 
    line-height: 1.7;
    margin-bottom: 35px; 
    font-weight: 300; /* Thinner font weight for elegance */
}

.mandate-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.1); /* Very faint line */
    margin-bottom: 30px; 
}

/* --- Stats Grid Sizing --- */
.mandate-stats-grid {
    display: flex;
    justify-content: space-between; /* Spreads the stats nicely across the bottom */
    gap: 20px; 
}

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

.stat-number {
    font-family: var(--font-heading);
    font-size: 2.2rem; 
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 8px;
}

.stat-label {
    color: #71717a; /* Muted grey matching the screenshot */
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 992px) {
    .mandate-overlap-wrapper { grid-template-columns: 1fr; gap: 0; padding: 0 20px; }
    .mandate-image-box { grid-column: 1; grid-row: 1; height: 450px; box-shadow: none; }
    .mandate-content-box { 
        grid-column: 1; 
        grid-row: 2; 
        margin-top: -60px; /* Pulls the dark box up over the image on mobile */
        margin-left: 15px; 
        margin-right: 15px; 
        padding: 50px 40px; 
        box-shadow: 0 15px 40px rgba(0,0,0,0.25);
    }
    .mandate-accent-bar { left: 40px; }
}

@media (max-width: 768px) {
    .mandate-content-box { margin-left: 0; margin-right: 0; padding: 40px 25px; }
    .mandate-accent-bar { left: 25px; }
    .mandate-title { font-size: 2.2rem; }
    .mandate-stats-grid { flex-direction: column; gap: 20px; }
}

/* =========================================
   ABOUT US - OUR PILLARS SECTION
   ========================================= */
.about-pillars-section {
    padding: 100px 0;
    background-color: #ffffff; /* Clean white background */
}

/* --- Header Styling --- */
.pillars-header {
    margin-bottom: 60px;
}

.pillars-tag {
    display: block;
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.pillars-title {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    line-height: 1.1;
    color: var(--primary-dark);
    margin-bottom: 25px;
    letter-spacing: -0.5px;
}

.pillars-divider {
    width: 80px;
    height: 5px;
    background-color: var(--accent);
}

/* --- The 2x2 Grid Structure --- */
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border: 1px solid #e5e7eb; /* The outer grid border */
    background: #ffffff;
}

.pillar-card {
    padding: 65px 55px;
    position: relative;
    background: #ffffff;
    
    /* Internal grid lines */
    border-right: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    
    /* Smooth animation for the hover pop-out */
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1; 
}

/* Removes extra borders so the grid lines stay razor thin */
.pillar-card:nth-child(2n) { border-right: none; }
.pillar-card:nth-child(3),
.pillar-card:nth-child(4) { border-bottom: none; }

/* --- Card Typography (Default White State) --- */
.pillar-number {
    display: block;
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.05); 
    line-height: 1;
    margin-bottom: 25px;
    transition: color 0.4s ease;
}

.pillar-card-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: var(--primary-dark);
    margin-bottom: 20px;
    transition: color 0.4s ease;
}

.pillar-card-desc {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #6b7280;
    /* FIX: Removed font-weight transition so the text NEVER jumps or resizes */
    transition: color 0.4s ease; 
}

/* =========================================
   THE HOVER EFFECT (Morphism & Red Glow)
   ========================================= */
.pillar-card:hover {
    /* FIX: Uses a 95% solid red to allow a tiny bit of glassmorphism translucency */
    background-color: color-mix(in srgb, var(--accent) 95%, transparent);
    
    /* Adds the soft glassmorphism blur behind the card */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    transform: scale(1.02); 
    z-index: 10; 
    
    /* FIX: Replaced the harsh black shadow with a rich, glowing red "morphism" shadow */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08), 0 20px 40px color-mix(in srgb, var(--accent) 35%, transparent); 
    
    border-radius: 4px; /* A slight rounding enhances the floating glass effect */
    border-color: transparent; 
}

/* Inverts the text colors when hovered */
.pillar-card:hover .pillar-number {
    color: rgba(255, 255, 255, 0.35); 
}

.pillar-card:hover .pillar-card-title,
.pillar-card:hover .pillar-card-desc {
    color: #ffffff; 
    /* Notice: No font-weight change here anymore, keeping the layout perfectly still! */
}

/* --- Mobile Responsiveness --- */
@media (max-width: 992px) {
    .pillars-grid {
        grid-template-columns: 1fr; /* Stacks into a single column */
        border: none;
    }
    .pillar-card {
        border: 1px solid #e5e7eb;
        margin-bottom: 20px;
    }
    /* Restores borders for stacked layout */
    .pillar-card:nth-child(2n),
    .pillar-card:nth-child(3),
    .pillar-card:nth-child(4) {
        border: 1px solid #e5e7eb; 
    }
    .pillars-title { font-size: 2.8rem; }
}

@media (max-width: 768px) {
    .pillar-card { padding: 40px 30px; }
    .pillars-title { font-size: 2.3rem; }
    .pillar-number { font-size: 2.8rem; }
}

/* =========================================
   ABOUT US - OUR HISTORY SECTION (Left-Aligned & Indented)
   ========================================= */
.about-history-section {
    padding: 120px 0;
    background-color: #111111; 
    color: #ffffff;
}

.history-wrapper {
    /* FIX: Removed max-width and auto-margins so it expands fully to match your logo's container edge */
    width: 100%; 
}

/* --- Header Alignment (Flush Left) --- */
.history-header {
    display: flex;
    align-items: stretch; 
    margin-bottom: 70px;
}

.history-accent-line {
    width: 4px;
    background-color: var(--accent);
    /* FIX: 0px left margin guarantees it aligns pixel-perfectly with the CPCS logo above it */
    margin-left: 0; 
    margin-right: 32px; 
    flex-shrink: 0;
}

.history-title {
    font-family: var(--font-heading);
    font-size: 3.2rem;
    line-height: 1.1;
    color: #ffffff;
    margin-bottom: 5px;
    letter-spacing: -0.5px;
}

.history-subtitle {
    font-size: 1.1rem;
    color: #a1a1aa;
    font-weight: 400;
}

/* --- Timeline Indentation (The "Tab Space") --- */
.timeline-container {
    position: relative;
    /* FIX: This pushes the entire timeline (dots, line, and text) inwards by one large tab space */
    margin-left: 60px; 
}

/* The continuous grey line */
.timeline-continuous-line {
    position: absolute;
    top: 5px;
    bottom: 0;
    left: 5px; /* Sits perfectly in the center of the 12px dot */
    width: 2px;
    background-color: rgba(255, 255, 255, 0.15);
    z-index: 1;
}

/* --- Individual Item Layout --- */
.timeline-item {
    display: flex;
    align-items: flex-start;
    padding-bottom: 60px;
    position: relative;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

/* The Timeline Dots */
.timeline-marker {
    width: 12px;
    height: 12px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    background-color: #111111; 
    margin-left: 0;
    margin-right: 35px; /* Space between the dot and the text */
    margin-top: 5px; 
    flex-shrink: 0;
    position: relative;
    z-index: 2; 
    transition: all 0.4s ease;
}

/* The Content Block */
.timeline-content {
    opacity: 0.65;
    transition: opacity 0.4s ease;
}

.timeline-year {
    display: block;
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.timeline-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: #ffffff;
    margin-bottom: 15px;
}

.timeline-desc {
    color: #a1a1aa;
    font-size: 0.95rem;
    line-height: 1.7;
    max-width: 650px; /* Limits the paragraph width so it remains easy to read */
    font-weight: 300;
}

/* =========================================
   HOVER & ACTIVE EFFECTS
   ========================================= */
.timeline-item:hover .timeline-content,
.timeline-item.active .timeline-content {
    opacity: 1; 
}

.timeline-item:hover .timeline-marker,
.timeline-item.active .timeline-marker {
    background-color: var(--accent); 
    box-shadow: 0 0 12px rgba(220, 38, 38, 0.5); 
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    .about-history-section { padding: 80px 0; }
    .history-title { font-size: 2.5rem; }
    .timeline-title { font-size: 1.7rem; }
    
    /* Reduces the tab indent on mobile so it fits the screen */
    .timeline-container { margin-left: 20px; }
    .history-accent-line { margin-right: 22px; }
    .timeline-marker { margin-right: 20px; }
}

/* =========================================
   ABOUT US - BOARD OF DIRECTORS (No-Image Layout)
   ========================================= */
.about-team-section {
    padding: 120px 0;
    background-color: #ffffff; /* Clean white to contrast with the dark history section */
}

/* --- Header Styling (Matches History Section structure) --- */
.team-header {
    display: flex;
    align-items: stretch; 
    margin-bottom: 70px;
}

.team-accent-line {
    width: 4px;
    background-color: var(--accent);
    margin-left: 0; 
    margin-right: 25px; 
    flex-shrink: 0;
}

.team-title {
    font-family: var(--font-heading);
    font-size: 3.2rem;
    line-height: 1.1;
    color: var(--primary-dark);
    margin: 0;
    letter-spacing: -0.5px;
    align-self: center; /* Vertically centers text with the line */
}

/* --- 3-Column Grid Layout --- */
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

/* --- Typographic Cards --- */
.team-member-card {
    position: relative;
    background: #ffffff;
    padding: 45px 35px;
    border: 1px solid #e5e7eb; /* Faint structural border */
    border-radius: 2px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 1;
}

/* The animating top border */
.card-top-border {
    position: absolute;
    top: -1px; /* Overlaps the main border */
    left: 0;
    height: 3px;
    width: 0%; /* Starts at 0 width */
    background-color: var(--accent);
    transition: width 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Typography inside cards */
.member-name {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: var(--primary-dark);
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.member-title {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #9ca3af; /* Soft grey default */
    margin-bottom: 25px;
    transition: color 0.3s ease;
}

.member-bio {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #4b5563; /* Readable dark grey */
    font-weight: 300;
}

/* =========================================
   THE HOVER EFFECT (Premium Editorial Lift)
   ========================================= */
.team-member-card:hover {
    transform: translateY(-8px); /* Subtle lift */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); /* Soft drop shadow */
    border-color: transparent; /* Hides the grey border so the shadow pops */
    z-index: 2;
}

/* Paints the top red border across the card */
.team-member-card:hover .card-top-border {
    width: 100%; 
}

/* Text color shifts for focus */
.team-member-card:hover .member-title {
    color: var(--accent); /* Title turns red */
}

.team-member-card:hover .member-name {
    color: #000000; /* Name gets slightly darker/sharper */
}

/* --- Mobile Responsiveness --- */
@media (max-width: 992px) {
    .team-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .about-team-section { padding: 80px 0; }
    .team-title { font-size: 2.5rem; }
    .team-grid { grid-template-columns: 1fr; gap: 25px; }
    .team-member-card { padding: 35px 25px; }
}

/* =========================================
   ARTICLES ARCHIVE PAGE (Premium Editorial Layout)
   ========================================= */

/* --- Split Header Styling --- */
.articles-header-section {
    padding: 120px 0 80px 0;
    background-color: #ffffff;
    border-bottom: 1px solid #000000; /* Heavy black line anchoring the header */
}

.articles-header-split {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 60px;
}

/* FIX: Restored normal block display */
.header-left {
    flex: 1;
    display: block; 
}

/* FIX: Hide the old separate red line div so it stops causing issues */
.header-accent-line2 {
    display: none; 
}

/* FIX: Attached the red line directly to the text block for 100% perfect alignment */
.articles-page-title {
    font-family: var(--font-heading);
    font-size: 4rem; 
    color: var(--primary-dark);
    line-height: 1.1;
    margin: 0;
    letter-spacing: -1px;
    
    /* The foolproof way to create a side-accent line */
    border-left: 6px solid var(--accent);
    padding-left: 25px; 
}

.header-right {
    flex: 1;
    max-width: 500px;
    padding-bottom: 15px; /* Aligns text beautifully with the baseline of the huge title */
}

.articles-page-desc {
    font-size: 1.15rem;
    color: #4b5563;
    line-height: 1.8;
    font-weight: 300;
    margin: 0;
    border-left: 2px solid var(--accent);
    padding-left: 20px;
}

/* --- Archive Section & Filters --- */
.research-archive-section {
    padding: 60px 0 120px 0;
    background-color: #fafafa; 
}

/* Container for the buttons */
.research-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 50px;
    border-bottom: none; /* Removed the heavy baseline */
    padding-bottom: 0; 
}

/* Restored the exact Pill-Shaped Buttons from the Home Page */
.filter-btn {
    background: transparent;
    border: 1px solid #d1d5db;
    padding: 8px 22px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #4b5563;
    cursor: pointer;
    border-radius: 30px; /* The pill shape */
    transition: all 0.3s ease;
    margin-bottom: 0; 
}

/* The red highlight effect for active/hovered states */
.filter-btn:hover,
.filter-btn.active {
    background-color: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
}

/* --- The Article Grid --- */
.research-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 50px 40px; /* More vertical space between rows */
}

/* --- High-End Article Cards (Structured & Framed) --- */
.research-card {
    background: #ffffff; /* Solid white to pop off the #fafafa background */
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e7eb; /* Crisp, architectural full border */
    border-top: 3px solid var(--accent); /* Signature CPCS Red top line */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    z-index: 1;
}

.research-card-link {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Image styling */
.research-img-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10; 
    overflow: hidden;
    border-bottom: 1px solid #e5e7eb; /* Sharp line separating image from text */
}

.research-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%); 
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), filter 0.8s ease;
}

.research-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: var(--accent);
    color: white;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 6px 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    z-index: 2;
}

/* Text Content Container */
.research-content {
    padding: 30px; /* Contains the text in a beautiful inner frame */
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
}

.research-meta-top {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.meta-cat { color: var(--accent); }
.meta-date { color: #9ca3af; }

.research-title {
    font-family: var(--font-heading);
    font-size: 1.6rem; /* Slightly tighter to fit the new framed layout perfectly */
    line-height: 1.3;
    color: var(--primary-dark);
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

.research-summary {
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 30px;
    font-weight: 300;
    flex-grow: 1; 
}

/* Bottom Footer */
.research-meta-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #e5e7eb;
    padding-top: 15px;
}

.meta-author {
    font-size: 0.85rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-style: italic;
    color: #1a1a1a;
}

.read-story-btn {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 5px;
}

.read-story-btn .arrow {
    transition: transform 0.3s ease;
}

/* =========================================
   THE PREMIUM HOVER EFFECTS
   ========================================= */
.research-card:hover {
    transform: translateY(-8px); /* Card physically lifts up */
    box-shadow: 0 25px 50px rgba(0,0,0,0.1); /* Deep, elegant drop shadow */
    border-color: transparent; /* Hides the side grey borders so it looks like it's floating */
    border-top: 3px solid var(--accent); /* Locks the red line in place */
    z-index: 10;
}

.research-card:hover .research-img {
    transform: scale(1.05);
    filter: grayscale(0%) contrast(110%); 
}

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

.research-card:hover .read-story-btn .arrow {
    transform: translateX(5px); 
}

/* --- Mobile Responsiveness --- */
@media (max-width: 992px) {
    .articles-header-split { flex-direction: column; gap: 30px; align-items: flex-start; }
    .articles-page-title { font-size: 4rem; }
    .header-right { max-width: 100%; padding-bottom: 0; }
    .research-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .articles-page-title { font-size: 3rem; }
    .research-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* =========================================
   DASHBOARD: CONFLICT MAP PAGE
   ========================================= */

/* --- Header Styling --- */
.map-header-section {
    padding: 80px 0 40px 0;
    background-color: #ffffff;
}

.map-small-tag {
    display: block;
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.map-page-title {
    font-family: var(--font-heading);
    font-size: 3rem;
    color: var(--primary-dark);
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.map-page-desc {
    font-size: 1.1rem;
    color: #6b7280;
    max-width: 800px;
    line-height: 1.6;
}

/* --- Map Dashboard Card --- */
.map-dashboard-section {
    padding-bottom: 100px;
    background-color: #ffffff;
}

.map-dashboard-card {
    display: flex;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    height: 650px; /* Fixed height for the dashboard */
    overflow: hidden;
}

/* --- Left Sidebar --- */
.map-sidebar {
    width: 350px;
    flex-shrink: 0;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    background: #fafafa;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #9ca3af;
}

.online-status {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #4b5563;
    border: 1px solid #d1d5db;
    padding: 3px 8px;
    border-radius: 20px;
}

/* Filters */
.map-filters {
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 1px solid #e5e7eb;
}

.map-filter-btn {
    background: #ffffff;
    border: 1px solid #d1d5db;
    padding: 6px 14px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #4b5563;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.map-filter-btn.active, .map-filter-btn:hover {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
}

/* Scrollable List */
.map-location-list {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px 0;
}

/* Custom Scrollbar for Sidebar */
.map-location-list::-webkit-scrollbar { width: 6px; }
.map-location-list::-webkit-scrollbar-track { background: transparent; }
.map-location-list::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }

.sidebar-item {
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
    cursor: pointer;
    transition: background 0.2s;
}

.sidebar-item:hover { background: #f3f4f6; }

.sidebar-loc-name {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: #111111;
    margin-bottom: 5px;
}

.sidebar-loc-cat {
    display: block;
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.sidebar-loc-desc {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

/* --- Right Side: Map Canvas --- */
.map-view-container {
    flex-grow: 1;
    position: relative;
}

#conflict-map {
    width: 100%;
    height: 100%;
    z-index: 10; /* Keeps Leaflet under your sticky navbar */
}

/* --- Custom Red Pulsing Marker --- */
.pulse-marker {
    width: 16px;
    height: 16px;
    background-color: var(--accent);
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

/* --- Active Glowing Online Dot --- */
.online-status .dot {
    width: 8px;
    height: 8px;
    background-color: #10b981; /* Status Green */
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* --- Map Popup Styling (Professional Screenshot Match) --- */
.leaflet-popup-content-wrapper { 
    border-radius: 8px; 
    padding: 0; 
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

.leaflet-popup-content { 
    margin: 18px 22px; 
    line-height: 1.5; 
    font-family: var(--font-body), sans-serif;
    font-size: 0.95rem;
    color: #374151;
    min-width: 240px;
}

.popup-loc { 
    color: #111111; 
    font-weight: 700; 
    margin-bottom: 2px; 
}

.popup-cat { 
    color: #374151; 
    margin-bottom: 4px; 
}

/* Styles the coordinates to look like technical data */
.popup-coords { 
    color: #6b7280; 
    font-family: monospace; /* Gives it that intelligence terminal look */
    font-size: 0.85rem;
    margin-bottom: 12px; 
}

.popup-related { 
    margin-top: 15px; 
    border-top: 1px solid #e5e7eb; /* Moved the divider to sit right above 'Related' */
    padding-top: 12px;
}

.popup-divider { 
    border: none; 
    border-top: 1px solid #e5e7eb; 
    margin: 12px 0; 
}

.popup-related { margin-top: 10px; }

.popup-related strong { 
    display: block; 
    margin-bottom: 8px; 
    color: #111111; 
    font-weight: 700; 
}

.popup-related ul { 
    list-style-type: disc; 
    padding-left: 20px; 
    margin: 0; 
}

.popup-related li { 
    margin-bottom: 6px; 
}

.popup-related a { 
    color: var(--accent); /* CPCS Red */
    font-weight: 600; 
    text-decoration: underline; 
    transition: color 0.2s; 
}

.popup-related a:hover { 
    color: #991b1b; /* Darker red on hover */
}

/* --- Mobile Responsiveness --- */
@media (max-width: 992px) {
    .map-dashboard-card { flex-direction: column-reverse; height: auto; }
    .map-view-container { height: 400px; }
    .map-sidebar { width: 100%; height: 400px; border-right: none; border-top: 1px solid #e5e7eb; }
}

/* =========================================
   EVENTS PAGE: FULLY ISOLATED REBUILD
   ========================================= */

/* --- Header & Layout --- */
/* --- Header & Layout (Tightened White Space) --- */
.cpcs-events-header-sec { 
    /* Reduced the massive 100px padding down to 60px to remove the dead space */
    padding: 60px 0; 
    background: #fff; 
    border-bottom: 1px solid #eee; 
}

.cpcs-events-split { 
    display: flex; 
    gap: 50px; 
    align-items: center; /* Locks the text perfectly to the center of the calendar */
    justify-content: space-between; 
}

.cpcs-events-text { 
    flex: 1; 
    border-left: 5px solid var(--accent); 
    padding-left: 25px; 
}

.events-main-title { 
    font-family: var(--font-heading); 
    /* Increased from 3.5rem to 4.2rem to fill the space powerfully */
    font-size: 4.2rem; 
    color: #111; 
    margin: 0 0 15px 0; 
    line-height: 1.05; 
    letter-spacing: -1px;
}
.events-main-desc { font-size: 1.1rem; color: #666; line-height: 1.7; max-width: 500px; }

/* --- Interactive Calendar --- */
.cpcs-calendar-box { 
    width: 400px; 
    background: #fafafa; 
    border: 1px solid #e5e7eb; 
    border-top: 4px solid #111; 
    padding: 25px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); 
    /* FIX: Locks the overall height so the action panel pop-up doesn't stretch it */
    min-height: 480px; 
    position: relative;
}

.cpcs-cal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.cpcs-cal-header h3 { font-family: var(--font-heading); font-size: 1.3rem; margin: 0; color: #111; }
.cpcs-cal-btn { background: transparent; border: 1px solid #ccc; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; transition: 0.2s; }
.cpcs-cal-btn:hover { background: var(--accent); color: white; border-color: var(--accent); }

.cpcs-cal-grid { 
    display: grid; 
    grid-template-columns: repeat(7, 1fr); 
    gap: 5px; 
    text-align: center; 
    /* FIX: Locks the grid height so 5-week and 6-week months take up the exact same space */
    min-height: 240px; 
    align-content: start;
}

.cpcs-day-name { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: #999; margin-bottom: 10px; }
.cpcs-days-wrapper { display: contents; }
.cpcs-cal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 600; color: #444; border-radius: 4px; transition: 0.2s; }
.cpcs-cal-day.empty { visibility: hidden; }
.cpcs-cal-day.has-event { background: rgba(220, 38, 38, 0.1); color: var(--accent); border: 1px solid rgba(220, 38, 38, 0.2); cursor: pointer; font-weight: 800; }
.cpcs-cal-day.has-event:hover, .cpcs-cal-day.active { background: var(--accent); color: white; transform: scale(1.1); box-shadow: 0 4px 10px rgba(220, 38, 38, 0.3); }

/* Add to Calendar Action Panel */
/* FIX: Ensure the action panel doesn't push the layout when it appears */
.cpcs-cal-action {
    position: absolute;
    bottom: 25px;
    left: 25px;
    right: 25px;
    padding: 15px; 
    background: #111; 
    border-radius: 4px; 
    border-left: 4px solid var(--accent); 
}

.cpcs-cal-action.hidden { display: none; }
#cpcs-action-title { color: white; font-family: var(--font-heading); margin: 0 0 10px 0; font-size: 1.1rem; }
.cpcs-action-links { display: flex; gap: 10px; }
.cpcs-action-links a { padding: 6px 12px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; text-decoration: none; border-radius: 2px; }
#cpcs-btn-google { background: white; color: #111; }
#cpcs-btn-outlook { background: transparent; border: 1px solid white; color: white; }

/* --- Section Layout --- */
.cpcs-events-list-sec { padding: 80px 0; background: #fafafa; }
.cpcs-past-archives { background: #ffffff; border-top: 1px solid #e5e7eb; }
.cpcs-section-heading { font-family: var(--font-heading); font-size: 2.2rem; color: #111; margin-bottom: 40px; }
.cpcs-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }


/* ==============================================================
   THE EXACT SCREENSHOT CARD DESIGN
   (This can be copied directly to your Homepage safely)
   ============================================================== */

.cpcs-event-card {
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cpcs-event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

/* 1. Image & Badge */
.cpcs-card-img-wrap {
    position: relative;
    width: 100%;
    height: 190px;
}

.cpcs-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cpcs-card-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: var(--accent); /* CPCS Red */
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 6px 14px;
    z-index: 2;
}

/* 2. Content Body */
.cpcs-card-body {
    padding: 35px 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* 3. Date */
.cpcs-card-date {
    font-size: 0.85rem;
    font-weight: 700;
    color: #111111;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

/* 4. Large Title (Link & Hover) */
.cpcs-title-link {
    text-decoration: none;
    display: block;
}

.cpcs-card-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: #111111;
    line-height: 1.25;
    margin: 0 0 25px 0;
    transition: color 0.3s ease; /* Smooth fade for the hover */
}

/* Turns the title red ONLY when you hover directly over the title itself */
.cpcs-title-link:hover .cpcs-card-title {
    color: var(--accent);
}

/* 5. Online Webinar Status (Breathing Dot) */
.cpcs-card-status {
    display: flex;
    align-items: center;
    color: var(--accent); 
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

/* FIX: The Breathing Red Animation */
.cpcs-status-dot {
    width: 10px;
    height: 10px;
    background-color: var(--accent); 
    border-radius: 50%;
    margin-right: 10px;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
    animation: cpcs-pulse-red 2s infinite;
}

@keyframes cpcs-pulse-red {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

/* Kills the breathing animation and removes the red glow for Past/Archived events */
.cpcs-past-card .cpcs-status-dot {
    animation: none !important;
    box-shadow: none !important;
    background-color: #4b5563 !important; /* Solid grey */
}

/* 6. Time & Location Meta */
.cpcs-card-meta {
    font-size: 0.95rem;
    color: #9ca3af; /* Soft grey */
    margin-bottom: 30px;
    flex-grow: 1; /* Pushes the register button to the bottom */
}

/* 7. Footer Link */
.cpcs-card-link {
    font-size: 0.9rem;
    font-weight: 800;
    color: #111111;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s;
}

.cpcs-card-link:hover {
    color: var(--accent);
}

/* Responsive */
@media (max-width: 1024px) {
    .cpcs-cards-grid { grid-template-columns: repeat(2, 1fr); }
    .cpcs-events-split { flex-direction: column; }
    .cpcs-calendar-box { width: 100%; }
}
@media (max-width: 768px) {
    .cpcs-cards-grid { grid-template-columns: 1fr; }
}

/* =========================================
   WAR JOURNALIST LAB PAGE (Isolated CSS)
   ========================================= */

/* --- Hero Section Layout --- */
.wjl-hero-section {
    padding: 120px 0 40px 0; /* Generous top padding to clear the navbar */
    background-color: #ffffff;
    text-align: center; /* Forces everything strictly to the center */
}

.wjl-hero-content {
    max-width: 850px; /* Constrains the text so it wraps exactly like the screenshot */
    margin: 0 auto;   /* Centers the block within the container */
}

/* --- Typography --- */
.wjl-hero-tag {
    display: block;
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 3px; /* Wide tracking for that premium editorial look */
    text-transform: uppercase;
    margin-bottom: 25px;
}

.wjl-hero-title {
    font-family: var(--font-heading);
    font-size: 3.5rem; /* Massive, authoritative size */
    color: #111111;
    line-height: 1.1;
    margin: 0 0 25px 0;
    letter-spacing: -1px;
}

/* --- Red Centered Divider --- */
.wjl-hero-divider {
    width: 60px;
    height: 4px;
    background-color: var(--accent);
    margin: 0 auto 35px auto; /* Margin auto is crucial to keep it centered */
}

/* --- Italicized Description --- */
.wjl-hero-desc {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: #4b5563;
    line-height: 1.25;    
    font-style: italic; /* Matches the screenshot exactly */
    font-weight: 300;
    margin: 0;
}

/* --- Bottom Grey Separator Line --- */
.wjl-section-separator {
    border: none;
    border-top: 1px solid var(--border-color);
    margin-top: 80px; /* Pushes the line down away from the text */
    margin-bottom: 0;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    .wjl-hero-section { padding: 80px 0 30px 0; }
    .wjl-hero-title { font-size: 3rem; }
    .wjl-hero-desc { font-size: 1.1rem; }
    .wjl-hero-tag { letter-spacing: 2px; }
}

/* =========================================
   WAR JOURNALIST LAB: MODULES SECTION
   ========================================= */

.wjl-modules-section {
    padding: 0 0 40px 0; /* No top padding, lets it sit right below the hero separator */
    background-color: #ffffff;
}

/* --- Individual Module Layout --- */
.wjl-module {
    display: flex;
    align-items: flex-start;
    padding: 80px 0;
    border-bottom: 1px solid #e5e7eb; /* The thin dividing line between modules */
}

/* --- Left Column (Sidebar) --- */
.wjl-module-left {
    width: 30%;
    padding-right: 40px;
    flex-shrink: 0;
}

.wjl-mod-tag {
    display: inline-block;
    border: 1px solid var(--accent); /* Red Border */
    color: var(--accent);
    font-size: 0.65rem;
    font-weight: 800;
    padding: 4px 8px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 20px;
}

.wjl-mod-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: #111111;
    line-height: 1.15;
    margin: 0 0 15px 0;
}

.wjl-mod-icon {
    color: #cbd5e1; /* Light, subtle grey for the SVG icons */
}

/* --- Right Column (Content) --- */
.wjl-module-right {
    width: 70%;
}

.wjl-mod-subtitle {
    font-size: 1rem;
    font-weight: 800;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 15px 0;
}

.wjl-mod-desc {
    font-size: 1.05rem;
    color: #4b5563;
    line-height: 1.8;
    margin: 0 0 35px 0;
}

/* --- The Light Grey Data Box --- */
.wjl-mod-box {
    background-color: #f9fafb; /* Very faint off-white/grey */
    padding: 30px;
    border-left: 3px solid var(--primary-dark);
    max-width: 700px;
}

.wjl-mod-box-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 20px 0;
}

/* --- Custom Red Bullet Points --- */
.wjl-mod-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wjl-mod-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 15px;
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.6;
}

.wjl-mod-list li:last-child {
    margin-bottom: 0;
}

.wjl-mod-list li strong {
    color: #111111;
    font-weight: 700;
}

/* The physical red dot */
.wjl-mod-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px; /* Aligns dot perfectly with the center of the first line of text */
    width: 5px;
    height: 5px;
    background-color: var(--accent);
    border-radius: 50%;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 992px) {
    .wjl-module { flex-direction: column; padding: 60px 0; }
    .wjl-module-left { width: 100%; padding-right: 0; margin-bottom: 30px; }
    .wjl-module-right { width: 100%; }
}

@media (max-width: 768px) {
    .wjl-mod-title { font-size: 2rem; }
    .wjl-mod-box { padding: 25px; }
}

/* =========================================
   WAR JOURNALIST LAB: FELLOWSHIP SECTION
   ========================================= */

.wjl-fellowship-section {
    padding: 40px 0 100px 0; /* Tightened top spacing as requested */
    background-color: #ffffff; 
}

/* --- THE STATIC GREY OUTER CONTAINER --- */
.wjl-fellow-outer-box {
    background-color: #f3f4f6; /* Solid light grey */
    padding: 50px; 
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- THE STATE-OF-THE-ART INNER CARD --- */
.wjl-fellow-card {
    display: flex;
    width: 100%;
    background: #ffffff;
    border-radius: 2px;
    border-left: 8px solid var(--accent);
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    position: relative;
    overflow: hidden;
    
    /* Premium easing curve for a heavy, cinematic movement */
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: translateY(0) scale(1);
}

/* THE LIGHT SWEEP (Diagonal & Highly Visible) */
.wjl-fellow-card::after {
    content: '';
    position: absolute;
    top: 0; 
    left: -150%; 
    width: 60%; 
    height: 100%;
    
    /* Sharper, brighter white gradient */
    background: linear-gradient(to right, rgba(255,255,255,0) 20%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 80%);
    transform: skewX(-45deg);
    
    /* Layer 5: Sits above text, but safely below the Button */
    z-index: 5;
    pointer-events: none;
    transition: left 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

/* THE CARD HOVER TRIGGER */
.wjl-fellow-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 35px 60px rgba(0,0,0,0.12);
}

.wjl-fellow-card:hover::after {
    left: 200%; /* Shoots the shine diagonally across */
}


/* --- Left Column (Grid & Content) --- */
.wjl-fellow-left {
    width: 60%;
    padding: 60px 50px;
    border-right: 1px solid #e5e7eb;
    position: relative; 
    background: #ffffff;
}

/* Center-Fading Background Grid */
.wjl-fellow-left::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0; 
    background-image: linear-gradient(#f3f4f6 1px, transparent 1px), linear-gradient(90deg, #f3f4f6 1px, transparent 1px);
    background-size: 25px 25px;
    -webkit-mask-image: radial-gradient(circle at center, transparent 15%, black 85%);
    mask-image: radial-gradient(circle at center, transparent 15%, black 85%);
    pointer-events: none;
    transition: transform 0.6s ease;
}

/* Parallax grid shift on hover */
.wjl-fellow-card:hover .wjl-fellow-left::before {
    transform: scale(1.05);
}

/* Keeps content above the grid (Layer 1) */
.wjl-fellow-tag, 
.wjl-fellow-title, 
.wjl-fellow-desc, 
.wjl-editorial-pricing { 
    position: relative; 
    z-index: 1; 
}

.wjl-fellow-tag {
    display: inline-flex;
    align-items: center;
    background-color: rgba(220, 38, 38, 0.08); 
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 14px;
    border-radius: 30px;
    margin-bottom: 25px;
}

.wjl-tag-dot {
    width: 6px; height: 6px; background-color: var(--accent); border-radius: 50%; margin-right: 8px;
    animation: wjl-pulse 2s infinite; 
}

@keyframes wjl-pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

.wjl-fellow-title { font-family: var(--font-heading); font-size: 3rem; color: #111111; line-height: 1.1; margin: 0 0 20px 0; letter-spacing: -1px; }
.wjl-fellow-desc { font-size: 1.1rem; color: #4b5563; line-height: 1.7; margin: 0 0 20px 0; max-width: 90%; }


/* =========================================
   EDITORIAL PRICING TABLE (THINK TANK STYLE)
   ========================================= */

.wjl-editorial-pricing {
    display: flex;
    margin-top: 35px;
    /* Strict, academic border framing */
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    background: #fafafa; /* Very faint grey base */
}

.wjl-ep-col {
    flex: 1;
    padding: 25px 30px;
}

/* Primary option is highlighted simply by keeping the background pure white */
.wjl-ep-primary {
    background: #ffffff; 
    border-right: 1px solid #e5e7eb;
}

.wjl-ep-label-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.wjl-ep-label {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #6b7280;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.wjl-ep-badge {
    font-size: 0.6rem;
    font-weight: 800;
    color: var(--accent);
    background: rgba(220, 38, 38, 0.08);
    padding: 3px 8px;
    border-radius: 2px;
    letter-spacing: 1px;
}

.wjl-ep-savings {
    font-size: 0.75rem;
    font-weight: 700;
    color: #9ca3af;
    margin-top: 8px;
    letter-spacing: 0.5px;
    transition: color 0.4s ease;
}

/* Added hover effect for the savings text */
.wjl-fellow-card:hover .wjl-ep-primary .wjl-ep-savings {
    color: var(--accent);
}

/* The signature CPCS Red dot */
.wjl-ep-dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; margin-right: 8px; }

.wjl-ep-data {
    font-family: var(--font-heading);
    font-size: 2.8rem; /* Large, but dignified */
    color: #111111;
    line-height: 1;
    display: flex;
    align-items: baseline;
    transition: color 0.4s ease; /* The only animation allowed */
}

.wjl-ep-currency { font-family: var(--font-body); font-size: 1.2rem; font-weight: 600; margin-right: 4px; }
.wjl-ep-sub { font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; color: #9ca3af; margin-left: 8px; letter-spacing: 0.5px; }

/* A slow, authoritative shift to CPCS Red when the card is hovered */
.wjl-fellow-card:hover .wjl-ep-primary .wjl-ep-data {
    color: var(--accent);
}


/* --- Right Column (Inclusions & Button) --- */
.wjl-fellow-right {
    width: 40%;
    background-color: #ffffff; 
    padding: 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wjl-right-title { font-size: 0.85rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 1.5px; margin: 0 0 25px 0; }
.wjl-inclusions-list { list-style: none; padding: 0; margin: 0 0 35px 0; }
.wjl-inclusions-list li { display: flex; align-items: center; font-size: 0.95rem; color: #111111; font-weight: 600; margin-bottom: 18px; }
.wjl-check { width: 18px; height: 18px; color: var(--accent); margin-right: 12px; flex-shrink: 0; }

/* --- The Proceed Button (Editorial Shutter) --- */
.wjl-btn-proceed {
    display: block; background-color: var(--accent); color: #ffffff; text-align: center;
    padding: 16px 20px; font-size: 0.9rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 1.5px; text-decoration: none; border-radius: 2px; margin-bottom: 15px;
    position: relative; overflow: hidden; 
    
    /* Layer 20: Guarantees it stays above the diagonal light sweep */
    z-index: 20; 
    transition: box-shadow 0.3s ease;
}

.wjl-btn-proceed::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background-color: #111111; z-index: -1; transition: left 0.4s cubic-bezier(0.25, 1, 0.5, 1); 
}

.wjl-btn-proceed:hover::before { left: 0; }
.wjl-btn-proceed:hover { box-shadow: 0 10px 20px rgba(17, 17, 17, 0.2); }
.wjl-req-text { font-size: 0.85rem; color: #9ca3af; font-style: italic; text-align: center; margin: 0; }


/* --- Mobile Responsiveness --- */
@media (max-width: 1024px) {
    .wjl-fellow-card { flex-direction: column; }
    .wjl-fellow-outer-box { padding: 20px; }
    .wjl-fellow-left { width: 100%; border-right: none; border-bottom: 1px solid #e5e7eb; padding: 40px 30px; }
    .wjl-fellow-right { width: 100%; padding: 40px 30px; }
}

@media (max-width: 768px) {
    .wjl-fellow-title { font-size: 2.2rem; }
    .wjl-editorial-pricing { flex-direction: column; }
    .wjl-ep-primary { border-right: none; border-bottom: 1px solid #e5e7eb; padding-bottom: 20px; }
    .wjl-ep-col { padding: 20px; }
}

/* =========================================
   CONTACT US PAGE
   ========================================= */

/* Hero Section */
.cpcs-page-hero {
    text-align: center;
    padding: 80px 0 40px 0;
    background-color: #ffffff;
}

.cpcs-pre-title {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--accent); /* Red */
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
}

.cpcs-page-title {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    color: #111111;
    margin: 0;
}

.cpcs-title-underline {
    width: 40px;
    height: 3px;
    background-color: var(--accent);
    margin: 20px auto 0 auto;
}

/* Alert Messages (For PHP logic) */
.cpcs-alert {
    padding: 15px 20px;
    border-radius: 4px;
    margin-bottom: 30px;
    font-size: 0.9rem;
    font-weight: 600;
}
.cpcs-alert-success { background-color: #def7ec; color: #03543f; border: 1px solid #84e1bc; }
.cpcs-alert-error { background-color: #fde8e8; color: #9b1c1c; border: 1px solid #f8b4b4; }

/* The Main Card Container */
.cpcs-contact-section {
    padding: 20px 0 100px 0;
}

.cpcs-contact-card {
    display: flex;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.06);
    overflow: hidden;
    max-width: 1100px;
    margin: 0 auto;
}

/* --- LEFT PANEL (Red Info Side) --- */
.cpcs-contact-left {
    flex: 1;
    background-color: var(--accent); /* CPCS Red */
    padding: 60px 50px;
    color: #ffffff;
    position: relative;
    overflow: hidden; /* Keeps the circle shapes inside */
}

/* Abstract overlapping circles (Watermark effect) */
.cpcs-bg-shape {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}
.shape-1 {
    width: 300px; height: 300px;
    top: -100px; right: -50px;
}
.shape-2 {
    width: 400px; height: 400px;
    bottom: -150px; right: -100px;
}

.cpcs-contact-info-content {
    position: relative;
    z-index: 1;
}

.cpcs-est-text {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 20px;
}

.cpcs-left-title {
    font-family: var(--font-heading);
    font-size: 3rem;
    line-height: 1.1;
    margin: 0 0 15px 0;
    color: #ffffff;
}

.cpcs-quote {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-style: italic;
    opacity: 0.9;
    margin-bottom: 40px;
}

.cpcs-info-blocks {
    margin-bottom: 50px;
}

.cpcs-info-block {
    margin-bottom: 25px;
}

.cpcs-info-block h4 {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 8px 0;
    opacity: 0.8;
}

.cpcs-info-block p {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.5;
}

.cpcs-social-links {
    display: flex;
    gap: 20px;
}

.cpcs-social-links a {
    color: #ffffff;
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.cpcs-social-links a:hover {
    transform: translateY(-3px);
}


/* --- RIGHT PANEL (The Form) --- */
.cpcs-contact-right {
    flex: 1.2;
    padding: 60px 50px;
    background: #ffffff;
}

.cpcs-form-header {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

.cpcs-form-line {
    width: 4px;
    height: 30px;
    background-color: var(--accent);
    margin-right: 15px;
}

.cpcs-form-header h3 {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: #111111;
    margin: 0;
}

/* =========================================
   PREMIUM OUTLINED FORM ANIMATIONS
   ========================================= */

.cpcs-form {
    display: flex;
    flex-direction: column;
    gap: 25px; /* Perfect spacing for boxed inputs */
}

.cpcs-form-row {
    display: flex;
    gap: 25px;
}

/* Base Group Setup */
.cpcs-form-group {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-top: 10px; /* Space for the label to float up into */
}

/* 1. Base Box Styling for Inputs, Textareas, and Dropdowns */
.cpcs-form-group input,
.cpcs-form-group select,
.cpcs-form-group textarea {
    width: 100%;
    padding: 16px 15px; /* Generous, premium padding */
    border: 1px solid #d1d5db; /* Full architectural box border */
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: #111111;
    background: #ffffff;
    outline: none;
    transition: all 0.3s ease;
}

/* Textarea specific adjustment */
.cpcs-form-group textarea {
    resize: none;
    line-height: 1.5;
}

/* Hide actual HTML placeholders to use our custom CSS labels */
.cpcs-form-group input::placeholder,
.cpcs-form-group textarea::placeholder {
    color: transparent; 
}

/* Focus state: Border turns Red and gets a soft halo */
.cpcs-form-group input:focus,
.cpcs-form-group select:focus,
.cpcs-form-group textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.08); /* Soft CPCS Red glow */
}

/* Hide the old bottom line expander (No HTML changes needed) */
.cpcs-input-border {
    display: none; 
}

/* --- 2. THE FLOATING LABEL "CUTOUT" ANIMATION --- */
.cpcs-floating-group label {
    position: absolute;
    top: 17px; /* Sits perfectly aligned with the input text inside the box */
    left: 15px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: #9ca3af;
    pointer-events: none;
    transform-origin: left top;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* THE TRIGGER: Label slides up and "cuts" the border */
.cpcs-floating-group input:focus ~ label,
.cpcs-floating-group input:not(:placeholder-shown) ~ label,
.cpcs-floating-group textarea:focus ~ label,
.cpcs-floating-group textarea:not(:placeholder-shown) ~ label {
    top: -10px; /* Slides exactly to the top border line */
    left: 10px;
    transform: scale(0.75); /* Shrinks neatly */
    background-color: #ffffff; /* This creates the "cutout" effect over the border line */
    padding: 0 6px;
    color: var(--accent);
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}


/* --- 3. REDESIGNED DROPDOWN (SELECT) --- */
.cpcs-form-group select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    /* Custom, sharp chevron arrow */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23111111%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 18px auto;
}

/* Keep the dropdown label permanently docked in the cutout position */
.cpcs-static-label {
    position: absolute;
    top: -10px;
    left: 10px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 800;
    color: #9ca3af;
    background-color: #ffffff;
    padding: 0 6px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

/* Turn dropdown label red on focus */
.cpcs-form-group select:focus ~ .cpcs-static-label {
    color: var(--accent);
}

/* --- Submit Button --- */
.cpcs-btn-submit {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    background-color: #111111;
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 16px 32px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    margin-top: 10px;
}

.cpcs-btn-submit svg {
    width: 18px;
    height: 18px;
    margin-left: 10px;
    transition: transform 0.3s ease;
}

.cpcs-btn-submit:hover {
    background-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(220, 38, 38, 0.2);
}

.cpcs-btn-submit:hover svg {
    transform: translateX(4px);
}

/* Mobile Responsiveness */
@media (max-width: 992px) {
    .cpcs-contact-card { flex-direction: column; }
    .cpcs-form-row { flex-direction: column; gap: 25px; }
}

/* =========================================
   INSTITUTIONAL DIRECTORY
   ========================================= */

.cpcs-directory-section {
    padding: 0 0 100px 0;
}

/* The Grid Container */
.cpcs-dir-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: #ffffff;
    border: 1px solid #e5e7eb;
    margin-top: 40px;
}

/* --- THE DIRECTORY CARDS --- */
.cpcs-dir-card {
    padding: 40px 40px;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Ensures everything strictly aligns to the left */
    text-decoration: none;
    background-color: #ffffff;
    
    /* Prepares the bottom red line without taking up physical space */
    box-shadow: inset 0 0 0 transparent;
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.cpcs-dir-card:last-child {
    border-right: none;
}

/* THE HOVER: Thick red line appears inside the bottom frame (Zero layout shift) */
.cpcs-dir-card:hover {
    box-shadow: inset 0 -5px 0 var(--accent);
    background-color: #f9fafb; /* Premium light grey hover state */
}

/* Typography & Icons */
.cpcs-dir-icon {
    width: 24px;
    height: 24px;
    color: var(--accent);
    margin-bottom: 30px;
    /* Added silky smooth transition for the lift */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.cpcs-dir-card:hover .cpcs-dir-icon {
    transform: translateY(-6px);
}

.cpcs-dir-pre {
    font-size: 0.7rem;
    font-weight: 800;
    color: #9ca3af;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.cpcs-dir-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: #111111;
    margin: 0 0 15px 0;
    line-height: 1.2;
}

.cpcs-dir-desc {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0 0 40px 0;
}

/* --- THE HYPER-ACCURATE LINK/BUTTON --- */
.cpcs-dir-link {
    margin-top: auto;
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 800;
    color: #111111;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    /* 1. The precise red underline matching the screenshot */
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
    
    /* 2. The padding is set permanently, but offset by negative margin. 
       This means the text stays perfectly aligned with the paragraph above it, 
       but the "invisible" button padding is ready for the hover state. */
    padding: 12px 24px;
    margin-left: -24px; 
    
    background-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease, text-decoration-color 0.3s ease;
}

/* THE HOVER: The red background seamlessly fills the pre-set padding */
.cpcs-dir-card:hover .cpcs-dir-link {
    background-color: var(--accent);
    color: #ffffff;
    text-decoration-color: transparent; /* Smoothly hides the underline */
}

/* Mobile Responsiveness */
@media (max-width: 992px) {
    .cpcs-dir-grid { grid-template-columns: 1fr; }
    .cpcs-dir-card { border-right: none; border-bottom: 1px solid #e5e7eb; }
    .cpcs-dir-card:last-child { border-bottom: none; }
}

/* =========================================
   GLOBAL HEADQUARTERS SECTION
   ========================================= */

.cpcs-hq-section {
    padding: 0 0 100px 0;
    background-color: #ffffff;
}

/* The faint line under the title */
.cpcs-hq-divider {
    width: 100%;
    height: 1px;
    background-color: #e5e7eb;
    margin-bottom: 50px;
}

/* 2-Column Grid Layout */
.cpcs-hq-grid {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

/* --- Left Side: Information --- */
.cpcs-hq-info {
    flex: 1; /* Takes up roughly 40% of the space */
    display: flex;
    flex-direction: column;
    gap: 35px;
    padding-top: 10px;
}

.cpcs-hq-block {
    display: flex;
    flex-direction: column;
}

.cpcs-hq-label {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--accent); /* CPCS Red */
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.cpcs-hq-city {
    font-family: var(--font-heading); /* Serif font */
    font-size: 1.8rem;
    color: #111111;
    margin: 0;
    font-weight: 500;
}

.cpcs-hq-text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #6b7280;
    line-height: 1.7;
    margin: 0;
    max-width: 90%;
}

.cpcs-hq-coords {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    color: #111111;
}

/* --- Right Side: Map --- */
.cpcs-hq-map-wrapper {
    flex: 1.8; /* Takes up roughly 60% of the space to match the screenshot */
    position: relative;
    height: 400px; /* Fixed height for the map */
    background: #f3f4f6; /* Placeholder color before map loads */
}

#cpcs-hq-map {
    width: 100%;
    height: 100%;
    border: 1px solid #e5e7eb; /* Sharp, clean border */
    z-index: 1; /* Keeps map below the decorative accent */
}

/* The Signature CPCS Red Architectural Corner */
.cpcs-hq-map-accent {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 40px;
    height: 40px;
    border-bottom: 3px solid var(--accent);
    border-right: 3px solid var(--accent);
    z-index: 10;
    pointer-events: none; /* Allows user to click the map beneath it */
}

/* Mobile Responsiveness */
@media (max-width: 992px) {
    .cpcs-hq-grid {
        flex-direction: column;
    }
    .cpcs-hq-map-wrapper {
        width: 100%;
        height: 350px;
        margin-top: 20px;
    }
}

/* =========================================
   HYBRID EDITORIAL LAYOUT
   ========================================= */

.cpcs-wire-article {
    background-color: #ffffff;
    padding-top: 40px;
    padding-bottom: 100px;
}

.cpcs-wire-container {
    max-width: 1200px; 
    margin: 0 auto;
    padding: 0 20px;
}

/* --- THE BACK LINK --- */
.cpcs-back-nav {
    margin-bottom: 30px;
}

.cpcs-back-link {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--primary-dark);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
    transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.cpcs-back-link svg {
    width: 16px; height: 16px; margin-right: 8px; 
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.cpcs-back-link:hover { color: var(--accent); }
.cpcs-back-link:hover svg { transform: translateX(-6px); }

/* --- HERO SECTION (Wire-Service Split) --- */
.cpcs-wire-hero {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Text gets ~45%, Image gets ~55% */
    gap: 60px;
    align-items: start;
    margin-bottom: 60px;
    padding-bottom: 50px;
    border-bottom: 1px solid #e5e7eb; /* Breaks the hero from the reading content */
}

/* Left Side: Headlines & Meta */
.cpcs-wire-hero-text {
    display: flex;
    flex-direction: column;
}

.cpcs-wire-tag {
    align-self: flex-start;
    background-color: rgba(220, 38, 38, 0.08); 
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 8px;
    margin-bottom: 25px;
    border-radius: 2px;
}

.cpcs-wire-title {
    font-family: var(--font-heading);
    font-size: 3.2rem;
    line-height: 1.1;
    color: var(--primary-dark);
    margin: 0 0 40px 0;
    letter-spacing: -1px;
}

.cpcs-wire-subtitle {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 500;
    color: #4b5563;
    margin: 0 0 85px 0;
}

.cpcs-wire-author-block {
    display: flex;
    align-items: center;
    gap: 15px;
}

.cpcs-wire-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
}

.cpcs-wire-avatar svg { width: 20px; height: 20px; }

.cpcs-wire-author-info {
    display: flex;
    flex-direction: column;
}

.cpcs-wire-author-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary-dark);
}

.cpcs-wire-date {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* Right Side: Featured Image */
.cpcs-wire-hero-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}

.cpcs-wire-caption {
    display: block;
    font-size: 0.75rem;
    color: #6b7280;
    text-align: right;
    margin-top: 10px;
    font-style: italic;
}

/* --- LOWER SECTION (Dossier Content Grid) --- */
.cpcs-dossier-grid {
    display: grid; 
    grid-template-columns: 200px 1fr; /* Sidebar width + content width */
    gap: 60px;
    max-width: 1000px; 
    margin: 0 auto;
}

/* Sticky Sidebar */
.cpcs-dossier-sidebar {
    position: sticky; 
    top: 100px; 
    height: max-content;
}

.cpcs-sidebar-label {
    display: block; font-size: 0.65rem; font-weight: 800; color: #9ca3af;
    letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 8px;
}

.cpcs-share-icons { display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap; }

.cpcs-share-icons a svg {
    width: 16px;
    height: 16px;
    /* Ensures the SVG color inherits the <a> tag color on hover */
    display: block;
}

.cpcs-share-icons a {
    display: flex; 
    align-items: center; 
    justify-content: center;
    width: 38px; 
    height: 38px; 
    border: 1px solid #d1d5db; 
    border-radius: 50%;
    color: #111111; 
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.cpcs-share-icons a:hover {
    border-color: var(--accent);
    background-color: var(--accent);
    color: #ffffff;
    transform: translateY(-4px); 
    box-shadow: 0 8px 15px rgba(220, 38, 38, 0.2); 
}

/* Main Content */
/* --- MAIN CONTENT (Pure Typographic Focus) --- */
.cpcs-dossier-content { 
    max-width: 680px; /* Slightly wider for comfortable reading */
}

/* The Lead Paragraph (Standfirst) - Replaces the Dropcap */
.cpcs-dossier-content > p:first-of-type {
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--primary-dark);
    line-height: 1.6;
    margin-bottom: 35px;
}

/* Standard Body Text */
.cpcs-dossier-content p {
    font-family: var(--font-body); 
    font-size: 1.1rem; 
    line-height: 1.8;
    color: #333333; 
    margin-bottom: 25px;
}

/* Clean, traditional in-text links */
.cpcs-dossier-content a {
    color: var(--accent); /* Classic CPCS Red */
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.3s ease;
}

.cpcs-dossier-content a:hover {
    color: var(--primary-dark); /* Switches to black to indicate interaction */
}

/* Content Headings */
.cpcs-dossier-content h2 {
    font-family: var(--font-heading); 
    font-size: 1.8rem; 
    color: var(--primary-dark);
    margin: 45px 0 20px 0; 
    line-height: 1.3;
}

/* Classic Academic Blockquotes */
.cpcs-dossier-content blockquote {
    margin: 40px 0; 
    padding: 0 0 0 25px; 
    border-left: 4px solid var(--accent);
    background: transparent;
}

.cpcs-dossier-content blockquote p {
    font-family: var(--font-heading); 
    font-size: 1.4rem; 
    line-height: 1.5;
    color: var(--primary-dark); 
    margin: 0; 
    font-style: italic;
}

/* Mobile Responsiveness */
@media (max-width: 992px) {
    .cpcs-wire-hero { grid-template-columns: 1fr; gap: 30px; }
    .cpcs-wire-hero-text { order: 2; }
    .cpcs-wire-hero-image { order: 1; }
    .cpcs-wire-title { font-size: 2.8rem; }
    .cpcs-dossier-grid { grid-template-columns: 1fr; gap: 0; }
    
    .cpcs-dossier-sidebar { 
        position: static; 
        display: flex; 
        align-items: center; 
        gap: 20px; 
        border-bottom: 1px solid #e5e7eb; 
        padding-bottom: 20px; 
        margin-bottom: 40px; 
    }
    .cpcs-sidebar-share { margin-top: 0; display: flex; align-items: center; gap: 15px; }
    .cpcs-sidebar-label { margin-bottom: 0; }
    .cpcs-share-icons { margin-top: 0; }
}

@media (max-width: 768px) {
    .cpcs-wire-title { font-size: 2.2rem; }
    .cpcs-dossier-content > p:first-of-type { font-size: 1.15rem; }
    .cpcs-dossier-content blockquote p { font-size: 1.25rem; }
}

/* =========================================
   JOIN US / MEMBERSHIP PAGE
   ========================================= */

.cpcs-join-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- HERO SECTION --- */
.cpcs-join-hero {
    padding: 80px 0 60px 0;
    background-color: #ffffff;
    text-align: center;
}

.cpcs-join-header-block {
    max-width: 800px;
    margin: 0 auto;
}

.cpcs-join-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px;
    padding: 6px 12px;
    background: rgba(220, 38, 38, 0.08);
    border-radius: 2px;
}

.cpcs-join-title {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    line-height: 1.1;
    color: #111111;
    margin: 0 0 25px 0;
    letter-spacing: -1px;
}

.cpcs-join-subtitle {
    font-family: var(--font-body);
    font-size: 1.25rem;
    color: #4b5563;
    line-height: 1.6;
    margin: 0;
}

/* --- PRICING TIERS --- */
.cpcs-pricing-section {
    padding: 0 0 80px 0;
    background-color: #ffffff;
}

.cpcs-pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.cpcs-pricing-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    padding: 50px 40px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.cpcs-pricing-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
    transform: translateY(-5px);
}

.cpcs-pricing-card.featured {
    border: 2px solid #111111; /* Sharp, authoritative black border */
    padding: 60px 40px; /* Taller to signify importance */
    background: #fdfdfd;
}

.cpcs-featured-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: #111111;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    padding: 6px 15px;
    text-transform: uppercase;
}

.cpcs-card-top {
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 25px;
    margin-bottom: 25px;
}

.cpcs-pricing-card.featured .cpcs-card-top {
    border-bottom-color: #d1d5db;
}

.cpcs-tier-name {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: #111111;
    margin: 0 0 10px 0;
}

.cpcs-tier-desc {
    font-size: 0.95rem;
    color: #6b7280;
    line-height: 1.5;
    margin: 0;
}

.cpcs-price-block {
    display: flex;
    align-items: baseline;
    margin-bottom: 30px;
    color: #111111;
}

.cpcs-currency {
    font-size: 1.5rem;
    font-weight: 700;
    margin-right: 4px;
}

.cpcs-price {
    font-family: var(--font-heading);
    font-size: 4.5rem;
    line-height: 1;
    letter-spacing: -2px;
}

.cpcs-period {
    font-size: 0.9rem;
    font-weight: 600;
    color: #6b7280;
    margin-left: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cpcs-tier-features {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
}

.cpcs-tier-features li {
    display: flex;
    align-items: flex-start;
    font-size: 1.05rem;
    color: #374151;
    margin-bottom: 15px;
    line-height: 1.4;
}

.cpcs-tier-features li strong {
    color: #111111;
}

.cpcs-tier-features li svg {
    width: 20px;
    height: 20px;
    color: var(--accent);
    margin-right: 12px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Pricing Buttons */
.cpcs-btn-outline, .cpcs-btn-solid {
    display: block;
    width: 100%;
    text-align: center;
    padding: 16px 0;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.cpcs-btn-outline {
    border: 1px solid #111111;
    color: #111111;
    background: transparent;
}

.cpcs-btn-outline:hover {
    background: #111111;
    color: #ffffff;
}

.cpcs-btn-solid {
    background: var(--accent);
    color: #ffffff;
    border: 1px solid var(--accent);
}

.cpcs-btn-solid:hover {
    background: #b91c1c; /* Darker red */
    border-color: #b91c1c;
}

/* --- BENEFITS / WHY US SECTION --- */
.cpcs-benefits-section {
    padding: 80px 0;
    background: #f9fafb; /* Slight off-white to separate from pricing */
    border-top: 1px solid #e5e7eb;
}

.cpcs-benefits-header {
    text-align: center;
    margin-bottom: 60px;
}

.cpcs-benefits-header h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: #111111;
    margin: 0 0 20px 0;
}

.cpcs-header-line {
    width: 60px;
    height: 3px;
    background: var(--accent);
    margin: 0 auto;
}

.cpcs-benefits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    margin-bottom: 60px;
}

.cpcs-benefit-item {
    border-left: 2px solid #e5e7eb;
    padding-left: 25px;
    transition: border-color 0.3s ease;
}

.cpcs-benefit-item:hover {
    border-left-color: var(--accent);
}

.cpcs-benefit-icon {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: #d1d5db; /* Light grey numbers */
    line-height: 1;
    margin-bottom: 15px;
}

.cpcs-benefit-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111111;
    margin: 0 0 10px 0;
}

.cpcs-benefit-desc {
    font-size: 1rem;
    color: #4b5563;
    line-height: 1.7;
    margin: 0;
}

/* Trust Bar at the bottom */
.cpcs-trust-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding-top: 40px;
    border-top: 1px solid #e5e7eb;
}

.cpcs-trust-text {
    font-size: 0.7rem;
    font-weight: 800;
    color: #9ca3af;
    letter-spacing: 1.5px;
}

/* Mobile Responsiveness */
@media (max-width: 992px) {
    .cpcs-pricing-grid { grid-template-columns: 1fr; gap: 30px; }
    .cpcs-pricing-card.featured { padding: 50px 40px; } /* Reset padding on mobile */
    .cpcs-benefits-grid { grid-template-columns: 1fr; gap: 40px; }
    .cpcs-trust-bar { flex-direction: column; gap: 10px; }
    .cpcs-trust-text:nth-child(even) { display: none; } /* Hides the bullet points on mobile */
}

@media (max-width: 768px) {
    .cpcs-join-title { font-size: 2.8rem; letter-spacing: 0; }
    .cpcs-price { font-size: 3.5rem; }
}

/* --- WAR JOURNALIST LAB PERKS LIST --- */
.cpcs-lab-perks {
    list-style: none;
    padding: 0;
    margin: 15px 0 0 0;
    border-top: 1px solid #e5e7eb; /* Soft grey line matching the theme */
    padding-top: 15px;
}

.cpcs-lab-perks li {
    position: relative;
    padding-left: 20px;
    font-size: 0.95rem;
    font-family: var(--font-body);
    font-weight: 700;
    color: #111111; /* Dark text to match the clean aesthetic */
    margin-bottom: 8px;
    line-height: 1.4;
}

.cpcs-lab-perks li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--accent); /* CPCS Red arrow */
    font-weight: bold;
}