/* 8xQuant — premium About page */

/* ---------- home-matched typography ----------
   Home design roles (index.html): Georgia serif headlines in natural case,
   system-sans paragraphs, system-mono small-caps labels, Doto reserved for
   display figures. Scoped to .about-page so the shared .manrope-heading
   treatment on the other pages is untouched. */
.about-page h1.manrope-heading,
.about-page h2.manrope-heading {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 400;
  letter-spacing: -.01em;
  text-transform: none;
  text-wrap: balance;
}
.about-page .tape-hero h1 { font-size: clamp(44px, 6.4vw, 88px); line-height: .98; }
.about-page .about-section-intro h2,
.about-page .about-process-copy h2,
.about-page .about-closing-panel h2 { font-size: clamp(32px, 4.4vw, 58px); line-height: 1.04; }
.about-page .tape-hero-copy > p,
.about-page .about-section-intro p,
.about-page .about-principle p,
.about-page .about-process-copy > p,
.about-page .about-process-list p,
.about-page .about-closing-panel p {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
}

.about-page {
  --ink: var(--text);
  --quiet: #77746e;
}
.about-page main { padding-bottom: 76px; }
.about-page .btn { border-radius: 7px; }
.about-page .btn.primary { background: var(--ember); }
.about-page .section-index {
  color: var(--ember);
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.about-page h2 span,
.about-page h3 span { color: var(--ember); }

/* ---------- hero ---------- */
.about-page .tape-hero { padding-bottom: 88px; }
.about-page .tape-hero-copy > p { max-width: 620px; }
.about-hero-aside {
  min-width: 240px;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding-bottom: 4px;
}
.about-hero-figure {
  color: var(--ink);
  font-family: var(--dot);
  font-size: clamp(18px, 2.4vw, 31px);
  letter-spacing: 2px;
  line-height: .82;
  text-transform: uppercase;
}
.about-hero-figure span { color: var(--ember); }

/* ---------- shared sections ---------- */
.about-section,
.about-closing { border-top: 1px solid var(--line); }
.about-section { padding: 93px 0 105px; }
.about-section-intro {
  display: grid;
  grid-template-columns: minmax(150px, .55fr) minmax(0, 1.45fr);
  gap: 72px;
  align-items: start;
}
.about-section-intro h2,
.about-process-copy h2,
.about-closing-panel h2 {
  color: var(--ink);
  font-family: var(--dot);
  font-size: clamp(30px, 4.2vw, 58px);
  font-weight: 400;
  letter-spacing: 2.5px;
  line-height: 1.02;
  text-transform: uppercase;
}
.about-section-intro p {
  max-width: 590px;
  margin-top: 28px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.85;
}

/* ---------- standard ---------- */
.about-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 72px;
  border-top: 1px solid var(--line);
}
.about-principle {
  min-height: 206px;
  padding: 32px 32px 32px 0;
}
.about-principle + .about-principle {
  padding-left: 32px;
  border-left: 1px solid var(--line);
}
.about-principle-number {
  color: var(--ember);
  font-family: var(--dot);
  font-size: 30px;
  line-height: .9;
}
.about-principle h3 {
  margin-top: 28px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}
.about-principle p {
  max-width: 290px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.8;
}

/* ---------- team ---------- */
.about-team .about-section-intro p { max-width: 760px; }
.about-team-origins {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 72px;
  border-top: 1px solid var(--line);
}
.about-team-origin {
  min-height: 132px;
  padding: 32px 32px 32px 0;
}
.about-team-origin + .about-team-origin {
  padding-left: 32px;
  border-left: 1px solid var(--line);
}
.about-team-origin span {
  color: var(--quiet);
  font-size: 9px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.about-team-origin strong {
  display: block;
  max-width: 260px;
  margin-top: 28px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1.5;
  text-transform: uppercase;
}
.about-team-foot {
  margin-top: 24px;
  color: var(--quiet);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* ---------- process ---------- */
.about-process-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 22px;
  border-bottom: 1px dashed var(--line);
}
.about-process-tag {
  color: var(--quiet);
  font-size: 9px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.about-process-grid {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(42px, 9vw, 140px);
  align-items: end;
  padding-top: 72px;
}
.about-process-copy > p {
  max-width: 430px;
  margin-top: 28px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.85;
}
.about-process-copy .btn { margin-top: 32px; }
.about-process-list {
  list-style: none;
  border-top: 1px solid var(--line);
}
.about-process-list li {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 18px;
  padding: 28px 0 30px;
  border-bottom: 1px dashed var(--line);
}
.about-process-list li > span {
  color: var(--ember);
  font-family: var(--dot);
  font-size: 30px;
  line-height: .9;
}
.about-process-list h3 {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}
.about-process-list p {
  max-width: 500px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.8;
}

/* ---------- access ---------- */
.about-route-links {
  margin-top: 72px;
  border-top: 1px solid var(--line);
}
.about-route-link {
  display: grid;
  grid-template-columns: minmax(145px, .55fr) minmax(0, 1.2fr) auto;
  gap: 20px;
  align-items: baseline;
  padding: 30px 0 32px;
  border-bottom: 1px dashed var(--line);
  color: inherit;
  text-decoration: none;
}
.about-route-link:hover { background: rgba(255, 255, 255, .02); }
.about-route-link > span {
  color: var(--quiet);
  font-size: 9px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.about-route-link strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.about-route-link em {
  color: var(--ember);
  font-size: 10px;
  font-style: normal;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.about-access-note {
  margin-top: 18px;
  color: var(--quiet);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* ---------- closing ---------- */
.about-closing { padding: 84px 0 9px; }
.about-closing-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto;
  gap: 32px;
  align-items: end;
  padding: 30px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.about-closing-panel h2 { margin-top: 24px; }
.about-closing-panel p {
  max-width: 600px;
  margin-top: 24px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.85;
}
.about-closing-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ---------- scroll reveal (same gate as home: home-reveal.js adds .js-reveal
   + .is-shown; sections stay fully visible without JS, observers, or motion) ---------- */
.js-reveal .reveal { opacity: 0; translate: 0 22px; }
.js-reveal .reveal.is-shown { animation: reveal-in .7s cubic-bezier(.22,.61,.36,1) both; }
.js-reveal .about-principles .about-principle:nth-child(2).is-shown { animation-delay: .1s; }
.js-reveal .about-principles .about-principle:nth-child(3).is-shown { animation-delay: .2s; }
@keyframes reveal-in {
  from { opacity: 0; translate: 0 22px; }
  to { opacity: 1; translate: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .about-section-intro { grid-template-columns: 1fr; gap: 20px; }
  .about-process-grid { grid-template-columns: 1fr; gap: 58px; }
  .about-process-copy > p { max-width: 620px; }
}

@media (max-width: 700px) {
  .about-page main { padding-bottom: 54px; }
  .about-page .tape-hero { padding-bottom: 70px; }
  .about-hero-aside { min-width: 0; }
  .about-hero-figure { font-size: 21px; }
  .about-section { padding: 66px 0 75px; }
  .about-section-intro h2,
  .about-process-copy h2,
  .about-closing-panel h2 { font-size: clamp(32px, 10vw, 48px); }
  .about-principles { grid-template-columns: 1fr; margin-top: 52px; }
  .about-principle { min-height: 0; padding: 22px 0 24px; }
  .about-principle + .about-principle { padding-left: 0; border-top: 1px dashed var(--line); border-left: 0; }
  .about-principle p { max-width: 520px; }
  .about-team-origins { grid-template-columns: 1fr; margin-top: 52px; }
  .about-team-origin { min-height: 0; padding: 22px 0 24px; }
  .about-team-origin + .about-team-origin { padding-left: 0; border-top: 1px dashed var(--line); border-left: 0; }
  .about-team-origin strong { max-width: 520px; margin-top: 14px; }
  .about-process-top { align-items: flex-start; flex-direction: column; gap: 12px; }
  .about-process-grid { padding-top: 52px; }
  .about-route-links { margin-top: 52px; }
  .about-route-link { grid-template-columns: 1fr; gap: 9px; padding: 20px 0 22px; }
  .about-route-link em { margin-top: 5px; }
  .about-closing { padding-top: 51px; }
  .about-closing-panel { grid-template-columns: 1fr; padding: 23px; }
  .about-closing-actions { justify-content: flex-start; margin-top: 28px; }
  .about-closing-actions .btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .about-page .status-dot { box-shadow: none; }
  .js-reveal .reveal { opacity: 1; translate: none; }
  .js-reveal .reveal.is-shown { animation: none; }
}