/* TTM Site Next — LAB · ABOUT page.
   Owns: page hero, model cards, who-we-are cards + note,
   what-this-is-not cards, roadmap track. The scene wrapper,
   panel, hero display, closing CTA, and footer styling come from
   the shared home.css. */

/* ---------- page hero ---------- */
.p-hero { position: relative; padding-top: clamp(140px, 19vh, 210px); }
.p-hero .wrap { display: grid; gap: var(--s5); }
.p-meta { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- model ---------- */
.model-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.p-card {
  position: relative; padding: 28px 30px 26px; border-radius: var(--r-lg);
  background: var(--glass2); border: 1px solid var(--stroke);
  backdrop-filter: blur(14px); display: grid; gap: 12px; align-content: start;
}
.p-card > strong { font-size: 20px; font-weight: 640; letter-spacing: -0.015em; }
.p-card > span { font-size: 15.5px; line-height: 1.68; color: var(--ink-2); }

/* ---------- who we are ---------- */
.who-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.w-card {
  padding: 24px 26px 22px; border-radius: var(--r-md);
  background: var(--glass2); border: 1px solid var(--stroke);
  backdrop-filter: blur(14px); display: grid; gap: 12px; align-content: start;
}
.w-idx {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  font-size: 15px; font-weight: 700; letter-spacing: 0.04em; color: #052014;
  background: linear-gradient(120deg, var(--green), var(--cyan));
}
.w-card > strong { font-size: 18px; font-weight: 640; letter-spacing: -0.015em; }
.w-card > span { font-size: 14.5px; line-height: 1.66; color: var(--ink-2); }
.about-note {
  margin-top: 22px; padding: 20px 26px; border-radius: var(--r-md);
  border: 1px dashed color-mix(in srgb, var(--cyan) 30%, transparent);
  background: color-mix(in srgb, var(--cyan) 5%, var(--glass2));
  font-size: 14.5px; line-height: 1.66; color: var(--ink-2);
}

/* ---------- what this is not ---------- */
.not-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px; }
.n-card {
  padding: 26px 28px 24px; border-radius: var(--r-md);
  background: var(--glass2); border: 1px solid var(--stroke);
  backdrop-filter: blur(14px); display: grid; gap: 14px; align-content: start;
}
.n-no {
  font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: #ff9d7a;
}
[data-theme="light"] .n-no { color: #b34a1f; }
.n-card > strong { font-size: 19px; font-weight: 640; letter-spacing: -0.015em; }
.n-card > span { font-size: 14.5px; line-height: 1.66; color: var(--ink-2); }

/* ---------- roadmap ---------- */
.r-track {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  counter-reset: rstep;
}
.r-node {
  position: relative; padding: 26px 26px 24px; border-radius: var(--r-md);
  background: var(--glass2); border: 1px solid var(--stroke);
  backdrop-filter: blur(14px); display: grid; gap: 12px; align-content: start;
}
.r-node::before {
  counter-increment: rstep; content: "0" counter(rstep);
  font-size: 13px; font-weight: 800; letter-spacing: 0.24em; color: var(--blue);
}
.r-node > strong { font-size: 18px; font-weight: 640; letter-spacing: -0.015em; }
.r-node > span { font-size: 14.5px; line-height: 1.66; color: var(--ink-2); }

/* ---------- where we started / how we work (story prose) ---------- */
.story { max-width: 70ch; display: grid; gap: var(--s5); margin-top: var(--s6); }
.story p {
  margin: 0; font-size: var(--t-lede); line-height: 1.62;
  color: var(--ink-2); font-weight: 420; text-wrap: pretty;
}

/* ---------- what we believe (mission / vision cards) ---------- */
.mv-card > strong { display: inline-flex; align-items: center; gap: 12px; }
.mv-card > strong::before {
  content: ""; width: 11px; height: 11px; border-radius: 4px; flex: none;
  background: var(--green);
}
.mv-card[data-accent="cyan"] > strong::before { background: var(--cyan); }

/* mission/vision cards follow the story spacing rhythm */
[data-hscene="believe"] .model-grid { margin-top: var(--s6); }

/* ---------- founder ---------- */
.founder-panel {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: clamp(28px, 4vw, 56px); align-items: start;
  padding: clamp(28px, 4vw, 48px); border-radius: var(--r-lg);
  background: var(--glass2); border: 1px solid var(--stroke);
  backdrop-filter: blur(14px);
}
.founder-copy { display: grid; gap: var(--s4); justify-items: start; }
.founder-copy .eyebrow { margin: 0; }
.founder-role {
  margin: 0; font-size: var(--t-subhead); font-weight: 640; letter-spacing: -0.01em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.founder-bio { display: grid; gap: var(--s4); margin-top: var(--s2); }
.founder-bio p { margin: 0; font-size: 15.5px; line-height: 1.68; color: var(--ink-2); }
.founder-bio strong { color: var(--ink); font-weight: 650; }
.founder-bio .inline-link { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.founder-portrait { margin: 0; display: grid; gap: 12px; }
.founder-portrait img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-md); border: 1px solid var(--stroke);
}
.founder-portrait figcaption {
  font-size: var(--t-caption); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--faint); text-align: center;
}

/* ---------- closing belief ---------- */
.belief-quote {
  margin: 0 auto; max-width: 30ch; text-align: center;
  font-size: var(--t-title); font-weight: 640; line-height: 1.3;
  letter-spacing: -0.02em; text-wrap: balance; color: var(--ink);
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .model-grid { gap: 16px; }
}
@media (max-width: 900px) {
  .who-grid, .r-track { grid-template-columns: 1fr; }
  .founder-panel { grid-template-columns: 1fr; }
  .founder-portrait { max-width: 340px; margin: 0 auto; }
}
@media (max-width: 760px) {
  .model-grid, .not-grid { grid-template-columns: 1fr; }
}