.cmplz-video.cmplz-iframe-styles{background-color:transparent}.cmplz-video.cmplz-hidden{visibility:hidden !important}.cmplz-blocked-content-notice{display:none}.cmplz-placeholder-parent{height:inherit}.cmplz-optin .cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-optin .cmplz-wp-video .cmplz-blocked-content-notice,.cmplz-optout .cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-optout .cmplz-wp-video .cmplz-blocked-content-notice{display:block}.cmplz-blocked-content-container,.cmplz-wp-video{animation-name:cmplz-fadein;animation-duration:600ms;background:#FFF;border:0;border-radius:3px;box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15);display:flex;justify-content:center;align-items:center;background-repeat:no-repeat !important;background-size:cover !important;height:inherit;position:relative}.cmplz-blocked-content-container.gmw-map-cover,.cmplz-wp-video.gmw-map-cover{max-height:100%;position:absolute}.cmplz-blocked-content-container.cmplz-video-placeholder,.cmplz-wp-video.cmplz-video-placeholder{padding-bottom:initial}.cmplz-blocked-content-container iframe,.cmplz-wp-video iframe{visibility:hidden;max-height:100%;border:0 !important}.cmplz-blocked-content-container .cmplz-custom-accept-btn,.cmplz-wp-video .cmplz-custom-accept-btn{white-space:normal;text-transform:initial;cursor:pointer;position:absolute !important;width:100%;top:50%;left:50%;transform:translate(-50%,-50%);max-width:200px;font-size:14px;padding:10px;background-color:rgba(0,0,0,0.5);color:#fff;text-align:center;z-index:98;line-height:23px}.cmplz-blocked-content-container .cmplz-custom-accept-btn:focus,.cmplz-wp-video .cmplz-custom-accept-btn:focus{border:1px dotted #cecece}.cmplz-blocked-content-container .cmplz-blocked-content-notice,.cmplz-wp-video .cmplz-blocked-content-notice{white-space:normal;text-transform:initial;position:absolute !important;width:100%;top:50%;left:50%;transform:translate(-50%,-50%);max-width:300px;font-size:14px;padding:10px;background-color:rgba(0,0,0,0.5);color:#fff;text-align:center;z-index:98;line-height:23px}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-links,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-links{display:block;margin-bottom:10px}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-links a,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-links a{color:#fff}.cmplz-blocked-content-container .cmplz-blocked-content-notice .cmplz-blocked-content-notice-body,.cmplz-wp-video .cmplz-blocked-content-notice .cmplz-blocked-content-notice-body{display:block}.cmplz-blocked-content-container div div{display:none}.cmplz-wp-video .cmplz-placeholder-element{width:100%;height:inherit}@keyframes cmplz-fadein{from{opacity:0}to{opacity:1}}@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(//www.kavs.nl/wp-content/themes/folietotaal-2026/assets/fonts/archivo-latin-500-normal.woff2) format("woff2");
}
@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(//www.kavs.nl/wp-content/themes/folietotaal-2026/assets/fonts/archivo-latin-600-normal.woff2) format("woff2");
}
@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(//www.kavs.nl/wp-content/themes/folietotaal-2026/assets/fonts/archivo-latin-800-normal.woff2) format("woff2");
}
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(//www.kavs.nl/wp-content/themes/folietotaal-2026/assets/fonts/ibm-plex-sans-latin-300-normal.woff2) format("woff2");
}
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(//www.kavs.nl/wp-content/themes/folietotaal-2026/assets/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");
}
@font-face {
font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(//www.kavs.nl/wp-content/themes/folietotaal-2026/assets/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2");
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(//www.kavs.nl/wp-content/themes/folietotaal-2026/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(//www.kavs.nl/wp-content/themes/folietotaal-2026/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");
} :root { --ft-black: #0a0b0d;
--ft-panel: #0e1013;
--ft-panel-hover: #14171b;
--ft-hairline: rgba(241, 240, 237, 0.12);
--ft-hairline-strong: rgba(241, 240, 237, 0.28); --ft-paper: #f1f0ed;
--ft-soft: #c9c9c4;
--ft-body: #9a9a96;
--ft-dim: #8a9099; --ft-red: #e23a2e;
--ft-red-ink: #f04b3d;
--ft-red-deep: #b3261e; --ft-marine-bg: #0c1418;
--ft-marine-accent: #7e93a8;
--ft-marine-line: rgba(126, 147, 168, 0.24);
--ft-marine-body: #a9bac6;
--ft-marine-head: #eaf1f5; --ft-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
--ft-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--ft-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --ft-max: 1240px;
--ft-gutter: 20px;
--ft-section: 76px;
--ft-radius: 2px; --ft-accent-blue: #e23a2e;
--ft-accent-cyan: #f04b3d;
--ft-accent-hover: #b3261e;
--ft-font-mono: var(--ft-mono);
--ft-font-body: var(--ft-sans);
}
@media (min-width: 600px) {
:root {
--ft-gutter: 28px;
--ft-section: 96px;
}
}
@media (min-width: 1000px) {
:root {
--ft-section: 118px;
}
} *,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 90px;
}
body {
margin: 0;
background: var(--ft-black);
color: var(--ft-paper);
font-family: var(--ft-sans);
font-weight: 300;
font-size: 16px;
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img,
video,
svg,
iframe {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--ft-paper);
text-decoration: none;
transition: color 0.2s ease;
}
a:hover,
a:focus-visible {
color: var(--ft-red-ink);
}
p {
margin: 0 0 1.2em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--ft-display);
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.01em;
margin: 0 0 0.5em;
text-wrap: balance;
}
::selection {
background: var(--ft-red);
color: #fff;
}
:focus-visible {
outline: 2px solid var(--ft-red-ink);
outline-offset: 3px;
}
button {
font-family: inherit;
font-size: inherit;
color: inherit;
} .ft-wrap {
width: 100%;
max-width: var(--ft-max);
margin-inline: auto;
padding-inline: var(--ft-gutter);
}
.ft-section {
padding-block: var(--ft-section);
}
.ft-section--panel {
background: var(--ft-panel);
border-top: 1px solid var(--ft-hairline);
border-bottom: 1px solid var(--ft-hairline);
}
.ft-section--ruled {
border-bottom: 1px solid var(--ft-hairline);
}
.ft-eyebrow {
font-family: var(--ft-mono);
font-size: 11px;
font-weight: 400;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ft-red-ink);
margin: 0 0 18px;
}
.ft-label {
font-family: var(--ft-mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ft-dim);
}
.ft-display {
font-family: var(--ft-display);
font-weight: 800;
text-transform: uppercase;
line-height: 0.95;
letter-spacing: -0.02em;
margin: 0;
}
.ft-h2 {
font-size: clamp(28px, 5vw, 68px);
}
.ft-h2--tight {
font-size: clamp(26px, 3.6vw, 48px);
}
.ft-lede {
color: var(--ft-body);
font-size: 16px;
line-height: 1.8;
max-width: 46ch;
}
.ft-section-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 44px;
}
.ft-grid-2 {
display: grid;
grid-template-columns: 1fr;
gap: 48px;
}
@media (min-width: 860px) {
.ft-grid-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 56px;
}
}
.ft-screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.ft-skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 200;
background: var(--ft-red);
color: #fff;
padding: 12px 20px;
font-family: var(--ft-mono);
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.ft-skip-link:focus {
left: 12px;
top: 12px;
color: #fff;
} .ft-btn {
display: inline-block;
font-family: var(--ft-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 16px 26px;
border-radius: var(--ft-radius);
border: 1px solid transparent;
cursor: pointer;
transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.ft-btn--solid {
background: var(--ft-red);
color: #fff;
}
.ft-btn--solid:hover,
.ft-btn--solid:focus-visible {
background: var(--ft-paper);
color: var(--ft-black);
}
.ft-btn--ghost {
border-color: var(--ft-hairline-strong);
color: var(--ft-paper);
background: none;
}
.ft-btn--ghost:hover,
.ft-btn--ghost:focus-visible {
border-color: var(--ft-paper);
color: var(--ft-paper);
} .ft-placeholder {
position: relative;
background: repeating-linear-gradient(105deg, #16181c 0 18px, #1b1e23 18px 36px);
border: 1px solid var(--ft-hairline);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
min-height: 180px;
padding: 20px;
}
.ft-placeholder__note {
font-family: var(--ft-mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ft-dim);
} .ft-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 60;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px var(--ft-gutter);
background: linear-gradient(to bottom, rgba(10, 11, 13, 0.82), rgba(10, 11, 13, 0));
transition: background 0.3s ease;
}
.ft-header.is-scrolled {
background: rgba(10, 11, 13, 0.94);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--ft-hairline);
}
.ft-menu-toggle {
display: flex;
align-items: center;
gap: 12px;
background: none;
border: 0;
padding: 6px 0;
cursor: pointer;
color: var(--ft-paper);
font-family: var(--ft-mono);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.ft-menu-toggle:hover {
color: var(--ft-red-ink);
}
.ft-menu-toggle__bars {
display: flex;
flex-direction: column;
gap: 4px;
width: 22px;
}
.ft-menu-toggle__bars span {
display: block;
height: 2px;
background: currentColor;
transition: width 0.25s ease;
}
.ft-menu-toggle__bars span:nth-child(2) {
width: 14px;
}
.ft-menu-toggle:hover .ft-menu-toggle__bars span:nth-child(2) {
width: 22px;
}
.ft-menu-toggle__label {
display: none;
}
@media (min-width: 480px) {
.ft-menu-toggle__label {
display: inline;
}
}
.ft-brand {
font-family: var(--ft-display);
font-weight: 800;
font-size: 15px;
letter-spacing: 0.3em;
text-transform: uppercase;
white-space: nowrap;
color: var(--ft-paper);
margin: 0;
line-height: 1;
}
.ft-brand a {
color: inherit;
}
.ft-brand__accent {
color: var(--ft-red);
}
.ft-brand__logo {
max-height: 44px;
width: auto;
}
@media (min-width: 720px) {
.ft-brand {
font-size: 17px;
letter-spacing: 0.32em;
}
}
.ft-header__end {
display: flex;
align-items: center;
gap: 14px;
}
.ft-lang {
background: none;
border: 1px solid var(--ft-hairline-strong);
color: var(--ft-paper);
border-radius: var(--ft-radius);
padding: 7px 11px;
cursor: pointer;
font-family: var(--ft-mono);
font-size: 11px;
letter-spacing: 0.14em;
}
.ft-lang:hover {
border-color: var(--ft-red);
color: var(--ft-red-ink);
}
.ft-header__phone {
display: none;
font-family: var(--ft-mono);
font-size: 12px;
letter-spacing: 0.14em;
white-space: nowrap;
}
@media (min-width: 600px) {
.ft-header__phone {
display: inline;
}
} .ft-nav {
position: fixed;
inset: 0;
z-index: 70;
background: rgba(10, 11, 13, 0.98);
backdrop-filter: blur(6px);
overflow-y: auto;
opacity: 0;
transform: translateY(-14px);
pointer-events: none;
visibility: hidden;
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0.4s;
}
.ft-nav.is-open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
visibility: visible;
}
.ft-nav__inner {
max-width: var(--ft-max);
margin: 0 auto;
padding: 104px var(--ft-gutter) 60px;
display: grid;
grid-template-columns: 1fr;
gap: 40px;
}
@media (min-width: 700px) {
.ft-nav__inner {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 48px;
}
}
@media (min-width: 1040px) {
.ft-nav__inner {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-top: 120px;
}
}
.ft-nav__heading {
font-family: var(--ft-mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ft-dim);
margin: 0 0 18px;
}
.ft-nav__heading + .ft-nav__heading {
margin-top: 34px;
}
.ft-nav__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.ft-nav__list a {
font-family: var(--ft-display);
font-weight: 600;
font-size: 22px;
letter-spacing: -0.01em;
line-height: 1.2;
display: inline-block;
}
@media (min-width: 700px) {
.ft-nav__list a {
font-size: 26px;
}
}
.ft-nav__list .sub-menu {
list-style: none;
margin: 6px 0 0;
padding: 0 0 0 16px;
border-left: 1px solid var(--ft-hairline);
display: flex;
flex-direction: column;
gap: 6px;
}
.ft-nav__list .sub-menu a {
font-family: var(--ft-sans);
font-weight: 400;
font-size: 15px;
color: var(--ft-body);
}
.ft-nav__list .sub-menu a:hover {
color: var(--ft-red-ink);
}
.ft-nav__aside {
padding-top: 6px;
}
@media (min-width: 1040px) {
.ft-nav__aside {
border-left: 1px solid var(--ft-hairline);
padding-left: 28px;
padding-top: 0;
}
}
.ft-nav__address {
margin: 0 0 10px;
line-height: 1.7;
font-size: 15px;
color: var(--ft-body);
}
.ft-nav__mail {
font-family: var(--ft-mono);
font-size: 13px;
}
.ft-nav__social {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 24px;
font-family: var(--ft-mono);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.ft-nav__close {
position: absolute;
top: 14px;
right: var(--ft-gutter);
background: none;
border: 0;
color: var(--ft-paper);
font-size: 30px;
line-height: 1;
cursor: pointer;
padding: 6px 10px;
}
.ft-nav__close:hover {
color: var(--ft-red-ink);
}
body.ft-nav-open {
overflow: hidden;
} .ft-hero {
position: relative;
min-height: 100svh;
display: flex;
align-items: flex-end;
overflow: hidden;
}
.ft-hero__media,
.ft-hero__media video,
.ft-hero__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.ft-hero__media {
background: repeating-linear-gradient(115deg, #101215 0 22px, #15181c 22px 44px);
}
.ft-hero__media-note {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ft-mono);
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #4a4e54;
text-align: center;
padding: 0 24px;
}
.ft-hero__scrim {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(10, 11, 13, 0.96) 0%,
rgba(10, 11, 13, 0.35) 45%,
rgba(10, 11, 13, 0.6) 100%
);
}
.ft-hero__inner {
position: relative;
width: 100%;
max-width: var(--ft-max);
margin: 0 auto;
padding: 0 var(--ft-gutter) 96px;
}
.ft-hero__eyebrow {
font-family: var(--ft-mono);
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ft-red-ink);
margin: 0 0 20px;
}
.ft-hero__title {
margin: 0;
font-family: var(--ft-display);
font-weight: 800;
text-transform: uppercase;
font-size: clamp(40px, 9.5vw, 140px);
line-height: 0.9;
letter-spacing: -0.02em;
text-wrap: balance;
}
.ft-hero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
margin-top: 32px;
}
.ft-hero__claim {
font-size: 15px;
color: var(--ft-body);
max-width: 340px;
line-height: 1.6;
}
.ft-hero__badges {
display: flex;
flex-wrap: wrap;
gap: 18px 26px;
margin-top: 44px;
padding-top: 24px;
border-top: 1px solid var(--ft-hairline);
font-family: var(--ft-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ft-dim);
}
.ft-hero__pulse {
position: absolute;
left: 50%;
bottom: 26px;
width: 1px;
height: 44px;
background: linear-gradient(to bottom, var(--ft-red), transparent);
animation: ftPulse 2.4s ease-in-out infinite;
}
@keyframes ftPulse {
0%,
100% {
transform: translateY(0);
opacity: 0.85;
}
50% {
transform: translateY(8px);
opacity: 0.35;
}
} .ft-intro__statement {
margin: 0;
font-family: var(--ft-display);
font-weight: 500;
font-size: clamp(23px, 2.6vw, 38px);
line-height: 1.25;
letter-spacing: -0.01em;
text-wrap: pretty;
}
.ft-intro__side {
display: flex;
flex-direction: column;
gap: 24px;
}
.ft-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: 24px;
padding-top: 24px;
border-top: 1px solid var(--ft-hairline);
}
.ft-stats__value {
font-family: var(--ft-display);
font-weight: 800;
font-size: 38px;
line-height: 1;
}
.ft-stats__label {
font-family: var(--ft-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ft-dim);
margin-top: 6px;
} .ft-services {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: var(--ft-hairline);
border: 1px solid var(--ft-hairline);
}
@media (min-width: 620px) {
.ft-services {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1000px) {
.ft-services {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.ft-service {
position: relative;
background: var(--ft-panel);
padding: 30px 26px 26px;
display: flex;
flex-direction: column;
min-height: 260px;
transition: background 0.35s ease;
color: var(--ft-paper);
}
@media (min-width: 1000px) {
.ft-service {
min-height: 340px;
padding: 34px 30px 30px;
}
}
.ft-service:hover,
.ft-service:focus-visible {
background: var(--ft-panel-hover);
color: var(--ft-paper);
}
.ft-service__index {
font-family: var(--ft-mono);
font-size: 11px;
letter-spacing: 0.2em;
color: var(--ft-red-ink);
}
.ft-service__body {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: auto;
padding-top: 80px;
}
.ft-service__title {
font-family: var(--ft-display);
font-weight: 600;
font-size: 24px;
line-height: 1.15;
margin: 0;
}
.ft-service__text {
color: var(--ft-body);
font-size: 15px;
line-height: 1.6;
margin: 0;
}
.ft-service__thumb {
position: absolute;
inset: 0;
object-fit: cover;
width: 100%;
height: 100%;
opacity: 0.18;
transition: opacity 0.4s ease, transform 0.6s ease;
}
.ft-service:hover .ft-service__thumb {
opacity: 0.3;
transform: scale(1.03);
}
.ft-service__index,
.ft-service__body {
position: relative;
z-index: 1;
} .ft-compare {
position: relative;
height: min(62vw, 560px);
overflow: hidden;
background: var(--ft-panel);
border: 1px solid var(--ft-hairline);
touch-action: pan-y;
user-select: none;
cursor: ew-resize;
}
.ft-compare__layer {
position: absolute;
inset: 0;
}
.ft-compare__layer img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.ft-compare__layer--after {
background: repeating-linear-gradient(105deg, #16181c 0 18px, #1b1e23 18px 36px);
}
.ft-compare__layer--before {
overflow: hidden;
width: 46%;
}
.ft-compare__pane {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: min(100vw, var(--ft-max));
background: repeating-linear-gradient(105deg, #2a2320 0 18px, #332a26 18px 36px);
}
.ft-compare__pane img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.ft-compare__tag {
position: absolute;
bottom: 18px;
font-family: var(--ft-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
white-space: nowrap;
background: rgba(10, 11, 13, 0.7);
padding: 6px 12px;
color: var(--ft-soft);
}
.ft-compare__tag--before {
left: 18px;
}
.ft-compare__tag--after {
right: 18px;
}
.ft-compare__handle {
position: absolute;
top: 0;
bottom: 0;
left: 46%;
width: 2px;
background: var(--ft-red);
transform: translateX(-1px);
display: flex;
align-items: center;
justify-content: center;
border: 0;
padding: 0;
cursor: ew-resize;
}
.ft-compare__grip {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--ft-red);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
} .ft-studio__grid {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
align-items: center;
}
@media (min-width: 900px) {
.ft-studio__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 56px;
}
}
.ft-swatches {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 24px;
padding: 0;
border: 0;
}
.ft-swatch {
width: 42px;
height: 42px;
border-radius: var(--ft-radius);
cursor: pointer;
border: 1px solid var(--ft-hairline-strong);
padding: 0;
transition: transform 0.2s ease, border-color 0.2s ease;
}
.ft-swatch[aria-pressed="true"] {
border: 2px solid var(--ft-red);
transform: scale(1.08);
}
.ft-finishes {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 24px;
padding: 0;
border: 0;
}
.ft-finish {
background: none;
color: var(--ft-body);
border: 1px solid var(--ft-hairline-strong);
border-radius: var(--ft-radius);
padding: 10px 16px;
cursor: pointer;
font-family: var(--ft-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ft-finish[aria-pressed="true"] {
background: var(--ft-paper);
color: var(--ft-black);
border-color: var(--ft-paper);
}
.ft-studio__cta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px;
}
.ft-studio__selection {
font-family: var(--ft-mono);
font-size: 12px;
letter-spacing: 0.12em;
color: var(--ft-dim);
}
.ft-studio__preview {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
border: 1px solid var(--ft-hairline);
background: repeating-linear-gradient(100deg, #14171b 0 20px, #191d22 20px 40px);
}
.ft-studio__preview img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.ft-studio__tint {
position: absolute;
inset: 0;
mix-blend-mode: multiply;
transition: background 0.5s ease, opacity 0.4s ease;
background: #1c1c1e;
opacity: 0.5;
}
.ft-studio__caption {
position: absolute;
left: 0;
bottom: 0;
padding: 12px 16px;
background: rgba(10, 11, 13, 0.78);
font-family: var(--ft-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
} .ft-steps {
display: flex;
flex-direction: column;
border-top: 1px solid var(--ft-hairline);
margin-top: 8px;
}
.ft-steps__row {
display: flex;
gap: 18px;
padding: 16px 0;
border-bottom: 1px solid var(--ft-hairline);
}
.ft-steps__num {
font-family: var(--ft-mono);
font-size: 11px;
color: var(--ft-red-ink);
letter-spacing: 0.16em;
min-width: 26px;
padding-top: 3px;
}
.ft-steps__text {
font-size: 15px;
color: var(--ft-soft);
}
.ft-tiles {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
background: var(--ft-hairline);
border: 1px solid var(--ft-hairline);
align-content: start;
}
.ft-tile {
position: relative;
aspect-ratio: 1;
background: repeating-linear-gradient(120deg, #14171b 0 16px, #191d22 16px 32px);
display: flex;
align-items: flex-end;
padding: 14px;
overflow: hidden;
}
.ft-tile img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.ft-tile__label {
position: relative;
font-family: var(--ft-mono);
font-size: 10px;
letter-spacing: 0.14em;
color: var(--ft-dim);
text-transform: uppercase;
}
.ft-tile img + .ft-tile__label {
color: var(--ft-paper);
background: rgba(10, 11, 13, 0.72);
padding: 5px 9px;
} .ft-marine {
position: relative;
background: var(--ft-marine-bg);
border-top: 1px solid var(--ft-marine-line);
overflow: hidden;
padding-block: calc(var(--ft-section) + 12px);
}
.ft-marine::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(160deg, rgba(126, 147, 168, 0.14), transparent 55%);
pointer-events: none;
}
.ft-marine__inner {
position: relative;
}
.ft-marine__kicker {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
margin-bottom: 26px;
}
.ft-marine__rule {
width: 46px;
height: 1px;
background: var(--ft-marine-accent);
display: block;
}
.ft-marine__kicker span:last-child {
font-family: var(--ft-mono);
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ft-marine-accent);
}
.ft-marine__title {
margin: 0;
font-family: var(--ft-display);
font-weight: 500;
font-size: clamp(28px, 5.6vw, 84px);
line-height: 1.02;
letter-spacing: -0.02em;
color: var(--ft-marine-head);
max-width: 20ch;
text-transform: none;
}
.ft-marine__cols {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
margin-top: 44px;
align-items: start;
}
@media (min-width: 860px) {
.ft-marine__cols {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 52px;
}
}
.ft-marine__text {
margin: 0;
color: var(--ft-marine-body);
line-height: 1.9;
font-size: 17px;
font-weight: 300;
}
.ft-marine__list {
display: flex;
flex-direction: column;
gap: 14px;
list-style: none;
margin: 0;
padding: 0;
}
.ft-marine__row {
display: flex;
justify-content: space-between;
gap: 16px;
padding-bottom: 14px;
border-bottom: 1px solid var(--ft-marine-line);
color: var(--ft-marine-head);
font-size: 15px;
}
.ft-marine__meta {
font-family: var(--ft-mono);
font-size: 11px;
color: var(--ft-marine-accent);
letter-spacing: 0.1em;
white-space: nowrap;
}
.ft-marine__cta {
margin-top: 14px;
align-self: flex-start;
border: 1px solid var(--ft-marine-accent);
color: var(--ft-marine-head);
background: none;
}
.ft-marine__cta:hover,
.ft-marine__cta:focus-visible {
background: var(--ft-marine-accent);
color: var(--ft-marine-bg);
border-color: var(--ft-marine-accent);
}
.ft-marine__media {
margin-top: 48px;
height: min(40vw, 380px);
min-height: 200px;
border: 1px solid rgba(126, 147, 168, 0.2);
background: repeating-linear-gradient(100deg, #101c22 0 22px, #14232a 22px 44px);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.ft-marine__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.ft-marine__media .ft-placeholder__note {
color: #5c7181;
} .ft-reviews {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: var(--ft-hairline);
border: 1px solid var(--ft-hairline);
}
@media (min-width: 700px) {
.ft-reviews {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.ft-review {
background: var(--ft-panel);
padding: 30px 26px;
display: flex;
flex-direction: column;
gap: 16px;
}
.ft-review__stars {
color: var(--ft-red-ink);
letter-spacing: 0.2em;
font-size: 13px;
}
.ft-review__quote {
margin: 0;
font-size: 16px;
line-height: 1.75;
color: var(--ft-soft);
font-style: normal;
}
.ft-review__source {
margin-top: auto;
font-family: var(--ft-mono);
font-size: 11px;
letter-spacing: 0.14em;
color: var(--ft-dim);
text-transform: uppercase;
} .ft-contact__grid {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
align-items: end;
}
@media (min-width: 860px) {
.ft-contact__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 52px;
}
}
.ft-contact__list {
display: flex;
flex-direction: column;
gap: 0;
}
.ft-contact__row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
border-top: 1px solid var(--ft-hairline);
padding: 18px 0;
font-family: var(--ft-display);
font-weight: 600;
font-size: 19px;
word-break: break-word;
}
@media (min-width: 480px) {
.ft-contact__row {
font-size: 22px;
}
}
.ft-contact__row:last-of-type {
border-bottom: 1px solid var(--ft-hairline);
}
.ft-contact__row-meta {
font-family: var(--ft-mono);
font-size: 11px;
letter-spacing: 0.16em;
color: var(--ft-dim);
white-space: nowrap;
}
.ft-contact__meta {
font-family: var(--ft-mono);
font-size: 12px;
letter-spacing: 0.14em;
color: var(--ft-dim);
margin-top: 14px;
line-height: 1.9;
text-transform: uppercase;
}
.ft-footer {
padding: 40px var(--ft-gutter) 96px;
border-top: 1px solid var(--ft-hairline);
}
@media (min-width: 760px) {
.ft-footer {
padding-bottom: 44px;
}
}
.ft-footer__inner {
max-width: var(--ft-max);
margin: 0 auto;
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: space-between;
align-items: center;
font-family: var(--ft-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ft-dim);
}
.ft-footer__menu {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 18px;
margin: 0;
padding: 0;
}
.ft-footer__menu a {
color: var(--ft-dim);
}
.ft-footer__menu a:hover {
color: var(--ft-red-ink);
} .ft-sticky {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 55;
display: flex;
background: rgba(14, 16, 19, 0.96);
border-top: 1px solid var(--ft-hairline);
backdrop-filter: blur(8px);
}
.ft-sticky a {
flex: 1;
text-align: center;
padding: 14px 8px;
font-family: var(--ft-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
border-right: 1px solid var(--ft-hairline);
}
.ft-sticky a:last-child {
border-right: 0;
background: var(--ft-red);
color: #fff;
}
@media (min-width: 760px) {
.ft-sticky {
display: none;
}
} .ft-page-header {
padding: 148px var(--ft-gutter) 0;
max-width: var(--ft-max);
margin: 0 auto;
}
.ft-page-header__title {
font-family: var(--ft-display);
font-weight: 800;
text-transform: uppercase;
font-size: clamp(30px, 5.4vw, 72px);
line-height: 0.96;
letter-spacing: -0.02em;
margin: 0 0 18px;
}
.ft-page-header__meta {
font-family: var(--ft-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ft-dim);
margin: 0 0 14px;
}
.ft-breadcrumb {
font-family: var(--ft-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ft-dim);
margin-bottom: 16px;
}
.ft-breadcrumb a {
color: var(--ft-dim);
}
.ft-content {
max-width: var(--ft-max);
margin: 0 auto;
padding: 48px var(--ft-gutter) var(--ft-section);
}
.ft-content--narrow {
max-width: 760px;
}
.ft-prose {
font-size: 17px;
line-height: 1.8;
color: var(--ft-soft);
}
.ft-prose h2 {
font-size: clamp(24px, 3vw, 36px);
font-weight: 800;
text-transform: uppercase;
letter-spacing: -0.01em;
margin: 1.8em 0 0.6em;
color: var(--ft-paper);
}
.ft-prose h3 {
font-size: clamp(19px, 2.2vw, 24px);
font-weight: 600;
margin: 1.6em 0 0.5em;
color: var(--ft-paper);
}
.ft-prose h4 {
font-size: 17px;
font-weight: 600;
margin: 1.4em 0 0.4em;
color: var(--ft-paper);
}
.ft-prose ul,
.ft-prose ol {
padding-left: 1.2em;
margin: 0 0 1.3em;
}
.ft-prose li {
margin-bottom: 0.5em;
}
.ft-prose a {
color: var(--ft-red-ink);
text-decoration: underline;
text-underline-offset: 3px;
}
.ft-prose a:hover {
color: var(--ft-paper);
}
.ft-prose blockquote {
margin: 1.6em 0;
padding: 4px 0 4px 22px;
border-left: 2px solid var(--ft-red);
color: var(--ft-paper);
font-family: var(--ft-display);
font-weight: 500;
font-size: clamp(19px, 2.2vw, 26px);
line-height: 1.4;
}
.ft-prose table {
width: 100%;
border-collapse: collapse;
margin: 0 0 1.6em;
font-size: 15px;
}
.ft-prose th,
.ft-prose td {
border-bottom: 1px solid var(--ft-hairline);
padding: 11px 12px 11px 0;
text-align: left;
}
.ft-prose th {
font-family: var(--ft-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ft-dim);
font-weight: 400;
}
.ft-prose code {
font-family: var(--ft-mono);
font-size: 0.9em;
background: var(--ft-panel);
padding: 2px 6px;
border-radius: var(--ft-radius);
}
.ft-prose hr {
border: 0;
border-top: 1px solid var(--ft-hairline);
margin: 2.4em 0;
}
.ft-prose img {
border-radius: var(--ft-radius);
}
.ft-card-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: var(--ft-hairline);
border: 1px solid var(--ft-hairline);
}
@media (min-width: 620px) {
.ft-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1000px) {
.ft-card-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.ft-card {
background: var(--ft-panel);
padding: 26px 24px;
display: flex;
flex-direction: column;
gap: 12px;
transition: background 0.3s ease;
}
.ft-card:hover {
background: var(--ft-panel-hover);
}
.ft-card__thumb {
margin: -26px -24px 4px;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.ft-card__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ft-card__title {
font-family: var(--ft-display);
font-weight: 600;
font-size: 21px;
margin: 0;
line-height: 1.2;
}
.ft-card__text {
color: var(--ft-body);
font-size: 15px;
line-height: 1.65;
margin: 0;
}
.ft-card__more {
margin-top: auto;
font-family: var(--ft-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ft-red-ink);
}
.ft-pagination {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 40px;
font-family: var(--ft-mono);
font-size: 12px;
letter-spacing: 0.12em;
}
.ft-pagination .page-numbers {
border: 1px solid var(--ft-hairline);
padding: 9px 14px;
border-radius: var(--ft-radius);
}
.ft-pagination .page-numbers.current {
background: var(--ft-red);
border-color: var(--ft-red);
color: #fff;
}
.ft-search-form {
display: flex;
gap: 8px;
max-width: 420px;
}
.ft-search-form input[type="search"] {
flex: 1;
background: var(--ft-panel);
border: 1px solid var(--ft-hairline);
color: var(--ft-paper);
padding: 12px 14px;
border-radius: var(--ft-radius);
font-family: inherit;
font-size: 15px;
} .alignwide {
width: min(100%, 1100px);
margin-inline: auto;
}
.alignfull {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
.alignleft {
float: left;
margin: 0 1.6em 1em 0;
}
.alignright {
float: right;
margin: 0 0 1em 1.6em;
}
.aligncenter {
margin-inline: auto;
display: block;
}
.wp-caption-text,
.wp-element-caption,
figcaption {
font-family: var(--ft-mono);
font-size: 11px;
letter-spacing: 0.1em;
color: var(--ft-dim);
margin-top: 8px;
text-transform: uppercase;
}
.wp-block-image {
margin: 0 0 1.6em;
}
.wp-block-button__link {
background: var(--ft-red);
color: #fff;
font-family: var(--ft-mono);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 16px 26px;
border-radius: var(--ft-radius);
text-decoration: none;
}
.wp-block-button__link:hover {
background: var(--ft-paper);
color: var(--ft-black);
}
.is-style-outline .wp-block-button__link {
background: none;
border: 1px solid var(--ft-hairline-strong);
color: var(--ft-paper);
}
.wp-block-separator {
border: 0;
border-top: 1px solid var(--ft-hairline);
margin: 2.4em 0;
}
.wp-block-table td,
.wp-block-table th {
border-color: var(--ft-hairline);
}
.wp-block-quote {
border-left: 2px solid var(--ft-red);
padding-left: 22px;
margin: 1.8em 0;
}
.wp-block-pullquote {
border-top: 1px solid var(--ft-hairline);
border-bottom: 1px solid var(--ft-hairline);
padding: 2em 0;
text-align: left;
}
.wp-block-group.has-background,
.wp-block-cover {
border-radius: var(--ft-radius);
} .gform_wrapper.gravity-theme .gfield_label,
.gform_wrapper .gfield_label {
font-family: var(--ft-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ft-dim);
font-weight: 400;
margin-bottom: 8px;
}
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper select,
.gform_wrapper textarea {
background: var(--ft-panel) !important;
border: 1px solid var(--ft-hairline) !important;
color: var(--ft-paper) !important;
border-radius: var(--ft-radius) !important;
padding: 13px 14px !important;
font-family: var(--ft-sans) !important;
font-size: 15px !important;
}
.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
border-color: var(--ft-red) !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(226, 58, 46, 0.18) !important;
}
.gform_wrapper ::placeholder {
color: #6f747c;
}
.gform_wrapper .gform_button,
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_previous_button {
background: var(--ft-red) !important;
color: #fff !important;
border: 0 !important;
border-radius: var(--ft-radius) !important;
font-family: var(--ft-mono) !important;
font-size: 12px !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
padding: 16px 26px !important;
cursor: pointer;
}
.gform_wrapper .gform_button:hover {
background: var(--ft-paper) !important;
color: var(--ft-black) !important;
}
.gform_wrapper .gfield_description,
.gform_wrapper .gform_required_legend {
color: var(--ft-dim);
font-size: 13px;
}
.gform_wrapper .gfield_error .gfield_label,
.gform_wrapper .validation_message {
color: var(--ft-red-ink) !important;
}
.gform_confirmation_message {
border: 1px solid var(--ft-hairline);
background: var(--ft-panel);
padding: 22px 24px;
border-radius: var(--ft-radius);
} .ft-reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ft-reveal.is-visible,
.no-js .ft-reveal {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
.ft-reveal {
opacity: 1;
transform: none;
}
.ft-hero__pulse {
animation: none;
}
} .admin-bar .ft-header {
top: 32px;
}
@media screen and (max-width: 782px) {
.admin-bar .ft-header {
top: 46px;
}
}
@media print {
.ft-header,
.ft-nav,
.ft-sticky,
.ft-hero__pulse {
display: none !important;
}
body {
background: #fff;
color: #000;
}
}html {
background: #0a0b0d;
}
body {
margin: 0;
background: #0a0b0d;
color: #f1f0ed;
}