:root {
  --mobile-image-width: 170px;
  --gap-mobile: 6rem;
}
.co-founders-container {
  position: relative;
  text-align: center;
  padding: 2rem;
}

.co-founders-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.co-founders-grid {
  display: flex;
  gap: 14rem;
  width: 67vw;
}
.co-founder {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0) 100%);
  flex: 1;
  max-width: none;
  cursor: pointer;
  gap: 0;
}
.co-founder-image {
  display: block;
  max-height: 50vh;
  width: 25vw;
  line-height: 0;
  overflow: hidden;
  flex: 1;
}
.co-founder-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
  filter: grayscale(100%);
  display: block;
  margin: 0;
  padding: 0;
}
.co-founder-image img.alex-headshot {
  object-position: center 15%;
}
.co-founder-info {
  background: rgba(0, 0, 0, 1);
  padding-top: 3.5rem;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  margin-top: -2px;
  white-space: nowrap;
}
.co-founder-info h3 {
  font-size: 4rem;
  font-weight: 500;
  margin-bottom: 0.1rem;
  font-family: "FoundersGrotesk", sans-serif;
}
.co-founder-info p {
  font-size: 2.2rem;
  font-weight: 300;
  line-height: 1.3;
  font-family: "FoundersGrotesk", sans-serif;
}

/* Hide mobile line break on desktop */
.mobile-break {
  display: none;
}

/* Bio Modal Styles */
.bio-modal {
  display: flex;
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 1);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  transition:
    visibility 0.2s,
    opacity 0.2s linear;
  opacity: 0;
}
.bio-modal.active {
  visibility: visible;
  opacity: 1;
}
.bio-modal-content {
  position: relative;
  max-width: 910px;
  width: 90%;
  max-height: 90vh;
  overflow: visible;
}
.bio-modal-close {
  position: absolute;
  top: 0;
  right: -5rem;
  background: none;
  border: none;
  color: white;
  font-size: 4rem;
  cursor: pointer;
  padding: 1rem 2rem;
  line-height: 1;
  font-weight: 300;
}
.bio-modal-close:hover {
  opacity: 0.7;
}
.bio-modal-inner {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
  padding-top: 2rem;
}
.bio-modal-left {
  flex-shrink: 0;
  width: 30%;
}
.bio-modal-image {
  background: rgba(255, 255, 255, 0.1);
  margin-top: 0.6rem;
}

.bio-modal-image img {
  width: 100%;
  height: auto;
  filter: grayscale(100%);
  display: block;
}
.bio-modal-info {
  background: rgba(0, 0, 0, 1);
  padding: 1.5rem;
  padding-left: 0;
}
.bio-modal-info h3 {
  font-size: 4rem;
  font-weight: 500;
  font-family: "FoundersGrotesk", sans-serif;
  line-height: normal;
}
.bio-modal-info p {
  font-size: 2.2rem;
  font-weight: 300;
  line-height: 1.4;
  font-family: "FoundersGrotesk", sans-serif;
}
.bio-modal-right {
  flex: 1;
  padding-right: 4rem;
}
.bio-modal-right p {
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 1.6;
  font-family: "FoundersGrotesk", sans-serif;
}

.founders-header {
  width: 100%;
  position: absolute;
  white-space: nowrap;
  display: inline;
  top: -15%;
  text-align: left;
  transform: translate(-50%, -50%);
}

.last-slide-logo {
  height: 20vw;
  max-height: 300px;
}

.last-slide-logos-row {
  display: flex;
  align-items: center;
}

.last-slide-subtext {
  font-weight: 400;
  font-size: 4.5rem;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .bio-modal {
    align-items: center;
    justify-content: center;
    padding: 1rem;
  }
  .bio-modal-content {
    max-width: 100vw;
    max-height: 90vh;
    overflow: visible;
    width: 90%;
    background: rgba(0, 0, 0, 0.9);
    padding: 2rem;
    border-radius: 0;
  }
  .bio-modal-inner {
    flex-direction: column;
    padding: 0;
    gap: 1rem;
  }
  .bio-modal-left {
    width: 280px;
    display: flex;
  }
  .bio-modal-image {
    width: var(--mobile-image-width);
    height: auto;
    flex-shrink: 0;
    margin-top: 0;
  }
  .bio-modal-info {
    padding-left: 1rem;
    padding-top: 0.8rem;
    display: flex;
    flex-direction: column;
    justify-content: end;
  }
  .bio-modal-info h3 {
    font-size: 1.8rem;
    margin-bottom: 0.3rem;
  }
  .bio-modal-info p {
    font-size: 1.1rem;
  }
  .bio-modal-right {
    border-top: 1px solid rgba(84, 84, 84, 0.55);

    padding-right: 0;
    padding-top: 0;
  }
  .bio-modal-right p {
    font-size: 1.6rem;
    line-height: 1.4;
  }
  .bio-modal-close {
    font-size: 3rem;
    top: 1rem;
    right: 1.5rem;
    padding: 0;
  }
  .last-slide-logos-row {
    gap: 16px;
  }
  .last-slide-subtext {
    font-size: 2.2rem;
  }
}

@media screen and (max-width: 480px) {
  .co-founders-main-content {
    height: 70%;
  }

  .bio-modal-content {
    padding: 1.5rem;
  }
  .bio-modal-inner {
    gap: 0.8rem;
  }
  .bio-modal-left {
    flex-direction: row;
  }
  .bio-modal-info {
    padding-top: 0;
  }
  .bio-modal-info h3 {
    margin-bottom: 0;
    font-size: 2.2rem;
    line-height: normal;
    white-space: nowrap;
  }
  .bio-modal-info p {
    font-size: 1.2rem;
    line-height: 2rem;
    white-space: nowrap;
  }
  .bio-modal-right p {
    padding-top: 1rem;
    font-size: 1.6rem;
    line-height: 1.3;
  }
  .bio-modal-close {
    font-size: 2.5rem;
  }
}

/* Screens above 2.5K  */
@media screen and (min-width: 2561px) {
  .founders-header h1 {
    font-size: 11rem;
  }

  .co-founder-info {
    padding-top: 6rem;
  }
  .co-founder-info h3 {
    font-size: 6.5rem;
  }
  .co-founder-info p {
    font-size: 3rem;
  }
  .bio-modal-info h3 {
    font-size: 4rem;
  }
  .bio-modal-info p {
    font-size: 3rem;
  }
  .bio-modal-content {
    max-width: 1700px;
  }
  .bio-modal-right p {
    font-size: 3.2rem;
  }
}

/* Co-founders responsive */
@media screen and (max-width: 991px) {
  .section {
    overflow: hidden;
  }
  .mobile-break {
    display: block;
  }

  .co-founders-wrapper {
    width: 340px;
  }

  .founders-header {
    font-size: 2.7rem;
    top: calc(var(--gap-mobile) * -1);
    text-align: left;
  }

  .co-founders-section .co-founders-main-content {
    width: 100% !important;
  }

  .co-founders-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .co-founders-grid {
    flex-direction: column;
    gap: var(--gap-mobile);
  }

  .co-founder {
    gap: 1.5rem;
    flex-direction: row;
    width: calc(100vw - 5rem);
    max-width: 500px;
    align-items: stretch;
    background: rgba(0, 0, 0, 1);
  }
  .co-founder-image {
    width: var(--mobile-image-width);
    height: auto;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 1);
  }
  .co-founder-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }
  .co-founder-info {
    width: var(--mobile-image-width);
    min-width: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .co-founder-info h3 {
    font-size: 2.8rem;
  }
  .co-founder-info p {
    font-size: 1.6rem;
  }
}

@media screen and (max-width: 640px) {
  .co-founder {
    width: calc(100vw - 5rem);
    max-width: 400px;
  }
  .co-founder-info h3 {
    font-size: 2.4rem;
  }
  .co-founder-info p {
    font-size: 1.4rem;
  }
}
/* Force 6th video to bottom for co-founders slide - all screen sizes */
/* video to bottom for co-founders slide - all screen sizes */
.video video.video-bottom {
  object-position: center bottom !important;
}
video.video-bottom {
  object-position: center bottom !important;
}
.video-bottom {
  object-position: center bottom !important;
}

/* Reduce fullPage.js navigation dot height */
#fp-nav ul li a span,
.fp-nav ul li a span,
#fp-nav li a span,
.fp-nav li a span {
  height: 36px !important;
  transition: all 0.2s ease !important;
}
#fp-nav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-nav ul li a.active span,
.fp-nav ul li:hover a.active span {
  height: 36px !important;
}
#fp-nav ul li a:hover span,
.fp-nav ul li a:hover span {
  height: 42px !important;
  width: 6px !important;
}
#fp-nav ul li,
.fp-nav ul li {
  height: 44px !important;
}

/* Last slide video overlay */
.last-slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 0;
}
.last-slide .content {
  position: relative;
  z-index: 1;
}

/* fullpage.js's `fixedElements` option re-parents .cli-modal-content.cli-bar-popup
   out to <body>, detaching it from .cli-modal { display: none }. Without this rule
   it renders as in-flow content below the footer when the popup is closed. */
body:not(.cli-modal-open) > .cli-modal-content.cli-bar-popup {
  display: none;
}

/* Since the popup content was moved out of #cliSettingsPopup, the now-empty
   modal shell shouldn't intercept clicks. Its outside-click-close handler
   treats every click as "outside the dialog" (the dialog is empty) and closes
   the popup — breaking Show More. */
#cliSettingsPopup {
  pointer-events: none;
}

/* The cookie-law-info plugin sets inline background/color on every .cli_settings_button
   via JS (configButtons). Neutralize that for the footer link so it matches the others. */
footer a.cli_settings_button,
footer a.cli_settings_button:hover {
  background-color: transparent !important;
  color: inherit !important;
}

/* === Persistent site footer ======================================================
   The footer is a single body-level <footer>, fixed to the viewport bottom on every
   section. It never scrolls with a slide.

   Desktop: it never changes — the existing footer styles (height/colors/links) apply
   the same way on every section.

   Mobile (<=640px): on non-last sections the footer is collapsed into a compact form
   showing News / Legal / Contact Us in one row. On the last section (body.is-last,
   set by bundle.js's fullpage onLeave) it expands back to the full mobile footer.
   The expand/collapse is animated via max-height + opacity on the items that
   appear/disappear and via padding on the container. */
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

@media screen and (max-width: 640px) {
  /* Footer container: animate padding so the height shift on entering/leaving the
     last slide is smooth. The hidden items themselves are display:none-ed in
     compact mode (see below) — animating their max-height in a flex-row was
     attractive but kept them taking horizontal space (max-height collapses the
     cross axis, not the main axis), which threw off the spacing of the visible
     three links. */
  .footer {
    transition: padding 0.4s ease;
  }
  body:not(.is-last) .footer {
    padding-top: 0.8rem !important;
    padding-bottom: 0.8rem !important;
  }
  body:not(.is-last) .footer .links {
    margin-top: 0 !important;
    /* The footer carries Tailwind's `items-start` (align-items: flex-start),
       so flex children sit at content-width on mobile. Force .links to span
       the full footer width so the inner <ul>'s `width: 100%` actually fills
       the row and `justify-content: space-evenly` has space to distribute. */
    width: 100%;
  }

  /* Compact mode: drop the logo and hide-compact items from the layout entirely,
     and even-distribute the three visible links (Contact Us / News / Legal) across
     the full footer width with equal edge and inter-item spacing. */
  body:not(.is-last) .footer .logo,
  body:not(.is-last) .footer .fl-hide-compact {
    display: none;
  }
  body:not(.is-last) .footer ul {
    flex-direction: row;
    justify-content: space-evenly;
    gap: 0;
    width: 100%;
  }
  body:not(.is-last) .footer ul li {
    margin: 0 !important;
    height: auto !important;
  }
  body:not(.is-last) .footer ul li > a {
    height: auto !important;
  }
}

/* Round brand mark sits above the now-always-present footer on every section.
   Mirrors the existing .homepage.is-last .logo-rounded shifts so the logo is
   raised by the desktop footer height on all desktop sections. On mobile the
   compact footer is short enough that the logo's existing offset is fine. */
.homepage:not(.is-last) .logo-rounded {
  bottom: calc(4.8rem + 12rem);
}
@media screen and (max-width: 1366px) {
  .homepage:not(.is-last) .logo-rounded {
    bottom: calc(2.7rem + 9rem);
  }
}
@media screen and (max-width: 991px) {
  .homepage:not(.is-last) .logo-rounded {
    bottom: calc(2.5rem + 7rem);
  }
}
@media screen and (max-width: 640px) {
  .homepage:not(.is-last) .logo-rounded {
    bottom: 2.5rem;
  }
}