/* =============================================================================
   About — Dental Acquisitions
   -----------------------------------------------------------------------------
   Only what is specific to this page. The shared vocabulary (.da-sec, .da-h1/2/3,
   .da-body, .da-rows, .da-btn, .da-rule) lives in marketing/da_system.css.

   Rebuilt 2026-09-04 from the pre-rebrand page, which used .about-hero /
   .mission / .values / .value-card / .team / .person / .backers / .timeline /
   .tl-row / .final-cta. None of that survives here.

   Scoped without a page-root class: marketing_page_stylesheet_tag loads
   marketing/pages/<action>.css, so this file is only ever on the about page and
   a bare .ab-* selector is page-local by construction.

   Reads var(--da-*) / var(--da-sec-*) only. Colour literals belong in
   colors_and_type.css. See docs/marketing-design-system.md.
   ============================================================================= */

/* ═══ MISSION: COPY BESIDE THE FOUNDER QUOTE ═══════════════════════════════
   The copy is the wider track. The quote is a pull-out, and at parity it reads
   as a second argument rather than as support for the first. */
.ab-split {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--sp-12);
  align-items: start;
  margin-top: var(--sp-12);
}
.ab-split__text { min-width: 0; }
.ab-split__text .da-body + .da-body { margin-top: var(--sp-4); }

/* ═══ THE FOUNDER QUOTE ════════════════════════════════════════════════════
   A tint of the band's own ink with a hairline on all four sides and an even
   radius. NOT a quote with an accent bar down its left edge, which is banned
   here (CLAUDE.md) and is the reflex for a pull-quote. The tint already marks
   it out as a distinct region. */
.ab-quote {
  min-width: 0;
  margin: 0;
  padding: var(--sp-8);
  border: var(--border-hairline) solid var(--da-sec-hairline);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--da-sec-ink) 6%, transparent);
}
.ab-quote__eyebrow {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-brand);
  font-size: var(--da-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tk-eyebrow);
  text-transform: uppercase;
  color: var(--da-sec-accent);
}
/* No decorative quote marks. The <blockquote> and the attribution already say
   what this is, and a 64px glyph in the corner is the other reflex. */
.ab-quote__text {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--e-body);
  line-height: 1.6;
  color: var(--da-sec-ink);
}
.ab-quote__who {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: var(--border-hairline) solid var(--da-sec-hairline);
}
.ab-quote__id { min-width: 0; display: flex; flex-direction: column; }
.ab-quote__name {
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--da-sec-ink);
}
.ab-quote__title {
  margin-top: 2px;
  font-family: var(--font-brand);
  font-size: var(--e-micro);
  line-height: 1.45;
  color: var(--da-sec-muted);
}

/* ═══ INITIALS AVATAR ══════════════════════════════════════════════════════
   Shared by the founder quote and the team grid, so the two read as the same
   kind of object. A tinted circle, initials in the accent: there are no
   photographs for these people, and a grey silhouette placeholder says
   "missing image" where initials say "a person". */
.ab-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--da-sec-accent) 18%, transparent);
  font-family: var(--font-brand);
  font-size: var(--e-meta);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  color: var(--da-sec-accent);
}

/* ═══ THE TEAM ═════════════════════════════════════════════════════════════
   Four across. Eight people in a 4x2 grid keeps every card's name on one line;
   at three across the tracks are wide enough that the cards look empty. */
.ab-team {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-8) var(--sp-6);
  margin: var(--sp-12) 0 0;
  padding: 0;
}
.ab-person { min-width: 0; }
.ab-person__name {
  margin: var(--sp-4) 0 0;
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--da-sec-ink);
}
.ab-person__title {
  margin: 4px 0 0;
  font-family: var(--font-brand);
  font-size: var(--e-meta);
  font-weight: var(--fw-medium);
  color: var(--da-sec-accent);
}
.ab-person__prev {
  margin: var(--sp-3) 0 0;
  padding-top: var(--sp-3);
  border-top: var(--border-hairline) solid var(--da-sec-hairline);
  font-family: var(--font-brand);
  font-size: var(--e-micro);
  line-height: 1.5;
  color: var(--da-sec-muted);
}

/* ═══ TIMELINE ═════════════════════════════════════════════════════════════
   Year in the gutter, event beside it, one hairline per row. Deliberately not a
   vertical rule with dots: a four-entry history does not need a rail, and the
   rail is what makes a timeline component start needing connector geometry. */
.ab-timeline {
  list-style: none;
  margin: var(--sp-12) 0 0;
  padding: 0;
}
.ab-tl {
  display: grid;
  grid-template-columns: 6em minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
  padding: var(--sp-6) 0;
  border-top: var(--border-hairline) solid var(--da-sec-hairline);
}
.ab-tl:last-child { border-bottom: var(--border-hairline) solid var(--da-sec-hairline); }
.ab-tl__year {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--e-card-title);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--da-sec-accent);
}
.ab-tl__body { min-width: 0; }
.ab-tl__title {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--e-card-title-sm);
  font-weight: var(--fw-bold);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--da-sec-ink);
}
.ab-tl__text {
  margin: var(--sp-2) 0 0;
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  line-height: 1.6;
  color: var(--da-sec-body);
}

/* ═══ BACKERS ══════════════════════════════════════════════════════════════
   The same treatment as the home page's trust strip, because it is the same
   job: a caption of names, not a section. */
.ab-backers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5) var(--sp-8);
}
.ab-backers__label {
  margin: 0;
  font-family: var(--font-brand);
  font-size: var(--da-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tk-eyebrow);
  text-transform: uppercase;
  color: var(--da-sec-accent);
}
.ab-backers__names {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5) var(--sp-8);
}
.ab-backers__names li {
  font-family: var(--font-brand);
  font-size: var(--e-body-sm);
  font-weight: var(--fw-medium);
  color: var(--da-sec-muted);
}

/* ═══ CLOSING ══════════════════════════════════════════════════════════════ */
.ab-cta .da-body { margin-top: var(--sp-5); }
.ab-cta__tagline {
  margin: var(--sp-10) 0 0;
  padding-top: var(--sp-8);
  border-top: var(--border-hairline) solid var(--da-sec-hairline);
  font-family: var(--font-brand);
  font-size: var(--e-card-title-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  color: var(--da-sec-accent);
}

/* ═══ RESPONSIVE ═══════════════════════════════════════════════════════════
   Matches the shared breakpoints in da_system.css (1099 / 899 / 639) rather
   than inventing new ones, so a band and its contents change together. */
@media (max-width: 1099px) {
  .ab-split { gap: var(--sp-8); }
  .ab-quote { padding: var(--sp-6); }
  .ab-team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
  /* Copy first, quote under it. A pull-quote above the argument it supports is
     just a quote. */
  .ab-split { grid-template-columns: minmax(0, 1fr); gap: var(--sp-10); }
  .ab-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .ab-team { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  /* The year stops being a gutter and becomes a line above the event: at 375px
     a 6em column leaves the title about 200px and every one wraps to four
     lines. */
  .ab-tl { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .ab-backers { gap: var(--sp-4); }
  .ab-cta__tagline { padding-top: var(--sp-6); margin-top: var(--sp-8); }
}