/* ============================================================
   Page: /about/  (.p-about)
   Hero (shared Company dark hero) → quiet trusted-by band → chapters
   as full-bleed bright/dark bands in the HOME (x3) language (Sofia,
   2026-07-28; the 2026-07-26 Prolibu stacked-card layout is retired)
   → CTA.
   ============================================================ */

.p-about { background: var(--color-background); }

/* ── Hero: the shared Company dark hero — components/company-hero.css
   (.co-hero via CompanyHero.astro; the per-page .ab-hero twin retired in
   the 2026-07-27 unification) ── */
/* The hero-extends-past-the-fold rule (curtain overlap compensation)
   moved INTO components/company-hero.css 2026-07-30 — one rule for every
   co-hero page (about/awards/careers/contact-us/technology). */

/* ── Trusted by: quiet band on the page ground ── */
.p-about .ab-trusted-by {
  background: var(--color-background);
}

.p-about .ab-trusted-by__inner {
  margin-inline: auto;
  max-width: var(--container-large);
  padding: 40px 20px;
}
@media (min-width: 640px) { .p-about .ab-trusted-by__inner { padding-block: 56px; } }
@media (min-width: 1024px) { .p-about .ab-trusted-by__inner { padding-inline: 32px; } }

.p-about .ab-trusted-by__label {
  text-align: center;
  font-size: var(--fs-xs);
  line-height: 20px;
  color: var(--color-grey-on-white);
  margin-bottom: 24px;
}

/* ── Chapter sections: full-bleed bright/dark bands in the HOME (x3)
   language (Sofia, 2026-07-28) — the Prolibu stacked rounded cards are
   retired; the page reads like the home: bright/dark rhythm, hairline
   seams, home card hovers, count-up stats. ── */
.p-about .ab-sec { background: var(--color-background); }
.p-about .ab-sec--grey { background: var(--color-background); } /* ex grey band, now full white everywhere (Sofia 2026-08-17) */
.p-about .ab-sec[data-header-bright] + .ab-sec[data-header-bright] {
  border-top: 1px solid var(--color-border-light);
}
.p-about .ab-sec--dark {
  /* the home's dark-band recipe: ink with a corner blue aurora */
  background:
    radial-gradient(80% 60% at 88% 0%, color-mix(in oklab, var(--color-x3-blue-deep) 30%, transparent), transparent 62%),
    var(--color-black);
  color: var(--color-grey-50);
}
/* chapter seams — the home's rounded-curtain motif (x3.css): every
   change of ground (bright ⇄ dark) opens on rounded top corners sliding
   over the closing chapter; tone-adjacent neighbors stay flush. */
.p-about .ab-trusted-by,
.p-about .ab-sec--dark,
.p-about .ab-sec--dark + .ab-sec {
  position: relative;
  margin-top: -20px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
@media (min-width: 768px) {
  .p-about .ab-trusted-by,
  .p-about .ab-sec--dark,
  .p-about .ab-sec--dark + .ab-sec {
    margin-top: -32px;
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
  }
}
.p-about .ab-inner {
  margin-inline: auto;
  width: 100%;
  max-width: var(--container-large);
  padding: var(--space-section-sm) var(--space-inline);
}
@media (min-width: 768px) { .p-about .ab-inner { padding-block: var(--space-section); } }
@media (min-width: 1024px) { .p-about .ab-inner { padding-inline: 24px; } }

/* ── Mission ── */
.p-about .ab-mission__heading {
  margin-top: 16px;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: var(--track-tightest);
}
@media (min-width: 768px) { .p-about .ab-mission__heading { font-size: 40px; } }

.p-about .ab-mission__sub {
  margin-top: 16px;
  max-width: 620px;
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-grey-on-white);
}

/* the three philosophy beliefs (incode.com/about verbatim) */
.p-about .ab-beliefs {
  margin-top: 48px;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .p-about .ab-beliefs { grid-template-columns: repeat(3, 1fr); } }

/* belief cards ride the HOME card language (Sofia, 2026-07-28: same
   rounded, same interactions as the home use-case pillar cards —
   x3.css .x3-case): white card, hairline border, radius 16, hover =
   lift + soft shadow + the title turning blue. */
.p-about .ab-belief {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: 16px;
  padding: 24px;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.p-about .ab-belief:hover {
  border-color: var(--color-grey-200);
  transform: translateY(-2px);
  box-shadow: none;
}

.p-about .ab-belief__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-blue-100);
  color: var(--color-blue);
}
.p-about .ab-belief__icon .ds-icon { width: 20px; height: 20px; }

.p-about .ab-belief__title {
  margin: 20px 0 0;
  font-size: var(--fs-3xl);
  letter-spacing: var(--track-tighter);
  line-height: 1.15;
  transition: color 0.25s ease;
}
.p-about .ab-belief:hover .ab-belief__title { color: var(--color-blue); }

.p-about .ab-belief__body {
  margin: 10px 0 0;
  max-width: 40ch;
  font-size: var(--fs-sm);
  line-height: var(--leading-body);
  color: var(--color-grey-on-white);
}

/* ── Story timeline (sticky intro left, years right) ── */
.p-about .ab-story__grid {
  display: grid;
  gap: 48px;
}
@media (min-width: 1024px) {
  .p-about .ab-story__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 96px;
  }
  .p-about .ab-story__head {
    position: sticky;
    top: 120px;
    align-self: start;
  }
}

.p-about .ab-story__heading {
  margin-top: 16px;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: var(--track-tightest);
  color: var(--color-grey-50);
}
@media (min-width: 768px) { .p-about .ab-story__heading { font-size: 40px; } }

.p-about .ab-story__sub {
  margin-top: 16px;
  max-width: 480px;
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-grey-200);
}

.p-about .ab-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-about .ab-timeline__item {
  display: flex;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid var(--color-border-dark);
}
.p-about .ab-timeline__item:last-child { border-bottom: 1px solid var(--color-border-dark); }

.p-about .ab-timeline__year {
  flex-shrink: 0;
  width: 64px;
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  /* accents on ink take Blue 200 (Sofia) */
  color: var(--color-blue-200);
  font-variant-numeric: tabular-nums;
}

.p-about .ab-timeline__main {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.p-about .ab-timeline__title {
  font-size: var(--fs-xl);
  letter-spacing: var(--track-tighter);
  line-height: 1.25;
  color: var(--color-grey-50);
  margin: 0;
}

.p-about .ab-timeline__body {
  font-size: var(--fs-sm);
  line-height: var(--leading-body);
  color: var(--color-grey-200);
  margin: 0;
  max-width: 56ch;
}

/* ── Culture strip ── */
.p-about .ab-culture {
  display: grid;
  gap: 40px;
}
@media (min-width: 1024px) {
  .p-about .ab-culture {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 96px;
    align-items: start;
  }
}

.p-about .ab-culture__heading {
  margin-top: 16px;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: var(--track-tightest);
}
@media (min-width: 768px) { .p-about .ab-culture__heading { font-size: 40px; } }

.p-about .ab-culture__sub {
  margin-top: 16px;
  max-width: 480px;
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-grey-on-white);
}

.p-about .ab-culture__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 28px;
  font-size: var(--fs-sm);
  letter-spacing: 0;
  color: var(--color-grey-on-white);
  transition: color 0.2s ease;
}
.p-about .ab-culture__cta-label {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: color-mix(in oklab, currentColor 45%, transparent);
  transition: text-decoration-color 0.2s ease;
}
.p-about .ab-culture__cta:hover { color: var(--color-black); }
.p-about .ab-culture__cta:hover .ab-culture__cta-label { text-decoration-color: currentColor; }

.p-about .ab-culture__values {
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-about .ab-culture__value {
  display: flex;
  align-items: center; /* the 36px icon chip centers on the row */
  gap: 20px;
  padding: 14px 4px;
  border-top: 1px solid var(--color-border-light);
}
.p-about .ab-culture__value:last-child { border-bottom: 1px solid var(--color-border-light); }

/* icon chips instead of numbers (Sofia, 2026-07-30) — the belief-card
   tile language at row scale: blue-100 rounded square, blue glyph */
.p-about .ab-culture__value-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--color-blue-100);
  color: var(--color-blue);
}
.p-about .ab-culture__value-icon .ds-icon { width: 18px; height: 18px; }

.p-about .ab-culture__value:hover .ab-culture__value-name { color: var(--color-blue); }
.p-about .ab-culture__value-name {
  transition: color 0.25s ease;
  font-size: var(--fs-2xl);
  letter-spacing: var(--track-tighter);
  color: var(--color-black);
}

/* ── Leadership ── */
.p-about .ab-people-section { background: var(--color-background); }

.p-about .ab-people__heading {
  margin-top: 16px;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: var(--track-tightest);
}
@media (min-width: 768px) { .p-about .ab-people__heading { font-size: 40px; } }

.p-about .ab-people__sub {
  margin-top: 16px;
  max-width: 560px;
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-grey-on-white);
}

/* Executive cards (Sofia 2026-07-30, ref catalystbehavioral.com/team):
   generous white cards three abreast, rounded B&W portrait top-left, arrow
   chip top-right, name + role at the foot. The whole card is a <button>
   that opens the bio modal below. */
.p-about .ab-people__grid {
  margin-top: 48px;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .p-about .ab-people__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .p-about .ab-people__grid { grid-template-columns: repeat(3, 1fr); } }

.p-about .ab-person {
  appearance: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 24px;
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  /* home card interaction (x3-case): lift + soft shadow, name to blue */
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.p-about .ab-person:hover {
  border-color: var(--color-grey-200);
  transform: translateY(-2px);
  box-shadow: none;
}
.p-about .ab-person:hover .ab-person__name { color: var(--color-blue); }
.p-about .ab-person:hover .ab-person__go {
  background: var(--color-blue);
  color: var(--color-white);
}

.p-about .ab-person__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

/* the renders are pre-composed (aligned face lines, shared grey-100
   ground); the rounded square crops them consistently. Full color per
   Sofia 2026-08-05 (the 2026-07-30 B&W treatment is retired). */
.p-about .ab-person__photo {
  width: 58%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top;
  border-radius: 20px;
  background: var(--color-grey-100);
}

.p-about .ab-person__go {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-grey-50);
  color: var(--color-foreground);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.p-about .ab-person__meta {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.p-about .ab-person__name {
  font-size: var(--fs-xl);
  letter-spacing: var(--track-tighter);
  margin: 0;
  transition: color 0.25s ease;
}

.p-about .ab-person__role {
  font-size: var(--fs-sm);
  line-height: var(--leading-snug);
  color: var(--color-grey-on-white);
  margin: 0;
}

/* ── Executive bio modal (blog search-modal conventions) ──
   exec-modal.js re-parents the modal into a .p-about wrapper on <body>:
   main.site-main carries a transform (page-load reveal) that would trap
   position:fixed descendants. */
.p-about .ab-exec-modal {
  position: fixed;
  inset: 0;
  z-index: 90; /* above the fixed header (50) */
  /* true viewport centering (Sofia 2026-07-30) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.p-about .ab-exec-modal[hidden] { display: none; }
.p-about .ab-exec-modal__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-black) 40%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.p-about .ab-exec-modal__dialog {
  position: relative;
  width: min(760px, 100%);
  max-height: min(76vh, 640px);
  overflow-y: auto;
  border-radius: 24px;
  border: 1px solid var(--color-border-light);
  background: var(--color-background);
  box-shadow: none;
  padding: 32px;
}
.p-about .ab-exec-modal__x {
  appearance: none;
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--color-grey-50);
  color: var(--color-foreground);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.p-about .ab-exec-modal__x:hover {
  background: var(--color-black);
  color: var(--color-white);
}
.p-about .ab-exec-modal__panel {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  align-items: start;
}
.p-about .ab-exec-modal__panel[hidden] { display: none; }
.p-about .ab-exec-modal__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top;
  border-radius: 20px;
  background: var(--color-grey-100);
}
.p-about .ab-exec-modal__name {
  margin: 0;
  padding-right: 48px; /* clear the close button */
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: var(--track-tighter);
}
.p-about .ab-exec-modal__role {
  margin: 6px 0 0;
  font-size: var(--fs-sm);
  color: var(--color-grey-on-white);
}
.p-about .ab-exec-modal__bio {
  margin: 16px 0 0;
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-grey-600);
}
.p-about .ab-exec-modal__link {
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-blue);
}
.p-about .ab-exec-modal__link:hover { text-decoration: underline; }
@media (max-width: 639px) {
  .p-about .ab-exec-modal__dialog { padding: 24px; }
  .p-about .ab-exec-modal__panel { grid-template-columns: 1fr; gap: 20px; }
  .p-about .ab-exec-modal__photo { width: 152px; }
}

/* ── Global presence ── */
.p-about .ab-globe__heading {
  margin-top: 16px;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: var(--track-tightest);
  color: var(--color-grey-50);
}
@media (min-width: 768px) { .p-about .ab-globe__heading { font-size: 40px; } }

.p-about .ab-globe__sub {
  margin-top: 16px;
  max-width: 560px;
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-grey-200);
}

.p-about .ab-globe__stats {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.p-about .ab-globe__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.p-about .ab-globe__stat-value {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: var(--track-tightest);
  /* big numbers on dark are ALWAYS solid white (Sofia) */
  color: var(--color-white);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.p-about .ab-globe__stat-label {
  font-size: var(--fs-xs);
  color: var(--color-grey-300);
}

.p-about .ab-globe__stat-divider {
  width: 1px;
  height: 40px;
  background: var(--color-border-dark);
  flex-shrink: 0;
}

.p-about .ab-globe__cities {
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) { .p-about .ab-globe__cities { grid-template-columns: repeat(3, 1fr); } }

.p-about .ab-globe__city {
  /* home dark-band rows: hairline top, no box */
  border-top: 1px solid var(--color-border-dark);
  padding: 16px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.p-about .ab-globe__city:hover .ab-globe__city-name { color: var(--color-blue-200); }

.p-about .ab-globe__city-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-body);
  letter-spacing: var(--track-tighter);
  color: var(--color-grey-50);
  transition: color 0.25s ease;
}

.p-about .ab-globe__city-hq {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--color-blue-200);
}

.p-about .ab-globe__city-country {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--color-grey-300);
}

.p-about .ab-globe__city-flag {
  width: 21px;
  height: 14px;
  border-radius: 2px;
  object-fit: cover;
  flex-shrink: 0;
}

.p-about .ab-globe__ctas {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ── Recognition band ── */
.p-about .ab-recognition {
  display: grid;
  gap: 40px;
  align-items: center;
}
@media (min-width: 1024px) {
  .p-about .ab-recognition {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 96px;
  }
}

.p-about .ab-recognition__heading {
  margin-top: 16px;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: var(--track-tightest);
}
@media (min-width: 768px) { .p-about .ab-recognition__heading { font-size: 40px; } }

.p-about .ab-recognition__sub {
  margin-top: 16px;
  max-width: 480px;
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--color-grey-on-white);
}

.p-about .ab-recognition__ctas { margin-top: 28px; }

.p-about .ab-recognition__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.p-about .ab-recognition__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  transition: transform 0.25s ease;
}
.p-about .ab-recognition__badge:hover { transform: translateY(-2px); }

.p-about .ab-recognition__badge img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}