/* Figma 2559:4815: presentation only; existing interaction hooks are retained. */
body { color: #151c28; }
.site-header { height: 80px; }
/* Full-bleed so the background spans wide screens; padding keeps the 1108px grid centred. */
.hero { position: relative; isolation: isolate; max-width: none; padding: 0 max(166px,calc((100% - 1108px)/2)) 57px; }
/* Mentions gradient, running up behind the transparent header. */
.hero::after {
    content: ''; position: absolute; z-index: -2; pointer-events: none;
    inset: -80px 0 0;
    background: linear-gradient(136deg,#fdf8f6,#d6e4f2);
}
.hero::before {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    left: 0; top: -80px; width: 530px; height: 660px;
    background: url('../assets/about/figma/map-pattern.png') left top / contain no-repeat;
    opacity: .05;
}
.photo-grid { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; }
.hero-intro { grid-column: span 2; align-self: end; padding-bottom: 0; }
.hero-intro img { width: 145px; height: 76px; margin-bottom: 14px; }
.hero-intro p { font-size: 18px; line-height: 1.48; }
.tile { aspect-ratio: 177/168; }
.tile:has(> .brand-dots) img { filter: grayscale(1) brightness(.5); }
/* Figma row 1: intro, then the finalists tile ahead of the speaker tile. */
@media (min-width: 768px) {
    .hero-intro { order: -2; container-type: inline-size; }
    .photo-grid > .tile--lead { order: -1; }
    /* Scale with the 2-column intro (145px logo / 18px copy at 1440) so it never outgrows a tile. */
    .hero-intro img { width: min(145px, 40.5cqw); height: auto; margin-bottom: min(14px, 3.9cqw); }
    .hero-intro p { font-size: min(18px, 5.03cqw); }
}
.numbers-section, .mentions { background: linear-gradient(136deg,#fdf8f6,#d6e4f2); }
/* Figma 2559:4922: 80px padding, heading → bubbles 50px, 6 × 200px bubbles + 20px gaps (1300px) centred. */
.numbers-section { min-height: 464px; padding: 80px max(40px,calc((100% - 1300px)/2)); }
.numbers-section .section-heading h2, .initiatives h2, .mentions h2 {
    font: 400 45px/54px 'DM Serif Text',Georgia,serif;
}
.numbers-section .map-pattern { left: auto; right: 0; top: 0; width: 434px; height: 541px; opacity: .05; }
.numbers-section .impact-bubbles-wrapper { max-width: 1300px; margin: 50px auto 0; padding: 0; }
.numbers-section .impact-bubbles { gap: 20px; transform: none; justify-content: center; }
.numbers-section .impact-bubbles-wrapper .bubble {
    width: 200px !important; height: 200px !important; box-shadow: none;
    --bubble-num-size: 36px; --bubble-lbl-size: 18px;
}
.numbers-section .bubble > span { margin-top: 4px; }
.initiatives { height: auto; min-height: 597px; padding: 80px 0; background: linear-gradient(90deg,#00123a,#073763); }
.initiatives::before { content: none; }
.initiatives h2 { color: #fff; }
.initiative-card { --card-rgb: 41,152,255; }
.initiative-entry:nth-child(2) .initiative-card { --card-rgb: 245,177,35; }
.initiative-entry:nth-child(3) .initiative-card { --card-rgb: 46,90,167; }
.initiative-card img { aspect-ratio: 412/265; }
.initiative-card h3 { font: 700 30px/36px Helvetica,Arial,sans-serif; padding: 21px 5px; }
.mentions { padding: 80px 0; }
/* Keeps the 3 × 416px Figma cards intact when a scrollbar narrows a 1440px viewport. */
@media (min-width: 1101px) { .mentions .wrap { width: min(1280px, calc(100% - 128px)); } }
.mentions::before { width: 536px; height: 668px; max-width: none; background-image: url('../assets/about/figma/map-pattern.png'); opacity: .05; }
.mentions-carousel { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-top: 40px; align-items: stretch; }
.mentions-carousel > article {
    display: flex; flex-direction: column; align-items: stretch; gap: 16px;
    min-width: 0; min-height: 300px; margin: 0; padding: 19px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 28px;
    box-shadow: 0 8px 12px #0f172a0d;
}
.mentions .csc-unstop-logo { width: 111px; height: 44px; margin-bottom: 11px; }
.mentions .csc-pib-logo { width: 55px; height: 55px; border-radius: 50%; }
.mentions .csc-award h3, .mentions .csc-tweet-name { font: 400 24px/34px 'DM Serif Text',Georgia,serif; color: #0f172a; }
.mentions .csc-award p, .mentions .csc-tweet-text { font: 400 16px/24px Inter,Arial,sans-serif; color: #374151; margin-top: 4px; }
.mentions .csc-award-pib p { font: 400 14px/normal Helvetica,Arial,sans-serif; color: #64748b; }
.mentions .csc-tweet-avatar { width: 55px; height: 55px; background: #f3e8ff; color: #6d28d9; font-family: Inter,Arial,sans-serif; }
.mentions .csc-tweet-name svg, .mentions .csc-x-logo { display: none; }
.mentions .csc-tweet-handle { margin-top: 4px; font: 500 14px/17px Inter,Arial,sans-serif; }
.mentions .csc-tweet-body, .mentions .csc-award-pib > div { display: flex; flex-direction: column; flex: 1; }
.mentions .csc-pill-dark, .mentions .csc-tweet-link {
    width: 100%; min-height: 42px; height: auto; margin-top: auto; padding: 14px;
    display: flex; justify-content: center; gap: 8px; border-radius: 100px;
    background: #00123a; color: #fff; font: 500 13px/14px Helvetica,Arial,sans-serif;
}
.mentions .csc-tweet-link { margin-top: 16px; }
.mentions .csc-pill-dark svg, .mentions .csc-tweet-link svg { width: 14px; height: 14px; }
.mentions .csc-pill-dark:hover, .mentions .csc-tweet-link:hover { background: #0b2e6b; }
@media (min-width: 1101px) {
    .about-footer { min-height: 304px; }
    .about-footer .footer-bottom { margin-top: 40px; }
}
@media (min-width: 768px) and (max-width: 1399px) {
    .hero { padding-left: 11.53%; padding-right: 11.53%; }
    .numbers-section .impact-bubbles-wrapper .bubble {
        width: calc((100vw - 180px)/6) !important; height: calc((100vw - 180px)/6) !important;
        --bubble-num-size: clamp(21px,2.5vw,36px); --bubble-lbl-size: clamp(11px,1.25vw,18px);
    }
    .initiative-card h3 { font-size: clamp(18px,2.08vw,30px); }
}
@media (min-width: 768px) and (max-width: 1100px) {
    .numbers-section { min-height: 0; padding: 60px 32px; }
    .numbers-section .impact-bubbles-wrapper { margin-top: 40px; }
    .mentions-carousel > article { padding: 16px; }
    .mentions .csc-award h3, .mentions .csc-tweet-name { font-size: 21px; line-height: 28px; }
    .mentions .csc-award p, .mentions .csc-tweet-text { font-size: 14px; line-height: 21px; }
}
@media (max-width: 767px) {
    .site-header { height: 68px; }
    .hero { padding: 12px 18px 38px; }
    .hero::before { max-width: 100%; background-size: cover; }
    .photo-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .hero-intro { grid-column: 1/-1; display: block; padding: 8px 0 18px; }
    .hero-intro img { width: 212px; height: auto; margin: 0; }
    .hero-intro p { font-size: min(19px,calc(100cqw / 18.2)); margin-top: 16px; }
    .photo-grid .brand-dots:not(.brand-dots--mobile) { display: block; }
    /* The lead tile repeats the finalists photo; phones keep one copy. */
    .photo-grid > .tile--lead { display: none; }
    .numbers-section { min-height: 0; padding: 48px 18px; }
    .numbers-section .section-heading h2, .initiatives h2, .mentions h2 { font-size: 32px; line-height: 1.2; }
    .numbers-section .impact-bubbles-wrapper { margin-top: 28px; min-height: 260px; }
    .numbers-section .impact-bubbles { gap: 0; }
    .numbers-section .impact-bubbles-wrapper .bubble { width: 220px !important; height: 220px !important; --bubble-num-size: 36px; --bubble-lbl-size: 18px; }
    .initiatives { min-height: 0; padding: 48px 0; }
    .initiative-grid { grid-template-columns: 1fr; }
    .initiative-card h3 { font-size: 26px; line-height: 32px; padding: 20px 5px; }
    .mentions { padding: 48px 0; }
    html .mentions-carousel > article { min-height: 320px; padding: 20px; }
    .mentions .csc-award h3, .mentions .csc-tweet-name { font-size: 22px; line-height: 30px; }
}