/* About Us page. Reference: Figma "Nation-Building" node 2190:17103 (1440px frame, 1280px content).
   Base, header and footer live in site-shell.css, which must load first. */

/* Hero */
.about-hero {
    position: relative;
    height: 640px;
    padding: 178px var(--gutter) 0;
    color: #fff;
    background:
        linear-gradient(75deg, rgba(255, 255, 255, 0) 39.913%, rgba(0, 18, 58, .38) 89.494%),
        linear-gradient(90deg, #00123a 0%, rgba(7, 55, 99, .75) 50%, rgba(176, 192, 221, 0) 100%),
        url('../assets/about/figma/hero.jpg') center / cover no-repeat
}
.hero-back-link {
    position: absolute;
    top: 136px;
    left: var(--gutter);
    z-index: 4;
}
/* Same back link as the Impact Chapter page (impact-chapter.css) */
.hero-back-link a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 21px;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s ease, transform 0.2s ease;
}
.hero-back-link a:hover {
    color: var(--gold);
    transform: translateX(-3px);
}
.hero-copy { display: flex; flex-direction: column; gap: 24px; max-width: 751px }
.hero-heading { display: flex; flex-direction: column; gap: 16px }
.about-hero .eyebrow { color: var(--gold) }
.about-hero h1 { font: 400 54px/64.8px var(--display) }
.about-hero h1 span { color: var(--gold) }
.hero-tagline { font: italic 400 20px/22px var(--text-serif) }
.hero-description { max-width: 630px; font-size: 18px; line-height: 30px; color: #e5e5e5 }

/* Our Vision (Figma 2561:18044) */
.why-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 80px var(--gutter);
    background: linear-gradient(124deg, #fdf8f6 .96%, #d6e4f2 98.42%)
}
/* Shared background map pattern (Figma "Background Map Pattern", 5%). */
.why-section::before, .cta-section::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    top: -10px;
    width: 536px;
    height: 668px;
    background: url('../assets/about/figma/map-pattern.png') left top / cover no-repeat;
    opacity: .05;
    pointer-events: none
}
.why-section .section-heading { gap: 0; padding-bottom: 40px }
.why-section h2 { line-height: 52px }
.why-subtitle { font-size: 20px; font-weight: 500; line-height: 1.48; color: #151c28 }
.why-row { display: flex; align-items: center; gap: 40px }
.why-photo { flex: 0 1 640px; min-width: 0; height: 313px; object-fit: cover; border-radius: 4px; background: #e7e5e4 }
.why-copy { flex: 0 1 600px; display: flex; flex-direction: column; gap: 20px; font-size: 24px; line-height: 34px; color: #4a5462 }

/* How we do it */
.how-section {
    position: relative;
    overflow: hidden;
    padding: 80px var(--gutter);
    background: linear-gradient(180deg, #00123a 0%, #073763 50%, #2e5aa7 100%);
    color: #fff;
    min-height: 280px;
}
.how-section .section-heading {
    position: relative;
    max-width: 1060px;
    margin: 0 auto;
}
.how-section::before, .how-section::after {
    content: "";
    position: absolute;
    width: 1273.4px;
    height: 1273.4px;
    background: url('../assets/about/figma/glow.svg') center / contain no-repeat;
    pointer-events: none;
}
.how-section::before { left: -490.2px; top: -548.8px }
.how-section::after { right: -685.2px; top: -73.8px }

.how-cycling-title {
    font: 400 45px/54px var(--text-serif);
    min-height: 115px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    text-align: center;
}

.how-heading-cycling {
    display: inline-block;
    max-width: 100%;
    position: relative;
    text-align: center;
}

.how-heading-animated {
    display: inline;
    text-align: center;
}

.how-word {
    display: inline-block;
    white-space: nowrap;
}

.how-word em,
.how-section h2 em,
em.how-word,
em.how-word .how-char {
    font-style: italic;
    color: #ffd47a;
}

.how-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out);
}

.how-char.visible {
    opacity: 1;
    transform: translateY(0);
}

.how-space {
    display: inline-block;
}

@media (max-width: 1023px) {
    .how-cycling-title {
        font-size: 34px;
        line-height: 44px;
        min-height: 110px;
    }
}

@media (max-width: 767px) {
    .how-cycling-title {
        font-size: 24px;
        line-height: 32px;
        min-height: 120px;
    }
}

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

/* CTA */
.cta-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    min-height: 447px;
    padding: 80px var(--gutter) 78px;
    /* Figma 2561:18067 */
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(134deg, #fdf8f6 .96%, #d6e4f2 98.42%);
    color: #151c28
}
.cta-section::before { width: 420px; height: 523px }
.cta-section .section-heading { gap: 16px }
.cta-section h2 { font: 400 52px/57.2px var(--display); color: #151c28 }
.cta-section .eyebrow { color: #ff7a4d }
.cta-description { max-width: 600px; font-size: 16px; line-height: 24px; color: #475569 }
.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    height: 50px;
    padding: 0 28px;
    border-radius: 1000px;
    background: #00123a;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 180ms ease
}
.cta-button img { width: 22.475px; height: 11.025px }
.cta-button:hover { background: #0b2e6b }


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

/* Tablet: scale the bubble layout, reflow the footer. */
@media (max-width: 1199px) {
    .numbers-stage { zoom: .85 }
}

@media (max-width: 1023px) {
    .section-heading br { display: none }
    .why-row { flex-direction: column; align-items: stretch }
    .why-photo { flex: none; width: 100%; height: auto; aspect-ratio: 640 / 313 }
    .why-copy { flex: none; font-size: 20px; line-height: 30px }
    .cta-section h2 { font-size: 44px; line-height: 1.15 }
    .numbers-section { min-height: 0 }
    .numbers-stage { zoom: .72 }
}

/* Mobile: collapse navigation, stack the numbers as a flowing cluster. */
@media (max-width: 767px) {
    .hero-back-link { top: 109px }
    /* Portrait audience photo for phones, under the same gradients as desktop */
    .about-hero {
        height: auto; min-height: 640px; padding: 150px var(--gutter) 60px;
        background:
            linear-gradient(75deg, rgba(255, 255, 255, 0) 39.913%, rgba(0, 18, 58, .38) 89.494%),
            linear-gradient(90deg, #00123a 0%, rgba(7, 55, 99, .75) 50%, rgba(176, 192, 221, 0) 100%),
            url('../assets/about/figma/hero-mobile.png') center / cover no-repeat
    }
    .about-hero h1 { font-size: 38px; line-height: 1.2 }
    .hero-tagline { font-size: 18px }
    .hero-description { font-size: 16px }
    .why-section, .how-section { padding-top: 56px; padding-bottom: 56px }
    .section-heading h2 { font-size: 32px; line-height: 1.2 }
    .numbers-section { padding-top: 56px; padding-bottom: 56px }
    .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
    }
    .bubble, .stat-note { position: static }
    .bubble-students { width: 220px; height: 220px }
    .bubble-students strong { font-size: 36px }
    .bubble-students span { font-size: 15px }
    .bubble-colleges { width: 160px; height: 160px }
    .bubble-colleges strong { font-size: 30px }
    .bubble-colleges span { font-size: 14px }
    .bubble-flagship { width: 150px; height: 150px }
    .bubble-flagship strong { font-size: 30px }
    .bubble-flagship span { font-size: 14px }
    .bubble-ministers { width: 140px; height: 140px }
    .bubble-ministers strong { font-size: 28px }
    .bubble-leaders { width: 130px; height: 140px }
    .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 }
    .cta-section { min-height: 0; padding-top: 56px; padding-bottom: 56px }
    .why-section h2 { line-height: 1.2 }
    .why-subtitle { margin-top: 8px; font-size: 17px }
    .why-copy { font-size: 18px; line-height: 28px; text-align: center }
    .cta-section h2 { font-size: 34px; line-height: 1.15 }
    .why-section::before, .cta-section::before { width: 100%; height: 100% }
}