/* Home: hero split → film takeover, goal, services pin, banner, technology list, team, why-us circles, testimonials, pre-footer */

/* ---------- hero ---------- */
.hero { background: var(--porcelain); position: sticky; top: var(--hero-sticky-top, 0); z-index: 0; }
.hero .sticky { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100%; height: 100vh; overflow: hidden; position: sticky; top: 0; width: 100%; }
.hero .left { color: var(--slate); height: 100%; position: relative; width: 100%; }
.hero .blur-overlay { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgba(17, 24, 22, .5); height: 100%; left: 0; opacity: 0; position: absolute; top: 0; visibility: hidden; width: 100%; z-index: 1; }
.based-in { bottom: 2rem; color: var(--slate); left: 2rem; position: absolute; z-index: 1; }
.based-in-title { margin-bottom: .75rem; opacity: .8; }
.based-in .location-item { display: block; margin-top: .25rem; width: max-content; transition: opacity .3s var(--ease); }
@media (hover: hover) { .based-in .location-item:hover { opacity: .55; } }
.wrap-titles { align-items: center; display: flex; flex-direction: column; justify-content: center; left: 0; position: absolute; top: 0; transform: translateY(calc(50vh - 50% - 4rem)); width: 100%; z-index: 2; pointer-events: none; }
.wrap-titles > span { display: block; }
.wrap-titles.static { clip-path: inset(0 0 -1.5rem 50%); color: #fff; }
.wrap-titles.black { clip-path: inset(0 50% 0 0); color: var(--slate); }
.with-gap { display: flex !important; gap: 3.2rem; margin-top: .625rem; transform: translate(1.75rem); }
.anim-line1, .anim-line2 { opacity: 0; }
.video-description { bottom: 2rem; color: var(--porcelain); position: absolute; right: 2rem; text-align: right; width: 14rem; z-index: 2; }
.video-description b { color: var(--porcelain); font-weight: 700; opacity: .7; }
.hero .description { bottom: 2rem; color: var(--porcelain); left: calc(50vw + 2rem); position: absolute; width: 17rem; z-index: 2; }
.hero .right { background: var(--ink); height: 100%; isolation: isolate; left: 0; overflow: hidden; position: absolute; top: 0; transform: translate(50%, 0); width: 100%; z-index: 1; }
.video-preview { height: 100%; left: 0; overflow: hidden; position: absolute; top: 0; width: 100%; z-index: -1; }
.video-preview::after { background: rgba(17, 24, 22, .28); content: ""; inset: 0; position: absolute; }
.video-el { height: 100%; object-fit: cover; width: 100%; background: #20251f url(../media/video/hero-poster.webp) center/cover; }
.hero .right-title { -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(90deg, #eeeae4 var(--start-gradient, 0%), rgba(238, 234, 228, 0) var(--stop-gradient, 50%)); opacity: 0; padding: 1.5rem 0; position: absolute; right: 2rem; top: 50%; transform: translate(50vw, -50%); -webkit-text-fill-color: transparent; white-space: nowrap; width: max-content; }
.bottom-tips { align-items: center; color: var(--porcelain); display: flex; justify-content: space-between; position: absolute; right: 2rem; top: calc(50% + 8rem); transform: translateY(-50%); width: calc(100vw - 4rem); }
.bottom-tips p { opacity: 0; }
.hero .sticky-plash { height: 180vh; }
.mob-content, .mobile-overlay, .sticky-plash-mobile, .mobile-under-content { display: none; }

/* ---------- our goal ---------- */
.our-goal { align-items: flex-start; background: var(--porcelain); display: flex; justify-content: space-between; padding: 12rem 2rem; position: sticky; top: var(--our-goal-top, 0); width: 100%; z-index: 1; }
.our-goal .left { padding-top: 19.5rem; }
.our-goal .right { width: 43rem; }
.about-team { align-items: flex-start; display: flex; height: 7.375rem; justify-content: space-between; }
.about-team .description { width: 15.875rem; }
.wrap-avatars { display: flex; }
.avatar, .avatar-empty { align-items: center; background: #dad3c9; border: 3px solid var(--porcelain); border-radius: 50%; display: flex; flex: none; height: 5.875rem; justify-content: center; opacity: 0; overflow: hidden; position: relative; width: 5.875rem; }
.avatar img { object-position: top; }
.avatar-empty { gap: .1rem; color: var(--slate); --icon-color: var(--ink); }
.avatar-empty .ico { height: .875rem; width: .875rem; }
.our-goal .right-title { color: rgba(17, 24, 22, .15); margin: 12rem 0 4rem; text-wrap: balance; }
.our-goal .right-title-mob { display: none; }
.btn-about { display: inline-flex; }
.goal-anchor { height: 22rem; left: 24.125rem; position: absolute; top: 7.625rem; width: 14.375rem; pointer-events: none; }
.overlay-goal { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(17, 24, 22, .5); bottom: 0; height: 150vh; left: 0; opacity: 0; pointer-events: none; position: absolute; visibility: hidden; width: 100%; }

/* fake service image that grows from the goal card into the services' left half */
.fake-service-image { height: 22rem; left: 0; overflow: hidden; pointer-events: none; position: fixed; top: 0; visibility: hidden; width: 14.375rem; z-index: 2; will-change: width, height, transform; }
.fake-service-image::before, .services .left::before { background: linear-gradient(180deg, rgba(17, 24, 22, 0), #0d1311); bottom: 0; content: ""; height: 59%; left: 0; position: absolute; width: 100%; z-index: 1; }

/* ---------- services ---------- */
.services { position: relative; z-index: 2; }
.services .sticky { background: var(--ink); display: flex; height: 100vh; isolation: isolate; position: sticky; top: 0; width: 100%; }
.services .left { height: 100%; opacity: 0; overflow: hidden; position: relative; width: 50%; }
.services .left .slide-wrap { height: 100%; left: 0; overflow: hidden; position: absolute; top: 0; width: 100%; }
.services .left .slide-wrap:not(:first-child) { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); }
.services .right { height: 100%; position: relative; width: 50%; z-index: 2; }
.solutions { color: var(--porcelain); position: absolute; right: 2rem; top: 1.75rem; width: 24.25rem; }
.description-slide { color: var(--porcelain); opacity: 0; position: absolute; right: 2rem; top: 7rem; visibility: hidden; width: 24.25rem; }
.description-slide[data-idx="0"] { opacity: 1; visibility: visible; }
.slider-place { align-items: flex-start; display: flex; height: 15.25rem; justify-content: space-between; position: absolute; right: 2rem; top: 13rem; width: 24.25rem; }
.wrap-slides { height: 100%; overflow: hidden; position: relative; width: 10.25rem; }
.wrap-slides .slide { height: 100%; left: 0; overflow: hidden; position: absolute; top: 0; width: 100%; }
.wrap-slides .slide:not(:first-child) { opacity: 0; }
.wrap-procedures { height: 100%; position: relative; width: 11.875rem; }
.procedures-slide { border-top: 1px solid var(--porcelain-15); height: 100%; left: 0; opacity: 0; position: absolute; top: 0; visibility: hidden; width: 100%; }
.procedures-slide[data-idx="0"] { opacity: 1; visibility: visible; }
.procedure { align-items: center; border-bottom: 1px solid var(--porcelain-15); color: var(--porcelain); display: flex; justify-content: space-between; padding: .75rem 0; width: 100%; }
.procedure-name { color: var(--porcelain); width: 9.375rem; }
.title-slides-wrap { bottom: 2rem; left: 50%; pointer-events: none; position: absolute; transform: translate(-50%); width: 40rem; z-index: 3; }
.title-slide { bottom: 0; color: var(--porcelain); left: 0; opacity: 0; position: absolute; text-align: center; visibility: hidden; width: 100%; }
.title-slide[data-idx="0"] { opacity: 1; visibility: visible; }
.slides-nav { bottom: 2rem; display: grid; gap: .125rem; justify-items: start; left: 2rem; position: absolute; z-index: 3; }
.block-name { color: var(--porcelain); margin-bottom: 2rem; }
.slide-btn { color: var(--porcelain-60); text-align: left; transition: color .3s var(--ease); }
.slide-btn.active, .slide-btn:hover { color: var(--porcelain); }
.learn-more { bottom: 2rem; position: absolute; right: 2rem; z-index: 3; }
.slide-part { height: 75vh; }
.pause-slides { height: 40vh; }
.wrap-mobile-content { display: none; }

/* ---------- banner ---------- */
.banner { height: 75.125rem; overflow: hidden; position: relative; width: 100%; z-index: 2; background: var(--ink); }
.banner .content { height: 100%; isolation: isolate; overflow: hidden; position: relative; width: 100%; }
.banner .bg { height: 100%; left: 0; position: absolute; top: 0; transform: translateY(-20vh); width: 100%; }
.banner .bg::before { background: linear-gradient(180deg, rgba(17, 24, 22, 0), #0d1311); bottom: 0; content: ""; height: 29.5rem; left: 0; position: absolute; width: 100%; z-index: 1; }
.bottom-grid { bottom: 2rem; color: var(--porcelain); display: grid; grid-template-columns: repeat(3, 1fr); left: 2rem; position: absolute; width: calc(100% - 4rem); z-index: 2; }
.bottom-grid p { text-align: center; }
.bottom-grid p:first-child { grid-area: 1 / 1 / 2 / 4; opacity: .6; }
.bottom-grid p:nth-child(2) { text-align: left; } .bottom-grid p:nth-child(4) { text-align: right; }

/* ---------- technology ---------- */
.technology { background: var(--porcelain); color: var(--slate); padding: 13.5rem 2rem 0; position: relative; width: 100%; z-index: 2; }
.sticky-title { color: var(--porcelain); left: 50%; position: absolute; text-align: center; top: 0; transform: translate(-50%, calc(-100% - 6rem)); width: 100%; z-index: 3; white-space: nowrap; }
.sticky-title p { padding-bottom: 1.5rem; }
.sticky-title .dark { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); color: var(--ink); left: 0; position: absolute; top: 0; width: 100%; }
.technology .title { display: block; width: 100%; }
.title-line { align-items: center; display: flex; justify-content: space-between; }
.title-line:nth-child(3) { justify-content: center; }
.technology .sticky { height: 100vh; left: 0; position: sticky; top: 0; width: 100%; }
.technology .counter { align-items: flex-end; display: flex; left: 0; position: absolute; top: 50%; transform: translateY(-50%); gap: .5rem; }
.technology .counter p:last-child { margin-bottom: .2rem; }
.images-slider { height: 29.5rem; overflow: hidden; position: absolute; right: 42.875rem; top: 50%; transform: translateY(-50%); width: 24.75rem; background: #000; }
.slide-img { inset: 0; opacity: 0; position: absolute; transform: scale(1.1); transition: opacity .4s var(--ease) .3s, transform .4s var(--ease) .3s; }
.slide-img.active { opacity: 1; transform: scale(1); transition-delay: 0s; }
.small-title { color: var(--slate-60); position: absolute; right: 0; top: 35%; transform: translateY(calc(-100% - 1rem)); width: 36.5rem; }
.slide-list { border-top: 1px solid var(--slate-10); height: 65%; overflow: hidden; position: absolute; right: 0; top: 35%; width: 36.5rem; }
.list-scroller { display: flex; flex-direction: column; width: 100%; }
.list-item { border-bottom: 1px solid var(--slate-10); padding: 3rem 0; position: relative; width: 100%; }
.list-item .opacity { opacity: .3; transition: opacity .3s var(--ease); }
.list-item.active .opacity { opacity: 1; }
.list-item-link { position: absolute !important; right: 0; top: 3rem; }
.technology-plash { height: 35vh; }
.technology .mob-content { display: none; }

/* ---------- experts ---------- */
.experts { background: var(--ink); display: flex; flex-direction: column; height: 95rem; overflow: hidden; padding-top: 49.375rem; position: relative; width: 100%; z-index: 2; }
.experts-bg-wrap { height: 67.75rem; left: 0; overflow: hidden; position: absolute; top: 0; width: 100%; z-index: 0; }
.experts-bg { animation: spin 50s linear infinite; height: 101.8125rem; left: 50%; position: absolute; top: 50%; transform: translate(-17.875rem, -23rem) rotate(-123deg); width: 104.5rem; }
@keyframes spin { 0% { transform: translate(-75%, -75%) rotate(0); } 25% { transform: translate(-50%, -50%) rotate(90deg); } 50% { transform: translate(-25%, -25%) rotate(180deg); } 75% { transform: translate(-50%, -10%) rotate(270deg); } to { transform: translate(-75%, -75%) rotate(1turn); } }
.experts-img { height: 83.75rem; left: 0; object-fit: cover; object-position: 50% 30%; position: absolute; top: 7.5rem; transform: translate(-5.375rem, -10vh); width: 104.75rem; z-index: 2; max-width: none; }
.experts-overlay { background: var(--fade-ink); height: 66.375rem; left: 0; position: absolute; top: 25rem; transform: translateY(-10vh); width: 100%; z-index: 2; }
.experts .title { color: var(--porcelain); left: 50%; mix-blend-mode: color-dodge; position: absolute; top: 4rem; transform: translate(-50%); white-space: nowrap; z-index: 3; }
.mob-br { display: none; }
.about-teammates { display: grid; grid-template-columns: 42.5rem 31.125rem 1fr; padding: 0 2rem; position: relative; z-index: 3; }
.teammate { color: var(--porcelain); display: grid; gap: 1.5rem; align-content: start; }
.teammate:first-child { width: 13rem; } .teammate:nth-child(2) { width: 12.5rem; } .teammate:nth-child(3) { width: 14rem; }
.teammate .job-title { color: var(--porcelain-60); margin-top: .25rem; }
.meet-teammates-wrap { color: var(--porcelain); display: grid; grid-template-columns: 42.5rem 1fr; margin-bottom: 4rem; margin-top: auto; padding: 0 2rem; position: relative; z-index: 3; }
.small-description { color: var(--porcelain-60); width: 14.75rem; }
.small-description b { color: var(--porcelain); font-weight: 600; }
.main-description { width: 36rem; }
.print-texts { display: inline-block; position: relative; }
.fake-text { display: inline-block; opacity: 0; pointer-events: none; visibility: hidden; }
.inner-text { align-items: center; display: flex; height: 100%; left: 0; position: absolute; top: 0; white-space: pre; width: max-content; }
.inner-text::after { animation: blink 1s step-start infinite; background: var(--porcelain); content: ""; height: 100%; margin-left: .375rem; position: relative; top: .25rem; width: .125rem; }
@keyframes blink { 50% { opacity: 0; } }
.btn-meet-team { margin-top: 4rem; }

/* ---------- why choose us ---------- */
.wrap-anim-bg { background: var(--ink); position: relative; z-index: 2; }
.why-choose { position: relative; }
.why-choose .sticky { height: 150vh; isolation: isolate; overflow: hidden; position: sticky; top: 0; width: 100%; }
.left-circle, .right-circle { height: 100vh; left: 0; position: absolute; top: 50vh; transform: translate(-50%, -50%); transform-origin: center right; width: 100vh; will-change: transform; }
.right-circle { left: auto; right: 0; transform: translate(50%, -50%); transform-origin: center left; }
.ring-svg { height: 100%; width: 100%; }
.balls-stage { inset: 0; pointer-events: none; position: absolute; }
.wrap-title { color: var(--porcelain); left: 2rem; position: absolute; top: 50vh; transform: translateY(-50%); width: calc(100% - 4rem); z-index: 2; }
.wrap-title .first-line { display: flex; justify-content: space-between; position: relative; width: 100%; }
.wrap-title .second-line { display: block; padding-left: 20rem; }
.wrap-title .small-tip { display: block; left: 50%; position: absolute; text-align: center; top: 50%; transform: translate(-50%, -10%); width: 6.25rem; }
.why-choose .sticky-plash { height: 100vh; transform: translateY(-50vh); }
.mobile-wrap { display: none; }
.ball-dom { align-items: center; background: var(--bg); border-radius: 50%; color: var(--tx); display: flex; flex-direction: column; gap: .4rem; justify-content: center; left: 0; position: absolute; text-align: center; top: 0; will-change: transform; }
.ball-dom .c3 { max-width: 6rem; }
.ball-dom .h3 { font-size: 3.4rem; }

/* ---------- testimonials ---------- */
.testimonials { color: var(--porcelain); padding: 10.5rem 2rem 6rem; position: relative; width: 100%; }
.wrap-content { display: grid; grid-template-columns: 1fr 1fr; height: 25rem; position: relative; width: 100%; }
.testimonials .left h2 { color: var(--porcelain); }
.slide-names { color: var(--porcelain-40); margin-top: 2.5rem; }
.slide-names li { width: max-content; }
.btn-slide-name { align-items: center; color: inherit; display: flex; padding: .125rem 0; position: relative; }
.btn-slide-name .text { transition: transform .3s var(--ease), color .3s var(--ease); }
.btn-slide-name.active .text { color: var(--porcelain); transform: translate(1.125rem); }
@media (hover: hover) { .btn-slide-name:hover { color: var(--porcelain); } }
.wrap-loader { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); height: .625rem; left: 0; position: absolute; top: 48%; transform: translateY(-50%); transition: clip-path .3s var(--ease); width: .625rem; }
.btn-slide-name.active .wrap-loader { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.wrap-loader svg { height: 100%; width: 100%; }
.path-loader { transform: rotate(-90deg); transform-origin: center; }
.testimonials .right { border-left: 1px solid var(--porcelain-15); padding-left: 1rem; position: relative; }
.slide-text { color: var(--porcelain); left: 1rem; opacity: 0; position: absolute; top: 0; visibility: hidden; width: 32rem; }
.author-names { bottom: 0; color: var(--porcelain); left: 1rem; opacity: 0; position: absolute; visibility: hidden; }
.author-names span:last-child { color: var(--porcelain-60); margin-left: .25rem; }
.mob-slider-controls, .mob-top-part { display: none; }
.mouse-controls { left: 0; pointer-events: none; position: absolute; top: 0; z-index: 3; }
.cursor-circle { height: 11.25rem; left: 0; opacity: 0; position: absolute; top: 0; transition: opacity .3s var(--ease); width: 11.25rem; }
.cursor-circle svg { height: 100%; width: 100%; }
.cursor-circle.left svg { transform: scaleX(-1); }
.cursor-arrow { height: 1.25rem; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 1.25rem; }
.cursor-circle.left .cursor-arrow { transform: translate(-50%, -50%) scaleX(-1); }
.round-btn { align-items: center; background: var(--bisque); border-radius: 50%; color: var(--ink); display: flex; height: 5rem; justify-content: center; width: 5rem; }
.round-btn svg { height: 1rem; width: 1rem; }
.round-btn.dark { background: rgba(236, 233, 227, .12); color: var(--porcelain); }

/* ---------- pre-footer ---------- */
.pre-footer { background: var(--ink); height: 77.125rem; isolation: isolate; overflow: hidden; position: relative; width: 100%; z-index: 2; }
.pf-blob { bottom: 0; height: 88rem; left: 0; pointer-events: none; position: absolute; width: 100%; z-index: -1; filter: blur(5rem); }
.pf-blob span { background: radial-gradient(closest-side, #c9cfc9 0%, rgba(201, 207, 201, .55) 45%, transparent 75%); border-radius: 50%; position: absolute; }
.pf-blob span:first-child { bottom: -10rem; height: 50rem; left: 10%; width: 95rem; animation: pfPath 15s ease-in infinite; }
.pf-blob span:last-child { bottom: -25rem; height: 40rem; left: -20%; width: 60rem; opacity: .7; animation: pfPath 18s ease-in-out infinite reverse; }
@keyframes pfPath { 50% { transform: translate(30rem) rotate(15deg); } }
.pre-footer-img { height: 69.125rem; left: 50%; max-width: none; mix-blend-mode: lighten; object-fit: cover; pointer-events: none; position: absolute; top: 8rem; transform: translate(-50%); width: 103.625rem; z-index: -1; }
.pre-footer .wrap-title { bottom: 15rem; color: var(--porcelain); left: 2rem; mix-blend-mode: difference; position: absolute; top: auto; transform: none; width: calc(100% - 4rem); }
.pre-footer .wrap-title .title-line { display: block; width: 100%; }
.pre-footer .wrap-title .title-line:first-child { padding-left: 42.25rem; }
.pre-footer .wrap-title .title-line:nth-child(2) { display: flex; justify-content: space-between; position: relative; }
.pre-footer .small-tip { bottom: .5rem; left: 50%; position: absolute; text-align: center; transform: translate(-50%); width: 9.375rem; }

/* ================= phone ================= */
@media (max-width: 1023px) {
  .hero { position: relative; top: auto; }
  .hero .sticky { display: block; height: auto; padding: 9.5rem 1rem 1rem; overflow: visible; position: relative; }
  .hero .left, .hero .right, .wrap-titles, .video-description, .hero .description, .hero .sticky-plash, .based-in { display: none; }
  .mob-content { display: block; }
  .title-mob { color: var(--slate); margin: 0 auto; text-align: center; width: 20rem; }
  .mob-content .text { color: var(--slate); margin: 4.5rem auto 0; text-align: center; width: 16rem; }
  .mobile-overlay { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: linear-gradient(180deg, rgba(17, 24, 22, 0), rgba(17, 24, 22, .08)); display: block; height: 100%; left: 0; opacity: 0; pointer-events: none; position: absolute; top: 0; width: 100%; }
  .sticky-plash-mobile { display: block; height: 100vh; isolation: isolate; position: relative; z-index: 1; }
  .mob-bg { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: -1; background: #20251f url(../media/video/hero-poster.webp) center/cover; }
  .mob-bg::after { background: rgba(0, 0, 0, .55); content: ""; inset: 0; position: absolute; }
  .bottom-texts { align-items: center; bottom: 2rem; color: var(--porcelain); display: flex; flex-direction: column; gap: .125rem; left: 50%; position: absolute; transform: translate(-50%); width: max-content; z-index: 1; }
  .mobile-under-content { display: block; height: 100%; left: 0; pointer-events: none; position: absolute; top: 0; width: 100%; z-index: 2; }
  .mobile-sticky { display: block; height: 100vh; overflow: hidden; position: sticky; top: 0; width: 100%; }
  .mob-line-text { color: var(--porcelain); left: 0; position: absolute; top: 50vh; transform: translate(100vw, -50%); white-space: nowrap; width: max-content; }

  .our-goal { display: block; overflow: hidden; padding: 7rem 1rem; position: relative; top: auto; }
  .our-goal .left, .our-goal .right-title, .goal-anchor, .overlay-goal { display: none; }
  .our-goal .right { display: flex; flex-direction: column; width: 100%; }
  .our-goal .right-title-mob { color: var(--slate); display: block; margin-bottom: 4.5rem; order: 1; }
  .about-team { flex-direction: column-reverse; height: auto; margin-bottom: 3rem; order: 2; }
  .about-team .description { width: 100%; }
  .wrap-avatars { margin-bottom: 1.5rem; transform: translate(-4.5rem); }
  .avatar, .avatar-empty { height: 4.5rem; width: 4.5rem; }
  .btn-about { order: 3; }
  .fake-service-image { display: none; }

  .services .sticky, .slides-plash { display: none; }
  .wrap-mobile-content { align-items: center; background: var(--ink); display: flex; flex-direction: column; padding: 3.5rem 0; }
  .wrap-mobile-content .h1 { color: var(--porcelain); font-size: 4.6rem; margin-bottom: 3.5rem; }
  .mob-services { display: grid; gap: 4.5rem; grid-template-columns: 1fr; width: 100%; }
  .service-card { align-items: center; display: flex; flex-direction: column; }
  .service-image-wrap { aspect-ratio: .86; position: relative; width: 100%; }
  .service-image-wrap::after { background: var(--fade-ink); bottom: 0; content: ""; height: 10.5rem; left: 0; position: absolute; width: 100%; z-index: 1; }
  .mob-service-name { bottom: 0; color: var(--porcelain); left: 50%; position: absolute; text-align: center; transform: translate(-50%) translateY(35%); width: max-content; z-index: 2; }
  .service-desc { color: var(--porcelain-60); margin-top: 3.375rem; text-align: center; width: 20.25rem; }
  .service-card .btn { margin-top: 3rem; }

  .banner { height: 31.25rem; }
  .banner .bg::before, .bottom-grid { display: none; }

  .technology { padding: 1.5rem 0 7rem; }
  .sticky-title, .technology .title, .technology .sticky, .technology .sticky-plash { display: none; }
  .technology .mob-content { align-items: center; display: flex; flex-direction: column; margin-top: 3rem; overflow: hidden; }
  .mobile-title { color: var(--slate); line-height: .98; text-align: center; }
  .mob-track { align-self: flex-start; display: flex; gap: 1rem; margin-top: 4.5rem; transition: transform .6s var(--ease); width: max-content; }
  .m-slide { height: 17.125rem; width: 14.25rem; flex: none; background: #000; transition: transform .6s var(--ease), opacity .6s var(--ease); }
  .wrap-names { height: 4.25rem; margin-top: 2rem; position: relative; width: 14rem; }
  .slide-name { color: var(--slate); left: 0; opacity: 0; position: absolute; text-align: center; top: 0; transform: translateY(25%); width: 100%; transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .slide-name.active { opacity: 1; transform: none; }
  .btn-learn-more { color: var(--slate); margin-top: 2rem; text-decoration: underline; text-underline-offset: .125rem; }
  .slider-controls { align-items: center; display: flex; justify-content: space-between; margin-top: 2.5rem; width: calc(100% - 2rem); }
  .slider-counter { color: var(--slate); text-align: center; }

  .experts { height: 62.5rem; padding-top: 7rem; }
  .experts-bg-wrap { height: 42.375rem; }
  .experts-bg { animation: none; height: 55.6875rem; width: 57.25rem; }
  .experts-img { height: 29.375rem; left: 0; top: 13rem; transform: translate(-5.625rem); width: 36.75rem; }
  .experts-overlay { height: 15.5rem; top: 27.5rem; transform: none; }
  .experts .title { text-align: center; top: 3rem; white-space: normal; width: 21.875rem; }
  .mob-br { display: inline; }
  .about-teammates { grid-template-columns: repeat(3, 1fr); left: 1rem; padding: 0; position: absolute; top: 35rem; width: calc(100% - 2rem); }
  .teammate, .teammate:first-child, .teammate:nth-child(2), .teammate:nth-child(3) { width: auto; }
  .teammate:nth-child(2) { text-align: center; } .teammate:nth-child(3) { text-align: right; }
  .teammate-desc { display: none; }
  .meet-teammates-wrap { display: block; margin: 38.5rem 0 0; padding: 0; }
  .small-description { display: none; }
  .main-description { margin: 0 auto; text-align: center; width: 19rem; }
  .btn-meet-team { display: flex; margin: 3rem auto 0; }

  .why-choose .sticky { height: auto; position: relative; overflow: visible; }
  .left-circle, .right-circle, .wrap-title, .why-choose .sticky-plash { display: none; }
  .mobile-wrap { align-items: center; background: var(--ink); display: flex; flex-direction: column; isolation: isolate; padding: 3.5rem 1rem; position: relative; }
  .sub-title { color: var(--porcelain); text-align: center; width: 4rem; }
  .mob-title { color: var(--porcelain); margin-top: 1.5rem; text-align: center; width: 21.25rem; }
  .balls { display: grid; gap: .5rem; grid-template-columns: repeat(2, 1fr); margin-top: 4.5rem; width: 100%; }
  .ball { align-items: center; aspect-ratio: 1; background: var(--bg); border-radius: 50%; display: flex; justify-content: center; }
  .ball-content { align-items: center; color: var(--tx); display: flex; flex-direction: column; gap: .5rem; max-width: 6rem; text-align: center; }

  .testimonials { overflow: hidden; padding: 3.5rem 1rem 8rem; }
  .wrap-content { display: flex; flex-direction: column-reverse; height: auto; }
  .testimonials .left { display: none; }
  .testimonials .right { border-left: 0; height: var(--testi-h, 16rem); padding-left: 0; width: 100%; }
  .slide-text { left: 50%; text-align: center; transform: translate(-50%); width: 20rem; }
  .author-names { bottom: auto; left: auto; right: 0; text-align: right; top: -3.5rem; }
  .mob-top-part { border-top: 1px solid rgba(255, 255, 255, .1); display: flex; margin-bottom: 4.5rem; padding-top: .75rem; position: relative; width: 100%; }
  .mob-top-part p { color: var(--porcelain-60); }
  .mob-slider-controls { align-items: center; display: flex; justify-content: space-between; margin-top: 3rem; position: relative; width: 100%; z-index: 2; }
  .mouse-controls { display: none; }

  .pre-footer { height: 41.75rem; }
  .pf-blob, .pre-footer .wrap-title { display: none; }
  .pre-footer-img { height: 100%; left: 0; top: 0; transform: none; width: 100%; mix-blend-mode: normal; }
  .pre-footer::before, .pre-footer::after { content: ""; height: 15.625rem; left: 0; position: absolute; width: 100%; z-index: 1; }
  .pre-footer::before { background: linear-gradient(0deg, rgba(17, 24, 22, 0), #111816); top: 0; }
  .pre-footer::after { background: linear-gradient(180deg, rgba(2, 4, 3, 0), #020403); bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .experts-bg, .pf-blob span, .call-modal .bg-blob span, .menu .bg::before { animation: none; }
}