/* 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-section .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-section .bubble strong { font: 400 36px/normal var(--display) }
.numbers-section .bubble span { font-size: 14px; font-weight: 500 }
.numbers-section .bubble-students { left: 0; top: 48px; width: 310px; height: 310px; gap: 4px; background: #092c4e }
.numbers-section .bubble-students strong { font-size: 46px }
.numbers-section .bubble-students span { font-size: 18px; opacity: .9 }
.numbers-section .bubble-colleges { left: 330px; top: 0; width: 216px; height: 216px; gap: 4px; background: #0b3c68 }
.numbers-section .bubble-colleges span { font-size: 16px }
.numbers-section .bubble-flagship { left: 554px; top: 80px; width: 190px; height: 190px; background: #3b7eb9 }
.numbers-section .bubble-flagship strong { font-size: 38px }
.numbers-section .bubble-flagship span { font-size: 15px }
.numbers-section .bubble-ministers { left: 718px; top: 234px; width: 168px; height: 168px; background: #9590f5 }
.numbers-section .bubble-ministers strong { font-size: 34px }
.numbers-section .bubble-leaders { left: 636px; top: 424px; width: 156px; height: 168px; background: #f47e24 }
.numbers-section .bubble-chapters { left: 544px; top: 554px; width: 104px; height: 104px; gap: 0; background: #eca527 }
.numbers-section .bubble-chapters strong { font-size: 22px }
.numbers-section .bubble-chapters span { font-size: 12px }

.stat-note { position: absolute; display: grid; grid-template-columns: 1px minmax(0, 1fr); column-gap: 8px; align-items: start }
.stat-note strong {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font: 400 28px/normal var(--display)
}
.stat-note::before { content: ""; grid-row: 2; align-self: stretch; background: #556b82 }
.stat-note span { grid-row: 2; grid-column: 2; font-size: 12px; line-height: 1.4; color: #1a1a1a }
.stat-growth { left: 340px; top: 224px; width: 260px; row-gap: 12px }
.stat-growth strong { width: 100px; height: 100px; background: #0b3c68; color: #fff }
.stat-growth::before { height: 34px }
.stat-participation { left: 408px; top: 434px; width: 210px; row-gap: 8px }
.stat-participation strong { width: 56px; height: 56px; background: #9cc2e6; color: #0b3c68; font-size: 16px }
.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% - 160px);
    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;
}
.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) {
    .site-header { width: calc(100% - 64px); }
    .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 { width: calc(100% - 40px); 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-section .bubble, .stat-note { position: static; }
    .numbers-section .bubble-students { width: 220px; height: 220px; }
    .numbers-section .bubble-students strong { font-size: 36px; }
    .numbers-section .bubble-students span { font-size: 15px; }
    .numbers-section .bubble-colleges { width: 160px; height: 160px; }
    .numbers-section .bubble-colleges strong { font-size: 30px; }
    .numbers-section .bubble-colleges span { font-size: 14px; }
    .numbers-section .bubble-flagship { width: 150px; height: 150px; }
    .numbers-section .bubble-flagship strong { font-size: 30px; }
    .numbers-section .bubble-flagship span { font-size: 14px; }
    .numbers-section .bubble-ministers { width: 140px; height: 140px; }
    .numbers-section .bubble-ministers strong { font-size: 28px; }
    .numbers-section .bubble-leaders { width: 130px; height: 140px; }
    .numbers-section .bubble-leaders strong { font-size: 30px; }
    .stat-note { width: calc(50% - 6px); max-width: 200px; }
    .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; }
}