/* About-specific composition; colors and button treatments match main.css. */
.about-page #header { border-bottom: 0; padding-bottom: 1px; }
.about-page .skip-link {
    position: absolute;
    top: 0.5em;
    left: 1em;
    z-index: 10;
    padding: 0.5em 1em;
    background: #fff;
    transform: translateY(-200%);
}
.about-page .skip-link:focus { transform: translateY(0); }

.about-page #main { padding: 3em 0; background: #f2f6ff; }
.about-page #main .about-section { margin: 0 auto 3em; }
.about-page #main .about-section:last-child { margin-bottom: 0; }
.about-page .about-overview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5em;
    max-width: 1120px;
}
.about-page .about-overview-card { margin: 0; padding: 2em 1.75em; }
.about-page .about-overview-icon.icon.featured {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin: 0 auto 1.25em;
    padding: 0;
    border-radius: 22px;
    line-height: 1;
    box-shadow: none;
}
.about-page .about-overview-icon.icon.featured::before { font-size: 1.9em; line-height: 1; }
.about-page .about-overview-icon.icon.featured::after { display: none; content: none; }
.about-page .about-overview-icon-mission.icon.featured { background: #dbeafe; }
.about-page .about-overview-icon-mission.icon.featured::before { color: #2f8cff; }
.about-page .about-overview-icon-story.icon.featured { background: #ede9fe; }
.about-page .about-overview-icon-story.icon.featured::before { color: #8b5cf6; }
.about-page .about-overview-card .about-heading { text-align: center; }
.about-page .about-founders { max-width: 980px; }
.about-page .about-camp { max-width: 860px; }
.about-page .about-cta { max-width: 800px; text-align: center; }

.about-page .about-heading { margin: 0 0 0.5em; }
.about-page .about-heading h2 {
    color: #16233f;
    font-size: 2em;
    font-weight: 800;
}
.about-page .about-overview-card p + p,
.about-page .about-callout p + p { margin-top: 0.6em; }
.about-page .about-intro { margin: 0 0 1em; }

.about-page #main .box {
    border: 2px solid #d8e2f8;
    border-radius: 24px;
    box-shadow: 0 7px 0 rgba(22, 35, 63, 0.12);
}
.about-page #main .box > p { margin-bottom: 0; }
.about-page #main .box h3 {
    color: #16233f;
    font-size: 1.65em;
    font-weight: 800;
}
.about-page .about-founders-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5em;
}
.about-page .founder-card { height: 100%; margin: 0; padding: 1.5em; }
.about-page .founder-photo {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    margin-bottom: 1.25em;
    border-radius: 18px;
}
.about-page .founder-photo-ethan { object-position: 45% center; }
.about-page .founder-photo-natalie { object-position: 70% center; }
.about-page .about-callout { padding: 1.5em 1.75em; }
.about-page .about-callout .actions { margin: 0.75em 0 0; }
.about-page .about-cta > p { margin-bottom: 0; }
.about-page .about-cta .actions { margin: 0.75em 0 0; }

/* Existing homepage marketing button colors and shadows, scoped to About. */
.about-page .about-button-camp,
.about-page .about-cta .button {
    border-radius: 16px;
    font-weight: 800;
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.about-page .about-button-camp {
    background: #8b5cf6;
    box-shadow: 0 5px 0 #6942c5;
}
.about-page .about-button-camp:hover {
    background: #6942c5;
    transform: translateY(-2px);
}
.about-page .about-cta .button {
    background: #2f8cff;
    box-shadow: 0 5px 0 #1f6fc7;
}
.about-page .about-cta .button:hover {
    background: #267ee8;
    transform: translateY(-2px);
}
.about-page .about-cta .button.about-button-secondary {
    border: 2px solid #d8e2f8;
    background: #fff;
    color: #16233f !important;
    box-shadow: 0 5px 0 rgba(22, 35, 63, 0.15);
}
.about-page .about-cta .button.about-button-secondary:hover { background: #f2f6ff; }
.about-page #main .button:focus-visible { outline: 3px solid #16233f; outline-offset: 5px; }

@media screen and (max-width: 900px) {
    .about-page .about-overview {
        grid-template-columns: 1fr;
        max-width: 600px;
    }
    .about-page .about-founders-grid {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin: 0 auto;
    }
}
@media screen and (max-width: 736px) {
    .about-page #header { padding-inline: 24px; }
    .about-page #banner { margin-inline: 0; }
    .about-page #main > .container { width: calc(100% - 48px); }
    .about-page #main { padding: 2em 0; }
    .about-page #main .about-section { margin-bottom: 2em; }
    .about-page .about-heading h2 { font-size: 1.75em; }
    .about-page .founder-card,
    .about-page .about-callout { padding: 1.25em; }
    .about-page .about-overview-card { padding: 1.75em 1.25em; }
}