/* Adapted from Stitch e32eb5a4ae254cb8bde860ab50ecc7c7.
   One continuous canvas, alternating portrait reserves, no invented profiles. */
.founders-narrative {
  position: relative;
  isolation: isolate;
  padding-block: clamp(40px, 5vw, 72px) clamp(48px, 6vw, 88px);
  scroll-margin-top: calc(var(--nav-height) + 24px);
}

.founders-narrative::before {
  content: "";
  position: absolute;
  inset: -80px 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 28%, rgba(112, 183, 255, .018), transparent 44%),
    radial-gradient(ellipse at 80% 63%, rgba(255, 255, 255, .013), transparent 40%);
}

.founders-narrative > .page-shell { max-width: 1160px; margin-inline: auto; }
.founders-lead { max-width: 620px; margin-bottom: clamp(40px, 5vw, 72px); }
.founders-lead h2 {
  margin-top: 16px;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.founder-sequence { display: grid; row-gap: clamp(48px, 6vw, 80px); }
.founder-profile {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2.5vw, 36px);
  align-items: center;
}

.founder-portrait {
  grid-column: 1 / 6;
  grid-row: 1;
  justify-self: center;
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  /* Fade fully to transparency on every edge, keeping the face and torso clear. */
  -webkit-mask-image:
    linear-gradient(to right, transparent, rgba(0, 0, 0, .4) 7%, #000 22%, #000 78%, rgba(0, 0, 0, .4) 93%, transparent),
    linear-gradient(to bottom, transparent, rgba(0, 0, 0, .65) 4%, #000 12%, #000 72%, rgba(0, 0, 0, .65) 86%, transparent);
  mask-image:
    linear-gradient(to right, transparent, rgba(0, 0, 0, .4) 7%, #000 22%, #000 78%, rgba(0, 0, 0, .4) 93%, transparent),
    linear-gradient(to bottom, transparent, rgba(0, 0, 0, .65) 4%, #000 12%, #000 72%, rgba(0, 0, 0, .65) 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.founder-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: var(--portrait-position-x, 50%) center; }
/* Center each subject rather than the landscape source image. */
.founder-portrait[data-founder-portrait="01"] { --portrait-position-x: 45%; }
.founder-portrait[data-founder-portrait="02"] { --portrait-position-x: 45%; }
.founder-portrait[data-founder-portrait="03"] { --portrait-position-x: 41%; }
.founder-portrait-index {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, .24);
  font: 11px/1.5 var(--font-mono);
  letter-spacing: .24em;
}
.founder-portrait img ~ .founder-portrait-index { display: none; }

.founder-statement { grid-column: 7 / -1; grid-row: 1; width: 100%; max-width: 460px; padding-block: 24px; }
.founder-profile:nth-child(even) .founder-portrait { grid-column: 8 / -1; }
.founder-profile:nth-child(even) .founder-statement { grid-column: 1 / 7; justify-self: center; }
.founder-index {
  margin-bottom: 32px;
  color: var(--accent-blue);
  text-shadow: 0 0 6px rgba(70, 166, 255, 0.72),
               0 0 18px rgba(32, 133, 255, 0.42),
               0 0 30px rgba(32, 133, 255, 0.18);
  font: 11px/1.5 var(--font-mono);
  letter-spacing: .14em;
}
.founder-identity { display: grid; row-gap: 8px; margin-top: 28px; }
.founder-name { display: block; font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -.015em; }
.founder-role { display: block; color: #a0a3ab; font-size: 13px; line-height: 1.65; max-width: 340px; }
.founder-name:empty::before,.founder-role:empty::before {
  content: "";
  display: block;
  height: 1px;
  width: min(56%, 220px);
  background: rgba(255, 255, 255, .12);
}
.founder-role:empty::before { width: min(28%, 112px); background: rgba(255, 255, 255, .08); }
.founder-quote { position: relative; margin: 0; color: #dedfe3; font-size: clamp(23px, 2.05vw, 29px); font-weight: 300; font-style: italic; line-height: 1.55; letter-spacing: -.018em; }
.founder-quote-text { margin: 0; max-width: 460px; overflow-wrap: break-word; text-wrap: pretty; }
.founder-quote-text:empty::before {
  content: "";
  display: block;
  height: 2.4em;
  width: 100%;
  background:
    linear-gradient(rgba(255, 255, 255, .07), rgba(255, 255, 255, .07)) 0 .4em / 100% 1px no-repeat,
    linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, .05)) 0 1.2em / 84% 1px no-repeat,
    linear-gradient(rgba(255, 255, 255, .04), rgba(255, 255, 255, .04)) 0 2em / 65% 1px no-repeat;
}
.founders-narrative + .page-details { padding-top: 12px; }

@media (max-width: 700px) {
  .founders-narrative { padding-block: 32px 40px; }
  .founders-lead { margin-bottom: 32px; }
  .founder-sequence { row-gap: 64px; }
  .founder-profile { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .founder-portrait,.founder-profile:nth-child(even) .founder-portrait { grid-column: 1; grid-row: auto; max-width: 280px; }
  .founder-statement,.founder-profile:nth-child(even) .founder-statement { grid-column: 1; grid-row: auto; max-width: 420px; padding: 0 8px; justify-self: center; }
  .founder-index { margin-bottom: 24px; font-size: 10px; }
  .founder-identity { row-gap: 6px; margin-top: 24px; }
  .founder-name { font-size: 19px; }
  .founder-quote { font-size: 22px; line-height: 1.55; }
}