/* =========================================================
   about.css — About Us page. Reuses site tokens, nav, footer,
   .chapter / .section-head / .pillar patterns. Only adds the
   fixed-nav clearance and a constrained prose measure.
========================================================= */

/* ---- page-load transition: gentle fade + rise, staggered per section ---- */
@media (prefers-reduced-motion: no-preference) {
    #about-content > * {
        animation: about-enter .55s var(--ease, cubic-bezier(.22, 1, .36, 1)) both;
    }
    #about-content > *:nth-child(2) { animation-delay: .09s; }
    #about-content > *:nth-child(3) { animation-delay: .18s; }
    #about-content > *:nth-child(4) { animation-delay: .27s; }
}

@keyframes about-enter {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

.about-hero {
    /* clear the fixed 64px nav on the first section */
    padding-top: calc(64px + var(--space-6));
    background: var(--white);
}

.about-prose {
    max-width: 68ch;
    margin-inline: auto;
    margin-top: var(--space-5);
}

.about-prose p {
    font-size: 1.08rem;
    line-height: 1.75;
    color: var(--ink-soft, #2c3542);
    margin-bottom: var(--space-4);
}

.about-prose p:last-child { margin-bottom: 0; }

.about-brands {
    background: var(--bg);
}

.about-brand__name {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: var(--space-2);
}

.about-brand__status {
    display: inline-block;
    margin-top: var(--space-3);
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-soft, #5a6472);
}