/* About page layout. */
.about-v2 .about-investors { margin-top: 60px; }
.about-v2 .about-investors::before { content: ''; position: absolute; top: -60px; left: -1px; right: -1px; height: 60px; border-inline: 1px solid var(--line); border-bottom: 1px solid var(--line); pointer-events: none; }
.about-intro { display: grid; grid-template-rows: auto 320px; border-bottom: 1px solid var(--line); }
.about-intro__heading { display: grid; place-items: center; min-height: 200px; padding: 48px 40px; }
.about-intro h1 { max-width: 820px; font-size: clamp(32px, 4.5vw, 64px); line-height: 1.06; letter-spacing: -.035em; text-align: center; text-wrap: balance; }
/* The artwork has 24 columns: 768px keeps each cell at the footer's 32px scale. */
.about-horizon { min-height: 0; overflow: hidden; border-top: 1px solid var(--line); background: url('../assets/illustrations/about-horizon.svg?v=20261010-softer') center bottom / 768px 384px repeat-x; }
.about-mission { display: grid; place-items: center; height: 70svh; padding: clamp(24px, 5svh, 72px) 7%; border-bottom: 1px solid var(--line); }
.about-mission > p { max-width: 1030px; font-size: clamp(28px, 3.34vw, 48px); font-weight: 500; line-height: 1.08; letter-spacing: -.035em; text-align: center; text-wrap: balance; }
@media (min-width: 801px) {
  .about-mission { height: auto; padding-block: 72px; }
}
.about-people__heading { padding: 40px; border-bottom: 1px solid var(--line); }
.about-people h2 { font-size: 40px; line-height: 40px; letter-spacing: -.04em; }
.team-members { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: auto; gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.team-member { min-width: 0; padding: 16px; background: var(--surface); }
.team-member--linked { display: block; color: inherit; text-decoration: none; }
.team-member--linked:focus-visible { outline: 2px solid var(--focus-ring, #1B1B1B); outline-offset: -3px; }
/* Keep every portrait the same width; invitations follow the normal grid flow. */
.team-members::after { background: var(--surface); }
@media (min-width: 1200px) {
  .team-members:has(> .team-member:last-child:nth-child(6n + 1))::after { content: ''; grid-column: 2 / -1; }
  .team-members:has(> .team-member:last-child:nth-child(6n + 2))::after { content: ''; grid-column: 3 / -1; }
  .team-members:has(> .team-member:last-child:nth-child(6n + 3))::after { content: ''; grid-column: 4 / -1; }
  .team-members:has(> .team-member:last-child:nth-child(6n + 4))::after { content: ''; grid-column: 5 / -1; }
  .team-members:has(> .team-member:last-child:nth-child(6n + 5))::after { content: ''; grid-column: 6 / -1; }
}
@media (min-width: 801px) and (max-width: 1199px) {
  .team-members { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .team-members:has(> .team-member:last-child:nth-child(3n + 1))::after { content: ''; grid-column: 2 / -1; }
  .team-members:has(> .team-member:last-child:nth-child(3n + 2))::after { content: ''; grid-column: 3 / -1; }
}
/* Two columns: an odd portrait count fills the cell beside the last portrait before the full-width invitations. */
@media (max-width: 800px) {
  .team-members > .team-invitation { order: 1; }
  .team-members:has(> .team-invitation--stealth:nth-child(even))::before { content: ''; order: 1; background: var(--surface); }
}
.team-member__photo { position: relative; width: 100%; aspect-ratio: 3 / 4; background: var(--surface-alt); overflow: hidden; }
.team-member__photo > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: grayscale(1); transition: filter 320ms ease; }
.team-member:hover .team-member__photo > img,
.team-member--linked:focus-visible .team-member__photo > img { filter: grayscale(0); }
.team-member--tight-portrait .team-member__photo > img { transform: scale(1.125); transform-origin: center 25%; }
.team-member[data-person-id="sanjay-malhotra"] .team-member__photo { background: #2A2A2A; }
.team-member[data-person-id="sanjay-malhotra"] .team-member__photo > img { transform: translateY(4%); }
.team-member h3 { margin-top: 16px; font-size: 18px; line-height: 25px; letter-spacing: -.035em; }
.team-member--toffee .team-member__photo > img { object-position: center; }
.team-member--toffee .team-member__photo { display: block; padding: 0; border: 0; cursor: pointer; }
.toffee-sprite { position: absolute; inset: auto 0 0; width: 100%; height: 112px; pointer-events: none; image-rendering: pixelated; }
@media (max-width: 1199px) {
  .about-mission { padding-inline: 6%; }
}
@media (max-width: 800px) {
  .about-intro__heading { padding: 24px 32px; }
  .about-mission { padding-inline: 32px; }
  .about-people__heading { padding: 40px 24px; }
  .team-members { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .team-member { padding: 8px; }
  .team-member:not(.team-invitation) h3 { margin-top: 6px; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
  .team-invitation { grid-column: span 2; }
}
@media (max-width: 560px) {
  .about-intro__heading { padding: 20px 24px; }
  .about-intro h1 { font-size: clamp(30px, 8.2vw, 44px); }
  .about-mission { padding-inline: 24px; }
  .about-mission > p { font-size: clamp(22px, 6.3vw, 30px); line-height: 1.14; }
  .about-people__heading { padding: 32px 24px; }
  .team-member { padding: 6px; }
}
@media (max-width: 600px) {
  .about-intro { grid-template-rows: auto 240px; }
  .about-intro__heading { min-height: 180px; padding-block: 32px; }
  .about-horizon { background-size: 576px 288px; }
}

/* Header insets are owned by the shared site-nav.css. */
:root { --header-height: 60px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .team-member__photo > img { transition: none; }
}

/* Two person-sized invitation cards close the team grid. */
.team-invitation { overflow: hidden; min-height: 340px; }
.team-invitation--join { --focus-ring: #FFFFFF; background: var(--block-yellow-50); }
.team-invitation--stealth { background: var(--surface); }
/* Match a portrait card's natural height even when the invitations occupy their own row. */
.team-invitation::before { content: ''; display: block; width: 100%; aspect-ratio: 3 / 4; }
.team-invitation::after { content: ''; display: block; height: 41px; }
.team-invitation__content { position: absolute; inset: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.team-invitation__content h3 { margin: 0; font: 500 24px/32px var(--font); letter-spacing: -.24px; text-wrap: balance; }
body .team-invitation--join .ui-button.ui-button { margin-top: auto; }
/* The shared ring would disappear into the orange card; white stays visible against it. */
body .team-invitation--join .ui-button.ui-button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.team-invitation__animation { position: relative; flex: none; margin-top: auto; width: min(100%, 192px); aspect-ratio: 8 / 5; }
.team-invitation__animation .ninja-stage { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; filter: grayscale(1); }
@media (min-width: 801px) and (max-width: 1400px) {
  .team-invitation__content h3 { font-size: 20px; line-height: 26px; }
}
@media (max-width: 800px) {
  /* Spanning both columns, 3:2 plus 16px keeps one portrait card's height. */
  .team-invitation::before { aspect-ratio: 3 / 2; }
  .team-invitation::after { height: 16px; }
}
@media (max-width: 560px) {
  .team-invitation { min-height: 200px; }
  .team-invitation__content h3 { font-size: 20px; line-height: 24px; }
  .team-invitation__animation { width: min(100%, 160px); }
}
@media (max-width: 360px) {
  .team-invitation__content h3 { font-size: 18px; line-height: 22px; }
}

/* Founders use the same card sizing and portrait treatment as the team. */
.about-founders h2 { margin: 0; padding: 40px; font: 500 40px/40px var(--font); letter-spacing: -.04em; }
.founder-members { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.founder-members::after { content: ""; grid-column: 3 / -1; background: var(--surface); }
@media (min-width: 801px) and (max-width: 1199px) {
 .founder-members { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
 .founder-members { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .founder-members::after { content: none; }
 .about-founders h2 { padding: 40px 24px; }
}
@media (max-width: 560px) {
 .about-founders h2 { padding: 32px 24px; font-size: 32px; }
}

/* Four partner logos in a two-by-two grid, followed by the individual investors. */
.about-investors { display: grid; grid-template-columns: minmax(0,60fr) minmax(0,40fr); background: var(--surface); border-bottom: 1px solid var(--line); }
.about-investors__heading { padding: 40px; }
.about-investors__heading h2 { margin: 0; font: 500 40px/40px var(--font); letter-spacing: -.04em; }
.about-investors__partners { min-width: 0; border-left: 1px solid var(--line); }
.about-investors__logos { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; margin: 0; padding: 0; list-style: none; }
.about-investors__investor { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-width: 0; padding: 32px 24px; }
.about-investors__investor:nth-child(even) { border-left: 1px solid var(--line); }
.about-investors__investor:nth-child(n+3) { border-top: 1px solid var(--line); }
.about-investors__link { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; color: inherit; text-decoration: none; }
.about-investors__link:focus-visible { outline: 2px solid var(--focus-ring, #1B1B1B); outline-offset: 2px; }
.about-investors__logo { display: grid; place-items: center; width: 100%; height: 60px; }
.about-investors__logo img { display: block; width: 132px; max-width: 100%; max-height: 60px; height: auto; object-fit: contain; }
.about-investors__investor--primary .about-investors__logo img { width: 126px; }
.about-investors__logo .about-investors__picus { width: 170px; filter: brightness(0); }
.about-investors__logo .about-investors__edis { width: 100px; }
.about-investors__individuals { margin: 0; padding: 32px; border-top: 1px solid var(--line); font: 400 16px/24px var(--font); text-align: center; text-wrap: pretty; }
.about-investors__individuals a { color: inherit; text-decoration: none; }
.about-investors__individuals a:focus-visible { outline: 2px solid var(--focus-ring, #1B1B1B); outline-offset: 2px; }
@media (max-width: 1000px) {
 .about-investors { grid-template-columns: minmax(0,50fr) minmax(0,50fr); }
 .about-investors__investor { padding: 24px 16px; }
}
/* Text keeps the 40px page inset above 800px, like the founders and team headings. */
@media (max-width: 800px) {
 .about-investors__heading { padding: 32px 24px; }
 .about-investors__individuals { padding: 32px 24px; }
}
@media (max-width: 600px) {
 .about-investors { grid-template-columns: 1fr; }
 .about-investors__heading h2 { font-size: 32px; line-height: 36px; }
 .about-investors__heading h2 br { display: none; }
 .about-investors__partners { border-left: 0; border-top: 1px solid var(--line); }
 .about-investors__investor { padding: 20px 8px; }
 .about-investors__individuals { padding: 24px; font-size: 16px; line-height: 24px; }
}