/* ==========================================================================
   AB-Solid — site stylesheet
   Replaces the Drupal "jango" theme (~1.5 MB across 30 files).
   Design tokens were sampled from the original rendered pages so the
   redesign matches the previous look.
   ========================================================================== */

/* Roboto Condensed - Apache License 2.0 - https://fonts.google.com/
   Self-hosted: no request leaves the visitor's browser.
   Variable font: one file covers weights 300-700, so four files
   (roman/italic x latin/latin-ext) replace the usual twelve. */

@font-face {
  font-family: "Roboto Condensed";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/roboto-condensed-italic-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/roboto-condensed-italic-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/roboto-condensed-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/roboto-condensed-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Design tokens ------------------------------------------------------ */
:root {
  --accent:        #6eccd9;   /* backgrounds, rules, text on dark grounds */
  --accent-dark:   #47b3c2;   /* hover on those same grounds */
  --accent-soft:   #7dd1dd;   /* links on the dark footer and nav */
  /* The brand cyan is far too light to read as text on white: 1.74:1 where
     4.5 is needed. This is the same hue taken down until it passes, for text
     on a light ground only. Backgrounds and dark grounds keep the bright
     one, so the site still looks like itself. */
  --accent-ink:    #177c8a;
  --ink-soft:      #6b7681;   /* small print; --ink-muted is for lines, not text */
  --ink-dark:      #2f353b;   /* nav + footer ground */
  --ink-heading:   #3f444a;
  --ink-body:      #5c6873;
  --ink-muted:     #aeb8c2;
  --band:          #f7f7f7;
  --line:          #e4e8eb;
  --white:         #ffffff;

  --container:     1170px;
  --gutter:        15px;
  --nav-h:         71px;   /* height of the sticky bar; see the media queries */

  --font: "Roboto Condensed", "Arial Narrow", "Helvetica Neue Condensed",
          system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --shadow: 0 2px 12px rgba(47, 53, 59, .09);
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Clip, not hidden: `overflow-x: hidden` here or on body turns the element
     into a scroll container, and a sticky child then has nothing to stick to.
     `clip` guards against stray overflow without that side effect. */
  overflow-x: clip;
}

/* The submenus jump to #part_N. The nav bar is sticky, so a target has to
   clear its height as well, or it lands underneath it. */
[id^="part_"], #main { scroll-margin-top: calc(var(--nav-h) + 24px); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

::selection { background: var(--accent); color: #fff; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--ink-body);
  background: var(--white);
}

img { max-width: 100%; height: auto; border: 0; display: block; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover, a:focus { color: var(--ink-dark); text-decoration: underline; }

h1, h2, h3, h4 {
  margin: 0 0 .6em;
  color: var(--ink-heading);
  font-weight: 700;
  line-height: 1.2;
  /* Dutch compounds such as "traceerbaarheidssysteem" are long enough to
     overflow a phone viewport, so allow the browser to break them. */
  overflow-wrap: break-word;
  hyphens: auto;
}

p { margin: 0 0 1em; }
.mb-0 { margin-bottom: 0; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li { margin-bottom: .35em; }

:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink-dark); color: #fff; padding: 10px 18px; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* --- Layout ------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: 72px 0; }
/* A page-title block on its own, with the body text following in the next
   section: no need for a full pad between the two. */
.section--intro { padding-bottom: 0; }
.section--band { background: var(--band); }
.section--dark { background: var(--ink-dark); color: #c9d1d8; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }

.grid { display: grid; gap: 30px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

/* --- Section titles ----------------------------------------------------- */
.section-title { text-align: center; margin-bottom: 44px; }
.section-title h2,
.section-title h1 {
  font-size: 30px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink-heading);
  margin: 0 0 18px;
}
.section-title .rule {
  display: block; width: 30px; height: 3px;
  background: var(--accent); margin: 0 auto;
}
.section-title--left { text-align: left; }
.section-title--left .rule { margin: 0; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-block;
  padding: 9px 22px 7px;
  border: 1px solid var(--accent-ink);
  background: transparent;
  color: var(--accent-ink);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.btn:hover, .btn:focus {
  background: var(--accent-ink); color: #fff; text-decoration: none;
}
.btn--onDark { color: var(--accent); border-color: var(--accent); }

/* --- Header ------------------------------------------------------------- */
.site-header { background: var(--white); }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 22px 0;
}
.topbar__brand { display: flex; align-items: center; gap: 16px; }
.brand { display: inline-flex; align-items: center; }
.brand img { width: 230px; max-width: 58vw; height: auto; }
.topbar__brand .social {
  display: inline-flex; padding-left: 16px; border-left: 1px solid var(--line);
}
.topbar__brand .social svg { width: 17px; height: 17px; fill: var(--ink-muted); transition: fill .15s ease; }
.topbar__brand .social:hover svg { fill: var(--accent); }

.topbar-nav { display: flex; align-items: center; gap: 0; }
.topbar-nav a {
  color: var(--ink-soft);
  font-size: 15px; font-weight: 600; text-transform: uppercase;
  padding: 4px 14px; border-left: 1px solid var(--line);
}
.topbar-nav a:first-child { border-left: 0; }
.topbar-nav a:hover, .topbar-nav a[aria-current="page"] { color: var(--ink-heading); text-decoration: none; }

/* Main navigation.
   Sticky, so it stays reachable on the long service pages. The white bar
   above it scrolls away; only this one follows. The search panel lives
   inside it and is positioned against it, so it opens under the bar
   wherever the bar happens to be. */
.mainnav {
  position: sticky; top: 0; z-index: 60;
  background: var(--ink-dark);
}
/* Direct child only: the search panel inside this nav has a .container of
   its own, and it must not be laid out as a centred flex row. */
.mainnav > .container { position: relative; display: flex; align-items: center; justify-content: center; }
.search-toggle {
  position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  background: none; border: 0; cursor: pointer;
}
.search-toggle svg { width: 17px; height: 17px; fill: #fff; transition: fill .15s ease; }
.search-toggle:hover svg { fill: var(--accent); }
.mainnav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
}
.mainnav a {
  display: block; padding: 22px 17px 20px;
  /* White items with the accent reserved for the current page, the way the
     Drupal site had it. */
  color: #fff;
  font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
  transition: color .18s ease;
}
.mainnav a:hover, .mainnav a:focus { color: var(--accent); text-decoration: none; }
.mainnav a[aria-current="page"] { color: var(--accent); }

/* An accent rule that wipes in under the top-level items, instead of a grey
   block behind them. Scoped to the top level: the submenu keeps its own
   hover treatment. */
#primary-menu > li > a { position: relative; }
#primary-menu > li > a::before {
  content: ""; position: absolute; left: 17px; right: 17px; bottom: 12px;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .24s cubic-bezier(.2, .7, .3, 1);
}
/* The caret is its own button now, so the rule has to reach out under it. */
#primary-menu > li.has-sub > a::before { right: -22px; }
#primary-menu > li > a:hover::before,
#primary-menu > li > a:focus::before,
#primary-menu > li:hover > a::before,
#primary-menu > li:focus-within > a::before,
#primary-menu > li.is-open > a::before,
#primary-menu > li > a[aria-current="page"]::before { transform: scaleX(1); }

/* A parent item is a link and a disclosure at once. The link goes to the
   page; this button opens the panel, which is the only way to reach a
   submenu on a touch screen, where there is no hover. Laying the item out
   with flex is safe here: unlike `position`, it does not make the item a
   containing block, so the panel still spans the nav container. */
#primary-menu > li.has-sub { display: flex; align-items: stretch; }
.sub-toggle {
  display: flex; align-items: center; justify-content: center;
  padding: 0 15px 0 0; margin-left: -12px;
  background: none; border: 0; cursor: pointer; color: #fff;
  transition: color .18s ease;
  /* The link beside it is positioned, for its underline, and a positioned
     element paints over an unpositioned sibling. Without this the link
     swallows every tap meant for the caret. */
  position: relative; z-index: 1;
}
.sub-toggle::before {
  content: ""; display: block;
  border: 4px solid transparent; border-top-color: currentColor;
  transform: translateY(2px); transition: transform .2s ease;
}
.sub-toggle:hover, #primary-menu > li.is-open > .sub-toggle { color: var(--accent); }
#primary-menu > li.is-open > .sub-toggle::before { transform: translateY(-2px) rotate(180deg); }

.nav-toggle {
  display: none;
  margin: 0 auto; padding: 14px 18px;
  background: none; border: 0; cursor: pointer;
  color: #fff; font: inherit; font-weight: 700; text-transform: uppercase;
}
.nav-toggle .bars { display: inline-block; width: 20px; vertical-align: middle; }
.nav-toggle .bars span {
  display: block; height: 2px; background: currentColor; margin: 4px 0;
}

/* --- Search -------------------------------------------------------------- */
.site-search {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 65;
  background: #262b30; padding: 22px 0;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .32);
}
.site-search input {
  width: 100%; padding: 13px 16px;
  font: inherit; font-size: 19px; color: #fff;
  background: transparent; border: 0; border-bottom: 2px solid var(--accent);
}
.site-search input::placeholder { color: #9aa4ad; }
.site-search input:focus { outline: none; border-bottom-color: #fff; }
.site-search__hint { margin: 10px 0 0; font-size: 14px; color: #9aa4ad; }
.site-search__results { list-style: none; margin: 16px 0 0; padding: 0; }
.site-search__results li { margin: 0 0 14px; }
.site-search__results a { display: block; color: var(--accent); font-size: 18px; font-weight: 700; }
.site-search__results p { margin: 3px 0 0; font-size: 15px; color: #aab3bb; }
.site-search__results mark { background: rgba(110,204,217,.28); color: #fff; padding: 0 2px; }

/* Screen-reader-only text */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Hero slideshow ------------------------------------------------------
   Three slides, all 1920x600. The Drupal slider was a fixed 500px band; this
   tracks the viewport instead, so it lands near 500px at the widths most
   visitors use and still keeps the artwork in frame on a phone. Without
   JavaScript the first slide simply stays put. */
.hero {
  position: relative;
  /* Width must be pinned: with only a ratio and a min-height set, the box
     widens past the viewport to satisfy the ratio. */
  width: 100%;
  height: clamp(280px, 30vw + 80px, 540px);
  background: var(--ink-dark);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero__slides { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }

.hero__slide {
  position: absolute; inset: 0;
  /* The global li margin would otherwise leave a 6px strip of the hero's own
     background showing under every slide. */
  margin: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .7s ease, visibility 0s linear .7s;
}
.hero__slide.is-active {
  opacity: 1; visibility: visible;
  transition: opacity .7s ease, visibility 0s;
}
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }

/* A slow drift on the photographs. The wordmark slide is left alone;
   zooming a logo looks cheap. */
.hero__slide--zoom.is-active img { animation: heroDrift 4.5s ease-out both; }
@keyframes heroDrift { from { transform: scale(1) } to { transform: scale(1.05) } }

/* Darkens the middle, where the words are, and leaves the edges of the
   photograph alone. A flat overlay would dull the whole image. */
.hero__slide--zoom::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 50%,
              rgba(20, 24, 28, .46) 0%, rgba(20, 24, 28, .22) 60%,
              rgba(20, 24, 28, .06) 100%);
}

.hero__caption {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 0 6vw; text-align: center;
  opacity: 0; transform: translateY(20px);
  transition: opacity .6s ease .25s, transform .6s cubic-bezier(.2, .7, .3, 1) .25s;
}
.hero__slide.is-active .hero__caption { opacity: 1; transform: none; }
.hero__caption span {
  display: block; max-width: 22ch;
  color: #fff;
  font-size: clamp(23px, 3.5vw, 50px);
  font-weight: 700; line-height: 1.14;
  text-transform: uppercase; letter-spacing: 1.5px;
  text-shadow: 0 2px 26px rgba(0, 0, 0, .5);
}
/* The same accent rule the section titles use, so the hero belongs to the
   rest of the page rather than looking like a stock slider. */
.hero__caption span::after {
  content: ""; display: block; width: 58px; height: 3px;
  margin: clamp(14px, 2vw, 24px) auto 0; background: var(--accent);
}

.hero__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0; border-radius: 50%;
  background: rgba(28, 33, 38, .42); border: 0; cursor: pointer;
  /* Always present, not hover-only: a touch screen has no hover, and a
     keyboard user needs to be able to reach them. */
  opacity: .5; transition: opacity .18s ease, background .18s ease;
}
.hero:hover .hero__arrow, .hero__arrow:focus-visible { opacity: 1; }
.hero__arrow svg { width: 22px; height: 22px; fill: #fff; }
.hero__arrow:hover { background: var(--accent); opacity: 1; }
.hero__arrow--prev { left: clamp(10px, 2vw, 30px); }
.hero__arrow--next { right: clamp(10px, 2vw, 30px); }

.hero__dots {
  position: absolute; left: 0; right: 0; bottom: 18px; z-index: 2;
  display: flex; justify-content: center; align-items: center; gap: 9px;
}
.hero__dots button {
  width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%;
  cursor: pointer;
  /* A ring keeps the dots legible on both the white first slide and the
     dark photographs that follow. */
  background: rgba(47, 53, 59, .32);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .8);
  transition: background .25s ease, width .25s ease, border-radius .25s ease;
}
.hero__dots button[aria-selected="true"] {
  width: 28px; border-radius: 5px; background: var(--accent);
}

/* On a phone the arrows sit over the wordmark, so keep them small and hard
   against the edge. They cannot be dropped: the slideshow cross-fades rather
   than scrolls, so there is nothing to swipe. */
@media (max-width: 520px) {
  .hero__arrow { width: 34px; height: 34px; left: 4px; }
  .hero__arrow--next { left: auto; right: 4px; }
  .hero__arrow svg { width: 17px; height: 17px; }
  .hero__dots { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide, .hero__caption { transition: none; }
  .hero__slide--zoom.is-active img { animation: none; }
}

/* --- Feature trio (homepage) --------------------------------------------
   The Drupal site drew these three with an icon font. Inline outline SVG in
   the same style instead: same look, one request fewer, and nothing to keep
   patched. */
.feature__icon {
  display: block; margin-bottom: 18px;
  color: var(--ink-dark);
}
.feature__icon svg { width: 50px; height: 50px; }
.feature h2, .feature h3 {
  font-size: 22px; text-transform: uppercase; font-weight: 700;
  color: var(--ink-heading); margin-bottom: .5em;
}
.feature p { margin: 0; }

/* --- Service cards ------------------------------------------------------ */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.service {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.service:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); }
.service__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--band); }
.service__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.service:hover .service__media img { transform: scale(1.04); }
.service__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.service__body h3 {
  font-size: 20px; text-transform: uppercase; letter-spacing: .3px; margin: 0 0 10px;
}
.service__body h3 a { color: var(--ink-heading); }
.service:hover .service__body h3 a { color: var(--accent-ink); text-decoration: none; }
.service__body p { margin: 0 0 14px; font-size: 16px; }
.service__more {
  margin: auto 0 0; color: var(--accent-ink);
  font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: .4px;
}

/* --- Client logos --------------------------------------------------------
   A horizontal scroller, six across, like the carousel the Drupal site had.
   It is swipeable and keyboard scrollable with no JavaScript at all; site.js
   only adds the dots and the slow auto-advance on top of it. */
.logos { position: relative; }
.logos__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.logos__viewport::-webkit-scrollbar { display: none; }

.logos__track { display: flex; list-style: none; margin: 0; padding: 0; }
.logos__track li {
  flex: 0 0 calc(100% / 6);
  scroll-snap-align: start;
  margin: 0; padding: 6px 18px;
}
.logos__track a {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 104px;
}
.logos img {
  max-width: 100%; max-height: 84px; width: auto; height: auto;
  object-fit: contain;
  transition: transform .25s ease;
}
.logos a:hover img { transform: scale(1.07); }

.logos__dots {
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: 10px; margin-top: 30px;
}
.logos__dots button {
  width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%;
  background: #d7dde2; cursor: pointer;
  transition: background .25s ease, width .25s ease, border-radius .25s ease;
}
.logos__dots button:hover { background: var(--ink-muted); }
.logos__dots button[aria-selected="true"] {
  width: 28px; border-radius: 5px; background: var(--accent);
}

@media (max-width: 1199px) { .logos__track li { flex-basis: 20%; } }
@media (max-width: 991px)  { .logos__track li { flex-basis: 25%; padding: 6px 14px; } }
@media (max-width: 767px)  { .logos__track li { flex-basis: 33.3333%; padding: 6px 10px; } }

/* --- Split feature (image beside text) ---------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.split__media { position: relative; min-height: 320px; background: var(--band); overflow: hidden; }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split__content { display: flex; align-items: center; padding: 50px 40px; }
.split__content > div { width: 100%; max-width: 60ch; line-height: 1.65; }
.split--reverse .split__media { order: 2; }
.split--reverse .split__content { order: 1; justify-content: flex-end; }

/* --- Prose -------------------------------------------------------------- */
/* Capped to a comfortable measure. Across the full 1170px container a line
   ran to about 144 characters; 60-75 is where reading stays easy. */
.prose { font-size: 18px; line-height: 1.65; max-width: 72ch; hyphens: auto; }
.prose p, .prose ul, .prose ol, .prose table { margin: 0 0 1.15em; }
.prose > :last-child { margin-bottom: 0; }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose li { margin-bottom: .5em; }
.prose h2 { font-size: 26px; text-transform: uppercase; margin: 1.8em 0 .5em; }
.prose h3 { font-size: 21px; text-transform: uppercase; margin: 1.6em 0 .4em; }
.prose ul { padding-left: 1.1em; }
.prose ul.links { list-style: none; padding-left: 0; }
.prose ul.links li { padding-left: 18px; position: relative; }
.prose ul.links li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; background: var(--accent);
}
.prose img { margin: 1.2em 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2em 0; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }

/* --- Contact page --------------------------------------------------------- */
.contact-cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 40px; align-items: start; margin-top: 34px;
}

.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.contact-list li { display: flex; gap: 18px; align-items: flex-start; margin: 0; }
.contact-list__icon {
  flex: 0 0 46px; display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(110, 204, 217, .14); color: var(--accent-dark);
}
.contact-list__icon svg { width: 22px; height: 22px; fill: none; }
/* The LinkedIn mark is a solid glyph, not an outline like the others. */
.contact-list__icon svg:not([stroke]) { fill: currentColor; }
.contact-list h2 {
  margin: 0 0 2px; font-size: 14px; text-transform: uppercase;
  letter-spacing: .8px; color: var(--ink-soft); font-weight: 700;
}
.contact-list p { margin: 0; font-size: 17px; line-height: 1.5; }
.contact-list__big { font-size: 22px; font-weight: 700; }

.contact-note {
  margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 15px; color: var(--ink-soft);
}


/* --- Privacy statement ---------------------------------------------------- */
/* A summary in plain language above the formal text: most visitors only want
   to know whether they are being tracked. */
.privacy-summary {
  margin-top: 34px; padding: 30px 32px;
  background: var(--band); border-left: 3px solid var(--accent);
}
.privacy-summary h2 {
  margin: 0 0 16px; font-size: 20px; text-transform: uppercase;
}
.privacy-summary ul { margin: 0; padding-left: 1.1em; max-width: 72ch; }
.privacy-summary li { margin-bottom: .6em; line-height: 1.6; }
.privacy-summary li:last-child { margin-bottom: 0; }

/* The processing overview is four columns wide, so it sits outside the 72ch
   reading measure and gets the container instead. On a narrow screen it
   scrolls sideways rather than collapsing into four unreadable slivers. */
.privacy-table { overflow-x: auto; margin: 0 0 1.8em; }
.privacy-table table { width: 100%; border-collapse: collapse; min-width: 720px; }
.privacy-table th, .privacy-table td {
  border: 1px solid var(--line); padding: 12px 14px;
  text-align: left; vertical-align: top; font-size: 16px; line-height: 1.5;
}
.privacy-table th {
  background: var(--white); color: var(--ink-heading);
  font-size: 13px; text-transform: uppercase; letter-spacing: .6px;
}

@media (max-width: 767px) {
  .contact-cols { grid-template-columns: 1fr; gap: 34px; }
  .privacy-summary { padding: 24px 20px; }
}

/* --- Call-to-action band ------------------------------------------------ */
.cta-band {
  position: relative;
  padding: 80px 0; text-align: center;
  background: var(--ink-dark) center/cover no-repeat; background-attachment: scroll;
  color: #fff;
}
.cta-band::after { content: ""; position: absolute; inset: 0; background: rgba(47,53,59,.66); }
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; font-size: 28px; text-transform: uppercase; }
.cta-band p { color: rgba(255,255,255,.95); font-size: 18px; max-width: 640px; margin: 0 auto 18px; }
.btn--onAccent { background: #fff; border-color: #fff; color: var(--ink-dark); }
.btn--onAccent:hover, .btn--onAccent:focus { background: var(--ink-dark); border-color: var(--ink-dark); color: #fff; }

/* --- Footer ------------------------------------------------------------- */
.site-footer { background: var(--ink-dark); color: #aab3bb; font-size: 15px; }
.site-footer a { color: var(--accent-soft); }
.footer-main {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px;
  padding: 50px 0;
}
.site-footer h2 {
  font-size: 15px; text-transform: uppercase; color: var(--accent);
  letter-spacing: .5px; margin: 0 0 12px; font-weight: 700;
}
.site-footer .footer-logo { width: 190px; margin-left: auto; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 18px 0; border-top: 1px solid rgba(255,255,255,.08); font-size: 14px;
}
.footer-bottom nav { display: flex; gap: 22px; flex-wrap: wrap; }
/* Belgian company law requires the company number on the website, so it goes
   in the footer, on every page. */
.footer-legal { margin: 0; }
.footer-legal__nr { white-space: nowrap; }

/* --- Back to top -------------------------------------------------------- */
.to-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: 42px; height: 42px; display: none;
  align-items: center; justify-content: center;
  background: var(--ink-dark); color: #fff; border: 0; cursor: pointer;
  opacity: .85;
}
.to-top:hover { opacity: 1; background: var(--accent); }
.to-top.is-visible { display: flex; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 991px) {
  .grid--3, .services { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .split--reverse .split__content { order: 0; justify-content: flex-start; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .site-footer .footer-logo { margin-left: 0; }
}

/* Six Dutch compounds of eighteen letters do not fit on one line below about
   1095px, and abbreviating them is not an option: "sloopopvolgingsplan" and
   "asbestattest" are legal terms, not labels. Measured: the row wraps from
   1094px down. So the menu collapses there rather than spending a 320px-wide
   band of viewport widths on a second row. */
@media (max-width: 1094px) {
  :root { --nav-h: 54px; }
  .nav-toggle { display: block; }
  /* The container collapses around the hidden menu, so drop its positioning
     context and anchor the search toggle to the bar itself. */
  .mainnav > .container { position: static; display: block; padding: 0; }
  .search-toggle { top: 7px; right: 8px; transform: none; }
  .mainnav ul { display: none; flex-direction: column; }
  .mainnav ul.is-open { display: flex; }
  /* The bar is sticky, so the open menu must not grow past the window: a
     sticky box taller than the viewport cannot be scrolled to the end. */
  .mainnav ul.is-open { max-height: calc(100vh - var(--nav-h)); overflow-y: auto; }
  @supports (height: 100dvh) {
    .mainnav ul.is-open { max-height: calc(100dvh - var(--nav-h)); }
  }
  .mainnav a { padding: 13px 20px; border-top: 1px solid rgba(255,255,255,.07); }
  #primary-menu > li > a::before { display: none; }
  #primary-menu > li.has-sub { display: flex; flex-wrap: wrap; align-items: center; }
  #primary-menu > li.has-sub > a { flex: 1; }
  .sub-toggle {
    align-self: stretch; padding: 0 22px; margin-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .07);
  }
}

@media (max-width: 767px) {
  .section { padding: 40px 0; }
  .topbar { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 0; }
  .grid--3, .grid--2, .services { grid-template-columns: 1fr; }
  .split__content { padding: 34px 20px; }
  .footer-main { grid-template-columns: 1fr; }
  .section-title h1, .section-title h2 { font-size: 24px; }
}

/* --- Dropdown submenus ---------------------------------------------------
   A plain list under the item it belongs to. Anchored left, a panel on one of
   the right-hand items would run past the edge of the window and push the
   page wider, so those open leftwards from their own right edge instead. The
   menu is centred inside the container, so the three rightmost items are the
   ones that need it, at every width where this layout is used at all. */
/* Closed means display:none, never visibility:hidden: a hidden-but-laid-out
   panel still counts towards the page width. The layout and the animation sit
   on the panel itself so only `display` is switched; an animation on a
   display:none element does not start until it is shown. */
.mainnav li { position: relative; }
.mainnav .submenu {
  position: absolute; left: 0; top: 100%; z-index: 70;
  display: none;
  min-width: 290px; max-width: 92vw;
  margin: 0; padding: 8px 0;
  background: #262b30; border-top: 2px solid var(--accent);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .32);
  animation: submenuIn .2s cubic-bezier(.2, .7, .3, 1) both;
}
/* The rightmost items would otherwise widen the page when opened. Confined
   to the width where the bar is horizontal: an id in the selector outranks
   the class that opens a panel, so left loose it kept the stacked submenus
   inside the mobile menu shut. */
@media (min-width: 1095px) {
  #primary-menu > li:nth-last-child(-n+3) > .submenu { left: auto; right: 0; }
}
@keyframes submenuIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* Opened by the disclosure button, whatever the input device. */
.mainnav li.is-open > .submenu { display: block; }
/* Opened by hovering, but only where a pointer can really hover. On a touch
   screen the tap that counts as a hover would open a panel the visitor then
   has no way to dismiss. */
@media (hover: hover) {
  .mainnav li:hover > .submenu { display: block; }
}
/* Without JavaScript there is no working disclosure button, so focus alone
   has to open the panel. With it, the button is authoritative: otherwise a
   panel could not be closed again while its own button still had focus. */
html:not(.has-js) .mainnav li:focus-within > .submenu { display: block; }
.mainnav .submenu a {
  padding: 10px 18px; font-size: 13px; letter-spacing: .4px;
  color: #c9d1d8; text-transform: uppercase; white-space: normal;
  border-left: 2px solid transparent; transition: color .15s ease, border-color .15s ease;
}
.mainnav .submenu a:hover, .mainnav .submenu a:focus {
  color: #fff; background: rgba(255, 255, 255, .05); border-left-color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .mainnav .submenu { animation: none; }
}

/* --- Split section variants --------------------------------------------- */
.split--dark { background: var(--ink-dark); color: #c3cbd2; }
.split--dark h2, .split--dark h3 { color: #fff; }
.split--light { background: var(--white); }

/* --- Prose lead --------------------------------------------------------- */
.prose .lead {
  display: block; margin-bottom: .4em;
  color: var(--accent-ink); font-weight: 700; text-transform: uppercase;
  font-size: 16px; letter-spacing: .4px;
}

/* --- Tabs (rendered as side-by-side panels, no script) ------------------- */
.panels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.panel { border: 1px solid var(--line); background: var(--white); }
.panel > h3 {
  margin: 0; padding: 13px 18px;
  /* Dark on the brand cyan, like the call-to-action band: white on it is
     1.86:1. */
  background: var(--accent); color: var(--ink-dark);
  font-size: 16px; text-transform: uppercase; letter-spacing: .4px; text-align: center;
}
.panel__body { padding: 20px 18px; }
.panel__body > :last-child { margin-bottom: 0; }

/* --- CTA band columns ---------------------------------------------------- */
.cta-band--accent { background: var(--accent); }
.cta-band--accent::after { background: transparent; }
/* White on this cyan is 1.86:1. Dark text on the same band is 6.67:1, and
   keeps the colour the brand is recognised by. */
.cta-band--accent h2,
.cta-band--accent p { color: var(--ink-dark); }
.cta-band__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; text-align: left; }
.cta-band--accent .cta-band__cols p,
.cta-band--accent .cta-band__cols h2,
.cta-band--accent .cta-band__cols h3 { color: var(--ink-dark); }
.cta-band__cols p { color: rgba(255,255,255,.94); }

@media (max-width: 991px) {
  .panels, .cta-band__cols { grid-template-columns: 1fr; }
}
/* Stacked inside the open menu, so none of the panel behaviour applies.
   Each one is collapsed until its caret is pressed: expanded, the five
   submenus add twenty-six more items to scroll past. Without JavaScript
   they stay open, so nothing becomes unreachable. */
@media (max-width: 1094px) {
  .mainnav .submenu {
    position: static; display: none; padding: 0;
    min-width: 0; max-width: none; left: auto; right: auto;
    /* A third flex item of the parent item: it has to take a line of its own
       rather than sit beside the link and the caret. */
    width: 100%; flex-basis: 100%;
    background: #262b30; border-top: 0; box-shadow: none; animation: none;
  }
  .mainnav li.is-open > .submenu { display: block; }
  html:not(.has-js) .mainnav .submenu { display: block; }
  .mainnav .submenu a { padding-left: 34px; border-left: 0; }
}

/* --- Contact map --------------------------------------------------------- */
/* Click-to-load: nothing is requested from Google, and no cookie is set,
   until the visitor asks for the map. That keeps the page free of consent
   requirements while still offering the map. */
.map { position: relative; min-height: 320px; height: 100%; background: var(--band); border: 1px solid var(--line); }
.map__load {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; width: 100%; height: 100%; min-height: 320px; padding: 28px;
  background: none; border: 0; cursor: pointer; font: inherit; text-align: center;
  color: var(--ink-body);
}
.map__load:hover { background: #f1f4f6; }
.map__pin { color: var(--accent-ink); font-size: 30px; line-height: 1; }
.map__load strong { color: var(--ink-heading); font-size: 19px; }
.map__cta {
  margin-top: 6px; padding: 8px 20px;
  border: 1px solid var(--accent-ink); color: var(--accent-ink);
  font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: .3px;
}
.map__load:hover .map__cta { background: var(--accent-ink); color: #fff; }
.map__load small { max-width: 34ch; color: var(--ink-body); font-size: 13px; line-height: 1.4; }
.map iframe { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; }
.map__link { margin: 12px 0 0; font-size: 15px; }

/* --- Motion ------------------------------------------------------------- */
/* Deliberately no scroll-reveal animation. The old theme hid whole sections
   until WOW.js fired, which left "Onze diensten" permanently invisible to
   visitors. Content here is never hidden by script. */

@media print {
  .site-header, .mainnav, .site-footer, .to-top, .nav-toggle { display: none; }
  body { color: #000; font-size: 12pt; }
}

/* --- Vacancies (jobs page) ------------------------------------------------
   Rendered by site.js from /vacatures.json, which the beheerpaneel writes.
   The empty state below is in the HTML, so it is what shows without script,
   without that file, or when there is genuinely nothing open. */
.vacatures { display: grid; gap: 20px; }

.vac-empty {
  background: var(--white); border: 1px solid var(--line);
  padding: 54px 30px 46px; text-align: center; box-shadow: var(--shadow);
}
.vac-empty__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; margin-bottom: 22px; border-radius: 50%;
  background: rgba(110, 204, 217, .14);
}
.vac-empty__mark svg { width: 32px; height: 32px; fill: var(--accent-dark); }
.vac-empty h2 { font-size: 26px; text-transform: uppercase; margin: 0 0 16px; }
.vac-empty p { margin: 0 auto 14px; max-width: 60ch; font-size: 18px; line-height: 1.65; }
.vac-empty__acts {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  margin-top: 28px; margin-bottom: 0;
}

.btn--quiet { border-color: var(--line); color: var(--ink-body); }
.btn--quiet:hover, .btn--quiet:focus {
  background: var(--ink-heading); border-color: var(--ink-heading); color: #fff;
}

.vac-count {
  margin: 0 0 8px; font-size: 15px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--ink-soft);
}

.vac {
  background: var(--white); border: 1px solid var(--line);
  border-left: 4px solid var(--accent); padding: 28px 30px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.vac:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.vac__title { font-size: 24px; text-transform: uppercase; margin: 0 0 10px; }
.vac__meta {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 16px; padding: 0;
}
.vac__meta li {
  font-size: 13px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--ink-body); background: var(--band);
  border: 1px solid var(--line); padding: 3px 11px;
}
.vac__sum { margin: 0 0 16px; font-size: 18px; line-height: 1.65; max-width: 68ch; }

.vac__more { margin: 0 0 18px; border-top: 1px solid var(--line); }
.vac__more summary {
  cursor: pointer; padding: 14px 0 0; list-style: none;
  font-size: 14px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--accent-dark);
}
.vac__more summary::-webkit-details-marker { display: none; }
.vac__more summary::after { content: " \25BE"; }
.vac__more[open] summary::after { content: " \25B4"; }
.vac__more summary:hover { color: var(--ink-heading); }
.vac__body { margin-top: 14px; font-size: 17px; }
.vac__apply { margin: 0; }

@media (max-width: 767px) {
  .vac { padding: 24px 20px; }
  .vac-empty { padding: 40px 20px 34px; }
  .vac-empty h2 { font-size: 22px; }
}