.section-spacing { padding: 6rem 0; }
        .section-spacing-bottom { padding-bottom: 6rem; }

        /* ─── SEARCH BAR ─── */
        .search-container {
            position: relative;
            max-width: 700px;
            margin: 0 auto;
        }

        .search-input {
            width: 100%;
            padding: 1.2rem 1.5rem 1.2rem 3.5rem;
            font-size: 1.05rem;
            color: var(--ink-dark);
            background: var(--surface-card);
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0,0,0,0.02);
        }

        .search-input:focus {
            outline: none;
            border-color: var(--brand-blue);
            box-shadow: 0 8px 25px rgba(40,151,201,0.15);
        }

        .search-icon {
            position: absolute;
            left: 1.5rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--brand-blue);
            font-size: 1.1rem;
        }

        /* ─── ARTICLE CARDS ─── */
        .blog-card {
            background: var(--surface-card); 
            border: 1px solid var(--border-subtle);
            border-radius: 8px;
            display: flex; flex-direction: column; 
            transition: all 0.3s ease;
            overflow: hidden;
            height: 100%;
        }

        .blog-card:hover { 
            transform: translateY(-4px);
            box-shadow: 0 12px 24px rgba(0,0,0,0.06);
            border-color: var(--brand-teal);
        }

        .blog-img {
            width: 100%; aspect-ratio: 16/9;
            background: linear-gradient(135deg, rgba(40,151,201,0.1), rgba(6,215,184,0.1));
            display: flex; align-items: center; justify-content: center;
            color: var(--brand-blue); font-size: 2.5rem; 
            border-bottom: 1px solid var(--border-subtle);
        }

        .blog-body { padding: 2rem; display: flex; flex-direction: column; flex: 1; }
        .blog-tag { font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--brand-blue); margin-bottom: 0.75rem; }
        .blog-title { font-size: 1.3rem; color: var(--ink-dark); line-height: 1.4; margin-bottom: 1rem; }
        .blog-excerpt { font-size: 0.95rem; color: var(--ink-medium); line-height: 1.7; margin-bottom: 1.5rem; flex: 1; }
        .blog-meta { font-size: 0.85rem; color: var(--ink-light); display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: auto; }

        /* ─── CUSTOM PAGINATION ─── */
        .pagination { margin-bottom: 0; }
        
        .page-custom {
            color: var(--ink-dark);
            background-color: transparent;
            border: 1px solid var(--border-subtle);
            padding: 0.5rem 1rem;
            margin: 0 0.2rem;
            border-radius: 4px;
            transition: all 0.3s ease;
        }

        .page-custom:hover {
            color: var(--brand-blue);
            border-color: var(--brand-blue);
            background-color: transparent;
        }

        .page-item.active .page-custom {
            background-color: var(--brand-blue);
            border-color: var(--brand-blue);
            color: #ffffff;
        }

        .page-item.disabled .page-custom {
            color: var(--border-subtle);
            pointer-events: none;
            background-color: transparent;
        }
        
        
/* ─── CUSTOM DROPDOWN STYLES ─── */
.custom-brand-dropdown {
    cursor: pointer;
    /* 1. Remove the default, ugly Windows/Mac arrow */
    appearance: none; 
    -webkit-appearance: none;
    -moz-appearance: none;
    
    /* 2. Inject a custom, sleek SVG arrow using your Brand Blue */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232897C9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.2rem;
    
    /* 3. Perfect alignment logic */
    padding: 16px 40px 16px 20px !important; /* The 40px right padding prevents text from hiding under the arrow */
    height: 100%; /* Tells the box to stretch to match the search bar next to it */
    min-height: 58px; /* A safe fallback height */
    background-color: #ffffff;
}

/* Ensure the sleek blue focus ring applies here too */
.custom-brand-dropdown:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 4px rgba(40, 151, 201, 0.1);
}