/* ── ABOUT PAGE – LIGHT THEME ── */

.story-section {
    padding: 96px 0;
    background: #fff;
}

.story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: start;
}

.story-content p {
    font-size: .96rem;
    color: var(--ts);
    line-height: 1.78;
    margin-bottom: 16px;
}

/* Timeline */
.timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 16px;
}

.tl-item {
    display: flex;
    gap: 18px;
    padding-bottom: 28px;
    position: relative;
}

.tl-item::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 14px;
    bottom: 0;
    width: 2px;
    background: var(--border-light);
}

.tl-item:last-child::before {
    display: none;
}

.tl-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid var(--g600);
    flex-shrink: 0;
    margin-top: 4px;
    position: relative;
    left: -23px;
}

.tl-dot.active {
    background: var(--g600);
    box-shadow: 0 0 0 4px rgba(34, 168, 87, 0.15);
}

.tl-content {
    margin-left: -11px;
}

.tl-year {
    font-size: .72rem;
    font-weight: 700;
    color: var(--g600);
    text-transform: uppercase;
    letter-spacing: .1em;
}

.tl-content h4 {
    font-size: .93rem;
    font-weight: 700;
    color: var(--tp);
    margin: 4px 0 5px;
}

.tl-content p {
    font-size: .83rem;
    color: var(--ts);
    line-height: 1.6;
    margin: 0;
}

/* Team section */
.team-section {
    background: var(--bg-alt);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    padding: 96px 0;
}

.team-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 44px;
}

.ts-card {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: var(--r-lg);
    padding: 22px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    box-shadow: var(--shadow-sm);
    transition: var(--t);
}

.ts-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.ts-num {
    font-family: var(--fh);
    font-size: 2rem;
    font-weight: 800;
    color: var(--g700);
    line-height: 1;
}

.ts-card sup {
    font-family: var(--fh);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--g700);
}

.ts-lbl {
    font-size: .76rem;
    color: var(--tm);
    margin-top: 3px;
}

.dept-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.dept-card {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: var(--r-lg);
    padding: 22px;
    transition: var(--t);
    box-shadow: var(--shadow-sm);
}

.dept-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
    border-color: var(--borderh);
}

.dept-card h3 {
    font-size: .92rem;
    font-weight: 700;
    color: var(--tp);
    margin-bottom: 7px;
}

.dept-card p {
    font-size: .82rem;
    color: var(--ts);
    line-height: 1.62;
    margin-bottom: 14px;
}

.dept-avatars {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.da {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--g100);
    border: 1px solid rgba(26, 122, 60, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    color: var(--g700);
}

.da.more {
    background: var(--bg-deep);
    border-color: var(--border-light);
    color: var(--tm);
    font-size: .67rem;
    font-weight: 700;
}

.da::before {
    content: '👤';
    font-size: .68rem;
}

.da.more::before {
    content: '';
}

/* VTF */
.vtf-section {
    background: #fff;
    padding: 96px 0;
    position: relative;
    overflow: hidden;
}

.vtf-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(26, 122, 60, 0.05), transparent 70%);
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    filter: blur(60px);
    pointer-events: none;
}

.vtf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}

.vtf-content p {
    font-size: .96rem;
    color: var(--ts);
    line-height: 1.78;
    margin-bottom: 16px;
}

.vtf-pillars {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 22px;
}

.vtf-p {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 14px 16px;
    background: var(--bg-alt);
    border: 1px solid var(--border-light);
    border-radius: var(--r-md);
    transition: var(--t);
}

.vtf-p:hover {
    border-color: var(--borderh);
    background: var(--g50);
}

.vtf-p>i {
    width: 36px;
    height: 36px;
    background: var(--g100);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--g700);
    font-size: .95rem;
    flex-shrink: 0;
}

.vtf-p strong {
    display: block;
    font-size: .88rem;
    color: var(--tp);
    margin-bottom: 2px;
}

.vtf-p p {
    font-size: .82rem;
    color: var(--ts);
    line-height: 1.52;
    margin: 0;
}

/* Globe */
.globe-card {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: var(--r-xl);
    padding: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    box-shadow: var(--shadow);
}

.globe-ring {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 2px solid var(--border-light);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: rotRing 20s linear infinite;
}

@keyframes rotRing {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

.globe-center {
    width: 72px;
    height: 72px;
    background: var(--g50);
    border: 1px solid rgba(26, 122, 60, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: rotRing 20s linear infinite reverse;
}

.globe-logo {
    height: 28px;
    width: auto;
}

.orbit-dot {
    position: absolute;
    width: 32px;
    height: 32px;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    color: var(--g600);
    animation: rotRing 20s linear infinite reverse;
    box-shadow: var(--shadow-sm);
}

.od-1 {
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
}

.od-2 {
    top: 22%;
    right: -16px;
}

.od-3 {
    bottom: 22%;
    right: -16px;
}

.od-4 {
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
}

.od-5 {
    bottom: 22%;
    left: -16px;
}

.od-6 {
    top: 22%;
    left: -16px;
}

.globe-label {
    font-size: .78rem;
    color: var(--tm);
    text-align: center;
}

/* Process */
.process-row {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.pr-step {
    flex: 1;
    text-align: center;
    padding: 0 18px;
}

.pr-num {
    font-family: var(--fh);
    font-size: 2.5rem;
    font-weight: 900;
    color: rgba(26, 122, 60, 0.07);
    line-height: 1;
    margin-bottom: 8px;
}

.pr-step h3 {
    font-size: .93rem;
    font-weight: 700;
    color: var(--tp);
    margin-bottom: 7px;
}

.pr-step p {
    font-size: .83rem;
    color: var(--ts);
    line-height: 1.62;
}

.pr-conn {
    width: 44px;
    height: 2px;
    background: linear-gradient(90deg, var(--g600), rgba(26, 122, 60, 0.15));
    margin-top: 66px;
    flex-shrink: 0;
}

/* Values */
.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.val-card {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: var(--r-lg);
    padding: 26px;
    transition: var(--t);
    box-shadow: var(--shadow-sm);
}

.val-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
    border-color: var(--borderh);
}

.val-icon {
    width: 44px;
    height: 44px;
    background: var(--g100);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: var(--g700);
    margin-bottom: 14px;
    border: 1px solid rgba(26, 122, 60, 0.12);
}

.val-card h3 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--tp);
    margin-bottom: 8px;
}

.val-card p {
    font-size: .84rem;
    color: var(--ts);
    line-height: 1.65;
}

@media(max-width:1024px) {

    .story-grid,
    .vtf-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .team-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .dept-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-row {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .pr-conn {
        width: 2px;
        height: 24px;
        margin: 0;
        background: linear-gradient(to bottom, var(--g600), rgba(26, 122, 60, 0.15));
    }
}

@media(max-width:600px) {
    .team-stats-row {
        grid-template-columns: 1fr 1fr;
    }

    .dept-cards,
    .values-grid {
        grid-template-columns: 1fr;
    }
}