@font-face {
font-family: "Raleway";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://nk-malermeisterbetrieb.de/wp-content/plugins/nk-website/assets/fonts/raleway-400-normal-bb0457092b.woff2) format("woff2") format("woff2")
}
n @font-face {
font-family: "Raleway";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://nk-malermeisterbetrieb.de/wp-content/plugins/nk-website/assets/fonts/raleway-500-normal-69e5346524.woff2) format("woff2") format("woff2")
}
n @font-face {
font-family: "Raleway";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://nk-malermeisterbetrieb.de/wp-content/plugins/nk-website/assets/fonts/raleway-600-normal-7eb618b12f.woff2) format("woff2") format("woff2")
}
n @font-face {
font-family: "Raleway";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://nk-malermeisterbetrieb.de/wp-content/plugins/nk-website/assets/fonts/raleway-700-normal-5046449dfb.woff2) format("woff2") format("woff2")
}
n @font-face {
font-family: "Raleway";
font-style: italic;
font-weight: 500;
font-display: swap;
src: url(https://nk-malermeisterbetrieb.de/wp-content/plugins/nk-website/assets/fonts/raleway-500-italic-b5816adbb0.woff2) format("woff2") format("woff2")
}
n @font-face {
font-family: "Raleway";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://nk-malermeisterbetrieb.de/wp-content/plugins/nk-website/assets/fonts/raleway-400-normal-507f307536.woff2) format("woff2") format("woff2")
}
n @font-face {
font-family: "Raleway";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://nk-malermeisterbetrieb.de/wp-content/plugins/nk-website/assets/fonts/raleway-500-normal-4b72517a42.woff2) format("woff2") format("woff2")
}
n @font-face {
font-family: "Raleway";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://nk-malermeisterbetrieb.de/wp-content/plugins/nk-website/assets/fonts/raleway-600-normal-eb7e406766.woff2) format("woff2") format("woff2")
}
n @font-face {
font-family: "Raleway";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://nk-malermeisterbetrieb.de/wp-content/plugins/nk-website/assets/fonts/raleway-700-normal-c94105e2bf.woff2) format("woff2") format("woff2")
}
n @font-face {
font-family: "Raleway";
font-style: italic;
font-weight: 500;
font-display: swap;
src: url(https://nk-malermeisterbetrieb.de/wp-content/plugins/nk-website/assets/fonts/raleway-500-italic-66a3b18045.woff2) format("woff2") format("woff2")
}
:root {
--orange: #f36a21;
--orange2: #d94c0b;
--ink: #292a2c;
--muted: #6f706f;
--paper: #fff;
--soft: #f6f4f0;
--soft2: #eee9e2;
--line: rgba(41, 42, 44, .14);
--shadow: 0 28px 80px rgba(55, 45, 35, .10);
--radius: 80px;
--pad: clamp(1.1rem, 4vw, 5rem);
--ease: cubic-bezier(.2, .8, .2, 1); --fs-h1: clamp(52px, 5.25vw, 86px);
--lh-h1: 1.04;
--ls-h1: -.055em;
--fs-h2: clamp(2.65rem, 5vw, 5.7rem);
--lh-h2: .98;
--ls-h2: -.052em;
--fs-h3: clamp(1.25rem, 2vw, 1.65rem);
--lh-h3: 1.2;
--fs-body: 1rem;
--lh-body: 1.75;
--fs-lead: clamp(1rem, 1.4vw, 1.18rem);
--lh-lead: 1.72;
--fs-small: .86rem;
--fs-eyebrow: .77rem;
--ls-eyebrow: .14em;
--space-eyebrow-gap: 2.7rem;
--space-heading-lead: 1.35rem
}
::selection {
background-color: #f36a21;
color: #fff;
text-shadow: none
}
::-moz-selection {
background-color: #f36a21;
color: #fff;
text-shadow: none
}
* {
box-sizing: border-box
}
html {
scroll-behavior: smooth;
background: var(--paper)
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: "Raleway", Arial, sans-serif;
line-height: 1.5;
overflow-x: hidden
}
body.lightbox-open {
overflow: hidden
}
::selection {
background-color: #f36a21;
color: #fff;
text-shadow: none
}
a {
color: inherit;
text-decoration: none
}
button,
input,
select,
textarea {
font: inherit;
color: inherit
}
button {
cursor: pointer
}
img {
display: block;
width: 100%
}
em {
font-family: "Raleway", Arial, sans-serif !important;
font-style: italic;
font-weight: 500
}
.sr {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0
}
.noise {
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
opacity: .026;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")
}
.progress {
position: fixed;
z-index: 1100;
top: 0;
left: 0;
height: 3px;
width: 0;
background: var(--orange)
}
.header {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
right: 0;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 2rem;
min-height: 82px;
padding: .7rem var(--pad);
background: rgba(255, 255, 255, .86);
border-bottom: 1px solid transparent;
backdrop-filter: blur(18px);
transition: min-height .3s, border-color .3s, box-shadow .3s
}
.header.scrolled {
min-height: 68px;
border-color: var(--line);
box-shadow: 0 10px 30px rgba(45, 38, 30, .05)
}
.brand {
display: flex;
align-items: center;
gap: .72rem;
min-width: max-content
}
.brand img {
width: 50px;
height: 50px;
object-fit: contain
}
.brand-text {
display: grid;
line-height: 1.05
}
.brand-text strong {
font-size: .72rem;
letter-spacing: .1em;
text-transform: uppercase
}
.brand-text span {
margin-top: .22rem;
color: var(--muted);
font-size: .57rem;
letter-spacing: .14em;
text-transform: uppercase
}
.desktop-nav {
justify-self: center;
display: flex;
align-items: center;
gap: clamp(.8rem, 1.7vw, 1.8rem)
}
.desktop-nav a {
position: relative;
font-size: .66rem;
font-weight: 700;
letter-spacing: .105em;
text-transform: uppercase;
white-space: nowrap
}
.desktop-nav a:after {
content: "";
position: absolute;
left: 0;
right: 100%;
bottom: -.4rem;
height: 1px;
background: var(--orange);
transition: right .35s var(--ease)
}
.desktop-nav a:hover:after,
.desktop-nav a.active:after {
right: 0
}
.header-actions {
display: flex;
align-items: center;
gap: .75rem
}
.request-btn,
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .8rem;
border: 0;
border-radius: 999px;
background: var(--orange);
color: #fff;
font-size: .67rem;
font-weight: 800;
letter-spacing: .11em;
text-transform: uppercase;
transition: transform .3s var(--ease), background .3s, box-shadow .3s
}
.request-btn {
padding: .82rem 1.15rem
}
.request-btn:hover,
.btn:hover {
transform: translateY(-3px);
background: var(--orange2);
box-shadow: 0 15px 28px rgba(243, 106, 33, .22)
}
.btn {
min-height: 52px;
padding: .9rem 1.35rem
}
.btn-ghost {
background: transparent;
color: var(--ink);
border: 1px solid var(--line)
}
.btn-ghost:hover {
color: #fff;
border-color: var(--orange)
}
.btn i,
.request-btn i {
font-style: normal;
font-size: 1rem
}
.page {
display: none;
padding-top: 82px
}
.page.active {
display: block;
animation: pageIn .7s var(--ease)
}
@keyframes pageIn {
from {
opacity: 0;
transform: translateY(18px)
}
to {
opacity: 1;
transform: none
}
}
.wrap {
width: min(1600px, 100%);
margin: auto
}
.section {
padding: clamp(5.2rem, 9vw, 9rem) var(--pad)
}
.section-soft {
background: var(--soft)
}
.section-orange {
background: var(--orange);
color: #fff
}
.section-head {
display: grid;
grid-template-columns: .62fr 1.8fr;
gap: 2rem;
align-items: start;
margin-bottom: clamp(3rem, 6vw, 6rem)
}
.kicker {
margin: .3rem 0 0;
color: var(--orange);
font-size: .66rem;
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase
}
.section-orange .kicker {
color: #fff
}
.display {
margin: 0;
max-width: 1050px;
font-size: clamp(2.4rem, 5.5vw, 6.7rem);
font-weight: 500;
line-height: .94;
letter-spacing: -.065em
}
.display em,
.cta-block h2 em {
color: var(--orange);
font-family: Georgia, serif;
font-weight: 400
}
.hero-title em,
.subhero h1 em {
font-family: Georgia, serif;
font-weight: 400
}
.section-orange .display em {
color: #fff
}
.lead {
max-width: 650px;
color: var(--muted);
font-size: clamp(1rem, 1.5vw, 1.3rem)
}
.eyebrow {
display: flex;
align-items: center;
gap: .7rem;
margin: 0 0 1.2rem;
color: var(--orange);
font-size: .66rem;
font-weight: 800;
letter-spacing: .17em;
text-transform: uppercase
}
.eyebrow:before {
content: "";
width: 34px;
height: 1px;
background: currentColor
}
.actions {
display: flex;
flex-wrap: wrap;
gap: .75rem;
margin-top: 2rem
}
.hero {
position: relative;
min-height: calc(100svh - 82px);
display: grid;
grid-template-columns: 1.08fr .92fr;
background: var(--soft);
overflow: hidden
}
.hero-copy {
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: clamp(7rem, 12vw, 12rem) var(--pad) clamp(3rem, 6vw, 6rem)
}
.hero-title {
margin: 0;
max-width: 880px;
font-size: clamp(3.6rem, 8.3vw, 9.2rem);
font-weight: 500;
line-height: .83;
letter-spacing: -.08em
}
.hero-title span {
display: block
}
.hero-copy .lead {
margin: 2rem 0 0
}
.hero-media {
position: relative;
min-height: 650px;
overflow: hidden;
border-radius: 0 0 0 clamp(2rem, 5vw, 5rem)
}
.hero-media:after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(50, 40, 30, .22))
}
.hero-media img {
height: 110%;
object-fit: cover;
transition: transform 1.2s var(--ease)
}
.hero:hover .hero-media img {
transform: scale(1.025)
}
.hero-chip {
position: absolute;
z-index: 2;
left: clamp(1.3rem, 3vw, 3rem);
bottom: clamp(1.3rem, 3vw, 3rem);
max-width: 260px;
padding: 1.1rem 1.25rem;
background: rgba(255, 255, 255, .89);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, .85);
border-radius: 1rem;
box-shadow: var(--shadow)
}
.hero-chip strong {
display: block;
font-size: 1.2rem;
letter-spacing: -.03em
}
.hero-chip span {
color: var(--muted);
font-size: .75rem
}
.hero-side {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
padding: .65rem .8rem;
background: #fff;
color: var(--ink);
font-size: .58rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
writing-mode: vertical-rl
}
.ticker {
overflow: hidden;
border-top: 1px solid rgba(243, 106, 33, .25);
border-bottom: 1px solid rgba(243, 106, 33, .25);
background: #fff
}
.ticker-track {
display: flex;
width: max-content;
padding: .85rem 0;
animation: ticker 32s linear infinite
}
.ticker span {
display: flex;
align-items: center;
gap: 1.35rem;
padding-right: 1.35rem;
color: var(--ink);
font-size: .64rem;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase
}
.ticker span:after {
content: "✦";
color: var(--orange)
}
@keyframes ticker {
to {
transform: translateX(-50%)
}
}
.intro-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 6vw, 7rem);
align-items: center
}
.intro-media {
position: relative;
min-height: 590px;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow)
}
.intro-media img {
height: 108%;
object-fit: cover
}
.intro-copy h2 {
margin: 0;
font-size: clamp(2.4rem, 5vw, 5.7rem);
font-weight: 500;
line-height: .94;
letter-spacing: -.06em
}
.intro-copy h2 em {
color: var(--orange);
font-family: Georgia, serif;
font-weight: 400
}
.intro-copy p {
max-width: 570px;
color: var(--muted);
font-size: 1.08rem
}
.facts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
margin-top: 2.5rem;
background: var(--line);
border: 1px solid var(--line);
border-radius: 1rem;
overflow: hidden
}
.fact {
padding: 1.4rem;
background: #fff
}
.fact strong {
display: block;
color: var(--orange);
font-size: clamp(1.7rem, 3vw, 3.2rem);
line-height: 1;
letter-spacing: -.06em
}
.fact span {
display: block;
margin-top: .65rem;
color: var(--muted);
font-size: .63rem;
letter-spacing: .1em;
text-transform: uppercase
}
.service-list {
border-top: 1px solid var(--line)
}
.service-row {
position: relative;
display: grid;
grid-template-columns: 72px 1fr minmax(220px, .8fr) 52px;
gap: 1.5rem;
align-items: center;
min-height: 126px;
padding: 1.25rem 0;
border-bottom: 1px solid var(--line);
overflow: hidden
}
.service-row:before {
content: "";
position: absolute;
inset: 0;
background: var(--orange);
transform: translateY(101%);
transition: transform .5s var(--ease)
}
.service-row>* {
position: relative;
z-index: 2;
transition: color .35s, transform .45s var(--ease)
}
.service-row:hover:before {
transform: none
}
.service-row:hover>* {
color: #fff
}
.service-row:hover h3 {
transform: translateX(10px)
}
.service-num {
color: var(--orange);
font-size: .64rem;
font-weight: 800;
letter-spacing: .15em
}
.service-row h3 {
margin: 0;
font-size: clamp(1.55rem, 2.8vw, 3.25rem);
font-weight: 500;
letter-spacing: -.045em
}
.service-row p {
margin: 0;
color: var(--muted);
font-size: .9rem
}
.service-arrow {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border: 1px solid currentColor;
border-radius: 50%;
font-size: 1.1rem
}
.service-preview {
position: fixed;
z-index: 900;
width: min(290px, 23vw);
aspect-ratio: 4/5;
border-radius: 1.2rem;
overflow: hidden;
pointer-events: none;
opacity: 0;
transform: translate(-50%, -45%) rotate(-3deg) scale(.84);
transition: opacity .2s, transform .4s var(--ease);
box-shadow: var(--shadow)
}
.service-preview.show {
opacity: 1;
transform: translate(-50%, -50%) rotate(-2deg) scale(1)
}
.service-preview img {
height: 100%;
object-fit: cover
}
.duo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.4rem
}
.teaser {
position: relative;
min-height: 620px;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow)
}
.teaser img {
height: 110%;
object-fit: cover;
transition: transform 1s var(--ease)
}
.teaser:hover img {
transform: scale(1.045)
}
.teaser:after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 45%, rgba(55, 45, 35, .72))
}
.teaser-content {
position: absolute;
z-index: 2;
left: clamp(1.3rem, 3vw, 2.8rem);
right: clamp(1.3rem, 3vw, 2.8rem);
bottom: clamp(1.3rem, 3vw, 2.8rem);
color: #fff
}
.teaser-content small {
font-size: .62rem;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase
}
.teaser-content h3 {
margin: .55rem 0 1rem;
font-size: clamp(2.2rem, 4vw, 4.8rem);
font-weight: 500;
line-height: .92;
letter-spacing: -.06em
}
.circle-link {
display: grid;
place-items: center;
width: 58px;
height: 58px;
border: 1px solid rgba(255, 255, 255, .7);
border-radius: 50%;
transition: background .3s, color .3s
}
.circle-link:hover {
background: #fff;
color: var(--orange)
}
.project-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: clamp(1rem, 2.2vw, 2.2rem);
align-items: start
}
.project-card {
position: relative
}
.project-card:nth-child(4n+1) {
grid-column: span 7
}
.project-card:nth-child(4n+2) {
grid-column: span 5;
margin-top: 7rem
}
.project-card:nth-child(4n+3) {
grid-column: span 5
}
.project-card:nth-child(4n+4) {
grid-column: span 7;
margin-top: 4rem
}
.project-image {
position: relative;
aspect-ratio: 16/10;
border-radius: var(--radius);
overflow: hidden;
background: var(--soft2)
}
.project-card:nth-child(even) .project-image {
aspect-ratio: 4/5
}
.project-image img {
height: 110%;
object-fit: cover;
transition: transform 1s var(--ease), filter .5s
}
.project-card:hover img {
transform: scale(1.045);
filter: saturate(.8)
}
.project-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 1.4rem;
color: #fff;
background: linear-gradient(180deg, transparent 35%, rgba(45, 35, 28, .68));
opacity: 0;
transition: opacity .35s
}
.project-card:hover .project-overlay {
opacity: 1
}
.project-overlay small {
font-size: .6rem;
letter-spacing: .14em;
text-transform: uppercase
}
.project-overlay strong {
font-size: 1.45rem
}
.project-meta {
display: flex;
justify-content: space-between;
gap: 1rem;
margin-top: 1rem
}
.project-meta h3 {
margin: 0;
font-size: 1.5rem;
font-weight: 500;
letter-spacing: -.035em
}
.project-meta span {
color: var(--muted);
font-size: .68rem;
letter-spacing: .1em;
text-transform: uppercase
}
.steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--line);
border-left: 1px solid var(--line)
}
.step {
min-height: 330px;
padding: 1.7rem;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
transition: background .35s, color .35s
}
.step:hover {
background: var(--orange);
color: #fff
}
.step-num {
display: flex;
align-items: center;
justify-content: space-between;
color: var(--orange);
font-size: .67rem;
font-weight: 800;
letter-spacing: .14em
}
.step:hover .step-num {
color: #fff
}
.step-num:after {
content: "↘";
font-size: 1.1rem
}
.step h3 {
margin: 5.6rem 0 .9rem;
font-size: clamp(1.35rem, 2vw, 2.1rem);
font-weight: 500;
letter-spacing: -.035em
}
.step p {
margin: 0;
color: var(--muted);
font-size: .9rem
}
.step:hover p {
color: rgba(255, 255, 255, .8)
}
.cta-block {
position: relative;
min-height: 600px;
display: flex;
align-items: flex-end;
padding: clamp(4rem, 8vw, 8rem) var(--pad);
overflow: hidden;
background: var(--soft)
}
.cta-image {
position: absolute;
inset: 0;
opacity: .28
}
.cta-image:after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .82) 48%, rgba(255, 255, 255, .25))
}
.cta-image img {
height: 110%;
object-fit: cover
}
.cta-content {
position: relative;
z-index: 2;
max-width: 1100px
}
.cta-block h2 {
margin: 0;
font-size: clamp(3.2rem, 7.8vw, 9rem);
font-weight: 500;
line-height: .86;
letter-spacing: -.075em
}
.cta-block p {
max-width: 600px;
color: var(--muted);
font-size: 1.1rem
}
.subhero {
position: relative;
min-height: 680px;
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--soft);
overflow: hidden
}
.subhero-copy {
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: clamp(6rem, 11vw, 11rem) var(--pad) clamp(3rem, 6vw, 6rem)
}
.subhero h1 {
margin: 0;
font-size: clamp(3.3rem, 7vw, 8rem);
font-weight: 500;
line-height: .87;
letter-spacing: -.075em
}
.subhero p {
max-width: 620px;
color: var(--muted);
font-size: 1.08rem
}
.subhero-media {
min-height: 600px;
overflow: hidden;
border-radius: 0 0 0 clamp(2rem, 5vw, 5rem)
}
.subhero-media img {
height: 110%;
object-fit: cover
}
.mini-services {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem
}
.mini-card {
min-height: 245px;
padding: 1.4rem;
border: 1px solid var(--line);
border-radius: 1.2rem;
background: #fff;
transition: transform .35s var(--ease), box-shadow .35s, border-color .35s
}
.mini-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow);
border-color: transparent
}
.mini-icon {
width: 52px;
height: 52px;
display: grid;
place-items: center;
border-radius: 50%;
background: #fff2e9;
color: var(--orange);
font-size: 1.35rem
}
.mini-card h3 {
margin: 2.6rem 0 .65rem;
font-size: 1.25rem;
font-weight: 500;
letter-spacing: -.025em
}
.mini-card p {
margin: 0;
color: var(--muted);
font-size: .88rem
}
.gallery {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: 190px;
gap: 1rem
}
.gallery-item {
position: relative;
border: 0;
padding: 0;
border-radius: 1.2rem;
overflow: hidden;
background: var(--soft2)
}
.gallery-item:nth-child(6n+1) {
grid-column: span 7;
grid-row: span 2
}
.gallery-item:nth-child(6n+2) {
grid-column: span 5;
grid-row: span 2
}
.gallery-item:nth-child(6n+3) {
grid-column: span 4;
grid-row: span 2
}
.gallery-item:nth-child(6n+4) {
grid-column: span 8;
grid-row: span 2
}
.gallery-item:nth-child(6n+5),
.gallery-item:nth-child(6n+6) {
grid-column: span 6;
grid-row: span 2
}
.gallery-item img {
height: 110%;
object-fit: cover;
transition: transform .8s var(--ease)
}
.gallery-item:hover img {
transform: scale(1.05)
}
.gallery-item:after {
content: "↗";
position: absolute;
right: 1rem;
top: 1rem;
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(255, 255, 255, .88);
color: var(--orange);
opacity: 0;
transform: scale(.7);
transition: .3s
}
.gallery-item:hover:after {
opacity: 1;
transform: none
}
.compare {
display: grid;
grid-template-columns: 1fr .9fr;
gap: clamp(2rem, 5vw, 6rem);
align-items: center
}
.before-after {
position: relative;
aspect-ratio: 16/10;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
--pos: 50%
}
.ba-img {
position: absolute;
inset: 0
}
.ba-img img {
height: 100%;
object-fit: cover
}
.ba-after {
clip-path: inset(0 calc(100% - var(--pos)) 0 0)
}
.ba-line {
position: absolute;
z-index: 4;
top: 0;
bottom: 0;
left: var(--pos);
width: 2px;
background: #fff;
transform: translateX(-50%);
pointer-events: none
}
.ba-line:after {
content: "↔";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 48px;
height: 48px;
display: grid;
place-items: center;
border-radius: 50%;
background: #fff;
color: var(--orange);
box-shadow: 0 10px 30px rgba(0, 0, 0, .16)
}
.ba-range {
position: absolute;
z-index: 5;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: ew-resize
}
.ba-label {
position: absolute;
z-index: 3;
top: 1rem;
padding: .45rem .7rem;
border-radius: 999px;
background: rgba(255, 255, 255, .88);
font-size: .58rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase
}
.ba-label.before {
left: 1rem
}
.ba-label.after {
right: 1rem
}
.compare-copy h2 {
margin: 0;
font-size: clamp(2.4rem, 4.5vw, 5.2rem);
font-weight: 500;
line-height: .95;
letter-spacing: -.06em
}
.compare-copy h2 em {
font-family: Georgia, serif;
color: var(--orange);
font-weight: 400
}
.compare-copy p {
color: var(--muted)
}
.benefits {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
border-top: 1px solid var(--line)
}
.benefit {
display: grid;
grid-template-columns: 50px 1fr;
gap: 1rem;
padding: 1.5rem 0;
border-bottom: 1px solid var(--line)
}
.benefit:nth-child(odd) {
padding-right: 2rem
}
.benefit:nth-child(even) {
padding-left: 2rem;
border-left: 1px solid var(--line)
}
.benefit i {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: #fff2e9;
color: var(--orange);
font-style: normal
}
.benefit h3 {
margin: .1rem 0 .3rem;
font-size: 1.1rem;
font-weight: 500
}
.benefit p {
margin: 0;
color: var(--muted);
font-size: .88rem
}
.filterbar {
display: flex;
flex-wrap: wrap;
gap: .6rem;
margin-bottom: 2.6rem
}
.filter-btn {
padding: .7rem 1rem;
border: 1px solid var(--line);
border-radius: 999px;
background: #fff;
font-size: .62rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
transition: .25s
}
.filter-btn:hover,
.filter-btn.active {
color: #fff;
background: var(--orange);
border-color: var(--orange)
}
.project-card.hidden {
display: none
}
.lightbox {
position: fixed;
z-index: 1300;
inset: 0;
display: grid;
place-items: center;
padding: clamp(1rem, 4vw, 4rem);
background: rgba(255, 255, 255, .96);
opacity: 0;
pointer-events: none;
transition: opacity .35s
}
.lightbox.open {
opacity: 1;
pointer-events: auto
}
.lightbox figure {
margin: 0;
width: min(1200px, 100%);
max-height: 86vh;
display: grid;
grid-template-columns: 1fr auto;
gap: 1rem;
align-items: end
}
.lightbox-media {
position: relative;
min-width: 0
}
.lightbox img {
max-height: 80vh;
object-fit: contain;
border-radius: 1rem;
box-shadow: var(--shadow)
}
.lightbox figcaption {
writing-mode: vertical-rl;
color: var(--muted);
font-size: .68rem;
letter-spacing: .12em;
text-transform: uppercase
}
.lightbox-close {
position: absolute;
z-index: 2;
right: -18px;
top: -18px;
width: 44px;
height: 44px;
border: 1px solid var(--line);
border-radius: 50%;
background: #fff;
box-shadow: var(--shadow);
font-size: 1.15rem
}
.about-layout {
display: grid;
grid-template-columns: .85fr 1.15fr;
gap: clamp(2rem, 7vw, 8rem);
align-items: start
}
.about-sticky {
position: sticky;
top: 110px
}
.about-sticky img {
aspect-ratio: 4/5;
object-fit: cover;
border-radius: var(--radius);
box-shadow: var(--shadow)
}
.about-copy h1 {
margin: 0;
font-size: clamp(3rem, 6vw, 7rem);
font-weight: 500;
line-height: .9;
letter-spacing: -.07em
}
.about-copy h1 em {
font-family: Georgia, serif;
font-weight: 400
}
.about-copy>p {
max-width: 720px;
color: var(--muted);
font-size: 1.1rem
}
.values {
margin-top: 3rem;
border-top: 1px solid var(--line)
}
.value {
display: grid;
grid-template-columns: 50px 1fr;
gap: 1rem;
padding: 1.35rem 0;
border-bottom: 1px solid var(--line)
}
.value span {
color: var(--orange);
font-size: .68rem;
font-weight: 800
}
.value h3 {
margin: 0 0 .35rem;
font-size: 1.35rem;
font-weight: 500
}
.value p {
margin: 0;
color: var(--muted)
}
.contact-layout {
display: grid;
grid-template-columns: .8fr 1.2fr;
gap: clamp(2rem, 7vw, 8rem)
}
.contact-info h1 {
margin: 0;
font-size: clamp(3rem, 6vw, 6.8rem);
font-weight: 500;
line-height: .9;
letter-spacing: -.07em
}
.contact-info h1 em {
font-family: Georgia, serif;
font-weight: 400
}
.contact-info>p {
color: var(--muted);
font-size: 1.05rem
}
.contact-list {
margin-top: 3rem;
border-top: 1px solid var(--line)
}
.contact-item {
padding: 1.15rem 0;
border-bottom: 1px solid var(--line)
}
.contact-item small {
display: block;
color: var(--orange);
font-size: .6rem;
font-weight: 800;
letter-spacing: .13em;
text-transform: uppercase
}
.contact-item a,
.contact-item span {
display: block;
margin-top: .35rem;
font-size: 1.15rem
}
.form {
padding: clamp(1.4rem, 4vw, 3rem);
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--soft);
box-shadow: var(--shadow)
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.2rem
}
.field {
display: grid;
gap: .45rem
}
.field.full {
grid-column: 1/-1
}
.field label {
font-size: .63rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase
}
.field input,
.field select,
.field textarea {
width: 100%;
border: 0;
border-bottom: 1px solid var(--line);
border-radius: 0;
background: transparent;
padding: .85rem 0;
outline: 0
}
.field input:focus,
.field select:focus,
.field textarea:focus {
border-color: var(--orange)
}
.field textarea {
min-height: 130px;
resize: vertical
}
.upload {
padding: 1.1rem !important;
border: 1px dashed rgba(243, 106, 33, .45) !important;
border-radius: 1rem !important;
background: #fff !important
}
.form .btn {
margin-top: 1.5rem
}
.toast {
position: fixed;
z-index: 1400;
right: 1.5rem;
bottom: 1.5rem;
max-width: 360px;
padding: 1rem 1.15rem;
border-radius: 1rem;
background: var(--orange);
color: #fff;
box-shadow: var(--shadow);
transform: translateY(140%);
transition: transform .45s var(--ease)
}
.toast.show {
transform: none
}
.footer {
padding: clamp(4rem, 7vw, 7rem) var(--pad) 2rem;
background: var(--soft)
}
@keyframes headerIn {
from {
opacity: 0;
transform: translateY(-100%)
}
to {
opacity: 1;
transform: none
}
}
@keyframes logoBreathe {
0%,
100% {
transform: translateY(0) rotate(0)
}
50% {
transform: translateY(-3px) rotate(-1deg)
}
}
@keyframes bandRight {
to {
transform: translateX(0)
}
}
@keyframes bandLeft {
to {
transform: translateX(-50%)
}
}
@keyframes imageDrift {
0%,
100% {
transform: scale(1.03) translate3d(0, 0, 0)
}
50% {
transform: scale(1.09) translate3d(-1.5%, 1%, 0)
}
}
.header {
animation: headerIn .8s var(--ease) both
}
.brand img {
animation: logoBreathe 5s ease-in-out infinite;
transition: width .35s, height .35s
}
.header.scrolled .brand img {
width: 42px;
height: 42px
}
.request-btn i,
.btn i {
transition: transform .3s var(--ease)
}
.request-btn:hover i,
.btn:hover i {
transform: translate(3px, -3px)
}
.home-hero .hero-media img {
animation: imageDrift 16s ease-in-out infinite
}
.image-index {
position: absolute;
left: 1.25rem;
bottom: 1.25rem;
padding: .55rem .8rem;
border-radius: 999px;
background: rgba(255, 255, 255, .9);
color: var(--ink);
font-size: .58rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase
}
.welcome-media {
isolation: isolate
}
.home-service-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem
}
.home-service-card {
position: relative;
display: flex;
min-height: 360px;
flex-direction: column;
padding: 1.7rem;
border: 1px solid var(--line);
border-radius: 1.25rem;
background: #fff;
overflow: hidden;
transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s
}
.home-service-card:hover {
transform: translateY(-8px);
border-color: rgba(243, 106, 33, .4);
box-shadow: var(--shadow)
}
.home-service-card:after {
content: "";
position: absolute;
left: 0;
right: 100%;
bottom: 0;
height: 4px;
background: var(--orange);
transition: right .45s var(--ease)
}
.home-service-card:hover:after {
right: 0
}
.service-icon {
display: grid;
width: 58px;
height: 58px;
place-items: center;
margin-bottom: auto;
border-radius: 50%;
background: var(--soft);
transition: background .3s, transform .4s var(--ease)
}
.home-service-card:hover .service-icon {
background: rgba(243, 106, 33, .12);
transform: rotate(-7deg) scale(1.05)
}
.service-icon img {
width: 26px;
height: 26px;
object-fit: contain
}
.home-service-card .service-num {
position: absolute;
right: 1.6rem;
top: 1.6rem;
color: var(--orange);
font-size: .58rem;
font-weight: 800;
letter-spacing: .13em
}
.home-service-card h3 {
margin: 2.1rem 0 .65rem;
font-size: clamp(1.45rem, 2vw, 2rem);
font-weight: 500;
letter-spacing: -.04em
}
.home-service-card p {
margin: 0 0 1.5rem;
color: var(--muted);
font-size: .86rem
}
.text-link {
margin-top: auto;
color: var(--orange2);
font-size: .63rem;
font-weight: 800;
letter-spacing: .11em;
text-transform: uppercase
}
.team-layout {
display: grid;
grid-template-columns: .8fr 1.2fr;
gap: clamp(2rem, 7vw, 8rem);
align-items: center
}
.team-copy .display {
margin-bottom: 1.5rem
}
.team-copy>p:not(.kicker) {
max-width: 570px;
color: var(--muted);
font-size: clamp(1rem, 1.4vw, 1.2rem)
}
.team-copy .btn {
margin-top: 1rem
}
.team-media {
position: relative;
min-height: 680px;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow)
}
.team-media>img {
height: 100%;
min-height: 680px;
object-fit: cover;
animation: imageDrift 18s ease-in-out infinite
}
.team-media:after {
content: "";
position: absolute;
inset: auto 0 0;
height: 38%;
background: linear-gradient(transparent, rgba(41, 42, 44, .5));
pointer-events: none
}
.team-play {
position: absolute;
z-index: 2;
left: 2rem;
bottom: 2rem;
display: flex;
align-items: center;
gap: .85rem;
padding: .7rem 1rem .7rem .72rem;
border: 0;
border-radius: 999px;
background: #fff;
color: var(--ink);
font-size: .65rem;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
transition: transform .3s var(--ease)
}
.team-play:hover {
transform: translateY(-4px)
}
.team-play>img {
width: 38px;
height: 38px;
padding: 10px;
border-radius: 50%;
background: var(--orange)
}
.media-note {
position: absolute;
z-index: 2;
right: 1.5rem;
top: 1.5rem;
padding: .55rem .8rem;
border-radius: 999px;
background: rgba(255, 255, 255, .9);
font-size: .56rem;
font-weight: 800;
letter-spacing: .11em;
text-transform: uppercase
}
.compact-head {
margin-bottom: clamp(2.5rem, 5vw, 5rem)
}
.quality-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--line);
border-left: 1px solid var(--line)
}
.quality-card {
position: relative;
min-height: 330px;
padding: 2rem;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: #fff;
transition: background .35s, transform .35s var(--ease)
}
.quality-card:hover {
z-index: 1;
background: var(--soft);
transform: translateY(-5px)
}
.quality-card>img {
width: 34px;
height: 34px;
margin-bottom: 4.5rem
}
.quality-card>span {
position: absolute;
right: 1.5rem;
top: 1.5rem;
color: var(--orange);
font-size: .6rem;
font-weight: 800
}
.quality-card h3 {
margin: 0 0 .7rem;
font-size: clamp(1.6rem, 2.2vw, 2.25rem);
font-weight: 500
}
.quality-card p {
margin: 0;
color: var(--muted);
font-size: .86rem
}
.brand-band {
overflow: hidden;
padding: 1rem 0;
background: var(--orange);
color: #fff;
transform: rotate(-1deg);
transform-origin: center
}
.brand-band-track {
display: flex;
width: max-content;
gap: 1.2rem;
transform: translateX(-50%);
animation: bandRight 28s linear infinite
}
.brand-band-track span {
display: flex;
align-items: center;
gap: .8rem;
font-size: clamp(2.6rem, 5vw, 6rem);
font-weight: 600;
letter-spacing: -.06em;
white-space: nowrap
}
.brand-band-track img {
width: 70px;
height: 70px;
object-fit: contain;
filter: brightness(0) invert(1)
}
.promise-band {
overflow: hidden;
border-block: 1px solid var(--line);
background: #fff
}
.promise-band>div {
display: flex;
width: max-content;
animation: bandLeft 34s linear infinite
}
.promise-band span {
display: flex;
align-items: center;
gap: 2rem;
padding: 1.1rem 2rem;
color: var(--ink);
font-size: .66rem;
font-weight: 700;
letter-spacing: .11em;
text-transform: uppercase;
white-space: nowrap
}
.promise-band span:after {
content: "●";
color: var(--orange);
font-size: .5rem
}
.testimonial-shell {
overflow: hidden
}
.testimonial-track {
display: flex;
transition: transform .7s var(--ease)
}
.testimonial-card {
flex: 0 0 100%;
display: grid;
grid-template-columns: .55fr 1.7fr .65fr;
gap: clamp(1.5rem, 4vw, 4rem);
align-items: start;
padding: clamp(2rem, 5vw, 4rem) 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line)
}
.review-label {
color: var(--orange2);
font-size: .61rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase
}
.testimonial-card blockquote {
margin: 0;
font-size: clamp(1.65rem, 3.3vw, 3.8rem);
font-weight: 500;
line-height: 1.08;
letter-spacing: -.045em
}
.testimonial-card>div {
display: grid;
gap: .35rem
}
.testimonial-card strong {
font-size: .82rem
}
.testimonial-card>div span {
color: var(--muted);
font-size: .72rem
}
.testimonial-controls {
display: flex;
align-items: center;
justify-content: flex-end;
gap: .9rem;
padding-top: 1.2rem
}
.testimonial-controls button {
width: 48px;
height: 48px;
border: 1px solid var(--line);
border-radius: 50%;
background: #fff;
transition: background .3s, color .3s, border-color .3s
}
.testimonial-controls button:hover {
background: var(--orange);
color: #fff;
border-color: var(--orange)
}
.review-count {
min-width: 58px;
text-align: center;
color: var(--muted);
font-size: .65rem;
font-weight: 700;
letter-spacing: .1em
}
.stats-timeline {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
padding-top: 2rem
}
.stats-timeline:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 2.5rem;
height: 1px;
background: var(--line)
}
.stat-point {
position: relative;
padding-top: 3.2rem
}
.stat-dot {
position: absolute;
z-index: 1;
left: 0;
top: 0;
width: 1rem;
height: 1rem;
border: 4px solid var(--soft);
border-radius: 50%;
background: var(--orange);
transform: translateY(.02rem)
}
.stat-point strong {
display: block;
color: var(--ink);
font-size: clamp(3.2rem, 6vw, 7rem);
font-weight: 500;
line-height: 1;
letter-spacing: -.07em
}
.stat-point p {
margin: .65rem 0 0;
color: var(--muted);
font-size: .72rem;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase
}
.home-contact-section {
background: #fff
}
.home-contact-title {
margin: 0;
font-size: clamp(3rem, 6vw, 6.8rem);
font-weight: 500;
line-height: .92;
letter-spacing: -.07em
}
.home-contact-title em {
color: var(--orange)
}
.instagram-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
margin-bottom: clamp(2.5rem, 5vw, 5rem)
}
.instagram-head>div {
display: grid;
grid-template-columns: minmax(120px, .45fr) 1.4fr;
gap: 2rem;
align-items: start
}
.instagram-head .display {
margin: 0
}
.instagram-head .btn img {
width: 18px;
height: 18px
}
.instagram-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: .8rem
}
.instagram-tile {
position: relative;
aspect-ratio: 1;
overflow: hidden;
border-radius: 1rem;
background: var(--soft2)
}
.instagram-tile>img {
height: 100%;
object-fit: cover;
transition: transform .8s var(--ease), filter .5s
}
.instagram-tile>span {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background: rgba(243, 106, 33, .82);
opacity: 0;
transition: opacity .35s
}
.instagram-tile>span img {
width: 30px;
height: 30px;
filter: brightness(0) invert(1)
}
.instagram-tile:hover>img {
transform: scale(1.08);
filter: saturate(.75)
}
.instagram-tile:hover>span {
opacity: 1
}
.mini-icon img {
width: 30px;
height: 30px;
object-fit: contain
}
[data-reveal] {
opacity: 0;
transform: translateY(45px);
transition: opacity .8s var(--ease), transform .8s var(--ease)
}
[data-reveal].visible {
opacity: 1;
transform: none
}
[data-delay="1"] {
transition-delay: .1s
}
[data-delay="2"] {
transition-delay: .2s
}
@media(max-width:1180px) {
.desktop-nav {
display: none
}
.header {
grid-template-columns: auto 1fr auto
}
.header-actions {
justify-self: end
}
.request-btn {
display: none
}
.mini-services {
grid-template-columns: repeat(2, 1fr)
}
}
@media(max-width:900px) {
.hero,
.subhero {
grid-template-columns: 1fr;
min-height: 0
}
.hero-copy,
.subhero-copy {
min-height: 690px
}
.hero-media,
.subhero-media {
min-height: 78vw;
border-radius: 0
}
.section-head {
grid-template-columns: 1fr;
gap: 1rem
}
.intro-grid,
.compare,
.about-layout,
.contact-layout {
grid-template-columns: 1fr
}
.intro-media {
min-height: 70vw
}
.service-row {
grid-template-columns: 45px 1fr 48px
}
.service-row p {
display: none
}
.service-preview {
display: none
}
.duo {
grid-template-columns: 1fr
}
.teaser {
min-height: 76vw
}
.steps {
grid-template-columns: repeat(2, 1fr)
}
.project-card:nth-child(n) {
grid-column: span 6;
margin-top: 0
}
.about-sticky {
position: static
}
.about-sticky img {
aspect-ratio: 16/10
}
.hero-side {
display: none
}
}
@media(max-width:620px) {
:root {
--radius: 80px
}
.header {
min-height: 70px
}
.brand img {
width: 44px;
height: 44px
}
.brand-text span {
display: none
}
.page {
padding-top: 70px
}
.hero-copy,
.subhero-copy {
min-height: 620px
}
.hero-title {
font-size: clamp(3.5rem, 18vw, 5.2rem)
}
.subhero h1 {
font-size: clamp(3.2rem, 15vw, 5rem)
}
.hero-media,
.subhero-media {
min-height: 100vw
}
.hero-chip {
max-width: 220px
}
.facts {
grid-template-columns: 1fr
}
.service-row {
min-height: 96px
}
.service-row h3 {
font-size: 1.45rem
}
.service-arrow {
width: 42px;
height: 42px
}
.teaser {
min-height: 112vw
}
.mini-services {
grid-template-columns: 1fr
}
.gallery {
grid-template-columns: 1fr;
grid-auto-rows: auto
}
.gallery-item:nth-child(n) {
grid-column: auto;
grid-row: auto;
aspect-ratio: 4/3
}
.steps {
grid-template-columns: 1fr
}
.step {
min-height: 260px
}
.step h3 {
margin-top: 3rem
}
.project-grid {
grid-template-columns: 1fr
}
.project-card:nth-child(n) {
grid-column: auto
}
.project-card:nth-child(even) .project-image {
aspect-ratio: 4/5
}
.benefits {
grid-template-columns: 1fr
}
.benefit:nth-child(n) {
padding: 1.25rem 0;
border-left: 0
}
.form-grid {
grid-template-columns: 1fr
}
.field.full {
grid-column: auto
}
.lightbox figure {
grid-template-columns: 1fr
}
.lightbox figcaption {
writing-mode: horizontal-tb
}
}
@media(max-width:1180px) {
.home-service-grid {
grid-template-columns: repeat(2, 1fr)
}
.quality-grid {
grid-template-columns: repeat(2, 1fr)
}
.instagram-grid {
grid-template-columns: repeat(3, 1fr)
}
}
@media(max-width:900px) {
.team-layout {
grid-template-columns: 1fr
}
.team-media,
.team-media>img {
min-height: 620px
}
.testimonial-card {
grid-template-columns: 1fr
}
.testimonial-card blockquote {
max-width: 760px
}
.stats-timeline {
grid-template-columns: repeat(2, 1fr);
gap: 2rem
}
.stats-timeline:before {
display: none
}
.stat-point {
padding: 1.3rem 0;
border-top: 1px solid var(--line)
}
.stat-dot {
top: -.5rem
}
.instagram-head {
display: grid
}
.instagram-head>div {
grid-template-columns: 1fr
}
.instagram-head .btn {
justify-self: start
}
}
@media(max-width:620px) {
.home-service-grid,
.quality-grid,
.stats-timeline {
grid-template-columns: 1fr
}
.home-service-card {
min-height: 300px
}
.team-media,
.team-media>img {
min-height: 112vw
}
.team-play {
left: 1rem;
bottom: 1rem
}
.media-note {
right: 1rem;
top: 1rem
}
.quality-grid {
border-left: 0
}
.quality-card {
min-height: 270px;
border-left: 0
}
.quality-card>img {
margin-bottom: 3rem
}
.brand-band-track img {
width: 48px;
height: 48px
}
.testimonial-card blockquote {
font-size: 1.6rem
}
.testimonial-controls {
justify-content: space-between
}
.instagram-grid {
grid-template-columns: repeat(2, 1fr);
gap: .55rem
}
.instagram-tile {
border-radius: .75rem
}
.home-contact-title {
font-size: clamp(3rem, 14vw, 4.8rem)
}
} .home-nk {
padding-top: 0;
background: #fff
}
.home-legacy {
display: none !important
}
body[data-page="home"] .header {
min-height: 0;
padding: 1.35rem 2rem;
background: transparent;
border: 0;
box-shadow: none;
backdrop-filter: none;
color: #fff
}
body[data-page="home"] .header.scrolled {
min-height: 0;
padding: .72rem 2rem;
background: rgba(20, 20, 20, .76);
border: 0;
box-shadow: none;
backdrop-filter: blur(16px)
}
body[data-page="home"] .brand {
padding: .55rem .7rem;
background: #fff;
border-radius: 2px;
box-shadow: 0 12px 34px rgba(0, 0, 0, .14)
}
body[data-page="home"] .brand img,
body[data-page="home"] .header.scrolled .brand img {
width: 82px;
height: 58px;
object-fit: contain
}
body[data-page="home"] .brand-text,
body[data-page="home"] .desktop-nav,
body[data-page="home"] .request-btn {
display: none
}
body[data-page="home"] .header-actions {
justify-self: end
}
.nk-hero {
position: relative;
min-height: 100svh;
display: grid;
place-items: center;
overflow: hidden;
background: #171717;
color: #fff
}
.nk-hero-image {
position: absolute;
inset: 0;
height: 110%;
object-fit: cover;
object-position: center;
animation: nkHeroDrift 18s ease-in-out infinite
}
.nk-hero-shade {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(10, 10, 10, .44), rgba(10, 10, 10, .67)), linear-gradient(90deg, rgba(0, 0, 0, .25), transparent 55%)
}
.nk-hero-inner {
position: relative;
z-index: 2;
width: min(1120px, calc(100% - 2.4rem));
padding: 10rem 1rem 5rem;
text-align: center
}
.nk-overline,
.nk-section-label {
margin: 0 0 1.15rem;
color: var(--orange);
font-size: .68rem;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase
}
.nk-hero .nk-overline {
color: #fff
}
.nk-hero h1 {
margin: 0 auto;
max-width: 1050px;
font-size: clamp(3.4rem, 6.4vw, 7.3rem);
font-weight: 400;
line-height: 1.04;
letter-spacing: -.045em
}
.nk-hero-lead {
max-width: 680px;
margin: 2rem auto 0;
color: rgba(255, 255, 255, .82);
font-size: clamp(1rem, 1.45vw, 1.22rem)
}
.nk-hero-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
margin-top: 2.3rem
}
.nk-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 56px;
padding: .9rem 2rem;
border: 0;
border-radius: 5px;
background: var(--orange);
color: #fff;
font-size: .78rem;
font-weight: 600;
letter-spacing: .03em;
transition: transform .3s, background .3s, box-shadow .3s
}
.nk-btn:hover {
background: var(--orange2);
transform: translateY(-3px);
box-shadow: 0 16px 34px rgba(243, 106, 33, .24)
}
.nk-btn-light {
min-width: 242px;
background: #fff;
color: #252525
}
.nk-btn-light:hover {
background: var(--orange);
color: #fff
}
.nk-text-link {
font-size: .88rem
}
.nk-text-link span {
display: inline-block;
margin-left: .35rem;
color: var(--orange);
transition: transform .3s
}
.nk-text-link:hover span {
transform: translate(4px, -4px)
}
.nk-trust {
display: flex;
align-items: center;
justify-content: center;
gap: .8rem;
margin-top: 3rem;
color: rgba(255, 255, 255, .75);
font-size: .62rem;
font-weight: 600;
letter-spacing: .09em;
text-transform: uppercase
}
.nk-trust i {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--orange)
}
.nk-scroll {
position: absolute;
z-index: 2;
right: 2rem;
bottom: 2rem;
display: flex;
align-items: center;
gap: .65rem;
color: #fff;
font-size: .62rem;
letter-spacing: .13em;
text-transform: uppercase
}
.nk-scroll i {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border: 1px solid rgba(255, 255, 255, .55);
border-radius: 50%;
font-style: normal;
animation: nkBounce 2s ease-in-out infinite
}
@keyframes nkHeroDrift {
0%,
100% {
transform: scale(1.03) translate3d(0, 0, 0)
}
50% {
transform: scale(1.08) translate3d(-1%, 1%, 0)
}
}
@keyframes nkBounce {
0%,
100% {
transform: translateY(0)
}
50% {
transform: translateY(6px)
}
}
.nk-ticker {
position: relative;
z-index: 3;
overflow: hidden;
background: var(--orange);
color: #fff
}
.nk-ticker>div {
display: flex;
width: max-content;
padding: .75rem 0;
animation: ticker 34s linear infinite
}
.nk-ticker span {
display: flex;
align-items: center;
gap: 1.15rem;
padding-right: 1.15rem;
font-size: .62rem;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase
}
.nk-ticker span:after {
content: "•"
}
.nk-welcome {
display: grid;
grid-template-columns: .8fr 1.2fr;
gap: clamp(3rem, 8vw, 9rem);
align-items: center;
min-height: 780px;
padding: clamp(6rem, 10vw, 10rem) var(--pad);
background: #fff
}
.nk-welcome-copy {
max-width: 600px
}
.nk-welcome h2,
.nk-team h2,
.nk-centered-head h2,
.nk-contact-copy h2 {
margin: 0;
font-size: clamp(2.8rem, 5vw, 5.6rem);
font-weight: 400;
line-height: 1.02;
letter-spacing: -.05em
}
.nk-welcome h2 span,
.nk-centered-head h2 span {
color: var(--orange)
}
.nk-welcome-copy>p:not(.nk-section-label),
.nk-team-copy>p:not(.nk-section-label),
.nk-centered-head>p:not(.nk-section-label) {
max-width: 650px;
margin: 1.7rem 0 2rem;
color: #676767;
font-size: 1.02rem;
line-height: 1.75
}
.nk-welcome-media {
position: relative;
min-height: 580px
}
.nk-welcome-media>img {
height: 580px;
object-fit: cover;
border-radius: 8px
}
.nk-services,
.nk-quality,
.nk-reviews {
padding: clamp(6rem, 9vw, 9rem) var(--pad);
background: #f3f3f3
}
.nk-centered-head {
text-align: center
}
.nk-centered-head h2 {
margin-inline: auto
}
.nk-centered-head>p:not(.nk-section-label) {
margin-inline: auto
}
.nk-service-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.1rem;
width: min(980px, 100%);
margin: 4rem auto 2.4rem
}
.nk-service-card {
position: relative;
display: grid;
grid-template-columns: 52px 1fr auto;
gap: 1.35rem;
align-items: center;
min-height: 126px;
padding: 1.5rem 2rem;
background: #fff;
border-radius: 8px;
transition: transform .35s, box-shadow .35s, color .35s, background .35s
}
.nk-service-card:hover {
transform: translateY(-5px);
background: var(--orange);
color: #fff;
box-shadow: 0 20px 45px rgba(243, 106, 33, .18)
}
.nk-service-card>img {
width: 38px;
height: 38px;
object-fit: contain;
transition: filter .3s, transform .3s
}
.nk-service-card:hover>img {
filter: brightness(0) invert(1);
transform: rotate(-7deg)
}
.nk-service-card>span {
font-size: 1.05rem
}
.nk-service-card>small {
color: #aaa;
font-size: .62rem
}
.nk-service-card:hover>small {
color: #fff
}
.nk-center {
text-align: center
}
.nk-team {
display: grid;
grid-template-columns: .8fr 1.2fr;
gap: clamp(3rem, 8vw, 9rem);
align-items: center;
min-height: 760px;
padding: clamp(6rem, 10vw, 10rem) var(--pad);
background: #fff
}
.nk-team-copy {
max-width: 560px
}
.nk-team-collage {
position: relative;
min-height: 610px
}
.nk-team-tall {
position: absolute;
right: 0;
top: 0;
width: 55%;
height: 70%;
overflow: hidden;
border-radius: 8px
}
.nk-team-tall>img,
.nk-team-wide>img {
height: 100%;
object-fit: cover
}
.nk-team-wide {
position: absolute;
left: 0;
bottom: 0;
width: 78%;
height: 52%;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 22px 60px rgba(0, 0, 0, .18)
}
.nk-team-wide span {
position: absolute;
right: 1rem;
bottom: 1rem;
padding: .55rem .8rem;
background: rgba(255, 255, 255, .9);
border-radius: 4px;
font-size: .58rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase
}
.nk-play {
position: absolute;
z-index: 2;
left: 1rem;
bottom: 1rem;
display: flex;
align-items: center;
gap: .6rem;
padding: .55rem .8rem;
border: 0;
border-radius: 999px;
background: #fff;
font-size: .6rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase
}
.nk-play img {
width: 34px;
height: 34px;
padding: 8px;
border-radius: 50%;
background: var(--orange)
}
.nk-quality-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.1rem;
margin-top: 4rem
}
.nk-quality-grid article {
min-height: 240px;
padding: 2rem;
background: #fff;
border-radius: 8px;
text-align: center;
transition: transform .35s, box-shadow .35s
}
.nk-quality-grid article:hover {
transform: translateY(-7px);
box-shadow: 0 20px 45px rgba(0, 0, 0, .08)
}
.nk-quality-grid img {
width: 40px;
height: 40px;
margin: 2rem auto 2.6rem
}
.nk-quality-grid h3 {
margin: 0 0 .55rem;
font-size: 1.08rem;
font-weight: 500
}
.nk-quality-grid p {
margin: 0;
color: #777;
font-size: .83rem
}
.nk-review-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.2rem;
margin-top: 4rem
}
.nk-review-grid article {
display: flex;
flex-direction: column;
min-height: 370px;
padding: 2.2rem;
background: #fff;
border-radius: 18px
}
.nk-stars {
color: var(--orange);
font-size: 1rem;
letter-spacing: .18em
}
.nk-review-grid blockquote {
margin: 1.5rem 0;
font-size: 1rem;
line-height: 1.8
}
.nk-review-grid p {
margin: auto 0 0;
color: #999;
font-size: .64rem;
font-weight: 600;
letter-spacing: .09em;
text-transform: uppercase
}
.nk-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 5rem var(--pad);
background: #fff
}
.nk-stats article {
display: grid;
grid-template-columns: auto 1fr;
gap: .9rem;
align-items: center;
padding: 1rem 2rem;
border-right: 1px solid #e8e8e8
}
.nk-stats article:first-child {
padding-left: 0
}
.nk-stats article:last-child {
border: 0
}
.nk-stats strong {
font-size: clamp(2.9rem, 5vw, 5rem);
font-weight: 400;
line-height: 1;
letter-spacing: -.05em
}
.nk-stats span {
max-width: 110px;
color: #888;
font-size: .72rem;
line-height: 1.35
}
.nk-contact {
position: relative;
min-height: 820px;
display: grid;
place-items: center;
padding: 6rem var(--pad);
overflow: hidden;
background: #1d232b
}
.nk-contact-bg {
position: absolute;
inset: 0;
height: 110%;
object-fit: cover;
filter: grayscale(.65)
}
.nk-contact:after {
content: "";
position: absolute;
inset: 0;
background: rgba(19, 25, 32, .7)
}
.nk-contact-panel {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: .85fr 1.15fr;
gap: clamp(2rem, 6vw, 6rem);
width: min(1080px, 100%);
padding: clamp(2rem, 5vw, 4rem);
background: #fff;
border-radius: 18px
}
.nk-contact-copy h2 {
font-size: clamp(3rem, 5vw, 5.4rem)
}
.nk-contact-copy>p:not(.nk-section-label) {
color: #666;
line-height: 1.7
}
.nk-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem
}
.nk-form label {
display: grid;
gap: .35rem
}
.nk-form label>span {
font-size: .58rem;
font-weight: 700;
letter-spacing: .11em;
text-transform: uppercase;
color: #333
}
.nk-form label>span em {
margin-left: .35rem;
color: #a8a8a8;
font-style: normal;
font-weight: 600;
letter-spacing: .02em;
text-transform: none
}
.nk-form input,
.nk-form select,
.nk-form textarea {
width: 100%;
min-height: 54px;
padding: .9rem 1.05rem;
border: 1.5px solid transparent;
border-radius: 13px;
background: #f6f5f3;
color: #1d1d1d;
outline: 0;
transition: border-color .22s ease, background-color .22s ease, box-shadow .22s ease
}
.nk-form input::placeholder,
.nk-form textarea::placeholder {
color: #a3a19d
}
.nk-form input:hover,
.nk-form select:hover,
.nk-form textarea:hover {
background: #f0efec
}
.nk-form input:focus,
.nk-form select:focus,
.nk-form textarea:focus {
background: #fff;
border-color: var(--orange);
box-shadow: 0 0 0 4px rgba(243, 106, 33, .12)
}
.nk-form textarea {
min-height: 118px;
resize: vertical
}
.nk-form-wide {
grid-column: 1/-1
}
.nk-form .nk-btn {
grid-column: 1/-1;
justify-self: start;
margin-top: .4rem
}
.nk-contact-rule {
display: block;
width: 42px;
height: 3px;
margin: 1.3rem 0 1.5rem;
border-radius: 2px;
background: var(--orange)
}
.nk-contact-submit {
display: inline-flex;
align-items: center;
gap: .6rem;
width: 100%;
justify-content: center;
justify-self: stretch
}
.nk-contact-submit i {
font-size: 1.05rem
}
.nk-contact-privacy {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
grid-column: 1/-1;
margin: .9rem 0 0;
color: #9a9893;
font-size: .76rem;
text-align: center
}
.nk-contact-privacy i {
flex: 0 0 auto;
font-size: .9rem
}
.nk-select {
position: relative
}
.nk-select-native {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none
}
.nk-select-trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: .6rem;
width: 100%;
min-height: 54px;
padding: .9rem 1.05rem;
border: 1.5px solid transparent;
border-radius: 13px;
background: #f6f5f3;
color: #1d1d1d;
font: inherit;
text-align: left;
cursor: pointer;
transition: border-color .22s ease, background-color .22s ease, box-shadow .22s ease
}
.nk-select-trigger:hover {
background: #f0efec
}
.nk-select-trigger:focus-visible {
outline: 0;
background: #fff;
border-color: #ddd9d2;
box-shadow: 0 0 0 4px rgba(29, 29, 29, .06)
}
.nk-select.is-open .nk-select-trigger {
background: #fff;
border-color: #ddd9d2
}
.nk-select-value {
color: #1d1d1d
}
.nk-select-value.is-placeholder {
color: #a3a19d
}
.nk-select-trigger i {
flex: 0 0 auto;
color: #8a8a8a;
font-size: .85rem;
transition: transform .22s ease
}
.nk-select.is-open .nk-select-trigger i {
transform: rotate(180deg)
}
.nk-select-list {
position: absolute;
z-index: 20;
left: 0;
right: 0;
top: calc(100% + 8px);
max-height: 280px;
margin: 0;
padding: .4rem;
overflow-y: auto;
list-style: none;
background: #fff;
border: 1px solid #ececec;
border-radius: 13px;
box-shadow: 0 20px 44px rgba(20, 20, 20, .12)
}
.nk-select-list[hidden] {
display: none
}
.nk-select-list li {
padding: .65rem .8rem;
border-radius: 9px;
color: #333;
font-size: .92rem;
cursor: pointer;
transition: background-color .16s ease, color .16s ease
}
.nk-select-list li:hover,
.nk-select-list li.is-active {
background: rgba(243, 106, 33, .1);
color: var(--orange)
}
.nk-select-list li.is-selected {
color: var(--orange);
font-weight: 600
}
.nk-instagram {
padding: clamp(6rem, 9vw, 9rem) var(--pad);
background: #fff
}
.nk-instagram .nk-centered-head {
margin-bottom: 4rem
}
.nk-instagram-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: .8rem
}
.nk-instagram-grid a {
position: relative;
aspect-ratio: 1;
overflow: hidden;
border-radius: 6px;
background: #eee
}
.nk-instagram-grid a:nth-child(2),
.nk-instagram-grid a:nth-child(5) {
transform: translateY(1.5rem)
}
.nk-instagram-grid img {
height: 100%;
object-fit: cover;
transition: transform .7s, filter .4s
}
.nk-instagram-grid span {
position: absolute;
right: .7rem;
top: .7rem;
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: #fff;
color: var(--orange);
opacity: 0;
transform: scale(.7);
transition: .3s
}
.nk-instagram-grid a:hover img {
transform: scale(1.07);
filter: saturate(.8)
}
.nk-instagram-grid a:hover span {
opacity: 1;
transform: none
}
.footer {
background: #202020;
color: #fff
}
@media(max-width:1000px) {
.nk-welcome,
.nk-team {
grid-template-columns: 1fr
}
.nk-welcome-copy,
.nk-team-copy {
max-width: 760px
}
.nk-service-grid {
grid-template-columns: 1fr
}
.nk-quality-grid,
.nk-stats {
grid-template-columns: repeat(2, 1fr)
}
.nk-stats article:nth-child(2) {
border-right: 0
}
.nk-stats article:nth-child(n+3) {
border-top: 1px solid #eee
}
.nk-review-grid {
grid-template-columns: 1fr
}
.nk-review-grid article {
min-height: 270px
}
.nk-contact-panel {
grid-template-columns: 1fr
}
.nk-instagram-grid {
grid-template-columns: repeat(3, 1fr)
}
}
@media(max-width:620px) {
body[data-page="home"] .header,
body[data-page="home"] .header.scrolled {
padding: .65rem .8rem
}
body[data-page="home"] .brand {
padding: .35rem .45rem
}
body[data-page="home"] .brand img,
body[data-page="home"] .header.scrolled .brand img {
width: 58px;
height: 40px
}
.nk-hero-inner {
padding-top: 8rem
}
.nk-hero h1 {
font-size: clamp(3rem, 14vw, 5.1rem);
line-height: .97
}
.nk-hero-lead {
font-size: .92rem
}
.nk-trust {
flex-wrap: wrap
}
.nk-scroll {
right: 1rem;
bottom: 1rem
}
.nk-welcome,
.nk-team,
.nk-services,
.nk-quality,
.nk-reviews,
.nk-instagram {
padding: 5.5rem 1rem
}
.nk-welcome-media {
min-height: 480px
}
.nk-welcome-media>img {
height: 440px
}
.nk-service-card {
grid-template-columns: 44px 1fr auto;
min-height: 105px;
padding: 1.15rem
}
.nk-service-card>img {
width: 32px;
height: 32px
}
.nk-team-collage {
min-height: 520px
}
.nk-team-tall {
width: 66%;
height: 68%
}
.nk-team-wide {
width: 88%;
height: 48%
}
.nk-quality-grid {
grid-template-columns: 1fr 1fr;
gap: .7rem
}
.nk-quality-grid article {
min-height: 210px;
padding: 1.2rem .8rem
}
.nk-quality-grid img {
margin: 1.5rem auto 2rem
}
.nk-stats {
grid-template-columns: 1fr 1fr;
padding: 3rem 1rem
}
.nk-stats article {
display: block;
padding: 1.4rem 1rem
}
.nk-stats article:nth-child(odd) {
padding-left: 0
}
.nk-stats strong {
display: block
}
.nk-stats span {
display: block;
margin-top: .4rem
}
.nk-contact {
padding: 4rem 1rem
}
.nk-contact-panel {
padding: 1.5rem;
border-radius: 12px
}
.nk-form {
grid-template-columns: 1fr
}
.nk-form-wide,
.nk-form .nk-btn {
grid-column: auto
}
.nk-instagram-grid {
grid-template-columns: 1fr 1fr;
gap: .55rem
}
.nk-instagram-grid a:nth-child(2),
.nk-instagram-grid a:nth-child(5) {
transform: none
}
.footer {
padding-inline: 1rem
}
} :root {
--content: 1120px;
--content-wide: 1240px;
--font-ui: "Montserrat", Arial, sans-serif;
--motion: cubic-bezier(.22, .75, .16, 1)
}
html,
body,
button,
input,
select,
textarea {
font-family: var(--font-ui) !important
}
em,
.display em,
.hero-title em,
.subhero h1 em,
.cta-block h2 em,
.intro-copy h2 em,
.compare-copy h2 em,
.about-copy h1 em,
.contact-info h1 em {
font-family: inherit !important;
font-style: normal !important;
font-weight: inherit
}
body {
font-weight: 400;
letter-spacing: 0
}
.section {
padding-inline: max(1.25rem, calc((100vw - var(--content))/2))
}
.header {
padding-inline: max(1.25rem, calc((100vw - var(--content-wide))/2))
}
body[data-page="home"] .header,
body[data-page="home"] .header.scrolled {
padding-inline: max(1.25rem, calc((100vw - var(--content-wide))/2))
}
.footer {
padding-inline: max(1.25rem, calc((100vw - var(--content))/2))
}
.display {
max-width: 850px;
font-size: clamp(2.55rem, 4.5vw, 5.35rem);
font-weight: 400;
line-height: .98;
letter-spacing: -.045em
}
.section-head {
grid-template-columns: 180px minmax(0, 1fr);
gap: clamp(2rem, 5vw, 5rem);
max-width: var(--content);
margin-inline: auto
}
.lead {
font-size: clamp(1rem, 1.25vw, 1.18rem);
line-height: 1.75
}
.hero-title,
.subhero h1,
.about-copy h1,
.contact-info h1 {
font-weight: 600;
letter-spacing: -.048em
}
.cta-block h2 {
font-weight: 400;
letter-spacing: -.048em
}
.subhero h1 {
font-size: clamp(3.2rem, 5.7vw, 6.5rem)
}
.request-btn,
.btn {
font-weight: 600;
letter-spacing: .045em;
text-transform: none
}
.desktop-nav a {
font-weight: 600;
letter-spacing: .075em
}
.kicker,
.eyebrow,
.nk-section-label,
.nk-overline {
font-weight: 600;
letter-spacing: .145em
}
.nk-hero-inner {
width: min(920px, calc(100% - 2.5rem))
}
.nk-hero h1 {
max-width: 900px;
font-size: clamp(3.5rem, 5.65vw, 6.45rem);
font-weight: 400;
line-height: 1.01;
letter-spacing: -.042em
}
.nk-hero-lead {
max-width: 610px;
font-size: clamp(.98rem, 1.18vw, 1.12rem);
line-height: 1.7
}
.nk-welcome,
.nk-team {
width: min(var(--content), calc(100% - 2.5rem));
margin-inline: auto;
padding-inline: 0;
gap: clamp(3rem, 7vw, 7rem)
}
.nk-services>*,
.nk-quality>*,
.nk-reviews>*,
.nk-instagram>* {
width: min(var(--content), 100%);
margin-inline: auto
}
.nk-service-grid {
width: min(900px, 100%)
}
.nk-welcome h2,
.nk-team h2,
.nk-centered-head h2,
.nk-contact-copy h2 {
font-size: clamp(2.75rem, 4.3vw, 4.9rem);
font-weight: 400;
line-height: 1.02;
letter-spacing: -.042em
}
.nk-welcome-copy>p:not(.nk-section-label),
.nk-team-copy>p:not(.nk-section-label),
.nk-centered-head>p:not(.nk-section-label) {
font-size: 1rem;
line-height: 1.72
}
.nk-centered-head {
max-width: 820px
}
.nk-quality-grid,
.nk-review-grid,
.nk-stats {
max-width: var(--content);
margin-inline: auto
}
.nk-quality-grid {
gap: 1rem
}
.nk-review-grid {
gap: 1.25rem
}
.nk-stats {
padding-inline: 0
}
.nk-contact-panel {
width: min(1040px, 100%)
}
.nk-instagram-grid {
max-width: var(--content)
}
.nk-service-card,
.nk-quality-grid article,
.nk-review-grid article,
.nk-contact-panel,
.nk-instagram-grid a,
.nk-team-tall,
.nk-team-wide,
.nk-welcome-media>img {
border-radius: 7px
}
.nk-review-grid article {
border-radius: 12px
}
.nk-service-card,
.nk-quality-grid article,
.nk-review-grid article,
.nk-instagram-grid a,
.btn,
.nk-btn,
.request-btn {
transition-duration: .55s;
transition-timing-function: var(--motion)
}
[data-reveal] {
opacity: 0;
filter: blur(5px);
transform: translate3d(0, 32px, 0);
transition: opacity .95s var(--motion), transform .95s var(--motion), filter .95s var(--motion)
}
[data-reveal].visible {
opacity: 1;
filter: none;
transform: none
}
[data-delay="1"] {
transition-delay: .12s
}
[data-delay="2"] {
transition-delay: .24s
}
.nk-quality-item[data-reveal] {
filter: none;
opacity: 0;
transform: translate3d(72px, 0, 0);
transition: none;
will-change: transform, opacity
}
.nk-quality-item[data-reveal].visible {
transform: none
}
.scroll-parallax {
--parallax-y: 0px;
will-change: transform;
transition: transform .12s linear !important
}
.nk-hero-image.scroll-parallax {
animation: none !important;
transform: translate3d(0, var(--parallax-y), 0) scale(1.12)
}
.nk-contact-bg.scroll-parallax {
transform: translate3d(0, var(--parallax-y), 0) scale(1.12)
}
.nk-welcome-media>img.scroll-parallax {
height: 660px;
margin-top: -40px;
transform: translate3d(0, var(--parallax-y), 0) scale(1.025)
}
.nk-team-tall>img.scroll-parallax,
.nk-team-wide>img.scroll-parallax {
height: 118%;
margin-top: -9%;
transform: translate3d(0, var(--parallax-y), 0) scale(1.04)
}
.nk-instagram-grid img.scroll-parallax {
height: 116%;
margin-top: -8%;
transform: translate3d(0, var(--parallax-y), 0) scale(1.03)
}
.hero-media img.scroll-parallax,
.subhero-media img.scroll-parallax,
.cta-image img.scroll-parallax,
.intro-media img.scroll-parallax {
height: 118%;
margin-top: -9%;
animation: none !important;
transform: translate3d(0, var(--parallax-y), 0) scale(1.04)
}
@media(max-width:1000px) {
.section-head {
grid-template-columns: 1fr;
gap: 1rem
}
.nk-welcome,
.nk-team {
width: min(760px, calc(100% - 2.5rem))
}
.nk-centered-head {
max-width: 720px
}
.nk-stats {
padding-inline: 1.25rem
}
}
@media(max-width:620px) {
:root {
--content: 100%;
--content-wide: 100%
}
.section {
padding-inline: 1rem
}
body[data-page="home"] .header,
body[data-page="home"] .header.scrolled {
padding-inline: .8rem
}
.nk-hero-inner {
width: calc(100% - 1.5rem)
}
.nk-hero h1 {
font-size: clamp(3rem, 13vw, 4.7rem)
}
.nk-welcome,
.nk-team {
width: calc(100% - 2rem)
}
.nk-welcome h2,
.nk-team h2,
.nk-centered-head h2,
.nk-contact-copy h2 {
font-size: clamp(2.55rem, 11vw, 4rem)
}
.nk-services>*,
.nk-quality>*,
.nk-reviews>*,
.nk-instagram>* {
width: 100%
}
.nk-stats {
padding-inline: 1rem
}
.nk-welcome-media>img.scroll-parallax {
height: 520px;
margin-top: -40px
}
.footer {
padding-inline: 1rem
}
}
@media(prefers-reduced-motion:reduce) {
*,
*:before,
*:after {
scroll-behavior: auto !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important
}
[data-reveal] {
opacity: 1;
filter: none;
transform: none
}
.scroll-parallax {
transform: none !important
}
} :root {
--container-max: 1120px;
--container-padding: 40px;
--section-space: 120px;
--space-xs: 8px;
--space-sm: 12px;
--space-md: 20px;
--space-lg: 32px;
--space-xl: 48px;
--space-2xl: 72px;
--radius-sm: 7px;
--radius-md: 12px;
--radius-lg: 1.6rem;
--card-radius: 7px;
--card-padding: 28px;
--grid-gap: 24px;
--grid-gap-lg: 32px;
--button-height: 52px;
--button-padding-x: 24px;
--h1-size: clamp(3.2rem, 5.7vw, 6.5rem);
--h2-size: clamp(2.75rem, 4.3vw, 4.9rem);
--h3-size: clamp(1.45rem, 2vw, 2rem);
--body-large: 1.125rem;
--body-size: 1rem;
--body-small: .875rem;
--text-width-sm: 480px;
--text-width-md: 620px;
--text-width-lg: 760px;
--content: var(--container-max);
--content-wide: var(--container-max);
}
.section,
.footer,
.nk-services,
.nk-quality,
.nk-reviews,
.nk-instagram,
.nk-contact {
padding-inline: max(var(--container-padding), calc((100vw - var(--container-max)) / 2));
}
.section {
padding-block: var(--section-space);
}
.header,
body[data-page="home"] .header,
body[data-page="home"] .header.scrolled {
padding-inline: max(var(--container-padding), calc((100vw - var(--container-max)) / 2));
}
.section-head,
.nk-centered-head,
.nk-quality-grid,
.nk-review-grid,
.nk-stats,
.nk-instagram-grid,
.nk-contact-panel {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
}
.nk-welcome,
.nk-team {
width: min(var(--container-max), calc(100% - (var(--container-padding) * 2)));
margin-inline: auto;
padding-block: var(--section-space);
padding-inline: 0;
}
.nk-services,
.nk-quality,
.nk-reviews,
.nk-instagram {
padding-block: var(--section-space);
}
.section-head {
gap: var(--grid-gap-lg);
margin-bottom: var(--space-2xl);
}
.section-head .lead,
.nk-centered-head>p:not(.nk-section-label),
.nk-welcome-copy>p:not(.nk-section-label),
.nk-team-copy>p:not(.nk-section-label) {
max-width: var(--text-width-md);
}
.kicker,
.eyebrow,
.nk-section-label,
.nk-overline {
margin-bottom: var(--space-sm);
font-size: .68rem;
line-height: 1.4;
letter-spacing: .145em;
}
.display,
.nk-welcome h2,
.nk-team h2,
.nk-centered-head h2,
.nk-contact-copy h2 {
font-size: var(--h2-size);
line-height: 1.02;
letter-spacing: -.042em;
}
.subhero h1,
.about-copy h1,
.contact-info h1,
.cta-block h2 {
font-size: var(--h1-size);
}
.home-service-grid,
.nk-service-grid,
.quality-grid,
.nk-quality-grid,
.nk-review-grid,
.instagram-grid,
.nk-instagram-grid,
.project-grid {
gap: var(--grid-gap);
}
.home-service-card {
min-height: 360px;
padding: var(--card-padding);
}
.home-service-card h3,
.nk-service-card h3 {
font-size: var(--h3-size);
line-height: 1.12;
}
.nk-service-card,
.nk-quality-grid article,
.nk-review-grid article,
.nk-contact-panel,
.nk-instagram-grid a,
.nk-team-tall,
.nk-team-wide,
.nk-welcome-media>img {
border-radius: var(--card-radius);
}
.nk-review-grid article {
border-radius: var(--radius-md);
}
.request-btn,
.btn,
.nk-btn {
min-height: var(--button-height);
padding-inline: var(--button-padding-x);
}
.form-grid,
.nk-form {
gap: var(--space-md);
}
.field input,
.field select,
.field textarea,
.nk-form input,
.nk-form select,
.nk-form textarea {
min-height: 52px;
}
@media (max-width: 1199px) {
:root {
--container-padding: 28px;
--section-space: 88px;
}
}
@media (max-width: 900px) {
.section-head {
grid-template-columns: 1fr;
gap: var(--space-md);
}
.home-service-card {
min-height: 300px;
}
}
@media (max-width: 640px) {
:root {
--container-padding: 18px;
--section-space: 64px;
--card-padding: 20px;
--grid-gap: 12px;
--grid-gap-lg: 20px;
--space-2xl: 48px;
}
.section,
.footer,
.nk-services,
.nk-quality,
.nk-reviews,
.nk-instagram,
.nk-contact,
.header,
body[data-page="home"] .header,
body[data-page="home"] .header.scrolled {
padding-inline: var(--container-padding);
}
.nk-welcome,
.nk-team {
width: calc(100% - (var(--container-padding) * 2));
}
} body[data-page="home"] .nk-hero-shade {
background: linear-gradient(90deg, rgba(10, 12, 13, .76) 0%, rgba(10, 12, 13, .48) 48%, rgba(10, 12, 13, .16) 78%), linear-gradient(0deg, rgba(10, 12, 13, .3), transparent 45%);
}
body[data-page="home"] .nk-hero-inner {
width: min(1120px, calc(100% - 3rem));
padding: 10rem 0 5rem;
text-align: left;
}
body[data-page="home"] .nk-hero h1 {
max-width: 790px;
margin: 0;
font-size: clamp(3.5rem, 5.8vw, 6rem);
line-height: .94;
letter-spacing: -.04em;
text-wrap: balance;
}
body[data-page="home"] .nk-hero-lead {
margin: 1.75rem 0 0;
max-width: 580px;
color: rgba(255, 255, 255, .86)
}
body[data-page="home"] .nk-hero-actions {
flex-direction: row;
align-items: center;
gap: 1.5rem;
margin-top: 2rem
}
body[data-page="home"] .nk-trust {
justify-content: flex-start;
margin-top: 2.5rem
}
body[data-page="home"] .nk-ticker {
border-block: 1px solid #eee;
background: #fff
}
body[data-page="home"] .nk-ticker div {
animation-duration: 34s
}
body[data-page="home"] .nk-welcome,
body[data-page="home"] .nk-team {
min-height: 0;
padding-block: clamp(6rem, 9vw, 8.5rem)
}
body[data-page="home"] .nk-welcome {
grid-template-columns: .9fr 1.1fr;
gap: clamp(3rem, 7vw, 7rem)
}
body[data-page="home"] .nk-welcome-media {
min-height: 520px
}
body[data-page="home"] .nk-welcome-media>img {
height: 520px;
border-radius: 12px
}
body[data-page="home"] .nk-services {
padding-block: clamp(6rem, 9vw, 8rem);
background: #f4f2ed
}
body[data-page="home"] .nk-services .nk-centered-head,
body[data-page="home"] .nk-quality .nk-centered-head,
body[data-page="home"] .nk-reviews .nk-centered-head,
body[data-page="home"] .nk-instagram .nk-centered-head {
max-width: 1120px;
text-align: left
}
body[data-page="home"] .nk-services .nk-centered-head h2,
body[data-page="home"] .nk-quality .nk-centered-head h2,
body[data-page="home"] .nk-reviews .nk-centered-head h2,
body[data-page="home"] .nk-instagram .nk-centered-head h2 {
margin-inline: 0;
max-width: 760px
}
body[data-page="home"] .nk-services .nk-centered-head>p:not(.nk-section-label),
body[data-page="home"] .nk-quality .nk-centered-head>p:not(.nk-section-label),
body[data-page="home"] .nk-reviews .nk-centered-head>p:not(.nk-section-label),
body[data-page="home"] .nk-instagram .nk-centered-head>p:not(.nk-section-label) {
margin-inline: 0
}
body[data-page="home"] .nk-service-grid {
grid-template-columns: repeat(4, 1fr);
gap: 1px;
width: min(1120px, 100%);
margin: 3.25rem auto 2.25rem;
background: #d9d5cd;
border: 1px solid #d9d5cd
}
body[data-page="home"] .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
}
body[data-page="home"] .nk-service-card>img {
grid-column: 1;
width: 34px;
height: 34px
}
body[data-page="home"] .nk-service-card>span {
grid-column: 1/-1;
align-self: end;
font-size: 1rem;
font-weight: 600
}
body[data-page="home"] .nk-service-card>small {
position: absolute;
right: 1.25rem;
top: 1.25rem
}
body[data-page="home"] .nk-service-card:hover {
transform: none;
box-shadow: none
}
body[data-page="home"] .nk-team {
width: 100%;
max-width: none;
padding-inline: max(1.25rem, calc((100vw - 1120px)/2));
grid-template-columns: .72fr 1.28fr;
background: #17191a;
color: #fff
}
body[data-page="home"] .nk-team-copy>p:not(.nk-section-label) {
color: rgba(255, 255, 255, .68)
}
body[data-page="home"] .nk-team .nk-btn {
background: var(--orange);
color: #fff
}
body[data-page="home"] .nk-team .nk-btn:hover {
background: var(--orange2)
}
body[data-page="home"] .nk-team .nk-play {
color: #17191a
}
body[data-page="home"] .nk-team-collage {
min-height: 570px
}
body[data-page="home"] .nk-team-wide {
box-shadow: 0 24px 60px rgba(0, 0, 0, .28)
}
body[data-page="home"] .nk-quality {
background: #fff
}
body[data-page="home"] .nk-quality-grid {
gap: 0;
margin-top: 3.5rem;
border-block: 1px solid #dedbd5
}
body[data-page="home"] .nk-quality-grid article {
min-height: 260px;
padding: 2rem;
border: 0;
border-right: 1px solid #dedbd5;
border-radius: 0;
background: transparent;
box-shadow: none
}
body[data-page="home"] .nk-quality-grid article:last-child {
border-right: 0
}
body[data-page="home"] .nk-quality-grid article:hover {
transform: none;
background: #f7f5f1
}
body[data-page="home"] .nk-reviews {
background: #f4f2ed
}
body[data-page="home"] .nk-review-grid {
margin-top: 3.25rem
}
body[data-page="home"] .nk-review-grid article {
border: 0;
border-radius: 12px;
box-shadow: none
}
body[data-page="home"] .nk-stats {
border-block: 1px solid #eee;
background: #fff
}
body:is([data-page="home"], [data-page="leistungen"]) .nk-contact {
min-height: 760px
}
body:is([data-page="home"], [data-page="leistungen"]) .nk-contact-panel {
border-radius: 80px;
box-shadow: 0 26px 70px rgba(0, 0, 0, .22)
}
body[data-page="home"] .nk-instagram {
background: #f7f5f1
}
body[data-page="home"] .nk-instagram-grid {
gap: .75rem
}
body[data-page="home"] .nk-instagram-grid a {
border-radius: 8px
}
body[data-page="home"] :is(a, button, input, select, textarea):focus-visible {
outline: 3px solid var(--orange);
outline-offset: 4px
}
body[data-page="home"] :is(input, select, textarea):focus-visible {
outline: none
}
body[data-page="home"] ::selection {
background-color: #f36a21;
color: #fff;
text-shadow: none
}
@media(hover:hover) {
body[data-page="home"] .nk-instagram-grid a:hover img {
transform: scale(1.035)
}
}
@media(max-width:1000px) {
body[data-page="home"] .nk-service-grid {
grid-template-columns: repeat(2, 1fr)
}
body[data-page="home"] .nk-team {
grid-template-columns: 1fr
}
body[data-page="home"] .nk-quality-grid article:nth-child(2) {
border-right: 0
}
body[data-page="home"] .nk-quality-grid article:nth-child(-n+2) {
border-bottom: 1px solid #dedbd5
}
}
@media(max-width:620px) {
body[data-page="home"] .nk-hero-inner {
width: calc(100% - 2rem);
padding: 8.5rem 0 5rem
}
body[data-page="home"] .nk-hero h1 {
font-size: clamp(3rem, 13vw, 4.5rem);
line-height: .94
}
body[data-page="home"] .nk-hero-actions {
align-items: flex-start;
flex-direction: column;
gap: 1rem
}
body[data-page="home"] .nk-trust {
justify-content: flex-start;
gap: .6rem
}
body[data-page="home"] .nk-scroll {
display: none
}
body[data-page="home"] .nk-welcome-media {
min-height: 470px
}
body[data-page="home"] .nk-welcome-media>img {
height: 430px
}
body[data-page="home"] .nk-service-grid {
grid-template-columns: 1fr 1fr
}
body[data-page="home"] .nk-service-card {
min-height: 155px;
padding: 1.1rem
}
body[data-page="home"] .nk-service-card>span {
font-size: .88rem
}
body[data-page="home"] .nk-team {
padding-inline: 1rem
}
body[data-page="home"] .nk-quality-grid article {
min-height: 210px;
padding: 1.25rem .9rem
}
body[data-page="home"] .nk-contact-panel {
border-radius: 10px;
box-shadow: 0 18px 44px rgba(0, 0, 0, .2)
}
}
@media(prefers-reduced-motion:reduce) {
body[data-page="home"] .nk-ticker div {
animation: none !important
}
} .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:is([data-page="home"], [data-page="leistungen"]) .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:is([data-page="home"], [data-page="leistungen"]) .nk-contact {
view-timeline-name: --nk-contact-motion
}
.motion-v2 body[data-page="home"] .nk-hero-image,
.motion-v2 body:is([data-page="home"], [data-page="leistungen"]) .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:is([data-page="home"], [data-page="leistungen"]) .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:is([data-page="home"], [data-page="leistungen"]) .nk-contact-panel {
z-index: 2;
align-items: center
}
.motion-v2 body[data-page="home"] .nk-hero:before,
.motion-v2 body:is([data-page="home"], [data-page="leistungen"]) .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:is([data-page="home"], [data-page="leistungen"]) .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:is([data-page="home"], [data-page="leistungen"]) .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:is([data-page="home"], [data-page="leistungen"]) .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 {
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-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;
margin: 0 0 4.25rem;
color: #f36a21;
font-size: .76rem;
font-weight: 700;
line-height: 1;
letter-spacing: .17em;
}
.motion-v2 body[data-page="home"] .nk-welcome .nk-section-label::after {
content: "";
position: absolute;
left: 0;
bottom: -2.4rem;
width: 5rem;
height: 1px;
background: #f36a21;
}
.motion-v2 body[data-page="home"] .nk-welcome h2 {
max-width: 34rem;
margin: 0;
color: #101010;
font-size: clamp(3.7rem, 5.05vw, 5.35rem);
font-weight: 400;
line-height: .96;
letter-spacing: -.055em;
}
.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: 3.5rem;
font-size: .68rem
}
.motion-v2 body[data-page="home"] .nk-welcome .nk-section-label::after {
bottom: -2rem;
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 2.7rem;
color: #f36a21;
font-size: .77rem;
font-weight: 700;
line-height: 1;
letter-spacing: .14em;
}
.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-team h2 {
max-width: 38rem;
margin: 0;
color: #f7f7f5;
font-size: clamp(3.8rem, 5.3vw, 5.8rem);
font-weight: 400;
line-height: .98;
letter-spacing: -.055em;
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-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
}
}
.motion-v2 body[data-page="home"] .nk-quality {
position: relative;
padding-block: clamp(6.5rem, 10vw, 9rem);
overflow: hidden;
background: #f7f5f1;
}
.motion-v2 body[data-page="home"] .nk-quality-layout {
display: grid;
grid-template-columns: minmax(0, .78fr) minmax(520px, 1.22fr);
gap: clamp(4rem, 8vw, 8rem);
width: min(1120px, 100%);
margin-inline: auto;
align-items: start;
}
.motion-v2 body[data-page="home"] .nk-quality-intro {
position: sticky;
top: 8.5rem;
max-width: 470px;
}
.motion-v2 body[data-page="home"] .nk-quality-intro::before {
content: "";
display: block;
width: 3.5rem;
height: 2px;
margin-bottom: 2rem;
background: #f36a21;
}
.motion-v2 body[data-page="home"] .nk-quality-intro h2 {
max-width: 460px;
margin: 0;
font-size: clamp(3rem, 5vw, 5.25rem);
font-weight: 400;
line-height: .96;
letter-spacing: -.04em;
text-wrap: balance;
}
.motion-v2 body[data-page="home"] .nk-quality-intro h2 span {
color: #f36a21
}
.motion-v2 body[data-page="home"] .nk-quality-intro p {
max-width: 42ch;
margin: 1.7rem 0 0;
color: #686866;
font-size: 1rem;
line-height: 1.75;
}
.motion-v2 body[data-page="home"] .nk-quality-list {
display: grid;
border-top: 1px solid #d8d4cd;
}
.motion-v2 body[data-page="home"] .nk-quality-item {
position: relative;
display: grid;
grid-template-columns: 2.25rem 3.5rem minmax(0, 1fr);
gap: 1.4rem;
align-items: center;
min-height: 142px;
padding: 1.6rem 1rem 1.6rem 0;
border-bottom: 1px solid #d8d4cd;
transition: background-color .45s cubic-bezier(.23, 1, .32, 1), padding .45s cubic-bezier(.23, 1, .32, 1);
}
.motion-v2 body[data-page="home"] .nk-quality-item::after {
content: "";
position: absolute;
right: 0;
bottom: -1px;
left: 0;
height: 2px;
background: #f36a21;
transform: scaleX(0);
transform-origin: left;
transition: transform .55s cubic-bezier(.23, 1, .32, 1);
}
.motion-v2 body[data-page="home"] .nk-quality-index {
align-self: start;
padding-top: .55rem;
color: #f36a21;
font-size: .64rem;
font-weight: 700;
letter-spacing: .1em;
font-variant-numeric: tabular-nums;
}
.motion-v2 body[data-page="home"] .nk-quality-icon {
display: grid;
width: 3.5rem;
height: 3.5rem;
place-items: center;
border-radius: 50%;
background: #fff;
box-shadow: 0 12px 32px rgba(29, 31, 32, .08);
transition: background-color .35s cubic-bezier(.23, 1, .32, 1), transform .45s cubic-bezier(.23, 1, .32, 1);
}
.motion-v2 body[data-page="home"] .nk-quality-icon img {
width: 1.55rem;
height: 1.55rem;
margin: 0;
object-fit: contain;
transition: filter .35s cubic-bezier(.23, 1, .32, 1);
}
.motion-v2 body[data-page="home"] .nk-quality-copy h3 {
margin: 0 0 .45rem;
font-size: clamp(1.35rem, 2vw, 1.85rem);
font-weight: 500;
letter-spacing: -.025em;
}
.motion-v2 body[data-page="home"] .nk-quality-copy p {
max-width: 46ch;
margin: 0;
color: #777571;
font-size: .9rem;
line-height: 1.65;
}
@media(hover:hover) {
.motion-v2 body[data-page="home"] .nk-quality-item:hover {
padding-inline: 1rem;
background: #fff
}
.motion-v2 body[data-page="home"] .nk-quality-item:hover::after {
transform: scaleX(1)
}
.motion-v2 body[data-page="home"] .nk-quality-item:hover .nk-quality-icon {
background: #f36a21;
transform: rotate(-7deg) scale(1.05)
}
.motion-v2 body[data-page="home"] .nk-quality-item:hover .nk-quality-icon img {
filter: brightness(0) invert(1)
}
}
@media(max-width:900px) {
.motion-v2 body[data-page="home"] .nk-quality-layout {
grid-template-columns: 1fr;
gap: 3.5rem
}
.motion-v2 body[data-page="home"] .nk-quality-intro {
position: static;
max-width: 680px
}
.motion-v2 body[data-page="home"] .nk-quality-intro h2 {
max-width: 620px
}
}
@media(max-width:620px) {
.motion-v2 body[data-page="home"] .nk-quality {
padding: 5.5rem 1rem
}
.motion-v2 body[data-page="home"] .nk-quality-layout {
gap: 2.75rem
}
.motion-v2 body[data-page="home"] .nk-quality-intro::before {
margin-bottom: 1.5rem
}
.motion-v2 body[data-page="home"] .nk-quality-intro h2 {
font-size: clamp(2.8rem, 12vw, 4rem)
}
.motion-v2 body[data-page="home"] .nk-quality-item {
grid-template-columns: 1.7rem 2.8rem minmax(0, 1fr);
gap: .85rem;
min-height: 124px;
padding: 1.35rem 0
}
.motion-v2 body[data-page="home"] .nk-quality-index {
font-size: .58rem
}
.motion-v2 body[data-page="home"] .nk-quality-icon {
width: 2.8rem;
height: 2.8rem
}
.motion-v2 body[data-page="home"] .nk-quality-icon img {
width: 1.25rem;
height: 1.25rem
}
.motion-v2 body[data-page="home"] .nk-quality-copy h3 {
font-size: 1.25rem
}
.motion-v2 body[data-page="home"] .nk-quality-copy p {
font-size: .82rem;
line-height: 1.55
}
}
@media(prefers-reduced-motion:reduce) {
.motion-v2 body[data-page="home"] .nk-quality-item,
.motion-v2 body[data-page="home"] .nk-quality-item::after,
.motion-v2 body[data-page="home"] .nk-quality-icon,
.motion-v2 body[data-page="home"] .nk-quality-icon img {
transition: none !important
}
} body[data-page="home"] .header,
body[data-page="home"] .header.scrolled {
padding-left: max(48px, calc((100% - 1400px)/2));
}
body[data-page="home"] .mk-burger {
right: max(48px, calc((100% - 1400px)/2));
}
.motion-v2 body[data-page="home"] .mk-burger.active {
right: 24px;
}
.brand {
overflow: hidden
}
.brand-logo-swap {
display: contents
}
.brand-logo-wordmark {
display: none
}
.brand img {
animation: none !important;
object-fit: contain;
transform: scale(1.38);
transform-origin: center;
}
body[data-page="home"] .brand {
position: relative;
width: min(330px, calc(100vw - 118px));
height: 76px;
min-width: 0;
padding: 0;
overflow: visible;
background: transparent;
box-shadow: none;
isolation: isolate;
}
body[data-page="home"] .brand::before {
content: "";
position: absolute;
z-index: -1;
inset: 0 auto 0 0;
width: 104px;
border: 1px solid rgba(255, 255, 255, .76);
border-radius: 2px;
background: rgba(255, 255, 255, .98);
box-shadow: 0 12px 34px rgba(0, 0, 0, .14);
visibility: visible;
transform-origin: left center;
transition: opacity 220ms ease, transform 520ms cubic-bezier(.23, 1, .32, 1), border-radius 420ms cubic-bezier(.23, 1, .32, 1), background-color 320ms ease, visibility 0s linear;
}
body[data-page="home"] .brand-logo-swap {
position: relative;
display: block;
width: 100%;
height: 100%;
}
body[data-page="home"] .brand-logo-swap img {
position: absolute;
margin: 0;
transition: opacity 260ms ease, transform 520ms cubic-bezier(.23, 1, .32, 1);
will-change: transform, opacity;
}
body[data-page="home"] .header {
isolation: isolate;
background: transparent;
border-color: transparent;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
body[data-page="home"] .header::before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .70));
box-shadow: 0 18px 48px rgba(31, 36, 40, .10), inset 0 1px 0 rgba(255, 255, 255, .98), inset 0 -1px 0 rgba(255, 255, 255, .46);
backdrop-filter: blur(28px) saturate(178%) contrast(1.03);
-webkit-backdrop-filter: blur(28px) saturate(178%) contrast(1.03);
opacity: 0;
transform: translate3d(0, -16%, 0) scaleY(.97);
transform-origin: top center;
transition: opacity 220ms cubic-bezier(.23, 1, .32, 1), transform 260ms cubic-bezier(.23, 1, .32, 1);
will-change: transform, opacity;
}
body[data-page="home"] .header::after {
content: "";
position: absolute;
z-index: 1;
right: max(1rem, calc((100vw - var(--content-wide))/2));
bottom: 0;
left: max(1rem, calc((100vw - var(--content-wide))/2));
height: 1px;
pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .96) 18%, rgba(243, 106, 33, .20) 50%, rgba(255, 255, 255, .96) 82%, transparent);
opacity: 0;
transform: scaleX(.92);
transform-origin: center;
transition: opacity 180ms cubic-bezier(.23, 1, .32, 1) 40ms, transform 260ms cubic-bezier(.23, 1, .32, 1) 40ms;
}
body[data-page="home"] .header.scrolled {
background: transparent;
border-color: transparent;
box-shadow: none;
backdrop-filter: 30px;
-webkit-backdrop-filter: 30px;
color: var(--ink);
border-radius: 0;
}
body[data-page="home"] .header.scrolled::before {
opacity: 1;
transform: translate3d(0, 0, 0) scaleY(1);
}
body[data-page="home"] .header.scrolled::after {
opacity: 0;
transform: scaleX(1);
}
body[data-page="home"] .brand-logo-mark,
body[data-page="home"] .header.scrolled .brand-logo-mark {
top: 9px;
left: 11px;
width: 82px;
height: 58px;
opacity: 1;
visibility: visible;
clip-path: inset(2px 4px round 8px);
transform: scale(1.38);
transform-origin: center;
transition: opacity 260ms ease, transform 520ms cubic-bezier(.23, 1, .32, 1), visibility 0s linear;
}
body[data-page="home"] .brand-logo-swap .brand-logo-wordmark,
body[data-page="home"] .header.scrolled .brand-logo-swap .brand-logo-wordmark {
display: block;
top: 50%;
left: 13px;
width: 300px;
height: auto;
opacity: 0;
transform: translate3d(-14px, -50%, 0) scale(.965);
transform-origin: left center;
}
body[data-page="home"] .header.scrolled .brand::before {
opacity: 0;
visibility: hidden;
border-color: transparent;
background: transparent;
box-shadow: none;
transform: scaleX(1);
transition-delay: 0s, 0s, 0s, 0s, 220ms;
}
body[data-page="home"] .header.scrolled .brand-logo-mark {
opacity: 0;
visibility: hidden;
transform: translate3d(12px, 0, 0) scale(1.24);
transition-delay: 0s, 0s, 260ms;
}
body[data-page="home"] .header.scrolled .brand-logo-swap .brand-logo-wordmark {
opacity: 1;
transform: translate3d(0, -50%, 0) scale(1);
transition-delay: 90ms;
}
.mk-overlay {
background: rgba(238, 235, 231, .32);
backdrop-filter: blur(18px) saturate(138%);
-webkit-backdrop-filter: blur(18px) saturate(138%);
}
.mk-sidebar {
isolation: isolate;
background: linear-gradient(145deg, rgba(255, 255, 255, .82), rgba(255, 248, 242, .58)), rgba(255, 255, 255, .46);
border-color: rgba(255, 255, 255, .78);
box-shadow: 0 34px 90px rgba(25, 27, 30, .19), inset 0 1px 0 rgba(255, 255, 255, .92), inset 0 -1px 0 rgba(255, 255, 255, .34);
backdrop-filter: blur(34px) saturate(165%) brightness(1.03);
-webkit-backdrop-filter: blur(34px) saturate(165%) brightness(1.03);
will-change: transform;
}
.mk-sidebar::before {
opacity: 0;
transform: translate3d(52px, -28px, 0) scale(.86);
transition: opacity 480ms ease 120ms, transform 760ms cubic-bezier(.23, 1, .32, 1) 80ms;
}
.mk-sidebar::after {
opacity: 0;
transform: translate3d(-40px, 36px, 0) scale(.82);
transition: opacity 520ms ease 180ms, transform 820ms cubic-bezier(.23, 1, .32, 1) 120ms;
}
.mk-sidebar.open::before {
opacity: .13;
transform: translate3d(0, 0, 0) scale(1);
}
.mk-sidebar.open::after {
opacity: .09;
transform: translate3d(0, 0, 0) scale(1);
}
.mk-menu-logo {
position: absolute;
z-index: 3;
top: 22px;
left: 30px;
display: block;
width: min(330px, calc(100% - 142px));
height: 54px;
overflow: visible;
border-radius: 0;
background: transparent;
opacity: 0;
transform: translate3d(26px, -7px, 0) scale(.97);
transform-origin: left center;
transition: opacity 360ms ease, transform 620ms cubic-bezier(.23, 1, .32, 1);
}
.mk-menu-logo img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: left center;
transform: none;
}
.mk-sidebar.open .mk-menu-logo {
opacity: 1;
transform: none;
transition-delay: 120ms;
}
@media(max-width:1180px) {
body[data-page="home"] .header,
body[data-page="home"] .header.scrolled {
padding-left: max(32px, calc((100% - 1060px)/2))
}
body[data-page="home"] .mk-burger {
right: max(32px, calc((100% - 1060px)/2))
}
}
@media(max-width:920px) {
body[data-page="home"] .header,
body[data-page="home"] .header.scrolled {
padding-left: max(24px, calc((100% - 760px)/2))
}
body[data-page="home"] .mk-burger {
right: max(24px, calc((100% - 760px)/2))
}
}
@media(max-width:900px) {
.motion-v2 body[data-page="home"] .mk-burger.active {
right: 18px
}
}
@media(max-width:700px) {
.motion-v2 body[data-page="home"] .mk-burger.active {
right: 14px
}
}
@media(max-width:640px) {
body[data-page="home"] .header,
body[data-page="home"] .header.scrolled {
padding-left: 16px
}
body[data-page="home"] .mk-burger {
right: 16px
}
}
@media(max-width:620px) {
.brand img {
transform: scale(1.42)
}
body[data-page="home"] .brand {
width: min(238px, calc(100vw - 82px));
height: 51px
}
body[data-page="home"] .brand::before {
width: 72px
}
body[data-page="home"] .brand-logo-mark,
body[data-page="home"] .header.scrolled .brand-logo-mark {
top: 5px;
left: 7px;
width: 58px;
height: 40px;
transform: scale(1.42)
}
body[data-page="home"] .brand-logo-swap .brand-logo-wordmark,
body[data-page="home"] .header.scrolled .brand-logo-swap .brand-logo-wordmark {
left: 9px;
width: 216px
}
body[data-page="home"] .header.scrolled .brand::before {
opacity: 0;
transform: scaleX(1)
}
body[data-page="home"] .header.scrolled .brand-logo-mark {
transform: translate3d(9px, 0, 0) scale(1.28)
}
.mk-menu-logo {
top: 17px;
left: 18px;
width: min(224px, calc(100% - 116px));
height: 42px
}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
body[data-page="home"] .header.scrolled::before {
background: rgba(255, 255, 255, .96);
backdrop-filter: none;
-webkit-backdrop-filter: none
}
.mk-overlay {
background: rgba(238, 235, 231, .88)
}
.mk-sidebar {
background: rgba(255, 252, 249, .97)
}
}
@media(prefers-reduced-transparency:reduce) {
body[data-page="home"] .header.scrolled::before {
background: #fbfbfa;
backdrop-filter: none;
-webkit-backdrop-filter: none
}
.mk-overlay {
background: rgba(238, 235, 231, .92);
backdrop-filter: none;
-webkit-backdrop-filter: none
}
.mk-sidebar {
background: #fffaf6;
backdrop-filter: none;
-webkit-backdrop-filter: none
}
}
@media(prefers-contrast:more) {
body[data-page="home"] .header.scrolled::before {
border-bottom-color: rgba(20, 20, 20, .32);
background: rgba(255, 255, 255, .97)
}
}
@media(prefers-reduced-motion:reduce) {
body[data-page="home"] .header::before,
body[data-page="home"] .header::after,
body[data-page="home"] .brand::before,
body[data-page="home"] .brand-logo-swap img,
.mk-menu-logo,
.mk-sidebar::before,
.mk-sidebar::after {
transition: opacity 160ms cubic-bezier(.23, 1, .32, 1) !important
}
body[data-page="home"] .header::before,
body[data-page="home"] .header::after,
.mk-sidebar::before,
.mk-sidebar::after {
transform: none !important
}
}
body[data-page="home"] {
--nk-home-container: 1400px;
--nk-home-gutter: 48px;
--nk-home-edge: max(var(--nk-home-gutter), calc((100% - var(--nk-home-container))/2));
}
.motion-v2 body[data-page="home"] .header,
.motion-v2 body[data-page="home"] .header.scrolled {
padding-left: var(--nk-home-edge)
}
.motion-v2 body[data-page="home"] .mk-burger,
.motion-v2 body[data-page="home"] .nk-scroll {
right: var(--nk-home-edge)
}
.motion-v2 body[data-page="home"] .nk-hero-inner {
width: min(900px, calc(100% - (var(--nk-home-edge) * 2)));
margin-left: var(--nk-home-edge);
}
.motion-v2 body[data-page="home"] .nk-welcome,
.motion-v2 body[data-page="home"] .nk-stats {
width: min(var(--nk-home-container), calc(100% - (var(--nk-home-gutter) * 2)));
max-width: none;
margin-inline: auto;
}
.motion-v2 body[data-page="home"] .nk-services,
.motion-v2 body[data-page="home"] .nk-team,
.motion-v2 body[data-page="home"] .nk-quality,
.motion-v2 body[data-page="home"] .nk-reviews,
.motion-v2 body:is([data-page="home"], [data-page="leistungen"]) .nk-contact,
.motion-v2 body[data-page="home"] .nk-instagram,
.motion-v2 body[data-page="home"] .footer {
padding-inline: var(--nk-home-edge);
}
.motion-v2 body[data-page="home"] .nk-services>.nk-centered-head,
.motion-v2 body[data-page="home"] .nk-services>.nk-service-grid,
.motion-v2 body[data-page="home"] .nk-services>.nk-center,
.motion-v2 body[data-page="home"] .nk-quality-layout,
.motion-v2 body[data-page="home"] .nk-reviews>.nk-centered-head,
.motion-v2 body[data-page="home"] .nk-review-grid,
.motion-v2 body:is([data-page="home"], [data-page="leistungen"]) .nk-contact-panel,
.motion-v2 body[data-page="home"] .nk-instagram>.nk-centered-head,
.motion-v2 body[data-page="home"] .nk-instagram-grid,
.motion-v2 body[data-page="home"] .nk-instagram-grid {
width: 100%;
max-width: none;
margin-inline: auto;
}
@media(max-width:1180px) {
body[data-page="home"] {
--nk-home-container: 1060px;
--nk-home-gutter: 32px;
}
}
@media(max-width:920px) {
body[data-page="home"] {
--nk-home-container: 760px;
--nk-home-gutter: 24px;
}
}
@media(max-width:640px) {
body[data-page="home"] {
--nk-home-container: 100%;
--nk-home-gutter: 16px;
--nk-home-edge: 16px;
}
}
.nk-logo-carousel-section {
--nk-logo-orange: #f36a21;
--nk-logo-card-height: 120px;
position: relative;
overflow: hidden;
background: white;
}
.nk-logo-marquee {
position: relative;
width: 100%;
overflow: hidden;
border-bottom: 1px solid rgba(35, 42, 46, .13)
}
.nk-logo-marquee__track {
display: flex;
width: max-content;
animation: nkLogoMarquee 26s linear infinite
}
.nk-logo-marquee__group {
display: flex;
flex-shrink: 0;
align-items: center
}
.nk-logo-marquee__item {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
padding: 0 46px;
filter: grayscale(1) contrast(.75) brightness(1.15)
}
.nk-logo-marquee__item img {
height: var(--nk-logo-card-height);
width: auto;
max-width: 400px;
object-fit: contain
}
@keyframes nkLogoMarquee {
from {
transform: translate3d(0, 0, 0)
}
to {
transform: translate3d(-50%, 0, 0)
}
}
@media(prefers-reduced-motion:reduce) {
.nk-logo-marquee__track {
animation: none
}
}
@media(max-width:1080px) {
.nk-logo-marquee__item {
padding: 0 34px
}
.nk-logo-marquee__item img {
max-width: 176px
}
}
@media(max-width:600px) {
.nk-logo-marquee__item {
padding: 0 24px
}
.nk-logo-marquee__item img {
max-width: 140px
}
}
:root {
--nk-orange: var(--orange, #f36a21);
--nk-orange-light: #ff8a4d;
}
.nk-marquee {
position: relative;
width: 100%;
padding: 18px 0;
overflow: hidden;
isolation: isolate;
background: linear-gradient(100deg, var(--nk-orange) 0%, var(--nk-orange-light) 45%, var(--nk-orange) 100%);
}
.nk-marquee::before {
content: "";
position: absolute;
top: 50%;
left: 5vw;
width: 420px;
height: 160px;
pointer-events: none;
background: radial-gradient(circle, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 70%);
filter: blur(30px);
transform: translate3d(0, -50%, 0);
animation: nkLight 9s ease-in-out infinite alternate;
will-change: transform;
}
.nk-marquee__track {
position: relative;
z-index: 2;
display: flex;
width: max-content;
animation: nkMarquee 30s linear infinite;
will-change: transform;
}
.nk-marquee__group {
display: flex;
flex-shrink: 0;
align-items: center;
}
.nk-marquee__item {
position: relative;
display: flex;
align-items: center;
margin-right: 54px;
color: #fff;
font-family: "Montserrat", Arial, sans-serif;
font-size: clamp(18px, 1.55vw, 25px);
font-weight: 400;
line-height: 1;
letter-spacing: -.01em;
white-space: nowrap;
}
.nk-marquee__item--small {
font-size: clamp(16px, 1.35vw, 22px);
opacity: .82
}
.nk-marquee__item--soft {
color: rgba(255, 255, 255, .72)
}
.nk-marquee__item::after {
content: "";
display: block;
width: 6px;
height: 6px;
margin-left: 54px;
flex-shrink: 0;
border-radius: 50%;
background: #fff;
opacity: .72;
}
.nk-marquee__item:nth-child(even)::after {
width: 3px;
height: 3px;
opacity: .48
}
@keyframes nkLight {
from {
transform: translate3d(0, -50%, 0)
}
to {
transform: translate3d(70vw, -50%, 0)
}
}
@keyframes nkMarquee {
from {
transform: translate3d(0, 0, 0)
}
to {
transform: translate3d(-50%, 0, 0)
}
}
@media(max-width:767px) {
.nk-marquee {
padding: 14px 0
}
.nk-marquee__item {
margin-right: 34px;
font-size: 17px
}
.nk-marquee__item--small {
font-size: 15px
}
.nk-marquee__item::after {
margin-left: 34px
}
}
@media(prefers-reduced-motion:reduce) {
.nk-marquee__track {
animation-duration: 85s
}
.nk-marquee::before {
animation: none;
will-change: auto
}
}
body[data-page="home"] .nk-stats {
--nk-stats-orange: #f36a21;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(.8rem, 1.5vw, 1.35rem);
padding: clamp(5.5rem, 8vw, 8rem) 0;
overflow: visible;
border: 0;
background: transparent
}
body[data-page="home"] .nk-stat-card {
position: relative;
display: flex;
min-width: 0;
min-height: 470px;
flex-direction: column;
align-items: stretch;
padding: clamp(1.65rem, 2.25vw, 2.15rem);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, .9);
border-radius: 24px;
background: #fbfbfa;
color: var(--ink);
box-shadow: 0 20px 55px rgba(67, 51, 40, .075), inset 0 1px 0 rgba(255, 255, 255, .95);
transition: background-color 220ms ease, transform 220ms cubic-bezier(.16, 1, .3, 1)
}
body[data-page="home"] .nk-stat-icon {
display: grid;
width: 76px;
height: 76px;
place-items: center;
flex: 0 0 auto;
border: 1px solid rgba(243, 106, 33, .14);
border-radius: 50%;
background: #fff;
color: var(--nk-stats-orange);
box-shadow: 0 10px 24px rgba(67, 51, 40, .055);
font-size: 2rem;
transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 220ms cubic-bezier(.16, 1, .3, 1)
}
body[data-page="home"] .nk-stat-number {
display: block;
margin-top: auto;
color: var(--nk-stats-orange);
font-size: clamp(4rem, 5.35vw, 5.45rem);
font-weight: 600;
line-height: 1;
letter-spacing: -.065em;
transition: color 180ms ease
}
body[data-page="home"] .nk-stat-number::after {
content: "";
display: block;
width: 2.4rem;
height: 3px;
margin-top: 1.2rem;
border-radius: 2px;
background: currentColor
}
body[data-page="home"] .nk-stat-label {
display: block;
min-height: 2.55em;
max-width: none;
margin-top: 1.4rem;
color: #34363a;
font-size: clamp(.72rem, .82vw, .84rem);
font-weight: 700;
line-height: 1.3;
letter-spacing: .025em;
text-transform: uppercase;
transition: color 180ms ease
}
@media(hover:hover) and (pointer:fine) {
body[data-page="home"] .nk-stat-card:hover {
background: var(--nk-stats-orange);
transform: translate3d(0, -12px, 0)
}
body[data-page="home"] .nk-stat-card:hover .nk-stat-icon {
border-color: rgba(255, 255, 255, .42);
background: rgba(255, 255, 255, .12);
color: #fff;
transform: rotate(-4deg) scale(1.04)
}
body[data-page="home"] .nk-stat-card:hover .nk-stat-number,
body[data-page="home"] .nk-stat-card:hover .nk-stat-label {
color: #fff
}
}
@media(max-width:800px) {
body[data-page="home"] .nk-stats {
grid-template-columns: repeat(2, 1fr);
gap: .85rem;
padding-block: 4rem;
padding-inline: 0;
overflow: visible
}
body[data-page="home"] .nk-stat-card {
min-height: 240px;
padding: 1.4rem
}
body[data-page="home"] .nk-stat-icon {
width: 58px;
height: 58px;
font-size: 1.5rem
}
body[data-page="home"] .nk-stat-number {
font-size: clamp(2.4rem, 8vw, 3.2rem)
}
body[data-page="home"] .nk-stat-label {
margin-top: .9rem;
font-size: .68rem
}
}
@media(max-width:420px) {
body[data-page="home"] .nk-stats {
gap: .6rem
}
body[data-page="home"] .nk-stat-card {
min-height: 210px;
padding: 1.1rem
}
body[data-page="home"] .nk-stat-icon {
width: 50px;
height: 50px;
font-size: 1.3rem
}
}
@media(prefers-reduced-motion:reduce) {
body[data-page="home"] .nk-stat-card,
body[data-page="home"] .nk-stat-icon {
transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
transform: none !important
}
}
body[data-page="home"] .nk-hero.nk-hero-rebuilt {
--nk-hero-orange: #f36a21;
position: relative;
width: 100%;
min-height: 100svh;
overflow: hidden;
isolation: isolate;
background: linear-gradient(120deg, #cbd4d4 0%, #a8bdc1 45%, #759ca5 100%);
color: #fff;
font-family: var(--font-ui, "Montserrat", Arial, sans-serif);
}
body[data-page="home"] .nk-hero.nk-hero-rebuilt::before {
content: "";
position: absolute;
inset: 0;
z-index: -4;
background: radial-gradient(circle at 73% 18%, rgba(255, 255, 255, .5), transparent 32%), linear-gradient(90deg, rgba(5, 15, 20, .28), rgba(5, 15, 20, .03) 48%, rgba(5, 15, 20, .1));
animation: none;
}
.nk-hero-rebuilt .nk-parallax-bg {
position: absolute;
inset: -100px;
z-index: -10;
width: calc(100% + 200px);
height: calc(100% + 200px);
object-fit: cover;
background: #7f9da4;
transform: translate3d(0, 0, 0) scale(1.12);
will-change: transform
}
.nk-hero-rebuilt .nk-grain {
position: absolute;
inset: 0;
z-index: -7;
pointer-events: none;
opacity: .18;
background-image: radial-gradient(rgba(255, 255, 255, .32) .7px, transparent .9px);
background-size: 5px 5px;
mix-blend-mode: soft-light
}
.nk-hero-rebuilt .nk-vignette {
position: absolute;
inset: 0;
z-index: -6;
pointer-events: none;
background: rgba(6, 13, 17, .15);
background: linear-gradient(90deg, rgba(6, 14, 18, .32), rgba(6, 13, 17, .2) 44%, rgba(6, 13, 17, .28)), linear-gradient(180deg, rgba(6, 13, 17, .1) 52%, rgba(6, 12, 16, .34))
}
.nk-hero-rebuilt .nk-orange-glow {
display: none
}
.nk-hero-rebuilt .nk-orange-glow-2 {
display: none
}
.nk-hero-rebuilt .nk-hero-stage {
position: relative;
width: min(var(--nk-home-container), calc(100% - (var(--nk-home-gutter) * 2)));
min-height: 100svh;
margin: 0 auto;
display: flex;
align-items: center;
padding: 128px 0 66px
}
.nk-hero-rebuilt .nk-glass-card {
position: relative;
z-index: 20;
width: min(820px, 59vw);
padding: clamp(42px, 4.3vw, 68px);
border-radius: 80px;
background: #11161b54;
backdrop-filter: blur(10px) saturate(165%);
-webkit-backdrop-filter: blur(10px) saturate(165%);
will-change: transform, opacity
}
.nk-hero-rebuilt .nk-glass-card::before {
display: none
}
.nk-hero-rebuilt .nk-glass-card::after {
display: none
}
.nk-hero-rebuilt .nk-hero-layer {
position: relative;
z-index: 3;
will-change: transform, opacity
}
.nk-hero-rebuilt .nk-hero-eyebrow {
display: flex;
align-items: center;
gap: 11px;
margin: 0 0 28px;
color: rgba(255, 255, 255, .76);
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase
}
.nk-hero-rebuilt .nk-dot {
width: 7px;
height: 7px;
flex: 0 0 auto;
border-radius: 50%;
background: var(--nk-hero-orange);
box-shadow: 0 0 0 5px rgba(243, 106, 33, .09), 0 0 20px rgba(243, 106, 33, .48)
}
.motion-v2 body[data-page="home"] .nk-hero-rebuilt .nk-hero-title {
max-width: 760px;
margin: 0;
color: #fff;
font-size: clamp(52px, 5.25vw, 86px);
font-weight: 600;
line-height: 1.04;
letter-spacing: -.055em;
text-wrap: initial
}
.nk-hero-rebuilt .nk-hero-title span {
display: block
}
.nk-hero-rebuilt .nk-hero-title strong {
font-weight: 600
}
.nk-hero-rebuilt .nk-hero-title .orange {
display: inline;
color: var(--nk-hero-orange)
}
.nk-hero-rebuilt .nk-hero-description {
max-width: 590px;
margin: 28px 0 0;
color: rgba(255, 255, 255, .7);
font-size: 16px;
font-weight: 400;
line-height: 1.68
}
.nk-hero-rebuilt .nk-hero-buttons {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 34px
}
.nk-hero-rebuilt .nk-hero-button {
display: inline-flex;
min-height: 58px;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 8px 10px 8px 24px;
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 11px;
background: rgba(255, 255, 255, .055);
color: #fff;
font-size: 12px;
font-weight: 700;
transition: transform 180ms cubic-bezier(.16, 1, .3, 1), background-color 180ms ease, border-color 180ms ease
}
.nk-hero-rebuilt .nk-hero-button-primary {
border-color: var(--nk-hero-orange);
background: var(--nk-hero-orange)
}
.nk-hero-rebuilt .nk-hero-button-arrow {
display: grid;
width: 38px;
height: 38px;
place-items: center;
border-radius: 50%;
background: rgba(255, 255, 255, .15);
font-size: 16px
}
@media(hover:hover) and (pointer:fine) {
.nk-hero-rebuilt .nk-hero-button:hover {
transform: translateY(-3px);
border-color: rgba(255, 255, 255, .3);
background: rgba(255, 255, 255, .1)
}
.nk-hero-rebuilt .nk-hero-button-primary:hover {
border-color: #ff7b27;
background: #ff7b27
}
}
.nk-hero-rebuilt .nk-hero-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 40px;
color: rgba(255, 255, 255, .55);
font-size: 10px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase
}
.nk-hero-rebuilt .nk-meta-line {
width: 1px;
height: 18px;
background: rgba(255, 255, 255, .22)
}
.nk-hero-rebuilt .nk-floating-card {
position: absolute;
z-index: 45;
right: 6%;
top: 49%;
width: 210px;
padding: 19px;
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 20px;
background: rgba(9, 21, 29, .56);
backdrop-filter: blur(22px) saturate(145%);
-webkit-backdrop-filter: blur(22px) saturate(145%);
box-shadow: 0 26px 58px rgba(0, 0, 0, .2);
will-change: transform, opacity
}
.nk-hero-rebuilt .nk-floating-icon {
display: grid;
width: 42px;
height: 42px;
margin-bottom: 14px;
place-items: center;
border: 1px solid rgba(243, 106, 33, .34);
border-radius: 13px;
background: rgba(243, 106, 33, .08);
color: var(--nk-hero-orange);
font-size: 20px
}
.nk-hero-rebuilt .nk-floating-card strong {
display: block;
margin-bottom: 6px;
font-size: 14px
}
.nk-hero-rebuilt .nk-floating-card p {
margin: 0;
color: rgba(255, 255, 255, .6);
font-size: 11px;
line-height: 1.55
}
.nk-hero-rebuilt .nk-parallax-bg-fade {
position: absolute;
z-index: -9;
left: 0;
right: 0;
bottom: 0;
height: 42%;
pointer-events: none;
background: linear-gradient(180deg, transparent, rgba(4, 10, 13, .78) 82%, rgba(4, 10, 13, .92))
}
.nk-hero-rebuilt .nk-quality-badge {
position: absolute;
z-index: 50;
right: 1%;
bottom: 12%;
display: flex;
align-items: center;
gap: 11px;
padding: 10px 16px 10px 10px;
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 17px;
background: rgba(11, 23, 30, .56);
backdrop-filter: blur(20px) saturate(145%);
-webkit-backdrop-filter: blur(20px) saturate(145%);
box-shadow: 0 18px 45px rgba(0, 0, 0, .17);
will-change: transform, opacity
}
.nk-hero-rebuilt .nk-badge-icon {
display: grid;
width: 42px;
height: 42px;
place-items: center;
border-radius: 12px;
background: rgba(243, 106, 33, .15);
color: var(--nk-hero-orange);
font-size: 19px
}
.nk-hero-rebuilt .nk-quality-badge span {
display: block;
color: rgba(255, 255, 255, .56);
font-size: 10px
}
.nk-hero-rebuilt .nk-quality-badge strong {
display: block;
margin-top: 2px;
font-size: 12px
}
.nk-hero-rebuilt .nk-hero-scroll {
position: absolute;
z-index: 50;
right: 0;
bottom: 25px;
display: flex;
align-items: center;
gap: 11px;
color: rgba(255, 255, 255, .75);
font-size: 9px;
font-weight: 700;
letter-spacing: .15em;
text-transform: uppercase
}
.nk-hero-rebuilt .nk-hero-reveal {
opacity: 0;
transform: translate3d(0, 34px, 0);
filter: blur(8px)
}
html.nk-hero-ready .nk-hero-rebuilt .nk-hero-reveal {
animation: nkHeroReveal .8s cubic-bezier(.16, 1, .3, 1) forwards
}
.nk-hero-rebuilt .nk-hero-reveal-2 {
animation-delay: .1s !important
}
.nk-hero-rebuilt .nk-hero-reveal-3 {
animation-delay: .2s !important
}
.nk-hero-rebuilt .nk-hero-reveal-4 {
animation-delay: .3s !important
}
.nk-hero-rebuilt .nk-hero-reveal-5 {
animation-delay: .4s !important
}
@keyframes nkHeroReveal {
to {
opacity: 1;
transform: none;
filter: none
}
}
.nk-hero-rebuilt .nk-glass-card {
opacity: 0;
transform: scale(.94) translate3d(0, 18px, 0)
}
html.nk-hero-ready .nk-hero-rebuilt .nk-glass-card {
animation: nkHeroCardIn 1s cubic-bezier(.16, 1, .3, 1) forwards
}
@keyframes nkHeroCardIn {
to {
opacity: 1;
transform: none
}
}
.nk-hero-rebuilt .nk-floating-card {
opacity: 0;
transform: translate3d(0, 26px, 0) scale(.92)
}
html.nk-hero-ready .nk-hero-rebuilt .nk-floating-card {
animation: nkHeroPopIn .7s .55s cubic-bezier(.16, 1, .3, 1) forwards
}
.nk-hero-rebuilt .nk-quality-badge {
opacity: 0;
transform: translate3d(0, 26px, 0) scale(.92)
}
html.nk-hero-ready .nk-hero-rebuilt .nk-quality-badge {
animation: nkHeroPopIn .7s .65s cubic-bezier(.16, 1, .3, 1) forwards
}
@keyframes nkHeroPopIn {
to {
opacity: 1;
transform: none
}
}
.nk-hero-rebuilt .nk-hero-scroll {
opacity: 0
}
html.nk-hero-ready .nk-hero-rebuilt .nk-hero-scroll {
animation: nkHeroFadeIn .6s .8s ease forwards
}
@keyframes nkHeroFadeIn {
to {
opacity: 1
}
}
@media(min-width:781px) and (max-width:1100px) {
.nk-hero-rebuilt .nk-glass-card {
width: 64%;
padding: clamp(34px, 4vw, 48px)
}
.motion-v2 body[data-page="home"] .nk-hero-rebuilt .nk-hero-title {
font-size: clamp(36px, 4vw, 48px)
}
.nk-hero-rebuilt .nk-hero-buttons {
flex-direction: column
}
.nk-hero-rebuilt .nk-hero-button {
width: 100%
}
.nk-hero-rebuilt .nk-floating-card {
top: auto;
left: 24px;
right: auto;
bottom: 104px;
width: min(260px, calc(100% - 48px))
}
.nk-hero-rebuilt .nk-quality-badge {
left: 24px;
right: auto;
bottom: 24px
}
}
@media(max-width:780px) {
body[data-page="home"] .nk-hero.nk-hero-rebuilt {
min-height: 100svh
}
.nk-hero-rebuilt .nk-hero-stage {
width: min(var(--nk-home-container), calc(100% - (var(--nk-home-gutter) * 2)));
min-height: 100svh;
display: flex;
flex-direction: column;
align-items: stretch;
padding: 98px 0 0
}
.nk-hero-rebuilt .nk-glass-card {
width: 100%;
padding: 32px 22px;
border-radius: 22px
}
.motion-v2 body[data-page="home"] .nk-hero-rebuilt .nk-hero-title {
font-size: clamp(42px, 12vw, 58px);
line-height: 1.04
}
.nk-hero-rebuilt .nk-hero-description {
font-size: 14px
}
.nk-hero-rebuilt .nk-hero-buttons {
flex-direction: column
}
.nk-hero-rebuilt .nk-hero-button {
width: 100%
}
.nk-hero-rebuilt .nk-meta-line {
display: none
}
.nk-hero-rebuilt .nk-hero-scroll {
display: none
}
.nk-hero-rebuilt .nk-floating-card {
position: absolute;
top: auto;
left: 16px;
right: 16px;
bottom: 92px;
width: auto
}
.nk-hero-rebuilt .nk-quality-badge {
position: absolute;
left: 16px;
right: 16px;
bottom: 16px;
justify-content: center
}
}
@media(prefers-reduced-motion:reduce) {
.nk-hero-rebuilt .nk-hero-reveal {
opacity: 1 !important;
transform: none !important;
filter: none !important;
animation: none !important
}
.nk-hero-rebuilt [style*="transform"] {
transform: none !important
}
} :root {
--nk-control-radius: 999px;
--nk-ui-ease-out: cubic-bezier(.23, 1, .32, 1);
}
body,
body :where(h1, h2, h3, h4, h5, h6, p, a, span, strong, em, small, label, button, input, select, textarea, blockquote, figcaption):not(#wpadminbar, #wpadminbar *) {
font-family: var(--font-ui, "Montserrat", Arial, sans-serif) !important;
}
:where(.request-btn, .btn, .nk-btn, .nk-hero-button, .mk-footer-cta, .nk-play, .team-play) {
border-radius: var(--nk-control-radius) !important;
}
:where(.mk-burger, .lightbox-close, .testimonial-controls button) {
border-radius: 50% !important;
}
:where(button, .request-btn, .btn, .nk-btn, .nk-hero-button, .mk-footer-cta, .nk-play, .team-play) {
-webkit-tap-highlight-color: transparent;
}
:where(button, .request-btn, .btn, .nk-btn, .nk-hero-button, .mk-footer-cta, .nk-play, .team-play):active {
transform: scale(.97);
transition-duration: 140ms;
}
.nk-hero-rebuilt .nk-hero-scroll {
left: 50%;
right: auto;
bottom: clamp(22px, 3vw, 34px);
width: 48px;
height: 72px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 9px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
transform: translateX(-50%);
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .28));
transition: transform 180ms var(--nk-ui-ease-out), opacity 180ms ease;
}
.nk-hero-rebuilt .nk-hero-scroll .nk-mouse-icon {
position: relative;
display: block;
width: 34px;
height: 48px;
flex: 0 0 auto;
border: 1.7px solid rgba(255, 255, 255, .96);
border-radius: var(--nk-control-radius);
}
.nk-hero-rebuilt .nk-hero-scroll .nk-mouse-wheel {
position: absolute;
top: 9px;
left: 50%;
width: 2px;
height: 8px;
border-radius: var(--nk-control-radius);
background: var(--nk-hero-orange, var(--orange));
transform: translate3d(-50%, 0, 0);
animation: nkMouseWheel 1.7s var(--nk-ui-ease-out) infinite;
}
.nk-hero-rebuilt .nk-hero-scroll .nk-scroll-chevron {
display: block;
width: 15px;
height: 15px;
flex: 0 0 auto;
border-right: 1.7px solid rgba(255, 255, 255, .96);
border-bottom: 1.7px solid rgba(255, 255, 255, .96);
transform: rotate(45deg);
transform-origin: center;
animation: nkScrollChevron 1.7s var(--nk-ui-ease-out) infinite;
}
@keyframes nkMouseWheel {
0% {
opacity: .2;
transform: translate3d(-50%, 0, 0)
}
24% {
opacity: 1
}
72% {
opacity: 1;
transform: translate3d(-50%, 7px, 0)
}
100% {
opacity: 0;
transform: translate3d(-50%, 7px, 0)
}
}
@keyframes nkScrollChevron {
0%,
18% {
opacity: .42;
transform: translateY(0) rotate(45deg)
}
62% {
opacity: 1;
transform: translateY(3px) rotate(45deg)
}
100% {
opacity: .42;
transform: translateY(0) rotate(45deg)
}
}
@media(hover:hover) and (pointer:fine) {
.nk-hero-rebuilt .nk-hero-scroll:hover {
opacity: .8;
transform: translateX(-50%) translateY(-4px);
}
}
.nk-hero-rebuilt .nk-hero-scroll:active {
transform: translateX(-50%) scale(.96)
}
.nk-hero-rebuilt .nk-hero-scroll:focus-visible {
outline: 3px solid rgba(243, 106, 33, .42);
outline-offset: 4px
}
@media(prefers-reduced-motion:reduce) {
.nk-hero-rebuilt .nk-hero-scroll {
transition: opacity 180ms ease
}
.nk-hero-rebuilt .nk-hero-scroll .nk-mouse-wheel,
.nk-hero-rebuilt .nk-hero-scroll .nk-scroll-chevron {
animation: none;
opacity: 1
}
.nk-hero-rebuilt .nk-hero-scroll .nk-mouse-wheel {
transform: translate3d(-50%, 2px, 0)
}
}
html {
scrollbar-width: thin;
scrollbar-color: rgba(243, 106, 33, .82) #f3f3f0;
}
html::-webkit-scrollbar {
width: 6px
}
html::-webkit-scrollbar-track {
background: #f3f3f0
}
html::-webkit-scrollbar-thumb {
min-height: 42px;
border: 1px solid #f3f3f0;
border-radius: 999px;
background: rgba(243, 106, 33, .82);
}
html::-webkit-scrollbar-thumb:hover {
background: var(--orange)
}
html::-webkit-scrollbar-corner {
background: #f3f3f0
}
.footer.nk-footer-minimal {
position: relative;
isolation: isolate;
overflow: hidden;
width: 100%;
min-height: clamp(430px, 33.4vw, 680px);
padding: 0;
background: #080a0b;
color: rgba(255, 255, 255, .78);
}
body.motion-v2[data-page="home"] .footer.nk-footer-minimal {
padding-inline: 0
}
.footer.nk-footer-minimal::before,
.footer.nk-footer-minimal::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
.footer.nk-footer-minimal::before {
z-index: -2;
background: var(--service-image) center 46%/cover no-repeat;
filter: grayscale(.35) saturate(.35) contrast(1.16);
transform: scale(1.02);
}
.footer.nk-footer-minimal::after {
z-index: -1;
background: rgba(3, 6, 8, .92);
}
.nk-footer-minimal__inner {
position: relative;
z-index: 1;
min-height: inherit;
display: flex;
flex-direction: column;
}
.nk-footer-grid {
width: 84%;
margin-inline: auto;
padding-block: clamp(70px, 5.55vw, 114px) clamp(50px, 3.5vw, 72px);
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 1.12fr) minmax(0, .8fr);
align-items: stretch;
flex: 1 1 auto;
}
.nk-footer-column {
min-width: 0;
padding-inline: clamp(28px, 4.35vw, 89px);
}
.nk-footer-column:first-child {
padding-left: 0
}
.nk-footer-column:last-child {
padding-right: 0
}
.nk-footer-column+.nk-footer-column {
border-left: 1px solid rgba(255, 255, 255, .2)
}
.nk-footer-title {
margin: 0 0 clamp(24px, 1.55vw, 32px);
color: #fff;
font-size: clamp(.78rem, 1.08vw, 1.38rem);
font-weight: 700;
line-height: 1;
letter-spacing: .22em;
text-transform: uppercase;
}
.nk-footer-title::after {
content: "";
display: block;
width: clamp(40px, 3.15vw, 64px);
height: 1px;
margin-top: clamp(16px, 1vw, 21px);
background: rgba(255, 255, 255, .56);
}
.nk-footer-contact {
margin: 0;
display: flex;
flex-direction: column;
font-style: normal;
}
.nk-footer-contact-item,
.nk-footer-social-link {
display: flex;
align-items: center;
width: 100%;
min-width: 0;
border-bottom: 1px solid rgba(255, 255, 255, .13);
color: rgba(255, 255, 255, .78);
font-size: clamp(.88rem, 1.14vw, 1.45rem);
font-weight: 400;
line-height: 1.35;
transition: color 180ms ease;
}
.nk-footer-contact-item {
gap: clamp(16px, 1.4vw, 29px);
padding-block: clamp(8px, .48vw, 10px);
}
.nk-footer-contact-item:first-child {
padding-top: 0
}
.nk-footer-contact-item:last-child {
border-bottom: 0
}
.nk-footer-contact-icon,
.nk-footer-social-icon {
display: grid;
place-items: center;
flex: 0 0 auto;
border: 1px solid rgba(255, 255, 255, .18);
background: rgba(255, 255, 255, .045);
color: rgba(255, 255, 255, .92);
transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, transform 180ms var(--nk-ui-ease-out);
}
.nk-footer-contact-icon {
width: clamp(46px, 3.45vw, 71px);
height: clamp(46px, 3.45vw, 71px);
border-radius: clamp(13px, 1vw, 20px);
font-size: clamp(23px, 1.65vw, 34px);
}
.nk-footer-contact-item>span:last-child {
min-width: 0;
overflow-wrap: anywhere
}
.nk-footer-services {
display: grid;
color: rgba(255, 255, 255, .78);
}
.nk-footer-service-item {
display: flex;
align-items: center;
gap: clamp(14px, 1.55vw, 32px);
min-height: clamp(43px, 2.34vw, 48px);
border-bottom: 1px solid rgba(255, 255, 255, .13);
font-size: clamp(.88rem, 1.14vw, 1.45rem);
line-height: 1.25;
}
.nk-footer-service-item:last-child {
border-bottom: 0
}
.nk-footer-service-item i {
flex: 0 0 auto;
color: rgba(255, 255, 255, .8);
font-size: clamp(17px, 1.08vw, 22px);
}
.nk-footer-social {
display: grid
}
.nk-footer-social-link {
gap: clamp(18px, 1.15vw, 24px);
padding-block: clamp(12px, .58vw, 12px);
}
.nk-footer-social-link:first-child {
padding-top: 0
}
.nk-footer-social-link:last-child {
border-bottom: 0
}
.nk-footer-social-icon {
width: clamp(46px, 3.15vw, 65px);
height: clamp(46px, 3.15vw, 65px);
border-radius: clamp(13px, 1vw, 19px);
font-size: clamp(22px, 1.5vw, 31px);
}
.nk-footer-minimal a {
position: relative;
color: inherit
}
.nk-footer-bottom {
min-height: clamp(72px, 4.35vw, 89px);
display: flex;
align-items: center;
justify-content: flex-end;
padding-inline: 8%;
border-top: 1px solid rgba(255, 255, 255, .2);
flex: 0 0 auto;
}
.nk-footer-legal {
display: flex;
align-items: center;
color: rgba(255, 255, 255, .76);
font-size: clamp(.8rem, 1vw, 1.28rem);
}
.nk-footer-legal a+a {
margin-left: clamp(22px, 1.8vw, 37px);
padding-left: clamp(22px, 1.8vw, 37px);
border-left: 1px solid rgba(255, 255, 255, .38);
}
@media(hover:hover) and (pointer:fine) {
.nk-footer-contact-item:hover,
.nk-footer-social-link:hover,
.nk-footer-minimal a:hover {
color: var(--orange)
}
.nk-footer-contact-item:hover .nk-footer-contact-icon,
.nk-footer-social-link:hover .nk-footer-social-icon {
border-color: rgba(243, 106, 33, .65);
background: rgba(243, 106, 33, .1);
color: var(--orange);
transform: translateY(-2px);
}
}
.nk-footer-minimal a:focus-visible {
outline: 3px solid rgba(243, 106, 33, .38);
outline-offset: 5px;
border-radius: 4px
}
@media(max-width:900px) {
.footer.nk-footer-minimal {
min-height: 0
}
.nk-footer-grid {
width: 100%;
padding: 2.75rem 1.5rem;
grid-template-columns: 1fr
}
.nk-footer-column {
padding: 0
}
.nk-footer-column+.nk-footer-column {
margin-top: 2.35rem;
padding-top: 2.35rem;
border-top: 1px solid rgba(255, 255, 255, .2);
border-left: 0
}
.nk-footer-title {
margin-bottom: 1.75rem;
font-size: .78rem
}
.nk-footer-title::after {
margin-top: 1rem
}
.nk-footer-contact-item,
.nk-footer-social-link,
.nk-footer-service-item {
font-size: .9rem
}
.nk-footer-bottom {
min-height: 76px;
padding-inline: 1.5rem;
justify-content: flex-start
}
}
@media(max-width:480px) {
.footer.nk-footer-minimal {
width: calc(100% - 8px);
margin: 4px
}
.nk-footer-grid {
padding-inline: 1.15rem
}
.nk-footer-contact-icon,
.nk-footer-social-icon {
width: 46px;
height: 46px;
flex-basis: 46px;
border-radius: 13px
}
.nk-footer-legal {
width: 100%;
justify-content: space-between
}
}
html {
cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M4 3 L4 24 L10 18.5 L14.2 27.5 L18.6 25.5 L14.5 16.8 L22 16.6 Z" fill="%23f36a21" stroke="%231c1109" stroke-width="1" stroke-linejoin="round"/>') 4 3, auto
}
.nk-header-quick {
display: flex;
position: fixed;
top: 50%;
right: 28px;
z-index: 1800;
flex-direction: column;
align-items: flex-end;
gap: 10px;
transform: translateY(-50%);
}
.nk-header-quick-item {
display: flex;
align-items: center;
height: 64px;
border-radius: 32px;
border: 1px solid rgba(243, 106, 33, .5);
background: #fff;
backdrop-filter: blur(22px) saturate(165%);
-webkit-backdrop-filter: blur(22px) saturate(165%);
overflow: hidden;
color: var(--orange);
transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.nk-header-quick-icon {
display: grid;
place-items: center;
width: 64px;
height: 64px;
flex: 0 0 auto;
font-size: 24px;
color: var(--orange)
}
.nk-header-quick-icon img {
width: 28px;
height: 28px;
object-fit: contain
}
.nk-header-quick-label {
max-width: 0;
opacity: 0;
white-space: nowrap;
overflow: hidden;
font-size: .78rem;
font-weight: 700;
letter-spacing: .03em;
transition: max-width .35s var(--mk-ease), opacity .25s ease, padding-left .35s var(--mk-ease)
}
@media(hover:hover) and (pointer:fine) {
.nk-header-quick-item:hover {
background: var(--orange);
border-color: var(--orange);
color: #fff
}
.nk-header-quick-item:hover .nk-header-quick-icon {
color: #fff
}
.nk-header-quick-item:hover .nk-header-quick-icon img {
filter: brightness(0) invert(1)
}
.nk-header-quick-item:hover .nk-header-quick-label {
max-width: 320px;
opacity: 1;
padding-left: 18px
}
}
@media(max-width:900px) {
.nk-header-quick {
top: auto;
bottom: 16px;
right: 12px;
transform: none;
gap: 8px
}
.nk-header-quick-item {
height: 44px;
border-radius: 22px
}
.nk-header-quick-icon {
width: 44px;
height: 44px;
font-size: 18px
}
.nk-header-quick-icon img {
width: 20px;
height: 20px
}
.nk-header-quick-label {
display: none
}
}
body:not([data-page="home"]) {
--nk-sub-container: 1400px;
--nk-sub-gutter: 48px;
--nk-sub-edge: max(var(--nk-sub-gutter), calc((100% - var(--nk-sub-container)) / 2));
background: #fff;
color: var(--ink)
}
.nk-subpage {
background: #fff;
color: var(--ink);
overflow: hidden
}
.nk-subpage .nk-sub-shell {
width: min(var(--nk-sub-container), calc(100% - (var(--nk-sub-gutter) * 2)));
margin-inline: auto
}
.nk-sub-hero {
position: relative;
min-height: min(880px, 92svh);
display: flex;
align-items: flex-end;
isolation: isolate;
overflow: hidden;
background: #1b1d1f;
color: #fff
}
.nk-sub-hero>img {
position: absolute;
inset: -34px;
width: calc(100% + 68px);
height: calc(100% + 68px);
object-fit: cover;
z-index: -4;
filter: saturate(.88) contrast(1.03)
}
.nk-sub-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -3;
background: linear-gradient(90deg, rgba(8, 12, 15, .84) 0%, rgba(8, 12, 15, .58) 42%, rgba(8, 12, 15, .22) 72%, rgba(8, 12, 15, .34) 100%)
}
.nk-sub-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background: linear-gradient(180deg, rgba(8, 12, 15, .08) 44%, rgba(8, 12, 15, .5) 100%)
}
.nk-sub-hero-inner {
width: min(var(--nk-sub-container), calc(100% - (var(--nk-sub-gutter) * 2)));
margin-inline: auto;
padding: 180px 0 92px
}
.nk-sub-hero-card {
max-width: 900px;
padding: clamp(34px, 4.2vw, 64px);
border: 1px solid rgba(255, 255, 255, .24);
border-radius: 58px;
background: rgba(255, 255, 255, .1);
box-shadow: 0 30px 80px rgba(0, 0, 0, .22);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px)
}
.nk-sub-eyebrow {
display: flex;
align-items: center;
gap: .8rem;
margin: 0 0 1.3rem;
color: #fff;
font-size: .72rem;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase
}
.nk-sub-eyebrow::before {
content: "";
width: 34px;
height: 2px;
background: var(--orange);
border-radius: 999px
}
.nk-sub-hero h1 {
max-width: 850px;
margin: 0;
font-size: clamp(3.4rem, 7vw, 7.8rem);
line-height: .93;
letter-spacing: -.062em;
font-weight: 600
}
.nk-sub-hero h1 em {
color: #ff8a4d;
font-family: Georgia, serif;
font-weight: 400
}
.nk-sub-hero p.nk-sub-lead {
max-width: 690px;
margin: 1.6rem 0 0;
color: rgba(255, 255, 255, .82);
font-size: clamp(1rem, 1.4vw, 1.18rem);
line-height: 1.72
}
.nk-sub-section {
padding: clamp(84px, 9vw, 138px) max(var(--nk-sub-gutter), calc((100% - var(--nk-sub-container)) / 2))
}
.nk-sub-section--soft {
background: #f6f4f0
}
.nk-sub-section--dark {
background: #1c1d1f;
color: #fff
}
.nk-sub-head {
display: grid;
grid-template-columns: minmax(220px, .62fr) minmax(0, 1.7fr);
gap: clamp(32px, 5vw, 90px);
align-items: start;
margin-bottom: clamp(46px, 6vw, 82px)
}
.nk-sub-label {
margin: 0;
color: var(--orange);
font-size: .7rem;
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase
}
.nk-sub-head h2,
.nk-sub-copy h2,
.nk-sub-contact-copy h2 {
margin: 0;
font-size: var(--fs-h2);
line-height: var(--lh-h2);
letter-spacing: var(--ls-h2);
font-weight: 600
}
.nk-sub-head h2 em,
.nk-sub-copy h2 em,
.nk-sub-contact-copy h2 em {
color: var(--orange);
font-family: Georgia, serif;
font-weight: 400
}
.nk-sub-head-copy {
max-width: 720px
}
.nk-sub-head-copy p,
.nk-sub-copy>p,
.nk-sub-contact-copy>p {
margin: 1.35rem 0 0;
color: #75736f;
font-size: 1rem;
line-height: 1.75
}
.nk-sub-split {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
gap: clamp(42px, 7vw, 110px);
align-items: center
}
.nk-sub-media {
position: relative;
overflow: hidden;
border-radius: 9px;
min-height: 560px;
background: #ddd
}
.nk-sub-media img {
width: 100%;
height: 100%;
min-height: 560px;
object-fit: cover;
transition: transform .9s var(--motion)
}
.nk-sub-media:hover img {
transform: scale(1.035)
}
.nk-sub-copy {
max-width: 660px
}
.nk-sub-copy .nk-sub-label {
display: block;
margin-bottom: 1.2rem
}
.nk-sub-value-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 3.2rem;
background: none;
border: 0
}
.nk-sub-value {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
column-gap: 16px;
row-gap: 0px;
align-items: center;
min-height: 0;
padding: 20px 18px;
background: linear-gradient(180deg, #fff, #fbfaf7);
border: 1px solid rgba(41, 42, 44, .07);
border-radius: 16px;
box-shadow: 0 16px 34px rgba(20, 20, 20, .05);
overflow: hidden;
transition: transform .28s ease, box-shadow .28s ease
}
.nk-sub-value:hover {
transform: translateY(-4px);
box-shadow: 0 22px 42px rgba(20, 20, 20, .09)
}
.nk-sub-value h3 {
position: relative;
z-index: 1;
grid-column: 2;
grid-row: 1;
margin: 0;
font-size: 1rem;
font-weight: 800;
letter-spacing: -.02em;
color: var(--ink)
}
.nk-sub-value-dash {
position: relative;
z-index: 1;
grid-column: 2;
grid-row: 2;
display: block;
width: 20px;
height: 2px;
margin: 0;
border-radius: 2px;
background: var(--orange)
}
.nk-sub-value p {
display: none;
position: relative;
z-index: 1;
margin: 0;
color: #77736f;
font-size: .78rem;
line-height: 1.45
}
.nk-sub-team {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
gap: clamp(36px, 5vw, 78px);
align-items: end
}
.nk-sub-team-media {
position: relative;
min-height: 680px;
overflow: hidden;
border-radius: 9px
}
.nk-sub-team-media img {
width: 100%;
height: 100%;
min-height: 680px;
object-fit: cover
}
.nk-sub-team-copy {
padding-bottom: 2rem
}
.nk-sub-team-copy p {
color: #77736f;
line-height: 1.75
}
.nk-sub-service-stack {
display: grid;
gap: clamp(72px, 8vw, 124px)
}
.nk-sub-service-showcase {
display: grid;
grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
gap: clamp(40px, 6vw, 88px);
align-items: center
}
.nk-sub-service-showcase:nth-child(even) {
grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr)
}
.nk-sub-service-showcase:nth-child(even) .nk-sub-service-copy {
order: 2
}
.nk-sub-service-showcase:nth-child(even) .nk-sub-slider {
order: 1
}
.nk-sub-service-copy {
max-width: 610px
}
.nk-sub-service-icon {
width: 110px;
height: 110px;
display: grid;
place-items: center;
border-radius: 50%;
background: #fff2e9;
margin-bottom: 1.45rem
}
.nk-sub-service-icon img {
width: 110px;
height: 110px
}
.nk-sub-service-index {
display: inline-block;
margin-bottom: .7rem;
color: var(--orange);
font-size: .66rem;
font-weight: 800;
letter-spacing: .16em
}
.nk-sub-service-copy h2 {
margin: 0 0 .6rem;
color: var(--orange);
font-size: 1.5rem;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase
}
.nk-sub-service-copy h3 {
margin: 0;
font-size: clamp(2rem, 3.5vw, 4.1rem);
font-weight: 600;
line-height: 1;
letter-spacing: -.045em
}
.nk-sub-service-copy p {
max-width: 550px;
margin: 1.25rem 0;
color: #76736f;
line-height: 1.72
}
.nk-sub-service-link {
display: inline-flex;
align-items: center;
gap: .7rem;
margin-top: .7rem;
color: var(--ink);
font-size: .72rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase
}
.nk-sub-service-link i {
font-style: normal;
color: var(--orange);
transition: transform .25s ease
}
.nk-sub-service-link:hover i {
transform: translate(4px, -4px)
}
.nk-sub-slider {
position: relative;
overflow: hidden;
border-radius: 9px;
background: #ddd;
min-height: 520px
}
.nk-sub-slider-track {
display: flex;
height: 100%;
transition: transform .65s var(--motion);
will-change: transform
}
.nk-sub-slide {
min-width: 100%;
height: 520px;
position: relative
}
.nk-sub-slide img {
width: 100%;
height: 100%;
object-fit: cover
}
.nk-sub-slider-controls {
position: absolute;
right: 18px;
bottom: 18px;
z-index: 3;
display: flex;
gap: 8px
}
.nk-sub-slider-btn {
width: 48px;
height: 48px;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .93);
color: #252628;
display: grid;
place-items: center;
cursor: pointer;
font-size: 1rem;
box-shadow: 0 10px 25px rgba(0, 0, 0, .12);
transition: background .25s, color .25s, transform .25s
}
.nk-sub-slider-btn:hover {
background: var(--orange);
color: #fff;
transform: translateY(-2px)
}
.nk-sub-slider-dots {
position: absolute;
left: 18px;
bottom: 20px;
z-index: 3;
display: flex;
gap: 7px
}
.nk-sub-slider-dot {
width: 7px;
height: 7px;
border: 0;
padding: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .55);
cursor: pointer;
transition: width .3s, background .3s
}
.nk-sub-slider-dot.active {
width: 24px;
border-radius: 999px;
background: #fff
}
.nk-sub-point-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1px;
background: rgba(41, 42, 44, .13);
border: 1px solid rgba(41, 42, 44, .13)
}
.nk-sub-point {
min-height: 180px;
padding: 30px;
background: #fff
}
.nk-sub-point span {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 50%;
margin-bottom: 1.3rem;
background: #fff2e9;
color: var(--orange);
font-size: .74rem;
font-weight: 800
}
.nk-sub-point h3 {
margin: 0 0 .6rem;
font-size: 1.15rem;
line-height: 1.3
}
.nk-sub-point p {
margin: 0;
color: #77736f;
font-size: .86rem;
line-height: 1.58
}
.nk-sub-detail-grid {
display: grid;
grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
gap: clamp(42px, 7vw, 100px);
align-items: start
}
.nk-sub-detail-copy {
position: sticky;
top: 140px
}
.nk-sub-detail-copy h2 {
font-size: clamp(2.6rem, 4.6vw, 5.3rem);
margin: 0;
line-height: .98;
letter-spacing: -.05em
}
.nk-sub-detail-copy h2 em {
color: var(--orange);
font-family: Georgia, serif;
font-weight: 400
}
.nk-sub-detail-copy p {
color: #77736f;
line-height: 1.75
}
.nk-sub-detail-list {
display: grid;
gap: 12px;
margin-top: 2rem
}
.nk-sub-detail-list span {
padding: 15px 0;
border-bottom: 1px solid rgba(41, 42, 44, .13);
font-size: .93rem;
font-weight: 600
}
.nk-sub-projects .filterbar {
margin-bottom: 2.2rem
}
.nk-sub-contact {
display: grid;
grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
gap: clamp(44px, 7vw, 110px);
align-items: start
}
.nk-sub-contact-copy {
position: sticky;
top: 140px
}
.nk-sub-contact-list {
display: grid;
gap: 0;
margin-top: 2.4rem;
border-top: 1px solid rgba(41, 42, 44, .14)
}
.nk-sub-contact-item {
padding: 17px 0;
border-bottom: 1px solid rgba(41, 42, 44, .14)
}
.nk-sub-contact-item small {
display: block;
margin-bottom: .35rem;
color: var(--orange);
font-size: .61rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase
}
.nk-sub-contact-item a,
.nk-sub-contact-item span {
color: var(--ink);
font-size: .96rem;
line-height: 1.55
}
.nk-sub-contact-form {
padding: clamp(26px, 4vw, 48px);
border-radius: 9px;
background: #f6f4f0
}
.nk-sub-contact-form .nk-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px
}
.nk-sub-contact-form .nk-form-field {
display: grid;
gap: 8px
}
.nk-sub-contact-form .nk-form-field.full {
grid-column: 1/-1
}
.nk-sub-contact-form label {
font-size: .68rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase
}
.nk-sub-contact-form input,
.nk-sub-contact-form select,
.nk-sub-contact-form textarea {
width: 100%;
min-height: 54px;
border: 1px solid rgba(41, 42, 44, .13);
border-radius: 7px;
background: #fff;
padding: 14px 16px;
color: var(--ink);
outline: 0
}
.nk-sub-contact-form textarea {
min-height: 150px;
resize: vertical
}
.nk-sub-contact-form input:focus,
.nk-sub-contact-form select:focus,
.nk-sub-contact-form textarea:focus {
border-color: var(--orange);
box-shadow: 0 0 0 4px rgba(243, 106, 33, .1)
}
.nk-sub-contact-form .nk-btn {
margin-top: 20px
}
.nk-sub-cta {
padding: clamp(72px, 8vw, 110px) max(var(--nk-sub-gutter), calc((100% - var(--nk-sub-container)) / 2));
background: var(--orange);
color: #fff
}
.nk-sub-cta-inner {
display: flex;
align-items: end;
justify-content: space-between;
gap: 40px
}
.nk-sub-cta h2 {
max-width: 850px;
margin: 0;
font-size: clamp(2.7rem, 5vw, 5.8rem);
line-height: .96;
letter-spacing: -.052em
}
.nk-sub-cta .nk-btn {
flex: 0 0 auto;
background: #fff;
color: var(--orange)
}
.nk-sub-cta .nk-btn:hover {
background: #1c1d1f;
color: #fff
}
.nk-subpage [data-reveal] {
transition: opacity .8s var(--motion), transform .8s var(--motion), filter .8s var(--motion)
}
@media(max-width:1100px) {
body:not([data-page="home"]) {
--nk-sub-container: 100%;
--nk-sub-gutter: 30px
}
.nk-sub-head {
grid-template-columns: 1fr
}
.nk-sub-split,
.nk-sub-service-showcase,
.nk-sub-service-showcase:nth-child(even),
.nk-sub-team,
.nk-sub-detail-grid,
.nk-sub-contact {
grid-template-columns: 1fr
}
.nk-sub-service-showcase:nth-child(even) .nk-sub-service-copy,
.nk-sub-service-showcase:nth-child(even) .nk-sub-slider {
order: initial
}
.nk-sub-value-grid,
.nk-sub-point-grid {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.nk-sub-detail-copy,
.nk-sub-contact-copy {
position: static
}
.nk-sub-team-media {
min-height: 560px
}
.nk-sub-team-media img {
min-height: 560px
}
}
@media(max-width:700px) {
body:not([data-page="home"]) {
--nk-sub-gutter: 16px
}
.nk-sub-hero {
min-height: 760px
}
.nk-sub-hero-inner {
padding: 132px 0 50px
}
.nk-sub-hero-card {
border-radius: 32px;
padding: 28px 22px
}
.nk-sub-hero h1 {
font-size: clamp(3rem, 15vw, 4.9rem)
}
.nk-sub-section {
padding: 78px 16px
}
.nk-sub-value-grid,
.nk-sub-point-grid {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.nk-sub-value-grid {
gap: 8px
}
.nk-sub-value-grid .nk-sub-value {
column-gap: 10px;
padding: 14px 12px
}
.nk-sub-value-grid .nk-sub-value-icon {
width: 36px;
height: 36px
}
.nk-sub-value-grid .nk-sub-value-icon img {
width: 18px;
height: 18px
}
.nk-sub-value-grid .nk-sub-value h3 {
font-size: .84rem
}
.nk-sub-media,
.nk-sub-media img {
min-height: 430px
}
.nk-sub-team-media,
.nk-sub-team-media img {
min-height: 470px
}
.nk-sub-slider,
.nk-sub-slide {
min-height: 410px;
height: 410px
}
.nk-sub-contact-form .nk-form-grid {
grid-template-columns: 1fr
}
.nk-sub-contact-form .nk-form-field.full {
grid-column: auto
}
.nk-sub-cta {
padding: 70px 16px
}
.nk-sub-cta-inner {
align-items: flex-start;
flex-direction: column
}
.nk-sub-service-stack {
gap: 78px
}
}
@media(prefers-reduced-motion:reduce) {
.nk-subpage * {
scroll-behavior: auto !important
}
.nk-sub-slider-track,
.nk-sub-media img,
.nk-sub-service-link i,
.nk-sub-slider-btn {
transition: none !important
}
.nk-sub-media:hover img {
transform: none
}
} .nk-sub-servicenav {
display: flex;
flex-wrap: nowrap;
gap: .6rem;
margin: 0;
padding: 0;
list-style: none;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none
}
.nk-sub-servicenav::-webkit-scrollbar {
display: none
}
.nk-sub-servicenav a {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
padding: .62rem 1.15rem;
border: 1px solid rgba(41, 42, 44, .14);
border-radius: 999px;
color: var(--ink);
font-size: .66rem;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
white-space: nowrap;
transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease
}
.nk-sub-servicenav a:hover,
.nk-sub-servicenav a:focus-visible {
background: var(--orange);
color: #fff;
border-color: var(--orange);
transform: translateY(-2px)
} .nk-sub-service-showcase--media-left {
grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr)
}
.nk-sub-service-showcase--stacked {
grid-template-columns: 1fr;
gap: clamp(32px, 5vw, 56px)
}
.nk-sub-service-showcase--stacked .nk-sub-service-copy {
max-width: 820px
}
.nk-sub-service-showcase--stacked .nk-sub-slider,
.nk-sub-service-showcase--stacked .nk-sub-slide {
min-height: 440px;
height: 440px
}
.nk-sub-service-showcase--wide {
grid-template-columns: minmax(0, .58fr) minmax(0, 1.42fr)
}
.nk-sub-service-showcase--wide .nk-sub-service-copy {
max-width: 480px
}
.nk-sub-service-points {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 10px 22px;
margin: 1.6rem 0 0;
padding: 0;
list-style: none;
max-width: 640px
}
.nk-sub-service-points li {
position: relative;
padding-left: 1.35rem;
color: #4c4a47;
font-size: .88rem;
line-height: 1.5
}
.nk-sub-service-points li::before {
content: "";
position: absolute;
left: 0;
top: .55em;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--orange)
}
.nk-sub-service-feature {
padding: clamp(48px, 6vw, 72px);
border-radius: 22px;
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .1)
}
.nk-sub-service-feature .nk-sub-service-copy p {
color: rgba(255, 255, 255, .72)
}
.nk-sub-service-feature .nk-sub-service-points li {
color: rgba(255, 255, 255, .72)
}
.nk-sub-service-feature .nk-sub-service-icon {
background: rgba(255, 255, 255, .1)
}
.nk-sub-section--dark .nk-sub-service-index {
color: #ff8a4d
}
@media(max-width:1100px) {
.nk-sub-service-showcase--wide,
.nk-sub-service-showcase--wide .nk-sub-service-copy {
grid-template-columns: 1fr;
max-width: none
}
}
@media(max-width:700px) {
.nk-sub-service-showcase--stacked .nk-sub-slider,
.nk-sub-service-showcase--stacked .nk-sub-slide {
min-height: 340px;
height: 340px
}
.nk-sub-service-feature {
padding: 32px 20px;
border-radius: 16px
}
} .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
}
} .nk-sub-contact-item {
display: flex;
align-items: center;
gap: 18px
}
.nk-sub-contact-item .nk-sub-contact-icon {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 48px;
height: 48px;
border-radius: 14px;
background: #fff2e9;
color: #f36a21;
font-size: 20px;
transition: background .2s ease, color .2s ease, transform .2s ease
}
.nk-sub-contact-item:hover .nk-sub-contact-icon {
background: #f36a21;
color: #fff;
transform: translateY(-2px)
}
.nk-sub-contact-text {
display: flex;
flex-direction: column;
gap: .2rem;
min-width: 0
}
.nk-sub-contact-item small {
display: none;
color: var(--orange);
font-size: .6rem;
font-weight: 800;
letter-spacing: .13em;
text-transform: uppercase
}
.nk-sub-contact-item a,
.nk-sub-contact-item .nk-sub-contact-text>span:not(small) {
display: block;
font-size: 1.05rem;
color: #292a2c;
transition: color .2s ease
}
.nk-sub-contact-item a:hover {
color: #f36a21
} .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)
} .nk-sub-value-icon {
position: relative;
z-index: 1;
grid-column: 1;
grid-row: 1 / 3;
display: grid;
place-items: center;
width: 66px;
height: 66px;
margin: 0;
border-radius: 50%;
background: radial-gradient(120% 120% at 32% 22%, #fff 0%, #ffe4cd 100%)
}
.nk-sub-value-icon img {
position: relative;
z-index: 1;
width: 50px;
height: 50px;
object-fit: contain
}
.nk-team-grid-head {
max-width: 640px;
margin: 0 auto clamp(2.5rem, 5vw, 4rem);
text-align: center
}
.nk-team-grid-head .nk-section-label {
display: inline-flex;
justify-content: center;
margin: 0 auto .9rem
}
.nk-team-grid-head .nk-section-label::before {
content: "";
width: 7rem;
height: 1px;
background: rgba(243, 106, 33, .72)
}
.nk-team-grid-head h2 {
margin: 0;
font-size: clamp(2.1rem, 4vw, 3.2rem);
font-weight: 600;
letter-spacing: -.03em
}
.nk-team-grid-head .nk-sub-lead {
max-width: 520px;
margin: .85rem auto 0;
color: #77736f
}
.nk-team-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(1rem, 2.5vw, 1.75rem)
}
.nk-team-grid-card {
text-align: center
}
.nk-team-grid-photo {
position: relative;
aspect-ratio: 3/3.6;
border-radius: var(--radius);
overflow: hidden;
background: #eee9e2;
box-shadow: 0 18px 40px rgba(20, 20, 20, .08)
}
.nk-team-grid-photo img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s var(--ease, cubic-bezier(.2, .8, .2, 1))
}
.nk-team-grid-card:hover .nk-team-grid-photo img {
transform: scale(1.05)
}
.nk-team-grid-card h3 {
margin: 1rem 0 0;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -.01em;
color: var(--ink)
}
.nk-team-grid-card span {
display: block;
margin-top: .25rem;
color: var(--orange);
font-size: .82rem;
font-weight: 600
}
.nk-team-grid-cta {
display: flex;
justify-content: center;
margin-top: clamp(2rem, 4vw, 3rem)
}
.nk-btn-ghost {
background: transparent;
color: var(--orange);
border: 1.5px solid var(--orange)
}
.nk-btn-ghost:hover {
background: var(--orange);
color: #fff
}
.nk-btn-ghost i {
margin-left: .5rem
}
.nk-work-head {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
gap: 1.6rem clamp(2rem, 5vw, 4rem);
margin-bottom: clamp(2.5rem, 5vw, 4rem)
}
.nk-work-head-copy {
max-width: 640px;
margin: 0 auto;
text-align: center
}
.nk-work-head-copy .nk-section-label {
display: inline-flex;
justify-content: center;
margin: 0 auto .9rem
}
.nk-work-head-copy .nk-section-label::before {
content: "";
width: 7rem;
height: 1px;
background: rgba(243, 106, 33, .72)
}
.nk-work-head-copy h2 {
margin: 0;
font-size: clamp(2.1rem, 4vw, 3.2rem);
font-weight: 600;
letter-spacing: -.03em;
color: var(--ink)
}
.nk-work-head-copy .nk-sub-lead {
margin: .9rem auto 0;
max-width: 520px;
color: #77736f;
font-weight: 400
}
.nk-work-filters {
display: flex;
flex-wrap: wrap;
gap: .5rem 1.6rem
}
.nk-work-filter {
padding: .55rem 0;
border: 0;
border-bottom: 2px solid transparent;
background: none;
color: #292a2c;
font-size: .92rem;
font-weight: 600;
cursor: pointer;
transition: color .2s ease, border-color .2s ease
}
.nk-work-filter.active,
.nk-work-filter:hover {
color: var(--orange);
border-color: var(--orange)
}
.nk-work-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.4rem
}
.nk-work-tile {
position: relative;
aspect-ratio: 4/3;
border-radius: var(--radius);
overflow: hidden;
background: #eee9e2
}
.nk-work-tile img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s var(--ease, cubic-bezier(.2, .8, .2, 1))
}
.nk-work-tile:hover img {
transform: scale(1.05)
}
.nk-work-tile.is-hidden {
display: none
}
@media(max-width:900px) {
.nk-work-grid {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
}
@media(max-width:620px) {
.nk-work-head {
align-items: flex-start
}
.nk-work-grid {
grid-template-columns: 1fr
}
}
.nk-ref-intro {
max-width: 900px;
margin-bottom: clamp(3rem, 6vw, 5rem)
}
.nk-ref-intro .nk-section-label {
margin-bottom: 1.1rem
}
.nk-ref-intro h2 {
margin: 0;
font-size: clamp(2.4rem, 5vw, 3.9rem);
line-height: 1.06;
letter-spacing: -.03em;
font-weight: 600;
color: var(--ink)
}
.nk-ref-intro h2 span {
color: var(--orange)
}
.nk-ref-intro .nk-sub-lead {
max-width: 62rem;
margin: 1.3rem 0 0;
color: #75736f;
font-size: 1rem;
line-height: 1.75
}
.nk-ref-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1.5rem, 3vw, 2.4rem)
}
.nk-ref-media {
position: relative;
aspect-ratio: 4/3;
border-radius: var(--radius);
overflow: hidden;
background: #eee9e2
}
.nk-ref-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s var(--ease, cubic-bezier(.2, .8, .2, 1))
}
.nk-ref-card:hover .nk-ref-media img {
transform: scale(1.05)
}
.nk-ref-badge {
position: absolute;
top: 1rem;
left: 1rem;
z-index: 2;
padding: .42rem .9rem;
border-radius: 999px;
background: #fff;
color: var(--ink);
font-size: .72rem;
font-weight: 700;
letter-spacing: .01em;
box-shadow: 0 8px 18px rgba(20, 20, 20, .14)
}
.nk-ref-card h3 {
margin: 1.1rem 0 0;
font-size: 1.15rem;
font-weight: 700;
letter-spacing: -.01em;
color: var(--ink)
}
.nk-ref-card p {
margin: .5rem 0 0;
color: #75736f;
font-size: .92rem;
line-height: 1.6
}
@media(max-width:900px) {
.nk-ref-grid {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
}
@media(max-width:620px) {
.nk-ref-grid {
grid-template-columns: 1fr
}
}
@media(max-width:900px) {
.nk-team-grid {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
}
@media(max-width:480px) {
.nk-team-grid {
grid-template-columns: 1fr;
max-width: 280px;
margin-inline: auto
}
}