.about-page {
    --about-ink: #101114;
    --about-muted: #555b65;
    --about-rule: #d9dce2;
    --about-panel: #f7f7f8;
    --about-accent: #002fa7;
    background: #fff;
    color: var(--about-ink);
}

.about-page main { overflow: hidden; }

.about-hero {
    padding: clamp(9rem, 15vw, 13rem) 0 clamp(4.5rem, 9vw, 8rem);
    border-bottom: 1px solid var(--about-rule);
}

.about-hero__grid,
.about-origin__grid,
.about-approach__grid,
.about-capabilities__grid,
.about-cta__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .85fr);
    gap: clamp(2.5rem, 8vw, 8rem);
}

.about-hero__grid { align-items: end; }
.about-hero h1 { max-width: 12ch; margin: 0; font-size: clamp(3rem, 7vw, 6.7rem); line-height: .92; letter-spacing: -.055em; }
.about-hero__summary p { max-width: 37rem; color: var(--about-muted); font-size: clamp(1rem, 1.6vw, 1.16rem); line-height: 1.7; }
.about-hero__summary p:last-child { margin-bottom: 0; }

.about-origin { padding: clamp(4rem, 9vw, 8rem) 0; background: var(--about-panel); }
.about-origin__grid { align-items: center; }
.about-origin__year { color: var(--about-accent); font-size: clamp(5.5rem, 13vw, 11.5rem); font-weight: 700; line-height: .78; letter-spacing: .015em; }
.about-origin h2, .about-approach h2, .about-capabilities h2, .about-cta h2 { margin: 0; font-size: clamp(2.2rem, 5vw, 4.5rem); line-height: .98; letter-spacing: -.045em; }
.about-origin h2 { max-width: 14ch; }
.about-origin__grid > div:last-child > p:last-child { max-width: 42rem; margin-top: 2rem; color: var(--about-muted); line-height: 1.75; }

.about-team, .about-audiences { padding: clamp(4.5rem, 9vw, 8rem) 0; }
.about-section-heading { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--about-rule); }
.about-section-heading h2 { max-width: 17ch; margin: 0; font-size: clamp(2.2rem, 5vw, 4.5rem); line-height: .98; letter-spacing: -.045em; }

.about-team__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--about-rule); }
.about-team__grid article { display: grid; grid-template-columns: minmax(12rem, .8fr) minmax(12rem, 1.2fr); min-width: 0; }
.about-team__grid article + article { border-left: 1px solid var(--about-rule); }
.about-team__grid img { display: block; width: 100%; height: 100%; min-height: 22rem; object-fit: cover; filter: grayscale(1); }
.about-team__grid article > div { padding: clamp(2rem, 5vw, 4rem); }
.about-team__grid span { display: block; margin-bottom: clamp(4rem, 8vw, 8rem); color: var(--about-accent); font-size: clamp(2.5rem, 5vw, 5rem); font-weight: 700; line-height: .8; }
.about-team__grid h3 { margin: 0; font-size: clamp(1.7rem, 3.5vw, 3rem); line-height: 1; }
.about-team__grid p { margin: .75rem 0 0; color: var(--about-muted); font-weight: 700; }

.about-experience { padding: clamp(4.5rem, 9vw, 8rem) 0; background: #101114; color: #fff; }
.about-section-heading--light { border-color: #343741; }
.about-section-heading--light h2 { color: #fff; }
.about-section-heading--light .db-eyebrow { color: #7ea1ff; }
.about-experience__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-left: 1px solid #343741; }
.about-experience__grid article { min-height: 29rem; padding: clamp(1.5rem, 3vw, 2.5rem); border-right: 1px solid #343741; border-bottom: 1px solid #343741; }
.about-experience__grid span { display: block; margin-bottom: clamp(4rem, 7vw, 7rem); color: #7ea1ff; font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 700; line-height: .8; }
.about-experience__grid h3 { margin: 0 0 1.25rem; color: #fff; font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.12; overflow-wrap: normal; word-break: normal; hyphens: none; }
.about-experience__grid p { margin: 0; color: #c7cbd3; font-size: .92rem; line-height: 1.7; }

.about-approach { padding: clamp(4.5rem, 9vw, 8rem) 0; }
.about-approach h2 { max-width: 13ch; }
.about-approach__grid > div > p:last-child { max-width: 40rem; margin-top: 2rem; color: var(--about-muted); font-size: 1.05rem; line-height: 1.75; }
.about-approach ol { margin: 0; padding: 0; border-top: 1px solid var(--about-ink); list-style: none; }
.about-approach li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--about-rule); }
.about-approach li > span { color: var(--about-accent); font-weight: 700; }
.about-approach h3 { margin: 0 0 .5rem; font-size: 1rem; }
.about-approach li p { margin: 0; color: var(--about-muted); font-size: .9rem; line-height: 1.65; }

.about-capabilities { padding: clamp(4.5rem, 9vw, 8rem) 0; background: var(--about-panel); }
.about-capabilities h2 { max-width: 12ch; }
.about-capabilities ul { margin: 0; padding: 0; border-top: 1px solid var(--about-ink); list-style: none; }
.about-capabilities li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--about-rule); font-weight: 700; }
.about-capabilities li span { color: var(--about-accent); }
.about-capabilities__link { grid-column: 2; }

.about-audiences__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 1px solid var(--about-rule); }
.about-audiences__grid article { min-height: 15rem; padding: clamp(1.5rem, 4vw, 3rem); border-right: 1px solid var(--about-rule); border-bottom: 1px solid var(--about-rule); }
.about-audiences__grid h3 { margin: 0 0 1rem; font-size: clamp(1.25rem, 2.5vw, 1.8rem); }
.about-audiences__grid p { max-width: 34rem; margin: 0; color: var(--about-muted); line-height: 1.7; }

.about-cta { padding: clamp(4.5rem, 9vw, 8rem) 0; background: #101114; color: #fff; }
.about-cta h2 { max-width: 14ch; color: #fff; }
.about-cta .db-eyebrow { color: #7ea1ff; }
.about-cta__grid { align-items: end; }
.about-cta__grid > div:last-child > p { max-width: 36rem; color: #c7cbd3; font-size: 1.05rem; line-height: 1.7; }
.about-cta__actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; margin-top: 2rem; }
.about-cta__actions .db-text-link { min-height: 2.75rem; display: inline-flex; align-items: center; color: #b8caff; }
.about-cta__actions .db-text-link:hover { color: #fff; }

@media (max-width: 74.998rem) {
    .about-team__grid article { grid-template-columns: 1fr; }
    .about-team__grid img { min-height: 0; aspect-ratio: 1; }
    .about-team__grid span { margin-bottom: 3rem; }
    .about-experience__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about-experience__grid article { min-height: 23rem; }
}

@media (max-width: 61.998rem) {
    .about-hero__grid, .about-origin__grid, .about-approach__grid, .about-capabilities__grid, .about-cta__grid { grid-template-columns: 1fr; }
    .about-origin__year { font-size: clamp(5rem, 23vw, 8.5rem); }
    .about-capabilities__link { grid-column: 1; }
}

@media (max-width: 47.998rem) {
    .about-hero { padding-top: 8rem; }
    .about-section-heading, .about-team__grid, .about-experience__grid, .about-audiences__grid { grid-template-columns: 1fr; }
    .about-team__grid article + article { border-top: 1px solid var(--about-rule); border-left: 0; }
    .about-experience__grid article { min-height: 0; }
    .about-experience__grid span { margin-bottom: 3rem; }
    .about-cta__actions { align-items: stretch; flex-direction: column; }
    .about-cta__actions .db-button, .about-cta__actions .db-text-link { width: 100%; justify-content: center; text-align: center; }
}
