/* About: word marquee hero, partners, sticky people scroller, chronology, mission gallery, ring finale */
.about .sticky-container { background: var(--ink); isolation: isolate; position: relative; }
.h0 { font: 400 16.4rem/.9 var(--serif); letter-spacing: -.055em; }

.a-hero { color: var(--porcelain); min-height: 100vh; padding: 8.25rem 0 6rem; position: relative; width: 100%; }
.a-hero .bg-img-wrap { height: 69rem; isolation: isolate; left: 0; overflow-x: clip; pointer-events: none; position: absolute; top: 0; width: 100%; z-index: 2; }
.a-hero .bg-img-wrap img { height: 100%; left: 0; object-position: 50% 30%; position: absolute; top: 0; transform: translateY(3.125rem); }
.a-hero .bg-img-wrap::before { background: var(--fade-ink); bottom: 0; content: ""; height: 32.375rem; left: 0; position: absolute; width: 100%; z-index: 1; }
.a-hero .bg-img-wrap::after { background: var(--ink); content: ""; height: 15rem; left: 0; position: absolute; top: 100%; width: 100%; z-index: 1; }
.top-text { color: var(--porcelain-60); left: 50%; position: absolute; text-align: center; top: 1.75rem; transform: translate(-50%); width: 14rem; z-index: 3; }
.top-text::first-line { color: var(--porcelain); }
.words { mix-blend-mode: lighten; overflow: hidden; position: relative; z-index: 3; }
.words-track { display: flex; gap: 5rem; width: max-content; will-change: transform; }
.word { color: var(--porcelain); white-space: nowrap; }
.a-hero .small-description { color: var(--porcelain-60); left: 45rem; position: absolute; top: 64.875rem; width: 14.75rem; z-index: 3; }
.a-hero .description { color: rgba(236, 233, 227, .18); margin: 63.25rem 0 0 14.375rem; position: relative; width: 56rem; z-index: 2; }

.founders { background: var(--ink); overflow: hidden; padding: 3.75rem 2rem; position: relative; width: 100%; }
.founders .top-text { color: var(--porcelain); margin: 0 auto; position: relative; left: auto; top: auto; transform: none; width: 12rem; }
.founders .title { color: var(--porcelain); margin-top: 6rem; position: relative; text-align: center; width: 100%; }
.grid-founders { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, 1fr); margin-top: 6rem; }
.card-founder { align-items: center; aspect-ratio: .73; background: #f6f4f0; border-radius: 1.875rem; cursor: pointer; display: flex; flex-direction: column; overflow: hidden; padding-top: 1.5rem; position: relative; transition: background .35s var(--ease); width: 100%; }
.card-founder::before { background: var(--fade-ink); bottom: 0; content: ""; height: 16.5rem; left: 0; opacity: 0; position: absolute; transform: translateY(100%); transition: all .35s var(--ease); width: 100%; z-index: 1; }
.card-founder .position { color: var(--slate-60); margin-bottom: 1rem; transition: color .35s var(--ease); }
.card-founder .name { color: var(--slate); transition: color .35s var(--ease); white-space: nowrap; }
.founder-card-img { height: auto; margin-top: auto; object-fit: cover; width: 100%; aspect-ratio: 1; object-position: 50% 20%; -webkit-mask: linear-gradient(180deg, transparent 0, #000 22%); mask: linear-gradient(180deg, transparent 0, #000 22%); }
.card-founder .small-description { bottom: 5.375rem; color: var(--porcelain); left: 50%; opacity: 0; position: absolute; text-align: center; text-wrap: balance; transform: translate(-50%); transition: opacity .35s ease-out; width: 16rem; z-index: 2; }
.btn-read-more { bottom: 1.5rem; left: 50%; position: absolute; transform: translate(-50%); z-index: 2; }
.card-founder .tlink { --link-color: var(--porcelain); }
@media (hover: hover) {
  .card-founder:hover, .card-founder:focus-visible { background: #0b100e; }
  .card-founder:hover::before, .card-founder:focus-visible::before { opacity: 1; transform: none; }
  .card-founder:hover .name, .card-founder:hover .position { color: var(--porcelain); }
  .card-founder:hover .small-description { opacity: 1; }
}

.skilled { background: var(--ink); isolation: isolate; padding-top: 6rem; position: relative; width: 100%; color: var(--porcelain); }
.skilled .bg-image-wrap { height: 82.75rem; left: 0; overflow-x: clip; position: absolute; top: 0; width: 100%; z-index: -1; }
.skilled .bg-image { height: 82.75rem; left: -36rem; position: absolute; top: -6rem; width: 173.5rem; max-width: none; animation: skSpin 40s linear infinite; }
@keyframes skSpin { to { transform: rotate(360deg); } }
.top-details-wrap { align-items: flex-start; display: flex; justify-content: space-between; padding: 0 2rem; position: relative; }
.skilled .description { color: var(--porcelain); width: 35.5rem; }
.top-details { align-items: flex-start; display: flex; justify-content: space-between; position: relative; width: 43rem; }
.skilled .small-description { color: rgba(236, 233, 227, .2); width: 9.125rem; }
.slide-counter { align-items: flex-end; color: var(--porcelain); display: flex; gap: 1rem; }
.associates-wrap { align-items: center; display: flex; gap: 1.5rem; justify-content: center; margin-top: 6rem; padding: 0 2rem; }
.specialist { aspect-ratio: .7; background: #0b100e; border-radius: 1.875rem; cursor: pointer; display: flex; flex: 1; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 1.5rem; position: relative; color: var(--porcelain); }
.specialist img { inset: 0; position: absolute; transition: transform .6s var(--ease); }
.specialist::after { background: var(--fade-ink); bottom: 0; content: ""; height: 60%; left: 0; position: absolute; width: 100%; }
.specialist > span { position: relative; z-index: 1; }
.sp-pos { color: var(--porcelain-60); }
.sp-name { margin: .5rem 0 1rem; }
@media (hover: hover) { .specialist:hover img { transform: scale(1.06); } }
.people { position: relative; }
.people .sticky { height: 100vh; overflow: hidden; position: sticky; top: 0; width: 100%; }
.people .sticky::before { background: var(--fade-ink); bottom: 0; content: ""; height: 28rem; left: 0; pointer-events: none; position: absolute; width: 100%; z-index: 1; }
.wrap-job-positions { left: 2rem; position: absolute; top: calc(35vh + 3rem); z-index: 1; }
.job-position { color: var(--porcelain); left: 0; opacity: 0; position: absolute; top: 0; transform: translateY(1rem); width: 20rem; transition: all .35s var(--ease); }
.job-position.active { opacity: 1; transform: none; }
.people .wrap-avatars { background: #0b100e; border-radius: 1.875rem; height: 26.75rem; left: 23.875rem; overflow: hidden; position: absolute; top: calc(35vh - 6.75rem); width: 20.375rem; z-index: 1; }
.people .wrap-avatars img { inset: 0; opacity: 0; position: absolute; transform: scale(1.1); transition: all .4s var(--ease) .3s; }
.people .wrap-avatars img.active { opacity: 1; transform: scale(1); transition-delay: 0s; }
.scroller-panel { border-bottom: 1px solid var(--porcelain-15); color: var(--porcelain-60); display: grid; grid-template-columns: 1fr 36.625rem; left: 2rem; padding-bottom: 1rem; position: absolute; top: 35vh; transform: translateY(-100%); width: calc(100% - 4rem); }
.specialists-wrapper { height: 65vh; overflow: hidden; position: absolute; right: 2rem; top: 35vh; width: 36.625rem; }
.specialists-scroller { display: flex; flex-direction: column; width: 100%; will-change: transform; }
.specialist-item { align-items: center; color: var(--porcelain); display: flex; justify-content: space-between; opacity: .3; padding: 3rem 0; position: relative; transition: opacity .35s var(--ease); height: 9.1rem; }
.specialist-item:not(:first-child)::before { background: rgba(236, 233, 227, .15); content: ""; height: 1px; left: 0; position: absolute; top: 0; width: 100%; }
.specialist-item.active { opacity: 1; }
.slide-anim-plash { height: 30vh; } .pause-anim-slide { height: 10vh; }
.skilled .mobile-list { display: none; }

.chronology { position: relative; width: 100%; color: var(--porcelain); }
.chronology .sticky { display: flex; gap: 1rem; height: 100vh; justify-content: space-between; padding: 2rem; position: sticky; top: 0; width: 100%; }
.chronology .left { height: 100%; overflow: hidden; position: relative; width: 30.625rem; flex: none; border-radius: .25rem; }
.wrap-slide-image { height: 100%; left: 0; overflow: hidden; position: absolute; top: 0; width: 100%; }
.wrap-slide-image:not(:first-child) { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); }
.chronology .right { flex: 1; height: 100%; position: relative; }
.years { left: 0; position: absolute; top: 15.25rem; height: 20rem; overflow: hidden; }
.years-scroller { color: var(--porcelain-40); display: flex; flex-direction: column; gap: 2rem; will-change: transform; }
.year-point { transition: color .5s var(--ease); }
.year-point.active { color: var(--porcelain); }
.content-slides { left: 12.375rem; list-style: none; position: absolute; top: 15.25rem; width: 22.625rem; }
.content-slides::before { background: #d9d9d9; border-radius: 1.25rem; content: ""; height: 1.25rem; left: 0; position: absolute; top: -.25rem; width: .125rem; }
.highlight-line { background: linear-gradient(180deg, #ece9e3, transparent); height: 27.75rem; left: 0; opacity: .12; position: absolute; top: -2rem; width: .125rem; }
.text-slide { color: var(--porcelain); display: flex; flex-direction: column; gap: 2rem; left: 1.5rem; opacity: 0; pointer-events: none; position: absolute; top: 0; transform: translateY(1rem); width: 100%; transition: all .65s var(--ease); }
.text-slide .c3 { color: var(--porcelain-60); }
.text-slide.active { opacity: 1; pointer-events: auto; transform: none; }
.bottom-text { align-items: flex-end; bottom: 0; display: flex; gap: .5rem; left: 13.875rem; position: absolute; }
.small-text { color: var(--porcelain-60); transform: translateY(-.25rem); }
.small-text b { color: var(--porcelain); font-weight: 500; }
.skip-btn { align-items: center; bottom: 0; color: var(--porcelain); display: flex; gap: .25rem; position: absolute; right: 0; }
.wrap-arrow { height: .75rem; width: .75rem; transition: transform .3s var(--ease); }
@media (hover: hover) { .skip-btn:hover .wrap-arrow { transform: translateY(.2rem); } }
.slide-plash { height: 35vh; } .slide-pause { height: 15vh; }
.chronology .mobile-content { display: none; }

.chrono-fake, .mission-photo { height: calc(100vh - 4rem); left: 2rem; overflow: hidden; pointer-events: none; position: fixed; top: 2rem; transform-origin: top right; width: 30.625rem; z-index: 3; visibility: hidden; border-radius: .25rem; }
.mission-photo { position: absolute; transform: scale(var(--e, .44)); }
.mission { background: var(--porcelain); min-height: 100vh; padding: 16rem 0 2rem; position: relative; color: var(--slate); z-index: 1; }
.title-wrap { color: var(--slate); display: block; margin: 0 2rem; }
.title-wrap span { display: inline-block; }
.title-wrap .line.n1 { margin-left: 43rem; }
.title-wrap .line.n2 { display: flex; justify-content: space-between; width: 100%; }
.title-wrap .line.n3 { margin-left: 34rem; }
.mission .wrap-details { align-items: flex-start; color: var(--slate); display: grid; grid-template-columns: 43rem 1fr; margin: 6rem 0 2.5rem; padding: 0 2rem; position: relative; }
.mission .wrap-details .c2 { color: var(--slate-60); }
.mission .description { width: 18.875rem; }
.wrap-slider { position: relative; width: 100%; }
.m-swiper { overflow: hidden; width: 100%; }
.m-wrapper { display: flex; gap: .5rem; transition: transform .65s var(--ease); will-change: transform; }
.m-slide { aspect-ratio: .82; flex: none; overflow: hidden; width: 21rem; border-radius: .25rem; }
.m-slide img { transition: transform .65s var(--ease); }
.slide-btn-prev, .slide-btn-next { left: 2rem; position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; }
.slide-btn-next { left: auto; right: 2rem; }
.wrap-inst { --link-color: var(--slate); align-items: flex-end; bottom: -4rem; color: var(--slate-60); display: flex; flex-direction: column; position: absolute; right: 2rem; z-index: 2; }

.join-our-team { position: relative; z-index: 4; }
.join-our-team .sticky { height: 100vh; isolation: isolate; margin-bottom: -100vh; overflow: hidden; pointer-events: none; position: sticky; top: 100vh; transform: translateY(-100vh); width: 100%; z-index: 1; }
.join-our-team .canvas { height: 100%; left: 0; opacity: 0; position: absolute; top: 0; visibility: hidden; width: 100%; }
.join-our-team .text { color: var(--porcelain); mix-blend-mode: difference; opacity: 0; position: absolute; top: 50%; transform: translateY(-50%); z-index: 0; }
.join-our-team .text.left { left: 2rem; } .join-our-team .text.right { right: 2rem; }
.title1, .title2, .title3 { color: var(--porcelain); left: 50%; mix-blend-mode: difference; opacity: 0; position: absolute; text-align: center; top: 50%; transform: translate(-50%, -50%); visibility: hidden; width: 18.625rem; z-index: 3; }
.title2 { width: 11.875rem; } .title3 { width: 10.125rem; }
.fake-circle, .fake-circle-inner { background: #fff; border-radius: 50%; filter: blur(2.5px); left: 50%; opacity: 0; position: absolute; top: 50%; transform: translate(-50%, -50%); }
.fake-circle { z-index: 1; }
.fake-circle-inner { mix-blend-mode: difference; z-index: 2; }
.final-content { align-items: center; color: var(--slate); display: flex; flex-direction: column; gap: 2rem; left: 50%; opacity: 0; pointer-events: auto; position: absolute; top: 50%; transform: translate(-50%, -50%); visibility: hidden; z-index: 4; }
.final-content .small-text { color: var(--slate-60); text-align: center; width: 9.5rem; transform: none; }
.final-title { text-align: center; white-space: nowrap; }
.join-our-team .sticky-plash { height: 100vh; pointer-events: none; position: relative; z-index: -1; }
.anim-plash-rings { height: 300vh; pointer-events: none; position: relative; z-index: -1; }
.sticky-final-pause { height: 10vh; }
.j-mobile { display: none; }
.white-plash { background: #fff; height: 14rem; position: relative; width: 100%; }
.about .footer { z-index: 5; }

.spec-modal { background: var(--ink); color: var(--porcelain); display: flex; height: 100dvh; left: 0; overflow: auto; overscroll-behavior: none; position: fixed; top: 0; transform: translateY(100%); visibility: hidden; width: 100%; z-index: 14; }
.sm-left { height: 100dvh; left: 0; position: sticky; top: 0; width: 50%; flex: none; background: #0b100e; }
.sm-left::after { background: rgba(255, 255, 255, .2); content: ""; height: 100%; position: absolute; right: 0; top: 0; width: 2px; }
.sm-left::before { background: var(--porcelain); content: ""; height: 100%; position: absolute; right: 0; top: 0; transform: scaleY(var(--sp, 0)); transform-origin: top; transition: transform .1s linear; width: 2px; z-index: 1; }
.sm-right { min-height: 120vh; position: relative; width: 50%; padding: 3rem 2rem 3rem 6.375rem; }
.sm-top { align-items: center; display: flex; justify-content: space-between; }
.sm-loc { align-items: center; display: flex; gap: .375rem; }
.sm-loc .pin { border: 1.5px solid currentColor; border-radius: 50% 50% 50% 0; height: .8rem; transform: rotate(-45deg); width: .8rem; }
.spec-modal .x-circle { background: var(--porcelain); }
.spec-modal .btn-x { color: var(--porcelain); }
.sm-details { margin-top: 12.5rem; }
.sm-pos { color: var(--porcelain-60); margin-top: .75rem; }
.sm-bio { margin-top: 4rem; width: 20.5rem; }
.sm-bio p + p { margin-top: 1rem; }
.sm-exp { bottom: 2rem; position: sticky; text-align: right; margin-top: 6rem; }
.sm-exp span { color: var(--porcelain-60); }

@media (max-width: 1023px) {
  .h0 { font-size: 5.5rem; }
  .a-hero { align-items: center; display: flex; flex-direction: column; overflow: hidden; padding: 6.375rem 0 1.5rem; }
  .top-text { left: auto; position: relative; top: auto; transform: none; width: 10rem; }
  .a-hero .bg-img-wrap { height: 18rem; top: 15rem; }
  .a-hero .bg-img-wrap img { transform: none; }
  .a-hero .bg-img-wrap::before { display: none; }
  .a-hero .bg-img-wrap::after { background: var(--fade-ink); bottom: 0; height: 8rem; top: auto; }
  .words { margin-top: 3.25rem; width: 100%; }
  .words-track { gap: 2rem; }
  .a-hero .small-description { left: auto; margin: 16rem 1rem 0 auto; position: relative; top: auto; width: 10.75rem; }
  .a-hero .description { margin: 5.5rem 0 0; width: calc(100% - 2rem); }
  .founders { padding: 3rem 1rem; }
  .founders .title { margin-top: 4.5rem; }
  .grid-founders { display: flex; flex-direction: column; margin-top: 3rem; }
  .card-founder { aspect-ratio: .69; }
  .card-founder .small-description { display: none; }
  .skilled { padding-top: 4rem; }
  .skilled .bg-image-wrap, .top-details, .associates-wrap, .people { display: none; }
  .top-details-wrap { padding: 0 1rem; }
  .skilled .description { width: 100%; }
  .skilled .mobile-list { display: grid; gap: 2rem 1.125rem; grid-template-columns: 1fr 1fr; padding: 4rem 1rem; }
  .list-item-mob .image-wrap { aspect-ratio: .73; background: #0b100e; border-radius: 1.25rem; overflow: hidden; }
  .list-item-mob .details { display: flex; flex-direction: column; gap: .25rem; margin-top: 1rem; }
  .list-item-mob .details .c2 { color: var(--porcelain-60); }
  .chronology .sticky { display: block; height: auto; padding: 3rem 0 7rem; position: relative; }
  .chronology .left, .chronology .right, .chronology .sticky-plash { display: none; }
  .chronology .mobile-content { display: block; }
  .m-chrono { overflow: hidden; padding: 0 1rem; }
  .m-track { display: flex; gap: 1rem; transition: transform .8s var(--ease); }
  .m-track img { aspect-ratio: .8; flex: none; width: 80%; height: auto; }
  .thumb-slider { margin-top: 1.5rem; overflow: hidden; position: relative; }
  .line-wrapper { display: flex; gap: 2.875rem; padding: .75rem 0 0 1rem; position: relative; transition: transform .5s var(--ease); width: max-content; }
  .line-wrapper::before { background: var(--porcelain-15); border-radius: .625rem; content: ""; height: .25rem; left: 1rem; position: absolute; top: 0; width: calc(100% - 1rem); }
  .active-plash { background: var(--porcelain); border-radius: .625rem; height: .25rem; left: 1rem; position: absolute; top: 0; transform: translate(calc(var(--active, 0) * 7.125rem)); transition: transform .5s var(--ease); width: 4.25rem; z-index: 1; }
  .thumb-slider .point { align-items: center; color: var(--porcelain-60); display: flex; flex-direction: column; width: 4.25rem; }
  .thumb-slider .point.active { color: var(--porcelain); }
  .m-text { padding: 2rem 1rem 0; min-height: 8rem; }
  .mission { overflow: hidden; padding: 3.5rem 0; }
  .title-wrap { align-items: center; display: flex; flex-direction: column; margin: 0 1rem; text-align: center; }
  .title-wrap .line.n1, .title-wrap .line.n3 { margin-left: 0; }
  .title-wrap .line.n2 { flex-direction: column; align-items: center; }
  .mission .wrap-details { display: block; margin: 0; padding: 0; }
  .mission .wrap-details .c2 { display: none; }
  .mission .description { margin: 2.5rem auto 0; text-align: center; width: 20.875rem; }
  .wrap-slider { margin-top: 4.5rem; }
  .m-slide { width: 16rem; }
  .slide-btn-prev, .slide-btn-next { display: none; }
  .wrap-inst { align-items: center; bottom: auto; margin-top: 2rem; position: relative; right: auto; }
  .join-our-team { overflow: hidden; }
  .chrono-fake, .mission-photo { display: none; }
  .join-our-team .sticky, .join-our-team .sticky-plash, .anim-plash-rings, .sticky-final-pause, .white-plash { display: none; }
  .j-mobile { align-items: center; background: #000; display: flex; flex-direction: column; min-height: 46.875rem; padding: 5rem 1rem; position: relative; overflow: hidden; }
  .j-mobile::before { background: radial-gradient(circle, transparent 38%, #fff 40%, #fff 58%, transparent 60%); content: ""; filter: blur(.4rem); height: 38rem; left: 50%; position: absolute; top: 14rem; transform: translate(-50%); width: 38rem; }
  .j-mobile .mob-title { color: #fff; position: relative; text-align: center; width: 17.6rem; }
  .j-details { align-items: center; color: #000; display: flex; flex-direction: column; left: 50%; position: absolute; top: 26rem; transform: translate(-50%); width: 18rem; text-align: center; }
  .j-details .sub-title { margin: 1rem 0 2rem; }
  .spec-modal { flex-direction: column; }
  .sm-left { height: 26rem; position: relative; width: 100%; }
  .sm-right { min-height: auto; padding: 2rem 1rem 3rem; width: 100%; }
  .sm-top { position: fixed; right: 1rem; top: 1rem; z-index: 3; } .sm-loc { display: none; }
  .sm-details { margin-top: 0; text-align: center; }
  .sm-bio { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .skilled .bg-image { animation: none; } }