/* ---------- About (Figma 340:947) ----------
   Three sections in the 1196px column: photos + bio, Experience, Brands.
   48px under the ABOUT title, 96px between sections, 36px from each section
   header to its content. Section headers are Display/M with a Signal Orange
   divider that runs to the page edge (same as the AI page projects). */

.cs-intro + .cs-section.ab-section { margin-top: 48px; }
.cs-section.ab-section + .cs-section.ab-section { margin-top: var(--space-2xl); }
main.ab-page + .site-footer { margin-top: var(--space-2xl); }

/* Section header: title (+ optional button), divider to the page edge */
.ab-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-sm);
  margin: 0 calc(50% - 50vw) 36px 0;
  padding-right: calc(50vw - 50%);
  border-bottom: 1px solid var(--signal-orange);
  padding-bottom: 4px;
}
.ab-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  line-height: 48px;
  text-transform: uppercase;
  color: var(--neutral-surface);
}
.ab-head .btn { margin-bottom: 6px; }
/* The header's own content box ends at the column edge */
.ab-head { box-sizing: border-box; }

.ab-eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 1.08px;
  text-transform: uppercase;
  color: var(--neutral-hairline);
}

/* ---- Photos + bio ---- */
.ab-intro {
  display: grid;
  grid-template-columns: 407fr 717fr;
  column-gap: 72px;
  align-items: center;
}
.ab-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}
.cs-section .ab-photos img { object-fit: cover; }
.cs-section .ab-photo-main { grid-column: 1 / -1; aspect-ratio: 407 / 271; }
.cs-section .ab-photo-tall { aspect-ratio: 2 / 3; }
.cs-section .ab-photo-soccer { object-position: 0 50%; } /* Figma crop: left edge */
.ab-bio p { margin: 0; font-size: 16px; line-height: 26px; color: var(--neutral-surface); }
.ab-bio p + p { margin-top: 26px; }

/* ---- Experience ---- */
.ab-jobs { width: 100%; border-collapse: collapse; text-align: left; }
.ab-jobs th { padding: 0 var(--space-md) 19px 0; vertical-align: bottom; }
.ab-jobs td {
  padding: 0 var(--space-md) 35px 0;
  vertical-align: top;
  font-size: 16px;
  line-height: 26px;
  color: var(--neutral-surface);
}
.ab-jobs tr:last-child td { padding-bottom: 0; }
.ab-jobs .ab-col-program { width: 32%; }
.ab-jobs .ab-col-position { width: 42%; }

/* ---- Brands ---- */
.ab-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg) var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cs-section .ab-logos img { height: auto; max-width: 100%; } /* width set per logo (Figma size) */
.ab-activations {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg) 72px;
  margin-top: var(--space-xl);
}
.ab-group-title {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 32px;
  text-transform: uppercase;
  color: var(--neutral-surface);
}
.ab-list { display: flex; flex-direction: column; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.ab-list .ab-eyebrow { margin-bottom: 4px; }
.ab-list p:not(.ab-eyebrow) { margin: 0; font-size: 16px; line-height: 26px; color: var(--neutral-surface); }

@media (max-width: 960px) {
  .ab-intro { column-gap: var(--space-lg); }
  .ab-activations { column-gap: var(--space-lg); }
  .ab-title { font-size: 36px; line-height: 40px; }
}

/* Below ~1100px the eight logos no longer fit one line: four across, centred */
@media (max-width: 1100px) {
  .ab-logos { display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; row-gap: var(--space-lg); }
}

@media (max-width: 640px) {
  .cs-intro + .cs-section.ab-section { margin-top: var(--space-lg); }
  .cs-section.ab-section + .cs-section.ab-section { margin-top: var(--space-xl); }
  main.ab-page + .site-footer { margin-top: var(--space-xl); }
  .ab-head { margin-bottom: var(--space-md); }
  .ab-title { font-size: 32px; line-height: 36px; }
  .ab-intro { grid-template-columns: 1fr; row-gap: var(--space-md); }
  .ab-bio p + p { margin-top: var(--space-sm); }

  /* Each job stacks: program, position, years */
  .ab-jobs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ab-jobs, .ab-jobs tbody, .ab-jobs tr, .ab-jobs td { display: block; width: auto; }
  .ab-jobs tr + tr { margin-top: var(--space-md); }
  .ab-jobs td { padding: 0; }
  .ab-jobs td:first-child { font-weight: 600; }
  .ab-jobs td:last-child { color: var(--neutral-hairline); }

  .ab-logos { gap: var(--space-md); }
  .ab-activations { grid-template-columns: 1fr; margin-top: var(--space-lg); }
}