/* ════════════════════════════════════════════════════════════════════
   VEXLOTEX — ABOUT (about.html)
   Light theme · dark moment: closing CTA only
   Requires css/shared.css
   ════════════════════════════════════════════════════════════════════ */

.about-hero {
  padding: var(--hero-pad-top-lg) 0 var(--sp-8);
}
.about-hero .t-h1 { margin: var(--sp-2) 0 var(--sp-3); max-width: 20ch; }
.about-hero .fc-a { left: -4px; bottom: 12%; }
.about-hero .fc-b { right: -6px; top: 6%; }
@media (max-width: 960px) {
  .about-hero .fc-a { left: 0; bottom: 18%; }
  .about-hero .fc-b { right: 0; top: 3%; }
}
@media (max-width: 600px) {
  .about-hero .fc-b { top: -34%; }
}
.story-copy { display: grid; gap: var(--sp-2); max-width: 68ch; }
.story-copy p { color: var(--muted); }
.story-paths { margin-top: var(--sp-6); }

.story-team-photo { margin: var(--sp-6) 0 0; }
/* Section 003 reuses the story photo treatment, but sits between the
   section-head and the 3-up grid, so the margin runs the other way. */
/* --sp-6, not --sp-5: the spacing scale is 1/2/3/4/6/8/12/16 and has no 5th
   step, so var(--sp-5) is invalid and silently drops the whole declaration. */
.why-photo { margin: 0 0 var(--sp-6); }
.story-team-photo img,
.why-photo img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-rest);
}

.story-num {
  font-family: var(--font-mono); font-size: var(--fs-tiny);
  color: var(--ember-ink); letter-spacing: 0.12em;
}
.story-card, .why-card { display: grid; gap: var(--sp-1); align-content: start; }
.story-card h3, .why-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.story-card p, .why-card p { color: var(--muted); font-size: var(--fs-small); }

.value-item {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
  display: grid; gap: 6px;
}
.value-item:first-child { border-top: 1px solid var(--border); }
.value-item h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.value-item p { color: var(--muted); font-size: var(--fs-small); max-width: 68ch; }

/* ════ v3 — premium light layer ════ */
.values-grid .value-item { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.story-rail { position: relative; padding-left: var(--sp-3); border-left: 1.5px solid var(--ember-30); }