/**
 * About page contrast overrides only.
 * Does not change layout, spacing, or shared theme tokens.
 * Uses existing brand colours already defined in theme-tokens.css.
 */

/* Light surfaces: soft brand orange (#FF9A4A) fails WCAG AA on white/paper.
   Sticky section tabs are handled in sticky-section-nav-contrast.css. */
.about-page .text-orange,
.about-page .vm-icon,
.about-page .value-card-num,
.about-page .value-number,
.about-page .impact-card h3,
.about-page .culture-card h3,
.about-page .value-item:hover .value-content h3,
.about-page .team-read-more:hover {
    color: var(--orange-deep);
}

/* Dark about bands keep the light brand orange. */
.about-page .about-hero h1 span,
.about-page .about-hero-year span,
.about-page .about-hero-feature .feature-value,
.about-page .about-breadcrumb a:hover,
.about-page .bg-navy-white .text-orange,
.about-page .gro-list li::before {
    color: var(--orange);
}

/* Dark theme surfaces are dark — keep light orange for accent text. */
[data-theme="dark"] .about-page .text-orange,
[data-theme="dark"] .about-page .vm-icon,
[data-theme="dark"] .about-page .value-card-num,
[data-theme="dark"] .about-page .value-number,
[data-theme="dark"] .about-page .impact-card h3,
[data-theme="dark"] .about-page .culture-card h3,
[data-theme="dark"] .about-page .value-item:hover .value-content h3,
[data-theme="dark"] .about-page .team-read-more:hover {
    color: var(--orange);
}

/* Muted body copy on light surfaces — same ink, higher opacity. */
.about-page .section-description,
.about-page .section-subtitle:not(.about-subtitle-on-dark),
.about-page .about-overview-kicker,
.about-page .about-stats .label,
.about-page .highlight-card span,
.about-page .value-card p,
.about-page .designation,
.about-page .testimonial-card p,
.about-page .impact-card p {
    color: rgba(var(--ink), 0.85);
}

/* Muted white copy on navy / hero — raise opacity only. */
.about-page .about-subtitle-on-dark {
    color: rgba(255, 255, 255, 0.92) !important;
}

.about-page .about-breadcrumb {
    opacity: 1;
}

.about-page .about-breadcrumb span:last-child {
    color: rgba(255, 255, 255, 0.92);
}

.about-page .about-hero-content > p,
.about-page .about-hero-panel-inner > p,
.about-page .about-hero-year {
    opacity: 1;
    color: rgba(255, 255, 255, 0.92);
}

.about-page .about-hero-feature .feature-label {
    opacity: 1;
    color: rgba(255, 255, 255, 0.88);
}

.about-page .gro-card p,
.about-page .impact-content p {
    color: rgba(255, 255, 255, 0.92);
}

.about-page .gro-list li {
    color: rgba(255, 255, 255, 0.95);
}