/* ===========================================================================
   About page — page-specific styles (shared look lives in base.css).
   Values from the About design export.
   =========================================================================== */

/* ---------- Hero ---------- */
.ab-hero {
    position: relative; z-index: 1;
    min-height: 86vh;
    padding: 6vh var(--gutter) 8vh;
    display: flex; flex-direction: column; justify-content: center;
}
.ab-hero__inner { display: flex; flex-direction: column; gap: 2.4em; }
.ab-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4em 2.4em; }

/* ---------- Three figures (30+, $350M+, $3.5M) ---------- */
.ab-figures {
    position: relative; z-index: 1;
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 4vw;
}
.ab-figure { gap: .9em; padding-top: 1.9em; }
.ab-figure__num {
    font-size: clamp(46px, 4.6vw, 80px);
    font-weight:400; font-style: italic; line-height: 1;
    color: var(--ink);
}
.ab-small {
    margin: 0; max-width: 24em;
    font-size: clamp(16px, 1.15vw, 19px); line-height: 1.55;
    color: var(--body); text-wrap: pretty;
}

/* ---------- Mission quote ---------- */
.ab-mission {
    position: relative; z-index: 1;
    padding: 22vh var(--gutter) 0;
    display: flex; flex-direction: column; align-items: center; gap: 5vh;
    text-align: center;
}
.ab-mission .v2-label { padding-left: .3em; }
.ab-quote {
    position: relative;
    margin: 0; max-width: 22em;
    font-size: clamp(26px, 3.2vw, 54px);
    font-weight:400; line-height: 1.28; letter-spacing: -.005em;
    color: var(--ink); text-wrap: balance;
}
.ab-quote__mark {
    position: absolute; left: -.5em; top: -.28em;
    font-size: 1.9em; font-style: italic; line-height: 1;
    color: var(--quote-mark);
}
.ab-quote em { font-style: italic; color: var(--accent); }
.ab-mission .v2-break { margin-top: 12vh; }

/* ---------- Articles (Our story / Leadership / Backed by) ---------- */
.ab-article {
    position: relative; z-index: 1;
    padding: 22vh var(--gutter) 0;
    display: flex; flex-direction: column; gap: 6vh;
}
.ab-article--first { padding-top: 14vh; }
.ab-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    gap: 3em 6vw;
    align-items: end;
}
.ab-split--story { align-items: start; }
/* Sticky only while heading and text sit side by side (in one column the
   design's sticky heading would slide over the paragraphs on phones). */
@media (min-width: 1030px) {
    .ab-sticky { position: sticky; top: 12vh; }
}
.ab-story {
    display: flex; flex-direction: column; gap: 1.3em;
    max-width: 32em; padding-top: .4em;
}
.ab-split > .v2-body { margin: 0; max-width: 30em; }

.ab-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
    gap: 4vw;
    margin-top: 2vh;
}
.ab-card-label {
    font-size: clamp(11px, .9vw, 13px);
    font-weight: 500; letter-spacing: .3em;
    color: var(--muted);
}
.ab-card-text {
    margin: 0;
    font-size: clamp(16px, 1.15vw, 19px); line-height: 1.6;
    color: var(--body); text-wrap: pretty;
}

/* Leadership */
.ab-person { gap: 1.3em; }
.ab-person__head { display: flex; align-items: center; gap: 1.1em; }
.ab-person__photo { display: block; width: 112px; height: 112px; object-fit: cover; flex: none; }
.ab-person__id { display: flex; flex-direction: column; gap: .35em; }
.ab-person__name {
    font-size: clamp(24px, 2vw, 32px);
    font-style: italic; font-weight:500; line-height: 1.1;
    color: var(--ink);
}

/* Investors */
.ab-investor__name {
    font-size: clamp(30px, 2.7vw, 44px);
    font-weight:400; line-height: 1.08;
    color: var(--ink);
}
.ab-investor__names { display: flex; flex-direction: column; gap: .15em; }
.ab-investor__sub { font-size: clamp(17px, 1.3vw, 22px); font-style: italic; color: var(--accent); }

/* ---------- Closing ---------- */
.ab-closing {
    position: relative; z-index: 1;
    padding: 26vh var(--gutter) 20vh;
    display: flex; flex-direction: column; align-items: center; gap: 2.4em;
    text-align: center;
}
.ab-closing__brand { display: flex; flex-direction: column; align-items: center; gap: 1.1em; }
.ab-closing__intro { font-size: clamp(18px, 1.5vw, 24px); font-style: italic; color: var(--body); }
.ab-closing__logo { display: block; width: clamp(170px, 17vw, 260px); height: auto; }
.ab-closing__text {
    margin: 0; max-width: 30em;
    font-size: clamp(18px, 1.55vw, 26px); line-height: 1.55;
    color: var(--body); text-wrap: balance;
}

/* The design's pill has no border-box sizing (46px min-height + padding),
   so it is ~66px tall. base.css sets border-box everywhere; restore it here. */
.ab-hero .v2-pill, .ab-closing .v2-pill { box-sizing: content-box; }