/* =========================================
   Year Header Styling
   ========================================= */
.year-stats-label {
    font-size: 32px;
    line-height: 40px;
    color: #004562 !important;
    font-family: Lato, sans-serif;
    font-weight: 600;
    margin: 0;
    margin-bottom: 50px !important;
}

/* =========================================
   Grid Layout (Identical gaps and widths)
   ========================================= */
.year-stats-container--our-impact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px; /* Consistent 40px gap for everything */
    margin-top: 30px;
}

.year-stats-container--our-impact .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
    /* ALL items get the exact same width (1/3rd minus the gap). 
       This forces row 1 to have 3 items, and row 2 to center its 2 items 
       with the exact same gap size between them. */
    width: calc(33.333% - 27px); 
}

.year-stats-container--our-impact .stat-details {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* =========================================
   Typography
   ========================================= */
.year-stats-container--our-impact .stat-number {
    color: #056891;
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
}

.year-stats-container--our-impact .stat-title {
    color: #686868;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}

/* =========================================
   Mobile Layout
   ========================================= */
@media (max-width: 768px) {
    /* Switch to 2 items per row on tablets */
    .year-stats-container--our-impact .stat-item {
        /*width: calc(50% - 20px); */
    }
}