/* about.css — About page (about.html). Loads after site.css + rasp.css. */

/* ── Photo placeholders (real photos to come) ──────────────────── */
.ph { display: grid; place-items: center; align-content: center; gap: 10px; min-height: 320px; padding: 24px; border-radius: var(--r); border: 1px solid var(--line); background: repeating-linear-gradient(135deg, var(--alt) 0 14px, var(--tint) 14px 15px); color: var(--ink-3); text-align: center; }
.ph svg { width: 34px; height: 34px; }
.ph span { font: 600 11.5px/1.5 var(--body); letter-spacing: .12em; text-transform: uppercase; max-width: 280px; }
.ph.tall { aspect-ratio: 4 / 5; min-height: 0; }
.ph.wide { aspect-ratio: 21 / 8; min-height: 0; margin: 48px 0; }
@media (max-width: 640px) { .ph.wide { aspect-ratio: 4 / 3; } }

/* shared bits */
.prose p b { color: var(--ink); font-weight: 600; }
.pull { margin: 28px 0; padding: 2px 0 2px 20px; border-left: 3px solid var(--accent); font: 400 clamp(21px, 2.4vw, 26px)/1.35 var(--display); letter-spacing: -0.01em; color: var(--ink); max-width: 620px; }
.prose p.lead-in { color: var(--ink); font-weight: 600; margin-top: 22px; }
.prose p.lead-in + .pull { margin-top: 12px; }
.short { font: 400 21px/1.45 var(--display); color: var(--ink); }
.short span { display: block; }

/* ── Hero ──────────────────────────────────────────────────────── */
.ahero .q { margin: 16px 0; font: italic 400 22px/1.35 var(--display); color: var(--ink); max-width: 540px; }
.ahero .lede.sm { font-size: 17px; }
.ahero .pull { margin: 22px 0 0; }
.ahero .grew { margin-top: 16px; font-weight: 600; color: var(--ink); }

/* ── A new title: two experiences, one problem ─────────────────── */
.sides { display: grid; grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1fr); gap: 28px; margin-top: 48px; align-items: stretch; }
.side { padding: 30px; }
.side p { color: var(--ink-2); font-size: 16.5px; }
.side p + p { margin-top: 12px; }
.side .short { margin-top: 18px; }
.side .short:first-child { margin-top: 0; }
.bridge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; font: italic 400 20px/1.35 var(--display); color: var(--ink); }
.bridge::before, .bridge::after { content: ''; flex: 1; width: 1px; min-height: 40px; background: var(--line-strong); }
@media (max-width: 960px) {
  .sides { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .bridge { flex-direction: row; padding: 8px 0; }
  .bridge::before, .bridge::after { width: auto; height: 1px; min-height: 0; }
}
.same { margin: 56px auto 0; text-align: center; max-width: 760px; }
.same p { font: 700 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.same h3 { margin-top: 14px; font: 400 clamp(24px, 3vw, 34px)/1.25 var(--display); letter-spacing: -0.015em; }

/* ── Founder stories ───────────────────────────────────────────── */
.story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.story.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.story.flip .story-art { order: 2; }
.story-art { position: sticky; top: 93px; }
.story-art .who-cap { margin-top: 16px; }
.story-art h3 { font-size: 22px; }
.story-art .role { color: var(--accent); font-weight: 600; font-size: 14px; margin-top: 2px; }
.story h2 { margin-bottom: 22px; }
.story .chapter { font-size: 24px; font-weight: 500; margin: 44px 0 14px; }
@media (max-width: 960px) {
  .story, .story.flip { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .story.flip .story-art { order: 0; }
  .story-art { position: static; max-width: 360px; }
}
.bg-more { margin-top: 32px; border: 0; padding: 0; }
.bg-more:last-of-type { border: 0; }
.bg-more summary { display: inline-flex; font: 600 14.5px var(--body); color: var(--link); }
.bg-more summary::after { content: '→'; font-size: 15px; color: var(--link); transition: transform .2s; }
.bg-more[open] summary::after { content: '→'; transform: rotate(90deg); }
.bg-more ul { list-style: none; margin: 14px 0 0; padding: 18px 20px; border-radius: 12px; background: var(--alt); display: grid; gap: 8px; font-size: 14.5px; color: var(--ink-2); max-width: 560px; }
.alt .bg-more ul { background: var(--card); border: 1px solid var(--line); }
.bg-more li::before { content: '·'; margin-right: 8px; color: var(--ink-3); }
.bg-more .ext { margin-top: 6px; }
.bg-more .ext::before { content: none; }
.bg-more .ext a { color: var(--link); font-weight: 600; text-decoration: none; }

/* Nabeel: three beats under the portrait */
.beats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.beats span { font: 600 12.5px/1 var(--body); padding: 8px 12px; border-radius: 999px; background: var(--tint); color: var(--accent); }
.beats i { font-style: normal; color: var(--ink-3); }
.matters { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 4px; max-width: 620px; }
.matters li { font: 400 19px/1.4 var(--display); color: var(--ink); padding: 8px 0; border-bottom: 1px solid var(--line); }
.matters li em { font-style: normal; color: var(--accent); }

/* ── Two careers ───────────────────────────────────────────────── */
.meet .prose p { max-width: 720px; }
.big-q { margin: 0 auto; max-width: 900px; text-align: center; font: 400 clamp(28px, 3.8vw, 44px)/1.2 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.big-q span { color: var(--ink-3); }
.big-q-lead { text-align: center; color: var(--ink-2); font-size: 17px; margin-bottom: 18px; }

/* ── The decision ──────────────────────────────────────────────── */
.decision .in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
@media (max-width: 960px) { .decision .in { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
.plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 26px; }
.plan div { padding: 20px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); }
.plan .lbl { font: 700 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.plan b { display: block; margin-top: 10px; font: 500 20px/1.2 var(--display); color: var(--ink); }
.plan .drop b { text-decoration: line-through; text-decoration-color: var(--ink-3); color: var(--ink-3); }
.plan .keep { border-color: var(--ink); box-shadow: 0 10px 30px rgba(42, 34, 29, .08); }
.plan .keep .lbl { color: var(--accent); }
.about-qs { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.about-qs li { position: relative; padding-left: 22px; font: 400 19px/1.4 var(--display); color: var(--ink); }
/* same dot bullets as the How it works page */
.about-qs li::before { content: ''; position: absolute; top: .62em; left: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.verdict { margin-top: 28px; padding: 22px 24px; border-radius: 14px; background: var(--band); color: #fff; }
.verdict p { color: rgba(255, 255, 255, .7); font-size: 14.5px; }
.verdict b { display: block; margin-top: 6px; font: 400 clamp(22px, 2.6vw, 28px)/1.3 var(--display); letter-spacing: -0.01em; }

/* featured statement band */
.statement { background: var(--band); color: #fff; padding: 88px 0; }
.statement blockquote { margin: 0 auto; padding: 0; border: 0; max-width: 900px; text-align: center; font: 400 clamp(26px, 3.4vw, 40px)/1.3 var(--display); letter-spacing: -0.015em; color: #fff; }
.statement blockquote span { display: block; color: rgba(255, 255, 255, .6); }

/* ── Familiar patterns ─────────────────────────────────────────── */
.diffs { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 22px; font: 400 21px/1.4 var(--display); color: var(--ink); }
.qgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
@media (max-width: 760px) { .qgrid { grid-template-columns: minmax(0, 1fr); } }
.qgrid p { padding: 22px 24px; font: 400 19px/1.4 var(--display); color: var(--ink); }
.better { margin-top: 36px; font-size: 17px; color: var(--ink-2); max-width: 680px; }
.better b { display: block; margin-top: 4px; font: 400 clamp(22px, 2.6vw, 28px)/1.3 var(--display); color: var(--ink); }
.orgs { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.orgs .lbl { font-size: 14px; color: var(--ink-3); }
.orgs .marquee { margin-top: 22px; }
/* ── Safety + spacious thinking ────────────────────────────────── */
.about-qs.plain { margin-top: 22px; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 48px; }
@media (max-width: 760px) { .pair { grid-template-columns: minmax(0, 1fr); } }
.pair .card { padding: 28px; display: grid; gap: 14px; align-content: start; }
.pair svg { width: 100%; max-width: 260px; height: 90px; color: var(--ink-3); }
.pair h3 { font-size: 22px; font-weight: 500; }
.pair p { color: var(--ink-2); }
.pair .card p.does { color: var(--ink); font: 400 19px/1.4 var(--display); }
.together { margin-top: 28px; color: var(--ink-2); font-size: 17px; }

/* ── Four dimensions ───────────────────────────────────────────── */
.nots { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.nots li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 14.5px; color: var(--ink-2); }
.nots li::before { content: '✕'; font-size: 11px; color: var(--ink-3); }
.lenses-note { margin-top: 22px; font: 400 21px/1.4 var(--display); color: var(--ink); max-width: 720px; }
.dims .dim p { font-size: 15px; }
.more-link { margin-top: 32px; }

/* ── Spinning octahedron ───────────────────────────────────────── */
.turn { display: grid; justify-items: center; gap: 14px; }
.turn svg { width: 100%; max-width: 380px; height: auto; display: block; cursor: grab; touch-action: none; overflow: visible; }
.turn svg:active { cursor: grabbing; }
.turn svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 12px; }
.turn .facing { font-size: 14px; color: var(--ink-3); min-height: 22px; }
.turn .facing b { color: var(--c, var(--ink)); font-weight: 600; transition: color .3s; }
.lens .prose p.compare { color: var(--ink); }
.lens-statement { margin-top: 30px; padding-left: 20px; border-left: 3px solid var(--accent); font: 400 clamp(22px, 2.6vw, 28px)/1.3 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.lens-statement span { display: block; color: var(--ink-2); }

/* ── What we're proud of ───────────────────────────────────────── */
.vals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
@media (max-width: 760px) { .vals { grid-template-columns: minmax(0, 1fr); } }
.val { padding: 30px; }
.val h3 { font: 500 clamp(22px, 2.4vw, 26px)/1.2 var(--display); letter-spacing: -0.01em; margin-bottom: 12px; }
.val h3 span { color: var(--ink-3); }
.val p { color: var(--ink-2); }
.val p + p { margin-top: 10px; }
.still { margin-top: 56px; max-width: 720px; }
.still h3 { font: 500 26px/1.2 var(--display); margin-bottom: 12px; }
.still p { color: var(--ink-2); font-size: 17px; }
.still p + p { margin-top: 12px; }

/* founder portraits (grayscale photos) */
.portrait { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: center top; border-radius: var(--r); border: 1px solid var(--line); background: var(--alt); }
.wide-photo { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 20%; margin: 48px 0; border-radius: var(--r); }
@media (max-width: 640px) { .wide-photo { aspect-ratio: 4 / 3; } }
.hero-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 45% 40%; border-radius: var(--r); }