/**
 * /about/ page (page 248) — Phase O rebuild
 * Body class scope: .chiefai-about
 *
 * Sections:
 *   .about-hero       — cream, eyebrow + h1 + lede + cta pair + photo
 *   .about-why        — white, 3 narrative pills
 *   .about-pillars    — cream, 3 .aaas-pillar-card
 *   .about-think      — dark navy, body + video
 *   .about-team       — cream, 2 .about-team-card
 *   .about-readiness  — dark navy with radial glow, single CTA
 *   .about-faqs       — cream, .aaas-faq details/summary
 */

/* ============================================================
   HERO
   ============================================================ */
.chiefai-about .about-hero {
  position: relative;
  overflow: hidden;
}
.chiefai-about .about-hero h1.aaas-display {
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.98;
  margin: 18px 0 24px;
  max-width: 18ch;
}
.chiefai-about .about-hero h1.aaas-display em {
  font-style: normal;
  font-weight: 300;
  color: var(--cai-orange);
}
.chiefai-about .about-hero .aaas-lede {
  margin-bottom: 32px;
}
.chiefai-about .about-hero .hero-actions .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.chiefai-about .about-hero-img img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 40px 80px -30px rgba(15,42,71,0.25);
}

/* ============================================================
   PILLARS — allow H3 to wrap (design-system default is nowrap,
   sized for short titles on the AAAS landing; About titles are longer)
   ============================================================ */
.chiefai-about .about-pillars .aaas-pillar-card h3 {
  white-space: normal;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.2;
}

/* ============================================================
   WHY WE EXIST — narrative pill stack
   ============================================================ */
.chiefai-about .about-why-stack {
  margin: 56px 0 0 !important;
}
/* Kadence wraps wp:group children in .wp-block-group__inner-container —
   target that to actually flex/space the pills. */
.chiefai-about .about-why-stack > .wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.chiefai-about .about-why-pill {
  background: #FAFAFA;
  border: 1px solid var(--cai-rule);
  border-radius: 12px;
  padding: 28px 32px;
  font-family: var(--cai-body);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--cai-charcoal);
  margin: 0 !important;
  border-left: 3px solid var(--cai-orange);
}

/* ============================================================
   HOW WE THINK — dark section, video on right
   ============================================================ */
.chiefai-about .about-think .about-think-body {
  font-family: var(--cai-body);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.6;
  color: rgba(250,250,250,0.88);
  margin: 24px 0 0 !important;
  max-width: 50ch;
}
.chiefai-about .about-think-visual figure {
  margin: 0;
}
.chiefai-about .about-think-visual video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.5);
}

/* ============================================================
   TEAM — headshot + bio + link cards
   ============================================================ */
.chiefai-about .about-team-grid {
  margin: 56px 0 0 !important;
  gap: 32px;
}

/* Single-card layout.
   A lone card spans the full 1320px grid, so the default vertical stack leaves
   the bio and divider stranded against dead space. Lay the photo beside the
   copy instead. Scoped to :only-child, so adding a second team member reverts
   to the stacked 2-up with no CSS change.

   The grid goes on .wp-block-group__inner-container, NOT on .about-team-card:
   a native wp:group renders that wrapper between the card and its children, so
   a grid on the card itself sees exactly one child and collapses to one column.
   The :has() fallback covers any context that omits the wrapper (e.g. editor). */
.chiefai-about .about-team-grid > .wp-block-column:only-child .about-team-card {
  padding: 40px;
}
.chiefai-about .about-team-grid > .wp-block-column:only-child .about-team-card > .wp-block-group__inner-container,
.chiefai-about .about-team-grid > .wp-block-column:only-child .about-team-card:has(> .about-team-photo) {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  /* Trailing 1fr row absorbs the photo's surplus height. Without it the photo,
     spanning 1/-1, distributes its extra height across the four copy rows and
     strands the title and bio halfway down the card. */
  grid-template-rows: auto auto auto auto 1fr;
  column-gap: 44px;
  align-items: start;
}
.chiefai-about .about-team-grid > .wp-block-column:only-child .about-team-photo {
  grid-column: 1;
  grid-row: 1 / -1;
  margin: 0 !important;
}
.chiefai-about .about-team-grid > .wp-block-column:only-child .about-team-photo img {
  height: 380px !important;
  margin: 0 !important;
}
.chiefai-about .about-team-grid > .wp-block-column:only-child .about-team-name  { grid-column: 2; grid-row: 1; }
.chiefai-about .about-team-grid > .wp-block-column:only-child .about-team-title { grid-column: 2; grid-row: 2; }
.chiefai-about .about-team-grid > .wp-block-column:only-child .about-team-bio   { grid-column: 2; grid-row: 3; }
.chiefai-about .about-team-grid > .wp-block-column:only-child .about-team-link-row { grid-column: 2; grid-row: 4; }
/* The bio's 52ch cap is tuned for the narrow 2-up column; widen it here so the
   copy tracks the divider rather than stopping short of it. */
.chiefai-about .about-team-grid > .wp-block-column:only-child .about-team-bio {
  max-width: 72ch;
}

/* Kadence stacks wp:columns at 781px; collapse the side-by-side card to match. */
@media (max-width: 781px) {
  .chiefai-about .about-team-grid > .wp-block-column:only-child .about-team-card {
    padding: 36px 36px 32px;
  }
  .chiefai-about .about-team-grid > .wp-block-column:only-child .about-team-card > .wp-block-group__inner-container,
  .chiefai-about .about-team-grid > .wp-block-column:only-child .about-team-card:has(> .about-team-photo) {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .chiefai-about .about-team-grid > .wp-block-column:only-child .about-team-photo {
    margin: 0 auto 24px !important;
  }
  .chiefai-about .about-team-grid > .wp-block-column:only-child .about-team-photo img {
    height: 440px !important;
    margin: 0 auto !important;
  }
  /* Reset the desktop row/column placement so the stack falls back to source order. */
  .chiefai-about .about-team-grid > .wp-block-column:only-child .about-team-photo,
  .chiefai-about .about-team-grid > .wp-block-column:only-child .about-team-name,
  .chiefai-about .about-team-grid > .wp-block-column:only-child .about-team-title,
  .chiefai-about .about-team-grid > .wp-block-column:only-child .about-team-bio,
  .chiefai-about .about-team-grid > .wp-block-column:only-child .about-team-link-row {
    grid-column: 1;
    grid-row: auto;
  }
}
.chiefai-about .about-team-card {
  background: #fff;
  border: 1px solid var(--cai-rule);
  border-radius: 16px;
  padding: 36px 36px 32px;
  margin: 0 !important;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.chiefai-about .about-team-card:hover {
  border-color: var(--cai-navy);
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -22px rgba(15,42,71,0.25);
}
.chiefai-about .about-team-photo {
  margin: 0 auto 24px !important;
  text-align: center;
}
.chiefai-about .about-team-photo img {
  display: block;
  width: 100% !important;
  max-width: 320px !important;
  height: 440px !important;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 12px;
  margin: 0 auto !important;
}
.chiefai-about .about-team-name {
  font-family: var(--cai-heading);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--cai-navy);
  margin: 0 0 4px !important;
  line-height: 1.2;
}
.chiefai-about .about-team-title {
  font-family: var(--cai-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cai-orange);
  margin: 0 0 18px !important;
}
.chiefai-about .about-team-bio {
  font-family: var(--cai-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--cai-slate);
  margin: 0 0 22px !important;
  max-width: 52ch;
}
.chiefai-about .about-team-link-row {
  margin: 0 !important;
  padding-top: 16px;
  border-top: 1px solid var(--cai-rule);
}
.chiefai-about .about-team-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--cai-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cai-orange);
  text-decoration: none;
  transition: color 0.2s, gap 0.25s;
}
.chiefai-about .about-team-link:hover {
  color: var(--cai-orange-dark);
  gap: 10px;
}

/* ============================================================
   AI READINESS CTA — dark navy with radial orange glow
   (same pattern as /services/ aaas-final-cta)
   ============================================================ */
.chiefai-about .about-readiness {
  position: relative;
  overflow: hidden;
}
.chiefai-about .about-readiness::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(245,130,32,0.12), transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(15,42,71,0.8), transparent 60%);
  pointer-events: none;
  z-index: 1;
}
.chiefai-about .about-readiness > * {
  position: relative;
  z-index: 2;
}
.chiefai-about .about-readiness-body {
  font-family: var(--cai-body);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.6;
  color: rgba(250,250,250,0.88);
  max-width: 60ch;
  margin: 24px 0 36px !important;
}
.chiefai-about .about-readiness-actions .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.chiefai-about .about-readiness-actions .wp-block-button {
  margin: 0;
}

/* ============================================================
   FAQS — reuse .aaas-faq details/summary, lede tweak
   ============================================================ */
.chiefai-about .about-faqs-lede {
  font-family: var(--cai-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--cai-slate);
  margin: 14px 0 0 !important;
  max-width: 60ch;
}
.chiefai-about .about-faqs .aaas-faq-list {
  margin-top: 40px;
}
.chiefai-about .about-faqs-more {
  margin-top: 32px !important;
}
.chiefai-about .about-faqs-more a {
  font-family: var(--cai-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cai-orange);
  text-decoration: none;
}

/* ============================================================
   JASON BIO PAGE (/about/jason-alexander/, page 3057)
   Reuses .chiefai-about scope; hero is bio-on-left + photo-on-right.
   ============================================================ */
.chiefai-about .jason-hero h1.aaas-display {
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.98;
  margin: 18px 0 28px;
  max-width: 18ch;
}
.chiefai-about .jason-hero h1.aaas-display em {
  font-style: normal;
  font-weight: 300;
  color: var(--cai-orange);
}
.chiefai-about .jason-bio-para {
  font-family: var(--cai-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--cai-charcoal);
  margin: 0 0 18px !important;
  max-width: 60ch;
}
.chiefai-about .jason-hero-actions .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}
.chiefai-about .jason-hero-photo {
  margin: 0 !important;
}
.chiefai-about .jason-hero-photo img {
  display: block;
  width: 100% !important;
  max-width: 480px !important;
  height: auto !important;
  border-radius: 16px;
  box-shadow: 0 40px 80px -30px rgba(15,42,71,0.25);
  margin: 0 auto !important;
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 800px) {
  .chiefai-about .about-team-photo img {
    max-width: 240px !important;
    height: 320px !important;
  }
  .chiefai-about .about-why-pill {
    padding: 22px 24px;
  }
  .chiefai-about .about-why-stack > .wp-block-group__inner-container {
    gap: 40px;
  }
}

/* "What we don't do" filter callout — Enns-style anti-positioning strip
   between §03 (Three reasons) and §04 (founder bios). Added 2026-05-04
   per /about/ rescore item 8. */
.chiefai-about .about-filter {
  background: var(--cai-cream-warm);
  padding: 64px 0;
  border-top: 1px solid var(--cai-rule);
  border-bottom: 1px solid var(--cai-rule);
}
.chiefai-about .about-filter-eyebrow {
  font-family: var(--cai-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cai-orange);
  text-align: center;
  margin: 0 auto 18px;
}
.chiefai-about .about-filter-body {
  font-family: var(--cai-heading);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--cai-navy);
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 600px) {
  .chiefai-about .about-filter { padding: 44px 0; }
  .chiefai-about .about-filter-body { font-size: 18px; }
}