/* ========================= */
/* :: 1.0 WEB FONTS  */
/* ========================= */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@400;500;600;700&display=swap');

/* ================================== */
/* :: 2.0 GLOBAL Variable Define CSS  */
/* ================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    /* Google Font */
    --bebas-neue: 'Bebas Neue', sans-serif;
    --barlow-condensed: 'Barlow Condensed', sans-serif;

    /* Color Palette */
    --white: #fff;
    --black: #000;
    --body-color: #242424;
    --primary: #dd042b;
    --dark: #0e151b;
    --dark-2: #0d1216;
    --gray-light: #d9d9d9;
    --gray-dark: #73797c;
}

/* ========================= */
/* :: 3.0 COMMON CSS */
/* ========================= */
html,
body {
    height: 100%;
    scroll-behavior: smooth;
}
body {
    color: var(--white);
    font-size: 16px;
    font-family: var(--barlow-condensed);
    font-weight: 400;
    line-height: normal;
    background-color: var(--body-color);
    text-rendering: optimizeLegibility;
    /* 'clip' i.p.v. 'hidden': klipt horizontale overflow net zo, maar maakt van
       de body GEEN scroll-container -> de sticky header blijft betrouwbaar staan
       bij scrollen (overflow:hidden maakt overflow-y:auto en breekt sticky).
       'hidden' als fallback voor oude browsers die 'clip' niet kennen. */
    overflow-x: hidden;
    overflow-x: clip;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
}
section,
.section {
    position: relative;
}
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
}
a,
button {
    outline: none;
    box-shadow: none;
    text-decoration: none;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
button {
    padding: 0;
    border: none;
    background: unset;
}
ol,
ul {
    margin: 0;
    padding: 0;
}
ol li,
ul li {
    list-style: none;
}
img {
    height: auto;
    max-width: 100%;
    object-fit: cover;
}
input,
input:focus,
input:focus-visible,
input:active,
select,
.form-select,
.form-select:focus,
textarea {
    outline: none;
    box-shadow: none;
}
* + address,
* + dl,
* + fieldset,
* + figure,
* + ol,
* + p,
* + pre,
* + ul {
    margin: 0;
    padding: 0;
}

*::-moz-selection {
    background: var(--secondary);
    color: var(--white);
    text-shadow: none;
}
::-moz-selection {
    background: var(--secondary);
    color: var(--white);
    text-shadow: none;
}
::selection {
    background: var(--secondary);
    color: var(--white);
    text-shadow: none;
}

/* =============================== */
/* :: 4.0 Common CSS */
/* =============================== */

/* ===== Typography CSS Start ===== */
h1,
h2,
h3,
h4,
h5 {
    font-family: var(--bebas-neue);
}

.ff-bebas-neue {
    font-family: var(--bebas-neue);
}
.ff-inter {
    font-family: var(--barlow-condensed);
}

.fs-1 {
    font-size: 40px !important;
    line-height: 1.21;
}
.fs-2 {
    font-size: 28px !important;
    line-height: normal;
}
.fs-3 {
    font-size: 26px !important;
    line-height: normal;
}
.fs-4 {
    font-size: 21px !important;
    line-height: normal;
}
.fs-5 {
    font-size: 18px !important;
    line-height: normal;
}
/* ===== Typography CSS End ===== */

/* ===== Color CSS Start ===== */
.text-primary {
    color: var(--primary) !important;
}
/* ===== Color CSS End ===== */

/* ===== Button CSS Start ===== */
.btn {
    --btn-height: 36px;
    /* Diagonal seam angle — identical to the grey plate behind the logo
       (.logo--header::after uses transform: skewX(141deg) → 180 − 141 = 39°
       off vertical). Deriving the skew from the height keeps that exact same
       angle at every responsive button height. */
    --btn-slant: 39deg;
    --btn-skew: calc(var(--btn-height) * tan(var(--btn-slant)));
    /* Outer corner chamfer: the angle only cuts the corner, then the
       edge runs straight down — like the "Oplossingen" sub-buttons. */
    --btn-chamfer-x: 13px;
    --btn-chamfer-y: 18px;
    height: var(--btn-height);
    padding: 0;
    border: none;
    border-radius: 0;
    color: var(--white);
    line-height: normal;
    display: inline-flex;
    align-items: center;
    /* Transparent gap between the grey text part and the red icon part */
    gap: 5px;
    transition: all 0.3s ease;
}
.btn:hover {
    color: var(--white);
    gap: 9px;
}
.btn__text {
    height: 100%;
    font-size: 16px;
    font-family: var(--bebas-neue);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    clip-path: polygon(
        0% var(--btn-chamfer-y),
        var(--btn-chamfer-x) 0%,
        100% 0%,
        calc(100% - var(--btn-skew)) 100%,
        0% 100%
    );
    background: #73797c;
    padding: 9px 16px 8px;
    padding-left: calc(var(--btn-chamfer-x) + 10px);
    /* The slanted seam eats into the right side, so add half the skew back on
       top of the left padding — text then sits equally far from both edges. */
    padding-right: calc(var(--btn-chamfer-x) + 10px + var(--btn-skew) / 2);
    transition: all 0.3s ease;
}
.btn__text__wrapper {
    position: relative;
    overflow: hidden;
    height: 1.2em;
    display: inline-flex;
    align-items: center;
}
.btn__text__default,
.btn__text__hover {
    display: block;
    white-space: nowrap;
    line-height: 1.2em;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
    transition: transform 0.3s ease;
}
.btn__text__hover {
    position: absolute;
    top: 100%;
    left: 0;
}
.btnAnim:hover .btn__text__default {
    transform: translateY(-100%) translateZ(0);
}
.btnAnim:hover .btn__text__hover {
    transform: translateY(-100%) translateZ(0);
}
.btn__icon {
    height: 100%;
    clip-path: polygon(
        var(--btn-skew) 0%,
        100% 0%,
        100% calc(100% - var(--btn-chamfer-y)),
        calc(100% - var(--btn-chamfer-x)) 100%,
        0% 100%
    );
    background: var(--primary);
    padding: 8px 18px;
    padding-left: calc(var(--btn-skew) + 2px);
    padding-right: 18px;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
    margin-left: calc(var(--btn-skew) * -1);
}
.btn__icon svg {
    width: 16px;
    height: 16px;
}

/* Note:-  */

/* Button Animation */

/* ===== Button CSS End ===== */

/* ===== CSS for Random Componetns/Classes Start ===== */

/* PreLoader Start */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
#loader {
    position: relative;
    width: 96px;
    height: auto;
    padding: 2px;
    background-color: rgba(221, 4, 44, 1);
    clip-path: polygon(
        12px 0%,
        100% 0%,
        100% calc(100% - 12px),
        calc(100% - 12px) 100%,
        0% 100%,
        0% 12px
    );
    animation: loaderPulse 1s ease-in-out infinite;
}
#loader-inner {
    width: 100%;
    height: 100%;
    padding: 8px;
    background-color: #222;
    clip-path: polygon(
        11px 0%,
        100% 0%,
        100% calc(100% - 11px),
        calc(100% - 11px) 100%,
        0% 100%,
        0% 11px
    );
}
#loader-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    clip-path: polygon(
        5px 0%,
        100% 0%,
        100% calc(100% - 5px),
        calc(100% - 5px) 100%,
        0% 100%,
        0% 5px
    );
}
@keyframes loaderPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.06);
        opacity: 0.75;
    }
}
/* PreLoader End */

/* Fixed header background image — all content scrolls over it.
   Covers the top ~75% of the viewport and fades into the dark base below.
   A dark tint keeps text readable where it passes over the image. */
.page-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* Fills the whole screen and is fixed, so the image AND the fade over it
       stay put while all content scrolls over them. The image stays visible
       across the full viewport; the tint only darkens it enough to keep text
       readable (a touch heavier at the top for the header + hero copy). */
    height: 100vh;
    z-index: -1;
    /* Fade darkens left → right (darkest on the left, where the hero copy
       sits, lighter on the right so the image shows through) with an extra
       darker band along the bottom. Two stacked gradients over the fixed
       image; both use the same dark tone so they blend cleanly. */
    background:
        linear-gradient(
            to right,
            rgba(13, 18, 22, 0.98) 0%,
            rgba(13, 18, 22, 0.92) 35%,
            rgba(13, 18, 22, 0.6) 62%,
            rgba(13, 18, 22, 0.18) 85%,
            rgba(13, 18, 22, 0) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(13, 18, 22, 0) 62%,
            rgba(13, 18, 22, 0.55) 100%
        ),
        var(--page-bg-image, url('../imgs/hero-bg.webp')) no-repeat center center / cover;
    pointer-events: none;
}
/* Homepage-only: video i.p.v. vaste afbeelding. Zelfde afmetingen/positie als
   .page-bg hierboven; de twee donkere gradients komen als losse laag erover
   (.page-bg--video-overlay), zodat tekst er even goed op leesbaar blijft. */
.page-bg-video {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    width: 100%;
    z-index: -2;
    object-fit: cover;
    pointer-events: none;
}
.page-bg.page-bg--video-overlay {
    background:
        linear-gradient(
            to right,
            rgba(13, 18, 22, 0.98) 0%,
            rgba(13, 18, 22, 0.92) 35%,
            rgba(13, 18, 22, 0.6) 62%,
            rgba(13, 18, 22, 0.18) 85%,
            rgba(13, 18, 22, 0) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(13, 18, 22, 0) 62%,
            rgba(13, 18, 22, 0.55) 100%
        );
}
/* Transparent wrapper: the fixed header image stays visible behind the
   text and blocks that scroll over it. */
.page-scroll {
    position: relative;
    z-index: 1;
}

.section-overlay {
    position: relative;
    z-index: 1;
}
.section-overlay::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #0d1216;
    opacity: 0.85;
    z-index: -1;
}
.transition-common {
    transition: all 0.3s ease-in-out;
}
.transition-ease {
    transition: all 0.4s ease;
}
/* ===== CSS for Random Componetns/Classes End ===== */

/* =============================== */
/* :: 5.0 Header Area CSS Start */
/* =============================== */
.header--area {
    /* Fixed i.p.v. sticky: sticky wordt gebroken door GSAP ScrollTrigger
       (scroller: documentElement) waardoor de header meescrolt. Fixed staat
       t.o.v. de viewport en blijft altijd staan. De content krijgt via een
       klein script in main.tem.php een padding-top gelijk aan de headerhoogte. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: 1px solid rgba(217, 217, 217, 0.25);
    /* Bewust transparanter dan een "normale" header: secties die er straks
       onderdoor scrollen (bv. de teamfoto-achtergrond bij "Ervaring") blijven
       zichtbaar door de balk heen i.p.v. volledig weggedrukt te worden. */
    background-color: rgba(13, 18, 22, 0.55);
    backdrop-filter: blur(3px);
}

/* Logo grey angled plate — base (mobile) so it matches desktop */
.logo--header {
    padding: 8px 0;
    padding-right: 32px;
}
.logo--header::after {
    content: '';
    position: absolute;
    right: 0;
    /* Verticaal ruim doorlopen zodat de grijze plaat op mobiel aansluit op de
       boven- en onderrand van de balk (geen zwarte rand meer boven/onder de
       verticale padding van .header__wrapper). De overflow-hidden van
       .header--area knipt het overschot netjes af. */
    top: -40px;
    height: calc(100% + 80px);
    width: 200vw;
    background-color: #d9d9d9;
    z-index: -1;
    transform: skewX(141deg);
}
.header__wrapper {
    padding: 16px 0;
}

.logo--mobileMenu {
    max-width: 72px;
    width: 100%;
}
.logo__wrap {
    max-width: 64px;
    width: 100%;
}
.mobile-menu.offcanvas {
    background-color: rgba(14, 21, 27, 0.8);
    backdrop-filter: blur(8px);
}
.btn--mobileMenuOpen,
.btn--mobileMenuClose,
.btn--modalClose {
    height: 40px;
    width: auto;
    color: var(--white);
    font-size: 16px;
}
.btn--mobileMenuOpen:hover .btn__icon,
.btn--mobileMenuClose:hover .btn__icon,
.btn--modalClose:hover .btn__icon {
    background-color: var(--white);
    color: var(--primary);
}
.nav__item--mobileMenu {
    border-bottom: 1px solid var(--gray-light);
}
.nav__link--mobileMenu {
    padding: 14px 0;
    color: var(--white);
}
.nav__link--mobileMenu:hover,
.nav__link--mobileMenu.active {
    color: var(--primary);
}
.action-btns {
    gap: 16px;
}
.mobile-menu .action-btns .btn {
    --btn-height: 42px;
}
.mobile-menu .action-btns .btn__text {
    font-size: 18px;
    padding: 11px 20px 10px;
    padding-right: calc(20px + var(--btn-skew) / 2);
}
.mobile-menu .action-btns .btn__icon {
    padding: 8px 26px;
    padding-right: 18px;
}
.search-btn {
    width: 24px;
    height: 24px;
}
.search-btn svg {
    width: 100%;
    height: 100%;
}
/* Meer lucht rond het vergrootglas: op mobiel rechts (t.o.v. hamburger),
   op desktop links (t.o.v. de contact-knop). */
.header__mobile .action-btn__search {
    margin-right: 16px;
}
.action-btns .action-btn__search {
    margin-left: 16px;
}
.header__phone {
    color: #dadada;
    font-family: var(--bebas-neue);
    font-size: 18px;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.header__phone:hover {
    color: var(--primary);
}
.header__phone i {
    font-size: 18px;
    color: var(--primary);
}
.header__mobile .header__phone {
    font-size: 14px;
}
.header__mobile .header__phone i {
    font-size: 15px;
}
/* Desktop: telefoonnummer klein onder de contact-knop (rechts uitgelijnd),
   past binnen de hoogte van het logo-vlak dus de balk wordt er niet hoger van. */
.action-btn__contact .action-btn__phone {
    margin-top: 5px;
    line-height: 1;
}
.action-btn__contact .header__phone {
    font-size: 15px;
}
.action-btn__contact .header__phone i {
    font-size: 14px;
}
.search-modal .modal-content {
    background-color: rgba(14, 21, 27, 0.8);
    backdrop-filter: blur(8px);
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.2);
}
.search-modal .modal-header {
    border: none;
}

/* Navigation for Desktop Start */
.nav__wrapper--header {
    gap: 24px;
}
.nav__item--header::after {
    content: '';
    position: absolute;
    right: -13px;
    top: 45%;
    transform: translateY(-50%);
    width: 1px;
    height: 85%;
    background-color: #d9d9d9;
}
.nav__item--header:last-child::after {
    display: none;
}
.nav__link--header {
    color: #dadada;
}
.nav__link--header:hover,
.nav__link--header.active {
    color: var(--primary);
}
/* Navigation for Desktop End */

/* ---- Text flip animation ---- */
.link-anim__text__wrapper {
    position: relative;
    overflow: hidden;
}
.link-anim__text__default,
.link-anim__text__hover {
    display: block;
    white-space: nowrap;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
    transition:
        transform 0.3s cubic-bezier(0.76, 0, 0.24, 1),
        color 0.3s ease;
}
.link-anim__text__hover {
    position: absolute;
    top: 100%;
    left: 0;
    color: currentColor;
}
.link-anim:hover .link-anim__text__default {
    transform: translateY(-100%) translateZ(0);
}
.link-anim:hover .link-anim__text__hover {
    transform: translateY(-100%) translateZ(0);
    color: currentColor;
}
/* =============================== */
/* :: 5.0 Header Area CSS End */
/* =============================== */

/* =============================== */
/* :: 6.0 Hero Section CSS Start */
/* =============================== */
.hero--section {
    min-height: 468px;
    padding: 48px 0;
    background: transparent;
}
.hero__wrapper {
    max-width: 632px;
}
.main__title {
    font-size: 36px;
}
/* Compacte hero (alleen titel/subtitel, geen intro en knop): geen vaste
   minimale hoogte, alleen de padding rond de tekst. */
.hero--section.hero--compact {
    min-height: 0;
}
/* Hero op een pagina met de video als achtergrond (bv. Over ons): hoog, zodat
   de video goed in beeld is voordat het eerste tekstblok begint. */
.hero--section.hero--video {
    min-height: calc(82vh - var(--header-h, 0px));
}
.hero__subtitle {
    font-family: var(--bebas-neue);
    font-weight: 400;
    color: var(--gray-light);
    letter-spacing: 0.5px;
}
.hero__para {
    line-height: 1.7;
}
/* =============================== */
/* :: 6.0 Hero Section CSS End */
/* =============================== */

/* =============================== */
/* :: 7.0 Expertise Section CSS Start */
/* =============================== */
.expertise--section {
    padding: 48px 0;
}
.expertise__card {
    height: 100%;
    padding: 32px 24px;
    top: 0;
    border: 1px solid var(--gray-dark);
    background: linear-gradient(to bottom, #172e41 0%, #000 50%, #172e41 100%);
    background-size: auto 200%;
    transition: all 0.25s ease-in-out;
}
.expertise__card::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary);
    transition: all 0.25s ease-in-out;
    z-index: 1;
}
.expertise__card:hover {
    top: -8px;
    border-color: rgba(221, 4, 44, 0.75);
    box-shadow: 0 0 16px var(--dark-2);
    background-position: bottom center;
}
.expertise__card:hover::after {
    width: 100%;
}
.expertise__icon__box {
    width: 60px;
    height: 60px;
}
/* =============================== */
/* :: 7.0 Expertise Section CSS End */
/* =============================== */

/* =============================== */
/* :: 8.0 Customer Section CSS Start */
/* =============================== */
.customer--section {
    /* Zelfde padding-schaal als .expertise--section, zodat de ruimte t.o.v.
       de secties erboven/eronder consistent aanvoelt (zie responsive.css
       voor de grotere breakpoints). */
    /* Onderaan minder: de logo-slider heeft zelf al verticale padding. */
    padding: 48px 0 24px;
}
.customer__slider {
    padding: 24px 0;
    background: transparent;
}
.customer__slider .swiper-wrapper {
    transition-timing-function: linear;
}
.customer__slider .swiper-slide {
    width: 160px;
    height: auto;
}
/* =============================== */
/* :: 8.0 Customer Section CSS End */
/* =============================== */

/* =============================== */
/* :: 9.0 Solutions Section CSS Start */
/* =============================== */
/* Alle homepage-secties: even veel ruimte boven als onder (48/64/80/96px per
   breakpoint, zie responsive.css), geen extra marges ertussen. */
.solutions--section {
    padding: 48px 0;
}
.nav-tabs,
.nav-tabs .nav-link,
.nav-tabs .nav-link.active {
    border: none;
    border-radius: 0;
    background-color: transparent;
    padding: 0;
}
.nav-tabs .nav-link,
.nav-tabs .nav-link.active {
    /* Zelfde hoogte + hoekafsnijding (chamfer) als de pijl-knoppen (.btn):
       een klein schuin stukje in de hoek en dan recht naar beneden. Chamfer
       links-boven en rechts-onder (13×18px), verder rechte zijkanten — identiek
       silhouet aan .btn. */
    --btn-height: 40px;
    --btn-chamfer-x: 13px;
    --btn-chamfer-y: 18px;
    height: var(--btn-height);
    display: inline-flex;
    align-items: center;
    /* Gelijke tekst-inspringing als de .btn-knoppen (.btn__text padding-left). */
    padding: 0 calc(var(--btn-chamfer-x) + 10px);
    font-family: var(--bebas-neue);
    font-size: 18px;
    text-transform: uppercase;
    color: var(--white);
    clip-path: polygon(
        var(--btn-chamfer-x) 0%,
        100% 0%,
        100% calc(100% - var(--btn-chamfer-y)),
        calc(100% - var(--btn-chamfer-x)) 100%,
        0% 100%,
        0% var(--btn-chamfer-y)
    );
    background-color: var(--gray-dark);
    transition: all 0.4s ease;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link.active {
    background-color: var(--primary);
}
.nav-tabs {
    /* Knoppen lopen terug naar een volgende regel als ze niet naast elkaar
       passen (extra categorieën, smalle schermen) i.p.v. buiten beeld te vallen.
       De gap-utility op het element zorgt ook voor de ruimte tussen de regels. */
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.nav-tabs .nav-link {
    white-space: nowrap;
}

.tab__wrap {
    gap: 16px;
}
/* Introtekst even breed als de hero-tekst (.hero__wrapper). */
.section__para--solutions {
    max-width: 632px;
}
.tab__inner__content {
    height: 100%;
    padding: 24px 20px;
    /* Zelfde kleur als de navigatiebalk was op het moment dat dit is
       toegevoegd. Bewust NIET gekoppeld aan .header--area's transparantie:
       die is later verlaagd t.b.v. de doorscrollende teamfoto in de
       Ervaring-sectie, wat de leesbaarheid van deze (langere) contenttekst
       zou schaden. */
    background-color: rgba(13, 18, 22, 0.92);
    backdrop-filter: blur(8px);
}
/* Productielijn-kaart (homepage Oplossingen + /productielijnen): rode rand
   en rode lijn onderaan bij hover, zelfde gevoel als de machinekaarten. */
.tab__item {
    position: relative;
    border: 1px solid transparent;
    transition: all 0.25s ease-in-out;
}
.tab__item::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary);
    transition: all 0.25s ease-in-out;
    z-index: 1;
}
.tab__item:hover {
    border-color: rgba(221, 4, 44, 0.75);
    box-shadow: 0 0 16px var(--dark-2);
}
.tab__item:hover::after {
    width: 100%;
}
/* Foto altijd volledig in beeld (niet bijgesneden) op de volle breedte van het
   vlak, zonder witte marge eromheen: de foto bepaalt de hoogte van het vlak.
   Is de tekst ernaast hoger, dan staat de foto verticaal gecentreerd en is de
   restruimte boven/onder wit: vrijwel alle productielijnfoto's hebben een witte
   achtergrond, dus dat loopt onzichtbaar in de foto over. */
.tab__thumb {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    overflow: hidden;
}
.tab__thumb__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}
/* =============================== */
/* :: 9.0 Solutions Section CSS End */
/* =============================== */

/* =============================== */
/* :: 10.0 Success Section CSS Start */
/* =============================== */
.success--section {
    padding: 48px 0;
}
.success__card {
    height: 100%;
    top: 0;
    border: 1px solid #73797c;
    background: linear-gradient(to bottom, #242424 0%, #000 100%);
    transition: all 0.25s ease-in-out;
}
.success__card::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary);
    transition: all 0.25s ease-in-out;
    z-index: 1;
}
.success__card:hover {
    top: -8px;
    border-color: rgba(221, 4, 44, 0.75);
    box-shadow: 0 0 16px var(--dark-2);
}
.success__card:hover::after {
    width: 100%;
}
.success__card__thumb {
    width: 100%;
    aspect-ratio: 1 / 0.665;
}
.success__card__thumb {
    position: relative;
    overflow: hidden;
}

.success__card__thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 100%
    );
    transform: translateY(-100%);
    transition: all 0.25s ease-in-out;
    pointer-events: none;
    z-index: 1;
}
.success__card:hover .success__card__thumb::after {
    transform: translateY(100%);
}
.success__card__thumb__inner {
    transition: all 0.25s ease-in-out;
}
.success__card:hover .success__card__thumb__inner {
    transform: scale(1.05);
}
.succes__card__inner {
    padding: 24px 20px;
}
.success__card__thumb__img {
    object-fit: cover;
}

.success__card__subtitle,
.success__card__para {
    font-size: 16px;
}
/* =============================== */
/* :: 10.0 Success Section CSS End */
/* =============================== */

/* =============================== */
/* :: 11.0 Experience Section CSS Start */
/* =============================== */
.experience--section {
    --experience-pad: 48px;
    /* Mobiel/tablet: alleen de rechterhelft van de foto (2460x780; de linker-
       helft is leeg, de eerste persoon staat pas halverwege) op schermbreedte
       onder de tekst. De foto is dus 200% breed, rechts uitgelijnd; de hoogte
       daarvan wordt gereserveerd via padding-bottom. Desktop-opmaak (cover +
       fade, hele foto) staat in responsive.css. De foto komt als
       --experience-bg uit het blok (blocks/7.tem.php). */
    --experience-photo-h: calc(200vw * 780 / 2460);
    margin-top: 0;
    padding: var(--experience-pad) 0;
    padding-bottom: calc(var(--experience-pad) + var(--experience-photo-h));
    background: var(--experience-bg) no-repeat right bottom / 200% auto;
    /* Bewust geen eigen achtergrondkleur: de vaste pagina-achtergrond blijft
       zichtbaar door de transparante delen van de foto en de fade heen. */
}
.experience__wrapper {
    max-width: 792px;
}
.experience--section .section__para {
    line-height: 1.7;
}
/* Titel/tekst liggen deels over de foto: schaduw voor voldoende contrast,
   in aanvulling op de donkere fade aan de linkerkant. */
.section__title--experience,
.section__para--experience {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}
/* =============================== */
/* :: 11.0 Experience Section CSS End */
/* =============================== */

/* =============================== */
/* :: 12.0 Contact Section CSS Start */
/* =============================== */
.contact--section {
    --contact-pad: 48px;
    padding: var(--contact-pad) 0;
}
/* Achtergrondfoto's contactblok (zie templates/contact_section.tem.php):
   - desktop (>= 992px, responsive.css): --contact-bg sectie-vullend (cover,
     links uitgelijnd) met fade van links (donker, voor de contactgegevens)
     naar rechts (transparant), sectie minimaal zo hoog als de foto op volle
     breedte (--contact-bg-ratio) -> nooit verticaal bijgesneden;
   - mobiel/tablet (< 992px): geen desktopfoto; optioneel --contact-bg-mobile
     op schermbreedte onderaan de sectie (ruimte via padding-bottom). */
.contact--with-mobile-bg {
    padding-bottom: calc(var(--contact-pad) + 100vw * var(--contact-bg-mobile-ratio, 0.75));
    background: var(--contact-bg-mobile) no-repeat center bottom / 100% auto;
}
.contact__col--content,
.contact__col--form {
    position: relative;
    z-index: 2;
}
.contact--with-bg .section__title,
.contact--with-bg .section__subtitle,
.contact--with-bg .contact__info {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}
.contact__info__item {
    gap: 16px;
}
.contact__info__icon {
    width: 26px;
    height: 26px;
    background-color: var(--primary);
    color: var(--white);
}
.contact__info__text,
.contact__info__link {
    color: var(--white);
}
.contact__info__link:hover {
    color: var(--primary);
}
.contact__info__icon svg {
    width: 50%;
    height: 50%;
}
.form--contact {
    padding: 24px 20px;
    clip-path: polygon(
        16px 0%,
        100% 0%,
        100% calc(100% - 16px),
        calc(100% - 16px) 100%,
        0% 100%,
        0% 16px
    );
    background-color: #2f3338;
}
.form .title {
    font-size: 28px;
}
.form__label {
    font-size: 18px;
}
.form__input__wrapper {
    clip-path: polygon(
        12px 0%,
        100% 0%,
        100% calc(100% - 12px),
        calc(100% - 12px) 100%,
        0% 100%,
        0% 12px
    );
    background-color: var(--white);
    padding: 1px;
    width: 100%;
    height: 40px;
}
.form__input {
    display: block;
    border: none;
    outline: none;
    clip-path: inherit;
    background-color: var(--dark-2);
    padding: 8px 16px;
    color: var(--white);
    font-family: var(--bebas-neue);
    font-size: 13px;
    letter-spacing: 0.5px;
}
/* Rood kader alleen tijdens focus (niet blijven staan op ingevulde velden;
   voorkomt dat een gevuld veld als foutveld oogt). */
.form__input__wrapper:focus-within {
    background-color: var(--primary);
}
/* Autofill (browser) niet de donkere achtergrond/witte tekst laten overschrijven. */
.form__input:-webkit-autofill,
.form__input:-webkit-autofill:hover,
.form__input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--white);
    -webkit-box-shadow: 0 0 0 1000px var(--dark-2) inset;
    caret-color: var(--white);
    font-family: var(--bebas-neue);
}
.form__input::placeholder {
    color: var(--white);
}
.form__input__wrapper--textarea {
    height: 72px;
}
.form__item--submit .btn__text {
    max-width: 344px;
    width: 100%;
}
/* =============================== */
/* :: 12.0 Contact Section CSS End */
/* =============================== */

/* =============================== */
/* :: 13.0 Footer Area CSS Start */
/* =============================== */
.footer--area {
    position: relative;
    z-index: 1;
    background-color: var(--body-color);
}
.footer__top {
    padding: 48px 0;
}
.footer__top__wrapper {
    gap: 16px;
}
.logo--footer {
    max-width: 150px;
    width: 100%;
}
.footer__widgets {
    margin-top: 32px;
}
.nav__link--footer,
.footer__text,
.footer__link {
    color: var(--white);
    font-family: var(--bebas-neue);
    text-transform: uppercase;
    line-height: 1.667;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.5, 1);
}
.nav__link--footer::after,
.footer__link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 3px;
    height: 1px;
    width: 100%;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.5, 1);
}
.nav__link--footer:hover,
.footer__link:hover {
    color: var(--primary);
}
.nav__link--footer:hover::after,
.footer__link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}
.footer__bottom {
    padding: 10px 0;
    background-color: var(--gray-dark);
}
.footer__social__link {
    width: 26px;
    height: 26px;
    background-color: var(--white);
    color: var(--dark);
}
.footer__social__link:hover {
    background-color: var(--primary);
    color: var(--white);
}
.footer__social__link svg {
    width: 70.5%;
}
/* =============================== */
/* :: 13.0 Footer Area CSS End */
/* =============================== */

/* =============================== */
/* :: 14.0 Generic Page Content CSS Start */
/* =============================== */
.pagehead--section {
    padding: 48px 0 24px;
}
.pagehead__title {
    font-size: 40px;
    margin-bottom: 16px;
}
.pagehead__leader {
    max-width: 760px;
    color: var(--gray-light);
    line-height: 1.7;
}
/* Paginakop met fotoslider (detailpagina's, "Fotoboek"/gallery_id). Vervangt
   de platte .pagehead-koptekst zodra er foto's gekoppeld zijn: titel/intro/
   offerteknop liggen over de slider, met een donkere fade onderin voor
   leesbaarheid (zelfde soort effect als de homepage-hero). */
.page-hero {
    /* position via CSS (niet via de .position-relative utility): onder de vaste
       header wordt de koptekst sticky, zie .main--hero-under-header hieronder. */
    position: relative;
    height: 75vh;
    min-height: 480px;
    max-height: 800px;
}
/* De slider loopt achter de (half-transparante) vaste header door: <main>
   krijgt dan geen offset (zie script in main.tem.php) en de slider wordt met
   de headerhoogte (--header-h) verhoogd, zodat het zichtbare deel eronder even
   groot blijft. */
.main--hero-under-header .page-hero {
    height: calc(75vh + var(--header-h, 0px));
    min-height: calc(480px + var(--header-h, 0px));
    max-height: calc(800px + var(--header-h, 0px));
    /* De koptekst blijft bovenin staan terwijl de rest van de pagina eroverheen
       scrolt (zelfde effect als de vaste achtergrond op de homepage). */
    position: sticky;
    top: 0;
    z-index: 0;
}
/* Alles na de sticky koptekst scrolt eroverheen (behalve de lightbox, die
   blijft position: fixed over het hele scherm). */
.main--hero-under-header > .page-hero ~ :not(.page-lightbox) {
    position: relative;
    z-index: 1;
}
/* Titel/intro/knop scrollen gewoon mee met de pagina (--hero-shift = scrollY,
   uit het script in main.tem.php) en verdwijnen zo boven uit de koptekst; de
   slider-bediening vervaagt (--hero-scroll 0..1) en is weggeschoven niet klikbaar. */
.main--hero-under-header .page-hero__content {
    transform: translateY(calc(-1 * var(--hero-shift, 0px)));
    will-change: transform;
}
.main--hero-under-header .page-hero .swiper-button-prev,
.main--hero-under-header .page-hero .swiper-button-next,
.main--hero-under-header .page-hero .swiper-pagination {
    opacity: calc(1 - var(--hero-scroll, 0));
}
.page-hero--scrolled .page-hero__content,
.page-hero--scrolled .swiper-button-prev,
.page-hero--scrolled .swiper-button-next,
.page-hero--scrolled .swiper-pagination {
    pointer-events: none;
}
/* Koptekst met bedrijfsvideo i.p.v. fotoslider. */
.page-hero__video {
    display: block;
    object-fit: cover;
}
.page-hero__slider,
.page-hero__slider .swiper-wrapper,
.page-hero__slider .swiper-slide {
    height: 100%;
}
.page-hero__img {
    object-fit: cover;
}
.page-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(13, 18, 22, 0.95) 0%,
        rgba(13, 18, 22, 0.65) 30%,
        rgba(13, 18, 22, 0.1) 65%,
        rgba(13, 18, 22, 0) 100%
    );
}
.page-hero__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 32px;
    z-index: 2;
}
.page-hero__title {
    font-size: 40px;
    margin-bottom: 8px;
}
.page-hero__leader {
    max-width: 640px;
    color: var(--gray-light);
    line-height: 1.6;
    margin-bottom: 20px;
}
.page-hero .swiper-button-prev,
.page-hero .swiper-button-next {
    color: var(--white);
    z-index: 3;
    /* Zonder eigen achtergrond vallen de witte pijlen weg tegen een lichte
       foto (bv. een CAD-tekening met witte achtergrond) - vandaar een vast
       donker rondje eromheen, ongeacht wat er op de foto staat. */
    width: 44px;
    height: 44px;
    background-color: rgba(13, 18, 22, 0.55);
    border-radius: 50%;
    backdrop-filter: blur(2px);
}
.page-hero .swiper-button-prev::after,
.page-hero .swiper-button-next::after {
    font-size: 18px;
}
.page-hero .swiper-pagination {
    z-index: 3;
}
.page-hero .swiper-pagination-bullet {
    background: var(--white);
    opacity: 0.5;
}
.page-hero .swiper-pagination-bullet-active {
    background: var(--primary);
    opacity: 1;
}

/* Bedankpagina na het contactformulier (/bedankt). */
.thanks--section {
    padding: 64px 0 96px;
}
.thanks__card {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px 32px;
}
.thanks__icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background-color: var(--primary);
    color: var(--white);
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.thanks__title {
    font-size: 40px;
    margin-bottom: 16px;
}
.thanks__text {
    color: var(--gray-light);
    font-size: 18px;
    line-height: 1.7;
}
.thanks__direct {
    color: var(--gray-light);
    margin-top: 8px;
}
.thanks__direct a {
    color: var(--white);
    font-family: var(--bebas-neue);
    letter-spacing: 0.3px;
}
.thanks__direct a:hover {
    color: var(--primary);
}
.thanks__btns {
    margin-top: 32px;
}
/* reCAPTCHA v2-vinkje (alleen zichtbaar als de sleutel geen v3-sleutel is). */
.form__recaptcha--error {
    outline: 2px solid var(--primary);
    outline-offset: 4px;
}

/* Klantverhaal (nieuwsartikel, rubriek Referenties): citaat onder de koptekst. */
.story__quote {
    max-width: 900px;
    font-family: var(--barlow-condensed);
    font-style: italic;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.5;
    color: var(--gray-light);
    border-left: 3px solid var(--primary);
    padding-left: 20px;
}
.story__meta {
    color: var(--gray-light);
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Fotogalerij + lightbox onderaan een detailpagina ("Fotoboek (2)"/gallery_id2). */
.photo-grid__item {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}
.photo-grid__item img {
    object-fit: cover;
    transition: transform 0.3s ease;
}
.photo-grid__item:hover img {
    transform: scale(1.05);
}
.page-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(13, 18, 22, 0.96);
}
.page-lightbox.is-open {
    display: block;
}
.page-lightbox__slider,
.page-lightbox__slider .swiper-wrapper,
.page-lightbox__slider .swiper-slide {
    height: 100%;
}
.page-lightbox__slider .swiper-slide {
    display: flex;
}
.page-lightbox__img {
    max-width: 90%;
    max-height: 85vh;
    margin: auto;
    object-fit: contain;
}
.page-lightbox__close {
    position: absolute;
    top: 16px;
    right: 24px;
    z-index: 10;
    font-size: 36px;
    line-height: 1;
    color: var(--white);
    background: none;
    border: none;
    cursor: pointer;
}
.page-lightbox .swiper-button-prev,
.page-lightbox .swiper-button-next {
    color: var(--white);
}
.page-block {
    padding: 12px 0;
}
.page-block__body {
    line-height: 1.7;
    background-color: #2f3338;
    padding: 32px 28px;
    /* Zelfde afgeschuinde-hoeken-vorm als het contactformulier (.form--contact),
       zodat een tekstkader op een detailpagina bij de rest van de site past. */
    clip-path: polygon(
        20px 0%,
        100% 0%,
        100% calc(100% - 20px),
        calc(100% - 20px) 100%,
        0% 100%,
        0% 20px
    );
}
.page-block__body h2,
.page-block__body h3 {
    font-family: var(--bebas-neue);
    text-transform: uppercase;
    margin: 0 0 12px;
}
.page-block__body h2:not(:first-child),
.page-block__body h3:not(:first-child) {
    margin-top: 24px;
}
.page-block__body ul,
.page-block__body ol {
    padding-left: 20px;
    margin-bottom: 1em;
}
.page-block__body p:last-child,
.page-block__body ul:last-child,
.page-block__body ol:last-child {
    margin-bottom: 0;
}
.page-block__body p {
    margin-bottom: 1em;
}
.page-block__body a.button {
    color: var(--primary);
    text-decoration: underline;
}
.page-block__btn {
    margin-top: 8px;
}
/* Tekstblok (blok 9): iets meer lucht dan de aaneengesloten kaders op een
   detailpagina, zodat het als losse sectie leest. */
.textblock--section {
    padding: 24px 0;
}
.textblock--section .page-block__body > h2:first-child {
    margin-bottom: 16px;
}
.page-grid {
    padding: 24px 0 48px;
}
.page-grid__card {
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--gray-dark);
    background: linear-gradient(to bottom, #172e41 0%, #000 50%, #172e41 100%);
    background-size: auto 200%;
    color: var(--white);
    text-decoration: none;
    transition: all 0.25s ease-in-out;
}
.page-grid__card:hover {
    color: var(--white);
    border-color: rgba(221, 4, 44, 0.75);
    background-position: bottom center;
}
.page-grid__card__img {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.page-grid__card__img img {
    object-fit: cover;
}
.page-grid__card__body {
    padding: 20px;
}
.page-grid__card__title {
    font-size: 20px;
    margin-bottom: 8px;
}
.page-grid__card__leader {
    color: var(--gray-light);
    font-size: 14px;
    line-height: 1.6;
}
.page-grid__card__leader p {
    margin-bottom: 0;
}

/* /productielijnen: volle-breedte lijst (i.p.v. kaartenraster) + filters op
   industrie-categorie. .tab__item/.tab__thumb/.tab__inner__content zijn de
   bestaande stijlen van het "Oplossingen"-blok op de homepage (zelfde kader). */
.page-lines {
    padding: 24px 0 48px;
}
/* Zelfde afstand knoppen -> eerste item als bij "Oplossingen" op de homepage. */
.page-lines__filters {
    margin-bottom: 40px;
}
.page-lines__list {
    gap: 24px;
}
/* =============================== */
/* :: 14.0 Generic Page Content CSS End */
/* =============================== */