.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(//folietotaal.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(//folietotaal.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(//folietotaal.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(//folietotaal.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(//folietotaal.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(//folietotaal.nl/wp-content/themes/folietotaal-2026/assets/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2");
} :root {  --ftl-black: #f6f5f1;
--ftl-panel: #ffffff;
--ftl-panel-hover: #fbfaf6;
--ftl-hairline: rgba(18, 21, 26, 0.1);
--ftl-hairline-strong: rgba(18, 21, 26, 0.24); --ftl-paper: #12151a;
--ftl-soft: #383e47;
--ftl-body: #545b64; --ftl-dim: #6a717b; --ftl-red: #d8352a;
--ftl-red-ink: #b8271c;
--ftl-red-deep: #9c1c12; --ftl-vast-donker: #0a0b0d;
--ftl-vast-licht: #f6f5f1; --ftl-marine-bg: #0c1418;
--ftl-marine-accent: #7e93a8;
--ftl-marine-line: rgba(126, 147, 168, 0.24);
--ftl-marine-body: #a9bac6;
--ftl-marine-head: #eaf1f5; --ftl-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
--ftl-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --ftl-mono: "Archivo", "Helvetica Neue", Arial, sans-serif; --ftl-max: 1240px;
--ftl-gutter: 20px;
--ftl-section: 76px;
--ftl-radius: 2px;
--ft-accent-blue: #d8352a;
--ft-accent-cyan: #b8271c;
--ft-accent-hover: #9c1c12;
--ft-font-mono: var(--ftl-mono);
--ft-font-body: var(--ftl-sans);
}
@media (min-width: 600px) {
:root {
--ftl-gutter: 28px;
--ftl-section: 96px;
}
}
@media (min-width: 1000px) {
:root {
--ftl-section: 118px;
}
} *,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 90px;
} :root body,
body {
margin: 0;
background: var(--ftl-black);
color: var(--ftl-paper);
font-family: var(--ftl-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(--ftl-paper);
text-decoration: none;
transition: color 0.2s ease;
}
a:hover,
a:focus-visible {
color: var(--ftl-red-ink);
}
p {
margin: 0 0 1.2em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--ftl-display);
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.01em;
margin: 0 0 0.5em;
text-wrap: balance;
} .ft-dark {
--ftl-black: #0a0b0d;
--ftl-panel: #0e1013;
--ftl-panel-hover: #14171b;
--ftl-hairline: rgba(241, 240, 237, 0.12);
--ftl-hairline-strong: rgba(241, 240, 237, 0.28);
--ftl-paper: #f1f0ed;
--ftl-soft: #c9c9c4;
--ftl-body: #9a9a96;
--ftl-dim: #8a9099; --ftl-red: #d8352a;
--ftl-red-ink: #f04b3d;
--ftl-red-deep: #b3261e;
background: var(--ftl-black);
color: var(--ftl-paper);
}
::selection {
background: var(--ftl-red);
color: #fff;
}
:focus-visible {
outline: 2px solid var(--ftl-red-ink);
outline-offset: 3px;
}
button {
font-family: inherit;
font-size: inherit;
color: inherit;
} .ft-wrap {
width: 100%;
max-width: var(--ftl-max);
margin-inline: auto;
padding-inline: var(--ftl-gutter);
}
.ft-section {
padding-block: var(--ftl-section);
}
.ft-section--panel {
background: var(--ftl-panel);
border-top: 1px solid var(--ftl-hairline);
border-bottom: 1px solid var(--ftl-hairline);
}
.ft-section--ruled {
border-bottom: 1px solid var(--ftl-hairline);
}
.ft-eyebrow {
font-family: var(--ftl-mono);
font-size: 11px;
font-weight: 400;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ftl-red-ink);
margin: 0 0 18px;
}
.ft-label {
font-family: var(--ftl-mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ftl-dim);
}
.ft-display {
font-family: var(--ftl-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(--ftl-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(--ftl-red);
color: #fff;
padding: 12px 20px;
font-family: var(--ftl-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(--ftl-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 16px 26px;
border-radius: var(--ftl-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(--ftl-red);
color: #fff;
}
.ft-btn--solid:hover,
.ft-btn--solid:focus-visible {
background: var(--ftl-paper);
color: var(--ftl-black);
}
.ft-btn--ghost {
border-color: var(--ftl-hairline-strong);
color: var(--ftl-paper);
background: none;
}
.ft-btn--ghost:hover,
.ft-btn--ghost:focus-visible {
border-color: var(--ftl-paper);
color: var(--ftl-paper);
} .ft-placeholder {
position: relative;
background: repeating-linear-gradient(105deg, #16181c 0 18px, #1b1e23 18px 36px);
border: 1px solid var(--ftl-hairline);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
min-height: 180px;
padding: 20px;
}
.ft-placeholder__note {
font-family: var(--ftl-mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ftl-dim);
} .ft-header { --ftl-kop-inkt: #f1f0ed;
position: fixed;
inset: 0 0 auto 0;
z-index: 60;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 14px var(--ftl-gutter);
color: var(--ftl-kop-inkt);
background: transparent;
transition: background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
} body:not(.ft-kop-licht):not(.ft-kop-beeld) .ft-header:not(.is-scrolled) {
background: linear-gradient(to bottom, rgba(10, 11, 13, 0.82), rgba(10, 11, 13, 0));
}
.ft-header.is-scrolled,
body.ft-kop-licht .ft-header {
--ftl-kop-inkt: #12151a;
background: #ffffff;
box-shadow: 0 1px 0 rgba(18, 21, 26, 0.12);
} body.ft-kop-beeld .ft-header:not(.is-scrolled) {
--ftl-kop-inkt: #f1f0ed;
background: linear-gradient(to bottom, rgba(10, 11, 13, 0.82), rgba(10, 11, 13, 0));
box-shadow: none;
}
.ft-menu-toggle {
display: flex;
align-items: center;
gap: 12px;
position: relative;
z-index: 2;
flex: 0 0 auto;
min-width: 44px;
min-height: 44px;
background: none;
border: 0;
padding: 6px 0;
cursor: pointer;
color: var(--ftl-kop-inkt);
font-family: var(--ftl-mono);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.ft-menu-toggle:hover {
color: var(--ftl-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-header__start {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
flex-shrink: 1;
overflow: hidden;
} .ft-mainnav {
display: none;
}
.ft-mainnav__items {
list-style: none;
display: flex;
align-items: center;
gap: 4px;
margin: 0;
padding: 0;
}
.ft-mainnav__item {
position: relative;
}
.ft-mainnav__button {
white-space: nowrap;
display: flex;
align-items: center;
gap: 7px;
background: none;
border: 0;
cursor: pointer;
padding: 10px 14px;
color: var(--ftl-kop-inkt);
font-family: var(--ftl-mono);
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
border-radius: var(--ftl-radius);
transition: color 0.2s ease, background 0.2s ease;
}
.ft-mainnav__button:hover,
.ft-mainnav__item.is-open .ft-mainnav__button {
color: var(--ftl-red);
background: rgba(18, 21, 26, 0.05);
}
.ft-mainnav__chev {
width: 7px;
height: 7px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg) translate(-2px, -2px);
transition: transform 0.25s ease;
}
.ft-mainnav__item.is-open .ft-mainnav__chev {
transform: rotate(-135deg) translate(-3px, -3px);
}
.ft-mainnav__drop {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 250px;
background: #ffffff;
border: 1px solid rgba(18, 21, 26, 0.1);
border-radius: var(--ftl-radius);
padding: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
box-shadow: 0 18px 44px rgba(18, 21, 26, 0.16);
}
.ft-mainnav__item.is-open .ft-mainnav__drop {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.ft-mainnav__list {
list-style: none;
margin: 0;
padding: 0;
}
.ft-mainnav__list a {
display: block;
padding: 10px 14px;
font-size: 15px;
line-height: 1.35;
border-radius: var(--ftl-radius);
color: #383e47;
transition: background 0.15s ease, color 0.15s ease;
}
.ft-mainnav__list a:hover,
.ft-mainnav__list a:focus-visible {
background: rgba(216, 53, 42, 0.1);
color: #12151a;
}
.ft-header__cta {
display: none;
font-family: var(--ftl-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
background: var(--ftl-red);
color: #fff;
padding: 10px 16px;
border-radius: var(--ftl-radius);
white-space: nowrap;
transition: background 0.2s ease, color 0.2s ease;
}
.ft-header__cta:hover,
.ft-header__cta:focus-visible {
background: var(--ftl-paper);
color: var(--ftl-black);
}
@media (min-width: 1040px) {
.ft-menu-toggle {
display: none;
}
.ft-mainnav {
display: block;
}
.ft-header__cta {
display: inline-block;
}
}
.ft-brand {
font-family: var(--ftl-display);
font-weight: 800;
font-size: 15px;
letter-spacing: 0.3em;
text-transform: uppercase;
white-space: nowrap;
color: var(--ftl-kop-inkt);
margin: 0;
line-height: 1;
}
.ft-brand a {
color: inherit;
}
.ft-brand__accent {
color: var(--ftl-red);
} .ft-brand img,
.ft-brand__logo {
max-height: 34px;
width: auto;
display: block;
}
@media (min-width: 720px) {
.ft-brand img,
.ft-brand__logo {
max-height: 44px;
}
}
@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 currentColor;
color: var(--ftl-kop-inkt);
border-radius: var(--ftl-radius);
padding: 7px 11px;
cursor: pointer;
font-family: var(--ftl-mono);
font-size: 11px;
letter-spacing: 0.14em;
}
.ft-lang:hover {
border-color: var(--ftl-red);
color: var(--ftl-red-ink);
}
.ft-header__phone {
display: none;
font-family: var(--ftl-mono);
font-size: 12px;
letter-spacing: 0.14em;
white-space: nowrap;
color: var(--ftl-kop-inkt);
}
@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(--ftl-max);
margin: 0 auto;
padding: 104px var(--ftl-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(--ftl-mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ftl-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(--ftl-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(--ftl-hairline);
display: flex;
flex-direction: column;
gap: 6px;
}
.ft-nav__list .sub-menu a {
font-family: var(--ftl-sans);
font-weight: 400;
font-size: 15px;
color: var(--ftl-body);
}
.ft-nav__list .sub-menu a:hover {
color: var(--ftl-red-ink);
}
.ft-nav__aside {
padding-top: 6px;
}
@media (min-width: 1040px) {
.ft-nav__aside {
border-left: 1px solid var(--ftl-hairline);
padding-left: 28px;
padding-top: 0;
}
}
.ft-nav__address {
margin: 0 0 10px;
line-height: 1.7;
font-size: 15px;
color: var(--ftl-body);
}
.ft-nav__mail {
font-family: var(--ftl-mono);
font-size: 13px;
}
.ft-nav__social {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 24px;
font-family: var(--ftl-mono);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.ft-nav__close {
position: absolute;
top: 14px;
right: var(--ftl-gutter);
background: none;
border: 0;
color: var(--ftl-paper);
font-size: 30px;
line-height: 1;
cursor: pointer;
padding: 6px 10px;
}
.ft-nav__close:hover {
color: var(--ftl-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--video {
background: var(--ftl-black);
} .ft-hero__frame {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.ft-hero__frame iframe {
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
height: 56.25vw;
min-height: 100svh;
min-width: 177.78svh;
transform: translate(-50%, -50%);
border: 0;
}
.ft-hero__media-note {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ftl-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(--ftl-max);
margin: 0 auto;
padding: 0 var(--ftl-gutter) 96px;
}
.ft-hero__eyebrow {
font-family: var(--ftl-mono);
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ftl-red-ink);
margin: 0 0 20px;
}
.ft-hero__title {
margin: 0;
font-family: var(--ftl-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(--ftl-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(--ftl-hairline);
font-family: var(--ftl-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ftl-dim);
}
.ft-hero__pulse {
position: absolute;
left: 50%;
bottom: 26px;
width: 1px;
height: 44px;
background: linear-gradient(to bottom, var(--ftl-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(--ftl-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(--ftl-hairline);
}
.ft-stats__value {
font-family: var(--ftl-display);
font-weight: 800;
font-size: 38px;
line-height: 1;
}
.ft-stats__label {
font-family: var(--ftl-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ftl-dim);
margin-top: 6px;
} .ft-services {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: var(--ftl-hairline);
border: 1px solid var(--ftl-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(--ftl-panel);
padding: 30px 26px 26px;
display: flex;
flex-direction: column;
min-height: 260px;
transition: background 0.35s ease;
color: var(--ftl-paper);
}
@media (min-width: 1000px) {
.ft-service {
min-height: 340px;
padding: 34px 30px 30px;
}
}
.ft-service:hover,
.ft-service:focus-visible {
background: var(--ftl-panel-hover);
color: var(--ftl-paper);
}
.ft-service__index {
font-family: var(--ftl-mono);
font-size: 11px;
letter-spacing: 0.2em;
color: var(--ftl-red-ink);
}
.ft-service__body {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: auto;
padding-top: 80px;
}
.ft-service__title {
font-family: var(--ftl-display);
font-weight: 600;
font-size: 24px;
line-height: 1.15;
margin: 0;
}
.ft-service__text {
color: var(--ftl-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 { --ft-compare-pos: 46%;
position: relative;
max-width: 900px;
height: min(52vw, 420px);
overflow: hidden;
background: var(--ftl-panel);
border: 1px solid var(--ftl-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 {
width: 100%;
overflow: hidden;
clip-path: inset(0 calc(100% - var(--ft-compare-pos)) 0 0);
}
.ft-compare__pane {
position: absolute;
inset: 0;
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(--ftl-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(--ftl-soft);
}
.ft-compare__tag--before {
left: 18px;
}
.ft-compare__tag--after {
right: 18px;
} .ft-compare__handle {
position: absolute;
top: 0;
bottom: 0;
left: var(--ft-compare-pos);
width: 2px;
background: var(--ftl-red);
transform: translateX(-1px);
display: flex;
align-items: center;
justify-content: center;
border: 0;
padding: 0;
cursor: ew-resize;
touch-action: none;
}
.ft-compare__handle::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -22px;
right: -22px;
}
.ft-compare__grip {
touch-action: none;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--ftl-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(--ftl-radius);
cursor: pointer;
border: 1px solid var(--ftl-hairline-strong);
padding: 0;
transition: transform 0.2s ease, border-color 0.2s ease;
}
.ft-swatch[aria-pressed="true"] {
border: 2px solid var(--ftl-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(--ftl-body);
border: 1px solid var(--ftl-hairline-strong);
border-radius: var(--ftl-radius);
padding: 10px 16px;
cursor: pointer;
font-family: var(--ftl-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(--ftl-paper);
color: var(--ftl-black);
border-color: var(--ftl-paper);
}
.ft-studio__cta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px;
}
.ft-studio__selection {
font-family: var(--ftl-mono);
font-size: 12px;
letter-spacing: 0.12em;
color: var(--ftl-dim);
}
.ft-studio__preview {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
border: 1px solid var(--ftl-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(--ftl-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
} .ft-steps {
display: flex;
flex-direction: column;
border-top: 1px solid var(--ftl-hairline);
margin-top: 8px;
}
.ft-steps__row {
display: flex;
gap: 18px;
padding: 16px 0;
border-bottom: 1px solid var(--ftl-hairline);
}
.ft-steps__num {
font-family: var(--ftl-mono);
font-size: 11px;
color: var(--ftl-red-ink);
letter-spacing: 0.16em;
min-width: 26px;
padding-top: 3px;
}
.ft-steps__text {
font-size: 15px;
color: var(--ftl-soft);
}
.ft-tiles {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
background: var(--ftl-hairline);
border: 1px solid var(--ftl-hairline);
align-content: start;
} .ft-tile {
position: relative;
aspect-ratio: 4 / 3;
background: repeating-linear-gradient(120deg, #14171b 0 16px, #191d22 16px 32px);
display: flex;
align-items: flex-end;
padding: 12px;
overflow: hidden;
}
.ft-tile img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.ft-tile__label {
position: relative;
font-family: var(--ftl-mono);
font-size: 10px;
letter-spacing: 0.14em;
color: var(--ftl-dim);
text-transform: uppercase;
} .ft-tile img + .ft-tile__label {
color: #f1f0ed;
background: none;
padding: 0;
text-shadow: 0 1px 8px rgba(10, 11, 13, 0.9);
} .ft-tile:has(img)::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 45%;
background: linear-gradient(to top, rgba(10, 11, 13, 0.75), transparent);
pointer-events: none;
}
.ft-tile img + .ft-tile__label {
position: relative;
z-index: 1;
} .ft-marine {
position: relative;
background: var(--ftl-marine-bg);
border-top: 1px solid var(--ftl-marine-line);
overflow: hidden;
padding-block: calc(var(--ftl-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(--ftl-marine-accent);
display: block;
}
.ft-marine__kicker span:last-child {
font-family: var(--ftl-mono);
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ftl-marine-accent);
}
.ft-marine__title {
margin: 0;
font-family: var(--ftl-display);
font-weight: 500;
font-size: clamp(28px, 5.6vw, 84px);
line-height: 1.02;
letter-spacing: -0.02em;
color: var(--ftl-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(--ftl-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(--ftl-marine-line);
color: var(--ftl-marine-head);
font-size: 15px;
}
.ft-marine__meta {
font-family: var(--ftl-mono);
font-size: 11px;
color: var(--ftl-marine-accent);
letter-spacing: 0.1em;
white-space: nowrap;
}
.ft-marine__cta {
margin-top: 14px;
align-self: flex-start;
border: 1px solid var(--ftl-marine-accent);
color: var(--ftl-marine-head);
background: none;
}
.ft-marine__cta:hover,
.ft-marine__cta:focus-visible {
background: var(--ftl-marine-accent);
color: var(--ftl-marine-bg);
border-color: var(--ftl-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 {
--ftl-per: 1;
}
@media (min-width: 700px) {
.ft-reviews {
--ftl-per: 2;
}
}
@media (min-width: 1000px) {
.ft-reviews {
--ftl-per: 3;
}
}
.ft-reviews__viewport {
overflow: hidden;
border: 1px solid var(--ftl-hairline);
background: var(--ftl-hairline);
}
.ft-reviews__track {
display: flex;
gap: 1px;
transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
.ft-review {
flex: 0 0 calc((100% - (var(--ftl-per) - 1) * 1px) / var(--ftl-per));
background: var(--ftl-panel);
padding: 30px 26px;
display: flex;
flex-direction: column;
gap: 16px;
min-height: 260px;
}
.ft-review__stars {
color: var(--ftl-red-ink);
letter-spacing: 0.2em;
font-size: 13px;
}
.ft-review__quote {
margin: 0;
font-size: 16px;
line-height: 1.75;
color: var(--ftl-soft);
font-style: normal;
}
.ft-review__source {
margin-top: auto;
font-family: var(--ftl-mono);
font-size: 11px;
letter-spacing: 0.14em;
color: var(--ftl-dim);
text-transform: uppercase;
}
.ft-reviews__nav {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 20px;
}
.ft-reviews__dots {
display: flex;
flex-wrap: wrap;
gap: 8px;
} .ft-reviews__dot {
width: 26px;
height: 44px;
background: none;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
cursor: pointer;
transition: width 0.3s ease;
}
.ft-reviews__dot[aria-selected="true"] {
width: 44px;
}
.ft-reviews__pijlen {
display: flex;
gap: 8px;
}
.ft-reviews__pijl {
width: 42px;
height: 42px;
border: 1px solid var(--ftl-hairline-strong);
background: transparent;
color: var(--ftl-paper);
border-radius: var(--ftl-radius);
font-size: 16px;
line-height: 1;
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease;
}
.ft-reviews__pijl:hover {
border-color: var(--ftl-red);
color: var(--ftl-red-ink);
} .no-js .ft-reviews__viewport,
.ft-reviews.is-statisch .ft-reviews__viewport {
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.no-js .ft-reviews__track,
.ft-reviews.is-statisch .ft-reviews__track {
transition: none;
transform: none !important;
}
.ft-reviews.is-statisch .ft-review {
scroll-snap-align: start;
} .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(--ftl-hairline);
padding: 18px 0;
font-family: var(--ftl-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(--ftl-hairline);
}
.ft-contact__row-meta {
font-family: var(--ftl-mono);
font-size: 11px;
letter-spacing: 0.16em;
color: var(--ftl-dim);
white-space: nowrap;
}
.ft-contact__meta {
font-family: var(--ftl-mono);
font-size: 12px;
letter-spacing: 0.14em;
color: var(--ftl-dim);
margin-top: 14px;
line-height: 1.9;
text-transform: uppercase;
}
.ft-footer {
padding: 40px var(--ftl-gutter) 96px;
border-top: 1px solid var(--ftl-hairline);
}
@media (min-width: 760px) {
.ft-footer {
padding-bottom: 44px;
}
}
.ft-footer__inner {
max-width: var(--ftl-max);
margin: 0 auto;
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: space-between;
align-items: center;
font-family: var(--ftl-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ftl-dim);
}
.ft-footer__menu {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 18px;
margin: 0;
padding: 0;
}
.ft-footer__menu a {
color: var(--ftl-dim);
}
.ft-footer__menu a:hover {
color: var(--ftl-red-ink);
} .ft-sticky {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 55;
display: flex;
background: rgba(255, 255, 255, 0.94);
border-top: 1px solid var(--ftl-hairline);
backdrop-filter: blur(8px);
}
.ft-sticky a {
flex: 1;
text-align: center;
padding: 14px 8px;
font-family: var(--ftl-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
border-right: 1px solid var(--ftl-hairline);
}
.ft-sticky a:last-child {
border-right: 0;
background: var(--ftl-red);
color: #fff;
}
@media (min-width: 760px) {
.ft-sticky {
display: none;
}
} .ft-page-header {
padding: 148px var(--ftl-gutter) 0;
max-width: var(--ftl-max);
margin: 0 auto;
} .ft-page-header--beeld {
position: relative;
max-width: none;
padding: 0;
margin-bottom: 44px;
min-height: clamp(240px, 34vw, 420px);
display: flex;
align-items: flex-end;
overflow: hidden;
background: var(--ftl-panel);
}
.ft-page-header__media {
position: absolute;
inset: 0;
}
.ft-page-header__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ft-page-header__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(10, 11, 13, 0.35) 0%, rgba(10, 11, 13, 0.72) 55%, rgba(10, 11, 13, 0.94) 100%);
}
.ft-page-header--beeld .ft-page-header__inner {
position: relative;
width: 100%;
max-width: var(--ftl-max);
margin: 0 auto;
padding: 0 var(--ftl-gutter) 40px;
}
.ft-page-header__lede {
margin-top: 16px;
max-width: 56ch;
}
.ft-breadcrumb--los {
max-width: var(--ftl-max);
margin: 0 auto;
padding: 132px var(--ftl-gutter) 0;
} .ft-breadcrumb--los a {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
letter-spacing: 0.1em;
color: var(--ftl-soft);
text-decoration: none;
padding: 8px 0;
min-height: 40px;
border-bottom: 1px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
}
.ft-breadcrumb--los a::before {
content: "\2190";
font-size: 15px;
line-height: 1;
}
.ft-breadcrumb--los a:hover,
.ft-breadcrumb--los a:focus-visible {
color: var(--ftl-red);
border-bottom-color: var(--ftl-red);
}
.ft-page-header--beeld + .ft-content {
padding-top: 0;
}
.ft-page-header__title {
font-family: var(--ftl-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(--ftl-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ftl-dim);
margin: 0 0 14px;
}
.ft-breadcrumb {
font-family: var(--ftl-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ftl-dim);
margin-bottom: 16px;
}
.ft-breadcrumb a {
color: var(--ftl-dim);
}
.ft-content {
max-width: var(--ftl-max);
margin: 0 auto;
padding: 48px var(--ftl-gutter) var(--ftl-section);
}
.ft-content--narrow {
max-width: 760px;
}
.ft-prose {
font-size: 17px;
line-height: 1.8;
color: var(--ftl-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(--ftl-paper);
}
.ft-prose h3 {
font-size: clamp(19px, 2.2vw, 24px);
font-weight: 600;
margin: 1.6em 0 0.5em;
color: var(--ftl-paper);
}
.ft-prose h4 {
font-size: 17px;
font-weight: 600;
margin: 1.4em 0 0.4em;
color: var(--ftl-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(--ftl-red-ink);
text-decoration: underline;
text-underline-offset: 3px;
}
.ft-prose a:hover {
color: var(--ftl-paper);
}
.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(--ftl-hairline);
padding: 11px 12px 11px 0;
text-align: left;
}
.ft-prose th {
font-family: var(--ftl-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ftl-dim);
font-weight: 400;
}
.ft-prose code {
font-family: var(--ftl-mono);
font-size: 0.9em;
background: var(--ftl-panel);
padding: 2px 6px;
border-radius: var(--ftl-radius);
}
.ft-prose hr {
border: 0;
border-top: 1px solid var(--ftl-hairline);
margin: 2.4em 0;
}
.ft-prose img {
border-radius: var(--ftl-radius);
}
.ft-card-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: var(--ftl-hairline);
border: 1px solid var(--ftl-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(--ftl-panel);
padding: 26px 24px;
display: flex;
flex-direction: column;
gap: 12px;
transition: background 0.3s ease;
}
.ft-card:hover {
background: var(--ftl-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(--ftl-display);
font-weight: 600;
font-size: 21px;
margin: 0;
line-height: 1.2;
}
.ft-card__text {
color: var(--ftl-body);
font-size: 15px;
line-height: 1.65;
margin: 0;
}
.ft-card__more {
margin-top: auto;
font-family: var(--ftl-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ftl-red-ink);
}
.ft-pagination {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 40px;
font-family: var(--ftl-mono);
font-size: 12px;
letter-spacing: 0.12em;
}
.ft-pagination .page-numbers {
border: 1px solid var(--ftl-hairline);
padding: 9px 14px;
border-radius: var(--ftl-radius);
}
.ft-pagination .page-numbers.current {
background: var(--ftl-red);
border-color: var(--ftl-red);
color: #fff;
}
.ft-search-form {
display: flex;
gap: 8px;
max-width: 420px;
}
.ft-search-form input[type="search"] {
flex: 1;
background: var(--ftl-panel);
border: 1px solid var(--ftl-hairline);
color: var(--ftl-paper);
padding: 12px 14px;
border-radius: var(--ftl-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(--ftl-mono);
font-size: 11px;
letter-spacing: 0.1em;
color: var(--ftl-dim);
margin-top: 8px;
text-transform: uppercase;
}
.wp-block-image {
margin: 0 0 1.6em;
}
.wp-block-button__link {
background: var(--ftl-red);
color: #fff;
font-family: var(--ftl-mono);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 16px 26px;
border-radius: var(--ftl-radius);
text-decoration: none;
}
.wp-block-button__link:hover {
background: var(--ftl-paper);
color: var(--ftl-black);
}
.is-style-outline .wp-block-button__link {
background: none;
border: 1px solid var(--ftl-hairline-strong);
color: var(--ftl-paper);
}
.wp-block-separator {
border: 0;
border-top: 1px solid var(--ftl-hairline);
margin: 2.4em 0;
}
.wp-block-table td,
.wp-block-table th {
border-color: var(--ftl-hairline);
}
.wp-block-quote {
border-left: 2px solid var(--ftl-red);
padding-left: 22px;
margin: 1.8em 0;
}
.wp-block-pullquote {
border-top: 1px solid var(--ftl-hairline);
border-bottom: 1px solid var(--ftl-hairline);
padding: 2em 0;
text-align: left;
}
.wp-block-group.has-background,
.wp-block-cover {
border-radius: var(--ftl-radius);
} .gform_wrapper.gravity-theme .gfield_label,
.gform_wrapper .gfield_label {
font-family: var(--ftl-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ftl-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(--ftl-panel) !important;
border: 1px solid var(--ftl-hairline) !important;
color: var(--ftl-paper) !important;
border-radius: var(--ftl-radius) !important;
padding: 13px 14px !important;
font-family: var(--ftl-sans) !important;
font-size: 15px !important;
}
.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
border-color: var(--ftl-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(--ftl-red) !important;
color: #fff !important;
border: 0 !important;
border-radius: var(--ftl-radius) !important;
font-family: var(--ftl-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(--ftl-paper) !important;
color: var(--ftl-black) !important;
}
.gform_wrapper .gfield_description,
.gform_wrapper .gform_required_legend {
color: var(--ftl-dim);
font-size: 13px;
}
.gform_wrapper .gfield_error .gfield_label,
.gform_wrapper .validation_message {
color: var(--ftl-red-ink) !important;
}
.gform_confirmation_message {
border: 1px solid var(--ftl-hairline);
background: var(--ftl-panel);
padding: 22px 24px;
border-radius: var(--ftl-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;
}
} .ft-kanalen {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: var(--ftl-hairline);
border: 1px solid var(--ftl-hairline);
margin-bottom: 56px;
}
@media (min-width: 620px) {
.ft-kanalen {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1000px) {
.ft-kanalen {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.ft-kanaal {
background: var(--ftl-panel);
padding: 24px 22px;
display: flex;
flex-direction: column;
gap: 6px;
transition: background 0.3s ease;
color: var(--ftl-paper);
}
.ft-kanaal:hover,
.ft-kanaal:focus-visible {
background: var(--ftl-panel-hover);
color: var(--ftl-paper);
}
.ft-kanaal--accent {
background: rgba(226, 58, 46, 0.12);
}
.ft-kanaal--accent:hover {
background: rgba(226, 58, 46, 0.2);
}
.ft-kanaal__label {
font-family: var(--ftl-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ftl-red-ink);
}
.ft-kanaal__waarde {
font-family: var(--ftl-display);
font-weight: 600;
font-size: 19px;
line-height: 1.25;
word-break: break-word;
}
.ft-kanaal__hint {
font-size: 13.5px;
line-height: 1.5;
color: var(--ftl-body);
margin-top: auto;
padding-top: 4px;
}
.ft-contactgrid {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
align-items: start;
}
@media (min-width: 900px) {
.ft-contactgrid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: 52px;
}
}
.ft-gegevens {
border-top: 1px solid var(--ftl-hairline);
}
.ft-gegevens__rij {
display: grid;
grid-template-columns: 130px 1fr;
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid var(--ftl-hairline);
font-size: 15px;
line-height: 1.6;
color: var(--ftl-soft);
}
@media (max-width: 480px) {
.ft-gegevens__rij {
grid-template-columns: 1fr;
gap: 4px;
}
}
.ft-kaart {
position: relative;
aspect-ratio: 4 / 3;
border: 1px solid var(--ftl-hairline);
overflow: hidden;
background: var(--ftl-panel);
}
.ft-kaart iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
filter: grayscale(1) contrast(1.02);
} .ft-ref__intl {
margin: 24px 0 0;
padding-top: 20px;
border-top: 1px solid var(--ftl-hairline);
font-size: 14.5px;
line-height: 1.7;
color: var(--ftl-dim);
max-width: 46ch;
}
.ft-segmenten {
border-top: 1px solid var(--ftl-hairline);
}
.ft-segment {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px 0;
border-bottom: 1px solid var(--ftl-hairline);
}
.ft-segment__naam {
font-family: var(--ftl-display);
font-weight: 600;
font-size: 17px;
color: var(--ftl-paper);
line-height: 1.25;
}
.ft-segment__uitleg {
font-size: 14.5px;
line-height: 1.55;
color: var(--ftl-body);
}
.ft-logos {
margin-top: 56px;
padding-top: 32px;
border-top: 1px solid var(--ftl-hairline);
}
.ft-logos__kop {
display: block;
margin: 0 0 22px;
}
.ft-logos__spoor {
overflow-x: auto;
scrollbar-width: none;
margin: 0 calc(var(--ftl-gutter) * -1);
padding: 0 var(--ftl-gutter); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.ft-logos__spoor::-webkit-scrollbar {
display: none;
}
.ft-logos__wand {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 12px;
width: max-content;
}
.ft-logos__item {
flex: 0 0 auto;
width: 160px; background: var(--ftl-vast-donker);
border: 1px solid var(--ftl-vast-donker);
border-radius: var(--ftl-radius);
aspect-ratio: 3 / 2;
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
}  .ft-logos__item--licht {
background: var(--ftl-panel);
border-color: var(--ftl-hairline);
}
.ft-logos__item--grijs {
background: #d9d6d0;
border-color: #cfccc5;
}
.ft-logos__item img {
max-width: 100%;
max-height: 52px;
width: auto;
height: auto;
object-fit: contain;
filter: grayscale(1);
opacity: 0.6;
transition: filter 0.3s ease, opacity 0.3s ease;
}
.ft-logos__item img {
opacity: 0.9;
}
.ft-logos__item:hover img {
filter: none;
opacity: 1;
}
.ft-logos__naam {
color: #f1f0ed;
}
.ft-logos__item--licht .ft-logos__naam,
.ft-logos__item--grijs .ft-logos__naam {
color: var(--ftl-paper);
}
.ft-logos__naam {
font-family: var(--ftl-display);
font-weight: 600;
font-size: 15px;
text-align: center;
color: var(--ftl-soft);
line-height: 1.3;
}
.ft-logos--leeg {
border: 1px dashed var(--ftl-hairline-strong);
border-radius: var(--ftl-radius);
padding: 22px 24px;
margin-top: 48px;
color: var(--ftl-body);
font-size: 14.5px;
line-height: 1.65;
}
.ft-logos--leeg p:last-child {
margin-bottom: 0;
max-width: 78ch;
} .ft-section-head--stack {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
align-items: end;
margin-bottom: 40px;
}
@media (min-width: 900px) {
.ft-section-head--stack {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 48px;
}
}
.ft-pijlers__intro {
margin: 0;
max-width: 52ch;
}
.ft-pijlers {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: var(--ftl-hairline);
border: 1px solid var(--ftl-hairline);
}
@media (min-width: 860px) {
.ft-pijlers {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: auto auto auto auto;
}
}  .ft-pijler {
background: var(--ftl-panel);
padding: 32px 28px 34px;
display: flex;
flex-direction: column;
gap: 14px;
transition: background 0.3s ease;
}
.ft-pijler__tekst {
align-self: start;
}
.ft-pijler__punten {
margin-top: auto;
width: 100%;
}
.ft-pijler:hover {
background: var(--ftl-panel-hover);
}
.ft-pijler__nummer {
font-family: var(--ftl-mono);
font-size: 12px;
letter-spacing: 0.2em;
color: var(--ftl-red-ink);
}
.ft-pijler__naam {
font-family: var(--ftl-display);
font-weight: 800;
text-transform: uppercase;
font-size: clamp(22px, 2.3vw, 30px);
line-height: 1.05;
letter-spacing: -0.01em;
margin: 0;
color: var(--ftl-paper);
}
.ft-pijler__tekst {
margin: 0;
font-size: 15px;
line-height: 1.7;
color: var(--ftl-body);
}
.ft-pijler__punten {
list-style: none;
margin: 6px 0 0;
padding: 0;
border-top: 1px solid var(--ftl-hairline);
}
.ft-pijler__punten li {
padding: 9px 0 9px 18px;
border-bottom: 1px solid var(--ftl-hairline);
font-size: 14.5px;
line-height: 1.45;
color: var(--ftl-soft);
position: relative;
}
.ft-pijler__punten li::before {
content: "";
position: absolute;
left: 0;
top: 17px;
width: 6px;
height: 1px;
background: var(--ftl-red);
} .ftc__uit {
background: var(--ftl-panel);
border: 1px solid var(--ftl-hairline);
border-radius: var(--ftl-radius);
padding: 34px 30px;
max-width: 62ch;
}
.ftc__uit h2 {
margin: 0 0 14px;
font-size: clamp(22px, 3vw, 32px);
}
.ftc__uit p {
color: var(--ftl-body);
font-size: 16px;
line-height: 1.75;
margin: 0 0 12px;
}
.ftc__uit-acties {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 22px;
} .ft-prose {
max-width: 780px;
}
.ft-prose > p:first-child {
font-size: clamp(17px, 2vw, 20px);
line-height: 1.75;
color: var(--ftl-soft);
}
.ft-prose p {
font-size: 16.5px;
line-height: 1.8;
color: var(--ftl-body);
margin: 0 0 20px;
}
.ft-prose h2 {
font-family: var(--ftl-display);
font-weight: 800;
text-transform: uppercase;
font-size: clamp(24px, 3.4vw, 40px);
line-height: 1.02;
letter-spacing: -0.015em;
color: var(--ftl-paper);
margin: 56px 0 18px;
position: relative;
padding-top: 18px;
}
.ft-prose h2::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 44px;
height: 3px;
background: var(--ftl-red);
}
.ft-prose h3 {
font-family: var(--ftl-display);
font-weight: 600;
font-size: clamp(19px, 2.2vw, 24px);
line-height: 1.2;
color: var(--ftl-paper);
margin: 40px 0 12px;
}
.ft-prose ul,
.ft-prose ol {
margin: 0 0 22px;
padding-left: 20px;
color: var(--ftl-body);
}
.ft-prose li {
margin-bottom: 8px;
line-height: 1.7;
}
.ft-prose ul li::marker {
color: var(--ftl-red);
} .ft-prose blockquote {
margin: 30px 0;
padding: 4px 0 4px 22px;
border-left: 3px solid var(--ftl-red);
font-family: var(--ftl-sans);
font-weight: 500;
font-size: clamp(17px, 1.5vw, 20px);
line-height: 1.5;
color: var(--ftl-soft);
}
.ft-prose blockquote p {
font: inherit;
color: inherit;
margin: 0;
}
.ft-prose figure {
margin: 36px 0;
}
.ft-prose img {
border-radius: var(--ftl-radius);
}
.ft-prose figcaption {
font-family: var(--ftl-mono);
font-size: 11.5px;
letter-spacing: 0.08em;
color: var(--ftl-dim);
margin-top: 10px;
}
.ft-prose .alignwide {
margin-left: calc(50% - 50vw + var(--ftl-gutter));
margin-right: calc(50% - 50vw + var(--ftl-gutter));
max-width: none;
}
@media (min-width: 1320px) {
.ft-prose .alignwide {
margin-left: -110px;
margin-right: -110px;
}
}
.ft-prose .wp-block-button__link {
font-family: var(--ftl-mono);
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
border-radius: var(--ftl-radius);
padding: 15px 26px;
background: var(--ftl-red);
color: #fff;
}
.ft-prose .wp-block-button__link:hover {
background: var(--ftl-red-deep);
color: #fff;
}
.ft-prose .is-style-outline .wp-block-button__link {
background: none;
border: 1px solid var(--ftl-hairline-strong);
color: var(--ftl-paper);
}
.ft-prose .is-style-outline .wp-block-button__link:hover {
border-color: var(--ftl-red);
color: var(--ftl-red-ink);
}
.ft-prose hr {
border: 0;
border-top: 1px solid var(--ftl-hairline);
margin: 48px 0;
}
.ft-prose table {
width: 100%;
border-collapse: collapse;
margin: 0 0 26px;
font-size: 15px;
}
.ft-prose th,
.ft-prose td {
text-align: left;
padding: 11px 14px;
border-bottom: 1px solid var(--ftl-hairline);
color: var(--ftl-body);
}
.ft-prose th {
font-family: var(--ftl-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ftl-dim);
} .ft-prose .wp-block-media-text {
margin: 44px 0;
gap: 36px;
}
.ft-prose .wp-block-media-text img {
width: 100%;
height: 100%;
object-fit: cover;
} .ft-kernpunten {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: var(--ftl-hairline);
border: 1px solid var(--ftl-hairline);
margin: 44px 0;
}
@media (min-width: 720px) {
.ft-kernpunten {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.ft-kernpunt {
background: var(--ftl-panel);
padding: 24px 22px;
}
.ft-kernpunt h4 {
font-family: var(--ftl-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ftl-red-ink);
margin: 0 0 8px;
}
.ft-kernpunt p {
margin: 0;
font-size: 14.5px;
line-height: 1.65;
} .ft-specialisten {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
margin: 44px 0;
}
@media (min-width: 680px) {
.ft-specialisten {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.ft-specialist {
background: var(--ftl-panel);
border: 1px solid var(--ftl-hairline);
border-radius: var(--ftl-radius);
overflow: hidden;
}
.ft-specialist img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
}
.ft-specialist__body {
padding: 20px 22px 24px;
}
.ft-specialist__rol {
font-family: var(--ftl-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ftl-dim);
margin: 0 0 4px;
}
.ft-specialist__naam {
font-family: var(--ftl-display);
font-weight: 700;
font-size: 20px;
color: var(--ftl-paper);
margin: 0 0 14px;
}
.ft-specialist__body a {
display: block;
font-size: 15px;
color: var(--ftl-soft);
padding: 7px 0;
border-top: 1px solid var(--ftl-hairline);
}
.ft-specialist__body a:hover {
color: var(--ftl-red-ink);
}  .ft-paginavoet {
margin-top: 0;
}  .ft-content:last-of-type,
.ft-content:has(+ .ft-paginavoet),
.ft-prose:has(+ .ft-paginavoet) {
padding-bottom: 40px;
} .ft-content:has(.ft-werk):has(+ .ft-paginavoet) {
padding-bottom: clamp(56px, 7vw, 96px);
}
.ft-content + .ft-paginavoet,
.ft-prose + .ft-paginavoet {
margin-top: 0;
} .ft-prose > *:last-child {
margin-bottom: 0;
}
.ft-paginavoet__inner {
max-width: var(--ftl-max);
margin: 0 auto;
padding: 56px var(--ftl-gutter) 60px;
display: grid;
grid-template-columns: 1fr;
gap: 28px;
align-items: center;
}
@media (min-width: 860px) {
.ft-paginavoet__inner {
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 56px;
}
}
.ft-paginavoet__titel {
font-family: var(--ftl-display);
font-weight: 800;
text-transform: uppercase;
font-size: clamp(26px, 3.6vw, 44px);
line-height: 1;
letter-spacing: -0.015em;
margin: 0 0 12px;
color: var(--ftl-paper);
}
.ft-paginavoet__tekst {
margin: 0;
color: var(--ftl-body);
font-size: 16px;
line-height: 1.7;
max-width: 52ch;
}
.ft-paginavoet__acties {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
@media (min-width: 860px) {
.ft-paginavoet__acties {
justify-content: flex-end;
}
}  .ft-dark h1,
.ft-dark h2,
.ft-dark h3,
.ft-dark h4,
.ft-dark .ft-display,
.ft-dark .ft-page-header__title,
.ft-dark .ft-paginavoet__titel {
color: var(--ftl-paper);
} .ft-hero__title strong {
font-weight: inherit;
color: transparent;
-webkit-text-stroke: 2px var(--ftl-paper);
display: block;
}
.ft-page-header--beeld .ft-page-header__title {
position: relative;
padding-top: 20px;
}
.ft-page-header--beeld .ft-page-header__title::before {
content: "";
position: absolute;
top: 0;
left: 2px;
width: 52px;
height: 3px;
background: var(--ftl-red);
} .ft-lint {
overflow: hidden;
border-top: 1px solid var(--ftl-hairline);
border-bottom: 1px solid var(--ftl-hairline);
padding: 16px 0;
}
.ft-lint__spoor {
display: flex;
width: max-content;
animation: ft-lint-loop 38s linear infinite;
}
.ft-lint__reeks {
display: flex;
align-items: center;
flex-shrink: 0;
}
.ft-lint__woord {
font-family: var(--ftl-display);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.02em;
font-size: clamp(15px, 1.7vw, 21px);
color: var(--ftl-soft);
white-space: nowrap;
}
.ft-lint__punt {
color: var(--ftl-red);
margin: 0 22px;
font-size: 12px;
}
@keyframes ft-lint-loop {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.ft-lint__spoor {
animation: none;
}
} .ft-pijler,
.ft-specialist,
.ft-review {
transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.3s ease;
}
.ft-pijler:hover,
.ft-specialist:hover {
transform: translateY(-4px);
box-shadow: 0 20px 44px rgba(18, 21, 26, 0.1);
}
.ft-btn {
transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.ft-btn:hover {
transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
.ft-pijler:hover,
.ft-specialist:hover,
.ft-btn:hover {
transform: none;
}
} .ft-vacatures {
border-top: 1px solid var(--ftl-hairline);
margin: 8px 0 56px;
}
.ft-vacature {
border-bottom: 1px solid var(--ftl-hairline);
}
.ft-vacature__kop {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 18px;
padding: 26px 4px;
cursor: pointer;
list-style: none;
transition: background 0.25s ease, padding-left 0.25s ease;
}
.ft-vacature__kop::-webkit-details-marker {
display: none;
}
.ft-vacature__kop:hover {
background: var(--ftl-panel-hover);
padding-left: 14px;
}
.ft-vacature__kop:focus-visible {
outline: 2px solid var(--ftl-red);
outline-offset: 2px;
}
.ft-vacature__nummer {
font-family: var(--ftl-mono);
font-size: 12px;
letter-spacing: 0.16em;
color: var(--ftl-red-ink);
}
.ft-vacature__titelblok {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.ft-vacature__titel {
font-family: var(--ftl-display);
font-weight: 800;
text-transform: uppercase;
font-size: clamp(21px, 2.7vw, 32px);
line-height: 1.05;
letter-spacing: -0.015em;
color: var(--ftl-paper);
}
.ft-vacature__pitch {
font-size: 15px;
line-height: 1.5;
color: var(--ftl-body);
}
.ft-vacature__meta {
display: none;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
@media (min-width: 760px) {
.ft-vacature__meta {
display: flex;
}
}
.ft-vacature__label {
font-family: var(--ftl-mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 6px 11px;
border: 1px solid var(--ftl-hairline-strong);
border-radius: 100px;
color: var(--ftl-dim);
white-space: nowrap;
}
.ft-vacature__label--accent {
border-color: rgba(216, 53, 42, 0.4);
color: var(--ftl-red-ink);
}
.ft-vacature__chev {
width: 12px;
height: 12px;
border-right: 2px solid var(--ftl-red);
border-bottom: 2px solid var(--ftl-red);
transform: rotate(45deg);
transition: transform 0.3s ease;
margin-right: 6px;
}
.ft-vacature[open] .ft-vacature__chev {
transform: rotate(-135deg);
}
.ft-vacature__body {
padding: 4px 4px 36px;
max-width: 760px;
}
.ft-vacature__body > p:first-child {
font-size: clamp(16px, 1.9vw, 18px);
color: var(--ftl-soft);
}
.ft-vacature__body h3 {
margin-top: 30px;
margin-bottom: 10px;
font-family: var(--ftl-mono);
font-weight: 500;
font-size: 11.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ftl-red-ink);
}
.ft-vacature__body ul {
list-style: none;
padding-left: 0;
margin-bottom: 20px;
}
.ft-vacature__body ul li {
position: relative;
padding: 8px 0 8px 22px;
border-bottom: 1px solid var(--ftl-hairline);
color: var(--ftl-body);
line-height: 1.6;
}
.ft-vacature__body ul li::before {
content: "";
position: absolute;
left: 0;
top: 17px;
width: 8px;
height: 1px;
background: var(--ftl-red);
}
.ft-vacature__acties {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}
.ft-open-sollicitatie {
background: var(--ftl-panel);
border: 1px solid var(--ftl-hairline);
border-left: 3px solid var(--ftl-red);
border-radius: var(--ftl-radius);
padding: 34px 32px 36px;
margin-bottom: 8px;
max-width: 780px;
}
.ft-open-sollicitatie h2 {
margin: 0 0 12px;
font-size: clamp(22px, 3vw, 32px);
}
.ft-open-sollicitatie p {
color: var(--ftl-body);
line-height: 1.75;
margin: 0;
max-width: 60ch;
}
@media (prefers-reduced-motion: reduce) {
.ft-vacature__kop:hover {
padding-left: 4px;
}
} .ft-stalen {
list-style: none;
margin: 0 0 32px;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
@media (min-width: 560px) {
.ft-stalen {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 900px) {
.ft-stalen {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
}
.ft-staal {
min-width: 0;
}
.ft-staal__link:hover,
.ft-staal__link:focus-visible {
border-color: var(--ftl-red);
transform: translateY(-3px);
}
.ft-staal__vlak {
display: block; aspect-ratio: 1 / 1; background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.03) 42%, rgba(0, 0, 0, 0.16) 100%);
background-blend-mode: overlay;
}
.ft-staal__naam {
display: block;
padding: 8px 4px 2px;
font-family: var(--ftl-mono);
font-size: 10.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ftl-soft);
}
.ft-finishes-uitleg {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: var(--ftl-hairline);
border: 1px solid var(--ftl-hairline);
margin-bottom: 32px;
}
@media (min-width: 760px) {
.ft-finishes-uitleg {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
} .ft-finish-kaart {
background: var(--ftl-panel);
padding: 14px 16px 15px;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 2px 10px;
}
.ft-finish-kaart__naam {
font-family: var(--ftl-display);
font-weight: 700;
font-size: 14.5px;
margin: 0;
color: var(--ftl-paper);
}
.ft-finish-kaart__tekst {
margin: 0;
font-size: 13px;
line-height: 1.5;
color: var(--ftl-body);
}
.ft-studio__voet {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.ft-studio__note {
margin: 0;
font-family: var(--ftl-mono);
font-size: 11.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ftl-dim);
} .ft-section--compare {
padding-top: clamp(56px, 7vw, 96px);
}
.ft-compare__uitleg {
margin: 0 0 22px;
max-width: 68ch;
font-size: 15.5px;
line-height: 1.7;
color: var(--ftl-body);
}
.ft-compare__tag {
background: rgba(10, 11, 13, 0.82);
color: #f1f0ed;
padding: 7px 12px;
border-radius: var(--ftl-radius);
font-size: 11px;
letter-spacing: 0.12em;
} .ft-label,
.ft-eyebrow,
.ft-lint__woord,
.ft-staal__naam,
.ft-vacature__nummer,
.ft-vacature__label,
.ft-pijler__nummer,
.ft-kernpunt h4,
.ft-specialist__rol,
.ft-studio__note,
.ft-vacature__body h3 {
font-weight: 500;
font-feature-settings: "tnum" 1;
} .ft-contactform {
background: var(--ftl-panel);
border: 1px solid var(--ftl-hairline);
border-left: 3px solid var(--ftl-red);
border-radius: var(--ftl-radius);
padding: 34px 32px 32px;
max-width: 780px;
margin-top: 56px;
}
.ft-contactform h2 {
margin: 0 0 12px;
font-size: clamp(22px, 3vw, 30px);
}
.ft-contactform__intro {
color: var(--ftl-body);
line-height: 1.75;
margin: 0 0 26px;
max-width: 62ch;
}
.ft-contactform__velden {
display: grid;
grid-template-columns: 1fr;
gap: 0 18px;
}
@media (min-width: 620px) {
.ft-contactform__velden {
grid-template-columns: 1fr 1fr;
}
}
.ft-contactform textarea,
.ft-contactform input {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--ftl-hairline-strong);
border-radius: var(--ftl-radius);
background: #fff;
color: var(--ftl-paper);
font: inherit;
}
.ft-contactform textarea:focus,
.ft-contactform input:focus {
outline: 2px solid var(--ftl-red);
outline-offset: 1px;
} .ftc__pot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.ft-contactform__melding {
margin: 0 0 8px;
font-size: 14.5px;
line-height: 1.6;
}
.ft-contactform__melding.is-goed {
color: #1c6b45;
}
.ft-contactform__melding.is-fout {
color: var(--ftl-red-ink);
} .ftc__line--klaar {
align-items: center;
}
.ftc__weg {
background: none;
border: 0;
color: var(--ftl-dim);
font-size: 20px;
line-height: 1;
cursor: pointer;
min-width: 44px;
min-height: 44px;
flex: 0 0 auto;
}
.ftc__weg:hover {
color: var(--ftl-red);
}
.ftc__verstuurd {
font-family: var(--ftl-display);
font-weight: 800;
text-transform: uppercase;
font-size: clamp(20px, 2.6vw, 28px);
line-height: 1.1;
margin: 0 0 18px;
color: var(--ftl-paper);
} .ft-prose,
.ft-pijler,
.ft-pijler__tekst,
.ft-kernpunt,
.ft-specialist__body,
.ft-review__quote,
.ft-vacature__body,
.ft-vacature__titelblok,
.ft-segment,
.ft-staal__naam,
.ft-contactform,
.ft-paginavoet__tekst {
min-width: 0;
overflow-wrap: anywhere;
}
.ft-vacature__kop,
.ft-segment,
.ft-kanaal,
.ft-studio__voet,
.ft-paginavoet__inner {
min-width: 0;
}  .ft-hero__eyebrow,
.ft-page-header--beeld .ft-page-header__meta {
color: #f3ece9;
text-shadow: 0 1px 12px rgba(10, 11, 13, 0.85);
}
.ft-hero__title,
.ft-page-header--beeld .ft-page-header__title {
text-shadow: 0 2px 30px rgba(10, 11, 13, 0.5);
} body.ft-kop-licht .ft-header .ft-brand img,
.ft-header.is-scrolled .ft-brand img {
background: var(--ftl-vast-donker);
padding: 6px 10px;
border-radius: var(--ftl-radius);
}  .ft-vacature__body .ft-btn--solid,
.ft-prose .ft-btn--solid {
color: #ffffff;
}
.ft-vacature__body .ft-btn--ghost,
.ft-prose .ft-btn--ghost {
color: var(--ftl-paper);
} .ft-reviews__dot::before {
content: "";
display: block;
width: 100%;
height: 3px;
border-radius: 2px;
background: var(--ftl-hairline-strong);
transition: background 0.3s ease;
}
.ft-reviews__dot[aria-selected="true"]::before {
background: var(--ftl-red);
} @media (max-width: 620px) {
.ft-compare__tag {
font-size: 10px;
padding: 5px 8px;
max-width: 46%;
}
.ft-compare__tag--before {
left: 8px;
}
.ft-compare__tag--after {
right: 8px;
}
} .ft-nav__list + .ft-nav__heading,
.ft-nav__inner .ft-nav__heading + .ft-nav__heading {
margin-top: 34px;
} body {
display: flex;
flex-direction: column;
min-height: 100svh;
}
main {
flex: 1 0 auto;
}
.ft-footer {
flex-shrink: 0;
} .ft-reviews__viewport {
line-height: 0;
}
.ft-review {
line-height: 1.5;
}  .ft-vacature-kaart {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 8px 18px;
padding: 26px 4px;
border-bottom: 1px solid var(--ftl-hairline);
transition: background 0.25s ease, padding-left 0.25s ease;
}
.ft-vacature-kaart:first-child {
border-top: 1px solid var(--ftl-hairline);
}
.ft-vacature-kaart:hover {
background: var(--ftl-panel-hover);
padding-left: 14px;
}
@media (min-width: 760px) {
.ft-vacature-kaart {
grid-template-columns: auto minmax(0, 1fr) auto auto;
}
}
.ft-vacature-kaart .ft-vacature__meta {
grid-column: 1 / -1;
}
@media (min-width: 760px) {
.ft-vacature-kaart .ft-vacature__meta {
grid-column: auto;
}
}
.ft-vacature__lees {
font-family: var(--ftl-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ftl-red-ink);
white-space: nowrap;
grid-column: 1 / -1;
}
@media (min-width: 760px) {
.ft-vacature__lees {
grid-column: auto;
}
}
.ft-vacature__acties--boven {
margin-top: 0;
margin-bottom: 8px;
}   .ft-hero__eyebrow {
position: relative;
padding-top: 16px;
font-size: clamp(11px, 1.15vw, 13px);
font-weight: 600;
letter-spacing: 0.16em;
line-height: 1.5;
color: #ffffff;
max-width: 30ch;
text-shadow: 0 1px 14px rgba(10, 11, 13, 0.9);
background: none;
border: 0;
}
.ft-hero__eyebrow::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 3px;
background: var(--ftl-red);
} .ft-footer__menu a,
.ft-kanaal,
.ft-header__phone {
padding: 12px 4px;
}
.ft-reviews__pijl {
width: 48px;
height: 48px;
}
.ftc__terug {
min-height: 44px;
padding: 0 4px;
} .ft-reviews__nav {
margin-top: 12px;
} .ft-reviews__viewport {
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
} .ft-hero .ft-btn--ghost {
border-color: rgba(255, 255, 255, 0.75);
background: rgba(10, 11, 13, 0.28);
backdrop-filter: blur(2px);
} body.ft-kop-licht .ft-header .ft-brand img,
.ft-header.is-scrolled .ft-brand img {
background: #1a1d22;
padding: 7px 12px;
} .ftc__line--lijst {
flex-direction: column;
gap: 6px;
}
.ftc__line--lijst b {
display: flex;
flex-direction: column;
gap: 3px;
text-align: left;
width: 100%;
}
.ftc__line--lijst b span::before {
content: "";
display: inline-block;
width: 6px;
height: 1px;
background: var(--ftl-red);
vertical-align: middle;
margin-right: 8px;
}
.ftc__nog-nodig {
margin: 0 0 12px;
font-size: 13.5px;
line-height: 1.55;
color: var(--ftl-dim);
}
.ft-btn[disabled] {
opacity: 0.45;
cursor: not-allowed;
}
.ft-btn[disabled]:hover {
transform: none;
} .ftc__panel-label + .ftc__lines,
.ftc__lines + .ftc__panel-label {
margin-top: 22px;
} .ft-nav__close {
min-width: 44px;
min-height: 44px;
position: sticky;
top: 12px;
float: right;
z-index: 2;
} @media (max-width: 620px) {
.ft-kanalen {
margin-bottom: 32px;
}
.ft-page-header {
padding-top: 116px;
}
} .ft-route {
background: var(--ftl-panel);
border: 1px solid var(--ftl-hairline);
border-left: 3px solid var(--ftl-red);
border-radius: var(--ftl-radius);
padding: 26px 26px 28px;
}
.ft-route__adres {
font-family: var(--ftl-display);
font-weight: 600;
font-size: 19px;
line-height: 1.35;
color: var(--ftl-paper);
margin: 10px 0 18px;
}
.ft-route__punten {
list-style: none;
margin: 0 0 22px;
padding: 0;
border-top: 1px solid var(--ftl-hairline);
}
.ft-route__punten li {
position: relative;
padding: 11px 0 11px 20px;
border-bottom: 1px solid var(--ftl-hairline);
font-size: 14.5px;
line-height: 1.6;
color: var(--ftl-body);
}
.ft-route__punten li::before {
content: "";
position: absolute;
left: 0;
top: 21px;
width: 8px;
height: 1px;
background: var(--ftl-red);
}
.ft-route__note {
margin: 16px 0 0;
font-size: 12.5px;
line-height: 1.6;
color: var(--ftl-dim);
} .ft-filter {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 34px;
padding-bottom: 26px;
border-bottom: 1px solid var(--ftl-hairline);
}
.ft-filter__knop {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 16px;
border: 1px solid var(--ftl-hairline-strong);
border-radius: 100px;
font-family: var(--ftl-mono);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ftl-soft);
transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.ft-filter__knop:hover {
border-color: var(--ftl-red);
color: var(--ftl-paper);
}
.ft-filter__knop.is-aan {
background: var(--ftl-paper);
border-color: var(--ftl-paper);
color: var(--ftl-black);
}
.ft-filter__aantal {
font-size: 11px;
opacity: 0.6;
}
.ft-werk {
display: grid;
grid-template-columns: 1fr;
gap: 22px;
}
@media (min-width: 620px) {
.ft-werk {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1000px) {
.ft-werk {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.ft-werk__item {
display: block;
background: var(--ftl-panel);
border: 1px solid var(--ftl-hairline);
border-radius: var(--ftl-radius);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.ft-werk__item:hover {
transform: translateY(-4px);
border-color: var(--ftl-hairline-strong);
box-shadow: 0 22px 46px rgba(18, 21, 26, 0.12);
}
.ft-werk__beeld {
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--ftl-panel-hover);
}
.ft-werk__beeld img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.ft-werk__item:hover .ft-werk__beeld img {
transform: scale(1.04);
}
.ft-werk__body {
display: block;
padding: 18px 20px 22px;
}
.ft-werk__cat {
display: block;
font-family: var(--ftl-mono);
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ftl-red-ink);
margin-bottom: 6px;
}
.ft-werk__titel {
display: block;
font-family: var(--ftl-display);
font-weight: 600;
font-size: 17px;
line-height: 1.3;
color: var(--ftl-paper);
}  .ft-galerij-web {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
margin-top: 8px;
}
@media (min-width: 560px) {
.ft-galerij-web {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1000px) {
.ft-galerij-web {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
} .ft-galerij-web__item:nth-child(5n + 1) {
grid-column: 1 / -1;
}
}
.ft-galerij-web__item {
margin: 0;
overflow: hidden;
border-radius: var(--ftl-radius);
background: var(--ftl-panel-hover); aspect-ratio: 4 / 3;
}
@media (min-width: 1000px) {
.ft-galerij-web__item:nth-child(5n + 1) { aspect-ratio: 21 / 9;
max-height: 460px;
}
}
.ft-galerij-web__item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.ft-galerij-web__item:hover img {
transform: scale(1.02);
} .ft-mainnav__button--los {
text-decoration: none;
} .ft-kanalen {
border-radius: var(--ftl-radius);
overflow: hidden;
} .ft-werk__beeld--leeg {
display: flex;
align-items: center;
justify-content: center;
background: repeating-linear-gradient(45deg, #efede8 0 10px, #f6f5f1 10px 20px);
}
.ft-werk__todo {
font-family: var(--ftl-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ftl-dim);
} .ft-projectslider {
margin: 8px 0 12px;
padding-top: 40px;
border-top: 1px solid var(--ftl-hairline);
}
.ft-projectslider__kop {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
margin-bottom: 24px;
}
.ft-projectslider__kop h2 {
margin: 0;
font-size: clamp(22px, 3vw, 34px);
}
.ft-projectslider__bediening {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.ft-projectslider__pijl {
width: 48px;
height: 48px;
border: 1px solid var(--ftl-hairline-strong);
background: transparent;
color: var(--ftl-paper);
border-radius: var(--ftl-radius);
font-size: 16px;
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.ft-projectslider__pijl:hover:not([disabled]) {
border-color: var(--ftl-red);
color: var(--ftl-red-ink);
}
.ft-projectslider__pijl[disabled] {
opacity: 0.3;
cursor: default;
}
.ft-projectslider__spoor {
display: flex;
gap: 18px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding-bottom: 4px;
}
.ft-projectslider__spoor::-webkit-scrollbar {
display: none;
}
.ft-projectslider__item {
flex: 0 0 78%;
scroll-snap-align: start;
background: var(--ftl-panel);
border: 1px solid var(--ftl-hairline);
border-radius: var(--ftl-radius);
overflow: hidden;
transition: border-color 0.25s ease;
}
@media (min-width: 620px) {
.ft-projectslider__item {
flex-basis: 46%;
}
}
@media (min-width: 1000px) {
.ft-projectslider__item {
flex-basis: 31%;
}
}
.ft-projectslider__item:hover {
border-color: var(--ftl-hairline-strong);
}
.ft-projectslider__beeld {
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.ft-projectslider__beeld img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.ft-projectslider__item:hover .ft-projectslider__beeld img {
transform: scale(1.04);
}
.ft-projectslider__titel {
display: block;
padding: 14px 16px 18px;
font-family: var(--ftl-display);
font-weight: 600;
font-size: 15.5px;
line-height: 1.35;
color: var(--ftl-paper);
}
.ft-projectslider__meer {
margin: 18px 0 0;
font-family: var(--ftl-mono);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.ft-projectslider__meer a {
color: var(--ftl-red-ink);
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
} .ftc__direct {
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid var(--ftl-hairline);
}
.ftc__direct-kop {
margin: 0 0 12px;
font-family: var(--ftl-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ftl-dim);
}
.ftc__direct-knoppen {
display: grid;
gap: 10px;
}
.ftc__direct-knop {
display: block;
padding: 13px 16px;
border: 1px solid var(--ftl-hairline-strong);
border-radius: var(--ftl-radius);
transition: border-color 0.2s ease, background 0.2s ease;
}
.ftc__direct-knop:hover {
border-color: var(--ftl-red);
}
.ftc__direct-knop--wa {
border-color: #25d366;
background: rgba(37, 211, 102, 0.08);
}
.ftc__direct-knop--wa:hover {
background: rgba(37, 211, 102, 0.16);
border-color: #25d366;
}
.ftc__direct-titel {
display: block;
font-family: var(--ftl-display);
font-weight: 700;
font-size: 15px;
color: var(--ftl-paper);
}
.ftc__direct-tekst {
display: block;
font-size: 13.5px;
line-height: 1.5;
color: var(--ftl-body);
margin-top: 2px;
}
.ftc__veld--breed {
grid-column: 1 / -1;
}
.ftc__veld--breed textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--ftl-hairline-strong);
border-radius: var(--ftl-radius);
background: #fff;
color: var(--ftl-paper);
font: inherit;
line-height: 1.6;
} .ft-footer__boven {
max-width: var(--ftl-max);
margin: 0 auto;
padding: 56px var(--ftl-gutter) 40px;
display: grid;
grid-template-columns: 1fr;
gap: 40px;
align-items: start;
}
@media (min-width: 900px) {
.ft-footer__boven { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 56px;
align-items: end;
}
}
.ft-footer__pitch {
margin: 0 0 22px;
font-size: 15.5px;
line-height: 1.7;
color: var(--ftl-soft);
max-width: 44ch;
}
.ft-footer__acties {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.ft-footer__rechts {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
}
@media (min-width: 900px) { .ft-footer__rechts {
align-items: flex-end;
text-align: right;
} .ft-footer__rechts .ft-footer__plaats {
margin-right: -0.42em;
}
.ft-footer__socials {
justify-content: flex-end;
}
}
.ft-footer__socials {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 22px;
}
.ft-footer__socials a {
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 44px;
font-family: var(--ftl-display);
font-weight: 600;
font-size: 16px;
color: var(--ftl-paper);
transition: color 0.2s ease;
}
.ft-footer__socials a:hover {
color: var(--ftl-red-ink);
} .ft-footer__woordmerk {
margin: 0;
font-family: var(--ftl-display);
font-weight: 800; font-size: clamp(26px, 3.4vw, 46px);
line-height: 1;
letter-spacing: -0.02em;
user-select: none;
white-space: nowrap;
}
@media (max-width: 760px) { .ft-footer__woordmerk {
font-size: min(46px, calc((100vw - 2 * var(--ftl-gutter)) / 7.6));
}
}
.ft-footer__woordmerk-vol {
color: var(--ftl-paper);
}
.ft-footer__woordmerk-lijn {
color: transparent;
-webkit-text-stroke: 1px var(--ftl-red);
}
@media (min-width: 900px) {
.ft-footer__woordmerk-lijn { -webkit-text-stroke-width: 1.25px;
}
}
.ft-footer__plaats {
margin: 8px 0 0;
font-family: var(--ftl-mono);
font-size: 11px;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--ftl-dim);
}
.ft-footer__onder {
max-width: var(--ftl-max);
margin: 0 auto;
padding: 20px var(--ftl-gutter) 26px;
border-top: 1px solid var(--ftl-hairline);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px 28px;
font-size: 12.5px;
color: var(--ftl-dim);
}
.ft-footer__copy {
white-space: nowrap;
}
.ft-footer__onder .ft-footer__menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px 22px;
}
.ft-footer__onder .ft-footer__menu a {
color: var(--ftl-dim);
min-height: 32px;
display: inline-flex;
align-items: center;
}
.ft-footer__onder .ft-footer__menu a:hover {
color: var(--ftl-paper);
}
.ft-footer__nummers {
display: flex;
flex-wrap: wrap;
gap: 6px 20px; justify-content: flex-end;
}
.ft-footer__nummers b {
font-weight: 500;
color: var(--ftl-red-ink);
margin-right: 3px;
}
.ft-reviews__cijfer {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--ftl-dim);
border-bottom: 1px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
}
.ft-reviews__cijfer:hover {
color: var(--ftl-paper);
border-bottom-color: currentColor;
} .ft-tiles__noot {
margin: 14px 0 0;
font-size: 12.5px;
line-height: 1.6;
color: var(--ftl-dim);
max-width: 56ch;
}
.ft-tile--leeg {
background: repeating-linear-gradient(45deg, #efede8 0 10px, #f6f5f1 10px 20px);
} .ft-footer__zeg {
min-width: 0;
}
.ft-tiles-blok {
min-width: 0;
} .ft-werk--drie {
grid-template-columns: 1fr;
}
@media (min-width: 700px) {
.ft-werk--drie {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
} .ft-configurator-page {
max-width: var(--ftl-max);
margin: 0 auto;
padding: 0 var(--ftl-gutter);
} @media (max-width: 760px) {
.ft-footer__boven {
padding: 34px var(--ftl-gutter) 24px;
gap: 24px;
}
.ft-footer__pitch {
margin-bottom: 16px;
font-size: 14.5px;
line-height: 1.6;
} .ft-footer__acties {
gap: 8px;
}
.ft-footer__acties .ft-btn {
flex: 1 1 auto;
padding-left: 14px;
padding-right: 14px;
font-size: 11px;
letter-spacing: 0.1em;
text-align: center;
justify-content: center;
}
.ft-footer__rechts {
gap: 10px;
}
.ft-footer__socials a {
min-height: 40px;
font-size: 15px;
} .ft-footer__plaats {
font-size: 10px;
letter-spacing: 0.32em;
}
.ft-footer__onder {
padding: 16px var(--ftl-gutter) 20px;
gap: 10px 18px;
font-size: 12px;
}
.ft-footer__onder .ft-footer__menu {
gap: 2px 16px;
}
.ft-footer__onder .ft-footer__menu a {
min-height: 30px;
}
.ft-footer__nummers { margin-left: 0;
width: 100%;
gap: 4px 16px;
}
}  .ft-logos,
.ft-footer,
.ft-compare,
.ft-section--compare {
overflow-x: hidden;
} .ft-mainnav__button {
font-size: 12.5px;
}
.ft-mainnav__list a {
min-height: 44px;
display: flex;
align-items: center;
}
.ft-label,
.ft-eyebrow,
.ft-werk__cat,
.ft-staal__naam,
.ft-vacature__label,
.ft-kernpunt h4 {
font-size: 11px;
}
.ft-footer__onder,
.ft-route__note,
.ft-tiles__noot {
font-size: 13px;
} .ftc__nog-lijst {
list-style: none;
margin: 0;
padding: 0;
}
.ftc__nog-lijst li {
position: relative;
padding: 9px 0 9px 20px;
border-bottom: 1px solid var(--ftl-hairline);
color: var(--ftl-body);
font-size: 15px;
}
.ftc__nog-lijst li::before {
content: "";
position: absolute;
left: 0;
top: 18px;
width: 8px;
height: 1px;
background: var(--ftl-red);
} .ft-pijler__punten a {
color: inherit;
display: block;
transition: color 0.2s ease;
}
.ft-pijler__punten li:hover a,
.ft-pijler__punten a:focus-visible {
color: var(--ftl-red-ink);
} .ft-hero__claim {
color: #f1f0ed;
font-size: clamp(15px, 1.7vw, 18px);
font-weight: 500;
line-height: 1.6;
max-width: 40ch;
text-shadow: 0 1px 16px rgba(10, 11, 13, 0.9);
} .ft-verder {
padding-top: 34px;
border-top: 1px solid var(--ftl-hairline);
}
.ft-verder__lijst {
list-style: none;
margin: 14px 0 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: var(--ftl-hairline);
border: 1px solid var(--ftl-hairline);
}
@media (min-width: 700px) {
.ft-verder__lijst {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.ft-verder__lijst a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
min-height: 56px;
padding: 14px 18px;
background: var(--ftl-panel);
transition: background 0.25s ease;
}
.ft-verder__lijst a:hover {
background: var(--ftl-panel-hover);
}
.ft-verder__titel {
font-family: var(--ftl-display);
font-weight: 600;
font-size: 16px;
color: var(--ftl-paper);
}
.ft-verder__pijl {
color: var(--ftl-red);
} .ft-content:has(> .ft-filter),
.ft-content:has(> .ft-werk) {
padding-bottom: 0;
}
.ft-content + .ft-content {
padding-top: 24px;
} .ft-page-header:not(.ft-page-header--beeld) + .ft-content:has(> .ft-filter) {
padding-top: 24px;
} .navigation.pagination {
margin-top: 44px;
padding-top: 28px;
border-top: 1px solid var(--ftl-hairline);
}
.navigation.pagination .screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
.navigation.pagination .nav-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.navigation.pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 46px;
min-height: 46px;
padding: 0 14px;
border: 1px solid var(--ftl-hairline-strong);
border-radius: var(--ftl-radius);
font-family: var(--ftl-mono);
font-size: 13px;
color: var(--ftl-soft);
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.navigation.pagination a.page-numbers:hover {
border-color: var(--ftl-red);
color: var(--ftl-paper);
}
.navigation.pagination .page-numbers.current {
background: var(--ftl-paper);
border-color: var(--ftl-paper);
color: var(--ftl-black);
}
.navigation.pagination .page-numbers.dots {
border-color: transparent;
min-width: 24px;
padding: 0;
}
.navigation.pagination .prev,
.navigation.pagination .next {
font-family: var(--ftl-display);
font-weight: 600;
letter-spacing: 0;
} .ft-werklink {
margin: 0;
padding-top: 28px;
border-top: 1px solid var(--ftl-hairline);
}
.ft-werklink a {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
font-family: var(--ftl-display);
font-weight: 600;
font-size: 17px;
color: var(--ftl-paper);
transition: color 0.2s ease;
}
.ft-werklink a:hover {
color: var(--ftl-red-ink);
}
.ft-werklink span {
color: var(--ftl-red);
}  .ft-actie {
position: relative;
isolation: isolate;
overflow: hidden;
background: var(--ftl-vast-donker);
padding-block: clamp(52px, 6.5vw, 88px);
} .ft-actie::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--ftl-red);
z-index: 3;
}
.ft-actie__inner {
position: relative;
z-index: 2;
} .ft-actie__beeld {
position: absolute;
inset: 0;
z-index: 0;
}
.ft-actie__beeld img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center right;
display: block;
} .ft-actie__beeld::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
var(--ftl-vast-donker) 0%,
rgba(10, 11, 13, 0.94) 34%,
rgba(10, 11, 13, 0.62) 58%,
rgba(10, 11, 13, 0.34) 100%
);
} @media (max-width: 899px) {
.ft-actie__beeld img {
object-position: center;
}
.ft-actie__beeld::after {
background:
linear-gradient(
180deg,
rgba(10, 11, 13, 0.72) 0%,
rgba(10, 11, 13, 0.92) 45%,
var(--ftl-vast-donker) 100%
);
}
}  .ft-actie__body {
max-width: 680px;
display: flex;
flex-direction: column;
gap: 16px;
}
@media (min-width: 900px) { .ft-actie--met-beeld .ft-actie__body {
max-width: 620px;
}
}
.ft-actie__label {
margin: 0;
display: flex;
align-items: center;
gap: 12px;
font-family: var(--ftl-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ftl-red-ink);
}
.ft-actie__rule {
width: 34px;
height: 2px;
background: var(--ftl-red);
flex: none;
}
.ft-actie__titel {
margin: 0; font-size: clamp(27px, 3.5vw, 44px);
line-height: 1.06;
letter-spacing: -0.015em;
color: var(--ftl-paper); text-wrap: balance;
hyphens: none;
}
.ft-actie__tekst {
margin: 0;
max-width: 50ch;
font-size: 16px;
line-height: 1.65;
color: var(--ftl-body);
}  .ft-actie__punten {
list-style: none;
margin: 4px 0 0;
padding: 0;
display: grid;
gap: 10px 26px;
align-items: start;
}
@media (min-width: 600px) { .ft-actie__punten {
grid-auto-flow: column;
grid-template-rows: repeat(2, auto);
grid-auto-columns: minmax(0, 1fr);
justify-content: start;
}
.ft-actie__punten--kort {
grid-auto-flow: row;
grid-template-rows: none;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.ft-actie__punten li {
position: relative;
padding-left: 24px;
font-size: 14.5px;
line-height: 1.5;
color: var(--ftl-soft);
} .ft-actie__punten li::before {
content: "";
position: absolute;
left: 2px;
top: 0.28em;
width: 6px;
height: 11px;
border-right: 2px solid var(--ftl-red);
border-bottom: 2px solid var(--ftl-red);
transform: rotate(42deg);
} .ft-actie__voet {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px 30px;
}
.ft-actie__prijs {
margin: 0;
display: flex;
align-items: baseline;
gap: 10px;
} .ft-actie__bedrag {
font-family: var(--ftl-display);
font-weight: 800;
font-size: clamp(34px, 4.6vw, 54px);
line-height: 1;
letter-spacing: -0.03em;
color: var(--ftl-paper);
} .ft-actie__btw {
font-family: var(--ftl-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ftl-dim);
white-space: nowrap;
}
.ft-actie__knop {
padding: 17px 30px;
}
@media (max-width: 599px) {
.ft-actie__knop {
width: 100%;
text-align: center;
}
}
.ft-actie__note {
margin: 6px 0 0;
max-width: 60ch;
font-size: 12.5px;
line-height: 1.6;
color: var(--ftl-dim);
} .ft-section--compare {
padding-top: clamp(64px, 7.5vw, 104px);
}  .ft-kleur {
position: relative;
isolation: isolate;
overflow: hidden;
background: var(--ftl-vast-donker);
padding-block: clamp(56px, 7vw, 96px);
}
.ft-kleur::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--ftl-red);
z-index: 3;
}
.ft-kleur__inner {
position: relative;
z-index: 2;
}  .ft-kleur__sfeer {
position: absolute;
inset: 0;
z-index: 0;
}
.ft-kleur__sfeer img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
} .ft-kleur__sfeer::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
rgba(10, 11, 13, 0.86) 0%,
rgba(10, 11, 13, 0.93) 40%,
var(--ftl-vast-donker) 100%
);
} .ft-kleur__kop {
max-width: 760px;
margin-bottom: clamp(30px, 3.6vw, 46px);
}
.ft-kleur__label {
margin: 0 0 14px;
display: flex;
align-items: center;
gap: 12px;
font-family: var(--ftl-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ftl-red-ink);
}
.ft-kleur__rule {
width: 34px;
height: 2px;
background: var(--ftl-red);
flex: none;
}
.ft-kleur__titel {
margin: 0 0 14px;
font-size: clamp(27px, 3.5vw, 44px);
line-height: 1.06;
letter-spacing: -0.015em;
color: var(--ftl-paper);
text-wrap: balance;
hyphens: none;
}
.ft-kleur__lede {
margin: 0;
max-width: 58ch;
font-size: 16px;
line-height: 1.65;
color: var(--ftl-body);
} .ft-kleur__grid {
display: grid;
gap: clamp(28px, 3.4vw, 44px);
align-items: start;
}
@media (min-width: 1000px) { .ft-kleur__grid {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
} .ft-kleur__resultaat,
.ft-kleur__keuze {
min-width: 0;
} @media (min-width: 1000px) {
.ft-kleur__keuze {
display: flex;
flex-direction: column;
}
.ft-kleur__keuze .ft-kleur__finishes {
margin-top: auto;
}
}
.ft-kleur__kolomkop {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 6px 16px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid var(--ftl-hairline-strong);
}
.ft-kleur__subtitel {
margin: 0;
font-family: var(--ftl-display);
font-weight: 800;
font-size: 17px;
letter-spacing: -0.01em;
color: var(--ftl-paper);
}
.ft-kleur__hint {
font-family: var(--ftl-mono);
font-size: 10.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ftl-dim);
}  .ft-kleur .ft-compare {
max-width: none;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
border-color: var(--ftl-hairline-strong);
}
.ft-kleur__uitleg {
margin: 14px 0 0;
max-width: 62ch;
font-size: 14.5px;
line-height: 1.6;
color: var(--ftl-body);
}  .ft-kleur .ft-stalen {
margin: 0 0 26px;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px 8px;
}
.ft-kleur .ft-staal__vlak {
aspect-ratio: 4 / 3;
border-radius: var(--ftl-radius);
}
.ft-kleur .ft-staal__naam {
padding: 6px 1px 0;
font-size: 10px;
letter-spacing: 0.06em;
line-height: 1.3;
color: var(--ftl-dim);
}
@media (max-width: 559px) { .ft-kleur .ft-stalen {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}  .ft-kleur__finishes {
margin: 0;
display: grid;
gap: 12px;
}
.ft-kleur__finish {
display: grid;
grid-template-columns: 68px minmax(0, 1fr);
gap: 14px;
align-items: baseline;
padding-bottom: 12px;
border-bottom: 1px solid var(--ftl-hairline);
}
.ft-kleur__finish:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.ft-kleur__finish dt {
font-family: var(--ftl-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ftl-paper);
}
.ft-kleur__finish dd {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: var(--ftl-body);
} .ft-kleur__voet {
margin-top: clamp(30px, 3.6vw, 46px);
padding-top: 22px;
border-top: 1px solid var(--ftl-hairline-strong);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px 30px;
}
.ft-kleur__note {
margin: 0;
max-width: 52ch;
font-size: 13px;
line-height: 1.6;
color: var(--ftl-dim);
}
.ft-kleur__knop {
padding: 17px 30px;
}
@media (max-width: 599px) {
.ft-kleur__knop {
width: 100%;
text-align: center;
}
} .ft-portfolio__leeg-acties {
margin: 22px 0 0;
display: flex;
flex-wrap: wrap;
gap: 12px 14px;
}
@media (max-width: 599px) {
.ft-portfolio__leeg-acties .ft-btn {
width: 100%;
text-align: center;
}
}html {
background: #0a0b0d;
}
body {
margin: 0;
background: #0a0b0d;
color: #f1f0ed;
}.cmplz-cookiebanner { background: var(--ftl-panel, #ffffff);
color: var(--ftl-body, #545b64);
border: 1px solid var(--ftl-hairline, rgba(18, 21, 26, 0.1));
border-top: 3px solid var(--ftl-red, #d8352a);
border-radius: var(--ftl-radius, 2px);
box-shadow: 0 18px 50px rgba(18, 21, 26, 0.16);
font-family: var(--ftl-sans, "IBM Plex Sans", system-ui, sans-serif);
font-size: 15px;
line-height: 1.6;
padding: 26px 28px 22px;
} .cmplz-cookiebanner .cmplz-header {
border: 0;
padding: 0;
margin: 0 0 10px;
}
.cmplz-cookiebanner .cmplz-title {
font-family: var(--ftl-mono, "Archivo", "Helvetica Neue", Arial, sans-serif);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ftl-paper, #12151a);
margin: 0;
}
.cmplz-cookiebanner .cmplz-message,
.cmplz-cookiebanner p {
color: var(--ftl-body, #545b64);
font-size: 14.5px;
margin: 0 0 16px;
} .cmplz-cookiebanner .cmplz-categories {
gap: 10px 22px;
margin: 0 0 18px;
}
.cmplz-cookiebanner .cmplz-category {
font-family: var(--ftl-mono, "Archivo", "Helvetica Neue", Arial, sans-serif);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ftl-soft, #383e47);
} .cmplz-cookiebanner .cmplz-btn {
font-family: var(--ftl-mono, "Archivo", "Helvetica Neue", Arial, sans-serif);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 14px 24px;
border-radius: var(--ftl-radius, 2px);
border: 1px solid transparent;
cursor: pointer;
transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
} .cmplz-cookiebanner .cmplz-btn.cmplz-accept {
background: var(--ftl-red, #d8352a);
border-color: var(--ftl-red, #d8352a);
color: #fff;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:focus-visible {
background: var(--ftl-red-ink, #b8271c);
border-color: var(--ftl-red-ink, #b8271c);
color: #fff;
} .cmplz-cookiebanner .cmplz-btn.cmplz-deny,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences {
background: none;
border-color: var(--ftl-hairline-strong, rgba(18, 21, 26, 0.24));
color: var(--ftl-paper, #12151a);
}
.cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-deny:focus-visible,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:focus-visible {
background: var(--ftl-paper, #12151a);
border-color: var(--ftl-paper, #12151a);
color: var(--ftl-black, #f6f5f1);
}
.cmplz-cookiebanner .cmplz-buttons {
gap: 10px;
} .cmplz-cookiebanner .cmplz-links a,
.cmplz-cookiebanner .cmplz-documents a,
.cmplz-cookiebanner a.cmplz-view-preferences {
color: var(--ftl-dim, #6a717b);
font-size: 13px;
text-decoration: underline;
text-underline-offset: 3px;
}
.cmplz-cookiebanner .cmplz-links a:hover,
.cmplz-cookiebanner .cmplz-documents a:hover,
.cmplz-cookiebanner a.cmplz-view-preferences:hover {
color: var(--ftl-red, #d8352a);
}
.cmplz-cookiebanner .cmplz-divider {
border-color: var(--ftl-hairline, rgba(18, 21, 26, 0.1));
} .cmplz-cookiebanner .cmplz-btn:focus-visible,
.cmplz-cookiebanner a:focus-visible,
.cmplz-cookiebanner input:focus-visible,
.cmplz-cookiebanner button:focus-visible {
outline: 2px solid var(--ftl-red, #d8352a);
outline-offset: 2px;
} .cmplz-manage-consent,
#cmplz-manage-consent .cmplz-manage-consent {
background: var(--ftl-panel, #ffffff);
color: var(--ftl-soft, #383e47);
border: 1px solid var(--ftl-hairline-strong, rgba(18, 21, 26, 0.24));
border-radius: var(--ftl-radius, 2px);
font-family: var(--ftl-mono, "Archivo", "Helvetica Neue", Arial, sans-serif);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 8px 14px;
}
.cmplz-manage-consent:hover {
color: var(--ftl-red, #d8352a);
border-color: var(--ftl-red, #d8352a);
} a.cmplz-show-banner {
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
a.cmplz-show-banner:hover {
color: var(--ftl-red, #d8352a);
}  .ft-offerte .cmplz-cookiebanner {
max-width: 560px;
}
@media (max-width: 782px) {
.cmplz-cookiebanner {
padding: 20px 18px 16px;
font-size: 14.5px;
}
.cmplz-cookiebanner .cmplz-buttons {
flex-direction: column;
} .cmplz-cookiebanner .cmplz-btn {
width: 100%;
text-align: center;
}
}  .ft-dark .cmplz-cookiebanner {
background: var(--ftl-panel, #ffffff);
color: var(--ftl-body, #545b64);
} @media (prefers-reduced-motion: reduce) {
.cmplz-cookiebanner,
.cmplz-cookiebanner * {
transition: none !important;
animation: none !important;
}
}  .cmplz-amp-link {
color: var(--ftl-red, #d8352a);
text-decoration: underline;
}input[type="checkbox"].cmplz-category { width: initial; -webkit-appearance: checkbox;}input[type="checkbox"].cmplz-category:checked::before { content: '';}.cmplz-cookiebanner { box-sizing: border-box;}:root { --cmplz_banner_width: 526px; --cmplz_banner_background_color: #ffffff; --cmplz_banner_border_color: #f2f2f2; --cmplz_banner_border_width: 0px 0px 0px 0px ; --cmplz_banner_border_radius: 12px 12px 12px 12px; --cmplz_banner_margin: 10px; --cmplz_categories-height: 163px; --cmplz_title_font_size: 15px; --cmplz_text_line_height: calc(var(--cmplz_text_font_size) * 1.5); --cmplz_text_color: #222222; --cmplz_hyperlink_color: #e30613; --cmplz_text_font_size: 12px; --cmplz_link_font_size: 12px; --cmplz_category_body_font_size: 12px; --cmplz_button_accept_background_color: #e30613; --cmplz_button_accept_border_color: #e30613; --cmplz_button_accept_text_color: #ffffff; --cmplz_button_deny_background_color: #f9f9f9; --cmplz_button_deny_border_color: #f2f2f2; --cmplz_button_deny_text_color: #222222; --cmplz_button_settings_background_color: #f9f9f9; --cmplz_button_settings_border_color: #f2f2f2; --cmplz_button_settings_text_color: #333333; --cmplz_button_border_radius: 6px 6px 6px 6px; --cmplz_button_font_size: 15px; --cmplz_category_header_always_active_color: green; --cmplz_category_header_title_font_size: 14px; --cmplz_category_header_active_font_size: 12px; --cmplz-manage-consent-height: 50px; --cmplz-manage-consent-offset: -35px; --cmplz_slider_active_color: #e30613; --cmplz_slider_inactive_color: #555; --cmplz_slider_bullet_color: #ffffff;}body.cmplz-banner-active *:not(.cmplz-cookiebanner):not(.cmplz-cookiebanner *) { pointer-events: none !important; user-select: none !important;}.cmplz-cookiebanner * { pointer-events: auto !important; user-select: auto !important;}#cmplz-manage-consent .cmplz-manage-consent { margin: unset; z-index: 9998; color: var(--cmplz_text_color); background-color: var(--cmplz_banner_background_color); border-style: solid; border-color: var(--cmplz_banner_border_color); border-width: var(--cmplz_banner_border_width); border-radius: var(--cmplz_banner_border_radius); border-bottom-left-radius: 0; border-bottom-right-radius: 0; line-height: initial; position: fixed; bottom: var(--cmplz-manage-consent-offset); min-width: 100px; height: var(--cmplz-manage-consent-height); right: 40px; padding: 15px; cursor: pointer; animation: mc_slideOut 0.5s forwards;}#cmplz-manage-consent .cmplz-manage-consent:active { outline: none; border: none;}#cmplz-manage-consent .cmplz-manage-consent.cmplz-dismissed { display: none;}#cmplz-manage-consent .cmplz-manage-consent:hover,#cmplz-manage-consent .cmplz-manage-consent:focus { animation: mc_slideIn 0.5s forwards; animation-delay: 0;}@-webkit-keyframes mc_slideIn { 100% { bottom: 0; }}@keyframes mc_slideIn { 100% { bottom: 0; }}@-webkit-keyframes mc_slideOut { 100% { bottom: var(--cmplz-manage-consent-offset); }}@keyframes mc_slideOut { 100% { bottom: var(--cmplz-manage-consent-offset); }}@media (max-width: 425px) { .cmplz-cookiebanner .cmplz-header .cmplz-title { display: none; }}.cmplz-cookiebanner { max-height: calc(100vh - 20px); overflow-y: auto; position: fixed; height: auto; left: 50%; top: 50%; -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); grid-template-rows: minmax(0, 1fr); z-index: 99999; background: var(--cmplz_banner_background_color);}.cmplz-cookiebanner a { transition: initial;}.cmplz-cookiebanner .cmplz-buttons a.cmplz-btn.tcf { display: none;}.cmplz-cookiebanner.cmplz-dismissed { display: none;}.cmplz-cookiebanner .cmplz-body { width: 100%; grid-column: span 3; overflow-y: auto; overflow-x: hidden; max-height: 55vh;}.cmplz-cookiebanner .cmplz-body::-webkit-scrollbar-track { border-radius: 10px; -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0); background-color: transparent;}.cmplz-cookiebanner .cmplz-body::-webkit-scrollbar { width: 5px; background-color: transparent;}.cmplz-cookiebanner .cmplz-body::-webkit-scrollbar-thumb { background-color: var(--cmplz_button_accept_background_color); border-radius: 10px;}@media (min-width: 350px) { .cmplz-cookiebanner .cmplz-body { min-width: 300px; }}@media (max-height: 400px) { .cmplz-cookiebanner { height: calc(100vh - 20px); display: flex; flex-direction: column; overflow: hidden; gap: 1px; grid-row-gap: 1px; padding: 7px 12px !important; zoom: 0.6; } .cmplz-cookiebanner .cmplz-body { flex: 1; min-height: 0; overflow-y: auto; max-height: none; margin-top: 15px !important; } .cmplz-cookiebanner .cmplz-header, .cmplz-cookiebanner .cmplz-divider, .cmplz-cookiebanner .cmplz-links, .cmplz-cookiebanner .cmplz-buttons, .cmplz-cookiebanner .cmplz-documents { flex-shrink: 0; } .cmplz-cookiebanner .cmplz-header { margin-bottom: 15px !important; max-height: 10px; } .cmplz-close { zoom: 0.6 !important; } .cmplz-cookiebanner .cmplz-buttons { gap: 1px !important; } .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { height: 15vh !important; min-height: unset !important; padding: 0 !important; white-space: nowrap !important; font-size: 1.1rem !important; line-height: 14px !important; zoom: 0.5 !important; } .cmplz-cookiebanner .cmplz-documents, .cmplz-cookiebanner .cmplz-information { zoom: 0.5 !important; }}@media (max-height: 400px) and (max-width: 768px) { .cmplz-cookiebanner { gap: 1px; }}.cmplz-cookiebanner { border-style: solid; border-color: var(--cmplz_banner_border_color); border-width: var(--cmplz_banner_border_width); border-radius: var(--cmplz_banner_border_radius); padding: 15px 20px; display: grid; grid-gap: 10px;}.cmplz-cookiebanner .cmplz-divider { margin-left: -20px; margin-right: -20px;}.cmplz-cookiebanner .cmplz-header { grid-template-columns: 100px 1fr 100px; align-items: center; display: grid; grid-column: span 3;}@media (max-width: 399px) { .cmplz-cookiebanner .cmplz-header { grid-template-columns: auto 1fr auto; }}.cmplz-cookiebanner .cmplz-logo svg { max-height: 35px; width: inherit;}.cmplz-cookiebanner .cmplz-logo img { max-height: 40px; width: inherit;}.cmplz-cookiebanner .cmplz-title { justify-self: center; grid-column-start: 2; font-size: var(--cmplz_title_font_size); color: var(--cmplz_text_color); font-weight: 500;}.cmplz-cookiebanner .cmplz-close { line-height: 20px; justify-self: end; grid-column-start: 3; font-size: 20px; cursor: pointer; width: 20px; height: 20px; color: var(--cmplz_text_color);}.cmplz-cookiebanner .cmplz-close svg { width: 20px; height: 20px;}.cmplz-cookiebanner .cmplz-close:hover { text-decoration: none; line-height: initial; font-size: 18px;}.cmplz-cookiebanner .cmplz-message { word-wrap: break-word; font-size: var(--cmplz_text_font_size); line-height: var(--cmplz_text_line_height); color: var(--cmplz_text_color); margin-bottom: 5px;}.cmplz-cookiebanner .cmplz-message a { color: var(--cmplz_hyperlink_color);}.cmplz-cookiebanner .cmplz-message,.cmplz-cookiebanner .cmplz-categories,.cmplz-cookiebanner .cmplz-links,.cmplz-cookiebanner .cmplz-buttons,.cmplz-cookiebanner .cmplz-divider { grid-column: span 3;}.cmplz-cookiebanner .cmplz-categories.cmplz-tcf .cmplz-category .cmplz-category-header { grid-template-columns: 1fr auto;}.cmplz-cookiebanner .cmplz-categories .cmplz-category { background-color: rgba(239, 239, 239, 0.5);}.cmplz-cookiebanner .cmplz-categories .cmplz-category:not(:last-child) { margin-bottom: 10px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header { display: grid; grid-template-columns: 1fr auto 15px; grid-template-rows: minmax(0, 1fr); align-items: center; grid-gap: 10px; padding: 10px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title { font-weight: 500; grid-column-start: 1; justify-self: start; font-size: var(--cmplz_category_header_title_font_size); color: var(--cmplz_text_color); margin: 0;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active { font-size: var(--cmplz_category_header_active_font_size); font-weight: 500; color: var(--cmplz_category_header_always_active_color);}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active label { display: none;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-banner-checkbox { display: flex; align-items: center; margin: 0;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-banner-checkbox input[data-category=cmplz_functional] { display: none;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle { background: none; border: none; padding: 0; margin: 0; cursor: pointer; grid-column-start: 3; display: flex; align-items: center; justify-content: center; color: inherit;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-icon.cmplz-open { cursor: pointer; content: ''; transform: rotate(0deg); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; background-size: cover; height: 18px; width: 18px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-description { font-size: var(--cmplz_category_body_font_size); color: var(--cmplz_text_color); margin: 0; max-width: 100%; padding: 10px;}@media (max-width: 425px) { .cmplz-cookiebanner .cmplz-category .cmplz-category-header { grid-template-columns: 1fr!important; }}@media (max-width: 425px) { .cmplz-cookiebanner .cmplz-message { margin-right: 5px; }}.cmplz-cookiebanner .cmplz-buttons { display: flex; gap: var(--cmplz_banner_margin);}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn { min-height: 45px; padding: 10px; margin: initial; width: 100%; white-space: nowrap; border-radius: var(--cmplz_button_border_radius); cursor: pointer; font-size: var(--cmplz_button_font_size); font-weight: 500; text-decoration: none; line-height: 20px; text-align: center; flex: initial;}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn:hover { text-decoration: none;}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept { background-color: var(--cmplz_button_accept_background_color); border: 1px solid var(--cmplz_button_accept_border_color); color: var(--cmplz_button_accept_text_color);}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny { background-color: var(--cmplz_button_deny_background_color); border: 1px solid var(--cmplz_button_deny_border_color); color: var(--cmplz_button_deny_text_color);}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences { background-color: var(--cmplz_button_settings_background_color); border: 1px solid var(--cmplz_button_settings_border_color); color: var(--cmplz_button_settings_text_color);}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences { background-color: var(--cmplz_button_settings_background_color); border: 1px solid var(--cmplz_button_settings_border_color); color: var(--cmplz_button_settings_text_color);}.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-manage-options { background-color: var(--cmplz_button_settings_background_color); border: 1px solid var(--cmplz_button_settings_border_color); color: var(--cmplz_button_settings_text_color);}.cmplz-cookiebanner .cmplz-buttons a.cmplz-btn { display: flex; align-items: center; justify-content: center; padding: initial;}@media (max-width: 425px) { .cmplz-cookiebanner .cmplz-links.cmplz-information { display: initial; text-align: center; }}.cmplz-cookiebanner .cmplz-links { display: flex; gap: var(--cmplz_banner_margin);}.cmplz-cookiebanner .cmplz-links.cmplz-information { justify-content: space-between;}.cmplz-cookiebanner .cmplz-links.cmplz-documents { justify-content: center;}.cmplz-cookiebanner .cmplz-links .cmplz-link { color: var(--cmplz_hyperlink_color); font-size: var(--cmplz_link_font_size); text-decoration: underline; margin: 0;}.cmplz-cookiebanner .cmplz-links .cmplz-link.cmplz-read-more-purposes { display: none;}.cmplz-cookiebanner .cmplz-links ul { margin: 0; padding: 0; list-style: none; display: flex; gap: var(--cmplz_banner_margin); justify-content: center;}.cmplz-categories .cmplz-category .cmplz-description-statistics-anonymous { display: none;}.cmplz-categories .cmplz-category .cmplz-description-statistics { display: block;}.cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle { background: none; border: none; padding: 0; margin: 0; cursor: pointer; grid-column-start: 3; display: flex; align-items: center; justify-content: center; color: inherit;}.cmplz-categories .cmplz-category .cmplz-category-toggle[aria-expanded="true"] .cmplz-icon.cmplz-open { transform: rotate(180deg);}.cmplz-cookiebanner { top: initial; left: initial; right: 10px; bottom: 10px; transform: initial;}@media (min-width: 768px) { .cmplz-cookiebanner { min-width: var(--cmplz_banner_width); max-width: 100%; display: grid; grid-row-gap: 10px; }}@media (max-width: 768px) { .cmplz-cookiebanner { left: initial; right: initial; bottom: 0; width: 100%; } .cmplz-cookiebanner .cmplz-buttons { flex-direction: column; }}@media (min-width: 768px) { .cmplz-message, .cmplz-categories { width: calc(var(--cmplz_banner_width) - 42px); }}.cmplz-cookiebanner .cmplz-categories,.cmplz-cookiebanner .cmplz-save-preferences,.cmplz-cookiebanner .cmplz-link.cmplz-manage-options,.cmplz-cookiebanner .cmplz-manage-vendors,.cmplz-cookiebanner .cmplz-read-more,.cmplz-cookiebanner .cmplz-btn.cmplz-manage-options { display: none;}.cmplz-cookiebanner .cmplz-categories.cmplz-fade-in { animation: fadeIn 1s; -webkit-animation: fadeIn 1s; -moz-animation: fadeIn 1s; -o-animation: fadeIn 1s; -ms-animation: fadeIn 1s; display: block;}@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}@-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}@-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}@-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}@-ms-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; }}.cmplz-cookiebanner .cmplz-links.cmplz-information { display: none;}.cmplz-cookiebanner .cmplz-preferences,.cmplz-manage-consent-container .cmplz-preferences { display: none;}@media (max-width: 768px) { #cmplz-manage-consent .cmplz-manage-consent { display: none; }}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox { position: relative;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox { opacity: 0; margin: 0; margin-top: -10px; cursor: pointer; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; position: absolute; z-index: 1; top: 0px; left: 0px; width: 40px; height: 20px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus + .cmplz-label:before { box-shadow: 0 0 0 2px #245fcc;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label::before { display: block; background-color: var(--cmplz_slider_active_color); content: ""; padding-left: 6px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label:after { left: 14px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label { position: relative; padding-left: 30px; margin: 0;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label:before,.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label:after { box-sizing: border-box; position: absolute; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; transition: background-color 0.3s, left 0.3s;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label:before { display: block; content: ""; color: #fff; box-sizing: border-box; font-family: 'FontAwesome', sans-serif; padding-left: 23px; font-size: 12px; line-height: 20px; background-color: var(--cmplz_slider_inactive_color); left: 0px; top: -7px; height: 15px; width: 28px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label:after { display: block; content: ""; letter-spacing: 20px; background: var(--cmplz_slider_bullet_color); left: 4px; top: -5px; height: 11px; width: 11px;}.cmplz-cookiebanner { box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;}#cmplz-manage-consent .cmplz-manage-consent { box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;}.cmplz-cookiebanner.cmplz-show { box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;}.cmplz-cookiebanner.cmplz-show:hover { transition-duration: 1s; box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;} .instagram-media.cmplz-placeholder-element > div { max-width: 100%; }