/* ==========================================================================
   Robo Co-op — About Us (/about-us/)
   --------------------------------------------------------------------------
   The About page is built on the home page's design system: it loads
   assets/css/home.css and assets/js/home.js unchanged (body.rc-hp), and
   uses its tokens and components — hero shell, eyebrows, headings,
   buttons, links, photo frame, closing band, reveal and reduced motion.
   So a change to home.css now reaches /about-us/ as well; that is the point
   (one website, one system), but worth knowing before editing it.

   This file only adds the layouts no home page section has. Everything is
   scoped to body.rc-about, under an ab- prefix, so no other page is touched.
   Mobile first, like home.css: base rules are the phone layout.

   Contents
     01  Bands
     02  Hero
     03  Story and milestones
     04  Mission and vision
     05  Model: features, figures, mobility
     06  Principles
     07  People
     08  Progress
     09  Motion
   ========================================================================== */


/* ==========================================================================
   01  BANDS
   Light bands alternate paper tones, as on the home page; the principles
   band and the closing band are navy, like the home page's hero and close.
   ========================================================================== */

.rc-about .ab-story    { background: var(--hp-paper-2); }
.rc-about .ab-mission  { background: var(--hp-white); }
.rc-about .ab-model    { background: var(--hp-paper); }
.rc-about .ab-people   { background: var(--hp-paper-2); }
.rc-about .ab-progress { background: var(--hp-paper); }

.rc-about .ab-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Every heading here is two sentences; the second (light) one starts its own
   line, so a wrap never splits "From / Opportunity". The two short ones sit
   on one line where there is room. */
.rc-about .hp-h2__soft {
    display: block;
}

@media (min-width: 760px) {
    .rc-about .ab-mission .hp-h2__soft,
    .rc-about .ab-people .hp-h2__soft {
        display: inline;
    }
}

/* h3 that reads as a sub-heading inside a section */
.rc-about .ab-teach__title,
.rc-about .ab-feature__title {
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--hp-ink);
    text-wrap: balance;
}


/* ==========================================================================
   02  HERO
   The shell (navy, dot field, glows, grid, eyebrow, lede) is home.css §03.
   ========================================================================== */

/* Two sentences, two lines each at most: impactful, not shouting. Smaller
   than the home page's one-word title on purpose — this one is a sentence. */
.rc-about .ab-hero__title {
    font-size: clamp(2rem, 1.1rem + 3.6vw, 3.9rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.04em;
    color: #fff;
    text-wrap: balance;
}

.rc-about .ab-hero__title-soft {
    display: block;
    margin-top: .14em;
    font-weight: 300;
    color: var(--hp-accent-pale);
}

/* The brand signature, set like the home page's statement line. */
.rc-about .ab-hero__sig {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 34em;
    margin-top: clamp(24px, 3vw, 36px);
    padding-top: clamp(18px, 2.2vw, 24px);
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: clamp(1.05rem, .95rem + .45vw, 1.3rem);
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: #fff;
}

.rc-about .ab-hero__sig-mark {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    fill: #fff;
}

.rc-about .ab-orbit {
    position: relative;
}

/* Labels are HTML, not SVG text, so they stay legible at phone width. The
   two lower ones are pinned to the figure's edges rather than centred on
   their hubs, which would push "Human collaboration" off a 320px screen. */
.rc-about .ab-orbit__label {
    position: absolute;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(10, 16, 32, .82);
    font-size: clamp(.64rem, .58rem + .28vw, .76rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
    animation: hp-fade 1.2s .8s var(--hp-ease) both;
}

.rc-about .ab-orbit__label--edu {
    left: 50%;
    top: 4%;
    transform: translate(-50%, -50%);
}

.rc-about .ab-orbit__label--work {
    left: 0;
    top: 93%;
    transform: translateY(-50%);
}

.rc-about .ab-orbit__label--collab {
    right: 0;
    top: 93%;
    transform: translateY(-50%);
}

.rc-about .ab-hero .hp-hero__visual {
    max-width: 540px;
}


/* ==========================================================================
   03  STORY AND MILESTONES
   ========================================================================== */

.rc-about .ab-story__head .hp-h2 {
    max-width: 18em;
}

.rc-about .ab-story__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(32px, 4.5vw, 56px);
    margin-top: clamp(28px, 3.5vw, 44px);
    align-items: start;
}

.rc-about .ab-story__pull {
    font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.2rem);
    font-weight: 300;
    line-height: 1.18;
    letter-spacing: -.025em;
    color: var(--hp-ink);
    text-wrap: balance;
}

.rc-about .ab-story__pull strong {
    font-weight: 800;
}

.rc-about .ab-story__body p + p {
    margin-top: 16px;
}

.rc-about .ab-story__body p:not(.ab-story__pull) {
    max-width: 56ch;
    font-size: clamp(1rem, .97rem + .15vw, 1.08rem);
    line-height: 1.7;
    color: var(--hp-body);
}

.rc-about .ab-story__pull + p {
    margin-top: clamp(18px, 2.2vw, 26px) !important;
}

@media (min-width: 960px) {
    .rc-about .ab-story__grid {
        grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
        column-gap: clamp(56px, 7vw, 104px);
    }

    /* the photo sits a little lower than the text: an editorial offset */
    .rc-about .ab-story__photo {
        margin-top: clamp(48px, 6vw, 88px);
    }
}

/* — milestones — a rail with a node per year: down the left on phones,
   across the page from 900px. The coloured line draws once (home.js
   [data-draw]), gold to cyan like the home page's model timeline. */
.rc-about .ab-timeline {
    margin-top: clamp(44px, 6vw, 80px);
}

.rc-about .ab-timeline__list {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    margin: 0;
    padding: 0 0 0 30px;
    list-style: none;
}

.rc-about .ab-timeline__list::before,
.rc-about .ab-timeline__list::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--hp-line-2);
}

.rc-about .ab-timeline__list::after {
    left: 5.5px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--hp-gold), var(--hp-accent));
    transform-origin: 50% 0;
}

.rc-about .ab-timeline__item {
    position: relative;
}

.rc-about .ab-timeline__item::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 5px;
    z-index: 1;
    width: 15px;
    height: 15px;
    border: 3px solid var(--hp-paper-2);
    border-radius: 50%;
    background: var(--hp-navy);
    box-shadow: 0 0 0 1px var(--hp-line-2);
}

.rc-about .ab-timeline__year {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--hp-accent-ink);
}

.rc-about .ab-timeline__text {
    margin-top: 4px;
    max-width: 40ch;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--hp-ink);
}

.rc-about .ab-timeline__link {
    display: inline-block;
    margin-top: 8px;
    font-size: .92rem;
}

@media (min-width: 900px) {
    .rc-about .ab-timeline__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: clamp(20px, 2.6vw, 36px);
        padding: 30px 0 0;
    }

    .rc-about .ab-timeline__list::before,
    .rc-about .ab-timeline__list::after {
        left: 0;
        right: 0;
        top: 6px;
        bottom: auto;
        width: auto;
        height: 2px;
    }

    .rc-about .ab-timeline__list::after {
        top: 5.5px;
        height: 3px;
        background: linear-gradient(90deg, var(--hp-gold), var(--hp-accent));
        transform-origin: 0 50%;
    }

    .rc-about .ab-timeline__item::before {
        left: 0;
        top: -31px;
    }
}


/* ==========================================================================
   04  MISSION AND VISION
   Two statements, equal weight, set as type. A short colour cap on each:
   gold for the mission (people), cyan for the vision (what technology
   makes possible) — the home page's two accents.
   ========================================================================== */

.rc-about .ab-mv {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-top: clamp(28px, 3.5vw, 48px);
}

.rc-about .ab-mv__item {
    position: relative;
    padding: clamp(26px, 3vw, 36px) 0;
    border-top: 1px solid var(--hp-line-2);
}

.rc-about .ab-mv__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: -2px;
    width: 64px;
    height: 3px;
    border-radius: 3px;
    background: var(--hp-gold);
}

.rc-about .ab-mv__item--vision::before {
    background: var(--hp-accent);
}

.rc-about .ab-mv__label {
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--hp-ink);
}

.rc-about .ab-mv__text {
    margin-top: 16px;
    max-width: 24em;
    font-size: clamp(1.4rem, 1rem + 1.6vw, 2.15rem);
    font-weight: 300;
    line-height: 1.26;
    letter-spacing: -.02em;
    color: var(--hp-ink);
    text-wrap: pretty;
}

.rc-about .ab-mv__text strong {
    font-weight: 700;
}

@media (min-width: 860px) {
    .rc-about .ab-mv {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(40px, 6vw, 96px);
    }

    .rc-about .ab-mv__item {
        padding-bottom: 0;
    }
}


/* ==========================================================================
   05  MODEL
   Two features, copy and figure side by side from 960px, the second one
   mirrored. Figures sit in a white card with the home page's gold-to-cyan
   cap (as on its programme cards).
   ========================================================================== */

.rc-about .ab-features {
    display: grid;
    gap: clamp(56px, 7vw, 104px);
    margin-top: clamp(40px, 5vw, 72px);
}

.rc-about .ab-feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 4vw, 48px);
    align-items: center;
}

.rc-about .ab-feature__title {
    margin-top: 12px;
    font-size: clamp(1.75rem, 1.3rem + 1.7vw, 2.6rem);
    line-height: 1.08;
}

.rc-about .ab-feature__sub {
    margin-top: 8px;
    font-size: clamp(1.15rem, 1rem + .55vw, 1.4rem);
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--hp-soft);
    text-wrap: balance;
}

.rc-about .ab-feature__desc {
    margin-top: 18px;
    max-width: 52ch;
    font-size: clamp(1rem, .97rem + .15vw, 1.08rem);
    line-height: 1.65;
    color: var(--hp-body);
}

.rc-about .ab-facts {
    margin: 24px 0 0;
    border-top: 1px solid var(--hp-line-2);
}

.rc-about .ab-facts__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 14px 0;
    border-bottom: 1px solid var(--hp-line);
}

.rc-about .ab-facts dt {
    padding-top: 2px;
    font-size: .74rem;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hp-ink);
}

.rc-about .ab-facts dd {
    margin: 0;
    font-size: .98rem;
    line-height: 1.6;
    color: var(--hp-body);
}

.rc-about .ab-feature__link {
    display: inline-block;
    margin-top: 20px;
}

@media (min-width: 560px) {
    .rc-about .ab-facts__row {
        grid-template-columns: 9.5rem minmax(0, 1fr);
        gap: 18px;
    }
}

@media (min-width: 960px) {
    .rc-about .ab-feature {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: clamp(48px, 6vw, 96px);
    }

    .rc-about .ab-feature--flip .ab-feature__copy {
        order: 2;
    }
}

/* — figure card — */
.rc-about .ab-visual {
    position: relative;
    display: grid;
    gap: 26px;
    margin: 0;
    padding: clamp(28px, 3.4vw, 44px) clamp(22px, 3.2vw, 40px) clamp(24px, 3vw, 36px);
    overflow: hidden;
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-r-lg);
    background: var(--hp-white);
    box-shadow: var(--hp-sh-1);
}

.rc-about .ab-visual::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--hp-gold), var(--hp-accent));
}

/* numbered steps under each figure — the figure's real content */
.rc-about .ab-steps {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: ab-step;
}

.rc-about .ab-steps li {
    position: relative;
    padding-left: 38px;
    font-size: .95rem;
    line-height: 1.5;
    color: var(--hp-body);
    counter-increment: ab-step;
}

.rc-about .ab-steps li::before {
    content: counter(ab-step);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--hp-navy);
    color: #fff;
    font-size: .76rem;
    font-weight: 800;
}

.rc-about .ab-steps b {
    display: block;
    font-weight: 800;
    color: var(--hp-ink);
}

/* — pay-it-forward cycle — */
.rc-about .ab-cycle__ring {
    position: relative;
    width: min(100%, 236px);
    margin-inline: auto;
}

.rc-about .ab-cycle__svg {
    display: block;
    width: 100%;
    height: auto;
}

.rc-about .ab-cycle__nodes circle {
    fill: var(--hp-navy);
}

.rc-about .ab-cycle__nodes text {
    fill: #fff;
}

.rc-about .ab-cycle__center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: clamp(.95rem, .85rem + .4vw, 1.1rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--hp-ink);
}

@media (min-width: 560px) {
    .rc-about .ab-cycle {
        grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
        align-items: center;
        column-gap: clamp(24px, 3vw, 40px);
    }
}

@media (min-width: 960px) and (max-width: 1099px) {
    .rc-about .ab-cycle {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* — impact-sourcing flow — */
.rc-about .ab-flow__diagram {
    position: relative;
    padding-bottom: 26px;
}

.rc-about .ab-flow__svg {
    display: block;
    width: 100%;
    height: auto;
}

.rc-about .ab-flow__label {
    position: absolute;
    bottom: 0;
    font-size: clamp(.66rem, .62rem + .2vw, .74rem);
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--hp-muted);
}

/* x positions of the three nodes in the 480-wide drawing, as percentages */
.rc-about .ab-flow__label--org  { left: 12.9%; transform: translateX(-50%); }
.rc-about .ab-flow__label--hub  { left: 49.2%; transform: translateX(-50%); }
.rc-about .ab-flow__label--team { right: 0; }

/* at phone width the hub and team labels would otherwise touch */
@media (max-width: 479px) {
    .rc-about .ab-flow__label {
        font-size: .6rem;
        letter-spacing: .08em;
    }
}

@media (min-width: 560px) {
    .rc-about .ab-flow .ab-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }

    .rc-about .ab-flow .ab-steps li {
        padding: 36px 0 0;
    }
}

@media (min-width: 960px) and (max-width: 1099px) {
    .rc-about .ab-flow .ab-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .rc-about .ab-flow .ab-steps li {
        padding: 0 0 0 38px;
    }
}

/* — mobility — */
.rc-about .ab-mobility {
    margin-top: clamp(56px, 7vw, 96px);
}

.rc-about .ab-mobility__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border-top: 1px solid var(--hp-line-2);
}

.rc-about .ab-mobility__item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 4px 18px;
    padding: 22px 0;
    border-bottom: 1px solid var(--hp-line);
}

.rc-about .ab-mobility__icon {
    grid-row: span 2;
}

.rc-about .ab-mobility__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--hp-ink);
}

.rc-about .ab-mobility__text {
    max-width: 48ch;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--hp-body);
}

@media (min-width: 760px) {
    .rc-about .ab-mobility__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(32px, 5vw, 72px);
    }
}


/* ==========================================================================
   06  PRINCIPLES
   Navy, with the home page's dot field and glow. One figure in which every
   node is linked to every other; on wide screens the four principles sit
   at its four corners, each beside its own node.
   ========================================================================== */

.rc-about .ab-principles {
    isolation: isolate;
    overflow: hidden;
    background: var(--hp-navy);
    color: #fff;
}

.rc-about .ab-principles::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.3px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 55% 60% at 50% 58%, #000 10%, transparent 72%);
    mask-image: radial-gradient(ellipse 55% 60% at 50% 58%, #000 10%, transparent 72%);
}

.rc-about .ab-principles::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(520px 360px at 50% 60%, rgba(34, 211, 238, .12), transparent 70%),
        radial-gradient(420px 300px at 8% 0%, rgba(248, 176, 62, .07), transparent 70%);
}

.rc-about .ab-principles__head .hp-h2__accent {
    display: block;
}

.rc-about .ab-pr {
    position: relative;
    margin-top: clamp(32px, 4.5vw, 56px);
}

.rc-about .ab-pr__fig {
    width: min(62vw, 230px);
    margin: 0 auto clamp(28px, 4vw, 40px);
}

.rc-about .ab-pr__net {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.rc-about .ab-pr__link {
    stroke: rgba(226, 232, 240, .26);
    stroke-width: 1.4;
    transition: stroke .3s ease, stroke-width .3s ease;
}

.rc-about .ab-pr__node circle {
    fill: var(--hp-navy-deep);
    stroke: var(--hp-accent-pale);
    stroke-opacity: .55;
    stroke-width: 1.5;
    transition: fill .3s ease, stroke-opacity .3s ease;
}

.rc-about .ab-pr__node text {
    fill: #fff;
    transition: fill .3s ease;
}

.rc-about .ab-pr__heart {
    fill: var(--hp-accent-hi);
}

.rc-about .ab-pr__heart-halo {
    fill: none;
    stroke: var(--hp-accent-hi);
    stroke-opacity: .35;
    transform-box: fill-box;
    transform-origin: center;
}

.rc-about .ab-pr__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rc-about .ab-pr__item {
    padding: clamp(20px, 2.4vw, 28px);
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: var(--hp-r);
    background: rgba(255, 255, 255, .035);
    transition: border-color .3s ease, background-color .3s ease;
}

.rc-about .ab-pr__num {
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .16em;
    font-variant-numeric: tabular-nums;
    color: var(--hp-accent-pale);
}

.rc-about .ab-pr__title {
    margin-top: 8px;
    font-size: clamp(1.3rem, 1.15rem + .5vw, 1.55rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: #fff;
}

.rc-about .ab-pr__text {
    margin-top: 8px;
    max-width: 30ch;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .76);
}

/* Hovering a principle lights its node and every link leaving it. */
@media (hover: hover) {
    .rc-about .ab-pr__item:hover {
        border-color: rgba(103, 232, 249, .4);
        background: rgba(255, 255, 255, .06);
    }

    .rc-about .ab-pr:has(.ab-pr__item--1:hover) .ab-pr__link--1,
    .rc-about .ab-pr:has(.ab-pr__item--2:hover) .ab-pr__link--2,
    .rc-about .ab-pr:has(.ab-pr__item--3:hover) .ab-pr__link--3,
    .rc-about .ab-pr:has(.ab-pr__item--4:hover) .ab-pr__link--4 {
        stroke: var(--hp-accent-pale);
        stroke-width: 2;
    }

    .rc-about .ab-pr:has(.ab-pr__item--1:hover) .ab-pr__node--1 circle,
    .rc-about .ab-pr:has(.ab-pr__item--2:hover) .ab-pr__node--2 circle,
    .rc-about .ab-pr:has(.ab-pr__item--3:hover) .ab-pr__node--3 circle,
    .rc-about .ab-pr:has(.ab-pr__item--4:hover) .ab-pr__node--4 circle {
        fill: var(--hp-accent-hi);
        stroke-opacity: 1;
    }

    .rc-about .ab-pr:has(.ab-pr__item--1:hover) .ab-pr__node--1 text,
    .rc-about .ab-pr:has(.ab-pr__item--2:hover) .ab-pr__node--2 text,
    .rc-about .ab-pr:has(.ab-pr__item--3:hover) .ab-pr__node--3 text,
    .rc-about .ab-pr:has(.ab-pr__item--4:hover) .ab-pr__node--4 text {
        fill: var(--hp-navy);
    }
}

@media (min-width: 640px) and (max-width: 999px) {
    .rc-about .ab-pr__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Wide: the figure in the middle, a principle at each corner. The column
   gap is the figure's width, so the figure sits in it without covering
   any text; the items are pushed towards their nodes. */
@media (min-width: 1000px) {
    .rc-about .ab-pr {
        --fig: clamp(260px, 25vw, 320px);
    }

    .rc-about .ab-pr__fig {
        position: absolute;
        left: 50%;
        top: 50%;
        width: var(--fig);
        margin: 0;
        transform: translate(-50%, -50%);
    }

    .rc-about .ab-pr__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: calc(var(--fig) + clamp(24px, 3vw, 48px));
        row-gap: clamp(40px, 5vw, 64px);
    }

    .rc-about .ab-pr__item {
        padding: 0;
        border: 0;
        background: none;
    }

    .rc-about .ab-pr__item:nth-child(odd) {
        text-align: right;
    }

    .rc-about .ab-pr__item:nth-child(odd) .ab-pr__text {
        margin-left: auto;
    }

    @media (hover: hover) {
        .rc-about .ab-pr__item:hover {
            background: none;
        }
    }
}


/* ==========================================================================
   07  PEOPLE
   ========================================================================== */

.rc-about .ab-people__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(24px, 3.5vw, 40px);
    margin-top: clamp(28px, 3.5vw, 48px);
}

.rc-about .ab-people__photo img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 50% 62%;
}

.rc-about .ab-founder {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: clamp(26px, 3.2vw, 40px);
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-r-lg);
    background: var(--hp-white);
    box-shadow: var(--hp-sh-1);
}

.rc-about .ab-founder__kicker {
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--hp-accent-ink);
}

.rc-about .ab-founder__quote {
    position: relative;
    margin-top: 18px;
    padding-top: 30px;
}

.rc-about .ab-founder__quote::before {
    content: "“";
    position: absolute;
    left: -3px;
    top: -16px;
    font-size: 4.5rem;
    font-weight: 900;
    line-height: 1;
    color: var(--hp-gold);
}

.rc-about .ab-founder__quote p {
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem);
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: -.02em;
    color: var(--hp-ink);
    text-wrap: balance;
}

.rc-about .ab-founder__note {
    margin-top: 16px;
    font-size: .92rem;
    line-height: 1.55;
    color: var(--hp-muted);
}

.rc-about .ab-founder__who {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    align-items: center;
    margin-top: auto;
    padding-top: 26px;
}

.rc-about .ab-founder__photo {
    grid-row: span 2;
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--hp-line-2), 0 0 0 4px var(--hp-white), 0 0 0 5px rgba(6, 182, 212, .55);
}

.rc-about .ab-founder__name {
    align-self: end;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--hp-ink);
}

.rc-about .ab-founder__role {
    align-self: start;
    font-size: .92rem;
    color: var(--hp-body);
}

@media (min-width: 960px) {
    .rc-about .ab-people__top {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
        align-items: stretch;
    }

    /* the founder card stands as tall as the photo beside it, so the quote
       can carry more weight here */
    .rc-about .ab-founder__quote p {
        font-size: clamp(1.6rem, .9rem + 1.3vw, 2.1rem);
    }
}

/* — learners become teachers — */
.rc-about .ab-teach {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(24px, 3.5vw, 40px);
    margin-top: clamp(44px, 6vw, 80px);
    padding-top: clamp(28px, 3.5vw, 44px);
    border-top: 1px solid var(--hp-line-2);
}

.rc-about .ab-teach__title {
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
    line-height: 1.12;
}

.rc-about .ab-teach__intro p {
    margin-top: 14px;
    max-width: 44ch;
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--hp-body);
}

.rc-about .ab-teach__intro .ab-teach__more {
    margin-top: 20px;
    font-size: .95rem;
}

.rc-about .ab-voices {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.rc-about .ab-voice {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: clamp(22px, 2.6vw, 30px);
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-r);
    background: var(--hp-white);
    box-shadow: var(--hp-sh-1);
}

.rc-about .ab-voice__quote p {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--hp-ink);
    text-wrap: pretty;
}

.rc-about .ab-voice__quote p::before { content: "“"; }
.rc-about .ab-voice__quote p::after  { content: "”"; }

.rc-about .ab-voice__who {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
    margin-top: auto;
    padding-top: 20px;
}

.rc-about .ab-voice__photo {
    grid-row: span 2;
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--hp-line-2), 0 0 0 3px var(--hp-white), 0 0 0 4px rgba(248, 176, 62, .55);
}

.rc-about .ab-voice--rozma .ab-voice__photo {
    box-shadow: 0 0 0 1px var(--hp-line-2), 0 0 0 3px var(--hp-white), 0 0 0 4px rgba(6, 182, 212, .55);
}

.rc-about .ab-voice__name {
    align-self: end;
    font-size: 1rem;
    font-weight: 800;
    color: var(--hp-ink);
}

.rc-about .ab-voice__role {
    align-self: start;
    font-size: .86rem;
    line-height: 1.4;
    color: var(--hp-muted);
}

@media (min-width: 700px) {
    .rc-about .ab-voices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1040px) {
    .rc-about .ab-teach {
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr);
        column-gap: clamp(40px, 5vw, 72px);
        align-items: start;
    }
}


/* ==========================================================================
   08  PROGRESS
   ========================================================================== */

.rc-about .ab-progress__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

@media (min-width: 960px) {
    .rc-about .ab-progress__head {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: clamp(40px, 5vw, 72px);
        align-items: end;
    }
}

/* A light-band counterpart to the home page's ghost button: same pill,
   same height and type, ink outline instead of white. */
.rc-about .ab-btn--outline {
    border-color: var(--hp-line-2);
    background: var(--hp-white);
    color: var(--hp-ink);
    box-shadow: var(--hp-sh-1);
}

.rc-about .ab-btn--outline:hover {
    border-color: var(--hp-ink);
    color: var(--hp-ink);
}

@media (max-width: 479px) {
    .rc-about .ab-progress__cta .hp-btn {
        width: 100%;
    }
}

.rc-about .ab-recog {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin: clamp(28px, 3.5vw, 48px) 0 0;
    padding: 0;
    list-style: none;
}

.rc-about .ab-recog__card {
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 2.6vw, 32px);
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-r);
    background: var(--hp-white);
    box-shadow: var(--hp-sh-1);
}

.rc-about .ab-recog__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rc-about .ab-recog__year {
    font-size: clamp(2.3rem, 1.8rem + 1.8vw, 3.1rem);
    font-weight: 200;
    line-height: .9;
    letter-spacing: -.045em;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--hp-ink);
}

/* Award and selection are told apart, never blurred. */
.rc-about .ab-recog__type {
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(6, 182, 212, .1);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--hp-accent-ink);
}

.rc-about .ab-recog__card--selection .ab-recog__type {
    background: rgba(248, 176, 62, .16);
    color: var(--hp-gold-ink);
}

.rc-about .ab-recog__name {
    margin-top: 22px;
    font-size: 1.12rem;
    font-weight: 800;
    line-height: 1.32;
    letter-spacing: -.015em;
    color: var(--hp-ink);
}

.rc-about .ab-recog__by {
    margin-top: 6px;
    font-size: .92rem;
    font-weight: 600;
    color: var(--hp-soft);
}

.rc-about .ab-recog__text {
    margin-top: 12px;
    font-size: .98rem;
    line-height: 1.6;
    color: var(--hp-body);
}

.rc-about .ab-recog__src {
    align-self: flex-start;
    margin-top: auto;
    padding-top: 18px;
    font-size: .92rem;
}

@media (min-width: 900px) {
    .rc-about .ab-recog {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }
}


/* ==========================================================================
   09  MOTION
   Lines that draw once, when half the figure is on screen (home.js arms
   every [data-draw] with .is-armed, then adds .is-drawn). Without JS, or
   under reduced motion, home.js never arms them, so they are simply there.
   The home page's §12 already switches every animation off under
   prefers-reduced-motion, including the ones below.
   ========================================================================== */

.rc-about .ab-timeline__list.is-armed::after {
    transform: scaleY(0);
}

.rc-about .ab-timeline__list.is-armed.is-drawn::after {
    transform: none;
    transition: transform 1.6s var(--hp-ease) .1s;
}

@media (min-width: 900px) {
    .rc-about .ab-timeline__list.is-armed::after {
        transform: scaleX(0);
    }

    .rc-about .ab-timeline__list.is-armed.is-drawn::after {
        transform: none;
    }
}

.rc-about .ab-cycle__arc {
    stroke-dasharray: 1;
}

.rc-about .ab-cycle__svg.is-armed .ab-cycle__arc {
    stroke-dashoffset: 1;
}

.rc-about .ab-cycle__svg.is-armed.is-drawn .ab-cycle__arc {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.8s var(--hp-ease) .1s;
}

.rc-about .ab-pr__link {
    stroke-dasharray: 1;
}

.rc-about .ab-pr__net.is-armed .ab-pr__link {
    stroke-dashoffset: 1;
}

.rc-about .ab-pr__net.is-armed.is-drawn .ab-pr__link {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.4s var(--hp-ease), stroke .3s ease, stroke-width .3s ease;
}

.rc-about .ab-pr__net.is-armed.is-drawn .ab-pr__link:nth-child(n+5) {
    transition-delay: .35s, 0s, 0s;
}

@media (prefers-reduced-motion: reduce) {
    .rc-about .ab-orbit__label {
        animation: none;
    }
}