.pl-white-overlay,
.pl-overlay,
.pl-flying-plus,
.pl-overlay-center,
.pl-belt,
.pl-trans-overlay,
.pl-trans-center {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Main page shell must stay visible even if PageLoader throws mid-flight */
body > div:has(> main),
body > div[data-futuron-main-shell="1"] {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

main {
  visibility: visible !important;
  opacity: 1 !important;
}

/* About hero — single white field (reference layout) */
html,
body {
  background-color: #ffffff !important;
}

main > section:first-of-type,
main > section:first-of-type > div {
  background-color: #ffffff !important;
}

main > section:first-of-type {
  min-height: 100dvh;
  background-color: #ffffff !important;
}

/* SSR main shell + React TransitionProvider wrapper */
html.futuron-about-active body > div:has(> main),
html.futuron-about-active body > div[data-futuron-main-shell="1"],
html.futuron-about-active body > div:has(main) {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* About hero must be readable even if GSAP / loader never finishes */
html.futuron-about-active main > section:first-of-type .title-block h1,
html.futuron-about-active main > section:first-of-type .title-block .title,
html.futuron-about-active main > section:first-of-type .title-block .title span,
html.futuron-about-active main > section:first-of-type .banner-scroll,
html.futuron-about-hero-fallback main > section:first-of-type .title-block h1,
html.futuron-about-hero-fallback main > section:first-of-type .title-block .title,
html.futuron-about-hero-fallback main > section:first-of-type .title-block .title span,
html.futuron-about-hero-fallback main > section:first-of-type .banner-scroll {
  visibility: visible !important;
  opacity: 1 !important;
}

html.futuron-about-active main > section:first-of-type > div > div.relative.w-full.overflow-hidden,
html.futuron-about-active main > section:first-of-type > div > div.relative.w-full.overflow-hidden.opacity-0,
html.futuron-about-hero-fallback main > section:first-of-type > div > div.relative.w-full.overflow-hidden.opacity-0,
html.futuron-about-active main > section:first-of-type canvas,
html.futuron-about-hero-fallback main > section:first-of-type canvas.opacity-0 {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Hero headline: dark on white (WebGL black was breaking mix-blend-difference) */
main > section:first-of-type .title-block {
  mix-blend-mode: normal !important;
  z-index: 25 !important;
}

main > section:first-of-type .title-block h1 {
  color: #0f0f0f !important;
}

/* White hero only — solid dark/light pills (about top nav) */
html.futuron-about-hero-inview #nav.site-header {
  mix-blend-mode: normal !important;
  background-color: transparent !important;
}

html.futuron-about-hero-inview #nav.site-header .logo,
html.futuron-about-hero-inview #nav.site-header .logo img {
  mix-blend-mode: normal !important;
}

/* Same full-color asset as gold; dark silhouette on light /about hero */
html.futuron-about-hero-inview #nav.site-header .logo img {
  filter: brightness(0) !important;
}

html.futuron-about-hero-inview #nav.site-header .flex.items-center.gap-2 > button:not(#sound-toggle) {
  background-color: #0f0f0f !important;
  border-color: #0f0f0f !important;
  color: #ffffff !important;
}

html.futuron-about-hero-inview #nav.site-header .flex.items-center.gap-2 > button:not(#sound-toggle) .char,
html.futuron-about-hero-inview #nav.site-header .flex.items-center.gap-2 > button:not(#sound-toggle) span {
  color: #ffffff !important;
}

html.futuron-about-hero-inview #nav.site-header .main-toggle,
html.futuron-about-hero-inview #nav.site-header .menu-toggle {
  background-color: #ffffff !important;
  border-color: #0f0f0f !important;
  color: #0f0f0f !important;
}

html.futuron-about-hero-inview #nav.site-header .main-toggle .char,
html.futuron-about-hero-inview #nav.site-header .main-toggle .title,
html.futuron-about-hero-inview #nav.site-header .main-toggle span,
html.futuron-about-hero-inview #nav.site-header .menu-toggle,
html.futuron-about-hero-inview #nav.site-header .menu-toggle .char {
  color: #0f0f0f !important;
}

html.futuron-about-hero-inview #nav.site-header .main__humburger span,
html.futuron-about-hero-inview #nav.site-header .nav__humburger span,
html.futuron-about-hero-inview #nav.site-header .nav__humburger::before,
html.futuron-about-hero-inview #nav.site-header .nav__humburger::after {
  background-color: #0f0f0f !important;
}

html.futuron-about-hero-inview #nav.site-header #sound-toggle {
  background-color: rgba(15, 15, 15, 0.06) !important;
  color: #0f0f0f !important;
  border: 1px solid rgba(15, 15, 15, 0.15) !important;
}

/* Rest of /about — header inverts with section background */
html.futuron-about-active:not(.futuron-about-hero-inview) #nav.site-header {
  mix-blend-mode: difference !important;
  background-color: transparent !important;
}

html.futuron-about-active:not(.futuron-about-hero-inview) #nav.site-header .logo,
html.futuron-about-active:not(.futuron-about-hero-inview) #nav.site-header .logo img {
  mix-blend-mode: normal !important;
  filter: none !important;
}

html.futuron-about-active:not(.futuron-about-hero-inview) #nav.site-header .flex.items-center.gap-2 > button:not(#sound-toggle) {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: #000000 !important;
}

html.futuron-about-active:not(.futuron-about-hero-inview) #nav.site-header .flex.items-center.gap-2 > button:not(#sound-toggle) .char,
html.futuron-about-active:not(.futuron-about-hero-inview) #nav.site-header .flex.items-center.gap-2 > button:not(#sound-toggle) span {
  color: #000000 !important;
}

html.futuron-about-active:not(.futuron-about-hero-inview) #nav.site-header .main-toggle,
html.futuron-about-active:not(.futuron-about-hero-inview) #nav.site-header .menu-toggle {
  background-color: transparent !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

html.futuron-about-active:not(.futuron-about-hero-inview) #nav.site-header .main-toggle .char,
html.futuron-about-active:not(.futuron-about-hero-inview) #nav.site-header .main-toggle .title,
html.futuron-about-active:not(.futuron-about-hero-inview) #nav.site-header .main-toggle span,
html.futuron-about-active:not(.futuron-about-hero-inview) #nav.site-header .menu-toggle,
html.futuron-about-active:not(.futuron-about-hero-inview) #nav.site-header .menu-toggle .char {
  color: #ffffff !important;
}

html.futuron-about-active:not(.futuron-about-hero-inview) #nav.site-header .main__humburger span {
  background-color: currentColor !important;
}

html.futuron-about-active:not(.futuron-about-hero-inview) #nav.site-header #sound-toggle {
  background-color: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
}

/* Hero subline over lion */
main > section:first-of-type {
  position: relative !important;
}

main > section:first-of-type .futuron-about-hero-subline {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 20% !important;
  z-index: 30 !important;
  mix-blend-mode: normal !important;
  pointer-events: none !important;
}

@media (min-width: 768px) {
  main > section:first-of-type .futuron-about-hero-subline {
    bottom: 22% !important;
  }
}

main > section:first-of-type .futuron-about-hero-subline .futuron-about-hero-subline-text {
  display: block !important;
  max-width: 42rem !important;
  margin: 0 auto !important;
  text-align: center !important;
  font-size: clamp(0.65rem, 1.1vw, 0.875rem) !important;
  letter-spacing: 0.14em !important;
  line-height: 1.5 !important;
  text-transform: uppercase !important;
  color: #141414 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Hero subline + marquee on lion (white + mix-blend invisible on white bg) */
main > section:first-of-type .title-block h1,
main > section:first-of-type .title-block h1.text-\[\#d8d8d8\] {
  visibility: visible !important;
  opacity: 1 !important;
  color: #0f0f0f !important;
  mix-blend-mode: normal !important;
}

main > section:first-of-type span.block.text-white.uppercase,
main > section:first-of-type .text-white.uppercase {
  visibility: visible !important;
  opacity: 1 !important;
  color: #ffffff !important;
  mix-blend-mode: normal !important;
}

main > section:first-of-type .marquee-wrapper,
main > section:first-of-type .marquee-text-item,
main > section:first-of-type div[class*="mix-blend-difference"].opacity-0 {
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
  color: #141414 !important;
}

main > section:first-of-type .banner-scroll,
main > section:first-of-type .banner-scroll .selective-transition,
main > section:first-of-type .banner-scroll .title {
  opacity: 1 !important;
  visibility: visible !important;
  color: #333333 !important;
  mix-blend-mode: normal !important;
}

section.futuron-about-ceo {
  background-color: #040508 !important;
  background-image: url("/images/founder-mobile.webp?v=tariq2") !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: top center !important;
  min-height: 100vh;
}

@media (min-width: 768px) {
  section.futuron-about-ceo {
    background-image: url("/images/founder.webp?v=tariq2") !important;
    background-size: cover !important;
    background-position: top center !important;
    min-height: 100vh;
  }
}

/* Founder / quote block — white quote + bottom row */
section.futuron-about-ceo .flex.justify-between.items-start > h2.max-w-225 {
  color: #ececec !important;
  opacity: 1 !important;
  visibility: visible !important;
}

section.futuron-about-ceo .flex.justify-between.items-start > h2:last-child {
  color: #ececec !important;
  visibility: visible !important;
}

section.futuron-about-ceo .flex.flex-col.md\:flex-row .small.text-light-font {
  color: #d8d8d8 !important;
  visibility: visible !important;
  opacity: 1 !important;
  line-height: 1.55 !important;
}

section.futuron-about-ceo .futuron-about-ceo-callout,
section.futuron-about-ceo span.title.border-l-2 {
  color: #d8d8d8 !important;
  visibility: visible !important;
  opacity: 1 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.45 !important;
  border-left-color: rgba(216, 216, 216, 0.85) !important;
}

section.futuron-about-ceo .flex.flex-col.md\:flex-row {
  align-items: flex-start !important;
  width: 100% !important;
}

@media (min-width: 768px) {
  section.futuron-about-ceo .flex.flex-col.md\:flex-row {
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 3.5rem !important;
  }

  section.futuron-about-ceo .futuron-about-ceo-callout {
    max-width: 16rem !important;
    margin-left: auto !important;
    text-align: left !important;
  }
}

/* About team drag — full person in frame (user videos are not tight portrait crops) */
.ts-center-frame-inner video,
.ts-center-frame-inner > img {
  object-fit: contain !important;
  object-position: center center !important;
}

.vcard .card-inner video,
.vcard .card-inner img {
  object-fit: contain !important;
  object-position: center center !important;
}

.ts-center-frame-inner,
.vcard .card-inner {
  background: #0c0c10 !important;
}