.motion-v2 {
--ease-out: cubic-bezier(.23, 1, .32, 1);
--ease-in-out: cubic-bezier(.77, 0, .175, 1);
overflow-x: clip;
}
.motion-v2 body[data-page="home"] .nk-btn {
color: #fff !important;
background: #f36a21 !important;
border-color: #f36a21 !important;
box-shadow: 0 10px 26px rgba(235, 88, 0, .18);
transition: transform 160ms var(--ease-out), background-color 200ms var(--ease-out), border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.motion-v2 body[data-page="home"] .nk-side-reveal {
opacity: 1;
transform: none;
}
.motion-side-ready.motion-v2 body[data-page="home"] .nk-side-reveal:not(.nk-side-visible) {
opacity: 0;
will-change: transform, opacity;
transition: transform 700ms var(--ease-out), opacity 550ms var(--ease-out);
}
.motion-side-ready.motion-v2 body[data-page="home"] .nk-side-reveal.nk-from-right:not(.nk-side-visible) {
transform: translate3d(64px, 0, 0) scale(.985);
}
.motion-side-ready.motion-v2 body[data-page="home"] .nk-side-reveal.nk-from-left:not(.nk-side-visible) {
transform: translate3d(-64px, 0, 0) scale(.985);
}
.motion-side-ready.motion-v2 body[data-page="home"] .nk-side-reveal.nk-side-visible {
opacity: 1;
transform: none;
will-change: auto;
transition: transform 700ms var(--ease-out), opacity 550ms var(--ease-out);
}
.motion-v2 body[data-page="home"] .nk-service-card {
isolation: isolate;
overflow: hidden
}
.motion-v2 body[data-page="home"] .nk-service-card:before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background-color: #f36a21;
background-image: linear-gradient(90deg, rgba(243, 106, 33, .9), rgba(217, 76, 11, .7)), var(--service-image);
background-position: center;
background-size: cover;
opacity: 0;
transform: scaleX(.08);
transform-origin: left center;
transition: transform 650ms var(--ease-in-out), opacity 220ms ease;
}
.motion-v2 body[data-page="home"] .nk-service-card:after {
content: "↗";
position: absolute;
z-index: 2;
right: 1.75rem;
top: 50%;
font-size: 1.35rem;
transform: translate3d(0, -50%, 0);
transition: transform 200ms var(--ease-out), color 200ms ease;
}
.motion-v2 body[data-page="home"] .nk-service-card>small {
position: absolute;
right: 3.65rem;
top: 50%;
transform: translateY(-50%)
}
.motion-side-ready.motion-v2 body[data-page="home"] .nk-service-card.nk-side-reveal:not(.nk-side-visible) {
opacity: 0;
transform: translate3d(12%, 0, 0) scale(.985)
}
.motion-v2 body[data-page="home"] .nk-service-card.nk-side-visible {
opacity: 1;
transform: none;
transition: transform 650ms var(--ease-out), opacity 450ms var(--ease-out), color 200ms ease, box-shadow 200ms ease;
}
@media(min-width:981px) {
.motion-v2 body[data-page="home"] .nk-services {
display: grid;
grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
gap: clamp(3rem, 7vw, 8rem);
align-items: start
}
.motion-v2 body[data-page="home"] .nk-centered-head {
position: sticky;
top: 116px;
text-align: left
}
.motion-v2 body[data-page="home"] .nk-reviews .nk-centered-head,
.motion-v2 body[data-page="home"] .nk-instagram .nk-centered-head {
position: static
}
.motion-v2 body[data-page="home"] .nk-centered-head h2,
.motion-v2 body[data-page="home"] .nk-centered-head>p:not(.nk-section-label) {
margin-inline: 0
}
.motion-v2 body[data-page="home"] .nk-centered-head h2 {
font-size: clamp(3rem, 3.4vw, 4rem);
line-height: 1.04
}
.motion-v2 body[data-page="home"] .nk-centered-head .nk-center {
margin-top: 2.2rem;
text-align: left
}
.motion-v2 body[data-page="home"] .nk-service-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0;
width: 100%;
margin: 0;
border-top: 1px solid #ddd
}
.motion-v2 body[data-page="home"] .nk-service-card {
grid-template-columns: 58px minmax(0, 1fr) auto;
grid-template-rows: 1fr;
min-height: 108px;
padding: 1.2rem 4.7rem 1.2rem 1.5rem;
border-bottom: 1px solid #ddd;
border-radius: 0;
background: #fff;
box-shadow: none
}
.motion-v2 body[data-page="home"] .nk-service-card>img {
grid-column: 1;
grid-row: 1
}
.motion-v2 body[data-page="home"] .nk-service-card>span {
grid-column: 2;
grid-row: 1;
align-self: center;
font-size: clamp(1.05rem, 1.55vw, 1.45rem);
font-weight: 500
}
.motion-v2 body[data-page="home"] .nk-service-card>small {
grid-column: 3;
grid-row: 1
}
.motion-v2 body[data-page="home"] .nk-service-card>small {
right: 1rem;
top: 1rem;
transform: none
}
}
@media(max-width:980px) {
.motion-v2 body[data-page="home"] .nk-services {
overflow-x: clip
}
.motion-v2 body[data-page="home"] .nk-centered-head .nk-center {
margin: 0 0 2.5rem
}
.motion-v2 body[data-page="home"] .nk-service-grid {
grid-template-columns: 1fr;
gap: .7rem
}
.motion-v2 body[data-page="home"] .nk-service-card {
grid-template-columns: 44px minmax(0, 1fr) auto;
grid-template-rows: 1fr;
min-height: 92px;
padding: 1rem 4rem 1rem 1rem;
background: #fff
}
.motion-v2 body[data-page="home"] .nk-service-card>img {
grid-column: 1;
grid-row: 1
}
.motion-v2 body[data-page="home"] .nk-service-card>span {
grid-column: 2;
grid-row: 1;
align-self: center
}
.motion-v2 body[data-page="home"] .nk-service-card>small {
grid-column: 3;
grid-row: 1
}
.motion-side-ready.motion-v2 body[data-page="home"] .nk-service-card.nk-side-reveal:not(.nk-side-visible) {
transform: translate3d(20px, 0, 0) scale(.99)
}
}
@media(max-width:760px) {
.motion-v2 body[data-page="home"] .nk-instagram {
overflow-x: clip
}
.motion-side-ready.motion-v2 body[data-page="home"] .nk-side-reveal.nk-from-right:not(.nk-side-visible) {
transform: translate3d(20px, 0, 0) scale(.99);
}
.motion-side-ready.motion-v2 body[data-page="home"] .nk-side-reveal.nk-from-left:not(.nk-side-visible) {
transform: translate3d(-20px, 0, 0) scale(.99);
}
}
@media(hover:hover) and (pointer:fine) {
.motion-v2 body[data-page="home"] .nk-btn:hover {
color: #fff !important;
background: #d94c0b !important;
border-color: #d94c0b !important;
box-shadow: 0 14px 32px rgba(235, 88, 0, .24);
transform: translateY(-2px);
}
.motion-v2 body[data-page="home"] .nk-service-card:hover {
color: #fff;
background: transparent;
box-shadow: none;
transform: translate3d(6px, 0, 0)
}
.motion-v2 body[data-page="home"] .nk-service-card:hover:before {
opacity: 1;
transform: scaleX(1)
}
.motion-v2 body[data-page="home"] .nk-service-card:hover:after {
color: #fff;
transform: translate3d(5px, -55%, 0)
}
.motion-v2 body[data-page="home"] .nk-service-card:hover>img {
filter: brightness(0) invert(1);
transform: translate3d(4px, 0, 0) rotate(-6deg) scale(1.08)
}
}
.motion-v2 body[data-page="home"] .nk-btn:active {
transform: scale(.97);
transition-duration: 140ms;
}
.motion-v2 body[data-page="home"] .nk-hero,
.motion-v2 body[data-page="home"] .nk-contact {
isolation: isolate;
view-timeline-axis: block;
}
.motion-v2 body[data-page="home"] .nk-hero {
view-timeline-name: --nk-hero-motion
}
.motion-v2 body[data-page="home"] .nk-contact {
view-timeline-name: --nk-contact-motion
}
.motion-v2 body[data-page="home"] .nk-hero-image,
.motion-v2 body[data-page="home"] .nk-contact-bg {
z-index: 0;
animation: none !important;
transform: scale(1.035);
transform-origin: center center;
backface-visibility: hidden;
}
.motion-v2 body[data-page="home"] .nk-hero-shade,
.motion-v2 body[data-page="home"] .nk-contact:after {
z-index: 1
}
.motion-v2 body[data-page="home"] .nk-hero-inner,
.motion-v2 body[data-page="home"] .nk-scroll,
.motion-v2 body[data-page="home"] .nk-contact-panel {
z-index: 2;
align-items: center
}
.motion-v2 body[data-page="home"] .nk-hero:before,
.motion-v2 body[data-page="home"] .nk-contact:before {
content: "";
position: absolute;
z-index: 1;
inset: -12% -38%;
pointer-events: none;
opacity: 0;
background: linear-gradient(108deg, transparent 34%, rgba(255, 255, 255, .03) 43%, rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, .035) 57%, transparent 66%);
transform: translate3d(-48%, 0, 0) skewX(-8deg);
will-change: transform, opacity;
}
@supports (animation-timeline:view()) {
.motion-v2 body[data-page="home"] .nk-hero-image {
animation: nk-bg-depth linear both !important;
animation-timeline: --nk-hero-motion !important;
animation-range: entry 0% exit 100%;
}
.motion-v2 body[data-page="home"] .nk-contact-bg {
animation: nk-bg-depth linear both !important;
animation-timeline: --nk-contact-motion !important;
animation-range: entry 0% exit 100%;
}
.motion-v2 body[data-page="home"] .nk-hero:before {
animation: nk-light-pass linear both;
animation-timeline: --nk-hero-motion;
animation-range: entry 0% exit 100%;
}
.motion-v2 body[data-page="home"] .nk-contact:before {
animation: nk-light-pass linear both;
animation-timeline: --nk-contact-motion;
animation-range: entry 0% exit 100%;
}
.motion-v2 body[data-page="home"] .nk-welcome-media>img,
.motion-v2 body[data-page="home"] .nk-team-tall>img,
.motion-v2 body[data-page="home"] .nk-team-wide>img {
animation: nk-media-depth linear both !important;
animation-timeline: view(block) !important;
animation-range: entry 0% exit 100%;
transform-origin: center center;
}
}
@keyframes nk-bg-depth {
0% {
transform: translate3d(0, -2.5%, 0) scale(1.035)
}
100% {
transform: translate3d(0, 3.5%, 0) scale(1.14)
}
}
@keyframes nk-light-pass {
0%,
12% {
opacity: 0;
transform: translate3d(-48%, 0, 0) skewX(-8deg)
}
46% {
opacity: .2
}
82%,
100% {
opacity: 0;
transform: translate3d(48%, 0, 0) skewX(-8deg)
}
}
@keyframes nk-media-depth {
0% {
transform: translate3d(0, -3%, 0) scale(1.1)
}
50% {
transform: translate3d(0, 0, 0) scale(1.025)
}
100% {
transform: translate3d(0, 3%, 0) scale(1.1)
}
}
@media(prefers-reduced-motion:reduce) {
.motion-v2 body[data-page="home"] .nk-side-reveal {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.motion-v2 body[data-page="home"] .nk-hero-image,
.motion-v2 body[data-page="home"] .nk-contact-bg,
.motion-v2 body[data-page="home"] .nk-welcome-media>img,
.motion-v2 body[data-page="home"] .nk-team-tall>img,
.motion-v2 body[data-page="home"] .nk-team-wide>img {
animation: none !important;
transform: none !important
}
.motion-v2 body[data-page="home"] .nk-hero:before,
.motion-v2 body[data-page="home"] .nk-contact:before {
display: none
}
} :root {
--mk-accent: #FD7105;
--mk-accent-2: #FF9B3D;
--mk-panel: rgba(255, 255, 255, .96);
--mk-text: #181818;
--mk-muted: #8c8f96;
--mk-line: rgba(24, 24, 24, .08);
--mk-shadow: 0 30px 90px rgba(25, 25, 30, .16);
--mk-ease: cubic-bezier(.22, .85, .24, 1)
}
.mk-burger {
position: fixed;
top: 24px;
right: 24px;
z-index: 3000;
width: 70px;
height: 70px;
display: grid;
place-items: center;
border: 1px solid rgba(255, 255, 255, .9);
border-radius: 22px;
background: rgba(255, 255, 255, .94);
color: var(--mk-accent);
box-shadow: 0 18px 50px rgba(24, 24, 28, .14);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
cursor: pointer;
transition: transform .35s var(--mk-ease), border-radius .35s var(--mk-ease), background .35s ease, color .35s ease, box-shadow .35s ease, right .55s var(--mk-ease)
}
.mk-burger:hover {
transform: rotate(-5deg) scale(1.05);
box-shadow: 0 22px 60px rgba(253, 113, 5, .20)
}
.mk-burger.active {
border-radius: 50%;
background: linear-gradient(135deg, var(--mk-accent), var(--mk-accent-2));
color: #fff;
transform: rotate(90deg)
}
.burger-lines {
position: relative;
width: 28px;
height: 20px
}
.burger-lines span {
position: absolute;
right: 0;
height: 2px;
border-radius: 999px;
background: currentColor;
transition: width .35s var(--mk-ease), top .35s var(--mk-ease), transform .35s var(--mk-ease), opacity .2s ease
}
.burger-lines span:nth-child(1) {
top: 0;
width: 28px
}
.burger-lines span:nth-child(2) {
top: 9px;
width: 19px
}
.burger-lines span:nth-child(3) {
top: 18px;
width: 24px
}
.mk-burger:hover .burger-lines span {
width: 28px
}
.mk-burger.active .burger-lines span:nth-child(1) {
top: 9px;
width: 28px;
transform: rotate(45deg)
}
.mk-burger.active .burger-lines span:nth-child(2) {
opacity: 0;
transform: scaleX(0)
}
.mk-burger.active .burger-lines span:nth-child(3) {
top: 9px;
width: 28px;
transform: rotate(-45deg)
}
.mk-overlay {
position: fixed;
inset: 0;
z-index: 1900;
background: rgba(247, 247, 245, .62);
backdrop-filter: blur(14px) saturate(120%);
-webkit-backdrop-filter: blur(14px) saturate(120%);
opacity: 0;
visibility: hidden;
transition: opacity .4s ease, visibility .4s ease
}
.mk-overlay.open {
opacity: 1;
visibility: visible
}
.mk-sidebar {
position: fixed;
top: 14px;
right: 14px;
bottom: 14px;
z-index: 2000;
width: min(580px, calc(100vw - 28px));
display: flex;
flex-direction: column;
padding: 96px 30px 26px;
overflow: hidden;
border-radius: 34px;
background: linear-gradient(160deg, rgba(255, 255, 255, .98), rgba(255, 248, 242, .95));
border: 1px solid rgba(255, 255, 255, .95);
box-shadow: var(--mk-shadow);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
transform: translateX(calc(100% + 50px));
transition: transform .68s var(--mk-ease)
}
.mk-sidebar.open {
transform: translateX(0)
}
.mk-sidebar::before {
content: "";
position: absolute;
width: 320px;
height: 320px;
right: -170px;
top: 80px;
border-radius: 50%;
background: var(--mk-accent);
filter: blur(105px);
opacity: .11;
pointer-events: none
}
.mk-sidebar::after {
content: "";
position: absolute;
width: 180px;
height: 180px;
left: -90px;
bottom: 80px;
border-radius: 50%;
background: var(--mk-accent-2);
filter: blur(95px);
opacity: .08;
pointer-events: none
}
.mk-nav {
--mk-item-h: 70px;
position: relative;
z-index: 2;
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: none;
gap: 10px
}
.mk-nav::-webkit-scrollbar {
display: none;
width: 0;
height: 0
}
.mk-menu-item {
position: relative;
isolation: isolate;
flex: 0 0 auto;
min-height: 70px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 26px;
color: var(--mk-text);
border-bottom: 1px solid var(--mk-line);
overflow: hidden;
transition: transform .35s var(--mk-ease), opacity .24s ease
}
.mk-menu-item::before {
content: "";
position: absolute;
z-index: 1;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: linear-gradient(90deg, var(--mk-accent) 0%, var(--mk-accent-2) 52%, rgba(253, 113, 5, 0) 100%);
transform: scaleX(0);
transform-origin: left center;
transition: transform .38s cubic-bezier(.16, 1, .3, 1)
}
.mk-menu-item::after {
content: "";
position: absolute;
z-index: 1;
left: 0;
top: 50%;
width: 3px;
height: 26px;
border-radius: 2px;
background: var(--mk-accent);
opacity: 0;
transform: translateY(-50%) scaleY(.25);
transform-origin: center;
transition: opacity .18s ease, transform .28s cubic-bezier(.16, 1, .3, 1)
}
.mk-menu-title {
position: relative;
z-index: 2;
font-size: 40px;
font-weight: 400;
line-height: 1;
letter-spacing: -.05em;
transition: color .22s ease, transform .32s cubic-bezier(.16, 1, .3, 1), letter-spacing .32s cubic-bezier(.16, 1, .3, 1)
}
.mk-menu-number {
display: none;
position: relative;
z-index: 2;
min-width: 30px;
text-align: right;
color: #909299;
font-size: 10px;
font-weight: 800;
letter-spacing: .09em;
transition: color .22s ease, transform .3s cubic-bezier(.16, 1, .3, 1)
}
.mk-menu-number::before {
content: "";
position: absolute;
top: 50%;
right: calc(100% + 10px);
width: 18px;
height: 1px;
background: var(--mk-accent);
opacity: 0;
transform: scaleX(0);
transform-origin: right center;
transition: opacity .18s ease, transform .3s cubic-bezier(.16, 1, .3, 1)
}
.mk-menu-item:is(:hover, :focus-visible)::before {
transform: scaleX(1)
}
.mk-menu-item:is(:hover, :focus-visible)::after {
opacity: 1;
transform: translateY(-50%) scaleY(1)
}
.mk-menu-item:is(:hover, :focus-visible) .mk-menu-title {
color: #17181a;
letter-spacing: -.04em;
transform: translateX(12px)
}
.mk-menu-item:is(:hover, :focus-visible) .mk-menu-number {
color: var(--mk-accent);
transform: translateX(-2px)
}
.mk-menu-item:is(:hover, :focus-visible) .mk-menu-number::before {
opacity: 1;
transform: scaleX(1)
}
.mk-menu-item:focus-visible {
outline: 2px solid rgba(253, 113, 5, .42);
outline-offset: -2px
}
.mk-footer {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 18px;
padding-top: 20px;
border-top: 0px solid var(--mk-line)
}
.mk-footer-text {
display: none;
color: var(--mk-muted);
font-size: 12px;
line-height: 1.55
}
.mk-footer-cta {
position: relative;
min-height: 50px;
padding: 0 20px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 14px;
overflow: hidden;
background: linear-gradient(135deg, var(--mk-accent), var(--mk-accent-2));
color: #fff;
font-size: 13px;
font-weight: 700;
box-shadow: 0 12px 28px rgba(253, 113, 5, .22);
transition: transform .3s var(--mk-ease), box-shadow .3s ease
}
.mk-footer-cta::before {
content: "";
position: absolute;
top: -100%;
left: -45%;
width: 40%;
height: 300%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
transform: rotate(24deg);
transition: left .65s ease
}
.mk-footer-cta:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 18px 36px rgba(253, 113, 5, .30)
}
.mk-footer-cta:hover::before {
left: 130%
}
.mk-sidebar .mk-menu-item,
.mk-sidebar .mk-footer {
opacity: 0;
transform: translateX(42px);
transition: opacity .45s ease, transform .55s var(--mk-ease)
}
.mk-sidebar.open .mk-menu-item:nth-of-type(1) {
opacity: 1;
transform: none;
transition-delay: .12s
}
.mk-sidebar.open .mk-menu-item:nth-of-type(2) {
opacity: 1;
transform: none;
transition-delay: .16s
}
.mk-sidebar.open .mk-menu-item:nth-of-type(3) {
opacity: 1;
transform: none;
transition-delay: .20s
}
.mk-sidebar.open .mk-menu-item:nth-of-type(4) {
opacity: 1;
transform: none;
transition-delay: .24s
}
.mk-sidebar.open .mk-menu-item:nth-of-type(5) {
opacity: 1;
transform: none;
transition-delay: .28s
}
.mk-sidebar.open .mk-menu-item:nth-of-type(6) {
opacity: 1;
transform: none;
transition-delay: .32s
}
.mk-sidebar.open .mk-menu-item:nth-of-type(7) {
opacity: 1;
transform: none;
transition-delay: .36s
}
.mk-sidebar.open .mk-footer {
opacity: 1;
transform: none;
transition-delay: .40s
}
@media(max-width:900px) {
.mk-sidebar {
width: min(520px, calc(100vw - 20px));
top: 10px;
right: 10px;
bottom: 10px;
padding: 88px 24px 22px;
border-radius: 28px
}
.mk-burger {
top: 18px;
right: 18px;
width: 64px;
height: 64px;
border-radius: 19px
}
.mk-nav {
--mk-item-h: 64px
}
.mk-menu-item {
min-height: 64px
}
.mk-menu-title {
font-size: clamp(32px, 6vw, 44px)
}
}
@media(max-width:700px) {
.mk-sidebar {
top: 6px;
right: 6px;
bottom: 6px;
width: calc(100vw - 12px);
padding: 78px 18px 18px;
border-radius: 24px
}
.mk-burger {
top: 14px;
right: 14px;
width: 56px;
height: 56px;
border-radius: 16px
}
.burger-lines {
transform: scale(.88)
}
.mk-nav {
justify-content: flex-start
}
.mk-nav {
--mk-item-h: 58px
}
.mk-menu-item {
min-height: 58px;
gap: 16px
}
.mk-menu-title {
font-size: clamp(29px, 9vw, 39px)
}
.mk-menu-number {
font-size: 9px
}
.mk-footer {
flex-direction: column;
align-items: stretch;
gap: 12px
}
.mk-footer-text {
display: none
}
.mk-footer-cta {
width: 100%
}
}
@media(max-width:420px) {
.mk-sidebar {
padding: 74px 14px 14px
}
.mk-nav {
--mk-item-h: 52px
}
.mk-menu-item {
min-height: 52px
}
.mk-menu-title {
font-size: 28px
}
.mk-menu-item:hover {
transform: none
}
.mk-menu-item:hover .mk-menu-title {
transform: translateX(10px)
}
}
@media(max-height:720px) {
.mk-sidebar {
padding-top: 76px
}
.mk-nav {
justify-content: flex-start
}
.mk-nav {
--mk-item-h: 52px
}
.mk-menu-item {
min-height: 52px
}
.mk-menu-title {
font-size: clamp(27px, 4.5vh, 38px)
}
.mk-footer {
padding-top: 12px
}
}
@media(prefers-reduced-motion:reduce) {
.mk-menu-item,
.mk-menu-item::before,
.mk-menu-item::after,
.mk-menu-title,
.mk-menu-number,
.mk-menu-number::before {
transition-duration: .01ms !important
}
} .nk-service-grid-4 {
width: min(1180px, 100%)
}
@media(min-width:981px) {
.motion-v2 body[data-page="home"] .nk-services:has(.nk-service-grid-4) {
display: block
}
.motion-v2 body[data-page="home"] .nk-services:has(.nk-service-grid-4) .nk-centered-head {
position: static;
text-align: center
}
.motion-v2 body[data-page="home"] .nk-services:has(.nk-service-grid-4) .nk-centered-head h2,
.motion-v2 body[data-page="home"] .nk-services:has(.nk-service-grid-4) .nk-centered-head>p:not(.nk-section-label) {
margin-inline: auto
}
.motion-v2 body[data-page="home"] .nk-service-grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.1rem;
width: min(1180px, 100%);
margin: 4rem auto 2.4rem;
border-top: 0
}
.motion-v2 body[data-page="home"] .nk-service-grid-4 .nk-service-card {
grid-template-columns: 1fr auto;
grid-template-rows: auto 1fr;
gap: 1.5rem;
min-height: 190px;
padding: 1.5rem;
border-radius: 0;
box-shadow: none;
border-bottom: 0;
background: #fff
}
.motion-v2 body[data-page="home"] .nk-service-grid-4 .nk-service-card>img {
grid-column: 1;
width: 34px;
height: 34px
}
.motion-v2 body[data-page="home"] .nk-service-grid-4 .nk-service-card>span {
grid-column: 1/-1;
align-self: end;
font-size: 1rem;
font-weight: 600
}
.motion-v2 body[data-page="home"] .nk-service-grid-4 .nk-service-card>small {
position: absolute;
right: 1.25rem;
top: 1.25rem
}
} body[data-page="home"] .nk-services {
display: block;
padding: clamp(3.2rem, 4.6vw, 4.8rem) max(1.25rem, calc((100vw - 1314px)/2)) clamp(4.2rem, 6vw, 6rem);
background: #fbf9f7;
}
body[data-page="home"] .nk-services .nk-centered-head {
position: static;
width: min(920px, 100%);
max-width: 920px;
margin-inline: auto;
text-align: center;
}
body[data-page="home"] .nk-services .nk-section-label {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 1.2rem;
margin: 0 0 1.15rem;
color: var(--orange);
font-size: .92rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: .22em;
}
body[data-page="home"] .nk-services .nk-section-label::before,
body[data-page="home"] .nk-services .nk-section-label::after {
content: "";
width: 3.5rem;
height: 1px;
background: rgba(243, 106, 33, .72);
}
body[data-page="home"] .nk-services .nk-centered-head h2 {
max-width: 900px;
margin-inline: auto;
color: #111;
font-size: clamp(3rem, 4.05vw, 4.25rem);
font-weight: 500;
line-height: 1.02;
letter-spacing: -.038em;
text-align: center;
text-wrap: balance;
}
body[data-page="home"] .nk-services .nk-centered-head h2 span {
color: inherit
}
body[data-page="home"] .nk-services .nk-centered-head>p:not(.nk-section-label) {
max-width: 660px;
margin: 1.35rem auto 0;
color: #747474;
font-size: clamp(1.08rem, 1.35vw, 1.4rem);
line-height: 1.42;
text-align: center;
text-wrap: balance;
}
.motion-v2 body[data-page="home"] .nk-services .nk-service-grid-4 {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-flow: dense;
gap: 1.1rem 1.3rem;
width: min(1314px, 100%);
margin: 2.3rem auto 0;
border: 0;
background: transparent;
}
.motion-v2 body[data-page="home"] .nk-services .nk-service-grid-4 .nk-service-card {
position: relative;
isolation: isolate;
min-height: 245px;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 122px auto 1fr;
place-items: center;
gap: 0;
padding: 2.1rem 1.75rem 1.6rem;
overflow: hidden;
border: 0;
border-radius: 12px;
background: rgba(255, 255, 255, .96);
color: #111;
box-shadow: 0 16px 50px rgba(97, 61, 40, .045);
transition: transform 650ms var(--ease-out), opacity 450ms var(--ease-out), color 200ms ease, box-shadow 200ms ease;
}
.motion-v2 body[data-page="home"] .nk-services .nk-service-card:before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
border-radius: inherit;
background-color: #f36a21;
background-image: linear-gradient(90deg, rgba(243, 106, 33, .9), rgba(217, 76, 11, .7)), var(--service-image);
background-position: center;
background-size: cover;
opacity: 0;
transform: scaleX(.08);
transform-origin: left center;
transition: transform 650ms var(--ease-in-out), opacity 220ms ease;
}
.motion-v2 body[data-page="home"] .nk-services .nk-service-card:after {
content: "→";
position: absolute;
z-index: 2;
right: 1.75rem;
top: auto;
bottom: 1.35rem;
color: #111;
font-size: 1.9rem;
font-weight: 300;
line-height: 1;
transform: none;
transition: transform 180ms var(--ease-out);
}
.motion-v2 body[data-page="home"] .nk-services .nk-service-card>img {
position: relative;
z-index: 1;
grid-column: 1;
grid-row: 1;
width: 130px;
height: 130px;
max-width: none;
object-fit: contain;
border-radius: 50%;
background: radial-gradient(circle 54px at center, #fbf5f1 99%, transparent 100%);
filter: none;
transform: none;
}
.motion-v2 body[data-page="home"] .nk-services .nk-service-card:nth-child(1)>img {
content: url(https://nk-malermeisterbetrieb.de/wp-content/uploads/2026/08/Kernsanierungen-icons.png)
}
.motion-v2 body[data-page="home"] .nk-services .nk-service-card:nth-child(2)>img {
content: url(https://nk-malermeisterbetrieb.de/wp-content/uploads/2026/08/Renovierungen-icons_1.png)
}
.motion-v2 body[data-page="home"] .nk-services .nk-service-card:nth-child(3)>img {
content: url(https://nk-malermeisterbetrieb.de/wp-content/uploads/2026/08/Innengestaltung-icons_2.png)
}
.motion-v2 body[data-page="home"] .nk-services .nk-service-card:nth-child(4)>img {
content: url(https://nk-malermeisterbetrieb.de/wp-content/uploads/2026/08/Aussengestaltung-icons_3.png)
}
.motion-v2 body[data-page="home"] .nk-services .nk-service-card:nth-child(5)>img {
content: url(https://nk-malermeisterbetrieb.de/wp-content/uploads/2026/08/Spachtelarbeiten-icons_4.png)
}
.motion-v2 body[data-page="home"] .nk-services .nk-service-card:nth-child(6)>img {
content: url(https://nk-malermeisterbetrieb.de/wp-content/uploads/2026/08/Lackierarbeiten-icons_5.png)
}
.motion-v2 body[data-page="home"] .nk-services .nk-service-card:nth-child(7)>img {
content: url(https://nk-malermeisterbetrieb.de/wp-content/uploads/2026/08/Bodenarbeiten-icons_6.png)
}
.motion-v2 body[data-page="home"] .nk-services .nk-service-card:nth-child(8)>img {
content: url(https://nk-malermeisterbetrieb.de/wp-content/uploads/2026/08/Tapezierarbeiten-icons_7.png)
}
.motion-v2 body[data-page="home"] .nk-services .nk-service-card>span {
grid-column: 1;
grid-row: 2;
align-self: start;
margin: .78rem 0 0;
font-size: clamp(1.18rem, 1.35vw, 1.45rem);
font-weight: 500;
line-height: 1.2;
letter-spacing: -.025em;
text-align: center;
}
.motion-v2 body[data-page="home"] .nk-services .nk-service-card>small {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
body[data-page="home"] .nk-services .nk-center {
margin-top: 2.15rem;
text-align: center
}
body[data-page="home"] .nk-services .nk-btn {
min-width: 238px;
min-height: 56px;
gap: 1.2rem;
padding: 0 2rem;
border-radius: 999px;
background: var(--orange);
color: #fff;
font-size: .78rem;
font-weight: 600;
letter-spacing: .03em;
box-shadow: 0 12px 28px rgba(243, 106, 33, .22);
transition: transform .55s var(--motion), background .55s var(--motion), box-shadow .55s var(--motion);
}
body[data-page="home"] .nk-services .nk-btn:after {
content: "→";
font-size: 1.55rem;
font-weight: 300;
line-height: 1
}
@media(hover:hover) and (pointer:fine) {
.motion-v2 body[data-page="home"] .nk-services .nk-service-card:hover {
color: #fff;
background: transparent;
transform: translate3d(6px, 0, 0);
box-shadow: none;
}
.motion-v2 body[data-page="home"] .nk-services .nk-service-card:hover:before {
opacity: 1;
transform: scaleX(1)
}
.motion-v2 body[data-page="home"] .nk-services .nk-service-card:hover:after {
color: #fff;
transform: translate3d(5px, 0, 0)
}
.motion-v2 body[data-page="home"] .nk-services .nk-service-card:hover>img {
filter: none;
transform: translate3d(4px, 0, 0) rotate(-6deg) scale(1.08)
}
body[data-page="home"] .nk-services .nk-btn:hover {
background: var(--orange2);
transform: translateY(-3px);
box-shadow: 0 16px 34px rgba(243, 106, 33, .24)
}
}
.motion-v2 body[data-page="home"] .nk-services .nk-service-card:active,
body[data-page="home"] .nk-services .nk-btn:active {
transform: scale(.97);
transition-duration: 140ms
}
@media(max-width:1000px) {
.motion-v2 body[data-page="home"] .nk-services .nk-service-grid-4 {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
}
@media(max-width:620px) {
body[data-page="home"] .nk-services {
padding: 5.5rem 1rem
}
body[data-page="home"] .nk-services .nk-centered-head h2 {
font-size: clamp(2.25rem, 11vw, 3.7rem)
}
body[data-page="home"] .nk-services .nk-centered-head>p:not(.nk-section-label) {
font-size: 1rem
}
.motion-v2 body[data-page="home"] .nk-services .nk-service-grid-4 {
grid-template-columns: 1fr;
gap: .9rem;
margin-top: 2rem
}
.motion-v2 body[data-page="home"] .nk-services .nk-service-grid-4 .nk-service-card {
min-height: 220px
}
}
@media(prefers-reduced-motion:reduce) {
.motion-v2 body[data-page="home"] .nk-services .nk-service-card {
transform: none !important;
transition: opacity 200ms ease, background-color 180ms ease !important
}
} .motion-v2 body[data-page="home"] .nk-hero {
--hero-glass-orange: #f36a21;
--hero-glass-ink: #0d161c;
--hero-glass-white: #f7f7f4;
--hero-glass-ease: cubic-bezier(.23, 1, .32, 1);
min-height: min(100svh, 960px);
place-items: stretch;
isolation: isolate;
background: var(--hero-glass-ink);
}
.motion-v2 body[data-page="home"] .nk-hero-image {
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.motion-v2 body[data-page="home"] .nk-hero-shade {
z-index: 1;
background: linear-gradient(90deg, rgba(8, 14, 18, .52) 0%, rgba(8, 14, 18, .14) 62%, rgba(8, 14, 18, .02) 100%), linear-gradient(180deg, rgba(7, 12, 16, .12), rgba(7, 12, 16, .42));
}
.motion-v2 body[data-page="home"] .nk-hero-inner {
z-index: 2;
box-sizing: border-box;
width: min(900px, calc(100% - 5rem));
margin: auto auto auto clamp(2.5rem, 4.5vw, 5rem);
padding: clamp(2.4rem, 4vw, 4rem);
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 24px;
background: rgba(13, 22, 28, .84);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 28px 80px rgba(8, 18, 24, .16);
color: var(--hero-glass-white);
text-align: left;
}
.motion-v2 body[data-page="home"] .nk-hero .nk-overline {
margin: 0 0 1.7rem;
color: rgba(255, 255, 255, .82);
font-size: .72rem;
font-weight: 700;
line-height: 1.45;
letter-spacing: .16em;
text-transform: uppercase;
}
.motion-v2 body[data-page="home"] .nk-hero h1 {
max-width: 68rem;
margin: 0;
color: var(--hero-glass-white);
font-size: clamp(3.55rem, 5.65vw, 6.5rem);
font-weight: 500;
line-height: .96;
letter-spacing: -.052em;
text-align: left;
text-wrap: balance;
}
.motion-v2 body[data-page="home"] .nk-hero-lead {
max-width: 42rem;
margin: 2rem 0 0;
color: rgba(255, 255, 255, .78);
font-size: clamp(1rem, 1.3vw, 1.2rem);
line-height: 1.62;
text-wrap: pretty;
}
.motion-v2 body[data-page="home"] .nk-hero-actions {
display: flex;
flex-direction: row;
align-items: center;
gap: 1rem;
margin-top: 2.4rem;
}
.motion-v2 body[data-page="home"] .nk-btn-light,
.motion-v2 body[data-page="home"] .nk-text-link {
min-height: 58px;
border-radius: 8px;
font-weight: 700;
white-space: nowrap;
}
.motion-v2 body[data-page="home"] .nk-btn-light {
position: relative;
min-width: 250px;
justify-content: space-between;
gap: 1.25rem;
padding: .65rem .65rem .65rem 1.45rem;
background: var(--hero-glass-orange);
color: #fff;
box-shadow: none;
transition: transform 180ms var(--hero-glass-ease);
}
.motion-v2 body[data-page="home"] .nk-btn-light::after {
content: "↗";
display: grid;
width: 40px;
height: 40px;
place-items: center;
border-radius: 50%;
background: rgba(255, 255, 255, .16);
font-size: 1rem;
transition: transform 180ms var(--hero-glass-ease);
}
.motion-v2 body[data-page="home"] .nk-text-link {
display: inline-flex;
align-items: center;
gap: .7rem;
padding: .5rem .75rem .5rem 1rem;
color: #fff;
transition: transform 180ms var(--hero-glass-ease);
}
.motion-v2 body[data-page="home"] .nk-text-link span {
display: grid;
width: 38px;
height: 38px;
margin: 0;
place-items: center;
border-radius: 50%;
background: rgba(255, 255, 255, .1);
color: var(--hero-glass-orange);
transition: transform 180ms var(--hero-glass-ease);
}
.motion-v2 body[data-page="home"] .nk-btn-light:hover,
.motion-v2 body[data-page="home"] .nk-text-link:hover {
transform: none;
box-shadow: none;
}
.motion-v2 body[data-page="home"] .nk-btn-light:hover {
background: var(--hero-glass-orange);
color: #fff
}
.motion-v2 body[data-page="home"] .nk-btn-light:active,
.motion-v2 body[data-page="home"] .nk-text-link:active {
transform: scale(.97);
transition-duration: 120ms;
}
.motion-v2 body[data-page="home"] .nk-btn-light:focus-visible,
.motion-v2 body[data-page="home"] .nk-text-link:focus-visible {
outline: 3px solid rgba(255, 255, 255, .88);
outline-offset: 4px;
}
.motion-v2 body[data-page="home"] .nk-trust {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 1.2rem;
margin-top: 3rem;
color: rgba(255, 255, 255, .72);
font-size: .72rem;
font-weight: 700;
line-height: 1.4;
letter-spacing: .09em;
text-transform: uppercase;
}
.motion-v2 body[data-page="home"] .nk-trust i {
display: block;
width: 1px;
height: 18px;
background: rgba(255, 255, 255, .24);
}
@media(hover:hover) and (pointer:fine) {
.motion-v2 body[data-page="home"] .nk-btn-light:hover,
.motion-v2 body[data-page="home"] .nk-text-link:hover {
transform: translate3d(0, -2px, 0)
}
.motion-v2 body[data-page="home"] .nk-btn-light:hover::after,
.motion-v2 body[data-page="home"] .nk-text-link:hover span {
transform: translate3d(2px, -1px, 0)
}
}
@media(max-width:980px) {
.motion-v2 body[data-page="home"] .nk-hero {
min-height: 100svh
}
.motion-v2 body[data-page="home"] .nk-hero-shade {
background: linear-gradient(90deg, rgba(8, 14, 18, .94), rgba(8, 14, 18, .55)), linear-gradient(180deg, rgba(8, 14, 18, .08), rgba(8, 14, 18, .52));
}
.motion-v2 body[data-page="home"] .nk-hero-inner {
width: min(calc(100% - 2rem), 760px);
margin: auto;
padding: 8.5rem clamp(1.5rem, 5vw, 3rem) 6rem;
border-radius: 20px;
background: rgba(13, 22, 28, .82);
}
.motion-v2 body[data-page="home"] .nk-hero h1 {
font-size: clamp(3rem, 9.4vw, 5.4rem)
}
}
@media(max-width:640px) {
.motion-v2 body[data-page="home"] .nk-hero-image {
object-position: 62% center
}
.motion-v2 body[data-page="home"] .nk-hero-inner {
box-sizing: border-box !important;
width: calc(100% - 2rem) !important;
max-width: calc(100% - 2rem) !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 2rem 1.3rem;
border-radius: 16px;
}
.motion-v2 body[data-page="home"] .nk-hero .nk-overline {
margin-bottom: 1.25rem;
font-size: .63rem
}
.motion-v2 body[data-page="home"] .nk-hero h1 {
font-size: clamp(2.45rem, 10.6vw, 3.2rem);
line-height: .98
}
.motion-v2 body[data-page="home"] .nk-hero-lead {
margin-top: 1.45rem;
font-size: .98rem;
line-height: 1.55
}
.motion-v2 body[data-page="home"] .nk-hero-actions {
align-items: stretch;
flex-direction: column;
gap: .45rem;
margin-top: 1.8rem
}
.motion-v2 body[data-page="home"] .nk-btn-light {
box-sizing: border-box;
width: 100%;
min-width: 0
}
.motion-v2 body[data-page="home"] .nk-text-link {
align-self: flex-start
}
.motion-v2 body[data-page="home"] .nk-trust {
flex-wrap: wrap;
gap: .7rem 1rem;
margin-top: 1.8rem;
font-size: .62rem
}
.motion-v2 body[data-page="home"] .nk-trust i {
height: 14px
}
}
@media(prefers-reduced-motion:reduce) {
.motion-v2 body[data-page="home"] .nk-btn-light,
.motion-v2 body[data-page="home"] .nk-text-link,
.motion-v2 body[data-page="home"] .nk-btn-light::after,
.motion-v2 body[data-page="home"] .nk-text-link span {
transition: none !important
}
} .motion-v2 body[data-page="home"] .nk-welcome {
box-sizing: border-box;
display: grid;
grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
align-items: center;
gap: clamp(4rem, 7vw, 8rem);
width: min(1400px, calc(100% - 6rem));
min-height: 0;
margin-inline: auto;
padding: clamp(7rem, 9vw, 9.5rem) 0 clamp(8rem, 10vw, 10.5rem);
overflow: visible;
background: #fff;
}
.motion-v2 body[data-page="home"] .nk-welcome-copy {
position: relative;
z-index: 2;
max-width: 35rem;
}
.motion-v2 body[data-page="home"] .nk-welcome .nk-section-label {
position: relative;
display: flex;
align-items: center;
gap: 1.8rem;
margin: 0 0 var(--space-eyebrow-gap);
color: #f36a21;
font-size: var(--fs-eyebrow);
font-weight: 700;
line-height: 1;
letter-spacing: var(--ls-eyebrow);
}
.motion-v2 body[data-page="home"] .nk-welcome .nk-section-label::after {
content: "";
width: 7rem;
height: 1px;
background: rgba(243, 106, 33, .72);
}
.motion-v2 body[data-page="home"] .nk-welcome h2 {
max-width: 34rem;
margin: 0;
color: #101010;
font-size: var(--fs-h2);
font-weight: 400;
line-height: var(--lh-h2);
letter-spacing: var(--ls-h2);
}
.motion-v2 body[data-page="home"] .nk-welcome h2 span {
color: inherit
}
.motion-v2 body[data-page="home"] .nk-welcome-copy>p:not(.nk-section-label) {
max-width: 32rem;
margin: 2.15rem 0 2.25rem;
color: #747474;
font-size: 1.04rem;
line-height: 1.72;
}
.motion-v2 body[data-page="home"] .nk-welcome .nk-btn {
min-height: 52px;
padding: .85rem 1.9rem;
border-radius: 7px;
background: var(--orange);
box-shadow: 0 12px 24px rgba(243, 106, 33, .2);
font-size: .82rem;
font-weight: 700;
letter-spacing: 0;
transition: transform 180ms cubic-bezier(.22, .75, .16, 1), background-color 180ms cubic-bezier(.22, .75, .16, 1), box-shadow 180ms cubic-bezier(.22, .75, .16, 1);
}
.motion-v2 body[data-page="home"] .nk-welcome .nk-btn::after {
content: "→";
margin-left: 1rem;
font-size: 1.15rem;
font-weight: 400;
line-height: 1;
transition: transform 180ms cubic-bezier(.22, .75, .16, 1);
}
.motion-v2 body[data-page="home"] .nk-welcome-media {
position: relative;
min-height: 620px;
overflow: visible;
}
.motion-v2 body[data-page="home"] .nk-welcome-media>img,
.motion-v2 body[data-page="home"] .nk-welcome-media>img.scroll-parallax {
display: block;
width: 100%;
height: 620px;
margin: 0;
border-radius: 80px;
object-fit: cover;
object-position: center;
box-shadow: none;
}
@media(hover:hover) and (pointer:fine) {
.motion-v2 body[data-page="home"] .nk-welcome .nk-btn:hover {
transform: translate3d(0, -2px, 0);
background: var(--orange2);
box-shadow: 0 16px 30px rgba(243, 106, 33, .24);
}
.motion-v2 body[data-page="home"] .nk-welcome .nk-btn:hover::after {
transform: translate3d(3px, 0, 0)
}
}
.motion-v2 body[data-page="home"] .nk-welcome .nk-btn:active {
transform: scale(.97)
}
.motion-v2 body[data-page="home"] .nk-welcome .nk-btn:focus-visible {
outline: 3px solid rgba(243, 106, 33, .3);
outline-offset: 4px
}
@media(max-width:1180px) {
.motion-v2 body[data-page="home"] .nk-welcome {
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
gap: 3.5rem;
width: min(1060px, calc(100% - 4rem));
}
.motion-v2 body[data-page="home"] .nk-welcome h2 {
font-size: clamp(3.45rem, 5.4vw, 4.6rem)
}
}
@media(max-width:920px) {
.motion-v2 body[data-page="home"] .nk-welcome {
grid-template-columns: 1fr;
gap: 4.5rem;
width: min(760px, calc(100% - 3rem));
}
.motion-v2 body[data-page="home"] .nk-welcome-copy {
max-width: 38rem
}
.motion-v2 body[data-page="home"] .nk-welcome h2 {
max-width: 36rem
}
.motion-v2 body[data-page="home"] .nk-welcome-media {
min-height: 600px
}
.motion-v2 body[data-page="home"] .nk-welcome-media>img,
.motion-v2 body[data-page="home"] .nk-welcome-media>img.scroll-parallax {
height: 560px
}
}
@media(max-width:640px) {
.motion-v2 body[data-page="home"] .nk-welcome {
gap: 3rem;
width: calc(100% - 2rem);
padding: 5.5rem 0 6rem;
}
.motion-v2 body[data-page="home"] .nk-welcome .nk-section-label {
margin-bottom: 2.2rem;
font-size: .68rem
}
.motion-v2 body[data-page="home"] .nk-welcome .nk-section-label::after {
width: 4rem
}
.motion-v2 body[data-page="home"] .nk-welcome h2 {
font-size: clamp(3rem, 14vw, 4rem);
line-height: .98
}
.motion-v2 body[data-page="home"] .nk-welcome-copy>p:not(.nk-section-label) {
margin-top: 1.7rem;
font-size: .96rem
}
.motion-v2 body[data-page="home"] .nk-welcome .nk-btn {
width: auto;
min-height: 50px
}
.motion-v2 body[data-page="home"] .nk-welcome-media {
min-height: 0
}
.motion-v2 body[data-page="home"] .nk-welcome-media>img,
.motion-v2 body[data-page="home"] .nk-welcome-media>img.scroll-parallax {
height: 112vw;
max-height: 500px;
border-radius: 13px
}
}
@media(prefers-reduced-motion:reduce) {
.motion-v2 body[data-page="home"] .nk-welcome .nk-btn,
.motion-v2 body[data-page="home"] .nk-welcome .nk-btn::after {
transition: none !important
}
} .motion-v2 body[data-page="home"] .nk-team {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
align-items: center;
gap: clamp(3.5rem, 5vw, 6rem);
box-sizing: border-box;
width: 100%;
max-width: none;
min-height: 940px;
margin: 0;
padding: clamp(7rem, 9vw, 9rem) max(5rem, calc((100vw - 1440px)/2)) clamp(8rem, 10vw, 10rem);
overflow: hidden;
background: radial-gradient(circle at 72% 45%, rgba(37, 45, 53, .42), transparent 38%), linear-gradient(110deg, #090d11 0%, #0c1117 58%, #080b0f 100%);
color: #f5f5f3;
}
.motion-v2 body[data-page="home"] .nk-team::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
opacity: .13;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
pointer-events: none;
}
.motion-v2 body[data-page="home"] .nk-team-copy {
position: relative;
z-index: 3;
max-width: 38rem;
}
.motion-v2 body[data-page="home"] .nk-team .nk-section-label {
position: relative;
display: flex;
align-items: center;
gap: 1.8rem;
margin: 0 0 var(--space-eyebrow-gap);
color: #f36a21;
font-size: var(--fs-eyebrow);
font-weight: 700;
line-height: 1;
letter-spacing: var(--ls-eyebrow);
}
.motion-v2 body[data-page="home"] .nk-team .nk-section-label::after {
content: "";
width: 7rem;
height: 1px;
background: rgba(243, 106, 33, .72);
}
.motion-v2 body[data-page="home"] .nk-contact-copy .nk-section-label {
position: relative;
display: flex;
align-items: center;
gap: 1.8rem;
margin: 0 0 1.15rem;
color: #f36a21;
font-size: .77rem;
font-weight: 700;
line-height: 1;
letter-spacing: .14em;
}
.motion-v2 body[data-page="home"] .nk-contact-copy .nk-section-label::after {
content: "";
width: 7rem;
height: 1px;
background: rgba(243, 106, 33, .72);
}
.motion-v2 body[data-page="home"] .nk-team h2 {
max-width: 38rem;
margin: 0;
color: #f7f7f5;
font-size: var(--fs-h2);
font-weight: 400;
line-height: var(--lh-h2);
letter-spacing: var(--ls-h2);
text-wrap: balance;
}
.motion-v2 body[data-page="home"] .nk-team h2 span {
color: #f36a21
}
.motion-v2 body[data-page="home"] .nk-team-copy>p:not(.nk-section-label) {
max-width: 34rem;
margin: 2.1rem 0 2rem;
color: rgba(245, 245, 243, .69);
font-size: 1.02rem;
line-height: 1.72;
}
.motion-v2 body[data-page="home"] .nk-team .nk-btn {
min-height: 56px;
padding: .9rem 1.7rem;
border-radius: 6px;
background: #f36a21;
color: #fff;
box-shadow: 0 14px 34px rgba(243, 106, 33, .18);
font-size: .84rem;
font-weight: 700;
letter-spacing: 0;
transition: transform 160ms cubic-bezier(.23, 1, .32, 1), background-color 180ms cubic-bezier(.23, 1, .32, 1), box-shadow 180ms cubic-bezier(.23, 1, .32, 1);
}
.motion-v2 body[data-page="home"] .nk-team .nk-btn::after {
content: "→";
margin-left: 1.35rem;
font-size: 1.3rem;
font-weight: 400;
line-height: 1;
transition: transform 180ms cubic-bezier(.23, 1, .32, 1);
}
.motion-v2 body[data-page="home"] .nk-team-proof {
display: flex;
flex-wrap: wrap;
gap: .65rem 1.5rem;
margin-top: 2rem;
color: rgba(245, 245, 243, .7);
font-size: .76rem;
}
.motion-v2 body[data-page="home"] .nk-team-proof span {
position: relative;
white-space: nowrap
}
.motion-v2 body[data-page="home"] .nk-team-proof span+span::before {
content: "";
display: inline-block;
width: 3px;
height: 3px;
margin: 0 1rem .16rem 0;
border-radius: 50%;
background: #f36a21;
}
.motion-v2 body[data-page="home"] .nk-team-proof strong {
color: #f4f4f2;
font-weight: 600
}
.motion-v2 body[data-page="home"] .nk-team-values {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
margin-top: 4.5rem;
}
.motion-v2 body[data-page="home"] .nk-team-values article {
min-width: 0;
padding: 0 1.7rem;
border-left: 1px solid rgba(243, 106, 33, .35);
}
.motion-v2 body[data-page="home"] .nk-team-values article:first-child {
padding-left: 0;
border-left: 0
}
.motion-v2 body[data-page="home"] .nk-team-values article:last-child {
padding-right: 0
}
.motion-v2 body[data-page="home"] .nk-team-values img,
.motion-v2 body[data-page="home"] .nk-team-values svg {
width: 32px;
height: 32px;
margin-bottom: 1.25rem;
object-fit: contain;
color: #f36a21
}
.motion-v2 body[data-page="home"] .nk-team-values strong {
display: block;
margin-bottom: .7rem;
color: #f5f5f3;
font-size: .7rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.motion-v2 body[data-page="home"] .nk-team-values span {
display: block;
color: rgba(245, 245, 243, .53);
font-size: .7rem;
line-height: 1.65;
}
.motion-v2 body[data-page="home"] .nk-team-collage {
position: relative;
min-height: 740px;
}
.motion-v2 body[data-page="home"] .nk-team-tall {
position: absolute;
top: 0;
right: 2%;
width: 72%;
height: 100%;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 15px;
background: #15191d;
box-shadow: 0 34px 80px rgba(1, 4, 7, .3);
}
.motion-v2 body[data-page="home"] .nk-team-tall>img,
.motion-v2 body[data-page="home"] .nk-team-tall>img.scroll-parallax {
width: 100%;
height: 100%;
margin: 0;
object-fit: cover;
object-position: center;
transform: none;
filter: saturate(.78) contrast(1.04) brightness(.83);
}
.motion-v2 body[data-page="home"] .nk-play {
right: 1rem;
bottom: 1rem;
left: auto;
min-height: 44px;
padding: .35rem .75rem .35rem .4rem;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 999px;
background: rgba(9, 13, 17, .82);
color: #fff;
backdrop-filter: blur(14px);
transition: transform 160ms cubic-bezier(.23, 1, .32, 1), background-color 180ms cubic-bezier(.23, 1, .32, 1);
}
.motion-v2 body[data-page="home"] .nk-play img {
width: 32px;
height: 32px;
padding: 8px;
background: #f36a21
}
.motion-v2 body[data-page="home"] .nk-team-quote,
.motion-v2 body[data-page="home"] .nk-team-experience {
position: absolute;
z-index: 3;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, .17);
border-radius: 14px;
background: linear-gradient(145deg, rgba(15, 20, 26, .97), rgba(8, 12, 16, .98));
box-shadow: 0 24px 58px rgba(1, 4, 7, .32), inset 0 1px 0 rgba(255, 255, 255, .04);
color: #f5f5f3;
}
.motion-v2 body[data-page="home"] .nk-team-quote {
top: 7%;
left: 2%;
width: 28%;
min-height: 220px;
padding: 1.7rem;
}
.motion-v2 body[data-page="home"] .nk-team-quote>strong {
display: block;
color: #f36a21;
font-size: 3rem;
font-weight: 700;
line-height: .8
}
.motion-v2 body[data-page="home"] .nk-team-quote blockquote {
margin: 1rem 0 1.35rem;
color: rgba(245, 245, 243, .78);
font-size: .88rem;
line-height: 1.55
}
.motion-v2 body[data-page="home"] .nk-team-quote span {
display: block;
padding-top: 1rem;
border-top: 1px solid rgba(243, 106, 33, .55);
color: rgba(245, 245, 243, .5);
font-size: .64rem
}
.motion-v2 body[data-page="home"] .nk-team-wide {
position: absolute;
z-index: 4;
left: -5%;
bottom: 4%;
width: 39%;
height: 310px;
margin: 0;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .17);
border-radius: 14px;
background: #11161b;
box-shadow: 0 24px 58px rgba(1, 4, 7, .32);
}
.motion-v2 body[data-page="home"] .nk-team-wide>img,
.motion-v2 body[data-page="home"] .nk-team-wide>img.scroll-parallax {
width: 100%;
height: 78%;
margin: 0;
object-fit: cover;
object-position: center;
transform: none;
filter: saturate(.78) contrast(1.05) brightness(.82);
}
.motion-v2 body[data-page="home"] .nk-team-wide figcaption {
position: absolute;
inset: auto 0 0;
min-height: 22%;
display: flex;
align-items: center;
padding: .8rem 1.15rem;
background: #10151a;
color: rgba(245, 245, 243, .74);
font-size: .66rem;
}
.motion-v2 body[data-page="home"] .nk-team-experience {
top: 43%;
right: -7%;
width: 31%;
min-height: 300px;
padding: 2rem 1.7rem;
}
.motion-v2 body[data-page="home"] .nk-team-experience>span {
color: #f36a21;
font-size: .62rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase
}
.motion-v2 body[data-page="home"] .nk-team-experience>strong {
display: block;
margin: 1.35rem 0 .2rem;
color: #f36a21;
font-size: 3rem;
font-weight: 500;
line-height: 1
}
.motion-v2 body[data-page="home"] .nk-team-experience h3 {
margin: 0;
color: #f5f5f3;
font-size: .75rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase
}
.motion-v2 body[data-page="home"] .nk-team-experience i {
display: block;
width: 2rem;
height: 1px;
margin: 1.25rem 0;
background: #f36a21
}
.motion-v2 body[data-page="home"] .nk-team-experience p {
margin: 0;
color: rgba(245, 245, 243, .55);
font-size: .72rem;
line-height: 1.7
}
@media(hover:hover) and (pointer:fine) {
.motion-v2 body[data-page="home"] .nk-team .nk-btn:hover {
transform: translate3d(0, -2px, 0);
background: #d94c0b;
box-shadow: 0 18px 38px rgba(243, 106, 33, .24)
}
.motion-v2 body[data-page="home"] .nk-team .nk-btn:hover::after {
transform: translate3d(3px, 0, 0)
}
.motion-v2 body[data-page="home"] .nk-play:hover {
transform: translate3d(0, -2px, 0);
background: rgba(9, 13, 17, .96)
}
}
.motion-v2 body[data-page="home"] .nk-team .nk-btn:active,
.motion-v2 body[data-page="home"] .nk-play:active {
transform: scale(.97);
transition-duration: 120ms
}
.motion-v2 body[data-page="home"] .nk-team .nk-btn:focus-visible,
.motion-v2 body[data-page="home"] .nk-play:focus-visible {
outline: 3px solid rgba(243, 106, 33, .5);
outline-offset: 4px
}
@media(max-width:1180px) {
.motion-v2 body[data-page="home"] .nk-team {
grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
gap: 3rem;
padding-inline: 3rem
}
.motion-v2 body[data-page="home"] .nk-team h2 {
font-size: clamp(3.5rem, 5.6vw, 4.8rem)
}
.motion-v2 body[data-page="home"] .nk-team-collage {
min-height: 650px
}
.motion-v2 body[data-page="home"] .nk-team-wide {
left: -2%;
width: 42%;
height: 270px
}
.motion-v2 body[data-page="home"] .nk-team-experience {
right: -3%;
width: 34%
}
}
@media(max-width:920px) {
.motion-v2 body[data-page="home"] .nk-team {
grid-template-columns: 1fr;
gap: 5rem;
padding: 7rem max(2rem, calc((100vw - 760px)/2)) 8rem
}
.motion-v2 body[data-page="home"] .nk-team-copy {
max-width: 42rem
}
.motion-v2 body[data-page="home"] .nk-team h2 {
max-width: 40rem
}
.motion-v2 body[data-page="home"] .nk-team-copy>p:not(.nk-section-label) {
max-width: 38rem
}
.motion-v2 body[data-page="home"] .nk-team-values {
max-width: 38rem
}
.motion-v2 body[data-page="home"] .nk-team-collage {
min-height: 690px
}
.motion-v2 body[data-page="home"] .nk-team-tall {
right: 3%;
width: 75%
}
.motion-v2 body[data-page="home"] .nk-team-quote {
left: 0;
width: 29%
}
.motion-v2 body[data-page="home"] .nk-team-experience {
right: 0;
width: 31%
}
}
@media(max-width:640px) {
.motion-v2 body[data-page="home"] .nk-team {
gap: 3.5rem;
min-height: 0;
padding: 5.5rem 1rem 6rem
}
.motion-v2 body[data-page="home"] .nk-team .nk-section-label {
margin-bottom: 2.2rem;
font-size: .68rem
}
.motion-v2 body[data-page="home"] .nk-team .nk-section-label::after {
width: 4rem
}
.motion-v2 body[data-page="home"] .nk-contact-copy .nk-section-label {
font-size: .68rem
}
.motion-v2 body[data-page="home"] .nk-contact-copy .nk-section-label::after {
width: 4rem
}
.motion-v2 body[data-page="home"] .nk-team h2 {
font-size: clamp(3rem, 14vw, 4.15rem);
line-height: .96
}
.motion-v2 body[data-page="home"] .nk-team-copy>p:not(.nk-section-label) {
margin-top: 1.6rem;
font-size: .96rem
}
.motion-v2 body[data-page="home"] .nk-team-proof {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .75rem 1rem
}
.motion-v2 body[data-page="home"] .nk-team-proof span+span::before {
display: none
}
.motion-v2 body[data-page="home"] .nk-team-values {
grid-template-columns: 1fr;
margin-top: 3rem
}
.motion-v2 body[data-page="home"] .nk-team-values article,
.motion-v2 body[data-page="home"] .nk-team-values article:first-child {
display: grid;
grid-template-columns: 42px 1fr;
align-items: center;
padding: 1rem 0;
border: 0;
border-top: 1px solid rgba(243, 106, 33, .25)
}
.motion-v2 body[data-page="home"] .nk-team-values img,
.motion-v2 body[data-page="home"] .nk-team-values svg {
grid-row: 1/3;
width: 28px;
height: 28px;
margin: 0
}
.motion-v2 body[data-page="home"] .nk-team-values strong {
margin: 0 0 .25rem
}
.motion-v2 body[data-page="home"] .nk-team-collage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .75rem;
min-height: 0
}
.motion-v2 body[data-page="home"] .nk-team-tall {
position: relative;
right: auto;
width: 100%;
height: 132vw;
max-height: 560px;
grid-column: 1/-1
}
.motion-v2 body[data-page="home"] .nk-team-quote,
.motion-v2 body[data-page="home"] .nk-team-experience,
.motion-v2 body[data-page="home"] .nk-team-wide {
position: relative;
inset: auto;
width: 100%;
height: auto;
min-height: 0
}
.motion-v2 body[data-page="home"] .nk-team-quote {
padding: 1.35rem;
grid-column: 1/2
}
.motion-v2 body[data-page="home"] .nk-team-experience {
padding: 1.35rem;
grid-column: 2/3
}
.motion-v2 body[data-page="home"] .nk-team-wide {
grid-column: 1/-1;
min-height: 260px
}
.motion-v2 body[data-page="home"] .nk-team-wide>img,
.motion-v2 body[data-page="home"] .nk-team-wide>img.scroll-parallax {
height: 205px
}
.motion-v2 body[data-page="home"] .nk-team-wide figcaption {
min-height: 55px
}
}
@media(max-width:420px) {
.motion-v2 body[data-page="home"] .nk-team-collage {
grid-template-columns: 1fr
}
.motion-v2 body[data-page="home"] .nk-team-quote,
.motion-v2 body[data-page="home"] .nk-team-experience {
grid-column: 1/-1
}
}
@media(prefers-reduced-transparency:reduce) {
.motion-v2 body[data-page="home"] .nk-play {
background: #10151a;
backdrop-filter: none
}
}
@media(prefers-reduced-motion:reduce) {
.motion-v2 body[data-page="home"] .nk-team .nk-btn,
.motion-v2 body[data-page="home"] .nk-team .nk-btn::after,
.motion-v2 body[data-page="home"] .nk-play {
transition: opacity 160ms cubic-bezier(.23, 1, .32, 1) !important;
transform: none !important
}
} .nk-nav-dropdown {
position: relative;
display: inline-flex;
align-items: center
}
.nk-nav-dropdown>a {
padding-right: 1.05rem
}
.nk-nav-dropdown>a::before {
content: "";
position: absolute;
right: 0;
top: 45%;
width: 5px;
height: 5px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-60%) rotate(45deg);
transition: transform .3s var(--ease, cubic-bezier(.2, .8, .2, 1))
}
.nk-nav-dropdown:hover>a::before,
.nk-nav-dropdown:focus-within>a::before {
transform: translateY(-20%) rotate(225deg)
}
.nk-nav-dropdown-panel {
position: absolute;
top: 100%;
left: 50%;
margin-top: 1.15rem;
min-width: 236px;
padding: .55rem;
display: grid;
gap: .15rem;
background: rgba(255, 255, 255, .88);
backdrop-filter: blur(26px) saturate(180%);
-webkit-backdrop-filter: blur(26px) saturate(180%);
border: 1px solid rgba(255, 255, 255, .65);
border-radius: 1.1rem;
box-shadow: 0 30px 70px rgba(20, 20, 20, .16), inset 0 1px 0 rgba(255, 255, 255, .9);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate3d(-50%, 6px, 0) scale(.97);
transition: opacity .26s var(--ease, cubic-bezier(.2, .8, .2, 1)), transform .3s var(--ease, cubic-bezier(.2, .8, .2, 1)), visibility 0s linear .26s;
z-index: 60
}
.nk-nav-dropdown:hover .nk-nav-dropdown-panel,
.nk-nav-dropdown:focus-within .nk-nav-dropdown-panel {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate3d(-50%, 0, 0) scale(1);
transition: opacity .26s var(--ease, cubic-bezier(.2, .8, .2, 1)), transform .3s var(--ease, cubic-bezier(.2, .8, .2, 1)), visibility 0s linear
}
.nk-nav-dropdown-panel a {
position: static;
display: flex;
align-items: center;
gap: .55rem;
padding: .62rem .85rem;
border-radius: .7rem;
font-size: .64rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: none;
color: #292a2c;
white-space: nowrap;
transition: background .2s ease, color .2s ease, transform .2s ease
}
.nk-nav-dropdown-panel a::after {
display: none
}
.nk-nav-dropdown-panel a::before {
content: "";
width: 5px;
height: 5px;
flex: 0 0 auto;
border-radius: 50%;
background: #f36a21;
opacity: .55;
transition: opacity .2s ease
}
.nk-nav-dropdown-panel a:hover {
background: rgba(243, 106, 33, .1);
color: #f36a21;
transform: translateX(3px)
}
.nk-nav-dropdown-panel a:hover::before {
opacity: 1
}
.mk-menu-accordion {
border-bottom: 0
}
.mk-menu-accordion summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0;
margin-top: calc((var(--mk-item-h, 70px) + 44px) / -2 - 10px);
position: relative;
z-index: 3;
color: var(--mk-text);
pointer-events: none
}
.mk-menu-accordion summary::-webkit-details-marker {
display: none
}
.mk-menu-accordion-label {
display: none
}
.mk-menu-accordion-toggle {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(253, 113, 5, .1);
color: var(--mk-accent);
transition: background .3s var(--mk-ease), color .3s var(--mk-ease);
pointer-events: auto
}
.mk-menu-accordion-toggle i {
font-size: 25px;
display: block;
transition: transform .4s var(--mk-ease);
font-weight: 200
}
.mk-menu-accordion[open] .mk-menu-accordion-toggle {
background: var(--mk-accent);
color: #fff
}
.mk-menu-accordion[open] .mk-menu-accordion-toggle i {
transform: rotate(135deg)
}
.mk-menu-accordion-list {
display: none;
flex-direction: column;
padding: 25px 0px 15px 0px;
gap: 10px
}
.mk-menu-accordion[open] .mk-menu-accordion-list {
display: flex
}
.mk-menu-accordion-list a {
position: relative;
display: block;
padding: 11px 14px 11px 30px;
border-radius: 14px;
color: var(--mk-muted);
font-size: clamp(17px, 4vw, 20px);
font-weight: 500;
letter-spacing: -.01em;
transition: color .2s ease, background .2s ease, padding-left .25s var(--mk-ease)
}
.mk-menu-accordion-list a::before {
content: "";
position: absolute;
left: 7px;
top: 50%;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--mk-accent);
transform: translateY(-50%);
opacity: .6;
transition: opacity .2s ease, transform .25s var(--mk-ease)
}
.mk-menu-accordion-list a:hover,
.mk-menu-accordion-list a:focus-visible {
color: var(--mk-text);
background: rgba(253, 113, 5, .08);
padding-left: 36px
}
.mk-menu-accordion-list a:hover::before,
.mk-menu-accordion-list a:focus-visible::before {
opacity: 1;
transform: translateY(-50%) scale(1.3)
}
@media(max-width:900px) {
.nk-nav-dropdown {
display: none
}
} .mk-menu-accordion-list .mk-menu-accordion-link {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 10px;
border-radius: 73px;
background: linear-gradient(237deg, rgba(255, 255, 255, .92), rgb(255 255 255 / 0%));
box-shadow: 0 4px 14px rgb(20 20 20 / 2%);
transition: background .2s ease, box-shadow .2s ease, transform .2s ease
}
.mk-menu-accordion-list .mk-menu-accordion-link::before {
display: none
}
.mk-menu-accordion-list .mk-menu-accordion-link:hover,
.mk-menu-accordion-list .mk-menu-accordion-link:focus-visible {
background: #fff;
box-shadow: 0 10px 24px rgba(20, 20, 20, .09);
transform: translateY(-1px);
padding-left: 16px
}
.mk-menu-accordion-icon {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 50px;
height: 50px;
border-radius: 50%;
background: #f36a21;
box-shadow: 0 6px 16px rgba(243, 106, 33, .35)
}
.mk-menu-accordion-icon img {
width: 45px;
height: 45px;
object-fit: contain;
filter: brightness(0) invert(1)
}
.mk-menu-accordion-label-text {
flex: 1;
min-width: 0;
color: var(--mk-text);
font-size: 16px;
font-weight: 600;
letter-spacing: -.01em
}
.mk-menu-accordion-arrow {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 24px;
height: 24px;
color: var(--mk-text);
font-size: 16px;
transition: transform .25s var(--mk-ease)
}
.mk-menu-accordion-list .mk-menu-accordion-link:hover .mk-menu-accordion-arrow,
.mk-menu-accordion-list .mk-menu-accordion-link:focus-visible .mk-menu-accordion-arrow {
transform: translateX(4px)
}
.nk-nav-dropdown-panel .nk-nav-dropdown-link {
display: flex;
align-items: center;
gap: .6rem;
padding: .5rem .7rem;
border-radius: .7rem;
color: #292a2c;
font-size: .64rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: none;
transition: background .2s ease, color .2s ease
}
.nk-nav-dropdown-panel .nk-nav-dropdown-link::before,
.nk-nav-dropdown-panel .nk-nav-dropdown-link::after {
display: none
}
.nk-nav-dropdown-panel .nk-nav-dropdown-link:hover {
background: rgba(243, 106, 33, .1);
color: #f36a21;
transform: none
}
.nk-nav-dropdown-icon {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 26px;
height: 26px;
border-radius: 50%;
background: #f36a21
}
.nk-nav-dropdown-icon img {
width: 14px;
height: 14px;
object-fit: contain;
filter: brightness(0) invert(1)
}
.nk-nav-dropdown-text {
flex: 1;
min-width: 0
}
.nk-nav-dropdown-panel .nk-nav-dropdown-link i {
font-size: 11px;
opacity: .55;
transition: transform .2s ease, opacity .2s ease
}
.nk-nav-dropdown-panel .nk-nav-dropdown-link:hover i {
opacity: 1;
transform: translateX(2px)
}