@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: 1.6rem;
--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)
}
.footer-top {
display: grid;
grid-template-columns: 1.4fr repeat(3, 1fr);
gap: 3rem
}
.footer-brand img {
width: 90px;
height: 90px;
object-fit: contain
}
.footer-brand p {
max-width: 330px;
color: var(--muted)
}
.footer-col h3 {
margin: 0 0 1rem;
color: var(--orange);
font-size: .63rem;
letter-spacing: .14em;
text-transform: uppercase
}
.footer-col a,
.footer-col span {
display: block;
margin: .45rem 0;
color: var(--muted);
font-size: .85rem
}
.footer-col a:hover {
color: var(--orange)
}
.footer-bottom {
display: flex;
justify-content: space-between;
gap: 1rem;
margin-top: 4rem;
padding-top: 1.4rem;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: .62rem;
letter-spacing: .1em;
text-transform: uppercase
}
.footer-legal {
display: flex;
flex-wrap: wrap;
gap: 1rem
}
@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)
}
.footer-top {
grid-template-columns: 1.2fr repeat(2, 1fr)
}
.footer-col:last-child {
grid-column: 2/4
}
}
@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
}
.footer-top {
grid-template-columns: 1fr 1fr
}
.footer-col:last-child {
grid-column: auto
}
.hero-side {
display: none
}
}
@media(max-width:620px) {
:root {
--radius: 1.1rem
}
.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
}
.footer-top {
grid-template-columns: 1fr
}
.footer-bottom {
display: grid
}
.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
}
body[data-page="home"] .nk-instagram .nk-section-label {
display: inline-flex;
align-items: center;
gap: 1.2rem;
}
body[data-page="home"] .nk-instagram .nk-section-label::after {
content: "";
width: 3.5rem;
height: 1px;
background: rgba(243, 106, 33, .72);
}
.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;
align-items: center
}
.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
}
.footer-col a,
.footer-col span,
.footer-brand p,
.footer-bottom {
color: #a9a9a9
}
.footer-brand img {
padding: .45rem;
background: #fff;
border-radius: 3px
}
.footer-bottom {
border-color: rgba(255, 255, 255, .12)
}
@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))
}
.footer-top,
.footer-bottom {
width: 100%;
max-width: var(--content);
margin-inline: auto
}
.footer-bottom {
margin-top: 4rem
}
.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: var(--fs-h2);
font-weight: 400;
line-height: var(--lh-h2);
letter-spacing: var(--ls-h2)
}
.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
}
}