:root { --hero-color-primary: #001912; --hero-color-secondary: #82AA94; }
.hero-mask, .hero-shape-group [class^=shape], .hero-shape-group [class^=stroke] span, .hero-copy, .hero-menu { opacity: 0 }
.hero-shape-group [class^=shape], .hero-shape-group [class^=clip], .hero-shape-group [class^=stroke] { top: -100%; left: -100% }
@media not screen and (min-width:48em) {
	.hero-inner { height: auto !important }
}
.hero-shape-groups { z-index: 1; position: relative; width: 100%; overflow: hidden }
.hero-inner::before, .hero-shape-groups::before { content: ""; display: block; width: 100%; padding-top: 100% }
@media screen and (min-width:48em) {
	.hero-inner::before, .hero-shape-groups::before { padding-top: 45.13% }
}
.hero-shape-group { position: absolute; top: 0; left: 0; width: 100%; height: 100% }
.hero-shape-group [class^=shape] { position: absolute }
.hero-shape-group [class^=shape]::before { content: ""; display: block; width: 100%; padding-top: 100%; background-repeat: no-repeat; background-size: 100% 100% }
.hero-shape-group [class^=shape].-ra::before { transform: scale(1, -1) }
.hero-shape-group [class^=shape].-rv::before { transform: scale(-1, 1) }
.hero-shape-group [class^=shape].-rva::before { transform: scale(-1, -1) }
.hero-shape-group [class^=shape][class*=-dent-gray]::before { padding-top: 86.12%; background-image: url(./../img/hero-dent-gray.svg) }
.hero-shape-group [class^=shape][class*=-dent-green]::before { padding-top: 86.12%; background-image: url(./../img/hero-dent-green.svg) }
.hero-shape-group [class^=shape][class*=-bump-dark]::before { padding-top: 45.14%; background-image: url(./../img/hero-bump-dark.svg) }
.hero-shape-group [class^=shape][class*=-bump-light]::before { padding-top: 45.14%; background-image: url(./../img/hero-bump-light.svg) }
.hero-shape-group [class^=shape][class*=-bump-dot-gray]::before { padding-top: 43.78%; background-image: url(./../img/hero-bump-dot-gray.svg) }
.hero-shape-group [class^=shape][class*=-bump-dot-green]::before { padding-top: 43.78%; background-image: url(./../img/hero-bump-dot-green.svg) }
.hero-shape-group:not([data-hero-item=top]) { opacity: 0 }


.hero-shape-group[data-hero-item=top] .shape01 { z-index: 2; position: absolute; top: -2.53%; bottom: auto; left: 21.65%; width: 61.17%; height: auto; transform-origin: center center; }
.hero-shape-group[data-hero-item=top] .shape02 { z-index: 1; position: absolute; top: -15.85%; bottom: auto; left: 62.46%; width: 86%; height: auto; transform: rotate(-45deg); transform-origin: center center; }
.hero-shape-group[data-hero-item=top] .shape03 { z-index: 1; position: absolute; top: auto; bottom: -2.69%; left: 49.17%; width: 77.67%; height: auto; transform: rotate(90deg); transform-origin: center center; }
.hero-shape-group[data-hero-item=top] .shape04 { z-index: 2; position: absolute; top: auto; bottom: 7.53%; left: 76.53%; width: 35.5%; height: auto; transform: rotate(90deg); transform-origin: center center; }
.hero-shape-group[data-hero-item=top] .shape05 { z-index: 1; position: absolute; top: auto; bottom: -15%; left: -30.49%; width: 97.08%; height: auto; transform-origin: center center; }
.hero-shape-group[data-hero-item=top] .shape06 { z-index: 2; position: absolute; top: auto; bottom: -10%; left: -43.26%; width: 93%; height: auto; transform: rotate(180deg); transform-origin: center center; }
.hero-shape-group[data-hero-item=top] .shape07 { z-index: 1; position: absolute; top: -10%; bottom: auto; left: -19.03%; width: 43.83%; height: auto; transform: rotate(135deg); transform-origin: center center; }
@media screen and (min-width:48em) {
	.hero-shape-group[data-hero-item=top] .shape01 { z-index: 2; position: absolute; top: -5.53%; bottom: auto; left: 34.65%; width: 34.31%; height: auto; transform-origin: center center; }
	.hero-shape-group[data-hero-item=top] .shape02 { z-index: 1; position: absolute; top: -35.85%; bottom: auto; left: 51.46%; width: 67.5%; height: auto; transform: rotate(-45deg); transform-origin: center center; }
	.hero-shape-group[data-hero-item=top] .shape03 { z-index: 1; position: absolute; top: auto; bottom: -5.69%; left: 69.17%; width: 48.06%; height: auto; transform: rotate(90deg); transform-origin: center center; }
	.hero-shape-group[data-hero-item=top] .shape04 { z-index: 2; position: absolute; top: auto; bottom: 9.23%; left: 86.53%; width: 21.25%; height: auto; transform: rotate(90deg); transform-origin: center center; }
	.hero-shape-group[data-hero-item=top] .shape05 { z-index: 1; position: absolute; top: 8%; bottom: auto; left: -5.49%; width: 60.07%; height: auto; transform-origin: center center; }
	.hero-shape-group[data-hero-item=top] .shape06 { z-index: 2; position: absolute; top: 48.92%; bottom: auto; left: -8.26%; width: 52.5%; height: auto; transform: rotate(180deg); transform-origin: center center; }
	.hero-shape-group[data-hero-item=top] .shape07 { z-index: 1; position: absolute; top: -38%; bottom: auto; left: -19.03%; width: 44.86%; height: auto; transform: rotate(135deg); transform-origin: center center; }
}

.hero-shape-group[data-hero-item=erp] .shape01 { z-index: 1; position: absolute; top: auto; bottom: -25%; left: 58.75%; width: 120%; height: auto; transform: rotate(135deg); transform-origin: center center; }
.hero-shape-group[data-hero-item=erp] .shape02 { z-index: 1; position: absolute; top: auto; bottom: -2.22%; left: -24.44%; width: 88.40%; height: auto; transform: rotate(180deg); transform-origin: center center; }
.hero-shape-group[data-hero-item=erp] .shape03 { z-index: 1; position: absolute; top: -25%; bottom: auto; left: -85.54%; width: 120%; height: auto; transform: rotate(-45deg); transform-origin: center center; }
@media screen and (min-width:48em) {
	.hero-shape-group[data-hero-item=erp] .shape01 { z-index: 1; position: absolute; top: auto; bottom: -24%; left: 50.75%; width: 55.49%; height: auto; transform: rotate(135deg); transform-origin: center center; }
	.hero-shape-group[data-hero-item=erp] .shape02 { z-index: 1; position: absolute; top: auto; bottom: -2.22%; left: -4.44%; width: 48.40%; height: auto; transform: rotate(180deg); transform-origin: center center; }
	.hero-shape-group[data-hero-item=erp] .shape03 { z-index: 1; position: absolute; top: auto; bottom: -5%; left: -55.54%; width: 70.92%; height: auto; transform: rotate(-45deg); transform-origin: center center; }
}

.hero-shape-group[data-hero-item=edi] .shape01 { z-index: 1; position: absolute; top: -35%; bottom: auto; left: 40.75%; width: 86.49%; height: auto; transform: rotate(135deg); transform-origin: center center; }
.hero-shape-group[data-hero-item=edi] .shape02 { z-index: 2; position: absolute; top: auto; bottom: 16.51%; left: 58.06%; width: 64.375%; height: auto; transform: rotate(90deg); transform-origin: center center; }
.hero-shape-group[data-hero-item=edi] .shape03 { z-index: 1; position: absolute; top: auto; bottom: -7%; left: 23.19%; width: 48.54%; height: auto; transform: rotate(180deg); transform-origin: center center; }
.hero-shape-group[data-hero-item=edi] .shape04 { z-index: 1; position: absolute; top: auto; bottom: -20%; left: -40%; width: 67.99%; height: auto; transform: rotate(135deg); transform-origin: center center; }
.hero-shape-group[data-hero-item=edi] .shape05 { z-index: 1; position: absolute; top: 6.14%; bottom: auto; left: -26%; width: 85.4%; height: auto; transform: rotate(-90deg); transform-origin: center center; }
@media screen and (min-width:48em) {
	.hero-shape-group[data-hero-item=edi] .shape01 { z-index: 1; position: absolute; top: -60%; bottom: auto; left: 50.75%; width: 56.49%; height: auto; transform: rotate(135deg); transform-origin: center center; }
	.hero-shape-group[data-hero-item=edi] .shape02 { z-index: 2; position: absolute; top: auto; bottom: 16.51%; left: 78.06%; width: 34.375%; height: auto; transform: rotate(90deg); transform-origin: center center; }
	.hero-shape-group[data-hero-item=edi] .shape03 { z-index: 1; position: absolute; top: auto; bottom: -17%; left: 33.19%; width: 48.54%; height: auto; transform: rotate(180deg); transform-origin: center center; }
	.hero-shape-group[data-hero-item=edi] .shape04 { z-index: 1; position: absolute; top: auto; bottom: -50%; left: -30%; width: 57.99%; height: auto; transform: rotate(135deg); transform-origin: center center; }
	.hero-shape-group[data-hero-item=edi] .shape05 { z-index: 1; position: absolute; top: 11.14%; bottom: auto; left: -16%; width: 45.4%; height: auto; transform: rotate(-90deg); transform-origin: center center; }
}

.hero-shape-group[data-hero-item=wms] .shape01 { z-index: 1; position: absolute; top: -20%; bottom: auto; left: 56.64%; width: 81.11%; height: auto; transform: rotate(-135deg) scale(1, -1); transform-origin: center center; }
.hero-shape-group[data-hero-item=wms] .shape02 { z-index: 1; position: absolute; top: auto; bottom: -3.5%; left: 66.81%; width: 44.375%; height: auto; transform: rotate(180deg); transform-origin: center center; }
.hero-shape-group[data-hero-item=wms] .shape03 { z-index: 1; position: absolute; top: auto; bottom: 0; left: -3.54%; width: 49.93%; height: auto; transform: rotate(180deg); transform-origin: center center; }
.hero-shape-group[data-hero-item=wms] .shape04 { z-index: 3; position: absolute; top: 27.75%; bottom: auto; left: -90%; width: 125.625%; height: auto; transform: rotate(-45deg); transform-origin: center center; mix-blend-mode: multiply; }
.hero-shape-group[data-hero-item=wms] .shape05 { z-index: 2; position: absolute; top: 21.94%; bottom: auto; left: -3.5%; width: 86.32%; height: auto; transform: rotate(-90deg); transform-origin: center center; }
@media screen and (min-width:48em) {
	.hero-shape-group[data-hero-item=wms] .shape01 { z-index: 1; position: absolute; top: -23%; bottom: auto; left: 66.64%; width: 51.11%; height: auto; transform: rotate(-135deg) scale(1, -1); transform-origin: center center; }
	.hero-shape-group[data-hero-item=wms] .shape02 { z-index: 1; position: absolute; top: auto; bottom: -13.5%; left: 76.81%; width: 34.375%; height: auto; transform: rotate(180deg); transform-origin: center center; }
	.hero-shape-group[data-hero-item=wms] .shape03 { z-index: 1; position: absolute; top: auto; bottom: -16.35%; left: -13.54%; width: 49.93%; height: auto; transform: rotate(180deg); transform-origin: center center; }
	.hero-shape-group[data-hero-item=wms] .shape04 { z-index: 3; position: absolute; top: 7.75%; bottom: auto; left: -60%; width: 85.625%; height: auto; transform: rotate(-45deg); transform-origin: center center; mix-blend-mode: multiply; }
	.hero-shape-group[data-hero-item=wms] .shape05 { z-index: 2; position: absolute; top: 31.94%; bottom: auto; left: -1.5%; width: 46.32%; height: auto; transform: rotate(-90deg); transform-origin: center center; }
}

.hero-shape-group[data-hero-item=multilingual] .shape01 { z-index: 1; position: absolute; top: 0; bottom: auto; left: 41.93%; width: 80.74%; height: auto; transform: rotate(-45deg) scale(1, -1); transform-origin: center center; }
.hero-shape-group[data-hero-item=multilingual] .shape02 { z-index: 2; position: absolute; top: auto; bottom: -4.05%; left: 60.14%; width: 52.43%; height: auto; transform: rotate(180deg); transform-origin: center center; mix-blend-mode: multiply; }
.hero-shape-group[data-hero-item=multilingual] .shape03 { z-index: 1; position: absolute; top: auto; bottom: -7.78%; left: -5.14%; width: 46.74%; height: auto; transform: rotate(180deg); transform-origin: center center; }
.hero-shape-group[data-hero-item=multilingual] .shape04 { z-index: 2; position: absolute; top: 42%; bottom: auto; left: -84.5%; width: 105.625%; height: auto; transform: rotate(-45deg); transform-origin: center center; mix-blend-mode: multiply; }
.hero-shape-group[data-hero-item=multilingual] .shape05 { z-index: 1; position: absolute; top: -15%; bottom: auto; left: -49%; width: 80.74%; height: auto; transform: rotate(-135deg) scale(1, -1); transform-origin: center center; }
.hero-shape-group[data-hero-item=multilingual] .shape06 { z-index: 2; position: absolute; top: -5.95%; bottom: auto; left: 0.36%; width: 64.03%; height: auto; transform-origin: center center; mix-blend-mode: multiply; }
@media screen and (min-width:48em) {
	.hero-shape-group[data-hero-item=multilingual] .shape01 { z-index: 1; position: absolute; top: 0; bottom: auto; left: 61.93%; width: 60.74%; height: auto; transform: rotate(-45deg) scale(1, -1); transform-origin: center center; }
	.hero-shape-group[data-hero-item=multilingual] .shape02 { z-index: 2; position: absolute; top: auto; bottom: -9.05%; left: 60.14%; width: 32.43%; height: auto; transform: rotate(180deg); transform-origin: center center; mix-blend-mode: multiply; }
	.hero-shape-group[data-hero-item=multilingual] .shape03 { z-index: 1; position: absolute; top: auto; bottom: -17.78%; left: -10.14%; width: 36.74%; height: auto; transform: rotate(180deg); transform-origin: center center; }
	.hero-shape-group[data-hero-item=multilingual] .shape04 { z-index: 2; position: absolute; top: 2%; bottom: auto; left: -74.5%; width: 85.625%; height: auto; transform: rotate(-45deg); transform-origin: center center; mix-blend-mode: multiply; }
	.hero-shape-group[data-hero-item=multilingual] .shape05 { z-index: 1; position: absolute; top: -25%; bottom: auto; left: -39%; width: 60.74%; height: auto; transform: rotate(-135deg) scale(1, -1); transform-origin: center center; }
	.hero-shape-group[data-hero-item=multilingual] .shape06 { z-index: 2; position: absolute; top: -5.95%; bottom: auto; left: 7.36%; width: 44.03%; height: auto; transform-origin: center center; mix-blend-mode: multiply; }
}

.hero-shape-group[data-hero-item=consulting] .shape01 { z-index: 1; position: absolute; top: -12%; bottom: auto; left: 57.5%; width: 61.74%; height: auto; transform: rotate(-45deg) scale(1, -1); transform-origin: center center; }
.hero-shape-group[data-hero-item=consulting] .shape02 { z-index: 1; position: absolute; top: auto; bottom: -2.46%; left: 59.72%; width: 42.43%; height: auto; transform: rotate(180deg); transform-origin: center center; }
.hero-shape-group[data-hero-item=consulting] .shape03 { z-index: 1; position: absolute; top: auto; bottom: -18%; left: -10%; width: 53.82%; height: auto; transform: rotate(45deg) scale(1, -1); transform-origin: center center; }
.hero-shape-group[data-hero-item=consulting] .shape04 { z-index: 2; position: absolute; top: auto; bottom: -25%; left: -82%; width: 95.625%; height: auto; transform: rotate(-45deg); transform-origin: center center; mix-blend-mode: multiply; }
.hero-shape-group[data-hero-item=consulting] .shape05 { z-index: 2; position: absolute; top: 11.94%; bottom: auto; left: -25%; width: 66.32%; height: auto; transform: rotate(-90deg); transform-origin: center center; mix-blend-mode: multiply; }
.hero-shape-group[data-hero-item=consulting] .shape06 { z-index: 1; position: absolute; top: -4%; bottom: auto; left: 8.83%; width: 42.71%; height: auto; transform-origin: center center; }
@media screen and (min-width:48em) {
	.hero-shape-group[data-hero-item=consulting] .shape01 { z-index: 1; position: absolute; top: -32%; bottom: auto; left: 67.5%; width: 51.74%; height: auto; transform: rotate(-45deg) scale(1, -1); transform-origin: center center; }
	.hero-shape-group[data-hero-item=consulting] .shape02 { z-index: 1; position: absolute; top: auto; bottom: -7.46%; left: 59.72%; width: 32.43%; height: auto; transform: rotate(180deg); transform-origin: center center; }
	.hero-shape-group[data-hero-item=consulting] .shape03 { z-index: 1; position: absolute; top: auto; bottom: -38%; left: -10%; width: 53.82%; height: auto; transform: rotate(45deg) scale(1, -1); transform-origin: center center; }
	.hero-shape-group[data-hero-item=consulting] .shape04 { z-index: 2; position: absolute; top: 3%; bottom: auto; left: -77%; width: 85.625%; height: auto; transform: rotate(-45deg); transform-origin: center center; mix-blend-mode: multiply; }
	.hero-shape-group[data-hero-item=consulting] .shape05 { z-index: 2; position: absolute; top: 31.94%; bottom: auto; left: -15%; width: 46.32%; height: auto; transform: rotate(-90deg); transform-origin: center center; mix-blend-mode: multiply; }
	.hero-shape-group[data-hero-item=consulting] .shape06 { z-index: 1; position: absolute; top: -2%; bottom: auto; left: 6.83%; width: 22.71%; height: auto; transform-origin: center center; }
}

/* .hero-copy, .hero-copy span { position: relative } */
/* .hero-copy .mask { position: absolute; top: 0; right: 0; width: 100%; height: 100%; display: block; display: none; background-color: var(--hero-color-primary) } */
.hero-loader { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; display: inline-block; width: 1em; height: .5em; font-size: 2em; }
.hero-loader::before, .hero-loader::after { content: ""; position: absolute; display: block; width: .5em; height: .5em; font-size: 1em }
.hero-loader::before { animation: load-before 2s ease-in-out infinite, zoom-before .66s ease-in-out infinite; background: var(--hero-color-primary); }
.hero-loader::after { animation: load-after 2s ease-in-out infinite, zoom-after .66s ease-in-out infinite; background: var(--hero-color-secondary); }
@keyframes load-before {
	0% { left: 0; transform: scale(1.1); }
	50% { left: 100%; transform: scale(1); }
	100% { left: 0; transform: scale(1.1); }
}
@keyframes load-before {
	0% { left: 0; transform: scale(1.1); }
	50% { left: 100%; transform: scale(1); }
	100% { left: 0; transform: scale(1.1); }
}
@keyframes load-after {
	0% { left: 100%; transform: scale(1.1); }
	50% { left: 0; transform: scale(1); }
	100% { left: 100%; transform: scale(1.1); }
}
@keyframes load-after {
	0% { left: 100%; transform: scale(1.1); }
	50% { left: 0; transform: scale(1); }
	100% { left: 100%; transform: scale(1.1); }
}
@keyframes zoom-before {
	0% { z-index: 0; }
	50% { z-index: 1; }
	100% { z-index: 0; }
}
@keyframes zoom-before {
	0% { z-index: 0; }
	50% { z-index: 1; }
	100% { z-index: 0; }
}
@keyframes zoom-after {
	0% { z-index: 1; }
	50% { z-index: 0; }
	100% { z-index: 1; }
}
@keyframes zoom-after {
	0% { z-index: 1; }
	50% { z-index: 0; }
	100% { z-index: 1; }
}