/* About (Our story) - page-specific layout only.
 *
 * Everything reusable is taken from styles.css and css/shared.css and used unchanged:
 * .phero, .split-5-7, .steps, .band--sage, .band--forest, .card, .stat, .disc, .notice,
 * .grid-3, .tiles-mini, .badges, .mcard, .empty, .cta. What is left here is the handful of
 * arrangements only this page has: the origin pull-quote over the photograph, the demo-history
 * timeline, the why/how two-column bands, the team and principle cards, the milestone row,
 * the impact block with the bleeding photograph, the partner wordmarks and the contact block.
 *
 * This file loads AFTER styles.css and shared.css and only ADDS selectors. Every class below
 * starts with ab- (or is a compound such as .tiles-mini.ab-tiles), so nothing here can reach
 * the home page.
 */

/* ------------------------------------------------------------------ origin
   .split-5-7 does the two columns; the quote card sits over the bottom of the photograph on a
   wide screen and drops underneath it on a narrow one. */
.ab-origin { align-items: center; }
.ab-origin__media { position: relative; }
.ab-origin__copy h2 { max-width: 18ch; }
.ab-origin__copy p { max-width: 62ch; }
.ab-origin__quote { margin: 14px 0 0; background: var(--forest); color: var(--white); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow-lg); }
.ab-origin__quote blockquote { margin: 0; }
.ab-origin__quote p { margin: 0 0 8px; color: var(--white); font-size: clamp(1rem, .9rem + .4vw, 1.2rem); font-weight: 700; line-height: 1.35; text-wrap: balance; }
.ab-origin__quote figcaption { font-size: .8rem; color: var(--on-dark-muted); }
@media (min-width: 900px) {
  .ab-origin__quote { position: absolute; left: clamp(14px, 1.6vw, 26px); right: clamp(14px, 1.6vw, 26px); bottom: clamp(14px, 1.6vw, 26px); margin: 0; max-width: 420px; }
}

/* ------------------------------------------------------------------ demo-history timeline
   Five points on a connecting line, with the line turning into a left rail under 900px.
   The block is labelled "Demo history" in the markup: these dates are the only invented
   figures on the page. */
.ab-time-head { margin: clamp(34px, 4vw, 56px) 0 0; padding-top: clamp(22px, 2.6vw, 34px); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.ab-time-head .h4 { color: var(--forest); }
.ab-time-head p { margin: 0; max-width: 72ch; }

.ab-time { --t-gap: clamp(16px, 1.8vw, 28px); list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--t-gap); margin-top: clamp(20px, 2.4vw, 32px); }
.ab-time__item { position: relative; min-width: 0; padding-top: 30px; }
.ab-time__item::before { content: ""; position: absolute; left: 8px; right: calc(-1 * var(--t-gap)); top: 6px; height: 2px; background: var(--line-2); }
.ab-time__item:last-child::before { content: none; }
.ab-time__dot { position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--leaf); border: 3px solid var(--cream); box-shadow: 0 0 0 2px var(--sage-3); }
.ab-time__item--now .ab-time__dot { background: var(--yellow); box-shadow: 0 0 0 2px var(--yellow-dark); }
.ab-time__year { margin: 0 0 2px; font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; color: var(--forest); font-variant-numeric: tabular-nums; }
.ab-time__title { font-size: .98rem; margin: 0 0 6px; color: var(--leaf-dark); }
.ab-time__text { margin: 0; font-size: .88rem; color: var(--muted); }
.ab-time__text strong { color: var(--forest); font-variant-numeric: tabular-nums; }
@media (max-width: 899px) {
  .ab-time { grid-template-columns: 1fr; gap: 0; }
  .ab-time__item { padding: 0 0 24px 32px; }
  .ab-time__item:last-child { padding-bottom: 0; }
  .ab-time__item::before { left: 7px; right: auto; top: 20px; bottom: 4px; width: 2px; height: auto; }
  .ab-time__dot { top: 3px; }
}

/* ------------------------------------------------------------------ why we exist */
.ab-why { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 3.4vw, 56px); align-items: center; }
.ab-why__copy h2 { margin-bottom: .45em; }
.ab-why__copy p { color: var(--muted); max-width: 40ch; }
.ab-why__copy .btn { margin-top: 6px; }
.ab-belief { display: grid; gap: 10px; align-content: start; padding: 26px 24px 28px; }
.ab-belief p { margin: 0; color: var(--muted); font-size: .93rem; }
@media (max-width: 1099px) { .ab-why { grid-template-columns: 1fr; } .ab-why__copy p { max-width: 62ch; } }

/* ------------------------------------------------------------------ how we work
   Same 4/8 split as the sage band above it, so the two read as a pair. */
.ab-how { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 3.4vw, 56px); align-items: start; }
.ab-how__copy h2 { margin-bottom: .4em; }
.ab-how__copy p { max-width: 38ch; margin-bottom: 22px; }
@media (max-width: 1099px) { .ab-how { grid-template-columns: 1fr; } .ab-how__copy p { max-width: 56ch; } }

/* ------------------------------------------------------------------ the team
   Initials, never a photograph: the people are invented and a stock face would say otherwise. */
.ab-team { list-style: none; }
.ab-person { display: grid; gap: 6px; align-content: start; }
.ab-person__avatar { width: 54px; height: 54px; border-radius: 50%; background: var(--sage); color: var(--forest); display: grid; place-items: center; font-size: 1.05rem; font-weight: 800; letter-spacing: .04em; margin-bottom: 8px; }
.ab-team > li:nth-child(2) .ab-person__avatar { background: #CFE2D5; }
.ab-team > li:nth-child(3) .ab-person__avatar { background: #BFD6C7; }
.ab-team > li:nth-child(4) .ab-person__avatar { background: var(--yellow-tint); }
.ab-team > li:nth-child(5) .ab-person__avatar { background: #C9DBC6; }
.ab-team > li:nth-child(6) .ab-person__avatar { background: #DFE7D1; }
.ab-person__name { font-size: 1.1rem; margin: 0; }
.ab-person__role { margin: 0; font-size: .82rem; font-weight: 700; letter-spacing: .02em; color: var(--leaf-dark); }
.ab-person__text { margin: 4px 0 0; font-size: .9rem; color: var(--muted); }
.ab-team__note { margin-top: clamp(20px, 2.4vw, 30px); }

/* ------------------------------------------------------------------ milestones
   One card per campaign in the record, oldest first. Six fit across a wide screen; the row
   folds to three, two and one on the way down. */
.ab-miles { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.ab-miles > .empty { grid-column: 1 / -1; }
.ab-mile { position: relative; display: grid; grid-template-rows: repeat(4, auto) 1fr; gap: 4px; align-content: start; background: var(--warm-white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 20px; min-width: 0; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
.ab-mile::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--sage-3); }
.ab-mile--active::before { background: var(--leaf); }
.ab-mile--upcoming::before { background: var(--yellow); }
.ab-mile__year { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; color: var(--forest); font-variant-numeric: tabular-nums; line-height: 1.1; }
.ab-mile__name { font-size: .95rem; margin: 0; }
.ab-mile__name a { color: inherit; text-decoration: none; }
.ab-mile__name a::after { content: ""; position: absolute; inset: 0; }
.ab-mile__name a:hover { text-decoration: underline; }
.ab-mile__text { margin: 2px 0 0; font-size: .82rem; color: var(--muted); }
.ab-mile__text strong { color: var(--leaf-dark); font-variant-numeric: tabular-nums; }
/* the card is a grid, so the badge has to be told not to stretch across it */
.ab-mile .badge { margin-top: 10px; align-self: end; justify-self: start; }
.ab-mile:hover, .ab-mile:focus-within { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--sage-3); }
.ab-miles__note { margin: 16px 0 0; }

/* ------------------------------------------------------------------ real people, real progress
   The photograph runs out to the left edge of the viewport on a wide screen, the way the
   design has it; the four figures sit in a 2x2 block beside it. */
.ab-impact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(26px, 3.4vw, 56px); align-items: center; }
.ab-impact__media { min-width: 0; }
.ab-impact__media img { width: 100%; height: 100%; min-height: 300px; max-height: 480px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); background: var(--sage); }
.ab-impact__copy { min-width: 0; }
.ab-impact__copy h2 { margin-bottom: .35em; }
.ab-impact__copy > p { color: var(--muted); max-width: 50ch; }
.ab-impact__stats { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2vw, 30px); margin: clamp(20px, 2.4vw, 30px) 0 18px; }
.ab-impact__copy .small { margin: 0; }
@media (min-width: 900px) {
  .ab-impact__media { margin-left: min(0px, calc((var(--container) - 100vw) / 2 - var(--gutter))); }
  .ab-impact__media img { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
}
@media (max-width: 899px) {
  .ab-impact { grid-template-columns: 1fr; }
  .ab-impact__media img { aspect-ratio: 16 / 10; min-height: 0; max-height: 340px; }
}
@media (max-width: 479px) { .ab-impact__stats { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ stories
   One featured card and two row cards beside it; .mcard from shared.css does the rest. */
.ab-stories { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: start; }
.ab-stories__side { display: grid; gap: var(--gap); align-content: start; min-width: 0; }
.ab-stories__note { margin: 18px 0 0; }
/* .mcard__body is a flex column, so an inline pill would otherwise stretch across the card */
.ab-stories .pill--tag { align-self: flex-start; }
@media (max-width: 899px) { .ab-stories { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ guiding principles
   Five across on a projector, three then two then one on the way down. */
.ab-principles { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); }
.ab-principle { display: grid; gap: 8px; align-content: start; }
.ab-principle p { margin: 0; font-size: .88rem; color: var(--muted); }
.ab-principle .disc { margin-bottom: 4px; }
@media (max-width: 1199px) { .ab-principles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) { .ab-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .ab-principles { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ transparency row */
.tiles-mini.ab-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ab-badges { margin-top: 20px; }
.ab-trans__note { margin: 14px 0 0; max-width: 88ch; }
@media (max-width: 899px) { .tiles-mini.ab-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .tiles-mini.ab-tiles { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ partners
   Neutral wordmarks: a monogram and the name, no invented logo. */
.ab-partners { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ab-partner { display: flex; align-items: center; gap: 14px; min-width: 0; background: var(--warm-white); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.ab-partner__mark { flex: none; width: 46px; height: 46px; border-radius: var(--radius-sm); background: var(--sage-2); border: 1px solid var(--sage-3); color: var(--muted); display: grid; place-items: center; font-size: .92rem; font-weight: 800; letter-spacing: .06em; }
.ab-partner__name { font-weight: 700; font-size: .95rem; color: var(--forest); min-width: 0; overflow-wrap: anywhere; }
.ab-partners__note { margin: 14px 0 0; }
@media (max-width: 1099px) { .ab-partners { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 519px) { .ab-partners { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ contact */
.ab-contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(26px, 3.2vw, 52px); align-items: start; }
.ab-contact__copy h2 { margin-bottom: .35em; }
.ab-contact__copy > p { color: var(--muted); max-width: 46ch; }
.ab-routes { list-style: none; display: grid; gap: 18px; margin-top: clamp(18px, 2vw, 26px); }
.ab-routes li { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.ab-routes__body { min-width: 0; display: grid; gap: 2px; }
.ab-routes__body strong { color: var(--forest); font-size: 1.02rem; }
.ab-routes__body > span { font-size: .9rem; color: var(--muted); }
.ab-routes .link-btn { padding: 4px 0 0; justify-self: start; }
.ab-contact__card { display: grid; gap: 16px; align-content: start; }
.ab-contact__card h3 { margin: 0; }
.ab-contact__list { list-style: none; display: grid; gap: 14px; font-size: .9rem; }
.ab-contact__list li { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.ab-contact__list .icon { flex: none; margin-top: 3px; color: var(--leaf); }
.ab-contact__list span { min-width: 0; overflow-wrap: anywhere; }
.ab-contact__card .small { margin: 0; }
@media (max-width: 899px) { .ab-contact { grid-template-columns: 1fr; } .ab-contact__copy > p { max-width: 60ch; } }