/* Additions on top of the exported Webflow stylesheet. */

/* "Human-machine selection approach": particle animation fills the whole image panel */
.image-wrapper.black-bg.particles {
  background-image: none;
  background-color: #0b0b10;
  padding: 0;
  overflow: hidden;
}

.image-wrapper.black-bg.particles iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Section headline block with the same spacing as "Our portfolio / Most recent investment"
   (.padding-vertical._53-72 top padding + the .content-wrapper.investment gap below), at every breakpoint. */
.section-head { padding-top: 6em; padding-bottom: 4.63em; }
@media screen and (max-width: 991px) { .section-head { padding-top: 4em; padding-bottom: 4em; } }
@media screen and (max-width: 767px) { .section-head { padding-top: 2em; padding-bottom: 3em; } }
@media screen and (max-width: 479px) { .section-head { padding-bottom: 2em; } }

/* "Founder Factor Partners": two full-width marquee rows of partner cards.
   Sizes are in em so they follow the site's viewport-scaled body font-size (16px = 1em). */
.partners-marquee {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  overflow: hidden;
  margin-bottom: 3em;
  font-family: Geist, sans-serif;
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}

.partners-row {
  display: flex;
  width: max-content;
  animation: partners-marquee 56s linear infinite;
}

.partners-row.reverse {
  animation-duration: 50.9s;
  animation-direction: reverse;
}

.partners-row:hover {
  animation-play-state: paused;
}

@keyframes partners-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.partner-card {
  box-sizing: border-box;
  flex: none;
  width: 25em;
  min-height: 15.625em;
  margin-right: 1.5em;
  padding: 1.75em;
  background: #fff;
  border-radius: 1em;
  display: flex;
  flex-direction: column;
  gap: 1.125em;
}

.partner-head {
  display: flex;
  align-items: center;
  gap: .875em;
}

.partner-photo {
  flex: none;
  width: 3.25em;
  height: 3.25em;
  border-radius: 50%;
  object-fit: cover;
  background: #eef1f0;
}

.partner-name {
  color: #141716;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.3;
}

.partner-role {
  margin-top: 1px;
  color: #8a93a8;
  font-size: .84375em;
  line-height: 1.4;
}

.partner-bio {
  color: #3d4442;
  font-size: 1em;
  line-height: 1.55;
}

@media screen and (max-width: 479px) {
  .partners-marquee { gap: 1em; }
  .partner-card { width: 19em; min-height: 0; margin-right: 1em; padding: 1.5em; }
}

@media (prefers-reduced-motion: reduce) {
  .partners-marquee { overflow-x: auto; }
  .partners-row { animation: none; }
}


/* ---------- /portfolio: company list ----------
   Same tokens as the rest of the site: page #f9fafa, white cards with 1em radius, text #17181c,
   muted #5c5e71 / #8f92a3, hairline #5c5e711c. Sizes in em so they follow the scaled body font-size. */
h1.heading-size-60 { margin: 0; }
.text-wrapper.hero .text-size-20 { text-align: center; } /* Webflow only centres it on phones; matters once it spans two lines */

/* space between the subheadline and the tabs = 2x the hero's own bottom padding (4.63em, 3em on phones) */
.pf-section { padding-top: 4.63em; padding-bottom: 4.5em; font-family: Geist, sans-serif; color: #17181c; }
.pf button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* batch filter: pill tabs — white pill for the active batch, muted text for the rest */
.pf-bar { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: 1.5em; }
.pf-tabs { display: flex; gap: .25em; overflow-x: auto; scrollbar-width: none; }
.pf-tabs::-webkit-scrollbar { display: none; }
.pf .pf-tab { padding: .6em 1.25em; border-radius: 6.25em; color: #8f92a3; font-size: 1em; font-weight: 500; line-height: 1.5; white-space: nowrap; transition: color .15s, background-color .15s; }
.pf .pf-tab:hover { color: #17181c; }
.pf .pf-tab.is-active { background: #fff; color: #17181c; }
.pf-count { color: #8f92a3; font-size: .75em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }

.pf-table { background: #fff; border: 1px solid #5c5e711c; border-radius: 1em; }
.pf-head, .pf-row { display: grid; grid-template-columns: minmax(0, 1fr) 9em 12em; column-gap: 1.5em; align-items: center; padding: 0 1.5em; }
.pf-head { height: 3.4em; }
.pf .pf-sort, .pf-sort-label { display: inline-flex; align-items: center; gap: .5em; justify-self: start; color: #8f92a3; font-size: .72em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.pf .pf-sort:hover, .pf .pf-sort.is-active { color: #17181c; }
.pf-sort svg { width: 1.35em; height: 1.35em; }
.pf-sort svg path { opacity: .4; transition: opacity .15s; }
/* active column: the arrow for the current direction is solid, the other one fades out */
.pf-sort.is-active[data-dir="asc"] .pf-up, .pf-sort.is-active[data-dir="desc"] .pf-down { opacity: 1; }
.pf-sort.is-active[data-dir="asc"] .pf-down, .pf-sort.is-active[data-dir="desc"] .pf-up { opacity: .18; }

.pf-row { position: relative; padding-top: 1.15em; padding-bottom: 1.15em; border-top: 1px solid #5c5e711c; transition: background-color .15s; }
.pf-row[hidden] { display: none; }
.pf-row:hover { background: #f9fafa; }
.pf-rows > .pf-row:last-child { border-radius: 0 0 1em 1em; }

.pf-company { display: flex; align-items: center; gap: 1.1em; min-width: 0; }
.pf-logo { flex: none; display: block; width: 3.25em; height: 3.25em; border: 1px solid #5c5e711c; border-radius: .8em; background: #fff; overflow: hidden; }
.pf-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pf-text { min-width: 0; }
.pf-name { display: inline-block; color: #17181c; font-size: 1.125em; font-weight: 500; line-height: 1.35; text-decoration: none; }
.pf-name:hover { text-decoration: underline; text-underline-offset: .15em; }
.pf-tagline { color: #5c5e71; font-size: 1em; line-height: 1.45; }

.pf-batch { display: flex; align-items: center; gap: .5em; color: #17181c; font-size: .9em; font-weight: 600; letter-spacing: .02em; }
.pf-batch img { width: 1.05em; height: 1.05em; border-radius: .15em; }

.pf-founders { position: relative; display: flex; align-items: center; }
.pf-person + .pf-person { margin-left: -.6em; }
.pf .pf-founder { display: block; width: 2.75em; height: 2.75em; border: 2px solid #fff; border-radius: 50%; background: #eef1f0; overflow: hidden; transition: transform .15s; }
.pf-row:hover .pf-founder { border-color: #f9fafa; }
.pf .pf-founder:hover, .pf .pf-founder[aria-expanded="true"] { position: relative; z-index: 2; transform: translateY(-2px); }
.pf .pf-founder:focus-visible, .pf .pf-tab:focus-visible, .pf .pf-sort:focus-visible { outline: 2px solid #17181c; outline-offset: 2px; }
.pf-founder img { display: block; width: 100%; height: 100%; object-fit: cover; }

.pf-pop { position: absolute; z-index: 50; top: calc(100% + .6em); right: 0; display: flex; align-items: center; gap: 1.5em; width: 29em; max-width: calc(100vw - 2em); padding: 1.5em 2.5em 1.5em 1.5em; background: #fff; border-radius: 1em; box-shadow: 0 8px 24px #00000026; }
.pf-pop[hidden] { display: none; }
.pf-pop-photo { flex: none; width: 6.5em; height: 6.5em; border-radius: 50%; object-fit: cover; background: #eef1f0; }
.pf-pop-name { color: #17181c; font-size: 1em; font-weight: 600; line-height: 1.5; }
.pf-pop-bio { margin: .35em 0 0; color: #5c5e71; font-size: .88em; line-height: 1.45; }
.pf-pop-links { display: flex; gap: .9em; margin-top: .9em; }
.pf-pop-links a { display: block; width: 1.13em; }
.pf-pop-links img { display: block; width: 100%; }
.pf .pf-pop-close { position: absolute; top: .6em; right: .6em; width: 1.5em; height: 1.5em; }
.pf-pop-close img { display: block; width: 100%; }


@media screen and (max-width: 599px) {
  /* count on its own line so the tab strip gets the full width (it scrolls sideways if batches keep coming) */
  .pf-bar { flex-direction: column-reverse; align-items: stretch; gap: .9em; }
  .pf-tabs { gap: 0; }
  .pf .pf-tab { padding: .55em .95em; }
  .pf-sub-br { display: none; } /* the first line no longer fits: let the text wrap naturally */
}

@media screen and (max-width: 479px) {
  .pf-section { padding-top: 3em; }
}

@media screen and (max-width: 767px) {
  .pf-head { display: none; }
  .pf-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: .9em; padding-left: 1.1em; padding-right: 1.1em; border-top: 0; }
  .pf-row + .pf-row, .pf-row ~ .pf-row { border-top: 1px solid #5c5e711c; }
  .pf-rows > .pf-row:first-child { border-radius: 1em 1em 0 0; }
  .pf-company { grid-column: 1 / -1; align-items: flex-start; }
  .pf-batch { grid-column: 1; padding-left: 4.35em; }
  .pf-founders { grid-column: 2; position: static; justify-content: flex-end; }
  .pf-pop { left: 0; right: 0; top: calc(100% - .4em); width: auto; max-width: none; gap: 1em; padding: 1.25em 2.25em 1.25em 1.25em; align-items: flex-start; }
  .pf-pop-photo { width: 4.5em; height: 4.5em; }
  .pf-count { font-size: .68em; }
}

/* ---------- Log In modal (markup: src/partials/login-modal.html, behaviour: site.js) ---------- */
.login-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 1.25em; overflow-y: auto; background: rgba(0, 0, 0, .68); font-family: Geist, sans-serif; opacity: 0; transition: opacity .2s ease; }
.login-overlay[hidden] { display: none; }
.login-overlay.is-open { opacity: 1; }
.login-modal { box-sizing: border-box; width: 100%; max-width: 32em; margin: auto; padding: 3.5em 3.5em 3em; background: #fff; border-radius: 1.75em; box-shadow: 0 24px 64px #00000040; transform: translateY(.75em) scale(.98); transition: transform .2s ease; }
.login-overlay.is-open .login-modal { transform: none; }
html.login-locked, html.login-locked body { overflow: hidden; }

.login-mark { display: block; width: 3em; height: auto; margin-left: -.35em; }
.login-title { margin: 3.25em 0 1.6em; color: #17181c; font-size: 2em; font-weight: 400; line-height: 1.2; letter-spacing: -.01em; }

.login-google, .login-form button { display: flex; align-items: center; justify-content: center; gap: .75em; box-sizing: border-box; height: 3.1em; margin: 0; padding: 0 1.25em; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: .75em; color: #17181c; font: inherit; font-size: 1em; font-weight: 500; cursor: pointer; transition: background-color .15s, border-color .15s; }
.login-google { width: 100%; }
.login-google:hover, .login-form button:hover { background: #ebedf0; border-color: #d9dce1; }
.login-google svg { width: 1.05em; height: 1.05em; }

.login-or { display: flex; align-items: center; gap: 1.75em; margin: 1.1em 0; color: #8f92a3; font-size: .95em; }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: #e5e7eb; }

.login-form { display: flex; gap: .6em; margin: 0; }
.login-form input { flex: 1; min-width: 0; box-sizing: border-box; height: 3.1em; margin: 0; padding: 0 1em; background: #fff; border: 1px solid #e5e7eb; border-radius: .75em; box-shadow: 0 1px 2px #0000000d; color: #17181c; font: inherit; font-size: 1em; outline: 0; -webkit-appearance: none; appearance: none; transition: border-color .15s, box-shadow .15s; }
.login-form input::placeholder { color: #8f92a3; }
.login-form input:focus { border-color: #17181c; box-shadow: 0 0 0 3px #17181c14; }
.login-form input[aria-invalid="true"] { border-color: #d92d20; box-shadow: 0 0 0 3px #d92d2014; }
.login-google:focus-visible, .login-form button:focus-visible { outline: 2px solid #17181c; outline-offset: 2px; }

.login-legal { margin: 2.6em 0 0; color: #8f92a3; font-size: .85em; line-height: 1.5; text-align: center; text-wrap: balance; }

@media screen and (max-width: 479px) {
  .login-modal { padding: 2.25em 1.5em 2em; border-radius: 1.5em; }
  .login-title { margin: 2.25em 0 1.25em; font-size: 1.75em; }
  .login-or { gap: 1em; }
}

@media (prefers-reduced-motion: reduce) {
  .login-overlay, .login-modal { transition: none; }
}