/* CSN Hygienics: publieke site. Mobile first; breekpunten 375 (basis), 768, 1024, 1280.
   HUISSTIJL: alle kleuren, fonts en maten staan hieronder in :root. Na de intake
   alleen dit blok aanpassen. Bron kleuren: huidige csngroup.nl (zie content/bron/huisstijl.md). */
:root {
  --c-navy: #1e294c;        /* logokleur */
  --c-primary: #092451;     /* accent huidige site: knoppen en links */
  --c-primary-hover: #00457c;
  --c-blue-soft: #6080ad;
  --c-teal: #04a8a9;        /* accentkleur 2, decoratief */
  --c-teal-dark: #006e70;   /* teal met voldoende contrast voor tekst en knoppen */
  --c-green: #59b530;       /* duurzaamheid */
  --c-green-dark: #3c7d1f;
  --c-emma: #bd172d;        /* Emma Products */
  --c-text: #1d2733;
  --c-muted: #4a5868;
  --c-line: #d8dee6;
  --c-bg: #ffffff;
  --c-bg-soft: #f2f5f8;
  --c-bg-teal: #e6f6f6;
  --c-ok: #1d6b34;
  --c-error: #b3261e;
  --c-on-dark: #ffffff;
  /* Oranje accent (feedback CSN 26-10-2026): commerciële knoppen (Offerte, Bellen) en kleine accenten.
     Knoptekst navy op oranje: 6,04:1 (hover 7,48:1). Oranje als tekst alleen in de donkere variant. */
  --c-accent: #f39200;
  --c-accent-hover: #ffaa33;
  --c-on-accent: var(--c-navy);
  --c-accent-text: #b54708;   /* oranje tekst op wit 5,43:1, op --c-bg-soft 4,96:1 */
  --c-accent-soft: #fff4e5;   /* zachte tint achter iconen */
  --c-accent-light: #ffdda8;  /* eyebrow op de videohero; over alle shots minimaal 4,5:1 (tests/e2e/hero-loop.mjs) */
  --c-band: var(--c-bg-soft); /* lichte band: secties wisselen af tussen wit en lichtgrijs */
  --c-focus: var(--c-accent-text);
  /* Overlay videohero: navy, links (tekst) donker, rechts lichter. Ook over een witte
     videoframe blijft witte tekst zo boven AA (4.5:1). */
  --hero-overlay: linear-gradient(90deg, rgba(30, 41, 76, .9) 0%, rgba(30, 41, 76, .78) 45%, rgba(30, 41, 76, .35) 100%);
  --hero-overlay-mobile: rgba(30, 41, 76, .8);
  --hero-toggle-bg: rgba(30, 41, 76, .75);
  --nav-backdrop: rgba(30, 41, 76, .6);  /* overlay achter het mobiele menupaneel */
  --nav-panel-head: var(--c-navy);
  --logo-muted-opacity: .7;   /* partnerlogo's in rust (grijs), bij hover en focus 1 */
  --logo-height: 44px;
  --group-logo-height: 22px;  /* OptiGroup-logo in de regel op Home en het blok op Over CSN */

  --font: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-base: 1.0625rem;
  --fs-small: .9375rem;
  --fs-h1: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem);
  --fs-h3: 1.25rem;
  --lh: 1.6;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 6px 24px rgba(30, 41, 76, .08);
  --shadow-hover: 0 14px 32px rgba(30, 41, 76, .14);
  --shadow-float: 0 10px 30px rgba(30, 41, 76, .22);
  --container: 1200px;
  --gutter: 1.25rem;
  --section-y: 3.5rem;
  --tap: 48px;
  --header-offset: 5.5rem;  /* hoogte sticky kop (max 85 px) plus marge */
}

@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/lato-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/lato-700-latin.woff2") format("woff2"); }

/* Basis */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Ankerdoelen en focus in de inhoud landen onder de sticky kop. Bewust niet via scroll-padding
   op html: dan ziet de browser de kop zelf als bedekt en scrolt hij bij focus op een menu-item
   (Shift+Tab vanuit de inhoud) naar boven. Zo houdt alleen de inhoud buiten de kop deze marge. */
:where(body > :not(.site-header)), :where(body > :not(.site-header)) * { scroll-margin-top: var(--header-offset); }
body { margin: 0; font-family: var(--font); font-size: var(--fs-base); line-height: var(--lh); color: var(--c-text); background: var(--c-bg); padding-bottom: 72px; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-primary); text-underline-offset: .15em; }
a:hover { color: var(--c-primary-hover); }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
h1, h2, h3 { color: var(--c-navy); line-height: 1.2; margin: 0 0 .6em; font-weight: 700; }
h1 { font-size: var(--fs-h1); letter-spacing: -.01em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p, ul, ol { margin: 0 0 1em; }
address { font-style: normal; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 800px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--c-primary); color: #fff; padding: .75rem 1rem; z-index: 100; }
.skip-link:focus { left: 1rem; top: 1rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .8125rem; font-weight: 700; color: var(--c-accent-text); margin-bottom: .5rem; }
.lead { font-size: 1.1875rem; color: var(--c-muted); }
.icon { width: 1.25em; height: 1.25em; flex: none; }

/* Knoppen: grote tikvlakken */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--tap); padding: .75rem 1.4rem; border-radius: 999px; font-weight: 700; font-size: 1rem; text-decoration: none; border: 2px solid transparent; cursor: pointer; line-height: 1.2; font-family: inherit; }
.btn-sm { min-height: 44px; padding: .55rem 1.1rem; font-size: .9375rem; }
.btn-primary { background: var(--c-primary); color: #fff; }
.btn-primary:hover { background: var(--c-primary-hover); color: #fff; }
.btn-cta { background: var(--c-accent); color: var(--c-on-accent); }
.btn-cta:hover { background: var(--c-accent-hover); color: var(--c-on-accent); }
.btn-accent { background: #fff; color: var(--c-primary); }
.btn-accent:hover { background: var(--c-bg-teal); color: var(--c-primary); }
.btn-outline { border-color: var(--c-primary); color: var(--c-primary); background: transparent; }
.btn-outline:hover { background: var(--c-primary); color: #fff; }
.btn-light { background: #fff; color: var(--c-primary); border-color: var(--c-line); }
.btn-ghost-light { border-color: #fff; color: #fff; }
.btn-ghost-light:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.link-arrow { font-weight: 700; }

/* Header en navigatie */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--c-line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: 1rem; flex-wrap: wrap; }
.brand img { width: 110px; height: auto; }
.menu-toggle { display: inline-flex; align-items: center; gap: .5rem; min-height: var(--tap); padding: 0 .75rem; font-weight: 700; color: var(--c-navy); text-decoration: none; border: 2px solid var(--c-line); border-radius: var(--radius-sm); background: #fff; font-family: inherit; font-size: 1rem; cursor: pointer; }
.menu-toggle-bars, .menu-toggle-bars::before, .menu-toggle-bars::after { display: block; width: 20px; height: 2px; background: currentColor; position: relative; }
.menu-toggle-bars::before, .menu-toggle-bars::after { content: ""; position: absolute; left: 0; }
.menu-toggle-bars::before { top: -6px; }
.menu-toggle-bars::after { top: 6px; }
.nav-list, .sub-list { list-style: none; margin: 0; padding: 0; }
.nav-list a { display: flex; align-items: center; min-height: var(--tap); padding: .25rem 0; color: var(--c-navy); font-weight: 700; text-decoration: none; }
.nav-list a[aria-current] { color: var(--c-accent-text); }
.sub-list a { font-weight: 400; padding-left: 1rem; }
.nav-head, .sub-toggle { display: none; }
.nav-cta { display: flex; flex-direction: column; gap: .75rem; }
.nav-phone { display: inline-flex; align-items: center; gap: .5rem; min-height: var(--tap); font-weight: 700; color: var(--c-navy); text-decoration: none; }

/* Menupaneel onder 1280: schuift van rechts in, met overlay erachter. De desktopnavigatie
   past pas vanaf ongeveer 1230 px (gemeten), daarom blijft het breekpunt 1280. Zonder JS
   blijft het paneel dicht en springt "Menu" naar het footermenu. */
@media (max-width: 1279.98px) {
  html.nav-open { overflow: hidden; }
  html.nav-open .site-header { z-index: 70; }
  .site-nav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; width: min(26rem, calc(100% - 3rem)); background: var(--c-bg); box-shadow: -8px 0 32px rgba(30, 41, 76, .25); overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
  .site-nav.is-open { transform: none; visibility: visible; transition: transform .25s ease; }
  .nav-backdrop { position: fixed; inset: 0; z-index: 1; background: var(--nav-backdrop); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
  html.nav-open .nav-backdrop { opacity: 1; visibility: visible; transition: opacity .25s ease; }

  .nav-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; padding: .5rem .75rem .5rem var(--gutter); background: var(--nav-panel-head); }
  .nav-head img { width: 110px; }
  .nav-close { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; background: transparent; border: 2px solid rgba(255, 255, 255, .4); border-radius: var(--radius-sm); color: var(--c-on-dark); cursor: pointer; }
  .nav-close:hover { background: rgba(255, 255, 255, .12); }
  .nav-close:focus-visible { outline-color: var(--c-on-dark); }
  .nav-close-x, .nav-close-x::before { display: block; width: 20px; height: 2px; background: currentColor; transform: rotate(45deg); }
  .nav-close-x::before { content: ""; transform: rotate(90deg); }

  .nav-list { flex: 1 0 auto; padding: .25rem var(--gutter) 1rem; }
  .nav-item { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--c-line); }
  .nav-item > a { flex: 1; min-height: 52px; font-size: 1.0625rem; }
  .sub-toggle { display: inline-grid; place-items: center; width: 52px; min-height: 52px; margin-right: -.5rem; padding: 0; background: transparent; border: 0; color: var(--c-navy); cursor: pointer; }
  .sub-toggle::before { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
  .sub-toggle[aria-expanded="true"]::before { transform: translateY(2px) rotate(-135deg); }
  .sub-toggle:hover { color: var(--c-accent-text); }
  .sub-list { display: none; flex-basis: 100%; padding: 0 0 .5rem; border-top: 1px solid var(--c-bg-soft); }
  .is-sub-open > .sub-list { display: block; }
  .sub-list a { min-height: 44px; padding: .5rem 0 .5rem 1rem; line-height: 1.3; }
  .sub-list li + li a { border-top: 1px solid var(--c-bg-soft); }

  .nav-cta { gap: .5rem; padding: 1.25rem var(--gutter) calc(1.25rem + env(safe-area-inset-bottom)); background: var(--c-bg-soft); border-top: 1px solid var(--c-line); }
  .nav-cta .btn { width: 100%; }
}

.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; padding: .9rem 0 0; margin: 0; font-size: var(--fs-small); color: var(--c-muted); }
.breadcrumbs li + li::before { content: "/"; margin: 0 .4rem 0 .15rem; color: var(--c-line); }
.breadcrumbs a { color: var(--c-muted); }

/* Hero */
.hero { padding: 2rem 0 2.5rem; background: linear-gradient(180deg, var(--c-bg-soft), #fff); }
.hero-grid { display: grid; gap: 2rem; align-items: center; }
.hero h1 { margin-bottom: .5em; }
.hero .lead p:last-child { margin-bottom: 0; }
.hero-media img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; }
.page-head { padding: 2rem 0 .5rem; }

/* Videohero: poster als achtergrond, video erover zodra site.js hem start. */
.hero-video { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center; min-height: 32rem; padding: 3rem 0 4.5rem; background: var(--c-navy); color: var(--c-on-dark); }
.hero-bg { position: absolute; inset: 0; z-index: -1; }
.hero-bg img, .hero-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.hero-bg video { display: none; opacity: 0; transition: opacity .8s ease; }
.hero-video.has-video .hero-bg video { display: block; }
.hero-video.is-playing .hero-bg video { opacity: 1; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: var(--hero-overlay-mobile); }
.hero-video .hero-text { max-width: 38rem; }
.hero-video h1, .hero-video .lead { color: var(--c-on-dark); }
.hero-video .eyebrow { color: var(--c-accent-light); }
.hero-video .btn-outline { border-color: var(--c-on-dark); color: var(--c-on-dark); }
.hero-video .btn-outline:hover { background: var(--c-on-dark); color: var(--c-primary); }
.hero-video :focus-visible { outline-color: var(--c-on-dark); }
.hero-video-toggle { position: absolute; right: var(--gutter); bottom: 1rem; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem 1rem; border: 2px solid var(--c-on-dark); border-radius: 999px; background: var(--hero-toggle-bg); color: var(--c-on-dark); font: inherit; font-size: var(--fs-small); font-weight: 700; cursor: pointer; }
.hero-video-toggle[hidden] { display: none; }
.hero-video-toggle:hover { background: var(--c-navy); }
.hero-video-icon { width: 12px; height: 12px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.hero-video-toggle.is-paused .hero-video-icon { border: 0; border-left: 11px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.hero-video .hero-grid { position: static; }

/* Secties */
.section { padding: var(--section-y) 0; }
.section + .section { padding-top: 0; }
.section-title { margin-bottom: 1rem; }
.section-intro { max-width: 760px; color: var(--c-muted); margin-bottom: 1.75rem; }
.prose { max-width: 760px; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .35rem; }
.split { display: grid; gap: 2rem; align-items: center; }
.split-media { margin: 0; }
.split-media img { border-radius: var(--radius); }

/* USP-rij: licht, met navy iconen op een oranje tint (geen groot blauw vlak meer onder de hero) */
.section-usps { background: var(--c-bg); padding: 2.25rem 0; border-bottom: 1px solid var(--c-line); }
.section-usps + .section, .section-cta + .section, .section-references + .section { padding-top: var(--section-y); }
.section + .section-usps { padding-top: 2.25rem; }
.usp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.usp { display: flex; gap: .9rem; align-items: flex-start; }
.usp-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--c-accent-soft); color: var(--c-navy); box-shadow: inset 0 0 0 2px var(--c-accent); flex: none; }
.usp-title { font-weight: 700; margin: 0 0 .15rem; font-size: 1.0625rem; color: var(--c-navy); }
.usp-text { margin: 0; color: var(--c-muted); font-size: var(--fs-small); }

/* Banden: kaarten en referenties op lichtgrijs, de rest op wit. Zo wisselen secties af. */
.section.section-cards, .section.section-references { background: var(--c-band); padding: var(--section-y) 0; }
.section-cards + .section, .section-jobs + .section { padding-top: var(--section-y); }

.card-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.card { position: relative; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s, border-color .2s; }
.card:hover { box-shadow: var(--shadow); }
/* Hele kaart klikbaar: duidelijke hover, en de focusring om de hele kaart */
.card.is-link:hover { border-color: var(--c-accent); box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.card.is-link:hover .card-title a { color: var(--c-navy); text-decoration: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; }
@supports selector(:has(*)) {
  .card.is-link .card-title a:focus-visible { outline: none; }
  .card.is-link:has(.card-title a:focus-visible) { outline: 3px solid var(--c-focus); outline-offset: 3px; border-color: var(--c-accent); }
}
.card.has-icon .card-body { align-items: center; text-align: center; padding-top: 1.75rem; }
.card-icon { display: inline-flex; margin-bottom: .9rem; }
.service-icon { width: 64px; height: 64px; color: var(--c-navy); }
.service-icon .si-a { fill: var(--c-accent); }
.service-icon .si-s { stroke: var(--c-accent); stroke-width: 2.5; }
.service-icon .si-w { stroke: var(--c-bg); }
/* Voordelen onder de dienstkaarten: korte regels met een vinkje */
.card-points { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.card-points li { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--c-navy); }
.card-points .icon { color: var(--c-accent-text); }
/* Branches: compacte rij, icoon plus woord */
.section.section-sectors, .section-cta.is-line + .section.section-sectors { padding: 2rem 0; }
.section-sectors + .section { padding-top: var(--section-y); }
.sectors { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem; }
.sectors-title { font-size: var(--fs-base); margin: 0; color: var(--c-muted); font-weight: 700; }
.sector-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem 2rem; }
.sector { display: flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--c-navy); }
.sector .service-icon { width: 36px; height: 36px; }
/* Productfoto's volledig in beeld (Emma): passend in het vlak, niet bijgesneden */
.card-grid.is-fit .card-media { background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
.card-grid.is-fit .card-media img { object-fit: contain; padding: 1.25rem; background: var(--c-bg); }
.card-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--c-bg-soft); }
.card-body { padding: 1.25rem 1.25rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.card-body p:last-child { margin-bottom: 0; }
.card-title { font-size: 1.1875rem; margin-bottom: .5rem; }
.card-title a { color: var(--c-navy); text-decoration: none; }
.card-title a::after { content: ""; position: absolute; inset: 0; }
.card-title a:hover { color: var(--c-primary-hover); text-decoration: underline; }
.card-link { margin-top: auto; padding-top: .75rem; font-weight: 700; color: var(--c-primary); }
.card-meta { font-size: var(--fs-small); color: var(--c-muted); margin-bottom: .25rem; }

.faq-list { border-top: 1px solid var(--c-line); }
.faq { border-bottom: 1px solid var(--c-line); }
.faq summary { cursor: pointer; list-style: none; padding: 1rem 2.5rem 1rem 0; font-weight: 700; color: var(--c-navy); position: relative; min-height: var(--tap); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .5rem; top: .8rem; font-size: 1.5rem; line-height: 1; color: var(--c-accent-text); }
.faq[open] summary::after { content: "\2212"; }
.faq-answer { padding: 0 0 1rem; color: var(--c-muted); }

.section-cta .cta-box { background: var(--c-navy); color: #fff; border-radius: var(--radius); padding: 2rem 1.5rem; display: grid; gap: 1rem; }
.section-cta h2 { color: #fff; }
.section-cta p { color: #e3e9f3; }
.section-cta a:not(.btn) { color: #fff; }
.section-cta .btn-row { margin-top: 0; }
.section-cta:not(.is-line) :focus-visible { outline-color: var(--c-on-dark); }
/* Korte CTA-regel tussen twee blokken: licht, één zin plus de oranje knop en bellen */
.section.section-cta.is-line { padding: 1.75rem 0; border-bottom: 1px solid var(--c-line); }
.section-cta.is-line + .section { padding-top: var(--section-y); }
.cta-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.cta-line-text p { margin: 0; font-size: 1.125rem; color: var(--c-navy); font-weight: 700; }
.cta-line-title { font-size: var(--fs-h3); margin: 0 0 .25rem; }
.section-cta.is-line .btn-row { margin: 0; }

.ref-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.ref figure { margin: 0; height: 100%; background: var(--c-bg-soft); border-radius: var(--radius); padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.ref blockquote { margin: 0; font-size: 1.0625rem; }
.ref blockquote p:last-child { margin: 0; }
.ref figcaption { margin-top: auto; display: flex; flex-direction: column; color: var(--c-muted); font-size: var(--fs-small); }
.ref figcaption strong { color: var(--c-navy); font-size: 1rem; }

/* Formulieren */
.section-forms { background: var(--c-bg-soft); }
.section + .section-forms { padding-top: var(--section-y); }
.form-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.form-tabs[hidden] { display: none; }
.form-tabs button { min-height: var(--tap); padding: .6rem 1.1rem; border-radius: 999px; border: 2px solid var(--c-primary); background: #fff; color: var(--c-primary); font: inherit; font-weight: 700; cursor: pointer; }
.form-tabs button[aria-selected="true"] { background: var(--c-primary); color: #fff; }
.form-panel { background: #fff; border-radius: var(--radius); padding: 1.5rem 1.25rem; margin-bottom: 1.5rem; box-shadow: var(--shadow); }
.js-tabs .form-panel[data-active="0"] { display: none; }
.form-title { font-size: 1.375rem; }
.form-help { color: var(--c-muted); }
.fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
.fieldset legend { font-weight: 700; color: var(--c-navy); font-size: 1.0625rem; margin-bottom: .75rem; padding: 0; }
.field { margin-bottom: 1rem; }
.field label, .field .label { display: block; font-weight: 700; margin-bottom: .35rem; font-size: var(--fs-small); color: var(--c-text); }
.req { color: var(--c-error); }
.opt { font-weight: 400; color: var(--c-muted); }
input:not([type=checkbox]):not([type=radio]), select, textarea { width: 100%; min-height: var(--tap); padding: .65rem .8rem; border: 1px solid #8a97a6; border-radius: var(--radius-sm); font: inherit; color: var(--c-text); background: #fff; }
textarea { min-height: 7rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(4, 168, 169, .35); border-color: var(--c-teal-dark); }
[aria-invalid="true"] { border-color: var(--c-error) !important; }
.field-error { color: var(--c-error); font-size: var(--fs-small); margin: .3rem 0 0; font-weight: 700; }
.choice-row, .check-grid { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.check-grid { display: grid; gap: .25rem; margin-bottom: 1rem; }
.choice { display: inline-flex; align-items: center; gap: .6rem; min-height: var(--tap); font-weight: 400 !important; cursor: pointer; }
.choice input { width: 22px; height: 22px; accent-color: var(--c-primary); }
.order-line { display: grid; grid-template-columns: 1fr 6rem; gap: .75rem; align-items: end; }
.order-line .field { margin-bottom: .75rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-privacy { font-size: var(--fs-small); color: var(--c-muted); }
.notice { border-radius: var(--radius-sm); padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.notice p:last-child { margin: 0; }
.notice-ok { background: #e3f4e8; border-left: 5px solid var(--c-ok); }
.notice-error { background: #fbe9e7; border-left: 5px solid var(--c-error); }
.js-cleaner [data-when="ja"][hidden] { display: none; }

/* Nieuws */
.news-figure { margin: 0 0 1.5rem; }
.news-figure img { border-radius: var(--radius); }

/* OptiGroup: smalle band onderaan, direct boven de footer (logo en één zin) */
.group-band { border-top: 1px solid var(--c-line); background: var(--c-bg); }
.group-band-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; padding-top: .75rem; padding-bottom: .75rem; color: var(--c-muted); font-size: var(--fs-small); }
.group-band p { margin: 0; }
.group-band-logo { display: inline-flex; align-items: center; min-height: 44px; }
.group-band-logo img { width: auto; height: var(--group-logo-height); }

/* Footer */
.site-footer { background: var(--c-navy); color: #d5dcea; padding: 3rem 0 1rem; font-size: var(--fs-small); }
.site-footer a { color: #fff; }
.footer-grid { display: grid; gap: 2rem; }
.footer-logo { width: 120px; margin-bottom: .75rem; }
.footer-slogan { color: #fff; font-weight: 700; }
.footer-title { color: #fff; font-size: 1rem; margin-bottom: .75rem; }
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin-bottom: .1rem; }
.footer-list a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.footer-list a:hover { text-decoration: underline; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.15); margin-top: 2rem; padding-top: 1rem; }
.footer-bottom p { margin: 0; }

/* Speerpunten */
.highlight-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.highlight { background: var(--c-bg-soft); border-radius: var(--radius); padding: 1.25rem 1.25rem 1.1rem; }
.highlight-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: .75rem; border-radius: 50%; background: var(--c-bg-teal); color: var(--c-teal-dark); }
.highlight-title { font-size: 1.125rem; margin-bottom: .4rem; }
.highlight p { margin-bottom: .5rem; }
.highlight p:last-child { margin-bottom: 0; }
.highlight-link a { font-weight: 700; }
/* Beeld (optioneel) in een speerpuntkaart, bv. later de CSN-bussen in de Benelux */
.highlight-media { margin: .75rem 0 .5rem; }
.highlight-media img { border-radius: var(--radius-sm); }

/* <picture> uit de mediabibliotheek gedraagt zich als de <img> erin */
picture { display: contents; }
/* Eén formaat (origineel smaller dan 640 px): nooit breder dan de eigen breedte */
.hero-media img.img-natural, .split-media img.img-natural, .product-media img.img-natural, .highlight-media img.img-natural { width: auto; max-width: 100%; height: auto; }
.hero-media:has(.img-natural) { text-align: center; }
.hero-media img.img-natural { box-shadow: none; }

/* Productoverzicht (modellen): foto passend, niet bijgesneden */
.product-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.product { border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-bg); overflow: hidden; display: flex; flex-direction: column; }
.product-media { margin: 0; padding: 1.25rem; background: var(--c-bg); border-bottom: 1px solid var(--c-line); display: flex; justify-content: center; }
.product-media img { display: block; }
.product-body { padding: 1.1rem 1.25rem 1.25rem; }
.product-title { font-size: var(--fs-h3); margin-bottom: .5rem; }
.product-body ul { margin: 0; padding-left: 1.2rem; }
.product-body li { margin-bottom: .25rem; }

/* Dispenserlijnen (productbladen): kaart met voorbeeld van pagina 1 en de PDF */
.sheet-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.sheet { border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-bg); overflow: hidden; display: flex; flex-direction: column; }
.sheet-media { margin: 0; padding: 1.25rem 1.25rem 0; background: var(--c-bg-soft); display: flex; justify-content: center; }
.sheet-media img { display: block; width: 100%; max-width: 240px; height: auto; border: 1px solid var(--c-line); border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; box-shadow: var(--shadow); }
.sheet-body { padding: 1.1rem 1.25rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.sheet-title { font-size: var(--fs-h3); margin-bottom: .5rem; }
.sheet-link { margin-top: auto; align-self: flex-start; }
.sheet-body p:last-of-type { margin-bottom: 1rem; }

/* Onderdeel van OptiGroup: rustige regel (Home) of blok (Over CSN) */
.section-group.is-line { padding: 1.5rem 0; }
.section-group.is-line .group-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--c-line); color: var(--c-muted); font-size: var(--fs-small); }
.section-group.is-line .group-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; }
.section-group.is-line p { margin: 0; }
.group-logo { display: block; width: auto; height: var(--group-logo-height); }
.section-group.is-block .group-logo { margin-bottom: 1rem; }
.group-link a { font-weight: 700; }

/* Partners: logo's grijs in rust, in kleur bij hover en toetsenbordfocus. Geen automatisch scrollend lint. */
.partner-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 1.5rem 2.5rem; }
.partner { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); min-width: var(--tap); padding: .25rem; border-radius: var(--radius-sm); }
.partner img { width: auto; height: var(--logo-height); max-width: 160px; object-fit: contain; filter: grayscale(1); opacity: var(--logo-muted-opacity); transition: filter .2s ease, opacity .2s ease; }
.partner:hover img, a.partner:focus-visible img { filter: none; opacity: 1; }

/* Snel contact: op mobiel de onderbalk, vanaf 1024 een zwevende knop rechtsonder (geen chatbot) */
.sticky-contact { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--c-line); box-shadow: 0 -4px 16px rgba(30,41,76,.08); }
.sticky-contact .btn { width: 100%; }
.sticky-long { display: none; }
/* Met chat: drie knoppen naast elkaar in dezelfde balk (niet stapelen) */
.sticky-contact.has-chat { grid-template-columns: repeat(3, 1fr); }
.btn-chat { background: var(--c-navy); color: var(--c-on-dark); }
.btn-chat:hover { background: var(--c-primary-hover); color: var(--c-on-dark); }

/* Vacatures */
.job-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.job { border: 1px solid var(--c-line); border-radius: var(--radius); padding: 1.25rem; }
.job-title { margin-bottom: .25rem; }
.job-meta { color: var(--c-muted); font-size: var(--fs-small); }

.page-404 { min-height: 40vh; }

/* 768 */
@media (min-width: 768px) {
  :root { --gutter: 2rem; --section-y: 4.5rem; }
  .hero { padding: 3rem 0 3.5rem; }
  .hero-has-image .hero-grid { grid-template-columns: 1.1fr .9fr; }
  .hero-video { min-height: 34rem; padding: 4rem 0 5rem; }
  .hero-bg::after { background: var(--hero-overlay); }
  .usp-list { grid-template-columns: repeat(2, 1fr); }
  .card-grid, .ref-grid { grid-template-columns: repeat(2, 1fr); }
  .highlight-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; }
  .sheet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :root { --logo-height: 52px; }
  .split { grid-template-columns: 1fr 1fr; }
  .image-links .split-media { order: -1; }
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
  .grid-3 { display: grid; grid-template-columns: 2fr 1fr; gap: 0 1rem; }
  .check-grid { grid-template-columns: repeat(2, 1fr); }
  .form-panel { padding: 2rem; }
  .section-cta .cta-box { padding: 2.5rem; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 1024: bredere layout, geen sticky balk (navigatie blijft het menupaneel tot 1280) */
@media (min-width: 1024px) {
  body { padding-bottom: 0; }
  .sticky-contact { display: flex; left: auto; right: 1.5rem; bottom: 1.5rem; gap: .5rem; padding: .5rem; border: 1px solid var(--c-line); border-radius: 999px; box-shadow: var(--shadow-float); transition: opacity .2s ease, transform .2s ease, visibility 0s; }
  .sticky-contact .btn { width: auto; }
  html.chat-open .sticky-contact.is-hidden { opacity: 1; transform: none; visibility: visible; }
  .sticky-contact.is-hidden { opacity: 0; transform: translateY(1rem); visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
  .sticky-long { display: inline; }
  .brand img { width: 130px; }
  .usp-list { grid-template-columns: repeat(4, 1fr); }
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .highlight-grid { grid-template-columns: repeat(3, 1fr); }
  .ref-grid { grid-template-columns: repeat(2, 1fr); }
  .section-cta .cta-box { grid-template-columns: 1.5fr 1fr; align-items: center; }
  .section-cta .btn-row { justify-content: flex-end; }
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
}

/* 1280: desktopnavigatie */
@media (min-width: 1280px) {
  :root { --section-y: 5rem; --container: 1280px; }
  .menu-toggle { display: none; }
  .header-inner { flex-wrap: nowrap; min-height: 84px; }
  .brand img { width: 120px; }
  .site-nav, .site-nav.is-open { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; width: auto; padding: 0; }
  .nav-list { display: flex; gap: 0; }
  .nav-item { position: relative; }
  .nav-list > li > a { border: 0; padding: 0 .55rem; font-size: .9375rem; white-space: nowrap; }
  .nav-list > li > a:hover { color: var(--c-accent-text); }
  .has-sub > a::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -4px 0 0 .45rem; }
  .sub-list { display: none; position: absolute; left: 0; top: 100%; min-width: 290px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: .5rem 0; }
  .has-sub:hover .sub-list, .has-sub:focus-within .sub-list { display: block; }
  .sub-list a { padding: .35rem 1rem; border: 0; min-height: 44px; }
  .sub-list a:hover { background: var(--c-bg-soft); }
  .nav-cta { flex-direction: row; align-items: center; margin: 0; gap: 1rem; }
  .nav-phone, .nav-cta .btn { white-space: nowrap; }
  .hero { padding: 4rem 0 4.5rem; }
  .hero-video { min-height: 38rem; }
  .ref-grid { grid-template-columns: repeat(4, 1fr); }
  .highlight-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
  .hero-video .hero-bg video, .hero-video-toggle { display: none !important; }
  .partner img { transition: none; }
}
@media print {
  .site-header, .sticky-contact, .site-footer, .section-forms { display: none; }
}