@font-face {
  font-family: 'DM Sans';
  src: url('assets/fonts/Cabin-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: 'DM Sans';
  src: url('assets/fonts/Cabin-SemiBold.otf') format('opentype');
  font-weight: 500 600;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: 'DM Sans';
  src: url('assets/fonts/Cabin-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: 'Manrope';
  src: url('assets/fonts/Cabin-SemiBold.otf') format('opentype');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: 'Manrope';
  src: url('assets/fonts/Cabin-Bold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap
}

:root {
  --ink: #07172f;
  --blue: #2768f2;
  --cyan: #27d1f5;
  --purple: #7a4df5;
  --orange: #ff9a5a;
  --cream: #f7f8fc;
  --muted: #65738a;
  --line: #e6ebf3
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  color: var(--ink);
  background: #fff;
  overflow-x: hidden
}

a {
  text-decoration: none;
  color: inherit
}

.wrap {
  width: min(1200px, 92%);
  margin: auto
}

.pill {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: var(--blue)
}

/* ================= V7 KEKA-INSPIRED RESPONSIVE HEADER ================= */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease
}

.navbox {
  width: 100%;
  height: 104px;
  margin: auto;
  padding: 0 clamp(22px, 4vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(248, 247, 249, .96);
  border: 0;
  box-shadow: 0 1px 0 rgba(20, 20, 40, .08);
  backdrop-filter: none;
  transition: height .35s ease, background .35s ease, box-shadow .35s ease
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #2f215d;
  min-width: 220px
}

.brand-mark {
  width: 44px;
  height: 44px;
  position: relative;
  display: block
}

.brand-sun {
  position: absolute;
  left: 5px;
  top: 6px;
  width: 29px;
  height: 29px;
  border-radius: 10px 50% 50% 50%;
  background: linear-gradient(135deg, #4b2ca5, #8064e9);
  transform: rotate(-18deg);
  box-shadow: 0 8px 20px #6d49cc40
}

.brand-sun:after {
  content: "S";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: Manrope;
  font-size: 19px;
  font-weight: 900;
  transform: rotate(18deg)
}

.brand-ray {
  position: absolute;
  right: 1px;
  top: 3px;
  width: 8px;
  height: 14px;
  border-radius: 8px;
  background: #6b4bd5;
  transform-origin: bottom center
}

.brand-ray.r1 {
  transform: rotate(-20deg)
}

.brand-ray.r2 {
  right: -2px;
  top: 16px;
  height: 12px;
  transform: rotate(35deg)
}

.brand-ray.r3 {
  right: 8px;
  top: -2px;
  height: 11px;
  transform: rotate(5deg)
}

.brand-copy {
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 5px;
  position: relative;
  padding-bottom: 9px;
  letter-spacing: .4px
}

.brand-copy b {
  font-family: Manrope;
  font-size: 18px;
  font-weight: 900;
  color: #2f215d
}

.brand-copy em {
  font-family: Manrope;
  font-size: 14px;
  font-style: normal;
  font-weight: 800;
  color: #6d4bd3
}

.brand-copy small {
  position: absolute;
  left: 1px;
  bottom: -1px;
  font-family: Manrope;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  color: #8c88a0;
  white-space: nowrap
}

.links {
  display: flex;
  gap: 2px;
  align-items: center;
  justify-content: center;
  flex: 1
}

.links>a,
.company-toggle {
  border: 0;
  background: transparent;
  color: #4d4860;
  font-family: Manrope;
  font-size: 12px;
  font-weight: 700;
  padding: 12px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: color .25s, background .25s
}

.links>a:hover,
.company-toggle:hover,
.company-toggle.open {
  color: #5c37c5;
  background: #ece8fb
}

.drop {
  position: relative
}

.company-toggle span {
  font-size: 14px;
  margin-left: 2px
}

.drop-menu {
  position: absolute;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  top: 46px;
  left: -8px;
  width: 190px;
  padding: 8px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 45px #20144a22;
  border: 1px solid #eeeaf7;
  transition: .25s
}

.drop:hover .drop-menu,
.drop:focus-within .drop-menu,
.drop.open .drop-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0)
}

.drop-menu a {
  display: block;
  padding: 11px 12px;
  border-radius: 9px;
  font-family: Manrope;
  font-size: 12px;
  font-weight: 700;
  color: #4d4860
}

.drop-menu a:hover {
  background: #f0ecfc;
  color: #5b37c3
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: 22px
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 138px;
  height: 56px;
  padding: 0 22px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #5b35c4, #7a4bda) !important;
  color: #fff !important;
  font-family: Manrope;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 10px 24px #633cc52b;
  transition: transform .25s, box-shadow .25s !important
}

.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px #633cc545
}

.menu-toggle {
  display: none;
  width: 36px;
  height: 30px;
  border: 0;
  background: transparent;
  padding: 0;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  cursor: pointer
}

.menu-toggle span {
  display: block;
  width: 30px;
  height: 2px;
  background: #6c4bd3;
  transition: .3s
}

.mobile-nav {
  position: fixed;
  top: 104px;
  left: 0;
  right: 0;
  background: #f8f7f9;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: max-height .45s ease, opacity .25s ease, visibility .25s;
  box-shadow: 0 18px 35px #1d17301a
}

.mobile-nav.open {
  max-height: calc(100vh - 74px);
  opacity: 1;
  visibility: visible;
  overflow: auto
}

.mobile-nav-inner {
  padding: 20px clamp(24px, 7vw, 48px) 32px;
  display: flex;
  flex-direction: column
}

.mobile-nav a,
.mobile-company {
  font-family: Manrope;
  font-size: 16px;
  font-weight: 800;
  color: #3c354d;
  padding: 16px 0;
  border-bottom: 1px solid #e7e3eb;
  background: transparent;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  text-align: left
}

.mobile-company {
  display: flex;
  justify-content: space-between;
  cursor: pointer
}

.mobile-company span {
  font-size: 22px;
  color: #6745d0
}

.mobile-company-links {
  display: none;
  padding-left: 16px
}

.mobile-company-links.open {
  display: flex;
  flex-direction: column
}

.mobile-company-links a {
  font-size: 14px;
  padding: 13px 0
}

.mobile-demo {
  margin-top: 20px !important;
  border: 0 !important;
  border-radius: 8px;
  background: linear-gradient(135deg, #5b35c4, #7a4bda);
  color: #fff !important;
  text-align: center !important;
  padding: 17px !important
}

.header.scrolled .navbox {
  height: 76px;
  background: rgba(248, 247, 249, .98);
  box-shadow: 0 10px 35px #1d173012
}

.header.scrolled .mobile-nav {
  top: 76px
}

.header.scrolled .brand-mark {
  transform: scale(.9);
  transition: .25s
}

@media(max-width:1180px) {
  .links {
    display: none
  }

  .menu-toggle {
    display: flex
  }

  .navbox {
    height: 104px
  }

  .nav-actions {
    gap: 24px
  }

  .mobile-nav {
    top: 104px
  }
}

@media(max-width:680px) {
  .navbox {
    height: 88px;
    padding: 0 24px
  }

  .brand {
    min-width: 0;
    gap: 8px
  }

  .brand-mark {
    width: 39px;
    height: 39px
  }

  .brand-copy b {
    font-size: 15px
  }

  .brand-copy em {
    font-size: 12px
  }

  .brand-copy small {
    font-size: 6px
  }

  .nav-actions {
    gap: 18px;
    margin-left: auto
  }

  .nav-cta {
    min-width: 112px;
    height: 48px;
    padding: 0 13px !important;
    font-size: 11px
  }

  .menu-toggle {
    width: 31px
  }

  .menu-toggle span {
    width: 27px
  }

  .mobile-nav {
    top: 88px
  }

  .header.scrolled .navbox {
    height: 72px
  }

  .header.scrolled .mobile-nav {
    top: 72px
  }
}

@media(max-width:430px) {
  .brand-copy {
    display: none
  }

  .nav-cta {
    min-width: 108px
  }

  .navbox {
    padding: 0 18px
  }

  .nav-actions {
    gap: 15px
  }
}

.hero {
  min-height: 760px;
  position: relative;
  color: #fff;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: #08152c
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  transform: scale(1.08);
  animation: heroZoom 16s ease-in-out infinite alternate
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #06152eee 0%, #071a38d9 44%, #071a3840 100%)
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 40px;
  align-items: center;
  padding-top: 100px
}

.hero h1 {
  font-family: Manrope;
  font-size: clamp(48px, 6.2vw, 82px);
  line-height: 1.02;
  letter-spacing: -3px;
  margin: 14px 0 20px;
  max-width: 820px
}

.hero p {
  max-width: 630px;
  font-size: 17px;
  line-height: 1.8;
  color: #d4e0ef
}

.btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px
}

.btn {
  padding: 14px 21px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  display: inline-block;
  transition: .35s
}

.btn.white {
  background: #fff;
  color: var(--ink)
}

.btn.white:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px #0004
}

.btn.glass {
  border: 1px solid #ffffff55;
  background: #ffffff12;
  color: #fff;
  backdrop-filter: none;
}

.hero-side {
  height: 430px;
  position: relative
}

.float-panel {
  position: absolute;
  background: #ffffffec;
  color: var(--ink);
  backdrop-filter: none;
  padding: 16px;
  border-radius: 18px;
  box-shadow: 0 25px 70px #0004;
  animation: float 6s ease-in-out infinite
}

.float-panel b {
  display: block;
  font-family: Manrope;
  font-size: 20px
}

.p1 {
  top: 30px;
  left: 15px
}

.p2 {
  right: 0;
  bottom: 80px;
  animation-delay: -3s
}

.ring {
  position: absolute;
  width: 380px;
  height: 380px;
  border: 1px solid #ffffff30;
  border-radius: 50%;
  right: 20px;
  top: 35px;
  animation: spin 22s linear infinite
}

.ring:after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  background: var(--cyan);
  border-radius: 50%;
  top: 15px;
  left: 45px;
  box-shadow: 280px 230px 0 var(--purple)
}

.hero-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background: #ffffff10;
  backdrop-filter: none;
  border-top: 1px solid #ffffff1d
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr)
}

.stat {
  padding: 19px 0;
  border-right: 1px solid #ffffff20
}

.stat b {
  font-size: 22px;
  display: block
}

.stat span {
  font-size: 11px;
  color: #c3d1e3
}

section {
  padding: 105px 0
}

.heading {
  max-width: 760px;
  margin-bottom: 46px
}

.heading h2 {
  font-family: Manrope;
  font-size: clamp(34px, 4.5vw, 57px);
  line-height: 1.08;
  letter-spacing: -2px;
  margin: 12px 0
}

.heading p {
  color: var(--muted);
  line-height: 1.8
}

.light {
  background: var(--cream)
}

.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center
}

.photo-stack {
  height: 520px;
  position: relative
}

.photo-main {
  width: 76%;
  height: 440px;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 30px 70px #06172b22
}

.photo-small {
  position: absolute;
  width: 47%;
  height: 240px;
  right: 0;
  bottom: 0;
  object-fit: cover;
  border: 8px solid #fff;
  border-radius: 24px;
  box-shadow: 0 22px 60px #06172b20
}

.photo-badge {
  position: absolute;
  left: 25px;
  bottom: 30px;
  background: #08152c;
  color: #fff;
  border-radius: 15px;
  padding: 14px 17px;
  font-size: 12px
}

.story-copy h2 {
  font-family: Manrope;
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -2px;
  margin: 12px 0 20px
}

.story-copy p {
  color: var(--muted);
  line-height: 1.9
}

.checks {
  display: grid;
  gap: 13px;
  margin-top: 25px
}

.checks div {
  font-size: 13px;
  display: flex;
  gap: 10px
}

.checks span {
  color: var(--blue);
  font-weight: 800
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.card {
  padding: 28px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 24px;
  min-height: 250px;
  position: relative;
  overflow: hidden;
  transition: .45s
}

.card:hover {
  transform: translateY(-12px);
  box-shadow: 0 28px 60px #06172b15
}

.card:before {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  right: -70px;
  top: -75px;
  background: linear-gradient(135deg, #e6f7ff, #f0ebff);
  transition: .5s
}

.card:hover:before {
  transform: scale(1.45)
}

.card>* {
  position: relative
}

.icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #edf4ff;
  display: grid;
  place-items: center;
  font-size: 22px;
  margin-bottom: 18px
}

.card h3 {
  font-family: Manrope;
  margin: 0 0 10px
}

.card p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.8
}

.band {
  background: #09162d;
  color: #fff;
  overflow: hidden;
  padding: 28px 0
}

.ticker {
  display: flex;
  gap: 65px;
  width: max-content;
  animation: ticker 24s linear infinite
}

.ticker span {
  font-family: Manrope;
  font-size: 21px;
  white-space: nowrap
}

.ticker b {
  color: #65dcff
}

.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px
}

.step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px;
  transition: .35s
}

.step:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 45px #06172b12
}

.step b {
  color: var(--blue);
  font-size: 11px;
  letter-spacing: 1px
}

.step h3 {
  font-family: Manrope;
  margin: 18px 0 8px
}

.step p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.75
}

.full-image {
  min-height: 620px;
  position: relative;
  display: flex;
  align-items: end;
  color: #fff;
  background-size: cover;
  background-position: center
}

.full-image:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #06152ff5, #06152f25)
}

.full-content {
  position: relative;
  z-index: 1;
  padding-bottom: 85px
}

.full-content h2 {
  font-family: Manrope;
  font-size: clamp(40px, 5vw, 68px);
  max-width: 800px;
  line-height: 1.05;
  letter-spacing: -2px;
  margin: 15px 0
}

.full-content p {
  max-width: 650px;
  color: #d2deed;
  line-height: 1.8
}

.slider-window {
  overflow: hidden;
  border-radius: 30px
}

.slider {
  display: flex;
  transition: transform .8s cubic-bezier(.2, .8, .2, 1)
}

.slide {
  min-width: 100%;
  min-height: 450px;
  display: flex;
  align-items: end;
  padding: 50px;
  background-size: cover;
  background-position: center;
  position: relative;
  color: #fff
}

.slide:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #06152eea, #06152e88, transparent)
}

.slide-content {
  position: relative;
  max-width: 650px
}

.slide h3 {
  font-family: Manrope;
  font-size: 46px;
  line-height: 1.1;
  margin: 10px 0
}

.slide p {
  line-height: 1.8;
  color: #d4dfec
}

.dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px
}

.dot {
  border: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c6d0df;
  cursor: pointer
}

.dot.active {
  width: 30px;
  border-radius: 8px;
  background: var(--blue)
}

.page-hero {
  margin-top: 104px;
  min-height: 570px;
  display: flex;
  align-items: end;
  color: #fff;
  position: relative;
  background-size: cover;
  background-position: center
}

.page-hero:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #06152fe8, #06152f7c, #06152f30)
}

.page-hero .wrap {
  position: relative;
  z-index: 1;
  padding-bottom: 90px
}

.page-hero h1 {
  font-family: Manrope;
  font-size: clamp(50px, 7vw, 85px);
  line-height: 1.02;
  letter-spacing: -3px;
  max-width: 850px;
  margin: 12px 0
}

.page-hero p {
  max-width: 620px;
  color: #d5e0ed;
  line-height: 1.8
}

.split-page {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 40px
}

.side {
  position: sticky;
  top: 105px;
  height: max-content;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  background: #fff
}

.side h4 {
  margin: 9px 10px 12px;
  font-size: 13px
}

.side a {
  display: block;
  padding: 11px;
  border-radius: 10px;
  font-size: 13px;
  color: #536177
}

.side a:hover {
  background: #edf4ff;
  color: var(--blue)
}

.article {
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 44px;
  background: #fff;
  box-shadow: 0 20px 55px #06172b08
}

.article h2 {
  font-family: Manrope;
  font-size: 42px;
  margin: 8px 0 20px
}

.article p {
  color: #526076;
  line-height: 1.95
}

.timeline {
  display: grid;
  gap: 20px
}

.time {
  padding: 22px 0 22px 26px;
  border-left: 2px solid #d7e3ff
}

.time b {
  color: var(--blue);
  font-size: 11px
}

.time h3 {
  font-family: Manrope;
  margin: 7px 0
}

.time p {
  font-size: 13px;
  margin: 0
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px
}

.contact-card,
.form {
  border-radius: 26px;
  padding: 34px
}

.contact-card {
  background: #09162d;
  color: #fff;
  min-height: 100%
}

.contact-card p {
  color: #c4d1e1;
  line-height: 1.8
}

.form {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 20px 50px #06172b0b
}

.form label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin: 15px 0 7px
}

.form input,
.form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  font: inherit
}

.form textarea {
  min-height: 120px
}

.form button {
  border: 0;
  cursor: pointer;
  margin-top: 18px
}

.cta {
  background: linear-gradient(135deg, #08152c, #153e88);
  border-radius: 32px;
  padding: 72px;
  position: relative;
  overflow: hidden;
  color: #fff
}

.cta:after {
  content: "";
  position: absolute;
  width: 380px;
  height: 380px;
  border: 1px solid #ffffff20;
  border-radius: 50%;
  right: -100px;
  top: -180px;
  box-shadow: 0 0 0 60px #ffffff07, 0 0 0 120px #ffffff04
}

.cta h2 {
  font-family: Manrope;
  font-size: 50px;
  line-height: 1.08;
  max-width: 700px;
  margin: 12px 0
}

.cta p {
  max-width: 650px;
  color: #cbd8e9;
  line-height: 1.8
}

.cta>* {
  position: relative;
  z-index: 1
}

.footer {
  background: #061126;
  color: #aebdd0;
  padding: 54px 0 25px
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 30px
}

.footer h4 {
  color: #fff
}

.footer a {
  display: block;
  font-size: 13px;
  margin: 10px 0
}

.copy {
  border-top: 1px solid #ffffff16;
  margin-top: 35px;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  font-size: 11px
}

.reveal {
  opacity: 0;
  transform: translateY(45px);
  transition: opacity .85s ease, transform .85s cubic-bezier(.2, .8, .2, 1)
}

.reveal.show {
  opacity: 1;
  transform: none
}

.back {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  z-index: 110;
  opacity: 0;
  pointer-events: none;
  transition: .3s;
  box-shadow: 0 15px 30px #2768f266
}

.back.show {
  opacity: 1;
  pointer-events: auto
}

@keyframes heroZoom {
  from {
    transform: scale(1.08)
  }

  to {
    transform: scale(1.2)
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-16px)
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

@keyframes ticker {
  to {
    transform: translateX(-50%)
  }
}

@media(max-width:900px) {
  .links {
    max-width: 70%;
    flex-wrap: wrap;
    justify-content: flex-end
  }

  .hero-grid,
  .story-grid,
  .contact-grid {
    grid-template-columns: 1fr
  }

  .cards {
    grid-template-columns: 1fr 1fr
  }

  .process {
    grid-template-columns: 1fr 1fr
  }

  .split-page {
    grid-template-columns: 1fr
  }

  .side {
    position: relative;
    top: 0
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr
  }

  .hero {
    min-height: 850px
  }

  .hero-side {
    height: 260px
  }
}

@media(max-width:560px) {
  .header {
    top: 8px
  }

  .navbox {
    height: auto;
    min-height: 60px;
    padding: 8px 10px
  }

  .links {
    max-width: 60%;
    gap: 0
  }

  .links>a,
  .drop summary {
    font-size: 10px;
    padding: 6px
  }

  .nav-cta {
    display: none
  }

  .brand {
    font-size: 15px
  }

  .brand i {
    width: 34px;
    height: 34px
  }

  .hero {
    min-height: 780px
  }

  .hero-grid {
    padding-top: 120px
  }

  .hero h1 {
    letter-spacing: -2px
  }

  .hero-side {
    display: none
  }

  .stats,
  .cards,
  .process,
  .footer-grid {
    grid-template-columns: 1fr
  }

  .stat {
    border-right: 0;
    border-bottom: 1px solid #ffffff20
  }

  .photo-stack {
    height: 400px
  }

  .photo-main {
    height: 330px
  }

  .photo-small {
    height: 170px
  }

  .story-copy h2 {
    font-size: 36px
  }

  .page-hero {
    min-height: 520px
  }

  .article {
    padding: 28px
  }

  .cta {
    padding: 38px 24px
  }

  .cta h2 {
    font-size: 36px
  }

  .footer-grid {
    gap: 15px
  }

  .copy {
    flex-direction: column;
    gap: 7px
  }
}

/* V5 TEAM EXPERIENCE */
.team-showcase {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  background: #07142b;
  color: #fff
}

.team-showcase:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #06152ef4 0%, #06152eb8 43%, #06152e30 100%),
    url('assets/images/business.jpg') center/cover
}

.team-showcase:after {
  content: "";
  position: absolute;
  width: 650px;
  height: 650px;
  border-radius: 50%;
  right: -180px;
  bottom: -280px;
  border: 1px solid #ffffff28;
  box-shadow: 0 0 0 70px #ffffff07, 0 0 0 140px #ffffff05
}

.team-inner {
  position: relative;
  z-index: 2;
  padding: 110px 0;
  min-height: 760px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 50px
}

.team-title h2 {
  font-family: Manrope;
  font-size: clamp(42px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -2.5px;
  margin: 14px 0 20px
}

.team-title p {
  max-width: 600px;
  color: #cbd8e8;
  line-height: 1.85;
  font-size: 16px
}

.team-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px
}

.team-orbit {
  height: 470px;
  position: relative
}

.orbit-line {
  position: absolute;
  border: 1px solid #ffffff28;
  border-radius: 50%;
  inset: 20px;
  animation: spin 28s linear infinite
}

.orbit-line.two {
  inset: 80px;
  animation-direction: reverse;
  animation-duration: 20s
}

.member {
  position: absolute;
  width: 145px;
  height: 185px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid #ffffff44;
  box-shadow: 0 20px 55px #0005;
  transition: .45s;
  animation: float 6s ease-in-out infinite;
  background: #132443
}

.member:hover {
  transform: scale(1.08) !important;
  z-index: 5
}

.member img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.member span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 10px 10px;
  font-size: 11px;
  font-weight: 700;
  background: linear-gradient(transparent, #07142be8)
}

.member.m1 {
  top: 30px;
  left: 15px
}

.member.m2 {
  top: 30px;
  right: 15px;
  animation-delay: -2s
}

.member.m3 {
  bottom: 30px;
  left: 85px;
  animation-delay: -4s
}

.member.m4 {
  bottom: 30px;
  right: 85px;
  animation-delay: -1s
}

.team-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #ffffff14;
  backdrop-filter: none;
  border: 1px solid #ffffff44;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: Manrope;
  font-weight: 800;
  font-size: 18px;
  box-shadow: 0 0 70px #2ed4ff33
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}

.team-card {
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  height: 360px;
  background: #12213a;
  transition: .5s;
  box-shadow: 0 15px 45px #07142b18
}

.team-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .7s
}

.team-card:hover {
  transform: translateY(-12px)
}

.team-card:hover img {
  transform: scale(1.1)
}

.team-card:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #06152eee, transparent 60%)
}

.team-info {
  position: absolute;
  z-index: 2;
  left: 22px;
  right: 22px;
  bottom: 20px;
  color: #fff
}

.team-info h3 {
  font-family: Manrope;
  margin: 0 0 4px;
  font-size: 21px
}

.team-info p {
  margin: 0;
  font-size: 12px;
  color: #cbd8e9
}

@media(max-width:900px) {
  .team-inner {
    grid-template-columns: 1fr
  }

  .team-orbit {
    max-width: 600px;
    width: 100%;
    margin: auto
  }

  .team-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:560px) {

  .team-showcase,
  .team-inner {
    min-height: auto
  }

  .team-inner {
    padding: 80px 0
  }

  .team-orbit {
    height: 410px
  }

  .member {
    width: 110px;
    height: 145px
  }

  .member.m3 {
    left: 45px
  }

  .member.m4 {
    right: 45px
  }

  .team-center {
    width: 115px;
    height: 115px;
    font-size: 15px
  }

  .team-grid {
    grid-template-columns: 1fr
  }

  .team-card {
    height: 330px
  }
}


/* =========================
   V6 — ADVANCED MOTION SYSTEM
   ========================= */

.zoom-scene {
  transform: scale(.94);
  opacity: .55;
  transition: transform 1.2s cubic-bezier(.2, .75, .15, 1), opacity .8s ease
}

.zoom-scene.show {
  transform: scale(1);
  opacity: 1
}

.hero-bg {
  will-change: transform
}

.parallax-bg {
  will-change: transform
}

.reveal-left {
  opacity: 0;
  transform: translateX(-70px);
  transition: 1s cubic-bezier(.2, .75, .15, 1)
}

.reveal-right {
  opacity: 0;
  transform: translateX(70px);
  transition: 1s cubic-bezier(.2, .75, .15, 1)
}

.reveal-left.show,
.reveal-right.show {
  opacity: 1;
  transform: none
}

.reveal-scale {
  opacity: 0;
  transform: scale(.82);
  transition: 1s cubic-bezier(.2, .75, .15, 1)
}

.reveal-scale.show {
  opacity: 1;
  transform: scale(1)
}

/* Exact new OUR TEAM section inspired by the uploaded reference video */
.our-team-v6 {
  position: relative;
  min-height: 780px;
  overflow: hidden;
  background: #070a14;
  color: #fff
}

.our-team-v6 .city-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #060811e8 0%, #060811c7 42%, #071425d9 100%),
    url('assets/images/team-city.jpg') center 62%/cover no-repeat;
  transform: scale(1.08);
  will-change: transform
}

.our-team-v6 .noise {
  position: absolute;
  inset: 0;
  opacity: .28;
  background-image: radial-gradient(#ffffff25 1px, transparent 1px);
  background-size: 4px 4px;
  mix-blend-mode: soft-light
}

.team-v6-inner {
  position: relative;
  z-index: 2;
  padding: 72px 0 82px
}

.team-v6-head {
  text-align: center;
  position: relative;
  z-index: 3
}

.team-v6-head .eyebrow {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 15px;
  letter-spacing: .5px;
  color: #fff;
  margin: 0 0 14px
}

.team-v6-head h2 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(42px, 5vw, 67px);
  letter-spacing: -1px;
  margin: 0
}

.team-v6-line {
  height: 1px;
  width: min(820px, 86%);
  margin: 25px auto 48px;
  background: linear-gradient(90deg, transparent, #ffffff75 12%, #ffffffa8 50%, #ffffff75 88%, transparent);
  position: relative
}

.team-v6-line:before,
.team-v6-line:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border: 1px solid #ffffffaa;
  border-radius: 50%;
  background: #0b1220;
  transform: translateY(-50%)
}

.team-v6-line:before {
  left: 27%
}

.team-v6-line:after {
  right: 27%
}

.team-stage {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  height: 400px
}

.team-stage:before {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 35px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ffffff55, transparent)
}

.team-members {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  height: 100%;
  padding-top: 10px
}

.team-member {
  width: 175px;
  height: 250px;
  position: relative;
  overflow: hidden;
  background: #12192a;
  box-shadow: 0 20px 45px #0008;
  transform: translateY(var(--y, 0));
  transition: width .65s cubic-bezier(.2, .8, .2, 1), transform .65s cubic-bezier(.2, .8, .2, 1), filter .5s, box-shadow .5s;
  flex: 0 0 175px
}

.team-member:nth-child(1) {
  --y: 8px
}

.team-member:nth-child(2) {
  --y: 0px
}

.team-member:nth-child(3) {
  --y: 8px
}

.team-member:nth-child(4) {
  --y: 0px
}

.team-member img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.82) contrast(1.05);
  transition: transform 1s cubic-bezier(.2, .8, .2, 1), filter .6s
}

.team-member .member-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #060811dd, transparent 62%);
  transition: .5s
}

.team-member .member-caption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  opacity: 0;
  transform: translateY(15px);
  transition: .45s
}

.team-member .member-caption b {
  display: block;
  font-size: 15px;
  font-family: Manrope
}

.team-member .member-caption span {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #d2e5ff
}

.team-member .member-number {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  border: 1px solid #fff6;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 9px;
  color: #fff
}

.team-member:hover {
  width: 290px;
  flex-basis: 290px;
  transform: translateY(-18px) !important;
  box-shadow: 0 35px 70px #000b
}

.team-member:hover img {
  transform: scale(1.09);
  filter: saturate(1.15)
}

.team-member:hover .member-caption {
  opacity: 1;
  transform: none
}

.team-member:hover .member-shade {
  background: linear-gradient(0deg, #071428ef, #07142818 72%)
}

.team-member.active {
  width: 290px;
  flex-basis: 290px;
  transform: translateY(-18px) !important
}

.team-member.active .member-caption {
  opacity: 1;
  transform: none
}

.team-member.active img {
  transform: scale(1.07);
  filter: saturate(1.1)
}

.team-member.active .member-shade {
  background: linear-gradient(0deg, #071428ef, #07142818 72%)
}

.team-switch {
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5
}

.team-switch button {
  border: 0;
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  background: #ffffff55;
  transition: .35s
}

.team-switch button.active {
  width: 30px;
  border-radius: 10px;
  background: #fff
}

.team-v6-copy {
  text-align: center;
  max-width: 720px;
  margin: 8px auto 0;
  color: #b7c4d4;
  font-size: 13px;
  line-height: 1.8
}

.team-v6-copy strong {
  color: #fff
}

@media(max-width:750px) {
  .our-team-v6 {
    min-height: 720px
  }

  .team-stage {
    height: 360px
  }

  .team-members {
    gap: 7px
  }

  .team-member {
    width: 68px;
    flex-basis: 68px;
    height: 230px
  }

  .team-member:hover,
  .team-member.active {
    width: 145px;
    flex-basis: 145px
  }

  .team-v6-line {
    margin-bottom: 30px
  }
}

/* Scroll zoom / pinned visual feeling */
.zoom-banner {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #07162e
}

.zoom-banner .zoom-photo {
  position: absolute;
  inset: -8%;
  background-size: cover;
  background-position: center;
  transform: scale(1.25);
  transition: transform .2s linear;
  will-change: transform
}

.zoom-banner:after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 0%, #06142b55 48%, #06142be8 100%)
}

.zoom-banner-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  width: min(900px, 90%)
}

.zoom-banner h2 {
  font-family: Manrope;
  font-size: clamp(42px, 6vw, 78px);
  letter-spacing: -3px;
  line-height: 1.02;
  margin: 12px 0
}

.zoom-banner p {
  color: #d2ddeb;
  line-height: 1.8;
  max-width: 650px;
  margin: auto
}

/* Premium magnetic cards */
.magnetic {
  will-change: transform;
  transition: box-shadow .35s ease
}

.magnetic:hover {
  box-shadow: 0 35px 70px #06172b20
}

/* animated image mask */
.image-sweep {
  position: relative;
  overflow: hidden
}

.image-sweep:after {
  content: "";
  position: absolute;
  inset: -10%;
  background: linear-gradient(105deg, transparent 42%, #ffffff30 50%, transparent 58%);
  transform: translateX(-120%);
  transition: 1.1s ease
}

.image-sweep:hover:after {
  transform: translateX(120%)
}


/* V7 header animation polish */
.header .navbox {
  border-radius: 0 !important
}

@media(min-width:1181px) {
  .header .navbox {
    padding-left: clamp(32px, 5vw, 80px);
    padding-right: clamp(32px, 5vw, 80px)
  }
}

body.menu-open {
  overflow: hidden
}


/* ==========================================================
   V8 — ADVANCED KEKA-INSPIRED MOTION & INTERACTION SYSTEM
   Original implementation: slider, parallax, zoom, hover motion
   ========================================================== */
:root {
  --keka-purple: #6843cf;
  --keka-purple-2: #8a62ed;
  --soft-violet: #f2effc
}

/* page progress */
/* richer nav interactions */
.links>a,
.company-toggle {
  position: relative;
  overflow: hidden
}

.links>a:after,
.company-toggle:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 0;
  height: 2px;
  border-radius: 4px;
  background: var(--keka-purple);
  transform: translateX(-50%);
  transition: width .28s cubic-bezier(.2, .8, .2, 1)
}

.links>a:hover:after,
.company-toggle:hover:after,
.company-toggle.open:after {
  width: 55%
}

.links>a:hover,
.company-toggle:hover {
  transform: translateY(-1px)
}

.drop-menu a {
  position: relative;
  transition: transform .25s, color .25s, background .25s
}

.drop-menu a:hover {
  transform: translateX(5px)
}

.nav-cta {
  position: relative;
  overflow: hidden
}

.nav-cta:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, #ffffff38 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .8s ease
}

.nav-cta:hover:before {
  transform: translateX(120%)
}

/* HOME cinematic auto background slider */
.hero-motion {
  isolation: isolate;
  overflow: hidden
}

.hero-motion .hero-bg {
  display: none
}

.hero-slides {
  position: absolute;
  inset: 0;
  z-index: -3
}

.hero-slide {
  position: absolute;
  inset: -4%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.13);
  filter: saturate(.9) contrast(1.02);
  transition: opacity 1.25s ease, transform 8s cubic-bezier(.18, .72, .25, 1)
}

.hero-slide.is-active {
  opacity: 1;
  transform: scale(1)
}

.hero-slide:nth-child(even).is-active {
  transform: scale(1.08)
}

.hero-overlay {
  z-index: -2;
  background: linear-gradient(90deg, #07172fee 0%, #07172fbf 46%, #07172f60 100%) !important
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: none;
  pointer-events: none;
  z-index: -1;
  opacity: .35;
  mix-blend-mode: screen
}

.orb-a {
  width: 460px;
  height: 460px;
  right: -100px;
  top: 8%;
  background: radial-gradient(circle, #6e50d9aa, transparent 67%);
  animation: orbFloat 10s ease-in-out infinite
}

.orb-b {
  width: 320px;
  height: 320px;
  left: 35%;
  bottom: -180px;
  background: radial-gradient(circle, #27d1f577, transparent 68%);
  animation: orbFloat 13s ease-in-out infinite reverse
}

@keyframes orbFloat {

  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1)
  }

  50% {
    transform: translate3d(-40px, 28px, 0) scale(1.08)
  }
}

.hero-copy-motion {
  animation: heroCopyIn 1.15s .15s both cubic-bezier(.18, .8, .2, 1)
}

.hero-copy-motion h1 {
  animation: heroCopyIn 1.2s .28s both cubic-bezier(.18, .8, .2, 1)
}

.hero-copy-motion p {
  animation: heroCopyIn 1.2s .42s both cubic-bezier(.18, .8, .2, 1)
}

.hero-copy-motion .btns {
  animation: heroCopyIn 1.2s .56s both cubic-bezier(.18, .8, .2, 1)
}

.hero-side-motion {
  animation: heroSideIn 1.35s .35s both cubic-bezier(.18, .8, .2, 1)
}

@keyframes heroCopyIn {
  from {
    opacity: 0;
    transform: translateY(35px);
    filter: blur(8px)
  }

  to {
    opacity: 1;
    transform: none;
    filter: none
  }
}

@keyframes heroSideIn {
  from {
    opacity: 0;
    transform: translateX(55px) scale(.9)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.hero-progress {
  position: absolute;
  left: clamp(24px, 4vw, 70px);
  bottom: 155px;
  display: flex;
  gap: 8px;
  z-index: 5
}

.hero-progress .hp {
  width: 30px;
  height: 3px;
  border-radius: 4px;
  background: #ffffff50;
  overflow: hidden;
  transition: .35s
}

.hero-progress .hp.active {
  background: #fff;
  width: 58px;
  box-shadow: 0 0 12px #ffffff66
}

.hero-progress .hp.active:after {
  content: "";
  display: block;
  height: 100%;
  background: #6f4bdd;
  animation: progressFill 5.8s linear forwards
}

@keyframes progressFill {
  from {
    width: 0
  }

  to {
    width: 100%
  }
}

25% {
    opacity: 1
  }

  100% {
    opacity: 0;
    transform: translate(-50%, 18px)
  }
}

/* Scroll entrance variants applied automatically by JS */
.motion-up,
.motion-left,
.motion-right,
.motion-zoom,
.motion-fade {
  opacity: 0;
  will-change: transform, opacity
}

.motion-up {
  transform: translateY(52px)
}

.motion-left {
  transform: translateX(-70px)
}

.motion-right {
  transform: translateX(70px)
}

.motion-zoom {
  transform: scale(.86)
}

.motion-fade {
  filter: blur(9px)
}

.motion-up.in,
.motion-left.in,
.motion-right.in,
.motion-zoom.in,
.motion-fade.in {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity .85s ease, transform 1s cubic-bezier(.18, .75, .2, 1), filter .85s ease
}

/* Advanced image reveal and scroll zoom */
.img-motion {
  position: relative;
  overflow: hidden
}

.img-motion:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #ffffff00, #ffffff55, #ffffff00);
  transform: translateX(-120%);
  z-index: 2;
  pointer-events: none;
  transition: transform 1s cubic-bezier(.2, .75, .2, 1)
}

.img-motion:hover:before {
  transform: translateX(120%)
}

.img-motion img,
.img-motion .photo-main,
.img-motion .photo-small {
  transition: transform 1.1s cubic-bezier(.18, .75, .2, 1), filter .7s
}

.img-motion:hover img,
.img-motion:hover .photo-main {
  transform: scale(1.08)
}

.scroll-zoom {
  overflow: hidden
}

.scroll-zoom>img,
.scroll-zoom .photo-main {
  transition: transform .15s linear;
  will-change: transform
}

/* Cards and options: color, icon and lift interaction */
.card,
.step,
.team-card,
.float-panel,
.stat {
  transition: transform .45s cubic-bezier(.2, .75, .2, 1), box-shadow .45s, background .35s, border-color .35s, color .35s
}

.card:hover {
  transform: translateY(-12px) rotateX(2deg);
  box-shadow: 0 30px 65px #12234422
}

.card:hover .icon {
  transform: rotate(12deg) scale(1.12);
  color: #fff;
  background: linear-gradient(135deg, #5b36c7, #865de4)
}

.card .icon {
  transition: transform .45s, color .35s, background .35s
}

.step:hover {
  transform: translateY(-8px);
  background: #fff;
  box-shadow: 0 25px 55px #11213d18
}

.step:hover b {
  color: var(--keka-purple)
}

.float-panel:hover {
  transform: translateY(-10px) scale(1.025) !important;
  background: #ffffffee
}

.stat:hover {
  transform: translateY(-7px);
  color: #fff
}

.btn,
.mobile-demo {
  transition: transform .28s cubic-bezier(.2, .75, .2, 1), box-shadow .28s, background .28s, color .28s !important
}

.btn:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 18px 36px #06152d33
}

.full-image {
  background-attachment: fixed !important
}

.full-image .full-content {
  transition: transform .2s linear;
  will-change: transform
}

/* Links / footer / generic hover color */
a {
  transition: color .25s ease, opacity .25s ease
}

.footer a:hover {
  color: #a993ff !important;
  transform: translateX(4px);
  display: inline-block
}

.back {
  transition: transform .3s, background .3s, box-shadow .3s
}

.back:hover {
  transform: translateY(-5px) rotate(8deg);
  background: var(--keka-purple);
  box-shadow: 0 14px 28px #6c48dc55
}

/* slider becomes more cinematic */
.slider-window {
  overflow: hidden;
  border-radius: 28px;
  box-shadow: 0 30px 70px #10244a1c
}

.slide {
  transition: transform .9s cubic-bezier(.18, .75, .2, 1)
}

.slide-content {
  animation: none
}

.slider-window:hover .slide {
  filter: saturate(1.08)
}

.dots button {
  transition: width .35s, transform .35s, background .35s
}

.dots button:hover {
  transform: scale(1.25);
  background: var(--keka-purple)
}

.dots .active {
  width: 32px !important;
  background: var(--keka-purple) !important
}

/* reveal text character feeling */
.heading h2,
.story-copy h2,
.full-content h2,
.cta h2 {
  letter-spacing: -.7px
}

/* mobile performance */
@media(max-width:900px) {
  .full-image {
    background-attachment: scroll !important
  }

  .hero-progress {
    bottom: 120px
  }
}

@media(max-width:680px) {
  .hero-progress {
    left: 24px;
    bottom: 108px
  }

  .hero-progress .hp {
    width: 18px
  }

  .hero-progress .hp.active {
    width: 38px
  }

  .orb-a {
    width: 280px;
    height: 280px;
    right: -130px
  }

  .orb-b {
    width: 220px;
    height: 220px
  }

  .motion-left {
    transform: translateX(-35px)
  }

  .motion-right {
    transform: translateX(35px)
  }

  .motion-up {
    transform: translateY(32px)
  }
}

@media(prefers-reduced-motion:reduce) {

  *,
  *:before,
  *:after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important
  }
}


/* ==========================================================
   V9 — BLUE SCROLL HEADER + FASTER CINEMATIC MOTION
   ========================================================== */

/* Keka-style header state: white at top, blue after scrolling */
.header.scrolled .navbox {
  background: linear-gradient(100deg, #0b2a56 0%, #123f78 48%, #0a2f62 100%) !important;
  box-shadow: 0 16px 38px rgba(4, 20, 48, .28) !important;
}

.header.scrolled .links>a,
.header.scrolled .company-toggle {
  color: #edf5ff !important
}

.header.scrolled .links>a:hover,
.header.scrolled .company-toggle:hover,
.header.scrolled .company-toggle.open {
  color: #fff !important;
  background: rgba(255, 255, 255, .12) !important;
}

.header.scrolled .links>a:after,
.header.scrolled .company-toggle:after {
  background: #8fd7ff !important
}

.header.scrolled .brand-copy b {
  color: #fff !important
}

.header.scrolled .brand-copy em {
  color: #9cd8ff !important
}

.header.scrolled .brand-copy small {
  color: #c6ddf4 !important
}

.header.scrolled .brand-sun {
  background: linear-gradient(135deg, #3d91d7, #66bfff) !important;
  box-shadow: 0 8px 24px rgba(84, 181, 255, .32) !important;
}

.header.scrolled .brand-ray {
  background: #8fd7ff !important
}

.header.scrolled .menu-toggle span {
  background: #fff !important
}

.header.scrolled .nav-cta {
  background: linear-gradient(135deg, #7650dc, #9a76ff) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22) !important;
}

.header.scrolled .mobile-nav {
  background: linear-gradient(180deg, #0b2a56, #10396d) !important;
  box-shadow: 0 22px 45px rgba(3, 15, 40, .35) !important;
}

.header.scrolled .mobile-nav a,
.header.scrolled .mobile-company {
  color: #eef6ff !important;
  border-bottom-color: rgba(255, 255, 255, .13) !important
}

.header.scrolled .mobile-company span {
  color: #a7dcff !important
}

.header.scrolled .mobile-company-links a {
  color: #cfe7ff !important
}

/* Faster cinematic home background transitions */
.hero-slide {
  transition: opacity .78s ease, transform 4.3s cubic-bezier(.18, .72, .25, 1) !important;
}

.hero-slide.is-active {
  animation: heroPulse 3.8s ease-in-out both
}

@keyframes heroPulse {
  0% {
    filter: saturate(.88) contrast(1.02) brightness(.92)
  }

  48% {
    filter: saturate(1.05) contrast(1.06) brightness(1)
  }

  100% {
    filter: saturate(.96) contrast(1.03) brightness(.96)
  }
}

.hero-progress .hp.active:after {
  animation-duration: 3.7s !important
}

.hero-progress {
  backdrop-filter: none;
}

.hero-motion:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(115deg, transparent 0%, rgba(111, 75, 220, .08) 44%, rgba(45, 197, 246, .07) 62%, transparent 100%);
  animation: heroLightSweep 8s linear infinite;
}

@keyframes heroLightSweep {
  0% {
    transform: translateX(-30%)
  }

  50% {
    transform: translateX(12%)
  }

  100% {
    transform: translateX(30%)
  }
}

/* Animated image atmosphere across pages */
.full-image {
  overflow: hidden
}

.full-image:after {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background: radial-gradient(circle at 20% 30%, rgba(105, 79, 215, .18), transparent 30%),
    radial-gradient(circle at 75% 70%, rgba(45, 195, 244, .12), transparent 28%);
  animation: ambientMove 15s ease-in-out infinite alternate;
  z-index: 0;
}

.full-image .full-content {
  z-index: 2 !important
}

@keyframes ambientMove {
  0% {
    transform: translate3d(-2%, -2%, 0) scale(1)
  }

  50% {
    transform: translate3d(3%, 1%, 0) scale(1.08)
  }

  100% {
    transform: translate3d(-1%, 3%, 0) scale(1.03)
  }
}

/* Scroll background motion for every major section */
section.section-motion {
  overflow: hidden;
  isolation: isolate;
}

section.section-motion:before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  right: -250px;
  top: 8%;
  background: radial-gradient(circle, rgba(111, 75, 220, .09), transparent 68%);
  animation: sectionOrb 12s ease-in-out infinite alternate;
}

section.section-motion:after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  left: -230px;
  bottom: 5%;
  background: radial-gradient(circle, rgba(43, 195, 240, .07), transparent 68%);
  animation: sectionOrb 15s ease-in-out infinite alternate-reverse;
}

@keyframes sectionOrb {
  from {
    transform: translate3d(0, 0, 0) scale(.95)
  }

  to {
    transform: translate3d(-45px, 35px, 0) scale(1.12)
  }
}

/* Staggered content reveal for richer page movement */
.motion-stagger {
  transition-delay: var(--motion-delay, 0ms) !important
}

.motion-up.in,
.motion-left.in,
.motion-right.in,
.motion-zoom.in {
  animation: microSettle .7s .45s both;
}

@keyframes microSettle {
  0% {
    filter: brightness(.96)
  }

  65% {
    filter: brightness(1.03)
  }

  100% {
    filter: brightness(1)
  }
}

/* Premium hover interactions for all clickable options */
.links>a,
.company-toggle,
.drop-menu a,
.mobile-nav a,
.mobile-company,
.btn,
.nav-cta,
.card,
.step,
.team-card,
.team-member,
.stat,
.float-panel {
  will-change: transform;
}

.links>a:hover,
.company-toggle:hover {
  letter-spacing: .1px
}

.drop-menu {
  transform-origin: top center
}

.drop-menu a:before {
  content: "";
  display: inline-block;
  width: 0;
  height: 7px;
  border-radius: 50%;
  background: #7a55df;
  margin-right: 0;
  transition: width .25s, margin .25s;
}

.drop-menu a:hover:before {
  width: 7px;
  margin-right: 7px
}

.mobile-nav a {
  transition: padding-left .25s, background .25s, color .25s
}

.mobile-nav a:hover {
  padding-left: 12px;
  background: rgba(255, 255, 255, .06)
}

/* More visible image zoom and depth */
.photo-stack,
.team-card,
.slide,
.img-motion {
  transform-style: preserve-3d
}

.photo-stack:hover img {
  transform: scale(1.1) !important
}

.slide:hover .slide-content {
  transform: translateY(-8px)
}

.slide-content {
  transition: transform .5s cubic-bezier(.2, .75, .2, 1)
}

.card:after,
.team-card:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .17) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .85s ease;
}

.card:hover:after,
.team-card:hover:before {
  transform: translateX(120%)
}

/* Button and icon bounce/colour animation */
.btn:hover .icon,
.card:hover .icon {
  animation: iconPop .55s ease
}

@keyframes iconPop {

  0%,
  100% {
    transform: scale(1) rotate(0)
  }

  45% {
    transform: scale(1.18) rotate(10deg)
  }

  75% {
    transform: scale(.97) rotate(-4deg)
  }
}

/* Stronger section heading motion */
.heading .pill {
  transition: transform .35s, background .35s, color .35s
}

.heading:hover .pill {
  transform: translateX(8px);
  background: #eee9ff;
  color: #5c37c5
}

/* Floating visual motion without changing layout */
.photo-stack .photo-main,
.photo-stack .photo-small {
  animation: photoFloat 7s ease-in-out infinite;
}

.photo-stack .photo-small {
  animation-delay: -3.2s
}

@keyframes photoFloat {

  0%,
  100% {
    translate: 0 0
  }

  50% {
    translate: 0 -12px
  }
}

/* Home hero side visual gets extra depth */
.hero-side-motion .ring {
  animation: spin 24s linear infinite
}

.hero-side-motion .float-panel:nth-child(odd) {
  animation: panelFloat 6s ease-in-out infinite
}

.hero-side-motion .float-panel:nth-child(even) {
  animation: panelFloat 7s ease-in-out -2.5s infinite
}

@keyframes panelFloat {

  0%,
  100% {
    translate: 0 0
  }

  50% {
    translate: 0 -10px
  }
}

/* Scroll responsive safety */
@media(max-width:900px) {
  .full-image:after {
    animation-duration: 20s
  }

  section.section-motion:before {
    width: 260px;
    height: 260px
  }

  section.section-motion:after {
    width: 220px;
    height: 220px
  }
}

/* V10 HOME-ONLY CINEMATIC MOTION */
.hero-cinematic {
  perspective: 1200px
}

.hero-cinematic .hero-slide {
  will-change: opacity, transform, filter
}

.hero-cinematic .hero-slide:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 15%, rgba(255, 255, 255, .12) 48%, transparent 78%);
  transform: translateX(-130%);
  animation: heroSheen 5.5s ease-in-out infinite;
  pointer-events: none
}

@keyframes heroSheen {

  0%,
  45% {
    transform: translateX(-130%)
  }

  70%,
  100% {
    transform: translateX(130%)
  }
}

.hero-noise {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: screen
}

.hero-gridlines {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .13;
  background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(to bottom, transparent, black 25%, transparent);
  animation: gridDrift 18s linear infinite
}

@keyframes gridDrift {
  from {
    background-position: 0 0, 0 0
  }

  to {
    background-position: 80px 80px, 80px 80px
  }
}

.hero-cinematic .hero-slide.is-active {
  animation: heroCinematic 3.1s ease both
}

@keyframes heroCinematic {
  0% {
    opacity: 0;
    transform: scale(1.16);
    filter: blur(3px) brightness(.72)
  }

  16% {
    opacity: 1;
    filter: blur(0) brightness(.94)
  }

  65% {
    opacity: 1;
    transform: scale(1.045);
    filter: brightness(1)
  }

  100% {
    opacity: 1;
    transform: scale(1.075);
    filter: brightness(.96)
  }
}

.home-motion-section {
  position: relative;
  isolation: isolate;
  overflow: hidden
}

.home-motion-section:before {
  content: "";
  position: absolute;
  inset: -18% -10%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 15% 20%, rgba(105, 78, 216, .08), transparent 27%), radial-gradient(circle at 85% 75%, rgba(33, 177, 224, .06), transparent 25%);
  transition: transform .15s linear;
  will-change: transform
}

.hero-cinematic .btn {
  position: relative;
  overflow: hidden
}

.hero-cinematic .btn:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .24), transparent);
  transform: translateX(-180%) skewX(-18deg);
  transition: transform .75s
}

.hero-cinematic .btn:hover:after {
  transform: translateX(360%) skewX(-18deg)
}

@media(max-width:680px) {
}

@media(prefers-reduced-motion:reduce) {

  .hero-cinematic .hero-slide:after,
  .hero-gridlines,
  .hero-noise {
    animation: none !important
  }
}


/* ==========================================================
   V11 — VIDEO-STYLE TEAM + SITE-WIDE SCROLL MOTION
   ========================================================== */

/* Site-wide scroll reveal. No content/navigation changes. */
.motion-site .reveal-on-scroll,
.motion-site .motion-up,
.motion-site .motion-left,
.motion-site .motion-right,
.motion-site .motion-zoom,
.motion-site .card,
.motion-site .step,
.motion-site .team-card,
.motion-site .team-member,
.motion-site .stat,
.motion-site .photo-stack,
.motion-site .full-image,
.motion-site .slide,
.motion-site .content-block,
.motion-site .info-card {
  transition:
    opacity .85s cubic-bezier(.18, .72, .22, 1),
    transform .95s cubic-bezier(.18, .72, .22, 1),
    filter .85s ease;
}

.motion-site .scroll-animate {
  opacity: 0;
  transform: translate3d(0, 60px, 0) scale(.97);
  filter: none;
}

.motion-site .scroll-animate.from-left {
  transform: translate3d(-75px, 25px, 0) scale(.97)
}

.motion-site .scroll-animate.from-right {
  transform: translate3d(75px, 25px, 0) scale(.97)
}

.motion-site .scroll-animate.zoom-in {
  transform: scale(.82);
  filter: blur(6px)
}

.motion-site .scroll-animate.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: none;
}

.motion-site .scroll-animate.is-visible.from-left,
.motion-site .scroll-animate.is-visible.from-right {
  transform: translate3d(0, 0, 0) scale(1)
}

.motion-site .motion-image {
  overflow: hidden;
  position: relative;
}

.motion-site .motion-image img {
  transition: transform 1.35s cubic-bezier(.16, .72, .2, 1), filter 1.1s ease;
  will-change: transform;
}

.motion-site .motion-image.is-visible img {
  transform: scale(1.055)
}

.motion-site .motion-image:hover img {
  transform: scale(1.12);
  filter: saturate(1.08)
}

/* Subtle section parallax layer */
.motion-site .parallax-section {
  will-change: transform
}

.motion-site .parallax-section .section-bg {
  will-change: transform;
  transition: transform .15s linear;
}

/* TEAM — designed to reproduce the dark city / four-card cinematic feel */
.team-video-motion {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #080a10;
  min-height: 560px;
}

.team-video-motion:before {
  content: "";
  position: absolute;
  inset: -8%;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(5, 8, 14, .45), rgba(5, 7, 12, .8)),
    var(--team-bg, url("assets/images/team-city.jpg"));
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  transition: transform .2s linear;
  will-change: transform;
}

.team-video-motion:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 45%, rgba(112, 79, 220, .15), transparent 30%),
    linear-gradient(90deg, rgba(3, 7, 14, .6), transparent 30%, transparent 70%, rgba(3, 7, 14, .6));
}

.team-video-motion .team-stage {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: auto;
}

.team-video-motion .team-cards {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 18px;
  perspective: 1200px;
}

.team-video-motion .team-card,
.team-video-motion .team-member {
  position: relative;
  overflow: hidden;
  transform: translateY(0) scale(.96);
  transition:
    transform .75s cubic-bezier(.18, .75, .2, 1),
    opacity .75s ease,
    filter .75s ease,
    box-shadow .6s ease;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .34);
}

.team-video-motion .team-card img,
.team-video-motion .team-member img {
  transition: transform 1.15s cubic-bezier(.15, .7, .2, 1), filter .8s ease;
}

.team-video-motion .team-card:hover,
.team-video-motion .team-member:hover {
  transform: translateY(-14px) scale(1.045);
  z-index: 5;
  box-shadow: 0 28px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .15);
}

.team-video-motion .team-card:hover img,
.team-video-motion .team-member:hover img {
  transform: scale(1.12)
}

.team-video-motion [data-team-card] {
  opacity: 0;
  transform: translateY(65px) scale(.88);
}

.team-video-motion.team-visible [data-team-card] {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.team-video-motion.team-visible [data-team-card]:nth-child(1) {
  transition-delay: .05s
}

.team-video-motion.team-visible [data-team-card]:nth-child(2) {
  transition-delay: .16s
}

.team-video-motion.team-visible [data-team-card]:nth-child(3) {
  transition-delay: .27s
}

.team-video-motion.team-visible [data-team-card]:nth-child(4) {
  transition-delay: .38s
}

.team-video-motion [data-team-card].team-focus {
  transform: translateY(-9px) scale(1.07) !important;
  filter: saturate(1.12) brightness(1.05);
  z-index: 4;
}

.team-video-motion [data-team-card]:not(.team-focus) {
  filter: saturate(.82) brightness(.86);
}

/* Team title line and diamond, like the reference video */
.team-video-motion .team-title {
  position: relative;
  text-align: center;
  margin-bottom: 44px;
}

.team-video-motion .team-title:after {
  content: "";
  display: block;
  width: 130px;
  height: 1px;
  margin: 17px auto 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
}

.team-video-motion .team-title:before {
  content: "◇";
  position: absolute;
  left: 50%;
  bottom: -28px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .8);
  font-size: 14px;
  animation: teamDiamond 2.2s ease-in-out infinite;
}

@keyframes teamDiamond {

  0%,
  100% {
    transform: translateX(-50%) translateY(0) rotate(0)
  }

  50% {
    transform: translateX(-50%) translateY(5px) rotate(45deg)
  }
}

/* Auto-focus glow changes across team cards */
.team-video-motion .team-card:after,
.team-video-motion .team-member:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 25%, rgba(255, 255, 255, .2) 50%, transparent 75%);
  transform: translateX(-130%);
  transition: transform .9s ease;
}

.team-video-motion .team-card.team-focus:after,
.team-video-motion .team-member.team-focus:after {
  transform: translateX(130%)
}

/* Floating team background lights */
.team-video-motion .team-light {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, rgba(118, 87, 230, .25), transparent 68%);
  filter: none;
  animation: teamLightFloat 9s ease-in-out infinite alternate;
}

.team-video-motion .team-light.one {
  width: 260px;
  height: 260px;
  left: 5%;
  top: 12%
}

.team-video-motion .team-light.two {
  width: 210px;
  height: 210px;
  right: 8%;
  bottom: 10%;
  animation-delay: -4s
}

@keyframes teamLightFloat {
  from {
    transform: translate3d(0, 0, 0) scale(.92)
  }

  to {
    transform: translate3d(30px, -22px, 0) scale(1.12)
  }
}

/* Mobile team stack */
@media(max-width:760px) {
  .team-video-motion {
    min-height: 620px
  }

  .team-video-motion .team-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px
  }

  .team-video-motion [data-team-card].team-focus {
    transform: translateY(-5px) scale(1.025) !important
  }
}

@media(max-width:480px) {
  .team-video-motion .team-cards {
    grid-template-columns: 1fr 1fr
  }
}

@media(prefers-reduced-motion:reduce) {
  .motion-site .scroll-animate {
    opacity: 1;
    transform: none;
    filter: none
  }

  .team-video-motion [data-team-card] {
    opacity: 1;
    transform: none
  }

  .team-video-motion:before {
    transform: none
  }
}

/* =========================================================
   V13 — Reference-video scroll choreography
   Non-destructive enhancement: preserves existing content,
   navigation and links while adding continuous scroll motion.
   ========================================================= */
:root {
  --ref-ease: cubic-bezier(.16, 1, .3, 1)
}

html {
  scroll-behavior: smooth
}

.section-motion {
  --ref-progress: 0;
  --ref-shift: 0px;
  --ref-scale: 1;
  will-change: transform
}

.section-motion>.wrap,
.section-motion>.container {
  will-change: transform, opacity, filter;
  transform: translate3d(0, var(--ref-shift), 0) scale(var(--ref-scale));
  transform-origin: 50% 52%;
  transition: filter .15s linear;
}

.section-motion.ref-past>.wrap,
.section-motion.ref-past>.container {
  filter: brightness(.96)
}

.section-motion.ref-near>.wrap,
.section-motion.ref-near>.container {
  filter: brightness(1.03)
}

/* Cinematic image movement — the picture moves independently from text. */
section .scroll-zoom,
section .photo-stack img,
section .photo-main,
section .full-image,
section .zoom-photo,
section .hero-slide {
  will-change: transform;
}

.ref-img-motion {
  transform: translate3d(0, var(--img-y, 0px), 0) scale(var(--img-scale, 1.04)) !important;
}

.ref-bg-motion {
  will-change: transform;
}

/* More pronounced entrance states, while retaining the site's existing reveal system. */
.ref-enter {
  opacity: 0;
  transform: translate3d(0, 48px, 0) scale(.94);
  filter: none;
  will-change: transform, opacity, filter
}

.ref-enter.ref-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: none;
  transition: opacity .9s ease, transform 1.05s var(--ref-ease), filter .9s ease
}

.ref-enter.ref-left {
  transform: translate3d(-70px, 35px, 0) scale(.94)
}

.ref-enter.ref-right {
  transform: translate3d(70px, 35px, 0) scale(.94)
}

.ref-enter.ref-zoom {
  transform: translate3d(0, 55px, 0) scale(.84)
}

.ref-enter.ref-in.ref-left,
.ref-enter.ref-in.ref-right,
.ref-enter.ref-in.ref-zoom {
  transform: translate3d(0, 0, 0) scale(1)
}

/* Team section — closer to the supplied cinematic reference. */
.team-video-motion {
  min-height: 760px;
  perspective: 1200px;
  background: #05070d;
}

.team-video-motion:before {
  transform: translate3d(0, var(--team-bg-y, 0px), 0) scale(var(--team-bg-scale, 1.10));
  transition: none;
  background-position: center center;
}

.team-video-motion .city-bg {
  opacity: .18;
  transform: translate3d(0, var(--team-city-y, 0px), 0) scale(var(--team-city-scale, 1.08)) !important;
}

.team-video-motion .team-v6-inner {
  position: relative;
  z-index: 3;
  padding-top: 92px;
  padding-bottom: 80px
}

.team-video-motion .team-v6-head {
  text-align: center;
  transform: translate3d(0, var(--team-head-y, 0px), 0) scale(var(--team-head-scale, 1));
  will-change: transform
}

.team-video-motion .team-v6-head .eyebrow {
  letter-spacing: .25em;
  text-transform: uppercase;
  font-size: 11px;
  opacity: .62;
  margin-bottom: 10px
}

.team-video-motion .team-v6-head h2,
.team-video-motion .team-title {
  margin: 0;
  font-family: "Brush Script MT", "Segoe Script", cursive;
  font-weight: 500;
  font-size: clamp(54px, 7vw, 92px);
  line-height: .9;
  letter-spacing: -.035em;
  color: #fff;
  text-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}

.team-video-motion .team-v6-head:after {
  content: "";
  display: block;
  width: 190px;
  height: 1px;
  margin: 25px auto 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent);
}

.team-video-motion .team-v6-head:before {
  content: "☆";
  display: block;
  position: absolute;
  left: 50%;
  margin-top: 105px;
  transform: translateX(-50%);
  font-family: serif;
  font-size: 18px;
  color: rgba(255, 255, 255, .85);
  z-index: 2;
}

.team-video-motion .team-v6-line {
  display: none
}

.team-video-motion .team-stage {
  margin-top: 62px;
  transform: translate3d(0, var(--team-stage-y, 0px), 0) scale(var(--team-stage-scale, 1));
  will-change: transform
}

.team-video-motion .team-members {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 16px;
  perspective: 1400px;
  min-height: 370px
}

.team-video-motion .team-member {
  flex: 1 1 0;
  max-width: 250px;
  height: 370px;
  border-radius: 2px;
  opacity: 0;
  transform: translate3d(0, 90px, 0) rotateX(8deg) scale(.88);
  transition: opacity .9s ease, transform 1.1s var(--ref-ease), filter .7s ease, box-shadow .7s ease, flex-basis .65s var(--ref-ease);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .48);
}

.team-video-motion.team-visible .team-member {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotateX(0) scale(1)
}

.team-video-motion.team-visible .team-member:nth-child(1) {
  transition-delay: .05s
}

.team-video-motion.team-visible .team-member:nth-child(2) {
  transition-delay: .14s
}

.team-video-motion.team-visible .team-member:nth-child(3) {
  transition-delay: .23s
}

.team-video-motion.team-visible .team-member:nth-child(4) {
  transition-delay: .32s
}

.team-video-motion .team-member img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 1.2s var(--ref-ease), filter .7s ease
}

.team-video-motion .team-member:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, .72));
  opacity: .8;
  transition: opacity .55s ease;
}

.team-video-motion .team-member:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .2) 50%, transparent 80%);
  transform: translateX(-130%);
  transition: transform 1s ease;
}

.team-video-motion .team-member.team-focus {
  transform: translate3d(0, -16px, 0) scale(1.065) !important;
  filter: saturate(1.08) brightness(1.08);
  z-index: 8;
  box-shadow: 0 38px 90px rgba(0, 0, 0, .62)
}

.team-video-motion .team-member.team-focus img {
  transform: scale(1.15);
  filter: saturate(1.05)
}

.team-video-motion .team-member.team-focus:after {
  transform: translateX(130%)
}

.team-video-motion .team-member.team-focus:before {
  background: linear-gradient(180deg, rgba(242, 48, 105, .18), rgba(242, 48, 105, .82))
}

.team-video-motion .member-shade {
  z-index: 3;
  transition: background .5s ease
}

.team-video-motion .team-member.team-focus .member-shade {
  background: linear-gradient(180deg, rgba(235, 42, 102, .08), rgba(235, 42, 102, .58)) !important
}

.team-video-motion .member-caption {
  z-index: 6;
  transform: translateY(14px);
  transition: transform .65s var(--ref-ease), opacity .5s ease
}

.team-video-motion .team-member.team-focus .member-caption {
  transform: translateY(0)
}

.team-video-motion .member-caption b {
  font-size: 17px
}

.team-video-motion .member-caption span {
  font-size: 11px;
  opacity: .88
}

.team-video-motion .team-member.team-focus .member-caption b,
.team-video-motion .team-member.team-focus .member-caption span {
  color: #fff
}

.team-video-motion .member-number {
  z-index: 7;
  transition: opacity .4s ease
}

.team-video-motion .team-member.team-focus .member-number {
  opacity: .9
}

.team-video-motion .team-switch {
  position: relative;
  z-index: 10;
  margin-top: 28px;
  display: flex;
  justify-content: center;
  gap: 8px
}

.team-video-motion .team-switch button {
  width: 28px;
  height: 3px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .28);
  transition: width .4s ease, background .4s ease, transform .4s ease;
  cursor: pointer
}

.team-video-motion .team-switch button.active {
  width: 52px;
  background: #f24a86;
  transform: translateY(-1px)
}

.team-video-motion .team-v6-copy {
  max-width: 640px;
  margin: 45px auto 0;
  text-align: center;
  line-height: 1.8;
  color: rgba(255, 255, 255, .68);
  transform: translate3d(0, var(--team-copy-y, 0px), 0);
  will-change: transform
}

.team-video-motion .team-v6-copy strong {
  color: #fff
}

.team-video-motion .team-light {
  opacity: .55
}

.team-video-motion .noise {
  opacity: .16
}

/* Continuous light sweep across the team scene. */
.team-video-motion .team-v6-inner:after {
  content: "";
  position: absolute;
  left: -30%;
  top: 0;
  width: 18%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .055), transparent);
  transform: skewX(-12deg) translateX(0);
  animation: refTeamSweep 7s ease-in-out infinite;
  z-index: 20;
}

@keyframes refTeamSweep {

  0%,
  38% {
    transform: skewX(-12deg) translateX(-30vw)
  }

  62%,
  100% {
    transform: skewX(-12deg) translateX(145vw)
  }
}

/* Active team card also gets the reference's pink/red visual focus on touch/keyboard. */
.team-video-motion .team-member:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px
}

@media(max-width:760px) {

  .section-motion>.wrap,
  .section-motion>.container {
    transform: translate3d(0, calc(var(--ref-shift) * .72), 0) scale(calc(.995 + (var(--ref-scale) - .995) * .72))
  }

  .team-video-motion {
    min-height: 700px
  }

  .team-video-motion .team-v6-inner {
    padding-top: 70px
  }

  .team-video-motion .team-stage {
    margin-top: 48px
  }

  .team-video-motion .team-members {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    min-height: 0
  }

  .team-video-motion .team-member {
    max-width: none;
    height: 270px
  }

  .team-video-motion .team-member.team-focus {
    transform: translate3d(0, -7px, 0) scale(1.035) !important
  }

  .team-video-motion .team-v6-head:before {
    margin-top: 88px
  }
}

@media(max-width:480px) {
  .team-video-motion .team-members {
    gap: 9px
  }

  .team-video-motion .team-member {
    height: 235px
  }

  .team-video-motion .team-v6-head h2 {
    font-size: 58px
  }
}

@media(prefers-reduced-motion:reduce) {

  .section-motion>.wrap,
  .section-motion>.container {
    transform: none !important
  }

  .ref-enter {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important
  }

  .team-video-motion:before,
  .team-video-motion .city-bg {
    transform: none !important
  }

  .team-video-motion .team-v6-inner:after {
    animation: none
  }
}


/* ================= V14 — POLISHED KEKA-LIKE MOTION + RESPONSIVE SAFETY ================= */
:root {
  --motion-ease: cubic-bezier(.2, .75, .15, 1);
  --header-h: 104px
}

html {
  scroll-padding-top: 90px
}

body.page-motion {
  min-width: 320px
}

body.menu-open {
  overflow: hidden
}

img {
  max-width: 100%;
  height: auto
}

button,
a {
  touch-action: manipulation
}

/* Page-level transition / first paint */
.page-motion {
  animation: pageIn .7s var(--motion-ease) both
}

@keyframes pageIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

/* Shared premium reveal states — non-destructive to the existing layout */
.motion-up,
.motion-left,
.motion-right,
.motion-zoom,
.motion-fade {
  will-change: transform, opacity, filter
}

.motion-up {
  opacity: 0;
  transform: translate3d(0, 55px, 0)
}

.motion-left {
  opacity: 0;
  transform: translate3d(-55px, 0, 0)
}

.motion-right {
  opacity: 0;
  transform: translate3d(55px, 0, 0)
}

.motion-zoom {
  opacity: 0;
  transform: scale(.92);
  filter: blur(4px)
}

.motion-fade {
  opacity: 0
}

.motion-up.in,
.motion-left.in,
.motion-right.in,
.motion-zoom.in,
.motion-fade.in {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity .9s ease, transform 1s var(--motion-ease), filter .9s ease
}

.motion-up:nth-child(2),
.motion-left:nth-child(2),
.motion-right:nth-child(2),
.motion-zoom:nth-child(2) {
  transition-delay: .08s
}

.motion-up:nth-child(3),
.motion-left:nth-child(3),
.motion-right:nth-child(3),
.motion-zoom:nth-child(3) {
  transition-delay: .16s
}

.motion-up:nth-child(4),
.motion-left:nth-child(4),
.motion-right:nth-child(4),
.motion-zoom:nth-child(4) {
  transition-delay: .24s
}

/* Smooth image movement without changing the existing crop */
.img-motion {
  will-change: transform;
  transition: transform 1s var(--motion-ease), filter .8s ease
}

.card,
.team-card,
.float-panel,
.btn,
.nav-cta {
  will-change: transform
}

.card:after,
.team-card:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
  background: linear-gradient(120deg, transparent 25%, rgba(255, 255, 255, .16) 50%, transparent 75%);
  transform: translateX(-110%)
}

.card:hover:after,
.team-card:hover:before {
  opacity: 1;
  animation: shineSweep 1s var(--motion-ease)
}

@keyframes shineSweep {
  to {
    transform: translateX(110%)
  }
}

/* Better mobile navigation: the hamburger is always the source of truth below tablet width */
@media(max-width:1180px) {
  .navbox {
    height: 88px;
    padding: 0 clamp(18px, 4vw, 34px)
  }

  .mobile-nav {
    top: 88px
  }

  .header.scrolled .mobile-nav {
    top: 72px
  }

  .brand {
    min-width: 0
  }
}

@media(max-width:680px) {
  .navbox {
    min-height: 72px;
    height: 72px;
    padding: 0 16px
  }

  .mobile-nav,
  .header.scrolled .mobile-nav {
    top: 72px
  }

  .brand-copy small {
    display: none
  }

  .nav-actions {
    gap: 10px
  }

  .nav-cta {
    display: inline-flex;
    min-width: 104px;
    height: 44px;
    padding: 0 12px !important
  }

  .menu-toggle {
    width: 32px;
    height: 32px
  }

  .hero {
    min-height: 760px
  }

  .hero-grid {
    padding-top: 110px;
    gap: 24px
  }

  .hero h1 {
    font-size: clamp(42px, 12vw, 62px);
    letter-spacing: -2.5px
  }

  .hero p {
    font-size: 15px;
    line-height: 1.7
  }

  .btns {
    gap: 9px
  }

  .btn {
    padding: 13px 16px
  }

  .hero-bottom {
    position: relative;
    margin-top: -110px
  }

  .stats {
    grid-template-columns: 1fr 1fr
  }

  .stat {
    padding: 16px 12px
  }

  section {
    padding: 72px 0
  }

  .wrap {
    width: min(1200px, 90%)
  }

  .story-grid,
  .contact-grid,
  .split-page,
  .team-inner {
    gap: 32px
  }

  .story-copy h2,
  .article h2 {
    font-size: clamp(32px, 9vw, 44px)
  }

  .heading h2 {
    font-size: clamp(32px, 9vw, 48px)
  }

  .photo-stack {
    height: 420px
  }

  .photo-main {
    height: 350px
  }

  .photo-small {
    height: 175px
  }

  .full-image {
    min-height: 520px
  }

  .full-content {
    padding-bottom: 60px
  }

  .slide {
    padding: 34px;
    min-height: 430px
  }

  .slide h3 {
    font-size: clamp(32px, 8vw, 46px)
  }

  .page-hero .wrap {
    padding-bottom: 65px
  }

  .cta {
    padding: 44px 26px
  }

  .cta h2 {
    font-size: clamp(34px, 9vw, 48px)
  }

  .footer-grid {
    grid-template-columns: 1fr
  }
}

@media(max-width:480px) {
  .nav-cta {
    display: none
  }

  .brand-mark {
    width: 36px;
    height: 36px
  }

  .hero {
    min-height: 700px
  }

  .hero-grid {
    padding-top: 100px
  }

  .hero-bottom {
    margin-top: -75px
  }

  .stats {
    grid-template-columns: 1fr
  }

  .stat {
    border-right: 0 !important
  }

  .photo-stack {
    height: 350px
  }

  .photo-main {
    height: 285px
  }

  .photo-small {
    height: 150px;
    border-width: 5px
  }

  .photo-badge {
    left: 12px;
    bottom: 18px;
    padding: 11px 12px;
    font-size: 10px
  }

  .team-orbit {
    height: 360px
  }

  .member {
    width: 94px;
    height: 126px
  }

  .member.m3 {
    left: 24px
  }

  .member.m4 {
    right: 24px
  }

  .team-center {
    width: 104px;
    height: 104px;
    font-size: 13px
  }

  .article {
    padding: 24px
  }

  .copy {
    font-size: 10px
  }
}

/* Respect user accessibility settings and avoid transform conflicts on reduced motion */
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  .page-motion {
    animation: none
  }

  .motion-up,
  .motion-left,
  .motion-right,
  .motion-zoom,
  .motion-fade,
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important
  }

  .img-motion,
  .card:after,
  .team-card:before {
    transition: none !important;
    animation: none !important
  }
}

.page-motion.leaving {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease
}

/* ==========================================================
   V15 — REFERENCE VIDEO STICKY BACKGROUND
   The image belongs to the section and stays fixed while the
   section content and following sections continue to scroll.
   ========================================================== */
.full-image.sticky-bg {
  background-attachment: fixed !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  transform: none !important;
  will-change: auto;
  isolation: isolate;
}

.full-image.sticky-bg .full-content {
  transform: none !important;
  position: relative;
  z-index: 2
}

.full-image.sticky-bg:before {
  z-index: 1
}

@media(max-width:900px) {
  .full-image.sticky-bg {
    background-attachment: scroll !important
  }
}

/* V15 — Our Team reference-match polish: scroll-led cinematic cards + cleaner mobile edge */
.our-team-v6 {
  isolation: isolate;
  min-height: 100svh;
  display: block
}

.our-team-v6 .city-bg {
  position: absolute;
  inset: -5% 0;
  background-position: center 58%;
  transform: scale(1.1);
  will-change: transform;
  transition: transform .12s linear;
}

.our-team-v6:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(7, 10, 20, .16) 28%, rgba(7, 10, 20, .72) 100%);
}

.team-v6-inner {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: clamp(72px, 10vh, 108px);
  padding-bottom: clamp(42px, 7vh, 78px)
}

.team-v6-head {
  transform: translateY(var(--team-head-y, 0));
  transition: transform .15s linear
}

.team-v6-head .eyebrow,
.team-v6-head h2 {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.2, .8, .2, 1)
}

.team-visible .team-v6-head .eyebrow {
  opacity: 1;
  transform: none;
  transition-delay: .05s
}

.team-visible .team-v6-head h2 {
  opacity: 1;
  transform: none;
  transition-delay: .18s
}

.team-v6-line {
  opacity: 0;
  transform: scaleX(.45);
  transform-origin: center;
  transition: opacity .8s ease .28s, transform 1s cubic-bezier(.2, .8, .2, 1) .28s
}

.team-visible .team-v6-line {
  opacity: 1;
  transform: scaleX(1)
}

.team-stage {
  transform: translateY(var(--team-stage-y, 0)) scale(var(--team-stage-scale, 1));
  transition: transform .15s linear
}

.team-members {
  align-items: center
}

.team-member {
  opacity: 0;
  transform: translateY(55px) scale(.94);
  transition: opacity .75s ease, transform .9s cubic-bezier(.2, .8, .2, 1), width .65s cubic-bezier(.2, .8, .2, 1), flex-basis .65s cubic-bezier(.2, .8, .2, 1), box-shadow .5s, filter .5s
}

.team-visible .team-member:nth-child(1) {
  opacity: 1;
  transform: translateY(var(--y, 0)) scale(1);
  transition-delay: .34s
}

.team-visible .team-member:nth-child(2) {
  opacity: 1;
  transform: translateY(var(--y, 0)) scale(1);
  transition-delay: .46s
}

.team-visible .team-member:nth-child(3) {
  opacity: 1;
  transform: translateY(var(--y, 0)) scale(1);
  transition-delay: .58s
}

.team-visible .team-member:nth-child(4) {
  opacity: 1;
  transform: translateY(var(--y, 0)) scale(1);
  transition-delay: .70s
}

.team-member.team-focus {
  filter: brightness(1.06)
}

.team-v6-copy {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s ease .82s, transform .8s ease .82s
}

.team-visible .team-v6-copy {
  opacity: 1;
  transform: none
}

@media(max-width:750px) {
  .our-team-v6 {
    min-height: 100svh;
    overflow: hidden
  }

  .our-team-v6 .city-bg {
    inset: -8% 0;
    background-position: center 54%;
    transform: scale(1.13)
  }

  .our-team-v6:after {
    height: 30%;
    background: linear-gradient(180deg, transparent 0%, rgba(7, 10, 20, .28) 35%, rgba(7, 10, 20, .94) 100%)
  }

  .team-v6-inner {
    min-height: 100svh;
    padding: 70px 0 36px
  }

  .team-v6-head .eyebrow {
    font-size: 13px;
    margin-bottom: 10px
  }

  .team-v6-head h2 {
    font-size: clamp(42px, 13vw, 58px)
  }

  .team-v6-line {
    width: 88%;
    margin: 20px auto 28px
  }

  .team-stage {
    height: auto;
    min-height: 285px;
    width: 100%;
    display: flex;
    align-items: center
  }

  .team-members {
    width: 100%;
    height: 220px;
    gap: 6px;
    padding: 0 10px;
    align-items: stretch;
    overflow: visible
  }

  .team-member,
  .team-member:hover,
  .team-member.active {
    width: auto;
    flex: 1 1 0;
    flex-basis: 0;
    height: 220px;
    min-width: 0;
    transform: translateY(var(--y, 0)) !important
  }

  .team-member.active {
    flex: 2 1 0
  }

  .team-member:hover {
    flex: 2 1 0
  }

  .team-member .member-caption {
    left: 10px;
    right: 10px;
    bottom: 10px
  }

  .team-member .member-caption b {
    font-size: 12px
  }

  .team-member .member-caption span {
    font-size: 8px;
    letter-spacing: .7px
  }

  .team-member .member-number {
    top: 8px;
    right: 8px;
    width: 21px;
    height: 21px;
    font-size: 8px
  }

  .team-switch {
    bottom: 10px
  }

  .team-v6-copy {
    position: relative;
    z-index: 2;
    width: 88%;
    font-size: 11px;
    line-height: 1.65;
    margin: 0 auto
  }
}

@media(max-width:380px) {
  .team-v6-inner {
    padding-top: 64px
  }

  .team-members {
    height: 205px;
    gap: 5px;
    padding: 0 8px
  }

  .team-member,
  .team-member:hover,
  .team-member.active {
    height: 205px
  }

  .team-stage {
    min-height: 270px
  }

  .team-v6-copy {
    font-size: 10px
  }
}

/* Focus card is the animated wide card seen in the reference video. */
.team-member.team-focus {
  width: 290px;
  flex-basis: 290px;
  transform: translateY(-18px) !important;
  box-shadow: 0 35px 70px #000b;
}

.team-member.team-focus img {
  transform: scale(1.07);
  filter: saturate(1.1)
}

.team-member.team-focus .member-caption {
  opacity: 1;
  transform: none
}

.team-member.team-focus .member-shade {
  background: linear-gradient(0deg, #071428ef, #07142818 72%)
}

@media(max-width:750px) {

  .team-member.team-focus,
  .team-member.team-focus:hover {
    width: auto;
    flex: 2 1 0;
    flex-basis: 0;
    transform: translateY(var(--y, 0)) !important;
    box-shadow: 0 28px 55px #000b
  }
}


/* V16 FINAL — Our Team matched to the supplied reference frame. */
.our-team-v6.team-video-motion {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: calc(100svh - var(--header-h, 72px));
  background: #07101c;
  color: #fff;
  display: block;
}

.our-team-v6.team-video-motion .city-bg {
  position: absolute;
  inset: -4% -2%;
  z-index: 0;
  opacity: 1 !important;
  background-image: linear-gradient(180deg, rgba(4, 9, 18, .22), rgba(4, 9, 18, .44) 58%, rgba(4, 9, 18, .72)), url('assets/images/team-city-clean.jpg') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  transform: translate3d(0, var(--team-city-y, 0), 0) scale(var(--team-city-scale, 1.02)) !important;
  filter: saturate(.82) contrast(1.05);
  will-change: transform;
}

.our-team-v6.team-video-motion:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(3, 8, 16, .84) 0%, rgba(3, 8, 16, .60) 38%, rgba(3, 8, 16, .22) 72%), linear-gradient(180deg, rgba(3, 8, 16, .46) 0%, rgba(4, 10, 19, .24) 34%, rgba(4, 9, 17, .62) 100%);
}

.our-team-v6.team-video-motion:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(4, 10, 18, .16) 35%, rgba(4, 10, 18, .80));
}

.our-team-v6.team-video-motion .noise {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: .10;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .14) .6px, transparent .7px);
  background-size: 4px 4px;
  mix-blend-mode: soft-light
}

.our-team-v6.team-video-motion .team-v6-inner {
  position: relative;
  z-index: 4;
  min-height: inherit;
  box-sizing: border-box;
  width: min(100%, 1100px);
  margin: 0 auto;
  padding: clamp(28px, 5vh, 48px) 24px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.our-team-v6.team-video-motion .team-v6-head {
  width: 100%;
  text-align: center;
  transform: translate3d(0, var(--team-head-y, 0), 0) !important
}

.our-team-v6.team-video-motion .team-v6-head .eyebrow {
  margin: 0 0 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .02em;
  text-transform: none;
  font-style: italic;
  font-weight: 400;
  color: rgba(255, 255, 255, .90);
  opacity: 1;
}

.our-team-v6.team-video-motion .team-v6-head h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 5vw, 62px);
  font-weight: 400;
  font-style: italic;
  line-height: .95;
  letter-spacing: -.045em;
  color: #fff;
  text-shadow: 0 6px 24px rgba(0, 0, 0, .34);
}

.our-team-v6.team-video-motion .team-v6-head:before {
  content: none !important
}

.our-team-v6.team-video-motion .team-v6-head:after {
  content: none !important
}

.our-team-v6.team-video-motion .team-v6-line {
  display: block;
  width: min(520px, 72%);
  height: 1px;
  margin: 19px auto 0;
  opacity: 1;
  transform: none;
  background: rgba(255, 255, 255, .48);
  position: relative;
}

.our-team-v6.team-video-motion .team-v6-line:before,
.our-team-v6.team-video-motion .team-v6-line:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border: 1px solid rgba(255, 255, 255, .58);
  background: #091322;
  border-radius: 50%;
  transform: translateY(-50%);
  box-sizing: border-box;
}

.our-team-v6.team-video-motion .team-v6-line:before {
  left: 28%
}

.our-team-v6.team-video-motion .team-v6-line:after {
  right: 28%
}

.our-team-v6.team-video-motion .team-stage {
  width: 100%;
  height: auto;
  max-width: 650px;
  margin: 24px auto 0;
  transform: translate3d(0, var(--team-stage-y, 0), 0) scale(var(--team-stage-scale, 1)) !important;
  position: relative;
}

.our-team-v6.team-video-motion .team-stage:before {
  content: none
}

.our-team-v6.team-video-motion .team-members {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 7px;
  height: 170px;
  min-height: 170px;
  padding: 0;
  perspective: 1200px;
  overflow: visible;
}

.our-team-v6.team-video-motion .team-member {
  position: relative;
  flex: 0 0 104px;
  width: 104px;
  max-width: none;
  height: 170px;
  min-width: 0;
  overflow: hidden;
  border-radius: 0;
  background: #111b2a;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .48);
  opacity: 1 !important;
  transform: translate3d(0, var(--y, 0), 0) !important;
  transition: flex-basis .72s cubic-bezier(.22, .72, .18, 1), width .72s cubic-bezier(.22, .72, .18, 1), transform .72s cubic-bezier(.22, .72, .18, 1), filter .55s ease, box-shadow .55s ease;
}

.our-team-v6.team-video-motion .team-member:nth-child(1) {
  --y: 8px
}

.our-team-v6.team-video-motion .team-member:nth-child(2) {
  --y: 0px
}

.our-team-v6.team-video-motion .team-member:nth-child(3) {
  --y: 8px
}

.our-team-v6.team-video-motion .team-member:nth-child(4) {
  --y: 0px
}

.our-team-v6.team-video-motion .team-member img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(.82) contrast(1.04);
  transform: scale(1.015);
  transition: transform .8s cubic-bezier(.2, .8, .2, 1), filter .6s ease
}

.our-team-v6.team-video-motion .member-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(4, 8, 15, .02) 28%, rgba(4, 8, 15, .18) 48%, rgba(4, 8, 15, .88) 100%) !important;
  transition: background .55s ease
}

.our-team-v6.team-video-motion .team-member:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(180deg, transparent 55%, rgba(4, 8, 15, .46));
  pointer-events: none;
  opacity: .65
}

.our-team-v6.team-video-motion .team-member:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, .18) 50%, transparent 80%);
  transform: translateX(-135%);
  transition: transform .95s ease;
  pointer-events: none
}

.our-team-v6.team-video-motion .team-member.team-focus {
  flex-basis: 156px;
  width: 156px;
  transform: translate3d(0, -7px, 0) !important;
  filter: brightness(1.07) saturate(1.04);
  box-shadow: 0 26px 58px rgba(0, 0, 0, .64);
  z-index: 8;
}

.our-team-v6.team-video-motion .team-member.team-focus img {
  transform: scale(1.045);
  filter: saturate(1.02) contrast(1.04)
}

.our-team-v6.team-video-motion .team-member.team-focus:after {
  transform: translateX(135%)
}

.our-team-v6.team-video-motion .team-member.team-focus .member-shade {
  background: linear-gradient(180deg, rgba(4, 8, 15, .01) 24%, rgba(4, 8, 15, .10) 48%, rgba(4, 8, 15, .92) 100%) !important
}

.our-team-v6.team-video-motion .member-caption {
  position: absolute;
  left: 12px;
  right: 8px;
  bottom: 10px;
  z-index: 6;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity .4s ease, transform .55s cubic-bezier(.2, .8, .2, 1)
}

.our-team-v6.team-video-motion .team-member.team-focus .member-caption {
  opacity: 1;
  transform: none
}

.our-team-v6.team-video-motion .member-caption b {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: .01em;
  color: #fff;
  margin-bottom: 3px
}

.our-team-v6.team-video-motion .member-caption span {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 7px;
  line-height: 1.2;
  letter-spacing: .11em;
  color: rgba(255, 255, 255, .74);
  white-space: nowrap
}

.our-team-v6.team-video-motion .member-number {
  top: 7px;
  right: 7px;
  z-index: 7;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, .42);
  font-size: 7px;
  color: rgba(255, 255, 255, .78);
  opacity: .85
}

.our-team-v6.team-video-motion .team-switch {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin: 21px auto 0;
  z-index: 8
}

.our-team-v6.team-video-motion .team-switch button {
  width: 5px;
  height: 5px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: rgba(255, 255, 255, .38);
  transition: width .4s ease, background .4s ease, transform .4s ease
}

.our-team-v6.team-video-motion .team-switch button.active {
  width: 17px;
  height: 3px;
  border-radius: 8px;
  background: #fff;
  transform: none
}

.our-team-v6.team-video-motion .team-v6-copy {
  position: relative;
  z-index: 7;
  width: min(620px, 90%);
  margin: 13px auto 0;
  text-align: center;
  color: rgba(255, 255, 255, .66);
  font: 400 9px/1.65 Arial, Helvetica, sans-serif;
  letter-spacing: .01em;
  opacity: 1;
  transform: none
}

.our-team-v6.team-video-motion .team-v6-copy strong {
  color: #fff;
  font-weight: 600
}

.our-team-v6.team-video-motion .team-light {
  display: none
}

@media(max-width:760px) {
  .our-team-v6.team-video-motion {
    min-height: calc(100svh - var(--header-h, 64px));
  }

  .our-team-v6.team-video-motion .city-bg {
    inset: -5% -18%;
    background-position: center center !important;
    transform: translate3d(0, var(--team-city-y, 0), 0) scale(1.08) !important;
  }

  .our-team-v6.team-video-motion .team-v6-inner {
    padding: 24px 10px 15px;
    min-height: inherit
  }

  .our-team-v6.team-video-motion .team-v6-head .eyebrow {
    font-size: 10px;
    margin-bottom: 8px
  }

  .our-team-v6.team-video-motion .team-v6-head h2 {
    font-size: clamp(43px, 14vw, 58px)
  }

  .our-team-v6.team-video-motion .team-v6-line {
    width: 76%;
    margin-top: 16px
  }

  .our-team-v6.team-video-motion .team-stage {
    margin-top: 21px;
    max-width: none
  }

  .our-team-v6.team-video-motion .team-members {
    height: 190px;
    min-height: 190px;
    gap: 5px;
    padding: 0 3px;
    justify-content: center
  }

  .our-team-v6.team-video-motion .team-member {
    height: 190px;
    flex-basis: calc((100vw - 36px)/4);
    width: calc((100vw - 36px)/4)
  }

  .our-team-v6.team-video-motion .team-member.team-focus {
    flex-basis: calc((100vw - 36px)/4 + 42px);
    width: calc((100vw - 36px)/4 + 42px);
    transform: translate3d(0, -5px, 0) !important
  }

  .our-team-v6.team-video-motion .member-caption {
    left: 7px;
    right: 4px;
    bottom: 8px
  }

  .our-team-v6.team-video-motion .member-caption b {
    font-size: 9px
  }

  .our-team-v6.team-video-motion .member-caption span {
    font-size: 5.7px;
    letter-spacing: .08em
  }

  .our-team-v6.team-video-motion .member-number {
    top: 6px;
    right: 5px;
    width: 16px;
    height: 16px;
    font-size: 6px
  }

  .our-team-v6.team-video-motion .team-switch {
    margin-top: 16px
  }

  .our-team-v6.team-video-motion .team-v6-copy {
    width: 92%;
    font-size: 8px;
    line-height: 1.6;
    margin-top: 10px
  }
}

@media(max-width:390px) {
  .our-team-v6.team-video-motion .team-v6-inner {
    padding-top: 20px
  }

  .our-team-v6.team-video-motion .team-members {
    height: 170px;
    min-height: 170px
  }

  .our-team-v6.team-video-motion .team-member {
    height: 170px;
    flex-basis: calc((100vw - 30px)/4);
    width: calc((100vw - 30px)/4)
  }

  .our-team-v6.team-video-motion .team-member.team-focus {
    flex-basis: calc((100vw - 30px)/4 + 34px);
    width: calc((100vw - 30px)/4 + 34px)
  }

  .our-team-v6.team-video-motion .member-caption b {
    font-size: 8px
  }

  .our-team-v6.team-video-motion .member-caption span {
    font-size: 5px
  }
}

@media(prefers-reduced-motion:reduce) {
  .our-team-v6.team-video-motion .city-bg {
    transform: scale(1.02) !important
  }

  .our-team-v6.team-video-motion .team-member,
  .our-team-v6.team-video-motion .team-member.team-focus {
    transition: none !important
  }
}

/* V18 — Unified Company page: three sections stay inside one page shell */
.company-hero {
  min-height: 420px;
  background-position: center 42%
}

.company-hero .wrap {
  padding-top: clamp(135px, 15vw, 190px);
  padding-bottom: clamp(70px, 9vw, 110px)
}

.company-hero h1 {
  max-width: 820px
}

.company-section {
  padding: 72px 0 96px;
  background: linear-gradient(180deg, #f7f8fc 0%, #fff 100%)
}

.company-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 38px;
  align-items: start
}

.company-side {
  position: sticky;
  top: 124px;
  background: rgba(255, 255, 255, .88);
  border: 1px solid #e8edf5;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 20px 55px rgba(25, 42, 80, .08);
  backdrop-filter: none;
}

.company-side-title,
.company-more-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #1d2b45;
  margin: 2px 2px 12px
}

.company-more-title {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #edf1f6;
  color: #7b87a0
}

.company-tabs {
  display: grid;
  gap: 4px
}

.company-tab,
.company-more-nav a {
  appearance: none;
  border: 0;
  background: transparent;
  color: #526078;
  text-align: left;
  font: 600 13px 'DM Sans', sans-serif;
  border-radius: 10px;
  padding: 11px 12px;
  cursor: pointer;
  transition: background .25s, color .25s, transform .25s
}

.company-tab:hover,
.company-more-nav a:hover {
  background: #f0f4ff;
  color: #2768f2;
  transform: translateX(3px)
}

.company-tab.active {
  background: linear-gradient(135deg, #eef3ff, #f7f0ff);
  color: #2768f2;
  box-shadow: inset 3px 0 #2768f2
}

.company-more-nav {
  display: grid;
  gap: 2px
}

.company-more-nav a {
  display: block;
  font-size: 12px
}

.company-content {
  min-height: 500px;
  background: #fff;
  border: 1px solid #e9edf4;
  border-radius: 22px;
  padding: clamp(30px, 4vw, 58px);
  box-shadow: 0 24px 70px rgba(25, 42, 80, .07);
  transition: opacity .25s ease, transform .35s ease
}

.company-content.switching {
  opacity: 0;
  transform: translateY(10px)
}

.company-content .company-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #2768f2;
  margin-bottom: 11px
}

.company-content h2 {
  margin: 0 0 24px;
  font-family: Manrope, sans-serif;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -1.3px;
  color: #101d35
}

.company-content p {
  font-size: 14px;
  line-height: 1.85;
  color: #58667d;
  max-width: 920px;
  margin: 0 0 18px
}

.company-content .legacy-copy {
  font-size: 15px;
  line-height: 1.95;
  color: #34435d
}

.company-rule {
  height: 1px;
  background: linear-gradient(90deg, #2768f2, #dfe7f5 55%, transparent);
  margin: 28px 0 30px
}

.company-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px
}

.company-fact {
  padding: 20px;
  border-radius: 15px;
  background: #f7f9fd;
  border: 1px solid #edf1f6
}

.company-fact b {
  display: block;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #2768f2;
  margin-bottom: 8px
}

.company-fact span {
  font-size: 13px;
  line-height: 1.55;
  color: #4f5e76
}

.company-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 28px
}

.company-contact-card {
  padding: 24px;
  border: 1px solid #e8edf5;
  border-radius: 16px;
  background: #fafbfe
}

.company-contact-card b {
  display: block;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #2768f2;
  margin-bottom: 7px
}

.company-contact-card a {
  color: #2768f2
}

.company-bridge {
  padding: 85px 0;
  background: #07172f;
  color: #fff
}

.company-bridge .heading {
  max-width: 850px
}

.company-bridge h2 {
  color: #fff;
  font-family: Manrope, sans-serif;
  font-size: clamp(30px, 4.5vw, 58px);
  line-height: 1.06;
  margin: 10px 0 16px
}

.company-bridge p {
  color: #aebbd0;
  max-width: 650px;
  line-height: 1.8
}

@media(max-width:900px) {
  .company-layout {
    grid-template-columns: 1fr;
    gap: 22px
  }

  .company-side {
    position: relative;
    top: auto
  }

  .company-tabs {
    display: flex;
    gap: 6px;
    overflow: auto;
    padding-bottom: 2px
  }

  .company-tab {
    white-space: nowrap;
    flex: 1;
    text-align: center
  }

  .company-more-nav {
    grid-template-columns: repeat(3, 1fr)
  }

  .company-more-nav a {
    text-align: center
  }

  .company-content {
    min-height: 0
  }
}

@media(max-width:600px) {
  .company-hero {
    min-height: 360px
  }

  .company-hero .wrap {
    padding-top: 125px;
    padding-bottom: 62px
  }

  .company-section {
    padding: 42px 0 60px
  }

  .company-side {
    padding: 14px;
    border-radius: 15px
  }

  .company-side-title {
    font-size: 10px
  }

  .company-tab {
    font-size: 12px;
    padding: 10px 9px
  }

  .company-more-title {
    margin-top: 16px;
    padding-top: 14px
  }

  .company-more-nav {
    grid-template-columns: repeat(2, 1fr)
  }

  .company-content {
    padding: 24px 19px;
    border-radius: 16px
  }

  .company-content h2 {
    font-size: 32px;
    margin-bottom: 18px
  }

  .company-content p,
  .company-content .legacy-copy {
    font-size: 13px;
    line-height: 1.8
  }

  .company-facts {
    grid-template-columns: 1fr
  }

  .company-contact {
    grid-template-columns: 1fr
  }

  .company-bridge {
    padding: 58px 0
  }
}


/* V19 — Legacy Services / Products switcher, based on the reference video. */
.legacy-switch-section {
  padding: 56px 0 86px;
  background: #fff
}

.legacy-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  border: 1px solid #dfe3e8;
  background: #fff;
  box-shadow: 0 16px 40px rgba(20, 30, 50, .05)
}

.legacy-side {
  min-width: 0;
  background: linear-gradient(180deg, #f5f6f8 0%, #fbfbfc 100%);
  border-right: 1px solid #d9dde2;
  padding: 0 0 22px;
  position: sticky;
  top: 105px;
  align-self: start
}

.legacy-side-title {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #20252b;
  padding: 14px 14px 10px;
  border-bottom: 1px solid #dfe2e6
}

.legacy-tabs {
  display: grid
}

.legacy-tab {
  appearance: none;
  border: 0;
  border-bottom: 1px dotted #cfd4da;
  background: transparent;
  color: #30343a;
  text-align: left;
  font: 12px/1.35 Arial, Helvetica, sans-serif;
  padding: 10px 14px 10px 38px;
  position: relative;
  cursor: pointer;
  transition: background .25s, color .25s, transform .25s
}

.legacy-tab:before {
  content: '✧';
  position: absolute;
  left: 14px;
  top: 9px;
  color: #c9a62c;
  font-size: 12px
}

.legacy-tab:hover {
  background: #eef1f4;
  color: #111;
  transform: translateX(2px)
}

.legacy-tab.active {
  background: #e9edf1;
  color: #111;
  font-weight: 700;
  box-shadow: inset 3px 0 #c9a62c
}

.legacy-content {
  min-height: 455px;
  padding: 24px 34px 42px;
  font-family: Arial, Helvetica, sans-serif;
  color: #24282d;
  border-left: 0;
  transition: opacity .22s ease, transform .28s ease
}

.legacy-content.switching {
  opacity: 0;
  transform: translateY(8px)
}

.legacy-breadcrumb {
  font-size: 10px;
  color: #9a7b21;
  border-bottom: 1px dotted #cfd4da;
  padding: 0 0 10px;
  margin-bottom: 15px
}

.legacy-kicker {
  font-size: 13px;
  font-weight: 700;
  color: #1f2429;
  margin-bottom: 10px
}

.legacy-content h2 {
  font: 700 15px/1.35 Arial, Helvetica, sans-serif;
  margin: 0 0 14px;
  color: #252a2f
}

.legacy-content h3 {
  font: 700 13px/1.35 Arial, Helvetica, sans-serif;
  margin: 19px 0 8px;
  text-decoration: underline;
  color: #292e33
}

.legacy-content p {
  font: 12px/1.55 Arial, Helvetica, sans-serif;
  color: #2d3339;
  margin: 0 0 11px;
  max-width: none
}

.legacy-content ul {
  margin: 6px 0 15px 22px;
  padding: 0
}

.legacy-content li {
  font: 12px/1.5 Arial, Helvetica, sans-serif;
  color: #2d3339;
  margin: 3px 0
}

.legacy-case {
  margin: 7px 0 10px;
  padding-left: 15px;
  position: relative
}

.legacy-case:before {
  content: '•';
  position: absolute;
  left: 0;
  top: 0;
  font-size: 16px;
  color: #333
}

.legacy-case b {
  display: block;
  font-size: 12px;
  margin-bottom: 2px
}

.legacy-links {
  text-align: center;
  margin-top: 25px;
  display: grid;
  gap: 13px
}

.legacy-links a {
  font: 12px Arial, Helvetica, sans-serif;
  color: #304b89;
  text-decoration: underline
}

.legacy-note {
  padding: 10px 0 0;
  color: #5b6168;
  font-size: 11px
}

@media(max-width:900px) {
  .legacy-switch-section {
    padding: 40px 0 62px
  }

  .legacy-layout {
    grid-template-columns: 1fr
  }

  .legacy-side {
    position: relative;
    top: auto;
    border-right: 0;
    border-bottom: 1px solid #d9dde2
  }

  .legacy-tabs {
    display: flex;
    overflow: auto
  }

  .legacy-tab {
    min-width: max-content;
    flex: 0 0 auto;
    border-bottom: 0;
    border-right: 1px dotted #cfd4da;
    padding: 11px 14px 11px 32px
  }

  .legacy-tab:before {
    left: 11px
  }

  .legacy-content {
    min-height: 0;
    padding: 24px 22px 36px
  }
}

@media(max-width:560px) {
  .legacy-switch-section {
    padding: 28px 0 46px
  }

  .legacy-layout {
    border-left: 0;
    border-right: 0
  }

  .legacy-side-title {
    padding: 12px 12px 9px;
    font-size: 12px
  }

  .legacy-tab {
    font-size: 11px;
    padding: 10px 13px 10px 29px
  }

  .legacy-tab:before {
    left: 10px;
    top: 9px
  }

  .legacy-content {
    padding: 20px 15px 30px
  }

  .legacy-breadcrumb {
    font-size: 9px
  }

  .legacy-kicker {
    font-size: 12px
  }

  .legacy-content h2 {
    font-size: 14px
  }

  .legacy-content p,
  .legacy-content li {
    font-size: 11px;
    line-height: 1.58
  }

  .legacy-case {
    padding-left: 12px
  }
}

/* V20 — Reference-video legacy detail panels for Customers / Domain / Technology / Quality. */
.motion-legacy-section {
  background: #fff;
  padding: 48px 0 72px
}

.motion-legacy-section .legacy-layout {
  min-height: 470px
}

.motion-legacy-section .legacy-content {
  background: #fff
}

.motion-legacy-section .legacy-tab {
  font-size: 12px
}

.motion-legacy-section .legacy-tab.active:after {
  content: '›';
  position: absolute;
  right: 12px;
  top: 10px;
  color: #c9a62c;
  font-weight: 700
}

.motion-legacy-section .legacy-content h2 {
  font-size: 15px
}

.motion-legacy-section .legacy-content h3 {
  font-size: 13px
}

.motion-legacy-section .legacy-content p,
.motion-legacy-section .legacy-content li {
  font-size: 12px;
  line-height: 1.58
}

.motion-legacy-section .legacy-content ul {
  margin-bottom: 16px
}

.motion-legacy-section .legacy-content .legacy-list {
  margin: 7px 0 16px 20px
}

.motion-legacy-section .legacy-content .legacy-list li {
  margin: 2px 0
}

.motion-legacy-section .legacy-content .legacy-case {
  margin: 10px 0 13px
}

.motion-legacy-section .legacy-content .legacy-case b {
  font-size: 12px
}

@media(max-width:900px) {
  .motion-legacy-section {
    padding: 34px 0 54px
  }

  .motion-legacy-section .legacy-layout {
    min-height: 0
  }
}

@media(max-width:600px) {
  .motion-legacy-section {
    padding: 24px 0 42px
  }

  .motion-legacy-section .legacy-content {
    min-height: 0
  }

  .motion-legacy-section .legacy-content p,
  .motion-legacy-section .legacy-content li {
    font-size: 11px;
    line-height: 1.62
  }
}



/* ==========================================================
   V22 — RESPONSIVE RHYTHM + SMOOTH SCROLL REVEALS
   Intent: premium, compact spacing on every viewport.
   Existing V1–V21 styling/features remain intact.
   ========================================================== */

/* Fluid global sizing */
:root {
  --content-max: 1240px;
  --gutter: clamp(18px, 4vw, 56px);
  --section-y: clamp(54px, 7vw, 96px);
}

*,
*::before,
*::after {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  overflow-x: hidden
}

.wrap {
  width: min(calc(100% - (var(--gutter) * 2)), var(--content-max));
  margin-inline: auto;
}

/* Keep sections visually connected instead of producing oversized gaps */
main>section:not(.hero):not(.page-hero):not(.full-image):not(.our-team-v6) {
  padding-block: var(--section-y);
}

main>section+section:not(.hero):not(.page-hero) {
  margin-top: 0;
}

.heading {
  margin-bottom: clamp(24px, 3.5vw, 42px)
}

.heading h2,
.story-copy h2,
.cta h2 {
  text-wrap: balance;
}

/* Images never force the layout wider than the viewport */
img,
video,
svg,
canvas {
  max-width: 100%;
  height: auto
}

iframe {
  max-width: 100%
}

/* ----------------------------------------------------------
   Smooth, premium reveal motion
   ---------------------------------------------------------- */
.auto-reveal {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition:
    opacity .72s cubic-bezier(.22, .75, .2, 1),
    transform .82s cubic-bezier(.22, .75, .2, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.auto-reveal.from-left {
  transform: translate3d(-42px, 0, 0)
}

.auto-reveal.from-right {
  transform: translate3d(42px, 0, 0)
}

.auto-reveal.zoom {
  transform: translate3d(0, 20px, 0) scale(.965)
}

.auto-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.auto-reveal[data-reveal="heading"] {
  transform: translate3d(0, 22px, 0);
  transition-duration: .82s;
}

.auto-reveal[data-reveal="image"] {
  transform: translate3d(0, 28px, 0) scale(.985);
  transition-duration: 1s;
}

.auto-reveal[data-reveal="card"] {
  transform: translate3d(0, 28px, 0);
}

/* Existing reveal classes become a little more fluid */
.reveal {
  transition-duration: .78s
}

.reveal-left,
.reveal-right {
  transition-duration: .85s
}

.reveal-scale {
  transition-duration: .9s
}

/* ----------------------------------------------------------
   Desktop — 1200px+
   ---------------------------------------------------------- */
@media (min-width:1181px) {
  .navbox {
    height: 84px;
    min-height: 84px;
    padding-inline: clamp(24px, 3vw, 46px);
  }

  .hero {
    min-height: clamp(700px, 86vh, 900px);
  }

  .hero-grid {
    min-height: inherit;
    padding-top: 84px;
  }

  .hero h1 {
    font-size: clamp(58px, 5.2vw, 84px);
    line-height: .99;
  }

  .cards {
    gap: 20px
  }

  .process {
    gap: 20px
  }

  .stat {
    padding: 22px 18px
  }
}

/* ----------------------------------------------------------
   Tablet — 681px to 1180px
   ---------------------------------------------------------- */
@media (min-width:681px) and (max-width:1180px) {
  :root {
    --gutter: clamp(24px, 4.2vw, 42px);
    --section-y: clamp(54px, 7vw, 76px);
  }

  .navbox {
    height: 78px;
    min-height: 78px;
    padding-inline: 24px;
  }

  .hero {
    min-height: 720px;
  }

  .hero-grid {
    padding-top: 94px;
    gap: 32px;
  }

  .hero h1 {
    font-size: clamp(46px, 6.2vw, 68px);
    line-height: 1.01;
  }

  .hero p {
    font-size: 15px;
    line-height: 1.65
  }

  .story-grid {
    gap: 34px
  }

  .cards {
    gap: 16px
  }

  .process {
    gap: 16px
  }

  .photo-stack {
    height: 430px
  }

  .page-hero {
    min-height: 470px
  }
}

/* ----------------------------------------------------------
   Mobile — <=680px
   ---------------------------------------------------------- */
@media (max-width:680px) {
  :root {
    --gutter: 20px;
    --section-y: clamp(46px, 13vw, 64px);
  }

  html,
  body {
    width: 100%;
    max-width: 100%
  }

  .wrap {
    width: calc(100% - 40px);
    max-width: none;
  }

  /* Header: consistent top/bottom rhythm */
  .header {
    top: 0 !important
  }

  .navbox {
    height: 68px !important;
    min-height: 68px !important;
    padding: 0 18px !important;
  }

  /* Hero */
  .hero {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 68px;
  }

  .hero-grid {
    min-height: 0 !important;
    padding: 78px 20px 44px !important;
  }

  .hero-copy-motion h1 {
    font-size: clamp(40px, 11.8vw, 56px) !important;
    line-height: 1.015 !important;
    letter-spacing: -2px !important;
    margin: 10px 0 16px !important;
    max-width: 100% !important;
  }

  .hero-copy-motion p {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 0;
  }

  .hero-copy-motion .btns {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
  }

  .hero-copy-motion .btn {
    min-height: 47px;
    padding: 12px 17px;
  }

  /* Compact section spacing — avoids the huge empty areas */
  main>section:not(.hero):not(.page-hero):not(.full-image):not(.our-team-v6) {
    padding-block: var(--section-y) !important;
  }

  .heading {
    margin-bottom: 26px
  }

  .heading h2,
  .story-copy h2,
  .cta h2 {
    font-size: clamp(31px, 9.3vw, 44px);
    line-height: 1.06;
    letter-spacing: -1.35px;
  }

  .heading p {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 0;
  }

  /* 2×2 stats: balanced, not tall */
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .stat {
    min-height: 88px;
    padding: 16px 15px !important;
  }

  .stat b {
    font-size: 20px
  }

  .stat span {
    font-size: 10px;
    line-height: 1.45
  }

  /* Cards */
  .cards,
  .process,
  .contact-grid,
  .footer-grid {
    grid-template-columns: 1fr !important;
  }

  .cards {
    gap: 12px
  }

  .process {
    gap: 12px
  }

  .card {
    padding: 20px;
    border-radius: 17px;
  }

  .step {
    padding: 20px;
    border-radius: 16px;
  }

  /* Story / image blocks */
  .story-grid {
    grid-template-columns: 1fr !important;
    gap: 30px;
  }

  .photo-stack {
    height: 300px;
  }

  .photo-main {
    height: 255px
  }

  .photo-small {
    height: 135px
  }

  /* Full-screen imagery should not create giant mobile blank space */
  .full-image {
    min-height: 440px !important;
    background-attachment: scroll !important;
  }

  .full-content h2 {
    font-size: clamp(33px, 10vw, 47px);
    line-height: 1.06;
  }

  /* Inner page heroes */
  .page-hero {
    min-height: 410px !important;
    align-items: flex-end;
  }

  .page-hero .wrap {
    padding-top: 105px !important;
    padding-bottom: 48px !important;
    width: calc(100% - 40px);
  }

  .page-hero h1 {
    font-size: clamp(37px, 10.5vw, 53px);
    line-height: 1.03;
    letter-spacing: -1.7px;
  }

  .page-hero p {
    font-size: 14px;
    line-height: 1.7;
  }

  /* Contact / CTA */
  .contact-card,
  .form {
    padding: 22px 18px;
    border-radius: 17px;
  }

  .cta {
    padding: 34px 20px;
    border-radius: 20px;
  }

  /* Footer */
  .footer {
    padding: 42px 0 20px
  }
}

/* Extra-small phones */
@media (max-width:380px) {
  :root {
    --gutter: 17px
  }

  .wrap {
    width: calc(100% - 34px)
  }

  .hero-grid {
    padding-inline: 17px !important
  }

  .hero-copy-motion h1 {
    font-size: 39px !important
  }

  .hero-copy-motion p {
    font-size: 14px
  }

  .stat {
    min-height: 82px;
    padding: 14px 12px !important
  }

  .stat b {
    font-size: 18px
  }

  .stat span {
    font-size: 9px
  }

  .page-hero .wrap {
    width: calc(100% - 34px)
  }
}

/* Respect users who request reduced motion */
@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  .auto-reveal,
  .auto-reveal.from-left,
  .auto-reveal.from-right,
  .auto-reveal.zoom {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================
   V23 — CRISP RESPONSIVE RHYTHM + NO-BLUR MOTION
   Final override layer. Existing content/features preserved.
   ========================================================== */

:root {
  --site-max: 1240px;
  --site-gutter: clamp(18px, 4vw, 52px);
  --section-space: clamp(52px, 6.5vw, 88px);
}

html {
  scroll-behavior: smooth
}

body {
  overflow-x: hidden
}

.wrap {
  width: min(calc(100% - (var(--site-gutter)*2)), var(--site-max));
  margin-inline: auto
}

/* ZERO BLUR: keep imagery and content crisp */
*,
*::before,
*::after {
  backdrop-filter: none !important
}

.hero-slide,
.hero-bg,
.city-bg,
.parallax-bg,
.zoom-photo {
  filter: none !important
}

/* Remove large artificial gaps between neighboring content blocks */
main>section {
  margin-block: 0 !important
}

main>section+section {
  margin-top: 0 !important
}

main>section:not(.hero):not(.page-hero):not(.full-image):not(.our-team-v6) {
  padding-block: var(--section-space) !important
}

.band {
  margin: 0 !important
}

.heading {
  margin-bottom: clamp(22px, 3vw, 38px) !important
}

.cards,
.process {
  margin-top: 0 !important
}

.card,
.step {
  margin: 0 !important
}

/* Keep existing visual sections compact and connected */
.story-grid {
  row-gap: clamp(28px, 4vw, 52px) !important
}

.full-image {
  margin-block: 0 !important
}

.slider-window {
  margin-top: 0 !important
}

.cta {
  margin-top: 0 !important
}

/* Smooth, crisp scroll reveal — NO blur */
.v23-reveal {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition: opacity .72s cubic-bezier(.22, .72, .2, 1),
    transform .82s cubic-bezier(.22, .72, .2, 1);
  transition-delay: var(--v23-delay, 0ms);
  will-change: opacity, transform;
}

.v23-reveal.from-left {
  transform: translate3d(-42px, 0, 0)
}

.v23-reveal.from-right {
  transform: translate3d(42px, 0, 0)
}

.v23-reveal.scale-in {
  transform: translate3d(0, 22px, 0) scale(.965)
}

.v23-reveal.is-visible {
  opacity: 1;
  transform: none
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  .v23-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important
  }
}

/* Desktop */
@media (min-width:1181px) {
  .navbox {
    height: 82px;
    min-height: 82px
  }

  .hero {
    min-height: clamp(700px, 84vh, 900px)
  }

  .hero-grid {
    padding-top: 82px
  }
}

/* Tablet */
@media (min-width:681px) and (max-width:1180px) {
  :root {
    --site-gutter: clamp(24px, 4vw, 42px);
    --section-space: clamp(50px, 6vw, 72px)
  }

  .navbox {
    height: 78px;
    min-height: 78px;
    padding-inline: 24px
  }

  .hero {
    min-height: 700px
  }

  .hero-grid {
    padding-top: 90px;
    gap: 30px
  }

  .hero h1 {
    font-size: clamp(46px, 6vw, 68px);
    line-height: 1.01
  }

  .cards {
    gap: 16px
  }

  .process {
    gap: 16px
  }
}

/* Mobile */
@media (max-width:680px) {
  :root {
    --site-gutter: 20px;
    --section-space: clamp(44px, 11vw, 60px)
  }

  .wrap {
    width: calc(100% - 40px)
  }

  .navbox {
    height: 68px !important;
    min-height: 68px !important;
    padding: 0 18px !important
  }

  .hero {
    padding-top: 68px;
    min-height: 0 !important;
    height: auto !important
  }

  .hero-grid {
    padding: 76px 20px 38px !important
  }

  .hero-copy-motion h1 {
    font-size: clamp(40px, 11.8vw, 56px) !important;
    line-height: 1.015 !important;
    letter-spacing: -2px !important;
    margin: 10px 0 16px !important
  }

  .hero-copy-motion p {
    font-size: 15px;
    line-height: 1.62
  }

  .hero-copy-motion .btns {
    margin-top: 21px
  }

  .hero-side {
    display: none !important
  }

  .hero-bottom {
    position: relative !important;
    inset: auto !important
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important
  }

  .stat {
    min-height: 86px;
    padding: 15px !important
  }

  .stat b {
    font-size: 20px
  }

  .stat span {
    font-size: 10px
  }

  main>section:not(.hero):not(.page-hero):not(.full-image):not(.our-team-v6) {
    padding-block: var(--section-space) !important
  }

  .heading {
    margin-bottom: 24px !important
  }

  .heading h2,
  .story-copy h2,
  .cta h2 {
    font-size: clamp(31px, 9.3vw, 44px);
    line-height: 1.06;
    letter-spacing: -1.3px;
  }

  .heading p {
    font-size: 14px;
    line-height: 1.68
  }

  .cards,
  .process,
  .contact-grid,
  .footer-grid {
    grid-template-columns: 1fr !important
  }

  .cards {
    gap: 12px !important
  }

  .process {
    gap: 12px !important
  }

  .card {
    padding: 20px !important;
    border-radius: 17px
  }

  .step {
    padding: 20px !important;
    border-radius: 16px
  }

  .story-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important
  }

  .photo-stack {
    height: 300px
  }

  .photo-main {
    height: 255px
  }

  .photo-small {
    height: 135px
  }

  .full-image {
    min-height: 430px !important;
    background-attachment: scroll !important
  }

  .page-hero {
    min-height: 400px !important
  }

  .page-hero .wrap {
    padding-top: 100px !important;
    padding-bottom: 46px !important;
    width: calc(100% - 40px)
  }

  .mobile-nav {
    top: 68px !important
  }

  .header.scrolled .mobile-nav {
    top: 68px !important
  }

  .mobile-nav-inner {
    padding: 10px 20px 26px !important
  }

  .mobile-nav a,
  .mobile-company {
    padding: 13px 0 !important
  }

  .mobile-sub-links a {
    padding: 10px 0 !important;
    font-size: 13px !important
  }
}

@media (max-width:380px) {
  .wrap {
    width: calc(100% - 34px)
  }

  .hero-grid {
    padding-inline: 17px !important
  }

  .hero-copy-motion h1 {
    font-size: 39px !important
  }

  .stat {
    min-height: 80px;
    padding: 13px !important
  }

  .page-hero .wrap {
    width: calc(100% - 34px)
  }
}

/* Dropdowns: all primary sections follow the same animated interaction as Company */
.links .drop-menu {
  top: calc(100% + 12px);
  width: 218px;
  padding: 8px;
  border-radius: 14px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px) scale(.98);
  transform-origin: top center;
  transition: opacity .22s ease, transform .28s cubic-bezier(.2, .8, .2, 1), visibility .22s;
}

.links .drop:hover .drop-menu,
.links .drop:focus-within .drop-menu,
.links .drop.open .drop-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.links .drop-menu a {
  position: relative;
  transition: background .22s ease, color .22s ease, padding-left .22s ease;
}

.links .drop-menu a::after {
  content: "→";
  position: absolute;
  right: 12px;
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity .22s ease, transform .22s ease;
}

.links .drop-menu a:hover {
  padding-left: 16px;
}

.links .drop-menu a:hover::after {
  opacity: 1;
  transform: none;
}

/* Mobile accordions for every navigation item */
.mobile-sub-links {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  padding-left: 14px;
  transition: grid-template-rows .35s cubic-bezier(.2, .8, .2, 1);
}

.mobile-sub-links>div {
  min-height: 0
}

.mobile-sub-links.open {
  grid-template-rows: 1fr
}

.mobile-section-toggle {
  display: flex !important;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.mobile-section-toggle span {
  font-size: 21px;
  color: #6745d0;
  line-height: 1
}


/* ==========================================================
   V24 — PROFESSIONAL RESPONSIVE FINISH
   Preserve V20/V21 visual language; unify all detail pages
   with the Company Profile/Management/Contact shell.
   ========================================================== */

:root {
  --v24-max: 1240px;
  --v24-gutter: clamp(18px, 4vw, 56px);
}

*,
*::before,
*::after {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  overflow-x: hidden
}

/* --- Remove unwanted blur from scroll/reveal layers --- */
.motion-fade,
.motion-zoom,
.scroll-animate,
.scroll-animate.zoom-in,
.auto-reveal {
  filter: none !important;
}

@keyframes heroCopyIn {
  from {
    opacity: 0;
    transform: translateY(35px);
    filter: none
  }

  to {
    opacity: 1;
    transform: none;
    filter: none
  }
}

@keyframes heroCinematic {
  0% {
    opacity: 0;
    transform: scale(1.08);
    filter: brightness(.78)
  }

  16% {
    opacity: 1;
    filter: brightness(.94)
  }

  65% {
    opacity: 1;
    transform: scale(1.025);
    filter: brightness(1)
  }

  100% {
    opacity: 1;
    transform: scale(1.045);
    filter: brightness(.96)
  }
}

/* --- Compact vertical rhythm --- */
.page-hero {
  min-height: clamp(390px, 52vh, 520px);
}

.page-hero .wrap {
  padding-bottom: clamp(54px, 7vw, 78px)
}

.legacy-switch-section,
.services-switch-section,
.products-switch-section,
.motion-legacy-section {
  padding: clamp(34px, 5vw, 62px) 0 clamp(48px, 6vw, 74px) !important;
}

/* --- Company-style shell for every internal navigation page --- */
.legacy-layout {
  width: min(calc(100% - (var(--v24-gutter) * 2)), var(--v24-max));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 38px;
  align-items: start;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.legacy-side {
  position: sticky;
  top: 118px;
  align-self: start;
  background: #fff;
  border: 1px solid #e8edf5;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 20px 55px rgba(25, 42, 80, .08);
  backdrop-filter: none !important;
}

.legacy-side-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #1d2b45;
  padding: 2px 2px 12px;
  border: 0;
}

.legacy-tabs {
  display: grid;
  gap: 4px
}

.legacy-tab {
  appearance: none;
  border: 0;
  border-bottom: 0;
  background: transparent;
  color: #526078;
  text-align: left;
  font: 600 13px/1.35 'DM Sans', sans-serif;
  border-radius: 10px;
  padding: 11px 12px 11px 30px;
  position: relative;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.legacy-tab:before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b9c8e8;
  transform: translateY(-50%);
  transition: background .25s ease, transform .25s ease;
}

.legacy-tab:hover {
  background: #f0f4ff;
  color: #2768f2;
  transform: translateX(3px);
}

.legacy-tab.active {
  background: linear-gradient(135deg, #eef3ff, #f7f0ff);
  color: #2768f2;
  font-weight: 700;
  box-shadow: inset 3px 0 #2768f2;
}

.legacy-tab.active:before {
  background: #2768f2;
  transform: translateY(-50%) scale(1.2);
}

.legacy-content {
  min-height: 500px;
  background: #fff;
  border: 1px solid #e9edf4;
  border-radius: 22px;
  padding: clamp(30px, 4vw, 58px);
  font-family: 'DM Sans', sans-serif;
  color: #34435d;
  box-shadow: 0 24px 70px rgba(25, 42, 80, .07);
  transition: opacity .25s ease, transform .35s cubic-bezier(.22, .75, .2, 1);
}

.legacy-content.switching {
  opacity: 0;
  transform: translateY(10px);
}

.legacy-content .company-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #2768f2;
  margin-bottom: 11px;
}

.legacy-content>h2 {
  margin: 0 0 24px;
  font-family: Manrope, sans-serif;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -1.3px;
  color: #101d35;
}

.legacy-content p {
  font: 15px/1.8 'DM Sans', sans-serif;
  color: #58667d;
  margin: 0 0 18px;
  max-width: 920px;
}

.legacy-content .legacy-copy {
  font-size: 15px;
  line-height: 1.8;
  color: #34435d;
}

.legacy-content h3 {
  font: 700 15px/1.4 'DM Sans', sans-serif;
  margin: 26px 0 10px;
  color: #182742;
  text-decoration: none;
}

.legacy-content ul {
  margin: 8px 0 20px 20px;
  padding: 0;
}

.legacy-content li {
  font: 14px/1.7 'DM Sans', sans-serif;
  color: #58667d;
  margin: 5px 0;
}

.legacy-content .legacy-kicker {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #2768f2;
  margin: 20px 0 10px;
}

.legacy-case {
  margin: 14px 0;
  padding: 15px 17px 15px 21px;
  border: 1px solid #edf1f6;
  border-radius: 14px;
  background: #fafbfe;
  color: #58667d;
  font: 14px/1.65 'DM Sans', sans-serif;
}

.legacy-case:before {
  display: none
}

.legacy-case b {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  color: #182742;
}

.legacy-links {
  text-align: left;
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}

.legacy-links a {
  font: 600 12px 'DM Sans', sans-serif;
  color: #2768f2;
}

/* Keep the Company page itself exactly in its established shell. */
.company-section {
  padding: clamp(42px, 5vw, 72px) 0 clamp(54px, 7vw, 96px);
}

.company-side {
  backdrop-filter: none !important
}

/* Avoid large duplicated visual gaps after detail pages. */
.motion-legacy-section+.full-image,
.legacy-switch-section+.full-image {
  margin-top: 0 !important;
}

.full-image {
  min-height: clamp(440px, 62vh, 680px);
}

/* Desktop typography */
@media (min-width:1181px) {
  .page-hero h1 {
    font-size: clamp(52px, 6vw, 78px)
  }

  .legacy-content {
    padding: 52px 58px
  }
}

/* Tablet */
@media (min-width:681px) and (max-width:1180px) {
  :root {
    --v24-gutter: clamp(24px, 4vw, 42px)
  }

  .legacy-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 26px
  }

  .legacy-side {
    top: 100px
  }

  .legacy-content {
    padding: 34px
  }

  .page-hero {
    min-height: 430px
  }
}

/* Mobile: compact, stacked Company-style layout */
@media (max-width:680px) {
  :root {
    --v24-gutter: 20px
  }

  .page-hero {
    min-height: 330px;
  }

  .page-hero .wrap {
    width: calc(100% - 40px);
    padding-bottom: 42px;
  }

  .page-hero h1 {
    font-size: clamp(38px, 10.5vw, 52px);
    line-height: 1.04;
    letter-spacing: -1.7px;
  }

  .legacy-switch-section,
  .services-switch-section,
  .products-switch-section,
  .motion-legacy-section {
    padding: 32px 0 46px !important;
  }

  .legacy-layout {
    width: calc(100% - 40px);
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .legacy-side {
    position: relative;
    top: auto;
    padding: 16px;
    border-radius: 16px;
  }

  .legacy-side-title {
    margin-bottom: 10px
  }

  .legacy-tabs {
    display: grid;
    gap: 4px;
  }

  .legacy-tab {
    min-height: 44px;
    padding: 11px 12px 11px 30px;
    font-size: 13px;
  }

  .legacy-content {
    min-height: 0;
    padding: 26px 20px 30px;
    border-radius: 18px;
  }

  .legacy-content>h2 {
    font-size: clamp(29px, 9vw, 40px);
    line-height: 1.07;
    letter-spacing: -1.2px;
    margin-bottom: 20px;
  }

  .legacy-content p,
  .legacy-content .legacy-copy {
    font-size: 14px;
    line-height: 1.72;
    margin-bottom: 15px;
  }

  .legacy-content h3 {
    font-size: 14px;
    margin: 22px 0 9px
  }

  .legacy-content li {
    font-size: 13px;
    line-height: 1.65
  }

  .legacy-case {
    font-size: 13px;
    line-height: 1.6;
    padding: 13px 14px
  }

  .legacy-links {
    display: grid;
    gap: 10px
  }

  .full-image {
    min-height: 390px
  }
}

/* Extra small */
@media(max-width:380px) {
  .legacy-layout {
    width: calc(100% - 34px)
  }

  .page-hero .wrap {
    width: calc(100% - 34px)
  }

  .legacy-content {
    padding: 23px 17px 28px
  }
}

/* No-motion users get the same clean, non-blurred layout. */
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  .motion-fade,
  .motion-zoom,
  .scroll-animate,
  .auto-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* ==========================================================
   V25 — FINAL MOBILE RHYTHM / MENU / FOOTER POLISH
   ========================================================== */

/* Keep every section visually connected and remove accidental spacer margins. */
section {
  margin-block: 0 !important
}

.band {
  margin-block: 0 !important
}

.home-motion-section,
.light,
section:not(.hero):not(.page-hero):not(.full-image):not(.our-team-v6) {
  padding-block: clamp(52px, 6vw, 78px) !important;
}

/* Crisp motion only — never blur content while scrolling. */
.motion-zoom,
.auto-reveal,
.v23-reveal,
.motion-up,
.motion-left,
.motion-right {
  filter: none !important;
}

/* Footer social area */
.footer-social {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px
}

.footer-social a {
  width: 38px;
  height: 38px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  color: #d8e4f5 !important;
  background: rgba(255, 255, 255, .045);
  transform: translateY(0) !important;
  transition: transform .28s ease, background .28s ease, border-color .28s ease, color .28s ease, box-shadow .28s ease !important;
}

.footer-social a svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  transition: transform .28s ease
}

.footer-social a:hover {
  transform: translateY(-5px) !important;
  background: #7650dc;
  border-color: #9d83ff;
  color: #fff !important;
  box-shadow: 0 12px 25px rgba(100, 65, 205, .32) !important
}

.footer-social a:hover svg {
  transform: scale(1.14) rotate(-4deg)
}

/* Menu icon turns into a clean X when open. */
.menu-toggle {
  position: relative
}

.menu-toggle span {
  transform-origin: center;
  transition: transform .28s ease, opacity .2s ease, background .25s ease !important
}

.menu-toggle.open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg)
}

.menu-toggle.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(.2)
}

.menu-toggle.open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg)
}

@media (max-width:680px) {

  /* The mobile hero ends first; stats follow it instead of overlapping it. */
  .hero {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 72px !important;
  }

  .hero-grid {
    padding: 76px 20px 42px !important;
  }

  .hero-copy-motion h1 {
    font-size: clamp(40px, 11.5vw, 56px) !important;
    line-height: 1.02 !important;
    margin: 10px 0 18px !important;
  }

  .hero-copy-motion p {
    font-size: 15px !important;
    line-height: 1.62 !important
  }

  .hero-copy-motion .btns {
    margin-top: 22px !important
  }

  .hero-bottom {
    position: relative !important;
    inset: auto !important;
    margin: 0 !important;
    background: #061126 !important;
    border-top: 1px solid rgba(255, 255, 255, .12) !important;
  }

  .stats {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  .stat {
    min-height: 108px !important;
    padding: 22px 18px !important;
    border-right: 1px solid rgba(255, 255, 255, .12) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
  }

  .stat:nth-child(2n) {
    border-right: 0 !important
  }

  .stat:nth-child(3),
  .stat:nth-child(4) {
    border-bottom: 0 !important
  }

  .stat b {
    font-size: 25px !important;
    line-height: 1.05 !important
  }

  .stat span {
    display: block;
    margin-top: 8px;
    font-size: 11px !important;
    line-height: 1.45 !important;
    color: #b9c8dd !important
  }

  /* Tight, consistent vertical rhythm. */
  section,
  .home-motion-section,
  .light,
  section:not(.hero):not(.page-hero):not(.full-image):not(.our-team-v6) {
    padding-top: 46px !important;
    padding-bottom: 46px !important;
  }

  .heading {
    margin-bottom: 22px !important
  }

  .story-grid,
  .contact-grid,
  .split-page,
  .team-inner {
    gap: 24px !important
  }

  .cards,
  .process {
    gap: 12px !important
  }

  .card,
  .step {
    padding: 18px !important
  }

  .full-image {
    min-height: 390px !important
  }

  .full-content {
    padding-top: 42px !important;
    padding-bottom: 42px !important
  }

  /* Mobile navigation: dark, readable and scrollable. */
  .mobile-nav,
  .header.scrolled .mobile-nav {
    top: 72px !important;
    background: linear-gradient(180deg, #081a37 0%, #0d315e 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 22px 45px rgba(0, 0, 0, .32) !important;
  }

  .mobile-nav.open {
    max-height: calc(100svh - 72px) !important
  }

  .mobile-nav-inner {
    padding: 12px 20px 26px !important
  }

  .mobile-nav a,
  .mobile-company {
    color: #eef6ff !important;
    border-bottom-color: rgba(255, 255, 255, .13) !important;
    padding: 14px 0 !important;
    font-size: 15px !important;
  }

  .mobile-company span {
    color: #8ed9ff !important
  }

  .mobile-company-links {
    padding-left: 14px !important
  }

  .mobile-company-links a {
    color: #cce6ff !important;
    font-size: 13px !important;
    padding: 11px 0 !important
  }

  .mobile-demo {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-top: 18px !important;
    background: linear-gradient(135deg, #7047d7, #9a72ff) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 28px rgba(113, 70, 215, .32) !important;
  }

  /* Footer is compact but complete on every page. */
  .footer {
    padding: 38px 0 20px !important
  }

  .footer-grid {
    gap: 24px !important
  }

  .footer-social {
    margin-top: 16px
  }

  .footer-social a {
    width: 36px;
    height: 36px
  }

  .copy {
    margin-top: 24px !important;
    padding-top: 16px !important
  }
}

@media (min-width:681px) and (max-width:1180px) {

  section,
  .home-motion-section,
  .light,
  section:not(.hero):not(.page-hero):not(.full-image):not(.our-team-v6) {
    padding-top: 58px !important;
    padding-bottom: 58px !important;
  }
}

/* ==========================================================
   V26 — Keka-inspired cinematic scroll motion (no blur)
   Keeps the existing Sun Infotech design/content intact.
   ========================================================== */
:root {
  --v26-ease: cubic-bezier(.22, 1, .36, 1);
  --v26-duration: .9s
}

.v26-reveal {
  opacity: 0;
  transform: translate3d(0, 42px, 0);
  transition: opacity var(--v26-duration) var(--v26-ease), transform var(--v26-duration) var(--v26-ease);
  transition-delay: var(--v26-delay, 0ms);
  will-change: opacity, transform
}

.v26-reveal.v26-left {
  transform: translate3d(-48px, 0, 0)
}

.v26-reveal.v26-right {
  transform: translate3d(48px, 0, 0)
}

.v26-reveal.v26-scale {
  transform: translate3d(0, 24px, 0) scale(.94)
}

.v26-reveal.is-visible {
  opacity: 1;
  transform: none
}

.v26-line {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s var(--v26-ease);
  transition-delay: var(--v26-delay, 0ms)
}

.v26-line.is-visible {
  transform: scaleX(1)
}

.v26-image-motion {
  overflow: hidden
}

.v26-image-motion img,
.v26-image-motion .photo,
.v26-image-motion picture {
  transform: scale(1.045) translate3d(0, 0, 0);
  transition: transform 1.25s var(--v26-ease);
  will-change: transform
}

.v26-image-motion.is-visible img,
.v26-image-motion.is-visible .photo,
.v26-image-motion.is-visible picture {
  transform: scale(1) translate3d(var(--v26-img-x, 0px), var(--v26-img-y, 0px), 0)
}

.card,
.step,
.legacy-tab,
.stat,
.contact-card,
.form {
  transition: transform .45s var(--v26-ease), box-shadow .45s var(--v26-ease), border-color .35s ease
}

.card:hover,
.step:hover {
  transform: translate3d(0, -8px, 0)
}

.legacy-tab:hover {
  transform: translate3d(5px, 0, 0)
}

.stat:hover {
  transform: translate3d(0, -5px, 0)
}

.contact-card:hover,
.form:hover {
  transform: translate3d(0, -4px, 0)
}

.v26-parallax {
  will-change: transform
}

.v26-counter {
  font-variant-numeric: tabular-nums
}

@media (max-width:680px) {
  .v26-reveal {
    transform: translate3d(0, 28px, 0)
  }

  .v26-reveal.v26-left,
  .v26-reveal.v26-right {
    transform: translate3d(0, 28px, 0)
  }

  .v26-reveal.v26-scale {
    transform: translate3d(0, 18px, 0) scale(.97)
  }

  .card:hover,
  .step:hover,
  .stat:hover,
  .contact-card:hover,
  .form:hover,
  .legacy-tab:hover {
    transform: none
  }
}

@media (prefers-reduced-motion:reduce) {

  .v26-reveal,
  .v26-reveal.v26-left,
  .v26-reveal.v26-right,
  .v26-reveal.v26-scale {
    opacity: 1;
    transform: none;
    transition: none
  }

  .v26-line {
    transform: none;
    transition: none
  }

  .v26-image-motion img,
  .v26-image-motion .photo,
  .v26-image-motion picture {
    transform: none !important;
    transition: none
  }
}


/* ==========================================================
   V27 — ALL-PAGE MOTION + RESPONSIVE FOOTER POLISH
   Crisp Keka-inspired storytelling. No blur, no layout breakage.
   ========================================================== */
:root {
  --v27-ease: cubic-bezier(.16, 1, .3, 1);
  --v27-soft: cubic-bezier(.22, 1, .36, 1);
}

/* Every content section gets a clear entrance, not just selected components. */
.v27-reveal {
  opacity: 0;
  transform: translate3d(0, 48px, 0);
  transition: opacity .9s var(--v27-ease), transform .9s var(--v27-ease);
  transition-delay: var(--v27-delay, 0ms);
  will-change: opacity, transform;
}

.v27-reveal.v27-from-left {
  transform: translate3d(-56px, 0, 0)
}

.v27-reveal.v27-from-right {
  transform: translate3d(56px, 0, 0)
}

.v27-reveal.v27-scale {
  transform: translate3d(0, 30px, 0) scale(.965)
}

.v27-reveal.is-visible {
  opacity: 1;
  transform: none
}

/* Hero/page hero gets a small editorial entrance on load. */
.page-hero .wrap>.v27-reveal:nth-child(1) {
  transition-duration: .65s
}

.page-hero .wrap>.v27-reveal:nth-child(2) {
  transition-duration: 1s
}

.page-hero .wrap>.v27-reveal:nth-child(3) {
  transition-duration: 1.05s
}

/* Images move independently from their text for a premium scroll feel. */
.v27-media-motion {
  overflow: hidden
}

.v27-media-motion::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .07) 50%, transparent 65%);
  transform: translateX(-125%);
  transition: transform 1.15s var(--v27-ease);
}

.v27-media-motion.is-visible::after {
  transform: translateX(125%)
}

.v27-media-motion img {
  transform: scale(1.06);
  transition: transform 1.35s var(--v27-ease);
  will-change: transform
}

.v27-media-motion.is-visible img {
  transform: scale(1)
}

/* More deliberate interaction on cards and tabs. */
.card,
.step,
.legacy-tab,
.contact-card,
.form,
.time,
.team-member {
  transition: transform .5s var(--v27-soft), box-shadow .5s var(--v27-soft), border-color .35s ease !important;
}

.card:hover,
.step:hover,
.time:hover {
  transform: translate3d(0, -8px, 0)
}

.legacy-tab:hover {
  transform: translate3d(6px, 0, 0)
}

.team-member:hover {
  transform: translate3d(0, -5px, 0)
}

/* Footer: a stronger premium bottom area that remains compact on phones. */
.footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, #061126 0%, #040b18 100%);
}

.footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(116, 223, 255, .55), rgba(143, 109, 255, .55), transparent);
  transform: scaleX(.2);
  transform-origin: center;
  transition: transform 1s var(--v27-ease);
}

.footer.is-visible::before {
  transform: scaleX(1)
}

.footer-grid>div {
  min-width: 0
}

.footer h4 {
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 11px;
  color: #8ed9ff;
  margin-bottom: 12px
}

.footer a {
  transition: color .25s ease, transform .25s ease
}

.footer a:hover {
  color: #fff !important;
  transform: translateX(3px)
}

.footer .brand {
  margin-bottom: 12px
}

.footer-social {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px !important
}

.footer-social a {
  transform: translateY(0) !important
}

.footer-social a:hover {
  transform: translateY(-5px) !important
}

.copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap
}

.copy span {
  display: inline-flex;
  align-items: center;
  min-height: 30px
}

@media(max-width:680px) {
  .v27-reveal {
    transform: translate3d(0, 30px, 0);
    transition-duration: .72s
  }

  .v27-reveal.v27-from-left,
  .v27-reveal.v27-from-right {
    transform: translate3d(0, 30px, 0)
  }

  .v27-reveal.v27-scale {
    transform: translate3d(0, 18px, 0) scale(.98)
  }

  .card:hover,
  .step:hover,
  .time:hover,
  .team-member:hover,
  .legacy-tab:hover {
    transform: none
  }

  .footer {
    padding: 42px 0 14px !important
  }

  .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 26px !important
  }

  .footer-grid>div:first-child {
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .09)
  }

  .footer-grid>div:nth-child(2),
  .footer-grid>div:nth-child(3) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    align-items: start;
  }

  .footer-grid>div:nth-child(2) h4,
  .footer-grid>div:nth-child(3) h4 {
    grid-column: 1/-1;
    margin-bottom: 5px
  }

  .footer-grid>div:nth-child(2) a,
  .footer-grid>div:nth-child(3) a {
    padding: 5px 0;
    font-size: 13px;
    min-width: 0
  }

  .footer-social {
    gap: 8px;
    margin-top: 15px !important
  }

  .footer-social a {
    width: 38px !important;
    height: 38px !important
  }

  .copy {
    margin-top: 25px !important;
    padding-top: 18px !important;
    border-top: 1px solid rgba(255, 255, 255, .09);
    align-items: flex-start;
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .copy span {
    font-size: 11px;
    line-height: 1.5;
    min-height: auto;
    color: #91a5bd
  }

  .copy span:last-child {
    color: #dce9f8
  }
}

@media(min-width:681px) and (max-width:1180px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 30px
  }
}

@media(prefers-reduced-motion:reduce) {
  .v27-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important
  }

  .v27-media-motion img,
  .v27-media-motion::after {
    transition: none !important
  }

  .footer::before {
    transform: none !important;
    transition: none !important
  }
}


/* V27 background motion support */
.page-hero,
.full-image,
.zoom-banner,
.zoom-photo {
  background-position: center var(--v27-bg-y, center) !important;
}

@media(max-width:680px) {

  .page-hero,
  .full-image,
  .zoom-banner,
  .zoom-photo {
    background-position: center var(--v27-bg-y, center) !important;
  }
}

/* ==========================================================
   V28 — CONTENT-MATCHED IMAGERY + HEADER / DEMO POLISH
   Keep all approved content/layout/motion intact.
   ========================================================== */

/* Clear, editorial image treatment: preserve the photograph while keeping text readable. */
.page-hero {
  background-color: #08152c;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
}

.page-hero:before {
  background: linear-gradient(90deg, rgba(4, 18, 39, .90) 0%, rgba(5, 24, 50, .72) 42%, rgba(5, 24, 50, .28) 100%) !important;
}

.full-image {
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
}

.full-image:before {
  background: linear-gradient(90deg, rgba(4, 18, 39, .84) 0%, rgba(4, 18, 39, .54) 48%, rgba(4, 18, 39, .28) 100%) !important;
}

.hero-slide {
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* Demo button: premium but proportional to the navigation bar. */
.nav-actions {
  gap: 12px !important;
  margin-left: 18px !important
}

.nav-cta {
  min-width: 128px !important;
  height: 44px !important;
  padding: 0 17px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  letter-spacing: .01em;
  white-space: nowrap;
}

.menu-toggle {
  width: 32px !important;
  height: 32px !important
}

.menu-toggle span {
  width: 27px !important
}

/* At the top the header stays clean/white; after scrolling it uses the site's blue system. */
.header:not(.scrolled) .navbox {
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 1px 0 rgba(18, 35, 65, .08) !important;
}

.header:not(.scrolled) .menu-toggle span {
  background: #5d45c9 !important
}

.header:not(.scrolled) .nav-cta {
  background: linear-gradient(135deg, #5b35c4, #7a4bda) !important;
  color: #fff !important;
}

/* Mobile menu follows the same header state: white at the top, blue after scrolling. */
@media(max-width:680px) {
  .navbox {
    height: 68px !important;
    min-height: 68px !important;
    padding: 0 16px !important;
  }

  .nav-actions {
    gap: 8px !important;
    margin-left: auto !important;
  }

  .nav-cta {
    display: inline-flex !important;
    min-width: 98px !important;
    width: auto !important;
    height: 40px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    font-size: 10.5px !important;
    box-shadow: 0 7px 18px rgba(91, 53, 196, .18) !important;
  }

  .menu-toggle {
    display: flex !important;
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px;
  }

  .menu-toggle span {
    width: 26px !important;
    height: 2px !important
  }

  /* Don't duplicate the CTA inside the opened mobile link list. */
  .mobile-demo {
    display: none !important
  }

  .mobile-nav {
    top: 68px !important;
    background: #fff !important;
    border-top: 1px solid #e8edf5 !important;
    box-shadow: 0 20px 45px rgba(18, 35, 65, .16) !important;
  }

  .mobile-nav-inner {
    padding: 10px 20px 24px !important
  }

  .mobile-nav a,
  .mobile-company {
    color: #243552 !important;
    border-bottom-color: #e9edf4 !important;
  }

  .mobile-company span {
    color: #654bd0 !important
  }

  .mobile-company-links a {
    color: #60708a !important
  }

  .header.scrolled .mobile-nav {
    top: 68px !important;
    background: linear-gradient(180deg, #0b2a56 0%, #10396d 100%) !important;
    border-top-color: rgba(255, 255, 255, .10) !important;
    box-shadow: 0 22px 45px rgba(3, 15, 40, .35) !important;
  }

  .header.scrolled .mobile-nav a,
  .header.scrolled .mobile-company {
    color: #eef6ff !important;
    border-bottom-color: rgba(255, 255, 255, .13) !important
  }

  .header.scrolled .mobile-company span {
    color: #a7dcff !important
  }

  .header.scrolled .mobile-company-links a {
    color: #cfe7ff !important
  }

  .page-hero:before {
    background: linear-gradient(180deg, rgba(4, 18, 39, .50) 0%, rgba(4, 18, 39, .72) 58%, rgba(4, 18, 39, .93) 100%) !important;
  }

  .full-image:before {
    background: linear-gradient(180deg, rgba(4, 18, 39, .28) 0%, rgba(4, 18, 39, .64) 58%, rgba(4, 18, 39, .92) 100%) !important;
  }
}

@media(max-width:390px) {
  .navbox {
    padding: 0 13px !important
  }

  .nav-cta {
    min-width: 91px !important;
    height: 38px !important;
    padding: 0 10px !important;
    font-size: 10px !important
  }

  .menu-toggle {
    width: 30px !important;
    flex-basis: 30px
  }

  .menu-toggle span {
    width: 24px !important
  }
}

@media(min-width:681px) and (max-width:1180px) {
  .nav-cta {
    min-width: 116px !important;
    height: 42px !important;
    padding: 0 15px !important;
    font-size: 11px !important
  }
}

@media(min-width:1181px) {
  .nav-cta {
    min-width: 128px !important;
    height: 44px !important
  }
}

/* ==========================================================
   V29 — FINAL GLOBAL RESPONSIVE + USER LOGO OVERRIDES
   Keeps the existing motion systems and only improves layout.
   ========================================================== */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

button,
input,
textarea,
select {
  max-width: 100%;
}

/* User supplied Sun Infotech logo */
.header .brand {
  min-width: 0 !important;
  width: auto;
  flex: 0 1 auto;
  display: flex;
  align-items: center;
}

.brand-logo-img {
  display: block;
  width: clamp(155px, 15vw, 235px);
  height: auto;
  max-height: 64px;
  object-fit: contain;
  object-position: left center;
}

.header.scrolled .brand-logo-img {
  transform: scale(.92);
  transform-origin: left center;
  transition: transform .25s ease;
}

/* Desktop/tablet navigation must never squeeze content */
.links {
  min-width: 0;
}

.nav-actions {
  flex: 0 0 auto;
}

.hero-grid>*,
.story-grid>*,
.contact-grid>*,
.split-page>*,
.company-layout>*,
.company-contact>* {
  min-width: 0;
}

/* General responsive media */
@media (max-width:1180px) {
  .navbox {
    padding-inline: clamp(18px, 4vw, 32px) !important;
  }

  .brand-logo-img {
    width: 190px;
    max-height: 58px;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr);
  }

  .hero-side {
    min-width: 0;
  }

  .ring {
    width: min(34vw, 340px);
    height: min(34vw, 340px);
    right: 0;
  }

  .p2 {
    right: 0;
  }

  section {
    padding-block: clamp(64px, 8vw, 90px);
  }

  .split-page {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px;
  }

  .company-layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }
}

@media (max-width:900px) {
  .links {
    display: none !important;
  }

  .menu-toggle {
    display: flex !important;
  }

  .navbox {
    height: 76px !important;
    min-height: 76px !important;
  }

  .mobile-nav {
    top: 76px !important;
  }

  .hero {
    min-height: 760px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    padding-top: 105px;
    padding-bottom: 150px;
  }

  .hero-side {
    display: none;
  }

  .hero-copy-motion {
    max-width: 760px;
  }

  .hero h1 {
    font-size: clamp(46px, 8vw, 70px);
    max-width: 760px;
  }

  .hero p {
    max-width: 650px;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat:nth-child(2) {
    border-right: 0;
  }

  .stat:nth-child(n+3) {
    border-top: 1px solid #ffffff20;
  }

  .story-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .photo-stack {
    width: min(100%, 650px);
    margin: auto;
  }

  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .split-page,
  .company-layout {
    grid-template-columns: 1fr;
  }

  .side,
  .company-side {
    position: relative;
    top: auto;
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .company-contact {
    grid-template-columns: 1fr;
  }

  .company-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:680px) {
  .navbox {
    height: 68px !important;
    min-height: 68px !important;
    padding: 0 14px !important;
  }

  .mobile-nav {
    top: 68px !important;
  }

  .header.scrolled .navbox {
    height: 64px !important;
    min-height: 64px !important;
  }

  .header.scrolled .mobile-nav {
    top: 64px !important;
  }

  .header .brand {
    flex: 1 1 auto;
    min-width: 0;
  }

  .brand-logo-img {
    width: clamp(130px, 42vw, 180px);
    max-height: 50px;
  }

  .header.scrolled .brand-logo-img {
    transform: scale(.94);
  }

  .nav-actions {
    gap: 8px !important;
    margin-left: 8px !important;
  }

  .nav-cta {
    min-width: 0 !important;
    width: auto !important;
    height: 38px !important;
    padding: 0 11px !important;
    font-size: 10px !important;
    white-space: nowrap;
  }

  .menu-toggle {
    width: 31px !important;
    height: 31px !important;
    flex: 0 0 31px;
  }

  .menu-toggle span {
    width: 24px !important;
  }

  .wrap {
    width: calc(100% - 32px) !important;
  }

  section {
    padding-block: 54px;
  }

  .hero {
    min-height: 100svh !important;
    padding-top: 68px;
  }

  .hero-grid {
    padding: 76px 0 145px !important;
  }

  .hero h1 {
    font-size: clamp(37px, 11vw, 54px) !important;
    letter-spacing: -1.8px !important;
  }

  .hero p {
    font-size: 14px;
    line-height: 1.65;
  }

  .btns {
    gap: 9px;
  }

  .btn {
    width: auto;
    min-height: 44px;
    padding: 12px 15px;
  }

  .hero-bottom {
    position: absolute;
  }

  .stats {
    grid-template-columns: 1fr 1fr;
  }

  .stat {
    padding: 13px 8px;
  }

  .stat b {
    font-size: 18px;
  }

  .stat span {
    font-size: 9px;
    line-height: 1.35;
  }

  .hero-progress {
    left: 16px !important;
    bottom: 105px !important;
  }

  .heading h2,
  .story-copy h2 {
    font-size: clamp(30px, 9vw, 42px);
    letter-spacing: -1.2px;
  }

  .heading {
    margin-bottom: 30px;
  }

  .story-grid {
    gap: 35px;
  }

  .photo-stack {
    height: 390px;
  }

  .photo-main {
    width: 82%;
    height: 315px;
    border-radius: 20px;
  }

  .photo-small {
    width: 48%;
    height: 175px;
    border-width: 5px;
    border-radius: 17px;
  }

  .photo-badge {
    left: 12px;
    bottom: 20px;
    padding: 10px 12px;
    font-size: 10px;
  }

  .cards,
  .process,
  .footer-grid,
  .company-facts {
    grid-template-columns: 1fr;
  }

  .card {
    min-height: 210px;
    padding: 23px;
  }

  .process {
    gap: 12px;
  }

  .step {
    padding: 20px !important;
  }

  .split-page {
    gap: 18px;
  }

  .article {
    padding: 25px 20px;
    border-radius: 20px;
  }

  .article h2 {
    font-size: 32px;
  }

  .side {
    padding: 10px;
  }

  .contact-card,
  .form {
    padding: 24px 19px;
    border-radius: 20px;
  }

  .contact-card h2,
  .form h2 {
    font-size: clamp(28px, 8vw, 38px) !important;
  }

  .form input,
  .form textarea {
    font-size: 16px;
  }

  .form button {
    width: 100%;
    min-height: 46px;
  }

  .page-hero {
    min-height: 470px;
  }

  .page-hero .wrap {
    padding-bottom: 58px;
  }

  .page-hero h1 {
    font-size: clamp(38px, 10vw, 56px);
    letter-spacing: -1.7px;
  }

  .page-hero p {
    font-size: 14px;
  }

  .full-image {
    min-height: 500px;
  }

  .full-content {
    padding-bottom: 55px;
  }

  .full-content h2 {
    font-size: clamp(32px, 9vw, 48px) !important;
  }

  /* Team: preserve the reference motion while avoiding overflow */
  .our-team-v6.team-video-motion {
    min-height: 680px;
  }

  .our-team-v6.team-video-motion .team-v6-inner {
    width: calc(100% - 32px);
  }

  .our-team-v6.team-video-motion .team-v6-head h2 {
    font-size: clamp(48px, 15vw, 72px);
  }

  .our-team-v6.team-video-motion .team-stage {
    width: 100%;
    max-width: 100%;
  }

  .our-team-v6.team-video-motion .team-members {
    width: 100%;
    max-width: 100%;
    gap: 5px;
  }

  .our-team-v6.team-video-motion .team-member {
    min-width: 0;
  }

  .our-team-v6.team-video-motion .team-member .member-caption {
    left: 7px;
    bottom: 8px;
    max-width: calc(100% - 14px);
    overflow: hidden;
  }

  .our-team-v6.team-video-motion .team-member .member-caption b {
    font-size: 7px;
    line-height: 1.1;
    white-space: nowrap;
  }

  .our-team-v6.team-video-motion .team-member .member-caption span {
    font-size: 5px;
  }

  .our-team-v6.team-video-motion .team-member.team-focus {
    transform: translate3d(0, -5px, 0) !important;
  }

  .footer {
    overflow: hidden;
  }

  .copy {
    flex-wrap: wrap;
  }
}

@media (max-width:390px) {
  .navbox {
    padding-inline: 11px !important;
  }

  .brand-logo-img {
    width: 132px;
  }

  .nav-cta {
    font-size: 9px !important;
    padding-inline: 9px !important;
  }

  .menu-toggle {
    width: 29px !important;
    flex-basis: 29px;
  }

  .menu-toggle span {
    width: 23px !important;
  }

  .hero h1 {
    font-size: 36px !important;
  }

  .hero-grid {
    padding-top: 66px !important;
  }

  .photo-stack {
    height: 350px;
  }

  .photo-main {
    height: 285px;
  }

  .photo-small {
    height: 150px;
  }
}

@media (prefers-reduced-motion:reduce) {

  .brand-logo-img,
  .team-member,
  .card,
  .photo-main,
  .photo-small {
    transition: none !important;
  }
}

/* Keep the first screen compact enough to show the next content exists,
   without changing the visual composition of the hero. */
@media(min-width:1181px) {
  .hero {
    min-height: 690px !important;
    height: 690px !important
  }

  .hero-grid {
    padding-top: 72px !important;
    padding-bottom: 92px !important
  }
}

@media(min-width:681px) and (max-width:1180px) {
  .hero {
    min-height: calc(100svh - 82px) !important;
    height: calc(100svh - 82px) !important
  }

  .hero-grid {
    padding-top: 72px !important;
    padding-bottom: 105px !important
  }
}

@media(max-width:680px) {
  .hero {
    min-height: calc(100svh - 68px) !important;
    height: calc(100svh - 68px) !important
  }

  .hero-grid {
    padding: 62px 18px 112px !important
  }
}

/* ==========================================================
   SAME TYPOGRAPHY FOR ALL DETAIL / TAB SECTIONS
   Match the Company section's DM Sans + Manrope treatment.
   ========================================================== */
.legacy-content,
.legacy-content * {
  font-family: 'DM Sans', sans-serif !important;
}

.legacy-content h2,
.legacy-content h3,
.company-content h2,
.company-content h3 {
  font-family: 'Manrope', sans-serif !important;
}

.legacy-content h2 {
  font-size: clamp(30px, 4vw, 48px) !important;
  line-height: 1.08 !important;
  letter-spacing: -1.3px !important;
  margin: 0 0 20px !important;
  color: #101d35 !important;
}

.legacy-content h3 {
  font-size: 15px !important;
  line-height: 1.4 !important;
  margin: 18px 0 9px !important;
  color: #253653 !important;
  text-decoration: none !important;
}

.legacy-content p,
.legacy-content li {
  font-size: 14px !important;
  line-height: 1.85 !important;
  color: #58667d !important;
}

.legacy-content p {
  margin: 0 0 16px !important
}

.legacy-content li {
  margin: 3px 0 !important
}

.legacy-content ul {
  margin: 8px 0 18px 22px !important
}

/* Same compact spacing across the selectable content panels. */
.legacy-content {
  min-height: 0 !important;
  padding: 30px 34px 38px !important;
}

.company-content {
  min-height: 0 !important;
}

@media(max-width:900px) {
  .legacy-content {
    padding: 26px 24px 32px !important
  }
}

@media(max-width:680px) {
  .legacy-content {
    padding: 22px 18px 28px !important
  }

  .legacy-content h2 {
    font-size: 30px !important;
    letter-spacing: -.8px !important
  }

  .legacy-content h3 {
    font-size: 14px !important
  }

  .legacy-content p,
  .legacy-content li {
    font-size: 14px !important;
    line-height: 1.78 !important
  }
}

/* Keep page content from creating an unnecessary giant gap on short pages. */
.split-page {
  align-items: start !important
}

.article {
  min-height: 0 !important
}

@media(min-width:901px) {
  .split-page {
    gap: 34px !important
  }

  .article {
    padding: 38px 42px !important
  }
}

@media(max-width:900px) {
  .split-page {
    gap: 22px !important
  }
}

/* Current page remains clearly selected. */
.links>a.active-page,
.company-toggle.active-page {
  color: #fff !important;
  background: rgba(255, 255, 255, .13) !important;
  box-shadow: inset 0 -3px 0 #8fd7ff !important;
  font-weight: 800 !important;
}

.links>a.active-page::after,
.company-toggle.active-page::after {
  content: "" !important;
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 5px !important;
  height: 3px !important;
  border-radius: 9px !important;
  background: #8fd7ff !important;
  box-shadow: 0 0 10px rgba(143, 215, 255, .6) !important;
}

.header:not(.scrolled) .links>a.active-page,
.header:not(.scrolled) .company-toggle.active-page {
  color: #2768f2 !important;
  background: #eef4ff !important;
  box-shadow: none !important;
}

.header:not(.scrolled) .links>a.active-page::after,
.header:not(.scrolled) .company-toggle.active-page::after {
  background: #2768f2 !important;
  box-shadow: none !important;
}


/* ==========================================================
   V34 — HOME COMPOSITION + MOBILE SPACING POLISH
   Keep existing design; only fix overlap, whitespace and centering.
   ========================================================== */

/* Desktop: reserve a dedicated bottom band for the stats so hero copy
   never collides with it. */
@media (min-width:1181px) {
  .hero {
    height: 690px !important;
    min-height: 690px !important;
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
  }

  .hero-grid {
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    padding-top: 20px !important;
    padding-bottom: 58px !important;
    align-items: center !important;
  }

  .hero-bottom {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    min-height: 94px !important;
  }

  .hero-progress {
    bottom: 108px !important
  }

  /* Reduce the large white break before the first story section. */
  .hero+.home-motion-section {
    padding-top: 58px !important
  }
}

@media (min-width:681px) and (max-width:1180px) {
  .hero {
    min-height: calc(100svh - 76px) !important;
    height: auto !important;
  }

  .hero-grid {
    min-height: calc(100svh - 180px) !important;
    padding-top: 42px !important;
    padding-bottom: 48px !important;
  }

  .hero-bottom {
    position: relative !important;
    inset: auto !important
  }

  .hero+.home-motion-section {
    padding-top: 55px !important
  }
}

/* Mobile: natural document flow. Every hero element gets its own space,
   and stats are a separate block rather than an overlay. */
@media (max-width:680px) {
  .hero {
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    padding-top: 68px !important;
    overflow: hidden !important;
  }

  .hero-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 48px 18px 34px !important;
    align-items: start !important;
  }

  .hero-copy-motion {
    width: 100% !important;
    max-width: none !important
  }

  .hero-copy-motion h1 {
    max-width: 100% !important;
    margin: 10px 0 17px !important;
    font-size: clamp(38px, 11.2vw, 55px) !important;
    line-height: 1.03 !important;
  }

  .hero-copy-motion p {
    max-width: 100% !important;
    margin-bottom: 0 !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  .hero-copy-motion .btns {
    margin-top: 22px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .hero-copy-motion .btn {
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  .hero-bottom {
    position: relative !important;
    inset: auto !important;
    margin: 0 !important;
    width: 100% !important;
    background: rgba(6, 17, 38, .92) !important;
    border-top: 1px solid rgba(255, 255, 255, .13) !important;
  }

  .stats {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  .stat {
    min-height: 106px !important;
    box-sizing: border-box !important;
    padding: 20px 16px !important;
  }

  .stat:nth-child(2n) {
    border-right: 0 !important
  }

  .stat:nth-child(3),
  .stat:nth-child(4) {
    border-bottom: 0 !important
  }

  .stat b {
    font-size: 23px !important
  }

  .stat span {
    font-size: 10px !important;
    line-height: 1.45 !important
  }

  .hero-progress {
    bottom: 118px !important;
    left: 18px !important
  }

  /* Story image stack centered on phones; no horizontal drift. */
  .hero+.home-motion-section {
    padding-top: 40px !important
  }

  .story-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important
  }

  .photo-stack {
    width: min(100%, 520px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 360px !important;
    position: relative !important;
  }

  .photo-stack .photo-main {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(86%, 420px) !important;
    height: 285px !important;
  }

  .photo-stack .photo-small {
    left: 50% !important;
    right: auto !important;
    transform: translateX(5%) !important;
    width: 46% !important;
    height: 145px !important;
  }

  .photo-stack .photo-badge {
    left: 50% !important;
    transform: translateX(-50%) !important;
    white-space: nowrap !important;
  }
}

@media (max-width:390px) {
  .hero-grid {
    padding-left: 15px !important;
    padding-right: 15px !important
  }

  .hero-copy-motion h1 {
    font-size: 35px !important
  }

  .hero-copy-motion p {
    font-size: 13.5px !important
  }

  .stat {
    padding: 18px 12px !important
  }

  .stat b {
    font-size: 21px !important
  }

  .stat span {
    font-size: 9px !important
  }

  .photo-stack {
    height: 330px !important
  }

  .photo-stack .photo-main {
    height: 260px !important
  }

  .photo-stack .photo-small {
    height: 130px !important
  }
}

/* Desktop Company dropdown: hover opens it; pointer can travel from the
   trigger into the menu without losing the hover state. */
@media (min-width:901px) {

  .drop:hover .drop-menu,
  .drop:focus-within .drop-menu,
  .drop.open .drop-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  .drop-menu::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
  }
}

/* ==========================================================
   V36 — DESKTOP/LAPTOP HERO SEPARATION ONLY
   Mobile layout intentionally untouched.
   ========================================================== */
@media (min-width:681px) {
  .hero.hero-cinematic {
    height: min(700px, calc(100svh - 104px)) !important;
    min-height: 620px !important;
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Give the main content its own safe area above the bottom stats band. */
  .hero.hero-cinematic .hero-grid {
    position: relative !important;
    z-index: 4 !important;
    width: min(1280px, calc(100% - 64px)) !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr) !important;
    column-gap: clamp(30px, 4vw, 70px) !important;
    align-items: center !important;
    padding: 34px 0 132px !important;
  }

  .hero.hero-cinematic .hero-copy-motion {
    position: relative !important;
    z-index: 5 !important;
    align-self: center !important;
    max-width: 700px !important;
    transform: none !important;
  }

  .hero.hero-cinematic .hero-copy-motion h1 {
    max-width: 680px !important;
    font-size: clamp(52px, 5.15vw, 76px) !important;
    line-height: 1.02 !important;
    margin: 12px 0 20px !important;
  }

  .hero.hero-cinematic .hero-copy-motion p {
    max-width: 650px !important;
    font-size: clamp(15px, 1.2vw, 17px) !important;
    line-height: 1.72 !important;
  }

  .hero.hero-cinematic .hero-copy-motion .btns {
    position: relative !important;
    z-index: 6 !important;
    margin-top: 28px !important;
    display: flex !important;
    gap: 12px !important;
  }

  .hero.hero-cinematic .hero-copy-motion .btn {
    position: relative !important;
    z-index: 7 !important;
  }

  .hero.hero-cinematic .hero-side {
    position: relative !important;
    z-index: 4 !important;
    width: 100% !important;
    height: 390px !important;
    align-self: center !important;
  }

  .hero.hero-cinematic .ring {
    width: 390px !important;
    height: 390px !important;
    right: 18px !important;
    top: 0 !important;
  }

  .hero.hero-cinematic .p1 {
    top: -4px !important;
    left: 0 !important;
  }

  .hero.hero-cinematic .p2 {
    right: -2px !important;
    bottom: 8px !important;
  }

  /* Stats are a true bottom band, never part of the hero content flow. */
  .hero.hero-cinematic .hero-bottom {
    position: absolute !important;
    z-index: 10 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 94px !important;
    min-height: 94px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: rgba(8, 20, 42, .42) !important;
    border-top: 1px solid rgba(255, 255, 255, .16) !important;
  }

  .hero.hero-cinematic .hero-bottom .wrap.stats {
    width: min(1280px, calc(100% - 64px)) !important;
    height: 100% !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .hero.hero-cinematic .hero-bottom .stat {
    height: 94px !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    padding: 18px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .hero.hero-cinematic .hero-bottom .stat b {
    font-size: 22px !important;
    line-height: 1.15 !important;
    margin: 0 0 5px !important;
  }

  .hero.hero-cinematic .hero-bottom .stat span {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  .hero.hero-cinematic .hero-progress {
    z-index: 12 !important;
    bottom: 106px !important;
    left: max(32px, calc((100% - 1280px) / 2)) !important;
  }
}

/* Laptop: reduce type/side artwork slightly without changing the layout model. */
@media (min-width:681px) and (max-width:1180px) {
  .hero.hero-cinematic {
    height: min(680px, calc(100svh - 104px)) !important;
    min-height: 600px !important;
  }

  .hero.hero-cinematic .hero-grid {
    width: calc(100% - 44px) !important;
    grid-template-columns: minmax(0, 1fr) minmax(300px, .78fr) !important;
    column-gap: 28px !important;
    padding: 28px 0 126px !important;
  }

  .hero.hero-cinematic .hero-copy-motion h1 {
    font-size: clamp(44px, 6vw, 62px) !important;
  }

  .hero.hero-cinematic .hero-copy-motion p {
    font-size: 15px !important;
  }

  .hero.hero-cinematic .hero-side {
    height: 330px !important;
  }

  .hero.hero-cinematic .ring {
    width: 320px !important;
    height: 320px !important;
    right: 0 !important;
  }

  .hero.hero-cinematic .float-panel b {
    font-size: 18px !important
  }

  .hero.hero-cinematic .float-panel {
    padding: 13px !important
  }

  .hero.hero-cinematic .hero-bottom .wrap.stats {
    width: calc(100% - 44px) !important;
  }

  .hero.hero-cinematic .hero-bottom .stat {
    padding: 16px 18px !important
  }
}

/* ==========================================================
   V37 — FINAL RESPONSIVE POLISH
   Requested only: desktop/laptop separation, smaller white gap,
   mobile typography/overflow safety, Nunito family, hover dropdown.
   Existing animations and mobile composition remain intact.
   ========================================================== */

/* Nunito family is used consistently across the site. Local font files
   are kept for offline use. */
@font-face {
  font-family: 'Nunito';
  src: url('assets/fonts/Cabin-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: 'Nunito';
  src: url('assets/fonts/Cabin-SemiBold.otf') format('opentype');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: 'Nunito';
  src: url('assets/fonts/Cabin-Bold.otf') format('opentype');
  font-weight: 800 900;
  font-style: normal;
  font-display: swap
}

html,
body {
  max-width: 100%;
  overflow-x: clip
}

body {
  font-family: 'Nunito', sans-serif !important
}

body * {
  font-family: 'Nunito', sans-serif !important
}

/* Desktop/laptop: keep the hero copy, artwork and stats in separate safe areas. */
@media (min-width:681px) {
  .hero.hero-cinematic {
    height: clamp(600px, calc(100svh - 82px), 690px) !important;
    min-height: 600px !important;
  }

  .hero.hero-cinematic .hero-grid {
    height: 100% !important;
    min-height: 0 !important;
    padding: 30px 0 132px !important;
    align-items: center !important;
  }

  .hero.hero-cinematic .hero-copy-motion {
    align-self: center !important;
    max-width: 700px !important;
  }

  .hero.hero-cinematic .hero-copy-motion h1 {
    font-size: clamp(48px, 5vw, 74px) !important;
    line-height: 1.03 !important;
    max-width: 690px !important;
    margin: 10px 0 18px !important;
  }

  .hero.hero-cinematic .hero-copy-motion p {
    max-width: 640px !important;
    font-size: clamp(14px, 1.12vw, 17px) !important;
    line-height: 1.7 !important;
  }

  .hero.hero-cinematic .hero-copy-motion .btns {
    margin-top: 24px !important;
  }

  .hero.hero-cinematic .hero-side {
    height: 390px !important;
    align-self: center !important;
  }

  .hero.hero-cinematic .ring {
    width: 390px !important;
    height: 390px !important;
    right: 18px !important;
    top: 0 !important
  }

  .hero.hero-cinematic .hero-bottom {
    height: 94px !important;
    min-height: 94px !important;
    bottom: 0 !important;
  }

  .hero.hero-cinematic .hero-bottom .stat {
    height: 94px !important;
    min-height: 94px !important;
    padding: 16px 28px !important;
    justify-content: center !important;
  }

  /* The first section starts close to the hero instead of leaving a large white gap. */
  .hero+.home-motion-section {
    padding-top: 24px !important
  }
}

/* Laptop/tablet: same separated composition, but slightly smaller artwork/type. */
@media (min-width:681px) and (max-width:1180px) {
  .hero.hero-cinematic {
    height: clamp(590px, calc(100svh - 76px), 660px) !important;
    min-height: 590px !important;
  }

  .hero.hero-cinematic .hero-grid {
    width: calc(100% - 44px) !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .76fr) !important;
    column-gap: 26px !important;
    padding: 24px 0 126px !important;
  }

  .hero.hero-cinematic .hero-copy-motion h1 {
    font-size: clamp(43px, 5.8vw, 60px) !important;
    max-width: 610px !important;
  }

  .hero.hero-cinematic .hero-copy-motion p {
    font-size: 14px !important;
    max-width: 570px !important
  }

  .hero.hero-cinematic .hero-side {
    height: 320px !important
  }

  .hero.hero-cinematic .ring {
    width: 310px !important;
    height: 310px !important;
    right: 0 !important
  }

  .hero.hero-cinematic .float-panel {
    padding: 12px !important
  }

  .hero.hero-cinematic .float-panel b {
    font-size: 17px !important
  }

  .hero.hero-cinematic .float-panel span {
    font-size: 12px !important
  }

  .hero.hero-cinematic .hero-bottom .wrap.stats {
    width: calc(100% - 44px) !important
  }

  .hero.hero-cinematic .hero-bottom .stat {
    padding-inline: 16px !important
  }

  .hero+.home-motion-section {
    padding-top: 24px !important
  }
}

/* Phones: preserve the existing composition, only make typography and widths safer. */
@media (max-width:680px) {

  .hero-copy-motion,
  .hero-copy-motion p,
  .story-copy,
  .story-copy p,
  .heading,
  .heading p,
  .checks {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important
  }

  .hero-copy-motion h1 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(34px, 10.4vw, 52px) !important;
    line-height: 1.06 !important;
    letter-spacing: -1px !important;
    overflow-wrap: normal !important;
  }

  .hero-copy-motion p {
    font-size: 14px !important;
    line-height: 1.65 !important
  }

  .hero-copy-motion .btn {
    font-size: 12px !important
  }

  .story-copy h2,
  .heading h2,
  .cta h2 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(30px, 8.8vw, 42px) !important;
    line-height: 1.1 !important;
    letter-spacing: -.8px !important;
    overflow-wrap: normal !important;
  }

  .story-copy p,
  .heading p,
  .article p {
    font-size: 14px !important;
    line-height: 1.8 !important
  }

  .checks div {
    font-size: 13px !important;
    line-height: 1.55 !important
  }

  /* Prevent animation transforms or long inline children from creating a side scroll. */
  .story-copy>*,
  .heading>*,
  .checks>*,
  .article>* {
    max-width: 100% !important
  }

  .hero+.home-motion-section {
    padding-top: 40px !important
  }

  /* Keep the already-good mobile photo composition centered. */
  .photo-stack {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important
  }
}

@media (max-width:390px) {
  .hero-copy-motion h1 {
    font-size: 34px !important;
    line-height: 1.06 !important
  }

  .hero-copy-motion p {
    font-size: 13px !important
  }

  .story-copy h2,
  .heading h2,
  .cta h2 {
    font-size: 31px !important
  }

  .story-copy p,
  .heading p {
    font-size: 13.5px !important
  }
}

/* Desktop Company dropdown: hover opens immediately and the small bridge keeps
   it open while the pointer moves from the trigger into the menu. */
@media (min-width:901px) {

  .drop:hover .drop-menu,
  .drop:focus-within .drop-menu,
  .drop.open .drop-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  .drop-menu::before {
    content: "" !important;
    position: absolute !important;
    top: -14px !important;
    left: 0 !important;
    right: 0 !important;
    height: 14px !important;
  }
}


/* ==========================================================
   V42 — FINAL REQUESTED POLISH
   Keep V37 design/content; only improve responsiveness,
   spacing, navigation, footer, Company Profile team and
   Technology detail stability.
   ========================================================== */

/* Header/navigation: slightly larger, easier to scan. */
.links {
  gap: 4px !important;
}

.links>a,
.company-toggle {
  font-size: 14px !important;
  padding: 13px 11px !important;
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.brand-logo-img {
  width: 210px !important;
  max-width: 22vw;
  max-height: 62px !important;
  object-fit: contain;
}

.navbox {
  min-height: 104px;
}

.nav-actions {
  flex-shrink: 0;
}

/* Active navigation is visible in both header states. */
.links>a.active-page,
.company-toggle.active-page {
  border-radius: 10px !important;
}

.mobile-nav a.active-page,
.mobile-company.active-page {
  color: #2768f2 !important;
  background: #eef4ff !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  box-shadow: inset 3px 0 #2768f2 !important;
}

.header.scrolled .mobile-nav a.active-page,
.header.scrolled .mobile-company.active-page {
  color: #fff !important;
  background: rgba(255, 255, 255, .12) !important;
  box-shadow: inset 3px 0 #8fd7ff !important;
}

/* Footer logo: use the real current artwork and give it enough room. */
.footer-brand-logo {
  display: inline-flex !important;
  align-items: center;
  width: min(250px, 100%);
  min-height: 56px;
  margin: 0 0 16px !important;
  padding: 6px 0 !important;
}

.footer-brand-logo img {
  display: block;
  width: 230px;
  max-width: 100%;
  height: auto;
  max-height: 72px;
  object-fit: contain;
  object-position: left center;
}

.footer-grid>div:first-child {
  min-width: 0;
}

.footer-grid>div:not(:first-child) a {
  padding: 6px 0 !important;
  margin: 2px 0 !important;
  line-height: 1.45 !important;
  border-radius: 7px;
  transition: padding-left .25s ease, color .25s ease, background .25s ease;
}

.footer-grid>div:not(:first-child) a:hover {
  padding-left: 9px !important;
  color: #fff !important;
  background: rgba(255, 255, 255, .055);
}

.footer h4 {
  margin: 0 0 10px !important;
}

/* Reduce the large white gaps between normal sections. */
section:not(.hero):not(.page-hero):not(.full-image):not(.our-team-v6) {
  padding-top: clamp(42px, 5vw, 62px) !important;
  padding-bottom: clamp(42px, 5vw, 62px) !important;
}

.home-motion-section,
.light {
  padding-top: clamp(42px, 5vw, 62px) !important;
  padding-bottom: clamp(42px, 5vw, 62px) !important;
}

.band {
  margin: 0 !important;
}

.motion-legacy-section,
.legacy-switch-section {
  padding-top: 42px !important;
  padding-bottom: 50px !important;
}

/* Company Profile: team immediately follows the profile facts. */
.company-content .company-profile-team {
  margin: 42px -58px -38px !important;
  width: calc(100% + 116px) !important;
  min-height: 0 !important;
  border-radius: 0 !important;
}

.company-profile-team .team-v6-inner {
  padding: 58px 0 58px !important;
}

.company-profile-team .team-stage {
  max-width: 980px !important;
  height: 390px !important;
}

.company-profile-team .team-v6-line {
  margin-bottom: 38px !important;
}

.company-profile-team .team-v6-copy {
  margin-top: 8px !important;
}

.company-profile-team .team-member {
  flex: 0 1 175px;
  width: 175px;
}

.company-profile-team .team-member.active {
  flex-basis: 290px;
  width: 290px;
}

/* Technology details: selected item remains visible and clickable. */
[data-legacy-nav="technology"] .legacy-tabs {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
}

[data-legacy-nav="technology"] .legacy-tab {
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}

.legacy-content.switching {
  opacity: .35 !important;
  transform: translateY(5px) !important;
}

.legacy-content {
  transition: opacity .18s ease, transform .22s ease !important;
}

/* Mobile: responsive header, content, story block, team and footer. */
@media (max-width:1180px) {
  .brand-logo-img {
    width: 195px !important;
    max-width: 25vw;
  }

  .links>a,
  .company-toggle {
    font-size: 13px !important;
    padding-inline: 9px !important;
  }
}

@media (max-width:900px) {
  .navbox {
    min-height: 76px !important;
  }

  .brand-logo-img {
    width: 180px !important;
    max-width: 42vw !important;
  }

  .mobile-nav-inner a,
  .mobile-company {
    font-size: 15px !important;
    line-height: 1.35 !important;
    padding: 13px 14px !important;
    min-height: 46px;
  }

  .mobile-company-links a {
    font-size: 14px !important;
    padding: 11px 18px !important;
  }

  .footer-grid {
    gap: 24px !important;
  }

  .footer-brand-logo img {
    width: 210px;
  }

  .company-content .company-profile-team {
    margin: 34px -24px -30px !important;
    width: calc(100% + 48px) !important;
  }

  .company-profile-team .team-v6-inner {
    padding: 50px 24px 52px !important;
  }

  .company-profile-team .team-stage {
    height: 350px !important;
  }
}

@media (max-width:680px) {
  .brand-logo-img {
    width: 168px !important;
    max-width: 48vw !important;
    max-height: 48px !important;
  }

  .header.scrolled .brand-logo-img {
    transform: scale(.97) !important;
  }

  /* Compact, readable page rhythm. */
  section:not(.hero):not(.page-hero):not(.full-image):not(.our-team-v6),
  .home-motion-section,
  .light {
    padding-top: 38px !important;
    padding-bottom: 40px !important;
  }

  .motion-legacy-section,
  .legacy-switch-section {
    padding-top: 28px !important;
    padding-bottom: 36px !important;
  }

  /* Mobile Sun Infotech Story / story media: give the block enough
     height and breathing room without recreating the old giant gap. */
  .story-grid {
    gap: 28px !important;
    align-items: stretch !important;
  }

  .story-copy {
    width: 100% !important;
    min-width: 0 !important;
  }

  .story-copy h2 {
    font-size: clamp(30px, 8.5vw, 42px) !important;
    line-height: 1.08 !important;
    margin-bottom: 14px !important;
  }

  .story-copy p {
    font-size: 14px !important;
    line-height: 1.72 !important;
    margin-bottom: 13px !important;
  }

  .story-media {
    min-height: 300px !important;
    width: 100% !important;
  }

  .story-media img,
  .story-media .photo {
    min-height: 300px !important;
  }

  /* Company Profile + Team: clean edge-to-edge section below facts. */
  .company-content .company-profile-team {
    margin: 28px -18px -28px !important;
    width: calc(100% + 36px) !important;
  }

  .company-profile-team .team-v6-inner {
    padding: 42px 16px 44px !important;
  }

  .company-profile-team .team-v6-head .eyebrow {
    font-size: 13px !important;
  }

  .company-profile-team .team-v6-head h2 {
    font-size: 42px !important;
  }

  .company-profile-team .team-v6-line {
    margin: 18px auto 26px !important;
  }

  .company-profile-team .team-stage {
    height: 340px !important;
  }

  .company-profile-team .team-members {
    gap: 6px !important;
  }

  .company-profile-team .team-member {
    width: 68px !important;
    flex-basis: 68px !important;
    height: 220px !important;
  }

  .company-profile-team .team-member.active {
    width: 145px !important;
    flex-basis: 145px !important;
  }

  .company-profile-team .team-member:hover {
    width: 145px !important;
    flex-basis: 145px !important;
  }

  .company-profile-team .team-member .member-caption {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
  }

  .company-profile-team .team-member .member-caption b {
    font-size: 12px !important;
  }

  .company-profile-team .team-member .member-caption span {
    font-size: 8px !important;
    letter-spacing: .7px !important;
  }

  .company-profile-team .team-v6-copy {
    font-size: 12px !important;
    line-height: 1.65 !important;
    padding: 0 8px !important;
  }

  /* Technology detail selector never disappears after clicking. */
  [data-legacy-nav="technology"] .legacy-tabs {
    display: grid !important;
    height: auto !important;
    min-height: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  [data-legacy-nav="technology"] .legacy-tab {
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Footer links get a real touch target and no cramped hover jump. */
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 22px 18px !important;
  }

  .footer-grid>div:first-child {
    grid-column: 1 / -1;
  }

  .footer-brand-logo {
    min-height: 52px;
    margin-bottom: 10px !important;
  }

  .footer-brand-logo img {
    width: 205px !important;
    max-height: 58px !important;
  }

  .footer-grid>div:not(:first-child) a {
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    padding: 7px 6px !important;
    margin: 1px 0 !important;
  }

  .footer-grid>div:not(:first-child) a:hover {
    padding-left: 6px !important;
  }

  .copy {
    margin-top: 24px !important;
    padding-top: 16px !important;
  }
}

@media (max-width:390px) {
  .brand-logo-img {
    width: 148px !important;
  }

  .nav-cta {
    font-size: 9px !important;
    padding-inline: 9px !important;
  }

  .footer-brand-logo img {
    width: 185px !important;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
  }

  .footer-grid>div:first-child {
    grid-column: auto;
  }
}

/* Prevent accidental horizontal overflow from animated team cards. */
html,
body {
  max-width: 100%;
  overflow-x: hidden !important;
}


/* ==========================================================
   V43 — FINAL FIXES
   Only requested fixes: stable Profile->Our Team placement,
   no disappearing detail selectors, mobile centering and
   responsive spacing.
   ========================================================== */

/* Team is a real page section immediately before the bridge/footer. */
#profile-our-team {
  display: none;
  position: relative;
  width: 100%;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: hidden;
}

#profile-our-team.is-visible {
  display: block !important;
  animation: profileTeamIn .65s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes profileTeamIn {
  from {
    opacity: 0;
    transform: translateY(22px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

#profile-our-team .team-v6-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 64px 24px 58px !important;
}

#profile-our-team .team-stage {
  max-width: 1050px !important;
  height: 390px !important;
  margin: 0 auto !important;
}

#profile-our-team .team-members {
  align-items: flex-start !important;
}

#profile-our-team .team-member {
  cursor: pointer;
}

#profile-our-team .team-switch button {
  cursor: pointer;
}

/* Never hide the detail selector after a selection. */
.legacy-side,
.legacy-tabs,
.legacy-tab {
  visibility: visible !important;
}

.legacy-tabs {
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
}

.legacy-tab {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Keep the selected detail readable instead of fading it out. */
.legacy-content.switching {
  opacity: 1 !important;
  transform: none !important;
}

/* Main page section rhythm — compact but not cramped. */
.company-section {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

.company-bridge {
  padding-top: 52px !important;
  padding-bottom: 52px !important;
}

.company-layout {
  gap: 22px !important;
}

/* Mobile: all detail choices visible at once, no horizontal
   scrolling that makes the other options look hidden. */
@media(max-width:900px) {
  .legacy-layout {
    gap: 18px !important;
  }

  .legacy-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    overflow: visible !important;
    padding: 6px !important;
  }

  .legacy-tab {
    min-width: 0 !important;
    width: 100% !important;
    white-space: normal !important;
    min-height: 46px !important;
    padding: 10px 10px 10px 30px !important;
  }

  .legacy-tab:before {
    left: 10px !important;
  }

  .company-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    overflow: visible !important;
  }

  .company-tab {
    min-width: 0 !important;
    white-space: normal !important;
    min-height: 44px !important;
    padding: 10px 7px !important;
  }

  #profile-our-team .team-v6-inner {
    padding: 46px 14px 46px !important;
  }

  #profile-our-team .team-stage {
    height: 350px !important;
  }

  #profile-our-team .team-members {
    gap: 5px !important;
  }

  #profile-our-team .team-member {
    width: 68px !important;
    flex-basis: 68px !important;
    height: 230px !important;
  }

  #profile-our-team .team-member.active,
  #profile-our-team .team-member:hover {
    width: 145px !important;
    flex-basis: 145px !important;
  }

  /* Mobile story: center the text block and give the image
     enough width/height so the section no longer feels squeezed. */
  .story-grid {
    gap: 30px !important;
    grid-template-columns: 1fr !important;
  }

  .story-copy {
    text-align: center !important;
    max-width: 620px !important;
    margin: 0 auto !important;
  }

  .story-copy h2 {
    font-size: clamp(31px, 8vw, 42px) !important;
    line-height: 1.12 !important;
    letter-spacing: -1.2px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .story-copy p {
    font-size: 15px !important;
    line-height: 1.75 !important;
    max-width: 590px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .checks {
    text-align: left !important;
    width: min(590px, 100%) !important;
    margin: 24px auto 0 !important;
  }

  .photo-stack {
    width: min(100%, 560px) !important;
    height: 390px !important;
    margin: 0 auto !important;
  }

  .photo-main {
    width: 82% !important;
    height: 330px !important;
    left: 0 !important;
  }

  .photo-small {
    width: 49% !important;
    height: 190px !important;
    right: 0 !important;
  }

  .photo-badge {
    left: 50% !important;
    transform: translateX(-50%) !important;
    white-space: nowrap !important;
  }

  .brand-logo-img {
    width: 178px !important;
    max-width: 50vw !important;
  }
}

@media(max-width:520px) {
  .legacy-tabs {
    grid-template-columns: 1fr !important;
  }

  .company-tabs {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  #profile-our-team .team-stage {
    height: 320px !important;
  }

  #profile-our-team .team-member {
    width: 58px !important;
    flex-basis: 58px !important;
    height: 215px !important;
  }

  #profile-our-team .team-member.active,
  #profile-our-team .team-member:hover {
    width: 128px !important;
    flex-basis: 128px !important;
  }

  #profile-our-team .team-member .member-caption {
    left: 7px !important;
    right: 7px !important;
    bottom: 8px !important;
  }

  #profile-our-team .team-member .member-caption b {
    font-size: 11px !important;
  }

  #profile-our-team .team-member .member-caption span {
    font-size: 7px !important;
  }

  .story-copy h2 {
    font-size: 31px !important;
  }

  .story-copy p {
    font-size: 14px !important;
  }

  .photo-stack {
    height: 340px !important;
  }

  .photo-main {
    height: 285px !important;
  }

  .photo-small {
    height: 165px !important;
  }
}

/* Footer and bridge should meet cleanly without a giant blank zone. */
.company-bridge+.footer {
  margin-top: 0 !important;
}

/* ==========================================================
   V44 — MOBILE NAV/TABS + TEAM INTERACTION FINAL POLISH
   Keep V43 content/design; fix only the reported responsive issues.
   ========================================================== */

/* Company section selector: never let flex/overflow make tabs overlap. */
.company-side {
  box-sizing: border-box;
}

.company-tabs {
  box-sizing: border-box;
  width: 100%;
}

.company-tab {
  box-sizing: border-box;
  min-width: 0;
  position: relative;
  transform: none !important;
}

.company-tab:hover {
  transform: none !important;
}

.company-tab.active {
  transform: none !important;
}

/* Bigger, conventional website logo — preserve the supplied artwork. */
.header .brand-logo-img {
  width: clamp(175px, 17vw, 250px) !important;
  max-height: 66px !important;
}

.footer-brand-logo img {
  width: 240px !important;
  max-height: 74px !important;
}

/* Team cards: hover lifts/zooms; selected card grows just like the video. */
#profile-our-team .team-member {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    flex-basis .75s cubic-bezier(.18, .75, .2, 1),
    width .75s cubic-bezier(.18, .75, .2, 1),
    transform .75s cubic-bezier(.18, .75, .2, 1),
    filter .75s ease,
    box-shadow .75s ease !important;
}

#profile-our-team .team-member:hover,
#profile-our-team .team-member.team-focus,
#profile-our-team .team-member.active {
  transform: translateY(-10px) scale(1.035) !important;
  z-index: 8 !important;
  filter: saturate(1.08) brightness(1.04) !important;
  box-shadow: 0 28px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .18) !important;
}

#profile-our-team .team-member:hover img,
#profile-our-team .team-member.team-focus img,
#profile-our-team .team-member.active img {
  transform: scale(1.12) !important;
}

#profile-our-team .team-member:not(:hover):not(.team-focus):not(.active) {
  filter: saturate(.82) brightness(.82);
}

#profile-our-team .team-switch button {
  min-width: 28px;
  min-height: 28px;
  border-radius: 50%;
}

/* Phone/tablet: stacked, evenly sized company selector.
   This removes the overlap shown in the supplied screenshots. */
@media(max-width:900px) {
  .company-side {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 18px !important;
  }

  .company-side-title {
    margin: 0 0 14px !important;
    line-height: 1.25 !important;
  }

  .company-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
    align-items: stretch !important;
  }

  .company-tab {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 10px 6px !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    transform: none !important;
  }

  .company-tab:hover,
  .company-tab:active,
  .company-tab.active {
    transform: none !important;
  }

  /* All legacy detail selectors stay in a visible grid. */
  .legacy-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 8px !important;
    overflow: visible !important;
    padding: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  .legacy-tab {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    width: 100% !important;
    min-height: 48px !important;
    height: auto !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    padding: 11px 12px 11px 32px !important;
    line-height: 1.35 !important;
  }

  /* More room for the selected team card on touch screens. */
  #profile-our-team .team-members {
    overflow: visible !important;
  }
}

@media(max-width:600px) {
  .header .brand-logo-img {
    width: 184px !important;
    max-width: 53vw !important;
    max-height: 52px !important;
  }

  .footer-brand-logo img {
    width: 220px !important;
    max-height: 68px !important;
  }

  .company-section {
    padding-top: 28px !important;
    padding-bottom: 36px !important;
  }

  .company-side {
    padding: 16px !important;
    border-radius: 16px !important;
  }

  .company-side-title {
    font-size: 11px !important;
    margin-bottom: 14px !important;
  }

  .company-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .company-tab {
    min-height: 50px !important;
    height: 50px !important;
    padding: 9px 4px !important;
    font-size: 14px !important;
  }

  .legacy-tabs {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
  }

  .legacy-tab {
    min-height: 46px !important;
    padding: 10px 12px 10px 31px !important;
  }

  #profile-our-team .team-stage {
    height: 335px !important;
  }

  #profile-our-team .team-member {
    height: 220px !important;
    width: 60px !important;
    flex-basis: 60px !important;
  }

  #profile-our-team .team-member.team-focus,
  #profile-our-team .team-member.active,
  #profile-our-team .team-member:hover {
    width: 138px !important;
    flex-basis: 138px !important;
    transform: translateY(-8px) scale(1.025) !important;
  }

  #profile-our-team .member-caption b {
    font-size: 11px !important;
  }

  #profile-our-team .member-caption span {
    font-size: 7px !important;
  }
}

@media(max-width:380px) {
  .header .brand-logo-img {
    width: 168px !important;
    max-width: 50vw !important;
  }

  .company-side {
    padding: 14px !important;
  }

  .company-tabs {
    gap: 4px !important;
  }

  .company-tab {
    font-size: 13px !important;
    padding-inline: 2px !important;
  }
}

/* Keep the current navigation selection obvious after a server upload. */
.links>a.active-page,
.company-toggle.active-page {
  position: relative;
}

/* ==========================================================
   V45 — STABILITY + DESKTOP TEAM POLISH
   Only fixes requested in the latest review.
   ========================================================== */

/* Tab/detail navigation must NEVER disappear, overlap, or animate out.
   The content panel may transition, but every option stays readable. */
.legacy-tabs .legacy-tab,
.company-tabs .company-tab {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  position: relative !important;
  z-index: 2 !important;
  animation: none !important;
  will-change: auto !important;
}

.legacy-tabs .legacy-tab.v27-reveal,
.company-tabs .company-tab.v27-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease !important;
}

.legacy-content.switching {
  opacity: 1 !important;
  transform: none !important;
}

.legacy-tabs,
.company-tabs {
  position: relative !important;
  z-index: 3 !important;
}

/* Desktop/tablet Our Team: give the cinematic cards enough visual weight. */
@media(min-width:901px) {
  #profile-our-team .team-v6-inner {
    max-width: 1280px !important;
    padding: 82px 42px 72px !important;
  }

  #profile-our-team .team-v6-head h2 {
    font-size: clamp(48px, 5vw, 72px) !important;
    line-height: .98 !important;
  }

  #profile-our-team .team-v6-head .eyebrow {
    font-size: 12px !important;
    letter-spacing: 2px !important;
  }

  #profile-our-team .team-v6-line {
    width: 86% !important;
    max-width: 980px !important;
    margin: 25px auto 48px !important;
  }

  #profile-our-team .team-stage {
    max-width: 1100px !important;
    height: 500px !important;
    margin: 0 auto !important;
  }

  #profile-our-team .team-members {
    width: 100% !important;
    height: 370px !important;
    gap: 10px !important;
    padding: 0 8px !important;
    align-items: flex-start !important;
    overflow: visible !important;
  }

  #profile-our-team .team-member {
    flex: 0 0 180px !important;
    width: 180px !important;
    height: 350px !important;
    min-width: 0 !important;
    border-radius: 2px !important;
    transform: translate3d(0, var(--y, 0), 0) !important;
  }

  #profile-our-team .team-member.team-focus,
  #profile-our-team .team-member.active {
    flex: 0 0 350px !important;
    width: 350px !important;
    height: 370px !important;
    transform: translate3d(0, -12px, 0) scale(1.01) !important;
  }

  #profile-our-team .team-member:hover {
    transform: translate3d(0, -12px, 0) scale(1.02) !important;
    filter: brightness(1.06) saturate(1.05) !important;
    z-index: 9 !important;
  }

  #profile-our-team .team-member:hover img,
  #profile-our-team .team-member.team-focus img,
  #profile-our-team .team-member.active img {
    transform: scale(1.075) !important;
  }

  #profile-our-team .member-caption {
    left: 20px !important;
    right: 16px !important;
    bottom: 20px !important;
  }

  #profile-our-team .member-caption b {
    font-size: 17px !important;
    line-height: 1.2 !important;
    margin-bottom: 5px !important;
  }

  #profile-our-team .member-caption span {
    font-size: 9px !important;
    letter-spacing: .13em !important;
  }

  #profile-our-team .member-number {
    top: 14px !important;
    right: 14px !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 10px !important;
  }

  #profile-our-team .team-switch {
    margin-top: 25px !important;
    gap: 9px !important;
  }

  #profile-our-team .team-switch button {
    width: 7px !important;
    height: 7px !important;
  }

  #profile-our-team .team-switch button.active {
    width: 26px !important;
    height: 4px !important;
  }

  #profile-our-team .team-v6-copy {
    width: min(760px, 90%) !important;
    font-size: 12px !important;
    line-height: 1.7 !important;
    margin-top: 18px !important;
  }
}

@media(min-width:901px) and (max-width:1180px) {
  #profile-our-team .team-v6-inner {
    padding-inline: 28px !important;
  }

  #profile-our-team .team-stage {
    height: 450px !important;
  }

  #profile-our-team .team-members {
    height: 330px !important;
    gap: 7px !important;
  }

  #profile-our-team .team-member {
    flex-basis: 145px !important;
    width: 145px !important;
    height: 310px !important;
  }

  #profile-our-team .team-member.team-focus,
  #profile-our-team .team-member.active {
    flex-basis: 290px !important;
    width: 290px !important;
    height: 330px !important;
  }
}

/* Mobile: keep the team compact and stable while preserving the same motion. */
@media(max-width:900px) {

  #profile-our-team .team-member.v27-reveal,
  #profile-our-team .team-stage.v27-reveal,
  #profile-our-team .team-v6-head.v27-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Server-safe active nav: make the state obvious in every header mode. */
.links>a.active-page,
.company-toggle.active-page {
  color: #2768f2 !important;
  background: linear-gradient(135deg, #eef3ff, #f7f0ff) !important;
  box-shadow: inset 0 -3px #2768f2 !important;
  border-radius: 9px !important;
  font-weight: 800 !important;
}

.header.scrolled .links>a.active-page,
.header.scrolled .company-toggle.active-page {
  color: #fff !important;
  background: rgba(255, 255, 255, .12) !important;
  box-shadow: inset 0 -3px #fff !important;
}

/* Avoid horizontal clipping on every device. */
.company-layout,
.legacy-layout,
.team-stage,
.team-members {
  max-width: 100%;
}


/* V46 — restore the original detail-panel switch animation without hiding tabs. */
.legacy-content,
.company-content {
  will-change: opacity, transform;
}

.legacy-content.switching,
.company-content.switching {
  opacity: 0 !important;
  transform: translate3d(0, 14px, 0) scale(.992) !important;
}

.legacy-content.content-enter,
.company-content.content-enter {
  animation: detailPanelEnter .52s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes detailPanelEnter {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(.992)
  }

  55% {
    opacity: 1;
    transform: translate3d(0, -2px, 0) scale(1.002)
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1)
  }
}

/* Keep every detail option visible; do not cancel its own hover motion. */
.legacy-tabs,
.company-tabs {
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  height: auto !important;
}

.legacy-tab,
.company-tab {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* V46 — remove the Team carousel dots/indicator completely.
   Card hover/click expansion remains unchanged. */
#profile-our-team .team-switch,
.our-team-v6.team-video-motion .team-switch {
  display: none !important;
}

/* Preserve the desktop Team animation while making the card row breathe naturally. */
@media(min-width:901px) {
  #profile-our-team .team-members {
    gap: 10px !important;
  }

  #profile-our-team .team-member {
    transition: flex-basis .72s cubic-bezier(.22, .72, .18, 1),
      width .72s cubic-bezier(.22, .72, .18, 1),
      transform .72s cubic-bezier(.22, .72, .18, 1),
      filter .55s ease, box-shadow .55s ease !important;
  }
}

/* Mobile detail options: keep them in a clean, non-overlapping flow. */
@media(max-width:680px) {

  .legacy-tabs,
  .company-tabs {
    width: 100% !important;
    min-width: 0 !important;
  }

  .legacy-tab,
  .company-tab {
    min-height: 48px !important;
    white-space: normal !important;
  }

  .legacy-content.content-enter {
    animation-duration: .46s;
  }
}

/* V47 FINAL — scroll reveal; existing .reveal behavior is preserved. */
.reveal-left,
.reveal-right,
.reveal-scale,
.zoom-scene,
.scroll-reveal,
.animate-on-scroll {
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity .8s ease, transform .85s cubic-bezier(.2, .8, .2, 1);
}

.reveal-left {
  transform: translate3d(-42px, 0, 0)
}

.reveal-right {
  transform: translate3d(42px, 0, 0)
}

.reveal-scale {
  transform: scale(.94)
}

.zoom-scene {
  transform: translateY(28px) scale(.985)
}

.scroll-reveal,
.animate-on-scroll {
  transform: translateY(38px)
}

.reveal-left.show,
.reveal-right.show,
.reveal-scale.show,
.zoom-scene.show,
.scroll-reveal.show,
.animate-on-scroll.show {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion:reduce) {

  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .zoom-scene,
  .scroll-reveal,
  .animate-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   FINAL SCROLL INDICATOR FIX
   Keep only the original clean scroll cue
   ========================================================= */

/* Hide the extra/new scroll indicator */
.v30-scroll-indicator,
.v31-scroll-indicator,
.v32-scroll-indicator,
.v33-scroll-indicator,
.v34-scroll-indicator,
.v35-scroll-indicator,
.v36-scroll-indicator {
    display: none !important;
}

/* Final polish: keep fixed navigation from covering the first inner-page hero. */
@media (max-width: 900px) {
  .page-hero { margin-top: 88px; }
}
@media (max-width: 680px) {
  .page-hero { margin-top: 72px; }
}

/* Company dropdown chevron alignment and motion polish. */
.company-toggle span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 7px;
  font-size: 15px;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.drop:hover .company-toggle span,
.drop:focus-within .company-toggle span,
.drop.open .company-toggle span,
.company-toggle.open span {
  transform: rotate(180deg) translateY(1px);
}

/* Native browser scrolling remains enabled; custom scroll indicators are removed. */
.page-hero, section[id] { scroll-margin-top: 118px; }

/* Keep the fixed header from covering the home hero on first load. */
@media (min-width: 901px) {
  .hero.hero-cinematic { margin-top: 104px; }
}
@media (max-width: 900px) and (min-width: 681px) {
  .hero.hero-cinematic { margin-top: 88px; }
}
@media (max-width: 680px) {
  .hero.hero-cinematic { margin-top: 72px; }
}

/* ==========================================================
   FINAL USER POLISH — CONSISTENT NAV + INTERNAL PAGE CLEANUP
   ========================================================== */

/* Keep every navigation item consistent with the Products/Technology look.
   Hover uses the same light-blue treatment instead of a separate purple hover. */
.links > a:hover,
.company-toggle:hover,
.company-toggle.open,
.links > a:focus-visible,
.company-toggle:focus-visible {
  color: #2768f2 !important;
  background: #eef4ff !important;
  box-shadow: none !important;
}

.links > a:hover::after,
.company-toggle:hover::after,
.company-toggle.open::after {
  background: #2768f2 !important;
  box-shadow: none !important;
}

/* Make the Company dropdown icon larger and properly centered. */
.company-toggle span {
  width: 18px !important;
  height: 18px !important;
  margin-left: 7px !important;
  font-size: 18px !important;
  line-height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}

/* Internal pages: leave the first hero comfortably below the fixed header. */
.page-motion .page-hero {
  margin-top: 104px !important;
  min-height: 610px !important;
  align-items: center !important;
}

.page-motion .page-hero .wrap {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}

/* Remove custom scroll-linked/reveal movement from inner pages.
   The normal browser page scroll remains available; Home keeps its existing
   cinematic scroll behavior. */
.page-motion .reveal,
.page-motion .reveal-left,
.page-motion .reveal-right,
.page-motion .reveal-scale,
.page-motion .zoom-scene,
.page-motion .scroll-reveal,
.page-motion .animate-on-scroll,
.page-motion .scroll-animate,
.page-motion .motion-up,
.page-motion .motion-left,
.page-motion .motion-right,
.page-motion .motion-zoom,
.page-motion .motion-fade,
.page-motion .v27-reveal,
.page-motion .section-motion,
.page-motion .motion-stagger {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
  animation: none !important;
}

.page-motion .scroll-zoom,
.page-motion .img-motion,
.page-motion .city-bg,
.page-motion .parallax-bg,
.page-motion .zoom-photo,
.page-motion .full-image .full-content,
.page-motion .hero-slides {
  transform: none !important;
}

/* No custom back-to-top control on inner pages. Native browser scrolling only. */
.page-motion .back {
  display: none !important;
}

/* Keep mobile navigation itself usable, but avoid an extra page-level scrollbar. */
@media (max-width: 900px) {
  .page-motion .page-hero {
    margin-top: 88px !important;
    min-height: 540px !important;
  }
  .page-motion .page-hero .wrap {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}

@media (max-width: 680px) {
  .page-motion .page-hero {
    margin-top: 72px !important;
    min-height: 500px !important;
  }
  .page-motion .page-hero .wrap {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }
}

/* ==========================================================
   V48 — FINAL REQUEST: ONE NORMAL PAGE SCROLL + HOME-STYLE MOTION
   Restore the same cinematic reveal/parallax behavior on inner pages,
   while keeping only the browser's normal page scrollbar.
   ========================================================== */

/* One page-level scrollbar only. No nested vertical scrolling containers. */
html,
body {
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

/* Inner pages use the same scroll-led motion system as Home. */
.page-motion .v27-reveal {
  opacity: 0;
  transform: translate3d(0, 48px, 0);
  filter: none !important;
  transition: opacity .9s var(--v27-ease), transform .9s var(--v27-ease) !important;
  animation: none !important;
}

.page-motion .v27-reveal.v27-from-left {
  transform: translate3d(-56px, 0, 0);
}

.page-motion .v27-reveal.v27-from-right {
  transform: translate3d(56px, 0, 0);
}

.page-motion .v27-reveal.v27-scale {
  transform: translate3d(0, 30px, 0) scale(.965);
}

.page-motion .v27-reveal.is-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* Restore the image reveal/parallax layer on inner pages. */
.page-motion .v27-media-motion {
  overflow: hidden !important;
}

.page-motion .v27-media-motion::after {
  transform: translateX(-125%);
}

.page-motion .v27-media-motion.is-visible::after {
  transform: translateX(125%);
}

.page-motion .v27-media-motion img {
  transform: scale(1.06);
  transition: transform 1.35s var(--v27-ease);
}

.page-motion .v27-media-motion.is-visible img {
  transform: scale(1);
}

/* Keep the first line of every inner-page hero safely below the fixed header.
   The hero remains centered, with a small downward visual bias. */
@media (min-width: 901px) {
  .page-motion .page-hero {
    margin-top: 104px !important;
    min-height: 610px !important;
    align-items: center !important;
  }

  .page-motion .page-hero .wrap {
    padding-top: 82px !important;
    padding-bottom: 48px !important;
  }
}

@media (max-width: 900px) {
  .page-motion .page-hero {
    margin-top: 88px !important;
    min-height: 560px !important;
    align-items: center !important;
  }

  .page-motion .page-hero .wrap {
    padding-top: 72px !important;
    padding-bottom: 52px !important;
  }
}

@media (max-width: 680px) {
  .page-motion .page-hero {
    margin-top: 72px !important;
    min-height: 520px !important;
    align-items: center !important;
  }

  .page-motion .page-hero .wrap {
    padding-top: 72px !important;
    padding-bottom: 46px !important;
  }
}


/* ==========================================================
   V49 — FINAL MICRO POLISH
   Company chevron + dropdown hover consistency, safe hero copy,
   responsive contact numbers, and one normal page scrollbar.
   ========================================================== */

/* Company trigger arrow: use a real CSS chevron so it stays optically
   centered instead of relying on the font glyph's baseline. */
.company-toggle span {
  position: relative !important;
  display: inline-block !important;
  width: 9px !important;
  height: 9px !important;
  margin-left: 9px !important;
  flex: 0 0 9px !important;
  font-size: 0 !important;
  line-height: 1 !important;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  transform: translateY(-2px) rotate(45deg) !important;
  transition: transform .25s cubic-bezier(.2,.8,.2,1) !important;
}
.drop:hover .company-toggle span,
.drop:focus-within .company-toggle span,
.drop.open .company-toggle span,
.company-toggle.open span {
  transform: translateY(2px) rotate(225deg) !important;
}

/* Dropdown items use exactly the same light-blue hover treatment as the
   primary navigation. */
.drop-menu a:hover,
.drop-menu a:focus-visible {
  color: #2768f2 !important;
  background: #eef4ff !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Never let the first line of a full-image section sit underneath its
   own viewport edge/header. This keeps the small kicker above the heading
   visible on every internal page. */
.page-motion .full-image {
  min-height: 680px !important;
  align-items: center !important;
}
.page-motion .full-image .full-content {
  width: 100% !important;
  box-sizing: border-box !important;
  padding-top: 90px !important;
  padding-bottom: 70px !important;
  transform: none !important;
}

/* Preserve normal browser scrolling: no custom vertical scroll containers.
   The mobile menu remains content-sized instead of creating a second page
   scrollbar. */
html,
body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scroll-behavior: smooth !important;
}
.page-motion .mobile-nav {
  max-height: none !important;
  overflow: visible !important;
}

/* Contact/mobile numbers: readable, tappable and wrap safely on small screens. */
.contact-card a[href^="tel:"],
.company-contact-card a[href^="tel:"] {
  display: inline-block;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .page-motion .full-image {
    min-height: 620px !important;
  }
  .page-motion .full-image .full-content {
    padding-top: 76px !important;
    padding-bottom: 56px !important;
  }
}

@media (max-width: 680px) {
  .page-motion .full-image {
    min-height: 560px !important;
  }
  .page-motion .full-image .full-content {
    padding-top: 58px !important;
    padding-bottom: 48px !important;
  }
  .contact-card a[href^="tel:"],
  .company-contact-card a[href^="tel:"] {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* V49B — restore the approved Home-style scroll reveal on inner pages. */
.page-motion .reveal,
.page-motion .reveal-left,
.page-motion .reveal-right,
.page-motion .reveal-scale,
.page-motion .zoom-scene,
.page-motion .scroll-reveal,
.page-motion .animate-on-scroll,
.page-motion .motion-up,
.page-motion .motion-left,
.page-motion .motion-right,
.page-motion .motion-zoom,
.page-motion .motion-fade,
.page-motion .scroll-animate {
  opacity: 0 !important;
  filter: none !important;
  animation: none !important;
  transition: opacity .85s ease, transform .9s cubic-bezier(.18,.75,.2,1) !important;
}
.page-motion .reveal { transform: translate3d(0,45px,0) !important; }
.page-motion .reveal-left,
.page-motion .motion-left,
.page-motion .scroll-animate.from-left { transform: translate3d(-56px,0,0) !important; }
.page-motion .reveal-right,
.page-motion .motion-right,
.page-motion .scroll-animate.from-right { transform: translate3d(56px,0,0) !important; }
.page-motion .reveal-scale,
.page-motion .motion-zoom,
.page-motion .scroll-animate.zoom-in { transform: translate3d(0,28px,0) scale(.96) !important; }
.page-motion .zoom-scene { transform: translate3d(0,28px,0) scale(.985) !important; }
.page-motion .scroll-reveal,
.page-motion .animate-on-scroll,
.page-motion .motion-up,
.page-motion .motion-fade,
.page-motion .scroll-animate { transform: translate3d(0,48px,0) !important; }
.page-motion .reveal.show,
.page-motion .reveal-left.show,
.page-motion .reveal-right.show,
.page-motion .reveal-scale.show,
.page-motion .zoom-scene.show,
.page-motion .scroll-reveal.show,
.page-motion .animate-on-scroll.show,
.page-motion .motion-up.in,
.page-motion .motion-left.in,
.page-motion .motion-right.in,
.page-motion .motion-zoom.in,
.page-motion .motion-fade.in,
.page-motion .scroll-animate.is-visible,
.page-motion .scroll-animate.in {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}