/* ============================================================================
   MYCUSTOM.CSS — lechlerscrubber.com
   ----------------------------------------------------------------------------
   STRUCTUUR
   1) :root design-tokens (Lechler CD)        <- pas kleuren HIER centraal aan
   2) Oude pagina-blokken (getokeniseerd)
   3) Lechler-universele laag (nav/header/dropdown/footer/buttons/logo/mobile)
   Semantische kleuren (hazard-badges, severity, risk-banners) zijn bewust
   NIET vermerkt en blijven rood/amber/groen.
   ============================================================================ */
@font-face { font-family: "Roboto"; src: url("/fonts/Roboto-Thin.woff2") format("woff2"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/fonts/Roboto-ThinItalic.woff2") format("woff2"); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/fonts/Roboto-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/fonts/Roboto-LightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/fonts/Roboto-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/fonts/Roboto-RegularItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/fonts/Roboto-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/fonts/Roboto-MediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/fonts/Roboto-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/fonts/Roboto-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/fonts/Roboto-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/fonts/Roboto-BlackItalic.woff2") format("woff2"); font-weight: 900; font-style: italic; font-display: swap; }
/* =====================================================================
   EEN tokenblok voor de hele site. Op 2026-08-26 samengevoegd uit twee
   losse :root-blokken die elkaar deels overschreven; de waarden hier zijn
   de waarden die daarvoor ook al golden. Pas kleuren HIER aan.
   ===================================================================== */
:root {
  /* merk */
  --lx-blue: #1D459F;
  --lx-blue-700: #16367d;
  --lx-blue-50: #eef2fa;
  --lx-blue-dk: #0F2350;
  --lx-accent: #45B3DC;
  --lx-accent-50: #eaf6fb;
  /* tekst en donkere vlakken */
  --lx-ink: #333333;
  --lx-ink-900: #0F172A;
  --lx-ink-2: #596678;
  --lx-ink-dark: #18222F;
  --lx-muted: #6b7280;
  --lx-white: #ffffff;
  /* lijnen en lichte vlakken */
  --lx-line: #e3e3e3;
  --lx-line-soft: #E3E8F2;
  --lx-line-2: #CFD9E3;
  --lx-grey: #f2f2f2;
  --lx-surface: #F7F9FC;
  --lx-surface-2: #EFF3F8;
  /* gevarenniveaus (Safety Data Sheets) - betekeniskleuren, geen merkkleuren */
  --lx-sev-1: #22c55e;
  --lx-sev-2: #84cc16;
  --lx-sev-3: #f59e0b;
  --lx-sev-4: #f97316;
  --lx-sev-5: #ef4444;
  /* typografie en maatvoering */
  --lx-font: "Roboto", Arial, Helvetica, sans-serif;
  --lx-maxw: 820px;
  --lx-radius: 4px;
  /* rb- (Industries): verwijzen naar de tokens hierboven */
  --rb-deep: var(--lx-blue);
  --rb-accent: var(--lx-accent);
  --rb-ink: var(--lx-ink);
  --rb-muted: #667085;
  --rb-line: #e6e9ef;
  --rb-bg: #ffffff;
  --rb-chip: #f6f8fc;
  --rb-good: #0f9d58;
  --rb-warn: #eab308;
  --rb-bad: #dc2626;
}
h1 { font-size: 3rem; line-height: 1.1; font-weight: 700; color: var(--lx-blue); }
h2 { font-size: 2.25rem; line-height: 1.1; color: var(--lx-blue) !important; }
h3 { font-size: 1.5rem; line-height: 1.2; margin-top: 20px; margin-bottom: 20px; font-weight: 500; color: var(--lx-blue) !important; }
.g-main-nav .g-toplevel > li > .g-menu-item-container, .g-main-nav .g-sublevel > li > .g-menu-item-container { font-size: 1rem; font-weight: 100; padding: 0.469rem 0; white-space: normal; overflow-wrap: break-word; word-wrap: break-word; word-break: break-all; transition: 0.35s ease; }
.button { display: inline-block; font-family: "Roboto", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight: 600; font-size: 0.8rem; line-height: 1.15; letter-spacing: 0.1rem; text-transform: uppercase; background: var(--lx-blue); color: #ffffff; border: 1px solid transparent; border-radius: 2.5rem; margin: 0 0 0.5rem 0; padding: 1.5rem 3.125rem; vertical-align: middle; text-shadow: none; transition: all 0.2s; }
.button:hover { background-color: var(--lx-blue-700); color: #fefefe; }
#g-expanded { padding: 3rem 0; }
#g-testimonials a { color: #eceeef; text-decoration: underline; }
#g-expanded a { color: #424753; text-decoration: underline; }
#g-intro a { color: #424753; text-decoration: underline; }
.jl-overlay-primary { background: rgba(29,69,159, 0.55); }
.g-onepage-nav.style2 .g-onepage-nav-item a:hover { color: var(--lx-blue); }
.g-onepage-nav.style2 .g-onepage-nav-item a:active { color: #ffffff; }
*, *::before, *::after { box-sizing: inherit; -webkit-box-sizing: inherit; }
.g-main-nav .g-sublevel > li > .g-menu-item-container > .g-menu-item-content { word-break: normal; vertical-align: top; }
.g-main-nav .g-sublevel > li .g-menu-item-content { display: inline-block; vertical-align: middle; word-break: break-word; }
.g-main-nav .g-toplevel > li .g-menu-item-content { display: inline-block; vertical-align: middle; cursor: pointer; }
#g-navigation .g-main-nav .g-sublevel > li:hover > .g-menu-item-container, #g-navigation .g-main-nav .g-sublevel > li.active > .g-menu-item-container { color: #999999; }
.ra-bullet-list-1 { list-style-type: none !important; }
.ra-bullet-list-1 li:before { content: '\2713' !important; color: var(--lx-blue); margin-right: 10px; margin-left: -14px; font-size: 1.2em !important; }
#g-header a { color: #eceeef; text-decoration: none; }
.ol-num-list-1 li { color: var(--lx-blue); margin-right: 10px; margin-left: -14px; }
#g-header h2 { line-height: 2; }
#solutions h1 { color: var(--lx-blue) !important; font-weight: 800; font-size: 1.375rem; max-width: 40%; }
#solutions h2 { font-weight: 900; font-size: 2rem; line-height: 1.1; color: var(--lx-blue) !important; max-width: 40%; }
/*#solutions h3 { color: var(--lx-blue) !important; font-weight: 900; font-size: 1.5rem; line-height: 1.1; max-width: 40%; }*/
#solutions h3 { color: var(--lx-blue) !important; font-weight: 900; font-size: 1.5rem; line-height: 1.1; max-width: 40%; }
#solutions p { margin-left: 50px; color: var(--lx-blue); font-weight: 500; font-size: 1rem; }
#solutions ol { margin-left: 50px; }
#solutions ol li::marker { color: var(--lx-blue); font-weight: 500; }
#solutions ol li { color: var(--lx-blue); font-weight: 500; }
#solutions ul { margin-left: 80px; list-style-type: none !important; }
#solutions ul li:before { content: '\2713' !important; color: var(--lx-blue); font-weight: 500; margin-right: 10px; margin-left: -14px; font-size: 1.2em !important; }
#solutions ul li { color: var(--lx-blue); font-weight: 500; }
.ra-bullet-list-3 { list-style-type: none !important; }
.ra-bullet-list-3 li:before { content: '\2713' !important; color: var(--lx-accent); width: 100%; min-width: 100%; margin-right: 10px; margin-left: -24px; font-size: 1.2em !important; }
.ra-bullet-list-battery { list-style-type: none !important; }
.ra-bullet-list-battery li:before { content: '\2713' !important; color: var(--lx-blue); width: 100%; min-width: 100%; margin-right: 10px; margin-left: -24px; font-size: 1.2em !important; }
.ra-bullet-list-odor { list-style-type: none !important; }
.ra-bullet-list-odor li:before { content: '\2713' !important; color: var(--lx-blue); width: 100%; min-width: 100%; margin-right: 10px; margin-left: -24px; font-size: 1.2em !important; }
#solutions #solutions-faq { margin-top: 1.5rem; }
#solutions #solutions-faq h2 { font-size: 1.125rem; margin: 0 0 .5rem 0; }
#solutions #solutions-faq details { background: #f7f9fc; border: 1px solid #e6ebf0; border-radius: 10px; margin: .5rem 0; padding: .5rem .75rem; }
#solutions #solutions-faq summary { cursor: pointer; font-weight: 600; list-style: none; }
#solutions #solutions-faq summary::-webkit-details-marker { display: none; }
#solutions #solutions-faq summary::after { content: "+"; float: right; transition: transform .2s ease; opacity: .6; }
#solutions #solutions-faq details[open] summary::after { transform: rotate(90deg); opacity: .8; }
#solutions #solutions-faq p { margin: .5rem 0 0 0; color: var(--lx-ink); line-height: 1.5; }
#solutions table, #solutions details { margin-left: 50px; }
#solutions summary { list-style: none; cursor: pointer; position: relative; padding-left: 20px; }
#solutions summary::before { content: "+"; color: var(--lx-blue); font-weight: 100; position: absolute; left: 0; font-size: 2rem; line-height: 1; }
.blocker { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; overflow: auto; z-index: 1000; padding: 40px; box-sizing: border-box; background-color: rgba(0,0,0,0.75); text-align: center; }
.blocker:before { content: ""; display: inline-block; vertical-align: middle; margin-right: -0.05em; }
.blocker.behind { background-color: transparent; }
.modal { display: none; vertical-align: middle; position: relative; z-index: 2; max-width: 500px; box-sizing: border-box; width: 90%; background: #fff; padding: 15px 30px; border-radius: 8px; box-shadow: 0 0 10px #000; text-align: left; }
.modal a.close-modal { position: absolute; top: -12.5px; right: -12.5px; display: block; width: 30px; height: 30px; text-indent: -9999px; background-size: contain; background-repeat: no-repeat; background-position: center center; background-image: url('data:image/png;base64,...'); }
.modal-spinner { display: none; position: fixed; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); padding: 12px 16px; border-radius: 5px; background-color: #111; height: 20px; }
.modal-spinner > div { border-radius: 100px; background-color: #fff; height: 20px; width: 2px; margin: 0 1px; display: inline-block; animation: sk-stretchdelay 1.2s infinite ease-in-out; }
.modal-spinner .rect2 { animation-delay: -1.1s; }
.modal-spinner .rect3 { animation-delay: -1.0s; }
.modal-spinner .rect4 { animation-delay: -0.9s; }
.g-sublevel { background-color: none; border-radius: 10px; }
.g-main-nav .g-standard .g-sublevel > li { position: relative; padding-left: 5px; padding-right: 5px; border-radius: 5px; }
.g-dropdown-column { background-color: rgba(29,69,159, 0.85); }
.grecaptcha-badge { visibility: hidden !important; }
.page-header h2 a, .page-header h1 { color: var(--lx-blue) !important; text-decoration: none !important; font-family: "Roboto", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight: 900; }
p.readmore .btn { display: inline-block; font-family: "Roboto", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight: 600; font-size: 0.8rem; line-height: 1.15; letter-spacing: 0.1rem; text-transform: uppercase; background: none !important; color: #ffffff; border: 1px solid #444444; border-radius: 2.5rem; margin: 0 0 0.5rem 0; padding: 1.5rem 3.125rem; vertical-align: middle; text-shadow: none; transition: all 0.2s; }
.searchmenu input.jl-search-input { box-shadow: none; border-radius: 0; background-color: rgba(255, 255, 255, 0.95); }
.customarticlestyle header, .customarticlestyle section { padding: 20px; background-color: #ffffff; margin: 20px 0; border-radius: 8px; }
.customarticlestyle h1, .customarticlestyle h2 { color: var(--lx-blue) !important; }
.customarticlestyle ul, ol { padding-left: 40px; }
.customarticlestyle .cta { background-color: var(--lx-blue); color: #fff; padding: 20px; text-align: center; border-radius: 8px; }
.customarticlestyle a { color: var(--lx-blue) !important; text-decoration: none; }
.customarticlestyle a:hover { text-decoration: underline; }
.image-before-section { display: block; margin-bottom: 20px; width: 100%; border-radius: 8px; }
.image-after-section { display: block; margin-top: 20px; width: 100%; border-radius: 8px; }
.image-between-sections { display: block; margin: 20px 0; width: 100%; border-radius: 8px; }
.section-image-wrapper { display: flex; flex-direction: column; }
.section-equal { padding: 20px; background-color: #ffffff; border-radius: 8px; }
.image-match-section { width: 100%; object-fit: cover; height: auto; max-height: 500px; margin-top: 20px; }
.jl-button-primary, .jl-card-primary.jl-card-hover:hover, .jl-background-primary, .jl-marker, .jl-alert-primary, .jl-subnav-pill > .jl-active > a, .jl-checkbox:checked, .jl-checkbox:indeterminate, .jl-radio:checked, .jl-card-primary > .tm-timeline-arrow, .jl-dotnav > .jl-active > *, .jl-dotnav > * > :focus, .jl-dotnav > * > :hover, .jl-pagination > .jl-active > * { background-color: rgba(69,179,220, 0.5) !important; }
.ravebo-article { --brand: var(--lx-blue); --brand-dark: var(--lx-blue-dk); --accent: var(--lx-accent); --ink: var(--lx-ink-900); --muted: #6b7280; color: var(--ink); font: 16px/1.7 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; }
.ravebo-article .meta { display: flex; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: .9rem; margin: .25rem 0 1rem; }
.ravebo-article h1 { font-size: clamp(1.8rem,2.2vw+1rem,2.6rem); line-height: 1.15; margin: .2rem 0 .4rem; color: var(--brand); }
.ravebo-article .lead { font-size: 1.05rem; color: #374151; margin: 0 0 1rem; }
.ravebo-article h2 { font-size: 1.35rem; color: var(--brand-dark); margin: 1.6rem 0 .6rem; }
.ravebo-article p { margin: .75rem 0; }
.ravebo-article .callout { border-left: 4px solid var(--accent); background: rgba(69,179,220,.08); padding: 14px 16px; border-radius: 8px; margin: 1rem 0; }
.ravebo-article .figure { margin: 1rem 0; border-radius: 12px; overflow: hidden; }
.ravebo-article .figure img { width: 100%; display: block; border-radius: 12px; }
.ravebo-article .figure figcaption { font-size: .85rem; color: var(--muted); margin-top: .35rem; }
.ravebo-article .cta { border-left: 4px solid var(--accent); margin: 2rem 0 0; border-radius: 12px; padding: 18px; background: rgba(69,179,220,.08); }
.ravebo-article .cta h3 { margin: .25rem 0 .35rem; color: var(--brand); }
.ravebo-article .cta p { margin: .25rem 0 1rem; color: #374151; }
.ravebo-article .btn { display: inline-flex; gap: 10px; align-items: center; background: var(--accent); color: #fff; text-decoration: none; font-weight: 600; border-radius: 10px; padding: .7rem 1rem; }
.ravebo-article .btn:hover { filter: brightness(.95); }
.ravebo-article ul { padding-left: 1.1rem; margin: .5rem 0; }
.ravebo-article li { margin: .25rem 0; }
/* === Gas Index Card (Ravebo) ============================== */
/* Container */
.gas-card { background: var(--rb-bg); border: 1px solid var(--rb-line); border-radius: 16px; padding: 20px; box-shadow: 0 6px 20px rgba(0,0,0,.06); max-width: 1100px; margin: 20px auto; font: 400 16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif; color: var(--rb-ink); }
/* Header */
.gas-card__head { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; border-bottom: 1px solid var(--rb-line); padding-bottom: 10px; margin-bottom: 16px; }
.gas-card__title { font-size: 1.75rem; line-height: 1.1; font-weight: 700; color: var(--rb-deep); margin: 0; }
.gas-card__meta { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.gc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--rb-chip); color: var(--rb-ink); font-size: .9rem; border: 1px solid var(--rb-line); white-space: nowrap; }
.gc-chip--accent { background: rgba(69,179,220,.1); border-color: rgba(69,179,220,.25); color: var(--rb-accent); }
.gc-chip code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-weight: 700; }
/* KPI strip */
.gas-card__kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 8px 0 16px; }
.gc-kpi { border: 1px dashed var(--rb-line); border-radius: 12px; padding: 10px 12px; background: var(--lx-surface); }
.gc-kpi__label { font-size: .78rem; color: var(--rb-muted); margin-bottom: 4px; }
.gc-kpi__value { font-weight: 700; }
/* Layout: properties + hazards */
.gas-card__grid { display: grid; gap: 18px; grid-template-columns: 1.1fr .9fr; }
@media (max-width: 900px) {
  .gas-card__head { grid-template-columns: 1fr; }
  .gas-card__meta { justify-content: flex-start; }
  .gas-card__kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .gas-card__grid { grid-template-columns: 1fr; }
}
/* Tables (responsive) */
.gc-table { width: 100%; border-collapse: collapse; font-size: .95rem; border: 1px solid var(--rb-line); border-radius: 12px; overflow: hidden; }
.gc-table thead th { background: var(--rb-deep); color: #fff; text-align: left; font-weight: 600; padding: 10px 12px; }
.gc-table tbody td { padding: 10px 12px; border-top: 1px solid var(--rb-line); }
.gc-table tbody tr:nth-child(odd) td { background: var(--lx-surface); }
.gc-table .gc-col--key { width: 45%; color: var(--rb-muted); }
/* Hazard list */
.gc-box { border: 1px solid var(--rb-line); border-radius: 12px; padding: 12px; }
.gc-title { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; font-weight: 700; color: var(--rb-deep); margin: 0 0 8px; }
.gc-bullets { margin: 0; padding-left: 18px; }
.gc-bullets li { margin: 6px 0; }
/* Badges (hazards) */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 10px; font-size: .85rem; font-weight: 600; border: 1px solid transparent; }
.badge--flammable { color: var(--rb-accent); background: rgba(69,179,220,.1); border-color: rgba(69,179,220,.25); }
.badge--toxic { color: var(--rb-bad); background: rgba(220,38,38,.07); border-color: rgba(220,38,38,.25); }
.badge--irritant { color: #b45309; background: #fff7ed; border-color: #fde68a; }
.badge--env { color: #036666; background: #e6fffa; border-color: #99f6e4; }
.badge--corrosive { color: #7f1d1d; background: #fee2e2; border-color: #fecaca; }
.badge--ox { color: #1d4ed8; background: #e0e7ff; border-color: #bfdbfe; }
/* Oxidizer */
.badge--asph { color: #0b7285; background: #e3fafc; border-color: #99e9f2; }
/* Asphyxiant */
.badge--sens { color: #b91c1c; background: #fee2e2; border-color: #fecaca; }
/* Sensitizer */
.badge--carc { color: #7c3aed; background: #f3e8ff; border-color: #e9d5ff; }
/* Small helpers */
.gc-muted { color: var(--rb-muted); }
.gc-note { font-size: .85rem; color: var(--rb-muted); margin-top: 10px; }
/* --- Risk banner --- */
.risk-banner { margin: 8px 0 16px; border-left: 4px solid; padding: 10px 12px; border-radius: 10px; font-weight: 600; }
.risk-banner--warning { border-color: #f59e0b; background: #fff7ed; color: #b45309; }
.risk-banner--danger { border-color: #ef4444; background: #fee2e2; color: #7f1d1d; }
/* --- Severity meter (11-5 dots) --- */
.severity-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 6px 0 16px; }
@media (max-width:600px) {
  .severity-grid { grid-template-columns: 1fr; }
}
.sev-item { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--rb-line); border-radius: 10px; padding: 8px 10px; }
.sev-label { font-weight: 600; }
.sev-dots { display: flex; gap: 4px; margin: 0 10px; flex: 0 0 auto; }
.sev-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--lx-line-soft); }
.sev-tag { font-size: .8rem; color: var(--rb-muted); }
.sev--1 .sev-dots span:nth-child(-n+1) { background: var(--lx-sev-1); }
.sev--2 .sev-dots span:nth-child(-n+2) { background: var(--lx-sev-2); }
.sev--3 .sev-dots span:nth-child(-n+3) { background: var(--lx-sev-3); }
.sev--4 .sev-dots span:nth-child(-n+4) { background: var(--lx-sev-4); }
.sev--5 .sev-dots span:nth-child(-n+5) { background: var(--lx-sev-5); }
/* Print tweaks */
@media print {
  .gas-card { box-shadow: none; border-color: #bbb; }
  .gas-card__kpis { grid-template-columns: repeat(4,1fr) !important; }
}
.vssl-article { font-family: "Roboto", Arial, sans-serif; background: var(--lx-surface); color: #1e1e1e; margin: 0; padding: 0; line-height: 1.7; }
.vssl-header { background: linear-gradient(135deg, var(--lx-blue-dk), var(--lx-blue)); color: white; padding: 60px 20px; text-align: center; }
.vssl-header h1 { font-size: 2.8rem; margin-bottom: 10px; }
.vssl-header p { font-size: 1.2rem; opacity: 0.9; }
.vssl-section { max-width: 900px; margin: 40px auto; padding: 0 20px; }
.vssl-section h2 { margin-top: 50px; font-size: 1.9rem; color: var(--lx-blue); }
.vssl-section h3 { margin-top: 35px; font-size: 1.4rem; color: var(--lx-blue); }
.vssl-diagram { margin: 40px 0; background: white; padding: 25px; border-radius: 12px; box-shadow: 0 14px 25px rgba(0, 0, 0, 0.25); }
.vssl-diagram h3 { margin-top: 0; }
.vssl-diagram-flow { display: flex; flex-direction: column; gap: 20px; }
.vssl-step { background: var(--lx-surface-2); padding: 15px 20px; border-left: 6px solid var(--lx-blue); border-radius: 6px; }
.vssl-section ul { margin-top: 15px; }
.vssl-cta-box { background: var(--lx-blue); color: white; padding: 30px; border-radius: 12px; margin: 60px 0; text-align: center; }
.vssl-cta-link { display: inline-block; background: var(--lx-blue); color: black; padding: 12px 22px; border-radius: 6px; font-size: 1.1rem; text-decoration: none; font-weight: 600; }
.vssl-cta-link:hover { background: var(--lx-blue-700); }
/* FAQ styling */
.vssl-faq { margin: 50px 0; background: #ffffff; border-radius: 12px; padding: 25px 25px 10px 25px; box-shadow: 0 14px 25px rgba(0, 0, 0, 0.25); }
.vssl-faq h2 { margin-top: 0; }
.vssl-faq-item { margin-bottom: 20px; border-bottom: 1px solid var(--lx-line-soft); padding-bottom: 15px; }
.vssl-faq-item:last-child { border-bottom: none; padding-bottom: 0; }
.vssl-faq-item h3 { margin-top: 0; font-size: 1.1rem; color: var(--lx-blue); }
.vssl-faq-item p { margin: 5px 0 0 0; }
.fsw-article { font-family: "Roboto", Arial, sans-serif; background: var(--lx-surface); color: var(--lx-blue); line-height: 1.7; margin: 0; padding: 0; }
.fsw-header { background: linear-gradient(135deg, var(--lx-blue-dk), var(--lx-blue)); color: #fff !important; padding: 60px 25px; text-align: center; }
.fsw-header h1 { font-size: 2.7rem; margin: 0 0 10px; }
.fsw-header p { font-size: 1.25rem; opacity: 0.9; }
.fsw-container { max-width: 1000px; margin: 40px auto; padding: 0 20px; }
.fsw-section h2 { font-size: 1.9rem; color: var(--lx-blue); margin-top: 50px; }
.fsw-section h3 { font-size: 1.4rem; color: var(--lx-blue); margin-top: 25px; }
.fsw-box { background: white; border-left: 6px solid var(--lx-blue); padding: 20px 25px; margin: 30px 0; border-radius: 6px; }
.fsw-diagram { background: #fff; padding: 25px; border-radius: 6px; border: 1px solid #dcdcdc; font-family: monospace; font-size: 0.95rem; white-space: pre; overflow-x: auto; margin: 30px 0; }
.fsw-cta { background: var(--lx-blue); color: white; padding: 35px; text-align: center; border-radius: 6px; margin-top: 60px; }
.fsw-cta h3 { font-size: 1.8rem; margin-bottom: 10px; }
.fsw-cta p { font-size: 1.1rem; margin-bottom: 20px; }
.fsw-cta a { background: var(--lx-blue); color: white; padding: 12px 22px; border-radius: 6px; text-decoration: none; font-weight: bold; }
.fsw-faq h3 { margin-top: 40px; font-size: 1.4rem; }
.fsw-faq-item { background: #fff; padding: 20px; border-radius: 6px; border: 1px solid var(--lx-line); margin-bottom: 20px; }
.hcn-hero { background: linear-gradient(135deg, var(--lx-blue-dk), var(--lx-blue)); padding: 60px 20px; text-align: center; color: #ffffff; }
.hcn-hero h1 { font-size: 2.5rem; margin-bottom: 10px; }
.subtitle { font-size: 1.2rem; margin-bottom: 25px; color: var(--lx-accent); }
.hcn-section { padding: 50px 20px; max-width: 1100px; margin: auto; }
.hcn-section h2 { color: var(--lx-blue); margin-bottom: 20px; }
.hcn-section ul { margin-top: 15px; padding-left: 20px; }
.spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 20px; }
.spec-grid div { background: #f5f7fa; padding: 20px; border-radius: 10px; box-shadow: 0 8px 20px rgba(0,0,0,0.05); }
.hcn-cta { background: var(--lx-blue); color: white; text-align: center; padding: 60px 20px; }
.btn-primary { display: inline-block; background: var(--lx-blue); color: #ffffff; padding: 14px 30px; border-radius: 8px; text-decoration: none; font-weight: bold; margin-top: 20px; transition: 0.3s; }
.btn-primary:hover { background: var(--lx-blue-700); }
/* ============================================================================
   LECHLER BASE STYLING
   ----------------------------------------------------------------------------
   Eén atom in default outline, gererfd door alle andere outlines.
   - .g-home-particles (homepage / landing pages: nav binnen header, met hero)
   - .g-default (article pages: aparte navigation, geen hero)
   - Gemeenschappelijk: dropdown, footer, buttons, typografie
   ============================================================================ */
/* === Site-wide typografie === */
body { font-family: 'Roboto', Arial, sans-serif; }
/* === Header voor LANDING/HOMEPAGE — achtergrond komt nu uit de VIDEO ===
   Decoratief verloop + contourlijnen + glow verwijderd; alleen de structuur
   die de video nodig heeft blijft staan. */
.g-home-particles #g-header, .g-default #g-header { background: var(--lx-blue-dk) !important; position: relative; isolation: isolate; padding: 5rem 0 3rem !important; overflow: hidden; }
/* GEEN position op .g-container — anders sizet de video naar de smalle
   content-container i.p.v. de hele header. De video staat op z-index:-1 en
   zit dus al achter de inhoud; positioneren van de container is niet nodig. */
/* === Header-video: full-bleed achter de header-inhoud ===
   Vult de HELE header (volle breedte), hoogte = de header-inhoud.
   z-index:-1 → automatisch achter de tekst, zonder de container te positioneren. */
#g-header .mk-headervideo { position: absolute !important; inset: 0 !important; z-index: -1 !important; overflow: hidden !important; pointer-events: none !important; }
#g-header .mk-headervideo__media { position: absolute !important; top: 50% !important; left: 50% !important; width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important; transform: translate(-50%, -50%) !important; object-fit: cover !important; display: block !important; }
#g-header .mk-headervideo__overlay { position: absolute !important; inset: 0 !important; }
/* Wrappers in de header static maken, zodat de video zich aan #g-header bindt
   (volle breedte, inclusief padding) i.p.v. aan de smalle .g-container. */
#g-header .g-container, #g-header .g-grid, #g-header .g-block { position: static !important; }
/* === Header-tekst wit (donkere video-achtergrond) — geldt voor ALLE header-teksten === */
#g-header, #g-header .g-content, #g-header h1, #g-header h2, #g-header h3, #g-header h4, #g-header p, #g-header li, #g-header span, #g-header div { color: #ffffff !important; }
#g-header a { color: var(--lx-accent) !important; }
/* links/accent leesbaar */
#g-header a:hover { color: #ffffff !important; }
/* menu wit (leesbaar op de donkere video) */
.g-home-particles #g-header .g-main-nav .g-toplevel > li > .g-menu-item-container, .g-default #g-header .g-main-nav .g-toplevel > li > .g-menu-item-container { color: #ffffff !important; font-weight: 500; }
.g-home-particles #g-header .g-main-nav .g-toplevel > li:hover > .g-menu-item-container, .g-default #g-header .g-main-nav .g-toplevel > li:hover > .g-menu-item-container, .g-default #g-header .g-main-nav .g-toplevel > li.active > .g-menu-item-container, .g-home-particles #g-header .g-main-nav .g-toplevel > li.active > .g-menu-item-container { color: var(--lx-accent) !important; }
/* Custom-8883 (landing-page H1/H2) - dark text, accent-spans behouden eigen kleur */
#custom-8883-particle h1, #custom-8883-particle h2 { text-shadow: none !important; font-family: 'Roboto', Arial, sans-serif !important; letter-spacing: -0.02em; }
#custom-8883-particle h1 { color: var(--lx-ink-900) !important; font-weight: 800 !important; font-size: 3rem !important; margin-bottom: 1rem; line-height: 1.1; }
#custom-8883-particle h2 { color: #475569 !important; font-weight: 400 !important; font-size: 1.25rem !important; line-height: 1.6 !important; }
.g-home-particles #custom-8883-particle::before { content: '\25CF SUSTAINABILITY BY INNOVATIVE TECHNOLOGY'; display: inline-block; background: rgba(69,179,220,0.10); color: var(--lx-accent); border: 1px solid rgba(69,179,220,0.30); border-radius: 999px; padding: 0.4rem 1rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1.5rem; font-family: 'Roboto', Arial, sans-serif; }
/* Custom-2267 contact callout - universeel (homepage + default) */
#custom-2267-particle > div { background: linear-gradient(135deg, var(--lx-blue), var(--lx-blue-700)) !important; border-radius: 16px !important; box-shadow: 0 24px 48px -12px rgba(15,23,42,0.25) !important; padding: 2rem !important; }
#custom-2267-particle button { background-color: #ffffff !important; color: var(--lx-blue-700) !important; border-radius: 8px !important; font-weight: 600 !important; padding: 0.75rem 2rem !important; border: none !important; }
/* === Navigatie voor DEFAULT/ARTICLE (aparte #g-navigation) === */
.g-default #g-navigation { background: #ffffff !important; border-bottom: 1px solid #E2E8F0; position: sticky; top: 0; z-index: 9999 !important; box-shadow: 0 1px 2px rgba(15,23,42,0.04); }
.g-default #g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container { color: #334155 !important; font-weight: 500; }
.g-default #g-navigation .g-main-nav .g-toplevel > li:hover > .g-menu-item-container, .g-default #g-navigation .g-main-nav .g-toplevel > li.active > .g-menu-item-container { color: var(--lx-blue) !important; }
/* Article typografie (default) */
.g-default #g-mainbar h1, .g-default #g-mainbar h2, .g-default #g-mainbar h3 { color: var(--lx-ink-900) !important; letter-spacing: -0.02em; font-weight: 700 !important; font-family: 'Roboto', Arial, sans-serif !important; }
.g-default #g-mainbar h1 { font-size: 2.5rem !important; margin-bottom: 1.5rem; }
.g-default #g-mainbar h2 { font-size: 1.75rem !important; margin-top: 2.5rem; margin-bottom: 1rem; }
.g-default #g-mainbar a { color: var(--lx-blue) !important; text-decoration: none; }
.g-default #g-mainbar a:hover { color: var(--lx-blue-700) !important; text-decoration: underline; }
/* === DROPDOWN (mega-menu, full-width wit, zoals lechler.com) === */
/* Menu-items niet meer de positie-anker, zodat de dropdown aan de nav-balk hangt */
#g-navigation .g-main-nav .g-toplevel > li, #g-header .g-main-nav .g-toplevel > li { position: static !important; }
#g-navigation, #g-header { position: relative !important; }
#g-navigation .g-container, #g-header .g-container { position: static !important; }
/* De dropdown: full viewport-breedte, direct onder de nav.
   TRUC tegen de hover-dead-zone: de box wordt 42px OMHOOG getrokken
   (margin-top:-42px) zodat hij de visuele gap tussen nav en menu fysiek
   opvult. Die bovenste 42px is TRANSPARANT (background staat op de box uit,
   de witte achtergrond zit in ::after dat pas op 42px begint = exact de
   nav-onderkant). Resultaat: het logo wordt NIET bedekt, maar de hover-zone
   loopt onafgebroken door van het menu-item tot in de dropdown → geen gat,
   dus geen flikkeren of wegvallen, ongeacht hoe snel/langzaam je beweegt. */
#g-navigation .g-dropdown, #g-header .g-dropdown { position: absolute !important; top: 100% !important; margin-top: -42px !important; left: 50% !important; right: auto !important; margin-left: -50vw !important; width: 100vw !important; max-width: none !important; transform: none !important; transition: none !important; background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; padding: calc(1.75rem + 42px) max(1.5rem, calc((100vw - 1180px) / 2)) 1.75rem !important; z-index: 10000 !important; }
/* Wit paneel: begint op 42px = exact de nav-onderkant, dus NOOIT over het logo.
   z-index:-1 → achter de menu-links, die blijven leesbaar. */
#g-navigation .g-dropdown::after, #g-header .g-dropdown::after { content: '' !important; position: absolute !important; top: 42px !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: -1 !important; background: #ffffff !important; border-top: 1px solid var(--lx-line) !important; box-shadow: 0 14px 30px rgba(15,23,42,0.12) !important; }
/* Zichtbaarheid VOLLEDIG via CSS-hover, onafhankelijk van Gantry's JS
   (g-inactive): open zolang je over het item OF de dropdown staat. Omdat de
   transparante bovenrand de gap opvult, is de hover-zone aaneengesloten. */
#g-navigation .g-main-nav .g-toplevel > li > .g-dropdown, #g-header .g-main-nav .g-toplevel > li > .g-dropdown { visibility: hidden !important; opacity: 0 !important; }
#g-navigation .g-main-nav .g-toplevel > li:hover > .g-dropdown, #g-header .g-main-nav .g-toplevel > li:hover > .g-dropdown { visibility: visible !important; opacity: 1 !important; }
/* blauwe kolom-achtergronden (uit 2.css) neutraliseren → wit */
#g-navigation .g-dropdown .g-dropdown-column, #g-header .g-dropdown .g-dropdown-column, #g-navigation .g-dropdown .g-block, #g-header .g-dropdown .g-block, #g-navigation .g-dropdown li, #g-header .g-dropdown li { background: transparent !important; }
/* tekst donker, hover/active merkblauw */
#g-navigation .g-dropdown a, #g-navigation .g-dropdown .g-menu-item-content, #g-navigation .g-dropdown .g-menu-item-title, #g-header .g-dropdown a, #g-header .g-dropdown .g-menu-item-content, #g-header .g-dropdown .g-menu-item-title { color: var(--lx-ink) !important; text-decoration: none; }
#g-navigation .g-dropdown li:hover > .g-menu-item-container, #g-navigation .g-dropdown li:hover > .g-menu-item-container *, #g-header .g-dropdown li:hover > .g-menu-item-container, #g-header .g-dropdown li:hover > .g-menu-item-container * { color: var(--lx-blue) !important; }
/* === FOOTER (universeel) — LICHT, conform CD-manual (grijs var(--lx-grey)) === */
.g-home-particles #g-footer, .g-default #g-footer { background: var(--lx-grey) !important; color: var(--lx-ink) !important; padding: 4rem 0 2rem !important; font-size: 0.875rem; }
.g-home-particles #g-footer h1, .g-home-particles #g-footer h2, .g-home-particles #g-footer h3, .g-home-particles #g-footer h4, .g-home-particles #g-footer .g-title, .g-default #g-footer h1, .g-default #g-footer h2, .g-default #g-footer h3, .g-default #g-footer h4, .g-default #g-footer .g-title { color: var(--lx-ink) !important; font-size: 0.75rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; margin-bottom: 1.25rem !important; }
.g-home-particles #g-footer ul, .g-default #g-footer ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.g-home-particles #g-footer ul li, .g-default #g-footer ul li { margin: 0.5rem 0 !important; list-style: none !important; }
/* alle klikbare content in Lechler-blauw (CD-manual) */
.g-home-particles #g-footer a, .g-default #g-footer a { color: var(--lx-blue) !important; text-decoration: none; }
.g-home-particles #g-footer a:hover, .g-default #g-footer a:hover { color: var(--lx-accent) !important; }
/* === BUTTONS (universeel) === */
.g-home-particles .button, .g-default .button { background: var(--lx-blue) !important; color: #ffffff !important; border-radius: 8px !important; padding: 0.875rem 2rem !important; font-weight: 600 !important; text-transform: none !important; font-size: 0.875rem !important; border: none !important; box-shadow: 0 4px 12px -2px rgba(15,23,42,0.08); transition: all 0.2s ease; }
.g-home-particles .button:hover, .g-default .button:hover { background: var(--lx-blue-700) !important; transform: translateY(-1px); color: #ffffff !important; }
/* === Vinkjes === */
.ra-bullet-list-1 li:before { color: var(--lx-blue) !important; }
.ra-bullet-list-3 li:before { color: var(--lx-accent) !important; }
/* === Lechler logo SVG: forceer Lechler-donker (Helium kleurt 'm wit) === */
.jl-logo svg.jl-svg, .jl-logo svg.jl-svg path { fill: var(--lx-ink-900) !important; color: var(--lx-ink-900) !important; }
/* === "| Scrubbers" achter het logo (alleen nav, niet footer) === */
#g-navigation .jl-logo, #g-header .jl-logo { display: inline-flex !important; align-items: center; gap: 0.75rem; text-decoration: none !important; }
#g-navigation .jl-logo::after, #g-header .jl-logo::after { content: none; color: var(--lx-muted); font-family: 'Roboto', Arial, sans-serif; font-size: 1rem; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; }
/* Logo img sizing in nav: vaste hoogte */
#g-navigation .jl-logo img, #g-header .jl-logo img, #g-navigation .jl-logo svg, #g-header .jl-logo svg { height: 48px !important; width: auto !important; max-width: none !important; flex-shrink: 0; }
/* Logo + menu verticaal uitlijnen in nav-row */
#g-navigation .g-block, #g-header .g-block { display: flex; align-items: center; }
/* Dropdown-kolommen NIET gecentreerd — top-aligned (alleen .g-block override, niet de .g-grid row) */
.g-dropdown .g-block, .g-dropdown-column { display: block !important; align-items: flex-start !important; }
/* Rechts-uitgelijnde blocks (zoals het menu) ook horizontaal pushen */
#g-navigation .g-block.align-right, #g-header .g-block.align-right { justify-content: flex-end; }
/* Menu iets hoger uitlijnen — 6px op default, 14px op landing pages */
.g-default #g-navigation .g-main-nav { margin-top: -6px; }
.g-home-particles #g-header .g-main-nav, .g-default #g-header .g-main-nav { margin-top: -21px; }
/* Footer logo blijft natuurlijk groot */
#g-footer .jl-logo img { height: auto !important; max-width: 200px; }
/* === Mobile offcanvas (slide-in menu) === */
#g-offcanvas { background: var(--lx-blue-700) !important; }
#g-offcanvas .g-menu-item-container, #g-offcanvas .g-menu-item-content, #g-offcanvas a { color: #ffffff !important; }
#g-offcanvas .g-menu-item:hover > .g-menu-item-container, #g-offcanvas .g-menu-item:hover > .g-menu-item-container *, #g-offcanvas .g-menu-item.active > .g-menu-item-container, #g-offcanvas .g-menu-item.active > .g-menu-item-container * { color: var(--lx-accent) !important; background: rgba(255, 255, 255, 0.06) !important; }
/* === Mobile burger-menu toggle (was wit, onzichtbaar op witte nav) === */
.g-offcanvas-toggle, .g-offcanvas-toggle i, .g-offcanvas-toggle .fa-bars { color: var(--lx-blue) !important; font-size: 22px !important; }
.g-offcanvas-toggle { padding: 8px 12px; border-radius: 8px; transition: all 0.2s ease; }
.g-offcanvas-toggle:hover, .g-offcanvas-toggle:hover i { color: #ffffff !important; background: var(--lx-blue) !important; }
/* === Search-icon (vergrootglas) in nav === */
a.jl-icon.jl-search-icon, .searchmenu a { color: var(--lx-blue) !important; font-size: 18px !important; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; transition: all 0.2s ease; }
a.jl-icon.jl-search-icon:hover, .searchmenu a:hover { color: #ffffff !important; background: var(--lx-blue) !important; }
.logo { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: #fff; }
.logo-wordmark { height: 34px; width: auto; display: block; flex-shrink: 0; }
.logo-divider { width: 1px; height: 22px; background: rgba(255, 255, 255, 0.25); flex-shrink: 0; }
.logo-tag { font-size: 14px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.85); white-space: nowrap; }
/* === jllogo-*-particle logo sizing (zonder .jl-logo class wrapper) === */
#g-header [id^="jllogo-"] img, #g-header [id^="jllogo-"] svg, #g-navigation [id^="jllogo-"] img, #g-navigation [id^="jllogo-"] svg { height: 48px !important; width: auto !important; max-width: none !important; display: block !important; }
#g-header [id^="jllogo-"], #g-navigation [id^="jllogo-"] { display: inline-flex !important; align-items: center; gap: 0.75rem; }
#g-header [id^="jllogo-"]:not(:has(.jl-logo))::after, #g-navigation [id^="jllogo-"]:not(:has(.jl-logo))::after { content: none; color: var(--lx-muted); font-family: 'Roboto', Arial, sans-serif; font-size: 1rem; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; }
/* === Menu compacter zodat het past op pages met veel items === */
#g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container, #g-header .g-main-nav .g-toplevel > li > .g-menu-item-container { padding-left: 0.6rem !important; padding-right: 0.6rem !important; font-size: 0.85rem !important; }
#g-navigation .g-main-nav .g-toplevel > li, #g-header .g-main-nav .g-toplevel > li { white-space: nowrap; }
#g-header .hero h1 { color: #ffffff !important; }
#g-header .hero h1 .accent { color: var(--lx-accent) !important; }
#g-header .hero h2 { color: rgba(255,255,255,0.78) !important; font-size: 1.25rem !important; line-height: 1.6 !important; }
#g-header .hero p { color: rgba(255,255,255,0.9) !important; }
#g-header .g-content h1 { color: #ffffff !important; }
#g-header .g-content h2 { color: #ffffff !important; font-size: 1.25rem !important; line-height: 1.6 !important; }
#g-header .g-content p { color: rgba(255,255,255,0.9) !important; }
#custom-1374-particle::before { content: '\25CF SUSTAINABILITY BY INNOVATIVE TECHNOLOGY'; display: inline-block; background: rgba(69, 179, 220, 0.10); color: var(--lx-accent); border: 1px solid rgba(69, 179, 220, 0.30); border-radius: 999px; padding: 0.4rem 1rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1.5rem; font-family: 'Roboto', Arial, sans-serif; }
/* =========================================================
   INDUSTRY PAGES — v2.1  (Lechler CD)
   Scope: .rb-article-content
   Brand: var(--lx-blue-dk) (primary), var(--lx-accent) (accent)
   Kleuren omgezet van Ravebo (#002954 / #ff8c00) naar Lechler-tokens.
   ========================================================= */
/* ---- Losse nav-tweaks (dubbele .g-main-nav ul regel samengevoegd) ---- */
.g-main-nav ul, #g-mobilemenu-container ul { margin: 0; padding: 10px 7px 10px 10px; list-style: none; }
.g-main-nav .g-toplevel > li { margin: 5px 0px 5px 20px; }
/* ---- Design tokens ---- */
.rb-article-content { --rb-bg: var(--lx-blue-dk); --rb-accent: var(--lx-accent); --rb-text: var(--lx-ink-dark); --rb-muted: var(--lx-ink-2); --rb-soft: var(--lx-surface); --rb-card: #ffffff; --rb-radius: 16px; --rb-radius-sm: 10px; --rb-shadow: 0 10px 30px rgba(0,25,60,.08); --rb-shadow-soft: 0 6px 18px rgba(0,25,60,.06); --rb-maxw: 1160px; color: var(--rb-text); }
/* ---- Layout ---- */
.rb-article-content .rb-wrap { max-width: var(--rb-maxw); margin: 0 auto; padding: clamp(18px,3vw,28px); }
.rb-article-content .rb-grid { display: grid; gap: 28px; }
.rb-article-content .rb-2 { grid-template-columns: 1.15fr .85fr; }
.rb-article-content .rb-2r { grid-template-columns: .9fr 1.1fr; }
@media (max-width:960px) {
  .rb-article-content .rb-2, .rb-article-content .rb-2r { grid-template-columns: 1fr; }
}
/* ---- Hero ---- */
.rb-article-content .rb-hero { color: #fff; background: radial-gradient(90rem 40rem at 70% -10%, rgba(255,255,255,.08), transparent), var(--rb-bg); }
.rb-article-content .rb-hero .rb-wrap { padding-top: 86px; padding-bottom: 86px; }
.rb-article-content .rb-eyebrow { letter-spacing: .12em; text-transform: uppercase; font-weight: 600; opacity: .85; font-size: .8rem; }
.rb-article-content .rb-h1 { font-size: clamp(2rem,4vw,3rem); line-height: 1.08; margin: 10px 0 14px; font-weight: 800; }
.rb-article-content .rb-hero p { max-width: 60ch; opacity: .98; }
/* ---- Typography ---- */
.rb-article-content h2 { font-size: clamp(1.6rem,2.6vw,2.2rem); margin: 0 0 12px; font-weight: 800; color: var(--rb-text); }
.rb-article-content h3 { font-size: 1.15rem; margin: 0 0 8px; font-weight: 800; color: var(--rb-text); }
.rb-article-content p { margin: 0 0 10px; }
.rb-article-content .rb-lead { color: var(--rb-muted); max-width: 70ch; }
.rb-article-content .rb-muted { color: var(--rb-muted); }
/* ---- Buttons ---- */
.rb-article-content .rb-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; text-decoration: none; font-weight: 800; transition: transform .06s ease, box-shadow .2s ease; }
.rb-article-content .rb-btn:active { transform: translateY(1px); }
.rb-article-content .rb-btn--primary { background: var(--rb-accent); color: #0b1320; box-shadow: var(--rb-shadow); }
.rb-article-content .rb-btn--primary:hover { box-shadow: 0 12px 36px rgba(69,179,220,.22); }
.rb-article-content .rb-btn--ghost { border: 1px solid rgba(255,255,255,.35); color: #fff; }
.rb-article-content .rb-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* ---- Icons (works for stroke & fill SVGs) ---- */
.rb-article-content .rb-icon { width: 20px; height: 20px; display: inline-block; color: currentColor; }
.rb-article-content .rb-icon * { vector-effect: non-scaling-stroke; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rb-article-content .rb-icon path { fill: currentColor; }
/* ---- Sections ---- */
.rb-article-content .rb-sec { padding: clamp(36px,5vw,64px) 0; background: #fff; }
.rb-article-content .rb-sec.soft { background: var(--rb-soft); }
/* ---- Cards, lists, badges, KPIs ---- */
.rb-article-content .rb-card { background: var(--rb-card); border-radius: var(--rb-radius); box-shadow: var(--rb-shadow); padding: 22px; }
.rb-article-content .rb-list { display: grid; gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; }
.rb-article-content .rb-li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.rb-article-content .rb-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.rb-article-content .rb-badge { background: #fff; border: 1px solid var(--lx-line-soft); border-radius: 999px; padding: 8px 12px; font-weight: 700; color: var(--rb-text); box-shadow: var(--rb-shadow-soft); }
.rb-article-content .rb-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
@media (max-width:720px) {
  .rb-article-content .rb-kpis { grid-template-columns: 1fr; }
}
.rb-article-content .rb-kpi { background: #fff; border-radius: var(--rb-radius-sm); padding: 18px; box-shadow: var(--rb-shadow-soft); }
.rb-article-content .rb-kpi b { font-size: 1.05rem; color: var(--rb-text); }
/* ---- Media blocks ---- */
.rb-article-content .rb-media { border-radius: var(--rb-radius); overflow: hidden; box-shadow: var(--rb-shadow); background: var(--lx-line-2); min-height: 240px; }
.rb-article-content .rb-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ---- Centered section headers ---- */
.rb-article-content #challenges > .rb-wrap > div:first-child, .rb-article-content #solutions > .rb-wrap > div:first-child, .rb-article-content #faq > .rb-wrap > div:first-child { text-align: center; max-width: 70ch; margin: 0 auto 48px; }
/* ---- Solutions section paragraph style ---- */
.rb-article-content #solutions p { color: var(--rb-text); font-weight: 400; font-size: 1.05rem; }
/* ---- CTA ---- */
.rb-article-content .rb-cta .rb-card { background: linear-gradient(135deg, var(--lx-blue) 0%, var(--lx-blue-dk) 55%); color: #fff; text-align: center; padding: 32px; border: 1px solid rgba(255,255,255,.06); }
.rb-article-content .rb-cta .rb-card h2 { color: #fff; margin: 0 0 8px; }
.rb-article-content .rb-cta .rb-card p { color: var(--lx-line-soft); }
/* ---- FAQ ---- */
.rb-article-content .rb-faq { border-top: 1px solid var(--lx-line-soft); margin-top: 14px; }
.rb-article-content .rb-faq details { background: #fff; border-radius: var(--rb-radius-sm); padding: 16px 18px; box-shadow: var(--rb-shadow-soft); }
.rb-article-content .rb-faq details+details { margin-top: 12px; }
.rb-article-content .rb-faq summary { cursor: pointer; font-weight: 800; color: var(--rb-text); list-style: none; position: relative; padding-right: 22px; }
.rb-article-content .rb-faq summary::-webkit-details-marker { display: none; }
.rb-article-content .rb-faq summary::after { content: '+'; position: absolute; right: 0; top: 0; color: var(--rb-accent); font-weight: 900; }
.rb-article-content .rb-faq details[open] summary::after { content: '–'; }
/* ---- Small helpers ---- */
.rb-article-content .center { text-align: center; }
.rb-article-content .mt-24 { margin-top: 24px; }
.rb-article-content .mt-32 { margin-top: 32px; }
/* ==== Industry icon fix (drop-in) ==== */
.rb-article-content svg.rb-icon { width: 22px !important; height: 22px !important; min-width: 22px; min-height: 22px; display: inline-block; color: var(--rb-text, var(--lx-ink-dark)); vertical-align: middle; }
.rb-article-content .rb-icon path, .rb-article-content .rb-icon line, .rb-article-content .rb-icon polyline, .rb-article-content .rb-icon circle, .rb-article-content .rb-icon rect { stroke: currentColor !important; stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; fill: none !important; }
.rb-article-content .rb-icon.rb-icon--fill path, .rb-article-content .rb-icon.rb-icon--fill circle, .rb-article-content .rb-icon.rb-icon--fill rect { fill: currentColor !important; stroke: none !important; }
.rb-article-content .rb-li .rb-icon { width: 20px !important; height: 20px !important; }


/* ============================================================================
   Lechler — Technical Article stylesheet
   Reusable style for Joomla articles, conform Lechler Corporate Design.
   Division: Air Quality Control Systems (accent light blue #45B3DC).
   ============================================================================ */



/* ---------- Root wrapper --------------------------------------------------- */

.lx-article { font-family: var(--lx-font); color: var(--lx-ink); line-height: 1.7; font-size: 1.0625rem; /*max-width: var(--lx-maxw);*/ margin: 0 auto; -webkit-font-smoothing: antialiased; }
.lx-article p { margin: 0 0 1.15em; }
.lx-article strong { font-weight: 700; }

/* ---------- Article header / eyebrow / title ------------------------------- */

.lx-article__header { margin-bottom: 2rem; }
.lx-article__eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--lx-accent); margin: 0 0 0.6rem; }
.lx-article__eyebrow::before { content: ""; display: inline-block; width: 22px; height: 2px; background: var(--lx-accent); vertical-align: middle; margin-right: 0.55rem; }
.lx-article__title { font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.18; font-weight: 700; color: var(--lx-blue); margin: 0 0 0.75rem; }
.lx-article__subtitle { font-size: 1.15rem; font-weight: 400; color: var(--lx-muted); margin: 0; }

/* ---------- Abstract / lead box -------------------------------------------- */

.lx-abstract { background: var(--lx-grey); border-left: 4px solid var(--lx-blue); padding: 1.35rem 1.6rem; margin: 0 0 2.5rem; border-radius: var(--lx-radius); }
.lx-abstract__label { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lx-blue); margin-bottom: 0.5rem; }
.lx-abstract p { margin: 0; font-size: 1.02rem; }

/* ---------- Key-facts strip ------------------------------------------------ */

.lx-keyfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--lx-line); border: 1px solid var(--lx-line); border-radius: var(--lx-radius); overflow: hidden; margin: 0 0 2.5rem; }
.lx-keyfacts__item { background: var(--lx-white); padding: 1.15rem 1rem; text-align: center; }
.lx-keyfacts__value { display: block; font-size: 1.7rem; font-weight: 700; color: var(--lx-blue); line-height: 1.1; }
.lx-keyfacts__label { display: block; font-size: 0.82rem; color: var(--lx-muted); margin-top: 0.35rem; }
/* Langere waarden (samenstellingen, afmetingen) passen niet op 1.7rem. */
.lx-keyfacts__value--lang { font-size: 1.02rem; font-weight: 600; line-height: 1.3; }
.lx-keyfacts__item--breed { grid-column: 1 / -1; text-align: left; }
/* Lange waarden mogen afbreken in plaats van uit hun kolom te lopen. */
.lx-keyfacts__value { overflow-wrap: anywhere; }
/* Veel feiten naast elkaar: kleiner, anders past 1.7rem niet in een kolom. */
.lx-keyfacts--compact .lx-keyfacts__value { font-size: 1.15rem; }
/* Scheidingslijnen per vakje, zodat een half gevulde laatste rij geen grijs gat geeft. */
.lx-keyfacts { background: var(--lx-white); }
.lx-keyfacts__item { box-shadow: 0 0 0 1px var(--lx-line); }

/* ---------- Sections & headings -------------------------------------------- */

.lx-section { margin: 0 0 2.25rem; }
.lx-section__title { font-size: 1.4rem; font-weight: 700; color: var(--lx-blue); margin: 0 0 0.85rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--lx-line); display: flex; align-items: baseline; gap: 0.6rem; }
.lx-section__num { font-size: 0.95rem; font-weight: 700; color: var(--lx-accent); flex: 0 0 auto; }
.lx-section__subtitle { font-size: 1.08rem; font-weight: 700; color: var(--lx-ink); margin: 1.5rem 0 0.6rem; }

/* ---------- Lists ---------------------------------------------------------- */

.lx-list { list-style: none; margin: 0 0 1.15em; padding: 0; }
.lx-list > li { position: relative; padding-left: 1.5rem; margin-bottom: 0.85rem; }
.lx-list > li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; background: var(--lx-accent); border-radius: 50%; }
.lx-list > li strong { color: var(--lx-blue); }

/* ---------- Figures / image placeholders ----------------------------------- */

.lx-figure { margin: 2rem 0; }
.lx-figure__ph { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; min-height: 300px; background: var(--lx-grey); border: 2px dashed var(--lx-accent); border-radius: var(--lx-radius); color: var(--lx-muted); text-align: center; padding: 2rem; }
.lx-figure__ph-icon { width: 46px; height: 46px; color: var(--lx-accent); }
.lx-figure__ph-title { font-weight: 700; color: var(--lx-blue); font-size: 0.95rem; letter-spacing: 0.03em; text-transform: uppercase; }
.lx-figure__ph-hint { font-size: 0.85rem; max-width: 34ch; }
.lx-figure img { display: block; width: 100%; height: auto; border-radius: var(--lx-radius); }
.lx-figure__caption { font-size: 0.88rem; color: var(--lx-muted); margin-top: 0.65rem; padding-left: 0.9rem; border-left: 3px solid var(--lx-accent); }
.lx-figure__caption b { color: var(--lx-ink); font-weight: 700; }

/* ---------- Pull quote / callout ------------------------------------------- */

.lx-callout { background: var(--lx-blue-50); border-left: 4px solid var(--lx-accent); padding: 1.25rem 1.5rem; margin: 2rem 0; border-radius: var(--lx-radius); font-size: 1.08rem; color: var(--lx-blue-700); }
.lx-callout p:last-child { margin-bottom: 0; }

/* ---------- FAQ ------------------------------------------------------------ */

.lx-faq { margin: 2.5rem 0 1rem; }
.lx-faq__heading { font-size: 1.4rem; font-weight: 700; color: var(--lx-blue); margin: 0 0 1.1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--lx-line); }
.lx-faq__item { border: 1px solid var(--lx-line); border-radius: var(--lx-radius); margin-bottom: 0.7rem; overflow: hidden; background: var(--lx-white); }
.lx-faq__item[open] { border-color: var(--lx-accent); }
.lx-faq__q { cursor: pointer; list-style: none; padding: 1rem 1.25rem; font-weight: 700; color: var(--lx-blue); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.lx-faq__q::-webkit-details-marker { display: none; }
.lx-faq__q::after { content: "+"; font-size: 1.4rem; font-weight: 400; color: var(--lx-accent); line-height: 1; transition: transform 0.2s ease; flex: 0 0 auto; }
.lx-faq__item[open] .lx-faq__q::after { content: "\2013"; }
.lx-faq__q:hover { background: var(--lx-grey); }
.lx-faq__a { padding: 0 1.25rem 1.15rem; color: var(--lx-ink); }
.lx-faq__a p { margin: 0; }

/* ---------- Divider & footnote / standards --------------------------------- */

.lx-standards { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--lx-line); font-size: 0.9rem; color: var(--lx-muted); }
.lx-standards strong { color: var(--lx-ink); }

/* ---------- Responsive ----------------------------------------------------- */

@media (max-width: 640px) {
  .lx-article { font-size: 1rem; }
  .lx-section__title { font-size: 1.25rem; }
  .lx-figure__ph { min-height: 220px; }
}

/* ============================================================================
   Template overrides — Gantry 5 / g5_helium
   ============================================================================ */

#g-mainbar .lx-article .lx-article__title, #g-mainbar .lx-article .lx-section__title, #g-mainbar .lx-article .lx-faq__heading, #g-mainbar .lx-article .lx-abstract__label, #g-mainbar .lx-article .lx-keyfacts__value { color: var(--lx-blue) !important; }
#g-mainbar .lx-article .lx-article__eyebrow, #g-mainbar .lx-article .lx-section__num, #g-mainbar .lx-article .lx-figure__ph-title { color: var(--lx-accent) !important; }
#g-mainbar .lx-article a { color: var(--lx-blue) !important; }
#g-mainbar .lx-article a:hover { color: var(--lx-accent) !important; }


/* ==========================================================================
   LC-ARTICLE  —  rijkere artikelopmaak (eyebrow, key takeaways, steps, FAQ)
   --------------------------------------------------------------------------
   Op 2026-08-26 uit het artikel 'Precision in Every Drop' hierheen verplaatst,
   zodat meerdere artikelen deze opmaak kunnen gebruiken en een wijziging op
   één plek werkt. Alles is gescoped op .lc-article en de lc-componenten; er
   staan geen element-selectors of :root-variabelen in, dus het raakt de rest
   van deze stylesheet niet. Het palet volgt nu de lx-tokens hierboven.
   ========================================================================== */

/* Scoped article styles — palette mirrors mycustom.css, with CD fallbacks.
   Everything is namespaced to .lc-article so it cannot leak into the template. */
.lc-article{
  --lc-blue: var(--lx-blue, var(--lx-blue)); --lc-accent: var(--lx-accent, var(--lx-accent));
  --lc-text: var(--lx-ink, var(--lx-ink)); --lc-muted: var(--lx-muted, var(--lx-muted));
  --lc-radius:6px; --lc-font:'Roboto',Arial,sans-serif;
  max-width:1180px; margin:0 auto; font-family:var(--lc-font);
  color:var(--lc-text); line-height:1.7;
}
.lc-article p{margin:0 0 1rem; font-size:1.0625rem;}
.lc-article ul{margin:0 0 1.25rem; padding-left:1.25rem;}
.lc-article li{margin:.35rem 0;}
/* Headings — scoped + !important so they beat the template's dark-heading rule */
#g-mainbar .lc-article h1,
.lc-article h1{
  font-family:var(--lc-font)!important; font-weight:700!important;
  font-size:clamp(2rem,4vw,2.75rem)!important; line-height:1.15!important;
  letter-spacing:-0.02em!important; color:var(--lc-blue)!important; margin:0 0 1.25rem!important;
}
#g-mainbar .lc-article h2,
.lc-article h2{
  font-family:var(--lc-font)!important; font-weight:700!important;
  font-size:clamp(1.5rem,2.6vw,2rem)!important; line-height:1.2!important;
  letter-spacing:-0.01em!important; color:var(--lc-blue)!important;
  margin:2.75rem 0 1rem!important; padding-left:.9rem; border-left:4px solid var(--lc-accent);
}
#g-mainbar .lc-article h3,
.lc-article h3{
  font-family:var(--lc-font)!important; font-weight:700!important;
  font-size:1.25rem!important; color:var(--lc-text)!important; margin:1.75rem 0 .65rem!important;
}
.lc-article a{color:var(--lc-blue); text-decoration:none; border-bottom:2px solid var(--lc-accent);}
.lc-article a:hover{color:var(--lc-accent); border-color:var(--lc-blue);}
/* Eyebrow / keyword line */
.lc-article .lc-eyebrow{
  font-size:.95rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--lc-accent); margin:0 0 .75rem; position:relative; padding-left:2.75rem;
}
.lc-article .lc-eyebrow::before{
  content:""; position:absolute; left:0; top:.55em; width:2rem; height:2px; background:var(--lc-accent);
}
/* Key takeaways box */
.lc-takeaways{
  background:var(--lx-surface); border-left:4px solid var(--lc-blue); border-radius:var(--lc-radius);
  padding:1.5rem 1.75rem; margin:2rem 0;
}
.lc-takeaways h2{margin:0 0 .75rem!important; border:0!important; padding:0!important; font-size:1.2rem!important;}
.lc-takeaways ul{margin:0; padding-left:1.1rem;}
.lc-takeaways p{margin:0; font-size:1.15rem; font-weight:600; color:var(--lc-blue); line-height:1.45;}
/* Process steps */
.lc-steps{display:grid; gap:1rem; margin:1.5rem 0;}
.lc-step{
  background:#fff; border:1px solid var(--lx-line-soft); border-radius:var(--lc-radius);
  padding:1.25rem 1.5rem 1.25rem 3.75rem; position:relative;
}
.lc-step .lc-step__no{
  position:absolute; left:1.25rem; top:1.25rem; width:1.9rem; height:1.9rem; border-radius:50%;
  background:var(--lc-blue); color:#fff; font-weight:700; font-size:.95rem;
  display:flex; align-items:center; justify-content:center;
}
.lc-step h3{margin:0 0 .35rem!important;}
.lc-step p{margin:0; font-size:1rem;}
/* FAQ */
.lc-faq{margin:1.5rem 0 0;}
.lc-faq details{
  border:1px solid var(--lx-line-soft); border-radius:var(--lc-radius); padding:0 1.25rem; margin:0 0 .75rem; background:#fff;
}
.lc-faq summary{
  list-style:none; cursor:pointer; padding:1.1rem 0; font-weight:700; color:var(--lc-blue);
  font-size:1.05rem; display:flex; justify-content:space-between; gap:1rem; align-items:center;
}
.lc-faq summary::-webkit-details-marker{display:none;}
.lc-faq summary::after{content:"+"; color:var(--lc-accent); font-size:1.4rem; line-height:1;}
.lc-faq details[open] summary::after{content:"–";}
.lc-faq details>div{padding:0 0 1.1rem;}
.lc-faq details>div p{margin:0;}


/* ==========================================================================
   Uit artikelen hierheen verhuisd op 2026-08-26. Stond als <style> in de
   tekst, en won daardoor altijd van deze stylesheet.
   ========================================================================== */

/* uit artikel #94 — List */
.process-row {
  display: none;
}
.process-row td {
  height: 20.8px;
}

.industry-row td {
  cursor: pointer; /* Maakt duidelijk dat je op de industrierijen kunt klikken */
}

/* uit artikel #109 — Food & Beverage */
#solutions p {
    margin-left: 0px !important;
    color: #002954;
    font-weight: 100;
    font-size: 1.1rem;
}