/* Reused recognition cards from csc-page.css and numbers from about-page.css. */
.csc-awards { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 80px }
.csc-award { display: flex; align-items: center; gap: 24px; min-height: 184px; padding: 32px; border-radius: 16px; background: #fff; box-shadow: 0 4px 24px rgba(21, 28, 40, .06) }
.csc-award h3 { font: 400 20px/28px var(--text-serif) }
.csc-award p { margin-top: 12px; font-size: 14px; line-height: 22px; color: #4a5462 }
.csc-award-logo { flex: none; object-fit: contain }
.csc-unstop-logo { width: clamp(180px, 41%, 232px); height: auto }
.csc-pib-logo { width: 120px; height: 120px }
.csc-award-pib h3 { font-size: 28px; line-height: 34px }
.csc-award-pib p { margin-top: 4px; font-size: 13px; line-height: normal }
.csc-pill-dark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    margin-top: 16px;
    padding: 0 20px;
    border-radius: 1000px;
    background: var(--navy);
    color: #fff;
    font-size: 13px;
    font-weight: 700
}
.csc-pill-dark svg, .csc-tweet-link svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round }
.csc-pill-dark:hover { background: #0b2e6b }
.csc-tweet { position: relative; display: flex; gap: 12px; margin-top: 40px; padding: 36px 56px 36px 16px; border-radius: 16px; background: #fff; box-shadow: 0 4px 24px rgba(21, 28, 40, .06) }
.csc-tweet-avatar { display: flex; flex: none; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #f1e8ff; color: #7c3aed; font-size: 20px; font-weight: 700 }
.csc-tweet-body { flex: 1; min-width: 0 }
.csc-tweet-head { display: flex; justify-content: space-between; gap: 12px }
.csc-tweet-name { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 700; line-height: 19px }
.csc-tweet-handle { margin-top: 8px; font-size: 14px; line-height: 17px; color: #6b7280 }
.csc-x-logo { flex: none; margin: 8px -40px 0 0 }
.csc-tweet-text { margin-top: 8px; font-size: 16px; line-height: 24px; color: #1f2937 }
.csc-tweet-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 47px;
    margin-top: 14px;
    border-radius: 10px;
    background: #ececec;
    color: var(--navy);
    font-size: 14px;
    font-weight: 700
}
.csc-tweet-link:hover { background: #e2e2e2 }
.numbers-section {
    position: relative;
    overflow: hidden;
    min-height: 946px;
    padding: 80px var(--gutter) 54px;
    background: linear-gradient(114.34deg, #fdf8f6 .96%, #d6e4f2 98.42%)
}
.map-pattern { position: absolute; left: 9px; top: -10px; width: 536px; height: 668px; object-fit: cover; opacity: .05; pointer-events: none }
.numbers-section .section-heading { position: relative }
.numbers-stage { position: relative; width: 886px; height: 658px; margin: 86px auto 0 }
.numbers-stage .bubble {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    line-height: normal
}
.numbers-stage .bubble strong { font: 400 36px/normal var(--display) }
.numbers-stage .bubble span { font-size: 14px; font-weight: 500 }
.numbers-stage .bubble-students { left: 0; top: 48px; width: 310px; height: 310px; gap: 4px; background: #092c4e }
.numbers-stage .bubble-students strong { font-size: 46px }
.numbers-stage .bubble-students span { font-size: 18px; opacity: .9 }
.numbers-stage .bubble-colleges { left: 330px; top: 0; width: 216px; height: 216px; gap: 4px; background: #0b3c68 }
.numbers-stage .bubble-colleges span { font-size: 16px }
.numbers-stage .bubble-flagship { left: 554px; top: 80px; width: 190px; height: 190px; background: #3b7eb9 }
.numbers-stage .bubble-flagship strong { font-size: 38px }
.numbers-stage .bubble-flagship span { font-size: 15px }
.numbers-stage .bubble-ministers { left: 718px; top: 234px; width: 168px; height: 168px; background: #9590f5 }
.numbers-stage .bubble-ministers strong { font-size: 34px }
.numbers-stage .bubble-leaders { left: 636px; top: 424px; width: 156px; height: 168px; background: #f47e24 }
.numbers-stage .bubble-chapters { left: 544px; top: 554px; width: 104px; height: 104px; gap: 0; background: #eca527 }
.numbers-stage .bubble-chapters strong { font-size: 22px }
.numbers-stage .bubble-chapters span { font-size: 12px }

.numbers-stage .stat-note { position: absolute; display: grid; grid-template-columns: 1px minmax(0, 1fr); column-gap: 8px; align-items: start }
.numbers-stage .stat-note strong {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font: 400 28px/normal var(--display)
}
.numbers-stage .stat-note::before { content: ""; grid-row: 2; align-self: stretch; background: #556b82 }
.numbers-stage .stat-note span { grid-row: 2; grid-column: 2; font-size: 12px; line-height: 1.4; color: #1a1a1a }
.numbers-stage .stat-growth { left: 340px; top: 224px; width: 260px; row-gap: 12px }
.numbers-stage .stat-growth strong { width: 100px; height: 100px; background: #0b3c68; color: #fff }
.numbers-stage .stat-growth::before { height: 34px }
.numbers-stage .stat-participation { left: 408px; top: 434px; width: 210px; row-gap: 8px }
.numbers-stage .stat-participation strong { width: 56px; height: 56px; background: #9cc2e6; color: #0b3c68; font-size: 16px }
.numbers-stage .stat-participation::before { height: 36px }

/* Rolling digits from conclave-animations.js inside the bubbles. */
.numbers-section .bubble [data-odometer] { position: relative }
.numbers-section .bubble [data-odometer] span { font: inherit; opacity: 1 }
.numbers-section .bubble [data-odometer] .odometer-value { opacity: 0 }
.numbers-section .bubble [data-odometer] .odometer-reels { position: absolute; top: 0; left: 0; display: flex }
.numbers-section .bubble [data-odometer] .odometer-digit { position: relative; height: 1.3em; overflow: hidden }
.numbers-section .bubble [data-odometer] .odometer-size { visibility: hidden }
.numbers-section .bubble [data-odometer] .odometer-strip { position: absolute; top: 0; left: 0 }
.numbers-section .bubble [data-odometer] .odometer-strip span { display: block; height: 1.3em; line-height: 1.3 }
@media (prefers-reduced-motion: reduce) {
    .numbers-section .bubble [data-odometer] .odometer-value { opacity: 1 }
    .numbers-section .bubble [data-odometer] .odometer-reels { display: none }
}


/* Same Conclave navbar and interactions, with dark text for the white home hero.
   Only the navbar logo is omitted; the hero retains its Building India identity. */
:root { --gold: #F5B123; }
.site-header {
    position: relative;
    left: auto;
    top: auto;
    width: calc(100% - 2 * var(--header-edge));
    max-width: 1280px;
    margin: 0 auto;
    height: 96px;
    justify-content: flex-end;
    color: #151c28;
}
.site-header nav { padding-top: 16px; font-size: 14px; gap: 30px; }
.site-header .work-toggle { color: inherit; }
.site-header #main-nav .contact-button,
.site-header #main-nav .contact-button:hover {
    margin-left: -14px;
    padding: 12px 20px;
    background: var(--gold);
    color: #00123a;
    box-shadow: none;
    transform: none;
    transition: none;
}
/* Same hover as the About page (site-shell.css). */
.site-header #main-nav .contact-button:hover { background: #e39e0e; }
.site-header .work-links a:hover { background: transparent; }

/* Use the actual Conclave artwork rather than approximated CSS circles. */
.pattern { position: relative; isolation: isolate; overflow: hidden; }
.pattern::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    width: 537px;
    height: 612px;
    max-width: 65%;
    background: url('../new_assests/nbcsc/what_bg.png') right top / contain no-repeat;
    opacity: .055;
    pointer-events: none;
}
.pattern::after { content: none; }
.pattern > .wrap { position: relative; z-index: 1; }
.mentions {
    padding: 80px 0;
    height: auto;
    min-height: 0;
    background: linear-gradient(115deg, #faf6f5, #d3e5f2);
}
.mentions h2 { margin-bottom: 0; }
.mentions .csc-awards { margin-top: 40px; }
.csc-award, .csc-tweet { line-height: 1.5; }
.csc-tweet-head svg { display: inline-block; }

/* Overlay rises visually through the photo without moving the card or title. */
.initiative-entry { min-width: 0; }
.initiative-card {
    --card-rgb: 40, 152, 247;
    position: relative;
    isolation: isolate;
    display: block;
    background: rgb(var(--card-rgb));
    border-radius: 16px;
    overflow: hidden;
    transform: none;
}
.initiative-entry:nth-child(2) .initiative-card { --card-rgb: 49, 93, 164; }
.initiative-entry:nth-child(3) .initiative-card { --card-rgb: 247, 178, 27; }
.initiative-card:hover { transform: none; }
.initiative-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(var(--card-rgb), .12) 0%, rgba(var(--card-rgb), .5) 32%, rgba(var(--card-rgb), .9)  60%, rgb(var(--card-rgb)) 80%);
    opacity: 0;
    transition: opacity 600ms cubic-bezier(.22, 1, .36, 1);
}
.initiative-card h3 {
    position: relative;
    z-index: 2;
    font-size: 30px;
    padding: 23px 5px;
    background: transparent;
}
.initiative-card h3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: rgba(255, 255, 255, .55);
    opacity: 0;
    transform: scaleX(.75);
    transition: opacity 600ms cubic-bezier(.22, 1, .36, 1), transform 600ms cubic-bezier(.22, 1, .36, 1);
}
.initiative-card:focus-visible::after,
.initiative-card:focus-visible h3::before { opacity: 1; transform: none; }
@media (hover: hover) {
    .initiative-card:hover::after,
    .initiative-card:hover h3::before { opacity: 1; transform: none; }
}

/* About Us number cluster, including its original responsive layout and reels. */
.numbers-stage { padding: 0; list-style: none; }
.numbers-section .section-heading h2 { font: 400 44px/1.2 var(--display); }
.numbers-section .bubble { aspect-ratio: auto; }

/* Conclave gallery: same images, sizing, seamless motion and zoom interaction. */
.snapshots { text-align: center; color: #fff; background: linear-gradient(110deg, #00123a, #073763); padding: 80px 0; }
.snapshots > .container { width: 100%; max-width: none; }
.snapshots h2 { font-family: var(--text-serif); margin: 12px 0; }
.snapshots h2 + p { color: #a0aec0; font-size: 16px; line-height: 1.5; }
.snapshots .gallery { display: block; overflow: hidden; margin-top: 40px; }
.gallery-track { display: flex; width: max-content; animation: gallery-drift 40s linear infinite; }
.gallery-group { display: flex; flex: none; gap: 4px; padding-right: 4px; }
.snapshots .gallery .snapshot-frame:nth-child(n) { flex: none; width: 28.5vw; height: 320px; border-radius: 0; }
.snapshots .gallery .snapshot-frame:first-child { width: 42.5vw; }
.snapshots .gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery:hover .gallery-track, .gallery:focus-within .gallery-track { animation-play-state: paused; }
@keyframes gallery-drift { to { transform: translateX(-50%); } }

@media (max-width: 1199px) { .numbers-stage { zoom: .85; } }
@media (max-width: 1100px) {
    .csc-award { flex-direction: column; align-items: flex-start; }
    .initiative-card h3 { font-size: 24px; }
}
@media (max-width: 1023px) {
    .numbers-section { min-height: 0; }
    .numbers-stage { zoom: .72; }
}
@media (max-width: 767px) {
    .site-header { height: 80px; }
    .site-header .menu-toggle { color: #073763; border-color: #07376360; }
    .site-header nav { padding: 22px; gap: 20px; color: #fff; }
    .site-header #main-nav .contact-button { margin-left: 0; }
    .mentions { padding: 56px 0; }
    .csc-awards { grid-template-columns: 1fr; }
    .mentions .csc-awards { margin-top: 24px; }
    .csc-award { padding: 24px; }
    .csc-tweet { flex-direction: column; padding: 24px 20px; margin-top: 24px; }
    .csc-x-logo { margin-right: 0; }
    .csc-tweet-name { font-size: 14px; }
    .csc-tweet-text { font-size: 14px; }
    .numbers-section { padding: 56px 20px; }
    .numbers-section .section-heading h2 { font-size: 32px; }
    .map-pattern { width: 100%; height: 100%; }
    .numbers-stage { zoom: 1; width: auto; height: auto; margin: 40px 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 12px; }
    .numbers-stage .bubble, .numbers-stage .stat-note { position: static; }
    .numbers-stage .bubble-students { width: 220px; height: 220px; }
    .numbers-stage .bubble-students strong { font-size: 36px; }
    .numbers-stage .bubble-students span { font-size: 15px; }
    .numbers-stage .bubble-colleges { width: 160px; height: 160px; }
    .numbers-stage .bubble-colleges strong { font-size: 30px; }
    .numbers-stage .bubble-colleges span { font-size: 14px; }
    .numbers-stage .bubble-flagship { width: 150px; height: 150px; }
    .numbers-stage .bubble-flagship strong { font-size: 30px; }
    .numbers-stage .bubble-flagship span { font-size: 14px; }
    .numbers-stage .bubble-ministers { width: 140px; height: 140px; }
    .numbers-stage .bubble-ministers strong { font-size: 28px; }
    .numbers-stage .bubble-leaders { width: 130px; height: 140px; }
    .numbers-stage .bubble-leaders strong { font-size: 30px; }
    .numbers-stage .stat-note { width: calc(50% - 6px); max-width: 200px; }
    .numbers-stage .stat-growth strong { width: 80px; height: 80px; font-size: 24px; }
    .snapshots { padding: 56px 0; }
    .snapshots h2 + p { padding: 0 20px; }
    .snapshots .gallery .snapshot-frame:nth-child(n) { width: 80vw; height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
    .initiative-card::after, .initiative-card h3::before { transition: none; }
    .snapshots .gallery { overflow-x: auto; }
    .gallery-track { animation: none; }
    .gallery-group[aria-hidden="true"] { display: none; }
}

/* ---------- Our Impact in Numbers: Single Horizontal Row (Desktop) & Auto Carousel (Mobile) ---------- */
.numbers-section {
    min-height: 0;
    padding: 70px var(--gutter);
    background: linear-gradient(114.34deg, #fdf8f6 .96%, #d6e4f2 98.42%);
    position: relative;
    overflow: hidden;
}

.numbers-section .section-heading {
    position: relative;
    text-align: center;
    margin-bottom: 36px;
}

.numbers-section {
    min-height: auto;
    padding: clamp(48px, 4.5vw, 68px) var(--gutter);
}

.numbers-section .section-heading h2 {
    font: 400 clamp(32px, 3.5vw, 44px)/1.2 var(--display);
    color: #151c28;
    margin: 0;
    text-align: center;
}

.impact-bubbles-wrapper {
    position: relative;
    width: 100%;
    max-width: 1360px;
    margin: clamp(24px, 2.5vw, 42px) auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: clamp(65px, 6vw, 92px);
}

.impact-bubbles {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 1.05vw, 16px);
    width: 100%;
}

.impact-bubbles-wrapper .bubble {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    box-shadow: 0 10px 24px rgba(0, 18, 58, 0.12);
}

.impact-bubbles-wrapper .bubble strong {
    font: 400 var(--bubble-num-size, 26px)/1.15 var(--display);
    display: block;
}

.impact-bubbles-wrapper .bubble span {
    font-size: var(--bubble-lbl-size, 11px);
    font-weight: 500;
    line-height: 1.25;
    display: block;
    margin-top: 2px;
}

/* Strictly Decreasing Proportional Sizes on Desktop: 1 > 2 > 3 > 4 > 5 > 6 > 7 > 8 */
.impact-bubbles-wrapper .bubble-students {
    background: #092c4e;
    width: clamp(142px, 11vw, 178px) !important;
    height: clamp(142px, 11vw, 178px) !important;
    --bubble-num-size: clamp(25px, 1.95vw, 33px);
    --bubble-lbl-size: clamp(10.5px, 0.78vw, 12.5px);
}
.impact-bubbles-wrapper .bubble-colleges {
    background: #0b3c68;
    width: clamp(124px, 9.4vw, 150px) !important;
    height: clamp(124px, 9.4vw, 150px) !important;
    --bubble-num-size: clamp(22px, 1.65vw, 28px);
    --bubble-lbl-size: clamp(10px, 0.72vw, 12px);
}
.impact-bubbles-wrapper .bubble-flagship {
    background: #3b7eb9;
    width: clamp(110px, 8.2vw, 132px) !important;
    height: clamp(110px, 8.2vw, 132px) !important;
    --bubble-num-size: clamp(20px, 1.5vw, 25px);
    --bubble-lbl-size: clamp(9.5px, 0.68vw, 11.5px);
}
.impact-bubbles-wrapper .bubble-ministers {
    background: #9590f5;
    width: clamp(98px, 7.3vw, 118px) !important;
    height: clamp(98px, 7.3vw, 118px) !important;
    --bubble-num-size: clamp(19px, 1.4vw, 23px);
    --bubble-lbl-size: clamp(9px, 0.64vw, 11px);
}
.impact-bubbles-wrapper .bubble-leaders {
    background: #f47e24;
    width: clamp(88px, 6.5vw, 105px) !important;
    height: clamp(88px, 6.5vw, 105px) !important;
    --bubble-num-size: clamp(18px, 1.3vw, 22px);
    --bubble-lbl-size: clamp(8.5px, 0.6vw, 10.5px);
}
.impact-bubbles-wrapper .bubble-chapters {
    background: #eca527;
    width: clamp(78px, 5.8vw, 94px) !important;
    height: clamp(78px, 5.8vw, 94px) !important;
    --bubble-num-size: clamp(17px, 1.2vw, 20px);
    --bubble-lbl-size: clamp(8.5px, 0.6vw, 10.5px);
}

/* Stat Notes (7th and 8th positions): Perfectly centered along the row centerline with text hanging below */
.impact-bubbles-wrapper .stat-note {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex-shrink: 0;
    white-space: normal;
}

.impact-bubbles-wrapper .stat-note::before {
    content: none !important;
    display: none !important;
}

.impact-bubbles-wrapper .stat-growth,
.impact-bubbles-wrapper .stat-participation {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
}

.impact-bubbles-wrapper .stat-note strong {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    margin-left: 6px;
}

.impact-bubbles-wrapper .stat-note .stat-note-content {
    position: absolute;
    top: calc(50% + clamp(42px, 3.2vw, 50px));
    left: 14px;
    border-left: 1.5px solid #556b82;
    padding-left: 8px;
    margin: 0;
    text-align: left;
}

.impact-bubbles-wrapper .stat-note .stat-note-content span {
    font-size: clamp(9.5px, 0.72vw, 11px);
    line-height: 1.35;
    color: #1a1a1a;
    font-weight: 500;
    display: block;
    text-align: left;
}

/* 7th Position: 3.3x Growth Stat Note */
.impact-bubbles-wrapper .stat-growth {
    width: clamp(118px, 8.5vw, 136px);
    height: clamp(68px, 5.1vw, 84px);
}
.impact-bubbles-wrapper .stat-growth strong {
    background: #0b3c68;
    color: #ffffff;
    width: clamp(68px, 5.1vw, 84px);
    height: clamp(68px, 5.1vw, 84px);
    font: 400 clamp(20px, 1.5vw, 26px)/1.1 var(--display);
    box-shadow: 0 8px 20px rgba(11, 60, 104, 0.18);
}
.impact-bubbles-wrapper .stat-growth .stat-note-content {
    max-width: clamp(114px, 8.2vw, 130px);
}

/* 8th Position: 70% Participation Stat Note */
.impact-bubbles-wrapper .stat-participation {
    width: clamp(108px, 7.8vw, 124px);
    height: clamp(58px, 4.4vw, 74px);
}
.impact-bubbles-wrapper .stat-participation strong {
    background: #9cc2e6;
    color: #0b3c68;
    width: clamp(58px, 4.4vw, 74px);
    height: clamp(58px, 4.4vw, 74px);
    font: 700 clamp(15px, 1.15vw, 20px)/1.1 var(--display);
    box-shadow: 0 6px 16px rgba(156, 194, 230, 0.35);
}
.impact-bubbles-wrapper .stat-participation .stat-note-content {
    max-width: clamp(104px, 7.5vw, 118px);
}

/* DESKTOP ANIMATION: All impact bubbles enter one by one from the RIGHT into a single row, static once placed */
@media (min-width: 768px) {
    #impactBubbles .impact-item,
    .impact-bubbles-wrapper .impact-item {
        opacity: 0;
        transform: translate3d(60px, 0, 0) scale(0.9);
        transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
                    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
        will-change: transform, opacity;
    }

    #impactBubbles.is-animated .impact-item,
    .impact-bubbles-wrapper.is-animated .impact-item {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }

    /* Stagger across all 8 items (delays 0ms to 910ms) */
    #impactBubbles.is-animated .impact-item:nth-child(1) { transition-delay: 0ms; }
    #impactBubbles.is-animated .impact-item:nth-child(2) { transition-delay: 130ms; }
    #impactBubbles.is-animated .impact-item:nth-child(3) { transition-delay: 260ms; }
    #impactBubbles.is-animated .impact-item:nth-child(4) { transition-delay: 390ms; }
    #impactBubbles.is-animated .impact-item:nth-child(5) { transition-delay: 520ms; }
    #impactBubbles.is-animated .impact-item:nth-child(6) { transition-delay: 650ms; }
    #impactBubbles.is-animated .impact-item:nth-child(7) { transition-delay: 780ms; }
    #impactBubbles.is-animated .impact-item:nth-child(8) { transition-delay: 910ms; }
}

@media (max-width: 1250px) and (min-width: 768px) {
    .impact-bubbles {
        gap: clamp(4px, 0.8vw, 12px);
        transform: scale(0.92);
        transform-origin: center center;
    }
}
@media (max-width: 950px) and (min-width: 768px) {
    .impact-bubbles {
        transform: scale(0.82);
    }
}

/* MOBILE: AUTO CAROUSEL - SLIDE RIGHT TO LEFT (one item at a time, looping infinitely) */
@media (max-width: 767px) {
    .numbers-section {
        padding: 50px 20px;
    }

    .impact-bubbles-wrapper {
        min-height: 290px;
        position: relative;
        overflow: hidden;
        padding-bottom: 0 !important;
    }

    .impact-groups,
    .impact-bubbles {
        display: grid;
        place-items: center;
        width: 100%;
        position: relative;
    }

    .impact-group {
        display: contents;
    }

    /* Initial state of next item: off-screen to the RIGHT */
    .impact-bubbles-wrapper .impact-item {
        grid-area: 1 / 1;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        margin: 0 auto;
        transform: translate3d(90px, 0, 0) scale(0.9);
        transition: transform 550ms cubic-bezier(0.2, 0.9, 0.3, 1),
                    opacity 500ms ease,
                    visibility 0s linear 550ms;
    }

    /* Active item in center */
    .impact-bubbles-wrapper .impact-item.mobile-active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate3d(0, 0, 0) scale(1);
        transition: transform 550ms cubic-bezier(0.2, 0.9, 0.3, 1),
                    opacity 500ms ease,
                    visibility 0s;
    }

    /* Exiting item slides out to the LEFT */
    .impact-bubbles-wrapper .impact-item.mobile-exit {
        opacity: 0;
        visibility: hidden;
        transform: translate3d(-90px, 0, 0) scale(0.9);
        transition: transform 550ms cubic-bezier(0.2, 0.9, 0.3, 1),
                    opacity 500ms ease,
                    visibility 0s linear 550ms;
    }

    /* Mobile circular bubble sizing */
    .impact-bubbles-wrapper .bubble {
        width: 220px !important;
        height: 220px !important;
        --bubble-num-size: 34px !important;
        --bubble-lbl-size: 14px !important;
    }

    /* Mobile stat-note layout */
    .impact-bubbles-wrapper .stat-note {
        width: 100% !important;
        height: auto !important;
        max-width: 260px;
        align-items: center;
        text-align: center;
        gap: 16px;
    }

    .impact-bubbles-wrapper .stat-growth strong {
        width: 125px !important;
        height: 125px !important;
        font-size: 38px !important;
        margin-left: 0 !important;
    }

    .impact-bubbles-wrapper .stat-participation strong {
        width: 95px !important;
        height: 95px !important;
        font-size: 28px !important;
        margin-left: 0 !important;
    }

    .impact-bubbles-wrapper .stat-note .stat-note-content {
        position: static !important;
        top: auto !important;
        left: auto !important;
        border-left: 2px solid #556b82;
        padding-left: 12px;
        margin: 0 !important;
        max-width: 240px;
        text-align: left;
    }

    .impact-bubbles-wrapper .stat-note .stat-note-content span {
        font-size: 14px;
        line-height: 1.45;
        color: #1a1a1a;
        font-weight: 500;
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .impact-bubbles .impact-item {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        visibility: visible !important;
    }
}