/* ==========================================================================
   about.css — About page styles
   --------------------------------------------------------------------------
   Milestone 10 · About Page

   Page-scoped styles only. Every section composes existing components
   (editorial split, cards, buttons, section/layout primitives, header,
   footer) — no component styling lives here. These rules style page content
   that has no reusable component yet: the story portrait frame, pull-quote
   and signature block, the mission/vision/values type panels, the vertical
   timeline and the industries directory (Phase 2 §5.4 / §5.5).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Story — 4:5 portrait frame with caption (Phase 2 §5.4.1). Ratio on the img
   so the figure box can also carry the figcaption.
   -------------------------------------------------------------------------- */
.about-story__media {
  margin: 0;
}

.about-story__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.about-story__caption {
  margin: var(--space-8) 0 0;
  color: var(--color-body);
  font-size: var(--text-caption-current);
  line-height: var(--lh-caption);
}

/* Story — mono stats under the portrait (founding year, projects delivered).
   Figures confirmed by the client (Phase R8.75). */
.about-story__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
  margin: 0;
  padding: var(--space-16) 0 0;
  border-top: 1px solid var(--color-border);
  list-style: none;
}

.about-story__stat-number {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-stat-current);
  font-weight: var(--weight-regular);
  line-height: var(--lh-h1);
  color: var(--color-primary);
}

.about-story__stat-label {
  margin: var(--space-4) 0 0;
  color: var(--color-body);
  font-size: var(--text-small-current);
  line-height: var(--lh-small);
}

/* Story — founder pull-quote (surface fill, brand-yellow left rule) */
.about-story__quote {
  margin: 0;
  padding: var(--space-16) var(--space-24);
  background: var(--color-surface);
  border-left: 4px solid var(--color-brand-yellow);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.about-story__quote p {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-body-large-current);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-body-large);
  letter-spacing: var(--tracking-body-large);
  color: var(--color-heading);
}

/* Story — signature block (name, role) */
.about-story__signature {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
}

.about-story__signature-name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-body-current);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-body);
  color: var(--color-heading);
}

.about-story__signature-role {
  margin: 0;
  color: var(--color-body);
  font-size: var(--text-small-current);
  line-height: var(--lh-small);
}

/* --------------------------------------------------------------------------
   Mission · Vision · Values — three flat type panels, not cards (Phase 2
   §5.4.2): no border, no shadow. 01 surface, 02 background, 03 background
   with a brand-yellow top rule. Numbers in mono like an engineering document.
   -------------------------------------------------------------------------- */
.about-mvv {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
}

@media (min-width: 768px) {
  .about-mvv {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-24);
  }
}

.about-mvv__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-24);
}

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

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

.about-mvv__panel--accent {
  background: var(--color-background);
  border-top: 4px solid var(--color-brand-yellow);
}

.about-mvv__number {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-small-current);
  line-height: var(--lh-small);
  color: var(--color-primary);
}

.about-mvv__title {
  margin: 0;
  color: var(--color-secondary);
}

.about-mvv__body {
  margin: 0;
  color: var(--color-body);
  font-size: var(--text-body-current);
  line-height: var(--lh-body);
}

.about-mvv__values {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-mvv__value {
  color: var(--color-heading);
  font-size: var(--text-small-current);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-small);
}

/* --------------------------------------------------------------------------
   Timeline — vertical milestones (Phase 2 §5.4.3): mono years, primary ring
   nodes on a left rule, text right of the line. No alternating direction.
   -------------------------------------------------------------------------- */
.about-timeline {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-timeline::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 7px;
  width: 1px;
  background: var(--color-border);
}

.about-timeline__item {
  position: relative;
  padding: 0 0 var(--space-24) var(--space-32);
}

.about-timeline__item:last-child {
  padding-bottom: 0;
}

.about-timeline__node {
  position: absolute;
  top: 4px;
  left: 0;
  width: 15px;
  height: 15px;
  background: var(--color-background);
  border: 2px solid var(--color-primary);
  border-radius: 50%;
}

.about-timeline__year {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  line-height: var(--lh-small);
  color: var(--color-primary);
}

.about-timeline__text {
  margin: var(--space-4) 0 0;
  color: var(--color-body);
  font-size: var(--text-body-current);
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   Industries — two-column directory list (Phase 2 §5.4.6): verified industry
   names with row dividers; formal and complete, not promotional.
   -------------------------------------------------------------------------- */
.about-industries {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space-24);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .about-industries {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-40);
  }
}

.about-industries__item {
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-heading);
  font-size: var(--text-body-current);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-body);
}

/* --------------------------------------------------------------------------
   Visual Polish Pass 2 — intro section background texture (engineers
   discussing network installation motif). Supplies the image for the shared
   `.section-bg` layer defined in pages.css.
   -------------------------------------------------------------------------- */
.page-intro--about {
  --section-bg-image: url("../images/backgrounds/bg-engineering-team.webp");
}