/*
 * Company pages follow the application's light-first visual theme regardless
 * of the operating-system color preference. Dark UI is limited to contained
 * illustrations, dashboards and contrast sections already used by the site.
 */

.why-hero {
    color: var(--text-primary);
    background: linear-gradient(128deg, #fff 0%, var(--primary-light) 62%, var(--primary-lighter) 100%);
}

.why-hero::after {
    background-image:
        linear-gradient(rgba(30, 64, 175, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 64, 175, .045) 1px, transparent 1px);
}

.why-hero .company-eyebrow { color: var(--primary); }
.why-hero-copy h1 { color: var(--secondary); }
.why-hero-copy h1 em { color: var(--primary); }
.why-hero-copy > p,
.why-proof-line { color: var(--text-secondary); }
.why-proof-line i { color: var(--accent-teal); }

.why-command-center {
    color: #fff;
    background: var(--secondary);
    box-shadow: 0 28px 70px rgba(15, 40, 71, .22);
}

.process-hero {
    color: var(--text-primary);
    background: linear-gradient(130deg, #fff 0%, var(--primary-light) 60%, var(--primary-lighter) 100%);
}

.process-grid-bg {
    opacity: .55;
    background-image:
        linear-gradient(rgba(30, 64, 175, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 64, 175, .055) 1px, transparent 1px);
}

.process-hero .company-eyebrow { color: var(--primary); }
.process-hero h1 { color: var(--secondary); }
.process-hero h1 em { color: var(--accent-teal); }
.process-hero p { color: var(--text-secondary); }

.process-console {
    color: #fff;
    background: var(--secondary);
    border-color: rgba(30, 64, 175, .24);
    box-shadow: 0 28px 70px rgba(15, 40, 71, .2);
}

/*
 * Shared contrast contract for every full-width navy company section. Keeping
 * this rule centralized prevents the reusable header's blue eyebrow from
 * becoming unreadable whenever it is placed on a dark section.
 */
.company-page :is(
    .benefits-section,
    .journey-section,
    .why-approach,
    .process-controls,
    .career-matters,
    .life-matters,
    .faq-trust,
    .leadership-matters
) {
    color: #f8fbff;
}

.company-page :is(
    .benefits-section,
    .journey-section,
    .why-approach,
    .process-controls,
    .career-matters,
    .life-matters,
    .faq-trust
) .company-eyebrow {
    color: #7dd3fc;
}

.company-page :is(
    .benefits-section,
    .journey-section,
    .why-approach,
    .process-controls,
    .career-matters,
    .life-matters,
    .faq-trust
) .company-eyebrow::before {
    background: #5eead4;
}

.company-page :is(
    .benefits-section,
    .journey-section,
    .why-approach,
    .process-controls,
    .career-matters,
    .faq-trust
) .company-section-header h2 {
    color: #fff;
}

.company-page :is(
    .benefits-section,
    .journey-section,
    .why-approach,
    .process-controls,
    .career-matters,
    .faq-trust
) .company-section-header p {
    color: #bfdbfe;
}