/* =========================
   ABOUT (carbon) — three two-column rows in the Core Services language, the
   drawing on alternating sides: the four sectors left (held while the story
   scrolls past) and the story right — heading, the "20" with its statement,
   the narrative; then vision | its drawing; then its drawing | mission.
   The drawings are SVG models (.model, styles/services.css) that assemble.
   Every block builds as it comes into view (js/build.js toggles .is-built):
   text slides in towards its partner while its rules draw out from that side,
   the models assemble, the headings are uncovered by their accent mark, and
   the "20" counts up from 0 (js/build.js, [data-count]).
   VALUES (carbon-2) — a numbered register of seven lines, its drawing beside
   it (seven bolts torqued in star order, one per value), held in view while
   the list scrolls past
========================= */

.about {
  padding-block: var(--section);
  overflow-x: clip; /* blocks waiting to build sit 2.5rem towards the edge */
  background: var(--carbon);
  color: var(--ink-inverse);
}

.about__row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
  padding-inline: var(--margin);
}

.about__row + .about__row {
  margin-top: clamp(5rem, 2rem + 7vw, 10rem);
}

/* ---------- Row 1: picture | story ---------- */
.about__row--intro {
  align-items: start;
}

.about__story {
  --dir: 1;
  --line-from: left;
  grid-column: 8 / -1;
  grid-row: 1;
  padding-left: clamp(0rem, -1rem + 2.5vw, 2.5rem);
}

.about__figure {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
  grid-column: 1 / 8;
  grid-row: 1;
}

.about__paras {
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

.about__paras::after {
  content: "";
}

.about__paras p {
  position: relative;
  max-width: 34em;
  padding-block: 1em;
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.375rem);
  line-height: 1.4;
}

/* The "20" under the heading, its statement beneath. Same treatment as the
   hero's "20+": light weight, white; tabular figures so it holds still as it counts */
.about-stat {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 0.75rem + 0.75vw, 1.5rem);
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.about-stat__num {
  font-size: clamp(6rem, 3rem + 7vw, 11rem);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: var(--ink-inverse);
}

.about-stat__text {
  max-width: 26ch;
  font-size: var(--step-lead);
  font-weight: 600;
  line-height: 1.25;
}

/* ---------- Rows 2 and 3: vision | drawing, drawing | mission ---------- */
.charter__item {
  --dir: -1;
  --line-from: right;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  grid-column: 1 / 6;
  grid-row: 1;
  padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

.charter__figure {
  grid-column: 6 / -1;
  grid-row: 1;
  padding-left: clamp(0rem, -1rem + 2.5vw, 2.5rem);
}

.charter-row--mission .charter__item {
  --dir: 1;
  --line-from: left;
  grid-column: 8 / -1;
  padding-left: clamp(0rem, -1rem + 2.5vw, 2.5rem);
}

.charter-row--mission .charter__figure {
  grid-column: 1 / 8;
  padding-left: 0;
}

.charter__body {
  max-width: 30ch;
  font-size: var(--step-lead);
  line-height: 1.3;
}

/* ---------- Rules: pseudo-elements, so they can draw out as a block builds ---------- */
.about__paras p::before,
.about__paras::after,
.charter__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rule-dark);
  transform-origin: var(--line-from);
}

.about__paras::after {
  position: relative;
  top: auto;
  display: block;
}

/* ---------- Values register ---------- */
.values {
  --ground: var(--carbon-2);
  padding-block: var(--section);
  overflow-x: clip; /* lines waiting to build sit 2.5rem towards the edge */
  background: var(--carbon-2);
  color: var(--ink-inverse);
}

.values__inner {
  align-items: start;
}

.values__text {
  grid-column: 1 / 7;
}

.values__figure {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
  grid-column: 8 / -1;
}

.values__list {
  --dir: -1; /* the lines slide in towards the drawing */
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  counter-reset: value;
  border-bottom: 1px solid var(--rule-dark);
}

.values__list li {
  counter-increment: value;
  display: grid;
  grid-template-columns: clamp(4rem, 2.5rem + 4vw, 7rem) 1fr;
  align-items: baseline;
  padding-block: clamp(0.875rem, 0.6rem + 0.8vw, 1.375rem);
  border-top: 1px solid var(--rule-dark);
  font-size: var(--step-lead);
  line-height: 1.25;
}

.values__list li:nth-child(2) { --delay: 0.07s; }
.values__list li:nth-child(3) { --delay: 0.14s; }
.values__list li:nth-child(4) { --delay: 0.21s; }
.values__list li:nth-child(5) { --delay: 0.28s; }
.values__list li:nth-child(6) { --delay: 0.35s; }
.values__list li:nth-child(7) { --delay: 0.42s; }

.values__list li::before {
  content: counter(value, decimal-leading-zero);
  font-size: var(--step-head);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink-inverse-soft);
}

/* ---------- Build on view ----------
   The heading's accent mark is uncovered by the shared .section-title rule. */
.about-stat__text { --delay: 0.5s; }
.about__paras p:nth-child(1) { --delay: 0s; }
.about__paras p:nth-child(2) { --delay: 0.1s; }
.about__paras p:nth-child(3) { --delay: 0.2s; }
.about__paras::after { --delay: 0.3s; }
.charter__body { --delay: 0.3s; }

@media (prefers-reduced-motion: no-preference) {
  .motion .about :is(.about__paras p, .about-stat__text, .charter__body) {
    opacity: 0;
    transform: translate3d(calc(var(--dir) * 2.5rem), 0, 0);
  }

  .motion .about .about__paras p::before,
  .motion .about .about__paras::after,
  .motion .about .charter__item::before {
    transform: scaleX(0);
  }

  .motion .about .is-built :is(.about__paras p, .about-stat__text, .charter__body) {
    opacity: 1;
    transform: none;
    transition:
      opacity 0.7s var(--ease) calc(var(--delay) + var(--stagger, 0s)),
      transform 1s var(--ease) calc(var(--delay) + var(--stagger, 0s));
  }

  .motion .about .about__paras.is-built p::before,
  .motion .about .about__paras.is-built::after,
  .motion .about .charter__item.is-built::before {
    transform: none;
    transition: transform 1.1s var(--ease) calc(var(--delay, 0s) + var(--stagger, 0s) + 0.1s);
  }
}

/* ---------- Narrow screens: stacked; text first, then its figure ---------- */
@media (max-width: 960px) {
  .about__story,
  .about__figure,
  .charter__item,
  .charter__figure,
  .charter-row--mission :is(.charter__item, .charter__figure) {
    --dir: 1;
    --line-from: left;
    grid-column: 1 / -1;
    grid-row: auto;
    padding-inline: 0;
  }

  .about__figure {
    position: relative;
    top: auto;
  }

  .about__figure,
  .charter__figure {
    margin-top: clamp(2rem, 1rem + 3vw, 3rem);
  }
}

@media (max-width: 900px) {
  .values__text,
  .values__figure {
    grid-column: 1 / -1;
  }

  .values__list {
    --dir: 1;
  }

  .values__figure {
    position: relative;
    top: auto;
    margin-top: clamp(2.5rem, 1.5rem + 3vw, 3.5rem);
  }
}