/* =========================================================
   HUSSAIN AHMAD — XFOLIO HERO V3
   Isolated homepage-only stylesheet. Loaded after style.css
   so old cached/legacy hero rules cannot break the layout.
   ========================================================= */

body.home-page {
  --xf-red: #ff0b15;
  --xf-green: #08c397;
  --xf-black: #050505;
  --xf-grey: #a5a5a5;
  background: var(--xf-black) !important;
}


/* Integrated black navigation */
body.home-page .site-header.site-header--hero {
  position: sticky !important;
  top: 0 !important;
  z-index: 1400 !important;
  width: 100% !important;
  height: 90px !important;
  color: #fff !important;
  background: rgba(5,5,5,.98) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.055) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body.home-page .site-header.site-header--hero.scrolled {
  background: rgba(5,5,5,.97) !important;
  box-shadow: 0 16px 45px rgba(0,0,0,.24) !important;
}
body.home-page .site-header--hero .site-header-inner {
  width: min(calc(100% - 48px), 980px) !important;
  height: 90px !important;
  margin-inline: auto !important;
  grid-template-columns: minmax(190px,1fr) auto minmax(170px,1fr) !important;
  column-gap: 32px !important;
}
body.home-page .site-header--hero .site-brand-name,
body.home-page .site-header--hero .site-nav-link { color: #fff !important; }
body.home-page .site-header--hero .site-nav-link.active { color: var(--xf-red) !important; }
body.home-page .site-header--hero .site-brand-image { max-width: 48px !important; max-height: 43px !important; }
body.home-page .site-header--hero .site-brand-name { font-size: 15px !important; }
body.home-page .site-header--hero .site-primary-nav { gap: 27px !important; }
body.home-page .site-header--hero .site-nav-link {
  min-height: 90px !important;
  font-size: 10px !important;
  letter-spacing: .03em !important;
}
body.home-page .site-header--hero .site-nav-link::after { bottom: 21px !important; }
body.home-page .site-header--hero .nav-dropdown-toggle {
  color: #fff !important;
  background: #0b0b0b !important;
  border-color: rgba(255,255,255,.2) !important;
}
body.home-page .site-header--hero .site-services-menu { color: #111 !important; }
body.home-page .site-header--hero .site-project-cta span,
body.home-page .site-header--hero .site-project-cta b { background: var(--xf-red) !important; }
body.home-page .site-header--hero .site-project-cta:hover span,
body.home-page .site-header--hero .site-project-cta:hover b { color: #050505 !important; background: #fff !important; }

/* Hero canvas */
body.home-page .hero.hero-xfolio {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: calc(100svh - 90px) !important;
  min-height: 710px !important;
  max-height: 820px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: #fff !important;
  background: var(--xf-black) !important;
  isolation: isolate !important;
}
body.home-page .hero.hero-xfolio::before,
body.home-page .hero.hero-xfolio::after { display: none !important; }

body.home-page .hero-xfolio-shell {
  position: relative !important;
  width: min(calc(100% - 48px), 980px) !important;
  height: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Heading */
body.home-page .hero-xfolio-heading {
  position: absolute !important;
  z-index: 20 !important;
  top: clamp(56px, 7.2vh, 76px) !important;
  left: 50% !important;
  width: min(760px, 82%) !important;
  max-width: none !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  text-align: center !important;
}
body.home-page .hero-xfolio .hero-kicker {
  margin: 0 0 15px !important;
  padding: 0 !important;
  color: var(--xf-green) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 650 !important;
  letter-spacing: .015em !important;
  text-align: center !important;
  text-transform: uppercase !important;
}
body.home-page .hero-xfolio .hero-title {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  font-size: clamp(48px, 4.05vw, 62px) !important;
  line-height: .9 !important;
  font-weight: 900 !important;
  letter-spacing: -.052em !important;
  text-align: center !important;
}
body.home-page .hero-xfolio .hero-title span { color: var(--xf-red) !important; }

/* Three-column composition */
body.home-page .hero-xfolio-layout {
  position: absolute !important;
  z-index: 4 !important;
  inset: 160px 0 0 !important;
  display: grid !important;
  grid-template-columns: 220px minmax(0,540px) 220px !important;
  align-items: end !important;
  gap: 0 !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Left copy */
body.home-page .hero-xfolio-intro {
  position: relative !important;
  z-index: 12 !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 92px 0 44px !important;
  text-align: left !important;
}
body.home-page .hero-xfolio .mini-title {
  display: block !important;
  margin: 0 0 12px !important;
  color: #fff !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: .015em !important;
}
body.home-page .hero-xfolio-intro p {
  width: 100% !important;
  max-width: 215px !important;
  margin: 0 0 36px !important;
  color: var(--xf-grey) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}
body.home-page .hero-xfolio .hero-circle-link {
  display: flex !important;
  width: 136px !important;
  height: 136px !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 12px !important;
  color: #fff !important;
  background: transparent !important;
  border: 1px solid var(--xf-red) !important;
  border-radius: 50% !important;
}
body.home-page .hero-xfolio .hero-circle-link b { font-size: 25px !important; }
body.home-page .hero-xfolio .hero-circle-link span { font-size: 12px !important; }
body.home-page .hero-xfolio .hero-circle-link:hover { color: #fff !important; background: var(--xf-red) !important; }

/* Center artwork */
body.home-page .hero-xfolio-visual {
  position: relative !important;
  z-index: 5 !important;
  align-self: stretch !important;
  min-width: 0 !important;
  min-height: 550px !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.home-page .hero-xfolio-shape {
  position: absolute !important;
  z-index: 1 !important;
  left: 50% !important;
  bottom: 0 !important;
  display: block !important;
  width: 430px !important;
  height: 350px !important;
  transform: translateX(-50%) rotate(-7deg) !important;
  border-radius: 49% 51% 8% 7% / 38% 45% 9% 8% !important;
  background: var(--xf-green) !important;
}
body.home-page .hero-xfolio-shape::after {
  content: "" !important;
  position: absolute !important;
  right: -68px !important;
  top: 64px !important;
  width: 172px !important;
  height: 274px !important;
  border-radius: 48% 52% 9% 8% / 30% 48% 10% 8% !important;
  background: inherit !important;
  transform: rotate(19deg) !important;
  transform-origin: left bottom !important;
}
body.home-page .hero-xfolio-portrait {
  position: absolute !important;
  z-index: 5 !important;
  left: 50% !important;
  bottom: -1px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  width: 535px !important;
  height: 520px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
}
body.home-page .hero-xfolio-portrait img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  filter: drop-shadow(0 24px 28px rgba(0,0,0,.28)) !important;
}
body.home-page .hero-xfolio-portrait-placeholder {
  width: 330px !important;
  height: 465px !important;
  display: grid !important;
  place-items: center !important;
  color: rgba(255,255,255,.58) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 48% 48% 7px 7px / 28% 28% 7px 7px !important;
  background: linear-gradient(160deg,#202020,#090909 75%) !important;
}
body.home-page .hero-xfolio-portrait-placeholder span { font-size: 88px !important; font-weight: 900 !important; }

/* Floating 3D accents */
body.home-page .hero-xfolio-float {
  position: absolute !important;
  z-index: 10 !important;
  display: block !important;
  pointer-events: none !important;
  animation: xfHeroFloat 5.5s ease-in-out infinite !important;
}
body.home-page .hero-xfolio-float img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
body.home-page .hero-xfolio-float-left { left: -34px !important; top: 42px !important; width: 84px !important; height: 74px !important; }
body.home-page .hero-xfolio-float-right { right: -43px !important; top: 66px !important; width: 92px !important; height: 84px !important; animation-delay: -2.2s !important; }

/* Right metrics */
body.home-page .hero-xfolio-metrics {
  position: relative !important;
  z-index: 12 !important;
  align-self: center !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 34px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 104px 0 74px 4px !important;
}
body.home-page .hero-xfolio .metric {
  display: grid !important;
  grid-template-columns: minmax(84px,auto) 1fr !important;
  align-items: center !important;
  justify-items: start !important;
  gap: 13px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
body.home-page .hero-xfolio .metric strong {
  display: block !important;
  min-width: 84px !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: 47px !important;
  line-height: .82 !important;
  font-weight: 900 !important;
  letter-spacing: -.055em !important;
}
body.home-page .hero-xfolio .metric sup {
  margin-left: 2px !important;
  color: inherit !important;
  font-size: 21px !important;
}
body.home-page .hero-xfolio .metric > span {
  color: var(--xf-grey) !important;
  font-size: 12px !important;
  line-height: 1.28 !important;
}
body.home-page .hero-xfolio .metric-accent strong { color: var(--xf-green) !important; }

/* Buttons below portrait, extending toward the stats column */
body.home-page .hero-xfolio-actions {
  position: absolute !important;
  z-index: 14 !important;
  right: -202px !important;
  bottom: 88px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 9px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}
body.home-page .hero-xfolio-actions .btn {
  min-height: 46px !important;
  padding: 0 23px !important;
  font-size: 10px !important;
  line-height: 1 !important;
}
body.home-page .hero-xfolio-actions .btn-primary {
  color: #fff !important;
  background: var(--xf-red) !important;
  border-color: var(--xf-red) !important;
}
body.home-page .hero-xfolio-actions .btn-outline {
  color: #fff !important;
  background: var(--xf-black) !important;
  border-color: var(--xf-green) !important;
}
body.home-page .hero-xfolio-actions .btn-primary:hover { color: #050505 !important; background: #fff !important; border-color: #fff !important; }
body.home-page .hero-xfolio-actions .btn-outline:hover { color: #050505 !important; background: var(--xf-green) !important; }

body.home-page .hero-xfolio-bottom-strip {
  position: absolute !important;
  z-index: 30 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 22px !important;
  background: var(--xf-red) !important;
}

@keyframes xfHeroFloat {
  0%,100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 -13px; rotate: 4deg; }
}

@media (max-width: 1120px) {
  body.home-page .site-header--hero .site-header-inner,
  body.home-page .hero-xfolio-shell { width: min(calc(100% - 42px), 930px) !important; }
  body.home-page .hero-xfolio-layout { grid-template-columns: 190px minmax(0,530px) 190px !important; }
  body.home-page .hero-xfolio-actions { right: -142px !important; }
  body.home-page .hero-xfolio-float-left { left: -7px !important; }
  body.home-page .hero-xfolio-float-right { right: -10px !important; }
}

@media (max-width: 900px) {
  body.home-page { --nav-h: 76px; }
  body.home-page .site-header.site-header--hero { height: 76px !important; }
  body.home-page .site-header--hero .site-header-inner { width: min(calc(100% - 30px),720px) !important; height: 76px !important; display: flex !important; }
  body.home-page .site-header--hero .site-primary-nav {
    color: #fff !important;
    background: #050505 !important;
  }
  body.home-page .site-header--hero .site-primary-nav > .site-nav-link,
  body.home-page .site-header--hero .site-services-trigger { border-bottom-color: rgba(255,255,255,.12) !important; }
  body.home-page .site-header--hero .site-services-menu { color: #fff !important; background: #0a0a0a !important; }
  body.home-page .site-header--hero .site-service-menu-item:hover { background: #161616 !important; }
  body.home-page .site-header--hero .site-service-menu-copy small { color: #9b9b9b !important; }
  body.home-page .site-header--hero .menu-toggle { color: #fff !important; background: #0b0b0b !important; border-color: rgba(255,255,255,.22) !important; }
  body.home-page .site-header--hero .menu-toggle span { background: #fff !important; }

  body.home-page .hero.hero-xfolio {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 44px 0 0 !important;
  }
  body.home-page .hero-xfolio-shell {
    width: min(calc(100% - 34px),720px) !important;
    height: auto !important;
    padding: 0 0 86px !important;
  }
  body.home-page .hero-xfolio-heading {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    transform: none !important;
  }
  body.home-page .hero-xfolio .hero-title { font-size: clamp(43px,7.5vw,58px) !important; }
  body.home-page .hero-xfolio-layout {
    position: relative !important;
    inset: auto !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    margin-top: 30px !important;
  }
  body.home-page .hero-xfolio-visual { order: 1 !important; min-height: 500px !important; }
  body.home-page .hero-xfolio-intro { order: 2 !important; padding: 0 !important; text-align: center !important; }
  body.home-page .hero-xfolio-intro p { max-width: 430px !important; margin-inline: auto !important; }
  body.home-page .hero-xfolio .hero-circle-link { margin-inline: auto !important; }
  body.home-page .hero-xfolio-metrics {
    order: 3 !important;
    grid-template-columns: repeat(3,1fr) !important;
    gap: 18px !important;
    padding: 0 !important;
  }
  body.home-page .hero-xfolio .metric { grid-template-columns: 1fr !important; justify-items: center !important; text-align: center !important; }
  body.home-page .hero-xfolio .metric strong { min-width: 0 !important; }
  body.home-page .hero-xfolio-actions { right: 50% !important; bottom: 16px !important; transform: translateX(50%) !important; }
  body.home-page .hero-xfolio-float-left { left: 8% !important; }
  body.home-page .hero-xfolio-float-right { right: 8% !important; }
}

@media (max-width: 600px) {
  body.home-page .hero.hero-xfolio { padding-top: 32px !important; }
  body.home-page .hero-xfolio-shell { width: calc(100% - 24px) !important; padding-bottom: 72px !important; }
  body.home-page .hero-xfolio .hero-kicker { font-size: 10px !important; }
  body.home-page .hero-xfolio .hero-title { font-size: clamp(37px,11vw,48px) !important; line-height: .94 !important; }
  body.home-page .hero-xfolio-layout { margin-top: 20px !important; gap: 27px !important; }
  body.home-page .hero-xfolio-visual { min-height: 405px !important; }
  body.home-page .hero-xfolio-shape { width: 310px !important; height: 260px !important; }
  body.home-page .hero-xfolio-shape::after { right: -40px !important; top: 52px !important; width: 118px !important; height: 196px !important; }
  body.home-page .hero-xfolio-portrait { width: 380px !important; height: 385px !important; }
  body.home-page .hero-xfolio-portrait-placeholder { width: 260px !important; height: 350px !important; }
  body.home-page .hero-xfolio-float-left { left: -3px !important; top: 50px !important; transform: scale(.76) !important; }
  body.home-page .hero-xfolio-float-right { right: -4px !important; top: 72px !important; transform: scale(.76) !important; }
  body.home-page .hero-xfolio-actions { bottom: 3px !important; gap: 7px !important; }
  body.home-page .hero-xfolio-actions .btn { min-height: 42px !important; padding-inline: 15px !important; font-size: 9px !important; }
  body.home-page .hero-xfolio .hero-circle-link { width: 122px !important; height: 122px !important; }
  body.home-page .hero-xfolio-metrics { grid-template-columns: 1fr !important; max-width: 260px !important; margin-inline: auto !important; gap: 18px !important; }
  body.home-page .hero-xfolio .metric { grid-template-columns: 100px 1fr !important; justify-items: start !important; text-align: left !important; }
  body.home-page .hero-xfolio .metric strong { font-size: 42px !important; }
  body.home-page .hero-xfolio-bottom-strip { height: 16px !important; }
}

/* =========================================================
   HERO LAYERED PARALLAX
   Uses the individual `translate` property so existing layout
   transforms (centering, rotation and mobile scaling) stay intact.
   ========================================================= */
body.home-page .hero-xfolio-heading,
body.home-page .hero-xfolio-intro,
body.home-page .hero-xfolio-shape,
body.home-page .hero-xfolio-portrait,
body.home-page .hero-xfolio-metrics,
body.home-page .hero-xfolio-actions,
body.home-page .hero-xfolio .hero-circle-link {
  --hero-px: 0px;
  --hero-py: 0px;
  translate: var(--hero-px) var(--hero-py) !important;
  will-change: translate !important;
}

body.home-page .hero-xfolio-float {
  --hero-px: 0px;
  --hero-py: 0px;
  will-change: translate, rotate !important;
}

/* Preserve the floating loop while adding pointer/scroll parallax. */
@keyframes xfHeroFloat {
  0%, 100% {
    translate: var(--hero-px) var(--hero-py);
    rotate: 0deg;
  }
  50% {
    translate: var(--hero-px) calc(var(--hero-py) - 13px);
    rotate: 4deg;
  }
}

/* Parallax is intentionally disabled for touch layouts and accessibility. */
@media (prefers-reduced-motion: reduce) {
  body.home-page .hero-xfolio-heading,
  body.home-page .hero-xfolio-intro,
  body.home-page .hero-xfolio-shape,
  body.home-page .hero-xfolio-portrait,
  body.home-page .hero-xfolio-metrics,
  body.home-page .hero-xfolio-actions,
  body.home-page .hero-xfolio .hero-circle-link {
    --hero-px: 0px !important;
    --hero-py: 0px !important;
    translate: 0 0 !important;
    will-change: auto !important;
  }

  body.home-page .hero-xfolio-float {
    --hero-px: 0px !important;
    --hero-py: 0px !important;
  }
}

/* =========================================================
   DEEP SCROLL PARALLAX V2
   Stronger cinematic depth while the hero exits the viewport.
   Individual transform properties preserve legacy positioning.
   ========================================================= */
body.home-page .hero-xfolio-heading,
body.home-page .hero-xfolio-intro,
body.home-page .hero-xfolio-shape,
body.home-page .hero-xfolio-portrait,
body.home-page .hero-xfolio-metrics,
body.home-page .hero-xfolio-actions,
body.home-page .hero-xfolio .hero-circle-link {
  --hero-scale: 1;
  --hero-rotate: 0deg;
  --hero-opacity: 1;
  scale: var(--hero-scale) !important;
  rotate: var(--hero-rotate) !important;
  opacity: var(--hero-opacity) !important;
  transform-origin: center center !important;
  backface-visibility: hidden !important;
}

body.home-page .hero-xfolio-shape,
body.home-page .hero-xfolio-portrait {
  transform-origin: center bottom !important;
}

body.home-page .hero-xfolio-float {
  --hero-scale: 1;
  --hero-opacity: 1;
  --hero-float-rotate: 0deg;
  scale: var(--hero-scale) !important;
  opacity: var(--hero-opacity) !important;
  transform-origin: center center !important;
}

/* Float loop + stronger scroll rotation. */
@keyframes xfHeroFloat {
  0%, 100% {
    translate: var(--hero-px) var(--hero-py);
    rotate: var(--hero-float-rotate);
  }
  50% {
    translate: var(--hero-px) calc(var(--hero-py) - 16px);
    rotate: calc(var(--hero-float-rotate) + 5deg);
  }
}

/* Slight cinematic darkening as the hero leaves the viewport. */
body.home-page .hero.hero-xfolio::after {
  content: "" !important;
  position: absolute !important;
  z-index: 28 !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
  background: linear-gradient(to bottom, transparent 45%, rgba(0,0,0,.72) 100%) !important;
  opacity: calc(var(--hero-scroll-progress, 0) * .58) !important;
}

body.home-page .hero-xfolio-bottom-strip {
  scale: calc(1 + (var(--hero-scroll-progress, 0) * .08)) 1 !important;
  transform-origin: center bottom !important;
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .hero-xfolio-heading,
  body.home-page .hero-xfolio-intro,
  body.home-page .hero-xfolio-shape,
  body.home-page .hero-xfolio-portrait,
  body.home-page .hero-xfolio-metrics,
  body.home-page .hero-xfolio-actions,
  body.home-page .hero-xfolio .hero-circle-link,
  body.home-page .hero-xfolio-float {
    --hero-scale: 1 !important;
    --hero-rotate: 0deg !important;
    --hero-opacity: 1 !important;
    --hero-float-rotate: 0deg !important;
    scale: 1 !important;
    rotate: 0deg !important;
    opacity: 1 !important;
  }

  body.home-page .hero.hero-xfolio::after {
    opacity: 0 !important;
  }

  body.home-page .hero-xfolio-bottom-strip {
    scale: 1 1 !important;
  }
}


/* Mobile scroll parallax remains enabled. Pointer movement is desktop-only in JS. */
@media (max-width:900px), (pointer:coarse){
  body.home-page .hero-xfolio-heading,body.home-page .hero-xfolio-intro,body.home-page .hero-xfolio-shape,body.home-page .hero-xfolio-portrait,body.home-page .hero-xfolio-metrics,body.home-page .hero-xfolio-actions,body.home-page .hero-xfolio .hero-circle-link,body.home-page .hero-xfolio-float{will-change:translate,scale,rotate,opacity!important;backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important}
  body.home-page .hero.hero-xfolio{overscroll-behavior:contain}
}

/* Legacy mobile-browser fallback where individual translate/scale properties are unavailable. */
body.home-page .hero.hero-xfolio.hero-parallax-legacy .hero-xfolio-heading{translate:none!important;scale:none!important;rotate:none!important;transform:translateX(-50%) translate3d(var(--hero-px),var(--hero-py),0) scale(var(--hero-scale)) rotate(var(--hero-rotate))!important}
body.home-page .hero.hero-xfolio.hero-parallax-legacy .hero-xfolio-intro,
body.home-page .hero.hero-xfolio.hero-parallax-legacy .hero-xfolio-metrics{translate:none!important;scale:none!important;rotate:none!important;transform:translate3d(var(--hero-px),var(--hero-py),0) scale(var(--hero-scale)) rotate(var(--hero-rotate))!important}
body.home-page .hero.hero-xfolio.hero-parallax-legacy .hero-circle-link{translate:none!important;scale:none!important;rotate:none!important;transform:translate3d(var(--hero-px),var(--hero-py),0) scale(var(--hero-scale)) rotate(var(--hero-rotate))!important}
body.home-page .hero.hero-xfolio.hero-parallax-legacy .hero-xfolio-shape{translate:none!important;scale:none!important;rotate:none!important;transform:translateX(-50%) rotate(-7deg) translate3d(var(--hero-px),var(--hero-py),0) scale(var(--hero-scale)) rotate(var(--hero-rotate))!important}
body.home-page .hero.hero-xfolio.hero-parallax-legacy .hero-xfolio-portrait{translate:none!important;scale:none!important;rotate:none!important;transform:translateX(-50%) translate3d(var(--hero-px),var(--hero-py),0) scale(var(--hero-scale)) rotate(var(--hero-rotate))!important}
body.home-page .hero.hero-xfolio.hero-parallax-legacy .hero-xfolio-actions{translate:none!important;scale:none!important;rotate:none!important;transform:translate3d(var(--hero-px),var(--hero-py),0) scale(var(--hero-scale)) rotate(var(--hero-rotate))!important}
body.home-page .hero.hero-xfolio.hero-parallax-legacy .hero-xfolio-float{translate:none!important;scale:none!important;rotate:none!important;animation:none!important;transform:translate3d(var(--hero-px),var(--hero-py),0) scale(var(--hero-scale)) rotate(var(--hero-float-rotate))!important}
@media(max-width:900px){body.home-page .hero.hero-xfolio.hero-parallax-legacy .hero-xfolio-heading{transform:translate3d(var(--hero-px),var(--hero-py),0) scale(var(--hero-scale)) rotate(var(--hero-rotate))!important}body.home-page .hero.hero-xfolio.hero-parallax-legacy .hero-xfolio-actions{transform:translateX(50%) translate3d(var(--hero-px),var(--hero-py),0) scale(var(--hero-scale)) rotate(var(--hero-rotate))!important}}
@media(max-width:600px){body.home-page .hero.hero-xfolio.hero-parallax-legacy .hero-xfolio-float{transform:translate3d(var(--hero-px),var(--hero-py),0) scale(calc(.76 * var(--hero-scale))) rotate(var(--hero-float-rotate))!important}}