/* ============================================================================
   Codesense-- styles.css (één plain CSS-bestand, geen build nodig)
   Dit eerste blok zijn de utility-klassen (voorheen via Tailwind, nu
   rechtstreeks ingebouwd). Gegenereerd -- niet handmatig bewerken.
   De eigen Codesense-stijlen staan onder de scheidingslijn verderop.
   ============================================================================ */

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

.pointer-events-none {
  pointer-events: none;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.relative {
  position: relative;
}

.left-0 {
  left: 0px;
}

.right-0 {
  right: 0px;
}

.top-0 {
  top: 0px;
}

.z-10 {
  z-index: 10;
}

.z-50 {
  z-index: 50;
}

.z-\[60\] {
  z-index: 60;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-20 {
  margin-bottom: 5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mt-16 {
  margin-top: 4rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-8 {
  margin-top: 2rem;
}

.block {
  display: block;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 2.75rem;
}

.h-20 {
  height: 5rem;
}

.h-3 {
  height: 0.75rem;
}

.h-3\.5 {
  height: 0.875rem;
}

.h-4 {
  height: 1rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-8 {
  height: 2rem;
}

.h-\[3px\] {
  height: 3px;
}

.h-full {
  height: 100%;
}

.w-10 {
  width: 2.5rem;
}

.w-11 {
  width: 2.75rem;
}

.w-3 {
  width: 0.75rem;
}

.w-3\.5 {
  width: 0.875rem;
}

.w-4 {
  width: 1rem;
}

.w-5 {
  width: 1.25rem;
}

.w-6 {
  width: 1.5rem;
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-5xl {
  max-width: 64rem;
}

.max-w-6xl {
  max-width: 72rem;
}

.max-w-xs {
  max-width: 20rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.shrink {
  flex-shrink: 1;
}

.origin-left {
  transform-origin: left;
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.resize {
  resize: both;
}

.list-disc {
  list-style-type: disc;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

.gap-y-2 {
  row-gap: 0.5rem;
}

.gap-y-3 {
  row-gap: 0.75rem;
}

.gap-y-4 {
  row-gap: 1rem;
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.overflow-hidden {
  overflow: hidden;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.border {
  border-width: 1px;
}

.border-l {
  border-left-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}

.border-white\/5 {
  border-color: rgb(255 255 255 / 0.05);
}

.bg-brand-lime {
  --tw-bg-opacity: 1;
  background-color: rgb(2 9 40 / var(--tw-bg-opacity, 1));
}

.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}

.bg-white\/5 {
  background-color: rgb(255 255 255 / 0.05);
}

.p-10 {
  padding: 2.5rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.pb-10 {
  padding-bottom: 2.5rem;
}

.pb-12 {
  padding-bottom: 3rem;
}

.pb-16 {
  padding-bottom: 4rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-32 {
  padding-bottom: 8rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

.pl-5 {
  padding-left: 1.25rem;
}

.pt-28 {
  padding-top: 7rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.text-center {
  text-align: center;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-normal {
  font-weight: 400;
}

.uppercase {
  text-transform: uppercase;
}

.normal-case {
  text-transform: none;
}

.leading-relaxed {
  line-height: 1.625;
}

.tracking-normal {
  letter-spacing: 0em;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.text-brand-dark {
  --tw-text-opacity: 1;
  color: rgb(245 241 234 / var(--tw-text-opacity, 1));
}

.text-brand-lime {
  --tw-text-opacity: 1;
  color: rgb(2 9 40 / var(--tw-text-opacity, 1));
}

.text-slate-300 {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}

.text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.text-slate-600 {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}

.text-slate-700 {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.underline {
  text-decoration-line: underline;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.opacity-60 {
  opacity: 0.6;
}

.shadow-\[0_0_18px_rgba\(79\2c 174\2c 126\2c 0\.30\)\] {
  --tw-shadow: 0 0 18px rgba(79,174,126,0.30);
  --tw-shadow-colored: 0 0 18px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_18px_rgba\(79\2c 174\2c 126\2c 0\.30\)\] {
  --tw-shadow: 0 0 18px rgba(79,174,126,0.30);
  --tw-shadow-colored: 0 0 18px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.file\:mr-4::file-selector-button {
  margin-right: 1rem;
}

.file\:rounded-full::file-selector-button {
  border-radius: 9999px;
}

.file\:border-0::file-selector-button {
  border-width: 0px;
}

.file\:bg-white\/10::file-selector-button {
  background-color: rgb(255 255 255 / 0.1);
}

.file\:px-4::file-selector-button {
  padding-left: 1rem;
  padding-right: 1rem;
}

.file\:py-1::file-selector-button {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.file\:text-xs::file-selector-button {
  font-size: 0.75rem;
  line-height: 1rem;
}

.file\:font-bold::file-selector-button {
  font-weight: 700;
}

.file\:text-white::file-selector-button {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.placeholder\:text-slate-500::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.placeholder\:text-slate-500::placeholder {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}

.hover\:border-brand-lime\/60:hover {
  border-color: rgb(2 9 40 / 0.6);
}

.hover\:bg-white\/15:hover {
  background-color: rgb(255 255 255 / 0.15);
}

.hover\:text-brand-lime:hover {
  --tw-text-opacity: 1;
  color: rgb(2 9 40 / var(--tw-text-opacity, 1));
}

.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:file\:bg-white\/20::file-selector-button:hover {
  background-color: rgb(255 255 255 / 0.2);
}

.focus\:border-brand-lime\/60:focus {
  border-color: rgb(2 9 40 / 0.6);
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

@media (min-width: 640px) {
  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:justify-start {
    justify-content: flex-start;
  }

  .sm\:text-right {
    text-align: right;
  }
}

@media (min-width: 768px) {
  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .md\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-9 {
    height: 2.25rem;
  }

  .md\:max-w-\[760px\] {
    max-width: 760px;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Kaart-grids in de content pas vanaf 1024px naast elkaar: tussen 768 en
   1024px is de kolom (met de logo/iconen-marges) te smal voor 2-3 kaarten
   naast elkaar — daar blijft de gestapelde mobile-weergave gelden. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  main .md\:grid-cols-2,
  main .md\:grid-cols-3 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  /* De grids vallen hier terug op één kolom, dus ook de col-span op de kaarten
     moet terug naar één. Zonder dit forceert een span-3/span-2 kaart impliciete
     kolomtracks aan, waardoor de overige kaarten elkaar overlappen. */
  main .md\:grid-cols-2 > .md\:col-span-2,
  main .md\:grid-cols-3 > .md\:col-span-2,
  main .md\:grid-cols-3 > .md\:col-span-3 {
    grid-column: auto;
  }
}

@media (min-width: 768px) {

  .md\:items-start {
    align-items: flex-start;
  }

  .md\:justify-end {
    justify-content: flex-end;
  }

  .md\:gap-3 {
    gap: 0.75rem;
  }

  .md\:justify-self-start {
    justify-self: start;
  }

  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .md\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ============================================================================
   EINDE utility-klassen -- hieronder de eigen Codesense-stijlen.
   ============================================================================ */

html, body { overflow-x: clip; }
html { overflow-y: visible; }
body { background-color: #F5F1EA; color: #4B5563; margin: 0; font-family: var(--font-basis); position: relative; isolation: isolate; overflow-x: hidden; }

h1 { font-family: var(--font-basis); font-variant: small-caps; font-weight: 900; font-size: var(--tekst-hero); line-height: 1.1; }
h2 { font-family: var(--font-basis); font-variant: small-caps; font-weight: 900; font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1.1; }
h3 { font-family: var(--font-basis); font-variant: small-caps; font-weight: 800; font-size: clamp(1.125rem, 3vw, 1.5rem); line-height: 1.2; }
h4 { font-family: var(--font-basis); font-variant: small-caps; font-weight: 800; font-size: 1rem; line-height: 1.2; }

/* Kaart-titels overal identiek aan de dienstenkaarten op de homepage:
   Inter small-caps, 1.5rem, gewicht 700 (!important nodig omdat
   utility-classes als .text-2xl/.font-bold anders per kaart verschillen).
   CTA-bannerkoppen (h2 met .md:text-3xl) behouden hun grotere maat via de
   latere hiërarchie-regel. */
main .cs-card h2,
main .cs-card h3,
main .cs-card h4 { font-size: var(--tekst-bloktitel) !important; font-weight: 700 !important; }

/* Ook sectie-/CTA-koppen die BINNEN een kaart staan (banner-kaarten zoals
   "Begin met een gesprek…") volgen de kaarttitel-stijl, zodat alles met een
   kaartrand dezelfde titelmaat heeft. */
main .cs-card h2.md\:text-3xl { font-size: var(--tekst-bloktitel) !important; font-weight: 700 !important; }

/* Eyebrow-divs die als kaarttitel dienen ("Wat wij van jou vragen"):
   zelfde stijl als de andere kaarttitels i.p.v. 12px uppercase. */
main .cs-card > div.text-xs.uppercase {
    font-family: var(--font-basis);
    font-variant: small-caps;
    text-transform: none !important;
    font-size: var(--tekst-bloktitel) !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    line-height: 1.2;
}
body.theme-light main .cs-card > div.text-xs.uppercase { color: #1F3A5F !important; }
body.theme-dark main .cs-card > div.text-xs.uppercase { color: #ffffff !important; }

/* Leestekens in small-caps-koppen: een volwaardig vraagteken torent boven
   de kleinkapitalen uit — schaal het mee naar kleinkapitaal-hoogte. */
.cs-sc-punct { font-size: 0.78em; }

/* Inner-card titels (waarden en tijdlijn op over-ons, 404-suggesties) zijn
   divs i.p.v. headings: zelfde titel-familie — Inter small-caps 700 — maar
   een maat kleiner dan de kaart-titels. */
.cs-inner-card > .font-bold {
    font-family: var(--font-basis);
    font-variant: small-caps;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Alle leestekst op één maat: 16px (Inter leest door zijn hogere x-hoogte
   als het vroegere 17px Open Sans). Knoppen en badges houden hun eigen
   kleinere maat. */
main .text-base { font-size: var(--tekst-body) !important; }
main p.text-sm, main ul.text-sm { font-size: var(--tekst-body) !important; }
p { line-height: 1.6; }

/* Menu, navigation, labels, buttons — always Inter (sans-serif) */
nav, header nav a, header nav button,
.cs-nav-item, .cs-nav-dropdown, .cs-nav-dropdown a,
.cs-mobile-sub,
button, input, select, textarea,
label, [role="button"],
.cs-contact-tab,
[class*="label"] { font-family: var(--font-basis); }

/* British Racing Green theme — solid color, no gradient */
:root {
    /* === Typografie-tokens: de tekstladder van de site ===================
       Eén plek om maten en het basisfont te beheren; alle regels hieronder
       verwijzen naar deze variabelen. */
    --font-basis: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --tekst-hero: clamp(2rem, 6vw, 3.5rem);
    --tekst-sectiekop: clamp(2rem, 3vw, 2.625rem);
    --tekst-bloktitel: 1.5rem;
    --tekst-label: 20px;          /* lijn-labels (.diensten, zo werken we) */
    --tekst-body: 1rem;           /* alle leestekst */
    --tekst-subtitel: 0.9375rem;  /* SPRINT-sublabels */

    --brand-green: #020928;
    --brand-green-light: #4FAE7E;
    --brand-mint: #020928;
    --brand-mint-soft: rgba(2, 9, 40, 0.15);
    --brand-mint-dark: #4FAE7E; /* darker mint for readable text */
    --brand-gold: #020928; /* legacy alias */
    --brand-gold-soft: rgba(2, 9, 40, 0.15);
    --brand-gradient: #020928;
    --brand-gradient-soft: #020928;
}

html {
    background: #F5F1EA;
}

body {
    background: #F5F1EA;
}

/* Big background hexagons (replaces honeycomb tile) */
.bg-hexagons {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -2;
    overflow: hidden;
}
.bg-hex {
    position: absolute;
    pointer-events: none;
    will-change: transform;
}
.bg-hex svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: rgba(2, 9, 40, 0.05);
}
.bg-hex--1 { display: none; }
.bg-hex--2 { top: 12%; right: -120px; width: 480px; height: 528px; transform: rotate(12deg); }
.bg-hex--3 { display: none; }
.bg-hex--4 { top: 45%; right: 4vw;    width: 320px; height: 352px; transform: rotate(-6deg); }
.bg-hex--5 { display: none; }
.bg-hex--6 { top: 72%; right: -140px; width: 540px; height: 594px; transform: rotate(-12deg); }
.bg-hex--7 { display: none; }
.bg-hex--8 { display: none; }
/* All hexagons use solid British Racing Green */
.bg-hex--2 svg { fill: rgba(79, 174, 126, 0.05); }
.bg-hex--3 svg { fill: rgba(79, 174, 126, 0.05); }
.bg-hex--4 svg { fill: rgba(79, 174, 126, 0.05); }
.bg-hex--5 svg { fill: rgba(79, 174, 126, 0.05); }
.bg-hex--6 svg { fill: rgba(79, 174, 126, 0.05); }
.bg-hex--7 svg { fill: rgba(79, 174, 126, 0.05); }
.bg-hex--8 svg { fill: rgba(79, 174, 126, 0.05); }

/* Anchor hexagons (top + bottom of page, prominent) */
.hex-anchor {
    position: absolute;
    pointer-events: none;
    z-index: -1;
}
.hex-anchor svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: #4FAE7E;
    opacity: 0.85;
    filter: drop-shadow(0 0 30px rgba(2, 9, 40, 0.25));
}
.hex-anchor--top {
    top: 80px;
    left: 0;
    width: clamp(180px, 26vw, 480px);
    height: clamp(198px, 28.6vw, 528px);
    transform: translateX(-60%) rotate(-10deg);
}
.hex-anchor--bottom {
    bottom: -160px;
    left: 0;
    width: clamp(220px, 30vw, 540px);
    height: clamp(242px, 33vw, 594px);
    transform: translateX(-60%) rotate(-10deg);
}
@media (max-width: 1100px) {
    .hex-anchor--top { transform: translateX(-78%) rotate(-10deg); }
    .hex-anchor--bottom { transform: translateX(-78%) rotate(-10deg); }
}
@media (max-width: 768px) {
    .hex-anchor--top { transform: translateX(-90%) rotate(-10deg); }
    .hex-anchor--bottom { transform: translateX(-90%) rotate(-10deg); }
}
.hex-anchor--bottom svg {
    fill: #020928;
    opacity: 0.75;
    filter: drop-shadow(0 0 30px rgba(2, 9, 40, 0.25));
}

/* 2. Card Style */
.cs-card {
    background: #ffffff;
    border: 1px solid rgba(2, 9, 40, 0.12);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.08),
        0 0 18px rgba(2, 9, 40, 0.05),
        inset 0 1px 0 rgba(2, 9, 40, 0.06);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: start;
}

/* Link-kaarten dragen de Tailwind-utility .block (display: block), die de
   grid-layout hierboven zou overschrijven — icoon en titel horen ook daar
   naast elkaar. */
a.cs-card.block { display: grid; }

/* Icon container: stays in first column, first row */
.cs-card > div:has(> svg) {
    grid-column: 1;
    grid-row: 1;
    flex-shrink: 0;
    align-self: center;
    margin-bottom: 0 !important;   /* mb-4 uit de markup zou het centreren scheeftrekken */
}

/* Headings: stay in second column, first row, vertically centered on the icon */
.cs-card > h2,
.cs-card > h3,
.cs-card > h4 {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin-bottom: 0 !important;   /* mb-3 uit de markup idem */
}

/* All other content (p, div, form, ul, …) spans both columns — only the
   icon (col 1) and the heading (col 2) share the first row. */
.cs-card > :not(h2):not(h3):not(h4):not(div:has(> svg)) {
    grid-column: 1 / -1;
}

/* Kaarten zonder icoon (CTA-banners e.d.): titel over de volle breedte,
   anders springt hij in door de lege icoonkolom + gap. */
.cs-card:not(:has(> div > svg)) > h2,
.cs-card:not(:has(> div > svg)) > h3,
.cs-card:not(:has(> div > svg)) > h4 {
    grid-column: 1 / -1;
}

/* Overlay variant: minimal blur, photos clearly visible through */

/* Push badge-row of CTA naar onderaan. !important nodig om Tailwind's mt-6 te overriden.
   padding-top zorgt voor minimum-witruimte boven het element, ook als margin-top: auto naar 0 wordt geknepen. */
.cs-card > div:has(> .cs-tech-badge) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-start;
    padding-top: 1.5rem;
}
.cs-card > .cs-card__cta {
    margin-top: auto !important;
    padding-top: 1.5rem;
}
/* Wanneer een card BOTH badges + CTA heeft, krijgt de CTA een kleine top-margin tov de badges
   en geen padding (badges geven al voldoende top-spacing). */
.cs-card > div:has(> .cs-tech-badge) ~ .cs-card__cta {
    margin-top: 1.5rem !important;
    padding-top: 0;
}

/* Hover: subtiele lift + diepere schaduw; het kaart-icoon groeit licht mee.
   Geen accentlijn en geen randwijziging — de rand blijft zoals in rust. */
.cs-card::before { content: none; }

.cs-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.10),
        0 0 22px rgba(79, 174, 126, 0.10),
        inset 0 1px 0 rgba(2, 9, 40, 0.06);
}

.cs-card > div:has(> svg) svg {
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cs-card:hover > div:has(> svg) svg {
    transform: scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
    .cs-card:hover { transform: none; }
    .cs-card:hover > div:has(> svg) svg { transform: none; }
}

/* Title color shifts to brand gradient on hover (matches the top line) */
.cs-card h2,
.cs-card h3,
.cs-card h4 {
    color: #020928;
    transition: color 0.5s ease;
    width: fit-content;
    max-width: 100%;
}

.cs-card:hover h2,
.cs-card:hover h3,
.cs-card:hover h4 {
    color: #020928;
}

/* Card-as-link styling */
a.cs-card,
a.cs-card--link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}
.cs-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.3s ease, opacity 0.3s ease;
    opacity: 0.85;
    margin-top: auto;
    align-self: flex-start;
}
.cs-card:hover .cs-card__cta {
    gap: 12px;
    opacity: 1;
}

/* Stagger fade-in reveal */
[data-reveal].cs-card {
    opacity: 0;
}
[data-reveal].cs-card.is-visible {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    [data-reveal].cs-card,
    [data-reveal].cs-card.is-visible {
        opacity: 1;
    }
}

/* Hexagon corner accent on cards — hidden */

/* Hexagon constellation (hero) */
.hex-constellation {
    position: absolute;
    pointer-events: none;
    inset: 0;
    overflow: visible;
    z-index: -1;
}
.hex-constellation svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.hex-constellation .hex-line {
    stroke: rgba(2, 9, 40, 0.45);
    stroke-width: 1.2;
    fill: none;
    stroke-dasharray: 4 4;
}
.hex-constellation .hex-node use {
    fill: rgba(2, 9, 40, 0.7);
}
.hex-constellation .hex-node--lg use { fill: rgba(2, 9, 40, 0.85); }

/* Standalone glowing hexagon node (placed in empty areas) */

/* Hexagon section divider */

/* Floating hexagon decor (used in hero / strategic spots) */

/* Glanseffect op de card — verwijderd voor solid look */
.cs-card::after {
    content: none;
}

.cs-card > * { position: relative; z-index: 1; }

/* Focus-visible ring (keyboard nav) */
:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px #f5f1ea,
        0 0 0 4px rgba(2, 9, 40, 0.7);
    border-radius: 6px;
}
a:focus-visible, button:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px #f5f1ea,
        0 0 0 4px rgba(2, 9, 40, 0.7);
}

/* Anchor scroll offset for sticky header */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* Scroll-to-top button */
.scroll-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 60px;
    height: 66px;
    border: none;
    padding: 0;
    background: transparent;
    color: #020928;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 240ms ease, transform 240ms ease, visibility 240ms, filter 240ms ease;
    z-index: 50;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,0.12)) drop-shadow(0 0 14px rgba(2, 9, 40, 0.25));
}
.scroll-to-top__shape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.scroll-to-top__bg {
    fill: transparent;
}
.scroll-to-top__frame {
    fill: url(#cs-hex-gradient);
}
.scroll-to-top__arrow {
    position: relative;
    z-index: 1;
}
.scroll-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-to-top:hover {
    transform: translateY(-3px);
    filter: drop-shadow(0 10px 22px rgba(0,0,0,0.18)) drop-shadow(0 0 22px rgba(2, 9, 40, 0.50));
}

.glass-nav {
    background: rgba(245, 241, 234, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(2, 9, 40, 0.12);
    box-shadow: 0 4px 24px rgba(2, 9, 40, 0.12);
}

/* Main nav links */
header.glass-nav nav a,
header.glass-nav nav button {
    text-transform: none;
    font-size: 16px;
    color: #4B5563;
    font-weight: 600;
}

/* Nav dropdown (Diensten submenu) */
.cs-nav-item {
    position: relative;
}
.cs-nav-item::after {
    /* invisible bridge so the dropdown stays open while the cursor moves down */
    content: '';
    position: absolute;
    top: 100%;
    left: -10px;
    right: -10px;
    height: 14px;
    pointer-events: auto;
}
.cs-nav-dropdown {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 280px;
    background: rgba(245, 241, 234, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(2, 9, 40, 0.15);
    border-radius: 16px;
    padding: 12px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    box-shadow: 0 24px 60px rgba(2, 9, 40, 0.15), 0 0 30px rgba(2, 9, 40, 0.08);
    z-index: 100;
}
.cs-nav-item:hover .cs-nav-dropdown,
.cs-nav-item:focus-within .cs-nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.cs-nav-dropdown a {
    display: block;
    padding: 9px 14px;
    border-radius: 10px;
    color: #4B5563;
    transition: background 0.2s ease, color 0.2s ease;
    text-transform: none;
    letter-spacing: normal;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    font-variant: small-caps;
}
.cs-nav-dropdown a:hover {
    background: rgba(2, 9, 40, 0.08);
    color: #4B5563;
}
.cs-nav-dropdown__overview {
    color: #4B5563 !important;
    border-bottom: 1px solid rgba(2, 9, 40, 0.1);
    border-radius: 10px 10px 0 0 !important;
    padding: 10px 14px !important;
    margin-bottom: 6px;
}
.cs-nav-dropdown__overview:hover {
    background: rgba(2, 9, 40, 0.08) !important;
    color: #4B5563 !important;
}
.cs-nav-dropdown__label {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 10px;
    font-weight: 800;
    color: #4FAE7E;
    padding: 14px 14px 6px;
}

/* Mobile sub-menu items */

/* Container cards (no hover gradient line / no title color shift) — for grouping content, not clickable */

/* ADOPT model — step rows */

/* FAQ accordion */

.hero-title {
    display: inline-block;
    font-size: clamp(2.5rem, 8vw, 5rem);
    line-height: 1.06;
    font-weight: 800;
    color: #020928;
    letter-spacing: -0.04em;
    padding-bottom: 0.08em;
}

/* Left-aligned eyebrow for article-style intro pages */

/* Section eyebrow — hexagon prefix matching the brand identity */
.section-title-lined {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 22px;
}

/* Brand hexagon (pointy-top, filled) — matches the dot-replacement in the logo */
.section-title-lined::before {
    content: '';
    display: inline-block;
    width: 11px;
    height: 13px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 116' fill='%234FAE7E'><path d='M50 0 L100 29 L100 87 L50 116 L0 87 L0 29 Z'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.section-title-lined__label {
    font-size: clamp(40px, 13vw, 130px);   /* 13vw keeps the title within the viewport at every width */
    line-height: 1;
    font-weight: 400;
    font-family: var(--font-basis);
    letter-spacing: 0.02em;
    word-spacing: normal;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;   /* keep "02 OVER ONS" etc. on one line */
    color: rgba(79, 174, 126, 0.55);
    -webkit-text-fill-color: rgba(79, 174, 126, 0.55);
    -webkit-text-stroke: 0;
    margin: 0 0 -0.34em;   /* pull the following subtitle up, slightly above 3/4 of the title */
}

/* Genummerde ghost-kop: 01 DIENSTEN — vaste nummers via data-num, zodat ze
   site-breed consistent zijn (01 Diensten, 02 Over ons, 03 Jobs, 04 Contact)
   en overeenkomen met de nummers in het menu. */
.section-title-lined::before { display: none !important; }   /* brand-hex weg */
.section-title-lined { margin-bottom: 0; position: relative; z-index: 0; }
.section-title-lined__label::before { content: none; }
.section-title-lined__label[data-num]::before { content: attr(data-num); margin-right: 0.42em; }
.section-title-lined + h2,
.section-title-lined + h3 {
    margin-top: 0;        /* overlap is driven by the label's negative margin-bottom */
    position: relative;
    z-index: 1;
}

.section-intro h2 {
    display: inline-block;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: #1F3A5F;
    -webkit-text-fill-color: #1F3A5F;
    font-variant: small-caps;
}

@media (max-width: 640px) {
    .section-title-lined {
        gap: 8px;
    }
    .section-title-lined::before {
        width: 9px;
        height: 11px;
    }
    /* Smaller ghost title on mobile so it stays on one line without clipping */
    .section-title-lined__label {
        font-size: clamp(30px, 10vw, 64px);
    }
}

.section-intro {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Tech stack badge */
.cs-tech-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 13px;
    border-radius: 9999px;
    border: 1px solid rgba(2,9,40,0.12);
    background: rgba(2,9,40,0.03);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #64748b;
    transition: border-color 0.22s, color 0.22s, background 0.22s;
    white-space: nowrap;
    user-select: none;
}
.cs-tech-badge {
    transition: border-color 0.22s, color 0.22s, background 0.22s, transform 0.22s;
}
.cs-tech-badge:hover {
    border-color: rgba(2,9,40,0.32);
    color: #020928;
    background: rgba(2,9,40,0.08);
    transform: translateY(-1px);
}

/* ── Credentials list (consultancy: certificaten / training / conferenties) ─
   The labels vary wildly in length (a training name is far longer than a
   conference name), so nowrap pills blew the columns out of balance. A stacked
   list keeps every column the same width, lets long names wrap cleanly and
   aligns the three columns row-for-row. */
.cs-cred-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}
.cs-cred-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.6rem 0;
    font-size: 0.9rem;
    line-height: 1.45;
    font-weight: 500;
    color: #cbd5e1;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.cs-cred-item:first-child {
    border-top: 0;
    padding-top: 0;
}
.cs-cred-item::before {
    content: '';
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin-top: 0.18rem;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234FAE7E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
.cs-cred-item--more {
    color: #64748b;
    font-style: italic;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}
.cs-cred-item--more::before {
    background: none;
}

/* ── Tech honeycomb (consultancy: .NET at the core) ───────────────────────
   A tight 7-hex cluster: the green .NET core in the centre with 6 outline tech
   hexes tessellated flush around it (E/W + NE/NW/SE/SW). Each satellite is a 3D
   flip card whose front/back carry the same label — the flip is a decorative
   liveliness cue driven from main.js (random hex every couple seconds, paused
   on hover). One layout at every breakpoint; --w/--h just shrink on mobile.
   --w = hex width (flat-to-flat), --h = hex height (point-to-point). */
.cs-tech-cloud {
    --w: 104px;               /* hex tile width  (flat-to-flat) */
    --h: 114px;               /* hex tile height (point-to-point) */
    --sp: 1.18;               /* centre-to-centre spacing factor (1 = tiles touching) */
    --sw: calc(var(--w) * var(--sp));
    --sh: calc(var(--h) * var(--sp));
    position: relative;
    margin: 0 auto;
    width: calc(2 * var(--sw) + var(--w));
    height: calc(1.5 * var(--sh) + var(--h));
}
.cs-tech-cloud__ring {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Central .NET hex — filled green, sits above the outline satellites */
.cs-tech-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: var(--w);
    height: var(--h);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cs-tech-core > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: #4FAE7E;
    filter: drop-shadow(0 12px 26px rgba(2, 9, 40, 0.18));
}
.cs-tech-core__label {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--font-basis);
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #020928;
}
.cs-tech-core__sub {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-top: 4px;
    opacity: 0.75;
}

/* Satellite flip-hex — positioned via inline --x/--y (see the HTML) */
.cs-hexflip {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: var(--w);
    height: var(--h);
    transform: translate(-50%, -50%) translate(var(--x, 0), var(--y, 0));
    perspective: 700px;
}
.cs-hexflip:hover { z-index: 3; }   /* hovered hex lifts above its neighbours */
.cs-hexflip__inner {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cs-hexflip.is-flipped .cs-hexflip__inner { transform: rotateY(180deg); }
.cs-hexflip__face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.cs-hexflip__back { transform: rotateY(180deg); }
/* #cs-hex-frame is a filled band → its fill paints the hex OUTLINE */
.cs-hexflip__face > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: rgba(2, 9, 40, 0.16);
    transition: fill 0.25s ease;
}
.cs-hexflip__label {
    /* Geen z-index: een positioned child met z-index binnen de preserve-3d
       laag laat Safari de 3D-context platslaan, waardoor backface-visibility
       faalt en beide zijden (voor + achter) tegelijk zichtbaar worden. Het
       label ligt sowieso al boven de absolute svg door de DOM-volgorde. */
    position: relative;
    font-family: var(--font-basis);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.02em;
    color: #475569;
    white-space: nowrap;
    user-select: none;
    transition: color 0.25s ease;
}
.cs-hexflip:hover .cs-hexflip__face > svg { fill: rgba(79, 174, 126, 0.55); }
.cs-hexflip:hover .cs-hexflip__label { color: #020928; }

/* "+ meer" hex — green accent, signals the stack isn't exhaustive */
.cs-hexflip--more .cs-hexflip__face > svg { fill: rgba(79, 174, 126, 0.5); }
.cs-hexflip--more .cs-hexflip__label { color: #4FAE7E; font-weight: 700; }

/* Mobile: same honeycomb, scaled down */
@media (max-width: 767px) {
    .cs-tech-cloud { --w: 74px; --h: 81px; }
    .cs-tech-core__label { font-size: 19px; }
    .cs-tech-core__sub { font-size: 9px; margin-top: 3px; }
    .cs-hexflip__label { font-size: 10px; }
}

/* Respect users who prefer no motion — main.js also skips flipping */
@media (prefers-reduced-motion: reduce) {
    .cs-hexflip__inner { transition: none !important; }
}

/* Header nav link hover underline (skip logo + buttons) */
header.glass-nav a:not(.nav-link-active):not([class*="bg-"]):not([aria-label="Homepage"]) {
    position: relative;
    color: #475569;
}
header.glass-nav a:not(.nav-link-active):not([class*="bg-"]):not([aria-label="Homepage"])::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: -4px;
    height: 2px;
    background: var(--brand-gradient);
    border-radius: 9999px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 280ms ease;
    opacity: 0.7;
}
header.glass-nav a:not(.nav-link-active):not([class*="bg-"]):not([aria-label="Homepage"]):hover::after {
    transform: scaleX(1);
}

/* Form input polish */
input, textarea, select {
    transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: rgba(2, 9, 40, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(2, 9, 40, 0.15);
}

/* Selection color */
::selection {
    background: rgba(2, 9, 40, 0.35);
    color: #fff;
}

/* Custom scrollbar — dark navy track with a green (brand) thumb */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #020928; }
::-webkit-scrollbar-thumb {
    background: rgba(79, 174, 126, 0.45);
    border-radius: 8px;
    border: 2px solid #020928;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(79, 174, 126, 0.7);
}
::-webkit-scrollbar-corner { background: #020928; }

/* Firefox */
html { scrollbar-width: thin; scrollbar-color: rgba(79, 174, 126, 0.45) #020928; }

/* Primary CTA buttons (Tailwind bg-brand-lime + text-brand-dark) — subtle micro-interaction */
.bg-brand-lime {
    transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}
.bg-brand-lime:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}
.bg-brand-lime:active {
    transform: translateY(0);
    filter: brightness(0.98);
}

/* Stat numbers */
.cs-stat-number {
    font-size: clamp(1.75rem, 4vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: #020928;
    display: inline-block;
}
.cs-stat-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #64748b;
    margin-top: 5px;
}

/* Active nav link */
.nav-link-active {
    color: #020928 !important;
    position: relative;
}
.nav-link-active::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: -4px;
    height: 2px;
    background: var(--brand-gradient);
    border-radius: 9999px;
    opacity: 0.8;
}

/* In het fullscreen-menu geen underlines (actief of hover): de links zijn
   daar blok-breed, waardoor de lijn de volledige rij zou overspannen. */
.cs-menu a::after { content: none !important; }

.page-hero-title {
    display: inline-block;
    color: #020928;
    padding-bottom: 0.08em;
}

.cs-inner-card {
    position: relative;
    overflow: hidden;
}
.cs-inner-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: var(--brand-gradient);
    opacity: 0.45;
}

.reveal {
    opacity: 0;
    transform: translateX(26px);
    filter: blur(6px);
    transition: opacity 1100ms ease-out, transform 1100ms ease-out, filter 1100ms ease-out;
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}

/* Contact tabs */
.cs-contact-tablist {
    position: relative;
}
.cs-contact-tab {
    background: transparent;
    border: none;
    color: #94a3b8;
    position: relative;
    z-index: 1;
}
.cs-contact-tab:hover {
    color: #64748b;
    background: rgba(2, 9, 40, 0.04);
}
.cs-contact-tab--active {
    color: #020928;
    background: transparent;
}
.cs-contact-tab--active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--brand-gradient);
    background-size: 300% 100%;
    z-index: 2;
}
/* Positie gradient volgt de tab in de rij */
.cs-contact-tab:nth-child(1).cs-contact-tab--active::after { background-position: 0% center; }
.cs-contact-tab:nth-child(2).cs-contact-tab--active::after { background-position: 50% center; }
.cs-contact-tab:nth-child(3).cs-contact-tab--active::after { background-position: 100% center; }

/* Hide all background glow effects (orbs, decor circles/stripes, pink glow) */

/* Subtle warm cream texture background */
.bg-dotgrid {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -20;
    background-color: #F5F1EA;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch' seed='2'/%3E%3CfeColorMatrix type='saturate' values='0.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E");
    background-attachment: fixed;
}

/* Hero background image - very subtle overlay on light grey */

/* ============================================================
   Light theme overrides for Tailwind classes
   (originally written for dark theme)
   ============================================================ */

/* White text → Oxford Navy (same as logo & hero for full consistency) */
.text-white { color: #020928 !important; }
.text-slate-300 { color: #475569 !important; }
.text-slate-500 { color: #64748B !important; }
.text-brand-dark { color: #020928 !important; }

/* Hover states */
.hover\:text-white:hover { color: #020928 !important; }

/* Buttons with brand-lime background (now green) need light text */
.bg-brand-lime { color: #ffffff !important; }
a.bg-brand-lime, button.bg-brand-lime {
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(2, 9, 40, 0.25) !important;
}
a.bg-brand-lime:hover, button.bg-brand-lime:hover {
    background-color: #4FAE7E !important;
}

/* Brand text color (was lime/gold) → racing green */
.text-brand-lime { color: #020928 !important; }

/* Outlined buttons / borders */
.border-white\/10 { border-color: rgba(2, 9, 40, 0.15) !important; }
.border-white\/20 { border-color: rgba(2, 9, 40, 0.25) !important; }
.hover\:border-brand-lime\/60:hover { border-color: rgba(2, 9, 40, 0.6) !important; }

/* Background classes that referenced dark colors */
.bg-white\/5 { background-color: rgba(2, 9, 40, 0.04) !important; }
.bg-white\/10 { background-color: rgba(2, 9, 40, 0.06) !important; }

/* Strong/bold text emphasis — terracotta highlights */
strong.text-white, .text-white strong { color: #020928 !important; }
.text-slate-300 .text-white {
    color: #4FAE7E !important;
    font-weight: 600;
}
.text-slate-300 strong { color: #020928 !important; }

/* Card titles */
.cs-card h2, .cs-card h3, .cs-card h4 {
    color: #020928 !important;
}

/* Mobile menu panel */
#mobileMenuPanel {
    /* Volledig dekkend: identiek aan de gewone pagina-achtergrond */
    background-color: #F5F1EA !important;
    border-color: rgba(2, 9, 40, 0.12) !important;
}

/* Footer */
footer { color: #475569; }
footer a { color: #475569; }
footer a:hover { color: #020928; }

/* Form inputs */
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
    background-color: #ffffff !important;
    border-color: rgba(2, 9, 40, 0.15) !important;
    color: #020928 !important;
}
input::placeholder, textarea::placeholder {
    color: #94a3b8 !important;
}

/* Override accent gold/lime references in shadows */
.shadow-\[0_0_18px_rgba\(255\,199\,44\,0\.30\)\] {
    box-shadow: 0 0 18px rgba(2, 9, 40, 0.30) !important;
}

/* ============================================================
   Antique Gold accent — secondary color #020928
   Used sparingly for visual interest and hierarchy.
   ============================================================ */

/* LEES MEER arrows & card CTAs — terracotta accent */
.cs-card__cta,
.cs-card a.cs-card__cta {
    color: #4FAE7E !important;
    font-weight: 700;
    opacity: 1 !important;
    position: relative;
}
.cs-card:hover .cs-card__cta {
    color: #4FAE7E !important;
}

/* Ghost section heading (01 DIENSTEN, …) — real outline typeface */
.section-title-lined__label {
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* Tech badges — navy subtle */
.cs-tech-badge {
    border-color: rgba(2, 9, 40, 0.15);
    background: rgba(2, 9, 40, 0.03);
    color: #4B5563;
}
.cs-tech-badge:hover {
    border-color: rgba(2, 9, 40, 0.45) !important;
    color: #020928 !important;
    background: rgba(2, 9, 40, 0.06) !important;
}

/* (De accentlijn bovenaan de kaarten is vervangen door een subtiele
   hover-lift met groene rand-tint — zie de .cs-card:hover-regel.) */

/* FAQ open state — navy accent */

/* ADOPT step letters & sub-title — navy accents */

/* Hexagon constellation lines — subtle navy */
.hex-constellation .hex-line {
    stroke: rgba(2, 9, 40, 0.30) !important;
}
.hex-constellation .hex-node use {
    fill: rgba(2, 9, 40, 0.55) !important;
}
.hex-constellation .hex-node--lg use {
    fill: rgba(2, 9, 40, 0.75) !important;
}

/* Floating decorative hex glows */

/* Focus ring — navy for accessibility highlight */
:focus-visible {
    box-shadow:
        0 0 0 2px #F5F1EA,
        0 0 0 4px rgba(2, 9, 40, 0.55) !important;
}
a:focus-visible, button:focus-visible {
    box-shadow:
        0 0 0 2px #F5F1EA,
        0 0 0 4px rgba(2, 9, 40, 0.55) !important;
}

/* Selection color */
::selection {
    background: rgba(2, 9, 40, 0.20) !important;
    color: #020928 !important;
}

/* Form inputs — navy focus */
input:focus, textarea:focus, select:focus {
    border-color: rgba(2, 9, 40, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(2, 9, 40, 0.12) !important;
}

/* Secondary outlined button "Bekijk onze aanpak" — terracotta border */
a.border-white\/10:not(.bg-brand-lime) {
    border-color: rgba(79, 174, 126, 0.45) !important;
    color: #020928 !important;
}
a.border-white\/10:not(.bg-brand-lime):hover {
    border-color: #4FAE7E !important;
    background: rgba(79, 174, 126, 0.08) !important;
    color: #4FAE7E !important;
}

/* Stat labels — navy uppercase */
.cs-stat-label {
    color: #020928 !important;
    font-weight: 800;
    opacity: 0.7;
}

/* Hex anchor at top & bottom — subtle navy tint */
.hex-anchor svg {
    fill: #4FAE7E !important;
    opacity: 0.08 !important;
    filter: none !important;
}
.hex-anchor--bottom svg {
    fill: #4FAE7E !important;
    opacity: 0.08 !important;
    filter: none !important;
}

/* Scroll-to-top button — navy with subtle shadow */
.scroll-to-top {
    color: #020928;
    filter: drop-shadow(0 8px 18px rgba(2, 9, 40, 0.15));
}
.scroll-to-top:hover {
    filter: drop-shadow(0 10px 22px rgba(2, 9, 40, 0.25));
}

/* Dark theme: the navy hex + navy arrow were invisible on the dark background.
   Give it the brand green outline + arrow, a subtle filled hexagon so it reads
   as a button, and a soft green glow. */
body.theme-dark .scroll-to-top {
    color: #4FAE7E;
    filter:
        drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45))
        drop-shadow(0 0 14px rgba(79, 174, 126, 0.30));
}
body.theme-dark .scroll-to-top:hover {
    filter:
        drop-shadow(0 12px 26px rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 24px rgba(79, 174, 126, 0.55));
}
body.theme-dark .scroll-to-top__frame { fill: #4FAE7E !important; }
body.theme-dark .scroll-to-top__bg { fill: transparent !important; }

/* ============================================================
   Unified container widths — consistent alignment across pages.
   All major sections use 1152px max — readable and visually consistent.
   Header stays full-width via the more-specific rule below.
   ============================================================ */
.max-w-6xl,
section.hero-section,
section.max-w-5xl,
section.max-w-4xl,
section.max-w-3xl {
    max-width: 1152px !important;
}

/* Text-only content inside sections — slightly narrower for readability,
   but still spacious on wide screens */
section .max-w-2xl,
.hero-section .max-w-2xl {
    max-width: 880px !important;
}
section .max-w-3xl {
    max-width: 1100px !important;
}

/* ============================================================
   Full-width header: logo left, pill nav centered, CTA right
   ============================================================ */

/* Header stays nearly full-width so logo (left) and CTA (right)
   reach the viewport edges, while content sections stay at 1152px. */
header.glass-nav > div.max-w-6xl {
    position: relative;
    max-width: 100% !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

/* The enlarged hexagon dot extends a hair below/left of the logo's tight
   viewBox (0 0 934 143). Allow it to render fully instead of being clipped,
   so the full logo matches the .cs mini-logo (which has a taller viewBox). */
#codesense-logo,
svg[viewBox="0 0 934 143"] {
    overflow: visible;
}

/* Logo + tagline scale with viewport so they don't crowd the nav. */
header.glass-nav a[aria-label="Homepage"] > svg {
    height: clamp(26px, 2.6vw, 36px);
}
/* Footer logo uses the exact same responsive scaling as the header,
   so the bottom lockup is identical to the top one at every viewport width. */
footer a[aria-label="Homepage"] > svg {
    height: clamp(26px, 2.6vw, 36px);
}

@media (min-width: 1280px) {
    header.glass-nav > div.max-w-6xl {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }
}

/* Integrated navigation - no pill styling for harmony */
@media (min-width: 768px) {
    header.glass-nav nav.hidden.md\:flex {
        padding: 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        gap: 2rem;
    }
}

/* Increase gap progressively on larger screens */
@media (min-width: 1024px) {
    header.glass-nav nav.hidden.md\:flex {
        padding: 11px 40px 11px 28px;
        gap: 2.5rem;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
    }
    .cs-mini-logo {
        height: 20px;
        padding-right: 1.25rem;
        margin-right: 0.5rem;
    }
}

@media (min-width: 1440px) {
    header.glass-nav nav.hidden.md\:flex {
        padding: 12px 48px 12px 32px;
        gap: 3.25rem;
    }
    .cs-mini-logo {
        height: 22px;
        padding-right: 1.5rem;
        margin-right: 0.75rem;
    }
}

/* Nav links inside the pill — clean color and hover */
header.glass-nav nav.hidden.md\:flex > a,
header.glass-nav nav.hidden.md\:flex .cs-nav-item > a {
    color: #020928 !important;
    font-weight: 600;
    transition: color 0.2s ease;
}
header.glass-nav nav.hidden.md\:flex > a:hover,
header.glass-nav nav.hidden.md\:flex .cs-nav-item > a:hover {
    color: #4FAE7E !important;
}

/* Hide underline-animation that conflicts with pill design */
header.glass-nav nav.hidden.md\:flex a::after {
    display: none !important;
}

/* ============================================================
   Job count badge — small circle at top-right of "Jobs" link
   when there are open positions on the jobs page.
   ============================================================ */
header.glass-nav nav a:has(.cs-nav-badge),
header.glass-nav nav a.has-badge {
    position: relative;
}
.cs-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -8px;
    right: -20px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #4FAE7E;
    color: #FFFFFF !important;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: 0 2px 6px rgba(79, 174, 126, 0.35);
    transition: background 0.2s ease, transform 0.2s ease;
}
header.glass-nav nav a:hover .cs-nav-badge {
    background: #4FAE7E;
    transform: scale(1.08);
}

/* Job listings styling — articles on jobs.html */
.cs-job-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.cs-job-list:has(.cs-job) + .cs-job-empty {
    display: none;
}
.cs-job-list:has(.cs-job) {
    margin-top: 1.5rem;
}
/* Elke vacature is een eigen .cs-card; .cs-job zelf voegt geen kader toe. */
.cs-job__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.cs-job__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.65rem;
}
.cs-job__apply {
    flex-shrink: 0;
    background: #4FAE7E;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: 9999px;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}
.cs-job__apply:hover {
    background: #66C094;
}
.cs-job__more {
    margin-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 1rem;
}
.cs-job__more summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #4FAE7E;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    user-select: none;
}
.cs-job__more summary::-webkit-details-marker { display: none; }
.cs-job__more summary::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform 0.2s ease;
}
.cs-job__more[open] summary::after {
    transform: rotate(225deg) translateY(-2px);
}
.cs-job__more summary:hover { color: #66C094; }
.cs-job__title {
    color: #020928;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
}
.cs-job__description {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}
.cs-job__detail {
    margin-top: 1.25rem;
    display: grid;
    gap: 1.25rem;
}
@media (min-width: 768px) {
    .cs-job__detail {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.75rem;
    }
}
.cs-job__section-title {
    color: #4FAE7E;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 0.6rem;
}
.cs-job__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.cs-job__list li {
    position: relative;
    padding-left: 1.1rem;
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.55;
}
.cs-job__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: #4FAE7E;
}

/* Header-iconen (mail/thema/menu) dichter bij elkaar dan de Tailwind-gap */
.cs-header-actions { gap: 4px !important; }

/* De header blijft vast (logo, thematoggle en menu-icoon altijd zichtbaar),
   maar heeft geen achtergrond. Daarom krijgt de contentkolom genoeg zijmarge
   om de hoekzones vrij te houden: links het logo (±200px), rechts de iconen.
   Zo schuift er bij het scrollen nooit tekst over logo of iconen heen.
   Onder 768px is die ruimte er niet; daar geldt de standaardmarge. */
@media (min-width: 768px) {
    main#main {
        /* Logo en iconen zitten in een gecentreerde max-w-6xl (72rem) header-
           container: op brede schermen schuiven ze mee naar binnen. De
           content-marge groeit daarom mee met diezelfde containerrand,
           zodat de vrije zones (logo ±6.5rem, iconen ±8.5rem) op élke
           schermbreedte gelden. */
        padding-left: max(6.5rem, calc((100% - 72rem) / 2 + 6.5rem)) !important;
        padding-right: max(8.5rem, calc((100% - 72rem) / 2 + 8.5rem)) !important;
    }

    /* Paginatitel (".diensten" e.d.) dichter bij de top: in de headerband,
       verticaal tussen het logo links en de iconen rechts. Alleen op
       pagina's waarvan de eerste sectie zo'n titel heeft — de homepage-hero
       blijft dus op zijn plaats. */
    main#main:has(> section:first-of-type .section-title-lined) {
        padding-top: 2rem !important;   /* optisch gecentreerd in de 80px-headerband bij de kleinere titel */
    }
    /* Flankeerlijnen inkorten zodat ze logo en iconen niet raken, en wat
       meer lucht tussen de paginatitel en de subtitel eronder. */
    main > section:first-of-type .section-title-lined {
        max-width: min(640px, 45vw);
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 2.5rem !important;
    }
}

/* Header CTA "Mail ons" button — solid navy pill */
.cs-header-cta {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    background: #4FAE7E;
    color: #FFFFFF !important;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-decoration: none;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
    box-shadow: 0 4px 16px rgba(79, 174, 126, 0.25);
    white-space: nowrap;
}
.cs-header-cta:hover {
    background: #4FAE7E;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(79, 174, 126, 0.35);
    text-decoration: none !important;
}
.cs-header-cta svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
@media (min-width: 768px) {
    .cs-header-cta {
        display: inline-flex;
    }
}
@media (max-width: 1023px) {
    .cs-header-cta__label {
        display: none; /* show icon-only on tablet to save space */
    }
    .cs-header-cta {
        padding: 11px 14px;
    }
}

/* =========================================================================
   "Onze aanpak" — hexagon step flow (service detail pages)
   Uses the brand outline hexagon (#cs-hex-frame), NOT filled.
   The connector line sits only in the GAP between hexagons (calc-based),
   so it never runs through a hexagon.
   ========================================================================= */
.cs-approach {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
}

/* 6-staps variant (bv. SPRINT-model): op brede schermen gewoon 6 op één rij
   (via de column-flow van de basisregel); wordt het venster te smal voor 6,
   dan 2 rijen van 3. Onder 680px gelden de gewone 2- en 1-koloms fallbacks.
   Media-scoped omdat deze :has-regel anders door zijn hogere specificiteit
   óók de andere fallbacks zou overrulen. */
@media (min-width: 681px) and (max-width: 1151.98px) {
    .cs-approach:has(> .cs-approach__step:nth-child(6)) {
        grid-auto-flow: row;   /* basis staat op column-flow; zonder reset blijven er impliciete kolommen bijkomen */
        grid-template-columns: repeat(3, 1fr);
        row-gap: 36px;
    }
    /* Geen verbindingslijn naar het eerste item van een rij (stap 1 en 4):
       die zou vanuit het niets uit de linkerrand komen. */
    .cs-approach:has(> .cs-approach__step:nth-child(6)) > .cs-approach__step:nth-child(3n+1)::before {
        display: none;
    }
}

/* Vangnet: lange woorden mogen de stap-kolommen nooit breder duwen dan het
   venster — breek af met koppelteken waar het kan. */
.cs-approach__step { min-width: 0; }
.cs-approach__title,
.cs-approach__sub,
.cs-approach__desc {
    overflow-wrap: anywhere;
    hyphens: auto;
}

.cs-approach__step {
    position: relative;
    text-align: center;
    padding: 0 12px;
}

/* Connector: only the gap between this hexagon and the previous one.
   64px = hexagon width, so it starts at the previous hex's right point
   and ends at this hex's left point — never crossing a hexagon. */
.cs-approach__step::before {
    content: '';
    position: absolute;
    top: 35px;                       /* vertical centre of the ~70px hexagon */
    left: calc(-50% + 32px);
    width: calc(100% - 64px);
    height: 2px;
    background: rgba(79, 174, 126, 0.45);
    z-index: 0;
}
.cs-approach__step:first-child::before {
    display: none;
}

.cs-approach__hex {
    position: relative;
    z-index: 1;
    width: 64px;
    height: 70px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cs-approach__hex svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: #4FAE7E;                   /* outline hexagon colour */
    transition: fill 0.35s ease;
}

.cs-approach__num {
    position: relative;
    z-index: 1;
    font-family: var(--font-basis);
    font-weight: 800;
    font-size: 22px;
    line-height: 1;
    color: #020928;
    transition: color 0.35s ease;
}

.cs-approach__step:hover .cs-approach__num {
    color: #4FAE7E;
}

.cs-approach__title {
    font-family: var(--font-basis);
    font-variant: small-caps;
    font-weight: 700;
    font-size: var(--tekst-bloktitel);
    line-height: 1.25;
    color: #020928;
    margin: 0 0 6px;
}
.cs-approach__sub {
    font-size: var(--tekst-subtitel);
    font-weight: 600;
    line-height: 1.4;
    color: #4FAE7E;
    margin: 0 0 8px;
}
.cs-approach__desc {
    font-size: var(--tekst-body);
    line-height: 1.7;
    color: #475569;
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .cs-approach__hex,
    .cs-approach__hex svg,
    .cs-approach__num {
        transition: none;
    }
    .cs-approach__step:hover .cs-approach__hex {
        transform: none;
    }
}

@media (max-width: 1024px) {
    .cs-approach {
        grid-auto-flow: row;
        grid-template-columns: repeat(3, 1fr);
        gap: 36px 0;
    }
    /* Lijntjes blijven, maar nooit naar het eerste item van een rij
       (bij 3 kolommen: stap 1, 4, …) — een lijn moet twee hexagonen
       verbinden, niet uit het niets komen. */
    .cs-approach__step:nth-child(3n+1)::before {
        display: none;
    }
}

@media (max-width: 680px) {
    .cs-approach {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Bij 2 kolommen zijn de oneven stappen de rij-starts. */
    .cs-approach__step:nth-child(3n+1)::before {
        display: block;
    }
    .cs-approach__step:nth-child(2n+1)::before {
        display: none;
    }
}

@media (max-width: 480px) {
    .cs-approach {
        grid-template-columns: 1fr;
        gap: 26px;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }
    /* Eén kolom: geen buur-hexagonen naast elkaar, dus geen lijnen. */
    .cs-approach__step:nth-child(n)::before {
        display: none;
    }
}

/* --- Verticale variant: hexagonen op één verticale lijn, uitleg zigzag ----
   De stappen staan onder elkaar; de lijn loopt verticaal van hexagon naar
   hexagon (per stap een segment onder de hexagon, dus nooit dwars door een
   hexagon heen). De uitleg staat wisselend links en rechts van de lijn. */
/* !important: wint van de 6-staps :has-fallback (hogere specificiteit)
   die anders tussen 681-1151px drie kolommen zou afdwingen */
.cs-approach.cs-approach--verticaal {
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: 1fr !important;
    gap: 3.5rem !important;
    max-width: none;
}
.cs-approach--verticaal .cs-approach__step {
    display: grid;
    grid-template-columns: 1fr 64px 1fr;
    column-gap: 2.5rem;
    align-items: start;
    padding: 0;
}
.cs-approach--verticaal .cs-approach__step::before { display: none; }
/* lijnsegment: van de onderkant van deze hexagon tot de top van de volgende
   (hexagonen staan bovenaan hun stap, dus -gap komt exact uit op de volgende) */
.cs-approach--verticaal .cs-approach__step::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 70px;
    bottom: -3.5rem;
    width: 2px;
    background: rgba(79, 174, 126, 0.45);
}
.cs-approach--verticaal .cs-approach__step:last-child::after { display: none; }
.cs-approach--verticaal .cs-approach__hex {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin: 0;
}
.cs-approach--verticaal .cs-approach__title,
.cs-approach--verticaal .cs-approach__sub,
.cs-approach--verticaal .cs-approach__desc {
    grid-column: 1;
    text-align: right;
}
.cs-approach--verticaal .cs-approach__title { padding-top: 6px; }
.cs-approach--verticaal .cs-approach__step:nth-child(even) .cs-approach__title,
.cs-approach--verticaal .cs-approach__step:nth-child(even) .cs-approach__sub,
.cs-approach--verticaal .cs-approach__step:nth-child(even) .cs-approach__desc {
    grid-column: 3;
    text-align: left;
}
@media (max-width: 1023.98px) {
    /* Onder 1024px: geen zigzag meer — lijn en hexagonen links, alle uitleg rechts */
    .cs-approach.cs-approach--verticaal { max-width: none; gap: 2.5rem !important; }
    .cs-approach--verticaal .cs-approach__step { grid-template-columns: 64px 1fr; column-gap: 1.5rem; }
    .cs-approach--verticaal .cs-approach__hex { grid-column: 1; }
    .cs-approach--verticaal .cs-approach__step .cs-approach__title,
    .cs-approach--verticaal .cs-approach__step .cs-approach__sub,
    .cs-approach--verticaal .cs-approach__step .cs-approach__desc,
    .cs-approach--verticaal .cs-approach__step:nth-child(even) .cs-approach__title,
    .cs-approach--verticaal .cs-approach__step:nth-child(even) .cs-approach__sub,
    .cs-approach--verticaal .cs-approach__step:nth-child(even) .cs-approach__desc {
        grid-column: 2;
        text-align: left;
    }
    .cs-approach--verticaal .cs-approach__step::after {
        left: 32px;
        bottom: -2.5rem;
    }
}

/* =========================================================================
   Jobs — "Vervolledig ons team" honingraat-banner (homepage)
   De fotomuur (images/photowall.jpg) vult de volledige breedte als rechthoek.
   Een honingraat-overlay verdeelt ze in hexagon-stukjes; één stukje ontbreekt
   (de lege plek = jij), en een los hexagon-stukje staat ernaast in de hoek.
   ========================================================================= */
.cs-jobs-puzzle {
    display: block;
    text-decoration: none;
    /* Container: alle honeycomb-maten zijn in cqw, zodat foto + tegels + gat +
       zwevend stuk als één geheel meeschalen (niets schuift los bij resize). */
    container-type: inline-size;
}

.cs-jobs-puzzle__visual {
    position: relative;
    width: 100%;
    aspect-ratio: 1152 / 360;            /* vaste verhouding → schaalt proportioneel mee */
    margin-top: 2cqw;                    /* TODO: terug naar ~18cqw als het zwevende stuk terugkomt */
    overflow: visible;                   /* zodat de uitgeknipte hexagon kan uitspringen */
    background: #F5F1EA;                 /* website-achtergrond, zichtbaar in de voegen */
}

/* Tekst onder de foto (volle breedte) */
.cs-jobs-puzzle__body {
    padding: 32px 4px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 42rem;
    margin: 0 auto;
}
.cs-jobs-puzzle__body h3 {
    line-height: 1.1;
}
.cs-jobs-puzzle__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 26px;
    align-self: center;
    padding: 12px 26px;
    border-radius: 9999px;
    background: #4FAE7E;
    color: #020928;
    font-family: var(--font-basis);
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 10px 24px rgba(79, 174, 126, 0.28);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.cs-jobs-puzzle__cta svg {
    transition: transform 0.3s ease;
}
.cs-jobs-puzzle:hover .cs-jobs-puzzle__cta {
    background: #66C094;
    box-shadow: 0 12px 28px rgba(79, 174, 126, 0.4);
    transform: translateY(-1px);
}
.cs-jobs-puzzle:hover .cs-jobs-puzzle__cta svg {
    transform: translateX(4px);
}

@media (max-width: 860px) {
    .cs-jobs-puzzle__body {
        padding: 28px 4px 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cs-jobs-puzzle__cta,
    .cs-jobs-puzzle__cta svg {
        transition: none;
    }
}

/* ============================================================================
   SPORZA-INSPIRED DARK THEME  — scoped to the homepage via <body class="theme-dark">
   Near-black navy background, light text, vivid-green accents, dark cards.
   Remove the `theme-dark` class from index.html's <body> to revert instantly.
   ============================================================================ */
body.theme-dark {
    background-color: #020928 !important;
    color: #aab4c8;
}

/* --- Text colours ------------------------------------------------------- */
body.theme-dark .text-white { color: #ffffff !important; }
body.theme-dark .text-slate-300 { color: #aab4c8 !important; }
body.theme-dark .text-slate-400,
body.theme-dark .text-slate-500,
body.theme-dark .text-slate-600 { color: #7e8aa0 !important; }
body.theme-dark .text-slate-700,
body.theme-dark .text-slate-800,
body.theme-dark .text-slate-900 { color: #aab4c8 !important; }
body.theme-dark .hover\:text-white:hover { color: #ffffff !important; }

/* Section headings carry a hard navy text-fill in the light theme — flip white */
body.theme-dark .section-intro h2 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
body.theme-dark .section-title-lined__label { color: #8893a8 !important; }

/* Emphasis words inside paragraphs → vivid green */
body.theme-dark .text-slate-300 .text-white { color: #4FAE7E !important; }
body.theme-dark strong.text-white,
body.theme-dark .text-white strong,
body.theme-dark .text-slate-300 strong { color: #ffffff !important; }

/* --- Logo (recolour the navy marks to white on dark) -------------------- */
body.theme-dark #codesense-shape * { fill: #ffffff !important; }
body.theme-dark #codesense-cs-logo path { fill: #ffffff !important; }

/* --- Cards → dark elevated surfaces ------------------------------------- */
body.theme-dark .cs-card {
    /* Donkere evenknie van de bijna-dekkende witte kaarten in het lichte
       thema: een solide navy oppervlak met subtiele rand. */
    background: rgba(20, 33, 56, 0.55) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    transition: border-color 0.3s ease, transform 0.35s ease, box-shadow 0.35s ease, opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
body.theme-dark .cs-card h2,
body.theme-dark .cs-card h3,
body.theme-dark .cs-card h4 { color: #ffffff !important; }
/* Single accent on hover: the animated ::before line draws in; the border-top
   stays transparent so we don't get a double stroke. */
/* Donker thema: hover verandert de rand niet (lift + schaduw + icoon). */

/* --- Primary button (navy in light theme) → green w/ dark text (Sporza) -- */
body.theme-dark .bg-brand-lime,
body.theme-dark a.bg-brand-lime,
body.theme-dark button.bg-brand-lime {
    background-color: #4FAE7E !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 22px rgba(79, 174, 126, 0.28) !important;
}
body.theme-dark a.bg-brand-lime:hover,
body.theme-dark button.bg-brand-lime:hover {
    background-color: #66C094 !important;
}

/* --- Outlined / secondary buttons + translucent surfaces ---------------- */
body.theme-dark .border-white\/10 { border-color: rgba(255, 255, 255, 0.18) !important; }
body.theme-dark .border-white\/20 { border-color: rgba(255, 255, 255, 0.28) !important; }
body.theme-dark .hover\:border-brand-lime\/60:hover { border-color: rgba(79, 174, 126, 0.6) !important; }
body.theme-dark .bg-white\/5 { background-color: rgba(255, 255, 255, 0.05) !important; }
body.theme-dark .bg-white\/10 { background-color: rgba(255, 255, 255, 0.09) !important; }
body.theme-dark a.border-white\/10:not(.bg-brand-lime) { color: #ffffff !important; }

/* --- Scroll progress bar → green ---------------------------------------- */
body.theme-dark #scrollProgress { background: #4FAE7E !important; }

/* --- Mobile menu panel -------------------------------------------------- */
body.theme-dark #mobileMenuPanel {
    /* Volledig dekkend: identiek aan de gewone pagina-achtergrond */
    background-color: #020928 !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

/* --- Contact form inputs ------------------------------------------------ */
body.theme-dark input[type="text"],
body.theme-dark input[type="email"],
body.theme-dark input[type="tel"],
body.theme-dark textarea,
body.theme-dark select {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}
body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder { color: #6b7689 !important; }

/* --- Footer ------------------------------------------------------------- */
body.theme-dark footer,
body.theme-dark footer a { color: #7e8aa0 !important; }
body.theme-dark footer a:hover { color: #ffffff !important; }

/* --- Honeycomb (jobs teaser): dark wall + dark seams -------------------- */
body.theme-dark .cs-jobs-puzzle__visual { background: transparent !important; }

/* --- Slightly tighter, punchier headings (Sporza energy) ---------------- */
body.theme-dark .hero-title { letter-spacing: -0.015em; }

/* Dark theme: also darken the <html> canvas (only when homepage body is dark) */
html:has(body.theme-dark) { background: #020928 !important; }
/* Hero title uses its own colour (not .text-white) — flip to white */
body.theme-dark .hero-title { color: #ffffff !important; }

/* Dark theme: the fixed background decoration layers are cream in the light
   theme and would cover the dark body — darken / hide them. */
body.theme-dark .bg-dotgrid { background-color: #020928 !important; }

/* Header bar removed entirely — only the logo + hamburger float over the page */
body.theme-dark header.glass-nav,
body.theme-dark .glass-nav {
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Dark theme: nav links light, dropdown panel dark */
body.theme-dark header.glass-nav nav a,
body.theme-dark header.glass-nav nav button { color: #e6ebf2 !important; }
body.theme-dark header.glass-nav nav a:hover { color: #ffffff !important; }
body.theme-dark .cs-nav-dropdown {
    background: rgba(2, 9, 40, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
body.theme-dark .cs-nav-dropdown__label { color: #7e8aa0 !important; }

/* Dark theme: pill nav links (high-specificity rule) → light */
body.theme-dark header.glass-nav nav.hidden.md\:flex > a,
body.theme-dark header.glass-nav nav.hidden.md\:flex .cs-nav-item > a {
    color: #e6ebf2 !important;
}


/* ============================================================================
   Dark theme rollout — supporting overrides for inner-page elements
   ============================================================================ */
/* Mini .cs logo follows text colour (currentColor): navy in light, white in dark */
.cs-mini-logo { color: #020928; }
body.theme-dark .cs-mini-logo { color: #ffffff; }

/* "Onze aanpak" / ADOPT step flow (service detail pages) */
body.theme-dark .cs-approach__title { color: #ffffff !important; }
body.theme-dark .cs-approach__num { color: #ffffff !important; }
body.theme-dark .cs-approach__desc { color: #aab4c8 !important; }

/* Tech badges */
body.theme-dark .cs-tech-badge {
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #aab4c8 !important;
}
body.theme-dark .cs-tech-badge--more {
    border-color: rgba(79, 174, 126, 0.55) !important;
    background: rgba(79, 174, 126, 0.14) !important;
    color: #7ED3A6 !important;
}
/* Tech honeycomb (flip-hex) */
body.theme-dark .cs-tech-core__label { color: #ffffff; }
body.theme-dark .cs-hexflip__face > svg { fill: rgba(255, 255, 255, 0.20); }
body.theme-dark .cs-hexflip__label { color: #aab4c8; }
body.theme-dark .cs-hexflip:hover .cs-hexflip__face > svg { fill: rgba(79, 174, 126, 0.7); }
body.theme-dark .cs-hexflip:hover .cs-hexflip__label { color: #ffffff; }
body.theme-dark .cs-hexflip--more .cs-hexflip__face > svg { fill: rgba(79, 174, 126, 0.6); }
body.theme-dark .cs-hexflip--more .cs-hexflip__label { color: #7ED3A6; }

/* Detail-page breadcrumb eyebrow (contains a link, e.g. "Diensten · Software op maat")
   — keep it a small eyebrow, NOT the giant ghost section title. */
.section-title-lined:has(a) { counter-increment: none; margin-bottom: 18px; }
.section-title-lined__label:has(a) {
    font-family: var(--font-basis) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    color: #8893a8 !important;
    -webkit-text-fill-color: #8893a8 !important;
    -webkit-text-stroke: 0 !important;
    margin: 0 !important;
}
.section-title-lined__label:has(a)::before { content: none !important; }
.section-title-lined__label:has(a) a { color: #4FAE7E !important; }
.section-title-lined:has(a) + h2,
.section-title-lined:has(a) + h3 { margin-top: 12px !important; }


/* ============================================================================
   SITE-WIDE FULL-SCREEN MENU (hamburger on every breakpoint)
   Two columns: numbered nav (left) + contact info (right), over a darkened
   brand photo. Toggled by #mobileMenuButton (main.js moves it to <body>).
   ============================================================================ */

/* Hamburger always visible; hide the old desktop pill nav */
#mobileMenuButton { display: inline-flex !important; }
header.glass-nav nav.hidden.md\:flex { display: none !important; }
/* Keep logo left, CTA + hamburger grouped right */
/* "Mail ons" header CTA removed — contact lives in the menu now */
header.glass-nav .cs-header-cta { display: none !important; }

/* ---- Overlay ---- */
.cs-menu.hidden { display: none !important; }
#mobileMenuPanel.cs-menu:not(.hidden) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 40 !important;
    display: block !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 0 !important;
    /* Zelfde achtergrond als de gewone pagina's: effen themakleur, met een
       eigen .bg-fx-kopie (orbs/raster/korrel) in het paneel — geen fotomuur. */
    background: #020928;
    animation: cs-menu-fade 0.3s ease both;
}

/* De .bg-fx-kopie ín het paneel: het paneel is een eigen stacking context,
   dus de standaard z-index -3 zou hem achter de paneelachtergrond steken. */
.cs-menu .bg-fx { position: absolute; z-index: 0; }
.cs-menu .bg-fx__orb { animation: none; }

.cs-menu__inner {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    min-height: 100dvh;
    max-width: 1180px;
    margin: 0 auto;
    padding: 120px 44px 56px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 48px 72px;
}

/* ---- LEFT: numbered nav ---- */
.cs-menu__nav { display: flex; flex-direction: column; flex: 1 1 460px; }
.cs-menu__item {
    display: block;
    position: relative;
    font-family: var(--font-basis);
    font-weight: 800;
    font-size: clamp(28px, 3.4vw, 42px);   /* identical to .section-title-lined__label on the pages */
    line-height: 1.2;
    letter-spacing: -0.005em;
    text-transform: lowercase;   /* .home .diensten … like the logo */
    color: #ffffff;
    text-decoration: none;
    padding: 6px 0;
    transition: color 0.2s ease, transform 0.2s ease;
    animation: cs-menu-item 0.45s ease both;
}
.cs-menu__item::before {
    content: ".";                /* brand dot instead of a number */
    color: #4FAE7E;
    font-weight: 800;
    /* periode-glyph draagt ~0.12em witruimte; logo-dot zit op ~0.03em van de c */
    margin: 0 -0.09em 0 0;
    letter-spacing: 0;
}
.cs-menu__item:hover { color: #4FAE7E; transform: translateX(10px); }

/* ---- Diensten sub-links (indented under "Diensten") ---- */
.cs-menu__subs {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 10px 0 20px clamp(42px, 6.6vw, 60px);  /* indent under the "Diensten" label */
    padding-left: 20px;
    border-left: 2px solid rgba(79, 174, 126, 0.35); /* subtle green branch line */
    animation: cs-menu-item 0.45s ease both;
    animation-delay: 0.12s;
}
.cs-menu__subs a {
    font-family: var(--font-basis);
    font-variant: small-caps;
    font-size: clamp(15px, 1.7vw, 18px);
    font-weight: 900;
    color: #aab4c8;
    text-decoration: none;
    padding: 3px 0;
    transition: color 0.2s ease, transform 0.2s ease;
}
.cs-menu__subs a:hover { color: #4FAE7E; transform: translateX(6px); }

/* ---- RIGHT: contact / address / socials ---- */
.cs-menu__info { flex: 0 1 260px; display: flex; flex-direction: column; gap: 28px; }
.cs-menu__block { display: flex; flex-direction: column; gap: 3px; }
.cs-menu__label {
    font-family: var(--font-basis);
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: #4FAE7E; margin-bottom: 7px;
}
.cs-menu__info a, .cs-menu__info p {
    font-family: var(--font-basis);
    color: #d7dde8; font-size: 16px; line-height: 1.5;
    text-decoration: none; margin: 0;
}
.cs-menu__info a { transition: color 0.2s ease; }
.cs-menu__info a:hover { color: #4FAE7E; }

/* stagger (nth-of-type so the inserted subs <div> doesn't shift the count) */
.cs-menu__item:nth-of-type(1){animation-delay:.05s}
.cs-menu__item:nth-of-type(2){animation-delay:.09s}
.cs-menu__item:nth-of-type(3){animation-delay:.15s}
.cs-menu__item:nth-of-type(4){animation-delay:.19s}
.cs-menu__item:nth-of-type(5){animation-delay:.23s}

@keyframes cs-menu-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cs-menu-item { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* stack columns on small screens */
@media (max-width: 720px) {
    .cs-menu__inner { flex-direction: column; align-items: flex-start; justify-content: center; gap: 40px; padding: 104px 28px 48px; }
    .cs-menu__nav, .cs-menu__info { flex: none; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    #mobileMenuPanel.cs-menu:not(.hidden),
    .cs-menu__item { animation: none !important; }
    .cs-menu__item:hover { transform: none; }
}

/* Jobs vacancy badge inside the full-screen menu — inline next to the word,
   hoog naast het woord zoals een exponent */
.cs-menu__item .cs-nav-badge {
    position: static !important;
    display: inline-flex !important;
    vertical-align: 1.8em;
    margin-left: 0.35em;
    transform: none !important;
}

/* ============================================================================
   Hamburger button — no border/box; two bars that morph to an X when open
   ============================================================================ */
#mobileMenuButton {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
#mobileMenuButton .cs-burger {
    position: relative;
    display: block;
    width: 26px;
    height: 14px;
}
#mobileMenuButton .cs-burger > span {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: top 0.25s ease, transform 0.25s ease;
}
#mobileMenuButton .cs-burger > span:nth-child(1) { top: 3px; }
#mobileMenuButton .cs-burger > span:nth-child(2) { top: 9px; }
#mobileMenuButton.is-open .cs-burger > span:nth-child(1) { top: 6px; transform: rotate(45deg); }
#mobileMenuButton.is-open .cs-burger > span:nth-child(2) { top: 6px; transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
    #mobileMenuButton .cs-burger > span { transition: none; }
}

/* ============================================================================
   Header on scroll — wordmark collapses letter-by-letter to ".cs"
   The logo SVG is rebuilt (in main.js) from per-letter <g class="cs-letter">
   groups, indexed: 0=dot 1=c 2=o 3=d 4=e 5=s 6=e 7=n 8=s 9=e
   ============================================================================ */
header.glass-nav a[aria-label="Homepage"] { position: relative; }
header.glass-nav svg.cs-logo-full { overflow: hidden; }   /* clip letters as they slide off the left */
.cs-letter {
    transition: transform 0.5s cubic-bezier(0.45, 0, 0.15, 1), opacity 0.4s ease;
}

/* On scroll: dot(0) + c(1) stay; the first "s"(5) slides next to the c;
   every other letter slides left and fades out. */
header.glass-nav.scrolled .cs-letter[data-i="5"] { transform: translateX(-315.03px); }
header.glass-nav.scrolled .cs-letter[data-i="2"],
header.glass-nav.scrolled .cs-letter[data-i="3"],
header.glass-nav.scrolled .cs-letter[data-i="4"],
header.glass-nav.scrolled .cs-letter[data-i="6"],
header.glass-nav.scrolled .cs-letter[data-i="7"],
header.glass-nav.scrolled .cs-letter[data-i="8"],
header.glass-nav.scrolled .cs-letter[data-i="9"] {
    opacity: 0;
    transform: translateX(-960px);   /* slide fully off to the left and clip */
}
/* stagger so letters leave one after another */
header.glass-nav.scrolled .cs-letter[data-i="2"] { transition-delay: 0.00s; }
header.glass-nav.scrolled .cs-letter[data-i="3"] { transition-delay: 0.04s; }
header.glass-nav.scrolled .cs-letter[data-i="4"] { transition-delay: 0.08s; }
header.glass-nav.scrolled .cs-letter[data-i="5"] { transition-delay: 0.10s; }
header.glass-nav.scrolled .cs-letter[data-i="6"] { transition-delay: 0.12s; }
header.glass-nav.scrolled .cs-letter[data-i="7"] { transition-delay: 0.16s; }
header.glass-nav.scrolled .cs-letter[data-i="8"] { transition-delay: 0.20s; }
header.glass-nav.scrolled .cs-letter[data-i="9"] { transition-delay: 0.24s; }

/* The bar itself disappears — only logo + hamburger float
   (high specificity to beat the dark-theme header background rule) */
body.theme-dark header.glass-nav.scrolled,
header.glass-nav.scrolled {
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
@media (prefers-reduced-motion: reduce) {
    .cs-letter { transition: none; }
}

/* ============================================================================
   Page background — fixed photo + gradient (parallax: bg stays, content scrolls
   over it), same look as the full-screen menu. Plus the first two hexagons,
   also fixed so they belong to the static background.
   ============================================================================ */
/* Geen photowall meer in het donkere thema: net als in het lichte thema
   neemt de .bg-fx-laag (gloed-orbs + raster + korrel) de achtergrond over,
   zodat beide thema's dezelfde designtaal spreken. */
body.theme-dark::before { content: none; }
/* Hexagons become part of the fixed background (don't scroll) */
body.theme-dark .bg-hexagons { position: fixed; }
/* Keep only the first two hexagons */
.bg-hex--6 { display: none; }

/* ============================================================================
   Background hexagons: exactly two — top-left + bottom-right corner — fixed
   so they stay put while content scrolls (parallax).
   ============================================================================ */
.bg-hex--2, .bg-hex--4 { display: none !important; }   /* remove the two on the right */
body.theme-dark .hex-anchor { position: fixed !important; }   /* part of the static background */
/* Move the bottom hexagon to the bottom-right corner, make it visible green */
.hex-anchor--bottom {
    left: auto !important;
    right: 0 !important;
    bottom: -150px !important;
    transform: translateX(55%) rotate(-10deg) !important;
}
.hex-anchor--bottom svg { fill: #4FAE7E !important; opacity: 0.08 !important; }   /* subtle, like the top-left one */
@media (max-width: 1100px) {
    .hex-anchor--bottom { transform: translateX(72%) rotate(-10deg) !important; }
}

/* Dark theme: card icons in green (navy was invisible on the dark cards) */
body.theme-dark .cs-card .text-brand-lime,
body.theme-dark .cs-card .text-brand-lime svg { color: #4FAE7E !important; }

/* Dark theme: page hero titles (sub-pages) were navy — make them white */
body.theme-dark .page-hero-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Dark theme: contact tabs (were navy/dark-gray on dark) */
body.theme-dark .cs-contact-tab { color: #7e8aa0 !important; }
body.theme-dark .cs-contact-tab:hover { color: #ffffff !important; background: rgba(255, 255, 255, 0.05) !important; }
body.theme-dark .cs-contact-tab--active { color: #ffffff !important; }
body.theme-dark .cs-contact-tab--active::after { background: #4FAE7E !important; }

/* Dark theme: vacancy description was dark slate — make it readable */
body.theme-dark .cs-job__description { color: #aab4c8 !important; }
body.theme-dark .cs-job__list li { color: #aab4c8 !important; }

/* ============================================================================
   ".diensten" section label, centered with flanking sage lines — a clear,
   calm section divider that references the logo dot (not cyberpunk).
   ============================================================================ */
body.theme-dark .section-title-lined {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(14px, 2vw, 28px) !important;
    margin: 0 0 18px !important;
    position: relative;
    z-index: 0;
}
body.theme-dark .section-title-lined::before,
body.theme-dark .section-title-lined::after {
    content: '' !important;
    display: block !important;
    flex: 1 1 auto !important;
    width: auto !important;
    height: 1px !important;
    border: 0 !important;
    background-repeat: no-repeat !important;
}
body.theme-dark .section-title-lined::before { background: linear-gradient(to right, rgba(79,174,126,0) 0%, rgba(79,174,126,0.5) 100%) !important; }
body.theme-dark .section-title-lined::after  { background: linear-gradient(to left,  rgba(79,174,126,0) 0%, rgba(79,174,126,0.5) 100%) !important; }
body.theme-dark .section-title-lined__label {
    flex: 0 0 auto !important;
    font-family: var(--font-basis) !important;
    font-size: var(--tekst-label) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.005em !important;
    text-transform: lowercase !important;
    white-space: nowrap !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    -webkit-text-stroke: 0 !important;
    margin: 0 !important;
}
body.theme-dark .section-title-lined__label::before {
    /* echte cirkel op logo-verhouding i.p.v. een punt-teken */
    content: "" !important;
    display: inline-block !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: #4FAE7E !important;
    margin: 0 1px 0 0 !important;   /* logo-verhouding: gap = 0.175 x dot-diameter */
    vertical-align: baseline !important;
}
/* descriptive line under .diensten = white subtitle in small caps */
body.theme-dark .section-title-lined + h2,
body.theme-dark .section-title-lined + h3 {
    margin-top: 6px !important;
    position: static !important;
    font-size: clamp(20px, 2.4vw, 30px) !important;
    font-weight: 900 !important;
    font-variant: small-caps !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Hide the scroll-to-top button while the full-screen menu is open */
body.cs-menu-open .scroll-to-top {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* === Cookie-consent banner ======================================== */
.cs-cookie {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 80;
    display: flex;
    justify-content: center;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
}
.cs-cookie.is-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.cs-cookie__inner {
    max-width: 1100px;
    width: 100%;
    background: #050e36;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 18px 22px;
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}
.cs-cookie__text {
    color: #cbd5e1;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    flex: 1 1 320px;
}
.cs-cookie__text a {
    color: #4FAE7E;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cs-cookie__text a:hover { color: #66C094; }
.cs-cookie__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.cs-cookie__btn {
    border-radius: 9999px;
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.cs-cookie__accept {
    background: #4FAE7E;
    border: 1px solid #4FAE7E;
    color: #FFFFFF;
}
.cs-cookie__accept:hover { background: #66C094; border-color: #66C094; }
.cs-cookie__essential {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
}
.cs-cookie__essential:hover { border-color: rgba(79, 174, 126, 0.6); }

/* Net als de scroll-to-top: verbergen terwijl het full-screen menu open is */
body.cs-menu-open .cs-cookie {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .cs-cookie { transition: none; transform: none; }
}

/* Dark theme: stats op consultancy (cijfers waren navy-op-navy, onleesbaar) */
body.theme-dark .cs-stat-number {
    color: #4FAE7E !important;
}
body.theme-dark .cs-stat-label {
    color: #aab4c8 !important;
    opacity: 1;
}

/* Dark theme: vacature-cards op jobs.html */
body.theme-dark .cs-job__title {
    color: #fff !important;
    font-size: 1.35rem;
}
body.theme-dark .cs-job-list {
    gap: 1.5rem;
}

/* Skip-link: onzichtbaar tot toetsenbord-focus (a11y) */
.skip-link {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 10000;
    background: #4FAE7E;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 18px;
    border-radius: 9999px;
    transform: translateY(-200%);
    transition: transform 0.15s ease;
}
.skip-link:focus {
    transform: none;
    outline: 2px solid #fff;
    outline-offset: 2px;
}


/* ============================================================================
   LIGHT THEME  — body.theme-light, achtergrond #e5e7eb.
   Spiegelt de structuur van body.theme-dark maar met kleuren voor een lichte
   achtergrond: navy tekst (#020928), groene accenten (#4FAE7E) blijven, en
   een donkerder groen (#4FAE7E) waar groen als TEKST op licht moet leesbaar zijn.
   Logo: wordmark navy, dot groen.
   ============================================================================ */
html:has(body.theme-light) { background: #F5F1EA !important; }

body.theme-light { background-color: #F5F1EA !important; color: #4B5563; }

/* Achtergrondlagen: geen photowall in het lichte thema — de .bg-fx-laag
   (crème + zachte gloed-orbs + raster + korrel, zoals variant -1) neemt over. */
body.theme-light::before { content: none; }
body.theme-light .bg-dotgrid { background-color: #F5F1EA !important; }
body.theme-light .bg-hexagons { position: fixed; }
body.theme-light .hex-anchor { position: fixed !important; }

/* --- Tekstkleuren ------------------------------------------------------- */
body.theme-light .text-white { color: #1F3A5F !important; }
body.theme-light .text-slate-300 { color: #475569 !important; }
body.theme-light .text-slate-400,
body.theme-light .text-slate-500,
body.theme-light .text-slate-600 { color: #64748b !important; }
body.theme-light .text-slate-700,
body.theme-light .text-slate-800,
body.theme-light .text-slate-900 { color: #334155 !important; }
body.theme-light .hover\:text-white:hover { color: #1F3A5F !important; }

body.theme-light .section-intro h2 { color: #1F3A5F !important; -webkit-text-fill-color: #1F3A5F !important; }
body.theme-light .page-hero-title { color: #1F3A5F !important; -webkit-text-fill-color: #1F3A5F !important; }
body.theme-light .hero-title { color: #1F3A5F !important; letter-spacing: -0.015em; }

/* Bold key-statements navy, inline groene emphasis donkerder groen */
body.theme-light strong.text-white,
body.theme-light .text-white strong,
body.theme-light .text-slate-300 strong { color: #1F3A5F !important; }
body.theme-light .text-slate-300 .text-white { color: #4FAE7E !important; }

/* --- Logo: wordmark navy, dot groen ------------------------------------- */
body.theme-light #codesense-shape path,
body.theme-light #codesense-cs-logo path { fill: #1F3A5F !important; }
body.theme-light #codesense-shape circle,
body.theme-light #codesense-cs-logo circle { fill: #4FAE7E !important; }
body.theme-light .cs-mini-logo { color: #1F3A5F; }

/* --- Kaarten → lichte, verhoogde oppervlakken --------------------------- */
body.theme-light .cs-card {
    /* Translucent wit zodat de photowall echt DOOR de cards schemert. Géén
       backdrop-blur (zoals de donkere cards): blur smeert de foto uit tot een
       egale tint, waardoor de card massief blijft lijken hoe transparant ook. */
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(31, 58, 95, 0.08) !important;
    transition: border-color 0.3s ease, transform 0.35s ease, box-shadow 0.35s ease, opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    box-shadow: 0 10px 30px rgba(31, 58, 95, 0.07) !important;
}
/* Licht thema: hover verandert de rand niet (lift + schaduw + icoon). */
body.theme-light .cs-card h2,
body.theme-light .cs-card h3,
body.theme-light .cs-card h4 { color: #1F3A5F !important; }
body.theme-light .cs-card .text-brand-lime,
body.theme-light .cs-card .text-brand-lime svg { color: #4FAE7E !important; }

/* --- Knoppen + translucente oppervlakken -------------------------------- */
body.theme-light .bg-brand-lime,
body.theme-light a.bg-brand-lime,
body.theme-light button.bg-brand-lime {
    background-color: #4FAE7E !important; color: #FFFFFF !important;
    box-shadow: 0 8px 22px rgba(79, 174, 126, 0.28) !important;
}
body.theme-light a.bg-brand-lime:hover,
body.theme-light button.bg-brand-lime:hover { background-color: #66C094 !important; }
body.theme-light .border-white\/10 { border-color: rgba(31, 58, 95, 0.12) !important; }
body.theme-light .border-white\/20 { border-color: rgba(31, 58, 95, 0.18) !important; }
body.theme-light .hover\:border-brand-lime\/60:hover { border-color: rgba(79, 174, 126, 0.6) !important; }
body.theme-light .bg-white\/5 { background-color: rgba(31, 58, 95, 0.04) !important; }
body.theme-light .bg-white\/10 { background-color: rgba(31, 58, 95, 0.07) !important; }
body.theme-light a.border-white\/10:not(.bg-brand-lime) { color: #1F3A5F !important; }

/* --- Accenten ------------------------------------------------------------ */
body.theme-light #scrollProgress { background: #4FAE7E !important; }

/* --- Header (transparant) + nav ----------------------------------------- */
body.theme-light header.glass-nav,
body.theme-light .glass-nav,
body.theme-light header.glass-nav.scrolled {
    background: transparent !important; border-bottom-color: transparent !important;
    box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body.theme-light header.glass-nav nav a,
body.theme-light header.glass-nav nav button,
body.theme-light header.glass-nav nav.hidden.md\:flex > a,
body.theme-light header.glass-nav nav.hidden.md\:flex .cs-nav-item > a { color: #334155 !important; }
body.theme-light header.glass-nav nav a:hover { color: #1F3A5F !important; }
body.theme-light .cs-nav-dropdown {
    background: rgba(255, 255, 255, 0.98) !important; border-color: rgba(31, 58, 95, 0.10) !important;
    box-shadow: 0 20px 40px rgba(31, 58, 95, 0.12) !important;
}
body.theme-light .cs-nav-dropdown__label { color: #64748b !important; }

/* --- Full-screen menu --------------------------------------------------- */
body.theme-light #mobileMenuPanel.cs-menu:not(.hidden) {
    /* Identiek aan de gewone pagina-achtergrond (geen fotomuur) */
    background: #F5F1EA !important;
}
body.theme-light .cs-menu__item { color: #1F3A5F; }
body.theme-light .cs-menu__item:hover { color: #4FAE7E; }

/* --- Formulier-inputs --------------------------------------------------- */
body.theme-light input[type="text"],
body.theme-light input[type="email"],
body.theme-light input[type="tel"],
body.theme-light textarea,
body.theme-light select {
    background-color: #ffffff !important; border-color: rgba(31, 58, 95, 0.15) !important; color: #1F3A5F !important;
}
body.theme-light input::placeholder,
body.theme-light textarea::placeholder { color: #94a3b8 !important; }

/* --- Credentials list --------------------------------------------------- */
body.theme-light .cs-cred-item {
    color: #475569 !important;
    border-top-color: rgba(31, 58, 95, 0.10) !important;
}
body.theme-light .cs-cred-item--more { color: #64748b !important; }

/* --- Footer ------------------------------------------------------------- */
body.theme-light footer,
body.theme-light footer a { color: #475569 !important; }
body.theme-light footer a:hover { color: #1F3A5F !important; }

/* --- Tech badges -------------------------------------------------------- */
body.theme-light .cs-tech-badge {
    border-color: rgba(31, 58, 95, 0.15) !important; background: rgba(31, 58, 95, 0.03) !important; color: #475569 !important;
}
body.theme-light .cs-tech-badge--more {
    border-color: rgba(79, 174, 126, 0.6) !important; background: rgba(79, 174, 126, 0.10) !important; color: #4FAE7E !important;
}
body.theme-light .cs-tech-core__label { color: #020928; }
body.theme-light .cs-hexflip__face > svg { fill: rgba(2, 9, 40, 0.16); }
body.theme-light .cs-hexflip__label { color: #475569; }
body.theme-light .cs-hexflip--more .cs-hexflip__face > svg { fill: rgba(79, 174, 126, 0.5); }
body.theme-light .cs-hexflip--more .cs-hexflip__label { color: #4FAE7E; }

/* --- Contact tabs ------------------------------------------------------- */
body.theme-light .cs-contact-tab { color: #64748b !important; }
body.theme-light .cs-contact-tab:hover { color: #1F3A5F !important; background: rgba(31, 58, 95, 0.04) !important; }
body.theme-light .cs-contact-tab--active { color: #1F3A5F !important; }
body.theme-light .cs-contact-tab--active::after { background: #4FAE7E !important; }

/* --- Vacatures / approach / stats --------------------------------------- */
body.theme-light .cs-job__description,
body.theme-light .cs-job__list li { color: #475569 !important; }
body.theme-light .cs-job__title { color: #1F3A5F !important; font-size: 1.35rem; }
body.theme-light .cs-job-list { gap: 1.5rem; }
body.theme-light .cs-approach__title,
body.theme-light .cs-approach__num { color: #1F3A5F !important; }
body.theme-light .cs-approach__desc { color: #475569 !important; }
body.theme-light .cs-stat-number { color: #4FAE7E !important; }
body.theme-light .cs-stat-label { color: #475569 !important; opacity: 1; }

/* --- Honeycomb (vacatures-teaser) --------------------------------------- */
body.theme-light .cs-jobs-puzzle__visual { background: transparent !important; }

/* --- ".diensten"-sectielabel met flankerende lijnen --------------------- */
body.theme-light .section-title-lined {
    display: flex !important; align-items: center !important; justify-content: center !important;
    gap: clamp(14px, 2vw, 28px) !important; margin: 0 0 18px !important; position: relative; z-index: 0;
}
body.theme-light .section-title-lined::before,
body.theme-light .section-title-lined::after {
    content: '' !important; display: block !important; flex: 1 1 auto !important; width: auto !important;
    height: 1px !important; border: 0 !important; background-repeat: no-repeat !important;
}
body.theme-light .section-title-lined::before { background: linear-gradient(to right, rgba(79,174,126,0) 0%, rgba(79,174,126,0.5) 100%) !important; }
body.theme-light .section-title-lined::after { background: linear-gradient(to left, rgba(79,174,126,0) 0%, rgba(79,174,126,0.5) 100%) !important; }
body.theme-light .section-title-lined__label {
    flex: 0 0 auto !important; font-family: var(--font-basis) !important; font-size: var(--tekst-label) !important;
    font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: -0.005em !important; text-transform: lowercase !important;
    white-space: nowrap !important; color: #1F3A5F !important; -webkit-text-fill-color: #1F3A5F !important; -webkit-text-stroke: 0 !important; margin: 0 !important;
}
body.theme-light .section-title-lined__label::before {
    /* echte cirkel op logo-verhouding i.p.v. een punt-teken */
    content: "" !important; display: inline-block !important;
    width: 5px !important; height: 5px !important; border-radius: 50% !important;
    background: #4FAE7E !important; margin: 0 1px 0 0 !important;   /* logo-verhouding: gap = 0.175 x dot-diameter */ vertical-align: baseline !important;
}
body.theme-light .section-title-lined + h2,
body.theme-light .section-title-lined + h3 {
    margin-top: 6px !important; position: static !important; font-size: clamp(20px, 2.4vw, 30px) !important;
    font-weight: 900 !important; font-variant: small-caps !important; color: #1F3A5F !important; -webkit-text-fill-color: #1F3A5F !important;
}

/* --- Scroll-to-top ------------------------------------------------------ */
body.theme-light .scroll-to-top {
    color: #4FAE7E;
    filter: drop-shadow(0 10px 22px rgba(31, 58, 95, 0.18)) drop-shadow(0 0 14px rgba(79, 174, 126, 0.25));
}
body.theme-light .scroll-to-top:hover { filter: drop-shadow(0 12px 26px rgba(31, 58, 95, 0.25)) drop-shadow(0 0 24px rgba(79, 174, 126, 0.45)); }
body.theme-light .scroll-to-top__frame { fill: #4FAE7E !important; }
body.theme-light .scroll-to-top__bg { fill: transparent !important; }

/* --- Cookie-banner (licht) ---------------------------------------------- */
body.theme-light .cs-cookie__inner { background: #ffffff; border-color: rgba(31, 58, 95, 0.10); box-shadow: 0 10px 40px rgba(31, 58, 95, 0.15); }
body.theme-light .cs-cookie__text { color: #475569; }
body.theme-light .cs-cookie__text a { color: #4FAE7E; }
body.theme-light .cs-cookie__essential { border-color: rgba(31, 58, 95, 0.18); color: #1F3A5F; }

/* ============================================================================
   Theme-toggle button (header) — toont zon in dark (→ licht), maan in light.
   Erft kleur via .text-white + .border-white/10 (per-thema gestyled).
   ============================================================================ */
.cs-theme-toggle__sun,
.cs-theme-toggle__moon { display: none; }
body.theme-dark .cs-theme-toggle__sun { display: block; }
body.theme-light .cs-theme-toggle__moon { display: block; }

/* Merk-dot in het logo blijft groen in BEIDE thema's (de dark `* { fill:#fff }`
   kleurde de dot-circle per ongeluk wit; circle-selector wint qua specificiteit). */
body.theme-dark #codesense-shape circle,
body.theme-dark #codesense-cs-logo circle { fill: #4FAE7E !important; }

/* Theme-toggle: kaal icoon (geen kader), groene hover, ruime klikzone */
.cs-theme-toggle { background: transparent; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body.theme-dark .cs-theme-toggle:hover,
body.theme-light .cs-theme-toggle:hover { color: #4FAE7E !important; }
/* Nooit een kader rond het icoon (Safari/Chrome tonen anders een focus-ring bij
   klik/sleep). Toetsenbord-toegankelijkheid blijft: bij keyboard-focus kleurt het
   icoon groen i.p.v. een box te tonen. */
.cs-theme-toggle:focus,
.cs-theme-toggle:focus-visible,
.cs-theme-toggle:active { outline: none !important; box-shadow: none !important; }
body.theme-dark .cs-theme-toggle:focus-visible,
body.theme-light .cs-theme-toggle:focus-visible { color: #4FAE7E !important; }

/* ============================================================================
   Contactformulier-velden: onderlijn-stijl i.p.v. box (op verzoek).
   Het label staat erboven (bestaande <label>); het veld zelf is transparant met
   enkel een dunne onderlijn die groen kleurt bij focus. Werkt in beide thema's.
   !important is nodig omdat er globale input-regels met !important bestaan
   (witte achtergrond, navy border + focus-ring) die anders een box zouden tonen.
   ============================================================================ */
/* Element-gekwalificeerd (input./textarea.) zodat we de globale
   input[type=...]-regels (witte box, navy border + focus-ring) verslaan. */
input.cs-field,
textarea.cs-field,
select.cs-field {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 0 !important;
    padding: 0.5rem 0.125rem !important;
    color: #ffffff !important;
    box-shadow: none !important;
    font: inherit;
}
textarea.cs-field { resize: vertical; min-height: 7rem; }
select.cs-field {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 1.75rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.25rem center !important;
    cursor: pointer;
}
input.cs-field::placeholder,
textarea.cs-field::placeholder { color: #64748b !important; }
input.cs-field:focus,
textarea.cs-field:focus,
select.cs-field:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
    border-bottom-color: #4FAE7E !important;
}
/* Dark thema: transparant + lichte onderlijn. Wint van de dark-specifieke
   `body.theme-dark input[type=email]… { background:rgba(255,255,255,.05) }`
   (0,2,1) die anders een getinte box + lijn op typte velden zou zetten. */
body.theme-dark input.cs-field,
body.theme-dark textarea.cs-field,
body.theme-dark select.cs-field {
    background: transparent !important;
    border-bottom-color: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}
body.theme-dark select.cs-field option {
    background-color: #0f172a;
    color: #ffffff;
}
body.theme-dark select.cs-field {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.25rem center !important;
}
body.theme-dark input.cs-field:focus,
body.theme-dark textarea.cs-field:focus,
body.theme-dark select.cs-field:focus { border-bottom-color: #4FAE7E !important; }

/* Light thema: navy tekst, subtiele navy lijn (zoals het voorbeeld).
   background hier opnieuw transparant: er bestaat een light-specifieke regel
   `body.theme-light input[type=email]… { background:#fff }` (0,2,1) die de
   element-loze .cs-field zou verslaan; deze regel matcht qua specificiteit en
   wint door latere bronvolgorde. */
body.theme-light input.cs-field,
body.theme-light textarea.cs-field,
body.theme-light select.cs-field {
    background: transparent !important;
    border-bottom-color: rgba(31, 58, 95, 0.20) !important;
    color: #1F3A5F !important;
}
body.theme-light select.cs-field {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.25rem center !important;
}
body.theme-light select.cs-field option {
    background-color: #ffffff;
    color: #1F3A5F;
}
body.theme-light input.cs-field::placeholder,
body.theme-light textarea.cs-field::placeholder { color: #94a3b8 !important; }
body.theme-light input.cs-field:focus,
body.theme-light textarea.cs-field:focus,
body.theme-light select.cs-field:focus { border-bottom-color: #4FAE7E !important; }
/* Submit-knop die nog niet verstuurd kan worden: ziet er disabled uit maar
   blijft volledig klikbaar (geen aria-disabled/disabled), zodat een klik alsnog
   de reden toont. */
.cs-card button[type="submit"].cs-btn--pending {
    opacity: 0.6;
    cursor: not-allowed;
}
/* Veld met een validatiefout: rode onderlijn. */
.cs-field--invalid,
.cs-field[aria-invalid="true"] {
    border-bottom-color: #f87171 !important; /* red-400 */
}
/* Honeypot: veld off-screen geplaatst zodat mensen het niet zien maar bots
   het wel invullen. Geen display:none — bots detecteren dat en slaan het over. */
.cs-hp {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Verberg Safari/Chrome's autofill-knoppen (poppetje/sleutel-icoon) die de
   browser zelf aan naam/e-mail/tel-velden plakt — past niet bij de strakke
   onderlijn-stijl. Autofill zelf blijft werken via de toetsenbordsuggesties. */
input.cs-field::-webkit-contacts-auto-fill-button,
input.cs-field::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    display: none !important;
    pointer-events: none;
    position: absolute;
    right: 0;
}

/* Dark theme: de hexagon-constellation was navy (blauw-op-blauw, onzichtbaar).
   Groen zodat ze leesbaar zijn en bij de merk-accenten passen. Light houdt navy. */
body.theme-dark .hex-constellation .hex-line { stroke: rgba(79, 174, 126, 0.40) !important; }
body.theme-dark .hex-constellation .hex-node use { fill: rgba(79, 174, 126, 0.55) !important; }
body.theme-dark .hex-constellation .hex-node--lg use { fill: rgba(79, 174, 126, 0.75) !important; }

/* Pagina-hero: het ".x"-label (section-title-lined) is de dominante kop; de
   page-hero-title eronder wordt de kleinere subtitel — zelfde verhouding als de
   homepage-sectiekoppen (label clamp 28-42px > subtitel clamp 20-30px).
   Blijft semantisch een <h1>; enkel visueel kleiner. */
.section-intro:has(.section-title-lined) .page-hero-title {
    font-size: clamp(24px, 2.8vw, 36px) !important;
    font-weight: 900 !important;
}
.section-intro .section-title-lined + .page-hero-title { margin-top: 6px !important; }

/* Sectiekoppen (narrative / grid-intro / aanpak / CTA) kleiner dan de hero-titel,
   zodat de hiërarchie klopt: ".x"-label (clamp 28-42) > hero-titel (clamp 20-30)
   > sectiekop (clamp 18-24). Target = h2 met de md:text-3xl-utility (kaart-koppen
   zijn h3/h4 zonder die class; de hero is .page-hero-title). */
main h2.md\:text-3xl { font-size: var(--tekst-sectiekop) !important; font-weight: 900 !important; }

/* Light: full-screen-menu sub-items waren te grijs (#aab4c8) op de lichte menu-
   achtergrond — navy maken; de groene branch-lijn blijft. */
body.theme-light .cs-menu__subs a { color: #1F3A5F; }
body.theme-light .cs-menu__subs a:hover { color: #4FAE7E; }

/* Light: contactgegevens (rechterkolom) in het full-screen menu waren #d7dde8
   (voor donker) en quasi onzichtbaar op de lichte menu-achtergrond. */
body.theme-light .cs-menu__info a,
body.theme-light .cs-menu__info p { color: #334155; }
body.theme-light .cs-menu__info a:hover { color: #4FAE7E; }

/* === Achtergrond-fx (licht thema, zoals variant -1) =====================
   Crème vlak met drijvende gloed-orbs, subtiel raster en korreltextuur.
   Wordt in het donkere thema verborgen (daar blijft de photowall). */
.bg-fx {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -3;
    overflow: visible;
}
/* In het donkere thema tonen we dezelfde fx-lagen; de screen-blend orbs
   gloeien subtiel op de navy achtergrond. */
body.theme-dark .bg-fx { display: block; }
body.theme-dark .bg-fx__orb { opacity: 0.4; }
.bg-fx__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.55;
    mix-blend-mode: screen;
    will-change: transform;
}
.bg-fx__orb--gold {
    width: 900px; height: 900px;
    background: radial-gradient(circle, rgba(31,58,95,0.35) 0%, rgba(31,58,95,0.08) 50%, transparent 85%);
    top: -400px; left: -380px;
    animation: bgFxDrift1 32s ease-in-out infinite alternate;
}
.bg-fx__orb--blue {
    width: 720px; height: 720px;
    background: radial-gradient(circle, rgba(91,145,122,0.40) 0%, rgba(91,145,122,0.10) 50%, transparent 75%);
    top: 35%; right: -220px;
    animation: bgFxDrift2 38s ease-in-out infinite alternate;
}
.bg-fx__orb--lime {
    width: 540px; height: 540px;
    background: radial-gradient(circle, rgba(72,119,98,0.22) 0%, rgba(72,119,98,0.06) 50%, transparent 75%);
    bottom: -160px; left: 30%;
    animation: bgFxDrift3 44s ease-in-out infinite alternate;
}
/* Honeycomb van de brand-hexagon (i.p.v. het oude vierkantjesraster),
   met dezelfde radiale fade naar de randen. Licht: navy lijntjes;
   donker thema krijgt hieronder een witte variant. */
.bg-fx__grid {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2270.7%22 height=%22122.5%22 viewBox=%220 0 567.0 982.1%22%3E%3Cpath d=%22M567.0,137.0L567.0,354.0C567.0,388.2 548.8,419.8 519.2,436.8L331.3,545.3C316.5,553.8 300.0,558.1 283.5,558.1C267.0,558.1 250.5,553.8 235.7,545.3L47.8,436.8C18.2,419.8 -0.0,388.2 -0.0,354.0L-0.0,137.0C-0.0,102.9 18.2,71.3 47.8,54.2L235.7,-54.2C250.5,-62.8 267.0,-67.1 283.5,-67.1C300.0,-67.1 316.5,-62.8 331.3,-54.2L519.2,54.2C548.8,71.3 567.0,102.9 567.0,137.0Z%22 fill=%22none%22 stroke=%22%231F3A5F%22 stroke-opacity=%220.045%22 stroke-width=%228%22/%3E%3Cpath d=%22M283.5,628.1L283.5,845.1C283.5,879.2 265.3,910.8 235.7,927.9L47.8,1036.4C33.0,1044.9 16.5,1049.2 -0.0,1049.2C-16.5,1049.2 -33.0,1044.9 -47.8,1036.4L-235.7,927.9C-265.3,910.8 -283.5,879.2 -283.5,845.1L-283.5,628.1C-283.5,593.9 -265.3,562.4 -235.7,545.3L-47.8,436.8C-33.0,428.3 -16.5,424.0 -0.0,424.0C16.5,424.0 33.0,428.3 47.8,436.8L235.7,545.3C265.3,562.4 283.5,593.9 283.5,628.1Z%22 fill=%22none%22 stroke=%22%231F3A5F%22 stroke-opacity=%220.045%22 stroke-width=%228%22/%3E%3Cpath d=%22M850.5,628.1L850.5,845.1C850.5,879.2 832.3,910.8 802.7,927.9L614.8,1036.4C600.1,1044.9 583.5,1049.2 567.0,1049.2C550.5,1049.2 534.0,1044.9 519.2,1036.4L331.3,927.9C301.7,910.8 283.5,879.2 283.5,845.1L283.5,628.1C283.5,593.9 301.7,562.4 331.3,545.3L519.2,436.8C534.0,428.3 550.5,424.0 567.0,424.0C583.5,424.0 600.1,428.3 614.8,436.8L802.7,545.3C832.3,562.4 850.5,593.9 850.5,628.1Z%22 fill=%22none%22 stroke=%22%231F3A5F%22 stroke-opacity=%220.045%22 stroke-width=%228%22/%3E%3Cpath d=%22M283.5,-354.0L283.5,-137.0C283.5,-102.9 265.3,-71.3 235.7,-54.2L47.8,54.2C33.0,62.8 16.5,67.1 -0.0,67.1C-16.5,67.1 -33.0,62.8 -47.8,54.2L-235.7,-54.2C-265.3,-71.3 -283.5,-102.9 -283.5,-137.0L-283.5,-354.0C-283.5,-388.2 -265.3,-419.8 -235.7,-436.8L-47.8,-545.3C-33.0,-553.9 -16.5,-558.1 -0.0,-558.1C16.5,-558.1 33.0,-553.9 47.8,-545.3L235.7,-436.8C265.3,-419.8 283.5,-388.2 283.5,-354.0Z%22 fill=%22none%22 stroke=%22%231F3A5F%22 stroke-opacity=%220.045%22 stroke-width=%228%22/%3E%3Cpath d=%22M850.5,-354.0L850.5,-137.0C850.5,-102.9 832.3,-71.3 802.7,-54.2L614.8,54.2C600.1,62.8 583.5,67.1 567.0,67.1C550.5,67.1 534.0,62.8 519.2,54.2L331.3,-54.2C301.7,-71.3 283.5,-102.9 283.5,-137.0L283.5,-354.0C283.5,-388.2 301.7,-419.8 331.3,-436.8L519.2,-545.3C534.0,-553.9 550.5,-558.1 567.0,-558.1C583.5,-558.1 600.1,-553.9 614.8,-545.3L802.7,-436.8C832.3,-419.8 850.5,-388.2 850.5,-354.0Z%22 fill=%22none%22 stroke=%22%231F3A5F%22 stroke-opacity=%220.045%22 stroke-width=%228%22/%3E%3Cpath d=%22M567.0,1119.2L567.0,1336.1C567.0,1370.3 548.8,1401.9 519.2,1419.0L331.3,1527.4C316.5,1536.0 300.0,1540.2 283.5,1540.2C267.0,1540.2 250.5,1536.0 235.7,1527.4L47.8,1419.0C18.2,1401.9 -0.0,1370.3 -0.0,1336.1L-0.0,1119.2C-0.0,1085.0 18.2,1053.4 47.8,1036.4L235.7,927.9C250.5,919.3 267.0,915.1 283.5,915.1C300.0,915.1 316.5,919.3 331.3,927.9L519.2,1036.4C548.8,1053.4 567.0,1085.0 567.0,1119.2Z%22 fill=%22none%22 stroke=%22%231F3A5F%22 stroke-opacity=%220.045%22 stroke-width=%228%22/%3E%3Cpath d=%22M567.0,-845.1L567.0,-628.1C567.0,-594.0 548.8,-562.4 519.2,-545.3L331.3,-436.8C316.5,-428.3 300.0,-424.0 283.5,-424.0C267.0,-424.0 250.5,-428.3 235.7,-436.8L47.8,-545.3C18.2,-562.4 -0.0,-594.0 -0.0,-628.1L-0.0,-845.1C-0.0,-879.2 18.2,-910.8 47.8,-927.9L235.7,-1036.4C250.5,-1044.9 267.0,-1049.2 283.5,-1049.2C300.0,-1049.2 316.5,-1044.9 331.3,-1036.4L519.2,-927.9C548.8,-910.8 567.0,-879.2 567.0,-845.1Z%22 fill=%22none%22 stroke=%22%231F3A5F%22 stroke-opacity=%220.045%22 stroke-width=%228%22/%3E%3C/svg%3E");
    background-size: 70.7px 122.5px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
body.theme-dark .bg-fx__grid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2270.7%22 height=%22122.5%22 viewBox=%220 0 567.0 982.1%22%3E%3Cpath d=%22M567.0,137.0L567.0,354.0C567.0,388.2 548.8,419.8 519.2,436.8L331.3,545.3C316.5,553.8 300.0,558.1 283.5,558.1C267.0,558.1 250.5,553.8 235.7,545.3L47.8,436.8C18.2,419.8 -0.0,388.2 -0.0,354.0L-0.0,137.0C-0.0,102.9 18.2,71.3 47.8,54.2L235.7,-54.2C250.5,-62.8 267.0,-67.1 283.5,-67.1C300.0,-67.1 316.5,-62.8 331.3,-54.2L519.2,54.2C548.8,71.3 567.0,102.9 567.0,137.0Z%22 fill=%22none%22 stroke=%22%234FAE7E%22 stroke-opacity=%220.06%22 stroke-width=%228%22/%3E%3Cpath d=%22M283.5,628.1L283.5,845.1C283.5,879.2 265.3,910.8 235.7,927.9L47.8,1036.4C33.0,1044.9 16.5,1049.2 -0.0,1049.2C-16.5,1049.2 -33.0,1044.9 -47.8,1036.4L-235.7,927.9C-265.3,910.8 -283.5,879.2 -283.5,845.1L-283.5,628.1C-283.5,593.9 -265.3,562.4 -235.7,545.3L-47.8,436.8C-33.0,428.3 -16.5,424.0 -0.0,424.0C16.5,424.0 33.0,428.3 47.8,436.8L235.7,545.3C265.3,562.4 283.5,593.9 283.5,628.1Z%22 fill=%22none%22 stroke=%22%234FAE7E%22 stroke-opacity=%220.06%22 stroke-width=%228%22/%3E%3Cpath d=%22M850.5,628.1L850.5,845.1C850.5,879.2 832.3,910.8 802.7,927.9L614.8,1036.4C600.1,1044.9 583.5,1049.2 567.0,1049.2C550.5,1049.2 534.0,1044.9 519.2,1036.4L331.3,927.9C301.7,910.8 283.5,879.2 283.5,845.1L283.5,628.1C283.5,593.9 301.7,562.4 331.3,545.3L519.2,436.8C534.0,428.3 550.5,424.0 567.0,424.0C583.5,424.0 600.1,428.3 614.8,436.8L802.7,545.3C832.3,562.4 850.5,593.9 850.5,628.1Z%22 fill=%22none%22 stroke=%22%234FAE7E%22 stroke-opacity=%220.06%22 stroke-width=%228%22/%3E%3Cpath d=%22M283.5,-354.0L283.5,-137.0C283.5,-102.9 265.3,-71.3 235.7,-54.2L47.8,54.2C33.0,62.8 16.5,67.1 -0.0,67.1C-16.5,67.1 -33.0,62.8 -47.8,54.2L-235.7,-54.2C-265.3,-71.3 -283.5,-102.9 -283.5,-137.0L-283.5,-354.0C-283.5,-388.2 -265.3,-419.8 -235.7,-436.8L-47.8,-545.3C-33.0,-553.9 -16.5,-558.1 -0.0,-558.1C16.5,-558.1 33.0,-553.9 47.8,-545.3L235.7,-436.8C265.3,-419.8 283.5,-388.2 283.5,-354.0Z%22 fill=%22none%22 stroke=%22%234FAE7E%22 stroke-opacity=%220.06%22 stroke-width=%228%22/%3E%3Cpath d=%22M850.5,-354.0L850.5,-137.0C850.5,-102.9 832.3,-71.3 802.7,-54.2L614.8,54.2C600.1,62.8 583.5,67.1 567.0,67.1C550.5,67.1 534.0,62.8 519.2,54.2L331.3,-54.2C301.7,-71.3 283.5,-102.9 283.5,-137.0L283.5,-354.0C283.5,-388.2 301.7,-419.8 331.3,-436.8L519.2,-545.3C534.0,-553.9 550.5,-558.1 567.0,-558.1C583.5,-558.1 600.1,-553.9 614.8,-545.3L802.7,-436.8C832.3,-419.8 850.5,-388.2 850.5,-354.0Z%22 fill=%22none%22 stroke=%22%234FAE7E%22 stroke-opacity=%220.06%22 stroke-width=%228%22/%3E%3Cpath d=%22M567.0,1119.2L567.0,1336.1C567.0,1370.3 548.8,1401.9 519.2,1419.0L331.3,1527.4C316.5,1536.0 300.0,1540.2 283.5,1540.2C267.0,1540.2 250.5,1536.0 235.7,1527.4L47.8,1419.0C18.2,1401.9 -0.0,1370.3 -0.0,1336.1L-0.0,1119.2C-0.0,1085.0 18.2,1053.4 47.8,1036.4L235.7,927.9C250.5,919.3 267.0,915.1 283.5,915.1C300.0,915.1 316.5,919.3 331.3,927.9L519.2,1036.4C548.8,1053.4 567.0,1085.0 567.0,1119.2Z%22 fill=%22none%22 stroke=%22%234FAE7E%22 stroke-opacity=%220.06%22 stroke-width=%228%22/%3E%3Cpath d=%22M567.0,-845.1L567.0,-628.1C567.0,-594.0 548.8,-562.4 519.2,-545.3L331.3,-436.8C316.5,-428.3 300.0,-424.0 283.5,-424.0C267.0,-424.0 250.5,-428.3 235.7,-436.8L47.8,-545.3C18.2,-562.4 -0.0,-594.0 -0.0,-628.1L-0.0,-845.1C-0.0,-879.2 18.2,-910.8 47.8,-927.9L235.7,-1036.4C250.5,-1044.9 267.0,-1049.2 283.5,-1049.2C300.0,-1049.2 316.5,-1044.9 331.3,-1036.4L519.2,-927.9C548.8,-910.8 567.0,-879.2 567.0,-845.1Z%22 fill=%22none%22 stroke=%22%234FAE7E%22 stroke-opacity=%220.06%22 stroke-width=%228%22/%3E%3C/svg%3E");
}
.bg-fx__noise {
    position: absolute;
    inset: 0;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}
@keyframes bgFxDrift1 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(120px, 80px) scale(1.15); }
}
@keyframes bgFxDrift2 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-140px, -90px) scale(1.1); }
}
@keyframes bgFxDrift3 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(80px, -120px) scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
    .bg-fx__orb { animation: none; }
}

/* =======================================================================
   Over ons — team-portretten + client-proof
   Hexagon-frame portretten (pointy-top, zoals de merk-hexagon). Nu
   placeholder (initialen-monogram); echte duotone-illustratie later via
   <img class="cs-portrait__img"> zonder dat het frame verandert.
   ======================================================================= */
.cs-team-card { text-align: center; }

.cs-portrait {
    position: relative;
    width: 118px;
    height: 130px;              /* ratio ~0.907, gelijk aan de merk-hexagon */
    margin: 0 auto 16px;
    filter: drop-shadow(0 8px 16px rgba(2, 9, 40, 0.20));
}
/* Groene rim achter het portret */
.cs-portrait::before {
    content: '';
    position: absolute;
    inset: -3px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: #4FAE7E;
    z-index: 0;
}
.cs-portrait__hex {
    position: absolute;
    inset: 0;
    z-index: 1;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(79, 174, 126, 0.12);
}
.cs-portrait__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cs-portrait__initials {
    font-family: var(--font-basis);
    font-weight: 800;
    font-size: 30px;
    letter-spacing: 0.03em;
    color: #4FAE7E;
}
.cs-team-name {
    font-family: var(--font-basis);
    font-weight: 700;
    font-variant: small-caps;
}
.cs-team-role {
    font-family: var(--font-basis);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #4FAE7E;
    margin-top: 2px;
}
/* Placeholder-vulling ondoorzichtig zodat de groene rim niet doorschemert en
   de initialen leesbaar blijven; een echte <img> dekt dit later gewoon af. */
body.theme-dark .cs-portrait--placeholder .cs-portrait__hex { background: #0e1a38; }
body.theme-light .cs-portrait--placeholder .cs-portrait__hex { background: #e7edf5; }
body.theme-light .cs-portrait__initials { color: #4FAE7E; }
body.theme-dark .cs-team-name { color: #ffffff; }
body.theme-light .cs-team-name { color: #1F3A5F; }

/* Client-proof: placeholder logo-strip (grijstinten, gestippelde rand = leeg) */
.cs-clients {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
@media (min-width: 640px) { .cs-clients { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .cs-clients { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.cs-client-logo {
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    border: 1px dashed rgba(31, 58, 95, 0.20);
    font-family: var(--font-basis);
    font-weight: 800;
    letter-spacing: 0.05em;
    font-size: 14px;
    color: #64748b;
}
body.theme-dark .cs-client-logo {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    color: #8893a8;
}
body.theme-light .cs-client-logo {
    border-color: rgba(31, 58, 95, 0.18);
    background: rgba(31, 58, 95, 0.03);
    color: #64748b;
}

/* === Bredere content op grote schermen ===================================
   De standaardcontainer is 72rem (1152px). Op ruime monitors en ultrawides
   mag de inhoud meer van het scherm gebruiken: 80rem vanaf 1600px, 86rem
   vanaf 2200px. De header-container groeit mee (zelfde klasse), en de
   main-zijmarges (vrije zones voor logo en iconen) rekenen met dezelfde
   breedte zodat content nooit over logo of iconen schuift. Binnenliggende
   tekstblokken (max-w-2xl/3xl) behouden hun leesbare regellengte. */
@media (min-width: 1600px) {
    .max-w-6xl { max-width: 80rem !important; }
    /* Vanaf hier hoeft de vrije-zone-marge niet meer bovenop de centrering:
       de content haalt de volle containerbreedte. De max()-ondergrens houdt
       de hoekzones vrij die er bij het scrollen echt toe doen: links het
       gekrompen ".cs"-logo (tot ±140px vanaf de rand), rechts de thema- en
       menu-iconen (tot ±150px vanaf de rand). */
    main#main {
        padding-left: max(9.5rem, calc((100% - 80rem) / 2)) !important;
        padding-right: max(11rem, calc((100% - 80rem) / 2)) !important;
    }
}
@media (min-width: 2200px) {
    .max-w-6xl { max-width: 86rem !important; }
    main#main {
        padding-left: max(9.5rem, calc((100% - 86rem) / 2)) !important;
        padding-right: max(11rem, calc((100% - 86rem) / 2)) !important;
    }
}

/* === Formulier-verzendknop: disabled = duidelijk inactief ================
   De vale groene knop las als "kapot". Zolang het formulier niet verzend-
   klaar is (privacy-checkbox/Turnstile) toont de knop neutraal grijs. */
body.theme-light form button[type="submit"]:disabled {
    background-color: #D5DAD6 !important;
    color: #8C958F !important;
    box-shadow: none !important;
    opacity: 1 !important;
}
body.theme-dark form button[type="submit"]:disabled {
    background-color: #22314A !important;
    color: #7E8AA0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* === Contactpagina =======================================================
   Het formulier krijgt de volle contentbreedte; de gegevens staan als
   compacte strip eronder: één rij op desktop, 2 kolommen op tablet,
   gestapeld op mobiel. Kaartinhoud lijnt strak bovenaan uit. */
.cs-card { align-content: start; }

/* === Kaart-hover: lift + schaduw per thema ===============================
   De themablokken zetten de basis-schaduw met !important; deze regels staan
   bewust ná die blokken en met dezelfde kracht, anders wint de basis en
   blijft alleen de icoon-animatie zichtbaar. */
body.theme-light .cs-card:hover {
    transform: translateY(-4px) !important;
    box-shadow:
        0 18px 40px rgba(31, 58, 95, 0.13),
        0 0 22px rgba(79, 174, 126, 0.10) !important;
}
body.theme-dark .cs-card:hover {
    transform: translateY(-4px) !important;
    box-shadow:
        0 20px 44px rgba(0, 0, 0, 0.55),
        0 0 22px rgba(79, 174, 126, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
@media (prefers-reduced-motion: reduce) {
    body.theme-light .cs-card:hover,
    body.theme-dark .cs-card:hover { transform: none !important; }
}

/* === Kaarten: tags en CTA onderaan verankerd =============================
   Kaarten naast elkaar zijn even hoog (grid-stretch); door de eerste
   tekstrij de flexibele ruimte te geven (1fr) zakken tag-rijen en CTA's
   naar de onderkant en lijnen ze over alle kaarten heen mooi uit. Bij een
   losse kaart (geen stretch) is er geen vrije ruimte en gedraagt de
   1fr-rij zich gewoon als auto. */
.cs-card {
    grid-template-rows: auto 1fr;
}
a.cs-card.block {
    height: 100%;
}

/* === Footer-adres: kaart-icoontje verschijnt bij hover ==================== */
.cs-footer-adres svg {
    display: inline-block;
    width: 0.95em;
    height: 0.95em;
    margin-right: 5px;
    vertical-align: -0.12em;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    transform: translateY(2px);
}
.cs-footer-adres:hover svg {
    opacity: 1;
    transform: none;
}

/* === Actieve nav-link in het donkere thema ================================
   .nav-link-active forceert navy (#020928) — onzichtbaar op de donkere
   achtergrond (menu, footer). In het donkere thema wordt de actieve pagina
   groen gemarkeerd. */
body.theme-dark .nav-link-active { color: #4FAE7E !important; }


/* === Hexagon-redesign (terug te draaien: zie checkpoint-commit) ==========
   1) Statistieken in brand-hexagonen i.p.v. de generieke cijferrij.
   2) Gloed-orbs sterk teruggeschroefd — de honingraat draagt de textuur.
   */

/* 1. Stats in hexagonen */
.grid > div:has(> .cs-stat-number) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-303.5 -332.6 607.0 665.2%22%3E%3Cpath d=%22M283.5,-108.5L283.5,108.5C283.5,142.6 265.3,174.2 235.7,191.3L47.8,299.8C33.0,308.3 16.5,312.6 -0.0,312.6C-16.5,312.6 -33.0,308.3 -47.8,299.8L-235.7,191.3C-265.3,174.2 -283.5,142.6 -283.5,108.5L-283.5,-108.5C-283.5,-142.7 -265.3,-174.2 -235.7,-191.3L-47.8,-299.8C-33.0,-308.3 -16.5,-312.6 -0.0,-312.6C16.5,-312.6 33.0,-308.3 47.8,-299.8L235.7,-191.3C265.3,-174.2 283.5,-142.7 283.5,-108.5Z%22 fill=%22rgba%2879,174,126,0.06%29%22 stroke=%22%234FAE7E%22 stroke-opacity=%220.55%22 stroke-width=%2212%22/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    aspect-ratio: 607 / 665;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* 2. Orbs subtieler */
.bg-fx__orb { opacity: 0.22; }
body.theme-dark .bg-fx__orb { opacity: 0.15; }


/* === "Zo werken we": opsomming in twee kolommen =========================
   Intro bovenaan over de volle breedte; de vier principes links en rechts
   van één verticale haarlijn. Redactioneel, geen kaarten. */
.cs-werkwijze { display: grid; gap: 2.75rem; position: relative; }
@media (min-width: 1024px) {
    /* Eén grid met gedeelde rijen: blokken in dezelfde rij starten op gelijke hoogte.
       Kolommen vullen de sectiebreedte (zelfde basis als de SPRINT-rij). */
    .cs-werkwijze {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, auto);
        grid-auto-flow: column;
        gap: 2.75rem 0;
    }
    .cs-werkwijze > .cs-werkwijze__lijst { display: contents; }
    /* Duo-variant: één blok links, één rechts — met één rij zou de
       kolom-flow anders beide blokken in de linkerkolom stapelen */
    .cs-werkwijze.cs-werkwijze--2 { grid-template-rows: auto; }
    .cs-werkwijze__lijst:first-child .cs-principe { padding-right: 4rem; }
    .cs-werkwijze__lijst:last-child .cs-principe { padding-left: 4rem; }
    .cs-werkwijze::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 1px;
        background: rgba(2, 9, 40, 0.12);
    }
    body.theme-dark .cs-werkwijze::after { background: rgba(255, 255, 255, 0.10); }
}
.cs-werkwijze__lijst { display: flex; flex-direction: column; gap: 2.75rem; }
.cs-principe {
    display: grid;
    grid-template-columns: 4.25rem 1fr;
    column-gap: 1.25rem;
    align-items: start;
}
.cs-principe__nr {
    font-family: var(--font-basis);
    font-size: 2.25rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
    color: rgba(31, 58, 95, 0.35);
    transform: translateY(-0.1em);
}
body.theme-dark .cs-principe__nr { color: rgba(255, 255, 255, 0.28); }
.cs-principe__titel { margin: 0 0 0.5rem; font-size: var(--tekst-bloktitel) !important; line-height: 1.25; }
.cs-principe__tekst { margin: 0; font-size: var(--tekst-body); line-height: 1.7; color: #4B5563; }
body.theme-dark .cs-principe__tekst { color: #aab4c8; }

/* Links uitgelijnde variant van het sectielabel (voor de split-sectie) */
.section-title-lined--left { justify-content: flex-start; }

/* === Diensten: genummerde kolommen met scheidingslijnen ================== */
.cs-diensten-rij { display: grid; grid-template-columns: 1fr; gap: 2.5rem 0; }
@media (min-width: 640px) and (max-width: 1023.98px) {
    .cs-diensten-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .cs-diensten-rij { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    /* Twee/drie kolommen over de volle sectiebreedte (zelfde basis als de SPRINT-rij) */
    .cs-diensten-rij--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cs-diensten-rij--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* In het 2-kolomsraster begint elke rij zonder lijn */
    .cs-diensten-rij--2 > .cs-dienst:nth-child(2n+1) { border-left: 0; padding-left: 0; }
}
.cs-dienst {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 2rem;
    text-decoration: none;
    color: inherit;
}
@media (min-width: 640px) {
    .cs-dienst { border-left: 1px solid rgba(2, 9, 40, 0.12); }
    .cs-dienst:first-child { border-left: 0; padding-left: 0; }
    body.theme-dark .cs-dienst { border-left-color: rgba(255, 255, 255, 0.10); }
    body.theme-dark .cs-dienst:first-child { border-left: 0; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
    /* in het 2-kolomsraster begint elke rij zonder lijn */
    .cs-dienst:nth-child(2n+1) { border-left: 0; padding-left: 0; }
}
.cs-dienst__nr {
    font-family: var(--font-basis);
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
    color: rgba(31, 58, 95, 0.35);
    margin-bottom: 1.25rem;
    transition: color 0.25s ease;
}
body.theme-dark .cs-dienst__nr { color: rgba(255, 255, 255, 0.28); }
.cs-dienst__titel { margin: 0 0 0.75rem; font-size: var(--tekst-bloktitel) !important; line-height: 1.25; }
.cs-dienst__tekst { margin: 0 0 1.5rem; font-size: var(--tekst-body); line-height: 1.7; color: #4B5563; }
body.theme-dark .cs-dienst__tekst { color: #aab4c8; }
.cs-dienst__cta {
    margin-top: auto;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #4FAE7E;
    transition: letter-spacing 0.25s ease;
}
.cs-dienst:hover .cs-dienst__nr { color: #4FAE7E; }
.cs-dienst:hover .cs-dienst__cta { letter-spacing: 0.16em; }

/* Nummers uitgeschakeld ter beoordeling — verwijder deze twee regels om
   ze terug te tonen. */
.cs-dienst__nr { display: none; }
.cs-principe__nr { display: none; }
.cs-principe { grid-template-columns: 1fr; }

/* Meer lucht rond de redactionele secties op de homepage/dienstenpagina */
.cs-diensten-rij { margin-top: 4.5rem; }
.cs-werkwijze { margin-top: 4.5rem; }
.cs-dienst__tekst { margin-bottom: 2rem; }

/* === Luchtiger zonder tekst te schrappen ================================
   Groen accentstreepje boven elke titel als rustpunt voor het oog, ruimere
   kolom-goten, meer regelafstand en een zachtere tekstkleur. */
.cs-dienst__titel::before,
.cs-principe__titel::before {
    content: '';
    display: block;
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background: #4FAE7E;
    margin-bottom: 1rem;
}
.cs-dienst { padding: 0.5rem 2.5rem; }
.cs-dienst__titel { margin-bottom: 1rem; }
.cs-dienst__tekst { line-height: 1.8; color: #5B6673; }
body.theme-dark .cs-dienst__tekst { color: #9aa6bb; }
.cs-principe__titel { margin-bottom: 0.75rem; }
.cs-principe__tekst { line-height: 1.8; color: #5B6673; }
body.theme-dark .cs-principe__tekst { color: #9aa6bb; }
.cs-werkwijze__lijst { gap: 3.25rem; }

/* ████ REDACTIONELE SKIN — hele site ter beoordeling ████████████████████████
   Kaarten worden open tekstblokken: geen vlak, geen rand, geen schaduw,
   geen lift; generieke iconen uit; groen accentstreepje boven elke titel.
   Uitzonderingen: de contactformulier-kaart (tabs) en de vacaturekaarten
   behouden hun vlak. Verwijder dit hele blok om terug te keren naar de
   kaartweergave. */
main .cs-card:not(.cs-job):not(:has(.cs-contact-tablist)) {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0.5rem 0 !important;
}
main .cs-card:not(.cs-job):not(:has(.cs-contact-tablist)):hover {
    transform: none !important;
    box-shadow: none !important;
}
main .cs-card:not(.cs-job):not(:has(.cs-contact-tablist)) > div:has(> svg) {
    display: none;
}
main .cs-card:not(.cs-job):not(:has(.cs-contact-tablist)) > h2,
main .cs-card:not(.cs-job):not(:has(.cs-contact-tablist)) > h3,
main .cs-card:not(.cs-job):not(:has(.cs-contact-tablist)) > h4 {
    grid-column: 1 / -1;
}
/* Zelfde lucht als de dienstenkolommen: lossere tekst, zachtere kleur */
main .cs-card:not(.cs-job):not(:has(.cs-contact-tablist)) p {
    line-height: 1.8;
}
body.theme-light main .cs-card:not(.cs-job):not(:has(.cs-contact-tablist)) p { color: #5B6673; }
body.theme-dark main .cs-card:not(.cs-job):not(:has(.cs-contact-tablist)) p { color: #9aa6bb; }
/* Iets ruimere rijen in kaart-grids nu de vlakken weg zijn */
main .grid:has(> .cs-card:not(.cs-job)) { row-gap: 3rem; }
/* ████ EINDE REDACTIONELE SKIN ██████████████████████████████████████████████ */

/* === Ritme-banden ========================================================
   Volle-breedte secties met een subtiele achtergrondtint — groeperen
   zoals een kaart, maar zonder dozen. Wisselen af met open secties. */
.cs-band {
    isolation: isolate;
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
}
.cs-band::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: rgba(31, 58, 95, 0.035);
    border-top: 1px solid rgba(2, 9, 40, 0.07);
    border-bottom: 1px solid rgba(2, 9, 40, 0.07);
    z-index: -1;
}
body.theme-dark .cs-band::before {
    background: rgba(255, 255, 255, 0.03);
    border-top-color: rgba(255, 255, 255, 0.05);
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

/* === Blokken binnen banden: open en gestapeld =============================
   Zoals het "Wat wij van jou vragen"-blok: kop bovenaan, tekst eronder,
   ruime tussenafstand — geen kolomsplitsing, geen haarlijnen. */
.cs-band .grid:has(> .cs-card:not(.cs-job)) {
    display: block;
}
.cs-band .cs-card:not(.cs-job):not(:has(.cs-contact-tablist)) {
    padding: 0 !important;
    margin-bottom: 3.25rem;
}
.cs-band .grid > .cs-card:not(.cs-job):last-child { margin-bottom: 0; }
.cs-band .cs-card:not(.cs-job) > h2,
.cs-band .cs-card:not(.cs-job) > h3,
.cs-band .cs-card:not(.cs-job) > h4 {
    grid-column: 1 / -1;
    margin-bottom: 0.75rem;
}

/* Geen streepje binnen banden — de band en de haarlijnen groeperen al */
.cs-band .cs-card > h2::before,
.cs-band .cs-card > h3::before,
.cs-band .cs-card > h4::before,
.cs-band .cs-principe__titel::before {
    content: none !important;
}

/* Aangrenzende banden naadloos samensmelten (kop-sectie + inhoud-sectie) */
.cs-band + .cs-band {
    margin-top: 0 !important;
    padding-top: 0;
}
.cs-band + .cs-band::before { border-top: 0; }
.cs-band:has(+ .cs-band) { padding-bottom: 0.5rem; }
.cs-band:has(+ .cs-band)::before { border-bottom: 0; }

/* === Echte kaarten terug op geselecteerde secties (.cs-cards-echt) =======
   Derde patroon naast de dienstenkolommen en de band-rijen: klassieke
   kaarten met vlak, icoon en hover-lift — spaarzaam ingezet voor variatie.
   (.cs-card driemaal herhaald: wint zo van de redactionele skin-regel met
   zijn :not-ketens, die anders hogere specificiteit heeft.) */
main .cs-cards-echt .cs-card.cs-card.cs-card {
    /* Licht thema: zelfde glas-effect als in het donker — warm translucent
       vlak waar de honingraat zacht doorheen schemert. */
    background: rgba(255, 252, 245, 0.55) !important;
    border: 1px solid rgba(31, 58, 95, 0.10) !important;
    box-shadow: 0 10px 30px rgba(31, 58, 95, 0.08) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    padding: 2rem !important;
    border-radius: 24px;
}
body.theme-dark main .cs-cards-echt .cs-card.cs-card.cs-card {
    background: rgba(20, 33, 56, 0.55) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}
main .cs-cards-echt .cs-card.cs-card.cs-card > div:has(> svg) { display: block; }
main .cs-cards-echt .cs-card.cs-card.cs-card > h2,
main .cs-cards-echt .cs-card.cs-card.cs-card > h3,
main .cs-cards-echt .cs-card.cs-card.cs-card > h4 { grid-column: 2; }
body.theme-light main .cs-cards-echt .cs-card.cs-card.cs-card:hover,
body.theme-dark main .cs-cards-echt .cs-card.cs-card.cs-card:hover {
    transform: translateY(-4px) !important;
}
body.theme-light main .cs-cards-echt .cs-card.cs-card.cs-card:hover {
    box-shadow: 0 18px 40px rgba(31, 58, 95, 0.13), 0 0 22px rgba(79, 174, 126, 0.10) !important;
}
body.theme-dark main .cs-cards-echt .cs-card.cs-card.cs-card:hover {
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55), 0 0 22px rgba(79, 174, 126, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
main .cs-cards-echt .grid:has(> .cs-card) { row-gap: 1.5rem; }
@media (min-width: 768px) {
}


.cs-jobs-puzzle__visual--trio {
    background: transparent;
    margin-top: 0;
}
/* === Hexagon-bullets voor de vraag-lijstjes =============================
   Klein en subtiel brand-hexagonnetje in het groen. */
.cs-hexlijst { list-style: none; margin-left: 0; padding-left: 0; }
.cs-hexlijst li::before {
    content: '';
    display: inline-block;
    width: 0.42em;
    height: 0.49em;
    margin-right: 0.55em;
    vertical-align: 0.02em;
    background-color: rgba(79, 174, 126, 0.85);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 116'%3E%3Cpath d='M39,6.38 Q50,0 61,6.38 L89,22.62 Q100,29 100,41.76 L100,74.24 Q100,87 89,93.38 L61,109.62 Q50,116 39,109.62 L11,93.38 Q0,87 0,74.24 L0,41.76 Q0,29 11,22.62 Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 116'%3E%3Cpath d='M39,6.38 Q50,0 61,6.38 L89,22.62 Q100,29 100,41.76 L100,74.24 Q100,87 89,93.38 L61,109.62 Q50,116 39,109.62 L11,93.38 Q0,87 0,74.24 L0,41.76 Q0,29 11,22.62 Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* === Achtergrond doorgetrokken op korte pagina's =========================
   Het html-element schemerde grijs door onder de footer wanneer de inhoud
   korter is dan het venster. html volgt nu het thema en body vult minstens
   de volledige vensterhoogte. */
html { background-color: #F5F1EA; }
html:has(body.theme-dark) { background-color: #020928; }
body { min-height: 100vh; }

/* === Vacatures als open rijen (geen kaarten) =============================
   Elke vacature is een rij met een haarlijn erboven, in lijn met de open
   redactionele stijl van de rest van de site. */
.cs-job-list .cs-job.cs-card {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 2.5rem 0 !important;
    border-top: 1px solid rgba(2, 9, 40, 0.12) !important;
}
.cs-job-list .cs-job.cs-card:last-child { border-bottom: 1px solid rgba(2, 9, 40, 0.12) !important; }
body.theme-dark .cs-job-list .cs-job.cs-card { border-top-color: rgba(255, 255, 255, 0.10) !important; }
body.theme-dark .cs-job-list .cs-job.cs-card:last-child { border-bottom-color: rgba(255, 255, 255, 0.10) !important; }
.cs-job-list .cs-job.cs-card:hover { transform: none !important; box-shadow: none !important; }

/* === Footer altijd onderaan het venster ==================================
   Body als kolom-flex: main rekt mee, de footer plakt aan de onderkant,
   ook op korte pagina's. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main#main { flex: 1 0 auto; width: 100%; }
body > footer { margin-top: auto; }

/* === Uitgelicht item boven een kolommenrij ===============================
   Volle breedte, zonder zijlijnen; de kolommenrij volgt eronder. */
.cs-dienst--breed {
    padding-left: 0;
    padding-right: 0;
    border-left: 0 !important;
    margin-bottom: 3.25rem;
}
@media (min-width: 768px) {
}

/* === Fotocarrousel in de jobbanner (vervangt het hexagon-trio) ===========
   Zelfde kaartvorm als de huidige kaarten: afgeronde hoeken, rand, schaduw.
   Foto's faden in elkaar over; bolletjes onderaan om te wisselen. */
.cs-jobs-carrousel {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(31, 58, 95, 0.10);
    box-shadow: 0 10px 30px rgba(31, 58, 95, 0.08);
}
body.theme-dark .cs-jobs-carrousel {
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}
.cs-jobs-carrousel__dia {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.7s ease;
}
.cs-jobs-carrousel__dia.is-actief { opacity: 1; }
.cs-jobs-carrousel__dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 14px;
    display: flex;
    gap: 8px;
    z-index: 2;
}
.cs-jobs-carrousel__dot {
    width: 9px;
    height: 9px;
    border-radius: 9999px;
    border: 0;
    padding: 0;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 1px 4px rgba(2, 9, 40, 0.4);
    transition: background 0.25s ease, transform 0.25s ease;
}
.cs-jobs-carrousel__dot.is-actief { background: #4FAE7E; transform: scale(1.15); }

/* Kaartkoppen die expliciet gecentreerd zijn krijgen volle breedte —
   de fit-content-breedte van kaarttitels maakt text-center anders loos. */
.cs-card h2.text-center,
.cs-card h3.text-center {
    width: 100%;
}

/* Carrousel: hoger dan de oude honingraat-banner */
.cs-jobs-puzzle__visual--trio { aspect-ratio: 1152 / 500; }

/* === Spacing: kop en inhoud horen bij elkaar =============================
   De generieke 4.5rem-marge boven rijen/werkwijzes is bedoeld voor secties
   met een intro; direct na een kop (section-intro) of als eerste kind van
   een sectie hoort de inhoud dichter bij zijn titel. */
.section-intro + .cs-diensten-rij,
.section-intro + .cs-werkwijze {
    margin-top: 2.75rem;
}
section > .cs-diensten-rij:first-child,
section > .cs-werkwijze:first-child,
section > div:first-child > .cs-diensten-rij:only-child {
    margin-top: 0.75rem;
}

/* === Carrousel: vooruit/achteruit-pijlen ================================= */
.cs-jobs-carrousel__pijl {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 28px;
    height: 32px;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* subtiel frosted glas in de brand-hexagonvorm */
    background: rgba(2, 9, 40, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 116'%3E%3Cpath fill='%23000' d='M39,6.38 Q50,0 61,6.38 L89,22.62 Q100,29 100,41.76 L100,74.24 Q100,87 89,93.38 L61,109.62 Q50,116 39,109.62 L11,93.38 Q0,87 0,74.24 L0,41.76 Q0,29 11,22.62 Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 116'%3E%3Cpath fill='%23000' d='M39,6.38 Q50,0 61,6.38 L89,22.62 Q100,29 100,41.76 L100,74.24 Q100,87 89,93.38 L61,109.62 Q50,116 39,109.62 L11,93.38 Q0,87 0,74.24 L0,41.76 Q0,29 11,22.62 Z'/%3E%3C/svg%3E") center / contain no-repeat;
    color: #4FAE7E;
    transition: background 0.25s ease, transform 0.25s ease;
}
.cs-jobs-carrousel__pijl:hover { background: rgba(2, 9, 40, 0.45); transform: translateY(-50%) scale(1.08); }
.cs-jobs-carrousel__pijl--vorige { left: 10px; }
.cs-jobs-carrousel__pijl--volgende { right: 10px; }
.cs-jobs-carrousel__pijl svg { width: 17px; height: 17px; }


/* === Typografische hiërarchie ============================================
   Sectiekoppen duidelijk groter dan kaart- en staptitels (die blijven op
   1.5rem), zodat de middenlaag drie leesbare niveaus krijgt. */
main section > h2,
main .section-intro h2 {
    font-size: var(--tekst-sectiekop) !important;
    line-height: 1.15;
    letter-spacing: -0.015em;
}