/* =========================================================================
   Favorite Packing — Design System
   Pas hieronder (:root) alles centraal aan: kleuren, lettertype, gewichten,
   groottes. De rest van het bestand gebruikt deze tokens.
   ========================================================================= */

:root {
  /* --- Merkkleuren (groen) --- */
  --c-green:        #689387;  /* primair groen (koppen, accenten)        */
  --c-green-light:  #87beaf;  /* licht groen (titels, hover-accenten)    */
  --c-green-dark:   #4f7269;  /* donker groen (links-hover, active)      */
  --c-green-bright: #1e9e85;  /* fel groen (hover van de CTA-balk)        */
  --c-veil:         rgba(0, 0, 0, 0.4);  /* halftransparant vlak achter tekst op foto */
  --c-ink:          #222222;  /* hoofdtekst                              */
  --c-muted:        #6b7c77;  /* gedempte tekst / bijschriften           */
  --c-bg:           #ffffff;  /* achtergrond                             */
  --c-bg-soft:      #f5f7f6;  /* zachte sectie-achtergrond               */
  /* Productlinks in Solutions/Machines/Consommables. Feller dan --c-green-dark
     (verzadiging 18% -> 60%) maar bewust niet schel; contrast op de grijze
     sectie-achtergrond blijft 4,6:1 en dus WCAG AA. */
  --c-green-link:       #1f7d5c;
  --c-green-link-hover: #146b4d;  /* iets dieper bij hover, 5,9:1 */

  /* --- Lettertype (variabel font Google Sans Flex) --- */
  --font-base: "Google Sans Flex", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* --- Lettergewichten (as 1..1000) --- */
  --w-heading: 779;   /* koppen        */
  --w-body:    384;   /* platte tekst  */
  --w-caption: 300;   /* bijschriften (fijne letter) — leesbaar maar fijn; 1..1000 */
  --w-subhead: 500;   /* sectie-ondertitels: h2-formaat, maar duidelijk minder vet */
  --w-link:    650;   /* productlinks: steviger dan platte tekst (384) */

  /* --- Lettergroottes (clamp = vloeiend mee-schalen op mobiel/desktop) --- */
  --fs-h1:      clamp(2.0rem, 1.4rem + 2.4vw, 3.2rem);
  --fs-h2:      clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem);
  --fs-h3:      clamp(1.2rem, 1.0rem + 0.9vw, 1.6rem);
  --fs-body:    clamp(1.0rem, 0.95rem + 0.2vw, 1.125rem);
  --fs-caption: clamp(0.8rem, 0.75rem + 0.2vw, 0.95rem);

  --tracking-head: 0.4px;  /* letterafstand koppen */
  --line-body: 1.6;        /* regelhoogte tekst    */

  /* --- Navigatie-lettergrootte ---
     De balk is krap: container 1170px min het logo (~202px) laat ~968px over
     voor acht menu-items plus de taalkiezer. Groter corps kan daarom alleen
     samen met minder padding tussen de items (zie de media-queries verderop).
     Klapt het menu op jouw scherm toch om? Zet --nav-fs-desktop een stap
     lager; alles hangt aan deze drie regels. */
  --nav-fs-desktop: 1.45rem;   /* ~23px op breed scherm (>=1200px) */
  --nav-fs-md:      1.15rem;   /* ~18px op 992-1199px, daar is minder ruimte */
  --nav-fs-mobile:  1.625rem;  /* ~26px in het uitklapmenu  */
  /* Submenu een fractie kleiner dan de hoofdnav. Blijft aan dezelfde
     tokens hangen, dus het schaalt automatisch mee als je de
     navigatiegrootte bijstelt. */
  --nav-sub-scale:  0.92;

  /* --- Hero op mobiel ---
     Het appel-logo stond op een vaste 150px terwijl de payoff eronder maar
     20px was: op een telefoon van 360px is dat 42% van de schermbreedte, dus
     het logo overstemt de kop. Beide schalen nu mee met het scherm.
     Logo te groot of te klein naar jouw smaak? Draai aan deze twee regels. */
  --hero-logo-mobile:   clamp(124px, 38vw, 184px);       /* 360px scherm -> ~137px */
  --hero-payoff-mobile: clamp(1.35rem, 5.2vw, 1.85rem);  /* 360px scherm -> ~22px */

  /* Wit logo linksboven op mobiel. Eigen formaat is 127x40; het kleurlogo is
     172x50, dus het witte staat iets lager. Hier bij te stellen. */
  --brand-logo-mobile-h: 40px;

  /* Opsommingen in Expertises, corps op desktop (>=992px).
     Ze erfden body-tekst: --fs-body is daar afgetopt op 1.125rem = 18px. */
  --fs-content-p:       1.6rem;    /* platte tekst in .about-content-blokken */
  --fs-bullets-mobile:  1.25rem;   /* ~20px, was 16px (body) */
  --fs-bullets-desktop: 1.35rem;   /* ~22px, was 18px (body) */

  /* Hoogte van de losse parallax-beeldstroken (.parallax-band) */
  --parallax-band-h:        420px;
  --parallax-band-h-mobile: 240px;
}

/* =========================================================================
   Basis-typografie
   ========================================================================= */

/* Voorkom horizontale overflow / "uitzoomen" op mobiel */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Anchor-sprongen niet achter de vaste navigatiebalk laten landen.
   Geldt voor native sprongen: directe #hash-URL's én cross-page links
   (bv. vanaf de productpagina's naar ../index.html#sectie).
   De smooth-scroll van vitality.js rekent zelf met de echte balkhoogte. */
html {
  scroll-padding-top: 95px;   /* desktop: balk ~80px + lucht */
  /* GEEN scroll-behavior: smooth — dat botst met de jQuery-.animate() van
     vitality.js (beide willen 'smooth' scrollen → grillig/willekeurig springen).
     scroll-padding-top werkt onafhankelijk en zorgt voor de juiste offset. */
}
@media (max-width: 767px) {
  html { scroll-padding-top: 70px; }
}

/* Animatie-content altijd zichtbaar: voorkomt dat secties 'verdwijnen' (en dus
   ook hun vertaling) wanneer WOW.js ze niet/traag onthult bij het scrollen. */
.wow { visibility: visible !important; }

body {
  font-family: var(--font-base);
  font-weight: var(--w-body);
  font-size: var(--fs-body);
  line-height: var(--line-body);
  color: var(--c-ink);
}

p, li, label, .form-control, .media-body, .about-content p, blockquote {
  font-family: var(--font-base);
  font-weight: var(--w-body);
}

/* Koppen — Google Sans Flex, gewicht 779 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-base) !important;
  font-weight: var(--w-heading) !important;
  letter-spacing: var(--tracking-head);
}

h1 { font-size: var(--fs-h1); color: var(--c-green); }
h2 { font-size: var(--fs-h2); color: var(--c-green-light); }
h3 { font-size: var(--fs-h3); color: var(--c-green-light); letter-spacing: 1px; }
h4, h5, h6 { color: var(--c-green); }

/* Bijschriften (fijne letter). Verhoog/verlaag --w-caption naar smaak (1..1000). */
small, .small, figcaption, .caption-text,
.project-description, .copyright, .copyright .small, .help-block {
  font-family: var(--font-base) !important;
  font-weight: var(--w-caption) !important;
  font-size: var(--fs-caption);
  color: var(--c-muted);
}

/* Fijne letter wit op donkere achtergronden (footer, CTA-blok, portfolio, hero) */
footer .small,
footer .copyright,
footer .copyright .small,
aside.cta-quote .small,
header .small,
.project-details .project-description {
  color: #ffffff !important;
}

/* Volledige footertekst wit (donkere footer-achtergrond) */
footer,
footer p,
footer a,
footer h4, footer h5, footer h6,
footer .contact-details p,
footer .contact-details a {
  color: #ffffff !important;
}
footer a:hover,
footer a:focus { color: var(--c-green-light) !important; }

/* Contactgegevens in de footer op hetzelfde halftransparante vlak als de
   herotekst (.dark-bg, zie verderop). Alleen achter de tekst, niet over de
   volle breedte. */
footer.footer .contact-details .dark-bg { padding: 10px 22px 12px; }
footer.footer .contact-details .dark-bg h4 { margin-top: 6px; }
footer.footer .contact-details .dark-bg p { margin-bottom: 4px; }
footer.footer .contact-details .dark-bg p:empty { display: none; }

/* =========================================================================
   Groene accenten (overschrijven het rode template-accent #ef4035)
   ========================================================================= */

a { color: var(--c-green-dark); }
a:hover, a:focus { color: var(--c-green); }

hr.colored { border-color: var(--c-green) !important; }

.text-primary { color: var(--c-green) !important; }
.text-green   { color: var(--c-green) !important; }

/* Knoppen */
.btn-primary {
  background-color: var(--c-green) !important;
  border-color: var(--c-green) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--c-green-dark) !important;
  border-color: var(--c-green-dark) !important;
}
.btn-outline-light:hover, .btn-outline-light:focus {
  color: var(--c-green) !important;
  border-color: var(--c-bg) !important;
}
.btn-outline-dark:hover, .btn-outline-dark:focus {
  background: var(--c-green) !important;
  border-color: var(--c-green) !important;
  color: var(--c-bg) !important;
}
.btn-full-width { background-color: var(--c-green) !important; }
/* Hover: feller groen i.p.v. donkerder (wit op #1e9e85 = 3,3:1, gelijk aan de rustkleur) */
.btn-full-width:hover,
.btn-full-width:focus-visible { background-color: var(--c-green-bright) !important; }

/* Formulier-focus + zwevende labels */
input.form-control:focus,
textarea.form-control:focus { border-color: var(--c-green) !important; }
.floating-label-form-group-with-value label,
.floating-label-form-group-with-focus label { color: var(--c-green) !important; }

/* Portfolio / navbar accenten */
.portfolio-filter #filters li .filter.active {
  background-color: var(--c-green) !important;
  border-color: var(--c-green) !important;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: var(--c-green-light) !important;
  background-color: transparent !important;   /* geen wit vlakje bij actief/selectie */
}

/* =========================================================================
   Behouden functionele overrides
   ========================================================================= */

/* SERVICE: ruimte + grotere tekst onder de koppen */
#service .content-row { margin-top: 0 !important; padding-top: 0 !important; }
#service .col-md-3, #service .col-sm-6 { padding-left: 5px !important; padding-right: 5px !important; }
#service .about-content p {
  font-size: var(--fs-content-p) !important;   /* zie --fs-content-p bovenin */
  line-height: var(--line-body);
  max-width: 85%;
  margin: 0 auto;
}
/* Service-kopjes in dezelfde stijl als de Consommables-titel (h2) */
#service .about-content h3 {
  font-size: var(--fs-h2) !important;
  letter-spacing: var(--tracking-head);
}
/* Onder 992px (telefoon + tablet): Service als 1 volledige kolom, net als Consommables */
@media (max-width: 991px) {
  #service .content-row > [class*="col-"] {
    width: 100%;
    float: none;
  }
}

/* SOLUTIONS: groene links */
#solutions a.text-green { color: var(--c-green) !important; text-decoration: none; }
#solutions a.text-green:hover,
#solutions a.text-green:focus { color: var(--c-green-dark) !important; text-decoration: underline; }

/* Kleine vertical spacer */
.br-small { display: block; height: .4rem; width: 100%; }

/* Hero-video op mobiel: vult de header, onder de overlay/content */
header.video .hero-video-mobile {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;            /* boven Formstone-poster (0), onder overlay (998) */
  pointer-events: none;
}

/* Hero payoff: wit en wat vetter; kernwoorden in groen */
header .brand-name-subtext {
  font-family: var(--font-base);
  font-weight: 500;
  color: #ffffff;
}
/* Subpagina's markeren hun kernwoorden met <medium2>: zelfde groen */
header .brand-name-subtext .hl,
header .brand-name-subtext medium2 {
  color: var(--c-green-light);
  font-weight: 700;
}

/* Hero op mobiel: fullscreen + verticaal gecentreerd, leesbare overlay */
@media (max-width: 767px) {
  header.video {
    min-height: 100vh;
    min-height: 100svh;   /* corrigeert voor de mobiele adresbalk */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
  }
  header.video .intro-content { width: 90%; }
  header.video .overlay { opacity: 0.3; }   /* witte tekst leesbaar over de video */

  /* Appel-logo en payoff in verhouding brengen.

     Let op de selector: `header img` (0-0-2) is NIET genoeg, want Bootstraps
     `.img-responsive { max-width: 100% }` (0-1-0) wint daarvan op
     specificiteit. Daardoor deed de 150px van vitality-red.css niets via
     max-width — alleen via max-height hield hij het beeld klein. Vandaar
     `header .intro-content img` (0-1-2): die wint van .img-responsive, zodat
     max-width hier wel degelijk stuurt. */
  header .intro-content img {
    max-width: var(--hero-logo-mobile);
    max-height: none;      /* hoogte volgt de breedte, blijft vierkant */
    height: auto;
  }
  header .brand-name-subtext {
    font-size: var(--hero-payoff-mobile);
    line-height: 1.28;
    margin-top: 0.25em;
  }

  /* Hoogte van het witte logo in de balk. Standaard zijn eigen 40px, dus
     haarscherp; zet je hem hoger dan wordt de PNG opgeschaald. */
  .navbar-brand > img.visible-xs-block {
    height: var(--brand-logo-mobile-h);
    width: auto;
  }
}

/* CTA-knop: tekst mag afbreken binnen het kader (valt niet meer van de pagina op mobiel) */
.btn-full-width {
  white-space: normal !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
@media (max-width: 767px) {
  .btn-full-width {
    font-size: 1.3rem;
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

/* Partners-strip volledig wit */
.partners-clean { background: var(--c-bg) !important; }

/* Geen verticale sprong bij laden: begin-padding gelijk aan de gescrolde stand */
@media (min-width: 768px) {
  .navbar-fixed-top.navbar-expanded { padding: 15px 0; }
}

/* Navigatiebalk ALTIJD zichtbaar — ook bovenaan over de hero.
   Het vitality-template maakt de balk op desktop transparant zolang je niet
   gescrold hebt (.navbar-expanded). Dat overschrijven we hier: de donkere balk
   blijft staan zodat de witte menu-links altijd leesbaar zijn. */
.navbar-inverse,
.navbar-inverse.navbar-expanded {
  background-color: var(--c-ink) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Navigatie-lettergrootte: mobiel (uitklapmenu) groot, desktop groter dan het
   template. Op desktop knijpen we de horizontale padding in om dat corps te
   kunnen betalen; nowrap houdt losse items op een regel. */
.navbar-inverse .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a {
  font-size: var(--nav-fs-mobile);
}
@media (min-width: 768px) {
  .navbar-inverse .navbar-nav > li > a,
  .navbar-default .navbar-nav > li > a {
    font-size: var(--nav-fs-md);
    padding-left: 8px;
    padding-right: 8px;
    white-space: nowrap;
  }
}
@media (min-width: 1200px) {
  .navbar-inverse .navbar-nav > li > a,
  .navbar-default .navbar-nav > li > a {
    font-size: var(--nav-fs-desktop);
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Mobiele taalkeuze: vlag naast de hamburger */
.lang-switch-mobile {
  float: right;
  margin: 14px 8px 0 0;
}
.lang-switch-mobile > .dropdown-toggle {
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  text-decoration: none;
  padding: 4px 6px;
  display: inline-block;
}
.lang-switch-mobile .fi { vertical-align: middle; }
.lang-switch-mobile .caret { color: #fff; }
.lang-switch-mobile .dropdown-menu { font-size: calc(var(--nav-fs-mobile) * var(--nav-sub-scale)); }
@media (min-width: 768px) {
  .lang-switch-mobile { display: none !important; }
}

/* =========================================================================
   Talenmenu (desktop en mobiel)

   Zonder deze regels is het menu ONLEESBAAR: vitality-red.css zet
   `.navbar-inverse .navbar-nav li a { color: white }` — een afstammeling-
   selector, dus die raakt ook de links IN de dropdown — terwijl Bootstrap het
   paneel `background-color:#fff` geeft. Wit op wit dus. De selector hieronder
   is expres even specifiek + nesting, zodat hij wint zonder !important.
   ========================================================================= */
.lang-menu {
  min-width: 200px;
  padding: 6px;
  background-color: var(--c-ink);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.38);
}
.lang-menu > li > a,
.navbar-inverse .navbar-nav .lang-menu > li > a,
.navbar-default .navbar-nav .lang-menu > li > a {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.55em 0.7em;
  border-radius: 4px;
  font-size: calc(var(--nav-fs-md) * var(--nav-sub-scale));
  line-height: 1.3;
  white-space: nowrap;
  color: #e8efec;
}
.lang-menu > li > a:hover,
.lang-menu > li > a:focus,
.navbar-inverse .navbar-nav .lang-menu > li > a:hover,
.navbar-inverse .navbar-nav .lang-menu > li > a:focus,
.navbar-default .navbar-nav .lang-menu > li > a:hover,
.navbar-default .navbar-nav .lang-menu > li > a:focus {
  background-color: rgba(135, 190, 175, 0.18);
  color: #ffffff;
}
/* Huidige taal: groen + vinkje, zodat je ziet waar je staat */
.lang-menu > li.is-current > a,
.navbar-inverse .navbar-nav .lang-menu > li.is-current > a,
.navbar-default .navbar-nav .lang-menu > li.is-current > a {
  color: var(--c-green-light);
  font-weight: var(--w-heading);
}
.lang-menu > li.is-current > a::after {
  content: "\2713";
  margin-left: auto;
  padding-left: 0.6em;
}
.lang-menu .fi {
  flex: none;
  width: 1.35em;
  height: 1em;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
/* De knop zelf: vlag + FR + pijltje, met wat lucht eromheen */
.lang-switch > .dropdown-toggle .fi {
  width: 1.35em;
  height: 1em;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  vertical-align: -0.08em;
}

/* Laatste nav-item (de taalkiezer) groen + vet */
.navbar-inverse .navbar-nav.navbar-right > li:last-child > a {
  color: var(--c-green-light) !important;
  font-weight: var(--w-heading);
}
.navbar-inverse .navbar-nav.navbar-right > li:last-child > a:hover,
.navbar-inverse .navbar-nav.navbar-right > li:last-child > a:focus,
.navbar-inverse .navbar-nav.navbar-right > .active:last-child > a {
  color: var(--c-green) !important;
  background: transparent;
}

/* =========================================================================
   Parallax

   vitality-red.css zet vanaf 1025px `background-attachment: fixed` met
   `background-size: cover`, maar zet NERGENS een background-position. Die
   valt dus terug op de standaard `0% 0%`. Bij een vaste achtergrond is het
   positioneringsvlak het VIEWPORT, niet het element: de foto wordt linksboven
   tegen het scherm geplakt en alles rechts/onder valt weg. Daardoor zie je de
   hoek van het beeld in plaats van het onderwerp. Centreren lost dat op.
   ========================================================================= */
aside.cta-quote,
footer.footer,
.parallax-band {
  background-position: center center;
  background-repeat: no-repeat;
}

/* Losse beeldstrook tussen twee secties. Full-bleed, geen tekst.
   Op mobiel bewust `scroll` in plaats van `fixed`: vaste achtergronden zijn
   daar traag en worden door iOS Safari genegeerd (het beeld wordt dan
   uitgerekt). Hoogtes staan als token bovenin. */
.parallax-band {
  background-size: cover;
  background-attachment: scroll;
  height: var(--parallax-band-h-mobile);
}
@media (min-width: 1025px) {
  .parallax-band {
    background-attachment: fixed;
    height: var(--parallax-band-h);
  }
}

/* EXPERTISES: grotere opsommingen. Op de bullets stond nergens een eigen
   font-size, dus ze volgden gewoon de body: 16px op mobiel, 18px op desktop.
   Nu een eigen maat voor beide, want onder 992px stapelen de drie kolommen
   tot volle breedte en is er ruimte zat. */
#process .media-body ul,
#process .media-body li {
  font-size: var(--fs-bullets-mobile);
  line-height: 1.5;
}
#process .media-body li { margin-bottom: 0.35em; }
@media (min-width: 992px) {
  #process .media-body ul,
  #process .media-body li {
    font-size: var(--fs-bullets-desktop);
  }
}

/* Sectie-ondertitels (MACHINES DE CONDITIONNEMENT, DES LIGNES COMPLÈTES CLÉ EN
   MAIN, CONSOMMABLES PERSONNALISÉS) op hetzelfde formaat als de h2 erboven,
   maar met een lichter gewicht — anders wegen twee koppen even zwaar.
   Zelfde aanpak als #service .about-content h3, die al op h2-formaat staat.
   font-weight moet !important: de basisregel voor h1..h6 gebruikt dat ook. */
#solutions h3,
#machines h3,
#consommables h3 {
  font-size: var(--fs-h2) !important;
  font-weight: var(--w-subhead) !important;
  letter-spacing: var(--tracking-head);
}

/* =========================================================================
   Productlinks (MACHINES À FILETS, ENSACHEUSES, FILETS, ...)

   Stonden er nauwelijks uit: .strong1 was nergens gedefinieerd, dus het waren
   gewone links in het gedempte --c-green-dark. Nu feller groen, steviger
   gewicht, en een onderlijning die bij hover van links naar rechts uitrolt.

   De lijn is een background-image in plaats van een ::after-element: zo werkt
   hij ook als een link over twee regels afbreekt, wat bij een absoluut
   gepositioneerde pseudo-element misgaat.
   ========================================================================= */
#solutions p a,
#machines p a,
#consommables p a {
  color: var(--c-green-link);
  font-weight: var(--w-link);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  padding-bottom: 2px;
  transition: background-size 0.32s ease, color 0.2s ease;
}
#solutions p a:hover, #solutions p a:focus-visible,
#machines p a:hover, #machines p a:focus-visible,
#consommables p a:hover, #consommables p a:focus-visible {
  color: var(--c-green-link-hover);
  text-decoration: none;      /* Bootstrap zet hier standaard underline aan */
  background-size: 100% 2px;  /* de lijn rolt uit */
}
/* Wie 'beperk beweging' aan heeft, krijgt de lijn zonder animatie */
@media (prefers-reduced-motion: reduce) {
  #solutions p a, #machines p a, #consommables p a { transition: none; }
}

/* Regel onder de SPECTRAS-link. Geen eigen font-size: zo erft hij de 1,6rem
   van #service .about-content p en staat hij even groot als de alinea erboven.
   Alleen de kleur wordt gezet: het tekstzwart van de platte tekst. */
#service .about-content p.spectras-tagline {
  color: var(--c-ink);
  margin-top: 0.4em;
}

/* =========================================================================
   Halftransparant vlak achter de herotekst

   Stond alleen in assets/css/plugins/background.css, en van die map heeft elke
   submap een eigen kopie — vijf daarvan misten de regel. Hier staat hij één
   keer, in het bestand dat alle pagina's inmiddels delen. Dezelfde waarden als
   het origineel, zodat de homepage en serfruit er niet anders uit gaan zien.
   ========================================================================= */
.dark-bg {
  display: inline-block;
  background: var(--c-veil);
  color: #fff;
  padding: 8px 15px;
  border-radius: 6px;
  line-height: 1.5;
}

/* =========================================================================
   Gedeelde inhoudsstijl — geldt nu OOK op de subpagina's

   De vormgeving van de homepage hing aan sectie-ID's (#service, #process,
   #solutions, #machines, #consommables). Die bestaan op de subpagina's niet,
   dus daar kwam er niets van terecht ook al laadden ze dit bestand al.
   Hieronder dezelfde regels op .about-content: dat blok staat op alle acht
   subpagina's (vier per pagina) en op de homepage in #service. De ID-regels
   hierboven blijven staan en zetten dezelfde waarden, dus de homepage
   verandert niet.
   ========================================================================= */

.about-content p {
  font-size: var(--fs-content-p);
  line-height: var(--line-body);
}

/* Kopjes: op h2-formaat maar lichter, net als de sectie-ondertitels */
.about-content h3 {
  font-size: var(--fs-h2) !important;
  font-weight: var(--w-subhead) !important;
  letter-spacing: var(--tracking-head);
}

/* Opsommingen */
.about-content ul { padding-left: 1.2em; }
.about-content li {
  font-size: var(--fs-bullets-mobile);
  line-height: 1.5;
  margin-bottom: 0.35em;
}
@media (min-width: 992px) {
  .about-content li { font-size: var(--fs-bullets-desktop); }
}

/* Links in de inhoud krijgen hetzelfde effect als de productlinks op de
   homepage: feller groen, steviger, en een onderlijning die bij hover van
   links naar rechts uitrolt. .btn uitgesloten, dat zijn knoppen. */
.about-content a:not(.btn),
.link-anim {
  color: var(--c-green-link);
  font-weight: var(--w-link);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  padding-bottom: 2px;
  transition: background-size 0.32s ease, color 0.2s ease;
}
.about-content a:not(.btn):hover,
.about-content a:not(.btn):focus-visible,
.link-anim:hover,
.link-anim:focus-visible {
  color: var(--c-green-link-hover);
  text-decoration: none;
  background-size: 100% 2px;
}
@media (prefers-reduced-motion: reduce) {
  .about-content a:not(.btn), .link-anim { transition: none; }
}

/* Header boven het beeld: op de subpagina's dezelfde maatvoering als de
   homepage. Deze selectors hangen niet aan een ID, dus ze golden daar al —
   op één na: de payoff had op desktop geen eigen regel. */
@media (min-width: 768px) {
  header .brand-name-subtext { line-height: 1.35; }
}

/* =========================================================================
   Navigatie-dropdowns (Solutions / Machines / Consommables)

   Bewust zonder Bootstraps data-toggle="dropdown": dat kaapt de klik op het
   hoofditem, waardoor je niet meer naar de sectie zelf kunt. Nu opent het
   submenu op hover en op focus-within (toetsenbord), en blijft het hoofditem
   een gewone link. Op mobiel klapt de balk toch al uit, dus daar staat het
   submenu permanent ingesprongen met een groene streep ervoor.
   ========================================================================= */
.nav-sub { list-style: none; }

@media (min-width: 768px) {
  .navbar-nav > li.nav-drop { position: relative; }
  .nav-drop > .nav-sub {
    display: none;
    /* iets hoger: sluit strakker aan op de balk */
    position: absolute; left: 0; top: calc(100% - 10px); z-index: 80;
    min-width: 285px; margin: 0; padding: 6px;
    background-color: var(--c-ink);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.38);
  }
  .nav-drop:hover > .nav-sub,
  .nav-drop:focus-within > .nav-sub { display: block; }
  /* Zelfde letter en corps als de hoofdnavigatie: alleen het gewicht van de
     platte tekst, geen eigen maat. De labels staan in onderkast in de HTML. */
  .navbar-inverse .navbar-nav .nav-sub > li > a {
    display: block;
    padding: 0.4em 0.7em;
    border-radius: 4px;
    font-size: calc(var(--nav-fs-md) * var(--nav-sub-scale));
    font-weight: var(--w-body);
    line-height: 1.3;
    white-space: nowrap;
    color: #e8efec;
    transition: color 0.18s ease, background-color 0.18s ease;
  }
  .navbar-inverse .navbar-nav .nav-sub > li > a:hover,
  .navbar-inverse .navbar-nav .nav-sub > li > a:focus,
  .navbar-inverse .navbar-nav .nav-sub > li > a:active {
    background-color: rgba(135, 190, 175, 0.14);
    color: var(--c-green-light);
  }
}
@media (min-width: 1200px) {
  .navbar-inverse .navbar-nav .nav-sub > li > a { font-size: calc(var(--nav-fs-desktop) * var(--nav-sub-scale)); }
}

/* Pijlknop om het submenu op mobiel open te klappen (aangemaakt door
   fp-site.js, blok 4). Op desktop niet nodig: daar opent hover/focus. */
.nav-sub-toggle { display: none; }

@media (max-width: 767px) {
  /* Het uitklapmenu mag de hele schermhoogte onder de balk gebruiken
     (Bootstrap: 340px, liggend 200px) en scrolt daarbinnen als het moet. */
  .navbar-fixed-top .navbar-collapse {
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .navbar-nav > li.nav-drop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .navbar-nav > li.nav-drop > a { flex: 1 1 auto; }
  .nav-sub-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    margin: 0 4px 0 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease, transform 0.2s ease;
  }
  .nav-sub-toggle:hover,
  .nav-sub-toggle:focus-visible { color: var(--c-green-light); border-color: var(--c-green-light); outline: none; }
  .nav-drop.sub-open > .nav-sub-toggle { transform: rotate(180deg); color: var(--c-green-light); border-color: var(--c-green-light); }
  .nav-drop > .nav-sub { display: none; flex: 1 0 100%; }
  .nav-drop.sub-open > .nav-sub { display: block; }

  .nav-sub {
    margin: 0.1em 0 0.6em 1.5em;
    padding-left: 0.9em;
    border-left: 2px solid var(--c-green-light);
  }
  .navbar-inverse .navbar-nav .nav-sub > li > a {
    display: block;
    padding: 0.3em 0;
    font-size: calc(var(--nav-fs-mobile) * var(--nav-sub-scale));
    font-weight: var(--w-body);
    color: #dce8e2;
    transition: color 0.18s ease;
  }
  .navbar-inverse .navbar-nav .nav-sub > li > a:hover,
  .navbar-inverse .navbar-nav .nav-sub > li > a:focus,
  .navbar-inverse .navbar-nav .nav-sub > li > a:active { color: var(--c-green-light); }
}

/* Talenmenu op breed scherm even groot als het navigatie-submenu. Beide hangen
   aan dezelfde tokens, dus ze blijven samen lopen als je de navigatie bijstelt. */
@media (min-width: 1200px) {
  .lang-menu > li > a,
  .navbar-inverse .navbar-nav .lang-menu > li > a {
    font-size: calc(var(--nav-fs-desktop) * var(--nav-sub-scale));
  }
}

/* =========================================================================
   Nadrukmarkeringen uit de oude teksten

   De redactie gebruikt door de hele site <medium2>, <medium1> en
   class="medium" / "medium1" om een woord te laten opvallen. Geen van die
   drie had ergens een stijl: het bleef dus gewone tekst, ook op de homepage
   (Service-blokken) en in alle 51 gevallen op de productpagina's. Ze krijgen
   nu het bestaande subkop-gewicht, zodat de nadruk zichtbaar wordt zonder
   dat de teksten aangepast hoeven te worden.
   ========================================================================= */
medium2, medium1,
.medium, .medium1 {
  font-weight: var(--w-subhead);
}

/* =========================================================================
   EASTER EGG — sushi-sticker bij "5u5hi" in de footer (fp-site.js blok 5).
   Letters golven, een penstreek tekent zich eronder en er wordt een
   nigiri-stickertje achter geplakt. Streep in --c-green-light: goed
   leesbaar op de donkere footer en gelijk aan de hover-kleur van footerlinks.
   ========================================================================= */
footer .copyright a.egg {
  position: relative;
  display: inline-block;
  text-decoration: none !important;
  white-space: nowrap;
}
.egg-word { position: relative; display: inline-block; }
.egg-ch   { display: inline-block; }
a.egg.egg-on .egg-ch { animation: egg-wave 420ms cubic-bezier(.3, .7, .4, 1) both; }
@keyframes egg-wave {
  0%, 100% { transform: none; }
  40%      { transform: translateY(-0.35em); }
  70%      { transform: translateY(0.05em); }
}

.egg-line {
  position: absolute;
  left: -6%;
  bottom: -0.55em;
  width: 112%;
  height: 0.7em;
  overflow: visible;
  pointer-events: none;
}
.egg-line path {
  fill: none;
  stroke: var(--c-green-light);
  stroke-width: 1.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 280ms ease-in;
}
a.egg.egg-stuck .egg-line path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 650ms cubic-bezier(.6, .05, .3, 1);
}

/* De sticker: valt licht gedraaid van boven, plakt met een tik vast
   (kleine overshoot) en blijft scheef zitten. Loslaten = eraf pellen. */
.egg-sticker {
  position: absolute;
  left: 100%;
  top: 50%;
  width: 2.4em;
  height: 1.76em;              /* 120:88 */
  margin-left: 0.4em;
  line-height: 0;
  opacity: 0;
  transform: translate(0.4em, -120%) rotate(18deg) scale(1.5);
  transform-origin: 30% 80%;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .45));
  transition: opacity 200ms ease, transform 260ms ease-in;
  pointer-events: none;
}
a.egg.egg-stuck .egg-sticker {
  opacity: 1;
  transform: translate(0, -50%) rotate(-8deg) scale(1);
  transition: opacity 120ms ease, transform 380ms cubic-bezier(.25, 1.7, .5, 1);
  animation: egg-hop 700ms 900ms ease-in-out 2;
}
@keyframes egg-hop {
  0%, 100% { transform: translate(0, -50%) rotate(-8deg); }
  35%      { transform: translate(0, -80%) rotate(-14deg); }
  60%      { transform: translate(0, -50%) rotate(-4deg) scaleY(.92); }
  80%      { transform: translate(0, -56%) rotate(-8deg); }
}

@media (prefers-reduced-motion: reduce) {
  a.egg.egg-on .egg-ch, a.egg.egg-stuck .egg-sticker { animation: none; }
  .egg-line path, a.egg.egg-stuck .egg-line path,
  .egg-sticker, a.egg.egg-stuck .egg-sticker { transition: opacity 200ms ease; }
  .egg-sticker { transform: translate(0, -50%) rotate(-8deg); }
}

/* =========================================================================
   QUOTE-BAND (homepage): zelfde halftransparante vlak als .dark-bg achter
   de quote, en de knop "Trouvons-les" gevuld met dezelfde tint. Hover van
   de knop blijft zoals hij was: wit vlak, groene tekst.
   ========================================================================= */
aside.cta-quote span.quote {
  display: inline-block;
  background: var(--c-veil);
  padding: 14px 24px;
  border-radius: 6px;
}
aside.cta-quote .btn-outline-light { background: var(--c-veil); }
aside.cta-quote .btn-outline-light:hover,
aside.cta-quote .btn-outline-light:focus { background: var(--c-bg); }

/* Tekstselectie in het merkgroen, met zwarte letters: 6,1:1 contrast
   (wit haalde maar 3,4:1). 99% dekking: Safari/Chrome lichten een volledig
   dekkende selectiekleur anders op, dan wordt het flets. */
::selection {
  background: var(--c-green);
  background: color-mix(in srgb, var(--c-green) 99%, transparent);
  color: #000000;
}

/* =========================================================================
   SLOTZIN "Merci pour votre confiance." (consommables-pagina's, FR/EN/ES):
   handschrift-letter in antraciet (RAL 7016). Parisienne komt mee in de
   Google Fonts-link van elke pagina; de woff2 laadt alleen waar hij gebruikt
   wordt. Ander script-font? Alleen --font-script en die link aanpassen.
   ========================================================================= */
:root {
  --c-anthracite: #383e42;
  --font-script:  "Parisienne", "Brush Script MT", cursive;
}
span.fp-merci {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--font-script) !important;
  font-weight: 400 !important;
  font-size: 1.6em;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--c-anthracite);
}

/* Cloudflare Turnstile-vakje in het contactformulier (contact_me.js). */
.fp-turnstile { margin: 6px 0 14px; min-height: 65px; }

/* =========================================================================
   PARTNERBALK (homepage, onder Service): acht even grote tegels. Elke tegel
   heeft de achtergrondkleur van zijn eigen logo, dus witte en gekleurde logo's
   staan rustig naast elkaar. Witte tegels krijgen een haarlijn tegen de
   witte sectie. Vanaf 1200px één balk van 8 die meeschaalt, tablet 4,
   kleine tablet 2, telefoon 1 (onder elkaar).
   ========================================================================= */
.partner-balk {
  list-style: none;
  margin: 0 auto;
  padding: 40px 0;
  display: grid;
  grid-template-columns: 1fr;          /* telefoon: onder elkaar */
  max-width: 420px;
  gap: 14px;
}
@media (min-width: 600px) { .partner-balk { grid-template-columns: repeat(2, 1fr); max-width: none; } }
@media (min-width: 900px) { .partner-balk { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
/* Vanaf laptopbreedte één balk van acht die meegroeit met het scherm. */
@media (min-width: 1200px) { .partner-balk { grid-template-columns: repeat(8, 1fr); gap: 1.1vw; padding: 48px 1vw; } }
.partner-balk li { margin: 0; }
.partner-balk img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .07);
  transition: transform .25s ease, box-shadow .25s ease;
}
.partner-balk li:hover img {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .07), 0 10px 22px -12px rgba(0, 0, 0, .35);
}
@media (prefers-reduced-motion: reduce) {
  .partner-balk img, .partner-balk li:hover img { transition: none; transform: none; }
}