/* ---------- About ---------- */
.about {
  padding-block: var(--section-pad-block);
  background: var(--ink-deep);
  color: var(--bg);
  text-align: center;
}
.about .eyebrow {
  display: inline-flex;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--small);
  color: color-mix(in srgb, var(--bg) 70%, transparent);
  margin-bottom: 0.75rem;
  margin-inline: auto;
}

/* Variant: split (active) - reuses the shared .commitment-inner/.commitment-center/
   .commitment-quote/.commitment-text pattern from global.css (see about.html), not a
   bespoke grid - an earlier .about-grid/.about-copy/.mission-quote implementation from
   before that reuse was dead CSS here (no longer referenced in about.html) and has
   been removed. */

/* Variant: pillars (inactive, `hidden` in markup) — centered eyebrow + headline, 4-col
   divided icon grid. Client reference: Lefio-style about section. */
.about-pillars-inner { text-align: center; }
.about-pillars-inner .eyebrow { text-align: center; }
.about-headline {
  font-size: var(--h2);
  letter-spacing: -0.005em;
  max-width: 20ch;
  margin-inline: auto;
  margin-bottom: var(--section-header-gap);
}
.about-headline .accent { color: var(--terracotta); }
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: left;
}
.pillar {
  padding: 0 clamp(1.25rem, 3vw, 2rem);
  border-left: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.pillar:first-child { border-left: none; padding-left: 0; }
.pillar-icon { display: block; font-size: 1.75rem; color: var(--terracotta); margin-bottom: 1.25rem; }
.pillar h3 { font-size: 1.05rem; margin-bottom: 0.4em; }
.pillar p { font-size: var(--small); color: var(--muted); max-width: 28ch; }
.pillar-link { display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--small); font-weight: 600; color: var(--ink); margin-top: 0.5rem; }
.pillar-link i { font-size: 0.9em; }
.pillar-link:hover { color: var(--terracotta); }

/* Staged reveal: quote first, then the paragraph beneath it - same fade-up
   technique and rhythm as Commitment/Services (see script.js's initScrollReveal),
   applied here since About reuses the shared .commitment-quote/.commitment-text
   classes from global.css but needed its own reveal rules (JS scopes by #about,
   not by class, so this doesn't leak into Commitment's own reveal). */
.about [data-reveal] {
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.about .is-pre-reveal { opacity: 0; transform: translateY(16px); }
.about .is-pre-reveal.is-visible { opacity: 1; transform: translateY(0); }
.about [data-reveal="text"] { transition-delay: 0.1s; }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .pillar-grid { grid-template-columns: 1fr 1fr; row-gap: 2rem; }
  .pillar:nth-child(3) { border-left: none; padding-left: 0; }
}

@media (max-width: 560px) {
  .pillar-grid { grid-template-columns: 1fr; row-gap: 2rem; }
  .pillar { border-left: none; padding-left: 0; }
}