/* =========================================================
   SPENDING BEHAVIOR ANALYSIS
   PROJECT CASE STUDY
========================================================= */


/* =========================================================
   PAGE
========================================================= */

.case-study-page {
    background: #232324;
    color: #ffffff;
    font-family: "Poppins", sans-serif;
}


/* =========================================================
   PROJECT HERO
========================================================= */

.case-study-page .project-hero {
    position: relative;

    max-width: 900px;

    padding:
        42px 0 55px;
}


.case-study-page .project-eyebrow {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 14px;

    color: #ebb020;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.case-study-page .project-eyebrow span {
    opacity: 0.45;
}


.case-study-page .project-hero h1 {
    max-width: 850px;

    margin:
        0 0 20px;

    color: #ffffff;

    font-size:
        clamp(40px,
            6vw,
            71px);

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -2px;
}


.case-study-page .project-hero h1 span {
    color: #ebb020;
}


.case-study-page .project-hero-description {
    max-width: 720px;

    margin-bottom: 25px;

    color: #b9babd;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   TECH TAGS
========================================================= */

.case-study-page .project-tech-list,
.case-study-page .project-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}


.case-study-page .project-tech-list span,

.case-study-page .project-tags span {

    display: inline-flex;

    align-items: center;

    padding:
        6px 11px;

    border:
        1px solid rgba(235,
            176,
            32,
            0.25);

    border-radius: 50px;

    background:
        rgba(235,
            176,
            32,
            0.055);

    color: #d9d9da;

    font-size: 14px;
}

/* Smaller tags inside Project Info sidebar only */

.case-study-page .project-sidebar .project-tags span {

    padding: 5px 10px;

    font-size: 13px;

}

/* =========================================================
   HERO BUTTONS
========================================================= */

.case-study-page .project-hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 29px;
}


.case-study-page .project-primary-btn,

.case-study-page .project-secondary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding:
        11px 20px;

    border-radius: 50px;

    font-size: 16px;

    font-weight: 600;

    transition:
        transform 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        background-color 0.3s ease,
        box-shadow 0.3s ease;
}


.case-study-page .project-primary-btn {

    border:
        1px solid #ebb020;

    background:
        #ebb020;

    color:
        #1c1c1e !important;
}


.case-study-page .project-primary-btn:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 30px rgba(235,
            176,
            32,
            0.18);
}


.case-study-page .project-secondary-btn {

    border:
        1px solid rgba(255,
            255,
            255,
            0.13);

    background:
        transparent;

    color:
        #ffffff !important;
}


.case-study-page .project-secondary-btn:hover {

    transform:
        translateY(-2px);

    border-color:
        #ebb020;

    color:
        #ebb020 !important;
}


/* =========================================================
   CAROUSEL
========================================================= */

.case-study-page .portfolio-page-carousel {

    margin-bottom: 35px;

    overflow: hidden;

    border-radius: 18px;

    background:
        #292a2e;

    box-shadow:
        0 20px 55px rgba(0,
            0,
            0,
            0.22);
}


.case-study-page .portfolio-page-carousel .entry-image img {

    display: block;

    width: 100%;

    border-radius: 18px;
}


/* =========================================================
   KPI / PROJECT HIGHLIGHTS
========================================================= */

.case-study-page .project-stats {

    display: grid;

    grid-template-columns:
        repeat(2,
            minmax(0, 1fr));

    gap: 14px;

    margin:
        35px 0 85px;
}


.case-study-page .project-stat-card {

    position: relative;

    min-width: 0;

    min-height: 160px;

    padding: 22px;

    overflow: hidden;

    border:
        1px solid rgba(255,
            255,
            255,
            0.07);

    border-radius: 16px;

    background:
        linear-gradient(145deg,
            rgba(255,
                255,
                255,
                0.045),
            rgba(255,
                255,
                255,
                0.015));

    transition:
        transform 0.3s ease,
        border-color 0.3s ease;
}


.case-study-page .project-stat-card::before {

    content: "";

    position: absolute;

    width: 90px;

    height: 90px;

    top: -40px;

    right: -40px;

    border-radius: 50%;

    background:
        rgba(235,
            176,
            32,
            0.07);

    filter:
        blur(16px);
}


.case-study-page .project-stat-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(235,
            176,
            32,
            0.32);
}


.case-study-page .stat-icon {

    margin-bottom: 18px;

    color:
        #ebb020;

    font-size:
        24px;
}


.case-study-page .stat-label {

    display: block;

    margin-bottom: 5px;

    color:
        #8f9093;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;
}


.case-study-page .project-stat-card strong {

    display: block;

    margin-bottom:
        4px;

    color:
        #ffffff;

    font-size:
        20px;

    font-weight:
        600;

    line-height:
        1.35;
}


.case-study-page .project-stat-card small {

    color:
        #999a9d;

    font-size:
        14px;
}


/* =========================================================
   PROJECT SECTIONS
========================================================= */

.case-study-page .project-section {

    position: relative;

    margin:
        0 0 100px;
}


.case-study-page .project-section-heading {

    max-width:
        700px;

    margin-bottom:
        32px;
}


.case-study-page .project-section-heading>span {

    display: block;

    margin-bottom:
        8px;

    color:
        #ebb020;

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        2px;

    text-transform:
        uppercase;
}


.case-study-page .project-section-heading h2 {

    margin:
        0 0 12px;

    color:
        #ffffff;

    font-size:
        clamp(30px,
            4vw,
            38px);

    font-weight:
        600;

    line-height:
        1.25;
}


.case-study-page .project-section-heading p,

.case-study-page .project-section>p {

    color:
        #b8b9bb;

    line-height:
        1.8;
}


.case-study-page .project-lead {

    color:
        #ededee !important;

    font-size:
        20px;

    line-height:
        1.85;
}


/* =========================================================
   DATASET
========================================================= */

.case-study-page .dataset-grid {

    display: grid;

    grid-template-columns:
        repeat(2,
            minmax(0, 1fr));

    gap: 12px;
}


.case-study-page .dataset-card {

    display: flex;

    align-items: center;

    gap: 14px;

    min-width: 0;

    padding: 18px;

    border:
        1px solid rgba(255,
            255,
            255,
            0.065);

    border-radius:
        14px;

    background:
        #292a2e;

    transition:
        border-color 0.3s ease,
        transform 0.3s ease;
}


.case-study-page .dataset-card:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(235,
            176,
            32,
            0.24);
}


.case-study-page .dataset-card>i {

    flex:
        0 0 42px;

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        11px;

    background:
        rgba(235,
            176,
            32,
            0.07);

    color:
        #ebb020;

    font-size:
        21px;
}


.case-study-page .dataset-card strong,

.case-study-page .dataset-card span {

    display: block;
}


.case-study-page .dataset-card strong {

    margin-bottom:
        3px;

    color:
        #ffffff;

    font-size:
        16px;

    font-weight:
        600;
}


.case-study-page .dataset-card span {

    color:
        #a4a5a8;

    font-size:
        14px;

    line-height:
        1.5;
}


/* =========================================================
   METHODOLOGY
========================================================= */

.case-study-page .method-grid {

    display: grid;

    grid-template-columns:
        repeat(2,
            minmax(0, 1fr));

    gap:
        14px;
}


.case-study-page .method-card {

    position: relative;

    min-width: 0;

    min-height:
        250px;

    padding:
        23px;

    border:
        1px solid rgba(255,
            255,
            255,
            0.07);

    border-radius:
        16px;

    background:
        #292a2e;

    transition:
        border-color 0.3s ease,
        transform 0.3s ease;
}


.case-study-page .method-card:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(235,
            176,
            32,
            0.28);
}


.case-study-page .method-number {

    position:
        absolute;

    top:
        18px;

    right:
        18px;

    color:
        rgba(235,
            176,
            32,
            0.27);

    font-size:
        27px;

    font-weight:
        700;
}


.case-study-page .method-icon {

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        22px;

    border-radius:
        12px;

    background:
        rgba(235,
            176,
            32,
            0.07);

    color:
        #ebb020;

    font-size:
        21px;
}


.case-study-page .method-card h4 {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        21px;

    font-weight:
        600;
}


.case-study-page .method-card>strong {

    display:
        block;

    margin:
        3px 0 12px;

    color:
        #ebb020;

    font-size:
        13px;

    letter-spacing:
        1.2px;
}


.case-study-page .method-card p {

    margin:
        0;

    color:
        #a7a8aa;

    font-size:
        15px;

    line-height:
        1.75;
}


/* =========================================================
   CHART GRID
========================================================= */

.case-study-page .chart-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2,
            minmax(0, 1fr));

    gap:
        18px;
}


.case-study-page .chart-card {

    min-width:
        0;

    padding:
        22px;

    overflow:
        hidden;

    border:
        1px solid rgba(255,
            255,
            255,
            0.065);

    border-radius:
        18px;

    background:
        #292a2e;

    transition:
        border-color 0.3s ease;
}


.case-study-page .chart-card:hover {

    border-color:
        rgba(235,
            176,
            32,
            0.23);
}


.case-study-page .chart-card-wide {

    grid-column:
        1 / -1;
}


.case-study-page .chart-card-header>span {

    display:
        block;

    margin-bottom:
        5px;

    color:
        #85868a;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        1.2px;

    text-transform:
        uppercase;
}


.case-study-page .chart-card-header h3 {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        19px;

    font-weight:
        600;

    line-height:
        1.4;
}


.case-study-page .chart-container {

    position:
        relative;

    width:
        100%;

    height:
        300px;

    margin-top:
        20px;
}


.case-study-page .chart-container-small {

    height:
        280px;
}


.case-study-page .chart-container-wide {

    height:
        330px;
}


.case-study-page .chart-container canvas {

    max-width:
        100% !important;

    max-height:
        100% !important;
}


.case-study-page .chart-insight {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    margin-top:
        18px;

    padding:
        13px;

    border-left:
        2px solid #ebb020;

    border-radius:
        4px 10px 10px 4px;

    background:
        rgba(235,
            176,
            32,
            0.045);
}


.case-study-page .chart-insight>i {

    margin-top:
        2px;

    color:
        #ebb020;

    font-size:
        17px;
}


.case-study-page .chart-insight p {

    margin:
        0;

    color:
        #aeb0b2;

    font-size:
        14px;

    line-height:
        1.65;
}


.case-study-page .chart-insight strong {

    color:
        #e7e7e7;
}


/* =========================================================
   BUSINESS IMPACT
========================================================= */

.case-study-page .impact-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2,
            minmax(0, 1fr));

    gap:
        14px;
}


.case-study-page .impact-card {

    position:
        relative;

    min-width:
        0;

    min-height:
        230px;

    padding:
        24px;

    border:
        1px solid rgba(255,
            255,
            255,
            0.065);

    border-radius:
        16px;

    background:
        #292a2e;

    transition:
        border-color 0.3s ease,
        transform 0.3s ease;
}


.case-study-page .impact-card:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(235,
            176,
            32,
            0.28);
}


.case-study-page .impact-card>span {

    position:
        absolute;

    top:
        18px;

    right:
        18px;

    color:
        rgba(235,
            176,
            32,
            0.27);

    font-size:
        26px;

    font-weight:
        700;
}


.case-study-page .impact-card>i {

    display:
        block;

    margin-bottom:
        28px;

    color:
        #ebb020;

    font-size:
        27px;
}


.case-study-page .impact-card h4 {

    margin-bottom:
        10px;

    color:
        #ffffff;

    font-size:
        20px;

    font-weight:
        600;
}


.case-study-page .impact-card p {

    margin:
        0;

    color:
        #a4a5a7;

    font-size:
        15px;

    line-height:
        1.75;
}

/* =========================================================
   STATISTICAL SUMMARY
========================================================= */

.case-study-page .stats-summary-grid {

    display: grid;

    grid-template-columns:
        repeat(2,
            minmax(0, 1fr));

    gap: 12px;

    margin-top: 28px;

    margin-bottom: 26px;

}


.case-study-page .stats-summary-item {

    padding: 18px;

    border:
        1px solid rgba(255,
            255,
            255,
            0.065);

    border-radius: 13px;

    background:
        rgba(255,
            255,
            255,
            0.02);

}


.case-study-page .stats-summary-item span {

    display: block;

    margin-bottom: 6px;

    color: #88898d;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

}


.case-study-page .stats-summary-item strong {

    display: block;

    color: #ebb020;

    font-size: 25px;

    font-weight: 600;

}

/* =========================================================
   GEOGRAPHIC ANALYSIS
========================================================= */

.case-study-page .geographic-analysis-card {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr) minmax(0, 0.9fr);

    gap: 26px;

    padding: 28px;

    border:
        1px solid rgba(255, 255, 255, 0.065);

    border-radius: 18px;

    background: #292a2e;

}


/* =========================================================
   LEFT SIDE - REGION VISUAL
========================================================= */

.case-study-page .geographic-visual {

    padding: 25px;

    border:
        1px solid rgba(255, 255, 255, 0.06);

    border-radius: 15px;

    background:
        rgba(255, 255, 255, 0.018);

}


.case-study-page .geo-visual-header {

    margin-bottom: 28px;

}


.case-study-page .geo-visual-header>span {

    display: block;

    margin-bottom: 5px;

    color: #77787c;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.4px;

}


.case-study-page .geo-visual-header h3 {

    margin: 0;

    color: #ffffff;

    font-size: 23px;

    font-weight: 600;

}


/* =========================================================
   REGION ROW
========================================================= */

.case-study-page .geo-region {

    margin-bottom: 24px;

}


.case-study-page .geo-region:last-of-type {

    margin-bottom: 0;

}


.case-study-page .geo-region-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 10px;

}


.case-study-page .geo-region-name {

    display: flex;

    align-items: center;

    gap: 9px;

}


.case-study-page .geo-region-name strong {

    color: #d8d8da;

    font-size: 15px;

    font-weight: 500;

}


.case-study-page .geo-dot {

    width: 8px;

    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: #66676b;

}


.case-study-page .geo-region-primary .geo-dot {

    background: #ebb020;

    box-shadow:
        0 0 12px rgba(235, 176, 32, 0.4);

}


.case-study-page .geo-percentage {

    color: #c2c3c5;

    font-size: 16px;

    font-weight: 600;

}


.case-study-page .geo-region-primary .geo-percentage {

    color: #ebb020;

}


/* =========================================================
   PROGRESS BAR
========================================================= */

.case-study-page .geo-progress {

    position: relative;

    width: 100%;

    height: 7px;

    overflow: hidden;

    margin-bottom: 7px;

    border-radius: 20px;

    background:
        rgba(255, 255, 255, 0.055);

}


.case-study-page .geo-progress span {

    display: block;

    height: 100%;

    border-radius: inherit;

    background: #68696d;

}


.case-study-page .geo-region-primary .geo-progress span {

    background:
        linear-gradient(90deg,
            #c88d11,
            #ebb020);

    box-shadow:
        0 0 12px rgba(235, 176, 32, 0.2);

}


.case-study-page .geo-region small {

    color: #77787b;

    font-size: 12px;

}


/* =========================================================
   QUICK COMPARISON
========================================================= */

.case-study-page .geo-summary {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    margin-top: 30px;

    padding-top: 22px;

    border-top:
        1px solid rgba(255, 255, 255, 0.06);

}


.case-study-page .geo-summary>div {

    padding: 14px;

    border:
        1px solid rgba(235, 176, 32, 0.13);

    border-radius: 11px;

    background:
        rgba(235, 176, 32, 0.035);

}


.case-study-page .geo-summary strong {

    display: block;

    margin-bottom: 3px;

    color: #ebb020;

    font-size: 22px;

    font-weight: 600;

}


.case-study-page .geo-summary span {

    color: #898a8d;

    font-size: 12px;

}


/* =========================================================
   RIGHT SIDE - INSIGHT
========================================================= */

.case-study-page .geographic-insight {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 12px 4px;

}


.case-study-page .map-eyebrow {

    display: block;

    margin-bottom: 8px;

    color: #ebb020;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.7px;

}


.case-study-page .geographic-insight>h3 {

    margin-bottom: 15px;

    color: #ffffff;

    font-size: 28px;

    font-weight: 600;

    line-height: 1.4;

}


.case-study-page .geographic-insight>p {

    margin-bottom: 22px;

    color: #aaabae;

    font-size: 15px;

    line-height: 1.8;

}


/* =========================================================
   HIGHLIGHT BOX
========================================================= */

.case-study-page .geo-highlight {

    display: flex;

    align-items: flex-start;

    gap: 11px;

    margin-bottom: 24px;

    padding: 14px;

    border-left:
        2px solid #ebb020;

    border-radius:
        4px 10px 10px 4px;

    background:
        rgba(235, 176, 32, 0.045);

}


.case-study-page .geo-highlight i {

    margin-top: 2px;

    color: #ebb020;

    font-size: 17px;

}


.case-study-page .geo-highlight p {

    margin: 0;

    color: #999a9d;

    font-size: 13px;

    line-height: 1.7;

}


/* =========================================================
   REGION RANKING
========================================================= */

.case-study-page .geo-ranking {

    display: flex;

    flex-direction: column;

}


.case-study-page .geo-rank-item {

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 10px 0;

    border-top:
        1px solid rgba(255, 255, 255, 0.055);

}


.case-study-page .geo-rank-number {

    color:
        rgba(235, 176, 32, 0.45);

    font-size: 16px;

    font-weight: 700;

}


.case-study-page .geo-rank-item div {

    flex: 1;

}


.case-study-page .geo-rank-item strong {

    display: block;

    color: #d5d6d8;

    font-size: 14px;

    font-weight: 500;

}


.case-study-page .geo-rank-item div>span {

    display: block;

    margin-top: 2px;

    color: #77787b;

    font-size: 12px;

}


/* =========================================================
   GEOGRAPHIC RESPONSIVE
========================================================= */

@media (max-width: 767px) {

    .case-study-page .geographic-analysis-card {

        grid-template-columns: 1fr;

        padding: 20px;

        gap: 28px;

    }


    .case-study-page .geographic-visual {

        padding: 20px;

    }


    .case-study-page .geographic-insight {

        padding: 0;

    }


    .case-study-page .geographic-insight>h3 {

        font-size: 24px;

    }

}

/* =========================================================
   BOTTOM LINE
========================================================= */

.case-study-page .project-bottom-line {

    position:
        relative;

    margin-top:
        20px;

    padding:
        35px;

    overflow:
        hidden;

    border:
        1px solid rgba(235,
            176,
            32,
            0.18);

    border-radius:
        18px;

    background:
        linear-gradient(135deg,
            rgba(235,
                176,
                32,
                0.07),
            rgba(255,
                255,
                255,
                0.018));
}


.case-study-page .project-bottom-line::after {

    content:
        "";

    position:
        absolute;

    width:
        220px;

    height:
        220px;

    top:
        -110px;

    right:
        -80px;

    border-radius:
        50%;

    background:
        rgba(235,
            176,
            32,
            0.07);

    filter:
        blur(45px);

    pointer-events:
        none;
}


.case-study-page .project-bottom-line>span {

    display:
        block;

    margin-bottom:
        12px;

    color:
        #ebb020;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        2px;
}


.case-study-page .project-bottom-line h3 {

    position:
        relative;

    z-index:
        1;

    max-width:
        650px;

    margin-bottom:
        13px;

    color:
        #ffffff;

    font-size:
        27px;

    font-weight:
        600;

    line-height:
        1.45;
}


.case-study-page .project-bottom-line p {

    position:
        relative;

    z-index:
        1;

    max-width:
        680px;

    margin:
        0;

    color:
        #abadb0;

    line-height:
        1.8;
}

/* =========================================================
   RESEARCH / CONTEXT SIDE NOTE
========================================================= */

.case-study-page .research-side-note {

    position: relative;

    z-index: 2;

    margin-top: 32px;

    padding: 25px;

    border:

        1px solid rgba(255,
            255,
            255,
            0.075);

    border-radius: 15px;

    background:

        rgba(0,
            0,
            0,
            0.16);

}


/* =========================================================
   NOTE HEADER
========================================================= */

.case-study-page .research-note-header {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 20px;

}


.case-study-page .research-note-icon {

    width: 42px;

    height: 42px;

    flex: 0 0 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:

        1px solid rgba(235,
            176,
            32,
            0.25);

    border-radius: 11px;

    background:

        rgba(235,
            176,
            32,
            0.065);

    color: #ebb020;

    font-size: 20px;

}


.case-study-page .research-note-header span {

    display: block;

    margin-bottom: 3px;

    color: #ebb020;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.7px;

}


.case-study-page .research-note-header h4 {

    margin: 0;

    color: #ffffff;

    font-size: 21px;

    font-weight: 600;

}


/* =========================================================
   NOTE TEXT
========================================================= */

.case-study-page .research-side-note>p {

    max-width: none;

    color: #a9aaad;

    font-size: 15px;

    line-height: 1.8;

}


.case-study-page .research-note-lead {

    color: #d0d1d3 !important;

    font-size: 15px !important;

}


/* =========================================================
   QUOTE / INTERPRETATION CALLOUT
========================================================= */

.case-study-page .research-callout {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin: 23px 0;

    padding: 17px;

    border-left:

        2px solid #ebb020;

    border-radius:

        4px 11px 11px 4px;

    background:

        rgba(235,
            176,
            32,
            0.05);

}


.case-study-page .research-callout>i {

    margin-top: 2px;

    color: #ebb020;

    font-size: 17px;

}


.case-study-page .research-callout p {

    margin: 0;

    color: #bcbdbf;

    font-size: 14px;

    line-height: 1.75;

}


/* =========================================================
   EVIDENCE LIST
========================================================= */

.case-study-page .research-evidence {

    margin-top: 25px;

    border-top:

        1px solid rgba(255,
            255,
            255,
            0.06);

}


.case-study-page .research-evidence-item {

    display: grid;

    grid-template-columns:
        75px minmax(0, 1fr);

    gap: 17px;

    padding: 20px 0;

    border-bottom:

        1px solid rgba(255,
            255,
            255,
            0.06);

}


.case-study-page .evidence-year {

    align-self: flex-start;

    display: inline-flex;

    justify-content: center;

    padding:

        5px 7px;

    border:

        1px solid rgba(235,
            176,
            32,
            0.2);

    border-radius: 50px;

    color: #ebb020;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.7px;

}


.case-study-page .research-evidence-item strong {

    display: block;

    margin-bottom: 5px;

    color: #e2e2e3;

    font-size: 15px;

    font-weight: 600;

}


.case-study-page .research-evidence-item p {

    margin: 0;

    color: #919296;

    font-size: 12px;

    line-height: 1.7;

}


/* =========================================================
   CAUTION / INTERPRETATION NOTE
========================================================= */

.case-study-page .research-caution {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-top: 22px;

    padding: 14px;

    border-radius: 10px;

    background:

        rgba(255,
            255,
            255,
            0.025);

}


.case-study-page .research-caution>i {

    margin-top: 2px;

    color: #8d8e91;

    font-size: 15px;

}


.case-study-page .research-caution p {

    margin: 0;

    color: #8f9093;

    font-size: 12px;

    line-height: 1.7;

}


.case-study-page .research-caution strong {

    color: #b9babc;

}


/* =========================================================
   SOURCES
========================================================= */

.case-study-page .research-sources {

    margin-top: 22px;

    padding-top: 17px;

    border-top:

        1px solid rgba(255,
            255,
            255,
            0.06);

}


.case-study-page .research-sources>span {

    display: block;

    margin-bottom: 5px;

    color: #727377;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.4px;

}


.case-study-page .research-sources p {

    margin: 0;

    color: #76777a;

    font-size: 12px;

    line-height: 1.6;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .case-study-page .research-side-note {

        padding: 20px;

    }


    .case-study-page .research-evidence-item {

        grid-template-columns: 1fr;

        gap: 9px;

    }


    .case-study-page .evidence-year {

        justify-self: flex-start;

    }

}

/* =========================================================
   BOTTOM LINE - EXTRA DETAILS
========================================================= */

.case-study-page .bottom-line-icon {

    position: relative;

    z-index: 1;

    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 22px;

    border:

        1px solid rgba(235,
            176,
            32,
            0.30);

    border-radius: 13px;

    background:

        rgba(235,
            176,
            32,
            0.08);

    color:

        #ebb020;

    font-size: 23px;

}


.case-study-page .bottom-line-actions {

    position: relative;

    z-index: 1;

    margin-top: 24px;

}


.case-study-page .bottom-line-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 11px 19px;

    border:

        1px solid #ebb020;

    border-radius: 50px;

    color:

        #ebb020 !important;

    font-size: 14px;

    font-weight: 600;

    transition:

        background-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;

}


.case-study-page .bottom-line-button:hover {

    transform:

        translateY(-2px);

    background:

        #ebb020;

    color:

        #222222 !important;

}

/* =========================================================
   PROJECT SIDEBAR
========================================================= */

.case-study-page .project-sidebar {

    position: sticky;

    top: 20px;

    width: 100%;

    /* Keep sidebar inside visible browser height */
    max-height: calc(100vh - 40px);

    box-sizing: border-box;

    padding: 24px;

    border: 1px solid rgba(255, 255, 255, 0.07);

    border-radius: 17px;

    background: #292a2e;

    /* Prevent the card itself from extending outside the screen */
    overflow-y: auto;
    overflow-x: hidden;

}


.case-study-page .project-sidebar-title {

    margin-bottom:
        22px;
}


.case-study-page .project-sidebar-title span {

    display:
        block;

    margin-bottom:
        3px;

    color:
        #ebb020;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        1.5px;
}


.case-study-page .project-sidebar-title h4 {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        23px;

    font-weight:
        600;
}


.case-study-page .project-info-item {

    padding: 12px 0;

    border-top: 1px solid rgba(255, 255, 255, 0.06);

}


.case-study-page .project-info-item>span {

    display:
        block;

    margin-bottom:
        6px;

    color:
        #77787c;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        1.2px;

    text-transform:
        uppercase;
}


.case-study-page .project-info-item>strong {

    display:
        block;

    color:
        #d9d9da;

    font-size:
        15px;

    font-weight:
        500;

    line-height:
        1.6;
}


.case-study-page .sidebar-github-btn {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    width:
        100%;

    margin-top:
        14px;

    padding:
        10px;

    border:
        1px solid #ebb020;

    border-radius:
        50px;

    color:
        #ebb020 !important;

    font-size:
        14px;

    font-weight:
        600;

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.case-study-page .sidebar-github-btn:hover {

    transform:
        translateY(-2px);

    background:
        #ebb020;

    color:
        #222222 !important;
}

/* =========================================================
   LET PROJECT - COMPACT STICKY SIDEBAR
   Keeps the full card visible without internal scrolling
========================================================= */

@media (min-width: 992px) {

    .case-study-page.let-case-study .project-sidebar {

        position: sticky;

        top: 18px;

        width: 100%;

        /* Remove internal scrolling */
        max-height: none;

        overflow: visible;

        /* Make the entire card fit better */
        padding: 18px;

    }


    /* Smaller heading area */

    .case-study-page.let-case-study .project-sidebar-title {

        margin-bottom: 14px;

    }


    .case-study-page.let-case-study .project-sidebar-title h4 {

        font-size: 22px;

        line-height: 1.25;

    }


    /* Compact each information row */

    .case-study-page.let-case-study .project-info-item {

        padding: 9px 0;

    }


    .case-study-page.let-case-study .project-info-item>span {

        margin-bottom: 4px;

        font-size: 12px;

        letter-spacing: 1.1px;

    }


    .case-study-page.let-case-study .project-info-item>strong {

        font-size: 14px;

        line-height: 1.45;

    }


    /* Compact sidebar tags */

    .case-study-page.let-case-study .project-sidebar .project-tags {

        gap: 5px;

    }


    .case-study-page.let-case-study .project-sidebar .project-tags span {

        padding: 4px 8px;

        font-size: 12px;

    }


    /* Compact GitHub button */

    .case-study-page.let-case-study .sidebar-github-btn {

        margin-top: 10px;

        padding: 8px 10px;

        font-size: 12px;

    }

}

/* =========================================================
   NAVIGATION BUTTONS
========================================================= */

.case-study-page .ajax-page-nav {

    padding-top: 10px;

    /* Space between top buttons and project content/sidebar */
    margin-bottom: 18px;

}

.case-study-page .ajax-page-nav .nav-item a {

    border:
        1px solid rgba(255,
            255,
            255,
            0.08);

    background:
        rgba(255,
            255,
            255,
            0.025);

    transition:
        border-color 0.3s ease,
        color 0.3s ease,
        background-color 0.3s ease;
}


.case-study-page .ajax-page-nav .nav-item a:hover {

    border-color:
        rgba(235,
            176,
            32,
            0.4);

    background:
        rgba(235,
            176,
            32,
            0.06);
}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 991px) {

    .case-study-page .project-hero {

        padding-top:
            25px;
    }


    .case-study-page .project-sidebar {

        position:
            static;

        margin-top:
            20px;
    }

}

/* =========================================================
   PROJECT SIDEBAR SCROLLBAR
========================================================= */

.case-study-page .project-sidebar {

    scrollbar-width: thin;

    scrollbar-color:
        rgba(235, 176, 32, 0.35) transparent;

}


.case-study-page .project-sidebar::-webkit-scrollbar {

    width: 4px;

}


.case-study-page .project-sidebar::-webkit-scrollbar-track {

    background: transparent;

}


.case-study-page .project-sidebar::-webkit-scrollbar-thumb {

    background:
        rgba(235,
            176,
            32,
            0.30);

    border-radius: 20px;

}

/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 767px) {

    .case-study-page .project-hero {

        padding:
            25px 0 40px;
    }


    .case-study-page .project-hero h1 {

        letter-spacing:
            -1px;
    }


    .case-study-page .project-hero-description {

        font-size:
            17px;
    }


    .case-study-page .project-hero-actions {

        flex-direction:
            column;

        align-items:
            stretch;
    }


    .case-study-page .project-primary-btn,

    .case-study-page .project-secondary-btn {

        width:
            100%;
    }


    .case-study-page .project-stats,

    .case-study-page .dataset-grid,

    .case-study-page .method-grid,

    .case-study-page .chart-grid,

    .case-study-page .impact-grid {

        grid-template-columns:
            1fr;
    }


    .case-study-page .chart-card-wide {

        grid-column:
            auto;
    }


    .case-study-page .project-section {

        margin-bottom:
            70px;
    }


    .case-study-page .chart-container,

    .case-study-page .chart-container-small,

    .case-study-page .chart-container-wide {

        height:
            260px;
    }


    .case-study-page .project-bottom-line {

        padding:
            25px 20px;
    }


    .case-study-page .project-bottom-line h3 {

        font-size:
            23px;
    }

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .case-study-page .project-stats {

        grid-template-columns:
            repeat(4,
                minmax(0, 1fr));
    }

}


/* =========================================================
   DESKTOP SIDEBAR HEIGHT
========================================================= */

@media (min-width: 992px) {

    .case-study-page .project-sidebar {

        max-height: calc(100vh - 40px);

    }

}