/* About us (Claude Design's handoff of 1 October 2026). Every colour is a role from
   theme.colors.css, so light, dark and high contrast all follow; in high contrast `--hair` and
   `--strong` thicken and `--shadow1` is none, so borders carry the structure. Nothing animates. */

.ab-sec {
  padding: 40px 20px 48px;
}
.ab-hero {
  padding: 32px 20px 24px;
}
.ab-why {
  padding: 24px 20px 40px;
}
/* The surface band, bordered top and bottom, alternating with the page ground. */
.ab-band {
  background: var(--surface);
  border-top: var(--hair) solid var(--border);
  border-bottom: var(--hair) solid var(--border);
}
.ab-wrap {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ab-hero .ab-wrap {
  gap: 12px;
}

.ab-h1,
.ab-h2 {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 300;
  margin: 0;
  text-wrap: balance;
}
.ab-h1 {
  font-size: clamp(40px, 5vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  max-width: 16em;
}
.ab-h2 {
  font-size: clamp(30px, 3.2vw, 40px);
  line-height: 1.1;
}
.ab-lede {
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
  max-width: 34em;
}

/* Heading beside copy, wrapping to one column on narrow screens. */
.ab-split {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 32px 48px;
}
.ab-split-head {
  flex: 1 1 260px;
}
.ab-split-body {
  flex: 2 1 400px;
}
.ab-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 38em;
  font-size: 18px;
  line-height: 1.55;
}
.ab-copy p {
  margin: 0;
}

/* Heading row with an intro beside it (advisory board, the people in the videos). */
.ab-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 48px;
}
.ab-intro {
  flex: 2 1 400px;
  margin: 0;
  max-width: 38em;
  font-size: 18px;
  line-height: 1.55;
  color: var(--textSecondary);
}
.ab-split-head .ab-intro {
  margin-top: 12px;
}
.ab-intro-narrow {
  max-width: 26em;
}

.ab-name-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ab-role {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--textAccent);
}
.ab-role-lg {
  font-size: 18px;
}

/* Leadership: a 240px portrait beside the copy; the portrait wraps above it on a phone. */
.ab-leader {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px 40px;
}
.ab-leader + .ab-leader {
  border-top: var(--hair) solid var(--divider);
  padding-top: 36px;
}
.ab-leader-photo {
  flex: none;
  width: 240px;
  height: 240px;
  border-radius: 28px;
  object-fit: cover;
  border: var(--hair) solid var(--border);
  background: var(--recess);
}
.ab-leader-text {
  flex: 1 1 400px;
  gap: 14px;
}
.ab-leader-name {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}
.ab-list {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--textSecondary);
}

/* Advisory board: three cards from about 900px, one column on a phone. */
.ab-advisors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
}
/* Each card takes two rows of the shared grid (subgrid), so the three headers share one row
   and the three bullet lists start on the same line, whatever the longest name and role
   (Clinton's review, 1 October 2026). Where subgrid is missing the cards simply stack their own
   rows, as before. */
.ab-card {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  align-content: start;
  gap: 14px;
  padding: 20px;
  border-radius: 24px;
  background: var(--surface);
  border: var(--hair) solid var(--border);
  box-shadow: var(--shadow1);
}
/* Portrait and name from the top, so every card's portrait and name line up with the others'. */
.ab-person {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.ab-disc {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: var(--hair) solid var(--border);
  background: var(--recess);
}
.ab-name {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
}
.ab-list-card {
  font-size: 17px;
  line-height: 1.5;
  gap: 6px;
}

/* The people behind the content. */
.ab-contributors {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ab-contributor {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  max-width: 38em;
}
.ab-bio {
  margin: 4px 0 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--textSecondary);
}
.ab-partners {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
  border-top: var(--hair) solid var(--divider);
}
.ab-partners-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--textSecondary);
}
.ab-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ab-chips li {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 600;
  background: var(--recess);
  border: var(--hair) solid var(--border);
}

/* The people in the videos: seven square tiles, four and three across at 1280, two on a phone. */
.ab-team {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.ab-team figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ab-tile {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  object-fit: cover;
  border: var(--hair) solid var(--border);
  background: var(--recess);
}
.ab-team figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ab-tile-name {
  font-size: 19px;
  font-weight: 700;
}
.ab-tile-prog {
  font-size: 16px;
  color: var(--textSecondary);
}
/* "Are you next?": the open place after the last person. Seven people, so the tile fills what is
   left of the last row: on a phone (two across) it takes a row of its own; three across, the
   two places beside Ethan; four across, a row of its own (one place is too narrow to read);
   five across, the three places beside Kane and Ethan. */
.ab-next {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  border-radius: 20px;
  border: var(--strong) dashed var(--borderStrong);
}
.ab-next p {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  max-width: 34em;
}
.ab-next-h {
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-weight: 300;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.1;
}
@media (min-width: 37.5em) {
  .ab-team {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
  .ab-next {
    grid-column: span 2;
  }
}
@media (min-width: 56.5625em) {
  .ab-team {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ab-next {
    grid-column: 1 / -1;
  }
}
@media (min-width: 72em) {
  .ab-team {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .ab-next {
    grid-column: span 3;
  }
}

/* The invitation's one action, which opens the contact form. */
.ab-cta-btn {
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
  border-radius: 100px;
  font-size: 19px;
  font-weight: 700;
  text-decoration: none;
  background: var(--primaryAction);
  color: var(--onPrimaryAction);
}
.ab-cta-btn:hover {
  background: var(--primaryActionHover);
  color: var(--onPrimaryAction);
}