:root {
--color-bg: #edf3f6;
--color-soft: #dfe9ee;
--color-card: rgba(255, 255, 255, 0.86);
--color-text: #102331;
--color-muted: #637783;
--color-accent: #557586;
--color-accent-dark: #082744;
--color-line: rgba(8, 39, 68, 0.16);
--color-line-strong: rgba(8, 39, 68, 0.28);
--color-grid: rgba(8, 39, 68, 0.055);
--container: 1120px;
--radius: 10px;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: "Inter", "Segoe UI", Arial, sans-serif;
background:
linear-gradient(var(--color-grid) 1px, transparent 1px),
linear-gradient(90deg, var(--color-grid) 1px, transparent 1px),
var(--color-bg);
background-size: 42px 42px;
color: var(--color-text);
line-height: 1.5;
}
a {
color: inherit;
text-decoration: none;
}
img {
display: block;
max-width: 100%;
}
.container {
width: min(var(--container), calc(100% - 36px));
margin: 0 auto;
}
.brand-hero {
width: 100%;
background: #edf3f6;
border-bottom: 1px solid var(--color-line);
overflow: hidden;
}
.brand-hero__image {
width: 100%;
height: auto;
display: block;
}
.brand-hero__image--en {
display: none;
}
.site.lang-en-active .brand-hero__image--et {
display: none;
}
.site.lang-en-active .brand-hero__image--en {
display: block;
}
.header {
position: sticky;
top: 0;
z-index: 40;
background: rgba(237, 243, 246, 0.94);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--color-line);
}
.header__inner {
min-height: 48px;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav {
display: flex;
gap: 18px;
font-size: 11px;
color: var(--color-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.nav a {
font-weight: 750;
position: relative;
transition: color 0.18s ease;
}
.nav a::after {
content: "";
position: absolute;
left: 0;
bottom: -15px;
width: 100%;
height: 2px;
background: var(--color-accent-dark);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.18s ease;
}
.nav a:hover,
.nav a.is-active {
color: var(--color-accent-dark);
}
.nav a.is-active::after {
transform: scaleX(1);
}
.lang-switch {
display: flex;
align-items: center;
gap: 6px;
color: var(--color-muted);
font-size: 11px;
letter-spacing: 0.08em;
}
.lang-btn {
border: 0;
background: transparent;
cursor: pointer;
font-weight: 850;
color: var(--color-muted);
padding: 4px 2px;
}
.lang-btn.active {
color: var(--color-accent-dark);
}
.lang-en {
display: none;
}
.site.lang-en-active .lang-et {
display: none;
}
.site.lang-en-active .lang-en {
display: inline;
}
.section {
padding: 34px 0;
position: relative;
}
.section--soft {
background:
linear-gradient(var(--color-grid) 1px, transparent 1px),
linear-gradient(90deg, var(--color-grid) 1px, transparent 1px),
var(--color-soft);
background-size: 42px 42px;
border-top: 1px solid var(--color-line);
border-bottom: 1px solid var(--color-line);
}
.intro-section {
padding-top: 30px;
}
.intro-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 240px;
gap: 28px;
align-items: center;
}
.eyebrow,
.section-heading__label {
margin: 0 0 8px;
color: var(--color-accent-dark);
font-size: 10px;
font-weight: 850;
text-transform: uppercase;
letter-spacing: 0.18em;
}
.intro-grid h2,
.section-heading h2 {
margin: 0;
font-size: clamp(24px, 3.4vw, 38px);
line-height: 1.05;
letter-spacing: -0.035em;
font-weight: 650;
}
.intro-lead {
margin: 12px 0 0;
max-width: 720px;
color: var(--color-muted);
font-size: 15px;
}
.hero__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 18px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 18px;
border-radius: 6px;
background: var(--color-accent-dark);
color: #ffffff;
font-weight: 850;
font-size: 11px;
border: 1px solid var(--color-accent-dark);
text-transform: uppercase;
letter-spacing: 0.08em;
transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn:hover {
transform: translateY(-2px);
background: var(--color-accent);
border-color: var(--color-accent);
}
.btn--ghost {
background: transparent;
color: var(--color-accent-dark);
}
.btn--ghost:hover {
color: #ffffff;
}
.hero__profile {
width: 100%;
max-width: 220px;
justify-self: center;
}
.hero__profile img {
width: 100%;
max-width: 220px;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: var(--radius);
border: 1px solid var(--color-line);
box-shadow: none;
}
.hero__person {
margin-top: 10px;
text-align: center;
}
.hero__person strong {
display: block;
font-size: 14px;
font-weight: 850;
color: var(--color-text);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.hero__person-role {
margin-top: 3px;
color: var(--color-muted);
font-size: 12px;
}
.section-heading {
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 1px solid var(--color-line);
}
.services-grid,
.portfolio-grid {
display: grid;
gap: 14px;
}
.services-grid {
grid-template-columns: repeat(3, 1fr);
}
.portfolio-grid {
grid-template-columns: repeat(4, 1fr);
}
.service-card,
.portfolio-card,
.process-description,
.pricing-card,
.contact-card {
background: var(--color-card);
border: 1px solid var(--color-line);
border-radius: var(--radius);
box-shadow: none;
backdrop-filter: blur(8px);
position: relative;
}
.service-card {
padding: 18px;
overflow: hidden;
}
.service-card::before,
.portfolio-card::before,
.process-description::before,
.pricing-card::before,
.contact-card::before {
content: "";
position: absolute;
top: 9px;
right: 9px;
width: 20px;
height: 20px;
border-top: 1px solid var(--color-line-strong);
border-right: 1px solid var(--color-line-strong);
pointer-events: none;
}
.card-index {
display: block;
margin-bottom: 16px;
color: var(--color-accent);
font-size: 11px;
font-weight: 850;
letter-spacing: 0.16em;
}
.service-card h3,
.process-description h3 {
margin: 0 0 6px;
font-size: 18px;
font-weight: 700;
}
.service-card p,
.process-description p {
margin: 0;
color: var(--color-muted);
font-size: 14px;
}
.portfolio-card {
overflow: hidden;
}
.portfolio-card--special {
border-color: rgba(120, 150, 170, 0.45);
background:
linear-gradient(
135deg,
rgba(255,255,255,0.92),
rgba(220,230,236,0.88)
);
}
.portfolio-card__badge {
position: absolute;
top: 10px;
left: 10px;
z-index: 3;
}
.portfolio-card__badge span {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 0 10px;
border-radius: 4px;
background: rgba(8, 39, 68, 0.92);
color: #ffffff;
font-size: 10px;
font-weight: 850;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.portfolio-card__image {
width: 100%;
height: 165px;
padding: 0;
border: 0;
cursor: pointer;
background: linear-gradient(135deg, #d9e5eb, #f6fafc);
overflow: hidden;
}
.portfolio-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.22s ease, filter 0.22s ease;
}
.portfolio-card__image:hover img {
transform: scale(1.035);
filter: contrast(1.04);
}
.portfolio-card__body {
padding: 14px;
border-top: 1px solid var(--color-line);
background: linear-gradient(90deg, rgba(8, 39, 68, 0.04), transparent);
}
.portfolio-card__body h3 {
margin: 0 0 4px;
font-size: 17px;
font-weight: 750;
}
.portfolio-card__body p {
margin: 0;
color: var(--color-muted);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.process-steps {
display: grid;
grid-template-columns: 1fr 26px 1fr 26px 1fr 26px 1fr;
gap: 8px;
align-items: center;
}
.process-step {
min-height: 78px;
padding: 14px;
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.78);
border: 1px solid var(--color-line);
cursor: pointer;
transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.process-step:hover {
transform: translateY(-2px);
}
.process-step.is-active {
background: var(--color-accent-dark);
color: #ffffff;
border-color: var(--color-accent-dark);
}
.process-step__number {
margin-bottom: 4px;
font-size: 11px;
font-weight: 850;
opacity: 0.7;
letter-spacing: 0.16em;
}
.process-step__title {
font-weight: 850;
font-size: 14px;
}
.process-arrow {
text-align: center;
font-size: 20px;
color: var(--color-accent-dark);
}
.process-descriptions {
margin-top: 12px;
}
.process-description {
display: none;
padding: 18px;
}
.process-description.is-active {
display: block;
}
.pricing-card {
max-width: 820px;
padding: 18px;
}
.pricing-card p {
margin: 0;
color: var(--color-muted);
font-size: 15px;
}
.pricing-card p + p {
margin-top: 10px;
}
.pricing-card strong {
color: var(--color-text);
}
.contact-card {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding: 16px;
}
.contact-card__item {
padding: 12px;
border-radius: 6px;
background: rgba(237, 243, 246, 0.82);
border: 1px solid var(--color-line);
}
.contact-card__label {
display: block;
margin-bottom: 5px;
color: var(--color-muted);
font-size: 10px;
font-weight: 850;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.contact-card strong {
font-size: 14px;
}
.contact-card a {
color: var(--color-accent-dark);
}
.project-viewer {
position: fixed;
inset: 0;
z-index: 100;
display: none;
background: rgba(8, 16, 20, 0.94);
color: #ffffff;
}
.project-viewer.is-open {
display: flex;
align-items: center;
justify-content: center;
}
.project-viewer__inner {
width: min(1180px, calc(100% - 32px));
max-height: 94vh;
display: flex;
flex-direction: column;
gap: 14px;
}
.project-viewer__close {
position: absolute;
top: 18px;
right: 26px;
z-index: 3;
border: 0;
background: transparent;
color: #ffffff;
font-size: 42px;
line-height: 1;
cursor: pointer;
}
.project-viewer__header h3 {
margin: 0;
font-size: 24px;
font-weight: 650;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.project-viewer__header p {
margin: 4px 0 0;
color: rgba(255, 255, 255, 0.72);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.project-viewer__stage {
position: relative;
display: grid;
grid-template-columns: 56px minmax(0, 1fr) 56px;
gap: 16px;
align-items: center;
}
.project-viewer__content {
width: 100%;
height: min(68vh, 720px);
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
}
.project-viewer__content img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 8px;
}
.project-viewer__nav {
position: static;
width: 46px;
height: 46px;
min-width: 46px;
min-height: 46px;
padding: 0;
margin: 0 auto;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 6px;
background: rgba(255, 255, 255, 0.12);
color: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.project-viewer__nav::before {
color: #ffffff;
font-size: 34px;
font-weight: 400;
line-height: 1;
display: block;
transform: translateY(-1px);
}
.project-viewer__nav--prev::before {
content: "‹";
}
.project-viewer__nav--next::before {
content: "›";
}
.project-viewer__thumbs {
display: flex;
gap: 10px;
overflow-x: auto;
padding: 8px 2px 2px;
}
.project-viewer__thumb {
flex: 0 0 88px;
height: 58px;
padding: 0;
border: 2px solid transparent;
border-radius: 6px;
overflow: hidden;
background: rgba(255, 255, 255, 0.1);
cursor: pointer;
opacity: 0.62;
}
.project-viewer__thumb.is-active {
border-color: #ffffff;
opacity: 1;
}
.project-viewer__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.compare-pair {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
gap: 18px;
align-items: center;
}
.compare-pair__item {
position: relative;
height: 100%;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
}
.compare-pair__item img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 8px;
}
.compare-pair__label {
position: absolute;
top: 14px;
left: 14px;
padding: 6px 10px;
border-radius: 4px;
background: rgba(20, 32, 38, 0.72);
color: #ffffff;
font-size: 11px;
font-weight: 850;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.compare-pair__arrow {
color: #ffffff;
font-size: 34px;
font-weight: 800;
line-height: 1;
}
@media (max-width: 980px) {
.nav {
display: none;
}
.header__inner {
justify-content: flex-end;
}
.intro-grid {
grid-template-columns: 1fr;
}
.hero__profile {
justify-self: start;
}
.services-grid,
.portfolio-grid {
grid-template-columns: repeat(2, 1fr);
}
.process-steps {
grid-template-columns: 1fr;
}
.process-arrow {
transform: rotate(90deg);
}
.contact-card {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 640px) {
.container {
width: min(100% - 28px, var(--container));
}
.section {
padding: 28px 0;
}
.intro-section {
padding-top: 28px;
}
.intro-grid h2,
.section-heading h2 {
font-size: clamp(23px, 7vw, 32px);
}
.intro-lead {
font-size: 14px;
}
.services-grid,
.portfolio-grid,
.contact-card {
grid-template-columns: 1fr;
}
.hero__actions {
flex-direction: column;
}
.btn {
width: 100%;
}
.project-viewer.is-open {
align-items: flex-start;
padding-top: 56px;
}
.project-viewer__inner {
width: min(100% - 24px, 1180px);
max-height: calc(100vh - 70px);
gap: 10px;
}
.project-viewer__header h3 {
font-size: 21px;
}
.project-viewer__header p {
font-size: 12px;
}
.project-viewer__stage {
grid-template-columns: 44px minmax(0, 1fr) 44px;
gap: 6px;
}
.project-viewer__content {
height: 46vh;
}
.project-viewer__thumbs {
padding: 10px 2px 4px;
background: rgba(8, 16, 20, 0.35);
border-radius: 8px;
}
.project-viewer__nav {
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
}
.project-viewer__nav::before {
font-size: 28px;
transform: translateY(-1px);
}
.project-viewer__thumb {
flex-basis: 72px;
height: 48px;
}
.compare-pair {
grid-template-columns: 1fr;
grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
gap: 10px;
}
.compare-pair__arrow {
transform: rotate(90deg);
text-align: center;
font-size: 24px;
}
}.wp-block-uagb-container{display:flex;position:relative;box-sizing:border-box;transition-property:box-shadow;transition-duration:.2s;transition-timing-function:ease}.wp-block-uagb-container .spectra-container-link-overlay{bottom:0;left:0;position:absolute;right:0;top:0;z-index:10}.wp-block-uagb-container.uagb-is-root-container{margin-left:auto;margin-right:auto}.wp-block-uagb-container.alignfull.uagb-is-root-container .uagb-container-inner-blocks-wrap{display:flex;position:relative;box-sizing:border-box;margin-left:auto !important;margin-right:auto !important}.wp-block-uagb-container .wp-block-uagb-blockquote,.wp-block-uagb-container .wp-block-spectra-pro-login,.wp-block-uagb-container .wp-block-spectra-pro-register{margin:unset}.wp-block-uagb-container .uagb-container__video-wrap{height:100%;width:100%;top:0;left:0;position:absolute;overflow:hidden;-webkit-transition:opacity 1s;-o-transition:opacity 1s;transition:opacity 1s}.wp-block-uagb-container .uagb-container__video-wrap video{max-width:100%;width:100%;height:100%;margin:0;line-height:1;border:none;display:inline-block;vertical-align:baseline;-o-object-fit:cover;object-fit:cover;background-size:cover}.wp-block-uagb-container.uagb-layout-grid{display:grid;width:100%}.wp-block-uagb-container.uagb-layout-grid>.uagb-container-inner-blocks-wrap{display:inherit;width:inherit}.wp-block-uagb-container.uagb-layout-grid>.uagb-container-inner-blocks-wrap>.wp-block-uagb-container{max-width:unset !important;width:unset !important}.wp-block-uagb-container.uagb-layout-grid>.wp-block-uagb-container{max-width:unset !important;width:unset !important}.wp-block-uagb-container.uagb-layout-grid.uagb-is-root-container{margin-left:auto;margin-right:auto}.wp-block-uagb-container.uagb-layout-grid.uagb-is-root-container>.wp-block-uagb-container{max-width:unset !important;width:unset !important}.wp-block-uagb-container.uagb-layout-grid.alignwide.uagb-is-root-container{margin-left:auto;margin-right:auto}.wp-block-uagb-container.uagb-layout-grid.alignfull.uagb-is-root-container .uagb-container-inner-blocks-wrap{display:inherit;position:relative;box-sizing:border-box;margin-left:auto !important;margin-right:auto !important}body .wp-block-uagb-container>.uagb-container-inner-blocks-wrap>*:not(.wp-block-uagb-container):not(.wp-block-uagb-column):not(.wp-block-uagb-container):not(.wp-block-uagb-section):not(.uagb-container__shape):not(.uagb-container__video-wrap):not(.wp-block-spectra-pro-register):not(.wp-block-spectra-pro-login):not(.uagb-slider-container):not(.spectra-image-gallery__control-lightbox):not(.wp-block-uagb-info-box),body .wp-block-uagb-container>.uagb-container-inner-blocks-wrap,body .wp-block-uagb-container>*:not(.wp-block-uagb-container):not(.wp-block-uagb-column):not(.wp-block-uagb-container):not(.wp-block-uagb-section):not(.uagb-container__shape):not(.uagb-container__video-wrap):not(.wp-block-spectra-pro-register):not(.wp-block-spectra-pro-login):not(.uagb-slider-container):not(.spectra-container-link-overlay):not(.spectra-image-gallery__control-lightbox):not(.wp-block-uagb-lottie):not(.uagb-faq__outer-wrap){min-width:unset !important;width:100%;position:relative}body .ast-container .wp-block-uagb-container>.uagb-container-inner-blocks-wrap>.wp-block-uagb-container>ul,body .ast-container .wp-block-uagb-container>.uagb-container-inner-blocks-wrap>.wp-block-uagb-container ol,body .ast-container .wp-block-uagb-container>.uagb-container-inner-blocks-wrap>ul,body .ast-container .wp-block-uagb-container>.uagb-container-inner-blocks-wrap ol{max-width:-webkit-fill-available;margin-block-start:0;margin-block-end:0;margin-left:20px}.ast-plain-container .editor-styles-wrapper .block-editor-block-list__layout.is-root-container .uagb-is-root-container.wp-block-uagb-container.alignwide{margin-left:auto;margin-right:auto}.uagb-container__shape{overflow:hidden;position:absolute;left:0;width:100%;line-height:0;direction:ltr}.uagb-container__shape-top{top:-3px}.uagb-container__shape-bottom{bottom:-3px}.uagb-container__shape.uagb-container__invert.uagb-container__shape-bottom,.uagb-container__shape.uagb-container__invert.uagb-container__shape-top{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.uagb-container__shape.uagb-container__shape-flip svg{transform:translateX(-50%) rotateY(180deg)}.uagb-container__shape svg{display:block;width:-webkit-calc(100% + 1.3px);width:calc(100% + 1.3px);position:relative;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.uagb-container__shape .uagb-container__shape-fill{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}.uagb-container__shape.uagb-container__shape-above-content{z-index:9;pointer-events:none}.nv-single-page-wrap .nv-content-wrap.entry-content .wp-block-uagb-container.alignfull{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}@media only screen and (max-width: 767px){.wp-block-uagb-container .wp-block-uagb-advanced-heading{width:-webkit-fill-available}}.wp-block-uagb-image--align-none{justify-content:center}.wp-block-uagb-container.uagb-block-e1e3fbc9 .uagb-container__shape-top svg{width: calc( 100% + 1.3px );}.wp-block-uagb-container.uagb-block-e1e3fbc9 .uagb-container__shape.uagb-container__shape-top .uagb-container__shape-fill{fill: rgba(51,51,51,1);}.wp-block-uagb-container.uagb-block-e1e3fbc9 .uagb-container__shape-bottom svg{width: calc( 100% + 1.3px );}.wp-block-uagb-container.uagb-block-e1e3fbc9 .uagb-container__shape.uagb-container__shape-bottom .uagb-container__shape-fill{fill: rgba(51,51,51,1);}.wp-block-uagb-container.uagb-block-e1e3fbc9 .uagb-container__video-wrap video{opacity: 1;}.wp-block-uagb-container.uagb-is-root-container .uagb-block-e1e3fbc9{max-width: 100%;width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-e1e3fbc9 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 1200px);max-width: var(--inner-content-custom-width);width: 100%;flex-direction: column;align-items: center;justify-content: center;flex-wrap: nowrap;row-gap: 20px;column-gap: 20px;}.wp-block-uagb-container.uagb-block-e1e3fbc9{box-shadow: 0px 0px   #00000070 ;padding-top: 10px;padding-bottom: 10px;padding-left: 10px;padding-right: 10px;margin-top:  !important;margin-bottom:  !important;overflow: visible;order: initial;border-color: inherit;row-gap: 20px;column-gap: 20px;}@media only screen and (max-width: 976px) {.wp-block-uagb-container.uagb-is-root-container .uagb-block-e1e3fbc9{width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-e1e3fbc9 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 1024px);max-width: var(--inner-content-custom-width);width: 100%;}.wp-block-uagb-container.uagb-block-e1e3fbc9{padding-top: 10px;padding-bottom: 10px;padding-left: 10px;padding-right: 10px;margin-top:  !important;margin-bottom:  !important;order: initial;}}@media only screen and (max-width: 767px) {.wp-block-uagb-container.uagb-is-root-container .uagb-block-e1e3fbc9{max-width: 100%;width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-e1e3fbc9 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 767px);max-width: var(--inner-content-custom-width);width: 100%;flex-wrap: wrap;}.wp-block-uagb-container.uagb-block-e1e3fbc9{padding-top: 10px;padding-bottom: 10px;padding-left: 10px;padding-right: 10px;margin-top:  !important;margin-bottom:  !important;order: initial;}}.uag-blocks-common-selector{z-index:var(--z-index-desktop) !important}@media(max-width: 976px){.uag-blocks-common-selector{z-index:var(--z-index-tablet) !important}}@media(max-width: 767px){.uag-blocks-common-selector{z-index:var(--z-index-mobile) !important}}