/* Page-scoped styles extracted from es/about.html. */

/* =====================================================================
   /about.html page-scoped styles (sanctioned per-page pattern).
   Copy source: Marketing/Website/Contracts_Wireframes/page-contracts/06-about.md (FROZEN).
   Tokens from site-tokens.css; shared components from site.css.
   Class prefix ab-. Zero em-dashes / en-dashes / smart quotes anywhere.
   ===================================================================== */

/* ---------- Page header (above s1) ---------- */
.ab-hero { padding-block: var(--s-9) var(--s-7); }
.ab-context { display: block; margin-bottom: var(--s-4); }
.ab-hero h1 { max-width: 16ch; margin-bottom: var(--s-4); }
.ab-intro { max-width: 56ch; margin-bottom: var(--s-6); }

/* ---------- Shared page primitives ---------- */
.ab-prose { max-width: var(--measure-prose); }
.ab-prose > p + p { margin-top: var(--s-4); }
.ab-link { font-weight: var(--weight-semibold); }
.ab-linkrow { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-top: var(--s-6); }

/* ---------- Section 1: The Mission (typography-led; graphic none) ---------- */
.ab-mission {
  font-weight: var(--weight-semibold);
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  max-width: 26ch;
  text-wrap: balance;
  margin: 0 0 var(--s-8);
}
.ab-sub { margin-top: var(--s-7); }
.ab-sub h3 { margin-bottom: var(--s-2); }
.ab-sub-lead { max-width: var(--measure-prose); margin-bottom: var(--s-5); }

/* Launch-directive composition (2026-07-07): beliefs read as a continuous
   argument (full-width accent rows), never a 2x2 tile grid. */
.ab-beliefs { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.ab-belief {
  background: var(--bg);
  border: 1px solid var(--line-hair);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6);
  box-shadow: var(--shadow-card);
}
.ab-belief p { margin: 0; }

.ab-people { display: grid; gap: var(--s-5); margin-top: var(--s-5); }
.ab-person {
  border-left: 3px solid var(--blue);
  padding: var(--s-1) 0 var(--s-1) var(--s-5);
  max-width: 72ch;
}
.ab-person p { margin: 0; }

/* ---------- Section 2: electricity redesign, two-panel SVG ---------- */
.ab-elec-fig { margin: var(--s-7) 0 var(--s-6); }
.ab-elec-grid { display: grid; gap: var(--s-5); }
@media (min-width: 760px) { .ab-elec-grid { grid-template-columns: 1fr 1fr; } }
.ab-elec-panel {
  margin: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
.ab-elec-panel svg { display: block; width: 100%; height: auto; }
.ab-elec-cap {
  margin: var(--s-4) 0 0;
  font-weight: var(--weight-semibold);
  font-size: var(--fs-16);
  color: var(--ink);
}
.ab-elec-sub { display: block; margin-top: var(--s-1); font-size: var(--fs-13); font-weight: var(--weight-regular); color: var(--ink-soft); }
.ab-elec-shaft { stroke: var(--ink-faint); stroke-width: 4; stroke-linecap: round; }
.ab-elec-belt { stroke: var(--ink-faint); stroke-width: 1.5; stroke-dasharray: 3 4; }
.ab-elec-motor { fill: var(--blue); stroke: var(--blue-deep); stroke-width: 2; }
.ab-elec-motor-sm { fill: var(--blue); }
.ab-elec-machine { fill: var(--bg); stroke: var(--ink-faint); stroke-width: 2; }
.ab-elec-machine-live { fill: var(--blue-soft); stroke: var(--blue); stroke-width: 2; }
.ab-elec-flow { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ab-elec-flat { stroke: var(--ink-faint); stroke-width: 2; stroke-dasharray: 5 5; stroke-linecap: round; }
.ab-elec-txt { font-family: var(--font-sans); font-size: 12px; font-weight: var(--weight-semibold); fill: var(--ink-muted); }

/* ---------- Section 3: what Lucy is (prose) + is-not contrast row ---------- */
.ab-agency {
  font-size: var(--fs-20);
  font-weight: var(--weight-medium);
  color: var(--ink);
  max-width: var(--measure-prose);
  margin: var(--s-5) 0;
}
.ab-not { margin-top: var(--s-7); }
.ab-not-grid { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
@media (min-width: 620px) { .ab-not-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ab-not-grid { grid-template-columns: repeat(4, 1fr); } }
.ab-not-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.ab-not-card::before {
  content: "";
  width: 28px; height: 3px;
  border-radius: 2px;
  background: var(--blue);
  margin-bottom: var(--s-1);
}
.ab-not-card h4 { margin: 0; font-size: var(--fs-18); color: var(--ink); }
.ab-not-card p { margin: 0; font-size: var(--fs-14); }

/* ---------- Section 4: Evolutionary Framework sequence strip ---------- */
.ab-strip-fig { margin: var(--s-6) 0 0; }
.ab-strip {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: 0;
  list-style: none;
  padding: 0;
  counter-reset: abstage;
}
.ab-stage {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
  align-items: flex-start;
}
.ab-stage-n {
  counter-increment: abstage;
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  font-weight: var(--weight-semibold);
  color: var(--blue);
  background: var(--blue-soft);
  border-radius: var(--r-pill);
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ab-stage-n::before { content: counter(abstage); }
.ab-stage-name {
  font-weight: var(--weight-semibold);
  font-size: var(--fs-18);
  color: var(--ink);
  line-height: var(--lh-snug);
}
.ab-strip-arrow {
  align-self: center;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: var(--fs-20);
  transform: rotate(90deg);
  flex-shrink: 0;
}
.ab-strip-cap { margin: var(--s-4) 0 0; font-size: var(--fs-14); color: var(--ink-soft); }
@media (min-width: 900px) {
  .ab-strip { flex-direction: row; align-items: stretch; }
  .ab-strip-arrow { transform: none; }
}

/* ---------- Section 5: stage-honesty label-set legend ---------- */
.ab-labelset {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  margin-top: var(--s-6);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
}
.ab-labelset-lead {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-right: var(--s-2);
}

/* ---------- Section 7: Join us (ink recruiting floor) ---------- */
.ab-join .ab-prose { max-width: 62ch; }
.band--ink .ab-join-lead { color: var(--on-ink); }
.ab-join .btn { text-decoration: none; }
.ab-join .btn-ghost-on-ink { margin-top: var(--s-2); }

/* ---------- FAQ: h3 inside summary inherits the summary type ---------- */
.ab-faq .faq summary h3 { margin: 0; font: inherit; flex: 1; }

/* == ABOUT PAGE CSS END == */