/* ============================================================
   About - page-specific layout.
   Section-by-section translation of the approved Claude Design
   prototype (project/About.dc.html), reusing css/components.css and
   the shared shell rules in css/page.css / css/vault.css (.hero,
   .hero--sub, .section, .section-header--left, .split, .rule-list,
   .cta, .cta--tight) wherever the visual is identical to an existing
   page. Only what's new to this page lives here.

   The DC source exposes storyLayout ('Editorial' | 'Statement lead' |
   'Slate panel', defaults to 'Statement lead') and statsLayout
   ('Slate band' | 'Oversized figures' | 'Ruled rows', defaults to
   'Oversized figures') as design-tool controls. Implements those
   defaults as real markup - no chat transcript came with this export
   to say otherwise, same approach as How It Works' stepsLayout. */

/* ---- Story: statement-lead headline + ruled mission/vision rows ----- */
.story-headline {
  margin: 0;
  max-width: 900px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 52px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  text-wrap: pretty;
}
.story-cols { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; }
.story-cols p { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--text-primary); text-wrap: pretty; }

.fact-rows { display: flex; flex-direction: column; width: 100%; }
.fact-row { display: grid; grid-template-columns: 200px 1fr; gap: 32px; padding: 28px 0; border-top: var(--border-width) solid var(--border-default); }
.fact-row:last-child { border-bottom: var(--border-width) solid var(--border-default); }
.fact-row__label {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-pickled-bluewood);
}
.fact-row__value { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: 26px; line-height: 1.35; letter-spacing: -0.01em; color: var(--text-primary); text-wrap: pretty; }

/* ---- Stats: oversized figures ----------------------------------------
   Each number is wrapped with its own description in a .stats-figures__pair
   rather than sitting as two separate flat runs of four (all the numbers,
   then all the descriptions) laid out across a 4-column grid and relying
   on row/column auto-placement to keep number N above description N. That
   only actually held together at the desktop 4-column width - drop to 2
   columns or 1 on tablet/mobile and auto-placement fills left-to-right,
   top-to-bottom regardless of which stat a number belongs to, so numbers
   and descriptions no longer lined up. Wrapping each pair keeps them
   glued together as a single grid item at every column count. */
.stats-figures { width: 100%; max-width: var(--container-lg); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 40px; }
.stats-figures__pair { display: flex; flex-direction: column; gap: 8px; }
.stats-figures__num {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(64px, 7vw, 110px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: var(--color-pickled-bluewood);
}
.stats-figures__item { display: flex; flex-direction: column; gap: 6px; padding-top: 20px; border-top: var(--border-width) solid var(--border-default); }
.stats-figures__item span:first-child { font-family: var(--font-ui); font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--text-primary); }
.stats-figures__item span:last-child { font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--text-secondary); text-wrap: pretty; }

/* ---- Team panel -------------------------------------------------------- */
.team-panel {
  width: 100%;
  max-width: var(--container-lg);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: stretch;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card-bg);
}
/* This section is .section--white. --card-bg would drop to the F9F9F9
   block tone automatically here, but the approved design wants the
   panel genuinely white against the white section, distinguished by
   the border alone rather than a tone difference - so this opts out of
   --card-bg (same idea as .process-card on how-it-works.html, just a
   border here instead of a shadow, since the design calls for one).
   The border itself is the one exception to "surfaces, not borders" on
   the site (see page.css), kept scoped to this section rather than
   added to .team-panel unconditionally. */
.section--white .team-panel {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
}
.team-panel__photo { min-width: 0; width: 100%; height: 100%; min-height: 520px; }
.team-panel__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.team-panel__body { min-width: 0; display: flex; flex-direction: column; gap: 24px; padding: 56px 56px 56px 0; justify-content: center; }
.team-panel__role {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-pickled-bluewood);
}
.team-panel__body h3 { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: 40px; line-height: 1.2; letter-spacing: -0.01em; color: var(--text-primary); }
.team-panel__body > p { margin: 0; max-width: 540px; font-family: var(--font-body); font-size: 18px; line-height: 1.55; color: var(--text-primary); text-wrap: pretty; }

.team-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 32px; max-width: 540px; padding-top: 8px; }
.team-facts__item { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: var(--border-width) solid var(--border-default); }
.team-facts__item span:first-child { font-family: var(--font-ui); font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--text-primary); }
.team-facts__item span:last-child { font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--text-secondary); text-wrap: pretty; }

/* ---- Bio modal ----------------------------------------------------------
   Ports the DC's React modal (fixed overlay, click-outside/Escape/close
   button all close it) to plain markup + JS (initBioModal in main.js). */
.bio-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px;
  overflow-y: auto;
  background: rgba(12, 8, 1, 0.55);
  backdrop-filter: blur(2px);
}
.bio-modal[hidden] { display: none; }
.bio-modal__dialog {
  width: 100%;
  max-width: 760px;
  margin: auto;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: 0 32px 80px rgba(12, 8, 1, 0.35);
  overflow: hidden;
}
.bio-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 32px 40px 24px;
  background: var(--surface-block);
}
.bio-modal__header h3 { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: 32px; line-height: 1.25; letter-spacing: -0.01em; color: var(--text-primary); }
.bio-modal__header span { font-family: var(--font-ui); font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--color-pickled-bluewood); }
.bio-modal__close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  cursor: pointer;
  border: 0;
  background: var(--opacity-neutral-darkest-5);
  color: var(--text-primary);
}
.bio-modal__body { padding: 32px 40px 40px; display: flex; flex-direction: column; gap: 20px; }
.bio-modal__body p { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--text-primary); text-wrap: pretty; }
.bio-modal__facts { display: flex; flex-direction: column; gap: 20px; margin-top: 12px; padding-top: 28px; border-top: var(--border-width) solid var(--border-default); }
.bio-modal__fact { display: flex; flex-direction: column; gap: 6px; }
.bio-modal__fact span:first-child { font-family: var(--font-heading); font-weight: 400; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; color: var(--color-pickled-bluewood); }
.bio-modal__fact span:last-child { font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--text-primary); text-wrap: pretty; }

/* ---- Client logos -------------------------------------------------------- */
.client-logos { width: 100%; max-width: 1080px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 48px; align-items: center; }
.client-logos img { display: block; width: 100%; height: 40px; object-fit: contain; }
/* Header-to-content spacing convention (see page.css) - .section's own
   gap (80px) is too much between the intro text and the content right
   below it, same 32px target as everywhere else on the site. -48px here
   since the base being pulled from is 80px (the ≤960px override below
   uses -32px against that tier's smaller 64px base - same 32px result
   either way). */
.team-panel,
.client-logos {
  margin-top: -48px;
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 960px) {
  /* The story intro's outer wrapper has its own inline gap:56px (see the
     known gotcha in CLAUDE.md - inline gap beats any class-based
     override at every width), too much between the headline and the
     two-column copy below it once the page narrows. Pulled up with a
     negative margin instead, down toward the site's usual ~32px. */
  .story-cols { grid-template-columns: 1fr; gap: 24px; margin-top: -24px; }
  .fact-row { grid-template-columns: 1fr; gap: 8px; }
  .stats-figures { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  /* .team-panel's 56px gap is the desktop column-gap between the photo
     and body sitting side by side - stacked into a single column here,
     that same value becomes an unwanted row-gap on top of
     .team-panel__body's own 40px top padding, doubling up the space
     between the photo and the text below it. Zeroed out so the body's
     padding is the only thing setting that gap. */
  .team-panel { grid-template-columns: 1fr; gap: 0; }
  .team-panel__photo { min-height: 320px; }
  .team-panel__body { padding: 40px; }
  .client-logos { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  /* Tablet+mobile spacing convention (see page.css's own ≤960px block):
     .section's gap is 64px here (no inline override on either section),
     too much between the intro text and the content right below it,
     same as Home's card-grid sections. */
  .team-panel,
  .client-logos {
    margin-top: -32px;
  }
}
@media (max-width: 640px) {
  .story-headline { font-size: 36px; }
  .stats-figures { grid-template-columns: 1fr; }
  .team-facts { grid-template-columns: 1fr; }
  .client-logos { grid-template-columns: repeat(2, 1fr); }
  /* Same odd-card orphan fix as .vault-grid in page.css - 5 logos at
     2 columns strands the last one alone in its own row.
     :not(:first-child) excludes a single-logo grid, which should sit at
     its normal width rather than stretch (not currently possible here,
     kept for consistency with the shared pattern). */
  .client-logos > :last-child:nth-child(odd):not(:first-child) { grid-column: 1 / -1; }
  .bio-modal { padding: 20px; }
  .bio-modal__header, .bio-modal__body { padding-left: 24px; padding-right: 24px; }
}